/* ========================================================================== LORQEN — VANTAGE Design tokens -------------------------------------------------------------------------- THE CONCEPT MARQUE is the car standing still: a body under a workshop light, panels screwed down, a small engraved plate saying who made it. It is an object you walk around. VANTAGE is the same car at seven in the evening, now under the client's own colours: near-black body, champagne gold pulled straight from the logo, ivory interior, a single oxblood accent kept for the cellar door. Nothing in this theme is screwed down. There are no plates and no rivets. The page is built from full-bleed bands of light that pass over you, a single gold horizon that draws itself across the width of every section as you reach it, and image plates that travel more slowly than the words beside them, the way the far hills do through a window. Where Marque's fingerprint is a rivet, Vantage's is DIFFERENTIAL SPEED. Nothing on this page arrives at the same moment or moves at the same rate, and that — not another border treatment — is what makes it read as expensive. It is the direct answer to "all the themes are more or less similar with no transitions". WHAT MAKES IT UNMISTAKABLE · The horizon. One gold rule per section, drawn left to right in step with the scroll rather than on a timer. It is never decoration; it is the readout of where you are. · Depth. Media travels at roughly four-fifths of page speed inside an over-scaled frame, so every image has parallax without a single image ever showing its edge. · The headlamp. Section grounds lift and fall in luminance continuously as they cross the screen, driven by --fx-p. Nothing is a flat colour for the whole of its time on screen. · Long travel and a long curve. Blocks come 64px on a 1.05s expo-out. Marque moves 14px in 0.4s. They are not the same site. · INSTRUMENT SERIF for display — a high-contrast modern with a real italic — over INTER TIGHT. Marque is inscriptional Roman capitals over a screen serif. The two share a palette and nothing else. TYPE INSTRUMENT SERIF — display and the accent word. One weight, enormous contrast, and a true italic that does the work other themes spend a second colour on. It is drawn for exactly this: very large, very few words. INTER TIGHT — headings below display size, body, leads, labels, interface. Tight enough to set at label sizes without looking like a form, wide enough to read at length. CONTRAST (WCAG 2.1 — client palette, recomputed 2026-09-19 against the Release 1.5 gold #DD9C2C, which supersedes #C9A227 everywhere.) Ivory #F6F2E9 on Black #0B0A08 — 17.71:1 ✓ AAA Gold #DD9C2C on Black #0B0A08 — 8.33:1 ✓ AAA Gold-Light #F1C77E on Black #0B0A08 — 12.54:1 ✓ AAA Gold-Fill #E8B254 on Black #0B0A08 — 10.30:1 ✓ AAA Sage #C9C2AE on Black #0B0A08 — 11.13:1 ✓ AAA Moss #9C9583 on Black #0B0A08 — 6.63:1 ✓ AA Black #0B0A08 on Ivory #F6F2E9 — 17.71:1 ✓ AAA Charcoal #3A352C on Ivory #F6F2E9 — 10.89:1 ✓ AAA Gold-Dark #8C6117 on Ivory #F6F2E9 — 4.96:1 ✓ AA Ivory #F6F2E9 on Wine #6E1E2B — 9.98:1 ✓ AAA Gold FAILS on Ivory (2.12:1) and Gold-Light FAILS on Ivory (1.42:1) — both would read as a wash of near-invisible yellow on cream. Gold is never small text or an icon on a light ground; Gold-Dark takes that job, the same way Gold-Light takes the hover/highlight job on a dark one. The package's rim highlight #FBE0B1 is artwork-only and is never a UI colour. ========================================================================== */ :root { /* ---- The body — the client's own brand colours, pulled from the logo -- Primary Black, Gold (+ Light/Dark), Ivory, Charcoal, Wine. Variable NAMES below are unchanged from the original Vantage palette (green, pewter, brass, oxblood...) so every rule elsewhere in this theme that already reads var(--brass) or var(--ink) recolours automatically -- only the values change here. */ --green: #0B0A08; --green-2: #17140F; --green-3: #100D09; --green-4: #050402; --pewter: #F6F2E9; --pewter-2: #FBF9F4; --pewter-3: #ECE6D6; --pewter-4: #DED5BE; --ink: #0B0A08; --slate: #3A352C; --stone: #6B6355; --sage: #C9C2AE; --moss: #9C9583; /* Release 1.5 gold. The package ships one value per ground, and mixing two of them is what reads as a mistake rather than as two deliberate colours -- so these are the only four, and nothing else in the theme writes a gold literal. --brass-lt is the TEXT hover on a dark ground and --brass-fill the BUTTON-FILL hover, which is the split the build spec makes (#F1C77E on links, #E8B254 under the pointer on a filled control) and the reason there are two rather than one. */ --brass: #DD9C2C; /* on dark grounds — the mark's own value */ --brass-lt: #F1C77E; /* text / link hover on dark */ --brass-fill: #E8B254; /* filled-button hover on dark */ --bronze: #8C6117; /* gold on ivory — 4.96:1 */ --bronze-2: #6E4B12; /* its hover, still 7.1:1 on ivory */ --bronze-3: #9A6A19; /* gold on pure white, kept for surfaces that use it */ --oxblood: #6E1E2B; --oxblood-2: #8A2739; --oxblood-3: #4A141D; /* ---- Light, not metal --------------------------------------------------- Marque's shadows describe a plate sitting on a body. Vantage's describe a pool of light on a moving surface, so they are wider, softer and never have the inset highlight that reads as a machined edge. */ --lift-sm: 0 6px 18px rgba(3, 2, 1, 0.30); --lift: 0 18px 44px rgba(3, 2, 1, 0.38); --lift-lg: 0 40px 96px rgba(3, 2, 1, 0.50); --beam: linear-gradient(90deg, transparent 0%, rgba(246,242,233,0.55) 42%, rgba(221,156,44,0.9) 58%, transparent 100%); --sheen: linear-gradient(115deg, transparent 30%, rgba(246,242,233,0.16) 48%, transparent 62%); /* ---- Roles -------------------------------------------------------------- */ --bg: var(--green); --bg-raised: var(--green-2); --surface: var(--green-2); --surface-sunk: var(--green-3); --text: var(--pewter); --text-muted: var(--sage); --text-dim: var(--moss); --accent: var(--brass); --accent-hover: var(--brass-lt); --mark: var(--brass); --line: #211E19; --line-soft: #191712; --line-accent: #362F22; --line-strong: var(--brass); --on-accent: var(--on-gold); /* warm dark bronze -- reads better on brass than flat near-black */ --on-gold: #2B1D07; --btn-fill: var(--brass); --btn-fill-text:var(--on-accent); --btn-fill-hover: var(--brass-fill); --focus: var(--brass); /* ---- Type --------------------------------------------------------------- */ --font-display: "Instrument Serif", "Playfair Display", Georgia, "Times New Roman", serif; --font-body: "Inter Tight", "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --font-ui: "Inter Tight", "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; /* Instrument Serif is a single weight drawn for size, so the display scale runs larger and tighter here than in any other theme in the set. */ --fs-mega: clamp(2.6rem, 1.1rem + 6.4vw, 6.4rem); --fs-display: clamp(2.1rem, 1.1rem + 4.2vw, 4.6rem); --fs-h1: clamp(1.85rem, 1.15rem + 2.9vw, 3.5rem); --fs-h2: clamp(1.45rem, 1.12rem + 1.65vw, 2.3rem); --fs-h3: clamp(1.14rem, 1.02rem + 0.6vw, 1.46rem); --fs-h4: clamp(1rem, 0.96rem + 0.22vw, 1.12rem); --fs-lead: clamp(1.05rem, 0.97rem + 0.44vw, 1.26rem); --fs-body: 1.0625rem; --fs-sm: 0.9375rem; --fs-xs: 0.8125rem; --fs-label: 0.6875rem; --fs-index: 0.75rem; --fs-num: clamp(2.8rem, 1.2rem + 6vw, 6rem); /* Instrument Serif's f, j and y reach well below the declared descent, and the display sizes here are the largest in the set — 1.02 is the floor that keeps two stacked mega lines from touching. */ --lh-tight: 1.02; --lh-snug: 1.1; --lh-head: 1.28; --lh-body: 1.72; --lh-lead: 1.62; --ls-mega: -0.018em; --ls-display:-0.014em; --ls-head: -0.008em; --ls-label: 0.24em; --ls-index: 0.2em; --ls-button: 0.14em; --ls-brand: 0.3em; --ls-body: -0.002em; /* ---- Space -------------------------------------------------------------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1.125rem; --sp-5: 1.625rem; --sp-6: 2.25rem; --sp-7: 3.25rem; --sp-8: 4.75rem; --sp-9: 6.75rem; --sp-10: 9rem; --sp-11: 11.5rem; --container: clamp(1400px, 90vw, 1800px); --container-narrow: 860px; --container-wide: clamp(1760px, 92vw, 1920px); --gutter: clamp(1.5rem, 1rem + 2.5vw, 4rem); --section-y: clamp(4.5rem, 2rem + 8vw, 9.5rem); --measure: 68ch; --measure-lead: 58ch; /* Release 1.5 build spec: a 64px lockup in a 96px bar, which leaves the 16px of vertical clear space the spec draws and keeps the mark above the 48px floor below which the dimensional cut goes flat. The closed bar is 76px so the lockup lands on exactly 48px rather than under it — that floor, not a taste for a slimmer bar, is what sets this number. The phone values are in the media query at the foot of signature.css, with the rest of the spec. */ --header-h: 96px; --header-h-stuck: 76px; --hair: 1px; /* ---- Legacy motion tokens ---------------------------------------------- The shared foundation and the component core still read these. They are retuned to Vantage's curve so that even the parts of the site fx.css does not touch move on the same clock. */ --dur-fast: 0.28s; --dur: 0.62s; --dur-slow: 0.95s; --dur-rule: 1.15s; --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-rule: cubic-bezier(0.62, 0, 0.2, 1); --enter-y: 64px; } /* ========================================================================== CORE KNOBS The shared component and page cores are entirely token-driven. These are the values they read for shape, rule weight, plate proportion and the few states that are not part of the main palette. ========================================================================== */ :root { --mark-radius: 999px; /* Marque's marks are square. These are round. */ --mark-w: 7px; --mark-h: 7px; --rule-w: 1px; /* Marque is 2px everywhere. Vantage is a line. */ --rule-w-lg: 2px; --btn-border-w: 1px; /* Compact plates: each ratio trimmed shorter (wider number) than its original so image boxes take less vertical room across the site -- hero images are untouched, they don't use this token. */ --plate-ratio: 16 / 8; --plate-ratio-card: 16 / 9; --plate-ratio-tall: 4 / 4.4; --plate-border-w: 1px; --plate-art: none; --shadow-c: rgba(3, 2, 1, 0.42); --focus-ring: rgba(221, 156, 44, 0.24); --error: #C0555F; --error-light: #E9AAB0; --error-ring: rgba(192, 85, 95, 0.2); --overlay: rgba(4, 3, 2, 0.94); --overlay-2: rgba(4, 3, 2, 0.78); --radius: 10px; --radius-lg: 16px; } /* ========================================================================== FX KNOBS Everything fx.css does, dialled to this theme. Vantage is the FAST, LONG one: the biggest travel in the set, the longest curve, the deepest parallax, and the only theme whose grounds change luminance continuously as they cross the screen. ========================================================================== */ :root { --fx-ease: cubic-bezier(0.16, 1, 0.3, 1); /* expo-out, hard */ --fx-ease-soft: cubic-bezier(0.33, 1, 0.68, 1); --fx-ease-in: cubic-bezier(0.7, 0, 0.84, 0); --fx-ease-rule: cubic-bezier(0.62, 0, 0.2, 1); --fx-dur-in: 1.05s; --fx-dur-fast: 0.3s; --fx-dur-hover: 0.55s; --fx-line-dur: 1.25s; --fx-rule-dur: 1.3s; --fx-stagger: 105ms; --fx-line-stagger:130ms; --fx-travel: 64px; --fx-travel-x: 78px; --fx-scale-in: 1; --fx-blur-in: 0px; --fx-rot-in: 0deg; --fx-word-travel: 0.72em; /* The headline lines come in on a diagonal — brought along by the same movement that carries the car, not lifted straight up a shaft. */ --fx-line-x: -0.16em; --fx-line-skew: 2.2deg; --fx-curtain-bg: var(--green-4); --fx-curtain-dur: 0.86s; --fx-curtain-out: 0.44s; --fx-curtain-ease: cubic-bezier(0.76, 0, 0.24, 1); --fx-mark-color: var(--brass); --fx-mark-size: 84px; /* The monogram is drawn as paths, not as live type, so it works as a CSS mask — which is what lets the curtain tint it with a token instead of shipping a second colourway of the file. */ --fx-mark-src: url("../../../../brand/final/monogram/lorqen-monogram-gold.svg"); --fx-parallax-scale: 1.22; /* headroom for the deepest drift in the set */ --fx-zoom: 1.07; --fx-lift: -8px; --fx-btn-sweep: var(--brass-fill); --fx-btn-sweep-text: var(--on-accent); --fx-underline-w: 1px; --fx-underline-drop: -0.3em; --fx-ring-size: 30px; }