/* SkyTeam Aviation — Design Tokens * Tuned to match the live skyteamaviation.com course page palette. */ :root { /* Brand — gold accent system (matches live site exactly) */ --gold: #c9a24d; --gold-deep: #b58e3d; --gold-darker: #a78338; --gold-12: rgba(201,162,77,0.12); --gold-18: rgba(201,162,77,0.18); --gold-30: rgba(201,162,77,0.30); --gold-08: rgba(201,162,77,0.08); /* Neutrals (live site values) */ --ink: #111111; --ink-2: #1a1a1a; --body: #555555; --body-soft: #666666; --muted: #8a8a8a; --border: #eeeeee; --border-2: #f4f4f4; --bg: #ffffff; --bg-2: #fafafa; --bg-tint: #f8f8f8; /* Page background — slight off-white that lets the white section-cards pop */ --page-bg: #f3f3f3; /* Dark gradient blocks */ --dark-grad: linear-gradient(135deg, #111111 0%, #1a1a1a 100%); --dark-grad-radial: radial-gradient(circle at 100% 0%, rgba(201,162,77,0.22) 0%, transparent 55%); /* Gold gradient (buttons / pills) */ --gold-grad: linear-gradient(135deg, #c9a24d 0%, #b58e3d 100%); /* States */ --success: #1F9D55; --error: #D7263D; /* Typography — match live: system stack + Inter for fallback unification */ --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Cairo", sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Cairo", sans-serif; --fs-h1: clamp(2rem, 3.4vw + 1rem, 3.4rem); --fs-h2: clamp(1.7rem, 2vw + 1rem, 2.4rem); /* live = 38px */ --fs-h3: clamp(1.15rem, 0.6vw + 1rem, 1.35rem); --fs-lead: 17px; /* live subtitle */ --fs-body: 16px; --fs-sm: 15px; --fs-xs: 12px; /* Spacing scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 28px; --space-7: 40px; --space-8: 56px; --space-9: 72px; --space-10: 96px; /* Radii (live values) */ --r-sm: 8px; --r-md: 12px; --r-card: 14px; --r-lg: 20px; --r-xl: 24px; --r-pill: 999px; /* Shadows (live values) */ --shadow-sm: 0 2px 8px rgba(0,0,0,0.04); --shadow-md: 0 8px 24px rgba(0,0,0,0.06); --shadow-lg: 0 20px 60px rgba(0,0,0,0.08); --shadow-gold: 0 14px 30px rgba(201,162,77,0.45); /* Transitions */ --t-fast: 150ms ease; --t-base: 250ms ease; --t-slow: 400ms cubic-bezier(.2,.8,.2,1); /* Layout */ --container: 1440px; --container-narrow: 1080px; --container-wide: 1600px; --container-edge: 100%; --header-h: 76px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .plane-motion, .plane-route .plane { display: none !important; } } /* ============================================================ * DARK THEME (toggled by [data-theme="dark"] on ) * Overrides the same tokens so the rest of the CSS stays untouched. * ============================================================ */ html[data-theme="dark"] { --gold: #d4a84d; --gold-deep: #c9a24d; --gold-darker: #b58e3d; --gold-12: rgba(212,168,77,0.16); --gold-18: rgba(212,168,77,0.22); --gold-30: rgba(212,168,77,0.36); --gold-08: rgba(212,168,77,0.10); --ink: #f4f4f5; --ink-2: #ffffff; --body: #c8ccd2; --body-soft: #a6abb3; --muted: #7d8088; --border: #2a2b30; --border-2: #1f2025; --bg: #15161a; --bg-2: #1c1d22; --bg-tint: #1a1b1f; --page-bg: #0a0b0e; --gold-grad: linear-gradient(135deg, #d4a84d 0%, #c9a24d 100%); --shadow-sm: 0 2px 8px rgba(0,0,0,0.4); --shadow-md: 0 8px 24px rgba(0,0,0,0.45); --shadow-lg: 0 20px 60px rgba(0,0,0,0.55); --shadow-gold: 0 14px 30px rgba(212,168,77,0.35); }