/* Project Elm — GitHub Pages site. Same Daydream Software tokens as render/curate/curate.css:
dark is the default; [data-theme="light"] on flips to light. Each page's has
an inline bootstrap script (localStorage, else prefers-color-scheme) that sets the attribute
before paint, and a #theme-toggle button (assets/theme.js) flips it — same pattern as the
app's own theme toggle in render/curate/. */
@font-face {
font-family: 'Geist';
src: url('../fonts/Geist-Variable.woff2') format('woff2');
font-weight: 100 900;
font-display: swap;
}
:root {
--brand-500: #a78bfa;
--panel: rgba(15, 23, 42, 0.90);
--panel-2: rgba(15, 23, 42, 0.55);
--line: rgba(167, 139, 250, 0.20);
--line-soft: rgba(167, 139, 250, 0.14);
--text: #f8fafc; --muted: rgba(248, 250, 252, 0.6);
--accent: #a78bfa; --accent-hi: #b39dfb;
--btn-bg: #a78bfa; --btn-bg-hover: #b39dfb; --btn-fg: #1a0f3a;
--code-bg: rgba(2, 6, 23, 0.55);
--radius: 18px; --radius-sm: 12px; --pill: 999px;
--shadow: 0 16px 40px rgba(2, 6, 23, 0.28);
--card-blur: blur(12px);
--font: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
--page-bg: radial-gradient(circle at top, rgba(124, 58, 237, 0.28), transparent 38%),
linear-gradient(180deg, #020617 0%, #0f172a 48%, #111827 100%);
color-scheme: dark;
}
[data-theme="light"] {
--panel: #ffffff;
--panel-2: #faf9fc;
--line: rgba(167, 139, 250, 0.35);
--line-soft: rgba(167, 139, 250, 0.20);
--text: #0f172a; --muted: rgba(15, 23, 42, 0.6);
--accent: #7c3aed; --accent-hi: #8b5cf6;
--btn-bg: #7c3aed; --btn-bg-hover: #8b5cf6; --btn-fg: #ffffff;
--code-bg: rgba(124, 58, 237, 0.06);
--shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
--card-blur: none;
--page-bg: radial-gradient(circle at top, rgba(167, 139, 250, 0.10), transparent 40%),
linear-gradient(180deg, #fbfaff 0%, #f5f3ff 100%);
color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0; min-height: 100vh; font-family: var(--font); font-size: 16px; line-height: 1.6;
color: var(--text); background: var(--page-bg) fixed;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
/* ---- Topbar ---- */
.topbar { position: sticky; top: 0; z-index: 10; padding: 14px 0; }
.topbar .bar {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 10px 18px; border-radius: var(--radius);
background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow);
backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand .mark { width: 24px; height: 24px; color: var(--brand-500); flex: none; }
.brand span { font-weight: 700; letter-spacing: -0.01em; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14px;
padding: 8px 12px; border-radius: var(--radius-sm); transition: color 150ms ease, background 150ms ease;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); background: var(--panel-2); }
.nav a.cta { color: var(--btn-fg); background: var(--btn-bg); }
.nav a.cta:hover { background: var(--btn-bg-hover); color: var(--btn-fg); }
.icon-btn {
padding: 7px 9px; display: inline-flex; align-items: center; color: var(--muted);
border: 1px solid var(--line); background: var(--panel-2); border-radius: var(--radius-sm); cursor: pointer;
transition: color 150ms ease, border-color 150ms ease;
}
.icon-btn:hover { color: var(--accent); border-color: var(--accent); }
.icon-btn svg { width: 18px; height: 18px; }
.i-sun { display: none; }
[data-theme="light"] .i-sun { display: inline; }
[data-theme="light"] .i-moon { display: none; }
/* ---- Hero ---- */
.hero { padding: 64px 0 32px; text-align: center; }
.hero .eyebrow {
display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent);
background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--pill);
padding: 6px 14px; margin-bottom: 22px;
}
.hero h1 { font-size: clamp(32px, 5vw, 52px); line-height: 1.1; margin: 0 0 18px; letter-spacing: -0.02em; }
.hero h1 .accent { color: var(--accent); }
.hero p.lead { font-size: 18px; color: var(--muted); max-width: 640px; margin: 0 auto 30px; }
.hero-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 48px; }
/* ---- Buttons ---- */
.btn {
display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 700; font-size: 15px;
padding: 12px 22px; border-radius: var(--radius-sm); border: 1px solid var(--line);
background: var(--panel-2); color: var(--text); cursor: pointer; text-decoration: none;
transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.btn:hover { border-color: var(--accent); transform: translateY(-1px); }
.btn.primary { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.btn.primary:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); }
/* ---- Diagram ---- */
.diagram {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 0 56px;
}
.diagram .step {
padding: 20px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line);
box-shadow: var(--shadow); text-align: left;
}
.diagram .step .n {
display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
border-radius: 50%; background: var(--accent); color: var(--btn-fg); font-weight: 700; font-size: 13px;
margin-bottom: 12px;
}
.diagram .step h3 { margin: 0 0 6px; font-size: 16px; }
.diagram .step p { margin: 0; color: var(--muted); font-size: 14px; }
/* ---- Screenshot frame — a .shot-themed ![]()
has data-dark/data-light instead of a
src; assets/theme.js sets .src to whichever one matches the current [data-theme]
(on load and again on toggle-click), so only ONE variant is ever fetched, unlike a
dark+light ![]()
pair with one hidden via CSS (display:none doesn't stop the browser
from fetching both). A