@charset "utf-8"; /* ========================================================================= BACKBENCH — LIQUID · the premium theme, and nothing else ------------------------------------------------------------------------- Every selector in this file begins with html:root[data-theme="premium"]. That is not a style choice, it is the contract: Paper and Ink are exactly what they were before this file existed, and the moment someone switches away from Premium the whole thing stops applying. Nothing here leaks. Premium is one room only: black. It does not follow the device's light/dark preference the way the other themes do — a person who paid for this bought the dark glass, so the tokens below are declared at a specificity (0,2,1) that beats app.css's own premium blocks, including the light one it keeps inside a prefers-color-scheme query. What the theme is: · deep black and graphite, one cool accent, nothing purple · panels that are ACTUALLY translucent — white at very low alpha over a blurred backdrop, so the liquid moving behind them shows THROUGH them. A dark grey rectangle sitting on a moving picture is not glass; that was the mistake in the first pass. · a slow liquid backdrop, and Apple's press physics on every control ========================================================================= */ /* ========================================================================= 1 · TOKENS · premium only, dark only The full set is redeclared, including every token app.css sets in its own premium light block — anything left out there would fall through to a light value on a device set to light, which is the bug this prevents. ========================================================================= */ html:root[data-theme="premium"]{ color-scheme:dark; --bg:#050506; --bg-2:#0D0E11; --bg-3:#141619; --bg-4:#1E2126; --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.19); --edge:rgba(255,255,255,.13); --tx:#F4F6F8; --tx-2:#A6ACB5; --tx-3:#6E747D; --glass:rgba(13,14,17,.5); --rail-bg:rgba(6,7,9,.55); --rail-line:rgba(255,255,255,.075); /* one accent, two ends of it — cyan into system blue. Nothing else leads. */ --accent:#63CDF0; --accent-2:#2F7FD4; /* the six subject inks, pulled down in saturation so a full screen reads as graphite with colour in it. The purple slot is now steel blue. */ --ink-1:#77CDAE; --ink-2:#66C9EA; --ink-3:#DE93AC; --ink-4:#D9BE86; --ink-5:#8DAFDD; --ink-6:#DD9C82; --ok:#43CE8B; --ok-bg:rgba(67,206,139,.12); --warn:#E5B95A; --warn-bg:rgba(229,185,90,.12); --bad:#EE6B64; --bad-bg:rgba(238,107,100,.12); --mark-1:rgba(229,185,90,.20); --mark-2:rgba(222,147,172,.18); --mark-3:rgba(102,201,234,.20); --mark-4:rgba(119,205,174,.18); --solid:#F4F6F8; --solid-tx:#07080A; --rule:rgba(255,255,255,.035); --grain:.02; --fibre:0; --aurora:0; /* the old blob layer stands down */ --r:18px; --r-sm:12px; --r-lg:28px; --ease:cubic-bezier(.22,.68,.24,1); --pop:cubic-bezier(.34,1.32,.46,1); --spring:cubic-bezier(.28,1.28,.38,1); /* the shadow sits under the pane, never around it */ --sh:0 1px 1px rgba(0,0,0,.42), 0 12px 30px -18px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(255,255,255,.025); --sh-lg:0 2px 4px rgba(0,0,0,.45), 0 34px 70px -34px rgba(0,0,0,.92), inset 0 1px 0 rgba(255,255,255,.15), inset 0 -1px 0 rgba(255,255,255,.035); /* how hard the glass bends what is behind it — turned down on phones and off where the browser cannot composite it */ --lq-blur:30px; --lq-sat:1.75; } /* one angle, shared by every lit rim below, so they all travel together */ @property --lq-ang{syntax:"";inherits:true;initial-value:0deg} /* ========================================================================= 2 · THE ROOM liquid.js injects this stack on every page. It is hidden by default and only revealed under Premium, so Paper and Ink keep their own backdrops — and switching theme at runtime needs no JavaScript at all, because the reveal is a CSS rule reacting to the attribute app.js already sets. ========================================================================= */ .lq{display:none} html:root[data-theme="premium"] .lq{ display:block;position:fixed;inset:0;z-index:0;pointer-events:none; overflow:hidden;contain:layout paint style} html:root[data-theme="premium"] .bg-paper, html:root[data-theme="premium"] .bg-aurora{display:none} html:root[data-theme="premium"] .app{position:relative;z-index:1} /* the floor. Painted once, never touched again. */ html:root[data-theme="premium"] .lq-base{position:absolute;inset:0; background: radial-gradient(122% 78% at 50% -16%,rgba(54,70,92,.48),transparent 60%), radial-gradient(98% 64% at 104% 86%,rgba(28,62,90,.44),transparent 62%), radial-gradient(86% 58% at -10% 72%,rgba(46,52,66,.36),transparent 60%), radial-gradient(124% 46% at 46% 114%,rgba(34,54,76,.42),transparent 62%), linear-gradient(180deg,#0A0B0F,#06070A 56%,#040507)} /* the liquid. Four bodies, each on its own long clock, animating on transform alone — the blur is baked into each layer once and then only moved, which is why four sixty-viewport blurred shapes cost nothing. */ html:root[data-theme="premium"] .lq-flow{position:absolute;inset:-18%; transform:translate3d(var(--lq-px,0px),var(--lq-py,0px),0); transition:transform 1.4s cubic-bezier(.16,.8,.24,1); will-change:transform} html:root[data-theme="premium"] .lq-flow i{ position:absolute;display:block;border-radius:46% 54% 52% 48%; filter:blur(68px);opacity:.78;mix-blend-mode:screen;will-change:transform; animation:lqDrift 54s cubic-bezier(.45,0,.55,1) infinite alternate} html:root[data-theme="premium"] .lq-flow i:nth-child(1){ width:74vw;height:66vw;left:-16vw;top:-14vw; background: radial-gradient(circle at 34% 34%,rgba(176,198,220,.62),transparent 60%), radial-gradient(circle at 70% 66%,rgba(54,78,106,.85),transparent 68%)} html:root[data-theme="premium"] .lq-flow i:nth-child(2){ width:66vw;height:62vw;right:-18vw;top:18vh; animation-duration:72s;animation-delay:-19s; background: radial-gradient(circle at 46% 40%,rgba(99,205,240,.42),transparent 60%), radial-gradient(circle at 62% 70%,rgba(38,68,104,.82),transparent 68%)} html:root[data-theme="premium"] .lq-flow i:nth-child(3){ width:70vw;height:58vw;left:24vw;bottom:-22vw; animation-duration:88s;animation-delay:-41s; background: radial-gradient(circle at 40% 48%,rgba(140,158,180,.55),transparent 60%), radial-gradient(circle at 74% 34%,rgba(47,127,212,.34),transparent 64%)} html:root[data-theme="premium"] .lq-flow i:nth-child(4){ width:52vw;height:52vw;left:6vw;top:34vh; animation-duration:64s;animation-delay:-28s;opacity:.46; background:radial-gradient(circle at 50% 44%,rgba(196,214,232,.44),transparent 62%)} @keyframes lqDrift{ 0% {transform:translate3d(0,0,0) rotate(0deg) scale(1)} 34% {transform:translate3d(5vw,-4vh,0) rotate(48deg) scale(1.16)} 68% {transform:translate3d(-3vw,5vh,0) rotate(112deg) scale(.94)} 100%{transform:translate3d(4vw,2vh,0) rotate(168deg) scale(1.1)} } /* the chrome sweep — one very slow conic turn under soft-light. This is what reads as polished dark metal rather than flat grey, and it is a single rotating element. */ html:root[data-theme="premium"] .lq-sheen{ position:absolute;inset:-30%;opacity:.52;mix-blend-mode:soft-light; filter:blur(34px);will-change:transform; animation:lqTurn 120s linear infinite; background:conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.00) 0deg,rgba(255,255,255,.14) 42deg, rgba(120,190,220,.08) 96deg,rgba(255,255,255,.00) 150deg, rgba(255,255,255,.10) 214deg,rgba(90,140,190,.09) 276deg, rgba(255,255,255,.00) 340deg,rgba(255,255,255,.00) 360deg)} html:root[data-theme="premium"] .lq-sheen-2{ position:absolute;inset:-40%;opacity:.22;mix-blend-mode:overlay; filter:blur(52px);will-change:transform; animation:lqTurnBack 186s linear infinite; background:conic-gradient(from 120deg at 44% 56%, rgba(255,255,255,.00),rgba(255,255,255,.12) 70deg, rgba(255,255,255,.00) 140deg,rgba(150,205,235,.10) 230deg, rgba(255,255,255,.00) 320deg,rgba(255,255,255,.00))} @keyframes lqTurn{to{transform:rotate(360deg)}} @keyframes lqTurnBack{to{transform:rotate(-360deg)}} /* the still ripple — a displacement sheet rendered once and left alone, so the filter is computed a single time. The movement comes from the liquid underneath; this only makes the surface look wet rather than clean. */ html:root[data-theme="premium"] .lq-ripple{position:absolute;inset:0; opacity:.2;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008 .016' numOctaves='3' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23r)'/%3E%3C/svg%3E"); background-size:760px 760px} html:root[data-theme="premium"] .lq-vig{position:absolute;inset:0; background:radial-gradient(115% 88% at 50% 44%,transparent 46%,rgba(0,0,0,.36) 100%)} /* ========================================================================= 3 · THE MATERIAL The panel recipe. The important number is the background: white at four to six percent, NOT a dark grey. Tinting a panel with --bg-2 makes a black box that happens to sit on a moving picture; white at low alpha over a blurred backdrop lets the liquid come through the panel, which is the whole difference between a glass theme and a dark theme. ========================================================================= */ html:root[data-theme="premium"] .card, html:root[data-theme="premium"] .strip, html:root[data-theme="premium"] .tile, html:root[data-theme="premium"] .hero-r, html:root[data-theme="premium"] .bal-hero, html:root[data-theme="premium"] .more-sec, html:root[data-theme="premium"] .tt, html:root[data-theme="premium"] .fc-f, html:root[data-theme="premium"] .fc-b, html:root[data-theme="premium"] .shop-i, html:root[data-theme="premium"] .shop-card, html:root[data-theme="premium"] .shop-soon, html:root[data-theme="premium"] .cram-act, html:root[data-theme="premium"] .panic-next, html:root[data-theme="premium"] .note, html:root[data-theme="premium"] .ad-wrap, html:root[data-theme="premium"] dialog{ --lqx:50%; --lqy:-10%; position:relative; background:linear-gradient(168deg, rgba(255,255,255,.062) 0%, rgba(255,255,255,.022) 62%, rgba(255,255,255,.035) 100%); border:1px solid var(--line); border-radius:var(--r); -webkit-backdrop-filter:blur(var(--lq-blur)) saturate(var(--lq-sat)); backdrop-filter:blur(var(--lq-blur)) saturate(var(--lq-sat)); box-shadow:var(--sh); transition:transform .46s var(--spring),box-shadow .38s var(--ease), border-color .3s var(--ease),background .3s var(--ease); } /* three of those carry their own radius upstream and keep it */ html:root[data-theme="premium"] .note{border-radius:var(--r-sm)} html:root[data-theme="premium"] .fc-f, html:root[data-theme="premium"] .fc-b, html:root[data-theme="premium"] dialog{border-radius:var(--r-lg)} /* the two drop-targets keep their dashed edge — that dash IS the affordance */ html:root[data-theme="premium"] .drop, html:root[data-theme="premium"] .empty{ background:linear-gradient(168deg, rgba(255,255,255,.04),rgba(255,255,255,.012)); -webkit-backdrop-filter:blur(var(--lq-blur)) saturate(var(--lq-sat)); backdrop-filter:blur(var(--lq-blur)) saturate(var(--lq-sat)); transition:border-color .24s var(--ease),background .24s var(--ease)} html:root[data-theme="premium"] .drop:hover, html:root[data-theme="premium"] .drop.over{border-color:var(--accent); background:linear-gradient(168deg, color-mix(in srgb,var(--accent) 11%,transparent),rgba(255,255,255,.02))} /* the lit top edge — where the room's light lands on the pane */ html:root[data-theme="premium"] .card::before, html:root[data-theme="premium"] .strip::before, html:root[data-theme="premium"] .tile::before, html:root[data-theme="premium"] .more-sec::before, html:root[data-theme="premium"] .fc-f::before, html:root[data-theme="premium"] .fc-b::before, html:root[data-theme="premium"] .shop-i::before, html:root[data-theme="premium"] .cram-act::before, html:root[data-theme="premium"] dialog::before{ content:"";position:absolute;inset:0;border-radius:inherit; pointer-events:none;z-index:0; background: linear-gradient(180deg,rgba(255,255,255,.10),transparent 28%), radial-gradient(130% 62% at 12% -18%,rgba(255,255,255,.11),transparent 58%)} /* the specular that follows the pointer — the reason the glass reads as curved rather than as a flat rectangle with a gradient on it */ html:root[data-theme="premium"] .card::after, html:root[data-theme="premium"] .tile::after, html:root[data-theme="premium"] .hero-r::after, html:root[data-theme="premium"] .bal-hero::after, html:root[data-theme="premium"] .more-sec::after, html:root[data-theme="premium"] .shop-i::after, html:root[data-theme="premium"] .cram-act::after{ content:"";position:absolute;inset:0;border-radius:inherit; pointer-events:none;z-index:0;opacity:0; transition:opacity .45s var(--ease); background:radial-gradient(420px 320px at var(--lqx) var(--lqy), rgba(255,255,255,.12),rgba(99,205,240,.055) 34%,transparent 66%)} @media (hover:hover) and (pointer:fine){ html:root[data-theme="premium"] .card:hover::after, html:root[data-theme="premium"] .tile:hover::after, html:root[data-theme="premium"] .hero-r:hover::after, html:root[data-theme="premium"] .bal-hero:hover::after, html:root[data-theme="premium"] .more-sec:hover::after, html:root[data-theme="premium"] .shop-i:hover::after, html:root[data-theme="premium"] .cram-act:hover::after{opacity:1} } /* content climbs above both pseudo-elements */ html:root[data-theme="premium"] .card>*, html:root[data-theme="premium"] .strip>*, html:root[data-theme="premium"] .tile>*, html:root[data-theme="premium"] .hero-r>*, html:root[data-theme="premium"] .bal-hero>*, html:root[data-theme="premium"] .more-sec>*, html:root[data-theme="premium"] .shop-i>*, html:root[data-theme="premium"] .cram-act>*{position:relative;z-index:1} /* the two hero panels get the one piece of moving light in the interface: a highlight that travels around the edge, masked to a single pixel so it is a rim and not a glow */ html:root[data-theme="premium"] .hero-r, html:root[data-theme="premium"] .bal-hero{border-color:transparent} html:root[data-theme="premium"] .hero-r::before, html:root[data-theme="premium"] .bal-hero::before{ content:"";position:absolute;inset:0;border-radius:inherit;padding:1px; pointer-events:none;z-index:0; background:conic-gradient(from var(--lq-ang,0deg), rgba(255,255,255,.32),rgba(255,255,255,.05) 22%, color-mix(in srgb,var(--accent) 52%,transparent) 48%, rgba(255,255,255,.05) 74%,rgba(255,255,255,.32)); -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000); mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000); -webkit-mask-composite:xor;mask-composite:exclude; animation:lqRim 14s linear infinite} @keyframes lqRim{to{--lq-ang:360deg}} @supports not (background:conic-gradient(from 0deg,red,blue)){ html:root[data-theme="premium"] .hero-r, html:root[data-theme="premium"] .bal-hero{border-color:var(--line)} html:root[data-theme="premium"] .hero-r::before, html:root[data-theme="premium"] .bal-hero::before{display:none} } /* glass lifts toward the light and brightens as it comes */ @media (hover:hover) and (pointer:fine){ html:root[data-theme="premium"] button.card:hover, html:root[data-theme="premium"] a.card:hover, html:root[data-theme="premium"] .tile:hover, html:root[data-theme="premium"] .shop-i:hover, html:root[data-theme="premium"] .cram-act:hover{ transform:translateY(-4px) scale(1.007); border-color:var(--line-2);box-shadow:var(--sh-lg)} } html:root[data-theme="premium"] button.card:active, html:root[data-theme="premium"] a.card:active, html:root[data-theme="premium"] .tile:active, html:root[data-theme="premium"] .shop-i:active, html:root[data-theme="premium"] .cram-act:active{ transform:translateY(-1px) scale(.992);transition-duration:.12s} /* a strip is ONE long pane with dividers, not six stacked panes */ html:root[data-theme="premium"] .strip{overflow:hidden} html:root[data-theme="premium"] .strip-i{background:none; border-right:1px solid var(--line);transition:background .28s var(--ease)} html:root[data-theme="premium"] .strip-i:hover{background:rgba(255,255,255,.04)} /* things that sit INSIDE glass are recessed, so they darken rather than lighten — further from the light, not closer to it */ html:root[data-theme="premium"] .card-q, html:root[data-theme="premium"] .card-q::before, html:root[data-theme="premium"] .card-q::after{ background:none;border:0;box-shadow:none; -webkit-backdrop-filter:none;backdrop-filter:none} html:root[data-theme="premium"] .sheet{background-image:none; background-color:rgba(255,255,255,.035)} html:root[data-theme="premium"] .qa{background:rgba(255,255,255,.03); border-color:var(--line);border-radius:var(--r-sm); transition:background .25s var(--ease)} html:root[data-theme="premium"] .qa[open], html:root[data-theme="premium"] .qa:hover{background:rgba(255,255,255,.055)} /* ========================================================================= 4 · THE FURNITURE · rail, top bar, tab bar All three are panes, which is what lets content slide underneath them instead of stopping at them. ========================================================================= */ html:root[data-theme="premium"] .rail{background:var(--rail-bg); border-right:1px solid var(--rail-line); -webkit-backdrop-filter:blur(40px) saturate(1.8); backdrop-filter:blur(40px) saturate(1.8)} html:root[data-theme="premium"] .rail::after{content:"";position:absolute; inset:0;pointer-events:none; background:linear-gradient(90deg,rgba(255,255,255,.035),transparent 32%)} html:root[data-theme="premium"] .rail>*{position:relative;z-index:1} html:root[data-theme="premium"] .nav-ind{ background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.07)); border:1px solid rgba(255,255,255,.15); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); box-shadow:0 6px 18px -10px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.17); transition:transform .5s var(--spring),opacity .28s var(--ease), height .32s var(--ease)} /* the sliding pill is glass now, so the current item keeps its own colour instead of inverting to the page's text colour */ html:root[data-theme="premium"] .nv[aria-current="page"]{ color:var(--tx);font-weight:600} html:root[data-theme="premium"] .nv[aria-current="page"] .nv-i{color:var(--accent)} html:root[data-theme="premium"] .nv[aria-current="page"] .nv-n{ background:rgba(255,255,255,.14);color:var(--tx)} html:root[data-theme="premium"] .nv{transition:color .24s var(--ease), transform .4s var(--spring),background .24s var(--ease)} html:root[data-theme="premium"] .nv:hover{background:rgba(255,255,255,.055)} html:root[data-theme="premium"] .nv::before{background:var(--accent)} html:root[data-theme="premium"] .nv-n{background:rgba(255,255,255,.07); border:1px solid var(--line)} html:root[data-theme="premium"] .rail-me{border-radius:14px; transition:background .24s var(--ease),transform .34s var(--spring)} html:root[data-theme="premium"] .rail-me:hover{background:rgba(255,255,255,.055)} html:root[data-theme="premium"] .mtop{ background:color-mix(in srgb,var(--bg) 50%,transparent); -webkit-backdrop-filter:blur(30px) saturate(1.7); backdrop-filter:blur(30px) saturate(1.7)} html:root[data-theme="premium"] .mtop.stuck{border-bottom-color:var(--line); box-shadow:0 12px 28px -26px rgba(0,0,0,.9)} html:root[data-theme="premium"] .tabs{ background:color-mix(in srgb,var(--bg) 46%,transparent); border-top:1px solid var(--line); -webkit-backdrop-filter:blur(34px) saturate(1.8); backdrop-filter:blur(34px) saturate(1.8)} html:root[data-theme="premium"] .tab-ind{ background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.055)); border:1px solid rgba(255,255,255,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.16); transition:transform .48s var(--spring),width .48s var(--spring),opacity .24s} html:root[data-theme="premium"] .tb[aria-current="page"]{color:var(--tx)} html:root[data-theme="premium"] .tb[aria-current="page"]::before{ background:var(--accent); box-shadow:0 0 10px -1px color-mix(in srgb,var(--accent) 70%,transparent)} html:root[data-theme="premium"] .tb:active{transform:scale(.9)} html:root[data-theme="premium"] .brand-m{ background:linear-gradient(150deg,rgba(255,255,255,.96),rgba(210,220,230,.82)); color:#07080A;box-shadow:0 6px 16px -10px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.9)} /* ========================================================================= 5 · CONTROLS · Apple's press physics A control shrinks under the finger and springs back past its resting size. `.lq-down` is the class liquid.js sets on pointerdown, because `:active` alone leaves a control stuck looking pressed on some mobile browsers when a touch turns into a scroll. ========================================================================= */ html:root[data-theme="premium"] .btn{border:1px solid var(--line-2); background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.03)); -webkit-backdrop-filter:blur(18px) saturate(1.5); backdrop-filter:blur(18px) saturate(1.5); box-shadow:inset 0 1px 0 rgba(255,255,255,.11), 0 4px 14px -10px rgba(0,0,0,.8); transition:transform .38s var(--spring),border-color .22s var(--ease), background .22s var(--ease),box-shadow .28s var(--ease),color .2s} html:root[data-theme="premium"] .btn:hover{ border-color:color-mix(in srgb,var(--tx) 26%,transparent); background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.055)); transform:translateY(-2px);box-shadow:var(--sh)} html:root[data-theme="premium"] .btn:active{ transform:translateY(0) scale(.955);transition-duration:.1s} html:root[data-theme="premium"] .btn-p{ background:linear-gradient(180deg,#FFFFFF,#DFE4EA);color:#07080A; border-color:transparent; box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 10px 26px -14px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.10)} html:root[data-theme="premium"] .btn-p:hover{ background:linear-gradient(180deg,#FFFFFF,#EAEEF3); box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 16px 34px -14px rgba(0,0,0,.95), 0 0 26px -12px color-mix(in srgb,var(--accent) 70%,transparent)} html:root[data-theme="premium"] .btn-q{background:none;border-color:transparent; box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none} html:root[data-theme="premium"] .btn-q:hover{background:rgba(255,255,255,.07); border-color:transparent;box-shadow:none} html:root[data-theme="premium"] .btn-bad, html:root[data-theme="premium"] .btn-ai{background:none;box-shadow:none; -webkit-backdrop-filter:none;backdrop-filter:none} html:root[data-theme="premium"] .chip{border:1px solid var(--line); background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.028)); -webkit-backdrop-filter:blur(16px) saturate(1.5); backdrop-filter:blur(16px) saturate(1.5); box-shadow:inset 0 1px 0 rgba(255,255,255,.10); transition:transform .38s var(--spring),border-color .22s var(--ease), background .22s var(--ease),box-shadow .28s var(--ease),color .2s} html:root[data-theme="premium"] .chip:hover{border-color:var(--line-2); transform:translateY(-2px);box-shadow:var(--sh)} html:root[data-theme="premium"] .chip:active{transform:translateY(0) scale(.95)} html:root[data-theme="premium"] .chip[aria-pressed="true"]{ background:linear-gradient(180deg,#FFFFFF,#DFE4EA);color:#07080A; border-color:transparent} html:root[data-theme="premium"] .chip-coin{ border-color:color-mix(in srgb,var(--accent) 24%,var(--line)); background:linear-gradient(180deg, color-mix(in srgb,var(--accent) 11%,transparent), color-mix(in srgb,var(--accent) 4%,transparent))} html:root[data-theme="premium"] .chip-coin svg{color:var(--accent)} html:root[data-theme="premium"] .seg{background:rgba(255,255,255,.05); border:1px solid var(--line); -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)} html:root[data-theme="premium"] .seg button{ transition:color .22s var(--ease),transform .34s var(--spring), background .26s var(--ease)} html:root[data-theme="premium"] .seg button:active{transform:scale(.94)} html:root[data-theme="premium"] .seg button[aria-pressed="true"]{ background:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.07)); color:var(--tx); box-shadow:0 4px 12px -8px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.17)} html:root[data-theme="premium"] .inp, html:root[data-theme="premium"] select.inp, html:root[data-theme="premium"] textarea.inp{ background:rgba(255,255,255,.048);border:1px solid var(--line-2); border-radius:var(--r-sm); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); transition:border-color .22s var(--ease),box-shadow .28s var(--ease), background .22s var(--ease)} html:root[data-theme="premium"] .inp:focus{ border-color:color-mix(in srgb,var(--accent) 70%,transparent); background:rgba(255,255,255,.075); box-shadow:0 0 0 3.5px color-mix(in srgb,var(--accent) 18%,transparent)} html:root[data-theme="premium"] .tick{border-color:var(--line-2); background:rgba(255,255,255,.045); transition:transform .38s var(--spring),border-color .22s,background .22s} html:root[data-theme="premium"] .tick:hover{border-color:var(--accent); transform:scale(1.1)} html:root[data-theme="premium"] .tick[aria-pressed="true"]{ background:linear-gradient(180deg,#FFFFFF,#DFE4EA);border-color:transparent; box-shadow:0 4px 12px -7px rgba(0,0,0,.9)} html:root[data-theme="premium"] :focus-visible{outline:2px solid var(--accent); outline-offset:2px;border-radius:8px} html:root[data-theme="premium"] ::selection{ background:color-mix(in srgb,var(--accent) 34%,transparent);color:var(--tx)} html:root[data-theme="premium"] .lnk{color:var(--accent)} html:root[data-theme="premium"] .av{ background:linear-gradient(140deg,var(--accent),var(--accent-2)); box-shadow:0 6px 16px -10px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.28)} html:root[data-theme="premium"] .rw{transition:background .24s var(--ease)} html:root[data-theme="premium"] .rw:hover, html:root[data-theme="premium"] .task:hover{background:rgba(255,255,255,.04)} html:root[data-theme="premium"] .more-ic{background:rgba(255,255,255,.06); border:1px solid var(--line)} html:root[data-theme="premium"] .more-sec .rw:hover .more-ic{ background:color-mix(in srgb,var(--accent) 18%,transparent); border-color:color-mix(in srgb,var(--accent) 34%,transparent); transform:scale(1.08)} html:root[data-theme="premium"] .pl{background:rgba(255,255,255,.04); border:1px solid var(--line); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); transition:transform .38s var(--spring),border-color .22s,background .22s} html:root[data-theme="premium"] .pl:hover{transform:translateY(-2px); background:rgba(255,255,255,.065);border-color:var(--line-2)} /* the press state liquid.js sets. Scoped here like everything else, so Ink and Paper keep exactly the press behaviour they had before. */ html:root[data-theme="premium"] .lq-down{transition-duration:.1s!important} html:root[data-theme="premium"] .btn.lq-down, html:root[data-theme="premium"] .chip.lq-down, html:root[data-theme="premium"] .seg button.lq-down, html:root[data-theme="premium"] .tick.lq-down, html:root[data-theme="premium"] .gate-fi.lq-down, html:root[data-theme="premium"] .cal-d.lq-down{transform:scale(.95)} html:root[data-theme="premium"] .tb.lq-down{transform:scale(.9)} html:root[data-theme="premium"] .nv.lq-down{transform:translateX(3px) scale(.978)} html:root[data-theme="premium"] .rail-me.lq-down{transform:scale(.985)} html:root[data-theme="premium"] .tile.lq-down, html:root[data-theme="premium"] button.card.lq-down, html:root[data-theme="premium"] a.card.lq-down, html:root[data-theme="premium"] .shop-i.lq-down, html:root[data-theme="premium"] .cram-act.lq-down{ transform:translateY(-1px) scale(.99)} /* ========================================================================= 6 · DATA · rings, meters, bars All of them fill rather than appear. Because app.js re-renders a view on entry these elements are new each time, so a plain CSS animation replays exactly when it should and needs no JavaScript at all. ========================================================================= */ html:root[data-theme="premium"] .ring .bg, html:root[data-theme="premium"] .clock .bg{stroke:rgba(255,255,255,.09)} html:root[data-theme="premium"] .ring .fg{ filter:drop-shadow(0 0 6px color-mix(in srgb,var(--ink,var(--accent)) 45%,transparent)); animation:lqRing 1.15s var(--ease) both} @keyframes lqRing{from{stroke-dashoffset:var(--c)}} html:root[data-theme="premium"] .clock .fg{ filter:drop-shadow(0 0 10px color-mix(in srgb,var(--accent) 40%,transparent))} html:root[data-theme="premium"] .clock.rest .fg{stroke:var(--accent)} html:root[data-theme="premium"] .meter, html:root[data-theme="premium"] .wgt-b, html:root[data-theme="premium"] .cram-min-bar, html:root[data-theme="premium"] .blitz-bar, html:root[data-theme="premium"] .rail-xp{background:rgba(255,255,255,.08); box-shadow:inset 0 1px 2px rgba(0,0,0,.4)} /* the fill grows out of the left edge. scaleX rather than width, so it never fights the inline width app.js writes, and never reflows. */ html:root[data-theme="premium"] .meter i, html:root[data-theme="premium"] .wgt-b i, html:root[data-theme="premium"] .cram-min-bar i, html:root[data-theme="premium"] .rail-xp i{ transform-origin:left center;animation:lqFill .9s var(--ease) both; box-shadow:0 0 12px -3px color-mix(in srgb,var(--ink,var(--accent)) 60%,transparent)} @keyframes lqFill{from{transform:scaleX(0)}to{transform:scaleX(1)}} html:root[data-theme="premium"] .meter.ok i{ box-shadow:0 0 12px -3px color-mix(in srgb,var(--ok) 60%,transparent)} html:root[data-theme="premium"] .meter.warn i{ box-shadow:0 0 12px -3px color-mix(in srgb,var(--warn) 60%,transparent)} html:root[data-theme="premium"] .meter.bad i{ box-shadow:0 0 12px -3px color-mix(in srgb,var(--bad) 60%,transparent)} html:root[data-theme="premium"] .wk-b{background:rgba(255,255,255,.055); border:1px solid transparent} html:root[data-theme="premium"] .wk-b i{transform-origin:bottom; animation:lqRaise .8s var(--ease) both} @keyframes lqRaise{from{transform:scaleY(0)}to{transform:scaleY(1)}} html:root[data-theme="premium"] .wk-d.now .wk-b{ border-color:color-mix(in srgb,var(--accent) 45%,transparent); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent)} html:root[data-theme="premium"] .wk-b .f{background:var(--accent)} html:root[data-theme="premium"] .bar-t i{transform-origin:bottom; animation:lqRaise .85s var(--ease) both} html:root[data-theme="premium"] .bar.now .bar-t i{background:var(--accent); opacity:1;box-shadow:0 0 14px -4px color-mix(in srgb,var(--accent) 70%,transparent)} html:root[data-theme="premium"] .dots i, html:root[data-theme="premium"] .heat i, html:root[data-theme="premium"] .heat-k i{background:rgba(255,255,255,.08)} html:root[data-theme="premium"] .hero-l::before{ background:linear-gradient(180deg,var(--accent),var(--accent-2)); box-shadow:0 0 18px -4px color-mix(in srgb,var(--accent) 70%,transparent)} /* at display size the highlighter band becomes an underline — the one colour allowed to lead a page is the accent */ html:root[data-theme="premium"] .dsp .mark, html:root[data-theme="premium"] .d1 .mark, html:root[data-theme="premium"] .d2 .mark{ background-image:linear-gradient(var(--accent),var(--accent))} /* ========================================================================= 7 · DEPTH · dialogs, overlays, the rest of the surfaces ========================================================================= */ html:root[data-theme="premium"] dialog{ -webkit-backdrop-filter:blur(44px) saturate(1.9); backdrop-filter:blur(44px) saturate(1.9); box-shadow:var(--sh-lg),0 80px 120px -60px rgba(0,0,0,.9)} html:root[data-theme="premium"] dialog[open]{animation:lqRise .5s var(--spring)} @keyframes lqRise{from{opacity:0;transform:translateY(18px) scale(.96)} to{opacity:1;transform:none}} html:root[data-theme="premium"] dialog::backdrop{background:rgba(3,4,6,.5); -webkit-backdrop-filter:blur(20px) saturate(1.2); backdrop-filter:blur(20px) saturate(1.2)} /* a pill radius only holds while a toast is one line; the moment it wraps the ends bulge into lozenges. A rounded rectangle survives both. */ html:root[data-theme="premium"] .toast{border-radius:20px;padding:12px 20px; line-height:1.45;background:rgba(22,24,28,.7);color:var(--tx); border:1px solid rgba(255,255,255,.12); -webkit-backdrop-filter:blur(28px) saturate(1.8); backdrop-filter:blur(28px) saturate(1.8); box-shadow:0 18px 44px -20px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.14)} html:root[data-theme="premium"] .csheet, html:root[data-theme="premium"] .blitz, html:root[data-theme="premium"] .panic{ background:color-mix(in srgb,var(--bg) 60%,transparent); -webkit-backdrop-filter:blur(34px) saturate(1.6); backdrop-filter:blur(34px) saturate(1.6)} html:root[data-theme="premium"] .cs-bar{ background:color-mix(in srgb,var(--bg) 52%,transparent); border-bottom:1px solid var(--line); -webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px)} html:root[data-theme="premium"] .tt{overflow-x:auto} html:root[data-theme="premium"] .tt th, html:root[data-theme="premium"] .tt .hour{background:rgba(255,255,255,.045)} html:root[data-theme="premium"] .tt .slot:hover{background:rgba(255,255,255,.06)} html:root[data-theme="premium"] .tt th.tt-now{ background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--tx)} html:root[data-theme="premium"] .cal-d{background:rgba(255,255,255,.04); border-color:var(--line); transition:transform .34s var(--spring),background .2s,border-color .2s} html:root[data-theme="premium"] .cal-d:hover:not([disabled]){transform:scale(1.1); border-color:color-mix(in srgb,var(--accent) 55%,transparent); background:rgba(255,255,255,.085)} html:root[data-theme="premium"] .cal-d.now{border-color:var(--accent); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent)} html:root[data-theme="premium"] .prose code, html:root[data-theme="premium"] .prose pre, html:root[data-theme="premium"] .prose th{background:rgba(255,255,255,.055)} html:root[data-theme="premium"] .prose blockquote{ border-left-color:color-mix(in srgb,var(--accent) 60%,transparent)} html:root[data-theme="premium"] .tile-th{background:rgba(255,255,255,.05)} html:root[data-theme="premium"] .fc-f, html:root[data-theme="premium"] .fc-b{box-shadow:var(--sh-lg)} html:root[data-theme="premium"] .fc::before, html:root[data-theme="premium"] .fc::after{background:rgba(255,255,255,.035); border-color:var(--line);border-radius:var(--r-lg); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} html:root[data-theme="premium"] .fc-in{ transition:transform .72s cubic-bezier(.3,.9,.25,1)} html:root[data-theme="premium"] .bal-hero{ border-color:color-mix(in srgb,var(--accent) 26%,var(--line))} /* the admin room's content is unpositioned, which would let the fixed liquid layer paint over it */ html:root[data-theme="premium"] .ad, html:root[data-theme="premium"] .lock{position:relative;z-index:1} html:root[data-theme="premium"] table.ad-t tbody tr{ transition:background .2s var(--ease)} html:root[data-theme="premium"] table.ad-t tbody tr:hover{ background:rgba(255,255,255,.045)} html:root[data-theme="premium"] table.ad-t th{background:rgba(255,255,255,.035)} /* ========================================================================= 8 · MOTION · page transitions and arrival ========================================================================= */ html:root[data-theme="premium"] .view.on{animation:lqView .52s var(--ease) both} @keyframes lqView{ from{opacity:0;transform:translateY(12px) scale(.992)} to{opacity:1;transform:none}} /* the blur is desktop-only: it is the most expensive thing in the file, and a phone gets the same read from the translate alone */ @media (hover:hover) and (pointer:fine) and (min-width:961px){ html:root[data-theme="premium"] .view.on{animation-name:lqViewBlur} @keyframes lqViewBlur{ from{opacity:0;transform:translateY(14px) scale(.99);filter:blur(5px)} 60%{filter:blur(0)} to{opacity:1;transform:none;filter:blur(0)}} } html:root[data-theme="premium"] .view.on>.hero, html:root[data-theme="premium"] .view.on>.strip, html:root[data-theme="premium"] .view.on>.card, html:root[data-theme="premium"] .view.on>.head, html:root[data-theme="premium"] .view.on>.grid, html:root[data-theme="premium"] .view.on>.tiles, html:root[data-theme="premium"] .view.on>.sec-h{ animation:lqSettle .6s var(--ease) both} @keyframes lqSettle{from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none}} html:root[data-theme="premium"] .view.on>*:nth-child(1){animation-delay:.03s} html:root[data-theme="premium"] .view.on>*:nth-child(2){animation-delay:.08s} html:root[data-theme="premium"] .view.on>*:nth-child(3){animation-delay:.13s} html:root[data-theme="premium"] .view.on>*:nth-child(4){animation-delay:.18s} html:root[data-theme="premium"] .view.on>*:nth-child(5){animation-delay:.23s} html:root[data-theme="premium"] .view.on>*:nth-child(n+6){animation-delay:.27s} /* the app's own press ripple, restyled as light spreading through glass rather than ink spreading through paper */ html:root[data-theme="premium"] .rip{ background:radial-gradient(circle,rgba(255,255,255,.5),transparent 70%); opacity:.22;animation:lqRip .68s var(--ease) forwards} @keyframes lqRip{to{transform:scale(18);opacity:0}} /* slower and fainter than a marketing sweep, so it reads as a reflection travelling across the surface rather than as a wipe */ html:root[data-theme="premium"] .btn-p::after, html:root[data-theme="premium"] .chip-coin::after{ background:linear-gradient(112deg,transparent 34%,rgba(255,255,255,.28) 48%, rgba(255,255,255,.04) 56%,transparent 70%); animation-duration:7s} html:root[data-theme="premium"] .rise{transform:translateY(18px) scale(.99); transition:opacity .68s var(--ease) var(--rd,0ms), transform .68s var(--spring) var(--rd,0ms)} /* ========================================================================= 9 · THE DOOR · login.html The sign-in page runs before there is an account to hold a preference, so it keeps its own look by default. These rules only bite if the stored theme is Premium, which is the same condition as everywhere else. ========================================================================= */ html:root[data-theme="premium"] .gate{background:transparent} html:root[data-theme="premium"] .gate-bg, html:root[data-theme="premium"] .gate-rule{display:none} html:root[data-theme="premium"] .gate-card{border-radius:var(--r-lg); background:linear-gradient(168deg, rgba(255,255,255,.062),rgba(255,255,255,.022) 62%,rgba(255,255,255,.035)); border:1px solid var(--line); -webkit-backdrop-filter:blur(40px) saturate(1.9); backdrop-filter:blur(40px) saturate(1.9); box-shadow:var(--sh-lg),0 70px 110px -60px rgba(0,0,0,.9)} html:root[data-theme="premium"] .gate-fi{background:rgba(255,255,255,.05); border:1px solid var(--line); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} html:root[data-theme="premium"] .gate-fi:hover{border-color:var(--line-2); transform:translateY(-2px);background:rgba(255,255,255,.08)} html:root[data-theme="premium"] .gate-fi-i .nv-i{color:var(--accent)} html:root[data-theme="premium"] .gate-eye.on{color:var(--accent)} html:root[data-theme="premium"] .gate-glow{--tone:var(--accent)} /* ========================================================================= 10 · FIT · phones, old browsers, and people who asked for less motion ========================================================================= */ /* a phone stacks far more panes per screen than a monitor does, and each backdrop-filter is a separate composited pass. Half the radius is visually indistinguishable at that size and roughly halves the cost. The bodies are also re-sized: measured in vw they came out far too small to read as liquid on a narrow screen. */ @media (max-width:960px){ html:root[data-theme="premium"]{--lq-blur:20px;--lq-sat:1.6} html:root[data-theme="premium"] .lq-flow{inset:-40%} html:root[data-theme="premium"] .lq-flow i{filter:blur(58px)} html:root[data-theme="premium"] .lq-flow i:nth-child(1){ width:150vw;height:130vw;left:-40vw;top:-30vw} html:root[data-theme="premium"] .lq-flow i:nth-child(2){ width:140vw;height:130vw;right:-50vw;top:12vh} html:root[data-theme="premium"] .lq-flow i:nth-child(3){ width:150vw;height:120vw;left:-20vw;bottom:-40vw} html:root[data-theme="premium"] .lq-flow i:nth-child(4){ width:110vw;height:110vw;left:-10vw;top:30vh} html:root[data-theme="premium"] .lq-sheen{filter:blur(26px)} html:root[data-theme="premium"] .lq-sheen-2{display:none} html:root[data-theme="premium"] .rail{backdrop-filter:none; -webkit-backdrop-filter:none} } @media (max-width:560px){ html:root[data-theme="premium"]{--lq-blur:16px;--r:16px;--r-lg:24px} html:root[data-theme="premium"] .lq-ripple{display:none} } @media (max-width:420px){ html:root[data-theme="premium"] .card::after, html:root[data-theme="premium"] .tile::after{display:none} } /* Where the browser cannot composite a backdrop-filter, every pane falls back to opaque graphite. Layout, rims, motion and the liquid behind it all still hold — only the refraction is missing. */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ html:root[data-theme="premium"] .card, html:root[data-theme="premium"] .strip, html:root[data-theme="premium"] .tile, html:root[data-theme="premium"] .hero-r, html:root[data-theme="premium"] .bal-hero, html:root[data-theme="premium"] .more-sec, html:root[data-theme="premium"] .tt, html:root[data-theme="premium"] .fc-f, html:root[data-theme="premium"] .fc-b, html:root[data-theme="premium"] .shop-i, html:root[data-theme="premium"] .gate-card, html:root[data-theme="premium"] .cram-act, html:root[data-theme="premium"] .note, html:root[data-theme="premium"] .ad-wrap, html:root[data-theme="premium"] dialog, html:root[data-theme="premium"] .toast, html:root[data-theme="premium"] .btn, html:root[data-theme="premium"] .chip, html:root[data-theme="premium"] .seg, html:root[data-theme="premium"] .inp{background:var(--bg-2)} html:root[data-theme="premium"] .btn-p{ background:linear-gradient(180deg,#FFFFFF,#DFE4EA)} html:root[data-theme="premium"] .mtop, html:root[data-theme="premium"] .tabs, html:root[data-theme="premium"] .rail{background:var(--bg)} } /* Someone who asked the OS for less motion gets the material and none of the movement — including the liquid, which is the whole point. Nothing is hidden; everything simply stops. */ @media (prefers-reduced-motion:reduce){ html:root[data-theme="premium"] .lq-flow i, html:root[data-theme="premium"] .lq-sheen, html:root[data-theme="premium"] .lq-sheen-2, html:root[data-theme="premium"] .hero-r::before, html:root[data-theme="premium"] .bal-hero::before, html:root[data-theme="premium"] .view.on, html:root[data-theme="premium"] .view.on>*, html:root[data-theme="premium"] .ring .fg, html:root[data-theme="premium"] .meter i, html:root[data-theme="premium"] .wgt-b i, html:root[data-theme="premium"] .cram-min-bar i, html:root[data-theme="premium"] .rail-xp i, html:root[data-theme="premium"] .wk-b i, html:root[data-theme="premium"] .bar-t i, html:root[data-theme="premium"] dialog[open], html:root[data-theme="premium"] .btn-p::after, html:root[data-theme="premium"] .chip-coin::after{animation:none!important} html:root[data-theme="premium"] .lq-flow{transition:none} html:root[data-theme="premium"] .meter i, html:root[data-theme="premium"] .wgt-b i, html:root[data-theme="premium"] .cram-min-bar i, html:root[data-theme="premium"] .rail-xp i, html:root[data-theme="premium"] .wk-b i, html:root[data-theme="premium"] .bar-t i{transform:none} html:root[data-theme="premium"] .card:hover, html:root[data-theme="premium"] .tile:hover, html:root[data-theme="premium"] .btn:hover, html:root[data-theme="premium"] .chip:hover, html:root[data-theme="premium"] .shop-i:hover, html:root[data-theme="premium"] .cram-act:hover, html:root[data-theme="premium"] .pl:hover, html:root[data-theme="premium"] .cal-d:hover:not([disabled]){transform:none} } /* the printed page is paper again — glass does not photocopy */ @media print{ .lq{display:none!important} html:root[data-theme="premium"] .card, html:root[data-theme="premium"] .strip, html:root[data-theme="premium"] .tile, html:root[data-theme="premium"] .sheet, html:root[data-theme="premium"] .ad-wrap{background:#fff;border-color:#ccc; box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none} html:root[data-theme="premium"] .card::before, html:root[data-theme="premium"] .card::after, html:root[data-theme="premium"] .tile::before, html:root[data-theme="premium"] .tile::after{display:none} }