:root { --bg:#060b13; --surface:#0c1420; --muted:#9ba7b7; --line:rgba(255,255,255,.1); --accent:#10aaa8; --text:#f5f7fa; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--text); background:radial-gradient(ellipse at 80% -10%,#152740 0%,transparent 30%),var(--bg); font-family:"DM Sans",sans-serif; }
button,a,input { font:inherit; } button { cursor:pointer; } .site-header { height:78px; display:flex; align-items:center; gap:42px; padding:0 clamp(22px,5vw,84px); position:sticky; top:0; z-index:10; background:rgba(6,11,19,.87); backdrop-filter:blur(18px); border-bottom:1px solid rgba(255,255,255,.04); }
.brand { color:#fff; text-decoration:none; font:800 20px/1 "Manrope",sans-serif; letter-spacing:-.7px; white-space:nowrap; } .main-nav { display:flex; align-items:center; gap:27px; flex:1; } .nav-link { color:#b3bdc9; text-decoration:none; font-size:14px; transition:.2s; } .nav-link:hover,.nav-link.active { color:white; } .nav-link.active::after { content:""; display:block; width:18px; height:2px; margin:7px auto -9px; border-radius:2px; background:var(--accent); }
.icon-button,.close-button { width:42px; height:42px; display:grid; place-items:center; border:0; color:#fff; background:transparent; } .icon-button svg,.search-box svg { width:21px; fill:none; stroke:currentColor; stroke-width:1.8; }
.hero { min-height:530px; margin:28px clamp(18px,5vw,84px) 0; position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.11); border-radius:16px; background:#070e18; box-shadow:0 24px 80px rgba(0,0,0,.34); } .hero-art,.hero-gradient { position:absolute; inset:0; } .hero-art { background:url("assets/cinema-player.png") center/cover no-repeat; } .hero-art::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(2,5,10,.4),transparent 48%); } .hero-gradient { background:linear-gradient(90deg,rgba(3,8,15,.98) 0%,rgba(3,8,15,.86) 33%,rgba(3,8,15,.24) 60%,rgba(3,8,15,.06) 100%); }
.hero-content { position:relative; z-index:1; padding:clamp(50px,8vw,98px) clamp(28px,7vw,105px); max-width:650px; } .eyebrow { color:#8ea7ba; font-size:11px; font-weight:700; letter-spacing:1.4px; margin:0 0 15px; } h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:17px; font:800 clamp(38px,5.2vw,68px)/1.06 "Manrope",sans-serif; letter-spacing:-2.8px; } .hero-copy { max-width:490px; color:#c8d0d9; font-size:16px; line-height:1.55; } .hero-actions { display:flex; gap:12px; margin-top:29px; } .primary-button,.ghost-button { height:46px; border-radius:8px; padding:0 18px; font-weight:700; border:1px solid transparent; } .primary-button { background:var(--accent); color:white; box-shadow:0 8px 24px rgba(16,170,168,.25); } .play-icon { margin-right:8px; font-size:12px; } .ghost-button { color:white; background:rgba(8,15,24,.42); border-color:rgba(255,255,255,.25); } .hero-dots { position:absolute; z-index:2; bottom:23px; left:50%; transform:translateX(-50%); display:flex; gap:9px; } .hero-dots button { width:6px; height:6px; padding:0; border:0; border-radius:50%; background:#8894a1; } .hero-dots button.active { background:#36c8c4; }
.catalogue { padding:43px clamp(18px,5vw,84px) 80px; } .section-heading { display:flex; justify-content:space-between; align-items:center; margin:0 0 16px; } .section-heading:not(:first-child) { margin-top:42px; } .section-heading h2 { margin:0; font:700 20px "Manrope",sans-serif; letter-spacing:-.6px; } .text-button { color:#aeb8c5; background:transparent; border:0; font-size:14px; } .text-button span { font-size:23px; vertical-align:-2px; margin-left:5px; }
.resume-toggle { display:flex; align-items:center; gap:8px; color:#aeb8c5; font-size:13px; cursor:pointer; user-select:none; } .resume-toggle input { appearance:none; width:17px; height:17px; margin:0; border:1px solid #627082; border-radius:4px; background:#101a27; display:grid; place-content:center; } .resume-toggle input::before { content:"✓"; color:#061012; font-size:13px; font-weight:800; transform:scale(0); transition:transform .14s; } .resume-toggle input:checked { border-color:#35c7c2; background:#35c7c2; } .resume-toggle input:checked::before { transform:scale(1); } .continue-row.is-hidden { display:none; }
.card-row { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(180px,1fr); gap:14px; overflow-x:auto; padding-bottom:8px; scrollbar-width:none; } .card-row::-webkit-scrollbar { display:none; } .continue-card { height:126px; position:relative; overflow:hidden; border-radius:9px; background:var(--card-gradient); border:1px solid rgba(255,255,255,.08); } .continue-card::before,.poster-image { content:""; position:absolute; inset:0; background:var(--card-gradient); } .continue-card::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(2,5,10,.85),transparent 68%); } .continue-info { position:absolute; z-index:1; inset:auto 12px 11px; } .continue-info h3,.poster-meta h3 { margin:0; font-size:13px; font-weight:700; } .continue-info p,.poster-meta p { margin:4px 0 0; color:#a9b3c0; font-size:12px; } .progress { position:absolute; bottom:0; left:0; z-index:2; height:3px; width:var(--progress); background:#16babb; }
.poster-row { grid-auto-columns:minmax(146px,1fr); } .poster-card { position:relative; } .poster-button { position:relative; width:100%; aspect-ratio:2/3; overflow:hidden; padding:0; border:1px solid rgba(255,255,255,.08); border-radius:9px; background:#111; } .poster-image { background:var(--card-gradient); transition:transform .25s; } .poster-image::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.55),transparent 55%); } .poster-button:hover .poster-image { transform:scale(1.05); } .poster-overlay { position:absolute; opacity:0; inset:0; display:grid; place-items:center; color:#fff; font-size:22px; background:rgba(2,7,13,.28); transition:.2s; } .poster-button:hover .poster-overlay { opacity:1; } .poster-meta { padding:9px 3px; } .mini-list-button { position:absolute; top:9px; right:9px; width:28px; height:28px; color:#fff; background:rgba(6,11,19,.65); border:1px solid rgba(255,255,255,.24); border-radius:50%; line-height:1; } .mini-list-button.saved { color:#071012; background:#4ccfcb; }
.genre-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } .genre-card { min-height:116px; display:flex; align-items:flex-end; padding:17px; border:1px solid rgba(255,255,255,.1); border-radius:10px; color:#fff; text-decoration:none; background:var(--genre-gradient); position:relative; overflow:hidden; } .genre-card::before { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(1,6,11,.75),transparent 100%); } .genre-card span { position:relative; font:700 16px "Manrope",sans-serif; }
.search-panel { position:fixed; z-index:20; inset:0; padding:100px max(24px,13vw); background:rgba(2,6,11,.94); backdrop-filter:blur(12px); visibility:hidden; opacity:0; transition:.2s; } .search-panel.open { visibility:visible; opacity:1; } .search-box { display:flex; align-items:center; gap:14px; border-bottom:1px solid #536171; color:#bfc9d5; } .search-box input { flex:1; height:64px; border:0; outline:0; background:transparent; color:white; font-size:22px; } .close-button { font-size:34px; font-weight:200; } .search-results { padding-top:25px; display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:15px; }
.player-modal { width:min(960px,94vw); padding:0; color:#fff; background:#09111c; border:1px solid #2f4052; border-radius:13px; box-shadow:0 30px 90px rgba(0,0,0,.7); } .player-modal::backdrop { background:rgba(0,0,0,.82); } .close-modal { position:absolute; z-index:2; top:10px; right:12px; width:35px; height:35px; border:0; border-radius:50%; color:white; background:rgba(0,0,0,.55); font-size:25px; } .player-screen { aspect-ratio:16/9; background:linear-gradient(145deg,#101e2f,#03070b); } .player-screen .video-js { width:100%; height:100%; background:#03070b; } .player-screen .vjs-big-play-button { background:rgba(16,170,168,.9); border:0; border-radius:50%; width:70px; height:70px; line-height:70px; margin-top:-35px; margin-left:-35px; } .player-screen .vjs-control-bar { background:linear-gradient(transparent,rgba(0,0,0,.82)); } .player-info { padding:25px 30px 28px; } .player-info h2 { margin-bottom:8px; font:700 25px "Manrope",sans-serif; } .player-info p:last-child { margin-bottom:0; color:#aab6c3; line-height:1.5; }
@media (max-width:720px) { .site-header { height:64px; gap:18px; padding:0 19px; } .brand { font-size:17px; } .main-nav { display:none; } .icon-button { margin-left:auto; } .hero { min-height:510px; margin:16px 14px 0; } .hero-content { padding:55px 27px; } h1 { font-size:43px; } .hero-copy { font-size:14px; } .catalogue { padding:32px 17px 60px; } .card-row { grid-auto-columns:150px; } .poster-row { grid-auto-columns:130px; } .genre-grid { grid-template-columns:repeat(2,1fr); } .genre-card { min-height:98px; } .search-panel { padding:85px 24px; } }