/* ============================================================ Blue Quest Group — Design System Tokens v1.0 ------------------------------------------------------------ Drop this file into your WordPress theme (or any project) and reference the variables. All design decisions live here. Usage: .my-button { background: var(--bq-color-action); ... } Last updated: 2026-05-13 ============================================================ */ :root { /* -------------------------------------------------------- */ /* COLOR — Brand (extracted from official logo, IM, */ /* and Commercialisation Plan, May 2026) */ /* -------------------------------------------------------- */ --bq-color-navy-deep: #0A1E45; /* Deepest navy — investor-pitch backgrounds */ --bq-color-navy: #122B5A; /* Primary dark — body text, dark sections */ --bq-color-royal: #1E5BC6; /* Primary brand blue — wordmark, primary actions */ --bq-color-royal-hover: #1648A8; /* Royal hover */ --bq-color-aqua: #5DBCD2; /* Accent aqua — from logo dots, water/flow themes */ --bq-color-aqua-pale: #DCEEF7; /* Section tints, soft backgrounds */ --bq-color-red: #E63946; /* Logo accent red — sparing use, high-energy moments */ --bq-color-red-deep: #C42E3A; /* Red hover */ --bq-color-quest-gray: #A0A8B0; /* Logo gray — tertiary accent */ --bq-color-cream: #F2EBDA; /* Editorial / IM background — print pieces */ /* Semantic mapping — use these in components */ --bq-color-action: var(--bq-color-royal); --bq-color-action-hover:var(--bq-color-royal-hover); --bq-color-emphasis: var(--bq-color-red); --bq-color-success: #10B981; --bq-color-warning: #F59E0B; --bq-color-danger: #EF4444; --bq-color-info: var(--bq-color-royal); /* Legacy aliases (keep so existing components don't break) */ --bq-color-sky: var(--bq-color-royal); --bq-color-coral: var(--bq-color-red); --bq-color-coral-deep: var(--bq-color-red-deep); /* -------------------------------------------------------- */ /* COLOR — Neutrals */ /* -------------------------------------------------------- */ --bq-color-ink: #0A1929; --bq-color-slate: #475569; --bq-color-fog: #94A3B8; --bq-color-mist: #E2E8F0; --bq-color-paper: #F8FAFC; --bq-color-white: #FFFFFF; /* -------------------------------------------------------- */ /* TYPOGRAPHY */ /* -------------------------------------------------------- */ --bq-font-display: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif; --bq-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --bq-font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace; /* Editorial serif — used for italicised emphasis words in long-form and investor-grade pieces (IM, Commercialisation Plan, white papers). Pair as italic accents inside otherwise sans-serif copy. */ --bq-font-editorial:'Cormorant Garamond', 'EB Garamond', Georgia, serif; /* Type scale — modular 1.25 ratio, 16px base */ --bq-text-xs: 0.75rem; /* 12px — captions */ --bq-text-sm: 0.875rem; /* 14px — small body, labels */ --bq-text-base: 1rem; /* 16px — body */ --bq-text-lg: 1.125rem; /* 18px — lead body */ --bq-text-xl: 1.25rem; /* 20px — small heading / large body */ --bq-text-2xl: 1.5rem; /* 24px — h4 */ --bq-text-3xl: 1.875rem; /* 30px — h3 */ --bq-text-4xl: 2.25rem; /* 36px — h2 */ --bq-text-5xl: 3rem; /* 48px — h1 mobile */ --bq-text-6xl: 3.75rem; /* 60px — hero subhead */ --bq-text-7xl: 4.5rem; /* 72px — hero desktop */ --bq-text-8xl: 6rem; /* 96px — display */ /* Line heights */ --bq-leading-tight: 1.15; --bq-leading-snug: 1.3; --bq-leading-normal: 1.5; --bq-leading-relaxed: 1.7; /* Font weights */ --bq-weight-regular: 400; --bq-weight-medium: 500; --bq-weight-semibold: 600; --bq-weight-bold: 700; /* Letter spacing */ --bq-tracking-tight: -0.02em; --bq-tracking-normal: 0; --bq-tracking-wide: 0.04em; --bq-tracking-wider: 0.08em; /* -------------------------------------------------------- */ /* SPACING (4px base) */ /* -------------------------------------------------------- */ --bq-space-1: 0.25rem; /* 4px */ --bq-space-2: 0.5rem; /* 8px */ --bq-space-3: 0.75rem; /* 12px */ --bq-space-4: 1rem; /* 16px */ --bq-space-5: 1.25rem; /* 20px */ --bq-space-6: 1.5rem; /* 24px */ --bq-space-8: 2rem; /* 32px */ --bq-space-10: 2.5rem; /* 40px */ --bq-space-12: 3rem; /* 48px */ --bq-space-16: 4rem; /* 64px */ --bq-space-20: 5rem; /* 80px */ --bq-space-24: 6rem; /* 96px */ --bq-space-32: 8rem; /* 128px */ /* -------------------------------------------------------- */ /* RADIUS */ /* -------------------------------------------------------- */ --bq-radius-sm: 4px; --bq-radius-md: 6px; --bq-radius-lg: 8px; --bq-radius-xl: 12px; --bq-radius-2xl: 16px; --bq-radius-full: 9999px; /* -------------------------------------------------------- */ /* SHADOWS */ /* -------------------------------------------------------- */ --bq-shadow-sm: 0 1px 2px rgba(14, 43, 77, 0.06); --bq-shadow-md: 0 4px 12px rgba(14, 43, 77, 0.08); --bq-shadow-lg: 0 10px 30px rgba(14, 43, 77, 0.12); --bq-shadow-xl: 0 20px 50px rgba(14, 43, 77, 0.18); /* -------------------------------------------------------- */ /* LAYOUT */ /* -------------------------------------------------------- */ --bq-container-max: 1280px; --bq-container-narrow: 880px; --bq-container-pad: var(--bq-space-6); /* Breakpoints (for reference — use in @media) */ --bq-bp-sm: 640px; --bq-bp-md: 768px; --bq-bp-lg: 1024px; --bq-bp-xl: 1280px; /* -------------------------------------------------------- */ /* TRANSITIONS */ /* -------------------------------------------------------- */ --bq-transition-fast: 0.15s ease-out; --bq-transition: 0.25s ease-out; --bq-transition-slow: 0.4s ease-out; } /* ============================================================ Base resets / defaults ============================================================ */ html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } body { font-family: var(--bq-font-body); font-size: var(--bq-text-base); line-height: var(--bq-leading-normal); color: var(--bq-color-ink); background: var(--bq-color-white); margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--bq-font-display); font-weight: var(--bq-weight-bold); line-height: var(--bq-leading-tight); letter-spacing: var(--bq-tracking-tight); color: var(--bq-color-navy); margin: 0 0 var(--bq-space-4); } h1 { font-size: var(--bq-text-5xl); } h2 { font-size: var(--bq-text-4xl); } h3 { font-size: var(--bq-text-3xl); } h4 { font-size: var(--bq-text-2xl); } h5 { font-size: var(--bq-text-xl); } h6 { font-size: var(--bq-text-lg); } @media (min-width: 768px) { h1 { font-size: var(--bq-text-7xl); } h2 { font-size: var(--bq-text-5xl); } } p { margin: 0 0 var(--bq-space-4); } a { color: var(--bq-color-action); text-decoration: none; transition: color var(--bq-transition-fast); } a:hover { color: var(--bq-color-action-hover); } /* Container */ .bq-container { width: 100%; max-width: var(--bq-container-max); margin: 0 auto; padding-left: var(--bq-container-pad); padding-right: var(--bq-container-pad); } /* Section padding */ .bq-section { padding-top: var(--bq-space-16); padding-bottom: var(--bq-space-16); } @media (min-width: 768px) { .bq-section { padding-top: var(--bq-space-24); padding-bottom: var(--bq-space-24); } } /* Eyebrow / overline */ .bq-eyebrow { font-family: var(--bq-font-display); font-size: var(--bq-text-sm); font-weight: var(--bq-weight-semibold); letter-spacing: var(--bq-tracking-wider); text-transform: uppercase; color: var(--bq-color-sky); margin-bottom: var(--bq-space-3); display: inline-block; }