/*
* Staging divergence: patch up what the delivered CSS fails to define.
*
* Two unrelated gaps live here: classes the reference's markup uses but its
* Tailwind build compiles no rule for (sections 1-2), and the custom-property
* defaults LiteSpeed's UCSS pass destroys on the way out (section 3).
*
* The reference's markup uses four classes that its own Tailwind build emits no
* rule for, so on the live site they resolve to nothing and the elements simply
* inherit. This was verified against production, not assumed: its served CSS
* chunk is byte-identical to the copy in /_next/static, and its DOM carries the
* same class names. So this is a latent bug in the reference design, not
* migration drift — and per the brief, staging is the side that diverges. The
* live site is not being touched.
*
* Loaded AFTER the two compiled chunks (see inc/parity.php) so it can see the
* tokens they define.
*
* Every rule here is inside one of the chunk's own layers — utilities for the
* utility classes, theme for the tokens they read, properties for the variable
* defaults. That is load-bearing, not tidiness: unlayered CSS beats *all*
* layered CSS regardless of specificity, so plain rules here would outrank
* `.hover\:text-black:hover` and friends and kill the hover states on the VAT
* toggle, the site-index chips and the map's postcode reset link — and a plain
* `*` rule in section 3 would outrank the very utilities it exists to feed.
* Merging into the existing layers keeps normal cascade order, so the variants
* still win. The layer names and order (properties, theme, base, components,
* utilities) are the chunk's — none are introduced here.
*/
/* ---------------------------------------------------------------------------
* 1. The missing steps in the grey scale.
*
* The palette defines 50/100/200/300/500/700/900 — every value a neutral
* (R=G=B) — and the markup asks for 400, 600 and 800. Each is the midpoint of
* its two neighbours, which is how the existing scale already steps, so the
* ramp stays even and neutral:
*
* 400 = mid(#BFBFBF 191, #6B6B6B 107) = 149 = #959595
* 600 = mid(#6B6B6B 107, #3A3A3A 58) = 83 = #535353
* 800 = mid(#3A3A3A 58, #111111 17) = 38 = #262626
*
* Contrast on white: grey-600 7.7:1 and grey-800 15.1:1 both clear WCAG AA.
* grey-400 lands at 3.0:1 — fine for the header chevron (non-text, needs 3:1)
* but short of the 4.5:1 AA wants for the pricing eyebrow, the site-index
* chips and the postcode placeholder. That is inherent to a "grey-400" in this
* ramp (Tailwind's own grey-400 is 3.0:1 too), so the interpolation is kept
* and the trade-off flagged rather than silently darkened.
* ------------------------------------------------------------------------ */
@layer theme {
:root,
:host {
--color-grey-400: #959595;
--color-grey-600: #535353;
--color-grey-800: #262626;
}
}
@layer utilities {
/* Selector shapes below mirror exactly how the chunk emits the variants
that do compile (`.file\:mr-3::file-selector-button`,
`.group-focus-within\/sub\:visible:is(:where(.group\/sub):focus-within *)`). */
.text-grey-400 {
color: var(--color-grey-400);
}
.text-grey-600 {
color: var(--color-grey-600);
}
.text-grey-800 {
color: var(--color-grey-800);
}
.bg-grey-400 {
background-color: var(--color-grey-400);
}
.placeholder\:text-grey-400::placeholder {
color: var(--color-grey-400);
}
.file\:text-grey-800::file-selector-button {
color: var(--color-grey-800);
}
/* Coverage-map legend dots: the hover tint never rendered, because both the
named-group rule and the grey-400 token were missing. */
.group-hover\/dot\:bg-grey-400:is(:where(.group\/dot):hover *) {
background-color: var(--color-grey-400);
}
/* -------------------------------------------------------------------
* 2. Italic display emphasis.
*
* Used on the second line of the homepage h1 ("24/7 across all 33
* boroughs.") and on the legacy stat figures. `.tagline` is the design's
* established display-italic treatment, but it is a full component (red,
* uppercase, tracked, weight 900); `italic-display` reads as a modifier,
* so it takes only the family and the slant and inherits everything else.
* That keeps the h1's own 800 weight and white colour, and leaves the
* legacy figures white-on-red rather than forcing them red-on-red.
*
* No italic Barlow Condensed face is shipped (all nine @font-face rules
* are font-style:normal), so the browser synthesises the oblique — which
* is exactly how `.tagline` already renders on the live site.
* ------------------------------------------------------------------ */
.italic-display {
font-family: var(--font-display);
font-style: italic;
}
}
/* ---------------------------------------------------------------------------
* 3. Re-supply the Tailwind custom-property defaults that LiteSpeed's UCSS
* pass destroys.
*
* PageSpeed (mobile) failed the colour-contrast audit on the coverage card's
* `` and `
`. Those
* sit in `.bg-gradient-to-br.from-black.to-black-800`, so the reported ratio
* should have been ~20:1. It was not: the card was painting no background at
* all, leaving white text on the light `.section-soft` band.
*
* Cause is in the delivered CSS, not the markup. Tailwind v4 registers its
* internal variables with `@property`, e.g.
*
* @property --tw-gradient-from-position { syntax:"";
* inherits:false; initial-value:0% }
*
* LiteSpeed's Unique CSS generator rewrites every `syntax:` descriptor that
* names a type, stripping the angle-bracketed token as if it were an HTML tag,
* and emits `syntax:""`. An empty syntax string is not a valid descriptor, so
* per spec the whole @property rule is invalid and dropped — the variable is
* left unregistered with no initial value. Ten rules are hit; the plain
* `syntax:"*"` ones survive, which is why this is selective rather than total.
*
* An unregistered, unset var() with no fallback is guaranteed-invalid, and it
* poisons the whole declaration that substitutes it. So:
*
* - every gradient dies. `.from-black` builds --tw-gradient-stops out of
* `var(--tw-gradient-from-position)`; that is now invalid, so
* `background-image: linear-gradient(var(--tw-gradient-stops))` computes
* to `none`. Nine on the homepage alone.
* - every ring dies. `.ring-1` sets --tw-ring-shadow using
* `calc(1px + var(--tw-ring-offset-width))`; invalid, so the variable
* falls back to its `0 0 #0000` initial and no outline is drawn. Twelve on
* the homepage.
* - shadow/drop-shadow colour utilities would go the same way via the
* `*-alpha` variables.
*
* The fix is Tailwind's own: it already ships this exact universal fallback in
* `@layer properties`, but gates it behind an `@supports` test for engines
* without `@property` support, which Chrome passes and therefore skips. This
* repeats the ten affected declarations ungated. `@layer properties` is the
* chunk's lowest layer, so the utilities that set these variables still win —
* these are only the initial values the registrations were supposed to supply.
*
* Values are copied from the chunk's own @property `initial-value` descriptors,
* not chosen here. If UCSS is ever disabled, or LiteSpeed fixes the rewrite,
* this block becomes a harmless no-op rather than an override.
* ------------------------------------------------------------------------ */
@layer properties {
*,
::before,
::after,
::backdrop {
--tw-gradient-from: #0000;
--tw-gradient-via: #0000;
--tw-gradient-to: #0000;
--tw-gradient-from-position: 0%;
--tw-gradient-via-position: 50%;
--tw-gradient-to-position: 100%;
--tw-shadow-alpha: 100%;
--tw-inset-shadow-alpha: 100%;
--tw-drop-shadow-alpha: 100%;
--tw-ring-offset-width: 0px;
}
}