/* Roundup brand CSS
Tokens, the round-progress ring, the text lockup and a button.
Load Bricolage Grotesque first (@quiz/brand/fonts, or /static/brand/bricolage.css on the web).
The theme follows the system (prefers-color-scheme); data-theme="light" or "dark" on
overrides it. */
:root {
/* Palette */
--rr-ink: #1B2A4A;
--rr-ink-soft: #4A5670; /* secondary text on chalk, 7:1 */
--rr-amber: #F2A33A; /* rings, fills, highlights — not for small text on light */
--rr-amber-strong: #A15C07; /* amber for text/links on light backgrounds */
--rr-live: #FF6B57;
--rr-chalk: #F4EFE6;
--rr-white: #FFFFFF;
--rr-night: #111B31;
/* Roles (light theme) */
--rr-bg: var(--rr-chalk);
--rr-surface: var(--rr-white);
--rr-text: var(--rr-ink);
--rr-text-muted: var(--rr-ink-soft);
--rr-accent: var(--rr-amber);
--rr-accent-text: var(--rr-amber-strong);
--rr-ring-dim: rgb(27 42 74 / 0.18);
--rr-border: rgb(27 42 74 / 0.16);
--rr-focus: var(--rr-amber-strong);
/* Status (text-safe on chalk and white, 5.7:1 or better). Kept apart from --rr-live, the
coral "live" dot, so an error never looks like a live indicator. */
--rr-danger: #B42318;
--rr-danger-bg: #FDEDEB;
--rr-warn: #8A4B00;
--rr-warn-bg: #FDF1DC;
--rr-success: #1E6B3A;
--rr-success-bg: #E6F4EA;
/* Type */
--rr-font: 'Bricolage Grotesque Variable', 'Bricolage Grotesque', ui-rounded, 'Segoe UI', system-ui, sans-serif;
--rr-text-xs: 0.8125rem;
--rr-text-s: 0.9375rem;
--rr-text-m: 1.0625rem;
--rr-text-l: 1.3125rem;
--rr-text-xl: 1.6875rem;
--rr-text-2xl: 2.125rem;
--rr-text-3xl: 2.6875rem;
--rr-text-4xl: 3.375rem;
/* Space and shape */
--rr-space-1: 4px; --rr-space-2: 8px; --rr-space-3: 12px; --rr-space-4: 16px;
--rr-space-5: 24px; --rr-space-6: 32px; --rr-space-7: 48px; --rr-space-8: 64px;
--rr-radius-s: 8px;
--rr-radius-m: 14px;
--rr-radius-l: 24px;
--rr-radius-pill: 999px;
/* Motion */
--rr-ease: cubic-bezier(.2, .7, .2, 1);
--rr-dur: 450ms;
}
/* Dark theme: follows the system unless data-theme is set on */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--rr-bg: var(--rr-night);
--rr-surface: var(--rr-ink);
--rr-text: var(--rr-chalk);
--rr-text-muted: #B9C0CF;
--rr-accent-text: var(--rr-amber);
--rr-ring-dim: rgb(244 239 230 / 0.22);
--rr-border: rgb(244 239 230 / 0.16);
--rr-focus: var(--rr-amber);
--rr-danger: #FF8A7A;
--rr-danger-bg: rgb(255 138 122 / 0.14);
--rr-warn: var(--rr-amber);
--rr-warn-bg: rgb(242 163 58 / 0.14);
--rr-success: #6FCF97;
--rr-success-bg: rgb(111 207 151 / 0.14);
}
}
:root[data-theme="dark"] {
--rr-bg: var(--rr-night);
--rr-surface: var(--rr-ink);
--rr-text: var(--rr-chalk);
--rr-text-muted: #B9C0CF;
--rr-accent-text: var(--rr-amber);
--rr-ring-dim: rgb(244 239 230 / 0.22);
--rr-border: rgb(244 239 230 / 0.16);
--rr-focus: var(--rr-amber);
--rr-danger: #FF8A7A;
--rr-danger-bg: rgb(255 138 122 / 0.14);
--rr-warn: var(--rr-amber);
--rr-warn-bg: rgb(242 163 58 / 0.14);
--rr-success: #6FCF97;
--rr-success-bg: rgb(111 207 151 / 0.14);
}
/* ---------- Round-progress ring ----------
…
data-round: 0–4 rounds complete. data-live: shows the pulsing dot.
Size with --rr-ring-size (default 96px). */
.rr-ring {
--rr-ring-size: 96px;
position: relative;
display: inline-grid;
place-items: center;
width: var(--rr-ring-size);
aspect-ratio: 1;
color: var(--rr-text);
}
.rr-ring > svg {
grid-area: 1 / 1;
width: 100%;
height: 100%;
overflow: visible;
}
.rr-ring__seg {
fill: none;
stroke: var(--rr-ring-dim);
stroke-width: 18;
stroke-linecap: round;
transition: stroke var(--rr-dur) var(--rr-ease);
}
.rr-ring[data-round="1"] .rr-ring__seg:nth-of-type(-n+1),
.rr-ring[data-round="2"] .rr-ring__seg:nth-of-type(-n+2),
.rr-ring[data-round="3"] .rr-ring__seg:nth-of-type(-n+3),
.rr-ring[data-round="4"] .rr-ring__seg {
stroke: var(--rr-accent);
}
.rr-ring__dot {
fill: var(--rr-live);
opacity: 0;
transition: opacity 200ms linear;
}
.rr-ring[data-live] .rr-ring__dot {
opacity: 1;
animation: rr-pulse 1.6s ease-in-out infinite;
}
.rr-ring__label {
grid-area: 1 / 1;
font-family: var(--rr-font);
font-weight: 800;
font-size: calc(var(--rr-ring-size) * 0.36);
line-height: 1;
font-variant-numeric: tabular-nums;
}
@keyframes rr-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
/* ---------- Text lockup (real text, for headers and nav) ----------
[small .rr-ring] roundup
For exact artwork (print, stores, socials) use the SVG files instead. */
.rr-logo {
display: inline-flex;
align-items: center;
gap: 0.25em;
font-family: var(--rr-font);
font-size: var(--rr-text-2xl);
color: var(--rr-text);
text-decoration: none;
}
.rr-logo .rr-ring { --rr-ring-size: 1.35em; }
.rr-logo .rr-ring__label { font-size: 0.5em; }
.rr-logo__word {
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1;
}
/* ---------- Button ---------- */
.rr-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--rr-space-2);
min-height: 44px;
padding: 0 var(--rr-space-5);
border: 2px solid transparent;
border-radius: var(--rr-radius-m);
background: var(--rr-text);
color: var(--rr-bg);
font: 600 var(--rr-text-m) / 1 var(--rr-font);
cursor: pointer;
transition: transform 120ms var(--rr-ease);
}
.rr-button:active { transform: translateY(1px); }
.rr-button--quiet {
background: transparent;
color: var(--rr-text);
border-color: var(--rr-border);
}
/* ---------- Shared ---------- */
.rr-ring:focus-visible,
.rr-logo:focus-visible,
.rr-button:focus-visible {
outline: 3px solid var(--rr-focus);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.rr-ring__seg, .rr-ring__dot, .rr-button { transition: none; }
.rr-ring[data-live] .rr-ring__dot { animation: none; }
}