/* ── PEMG Light Mode Overrides ─────────────────────────────────────────────── Applied via [data-theme="light"] on . Overlay menu stays dark intentionally — it's a design feature. Video hero stays dark — video content drives that section. ────────────────────────────────────────────────────────────────────────── */ /* CSS variable overrides */ [data-theme="light"] { --dark: #ECECE5; --surface: #E4E4DD; --off-white: #253645; --text: #253645; --border: rgba(37, 54, 69, 0.1); --muted: #4A6575; } /* ── Global ── */ [data-theme="light"] body { background: #ECECE5; color: #253645; } /* ── Nav ── */ [data-theme="light"] nav { background: rgba(236, 236, 229, 0.88) !important; border-bottom: 1px solid rgba(37, 54, 69, 0.08); } [data-theme="light"] nav.scrolled { background: rgba(236, 236, 229, 0.97) !important; } [data-theme="light"] .nav-menu-btn { color: #253645; } [data-theme="light"] .nav-menu-btn:hover { color: #36515F; } /* ── Theme toggle button ── */ .theme-toggle { background: none; border: none; cursor: pointer; padding: 0.25rem; color: var(--accent); display: flex; align-items: center; transition: color 0.2s, opacity 0.2s; opacity: 0.7; } .theme-toggle:hover { opacity: 1; } [data-theme="light"] .theme-toggle { color: #253645; } /* Sun shows in dark mode (click to go light); moon shows in light mode */ .theme-toggle .icon-sun { display: block; } .theme-toggle .icon-moon { display: none; } [data-theme="light"] .theme-toggle .icon-sun { display: none; } [data-theme="light"] .theme-toggle .icon-moon { display: block; } /* Nav right group */ .nav-right { display: flex; align-items: center; gap: 1.25rem; } /* ── Section backgrounds ── */ [data-theme="light"] .section, [data-theme="light"] .film-section, [data-theme="light"] .reel-section, [data-theme="light"] .stills-section, [data-theme="light"] .events-section, [data-theme="light"] .podcast-section, [data-theme="light"] .caps-section, [data-theme="light"] .page-hero, [data-theme="light"] .about-cta { background: #ECECE5 !important; } /* Alternating surface for rhythm */ [data-theme="light"] .stills-section, [data-theme="light"] .events-section { background: #E4E4DD !important; } /* ── Typography ── */ [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] .section-title, [data-theme="light"] .hero-title, [data-theme="light"] .film-title, [data-theme="light"] .reel-title, [data-theme="light"] .founder-name { color: #253645 !important; } [data-theme="light"] .section-label, [data-theme="light"] .hero-eyebrow, [data-theme="light"] .hero-label { color: #36515F !important; } [data-theme="light"] .section-body, [data-theme="light"] .hero-body, [data-theme="light"] .hero-sub, [data-theme="light"] .film-desc, [data-theme="light"] .founder-title, [data-theme="light"] .podcast-desc, [data-theme="light"] .pillar-body, [data-theme="light"] .value-body { color: #4A6575 !important; } [data-theme="light"] .hero-title-dim { color: rgba(37,54,69,0.45) !important; } /* ── Film cards ── */ [data-theme="light"] .film-card { background: #D8D8D0 !important; } [data-theme="light"] .film-meta { background: rgba(236,236,229,0.92) !important; } [data-theme="light"] .film-title { color: #253645 !important; } [data-theme="light"] .film-tag { color: #6E8490 !important; } /* ── Reel section ── */ [data-theme="light"] .reel-section { background: #E4E4DD !important; } [data-theme="light"] .reel-label, [data-theme="light"] .reel-title { color: #253645 !important; } [data-theme="light"] .reel-embed-wrap { border: 1px solid rgba(37,54,69,0.12) !important; } /* ── Podcast section ── */ [data-theme="light"] .podcast-visual { background: #D8D8D0 !important; } [data-theme="light"] .podcast-label { color: #36515F !important; } [data-theme="light"] .podcast-title { color: #253645 !important; } [data-theme="light"] .podcast-stat-num { color: #253645 !important; } [data-theme="light"] .podcast-stat-label { color: #6E8490 !important; } /* ── Caps / brand work grid ── */ [data-theme="light"] .caps-item { background: #D8D8D0 !important; } [data-theme="light"] .caps-item-label { color: #4A6575 !important; } /* ── Hero section (video) stays dark intentionally ── */ /* no overrides for .hero */ /* ── About / Team page ── */ [data-theme="light"] .hero-body { color: #4A6575 !important; } [data-theme="light"] .cred-chip { background: rgba(54,81,95,0.12) !important; color: #36515F !important; } [data-theme="light"] .pillar-num { color: rgba(37,54,69,0.15) !important; } [data-theme="light"] .pillar-title { color: #253645 !important; } [data-theme="light"] .values-grid { border-top: 1px solid rgba(37,54,69,0.1) !important; } [data-theme="light"] .value-item { border-bottom: 1px solid rgba(37,54,69,0.1) !important; } [data-theme="light"] .value-label { color: #253645 !important; } /* ── Gallery cells ── */ [data-theme="light"] .still-item, [data-theme="light"] .event-item { background: #D8D8D0; } /* ── Stat row ── */ [data-theme="light"] .hero-stat-num { color: #253645 !important; } [data-theme="light"] .hero-stat-label { color: #6E8490 !important; } [data-theme="light"] .hero-divider { background: rgba(37,54,69,0.15) !important; } /* ── Footer ── */ [data-theme="light"] footer, [data-theme="light"] .footer { background: #253645 !important; /* keep footer dark in both modes */ } /* ── Borders / separators ── */ [data-theme="light"] .section-divider, [data-theme="light"] hr { border-color: rgba(37,54,69,0.1) !important; } /* ── Scroll reveal stays working ── */ [data-theme="light"] .reveal { color: inherit; } /* ── Loader theme adaptation ── */ [data-theme="light"] #pemg-loader { background: #ECECE5 !important; } [data-theme="light"] #pemg-loader p { color: rgba(37,54,69,0.25) !important; }