/* Hourroll — brand system v1, 14 August 2026.
Built from "Hourroll Brand System.dc.html" (Claude Design, project
02f8cb32-b076-431b-9c0d-3f891f5ea94f). The written spec, the marks, the font
sources and the measured contrast table live in ../../../brand/.
Three faces, self-hosted, latin + latin-ext, 130,420 B against a 163,840 B
ceiling. Newsreader's opsz axis is pinned at 28 — see brand/fonts/build-fonts.py
for why. wght stays variable because the dark-surface rule needs 600 on paper
and 650 on ink. */
@font-face {
font-family: 'Newsreader';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(/static/fonts/newsreader-var.1cd6caf0.woff2) format('woff2');
}
@font-face {
font-family: 'Newsreader';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url(/static/fonts/newsreader-italic.d8793b1d.woff2) format('woff2');
}
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(/static/fonts/jakarta-var.c7b1e3e0.woff2) format('woff2');
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/static/fonts/jetbrains-mono-500.615a7673.woff2) format('woff2');
}
:root {
/* light ground */
--paper: #FAF8F4;
--surface: #FFFFFF;
--ink: #221E33;
--muted: #57536B;
/* indigo — the brand, one job each */
--brand: #4338CA;
--brand-press: #372DA6;
--brand-soft: #EDEBFB;
--brand-lift: #A9A2F7; /* indigo for ink surfaces only */
/* amber is a signal, not a second brand colour: spent vs left, and errors */
--signal: #A34A06; /* light surfaces only */
--signal-bright: #F59E0B; /* ink surfaces only */
--signal-soft: #FFF3DF;
--signal-soft-line: #F0D9AE;
/* rules */
--line: #E7E3DA; /* divides */
--line-mid: #D8D2C6; /* section rules that carry weight */
--line-strong: #938B7A; /* the only border allowed on a form control */
--hairline: #F0EDE6; /* inside a data list */
/* ink ground */
--ink-raised: #2C2740;
--ink-line: #3B3552;
--ink-field-line: #6B6483;
--on-ink: #F6F4F0;
--on-ink-muted: #B4AEC4;
--r-control: 11px;
--r-card: 18px;
--r-tile: 13px;
/* Not in the brand package's radius set, which names three. It is already
drawn there — .chip and .tag are both 999px — but only on labels, never on
a control. Naming it makes the form's controls and the buttons pills. */
--r-pill: 999px;
--font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
--font-body: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
/* manipulation says none of these is a double-tap-to-zoom target, so a mobile
browser fires the click without first waiting to see whether a second tap is
coming. Pinch-zoom is a separate gesture and is untouched; summary is in the
list for the FAQ.
Honest about the size of the win: every page here already declares
20px because a pill's corner eats its own inset. */
.waitlist-form .field {
min-width: 0;
height: 52px; padding: 0 20px;
font-family: var(--font-body); font-size: 16px; color: var(--ink);
background: var(--surface);
border: 1px solid var(--line-strong); border-radius: var(--r-pill);
transition: border-color 160ms ease;
}
.waitlist-form .field::placeholder { color: var(--muted); opacity: 1; }
.waitlist-form .field:hover { border-color: var(--ink); }
.waitlist-form .field:focus-visible {
border-color: var(--brand); outline: 2px solid var(--brand); outline-offset: 2px;
border-radius: var(--r-pill);
}
@media (min-width: 768px) {
.waitlist-form .field { height: 56px; padding: 0 22px; }
}
/* The chevron is drawn per surface, never once. A single data: URI freezes its
hex, so the ink copy below is not a duplicate — it is the whole reason the
arrow is visible on both grounds. */
.waitlist-form select.field {
appearance: none; -webkit-appearance: none;
padding-right: 46px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2357536B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 18px center;
background-size: 18px 18px;
}
/* Nothing chosen yet reads as a prompt, not as an answer. Browsers without
:has() show it in the value colour, which is cosmetic and not a failure. */
.waitlist-form select.field:has(option[value=""]:checked) { color: var(--muted); }
/* error: four cues, one of which is colour. There is no red in this system. */
.waitlist-form.is-invalid input[type="email"] {
border: 2px solid var(--signal);
padding-right: 50px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A34A06' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v6M12 16.6v.2'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 18px center;
background-size: 20px 20px;
}
.form-note { font-size: 0.84375rem; color: var(--muted); margin-top: 12px; }
@media (min-width: 768px) { .form-note { font-size: 0.875rem; margin-top: 14px; } }
/* Success removes the form rather than disabling it, and the panel takes the
field's place so nothing below moves. That is where CLS 0 is won. */
.form-done, .form-error { display: none; margin-top: 26px; }
@media (min-width: 768px) { .form-done, .form-error { margin-top: 36px; } }
.form-done.is-shown, .form-error.is-shown { display: flex; }
/* --r-card, not the old 14px: against pill controls a 14px panel reads
under-rounded, and the card radius is already in the brand set. */
.form-done {
align-items: flex-start; gap: 14px; max-width: 520px;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
padding: 20px;
font-size: 1.03125rem; line-height: 1.5; color: var(--ink);
}
.form-done .tick {
width: 38px; height: 38px; flex: none; border-radius: 50%;
background: var(--brand-soft); color: var(--brand);
display: grid; place-items: center;
}
.form-error {
align-items: flex-start; gap: 9px; max-width: 520px;
background: var(--signal-soft); border: 1px solid var(--signal-soft-line);
border-radius: var(--r-card); padding: 13px 15px;
font-size: 0.96875rem; line-height: 1.5; color: var(--signal);
}
.form-error svg { flex: none; margin-top: 2px; }
/* ---------- the form assembles itself ---------- */
/* Ported from a React/framer-motion waitlist component: a staggered blur-in on
entry, and a blurred swap between the form and its confirmation. The idea
travels; the code does not. framer-motion + canvas-confetti + React is ~100 KB
gzipped against a 150 KB budget for the whole page, and this site has no
bundler and makes zero external requests. Eleven keyframes and two classes
buy the same motion for 1.4 KB.
Everything below animates opacity, filter and transform only — never a
property that reflows. That is deliberate: CLS on this page is 0 and an
entrance that moved layout would spend it.
The whole block is gated on no-preference rather than relying on the global
`animation: none !important` reset. That reset alone would leave the tick
holding its stroke-dashoffset and the check would never draw. */
@media (prefers-reduced-motion: no-preference) {
@keyframes rise {
from { opacity: 0; filter: blur(8px); transform: translateY(9px); }
to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes sink {
from { opacity: 1; filter: blur(0); transform: translateY(0); }
to { opacity: 0; filter: blur(7px); transform: translateY(-8px); }
}
@keyframes pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
/* The four visible controls are children 2, 4, 6 and 9: DOM order is label,
name, label, teaches, label, email, honeypot, hidden source, button. Same
order the grid's auto-placement already depends on — see the note above
.waitlist-form. Change the field order and both break together, which is
the point: they are one decision, not two. */
/* backwards, NOT both. `both` holds the last keyframe at animation-origin
priority, which outranks every normal declaration for the life of the page
— measured: it pinned the button at translateY(0) and .btn:hover's lift
never rendered again. `backwards` covers the delay, then lets go. */
.waitlist-form > :nth-child(2),
.waitlist-form > :nth-child(4),
.waitlist-form > :nth-child(6),
.waitlist-form > :nth-child(9),
.form-note {
animation: rise 600ms cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
}
.waitlist-form > :nth-child(2) { animation-delay: 40ms; }
.waitlist-form > :nth-child(4) { animation-delay: 110ms; }
.waitlist-form > :nth-child(6) { animation-delay: 180ms; }
.waitlist-form > :nth-child(9) { animation-delay: 250ms; }
.form-note { animation-delay: 330ms; }
/* The scroll-triggered variant that used to live here is gone with the CTA's
inline form. Nothing needs holding until it scrolls into view any more:
the only form on the page is inside a closed