/* ========================================================================== RENEWAL — "Reviewed before renewal, not after a claim" -------------------------------------------------------------------------- Depends on tokens.css + base.css. Every number below was read off the signed-off render with Playwright at 320 / 360 / 375 / 390 / 414 / 480 / 576 / 640 / 768 / 834 / 900 / 992 / 1024 / 1100 / 1200 / 1280 / 1366 / 1440 / 1600 / 1920, then expressed in the shared tokens. Nothing here is eyeballed. The measured facts this file reproduces (1440px, the judged width): section margin-block 56.3076 = 2u (--br-section-y) copy column 544.92 wide = (1240 - 150.154) / 2 column gap 150.154 = 16/3 u (--br-flow-2xl) row gap (stacked) 56.3076 = 2u vertical align centre — the copy centres against the taller block h2 45.4572 / 57 / 600 / -0.03em / --br-ink-heading h2 -> p 28.154 = 1u (--br-flow-sm) p 20 / 28 / 400 / +0.005em / --br-neutral-700 p -> buttons 37.538 = 4u/3 (--br-flow-md) button gap 14.077 = u/2 (--br-flow-2xs) primary gold pill, 226.55 x 48, min-width 200, 11/24 padding secondary ghost pill, underlined label, 4.8px offset colour block 544.94 x 726.58 (3:4), radius 28.154 = 1u, brand gold Breakpoints are the reference's own, not invented: 768 goes two-column, 992 and 1200 each widen the column gap. Type, colour, radius, button geometry and section rhythm all come from tokens/base — this file only owns the layout of the row itself. -------------------------------------------------------------------------- WHERE THIS DELIBERATELY DOES NOT MATCH THE REFERENCE Five places. All recorded here so a later "fidelity pass" cannot read them as oversights and reinstate the reference's value. Nothing else in this section is allowed to differ: if you find a sixth, it is a bug, not a decision. 1. 320px button height. At 320 the reference collapses its CTAs to `padding: 4px 12px` with `min-height: ~0`, giving a 34px-tall control. We hold --br-btn-h (48px) at every width: 34px is below the 44px minimum touch target (WCAG 2.5.5 / 2.5.8). This is the ONLY geometric difference across the 20-width sweep above — at 320 the section measures 849 tall against the reference's 821 (+28 = two buttons x 14px); at all nineteen other widths every box matches to within 0.05px. 320 was measured, not skipped: it is overridden on purpose. 2. Long-label behaviour. The reference's primary keeps `white-space: nowrap` and lets an over-long label run straight out of the pill — measured at 390 with a 57-character label, the button's scroll width is 486 against a 356px client width, and the spill is only hidden because the page's
is `overflow: clip`. We contain it in the button instead. Full reasoning at ACTIONS, below. That argument used to stop at the buttons, which was indefensible: the h2 and the lead sit two elements above them and break worse. Fixed at the root, in base.css, on `h1–h6` and `p` — it is a property of text on this site, not of this section. Be careful what that fix is FOR, because the obvious reading is wrong. It is NOT stopping the page scrolling sideways: `body { overflow-x: hidden }` in base.css already does that, and it holds — with a 70-character unbreakable token in this h2, `window.scrollTo(9999, 0)` leaves scrollX at 0 at 390 and at 1440. (`documentElement.scrollWidth` reads 1245 in that state and means nothing; it measures content bounds, not scrollability. It is an easy number to panic about.) What the fix buys is that the word stays READABLE instead of being clipped into nothing — which is what the reference does, and what fails WCAG 1.4.4 at 200% zoom. Two deliberate asymmetries inside it, neither to be harmonised: · text gets `break-word`, the buttons below get `anywhere`. `anywhere` also shrinks min-content — exactly what a flex button inside a container query needs, and exactly what a grid track holding a heading must not have. · `.br-display-*` opts out entirely. At 89px an ordinary word is wider than its measure BY DESIGN and is meant to bleed; breaking it mid-stem is worse than the bleed. See the note in base.css. 3. Ghost-button hover: underline thickness `auto` (1px) -> 2px. Lives in base.css on .br-btn--ghost:hover, and this section is where it shows — "How switching works" is the only ghost button in the row. Measured, both sides, real cursor at 1440 (_r3-press.mjs): reference rest #1F1902 / auto -> hover #2B2305 / auto rebuild rest #1F1902 / auto -> hover #2B2305 / 2px So the colour move is faithful — but on its own it is ~3 dE, which is invisible: the pill has no fill, no border, and no shadow, so the underline is its only body, and a hover that moves nothing readable is not a hover. Thickening it is the idiom .br-link already uses, so the two controls read as one system. This IS a place rebuild and reference are distinguishable if you hover them side by side, and it is chosen. 4. Lead paragraph: `text-wrap: pretty` on .br-renewal__sub. The reference strands a one-word last line ("counts.") at 480 and 1366; we pull a word down to it. Rag differs from the reference at those two widths and no others; block height identical at all twenty. Full measurements and the reason it is scoped to this section rather than to .br-lead in base.css are at .br-renewal__sub, below. 5. Primary-button press colour. Measured on the reference's own "Get a structured review", real mouse-down, held and re-read at 100 / 500 / 1500 / 3000ms, plus a screenshot to be sure it was not a transition mid-flight (_r3-primary-press.mjs, _shots/ref-primary-pressed.png): reference #F1C305 -> hover #D6AC00 -> press #65CF21 rebuild #F1C305 -> hover #D6AC00 -> press #BD9700 Rest and hover match to the byte. Press does not, and must not: #65CF21 is Wise's green, left behind by the donor design system, and it turns Broad Risk's gold CTA into a bright green pill under the finger. Ours continues the gold down-ramp instead (#F1C305 -> #D6AC00 -> #BD9700 is one hue getting darker, which is what press means everywhere else on this page). Flagged loudly because the fix is one token and the mistake is one token: a fidelity pass that "restores the measured press colour" here ships a green button on an insurance broker's home page. Not divergences any more, for the avoidance of doubt. Both were, and were fixed against measurement rather than taste: · Ghost press state. Was silent on pointer devices — :active aliased to the hover plate, which is `transparent` on a light surface, so mean ink over the button box read 18.444 at rest and 18.444 pressed. Now rgba(31,25,2,0.13) fill and a #0E0F0C label, unfenced, which is exactly what the reference computes (both re-measured with a real cursor after the fix, _r3-press.mjs). The 2px underline from divergence 3 rides along, which is the one part of press that still differs. · Focus ring. Reference and rebuild both render `outline: 2px solid` at 2px offset — measured on the focused primary at 320 / 360 / 390 / 768 / 1440. The ring lives in base.css; this section does not touch it. ========================================================================== */ .br-renewal { /* ------------------------------------------------------------------------ The one step this section needs that the shared flow scale doesn't carry: a 4u column gap, used only in the 992–1199 band on the way up to the full 16/3 u. Derived from the fluid unit like every other step in the scale, so it tracks the viewport identically — it is simply not common enough across the page to earn a global token. ------------------------------------------------------------------------ */ --br-renewal-gap-mid: calc(var(--br-u) * 4); /* 105.7 @992 -> 108.9 @1199 */ /* Section rhythm is a MARGIN, not padding, and deliberately so: the reference spaces every section with a collapsing 2u margin, so two adjacent sections sit 2u apart rather than 4u. Padding would silently double the gap on assembly. */ margin-block: var(--br-section-y); /* …and this ONE extra unit on top of it is the exception, added on purpose. Measured ink gap — last painted row of a section to the first painted row of the next — walking the page top to bottom at 1440: 57, 130, 151, 105, 232, [57], 113, 114, 138, 113, 247, 255, 279 The bracketed 57 is broker -> renewal, and it is the problem. Broker, renewal and switching are three consecutive sections in the SAME two-column shape with the same 545x727 right-hand block (DECISIONS.md 13), so this is the page's most-repeated beat — and it was being given half the separation of renewal -> cover (113) and switching -> testimonials (138) immediately below it. Walking down the page, it is the one join that visibly stumbles. One unit, not two. The join is built from the collapsing 2u margin PLUS this padding: 56.3077 + 56.3077 = 112.6154, which is the 113 that cover and switching already read. Two units here would make it 169 and overshoot every neighbour. That is also the mechanism the rest of the page uses for a wider join — cover, meet, services and the footer all keep the shared margin and add padding-top; speak adds 2u of padding for its 247. No new value is introduced. Recorded as DECISIONS.md 16: it is a deliberate departure from the comp, which ships the 57. It also buys room for decision 13's proposed re-composition of this block into the left column. */ padding-block-start: var(--br-section-y); } /* ========================================================================== GRID Mobile-first: one column, copy above the colour block. The reference keeps the copy first at every width — this row never reverses on small screens. (Its neighbour above is the mirror image: media first, copy second.) ========================================================================== */ .br-renewal__grid { display: grid; row-gap: var(--br-flow-lg); /* 2u — measured stacked gap */ } @media (min-width: 768px) { .br-renewal__grid { /* minmax(0, 1fr) rather than 1fr: it removes the grid item's automatic minimum size, so a long unbroken word shrinks its column instead of widening the track. Necessary, but on its own NOT sufficient — the buttons inside are flex items with an automatic minimum of their own, and that is what used to leak. See ACTIONS. */ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; /* copy centres against the block */ column-gap: var(--br-flow-lg); /* 2u */ } } @media (min-width: 992px) { .br-renewal__grid { column-gap: var(--br-renewal-gap-mid); } } @media (min-width: 1200px) { .br-renewal__grid { column-gap: var(--br-flow-2xl); } } /* ========================================================================== COPY COLUMN Items stretch to the column (the flex default) — the button row depends on that, see below. The h2 needs no rule of its own: base.css already gives it the measured scale, colour and margin reset. ========================================================================== */ .br-renewal__content { display: flex; flex-direction: column; min-width: 0; /* same reason as the grid track */ } .br-renewal__sub { margin-top: var(--br-flow-sm); /* 1u, measured */ /* .br-lead carries size / leading / tracking / colour. */ /* Runt fix — see divergence 4. Scoped HERE, not on .br-lead in base.css, and that placement is the whole point: `pretty` was put on .br-lead globally earlier today and measured back out by the testimonials agent, because it moved that section's rating line at 768 and took its pixel divergence from 0.0041% to 0.1963%. Their note leaves the door open for exactly this: fix a specific stranded word in the section that owns it, against that section's own numbers, where whoever makes the trade can see what it costs. What it costs here, measured across all twenty widths: the rag changes at 480 and at 1366 — both times a stranded "counts." becoming "it counts." — and nowhere else. (The brief said 480 only; 1366 is real too, same shape.) Block height is identical at every one of the twenty: 130 / 104 / 104 / 104 / 104 / 104 / 78 / 78 / 130 / 104 / 104 / 112 / 112 / 112 / 112 / 112 / 112 / 84 / 84 / 84, before and after. So the geometry sweep this section is judged on cannot move, and 1440 and 390 — the two widths anyone actually compares — are byte-identical either way. */ text-wrap: pretty; } /* ========================================================================== ACTIONS The reference sizes this pair against the width of the BUTTON ROW, not the viewport: whenever the row is 445px or narrower both pills go full width and stack; above that they sit side by side at their natural width. That is why they are still stacked at 1200px (the copy column is only 427px there) yet side by side at 1440px (545px). A viewport media query cannot express that — a container query is the only thing that reproduces it at every width, so the row is its own container. `width: 100%` is load-bearing, not decoration: the container query measures this element, so it must span the column. If it were allowed to shrink to its contents it would measure ~439px, trip its own 445px threshold and stack the buttons at every width. ========================================================================== */ .br-renewal__actions { container-type: inline-size; container-name: br-renewal-actions; margin-top: var(--br-flow-md); /* 4u/3, measured */ display: flex; flex-wrap: wrap; gap: var(--br-flow-2xs); /* u/2, measured */ width: 100%; min-width: 0; } @container br-renewal-actions (max-width: 445px) { .br-renewal__action { width: 100%; } } /* -- long labels stay inside the column ----------------------------------- `.br-btn` is `white-space: nowrap` — measured off the reference, correct for the shipped copy — and these two buttons are flex items, whose automatic minimum size is the width of their own content. Together those mean a label longer than the column cannot shrink: it widens the row, the grid track and finally the page. Measured before this rule, with a 57-character label: the document scrolled to 426px inside a 390px viewport (382 inside 320). Invisible with the signed-off copy; real the first time someone edits the label. min-width: 0 drops the automatic minimum so the button can be narrower than its text. white-space: normal the label wraps instead of running off the end. text-wrap: balance what the reference's own secondary computes — it evens the lines rather than leaving an orphan. overflow-wrap: anywhere covers the case wrapping cannot: one unbreakable token (a pasted URL, a long compound word). overflow: hidden backstop only. With the four above, nothing can reach it — it is here so the containment guarantee survives someone editing them. The primary's measured 200px floor is restated afterwards because `min-width: 0` here would otherwise cancel it, and stays capped at 100% so the floor itself can never overflow a narrower column. DELIBERATE DIVERGENCE. The reference wraps its SECONDARY (it computes pre-wrap + balance, growing to 72px at 390) but lets its PRIMARY spill out of the pill, relying on the page-level `overflow: clip` on
to hide the damage. We wrap both. A truncated or overspilling label is the one piece of text that says what the button does, and clipping it fails WCAG 1.4.4 at 200% zoom. With the signed-off copy neither button wraps at any width in the sweep, so this costs nothing at the judged widths — it only changes what happens on the day the copy gets longer. ------------------------------------------------------------------------- */ .br-renewal__action { min-width: 0; white-space: normal; text-wrap: balance; overflow-wrap: anywhere; overflow: hidden; } .br-btn--primary.br-renewal__action { min-width: min(var(--br-btn-min-w), 100%); /* 200px, measured */ } /* ========================================================================== COLOUR BLOCK 3:4 portrait box, one corner radius (1u), one flat brand colour. No shadow, no border, no overlay — measured: the reference has none of them. aspect-ratio rather than a padding-bottom hack, so the box states its proportion honestly and can never clip. ========================================================================== */ .br-renewal__colourblock { position: relative; overflow: hidden; /* the picture is clipped by the panel's own corner */ aspect-ratio: 3 / 4; background: var(--br-bg-gold); border-radius: var(--br-radius-lg); /* 1u — 24.115 @390, 28.154 @1440 */ } /* THE PHOTOGRAPH AND THE GOLD ARE ONE IMAGE, NOT TWO LAYERS. Founder's brief: "black and white then slightly opaque so the colour beneath shows through a bit — a little transparent, so it feels like the colours merged." greyscale() first, so the source's warm sky stops competing with the brand gold. Two nearly-identical ambers a few degrees of hue apart read as a printing fault; one amber and its own greyscale read as a decision. multiply is what merges them. It keeps whichever layer is darker, so the silhouette stays ink while the sky behind it takes the gold underneath exactly. Screen or overlay would bleach it, and a plain opacity fade over gold would wash the black to brown — which is the sepia mistake this site has already made once. 0.86 rather than 1: at full strength the figure goes pure black and the panel reads as a photograph with a gold sky. The last 14% lets gold up through the silhouette itself, which is the "merged" the brief asked for. contrast() gives back what greyscale costs — a silhouette is carried entirely by the gap between figure and sky, and desaturating closes it. */ .br-renewal__photo { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; border-radius: 0; object-fit: cover; filter: grayscale(1) contrast(1.08); mix-blend-mode: multiply; opacity: 0.86; } /* The blend IS the effect. Where it is unavailable, a raw greyscale photo sitting on gold is the wrong picture rather than a lesser one, so the section falls back to the flat panel it shipped with. */ @supports not (mix-blend-mode: multiply) { .br-renewal__photo { display: none; } } /* Forced-colours modes drop background-color, which would leave a hole where the block is. An outline keeps the composition legible there. */ @media (forced-colors: active) { .br-renewal__colourblock { border: 1px solid CanvasText; } } /* On paper the block WAS 545 x 727 of flat gold carrying no information, so it was dropped outright. It carries a photograph now — and the note left here said what to do on the day that happened: print it, lighter, rather than not at all. The block keeps its box so the picture has somewhere to sit; the gold ground goes, because a page of solid ink behind a greyscale silhouette is a worse print than the silhouette alone. */ @media print { .br-renewal__colourblock { background: none; print-color-adjust: economy; } .br-renewal__photo { mix-blend-mode: normal; opacity: 1; } }