/* ============================================================
Easton Concrete — site/style.css
Distinct template recreated from eastonconcretecontractors.com.
Palette: deep navy + teal + orange CTA.
Fonts: Barlow Condensed (headings) + Roboto (body), self-hosted.
============================================================ */
/* ---------- Design Tokens (the reskin surface) ----------
Every palette-critical color lives here (or in a [data-theme] block below) —
no block rule hardcodes a brand hex. The token set IS the skin. */
:root {
--navy: #15233F; /* top bar, dark sections, footer */
--navy-2: #1B2C4A; /* slightly lighter navy panels (service cards) */
--navy-card: #20314f; /* quote form card */
--teal: #2E7077; /* brand: bands + white-ink fills AND teal ink on light (h3, links) — 5.68:1 both ways vs white */
--teal-dark: #245a60; /* teal hover */
--teal-bright: #3a8a92; /* teal on dark bg — 3.89:1 on --navy is grandfathered (pre-contract section labels); new palettes must hit ≥4.5 on their dark bg */
--orange: #D4582F; /* warm CTA fill: primary buttons, phone accents */
--orange-dark: #B8471F; /* CTA hover */
--orange-bright: #e36a3f; /* orange on dark bg (4.76:1 on --navy; its 4.25:1 on --navy-2 card links is grandfathered) */
--orange-ink: var(--orange); /* accent TEXT on light (.accent, wordmark letter) — default's 4.01:1 on white is grandfathered (pre-contract); new palettes must hit ≥4.5 on bg AND bg-alt */
--accent-quote: var(--orange); /* decorative quote-mark icon on the dark estimate card */
--color-on-accent: #ffffff; /* ink ON the orange CTA fills — white here is grandfathered (pre-contract, 4.01:1 on #D4582F); new palettes must hit ≥4.5 on BOTH orange fills (light accent ⇒ dark ink) */
--color-link: var(--teal);
--color-text: #333a44;
--color-text-muted: #6b7280;
--color-heading: #15233F;
--color-bg: #ffffff;
--color-bg-alt: #f3f5f8; /* cool blue-white off-white (hue ~216°) */
--color-border: #e1e5eb;
--color-error: #b00020;
--color-focus: var(--teal);
--color-fg-on-dark: #ffffff;
/* muted foregrounds ON dark navy chrome (top bar + footer) — tinted per palette */
--on-dark-nav: #d8dde6; /* top-bar text + links */
--on-dark-social: #cfd6e0; /* top-bar social icons */
--on-dark-body: #aeb6c4; /* footer body text */
--on-dark-link: #c2c9d4; /* footer links + contact list */
--on-dark-faint: #8590a1; /* legal fine print */
--on-teal-label: #cfeaec; /* pale section label ON the teal band (4.50:1 on --teal) */
/* photo-overlay gradients (tinted washes over section bg images) */
--overlay-dark: linear-gradient(rgba(21,35,63,0.82), rgba(21,35,63,0.88)); /* .bg-host default (navy) */
--overlay-teal: linear-gradient(rgba(36,90,96,0.86), rgba(30,75,80,0.92)); /* .bg-teal */
--overlay-soft: linear-gradient(rgba(21,35,63,0.55), rgba(21,35,63,0.72)); /* .bg-soft (banner) */
--overlay-hero: linear-gradient(rgba(21,35,63,0.74), rgba(21,35,63,0.84)); /* .hero (over its fixed CSS bg photo) */
/* brand-tinted washes/rings (alpha too high / too saturated to count as neutral) */
--wash-accent: rgba(46,112,119,0.22); /* .feature-aside-box teal panel wash */
--focus-ring: rgba(46,112,119,0.18); /* utility-form focus halo */
--shadow-tel: 0 4px 0 rgba(20,35,63,0.35); /* hard navy shadow under the header phone button — .btn-tel:hover re-declares the same 0 4px 0 geometry with a different color token, so change geometry in BOTH places */
/* check-bullet / caret data-URIs — CSS vars can't interpolate into a data-URI,
so each palette supplies its own full url() with the new fill */
--bullet-hero: url("data:image/svg+xml;utf8,");
--bullet-badge: url("data:image/svg+xml;utf8,");
--bullet-snow: url("data:image/svg+xml;utf8,");
--tick-teal: url("data:image/svg+xml;utf8,");
--select-caret: url("data:image/svg+xml;utf8,");
--shadow-sm: 0 1px 3px rgba(20,35,63,0.12);
--shadow-md: 0 10px 30px rgba(20,35,63,0.16);
--shadow-lg: 0 18px 50px rgba(20,35,63,0.30);
--max-w: 1200px;
--header-h: 80px;
--font-body: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
--font-head: "IBM Plex Sans Condensed", "Barlow Condensed", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
/* ============================================================
ASSEMBLY-TIME PALETTE VARIANTS — the standard every skin follows
(full contract: templates/_template/CLAUDE.md "Color palettes")
Default (no attribute) = the navy + teal + orange skin in :root above.
To build a site in another palette, set the attribute on :
Rules of the system (hard requirements for every palette block):
• FULL-SPECTRUM — override EVERY color role from :root (same role,
new value). Exemptions: white-on-dark inks/washes may stay white
(--color-fg-on-dark, the literal #fff inks on dark sections, the
rgba(255,255,255,…) washes, the white-fill .btn-services /
.btn-outline-light buttons on dark, form-control white fields, the
--boxed white logo plate, and the white tick data-URI used in dark
sections), and the low-alpha neutral shadows stay un-overridden
(--shadow-sm/md/lg, the header/dropdown literal rgba(20,35,63,…)
shadows ≤0.22, and the neutral black text/card shadows) — at their
opacity they read as neutral. The hard-edged --shadow-tel is NOT
exempt and must be overridden.
• FUNCTION PRESERVED — light backgrounds stay light, dark sections
stay dark, inks stay dark-and-readable, error stays recognizably
red. Easton's TWO-ACCENT identity is preserved: a cool-ish brand
family (--teal roles) plus a DISTINCT warm CTA family (--orange
roles). Nothing reorganizes which role does what.
• PALETTE SEPARATION — palettes must differ at a glance INCLUDING
neutrals and secondaries, not just the accents. Alt-band bgs sit
in distinct hue/saturation families (default cool blue-white ~216°
vs iron warm stone ~40° vs rust near-neutral greige ~20°/10%sat),
page bgs are clearly apart while staying near-white, and dark
sections carry a temperature difference (blue navy vs neutral iron
vs rust's teal-charcoal).
• CONTRAST — --color-on-accent on --orange AND --orange-dark ≥4.5:1;
--teal as ink on white AND on --color-bg-alt ≥4.5:1 (it is also a
white-ink fill, so it must pass both ways); --orange-ink on bg AND
bg-alt ≥4.5:1; --teal-bright / --orange-bright on --navy ≥4.5:1;
--color-text on --color-bg targets ≥7:1 (≥4.5 minimum). (The
DEFAULT's white-on-#D4582F CTAs and #3a8a92-on-navy labels predate
this contract and are intentionally left as shipped.)
Add a palette by cloning a block below and re-deriving every role.
Two alternates ship: iron (neutral iron/steel + copper) and rust
(deep-teal + rust brown) — each a distinct skin from the default and
from each other; re-derive every role so a new clone stays separable.
============================================================ */
/* Iron — iron/slate + copper: neutral near-black iron dark sections,
steel-blue brand family, dark copper CTA (white ink passes), warm
stone alt band, cool neutral page white. */
[data-theme="iron"] {
--navy: #24292F; /* iron — top bar, dark sections, footer */
--navy-2: #2E343B; /* lighter iron panels (service cards) */
--navy-card: #343B43; /* quote form card */
--teal: #3A6284; /* steel blue brand — 6.44:1 white-on-fill, 6.44/5.32:1 as ink on white/bg-alt */
--teal-dark: #2F5069; /* steel hover (8.49:1 with white) */
--teal-bright: #85AECE; /* steel on dark (6.24:1 on --navy) */
--orange: #A6491F; /* dark copper CTA fill (5.84:1 with white ink) */
--orange-dark: #8C3C17; /* copper hover (7.57:1 with white ink) */
--orange-bright: #E5895B; /* light copper on dark (5.62:1 on --navy, 4.83:1 on --navy-2) */
--orange-ink: #A6491F; /* copper text on light (5.45:1 on bg, 4.82:1 on bg-alt) */
--accent-quote: #E5895B; /* quote-mark icon on the iron card (4.35:1, decorative) */
--color-on-accent: #ffffff; /* white passes on both copper fills */
--color-link: var(--teal); /* steel link ink */
--color-text: #2A2F35; /* iron body ink (12.58:1 on bg) */
--color-text-muted: #5C646D; /* cool muted ink (5.60/4.95:1 on bg/bg-alt) */
--color-heading: #1F242A; /* near-black iron headings */
--color-bg: #F6F7F8; /* cool neutral page white */
--color-bg-alt: #ECE9E3; /* warm stone/greige alt band (hue ~40° — vs default's cool blue-white) */
--color-border: #D8DBDE; /* neutral gray border */
--color-error: #B0242F; /* cool crimson (6.24:1 on bg) */
--color-focus: var(--teal);
--color-fg-on-dark: #ffffff; /* stays white (exempt) */
--on-dark-nav: #CDD3D9; /* top-bar text (9.71:1 on --navy) */
--on-dark-social: #C4CBD1; /* top-bar social icons (8.94:1) */
--on-dark-body: #A9B0B7; /* footer body (6.68:1) */
--on-dark-link: #BFC6CD; /* footer links (8.49:1) */
--on-dark-faint: #8B939B; /* legal fine print (4.71:1) */
--on-teal-label: #D3E4F2; /* pale steel label on the steel band (4.95:1 on --teal) */
--overlay-dark: linear-gradient(rgba(36,41,47,0.82), rgba(36,41,47,0.88));
--overlay-teal: linear-gradient(rgba(47,80,105,0.86), rgba(40,68,90,0.92));
--overlay-soft: linear-gradient(rgba(36,41,47,0.55), rgba(36,41,47,0.72));
--overlay-hero: linear-gradient(rgba(36,41,47,0.74), rgba(36,41,47,0.84));
--wash-accent: rgba(58,98,132,0.22);
--focus-ring: rgba(58,98,132,0.18);
--shadow-tel: 0 4px 0 rgba(36,41,47,0.35);
/* hero bullet: light steel circle needs an iron (not white) check to stay visible */
--bullet-hero: url("data:image/svg+xml;utf8,");
--bullet-badge: url("data:image/svg+xml;utf8,");
--bullet-snow: url("data:image/svg+xml;utf8,");
--tick-teal: url("data:image/svg+xml;utf8,");
--select-caret: url("data:image/svg+xml;utf8,");
}
/* Rust — deep teal + rust brown: teal-charcoal dark sections (cool, distinct
from iron's neutral near-black), deep-teal brand family, deep rust-brown CTA
(white ink passes strongly), warm near-neutral greige alt band, warm page. */
[data-theme="rust"] {
--navy: #182B32; /* teal-charcoal — top bar, dark sections, footer */
--navy-2: #20363E; /* lighter teal-charcoal panels (service cards) */
--navy-card: #26404A; /* quote form card */
--teal: #245F73; /* deep teal brand — 7.10:1 white-on-fill, 6.81/6.25:1 as ink on white/bg-alt */
--teal-dark: #1D4E5E; /* deep-teal hover (8.86:1 with white) */
--teal-bright: #5AA6BC; /* light teal on dark (5.32:1 on --navy, 4.59:1 on --navy-2) */
--orange: #733E24; /* deep rust-brown CTA fill (8.59:1 with white ink) */
--orange-dark: #5E3220; /* rust hover (10.75:1 with white ink) */
--orange-bright: #DA8A62; /* light rust on dark (5.45:1 on --navy, 4.70:1 on --navy-2) */
--orange-ink: #733E24; /* rust text on light (8.24:1 on bg, 7.57:1 on bg-alt) */
--accent-quote: #DA8A62; /* quote-mark icon on the teal-charcoal card (4.07:1, decorative) */
--color-on-accent: #ffffff; /* white passes on both rust fills */
--color-link: var(--teal); /* deep-teal link ink */
--color-text: #2E3A3E; /* teal-tinged body ink (11.25:1 on bg) */
--color-text-muted: #5C6A6F; /* cool-slate muted ink (5.38/4.93:1 on bg/bg-alt) */
--color-heading: #1B2E34; /* deep teal-charcoal headings */
--color-bg: #FBFAF9; /* warm off-white page */
--color-bg-alt: #F2F0EF; /* warm near-neutral greige alt band (hue ~20°, low sat) */
--color-border: #DCD8D6; /* warm gray border */
--color-error: #B0231F; /* warm red (6.49:1 on bg) */
--color-focus: var(--teal);
--color-fg-on-dark: #ffffff; /* stays white (exempt) */
--on-dark-nav: #CDD6DA; /* top-bar text (9.95:1 on --navy) */
--on-dark-social: #C4CED3; /* top-bar social icons (9.17:1) */
--on-dark-body: #AAB6BB; /* footer body (7.07:1) */
--on-dark-link: #BFCACF; /* footer links (8.78:1) */
--on-dark-faint: #879297; /* legal fine print (4.61:1) */
--on-teal-label: #CFE7EE; /* pale teal label on the teal band (5.51:1 on --teal) */
--overlay-dark: linear-gradient(rgba(24,43,50,0.82), rgba(24,43,50,0.88));
--overlay-teal: linear-gradient(rgba(36,95,115,0.86), rgba(29,78,94,0.92));
--overlay-soft: linear-gradient(rgba(24,43,50,0.55), rgba(24,43,50,0.72));
--overlay-hero: linear-gradient(rgba(24,43,50,0.74), rgba(24,43,50,0.84));
--wash-accent: rgba(36,95,115,0.22);
--focus-ring: rgba(36,95,115,0.18);
--shadow-tel: 0 4px 0 rgba(24,43,50,0.35);
/* light teal hero circle carries a dark (not white) check to stay visible */
--bullet-hero: url("data:image/svg+xml;utf8,");
--bullet-badge: url("data:image/svg+xml;utf8,");
--bullet-snow: url("data:image/svg+xml;utf8,");
--tick-teal: url("data:image/svg+xml;utf8,");
--select-caret: url("data:image/svg+xml;utf8,");
}
/* Azure — a strict FOUR-COLOUR monochrome blue skin. Every value below is one of
#E3F2FD / #90CAF9 / #2196F3 / #0D47A1 (plus white, which the contract already
exempts for on-dark ink and form fields). Nothing else is introduced, and no
source colour is altered.
THIS PALETTE DELIBERATELY OVERRIDES FOUR CONTRACT RULES. The full pairwise
contrast matrix for the set is:
#E3F2FD #90CAF9 #2196F3 #0D47A1 white
#E3F2FD — 1.53 2.74 7.56 1.14
#90CAF9 1.53 — 1.79 4.93 1.75
#2196F3 2.74 1.79 — 2.76 3.12
#0D47A1 7.56 4.93 2.76 — 8.63
Two facts drive every decision here. #2196F3 has NO partner in the set reaching
4.5:1 — its best is white at 3.12:1 — so it can only ever carry LARGE text or
decoration, never body copy. And #0D47A1 is the only ink that clears 4.5:1 on the
light backgrounds, so it has to carry every text role at once.
THREE INKS ARE ADDED beyond the source four, all text-only roles: --color-text
#16202B, --color-text-muted #3B4A5A and --color-error #8C1D18. The four source
blues are used unaltered; nothing decorative or structural comes from outside the
set. Adding the ink retired two overrides that a strict four-colour build could
not avoid (all-blue body copy, and errors indistinguishable from body text).
Remaining overrides, each with its cost:
1. TWO-ACCENT IDENTITY — impossible: the set has no warm colour. The --orange
roles become the VIVID blue and the --teal roles the DEEP blue, so hierarchy
comes from value (brightest = most clickable) instead of temperature. This is
the one override that cannot be bought back at any price.
2. --orange as the decorative border on --navy is 2.76:1, under the 3:1 floor.
Those are the 3–4px hero/footer stripes; purely decorative, carrying no
information. Unfixable inside the palette — the shared rule points at --orange,
and #2196F3 on #0D47A1 is simply 2.76:1. See the KNOWN SHORTFALL note in
CLAUDE.md, which this palette shares with iron and rust.
Also note --navy-2 and --navy-card collapse onto --navy: the only lighter option
is #2196F3, and `.service-card-body p` is hardcoded rgba(255,255,255,0.80), which
would land near 3:1 on it. Service cards therefore take their definition from the
header bar and image rather than a tonal step. --teal-dark likewise collapses onto
--teal (no darker blue exists in the set), so teal-fill hovers are a no-op. */
[data-theme="azure"] {
--navy: #0D47A1; /* deep blue — top bar, dark sections, footer (white ink 8.63:1) */
--navy-2: #0277BD; /* ADDED — Material LIGHT Blue 800, the one surface colour beyond the source four. Light Blue rather than Blue 800 (#1565C0) because at hue 212 that read violet; this sits at 202, visibly more cyan. It also separates BETTER from the #0D47A1 section (1.80:1 vs 1.50:1), which is the whole reason the token exists. White ink 4.80:1. See the scoped .service-card rules below. */
--navy-card: #0D47A1; /* quote form card — reads against the hero photo, not the section */
--teal: #0D47A1; /* brand — the ONLY value that passes both ways: 8.63:1 white-on-fill, 7.56/4.93:1 as ink on bg/bg-alt */
--teal-dark: #0D47A1; /* no darker value exists in the set — teal-fill hover is a no-op here */
--teal-bright: #90CAF9; /* light blue on dark (4.93:1 on --navy) */
--orange: #2196F3; /* CTA fill — vivid blue. White ink is 3.12:1: LARGE TEXT ONLY (override 2) */
--orange-dark: #0D47A1; /* CTA hover DARKENS again now that the ink is white (8.63:1 here). Every --orange-dark consumer is a hover fill inheriting --color-on-accent, so the pair stays consistent. */
--orange-bright: #90CAF9; /* accent on dark (4.93:1 on --navy) */
--orange-ink: #0D47A1; /* accent TEXT on light (7.56:1 on bg, 4.93:1 on bg-alt) */
--accent-quote: #90CAF9; /* quote-mark icon on the deep-blue card (4.93:1, decorative) */
--color-on-accent: #ffffff; /* white on the #2196F3 fill is 3.12:1, which is the WCAG LARGE-TEXT bar (3:1), not the 4.5:1 body bar — so azure also bumps .btn to 1.25rem/20px bold below, over the 18.66px large-text cutoff, which is what makes it legal. The dark #16202B alternative measured 5.27:1 but read heavy and muddy on the vivid blue. */
--color-link: var(--teal);
--color-text: #16202B; /* ADDED — deep blue-charcoal ink (14.41:1 on bg, 9.41:1 on bg-alt). Not in the source four; added because all-blue body copy was the palette's worst readability cost. */
--color-text-muted: #3B4A5A; /* ADDED — slate gray (7.95:1 on bg, 5.19:1 on bg-alt). Must stay this dark: --color-bg-alt #90CAF9 is light enough that anything greyer fails 4.5:1 on it. */
--color-heading: #0D47A1;
--color-bg: #E3F2FD; /* pale blue page */
--color-bg-alt: #90CAF9; /* light blue alternating band */
--color-border: #90CAF9;
--color-error: #8C1D18; /* ADDED — deep red (7.98:1 on bg, 5.21:1 on bg-alt). Retires override 4: form errors are colour-distinguishable again. */
--color-focus: #2196F3; /* vivid blue focus ring — the one role where #2196F3 is ideal */
--color-fg-on-dark: #ffffff; /* stays white (exempt) */
--on-dark-nav: #ffffff; /* top-bar text — white (8.63:1 on --navy) */
--on-dark-social: #ffffff; /* top-bar icons — white (8.63:1) */
--on-dark-body: #90CAF9; /* footer body (4.93:1) */
--on-dark-link: #E3F2FD; /* footer links (7.56:1) */
--on-dark-faint: #90CAF9; /* legal fine print (4.93:1) — cannot go fainter and stay legible */
--on-teal-label: #90CAF9; /* label on the deep-blue band (4.93:1) */
/* photo overlays are BLUE-GREY, not brand blue: a rgba(13,71,161,…) wash turned every
full-width background photo blue. These reuse --color-text-muted #3B4A5A (hue ~211°,
sat ~21%) rather than introducing another colour. White on it is 9.08:1 and the pale
label #90CAF9 is 5.19:1, so both overlay text roles stay clear. */
--overlay-dark: linear-gradient(rgba(59,74,90,0.82), rgba(59,74,90,0.88));
--overlay-teal: linear-gradient(rgba(59,74,90,0.86), rgba(59,74,90,0.92));
--overlay-soft: linear-gradient(rgba(59,74,90,0.80), rgba(59,74,90,0.92)); /* raised from the stock 0.55/0.72: at 0.55 over a BRIGHT photo white banner copy falls to 2.79:1. 0.80 gives 5.21:1 worst case. */
/* HERO IS LIGHT, matching the source site (eastonconcretecontractors.com): the photo
stays near full brightness under a faint pale scrim and the hero text is dark navy,
instead of the dark-wash + white-text treatment every other skin uses. Paired with
the scoped .hero rules below.
Shape follows the source site: a DIAGONAL wash on 225deg (top-right -> bottom-left),
so the photograph stays open at the top right and dissolves toward the lower left where
the copy and buttons sit. It never reaches full white — the far stop is 0.92, so the
concrete keeps some texture everywhere instead of blanking out.
MEASURED, not eyeballed, and the thresholds are PER ELEMENT — this is what made the very
transparent start possible. The h1 renders at 58px uppercase bold, which is WCAG "large
text" and therefore a 3:1 bar; only the 0.95rem checklist needs 4.5:1. An earlier pass
applied 4.5:1 to everything and wrongly concluded the start alpha could go no lower than
0.55. Re-searched with correct bars over angle x start x end x stop, keeping only
zero-failure combinations and ranking by MOST transparent start:
210deg 0.20 -> 0.90 @35% <- SHIPPED (meanAlpha 0.781, zero failures)
215deg 0.20 -> 0.92 @35%
225deg 0.20 -> 0.92 @35%
The angle sets WHERE the clear corner sits: 225deg puts it at the top right, 180deg puts
it straight up. Swept 190-225deg at start 0.20 and 210deg is the furthest rotation toward
12 oclock that still passes; 205deg and below leave ~0.1-0.7% of the copy under bar. The
far stop had to rise 0.92 -> 0.95 to pay for the rotation, since turning the axis vertical
puts more of the checklist late in the ramp.
RE-TUNED FOR THE ALT HERO (the intro-paragraph variant), which is the one this skin will
actually ship. Its copy is riskier than the checklist hero's: body-size paragraphs sitting
high in the hero where the scrim is thinnest.
Tuned against an IMAGE-INDEPENDENT floor rather than this one photograph. Solving the
worst case — scrim over a pure BLACK image — gives the minimum alpha that guarantees a
ratio on ANY hero photo:
intro body #16202B at 4.5:1 -> alpha >= 0.524
h1 #0D47A1 at 3:1 (large) -> alpha >= 0.597
Minimum alpha the shipped gradient puts under each element of the alt hero:
h1 0.21 intro1 0.55 (ok) intro2 0.85 (ok)
The ramp reaching full coverage by 20% is what lifts intro1 over its floor while leaving
the top-right corner at 0.20 — more transparent AND safer than the previous 0.90 @35%.
THE H1 IS THE UNRESOLVED CASE and it matters for any site built on this skin. At 0.21 it
sits well under the 0.597 it would need to be safe on an arbitrary photo; it only reads on
the Easton concrete image because that photo is bright, low-detail behind the headline.
The ramp cannot fix it — the h1 spans the full width including the clear corner, so only
raising the START alpha would, which is exactly the transparency this design is for.
So: EITHER pick a hero photo that is bright where the headline sits (what the source site
does), OR raise the start toward 0.60 and accept a flatter image. Re-check with the alpha
floors above whenever the hero photo changes.
Legibility is IMAGE-DEPENDENT — these numbers describe THIS photograph. Re-measure any
replacement hero image. The other three overlays stay dark and are image-safe. */
--overlay-hero: linear-gradient(210deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.85) 20%);
--wash-accent: rgba(33,150,243,0.22);
--focus-ring: rgba(33,150,243,0.18);
--shadow-tel: 0 4px 0 rgba(13,71,161,0.35);
/* hero bullets sit on the LIGHT hero, so the circle is deep blue with a white check
(8.63:1). The usual pale-circle/dark-check pairing would wash out here. */
--bullet-hero: url("data:image/svg+xml;utf8,");
--bullet-badge: url("data:image/svg+xml;utf8,");
--bullet-snow: url("data:image/svg+xml;utf8,");
--tick-teal: url("data:image/svg+xml;utf8,");
--select-caret: url("data:image/svg+xml;utf8,");
}
/* azure only: its --navy-2 (#1565C0) is lighter than every other skin's card panel, so the
shared .service-card-body p ink of rgba(255,255,255,0.80) lands at 4.28:1 there — under AA
for 0.95rem text. Full white restores 5.75:1. Scoped so no other palette is affected. */
[data-theme="azure"] .service-card-body p { color: #fff; }
/* the shared hover border is --teal-bright #90CAF9, which lands at only 2.74:1 on the lighter
#0277BD card — under the 3:1 decorative floor. Use the palest blue instead (4.20:1). */
[data-theme="azure"] .service-card:hover { border-color: #E3F2FD; }
/* azure only: LIGHT HERO. The shared .hero rules hardcode white ink for the dark-wash
treatment, so a light hero cannot be expressed in tokens alone — these four rules flip the
ink to deep blue and are scoped so no other palette is touched. Mirrors the source site,
where the headline, checklist and body copy are all dark navy over an almost untinted photo.
The title keeps a soft WHITE halo (not the shared dark one) so it survives darker patches
of the photograph. */
[data-theme="azure"] .hero { color: #16202B; }
[data-theme="azure"] .hero-title { color: #0D47A1; text-shadow: 0 1px 12px rgba(255,255,255,0.65); }
/* .hero-intro is the ALT hero (intro-paragraph variant) — the one this site will use most.
500 rather than Roboto 400: at body size over a photograph the regular weight reads thin,
and the extra stroke also helps it survive the transparent top of the scrim. Roboto is a
variable face (100-900) so this is a real weight, not synthesised. */
[data-theme="azure"] .hero-intro { color: #16202B; font-weight: 500; }
/* the shared hover turns this button transparent with white ink, which vanishes on a light
hero — keep the ink dark and give the transparent state a visible border instead */
/* the light hero washes toward near-white behind this button, so the shared white-on-white
fill disappears — give it a navy keyline so it still reads as a button */
[data-theme="azure"] .hero .btn-services { border-color: #0D47A1; }
[data-theme="azure"] .hero .btn-services:hover { background: transparent; color: #0D47A1; border-color: #0D47A1; }
/* azure only: the quote-form submit is pale blue rather than the vivid --orange fill. It sits
on the #0D47A1 card, so this is a LIGHT button on dark — the inherited --color-on-accent
(#16202B) reads at 14.41:1 on it. Hover still steps to --orange-dark #90CAF9 (9.41:1).
Scoped to the palette, so it also covers the identical form on contact.html — the two
should not diverge. */
[data-theme="azure"] .estimate-form button[type="submit"] { background: #E3F2FD; color: #16202B; }
/* ...and its hover must stay pale too: --orange-dark is now #0D47A1, on which #16202B ink
would be 1.91:1. Stepping to #90CAF9 keeps the dark ink at 9.41:1. */
[data-theme="azure"] .estimate-form button[type="submit"]:hover { background: #90CAF9; color: #16202B; }
/* azure only: pale card headers instead of the shared white-on---teal bar. Gives the services
grid a three-step tonal ladder — #0D47A1 section, #1565C0 card, #E3F2FD header — where the
monochrome set otherwise flattens. #0D47A1 title ink on the pale bar is 7.56:1. */
[data-theme="azure"] .service-card-header { background: #E3F2FD; color: #0D47A1; }
/* Button labels are 1.25rem/20px here, up from the shared 1.1rem/17.6px. That is not
cosmetic: white on the #2196F3 CTA fill is 3.12:1, which clears the WCAG LARGE-TEXT bar of
3:1 but not the 4.5:1 body bar — and "large" means >=18.66px when bold. At 17.6px white
would be non-compliant; at 20px it is fine. Keep this if you keep white button labels. */
[data-theme="azure"] .btn { font-size: 1.25rem; }
/* Same trick, same reason, for the mini-CTA eyebrow inside .section-dark. Its ink is
--orange-bright #90CAF9 over --navy #0D47A1 lifted by the block's own rgba(255,255,255,0.04)
wash, which composites to #174EA5 — exactly 4.50:1. That is ON the body-text bar, not over
it, and axe-core's own compositing rounds it just under, so it reports a violation. The
shared 1.15rem/18.4px bold sits 0.26px BELOW the 18.66px bold large-text cutoff; at
1.2rem/19.2px the same colour is judged against the 3:1 bar and clears it with headroom.
Fixing it by size rather than by colour keeps the azure token set intact. */
[data-theme="azure"] .mini-cta p { font-size: 1.2rem; }
/* The 404 numeral was painted with --orange, which in azure is the #2196F3 CTA FILL, not an
ink. As text on the pale --color-bg it measures 2.74:1 — under even the 3:1 large-text bar.
--orange-ink #0D47A1 is the token that exists for accent text on light (7.56:1 on bg).
Base rule keeps the stock look for skins whose --orange really is an orange. */
.error-code { font-family: var(--font-head); font-size: 6rem; letter-spacing: 0.03em; margin: 0; color: var(--orange); }
[data-theme="azure"] .error-code { color: var(--orange-ink); }
/* ---------- Self-hosted fonts ---------- */
@font-face { font-family:"Roboto"; font-style:normal; font-weight:100 900; font-display:swap; src:url("/fonts/roboto.woff2") format("woff2"); }
@font-face { font-family:"Barlow"; font-style:normal; font-weight:600; font-display:swap; src:url("/fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family:"Barlow"; font-style:normal; font-weight:700; font-display:swap; src:url("/fonts/barlow-700.woff2") format("woff2"); }
@font-face { font-family:"Barlow Condensed"; font-style:normal; font-weight:600; font-display:swap; src:url("/fonts/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family:"Barlow Condensed"; font-style:normal; font-weight:700; font-display:swap; src:url("/fonts/barlow-condensed-700.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans Condensed"; font-style:normal; font-weight:600; font-display:swap; src:url("/fonts/plex-sans-condensed-600.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans Condensed"; font-style:normal; font-weight:700; font-display:swap; src:url("/fonts/plex-sans-condensed-700.woff2") format("woff2"); }
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html, body { overflow-x: clip; }
:target, section[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }
body {
margin: 0;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.7;
color: var(--color-text);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
}
img, picture, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 {
font-family: var(--font-head);
font-weight: 700;
line-height: 1.04;
margin: 0 0 0.5em;
color: var(--color-heading);
text-transform: uppercase;
letter-spacing: 0.01em;
}
h1 { font-size: clamp(2.2rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.7rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); color: var(--teal); }
h4 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
a { color: var(--color-link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
strong { color: inherit; font-weight: 700; }
/* ---------- A11y ---------- */
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.skip-link {
position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;
background: var(--navy); color: #fff; padding: 0.75rem 1rem; z-index: 1000;
}
.skip-link:focus { left: 0; top: 0; width: auto; height: auto; }
.hp-field {
position: absolute !important; width: 1px !important; height: 1px !important; min-width: 0 !important; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.sr-h2, .visually-hidden {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 1.25rem; }
main { display: block; }
section { padding: clamp(2.75rem, 6vw, 4.75rem) 0; }
.section-dark { background: var(--navy); color: var(--color-fg-on-dark); }
.section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark p { color: rgba(255,255,255,0.82); }
.section-dark a:not(.btn) { color: var(--orange-bright); }
.section-intro { max-width: 78ch; margin: 0 0 2rem; }
.section-cta { display: flex; justify-content: center; margin-top: 2rem; }
.section-label {
font-family: var(--font-head); font-weight: 700; text-transform: uppercase;
letter-spacing: 0.08em; color: var(--teal); font-size: 1.05rem; margin: 0 0 0.4rem;
}
.section-dark .section-label, .lf-banner .section-label { color: var(--teal-bright); }
.lf-banner.b-teal .section-label { color: var(--on-teal-label); }
.accent { color: var(--orange-ink); }
.section-dark .accent { color: var(--orange-bright); }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
font: inherit; font-family: var(--font-head); font-weight: 700; font-size: 1.1rem;
text-transform: uppercase; letter-spacing: 0.04em;
padding: 0.7rem 1.6rem; border: 2px solid transparent; border-radius: 4px;
text-decoration: none; cursor: pointer; min-height: 50px; line-height: 1.1;
transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .08s ease;
}
.btn:active { transform: translateY(1px); }
.btn-call { background: var(--orange); color: var(--color-on-accent); box-shadow: var(--shadow-sm); }
.btn-call:hover { background: var(--orange-dark); color: var(--color-on-accent); }
.btn-teal { background: var(--teal); color: #fff; }
.btn-teal:hover { background: var(--teal-dark); color: #fff; }
.btn-services { background: #fff; color: var(--navy); border-color: #fff; }
.btn-services:hover { background: transparent; color: #fff; }
.btn-outline-dark { background: transparent; color: var(--color-heading); border-color: var(--color-heading); }
.btn-outline-dark:hover { background: var(--color-heading); color: #fff; }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.6); }
.btn-outline-light:hover { background: #fff; color: var(--navy); }
/* aliases so utility pages' button classes keep working */
.btn-primary { background: var(--orange); color: var(--color-on-accent); }
.btn-primary:hover { background: var(--orange-dark); color: var(--color-on-accent); }
.btn-outline-navy { background: transparent; color: var(--color-heading); border-color: var(--color-heading); }
.btn-outline-navy:hover { background: var(--color-heading); color: #fff; }
.btn-block { display: flex; width: 100%; }
/* ============================================================
img-as-background helper (real , positioned to fill)
============================================================ */
.bg-host { position: relative; isolation: isolate; }
.bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.bg-host::before {
content: ""; position: absolute; inset: 0; z-index: 1;
background: var(--overlay-dark);
}
.bg-host.bg-teal::before { background: var(--overlay-teal); }
.bg-host.bg-soft::before { background: var(--overlay-soft); }
/* FAQ opts OUT of the scrim. Its copy sits on .faq-panel, which carries its own
translucent navy, so the shared overlay was doing nothing but flattening the photo in
the gutters — the only place it was visible. Every other .bg-host has text directly on
the image and still needs the scrim. */
.faq.bg-host::before { background: none; }
.bg-host > .container { position: relative; z-index: 2; }
/* Fixed (parallax) backgrounds — disabled on small/touch screens where iOS renders them badly.
The hero's parallax uses its CSS background (attachment: fixed, clips to the section);
its .bg-img is hidden on desktop so the fixed background shows through. */
.hero.bg-fixed .bg-img { display: none; }
.faq.bg-fixed { background: var(--navy) url("/images/radon-fan-siding-bg-1600.webp") center / cover no-repeat fixed; }
.faq.bg-fixed .bg-img { display: none; }
/* Source is 1196px native, so it upscales on wide viewports — acceptable only because
this band runs under an 0.82-0.88 scrim, where the softness is not visible. Do not
reuse this file anywhere unscrimmed. */
.feature-aside.bg-fixed { background: var(--navy) url("/images/radon-fan-brick-bg-1200.webp") center / cover no-repeat fixed; }
.feature-aside.bg-fixed .bg-img { display: none; }
@media (max-width: 900px) {
.bg-fixed { background-attachment: scroll !important; }
.hero.bg-fixed { background: var(--navy); }
.hero.bg-fixed .bg-img { display: block; }
.faq.bg-fixed { background: var(--navy); }
.faq.bg-fixed .bg-img { display: block; }
.feature-aside.bg-fixed { background: var(--navy); }
.feature-aside.bg-fixed .bg-img { display: block; }
}
/* ============================================================
Top bar (navy, scrolls away) + Header (white, sticky)
============================================================ */
.top-bar { background: var(--navy); color: var(--on-dark-nav); font-size: 0.9rem; }
.top-bar .container {
padding-top: 0.5rem; padding-bottom: 0.5rem;
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.35rem 1.5rem;
}
.top-bar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1.75rem; }
.top-bar-list li { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--on-dark-nav); }
.top-bar-list a { color: var(--on-dark-nav); text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; }
.top-bar-list a:hover { color: #fff; }
.top-bar-list svg { color: var(--orange-bright); flex-shrink: 0; }
.top-bar-social { display: inline-flex; align-items: center; gap: 0.9rem; }
.top-bar-social a { color: var(--on-dark-social); display: inline-flex; }
.top-bar-social a:hover { color: #fff; }
.site-header {
position: sticky; top: 0; z-index: 50;
background: var(--color-bg);
box-shadow: 0 2px 14px rgba(20,35,63,0.12);
}
.site-header .container {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
min-height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; padding: 0.4rem 0; }
.brand-logo { height: 56px; width: auto; display: block; }
.brand-text { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1; font-size: 1.7rem; color: var(--navy); }
.brand-text b { color: var(--orange-ink); font-weight: 700; }
@media (max-width: 600px) { .brand-logo { height: 44px; } .brand-text { font-size: 1.35rem; } }
.site-nav { display: flex; align-items: center; }
.nav-list { display: flex; align-items: center; gap: 0.25rem 2rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.nav-item { position: relative; }
.nav-item > a {
display: inline-flex; align-items: center; gap: 0.3rem; color: var(--navy); text-decoration: none;
font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
font-size: 1.15rem; padding: 1.4rem 0.1rem;
}
.nav-item > a:hover { color: var(--teal); }
.nav-caret { transition: transform .15s ease; flex-shrink: 0; }
.has-dropdown:hover > a .nav-caret, .has-dropdown:focus-within > a .nav-caret { transform: rotate(180deg); }
.dropdown {
position: absolute; top: 100%; left: 0; min-width: 250px; background: var(--color-bg);
box-shadow: 0 16px 36px rgba(20,35,63,0.22); list-style: none; margin: 0; padding: 0.5rem 0;
z-index: 100; opacity: 0; visibility: hidden; transform: translateY(6px);
transition: opacity .15s ease, visibility .15s ease, transform .15s ease;
border-top: 3px solid var(--orange);
}
.has-dropdown:hover > .dropdown, .has-dropdown:focus-within > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown li { margin: 0; }
.dropdown a { display: block; padding: 0.55rem 1.1rem; font-size: 0.95rem; font-weight: 500; color: var(--color-text); text-decoration: none; white-space: nowrap; }
.dropdown a:hover, .dropdown a:focus-visible { background: var(--color-bg-alt); color: var(--teal); }
.dropdown-2col, .dropdown-3col { display: grid; }
.dropdown-2col { grid-template-columns: 1fr 1fr; min-width: 440px; }
.dropdown-3col { grid-template-columns: 1fr 1fr 1fr; min-width: 560px; }
@media (max-width: 1100px) { .dropdown-3col { grid-template-columns: 1fr 1fr; min-width: 400px; } }
.nav-cta { margin-left: 0.5rem; }
.btn-tel {
background: var(--navy); color: #fff; border-radius: 6px; padding: 0.7rem 1.5rem;
font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; letter-spacing: 0.02em;
text-transform: none; box-shadow: var(--shadow-tel); display: inline-flex;
align-items: center; gap: 0.5rem; min-height: 50px; text-decoration: none;
white-space: nowrap; flex-shrink: 0;
}
/* Narrow-desktop squeeze (nav can wrap to two rows): tighten the rows */
@media (min-width: 901px) and (max-width: 980px) {
.nav-item > a { padding-top: 0.45rem; padding-bottom: 0.45rem; }
}
.btn-tel:hover { background: var(--teal); box-shadow: 0 4px 0 var(--teal-dark); color: #fff; }
.menu-toggle { display: none; background: transparent; border: 0; padding: 0; width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer; }
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after { display: block; width: 26px; height: 3px; background: var(--navy); border-radius: 2px; transition: transform .25s ease, top .25s ease; }
.menu-toggle span { position: relative; }
.menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; }
.menu-toggle span::before { top: -8px; } .menu-toggle span::after { top: 8px; }
.menu-toggle.is-open span { background: transparent; }
.menu-toggle.is-open span::before { top: 0; transform: rotate(45deg); }
.menu-toggle.is-open span::after { top: 0; transform: rotate(-45deg); }
@media (max-width: 900px) {
.top-bar .container { justify-content: center; }
.top-bar-list { justify-content: center; font-size: 0.82rem; gap: 0.25rem 1.25rem; }
.site-header .container { flex-wrap: wrap; align-content: center; row-gap: 0; }
.site-header .brand { min-height: var(--header-h); }
.site-nav { display: none; }
.menu-toggle { display: inline-flex; order: 3; }
.nav-cta { order: 2; }
.site-nav.is-open {
display: block; order: 4; flex: 1 1 100%; margin: 0 -1.25rem 0;
padding: 0.25rem 1.25rem 1rem; background: var(--navy);
}
.site-nav.is-open .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
.site-nav.is-open .nav-item { width: 100%; position: static; }
.site-nav.is-open .nav-item + .nav-item { border-top: 1px solid rgba(255,255,255,0.15); }
.site-nav.is-open .nav-item > a { justify-content: space-between; padding: 0.85rem 0; font-size: 1.15rem; color: #fff; }
.site-nav.is-open .nav-item > a:hover { color: var(--orange-bright); }
.site-nav.is-open .dropdown { display: none; position: static; opacity: 1; visibility: visible; transform: none; background: transparent; box-shadow: none; border-top: 0; min-width: 0; padding: 0 0 0.5rem 1rem; }
.site-nav.is-open .has-dropdown.expanded > .dropdown { display: block; }
.site-nav.is-open .has-dropdown.expanded > a .nav-caret { transform: rotate(180deg); }
.site-nav.is-open .dropdown a { color: rgba(255,255,255,0.85); padding: 0.4rem 0; white-space: normal; }
.site-nav.is-open .dropdown a:hover { background: transparent; color: #fff; }
}
/* Smallest screens: logo + hamburger on top, phone button centered below */
@media (max-width: 480px) {
.menu-toggle { order: 1; }
.nav-cta { order: 2; flex: 0 0 100%; max-width: max-content; margin: 0 auto 0.75rem; }
}
/* ============================================================
Hero (full-bleed photo + checklist left, quote card right)
============================================================ */
/* Hero photo is anchored at 30%, NOT center, and both the desktop background-position and
the mobile object-position must carry the same value. The subject (fan + vent stack) sits
at image x 0.24-0.39. With a centred crop the narrow breakpoints keep only x 0.44-0.56
(375w) / 0.36-0.64 (768w), so the fan is cropped out entirely and the hero shows bare
siding. Percentage positioning maps image point p% to box point p%, so a single 30% keeps
the fan on screen at every width: window is x 0.27-0.38 at 375w, and it stays comfortably
inside frame on desktop. Re-derive this if the hero photo changes. */
.hero { color: #fff; padding: clamp(1.25rem, 2.5vw, 2.25rem) 0 clamp(3rem, 7vw, 6rem); background: var(--navy) url("/images/radon-fan-piping-dark-siding-bg-1600.webp") 30% center / cover no-repeat fixed; border-bottom: 4px solid var(--orange); }
.hero > .bg-img { object-position: 30% center; }
.hero::before { background: var(--overlay-hero); }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1.15fr 0.85fr; } .hero-text { padding-top: 2rem; } }
.hero-title { color: #fff; margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); max-width: 100%; text-shadow: 0 2px 14px rgba(0,0,0,0.35); }
.hero-checklist { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: 0.55rem 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .hero-checklist { grid-template-columns: 1fr 1fr; } }
.hero-checklist li { position: relative; padding-left: 30px; font-weight: 500; line-height: 1.4; }
.hero-checklist li::before {
content: ""; position: absolute; left: 0; top: 0.05em; width: 20px; height: 20px;
background-repeat: no-repeat; background-size: contain;
background-image: var(--bullet-hero);
}
.hero-intro { color: rgba(255,255,255,0.9); margin-bottom: 1.75rem; }
/* intro hero: no top padding on the text column (aligns intro under the h1) */
.hero-text:has(.hero-intro) { padding-top: 0; }
.hero-cta-row { display: flex; flex-direction: column; align-items: flex-start; gap: 0.85rem; }
/* intro hero: CTA buttons sit in one row on desktop */
@media (min-width: 960px) {
.hero-text:has(.hero-intro) .hero-cta-row { flex-direction: row; flex-wrap: wrap; align-items: center; }
}
/* ---------- Estimate / quote form card (navy) ---------- */
.estimate-card { background: var(--navy-card); color: #fff; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: 6px; box-shadow: var(--shadow-lg); }
.estimate-card .quote-mark { color: var(--accent-quote); margin-bottom: 0.25rem; }
.estimate-title { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; font-size: clamp(1.7rem, 3vw, 2.2rem); color: #fff; margin: 0 0 1.25rem; letter-spacing: 0.01em; }
.estimate-head { display: flex; align-items: center; gap: 0.65rem; margin: 0 0 1.25rem; }
.estimate-head .quote-mark { margin: 0; display: inline-flex; }
.estimate-head .estimate-title { margin: 0; }
.estimate-form { display: grid; gap: 0.7rem; grid-template-columns: 1fr 1fr; }
.estimate-form > .full, .estimate-form textarea, .estimate-form select, .estimate-form button, .estimate-form .cf-turnstile { grid-column: 1 / -1; }
.estimate-form input, .estimate-form select, .estimate-form textarea {
font: inherit; width: 100%; min-height: 48px; padding: 0.7rem 0.9rem;
border: 0; border-radius: 3px; background: #fff; color: var(--color-text);
}
.estimate-form select { color: var(--color-text-muted); appearance: none; background-image: var(--select-caret); background-repeat: no-repeat; background-position: right 0.7rem center; padding-right: 2.2rem; }
.estimate-form textarea { min-height: 96px; resize: vertical; }
.estimate-form input:focus, .estimate-form select:focus, .estimate-form textarea:focus { outline: 3px solid var(--orange); outline-offset: 1px; }
.estimate-form button[type="submit"] {
background: var(--orange); color: var(--color-on-accent); font: inherit; font-family: var(--font-head);
font-weight: 700; font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.85rem; border: 0;
border-radius: 3px; cursor: pointer; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.estimate-form button[type="submit"]:hover { background: var(--orange-dark); }
/* ============================================================
Feature bands (navy + teal): icon + heading + text triplets
============================================================ */
.feature-band { background: var(--navy); color: #fff; padding: clamp(2.25rem, 4vw, 3rem) 0; }
.feature-band.band-teal { background: var(--teal); }
.feature-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: 1fr; }
@media (min-width: 760px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }
.feature-item { display: grid; grid-template-columns: auto 1fr; gap: 0 1rem; align-items: start; }
.feature-item .feature-ico { grid-row: span 2; color: #fff; }
.feature-band.band-navy .feature-item .feature-ico { color: var(--teal-bright); }
.feature-item h3 { color: #fff; margin: 0 0 0.35rem; font-size: 1.4rem; }
.feature-item p { color: rgba(255,255,255,0.82); margin: 0; font-size: 0.95rem; line-height: 1.55; }
/* ============================================================
Split content (About / Story): media + text + check badges
============================================================ */
.split { background: var(--color-bg); }
.split-alt { background: var(--color-bg-alt); }
.split-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 4vw, 3.25rem); align-items: center; }
@media (min-width: 900px) { .split-grid { grid-template-columns: 1fr 1fr; } }
.split-grid.media-right .split-media { order: -1; }
@media (min-width: 900px) { .split-grid.media-right .split-media { order: 2; } }
.split-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; box-shadow: var(--shadow-md); }
.split h2 { color: var(--color-heading); }
.badge-grid { list-style: none; margin: 1.5rem 0 1.75rem; padding: 0; display: grid; gap: 0.55rem 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 520px) { .badge-grid { grid-template-columns: 1fr 1fr; } }
.badge-grid li { position: relative; padding-left: 28px; font-weight: 600; color: var(--navy); line-height: 1.4; }
.badge-grid li::before {
content: ""; position: absolute; left: 0; top: 0.1em; width: 18px; height: 18px;
background-repeat: no-repeat; background-size: contain;
background-image: var(--bullet-badge);
}
.split-cta-row { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }
/* ============================================================
How it works strip (teal)
============================================================ */
.howitworks { background: var(--teal); color: #fff; padding: clamp(1.75rem, 3.5vw, 2.5rem) 0; }
.hiw-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem 2rem; align-items: center; text-align: center; }
@media (min-width: 760px) { .hiw-grid { grid-template-columns: auto repeat(3, 1fr); text-align: left; } }
.hiw-title { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; font-size: 1.7rem; color: #fff; margin: 0; }
.hiw-step { display: inline-flex; align-items: center; gap: 0.6rem; justify-content: center; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: 1.25rem; color: #fff; }
@media (min-width: 760px) { .hiw-step { justify-content: flex-start; } }
.hiw-step svg { color: #fff; flex-shrink: 0; }
.hiw-step a { color: #fff; text-decoration: none; }
.hiw-step a:hover { text-decoration: underline; }
/* ============================================================
Services grid (shared vocab: header + image + description)
Dark section.
============================================================ */
/* Label and h2 stay centred; the body paragraph is left-justified. The block itself is
still centred as a COLUMN (margin auto) — only the rag changes. Centred rag on a
multi-line paragraph gives every line a different start point and slows reading. */
.services-head { text-align: left; max-width: 64ch; margin: 0 auto 2.25rem; }
.services-head .section-label, .services-head h2 { text-align: center; }
.services-head .section-label { color: var(--orange-bright); }
.section-dark .services-head h2 { color: #fff; margin-bottom: 0.5rem; }
.services-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 0.5rem; }
@media (min-width: 600px) { .services-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 940px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
.service-card {
display: flex; flex-direction: column; background: var(--navy-2);
border: 1px solid rgba(255,255,255,0.10); border-radius: 6px; overflow: hidden;
transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease;
}
.service-card:hover { transform: translateY(-3px); border-color: var(--teal-bright); box-shadow: 0 12px 28px rgba(0,0,0,0.35); }
.service-card-header {
background: var(--teal); color: #fff; padding: 0.75rem 1rem; margin: 0; text-align: center;
font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; letter-spacing: 0.01em;
text-transform: uppercase; line-height: 1.15;
}
.service-card-body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; gap: 0.9rem; }
.service-card-body img {
width: calc(100% + 2.5rem); max-width: none; margin: -1.25rem -1.25rem 0;
aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0;
}
.service-card-body p { color: rgba(255,255,255,0.80); margin: 0; font-size: 0.95rem; }
/* ============================================================
Long-form banner sections (installation / repair / demolition / decorative)
============================================================ */
.lf-banner { color: #fff; padding: clamp(2.5rem, 5vw, 4rem) 0; }
.lf-banner.b-navy { background: var(--navy); }
.lf-banner.b-teal { background: var(--teal); }
.lf-banner-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) { .lf-banner-grid { grid-template-columns: 1.05fr 0.95fr; } }
.lf-banner-grid.media-right .lf-media { order: -1; }
@media (min-width: 900px) { .lf-banner-grid.media-right .lf-media { order: 2; } }
.lf-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; box-shadow: var(--shadow-lg); }
.lf-banner h2 { color: #fff; }
.lf-banner p { color: rgba(255,255,255,0.85); }
.lf-sub-h { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #fff; font-size: 1.2rem; margin: 1.5rem 0 0.75rem; }
.lf-body { background: var(--color-bg); }
.lf-body.body-alt { background: var(--color-bg-alt); }
.lf-body h2 { color: var(--color-heading); }
.lf-body h3 { color: var(--teal); margin-top: 1.75rem; }
.lf-prose { max-width: 82ch; }
.lf-prose.center { margin: 0 auto; }
/* ============================================================
Check / feature lists
============================================================ */
.feature-list { list-style: none; margin: 0.75rem 0 0; padding: 0; font-size: 0.97rem; }
.feature-list li { position: relative; padding-left: 28px; margin-bottom: 0.65rem; line-height: 1.5; }
.feature-list li strong { color: var(--color-heading); }
.feature-list li::before {
content: ""; position: absolute; left: 0; top: 0.2em; width: 16px; height: 16px;
background-repeat: no-repeat; background-size: contain;
background-image: var(--tick-teal);
}
.lf-banner .feature-list li, .section-dark .feature-list li { color: rgba(255,255,255,0.9); }
.lf-banner .feature-list li strong, .section-dark .feature-list li strong { color: #fff; }
.lf-banner .feature-list li::before, .section-dark .feature-list li::before { background-image: url("data:image/svg+xml;utf8,"); }
.feature-list-2col, .feature-list-3col { display: grid; gap: 0 1.75rem; grid-template-columns: 1fr; }
@media (min-width: 600px) { .feature-list-2col, .feature-list-3col { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .feature-list-3col { grid-template-columns: 1fr 1fr 1fr; } }
.inline-cta { margin-top: 1.5rem; display: inline-flex; }
/* ============================================================
FAQ (navy panel with accordion)
============================================================ */
.faq { background: var(--navy) url("/images/radon-fan-siding-bg-1600.webp") center / cover no-repeat fixed; }
/* Translucent, not solid, so the photo behind the band is actually visible through the
panel instead of only in the gutters. 0.88 is the floor, not a taste call: with
background-attachment:fixed the panel slides over ANY part of the image as the page
scrolls, so the worst case is the image's brightest region (99.9th percentile pixel
is 250,250,252). Composited over that at 0.88 the headings read 6.48:1 and the
rgba(255,255,255,0.82) body copy 4.95:1. At 0.80 body copy drops to 4.17:1 and fails.
Re-derive if the background image changes. */
.faq-panel { background: rgba(13,71,161,0.88); border-radius: 8px; padding: clamp(1.75rem, 4vw, 3rem); max-width: 920px; margin: 0 auto; box-shadow: var(--shadow-md); }
.faq-panel h2 { color: #fff; text-align: center; margin-bottom: 1.75rem; }
.faq-list { display: flex; flex-direction: column; gap: 0.6rem; }
.faq-item { border-bottom: 1px solid rgba(255,255,255,0.14); }
.faq-item > summary { list-style: none; cursor: pointer; padding: 1rem 0.25rem; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; color: #fff; font-size: 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: "+"; font-size: 1.7rem; color: var(--orange-bright); flex-shrink: 0; line-height: 1; }
.faq-item[open] > summary::after { content: "\2212"; }
.faq-item > .faq-body { padding: 0 0.25rem 1.1rem; color: rgba(255,255,255,0.82); }
.faq-item > .faq-body p { color: rgba(255,255,255,0.82); }
.faq-item > .faq-body ul { margin: 0.5rem 0; padding-left: 1.1rem; }
.faq-item > .faq-body a { color: var(--orange-bright); }
/* ============================================================
Final CTA (photo bg + centered quote card)
============================================================ */
.final-cta { color: #fff; padding: clamp(3rem, 6vw, 5rem) 0; }
.final-cta .estimate-card { max-width: 560px; margin: 0 auto; }
/* ============================================================
Footer (navy + wood strip)
============================================================ */
.site-footer { background: var(--navy); color: var(--on-dark-body); padding: 3.25rem 0 1.5rem; border-top: 4px solid var(--orange); }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.05fr 1.5fr 1.35fr 1.15fr; } }
.footer-brand-logo { display: block; }
.footer-brand-logo img { width: 100%; height: auto; display: block; }
/* --boxed: for dark/color logos that need a white plate (no knockout version available) */
.footer-brand-logo--boxed { background: #fff; padding: 0.9rem 1rem; border-radius: 6px; display: inline-block; }
.footer-brand-logo--boxed img { height: 70px; width: auto; }
.footer-col h4 { color: #fff; margin: 0 0 1rem; padding-bottom: 0.5rem; position: relative; font-size: 1.3rem; }
.footer-col h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 38px; height: 3px; background: var(--orange); }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 0.6rem; }
.footer-links a { color: var(--on-dark-link); text-decoration: none; display: inline-flex; align-items: center; gap: 0.6rem; }
.footer-links a:hover { color: #fff; }
.footer-links svg { color: var(--orange-bright); flex-shrink: 0; }
.footer-col ul.footer-col-links { margin-top: 2.25rem; }
.footer-list-plain { list-style: none; padding: 0; margin: 0; }
.footer-list-plain li { color: var(--on-dark-body); margin-bottom: 0.4rem; font-size: 0.88rem; line-height: 1.35; }
.footer-areas-list { columns: 2; column-gap: 1.5rem; }
.footer-areas-list li { break-inside: avoid; }
.footer-contact-list li { display: flex; align-items: flex-start; gap: 0.6rem; line-height: 1.5; }
.footer-contact-list a, .footer-contact-list span { color: var(--on-dark-link); text-decoration: none; display: inline-flex; align-items: flex-start; gap: 0.6rem; }
.footer-contact-list a:hover { color: #fff; }
.footer-contact-list svg { color: var(--orange-bright); flex-shrink: 0; margin-top: 0.18em; }
.footer-phone { font-family: var(--font-head); font-weight: 700; font-size: 1.7rem; color: var(--orange-bright); text-decoration: none; }
.footer-phone:hover { color: #fff; }
.legal { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.85rem; color: var(--on-dark-faint); display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between; }
.legal a { color: var(--on-dark-body); text-decoration: none; margin-right: 1rem; }
.legal a:hover { color: #fff; }
/* ============================================================
Contact / utility forms (contact.html etc.)
============================================================ */
.page-narrow { max-width: 820px; margin: 0 auto; }
.page-hero { background: var(--navy); color: #fff; padding: clamp(2.5rem, 5vw, 3.75rem) 0; border-bottom: 4px solid var(--orange); }
.page-hero h1 { color: #fff; }
.page-hero p { color: rgba(255,255,255,0.85); margin: 0; }
.breadcrumb { font-size: 0.9rem; color: rgba(255,255,255,0.7); margin-bottom: 0.5rem; }
.breadcrumb a { color: rgba(255,255,255,0.85); text-decoration: none; }
.breadcrumb a:hover { color: #fff; }
.form-card { background: var(--color-bg); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); padding: clamp(1.25rem, 3vw, 2rem); border-radius: 6px; }
.form-grid { display: grid; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-weight: 700; font-size: 0.95rem; color: var(--navy); }
.field .req { color: var(--color-error); margin-left: 0.15rem; }
.field input, .field select, .field textarea {
font: inherit; padding: 0.75rem 0.9rem; border: 1px solid var(--color-border); border-radius: 4px;
background: #fff; color: var(--color-text); min-height: 48px; width: 100%;
transition: border-color .12s ease, box-shadow .12s ease;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--color-focus); box-shadow: 0 0 0 3px var(--focus-ring); outline: none; }
.field .help { font-size: 0.85rem; color: var(--color-text-muted); }
.field .error { font-size: 0.9rem; color: var(--color-error); display: none; }
.field input[aria-invalid="true"] ~ .error, .field textarea[aria-invalid="true"] ~ .error { display: block; }
.form-footnote { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 0.5rem; }
.contact-info { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.85rem; }
.contact-info li { display: flex; align-items: flex-start; gap: 0.7rem; line-height: 1.4; }
.contact-info svg { color: var(--teal); flex-shrink: 0; margin-top: 0.12em; }
.contact-info a { color: var(--color-text); text-decoration: none; }
.contact-info a:hover { color: var(--teal); }
.nap address { font-style: normal; line-height: 1.7; }
.prose h2 { margin-top: 2rem; }
.prose h3 { margin-top: 1.5rem; color: var(--teal); }
/* ---------- Utility page simple nav ---------- */
.site-nav.simple { gap: 2rem; }
.site-nav.simple a { color: var(--navy); font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; font-size: 1.15rem; }
.site-nav.simple a:hover { color: var(--teal); }
@media (max-width: 900px) { .site-nav.simple { display: none; } }
/* ============================================================
SHARED BLOCK VOCABULARY (Easton skin)
The global blocks the assembler fills, skinned in Easton's
navy + teal + orange tokens. Easton-only extras (feature-band,
lf-banner) keep their own sections above.
============================================================ */
/* ---------- Flex-media (workhorse: short text + image) ---------- */
.flex-media { background: var(--color-bg); }
.flex-media--reverse, .flex-media--long-reverse { background: var(--color-bg-alt); }
.flex-media h2, .flex-media--long h2, .flex-media--long-reverse h2 { color: var(--color-heading); }
.flex-media-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 880px) { .flex-media-grid { grid-template-columns: 1.1fr 1fr; } }
.flex-media-text > :first-child { margin-top: 0; }
.flex-media-figure img { width: 100%; border-radius: 6px; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--shadow-md); }
.flex-media-cta-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; align-items: center; }
@media (min-width: 880px) { .flex-media--reverse .flex-media-figure { order: -1; } }
/* ============================================================
ZONEBAND — copy beside a data map (county choropleth + legend + source)
------------------------------------------------------------
A sibling of .flex-media, NOT a modifier of it, because the figure column
inverts every assumption .flex-media-figure makes: the map is PORTRAIT
(0.875 w/h — that is the real projected aspect of Minnesota, not a choice),
so the 4/3 + object-fit:cover rule at .flex-media-figure img would crop the
Arrowhead off. Here the figure sizes to its own intrinsic ratio and the TEXT
column is the wider of the two.
The legend is HTML, deliberately, not inside the SVG: it has to be
readable by screen readers, indexable, and legible at 390px, and baked-in
SVG label type is none of those. The swatches carry a border so the two
zones stay distinguishable without relying on hue.
Zone fills come from palette tokens so the map re-skins with the theme. They
separate by LUMINANCE (navy vs light blue), not hue alone. Olmsted is filled
the same as every other Zone 1 county and marked only with an outline —
colouring it differently would imply a different zone, and it is one of 68. */
.zoneband { background: var(--color-bg); padding: var(--section-pad, clamp(3rem, 7vw, 5.5rem)) 0; }
.zoneband h2 { color: var(--color-heading); }
.zoneband-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 880px) { .zoneband-grid { grid-template-columns: 1.25fr 1fr; } }
.zoneband-text > :first-child { margin-top: 0; }
.zoneband-figure { margin: 0; }
.zoneband-figure .zonemap { display: block; width: 100%; height: auto; max-width: 420px; margin-inline: auto; }
.zonemap-z1 { fill: var(--navy); }
.zonemap-z2 { fill: var(--color-bg-alt); }
.zonemap-z1, .zonemap-z2, .zonemap-here { stroke: var(--color-bg); stroke-width: 1.6; stroke-linejoin: round; }
.zonemap-here { fill: var(--navy); stroke: var(--orange); stroke-width: 6; }
.zonemap-dot { fill: #fff; }
/* No place-name label inside the map — the dot plus the Olmsted outline carry the
"you are here", and the legend names the county in real text below. Keeps the
map free of type that would need a halo to survive the navy fill. */
.zoneband-legend { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.zoneband-legend li { display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.7rem; align-items: start; font-size: 0.95rem; line-height: 1.45; }
.zoneband-legend .sw { width: 1.1rem; height: 1.1rem; border-radius: 3px; border: 1px solid var(--navy); margin-top: 0.15rem; }
.zoneband-legend .sw--z1 { background: var(--navy); }
.zoneband-legend .sw--z2 { background: var(--color-bg-alt); }
/* --here mirrors the map mark exactly: Zone 1 navy fill, accent outline, and the
same white dot. The dot is what makes the legend row legible as "that thing on
the map", since the fill alone is identical to the Zone 1 swatch above it. */
.zoneband-legend .sw--here { background: var(--navy); box-shadow: inset 0 0 0 2px var(--orange); position: relative; }
.zoneband-legend .sw--here::after { content: ""; position: absolute; inset: 0; margin: auto; width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.zoneband-legend b { color: var(--color-heading); }
.zoneband-source { margin: 1.1rem 0 0; font-size: 0.85rem; line-height: 1.5; color: var(--color-text-muted); }
/* ============================================================
COMPARE — two schematics side by side (active vs passive)
------------------------------------------------------------
Uses the DARK register on purpose. The light/alt bands alternate strictly
(08 alt, 09 bg, 10 alt, 11 bg), so inserting a light section anywhere in that
run puts two of the same tone back to back. Dark bands are the established
punctuation in this layout (07, 12, 13), so this reads as intentional instead
of as a broken rhythm — and a line schematic is far stronger reversed out of
navy than sitting on pale blue.
Panel headings and bullets are HTML, never in the SVG: same reasoning
as .zoneband — screen readers, indexing, and legibility at 390px. Each SVG
carries only a describing the mechanism it draws. */
.compare { background: var(--navy); color: #fff; padding: var(--section-pad, clamp(3rem, 7vw, 5.5rem)) 0; }
/* Heading centres over the pair; the two body blocks stay centred as a COLUMN
(margin-inline:auto) but left-justified as TEXT — centred rag on multi-line
paragraphs is hard to read and gives every line a different start point. */
.compare h2 { color: #fff; margin-top: 0; text-align: center; }
.compare-intro { max-width: 68ch; color: rgba(255,255,255,0.92); margin-inline: auto; text-align: left; }
.compare-grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); grid-template-columns: 1fr; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 760px) { .compare-grid { grid-template-columns: 1fr 1fr; } }
.compare-item { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.20); border-radius: 8px; padding: clamp(1.1rem, 2.2vw, 1.75rem); }
.compare-item h3 { color: #fff; margin: 1rem 0 0.5rem; font-size: clamp(1.15rem, 2.2vw, 1.4rem); }
.compare-item > p { color: rgba(255,255,255,0.92); margin: 0 0 0.9rem; }
.compare-figure { margin: 0; background: rgba(0,0,0,0.16); border-radius: 6px; padding: 0.75rem; }
.compare-figure .sysdiagram { display: block; width: 100%; max-width: 250px; height: auto; margin-inline: auto; }
.compare-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.compare-list li { position: relative; padding-left: 1.4rem; font-size: 0.95rem; line-height: 1.5; color: rgba(255,255,255,0.92); }
.compare-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--teal-bright); }
.compare-note { margin: clamp(1.25rem, 2.5vw, 2rem) auto 0; max-width: 68ch; color: rgba(255,255,255,0.92); text-align: left; }
/* Schematic ink. Structure is reversed out of the navy band; the pipe is solid
white so the in-pipe marks have to flip to dark to stay visible against it. */
.sysdiagram-soil { fill: rgba(255,255,255,0.13); }
.sysdiagram-house { fill: rgba(255,255,255,0.06); }
.sysdiagram-struct { fill: none; stroke: rgba(255,255,255,0.55); stroke-width: 2.5; stroke-linejoin: round; }
.sysdiagram-pipe { fill: #fff; }
/* Active riser is a stroked path, not a rect, so it can turn 45-degree elbows out to
the fan and back onto the same centreline — same route, fittings shown. */
.sysdiagram-pipe-line { fill: none; stroke: #fff; stroke-width: 20; stroke-linejoin: round; }
.sysdiagram-gas { fill: var(--teal-bright); }
.sysdiagram-gas-in { fill: var(--orange); }
.sysdiagram-flow { fill: none; stroke: var(--navy); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sysdiagram-flow--strong { stroke-width: 4.5; }
.sysdiagram-pull { fill: none; stroke: var(--teal-bright); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
/* Fan silhouette follows the real hardware shown in the hero and repair-card photos:
a squat housing WIDER than tall, bulging past the pipe, with stepped collars at the
couplings and a seam where the two halves meet. A plain box with a hub read as a
generic module and contradicted the photography. */
.sysdiagram-fan { fill: var(--orange); stroke: #fff; stroke-width: 2.5; }
.sysdiagram-fan-collar { fill: #fff; }
.sysdiagram-fan-seam { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; }
/* --long / --long-reverse: two columns of long copy, image cornered.
--long = image at TOP of the first column; --long-reverse = image at
the BOTTOM of the first column (columns are equal height). */
.flex-media-long-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: stretch; margin-top: 1.5rem; }
@media (min-width: 768px) { .flex-media-long-grid { grid-template-columns: 1fr 1fr; } }
.flex-media-long-col { display: flex; flex-direction: column; }
.flex-media-long-col > :first-child { margin-top: 0; }
.flex-media-long-col h3 { margin-top: 1.5rem; }
.flex-media-long-figure { margin: 0; }
.flex-media-long-figure img { width: 100%; border-radius: 6px; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--shadow-md); }
.flex-media-long-col > .flex-media-long-figure:first-child { margin-bottom: 1.25rem; }
.flex-media-long-col > .flex-media-long-figure:last-child { margin-top: auto; padding-top: 1.25rem; }
/* ---------- snow-list (check-bullet feature list) ---------- */
.snow-list { list-style: none; margin: 1.25rem 0 0; padding: 0; font-size: 0.97rem; }
.snow-list li { position: relative; padding-left: 30px; margin-bottom: 0.7rem; line-height: 1.5; color: var(--color-text); }
.snow-list li strong { color: var(--color-heading); }
.snow-list li::before {
content: ""; position: absolute; left: 0; top: 0.15em; width: 20px; height: 20px;
background-repeat: no-repeat; background-size: contain;
background-image: var(--bullet-snow);
}
.flex-media .snow-list { display: grid; grid-template-columns: 1fr; gap: 0.4rem 1.5rem; }
@media (min-width: 560px) { .flex-media .snow-list { grid-template-columns: 1fr 1fr; } }
.snow-list--single { grid-template-columns: 1fr !important; }
.section-dark .snow-list li, .spotlight .snow-list li { color: rgba(255,255,255,0.9); }
.section-dark .snow-list li strong, .spotlight .snow-list li strong { color: #fff; }
/* ---------- subhead (h3 lead-in inside text blocks) ---------- */
.subhead { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--teal); font-size: 1.2rem; margin: 1.5rem 0 0.5rem; }
.section-dark .subhead, .feature-aside .subhead { color: var(--teal-bright); }
/* Same reasoning as .hero-intro: body copy sitting over a photograph reads thin at
Roboto 400, and the extra stroke survives the lighter passes of the scrim. This band
is the only other place on the page where paragraphs sit directly on an image.
Roboto is a variable face (100-900), so 500 is a real weight, not synthesised. */
.feature-aside p { font-weight: 500; }
/* ---------- Feature-aside (dark text column + nav aside boxes) ---------- */
.feature-aside-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 960px) { .feature-aside-grid { grid-template-columns: 1.5fr 1fr; } }
.feature-aside-side { display: flex; flex-direction: column; gap: 1rem; justify-content: center; }
.feature-aside-box { background: var(--wash-accent); border: 1px solid var(--teal-bright); padding: 1.75rem; border-radius: 6px; text-align: center; }
.feature-aside-box-title { color: #fff; margin: 0 0 1rem; font-family: var(--font-head); font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 700; text-transform: uppercase; line-height: 1.05; }
.feature-aside-box .btn { width: 100%; background: var(--orange); color: var(--color-on-accent); border-color: var(--orange); }
.feature-aside-box .btn:hover { background: var(--orange-dark); border-color: var(--orange-dark); color: var(--color-on-accent); }
/* ---------- Spotlight (service areas + city narrative) ---------- */
/* Solid slate, not a photo. This was a .bg-host with a weathered-wood background whose
only job was to sit under the .bg-host::before scrim. Dropping the image means the
scrim has nothing to darken, so the section carries its own background. #3B4A5A is
a lightened relative of .hero--slate's #3B4A5A — same hue family, so the page keeps
one slate register rather than gaining a second dark blue. NOT --navy, which reads as
a different, brighter field. Nearly double the luminance of the hero slate (0.118 vs
0.066), which is what separates it from the dark bands around it while staying safely
above AA: white headings 6.24:1, rgba(255,255,255,0.85) body 5.03:1. */
.spotlight { color: #fff; background: #506279; }
/* Brighter tick: the themed --bullet-snow is a #0D47A1 navy disc, which was fine under
the old photo-plus-scrim but goes muddy on the slate field (2.0:1 disc-to-background).
Inverted to a #90CAF9 disc with a navy check — 3.57:1 against the slate, clearing the
3:1 bar for graphics, and the check reads 4.93:1 on the disc. Scoped away from
.spotlight--light, where a pale disc on the pale background would disappear. */
.spotlight:not(.spotlight--light) {
--bullet-snow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='%2390CAF9'/><path d='M17 8.5L10.5 15.5 7 12' fill='none' stroke='%230D47A1' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.spotlight .container { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (min-width: 880px) { .spotlight .container { grid-template-columns: 1.3fr 1fr; } }
.spotlight h2 { color: #fff; }
.spotlight p { color: rgba(255,255,255,0.85); }
/* No font-size here on purpose — these are h3s and now take the global h3 scale
(clamp(1.1rem, 1.8vw, 1.3rem)). They previously ran at clamp(1.6rem, 3.5vw, 2.2rem),
larger than the section's own h2. */
.spotlight-side-title { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; line-height: 1.15; color: #fff; margin: 0 0 1rem; }
.spotlight-areas { display: grid; grid-template-columns: 1fr; gap: 0 1.5rem; margin-top: 0; }
@media (min-width: 480px) { .spotlight-areas { grid-template-columns: 1fr 1fr; } }
.spotlight--light { color: var(--color-text); background: var(--color-bg); }
.spotlight--light h2 { color: var(--color-heading); }
.spotlight--light .spotlight-side-title { color: var(--teal); }
.spotlight--light p, .spotlight--light .snow-list li { color: var(--color-text); }
.spotlight--light .snow-list li strong { color: var(--color-heading); }
/* ---------- Steps (two text columns, no imagery) ----------
Was a staggered timeline with 160px circular photos alternating left/right. The
photos were concrete placeholders that illustrated nothing, and the zig-zag forced
one step per row — six rows of mostly empty space. Text-only in two columns halves
the vertical run and lets the numbers carry the sequence.
Reading order is ROW-WISE (1 2 / 3 4 / 5 6), which is what CSS grid auto-flow gives
and what matches the DOM order, so the numbered sequence stays correct for screen
readers and for sighted readers alike. Do not switch this to columns without
renumbering. */
.steps h2 { color: #fff; }
.process-intro { max-width: 70ch; margin: 0 auto 2.5rem; text-align: center; color: rgba(255,255,255,0.85); }
.process-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3.5rem); max-width: 1000px; margin: 0 auto; padding: 0; list-style: none; }
@media (min-width: 700px) { .process-grid { grid-template-columns: 1fr 1fr; } }
.process-step { width: 100%; text-align: left; }
.process-step > :first-child { margin-top: 0; }
.process-step .step-num { display: block; font-family: var(--font-head); font-size: 2rem; font-weight: 700; color: var(--orange-bright); line-height: 1; margin-bottom: 0.25rem; }
.process-step h3 { color: #fff; margin-bottom: 0.4rem; }
.process-step p { color: rgba(255,255,255,0.80); font-size: 0.95rem; margin: 0; }
.mini-cta { margin-top: 3rem; text-align: center; padding: 1.75rem; background: rgba(255,255,255,0.04); border-radius: 6px; }
.mini-cta p { color: var(--orange-bright); font-family: var(--font-head); font-weight: 700; text-transform: uppercase; margin: 0 0 0.35rem; font-size: 1.15rem; }
.mini-cta p + p { color: rgba(255,255,255,0.80); font-weight: 400; text-transform: none; margin-bottom: 1rem; font-family: var(--font-body); }
.mini-cta .btn { margin-top: 0.5rem; }
/* ---------- Banner (centered emphasis over image) ---------- */
/* Same treatment as .services-head: heading centred, body copy left-justified, block
still centred as a column. .banner-cta-row keeps its own justify-content:center, so
the buttons stay centred under the left-set paragraph. */
.banner { color: #fff; display: flex; align-items: center; min-height: 420px; padding: clamp(3.5rem, 7vw, 6rem) 0; text-align: left; }
.banner-inner { max-width: 760px; margin: 0 auto; }
.banner h2, .banner .banner-kicker { text-align: center; }
.banner h2 { color: #fff; }
.banner p { color: rgba(255,255,255,0.9); }
.banner-kicker { font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-size: 1.05rem; color: var(--teal-bright); margin: 0 0 0.5rem; }
.banner-cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; justify-content: center; margin-top: 1.75rem; }
/* ---------- Testimonials carousel (JS in /testimonials.js) ---------- */
.testimonials { background: var(--color-bg-alt); }
.testi-carousel { display: flex; align-items: center; gap: clamp(0.5rem, 2vw, 1rem); margin-top: 2rem; }
.testi-viewport { overflow: hidden; flex: 1 1 auto; min-width: 0; }
.testi-track { display: flex; margin: 0; padding: 0; list-style: none; will-change: transform; }
.testi-slide { flex: 0 0 100%; width: 100%; padding: 0.5rem clamp(0.25rem, 2vw, 1.5rem); }
.testi-quote { margin: 0 auto; max-width: 760px; background: var(--color-bg); border: 1px solid var(--color-border); border-top: 4px solid var(--teal); border-radius: 6px; padding: clamp(1.5rem, 4vw, 2.75rem); text-align: center; box-shadow: var(--shadow-md); }
.testi-quote > p { font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.6; font-style: italic; color: var(--color-text); margin: 0 0 1.5rem; }
.testi-quote > p::before { content: "\201C"; }
.testi-quote > p::after { content: "\201D"; }
.testi-cite { display: flex; flex-direction: column; gap: 0.1rem; }
.testi-name { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--color-heading); font-size: 1.2rem; }
.testi-meta { font-size: 0.9rem; color: var(--color-text-muted); }
.testi-arrow { flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: var(--navy); color: #fff; border: 0; border-radius: 50%; cursor: pointer; transition: background-color .15s ease, color .15s ease, transform .08s ease; }
.testi-arrow:hover { background: var(--orange); color: var(--color-on-accent); }
.testi-arrow:active { transform: scale(0.94); }
.testi-arrow svg { width: 24px; height: 24px; }
.testi-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.5rem; }
.testi-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-border); transition: background-color .15s ease; }
.testi-dot.is-active { background: var(--teal); }
@media (prefers-reduced-motion: reduce) { .testi-track { transition: none !important; } }
/* ---------- CTA (closing call to action) ---------- */
.cta-split { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 880px) { .cta-split { grid-template-columns: 1fr 1fr; } }
.cta-split .btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.cta > .container > .btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
/* ---------- Print ---------- */
@media print {
.top-bar, .site-header, .site-footer, .nav-cta, .howitworks, .feature-band { display: none; }
body { font-size: 12pt; color: #000; background: #fff; }
}
/* ============================================================
AZURE — rules that must sit AFTER the shared blocks they override
(equal specificity, so source order decides).
============================================================ */
/* Slate hero, the 3rd variant: a DARK blue-grey wash instead of the light scrim, giving a
third register alongside the checklist hero and the light intro hero. #3B4A5A is the same
blue-grey already used for --color-text-muted, so no new colour enters the palette.
Opacity is TUNED TO THE CURRENT HERO PHOTO (radon-fan-piping-dark-siding) and is TWO
REGISTERS, because the crop differs so much by breakpoint. Remeasure both if the photo
is swapped. Body copy is rgba(255,255,255,0.92), not pure white, so it is measured at
that alpha; the binding constraint is always the white PVC stack, never the siding.
<=900px: 0.80/0.94. The 30% anchor pulls the fan into a 375-wide frame, so a large white
object now sits directly behind FULL-WIDTH body copy. Worst case at 375w -> title 5.28:1,
body 4.98:1. 0.76/0.92 was rejected at 4.54:1 — passing, but no margin.
>=901px: 0.64/0.82. The copy only occupies the left column over a much wider crop, so the
same photo tolerates far more light. 1280w -> title 4.73:1, body 4.57:1; 1600w -> 4.77 /
4.57. 0.62/0.80 was rejected — body drops to 4.44:1.
The gradient keeps the 210deg diagonal of the other heroes so the family reads as one
system. */
.hero--slate::before { background: linear-gradient(210deg, rgba(59,74,90,0.80) 0%, rgba(59,74,90,0.94) 55%); }
@media (min-width: 901px) {
.hero--slate::before { background: linear-gradient(210deg, rgba(59,74,90,0.64) 0%, rgba(59,74,90,0.82) 55%); }
}
[data-theme="azure"] .hero--slate { color: #fff; }
[data-theme="azure"] .hero--slate .hero-title { color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,0.35); }
[data-theme="azure"] .hero--slate .hero-intro { color: rgba(255,255,255,0.92); }
[data-theme="azure"] .hero--slate .btn-services { border-color: #fff; }
[data-theme="azure"] .hero--slate .btn-services:hover { background: transparent; color: #fff; border-color: #fff; }
/* Header phone as plain text rather than a button: no fill, no keyline, no hard shadow.
#0D47A1 on the white header is 8.63:1. Sized up from 1.3rem to 1.6rem since it is now
carrying itself without a button shape behind it. */
[data-theme="azure"] .btn-tel {
background: transparent; color: #0D47A1; box-shadow: none; border: 0;
padding: 0.35rem 0; border-radius: 0; font-size: 1.6rem; min-height: 0;
}
[data-theme="azure"] .btn-tel:hover { background: transparent; box-shadow: none; color: #2196F3; }
/* ============================================================
SITE-LOCAL (rochester-radon-mitigation-co)
============================================================ */
/* Trailing CTA line under the FAQ accordion. The faq block ships no CTA
furniture, so the content's closing sentence sits inside the navy panel
and needs on-dark ink. */
/* flex-media--long puts the figure at the TOP of the image column, so — unlike
--long-reverse, whose bottom-anchored figure has margin-top:auto — nothing
absorbs the column's leftover height and the two columns can end ragged.
Let that figure grow into the slack instead. */
.flex-media--long .flex-media-long-col > .flex-media-long-figure:first-child { flex: 1 1 auto; display: flex; }
.flex-media--long .flex-media-long-col > .flex-media-long-figure:first-child img {
aspect-ratio: auto; height: 100%; min-height: 300px;
}
/* Hero intro paragraphs: this site's hero carries four of them, so they get
looser leading and tighter spacing than the shared 1.75rem rule. */
.hero-intro { line-height: 1.6; margin-bottom: 0.7rem; }
/* Hero: tighter gap under the h1, and give the copy column more of the row —
four intro paragraphs need the width more than the form does. */
.hero-title { margin-bottom: clamp(0.75rem, 1.5vw, 1.125rem); }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1.3fr 0.7fr; } }
.hero-grid { gap: clamp(2rem, 4vw, 3rem); }
/* Inline links in the slate hero. azure's --color-link is #0D47A1, which is
near-invisible on the #3B4A5A wash; #90CAF9 measures 5.19:1 on it. */
.hero--slate .hero-intro a { color: #90CAF9; }
/* A long-column figure that sits BETWEEN other children (e.g. copy above, a CTA
row below) matches neither the :first-child nor the :last-child rule, so
nothing absorbs the column's slack and the two columns end ragged. Let it
grow — object-fit: cover means it crops rather than distorts. */
.flex-media-long-col > .flex-media-long-figure:not(:first-child):not(:last-child) { flex: 1 1 auto; display: flex; }
.flex-media-long-col > .flex-media-long-figure:not(:first-child):not(:last-child) img {
aspect-ratio: auto; height: 100%; min-height: 300px;
}
/* Phone-number buttons: solid at rest, outlined on hover — the reverse of the
template's default. White ink on #0D47A1 is 8.63:1 at rest; on hover the
#0D47A1 label is 7.56:1 on --color-bg and 4.93:1 on --color-bg-alt. */
.btn-outline-dark { background: var(--color-heading); color: #fff; border-color: var(--color-heading); }
.btn-outline-dark:hover { background: transparent; color: var(--color-heading); border-color: var(--color-heading); }
/* The estimate-card title carries a full sentence here rather than the
template's four words, so it drops from clamp(1.7rem, 3vw, 2.2rem). */
.estimate-title { font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.2; }
/* The spotlight palette block ships no figure; this site adds one at the foot
of the narrative column. margin-top:auto would need the column stretched, so
it just follows the copy. */
.spotlight-figure { margin: 1.5rem 0 clamp(1.75rem, 3vw, 2.5rem); }
.spotlight-figure img { width: 100%; height: auto; display: block; border-radius: 6px; aspect-ratio: 16 / 9; object-fit: cover; box-shadow: var(--shadow-md); }
/* Closing CTA runs on the pale page blue rather than the template's navy. */
.cta--light { background: #E3F2FD; border-top: 4px solid var(--orange); }
/* Heading sizes rescaled for IBM Plex Sans Condensed. Measured against the
template's Barlow Condensed, Plex Condensed sets 29% wider at the same size,
which pushed the h1 to 3 lines and six h2s from 2 lines to 3. Scaling by
~0.80 restores the original line counts at the same optical weight. */
h1 { font-size: clamp(1.75rem, 4.15vw, 2.9rem); }
h2 { font-size: clamp(1.45rem, 3.2vw, 2.15rem); }
h3 { font-size: clamp(1.1rem, 1.8vw, 1.3rem); }
/* Top-level nav in Plex Condensed: smaller, and a tighter gap so the four
items plus the logo stay on one row. */
.nav-item > a { font-size: 0.95rem; }
.nav-list { gap: 0.25rem 1.4rem; }
/* Quote-form fields: pin the body face, and drop the inherited 1.7 body
line-height — that's a prose value and it made placeholders (the 3-line
textarea especially) read loose and oversized. */
.estimate-form input, .estimate-form select, .estimate-form textarea {
font-family: var(--font-body);
line-height: 1.4;
}
/* Placeholder ink: --color-text-muted at 0.8 over white lands ~4.9:1 — clears
AA while staying clearly lighter than an entered value (#16202B, 14.4:1),
so placeholder never reads as filled-in. No new colour enters the palette.
Opacity is set explicitly because Firefox applies its own by default. */
.estimate-form ::placeholder { color: var(--color-text-muted); opacity: 0.8; }
/* Closing CTA stacks in one centred column — heading, copy, then buttons.
(.cta > .container > .btn-row already centres the row.) */
.cta--light .container { text-align: center; }
.cta--light h2 { margin-bottom: 0.6rem; }
.cta--light p { max-width: 70ch; margin-left: auto; margin-right: auto; }
/* Second service-area group in the spotlight column needs breathing room from
the list above it (the side-title's own margin assumes it starts the column). */
.spotlight-side-title--second { margin-top: 2.25rem; }