/* ========================================================================== tokens/theme-liquid-glass.css — THEME SKIN: LIQUID GLASS (Micro-prompt 35) -------------------------------------------------------------------------- Selected by `data-theme="liquid-glass"` on , set by js/theme/theme-engine.js. Linked after the other theme files. Same three-block shape as the two skins before it, for the same reason (§19.2): the light block is scoped with `:not([data-mode="dark"])` so it cannot tie with theme-default.css's `:root[data-mode="dark"]` block — both are 0-2-0 — and leak light surfaces into dark. WHAT MAKES THIS THEME DIFFERENT FROM THE OTHER TWO Neo-brutalism and Material 3 change COLOURS and SHAPES. This one changes the surfaces' OPACITY, which has three consequences the other two never had to deal with: 1. A blur needs something behind it. A translucent surface over a flat page looks like a washed-out flat surface. So the theme paints a fixed colour wash on the root element, and the glass reads against that. 2. `backdrop-filter` has to be applied by component CSS, not by a token file (a theme may not name a selector). The seam is `--surface-blur` in components.css, consumed by one grouped rule in style.css, and `none` in every other theme so they pay nothing for it. 3. Text contrast now depends on what is BEHIND the surface, not just on the surface colour. That is the classic failure mode of glass UI and it is measured for real in the build log §21.4, not eyeballed. THE WASH — one rule, no DOM, no JS `background-image` on the root element with `background-attachment: fixed` paints the wash behind everything on every page, at viewport size, without scrolling. It is scoped to this theme, so no other theme carries it. This is a deliberate reading of the brief's "fixed-position decorative layer, added once in the base layout, not per-page": a real DOM layer would need either a placeholder copied into 13 pages (explicitly ruled out) or DOM injected by JS. A root background achieves the same result with one declaration, and — unlike a `z-index: -1` pseudo-element — it cannot end up hidden behind an opaque ancestor background. Flagged, not buried. ACCESSIBILITY NOTE Surface opacity is tuned to keep body text at or above WCAG AA over the wash. Raising the translucency further (0.35 and below) starts to fail on the brightest part of the gradient; the measured ratios are in §21.4. ========================================================================== */ /* ============================================================ STRUCTURE ==== */ /* Mode-independent: the blur itself, shape, elevation geometry, type, the Bootstrap geometry bridge, and the wash's placement. */ :root[data-theme="liquid-glass"] { /* ---- the glass effect ------------------------------------------------ Consumed by the grouped `.zm-header / .zm-appbar / .zm-bnav / .zm-pcard / …` rule in style.css. `saturate()` is what gives frosted glass its characteristic colour boost on what shows through. */ --surface-blur: blur(18px) saturate(180%); /* ---- shape: soft and large ------------------------------------------ */ --radius-none: 0; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px; /* ---- elevation: a soft outer glow + a 1px light top edge ------------- "Instead of hard shadows" — no offset ink, no blur-free edge. The two colour tokens are the only mode-dependent part; the compositions are `var()` references, so they resolve per mode and the dark block only has to restate the colours. */ --glass-glow-color: rgba(31, 38, 135, 0.16); --glass-edge-color: rgba(255, 255, 255, 0.60); --glass-hairline: rgba(255, 255, 255, 0.50); --shadow-xs: 0 2px 10px var(--glass-glow-color), inset 0 1px 0 var(--glass-edge-color); --shadow-sm: 0 6px 24px var(--glass-glow-color), inset 0 1px 0 var(--glass-edge-color); --shadow-md: 0 10px 30px var(--glass-glow-color), inset 0 1px 0 var(--glass-edge-color); --shadow-lg: 0 18px 50px var(--glass-glow-color), inset 0 1px 0 var(--glass-edge-color); --shadow-overlay: 0 14px 44px var(--glass-glow-color), inset 0 1px 0 var(--glass-edge-color); --shadow-pressed: inset 0 2px 6px var(--glass-glow-color); /* ---- type: unchanged from the default ------------------------------- */ --font-weight-body: 400; --font-weight-heading: 700; /* ---- shape aliases that are consumed -------------------------------- */ --badge-radius: var(--radius-pill); --bnav-active-radius: var(--radius-pill); --carousel-control-radius: var(--radius-pill); /* ---- the card edge IS the glass hairline ---------------------------- */ --card-border-width: 1px; --card-border: var(--glass-hairline); --pcard-border: var(--glass-hairline); /* ---- Bootstrap geometry bridge -------------------------------------- */ --bs-border-radius: var(--radius-md); --bs-border-radius-sm: var(--radius-sm); --bs-border-radius-lg: var(--radius-lg); --bs-border-radius-xl: var(--radius-xl); --bs-border-radius-xxl: var(--radius-xl); /* 5.3.0-alpha naming */ --bs-border-radius-2xl: var(--radius-xl); /* 5.3.x final naming */ --bs-border-radius-pill: var(--radius-pill); --bs-border-color: var(--color-border-strong); /* ---- the wash -------------------------------------------------------- Painted on the root element, fixed to the viewport. `--glass-wash` is defined per mode below; this declaration is mode-independent and resolves against whichever one wins. */ background-image: var(--glass-wash); background-attachment: fixed; background-size: cover; background-repeat: no-repeat; } /* ================================================================ LIGHT ==== */ :root[data-theme="liquid-glass"]:not([data-mode="dark"]) { /* ---- the wash: structured, not a flat tint --------------------------- Blurring a smooth gradient looks the same as the gradient, so the wash carries four soft colour blobs (brand red, brand gold, the brand olive and a second red) over a pale base. Those edges are what the glass visibly blurs. */ --glass-wash: radial-gradient(58% 42% at 10% 6%, rgba(198, 4, 9, 0.34), transparent 68%), radial-gradient(46% 34% at 92% 16%, rgba(250, 223, 9, 0.30), transparent 70%), radial-gradient(72% 54% at 76% 98%, rgba(54, 65, 39, 0.24), transparent 72%), radial-gradient(38% 30% at 30% 58%, rgba(198, 4, 9, 0.14), transparent 74%), linear-gradient(158deg, #FFF4F2 0%, #FDF7EC 46%, #F0F4EC 100%); /* ---- translucent surfaces ------------------------------------------- 0.60 rather than something more dramatic: at 0.35 the body text over the brightest part of the wash drops below AA (§21.4). */ --color-surface: rgba(255, 255, 255, 0.60); --color-surface-alt: rgba(255, 255, 255, 0.44); --color-surface-sunken: rgba(255, 255, 255, 0.30); --color-surface-inverse: rgba(24, 22, 28, 0.88); --color-surface-overlay: rgba(18, 16, 22, 0.34); /* Cards sit at a slightly lower opacity than the page so the blur reads. */ --card-bg: rgba(255, 255, 255, 0.52); --pcard-bg: rgba(255, 255, 255, 0.52); /* ---- text ------------------------------------------------------------ */ --color-text: #17161A; --color-text-muted: #45424C; --color-text-subtle: #6F6B78; --color-text-inverse: #FFFFFF; --color-link: #17161A; --color-link-hover: #C60409; /* ---- glass edges ----------------------------------------------------- */ --glass-hairline: rgba(255, 255, 255, 0.50); --glass-edge-color: rgba(255, 255, 255, 0.60); --glass-glow-color: rgba(31, 38, 135, 0.16); --color-border: rgba(255, 255, 255, 0.46); --color-border-strong: rgba(23, 22, 26, 0.16); --color-border-rgb: 255, 255, 255; /* ---- brand: the same red and gold, now carried on translucent chrome - */ --color-brand-primary: #C60409; --color-brand-primary-rgb: 198, 4, 9; --color-brand-primary-contrast: #FFFFFF; --color-brand-primary-hover: #A50307; --color-brand-primary-subtle: rgba(198, 4, 9, 0.14); --color-brand-primary-raised: #E31E24; --color-brand-primary-deep: #A10203; --color-accent: #FADF09; --color-accent-rgb: 250, 223, 9; --color-accent-contrast: #1A1A1A; --color-accent-hover: #E8CE08; --color-brand-secondary: #364127; --color-brand-secondary-rgb: 54, 65, 39; --color-brand-secondary-contrast: #FFFFFF; /* The app bar, bottom nav and hero are translucent versions of the same brand red. 0.82 rather than lower because their white text sits directly on this surface: at 0.72 the dark-mode bottom nav measured 3.98:1 over the promo cards, below the 4.5 AA floor (§21.4). The translucency still reads; it just no longer eats the text contrast. */ --appbar-bg: rgba(198, 4, 9, 0.82); --appbar-rule: var(--on-brand-30); --bnav-bg: rgba(198, 4, 9, 0.82); --bnav-border: var(--on-brand-10); --hero-bg-from: rgba(198, 4, 9, 0.84); --hero-bg-to: rgba(161, 2, 3, 0.84); /* ---- state: the default hues, carried on translucent chips ----------- */ --color-danger: #C60409; --color-danger-rgb: 198, 4, 9; --color-danger-contrast: #FFFFFF; --color-danger-subtle: rgba(198, 4, 9, 0.16); --color-danger-subtle-hover: rgba(198, 4, 9, 0.26); --color-success: #2E7D46; --color-success-rgb: 46, 125, 70; --color-success-contrast: #FFFFFF; --color-success-subtle: rgba(46, 125, 70, 0.16); --color-success-subtle-hover: rgba(46, 125, 70, 0.26); /* Darker than the default theme's gold: the star glyph now sits over a translucent surface, and the pale gold lost contrast there. */ --color-warning: #8A6208; --color-warning-rgb: 138, 98, 8; --color-warning-contrast: #FFFFFF; --color-warning-subtle: rgba(184, 134, 11, 0.20); --color-warning-subtle-hover: rgba(184, 134, 11, 0.30); --color-info: #0B6E99; --color-info-rgb: 11, 110, 153; /* ---- Bootstrap colour projections this theme moves ------------------ */ --bs-body-color-rgb: 69, 66, 76; --bs-light-rgb: 255, 255, 255; --bs-dark-rgb: 23, 22, 26; --bs-link-color-rgb: 23, 22, 26; --bs-link-hover-color-rgb: 198, 4, 9; } /* ================================================================= DARK ==== */ :root[data-theme="liquid-glass"][data-mode="dark"] { /* ---- the wash, dark: the same blobs, dimmer and over near-black ------ This is the mode where the effect is most fragile: a translucent dark surface over a dark wash has very little luminance range to work with, so the blobs are kept strong enough to be visible through the glass while the surfaces stay dark enough for light text. */ --glass-wash: radial-gradient(58% 42% at 10% 6%, rgba(227, 30, 36, 0.40), transparent 68%), radial-gradient(46% 34% at 92% 16%, rgba(255, 221, 9, 0.16), transparent 70%), radial-gradient(72% 54% at 76% 98%, rgba(74, 88, 55, 0.36), transparent 72%), radial-gradient(38% 30% at 30% 58%, rgba(227, 30, 36, 0.18), transparent 74%), linear-gradient(158deg, #141013 0%, #16131A 46%, #101410 100%); /* ---- translucent surfaces ------------------------------------------- */ --color-surface: rgba(30, 28, 38, 0.62); --color-surface-alt: rgba(42, 39, 52, 0.50); --color-surface-sunken: rgba(20, 18, 26, 0.44); --color-surface-inverse: rgba(240, 238, 245, 0.90); --color-surface-overlay: rgba(0, 0, 0, 0.55); --card-bg: rgba(44, 41, 55, 0.52); --pcard-bg: rgba(44, 41, 55, 0.52); /* ---- text ------------------------------------------------------------ */ --color-text: #F4F2F8; --color-text-muted: #C6C1D2; --color-text-subtle: #948FA3; --color-text-inverse: #1A1820; --color-link: #F4F2F8; --color-link-hover: #FFFFFF; /* ---- glass edges: the highlight drops to a whisper on dark ---------- */ --glass-hairline: rgba(255, 255, 255, 0.16); --glass-edge-color: rgba(255, 255, 255, 0.16); /* A light glow would smear; on dark the glow is shadow. */ --glass-glow-color: rgba(0, 0, 0, 0.55); --color-border: rgba(255, 255, 255, 0.16); --color-border-strong: rgba(255, 255, 255, 0.26); --color-border-rgb: 255, 255, 255; /* ---- brand: kept vivid so it still reads through the glass ---------- */ --color-brand-primary: #E31E24; --color-brand-primary-rgb: 227, 30, 36; --color-brand-primary-contrast: #FFFFFF; --color-brand-primary-hover: #F0353B; --color-brand-primary-subtle: rgba(227, 30, 36, 0.22); --color-brand-primary-raised: #F0353B; --color-brand-primary-deep: #B3141A; /* ---- the active nav pill and the count badges ------------------------ Both sit ON the brand band, so they cannot separate from it by being a redder red — and the shared `--color-brand-primary-raised` (#F0353B) is a mid red that carries neither white text (4.0:1) nor near-black (4.3:1) at AA. Measured 3.98:1 for the bottom-nav label before this override. In dark they go LIGHT with dark text: separation by lightness, which is how M3 and iOS mark a selected item on a coloured bar. Measured 9.4:1 after. The same 3.98:1 reproduces in the other three themes' dark mode, because they all inherit `--color-brand-primary-raised` from theme-default.css. That is a cross-theme design question, not a glass one, so it is left for the final regression pass — see the build log §21.5. */ --bnav-active-bg: #FF9A93; --bnav-active-text: #2A0001; --count-badge-bg: #FF9A93; --count-badge-text: #2A0001; --color-accent: #FFDD09; --color-accent-rgb: 255, 221, 9; --color-accent-contrast: #1A1A1A; --color-accent-hover: #FFE64A; --color-brand-secondary: #4A5837; --color-brand-secondary-rgb: 74, 88, 55; --color-brand-secondary-contrast: #FFFFFF; --appbar-bg: rgba(190, 22, 30, 0.88); --appbar-rule: var(--on-brand-30); --bnav-bg: rgba(190, 22, 30, 0.88); --bnav-border: var(--on-brand-10); --hero-bg-from: rgba(200, 26, 34, 0.78); --hero-bg-to: rgba(150, 16, 24, 0.78); /* ---- state ----------------------------------------------------------- */ --color-danger: #FF6B63; --color-danger-rgb: 255, 107, 99; --color-danger-contrast: #2A0A08; --color-danger-subtle: rgba(255, 107, 99, 0.20); --color-danger-subtle-hover: rgba(255, 107, 99, 0.30); --color-success: #7ED9A0; --color-success-rgb: 126, 217, 160; --color-success-contrast: #08281A; --color-success-subtle: rgba(126, 217, 160, 0.18); --color-success-subtle-hover: rgba(126, 217, 160, 0.28); --color-warning: #FFD666; --color-warning-rgb: 255, 214, 102; --color-warning-contrast: #2A2000; --color-warning-subtle: rgba(255, 214, 102, 0.18); --color-warning-subtle-hover: rgba(255, 214, 102, 0.28); --color-info: #7FC7EC; --color-info-rgb: 127, 199, 236; /* ---- Bootstrap colour projections, dark values ----------------------- */ --bs-body-color-rgb: 198, 193, 210; --bs-light-rgb: 42, 39, 52; --bs-dark-rgb: 244, 242, 248; --bs-link-color-rgb: 244, 242, 248; --bs-link-hover-color-rgb: 255, 255, 255; } /* ===================================================== NO-BLUR FALLBACK === */ /* Browsers and contexts without `backdrop-filter` (older Safari without the prefix, some embedded webviews, and any environment where the effect is disabled for performance). The theme must degrade to "solid, slightly translucent surfaces" rather than to unreadable text over a wash. `--surface-blur` is switched to `none` so the grouped rule in style.css becomes inert, and every translucent surface is raised to near-opaque. The wash stays visible through the remaining 6-8% and through the gaps between surfaces, so the theme still reads as the same design — just less glassy. Specificity note: these blocks are 0-3-0, exactly like the two above, so they win on SOURCE ORDER. They must stay at the end of this file. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root[data-theme="liquid-glass"] { --surface-blur: none; } :root[data-theme="liquid-glass"]:not([data-mode="dark"]) { --color-surface: rgba(255, 255, 255, 0.94); --color-surface-alt: rgba(255, 255, 255, 0.88); --color-surface-sunken: rgba(255, 255, 255, 0.80); --card-bg: rgba(255, 255, 255, 0.92); --pcard-bg: rgba(255, 255, 255, 0.92); --appbar-bg: rgba(198, 4, 9, 0.94); --bnav-bg: rgba(198, 4, 9, 0.94); --hero-bg-from: rgba(198, 4, 9, 0.96); --hero-bg-to: rgba(161, 2, 3, 0.96); } :root[data-theme="liquid-glass"][data-mode="dark"] { --color-surface: rgba(30, 28, 38, 0.95); --color-surface-alt: rgba(42, 39, 52, 0.92); --color-surface-sunken: rgba(20, 18, 26, 0.88); --card-bg: rgba(44, 41, 55, 0.94); --pcard-bg: rgba(44, 41, 55, 0.94); --appbar-bg: rgba(190, 22, 30, 0.94); --bnav-bg: rgba(190, 22, 30, 0.94); --hero-bg-from: rgba(200, 26, 34, 0.96); --hero-bg-to: rgba(150, 16, 24, 0.96); } }