/* ============================================================================
* site-light.css — light-theme override for site.css
*
* Loaded AFTER site.css on pages that want the "index.html look" instead of
* the dark frosted-glass look. Site.css defines all the marketing classes
* (.sp-header, .heroCard, .section, .tile, .btn, etc.) against a dark navy
* palette; this file flips the palette to match index.html — white bg,
* blue accent, Plus Jakarta Sans, subtle borders.
*
* Wiring per page:
* 1. In , load AFTER site.css:
*
* 2. Remove `class="marketing"` from — site.css uses that class
* to paint the origami-bird fullscreen background, which fights this
* theme.
*
* Built 2026-07-05 for conference-page reshape.
* ==========================================================================*/
/* ── Color tokens — override site.css :root ─────────────────────────────── */
:root {
--bg0: #ffffff;
--bg1: #f8fafc;
--card: #ffffff;
--card2: #f8fafc;
--border: rgba(15, 23, 42, 0.10);
--border2: rgba(15, 23, 42, 0.14);
--text: #0f172a;
--muted: rgba(15, 23, 42, 0.62);
--muted2: rgba(15, 23, 42, 0.72);
--blue: #3b82f6;
--blue-d: #2563eb;
--navy: #0f172a;
--line: rgba(15, 23, 42, 0.10);
--slate: rgba(15, 23, 42, 0.55);
}
/* ── Page background — kill the dark radial gradient + bird ─────────────── */
html, body {
background: #ffffff !important;
}
body {
color: var(--text);
/* Undo site.css's fullscreen radial gradient stack. */
background-image: none !important;
}
body.marketing {
/* Even if a page still has body.marketing, kill the bird here. */
background-image: none !important;
}
body::before,
body.marketing::before {
display: none !important;
content: none !important;
background: none !important;
}
/* Global text — anywhere site.css or content pages assumed white text on dark. */
strong { color: #0f172a; }
/* ── Header — light frosted pill instead of dark ─────────────────────────── */
.sp-header {
background: transparent;
}
.sp-headerInner {
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow:
0 4px 20px rgba(15, 23, 42, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
}
.sp-brand,
.sp-brand-mark {
filter: none;
}
.sp-brand-subtitle {
color: rgba(15, 23, 42, 0.55);
}
.sp-link {
color: rgba(15, 23, 42, 0.70);
}
.sp-link:hover {
color: #0f172a;
background: rgba(15, 23, 42, 0.05);
}
.sp-pill {
color: rgba(15, 23, 42, 0.85);
border-color: rgba(15, 23, 42, 0.12);
background: transparent;
}
.sp-pill:hover {
color: #0f172a;
background: rgba(15, 23, 42, 0.04);
}
.sp-pill-ghost {
background: #ffffff;
border-color: rgba(15, 23, 42, 0.15);
color: #0f172a;
}
.sp-pill-primary {
background: linear-gradient(180deg, #3b82f6, #2563eb);
color: #ffffff;
border-color: transparent;
box-shadow: 0 6px 18px rgba(59, 130, 246, 0.28);
}
.sp-pill-primary:hover {
background: linear-gradient(180deg, #2563eb, #1d4ed8);
color: #ffffff;
}
/* ── Content containers — light cards instead of dark glass ─────────────── */
/* !important on background because site.css .tile / .section set a dark rgba
bg AND a backdrop-filter blur that would otherwise leak through. Same
specificity → load order wins, but !important is defensive against any
inline