/* ============================================================================ PRIME REFINE GROUP - design tokens ---------------------------------------------------------------------------- THIS IS THE THIRD SITE IN A FAMILY OF THREE, AND THE FIRST TWO LOOK ALIKE. Backup Logistics and Joseph Services were meant to diverge and did not, because only the TOKENS were changed - the skeleton stayed identical. Both are: full-bleed photograph hero with the headline on it, a proof strip under it, stacked photo-and-text rows, a card grid, the same four-column footer. Repaint that and you still recognise it in a screenshot from ten feet away. So this file changes the palette AND site.css changes the structure. The divergence is recorded here so nobody later "tidies" it back into a match: axis Backup Logistics Joseph Services PRIME REFINE ---------- -------------------- ------------------- ------------------ ground warm paper, light cool steel, dark BONE + full-bleed INK panels: the page alternates two grounds accent #d24413 orange #c41240 crimson #1B4DFF COBALT (warm, red family) (warm, red family) (cool. not red.) signal - - #C8FF2E acid, used ONLY for live status, never for decoration type Archivo Barlow Condensed Space Grotesk + Space Mono radius 4px / 8px 0 PILL on anything pressable, 2px on panels motion fade-up + marquee directional wipe tracking collapse + spring rise hero photo, full bleed photo, full bleed TYPE-LED SPLIT. No hero photo. THE ACCENT IS THE EASY PART. Both sister sites are red-family, so any cool hue separates them instantly. What actually stops this reading as the same website is the two-tone ground and the type-led hero, and those live in site.css. Changing tokens alone is exactly the mistake that made the second site a repaint of the first. EVERY CONTRAST FIGURE BELOW WAS COMPUTED, NOT ESTIMATED. ========================================================================= */ :root { color-scheme: light dark; /* ---- ground ---------------------------------------------------------- LIGHT IS THE DEFAULT here, the reverse of Joseph. But the page is not one flat colour: whole sections invert to --ink at full bleed, and that alternation is the site's signature. Bone is deliberately COOL-neutral so it cannot be confused with Backup's warm paper, which is visibly creamy beside it. */ --ground: #F1F2ED; /* page */ --panel: #FFFFFF; /* raised: cards, forms, the board */ --sunk: #E3E5DD; /* wells and stripes */ --paper: #F1F2ED; /* alias: shared components ask for this */ --surface: #FFFFFF; --surface-sunk: #E3E5DD; /* ---- ink ------------------------------------------------------------- Measured against --ground AND --panel, because text sits on both and tuning against one alone is how a caption fails on the other. THIS IS THE WHOLE REASON both figures are listed: --ink-faint was first set to #6E767F, which measures 4.60 on the white panel and looks fine there, and 4.09 on the bone ground - a FAIL that only the second column catches. ink 16.26 on ground / 18.29 on panel AAA ink-soft 6.02 / 6.77 AA ink-faint 5.33 / 6.00 / 4.72 on --sunk AA (captions only) THREE figures for ink-faint, not two: it is used on the SUNK surface as well (.faint, .record-note, .shot-note, .doc-meta), where #626A73 measured 4.31 and failed while both other columns passed. */ --ink: #12151A; --ink-soft: #545C66; --ink-faint: #5C646D; --rule: #D6D8D0; --rule-strong: #B2B6AB; /* ---- accent ---------------------------------------------------------- TWO values and they are NOT interchangeable. --accent is the FILL. White on it passes AA. --accent-ink is the same blue darkened for TEXT on the bone ground. Using the fill as body copy is the specific mistake this comment exists to prevent - the two blues side by side read as an error. */ --accent: #1B4DFF; --accent-press: #0F35C4; --accent-ink: #143FD1; --accent-wash: #E8EDFF; --on-accent: #FFFFFF; /* ---- signal ---------------------------------------------------------- Acid lime with exactly ONE job: marking something that is live right now - the status dot and the board's active row. FILL ONLY, and only on ink. On bone it measures 1.3 and is invisible; as body text anywhere it is unusable. It is not a second accent, and the moment it decorates something it has become one. */ --signal: #C8FF2E; --signal-ink: #12151A; --good: #0F8A4F; --bad: #C4321F; /* ---- type ------------------------------------------------------------ Space Grotesk: a grotesque with drawn, mechanical terminals and a distinctly odd lowercase g and R. Recognisable in a way neither Archivo (deliberately neutral) nor Barlow Condensed (athletic, narrow) is, which is the point. Space Mono is its sibling, so figures and display come from one family - and it is neither JetBrains Mono nor IBM Plex Mono, which the two sister sites already use. */ --font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Space Grotesk is WIDER than Barlow Condensed at the same size, so display runs smaller here than on Joseph and tracking runs NEGATIVE where that site runs strongly positive. Both differences are visible without measuring, which is the test. */ --t-display: clamp(2.6rem, 1.5rem + 4.6vw, 5.5rem); --t-hero: clamp(2.3rem, 1.4rem + 3.8vw, 4.5rem); --t-h1: clamp(2rem, 1.35rem + 2.8vw, 3.4rem); --t-h2: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem); --t-h3: clamp(1.2rem, 1.08rem + 0.6vw, 1.5rem); --t-lead: clamp(1.05rem, 1rem + 0.4vw, 1.3rem); --t-body: 1.0625rem; --t-small: 0.9375rem; --t-micro: 0.8125rem; --track-display: -.035em; /* tight. Joseph tracks +.01, Backup near 0 */ --track-tight: -.02em; --track-snug: -.01em; --track-wide: .14em; --lh-display: 0.95; --lh-head: 1.08; --lh-body: 1.62; /* ---- space ----------------------------------------------------------- VISUAL_DENSITY 4. Airier than Joseph's 5: a two-tone page needs the panels to breathe or the inversions start fighting each other. */ --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4.5rem; --s9: 7rem; --s10: 10rem; /* ---- shape ----------------------------------------------------------- PILL on anything pressable, 2px on anything that holds content. Backup is 4/8, Joseph is 0. A full-radius button beside a near-square panel is the fastest way to tell this site from those two at a glance, and the rule is simple enough that there is nothing to get wrong: if you can press it, it is round. */ --r: 2px; --r-lg: 4px; --r-pill: 999px; /* ---- motion ---------------------------------------------------------- A spring with a small overshoot. Backup eases out and floats to a halt; Joseph is mechanical and stops flat. This arrives, overshoots slightly, and settles - so movement has weight rather than smoothness or snap. */ --ease: cubic-bezier(.22, 1.12, .36, 1); --ease-out: cubic-bezier(.33, 1, .68, 1); --fast: 150ms; --med: 300ms; --slow: 560ms; /* ---- photography ----------------------------------------------------- Photographs are SECONDARY here - there is no hero photo. They sit inside panels rather than under type, so the scrim is lighter than either sister site needs and the frame is a real border rather than a hairline. */ --scrim-rgb: 18, 21, 26; /* Raised from .52 on 2026-08-06. Measured per-pixel over js12/js14/js26 with the element filter applied, light theme fell to 3.09:1 on .lead over a photograph - the scrim system is documented as guaranteeing a floor, and it was not holding. Dark theme was already fine at .62. Re-measure whenever the photographs change; the floor is only meaningful if it is. */ --scrim-a: .66; --scrim-fade: clamp(3rem, 7vw, 5rem); --on-photo: #FFFFFF; --on-photo-soft: #E4E7EA; --photo-frame: #D6D8D0; --photo-radius: 4px; --photo-veil: .05; --photo-exposure: .98; --photo-grade: saturate(.98) contrast(1.02); /* ---- layout ---------------------------------------------------------- */ --wrap: 68rem; --wrap-wide: 84rem; --gutter: clamp(1.15rem, 4vw, 3rem); --measure: 62ch; --nav-h: 72px; --section-y: clamp(3.5rem, 2rem + 6vw, 7rem); --z-nav: 40; --lh-heading: 1.08; --lh-lead: 1.5; /* Elevation by RING, not by blur and not by lit edge. A hairline ring plus a very soft ambient shadow: on a bone ground a heavy drop shadow turns grey and muddy, and Joseph already owns the lit-edge treatment. */ --lift-2: 0 0 0 1px rgba(18,21,26,.07), 0 2px 8px rgba(18,21,26,.05); --lift-3: 0 0 0 1px rgba(18,21,26,.09), 0 12px 32px rgba(18,21,26,.09); --ok: #0A6E3E; --ok-wash: #E6F5ED; --warn: #7A5400; --warn-wash: #FBF1D9; --bad-wash: #FCEBE8; /* Text and rules for content sitting ON an ink panel, a cobalt fill or a photograph. Fixed on purpose: those surfaces are dark in BOTH themes. THE BUG THIS COMMENT EXISTS TO PREVENT SHIPPED TWICE on the sister sites - a fixed --on-dark value used over a surface that FOLLOWS the theme. If a surface flips with the theme, its text must come from --ink*, never from here. */ --on-dark: #FFFFFF; --on-dark-muted: #C9CED4; --on-dark-faint: #9BA3AC; --on-dark-rule: rgba(255,255,255,.16); --on-dark-rule-strong:rgba(255,255,255,.32); --on-dark-wash: rgba(255,255,255,.07); --on-dark-sheen: rgba(255,255,255,.14); /* The accent LIFTED for text on the fixed near-black band. --accent-ink is tuned for the bone ground and measures 2.32 on #12151A - a fail found by checking which components actually appear inside a .section-dark rather than by checking tokens in isolation. 8.03. */ --accent-on-dark: #8FA8FF; /* Numbered fieldset spine on the forms. */ --fs-gutter: clamp(2.35rem, 6vw, 3.4rem); --fs-mark: 1.7rem; --fs-pad: var(--s7); } /* ---- dark mode ---------------------------------------------------------- Light is the default. Someone who forces dark still gets a coherent page - and the ground goes to NEAR-BLACK rather than Joseph's blue steel, while the accent LIFTS, because #1B4DFF measures only 3.4 on black and fails as body text there. BOTH SELECTORS ARE REQUIRED. `:root[data-theme="dark"]` matches only after the visitor has used the toggle; on a machine set to dark with no stored preference it never fires at all. That exact omission shipped on Backup Logistics and left the footer at 1.12:1. ------------------------------------------------------------------------ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ground: #0B0C0F; --panel: #14161A; --sunk: #060709; --paper: #0B0C0F; --surface: #14161A; --surface-sunk: #060709; --ink: #F2F3F5; --ink-soft: #A8AFB8; --ink-faint: #828A93; --rule: #23262B; --rule-strong: #3A3E45; --accent-ink: #7C9BFF; --accent-wash: #0E1630; --photo-frame: #23262B; --scrim-a: .62; --ok: #3FBE83; --warn: #D9A227; --bad: #FF6B54; --ok-wash: #06180F; --warn-wash: #1D1606; --bad-wash: #1F0C09; --lift-2: 0 0 0 1px rgba(255,255,255,.07), 0 2px 8px rgba(0,0,0,.5); --lift-3: 0 0 0 1px rgba(255,255,255,.09), 0 12px 32px rgba(0,0,0,.6); } } :root[data-theme="dark"] { --ground: #0B0C0F; --panel: #14161A; --sunk: #060709; --paper: #0B0C0F; --surface: #14161A; --surface-sunk: #060709; --ink: #F2F3F5; --ink-soft: #A8AFB8; --ink-faint: #828A93; --rule: #23262B; --rule-strong: #3A3E45; --accent-ink: #7C9BFF; --accent-wash: #0E1630; --photo-frame: #23262B; --scrim-a: .62; --ok: #3FBE83; --warn: #D9A227; --bad: #FF6B54; --ok-wash: #06180F; --warn-wash: #1D1606; --bad-wash: #1F0C09; --lift-2: 0 0 0 1px rgba(255,255,255,.07), 0 2px 8px rgba(0,0,0,.5); --lift-3: 0 0 0 1px rgba(255,255,255,.09), 0 12px 32px rgba(0,0,0,.6); }