/* Elite Septic Fox River — site stylesheet. Hand-written, mobile-first. Palette sampled from the Elite Septic Fox River logo. Contrast ratios (WCAG 2.x) noted per pair. */ /* ---------- Fonts: self-hosted Latin subsets (SIL OFL 1.1; licences in /assets/fonts/). ---------- Montserrat 700-800 and Source Sans 3 400-700 are variable files from Google Fonts; one file covers each range. */ @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700 800; font-display: swap; src: url("/assets/fonts/montserrat-latin-700-800.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/source-sans-3-latin-400-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/source-sans-3-latin-400-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Metric-matched fallbacks: local Arial scaled to the web font's average glyph width (size-adjust, measured on the site's own copy) with the web font's vertical metrics (hhea ascent/descent, no line gap) divided by that scale, so text wraps and sits the same before and after the swap. */ @font-face { font-family: "Montserrat Fallback"; font-style: normal; font-weight: 800; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 111.50%; ascent-override: 86.82%; descent-override: 22.51%; line-gap-override: 0%; } @font-face { font-family: "Montserrat Fallback"; font-style: normal; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 109.40%; ascent-override: 88.48%; descent-override: 22.94%; line-gap-override: 0%; } @font-face { font-family: "Source Sans 3 Fallback"; font-style: normal; font-weight: 400; src: local("Arial"), local("ArialMT"); size-adjust: 92.90%; ascent-override: 110.23%; descent-override: 43.06%; line-gap-override: 0%; } @font-face { font-family: "Source Sans 3 Fallback"; font-style: normal; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 88.90%; ascent-override: 115.19%; descent-override: 44.99%; line-gap-override: 0%; } @font-face { font-family: "Source Sans 3 Fallback"; font-style: normal; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 91.30%; ascent-override: 112.16%; descent-override: 43.81%; line-gap-override: 0%; } @font-face { font-family: "Source Sans 3 Fallback"; font-style: italic; font-weight: 400; src: local("Arial Italic"), local("Arial-ItalicMT"); size-adjust: 90.60%; ascent-override: 113.02%; descent-override: 44.15%; line-gap-override: 0%; } :root { /* brand */ --navy: #0f243f; /* logo background; header, hero, footer. White on navy 15.62:1 */ --navy-900: #0b1c33; /* hero gradient end. White 17.1:1 */ --navy-700: #13304f; /* raised panels on navy. White 13.43:1, aqua 7.52:1 */ --orange: #e8742c; /* CTA buttons (navy text 5.18:1), accents on navy (5.18:1) */ --orange-300: #f08a3c; /* CTA hover (navy text 6.25:1) */ --orange-700: #b4491b; /* orange text on light (4.95:1 on --bg, 5.34:1 on white) */ --aqua: #62d1e4; /* links/icons on navy (8.75:1) */ --teal: #55bab8; /* decorative dividers and waves only */ --blue: #2a71a8; /* logo ring blue */ /* neutrals */ --ink: #0f243f; /* headings: 15.62:1 on white */ --text: #1c2a3a; /* body: 14.57:1 on white, 13.43:1 on --bg */ --muted: #4a5a6c; /* secondary text: 6.52:1 on --bg */ --on-dark: #c9d6e3; /* body text on navy: 10.57:1 */ --on-dark-muted: #a9bccf; /* small text on navy: 8.02:1 */ --bg: #f3f6f9; /* cool light page background */ --paper: #ffffff; --tint: #e7f1f6; /* aqua-tinted panels; link 5.88:1 */ --line: #d9e2eb; --link: #1f5f93; /* links on light: 6.74:1 white, 6.21:1 --bg */ --focus-light: #1f5f93; --focus-dark: #62d1e4; /* map counties: label text on its own tinted county (tint = same colour at 6-8%), all >= 5:1 */ --c-brown: #a8441a; /* 5.04:1 */ --c-outagamie: #146c70; /* 5.12:1 */ --c-winnebago: #1f5f93; /* = --link, 5.59:1 */ --c-calumet: #0f243f; --radius: 14px; --radius-sm: 8px; --shadow: 0 1px 2px rgba(15, 36, 63, .06), 0 10px 28px rgba(15, 36, 63, .1); /* layered navy-tinted card shadows: contact, mid, ambient */ --shadow-card: 0 1px 2px rgba(15, 36, 63, .07), 0 4px 12px rgba(15, 36, 63, .07), 0 16px 36px rgba(15, 36, 63, .09); --shadow-lift: 0 2px 4px rgba(15, 36, 63, .08), 0 12px 24px rgba(15, 36, 63, .12), 0 28px 56px rgba(15, 36, 63, .15); --accent: linear-gradient(90deg, var(--orange) 0%, var(--orange) 30%, var(--aqua) 100%); /* decorative card edge */ --lift: -3px; /* hover lift; 0 under reduced motion */ --ease: cubic-bezier(.2, .7, .2, 1); --font-head: "Montserrat", "Montserrat Fallback", "Segoe UI", system-ui, -apple-system, sans-serif; --font-body: "Source Sans 3", "Source Sans 3 Fallback", "Segoe UI", system-ui, -apple-system, sans-serif; --wrap: 75rem; --gutter: 1rem; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: 7rem; } /* in-page targets (e.g. the footer's /#what-we-do) land clear of the sticky header (4.5rem mobile, 5.5rem desktop) */ section[id] { scroll-margin-top: 1rem; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; overflow-wrap: break-word; } img, svg { max-width: 100%; height: auto; } h1, h2, h3 { font-family: var(--font-head); color: var(--ink); line-height: 1.15; letter-spacing: -.015em; font-weight: 800; } h1 { font-size: clamp(2rem, 1.25rem + 3.3vw, 3.6rem); /* Montserrat runs ~8% wider than Archivo */ line-height: 1.06; letter-spacing: -.025em; margin: .25em 0 .45em; } h2 { font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.6rem); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 .65em; text-wrap: balance; } h3 { font-size: clamp(1.18rem, 1.1rem + .35vw, 1.38rem); margin: 1.6em 0 .4em; } /* Eyebrow label above each H2 (a

, not a heading). 12.8px uppercase 800: orange-700 #b4491b: 5.34:1 white, 4.95:1 --bg, 4.68:1 --tint. Orange #e8742c on navy 5.18:1. */ .eyebrow { display: flex; align-items: center; gap: .65rem; margin: 0 0 .7rem; font: 800 .8rem/1.2 var(--font-head); letter-spacing: .16em; text-transform: uppercase; color: var(--orange-700); } .eyebrow::before { content: ""; flex: none; width: 2rem; height: 3px; border-radius: 3px; background: currentColor; } p { margin: 0 0 1em; } a { color: var(--link); text-decoration-thickness: .08em; text-underline-offset: .18em; } a:hover { color: var(--navy); text-decoration-thickness: .14em; } :focus-visible { outline: 3px solid var(--focus-light); outline-offset: 2px; border-radius: 4px; } .site-header :focus-visible, .hero :focus-visible, .site-footer :focus-visible, .cta-section :focus-visible, .sec-navy :focus-visible, .call-card :focus-visible { outline-color: var(--focus-dark); } strong { color: var(--ink); font-weight: 700; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); } .skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--orange); color: var(--navy); font-weight: 700; padding: .6rem 1rem; border-radius: var(--radius-sm); } .skip-link:focus { top: 1rem; color: var(--navy); } main:focus { outline: none; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; padding: .6rem 1.15rem; border-radius: 999px; border: 2px solid transparent; font-family: var(--font-head); font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s, color .2s; } .btn:hover, .btn:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(4, 12, 24, .28); } .btn:active { transform: none; } /* navy on orange 5.18:1; hover navy on lighter orange 6.25:1 */ .btn-call { background: var(--orange); color: var(--navy); } .btn-call:hover { background: var(--orange-300); color: var(--navy); } /* white on navy 15.62:1; aqua border 8.75:1 vs navy */ .btn-ghost { background: transparent; color: #fff; border-color: var(--aqua); } .btn-ghost:hover { background: var(--navy-700); color: #fff; } .btn-lg { min-height: 3.25rem; padding: .8rem 1.4rem; font-size: 1.08rem; } .icon { flex: none; } /* ---------- Header (navy, so the logo's navy square blends in) ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--navy); color: #fff; border-bottom: 3px solid var(--teal); } .header-inner { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; min-height: 4.5rem; padding-top: .35rem; padding-bottom: .35rem; } .brand { display: inline-flex; align-items: center; text-decoration: none; margin-right: auto; border-radius: 50%; } .site-header .logo { display: block; width: 58px; height: 58px; } .header-call { display: none; } .nav-toggle { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .5rem .9rem; background: transparent; color: #fff; border: 2px solid var(--aqua); border-radius: 999px; font: 700 .95rem var(--font-head); cursor: pointer; } .nav-toggle:hover { background: var(--navy-700); } .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: transform .2s, background .2s; } .nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; } .nav-toggle-bars::before { top: -6px; } .nav-toggle-bars::after { top: 6px; } .nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; } .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); } html:not(.js) .nav-toggle { display: none; } .site-nav { flex-basis: 100%; } .js .site-nav { display: none; } .js .site-nav.is-open { display: block; } /* mobile: the open menu (7 services + 7 areas when both are expanded) can be taller than the screen; the header is sticky, so the menu scrolls inside itself instead of running off-screen */ @media (max-width: 59.99em) { .js .site-nav.is-open { max-height: calc(100vh - 5rem); max-height: calc(100dvh - 5rem); overflow-y: auto; overscroll-behavior: contain; } } /* no JS (main.js missing or failed, html.js removed), below 60em (QA M2a, 2026-10-26): the nav can't collapse, so the header stops being sticky (it would cover the page) and scrolls away like normal content. The submenus stay open as compact two-column link grids, so every link is still one tap away. */ @media (max-width: 59.99em) { html:not(.js) .site-header { position: relative; } html:not(.js) .dd-toggle { cursor: default; } html:not(.js) .dd-toggle .caret { display: none; } html:not(.js) .dd-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .5rem; } html:not(.js) .dd-menu a { padding: .55rem .5rem; } html:not(.js) .dd-all { grid-column: 1 / -1; } } .nav-list, .dd-menu { list-style: none; margin: 0; padding: 0; } .nav-list { padding: .25rem 0 .75rem; border-top: 1px solid rgba(98, 209, 228, .3); } .nav-list > li > a, .dd-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 3rem; padding: .5rem .25rem; background: none; border: 0; border-bottom: 1px solid rgba(201, 214, 227, .18); color: #fff; text-decoration: none; text-align: left; font: 700 1.05rem var(--font-head); cursor: pointer; } .nav-list > li > a:hover, .dd-toggle:hover { color: var(--aqua); } .nav-list > li > a[aria-current] { color: var(--aqua); } /* "page", or "true" on the Articles link inside /articles/ */ .caret { width: .55rem; height: .55rem; margin-left: .5rem; border-right: 2px solid var(--aqua); border-bottom: 2px solid var(--aqua); transform: translateY(-2px) rotate(45deg); transition: transform .2s; } .dd-toggle[aria-expanded="true"] .caret { transform: translateY(2px) rotate(-135deg); } /* current section (build.py adds .is-current + hidden "(current section)" text): aqua label with an orange underline bar, the same cue as the aria-current links (aqua 8.75:1 on navy; orange bar 5.18:1) */ .dd-toggle.is-current { color: var(--aqua); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: .35em; } .js .dd-menu { display: none; } .js .dd-toggle[aria-expanded="true"] + .dd-menu { display: block; } .dd-menu { padding: .25rem 0 .5rem .75rem; } /* mobile: menu items sit on navy. on-dark 10.57:1 */ .dd-menu a { display: block; padding: .6rem .5rem; color: var(--on-dark); text-decoration: none; border-radius: var(--radius-sm); } .dd-menu a:hover { background: var(--navy-700); color: #fff; } .dd-menu a[aria-current="page"] { font-weight: 700; color: var(--aqua); } .dd-all { border-top: 1px solid rgba(201, 214, 227, .18); margin-top: .35rem; padding-top: .35rem; } .dd-all a { font-weight: 700; color: var(--orange); } /* 5.18:1 on navy */ /* ---------- Hero ---------- */ .hero { background: radial-gradient(50rem 26rem at 105% -5%, rgba(98, 209, 228, .14), transparent 60%), linear-gradient(165deg, var(--navy) 0%, var(--navy-900) 100%); color: var(--on-dark); padding: 1.75rem 0 2.25rem; position: relative; } .hero::after { /* thin water line echoing the logo waves */ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--teal), var(--aqua) 50%, var(--blue)); } .hero h1 { color: #fff; } .hero p { font-size: 1.12rem; max-width: 40rem; } /* article "Updated " line under the H1 (2026-10-27; no author). Small muted meta text: --on-dark-muted #a9bccf is 8.02:1 on navy, 8.78:1 on navy-900, 5.90:1 at the full aqua glow (#1b3c56). */ .hero p.article-updated { margin: -.35rem 0 .9rem; font-size: .9rem; line-height: 1.4; color: var(--on-dark-muted); } .hero a:not(.btn) { color: var(--aqua); } .hero a:not(.btn):hover { color: #fff; } .hero-grid { display: grid; gap: 1.75rem; align-items: center; } .hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; } /* /about/ hero logo (user, 2026-10-26). The logo file has its own navy square, which can't blend into the hero gradient and aqua glow, so it is shown as a deliberate rounded tile with a faint aqua ring. Phones: stacked under the text, 8.5rem; from 60em: its own column right of the text, vertically centred, 13-16rem. */ .hero-logo { margin: 0; } .hero-logo img { display: block; width: 8.5rem; height: auto; border-radius: var(--radius); box-shadow: 0 0 0 1px rgba(98, 209, 228, .3), 0 14px 32px rgba(0, 0, 0, .3); } .hero-media .ph, .hero-media .photo { margin: 0; box-shadow: 0 18px 40px rgba(0, 0, 0, .3); } .hero-media .area-map { margin: 0; color: var(--text); } /* Credited photo (Wikimedia Commons location photos): the image keeps its own 3:2 crop, the credit sits underneath. Credit text: --muted on light (6.52:1 on --bg); in the navy hero --on-dark-muted, links --aqua (contrast in the comment below). */ .photo-fig { margin: 0 0 1.25rem; } .photo-fig img { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--navy-700); } .hero-media .photo-fig { margin: 0; } .hero-media .photo-fig img { box-shadow: 0 18px 40px rgba(0, 0, 0, .3); } .photo-credit { margin-top: .55rem; font-size: .82rem; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; } .photo-credit a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; } /* hero: #a9bccf 8.02:1 on navy, 8.78:1 on navy-900, and still 5.90:1 at the full 14% aqua glow (#1b3c56); aqua links 8.75 / 9.58 / 6.44:1 */ .hero .photo-credit { color: var(--on-dark-muted); } .hero .photo-credit a { color: var(--aqua); } .hero .photo-credit a:hover { color: #fff; } /* Home hero: full-bleed photo (an , so it stays the LCP element). Mobile: photo band above the copy, copy on solid navy-900 (on-dark 11.6:1, white 17.1:1). >=60em: photo fills the hero behind the copy under a navy gradient (see below). */ .hero-home { padding: 0 0 2.25rem; background: var(--navy-900); overflow: hidden; } .hero-bg { position: relative; margin: 0; aspect-ratio: 16 / 9; background: var(--navy-700); } .hero-bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; } .hero-bg::after { /* blend the photo's lower edge into the navy below it (no text sits on the photo) */ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, var(--navy-900) 100%); } .hero-home .hero-grid { padding-top: 1rem; } .hero-home .hero-copy { max-width: 38rem; } .crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem; font-size: .92rem; } .crumbs li { display: inline-flex; align-items: center; color: var(--on-dark); } .crumbs li + li::before { content: "/"; margin: 0 .45rem 0 .2rem; color: var(--teal); } .crumbs a { color: var(--aqua); } .crumbs [aria-current="page"] { color: var(--on-dark); } /* ---------- Content layout ---------- */ .content-grid { display: grid; gap: 2rem; padding-top: 2rem; padding-bottom: 3rem; } .home-body { display: block; } .article { min-width: 0; } /* Inner pages: each section is a content card. Background rotates light (white) / tint / navy (class set by the generator); the closing call-to-action is always navy. */ .section { position: relative; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem 1.15rem 1.6rem; margin-bottom: 1.5rem; box-shadow: var(--shadow-card); } .section::before { /* accent edge, decorative */ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--accent); z-index: 2; } .section-inner { position: relative; z-index: 1; } .section-inner > :last-child { margin-bottom: 0; } .section ul:not(.steps) { padding-left: 1.2rem; } .section li { margin-bottom: .45rem; } .section li::marker { color: var(--orange-700); } /* background variants. Text pairs (all AA, see check_contrast): light: text 14.57 / link 6.74 (white) or 13.43 / 6.21 (--bg) tint: text 13.0 / link 5.88 / muted 5.95 navy: on-dark 10.57, white 15.62, aqua links 8.75, orange 5.18 */ .sec-tint { background: var(--tint); border-color: #cfe1eb; } .sec-navy { background: var(--navy); border-color: var(--navy); color: var(--on-dark); } .sec-navy h2, .sec-navy h3, .sec-navy strong { color: #fff; } .sec-navy a { color: var(--aqua); } .sec-navy a:hover { color: #fff; } .sec-navy a.tel { color: var(--orange); font-weight: 700; } /* 5.18:1 */ /* orange call button in a navy body section (/thank-you/ "Sewage Backing Up?", 2026-10-27): keep the navy label (5.18:1 on orange) instead of the aqua section link colour */ .sec-navy a.btn-call, .sec-navy a.btn-call:hover { color: var(--navy); } .sec-navy .eyebrow { color: var(--orange); } .sec-navy li::marker { color: var(--orange); } .sec-navy ol.steps > li::before { background: var(--navy-700); border-color: var(--aqua); } /* white 13.43:1 */ /* section graphics: original SVGs, CSS backgrounds (invisible to assistive tech), only >=60em so nothing extra loads on phones. Placed in the bottom-right corner, away from the top-left eyebrow; group opacity in each SVG is low enough that every text colour that can sit over them stays AA. */ @media (min-width: 60em) { .section::after { content: ""; position: absolute; right: 1rem; bottom: .5rem; z-index: 0; pointer-events: none; width: 15rem; height: 10rem; background: no-repeat 100% 100% / contain; } .sec-light::after { background-image: url("/assets/img/deco-leaves.svg"); width: 11rem; } .sec-tint::after { background-image: url("/assets/img/deco-water.svg"); } .sec-navy::after { background-image: url("/assets/img/deco-soil.svg"); } .section.no-deco::after { content: none; } } /* numbered steps */ ol.steps { list-style: none; counter-reset: step; padding: 0; margin: 0 0 1.25rem; } ol.steps > li { counter-increment: step; position: relative; padding: .1rem 0 .3rem 2.9rem; margin-bottom: .8rem; min-height: 2.2rem; } ol.steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; border: 2px solid var(--teal); /* 15.62:1 */ font: 800 .95rem var(--font-head); } /* tables: real tables at every width. On narrow screens the wrapper scrolls sideways (the page never does); the cut-off column shows there is more to scroll. The wrapper is a focusable, named region (build.py) so it can be scrolled from the keyboard. */ .table-wrap { margin: 0 0 1.25rem; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); } .table-wrap:focus-visible { outline: 3px solid var(--focus-light); outline-offset: 2px; } table { width: 100%; border-collapse: collapse; font-size: .98rem; line-height: 1.45; } table.cols-3 { min-width: 32rem; } table.cols-4, table.cols-5, table.cols-6 { min-width: 40rem; } th, td { text-align: left; vertical-align: top; padding: .7rem .9rem; } thead th { background: var(--navy); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: .92rem; letter-spacing: .01em; } tbody tr { border-top: 1px solid var(--line); } tbody tr:nth-child(even) th, tbody tr:nth-child(even) td { background: rgba(231, 241, 246, .6); } tbody th { color: var(--ink); font-weight: 700; } tbody td { color: var(--text); } table a { overflow-wrap: anywhere; } .cols-2 th:first-child, .cols-2 td:first-child { width: 48%; } @media (max-width: 39.99em) { table { font-size: .92rem; } th, td { padding: .6rem .7rem; } } /* bold label + list groups */ /* Cards: location/label groups, FAQ items, service rows, sidebar cards share one family: white surface, layered navy-tinted shadow, 4px gradient accent edge, gentle hover lift. */ .groups { display: grid; gap: 1rem; margin: 0 0 1.25rem; } .group, .faq-item, .card, .svc-row { position: relative; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .group::before, .card::before, .svc-row::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--accent); z-index: 2; } .faq-item::before { /* FAQ items stack, so their accent runs down the left edge */ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--orange), var(--aqua)); } .group:hover, .group:focus-within, .faq-item:hover, .faq-item:focus-within, .card:hover, .card:focus-within, .svc-row:hover, .svc-row:focus-within { transform: translateY(var(--lift)); box-shadow: var(--shadow-lift); } .group { padding: 1.15rem 1.15rem 1rem; } .group-label { margin: 0 0 .4rem; font-family: var(--font-head); } .group ul { margin: 0; } .sec-light .group, .sec-light .faq-item { background: var(--bg); } /* inner pages: light section is white */ /* FAQ */ .faq-list { display: grid; gap: .9rem; } .faq-item { padding: .1rem 1.25rem 1rem 1.5rem; } .faq-item h3 { margin-top: 1rem; } .faq-item > :last-child { margin-bottom: 0; } /* Home FAQ accordion (2026-10-23): native

