/* GarageFinderUAE — brand tokens (single source of truth). Revision 3 restored, 20 September 2026. brand-guidelines/guidelines.md revision 3 (4 September) documents a full system: a neutral ramp from ink to hairline, a page ground that is not white, a blue ramp for dark grounds, one radius scale and three elevation levels. The 17 September "three colours only" pass collapsed nearly all of it onto flat black — --c-body, --c-muted, --c-line, --c-steel and every blue tint all resolved to #151B22, and all three shadows to transparent. A caption then weighed the same as a heading, every hairline was a hard rule, and cards on a white page had nothing to sit on. What that pass got right is kept: one hue. There is no second accent colour. Red remains reserved for breakdown and emergency, and nothing else has a hue. What comes back are the value steps of that one hue, exactly as revision 3 sampled them from assets/img/brand/source-logo.png. blue #00418E "FINDER" and the pin ink #161C23 "GARAGE" and the car white #FFFFFF Contrast on white / on the #F5F7FA page ground: ink 17.2 / 16.0 body 9.6 / 9.0 muted 5.2 / 4.8 — all AA body blue-700 9.8 / 9.1 white on blue-700 9.8 blue-500 on blue-900 6.7 --c-steel and --c-line are hairlines and illustration fills. They never carry text. Typography is NOT reverted. Revision 3 specifies Saira and IBM Plex Sans; the 17 September pass moved headings to Geist and body to the device's own interface font. That is the newer decision and it stands — guidelines.md is stale on type, and on the favicon (favicon.svg exists as of 5 September). */ :root { /* ── The identity ────────────────────────────────────────────────────── */ --c-brand: #00418E; --c-black: #0B0F19; --c-white: #FFFFFF; /* ── Blue ramp. 500 and 100 are for dark grounds only. ───────────────── */ --c-blue-700: #00418E; /* primary: buttons, links */ --c-blue-800: #003370; /* pressed / hover step */ --c-blue-900: #002150; /* deep: footer, dark sections */ --c-blue-950: #001838; /* deepest ground */ --c-blue-600: #00418E; --c-blue-500: #64B0E6; /* accent ON DARK ONLY — 2.3:1 on white */ --c-blue-200: #C7DFF5; --c-blue-100: #C7DFF5; /* rules and hairlines on dark */ --c-blue-050: #EAF2FB; /* tint surface */ --c-blue-025: #F7FAFD; /* ── Neutral ramp ────────────────────────────────────────────────────── */ --c-ink: #0B0F19; /* headings, 19:1 on white */ --c-body: #5B6472; /* paragraphs, 6.0:1 on white */ --c-muted: #6B7380; /* secondary text, captions, 4.8:1 on white */ --c-faint: #8A929E; /* placeholders only, never prose */ --c-line: #E6E8EC; /* card borders */ --c-line-2: #D5D9E0; /* fields, stronger divider */ --c-steel: #C0C3C7; /* the skyline: illustration and quiet UI */ --c-page: #FFFFFF; /* page ground: white (30 Sep 2026) */ --c-section: #F6F7F9; /* the alternate section ground */ --c-section-2: #EDEFF3; /* a section-grey control, hovered */ --c-surface: #FFFFFF; /* cards, header */ /* Value-step aliases used by rules added on 20 September. */ --c-ink-60: var(--c-muted); --c-ink-45: var(--c-faint); --c-ink-22: var(--c-line-2); --c-ink-12: var(--c-line); /* ── Reserved: breakdown and emergency, nothing else ─────────────────── */ --c-red-600: #CD0A0A; --c-red-050: #FDF2F2; /* ── Older names, mapped so no rule in styles.css needs rewriting ────── */ --c-aqua-400: var(--c-blue-500); --c-violet-400: var(--c-brand); --a-onDark-06: rgba(255, 255, 255, 0.06); --a-onDark-12: rgba(255, 255, 255, 0.12); --a-onDark-20: rgba(255, 255, 255, 0.20); /* Amber is retired. One hue: these resolve to the blue ramp. */ --c-amber-500: var(--c-blue-700); --c-amber-050: var(--c-blue-050); --c-amber-ink: var(--c-ink); /* WhatsApp green, kept 20 September 2026. The one-hue rule has two functional exceptions, not decorative ones: red for breakdown, and this. WhatsApp is a third-party channel and the site is WhatsApp-first, so the primary conversion action must not look like every other blue button. #107C43 is a darkened WhatsApp green chosen for contrast: white on it is 5.3:1, where WhatsApp's own #25D366 is 2.0:1 and the #1FA855 this once carried is 3.1:1 - both under AA at 15px. */ --c-wa-500: #107C43; --c-wa-600: #0B6134; --c-wa-700: #0B6134; /* The glass tokens of the earlier pass, now solid. */ --glass-fill: var(--c-surface); --glass-edge: var(--c-line); --glass-shine: 0 0 0 0 transparent; --glass-bg: var(--c-surface); --glass-border: var(--c-line); --glass-blur: none; --page-light: var(--c-surface); /* ── Type ────────────────────────────────────────────────────────────── */ /* ONE typeface, 20 September 2026. The previous split — Geist for headings, the device's own interface font for everything else — put two typefaces inside a single card: .price was Geist while the .meta line directly under it was SF Pro or Segoe UI, and the logo and the nav links 20px away were set in different faces. At 12-15px the letterforms do not match, and the result reads as a page assembled from two sites rather than one designed page. Geist is already fetched from Google Fonts on every page at 400/500/600/700, so using it throughout costs nothing and removes the mismatch entirely. The system stack stays as the fallback for the moment before the webfont lands. */ --font-head: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-body: var(--font-head); --font-ui: var(--font-head); --track-head: -0.04em; --leading-body: 1.6; /* ── Type scale ────────────────────────────────────────────────────────── Before this existed the stylesheet shipped 60 distinct font sizes across 232 declarations, fifteen of them between 12px and 16px (12, 12.5, 12.8, 13, 13.12, 13.5, 14, 14.4, 14.5, 14.72, 15, 15.04, 15.36, 15.5, 16). Half a pixel is below the threshold at which a size difference reads as a decision, so nothing looked ranked — it looked nudged by hand until it fit. Eight steps, each about 1.25x the last, so every step is visibly a step. */ --fs-xs: 0.75rem; /* 12px — micro-labels, legal, uppercase chips */ --fs-sm: 0.875rem; /* 14px — meta, captions, tags, nav */ --fs-base: 1rem; /* 16px — body */ --fs-md: 1.125rem; /* 18px — lead, card titles, h3 */ --fs-lg: 1.375rem; /* 22px — large h3, small h2 */ --fs-xl: 1.75rem; /* 28px — h2 */ --fs-2xl: 2.25rem; /* 36px — h2 large, page-hero h1 on small screens */ --fs-3xl: 2.75rem; /* 44px — inner-page h1 */ --fs-4xl: 3.25rem; /* 52px — the biggest fixed step */ /* Display sizes are responsive by clamp, not by media query. The home

alone was carried by FIVE competing rules (.app-hero h1 at 64px, then .home-intro h1, .home-intro-copy h1 and .home-intro-discovery h1 each with its own clamp, plus two media overrides). Two tokens replace all of them. */ --fs-hero: clamp(2.5rem, 6.2vw, 4.5rem); /* 40px → 72px, home hero only */ --fs-title: clamp(2rem, 4vw, 3rem); /* 32px → 48px, every other h1 */ --fs-h2: clamp(1.625rem, 2.6vw, 2.25rem); /* 26px → 36px, every h2 */ /* Line heights, paired to the scale: tight for display, open for prose. Nineteen different values used to be in play — 1.05, 1.06, 1.1, 1.12, 1.14, 1.15, 1.2, 1.25, 1.3, 1.35, 1.4, 1.45, 1.5, 1.55, 1.6, 1.65, 1.75 — which is the same problem as the font sizes: differences too small to read as decisions. A literal 1 is kept where it is doing vertical centring in a badge or an icon, and is not part of the scale. */ --lh-tight: 1.1; /* display headings */ --lh-snug: 1.3; /* headings, card titles */ --lh-base: 1.5; /* UI text, labels, dense lists */ --lh-body: 1.6; /* prose */ /* ── Section rhythm ────────────────────────────────────────────────────── One page previously ran 26px, 48/12px, 72px and 0 section padding, so the eye got no repeated interval and nothing read as a section boundary. Two intervals: editorial sections breathe, dense rails stay compact. */ --sec-y: 96px; /* every section, desktop */ --sec-y-sm: 64px; /* every section, phone */ /* ── Layout rhythm, 30 Sep 2026 ────────────────────────────────────────── One value per job, all on the 8-point grid, after Apple's guidance that spacing is consistent and content is grouped by proximity: things that belong together sit 8-16px apart, groups 24px, blocks 40px, sections 96px. */ --head-gap: 40px; /* a section heading block to its content */ --head-gap-sm: 24px; --grid-gap: 24px; /* between cards in a grid */ --grid-gap-sm: 16px; --card-pad: 24px; /* inside every card */ --card-pad-sm: 20px; --gutter: 24px; /* the page's side margin, each side */ --gutter-sm: 20px; --sec-gap: 28px; /* heading to content inside a section */ /* ── Space — 4px base ──────────────────────────────────────────────────*/ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; /* ── Radius ──────────────────────────────────────────────────────────── Seven radii used to render at once and a single garage card carried six of them: the card at 24px, a nested disclosure at 24px, its tags at 18px, its WhatsApp button at 10px, its links at 6px and the save button at 50%. Two rungs now, plus the pill. Surfaces take --r-lg, controls take --r-md. --r-sm and --r-xl are kept only as aliases so no existing rule breaks. */ --r-md: 12px; /* every control: button, field, chip-not-pill */ --r-lg: 16px; /* every surface: card, panel, form, table */ --r-pill: 999px; /* chips and round badges only */ --r-sm: var(--r-md); /* retired */ --r-xl: var(--r-lg); /* retired */ /* ── Edges ───────────────────────────────────────────────────────────── Four incompatible "card edge" colours were live at once — a 9% hairline, the opaque #DCE0E5, the stronger #C3CAD3 and full black on tables. Two tokens now: one for surfaces, one for controls and dividers. */ --edge: #E6E8EC; /* card and panel edges */ --edge-strong: #D5D9E0; /* fields, dividers, table rules */ --hairline: var(--edge); /* the old name, kept for existing rules */ /* ── Elevation ───────────────────────────────────────────────────────── One ink for every shadow (eight different inks used to be in play, none of them --c-black). Elevation is a hierarchy, not a decoration: resting surfaces get nothing, the one raised panel gets --shadow-1, and only things that genuinely float above the page — menus, sheets, the suggest list — get --shadow-2 or --shadow-3. */ --ink-shadow: 11 15 25; --shadow-1: 0 1px 2px rgb(var(--ink-shadow) / 0.05), 0 6px 14px -8px rgb(var(--ink-shadow) / 0.14); --shadow-2: 0 2px 6px -2px rgb(var(--ink-shadow) / 0.08), 0 16px 32px -16px rgb(var(--ink-shadow) / 0.24); --shadow-3: 0 24px 56px -24px rgb(var(--ink-shadow) / 0.34); /* Coloured lift, derived per channel so a green button never throws a navy shadow — which is exactly what .btn-whatsapp did. */ --lift-blue: 0 8px 18px -8px rgba(0, 65, 142, 0.38); --lift-green: 0 8px 18px -8px rgba(16, 124, 67, 0.38); }