/* =========================================================================== tokens-repairit.css — Repair It Roofing. THE ONLY PLACE A REPAIR-IT COLOUR IS DEFINED. It implements exactly the same token names as tokens-stl.css — that shared contract is what lets base.css carry no brand selector and no brand conditional. Three values are documented DERIVATIONS rather than samples, because the logo red is not contrast-safe for small white text and the logo taupe is not contrast-safe as a border or as text. Every derivation keeps the logo's hue and moves lightness only, so the page still reads as one brand: --ri-action #C4271F logo red darkened until white 14-18px text on it reaches 5.74:1. EVERY button fill carrying small white text uses this, never the logo red. --ri-action-deep #A11F19 the same hue darkened again, for hover. 7.71:1. --ri-border #9A8B7E logo taupe darkened until it reaches 3.30:1 on white and 3.17:1 on cream, so a field border is a boundary a low-vision visitor can actually see. Never used as text. --ri-taupe-text #655B51 logo taupe darkened until 16px text passes AA on all three light surfaces. Carries secondary copy. CONTRAST ALLOW-LIST (measured, sRGB, WCAG 2.1; ratios recomputed 2026-09-24). Anything not listed is banned: #18181B on #FFFFFF 17.72:1 all text #18181B on #FFFAF1 17.04:1 all text #18181B on #F6EEE1 15.38:1 all text #655B51 on #FFFFFF 6.63:1 all text (secondary copy) #655B51 on #FFFAF1 6.37:1 all text #655B51 on #F6EEE1 5.76:1 all text #C4271F on #FFFFFF 5.74:1 all text, links #C4271F on #FFFAF1 5.52:1 all text, links #C4271F on #F6EEE1 4.99:1 all text, links #A11F19 on #FFFFFF 7.71:1 all text (hover) #A11F19 on #FFFAF1 7.41:1 all text (hover) #FFFFFF on #C4271F 5.74:1 all text, button labels #FFFFFF on #A11F19 7.71:1 all text, button labels #FFFAF1 on #18181B 17.04:1 all text #FFFAF1 on #0F0F11 18.42:1 all text #D8CFC4 on #18181B 11.51:1 all text on the dark panel #D8CFC4 on #0F0F11 12.44:1 all text on the dark panel #FFFFFF on #E5322B 4.35:1 LARGE text only (>= 24px / >= 18.66px bold) #E5322B on #FFFAF1 4.19:1 LARGE text and UI borders only #E5322B on #FFFFFF 4.35:1 LARGE text and UI borders only #E5322B on #18181B 4.07:1 UI borders and LARGE text only — which is why the panel eyebrow is cream, not red #9A8B7E on #FFFFFF 3.30:1 UI borders only, never text #AEA199 on anything 2.51:1 BANNED as text Same-hue rule: the logo and large display type use #E5322B; every button fill uses #C4271F. Both are the same hue family, so the page never reads as two different reds. Package 1 ships ONE font family for both brands, so the brand distinction is carried by colour, surface temperature (warm cream against STL's cool grey), geometry (rounded against STL's square), rule treatment and the symptom-picker structure. The Repair-It display serif is an open owner decision and lands as a change to this file plus one woff2 — no template will need to move. =========================================================================== */ :root { /* --- Raw brand values ------------------------------------------------- */ --ri-red: #E5322B; /* logo red — large display type and rules only */ --ri-charcoal: #18181B; /* declared design choice: neutral charcoal */ --ri-taupe: #AEA199; /* logo taupe — decorative fills only, never text */ --ri-white: #FFFFFF; /* Derivations and declared choices. */ --ri-action: #C4271F; /* derived: logo red for small white text */ --ri-action-deep: #A11F19; /* derived: hover */ --ri-border: #9A8B7E; /* derived: taupe darkened for visible borders */ --ri-taupe-text: #655B51; /* derived: taupe darkened for secondary copy */ --ri-charcoal-deep: #0F0F11;/* derived: charcoal darkened, for the hero and CTA gradient. Cream 18.42:1. */ --ri-on-charcoal: #D8CFC4; /* derived: a warm tint of the taupe for secondary copy on the dark panel. 11.51:1. */ --ri-cream: #FFFAF1; /* declared design choice: warm cream surface */ --ri-cream-deep: #F6EEE1; /* declared design choice: one step deeper, for the proof band and inset panels. */ --ri-lift: rgba(255, 250, 241, 0.07); --ri-lift-rule: rgba(255, 250, 241, 0.20); /* --- Type ------------------------------------------------------------- */ --font-body: 'Hanken Grotesk Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-display: var(--font-body); /* Looser tracking than STL on both the display face and the uppercase labels: the warmer, plainer voice of the two. */ --display-weight: 800; --display-case: uppercase; --display-tracking: -0.01em; --eyebrow-tracking: 0.06em; /* --- Surfaces and ink ------------------------------------------------- */ --page-bg: var(--ri-white); --surface: var(--ri-cream); --surface-deep: var(--ri-cream-deep); --ink: var(--ri-charcoal); --ink-soft: var(--ri-taupe-text); /* --- Rules and dividers ----------------------------------------------- */ --rule: var(--ri-border); --rule-strong: var(--ri-action); --rule-soft: var(--ri-cream-deep); --muted-decorative: var(--ri-taupe); --accent-bar: var(--ri-red); /* decorative bar on LIGHT surfaces: 4.35:1 on white, a UI graphic, not text */ /* --- Links and actions ------------------------------------------------ */ --link: var(--ri-action); --link-hover: var(--ri-action-deep); --action-bg: var(--ri-action); --action-fg: var(--ri-white); --action-bg-hover: var(--ri-action-deep); /* --- The dark panel: hero, CTA band, footer --------------------------- */ --panel-bg: var(--ri-charcoal); --panel-bg-deep: var(--ri-charcoal-deep); --panel-wash: linear-gradient(158deg, var(--ri-charcoal) 0%, var(--ri-charcoal-deep) 100%); --panel-fg: var(--ri-cream); --panel-fg-soft: var(--ri-on-charcoal); --panel-fine-print: #9a9a9a; /* same vocabulary as STL; unused until Repair-It has an approved line */ --panel-rule: var(--ri-red); /* Cream, not red: #E5322B on charcoal is 4.07:1, below the 4.5:1 floor for the small uppercase text an eyebrow actually is. */ --panel-eyebrow: var(--ri-cream); --panel-surface: var(--ri-lift); --panel-surface-rule: var(--ri-lift-rule); /* The action red keeps its fill on the dark panel — white on it is 5.74:1 — and gains a logo-red border so the button's edge is a visible 4.07:1 boundary against the charcoal rather than a 2.9:1 smudge. */ --panel-action-bg: var(--ri-action); --panel-action-fg: var(--ri-white); --panel-action-bg-hover: var(--ri-action-deep); --panel-action-fg-hover: var(--ri-white); --panel-action-border: var(--ri-red); /* --- Display and heading colour --------------------------------------- */ /* Both of these are the logo red, which is contrast-safe for LARGE text only. base.css applies --display-color solely to the header lock-up (24px, weight 800) and --heading-color solely to section headings, which it guarantees are >= 22px at weight 800. Nothing smaller may use either token. */ --display-color: var(--ri-red); --heading-color: var(--ri-red); /* --- Focus ------------------------------------------------------------ */ --focus-ring: var(--ri-action); --focus-ring-on-panel: var(--ri-cream); /* --- Fields ----------------------------------------------------------- */ --field-bg: var(--ri-white); --field-border: var(--ri-border); --field-border-focus: var(--ri-action); --field-ring: rgba(196, 39, 31, 0.22); /* --- Errors ----------------------------------------------------------- */ --error-bg: var(--ri-cream); --error-fg: var(--ri-charcoal); --error-rule: var(--ri-action); /* --- Small parts ------------------------------------------------------ */ --marker-bg: var(--ri-action); --marker-fg: var(--ri-white); --chip-bg: var(--ri-white); --chip-fg: var(--ri-charcoal); --chip-rule: var(--ri-border); /* --- Geometry: the second-strongest brand signal after colour --------- Repair-It is rounded and soft where STL is square and engineered. */ --radius-sm: 0.375rem; --radius-md: 0.625rem; --radius-lg: 1.125rem; --btn-radius: 0.625rem; --chip-radius: 999px; --marker-radius: 999px; --card-border-w: 1px; --accent-bar-w: 0.375rem; --accent-bar-radius: 999px; /* --- Elevation -------------------------------------------------------- */ --card-shadow: 0 1px 2px rgba(24, 24, 27, 0.07); --card-shadow-hover: 0 10px 24px rgba(24, 24, 27, 0.16); --header-shadow: 0 1px 0 rgba(24, 24, 27, 0.08); --bar-shadow: 0 -2px 12px rgba(24, 24, 27, 0.20); --btn-shadow: 0 1px 2px rgba(24, 24, 27, 0.10); }