/* design/tokens.css */
/* ==========================================================================
Viabrio design tokens, v3 "Sunset Road · Eucalyptus" (3 Nov 2026)
The Algarve sun at the horizon with a road running into it (BRIEF 13d;
design/palette.md, whose rules are binding): Sol → Tangerina → Flamingo →
Violeta. Tiago asked for colours "lighter on the eye, more delicate" and "a
green tone on the fonts instead of the dark purple", and chose Eucalyptus:
warm white grounds, eucalyptus ink for every letter (the wordmark's too),
a eucalyptus pill to press, and the sunset only whispering (the mark, a 1 px
horizon, a peach glow behind the van, the sponsor's pick in pale sunset).
Letters are eucalyptus 950 on light and white on Noite.
Every colour on the site comes from a custom property in this file. Components
never use a hex value, so the brand drops in by changing values here and the
files in public/brand/. Semantic names (--color-*, --cell-*, --van-*,
--planner-*) are stable; build components on those, not on primitives.
FONTS. Outfit (display: headings, the hero, the big price) and Plus Jakarta
Sans (text: everything people read and operate). Both SIL OFL 1.1, both with
every Portuguese diacritic (á à â ã ç é ê í ó ô õ ú, € º ª « »).
The site self-hosts them: the @font-face rules at the end of this file load
/fonts/outfit.woff2 and /fonts/plus-jakarta-sans.woff2 (no request to Google).
Weights used: Outfit 500, 600, 700; Plus Jakarta Sans 400, 500, 600, 700, 800.
A page that cannot self-host loads exactly those weights from Google instead:
THEMES. Light, always (Tiago, 3 Nov: "I prefer the lighter background, not
dark"). Nothing here follows prefers-color-scheme: a visitor whose system is
in dark mode gets the same light site. The night values are kept under an
explicit data-theme="dark", which nothing on the site sets today, so night
can come back later as an opt-in. data-theme="light" forces light inside
such an island. The van is white in both themes.
CONTRAST. Every text pair meets WCAG 2.2 AA (4.5:1); borders, focus and
planner states meet 3:1. Ratios are noted beside the tokens ("on bg" unless
said); preview.html measures them live. The four sunset colours are GRAPHIC
colours: never small text on a light ground (1.81 to 3.73:1 on white), and
NEVER white text on the sunset. Text on the whisper tints (the pick, the step
discs) is heading eucalyptus (7.82 to 8.70:1). Text on a solid Sol,
Tangerina, Flamingo or the accent is night eucalyptus, --color-on-accent
(5.54 to 7.96:1). Never set text on solid Violeta: eucalyptus fails there
(2.78 and 3.85:1), so no text crosses the full-strength gradient.
========================================================================== */
:root {
/* ------------------------------------------------------------------
1. Palette primitives. Components use the semantic tokens (section 2);
primitives are for illustration and for deriving new tokens.
The step with the brand hex is marked "brand".
------------------------------------------------------------------ */
/* Sol: the Algarve sun, gradient top. Gold you can read: 700 (6.01:1 on white). */
--vb-sol-50: #fff8ec;
--vb-sol-100: #ffefd6;
--vb-sol-200: #ffdfab;
--vb-sol-300: #ffc874; /* gold text on Noite, 12.43:1 */
--vb-sol-400: #ffb144; /* brand */
--vb-sol-500: #f39a1c;
--vb-sol-600: #c47a00; /* warning icons and borders, 3.43:1 */
--vb-sol-700: #875a00; /* gold text on white, 6.01:1 */
--vb-sol-800: #6a4600;
--vb-sol-900: #4d3200;
/* Tangerina: Surfing Dog's tangerine. Readable: 700 (5.05:1). */
--vb-tangerina-50: #fff4ec;
--vb-tangerina-100: #ffe5d2;
--vb-tangerina-200: #ffcaa5;
--vb-tangerina-300: #ffb27c; /* on Noite, 10.75:1 */
--vb-tangerina-400: #ff9650; /* brand */
--vb-tangerina-500: #f27a30;
--vb-tangerina-600: #d4611a;
--vb-tangerina-700: #b4520f; /* on white, 5.05:1 */
--vb-tangerina-800: #8a3e0b;
--vb-tangerina-900: #5f2b08;
/* Flamingo: Surfing Dog's flamingo. 700 is accent text on white (the van strips' old tagline ink). */
--vb-flamingo-50: #fff0f6;
--vb-flamingo-100: #ffdcea;
--vb-flamingo-200: #ffbcd6;
--vb-flamingo-300: #ff8fbc; /* accent text on Noite, 8.94:1 */
--vb-flamingo-400: #ff6fa8; /* brand; the primary button on Noite */
--vb-flamingo-500: #e2477f; /* "flamingo deep": the one-colour vinyl accent, 3.86:1 (graphics) */
--vb-flamingo-600: #c8336f;
--vb-flamingo-700: #b02a6b; /* accent text on white, 6.20:1 */
--vb-flamingo-800: #85204f;
--vb-flamingo-900: #5b1636;
/* Violeta: Surfing Dog's violet, gradient base. Links and focus: 600. */
--vb-violeta-50: #f4f1ff;
--vb-violeta-100: #e8e1ff;
--vb-violeta-200: #d4c8ff;
--vb-violeta-300: #ab95ff; /* links on Noite, 7.65:1 */
--vb-violeta-400: #8a6bff; /* brand */
--vb-violeta-500: #7150f0; /* free planner squares, 5.11:1 */
--vb-violeta-600: #5a3fd0; /* links and focus on white, 6.87:1 */
--vb-violeta-700: #4529b0;
--vb-violeta-800: #34208a;
--vb-violeta-900: #241763;
/* Eucalipto: the eucalyptus leaf, OKLCH hue 188 to 195. Its dark, cool side is the ink
(headings, text, the wordmark's letters); its blue-green is what you press (the pill,
links, focus). Steps are numbered by role, from the mist (50) to the brand ink (950):
the dark end is not in strict lightness order (900, body text, is lighter than 800).
Ratios on the page ground #fffdfa unless said. */
--vb-eucalipto-50: #eff8f7; /* eucalyptus mist: hover washes; heading on it 9.60 */
--vb-eucalipto-100: #c9dcdb; /* sea glass: the drawn van's glass (decorative) */
--vb-eucalipto-200: #b1c2c1; /* the drawn van's panel lines (decorative) */
--vb-eucalipto-300: #7e8f8d; /* strong lines: inputs, chip glyphs, rings, 3.34 */
--vb-eucalipto-400: #67938e; /* free planner squares, dashed, 3.42 on white */
--vb-eucalipto-500: #28847e; /* focus ring, 4.41 */
--vb-eucalipto-550: #58706f; /* captions, meta, table heads, 5.22 */
--vb-eucalipto-600: #4d6666; /* secondary text, lead paragraphs, nav, 6.07 */
--vb-eucalipto-650: #1a6765; /* links, ghost buttons, the planner's hover edge, 6.52 */
--vb-eucalipto-700: #2d6965; /* primary: the eucalyptus pill, white on it 6.33 */
--vb-eucalipto-750: #215956; /* primary hover, white on it 7.99 */
--vb-eucalipto-800: #1a4846; /* primary pressed, white on it 10.20 */
--vb-eucalipto-900: #314f4f; /* body text, 8.76 */
--vb-eucalipto-950: #184745; /* brand: headings, the wordmark's letters, the one-colour logo, 10.21 */
/* Tinta: the navy ink of v2. No longer an ink on light (Eucalipto is); still the night
theme's card surface, and the ink of the logo exploration's originals. */
--vb-tinta-50: #f5f4fa;
--vb-tinta-100: #ecebf5;
--vb-tinta-200: #dcdbea;
--vb-tinta-300: #c4c3dc;
--vb-tinta-400: #9fa0c2;
--vb-tinta-500: #7c7ea6; /* input borders, 3.89:1 */
--vb-tinta-600: #5d6088; /* captions, 6.01:1 */
--vb-tinta-700: #474a75; /* secondary text, 8.39:1 */
--vb-tinta-800: #2c2e57;
--vb-tinta-900: #14163c; /* v2's text and wordmark, 17.36:1; the night card surface */
/* Noite: Surfing Dog's night. Grounds and neutrals for the dark theme. */
--vb-noite-50: #f2f1ff; /* long reading on Noite, 16.97:1 */
--vb-noite-200: #b9b8dd; /* secondary text, 9.90:1 */
--vb-noite-300: #9897c2; /* captions, 6.81:1 */
--vb-noite-400: #7f82b3; /* input borders, 4.75:1 on Tinta */
--vb-noite-600: #3a3d6e;
--vb-noite-700: #2a2d5a; /* hairlines */
--vb-noite-750: #1f2250; /* dividers */
--vb-noite-800: #1c1f4a; /* raised surfaces */
--vb-noite-850: #111334; /* alternate sections */
--vb-noite-900: #0d0e26; /* brand: the night ground */
--vb-noite-950: #0a0b1f; /* sunken wells */
/* Areia: warm sand. Branco is the cards, the inputs and the van; the sand steps are held squares.
(The page itself is the warm white --color-bg, #fffdfa.) */
--vb-areia-0: #ffffff; /* Branco */
--vb-areia-50: #fbf7f2; /* brand: Areia */
--vb-areia-100: #f6efe6;
--vb-areia-200: #ede3d5;
--vb-areia-300: #ddcfbb;
--vb-areia-400: #c4b199;
--vb-areia-500: #a08b70; /* held borders, 3.27:1 */
--vb-areia-600: #7f6b52;
--vb-areia-700: #5f4f3b; /* held text, 7.87:1 */
--vb-areia-800: #413628;
/* Derived status hues, tuned to sit beside the sunset (always with an icon and words). */
--vb-pinho-50: #edf7f1; /* Pinho, the stone pine: done, paid */
--vb-pinho-300: #7cc8a0;
--vb-pinho-600: #23774d; /* 5.50:1 */
--vb-pinho-800: #154a31;
--vb-lacre-50: #fdf0ef; /* Lacre, sealing wax: errors only */
--vb-lacre-300: #f59a93;
--vb-lacre-600: #bb2a24; /* 6.05:1 */
--vb-lacre-700: #9c211d;
/* The sunset gradient. Graphics only: the mark, the sponsor's pick, thin bands.
Vertical, Sol at the top to Violeta at the horizon, always the whole run. */
--gradient-sunset: linear-gradient(180deg, var(--vb-sol-400) 0%, var(--vb-tangerina-400) 36%, var(--vb-flamingo-400) 70%, var(--vb-violeta-400) 100%);
--gradient-sunset-x: linear-gradient(90deg, var(--vb-sol-400) 0%, var(--vb-tangerina-400) 36%, var(--vb-flamingo-400) 70%, var(--vb-violeta-400) 100%);
/* The sunset whispered: the same four stops mixed into white, for the sponsor's pick, the
step discs and the chosen size chip. --whisper-sunset at 24 to 30 % (heading eucalyptus on
it 7.82 to 8.70:1), --whisper-sunset-pale at 9 to 12 % (body text on it 8.04 to 8.30:1). */
--whisper-sunset: linear-gradient(180deg,
color-mix(in srgb, var(--vb-sol-400) 30%, var(--vb-areia-0)) 0%,
color-mix(in srgb, var(--vb-tangerina-400) 28%, var(--vb-areia-0)) 36%,
color-mix(in srgb, var(--vb-flamingo-400) 24%, var(--vb-areia-0)) 70%,
color-mix(in srgb, var(--vb-violeta-400) 24%, var(--vb-areia-0)) 100%);
--whisper-sunset-pale: linear-gradient(180deg,
color-mix(in srgb, var(--vb-sol-400) 12%, var(--vb-areia-0)) 0%,
color-mix(in srgb, var(--vb-tangerina-400) 11%, var(--vb-areia-0)) 36%,
color-mix(in srgb, var(--vb-flamingo-400) 9%, var(--vb-areia-0)) 70%,
color-mix(in srgb, var(--vb-violeta-400) 9%, var(--vb-areia-0)) 100%);
/* Short names for the brand colours (and the names v2 drafts used). */
--vb-sol: var(--vb-sol-400);
--vb-tangerina: var(--vb-tangerina-400);
--vb-flamingo: var(--vb-flamingo-400);
--vb-violeta: var(--vb-violeta-400);
--vb-eucalipto: var(--vb-eucalipto-950);
--vb-tinta: var(--vb-tinta-900);
--vb-noite: var(--vb-noite-900);
--vb-areia: var(--vb-areia-50);
--vb-white: var(--vb-areia-0);
--vb-flamingo-deep: var(--vb-flamingo-500);
--vb-sunset: var(--gradient-sunset);
--vb-flamingo-ink: var(--vb-flamingo-700);
--vb-tangerine-ink: var(--vb-tangerina-700);
--vb-violet-ink: var(--vb-violeta-600);
--vb-violet-ink-deep: var(--vb-violeta-700);
--vb-sol-ink: var(--vb-sol-700);
--vb-flamingo-ink-dk: var(--vb-flamingo-300);
--vb-tangerine-ink-dk: var(--vb-tangerina-300);
--vb-violet-ink-dk: var(--vb-violeta-300);
--vb-sol-ink-dk: var(--vb-sol-300);
--vb-mist-50: var(--vb-tinta-50);
--vb-mist-100: var(--vb-tinta-100);
--vb-mist-200: var(--vb-tinta-200);
--vb-mist-300: var(--vb-tinta-300);
--vb-mist-400: var(--vb-tinta-400);
--vb-mist-500: var(--vb-tinta-500);
--vb-mist-600: var(--vb-tinta-600);
--vb-mist-700: var(--vb-tinta-700);
--vb-mist-800: var(--vb-tinta-800);
--vb-night-100: var(--vb-noite-50);
--vb-night-200: var(--vb-noite-200);
--vb-night-300: var(--vb-noite-300);
--vb-night-500: var(--vb-noite-400);
--vb-night-700: var(--vb-noite-700);
--vb-night-800: var(--vb-noite-800);
--vb-night-850: var(--vb-noite-850);
--vb-night-900: var(--vb-noite-950);
/* ------------------------------------------------------------------
3. Typography
------------------------------------------------------------------ */
--font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-display: "Outfit", "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
--font-display-variation: normal; /* kept for old rules; Outfit has no axes beyond weight */
/* Type scale. Mobile first; headings grow with the viewport. */
--text-2xs: 0.75rem; /* 12 legal small print, overlines */
--text-xs: 0.8125rem; /* 13 captions, chips */
--text-sm: 0.9375rem; /* 15 secondary text, labels */
--text-md: 1.0625rem; /* 17 body */
--text-lg: 1.1875rem; /* 19 lead paragraphs */
--text-xl: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem); /* h4 */
--text-2xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); /* h3 */
--text-3xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.375rem); /* h2 */
--text-4xl: clamp(2.125rem, 1.6rem + 2.2vw, 3.125rem); /* h1 */
--text-display: clamp(2.5rem, 1.75rem + 3.6vw, 4.25rem); /* hero */
--text-price: clamp(2rem, 1.6rem + 1.8vw, 2.75rem); /* price card number */
--leading-tight: 1.1;
--leading-snug: 1.2;
--leading-normal: 1.62;
--leading-relaxed: 1.7;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
/* Outfit headings are 500 (h1 to h3, the display, the price); h4-style titles 600. */
--weight-bold: 700;
--weight-heavy: 800;
--tracking-display: -0.02em;
--tracking-tight: -0.012em;
--tracking-normal: 0;
--tracking-caps: 0.14em;
--measure: 66ch; /* comfortable line length */
--measure-narrow: 48ch;
/* ------------------------------------------------------------------
4. Space (4 px base)
------------------------------------------------------------------ */
--space-0: 0;
--space-px: 1px;
--space-0-5: 0.125rem; /* 2 */
--space-1: 0.25rem; /* 4 */
--space-1-5: 0.375rem; /* 6 */
--space-2: 0.5rem; /* 8 */
--space-3: 0.75rem; /* 12 */
--space-4: 1rem; /* 16 */
--space-5: 1.25rem; /* 20 */
--space-6: 1.5rem; /* 24 */
--space-8: 2rem; /* 32 */
--space-10: 2.5rem; /* 40 */
--space-12: 3rem; /* 48 */
--space-16: 4rem; /* 64 */
--space-20: 5rem; /* 80 */
--space-24: 6rem; /* 96 */
--space-32: 8rem; /* 128 */
--space-gutter: clamp(1rem, 0.6rem + 2vw, 2rem); /* page side padding: 16 px on phones */
--space-section: clamp(4rem, 2.8rem + 5.5vw, 8rem); /* between page sections */
--space-stack: clamp(1rem, 0.8rem + 1vw, 1.5rem); /* between blocks in a section */
--container: 72rem; /* 1152 */
--container-wide: 80rem; /* 1280: van page */
--container-text: 44rem; /* terms, privacy */
--header-height: 4rem;
--tap-target: 2.75rem; /* 44 px minimum touch target */
--logo-height: 1.875rem; /* the horizontal lockup in the header: 30 px tall, 187 px wide */
--logo-height-min: 1.625rem; /* 26 px: below this the mark gets under 48 px; use favicon.svg */
/* ------------------------------------------------------------------
5. Radii
------------------------------------------------------------------ */
--radius-xs: 4px; /* planner cells, tags */
--radius-sm: 6px; /* thumbnails, swatches, menu items */
--radius-md: 12px; /* chips, inputs, alerts (buttons are pills) */
--radius-lg: 20px; /* cards */
--radius-xl: 28px; /* hero panels, the van stage */
--radius-pill: 999px; /* every button, the language switch, badges */
--radius-round: 50%;
/* ------------------------------------------------------------------
6. Borders and focus
------------------------------------------------------------------ */
--border-hairline: 1px;
--border-control: 1px; /* hairline controls: inputs, chips, buttons */
--border-thick: 2px;
--focus-width: 3px;
--focus-offset: 2px;
/* ------------------------------------------------------------------
7. Motion. Calm: nothing bounces except a placement snapping home.
------------------------------------------------------------------ */
--duration-instant: 80ms; /* press feedback */
--duration-fast: 140ms; /* hover, colour changes */
--duration-base: 220ms; /* chips, toggles, small moves */
--duration-slow: 360ms; /* panels, cards entering */
--duration-slower: 560ms; /* page-level reveals, van turning to a face */
--duration-toast: 5000ms; /* how long a toast stays */
--ease-standard: cubic-bezier(0.2, 0, 0, 1); /* most UI */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* things arriving */
--ease-in: cubic-bezier(0.4, 0, 1, 1); /* things leaving */
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* camera moves on the van */
--ease-snap: cubic-bezier(0.34, 1.36, 0.64, 1); /* a placement settling into its spot */
--van-autorotate-period: 48s; /* one full idle turn */
--van-idle-delay: 4s; /* wait after the last drag before turning again */
/* ------------------------------------------------------------------
8. Breakpoints (min-width, mobile first). CSS cannot read custom
properties inside @media, so copy the em value into the query:
@media (min-width: 48em) { ... } (= --bp-md)
------------------------------------------------------------------ */
--bp-sm: 30em; /* 480 large phones */
--bp-md: 48em; /* 768 tablets, two columns begin */
--bp-lg: 64em; /* 1024 laptop: van page goes side by side */
--bp-xl: 80em; /* 1280 wide */
/* ------------------------------------------------------------------
9. Layers
------------------------------------------------------------------ */
--z-base: 0;
--z-raised: 10;
--z-sticky: 100; /* sticky price bar */
--z-header: 200;
--z-overlay: 400;
--z-dialog: 500;
--z-toast: 600;
/* ------------------------------------------------------------------
10. Planner geometry
------------------------------------------------------------------ */
--cell-size: clamp(2.5rem, 8.5vw, 4rem); /* one 40 x 40 cm square on screen */
--cell-gap: 3px;
--cell-radius: var(--radius-xs);
}
/* ------------------------------------------------------------------
2. Semantic colour, LIGHT: the site, always (and any data-theme="light"
island). Ratios are against --color-bg (warm white #fffdfa) and, after
a slash, --color-bg-alt (#faf7f3).
------------------------------------------------------------------ */
:root,
[data-theme="light"] {
color-scheme: light;
/* Grounds: warm white, a whisper of sand */
--color-bg: #fffdfa; /* page: warm white */
--color-bg-alt: #faf7f3; /* alternate sections, the footer */
--color-bg-sky: #fff9f2; /* hero wash: first light */
--color-glow: #fde8e6; /* soft sunset glow behind the hero van */
--color-surface: var(--vb-areia-0); /* cards, inputs: white */
--color-surface-raised: var(--vb-areia-0); /* popovers, toasts, sticky bars */
--color-surface-sunken: #f6f3ef; /* wells, read-only fields, the tab well (warm) */
--color-scrim: rgb(24 71 69 / 0.36);
/* Ink: eucalyptus */
--color-text: var(--vb-eucalipto-900); /* 8.76 / 8.33 */
--color-heading: var(--vb-eucalipto-950); /* 10.21 / 9.71 */
--color-text-muted: var(--vb-eucalipto-600); /* 6.07 / 5.77 */
--color-text-subtle: var(--vb-eucalipto-550); /* 5.22 / 4.96; 4.79 on sunken: nothing darker than sunken */
--color-text-inverse: var(--vb-areia-0);
/* What you press: the eucalyptus pill */
--color-primary: var(--vb-eucalipto-700); /* white on it 6.33 */
--color-primary-hover: var(--vb-eucalipto-750); /* white on it 7.99 */
--color-primary-active: var(--vb-eucalipto-800); /* white on it 10.20 */
--color-on-primary: var(--vb-areia-0);
--color-primary-soft: var(--vb-eucalipto-50); /* hover wash for secondary, ghost and chips */
--color-on-primary-soft: var(--vb-eucalipto-950); /* 9.60 */
/* The one warm accent: dusk rose (overlines, "Fazemos nós.", the who icons) */
--color-accent: #f590b8; /* graphics only, never text on light */
--color-accent-text: #a14a70; /* 5.55 / 5.27; 5.06 on accent-soft */
--color-accent-soft: #fcf0f2;
--color-on-accent: #0b2f2e; /* night eucalyptus: 6.55 on accent, 5.54 on Flamingo */
--color-sun: var(--vb-sol-400); /* the sun itself (graphics) */
--color-sunset: var(--gradient-sunset); /* graphics only */
--color-link: var(--vb-eucalipto-650); /* 6.52 / 6.20 */
--color-link-hover: #0d4f4e; /* 9.21 */
--color-border: #ebe5de; /* decorative hairlines */
--color-border-soft: #e4ddd5; /* chip and secondary-button outlines (their labels name them) */
--color-border-strong: var(--vb-eucalipto-300); /* inputs, chip glyphs, rings: 3.34 / 3.17; 3.39 on white, 3.06 on sunken */
--color-divider: #f1ece6;
--color-focus: var(--vb-eucalipto-500); /* 4.41 / 4.19; 4.48 on white */
--color-info: var(--vb-violeta-600); /* info stays violet: green would read as ink or success */
--color-info-soft: #f4f2fb;
--color-info-text: var(--vb-violeta-800); /* 11.01 on soft */
--color-success: var(--vb-pinho-600); /* 5.50 */
--color-success-soft: var(--vb-pinho-50);
--color-success-text: var(--vb-pinho-800); /* 9.33 on soft */
--color-warning: var(--vb-sol-600); /* 3.43, icons and borders only */
--color-warning-soft: #fff9ef;
--color-warning-text: var(--vb-sol-800); /* 8.06 on soft */
--color-danger: var(--vb-lacre-600); /* 6.05 */
--color-danger-soft: var(--vb-lacre-50);
--color-danger-text: var(--vb-lacre-700); /* 7.13 on soft */
--color-pending: var(--vb-areia-500); /* held: someone's 7-day hold */
--color-pending-soft: #f8f3ec;
--color-pending-text: var(--vb-areia-700); /* 7.13 on soft */
/* test-mode notice: road-works tape in sun and ink, impossible to miss, not alarming */
--color-test-bg: var(--vb-sol-100);
--color-test-stripe: var(--vb-sol-200);
--color-test-text: var(--vb-sol-900); /* 9.25 on the stripe */
--color-test-badge: var(--vb-eucalipto-950); /* badge text is --color-test-bg: 9.17 */
/* Brand */
--color-brand: var(--vb-eucalipto-950); /* the wordmark's letters (public/brand/ is built in it) */
--color-brand-sun: var(--vb-sol-400);
--color-logo-plate: var(--vb-areia-0); /* the plate a sponsor's logo sits on: always white */
--color-logo-plate-ink: var(--vb-eucalipto-950); /* 10.36 */
/* Planner cell states. They sit on the drawn van, which is white in both themes. */
--cell-free-bg: var(--vb-areia-0);
--cell-free-border: var(--vb-eucalipto-400); /* 3.42, dashed */
--cell-hover-bg: #ebf7f6;
--cell-hover-border: var(--vb-eucalipto-650); /* 6.04 on hover-bg */
--cell-selected-bg: #ffdcc4; /* flat stand-in for the pick: pale tangerine; heading on it 8.04 */
--cell-selected-fill: var(--whisper-sunset); /* what CSS paints: the sponsor's pick is the sunset, whispered */
--cell-selected-border: var(--vb-eucalipto-700);
--cell-selected-fg: var(--vb-eucalipto-950); /* 7.82 to 8.70 anywhere on the whisper */
--cell-selected-shadow: rgb(226 71 127 / 0.16);
--cell-held-bg: var(--vb-areia-50);
--cell-held-stripe: #f1e9de;
--cell-held-border: var(--vb-areia-500); /* 3.27 */
--cell-held-fg: var(--vb-areia-700); /* 6.54 on the stripe */
--cell-sold-bg: #f3f0ec;
--cell-sold-border: #ddd6ce;
--cell-sold-fg: var(--vb-eucalipto-950); /* 9.12 */
--cell-excluded-hatch: rgb(103 147 142 / 0.26);
--cell-reserved-bg: var(--vb-areia-0); /* the strip is printed on the white van */
--cell-reserved-fg: var(--vb-eucalipto-950); /* 10.36 */
--cell-invalid-border: var(--vb-lacre-600);
--planner-face-bg: #fbfbfd; /* the van's white paint, drawn */
--planner-face-line: var(--vb-eucalipto-200); /* panel lines, arches, glass edges */
--planner-glass: var(--vb-eucalipto-100); /* sea glass */
--planner-plate: var(--vb-areia-0); /* number plate */
--planner-plate-blue: #2e5ba8; /* the EU band on the number plate (real-world colour) */
/* 3D van (three.js reads these with getComputedStyle) */
--van-paint: #f5f6f3; /* white, matte clear coat */
--van-trim: #2b2d36; /* bumpers, mirrors, handles */
--van-tyre: #1b1c22;
--van-rim: #a9adb6;
--van-light-front: #f4f1e8;
--van-light-rear: #c2352a;
--van-badge: #b9bec6; /* the maker's badge */
--van-grid-line: rgb(45 105 101 / 0.34); /* free squares: a faint eucalyptus grid (1.65:1 on the paint; 1.4:1 or more in the browser at the right side's rear quarter) */
--van-grid-fill: rgb(45 105 101 / 0.035);
--van-held-hatch: rgb(160 139 112 / 0.5); /* sand stripes */
--van-held-fill: rgb(237 227 213 / 0.85);
--van-selected: rgb(255 150 80 / 0.95); /* Tangerina; paint the sunset gradient when you can */
--van-selected-edge: var(--vb-eucalipto-700);
--van-strip: var(--vb-eucalipto-950); /* the strip's letters */
--van-ground: #efe7dc; /* the sand the van stands on (floor, bounce light) */
--van-shadow: rgb(78 72 66 / 0.32); /* contact shadow: a soft, neutral warm grey, so the white van sits on the sand */
--van-stage-top: #fffdfa; /* stage: a warm white sky ... */
--van-stage-mid: #fffaf3; /* ... first light at the horizon ... */
--van-stage-bottom: #f8f3ec; /* ... and warm sand at the van's feet */
--van-stage-glow: #ffe9dc; /* a low peach glow behind the van: its white edges read on it */
--van-stage-edge: #efe9e2; /* hairline round the stage, so it holds on the hero wash */
--van-sky: #fff3e6;
--van-light-key: #fff4e0; /* the low Algarve sun */
/* Shadows: eucalyptus-tinted, low and wide, never grey smoke */
--shadow-color: 24 71 69;
--shadow-xs: 0 1px 2px rgb(var(--shadow-color) / 0.04);
--shadow-sm: 0 1px 2px rgb(var(--shadow-color) / 0.04), 0 4px 12px -6px rgb(var(--shadow-color) / 0.08);
--shadow-md: 0 1px 3px rgb(var(--shadow-color) / 0.04), 0 14px 32px -16px rgb(var(--shadow-color) / 0.14);
--shadow-lg: 0 2px 6px rgb(var(--shadow-color) / 0.04), 0 28px 56px -24px rgb(var(--shadow-color) / 0.2);
--shadow-primary: 0 1px 2px rgb(var(--shadow-color) / 0.06), 0 6px 16px -10px rgb(45 105 101 / 0.55); /* the pill's lift */
--shadow-primary-hover: 0 1px 2px rgb(var(--shadow-color) / 0.06), 0 10px 22px -12px rgb(45 105 101 / 0.6);
--shadow-focus: 0 0 0 var(--focus-offset) var(--color-bg), 0 0 0 calc(var(--focus-offset) + var(--focus-width)) var(--color-focus);
}
/* ------------------------------------------------------------------
2b. Semantic colour, DARK (night): an opt-in, not the system's choice.
Only an explicit data-theme="dark" applies it, and nothing on the
site sets that today (the site is light always). Kept so night can
come back later without redrawing the palette.
Ratios are against Noite and, after a slash, the Tinta surface.
Planner tokens are not repeated: the drawn van stays white; only
its paint is dimmed a little so it doesn't glare at night.
------------------------------------------------------------------ */
[data-theme="dark"] {
color-scheme: dark;
--color-bg: var(--vb-noite-900);
--color-bg-alt: var(--vb-noite-850);
--color-bg-sky: #1a1640; /* dusk violet */
--color-glow: #3a1f4f;
--color-surface: var(--vb-tinta-900);
--color-surface-raised: var(--vb-noite-800);
--color-surface-sunken: var(--vb-noite-950);
--color-scrim: rgb(0 0 0 / 0.6);
--color-text: var(--vb-noite-50); /* 16.97 / 15.54 */
--color-heading: var(--vb-areia-0); /* 18.95 / 17.36 */
--color-text-muted: var(--vb-noite-200); /* 9.90 / 9.06 */
--color-text-subtle: var(--vb-noite-300); /* 6.81 / 6.23; 5.61 on raised */
--color-text-inverse: var(--vb-noite-900);
--color-primary: var(--vb-flamingo-400); /* Noite on Flamingo 7.30 */
--color-primary-hover: var(--vb-flamingo-300); /* 8.94 */
--color-primary-active: var(--vb-flamingo-200);
--color-on-primary: var(--vb-noite-900);
--color-primary-soft: #2a1d45;
--color-on-primary-soft: #ffd3e5; /* 11.54 */
--color-accent: var(--vb-flamingo-400);
--color-accent-text: var(--vb-flamingo-300); /* 8.94 / 8.19 */
--color-accent-soft: #2d1a3f;
--color-on-accent: var(--vb-noite-900); /* 7.30 */
--color-sun: var(--vb-sol-400);
--color-link: var(--vb-violeta-300); /* 7.65 / 7.01 */
--color-link-hover: var(--vb-violeta-200);
--color-border: var(--vb-noite-700);
--color-border-soft: var(--vb-noite-700);
--color-border-strong: var(--vb-noite-400); /* 5.19 / 4.75 */
--color-divider: var(--vb-noite-750);
--color-focus: var(--vb-violeta-300); /* 7.65 */
--color-info: var(--vb-violeta-300);
--color-info-soft: #1f1a4a;
--color-info-text: var(--vb-violeta-200); /* 10.35 on soft */
--color-success: var(--vb-pinho-300);
--color-success-soft: #10261c;
--color-success-text: #a8e2c3; /* 10.89 on soft */
--color-warning: var(--vb-sol-300);
--color-warning-soft: #2b2210;
--color-warning-text: var(--vb-sol-200); /* 12.24 on soft */
--color-danger: var(--vb-lacre-300);
--color-danger-soft: #3a1518;
--color-danger-text: #ffb4ad; /* 9.52 on soft */
--color-pending: var(--vb-areia-400);
--color-pending-soft: #2a241c;
--color-pending-text: #e3d6c4; /* 10.74 on soft */
--color-test-bg: #3a2c0c;
--color-test-stripe: #46350f;
--color-test-text: var(--vb-sol-200); /* 9.23 on the stripe */
--color-test-badge: var(--vb-sol-400); /* badge text #3a2c0c on Sol: 7.52 */
--color-brand: var(--vb-areia-0);
--color-brand-sun: var(--vb-sol-400);
--planner-face-bg: #ececf3; /* white paint at dusk */
--cell-free-bg: #f6f6fa; /* free border on it 4.74 */
--cell-reserved-bg: #ececf3;
--van-ground: #090a1c;
--van-shadow: rgb(0 0 0 / 0.55);
--van-stage-top: #1a1640;
--van-stage-mid: #15123a;
--van-stage-bottom: var(--vb-noite-900);
--van-stage-glow: #3a1f4f; /* dusk */
--van-stage-edge: var(--vb-noite-700);
--van-sky: #1a1640;
--shadow-color: 0 0 0;
--shadow-xs: 0 1px 2px rgb(0 0 0 / 0.3);
--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3), 0 2px 6px -2px rgb(0 0 0 / 0.35);
--shadow-md: 0 2px 4px rgb(0 0 0 / 0.3), 0 10px 24px -8px rgb(0 0 0 / 0.5);
--shadow-lg: 0 4px 8px rgb(0 0 0 / 0.3), 0 24px 48px -16px rgb(0 0 0 / 0.6);
--shadow-primary: var(--shadow-sm);
--shadow-primary-hover: var(--shadow-md);
/* the whispers at dusk: the sunset stops mixed into Noite (white on them 9.78 to 12.63)
and into Tinta for the chosen chip (Noite 200 on them 6.94 to 7.59) */
--whisper-sunset: linear-gradient(180deg,
color-mix(in srgb, var(--vb-sol-400) 30%, var(--vb-noite-900)) 0%,
color-mix(in srgb, var(--vb-tangerina-400) 30%, var(--vb-noite-900)) 36%,
color-mix(in srgb, var(--vb-flamingo-400) 30%, var(--vb-noite-900)) 70%,
color-mix(in srgb, var(--vb-violeta-400) 30%, var(--vb-noite-900)) 100%);
--whisper-sunset-pale: linear-gradient(180deg,
color-mix(in srgb, var(--vb-sol-400) 14%, var(--vb-tinta-900)) 0%,
color-mix(in srgb, var(--vb-tangerina-400) 14%, var(--vb-tinta-900)) 36%,
color-mix(in srgb, var(--vb-flamingo-400) 14%, var(--vb-tinta-900)) 70%,
color-mix(in srgb, var(--vb-violeta-400) 14%, var(--vb-tinta-900)) 100%);
--shadow-focus: 0 0 0 var(--focus-offset) var(--color-bg), 0 0 0 calc(var(--focus-offset) + var(--focus-width)) var(--color-focus);
}
/* ------------------------------------------------------------------
Reduced motion: keep feedback, drop travel. The van stops turning
on its own; drag still works.
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
:root {
--duration-base: 1ms;
--duration-slow: 1ms;
--duration-slower: 1ms;
--ease-snap: var(--ease-standard);
--van-autorotate-period: 0s; /* 0 = no auto-rotate */
}
}
/* ------------------------------------------------------------------
Self-hosted fonts (SIL OFL 1.1): variable weight, Latin + Latin
Extended. Served from public/fonts/ at /fonts/.
------------------------------------------------------------------ */
@font-face {
font-family: "Outfit";
src: url("/fonts/outfit.woff2?v=14055222ce36") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Plus Jakarta Sans";
src: url("/fonts/plus-jakarta-sans.woff2?v=90ec05c28b41") format("woff2");
font-weight: 200 800;
font-style: normal;
font-display: swap;
}
/* design/components.css */
/* ==========================================================================
Viabrio components, v3 "Sunset Road · Eucalyptus". Reference CSS for every
component in DESIGN.md. Depends on tokens.css (every colour is a token; no hex
here). Outfit 500 headings, eucalyptus pills, hairline borders; the sunset
only whispers: a 1 px horizon, the sponsor's pick, the step discs.
No framework. Class prefix: vb-.
States that can't be forced in a static page also have an .is-* class
(.is-hover, .is-focus, .is-active) so preview.html can show them.
========================================================================== */
/* ---------------------------------------------------------------- base */
.vb-base {
font-family: var(--font-sans);
font-size: var(--text-md);
line-height: var(--leading-normal);
color: var(--color-text);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-feature-settings: "kern", "liga";
}
.vb-base :where(h1, h2, h3, h4) {
font-family: var(--font-display);
color: var(--color-heading);
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-tight);
line-height: var(--leading-snug);
text-wrap: balance;
margin: 0;
}
.vb-base h1 { font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
.vb-base h2 { font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
.vb-base h3 { font-size: var(--text-2xl); }
.vb-base h4 { font-size: var(--text-xl); font-family: var(--font-sans); font-weight: var(--weight-semibold); letter-spacing: 0; }
.vb-base p { margin: 0; text-wrap: pretty; }
.vb-base a { color: var(--color-link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.vb-base a:hover { color: var(--color-link-hover); text-decoration-thickness: 2px; }
.vb-base :focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-xs); }
.vb-display {
font-family: var(--font-display);
font-size: var(--text-display);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-display);
font-weight: var(--weight-medium);
color: var(--color-heading);
text-wrap: balance;
}
.vb-lead { font-size: var(--text-lg); color: var(--color-text-muted); line-height: var(--leading-normal); max-width: var(--measure-narrow); }
.vb-overline {
font-size: var(--text-2xs);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--color-accent-text);
}
.vb-small { font-size: var(--text-sm); color: var(--color-text-muted); }
.vb-num { font-variant-numeric: tabular-nums lining-nums; }
.vb-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vb-icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.25em; }
.vb-skip { position: absolute; z-index: var(--z-dialog); left: var(--space-gutter); top: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-on-primary); font-weight: var(--weight-semibold); text-decoration: none; transform: translateY(-200%); }
.vb-skip:focus-visible { transform: none; outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-pill); }
/* ".vb-base a" (0,1,1) outranks ".vb-skip" (0,1,0), so the focused skip link used to take the link
ink on the button fill (1.32:1). Pin it on every state: white on eucalyptus, 6.33:1. */
.vb-base .vb-skip, .vb-base .vb-skip:hover, .vb-base .vb-skip:focus, .vb-base .vb-skip:focus-visible { color: var(--color-on-primary); background: var(--color-primary); text-decoration: none; }
/* the logo: with viabrio-logo.svg (eucalyptus letters; the site is light always) */
.vb-logo { display: inline-flex; flex: none; }
.vb-logo img, .vb-logo svg { display: block; height: var(--logo-height); width: auto; }
.vb-logo--footer img, .vb-logo--footer svg { height: var(--logo-height-min); }
/* the sunset as a 1 px hairline, the full Sol→Violeta run, fading out at both ends: graphics only, never behind text */
.vb-horizon {
display: block; height: 1px; border: 0; margin: 0; background: var(--gradient-sunset-x); opacity: 0.9;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, black 14%, black 86%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, black 14%, black 86%, transparent 100%);
}
/* --------------------------------------------------------------- buttons */
.vb-btn {
--btn-bg: transparent; --btn-fg: var(--color-text); --btn-bd: transparent;
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
min-height: var(--tap-target);
padding: 0 var(--space-5);
border: var(--border-control) solid var(--btn-bd);
border-radius: var(--radius-pill);
background: var(--btn-bg);
color: var(--btn-fg);
font: inherit; font-weight: var(--weight-medium); font-size: var(--text-md); line-height: 1;
text-decoration: none; white-space: nowrap; cursor: pointer;
transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
-webkit-tap-highlight-color: transparent;
}
.vb-btn:active, .vb-btn.is-active { transform: translateY(1px) scale(0.99); }
/* the eucalyptus pill: solid (white on it 6.33:1, 7.99 on hover, 10.20 pressed), with a soft lift */
.vb-btn--primary { --btn-bg: var(--color-primary); --btn-fg: var(--color-on-primary); --btn-bd: var(--color-primary); box-shadow: var(--shadow-primary); }
.vb-btn--primary:hover, .vb-btn--primary.is-hover { --btn-bg: var(--color-primary-hover); --btn-bd: var(--color-primary-hover); box-shadow: var(--shadow-primary-hover); }
.vb-btn--primary:active, .vb-btn--primary.is-active { --btn-bg: var(--color-primary-active); --btn-bd: var(--color-primary-active); }
.vb-btn--secondary { --btn-bg: var(--color-surface); --btn-fg: var(--color-heading); --btn-bd: var(--color-border-soft); }
.vb-btn--secondary:hover, .vb-btn--secondary.is-hover { --btn-bg: var(--color-primary-soft); --btn-bd: var(--color-border-strong); --btn-fg: var(--color-on-primary-soft); }
.vb-btn--ghost { --btn-fg: var(--color-link); padding-inline: var(--space-3); }
.vb-btn--ghost:hover, .vb-btn--ghost.is-hover { --btn-bg: var(--color-primary-soft); --btn-fg: var(--color-on-primary-soft); }
.vb-btn--danger { --btn-bg: var(--color-surface); --btn-fg: var(--color-danger-text); --btn-bd: var(--color-danger); }
.vb-btn--danger:hover, .vb-btn--danger.is-hover { --btn-bg: var(--color-danger-soft); }
.vb-btn--lg { min-height: 3.25rem; padding: 0 var(--space-6); font-size: var(--text-md); }
.vb-btn--ghost.vb-btn--lg { padding-inline: var(--space-4); }
.vb-btn--sm { min-height: 2.25rem; padding: 0 var(--space-3); font-size: var(--text-sm); }
.vb-btn--block { width: 100%; }
.vb-btn[disabled], .vb-btn[aria-disabled="true"] {
--btn-bg: var(--color-surface-sunken); --btn-fg: var(--color-text-subtle); --btn-bd: var(--color-border);
cursor: not-allowed; transform: none; box-shadow: none;
}
/* Focus last, so a hovered or disabled button keeps its ring; and keep the pill (".vb-base
:focus-visible" sets a 4 px radius, which turned a focused pill into a box). */
.vb-btn:focus-visible, .vb-btn.is-focus { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-pill); }
.vb-btn[aria-busy="true"] { cursor: progress; }
.vb-btn[aria-busy="true"] .vb-spinner { display: inline-block; }
.vb-spinner {
display: none; width: 1em; height: 1em; border-radius: 50%;
border: 2px solid currentColor; border-right-color: transparent;
animation: vb-spin 800ms linear infinite;
}
@keyframes vb-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .vb-spinner { animation-duration: 2400ms; } }
/* ---------------------------------------------------------------- fields */
.vb-field { display: grid; gap: var(--space-1-5); align-content: start; }
.vb-label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text); }
.vb-label .vb-optional { font-weight: var(--weight-regular); color: var(--color-text-subtle); }
.vb-help { font-size: var(--text-xs); color: var(--color-text-subtle); line-height: 1.45; }
.vb-error-msg { display: flex; gap: var(--space-1-5); align-items: flex-start; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-danger-text); }
.vb-input, .vb-select, .vb-textarea {
width: 100%; min-height: var(--tap-target);
padding: 0.625rem var(--space-3);
font: inherit; font-size: var(--text-md); color: var(--color-text);
background: var(--color-surface);
border: var(--border-control) solid var(--color-border-strong);
border-radius: var(--radius-md);
transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), background-color var(--duration-fast);
appearance: none;
}
.vb-textarea { min-height: 7.5rem; resize: vertical; line-height: var(--leading-normal); }
.vb-input::placeholder, .vb-textarea::placeholder { color: var(--color-text-subtle); opacity: 1; }
.vb-input:hover, .vb-select:hover, .vb-textarea:hover, .is-hover > .vb-input { border-color: var(--color-text-muted); }
.vb-input:focus, .vb-select:focus, .vb-textarea:focus, .is-focus > .vb-input {
outline: none; border-color: var(--color-focus);
box-shadow: 0 0 0 var(--focus-width) color-mix(in srgb, var(--color-focus) 28%, transparent);
}
.vb-input[aria-invalid="true"], .vb-textarea[aria-invalid="true"] { border-color: var(--color-danger); }
.vb-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 var(--focus-width) color-mix(in srgb, var(--color-danger) 25%, transparent); }
.vb-input:disabled, .vb-select:disabled, .vb-textarea:disabled { background: var(--color-surface-sunken); color: var(--color-text-subtle); border-color: var(--color-border); cursor: not-allowed; }
.vb-input[readonly] { background: var(--color-surface-sunken); border-style: dashed; }
.vb-select {
padding-right: 2.5rem;
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: calc(100% - 1.25rem) 55%, calc(100% - 0.9rem) 55%;
background-size: 0.35rem 0.35rem; background-repeat: no-repeat;
}
.vb-input-affix { display: flex; align-items: stretch; }
.vb-input-affix .vb-affix { display: grid; place-items: center; padding: 0 var(--space-3); border: var(--border-control) solid var(--color-border-strong); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); background: var(--color-surface-sunken); color: var(--color-text-muted); font-size: var(--text-sm); }
.vb-input-affix .vb-input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
/* checkbox: a real input, restyled */
.vb-check { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; font-size: var(--text-sm); cursor: pointer; }
.vb-check input {
appearance: none; margin: 0.1rem 0 0; width: 1.375rem; height: 1.375rem; flex: none;
border: var(--border-control) solid var(--color-border-strong); border-radius: 5px; background: var(--color-surface);
display: grid; place-items: center; cursor: pointer;
transition: background-color var(--duration-fast), border-color var(--duration-fast);
}
.vb-check input::after { content: ""; width: 0.7rem; height: 0.38rem; border: solid var(--color-on-primary); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform var(--duration-base) var(--ease-snap); }
.vb-check input:checked { background: var(--color-primary); border-color: var(--color-primary); }
.vb-check input:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.vb-check input:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.vb-check input[aria-invalid="true"] { border-color: var(--color-danger); }
/* logo upload */
.vb-drop {
display: grid; justify-items: center; gap: var(--space-2); text-align: center;
padding: var(--space-6) var(--space-4);
border: var(--border-thick) dashed var(--color-border-strong); border-radius: var(--radius-lg);
background: var(--color-surface); color: var(--color-text-muted); font-size: var(--text-sm);
transition: background-color var(--duration-fast), border-color var(--duration-fast);
}
.vb-drop strong { color: var(--color-text); font-weight: var(--weight-semibold); }
.vb-drop .vb-icon { width: 2rem; height: 2rem; color: var(--color-primary); }
.vb-drop.is-dragover { border-color: var(--color-primary); background: var(--color-primary-soft); border-style: solid; }
.vb-drop.is-invalid { border-color: var(--color-danger); background: var(--color-danger-soft); }
.vb-file {
display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: var(--space-3); align-items: center;
padding: var(--space-3); border: var(--border-hairline) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface);
}
.vb-file__thumb { width: 4rem; height: 4rem; border-radius: var(--radius-sm); background: var(--color-logo-plate); border: 1px solid var(--color-border); display: grid; place-items: center; overflow: hidden; }
.vb-file__meta { display: grid; justify-items: start; gap: 0.1rem; min-width: 0; }
.vb-file__meta .vb-btn { margin-left: calc(-1 * var(--space-3)); min-height: 2rem; }
.vb-file__name { font-weight: var(--weight-medium); font-size: var(--text-sm); overflow-wrap: anywhere; }
/* ----------------------------------------------------------- size chips */
.vb-sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.75rem, 1fr)); gap: var(--space-2); }
.vb-size {
position: relative; display: grid; justify-items: center; align-content: center; gap: var(--space-1-5);
min-height: 6.25rem; padding: var(--space-3) var(--space-2) var(--space-2);
border: var(--border-control) solid var(--color-border-soft); border-radius: var(--radius-md);
background: var(--color-surface); color: var(--color-text); cursor: pointer;
font: inherit; text-align: center;
transition: border-color var(--duration-fast), background-color var(--duration-fast), box-shadow var(--duration-fast), transform var(--duration-instant);
}
.vb-size__shape { display: grid; gap: 2px; }
.vb-size__shape i { display: block; width: 0.7rem; height: 0.7rem; border-radius: 2px; background: var(--color-surface-sunken); border: 1px solid var(--color-border-strong); }
.vb-size__label { font-weight: var(--weight-medium); font-size: var(--text-md); line-height: 1; }
.vb-size__name { font-size: var(--text-2xs); font-weight: var(--weight-semibold); color: var(--color-text-muted); margin-top: -0.2rem; }
.vb-size__price { font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.vb-size:hover, .vb-size.is-hover { border-color: var(--color-border-strong); background: var(--color-primary-soft); }
.vb-size:focus-visible, .vb-size.is-focus { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-md); }
/* chosen: the eucalyptus edge (4.70:1 against an unchosen chip's outline) on the pale sunset */
.vb-size[aria-checked="true"] {
border-color: var(--color-primary); background: var(--whisper-sunset-pale);
box-shadow: inset 0 0 0 1px var(--color-primary), 0 10px 22px -14px var(--cell-selected-shadow);
}
/* the chosen chip is the one the radio group focuses: keep its edge and add the ring */
.vb-size[aria-checked="true"]:focus-visible, .vb-size[aria-checked="true"].is-focus { box-shadow: inset 0 0 0 1px var(--color-primary), var(--shadow-focus); }
.vb-size[aria-checked="true"] .vb-size__shape i { background: var(--cell-selected-fill); border-color: var(--cell-selected-border); }
/* the check badge: a small sunset with an ink tick (ink on the sunset passes everywhere) */
.vb-size[aria-checked="true"]::after {
content: ""; position: absolute; top: 0.3rem; right: 0.3rem; width: 1.1rem; height: 1.1rem; border-radius: 50%;
background: var(--cell-selected-fill);
}
.vb-size[aria-checked="true"]::before {
content: ""; position: absolute; z-index: 1; top: 0.64rem; right: 0.62rem; width: 0.45rem; height: 0.24rem;
border: solid var(--cell-selected-fg); border-width: 0 0 2px 2px; transform: rotate(-45deg);
}
.vb-size[aria-disabled="true"] .vb-size__name, .vb-size[aria-disabled="true"] .vb-size__price { color: var(--color-text-subtle); }
.vb-size[aria-disabled="true"] { cursor: not-allowed; border-style: dashed; border-color: var(--color-border); background: transparent; color: var(--color-text-subtle); }
.vb-size[aria-disabled="true"] .vb-size__shape i { background: transparent; border-color: var(--color-text-subtle); border-style: dashed; }
.vb-size[aria-disabled="true"]:hover { background: transparent; }
/* ----------------------------------------------------------- face tabs */
.vb-tabs { display: flex; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-md); background: var(--color-surface-sunken); border: 1px solid transparent; overflow-x: auto; scrollbar-width: none; }
.vb-tab {
flex: 1 1 0; min-width: 0; display: grid; gap: 0.1rem; justify-items: center; align-content: center; text-align: center; line-height: 1.2; padding: var(--space-2) var(--space-2);
min-height: var(--tap-target); border: 0; border-radius: calc(var(--radius-md) - 3px); background: transparent;
font: inherit; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-muted); cursor: pointer;
transition: background-color var(--duration-fast), color var(--duration-fast), box-shadow var(--duration-fast);
}
.vb-tab small { font-size: var(--text-2xs); font-weight: var(--weight-medium); color: var(--color-text-subtle); }
.vb-tab:hover, .vb-tab.is-hover { color: var(--color-text); background: color-mix(in srgb, var(--color-surface) 60%, transparent); }
.vb-tab[aria-selected="true"] { background: var(--color-surface); color: var(--color-heading); box-shadow: var(--shadow-xs), inset 0 0 0 1px var(--color-border); }
.vb-tab[aria-selected="true"] small { color: var(--color-accent-text); }
.vb-tab:focus-visible, .vb-tab.is-focus { outline: none; box-shadow: var(--shadow-focus); border-radius: calc(var(--radius-md) - 3px); }
/* --------------------------------------------------------- planner cells */
.vb-cell {
position: relative; width: var(--cell-size); height: var(--cell-size);
border-radius: var(--cell-radius); box-sizing: border-box;
display: grid; place-items: center;
font-size: var(--text-2xs); font-weight: var(--weight-bold); line-height: 1.1; text-align: center;
transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast), box-shadow var(--duration-fast), transform var(--duration-base) var(--ease-snap);
}
.vb-cell .vb-icon { width: 1.1rem; height: 1.1rem; }
.vb-cell[data-state="free"] { background: var(--cell-free-bg); border: 1px dashed var(--cell-free-border); color: var(--cell-free-border); cursor: pointer; }
.vb-cell[data-state="hover"] { background: var(--cell-hover-bg); border: 2px solid var(--cell-hover-border); color: var(--cell-hover-border); cursor: pointer; }
.vb-cell[data-state="selected"] { background: var(--cell-selected-fill, var(--cell-selected-bg)); border: 1.5px solid var(--cell-selected-border); color: var(--cell-selected-fg); }
.vb-cell[data-state="held"] {
background: repeating-linear-gradient(-45deg, var(--cell-held-stripe) 0 6px, var(--cell-held-bg) 6px 12px);
border: 1.5px solid var(--cell-held-border); color: var(--cell-held-fg);
}
.vb-cell[data-state="sold"] { background: var(--cell-sold-bg); border: 1.5px solid var(--cell-sold-border); color: var(--cell-sold-fg); }
.vb-cell[data-state="excluded"] {
background:
repeating-linear-gradient(45deg, var(--cell-excluded-hatch) 0 1px, transparent 1px 7px),
repeating-linear-gradient(-45deg, var(--cell-excluded-hatch) 0 1px, transparent 1px 7px);
border: 0; cursor: not-allowed;
}
/* the Viabrio strip: printed on the white van; a 1 px sunset horizon marks it when there is no art */
.vb-cell[data-state="reserved"] { background: var(--gradient-sunset-x) bottom / 100% 1px no-repeat, var(--cell-reserved-bg); border: 1px solid var(--cell-sold-border); color: var(--cell-reserved-fg); }
.vb-cell[data-state="invalid"] { background: var(--cell-free-bg); border: 2px solid var(--cell-invalid-border); color: var(--cell-invalid-border); }
.vb-cell.is-focus { box-shadow: var(--shadow-focus); z-index: 1; }
.vb-legend { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin: 0; padding: 0; list-style: none; font-size: var(--text-xs); color: var(--color-text-muted); }
.vb-legend li { display: flex; align-items: center; gap: var(--space-2); }
.vb-legend .vb-cell { --cell-size: 1.125rem; }
/* the planner board: a face drawn to scale with a grid on top */
.vb-board { position: relative; width: 100%; }
.vb-board__face { display: block; width: 100%; height: auto; }
.vb-board__grid { position: absolute; display: grid; gap: var(--cell-gap); }
.vb-board__grid > * { width: auto; height: auto; aspect-ratio: 1; }
.vb-placement {
position: absolute; display: grid; place-items: center; text-align: center; gap: 0.15rem;
border-radius: calc(var(--cell-radius) + 1px);
font-size: var(--text-xs); font-weight: var(--weight-bold); line-height: 1.15;
}
.vb-placement--selected { background: var(--cell-selected-fill, var(--cell-selected-bg)); color: var(--cell-selected-fg); border: 1.5px solid var(--cell-selected-border); box-shadow: 0 8px 20px -10px var(--cell-selected-shadow); animation: vb-snap var(--duration-slow) var(--ease-snap) both; }
.vb-placement--ghost { border: 2px solid var(--cell-hover-border); background: color-mix(in srgb, var(--cell-hover-bg) 85%, transparent); color: var(--cell-hover-border); }
.vb-placement--sold { background: var(--color-logo-plate); border: 1.5px solid var(--cell-sold-border); color: var(--color-logo-plate-ink); padding: 6%; }
.vb-placement--held { background: repeating-linear-gradient(-45deg, var(--cell-held-stripe) 0 6px, var(--cell-held-bg) 6px 12px); border: 1.5px solid var(--cell-held-border); color: var(--cell-held-fg); }
.vb-placement--reserved { background: var(--cell-reserved-bg); border-radius: var(--cell-radius); overflow: hidden; }
/* the strip art is transparent (cut vinyl on white paint) and drawn to the reserved box's exact size */
.vb-placement--reserved img { width: 100%; height: 100%; object-fit: contain; display: block; }
@keyframes vb-snap { from { transform: scale(0.92); opacity: 0.6; } to { transform: none; opacity: 1; } }
/* ----------------------------------------------------- price summary card */
.vb-price-card {
display: grid; gap: var(--space-4);
padding: var(--space-6); border-radius: var(--radius-lg);
background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-md);
}
.vb-price-card__pick { display: flex; gap: var(--space-3); align-items: center; }
.vb-price-card__swatch { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-sm); background: var(--cell-selected-fill, var(--cell-selected-bg)); box-shadow: inset 0 0 0 1px rgb(var(--shadow-color) / 0.08); flex: none; }
.vb-price-card__what { font-weight: var(--weight-medium); }
.vb-price-card__where { font-size: var(--text-sm); color: var(--color-text-muted); }
.vb-price {
display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--space-2);
font-family: var(--font-display);
font-size: var(--text-price); font-weight: var(--weight-medium); line-height: 1; color: var(--color-heading);
font-variant-numeric: lining-nums tabular-nums; letter-spacing: var(--tracking-display);
}
.vb-price small { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-muted); letter-spacing: 0; }
.vb-lines { display: grid; gap: var(--space-2); margin: 0; font-size: var(--text-sm); }
.vb-lines > div { display: flex; justify-content: space-between; gap: var(--space-4); }
.vb-lines dt { color: var(--color-text-muted); }
.vb-lines dd { margin: 0; font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.vb-lines .is-total { padding-top: var(--space-2); border-top: 1px solid var(--color-divider); font-size: var(--text-md); }
.vb-lines .is-total dt { color: var(--color-text); font-weight: var(--weight-semibold); }
.vb-lines .is-quote { flex-direction: column; gap: 0.1rem; }
.vb-lines .is-quote dd { font-weight: var(--weight-semibold); color: var(--color-accent-text); text-align: left; white-space: normal; }
.vb-terms-mini { display: grid; gap: var(--space-1-5); margin: 0; padding: 0; list-style: none; font-size: var(--text-xs); color: var(--color-text-muted); }
.vb-terms-mini li { display: flex; gap: var(--space-2); align-items: flex-start; }
.vb-terms-mini .vb-icon { color: var(--color-success); width: 1rem; height: 1rem; margin-top: 0.1rem; }
.vb-price-card.is-empty .vb-price { color: var(--color-text-subtle); }
/* mobile sticky price bar */
.vb-pricebar {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
padding: var(--space-3) var(--space-gutter) calc(var(--space-3) + env(safe-area-inset-bottom));
background: var(--color-surface-raised); border-top: 1px solid var(--color-border); box-shadow: 0 -10px 28px -18px rgb(var(--shadow-color) / 0.22);
}
.vb-pricebar__amount { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-medium); line-height: 1; color: var(--color-heading); font-variant-numeric: tabular-nums; }
.vb-pricebar__meta { font-size: var(--text-xs); color: var(--color-text-muted); }
/* ------------------------------------------------------------------ toasts */
.vb-toasts { position: fixed; z-index: var(--z-toast); inset: auto var(--space-gutter) var(--space-4); display: grid; gap: var(--space-2); justify-items: center; pointer-events: none; }
@media (min-width: 48em) { .vb-toasts { inset: auto var(--space-6) var(--space-6) auto; justify-items: end; } }
.vb-toast {
--t-accent: var(--color-info);
pointer-events: auto; width: min(26rem, 100%);
display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); align-items: start;
padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
background: var(--color-surface-raised); color: var(--color-text);
border: 1px solid var(--color-border); border-left: 4px solid var(--t-accent); border-radius: var(--radius-md);
box-shadow: var(--shadow-lg); font-size: var(--text-sm);
animation: vb-toast-in var(--duration-slow) var(--ease-out) both;
}
.vb-toast > .vb-icon { color: var(--t-accent); margin-top: 0.1rem; }
.vb-toast__title { font-weight: var(--weight-bold); }
.vb-toast__body { color: var(--color-text-muted); }
.vb-toast__action { margin-top: var(--space-1-5); }
.vb-toast__close { width: 2rem; height: 2rem; display: grid; place-items: center; border: 0; background: transparent; color: var(--color-text-subtle); border-radius: var(--radius-sm); cursor: pointer; margin: -0.25rem -0.25rem 0 0; }
.vb-toast__close:hover { background: var(--color-surface-sunken); color: var(--color-text); }
.vb-toast--success { --t-accent: var(--color-success); }
.vb-toast--warning { --t-accent: var(--color-warning); }
.vb-toast--danger { --t-accent: var(--color-danger); }
.vb-toast.is-leaving { animation: vb-toast-out var(--duration-base) var(--ease-in) both; }
@keyframes vb-toast-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes vb-toast-out { to { opacity: 0; transform: translateY(8px); } }
/* --------------------------------------------------------- inline alerts */
.vb-alert {
--a-bg: var(--color-info-soft); --a-fg: var(--color-info-text); --a-bd: var(--color-info);
display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start;
padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
background: var(--a-bg); color: var(--a-fg); border: 1px solid color-mix(in srgb, var(--a-bd) 35%, transparent);
font-size: var(--text-sm);
}
.vb-alert .vb-icon { color: var(--a-bd); margin-top: 0.1rem; }
.vb-alert strong { font-weight: var(--weight-bold); }
.vb-alert--success { --a-bg: var(--color-success-soft); --a-fg: var(--color-success-text); --a-bd: var(--color-success); }
.vb-alert--warning { --a-bg: var(--color-warning-soft); --a-fg: var(--color-warning-text); --a-bd: var(--color-warning); }
.vb-alert--danger { --a-bg: var(--color-danger-soft); --a-fg: var(--color-danger-text); --a-bd: var(--color-danger); }
/* -------------------------------------------------------- test-mode notice */
.vb-testmode {
display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3);
padding: var(--space-2) var(--space-gutter);
background: repeating-linear-gradient(-45deg, var(--color-test-stripe) 0 10px, var(--color-test-bg) 10px 20px);
color: var(--color-test-text); font-size: var(--text-sm); text-align: center;
border-bottom: 1px solid color-mix(in srgb, var(--color-test-badge) 40%, transparent);
}
.vb-testmode__badge {
display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.55rem; border-radius: var(--radius-pill);
background: var(--color-test-badge); color: var(--color-test-bg);
font-size: var(--text-2xs); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.vb-testmode-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.5rem; border-radius: var(--radius-pill); border: 1.5px dashed var(--color-test-badge); color: var(--color-test-text); background: var(--color-test-bg); font-size: var(--text-2xs); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
/* --------------------------------------------------------- language switch */
.vb-lang { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--color-surface); }
.vb-lang a {
display: grid; place-items: center; min-width: 2.75rem; min-height: 2.25rem; padding: 0 var(--space-2);
border-radius: var(--radius-pill); text-decoration: none;
font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.04em; color: var(--color-text-muted);
transition: background-color var(--duration-fast), color var(--duration-fast);
}
.vb-lang a:hover, .vb-lang a.is-hover { color: var(--color-text); background: var(--color-surface-sunken); }
/* the current language: a quiet ring on a sand fill, not a dark blob (ring 3.39:1 on the white pill, label 9.37:1) */
.vb-lang a[aria-current="true"] { background: var(--color-surface-sunken); color: var(--color-heading); box-shadow: inset 0 0 0 1px var(--color-border-strong); }
.vb-lang a:focus-visible, .vb-lang a.is-focus { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-pill); }
/* ------------------------------------------------------------ badges */
.vb-badge {
--b-bg: var(--color-surface-sunken); --b-fg: var(--color-text-muted); --b-dot: var(--color-text-subtle);
display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.6rem 0.2rem 0.5rem;
border-radius: var(--radius-pill); background: var(--b-bg); color: var(--b-fg);
font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1.4; white-space: nowrap;
}
.vb-badge::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--b-dot); }
.vb-badge--held { --b-bg: var(--color-pending-soft); --b-fg: var(--color-pending-text); --b-dot: var(--color-pending); }
.vb-badge--approved { --b-bg: var(--color-info-soft); --b-fg: var(--color-info-text); --b-dot: var(--color-info); }
.vb-badge--paid { --b-bg: var(--color-success-soft); --b-fg: var(--color-success-text); --b-dot: var(--color-success); }
.vb-badge--rejected { --b-bg: var(--color-danger-soft); --b-fg: var(--color-danger-text); --b-dot: var(--color-danger); }
.vb-badge--live { --b-bg: var(--color-accent-soft); --b-fg: var(--color-accent-text); --b-dot: var(--color-accent); }
/* --------------------------------------------------------- status steps */
.vb-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.vb-step { position: relative; display: grid; grid-template-columns: 2rem 1fr; gap: var(--space-3); padding-bottom: var(--space-5); }
.vb-step:last-child { padding-bottom: 0; }
.vb-step::before {
counter-increment: step; content: counter(step);
width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
font-size: var(--text-xs); font-weight: var(--weight-bold);
background: var(--color-surface); border: 1.5px solid var(--color-border-strong); color: var(--color-text-subtle);
position: relative; z-index: 1;
}
.vb-step:not(:last-child)::after { content: ""; position: absolute; left: calc(1rem - 1px); top: 2rem; bottom: 0; width: 2px; background: var(--color-divider); }
.vb-step__title { font-weight: var(--weight-bold); padding-top: 0.25rem; }
.vb-step__body { font-size: var(--text-sm); color: var(--color-text-muted); }
.vb-step.is-done::before { content: "✓"; background: var(--color-success); border-color: var(--color-success); color: var(--color-surface); }
.vb-step.is-done::after { background: var(--color-success); }
.vb-step.is-current::before { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); box-shadow: 0 0 0 4px var(--color-accent-soft); }
.vb-step.is-current .vb-step__title { color: var(--color-heading); }
.vb-step.is-todo .vb-step__title { color: var(--color-text-subtle); font-weight: var(--weight-semibold); }
/* ------------------------------------------------------------------ cards */
.vb-card { display: grid; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); }
.vb-card--raised { box-shadow: var(--shadow-sm); border-color: var(--color-border); }
.vb-card--link { text-decoration: none; color: inherit; transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard), border-color var(--duration-fast); }
.vb-card--link:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--color-border-strong); }
/* ------------------------------------------------------------------- FAQ */
.vb-faq { border-top: 1px solid var(--color-divider); }
.vb-faq details { border-bottom: 1px solid var(--color-divider); }
.vb-faq summary {
display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
padding: var(--space-4) 0; min-height: var(--tap-target); cursor: pointer; list-style: none;
font-weight: var(--weight-medium); font-size: var(--text-md); color: var(--color-heading);
}
.vb-faq summary::-webkit-details-marker { display: none; }
.vb-faq summary::after { content: ""; width: 0.6rem; height: 0.6rem; border: solid var(--color-text-muted); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); transition: transform var(--duration-base) var(--ease-standard); flex: none; }
.vb-faq details[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.vb-faq summary:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.vb-faq .vb-faq__a { padding: 0 0 var(--space-5); color: var(--color-text-muted); max-width: var(--measure); }
/* --------------------------------------------------------------- header */
.vb-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--header-height); padding: 0 var(--space-gutter); }
.vb-header__logo { display: inline-flex; color: var(--color-brand); }
.vb-header__logo svg, .vb-header__logo img { height: var(--logo-height); width: auto; display: block; }
/* ------------------------------------------------------------- empty state */
.vb-empty { display: grid; justify-items: center; gap: var(--space-2); text-align: center; padding: var(--space-8) var(--space-4); border: 1.5px dashed var(--color-border-strong); border-radius: var(--radius-lg); color: var(--color-text-muted); }
.vb-empty strong { color: var(--color-heading); font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-medium); }
/* ------------------------------------------------------------ admin table */
.vb-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.vb-table th { text-align: left; font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-subtle); font-weight: var(--weight-semibold); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); }
.vb-table td { padding: var(--space-3); border-bottom: 1px solid var(--color-divider); vertical-align: middle; }
.vb-table tr:hover td { background: color-mix(in srgb, var(--color-primary-soft) 45%, transparent); }
.vb-table .num { text-align: right; font-variant-numeric: tabular-nums; }
/* ------------------------------------------------------------ photo frame */
.vb-photo { margin: 0; display: grid; gap: var(--space-2); }
.vb-photo__img { aspect-ratio: 4 / 3; width: 100%; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg-alt); }
.vb-photo__img > * { width: 100%; height: 100%; object-fit: cover; display: block; }
.vb-photo figcaption { font-size: var(--text-xs); color: var(--color-text-subtle); display: flex; gap: var(--space-2); flex-wrap: wrap; }
.vb-photo figcaption b { color: var(--color-text-muted); font-weight: var(--weight-semibold); }
/* src/styles/site.css */
/* ==========================================================================
Viabrio site layout. Built on design/tokens.css and design/components.css.
Colours only through custom properties (BRIEF 13d): no hex values here.
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; }
main { flex: 1; outline: none; }
img, svg, video { max-width: 100%; }
img { height: auto; }
picture { display: block; }
button { font: inherit; }
ul, ol { padding-left: 1.25rem; }
hr { border: 0; border-top: 1px solid var(--color-divider); margin: var(--space-5) 0; }
code, pre { font-family: var(--font-mono); font-size: 0.9em; }
pre.code { background: var(--color-surface-sunken); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); overflow-x: auto; }
.vb-base :where(h1, h2, h3) { font-family: var(--font-display); }
.vb-base a.vb-btn, .vb-base a.vb-btn:hover { color: var(--btn-fg); text-decoration: none; }
/* Long labels wrap instead of pushing the page sideways (a full-width button, or any button on a phone). */
.vb-btn--block { white-space: normal; text-wrap: balance; text-align: center; line-height: 1.25; padding-block: var(--space-2); }
@media (max-width: 30em) { .vb-btn { white-space: normal; text-wrap: balance; text-align: center; line-height: 1.25; padding-block: var(--space-2); } }
.wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--space-gutter); }
.narrow { max-width: calc(var(--container-text) + 2 * var(--space-gutter)); }
.muted { color: var(--color-text-muted); }
.small { font-size: var(--text-sm); }
.vb-base .h3 { font-size: var(--text-2xl); }
.vb-base .h4 { font-size: var(--text-xl); font-family: var(--font-sans); font-weight: var(--weight-semibold); }
.prose { display: grid; gap: var(--space-4); max-width: var(--measure); }
.prose p { margin: 0; }
.stack { display: grid; gap: var(--space-4); }
.stack-lg { display: grid; gap: var(--space-8); }
.pre { white-space: pre-wrap; }
.vb-spinner.is-on { display: inline-block; width: 1.5rem; height: 1.5rem; color: var(--color-accent-text); }
.vb-skip { position: absolute; left: var(--space-3); top: -4rem; z-index: var(--z-dialog); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-on-primary); font-weight: var(--weight-bold); text-decoration: none; }
.vb-skip:focus { top: var(--space-3); }
/* --------------------------------------------------------------- header */
.site-header { position: sticky; top: 0; z-index: var(--z-header); background: color-mix(in srgb, var(--color-bg) 86%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--color-divider); }
.site-header__in { display: flex; align-items: center; gap: var(--space-4); min-height: var(--header-height); }
.site-header__logo { display: inline-flex; flex: none; border-radius: var(--radius-xs); }
.vb-logo img { display: block; width: auto; height: 1.6rem; }
.vb-logo--footer img { height: 1.75rem; }
.site-nav { flex: 1; display: none; }
.site-nav ul { display: flex; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.site-nav a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 var(--space-3); border-radius: var(--radius-pill); color: var(--color-text-muted); font-weight: var(--weight-medium); font-size: var(--text-sm); text-decoration: none; }
.site-nav a:hover { color: var(--color-text); background: var(--color-surface-sunken); }
.site-nav a:focus-visible { border-radius: var(--radius-pill); }
.site-header__end { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.site-header__cta { display: none; }
.site-menu { position: relative; }
.site-menu summary { list-style: none; display: grid; place-items: center; width: var(--tap-target); height: var(--tap-target); border-radius: var(--radius-md); cursor: pointer; color: var(--color-text); }
.site-menu summary::-webkit-details-marker { display: none; }
.site-menu summary:hover { background: var(--color-surface-sunken); }
.site-menu summary:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.site-menu__panel { position: absolute; right: 0; top: calc(100% + var(--space-2)); width: min(18rem, calc(100vw - 2 * var(--space-gutter))); padding: var(--space-3); background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.site-menu__panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.site-menu__panel a:not(.vb-btn) { display: block; padding: var(--space-3); border-radius: var(--radius-sm); color: var(--color-text); text-decoration: none; font-weight: var(--weight-semibold); }
.site-menu__panel a:not(.vb-btn):hover { background: var(--color-surface-sunken); }
.site-menu__panel li:last-child { margin-top: var(--space-2); }
@media (min-width: 56em) {
.site-nav { display: block; }
.site-header__cta { display: inline-flex; }
.site-menu { display: none; }
}
@media (max-width: 22em) { .vb-logo img { height: 1.35rem; } .site-header .vb-lang a { min-width: 2.25rem; } }
/* --------------------------------------------------------------- footer */
.site-footer { margin-top: var(--space-section); border-top: 1px solid var(--color-divider); background: var(--color-bg-alt); padding: var(--space-12) 0 var(--space-8); font-size: var(--text-sm); color: var(--color-text-muted); }
.site-footer__in { display: grid; gap: var(--space-8); }
.site-footer__brand { display: grid; gap: var(--space-3); }
.site-footer__brand p { margin: 0; }
.site-footer__tag { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-medium); color: var(--color-accent-text); }
.site-footer__nav { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.site-footer__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.site-footer__nav a { color: var(--color-text); }
.site-footer__small { margin: 0; font-size: var(--text-xs); color: var(--color-text-subtle); }
@media (min-width: 48em) { .site-footer__in { grid-template-columns: 1fr 1.4fr; } .site-footer__small { grid-column: 1 / -1; } }
/* --------------------------------------------------------------- sections */
.section { padding: var(--space-section) 0; }
.section--alt { background: var(--color-bg-alt); }
.section__head { display: grid; gap: var(--space-3); margin-bottom: var(--space-10); max-width: 46rem; }
.section__head p { margin: 0; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.cards--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.cards--fleet { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.cards p { margin: 0; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.checklist li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; }
.checklist .vb-icon { color: var(--color-success); margin-top: 0.15rem; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* --------------------------------------------------------------- hero */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--color-bg-sky) 0%, var(--color-bg) 78%); padding: clamp(2rem, 6vw, 4.5rem) 0 clamp(2rem, 5vw, 4rem); }
.hero::before { content: ""; position: absolute; width: clamp(18rem, 42vw, 34rem); aspect-ratio: 1; right: -8%; top: -30%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--color-glow) 85%, transparent) 0%, transparent 68%); opacity: 0.75; pointer-events: none; }
.hero__in { position: relative; display: grid; gap: var(--space-8); align-items: center; }
.hero__horizon { position: absolute; left: 0; right: 0; bottom: 0; }
.hero__text { display: grid; gap: var(--space-5); }
.hero__text > * { margin: 0; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__van { display: grid; gap: var(--space-3); min-width: 0; }
@media (min-width: 64em) { .hero__van { margin-right: calc(-1 * var(--space-6)); } }
.hero__live { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.hero__live .vb-icon { color: var(--color-text-subtle); }
.hero__from { font-weight: var(--weight-medium); color: var(--color-text); }
@media (min-width: 64em) { .hero__in { grid-template-columns: 5fr 7fr; } }
/* The hero photo (src/worker/hero.ts): where the 3D stage was, in its frames (4:3 on phones, 16:10
from 40em) and its radius. The photo covers the frame; its object-position (--focus and
--focus-wide, from hero-photo.json) keeps the van and the worker in it. It always wears its
label, top left, like the vision images. */
.hero-photo { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--radius-xl); overflow: hidden; background: var(--color-bg-alt); box-shadow: var(--shadow-md); isolation: isolate; }
@media (min-width: 40em) { .hero-photo { aspect-ratio: 16 / 10; } }
.hero-photo picture, .hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-photo img { object-position: var(--focus, 50% 50%); }
@media (min-width: 40em) { .hero-photo img { object-position: var(--focus-wide, var(--focus, 50% 50%)); } }
/* A hairline over the photo's edge, so its pale sky never melts into the hero's first light. */
.hero-photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--van-stage-edge) 70%, transparent); pointer-events: none; }
.hero-photo .img-tag { max-width: calc(100% - 2 * var(--space-3)); }
@media (max-width: 24em) { .hero-photo .img-tag { font-size: var(--text-2xs); } } /* one line at 320 px */
/* "See the van in 3D and choose your spot": under the photo, the way to the van page. */
.hero__3d { justify-self: start; max-width: 100%; }
.hero__3d .vb-icon { flex: none; }
/* The 3D stage. The drawn van is the poster until the 3D van is ready, then they cross-fade.
Light always: a white sky warming to first light at the horizon and sand at the van's feet,
a low sunset glow behind the van (its white edges read against it), a sand floor and a soft
contact shadow (drawn by the 3D scene). A hairline keeps the stage whole on the hero wash. */
.stage { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-xl); overflow: hidden; background: linear-gradient(180deg, var(--van-stage-top) 0%, var(--van-stage-mid) 55%, var(--van-stage-bottom) 100%); box-shadow: inset 0 0 0 1px var(--van-stage-edge); isolation: isolate; }
/* the sand the van stands on */
.stage::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: 6%; height: 22%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--van-ground) 85%, transparent), transparent); z-index: -1; pointer-events: none; }
.stage--hero { aspect-ratio: 4 / 3; }
@media (min-width: 40em) { .stage, .stage--hero { aspect-ratio: 16 / 10; } }
/* the low sun behind the van: brightest at the roof line, so the white roof and ends read against it */
.stage__glow { position: absolute; inset: 0 -6% 24%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--van-stage-glow) 100%, transparent) 0%, color-mix(in srgb, var(--van-stage-glow) 70%, transparent) 40%, color-mix(in srgb, var(--color-glow) 30%, transparent) 72%, transparent 100%); z-index: -1; pointer-events: none; }
.stage__poster { position: absolute; inset: 6% 4% 12%; display: grid; place-items: center; transition: opacity var(--duration-slower) var(--ease-out); }
.stage__poster svg { width: 100%; height: 100%; }
.stage__canvas { position: absolute; inset: 0; touch-action: pan-y; cursor: grab; opacity: 0; transition: opacity var(--duration-slower) var(--ease-in-out); }
.stage.is-3d .stage__canvas { opacity: 1; }
/* Until the 3D is in (and after it is lost) taps belong to the drawing. */
.stage:not(.is-3d) .stage__canvas { pointer-events: none; cursor: auto; }
.stage__canvas[hidden] { display: none; }
.stage__canvas.is-pointing { cursor: pointer; }
.stage__canvas.is-dragging { cursor: grabbing; }
.stage__canvas canvas { display: block; width: 100% !important; height: 100% !important; }
.stage.is-3d .stage__poster { opacity: 0; pointer-events: none; transition: opacity var(--duration-slower) var(--ease-in-out); }
.stage__status { position: absolute; left: 50%; top: var(--space-3); transform: translateX(-50%); max-width: calc(100% - 2 * var(--space-3)); margin: 0; display: none; align-items: center; gap: var(--space-2); padding: var(--space-1-5) var(--space-3); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-surface) 80%, transparent); border: 1px solid var(--color-border); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.stage__status .vb-icon { width: 1rem; height: 1rem; color: var(--color-text-subtle); }
/* One line, always: '.vb-base p' sets text-wrap: pretty, which would let the pill wrap over the van. */
.vb-base p.stage__status { white-space: nowrap; text-wrap: nowrap; }
/* The pill only says "loading" once a script is actually loading the van. */
.js .stage__status { display: inline-flex; }
.js .stage.is-fallback .stage__status, .js .stage__status[hidden] { display: none; }
/* Save-Data or a slow connection: the drawing stays until the visitor asks for the 3D van. */
.stage__load { position: absolute; left: 50%; top: var(--space-3); transform: translateX(-50%); max-width: calc(100% - 2 * var(--space-3)); white-space: nowrap; box-shadow: var(--shadow-sm); }
.stage__load .vb-icon { width: 1rem; height: 1rem; }
.stage__load:active { transform: translateX(-50%) translateY(1px); }
.stage__load[hidden] { display: none; }
.stage__fallback { position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-3); margin: 0; font-size: var(--text-sm); text-align: center; color: var(--color-text-muted); }
/* --------------------------------------------------------------- why */
.why__in { display: grid; gap: var(--space-6); }
@media (min-width: 64em) { .why__in { grid-template-columns: 5fr 7fr; align-items: start; } }
/* --------------------------------------------------------------- vision: today and tomorrow */
.vb-base .vision__title { color: var(--color-accent-text); font-size: var(--text-4xl); }
.img-tag { position: absolute; left: var(--space-3); top: var(--space-3); z-index: 2; display: inline-flex; align-items: center; gap: var(--space-1-5); padding: 0.3rem 0.65rem; border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-text); font-size: var(--text-xs); font-weight: var(--weight-semibold); box-shadow: var(--shadow-sm); }
.img-tag .vb-icon { width: 0.95rem; height: 0.95rem; }
.img-tag--real .vb-icon { color: var(--color-text-muted); }
.img-tag--vision .vb-icon { color: var(--color-accent-text); }
.img-place { position: absolute; left: var(--space-3); bottom: var(--space-3); z-index: 2; padding: 0.25rem 0.6rem; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-surface) 90%, transparent); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text); }
.compare { margin: 0 0 var(--space-8); display: grid; gap: var(--space-2); }
.compare__frame { position: relative; display: grid; gap: var(--space-3); --pos: 50%; }
.compare__side { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg-alt); aspect-ratio: 4 / 3; }
.compare__side picture, .compare__side img { width: 100%; height: 100%; object-fit: cover; }
.compare__caption { font-size: var(--text-sm); color: var(--color-text-subtle); }
.compare:not(.is-slider) .compare__caption { display: none; }
@media (min-width: 40em) { .compare:not(.is-slider) .compare__frame { grid-template-columns: 1fr 1fr; } }
.compare.is-slider .compare__frame { display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-xl); overflow: hidden; touch-action: pan-y; cursor: ew-resize; }
@media (min-width: 64em) { .compare.is-slider .compare__frame { aspect-ratio: 16 / 9; } }
.compare.is-slider .compare__side { position: absolute; inset: 0; border-radius: 0; aspect-ratio: auto; }
.compare.is-slider .compare__side--today { z-index: 1; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare.is-slider .compare__side--tomorrow .img-tag { left: auto; right: var(--space-3); }
.compare__range { position: absolute; inset: auto 0 0 0; width: 100%; height: 100%; z-index: 4; margin: 0; opacity: 0; cursor: ew-resize; }
.compare__range:focus-visible + .compare__handle::after { box-shadow: var(--shadow-focus); }
.compare__handle::before { content: ""; position: absolute; top: 50%; left: 50%; z-index: 1; width: 0.9rem; height: 0.55rem; transform: translate(-50%, -50%); border-left: 2px solid var(--color-primary); border-right: 2px solid var(--color-primary); }
.compare__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 3; width: 3px; margin-left: -1.5px; background: var(--color-surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-text) 20%, transparent); pointer-events: none; }
.compare__handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 2.75rem; height: 2.75rem; transform: translate(-50%, -50%); border-radius: 50%; background: var(--color-surface); border: 1px solid var(--color-primary); box-shadow: var(--shadow-md); }
.vision__featured { display: grid; gap: var(--space-4); margin-bottom: var(--space-4); }
@media (min-width: 48em) { .vision__featured { grid-template-columns: repeat(3, 1fr); } }
.vision-img { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg-alt); aspect-ratio: 16 / 9; }
.vision-img picture, .vision-img img { width: 100%; height: 100%; object-fit: cover; }
.vision__strip { overflow-x: auto; scroll-snap-type: x mandatory; border-radius: var(--radius-lg); outline: none; padding-bottom: var(--space-2); }
.vision__strip:focus-visible { box-shadow: var(--shadow-focus); }
.vision__strip ul { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: min(80vw, 22rem); gap: var(--space-3); }
.vision__strip li { scroll-snap-align: start; }
/* From tablet width the gallery is a grid on the same gap as the featured row: every image in view. */
@media (min-width: 48em) {
.vision__strip { overflow: visible; padding-bottom: 0; }
.vision__strip ul { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
}
@media (min-width: 64em) { .vision__strip ul { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.vision__note { display: flex; gap: var(--space-2); align-items: flex-start; margin: var(--space-4) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); max-width: var(--measure); }
.vision__note .vb-icon { color: var(--color-accent-text); margin-top: 0.1rem; }
/* --------------------------------------------------------------- who, how, fleet */
.who__card { position: relative; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.who__card:hover { border-color: var(--color-border-soft); box-shadow: var(--shadow-md); }
.who__card h3 { font-size: var(--text-xl); font-family: var(--font-sans); font-weight: var(--weight-semibold); }
.vb-base .who__link { color: var(--color-heading); text-decoration: none; }
.who__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.who__link:focus-visible::after { box-shadow: var(--shadow-focus); }
.who__go { color: var(--color-accent-text); }
.who__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-pill); background: var(--color-accent-soft); color: var(--color-accent-text); }
.who__icon .vb-icon { width: 1.4rem; height: 1.4rem; }
.steps { list-style: none; margin: 0 0 var(--space-8); padding: 0; display: grid; gap: var(--space-5); }
@media (min-width: 48em) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps__item { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); }
.steps__item h3 { font-size: var(--text-xl); }
.steps__item p { margin: 0; color: var(--color-text-muted); }
/* the step number on the whispered sunset, in heading ink (7.82 to 8.70:1) */
.steps__n { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--whisper-sunset); color: var(--color-heading); font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-md); box-shadow: inset 0 0 0 1px rgb(var(--shadow-color) / 0.06); }
.fleet__card { gap: var(--space-2); }
.fleet__drawing { margin: calc(-1 * var(--space-2)) 0 var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: linear-gradient(180deg, var(--van-stage-top) 0%, var(--van-stage-mid) 55%, var(--van-stage-bottom) 100%); }
.fleet__drawing svg { display: block; width: 100%; height: auto; max-height: 9rem; }
.fleet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.fleet__count { font-weight: var(--weight-semibold); }
.fleet__from { color: var(--color-accent-text); font-weight: var(--weight-semibold); }
.fleet__card .vb-btn { justify-self: start; margin-top: var(--space-2); }
/* --------------------------------------------------------------- prices, deal, next, faq */
.prices__in { display: grid; gap: var(--space-8); }
@media (min-width: 64em) { .prices__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.prices__intro { display: grid; gap: var(--space-4); }
.prices__intro p, .prices__intro h3 { margin: 0; }
.prices__from { display: grid; gap: var(--space-1); margin: 0; }
.prices__vat { font-size: var(--text-sm); color: var(--color-text-muted); font-weight: var(--weight-semibold); }
.prices__table { display: grid; gap: var(--space-4); min-width: 0; }
.prices__table p { margin: 0; }
/* Three columns that fit a phone: the size cell carries the centimetres and the squares, headers wrap. */
.price-table caption { text-align: left; font-weight: var(--weight-bold); padding-bottom: var(--space-2); }
.price-table thead th { vertical-align: bottom; }
.price-table thead th.num { max-width: 9rem; }
.price-table tbody th { text-transform: none; letter-spacing: 0; font-size: var(--text-sm); color: var(--color-text); font-weight: var(--weight-semibold); padding: var(--space-3); border-bottom: 1px solid var(--color-divider); }
.price-table__size { display: block; white-space: nowrap; }
.price-table__dims { display: block; margin-top: var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--color-text-muted); }
.price-table__size .muted, .price-table__dims > span { white-space: nowrap; }
.price-table td { white-space: nowrap; }
.price-table td.price-table__none { white-space: normal; font-size: var(--text-xs); min-width: 4.5rem; }
.price-table__only { display: block; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); white-space: normal; }
@media (max-width: 30em) {
.price-table thead th, .price-table tbody th, .price-table td { padding-left: var(--space-2); padding-right: var(--space-2); }
.price-table thead th { letter-spacing: 0; }
.price-table__size { white-space: normal; }
.price-table td.price-table__none { min-width: 3.5rem; }
}
.size-glyph { display: inline-block; vertical-align: -0.15em; margin-right: var(--space-2); width: calc(var(--w) * 0.55rem); height: calc(var(--h) * 0.55rem); border-radius: 2px; background: repeating-linear-gradient(90deg, var(--cell-selected-bg) 0 calc(0.55rem - 1px), var(--color-bg) 0 0.55rem), var(--cell-selected-bg); background-size: 0.55rem 100%; box-shadow: inset 0 0 0 1px var(--cell-selected-border); }
.deal__in { display: grid; gap: var(--space-6); }
.deal__in > * { max-width: 52rem; }
.next__in { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 48em) { .next__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.next__photo { margin: 0; display: grid; gap: var(--space-2); }
.next__photo picture { display: block; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg-alt); aspect-ratio: 4 / 3; }
.next__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.next__photo figcaption { display: flex; gap: var(--space-1-5); align-items: center; font-size: var(--text-xs); color: var(--color-text-muted); }
.next__photo figcaption .vb-icon { width: 0.95rem; height: 0.95rem; color: var(--color-accent-text); }
.next__in h2 { margin-bottom: var(--space-3); }
.faq__in { display: grid; gap: var(--space-6); }
.faq__in > * { max-width: 52rem; }
/* --------------------------------------------------------------- call to action band (first light) */
/* Light like the rest of the site: warm white fading to first light, the 1 px sunset horizon on its
top edge and the gradient mark low on the right, exactly as drawn but small: a sun on the horizon,
not a billboard (on white and Areia only, palette.md). */
.cta-band { background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-sky) 100%); color: var(--color-text); padding: var(--space-section) 0; position: relative; overflow: hidden; margin-bottom: calc(-1 * var(--space-section)); }
.cta-band__horizon { position: absolute; left: 0; right: 0; top: 0; }
.cta-band__sun { position: absolute; right: max(var(--space-gutter), calc((100% - var(--container)) / 2 + var(--space-gutter))); bottom: 0; width: clamp(7rem, 16vw, 12.5rem); height: auto; pointer-events: none; }
.cta-band__in { position: relative; display: grid; gap: var(--space-5); justify-items: start; }
.cta-band__in > * { max-width: 40rem; }
.cta-band__logo { display: block; width: auto; height: 1.9rem; }
@media (max-width: 47.99em) { .cta-band { padding-bottom: calc(var(--space-section) + 7rem); } }
.cta-band h2 { font-size: var(--text-4xl); }
.cta-band p { margin: 0; color: var(--color-text-muted); font-size: var(--text-lg); }
/* --------------------------------------------------------------- van page */
.vanpage { padding: var(--space-8) 0 var(--space-16); }
.vanpage__head { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); }
.vanpage__head > * { margin: 0; }
.vanpage__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.vanpage__model { color: var(--color-text-muted); font-size: var(--text-sm); }
.vanpage__stats { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.vanpage__stats li { padding: 0.3rem 0.75rem; border-radius: var(--radius-pill); background: var(--color-surface-sunken); color: var(--color-text); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.vanpage__grid { display: grid; gap: var(--space-8); }
.vanpage__main { display: grid; gap: var(--space-4); min-width: 0; align-content: start; }
.vanpage__side { display: none; }
@media (min-width: 64em) {
.vanpage__grid { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; }
.vanpage__side { display: block; position: sticky; top: calc(var(--header-height) + var(--space-4)); }
}
.vb-base .price-card__title { font-size: var(--text-xl); font-family: var(--font-sans); font-weight: var(--weight-semibold); }
.vb-price-card [data-price-body] { display: grid; gap: var(--space-3); }
.vb-price-card [data-price-body] > p { margin: 0; }
.vb-price--from { font-size: var(--text-xl); }
.vb-pricebar__amount.is-from { font-size: var(--text-md); font-family: var(--font-sans); font-weight: var(--weight-semibold); }
.vb-lines--first { padding-top: var(--space-3); border-top: 1px dashed var(--color-divider); }
.viewer-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1); }
.viewer-controls[hidden] { display: none; }
/* The 3D model's licence credit (CC BY 4.0): small, under the viewer. */
.vb-base .model-credit { margin: calc(-1 * var(--space-2)) 0 0; text-align: center; font-size: var(--text-2xs); line-height: 1.5; color: var(--color-text-subtle); }
.model-credit[hidden] { display: none; }
.model-credit a, .site-footer__credit a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 2px; }
.model-credit a:hover, .site-footer__credit a:hover { color: var(--color-link); }
.planner { display: grid; gap: var(--space-6); padding-top: var(--space-4); }
.vb-base .planner__title { font-size: var(--text-3xl); }
.planner__step { display: grid; gap: var(--space-3); }
.planner__step > p { margin: 0; }
.vb-base .planner__q { font-family: var(--font-sans); font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.planner__q span { font-weight: var(--weight-medium); color: var(--color-text-muted); margin-left: var(--space-1); }
.planner__kbd { display: none; }
@media (hover: hover) and (pointer: fine) { .planner__kbd { display: inline; } }
.board { position: relative; border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); padding: var(--space-2); overflow: hidden; }
.board__face { position: relative; width: 100%; }
.board__face[hidden] { display: none; }
.board__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.board__grid { position: absolute; display: grid; grid-template-columns: repeat(var(--cols, 6), 1fr); grid-template-rows: repeat(var(--rows, 3), 1fr); gap: var(--cell-gap); outline: none; }
.board__grid:focus-visible { box-shadow: var(--shadow-focus); }
.board__row { display: contents; }
.board__grid .vb-cell { width: auto; height: auto; min-width: 0; min-height: 0; }
.board__grid .vb-cell[data-state="covered"] { background: transparent; border: 0; }
.board__grid .vb-cell[data-state="free"]:hover { background: var(--cell-hover-bg); border: 2px solid var(--cell-hover-border); }
.board__grid .vb-cell:focus-visible { outline: none; box-shadow: var(--shadow-focus); z-index: 5; position: relative; }
.board__grid .vb-cell[data-state="covered"]:focus-visible { z-index: 6; }
.board__grid .vb-placement { position: relative; z-index: 2; pointer-events: none; min-width: 0; min-height: 0; overflow: hidden; }
.board__grid .vb-placement--ghost { z-index: 3; }
.board__grid .vb-placement--selected { z-index: 4; }
.board__grid .vb-placement--reserved { background: var(--cell-reserved-bg); display: block; padding: 2%; }
.board__grid .vb-placement--reserved img { object-fit: contain; }
.board__grid .vb-placement--sold img { width: 100%; height: 100%; object-fit: contain; }
.board__grid .vb-placement--sold { font-size: var(--text-2xs); overflow-wrap: anywhere; }
.pick { display: grid; justify-items: center; gap: 0.1rem; }
.pick small { font-size: var(--text-2xs); font-weight: var(--weight-semibold); }
.pick .vb-icon { width: 1.1rem; height: 1.1rem; }
.planner__legend .vb-cell { flex: none; }
.planner__legend b { color: var(--color-text); font-weight: var(--weight-semibold); }
.planner__legend .vb-cell[data-state="reserved"] { background: url("/brand/favicon.svg?v=063fec2cda66") center / 72% no-repeat, var(--cell-reserved-bg); }
.planner__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.planner__msg { margin: 0; min-height: 1.5em; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-accent-text); }
/* A planner note: the design system's toast, placed by script where the visitor is looking
(src/client/note.ts sets its top, left and width). One line of text, no title. */
.planner-note { position: fixed; z-index: var(--z-toast); top: 0; left: 0; align-items: center; }
.planner-note > .vb-icon { margin-top: 0; }
.planner-note__text { color: var(--color-text); font-weight: var(--weight-medium); line-height: 1.4; }
.planner-note .vb-toast__close { margin: -0.25rem -0.25rem -0.25rem 0; }
.planner-note.is-leaving { pointer-events: none; }
.pricebar-wrap { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky); }
.vb-base.page-van { padding-bottom: calc(var(--pricebar-h, 6.5rem) + var(--space-4) + env(safe-area-inset-bottom, 0px)); }
.vanpage { padding-bottom: var(--space-8); }
@media (min-width: 64em) { .pricebar-wrap { display: none; } .vb-base.page-van { padding-bottom: 0; } .vanpage { padding-bottom: var(--space-16); } }
[data-planner-root]:not(.is-js) .pricebar-wrap { display: none; }
a.vb-btn[aria-disabled="true"] { pointer-events: auto; }
/* --------------------------------------------------------------- reserve */
.reserve { padding: var(--space-8) var(--space-gutter) var(--space-16); }
.reserve__head { display: grid; gap: var(--space-3); margin-bottom: var(--space-8); max-width: 44rem; }
.reserve__head > * { margin: 0; }
.reserve__grid { display: grid; gap: var(--space-8); }
@media (min-width: 64em) {
.reserve__grid { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; }
.reserve__summary { order: 2; position: sticky; top: calc(var(--header-height) + var(--space-4)); }
}
.summary-card h2 { font-size: var(--text-xl); font-family: var(--font-sans); font-weight: var(--weight-semibold); }
.summary-card p { margin: 0; }
.reserve__form { display: grid; gap: var(--space-6); max-width: 40rem; }
.fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.fieldset legend { padding: 0; margin-bottom: var(--space-3); font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-medium); color: var(--color-heading); }
.vb-drop { position: relative; cursor: pointer; }
.vb-drop__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.vb-drop:focus-within { box-shadow: var(--shadow-focus); }
.vb-drop.has-file { border-style: solid; border-color: var(--color-success); }
.vb-alert ul { margin: var(--space-2) 0 0; }
.vb-alert p { margin: 0; }
.vb-alert[hidden] { display: none; }
/* Our promise (9 Nov 2026): the highlighted note beside the first payment (van page, reserve, pay, status, home). */
.vb-alert.promise-note p + p { margin-top: var(--space-1-5); }
.vb-alert.promise-note .promise-note__title { font-size: var(--text-md); }
.vb-alert.promise-note .promise-note__extra { font-weight: var(--weight-semibold); }
/* On a phone the price card is the sticky bar, so the note sits under the planner instead. */
@media (min-width: 64em) { .vanpage__promise { display: none; } }
.reserve__note { display: flex; gap: var(--space-2); align-items: center; justify-content: center; }
.vb-base .price-card__sub { margin: var(--space-2) 0 0; font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--weight-semibold); }
/* --------------------------------------------------------------- status, pay, paid, errors */
.status, .pay, .paid, .errorpage { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding-top: var(--space-10); padding-bottom: var(--space-10); align-content: start; }
.status > *, .pay > *, .paid > *, .errorpage > * { margin: 0; }
.status-summary, .status-pay { display: grid; gap: var(--space-4); }
.status-pay p { margin: 0; }
.vb-card p { margin: 0; }
.vb-steps { margin: 0; }
.paid__sun img, .errorpage__mark img { width: 9rem; height: auto; }
.paid__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.paid [data-paid-state] { display: grid; gap: var(--space-5); justify-items: start; }
.paid [data-paid-state] > * { margin: 0; }
.paid [data-paid-state][hidden] { display: none; }
.status-resend { margin: 0; }
.status-visual { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 36em) { .status-visual { grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); align-items: start; } }
.status-visual figure { margin: 0; display: grid; gap: var(--space-2); }
.status-visual figcaption { font-size: var(--text-sm); color: var(--color-text-muted); }
.status-visual__logo { max-width: 12rem; }
.status-visual__tile { display: grid; place-items: center; aspect-ratio: 1; padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-logo-plate); border: 1px solid var(--color-border); }
/* An SVG with only a viewBox has no size of its own: give it the tile. */
.status-visual__tile img { display: block; width: 100%; height: 100%; object-fit: contain; }
.status-visual__tile p { color: var(--color-logo-plate-ink); }
.status-visual__drawing { padding: var(--space-3); border-radius: var(--radius-md); background: linear-gradient(180deg, var(--van-stage-top) 0%, var(--van-stage-mid) 55%, var(--van-stage-bottom) 100%); border: 1px solid var(--color-border); }
.status-visual__drawing svg { display: block; width: 100%; height: auto; }
.pay .vb-card { display: grid; gap: var(--space-4); }
/* --------------------------------------------------------------- legal and FAQ */
.legal { padding-top: var(--space-10); padding-bottom: var(--space-10); }
.legal__head { display: grid; gap: var(--space-3); max-width: var(--container-text); margin-bottom: var(--space-8); }
.legal__head > * { margin: 0; }
.legal__grid { display: grid; gap: var(--space-8); }
@media (min-width: 64em) { .legal__grid { grid-template-columns: 16rem minmax(0, var(--container-text)); } .legal__nav { position: sticky; top: calc(var(--header-height) + var(--space-4)); align-self: start; } }
.legal__toc summary { cursor: pointer; font-weight: var(--weight-bold); padding: var(--space-2) 0; }
.legal__toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); font-size: var(--text-sm); }
/* WCAG 2.5.8: each link a target at least 24 px tall. */
.legal__toc a { display: block; min-height: 1.5rem; padding-block: 0.25rem; }
.legal__summary { margin-bottom: var(--space-8); background: var(--color-bg-alt); }
.legal__summary h2 { font-size: var(--text-2xl); }
.vb-base .legal__full { font-size: var(--text-3xl); margin: var(--space-4) 0 var(--space-2); }
.legal__section { display: grid; gap: var(--space-3); padding-top: var(--space-6); scroll-margin-top: calc(var(--header-height) + var(--space-4)); }
.legal__section h2 { font-size: var(--text-2xl); }
.legal__section ul { margin: 0; display: grid; gap: var(--space-2); }
.faqpage__list { max-width: 52rem; }
.faqpage__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
/* --------------------------------------------------------------- admin (English, desktop first) */
.admin .admin__top { border-bottom: 1px solid var(--color-divider); background: var(--color-surface); }
.admin__top-in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); min-height: 3.5rem; }
.admin__brand { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; color: var(--color-text-muted); font-weight: var(--weight-bold); }
.admin__brand img { height: 1.4rem; width: auto; }
.admin__nav { display: flex; flex-wrap: wrap; gap: var(--space-1); flex: 1; }
.admin__nav a { padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); text-decoration: none; color: var(--color-text); font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.admin__nav a:hover { background: var(--color-surface-sunken); }
.admin__main { display: grid; gap: var(--space-6); padding-top: var(--space-6); padding-bottom: var(--space-16); align-content: start; }
.admin__main > * { margin: 0; }
.admin__cols { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: start; }
.admin__row { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.admin__narrow { max-width: 40rem; }
.admin__logo-tile { display: grid; place-items: center; min-height: 10rem; padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-logo-plate); border: 1px solid var(--color-border); }
.admin__logo { max-width: 100%; max-height: 14rem; }
.admin__logo--small { max-height: 3rem; vertical-align: middle; background: var(--color-logo-plate); }
.admin__log ul { list-style: none; padding: 0; display: grid; gap: var(--space-1); font-size: var(--text-sm); }
.admin__alerts ul { list-style: none; padding: 0; display: grid; gap: var(--space-1); font-size: var(--text-sm); }
.admin__log time { color: var(--color-text-subtle); }
.admin__login { display: grid; gap: var(--space-6); padding-top: var(--space-16); align-content: start; }
.admin__login > img { height: 1.8rem; width: auto; }
.admin__login .vb-card { display: grid; gap: var(--space-4); align-content: start; }
.vb-card { align-content: start; }
.filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 var(--space-3); border-radius: var(--radius-pill); border: 1px solid var(--color-border); text-decoration: none; color: var(--color-text); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.chip.is-on { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.vb-lines dd { overflow-wrap: anywhere; white-space: normal; }
@media print {
.site-header, .site-footer, .pricebar-wrap, .stage, .viewer-controls { display: none; }
}