/* ============================================================================ JABALI — Design Tokens · Helvetis Single source of truth. Exact values. Direction: "Cinematic field" (media-led and quiet: full-bleed footage carries the page, short bold statements punctuate it, chrome is deleted rather than decorated, and dense data lives in compact technical blocks). Consumed by styles.css. Do not hard-code values in components — use these. ============================================================================ */ /* Type — self-hosted (P1-03). No external request, no IP leak to Google (nFADP). latin + latin-ext subsets (EN/FR/ES); files in resources/fonts, copied to /assets/fonts by bin/build.php. Primary weights are preloaded in layout.php. */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/jetbrains-mono-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/jetbrains-mono-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/jetbrains-mono-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/jetbrains-mono-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/jetbrains-mono-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/jetbrains-mono-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Saira'; font-style: normal; font-weight: 300; font-display: swap; src: url('/assets/fonts/saira-300-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Saira'; font-style: normal; font-weight: 300; font-display: swap; src: url('/assets/fonts/saira-300-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Saira'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/saira-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Saira'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/saira-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Saira'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/saira-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Saira'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/saira-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Saira'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/saira-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Saira'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/saira-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Saira'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/saira-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Saira'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/saira-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Nunito (variable, wght 200-1000) — the Helvetis logo face. Used ONLY for the jabali / helvetis wordmarks (header, footer). Self-hosted (OFL), added 2026-07-16 owner review. */ @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 200 1000; font-display: swap; src: url('/assets/fonts/nunito-var-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 200 1000; font-display: swap; src: url('/assets/fonts/nunito-var-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ------------------------------------------------------------------ COLOR */ /* Surfaces (near-black, cool). The page black IS the frame for all media. */ --cc-bg: #050607; /* page background */ --cc-panel: #0a0b0d; /* technical block / FORM panel (forms only) */ --cc-panel-2: #101216; /* input fill / chip fill / hover lift */ /* Foreground (ink on dark) — opacity steps off #f3f5f7. Measured against --cc-bg (#050607); --cc-panel differs by <0.05. Every step that carries TEXT clears 4.5:1, because the label tier runs at 9-11px where the AA threshold is least forgiving. Hierarchy below --cc-ink-body is held by size, weight and tracking, not by dimming text under the legibility floor. */ --cc-ink: #f3f5f7; /* primary text 18.6:1 */ --cc-ink-2: rgba(243,245,247,0.70); /* secondary / ledes 9.0:1 */ --cc-ink-body: rgba(243,245,247,0.60); /* BODY inside blocks 6.8:1 */ --cc-ink-3: rgba(243,245,247,0.55); /* muted / labels 5.8:1 */ --cc-ink-4: rgba(243,245,247,0.50); /* faint / placeholder 5.0:1 */ /* NON-TEXT only: decorative marks and hairline hovers. Never put text on this; at 4.2:1 it fails AA for body copy, which is exactly why it is separate. */ --cc-mark: rgba(243,245,247,0.45); /* Hairlines (structural). Blocks are a TOP RULE, never a box. */ --cc-line: rgba(243,245,247,0.08); /* faint hairline (table rows, footer) */ --cc-line-soft: rgba(243,245,247,0.05); /* faintest */ --cc-line-strong: rgba(243,245,247,0.20); /* block top rules, table head, inputs */ /* Brand accent — Helvetis signal red. <5% ink coverage per screen. */ --acc: #d42e27; /* primary: CTA, active, markers */ --acc-hi: #ff5b52; /* lifted: small text/markers on dark (AA) */ --acc-hover: #e3463f; /* button hover */ --acc-press: #b8261f; /* button active */ --acc-tint: rgba(212,46,39,0.16); /* focus halo / wash */ --acc-line: rgba(212,46,39,0.42); /* accent hairline */ --btn-fg: #ffffff; /* text on filled accent (AA on --acc) */ /* Status */ --err: #ff7a6e; /* form error text on dark */ --ok: var(--acc);/* success uses brand red */ /* Power-source coding (spec variant badges): battery vs fuel */ --power-electric: #7fd8a4; /* battery electric — green */ --power-fuel: #f0b26b; /* hybrid fuel — amber */ /* ------------------------------------------------------------------- TYPE */ --font-display: "Saira", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --font-brand: "Nunito", var(--font-display); /* wordmarks only */ /* Display treatment (statements). --font-mega kept as a hook for a condensed alternate; production ships standard-width Saira. */ --font-mega: var(--font-display); --mega-weight: 700; /* Hero promise line. Full ink (2026-07 bolder pass): dimming the em to 62% whispered the value proposition; the two lines now differ by structure and entrance, not by fading the half that matters. Brand red was measured here and rejected: 1.76:1 worst-case over the video's blown-out pixels. */ --hero-em: var(--cc-ink); /* Weights (Saira) */ --fw-light: 300; /* large display only */ --fw-regular: 400; /* body */ --fw-medium: 500; /* mono labels, eyebrows */ --fw-semibold: 600; /* UI + headings */ --fw-bold: 700; /* statements / emphasis */ /* Font sizes — the named scale from the style tile (artboard 3d). Desktop (1440) reference px in comments; each clamps down for mobile (390). */ --fs-mono: 0.6875rem; /* 11px — MONO: eyebrows, labels, units, telemetry */ --fs-12: 0.75rem; /* 12px — chips, link-arrows, table units */ --fs-14: 0.875rem; /* 14px — BODY: block body */ --fs-15: 0.9375rem; /* 15px — buttons / FAQ answer */ --fs-16: 1rem; /* 16px — base / inputs / table values */ --fs-18: 1.125rem; /* 18px — large body */ --fs-body: var(--fs-14); --fs-lede: clamp(1.0625rem, 1.25vw, 1.375rem); /* 17 → 22 LEDE */ --fs-block: clamp(1.1875rem, 0.9vw, 1.25rem); /* 19 → 20 BLOCK */ --fs-data: clamp(1.625rem, 2.4vw, 2.125rem); /* 26 → 34 DATA */ --fs-tile: clamp(1.5rem, 2.4vw, 2.125rem); /* 24 → 34 TILE */ --fs-h3: clamp(1.5rem, 2.2vw, 2.5rem); /* 24 → 40 (subpage prose) */ --fs-h2-xs: clamp(1.75rem, 3.3vw, 3rem); /* 28 → 48 (H2 gate) */ --fs-h2-sm: clamp(2rem, 3.9vw, 3.5rem); /* 32 → 56 (H2 small) */ --fs-h2-md: clamp(2.125rem, 4.4vw, 4rem); /* 34 → 64 (H2 data) */ --fs-h2: clamp(2.375rem, 5vw, 4.5rem); /* 38 → 72 H2 */ --fs-hero: clamp(3.125rem, 7.8vw, 7rem); /* 50 → 112 HERO */ --fs-mega: clamp(2.875rem, 13.2vw, 11.875rem); /* 46 → 190 MEGA */ --fs-mega-sm: clamp(2.5rem, 10.4vw, 9.375rem); /* 40 → 150 MEGA (long statements) */ /* Line height */ --lh-mega: 0.84; --lh-hero: 0.92; --lh-display: 0.98; /* H2 */ --lh-data: 1; --lh-tile: 1.05; --lh-block: 1.2; --lh-heading: 1.12; --lh-ui: 1.45; --lh-body: 1.6; --lh-lede: 1.65; --lh-prose: 1.68; /* Letter spacing */ --tr-mega: -0.025em; --tr-hero: -0.04em; --tr-display: -0.035em; /* H2 */ --tr-tile: -0.02em; --tr-heading: -0.015em; --tr-body: 0; --tr-eyebrow: 0.24em; /* mono uppercase eyebrows */ --tr-label: 0.16em; /* mono labels / section numbers */ --tr-label-2: 0.12em; /* ---------------------------------------------------------------- SPACING */ /* 4-point base grid */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 28px; --s-8: 32px; --s-9: 40px; --s-10: 48px; --s-11: 56px; --s-12: 64px; --s-13: 80px; --s-14: 96px; --s-15: 110px; --s-16: 128px; /* Section rhythm: plain black between sections, never a hairline separator. Content sections carry the bottom gap; a section following a full-bleed media band re-opens with --section-y-top. */ --section-y: 180px; /* between content sections (desktop) */ --section-y-top: 200px; /* re-entry after a full-bleed band */ --pad: 64px; /* section horizontal padding (desktop) */ /* ------------------------------------------------------------------- GRID */ /* No frame rails: the page is full-bleed and content is constrained per block. */ --measure-wide: 1312px; /* widest content block (= 1440 mockup - 2 x 64 pad) */ /* One gutter for every full-width element (sections, header, hero, bands, footer), so their left edges line up at any viewport: --pad until the content would exceed --measure-wide, then it grows and centres. */ --gutter: max(var(--pad), calc(50% - var(--measure-wide) / 2)); --measure: 920px; /* text-led block (centered headers, FAQ) */ --measure-form: calc(var(--measure-lead) + 96px); /* quotation panel = lead column + 48px pad */ --measure-lead: 40rem; /* quote step-1 fields: two compact columns, not 900px */ --nav-h: 70px; /* header height (floats transparent over media) */ --band-h: 900px; /* full-viewport media band */ --band-h-short: 860px; /* field / close bands */ /* ------------------------------------------------------------------ RADII */ --r-sharp: 2px; /* buttons, inputs, panels — precision corners */ --r-pill: 999px; /* chips, power tags, mobile floating CTA, dots */ /* ---------------------------------------------------------------- BORDERS */ --bw-hair: 1px; /* all structural hairlines */ --bw-strong: 1px; /* inputs (colour change, not width, signals focus) */ /* ---------------------------------------------------------------- SHADOWS */ /* The dark UI is shadow-light by design; elevation reads via hairlines. */ --shadow-1: 0 1px 2px rgba(0,0,0,0.35); /* raised panel */ --shadow-pop: 0 12px 40px rgba(0,0,0,0.55); /* mobile menu / popover */ --shadow-focus: 0 0 0 1px var(--acc), 0 0 0 4px var(--acc-tint); /* keyboard focus ring */ --shadow-pill: 0 12px 32px -8px rgba(212,46,39,0.55); /* mobile floating CTA */ --shadow-display: 0 2px 16px rgba(0,0,0,0.55); /* display type over media */ /* ------------------------------------------------------------------ SCRIM */ /* THE RULE: every text-over-media zone holds >= 4.5:1 (>= 3:1 for MEGA/H1). Hero is a layered stack (open plate + local wells), not a dual vertical ramp; --scrim-band / --scrim-page still use the older full-frame recipe. */ --scrim-hero: linear-gradient(180deg, rgba(5,6,7,0.46) 0%, rgba(5,6,7,0.14) 12%, rgba(5,6,7,0.00) 22%), linear-gradient(180deg, rgba(5,6,7,0.00) 50%, rgba(5,6,7,0.18) 68%, rgba(5,6,7,0.48) 86%, rgba(5,6,7,0.64) 100%), radial-gradient(ellipse 78% 58% at 16% 94%, rgba(5,6,7,0.72) 0%, rgba(5,6,7,0.32) 46%, rgba(5,6,7,0.00) 74%), radial-gradient(ellipse 52% 42% at 88% 96%, rgba(5,6,7,0.58) 0%, rgba(5,6,7,0.00) 70%), radial-gradient(ellipse 88% 78% at 50% 40%, rgba(5,6,7,0.00) 40%, rgba(5,6,7,0.22) 100%), linear-gradient(180deg, rgba(5,6,7,0.10) 0%, rgba(5,6,7,0.04) 36%, rgba(5,6,7,0.10) 100%); --scrim-hero-mobile: linear-gradient(180deg, rgba(5,6,7,0.50) 0%, rgba(5,6,7,0.18) 12%, rgba(5,6,7,0.00) 22%), linear-gradient(180deg, rgba(5,6,7,0.00) 34%, rgba(5,6,7,0.24) 54%, rgba(5,6,7,0.52) 76%, rgba(5,6,7,0.68) 100%), radial-gradient(ellipse 120% 70% at 40% 94%, rgba(5,6,7,0.62) 0%, rgba(5,6,7,0.28) 50%, rgba(5,6,7,0.00) 78%), radial-gradient(ellipse 90% 80% at 50% 38%, rgba(5,6,7,0.00) 34%, rgba(5,6,7,0.26) 100%), linear-gradient(180deg, rgba(5,6,7,0.14) 0%, rgba(5,6,7,0.08) 40%, rgba(5,6,7,0.14) 100%); --scrim-band: linear-gradient(180deg, rgba(5,6,7,0.85) 0%, rgba(5,6,7,0.55) 18%, rgba(5,6,7,0.72) 46%, rgba(5,6,7,0.75) 74%, rgba(5,6,7,0.92) 100%); --scrim-tile: linear-gradient(180deg, rgba(5,6,7,0.05) 18%, rgba(5,6,7,0.62) 46%, rgba(5,6,7,0.90) 68%, rgba(5,6,7,0.96) 100%); --scrim-page: linear-gradient(180deg, rgba(5,6,7,0.50) 0%, rgba(5,6,7,0.10) 30%, rgba(5,6,7,0.70) 62%, rgba(5,6,7,0.92) 100%); /* ----------------------------------------------------------------- MOTION */ --dur-1: 120ms; /* micro: hover colour */ --dur-2: 160ms; /* control state */ --dur-3: 240ms; /* accordion, step transition */ --dur-4: 600ms; /* scroll reveal */ --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); /* entrances */ --ease-io: cubic-bezier(0.4, 0, 0.2, 1); /* state changes */ } /* Tablet / mobile padding + rhythm overrides live in styles.css breakpoints, but the source values are declared here for reference: @media (max-width:1100px) { --pad: 40px; --section-y: 120px; --section-y-top: 130px } @media (max-width:720px) { --pad: 20px; --section-y: 90px; --section-y-top: 96px } */