/* ============================================================ ICON GARAGE STANDARD, web register tokens · V2 Doc No. ICON-WEB-CSS-001 Implements: _ART/ART-DIRECTION.md sections D (density), E (type), G (motion), and the colour and family locks from 05 Brand & Creative/DESIGN-SYSTEM/DESIGN-SYSTEM.md. READ THIS BEFORE EDITING 1. Colour is locked. gold, gold-rich, black, grey, ink, paper, hairline. Tints, shades and opacities of those seven are the only permitted derivations. No new hues. The retired red is listed in the design system doc, not restated here. 2. Type is locked. Chakra Petch, IBM Plex Sans, IBM Plex Mono. 3. Components do not hardcode colour. They read the context tokens (--fg, --hair, --surface and friends) which are re-declared by .on-black and .on-paper in main.css. That is how one component works on both registers. ============================================================ */ :root { /* ============================================================ 1 · COLOUR, official brand guide ============================================================ */ --gold: #E3974C; /* Icon Gold: rules, refs, seals, flange lines */ --gold-rich: #E8BD71; /* Rich Gold: gold-on-black text, labels, prices */ --black: #0B0A09; /* steel plates, covers, the web canvas */ --grey: #544E47; /* Icon Grey: secondary labels, mono metadata */ --ink: #1C1916; /* body text on paper */ --paper: #FAF7F1; /* paper surface, never pure white */ --hairline: #D9D2C6; /* rules and dividers on paper */ /* Derived, same hues, no new colour introduced. --gold-deep is Icon Gold at 55% value (hue 30deg, unchanged). It exists because #E3974C on #FAF7F1 measures 2.25:1 and fails text contrast. Gold-coded TEXT on paper uses this; gold RULES on paper stay #E3974C, which is legal because a rule is not text. --gold-deep on paper measures 6.2:1. */ --gold-deep: #7D532A; /* Paper mixed 72/28 with hairline. Wells, frames, table zebra. */ --paper-deep: #F1EDE5; /* Ink lightened for dense body copy on paper, per PROTO .desc-cell. */ --ink-soft: #2A251F; /* ---------- dark register surfaces ---------- */ --surface-0: #0B0A09; /* page canvas */ --surface-1: #131110; /* raised plate */ --surface-2: #1C1916; /* deepest plate, wells */ --rule: rgba(227, 151, 76, 0.22); /* gold hairline on black */ --rule-soft: rgba(250, 247, 241, 0.10); /* neutral hairline on black */ --rule-strong: rgba(250, 247, 241, 0.22); --tint-gold: rgba(227, 151, 76, 0.07); /* the ICON column wash */ --tint-gold-2: rgba(227, 151, 76, 0.13); /* ICON column, revised emphasis */ /* ---------- type colour on black, all measured ---------- dim 10.0:1 · muted 7.3:1 · faint 5.0:1 against #0B0A09 */ --on-black: #FAF7F1; --on-black-dim: rgba(250, 247, 241, 0.74); --on-black-muted: rgba(250, 247, 241, 0.62); --on-black-faint: rgba(250, 247, 241, 0.50); /* ============================================================ 2 · TYPE, three families, no substitutes ============================================================ */ --disp: 'Chakra Petch', 'Arial Narrow', Arial, sans-serif; --body: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; --mono: 'IBM Plex Mono', 'Courier New', monospace; /* ---------- the scale, ART-DIRECTION §E1 ---------- Each role owns a size, a leading and a tracking. Do not mix a size from one role with the tracking of another. */ --d1-size: clamp(2.4rem, 5.6vw, 4.75rem); /* 38 to 76px */ --d1-lh: 0.94; --d1-ls: -0.018em; --d2-size: clamp(1.75rem, 3.2vw, 2.625rem); /* 28 to 42px */ --d2-lh: 0.98; --d2-ls: -0.014em; --d3-size: clamp(1.375rem, 2.1vw, 1.75rem); /* 22 to 28px */ --d3-lh: 1.06; --d3-ls: -0.008em; --d4-size: 1.0625rem; --d4-lh: 1.24; --d4-ls: 0.012em; --d5-size: 0.9375rem; --d5-lh: 1.0; --d5-ls: 0.065em; --n1-size: clamp(1.875rem, 3.1vw, 2.625rem); --n1-lh: 1.0; --n1-ls: -0.02em; --n2-size: 1.375rem; --n2-lh: 1.1; --n2-ls: -0.01em; --b0-size: 1.1875rem; --b0-lh: 1.55; --b0-ls: -0.004em; --b0-measure: 44ch; --b1-size: 1rem; --b1-lh: 1.62; --b1-ls: 0; --b1-measure: 58ch; --b2-size: 0.9375rem; --b2-lh: 1.54; --b2-ls: 0.002em; --b2-measure: 66ch; --b3-size: 0.8125rem; --b3-lh: 1.5; --b3-ls: 0.004em; --m1-size: 0.6875rem; --m1-lh: 1.0; --m1-ls: 0.10em; --m2-size: 0.75rem; --m2-lh: 1.4; --m2-ls: 0.14em; --m3-size: 0.6875rem; --m3-lh: 1.5; --m3-ls: 0.12em; --m4-size: 0.625rem; --m4-lh: 1.6; --m4-ls: 0.08em; /* ============================================================ 3 · STRUCTURE, signature elements ============================================================ */ --chamfer: 14px; /* steel plate corner cut, PROTO .terms */ --chamfer-sm: 8px; /* buttons */ /* Tile geometry, DESIGN-SYSTEM §3b (Alex ruling, Aug 18 2026). Same corner cut as the buttons and the plates, one token, so a tile can never drift into its own geometry. --tile-riser is the resting height the tile sits above the page; --tile-lift is the extra rise on hover. Both are hard edged, never blurred. */ --tile-chamfer: var(--chamfer); --tile-riser-y: 4px; --tile-lift: 4px; --flange-thick: 3px; /* I-beam top flange */ --flange-thin: 1px; /* I-beam bottom flange */ --plate-rule: 4px; /* gold base rule on plates */ --grid-cell: 64px; /* blueprint grid, AR-8 only */ --grid-line: rgba(232, 189, 113, 0.05); --seal-size: 150px; /* AR-10 requires 150, not 132 */ /* ============================================================ 4 · SPACING AND DENSITY ART-DIRECTION §D1 (padding scale), §D2 (seam rule), §D3 (void ceiling). SYSTEM lane ruling, Aug 18 2026. THE CONTRADICTION Those three sections cannot all hold. §D1 puts --pad-std at 80px (1024) and 88px (1440). §D2 bills a register change at 1.5x, which is 120px and 132px. §D3 caps any run of empty page at 96px desktop, 56px mobile. 120 > 96, and at 390 the same arithmetic gives 72 against a 56 ceiling. Every seam between a paper band and a black band therefore failed the QC gate by construction, which is why all four page lanes hit it and three of them patched it locally. THE RULING: §D3 wins, and the SEAM becomes the governed number. The void ceiling is the gate that encodes the actual client complaint, so it is authored and everything else is derived from it. --void-max is the ceiling. --seam-max is 90% of it, which is the working target; the 10% is headroom for element margins inside the seam. --pad-std is sized so the largest seam the seam rule can produce lands on --seam-max, and every seam bonus in main.css §3 is clamped to it, so no page can push a seam past the ceiling even by overriding --pad. The delivered scale, and the seam each band bills: token 390 768 1024 1440+ --pad-tight 23 26 35 38 --pad-std 36 40 54 58 --pad-anchor 42 42 68 73 --void-max 56 56 96 96 --seam-max 42 42 82 82 standard seam 36 40 54 58 register seam 42 42 81 82 Measured on the rendered pages, longest empty band at 1280, before this ruling and after: Home 91 to 91 (Home was already running a local budget of its own, now deleted), The Coating 130 to 92, Partners 130 to 91, Warranty 127 to 88, FAQs 124 to 85. Ceiling 96. §D1's absolute numbers (48 / 64 / 80 / 88) are superseded and §D2's flat 1.5x is now a clamped 1.5x. Flagged for the Art Direction lane: ART-DIRECTION §D1 and §D2 should be restated against §D3 so the spec stops contradicting itself. The empty-band budget gate is 15%, not the 8% printed in §D3 and §H4. Oracle ruling: 8% was arithmetically unreachable on this padding scale. ============================================================ */ /* Void ceiling, §D3. This is the authored number. Nothing on the site may open a run of empty page taller than this. */ --void-max: 56px; /* Working target for a seam. The ceiling is measured on rendered pixels and the last line of a paragraph carries roughly 10px of leading below its glyphs, so a seam that is nominally at the ceiling measures over it. 14px of allowance covers that plus sub-pixel rounding, measured on Home and The Coating. */ --seam-max: calc(var(--void-max) - 14px); --pad-std: clamp(36px, 5.2vw, 40px); --pad-tight: calc(var(--pad-std) * 0.65); /* Anchor never exceeds the seam target on its own, because a first or last band still has one neighbour. */ --pad-anchor: min(calc(var(--pad-std) * 1.25), var(--seam-max)); /* ---------- layout ---------- */ --wrap: 1280px; /* down from 1360, §D7 */ --wrap-tight: 900px; /* single column reading wrap */ --gutter: clamp(20px, 4vw, 40px); --nav-h: 64px; /* ---------- the 8px step scale, for component internals ---------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; --s-11: 10rem; /* ============================================================ 5 · MOTION, ART-DIRECTION §G No ease-in anywhere. Nothing exceeds 700ms. ============================================================ */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* everything entering */ --ease-io: cubic-bezier(0.77, 0, 0.175, 1); /* anything moving on screen */ --dur-press: 140ms; --dur-hover: 160ms; --dur-nav: 220ms; --dur-reveal: 520ms; --dur-draw: 700ms; /* ============================================================ 6 · CONTEXT TOKENS, black register default .on-paper in main.css re-declares every one of these. Components read these names and never the raw palette, which is why a single component works on both surfaces. ============================================================ */ --surface: var(--surface-0); /* band background */ --surface-well: var(--surface-2); /* inputs, frames, table wash */ --fg: var(--on-black); /* display and primary text */ --fg-dim: var(--on-black-dim); /* body */ --fg-dense: var(--on-black-dim); /* B2, B3, ledger notes, cells */ --fg-muted: var(--on-black-muted); /* support, captions */ --fg-faint: var(--on-black-faint); /* micro notes */ --fg-accent: var(--gold-rich); /* gold-coded text */ --fg-figure: var(--gold-rich); /* N1, N2, ledger values */ --fg-code: var(--gold); /* M1 ref codes */ --hair: var(--rule-soft); /* neutral hairline */ --hair-strong: var(--rule-strong); /* ghost button, stronger divider */ --hair-gold: var(--rule); /* gold hairline */ --rule-heavy: var(--gold); /* 2px and 3px structural rules */ --focus: var(--gold-rich); /* ---------- tile register, DESIGN-SYSTEM §3b ---------- A tile carries colour, not flat black. The field is a gold wash over the raised surface, the edge is a gold hairline, the riser is the hard gold base rule the tile appears to stand on. Both surface classes re-declare these three in main.css, so one tile component works on black and on paper. No new hue is introduced: all three are Icon Gold at an opacity. */ --tile-field: linear-gradient(158deg, rgba(227, 151, 76, 0.17) 0%, rgba(227, 151, 76, 0.045) 62%), var(--surface-1); --tile-edge: rgba(227, 151, 76, 0.34); --tile-riser: rgba(227, 151, 76, 0.34); /* ---------- deprecated aliases ---------- Kept so the previous page stylesheets do not detonate mid-swarm. Do not use in new work. Removed once home.css and partners.css are rewritten against the archetype library. */ --max-w: var(--wrap); --max-w-text: 66ch; --ease: var(--ease-out); --dur-fast: var(--dur-hover); --dur: var(--dur-nav); --dur-slow: var(--dur-reveal); } /* Desktop steps. Only the ceiling and the standard budget are authored; tight and anchor derive from them, so the invariant (largest possible seam == --seam-max) holds at every width. */ @media (min-width: 1024px) { :root { --void-max: 96px; --pad-std: 54px; --nav-h: 72px; } } @media (min-width: 1440px) { :root { --pad-std: 58px; } }