/* ========================================================================== ALPHA THEME LAYER — day/night tokens + the phase-disc switcher. Loaded AFTER each page's own styles (and after /claude.css where used), so these overrides win. theme.js sets data-theme on before paint. Families covered: 1. Launch/indigo pages (index, directory) + the gate — day mode here is indigo paper: cool stock, white panels, indigo-black ink. Accents keep their hues; text gradients deepen for contrast, buttons stay bright. 2. claude.css pages (marketplace, services) — claude.css already ships [data-theme="light"] tokens; this file only smooths the seams. 3. Archive dark pages (first-build, wrap) — grey ramp + neon inverted. 4. Cream reading pages (media, articles/) — already light; they get a NIGHT mode instead ([data-theme="dark"] overrides). ========================================================================== */ /* ---- 1+2. Day mode for the dark-native families -------------------------- */ :root[data-theme="light"] { color-scheme: light; /* launch/indigo family (index.html, directory.html) */ --surround: #e7eaf3; --page: #f6f7fb; --panel: #ffffff; --ink: #171c2b; --ink-mute: #4a5163; --ink-soft: #68708a; --rule: #d9dde9; --subtle: rgba(23, 28, 55, .05); /* accents: deepened for text/border contrast on paper */ --a1: #e14e28; --a2: #c05609; --a3: #6d28d9; --a4: #1e3a8a; /* text gradient darkens; button gradient stays bright (dark label text) */ --grad: linear-gradient(96deg, #1e3a8a, #6d28d9, #e14e28); --btn: linear-gradient(92deg, #8b5cf6, #22d3ee); /* gate page + claude.css shared names */ --bg: #f6f7fb; --muted: #4a5163; --ring: #d9dde9; --subtle-bg: rgba(23, 28, 55, .05); } /* wrap.html now uses home-v2 tokens via wrap-v2.css; light mode inherits from home-v2.css :root[data-theme="light"]. Keep input wash readable. */ [data-theme="light"] .wrap-page .planner-work input[type="text"], [data-theme="light"] .wrap-page .planner-work textarea { background: transparent; } /* first-build.html stays dark in BOTH modes — deliberately. It is a full-bleed slide deck built on hardcoded gradients and radial glows rather than tokens, so a token flip only half-converts it and strands text at low contrast. It reads like a cinema: the lights stay down. The switcher still renders (and still governs every other page). */ /* launch-family hardcoded spots that tokens don't reach */ [data-theme="light"] .controls { background: rgba(246, 247, 251, .92); } [data-theme="light"] .card:hover { border-color: #b9c0d6; } [data-theme="light"] .strip a:hover { color: var(--ink); } [data-theme="light"] .hero::before { opacity: .55; } /* ---- 4. Night mode for the cream reading family (media, articles) -------- */ [data-theme="dark"] body.reading, [data-theme="dark"] .reading { /* Only the light stock inverts. The --grey-* ramp is this family's light-text-on-dark-band palette (masthead, hero, footer are dark in BOTH modes) — inverting it blanks that text, so it stays untouched. */ --cream: #101014; /* page stock */ --paper: #17171d; /* tinted panels */ --white: #17171d; /* card stock */ --ink: #e8e8ea; --ink-soft: #c2c2cc; --ink-mute: #8f8f9e; --rule: #33333f; --rule-soft: #26262f; } /* ---- Switch transition (added briefly by theme.js on toggle) -------------- */ html.theme-anim, html.theme-anim body, html.theme-anim *:not(#bp-theme-toggle):not(#bp-theme-toggle *) { transition: background-color .3s ease, color .3s ease, border-color .3s ease !important; } /* ---- The phase disc ------------------------------------------------------- */ #bp-theme-toggle { position: fixed; right: 18px; bottom: 18px; z-index: 2147483000; width: 42px; height: 42px; padding: 0; border-radius: 50%; border: 1px solid var(--rule, var(--ring, #3a3a37)); background: var(--panel, #0f172a); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); } #bp-theme-toggle::before { content: ''; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(90deg, #22d3ee 50%, #8b5cf6 50%); transform: rotate(0deg); transition: transform .35s ease; } [data-theme="light"] #bp-theme-toggle { box-shadow: 0 4px 14px rgba(23, 28, 55, .18); } [data-theme="light"] #bp-theme-toggle::before { transform: rotate(180deg); } #bp-theme-toggle:hover { filter: brightness(1.1); } #bp-theme-toggle:focus-visible { outline: 2px solid var(--a4, #22d3ee); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { #bp-theme-toggle::before, html.theme-anim * { transition: none !important; } }