/* ============================================================================= * 00-tokens.css -- the token SURFACE. Names here, values in brand.php. * * BYTE-IDENTICAL across quadtech-at and quadtech-gf. * * Every declaration below is deliberately EMPTY. That is not a placeholder -- * it is the mechanism. enqueue.php reads brand.php['tokens'] and emits an * inline :root block that lands AFTER this file and therefore wins. This file * exists so the full token surface is greppable in one place and so a token * missing from one site's brand.php is visible as an unstyled element rather * than as a silently inherited value. * * Empty custom properties are valid CSS. A var() reading one is invalid at * computed-value time and falls back to inherited/initial, so an unsupplied * token renders visibly wrong rather than plausibly wrong. * * THE CONTRACT: every name declared here MUST have a value in BOTH brand.php * files. Adding a name here without adding it to both brand maps ships a * half-styled element to one site only -- which is the single hardest class of * bug to spot in a two-site shared theme. * * ----------------------------------------------------------------------------- * FINDING, 2026-08-11 -- THE PLAN'S "ONE ACCENT APART" IS NOT TRUE. * * The two harvests measured the live sites and they differ in almost every * token, not just the accent: * * AutoTransport GlobeFreight * font Astra system stack (NO webfont) PT Sans (webfont) * base size 16px / 26.4px 15px / 23.4375px * body ink #334155 (h1 #1E293B) #333333 * accent #C2431C #F1592A * secondary #045CB4 (current menu item) #5397B4 (LINKS) * canvas #706C6C + bodybg texture texture via custom-background * measure 1240px 1030px * sheet square, flush #wrap, border-radius 10px * footer #2B2622 dark, 1 menu #F0F0F0 gradient, 3 columns * * The shared-theme architecture still holds -- but ONLY because brand.php * carries the whole token map rather than "the accent". Anyone who assumes a * shared value here because "they are the same except the orange" will ship a * regression. If the owner later wants the two sites to actually converge, * that is a DESIGN decision to take deliberately, not a side effect of this * port. * ----------------------------------------------------------------------------- * * Provenance: * AT planning/docs/parity/at-target-INDEX.json (8 surfaces x 3 widths) * GF planning/docs/parity/gf-target-{390,768,1366}.json * planning/docs/heritage/genesis/style.css (32,148 B, byte-accurate) * * DO NOT lift values from gf-restore-additional.css or * globefreight-restore-style.php. Those are untested PROPOSALS, not * measurements, and four of their claims are already known wrong (sheet width, * box-shadow, link vs button colour, and #3498DB/#2980b9 which are Easy * Pricing Tables plugin CSS appearing zero times in the heritage stylesheet). * ========================================================================== */ :root { /* --- brand accent -------------------------------------------------- * GF trap: #F1592A is the SUBMIT-BUTTON / INPUT colour. Links are * #5397B4 (--qt-secondary). Getting this pair backwards inverts the * brand on every page. AT trap: the theme's chrome uses ONE accent -- * see brand.php for where the darker ramp steps actually live. */ --qt-accent: ; --qt-accent-dark: ; /* hover */ --qt-accent-deep: ; /* active */ --qt-accent-contrast: ; /* text ON the accent; must pass AA */ --qt-secondary: ; /* The AA-compliant step of the accent. --qt-accent is too light to carry * white text on GlobeFreight (3.39:1); this reaches 5.11:1. */ --qt-cta-bg: ; --qt-cta-ink: ; /* --- surfaces ------------------------------------------------------ * canvas and sheet are a PAIR. See 30-sheet.css. */ --qt-canvas: ; --qt-canvas-image: ; /* the TILE. GF's comes from custom-background, NOT * the heritage stylesheet, whose body rule points * at a dead ic-express.co.za hotlink. */ --qt-sheet: ; --qt-sheet-radius: ; /* GF: 10px -- this, NOT a shadow, is the separation */ --qt-sheet-shadow: ; /* GF measures `none`. Do not invent one. */ --qt-sheet-pad: ; /* block padding inside the sheet */ --qt-footer-bg: ; --qt-footer-bg-image: ; /* GF's footer widget band is a linear-gradient */ --qt-footer-ink: ; --qt-footer-link: ; /* AT #FFFFFF on dark; GF #5397B4 on #F0F0F0 */ --qt-footer-rule: ; --qt-footer-radius: ; --qt-footer-shadow: ; --qt-footer-cols: ; /* AT 1, GF 3 -- grid-template-columns repeat() count */ /* --- chrome --------------------------------------------------------- */ --qt-header-bg: ; --qt-header-bg-image: ; --qt-header-border: ; --qt-header-radius: ; /* The header band is its OWN paint surface, so the two things that sit on it * need their own ink. Neither could keep the token it used to read: * --qt-ink-heading paints every h1-h6 on the WHITE SHEET (10-reset, * 40-content, 50-components, 60-forms) and --qt-accent is the submit-button * BACKGROUND in five places, so pointing either at the band would white out * every heading or wreck every button. GF MEASURED on its #2B2622 band: the * wordmark inherited #333333 at 1.18:1 -- effectively invisible -- and the * phone inherited #F1592A at 4.42:1, which FAILS AA. AT's band is white and * its two values are its current effective ones, so nothing moves there. */ --qt-wordmark-ink: ; --qt-phone-ink: ; /* must pass AA (4.5:1) on --qt-header-bg */ --qt-nav-ink: ; --qt-nav-ink-current: ; --qt-nav-ink-hover: ; /* AT signals hover/current by INK; GF's heritage nav signals it by a * BACKGROUND gradient and leaves the ink at #5D5D5D. Both tokens exist on * both sites so one rule serves both signals. */ --qt-nav-bg-hover: ; --qt-nav-bg-current: ; --qt-nav-bg: ; --qt-nav-bg-image: ; --qt-nav-radius: ; --qt-nav-shadow: ; --qt-nav-item-pad: ; --qt-nav-transform: ; --qt-submenu-bg: ; --qt-submenu-border: ; --qt-submenu-shadow: ; /* --- ink ------------------------------------------------------------ */ --qt-ink: ; --qt-ink-heading: ; --qt-ink-muted: ; --qt-ink-inverse: ; --qt-link: ; --qt-link-hover: ; --qt-rule: ; --qt-error: ; /* --- type ----------------------------------------------------------- * AT computes a SYSTEM STACK and loads no webfont -- copy the stack * verbatim from brand.php, never enqueue a font for it. GF genuinely uses * PT Sans, which ADR-0007 records as a deliberate owner decision * superseding DESIGN_SYSTEM.md's no-web-font mandate. */ --qt-font-body: ; --qt-font-heading: ; --qt-fs-base: ; --qt-fs-h1: ; --qt-fs-h2: ; --qt-fs-h3: ; --qt-fs-h4: ; --qt-fs-small: ; --qt-fs-nav: ; --qt-lh-body: ; /* h1 gets its own leading. AT MEASURED h1 32/38.4 (1.20) but h2 30/39 and * h3 24/31.2 (1.30) -- one absolute value for all six would move h3 by 7px * and break the empty diff. GF sets both to 1.25. */ --qt-lh-h1: ; --qt-lh-heading: ; --qt-lh-nav: ; --qt-ls-heading: ; --qt-fw-body: ; --qt-fw-heading: ; --qt-fw-nav: ; /* --- measure + rhythm ------------------------------------------------ * AT 1240px, GF 1030px. GF is 1030px at 1366 and 100% at 768/390. */ --qt-measure: ; --qt-measure-wide: ; --qt-gutter: ; --qt-gutter-lg: ; --qt-space-1: ; --qt-space-2: ; --qt-space-3: ; --qt-space-4: ; --qt-space-5: ; /* --- chrome geometry -------------------------------------------------- */ --qt-header-h: ; --qt-header-h-mobile: ; --qt-logo-max-w: ; /* A band constrains a logo by HEIGHT. --qt-logo-max-w alone lets a wide * wordmark render taller than the bar: GlobeFreight's 2.29:1 artwork at * 350px wide is 153px tall inside a 115px header. */ --qt-logo-max-h: ; --qt-logo-max-h-mobile: ; --qt-radius: ; --qt-border-w: ; /* --- controls (WCAG 2.2 SC 2.5.8) ------------------------------------- * 24x24 is the FLOOR, measured unioned with the label. 44px is Apple HIG * comfort -- report it, never fail on it. */ --qt-control-min: ; --qt-control-h: ; --qt-control-pad: ; --qt-input-bg: ; --qt-input-border: ; --qt-input-ink: ; --qt-fs-input: ; /* 16px floor: below that iOS zooms on focus */ --qt-focus-ring: ; /* --- cards ------------------------------------------------------------ */ --qt-card-bg: ; --qt-card-border: ; --qt-card-radius: ; /* --- motion ------------------------------------------------------------ */ --qt-transition: ; } /* Respect the user. Carries no brand value, so it is real today. */ @media (prefers-reduced-motion: reduce) { :root { --qt-transition: none; } }