/* ============================================================================= design-system.css -------------------------------------------------------------------------- Cameron Visagie — design tokens, theme, base layer. Loaded once on every page (Page 0 → Inline CSS reference). ========================================================================== */ /* ── Reset / Base ───────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--cv-font-body); font-size: 16px; line-height: 1.6; color: var(--cv-text); background: var(--cv-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg, video { max-width: 100%; height: auto; display: block; } /* ── Design tokens — light theme (default) ──────────────────────────────── */ :root { /* Brand palette — South Africa / New Zealand connection */ --cv-sky: #4FA3E3; /* sky blue */ --cv-ocean: #1B5E97; /* ocean blue */ --cv-deep: #0B2545; /* deep navy — hero + footer */ --cv-accent: #E07A2A; /* professional orange */ --cv-accent-soft:#F4D6B8; --cv-cream: #F8F4ED; /* warm off-white */ --cv-paper: #FFFFFF; --cv-mist: #EEF2F6; --cv-slate: #4A5568; --cv-ink: #1A1F36; /* Semantic tokens */ --cv-bg: var(--cv-cream); --cv-bg-elev: var(--cv-paper); --cv-bg-section: var(--cv-mist); --cv-text: var(--cv-ink); --cv-text-muted: var(--cv-slate); --cv-text-invert: #FFFFFF; --cv-link: var(--cv-ocean); --cv-link-hover: var(--cv-accent); --cv-border: #D9DFE6; --cv-rule: #E8ECF1; --cv-shadow-sm: 0 1px 2px rgba(11, 37, 69, 0.06); --cv-shadow-md: 0 4px 16px rgba(11, 37, 69, 0.10); --cv-shadow-lg: 0 20px 60px rgba(11, 37, 69, 0.18); /* Glass surface (used sparingly — hero overlay, cards over imagery) */ --cv-glass-bg: rgba(255, 255, 255, 0.72); --cv-glass-border: rgba(255, 255, 255, 0.45); --cv-glass-blur: 18px; /* Typography */ --cv-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --cv-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --cv-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Spacing scale (4-pt grid) */ --cv-space-1: 4px; --cv-space-2: 8px; --cv-space-3: 12px; --cv-space-4: 16px; --cv-space-5: 24px; --cv-space-6: 32px; --cv-space-7: 48px; --cv-space-8: 64px; --cv-space-9: 96px; --cv-space-10: 128px; /* Radius */ --cv-radius-sm: 4px; --cv-radius-md: 10px; --cv-radius-lg: 18px; --cv-radius-pill: 999px; /* Layout */ --cv-container: 1180px; --cv-content: 720px; /* Motion */ --cv-ease: cubic-bezier(0.4, 0, 0.2, 1); --cv-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --cv-dur-fast: 150ms; --cv-dur-base: 250ms; --cv-dur-slow: 400ms; } /* ── Dark theme — toggled via [data-cv-theme="dark"] on ──────────── */ html[data-cv-theme="dark"] { --cv-bg: #0E1726; --cv-bg-elev: #15203A; --cv-bg-section: #1A2540; --cv-text: #E6EDF3; --cv-text-muted: #A8B3C7; --cv-link: var(--cv-sky); --cv-link-hover: var(--cv-accent); --cv-border: #2A3553; --cv-rule: #1F2A47; --cv-glass-bg: rgba(21, 32, 58, 0.6); --cv-glass-border: rgba(255, 255, 255, 0.08); --cv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --cv-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); --cv-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6); } /* Respect users who prefer dark mode but haven't toggled */ @media (prefers-color-scheme: dark) { html:not([data-cv-theme]) { --cv-bg: #0E1726; --cv-bg-elev: #15203A; --cv-bg-section: #1A2540; --cv-text: #E6EDF3; --cv-text-muted: #A8B3C7; --cv-link: var(--cv-sky); --cv-border: #2A3553; --cv-rule: #1F2A47; --cv-glass-bg: rgba(21, 32, 58, 0.6); --cv-glass-border: rgba(255, 255, 255, 0.08); } } /* ── Typography ────────────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--cv-font-display); color: var(--cv-text); margin: 0 0 var(--cv-space-4) 0; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; } h1 { font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: -0.02em; } h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); } h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); } h4 { font-size: 1.125rem; } p { margin: 0 0 var(--cv-space-4) 0; } a { color: var(--cv-link); text-decoration: none; transition: color var(--cv-dur-fast) var(--cv-ease); } a:hover, a:focus { color: var(--cv-link-hover); } code, pre { font-family: var(--cv-font-mono); font-size: 0.92em; } code { background: var(--cv-bg-section); padding: 2px 6px; border-radius: var(--cv-radius-sm); } pre { background: var(--cv-bg-section); padding: var(--cv-space-4); border-radius: var(--cv-radius-md); overflow-x: auto; } hr { border: 0; border-top: 1px solid var(--cv-rule); margin: var(--cv-space-6) 0; } ::selection { background: var(--cv-accent); color: var(--cv-text-invert); } /* ── Layout primitives ──────────────────────────────────────────────────── */ .cv-container { max-width: var(--cv-container); margin: 0 auto; padding: 0 var(--cv-space-5); } .cv-content { max-width: var(--cv-content); margin: 0 auto; } .cv-section { padding: var(--cv-space-9) 0; } .cv-section--tight { padding: var(--cv-space-7) 0; } .cv-section--mist { background: var(--cv-bg-section); } .cv-section--deep { background: var(--cv-deep); color: var(--cv-text-invert); } .cv-section--deep h1, .cv-section--deep h2, .cv-section--deep h3 { color: var(--cv-text-invert); } .cv-grid { display: grid; gap: var(--cv-space-5); } .cv-grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .cv-grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .cv-grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } /* ── Accessibility ─────────────────────────────────────────────────────── */ :focus-visible { outline: 2px solid var(--cv-accent); outline-offset: 2px; border-radius: var(--cv-radius-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } html { scroll-behavior: auto; } } .cv-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Skip link */ .cv-skip-link { position: absolute; top: -40px; left: 8px; background: var(--cv-accent); color: var(--cv-text-invert); padding: 8px 14px; border-radius: var(--cv-radius-sm); z-index: 9999; transition: top var(--cv-dur-fast) var(--cv-ease); } .cv-skip-link:focus { top: 8px; }