/* ════════════════════════════════════════════════════════════════ AURORA — northern-lights theme ----------------------------------------------------------------- Palette Primary #5eead4 muted cyan-teal (aurora green-cyan curtain) Secondary #b98bff soft violet (magenta aurora curtain) Ink #e4f0ff cool off-white Indigo #0b1030 deep midnight base ----------------------------------------------------------------- Every token is explicitly overridden to prevent light-theme fallbacks (from variables.css :root) from leaking through. Aurora-specific gradient / glow effects live at the bottom. ════════════════════════════════════════════════════════════════ */ [data-theme="aurora"] { /* ── Page / section surfaces ───────────────────────────────── Two tones only — deep indigo for everything dark (nav, hero, footer, section-dark) and a very slightly lifted indigo for section-light and cards. Using two close tones avoids the visible color step between nav and the first content section. */ --c-page-bg: #0b1030; /* deep indigo base */ --c-section-light:#12173a; /* lifted indigo */ --c-section-dark: #080c24; /* near-black indigo */ --c-section-dark-text: #e4f0ff; --c-section-dark-text-rgb: 228,240,255; --c-hero-bg: #0b1030; /* == page-bg, seamless */ --c-hero-text: #e4f0ff; --c-hero-sub: rgba(228,240,255,.7); --c-particle-color: rgba(94,234,212,.8); --c-hero-gradient: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(94,234,212,.12) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 80% 10%, rgba(185,139,255,.10) 0%, transparent 55%), radial-gradient(ellipse 120% 60% at 50% -10%, rgba(0,0,0,.42) 0%, transparent 70%); /* ── Navigation ────────────────────────────────────────────── Nav bg == hero bg == page bg so the fixed topbar blends into whatever content scrolls underneath. Elevation comes from the shadow + subtle glow, not from a bg contrast. */ --c-nav-bg: #0b1030; --c-nav-btn-bg: transparent; --c-nav-btn-border: transparent; --c-nav-border: rgba(255,255,255,.06); --c-nav-shadow: 4px 0 30px rgba(0,0,0,.55), 0 0 60px rgba(94,234,212,.04); --c-nav-text: rgba(228,240,255,.82); --c-nav-text-muted: rgba(228,240,255,.42); --c-nav-hover-bg: rgba(94,234,212,.10); --c-nav-hover-text: #ffffff; --c-nav-active-bg: rgba(185,139,255,.15); /* violet tint highlights active */ --c-nav-active-text: #ffffff; --c-nav-active-bar: #5eead4; --c-nav-logo-area-border: rgba(255,255,255,.06); --c-nav-cta-bg: #5eead4; --c-nav-cta-text: #080c24; --c-nav-cta-hover: #2dd4bf; /* ── Language toggle ───────────────────────────────────────── */ --c-lang-text: rgba(228,240,255,.55); --c-lang-border: rgba(255,255,255,.14); --c-lang-active-bg: #5eead4; --c-lang-active-text: #080c24; --c-lang-active-border: #5eead4; --c-lang-switcher-bg: transparent; /* ── Top bar ───────────────────────────────────────────────── */ --c-topbar-bg: rgba(11,16,48,.78); --c-topbar-border: rgba(255,255,255,.06); --c-topbar-link-text: rgba(228,240,255,.78); --c-topbar-link-hover: #5eead4; --c-topbar-underline: #b98bff; /* violet underline */ --c-topbar-ctrl-text: rgba(228,240,255,.42); --c-topbar-ctrl-hover: rgba(255,255,255,.06); --c-topbar-lang-bg: rgba(255,255,255,.06); --c-topbar-lang-active-bg: rgba(255,255,255,.14); --c-topbar-lang-active-text: #5eead4; /* ── Mobile nav ────────────────────────────────────────────── */ --c-mobile-bar-bg: #080c24; --c-mobile-bar-border: rgba(255,255,255,.06); --c-mobile-overlay-bg: #080c24; --c-mobile-overlay-border: rgba(255,255,255,.06); --c-mobile-link-text: rgba(228,240,255,.78); --c-mobile-link-border: rgba(255,255,255,.06); --c-mobile-link-hover: #5eead4; --c-mobile-arrow: #b98bff; --c-mobile-close-text: rgba(228,240,255,.55); --c-mobile-close-bg: rgba(255,255,255,.06); --c-mobile-footer-border: rgba(255,255,255,.06); --c-mobile-lang-text: rgba(228,240,255,.42); --c-mobile-lang-border: rgba(255,255,255,.12); --c-mobile-lang-active-bg: #5eead4; --c-mobile-lang-active-text: #080c24; --c-mobile-lang-active-border: #5eead4; --c-mobile-tagline: rgba(228,240,255,.24); --c-hamburger: rgba(228,240,255,.82); /* ── Audio player ──────────────────────────────────────────── */ --c-audio-bg: rgba(255,255,255,.04); --c-audio-border: rgba(94,234,212,.22); --c-audio-play-bg: #5eead4; --c-audio-play-text: #080c24; --c-audio-play-hover: #b98bff; /* cyan → violet on hover */ --c-audio-play-shadow: rgba(94,234,212,.45); --c-audio-title: #5eead4; --c-audio-time: rgba(228,240,255,.4); --c-audio-vol-bg: rgba(255,255,255,.1); --c-audio-thumb: #5eead4; /* ── Footer ────────────────────────────────────────────────── */ --c-footer-bg: #05071c; --c-footer-text: rgba(228,240,255,.68); --c-footer-tagline: rgba(228,240,255,.5); --c-footer-heading: rgba(228,240,255,.32); --c-footer-link: rgba(228,240,255,.62); --c-footer-link-hover: #5eead4; --c-footer-email: rgba(228,240,255,.62); --c-footer-border: rgba(255,255,255,.08); --c-footer-social-bg: rgba(255,255,255,.05); --c-footer-social-border: rgba(255,255,255,.08); --c-footer-social-text: rgba(228,240,255,.7); --c-footer-social-hover-bg: rgba(94,234,212,.18); --c-footer-social-hover-text: #5eead4; --c-footer-copy: rgba(228,240,255,.28); --c-footer-legal: rgba(228,240,255,.35); --c-footer-legal-sep: rgba(255,255,255,.1); /* ── Accents ────────────────────────────────────────────────── Primary cyan-teal for most accents; violet (--c-accent-alt) is injected by aurora-specific rules below for card glow, button gradient, and topbar underline. */ --c-accent: #5eead4; --c-accent-dark: #2dd4bf; --c-accent-light: rgba(94,234,212,.18); --c-accent-pale: rgba(94,234,212,.08); --c-accent-rgb: 94,234,212; --c-accent-alt: #b98bff; /* violet — aurora only */ --c-eyebrow: #5eead4; --c-stat-num: #5eead4; --c-value-num: #b98bff; /* stat numbers in violet */ --c-post-cat: #5eead4; --c-card-tag-text: #5eead4; --c-card-tag-bg: rgba(94,234,212,.15); --c-highlight-border: #5eead4; --c-highlight-bg: rgba(94,234,212,.08); /* ── Buttons ───────────────────────────────────────────────── Primary button = cyan background, indigo text. Hover transitions to violet for the "aurora shift" feel. */ --c-btn-primary-bg: #5eead4; --c-btn-primary-text: #080c24; --c-btn-primary-border: transparent; --c-btn-primary-hover: #b98bff; --c-btn-glow: rgba(94,234,212,.5); --c-btn-outline-color: #5eead4; --c-btn-ghost-text: rgba(228,240,255,.88); --c-btn-ghost-border: rgba(255,255,255,.22); --c-btn-ghost-hover-text: #080c24; --c-btn-ghost-hover: var(--c-accent); /* ── Cards / inputs ────────────────────────────────────────── */ --c-card-bg: #12173a; --c-card-border: rgba(255,255,255,.1); --c-card-hover-shadow: 0 8px 40px rgba(0,0,0,.55), 0 0 30px rgba(94,234,212,.12), 0 0 60px rgba(185,139,255,.06); --c-brand-card-glow: rgba(94,234,212,.45); --c-brand-card-shimmer: rgba(185,139,255,.22); --c-input-bg: #12173a; --c-input-border: rgba(255,255,255,.12); --c-input-focus: #5eead4; --c-input-focus-ring: rgba(94,234,212,.28); /* ── Waves ─────────────────────────────────────────────────── */ --c-wave-bg-dark: #080c24; --c-wave-bg-light: #0b1030; --c-wave-bg-hero: #0b1030; --c-wave-bg-brand: #0b1030; --c-wave-bg-footer: #0b1030; /* ── Misc surfaces ─────────────────────────────────────────── */ --c-scrollbar-thumb: #1e2a58; --c-scrollbar-track: #0b1030; --c-cookie-bg: #080c24; --c-cookie-border: rgba(94,234,212,.22); /* ── Brand box tokens ──────────────────────────────────────── */ --c-brandbox-bg: #12173a; --c-brandbox-card: #080c24; --c-brandbox-logo: #05071c; --c-brandbox-border: rgba(94,234,212,.14); --c-brandbox-text: #e4f0ff; --c-brandbox-muted: rgba(228,240,255,.86); /* ── Button gradient tokens (cyan → violet "aurora shift") ─── */ --c-btn-gradient: linear-gradient(145deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.02) 100%); --c-btn-gradient-hover: linear-gradient(135deg, #5eead4 0%, #7dd3fc 45%, #b98bff 100%); --c-btn-shadow: 0 1px 3px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04); --c-btn-shadow-hover: 0 4px 14px rgba(94,234,212,.45), 0 0 28px rgba(185,139,255,.28), inset 0 1px 0 rgba(255,255,255,.15); /* ── Legacy aliases ─────────────────────────────────────────── Many older rules still read --charcoal / --walnut / --text as generic "site text color." In a dark theme these must resolve to LIGHT colors so those rules read correctly. */ --charcoal: #080c24; /* dark surface alias */ --text: #e4f0ff; --text-mid: #a0b4d4; --text-light: #68789e; --walnut: #080c24; --walnut-mid: #0b1030; --walnut-light: #68789e; --forest: #080c24; --forest-mid: #080c24; --forest-sage: #12173a; --forest-ink: #080c24; --linen: #0b1030; --linen-dark: #080c24; --linen-deeper: rgba(255,255,255,.08); --brand: #5eead4; --brand-dark: #2dd4bf; --brand-mid: #5eead4; --brand-light: #7dd3fc; /* sky-blue aurora highlight */ --brand-pale: rgba(94,234,212,.08); --amber: #5eead4; --amber-deep: #2dd4bf; --amber-light: rgba(94,234,212,.18); --amber-pale: rgba(94,234,212,.08); --gold: #b98bff; /* repurposed: violet glow */ --gold-light: #d4b0ff; --green-deep: #5eead4; --green-mid: #7dd3fc; --green-light: #a0ecff; --green-pale: rgba(94,234,212,.08); --border: rgba(255,255,255,.1); --cream: #0b1030; --cream-dark: #080c24; --white: #e4f0ff; } /* ════════════════════════════════════════════════════════════════ Aurora-only visual enhancements — gradient skies, colored glow These can't be expressed through CSS vars alone, so they land here as scoped [data-theme="aurora"] rules. ════════════════════════════════════════════════════════════════ */ /* Atmospheric page backdrop — subtle indigo→cobalt gradient with faint aurora curtain hues in the top-right corner. */ [data-theme="aurora"] body { background: radial-gradient(ellipse 90% 60% at 80% 0%, rgba(94,234,212,.07) 0%, transparent 60%), radial-gradient(ellipse 70% 50% at 10% 20%, rgba(185,139,255,.05) 0%, transparent 55%), linear-gradient(180deg, #0b1030 0%, #101640 45%, #0b1030 100%); background-attachment: fixed; } /* Brand-card hover: swap amber base glow for cyan + violet halo */ [data-theme="aurora"] .c-brand-card:hover { box-shadow: 0 0 0 1px rgba(94,234,212,.45), 0 8px 32px rgba(0,0,0,.35), 0 0 28px rgba(94,234,212,.25), 0 0 60px rgba(185,139,255,.18) !important; } /* Brand-card internal gradient — base.css hardcodes amber/green. Retint toward aurora's cyan + violet so the hover wash matches. */ [data-theme="aurora"] .c-brand-card::before { background: linear-gradient(135deg, rgba(94,234,212,.20) 0%, rgba(255,255,255,.05) 45%, rgba(185,139,255,.20) 100%) !important; } /* Stat numbers alternate between cyan and violet for "curtain" feel */ [data-theme="aurora"] .c-stats > .c-stat:nth-child(even) .c-stat__num { color: var(--c-accent-alt); text-shadow: 0 0 30px rgba(185,139,255,.35); } /* Subtle text-shadow on hero title — very light, just an aurora sheen */ [data-theme="aurora"] .c-hero__title, [data-theme="aurora"] .home-text__title { text-shadow: 0 2px 12px rgba(0,0,0,.5), 0 0 40px rgba(94,234,212,.08); } /* Primary/accent selection color */ [data-theme="aurora"] ::selection { background: rgba(185,139,255,.45); color: #ffffff; } /* ── Logo swaps (same pattern as cosmos/noir: show white logo) ── */ [data-theme="aurora"] .logo-black, [data-theme="aurora"] .logo-green, [data-theme="aurora"] .logo-whitegreen, [data-theme="aurora"] .top-logo-img.logo-black, [data-theme="aurora"] .top-logo-img.logo-green, [data-theme="aurora"] .top-logo-img.logo-whitegreen { display: none !important; } [data-theme="aurora"] .logo-white, [data-theme="aurora"] .top-logo-img.logo-white { display: block !important; } [data-theme="aurora"] .footer-logo.logo-black, [data-theme="aurora"] .footer-logo-sm.logo-black, [data-theme="aurora"] .footer-logo.logo-green, [data-theme="aurora"] .footer-logo-sm.logo-green, [data-theme="aurora"] .footer-logo.logo-whitegreen, [data-theme="aurora"] .footer-logo-sm.logo-whitegreen { display: none !important; } [data-theme="aurora"] .footer-logo.logo-white, [data-theme="aurora"] .footer-logo-sm.logo-white { display: inline-block !important; }