/* ============================================================================ theme.light.css — Subfield day mode (Anthropic cream) ---------------------------------------------------------------------------- Drop-in light theme for subfield.dev. Activates when . ── DESIGN INTENT ───────────────────────────────────────────────────────── Anthropic-style warmth: deep warm-cream page, white-cream cards that visibly lift, distinct washed sections that feel like different rooms, warm plum text, and brown-tinted shadows that read like paper on paper. The original style.css uses many cards with `rgba(255,255,255,0.03)` — that veil is invisible on cream. The override REPLACES those backgrounds with explicit warm cream values so every card visibly elevates above its section. Brand pink → purple gradient is preserved identically. ============================================================================ */ [data-theme="light"] { /* ── Cream foundation — deeper, more saturated steps ───────────────── */ --bg-base: #efe6d0; /* page — deep warm cream "table" */ --bg-elev-1: #faf4e3; /* card resting — clearly lifted */ --bg-elev-2: #fffaee; /* card hover / popovers */ --bg-elev-3: #e6dabe; /* inset / deep wash / inputs */ /* ── Section washes ────────────────────────────────────────────────── */ --wash-warm: #e7dcbb; /* .section--washed — deeper room */ --wash-pink: #f3e0d5; /* .section--washed-pink */ /* ── Borders (warm-brown alpha; bumped for cream visibility) ────────── */ --border: rgba(78, 55, 24, 0.14); --border-strong: rgba(78, 55, 24, 0.26); /* ── Text (warm plum / ink ladder) ──────────────────────────────────── */ --text: #2a1a06; --text-muted: #5a4830; --text-faint: #8a7958; /* ── Brand — UNCHANGED (pink, purple, gradient stay identical) ──────── */ /* ── Soft tints, dialed down for cream legibility ───────────────────── */ --pink-soft: rgba(236, 72, 153, 0.10); --pink-glow: rgba(236, 72, 153, 0.24); --purple-soft: rgba(147, 51, 234, 0.08); /* ── Lattice grid (site-wide) — soft warm-tan lines on cream. Lighter shade + lower alpha than v1 so it doesn't dominate. */ --grid-line: rgba(140, 105, 55, 0.06); /* ── Warm shadows (replaces near-black drop shadows in style.css that use raw rgba(0,0,0,...) inline) ───────────────────────────────── */ --shadow-card: 0 1px 2px rgba(78, 55, 24, 0.06), 0 4px 12px rgba(78, 55, 24, 0.08); --shadow-lift: 0 4px 12px rgba(78, 55, 24, 0.10), 0 20px 48px rgba(78, 55, 24, 0.12); } /* ============================================================================ BODY + GLOBAL — cream paper, plum ink ============================================================================ */ html[data-theme="light"] body { background: var(--bg-base); color: var(--text); } /* ============================================================================ NAV — translucent over cream, with a real bottom border on scroll ============================================================================ */ html[data-theme="light"] .site-nav { background: color-mix(in oklab, var(--bg-elev-2) 80%, transparent); } html[data-theme="light"] .site-nav[data-scrolled="true"] { background: color-mix(in oklab, var(--bg-elev-2) 94%, transparent); border-bottom-color: var(--border-strong); } html[data-theme="light"] .mobile-nav { background: color-mix(in oklab, var(--bg-elev-2) 96%, transparent); } /* ============================================================================ SECTION WASHES — intentionally left flat in light mode. The washed sections in style.css are already transparent; we don't paint a tone over them so the page background (and the lattice grid) shows through uniformly. Card elevation alone separates content from page. ============================================================================ */ /* ============================================================================ CARDS — every card class in style.css backgrounds with rgba(255,255,255,X) which is invisible on cream. Replace with explicit cream + warm border + warm shadow. Each variant gets a SUBTLY different cream so similar cards in adjacent sections still feel distinct. ============================================================================ */ /* Stat cards (hero counters etc.) */ html[data-theme="light"] .stat-card { background: var(--bg-elev-1); border-color: var(--border); box-shadow: var(--shadow-card); } html[data-theme="light"] .stat-card:hover { background: var(--bg-elev-2); border-color: var(--border-strong); box-shadow: var(--shadow-lift); } /* Q&A / FAQ cards */ html[data-theme="light"] .qa-card { background: var(--bg-elev-1); border-color: var(--border); box-shadow: var(--shadow-card); } html[data-theme="light"] .qa-card:hover { background: var(--bg-elev-2); border-color: var(--border-strong); box-shadow: var(--shadow-lift); } /* Audience cards (Use Cases section) */ html[data-theme="light"] .audience-card { background: var(--bg-elev-1); border-color: var(--border); box-shadow: var(--shadow-card); } html[data-theme="light"] .audience-card:hover { background: var(--bg-elev-2); border-color: var(--border-strong); box-shadow: var(--shadow-lift); } /* Roadmap rows */ html[data-theme="light"] .roadmap-row { background: var(--bg-elev-1); border-color: var(--border); box-shadow: var(--shadow-card); } html[data-theme="light"] .roadmap-row:hover { background: var(--bg-elev-2); border-color: var(--border-strong); box-shadow: var(--shadow-lift); } html[data-theme="light"] .roadmap-row--featured { background: linear-gradient(135deg, var(--pink-soft) 0%, transparent 60%), var(--bg-elev-1); border-color: color-mix(in oklab, var(--pink) 32%, var(--border-strong)); box-shadow: var(--shadow-card), 0 0 0 1px color-mix(in oklab, var(--pink) 15%, transparent); } /* Dim/list cards (pricing tiers, dimension callouts) */ html[data-theme="light"] .dim-card { background: var(--bg-elev-1); border-color: var(--border); box-shadow: var(--shadow-card); } /* Pilot feature cards (Atlas + Explore preview in "Two surfaces" section). Doesn't end in "-card" so the catch-all below doesn't paint a background for it; needs its own rules. */ html[data-theme="light"] .pilot-feature { background: var(--bg-elev-1); border-color: var(--border); box-shadow: var(--shadow-card); } html[data-theme="light"] .pilot-feature:hover { background: var(--bg-elev-2); border-color: var(--border-strong); box-shadow: var(--shadow-lift); } /* Pilot-feature visual: the chart preview that bleeds to the card edges. Original dark layer is rgba(0,0,0,0.18) which goes muddy on cream. Use the deepest cream step (bg-elev-3) so it reads as a recessed "screen" inside the card, with the same subtle pink halo at top. */ html[data-theme="light"] .pilot-feature-visual { background: radial-gradient(80% 100% at 50% 0%, var(--pink-soft), transparent 70%), var(--bg-elev-3); border-bottom-color: var(--border); } /* Waitlist form panel — same invisible white-alpha problem on cream */ html[data-theme="light"] .waitlist-form { background: var(--bg-elev-1); border-color: var(--border); box-shadow: var(--shadow-card); } /* Roadmap pilot-status pills (Collecting / Releasing / Refreshing). Default text color is --pink-3 (#fbcfe8 — pastel) which vanishes on the pink-tinted pill background in light mode. Use the brand pink instead for contrast on cream. */ html[data-theme="light"] .rm-status--pilot { color: var(--pink); } html[data-theme="light"] .rm-status--open { color: rgb(22, 101, 52); background: rgba(74, 222, 128, 0.18); border-color: rgba(74, 222, 128, 0.45); } /* Any other card that uses the same white-alpha pattern — fallback */ html[data-theme="light"] [class*="-card"]:not(.stat-card):not(.qa-card):not(.audience-card):not(.dim-card):not(.roadmap-row) { /* Light cards we haven't enumerated — give them a small lift too */ box-shadow: var(--shadow-card); } /* ============================================================================ HERO — the terminal preview / glass panels often use the same white-alpha pattern. Let them sit on bg-elev-1 with a real border instead. ============================================================================ */ html[data-theme="light"] .hero-terminal, html[data-theme="light"] .hero-glass, html[data-theme="light"] .release-pill, html[data-theme="light"] [class*="terminal"] { background-color: var(--bg-elev-1); border-color: var(--border-strong); } /* ============================================================================ FORMS / INPUTS — sit in the inset deepest cream, not white ============================================================================ */ html[data-theme="light"] input, html[data-theme="light"] textarea, html[data-theme="light"] select { background-color: var(--bg-elev-3); color: var(--text); border-color: var(--border-strong); } html[data-theme="light"] input::placeholder, html[data-theme="light"] textarea::placeholder { color: var(--text-faint); } html[data-theme="light"] input:focus, html[data-theme="light"] textarea:focus { background-color: var(--bg-elev-2); border-color: var(--pink); outline: 2px solid var(--pink-soft); outline-offset: 1px; } /* ============================================================================ FOOTER + DEEP SURFACES — invert the elevation so the footer reads as "you've returned to the ground" instead of floating above the page. ============================================================================ */ html[data-theme="light"] footer, html[data-theme="light"] .site-footer { background: var(--wash-warm); border-top: 1px solid var(--border-strong); } /* ============================================================================ LINKS — keep brand pink but use pink (deeper) instead of pink-2 for body links so they hold contrast on cream ============================================================================ */ html[data-theme="light"] a { color: var(--pink); } html[data-theme="light"] a:hover { color: var(--purple); } /* Nav and CTA links handled by component-specific rules in style.css — their colors come from .primary-nav a etc., not the bare `a` selector. */ /* ============================================================================ THEME TOGGLE STYLES — sun/moon pill in the nav (no FA dependency). ============================================================================ */ .slx-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; background: transparent; border: 1px solid var(--border-strong); color: var(--text-muted); cursor: pointer; padding: 0; margin-left: var(--s-3); transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .slx-theme-toggle:hover, .slx-theme-toggle:focus-visible { color: var(--text); border-color: var(--text-muted); background: var(--bg-elev-1); outline: none; } .slx-theme-toggle:active { transform: scale(0.94); } .slx-theme-toggle svg { width: 16px; height: 16px; fill: currentColor; } .slx-theme-toggle-mobile { display: flex; align-items: center; gap: var(--s-3); background: transparent; border: 0; padding: 0; margin-top: var(--s-2); font: inherit; color: var(--text); cursor: pointer; width: 100%; text-align: left; } .slx-theme-toggle-mobile:hover, .slx-theme-toggle-mobile:focus-visible { color: var(--pink); outline: none; } .slx-theme-toggle-mobile svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; } /* ============================================================================ OPTIONAL — auto-honor OS preference. Uncomment to apply light mode automatically when the OS is set to light. Manual toggle still wins. ============================================================================ */ /* @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg-base: #efe6d0; --bg-elev-1: #faf4e3; --bg-elev-2: #fffaee; --bg-elev-3: #e6dabe; --wash-warm: #e7dcbb; --wash-pink: #f3e0d5; --border: rgba(78,55,24,0.14); --border-strong: rgba(78,55,24,0.26); --text: #2a1a06; --text-muted: #5a4830; --text-faint: #8a7958; --pink-soft: rgba(236,72,153,0.10); --pink-glow: rgba(236,72,153,0.24); --shadow-card: 0 1px 2px rgba(78,55,24,0.06), 0 4px 12px rgba(78,55,24,0.08); --shadow-lift: 0 4px 12px rgba(78,55,24,0.10), 0 20px 48px rgba(78,55,24,0.12); } } */