/* ========================================================================== MATRIX ENERGY LEADERSHIP & TECHNICAL ACADEMY Design Token System — tokens.css SINGLE SOURCE OF TRUTH This file is generated from /brand/brand.json. Do not edit values here directly — update brand.json and run the apply-brand-tokens function to propagate changes site-wide. Load this as the FIRST stylesheet in every HTML file. ========================================================================== */ /* The Inter @import that stood here was removed 2026-07-31. It was dead: no --font-* token and no CSS rule in any of the 9 stylesheets named Inter, so no Inter face was ever matched and none was ever downloaded (measured 0 faces on 84/84 rows). What the @import did cost was a render-blocking request to fonts.googleapis.com on every one of the 33 pages that link this file. Nothing here declares Inter, but the name survives in prose: the stale TYPOGRAPHY — PRIMARY comment below still names Gill Sans MT and Inter and is wrong on both counts (see the corrected block beneath it); the other mentions in the tree are two admin font-picker labels and brand.json's fonts.body seed. None of them is a declaration and none loads a face. */ :root { /* ------------------------------------------------------------------------- CORE BRAND ------------------------------------------------------------------------- */ /* Primary navy — headers, CTA buttons, nav background */ --color-navy: #0A1628; --primary-navy: #0A1628; /* alias used by dark-mode rules and internal components */ /* Purple navy — gradient surfaces, deep section backgrounds */ --color-purple-navy: #1A1440; /* Brand gold — highlights, hover states, accents, badges */ --color-gold: #C9A84C; --gold-rgb: 201, 168, 76; /* ------------------------------------------------------------------------- SURFACES ------------------------------------------------------------------------- */ --color-surface-dark: #0A1628; /* dark card / dark section bg */ --color-surface-mid: #1A1440; /* mid-tone dark surface */ --color-surface-light: #F4F7FC; /* light page canvas / alt sections */ /* ------------------------------------------------------------------------- TEXT ------------------------------------------------------------------------- */ --color-text-primary: #FFFFFF; /* text on dark backgrounds */ --color-text-secondary: #B0BEC5; /* muted text on dark backgrounds */ --color-text-dark: #0A1628; /* primary text on light backgrounds */ --color-text-muted: #6B7280; /* secondary text on light backgrounds — passes AA on white (4.83:1) */ --color-text-light: #9CA3AF; /* decorative/placeholder only — NEVER use for readable text */ --color-text-gold: #C9A84C; /* gold emphasis — ONLY on dark navy backgrounds */ --color-eyebrow: #0A1628; /* eyebrow labels on light backgrounds — navy for contrast */ --color-eyebrow-dark: #C9A84C; /* eyebrow labels on dark navy backgrounds — gold */ --color-text-link: #183A64; /* hyperlinks on light backgrounds */ /* ------------------------------------------------------------------------- SEMANTIC / STATE COLOURS ------------------------------------------------------------------------- */ --color-success: #2ECC71; --color-success-bg: #E8F5E9; --color-success-text: #1B5E20; --color-warning: #F39C12; --color-warning-bg: #FFF8E1; --color-warning-text: #7C5100; --color-danger: #E74C3C; --color-danger-bg: #FDE8E8; --color-danger-text: #7F1D1D; --color-info: #3498DB; --color-info-bg: #E8F0FB; --color-info-text: #1A2E4A; /* ------------------------------------------------------------------------- UI UTILITY COLOURS (borders, surfaces, tints) These are derived shades — do not change without updating brand.json. ------------------------------------------------------------------------- */ --color-border-default: #D1DBE8; /* card borders, dividers */ --color-border-strong: #A8BCD0; /* focused inputs, table borders */ --color-border-accent: #C9A84C; /* accent underlines, active tabs */ --color-border-dark: #2A4060; /* borders on dark surfaces */ --color-bg-page: #F4F7FC; /* default page background */ --color-bg-dark: #0A1628; /* dark section background */ --color-bg-hero: #1A1440; /* hero / header background */ --color-surface-1: #FFFFFF; /* primary card surface */ --color-surface-2: #F0F4F8; /* secondary panel */ --color-surface-3: #E6ECF2; /* tertiary / table stripe */ --color-navy-tint: #EAEFF5; /* very light navy tint for panels */ --color-gold-tint: #F7F1DD; /* very light gold tint for panels */ --color-rule: #E2DDD4; /* neutral warm divider line */ /* OQ client theme — kept here so it can be overridden per-client */ --oq-color-primary: #F28021; --oq-color-dark: #081D33; /* OQ portal content-area accent — gold replaces teal (2026-06-25 visual fix) Identity band (oq-bar border) uses --oq-color-primary orange; these tokens drive all content-area CTAs, badges, section accents, and progress. */ --oq-teal: #C9A84C; --oq-teal-light: #d4b563; /* ------------------------------------------------------------------------- TYPOGRAPHY — PRIMARY --font-heading: Gill Sans MT is the confirmed Matrix brand typeface. --font-body: Inter for digital interfaces. --font-accent: Georgia for document-style output (proposals, agendas). ------------------------------------------------------------------------- */ /* ── Typography update 2026-06-27, corrected 2026-07-30 ─────────────────── Arimo is the intended primary web font and every --font-* token below declares it. Arial / Helvetica remain as system fallbacks. WHAT IS ACTUALLY LOADED -- this file does NOT load Arimo. Nothing here owns Arimo's loading. Each page owns it individually, via a page-level Google Fonts in its own . Only 8 HTML files carry that link, 5 of which are header-bearing pages, so the remaining pages resolve these tokens to the Arial fallback rather than to Arimo. The declared stack is uniform site-wide; the available face is not. To find the current carriers: grep -rl "css2?family=.*Arimo" --include=*.html Measured evidence, the 21-page audit and the options for resolving the split: docs/brand-font-reconciliation.md (2026-07-30). Not yet decided. This file no longer loads any font. The dead Inter @import was removed 2026-07-31; see the note above the :root block. ─────────────────────────────────────────────────────────────────────── */ --font-primary: 'Arimo', Arial, Helvetica, sans-serif; --font-heading: 'Arimo', Arial, Helvetica, sans-serif; --font-body: 'Arimo', Arial, Helvetica, sans-serif; --font-accent: Georgia, 'Times New Roman', serif; --font-mono: 'JetBrains Mono', 'Consolas', 'Courier New', monospace; --font-heading-fallback: 'Arimo', Arial, Helvetica, sans-serif; --font-heading-fallback-import: 'https://fonts.googleapis.com/css2?family=Arimo:wght@400;500;600;700;800&display=swap'; /* Font weights */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; /* ------------------------------------------------------------------------- TYPE SCALE ------------------------------------------------------------------------- */ --font-size-xs: 0.75rem; /* ~12px captions, badges */ --font-size-sm: 0.875rem; /* ~14px small labels */ --font-size-base: 1rem; /* ~16px body default */ --font-size-lg: 1.25rem; /* ~20px lead text */ --font-size-xl: 1.5rem; /* ~24px h4 */ --font-size-2xl: 2rem; /* ~32px h3/h2 */ --font-size-3xl: 2.5rem; /* ~40px h1 */ --font-size-4xl: 3rem; /* ~48px display/hero */ /* Line heights */ --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.6; --leading-relaxed: 1.75; /* Letter spacing */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.05em; --tracking-wider: 0.10em; --tracking-widest: 0.15em; /* ------------------------------------------------------------------------- SPACING SCALE Base unit: 4px (0.25rem). ------------------------------------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* Section shorthand */ --section-padding-y: var(--space-20); --section-padding-x: var(--space-6); /* Container max widths */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1440px; /* ------------------------------------------------------------------------- BORDER RADIUS ------------------------------------------------------------------------- */ --radius-none: 0; --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ --radius-2xl: 1.5rem; /* 24px */ --radius-full: 9999px; /* pills, avatars */ /* ------------------------------------------------------------------------- BOX SHADOWS ------------------------------------------------------------------------- */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 4px 12px rgba(0,0,0,0.4); --shadow-lg: 0 8px 32px rgba(0,0,0,0.5); --shadow-accent: 0 4px 20px rgba(201,168,76,0.30); /* gold glow — CTA */ --shadow-card: 0 4px 18px rgba(10,22,40,0.08); --shadow-panel: 0 12px 30px rgba(10,22,40,0.10); /* ------------------------------------------------------------------------- Z-INDEX SCALE ------------------------------------------------------------------------- */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; /* ------------------------------------------------------------------------- TRANSITION SPEEDS ------------------------------------------------------------------------- */ --transition-fast: 80ms ease; --transition-base: 160ms ease; --transition-smooth: 280ms ease; --transition-slow: 480ms ease; --transition-spring: 320ms cubic-bezier(0.34, 1.56, 0.64, 1); /* ------------------------------------------------------------------------- LOGOS & BRANDING MODE branding-mode: 'matrix-only' | 'co-brand' | 'client-primary' | 'full-whitelabel' ------------------------------------------------------------------------- */ --logo-height: 54px; --logo-url: url('/assets/images/matrix-logo.png'); --logo-secondary-url: none; --branding-mode: 'matrix-only'; } /* ========================================================================== WHITE-LABEL CLIENT THEME OVERRIDE PATTERN ============================================================================ To apply a client theme, add a [data-theme="client-slug"] block in a separate file (e.g. assets/css/themes/oq-theme.css) and override only the tokens that differ. Then set data-theme="client-slug" on . The get-client-theme Netlify function also injects inline :root overrides for logged-in portal users — those sit on top of this file. EXAMPLE — OQ Energy corporate overlay: ========================================================================== */ /* [data-theme="oq-energy"] { --color-navy: #7B0D1E; --color-gold: #888888; --color-bg-hero: #7B0D1E; --oq-color-primary: #C41230; --font-heading: 'Nunito Sans', 'Helvetica Neue', Arial, sans-serif; --branding-mode: 'co-brand'; } */ /* ============================================================================= CLIENT PORTAL HEADER PATTERN — for future portals (added 2026-06-21) ============================================================================= White panel header: background #FFFFFF, client logo in client brand colour stored as --client-accent on the portal bar element (scoped, not global). Panel structure: --client-accent: [client primary colour]; e.g. #FF6B00 for OQ background: #FFFFFF; border-bottom: 3px solid var(--client-accent); Content area below panel: background #1E2A4A (Matrix mid-navy). All text must pass WCAG 4.5:1 contrast ratio on #1E2A4A. Heading text: #FFFFFF (14.2:1). Muted: #AFC4DE (7.5:1). Gold eyebrow: #F28021 (5.3:1). Matrix logo selection rule: White/light panel (bg > #888888 brightness): /assets/matrix-symbol-white-bg.png Dark section (bg <= #888888 brightness): /assets/matrix-symbol.png Reference: .oq-bar selector in assets/css/site.css + OQ portal index.html ============================================================================= */ /* ========================================================================== DARK MODE OVERRIDES Applied when data-theme="dark" is set on by theme-toggle.js ========================================================================== */ [data-theme="dark"] { --color-bg-page: #0A1628; --color-surface-1: #1A1440; --color-surface-2: #12203A; --color-surface-3: #0F1A2E; --color-text-dark: #F5F5F5; --color-text-muted: #A8BDD0; /* lightened for dark mode: was #8FA3B8 (6.99:1 AA), now #A8BDD0 (9.2:1 AAA) */ --color-border-default: rgba(201,168,76,0.2); --color-border-strong: rgba(201,168,76,0.35); --color-surface-light: #0A1628; --color-navy-tint: #1A2A4A; --color-gold-tint: #1C1808; --color-rule: rgba(201,168,76,0.15); }