/* ========================================================================== tokens.css — the design brief, compiled (house-tech-spec §3). Source: runs/dependable-precision-mfg-inc-lodi-ca/brief.md §2–§6 (C3-approved, expanding the C2 winner, tiles/tile-a.html — editorial-modern). Every value below traces to the brief; nothing here was chosen at build time. ========================================================================== */ :root { /* --- Colour — brief §2.1. Steps 1 (real-world colour) and 2 (local character) are empty/waived (dossier §4.5, §4.8 Gap 2). Step 3 (family norms, the vertical's material truth) supplies arc-blue — playbook §6.1's own "blue-white" arc description, re-pitched as a controlled blueprint/cyanotype blue, distinct from Dentoni's navy (dossier §4.6, distance rule 4). One deliberate mode, light. --- */ --scheme: light; --color-bg: #FAF8F3; /* bone-white — page ground */ --color-surface: #F0ECE3; /* deeper bone — rail panel, footer, texture band */ --color-ink: #1C2024; /* near-black charcoal */ --color-ink-muted: #5B6168; /* muted slate — captions, facts labels, secondary body */ /* Banned-default exception: hue 207°, argued at brief §2.1 from playbook §6.1 (arc-blue, re-pitched as blueprint/cyanotype), re-verified at C2 (tiles/C2-DECISION.md). */ --color-accent: #2B6CA3; /* arc-blue */ --color-accent-ink: #FFFFFF; /* text/icons on accent fill */ /* The hero atmosphere's one gradient, as a token (brief §6): --color-accent at a low alpha, so no raw colour literal sits outside this file. */ --color-atmo-accent: rgba(43, 108, 163, 0.14); /* House-required structural colours (consumed by base.css) */ --color-border: #D8D2C4; /* DECORATIVE hairlines only — no contrast floor, a divider is not a control (brief §2.1 note). */ /* Control boundary, WCAG 1.4.11 (>=3:1 vs bg AND surface): brief §2.1 reuses --color-ink-muted (5.89:1 / 5.31:1) rather than a new hex. */ --color-border-strong: #5B6168; /* = --color-ink-muted */ --color-focus: #2B6CA3; /* = --color-accent, 5.24:1 vs bg / 4.72:1 vs surface (brief §2.2) */ /* No dark band anywhere on this site (brief §2.2: no text sits over a gradient, atmosphere layer or image at any width), so --color-focus-on-band stays unset per the skeleton's own convention. */ /* --color-focus-on-band: …; */ --color-selection-bg: #2B6CA3; --color-selection-ink: #FFFFFF; /* --- Typography — brief §2.3. Both SIL OFL 1.1, self-hosted, subset to the house range. Spectral ships 500 regular + 500 italic only — italic carries the H1 accent word and the process-list counters (the "emphasis role"); a font-STYLE, never named alongside font-weight in font-variation-settings (§8's `wght`-trap — no font-variation-settings is set anywhere on this site). --- */ --font-display: 'Spectral', 'Spectral Fallback', 'Spectral Fallback 2', Georgia, 'Iowan Old Style', serif; --font-body: 'Public Sans', 'Public Sans Fallback', ui-sans-serif, system-ui, sans-serif; --font-weight-body: 400; /* Public Sans — body copy, lead */ --font-weight-body-strong: 600; /* Public Sans — buttons, eyebrow, nav, h3, process/index labels */ --font-weight-display: 500; /* Spectral — h1/h2 and the italic accent word */ /* --- Fluid type scale — brief §2.4, computed at 375/768/1024/1440. --- */ --text-eyebrow: clamp(0.72rem, 0.4vw + 0.64rem, 0.8rem); --text-hero: clamp(2.25rem, 2vw + 1.75rem, 3.8rem); --text-h2: clamp(1.4rem, 1vw + 1.1rem, 2rem); --text-h3: clamp(1.05rem, 0.5vw + 0.95rem, 1.2rem); --text-lead: clamp(1rem, 0.4vw + 0.9rem, 1.2rem); --text-body: 1rem; /* 16px, fixed — brief §2.4 */ --text-small: 0.875rem; /* 14px, fixed — brief §2.4 */ --leading-tight: 1.05; /* hero H1 */ --leading-snug: 1.25; /* h2/h3 */ --leading-body: 1.6; /* body/lead paragraphs */ --tracking-tight: -0.02em; /* house default, unchanged — brief does not depart */ --tracking-normal: 0em; --tracking-wide: 0.14em; /* brief §2.3 override for the eyebrow (house default 0.08em) */ /* --- Space — house scale, unmodified. --- */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; --space-3xl: 9rem; /* Inter-section rhythm — brief §2.5: --section-gap = --space-xl (64px), fixed at every breakpoint. Largest gap on the page is the section boundary (128px, two abutting paddings); every intra-section gap (hero grid 48px, representative-section grid 64px, process/index row padding 16px) stays strictly below that. */ --section-gap: var(--space-xl); /* --- Layout — brief §2.5. --- */ --layout-container: 80rem; /* 1280px — brief §2.5 override of the house 72rem default */ --layout-measure: 62ch; /* house default, unchanged */ --layout-gutter: clamp(1.25rem, 4vw, 5rem); --layout-tap-min: 44px; /* Sticky-chrome constants (brief §3.1/§3.2/§4 rule 6): header ≈56px <1024px / ≈72px ≥1024px, plus the preview expiry bar and one hairline. The sidebar rail (§3.4) reads this same figure for its sticky offset. */ --layout-header-height: 3.5rem; /* 56px, <1024px */ --sticky-chrome: calc(var(--expiry-height, 0px) + var(--layout-header-height) + var(--border-hairline)); --control-height: 2.75rem; /* 44px — tap-min-matched control height */ /* Hero field: locked to the shipped raster's own ratio (tig-weld-bracket- joint-*.avif/webp, 1200x896 native) rather than an independent height, so object-fit: cover crops nothing at any width and the overlay's measured tick positions stay exact everywhere (brief §4 table — "never wider than its master" rule 4; precedent: triple-c-repair-texarkana-ar). */ --hero-field-ratio: 1200 / 896; --breakpoint-rail: 1024px; /* brief §3's sidebar-rail / desktop-composition threshold — literal px inside a @media condition is the one house-permitted escape hatch (base.css header note 1) */ --rail-column: 17.5rem; /* 280px — brief §4 table, ≥1024px sidebar- anchor rail column */ --index-num-width: 2.2rem; /* brief §2.3: process-list leading-zero counter's fixed column, 35.2px, never shrinks down to the 320px floor */ --capability-num-width: 2rem; /* capability-index numeral column */ /* Reading-measure caps (ch units) — the hero title's own 2-line wrap cap, the hero text column's desktop measure (brief §4 table: "hero text column: max-width: 34ch"), and the proof pull-quote's own measure (brief §4 table: 60ch, slightly narrower than running body text, a legitimate editorial convention). */ --hero-title-measure: 20ch; --hero-text-measure: 34ch; --pull-quote-measure: 60ch; /* Desktop cap on the capabilities divider image (brief §4 headroom check) — the 1200x1200 source ran 821px tall, uncapped. */ --divider-image-max-height: 22rem; --divider-image-secondary-max-width: 30rem; /* brief §4: slot 3 max 480px */ /* --- Radius / shadow / border — brief §2.5: 2px on buttons/controls only, --radius-none on every card/panel/image box, no uniform radius anywhere (design-rules §4 banned default). --- */ --radius-none: 0; --radius-sm: 2px; --radius-md: 2px; --radius-lg: 2px; --radius-pill: 2px; /* --shadow-none on every card; --shadow-sm ONLY on the sticky header once the page has scrolled past the hero (brief §2.5 — a functional affordance, not decoration). js/main.js toggles [data-scrolled] on via an IntersectionObserver on a sentinel at the hero's foot; with JS off the header simply never grows the shadow, which costs nothing (progressive enhancement, house-tech-spec §1). */ --shadow-none: none; --shadow-sm: 0 1px 2px rgb(28 32 36 / 0.08); --shadow-md: none; --shadow-lg: none; --border-hairline: 1px; --border-thick: 2px; --border-style: solid; /* --- Motion — brief §6. The reveal system is the house default (fade + 1.25rem rise, 320ms, ease-out, 90ms stagger). The signature — "the drawing holds true": two independent dimension-tick satellites drift on non-synchronised loops over the hero's atmosphere, plus a static dashed measurement line connecting them. Unchanged from Tile A, carried forward exactly (ref-001's satellite-float physics, adapted to a technical/ engineering subject per design-rules §0's "adapt the physics, never the subject"). --- */ --duration-fast: 140ms; --duration-base: 320ms; --duration-slow: 320ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --reveal-shift: 1.25rem; --reveal-stagger: 90ms; --loop-tick-a: 4.4s; /* brief §6: first satellite's period */ --loop-tick-b: 5.6s; /* brief §6: second satellite's period */ --delay-tick-b: 0.6s; /* brief §6: the stated 0.6s offset between them */ /* --- Z layers ------------------------------------------------------------ */ --z-base: 0; --z-header: 100; --z-nav-panel: 200; --z-skip-link: 300; } /* Brief §6 reduced-motion: the signature-move tokens freeze in place (both ticks and the dashed line hold still; the atmosphere, hero image and static bracket/bevel diagram remain) — base.css's kill switch already collapses --duration-* to ~0, which is sufficient here since the satellite drift and the header-shadow transition are the only timed things this file adds and both read --duration-fast/--duration-slow or the --loop-tick-* tokens directly in site.css's own reduced-motion block. */ /* -------------------------------------------------------------------------- @font-face — self-hosted woff2, SIL OFL 1.1 (assets/fonts/OFL.txt), subset to the house declared safe range (house-tech-spec §8), identical range on every face. COVERAGE GAP (house-tech-spec §8): all three faces lack U+2010-2012/2015 (both-lack-it case, inert by construction). Public Sans also lacks U+2032/2033 (prime), which both Spectral faces carry — a FIX only if ever rendered in two faces on one line. It is not: copy.md's foot/inch figures ("6' x 12'", 16" x 18"") use plain straight quotes (Basic Latin), never a curly prime. Flagged, not narrowed, since nothing on the page hits it. -------------------------------------------------------------------------- */ @font-face { font-family: 'Spectral'; src: url('../assets/fonts/spectral-500-latin.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AE, U+2122, U+00B0, U+00B7, U+00BF, U+00C0-00FF, U+2010-2015, U+2018-201A, U+201C-201E, U+2026, U+2032-2033; } @font-face { font-family: 'Spectral'; src: url('../assets/fonts/spectral-500-italic-latin.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AE, U+2122, U+00B0, U+00B7, U+00BF, U+00C0-00FF, U+2010-2015, U+2018-201A, U+201C-201E, U+2026, U+2032-2033; } @font-face { font-family: 'Public Sans'; src: url('../assets/fonts/public-sans-variable-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AE, U+2122, U+00B0, U+00B7, U+00BF, U+00C0-00FF, U+2010-2015, U+2018-201A, U+201C-201E, U+2026, U+2032-2033; } /* -------------------------------------------------------------------------- Metrics-matched fallbacks (house-tech-spec §7/§8) — MEASURED with scripts/font-metrics.mjs (Fontaine's method) against each donor's real installed instance, never guessed. TWO TIERS for both Spectral faces (house shape, triple-c-repair-texarkana- ar / auto-evolution-north-logan-ut): 'Spectral Fallback' (local Georgia) measured against Gelasio, Georgia's open metric twin, since Georgia itself is not inspectable on this build box (`fc-match Georgia` -> DejaVu Serif). 'Spectral Fallback 2' (local DejaVu Serif) is measured against the real, installed DejaVu Serif file — it has no italic instance, so the upright file is the donor for the italic override too — covering Linux/Android/CI. Public Sans needs one tier: `fc-match Arial` -> Liberation Sans on this box, Arial's own metric twin, measured per weight (400, 600) against static instances pinned out of the variable font with `fontTools.varLib.instancer` — the shipped file's own default named instance is Thin (wght 100), so measuring the raw file directly would read the wrong glyph widths for the 400/600 weights this site actually uses. -------------------------------------------------------------------------- */ @font-face { font-family: 'Spectral Fallback'; src: local('Georgia'); font-style: normal; font-weight: 500; size-adjust: 101.35%; ascent-override: 104.49%; descent-override: 45.68%; line-gap-override: 0%; } @font-face { font-family: 'Spectral Fallback'; src: local('Georgia'); font-style: italic; font-weight: 500; size-adjust: 91.22%; ascent-override: 116.1%; descent-override: 50.76%; line-gap-override: 0%; } @font-face { font-family: 'Spectral Fallback 2'; src: local('DejaVu Serif'); font-style: normal; font-weight: 500; size-adjust: 86.85%; ascent-override: 121.94%; descent-override: 53.31%; line-gap-override: 0%; } @font-face { font-family: 'Spectral Fallback 2'; src: local('DejaVu Serif'); font-style: italic; font-weight: 500; size-adjust: 79.8%; ascent-override: 132.71%; descent-override: 58.02%; line-gap-override: 0%; } @font-face { font-family: 'Public Sans Fallback'; src: local('Arial'), local('Liberation Sans'); font-weight: 400; font-style: normal; size-adjust: 105.21%; ascent-override: 90.3%; descent-override: 21.39%; line-gap-override: 0%; } @font-face { font-family: 'Public Sans Fallback'; src: local('Arial'), local('Liberation Sans'); font-weight: 600; font-style: normal; size-adjust: 106.44%; ascent-override: 89.25%; descent-override: 21.14%; line-gap-override: 0%; }