/* ============================================================================
Routetrip — Shared Design-System Stylesheet (theme.css)
Version 1.0 · Implements docs/design-system.md
Warm Scandinavian travel-magazine minimalism. Two themes:
[data-theme="parent"] (default) and [data-theme="kids"].
Components consume --rt-* tokens only — never raw hex.
---------------------------------------------------------------------------
FONTS — add these EXACT tags to every page's , BEFORE this stylesheet.
We do NOT @import Google Fonts here (keeps CSP + parsing clean; self-host
on the Worker later). Copy verbatim:
(Preload hints for above-the-fold text, optional but recommended:)
============================================================================ */
/* ==========================================================================
1. DESIGN TOKENS
========================================================================== */
/* 1.1 Font family tokens (theme-independent) */
:root {
--rt-font-display: "Fraunces", "Playfair Display", Georgia, serif;
--rt-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--rt-font-kids: "Baloo 2", "Comic Sans MS", system-ui, sans-serif;
--rt-font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
/* 1.2 Type scale (base 16px, ~1.25 modular) */
--rt-fs-xs: 0.75rem; /* 12 — labels, meta */
--rt-fs-sm: 0.875rem; /* 14 — captions, helper text */
--rt-fs-base: 1rem; /* 16 — body (never smaller for body) */
--rt-fs-md: 1.125rem; /* 18 — lead paragraph, list rows */
--rt-fs-lg: 1.375rem; /* 22 — card titles */
--rt-fs-xl: 1.75rem; /* 28 — section headings */
--rt-fs-2xl: 2.25rem; /* 36 — page titles */
--rt-fs-3xl: 3rem; /* 48 — hero / landing */
--rt-lh-tight: 1.1; /* display */
--rt-lh-snug: 1.3; /* headings */
--rt-lh-body: 1.6; /* running text */
--rt-fw-regular: 400;
--rt-fw-medium: 500;
--rt-fw-semibold: 600;
--rt-fw-bold: 700;
--rt-tracking-tight: -0.01em; /* display */
--rt-tracking-normal: 0;
--rt-tracking-wide: 0.04em; /* small-caps labels */
/* 1.3 Spacing (8px base grid, 4px half-steps) */
--rt-space-0: 0;
--rt-space-1: 0.25rem; /* 4 */
--rt-space-2: 0.5rem; /* 8 */
--rt-space-3: 0.75rem; /* 12 */
--rt-space-4: 1rem; /* 16 */
--rt-space-5: 1.5rem; /* 24 */
--rt-space-6: 2rem; /* 32 */
--rt-space-7: 3rem; /* 48 */
--rt-space-8: 4rem; /* 64 */
--rt-space-9: 6rem; /* 96 */
--rt-container: 72rem; /* 1152 max content width */
--rt-container-narrow: 44rem; /* 704 — reading column, wizard */
--rt-gutter: var(--rt-space-5);
/* 1.4 Radius */
--rt-radius-sm: 6px;
--rt-radius-md: 12px;
--rt-radius-lg: 18px;
--rt-radius-xl: 28px;
--rt-radius-pill: 999px;
/* 1.5 Shadow (soft, warm, low-spread — tinted with warm ink) */
--rt-shadow-xs: 0 1px 2px rgba(33, 30, 26, 0.06);
--rt-shadow-sm: 0 2px 6px rgba(33, 30, 26, 0.08);
--rt-shadow-md: 0 8px 20px rgba(33, 30, 26, 0.10);
--rt-shadow-lg: 0 18px 40px rgba(33, 30, 26, 0.14);
--rt-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--rt-focus-ring) 35%, transparent);
/* 1.6 Borders */
--rt-border-w: 1px;
--rt-border-w-2: 2px;
--rt-border-color: var(--rt-border);
--rt-hairline: var(--rt-border-w) solid var(--rt-border);
--rt-hairline-strong: var(--rt-border-w) solid var(--rt-border-strong);
/* 1.7 Motion */
--rt-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
--rt-dur-fast: 120ms;
--rt-dur: 200ms;
--rt-dur-slow: 360ms;
/* 1.8 Touch baseline (parent) — kids overrides to 64px below */
--rt-touch: 48px;
}
/* 1.9 Parent / adult theme color tokens (default) */
:root,
[data-theme="parent"] {
/* Base surfaces */
--rt-bg: #F6F3EC; /* warm paper */
--rt-surface: #FFFFFF; /* cards, sheets */
--rt-surface-2: #EFEADF; /* insets, subtle fills, table stripes */
--rt-surface-sunk: #E7E1D3; /* wells, pressed states */
/* Ink / text */
--rt-text: #211E1A; /* near-black warm ink */
--rt-text-muted: #6B655B; /* secondary text, captions */
--rt-text-faint: #9B9488; /* placeholders, disabled labels */
--rt-text-on-primary:#FFFFFF;
/* Brand */
--rt-primary: #C6462E; /* warm signal red — the one hero color */
--rt-primary-600: #A83A25; /* hover / pressed */
--rt-primary-50: #F7E4DE; /* tint bg for selected/soft chips */
--rt-accent: #1F6F5C; /* deep travel green — links, secondary CTAs */
--rt-accent-50: #E1EEEA;
/* Semantic */
--rt-success: #2E7D53;
--rt-success-50: #E2EFE7;
--rt-warning: #B9782A; /* muted ochre, not amber glow */
--rt-warning-50: #F5E9D6;
--rt-danger: #B42318;
--rt-danger-50: #F6E0DD;
--rt-info: #2A5C8A;
--rt-info-50: #E1EAF2;
/* Semantic role tokens (components reference these, not raw brand) */
--rt-border: #DED8CC;
--rt-border-strong: #C7C0B2;
--rt-focus-ring: #1F6F5C;
--rt-link: #1F6F5C;
--rt-link-hover: #16513F;
--rt-overlay: rgba(33, 30, 26, 0.45); /* modal scrim */
--rt-selection: #F7E4DE;
}
/* 1.10 Kids theme overrides — same token NAMES, new values + bigger metrics */
[data-theme="kids"] {
/* Base surfaces */
--rt-bg: #FFF8EE; /* sunny cream */
--rt-surface: #FFFFFF;
--rt-surface-2: #FFEFD6; /* soft sand */
--rt-surface-sunk: #FCE3BE;
/* Ink / text — max contrast for pre-readers */
--rt-text: #1B1B1F;
--rt-text-muted: #4B4A52;
--rt-text-faint: #7C7A85;
--rt-text-on-primary:#FFFFFF;
/* Kid brand: fox-orange primary + sky-blue accent */
--rt-primary: #F5622D; /* Ræv (fox) orange */
--rt-primary-600: #DB4E1E;
--rt-primary-50: #FFE4D6;
--rt-accent: #2E8BD6; /* Ugle (owl) sky blue */
--rt-accent-50: #DCEEFB;
/* Playful extras used for rewards/badges */
--rt-joy-yellow: #FFC531; /* stars, coins */
--rt-joy-pink: #FF5FA2; /* confetti, hearts */
--rt-joy-green: #34B36A; /* checkmarks, success */
/* Semantic */
--rt-success: #2FA35C;
--rt-success-50: #DDF3E6;
--rt-warning: #E08A17;
--rt-warning-50: #FCEBCF;
--rt-danger: #E23B2E; /* used sparingly */
--rt-danger-50: #FBDDDB;
--rt-info: #2E8BD6;
--rt-info-50: #DCEEFB;
/* Role tokens */
--rt-border: #F0DCC0;
--rt-border-strong: #E4C79C;
--rt-focus-ring: #2E8BD6;
--rt-link: #2E8BD6;
--rt-link-hover: #1F6FB0;
--rt-overlay: rgba(27, 27, 31, 0.40);
--rt-selection: #FFE4D6;
/* Bigger everything */
--rt-touch: 64px; /* min touch target in kids mode */
--rt-fs-base: 1.125rem; /* 18 body floor */
--rt-fs-md: 1.375rem;
--rt-fs-lg: 1.75rem;
--rt-fs-xl: 2.25rem;
--rt-radius-md: 18px;
--rt-radius-lg: 24px;
--rt-radius-xl: 32px;
/* Kid headings use the rounded face */
--rt-font-display: var(--rt-font-kids);
}
/* ==========================================================================
2. BASE / RESET
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
margin: 0;
min-height: 100dvh;
font: var(--rt-fw-regular) var(--rt-fs-base) / var(--rt-lh-body) var(--rt-font-sans);
color: var(--rt-text);
background: var(--rt-bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
/* Immediate on-brand tap feedback replaces the native gray highlight */
-webkit-tap-highlight-color: transparent;
}
::selection { background: var(--rt-selection); }
h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--rt-space-3); color: var(--rt-text); }
h1 { font: var(--rt-fw-medium) var(--rt-fs-2xl) / var(--rt-lh-snug) var(--rt-font-display); letter-spacing: var(--rt-tracking-tight); }
h2 { font: var(--rt-fw-medium) var(--rt-fs-xl) / var(--rt-lh-snug) var(--rt-font-display); }
h3 { font: var(--rt-fw-semibold) var(--rt-fs-lg) / var(--rt-lh-snug) var(--rt-font-sans); }
h4 { font: var(--rt-fw-semibold) var(--rt-fs-md) / var(--rt-lh-snug) var(--rt-font-sans); }
h5, h6 { font: var(--rt-fw-semibold) var(--rt-fs-base) / var(--rt-lh-snug) var(--rt-font-sans); }
/* Kids: rounded headline face */
[data-theme="kids"] h1,
[data-theme="kids"] h2 { font-family: var(--rt-font-kids); }
p { margin: 0 0 var(--rt-space-4); }
a { color: var(--rt-link); text-decoration: underline; text-underline-offset: 0.15em; transition: color var(--rt-dur) var(--rt-ease); }
a:hover { color: var(--rt-link-hover); }
img, svg, video, canvas, picture { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
hr { border: none; border-top: var(--rt-hairline); margin: var(--rt-space-5) 0; }
code, kbd, samp, pre { font-family: var(--rt-font-mono); font-size: 0.95em; }
/* Utility layout helpers */
.rt-container { width: 100%; max-width: var(--rt-container); margin-inline: auto; padding-inline: var(--rt-gutter); }
.rt-container-narrow { width: 100%; max-width: var(--rt-container-narrow); margin-inline: auto; padding-inline: var(--rt-gutter); }
.rt-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Focus is always visible and touch-safe; never remove without replacement */
:focus-visible { outline: none; box-shadow: var(--rt-shadow-focus); border-radius: var(--rt-radius-sm); }
/* Reduced-motion: honor the OS preference everywhere */
@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;
}
}
/* Coarse pointers: never hide actions behind hover */
@media (pointer: coarse) {
.rt-row__actions { opacity: 1; }
}
/* ==========================================================================
3. COMPONENTS
========================================================================== */
/* 3.1 Buttons — .rt-btn (+ --primary / --secondary / --ghost / --danger) */
.rt-btn {
--_bg: var(--rt-surface-2);
--_fg: var(--rt-text);
display: inline-flex; align-items: center; justify-content: center;
gap: var(--rt-space-2);
min-height: var(--rt-touch, 48px);
padding: 0 var(--rt-space-5);
font: var(--rt-fw-semibold) var(--rt-fs-base) / 1 var(--rt-font-sans);
color: var(--_fg);
background: var(--_bg);
border: none;
border-radius: var(--rt-radius-md);
cursor: pointer;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: transform var(--rt-dur-fast) var(--rt-ease),
background var(--rt-dur) var(--rt-ease),
box-shadow var(--rt-dur) var(--rt-ease);
box-shadow: var(--rt-shadow-xs);
}
.rt-btn:active { transform: translateY(1px); box-shadow: none; }
.rt-btn:focus-visible { outline: none; box-shadow: var(--rt-shadow-focus); }
.rt-btn:disabled, .rt-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
/* Primary: the one hero color */
.rt-btn--primary { --_bg: var(--rt-primary); --_fg: var(--rt-text-on-primary); }
.rt-btn--primary:hover { background: var(--rt-primary-600); }
/* Secondary: outline on paper */
.rt-btn--secondary {
--_bg: transparent; --_fg: var(--rt-text);
border: var(--rt-border-w-2) solid var(--rt-border-strong);
box-shadow: none;
}
.rt-btn--secondary:hover { background: var(--rt-surface-2); }
/* Ghost / tertiary */
.rt-btn--ghost { --_bg: transparent; --_fg: var(--rt-link); box-shadow: none; }
.rt-btn--ghost:hover { background: var(--rt-accent-50); }
/* Destructive */
.rt-btn--danger { --_bg: var(--rt-danger); --_fg: var(--rt-text-on-primary); }
.rt-btn--danger:hover { background: color-mix(in srgb, var(--rt-danger) 85%, black); }
/* Sizes */
.rt-btn--lg { min-height: 56px; font-size: var(--rt-fs-md); padding-inline: var(--rt-space-6); }
.rt-btn--block { display: flex; width: 100%; }
/* Icon-only button: keep a full touch-size padded hit box even with a 24px glyph */
.rt-btn--icon { min-width: var(--rt-touch, 48px); padding-inline: 0; }
/* 3.2 Card — .rt-card */
.rt-card {
background: var(--rt-surface);
border: var(--rt-hairline);
border-radius: var(--rt-radius-lg);
box-shadow: var(--rt-shadow-sm);
overflow: clip;
}
.rt-card__media { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; }
.rt-card__body { padding: var(--rt-space-5); display: grid; gap: var(--rt-space-2); }
.rt-card__eyebrow {
font: var(--rt-fw-semibold) var(--rt-fs-xs) / 1 var(--rt-font-sans);
letter-spacing: var(--rt-tracking-wide); text-transform: uppercase;
color: var(--rt-primary);
}
.rt-card__title { font: var(--rt-fw-semibold) var(--rt-fs-lg) / var(--rt-lh-snug) var(--rt-font-sans); color: var(--rt-text); }
.rt-card__text { color: var(--rt-text-muted); font-size: var(--rt-fs-base); line-height: var(--rt-lh-body); }
.rt-card--interactive {
cursor: pointer;
transition: transform var(--rt-dur) var(--rt-ease), box-shadow var(--rt-dur) var(--rt-ease);
}
.rt-card--interactive:hover { transform: translateY(-2px); box-shadow: var(--rt-shadow-md); }
/* Kids headline face inside cards */
[data-theme="kids"] .rt-card__title { font-family: var(--rt-font-kids); }
/* 3.3 Inputs — .rt-field (label+control), .rt-input, .rt-select, .rt-textarea */
.rt-field { display: grid; gap: var(--rt-space-2); }
.rt-label { font: var(--rt-fw-semibold) var(--rt-fs-sm) / 1.2 var(--rt-font-sans); color: var(--rt-text); }
.rt-input, .rt-select, .rt-textarea {
width: 100%;
min-height: var(--rt-touch, 48px);
padding: var(--rt-space-3) var(--rt-space-4);
/* font-size >= 16px prevents iOS auto-zoom on focus */
font: var(--rt-fw-regular) var(--rt-fs-md) / 1.4 var(--rt-font-sans);
color: var(--rt-text);
background: var(--rt-surface);
border: var(--rt-border-w) solid var(--rt-border-strong);
border-radius: var(--rt-radius-md);
transition: border-color var(--rt-dur) var(--rt-ease), box-shadow var(--rt-dur) var(--rt-ease);
}
.rt-textarea { min-height: calc(var(--rt-touch, 48px) * 2); resize: vertical; }
.rt-input::placeholder, .rt-textarea::placeholder { color: var(--rt-text-faint); }
.rt-input:focus-visible,
.rt-select:focus-visible,
.rt-textarea:focus-visible {
outline: none;
border-color: var(--rt-focus-ring);
box-shadow: var(--rt-shadow-focus);
}
.rt-input:disabled, .rt-select:disabled, .rt-textarea:disabled { opacity: 0.6; cursor: not-allowed; }
.rt-input[aria-invalid="true"],
.rt-select[aria-invalid="true"],
.rt-textarea[aria-invalid="true"] { border-color: var(--rt-danger); }
.rt-help { font-size: var(--rt-fs-sm); color: var(--rt-text-muted); }
.rt-error { font-size: var(--rt-fs-sm); color: var(--rt-danger); }
/* 3.4 Top app bar — .rt-topbar (spec: .rt-appbar; both supported) */
.rt-topbar, .rt-appbar {
display: flex; align-items: center; gap: var(--rt-space-5);
min-height: 64px; padding-inline: var(--rt-gutter);
padding-top: env(safe-area-inset-top);
background: color-mix(in srgb, var(--rt-bg) 90%, transparent);
border-bottom: var(--rt-hairline);
position: sticky; top: 0; z-index: 20;
backdrop-filter: saturate(1.1); /* subtle, NOT frosted-glass blur */
}
.rt-wordmark {
font: var(--rt-fw-medium) var(--rt-fs-lg) / 1 var(--rt-font-display);
letter-spacing: var(--rt-tracking-tight);
text-decoration: none; color: var(--rt-text);
}
.rt-topbar__spacer, .rt-appbar__spacer { flex: 1; }
/* 3.5 Bottom tab bar — .rt-tabbar (safe-area aware, thumb-reachable) */
.rt-tabbar {
position: fixed; inset-inline: 0; bottom: 0; z-index: 30;
display: flex; justify-content: space-around;
background: var(--rt-surface);
border-top: var(--rt-hairline);
padding-bottom: env(safe-area-inset-bottom);
}
.rt-tab {
flex: 1; min-height: max(56px, var(--rt-touch, 48px));
display: grid; place-items: center; gap: 2px;
font-size: var(--rt-fs-xs); color: var(--rt-text-muted);
background: none; border: none; cursor: pointer;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
.rt-tab[aria-current="page"] { color: var(--rt-primary); font-weight: var(--rt-fw-semibold); }
.rt-tab:focus-visible { outline: none; box-shadow: inset var(--rt-shadow-focus); }
.rt-tab__icon { width: 26px; height: 26px; }
.rt-tab__label { line-height: 1; }
/* Kids mode: bigger tabs, always icon + word */
[data-theme="kids"] .rt-tab { min-height: var(--rt-touch, 64px); font-size: var(--rt-fs-sm); }
[data-theme="kids"] .rt-tab__icon { width: 32px; height: 32px; }
/* 3.6 Progress bar — .rt-progress */
.rt-progress { display: grid; gap: var(--rt-space-2); }
.rt-progress__track {
height: 8px; border-radius: var(--rt-radius-pill);
background: var(--rt-surface-sunk); overflow: hidden;
}
.rt-progress__fill {
height: 100%; width: var(--_p, 0%);
background: var(--rt-accent);
border-radius: inherit;
transition: width var(--rt-dur-slow) var(--rt-ease);
}
.rt-progress__label { font-size: var(--rt-fs-sm); color: var(--rt-text-muted); }
[data-theme="kids"] .rt-progress__track { height: 14px; }
/* 3.7 Stepper (numbered wizard steps) — .rt-stepper (spec: .rt-steps; both supported) */
.rt-stepper, .rt-steps { display: flex; gap: var(--rt-space-2); flex-wrap: wrap; }
.rt-step { display: inline-flex; align-items: center; gap: var(--rt-space-2); }
.rt-step__dot {
width: 28px; height: 28px; border-radius: var(--rt-radius-pill);
display: grid; place-items: center;
font-size: var(--rt-fs-sm); font-weight: var(--rt-fw-semibold);
background: var(--rt-surface-2); color: var(--rt-text-muted);
border: var(--rt-border-w-2) solid var(--rt-border);
transition: background var(--rt-dur) var(--rt-ease), border-color var(--rt-dur) var(--rt-ease);
}
.rt-step__label { font-size: var(--rt-fs-sm); color: var(--rt-text-muted); }
.rt-step--done .rt-step__dot { background: var(--rt-success); color: #fff; border-color: var(--rt-success); }
.rt-step--done .rt-step__label { color: var(--rt-text); }
.rt-step--active .rt-step__dot { background: var(--rt-primary); color: #fff; border-color: var(--rt-primary); }
.rt-step--active .rt-step__label { color: var(--rt-text); font-weight: var(--rt-fw-semibold); }
/* 3.8 Toggle / switch — .rt-toggle (spec: .rt-switch; both supported) */
.rt-toggle, .rt-switch { position: relative; display: inline-flex; align-items: center; min-height: var(--rt-touch, 48px); }
.rt-toggle input, .rt-switch input {
position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.rt-toggle__track, .rt-switch__track {
width: 52px; height: 30px; border-radius: var(--rt-radius-pill);
background: var(--rt-surface-sunk);
transition: background var(--rt-dur) var(--rt-ease);
}
.rt-toggle__thumb, .rt-switch__thumb {
position: absolute; top: 50%; left: 3px; margin-top: -12px;
width: 24px; height: 24px; border-radius: 50%;
background: #fff; box-shadow: var(--rt-shadow-sm);
transition: transform var(--rt-dur) var(--rt-ease);
}
.rt-toggle input:checked ~ .rt-toggle__track,
.rt-switch input:checked ~ .rt-switch__track { background: var(--rt-accent); }
.rt-toggle input:checked ~ .rt-toggle__thumb,
.rt-switch input:checked ~ .rt-switch__thumb { transform: translateX(22px); }
.rt-toggle input:focus-visible ~ .rt-toggle__track,
.rt-switch input:focus-visible ~ .rt-switch__track { box-shadow: var(--rt-shadow-focus); }
.rt-toggle__label, .rt-switch__label { font-size: var(--rt-fs-sm); color: var(--rt-text-muted); }
/* 3.9 List rows — .rt-list-row (spec: .rt-row; both supported) + .rt-list container */
.rt-list {
display: grid;
background: var(--rt-surface);
border: var(--rt-hairline);
border-radius: var(--rt-radius-lg);
overflow: clip;
}
.rt-list-row, .rt-row {
display: flex; align-items: center; gap: var(--rt-space-4);
min-height: max(64px, var(--rt-touch, 48px));
padding: var(--rt-space-3) var(--rt-space-4);
border-bottom: var(--rt-hairline);
text-align: left; background: none; width: 100%;
color: var(--rt-text); text-decoration: none;
cursor: pointer;
transition: background var(--rt-dur) var(--rt-ease);
}
.rt-list-row:last-child, .rt-row:last-child { border-bottom: none; }
.rt-list-row:hover, .rt-row:hover { background: var(--rt-surface-2); }
.rt-list-row:focus-visible, .rt-row:focus-visible { outline: none; box-shadow: inset var(--rt-shadow-focus); }
.rt-row__lead {
flex: none; width: 44px; height: 44px;
border-radius: var(--rt-radius-md);
background: var(--rt-surface-2);
display: grid; place-items: center;
}
.rt-row__main { flex: 1; display: grid; gap: 2px; }
.rt-row__title { font-weight: var(--rt-fw-semibold); color: var(--rt-text); }
.rt-row__sub { font-size: var(--rt-fs-sm); color: var(--rt-text-muted); }
.rt-row__trail { flex: none; color: var(--rt-text-faint); }
/* Row actions: hidden-on-hover for fine pointers, always shown on coarse (see base) */
.rt-row__actions { display: inline-flex; gap: var(--rt-space-2); opacity: 0; transition: opacity var(--rt-dur) var(--rt-ease); }
.rt-row:hover .rt-row__actions, .rt-list-row:hover .rt-row__actions,
.rt-row:focus-within .rt-row__actions, .rt-list-row:focus-within .rt-row__actions { opacity: 1; }
/* 3.10 Modal + bottom sheet — .rt-modal, .rt-sheet, .rt-modal-scrim */
.rt-modal-scrim {
position: fixed; inset: 0; z-index: 50;
background: var(--rt-overlay);
display: grid; place-items: end center; /* bottom sheet on mobile */
animation: rt-fade-in var(--rt-dur) var(--rt-ease);
}
@media (min-width: 48rem) { .rt-modal-scrim { place-items: center; } }
.rt-modal, .rt-sheet {
width: min(100%, 34rem);
max-height: 90dvh; overflow: auto;
background: var(--rt-surface);
border-radius: var(--rt-radius-xl) var(--rt-radius-xl) 0 0;
padding: var(--rt-space-6);
padding-bottom: calc(var(--rt-space-6) + env(safe-area-inset-bottom));
box-shadow: var(--rt-shadow-lg);
animation: rt-sheet-in var(--rt-dur-slow) var(--rt-ease);
}
/* .rt-sheet stays a bottom sheet at all widths; .rt-modal centers + fully rounds on wider screens */
@media (min-width: 48rem) {
.rt-modal { width: min(100%, 34rem); border-radius: var(--rt-radius-xl); }
}
.rt-sheet { width: 100%; }
.rt-sheet__grabber {
width: 40px; height: 4px; border-radius: var(--rt-radius-pill);
background: var(--rt-border-strong);
margin: 0 auto var(--rt-space-4);
}
.rt-modal__title, .rt-sheet__title {
font: var(--rt-fw-medium) var(--rt-fs-xl) / var(--rt-lh-snug) var(--rt-font-display);
margin-bottom: var(--rt-space-3);
}
.rt-modal__body, .rt-sheet__body { color: var(--rt-text-muted); }
.rt-modal__actions, .rt-sheet__actions {
display: flex; gap: var(--rt-space-3); justify-content: flex-end;
margin-top: var(--rt-space-6); flex-wrap: wrap;
}
@keyframes rt-sheet-in { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rt-fade-in { from { opacity: 0; } to { opacity: 1; } }
/* 3.11 Badge / status chip — .rt-badge */
.rt-badge {
display: inline-flex; align-items: center; gap: var(--rt-space-1);
padding: 0.15em var(--rt-space-3);
min-height: 24px;
font: var(--rt-fw-semibold) var(--rt-fs-xs) / 1 var(--rt-font-sans);
letter-spacing: var(--rt-tracking-wide); text-transform: uppercase;
color: var(--rt-text);
background: var(--rt-surface-2);
border-radius: var(--rt-radius-pill);
}
.rt-badge--primary { color: var(--rt-primary); background: var(--rt-primary-50); }
.rt-badge--accent { color: var(--rt-accent); background: var(--rt-accent-50); }
.rt-badge--success { color: var(--rt-success); background: var(--rt-success-50); }
.rt-badge--warning { color: var(--rt-warning); background: var(--rt-warning-50); }
.rt-badge--danger { color: var(--rt-danger); background: var(--rt-danger-50); }
.rt-badge--info { color: var(--rt-info); background: var(--rt-info-50); }
/* 3.12 Mascot avatar — .rt-mascot */
.rt-mascot {
width: 56px; height: 56px; flex: none;
border-radius: 50%;
display: grid; place-items: center; overflow: clip;
background: var(--rt-surface-2);
}
.rt-mascot > svg, .rt-mascot > img { width: 100%; height: 100%; object-fit: contain; }
.rt-mascot--lg { width: 96px; height: 96px; }
.rt-mascot--sm { width: 40px; height: 40px; }
/* Mascot-owned theming: apply on a scope to tint primary to a buddy color */
.rt-mascot--fox { --rt-primary: #F5622D; --rt-primary-600: #DB4E1E; --rt-primary-50: #FFE4D6; }
.rt-mascot--owl { --rt-primary: #2E8BD6; --rt-primary-600: #1F6FB0; --rt-primary-50: #DCEEFB; }
/* ==========================================================================
4. KIDS-MODE SPECIAL COMPONENTS
========================================================================== */
/* 4.1 Big journey CTA — one huge, obvious, mascot-colored button per screen */
.rt-kid-cta {
display: flex; align-items: center; gap: var(--rt-space-4);
width: 100%; min-height: 96px;
padding: var(--rt-space-5) var(--rt-space-6);
font: var(--rt-fw-bold) var(--rt-fs-lg) / 1.1 var(--rt-font-kids);
color: #fff; background: var(--rt-primary);
border: none; border-radius: var(--rt-radius-xl);
cursor: pointer;
box-shadow: 0 6px 0 var(--rt-primary-600); /* chunky "pressable" depth */
-webkit-tap-highlight-color: transparent;
transition: transform var(--rt-dur-fast) var(--rt-ease), box-shadow var(--rt-dur-fast) var(--rt-ease);
}
.rt-kid-cta:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--rt-primary-600); }
.rt-kid-cta:focus-visible { outline: none; box-shadow: 0 6px 0 var(--rt-primary-600), var(--rt-shadow-focus); }
.rt-kid-cta__mascot { width: 56px; height: 56px; flex: none; }
/* 4.2 Reward stamp + confetti */
.rt-stamp {
width: 88px; height: 88px; border-radius: 50%;
display: grid; place-items: center;
background: var(--rt-joy-yellow, #FFC531); color: var(--rt-text);
border: 4px dashed color-mix(in srgb, var(--rt-text) 20%, transparent);
font: var(--rt-fw-bold) var(--rt-fs-sm) / 1 var(--rt-font-kids);
text-align: center;
transform: rotate(-8deg) scale(0);
animation: rt-stamp-thunk var(--rt-dur-slow) var(--rt-ease) forwards;
}
@keyframes rt-stamp-thunk {
0% { transform: rotate(-8deg) scale(0); }
70% { transform: rotate(-8deg) scale(1.15); }
100% { transform: rotate(-8deg) scale(1); }
}
/* Confetti: JS spawns .rt-confetti spans in joy palette; this animates them */
.rt-confetti {
position: fixed; width: 10px; height: 14px; border-radius: 2px;
animation: rt-fall 1200ms var(--rt-ease) forwards;
pointer-events: none;
}
@keyframes rt-fall { to { transform: translateY(60vh) rotate(540deg); opacity: 0; } }
/* Positive-only, motion-safe fallback: static "Godt klaret!" badge, no confetti */
@media (prefers-reduced-motion: reduce) {
.rt-confetti { display: none; }
.rt-stamp { animation: none; transform: rotate(-8deg) scale(1); }
}
/* 4.3 Gentle "try again" — wrong quiz tap shakes, never a red error state */
.rt-shake { animation: rt-shake var(--rt-dur-slow) var(--rt-ease); }
@keyframes rt-shake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-6px); }
40% { transform: translateX(6px); }
60% { transform: translateX(-4px); }
80% { transform: translateX(4px); }
}