/* Site developed and built by sitethreesixty.com */ /* ============================================================ tokens.css — Brand identity tokens + @font-face declarations The ONLY file that defines CSS custom properties. Palette + font mapping per BLUEPRINTS/00-FOUNDATION.md §2. ============================================================ */ /* --- @font-face declarations (FIRST — before tokens, before anything. Parse order = discovery order: the sooner the browser sees these, the sooner it can begin the font fetch.) --- */ /* Jost — display font. Two weights only: 500 (headlines/body-of-display), 600 (wordmark/bold emphasis). Self-hosted, subset to 112 glyphs actually used (~6KB each). Built 4 Aug 2026 with fontTools varLib.instancer + subset — rebuild with the same pipeline if new glyphs are introduced. */ @font-face { font-family: 'Jost'; src: url('../fonts/jost-500.woff2') format('woff2'); font-weight: 500; font-style: normal; /* font-display: TEST BOTH swap AND optional against the actual built subset file size before locking (00-FOUNDATION.md §2b / §11 item 2). optional achieved CLS-0 on the current homepage with an ~8KB subset — that is not a licence to assume it here without testing this subset. */ font-display: swap; } @font-face { font-family: 'Jost'; src: url('../fonts/jost-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; /* TEST swap vs optional — see note above */ } /* --- Custom properties --- */ :root { /* ---- CANONICAL 12 WEST NAMES HOLD THE VALUES (A5, inverted 6 Aug 2026) ---- The 73 canonical names are the portable API: the same names exist in every 12 West site, which is what lets a component move between them. Previously --chalk/--graphite/... held the hexes and the canonical names aliased THEM, so every component here was unportable — --chalk does not exist elsewhere. Inverted: canonical names carry the value, brand names alias them. */ --bg-light: #F7F5F2; /* Chalk — 60% base, calm reading zones */ --bg-dark: #14201F; /* Graphite — 30% structure, assertive zones */ --bg-muted: #5C6A69; /* Slate — aside band */ --brand-accent: #E2511B; /* Torch — 10% display/UI/borders. NEVER text. */ --brand-primary: #B23C10;/* Torch Deep — LIGHT-GROUND ONLY, text & CTA fill, 5.44:1 on chalk */ /* ---- Brand-name aliases — readability only, NOT the portable API ---- Safe to use in this site's CSS; a component using them is site-local. */ --chalk: var(--bg-light); --graphite: var(--bg-dark); --slate: var(--bg-muted); --torch: var(--brand-accent); --torch-deep: var(--brand-primary); --torch-deepest: #9A340E; /* pressed/hover state for torch-deep CTAs — one step darker than --torch-deep. Site-wide CTA hover shade. */ /* ---- Dark-ground text counterparts (RULED Steve, 5 Aug 2026) ---- --torch and --slate each served as BOTH the light- and dark-ground value for their role. That cannot work: the two grounds need opposite luminance, so no single value clears 4.5:1 on both. --torch-deep already solved the light half for the accent; these two solve the dark half for accent and muted. Lighthouse read Accessibility 95 with contrast as the sole failure. ⚠️ DARK ZONES ONLY. On chalk these FAIL (#F26B2C 2.79:1, #94A3A0 2.41:1). Gate A6b enforces it. On light grounds use --torch-deep / --slate. */ --torch-bright: #F26B2C; /* DARK-GROUND ONLY — accent text, 5.50:1 on graphite, 2.79:1 on chalk ✗ */ --slate-light: #94A3A0; /* DARK-GROUND ONLY — muted text, 6.37:1 on graphite, 2.41:1 on chalk ✗ */ /* ---- Template token → sitethreesixty value mapping ---- Kept so containers/elements/zones written against the template's original token NAMES keep working — only the VALUES repoint. */ --brand-secondary: var(--brand-primary); --brand-highlight: var(--brand-accent); /* ---- Backgrounds ---- */ --bg-accent: var(--brand-primary); /* ---- Text colours ---- */ --text-on-dark: var(--bg-light); --text-on-light: var(--bg-dark); --text-muted-dark: var(--slate-light); /* muted text ON dark — 6.37:1 */ --text-muted-light: var(--bg-muted); /* muted text ON light — 5.19:1, already passing */ /* ---- Locked neutrals ---- Names stay (template contract), values repoint to Chalk/Graphite. Pure #FFFFFF / #000000 must NEVER appear anywhere in this codebase — these lines are what prevent that at the token level. */ --black: var(--bg-dark); --black-soft: var(--bg-dark); --white: var(--bg-light); --white-off: var(--bg-light); --grey-darkest: #1c2827; /* Graphite-tinted dark-zone card surface, off the true neutral */ --grey-dark: #2a3634; --grey-mid: var(--bg-muted); --grey-light: #d8d4cd; --grey-lightest: #efece7; /* also the Zone Muted background value, below */ /* ---- Zone colour scheme values (zones.css consumes these) ---- .zone-dark = Graphite · .zone-light = Chalk · .zone-accent = Slate · .zone-muted = #efece7 (00-FOUNDATION.md §2a) */ --zone-dark-bg: var(--graphite); --zone-dark-fg: var(--chalk); --zone-light-bg: var(--chalk); --zone-light-fg: var(--graphite); --zone-accent-bg: var(--slate); --zone-accent-fg: var(--chalk); --zone-muted-bg: #efece7; --zone-muted-fg: var(--graphite); /* ---- Font families ---- */ /* Display — Jost, headings/wordmark/UI-branding ONLY. Never body copy. */ --font-display: 'Jost', 'Century Gothic', 'Futura', -apple-system, BlinkMacSystemFont, sans-serif; --font-heading: var(--font-display); /* template compatibility alias */ /* Body — system sans, zero download. No custom body font file. */ --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Mono — system stack, NO custom mono @font-face under any circumstance (00-FOUNDATION.md §2b, decided). Eyebrows, bearings, coordinates, data readouts. */ --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* ---- Font sizes (clamp scale) ---- NOTE: template's original size token was named --font-display, which collides with the family token of the same name used across the mockups. Renamed to --font-display-size; --font-h1 is used for the largest hero headings elsewhere in this system. */ --font-display-size: clamp(3rem, 6vw, 6rem); --font-h1: clamp(2rem, 5vw, 4.5rem); --font-h2: clamp(1.5rem, 3.5vw, 3rem); --font-h3: clamp(1.25rem, 2.5vw, 2rem); --font-h4: clamp(1.1rem, 2vw, 1.5rem); --font-body-size: clamp(1rem, 1.2vw, 1.25rem); --font-small: clamp(0.9rem, 1vw, 1rem); /* bumped for legibility (Steve, 2 Aug) */ --font-caption: clamp(0.82rem, 0.95vw, 0.92rem); /* bumped — mono captions were too small to read */ /* ---- Font weights ---- Jost ships 500/600 only. Body/mono use system-stack weights. */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; /* Jost 600 (subset weight) — used for the hero wordmark brand statement */ --weight-bold: 600; /* ---- Line heights ---- */ --leading-tight: 1.2; --leading-normal: 1.5; --leading-loose: 1.8; /* ---- Letter spacing ---- */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.05em; --tracking-caps: 0.1em; --tracking-mono: 0.11em; /* eyebrow / bearing / coordinate mono tracking — eased from .16 for legibility (Steve, 2 Aug: wide tracking on tiny mono was hard to read) */ /* ---- Spacing scale ---- */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 32px; --space-xl: 64px; --space-2xl: 128px; /* ---- Border radius ---- */ --radius-none: 0; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-full: 9999px; /* ---- Border widths ---- */ --border-thin: 1px; --border-medium: 2px; --border-thick: 4px; /* ---- Shadows (Graphite-based, never pure black) ---- */ --shadow-sm: 0 1px 3px rgba(20, 32, 31, 0.08); --shadow-md: 0 4px 12px rgba(20, 32, 31, 0.1); --shadow-lg: 0 8px 30px rgba(20, 32, 31, 0.12); --shadow-glow: 0 0 20px rgba(226, 81, 27, 0.25); /* ---- Transitions ---- */ --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --speed-fast: 150ms; --speed-normal: 300ms; --speed-slow: 500ms; /* ---- Z-index scale ---- */ --z-base: 1; --z-above: 10; --z-modal: 100; --z-header: 500; --z-overlay: 1000; /* ---- Opacity ---- */ --opacity-subtle: 0.1; --opacity-light: 0.3; --opacity-half: 0.5; --opacity-heavy: 0.8; /* ---- Grid config ---- */ --grid-columns: 12; --container-pad: 24px; --zone-pad: clamp(104px, 9vw, 128px); /* between-zone rhythm. Floor governs MOBILE (104px → ~208px between colour bands, Steve 3 Aug — 80px felt tight); 9vw handles tablet; 128px ceiling governs desktop. Doubled from 64px on 2 Aug. */ /* ============================================================ ⭐ DOCUMENTED TOKEN EXCEPTIONS — dated owner approvals A6 forbids new tokens. These are the only approved additions. ⛔ tokens.css is READ-ONLY: only the owner may add to this list. · --torch-bright / --slate-light (Steve, 5 Aug 2026, re-confirmed 6 Aug) DARK-GROUND text counterparts. The spec's contrast table only measures foregrounds on Chalk, so it never answered "what is muted text on a dark ground?" — Slate on Graphite is 2.41:1, a fail. Fenced by gate A6b. · --torch-deepest (Steve, 6 Aug 2026) CTA pressed/hover fill. The Colour & Type Specification defines five colours and NO interaction states; every button needs a hover. A genuine GAP in the spec, filled by the owner. Chalk on it = 6.72:1 — better than the resting state's 5.44:1. HOVER/PRESSED ONLY, never text or surfaces. · --instrument-* (8) (00-FOUNDATION §2c) Stroke widths, tick opacities and the shared settle easing. They must live in tokens.css (critical) or an above-fold instrument's stroke resolves to nothing on first paint (the CurlyTail 1,080ms regression). Motion + geometry, not colour. · --trade-instrument-x / -y (A4 exception pattern, 6 Aug 2026) NOT defined here — set at runtime by js/trade-hero.js via style.setProperty(). Same approved pattern as --transfer-angle. This is the ONLY legal use of var(--x, fallback). ============================================================ */ /* ---- Instrument tokens (gauges, dials, Solari) ---- 00-FOUNDATION.md §2c — must live here (critical), never in a deferred file, or an above-the-fold instrument's stroke/fill resolves to nothing on first paint and recalculates when the deferred file loads (the CurlyTail 1,080ms regression). Home ships its hero instrument above the fold, so this is non-optional. */ --instrument-track-opacity: .18; /* unfilled arc/track */ --instrument-empty-opacity: .12; /* empty segment (e.g. fuel gauge above the needle) */ --instrument-tick-opacity: .3; /* minor tick marks */ --instrument-tick-major-opacity: .55; /* major tick marks */ --instrument-stroke-width: 10; /* gauge arc stroke */ --instrument-needle-width: 3.5; --instrument-settle-duration: 2.5s; --instrument-settle-ease: cubic-bezier(.3, 1.1, .4, 1); /* the shared "settle" easing */ } /* https://www.sitethreesixty.com */