/** * Rolex Bespoke design tokens + shell components. * Every rule is scoped under body.rolex-section — an unscoped selector here * restyles the whole site. Token names mirror Rolex's own template-JPG * annotations (Headline50, Body20, Fixed14 …) so a mockup annotation maps * 1:1 to a variable. */ body.rolex-section { /* HELVETICA NEUE IS THE RATIFIED FACE (client decision, 2026-09-15). PREMISE CORRECTED 2026-09-19. This comment used to say Rolex's mockups are set in "their own licensed typeface". They are not: the Brand Centre's Design specifications name **Helvetica** bold and light. So there is no proprietary face to acquire, and nobody should go looking for one. The 6-9% width delta below is real and was measured; what is now known is that it is NOT recoverable by changing this stack. Measured 2026-09-18: Helvetica Neue against Helvetica differs by -0.19% to +0.68% at weights 400 and 700, and on this machine Helvetica resolves to Arial metrics anyway. Whatever produces the delta -- the comps' own rendering, tracking, or a version of Helvetica we do not have -- swapping the family does not close it. The conclusion below is therefore unchanged; only the reason for it is. Rolex's mockups run 6-9% NARROWER per line than this stack at identical cap heights. The 2026-09-15 comp-parity audit measured that on every page type: matched cap heights with mismatched advance widths, e.g. an H2 run of 313px in the comp against 333px live, and "Learn more" at 70px against 75px. That costs an extra line on a handful of headings and body blocks. The client has confirmed we continue on Helvetica Neue, so those wrap points are ACCEPTED, not outstanding. Consequence for future audits: a comp/live delta that is a WIDTH at a matching cap height is this typeface and is not a defect. A delta in cap HEIGHT is a real size difference and still is. Do not chase line counts or measure-widths back to the comp by adjusting font-size -- that would break the type ramp the spec sheet defines. */ --rlx-font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif; --rlx-font-serif: Georgia, "Times New Roman", serif; --rlx-headline70: 70px; /* Headline70 — the SLIDER hero tagline, the largest size in the spec's whole type ramp; added 2026-08-20 with the Discover slider (design-specs audit: Slider was the single `high`-severity NOT BUILT item). Joins the SHARED responsive ramp below at its existing four breakpoints. */ --rlx-headline50: 50px; --rlx-headline36: 36px; --rlx-headline26: 26px; /* Headline26 — the SLIDER hero kicker; added 2026-08-20 alongside Headline70. Same shared ramp. */ --rlx-body24: 24px; --rlx-body20: 20px; --rlx-fixed16: 16px; --rlx-fixed14: 14px; --rlx-fixed22: 22px; /* Fixed22 (Navigation elements, spec p14/p18) — mobile-open-state nav list typography; added 2026-08-17, was flagged NOT BUILT in design-specs audit §0.4/§1.2 */ --rlx-legend16: 16px; --rlx-quote50: 50px; /* Quote50 (Georgia), added 2026-08-17 per design-specs audit §0.4 — see the responsive-ramp block below */ /* Headline leading. CORRECTED 2026-09-12 from 1.1, which matched neither source. Rolex's own spec sheet (Bespoke section-Design-Specs.pdf pp.5-6, read at all four breakpoint columns) states Line-height 1.2 for Headline50/36/30/26 and 1.1 for Headline70 alone -- hence the separate token below. CONFLICT RESOLVED 2026-09-16 in favour of the mockups. They measure an ink-top-to-ink-top pitch of 58 on a 50px face -- re-measured across seven pages (1908, daytona, datejust, day-date, deepsea, explorer, explorer-II), 15 samples, unanimously 58 -- against the spec's 60. This token followed the spec on the stated grounds that "the spec defines the type system"; the client has since ratified the opposite precedence (15-16 Sep 2026, "JPG governs"), so the measured value wins. 58/50 = 1.16, the same figure already used for the quote. The residual it removes is 2px per line, which compounds over a four-line statement. */ --rlx-lh-headline: 1.16; --rlx-lh-headline70: 1.1; /* 1.16, NOT the spec PDF's 1.3. The datejust mockup sets four quote lines on a 58px pitch at 50px (ink runs y455-503, 513-561, 571-619, 629-677 in the quote crop -- 49px of ink, 58px apart), and the subheading under it measures the same 58. 1.3 would be 65px. Client ruling, 15 Sep 2026: the JPG mockups govern over the spec PDF where the two disagree. */ --rlx-lh-quote: 1.16; /* spec pp.5-6 says 1.3; mockup overrides */ /* spec pp.5-6: Headline70 is the one headline step at 1.1 */ /* 1.6, per the design spec's own "Body20 ... lh 1.6" and the comps: the section body copy measures a 32px ink-top-to-ink-top pitch on a 20px face across the article, collection, model, accessories and servicing mockups. (The two-column intro blocks measure 30 = 1.5; one token cannot be both, and 1.6 is what the spec states and what nearly all multi-paragraph copy uses.) */ --rlx-lh-body: 1.6; /* Body24 is 1.2, NOT --rlx-lh-body. Both read one token until 2026-09-11, which was harmless while it was 1.5 and wrong the moment Body20 went to its spec value of 1.6: card names and accordion labels jumped to a 38.4px line box. Spec p.6 lists them separately -- "Body24 bold / Helvetica bold 24px - Line-height 1.2" against "Body20 bold / Helvetica bold 20px - Line-height 1.6". */ --rlx-lh-body24: 1.2; --rlx-lh-fixed: 1.4; /* Colours (Styleguide > Colours, spec p2 — design-specs audit §0.1/0.2, 2026-08-17): --rlx-green was off by one hex digit (#127449, 4th digit should be 7 → #127749, confirmed against the spec's own swatch and this repo's style.css:685 .rlx__button, which already had it right). --rlx-brown is new: spec's dominant headline/label colour across Model + Contact components, previously missing entirely (everything that should be Brown rendered as Black/--rlx-ink instead). */ --rlx-green: #127749; --rlx-brown: #452C1E; --rlx-bg: #F9F7F4; --rlx-surface: #FFFFFF; /* Body ink. Confirmed 2026-09-12: the comps sample body copy at (32,32,32), so this value is right FOR BODY -- what was wrong was the four headline tokens pointing at it. Task 1's "inconclusive" sampling is now resolved: five independent comp audits plus a darkest-decile glyph-band measurement all read headings as (67..69, 42..44, 28..30) = --rlx-brown #452C1E, on collection, article, model, hub and retailer comps alike. The headline tokens below therefore take --rlx-brown; body24/body20/legend16 keep this. */ --rlx-ink: #212121; --rlx-panel: #F4EFEA; /* specs panel; corrected 2026-08-17 from #F4EFEB (1 hex digit off) per design-specs audit §0.1. NOTE: the delivered _collection packshots (card.php) bake the OLD #f4efeb into their own corners — a 1-unit blue-channel delta vs this new tile colour, imperceptible, not chased here (see rlx-card__media comment below, unchanged). */ /* THE LAST THREE UNTOKENISED SPEC COLOURS (2026-09-19). All three are Rolex's own, all three were pasted as literals at 8 declaration sites, and this file has ALREADY shipped two one-hex-digit colour typos that took an audit to find (--rlx-green was #127449, --rlx-panel was #F4EFEB). A literal repeated eight times is that bug waiting to happen an eighth time, so they get names. Comment prose below still quotes the literal values on purpose -- the contrast measurements recorded there are about specific numbers, and several guards match that prose. */ --rlx-green-rolex: #006039; /* Rolex green -- the CTA hover fill and the "Rolex Retailer" tag. NOT --rlx-green (#127749), which is the lighter interface green. */ --rlx-green-ocean: #9BF9CE; /* Ocean green -- dark-background focus rings, the green band's current-page crumb. Fails contrast on light backgrounds; see the notes at each site. */ /* THE ROOM A HOVER/FOCUS RING NEEDS OUTSIDE ITS CARD: 2px outline at 3px offset (Accessibility spec p132). Scroll rows reserve exactly this much so the ring is not clipped -- see the .rlx-*__row block below. */ --rlx-ring-room: 5px; --rlx-track: #D4D4D4; /* Inactive slider track. ~1.4:1 on --rlx-bg, acceptable only because it is decoration with a text/label alternative. */ --rlx-gap: clamp(45px, 10vh, 90px); --rlx-gap-half: clamp(24px, 5vh, 45px); /* HEADING-TO-CONTENT, not section-to-section. Measured off Rolex's own Discover comps 2026-09-21: an .rlx-headline36 sits 25px (desktop) / 30px (mobile) of INK above the block beneath it. Those two blocks -- the promo rows and the Discover trio -- were using --rlx-gap-half, the SECTION rhythm token, which renders 45px desktop / 40px mobile, i.e. nearly double. The two are different rhythms and must not share a token; that conflation is what the client saw as "Rolex watches has more bottom margin than Our Rolex selection". The carousel rows keep their own 24px: the comp genuinely draws that heading looser (31px ink, vs 25 for the promos), so this is NOT a single value applied everywhere. */ --rlx-heading-gap: 16px; /* EVERY card/tile gutter in the section. Measured 8px in every comp that has one — collection cards (3 x 402, gutter 8, verified on datejust, submariner and accessories), the Discover carousel (4 x 402, gutter 8), keep-exploring (4 x 400, gutter 8), the selection grid (3 x 402, gutter 8) and the new-watches hub tiles (2 x 808, gutter 9). Row gaps on the card grids measure 8 too (datejust row 1 ends y1537, row 2 starts y1546). The build previously used 45/32/40/16px, which is why every card came out 20-30% narrow. */ --rlx-card-gap: 8px; --rlx-keep-gap: var(--rlx-card-gap); /* DASH END RADIUS (2026-09-22, Ernie: ".25rem, from the referenced sites -- and I see the border radius in all the templates"). Every progress track in this section draws rounded ends, and they were all shipping square. ONE token because there are FIVE independent dash families (banner / keep-hub-carousel / new-watches keep / model gallery / lightbox) that a future change must not be able to drift apart -- the same mistake the 26px dash gutter made when it was written per component. MIND THE ROOT: this site sets `html { font-size: 10px }`, so 0.25rem is 2.5px HERE and 4px on a 16px-root site like the reference. It makes no visible difference today -- every bar in this section is 3 or 4px tall and the CSS spec clamps a radius to half the side it sits on, so 2.5 and 4 both render the same true pill. It WOULD matter if a future track were taller than 5px: 0.25rem would stop being a pill here while still being one on the reference. Kept as the rem value Ernie gave (2026-09-22) rather than silently converted to 4px. */ --rlx-dash-radius: 0.25rem; --rlx-container-max: 1620px; /* mockup well: text x=150–1770 at 1920 (measured 2026-08-16) */ /* Page gutter. 24px a side down to 768, but the mobile comps are unanimous at 27: card boxes and photo edges land on device x54 of 780 (= 27 CSS at a 390 viewport) in the collection, discover, watches, watchmaking, contact and oyster-story mockups, with text ink ~2px further in on glyph side bearing. The mobile well is 336, not 342 -- the same number the .rlx-article__video comment below already recorded ("x54-726 of 780 = 336") without it reaching the declaration. */ /* PERCENTAGE, not pixels, since 2026-09-17 — this is Rolex's own rule. Brand Centre > Bespoke section > Design specifications > Styleguide > Layout publishes three CSS grids: S 0-767px 6 columns, 6px gutter, 7% side margin M 768-1024 12 columns, 8px gutter, 8% side margin L 1025px + 12 columns, 8px gutter, 8% side margin The token is the BOTH-SIDES total, so 8% a side is 16% here (14% at S). It was 48px, and that was right at exactly one width. 1920 x 0.84 = 1612.8, which is why --rlx-container-max's 1620 (measured off the 1920 comp) looked correct: 1620 IS the 8% rule, frozen. Below 1920 the fixed 48px took over and the margin collapsed — measured 1.67% at 1440, 1.50% at 1600, against a specified 8%, i.e. every component ran ~180px wide on any laptop. --rlx-container-max stays as the cap so the well never exceeds the 1620 the comp draws. */ --rlx-container-inset: 16%; /* --rlx-cover-ar / --rlx-cover-ar-mobile used to default to 7/2 and 3/2 here and crop every .rlx-cover. Both defaults are gone: the cover now renders its delivered asset uncropped (see .rlx-cover img), and the ONLY consumer left is the Discover slider, which declares both values on .rlx-banner__slide itself because its cross-fading slides must share one height. No root default means a future consumer that forgets to set one gets `aspect-ratio: auto` — the asset's own shape — rather than silently inheriting a crop measured for a different page. */ /* Sticky band (2026-08-17): the site's own