. The asset
pages do not: live-equipment-pages.php lifts the calculator out of the
sector page and re-wraps it in , so the
section-level background below never applied there.
That left the restyle half-applied on 605 pages -- the dark results panel
rendered, but the left column kept the light-page background while the
labels and values had already been recoloured for dark. "£25,000" and
"48 months" came out white on white and the slider tracks vanished.
Caught by looking at an asset page rather than trusting that a sector
page and an asset page render the same markup. They do not.
Giving the asset wrapper the same dark ground fixes both halves at once.
------------------------------------------------------------------ */
.cwaf-eq-calc{
border-radius:18px;
padding:30px 24px 26px;
margin:0 0 30px;
/* WIDTH: the calculator breaks out of the text column.
.cwaf-eq-wrap is capped at 780px because it is a reading measure -- right
for prose, wrong for a two-column widget. Squeezed into it the results
panel fell to 236px and "Amount financed" wrapped onto two lines, so the
same component looked considerably worse here than on the homepage, which
gives it ~1100px. Since Conor's "this is the calculator we will use
throughout the whole site", looking different per page is the one thing it
must not do.
Centred by margin rather than by transform: a transform would make this a
containing block for anything fixed inside it, and this band already
carries sticky CTAs elsewhere on the page. */
width:min(1120px, calc(100vw - 52px));
max-width:none;
margin-left:calc(50% - min(560px, (100vw - 52px) / 2));
}
/* The component's grid is a fixed two columns declared inline, so it cannot
respond on its own. Below 820px the results panel has nowhere to go and the
sliders lose their labels to wrapping, so it stacks. */
@media (max-width: 820px){
[data-calc] .g-2{grid-template-columns:1fr!important;gap:26px!important;padding:26px!important}
.cwaf-eq-calc{width:auto;margin-left:0;padding:22px 16px}
}
.cwaf-eq-calc .usx-calc{
max-width:100%!important;
padding:0!important;
background:transparent!important;
border:0!important;
}
.cwaf-eq-calc .usx-calc-note{color:#c4cde0!important;margin:0 0 24px!important;text-align:left}
.cwaf-eq-calc .usx-calc-terms{color:#aab5ae!important}
.cwaf-eq-calc .usx-calc-terms strong{color:#dfe7e2!important}
/* The exact gradient the homepage calculator sits on, lifted from its computed
style on the live page rather than approximated. It is THREE layers -- a gold
glow, a darkening wash and the green base -- which is why a single 160deg
two-stop linear never looked like it. */
.usx-calc-band,
.cwaf-eq-calc{
background-color:#0e2117!important;
background-image:
radial-gradient(46% 26% at 17% 76%, rgba(224,167,46,.12) 0%, rgba(224,167,46,0) 100%),
linear-gradient(rgba(8,19,13,0) 74%, rgba(8,19,13,.4) 100%),
radial-gradient(110% 46% at 19% 74%, #1f4c36 0%, #173828 25%, #122b1f 50%, #0d2017 75%, #09150f 100%)!important;
}
.usx-calc-band .usx-h2,
.usx-calc-band h2{color:#fff!important}
.usx-calc-note{color:#c4cde0!important;max-width:720px;margin:-14px auto 34px!important}
.usx-calc{
max-width:1040px!important;
background:rgba(255,255,255,.04)!important;
border:1px solid rgba(255,255,255,.10)!important;
border-radius:18px!important;
box-shadow:none!important;
padding:38px!important;
display:grid!important;
grid-template-columns:1.15fr .85fr;
/* ROWS ARE DECLARED, and the right-hand panel is positioned off the END of
the grid rather than off fixed numbers.
This used to read grid-row:1/span 2 for the results panel and grid-row:3
for the summary -- numbers that silently encoded "there are exactly two
sliders". Adding a third (Deposit) broke it: the summary is the tallest
thing in the card, so row 3 stretched to its height with only the short
Deposit slider beside it, opening a ~250px hole in the middle of the left
column and dropping the rate buttons into an orphaned fourth row.
One row per left-column child -- Amount, Term, Deposit, rate buttons --
and the panel halves anchor to -2/-1, so the summary always sits beside
the LAST row whatever that row turns out to be. Adding another control
now means adding one `auto` here and nothing else. */
grid-template-rows:auto auto auto auto;
column-gap:44px;
row-gap:0;
align-items:start;
}
/* ---- left column: sliders and rate buttons */
.usx-calc-row{grid-column:1;margin-bottom:26px!important}
.usx-calc-row label{color:#c4cde0!important;font-size:14px!important;font-weight:600!important}
.usx-calc-row label b{color:#fff!important;font-size:23px!important;font-weight:800}
/* SLIDERS: go back to the NATIVE control, which is what the homepage uses.
The homepage range is appearance:auto with accent-color:#e0a72e, so the
browser paints the gold filled portion to the left of the thumb and a small
gold thumb. site-core sets -webkit-appearance:none with a custom 24px thumb,
which kills the fill and gives a fat dot. That was the single most visible
difference between the two calculators and a property-by-property colour
check never caught it, because every colour matched. */
.usx-calc input[type=range]{
-webkit-appearance:auto!important;
appearance:auto!important;
accent-color:#e0a72e!important;
background:#fff!important;
height:6px!important;
border-radius:0!important;
}
.usx-calc input[type=range]::-webkit-slider-thumb{
-webkit-appearance:auto!important;
width:auto!important;height:auto!important;
background:initial!important;border-radius:initial!important;box-shadow:none!important;
}
.usx-calc input[type=range]::-moz-range-thumb{
width:auto!important;height:auto!important;
background:initial!important;border:initial!important;border-radius:initial!important;
}
/* CTA: the homepage's notched gold button, values copied from its computed
style -- clip-path cuts 16px off the bottom-right corner to make the arrow. */
.usx-calc-out .usx-btn,
.usx-calc-out a[class*="btn"],
.usx-calc-sum .usx-btn,
.usx-calc-sum a[class*="btn"],
.cwaf-calc-cta-moved{
background-color:#ffc233!important;
background-image:linear-gradient(180deg,#ffd15c 0%,#ffc233 46%,#f0a91a 100%)!important;
color:#0e2117!important;
border:0!important;
border-radius:0!important;
padding:14px 22px 14px 16px!important;
font-size:14px!important;
font-weight:800!important;
clip-path:polygon(0 0,100% 0,calc(100% - 16px) 100%,0 100%);
box-shadow:none!important;
}
.usx-calc-rates{grid-column:1;margin:0!important}
/* THE NAMED RATE BANDS, restyled for the dark panel.
site-core styles this calculator for a WHITE card. This file re-skins it onto
the dark green band, and anything site-core adds in its own light palette
arrives here unreadable unless it is restated. The tier key landed at
#3d4d45 on #0e2117 -- measured 1.88:1, against a 4.5:1 AA floor. That is the
same white-on-white failure this file was created to stop, reproduced by
adding one paragraph upstream, so the rule is: nothing new goes into the
calculator markup without a matching line here.
#9aa6bd is not a fresh choice -- it is what .usx-calc-sum span already uses
on this exact background, where it measures comfortably past AA. */
.usx-calc-tierkey{color:#9aa6bd!important;font-size:12.5px!important;line-height:1.65!important}
/* ---- BAND STATE, STATED ONCE AND UNAMBIGUOUSLY -------------------------
The selected band was painting the WRONG button. Whichever band was gold at
page load stayed gold after the selection moved, and the genuinely selected
one went translucent -- so on the tractor page "Standard" sat gold while
"Specialist" was the live choice. On a calculator whose entire job is to show
a price, the highlight pointing at a rate you are not being quoted is not a
cosmetic bug.
Part of it was live-brand-gradient.php tagging the initially-gold button
cwg-btn and never removing it (fixed at source there). The rest was four
stylesheets each having an opinion about .usx-calc-rate with mixed
!important, where the winner depended on load order rather than on state.
These two rules end the argument: both are keyed on :not(.is-on)/.is-on so
they can only ever describe the real state, and the repeated class raises
specificity above every other opinion without resorting to an id.
background-image is reset explicitly -- the shorthand alone left a stale
gradient behind on a button that had been selected earlier. */
.usx-calc .usx-calc-rate.usx-calc-rate.usx-calc-rate:not(.is-on){
background:rgba(255,255,255,.04)!important;background-image:none!important;
border:1px solid rgba(255,255,255,.18)!important;color:#fff!important;
}
.usx-calc .usx-calc-rate.usx-calc-rate.usx-calc-rate.is-on{
background:#e0a72e!important;
background-image:linear-gradient(#ffd15c 0%,#ffc233 46%,#f0b021 100%)!important;
border:1px solid #e0a72e!important;color:#0e2117!important;
}
/* ---- THE SMALL PRINT, ALIGNED ------------------------------------------
Measured on an asset page before this: the general disclaimer rendered 499px
wide flush against the card's left edge, while the representative example
below it was 760px and started 155px further right -- two widths, two left
edges, both centre-aligned, under a card 1070px wide. It read as two stray
paragraphs rather than the footer of the thing above them.
The 499px was not a choice: .cwaf-eq-wrap sets `p{max-width:66ch}` for body
prose, and these two inherited it. So the width is stated here rather than
left to whatever measure the surrounding page happens to use.
Left-aligned, not centred. Centred text is fine for one line and poor for
eight -- every line starts in a different place, which is exactly the thing
that looked wrong. Both blocks now share one measure and one edge, and the
representative example leads: it is the regulated figure, it is brighter and
a size larger, and live-calc-repex.php now inserts it ABOVE the general
small print rather than below. */
[data-calc] > p,
[data-calc] > p.cwaf-repex{
max-width:880px!important;
margin-left:auto!important;margin-right:auto!important;
text-align:left!important;
}
[data-calc] > p.cwaf-repex{
margin-top:22px!important;
font-size:13px!important;line-height:1.65!important;
color:rgba(255,255,255,.82)!important;
}
/* The general disclaimer sits under it, quieter. */
[data-calc] > p.cwaf-repex + p{
margin-top:12px!important;
font-size:12px!important;line-height:1.6!important;
color:rgba(255,255,255,.55)!important;
}
@media (max-width:820px){
[data-calc] > p,[data-calc] > p.cwaf-repex{max-width:none!important}
}
/* ---- THE FIGURES READ AS FIGURES ---------------------------------------
Conor, 28 Sep: "the text on the numbers should be bright white."
Every number in this widget is now pure #fff rather than the bluish greys
inherited from the panel's label palette, and tabular-nums stops the digits
jumping width as the sliders move -- £1,111 and £8,888 now occupy exactly the
same space, so the column stops twitching. Labels stay grey on purpose: the
contrast between a grey label and a white figure is what makes the figure
read first. */
.usx-calc-row label b{color:#fff!important;font-variant-numeric:tabular-nums}
.usx-calc-sum b{color:#fff!important;font-size:16.5px!important;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.usx-calc-big{font-variant-numeric:tabular-nums}
.usx-calc-tier{opacity:.88!important}
.usx-calc-eqapr{opacity:.82!important;font-variant-numeric:tabular-nums}
.usx-calc-pc{font-variant-numeric:tabular-nums}
/* The unit and the APR equivalent on each band button. Same reasoning as the
tier key above: site-core styles these for a white card, so without a line
here they arrive on the dark band in a colour chosen for the wrong
background. They inherit the button's own colour, which is already proven
against both the translucent and the gold states. */
.usx-calc-pc small{color:inherit!important;opacity:.8}
.usx-calc-eqapr{color:inherit!important;opacity:.72;font-size:11.5px!important}
.usx-calc-rate .usx-calc-tier{color:inherit!important;opacity:.78}
.usx-calc-rate.is-on .usx-calc-tier{opacity:.82}
.usx-calc-lbl{color:#c4cde0!important;font-size:14px!important;font-weight:600!important}
.usx-calc-btns{gap:10px!important}
.usx-calc-rate{
background:rgba(255,255,255,.04)!important;
border:1px solid rgba(255,255,255,.18)!important;
color:#fff!important;padding:12px 0!important;
}
.usx-calc-rate:hover{border-color:#e0a72e!important}
.usx-calc-rate.usx-calc-rate.is-on{
background:linear-gradient(180deg,#ffd15c 0%,#ffc233 46%,#f0a91a 100%)!important;
border-color:#d9a01a!important;color:#0e2117!important;
}
/* the stale-gold class from live-brand-gradient must not fight this */
.usx-calc-rate.usx-calc-rate.cwg-btn:not(.is-on),
.usx-calc-rate.usx-calc-rate.cwg-chip:not(.is-on){
background:rgba(255,255,255,.04)!important;background-image:none!important;
border-color:rgba(255,255,255,.18)!important;color:#fff!important;
}
/* ---- right column: the dark results panel, in two meeting halves */
.usx-calc-out{
grid-column:2;grid-row:1/-2;
/* align-items:start on the grid means this stops at its content height.
That was fine while the button was inside it; once the button moved to
the bottom half this shrank and opened a visible gap between the two
halves of what is meant to read as one panel. Stretch closes it. */
align-self:stretch!important;
display:flex!important;flex-direction:column;justify-content:center;
text-align:center;
background:#0e2117;border:1px solid rgba(224,167,46,.25);border-bottom:0;
border-radius:14px 14px 0 0;padding:32px 32px 18px!important;margin:0!important;
}
.usx-calc-out .usx-calc-lbl{color:#9aa6bd!important;font-size:13.5px!important;margin-bottom:6px}
.usx-calc-big{
font-size:52px!important;font-weight:900!important;letter-spacing:-1.5px;
color:#e0a72e!important;line-height:1;display:block;margin-bottom:14px;
}
.usx-calc-out .btn-gold,.usx-calc-out a,.usx-calc-out button{margin-top:6px}
.usx-calc-sum{
grid-column:2;grid-row:-2/-1;
grid-template-columns:1fr!important;gap:0!important;
background:#0e2117;border:1px solid rgba(224,167,46,.25);border-top:0;
border-radius:0 0 14px 14px;margin:0!important;
padding:6px 32px 26px!important;border-top:0!important;
}
.usx-calc-sum div{
flex-direction:row!important;justify-content:space-between;align-items:baseline;
padding:11px 0;border-top:1px solid rgba(255,255,255,.09);
}
.usx-calc-sum span{color:#9aa6bd!important;font-size:13.5px!important}
.usx-calc-sum b{color:#fff!important;font-size:16px!important}
.cwaf-calc-cta-moved{
display:block!important;width:100%;text-align:center;
margin:18px 0 4px!important;
}
.usx-calc-sum div:last-of-type{border-bottom:0}
/* The representative example measures 5.32:1 against the dark band, which
passes WCAG AA for small text -- it was NOT failing. Lifted anyway: it is
11.5px regulated disclosure and there is no cost to making it comfortable
rather than merely compliant. Measured, not guessed. */
.usx-calc-terms{color:#aab5ae!important}
.usx-calc-terms strong{color:#dfe7e2!important}
@media(max-width:900px){
.usx-calc{grid-template-columns:1fr;grid-template-rows:none!important;row-gap:0;padding:26px 20px!important}
.usx-calc-row,.usx-calc-rates{grid-column:1}
.usx-calc-out{grid-column:1;grid-row:auto;margin-top:26px!important}
.usx-calc-sum{grid-column:1;grid-row:auto}
}
.cwaf-auc{padding:0}
.cwaf-auc section{margin:0 0 56px}
.cwaf-auc h2{font-size:clamp(1.45rem,2.6vw,1.95rem);color:#143024;margin:0 0 10px;
padding-top:14px;border-top:3px solid #E0A72E;display:inline-block}
.cwaf-auc h3{font-size:1.06rem;margin:26px 0 10px;color:#143024}
.cwaf-auc-intro{max-width:70ch;line-height:1.6;margin:0 0 20px}
.cwaf-auc-count{font-weight:400;color:#6b7c73;font-size:.9rem}
.cwaf-auc-cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.cwaf-auc-card{border:1px solid #e3eae6;border-radius:8px;padding:16px 18px;background:#fff}
.cwaf-auc-card h3{margin:0 0 4px;font-size:1.02rem}
.cwaf-auc-card p{margin:0 0 6px;font-size:.93rem;line-height:1.5}
.cwaf-auc-where{color:#85620E;font-weight:600;font-size:.86rem!important}
/* cwaf-footer-merge */
.site-footer,.site-footer-legal{background:#0e2117 !important}.site-footer{padding-bottom:18px !important}.cwaf-fidx{border-top:0 !important;padding-top:8px !important}.cwaf-fidx .fidx-title{opacity:.75;letter-spacing:1px}.site-footer-legal{padding-top:14px !important;border-top:1px solid rgba(255,255,255,.07)}
/* cwaf-cfx-rate-state */
.usx-calc-rate.usx-calc-rate.cwg-btn:not(.is-on),
.usx-calc-rate.usx-calc-rate.cwg-chip:not(.is-on){
background:#fff!important;
background-image:none!important;
border-color:#dbe3dd!important;
color:#3d4d45!important;
}
.usx-calc-rate.usx-calc-rate.is-on{
background:#E0A72E!important;
background-image:none!important;
border-color:#E0A72E!important;
color:#0e2117!important;
}
/* cwaf-header-mobile-fix */
@media (max-width:430px){.cwaf header .btn-gold,.cwaf .site-header .btn-gold{padding:9px 11px !important;font-size:11.5px !important;letter-spacing:0 !important;}.cwaf header .max-w,.cwaf .site-header .max-w{padding-left:12px !important;padding-right:12px !important;gap:8px !important;}}
/* cwaf-brand-depth-css */
/* HERO — the worklight. Two layers: a warm gold bloom at the light's core over
a green ramp. Anchored at 16-20% across and ~72-76% down, which is where the
primary CTA sits. */
.cwd-hero.cwd-hero.cwd-hero{
background-color:#143024!important;
background-image:
radial-gradient(52% 62% at 20% 76%,
rgba(224,167,46,.13) 0%,
rgba(224,167,46,.04) 45%,
rgba(224,167,46,0) 70%),
radial-gradient(95% 125% at 16% 72%,
#21482f 0%,
#1a3b29 40%,
#143024 70%,
#0f2519 100%)!important;
background-repeat:no-repeat!important;
background-size:cover!important;
}
/* BANDS — flat, quiet, with the plate rule at the top edge. Flat is deliberate:
it is what removes the seam between adjacent sections. */
.cwd-band.cwd-band.cwd-band{
background-color:#163527!important;
background-image:none!important;
box-shadow:inset 0 1px 0 rgba(224,167,46,.30)!important;
}
.cwd-deep.cwd-deep.cwd-deep{
background-color:#0e2117!important;
background-image:none!important;
box-shadow:inset 0 1px 0 rgba(224,167,46,.18)!important;
}
/* FIGURES — align like a schedule, not like marketing copy. */
body{ font-variant-numeric:tabular-nums; }
/* ---------------------------------------------------------------------------
* GOLD
*
* The site was running FIVE different golds — #e0a72e, #e7b53c, #a97b12,
* #c0a038 and #8a6a1c — applied inconsistently. The problem was never that gold
* was absent, it was that it was muddled, and two of the five were muddy enough
* to look like a printing fault rather than a brand colour.
*
* Replaced with a two-value system, because gold has to do two different jobs:
*
* ON DARK #f0b32b contrast 7.57 on #143024, 7.11 on the band, 8.96 on the
* deep green. Brighter and more saturated than the old
* #e0a72e (6.59) while staying metallic rather than lemon.
* ACTIONS #ffc233 buttons, chips AND text. Originally text sat one step
* back at #f0b32b so the CTA would stay dominant. That was
* wrong: a button's prominence comes from being a filled
* block with a sheen, not from its hue, so holding the text
* back bought no hierarchy and just made 52 elements per
* page look flat. Unified 19 Sep 2026. #ffc233 also has
* BETTER contrast on the brand greens than #f0b32b
* (8.81 vs 7.57), so this is a free accessibility gain.
*
* NOTE FOR ANYONE MATCHING PRINT: the York poster's gold is MORE muted than any
* of these (~#d4a843 mustard-ochre). Going brighter on screen was a deliberate
* departure, not a match. If the two ever need to agree, this is the value to
* change, and the poster is the fixed point.
* ON LIGHT #85620e contrast 5.40 on the site's near-white. One step deeper
* than #8a6a1c (4.87) because the 12.5px `.eyebrow` sat at
* 4.49 against its own slightly tinted panel — fractionally
* under AA. Measured on the rendered page, not assumed.
*
* THE ON-LIGHT VALUE FIXES A REAL ACCESSIBILITY FAILURE. #a97b12 was being used
* for gold text on light backgrounds at 3.67:1, which is below WCAG AA's 4.5
* for body text. #8a6a1c was already in the site's palette, so this is
* consistency rather than invention.
*
* A single hex swap could not do this: #a97b12 appeared 66 times on dark
* backgrounds and 14 times on light ones. The same colour, two contexts, two
* correct answers. So the script below resolves each element's EFFECTIVE
* background by walking up the tree until it finds an opaque one, and picks the
* gold that belongs there.
*
* BUTTONS get a vertical sheen — lighter at the top edge, deeper at the bottom.
* That is what makes gold read as brass or a machined plate rather than as flat
* yellow, and it is the same vernacular as the hero worklight above. Dark text
* on the fill measures 8.96:1.
*
* Small gold elements (tick circles, chips, arrows) get the flat bright gold and
* NOT the sheen: a vertical gradient across a 20px circle reads as a rendering
* artefact, not as metal. The split is on rendered width, at 90px.
*
* WHAT THIS DELIBERATELY DOES NOT TOUCH
* -------------------------------------
* #9aa6bd, the slate used on footer links. It is not gold so the detector
* cannot match it, and that is important: live-faq-cta.php uses
* `style="color:#9aa6bd;"` as its scoping needle to find the footer town links.
* Changing that colour would silently break the footer fix that took three
* attempts to land on 15 Sep 2026. Left alone on purpose.
* ------------------------------------------------------------------------- */
.cwg-dark.cwg-dark{ color:#ffc233!important; }
.cwg-light.cwg-light{ color:#85620e!important; }
/* Buttons run one step brighter than gold text, deliberately. The brightest
* thing on the page should be the thing you want clicked; if all ~60 gold text
* instances matched the buttons, gold would stop being an accent and the CTAs
* would lose their relative pull. Dark text on this fill measures 10.42:1. */
.cwg-btn.cwg-btn.cwg-btn{
background-color:#ffc233!important;
background-image:linear-gradient(180deg,#ffd15c 0%,#ffc233 46%,#f0a91a 100%)!important;
color:#0e2117!important;
border-color:#d9a01a!important;
}
.cwg-chip.cwg-chip.cwg-chip{ background-color:#ffc233!important; }