/* ============================================================ WATCH MODE — the Netflix-style skin ------------------------------------------------------------ Applies only while , which applyWatchMode() sets for accounts where canWatchHere() is true (and the inline hint in index.html's sets early, before auth resolves, to avoid a flash). Every rule here is scoped under that attribute, so the listings site everyone else sees is exactly app.css, untouched. Dark only (resolvedTheme() forces it), purple where Netflix uses red. The markup it styles comes from the watch-mode branches in js/: see viewHomeWatch(), nfCardHTML()/nfTop10HTML() and viewTitle(). ============================================================ */ html[data-mode="watchable"]{ --ink:#141414; --slab:#181818; --slab-2:#232323; --slab-3:#2f2f2f; --rule:#2b2b2b; --rule-lit:#454545; --type:#e5e5e5; --type-dim:#b3b3b3; --type-faint:#8c8c8c; --veil-a:rgba(20,20,20,.2); --veil-b:rgba(20,20,20,.86); --mast:#141414; --t-stream:#46d369; /* No monospace anywhere in this skin — every label that used it becomes plain sans, which is most of what makes the listings site read as a "data tool" rather than a streaming app. */ --mono:var(--sans); --glass:rgba(24,24,24,.94); --glass-strong:rgba(20,20,20,.96); --glass-border:rgba(255,255,255,.1); --gutter:4vw; --tile-gap:max(6px,.4vw); --per-row:6; --per-row-top10:5; --mast-h:68px; --nf-radius:8px; } html[data-mode="watchable"] body{background:var(--ink);color:#fff;} /* ---------- masthead: fixed, transparent over art, solid once scrolled ---------- */ html[data-mode="watchable"] .masthead{position:fixed;left:0;right:0;top:0; background:transparent;border-bottom:none;backdrop-filter:none;-webkit-backdrop-filter:none; transition:background-color .4s var(--ease);} html[data-mode="watchable"] .masthead::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(to bottom,rgba(0,0,0,.72) 10%,rgba(0,0,0,0));} /* Only home and title pages have art for the masthead to float over. */ html[data-mode="watchable"] .masthead.scrolled, html[data-mode="watchable"]:not([data-view="home"]):not([data-view="title"]):not([data-view="section"]) .masthead{background:var(--ink);} html[data-mode="watchable"] .masthead-in{max-width:none;padding:0 var(--gutter);} html[data-mode="watchable"] .top{min-height:68px;gap:28px;} html[data-mode="watchable"] .wordmark{font-size:27px;font-weight:800;letter-spacing:-.03em; text-transform:uppercase;color:var(--accent);line-height:1;} html[data-mode="watchable"] .wordmark b{color:inherit;} html[data-mode="watchable"] .wordmark span{display:none;} /* Netflix's nav with the selected section as a lit, rounded pill. The bold weight is carried by a text-shadow rather than font-weight so the row doesn't shift sideways as the selection moves. */ html[data-mode="watchable"] .nav{gap:2px;margin-left:-6px;} html[data-mode="watchable"] .nav button{padding:6px 13px;font-family:var(--sans);font-size:14px;white-space:nowrap; letter-spacing:0;text-transform:none;color:#e5e5e5;background:none;border-radius:999px; transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);} html[data-mode="watchable"] .nav button:hover{color:#fff;background:rgba(255,255,255,.08);} html[data-mode="watchable"] .nav button.on{color:#fff;background:rgba(255,255,255,.18); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);text-shadow:0 0 .6px #fff,0 0 .6px #fff;} html[data-mode="watchable"] .nav button em{display:none;} html[data-mode="watchable"] .seek{max-width:none;flex:0 0 auto;margin-left:auto;} html[data-mode="watchable"] .seek input{background:rgba(0,0,0,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E") no-repeat 10px center/17px; border:1px solid rgba(255,255,255,.55);border-right:1px solid rgba(255,255,255,.55);border-radius:6px; color:#fff;padding:7px 10px 7px 36px;font-size:14px;transition:border-color var(--dur) var(--ease);} html[data-mode="watchable"] .seek input:focus{border-color:#fff;} html[data-mode="watchable"] .seek input::placeholder{color:#999;} /* Netflix's search: just the magnifier until you click it, then a box slides open to the left. Stays open while it holds a query — :placeholder-shown is false exactly when there's text in it. */ @media (min-width:721px){ html[data-mode="watchable"] .seek input{flex:none;width:38px;cursor:pointer;border-color:transparent; background-color:transparent;background-position:9px center; transition:width .32s var(--ease),background-color .32s var(--ease),border-color .32s var(--ease);} html[data-mode="watchable"] .seek input::placeholder{color:transparent;} html[data-mode="watchable"] .seek input:focus, html[data-mode="watchable"] .seek input:not(:placeholder-shown){width:min(290px,28vw);cursor:text; background-color:rgba(0,0,0,.78);border-color:rgba(255,255,255,.85);} html[data-mode="watchable"] .seek input:focus::placeholder{color:#8c8c8c;} html[data-mode="watchable"] .seek .typeahead-panel{left:auto;width:min(420px,60vw);} } html[data-mode="watchable"] .seek > button, html[data-mode="watchable"] .slash, html[data-mode="watchable"] .theme-fab{display:none;} html[data-mode="watchable"] .top-controls{gap:16px;margin-left:0;} html[data-mode="watchable"] .notif-btn{width:32px;height:32px;color:#fff;} html[data-mode="watchable"] .notif-btn:hover{background:none;color:#b3b3b3;} html[data-mode="watchable"] .notif-btn .icon-bell{width:21px;height:21px;} html[data-mode="watchable"] .account-btn .avatar{width:32px;height:32px;border-radius:6px;} /* Avatar plus a caret that flips while the menu is open, as Netflix's does. */ html[data-mode="watchable"] .account-btn:not(.login-mode){width:auto;height:32px;overflow:visible;border-radius:6px; display:flex;align-items:center;gap:9px;} html[data-mode="watchable"] .acct-caret{display:block;width:10px;height:6px;color:#fff;transition:transform .3s var(--ease);} html[data-mode="watchable"] .account-btn[aria-expanded="true"] .acct-caret{transform:rotate(180deg);} html[data-mode="watchable"] .account-drop{top:46px;min-width:230px;background:rgba(0,0,0,.92);border-color:rgba(255,255,255,.14); border-radius:var(--nf-radius);padding:8px 0;gap:0;} /* The gap between avatar and menu is bridged so hovering across it doesn't count as leaving. */ html[data-mode="watchable"] .account-drop::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px;} html[data-mode="watchable"] .account-drop-label{display:none;} html[data-mode="watchable"] .account-drop button{border-radius:0;padding:9px 14px;font-size:13.5px;color:#e5e5e5;} html[data-mode="watchable"] .account-drop button:hover{background:none;text-decoration:underline;color:#fff;} html[data-mode="watchable"] .account-drop .acct-signout{border-top-color:rgba(255,255,255,.2);} /* Scrolling panel with sticky header/footer: every layer must be opaque or rows show through the header as they scroll under it. */ html[data-mode="watchable"] .notif-drop, html[data-mode="watchable"] .nc-head, html[data-mode="watchable"] .nc-foot{background:#141414;} html[data-mode="watchable"] .notif-drop{border-color:rgba(255,255,255,.14);border-radius:10px;box-shadow:0 18px 50px rgba(0,0,0,.8);} html[data-mode="watchable"] .nc-row:hover{background:#262626;} html[data-mode="watchable"] .notif-btn[aria-expanded="true"]{background:none;color:#fff;} /* Filters are a listings tool: nowhere on home or a title page. */ html[data-mode="watchable"][data-view="home"] .rail, html[data-mode="watchable"][data-view="title"] .rail, html[data-mode="watchable"][data-view="section"] .rail, html[data-mode="watchable"][data-view="newpop"] .rail, html[data-mode="watchable"][data-view="languages"] .rail{display:none;} html[data-mode="watchable"] .rail{margin-top:0;padding-bottom:12px;} html[data-mode="watchable"] .rail-controls{background:#1f1f1f;border-color:#333;border-radius:var(--nf-radius);} html[data-mode="watchable"] .rail .lbl, html[data-mode="watchable"] .rail .txt{text-transform:none;letter-spacing:0;font-size:12.5px;} html[data-mode="watchable"] .rail select, html[data-mode="watchable"] .rail input{background:#141414;border-color:#444;border-radius:6px;letter-spacing:0;font-size:12.5px;} html[data-mode="watchable"] .syntax{position:fixed;top:var(--mast-h);left:0;right:0;z-index:29;max-width:none;padding:0 var(--gutter);} html[data-mode="watchable"] .syntax-in{background:#181818;border-color:#333;} /* ---------- page shell: edge to edge with a 4% gutter ---------- */ html[data-mode="watchable"] .shell{max-width:none;padding:calc(var(--mast-h) + 22px) var(--gutter) 80px;} html[data-mode="watchable"][data-view="home"] .shell, html[data-mode="watchable"][data-view="title"] .shell, html[data-mode="watchable"] .shell:has(.sec-page.has-bb){padding-top:0;} html[data-mode="watchable"] .trail{display:none;} html[data-mode="watchable"] .note:empty{display:none;} html[data-mode="watchable"][data-view="home"] .note:not(:empty), html[data-mode="watchable"][data-view="title"] .note:not(:empty){padding-top:calc(var(--mast-h) + 12px);} /* ---------- billboard ---------- */ html[data-mode="watchable"] .bb.nf-bb{margin:0 calc(-1 * var(--gutter));padding:0; height:min(56.25vw,88vh);min-height:460px;} html[data-mode="watchable"] .nf-bb .bb-slide{padding:0 var(--gutter);align-items:center;} html[data-mode="watchable"] .nf-bb .bb-bg{opacity:1;transform:none;filter:none;background-position:center top;} html[data-mode="watchable"] .nf-bb .bb-veil{background: linear-gradient(to top,var(--ink) 0%,rgba(20,20,20,.55) 16%,rgba(20,20,20,0) 34%), linear-gradient(77deg,rgba(0,0,0,.66) 0%,rgba(0,0,0,.25) 45%,rgba(0,0,0,0) 70%);} html[data-mode="watchable"] .nf-bb .bb-veil::after{display:none;} /* A fractional billboard height can leave a 1px row of unfaded art at the bottom edge; overhang the fade past the art so the seam can't show. */ html[data-mode="watchable"] .nf-bb .bb-bg, html[data-mode="watchable"] .nf-hero .hero-bg{bottom:2px;} html[data-mode="watchable"] .nf-bb .bb-veil, html[data-mode="watchable"] .nf-hero .hero-veil{bottom:-1px;} html[data-mode="watchable"] .nf-bb .bb-in{max-width:min(620px,40vw);min-width:340px;padding:8vh 0 0;} html[data-mode="watchable"] .nf-bb h2{font-size:clamp(30px,4.4vw,72px);font-weight:800;letter-spacing:-.025em; line-height:1;color:#fff;text-shadow:2px 2px 6px rgba(0,0,0,.45);} html[data-mode="watchable"] .nf-bb p{color:#fff;font-size:clamp(14px,1.2vw,20px);line-height:1.35; margin-top:1.1vw;text-shadow:1px 1px 3px rgba(0,0,0,.5);-webkit-line-clamp:3;} html[data-mode="watchable"] .nf-bb .bb-cta{margin-top:1.6vw;gap:10px;} html[data-mode="watchable"] .nf-bb .bb-dots{left:auto;right:var(--gutter);bottom:30%;} html[data-mode="watchable"] .bb-dot{width:14px;background:rgba(255,255,255,.35);} html[data-mode="watchable"] .bb-dot.on{width:26px;background:#fff;} .nf-kicker{display:flex;align-items:center;gap:10px;margin-bottom:1vw;color:#fff; font-size:clamp(14px,1.25vw,21px);font-weight:700;text-shadow:1px 1px 3px rgba(0,0,0,.5);} .nf-t10{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0; width:clamp(24px,2vw,34px);height:clamp(24px,2vw,34px);border-radius:4px;background:var(--accent);color:#fff; font-size:clamp(6.5px,.52vw,9px);font-weight:800;letter-spacing:.04em;line-height:.95;text-shadow:none;} .nf-t10 b{display:block;font-size:2.05em;letter-spacing:-.03em;} .nf-btn{display:inline-flex;align-items:center;gap:.55em;border:none;border-radius:6px;cursor:pointer; padding:.5em 1.7em .5em 1.25em;font:700 clamp(14px,1.2vw,20px)/1.25 var(--sans);white-space:nowrap; transition:background-color var(--dur) var(--ease);} .nf-btn svg{width:1.45em;height:1.45em;flex-shrink:0;} .nf-btn-play{background:#fff;color:#000;} .nf-btn-play:hover{background:rgba(255,255,255,.75);} .nf-btn-info{background:rgba(109,109,110,.7);color:#fff;} .nf-btn-info:hover{background:rgba(109,109,110,.42);} /* ---------- rows ---------- */ /* Rows ride up over the billboard's faded bottom edge. */ html[data-mode="watchable"] .nf-bb + .nf-rows{position:relative;z-index:2;margin-top:-7vw;} /* content-visibility:auto (app.css) is off here. Its paint containment clipped everything drawn outside a row's box — the arrow panels in the gutter, the hover lift — and its 300px size guess is far taller than a row of landscape tiles, so rows resized as they scrolled into view and the page jumped under you. */ html[data-mode="watchable"] .rail-sec{margin:0 0 clamp(14px,1.5vw,28px);padding:0;border:none;border-radius:0;box-shadow:none; content-visibility:visible;contain-intrinsic-size:none;} html[data-mode="watchable"] .rail-sec:not(.glass){background:none;} html[data-mode="watchable"] .rail-head{margin-bottom:.55vw;align-items:center;} html[data-mode="watchable"] .rail-head h3{font-size:clamp(15px,1.4vw,23px);font-weight:700;letter-spacing:-.01em;color:#e5e5e5;} html[data-mode="watchable"] .rail-head .sub{display:none;} html[data-mode="watchable"] .rail-head .more{margin-left:14px;font-size:clamp(12px,.9vw,14px);font-weight:600; text-transform:none;letter-spacing:0;color:var(--accent-ink);opacity:0;transition:opacity var(--dur) var(--ease);} html[data-mode="watchable"] .rail-sec:hover .more, html[data-mode="watchable"] .rail-head .more:focus-visible{opacity:1;} /* Vertical padding (cancelled by the negative margin) keeps the hover lift from being clipped by the strip's own overflow. Horizontal padding is deliberately absent: setupRailLoop() measures card width as scrollWidth divided by card count, and padding there would make its silent rewind visibly jump. The gutter lives outside the strip instead. */ html[data-mode="watchable"] .rail-strip{gap:var(--tile-gap);padding:12px 0;margin:-12px 0;scroll-snap-type:none;} /* Arrows lie over the row's edge cards, hidden until the row is hovered (or an arrow has keyboard focus), then a faded panel over the art — Netflix's shape. The 12px insets match .rail-strip's vertical padding, which .rail-wrap's height includes. Touch never sees them: app.css hides them at phone width, and swiping is the control there. */ html[data-mode="watchable"] .rail-nudge{top:12px;bottom:12px;height:auto;width:clamp(36px,3.4vw,60px);min-width:0; border:none;border-radius:0;color:#fff;font-size:clamp(28px,2.8vw,48px);box-shadow:none; opacity:0;transform:none;z-index:6; transition:opacity var(--dur) var(--ease),background-color var(--dur) var(--ease);} html[data-mode="watchable"] .rail-nudge.l{left:0;border-radius:var(--nf-radius) 0 0 var(--nf-radius); background:linear-gradient(to right,rgba(20,20,20,.72),rgba(20,20,20,.3));} html[data-mode="watchable"] .rail-nudge.r{right:0;border-radius:0 var(--nf-radius) var(--nf-radius) 0; background:linear-gradient(to left,rgba(20,20,20,.72),rgba(20,20,20,.3));} html[data-mode="watchable"] .rail-wrap:hover .rail-nudge, html[data-mode="watchable"] .rail-nudge:focus-visible{opacity:1;} html[data-mode="watchable"] .rail-nudge:hover{background:rgba(20,20,20,.78);color:#fff;border:none;transform:none;} html[data-mode="watchable"] .rail-nudge:disabled{opacity:0!important;pointer-events:none;} /* Placeholder at the end of the home rows; scrolling near it loads the next batch. */ html[data-mode="watchable"] .nf-more{height:1px;} html[data-mode="watchable"] .nf-card, html[data-mode="watchable"] .nf-wrap{flex:0 0 calc((100% - (var(--per-row) - 1) * var(--tile-gap)) / var(--per-row));} html[data-mode="watchable"] .nf-wrap .nf-card{width:100%;} .nf-art{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--nf-radius,8px);overflow:hidden;background:#232323; transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);} /* clip-path, not just overflow:hidden + border-radius: Chrome drops the rounded clip on a child while its parent is mid-transform, so tiles flashed square corners every time the hover scale ran. */ .nf-art{clip-path:inset(0 round var(--nf-radius,8px));isolation:isolate;} .nf-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .nf-art img.nf-poster-fill{object-position:center 22%;} .nf-name{position:absolute;left:0;right:0;bottom:0;padding:22% 7% 6%; background:linear-gradient(to top,rgba(0,0,0,.86),rgba(0,0,0,0));color:#fff; font-size:clamp(12px,1vw,16px);font-weight:800;line-height:1.15;letter-spacing:-.01em;text-align:left; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} /* Watch mode keeps its own flag geometry — square to the tile's top-left corner rather than following the poster's rounded one, and a size that holds its own against the backdrop art. Colors come from .card-flag. */ html[data-mode="watchable"] .card-flag{border-radius:0 0 6px 0;padding:3px 8px; font-family:inherit;font-size:10.5px;letter-spacing:0;text-transform:none;} html[data-mode="watchable"] .nf-card:hover .nf-art, html[data-mode="watchable"] .nf-card:focus-visible .nf-art{transform:scale(1.045);} html[data-mode="watchable"] .card i.nf-sub{margin-top:6px;font-size:12.5px;color:#b3b3b3;letter-spacing:0;} .nf-resume-play{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px; display:flex;align-items:center;justify-content:center;border-radius:50%; border:2px solid #fff;background:rgba(0,0,0,.5);color:#fff;opacity:0;transition:opacity var(--dur) var(--ease);} .nf-resume-play svg{width:20px;height:20px;margin-left:3px;} html[data-mode="watchable"] .nf-card:hover .nf-resume-play{opacity:1;} html[data-mode="watchable"] .card-wrap .dismiss{top:8px;right:8px;} @media (hover:none),(pointer:coarse){ .nf-resume-play{opacity:.85;} } /* Top 10: big outlined numeral with the poster tucked against it. */ html[data-mode="watchable"] .nf-rank{position:relative;display:flex;align-items:flex-end; flex:0 0 calc((100% - (var(--per-row-top10) - 1) * var(--tile-gap)) / var(--per-row-top10)); container-type:inline-size;} .nf-num{flex:0 0 50%;margin-right:-7%;text-align:right;font-size:78cqw;font-weight:800;line-height:.72; letter-spacing:-.09em;color:var(--ink);-webkit-text-stroke:max(2px,.9cqw) #5e5e5e; font-family:var(--sans);user-select:none;} html[data-mode="watchable"] .nf-rank:last-child .nf-num{letter-spacing:-.2em;margin-right:0;} html[data-mode="watchable"] .nf-rank .sheet{position:relative;z-index:1;width:50%;border-radius:var(--nf-radius); clip-path:inset(0 round var(--nf-radius)); transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);} html[data-mode="watchable"] .nf-rank:hover .sheet{transform:scale(1.045);} html[data-mode="watchable"] .card-preview{background:#181818;border:none;border-radius:10px; box-shadow:0 14px 44px rgba(0,0,0,.8);} /* ---------- title page ---------- */ html[data-mode="watchable"] .nf-hero{margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter); min-height:min(56.25vw,88vh);display:flex;align-items:flex-end;} html[data-mode="watchable"] .nf-hero .hero-bg{opacity:1;filter:none;background-position:center top;} html[data-mode="watchable"] .nf-hero .hero-veil{background: linear-gradient(to top,var(--ink) 0%,rgba(20,20,20,.72) 28%,rgba(20,20,20,0) 58%), linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.3) 45%,rgba(0,0,0,0) 72%);} html[data-mode="watchable"] .nf-hero .hero-in{width:100%;padding:calc(var(--mast-h) + 8vh) 0 1.5vw;} html[data-mode="watchable"] .nf-hero .hero-body{max-width:min(1020px,68vw);padding-top:0;} html[data-mode="watchable"] .nf-hero h1{font-size:clamp(30px,4.2vw,68px);line-height:1;letter-spacing:-.025em; color:#fff;text-shadow:2px 2px 6px rgba(0,0,0,.45);} html[data-mode="watchable"] .nf-hero .facts{font-size:clamp(13px,1.05vw,16px);text-transform:none;letter-spacing:0; color:#d2d2d2;gap:9px;margin-top:14px;} html[data-mode="watchable"] .nf-hero .facts .bar{color:#6b6b6b;} html[data-mode="watchable"] .nf-hero .facts .score{color:var(--t-stream);font-weight:700;} html[data-mode="watchable"] .nf-hero .play-cta{margin:20px 0 0;gap:12px;} html[data-mode="watchable"] .nf-hero .play-btn{background:#fff;color:#000;border-radius:6px;gap:12px; padding:11px 30px 11px 24px;font:700 clamp(15px,1.2vw,20px)/1.2 var(--sans);letter-spacing:0;text-transform:none;text-decoration:none;} html[data-mode="watchable"] .nf-hero .play-btn:hover{background:rgba(255,255,255,.75);filter:none;} html[data-mode="watchable"] .nf-hero .play-btn .tri{border-left-width:13px;border-top-width:8px;border-bottom-width:8px;} html[data-mode="watchable"] .nf-hero .btn.ghost{background:rgba(109,109,110,.7);border:none;color:#fff;border-radius:6px; padding:11px 22px;font:700 clamp(14px,1.1vw,18px)/1.2 var(--sans);letter-spacing:0;text-transform:none;backdrop-filter:none;} html[data-mode="watchable"] .nf-hero .play-note{text-transform:none;letter-spacing:0;font-size:13px;color:#a3a3a3;} html[data-mode="watchable"] .nf-hero .src-warn{color:#bcbcbc;font-size:13px;} .nf-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;} html[data-mode="watchable"] .nf-actions .copyLink{margin-top:0;background:rgba(42,42,42,.6); border:1.5px solid rgba(255,255,255,.5);border-radius:999px;color:#fff;padding:7px 15px; font:600 13.5px/1.2 var(--sans);letter-spacing:0;text-transform:none;backdrop-filter:none;-webkit-backdrop-filter:none;} html[data-mode="watchable"] .nf-actions .copyLink:hover{border-color:#fff;background:rgba(255,255,255,.12);color:#fff;} html[data-mode="watchable"] .nf-actions .icon-bell{width:14px;height:14px;vertical-align:-2px;} .nf-about{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:2.4vw;margin-top:22px;} .nf-tagline{font-style:italic;color:#bcbcbc;margin-bottom:8px;font-size:15px;} html[data-mode="watchable"] .nf-hero .blurb{margin-top:0;max-width:none;color:#fff; font-size:clamp(14px,1.05vw,17px);line-height:1.55;} .nf-credits{font-size:14px;line-height:1.55;color:#ddd;display:flex;flex-direction:column;gap:8px;} .nf-credits span{color:#777;} html[data-mode="watchable"] .nf-credits .helm{margin-top:0;font-size:14px;letter-spacing:0;color:#ddd;} html[data-mode="watchable"] .nf-credits .helm b{color:#777;font-weight:400;} /* Playing: the hero gives itself over to the player. #playerRegion is the same node that held the Play button, patched in place by updatePlayerRegion(), so this is pure CSS — no re-render, and the iframe is never rebuilt. Browsers without :has() keep the player inside the hero, which still works. */ html[data-mode="watchable"] .nf-hero:has(.player-wrap){min-height:0;} html[data-mode="watchable"] .nf-hero:has(.player-wrap) .hero-bg, html[data-mode="watchable"] .nf-hero:has(.player-wrap) .hero-veil, html[data-mode="watchable"] .nf-hero:has(.player-wrap) .hero-body > :not(#playerRegion){display:none;} html[data-mode="watchable"] .nf-hero:has(.player-wrap) .hero-in{padding:calc(var(--mast-h) + 10px) 0 0;} html[data-mode="watchable"] .nf-hero:has(.player-wrap) .hero-body{max-width:none;} html[data-mode="watchable"] .player-wrap{background:#000;border:none;border-radius:var(--nf-radius);box-shadow:none;} html[data-mode="watchable"] .player-head, html[data-mode="watchable"] .src-bar, html[data-mode="watchable"] .picker, html[data-mode="watchable"] .player-keys{background:#141414;border-color:#262626;} html[data-mode="watchable"] .player-now{text-transform:none;letter-spacing:0;font-size:13px;} html[data-mode="watchable"] .player-now b{font-size:16px;color:#fff;} html[data-mode="watchable"] .pbtn, html[data-mode="watchable"] .srcbtn{background:#262626;border-color:#3a3a3a;border-radius:6px;color:#e5e5e5; text-transform:none;letter-spacing:0;font-size:12.5px;} /* Restating the selected state here is not a duplicate of app.css's `.srcbtn.on` — it's a repair. That rule is (0,2,0); the re-skin directly above is (0,2,1) and loads later, so it repainted the selected source #262626 along with every other button. The player only ever renders in watch mode, so the effect was that the source bar had no selected state at all, anywhere. Keep this rule's weight at or above the re-skin's if either selector is ever touched. */ html[data-mode="watchable"] .srcbtn.on, html[data-mode="watchable"] .srcbtn.on:hover{background:var(--accent);border-color:var(--accent); color:#fff;font-weight:600; box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 28%, transparent);} /* Tabs + panes */ html[data-mode="watchable"] .tabs{gap:30px;margin:1.8vw 0 22px;border-bottom:2px solid #2b2b2b;overflow-x:auto;scrollbar-width:none;} html[data-mode="watchable"] .tab{padding:0 0 12px;margin-bottom:-2px;border-bottom:4px solid transparent; font:700 clamp(14px,1.15vw,19px)/1.2 var(--sans);letter-spacing:0;text-transform:none;color:#a3a3a3;white-space:nowrap;} html[data-mode="watchable"] .tab:hover{color:#e5e5e5;} html[data-mode="watchable"] .tab.on{color:#fff;border-bottom-color:var(--accent);} html[data-mode="watchable"] .tab em{font-weight:400;color:#777;} html[data-mode="watchable"] .strip{border-bottom:none;margin:6px 0 14px;} html[data-mode="watchable"] .strip h2{font-size:clamp(16px,1.3vw,21px);font-weight:700;color:#fff;letter-spacing:0;} html[data-mode="watchable"] .strip .tally{text-transform:none;letter-spacing:0;font-size:13px;} html[data-mode="watchable"] .ep-summary{text-transform:none;letter-spacing:0;font-size:14px;} html[data-mode="watchable"] .sbtn{background:#242424;border:1px solid #4d4d4d;border-radius:6px;box-shadow:none; color:#fff;padding:8px 14px;font:600 14px/1.2 var(--sans);letter-spacing:0;text-transform:none;} html[data-mode="watchable"] .sbtn:hover{border-color:#8c8c8c;} html[data-mode="watchable"] .sbtn.on{background:#fff;border-color:#fff;color:#000;} html[data-mode="watchable"] .sbtn.on em{color:#555;} html[data-mode="watchable"] .season-meta .lab{text-transform:none;letter-spacing:0;font-size:13px;} html[data-mode="watchable"] .season-meta p{max-width:88ch;font-size:14px;color:#d2d2d2;} html[data-mode="watchable"] .eplist{border-top:1px solid #404040;} html[data-mode="watchable"] .ep{gap:22px;padding:22px 16px;border-bottom:1px solid #404040;align-items:center;border-radius:var(--nf-radius);} html[data-mode="watchable"] .ep.playable:hover{background:#2a2a2a;padding-left:16px;} html[data-mode="watchable"] .epshot{width:clamp(130px,13vw,200px);border-radius:6px;} html[data-mode="watchable"] .epplay{background:rgba(0,0,0,.35);border-radius:6px;} html[data-mode="watchable"] .epplay::after{border-left-width:16px;border-top-width:11px;border-bottom-width:11px;} html[data-mode="watchable"] .epno{font-size:17px;font-weight:600;color:#d2d2d2;letter-spacing:0;} html[data-mode="watchable"] .ephead b{font-size:16px;color:#fff;} html[data-mode="watchable"] .eprt, html[data-mode="watchable"] .epsc{border:none;padding:0;font-size:14px;letter-spacing:0;color:#bcbcbc;} html[data-mode="watchable"] .epsc{color:var(--t-stream);} html[data-mode="watchable"] .epgo{color:#fff;font-size:14px;font-weight:700;letter-spacing:0;text-transform:none;} html[data-mode="watchable"] .epdate{letter-spacing:0;font-size:13px;} html[data-mode="watchable"] .eptext{color:#d2d2d2;font-size:14px;} html[data-mode="watchable"] .posters{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:22px 12px;} html[data-mode="watchable"] .poster .sheet{border-radius:var(--nf-radius);} html[data-mode="watchable"] .poster .pmeta{letter-spacing:0;font-size:12px;} html[data-mode="watchable"] .person{background:#1f1f1f;border-color:#2b2b2b;box-shadow:none;border-radius:var(--nf-radius);} html[data-mode="watchable"] .status-band, html[data-mode="watchable"] .here-now{background:#1c1c1c;border-color:#2b2b2b;box-shadow:none;border-radius:var(--nf-radius);} /* ---------- everything else inherits the tokens; a few listing-isms off ---------- */ html[data-mode="watchable"] .pill, html[data-mode="watchable"] .kind, html[data-mode="watchable"] .tag{letter-spacing:.02em;} html[data-mode="watchable"] .btn{border-radius:6px;letter-spacing:0;text-transform:none;font-family:var(--sans);font-weight:700;font-size:13.5px;} html[data-mode="watchable"] .card .sheet{border-radius:var(--nf-radius);} html[data-mode="watchable"] .card i{letter-spacing:0;font-size:11.5px;} html[data-mode="watchable"] .prov, html[data-mode="watchable"] .gt{background:#1f1f1f;border-color:#2b2b2b;box-shadow:none;border-radius:var(--nf-radius);} html[data-mode="watchable"] .foot{border-top:none;margin-top:40px;font-size:13px;letter-spacing:0;color:#808080;} html[data-mode="watchable"] .toTop{background:#232323;border-color:#3a3a3a;border-radius:6px;text-transform:none;letter-spacing:0;font-size:12.5px;} /* ---------- section pages (Shows / Movies / New & Popular / Languages) ---------- */ /* Over a billboard the page title and its Genres pill ride on the art, just under the nav, as Netflix's do. */ html[data-mode="watchable"] .sec-page{position:relative;} html[data-mode="watchable"] .sec-page.has-bb > .sec-head{position:absolute;top:calc(var(--mast-h) + 10px);left:0;right:0;z-index:5;margin:0;} html[data-mode="watchable"] .sec-head h1{color:#fff;font-size:clamp(24px,2.5vw,40px);text-shadow:1px 1px 4px rgba(0,0,0,.45);} html[data-mode="watchable"] .sec-crumb{color:#bcbcbc;} html[data-mode="watchable"] .sec-crumb:hover{color:#fff;} html[data-mode="watchable"] .nf-dd-btn{background:rgba(0,0,0,.6);border-color:rgba(255,255,255,.7);color:#fff;font-weight:700;} html[data-mode="watchable"] .nf-dd-btn:hover, html[data-mode="watchable"] .nf-dd-btn[aria-expanded="true"]{background:rgba(255,255,255,.12);border-color:#fff;} html[data-mode="watchable"] .nf-dd-panel{background:rgba(0,0,0,.92);border-color:rgba(255,255,255,.15);backdrop-filter:none;-webkit-backdrop-filter:none;} html[data-mode="watchable"] .nf-dd-panel button{color:#e5e5e5;} html[data-mode="watchable"] .nf-dd-panel button:hover{background:none;color:#fff;text-decoration:underline;} html[data-mode="watchable"] .nf-dd-panel button.on{color:#fff;} html[data-mode="watchable"] .sec-lbl{color:#b3b3b3;} html[data-mode="watchable"] .lang-page .sec-head{justify-content:space-between;} html[data-mode="watchable"] .sec-grid.nf{grid-template-columns:repeat(var(--per-row),minmax(0,1fr));gap:clamp(20px,3vw,44px) var(--tile-gap);} html[data-mode="watchable"] .sec-grid.nf .nf-card{flex:none;width:100%;} html[data-mode="watchable"] .nf-pill{background:rgba(109,109,110,.7);border:none;color:#fff;} html[data-mode="watchable"] .nf-pill:hover{background:rgba(109,109,110,.45);} /* ---------- hover card, Netflix's shape (nfPreviewHTML) ---------- Grows out of the tile it describes: transform-origin is set to the tile's centre when it opens (wireCardPreview). */ html[data-mode="watchable"] .card-preview.nf{border:none;border-radius:8px;background:#181818; box-shadow:0 14px 44px rgba(0,0,0,.8);backdrop-filter:none;-webkit-backdrop-filter:none; transform:scale(.66);transition:opacity .2s var(--ease),transform .3s var(--ease-out);} html[data-mode="watchable"] .card-preview.nf.on{transform:scale(1);} .nfpv-media{position:relative;display:block;aspect-ratio:16/9;background:#232323;overflow:hidden;} .card-preview .nfpv-media .cp-img,.card-preview .nfpv-media .cp-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;aspect-ratio:auto;} .nfpv-media::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;pointer-events:none; background:linear-gradient(to top,rgba(24,24,24,.85),rgba(24,24,24,0));} .nfpv-title{position:absolute;left:14px;right:56px;bottom:10px;z-index:1;pointer-events:none;color:#fff; font-weight:800;font-size:clamp(15px,1.3vw,20px);line-height:1.1;letter-spacing:-.01em;text-shadow:0 1px 4px rgba(0,0,0,.7); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .card-preview.nf .cp-mute{top:auto;bottom:10px;right:12px;width:32px;height:32px;z-index:2; border:1.5px solid rgba(255,255,255,.6);background:rgba(20,20,20,.45);} .card-preview .cp-mute svg{width:17px;height:17px;} .card-preview.nf .cp-expand{display:none;} .nfpv-body{padding:14px 16px 18px;} .nfpv-btns{display:flex;align-items:center;gap:8px;margin-bottom:13px;} .nfpv-c{width:38px;height:38px;border-radius:50%;border:2px solid rgba(255,255,255,.5);background:rgba(42,42,42,.6); color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;flex-shrink:0; transition:border-color .15s,background-color .15s,transform .15s;} .nfpv-c:hover,.nfpv-c:focus-visible{border-color:#fff;background:rgba(255,255,255,.1);} .nfpv-c svg{width:20px;height:20px;} .nfpv-c.play{background:#fff;border-color:#fff;color:#000;} .nfpv-c.play:hover{background:rgba(255,255,255,.8);} .nfpv-c.play svg{width:22px;height:22px;margin-left:2px;} .nfpv-c.more{margin-left:auto;} .nfpv-c.on{border-color:#fff;} .nfpv-rate{position:relative;} .nfpv-rates{position:absolute;left:50%;top:50%;z-index:2;display:flex;gap:2px;padding:3px;border-radius:999px; background:#2a2a2a;box-shadow:0 4px 18px rgba(0,0,0,.7);opacity:0;pointer-events:none; transform:translate(-50%,-50%) scale(.75);transition:opacity .16s,transform .16s;} .nfpv-rate:hover .nfpv-rates,.nfpv-rate.open .nfpv-rates{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);} .nfpv-rates .nfpv-c{border:none;background:none;width:38px;height:38px;} .nfpv-rates .nfpv-c:hover{background:rgba(255,255,255,.14);transform:scale(1.08);} .nfpv-rates .nfpv-c[aria-pressed="true"]{color:var(--accent-ink);} .nfpv-rates .nfpv-c svg{width:22px;height:22px;} .nfpv-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:14px;color:#bcbcbc;margin-bottom:10px;} .nfpv-meta > span:empty{display:none;} .nfpv-new{color:#46d369;font-weight:700;} .nfpv-score{display:inline-flex;align-items:center;gap:4px;color:#fff;font-weight:700;} .nfpv-score svg{width:15px;height:15px;color:#f5c518;} .nfpv-cert{display:inline-block;border:1px solid rgba(255,255,255,.4);padding:0 6px;font-size:12.5px;line-height:1.55;color:#fff;} .card-preview.nf .cp-hd{border:1px solid rgba(255,255,255,.4);background:none;border-radius:3px; font-size:10px;font-weight:700;padding:0 5px;line-height:1.6;color:#fff;} .nfpv-rank{display:flex;align-items:center;gap:8px;color:#fff;font-weight:700;font-size:14.5px;margin-bottom:10px;} .nfpv-rank .nf-t10{width:26px;height:26px;font-size:7px;} .nfpv-genres{display:flex;flex-wrap:wrap;align-items:center;font-size:14px;color:#fff;line-height:1.5;} .nfpv-genres i{width:4px;height:4px;border-radius:50%;background:#646464;margin:0 8px;} /* ---------- title page: More Like This tiles ---------- */ .nf-mlt-h{font-size:clamp(18px,1.6vw,24px);font-weight:700;color:#fff;margin:26px 0 14px;} .nf-mlt-h:first-child{margin-top:8px;} .nf-mlt{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;} .nf-mlt-card{display:flex;flex-direction:column;background:#2f2f2f;border:none;border-radius:6px;overflow:hidden; padding:0;cursor:pointer;text-align:left;color:#d2d2d2;font-family:inherit;transition:background-color .15s;} .nf-mlt-card:hover,.nf-mlt-card:focus-visible{background:#3a3a3a;} .nf-mlt-art{position:relative;display:block;aspect-ratio:16/9;background:#232323;} .nf-mlt-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .nf-mlt-kind{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.7);color:#fff;font-size:11.5px;font-weight:600; padding:2px 7px;border-radius:4px;} .nf-mlt-body{display:flex;flex-direction:column;gap:6px;padding:12px 14px 16px;} .nf-mlt-meta{display:flex;gap:10px;font-size:13.5px;color:#bcbcbc;} .nf-mlt-body b{color:#fff;font-size:15px;line-height:1.25;} .nf-mlt-ov{font-size:13px;line-height:1.45;color:#d2d2d2;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;} /* ---------- responsive ---------- */ @media (max-width:1399px){ html[data-mode="watchable"]{--per-row:5;--per-row-top10:4.4;} } @media (max-width:1099px){ html[data-mode="watchable"]{--per-row:4;--per-row-top10:3.6;} } /* Netflix folds the section links into one "Browse" menu below desktop width; so does this (wired in boot.js). A notch on the menu points back at the button. */ @media (max-width:1180px){ html[data-mode="watchable"] .nav-menu-btn{display:inline-flex;align-items:center;gap:9px;background:none;border:none; color:#fff;font:700 14px/1 var(--sans);cursor:pointer;padding:8px 14px;border-radius:999px;white-space:nowrap;} html[data-mode="watchable"] .nav-menu-btn:hover, html[data-mode="watchable"] .nav-wrap.open .nav-menu-btn{background:rgba(255,255,255,.14);} html[data-mode="watchable"] .nav-menu-btn::after{content:"";border:5px solid transparent;border-top-color:currentColor;margin-top:5px; transition:transform .3s var(--ease);transform-origin:50% 25%;} html[data-mode="watchable"] .nav-wrap.open .nav-menu-btn::after{transform:rotate(180deg);} html[data-mode="watchable"] .nav{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);z-index:40; display:none;flex-direction:column;align-items:stretch;gap:0;min-width:250px;margin:0;padding:8px 0; background:rgba(0,0,0,.94);border:1px solid rgba(255,255,255,.15);border-top:2px solid #e5e5e5;border-radius:6px; box-shadow:0 18px 40px rgba(0,0,0,.7);} html[data-mode="watchable"] .nav::before{content:"";position:absolute;left:50%;top:-9px;margin-left:-8px; border:8px solid transparent;border-top:none;border-bottom-color:#e5e5e5;} /* hover bridge across the 14px gap */ html[data-mode="watchable"] .nav::after{content:"";position:absolute;left:0;right:0;top:-18px;height:18px;} html[data-mode="watchable"] .nav-wrap.open .nav{display:flex;} html[data-mode="watchable"] .nav button{border-radius:0;padding:13px 18px;text-align:center;font-size:14px;} html[data-mode="watchable"] .nav button:hover{background:rgba(255,255,255,.08);} html[data-mode="watchable"] .nav button.on{background:rgba(255,255,255,.14);box-shadow:none;} } @media (max-width:899px){ html[data-mode="watchable"]{--per-row:3;--per-row-top10:3;} html[data-mode="watchable"] .nf-about{grid-template-columns:1fr;} html[data-mode="watchable"] .nf-hero .hero-body{max-width:none;} } @media (max-width:720px){ /* Fractional per-row leaves the next tile peeking in: the swipe cue, since the nudge arrows are hidden on touch. */ html[data-mode="watchable"]{--gutter:16px;--per-row:2.3;--per-row-top10:2.5;--tile-gap:6px;} html[data-mode="watchable"] .masthead-in{padding:0 16px;} html[data-mode="watchable"] .top{min-height:0;padding:10px 0;gap:10px 16px;} html[data-mode="watchable"] .wordmark{font-size:22px;} html[data-mode="watchable"] .nav-wrap{order:0;width:auto;} html[data-mode="watchable"] .nav{left:0;transform:none;width:auto;overflow:visible;} html[data-mode="watchable"] .nav::before{left:40px;} html[data-mode="watchable"] .nav-menu-btn{padding:6px 10px;font-size:13.5px;} html[data-mode="watchable"] .sec-page.has-bb > .sec-head{top:calc(var(--mast-h) + 60px);} html[data-mode="watchable"] .nf-mlt{grid-template-columns:1fr 1fr;gap:10px;} html[data-mode="watchable"] .nf-mlt-ov{-webkit-line-clamp:3;} html[data-mode="watchable"] .seek{max-width:none;} html[data-mode="watchable"] .bb.nf-bb{height:min(128vw,82vh);min-height:0;} html[data-mode="watchable"] .nf-bb .bb-slide{align-items:flex-end;} html[data-mode="watchable"] .nf-bb .bb-bg{background-position:center 30%;} html[data-mode="watchable"] .nf-bb .bb-veil{background:linear-gradient(to top,var(--ink) 0%,rgba(20,20,20,.7) 30%,rgba(20,20,20,0) 62%);} html[data-mode="watchable"] .nf-bb .bb-in{max-width:none;min-width:0;padding:0 0 46px;text-align:center;} html[data-mode="watchable"] .nf-bb p{display:none;} html[data-mode="watchable"] .nf-kicker{justify-content:center;margin-bottom:10px;} html[data-mode="watchable"] .nf-bb .bb-cta{justify-content:center;margin-top:14px;} html[data-mode="watchable"] .nf-bb .bb-dots{left:0;right:0;bottom:16px;justify-content:center;} html[data-mode="watchable"] .nf-bb + .nf-rows{margin-top:10px;} html[data-mode="watchable"] .rail-sec{margin-bottom:16px;} html[data-mode="watchable"] .rail-head .more{opacity:1;} html[data-mode="watchable"] .nf-hero{min-height:0;} html[data-mode="watchable"] .nf-hero .hero-in{padding-top:calc(var(--mast-h) + 34vw);} html[data-mode="watchable"] .nf-hero .hero-veil{background:linear-gradient(to top,var(--ink) 0%,rgba(20,20,20,.82) 45%,rgba(20,20,20,.1) 100%);} html[data-mode="watchable"] .nf-hero .play-cta{flex-direction:column;align-items:stretch;} html[data-mode="watchable"] .nf-hero .play-btn{justify-content:center;} html[data-mode="watchable"] .tabs{gap:22px;} html[data-mode="watchable"] .ep{padding:16px 0;gap:14px;align-items:flex-start;} html[data-mode="watchable"] .ep.playable:hover{padding-left:0;} html[data-mode="watchable"] .epshot{width:120px;} }