/* SUNA liquid glass — a colour, title and material layer over app.css. Switched on with html.lg (+ lg-float, lg-round) on ; the SVG filters #lg-s / #lg-l live at the top of index.html. Material follows Apple's Liquid Glass "clear" style: no blur, no fill, just light — a bright specular rim, a lens glow inside the edges, and a couple of ice streaks. */ /* ---------- palettes ---------- */ html.lg{ /* 1 · Ice — black-ice backdrop, iridescent titles */ --bg:#08080b;--bgr:8,8,11;--raise:#121216;--raise-2:#1c1c22; --line:rgba(255,255,255,.09);--line-2:rgba(255,255,255,.17); --text:#f4f4f7;--soft:#dcdce3;--muted:#a3a3ad;--faint:#6b6b75; --au1:170,215,255;--au2:255,255,255;--au3:205,185,255;--au4:150,240,225;--aa:.09; --ir:linear-gradient(170deg,#72ebe0 0%,#ffffff 24%,#8a6cff 44%,#e254c4 62%,#ffb854 82%,#72ebe0 100%); --gold:#72ebe0;--gold-deep:#8a6cff;--spice:#ff8fa8; --rim:255,255,255;--btn-text:#fff; } /* ---------- aura behind everything ---------- */ html.lg,html.lg body{background:var(--bg)} html.lg body{background:transparent} html.lg body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background: radial-gradient(60% 40% at 100% 6%,rgba(var(--au1),var(--aa)),transparent 70%), radial-gradient(60% 45% at 0% 42%,rgba(var(--au2),var(--aa)),transparent 70%), radial-gradient(60% 40% at 100% 76%,rgba(var(--au3),var(--aa)),transparent 70%), radial-gradient(50% 32% at 8% 100%,rgba(var(--au4),var(--aa)),transparent 70%)} html.lg .hero{background:transparent} html.lg .hero .slide>img,html.lg .hero .hero-vid,html.lg .hero .shade{-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent);mask-image:linear-gradient(to bottom,#000 55%,transparent)} html.lg .hero .shade{background:linear-gradient(to top,rgba(0,0,0,0),rgba(0,0,0,.4) 22%,rgba(0,0,0,0) 55%),linear-gradient(to right,rgba(0,0,0,.4),rgba(0,0,0,0) 55%)} html.lg .banner::after{background:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0) 60%)} html.lg .banner img{-webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent);mask-image:linear-gradient(to bottom,#000 60%,transparent)} html.lg .sheet{background:radial-gradient(70% 40% at 100% 30%,rgba(var(--au1),var(--aa)),transparent 70%),radial-gradient(60% 40% at 0% 80%,rgba(var(--au3),var(--aa)),transparent 70%),var(--bg)} html.lg .spot,html.lg .spot.wide{background:var(--raise)} html.lg .spot.wide::after{background:linear-gradient(to top,rgba(0,0,0,.85) 10%,rgba(0,0,0,.1) 75%),linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0) 70%)} @media (min-width:900px){html.lg .spot.wide::after{background:linear-gradient(to right,var(--raise) 36%,rgba(0,0,0,0) 62%)}} /* ---------- hero: every slide uses the same positions ---------- */ html.lg .hero-copy{gap:0} html.lg .hero-copy>.eyebrow{line-height:16px;margin-bottom:6px} html.lg .hero h1{font-size:var(--fit,28px);line-height:38px;height:38px;margin:0 0 4px;padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap} html.lg .hero .btns{margin-top:18px} html.lg .hero .dots{margin-top:16px} html.lg .hero .title-art{height:38px;max-height:none;margin-bottom:4px} html.lg .hero .log{display:block;line-height:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} @media (min-width:900px){html.lg .hero-copy{max-width:min(860px,72vw)}html.lg .hero .log{max-width:62ch}html.lg .hero h1{font-size:var(--fit,46px);line-height:60px;height:60px;margin-bottom:6px}html.lg .hero-copy>.eyebrow{margin-bottom:8px}html.lg .hero .log{line-height:26px}html.lg .hero .btns{margin-top:24px}html.lg .hero .title-art{height:60px;margin-bottom:6px}} /* ---------- the material: clear glass, no blur, no fill ---------- */ html.lg .btn.play,html.lg .btn.ghost,html.lg .btn.gold,html.lg .chip-new,html.lg .top .searchpill{ color:var(--btn-text,#fff);border:0; background:linear-gradient(115deg,rgba(255,255,255,0) 18%,rgba(255,255,255,.16) 26%,rgba(255,255,255,0) 34%,rgba(255,255,255,0) 62%,rgba(255,255,255,.09) 67%,rgba(255,255,255,0) 72%); backdrop-filter:saturate(150%);-webkit-backdrop-filter:saturate(150%); box-shadow: inset 0 1px 0 rgba(var(--rim),.95), inset 0 -1px 0 rgba(var(--rim),.45), inset 1px 0 0 rgba(var(--rim),.35),inset -1px 0 0 rgba(var(--rim),.35), inset 0 8px 10px -8px rgba(var(--rim),.55), inset 0 -8px 10px -8px rgba(var(--rim),.3), 0 6px 16px -8px rgba(0,0,0,.45)} html.lg .btn.play,html.lg .btn.ghost,html.lg .btn.gold{position:relative;height:42px;border-radius:8px;text-shadow:0 1px 3px rgba(0,0,0,.55)} html.lg .btn.play{box-shadow:inset 0 1.5px 0 rgba(var(--rim),1),inset 0 -1px 0 rgba(var(--rim),.6),inset 1px 0 0 rgba(var(--rim),.45),inset -1px 0 0 rgba(var(--rim),.45),inset 0 10px 12px -9px rgba(var(--rim),.7),inset 0 -9px 12px -9px rgba(var(--rim),.4),0 6px 16px -8px rgba(0,0,0,.45)} html.lg .btn:hover{filter:brightness(1.15)} html.lg .chip-new{border-radius:5px;padding:2px 7px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.7);backdrop-filter:saturate(150%) brightness(.8);-webkit-backdrop-filter:saturate(150%) brightness(.8)} /* bars */ html.lg .tabs{background:rgba(var(--bgr),.78);backdrop-filter:blur(16px) saturate(170%);-webkit-backdrop-filter:blur(16px) saturate(170%);border-color:var(--line)} html.lg .top.solid{background:linear-gradient(to bottom,rgba(var(--bgr),.95),rgba(var(--bgr),.82));backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);box-shadow:0 1px 0 var(--line)} html.lg .chip.gold,html.lg .toggle.on{background:var(--gold);border-color:var(--gold);color:#120f18} html.lg .ava{box-shadow:0 0 0 1.5px rgba(var(--rim),.8),0 0 12px rgba(var(--au1),.45)} /* ---------- design: floating capsules (iOS 26 style) ---------- */ html.lg.lg-float .tabs{left:14px;right:14px;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);border-radius:999px;padding:4px 6px;border:0; background:rgba(var(--bgr),.55);backdrop-filter:blur(14px) saturate(180%);-webkit-backdrop-filter:blur(14px) saturate(180%); box-shadow:inset 0 1px 0 rgba(var(--rim),.8),inset 0 -1px 0 rgba(var(--rim),.3),inset 0 10px 14px -10px rgba(var(--rim),.35),0 12px 30px -10px rgba(0,0,0,.6)} html.lg.lg-float .tabs button{border-radius:999px;padding:7px 0 6px} html.lg.lg-float .tabs button[aria-current="page"]{box-shadow:inset 0 1px 0 rgba(var(--rim),.8),inset 0 -1px 0 rgba(var(--rim),.3),inset 0 8px 10px -8px rgba(var(--rim),.4)} html.lg.lg-float .vault{padding-bottom:calc(var(--tabs-h) + env(safe-area-inset-bottom,0px) + 40px)} html.lg.lg-round .poster,html.lg.lg-round .tile,html.lg.lg-round .spot{border-radius:14px} html.lg.lg-round .ep .th{border-radius:10px} /* ---------- ice letters ---------- */ html.lg .hero h1,html.lg .spot h3,html.lg .page-head h1,html.lg .sheet-body h2,html.lg .join h1,html.lg .rank .num,html.lg .soonveil b,html.lg .empty b{ color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:0; background:var(--ir);-webkit-background-clip:text;background-clip:text;filter:url(#lg-s)} html.lg .hero h1,html.lg .sheet-body h2,html.lg .page-head h1{font-weight:600} html.lg .rank .num{filter:url(#lg-l);padding-top:16px;line-height:.9} html.lg .join h1{filter:url(#lg-l)} /* ---------- spotlights: same spacing scale; smaller button ---------- */ html.lg .spot-copy{gap:0} html.lg .spot-copy>.eyebrow{line-height:16px;margin-bottom:8px} html.lg .spot h3{line-height:1.18;margin-bottom:8px} html.lg .spot p{line-height:22px;margin-bottom:18px} html.lg .spot .btn{height:38px;padding:0 18px;font-size:12px} @media (min-width:900px){html.lg .spot-copy>.eyebrow{margin-bottom:10px}html.lg .spot h3{margin-bottom:10px}html.lg .spot p{line-height:24px;margin-bottom:24px}html.lg .spot .btn{height:42px;padding:0 22px}} /* ---------- top menu: no boxes; text and icons follow the banner's brightness ---------- */ html.lg .top .mark,html.lg .top .tr{filter:none} html.lg .top .nav button,html.lg .top .nav a,html.lg .top .icon-btn,html.lg .top .searchpill{transition:color .4s ease,text-shadow .4s ease} html.lg .top:not(.solid) .nav button,html.lg .top:not(.solid) .nav a,html.lg .top:not(.solid) .icon-btn{color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.6)} html.lg .top:not(.solid) .icon-btn svg{filter:drop-shadow(0 1px 6px rgba(0,0,0,.55))} html.lg .top.over-light:not(.solid) .nav button,html.lg .top.over-light:not(.solid) .nav a,html.lg .top.over-light:not(.solid) .icon-btn{color:#14121a;text-shadow:0 1px 10px rgba(255,255,255,.55)} html.lg .top.over-light:not(.solid) .icon-btn svg{filter:drop-shadow(0 1px 6px rgba(255,255,255,.6))} /* search: one floating glass bar */ html.lg .top .searchpill{border:0;color:rgba(255,255,255,.85);text-shadow:0 1px 4px rgba(0,0,0,.5);backdrop-filter:saturate(150%) brightness(.85);-webkit-backdrop-filter:saturate(150%) brightness(.85)} html.lg .top.over-light:not(.solid) .searchpill{color:#14121a;text-shadow:none;backdrop-filter:saturate(150%) brightness(1.1);-webkit-backdrop-filter:saturate(150%) brightness(1.1)} /* ---------- ombre labels: genres, series names and row titles (video titles stay white) ---------- */ html.lg{--omb:linear-gradient(90deg,#72ebe0 0%,#8a9bff 30%,#c86ee0 55%,#ff7fb0 78%,#ffc46b 100%)} html.lg .c-eyebrow,html.lg .rail h2>span:first-child{ width:fit-content;max-width:100%;justify-self:start; background:var(--omb);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} html.lg .rail h2>span:first-child .sub{-webkit-text-fill-color:var(--muted);color:var(--muted)} html.lg .rail h2>span:first-child .n18{-webkit-text-fill-color:var(--spice);color:var(--spice)} html.lg .c-eyebrow{display:block} /* series names over banners and spotlights stay white — the titles there are already colourful */ html.lg .hero .eyebrow,html.lg .spot .eyebrow{color:#fff;-webkit-text-fill-color:#fff;background:none;text-shadow:0 1px 6px rgba(0,0,0,.5)} /* breathing room between the banner and the first row */ html.lg .vault main{padding-top:30px} @media (min-width:900px){html.lg .vault main{padding-top:40px}} /* ---------- logo in the ice colours ---------- */ html.lg .mark{position:relative;width:36px;height:36px;filter:url(#lg-s) drop-shadow(0 0 6px rgba(138,108,255,.4))} html.lg .mark::before{content:"";position:absolute;inset:0;background:var(--ir);-webkit-mask:var(--logo,url(/logo.png)) center/contain no-repeat;mask:var(--logo,url(/logo.png)) center/contain no-repeat} html.lg .mark img{opacity:0} @media (min-width:900px){html.lg .mark{width:40px;height:40px}} /* ---------- small surfaces ---------- */ html.lg .instbar{background:rgba(var(--bgr),.88);border-color:var(--line-2)} html.lg.lg-float .instbar{bottom:calc(var(--tabs-h) + env(safe-area-inset-bottom,0px) + 24px);border-radius:16px} html.lg .next-card{background:rgba(var(--bgr),.94)} html.lg .pbtn.gold{border-color:rgba(114,235,224,.4)} html.lg .ep.current{background:linear-gradient(to right,rgba(114,235,224,.08),transparent)} /* join screen: the new glass app icon instead of the gold crest */ html.lg .crest{content:url(/icon-512.png?v=2);border-radius:28px;filter:drop-shadow(0 10px 34px rgba(226,84,196,.35))} html.lg .join{background:radial-gradient(70% 50% at 50% 0%,rgba(138,108,255,.18),transparent 70%),radial-gradient(60% 40% at 50% 100%,rgba(226,84,196,.12),transparent 70%),var(--bg)} /* ---------- fixes ---------- */ /* long ombre labels must not push a card wider than its column (they get "…" instead) */ html.lg .card{min-width:0} /* short pages (empty My List) are still at least one screen tall, so the fixed tab bar never jumps up on iPhone */ html.lg body{min-height:calc(100vh + env(safe-area-inset-top,0px))} /* join screen tickets: the artwork has its own smoky background, so its edges fade into the page */ html.lg .ticket{max-width:380px} html.lg .ticket img{-webkit-mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);mask-composite:intersect} /* ---------- grids on phones: iPhone Safari sizes a