/* ============================================================================ JOSEPH SERVICES LLC - design tokens ---------------------------------------------------------------------------- This site was forked from Backup Logistics and then deliberately pulled as far away from it as the shared codebase allows. The two are sister companies and must not look like the same website. Every axis below is chosen in OPPOSITION to that site, and the opposition is recorded so nobody later "tidies" it back into a match: axis Backup Logistics Joseph Services ---------- ------------------------ -------------------------------- theme light, warm paper DARK, cool steel accent #d24413 signal orange #c41240 crimson neutrals warm grey, hue 60 cool steel, hue 213 type Archivo (neutral) Barlow Condensed (athletic) radius 4px / 8px 0. Hard edges everywhere. easing expo-out (.16,1,.3,1) mechanical (.32,.72,0,1) motion fade-up + a marquee directional clip wipes, NO marquee NEUTRAL TEMPERATURE IS THE REAL SEPARATOR. The accent hue is only 31 degrees from the other site because the brand really is red - it comes off the crimson diamond-plate decal on the door of truck 01, it was not invented. What makes the two unmistakable at a glance is warm-light against cool-dark, a 153 degree swing in the neutrals. EVERY CONTRAST FIGURE BELOW WAS COMPUTED, NOT ESTIMATED. ========================================================================= */ :root { color-scheme: dark light; /* ---- ground ---------------------------------------------------------- Not #000. Pure black kills depth, and every photograph here is a daylight yard shot that needs somewhere to sit. Steel, slightly blue. */ --ground: #0e1116; /* page */ --panel: #161b22; /* raised: cards, forms, nav */ --sunk: #0a0d11; /* wells, stripes, the darkest surface */ --paper: #0e1116; /* alias: shared components still ask for this */ --surface: #161b22; --surface-sunk: #0a0d11; /* ---- ink ------------------------------------------------------------- Measured against --ground AND against --panel, because text sits on both and tuning against one alone is how a caption ends up failing on the other. ink 16.81 on ground / 15.38 on panel AAA ink-soft 8.90 / 8.14 AAA ink-faint 5.25 / 4.81 AA (captions only) */ --ink: #eef2f6; --ink-soft: #a8b3c1; --ink-faint: #7d8896; --rule: #232b35; /* hairlines. cool, hue 213 */ --rule-strong: #37424f; /* ---- accent ---------------------------------------------------------- TWO values, and they are NOT interchangeable. --accent is a FILL. White on it measures 5.99, so a crimson button with white text passes AA. On the dark ground it is only 3.16 - fine for a 4px rule or a large numeral, and not fine for body copy. --accent-ink is the same red lifted for TEXT on the dark ground: 5.90, AA. Links and inline emphasis use this. Setting body copy in --accent on --ground is the specific mistake this comment exists to prevent. */ --accent: #c41240; --accent-press: #9c0e33; --accent-ink: #ff4d70; --accent-wash: #1d0f16; --on-accent: #ffffff; --on-dark-sheen: rgba(255,255,255,.14); --good: #3ecf8e; --bad: #ff5f56; /* ---- type ------------------------------------------------------------ Barlow Condensed for display: condensed, athletic, and the nearest respectable face to the arched lettering on the truck door. Barlow for body, so display and text are one superfamily rather than a collision. IBM Plex Mono for figures - deliberately not JetBrains Mono, which the other site uses. */ --font-display: "Barlow Condensed", "Arial Narrow", ui-sans-serif, system-ui, sans-serif; --font: "Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Condensed type fits more characters per line, so display sizes run LARGER than the other site's and tracking runs POSITIVE where that site runs negative. Both differences are visible without measuring. */ --t-display: clamp(3rem, 1.6rem + 6vw, 7rem); --t-hero: clamp(2.6rem, 1.5rem + 4.6vw, 5.5rem); --t-h1: clamp(2.2rem, 1.4rem + 3.4vw, 4rem); --t-h2: clamp(1.7rem, 1.2rem + 2.2vw, 2.9rem); --t-h3: clamp(1.25rem,1.1rem + 0.7vw, 1.6rem); --t-lead: clamp(1.05rem,1rem + 0.4vw, 1.3rem); --t-body: 1.0625rem; --t-small: 0.9375rem; --t-micro: 0.8125rem; --track-display: .01em; /* condensed caps want air, not tightening */ --track-tight: 0em; --track-snug: 0em; --track-wide: .22em; /* wider than the other site's .16 */ --lh-display: 0.92; --lh-head: 1.06; --lh-body: 1.65; /* ---- space ----------------------------------------------------------- VISUAL_DENSITY 5. A working density, not an art gallery. */ --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4.5rem; --s9: 7rem; --s10: 10rem; /* ---- shape ----------------------------------------------------------- ZERO. Not "small" - square, on every surface: buttons, inputs, panels, photographs. The other site is 4px and 8px. One rule here, no exceptions, so there is nothing to remember and nothing to get wrong. */ --r: 0px; --r-lg: 0px; /* ---- motion ---------------------------------------------------------- A mechanical curve: quick off the mark, hard stop. The other site uses an expo-out that eases away gently and floats to a halt. Side by side the difference reads even when the movement is small. */ --ease: cubic-bezier(.32, .72, 0, 1); --ease-out: cubic-bezier(.2, .9, .1, 1); --fast: 140ms; --med: 260ms; --slow: 520ms; /* ---- photography ----------------------------------------------------- The scrim is heavier than on the light site. White type over a daylight photograph on a dark page needs more separation, not less. */ --scrim-rgb: 14, 17, 22; --scrim-a: .72; --scrim-fade: clamp(3rem, 7vw, 5rem); --on-photo: #ffffff; --on-photo-soft: #d6dde5; --photo-frame: #232b35; --photo-radius: 0px; --photo-veil: .10; } /* ---- light mode --------------------------------------------------------- Dark is the DEFAULT here, the reverse of the other site. Someone who forces light still gets a coherent page rather than an afterthought - and the accent DARKENS, because the lifted #ff4d70 that works on steel is unreadable on white while #c41240 measures 5.99 there. ------------------------------------------------------------------------ */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --ground: #f4f6f8; --panel: #ffffff; --sunk: #e7ebef; --paper: #f4f6f8; --surface: #ffffff; --surface-sunk: #e7ebef; --ink: #0e1116; --ink-soft: #414d5c; --ink-faint: #5d6a7a; --rule: #d3dae1; --rule-strong: #b3bec9; --accent-ink: #a80f37; --accent-wash: #fdeef2; --scrim-a: .60; --photo-frame: #d3dae1; } } :root[data-theme="light"] { --ground: #f4f6f8; --panel: #ffffff; --sunk: #e7ebef; --paper: #f4f6f8; --surface: #ffffff; --surface-sunk: #e7ebef; --ink: #0e1116; --ink-soft: #414d5c; --ink-faint: #5d6a7a; --rule: #d3dae1; --rule-strong: #b3bec9; --accent-ink: #a80f37; --accent-wash: #fdeef2; --scrim-a: .60; --photo-frame: #d3dae1; } /* ---- tokens the shared components consume ------------------------------- Found by diffing every var() used across site.css, motion.css, the pages and the JS against what this file defines. Without them the layout collapses silently: no nav height, no wrapper width, no fieldset spine. Values are Joseph's, not carried over. ------------------------------------------------------------------------ */ :root { --wrap: 68rem; --wrap-wide: 82rem; --gutter: clamp(1.15rem, 4vw, 3rem); --measure: 64ch; --nav-h: 68px; /* the other site runs taller; this one is lean */ --section-y: clamp(3.5rem, 2rem + 6vw, 7rem); --z-nav: 40; --lh-heading: 1.06; --lh-lead: 1.5; /* Elevation by LINE, not by blur. On a steel ground a soft drop shadow just turns to mud, so depth here is a lit top edge and a hard seat. */ --lift-2: 0 1px 0 rgba(255,255,255,.05), 0 8px 20px rgba(0,0,0,.45); --lift-3: 0 1px 0 rgba(255,255,255,.07), 0 18px 44px rgba(0,0,0,.55); --ok: #3ecf8e; --ok-wash: #0d1d17; --warn: #f0b429; --warn-wash: #1e1808; --bad-wash: #200f0f; /* Text and rules for content sitting ON a photograph or a crimson fill. */ --on-dark: #ffffff; --on-dark-muted: #d6dde5; --on-dark-faint: #9fadbb; --on-dark-rule: rgba(255,255,255,.16); --on-dark-rule-strong:rgba(255,255,255,.30); --on-dark-wash: rgba(255,255,255,.07); /* Photographs are darkened and slightly desaturated so a yard full of red dumpsters cannot fight the crimson accent for attention. */ --photo-exposure: .88; --photo-grade: saturate(.92) contrast(1.06); /* Numbered fieldset spine on the quote form. */ --fs-gutter: clamp(2.35rem, 6vw, 3.4rem); --fs-mark: 1.7rem; --fs-pad: var(--s7); }