/* ============================================================================
Kreiso /specials — the Kreiso design system, route-scoped
============================================================================
Everything lives under `.specials`. It was a separate visual system once
("Brat bones + Patch Kid fun"), frozen against pre-2026-08-23 tokens and
waiting for the landing restyle. The restyle happened, so this file is the
same design system as the rest of the site now: lilac wash, white cards, one
lime per screen, NO BORDERS, two shadows, Archivo on its width axis.
The scoping stays, and so does the file. Two reasons, both unchanged:
WHY A PLAIN CSS FILE IN /public RATHER THAN A TAILWIND @theme OR A CSS MODULE
The /specials surface is rendered TWO ways and both must look identical:
1. /specials and /specials/{slug} → HTML from the mvp_specials Cloud
Function (so events publish with no rebuild + get per-event OG tags)
2. /specials/enroll and /thanks → static Next/React pages
A Next-bundled stylesheet gets a hashed filename the Python function can't
link, and Tailwind v4's `@theme` must be top-level. One stable-path
stylesheet is the only thing both surfaces can share.
THE FUNCTION PAGES LOAD THIS FILE AND NOTHING ELSE. No globals.css, no
Tailwind. So the @font-face rules, the tokens and the control scale are all
declared here as well, and `npm run check:tokens` holds them to the same
canonical values as app/globals.css.
CACHE NOTE: edit this file in place and ship it. The filename is NOT
versioned and must not become versioned. firebase.json serves every other
*.css with `max-age=31536000, immutable`, which is right for Next's
content-hashed chunks and wrong for a hand-named file — so this one path has
its own rule, placed after that glob so it wins:
"/specials-theme.css" → "public, max-age=300"
A change is therefore live in five minutes, and nothing else needs touching.
`max-age`, not `no-cache`, on purpose: Firebase Hosting honours If-None-Match
only on CACHEABLE objects, so `no-cache` here would re-download the whole
file on every page load of /specials, /links and /email-verification,
forever. See landing/docs/hosting.md for the measurements.
RENAMING this file is a CROSS-DEPLOY change: Hosting serves it, but
specials_html.py only emits the , and the two deploy separately.
Publish the new name first, repoint second, or every /specials page renders
unstyled until landing catches up.
MIRROR CONTRACT: design/tokens.json is canonical (see design/README.md).
Update this file by hand when tokens change; never import across projects.
========================================================================= */
/* Fonts — SELF-HOSTED, deliberately, and the same three files app/globals.css
uses. Served from our own origin rather than @import'ed from Google for two
reasons: loading them from Google discloses every visitor's IP to a third
party on a German-market site, and an @import is render-blocking on the paid
conversion path.
All three are VARIABLE. Archivo carries a WIDTH axis, which the whole type
system rides on: 70–72% for display, 84% for titles. `block` on Archivo
because a fallback swap on a large uppercase payoff is a visible reflow. */
@font-face {
font-family: "Archivo";
font-style: normal;
font-weight: 100 900;
font-stretch: 62% 125%;
font-display: block;
src: url("/fonts/Archivo-variable.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("/fonts/Inter-variable.woff2") format("woff2");
}
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-weight: 100 800;
font-display: swap;
src: url("/fonts/JetBrainsMono-variable.woff2") format("woff2");
}
.specials {
/* ── palette ──
One hue. Lime acts, lilac belongs, the wash holds, ink is type only.
Mirrored from design/tokens.json; `npm run check:tokens` holds it there. */
--ink: #0e0e0e;
--ink70: rgba(14, 14, 14, 0.7);
--ink45: rgba(14, 14, 14, 0.45);
--ink12: rgba(14, 14, 14, 0.12);
--ink08: rgba(14, 14, 14, 0.08);
--hairline-in-card: rgba(14, 14, 14, 0.07);
--lime: #beff0a;
--lime-deep: #a9e600;
--lilac: #d8c4ff;
--lilac-deep: #c6acff;
--ground: #ece2ff;
--well: #e4d7ff;
--well-deep: #dfd2fa;
--white: #ffffff;
--ok: #2e6b33;
--err: #c22525;
/* ── type ──
Three families, at most three styles on a screen. Archivo is used on its
WIDTH axis: 70–72% for display statements, 84% for content titles. There
is no fourth family; Baloo 2 went with the Patch Kid system. */
--display: "Archivo", "Helvetica Neue", Arial, sans-serif;
--sans: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
--display-wdth: 72%;
--display-wdth-payoff: 70%;
--display-tracking: -0.02em;
--display-leading: 0.92;
--title-wdth: 84%;
--title-tracking: -0.012em;
--title-leading: 1.08;
/* ── shadows ──
Exactly two, and nothing else casts anything. Cast sits under the lime
pill, because lime and the wash are only 1.05 apart in luminance and need
a soft edge as well as a hue. Lift is for the one thing that floats. */
--shadow-cast: 0 2px 12px rgba(14, 14, 14, 0.16);
--shadow-lift: 0 3px 14px rgba(14, 14, 14, 0.08);
/* ── motion — one arrival, one press ── */
--motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
--motion-press-scale: 0.972;
--motion-press-duration: 120ms;
/* ── the control-dimension scale ──
Mirrored from design/tokens.json, same values and same spellings as
app/globals.css. It is repeated here rather than inherited because the
function-rendered /specials pages load THIS FILE AND NOTHING ELSE — they
never see globals.css, so a token declared only there resolves to nothing
on half the surface this stylesheet serves.
The heights are EXACT. They were chosen against the type, not against a
4px rhythm, so do not snap them. The height is authoritative: set it and
centre the content, never author a vertical padding beside it. */
--control-xs: 32px;
--control-sm: 38px;
--control-md: 48px;
--control-lg: 54px;
--control-xl: 58px;
--control-input: 54px;
--control-otp: 64px;
--control-chip: 42px;
--control-tile: 72px;
/* A control smaller than the touch floor keeps its visual box and carries an
invisible hit-area extension. It does not grow. */
--touch-min: 44px;
--hit-inset: -6px;
--pad-x-xs: 14px;
--pad-x-sm: 18px;
--pad-x-md: 24px;
--pad-x-lg: 28px;
/* ── shape ── */
--radius-pill: 999px;
--radius-lg: 20px;
--radius-md: 16px;
--radius-sheet: 24px;
--radius-icon-square: 12px;
--radius-bubble: 19px;
--radius-tile: 16px;
/* ── ground ──
One ground, flat. The Patch Kid dot grid is gone: this system has no
repeating patterns, no noise and no gradients of any kind. */
background: var(--ground);
color: var(--ink);
font-family: var(--sans);
font-size: 15px;
line-height: 1.45;
-webkit-font-smoothing: antialiased;
}
/* The payoff register. A booking that came through is "this is yours", so it
floods LILAC, not lime. Lime is the action colour and there is at most one
per screen; spending it on a whole background would leave the screen's
actual action with nothing to be. */
.specials:has(.sp-payoff) {
background: var(--lilac);
}
.specials *,
.specials *::before,
.specials *::after {
box-sizing: border-box;
}
.specials ::selection {
background: var(--lime);
color: var(--ink);
}
.specials :focus-visible {
outline: 3px solid var(--ink);
outline-offset: 3px;
border-radius: 4px;
}
/* ── layout ─────────────────────────────────────────────────────────────── */
.specials .sp-wrap {
max-width: 1080px;
margin: 0 auto;
padding: 0 22px 96px;
}
.specials .sp-wrap.narrow {
max-width: 620px;
}
/* Page chrome — deliberately NOT the site's