/* Jaydon Coombs-Goodfellow — Design System Colors & Type tokens. Dark Manchester City pitch-night theme: deep navy bases, sky-blue accents, glow-lit type, futuristic scan-line/pitch motifs. */ /* ---------- Fonts ---------- */ /* Inter is loaded from Google Fonts at runtime. Add to . */ :root { /* ===== COLORS ===== */ /* Base surfaces (darkest → lightest) */ --bg-deep: #070D1B; /* deepest canvas */ --bg-base: #0B1426; /* main page background */ --bg-raised: #111A2E; /* card background */ --bg-elevated: #172239; /* dropdowns, hover surfaces */ --bg-pitch: #0A111E; /* images / figure wells */ /* Borders & structural lines */ --border-soft: #2A3655; /* default borders on dark */ --border-mid: #4A5680; --border-glow: rgba(108, 171, 221, 0.35); /* focus / hover glow */ --border-hair: rgba(108, 171, 221, 0.12); /* hairline separators */ /* Text / foreground */ --fg1: #E8EDF7; /* primary text */ --fg2: #B4C2D9; /* secondary / leads */ --fg3: #7A8AA6; /* muted, captions */ --fg4: #5A6680; /* dim */ --white: #FFFFFF; /* Brand — City sky blues (bright variants for dark bg) */ --city-blue: #6CABDD; /* primary accent */ --city-blue-dark: #4A8FC7; /* gradient pair */ --city-blue-deep: #8BC0EB; /* eyebrows, links */ --city-blue-bright: #A5D8FF; /* shine / hover bright */ --city-blue-glow: rgba(108, 171, 221, 0.28); --city-blue-wash: rgba(108, 171, 221, 0.08); /* Navy accents (classic City) */ --navy: #1C2C5B; --navy-soft: #2D3E70; --navy-deep: #0E1938; /* Specials */ --gold: #F6C84B; /* trophy / highlight */ --pitch-green: #0C1C18; /* rare pitch-wash */ /* Semantic */ --link: var(--city-blue-deep); --link-hover: var(--city-blue-bright); --selection-bg: var(--city-blue); --selection-fg: var(--bg-deep); /* ===== GRADIENTS ===== */ --grad-bg: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(108, 171, 221, 0.08), transparent 60%), linear-gradient(180deg, #0B1426 0%, #070D1B 100%); --grad-hero: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(108, 171, 221, 0.14), transparent 60%), linear-gradient(180deg, #0E1A35 0%, #0B1426 60%, #070D1B 100%); --grad-primary-btn: linear-gradient(135deg, #6CABDD 0%, #4A8FC7 100%); --grad-primary-btn-hover: linear-gradient(135deg, #8BC0EB 0%, #6CABDD 100%); --grad-shine: linear-gradient(90deg, #6CABDD 0%, #A5D8FF 50%, #6CABDD 100%); --grad-line: linear-gradient(90deg, transparent, var(--city-blue), transparent); /* ===== SHADOW / GLOW SYSTEM ===== */ --shadow-card: 0 10px 24px rgba(0, 0, 0, 0.4); --shadow-card-hover: 0 14px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(108, 171, 221, 0.15); --shadow-lift: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(108, 171, 221, 0.2); --shadow-menu: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(108, 171, 221, 0.08); --glow-sm: 0 0 10px var(--city-blue-glow); --glow-md: 0 0 20px rgba(108, 171, 221, 0.35); --glow-lg: 0 0 30px rgba(108, 171, 221, 0.35), 0 0 60px rgba(108, 171, 221, 0.08); --glow-btn: 0 6px 20px rgba(108, 171, 221, 0.18); --glow-btn-hover: 0 10px 32px rgba(108, 171, 221, 0.4), 0 0 30px rgba(108, 171, 221, 0.35); /* ===== RADII ===== */ --r-xs: 4px; --r-sm: 6px; /* buttons */ --r-md: 8px; /* small cards, principles */ --r-lg: 10px; /* default card */ --r-xl: 14px; --r-pill: 999px; /* ===== SPACING (4px base) ===== */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; /* ===== EASING / MOTION ===== */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 0.15s; --dur-base: 0.25s; --dur-slow: 0.4s; /* ===== TYPE — SCALE ===== */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --fs-eyebrow: 0.78rem; --fs-meta: 0.82rem; --fs-body-sm: 0.93rem; --fs-body: 1.07rem; --fs-lead: 1.18rem; --fs-h3: 1.25rem; --fs-h2-sm: 1.55rem; --fs-h2: clamp(1.9rem, 3.5vw, 2.7rem); --fs-h1-page: clamp(2.3rem, 5vw, 3.6rem); --fs-hero: clamp(2.6rem, 6vw, 5rem); --lh-tight: 1.05; --lh-snug: 1.2; --lh-base: 1.6; --lh-loose: 1.8; --ls-tight: -0.035em; /* hero */ --ls-tighter: -0.028em; /* page h1 */ --ls-snug: -0.016em; /* h2 */ --ls-eyebrow: 0.2em; /* uppercase eyebrows */ } /* ===== SEMANTIC TYPE ===== */ .ds-hero { font-family: var(--font-sans); font-weight: 800; font-size: var(--fs-hero); line-height: 1.02; letter-spacing: var(--ls-tight); color: var(--fg1); } .ds-hero .accent { background: var(--grad-shine); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 20px rgba(108, 171, 221, 0.4)); animation: ds-text-shine 5s linear infinite; } @keyframes ds-text-shine { 0% { background-position: 0% center; } 100% { background-position: 200% center; } } .ds-h1 { font-family: var(--font-sans); font-weight: 800; font-size: var(--fs-h1-page); line-height: var(--lh-tight); letter-spacing: var(--ls-tighter); color: var(--fg1); } .ds-h2 { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.024em; color: var(--fg1); } .ds-h3 { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.01em; color: var(--fg1); } .ds-lead { font-family: var(--font-sans); font-size: var(--fs-lead); color: var(--fg2); line-height: 1.55; } .ds-body { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body); color: var(--fg2); line-height: var(--lh-loose); } .ds-caption { font-family: var(--font-sans); font-size: var(--fs-meta); color: var(--fg3); font-style: italic; line-height: 1.5; } .ds-eyebrow { font-family: var(--font-sans); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--city-blue-deep); } .ds-meta { font-family: var(--font-sans); font-size: var(--fs-meta); color: var(--fg3); font-weight: 500; } .ds-mono { font-family: var(--font-mono); font-size: 0.92em; color: var(--fg2); }