/* ======================== LIGHT THEME ======================== */ /* Applied via class .light-theme on or via prefers-color-scheme */ :root.light-theme, :root:not(.dark-override) { /* Light theme only activates via JS toggle or prefers-color-scheme below */ } .light-theme { --bg: #f6f7f9; --bg2: #ffffff; --bg3: #f1f3f6; --border: rgba(15, 23, 42, 0.12); --text: #111827; --text-muted: #374151; --text-dim: #6b7280; --accent: #0f766e; --accent2: #0f766e; --accent3: #b45309; --gold: #a16207; --white: #111827; --glow: none; } .light-theme body { background: var(--bg); color: var(--text); line-height: 1.65; } .light-theme #nav { background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); padding: 12px 0; } .light-theme #nav.scrolled { background: rgba(255, 255, 255, 0.98); border-bottom: 1px solid var(--border); padding: 12px 0; } .light-theme .nav-links a { color: var(--text-muted); } .light-theme .nav-links a:hover { color: var(--text); } .light-theme .btn-nav, .light-theme .btn-primary { background: var(--accent); color: #ffffff; box-shadow: none; border-radius: 8px; } .light-theme .btn-ghost { background: #ffffff; color: var(--text); border: 1px solid var(--border); } .light-theme .btn-nav:hover, .light-theme .btn-primary:hover, .light-theme .btn-path:hover, .light-theme .btn-ghost:hover { transform: none; box-shadow: none; } .light-theme #hero { min-height: 100vh; background: linear-gradient(160deg, #e8f5f3 0%, #f0f4f8 30%, #f6f7f9 70%, #eef2f7 100%); } .light-theme .hero-bg { opacity: 1; } .light-theme #neuralCanvas { opacity: 0.35; } .light-theme .ticker-wrap { background: #ffffff; border-top: 1px solid rgba(15, 23, 42, 0.08); border-bottom: 1px solid rgba(15, 23, 42, 0.08); } .light-theme .ticker span { color: #6b7280; } .light-theme .scroll-hint { color: var(--text-dim); } .light-theme .hero-content { max-width: 920px; padding: 120px 24px 60px; margin-left: max(24px, calc(50vw - 590px)); } .light-theme .hero-sub { color: var(--text-muted); font-size: 1.08rem; font-weight: 400; } .light-theme .hero-badge { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; } .light-theme .hero-stats { gap: 24px; margin-top: 36px; } .light-theme .stat span { color: var(--accent); font-size: 2.2rem; } .light-theme .stat small { color: var(--text-dim); letter-spacing: 0.04em; } .light-theme section { padding: 72px 0; } .light-theme #why, .light-theme #topics, .light-theme #glossary-preview, .light-theme footer, .light-theme #newsletter { background: var(--bg2); } .light-theme #newsletter { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .light-theme .path-featured, .light-theme .lesson-card-featured { background: var(--bg2) !important; border-color: var(--border) !important; } .light-theme .why-card, .light-theme .path-card, .light-theme .topic-card, .light-theme .gls-card, .light-theme .res-card, .light-theme .playground-wrap, .light-theme .lesson-card, .light-theme .term-card, .light-theme .cheat-card, .light-theme .formula-card, .light-theme .content-box { background: var(--bg2); border: 1px solid var(--border); box-shadow: none; } .light-theme .why-card:hover, .light-theme .path-card:hover, .light-theme .topic-card:hover, .light-theme .gls-card:hover, .light-theme .lesson-card:hover, .light-theme .cheat-card:hover { transform: none; border-color: rgba(15, 23, 42, 0.22); } .light-theme .topic-count, .light-theme .pill.free { background: #ecfdf5; color: #065f46; } .light-theme .pill { background: #f3f4f6; color: #4b5563; } .light-theme .section-label { color: var(--accent); letter-spacing: 0.1em; } .light-theme .section-sub, .light-theme .why-card p, .light-theme .path-card p, .light-theme .gls-card p, .light-theme .res-card a, .light-theme .lesson-card-info p { color: var(--text-muted); } .light-theme .playground-sidebar { border-right: 1px solid var(--border); } .light-theme #gdCanvas { background: #f8fafc; border: 1px solid var(--border); } .light-theme .info-chip { background: #f8fafc; color: var(--text-muted); } .light-theme .reveal { opacity: 1; transform: none; transition: none; } .light-theme .reveal.visible { opacity: 1; transform: none; } .light-theme .nav-links.is-open { background: #ffffff; } .light-theme a:focus-visible, .light-theme button:focus-visible, .light-theme input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .light-theme .theme-toggle { border-color: rgba(15, 23, 42, 0.2); } .light-theme .nl-form input { background: #f1f3f6; border-color: rgba(15, 23, 42, 0.12); color: #111827; } .light-theme .coming-soon-badge { background: rgba(249, 115, 22, 0.08); } /* ======================== AUTO LIGHT THEME ======================== */ @media (prefers-color-scheme: light) { :root:not(.dark-override) { --bg: #f6f7f9; --bg2: #ffffff; --bg3: #f1f3f6; --border: rgba(15, 23, 42, 0.12); --text: #111827; --text-muted: #374151; --text-dim: #6b7280; --accent: #0f766e; --accent2: #0f766e; --accent3: #b45309; --gold: #a16207; --white: #111827; --glow: none; } } @media (max-width: 768px) { .light-theme .nav-inner { gap: 16px; } .light-theme .nav-links { display: none; margin-left: 0; } .light-theme .nav-links.is-open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: #ffffff; border-bottom: 1px solid var(--border); padding: 16px 24px; gap: 12px; z-index: 999; } .light-theme .hero-content { padding-top: 72px; } .light-theme .hero-stats { gap: 14px; padding: 12px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }