/* Design scaffolds. A "scaffold" is a named set of design tokens — type, spacing, colour, motion — that a page opts into with one attribute on : Pages are then written against var(--…) names only. No page stylesheet should ever contain a raw hex or a raw font stack; if it needs a value the scaffold doesn't have, the value belongs here. That constraint is the whole point: it means a page's entire visual language can be swapped by editing one attribute, and two pages can look nothing alike while still sharing the same brand constants underneath. Adding a scaffold = adding a [data-scaffold="…"] block below. Nothing else in the site needs to know it exists. */ /* ------------------------------------------------------------------ * Brand constants — true everywhere, in every scaffold. These are the only literal values in the system. * ------------------------------------------------------------------ */ :root { --brand-red: #e03021; --brand-grey: #d9d9d9; --brand-white: #ffffff; --brand-ink: #242424; /* Mid grey — ink held back. For type that has to sit on the page without competing with what it's next to, which on the catalogue is the nav. */ --brand-mid: #848484; /* Spacing ramp. Scaffolds pick from it; pages never invent steps. */ --space-3xs: 4px; --space-2xs: 8px; --space-xs: 12px; --space-s: 18px; --space-m: 28px; --space-l: 44px; --space-xl: 72px; --space-2xl: 112px; /* Motion. Overridden to 0 under prefers-reduced-motion, below. */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 120ms; --dur-mid: 260ms; --dur-slow: 600ms; } /* ------------------------------------------------------------------ * Display face. The brief calls for Helvetica Neue Condensed Bold. That face ships with macOS but with nothing else, so the stack below is a graceful degradation, not a solution: on Windows and Android it lands on Arial Narrow, which is narrower than nothing but is not the same typeface. The fix is a licensed webfont at the path below. Until that file exists the @font-face src 404s, the browser silently falls through to the rest of the stack, and the page is unharmed — so this can be wired now and satisfied later by dropping a file in, with no code change. * ------------------------------------------------------------------ */ @font-face { font-family: 'Stasera Display'; src: url('../fonts/stasera-display-condensed-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-stretch: 75%; font-display: swap; } /* ------------------------------------------------------------------ * Scaffold: catalogue Editorial and quiet: one screen, condensed bold, the mark over a plain list of names on white. No rounding, no shadow, no gradient. Everything that isn't the type is removed — which as of the tile grid coming out is everything. The tile tokens that used to live here (--on-tile, --neutral, the checkerboard's colours, --grid-cols, --pad-tile, --step-tile, the glyph set and --window-size) went with it. Nothing outside this scaffold ever read them. * ------------------------------------------------------------------ */ [data-scaffold='catalogue'] { --bg: var(--brand-white); --fg: var(--brand-ink); --fg-muted: var(--brand-mid); --accent: var(--brand-red); --font-display: 'Stasera Display', 'Helvetica Neue Condensed Bold', 'HelveticaNeue-CondensedBold', 'Helvetica Neue LT Condensed', 'Helvetica Neue', 'Arial Narrow', Helvetica, Arial, sans-serif; --weight-display: 700; --stretch-display: 75%; /* -3%, per the brief. Applied at every size — the face is set tight. */ --track-display: -0.03em; --leading-display: 0.86; /* Type scale. Viewport-relative because the page is: the list is centred in the viewport rather than set in a column of fixed measure. */ --step-index: clamp(1.375rem, 2.25vw, 2.5rem); /* the tool list */ --step-nav: clamp(0.8125rem, 1.4vw, 1.375rem); /* masthead */ /* Layout */ --pad-edge: clamp(20px, 3.8vw, 64px); } /* ------------------------------------------------------------------ * Scaffold: console The tool chrome — dense, quiet, instrument-panel. These values are not invented here: they are the token block currently copy-pasted verbatim into ascii.html, canvas.html, font.html and tool.html. Declared but not yet applied. Migrating those four pages means deleting their :root block and setting data-scaffold="console" — a mechanical pass, deliberately kept separate from the catalogue redesign so that redesign cannot break a working tool. * ------------------------------------------------------------------ */ [data-scaffold='console'] { --bg: #ffffff; --fg: #2b2b2b; --fg-mid: #6e6e6e; --fg-soft: #a0a0a0; --line: #e4e4e4; --line-soft: #f0f0f0; --accent: var(--brand-red); --font-display: 'Futura', 'Futura PT', 'Jost', 'Proxima Nova', 'Century Gothic', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-mono: 'Menlo', 'Monaco', 'Consolas', monospace; --weight-display: 500; --stretch-display: 100%; --track-display: 0; --leading-display: 1.2; --step-label: 9.5px; --step-control: 12px; --track-label: 0.14em; --sidebar: 288px; } /* ------------------------------------------------------------------ * Global floor * ------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-mid: 0ms; --dur-slow: 0ms; } }