/, no JS; keyboard: Tab to a question, Enter/Space toggles. One column, questions top to bottom. The H3 sits inside the summary. Open/closed indicator: a chevron (down = closed, up = open) in orange-700 inside a --line ring: chevron 5.34:1 on white, 4.95:1 on --bg (non-text needs 3:1). Focus: 3px --focus-light ring drawn inside the card (offset -3px, so .faq-item's overflow:hidden can't clip it). */ .faq-acc { padding: 0; } .faq-acc > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem 1rem 1.5rem; min-height: 3.5rem; cursor: pointer; list-style: none; border-radius: var(--radius); } .faq-acc > summary::-webkit-details-marker { display: none; } .faq-acc > summary h3 { margin: 0; } .faq-acc > summary::after { content: ""; flex: none; width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--line); background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23b4491b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 50% 55% / 1.1rem 1.1rem; transition: transform .2s var(--ease); } .faq-acc[open] > summary::after { transform: rotate(180deg); } .faq-acc > summary:hover h3 { color: var(--link); } .faq-acc > summary:focus-visible { outline: 3px solid var(--focus-light); outline-offset: -3px; } .faq-acc .faq-answer { padding: 0 1.25rem 1.1rem 1.5rem; } .faq-acc .faq-answer > :last-child { margin-bottom: 0; } /* closing call-to-action section (navy, see .sec-navy) */ .cta-section { border-bottom: 4px solid var(--orange); } /* ---------- /contact/: large call button and the request form ---------- Call button: navy on orange 5.18:1 (as .btn-call). Form on white or --tint cards: labels --ink 15.62 / 13.0:1, "(required)" and help text --muted 6.52:1 on --bg (7.0:1 white, 5.95:1 tint); field borders --muted (non-text >= 3:1 on white and tint); focus ring --focus-light 3px plus border colour change. Inputs are 1.0625rem (17px), so iOS doesn't zoom on focus. */ .call-cta { margin: 1.5rem 0 0; } .btn-xl { min-height: 3.75rem; padding: .9rem 1.75rem; font-size: 1.2rem; } .btn-xl .icon { width: 22px; height: 22px; } @media (max-width: 39.99em) { .call-cta .btn { width: 100%; white-space: normal; } } /* Home cost-section "Request a Quote" (sitemap.md 2026-10-26): primary .btn-call, left-aligned with the section text. Navy on orange 5.18:1 (hover 6.25:1); focus ring --focus-light 6.21:1 on --bg (light band). */ .quote-cta { margin: 1.75rem 0 0; } .quote-cta .btn:focus-visible { outline: 3px solid var(--focus-light); outline-offset: 3px; border-radius: 999px; } .sec-navy .quote-cta .btn:focus-visible { outline-color: var(--focus-dark); } @media (max-width: 39.99em) { .quote-cta .btn { width: 100%; white-space: normal; } } /* Request form card (user, 2026-10-23: "the form text is hard to read"). Shared by the /contact/ form and the home hero form, so both read the same on the tint section and over the hero photo: an opaque white (--paper) box with a --line border, an orange top edge, rounded corners and a soft shadow. Measured on #fff: title and labels --ink 15.6:1, intro/body --text 14.6:1, "(required)", help text and placeholder --muted 7.0:1, links --link 6.7:1; field borders --muted 7.0:1 and the --focus-light ring 6.7:1 (non-text needs 3:1). The card sets its own text, link and focus colours, so the navy hero's light-on-dark colours never leak into it. */ .cf { position: relative; margin: 1.25rem 0 0; padding: 1.25rem 1.1rem 1.35rem; color: var(--text); background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--orange); border-radius: var(--radius); box-shadow: var(--shadow-card); scroll-margin-top: 6.5rem; /* clears the sticky header when the mobile bar jumps to #hero-request-form */ } .cf a:not(.btn) { color: var(--link); } .cf a:not(.btn):hover { color: var(--navy); } .cf :focus-visible { outline-color: var(--focus-light); } .cf .form-title { margin: 0 0 .3rem; font: 800 1.3rem/1.2 var(--font-head); color: var(--ink); letter-spacing: -.01em; } .cf .form-intro { margin: 0 0 1rem; line-height: 1.45; } @media (min-width: 40em) { .cf { padding: 1.75rem 1.75rem 1.85rem; } } .cf-grid { display: grid; gap: 1.1rem 1.25rem; } .cf-field { min-width: 0; } .cf label { display: block; margin: 0 0 .35rem; color: var(--ink); font-weight: 700; line-height: 1.3; } .cf-req { color: var(--muted); font-weight: 600; font-size: .92em; } .cf input, .cf textarea { display: block; width: 100%; min-height: 3rem; margin: 0; padding: .6rem .8rem; font: 400 1.0625rem/1.4 var(--font-body); color: var(--text); background: var(--paper); border: 2px solid var(--muted); border-radius: var(--radius-sm); transition: border-color .15s, box-shadow .15s; } .cf textarea { min-height: 8.5rem; resize: vertical; } .cf input::placeholder, .cf textarea::placeholder { color: var(--muted); opacity: 1; } /* 7.0:1 on white */ .cf input:hover, .cf textarea:hover { border-color: var(--navy); } .cf input:focus-visible, .cf textarea:focus-visible { outline: 3px solid var(--focus-light); outline-offset: 2px; border-color: var(--focus-light); } .cf-help { margin: .35rem 0 0; font-size: .95rem; color: var(--muted); } /* honeypot: off-screen for people, still in the form for bots; aria-hidden + tabindex -1 keep it out of reach */ .cf-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } .cf-actions { margin-top: 1.4rem; } .cf-submit[disabled] { cursor: not-allowed; } /* form not connected yet (no FORM_ACTION endpoint in business-details.json): message under the button. Text --ink on #fff4ec 14.6:1, link 6.2:1. With JS it shows once a submit is blocked (main.js adds .is-shown); without JS (no html.js) the submit button is hidden and the message shows straight away, so nothing can be sent anywhere. */ .cf-offline { margin: 1rem 0 0; padding: .85rem 1rem; color: var(--ink); background: #fff4ec; border: 1px solid #f3c9aa; border-left: 5px solid var(--orange); border-radius: var(--radius-sm); } .cf-offline:focus { outline: 3px solid var(--focus-light); outline-offset: 2px; } .cf-offline a { color: var(--link); font-weight: 700; } .js .cf-offline:not(.is-shown) { display: none; } html:not(.js) .cf[data-offline] .cf-actions { display: none; } @media (min-width: 40em) { .cf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cf-wide { grid-column: 1 / -1; } } /* ---------- Home hero request form (2026-10-23): the shared .cf card, compact, in the navy hero ---------- Mobile: stacks under the H1 and intro, full width. >= 60em: its own column beside the copy (see the 60em block). Colours come from the .cf card above; here only the spacing is tighter and the shadow deeper, so the white card lifts off the photo. The submit button keeps navy on orange (5.18:1). */ .hero-form { min-width: 0; } .hero-form .cf { margin: 0; border-color: var(--paper); border-top-color: var(--orange); box-shadow: 0 18px 40px rgba(0, 0, 0, .3); } .hero .hero-form p { max-width: none; } .hero .hero-form p:not(.form-title) { font-size: 1rem; } .hero .hero-form a:not(.btn) { color: var(--link); } .hero .hero-form a:not(.btn):hover { color: var(--navy); } .hero-form .cf-grid { gap: .8rem 1rem; } .hero-form .cf label { margin-bottom: .25rem; } .hero-form .cf input { min-height: 2.85rem; } .hero-form .cf textarea { min-height: 5.5rem; } .hero-form .cf-actions { margin-top: 1.1rem; } .hero-form .cf-submit { width: 100%; } .hero .hero-form :focus-visible { outline-color: var(--focus-light); } @media (min-width: 40em) { .hero-form .cf { padding: 1.5rem 1.5rem 1.6rem; } } /* ---------- Home "Septic Problems We Fix" (2026-10-23): one card per problem, same card family as the FAQ ---------- */ .problem-list { display: grid; gap: 1rem; margin-top: 1.25rem; } .problem-item { position: relative; overflow: hidden; padding: .1rem 1.25rem 1.1rem 1.5rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .problem-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--orange), var(--aqua)); } .problem-item:hover, .problem-item:focus-within { transform: translateY(var(--lift)); box-shadow: var(--shadow-lift); } .problem-item h3 { margin-top: 1rem; } .problem-item > :last-child { margin-bottom: 0; } /* Card illustration (2026-10-26; resized the same day to sit between the first 128px and a too-small 72px): a square illustration left of the card text, top-aligned with the H3 (both start 1rem below the card's top padding). Phones: a 4.5rem (72px) tile floated beside the H3, the paragraph wraps under it. From 40em: a fixed image column, 6rem (96px) at 40-60em and 6.25rem (100px) from 60em, with the H3 and paragraph in their own column. Mirrors PHOTO_SIZES in tools/build.py. The files have an off-white (#faf6f3) ground, so the tile gets rounded corners and a hairline to sit on the white card. */ .problem-item.has-img { display: flow-root; } .problem-img { float: left; display: block; width: 4.5rem; height: auto; margin: 1rem .85rem .4rem 0; border-radius: 9px; box-shadow: 0 0 0 1px var(--line); } .problem-text > :last-child { margin-bottom: 0; } @media (min-width: 40em) { .problem-item.has-img { display: grid; grid-template-columns: 6rem minmax(0, 1fr); column-gap: 1.15rem; align-items: start; } .problem-img { float: none; width: 100%; margin: 1rem 0 0; border-radius: 10px; } } /* Two cards per row from 60em. Kept there: at 768px a 2-up card would leave well under the ~260px text minimum beside a 96px image; at 960px+ the text column beside the 100px image stays near 290px or wider. */ @media (min-width: 60em) { .problem-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .problem-item.has-img { grid-template-columns: 6.25rem minmax(0, 1fr); } } /* ---------- Google Maps embed (footer on every page, 2026-10-23; the /contact/ body map was retired 2026-10-26) ---------- Responsive 16:9 frame (4:3 on phones); the iframe's width/height attributes give the intrinsic size. */ .map-embed { position: relative; margin: 1.5rem 0 0; aspect-ratio: 4 / 3; max-width: 56rem; overflow: hidden; border-radius: var(--radius); background: var(--tint); box-shadow: var(--shadow-card); } .map-embed iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; } @media (min-width: 40em) { .map-embed { aspect-ratio: 16 / 9; } } /* footer map (every page), below the address in the contact column: full column width, 4:3 at every size (the column is narrow on desktop too), capped at 26rem; the iframe is absolutely positioned, so it never widens the grid track */ .map-embed.map-footer { width: 100%; max-width: 26rem; aspect-ratio: 4 / 3; margin: .6rem 0 .5rem; border-radius: var(--radius-sm); background: var(--navy-700); border: 1px solid rgba(98, 209, 228, .35); box-shadow: none; } /* ---------- Testimonial slider (home "Why Choose Us") ---------- No JS / before main.js marks it data-ready: all slides stack as cards, controls stay hidden. Ready: slides share one grid cell (height = tallest slide, so no layout shift), only the current one is shown; transitions use opacity and transform only. Hidden slides get inert + aria-hidden. Off-stage slides shift 16px (= the mobile gutter), so they never cause horizontal overflow and the track needs no clipping (card shadows stay intact). */ .ts { margin: 1.75rem 0 0; max-width: 46rem; } .ts-track { display: grid; gap: 1rem; } .ts-slide { position: relative; margin: 0; padding: 1.5rem 1.25rem 1.25rem 1.25rem; background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; } .ts-slide::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--accent); } .ts-slide blockquote { margin: 0; padding: 0 0 0 2.75rem; position: relative; } .ts-slide blockquote::before { content: "\201C"; position: absolute; left: 0; top: -.35rem; font-family: Georgia, "Times New Roman", serif; font-size: 3.5rem; line-height: 1; color: var(--orange); } .ts-slide blockquote p { margin: 0; color: var(--ink); font-size: 1.125rem; line-height: 1.55; font-style: italic; /* 15.62:1 on white */ overflow-wrap: anywhere; } .ts-slide figcaption { margin: .85rem 0 0 2.75rem; color: var(--muted); font-family: var(--font-head); font-weight: 600; font-size: .95rem; /* 7.0:1 on white */ overflow-wrap: anywhere; } .ts-name { color: var(--ink); } .js .ts[data-ready] .ts-track > .ts-slide { grid-area: 1 / 1; opacity: 0; transform: translateX(var(--ts-from, 16px)); transition: opacity .35s var(--ease), transform .35s var(--ease); pointer-events: none; } .js .ts[data-ready] .ts-track > .ts-slide.is-current { opacity: 1; transform: none; pointer-events: auto; } .js .ts[data-ready] .ts-track > .ts-slide.is-before { --ts-from: -16px; } .ts-controls { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; } .ts-controls[hidden] { display: none; } .ts-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.75rem; height: 2.75rem; min-width: 44px; min-height: 44px; padding: 0; border: 2px solid var(--navy); border-radius: 999px; background: var(--navy); color: #fff; cursor: pointer; transition: background-color .2s, color .2s; } .ts-btn:hover { background: var(--paper); color: var(--navy); } .ts-btn:focus-visible, .ts-dot:focus-visible { outline: 3px solid var(--focus-light); outline-offset: 3px; border-radius: 999px; } .ts-dots { display: flex; align-items: center; } .ts-dot { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none; cursor: pointer; } .ts-dot::before { content: ""; display: block; width: .8rem; height: .8rem; border-radius: 999px; border: 2px solid var(--muted); background: var(--paper); /* dot edge 6.0:1 on tint */ transition: width .2s var(--ease), background-color .2s; } .ts-dot:hover::before { border-color: var(--navy); } .ts-dot[aria-current="true"]::before { width: 1.75rem; background: var(--navy); border-color: var(--navy); } @media (prefers-reduced-motion: reduce) { .js .ts[data-ready] .ts-track > .ts-slide { transition: none; transform: none; } .ts-dot::before { transition: none; } } @media (min-width: 40em) { .ts-slide { padding: 1.75rem 1.75rem 1.5rem; } .ts-slide blockquote p { font-size: 1.25rem; } } /* ---------- Image placeholders ---------- */ .ph { position: relative; margin: 0 0 1.25rem; border-radius: var(--radius); overflow: hidden; background: var(--tint); aspect-ratio: 3 / 2; } .ph img { display: block; width: 100%; height: 100%; object-fit: cover; } .ph::after { content: attr(data-img-slot) " \2014 " attr(data-photo); position: absolute; left: .75rem; right: .75rem; bottom: .75rem; padding: .45rem .7rem; border-radius: var(--radius-sm); background: rgba(15, 36, 63, .9); color: #fff; font-size: .82rem; line-height: 1.35; } /* Supplied photos in page bodies / inner heroes: same 3:2 frame as the placeholder, cropped to fit */ .photo { margin: 0 0 1.25rem; border-radius: var(--radius); overflow: hidden; background: var(--navy-700); aspect-ratio: 3 / 2; } .photo img { display: block; width: 100%; height: 100%; object-fit: cover; } /* in-article photo at its own aspect ratio (e.g. 16:9), never wider than its 768px original */ .photo-natural { aspect-ratio: auto; max-width: 768px; } .photo-natural img { height: auto; } /* ---------- Service-area map (hand-drawn SVG, inline so each town links to its page) ---------- */ .area-map { margin: 0 0 1.25rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem; } .area-map svg { display: block; width: 100%; height: auto; } .area-map figcaption { font-size: .88rem; color: var(--muted); padding: .5rem .5rem .25rem; } /* map beside a section's text (build.py SECTION_MAPS; /about/ "Where We Work", navy). The figure keeps its white card, so labels, land, water and the orange-700 focus ring sit on the same light colours as on /service-areas/ (ring 4.45-5.0:1); the card edge against navy is white 15.62:1. Stacks under the text below 75em. */ .section-map-side .area-map { margin: 1.5rem 0 0; border-color: var(--paper); } /* the card is a light surface: undo the .sec-navy text, link and focus colours inside it (the map paints with fill only and its focus ring is the .m-hit stroke, but nothing on-dark may leak onto the white card) */ .sec-navy .area-map, .sec-navy .area-map a, .sec-navy .area-map a:hover { color: var(--text); } .sec-navy .area-map :focus-visible { outline-color: var(--orange-700); } .section-map-side .map-side-text > :last-child { margin-bottom: 0; } @media (min-width: 75em) { .section-map-side .section-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: 2rem; align-items: start; } .section-map-side .area-map { margin: 0; } } .m-land { fill: #f4f7fa; } .m-water { fill: #bfe6ee; } .m-river { fill: none; stroke: var(--aqua); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; } .m-lake-narrow { fill: none; stroke: #bfe6ee; stroke-width: 13; stroke-linecap: round; } .m-county { stroke: #7f93a8; stroke-width: 1.3; stroke-dasharray: 6 5; } .m-county.c-brown { fill: var(--c-brown); fill-opacity: .07; } .m-county.c-outagamie { fill: var(--c-outagamie); fill-opacity: .08; } .m-county.c-winnebago { fill: var(--c-winnebago); fill-opacity: .08; } .m-county.c-calumet { fill: var(--c-calumet); fill-opacity: .06; } .m-county-label { font: 800 15px var(--font-head); letter-spacing: .16em; } .m-county-label.c-brown { fill: var(--c-brown); } .m-county-label.c-outagamie { fill: var(--c-outagamie); } .m-county-label.c-winnebago { fill: var(--c-winnebago); } .m-county-label.c-calumet { fill: var(--c-calumet); } .m-water-label { fill: #1d5a73; font: italic 400 16px var(--font-body); } /* 400: the only self-hosted italic */ .m-compass text { fill: var(--navy); font: 800 14px var(--font-head); } .m-compass path { fill: var(--navy); } .m-dot { stroke: #fff; stroke-width: 2.5; } .c-brown .m-dot { fill: var(--c-brown); } .c-outagamie .m-dot { fill: var(--c-outagamie); } .c-winnebago .m-dot { fill: var(--c-winnebago); } .c-calumet .m-dot { fill: var(--c-calumet); } .m-hit { fill: transparent; stroke: none; } .m-leader { stroke: var(--muted); stroke-width: 1.2; } .m-lbl { fill: var(--navy); font: 600 16px var(--font-body); paint-order: stroke; stroke: #fff; stroke-opacity: .9; stroke-width: 4px; stroke-linejoin: round; } .m-lbl.m-big { font: 800 17px var(--font-head); } .m-lbl-m { display: none; } .m-town:hover .m-lbl, .m-town:focus .m-lbl { fill: var(--link); text-decoration: underline; } .m-town:hover .m-dot, .m-town:focus .m-dot { stroke: var(--navy); } .m-town:focus { outline: none; } .m-town:focus-visible .m-hit { stroke: var(--orange-700); stroke-width: 4; fill: rgba(232, 116, 44, .12); } /* ring 4.45-5.0:1 on land and county tints, 4.03:1 on water */ /* small screens: the drawing scales to about half size, so only seven anchor towns keep a (larger) label; every town stays a tappable dot and is listed as a text link beside the map */ @media (max-width: 35.99em) { .m-lbl-d, .m-leader, .m-minor-water, .m-fox { display: none; } .m-lbl-m { display: inline; font-size: 25px; } .m-lbl-m.m-big { font-size: 26px; } .m-county-label { font-size: 21px; letter-spacing: .1em; } .m-county-label.c-winnebago { transform: translateX(10px); } .m-water-label { font-size: 21px; } .m-dot { r: 8; } .m-hit { r: 20; } } /* ---------- Home specifics ---------- */ /* "What We Do": one full-width row per service. Mobile: photo on top. Desktop: photo beside copy, sides alternate. */ .section-services .section-inner > p { max-width: 46rem; font-size: 1.08rem; } .svc-list { display: grid; gap: 1.5rem; margin-top: 1.75rem; } .svc-row { display: flex; flex-direction: column; } .svc-media { order: -1; position: relative; margin: .75rem .75rem 0; aspect-ratio: 4 / 3; border-radius: calc(var(--radius) - 4px); overflow: hidden; background: var(--navy-700); } .svc-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .svc-body { padding: 1.35rem 1.15rem 1.5rem; } .svc-body h3 { margin: 0 0 .5rem; font-size: clamp(1.2rem, 1.1rem + .45vw, 1.45rem); } /* Linked headings: continuous underline that clears descenders (p, g, y) instead of skipping around them. */ :is(h2, h3) a { text-decoration-skip-ink: none; text-underline-offset: .26em; } .svc-body h3 a { color: var(--ink); text-decoration-color: var(--teal); text-decoration-thickness: .12em; } .svc-body h3 a:hover { color: var(--link); text-decoration-color: currentColor; } .svc-body > :last-child { margin-bottom: 0; } /* Service-row link (home "What We Do"): one "Learn about ..." text link per row, set off by a hairline rule so the card bottom reads as a deliberate footer. Link #1f5f93 on white 6.74:1, hover navy 15.62:1; focus ring #1f5f93 vs white 6.74:1. Touch target 2.75rem (44px). */ .svc-cta { display: flex; align-items: center; margin-top: 1.25rem; padding-top: .6rem; border-top: 1px solid var(--line); } .svc-more { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .25rem 0; font-family: var(--font-head); font-weight: 700; color: var(--link); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .22em; transition: color .2s, text-decoration-color .2s; } .svc-more .icon { transition: transform .2s var(--ease); } .svc-more:hover, .svc-more:focus-visible { color: var(--navy); text-decoration-color: currentColor; } .svc-more:hover .icon, .svc-more:focus-visible .icon { transform: translateX(3px); } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .section-areas .groups a { font-weight: 600; } /* Home: sections are full-bleed bands (light #f3f6f9 / tint / navy) with the content in .wrap */ .section.band { /* home bands and the inner-page call-now band (2026-10-23) */ border: 0; border-radius: 0; box-shadow: none; margin: 0; padding: clamp(2.75rem, 2rem + 4vw, 5.5rem) 0; } .section.band::before { display: none; } .home-body .sec-light { background: var(--bg); } .home-body .sec-tint { background: var(--tint); } .home-body .sec-navy { background: var(--navy); } .home-body .sec-navy + .sec-navy { border-top: 1px solid rgba(98, 209, 228, .25); } /* comfortable measure for running text on wide bands */ .band .section-inner > p, .band .section-inner > ul, .band .section-inner > ol, .band .section-inner > h2 { max-width: 50rem; } .band .faq-list { max-width: 58rem; } .home-body .sec-light .group, .home-body .sec-light .faq-item { background: var(--paper); } /* Home "How a Service Visit Works" (user, 2026-10-23): transparent cut-out (ourprocess.webp) flush with the bottom edge of the navy band, so the band's bottom padding moves into the text column. Below 60em the steps come first and the cut-out sits under them, pulled to the screen's left edge (its lower-left edge is a hard crop), 15rem wide. From 60em: image column (19rem) on the left spanning both rows, heading and steps on the right. */ .home-body .section-process { padding-bottom: 0; } .process-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "body" "media"; } .process-head { grid-area: head; } .process-head > :last-child { margin-bottom: 1rem; } .process-body { grid-area: body; padding-bottom: 2rem; } .process-body > * { max-width: 50rem; } .process-body > :last-child { margin-bottom: 0; } .process-media { grid-area: media; margin: 0 0 0 calc(-1 * var(--gutter)); width: min(15rem, 70%); line-height: 0; } .process-media img { display: block; width: 100%; height: auto; } @media (min-width: 60em) { .process-grid { grid-template-columns: 19rem minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "media head" "media body"; column-gap: 3.5rem; } .process-media { align-self: end; margin: 0; width: 100%; } .process-body { padding-bottom: clamp(2.75rem, 2rem + 4vw, 5.5rem); } } /* Closing call-now band (user, 2026-10-23: home first, then the closing section of every page that uses {book-call-button}, 40 pages): brand orange #e8742c, centred H2 and call button. One component: on home it is a full-bleed band, and on inner pages and articles (user, 2026-10-23) the generator moves it out of the content/sidebar grid so it is the same full-bleed band (.section.band, .wrap inner), with the same colours, heading size and button. Text: navy on orange 5.18:1 (AA normal text); white on orange would be 3.01:1 (fails 4.5:1), so it isn't used. Button: navy fill with a white label 15.62:1 (hover navy-700, white 13.43:1); the navy button against the orange band 5.18:1 (non-text >= 3:1). Focus: white 3px ring hugging the button plus a 3px navy outline beyond it (navy vs orange 5.18:1, white vs navy 15.62:1), so the focus state reads on both the button and the band. */ .sec-orange { background: var(--orange); border-color: var(--orange); color: var(--navy); border-bottom: 4px solid var(--navy); } .band.sec-orange { background: var(--orange); border-bottom: 4px solid var(--navy); } /* home and inner-page full-bleed band */ .section.sec-orange::before { display: none; } .sec-orange h2, .sec-orange .eyebrow, .sec-orange strong { color: var(--navy); } .sec-orange :focus-visible { outline-color: var(--navy); } .sec-orange .section-inner { display: flex; flex-direction: column; align-items: center; text-align: center; } .sec-orange .eyebrow { justify-content: center; } .sec-orange .section-inner > h2 { max-width: 44rem; margin: 0 auto; font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem); } /* Faint septic photo behind the orange band (user, 2026-10-27). Decorative only: a CSS background on a pseudo-element, so no , no alt, no layout shift. Photo: service_fullinstall-600w.webp (new concrete tanks set in an excavation; the 600w variant is already used on the home page). The band keeps background-color orange as the fallback. The photo layer is greyscaled and its tones squeezed into 107..255 (contrast .4, brightness 1.45) before it is shown at 18% over the orange, so the darkest possible blend still gives navy text >= 4.5:1 (see check_contrast); lighter areas only raise the ratio. Hidden in forced-colours, prefers-contrast: more and print. */ .section.band.sec-orange { background-color: var(--orange); isolation: isolate; } .section.band.sec-orange::before { content: ""; display: block; position: absolute; inset: 0; height: auto; z-index: 0; pointer-events: none; background: url("/assets/img/service_fullinstall-600w.webp") center 62% / cover no-repeat; filter: grayscale(1) contrast(.4) brightness(1.45); opacity: .18; } @media (forced-colors: active), (prefers-contrast: more) { .section.band.sec-orange::before { display: none; } } @media print { .section.band.sec-orange::before { display: none; } } .book-cta { margin: 1.75rem 0 0; width: 100%; } .btn-book { background: var(--navy); color: #fff; border-color: var(--navy); } .btn-book:hover { background: var(--navy-700); border-color: var(--navy-700); color: #fff; } .btn-book:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; box-shadow: 0 0 0 3px #fff; border-radius: 999px; } .btn-book.btn-xl { font-size: 1.3rem; min-height: 4rem; padding: 1rem 2.25rem; } @media (max-width: 39.99em) { .book-cta .btn { width: 100%; white-space: normal; } } /* ---------- Sidebar ---------- */ .sidebar { display: grid; gap: 1rem; align-content: start; } .card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem; } .card-title { font-family: var(--font-head); font-weight: 800; color: var(--ink); font-size: 1.1rem; margin: 0 0 .75rem; } .call-card { background: var(--navy); border-color: var(--navy); color: var(--on-dark); border-bottom: 4px solid var(--teal); } .call-card .card-title { color: #fff; } .call-card .btn { width: 100%; } .card-meta { margin: .75rem 0 0; font-size: .95rem; } .link-list { list-style: none; margin: 0; padding: 0; } .link-list li + li { border-top: 1px solid var(--line); } .link-list a { display: block; padding: .55rem 0; font-weight: 600; text-decoration: none; } .link-list a:hover { text-decoration: underline; } .link-list a[aria-current="page"] { color: var(--ink); } /* ---------- Articles ---------- Byline in the navy hero: on-dark 10.57:1, aqua link 8.75:1. Guide cards share the card family above. Link cards (articles "Read Next", service-page "Related Guide"): ink 15.62:1 / link 6.74:1 on white, chevron orange-700 5.34:1 (decorative). */ .section .guide-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; } .section .guide-card { position: relative; overflow: hidden; margin: 0; padding: 1.2rem 1.25rem 1rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .guide-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--accent); } .guide-card:hover, .guide-card:focus-within { transform: translateY(var(--lift)); box-shadow: var(--shadow-lift); } .guide-card h3 { margin: .3rem 0 .5rem; font-size: clamp(1.08rem, 1.02rem + .3vw, 1.22rem); } .guide-card h3 a { color: var(--ink); text-decoration: none; } .guide-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* whole card is the link target */ .guide-card h3 a:hover { color: var(--link); text-decoration: underline; } .guide-card p { margin: 0 0 .6rem; } .read-next .section-inner > ul:not(.guide-list), .guide-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; } .section.read-next .section-inner > ul:not(.guide-list) { padding: 0; } .read-next .section-inner > ul:not(.guide-list) > li, .guide-links li { margin: 0; } .read-next .section-inner > ul:not(.guide-list) a, .guide-links a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.25rem; height: 100%; padding: .85rem 1.15rem .85rem 1.25rem; background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--orange); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); color: var(--ink); text-decoration: none; font: 700 1rem/1.35 var(--font-head); transition: transform .25s var(--ease), box-shadow .25s var(--ease), color .2s; } .read-next .section-inner > ul:not(.guide-list) a::after, .guide-links a::after { content: ""; flex: none; width: .55rem; height: .55rem; margin-right: .2rem; border-top: 2.5px solid var(--orange-700); border-right: 2.5px solid var(--orange-700); transform: rotate(45deg); } .read-next .section-inner > ul:not(.guide-list) a:hover, .guide-links a:hover { color: var(--link); text-decoration: underline; transform: translateY(var(--lift)); box-shadow: var(--shadow-lift); } .related-guides { margin: 0 0 1.5rem; padding: 1.35rem 1.15rem 1.25rem; background: var(--tint); border: 1px solid #cfe1eb; border-radius: var(--radius); /* eyebrow 4.68:1 on tint */ } @media (min-width: 40em) { .related-guides { padding: 1.5rem 2rem; } } @media (min-width: 48em) { .section .guide-list, .read-next .section-inner > ul:not(.guide-list), .guide-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } .guide-links li:only-child { grid-column: 1 / -1; } } @media (min-width: 60em) { .related-guides { padding: 1.6rem 2.25rem; } } /* ---------- Footer (same navy as the logo square) ---------- */ .site-footer { background: var(--navy); color: var(--on-dark); padding: 2.5rem 0 5.5rem; font-size: .98rem; border-top: 4px solid var(--teal); position: relative; z-index: 35; } /* below the call bar (40) and header (50) */ .site-footer a { color: var(--aqua); } .site-footer a:hover { color: #fff; } .footer-grid { display: grid; gap: 2rem; } .brand-footer { margin-bottom: 1rem; } .site-footer .logo { display: block; width: 140px; height: 140px; } .nap { font-style: normal; display: flex; flex-direction: column; gap: .2rem; } .nap-name { font-weight: 700; color: #fff; } .footer-title { font-family: var(--font-head); font-weight: 800; color: #fff; font-size: 1.05rem; margin: 0 0 .6rem; } .footer-title::after { content: ""; display: block; width: 2rem; height: 3px; margin-top: .4rem; background: var(--orange); border-radius: 3px; } .footer-col ul { list-style: none; margin: 0; padding: 0; } .footer-col li { padding: .2rem 0; } .footer-col a { text-decoration: none; } .footer-col a:hover { text-decoration: underline; } /* column 1 description: --on-dark on navy (same pairing as the hero copy) */ .footer-desc { margin: 0; max-width: 24rem; line-height: 1.55; } .footer-links li { padding: 0; } .footer-links a { display: inline-flex; align-items: center; min-height: 2.5rem; font-weight: 700; } .footer-bottom { border-top: 1px solid rgba(201, 214, 227, .18); margin-top: 2rem; padding-top: 1.25rem; font-size: .88rem; color: var(--on-dark-muted); } .footer-bottom p { margin: 0; } /* bottom bar (2026-10-23): copyright, then Privacy Policy and Terms of Service. Aqua on navy 8.75:1. Stacked on phones; one line from 48em. Links get 2.75rem tap height via padding. */ .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.5rem; } .footer-legal { display: flex; flex-wrap: wrap; gap: 0 1.25rem; list-style: none; margin: 0; padding: 0; } .footer-legal a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; text-decoration: none; } .footer-legal a:hover { text-decoration: underline; } /* sticky mobile call bar */ .mobile-call { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom)); background: rgba(15, 36, 63, .97); border-top: 3px solid var(--teal); box-shadow: 0 -6px 18px rgba(15, 36, 63, .18); } .mobile-call .btn { width: 100%; } /* the bar and the back-to-top link sit inside