/* public_html/assets/css/site.css
*
* WHY (step 4.2): this is the real base stylesheet the 0.1 smoke-test file
* promised would "arrive in a later step." It replaces the disposable centred-
* card styles with the app shell's foundation: design tokens, a tiny reset,
* the header/main/footer layout, and the accessibility primitives that the 4.2
* Done-when bar requires (visible focus, a skip link, reduced-motion support).
* View- and component-level styling lives in pages.css; this file is the floor
* everything else builds on.
*
* AESTHETIC (brief §11.6): scholarly without dryness, premium without parchment.
* We deliberately avoid the warm-cream/terracotta cliché the old smoke page used
* (its --bg was #f4f1ea). The palette here is a COOL near-white paper with a
* near-black ink, a single restrained "lectern blue" for action/links, and a
* muted gold used ONLY as a thin accent rule and small-caps eyebrow — the one
* memorable touch, kept quiet everywhere else. No gamification, no ornament.
*
* HOW: plain CSS with custom properties for theming (brief §11.1 "Use CSS
* variables"). No utility framework, no build. Everything is keyboard- and
* screen-reader-friendly by construction.
*/
/* ======================================================================
* Design tokens
* Colour, type, spacing and radii as variables so views theme consistently
* and a future dark mode / Accessibility Mode (FUTURE_CONSIDERATIONS) can flip
* a small set of values rather than hunt through rules.
* ==================================================================== */
:root {
/* Paper & ink. Cool, not cream — a clean scholarly surface. */
--page: #fcfcfb; /* the page behind cards */
--surface: #ffffff; /* cards, header, inputs */
--ink: #1b1f24; /* primary text (near-black, faintly cool) */
--muted: #5b626b; /* secondary text, captions */
--hairline: #e4e6e2; /* borders, dividers */
--hairline-strong: #d4d7d1;
/* Action colour: a deep "lectern blue" — restrained, not the default vermilion
* or acid-green. Used for links, primary buttons and focus accents. */
--accent: #28507e;
--accent-strong: #1d3c5e; /* hover/active */
--accent-tint: #eef3f8; /* very light fill for selected/notice */
/* The one warm note: a muted scholarly gold. Hairline rules + eyebrows ONLY. */
--gold: #9a7b2e;
/* Semantic feedback. Distinct in hue AND lightness so they never rely on
* colour alone to carry meaning (brief §11 "usable without colour-only cues").
* Always paired with an icon/word in the markup. */
--ok: #1f6b40;
--ok-bg: #ecf6f0;
--bad: #a3242b;
--bad-bg: #fbeeee;
--warn: #8a5a00;
--warn-bg:#fbf3e3;
/* Focus ring — high-contrast, drawn with outline so it never shifts layout. */
--focus: #1664c0;
/* Type. A serif display family (scholarly) over a sans body/UI family, both
* from the system stack so there is NO web-font download — fast, offline-safe,
* and CSP-clean (no external origins). A mono family for keys/codes. */
--font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
Georgia, "Times New Roman", serif;
--font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
/* A modest type scale (~1.2 ratio), spacing step, and radii. */
--fs-eyebrow: .72rem;
--fs-small: .875rem;
--fs-body: 1rem;
--fs-h3: 1.15rem;
--fs-h2: 1.45rem;
--fs-h1: 1.9rem;
--space: 1rem;
--radius: 8px;
--radius-sm: 6px;
--maxw: 64rem; /* readable content width cap */
}
/* ======================================================================
* Tiny reset — only what we rely on, not a kitchen-sink normalize.
* ==================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
min-height: 100vh;
display: flex; /* sticky-footer column: header / main / footer */
flex-direction: column;
background: var(--page);
color: var(--ink);
font: var(--fs-body)/1.55 var(--font-body);
}
h1, h2, h3 { font-family: var(--font-display); line-height: 1.2; font-weight: 600; }
h1 { font-size: var(--fs-h1); margin: 0 0 .5rem; }
h2 { font-size: var(--fs-h2); margin: 1.75rem 0 .5rem; }
h3 { font-size: var(--fs-h3); margin: 1.25rem 0 .35rem; }
p { margin: 0 0 1rem; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-strong); }
img, svg { max-width: 100%; height: auto; }
/* Honour OS-level reduced-motion: kill non-essential animation/transition for
* everyone who asked for it (brief §11 "respects prefers-reduced-motion"). */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
}
/* ======================================================================
* Focus visibility — load-bearing for the 4.2 a11y bar.
* A clearly visible ring on keyboard focus, suppressed for mouse users via
* :focus-visible. Drawn with outline + offset so it never reflows the page.
* ==================================================================== */
:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 2px;
border-radius: 3px;
}
/* Headings receive programmatic focus on route change (router.js moves focus to
* the new view's