:root { --ink:#08110f; --ink-2:#0d1b18; --surface:#13231f; --surface-2:#1a2e29; --line:rgba(232,239,222,.12); --paper:#eef2e8; --muted:#9eafa6; --dim:#71847a; --lime:#d9f36b; --coral:#ff7f68; --cyan:#8ee7d3; --serif:"Syne",sans-serif; --sans:"DM Sans",sans-serif; --radius:14px; --ease:cubic-bezier(.2,.8,.2,1); }
* { box-sizing:border-box; } html { background:var(--ink); scroll-behavior:smooth; } body { margin:0; color:var(--paper); background:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.5; } button,input,select { font:inherit; } button,a { -webkit-tap-highlight-color:transparent; } a { color:inherit; text-decoration:none; } button { border:0; color:inherit; cursor:pointer; }
.app-shell { min-height:100vh; overflow:hidden; } .topbar { position:fixed; inset:0 0 auto; z-index:20; display:flex; align-items:center; gap:44px; height:76px; padding:0 clamp(22px,5vw,76px); background:linear-gradient(180deg,rgba(8,17,15,.95),rgba(8,17,15,.64),transparent); transition:background .3s; } .topbar.scrolled { background:rgba(8,17,15,.96); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; font:700 22px var(--serif); letter-spacing:-.06em; } .brand-mark { display:grid; place-items:center; width:28px; height:28px; background:var(--lime); color:var(--ink); font:800 16px var(--serif); border-radius:8px 8px 8px 2px; } .desktop-nav { display:flex; align-items:center; gap:28px; color:var(--muted); font-size:14px; } .desktop-nav a,.mobile-nav a { transition:color .2s; } .desktop-nav a:hover,.desktop-nav a.active,.mobile-nav a.active { color:var(--lime); } .top-actions { display:flex; align-items:center; gap:17px; margin-left:auto; } .icon-btn { background:none; color:var(--paper); font-size:29px; line-height:1; padding:4px; } .profile-chip { display:flex; align-items:center; gap:9px; padding:4px 0; background:none; color:var(--paper); } .avatar { display:grid; place-items:center; width:29px; height:29px; border-radius:50%; color:var(--ink); background:var(--cyan); font-weight:700; } .chevron { color:var(--muted); font-size:18px; }
main { min-height:70vh; } .hero { position:relative; min-height:min(720px,83vh); display:flex; align-items:flex-end; padding:150px clamp(22px,8vw,128px) 88px; background:linear-gradient(90deg,rgba(8,17,15,.98) 0%,rgba(8,17,15,.7) 37%,rgba(8,17,15,.06) 78%),linear-gradient(0deg,var(--ink) 0%,transparent 28%),url("https://images.unsplash.com/photo-1518709268805-4e9042af9f23?auto=format&fit=crop&w=2200&q=88") center/cover; } .hero:after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 70% 42%,rgba(217,243,107,.14),transparent 30%); pointer-events:none; } .hero-content { position:relative; z-index:1; width:min(580px,100%); animation:rise .7s var(--ease) both; } .eyebrow,.kicker { color:var(--lime); text-transform:uppercase; letter-spacing:.16em; font-size:11px; font-weight:700; } .hero h1 { max-width:540px; margin:14px 0 15px; font:800 clamp(46px,6.6vw,92px)/.92 var(--serif); letter-spacing:-.07em; } .hero-copy { max-width:490px; color:#ccd6ca; font-size:16px; } .meta { display:flex; flex-wrap:wrap; align-items:center; gap:13px; color:var(--muted); font-size:13px; } .meta .dot { width:3px; height:3px; background:var(--lime); border-radius:50%; } .rating { color:var(--lime); font-weight:700; } .actions { display:flex; flex-wrap:wrap; gap:11px; margin-top:27px; } .btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:44px; padding:0 19px; border-radius:7px; background:var(--lime); color:var(--ink); font-weight:700; transition:transform .2s,background .2s,color .2s; } .btn:hover { transform:translateY(-2px); background:#edff9a; } .btn-secondary { background:rgba(238,242,232,.12); color:var(--paper); border:1px solid rgba(238,242,232,.2); } .btn-secondary:hover { background:rgba(238,242,232,.2); }
.page { width:min(1400px,calc(100% - 44px)); margin:0 auto; padding:54px 0 86px; } .home-page { padding-top:30px; } .section { margin-top:46px; } .section-head { display:flex; align-items:end; justify-content:space-between; gap:15px; margin-bottom:17px; } .section h2,.page-title { margin:0; font:700 clamp(22px,2vw,29px) var(--serif); letter-spacing:-.05em; } .section-link { color:var(--lime); font-size:13px; font-weight:700; } .rail { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(180px,1fr); gap:15px; overflow-x:auto; scrollbar-width:none; padding:5px 2px 15px; } .rail::-webkit-scrollbar { display:none; } .card { min-width:0; position:relative; transition:transform .25s var(--ease); } .card:hover { transform:translateY(-5px); } .card-art { position:relative; aspect-ratio:2/3; overflow:hidden; background:var(--surface); border-radius:9px; } .card-art img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .45s var(--ease),filter .3s; } .card:hover .card-art img { transform:scale(1.06); filter:brightness(.68); } .card-overlay { position:absolute; inset:auto 9px 10px; display:flex; justify-content:space-between; align-items:center; opacity:0; transform:translateY(7px); transition:.25s var(--ease); } .card:hover .card-overlay { opacity:1; transform:translateY(0); } .round-btn { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--lime); color:var(--ink); font-size:17px; } .round-btn.ghost { background:rgba(8,17,15,.74); color:var(--paper); } .card-title { display:block; margin-top:10px; background:none; color:var(--paper); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left; } .card-meta { display:flex; gap:8px; margin-top:3px; color:var(--dim); font-size:12px; } .progress { position:absolute; right:9px; bottom:9px; left:9px; height:3px; background:rgba(238,242,232,.25); border-radius:4px; } .progress span { display:block; height:100%; background:var(--coral); border-radius:inherit; }
.page-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin:38px 0 28px; } .page-heading p { max-width:480px; margin:7px 0 0; color:var(--muted); } .filters { display:flex; flex-wrap:wrap; gap:8px; } .filter,.select { background:var(--surface); color:var(--muted); border:1px solid var(--line); border-radius:6px; padding:9px 13px; } .filter.active { background:var(--lime); color:var(--ink); border-color:var(--lime); } .grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:30px 15px; } .search-box { display:flex; align-items:center; gap:12px; max-width:660px; padding:0 17px; border-bottom:1px solid var(--line); background:var(--surface); border-radius:7px 7px 0 0; } .search-box span { color:var(--lime); font-size:25px; } .search-box input { width:100%; padding:17px 0; border:0; outline:0; color:var(--paper); background:none; font-size:18px; } .search-box input::placeholder { color:var(--dim); } .count { margin:26px 0 16px; color:var(--muted); }
.detail { min-height:650px; padding:145px max(22px,8vw) 70px; background:linear-gradient(90deg,var(--ink) 0%,rgba(8,17,15,.72) 45%,rgba(8,17,15,.14)),linear-gradient(0deg,var(--ink),transparent 35%),var(--detail-image) center/cover; } .detail-inner { display:grid; grid-template-columns:190px minmax(0,580px); gap:35px; align-items:end; max-width:970px; } .detail-poster { width:100%; aspect-ratio:2/3; object-fit:cover; border-radius:10px; box-shadow:0 24px 60px #0008; } .detail h1 { margin:10px 0; font:800 clamp(38px,6vw,76px)/.95 var(--serif); letter-spacing:-.07em; } .detail-copy { color:#ccd6ca; } .tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:17px; } .tag { padding:5px 9px; background:rgba(238,242,232,.1); border-radius:4px; color:var(--muted); font-size:12px; }
.empty { padding:80px 20px; text-align:center; background:var(--surface); border:1px dashed var(--line); border-radius:10px; } .empty h2 { font:700 28px var(--serif); margin:8px 0; } .empty p { max-width:390px; margin:0 auto 22px; color:var(--muted); } .settings-list { max-width:760px; border-top:1px solid var(--line); } .setting { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 0; border-bottom:1px solid var(--line); } .setting strong { display:block; } .setting small { color:var(--muted); } .toggle { width:44px; height:24px; padding:3px; background:var(--dim); border-radius:20px; } .toggle span { display:block; width:18px; height:18px; border-radius:50%; background:var(--paper); transition:transform .2s; } .toggle.on { background:var(--lime); } .toggle.on span { transform:translateX(20px); background:var(--ink); }
.skeleton-hero { height:360px; margin-bottom:48px; border-radius:12px; background:linear-gradient(100deg,var(--surface) 20%,var(--surface-2) 40%,var(--surface) 60%); background-size:200% 100%; animation:skeleton-shimmer 1.5s linear infinite; } .skeleton-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:15px; } .skeleton-card { aspect-ratio:2/3; border-radius:9px; background:linear-gradient(100deg,var(--surface) 20%,var(--surface-2) 40%,var(--surface) 60%); background-size:200% 100%; animation:skeleton-shimmer 1.5s linear infinite; } @keyframes skeleton-shimmer { to { background-position:-200% 0; } }
.auth-panel label { display:block; margin:17px 0; color:var(--muted); font-size:13px; } .auth-panel input { display:block; width:100%; margin-top:7px; padding:12px 13px; border:1px solid var(--line); border-radius:6px; outline:0; color:var(--paper); background:var(--ink-2); } .auth-panel input:focus { border-color:var(--lime); box-shadow:0 0 0 3px rgba(217,243,107,.12); } .auth-panel .btn { margin-top:5px; } .auth-panel .btn:disabled { opacity:.6; cursor:wait; transform:none; } .form-message { color:var(--coral)!important; font-size:13px; }
.profile-form { padding:20px 0 24px; } .profile-form label { display:block; margin:0 0 16px; color:var(--muted); font-size:13px; } .profile-form input { display:block; width:100%; margin-top:7px; padding:12px 13px; border:1px solid var(--line); border-radius:6px; outline:0; color:var(--paper); background:var(--ink-2); } .profile-form input:focus { border-color:var(--lime); box-shadow:0 0 0 3px rgba(217,243,107,.12); } .profile-form .btn:disabled { opacity:.6; cursor:wait; transform:none; }
.admin-page .page-heading { margin-top:26px; } .admin-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:30px 0; } .admin-stat,.admin-panel { padding:20px; background:var(--surface); border:1px solid var(--line); border-radius:9px; } .admin-stat small { display:block; color:var(--muted); } .admin-stat strong { display:block; margin-top:7px; color:var(--lime); font:700 30px var(--serif); } .admin-toolbar { display:flex; gap:10px; margin:25px 0; } .admin-toolbar input,.admin-toolbar select,.admin-form input,.admin-form select,.admin-form textarea { min-height:42px; padding:10px 12px; border:1px solid var(--line); border-radius:6px; outline:0; color:var(--paper); background:var(--surface); } .admin-toolbar input { flex:1; } .admin-form input,.admin-form select,.admin-form textarea { width:100%; margin-top:7px; } .admin-toolbar input:focus,.admin-toolbar select:focus,.admin-form input:focus,.admin-form select:focus,.admin-form textarea:focus { border-color:var(--lime); } .admin-table-wrap { overflow-x:auto; } .admin-table { width:100%; border-collapse:collapse; text-align:left; font-size:13px; } .admin-table th { color:var(--dim); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } .admin-table th,.admin-table td { padding:14px 12px; border-bottom:1px solid var(--line); white-space:nowrap; } .admin-table td:first-child { min-width:230px; white-space:normal; } .admin-table td strong,.admin-table td small { display:block; } .admin-table td small { margin-top:3px; color:var(--dim); } .table-action,.admin-table a { color:var(--lime); font-weight:700; } .admin-status { display:inline-block; padding:4px 7px; border-radius:4px; background:var(--surface-2); color:var(--muted); font-size:11px; text-transform:capitalize; } .status-published { color:var(--lime); } .status-archived { color:var(--coral); } .admin-form { max-width:980px; padding:24px; background:var(--surface); border:1px solid var(--line); border-radius:9px; } .admin-form label { display:block; color:var(--muted); font-size:13px; } .admin-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-bottom:18px; } .admin-form > label { margin-bottom:20px; } .admin-form fieldset { margin:20px 0; padding:16px; border:1px solid var(--line); border-radius:7px; } .admin-form legend { padding:0 7px; color:var(--lime); font-size:12px; text-transform:uppercase; letter-spacing:.1em; } .admin-checks { display:flex; flex-wrap:wrap; gap:12px 20px; } .admin-checks label,.admin-check { display:flex!important; align-items:center; gap:7px; color:var(--paper)!important; } .admin-check input,.admin-checks input { width:auto!important; min-height:auto!important; margin:0!important; accent-color:var(--lime); } .form-help { color:var(--dim); font-size:12px; } .admin-form .actions { margin-top:25px; }
.site-footer { display:grid; grid-template-columns:1fr 1fr 1fr; align-items:end; gap:25px; max-width:1400px; margin:0 auto; padding:55px 22px 40px; border-top:1px solid var(--line); color:var(--muted); } .footer-brand strong { font:700 20px var(--serif); color:var(--paper); } .footer-brand p { margin:12px 0 0; font-size:13px; } .footer-links { display:flex; justify-content:center; gap:22px; font-size:13px; } .footer-links a:hover { color:var(--lime); } .footer-meta { display:flex; justify-content:flex-end; gap:15px; font-size:12px; }
.mobile-nav { display:none; } .modal-backdrop { position:fixed; z-index:50; inset:0; display:grid; place-items:center; padding:20px; background:rgba(0,0,0,.75); animation:fade .2s; } .modal { position:relative; width:min(720px,100%); max-height:min(760px,90vh); overflow:auto; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; box-shadow:0 30px 100px #000b; animation:rise .3s var(--ease); } .modal-close { position:absolute; z-index:2; top:15px; right:15px; width:34px; height:34px; border-radius:50%; background:#08110fcc; font-size:20px; } .modal-visual { height:260px; background:var(--modal-image) center/cover; } .modal-body { padding:25px 28px 30px; } .modal h2 { margin:0 0 8px; font:700 34px var(--serif); letter-spacing:-.05em; } .toast { position:fixed; z-index:70; right:20px; bottom:24px; padding:13px 17px; background:var(--paper); color:var(--ink); border-radius:7px; box-shadow:0 12px 30px #0008; animation:toast-in .3s var(--ease); font-weight:600; } .player { min-height:100vh; display:grid; place-items:center; padding:90px 22px 50px; background:#030706; } .player-box { width:min(1100px,100%); } .video-screen { position:relative; aspect-ratio:16/9; display:grid; place-items:center; overflow:hidden; background:linear-gradient(135deg,#132b27,#08110f); border:1px solid var(--line); } .video-screen img,.video-screen video { width:100%; height:100%; object-fit:cover; } .video-screen video { background:#020504; } .player-status { position:absolute; inset:0; display:grid; place-items:center; padding:20px; background:rgba(3,7,6,.7); color:var(--paper); text-align:center; } .play-large { position:absolute; width:74px; height:74px; border-radius:50%; background:var(--lime); color:var(--ink); font-size:28px; } .player-bar { display:flex; align-items:center; gap:14px; padding:14px 0; color:var(--muted); } .timeline { flex:1; height:4px; background:var(--surface-2); } .timeline span { display:block; width:35%; height:100%; background:var(--lime); }
@keyframes rise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } } @keyframes fade { from { opacity:0; } to { opacity:1; } } @keyframes toast-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } } @media (prefers-reduced-motion:reduce) { *,*:before,*:after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }
@media (max-width:900px) { .grid { grid-template-columns:repeat(4,minmax(0,1fr)); } .rail { grid-auto-columns:minmax(175px,24vw); } .profile-name,.chevron { display:none; } }
@media (max-width:640px) { body { padding-bottom:64px; } .topbar { height:64px; padding:0 18px; } .desktop-nav { display:none; } .hero { min-height:650px; padding:120px 22px 55px; background-position:62% center; background-image:linear-gradient(0deg,var(--ink) 3%,rgba(8,17,15,.4) 55%,rgba(8,17,15,.3)),url("https://images.unsplash.com/photo-1518709268805-4e9042af9f23?auto=format&fit=crop&w=1200&q=85"); } .hero h1 { font-size:53px; } .hero-copy { font-size:14px; } .page { width:calc(100% - 36px); padding:34px 0 55px; } .home-page { padding-top:4px; } .section { margin-top:33px; } .rail { grid-auto-columns:minmax(145px,41vw); gap:11px; } .grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 11px; } .page-heading { display:block; margin-top:25px; } .page-heading .filters { margin-top:20px; } .site-footer { display:block; padding:35px 18px 25px; } .footer-links { justify-content:flex-start; flex-wrap:wrap; margin:25px 0; } .footer-meta { justify-content:flex-start; flex-wrap:wrap; } .mobile-nav { position:fixed; z-index:25; right:0; bottom:0; left:0; display:flex; justify-content:space-around; height:64px; padding:8px 8px 5px; background:rgba(13,27,24,.97); border-top:1px solid var(--line); } .mobile-nav a { display:flex; flex-direction:column; align-items:center; gap:2px; color:var(--muted); font-size:10px; } .mobile-nav span { font-size:23px; line-height:25px; } .detail { min-height:auto; padding:105px 22px 58px; background:linear-gradient(0deg,var(--ink) 12%,rgba(8,17,15,.38) 85%),var(--detail-image) center top/auto 390px no-repeat; } .detail-inner { display:block; padding-top:230px; } .detail-poster { display:none; } .detail h1 { font-size:49px; } .modal-visual { height:185px; } .modal-body { padding:22px; } .setting { align-items:flex-start; } }