/* ============================================================================
zen-theme.css — Sam's canonical web theme (the house default across projects).
Single source of truth: copy this file into a new project's static/styles dir
and link it; change themes HERE and projects that vendor it stay in sync.
Two themes via a data attribute on :
zen-light = default — mint page · white cards · deep-teal ink (AAA accents)
zen-cosmic = the dark trademark theme
Pair with the no-FOUC script (apply saved theme before paint):
========================================================================== */
[data-theme="zen-light"]{
--surface:#ffffff; --elevated:#f3faf6; --line:#cfe6da; --line-strong:#a7c4b8;
--fg:#0c2f28; --muted:#33504a; --faint:#5b7a6f; --tab-fg:#ffffff;
--cyan:#0d6b80; --teal:#0d5b6e; --green:#047857; --amber:#b45309;
--pink:#be185d; --purple:#7b2da8; --indigo:#4f46e5; --sky:#0369a1;
--card-bg:#ffffff;
--card-shadow:0 10px 26px -14px rgba(16,75,60,.18),0 0 24px -12px rgba(94,234,212,.45),0 0 0 1px rgba(125,211,252,.16);
}
[data-theme="zen-cosmic"]{
--surface:#13151f; --elevated:#181b26; --line:#262a3b; --line-strong:#3c4566;
--fg:#e7e9ee; --muted:#9aa3b4; --faint:#6b7280; --tab-fg:#0a0a14;
--cyan:#22d3ee; --teal:#2dd4bf; --green:#4ade80; --amber:#fbbf24;
--pink:#f472b6; --purple:#a855f7; --indigo:#6366f1; --sky:#7dd3fc;
--card-bg:linear-gradient(180deg,#13151f,rgba(19,21,31,.7));
--card-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 0 28px -18px rgba(99,102,241,.65);
}
*{box-sizing:border-box} html,body{margin:0}
body{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
color:var(--fg); min-height:100vh; -webkit-font-smoothing:antialiased; background-attachment:fixed;
}
[data-theme="zen-light"] body{
background:
radial-gradient(55rem 30rem at 10% -8%, rgba(52,211,153,.30), transparent 60%),
radial-gradient(48rem 28rem at 96% 0%, rgba(125,211,252,.24), transparent 55%),
radial-gradient(44rem 30rem at 50% 116%, rgba(196,181,253,.16), transparent 60%),
linear-gradient(170deg,#e4f3e9 0%,#daeede 50%,#e2f1ea 100%);
background-attachment:fixed;
}
[data-theme="zen-cosmic"] body{
background:
radial-gradient(60rem 60rem at 110% -10%, rgba(99,102,241,.14), transparent 60%),
radial-gradient(52rem 52rem at -10% 110%, rgba(6,182,212,.10), transparent 60%),
#0a0a14;
background-attachment:fixed;
}
/* Minimal building blocks — extend per project. */
.card{position:relative;background:var(--card-bg);border:1px solid var(--line);border-radius:16px;
padding:18px 20px;box-shadow:var(--card-shadow)}
.btn{cursor:pointer;border:1px solid var(--line);background:var(--elevated);color:var(--muted);
border-radius:999px;padding:6px 14px;font-size:13px;transition:.15s}
.btn:hover{border-color:var(--cyan);color:var(--fg)}
/* Slide-style "snapshot" / at-a-glance grid — chunk facts into scannable tiles,
never long bullet lists (house UI rule; see global CLAUDE.md "chunk, don't dump").
Usage (vanilla HTML):
At a glance
What it is
One tight line with a key term.
In React, map an array of {k, v} to .snap tiles; bold the key term in v.
Themes automatically (light + dark) via the tokens above. */
.snapshot{display:grid;grid-template-columns:1fr;gap:10px;margin:8px 0}
@media (min-width:640px){.snapshot{grid-template-columns:1fr 1fr;gap:12px 14px}}
.snap{border:1px solid var(--line);border-left:3px solid var(--teal);
border-radius:10px;padding:11px 14px;background:var(--elevated)}
.snap-k{font-size:10px;letter-spacing:.07em;text-transform:uppercase;
color:var(--teal);font-weight:700;margin-bottom:3px}
.snap-v{font-size:13px;line-height:1.5;color:var(--fg)}
.snap-v strong{font-weight:700}
.snapshot-title{font-size:10px;letter-spacing:.07em;text-transform:uppercase;
color:var(--teal);font-weight:700;margin:0 0 8px}
.snapshot-hint{font-size:11px;color:var(--muted);margin-top:8px}
/* ============================================================================
MODAL BASE — centered overlay dialog (ships with the theme so the "modal
renders in a corner / inline at page bottom" bug never happens in a new
project). Markup:
…
…
…
.
Open by adding .open (or JS setting style.display='flex'); close by removing it.
⚠️ GUARDRAIL (the two ways this bug appears, both prevented here):
1. Missing overlay styles → the dialog falls into normal document flow and
lands at the page bottom/corner. (Fixed by shipping .modal below.)
2. A `transform`, `filter`, `backdrop-filter`, `perspective`, or `zoom` on ANY
ANCESTOR of .modal re-anchors `position:fixed` to that ancestor instead of
the viewport, pushing the dialog into a corner. NEVER put those on
html/body/app-root/large wrappers. Keep .modal a direct child of .
If you LIFT a glossary/modal component from another project (e.g. the
stand-demo glossary trio), also bring its token names or add a shim — that CSS
may expect --accent/--chrome/--panel2/--body-ink/--accent2 which this theme
names differently (--teal/--fg/--faint/--cyan/…). ========================== */
.modal{ display:none; position:fixed; inset:0; z-index:1000;
background:rgba(6,12,24,.55); align-items:center; justify-content:center; }
.modal.open{ display:flex; }
.modal .box{ background:var(--card-bg); color:var(--fg); width:480px; max-width:92%;
max-height:85%; overflow:auto; border:1px solid var(--line); border-radius:12px;
box-shadow:var(--card-shadow, 0 24px 70px rgba(0,0,0,.4)); }
.modal .hdr{ background:var(--teal); color:#fff; padding:10px 14px; font-weight:700;
display:flex; align-items:center; gap:10px; }
.modal .bodyy{ padding:13px 15px; line-height:1.55; }
.modal .ftr{ padding:9px 15px 13px; text-align:right; }
.modal .box button{ background:var(--teal); color:#fff; border:0; padding:6px 18px;
border-radius:6px; cursor:pointer; font:inherit; }
.modal .box button:hover{ filter:brightness(1.08); }