/* TAIL — the stage kit: the landing's comic language for any page that opts in.
David, 2026-09-22, on /download/ and /token/: "the token page needs the comic treatment as well … it
weakens the brand and should build it the furthest." The landing wears the stage (site/stage.css); these
pages wore the app's plain ground. This is the portable half of that stage, page-neutral, so a page opts in
with one class and marks its own cards — nothing here knows any page's markup.
Canonical here in brand/tail; site/sync-assets.py copies it to site/assets/tail/stage-kit.css, where the
site's pages and /download/ (a separate project that serves the site's /assets) link it.
How a page uses it:
- : the blue stage, its glow and the dot texture, fixed behind the page, and the
header skinned for it.
- Everything on the stage reads the page tokens (--tail-ink, --tail-muted, --tail-line …) as white-on-blue,
because .stage-page redefines them. A block with its own pale surface says so with .st-card, which puts the
theme's own values back. One token keeps one meaning per surface: the white-cage bug (stage.css header) was
one token meaning two things on the same ground.
- .st-sticker (a die-cut word), .st-button (the white hard-shadow button), .st-chip (a sticker label),
.st-spark (a sparkle) are the stage's objects.
Light and dark are two identities (DESIGN.md, 2026-09-21): light is the electric blue stage with white objects;
dark is night, a deep navy with the blue surviving in the glow. Dark keeps light's hierarchy by keeping its
contrast relationships, not its hexes: the accents are toned down on the night ground so the sticker stays the
loudest object (website's measurement on the landing: untuned, every accent tripled on night and crowded).
Values are the landing's (site/stage.css :root), so the stage is the same stage. */
:root {
--st-blue: #1557ff;
--st-glow: #4a86ff;
--st-deep: #0a36b8;
--st-ink: #0b2a8f; /* the hard shadow under every sticker — never a theme token */
--st-navy: #123269; /* ink on a white object */
--st-dot: rgba(255, 255, 255, .13);
--st-nav: rgba(21, 87, 255, .94);
--st-accent: .95; /* how loud a sparkle or chip dot is on this ground */
/* The theme's own card values, captured at the root so .st-card can put them back under a page that has
redefined --tail-* for the stage. A custom property's var() resolves where it is declared: here, the theme. */
--st-card-ink: var(--tail-ink);
--st-card-muted: var(--tail-muted);
--st-card-line: var(--tail-line);
--st-card-surface: var(--tail-surface);
--st-card-paper: var(--tail-paper);
--st-card-card: var(--tail-card);
--st-card-blue-light: var(--tail-blue-light);
--st-card-blue-text: var(--tail-blue-text);
}
:root[data-theme="dark"] {
--st-blue: #0a1a46; --st-glow: #16357f; --st-deep: #05102c;
--st-ink: #030b22; --st-navy: #123269; --st-dot: rgba(255, 255, 255, .10);
--st-nav: rgba(10, 26, 70, .94); --st-accent: .6;
}
@media (prefers-color-scheme: dark) {
:root[data-theme="auto"] {
--st-blue: #0a1a46; --st-glow: #16357f; --st-deep: #05102c;
--st-ink: #030b22; --st-navy: #123269; --st-dot: rgba(255, 255, 255, .10);
--st-nav: rgba(10, 26, 70, .94); --st-accent: .6;
}
}
/* ── The ground ─────────────────────────────────────────────────────────── */
body.stage-page {
background:
radial-gradient(900px 700px at 88% 8%, var(--st-glow) 0%, transparent 70%),
radial-gradient(900px 700px at 0% 110%, var(--st-deep) 0%, transparent 70%),
var(--st-blue);
background-attachment: fixed;
/* On the stage, the page's ink is white. Pages style with these tokens already, so they follow. */
--tail-ink: #ffffff;
--tail-muted: rgba(255, 255, 255, .92); /* .86 measured ~4.6:1 on the blue and under AA on the glow; the landing raised its own to .9+ */
--tail-line: rgba(255, 255, 255, .24);
--tail-surface: rgba(255, 255, 255, .1);
--tail-blue-light: rgba(255, 255, 255, .14);
--tail-blue-text: #ffffff;
--tail-blue: #ffffff;
/* The theme's wordmark token is resolved at :root as the stage's own blue in light — blue on blue. */
--tail-wordmark: #ffffff;
color: #fff;
}
body.stage-page::before {
content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
background: radial-gradient(var(--st-dot) 1.3px, transparent 1.8px) 0 0 / 24px 24px;
}
/* The texture sits behind; the page's own children are lifted above it. A toast portal keeps its own stack. */
body.stage-page > *:not(tail-toasts, dialog) { position: relative; z-index: 1; }
/* A pale object on the stage: the theme's own values come back inside it. */
.stage-page .st-card {
--tail-ink: var(--st-card-ink);
--tail-muted: var(--st-card-muted);
--tail-line: var(--st-card-line);
--tail-surface: var(--st-card-surface);
--tail-blue-light: var(--st-card-blue-light);
--tail-blue-text: var(--st-card-blue-text);
--tail-blue: #1557ff;
color: var(--st-card-ink);
}
/* Dialogs (search) are the app's surface, whatever page opened them. */
.stage-page dialog { --tail-ink: var(--st-card-ink); --tail-muted: var(--st-card-muted); --tail-line: var(--st-card-line); --tail-surface: var(--st-card-surface); --tail-blue: #1557ff; --tail-blue-text: var(--st-card-blue-text); --tail-blue-light: var(--st-card-blue-light); }
/* ── The header on the stage (the shell's own hooks; see stage.css) ─────── */
body.stage-page .tail-shell {
background: var(--st-nav); color: #fff;
border-bottom: 1px solid rgba(255, 255, 255, .18);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
--tail-wordmark: #ffffff;
--tail-blue-fill: var(--st-ink);
}
body.stage-page .tail-shell a { color: inherit; }
body.stage-page .tail-shell .tail-shell-search { background: rgba(11, 42, 143, .42); color: #fff; border-color: rgba(255, 255, 255, .34); }
body.stage-page .tail-shell .tail-shell-search kbd { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .28); }
body.stage-page .tail-shell .tail-theme { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .3); }
body.stage-page .tail-shell .tail-logo img { box-sizing: content-box; padding: 7px 6px; background: #fff; border-radius: 11px; box-shadow: 0 3px 0 var(--st-ink); }
body.stage-page .tail-global-nav a[aria-current="page"] { background: rgba(255, 255, 255, .92); color: var(--st-blue); }
/* ── The stage's objects ────────────────────────────────────────────────── */
/* A word as a die-cut sticker: the landing's "Tail." */
/* Scoped under body.stage-page (0-2-1) so a page's own rule for the same element — `.dl-hero h1 em { color:
var(--tail-blue) }` is 0-1-2 — can't repaint the kit's object. Measured: without it the sticker word rendered white
on white in light. */
body.stage-page .st-sticker {
display: inline-block; font-style: normal;
padding: 0 .22em .06em; border-radius: .24em;
background: #fff; color: var(--st-blue);
rotate: -3deg; transform-origin: left center; white-space: nowrap;
box-shadow: 0 .11em 0 var(--st-ink);
}
:root[data-theme="dark"] body.stage-page .st-sticker { color: #0a1a46; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] body.stage-page .st-sticker { color: #0a1a46; } }
/* The white button with the hard shadow. */
body.stage-page .st-button {
display: inline-flex; align-items: center; justify-content: space-between; gap: 28px;
min-height: 54px; padding: 0 22px; border: 0; border-radius: 14px;
background: #fff; color: var(--st-blue) !important;
font: 700 15px/1 var(--tail-font); letter-spacing: -.2px; text-decoration: none;
box-shadow: 0 6px 0 var(--st-ink);
transition: transform .14s var(--tail-ease, ease), box-shadow .14s var(--tail-ease, ease);
}
body.stage-page .st-button:hover { transform: translateY(2px); box-shadow: 0 4px 0 var(--st-ink); translate: none; }
body.stage-page .st-button:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--st-ink); }
body.stage-page .st-button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
:root[data-theme="dark"] body.stage-page .st-button { color: #0a1a46 !important; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] body.stage-page .st-button { color: #0a1a46 !important; } }
/* A sticker label: "gm", "coming soon". Cool dots only — warm colours mean PnL. */
body.stage-page .st-chip {
display: inline-flex; align-items: center; gap: 7px;
padding: 6px 11px; border-radius: 999px;
background: #fff; color: var(--st-navy);
font: 700 12px/1 var(--tail-font); letter-spacing: -.1px; white-space: nowrap;
box-shadow: 0 3px 0 var(--st-ink);
}
.st-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #1557ff; opacity: var(--st-accent); }
.st-chip.is-tilt { rotate: -4deg; }
.st-chip.is-tilt-right { rotate: 5deg; }
/* A sparkle, quieter at night so it never outshouts the sticker. */
.st-spark { color: #fff; opacity: var(--st-accent); line-height: 1; }
/* A card that is one object on the stage: a white surface with the hard shadow. */
.st-card.st-lifted { box-shadow: 0 8px 0 var(--st-ink); border-color: transparent; }
/* Family art with a night drawing: ![]()
+ ![]()
, the theme picks one. */
.st-art-dark { display: none; }
:root[data-theme="dark"] .st-art-light { display: none; }
:root[data-theme="dark"] .st-art-dark { display: block; }
@media (prefers-color-scheme: dark) {
:root[data-theme="auto"] .st-art-light { display: none; }
:root[data-theme="auto"] .st-art-dark { display: block; }
}