/* aldermere.css — Aldermere Water. Loaded after site-base.css, never alongside
shout-labs.css.
A full REPAINT of the estate's shared class vocabulary, not a palette swap. Every class
name here is emitted by a partial that both sites share, and renaming one would change
Shout Labs' rendered HTML — so the isolation between the two themes is by DOCUMENT, not
by selector: two sheets are never loaded into the same page, so an unprefixed .div here
can never meet an unprefixed .div there. Nothing in this file may invent a class name,
because a name that exists in only one theme is a name a shared partial cannot emit.
The register is a licensed utility talking to bill payers, half of whom arrive on it
because their water has stopped. That sets every decision below: humanist sans at a size
you can read on a phone in the rain, no display face, no all-caps, no monospace, rounded
surfaces, and colour that only ever means something. Accessibility is a demo asset here,
not a checklist — every interactive target is at least 44px, every focusable thing has a
visible ring, and every text/ground pair in this file was measured, not eyeballed.
Shout's crop marks, hazard tape, CLASSIFIED stamp and rotating schematic get no rules:
Aldermere emits none of that markup, and styling markup that never renders is how dead
CSS is born. */
:root{
/* ---- brand ----
Contrast ratios below are against --paper unless stated, computed with the WCAG 2.x
relative-luminance formula. Anything that carries body-size text clears 4.5:1;
anything that is only a border, a fill or a graphic clears 3:1. */
--ink:#0F2A38; /* 14.0:1 — body copy, headings, dark grounds */
--paper:#F4F8F9; /* the page ground; a tint, not white, so white cards lift off it */
--surface:#FFFFFF; /* cards and panels sit ABOVE the page, not flush with it */
--paper-2:#E4EEF2; /* the tinted band, i.e. the .cat contract */
--primary:#0B6E8F; /* 5.4:1 — links, rules, the one brand colour */
--deep:#08475C; /* 9.5:1 — primary pressed, and the status bar ground */
--all-clear:#1F8A6D; /* 4.0:1 — SURFACE AND GRAPHIC ONLY. See --all-clear-ink. */
--planned:#A86100; /* 4.49:1 — misses body size by a hair. See --planned-ink. */
--incident:#B3261E; /* 6.1:1 — safe as text */
--line:#CFDDE3; /* hairline rules; 1.3:1, so it never carries meaning alone */
/* Two darkened companions, and the reason they exist rather than a "close enough".
#1F8A6D reaches 4.0:1 on paper and #A86100 reaches 4.49:1 — both fail AA at body size,
and a badge reading "Planned" IS body size. The brand colours stay exactly as issued
for fills, dots and borders; these carry the words. */
--all-clear-ink:#146149; /* 6.9:1 */
--planned-ink:#8F5200; /* 5.8:1 */
/* The all-clear lifted for the dark status bar, where #1F8A6D lands at 2.4:1 against
--deep and fails the 3:1 a non-text indicator needs. */
--all-clear-bright:#4FC08D; /* 4.5:1 on --deep */
--muted:#43616F; /* 6.2:1 — secondary text that is still text, so still AA */
--line-2:rgba(15,42,56,.08);
/* Text on the two dark grounds (--ink and --deep). */
--on-dark:#F4F8F9; /* 13.9:1 on --ink */
--on-dark-muted:#B7CBD5;/* 8.9:1 on --ink */
--on-dark-accent:#7FC3DC;/* 7.6:1 on --ink — the kicker colour, inverted */
/* Borders on things you can click or type into. WCAG 1.4.11 wants 3:1 for the boundary of
a control, and --line is 1.3:1 — correct for a rule between two paragraphs, wrong for
the edge of a text box. */
--line-control:#5E7C8A; /* 3.6:1 on --surface */
--focus:var(--ink); /* re-pointed at --on-dark inside every dark band, below */
--maxw:1180px;
--band-pad:72px;
--radius:14px; /* cards and panels */
--radius-sm:8px; /* buttons, inputs, badges */
--tap:44px; /* the floor for anything with a pointer on it */
/* A humanist stack, and no in the to fetch it with: the Aldermere arm of
_ShoutLayout emits no font tags at all, which keeps a third-party origin off a site
served under default-src 'self' and costs no round trip. San Francisco, Segoe UI,
Cantarell and Noto Sans are all humanist — open apertures, true lowercase, legible at
a glance and at an angle, which is the whole argument for the genre here. No mono face
is declared anywhere in this file: a reference like INC-2612 is a name, not a column of
figures, and setting it in monospace is Shout's dossier conceit, not ours. */
--sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Cantarell,"Noto Sans",Ubuntu,"Helvetica Neue",Arial,sans-serif;
}
/* 18px, not 16. The estate's shared body rule in site-base.css sets 16px/1.55 for a theme
that says nothing; this one says something. */
body{font-family:var(--sans); font-size:18px; line-height:1.6; color:var(--ink); background:var(--paper)}
::selection{background:var(--primary); color:#fff}
/* ---- focus ----
One universal rule rather than per-component ones, because the component that gets
forgotten is always the one somebody tabs into. outline (not box-shadow) so it survives
forced-colors mode, and an offset so the ring never sits on top of the glyphs it is
pointing at. Dark bands re-point --focus rather than restating the rule. */
:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
.topbar,.ticker,.req{--focus:var(--on-dark)}
/* ---- top status bar ----
Shout's is a 34px hairline of tracked-out uppercase. Aldermere's carries the 24-hour
emergency number, so it is a solid band you cannot mistake for chrome, at a size you can
read without leaning in. It wraps rather than truncates: the regulator line is a full
sentence and the whole point of it is that it can be read. */
.topbar{background:var(--deep); color:var(--on-dark)}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center; gap:10px 28px; flex-wrap:wrap}
.topbar .wrap > div{padding:11px 0; font-size:15px; line-height:1.45}
.topbar a{text-decoration:underline; text-underline-offset:3px}
/* Steady, not pulsing. Shout's dot has a 2.4s keyframe on it; a utility's status light
blinking at a customer who has just lost their supply reads as an alarm going off. */
.dot{display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--all-clear-bright); margin-right:10px}
/* ---- header / nav ---- */
header{position:sticky; top:0; z-index:40; background:rgba(244,248,249,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
header .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px 32px; min-height:80px; flex-wrap:wrap; padding-top:8px; padding-bottom:8px}
.brand{display:flex; align-items:center; gap:14px}
.brand .mk{font:700 28px/1.1 var(--sans); letter-spacing:-.02em; color:var(--ink)}
/* The is the interpunct the layout writes between the words of siteName — deliberately
left unthemed in _ShoutLayout because reproducing that IHtmlContent byte for byte is the
highest-risk edit in the file. Shout paints it hazard orange; here it is quiet primary,
so "Aldermere·Water" reads as one name and not as two. */
.brand .mk b{color:var(--primary); font-weight:700}
.brand .sub{font:600 13px/1.4 var(--sans); color:var(--muted); border-left:1px solid var(--line); padding-left:14px}
nav{display:flex; align-items:center; gap:6px 8px; flex-wrap:wrap}
/* The nav items ARE the site's five sections, so they wrap on a narrow screen rather than
disappearing. Shout can afford `nav .nlink{display:none}` under 900px because its hazard
CTA survives the cull and stands in for the menu; Aldermere seeds no formPage, so the
same rule would leave an empty