/* presets — a door, not a room. * * A preset names a combination of dial positions. It is applied ALONGSIDE those * classes, never instead of them, so every dial a preset does not pin stays * live after you walk through the door. See presets.js for the combinations. * * ⚠ Only boardwalk needs a rule here. The other fourteen presets are * pure dial compositions and declare nothing — which is the normal case and the * one to keep normal. * * ⚠⚠ WHY BOARDWALK IS DIFFERENT. Owner's call 2026-08-30, taken against a * rendered comparison kept at * https://claude.ai/code/artifact/f0a142b1-f683-4d68-b82f-176ad4f6b4b2 * It is the gallery the product showcases, and composing it from four neutral * grounds lost the grain, the rail's glow, the drift pace and Share Tech Mono — * which together are boardwalk. 44 of its 75 tokens differed. It read as a * different product rather than a variant. May be revisited. * * ⚠⚠ The 35 declarations below were GENERATED from the measured difference * between theme-boardwalk.css and `.f-bleed .m-generous .ty-mono` over base, not * transcribed. Regenerate rather than hand-edit if any of those change, or the * showcase drifts silently. * * Composition: * ⚠ No ground class — boardwalk's paint IS its ground. */ .p-boardwalk { /* ground and ink — boardwalk's own paint, the reason it is a preset and not a composition */ --ground: #07060a; --ink: #e8dcc9; --ink-dim: #b8ada2; --ink-faint: #978d82; --scrim-rgb: 0 0 0; --scrim: 0.68; --lit-ground: #0a090c; /* type — ⚠ PINNED. The accepted cost of keeping this gallery exact: the `type` dial will not change the face here. Every other dial still works. */ --font-display: 'Share Tech Mono', 'Courier New', monospace; --font-label: 'Share Tech Mono', 'Courier New', monospace; --title-size: 11px; /* the rail — bespoke geometry the dials do not carry */ --thumb-size: 78px; --thumb-size-sm: 54px; --thumb-gap: 13px; --thumb-gap-sm: 10px; --thumb-radius: 2px; --thumb-hover-scale: 1.07; --thumb-bg: #0a0809; --thumb-border: 1px solid rgba(255, 255, 255, 0.16); --thumb-shadow: 0 8px 30px rgba(0, 0, 0, 0.65); --thumb-shadow-hover: 0 10px 34px rgba(0, 0, 0, 0.7); --thumb-filter: brightness(0.86) saturate(0.94); --thumb-filter-hover: brightness(1.12) saturate(1.06); --accent: rgba(255, 214, 160, 0.75); --accent-glow: rgba(255, 176, 90, 0.28); --n-ink: rgba(255, 255, 255, 0.72); /* duotone, declared so the axis can be compared */ --duo-dark: #1a0d16; --duo-light: #ffd9a8; /* environment — the grain is one of the four things a composition lost */ --grain: 0.16; --grain-blend: overlay; /* the enlargement */ --enlarge-shadow: 0 30px 90px rgba(0, 0, 0, 0.8); --enlarge-max-w: 88vw; --enlarge-max-h: 86vh; --stage-lit-opacity: 0.07; --stage-lit-saturate: 0.5; /* drift — the plate's slow travel. Framing sets 1.05 for bleed; boardwalk runs 1.07. */ --drift-scale: 1.07; } /* frieze — the ground alone, for the reason in presets.js: behind a centred * rail the plate rests at --backdrop, so the ground is 85% of the image and * sets a floor. g-dark's #171717 could not go dark enough. * * ⚠ A NEUTRAL near-black, not boardwalk's #07060a. That one is faintly warm * and purple, and g-dark's stated principle is "neutral charcoal, never * blue-black" — frieze keeps the rest of that palette, so its ground should * not drift off it. If an exact match to boardwalk's is wanted instead, this is * the single line to change. */ .p-frieze { --ground: #080808; --lit-ground: #050505; }