/* crystalline-atmosphere.css — the crystalline skin's page-level atmosphere + shared --crystal-* token layer + software-GPU fallback. Served from public/ at /crystalline-atmosphere.css, linked after tokens.css (it reads --run-color-* tokens) and before first paint (no FOUC). This skin is light-only (JUNE-246). The picker forces data-run-mode=light when crystalline is active; there is no dark-mode block. ── Material model (JUNE-246 v2, founder feedback 2026-06-18) ────────────── Glassmorphism = a translucent WINDOW; the dark textured field behind shows through. Crystalline = the component IS the cut GEM: it carries the colour and texture, sitting on a light field that recedes. The gem reads through five stacked mechanisms, NOT through a flat tint: 1. a faceted body gradient (brighter top facet → deeper base); 2. angular FACET planes (light/dark slices that read as cut faces); 3. a bright SPECULAR hotspot + a glassy GLOSS reflection band; 4. prismatic DISPERSION at a corner (the rainbow refraction of a real gem); 5. crisp lit cut EDGES + an internal GLOW and an outer brand HALO. The earlier v1 shipped only a 20%-opacity wash with one radial sheen — it read as a pale panel, not a gem (the missing pieces above are why). */ /* ── Crystalline page-level atmosphere ────────────────────────────────── A pearl near-white gradient field with brand-tinted centre blooms — the light-mode answer to glassmorphism's dark field. The blooms at 50%/12% and 50%/52% give the gems colour to refract; without them panels read as dull boxes regardless of surface tokens (JUNE-244 v3). Scoped to [data-run-skin="crystalline"], which the picker sets on . */ html[data-run-skin="crystalline"] { /* Atmosphere token layer — centre blooms first (primary lever). Chroma floor ensures even pale brands (arctic-frost, ocean-depths) produce visible colour behind the gems (JUNE-244 v3). */ --crystal-atm-center-cool: oklch(from var(--run-color-intent-primary-base) calc(l * 0.78 + 0.08) calc(c * 1.8 + 0.13) h / 0.20); --crystal-atm-center-warm: oklch(from var(--run-color-intent-secondary-base) calc(l * 0.78 + 0.08) calc(c * 1.8 + 0.13) calc(h - 20) / 0.18); --crystal-atm-primary: oklch(from var(--run-color-intent-primary-base) calc(l * 0.80 + 0.10) calc(c * 2.2 + 0.06) h / 0.22); --crystal-atm-cool: oklch(from var(--run-color-intent-primary-base) calc(l * 0.80 + 0.10) calc(c * 2.2 + 0.06) calc(h + 45) / 0.18); --crystal-atm-warm: oklch(from var(--run-color-intent-secondary-base) calc(l * 0.80 + 0.10) calc(c * 2.2 + 0.06) calc(h - 25) / 0.16); --crystal-atm-soft: oklch(from var(--run-color-intent-primary-base) calc(l * 0.85 + 0.12) calc(c * 1.8 + 0.04) h / 0.12); --crystal-atm-base: color-mix(in oklch, var(--run-color-surface-default) 94%, var(--run-color-intent-primary-base)); --crystal-atm-glow: color-mix(in oklch, #ffffff 30%, transparent); /* ── Gem surface token layer ────────────────────────────────────────── Consumed by every crystalline component skin. The component IS the gem: a present brand-tinted body (legible — dark text still reads on the light gem), with facets, specular, gloss, dispersion, lit edges and inner glow layered on top. No white veil — that's glassmorphism's mechanism. */ /* Gem BODY — a vertical cut gradient: brighter upper facet → deeper base. Present enough to BE the colour (not a 20% wash), light enough for text. */ --crystal-body-top: oklch(from var(--run-color-intent-primary-base) calc(l * 0.34 + 0.60) calc(c * 0.9 + 0.05) calc(h + 6) / 0.58); --crystal-body-mid: oklch(from var(--run-color-intent-primary-base) calc(l * 0.34 + 0.52) calc(c * 1.1 + 0.06) h / 0.52); --crystal-body-bot: oklch(from var(--run-color-intent-primary-base) calc(l * 0.32 + 0.42) calc(c * 1.2 + 0.07) calc(h - 6) / 0.60); /* SPECULAR hotspot — bright near-white polished high point. */ --crystal-spec: oklch(from var(--run-color-intent-primary-base) 0.99 calc(c * 0.22) h / 0.92); /* GLOSS — a glassy white reflection sweeping the upper third. */ --crystal-gloss: color-mix(in oklch, #ffffff 62%, transparent); /* FACET planes — angular light/dark slices read as cut faces. */ --crystal-facet-hi: oklch(from var(--run-color-intent-primary-base) 0.96 calc(c * 0.5 + 0.05) calc(h + 28) / 0.52); --crystal-facet-lo: oklch(from var(--run-color-intent-primary-base) calc(l * 0.30 + 0.30) calc(c * 1.3 + 0.07) calc(h - 18) / 0.42); /* DISPERSION — prismatic rainbow refraction at a corner (hue split). */ --crystal-disp-warm: oklch(from var(--run-color-intent-primary-base) 0.90 0.17 calc(h + 90) / 0.30); --crystal-disp-cool: oklch(from var(--run-color-intent-primary-base) 0.88 0.17 calc(h - 80) / 0.26); /* Lit EDGES + GLOW + HALO. */ --crystal-highlight: color-mix(in oklch, #ffffff 92%, transparent); --crystal-rim: oklch(from var(--run-color-intent-primary-base) 0.97 0.07 h / 0.55); --crystal-iglow: oklch(from var(--run-color-intent-primary-base) calc(l * 0.45 + 0.38) calc(c * 1.6 + 0.10) h / 0.52); --crystal-halo: oklch(from var(--run-color-intent-primary-base) calc(l * 0.50 + 0.30) calc(c * 1.5 + 0.08) h / 0.42); --crystal-shadow: oklch(from var(--run-color-intent-primary-base) calc(l * 0.28) calc(c * 0.8) h / 0.34); /* Legacy per-token vars (still consumed by small controls — checkbox/radio/ switch/progress/tab — and the recessive button text colour). Re-tuned richer than v1 so even surfaces that don't adopt the composite read as gem. */ --crystal-fill: oklch(from var(--run-color-intent-primary-base) calc(l * 0.34 + 0.52) calc(c * 1.1 + 0.06) h / 0.52); --crystal-sheen: oklch(from var(--run-color-intent-primary-base) calc(l + 0.20) calc(c * 0.5 + 0.07) calc(h + 50) / 0.55); --crystal-border: color-mix(in oklch, var(--run-color-intent-primary-base) 52%, transparent); --crystal-edge-low: oklch(from var(--run-color-intent-primary-base) calc(l * 0.30 + 0.30) calc(c * 1.2) h / 0.30); --crystal-glow: var(--crystal-iglow); /* Refractive frost behind the gem — lighter than glassmorphism (the gem is more solid; the blur is a hint of refraction, not the main event). */ --crystal-blur: blur(7px) saturate(195%); /* ── Composite surface recipe — the full faceted gem, in two custom props so component skins adopt it with one line each and all surfaces stay in lockstep (and this whole file is the single iteration surface). ──────── */ --crystal-surface-bg: radial-gradient(56% 46% at 26% 16%, var(--crystal-spec), transparent 58%), linear-gradient(168deg, var(--crystal-gloss) 0%, transparent 33%), conic-gradient(from 200deg at 86% 92%, var(--crystal-disp-warm), transparent 22%, var(--crystal-disp-cool) 46%, transparent 70%), linear-gradient(122deg, transparent 37%, var(--crystal-facet-hi) 38% 47%, transparent 48%), linear-gradient(48deg, transparent 60%, var(--crystal-facet-lo) 61% 70%, transparent 71%), linear-gradient(158deg, var(--crystal-body-top), var(--crystal-body-mid) 52%, var(--crystal-body-bot)); --crystal-surface-shadow: inset 0 1px 0 var(--crystal-highlight), inset 0 0 0 1px var(--crystal-rim), inset 0 18px 30px -22px var(--crystal-spec), inset 0 -16px 32px -18px var(--crystal-iglow), 0 10px 30px -14px var(--crystal-shadow), 0 0 26px -12px var(--crystal-halo); /* Accent recipe — primary CTAs / solid gems. Deeper, more saturated body (short light-on-colour text), stronger halo. */ --crystal-accent-bg: radial-gradient(52% 46% at 28% 14%, var(--crystal-spec), transparent 55%), linear-gradient(168deg, color-mix(in oklch, #ffffff 48%, transparent) 0%, transparent 30%), linear-gradient(122deg, transparent 39%, var(--crystal-facet-hi) 40% 48%, transparent 49%), linear-gradient(158deg, oklch(from var(--run-color-intent-primary-base) calc(l * 0.40 + 0.42) calc(c * 1.2 + 0.05) calc(h + 8) / 0.97), oklch(from var(--run-color-intent-primary-base) calc(l * 0.45 + 0.26) calc(c * 1.4 + 0.06) h / 1) 56%, oklch(from var(--run-color-intent-primary-base) calc(l * 0.45 + 0.16) calc(c * 1.4) calc(h - 8) / 1)); --crystal-accent-shadow: inset 0 1px 0 color-mix(in oklch, #ffffff 60%, transparent), inset 0 14px 26px -18px var(--crystal-spec), 0 8px 22px -10px var(--crystal-shadow), 0 0 30px -6px var(--crystal-halo); /* Flat base tint stays on the root canvas; the bloom field moves to the ::before fixed layer below — see the glassmorphism-atmosphere.css note for why a `background-attachment: fixed` image flickers under glass backdrop-filters. */ background-color: var(--crystal-atm-base); } /* Viewport-anchored bloom field as a `position: fixed` painted layer (NOT a `background-attachment: fixed` image). Crystalline glass panels also carry a `backdrop-filter`, so the same fixed-attachment + backdrop-filter Chromium compositing flicker applies here; the fixed painted layer is sampled cleanly. */ html[data-run-skin="crystalline"]::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-color: transparent; background-image: radial-gradient(70rem 45rem at 50% 12%, var(--crystal-atm-center-cool), transparent 60%), radial-gradient(60rem 40rem at 50% 52%, var(--crystal-atm-center-warm), transparent 58%), radial-gradient(95rem 50rem at 50% -16%, var(--crystal-atm-glow), transparent 58%), radial-gradient(60rem 52rem at 6% 8%, var(--crystal-atm-primary), transparent 62%), radial-gradient(58rem 50rem at 100% 16%, var(--crystal-atm-cool), transparent 60%), radial-gradient(66rem 56rem at 26% 60%, var(--crystal-atm-warm), transparent 60%), radial-gradient(64rem 54rem at 82% 70%, var(--crystal-atm-primary), transparent 60%), radial-gradient(58rem 50rem at 48% 108%, var(--crystal-atm-soft), transparent 58%); background-repeat: no-repeat; } /* ── Software-GPU fallback ─────────────────────────────────────────────── When there's no hardware GPU, `backdrop-filter` is a no-op. The gem body is already present (not a 20% wash), so surfaces stay legible; we only drop the blur and slightly raise body opacity so the facets read on a flat composite. */ html[data-run-skin="crystalline"][data-gpu="software"] { --crystal-body-top: oklch(from var(--run-color-intent-primary-base) calc(l * 0.34 + 0.58) calc(c * 0.9 + 0.05) calc(h + 6) / 0.92); --crystal-body-mid: oklch(from var(--run-color-intent-primary-base) calc(l * 0.34 + 0.50) calc(c * 1.1 + 0.06) h / 0.92); --crystal-body-bot: oklch(from var(--run-color-intent-primary-base) calc(l * 0.32 + 0.40) calc(c * 1.2 + 0.07) calc(h - 6) / 0.94); --crystal-fill: color-mix(in oklch, var(--run-color-surface-default) 80%, var(--run-color-intent-primary-base)); --crystal-blur: saturate(100%); }