/* ============================================================ Easton Concrete — site/style.css Distinct template recreated from eastonconcretecontractors.com. Palette: deep navy + teal + orange CTA. Fonts: Archivo (headings) + Public Sans (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: "Public Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --font-head: "Archivo", 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; } /* the steps circle: --teal is #0D47A1 in this palette and so is the .section-dark background, so the shared rule painted an invisible circle on an identical field. Pale blue reads at 4.93:1 against the section, and the deep-blue glyph is 4.93:1 on the circle. */ [data-theme="azure"] .process-step > .process-step-icon { background: #90CAF9; 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.17rem; } /* 18.7px — the floor for white-on-#2196F3 (large-text 3:1); do not go lower with white ink */ /* ---------- Self-hosted fonts ---------- */ @font-face { font-family:"Public Sans"; font-style:normal; font-weight:400 700; font-display:swap; src:url("/fonts/public-sans.woff2") format("woff2"); } @font-face { font-family:"Archivo"; font-style:normal; font-weight:400 800; font-display:swap; src:url("/fonts/archivo.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(2rem, 4.4vw, 3rem); } h2 { font-size: clamp(1.55rem, 3.3vw, 2.25rem); } h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); 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.6rem 1.35rem; border: 2px solid transparent; border-radius: 4px; text-decoration: none; cursor: pointer; min-height: 46px; 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); } .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-dark-siding-bg-1600.webp") center / cover no-repeat fixed; } .faq.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; } } /* ============================================================ 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); } /* nav.js flags dropdowns whose children are plain text: in the drawer those parents navigate instead of expanding, so the caret would promise a disclosure that never happens. It still earns its place on desktop, where hover reveals the list. */ .site-nav.is-open .has-dropdown--unlinked > a .nav-caret { display: none; } .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 { color: #fff; padding: clamp(1.25rem, 2.5vw, 2.25rem) 0 clamp(3rem, 7vw, 6rem); background: var(--navy) url("/images/radon-fan-siding-bg-1600.webp") center / cover no-repeat fixed; border-bottom: 4px solid var(--orange); } .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.6fr 0.8fr; } .hero-text { padding-top: 2rem; } } .hero-title { color: #fff; margin: 0 0 clamp(1rem, 2vw, 1.5rem); 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); line-height: 1.45; margin-bottom: 0.7rem; } /* 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.35rem, 2.2vw, 1.7rem); line-height: 1.05; 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; } /* Hard-locked Turnstile slot: the widget renders INTO this fixed box and can never resize the form / re-scale the hero background during its boot (the async iframe has no intrinsic height — the "hero hop"). display:block on the iframe kills the inline-gap that otherwise pads the box past 65px. */ .cf-turnstile { height: 65px; width: 300px; max-width: 100%; overflow: hidden; } .cf-turnstile iframe { display: block; transform-origin: left top; } /* Narrow phones: the 300px iframe won't fit the card's content box (viewport minus ~88px of container+card padding), so scale it down rather than clip it. Height tracks the scale so no dead space opens below (65*scale). */ @media (max-width: 400px) { .cf-turnstile { width: 270px; height: 59px; } .cf-turnstile iframe { transform: scale(0.9); } } @media (max-width: 345px) { .cf-turnstile { width: 222px; height: 48px; } .cf-turnstile iframe { transform: scale(0.74); } } .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. ============================================================ */ .services-head { text-align: center; 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-dark-siding-bg-1600.webp") center / cover no-repeat fixed; } .faq-panel { background: var(--navy); 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 h3 { color: #fff; margin: 0 0 1rem; padding-bottom: 0.5rem; position: relative; font-size: 1.3rem; } .footer-col h3::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; } } /* --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; } @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: 0; } /* uniform with .flex-media-text: the p bottom margin alone carries the gap (flex cols don't collapse margins, so 1.5rem here doubled the rhythm) */ .flex-media-long-col .flex-media-long-figure:not(:last-child) { margin-bottom: 1em; } .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.5rem; 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.3rem 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); } /* ---------- 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) ---------- */ .spotlight { color: #fff; } .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); } .spotlight-side-title { font-family: var(--font-head); font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 700; text-transform: uppercase; line-height: 1.05; 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 (staggered timeline: one per row, circles inside) ---------- */ .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: flex; flex-direction: column; gap: clamp(1.75rem, 3.5vw, 3rem); max-width: 920px; margin: 0 auto; padding: 0; list-style: none; } .process-step { display: grid; align-items: center; gap: clamp(1.25rem, 3vw, 2.25rem); width: min(600px, 100%); } .process-step > img, .process-step > .process-step-icon { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; margin: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .process-step > .process-step-icon { background: var(--teal); color: #fff; } .process-step-body > :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; } /* odd = aligned left: text OUTSIDE (left), circle INSIDE (right) */ .process-step:nth-child(odd) { grid-template-columns: 1fr auto; margin-right: auto; text-align: right; } .process-step:nth-child(odd) > .process-step-body { grid-column: 1; grid-row: 1; } .process-step:nth-child(odd) > img, .process-step:nth-child(odd) > .process-step-icon { grid-column: 2; grid-row: 1; } /* even = aligned right: circle INSIDE (left), text OUTSIDE (right) */ .process-step:nth-child(even) { grid-template-columns: auto 1fr; margin-left: auto; text-align: left; } /* stack on small screens: circle on top, text below, centered */ @media (max-width: 640px) { .process-step:nth-child(odd), .process-step:nth-child(even) { grid-template-columns: 1fr; width: 100%; margin: 0; text-align: center; justify-items: center; } .process-step:nth-child(odd) > img, .process-step:nth-child(odd) > .process-step-icon, .process-step:nth-child(even) > img, .process-step:nth-child(even) > .process-step-icon { grid-column: 1; grid-row: 1; margin: 0 auto; } .process-step:nth-child(odd) > .process-step-body, .process-step:nth-child(even) > .process-step-body { grid-column: 1; grid-row: 2; } } .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) ---------- */ .banner { color: #fff; display: flex; align-items: center; min-height: 420px; padding: clamp(3.5rem, 7vw, 6rem) 0; text-align: center; } .banner-inner { max-width: 760px; margin: 0 auto; } .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. Floor is 0.80, not 0.72: at 0.72 over a BRIGHT photo white body copy falls to 4.25:1, just under AA. At 0.80 the same worst case is 5.21: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.55) 0%, rgba(59,74,90,0.80) 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; } /* ============================================================ ZONEBAND — copy beside the Wisconsin radon-zone choropleth. Ported from the Rochester radon build. Sibling of .flex-media, not a modifier: the map is portrait and the TEXT column is wider. Zone fills come from palette tokens so the map re-skins with the theme (azure: z1 = deep blue --navy, z2 = light --color-bg-alt). ------------------------------------------------------------ EAU CLAIRE IS ZONE 2 (not Zone 1 like Rochester's Olmsted), so the "you are here" mark reads as Zone 2: light z2 fill + accent outline, with a DARK dot (a white dot would vanish on the light fill). */ .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-z3 { fill: var(--color-bg); } .zonemap-z1, .zonemap-z2, .zonemap-z3, .zonemap-here { stroke: var(--color-bg); stroke-width: 1.6; stroke-linejoin: round; } .zonemap-here { fill: var(--color-bg-alt); stroke: var(--orange); stroke-width: 6; } .zonemap-dot { fill: var(--navy); } .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); } .zoneband-legend .sw--z3 { background: var(--color-bg); } .zoneband-legend .sw--here { background: var(--color-bg-alt); 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: var(--navy); } .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 cutaway schematics (active vs passive). Dark register. Ported from the Rochester radon build. Tokens reskin to azure. ------------------------------------------------------------ */ .compare { background: var(--navy); color: #fff; padding: var(--section-pad, clamp(3rem, 7vw, 5.5rem)) 0; } .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 reversed out of navy; pipe solid white so the in-pipe marks 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; } .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; } .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; } /* Wordmark fallback (no logo yet): keep the long business name on one tidy line in the header, and flip it to white where it sits on the dark footer. */ /* Archivo (headings) is a normal-width grotesque, wider than the template's condensed default — so the long "Eau Claire Radon Mitigation" wordmark, the nav, and the big hero H1 all need reining in to hold their rows/lines. */ .site-header .brand-text { font-size: 1.05rem; line-height: 1.1; letter-spacing: 0; max-width: 12rem; } @media (max-width: 600px) { .site-header .brand-text { font-size: 1rem; } } .nav-list { gap: 0.25rem 1.4rem; } .nav-item > a { font-size: 0.9rem; letter-spacing: 0.02em; } /* Hero H1 stays a clear step above the h2s (h2 caps at 2.25rem) so hierarchy reads. */ .hero-title { font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.03; } .site-footer .brand-text { color: #fff; font-size: 1.4rem; max-width: 18ch; line-height: 1.1; } /* Spotlight areas lead-in line (sits under the side title, above the list). */ .spotlight-side-intro { margin: 0.5rem 0 0.75rem; } /* Closing CTA: stacked single-column layout — centered heading, readable-width text on its own row, centered button row (the .cta > .container > .btn-row rule already centers the buttons). */ .cta .cta-heading-centered { text-align: center; } .cta .cta-body { max-width: 68ch; margin-inline: auto; } /* A figure that is the ONLY thing in its long-col (e.g. the cost section's all-text-left layout) should pin to the top, not inherit the :last-child bottom-anchoring meant for text-above-figure columns. */ .flex-media-long-col > .flex-media-long-figure:only-child { margin-top: 0; padding-top: 0; } /* Compact figure (foundations section): full column width with a widescreen crop, flowing naturally after the text — no bottom-anchoring, so there is no stretched gap above the image. */ .flex-media-long-col > .flex-media-long-figure.figure-compact:last-child { margin-top: 0; padding-top: 0.25rem; } .flex-media-long-figure.figure-compact img { aspect-ratio: 16 / 10; } /* Spotlight (light) left-column figure: full width, wide crop. */ .spotlight-figure { margin: 1.5rem 0 0; } .spotlight-figure img { width: 100%; border-radius: 6px; aspect-ratio: 16 / 9; object-fit: cover; box-shadow: var(--shadow-md); } /* Spotlight side-titles at normal h3 scale (the template's default is near-h2). */ .spotlight--light .spotlight-side-title { font-size: clamp(1.2rem, 2vw, 1.45rem); } /* Breathing room when one spotlight list is followed by another side-title. */ .spotlight-areas + .spotlight-side-title { margin-top: 1.75rem; } /* Hero CTA row moved above the (long) intro: actions visible immediately under the H1; add a gap before the intro text starts. */ .hero-text > .hero-cta-row:first-child { margin-top: 0.25rem; margin-bottom: 1.5rem; } /* eau-claire: larger boxed footer logo (square lockup reads small at the template's 70px) */ .footer-brand-logo--boxed img { height: 112px; } /* eau-claire: brand name under boxed footer logo */ .footer-brand-name { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; color: #fff; font-size: 1.15rem; line-height: 1.2; margin: 0.9rem 0 0.35rem; } /* eau-claire: 404 numeral (orange-ink, not the orange FILL — 2.74:1 trap from rochester) */ .error-code { font-family: var(--font-head); font-size: 6rem; letter-spacing: 0.03em; margin: 0; color: var(--orange-ink); }