/* Obsidian Glow on the website (Michal, 2026-10-27: "i really like the glow static, can you update acc4 so it has this theme? ... make acc2 the glow dynamic theme"). The same look as design-system/assets/designs/obsidian-glow.css, written for the site's own classes. Loaded only when SITE_DESIGN names it (lib/design.php, set per instance in deploy/k8s/environments), so production and every other instance never fetch it and the gate measures the default site. carries data-design="obsidian-glow-static" or "obsidian-glow-dynamic"; the two differ only in what assets/js/glow.js draws behind the hero and the closing call (still soft bands, or the moving film ribbon). Tokens go in the tokens layer, where the palette lives; the signature layer is unlayered so it wins over components and utilities without !important. Every colour is mixed from the palette tokens. In light the glow becomes a soft pastel aurora with no neon text. Aurora Glow v1 (data-design="aurora-glow-1", Michal, 2026-11-02) is a design of its own: the Glow 2 ribbon at 25 % (glow.js), not the curtains it started from. It shares every rule here except the dot grid on the alternate bands, which stays Obsidian Glow only. A rule meant for one design names that design alone. */ @layer tokens { html:is([data-design^="obsidian-glow-"], [data-design^="aurora-glow-"]):not([data-theme="light"]) { /* A near-black ground, so every accent reads as light and not as paint. */ --bg1: #09090b; --bg2: #0d0d10; --bg3: #141418; --bg4: #1a1a1f; --b: #26262b; --card-bg: linear-gradient(180deg, color-mix(in oklab, var(--w) 7%, transparent), color-mix(in oklab, var(--w) 2%, transparent)); --shadow-soft: inset 0 1px 0 color-mix(in oklab, var(--w) 10%, transparent), 0 24px 48px -24px rgba(0, 0, 0, .85); --shadow-lift: 0 0 60px -12px color-mix(in oklab, var(--accent-2) 55%, transparent), 0 30px 60px -12px rgba(0, 0, 0, .8); --tile-bg: color-mix(in oklab, var(--accent) 16%, transparent); --mesh-opacity: .95; --header-bg: color-mix(in oklab, var(--bg1) 60%, transparent); } html:is([data-design^="obsidian-glow-"], [data-design^="aurora-glow-"]) { --fs-display: clamp(3rem, 1.3rem + 6.4vw, 6.5rem); --g-fade: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent-2) 70%, transparent); } html[data-design^="obsidian-glow-"] { --g-dots: radial-gradient(color-mix(in oklab, var(--accent-2) 22%, transparent) 1px, transparent 1.2px); } html[data-design^="obsidian-glow-"][data-theme="light"] { --g-dots: radial-gradient(color-mix(in oklab, var(--accent-2) 24%, transparent) 1px, transparent 1.2px); } html:is([data-design^="obsidian-glow-"], [data-design^="aurora-glow-"])[data-theme="light"] { --shadow-lift: 0 0 50px -14px color-mix(in oklab, var(--accent-2) 55%, transparent), 0 30px 60px -12px rgba(50, 50, 93, .25); } } /* ---- The signature layer ---------------------------------------------------------------- */ /* Hero: the skewed mesh, brighter, with the stripes drawn over it. */ html:is([data-design^="obsidian-glow-"], [data-design^="aurora-glow-"]) #main > *:first-child::before { inset: -30% -10% 10% -10%; height: auto; background-size: 160% 160%; filter: blur(26px) saturate(1.3); } html:is([data-design^="obsidian-glow-"], [data-design^="aurora-glow-"])[data-theme="light"] #main > *:first-child::before { filter: blur(30px) saturate(1.3); } /* The stripes canvas, put in by glow.js. */ .g-stripes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; filter: blur(10px) saturate(1.4); -webkit-mask: linear-gradient(180deg, #000 55%, transparent 98%); mask: linear-gradient(180deg, #000 55%, transparent 98%); } .g-stripes--ribbon { filter: none; } /* The closing call: a band the stripes can sit behind. */ html:is([data-design^="obsidian-glow-"], [data-design^="aurora-glow-"]) .e2-cta { position: relative; isolation: isolate; overflow: clip; } /* Headings: the gradient word glows. */ html:is([data-design^="obsidian-glow-"], [data-design^="aurora-glow-"]):not([data-theme="light"]) :is(h1, h2) em { filter: drop-shadow(0 0 .32em color-mix(in oklab, var(--accent-2) 55%, transparent)); } /* The header is glass; its lower edge is a line of light. 2px: 1px was too thin, 3px too thick (Michal, 2026-10-28). The footer's upper edge is the same line. */ html:is([data-design^="obsidian-glow-"], [data-design^="aurora-glow-"]) nav { -webkit-backdrop-filter: saturate(1.8) blur(16px); backdrop-filter: saturate(1.8) blur(16px); border-bottom-width: 2px; border-image: var(--g-fade) 1; } html:is([data-design^="obsidian-glow-"], [data-design^="aurora-glow-"]) .e2-ft { border-top-width: 2px; border-image: var(--g-fade) 1; } /* Alternate bands: a hairline of light on top that fades in from both edges, and on Obsidian Glow only, the dot grid (Michal, 2026-11-02: "Return the dots to the Obsidian Glow design but do not use the dots in the background in the Aurora Glow v1"). */ html:is([data-design^="obsidian-glow-"], [data-design^="aurora-glow-"]) #main > *:nth-child(even) { position: relative; } html[data-design^="obsidian-glow-"] #main > *:nth-child(even) { background-image: var(--g-dots); background-size: 22px 22px; } html:is([data-design^="obsidian-glow-"], [data-design^="aurora-glow-"]) #main > *:nth-child(even)::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--g-fade); opacity: .7; pointer-events: none; } /* Cards: a lit edge at rest that brightens on hover, and a pool of light under the pointer. */ html:is([data-design^="obsidian-glow-"], [data-design^="aurora-glow-"]) .e2-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, -20%), color-mix(in oklab, var(--accent-2) 24%, transparent), transparent 70%); opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; } html:is([data-design^="obsidian-glow-"], [data-design^="aurora-glow-"]) .e2-card::after { opacity: .28; } html:is([data-design^="obsidian-glow-"], [data-design^="aurora-glow-"]) .e2-card:hover::before, html:is([data-design^="obsidian-glow-"], [data-design^="aurora-glow-"]) .e2-card:hover::after { opacity: 1; } html:is([data-design^="obsidian-glow-"], [data-design^="aurora-glow-"])[data-theme="light"] .e2-card::before { background: radial-gradient(320px circle at var(--mx, 50%) var(--my, -20%), color-mix(in oklab, var(--accent-2) 14%, transparent), transparent 70%); } /* Illustrations (Michal, 2026-10-27: "a similar glow ... or richer for mouse over on the svg illustrations"). The drawing breathes a faint glow at rest; under the pointer the strokes light up in both accents and a pool of light follows the pointer behind them, as on the cards. */ html:is([data-design^="obsidian-glow-"], [data-design^="aurora-glow-"]) .illus { position: relative; isolation: isolate; border-radius: 16px; } html:is([data-design^="obsidian-glow-"], [data-design^="aurora-glow-"]) .illus::before { content: ""; position: absolute; /* Sideways never past the page gutter: at 898-900px 4 % was 33px against a 32px gutter, and the page scrolled sideways by 1px (the gate caught it, 2026-11-03). */ inset: -4% max(-4%, calc(-1 * var(--gutter))); z-index: -1; border-radius: inherit; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--accent-2) 26%, transparent), color-mix(in oklab, var(--accent) 10%, transparent) 45%, transparent 72%); opacity: 0; transition: opacity .4s var(--ease); pointer-events: none; -webkit-mask: radial-gradient(closest-side, #000 55%, transparent); mask: radial-gradient(closest-side, #000 55%, transparent); } html:is([data-design^="obsidian-glow-"], [data-design^="aurora-glow-"]) .illus svg { filter: drop-shadow(0 0 5px color-mix(in oklab, var(--accent) 26%, transparent)); transition: filter .4s var(--ease); animation: g-breathe 7s ease-in-out infinite; } html:is([data-design^="obsidian-glow-"], [data-design^="aurora-glow-"]) .illus:hover::before { opacity: 1; } html:is([data-design^="obsidian-glow-"], [data-design^="aurora-glow-"]) .illus:hover svg { animation: none; filter: drop-shadow(0 0 3px color-mix(in oklab, var(--accent) 80%, transparent)) drop-shadow(0 0 16px color-mix(in oklab, var(--accent-2) 60%, transparent)) brightness(1.18); } html:is([data-design^="obsidian-glow-"], [data-design^="aurora-glow-"])[data-theme="light"] .illus svg { filter: drop-shadow(0 0 4px color-mix(in oklab, var(--accent-2) 22%, transparent)); } html:is([data-design^="obsidian-glow-"], [data-design^="aurora-glow-"])[data-theme="light"] .illus:hover svg { filter: drop-shadow(0 0 10px color-mix(in oklab, var(--accent-2) 45%, transparent)); } @keyframes g-breathe { 0%, 100% { filter: drop-shadow(0 0 4px color-mix(in oklab, var(--accent) 18%, transparent)); } 50% { filter: drop-shadow(0 0 12px color-mix(in oklab, var(--accent-2) 42%, transparent)); } } /* Icons: a tile that glows faintly. */ html:is([data-design^="obsidian-glow-"], [data-design^="aurora-glow-"]) .e2-tile { border-radius: 12px; box-shadow: 0 0 22px -6px color-mix(in oklab, var(--accent) 60%, transparent); } html:is([data-design^="obsidian-glow-"], [data-design^="aurora-glow-"])[data-theme="light"] .e2-tile { box-shadow: none; } /* Numbers glow. */ html:is([data-design^="obsidian-glow-"], [data-design^="aurora-glow-"]):not([data-theme="light"]) .e2-num { filter: drop-shadow(0 0 .3em color-mix(in oklab, var(--accent) 45%, transparent)); } /* Buttons: a halo, and a sheen that crosses the primary one every few seconds (dark only). */ html:is([data-design^="obsidian-glow-"], [data-design^="aurora-glow-"]):not([data-theme="light"]) :is(.nav-cta, .e2-btn) { position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 70%, transparent), 0 0 28px -2px color-mix(in oklab, var(--accent) 65%, transparent), 0 12px 44px -6px color-mix(in oklab, var(--accent) 55%, transparent); } html:is([data-design^="obsidian-glow-"], [data-design^="aurora-glow-"]):not([data-theme="light"]) :is(.nav-cta, .e2-btn)::after { content: ""; position: absolute; inset: 0 auto 0 -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); animation: g-sheen 5s ease-in-out infinite; z-index: -1; } @keyframes g-sheen { 0%, 62% { left: -60%; } 100% { left: 130%; } } @media (prefers-reduced-motion: reduce) { /* Same :not() as the sheen rule above, or that rule's extra attribute out-weighs this one and the sheen keeps crossing (the gate caught it, 2026-11-03). */ html:is([data-design^="obsidian-glow-"], [data-design^="aurora-glow-"]):not([data-theme="light"]) :is(.nav-cta, .e2-btn)::after { animation: none; } html:is([data-design^="obsidian-glow-"], [data-design^="aurora-glow-"]) .illus svg { animation: none; transition: none; } html:is([data-design^="obsidian-glow-"], [data-design^="aurora-glow-"]) .illus::before { transition: none; } }