/* Learn AI — light theme + floating theme toggle. Dark stays the default. Adding data-theme="light" on switches to light. Pair with /assets/theme.js (sets the attribute pre-paint + injects the toggle). */ :root{color-scheme:dark} /* ── Floating toggle (lower-left) ─────────────────────────────── */ .theme-toggle{position:fixed;left:16px;bottom:18px;z-index:120;width:46px;height:46px;border-radius:50%; border:1px solid rgba(120,170,255,.28);background:rgba(10,15,28,.86);color:#eaf2ff; display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(10px); box-shadow:0 6px 24px rgba(0,0,0,.4);transition:transform .16s,box-shadow .16s;padding:0} .theme-toggle:hover{transform:scale(1.08);box-shadow:0 8px 30px rgba(34,211,238,.25)} .theme-toggle svg{width:21px;height:21px;display:block} .theme-toggle .ic-sun{display:block} .theme-toggle .ic-moon{display:none} html[data-theme="light"] .theme-toggle{background:rgba(255,255,255,.92);color:#0e1b2c; border-color:#d3ddec;box-shadow:0 6px 20px rgba(14,27,44,.16)} html[data-theme="light"] .theme-toggle .ic-sun{display:none} html[data-theme="light"] .theme-toggle .ic-moon{display:block} /* pages with the mobile sticky-CTA bar: float above it */ @media(max-width:720px){ .theme-toggle.has-sticky{bottom:88px} } /* ── Light theme: design tokens (covers every template family) ── */ html[data-theme="light"]{ color-scheme:light; /* shell.css family */ --bg:#f5f8fd; --pan:#ffffff; --pan2:#ecf1f9; --bd:#d3ddec; --tx:#0e1b2c; --dim:#46607f; --cy:#0e7490; --vi:#7c3aed; --gr:#15803d; --am:#b45309; --rd:#dc2626; --grad:linear-gradient(90deg,#22d3ee,#a855f7); /* landing (index.html) family */ --card:rgba(255,255,255,.78); --line:rgba(14,27,44,.14); --mut:#556075; /* jarvis page family */ --bg2:#eef3fa; --red:#dc2626; } /* ── Light theme: shared shell (nav / mega menu / footer) ─────── */ html[data-theme="light"] .mk-nav{background:rgba(255,255,255,.84)} html[data-theme="light"] .mk-mega{background:rgba(255,255,255,.98);box-shadow:0 30px 60px rgba(14,27,44,.14)} html[data-theme="light"] .mk-mega a .lvl{color:#556075} html[data-theme="light"] .mk-legal{color:#4a5568} @media(max-width:980px){ html[data-theme="light"] .mk-links{background:rgba(255,255,255,.98)} html[data-theme="light"] .mk-links a{border-bottom-color:rgba(211,221,236,.7)} } /* Buttons: keep the bright brand gradient (tokens went darker for text use) */ html[data-theme="light"] .btn{background:linear-gradient(90deg,#22d3ee,#a855f7);color:#04050b; box-shadow:0 8px 30px rgba(34,211,238,.35)} html[data-theme="light"] .btn.ghost{background:rgba(14,27,44,.03);color:var(--tx);box-shadow:none} html[data-theme="light"] .flagribbon{background:linear-gradient(90deg,#22d3ee,#a855f7)} html[data-theme="light"] .mk-mega .feat a.btn, html[data-theme="light"] .mk-foot a.btn, html[data-theme="light"] .mk-foot a.btn:hover{color:#04050b} /* ── Light theme: landing page (index.html) furniture ─────────── */ html[data-theme="light"] nav{background:rgba(255,255,255,.78)} html[data-theme="light"] .grain{display:none} html[data-theme="light"] .orb{mix-blend-mode:multiply;opacity:.16} html[data-theme="light"] #particles{opacity:.12} html[data-theme="light"] .sticky{background:rgba(255,255,255,.94)} html[data-theme="light"] .pill{background:rgba(14,116,144,.07)} html[data-theme="light"] .glass{box-shadow:0 18px 50px rgba(14,27,44,.08)} html[data-theme="light"] .story .g{box-shadow:0 20px 60px rgba(14,27,44,.1)} html[data-theme="light"] .story p{color:#3a5068} html[data-theme="light"] .story .big{color:#0e1b2c} html[data-theme="light"] .vs .bad{background:rgba(220,38,38,.05);border-color:rgba(220,38,38,.3)} html[data-theme="light"] .vs .good{background:rgba(21,128,61,.05);border-color:rgba(21,128,61,.35)} html[data-theme="light"] .vs .bad h3{color:#b91c1c} html[data-theme="light"] .vs .good h3{color:#166534} html[data-theme="light"] .email{box-shadow:0 20px 60px rgba(14,27,44,.1)} /* Forms: readable fields everywhere */ html[data-theme="light"] input:not([type=checkbox]):not([type=radio]), html[data-theme="light"] textarea, html[data-theme="light"] select{background:#fff;color:var(--tx);border-color:var(--bd)} /* Class-based muted labels that hardcode #5f7290 (auto-darkener leaves mid-tones) */ html[data-theme="light"] .hint, html[data-theme="light"] .muted{color:#4a5568} /* Inline style="" pale colors (stylesheet can't win without !important) */ html[data-theme="light"] [style*="color:#93a7c8"]{color:#46607f!important} html[data-theme="light"] [style*="color:#eaf2ff"]{color:#0e1b2c!important} html[data-theme="light"] [style*="color:#bbf7d0"]{color:#166534!important} html[data-theme="light"] [style*="color:#4ade80"]{color:#15803d!important} html[data-theme="light"] [style*="color:#fbbf24"]{color:#92600a!important} html[data-theme="light"] [style*="color:#5f7290"]{color:#4a5f7d!important} /* ── Light theme: course player (course.css) ──────────────────── */ html[data-theme="light"] .modal{background:rgba(15,23,42,.45)} html[data-theme="light"] .litem.done .lnum{color:#15803d} html[data-theme="light"] .lbadge.done{color:#15803d} html[data-theme="light"] .lbadge.lock{color:#64748b} html[data-theme="light"] .lbadge.exam{color:#92600a} html[data-theme="light"] .pass{color:#15803d} html[data-theme="light"] .fail{color:#b91c1c} html[data-theme="light"] .spin{border-color:rgba(14,27,44,.2);border-top-color:var(--cy)} /* Copy-paste prompt blocks: course.css hardcodes pale text (#cde3ff) meant for a dark bg, but --pan2 goes light in light mode → unreadable. Flip the block to a dark "terminal island" (like a code block on a light page) so the text reads. */ html[data-theme="light"] .lb-prompt{background:#0d1526;border-color:#26355a} html[data-theme="light"] .lb-prompt .lb-top{background:rgba(255,255,255,.05);border-bottom-color:#26355a} html[data-theme="light"] .lb-prompt pre{color:#dbe7ff} html[data-theme="light"] .lb-prompt .lb-lbl{color:#3ad2ee} html[data-theme="light"] .lb-prompt .lb-copy{color:#dbe7ff;border-color:#2c3d63} html[data-theme="light"] .lb-prompt .lb-copy.done{color:#04050b} /* the 💡 tip line sits on the light card, not the island → darken the pale amber */ html[data-theme="light"] .lb-tip{color:#8a5a00}