/* ═══════════════════════════════════════════════════════════════════════════
CHROME AND BRASS — the two the owner kept.
Blueprint and Salon were built, shown, and REMOVED on his word 2026-08-15. Salon is
not gone without trace: its two devices — the hairline above each section and the
specular light — are what Chrome now runs on. Recorded here because deleting a thing
without saying where its good parts went is how a decision gets re-litigated later.
🚨 WHY THE FIRST TEN FAILED. Owner: "I don't see any texture or cool, unique
colors... they just look kind of bland and flat." All three parts of that were
correct and all three were my fault:
1. THE TEXTURE WAS INVISIBLE. Grain at .20–.50 opacity under
mix-blend-mode:overlay does almost nothing on a near-black ground — overlay
preserves the base's luminance, so on `weave` and `leather` it was
mathematically present and visually absent. Here texture is made of things
you can actually SEE: rules, halftones, crosshairs, specular sweeps.
2. ONLY THE PAINT CHANGED. Ten variants swapped colour custom properties and
nothing else — identical layout, type, radii, spacing. That is one site in
ten colours, and no amount of hue fixes it. Uniqueness is typography,
structure and graphic device.
3. NO TYPEFACE. Every one of the ten used the system sans. That single fact
makes anything read as a template, and there was no reason for it — this is
a normal website, it can load real fonts. That was the biggest miss.
So each look below changes: the TYPEFACE, the layout rhythm, the graphic
language, and the colour — in that order of importance.
═══════════════════════════════════════════════════════════════════════════ */
/* Only what Chrome and Brass actually use. Blueprint and Salon were removed on the
owner's word, and their faces (IBM Plex Sans, Bodoni Moda) went with them — a font
nobody renders is pure download cost on every visit. */
/* 🚨 THE @import THAT USED TO BE HERE IS NOW A IN index.html's , next to the
preconnects. Do not put it back: an @import cannot be found by the preload scanner, so it
serialises the font fetch behind this whole file and blocks first paint. Measured at 830 ms.
If you add a font, add it to the href — this file must stay import-free. */
/* ───────────────────────────────────────────────────────────────────────────
LOOK A · CHROME — Swiss automotive brochure.
🚨 ONE TYPEFACE. MONTSERRAT, EVERYWHERE, 2026-08-26. This look used to run four families —
Anton condensed caps, Instrument Serif ITALIC for every lead paragraph, IBM Plex Mono for the
eyebrows, headings and the call button, and Montserrat for body. Owner: "please don't add
freaking stylish font, it's not matching, make every font simple. You are shifting the fonts.
I want just one font, normal looking, but not that freaking stylish italic kind of shit."
His own old site loads Montserrat and nothing else. Hierarchy is now weight and tracking only.
🚨 DO NOT REINTRODUCE A SECOND FAMILY. If a heading needs to be louder, use 800 and letter
spacing, not a display face. The comments below still name the old faces where they explain a
sizing decision that was made for them — that history is why the numbers are what they are.
Hairline rules that
actually structure the page, oversized section numerals, and headings filled
with a real polished-metal gradient. Texture = ruled lines, not noise.
─────────────────────────────────────────────────────────────────────────── */
html:root[data-look="chrome"]{
--page:#0C0D0F; --panel:#14161A; --ink:#F4F6F8; --ink-2:#B9C0C7; --muted:#79828C;
--line:#23272C; --hair:#1A1D21;
/* 🚨 CARD SURFACE. Every card on this site was `background:var(--page)` — the SAME colour as
the page behind it — so a Royal Detail block, a ceramic tier and a case study were held
apart from the ground by a 1px hairline and nothing else. Owner 2026-08-26: "they are kind
of separate from the background ... add a bit more contrast here ... a little bit greyish
colour so it's differentiating itself." One step up from the page, and a SECOND step for
cards sitting on an .alt band, because a card the same colour as its band is the same bug
one level in. Two tokens, so nothing has to remember which section it is in. */
/* 🚨 RETIRED 2026-08-26. These two were the stepped card surfaces — one tone on a plain
section, a lighter one on an .alt band. That step WAS part of the domino the owner saw:
the same card looked like two different cards depending on which section it sat in.
Every block is now one flat #12161C. Do not reintroduce a per-section surface. */
/* 🚨 ONE FLAT COLOUR + THE STAR TILE. NO GRADIENT ON A CARD. NO background-attachment:fixed.
Owner 2026-08-26: "some weird domino effect ... that weird chess layout ... make it one
exact same colour." He is describing a real bug I shipped and had already predicted in the
comment right here: with the 115deg sweep pinned to the VIEWPORT, every card paints the
slice of the gradient that happens to sit behind it, so two blocks side by side land on
different stops and the grid reads as a chessboard. Pinning it was supposed to make the
cards "windows onto one galaxy"; what it actually made was a checkerboard.
➡️ A GRADIENT ANCHORED TO THE VIEWPORT CANNOT LOOK UNIFORM ACROSS MANY BOXES. Either every
box gets its own copy (each grows a stripe) or they all get different slices (domino).
The third option is the right one: no gradient. #12161C is the BOOKING PAGE'S OWN CARD
COLOUR (--card in leap-client-southbay/implementation/booking-page-2026-07-31/lib/ui.js),
so the two products still match — the cards match its cards, not its background.
🚨 The star tile stays, scrolling with the card. It is the only image layer now. */
/* 🚨 THE STRIP, SUBTLE. Owner 2026-08-26: "the strip is gone ... see how subtle that is."
Same 115deg angle and the same rgba(201,160,74/224,183,92) family as the booking page's
ground, but the crest is dialled to .13 and the lit band narrowed to 30%-70%: on a full
screen the booking page's .16 across the whole width is a glint, on a 360px card the same
value is a bar. This is the ONE value tuned for a card, and it is tuned for INTENSITY only
— the hue and the angle are copied. */
--surface-strip:linear-gradient(115deg,
transparent 30%,
rgba(201,160,74,.04) 44%,
rgba(224,183,92,.13) 50%,
rgba(201,160,74,.04) 56%,
transparent 70%);
--surface-stars:
radial-gradient(1.4px 1.4px at 40px 70px, rgba(255,255,255,.62), transparent 100%),
radial-gradient(1.1px 1.1px at 180px 30px, rgba(255,255,255,.42), transparent 100%),
radial-gradient(1.6px 1.6px at 300px 150px, rgba(255,255,255,.55), transparent 100%),
radial-gradient(1px 1px at 90px 240px, rgba(198,222,255,.50), transparent 100%),
radial-gradient(1.3px 1.3px at 420px 330px, rgba(255,255,255,.38), transparent 100%),
radial-gradient(1px 1px at 240px 430px, rgba(255,244,214,.45), transparent 100%),
radial-gradient(1.5px 1.5px at 480px 90px, rgba(255,255,255,.30), transparent 100%);
--blue:#D9DEE3; --blue-ink:#0C0D0F; --green:#8FD4A8;
--shadow:0 1px 0 rgba(255,255,255,.04),0 26px 60px rgba(0,0,0,.6);
}
html:root[data-look="chrome"] body{
font-family:'Montserrat',system-ui,sans-serif; font-weight:500; font-size:16.5px; letter-spacing:-.003em;
/* visible ruled texture — a drawn line, not a noise film */
background-image:repeating-linear-gradient(to bottom,rgba(255,255,255,.030) 0 1px,transparent 1px 96px);
}
/* 🚨 .stat b IS DELIBERATELY NOT IN THIS LIST ANY MORE. Owner 2026-08-15: he likes the
brand and the hero headline in metal, but "100% Mobile", "7 Days a Week" and "Quality
services" should be subtle — same instinct that killed the brushed call button. Metal
type is a device; a device used on everything stops being a device. */
html:root[data-look="chrome"] h1,
html:root[data-look="chrome"] h2,
html:root[data-look="chrome"] .brand{
font-family:'Montserrat',sans-serif; font-weight:800; text-transform:uppercase;
letter-spacing:.005em; line-height:1.06;
/* polished metal, filled through the type itself */
background:linear-gradient(176deg,#FFFFFF 4%,#9AA3AC 34%,#EEF2F5 52%,#7E878F 70%,#FBFCFD 96%);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
/* owner 2026-08-15: this was clamp(46px,10vw,118px) and it sat right across the car.
Anton is a condensed face, so it reads far larger than the number suggests — the cut
is deliberately steep. */
html:root[data-look="chrome"] .hero h1{font-size:clamp(30px,5vw,62px);max-width:13ch}
html:root[data-look="chrome"] h3,
html:root[data-look="chrome"] h4{font-family:'Montserrat',sans-serif;font-weight:700;letter-spacing:.01em}
html:root[data-look="chrome"] .sec .lead,
html:root[data-look="chrome"] .pkg .tag{
font-family:'Montserrat',sans-serif; font-style:normal; font-size:18px; line-height:1.6;
color:var(--ink-2); font-weight:500;
}
html:root[data-look="chrome"] .eyebrow{
font-family:'Montserrat',sans-serif; font-weight:700; letter-spacing:.22em; font-size:11px;
}
/* the numeral device: each section counts itself, big and quiet */
html:root[data-look="chrome"] .sec .w{position:relative}
html:root[data-look="chrome"] .sec{counter-increment:chsec; padding:96px 0}
html:root[data-look="chrome"] body{counter-reset:chsec}
html:root[data-look="chrome"] .sec>.w::before{
content:counter(chsec,decimal-leading-zero);
position:absolute; right:20px; top:-16px; font-family:'Montserrat',sans-serif; font-weight:800; font-size:80px;
line-height:1; color:transparent; -webkit-text-stroke:1px var(--line); pointer-events:none;
}
html:root[data-look="chrome"] .sec.alt{background:var(--panel)}
/* squared off — no soft template radii anywhere */
html:root[data-look="chrome"] .tile,
html:root[data-look="chrome"] .pkg,
html:root[data-look="chrome"] .case,
html:root[data-look="chrome"] .form,
html:root[data-look="chrome"] .tier,
html:root[data-look="chrome"] .ba{border-radius:0}
html:root[data-look="chrome"] .btn{border-radius:0;letter-spacing:.16em;text-transform:uppercase;
font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;padding:15px 26px}
html:root[data-look="chrome"] .price{border-radius:0;font-family:'Montserrat',sans-serif;font-size:15px;font-weight:700;letter-spacing:.01em}
html:root[data-look="chrome"] .tile{background:transparent;border:0;border-top:1px solid var(--ink);padding:20px 0 0}
/* quiet: the page's own text colour, normal weight, no metal, no shout */
html:root[data-look="chrome"] .stat b{
font-family:'Montserrat',sans-serif; font-weight:700; font-size:19px; letter-spacing:.005em;
text-transform:none; color:var(--ink); background:none; -webkit-text-fill-color:currentColor;
}
html:root[data-look="chrome"] .stat p{font-size:14.5px;color:var(--ink-2)}
/* the four claim tiles come down with them — same family of small print */
/* 🚨 THESE ARE
AND MUST NOT LOOK LIKE ONE. They were
, which Lighthouse failed as a
heading-order skip (h1 -> h3, nothing between). Promoting the tag is the correct fix — but
this stylesheet casts EVERY h2 as the chrome/brass display heading: IBM Plex Mono, 600,
UPPERCASE, .13em tracking, up to 26px, and under brass a gold gradient clipped to the text.
The tag change alone would have re-cast four lines of small body copy as giant gold mono.
An accessibility fix that redesigns the page is not a fix.
Both selectors are spelled out because the brass h2 rule is (0,3,2): the plain one here is
(0,3,2) too and would only tie, so the brass-qualified copy at (0,4,2) is what actually
wins. Every property the h2 rules set is restored here explicitly — inheriting was the
trap, since the h3/h4 Montserrat rule above no longer matches these at all. */
html:root[data-look="chrome"] .tile h2,
html:root[data-look="chrome"][data-accent="brass"] .tile h2{
font-size:15.5px;font-weight:500;letter-spacing:.005em;
font-family:'Montserrat',sans-serif;text-transform:none;line-height:1.08;
background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--ink)}
html:root[data-look="chrome"] .tile p{font-size:14.5px}
/* ═══════════════════════════════════════════════════════════════════════════
CHROME · REFINEMENT — owner-directed 2026-08-14 after he chose this one.
"add some outlines like you did with the yellow one (the salon). Maybe some
bone-colored outlines and some texture, like that white shadowy texture behind it."
Two things, both lifted from Salon and re-tuned for this ground:
1. Salon's brass hairline device, in BONE instead — the warm off-white lifts a
cold graphite page without introducing a second colour to argue with the
chrome. Bone is the only warm note on the page, which is why it works.
2. Salon's specular sweeps — the "white shadowy texture" — brought across as
broad, fixed washes of light. FIXED on purpose: they stay put while the page
scrolls past, so the page reads as lit rather than as painted.
The 96px ruled lines he already likes are untouched underneath.
═══════════════════════════════════════════════════════════════════════════ */
html:root[data-look="chrome"]{
/* strengthened 2026-08-15 on owner's word ("make the bone a bit stronger").
.30/.13 -> .48/.26 on the rules, and the bevel highlight up with them. */
--bone:#EFE9DC; /* warm off-white — the single warm note */
--bone-line:rgba(239,233,220,.48);
--bone-faint:rgba(239,233,220,.26);
--bone-bevel:rgba(239,233,220,.30);
}
html:root[data-look="chrome"] body{
/* 🚨 ORDER MATTERS: sweeps sit BEHIND the rules, so the ruled texture stays crisp
over the light rather than being washed out by it. And the sweeps are `fixed`
while the rules `scroll` — that separation is what makes the light feel like it
is in the room instead of printed on the page. */
background-image:
repeating-linear-gradient(to bottom,rgba(255,255,255,.030) 0 1px,transparent 1px 96px),
linear-gradient(108deg,transparent 22%,rgba(255,255,255,.075) 40%,transparent 56%),
linear-gradient(252deg,transparent 40%,rgba(230,223,209,.060) 60%,transparent 78%),
radial-gradient(1200px 800px at 78% -8%,rgba(255,255,255,.055),transparent 62%);
background-attachment:scroll,fixed,fixed,fixed;
}
/* ── the bone hairline, Salon's device in a colder room ──────────────────── */
html:root[data-look="chrome"] .sec>.w>.eyebrow{
display:block;padding-top:24px;border-top:1px solid var(--bone-line);color:var(--bone);
}
html:root[data-look="chrome"] .nav{border-bottom:1px solid var(--bone-line)}
/* ── bone outlines on every panel ────────────────────────────────────────── */
/* A single hairline, plus an inner highlight along the top edge only — that is how
a real bevelled metal edge catches light, and it stops the outline reading as a
flat drawn box. */
html:root[data-look="chrome"] .pkg,
html:root[data-look="chrome"] .tier,
html:root[data-look="chrome"] .form,
html:root[data-look="chrome"] .case,
html:root[data-look="chrome"] .ba{
border:1px solid var(--bone-faint);
box-shadow:inset 0 1px 0 var(--bone-bevel), 0 26px 60px rgba(0,0,0,.55);
}
html:root[data-look="chrome"] .tile{
border:0;border-top:1px solid var(--bone-line);
box-shadow:none;
}
/* the surface itself. Kept next to the border rule above so the two never drift. */
/* 🚨 `.panel` IS THE SAME SURFACE, APPLIED BY HAND. Owner 2026-08-26 pointed at the ceramic
steps and the whole About block: "add the contrast block in these two sections. That's it,
nothing else. No dominos, no strip." They are the two places on the page where content sat
directly on the ground with no card around it. Adding a CLASS rather than a new rule means
they cannot drift from every other block — and the card-surface gate checks this one rule. */
html:root[data-look="chrome"] .panel,
html:root[data-look="chrome"] .pkg,
html:root[data-look="chrome"] .tier,
html:root[data-look="chrome"] .form,
html:root[data-look="chrome"] .case,
html:root[data-look="chrome"] .ba,
html:root[data-look="chrome"] .faq,
html:root[data-look="chrome"] .addons>div,
html:root[data-look="chrome"] .areas>div{
background-color:#12161C;
/* stars first (on top), then the strip, then the flat colour underneath */
background-image:var(--surface-stars), var(--surface-strip);
/* 🚨 THE STRIP IS SIZED TO THE ELEMENT — 100% 100% — SO EVERY BLOCK RENDERS THE IDENTICAL
GRADIENT. That is the whole anti-domino rule. The chessboard happened because the strip
was `fixed`, i.e. anchored to the VIEWPORT, so each block painted whatever slice sat
behind it. Sized to the element, each block draws its own complete copy and they cannot
differ from one another. Stars stay on their own 520px tile.
🚨 EVERY LAYER IS `scroll`. If you ever see `fixed` in this rule again, that is the domino. */
background-size:520px 520px, 100% 100%;
background-repeat:repeat, no-repeat;
background-position:0 0, center;
background-attachment:scroll, scroll;
}
/* 🚨 ADDITIONAL SERVICES AND SERVICE AREAS HAD NO BOX AT ALL — bare h3 + ul on the page.
Owner asked for the same treatment: "there should be a block, but a bit of contrast ...
so we can kind of differentiate things." Same surface, same hairline, same bevel as every
other card, so it reads as one family rather than a third invented style. */
/* FAQs take the same surface, hairline and bevel as every other block on the page —
one card language, not a fourth invented style. */
html:root[data-look="chrome"] .panel,
html:root[data-look="chrome"] .faq,
html:root[data-look="chrome"] .addons>div,
html:root[data-look="chrome"] .areas>div{
border:1px solid var(--bone-faint);
box-shadow:inset 0 1px 0 var(--bone-bevel), 0 18px 44px rgba(0,0,0,.45);
padding:22px 24px 24px;
}
html:root[data-look="chrome"] .faq{padding:0}
html:root[data-look="chrome"] .faq[open]{border-color:rgba(227,193,115,.45)}
html:root[data-look="chrome"] .feat{border-top:1px solid var(--bone-faint)}
html:root[data-look="chrome"] .pkg-hd .txt{border-right:1px solid var(--bone-faint)}
@media (max-width:800px){html:root[data-look="chrome"] .pkg-hd .txt{border-right:0}}
/* the outlined section numeral picks up bone too, so the device reads as one family */
html:root[data-look="chrome"] .sec>.w::before{-webkit-text-stroke:1px var(--bone-faint)}
/* buttons and price pills get the same hairline language */
html:root[data-look="chrome"] .btn-o{border-color:var(--bone);color:var(--bone)}
html:root[data-look="chrome"] .btn-g{border-color:var(--bone-line);color:var(--bone)}
/* 🚨 ALL THREE SIZE CHIPS ARE IDENTICAL. `.lo` is just "the cheapest tier" — not a
selection the customer made — so giving it the only gold fill read as a chosen state
and made SUV/Oversized look greyed out. Owner flagged it twice. There is no state
here: three vehicle sizes, three identical chips. Do not re-add a .lo variant. */
html:root[data-look="chrome"] .price,
html:root[data-look="chrome"] .price.lo{
background:rgba(227,193,115,.10);border-color:rgba(227,193,115,.55);color:var(--bone);
}
html:root[data-look="chrome"] .eyebrow{color:var(--bone)}
html:root[data-look="chrome"] .lswitch a{border-color:var(--bone-faint)}
/* the alt sections get a bone rule top and bottom instead of a flat panel fill —
a ruled band reads more like a brochure spread than a grey box does */
html:root[data-look="chrome"] .sec.alt{
background:rgba(255,255,255,.014);
border-top:1px solid var(--bone-faint);border-bottom:1px solid var(--bone-faint);
}
/* ═══════════════════════════════════════════════════════════════════════════
CHROME · BRASS — owner-directed 2026-08-15: "make another one with the
yellowish chrome. Instead of that bone white color, use the yellowish one.
Keep both of these separate."
🚨 IT IS THE SAME LOOK, NOT A COPY OF IT. `?look=brass` stamps
data-look="chrome" AND data-accent="brass", so every Chrome rule — the Anton
caps, the ruled texture, the squared corners, the section numerals, the layout
— applies untouched, and only the accent family is overridden here.
Copying the whole block instead would mean two files to keep in step, and the
second one silently falling behind the first the next time he tunes something.
That is the same drift that put the booking page and the agent on two different
calendars; not repeating it for a colour.
Two things change, and they are the two that matter: the hairline family goes
gold, and the METAL IN THE HEADINGS goes gold with it. Leaving the type silver
over gold rules would read as an accident rather than a decision.
═══════════════════════════════════════════════════════════════════════════ */
html:root[data-look="chrome"][data-accent="brass"]{
--bone:#E3C173; /* warm brass, not a flat yellow */
--bone-line:rgba(227,193,115,.50);
--bone-faint:rgba(227,193,115,.28);
--bone-bevel:rgba(227,193,115,.32);
--blue:#E3C173; --blue-ink:#0C0D0F; /* CTAs follow the accent */
}
/* the polished metal in the headings, re-cast in gold. Same stop positions as the
chrome version so the highlight lands in the same place on the letterforms — only
the hue moves. */
html:root[data-look="chrome"][data-accent="brass"] h1,
html:root[data-look="chrome"][data-accent="brass"] h2,
html:root[data-look="chrome"][data-accent="brass"] .brand{
background:linear-gradient(176deg,#FFF6E2 4%,#B4893A 34%,#FFEFCC 52%,#8E6B29 70%,#FFFAF0 96%);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
/* and the light in the room warms to match — a cold white sweep over gold rules is
the giveaway that only the swatches were changed */
html:root[data-look="chrome"][data-accent="brass"] body{
background-image:
repeating-linear-gradient(to bottom,rgba(255,240,210,.034) 0 1px,transparent 1px 96px),
linear-gradient(108deg,transparent 22%,rgba(255,244,214,.085) 40%,transparent 56%),
linear-gradient(252deg,transparent 40%,rgba(227,193,115,.075) 60%,transparent 78%),
radial-gradient(1200px 800px at 78% -8%,rgba(255,238,196,.065),transparent 62%);
background-attachment:scroll,fixed,fixed,fixed;
}
html:root[data-look="chrome"][data-accent="brass"] .btn-p{background:var(--bone);color:#0C0D0F}
/* ── THE CALL BUTTON ──────────────────────────────────────────────────────────
The brushed-metal version is GONE. Owner: "make it more subtle, more natural, more
normal. Polished or not, it's just too much — it feels too gimmicky." He is right, and
the reasoning I gave for it ("the most valuable pixel on a detailer's site") was an
argument for making it CLEAR, not for making it shiny. Those are different things and I
conflated them.
What is left: a hairline outline in the accent, filling on hover. Calm, obviously
tappable, and it takes about a third of the width the metal slab did — which is what
let the brand come back onto one line. */
html:root[data-look="chrome"] .call{
font-family:'Montserrat',sans-serif; font-weight:600; letter-spacing:.02em;
border-color:var(--bone-line); color:var(--bone); background:transparent; box-shadow:none;
}
html:root[data-look="chrome"] .call:hover{background:var(--bone); color:#0C0D0F}
html:root[data-look="chrome"] .call:active{background:var(--bone); color:#0C0D0F; transform:translateY(1px)}
/* 🚨 2026-08-23: THIS LINE IS WHY THE PHONE MENU WAS INVISIBLE. It read `background:var(--page)`
— "inherit the look's own surface" — but the stars texture sets `--page:#000!important` on
, so the open menu was pure black sitting on a pure black page with no edge. The owner
reported it as "needs contrast to separate from the background of the website".
It was ALSO the rule beating the fix: at (0,3,1) this outranks a plain `.drawer` in index.html,
which is mistake #5 in this project's list — a stylesheet that loads is not one that wins.
Fixed HERE, on the line that orders the behaviour, not by stacking another rule on top.
⚠️ looks.css is cache-busted by ?v= in index.html — BUMP IT or nobody's browser refetches. */
/* keep this IN SYNC with the .drawer block in index.html — this rule outranks it (0,3,1 vs 0,1,0),
so if the two ever disagree, THIS is the one the visitor sees. Brass hairlines, dark panel. */
html:root[data-look="chrome"] .drawer{background:#14161C;
border-top-color:rgba(227,193,115,.22);border-left-color:rgba(227,193,115,.30)}
html:root[data-look="chrome"] .drawer li{border-bottom-color:#262D37}
html:root[data-look="chrome"] .burger{border-color:var(--bone-faint)}
html:root[data-look="chrome"] .burger span,
html:root[data-look="chrome"] .burger span::before,
html:root[data-look="chrome"] .burger span::after{background:var(--bone)}
html:root[data-look="chrome"].nav-open .burger span{background:transparent}
/* ═══ OWNER 2026-08-15: the display face was an overkill ══════════════════════
"the font... in the header and right beneath the Porsche, and in the packages,
it's looking kind of an overkill. Can you just make them how the CALL NOW
button is?"
Two things were doing it, not one: Anton (a heavy condensed display face) AND a
polished-metal gradient clipped through the letterforms. The button is the quiet
end of the same system — IBM Plex Mono 600, uppercase, wide tracking, ONE solid
colour. So the headings move onto the button's face and the metal fill comes off.
Specificity is set to match the brass rules exactly and this block sits AFTER them,
so it wins on order rather than on an !important arms race. */
html:root[data-look="chrome"] h1,
html:root[data-look="chrome"] h2,
html:root[data-look="chrome"] .brand,
html:root[data-look="chrome"][data-accent="brass"] h1,
html:root[data-look="chrome"][data-accent="brass"] h2,
html:root[data-look="chrome"][data-accent="brass"] .brand{
font-family:'Montserrat',sans-serif;
font-weight:800; text-transform:uppercase; letter-spacing:.08em; line-height:1.24;
background:none; -webkit-background-clip:border-box; background-clip:border-box;
color:var(--ink);
}
/* the brand keeps the accent — it is the logo, and the button text is brass too */
html:root[data-look="chrome"][data-accent="brass"] .brand{color:var(--bone)}
/* mono is far wider than Anton at the same px, and the tracking widens it again, so
the sizes come down hard or the H1 wraps to four lines on a phone. */
html:root[data-look="chrome"] .hero h1{font-size:clamp(24px,3.6vw,42px);max-width:22ch;line-height:1.18}
html:root[data-look="chrome"] h2{font-size:clamp(21px,2.8vw,32px);font-weight:800}
html:root[data-look="chrome"] .brand{font-size:clamp(12px,2.6vw,15px);letter-spacing:.10em}
/* the giant Anton section numeral was part of the same overkill */
html:root[data-look="chrome"] .sec>.w::before{
font-family:'Montserrat',sans-serif; font-weight:800; font-size:44px; letter-spacing:.02em; top:-6px}
/* owner: "just make it solid, no shines... solid yellow." The two he named are the header
brand and the line right beneath the Porsche — both are the business name, so both take
the accent solid. The section h2s stay white: a page where every heading is gold is the
overkill again, one step sideways. */
html:root[data-look="chrome"][data-accent="brass"] .hero h1{color:var(--bone)}