/* * ElboMotors — design tokens * * Every colour, font, size and timing in this theme resolves to a variable * defined here. Change the brand in this file and nowhere else. * * Contrast is not decorative here: the palette below was checked against * WCAG 2.1 AA and the ratios are recorded next to each value. The dark base * with a hot accent is exactly the combination that usually fails, so do not * change --c-accent without re-checking it against --c-bg and against black. */ /* ------------------------------------------------------------------ fonts */ @font-face { font-family: 'Oswald'; src: url('../fonts/oswald-latin.woff2') format('woff2'); font-weight: 200 700; /* variable font: one file, all weights */ font-style: normal; font-display: swap; 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: 'Oswald'; src: url('../fonts/oswald-latin-ext.woff2') format('woff2'); font-weight: 200 700; font-style: normal; font-display: swap; 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: 'Inter'; src: url('../fonts/inter-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; 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: 'Inter'; src: url('../fonts/inter-latin-ext.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; 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; } :root { /* --------------------------------------------------------------- colour */ --c-bg: #0E0E10; /* page ground */ --c-surface: #17171B; /* cards, panels */ --c-surface-2: #1F1F25; /* raised: table stripes, inputs */ --c-line: #2A2A32; /* hairlines */ --c-line-strong: #3A3A45; --c-text: #F5F5F3; /* 17.7:1 on bg — body and headings */ --c-muted: #A8A8AF; /* 8.2:1 on bg — meta, captions */ --c-faint: #74747E; /* 3.6:1 — decorative only, never body text */ /* * Rood uit het logo, gekozen door de eigenaar op 29-08-2026. Doorgerekend: * #BE1622 haalt 3,7:1 op de donkere grond, dus alleen voor vlakken, nooit * voor tekst. #F0454F haalt 5,3:1 en is daarom de kleur voor links en * kickers. Op een rood vlak staat lichte tekst (5,3:1), geen donkere. */ --c-accent: #BE1622; /* 3.7:1 on bg — vlakken en knoppen */ --c-accent-text: #F0454F; /* 5.3:1 on bg — accent-coloured text/links */ --c-accent-ink: #F5F5F3; /* what sits ON an accent fill */ --c-accent-dim: #8E1019; --c-ink-text: #BE1622; /* tekst op een accent-ink vlak */ --c-ok: #4ADE80; --c-warn: #FBBF24; --c-danger: #F87171; /* Light inversions, for the rare pale section. */ --c-inverse-bg: #F5F5F3; --c-inverse-text: #0E0E10; /* * Hero scrim. Two gradients, not one: a vertical fade alone leaves the * kicker sitting on whatever the photo happens to be doing up there, and * a light garage door behind white text fails contrast outright. The * horizontal pass guarantees the text column is dark whatever the image. */ --c-overlay: linear-gradient(to right, rgb(14 14 16 / 0.92) 0%, rgb(14 14 16 / 0.75) 38%, rgb(14 14 16 / 0.15) 75%, rgb(14 14 16 / 0.05) 100%), linear-gradient(to top, rgb(14 14 16 / 0.90) 0%, rgb(14 14 16 / 0.45) 55%, rgb(14 14 16 / 0.55) 100%); /* ----------------------------------------------------------- typography */ --font-display: 'Oswald', 'Arial Narrow', system-ui, sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Fluid scale, 360px -> 1440px viewport. */ --fs-kicker: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: clamp(1.0625rem, 0.99rem + 0.32vw, 1.1875rem); --fs-h4: clamp(1.125rem, 1.04rem + 0.37vw, 1.375rem); --fs-h3: clamp(1.375rem, 1.19rem + 0.83vw, 1.875rem); --fs-h2: clamp(1.875rem, 1.44rem + 1.94vw, 3rem); --fs-h1: clamp(2.5rem, 1.66rem + 3.7vw, 4.5rem); --fs-hero: clamp(3rem, 1.5rem + 6.7vw, 7rem); --lh-tight: 1.02; --lh-heading: 1.1; --lh-body: 1.65; --ls-kicker: 0.18em; --ls-display: -0.01em; --fw-body: 400; --fw-medium: 500; --fw-semibold: 600; --fw-display: 700; /* ---------------------------------------------------------- spacing/size */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; --section-y: clamp(3.5rem, 2rem + 6vw, 7rem); --wrap: 1280px; --wrap-narrow: 760px; --gutter: clamp(1rem, 0.5rem + 2.2vw, 2.5rem); --radius: 2px; /* motorsport: sharp, not friendly */ --radius-lg: 3px; --diagonal: 2.5rem; /* height of the slanted section edge */ /* -------------------------------------------------------------- effects */ --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.35); --shadow-lg: 0 2px 4px rgb(0 0 0 / 0.4), 0 24px 60px rgb(0 0 0 / 0.5); --dur-fast: 120ms; --dur: 220ms; --dur-slow: 500ms; --ease: cubic-bezier(0.2, 0.6, 0.2, 1); --z-header: 100; --z-menu: 110; --z-modal: 200; } /* * The design is dark by intent, not by preference — it is the brand. It is * therefore NOT flipped under prefers-color-scheme. What is honoured is * prefers-reduced-motion (see base.css) and forced-colors. */