/* =========================================================================== tokens-stl.css — St. Louis Roofing & Exteriors. THE ONLY PLACE A ST. LOUIS ROOF COLOUR IS DEFINED. base.css references `var(--token)` and never a literal, so this file is the whole of the brand's palette and a palette change is a one-file change. Every token named here is also defined, with the same name and the same meaning, in tokens-repairit.css — that is the contract base.css is written against. Every raw colour comes from the brand's own artwork, or is a DECLARED design choice / DOCUMENTED derivation, and says which it is. The prototype's #202a86, #c8181d, #b7791f and #c17a00 are DROPPED: none of them appears in any St. Louis Roof asset. There is no gold in this brand's artwork. CONTRAST ALLOW-LIST (measured, sRGB, WCAG 2.1; ratios recomputed 2026-09-24). Anything not on this list is banned, and the contrast spec fails the build: #131315 on #FFFFFF 18.56:1 all text #131315 on #F4F6FA 17.15:1 all text #131315 on #E8ECF4 15.67:1 all text #5E5E63 on #FFFFFF 6.45:1 all text (secondary copy) #5E5E63 on #F4F6FA 5.96:1 all text #5E5E63 on #E8ECF4 5.45:1 all text #2B2877 on #FFFFFF 12.56:1 all text, links, UI #2B2877 on #F4F6FA 11.60:1 all text, links, UI #2B2877 on #E8ECF4 10.60:1 all text, links, UI #142F54 on #FFFFFF 13.42:1 all text (section headings) #142F54 on #F4F6FA 12.41:1 all text #FFFFFF on #2B2877 12.56:1 all text, button labels #FFFFFF on #142F54 13.42:1 all text #FFFFFF on #0E2340 15.75:1 all text #C3CCDA on #142F54 8.29:1 all text on the dark panel #C3CCDA on #0E2340 9.73:1 all text on the dark panel #10BBEC on #142F54 5.97:1 all text ON THE DARK PANEL ONLY #10BBEC on #0E2340 7.01:1 all text ON THE DARK PANEL ONLY #142F54 on #10BBEC 5.97:1 button label on the cyan panel button #89898D on #FFFFFF 3.48:1 UI borders and LARGE text only, never body #10BBEC on #FFFFFF 2.25:1 BANNED — never text, never a border, never a rule on a light surface Consequences encoded below: the cyan is a panel-only colour; the logo grey is never small text (a darkened derivation carries secondary copy instead); and the primary button on a dark panel flips to cyan-on-navy rather than keeping an indigo fill that would sit almost invisibly on the navy. =========================================================================== */ :root { /* --- Raw brand values -------------------------------------------------- Sampled from the artwork (03 §6.3, evidence/data/asset_scripts/ logo_colors.txt) unless marked otherwise. */ --stl-indigo: #2B2877; /* logo indigo */ --stl-navy: #142F54; /* yard-sign navy */ --stl-cyan: #10BBEC; /* yard-sign cyan — dark-panel surfaces only */ --stl-ink: #131315; /* logo black */ --stl-grey: #89898D; /* logo grey — UI borders and large text only */ --stl-white: #FFFFFF; /* Derivations and declared choices. Each moves lightness only, so the page still reads as one palette. */ --stl-navy-deep: #0E2340; /* derived: yard-sign navy darkened, for the hero/CTA gradient. White 15.75:1. */ --stl-grey-text: #5E5E63; /* derived: logo grey darkened until 16px text passes AA on all three light surfaces. */ --stl-on-navy: #C3CCDA; /* derived: a cool tint of the navy for secondary copy on the dark panel. 8.29:1 on navy. */ --stl-tint: #F4F6FA; /* declared design choice: neutral cool tint, not sampled from the artwork. */ --stl-tint-deep: #E8ECF4; /* declared design choice: one step deeper, for the proof band and inset panels. */ /* Translucent values, so a lift over the dark panel works whatever the gradient is doing underneath it. */ --stl-lift: rgba(255, 255, 255, 0.08); --stl-lift-rule: rgba(255, 255, 255, 0.20); /* --- Type ------------------------------------------------------------- */ --font-body: 'Hanken Grotesk Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-display: var(--font-body); /* STL is the heavy grotesque of the two: tighter tracking, wider-tracked uppercase labels, squarer geometry. Package 1 ships one family for both brands; the Repair-It display serif is a package-2 token change. */ --display-weight: 800; --display-case: uppercase; --display-tracking: -0.02em; --eyebrow-tracking: 0.14em; /* --- Surfaces and ink ------------------------------------------------- */ --page-bg: var(--stl-white); --surface: var(--stl-tint); --surface-deep: var(--stl-tint-deep); --ink: var(--stl-ink); --ink-soft: var(--stl-grey-text); /* --- Rules and dividers ----------------------------------------------- */ /* 3.48:1 on white clears the 3:1 floor for a meaningful UI boundary; it is never used as text. */ --rule: var(--stl-grey); --rule-strong: var(--stl-indigo); --rule-soft: var(--stl-tint-deep); --muted-decorative: var(--stl-grey); --accent-bar: var(--stl-indigo); /* decorative bar on LIGHT surfaces. Not the cyan: 2.25:1 on white. */ /* --- Links and actions ------------------------------------------------ */ --link: var(--stl-indigo); --link-hover: var(--stl-navy); --action-bg: var(--stl-indigo); --action-fg: var(--stl-white); --action-bg-hover: var(--stl-navy); /* --- The dark panel: hero, CTA band, footer --------------------------- */ --panel-bg: var(--stl-navy); --panel-bg-deep: var(--stl-navy-deep); --panel-wash: linear-gradient(158deg, var(--stl-navy) 0%, var(--stl-navy-deep) 100%); --panel-fg: var(--stl-white); --panel-fg-soft: var(--stl-on-navy); --panel-fine-print: #9a9a9a; /* owner-approved trade-name line (2026-09-28); 4.77:1 on the navy */ --panel-rule: var(--stl-cyan); --panel-eyebrow: var(--stl-cyan); --panel-surface: var(--stl-lift); --panel-surface-rule: var(--stl-lift-rule); /* The primary action inverts on the dark panel. An indigo fill on navy is a 3.7:1 surface difference and reads as a hole; cyan with a navy label is 5.97:1 both ways and is the yard sign's own pairing. */ --panel-action-bg: var(--stl-cyan); --panel-action-fg: var(--stl-navy); --panel-action-bg-hover: var(--stl-white); --panel-action-fg-hover: var(--stl-navy); --panel-action-border: var(--stl-cyan); /* --- Display and heading colour --------------------------------------- */ /* --display-color is applied by base.css only to the header lock-up (24px, weight 800). --heading-color only to section headings, which base.css guarantees are >= 22px at weight 800 (WCAG "large text"). */ --display-color: var(--stl-indigo); --heading-color: var(--stl-navy); /* --- Focus ------------------------------------------------------------ */ --focus-ring: var(--stl-indigo); --focus-ring-on-panel: var(--stl-cyan); /* --- Fields ----------------------------------------------------------- */ --field-bg: var(--stl-white); --field-border: var(--stl-grey); --field-border-focus: var(--stl-indigo); --field-ring: rgba(43, 40, 119, 0.22); /* --- Errors ----------------------------------------------------------- */ /* An error is a border, a heading and words — never colour on its own. */ --error-bg: var(--stl-tint); --error-fg: var(--stl-ink); --error-rule: var(--stl-indigo); /* --- Small parts ------------------------------------------------------ */ --marker-bg: var(--stl-indigo); /* step numbers, list ticks */ --marker-fg: var(--stl-white); --chip-bg: var(--stl-white); --chip-fg: var(--stl-ink); --chip-rule: var(--stl-grey); /* --- Geometry: the second-strongest brand signal after colour --------- STL is square and engineered. Repair-It is rounded. */ --radius-sm: 0.125rem; --radius-md: 0.25rem; --radius-lg: 0.5rem; --btn-radius: 0.25rem; --chip-radius: 0.125rem; --marker-radius: 0.125rem; --card-border-w: 1px; --accent-bar-w: 0.25rem; --accent-bar-radius: 0; /* --- Elevation -------------------------------------------------------- */ --card-shadow: 0 1px 2px rgba(19, 19, 21, 0.06); --card-shadow-hover: 0 6px 18px rgba(20, 47, 84, 0.16); --header-shadow: 0 1px 0 rgba(19, 19, 21, 0.07); --bar-shadow: 0 -2px 12px rgba(19, 19, 21, 0.18); --btn-shadow: 0 1px 2px rgba(19, 19, 21, 0.10); }