/* ─────────────────────────────────────────────────────────────────────── Warmr liquid-glass language — shared across every page (zero-build). Pairs with liquid-glass.js (injects the SVG filters + glass cursor + nav scroll-state). Link this LAST in so it layers over the page's own CSS. The homepage (index.html) carries its own inline copy; this serves the content/legal/card pages. ─────────────────────────────────────────────────────────────────────── */ /* token safety-net: guarantees the glass renders even on a page that didn't declare these (values mirror the design tokens). */ :root{ --bg:#08070a;--bg-2:#0c0b0e;--line:#26232c;--ink:#f4efe4;--lime:#cfff3a;--lime-ink:#08070a; } /* ── liquid-glass cursor (a refracting glass bead trailing a precise lime dot) ── cursor:none is applied via the .lg-cursor-on class that liquid-glass.js adds, so if the script never runs the native cursor stays (no invisible-cursor bug). */ .lg-cursor-on,.lg-cursor-on *{cursor:none} .lg-cur{position:fixed;left:0;top:0;pointer-events:none;z-index:200; transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%; -webkit-backdrop-filter:blur(2px) saturate(150%); backdrop-filter:blur(2px) saturate(150%) url(#lg-cursor-dist); border:1px solid rgba(255,255,255,.35); box-shadow: inset 1.5px 1.5px 1px rgba(255,255,255,.55), inset -1px -2px 4px rgba(255,255,255,.12), inset 0 0 8px rgba(255,255,255,.10), 0 5px 14px -3px rgba(0,0,0,.45); transition:width .26s cubic-bezier(.2,.8,.2,1),height .26s cubic-bezier(.2,.8,.2,1),border-color .26s} /* hover: a small SEE-THROUGH lime ring framing the pointer (no frosted lens covering the target) */ .lg-cur.lg{width:36px;height:36px; -webkit-backdrop-filter:none;backdrop-filter:none; border-color:color-mix(in oklab,var(--lime) 78%,transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab,var(--lime) 18%,transparent), 0 0 16px -2px color-mix(in oklab,var(--lime) 45%,transparent)} .lg-cur-dot{position:fixed;left:0;top:0;pointer-events:none;z-index:201; transform:translate(-50%,-50%);width:5px;height:5px;border-radius:50%;background:var(--lime); box-shadow:0 0 6px color-mix(in oklab,var(--lime) 60%,transparent)} @media (hover:none),(pointer:coarse){.lg-cur,.lg-cur-dot{display:none!important}.lg-cursor-on,.lg-cursor-on *{cursor:auto}} /* ── nav → deepened liquid-glass bar (material matches the homepage pill) ── */ header.top{ background:linear-gradient(180deg, color-mix(in oklab,var(--bg) 70%,transparent), color-mix(in oklab,var(--bg) 82%,transparent)); -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%); border-bottom:1px solid rgba(244,239,228,.10); box-shadow:0 12px 34px -20px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.07); transition:background .3s,box-shadow .3s} header.top.lg-scrolled{ background:linear-gradient(180deg, color-mix(in oklab,var(--bg) 84%,transparent), color-mix(in oklab,var(--bg) 92%,transparent)); box-shadow:0 16px 40px -20px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.09)} /* ── ghost sign-in button → frosted glass chip ── */ a.nav-signin{ -webkit-backdrop-filter:blur(8px) saturate(150%);backdrop-filter:blur(8px) saturate(150%); background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015)); box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.02)} /* ── content cards → glass panels: top light line + corner bloom over a frosted body ── */ .card{position:relative; background: linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,0) 5px), radial-gradient(220px 100px at 16% -26%,rgba(255,255,255,.06),transparent 70%), linear-gradient(180deg,color-mix(in oklab,var(--bg-2) 86%,transparent),color-mix(in oklab,var(--bg-2) 74%,transparent)); -webkit-backdrop-filter:blur(10px) saturate(145%);backdrop-filter:blur(10px) saturate(145%)} .card:hover{box-shadow:0 24px 54px -28px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.14)}