/* ============================================================================= BGC DESIGN TOKENS — single source of truth ============================================================================= This file defines the brand for the entire BGC web infrastructure: - the public site (/) - welcome packs (/welcome/) - staff board (/board/) HOW TO EDIT THIS FILE --------------------- Change a colour, font, or size HERE and it updates everywhere. Never re-declare these tokens in a page-level CSS file — always reference them with var(--token-name). If you find yourself wanting a new colour or size, add it to this file first and document what it's for. Brand reference: BGC Brand Guidelines v0.1 ============================================================================= */ :root { /* ── PRIMARY PALETTE ───────────────────────────────────────────────────── */ --color-navy: #04336c; /* Dark Midnight Blue */ --color-red: #d51f2e; /* Fire Engine Red */ --color-grey: #6E7B8B; /* Cool Grey */ /* ── SECONDARY BLUES ───────────────────────────────────────────────────── */ --color-lapis: #2A327E; --color-flat-blue: #4C63AD; --color-wild-blue: #7384C1; --color-rhino: #2e2f60; /* ── SECONDARY REDS ────────────────────────────────────────────────────── */ --color-sea-pink: #F59798; --color-deep-carmine: #ab233a; --color-velvet: #812747; --color-plum: #582b53; /* ── WELFARE ─────────────────────────────────────────────────────────────── The safeguarding pages carry a green accent instead of the usual red, so an emergency notice in red still reads as the urgent thing on the page. ------------------------------------------------------------------------ */ --color-welfare: #5a8a44; /* rules, headings, card accents */ --color-welfare-tint: #7ec86a; /* on navy, where the darker green is muddy */ --color-welfare-wash: #f2f7ee; /* page-width panels behind welfare copy */ /* ── NEUTRALS ──────────────────────────────────────────────────────────── */ --color-white: #ffffff; --color-off-white: #ededed; --color-beige: #bea6a1; --color-black: #111111; --color-bg-light: #f5f6f8; --color-border: #e8eaed; --color-hairline: rgba(4, 51, 108, 0.12); /* ── TEXT ──────────────────────────────────────────────────────────────── */ --color-text: #1a1a1a; --color-text-soft: #4a4a55; --color-text-muted: var(--color-grey); --color-text-inverse: var(--color-white); /* ── TINTS (brand guide — 25 / 50 / 75 %) ──────────────────────────────── */ --color-navy-75: #3d5b8d; --color-navy-50: #80a1c5; --color-navy-25: #c0d0e2; --color-red-75: #de574d; --color-red-50: #ea8f84; --color-red-25: #f5c7bf; /* ── LEGACY ALIASES ──────────────────────────────────────────────────────── Keep until welcome packs + staff board are fully migrated. Safe to delete once a grep for these variable names returns zero results. ------------------------------------------------------------------------ */ --ink: var(--color-navy); /* staff board legacy */ --red: var(--color-red); /* staff board legacy */ --grey: var(--color-grey); /* staff board legacy */ --paper: var(--color-white); /* staff board + welcome packs */ --cream: var(--color-bg-light);/* staff board legacy */ --soft-ink: #1a2438; /* staff board legacy */ --hairline: var(--color-hairline);/* staff board legacy */ --plum: var(--color-plum); /* staff board legacy */ --velvet: var(--color-velvet); /* staff board legacy */ --carmine: var(--color-deep-carmine); /* staff board uses --carmine */ --rhino: var(--color-rhino); /* staff board legacy */ --lapis: var(--color-lapis); /* staff board legacy */ --shadow: var(--shadow-card); /* staff board uses bare --shadow */ --bgc-blue: var(--color-navy); /* welcome packs legacy */ --bgc-red: var(--color-red); /* welcome packs legacy */ --bgc-grey: var(--color-grey); /* welcome packs legacy */ --bgc-deep-carmine: var(--color-deep-carmine); --bgc-velvet: var(--color-velvet); --bgc-plum: var(--color-plum); --bgc-rhino: var(--color-rhino); --bgc-lapis: var(--color-lapis); --bgc-flat-blue: var(--color-flat-blue); --bgc-wild-blue: var(--color-wild-blue); --bgc-sea-pink: var(--color-sea-pink); --paper-soft: var(--color-bg-light); --rule: var(--color-border); --ink-soft: var(--color-text-soft); /* ── FONTS ──────────────────────────────────────────────────────────────── Canonical pair across all three surfaces: Display: Montserrat (Gotham Black analogue) Body: Inter (Aptos analogue) ------------------------------------------------------------------------ */ --font-display: 'Montserrat', 'Gotham', 'Arial Black', sans-serif; --font-body: 'Inter', 'Aptos', 'Segoe UI', system-ui, -apple-system, sans-serif; /* Legacy aliases — kept so old CSS keeps working during migration */ --display: var(--font-display); --body: var(--font-body); /* ── TYPE SCALE ────────────────────────────────────────────────────────── */ --fs-xs: 0.75rem; /* 12px */ --fs-sm: 0.875rem; /* 14px */ --fs-base: 1rem; /* 16px */ --fs-md: 1.125rem; /* 18px */ --fs-lg: 1.5rem; /* 24px */ --fs-xl: 2rem; /* 32px */ --fs-2xl: 3rem; /* 48px */ --fs-3xl: 3.5rem; /* 56px */ /* ── SPACING ───────────────────────────────────────────────────────────── */ --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --space-4xl: 6rem; /* ── LAYOUT ────────────────────────────────────────────────────────────── */ --container-max: 1920px; --header-height: 96px; --header-height-mobile: 64px; --gutter: 2rem; --gutter-mobile: 1rem; /* Where a sticky bar sits when it has to sit under the site header. The header shrinks on mobile, so anything pinned below it has to shrink with it; a fixed --header-height leaves a strip of the page showing through the gap. Redefined at the header's own breakpoint just below. */ --sticky-top: var(--header-height); /* ── MOTION ────────────────────────────────────────────────────────────── */ --transition: 0.2s ease; --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.22, 1, 0.36, 1); /* ── RADIUS + SHADOW ───────────────────────────────────────────────────── */ --radius-sm: 0; --radius-md: 2px; --radius-lg: 12px; --radius-xl: 18px; --shadow-md: 0 4px 20px rgba(4, 51, 108, 0.15); --shadow-lg: 0 20px 60px rgba(4, 51, 108, 0.18), 0 4px 12px rgba(4, 51, 108, 0.08); --shadow-card: 0 8px 30px rgba(4, 51, 108, 0.08), 0 2px 6px rgba(4, 51, 108, 0.04); } /* Keeps --sticky-top in step with the shorter mobile header. Same breakpoint as .site-header in components.css; move both together. */ @media (max-width: 1023px) { :root { --sticky-top: var(--header-height-mobile); } }