/* ========================================================================== Atlas Glass V2 — liquid-glass theme layer (pairs with js/glass.js) Loaded AFTER site.css; everything scoped to [data-glass] on . PERF LAW: nothing inside #app (transform-scrolled) carries backdrop-filter. Real lens = fixed chrome only: #header-right pill, #menu .menu-card stack, .mx-pop music popover (styled in css/radio.css, lensed via .lg-surface). Scrolling panels use .glass-faux (layered gradients, no backdrop-filter). ========================================================================== */ /* ------------------------------------------------------------ aurora backdrop Fixed full-viewport layer painted ABOVE the opaque WebGL #canvas (body::after follows #canvas in tree order at z-index:0) and BELOW #app (z-index:1), so the hero scene stays visible under the colour pools and the lens always has a detailed dark backdrop to refract. Drift is transform-only (never background-position); grain is a tiny tiled feTurbulence SVG. */ html[data-glass]{background:#0d0d10} [data-glass] body{background:#0d0d10} [data-glass] body::after{content:"";position:fixed;inset:-6%;z-index:0;pointer-events:none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") repeat, radial-gradient(42% 34% at 14% 10%, rgba(111,183,255,.10), transparent 62%), radial-gradient(38% 30% at 84% 16%, rgba(136,50,247,.10), transparent 60%), radial-gradient(50% 42% at 76% 88%, rgba(255,158,94,.07), transparent 65%), radial-gradient(36% 30% at 22% 84%, rgba(64,201,198,.08), transparent 60%), radial-gradient(64% 54% at 50% 46%, rgba(26,47,251,.06), transparent 70%); animation:lg2-drift 120s ease-in-out infinite alternate} @keyframes lg2-drift{ from{transform:translate3d(-1.2%,-.8%,0) scale(1.03)} to{transform:translate3d(1.2%,.8%,0) scale(1.07)}} html[data-glass][data-anim="off"] body::after{animation:none} /* ----------------------------------------------- dark bands show the aurora Overrides for site.css solid dark fills: mostly-transparent charcoal bases plus faint local pools, so the fixed aurora glows through. The near-opaque base also mutes the paused hero canvas frame beneath (index footer). .light sections stay untouched. #end-pin / #end-video keep #0d0d10. */ [data-glass] #footer{background: radial-gradient(52% 60% at 82% 6%, rgba(136,50,247,.09), transparent 62%), radial-gradient(44% 52% at 10% 90%, rgba(111,183,255,.07), transparent 60%), rgba(11,12,16,.90)} [data-glass] #scroll-nav{background: radial-gradient(56% 64% at 50% 0%, rgba(26,47,251,.08), transparent 64%), rgba(13,13,16,.88)} [data-glass] .dark{background: radial-gradient(48% 56% at 78% 12%, rgba(136,50,247,.08), transparent 62%), radial-gradient(42% 48% at 16% 86%, rgba(255,158,94,.05), transparent 62%), rgba(13,13,16,.88)} /* -------------------------------------------------------------- lensed chrome Cross-browser base: plain blur fallback (Safari/Firefox keep this; the engine adds the url() lens inline on Chromium). .mx-pop is excluded — its glass skin lives in css/radio.css; it only needs the clip + isolation. */ [data-glass] .lg-surface:not(.mx-pop){ border-radius:22px; background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03) 38%,rgba(13,17,27,.44)); -webkit-backdrop-filter:blur(16px) saturate(150%) brightness(1.05); backdrop-filter:blur(16px) saturate(150%) brightness(1.05); border:1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(255,255,255,.06), inset 1.5px 3px 10px -6px rgba(255,255,255,.32), inset -8px -12px 24px -18px rgba(111,183,255,.26), 0 18px 48px rgba(2,6,14,.55), 0 1px 2px rgba(2,6,14,.30); overflow:hidden; isolation:isolate} [data-glass] .mx-pop{overflow:hidden;isolation:isolate} /* specular overlay — engine injects as first child. .lg2-spec and the --lg2-* custom props are hardcoded by the engine: keep. */ [data-glass] .lg2-spec{ position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2} [data-glass] .lg2-spec::before{ content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px; background:conic-gradient(from calc(var(--lg2-ang,135) * 1deg), transparent 0deg, rgba(255,255,255,.55) 55deg, transparent 130deg, transparent 210deg, rgba(255,255,255,.20) 275deg, transparent 340deg); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; opacity:var(--lg2-spec-o,.35);transition:opacity .35s ease} [data-glass] .lg2-spec::after{ content:"";position:absolute;inset:0;border-radius:inherit; background:radial-gradient(circle 200px at var(--lg2-mx,50%) var(--lg2-my,50%), rgba(255,255,255,.20), rgba(255,255,255,.05) 45%, transparent 70%); mix-blend-mode:screen;opacity:var(--lg2-glare-o,0);transition:opacity .35s ease} /* --------------------------------------------------------- per-surface tuning */ /* header buttons wrapper -> floating glass pill (buttons keep their difference blend; isolation on the pill makes them invert against the frosted result) */ [data-glass] #header-right.lg-surface{position:relative;border-radius:999px;padding:6px 7px; background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02) 40%,rgba(14,18,28,.38))} /* menu cards: white panels go dark glass; text flips light, blue accents stay */ [data-glass] .menu-card.lg-surface{position:relative} [data-glass] #menu-links,[data-glass] #menu-newsletter,[data-glass] #menu-labs{ border-radius:18px; background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02) 30%,rgba(0,0,0,0) 60%), linear-gradient(180deg,rgba(22,26,38,.66),rgba(12,14,21,.76)); box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 24px 70px rgba(2,6,14,.55)} [data-glass] #menu-labs:hover{background:var(--blue)} [data-glass] .menu-link{color:#eaf0ff} [data-glass] .menu-link:hover .menu-link-bg{opacity:.22} [data-glass] #menu-newsletter h3{color:#fff} [data-glass] #menu-newsletter .nl-input{background:rgba(255,255,255,.10)} [data-glass] #menu-newsletter .nl-input input{color:#fff} [data-glass] #menu-newsletter .nl-input input::placeholder{color:rgba(255,255,255,.55)} /* press jelly on the header buttons (transform-only, stays on the compositor) */ [data-glass] .hbtn{transition:border-color .3s,transform 340ms cubic-bezier(.34,1.56,.64,1)} [data-glass] .hbtn:active{transform:scale(.96);transition:border-color .3s,transform 120ms ease-out} /* --------------------------------------------------------------- faux glass For anything that SCROLLS inside #app. NEVER backdrop-filter here: a filtered element that moves with the transform scroll re-samples its whole backdrop every frame. Reads as an etched slab matching the lensed chrome. */ [data-glass] .glass-faux{ background: linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.02) 26%,rgba(0,0,0,0) 55%), linear-gradient(180deg,rgba(25,32,52,.72),rgba(13,17,28,.82)); -webkit-backdrop-filter:none;backdrop-filter:none; border:1px solid rgba(255,255,255,.14); border-radius:18px; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset -6px -10px 20px -16px rgba(111,183,255,.22), 0 10px 26px rgba(2,6,14,.38)} /* ------------------------------------------------------ accessibility paths The engine honours the same queries and stays inert on them, so no inline url() lens is ever set here. */ @media (prefers-reduced-transparency: reduce){ [data-glass] .lg-surface{ -webkit-backdrop-filter:none!important;backdrop-filter:none!important; background:rgba(14,17,26,.97)!important} [data-glass] body::after{animation:none} } @media (prefers-reduced-motion: reduce){ [data-glass] body::after{animation:none} [data-glass] .lg2-spec::before,[data-glass] .lg2-spec::after{transition:none} [data-glass] .hbtn{transition:none} }