/* ═══════════════════════════════════════════════════════════════════════════ LAUNCHPAD TECHNOLOGY — DESIGN TOKENS This file contains all CSS custom properties for the Launchpad Technology brand design system. Import this file first in any web project. Usage: Then apply a variant class to or : ← Core / private sector ← Public sector ← Robotics If no variant class is set, Launchpad core is the default. ═══════════════════════════════════════════════════════════════════════════ */ /* ── SHARED TOKENS (all divisions) ────────────────────────────────────── */ :root { /* Typography */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif; --text-display: 3.5rem; --text-h1: 2.5rem; --text-h2: 2rem; --text-h3: 1.5rem; --text-h4: 1.25rem; --text-body: 1rem; --text-small: 0.875rem; --text-caption: 0.75rem; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; --leading-tight: 1.1; --leading-snug: 1.2; --leading-normal: 1.4; --leading-relaxed: 1.7; --tracking-tighter: -0.03em; --tracking-tight: -0.025em; --tracking-snug: -0.015em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; /* Spacing (8px base) */ --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 */ /* Layout */ --max-width: 1200px; --max-text: 680px; --gutter-mobile: 1.5rem; --gutter-tablet: 2rem; --gutter-desktop: 3rem; --grid-columns: 12; --grid-gap: 1.5rem; /* Breakpoints (for reference — use in media queries) */ /* --bp-sm: 640px; */ /* --bp-md: 768px; */ /* --bp-lg: 1024px; */ /* --bp-xl: 1280px; */ /* --bp-2xl: 1440px; */ /* Border Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.06); --shadow-xl: 0 10px 25px rgba(0, 0, 0, 0.06), 0 4px 10px rgba(0, 0, 0, 0.04); /* Transitions */ --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --duration-fast: 150ms; --duration-normal: 200ms; --duration-slow: 300ms; /* Z-index scale */ --z-base: 0; --z-elevated: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; /* Functional colours (shared across all divisions) */ --color-success: #059669; --color-warning: #D97706; --color-error: #DC2626; --color-info: #2563EB; } /* ── LAUNCHPAD CORE (default) ─────────────────────────────────────────── */ /* The three CANONICAL brand colours — taken directly from the official logo SVGs (Launchpad Technology Logo Brand Pack/svg/). Do not alter these values. They are what the printed business cards, logo lockup, and brand collateral all use. --lp-brand-navy #0D1123 — "LAUNCHPAD" wordmark, outer arrow, circuit traces, dark backgrounds --lp-brand-blue #4490E2 — accent, "TECHNOLOGY" wordmark, inner arrow tip, inner traces --lp-brand-blue-light #4F8CC9 — ICON-ONLY. Inner arrow stem inside the rocket mark. Do NOT use for type, links, CTAs, hover states, backgrounds or any UI surface — reach for --lp-blue-400 or --lp-blue-50 instead. */ :root, .brand-launchpad { /* ── Canonical brand colours (immutable) ─────────────────────────────── */ --lp-brand-navy: #0D1123; --lp-brand-blue: #4490E2; --lp-brand-blue-light: #4F8CC9; /* icon-only — see header note */ /* ── Tonal blue ramp (derived from --lp-brand-blue) ──────────────────── */ --lp-blue-700: #2C72C2; /* pressed / active CTA */ --lp-blue-500: #4490E2; /* = brand blue, primary accent */ --lp-blue-400: #6FA8E8; /* hover state for primary CTA */ --lp-blue-50: #EAF2FB; /* tinted backgrounds, ghost hover, soft callouts */ /* ── Neutrals ────────────────────────────────────────────────────────── */ --color-bg-primary: #FFFFFF; --color-bg-secondary: #F8FAFC; --color-bg-dark: var(--lp-brand-navy); /* primary dark = brand navy */ --color-bg-dark-elevated: #131830; /* one step lighter than brand navy */ --color-bg-dark-surface: #1E2440; /* elevated cards on dark */ --color-text-primary: var(--lp-brand-navy); /* body/heading text on light */ --color-text-secondary: #475569; --color-text-tertiary: #94A3B8; --color-text-on-dark: #FFFFFF; --color-text-on-dark-secondary: #94A3B8; --color-border: #E2E8F0; --color-border-hover: #CBD5E1; --color-border-focus: var(--lp-brand-blue); /* ── Accent semantic tokens ──────────────────────────────────────────── */ --color-accent: var(--lp-brand-blue); /* primary CTA, links, focus */ --color-accent-strong: var(--lp-blue-700); /* pressed / active state */ --color-accent-hover: var(--lp-blue-400); /* hover state */ --color-accent-subtle: var(--lp-blue-50); /* tinted bg, ghost hover */ --color-accent-text: var(--lp-blue-700); /* link text on light (contrast) */ /* ── Wordmark colours (non-negotiable, match printed asset) ──────────── */ --color-wordmark-primary-on-light: var(--lp-brand-navy); /* "LAUNCHPAD" */ --color-wordmark-primary-on-dark: #FFFFFF; /* "LAUNCHPAD" */ --color-wordmark-secondary: var(--lp-brand-blue); /* "TECHNOLOGY" — always */ /* ── Surfaces ────────────────────────────────────────────────────────── */ --color-card-bg: #FFFFFF; --color-card-border: #E2E8F0; --color-card-shadow: var(--shadow-md); /* ── Nav ─────────────────────────────────────────────────────────────── */ --color-nav-bg: rgba(13, 17, 35, 0.95); /* brand-navy at 95% */ --color-nav-text: rgba(255, 255, 255, 0.85); --color-nav-text-hover: #FFFFFF; /* ── Logo asset paths (relative to project root) ─────────────────────── */ --logo-stacked: url("../assets/images/logos/launchpad-technology-logo.svg"); --logo-stacked-dark: url("../assets/images/logos/launchpad-technology-logo-dark.svg"); --logo-landscape: url("../assets/images/logos/launchpad-technology-logo-landscape.svg"); --logo-landscape-dark: url("../assets/images/logos/launchpad-technology-logo-landscape-dark.svg"); --logo-icon: url("../assets/images/logos/launchpad-technology-icon.svg"); --logo-icon-dark: url("../assets/images/logos/launchpad-technology-icon-dark.svg"); } /* ── GOVOPTIMISE ──────────────────────────────────────────────────────── */ /* GovOptimise inherits the canonical .brand-launchpad palette unchanged. Decision 13 May 2026: single trading entity uses a single palette. Differentiation by wordmark, overline, tone of voice and asset selection. Earlier gold accent (#C9A027) is DEPRECATED. */ .brand-govoptimise { /* All tokens inherited from :root / .brand-launchpad. */ } /* ── ROBOATLAS ────────────────────────────────────────────────────────── */ /* RoboAtlas inherits the canonical .brand-launchpad palette unchanged. Same single-trading-entity reasoning as GovOptimise. Earlier electric-blue (#0077FF), cyan (#48CAE4) and purple (#7B2FBE) accents are DEPRECATED. */ .brand-roboatlas { /* All tokens inherited from :root / .brand-launchpad. */ } /* ── BASE RESET & DEFAULTS ────────────────────────────────────────────── */ /* Include this section if tokens.css is your only stylesheet, otherwise move to base.css */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: var(--text-body); font-weight: var(--weight-regular); line-height: var(--leading-relaxed); color: var(--color-text-primary); background-color: var(--color-bg-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } h1, h2, h3, h4, h5, h6 { color: var(--color-text-primary); line-height: var(--leading-snug); text-wrap: balance; } p { color: var(--color-text-secondary); max-width: var(--max-text); text-wrap: pretty; } a { color: var(--color-accent-text); text-decoration: none; transition: color var(--duration-fast) var(--ease-default); } a:hover { color: var(--color-accent-hover); } /* Focus styles — accessibility */ :focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ── UTILITY CLASSES ──────────────────────────────────────────────────── */ .container { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--gutter-mobile); } @media (min-width: 768px) { .container { padding-inline: var(--gutter-tablet); } } @media (min-width: 1024px) { .container { padding-inline: var(--gutter-desktop); } } .section { padding-block: var(--space-16); } @media (min-width: 1024px) { .section { padding-block: var(--space-24); } } .section-header { text-align: center; margin-bottom: var(--space-12); } .section-header h2 { font-size: var(--text-h2); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-4); } .section-header p { font-size: var(--text-body); color: var(--color-text-secondary); max-width: 640px; margin-inline: auto; } .overline { font-size: var(--text-caption); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-accent-text); margin-bottom: var(--space-3); display: block; } /* Text on dark backgrounds */ .dark-section { background-color: var(--color-bg-dark); color: var(--color-text-on-dark); } .dark-section h1, .dark-section h2, .dark-section h3, .dark-section h4 { color: var(--color-text-on-dark); } .dark-section p { color: var(--color-text-on-dark-secondary); }