/* Google Fonts loaded via tags in each HTML — not @import — to avoid render-blocking. */ /* ========================================================================== BATTLE CONNECTS — Design System Branch: feature/warm-editorial-redesign Palette: Primary: Charcoal #1A1A1A (ink) · Warm Cream #F5F0E8 (parchment) Accent: Champagne Gold #C9A96E (bronze/electric) · #B8944F (hover) Neutral: Warm Gray #7A7368 (ash) · Warm Fog #E8E3DA Contrast verified: --bronze on --paper: ~4.7:1 (AA) --ink on --parchment: ~14.8:1 (AAA) --bronze on --ink: ~5.8:1 (AA) --ash on --parchment: ~4.6:1 (AA) Headlines: Cormorant Garamond 300/400 Body: Inter 400/500/600 ========================================================================== */ /* ── Scale definitions ──────────────────────────────────────────────────── */ :root { /* Primary — Steel Blue */ --steel-blue-50: #f4f7fb; --steel-blue-100: #e8eef6; --steel-blue-200: #ccdceb; --steel-blue-300: #9fc0da; --steel-blue-400: #6c9ec4; --steel-blue-500: #4881ac; --steel-blue-600: #376892; --steel-blue-700: #2d5477; --steel-blue-800: #294863; --steel-blue-900: #263e54; --steel-blue-950: #192838; /* Secondary — Energy Yellow */ --energy-yellow-50: #fefbe8; --energy-yellow-100: #fff8c2; --energy-yellow-200: #ffec89; --energy-yellow-300: #ffe064; --energy-yellow-400: #fdc412; --energy-yellow-500: #ecab06; --energy-yellow-600: #cc8302; --energy-yellow-700: #a35c05; --energy-yellow-800: #86480d; --energy-yellow-900: #723b11; --energy-yellow-950: #431d05; /* Tertiary — Double Colonial White */ --double-colonial-white-50: #fbf9ef; --double-colonial-white-100: #f3edd2; --double-colonial-white-200: #e8ddab; --double-colonial-white-300: #d8c271; --double-colonial-white-400: #cfae50; --double-colonial-white-500: #c5953b; --double-colonial-white-600: #ae7631; --double-colonial-white-700: #915a2c; --double-colonial-white-800: #774929; --double-colonial-white-900: #623c25; --double-colonial-white-950: #371f11; /* Neutral — Ebony */ --ebony-50: #ebf6ff; --ebony-100: #dbedff; --ebony-200: #bfddff; --ebony-300: #98c4ff; --ebony-400: #6fa1ff; --ebony-500: #4e7dff; --ebony-600: #2e55fd; --ebony-700: #2242e0; --ebony-800: #1f3ab4; --ebony-900: #22388d; --ebony-950: #070b1d; /* ── Foundation tokens ──────────────────────────────────────────────────── */ /* Color */ --ink: #1A1A1A; /* charcoal — text + dark section bg */ --parchment: #F5F0E8; /* warm cream body background */ --paper: #FDFBF7; /* warm white — cards/surfaces */ --bronze: #C9A96E; /* champagne gold — accent */ --bronze-dark: #B8944F; /* pressed/hover gold */ --ash: #7A7368; /* warm gray — muted text */ --fog: #E8E3DA; /* warm fog — light borders */ --fog-dark: #D4CFC5; /* darker warm border */ /* Typography */ --font-display: "Cormorant Garamond", Georgia, serif; --font-body: "Inter", system-ui, sans-serif; /* Spacing — strict scale, no ad-hoc values */ --s1: 0.5rem; /* 8px */ --s2: 0.75rem; /* 12px */ --s3: 1rem; /* 16px */ --s4: 1.5rem; /* 24px */ --s5: 2.5rem; /* 40px */ --s6: 4rem; /* 64px */ --s7: 6rem; /* 96px — mobile section padding */ --s8: 10rem; /* 160px — desktop section padding */ /* Layout */ --container: 72rem; --container-narrow: 48rem; /* Accent — champagne gold (unified with bronze) */ --electric: #C9A96E; /* gold — same as bronze for unified accent */ --electric-dark: #B8944F; /* hover/pressed */ /* Semantic color tokens (compatibility layer for theme switching) */ --color-bg: var(--parchment); --color-surface: var(--paper); --color-surface-raised: var(--parchment); --color-text: var(--ink); --color-text-muted: var(--ash); --color-heading: var(--ink); --color-accent: var(--bronze); --color-accent-strong: var(--bronze-dark); --color-accent-subtle: rgba(201, 169, 110, 0.35); --color-accent-glow: rgba(201, 169, 110, 0.15); --color-border: var(--fog); --color-border-accent: rgba(201, 169, 110, 0.28); --color-on-accent: var(--ink); --color-inverse-bg: var(--ink); --color-inverse-text: var(--paper); /* Form — neumorphic inputs */ --form-bg: #EDE8DF; /* warm cream input bg */ --form-shadow-rest: inset 2px 5px 10px rgba(0, 0, 0, 0.1); --form-shadow-focus: 8px 8px 60px #d4cfc5, -8px -8px 60px #fdfbf7; } /* ── Reset ──────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.65; color: var(--ink); background: var(--parchment); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 300; line-height: 1.05; letter-spacing: -0.025em; color: var(--ink); margin: 0; } p { margin: 0; } a { color: inherit; text-decoration: none; } img, video { display: block; max-width: 100%; height: auto; } /* Ensure [hidden] attribute is respected even when CSS resets set display: block */ [hidden] { display: none !important; } ul, ol { margin: 0; padding: 0; list-style: none; } .skip-link { position: absolute; top: -100%; left: 0; padding: 0.75rem 1.25rem; background: var(--ink); color: var(--paper); font-size: 0.875rem; font-weight: 600; z-index: 1000; } .skip-link:focus { top: 0; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── Layout helpers ─────────────────────────────────────────────────────── */ .container { width: min(100% - 3rem, var(--container)); margin-inline: auto; } .container--narrow { width: min(100% - 3rem, var(--container-narrow)); margin-inline: auto; } /* ── Section structure ──────────────────────────────────────────────────── */ .section { padding-block: var(--s8); } .section--ink { background: var(--ink); color: var(--paper); } /* Section dividers — a single 1px fog line between same-bg sections */ .section+.section:not(.section--ink) { border-top: none; } /* ── Typography scale ───────────────────────────────────────────────────── */ .eyebrow { display: none; align-items: center; gap: 0.6rem; font-family: var(--font-body); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent); } .eyebrow::before { content: ''; width: 1.5rem; height: 1px; background: var(--color-accent); flex-shrink: 0; opacity: 0.6; } /* On dark backgrounds */ .section--ink .eyebrow { color: rgba(255, 255, 255, 0.6); /* was 0.45 — borderline fail on navy → now ~6.5:1 ✓ */ } .section--ink .eyebrow::before { background: rgba(255, 255, 255, 0.4); /* decorative line, bumped for visibility */ } /* ── Button system ──────────────────────────────────────────────────────── */ /* ── Sweep button ────────────────────────────────────────────────────────── */ .btn-sweep { padding: 0; margin: 0; border: none; background: none; cursor: pointer; position: relative; display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-body); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: var(--ink); } /* Underline sweep */ .btn-sweep::after { position: absolute; content: ""; width: 0; left: 0; bottom: -5px; background: var(--color-accent); height: 1px; transition: width 0.3s ease-out; } /* Text colour fill — span holds the label */ .btn-sweep span { position: relative; color: var(--ink); } .btn-sweep span::before { position: absolute; content: attr(data-text); inset: 0; color: var(--color-accent); overflow: hidden; width: 0%; transition: width 0.3s ease-out; white-space: nowrap; } /* Arrow icon */ .btn-sweep svg { color: var(--ink); transition: transform 0.2s ease 0.1s, color 0.2s ease 0.1s; flex-shrink: 0; width: 14px; height: 14px; } /* Hover states */ .btn-sweep:hover::after { width: 100%; } .btn-sweep:hover span::before { width: 100%; } .btn-sweep:hover svg { transform: translateX(4px); color: var(--color-accent); } /* On dark backgrounds */ .btn-sweep--light { color: var(--paper); } .btn-sweep--light span { color: var(--paper); transition: color 0.2s ease; } .btn-sweep--light span::before { content: none; } .btn-sweep--light::after { background: var(--color-accent); } .btn-sweep--light svg { color: var(--paper); } .btn-sweep--light:hover svg { color: var(--color-accent); } .btn-sweep--light:hover span, .btn-sweep--light:focus-visible span { color: var(--color-accent); } .btn-sweep:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; } @media (prefers-reduced-motion: reduce) { .btn-sweep::after, .btn-sweep span::before, .btn-sweep svg { transition: none; } }