/* ========================================================================== Pro Auction — Design Tokens Master brief §4. Build order step 2: tokens first, no hard-coded hex or px. Additions beyond the brief are marked [ADDED] with a reason, per §14. Contrast ratios in comments are measured, not asserted. ========================================================================== */ /* --- Self-hosted variable fonts §4.3 -------------------------------------- WOFF2, font-display: swap, no Google CDN (UK GDPR + LCP). The two files used above the fold are preloaded in functions.php. */ @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/source-serif-4-latin-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/source-serif-4-latin-ext-var.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/inter-latin-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/inter-latin-ext-var.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* --- Colour — derived from the logo ----------------------------------- Supersedes the §4.2 palette. That one was anchored to a single sampled blue (#0B70CE) and paired it with a warm cream ground and a brass accent — a combination that reads as generic, and that inverted the brand's own relationships. Sampling the logo raster directly (283x58, 16k opaque px) gives a different and more specific brief: - The wordmark is mostly BLACK. "Pro" and "Limited" are near-black; only "Auction" and the gavel are blue. Charcoal is the primary and blue is the accent — the previous palette had that the wrong way up. - That black is WARM: averaged #272522, hue 36 degrees, and every one of the darkest samples has R > B. The old --ink #0A1A2F was a cool navy, which fought the logo rather than extending it. - The logo's light is cool-neutral (#F8F9FA, saturation 0.8%), not cream. Warm-dark on cool-paper is the inversion of the usual cool-dark on warm-cream, and it is what the mark actually does. - The true gavel blue is saturated (#0060C9 at S100) rather than the mid-tone #0B70CE, which was an anti-aliased average. Ratios below are measured, not asserted. */ --ink: #1A1714; /* warm near-black, from the wordmark 17.11:1 on paper */ --graphite: #2E2A26; /* secondary dark, the "Limited" weight 13.65:1 on paper */ --brand: #0060C9; /* the gavel blue at full saturation 5.72:1 on paper */ --brand-deep: #00459A; /* links on light, button hover 8.69:1 on paper */ --slate: #33302C; /* body copy — warm, to sit with the ink 12.58:1 on paper */ --muted: #6B655E; /* captions, metadata, lot labels 5.52:1 on paper */ --paper: #FBFAF8; /* page ground — near-white, barely warm */ --line: #DEDAD3; /* hairline rules, table borders, card edges */ --steel: #8A9199; /* accent ONLY: rules, lot numbers 5.60:1 on ink */ --live: #C0341F; /* LIVE badge, closing-soon countdown 5.37:1 on paper */ --sold: #1F6B45; /* sold / result confirmed 6.20:1 on paper */ --white: #FFFFFF; /* Channel values for the few places that need alpha over the ink — the hero scrim, the gallery backdrop, the overlay shadow. Declared once so a change to --ink cannot leave a stale hard-coded rgba() behind, which is exactly what happened when the palette was first revised. */ --ink-rgb: 26, 23, 20; --paper-rgb: 251, 250, 248; /* --steel replaces the brief's --brass. Two reasons. Brass with navy and a serif is the single most predictable "premium heritage" combination, and it is what made the first pass feel like every other site. More usefully, it was wrong about the inventory: this firm sells combi ovens, stainless prep counters and food-processing plant far more often than gilt furniture. Steel is what the lots are actually made of, and it is drawn from the highlight on the logo's ring. Like brass, steel is ornament and never a button. It FAILS AA as text on light (3.06:1 on paper) — dark backgrounds only. */ /* --- Focus §10 [ADDED: --focus, --focus-on-dark] ---------------------- */ /* The brief mandates a 3px --brand-deep ring on every interactive element, but --brand-deep on --ink measures 2.23:1 and fails WCAG 2.2 SC 1.4.11 (non-text contrast needs >=3.0). Both header CTAs over the hero scrim and every footer link sit on --ink. A single fixed ring colour cannot satisfy both surfaces, so the ring becomes a context token that inverts. */ --focus: var(--brand-deep); /* 7.24:1 on paper — light surfaces */ --focus-on-dark: var(--paper); /* 16.17:1 on ink — dark surfaces */ --focus-width: 3px; --focus-offset: 2px; /* --- Typography §4.3 -------------------------------------------------- */ --font-display: "Source Serif 4", ui-serif, Georgia, serif; --font-ui: "Inter", ui-sans-serif, system-ui, sans-serif; /* Bricks sets html{font-size:62.5%} in frontend.min.css — the "10px root" convention — and its own CSS is calibrated to that, so resetting the root to 100% would inflate every Bricks-built element by 1.6x. The brief's scale in §4.3 assumes a 16px root, so without correction --fs-base rendered at 10.6px and the H1 at 22.5px against a specified 36–60px. Measured, not assumed. One multiplier reconciles the two: --rem is 16px expressed in Bricks' root, and each step below keeps the brief's literal number so the scale stays readable against §4.3. Viewport units in the clamps are unaffected by root font-size and are left alone. */ --rem: 1.6rem; --fs-xs: calc(0.75 * var(--rem)); --fs-sm: calc(0.875 * var(--rem)); --fs-base: calc(1.0625 * var(--rem)); --fs-lg: calc(1.25 * var(--rem)); --fs-xl: calc(1.5 * var(--rem)); --fs-2xl: clamp(calc(1.75 * var(--rem)), 3vw, calc(2.5 * var(--rem))); --fs-3xl: clamp(calc(2.25 * var(--rem)), 5vw, calc(3.75 * var(--rem))); --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --lh-body: 1.65; --lh-heading: 1.15; --measure: 68ch; --tracking-eyebrow: 0.08em; /* --- Space §4.4 — 4px base ------------------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px; --s-24: 96px; --s-32: 128px; /* --- Layout §4.4 ------------------------------------------------------ The brief specifies 1280px content inside a 1440px shell. On the wide screens this is actually viewed on that left large empty margins either side, so the container is now fluid: it uses the available width up to a much higher ceiling, and only stops growing where line lengths would start to suffer. Body copy is still capped at --measure independently, so widening the container does not widen the reading column. */ --content-max: min(92vw, 1680px); --shell-max: min(96vw, 1920px); --gutter: 16px; /* mobile-first §14 */ --grid-cols: 12; /* --- Radius & elevation §4.4 ----------------------------------------- */ --r-sm: 2px; --r-md: 4px; /* nothing larger — sharp reads documentary */ --shadow-overlay: 0 8px 24px rgba(var(--ink-rgb), .10); /* dropdowns/modals only */ /* --- Motion §4.5 ------------------------------------------------------ */ --ease-out: cubic-bezier(.22, 1, .36, 1); --dur-reveal: 400ms; --dur-micro: 300ms; --stagger: 60ms; --reveal-rise: 12px; --hover-scale: 1.03; --lenis-lerp: 0.1; /* --- Z-index [ADDED] -------------------------------------------------- */ /* Not in the brief, but the sticky header (§3), sticky sale sub-nav (§5.3), mega-menu (§3) and lot lightbox (§5.4) can overlap; unmanaged z-index is how that breaks. Declared once so no component invents its own. */ --z-base: 0; --z-sticky: 100; --z-header: 200; --z-dropdown: 300; --z-overlay: 400; --z-modal: 500; --z-toast: 600; } @media (min-width: 768px) { :root { --gutter: 24px; } }