/* ============================================================ Solar Insight - themes Three directions, switched via [data-theme] on lumen - light, authoritative academic (serif + sans) solstice - warm editorial, approachable (display serif) nocturne - dark, sophisticated (geometric sans) --accent is overridable globally by the Tweaks panel. ============================================================ */ :root { --btn-radius: 10px; --card-radius: 16px; --media-radius: 18px; --display-weight: 600; --display-tracking: -0.015em; --shadow-sm: 0 1px 3px rgba(20,18,12,.06), 0 4px 12px rgba(20,18,12,.05); --shadow-md: 0 10px 30px rgba(20,18,12,.10); --shadow-lg: 0 30px 70px rgba(20,18,12,.16); --logo-filter: grayscale(1) contrast(.9); } /* ================= LUMEN (default) ================= */ [data-theme="lumen"] { --bg: #FBF9F5; --bg-alt: #F2EEE5; --surface: #FFFFFF; --ink: #1A1B1F; --ink-soft: #565760; --ink-faint: #8C8D95; --line: #E7E1D6; --line-strong: #D6CFC0; --accent: #C0780C; --on-accent: #FFFFFF; --font-display: "Spectral", Georgia, serif; --font-body: "Public Sans", system-ui, sans-serif; --display-weight: 600; --nav-bg: rgba(251,249,245,.82); --cta-bg: #1B2436; --cta-ink: #F4F1EA; --footer-bg: #16171B; --footer-ink: #EDEAE2; --shadow-accent: 0 12px 28px color-mix(in srgb, var(--accent) 30%, transparent); } /* ================= SOLSTICE ================= */ [data-theme="solstice"] { --bg: #F4ECDF; --bg-alt: #ECE1CF; --surface: #FBF6EC; --ink: #2A2017; --ink-soft: #5E5142; --ink-faint: #948774; --line: #DFD2BC; --line-strong: #CDBC9F; --accent: #B25E22; --on-accent: #FFF8EF; --font-display: "DM Serif Display", Georgia, serif; --font-body: "Spectral", Georgia, serif; --display-weight: 400; --display-tracking: 0em; --card-radius: 6px; --media-radius: 8px; --btn-radius: 4px; --nav-bg: rgba(244,236,223,.85); --cta-bg: #2A2017; --cta-ink: #F4ECDF; --footer-bg: #2A2017; --footer-ink: #F0E6D5; --logo-filter: grayscale(1) sepia(.25) contrast(.92); --shadow-sm: 0 1px 3px rgba(60,40,15,.07), 0 6px 16px rgba(60,40,15,.06); --shadow-md: 0 12px 32px rgba(60,40,15,.12); --shadow-lg: 0 32px 72px rgba(60,40,15,.18); --shadow-accent: 0 12px 28px color-mix(in srgb, var(--accent) 32%, transparent); } /* Solstice leans editorial: lighter display, bigger rhythm */ [data-theme="solstice"] .hero-title { letter-spacing: -0.01em; } [data-theme="solstice"] .eyebrow, [data-theme="solstice"] .brand-sub, [data-theme="solstice"] .nav-links a, [data-theme="solstice"] .btn, [data-theme="solstice"] .pub-search input, [data-theme="solstice"] .cap-col h3, [data-theme="solstice"] .subhead, [data-theme="solstice"] .partner-block h3, [data-theme="solstice"] .footer h4, [data-theme="solstice"] .year-chips button, [data-theme="solstice"] .person .role { font-family: "Public Sans", system-ui, sans-serif; } /* ================= NOCTURNE ================= */ [data-theme="nocturne"] { --bg: #15161B; --bg-alt: #1C1E25; --surface: #21242D; --ink: #ECEAE3; --ink-soft: #A7A69E; --ink-faint: #74746E; --line: rgba(255,255,255,.09); --line-strong: rgba(255,255,255,.16); --accent: #E59A2E; --on-accent: #1A1408; --font-display: "Space Grotesk", system-ui, sans-serif; --font-body: "IBM Plex Sans", system-ui, sans-serif; --display-weight: 600; --display-tracking: -0.02em; --nav-bg: rgba(21,22,27,.78); --cta-bg: #20242E; --cta-ink: #ECEAE3; --footer-bg: #0F1014; --footer-ink: #D7D5CD; --logo-filter: grayscale(1) brightness(2.4) contrast(.85); --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow-md: 0 14px 34px rgba(0,0,0,.5); --shadow-lg: 0 36px 80px rgba(0,0,0,.6); --shadow-accent: 0 12px 30px color-mix(in srgb, var(--accent) 36%, transparent); } /* white-bg logos need a chip on dark so they read - keep marks dark, don't brighten */ [data-theme="nocturne"] .logo-row img { background: rgba(255,255,255,.95); padding: 9px 13px; border-radius: 9px; opacity: .9; filter: grayscale(1); } [data-theme="nocturne"] .logo-row img:hover { opacity: 1; filter: none; } [data-theme="nocturne"] .hero-badge { background: rgba(33,36,45,.8); } [data-theme="nocturne"] .hero .btn--ghost { background: rgba(15,16,20,.4); backdrop-filter: blur(3px); } [data-theme="nocturne"] .cap-list li, [data-theme="nocturne"] .focus-card:hover { color: var(--ink); } [data-theme="nocturne"] .nav.scrolled { box-shadow: 0 1px 0 rgba(255,255,255,.06); } /* ============================================================ HERO - per-theme composition ============================================================ */ /* SOLSTICE: centered editorial hero, media as framed band */ [data-theme="solstice"] .hero-inner { grid-template-columns: 1fr; text-align: center; max-width: 1000px; margin-inline: auto; gap: 52px; } [data-theme="solstice"] .hero-lead { margin-inline: auto; max-width: 56ch; } [data-theme="solstice"] .hero-actions { justify-content: center; } [data-theme="solstice"] .hero-stats { justify-content: center; border-top: none; border-bottom: 1px solid var(--line); padding-top: 0; padding-bottom: 30px; } [data-theme="solstice"] .hero-media { max-width: 100%; margin-top: 8px; } [data-theme="solstice"] .hero-media figure { aspect-ratio: 21/8; border-radius: 8px; } [data-theme="solstice"] .hero-badge { left: auto; } /* NOCTURNE: full-bleed image hero with overlay */ [data-theme="nocturne"] .hero { padding-top: 0; padding-bottom: 0; min-height: 100vh; display: flex; align-items: center; } [data-theme="nocturne"] .hero-bg { position: absolute; inset: 0; z-index: 0; } [data-theme="nocturne"] .hero-bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.5) saturate(1.05); } [data-theme="nocturne"] .hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(15,16,20,.96) 48%, rgba(15,16,20,.84) 74%, rgba(15,16,20,.6) 100%); } [data-theme="nocturne"] .hero-bg::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 160px; z-index: 1; background: linear-gradient(to bottom, rgba(15,16,20,.6), transparent); } [data-theme="nocturne"] .hero-inner { grid-template-columns: 1fr; max-width: 760px; position: relative; z-index: 1; padding: 140px 0 60px; } [data-theme="nocturne"] .hero-media { display: none; } [data-theme="nocturne"] .hero-lead { max-width: 46ch; } /* show / hide the bg layer only on nocturne */ .hero-bg { display: none; } [data-theme="nocturne"] .hero-bg { display: block; } /* LUMEN keeps the base split layout; hide bg layer */ [data-theme="lumen"] .hero-bg { display: none; }