/* ============================================================================ MEMDEX Light Theme (W1) ---------------------------------------------------------------------------- Overrides the dark-theme tokens from css/variables.css (dashboard) and the --landing-* tokens from css/pages/landing.css when carries the .theme-light class. The class is applied before first paint by js/theme-boot.js (reads localStorage), so there is no flash of wrong theme. Design direction (Anthony, 2026-07-06): clean fintech light mode in the spirit of Coinbase. White ground, opaque flat cards, neutral slate grays with no blue tint, near-black text, hairline borders, no glows. Color is reserved for actions and status, not chrome. Palette source of truth: unified with the MD1 app's committed light mode (.obs-light in css/pages/map.css, the --obs-l-* set). The slate text scale, card border, shadow recipe and status colors below are that set, promoted site-wide. The bridge block at the bottom points --obs-l-* back at these tokens so the two systems cannot drift while the site theme is active. Only color/effect tokens are overridden here. Spacing, typography, radii, z-index and layout tokens are theme-invariant and stay in variables.css. ========================================================================== */ /* Theme-switch cross-fade. theme-boot.js adds html.theme-transitioning for 1.8s around a user toggle (and OS-preference change), so the color/surface change eases over 1.8s instead of snapping. Scoped to that window only, so normal hover/focus transitions stay at their own speed. Respects reduced motion. */ html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color 1.8s ease, background-image 1.8s ease, color 1.8s ease, border-color 1.8s ease, fill 1.8s ease, stroke 1.8s ease, box-shadow 1.8s ease, opacity 1.8s ease !important; transition-delay: 0s !important; } @media (prefers-reduced-motion: reduce) { html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: none !important; } } html.theme-light { /* ------------------------------------------------------------------ Surfaces: white ground, slate-100 functional surfaces, opaque white cards. No translucency: frosted glass reads as haze on white. ------------------------------------------------------------------ */ --bg-body: #ffffff; --bg-card: #ffffff; --bg-card-solid: #ffffff; --bg-card-hover: #f1f5f9; --bg-input: #ffffff; --bg-overlay: rgba(15, 23, 42, 0.45); --bg-subtle: #f1f5f9; --bg-highlight: #e2e8f0; --bg-success-subtle: rgba(22, 163, 74, 0.08); --bg-danger-subtle: rgba(220, 38, 38, 0.06); --bg-warning-subtle: rgba(217, 119, 6, 0.08); /* ------------------------------------------------------------------ Accents: MEMDEX brand blue for primary actions; the app's proven sky-blue for links and interactive highlights. Warm accents darken so they hold contrast as text on white. ------------------------------------------------------------------ */ --accent-primary: #075990; --accent-secondary: #0369a1; --accent-highlight: #0369a1; --accent-muted: #64748b; --accent-warm: #b45309; --accent-warm-bright: #92400e; --accent-warm-muted: #d97706; /* Status: green-600 / red-600 / amber-600, same as the app. */ --positive: #16a34a; --positive-muted: #15803d; --negative: #dc2626; --negative-muted: #b91c1c; --warning: #d97706; --info: #0369a1; /* Text: the app's slate scale. slate-900 / slate-700 / slate-500. */ --text-primary: #0f172a; --text-secondary: #334155; --text-muted: #64748b; --text-inverse: #ffffff; /* Borders: neutral slate hairlines, no blue cast. Focus keeps blue. */ --border-default: rgba(15, 23, 42, 0.08); --border-focus: #0369a1; --border-glow: rgba(3, 105, 161, 0.25); --border-success: rgba(22, 163, 74, 0.35); --border-danger: rgba(220, 38, 38, 0.30); --border-warning: rgba(217, 119, 6, 0.35); /* Glass panels become plain opaque white panels. */ --glass-blur: 0px; --glass-bg: #ffffff; --glass-border: rgba(15, 23, 42, 0.08); --glass-highlight: #ffffff; /* Shadows: the app's card shadow recipe for resting cards, scaled up for floating elements. Separation comes from hairline borders; glows and embossing are removed entirely in light mode. */ --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.06); --shadow-md: 0 2px 6px rgba(15, 23, 42, 0.06), 0 6px 16px rgba(15, 23, 42, 0.07); --shadow-lg: 0 6px 16px rgba(15, 23, 42, 0.10); --shadow-xl: 0 12px 32px rgba(15, 23, 42, 0.14); --shadow-glow: none; --shadow-glow-strong: none; --shadow-emboss-light: none; --shadow-emboss-dark: none; /* ------------------------------------------------------------------ Landing theme (--landing-*) Same feel for when the landing pages get their light art direction: white ground, slate ink, brand blue where color means something. Landing pages are not wired to the toggle yet (pending Jeff's call on light artwork), but the values are ready. ------------------------------------------------------------------ */ --landing-bg: #ffffff; --landing-bg-deep: #f1f5f9; --landing-fg: #0f172a; --landing-primary: #0a3d7a; --landing-primary-light: #1a5aa0; --landing-primary-dark: #052850; --landing-silver: #334155; --landing-silver-light: #0f172a; --landing-silver-dark: #64748b; --landing-silver-muted: rgba(15, 23, 42, 0.45); --landing-accent: #0369a1; --landing-accent-glow: rgba(3, 105, 161, 0.18); --landing-accent-bright: #075985; --landing-warm: #b45309; --landing-warm-bright: #92400e; --landing-warm-glow: rgba(180, 83, 9, 0.18); --landing-warm-muted: rgba(180, 83, 9, 0.10); --landing-near: #0e7490; } /* ---------------------------------------------------------------------- Bridge: while the site theme is active, the MD1 app's private light tokens (--obs-l-*, defined in css/pages/map.css) resolve to the global tokens above, so the app and the site are one palette by construction. The app's standalone obs-light toggle (no site theme) still works via the original values in map.css. ---------------------------------------------------------------------- */ html.theme-light .obs-light { --obs-l-bg: var(--bg-body); --obs-l-bg-alt: var(--bg-subtle); --obs-l-card: var(--bg-card-solid); --obs-l-card-border: var(--border-default); --obs-l-card-shadow: var(--shadow-sm); --obs-l-text: var(--text-primary); --obs-l-text-secondary: var(--text-secondary); --obs-l-text-muted: var(--text-muted); --obs-l-text-faint: #94a3b8; --obs-l-accent: var(--accent-highlight); --obs-l-accent-soft: rgba(3, 105, 161, 0.08); --obs-l-positive: var(--positive); --obs-l-negative: var(--negative); --obs-l-warning: var(--warning); } /* ---------------------------------------------------------------------- Global component overrides. These live here (not in their source files) because base.css, layout.css and effects.css are minified single-line files; a documented section here is safer to review than editing those. ---------------------------------------------------------------------- */ /* base.css paints the site-wide artwork via body::before (--page-bg-image) and a dark gradient wash via body::after; both fade with --bg-fade. Light mode drops the dark wash entirely. Artwork mapping (Anthony, 2026-07-07): each page's light artwork mirrors its dark artwork family. The dark default (background.webp) is the ribbon, so the light default is the light ribbon. Pages whose page CSS overrides the dark artwork (the backtest pages use grid-bg.webp) declare the matching light counterpart in that same page CSS, next to the dark declaration — those rules share this selector's specificity and win by loading later. */ html.theme-light { --page-bg-image: url('../assets/background-ribbon-light.webp'); --bg-fade: 1; } html.theme-light body::after { background: none; } /* layout.css: the sticky footer keeps a hardcoded navy gradient. */ html.theme-light .page-footer { background: var(--bg-subtle); backdrop-filter: none; -webkit-backdrop-filter: none; border-top: 1px solid var(--border-default); border-bottom: none; box-shadow: none; } /* effects.css: dark glass card variants become opaque white cards. */ html.theme-light .glass-card, html.theme-light .glass-card-subtle, html.theme-light .glass-card-strong { background: var(--bg-card-solid); border-color: var(--border-default); box-shadow: var(--shadow-md); backdrop-filter: none; -webkit-backdrop-filter: none; } html.theme-light .glass-card:hover, html.theme-light .glass-card-subtle:hover, html.theme-light .glass-card-strong:hover { background: var(--bg-card-solid); box-shadow: var(--shadow-lg); } /* effects.css: embossed text shadows read as dirt on white. */ html.theme-light .emboss, html.theme-light .emboss-light, html.theme-light .emboss-strong { text-shadow: none; } /* base.css: the shared MEMDEX brand title component hardcodes white; navbars are white in light mode, so the brand ink flips to slate. */ html.theme-light .memdex-brand-title { color: var(--text-primary); } html.theme-light .memdex-brand-title .brand-sep { background: rgba(15, 23, 42, 0.35); } /* layout.css: .page-skyline is a fixed dark cityscape revealed by the scroll fade at the page end. Its artwork is dark-only; hide it until a light version of the skyline asset exists. */ html.theme-light .page-skyline { opacity: 0 !important; } /* layout.css gives .page a 100vh bottom padding: the scroll runway for the dark-mode skyline reveal. The skyline is hidden in light mode, so the runway is just empty white scroll; pages end at the footer. */ html.theme-light .page { padding-bottom: 0; }