. Nothing here touches border-radius directly; .lg reads --lg-radius. ------------------------------------------------------------------------- */ /* midnight - deepest structural panel; the widest blur of the set. */ .glass-midnight, html[data-accent="midnight"] .glass-accent { --lg-blur: 36px; --lg-saturation: 128%; --lg-brightness: 88%; --lg-tint-top: rgba(20, 26, 36, 0.506); --lg-tint-bottom: rgba(20, 26, 36, 0.242); --lg-radius: 26px; --lg-rim-w: 1.5px; --lg-rim-angle: 145deg; --lg-rim-1: rgba(230, 237, 249, 0.580); --lg-rim-2: rgba(230, 237, 249, 0.052); --lg-rim-3: rgba(230, 237, 249, 0.319); --lg-inner-blur: 20px; --lg-inner-color: rgba(230, 237, 249, 0.200); --lg-inner-spread: -6px; --lg-shadow-y: 20px; --lg-shadow-blur: 50px; --lg-shadow-color: rgba(0, 0, 0, 0.42); --lg-spec: rgba(230, 237, 249, 0.140); --lg-noise: var(--noise-04); } /* onyx - the darkest, least saturated surface. Use where content must win: code blocks, the footer, dense read-only data. */ .glass-onyx, .glass-code { --lg-blur: 24px; --lg-saturation: 104%; --lg-brightness: 76%; --lg-tint-top: rgba(11, 13, 16, 0.644); --lg-tint-bottom: rgba(11, 13, 16, 0.308); --lg-radius: 20px; --lg-rim-w: 1.5px; --lg-rim-angle: 145deg; --lg-rim-1: rgba(214, 220, 230, 0.440); --lg-rim-2: rgba(214, 220, 230, 0.040); --lg-rim-3: rgba(214, 220, 230, 0.242); --lg-inner-blur: 12px; --lg-inner-color: rgba(214, 220, 230, 0.140); --lg-inner-spread: -4px; --lg-shadow-y: 24px; --lg-shadow-blur: 58px; --lg-shadow-color: rgba(0, 0, 0, 0.50); --lg-spec: rgba(214, 220, 230, 0.140); --lg-noise: var(--noise-06); } /* spaceblack - neutral mid-dark; the default for form panels. */ .glass-spaceblack, .glass-panel { --lg-blur: 30px; --lg-saturation: 110%; --lg-brightness: 82%; --lg-tint-top: rgba(18, 19, 22, 0.575); --lg-tint-bottom: rgba(18, 19, 22, 0.275); --lg-radius: 22px; --lg-rim-w: 1.5px; --lg-rim-angle: 145deg; --lg-rim-1: rgba(223, 229, 238, 0.500); --lg-rim-2: rgba(223, 229, 238, 0.045); --lg-rim-3: rgba(223, 229, 238, 0.275); --lg-inner-blur: 16px; --lg-inner-color: rgba(223, 229, 238, 0.160); --lg-inner-spread: -5px; --lg-shadow-y: 22px; --lg-shadow-blur: 54px; --lg-shadow-color: rgba(0, 0, 0, 0.46); --lg-spec: rgba(223, 229, 238, 0.140); --lg-noise: var(--noise-05); } /* charcoal - tighter corner, shallower shadow: reads as a *nested* card. */ .glass-charcoal { --lg-blur: 28px; --lg-saturation: 112%; --lg-brightness: 86%; --lg-tint-top: rgba(28, 31, 37, 0.529); --lg-tint-bottom: rgba(28, 31, 37, 0.253); --lg-radius: 18px; --lg-rim-w: 1.5px; --lg-rim-angle: 145deg; --lg-rim-1: rgba(232, 236, 242, 0.520); --lg-rim-2: rgba(232, 236, 242, 0.047); --lg-rim-3: rgba(232, 236, 242, 0.286); --lg-inner-blur: 14px; --lg-inner-color: rgba(232, 236, 242, 0.180); --lg-inner-spread: -4px; --lg-shadow-y: 16px; --lg-shadow-blur: 42px; --lg-shadow-color: rgba(0, 0, 0, 0.42); --lg-spec: rgba(232, 236, 242, 0.140); --lg-noise: var(--noise-06); } /* gunmetal - brightest rim of the neutrals (0.74) and an off-axis 130deg light. Use it when a neutral surface still has to feel "picked up". */ .glass-gunmetal, html[data-accent="gunmetal"] .glass-accent { --lg-blur: 26px; --lg-saturation: 120%; --lg-brightness: 90%; --lg-tint-top: rgba(47, 53, 61, 0.460); --lg-tint-bottom: rgba(47, 53, 61, 0.220); --lg-radius: 20px; --lg-rim-w: 1.5px; --lg-rim-angle: 130deg; --lg-rim-1: rgba(242, 245, 250, 0.740); --lg-rim-2: rgba(242, 245, 250, 0.067); --lg-rim-3: rgba(242, 245, 250, 0.407); --lg-inner-blur: 16px; --lg-inner-color: rgba(242, 245, 250, 0.240); --lg-inner-spread: -5px; --lg-shadow-y: 16px; --lg-shadow-blur: 40px; --lg-shadow-color: rgba(0, 0, 0, 0.40); --lg-spec: rgba(242, 245, 250, 0.140); --lg-noise: var(--noise-05); } /* slate - the lightest, most transparent neutral: big hero surfaces where the scene should still read clearly through the panel. */ .glass-slate, .glass-card { --lg-blur: 34px; --lg-saturation: 124%; --lg-brightness: 92%; --lg-tint-top: rgba(43, 50, 61, 0.437); --lg-tint-bottom: rgba(43, 50, 61, 0.209); --lg-radius: 24px; --lg-rim-w: 1.5px; --lg-rim-angle: 145deg; --lg-rim-1: rgba(233, 238, 247, 0.600); --lg-rim-2: rgba(233, 238, 247, 0.054); --lg-rim-3: rgba(233, 238, 247, 0.330); --lg-inner-blur: 20px; --lg-inner-color: rgba(233, 238, 247, 0.220); --lg-inner-spread: -6px; --lg-shadow-y: 18px; --lg-shadow-blur: 46px; --lg-shadow-color: rgba(0, 0, 0, 0.38); --lg-spec: rgba(233, 238, 247, 0.140); --lg-noise: var(--noise-04); } /* --- the three chromatic presets ------------------------------------------ Very high saturation (190-200%) with a thin tint: the colour comes mostly from over-saturating whatever is *behind* the glass, not from painting on top of it. That is what keeps them from looking like coloured plastic. */ .glass-indigo, html[data-accent="indigo"] .glass-accent, :root:not([data-accent]) .glass-accent { --lg-blur: 24px; --lg-saturation: 190%; --lg-brightness: 106%; --lg-tint-top: rgba(91, 91, 255, 0.299); --lg-tint-bottom: rgba(91, 91, 255, 0.143); --lg-radius: 28px; --lg-rim-w: 1.5px; --lg-rim-angle: 145deg; --lg-rim-1: rgba(255, 255, 255, 0.750); --lg-rim-2: rgba(255, 255, 255, 0.068); --lg-rim-3: rgba(255, 255, 255, 0.413); --lg-inner-blur: 20px; --lg-inner-color: rgba(255, 255, 255, 0.280); --lg-inner-spread: -6px; --lg-shadow-y: 18px; --lg-shadow-blur: 40px; --lg-shadow-color: rgba(0, 0, 0, 0.28); --lg-spec: rgba(255, 255, 255, 0.140); --lg-noise: var(--noise-04); } .glass-violet, html[data-accent="violet"] .glass-accent { --lg-blur: 24px; --lg-saturation: 200%; --lg-brightness: 108%; --lg-tint-top: rgba(191, 90, 242, 0.299); --lg-tint-bottom: rgba(191, 90, 242, 0.143); --lg-radius: 28px; --lg-rim-w: 1.5px; --lg-rim-angle: 125deg; --lg-rim-1: rgba(255, 255, 255, 0.750); --lg-rim-2: rgba(255, 255, 255, 0.068); --lg-rim-3: rgba(255, 255, 255, 0.413); --lg-inner-blur: 20px; --lg-inner-color: rgba(255, 255, 255, 0.280); --lg-inner-spread: -6px; --lg-shadow-y: 18px; --lg-shadow-blur: 40px; --lg-shadow-color: rgba(0, 0, 0, 0.28); --lg-spec: rgba(255, 255, 255, 0.140); --lg-noise: var(--noise-04); } .glass-teal, html[data-accent="teal"] .glass-accent { --lg-blur: 24px; --lg-saturation: 198%; --lg-brightness: 108%; --lg-tint-top: rgba(42, 212, 212, 0.265); --lg-tint-bottom: rgba(42, 212, 212, 0.127); --lg-radius: 28px; --lg-rim-w: 1.5px; --lg-rim-angle: 145deg; --lg-rim-1: rgba(255, 255, 255, 0.750); --lg-rim-2: rgba(255, 255, 255, 0.068); --lg-rim-3: rgba(255, 255, 255, 0.413); --lg-inner-blur: 20px; --lg-inner-color: rgba(255, 255, 255, 0.280); --lg-inner-spread: -6px; --lg-shadow-y: 18px; --lg-shadow-blur: 40px; --lg-shadow-color: rgba(0, 0, 0, 0.28); --lg-spec: rgba(255, 255, 255, 0.140); --lg-noise: var(--noise-04); } /* button - a capsule of nearly clear glass. Small elements get a small blur (14px) because a wide blur on a 44px pill just samples itself. The rim runs at 0.90 so the capsule outline survives on any backdrop. */ .glass-button, .glass-pill, .glass-cta { --lg-blur: 14px; --lg-saturation: 180%; --lg-brightness: 110%; --lg-tint-top: rgba(255, 255, 255, 0.207); --lg-tint-bottom: rgba(255, 255, 255, 0.099); --lg-radius: 999px; --lg-rim-w: 1.2px; --lg-rim-angle: 145deg; --lg-rim-1: rgba(255, 255, 255, 0.900); --lg-rim-2: rgba(255, 255, 255, 0.081); --lg-rim-3: rgba(255, 255, 255, 0.495); --lg-inner-blur: 8px; --lg-inner-color: rgba(255, 255, 255, 0.300); --lg-inner-spread: -2px; --lg-shadow-y: 6px; --lg-shadow-blur: 16px; --lg-shadow-color: rgba(0, 0, 0, 0.26); --lg-spec: rgba(255, 255, 255, 0.220); --lg-noise: var(--noise-04); } /* toolbar - the header. Thin rim (1px) and a modest shadow so a sticky bar floats without cutting a hard line across the page. */ .glass-toolbar, .glass-bar { --lg-blur: 30px; --lg-saturation: 185%; --lg-brightness: 110%; --lg-tint-top: rgba(255, 255, 255, 0.207); --lg-tint-bottom: rgba(255, 255, 255, 0.099); --lg-radius: 20px; --lg-rim-w: 1px; --lg-rim-angle: 145deg; --lg-rim-1: rgba(255, 255, 255, 0.600); --lg-rim-2: rgba(255, 255, 255, 0.054); --lg-rim-3: rgba(255, 255, 255, 0.330); --lg-inner-blur: 14px; --lg-inner-color: rgba(255, 255, 255, 0.280); --lg-inner-spread: -4px; --lg-shadow-y: 10px; --lg-shadow-blur: 26px; --lg-shadow-color: rgba(0, 0, 0, 0.24); --lg-spec: rgba(255, 255, 255, 0.140); --lg-noise: var(--noise-04); } /* hud - progress and overlays. A cold near-black tint (#0b0f1a) at high saturation: it darkens whatever is under it so white numerals stay readable while the panel is on top of a preview or a busy scene. */ .glass-hud { --lg-blur: 30px; --lg-saturation: 160%; --lg-brightness: 96%; --lg-tint-top: rgba(11, 15, 26, 0.437); --lg-tint-bottom: rgba(11, 15, 26, 0.209); --lg-radius: 26px; --lg-rim-w: 1.5px; --lg-rim-angle: 145deg; --lg-rim-1: rgba(255, 255, 255, 0.500); --lg-rim-2: rgba(255, 255, 255, 0.045); --lg-rim-3: rgba(255, 255, 255, 0.275); --lg-inner-blur: 20px; --lg-inner-color: rgba(255, 255, 255, 0.200); --lg-inner-spread: -6px; --lg-shadow-y: 18px; --lg-shadow-blur: 44px; --lg-shadow-color: rgba(0, 0, 0, 0.44); --lg-spec: rgba(255, 255, 255, 0.140); --lg-noise: var(--noise-05); } /* ------------------------------------------------------------------------- 6. Light appearance. Same material logic, inverted light source. In a bright room the glass is *lighter* than the content behind it and the rim has to go darker to be visible at all, so tints move to near-white and rim colours to slate. Brightness drops below 100% for the neutral presets: a light backdrop would otherwise blow out and the panel would vanish. ------------------------------------------------------------------------- */ [data-appearance="light"] { --bg-0: #eef1f8; --bg-1: #f6f8fc; --bg-2: #ffffff; --bg-sunken: #e7ebf4; --text-1: #0d1220; --text-2: rgba(20, 28, 45, .72); --text-3: rgba(28, 38, 58, .52); --text-inverse: #ffffff; --hairline: rgba(16, 24, 40, .12); --hairline-strong: rgba(16, 24, 40, .24); --scrim: rgba(238, 241, 248, .7); --ok: #0f8f62; --ok-bg: rgba(15, 143, 98, .12); --ok-rim: rgba(15, 143, 98, .34); --warn: #9a6a00; --warn-bg: rgba(154, 106, 0, .12); --warn-rim: rgba(154, 106, 0, .34); --danger: #c0304a; --danger-bg: rgba(192, 48, 74, .12); --danger-rim: rgba(192, 48, 74, .34); --info: #10618f; --info-bg: rgba(16, 97, 143, .12); --info-rim: rgba(16, 97, 143, .32); } /* Accent hues need to darken in light mode or they fail contrast on white. --accent-deep stays the same source hue for glass tints; only the text token and the ink flip. */ [data-appearance="light"] { --accent-ink: #ffffff; } html[data-appearance="light"], html[data-appearance="light"][data-accent="indigo"] { --accent: #4040e0; --accent-rgb: 64, 64, 224; } html[data-appearance="light"][data-accent="teal"] { --accent: #0e8f8f; --accent-rgb: 14, 143, 143; } html[data-appearance="light"][data-accent="violet"] { --accent: #8b2fc0; --accent-rgb: 139, 47, 192; } html[data-appearance="light"][data-accent="gunmetal"] { --accent: #3f556f; --accent-rgb: 63, 85, 111; } html[data-appearance="light"][data-accent="midnight"] { --accent: #2a4f9e; --accent-rgb: 42, 79, 158; } /* The scene loses its heavy blobs and becomes a pale wash: the same three lights, one third the strength, over a near-white floor. */ html[data-appearance="light"] { background-image: radial-gradient(120% 80% at 50% -10%, rgba(var(--accent-rgb), .12) 0%, transparent 60%), linear-gradient(180deg, #ffffff 0%, var(--bg-0) 60%, #e4e9f4 100%); } /* The blob alphas are tuned for a near-black floor. On a near-white one the same lights would be poster paint, so they are scaled back hard and the near field switches to multiply: on light, colour has to be *subtracted* from white rather than added to black. */ html[data-appearance="light"]::before { opacity: .22; } html[data-appearance="light"]::after { opacity: .18; mix-blend-mode: multiply; } [data-appearance="light"] body::before { background-image: var(--noise-04), radial-gradient(130% 95% at 50% 0%, transparent 45%, rgba(40, 55, 85, .14) 100%); } /* --- light preset overrides --------------------------------------------- Only the knobs that must move are re-declared; blur, radius, refraction and shadow geometry are appearance-independent. */ [data-appearance="light"] .glass-midnight, html[data-appearance="light"][data-accent="midnight"] .glass-accent { --lg-brightness: 104%; --lg-tint-top: rgba(233, 238, 250, 0.660); --lg-tint-bottom: rgba(214, 224, 244, 0.380); --lg-rim-1: rgba(34, 48, 76, 0.300); --lg-rim-2: rgba(34, 48, 76, 0.030); --lg-rim-3: rgba(255, 255, 255, 0.800); --lg-inner-color: rgba(255, 255, 255, 0.700); --lg-shadow-color: rgba(24, 36, 62, 0.16); --lg-spec: rgba(255, 255, 255, 0.500); } [data-appearance="light"] .glass-onyx, [data-appearance="light"] .glass-code { --lg-brightness: 102%; --lg-saturation: 130%; --lg-tint-top: rgba(226, 232, 244, 0.740); --lg-tint-bottom: rgba(208, 218, 236, 0.440); --lg-rim-1: rgba(28, 40, 64, 0.260); --lg-rim-2: rgba(28, 40, 64, 0.026); --lg-rim-3: rgba(255, 255, 255, 0.760); --lg-inner-color: rgba(255, 255, 255, 0.640); --lg-shadow-color: rgba(24, 36, 62, 0.18); --lg-spec: rgba(255, 255, 255, 0.460); } [data-appearance="light"] .glass-spaceblack, [data-appearance="light"] .glass-panel { --lg-brightness: 104%; --lg-saturation: 140%; --lg-tint-top: rgba(240, 244, 252, 0.680); --lg-tint-bottom: rgba(222, 230, 245, 0.400); --lg-rim-1: rgba(30, 42, 68, 0.280); --lg-rim-2: rgba(30, 42, 68, 0.028); --lg-rim-3: rgba(255, 255, 255, 0.780); --lg-inner-color: rgba(255, 255, 255, 0.680); --lg-shadow-color: rgba(24, 36, 62, 0.15); --lg-spec: rgba(255, 255, 255, 0.500); } [data-appearance="light"] .glass-charcoal { --lg-brightness: 104%; --lg-saturation: 140%; --lg-tint-top: rgba(244, 247, 253, 0.640); --lg-tint-bottom: rgba(228, 235, 248, 0.360); --lg-rim-1: rgba(30, 42, 68, 0.240); --lg-rim-2: rgba(30, 42, 68, 0.024); --lg-rim-3: rgba(255, 255, 255, 0.760); --lg-inner-color: rgba(255, 255, 255, 0.660); --lg-shadow-color: rgba(24, 36, 62, 0.13); --lg-spec: rgba(255, 255, 255, 0.480); } [data-appearance="light"] .glass-gunmetal, html[data-appearance="light"][data-accent="gunmetal"] .glass-accent { --lg-brightness: 106%; --lg-saturation: 150%; --lg-tint-top: rgba(226, 234, 246, 0.600); --lg-tint-bottom: rgba(206, 218, 236, 0.340); --lg-rim-1: rgba(36, 52, 78, 0.340); --lg-rim-2: rgba(36, 52, 78, 0.032); --lg-rim-3: rgba(255, 255, 255, 0.860); --lg-inner-color: rgba(255, 255, 255, 0.720); --lg-shadow-color: rgba(24, 36, 62, 0.14); --lg-spec: rgba(255, 255, 255, 0.520); } [data-appearance="light"] .glass-slate, [data-appearance="light"] .glass-card { --lg-brightness: 106%; --lg-saturation: 150%; --lg-tint-top: rgba(248, 250, 255, 0.600); --lg-tint-bottom: rgba(230, 238, 250, 0.320); --lg-rim-1: rgba(32, 46, 72, 0.260); --lg-rim-2: rgba(32, 46, 72, 0.026); --lg-rim-3: rgba(255, 255, 255, 0.820); --lg-inner-color: rgba(255, 255, 255, 0.700); --lg-shadow-color: rgba(24, 36, 62, 0.12); --lg-spec: rgba(255, 255, 255, 0.520); } /* Chromatic presets keep their hue in light mode but drop saturation and lift the tint, otherwise they read as neon on a white page. */ [data-appearance="light"] .glass-indigo, html[data-appearance="light"][data-accent="indigo"] .glass-accent, html[data-appearance="light"]:not([data-accent]) .glass-accent { --lg-saturation: 150%; --lg-brightness: 102%; --lg-tint-top: rgba(91, 91, 255, 0.180); --lg-tint-bottom: rgba(91, 91, 255, 0.080); --lg-rim-1: rgba(48, 48, 150, 0.360); --lg-rim-2: rgba(48, 48, 150, 0.034); --lg-rim-3: rgba(255, 255, 255, 0.860); --lg-inner-color: rgba(255, 255, 255, 0.640); --lg-shadow-color: rgba(48, 48, 150, 0.18); --lg-spec: rgba(255, 255, 255, 0.520); } [data-appearance="light"] .glass-violet, html[data-appearance="light"][data-accent="violet"] .glass-accent { --lg-saturation: 155%; --lg-brightness: 102%; --lg-tint-top: rgba(191, 90, 242, 0.180); --lg-tint-bottom: rgba(191, 90, 242, 0.080); --lg-rim-1: rgba(112, 34, 150, 0.360); --lg-rim-2: rgba(112, 34, 150, 0.034); --lg-rim-3: rgba(255, 255, 255, 0.860); --lg-inner-color: rgba(255, 255, 255, 0.640); --lg-shadow-color: rgba(112, 34, 150, 0.18); --lg-spec: rgba(255, 255, 255, 0.520); } [data-appearance="light"] .glass-teal, html[data-appearance="light"][data-accent="teal"] .glass-accent { --lg-saturation: 155%; --lg-brightness: 102%; --lg-tint-top: rgba(42, 212, 212, 0.200); --lg-tint-bottom: rgba(42, 212, 212, 0.090); --lg-rim-1: rgba(10, 96, 96, 0.360); --lg-rim-2: rgba(10, 96, 96, 0.034); --lg-rim-3: rgba(255, 255, 255, 0.860); --lg-inner-color: rgba(255, 255, 255, 0.640); --lg-shadow-color: rgba(10, 96, 96, 0.18); --lg-spec: rgba(255, 255, 255, 0.520); } [data-appearance="light"] .glass-button, [data-appearance="light"] .glass-pill, [data-appearance="light"] .glass-cta { --lg-tint-top: rgba(255, 255, 255, 0.520); --lg-tint-bottom: rgba(255, 255, 255, 0.300); --lg-rim-1: rgba(28, 40, 64, 0.420); --lg-rim-2: rgba(28, 40, 64, 0.038); --lg-rim-3: rgba(255, 255, 255, 0.950); --lg-inner-color: rgba(255, 255, 255, 0.900); --lg-shadow-color: rgba(24, 36, 62, 0.16); --lg-spec: rgba(255, 255, 255, 0.700); } [data-appearance="light"] .glass-toolbar, [data-appearance="light"] .glass-bar { --lg-tint-top: rgba(255, 255, 255, 0.560); --lg-tint-bottom: rgba(255, 255, 255, 0.320); --lg-rim-1: rgba(28, 40, 64, 0.300); --lg-rim-2: rgba(28, 40, 64, 0.028); --lg-rim-3: rgba(255, 255, 255, 0.940); --lg-inner-color: rgba(255, 255, 255, 0.880); --lg-shadow-color: rgba(24, 36, 62, 0.14); --lg-spec: rgba(255, 255, 255, 0.600); } [data-appearance="light"] .glass-hud { --lg-brightness: 104%; --lg-tint-top: rgba(236, 241, 251, 0.720); --lg-tint-bottom: rgba(218, 227, 244, 0.420); --lg-rim-1: rgba(28, 40, 64, 0.300); --lg-rim-2: rgba(28, 40, 64, 0.028); --lg-rim-3: rgba(255, 255, 255, 0.860); --lg-inner-color: rgba(255, 255, 255, 0.720); --lg-shadow-color: rgba(24, 36, 62, 0.20); --lg-spec: rgba(255, 255, 255, 0.520); } /* glass.css focuses .lg--live with a fixed blue outline. Re-point it at the host accent so the ring matches the rest of the page. */ .lg--live:focus-visible { outline-color: var(--focus-ring); } /* ------------------------------------------------------------------------- 8. Semantic aliases. The template layer names surfaces by role rather than by material, so each role maps onto exactly one preset above and is declared in the same rule (CSS has no @extend, and a second block would drift the moment one of the two is retuned): .glass-bar = .glass-toolbar sticky header .glass-pill = .glass-button header toggles, radio chips .glass-cta = .glass-button primary action capsule .glass-panel = .glass-spaceblack dropzone / options / progress / result .glass-card = .glass-slate feature, step and FAQ cards .glass-code = .glass-onyx command blocks on /local `.glass-accent` has no alias: it is resolved per host from and must be used by name. ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- 9. Accessibility parity. theme.js mirrors these into body[data-*] so glass.js and glass.css agree with the media query; the media queries below are the no-JS fallback. ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { /* The scene freezes on its first frame rather than disappearing: the glass still needs something to refract. */ html::before, html::after { animation: none; transform: translate3d(0, 0, 0) scale(1.06); } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } @media (prefers-reduced-transparency: reduce) { /* Reduced transparency is about not seeing THROUGH surfaces, not about removing colour from the page. glass.css already swaps every .lg::before for an opaque tint, so the panels stop being see-through on their own. The scene therefore stays: it is behind the content, never under text, and deleting it is what leaves the page looking broken rather than accessible. It only stops moving and drops to half strength, so nothing drifts under an opaque panel edge. */ html::before, html::after { animation: none; transform: translate3d(0, 0, 0) scale(1.06); opacity: .5; } } @media (prefers-contrast: more) { :root { --text-2: rgba(236, 242, 253, .92); --text-3: rgba(226, 234, 248, .78); --hairline: rgba(236, 242, 253, .28); --hairline-strong: rgba(236, 242, 253, .45); } [data-appearance="light"] { --text-2: rgba(10, 16, 28, .95); --text-3: rgba(10, 16, 28, .8); --hairline: rgba(10, 16, 28, .3); --hairline-strong: rgba(10, 16, 28, .5); } }