@charset "UTF-8"; /* ========================================================================== renovation911 — chrome.css (Owner G) The utility top bar, the sticky site header, the primary nav with its dropdown and 9-child mega panel, the mobile drawer and its toggle morph, the sticky mobile call bar, and the whole footer. Cascade: tokens.css -> base.css -> layout.css -> CHROME.CSS -> components.css -> pages.css The three nav tiers (DESIGN-SPEC §6.6, measured not guessed): < 1200px drawer + .header-call + .nav-toggle, header 68px, logo 40px 1200-1499 compressed desktop nav + .site-header__phone, 76px, logo 44px >= 1500px full desktop nav + .site-header__cta, 84px, logo 52px (measured: the full nav is 1061px and the CTA cluster 175px, so the spec's 1440 tier overlapped the last nav item by ~19px at 1442) .is-stuck collapses every tier to 68px / 44px and hides the top bar. The whole

is the sticky block and the height the collapse gives up is reserved as margin below it (--header-collapse, §3), so the document below never moves — see the long note in section 3. State hooks owned by assets/js/main.js and consumed here: .is-stuck sticky header + collapsed top bar .is-drawer-open drawer open, body scroll-locked .nav-primary__item.is-open a dropdown group is open .nav-panel.is-open that panel is animating in .drawer.is-open / .drawer-backdrop.is-open aria-expanded="true" on .nav-toggle, .nav-primary__toggle, .nav-primary__link--button, .drawer__toggle, .drawer__link--button the `hidden` attribute on .nav-panel, .drawer, .drawer-backdrop, .drawer__sub — removed before the entry transition, re-applied after the exit transition. Sections 1. Off-switch for JS-toggled panels 2. Top bar 3. Site header shell and brand 4. Header action cluster 5. Nav toggle (hamburger -> X) 6. Primary nav — list, links, current state 7. Nav panels — dropdown, end-aligned, mega 8. Nav tiers (media queries) 9. Mobile drawer 10. Sticky mobile call bar 11. Social lists 12. Site footer 13. Preferences: reduced motion, contrast, forced colours 14. WordPress admin bar ========================================================================== */ /* ========================================================================== 1. OFF-SWITCH FOR JS-TOGGLED PANELS main.js re-applies the `hidden` attribute after the exit transition. These elements are given an explicit `display` further down, which would other- wise out-rank the [hidden] rule in base.css on equal specificity, so the attribute is re-asserted here at a higher specificity. ========================================================================== */ .nav-panel[hidden], .drawer[hidden], .drawer-backdrop[hidden], .drawer__sub[hidden] { display: none; } /* ========================================================================== 2. TOP BAR (§6.2 — >= 1200px only) --navy-deep ground, 40px tall, --fs-xs, --on-navy text (11.96:1), .topbar__phone in Saira 700 --accent-bright (8.27:1). Scrolls away with the page; .is-stuck collapses it to height 0 over 200ms. The 40px it gives up is part of --header-collapse (§3) and is handed back as margin under the header, so the collapse moves nothing below it. ========================================================================== */ .topbar { display: none; block-size: var(--topbar-h); overflow: hidden; background: var(--navy-deep); color: var(--on-navy); font-size: var(--fs-xs); line-height: var(--lh-tight); transition: block-size var(--t) var(--ease); } .topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); block-size: var(--topbar-h); } .topbar__meta, .topbar__actions { display: flex; align-items: center; gap: var(--sp-4); margin: 0; min-width: 0; } .topbar__item { display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap; } .topbar__sep { display: block; flex: 0 0 auto; inline-size: 1px; block-size: 14px; background: var(--line-on-dark); } .topbar__link, .topbar__phone { display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap; transition: color var(--t-fast) var(--ease); } /* `a.` matches the specificity of the component opt-out in base.css, and this sheet is later in the cascade, so the underline survives. */ a.topbar__link { color: var(--on-navy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--line-on-dark); } a.topbar__link:hover, a.topbar__link:focus-visible { color: var(--surface); text-decoration-color: var(--accent-bright); } a.topbar__link:active { color: var(--accent-bright); } .topbar__phone { color: var(--accent-bright); font-family: var(--font-display); font-stretch: var(--font-stretch-display); font-weight: var(--fw-bold); letter-spacing: var(--ls-nav); } .topbar__phone:hover, .topbar__phone:focus-visible { color: var(--accent-bright-hover); } .topbar__phone:active { color: var(--surface); } /* Collapsed state. `visibility` is delayed by the full duration on the way out and applied instantly on the way in, so nothing inside a zero-height bar can ever take focus. */ .is-stuck .topbar { block-size: 0; visibility: hidden; transition: block-size var(--t) var(--ease), visibility 0s linear var(--t); } /* ========================================================================== 3. SITE HEADER SHELL AND BRAND (§6.3) The header never goes transparent over the hero. The supplied navy lockup is only ever placed on pure white — a constraint, not a style. ONE STICKY BLOCK, AND A COLLAPSE THAT COSTS NO LAYOUT -----------------------------------------------------

used to be `position: relative` with only .site-header__bar sticky inside it. That bought two defects for the price of one: 1. A sticky box is confined to its own containing block, and that containing block was a 68-117px

sitting at the very top of the document — so the bar unpinned again the moment the header scrolled past. Measured at 1280px before this change: .site-header__bar's viewport top read -32 at scrollY 32 and -898 at scrollY 898. The "sticky header" was never sticky, at any width. 2. The header's height is in normal flow, so collapsing the top bar (40 -> 0) together with the bar (76/84 -> 68) pulled the entire document up 48px (1200-1499) or 56px (>= 1500) one pixel into the scroll — animated over 200ms, and every frame of it scores in CLS. Both are fixed by sticking the header itself (its containing block is now , so it pins for the whole page) and handing the height it gives up straight back as margin underneath it: --header-collapse = topbar-h + header-h-tier - header-h = 48px (1200-1499) · 56px (>= 1500) · 0 (< 1200) The margin is transitioned with the same duration and easing as the two heights, so at EVERY frame of the collapse topbar (40 -> 0) + inner (76 -> 68) + margin (0 -> 48) === 116px and nothing below

moves by a pixel. Under prefers-reduced-motion tokens.css zeroes --t, so all three land on the same frame instead. §6.1's .scroll-sentinel is grown to the same --header-collapse (below), so .is-stuck fires exactly when that reserved margin has finished scrolling out of view. The bar therefore reaches the viewport top on the same frame the collapse starts: the section below is revealed from under the shrinking header and never shows a strip of page background beneath it. ========================================================================== */ /* 0 below 1200px: no top bar there, and .is-stuck changes no height either. */ :root { --header-collapse: 0px; } .site-header { position: sticky; inset-block-start: 0; z-index: var(--z-header); transition: margin-block-end var(--t) var(--ease); } /* The height given up by .topbar + .site-header__inner, given back in flow. */ .is-stuck .site-header { margin-block-end: var(--header-collapse); } /* The 1px probe of §6.1 becomes as tall as the collapse it triggers, so "the sentinel has left the viewport" and "the reserved margin has been scrolled through" are the same instant. base.css owns the rest of it. */ .scroll-sentinel { block-size: max(1px, var(--header-collapse)); margin-block-end: calc(-1 * max(1px, var(--header-collapse))); } .site-header__bar { /* Positioned, not sticky:

does the sticking now. `relative` keeps this element's z-index live inside the header's stacking context. */ position: relative; z-index: var(--z-header); background: var(--surface); border-block-end: 1px solid var(--line); /* No overflow anywhere on this element or its inner: the dropdowns and the mega panel hang out of it and must never be clipped. */ transition: box-shadow var(--t) var(--ease), border-color var(--t) var(--ease); } .site-header__inner { /* Positioning context for .nav-panel--mega, which is right-aligned to the header container edge in pure CSS — there is no JS nudge in this theme. */ position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-block-size: var(--header-h); transition: min-block-size var(--t) var(--ease); } .brand { display: inline-flex; align-items: center; flex: 0 0 auto; text-decoration: none; border-radius: var(--r-2); } .brand__logo { display: block; block-size: var(--logo-h); inline-size: auto; /* 1936 x 894 in the file; the attributes reserve the box, this keeps the ratio while the height animates. Zero CLS either way. */ aspect-ratio: 1936 / 894; transition: block-size var(--t) var(--ease); } /* Stuck state: --sh-3 replaces the hairline, 180ms (nearest token --t). */ .is-stuck .site-header__bar { border-block-end-color: transparent; box-shadow: var(--sh-3); } /* ========================================================================== 4. HEADER ACTION CLUSTER (§6.3) Visibility, by tier: .site-header__cta >= 1440 only .site-header__phone 1200-1439 only .header-call < 1200 only .nav-toggle < 1200 only ========================================================================== */ .site-header__actions { display: flex; align-items: center; gap: var(--sp-3); flex: 0 0 auto; } /* .site-header__cta is also .btn.btn--primary.btn--sm, and components.css loads after this sheet, so the hide rule needs two classes to stay ahead of `.btn { display: inline-flex }`. */ .site-header__actions .site-header__cta, .site-header__actions .site-header__phone { display: none; white-space: nowrap; } /* The 1200-1439 phone button. Bordered rather than filled: at this tier the header carries no .btn--primary, and the accent-density rule keeps the one warm element for the page body. */ .site-header__phone { align-items: center; gap: var(--sp-2); min-block-size: var(--tap-min); padding-inline: var(--sp-4); border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--surface); color: var(--navy); font-family: var(--font-display); font-stretch: var(--font-stretch-display); font-weight: var(--fw-bold); font-size: var(--fs-sm); letter-spacing: var(--ls-btn); text-decoration: none; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .site-header__phone:hover, .site-header__phone:focus-visible { background: var(--navy); border-color: var(--navy); color: var(--surface); transform: translateY(-2px); } .site-header__phone:active { background: var(--navy-link); border-color: var(--navy-link); color: var(--surface); transform: translateY(0); } /* The < 1200px icon-only call button. 48x48 per §9.6. */ .header-call, .nav-toggle { display: inline-grid; place-items: center; flex: 0 0 auto; inline-size: var(--tap-primary); block-size: var(--tap-primary); border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--surface); color: var(--navy); text-decoration: none; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .header-call:hover, .header-call:focus-visible, .nav-toggle:hover, .nav-toggle:focus-visible { background: var(--navy); border-color: var(--navy); color: var(--surface); } .header-call:active, .nav-toggle:active, .nav-toggle[aria-expanded="true"] { background: var(--navy-link); border-color: var(--navy-link); color: var(--surface); } .header-call[aria-disabled="true"], .nav-toggle:disabled { background: var(--surface-alt); border-color: var(--line); color: var(--ink-muted); cursor: not-allowed; } /* ========================================================================== 5. NAV TOGGLE — three 20x2px bars, 6px apart, morphing to an X (§6.5) ========================================================================== */ .nav-toggle__bars { position: relative; display: block; inline-size: 20px; block-size: 14px; } .nav-toggle__bars > span { position: absolute; inset-inline-start: 0; inline-size: 20px; block-size: 2px; border-radius: var(--r-1); background: currentColor; transition: transform var(--t-drawer) var(--ease-drawer), opacity var(--t-drawer) var(--ease-drawer); } .nav-toggle__bars > span:nth-child(1) { inset-block-start: 0; } .nav-toggle__bars > span:nth-child(2) { inset-block-start: 6px; } .nav-toggle__bars > span:nth-child(3) { inset-block-start: 12px; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars > span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bars > span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars > span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* ========================================================================== 6. PRIMARY NAV — list, links, current state (§6.4) The panel is a plain

is a label with no destination. */ span.nav-primary__link { color: var(--ink-muted); cursor: default; } /* The 3px accent bar: scaleX(0) -> 1 from the centre, flush along the bottom edge of the header bar. */ .nav-primary__link::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 3px; background: var(--accent); transform: scaleX(0); transform-origin: center; transition: transform var(--t) var(--ease); pointer-events: none; } a.nav-primary__link:hover, a.nav-primary__link:focus-visible, .nav-primary__link--button:hover, .nav-primary__link--button:focus-visible, .nav-primary__item.is-open > .nav-primary__link { color: var(--navy-link); } a.nav-primary__link:hover::after, a.nav-primary__link:focus-visible::after, .nav-primary__link--button:hover::after, .nav-primary__link--button:focus-visible::after, .nav-primary__item.is-open > .nav-primary__link::after, .nav-primary__link[aria-current="page"]::after { transform: scaleX(1); } a.nav-primary__link:active { color: var(--navy); } .nav-primary__link[aria-current="page"] { color: var(--navy); } /* A parent whose child is the current page keeps the same bar in --line-strong, so "you are somewhere under here" is never colour alone. */ .current-menu-ancestor > .nav-primary__link::after, .current-menu-parent > .nav-primary__link::after { background: var(--line-strong); transform: scaleX(1); } .current-menu-ancestor > a.nav-primary__link:hover::after, .current-menu-ancestor > .nav-primary__link--button:hover::after { background: var(--accent); } /* The chevron toggle. 24px wide x full header height: the §6.6 width budget allows 16px, WCAG 2.5.8 needs 24. 24 wins; the tier still has slack. */ .nav-primary__toggle { display: grid; place-items: center; flex: 0 0 auto; inline-size: 24px; align-self: stretch; border-radius: var(--r-2); color: var(--navy); cursor: pointer; transition: color var(--t-fast) var(--ease); } .nav-primary__toggle:hover, .nav-primary__toggle:focus-visible { color: var(--navy-link); } .nav-primary__toggle:active { color: var(--accent); } /* Chevron rotation, every surface: desktop toggles, the label-is-the-button case, and both drawer toggles. Conveys state, so it survives prefers-reduced-motion — it simply applies instantly. */ [aria-expanded] .icon--chevron { transition: transform var(--t) var(--ease); } [aria-expanded="true"] .icon--chevron { transform: rotate(180deg); } /* The one label the compressed tier may shorten. The tail is only ever VISUALLY hidden — the accessible name keeps containing the visible text, so WCAG 2.5.3 still passes. Never swap the text via a data- attribute. */ .nav-primary__tail { white-space: pre; } /* ========================================================================== 7. NAV PANELS — dropdown, end-aligned, mega (§6.4) ========================================================================== */ .nav-panel { position: absolute; inset-block-start: 100%; inset-inline-start: 0; z-index: var(--z-panel); margin-block-start: var(--sp-2); min-inline-size: 240px; inline-size: max-content; max-inline-size: min(340px, calc(100vw - 2 * var(--gutter))); max-block-size: calc(100vh - var(--header-h-lg) - var(--sp-8)); max-block-size: calc(100dvh - var(--header-h-lg) - var(--sp-8)); overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--sh-panel); opacity: 0; transform: translateY(-6px); transition: opacity var(--t-panel) var(--ease), transform var(--t-panel) var(--ease); } .nav-panel.is-open { opacity: 1; transform: none; } /* Right-hand items open leftwards so the panel can never leave the viewport. */ .nav-panel--end { inset-inline-start: auto; inset-inline-end: 0; } .nav-panel__list { display: grid; gap: var(--sp-1); } .nav-panel__link { display: flex; align-items: center; min-block-size: var(--tap-min); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-2); color: var(--navy); font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-sm); line-height: var(--lh-tight); text-decoration: none; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } a.nav-panel__link:hover, a.nav-panel__link:focus-visible { background: var(--navy-soft); color: var(--navy-link); } a.nav-panel__link:active { background: var(--navy-soft); color: var(--accent); } /* aria-current is marked by a bar as well as a colour (§9.12). */ .nav-panel__link[aria-current="page"] { background: var(--navy-soft); color: var(--navy-link); box-shadow: inset 3px 0 0 0 var(--accent); } span.nav-panel__link { color: var(--ink-muted); cursor: default; } /* --- The 9-child mega panel --------------------------------------------- 560px at 1200-1439, 720px at >= 1440. Right-aligned to the header container edge: the mega

is position:static so this resolves against .site-header__inner. Pure CSS, no measuring, no repositioning nudge. ------------------------------------------------------------------------ */ .nav-primary__item--mega { position: static; } .nav-panel--mega { inset-inline-start: auto; inset-inline-end: 0; display: grid; /* Single column on the narrow desktop tier: at 560px a 4fr/8fr split leaves a 325px list track, which cannot hold "Deck cleaning, staining, and sealing" in two columns. Promo on top, list beneath. */ grid-template-columns: 1fr; gap: var(--sp-6); inline-size: 560px; max-inline-size: calc(100vw - 2 * var(--gutter)); padding: var(--sp-6); border-radius: var(--r-4); } .nav-panel__promo { padding: var(--sp-5); border-radius: var(--r-3); background: var(--navy); color: var(--on-navy); } .nav-panel__promo-text { margin-block-end: var(--sp-4); color: var(--on-navy); font-size: var(--fs-sm); line-height: var(--lh-lead); } .nav-panel__promo-link { display: inline-flex; align-items: center; gap: var(--sp-2); min-block-size: var(--tap-min); color: var(--accent-bright); font-family: var(--font-display); font-stretch: var(--font-stretch-display); font-weight: var(--fw-strong); font-size: var(--fs-sm); letter-spacing: var(--ls-btn); text-transform: uppercase; text-decoration: none; transition: color var(--t-fast) var(--ease); } .nav-panel__promo-link .icon--arrow { transition: transform var(--t) var(--ease); } .nav-panel__promo-link:hover, .nav-panel__promo-link:focus-visible { color: var(--accent-bright-hover); } .nav-panel__promo-link:hover .icon--arrow, .nav-panel__promo-link:focus-visible .icon--arrow { transform: translateX(4px); } .nav-panel__promo-link:active { color: var(--surface); } /* The promo block is a --navy ground inside a white panel, so the focus ring has to flip: white outside, navy inside (tokens.css §2). */ .nav-panel__promo :where(a, button):focus-visible { outline-color: var(--focus-outer); box-shadow: 0 0 0 calc(var(--focus-width) * 2) var(--focus-inner); } /* columns, not grid — 9 links read as 5 rows, not 9 (§6.4). */ .nav-panel__list--2col { display: block; columns: 2; column-gap: var(--sp-5); } .nav-panel__list--2col > li { break-inside: avoid; margin-block-end: var(--sp-1); } /* ========================================================================== 8. NAV TIERS (§6.6 — measured, not guessed) ========================================================================== */ /* --- 1200px: drawer gives way to the compressed desktop nav ------------- */ @media (min-width: 1200px) { /* 40 + 76 - 68 = 48px: the height .is-stuck removes, reserved as margin below the header and as the height of the sentinel that triggers it. */ :root { --header-collapse: calc(var(--topbar-h) + var(--header-h-md) - var(--header-h)); } .topbar { display: block; } .nav-primary { display: flex; /* Logo -> nav gap 24px at this tier; the action cluster is pushed to the container's trailing edge. */ margin-inline: var(--sp-6) auto; } .site-header__inner { justify-content: flex-start; min-block-size: var(--header-h-md); } .brand__logo { block-size: var(--logo-h-md); } .site-header__actions .site-header__phone { display: inline-flex; } .header-call, .nav-toggle { display: none; } .nav-primary__list { gap: var(--sp-3); } .nav-primary__link, .nav-primary__link--button { /* §6.6 budgets Saira 600 at 14px here. --fs-xs tops out at exactly 14px and reads 13.87px at 1200px — inside the 60px of slack. */ font-size: var(--fs-xs); } /* WCAG 2.5.3: the visible label stays a substring of the accessible name, so the tail is hidden visually and never removed from the DOM. */ .nav-primary__tail { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .is-stuck .site-header__inner { min-block-size: var(--header-h); } .is-stuck .brand__logo { block-size: var(--logo-h-md); } } /* --- 1500px: the full nav ------------------------------------------------ */ @media (min-width: 1500px) { /* 40 + 84 - 68 = 56px. */ :root { --header-collapse: calc(var(--topbar-h) + var(--header-h-lg) - var(--header-h)); } .site-header__inner { min-block-size: var(--header-h-lg); } .brand__logo { block-size: var(--logo-h-lg); } /* .is-stuck drops every tier to the 68px header and the 44px lockup. */ .is-stuck .brand__logo { block-size: var(--logo-h-md); } .nav-primary { margin-inline: var(--sp-7) auto; } .nav-primary__list { gap: var(--sp-5); } .nav-primary__link, .nav-primary__link--button { font-size: var(--fs-sm); } .nav-primary__tail { position: static; inline-size: auto; block-size: auto; margin: 0; overflow: visible; clip-path: none; } .site-header__actions { gap: var(--sp-5); } .site-header__actions .site-header__cta { display: inline-flex; } .site-header__actions .site-header__phone { display: none; } .nav-panel--mega { inline-size: 720px; grid-template-columns: 4fr 8fr; gap: var(--sp-6); } /* Explicit placement, because the walker omits .nav-panel__promo entirely when the mega parent's own URL is "#" — the list must not then land in the 4fr promo track. */ .nav-panel--mega > .nav-panel__promo { grid-column: 1; } .nav-panel--mega > .nav-panel__list { grid-column: 2; } /* Progressive enhancement: with no promo the panel is one column. */ @supports selector(:has(*)) { .nav-panel--mega:not(:has(> .nav-panel__promo)) { grid-template-columns: 1fr; } .nav-panel--mega:not(:has(> .nav-panel__promo)) > .nav-panel__list { grid-column: 1; } } } /* ========================================================================== 9. MOBILE DRAWER (§6.5 — < 1200px) The split row is the point: the parent LINK navigates, a 48x48 chevron BUTTON expands, divided by a 1px --line vertical hairline. Two unmistakable targets, so the nine Deck-and-Patio parent pages stop being unreachable on touch. ========================================================================== */ .drawer-backdrop { position: fixed; inset: 0; z-index: var(--z-backdrop); background: var(--backdrop); opacity: 0; transition: opacity var(--t-drawer) var(--ease-drawer); } .drawer-backdrop.is-open { opacity: 1; } .drawer { position: fixed; inset-block: 0; inset-inline-end: 0; z-index: var(--z-drawer); display: flex; flex-direction: column; inline-size: min(420px, 100vw); max-inline-size: 100vw; overflow-y: auto; overscroll-behavior: contain; background: var(--surface); box-shadow: var(--sh-panel); /* The theme ships lang="en-CA"; the drawer is on the inline-end edge and translateX(100%) matches it. */ transform: translateX(100%); transition: transform var(--t-drawer) var(--ease-drawer); } .drawer.is-open { transform: translateX(0); } .drawer__head { position: sticky; inset-block-start: 0; z-index: var(--z-base); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) var(--sp-5); background: var(--surface); border-block-end: 1px solid var(--line); } .drawer__logo { display: block; block-size: var(--logo-h); inline-size: auto; aspect-ratio: 1936 / 894; } .drawer__close { display: inline-grid; place-items: center; flex: 0 0 auto; inline-size: var(--tap-primary); block-size: var(--tap-primary); border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--surface); color: var(--navy); transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .drawer__close:hover, .drawer__close:focus-visible { background: var(--navy); border-color: var(--navy); color: var(--surface); } .drawer__close:active { background: var(--navy-link); border-color: var(--navy-link); color: var(--surface); } .drawer__nav { flex: 0 0 auto; } .drawer__item { border-block-end: 1px solid var(--line); } .drawer__row { display: flex; align-items: stretch; } .drawer__link { display: flex; align-items: center; gap: var(--sp-3); flex: 1 1 auto; min-block-size: 52px; padding: var(--sp-3) var(--sp-5); color: var(--navy); font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-base); line-height: var(--lh-tight); text-decoration: none; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .drawer__link--button { justify-content: space-between; inline-size: 100%; cursor: pointer; } span.drawer__link { color: var(--ink-muted); cursor: default; } a.drawer__link:hover, a.drawer__link:focus-visible, .drawer__link--button:hover, .drawer__link--button:focus-visible { background: var(--navy-soft); color: var(--navy-link); } a.drawer__link:active, .drawer__link--button:active { background: var(--navy-soft); color: var(--accent); } .drawer__link[aria-current="page"] { color: var(--navy-link); box-shadow: inset 3px 0 0 0 var(--accent); } /* The 48x48 chevron, behind its own hairline. */ .drawer__toggle { display: grid; place-items: center; flex: 0 0 var(--tap-primary); inline-size: var(--tap-primary); min-block-size: 52px; border-inline-start: 1px solid var(--line); color: var(--navy); cursor: pointer; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .drawer__toggle:hover, .drawer__toggle:focus-visible { background: var(--navy-soft); color: var(--navy-link); } .drawer__toggle:active { background: var(--navy-soft); color: var(--accent); } /* main.js measures scrollHeight and animates the inline height; it also owns `overflow` for the duration of the animation, then clears it so focus rings inside are never clipped at rest. */ .drawer__sub { margin-inline-start: var(--sp-5); padding-inline-start: var(--sp-4); padding-block: var(--sp-2); border-inline-start: 2px solid var(--line); transition: height var(--t) var(--ease); } .drawer__sublink { display: flex; align-items: center; min-block-size: var(--tap-min); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-2); color: var(--ink); font-size: var(--fs-base); line-height: var(--lh-tight); text-decoration: none; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } a.drawer__sublink:hover, a.drawer__sublink:focus-visible { background: var(--navy-soft); color: var(--navy-link); } a.drawer__sublink:active { color: var(--accent); } span.drawer__sublink { color: var(--ink-muted); cursor: default; } .drawer__sublink[aria-current="page"] { color: var(--navy-link); font-weight: var(--fw-strong); } /* --- Drawer foot --------------------------------------------------------- */ .drawer__foot { display: grid; gap: var(--sp-3); margin-block-start: auto; padding: var(--sp-6) var(--sp-5) calc(var(--sp-5) + env(safe-area-inset-bottom)); background: var(--navy-deep); color: var(--on-navy); } .drawer__phone { display: inline-flex; align-items: center; min-block-size: var(--tap-min); color: var(--accent-bright); font-family: var(--font-display); font-stretch: var(--font-stretch-display); font-weight: var(--fw-bold); font-size: var(--fs-lg); line-height: var(--lh-flat); text-decoration: none; justify-self: start; transition: color var(--t-fast) var(--ease); } .drawer__phone:hover, .drawer__phone:focus-visible { color: var(--accent-bright-hover); } .drawer__phone:active { color: var(--surface); } a.drawer__email { display: inline-flex; align-items: center; min-block-size: var(--tap-min); justify-self: start; color: var(--on-navy); font-size: var(--fs-sm); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--line-on-dark); transition: color var(--t-fast) var(--ease); } a.drawer__email:hover, a.drawer__email:focus-visible { color: var(--surface); text-decoration-color: var(--accent-bright); } a.drawer__email:active { color: var(--accent-bright); } .drawer__hours { color: var(--on-navy-dim); font-size: var(--fs-xs); line-height: var(--lh-lead); } .drawer__foot .btn { margin-block-start: var(--sp-2); } /* The drawer has no business existing at the desktop nav tiers. main.js also closes it on the matchMedia change, so the two can never disagree. This rule sits after `.drawer { display: flex }` on purpose — at equal specificity, source order decides. */ @media (min-width: 1200px) { .drawer, .drawer-backdrop { display: none; } } /* ========================================================================== 10. STICKY MOBILE CALL BAR (§6.22 — < 768px) Always visible from the top of the page, never gated on scroll distance, hidden while the drawer is open. Exempt from the accent-density rule. ========================================================================== */ .callbar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-callbar); display: grid; grid-template-columns: 1fr 1fr; background: var(--navy-deep); border-block-start: 1px solid var(--line-on-dark); padding-block-end: env(safe-area-inset-bottom); } .callbar__btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-block-size: var(--callbar-h); padding-inline: var(--sp-3); font-family: var(--font-display); font-stretch: var(--font-stretch-display); font-weight: var(--fw-bold); font-size: var(--fs-sm); line-height: var(--lh-flat); letter-spacing: var(--ls-btn); text-transform: uppercase; text-decoration: none; text-align: center; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .callbar__btn--call { background: var(--accent-bright); color: var(--navy); } .callbar__btn--call:hover, .callbar__btn--call:focus-visible { background: var(--accent-bright-hover); } .callbar__btn--call:active { background: var(--surface); } /* Transparent with a 2px rgba(255,255,255,.72) border — which is also what separates the two cells. */ .callbar__btn--quote { background: transparent; color: var(--surface); box-shadow: inset 0 0 0 2px var(--border-on-dark); } .callbar__btn--quote:hover, .callbar__btn--quote:focus-visible { background: var(--surface); color: var(--navy); } .callbar__btn--quote:active { background: var(--on-navy); color: var(--navy); } /* --call is an --accent-bright fill, where the default navy inner ring reads 5.14:1 (tokens.css §2). --quote is transparent on --navy-deep, so its ring has to flip: white inside is 16.94:1 there. */ .callbar__btn--quote:focus-visible { outline-color: var(--focus-outer); box-shadow: 0 0 0 calc(var(--focus-width) * 2) var(--focus-inner), inset 0 0 0 2px var(--border-on-dark); } /* The bar must never cover the footer. */ body { padding-block-end: calc(var(--callbar-h) + env(safe-area-inset-bottom)); } /* main.js also sets an inline display:none; this is the CSS half of the same rule so the bar cannot flash behind the backdrop. */ .is-drawer-open .callbar { display: none; } @media (min-width: 768px) { .callbar { display: none; } body { padding-block-end: 0; } } /* ========================================================================== 11. SOCIAL LISTS (top bar, drawer foot, footer — all on dark) ========================================================================== */ .social { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); } .social__link { display: inline-grid; place-items: center; inline-size: var(--tap-min); block-size: var(--tap-min); border-radius: var(--r-2); color: var(--on-navy); text-decoration: none; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .social__link:hover, .social__link:focus-visible { background: var(--line-on-dark); color: var(--accent-bright); } .social__link:active { color: var(--surface); } /* The top bar is 40px tall, so its icons sit in a 32px box. That clears WCAG 2.5.8 (24x24) and the same two destinations are also reachable at 44x44 in the footer on every page. */ .social--topbar .social__link { inline-size: 32px; block-size: 32px; } /* ========================================================================== 12. SITE FOOTER (§6.21) --navy-deep. 4 columns >= 1024px, 2 >= 640px, 1 below. ========================================================================== */ .site-footer { position: relative; background: var(--navy-deep); color: var(--on-navy); } .site-footer__main { display: grid; grid-template-columns: 1fr; gap: var(--sp-9) var(--grid-gap); padding-block: var(--section-y-lg) var(--section-y); } .site-footer__col { min-width: 0; } .site-footer__col--brand { display: grid; gap: var(--sp-4); justify-items: start; align-content: start; } .site-footer__logo { display: block; block-size: var(--logo-h-lg); inline-size: auto; aspect-ratio: 1936 / 894; } .site-footer__blurb { color: var(--on-navy); font-size: var(--fs-base); line-height: var(--lh-lead); max-inline-size: var(--measure-card); } .site-footer__heading { margin-block-end: var(--sp-4); color: var(--surface); font-family: var(--font-display); font-stretch: var(--font-stretch-display); font-size: var(--fs-sm); font-weight: var(--fw-strong); line-height: var(--lh-tight); letter-spacing: var(--ls-caps); text-transform: uppercase; } .site-footer__list { display: grid; gap: var(--sp-1); } .site-footer__link { display: inline-flex; align-items: center; min-block-size: var(--tap-min); padding-block: var(--sp-1); color: var(--on-navy); font-size: var(--fs-sm); line-height: var(--lh-tight); text-decoration: none; transition: color var(--t-fast) var(--ease), text-decoration-color var(--t-fast) var(--ease); } a.site-footer__link:hover, a.site-footer__link:focus-visible { color: var(--surface); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--accent-bright); } a.site-footer__link:active { color: var(--accent-bright); } .site-footer__link[aria-current="page"] { color: var(--surface); font-weight: var(--fw-strong); } span.site-footer__link { color: var(--on-navy-dim); cursor: default; } .site-footer__col--contact { display: grid; gap: var(--sp-3); align-content: start; justify-items: start; } .site-footer__col--contact .site-footer__heading { margin-block-end: 0; } .site-footer__phone { display: inline-flex; align-items: center; min-block-size: var(--tap-min); color: var(--accent-bright); font-family: var(--font-display); font-stretch: var(--font-stretch-display); font-weight: var(--fw-bold); font-size: var(--fs-lg); line-height: var(--lh-flat); text-decoration: none; transition: color var(--t-fast) var(--ease); } .site-footer__phone:hover, .site-footer__phone:focus-visible { color: var(--accent-bright-hover); } .site-footer__phone:active { color: var(--surface); } .site-footer__meta { color: var(--on-navy-dim); font-size: var(--fs-xs); line-height: var(--lh-lead); } .site-footer__meta strong { color: var(--on-navy); } /* The five original payment icons are 42x26 PNGs on a dark ground, so each one sits on a white chip to stay legible. */ .payments { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-block-start: var(--sp-2); } .payments li { display: flex; padding: var(--sp-2); border-radius: var(--r-1); background: var(--surface); } .payments img { display: block; block-size: auto; } /* --- Legal strip --------------------------------------------------------- */ .site-footer__legal { border-block-start: 1px solid var(--line-on-dark); padding-block: var(--sp-6); } .site-footer__disclaimer, .site-footer__copy { color: var(--on-navy-dim); font-size: var(--fs-xs); line-height: var(--lh-lead); } .site-footer__copy { margin-block-start: var(--sp-4); } @media (min-width: 640px) { .site-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .site-footer__main { grid-template-columns: 1.3fr 1fr 1fr 1.2fr; } } /* ========================================================================== 13. PREFERENCES ========================================================================== */ @media (prefers-reduced-motion: reduce) { /* Transforms that convey STATE still apply — the hamburger morph, the chevron rotation, the drawer position, the nav underline. They simply apply instantly, because tokens.css has already collapsed every transition-duration. The purely decorative entry offset on a dropdown panel is removed outright, leaving opacity alone. */ .nav-panel, .nav-panel.is-open { transform: none; } .nav-panel__promo-link:hover .icon--arrow, .nav-panel__promo-link:focus-visible .icon--arrow { transform: none; } .site-header__phone:hover, .site-header__phone:focus-visible { transform: none; } } @media (prefers-contrast: more) { .site-header__bar { border-block-end-color: var(--line-strong); } .nav-panel { border-color: var(--line-strong); } .drawer__item, .drawer__head { border-block-end-color: var(--line-strong); } .drawer__toggle { border-inline-start-color: var(--line-strong); } .topbar__link, .drawer__email { text-decoration-color: currentColor; } .callbar { border-block-start-color: var(--border-on-dark); } .site-footer__legal { border-block-start-color: var(--border-on-dark); } } @media (forced-colors: active) { .site-header__bar, .topbar, .callbar, .drawer__foot, .site-footer { border-block-end: 1px solid CanvasText; } .nav-panel, .drawer { border: 1px solid CanvasText; background: Canvas; } .nav-panel__promo { border: 1px solid CanvasText; } /* The hamburger bars are the control's only visible form. */ .nav-toggle__bars > span { background: CanvasText; forced-color-adjust: none; } /* The nav underline and the drawer's current-page bar are state signals, not decoration. */ .nav-primary__link::after { background: Highlight; forced-color-adjust: none; } .callbar__btn--call { border: 2px solid CanvasText; } .payments li { border: 1px solid CanvasText; } } /* ========================================================================== 14. WORDPRESS ADMIN BAR Core pins #wpadminbar with position:fixed and pushes the document down with `html { margin-top: 32px !important }`. A sticky header at top:0 would then slide underneath it, so the offset is mirrored here. No !important is needed: nothing in core sets `top` on this element. ========================================================================== */ body.admin-bar .site-header { inset-block-start: 32px; } /* Core's `html { margin-top: 32px }` pushes the sentinel down the same 32px, so it would leave the viewport 32px later than the reserved margin runs out. Shortening it by the admin bar keeps the collapse on the same scroll position it fires at for visitors. (Below 782px --header-collapse is 0, the max() floor wins, and this is a no-op.) */ body.admin-bar .scroll-sentinel { block-size: max(1px, calc(var(--header-collapse) - 32px)); margin-block-end: calc(-1 * max(1px, calc(var(--header-collapse) - 32px))); } @media (max-width: 782px) { body.admin-bar .site-header { inset-block-start: 46px; } }