/* ========================================================================== APERTURE — DESIGN TOKENS Single source of truth. Every value here is traceable to either the build specification section 3, or to the approved artboard itself where the two disagree. Where they disagree the ARTBOARD WINS and the divergence is recorded in docs/DESIGN-TOKENS.md. Nothing in this file is a preference. Do not tune these by eye. ========================================================================== */ :root { /* ---- Fluid engine ----------------------------------------------------- One mechanism for every size that scales. --span runs 0px at a 390px viewport to 1050px at a 1440px viewport, and is clamped at both ends. value = calc( MIN + DELTA * var(--span) / 1050 ) where MIN is the 390px value and DELTA is (artboard value - MIN) as a plain number. At exactly 1440 every one of these resolves to the artboard value, which is ruling R1. Above 1440 the composition is capped at 1440 and centred, so the clamp holds. -------------------------------------------------------------------- */ --span: clamp(0px, 100vw - 390px, 1050px); /* ---- Palette — spec section 3 ---------------------------------------- */ --c-base: #22262D; /* page base */ --c-stage-top: #262B33; --c-stage-mid: #22262D; --c-stage-bot: #1F232A; --c-gold: #C9A227; /* gold, primary. Also the logo's gold. */ --c-gold-bright: #E9C860; --c-gold-dim: #A8862A; --c-display: #F3EDE1; /* display text */ --c-body-bright: #EDE7DC; /* body text, emphasised */ --c-body: #C9C2B4; /* body text */ --c-muted: #B7B0A2; --c-footer: #A09A8E; /* Was #8B857A. The footer text sits on TWO different backgrounds: the page base #22262D on the centred footer (pricing, FAQ, legal) and the LIGHTER band gradient #2A2F38 to #262B33 on the banded footer (homepage, application, account). The floor for text below 18px is 4.5:1 and it must hold on the LIGHTEST of them. #8B857A 3.67 band top / 4.15 base fails both #9A9488 4.46 band top / 5.04 base fails the band #A09A8E 4.81 band top / 5.43 base passes everywhere OWNER RULING, 12 September 2026, her word: "yes", given on a rendered before-and-after of her own pages. APPROVED AND FROZEN. This SUPERSEDES her earlier same-day yes to #9A9488, which was given on a figure measured against the page base only and is void. Do not re-raise footer contrast; do not change this value without her. See docs/DESIGN-TOKENS.md. Do not re-measure against the page base alone; that is the error this value corrects. */ /* Champagne light. Radial pools, never a flat fill. */ --c-light: 236, 208, 152; /* Rules */ --rule-quiet: rgba(242,227,196,0.09); --rule-gold: rgba(233,200,96,0.32); /* the three emphasised answers */ --pier-edge: rgba(201,162,39,0.5); --pier-shadow: 0 34px 80px rgba(6,8,12,0.5) inset; --numeral-ink: rgba(201,162,39,0.30); /* ---- Pier gradients — FOUR, from the artboard ------------------------ Spec section 3 lists one. The artboard uses four, lightening at 03 where the composition flips. Ruling R4: four is deliberate, build four. -------------------------------------------------------------------- */ --pier-01: linear-gradient(180deg, #30363F 0%, #282E37 60%, #232830 100%); --pier-02: linear-gradient(180deg, #2C323C 0%, #242A32 60%, #1F242B 100%); --pier-03: linear-gradient(180deg, #343A45 0%, #2B313B 60%, #262B33 100%); --pier-04: linear-gradient(180deg, #2E343D 0%, #262C34 60%, #21262D 100%); /* Raised panels — spec section 3, used by pages other than the FAQ */ --panel: linear-gradient(160deg, #333944, #292F39, #232830); --panel-lighter: linear-gradient(160deg, #353B46, #2B313B, #252A32); /* ---- Typography ------------------------------------------------------ Julius Sans One for display, Instrument Sans for everything functional. No serif anywhere. Locked and closed. -------------------------------------------------------------------- */ --f-display: 'Julius Sans One', 'Instrument Sans', system-ui, sans-serif; --f-body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Page hero — artboard 46px / 13px / 1.46 */ --t-hero: calc(26px + 20 * var(--span) / 1050); --ls-hero: calc(4px + 9 * var(--span) / 1050); --lh-hero: 1.46; /* Hero subline — artboard 15px / 2.6px / 1.9. No tier exists in spec section 3; taken from the artboard. Ruling R11. */ --t-subline: calc(14px + 1 * var(--span) / 1050); --ls-subline: calc(1.6px + 1 * var(--span) / 1050); --lh-subline: 1.9; /* Closing statement — artboard 26px / 10px / 1.74 */ --t-closing: calc(18px + 8 * var(--span) / 1050); --ls-closing: calc(3.5px + 6.5 * var(--span) / 1050); --lh-closing: 1.74; /* Section name — artboard 22px / 13px */ --t-section: calc(16px + 6 * var(--span) / 1050); --ls-section: calc(5px + 8 * var(--span) / 1050); /* Section numeral — artboard 64px / 7px */ --t-numeral: calc(40px + 24 * var(--span) / 1050); --ls-numeral: calc(4px + 3 * var(--span) / 1050); /* Question / label — artboard 15px / 4px / 1.72. Floors at 14px: it is a line a person reads. Ruling R12. */ --t-question: calc(14px + 1 * var(--span) / 1050); --ls-question: calc(2.4px + 1.6 * var(--span) / 1050); --lh-question: 1.72; /* Body — artboard 14.5px / 0.3px / 1.92. FLOOR 14px SITE-WIDE for running prose. Ruling R12. */ --t-body: calc(14px + 0.5 * var(--span) / 1050); --ls-body: 0.3px; --lh-body: 1.92; --measure: 780px; /* Nav — artboard 13px / 2px. Label floor 12px. */ --t-nav: calc(12px + 1 * var(--span) / 1050); --ls-nav: calc(1.4px + 0.6 * var(--span) / 1050); /* CTA, two tiers. The artboard has two; spec section 4 describes a chimera of both. Ruling R9. */ --t-cta-nav: 12px; --ls-cta-nav: calc(2.2px + 0.8 * var(--span) / 1050); --pad-cta-nav: 13px 28px; --t-cta-foot: calc(12.5px + 0.5 * var(--span) / 1050); --ls-cta-foot: calc(2.6px + 1.4 * var(--span) / 1050); --pad-cta-foot: calc(13px + 5 * var(--span) / 1050) calc(26px + 18 * var(--span) / 1050); /* Footer legal line — artboard 11px / 1.5px. HELD CONSTANT at every width. This is an approved artboard value, not a fluid value that decayed below the 12px label floor, and the artboard governs. Documented as a deliberate exception to R12. */ --t-footer: 11px; --ls-footer: 1.5px; /* ---- Page gutters — from the artboard, ruling R2 ---------------------- There is no single site gutter. Inventing one is what caused the original build to diverge. Each zone carries its own. -------------------------------------------------------------------- */ --gut-nav: calc(20px + 52 * var(--span) / 1050); /* 72 at 1440 */ --gut-hero-l: calc(20px + 88 * var(--span) / 1050); /* 108 */ --gut-hero-r: calc(20px + 52 * var(--span) / 1050); /* 72 */ --gut-stack-in: calc(20px + 56 * var(--span) / 1050); /* 76 */ --gut-stack-out: calc(20px + 88 * var(--span) / 1050); /* 108 */ --gut-foot: calc(20px + 52 * var(--span) / 1050); /* 72 */ /* ---- Block rhythm ---------------------------------------------------- */ /* The nav band is 168 tall at 1440 and stays 168. Her approved header board shows the 98px mark vertically centred in it, so the padding is 35 above and 35 below, not the old 34/30 that the 104px lockup needed. 35 + 98 + 35 = 168. The band height does not change. */ --pad-nav-t: calc(22px + 13 * var(--span) / 1050); /* 35 at 1440 */ --pad-nav-b: calc(20px + 15 * var(--span) / 1050); /* 35 at 1440 */ --pad-nav: var(--pad-nav-t) 0 var(--pad-nav-b); --pad-hero-t: calc(72px + 78 * var(--span) / 1050); /* 150 */ --pad-hero-b: calc(64px + 66 * var(--span) / 1050); /* 130 */ --pad-stack-t: calc(44px + 32 * var(--span) / 1050); /* 76 */ --pad-stack-b: calc(48px + 32 * var(--span) / 1050); /* 80 */ --gap-hero: calc(20px + 10 * var(--span) / 1050); /* 30 */ --gap-qa: 16px; --qa-rule-above: calc(26px + 8 * var(--span) / 1050); /* 34 */ --qa-rule-below: calc(28px + 8 * var(--span) / 1050); /* 36 */ /* ---- Chrome ---------------------------------------------------------- */ /* ---- The logo, approved 13 September 2026 ---------------------------- Everything derives from --logo-mark so the lockup cannot drift apart when the header scales. The ratios are the approved artboard's own: gap 24 / 98 = 0.2449 word height 22.35 / 98 = 0.2281 The gap is measured from the mark's BOX edge to the word's INK, which is what the artboard she approved shows. The mark's ink stops at 88 of its 100-unit box, so the visible air between gold and cream is larger than 24 by design. Do not "correct" it to 24 of visible air; that moves the word. */ --logo-mark: calc(58px + 40 * var(--span) / 1050); /* 98 at 1440 */ --logo-gap: calc(var(--logo-mark) * 0.2449); /* 24 at 98 */ /* The word is driven by its WIDTH, not its height, because the width is the authoritative number in HEADER-SPEC.txt and it is what sets where the lockup ends. Deriving it from height instead left the rendered width 0.08px short of 263.785 through the browser's own aspect-ratio rounding, which the conformance check caught. 263.785 / 98 = 2.6916837. */ --logo-word-w: calc(var(--logo-mark) * 2.6916837); /* 263.785 at 98 */ /* 3px, from HEADER-SPEC.txt. Her brief on the MARK's weight, which is a different thing and is not this number: "not too thick, I want it to flow". */ --logo-rule-h: 3px; /* The rule's centre sits on the centre of the mark's cut, which is at 55 of the mark's own 100 units. Written this way it stays correct at every width and if the band height ever changes. */ /* Derived, not restated. This used to re-type --pad-nav's top formula as a literal, so editing the band padding moved the mark and left the crossbar behind: at a 10px padding change the rule sat 10px outside the letter's cut and only the 1440 conformance check noticed. */ --logo-rule-y: calc(var(--pad-nav-t) + (var(--logo-mark) * 0.55) - (var(--logo-rule-h) / 2)); /* From the page edge to where the word's ink begins. 72 + 98 + 24 = 194. */ --logo-rule-w: calc(var(--gut-nav) + var(--logo-mark) + var(--logo-gap)); /* --logo-h is GONE as of 0.4.0. It sized the single-file lockup the header no longer uses. The footer has always used --mark-h and still does. A comment claiming it was "kept for the footer" was wrong and is not replaced with a second wrong comment. */ --mark-h: calc(32px + 12 * var(--span) / 1050); /* 44 */ --nav-gap: calc(20px + 24 * var(--span) / 1050); /* 44 */ --pier-w: 330px; --frame: 1440px; /* ---- Homepage tiers — from Aperture-Homepage-The-Aperture-2026-08-30.pdf -- Measured off the artboard's own text layer, not carried over from the FAQ. The homepage hero is 55px where the FAQ hero is 46px; they are different tiers on different pages and the spec's single "Page hero" row does not cover both. Ruling: each page's artboard governs its own page. -------------------------------------------------------------------- */ --t-home-hero: calc(30px + 25 * var(--span) / 1050); /* 55 at 1440 */ --ls-home-hero: calc(4px + 8 * var(--span) / 1050); --lh-home-hero: 1.48; --t-home-tagline: calc(14px + 2 * var(--span) / 1050); /* 16 */ /* THE SLOGAN, returned to the page 13 September 2026. Her ruling that day was "I want B for the slogan to live outside": outside the LOGO FILE, on the page at a size a person can read. Taking it out of the logo without putting it on the page would have deleted it from the site, which is not what she ruled. Position, size, colour and the hairline above it are taken from the board she was shown the same day (FullHeader, hero foot): 70 above, a 1px hairline at 10% white, 24 below it, 0.16em. THE SIZE AND THE COLOUR ARE NOT THE BOARD'S. The size is floored at 12px just below, because the board's curve decayed under ruling R12's label floor. The colour is --c-gold-bright, by her ruling of 13 September, because the board's --c-gold measured 4.23:1 against a 4.5 floor. Both carry their reasons where they are set. */ /* 12.5 at 1440 and NEVER below 12. The first version was calc(11.5px + 1 * span/1050), which decayed to 11.5 and breached ruling R12's label floor at every width below 915. R12 exists precisely against fluid values that decay; its one exception, the 11px legal line, is an approved artboard value rather than a curve that slipped. Neither reviewer could see it until the selector was added to responsive.mjs, because until then nothing measured it. */ --t-home-slogan: calc(12px + 0.5 * var(--span) / 1050); /* 12.5 at 1440, 12.0 at 390 */ --ls-home-tagline:calc(1.2px + 1.4 * var(--span) / 1050); --t-welcomed: 12px; /* label floor */ --ls-welcomed: calc(1.6px + 1.4 * var(--span) / 1050); --t-mech-label: 12px; --ls-mech-label: calc(2.4px + 1.6 * var(--span) / 1050); --t-step-n: 12px; --t-step-label: calc(15px + 2 * var(--span) / 1050); /* 17 */ --ls-step-label: calc(3px + 4 * var(--span) / 1050); --t-step-body: calc(14px + (-0.5) * var(--span) / 1050); /* 13.5 at 1440 */ --t-home-closing: calc(19px + 8 * var(--span) / 1050); /* 27 */ --t-plate: calc(14px + 1 * var(--span) / 1050); /* 15 */ --ls-plate: calc(3px + 5 * var(--span) / 1050); --t-plate-caption:calc(14px + (-1.5) * var(--span) / 1050); /* 12.5 */ /* Homepage and application use a 116 gutter where the FAQ and pricing use 108. Each artboard governs its own page. */ --gut-home: calc(20px + 96 * var(--span) / 1050); /* 116 at 1440 */ /* ---- Pricing tiers — from Aperture-Pricing-The-Vault-2026-08-30.pdf ---- */ --t-price-hero: calc(30px + 22 * var(--span) / 1050); /* 52 */ --ls-price-hero: calc(4px + 8 * var(--span) / 1050); --t-rate: calc(38px + 22 * var(--span) / 1050); /* 60 */ --t-band-label: calc(14px + 2 * var(--span) / 1050); /* 16 */ --ls-band-label: calc(2.4px + 2.6 * var(--span) / 1050); --t-band-body: calc(14px + 1 * var(--span) / 1050); /* 15 */ --t-calc-label: calc(14px + 1 * var(--span) / 1050); /* 15 */ --ls-calc-label: calc(2.4px + 2.6 * var(--span) / 1050); --t-calc-volume: calc(30px + 16 * var(--span) / 1050); /* 46 */ --t-calc-fee: calc(42px + 34 * var(--span) / 1050); /* 76 */ --t-calc-row: calc(12px + 1 * var(--span) / 1050); /* 13 at 1440 */ --t-absence: calc(12px + 1 * var(--span) / 1050); /* 13 */ --ls-absence: calc(1.6px + 1.4 * var(--span) / 1050); --t-price-head: calc(19px + 7 * var(--span) / 1050); /* 26 */ --ls-price-head: calc(3.5px + 6.5 * var(--span) / 1050); --t-price-welcomed: calc(12px + 1 * var(--span) / 1050); /* 13 */ --t-effective: calc(12px + 2 * var(--span) / 1050); /* 14 */ /* ---- Application tiers — from Aperture-Application-The-Threshold-…pdf -- */ --t-apply-title: calc(28px + 16 * var(--span) / 1050); /* 44 */ --ls-apply-title: calc(4px + 8 * var(--span) / 1050); --t-apply-lead: calc(14px + 1 * var(--span) / 1050); /* 15 */ --t-apply-note: calc(14px + (-1) * var(--span) / 1050); /* 13 */ --t-field-label: calc(10px + 0 * var(--span) / 1050); /* 10 — see note */ --ls-field-label: calc(1.6px + 1.4 * var(--span) / 1050); --t-field: calc(14px + (-0.5) * var(--span) / 1050); /* 13.5 */ --t-sec-name: calc(14px + 1 * var(--span) / 1050); /* 15 */ --ls-sec-name: calc(3px + 4 * var(--span) / 1050); --t-doc: calc(13px + 0 * var(--span) / 1050); /* 13 */ /* ---- Motion — quiet, structural, felt not seen ------------------------ */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur: 520ms; } @media (prefers-reduced-motion: reduce) { :root { --dur: 0ms; } }