/* ============================================================ HEADLESS MODE — "Boutique" redesign. Design tokens, chrome, and content styles for a light commerce storefront. Layout utilities come from Tailwind (/css/tailwind.css). This file owns the design tokens, the site chrome, and long-form content typography. Display serif (var(--font-serif)) is reserved for h1/h2 and product names; body type is the platform system sans stack; monospace (var(--font-mono), set in src/css/main.css) is reserved for code, commands, and literal sample output — never for badges or labels. ============================================================ */ :root { /* ---- Light only, and on purpose ---- This is the Boutique direction: a warm-paper storefront, not the dark terminal-facing developer site it replaces. There is no dark theme and no prefers-color-scheme block anywhere in this file — that is a decision, not an oversight. The one exception is scoped, not global: the /quiet-corners/ dashboard is an immersive map "app" screen with its own literal dark backgrounds baked into its markup (never touched by this redesign — see PAGES §4), so its text/border tokens are restored to their pre-redesign dark values under .themed-\[dark\] at the bottom of this file. Everywhere else on the site, these tokens are the whole story. Pairs with in partials/head.html. */ color-scheme: light; /* Accent — deep green. --accent-500 is the base (links, primary actions): #166534 is 6.67:1 on --bg-primary and 7.13:1 on --bg-card, AA for normal text on both. --accent-600 is its hover/active shade (darkening on hover keeps contrast rising, never falling); --accent-400/300 are lighter steps used for tints and small on-brand accents; --accent-tint* is the pale wash behind the "Product" chip. This green IS the palette the old "Free · open source" chip wore (--success-*), promoted to accent — which is why that chip now wears the warm neutral instead (src/css/main.css, data-status="free"): a chip must never look like a primary action. */ /* Forest/kelly family (HM-A4): #1f6f3a is kelly deepened until white text reads on it (6.2:1) and it reads as text on the paper (6.1:1). */ --accent-500: #1f6f3a; --accent-600: #1b4d32; --accent-400: #24803f; --accent-300: #4cbb17; --accent-900: #123d2b; --accent-glow: rgba(31, 111, 58, 0.18); --accent-tint: #e9f2ea; --accent-tint-border: #cfe0d3; /* Homepage hero band. --forest is the band (white text 11.6:1); --kelly is the short rule over the headline, an accent only, never text. --on-forest-soft is the line under the headline (8.1:1). */ --forest: #123d2b; --kelly: #4cbb17; --on-forest-soft: #cfe0d3; /* Neutrals — ink + one secondary. Both verified ≥4.5:1 (WCAG AA, normal text) on --bg-primary (#faf7f2) AND --bg-card (#ffffff): ink is ~15.7:1 / ~16.7:1, secondary (Tailwind stone-600) is ~6.8:1 / ~7.2:1. --text-muted and --text-subtle collapse onto the same secondary rather than introducing a third, lighter grey that would need its own contrast proof for every place it lands — one safe secondary beats three tones of "probably fine". */ --text-primary: #18201b; /* ink, a green-black */ --text-secondary: #55605a; /* secondary, 6.3:1 on paper */ --text-muted: #55605a; --text-subtle: #55605a; --bg-primary: #faf8f3; /* paper */ --bg-card: #ffffff; /* panel */ --bg-elevated: #eef1ec; /* tinted panel — inline code, install chips */ --border-default: #e3e6df; --border-subtle: #ebeee8; --panel-shadow: 0 1px 3px rgb(24 32 27 / 0.06); /* Status chips (the plan's "price-tag-style chips"). The free chip's old green (--success-*) became the accent family above, so free now wears the warm neutral (--bg-elevated / --border-default, styled in src/css/main.css) — undated (available, no proven ship month) keeps stone + dashed, product keeps the pale accent tint: three chips, three looks. */ --undated-fg: #57534e; --undated-bg: #f5f5f4; /* ---- Type ---- Display serif for h1/h2 and product names: Source Serif 4, served from this site (/fonts/, font-src 'self'; licence in NOTICE), falling back to Georgia. Body copy is the platform sans stack. */ --font-serif: 'Source Serif 4', Georgia, 'Iowan Old Style', 'Times New Roman', serif; --font-body: -apple-system, 'Segoe UI', system-ui, sans-serif; /* Font-size steps still in use by list/entry chrome. h1 is a clamp per spec (2.4rem floor, 3.6rem ceiling, 5vw fluid) rather than a fixed step — the one size below that is genuinely fluid. */ --font-size-2xs: 0.75rem; --font-size-xs: 0.8rem; --font-size-sm: 0.85rem; --font-size-md: 0.95rem; --font-size-base: 1rem; --font-size-lg: 1.35rem; --font-size-xl: 1.85rem; --font-size-hero: clamp(2rem, 5vw, 3.6rem); /* two lines at 390px, still 2x body */ } @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/source-serif-4/source-serif-4-latin-600-normal.woff2) format('woff2'); } @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/source-serif-4/source-serif-4-latin-700-normal.woff2) format('woff2'); } html, body { background: var(--bg-primary); color: var(--text-primary); font-family: var(--font-body); line-height: 1.65; min-height: 100vh; } /* The footer sits at the viewport bottom on short pages: the body is a column and main absorbs the slack, so no page-background band renders below it. */ body { display: flex; flex-direction: column; } body > main { flex: 1 0 auto; } /* h1/h2 everywhere (including markdown content headings) and product names take the display serif, per the binding type spec. */ h1, h2, .shelf-panel__name { font-family: var(--font-serif); } /* Interaction transitions live only on links/buttons. */ a, button { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ---- Shared page container ---- Replaces the old max-w-4xl (56rem) Tailwind utility everywhere: the spec's max-width is 66rem, generous enough for the shelf grid to breathe. */ .shop-row { max-width: 66rem; margin-inline: auto; padding-inline: 1.5rem; } /* ---- Skip link (a11y) ---- */ .skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: 10001; } .skip-link:focus { position: fixed; left: 1rem; top: 1rem; width: auto; height: auto; padding: 0.5rem 1rem; background: var(--bg-card); color: var(--accent-600); border: 1px solid var(--accent-500); border-radius: 6px; font-size: 0.875rem; text-decoration: none; box-shadow: var(--panel-shadow); outline: 2px solid var(--accent-500); outline-offset: 2px; } /* ---- Global focus fallback ---- Every interactive component below defines its own ring; this is the net under anything that inherits a plain /