/* ============================================================ Johnson Gambit — Savanna Theme Activated by , toggled from the nav (js/theme.js). Palette from the golden-hour savanna reference: sunset amber sky, terracotta, deep acacia brown, golden grass. Everything variable-driven flips automatically via arctic.css's custom properties; the overrides below re-tint the rest. ============================================================ */ [data-theme="savanna"] { /* Repaint the core palette (names stay arctic-* — they are the site's theme slots, defined in css/arctic.css) */ --arctic-ice-blue: #A6521F; /* terracotta — primary */ --arctic-deep: #542B10; /* deep acacia brown — contrast */ --arctic-cyan: #B45309; /* burnt amber — accents on light bg */ --arctic-glow: #FBBF24; /* golden-hour glow */ --arctic-slate: #8A6B4B; /* warm taupe — secondary text */ --arctic-frost: #FAEFD9; /* sun-bleached cream — surfaces */ --arctic-ink: #3A2312; /* dark roast — body text */ --line-rgb: 166, 82, 31; --glow-rgb: 251, 191, 36; --shadow-rgb: 84, 43, 16; --accent-rgb: 180, 83, 9; --jg-accplat: #F0DFC0; --jg-nav-bg: rgba(250, 239, 217, 0.92); --jg-soft-white: #FDF6E9; --jg-creamy: #F7EBD2; --jg-off-white: #F3E5C9; } /* Surfaces that hardcode near-white tints get a warm cast */ [data-theme="savanna"] .nav-container { background: rgba(253, 246, 233, 0.8); } [data-theme="savanna"] .push-nav { background: rgba(250, 240, 220, 0.97); } @media (min-width: 1024px) { [data-theme="savanna"] .push-nav { background: transparent; } [data-theme="savanna"] .push-submenu, [data-theme="savanna"] .push-submenu .push-submenu { background: rgba(253, 247, 236, 0.97); } } [data-theme="savanna"] .event-container, [data-theme="savanna"] .thanks-container, [data-theme="savanna"] .journey-container, [data-theme="savanna"] .charter-container, [data-theme="savanna"] .history-event-card, [data-theme="savanna"] .content-container, [data-theme="savanna"] .gallery-container, [data-theme="savanna"] .promise-section, [data-theme="savanna"] .home-card, [data-theme="savanna"] .feed-controls, [data-theme="savanna"] .feed-card, [data-theme="savanna"] .profile-hero, [data-theme="savanna"] .kids-cards .kid-card { background: rgba(253, 247, 235, 0.85); } [data-theme="savanna"] .hero-content { background: rgba(253, 247, 235, 0.78); } [data-theme="savanna"] .home-card--accent { background: linear-gradient(160deg, rgba(253, 247, 235, 0.92), rgba(250, 224, 178, 0.88)); } [data-theme="savanna"] .theme-toggle { background: rgba(253, 246, 233, 0.7); } /* Footer: dusk over the grassland */ [data-theme="savanna"] .footer.site-footer { background: linear-gradient(180deg, rgba(74, 36, 12, 0.95), rgba(38, 17, 5, 0.97)); } [data-theme="savanna"] .footer.site-footer .footer-links a, [data-theme="savanna"] .footer.site-footer .footer-social a { color: #D9C29E; } [data-theme="savanna"] .footer.site-footer .footer-copy { color: #96784F; } /* Feed tag chips / cards pick up warm parchment */ [data-theme="savanna"] .feed-tag-chip { background: rgba(253, 247, 235, 0.75); } [data-theme="savanna"] .feed-controls input[type="search"], [data-theme="savanna"] .feed-controls select { background: #FDF8EE; } [data-theme="savanna"] .feed-empty { background: rgba(253, 247, 235, 0.65); } /* ============================================================ Savanna scene (built by js/savanna-bg.js) ============================================================ */ .savanna-scene { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: linear-gradient(180deg, #F6C453 0%, /* high golden sky */ #F8CE68 30%, #F4B04A 52%, /* sunset band */ #EFA03E 68%, #E8933B 82%, /* horizon amber */ #E2A94E 100%); pointer-events: none; } .savanna-scene svg { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: max(100vw, 1400px); height: auto; display: block; } @media (prefers-reduced-motion: no-preference) { .savanna-drift { animation: savannaDrift 90s ease-in-out infinite alternate; } @keyframes savannaDrift { from { transform: translateX(-0.6%) scale(1.02); } to { transform: translateX(0.6%) scale(1.02); } } /* The sun breathes; its ring pattern turns imperceptibly slowly */ .sun-glow { animation: sunPulse 9s ease-in-out infinite; } @keyframes sunPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } .sun-rings { animation: sunTurn 240s linear infinite; transform-origin: center; transform-box: fill-box; } @keyframes sunTurn { to { transform: rotate(360deg); } } /* Heat haze flowing low across the grass */ .savanna-haze { position: absolute; left: -30%; width: 160%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255, 224, 158, 0.55) 0%, rgba(255, 224, 158, 0) 70%); filter: blur(16px); animation: hazeFlow linear infinite; } @keyframes hazeFlow { from { transform: translateX(-6%); } to { transform: translateX(6%); } } /* Birds gliding across the sky */ .savanna-bird { position: absolute; animation: birdGlide linear infinite; opacity: 0; } @keyframes birdGlide { 0% { transform: translateX(-6vw) translateY(0); opacity: 0; } 6% { opacity: 0.7; } 50% { transform: translateX(50vw) translateY(-3vh); } 94% { opacity: 0.7; } 100% { transform: translateX(106vw) translateY(-1vh); opacity: 0; } } } @media (prefers-reduced-motion: reduce) { .savanna-haze { display: none; } .savanna-bird { display: none; } .savanna-dust-canvas { display: none; } } .savanna-dust-canvas { position: absolute; inset: 0; width: 100%; height: 100%; } /* ============================================================ Support page hero — golden-hour grade ============================================================ */ [data-theme="savanna"] .invest-hero { background: radial-gradient(ellipse 140% 90% at 50% 15%, #3A1F0E 0%, #22110A 55%, #120804 100%); } [data-theme="savanna"] .invest-hero--fallback { background: radial-gradient(ellipse 140% 90% at 50% 20%, #54301A 0%, #2A160C 55%, #120804 100%); } [data-theme="savanna"] .invest-ridges { background: radial-gradient(ellipse 60% 100% at 18% 100%, rgba(122, 64, 24, 0.55), transparent 70%), radial-gradient(ellipse 55% 100% at 55% 100%, rgba(101, 51, 18, 0.6), transparent 70%), radial-gradient(ellipse 65% 100% at 88% 100%, rgba(133, 72, 28, 0.5), transparent 70%); } [data-theme="savanna"] .invest-coldwash { background: linear-gradient(180deg, rgba(84, 42, 14, 0.3) 0%, transparent 32%, transparent 65%, rgba(40, 18, 6, 0.4) 100%); } [data-theme="savanna"] .invest-horizon { background: linear-gradient(180deg, transparent 0%, rgba(250, 239, 217, 0.45) 55%, var(--bg-body, #FAEFD9) 100%); } [data-theme="savanna"] .invest-kicker, [data-theme="savanna"] .invest-kicker::before { color: #FCD34D; background-color: transparent; } [data-theme="savanna"] .invest-kicker::before { background: #FCD34D; } [data-theme="savanna"] .invest-hero-content h1 { color: #FEF7E7; text-shadow: 0 0 60px rgba(251, 191, 36, 0.4), 0 2px 30px rgba(0, 0, 0, 0.5); } [data-theme="savanna"] .invest-hero-content .invest-sub { color: #D9BE96; } [data-theme="savanna"] .invest-scroll-cue { color: #B69A72; } [data-theme="savanna"] .invest-scroll-cue .cue-dot { border-color: rgba(252, 211, 77, 0.55); } [data-theme="savanna"] .invest-scroll-cue .cue-dot::before { background: #FCD34D; }