/* ============================================================ v2.css — WHAT IS DIFFERENT ON index_2.html ============================================================ Loaded by index_2.html only, last, after tokens.css and main.css. index.html does not load it, so nothing in here can reach the approved page. THE ANSWER TO "do we need a second design system": no, and we should not have one. The scale lives in custom properties, and a custom property can be redefined for one subtree. `body.v2` is that subtree, so redefining a token here changes it for every consumer inside version two and for nothing else. One line instead of a second 10,000-line stylesheet that starts drifting the day it is copied. Verified: html only sets -webkit-text-size-adjust; every token-driven rule in main.css hangs off body or below, so a .v2 override reaches all of them. TWO RULES FOR WRITING IN HERE 1. If a size is a token, change the TOKEN in the block below. Every consumer follows in one move, which is the whole reason the tokens exist. 2. If a size is hard-coded in main.css — several display sizes are their own clamp() — override that component under `.v2` in the second block. Never edit main.css for a v2-only change; it is one file serving both pages. IF v2 IS APPROVED: the first block is promoted into tokens.css verbatim, the second block's rules are folded into their own components, this file is deleted and index_2.html becomes index.html. Keeping the deltas in one small readable file is what makes that a morning's work rather than a diff archaeology exercise. ============================================================ */ /* ---- 1. THE SCALE --------------------------------------------------- The tokens as they stand today, listed so the available handles are visible without opening tokens.css. Uncomment and change what moves; leave the rest alone rather than restating it, so this file reads as a list of DIFFERENCES and not as a second copy of the system. TYPE --t-count clamp(5rem, 12vw, 12rem) the big figures --t-claim clamp(2.75rem, 5.6vw, 5.25rem) hero --t-h1 clamp(1.625rem, 3.2vw, 3.25rem) section headlines --t-lede clamp(1rem, 1.1vw, 1.0625rem) --t-body 1rem --t-micro 0.875rem the 14px floor --t-eyebrow 0.9375rem SPACE 4 8 12 16 24 32 48 64 96 128 192 256 --sp-1 … --sp-12 MEASURE --container 1440px --shell 1580px --maxw 1700px --gutter clamp(24px, 4vw, 64px) */ .v2 { /* GENEVA: CMC's v2 ground override removed — the ground comes from tokens.css (the badge's wood-dark). Kept, it would put #15100C over every Geneva value, because .v2 outranks :root. */ } /* ---- 2. THE SIZES THAT ARE NOT TOKENS ------------------------------- Some display sizes in main.css carry their own clamp() rather than a token — the section headlines mostly. They cannot be moved from the block above, so they get a scoped rule here instead. Written as `.v2 .thing`, always. A bare `.thing` in this file would still only load on index_2, but the class is what makes the intent readable at a glance and what survives the file being merged later. AND THAT IS MOST OF THEM. Surveyed at 1440 by overriding the tokens and watching what moved: --t-lede is the ONLY one the sections actually follow. Every display size on the page carries its own clamp(): .brk__title 60px .fin__title 63px .about__title 58px .locs__title 58px .warranty__title 56px .sell__title 52px .inv__title 49px .story__title 49px .svc__title 49px .karma__title 49px .ig__title 43px .revs__title 37px .stat__n 130px So a "make the headlines bigger" instruction is thirteen rules here, not one token. Worth knowing before quoting the change, and worth fixing properly if v2 is approved — those thirteen clamps are a type scale that was never written down as one. e.g. .v2 .warranty__title { font-size: clamp(2rem, 3.4vw, 3rem); } */ /* ---- 2. THE BLUE THAT IS NOT THE GROUND ----------------------------- The ground was four tokens. The blue LIGHT is a separate system, and it is what a client is actually pointing at: a black page lit blue still reads blue. Confirmed by test — swapping only the tokens left the glow under the active record blue. Every rule below keeps its geometry and its alphas and changes only its hue. The lighting design is not being redone, it is being taken off the blue. The new light is the page's own ink, #F3EEE6, pulled down in value — warm-neutral, so it agrees with the ground it now sits on and with the type standing in it. */ /* The room the cut-outs stand in. */ .v2 .showcase, .v2 .fin__showcase { background: radial-gradient(125% 118% at 34% 44%, transparent 34%, rgba(4, 4, 3, 0.5) 82%, rgba(3, 3, 2, 0.72) 100%), radial-gradient(24% 27% at 31% 56%, rgba(240, 237, 231, 0.115) 0%, rgba(190, 186, 179, 0.05) 54%, transparent 76%), radial-gradient(58% 62% at 38% 37%, rgba(190, 186, 179, 0.10) 0%, rgba(146, 143, 137, 0.045) 44%, transparent 78%), radial-gradient(46% 34% at 21% 62%, rgba(168, 164, 157, 0.07) 0%, rgba(128, 125, 120, 0.03) 50%, transparent 80%), radial-gradient(30% 44% at 52% 46%, rgba(196, 192, 185, 0.055) 0%, transparent 74%), radial-gradient(18% 16% at 24% 28%, rgba(220, 216, 209, 0.05) 0%, transparent 72%), linear-gradient(180deg, #151311 0%, #0E0D0B 48%, #080706 100%); } /* The "Just in" plate. RED, on Alex's call 2026-08-17. It was a dark plate that had to be found; in the accent it is the first thing read in the frame, which is what a status mark is for. THE ACCENT BUDGET SURVIVES THIS, and that was the thing to check before agreeing. Featured Inventory carried no red at all — the keyword field's action and the index's closing CTA are both the outlined variant, deliberately, because the hero owns the page's one Accent Action. This pill is not an action: pointer-events is none, it states a fact about the car behind it. So it adds a second red ROLE to the page rather than a second red button competing with SEARCH INVENTORY, and at roughly 110 x 40px in a 654 x 790 panel it is well inside the 5% budget. Nothing here is carried by hue alone — the pill says the words. The gradient construction is kept rather than flattened, mirrored into the accent: #BC0F0D to #940C0A across the same 133deg, shallow enough to read as a plate catching the light rather than as a gradient effect. The ban on gradient fills is a ban on gradient BUTTONS, and this is a non-interactive mark that already had this construction. */ .v2 .justin { background: linear-gradient(133deg, #BC0F0D 0%, #A50D0B 52%, #940C0A 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.24); } /* The record being read. The edge and the lift still carry the state, so nothing here depends on hue alone — which is the point: this cue was blue-only and it did not have to be. */ /* Dimmed, on Alex's call. 0.42 was doing the job of a selection ring on a page whose selections are made of one hairline going slightly brighter than its neighbours. 0.24 against the resting 0.10 is still a clear step — the eye reads the RATIO, not the absolute — and the tint and the light underneath carry the rest of the state. */ .v2 .rec.is-active, .v2 .fin__rec.is-lead { border-color: rgba(240, 237, 231, 0.24); background: rgba(243, 238, 230, 0.04); } .v2 .rec.is-active .rec__pill { background: rgba(240, 237, 231, 0.10); /* The last one. A sweep of every computed property on the rendered page found this survivor hiding in box-shadow rather than in a colour — which is why the sweep was run instead of trusting the grep. */ box-shadow: inset 0 0 0 1px rgba(240, 237, 231, 0.14); } /* The light under it, and the same light under the big figures. */ /* A WEDGE, NOT A LOZENGE. Alex's shape: the light stands highest at the bottom-left corner and narrows away to the right, rather than sitting as a symmetrical pool under the middle of the record. Two things make that, because one gradient cannot vary its height along its own width. The radial is anchored at 6% of the strip and given more vertical reach than horizontal, so its brightest part is the left corner and it climbs there. A horizontal mask then takes the whole thing away toward the right, which is what turns a rounded falloff into a taper. The strip is taller than it was — 74px against 40 — because a wedge needs somewhere to be tall, and it starts further left: 4% rather than 8%, with the shift Alex asked for on top. */ /* MIRRORED, on Alex's call 2026-08-17. Every value in this block and in the motion block below is the same number reflected about the card's vertical centre — the wedge now stands highest at the bottom-RIGHT corner and tapers away to the left. Nothing about its shape, reach or timing changes; only which corner it is anchored to. Mirrored by hand rather than with scale: -1, because the strip is already using scale to open out on hover and a negative x factor there would fight the animation instead of composing with it. */ .v2 .rec::before { inset: auto 4% -1px 8%; height: 74px; background: radial-gradient(72% 132% at 94% 100%, rgba(243, 238, 230, 0.30) 0%, rgba(196, 192, 185, 0.13) 36%, rgba(150, 146, 140, 0.05) 62%, transparent 82%); /* THE MASK FADES IN AT ITS LEFT EDGE TOO, and that is the gap Alex marked. The radial is anchored at 6% of this strip, so at the strip's own left edge the light is already near its brightest — and the mask was opaque from 0%, which meant the wedge began with a hard vertical cut against the card. A bright line down the inside of the border, ending where the strip ends. Fading the first 12% closes it: the light now starts at nothing, comes up to full just inside the card, and tapers away to the right as before. The wedge is unchanged; only its leading edge stops being a straight line. */ -webkit-mask-image: linear-gradient(to left, transparent 0%, rgba(0,0,0,0.55) 6%, #000 14%, rgba(0,0,0,0.58) 44%, transparent 82%); mask-image: linear-gradient(to left, transparent 0%, rgba(0,0,0,0.55) 6%, #000 14%, rgba(0,0,0,0.58) 44%, transparent 82%); } .v2 .stat__fig::after { background: radial-gradient(50% 100% at 50% 100%, rgba(243, 238, 230, 0.8) 0%, rgba(196, 192, 185, 0.3) 34%, transparent 74%); } /* The stage's arrows. */ .v2 .stage__arrow { background: rgba(30, 28, 25, 0.52); box-shadow: inset 0 1px 0 rgba(240, 237, 231, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.28); } .v2 .stage__arrow:hover { background: rgba(46, 44, 40, 0.66); } /* The bloom behind About and Reviews. Same five lobes, same uneven outline, same mask — warm smoke instead of dirty blue. */ .v2 [data-bloom]::before { background: radial-gradient(52% 58% at 34% 38%, rgba(128, 124, 116, 0.50), transparent 66%), radial-gradient(40% 34% at 72% 24%, rgba(104, 101, 95, 0.44), transparent 70%), radial-gradient(32% 46% at 58% 80%, rgba(92, 89, 84, 0.40), transparent 68%), radial-gradient(26% 22% at 18% 70%, rgba(140, 136, 128, 0.32), transparent 72%), radial-gradient(22% 30% at 84% 58%, rgba(100, 97, 91, 0.28), transparent 74%); } /* ---- 3. ONE THING THE SWEEP FOUND THAT IS NOT ABOUT COLOUR TEMPERATURE The Financing eyebrow is --accent-deep, and its ground is dark, not bone. Measured on the composited render with the text hidden: 2.60:1 against a 4.5 floor at 15px. It fails on the approved page too — 2.51 there — so this is a pre-existing defect that the black change merely walked past, not one it caused. It is my error from the eyebrow standardisation: --accent-deep was given to Warranty and Financing together as "the bone grounds", and Financing's card is a dark photograph. Red is a fill-and-rule colour on a dark ground; it cannot carry 15px of text. So this eyebrow joins the other dark-ground ones and takes --ink-eyebrow. FIXED HERE ONLY. index.html carries the same failure and is the approved page, so patching it is Alex's call rather than something to do quietly under a colour change. */ .v2 .fin__label:not(#x) { color: var(--ink-eyebrow); } /* ---- 4. THE KEYWORD SEARCH ------------------------------------------ Above the tiles, under the paragraph. Client request 2026-08-17. ON A HAIRLINE, NOT IN A BOX. The page's registers — Service, Locations, the footer — are all built on hairlines, and a bordered pill here would have been a control drawn as an object on a page that draws them as lines. It also keeps this visibly subordinate to the hero's finder, which is the point: that one is the chapter's action, this one is a shortcut for someone who already knows the model name. The line lifts to full ink on focus-within, so the field answers the keyboard as clearly as it answers the pointer. */ .v2 .invsearch { display: flex; align-items: center; gap: var(--sp-4); max-inline-size: 46rem; margin-block: clamp(var(--sp-6), 2.6vw, var(--sp-7)) clamp(var(--sp-7), 3.4vw, var(--sp-8)); padding-block-end: var(--sp-4); border-block-end: 1px solid var(--rule); transition: border-color var(--dur-2) var(--ease-out); } .v2 .invsearch:focus-within { border-block-end-color: var(--ink); } .v2 .invsearch__icon { flex: none; color: var(--ink-3); } .v2 .invsearch__field { flex: 1 1 auto; min-inline-size: 0; appearance: none; border: 0; background: none; padding: 0; font-family: var(--font-body); font-size: var(--t-lede); line-height: 1.4; color: var(--ink); } /* --ink-3 measures 4.9:1 on this ground, so the placeholder clears the 4.5 floor as text rather than being decoration you have to guess at. */ .v2 .invsearch__field::placeholder { color: var(--ink-3); opacity: 1; } /* The field's own outline is redundant — the rule under it already moves on focus-within — but only once that is guaranteed to be visible. */ .v2 .invsearch__field:focus { outline: none; } .v2 .invsearch__field::-webkit-search-cancel-button { filter: invert(1); opacity: 0.5; } .v2 .invsearch__go { flex: none; } @media (max-width: 620px) { /* The action drops under the field rather than squeezing it: a search input narrower than the phrase it holds is worse than a second row. */ .v2 .invsearch { flex-wrap: wrap; } .v2 .invsearch__field { flex-basis: calc(100% - 17px - var(--sp-4)); } .v2 .invsearch__go { margin-block-start: var(--sp-5); margin-inline-start: auto; } } /* It joins the section's existing staircase as an action — the same quiet settle the CTAs use — rather than arriving with the tiles. */ .reveal-armed [data-reveal] .v2 .invsearch, .v2 .reveal-armed [data-reveal] .invsearch { opacity: 0; translate: 0 10px; } .v2 .invsearch { transition: opacity var(--rv-cta) var(--ease-out), translate var(--rv-cta) var(--ease-out), border-color var(--dur-2) var(--ease-out); } .reveal-armed [data-reveal].is-revealed .invsearch { opacity: 1; translate: 0 0; } html.reveal-armed [data-reveal]:not(.is-revealed) .invsearch { opacity: 0; translate: 0 10px; } /* ---- 5. THE LIGHT ARRIVES SHORT AND LENGTHENS ---------------------- Client request, refined: on hover the glow under the record starts SHORT near the right edge and lengthens as it travels toward the middle — not a light sliding across at a fixed size, a light opening out. SCALE FROM A RIGHT ANCHOR, which is what makes it read as lengthening rather than as growing in both directions. transform-origin is the right edge, so the strip stretches leftward from where it starts; the constant shift puts that start at roughly a fifth in from the record's right edge and lands the finished light just past centre, which is the travel Alex marked — mirrored 2026-08-17. Scale and translate only — both compositor work, both inside the project's motion rule. Nothing here animates geometry. 760ms and ease-out, the page's slowest interval, because a light opening across a surface is the one thing here that should not look quick. It rides in on the same activation that fades it up, so the record lights and the light arrives as one gesture. */ .v2 .rec::before { transform-origin: right center; translate: 4% 0; scale: 0.42 1; transition: opacity var(--dur-3) var(--ease-out), scale var(--dur-4) var(--ease-out); } .v2 .rec.is-active::before { scale: 1 1; } /* The designed static path: no growth, the light simply appears at the length it would have reached. */ @media (prefers-reduced-motion: reduce) { .v2 .rec::before, .v2 .rec.is-active::before { scale: 1 1; transition: none; } } /* ---- 6. THE PINK HOVER GOES GREY ------------------------------------ The warranty card's glyph tile took the accent at 10% on hover, and 10% of #BC0F0D over the bone ground composites to a pale pink — a colour this palette does not have and did not intend. It was written as "the tile warms", which is what a translucent red does on paper and not what it does here. Neutral now: the same lift, made of the ground's own ink. The mark still goes to --accent-deep, so red is still spent in these cards exactly once and the hover keeps its colour event. */ .v2 .wcard:hover .wcard__ico { background: rgba(26, 20, 14, 0.09); } /* ---- 7. THE OUTLINE CTA GETS MORE BODY ------------------------------ --rule-strong is a hairline built for dividing, and the secondary action was wearing it: at rest the pill read as an outline someone had forgotten to finish. 1.5px and a brighter value give it a real edge without turning it into a second filled button — it is still the quiet control, it is just no longer a faint one. Hover still goes to full ink, so the state change survives the stronger resting edge. */ .v2 .btn--line { box-shadow: inset 0 0 0 1.5px rgba(243, 238, 230, 0.42); } .v2 .btn--line:hover, .v2 .btn--line.is-hover { box-shadow: inset 0 0 0 1.5px var(--ink); } /* On the bone bands the same move, in that ground's ink. */ .v2 .on-bone .btn--line { box-shadow: inset 0 0 0 1.5px rgba(26, 20, 14, 0.42); } .v2 .on-bone .btn--line:hover, .v2 .on-bone .btn--line.is-hover { box-shadow: inset 0 0 0 1.5px var(--bone-ink); } /* ---- 8. THE FINANCING FRAME GOES DARKER AND LOSES ITS BLUE ---------- The garage photograph carries a cool cast in its shadows and across the right-hand wall, and against a warm black ground that cast is the most blue thing left on the page. Graded, not replaced. saturate() takes 30% of the chroma out, and because the cast is LOW-chroma to begin with it loses far more of its presence than the Mustang's yellow or the Ducati's red do — those are saturated enough to survive the same cut and stay the subject. brightness and contrast then put the frame into the darker phase Alex asked for: the blacks close up, the lit surfaces hold. A filter rather than a re-export, because the master is Alex's supplied file and the grade is a page decision — it should be visible and reversible in the stylesheet rather than baked into an asset nobody can un-bake. */ .v2 .fin__bg img { filter: saturate(0.7) brightness(0.88) contrast(1.08); } /* ---- 9. THE FILM BAND HAS NO SEAM AT EITHER END --------------------- The band's own scrim started at 0.92, so 8% of the film was still showing at the very top and bottom edges — and against a near-black ground that is a visible line, which is what Alex is pointing at. Both ends are opaque now and hold briefly before they let go. Same fix as Karma's, and the same reasoning: the picture has to have ENDED before the seam, not merely faded a long way toward it. The middle of the band is untouched. */ .v2 .brk__scrim { background: linear-gradient(to bottom, rgb(var(--bg-rgb) / 1) 0%, rgb(var(--bg-rgb) / 1) 2%, rgb(var(--bg-rgb) / 0.72) 8%, rgb(var(--bg-rgb) / 0.24) 20%, rgb(var(--bg-rgb) / 0) 34%), linear-gradient(to top, rgb(var(--bg-rgb) / 1) 0%, rgb(var(--bg-rgb) / 1) 2%, rgb(var(--bg-rgb) / 0.72) 8%, rgb(var(--bg-rgb) / 0.24) 20%, rgb(var(--bg-rgb) / 0) 34%), rgb(var(--bg-rgb) / 0.46); } /* ---- 11. THE FINDER IS ONE LINE PER FIELD --------------------------- Every row was saying its name twice: "MAKE" above and "Any Make" below. The second line was carrying no information at rest and the field was two lines tall to hold it. The uppercase label goes — visually, not from the accessible tree, where the