/* multi-import:brand-layer:start - managed by Tools > Multi Import; edits inside are replaced on re-import */ /* Ottawa Plumbing Experts - overrides.css Only documented tokens (see cowork-client-zip build-client-zip style.md). Palette extracted from the brand logo (assets/logo.svg), amber removed from primary/CTA buttons per client direction - navy is now the primary/CTA colour sitewide, with a single amber accent reintroduced for feature-card icons only: navy #0d2a42 (headings, primary/CTA buttons, tertiary/badge accent) navy-deep #0a2032 (button hover / secondary) blue #2c668d (links) amber #d98a16 (accent fills/icons - feature-card icons only) icy tint #eaf7fd -> lightened to #f5fbfe for the page background Feature-card icon colour correction: the --color-accent token above was the documented lever per style.md S4, but on the live import the icon glyphs render red (#E1315C) from `.feature-card-icon-tile{color:var(--color-primary)}` scoped inside the feature-cards block, which is a different, locally-shadowed value than the site-wide --color-primary we set to navy above - our :root override never reaches it. Fixed with a direct, !important class rule below instead of chasing the variable further, since that's guaranteed to win regardless of where the shadowed value comes from. CTA-banner redesign note: sand `#d8bb8d` background with a real, fully hand-drawn pipe SVG (7 pipes, column-aligned riveted couplings, individual bolts), a solid `#172431` navy inner panel, and an orange `#f0a43b` divider/primary button - all scoped to .block-cta-banner, see that rule block below for the full explanation. These colours do not touch --color-primary/--color-accent, so nothing else on the site is affected. Font note: this session has no outbound network access to fonts.gstatic.com, so no woff2 could be fetched/self-hosted this build. Shipping a bold system-ui stack for headings instead of a broken or missing @font-face reference. Drop a real woff2 into styles/assets/fonts/ and add the @font-face + token override below whenever a font file is available - see build notes. */ :root{ /* Fonts: system stack (no self-hosted webfont available this build) */ --typography-family-heading:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --typography-weight-heading: 700; /* Brand hues */ --color-sienna:#0d2a42; --color-sienna-deep:#0a2032; /* Direct role pins */ --color-primary:#0d2a42; --color-secondary:#0a2032; --color-accent:#d98a16; --color-accent-hover:#0a2032; --color-tertiary:#0d2a42; --color-tertiary-dark:#0a2032; --color-tertiary-container:#dbe9f2; --color-link-text:#2c668d; --color-link-text-hover:#0d2a42; --color-heading:#0d2a42; /* Surface / paper ramp: light icy-blue tint, never the brand hue, never dark */ --color-paper:#ffffff; --color-paper-tint:#f5fbfe; --color-paper-deep:#e9f3fa; --color-rule:#d7e6ef; } /* Page background (theme.json default overridden here) */ body{ background:#f5fbfe; } /* Required process-step connector kill (SOP Step 4) */ .process-step + .process-step::before{content:none !important;display:none !important;} /* =================================================================== CTA banner redesign (client visual-design brief). No HTML template exists in this content-only export to edit directly - the cta-banner block (heading/description/primary_button/secondary_button only, per block-types.md) is rendered by the theme's own PHP, so there is no . Hide the middle bar in that state only; ::before/::after stay navy and keep forming the X. */ body.js-nav-active .hamburger, .nav-toggle[aria-expanded="true"] .hamburger{ background-color:transparent !important; } /* Sticky mobile call-to-action bar (client request): the "Call" half of the sticky bottom bar was rendering in the same shadowed red as above - set to the brand accent orange. The "Get a Quote" half is already navy and is untouched. */ .sticky-cta-call{ background-color:#f0a43b !important; } /* Sticky "Call / Get a Quote" bar shown on the Contact page for desktop too (client request). By default the theme only shows this sticky bar on mobile viewports, sitewide - there's no settings.json/block lever for it since it's global site chrome, not a page block. Scoped to the Contact page specifically via :has(.block-contact-info-cards), the one block type only the Contact page uses, so no page-slug body class needs to be guessed. The bar's own wrapper class wasn't confirmed via DevTools beyond the "Call" half (.sticky-cta-call, fixed above) - .sticky-cta is the most likely wrapper name given that sibling class, with a broader fallback for resilience. If it doesn't appear on desktop after import, send a screenshot with DevTools open on the bar and it'll be corrected. */ @media (min-width:1024px){ body:has(.block-contact-info-cards) .sticky-cta, body:has(.block-contact-info-cards) [class*="sticky-cta"]{ display:flex !important; } } /* Quote-form "Back" button hover state (client request): the base state was already fixed to navy, but the hover state still filled with the same shadowed red because only border-color/text-color were overridden before, not the hover background. Now the hover fill is navy with white text. */ .quote-form-back:hover{ background-color:#0d2a42 !important; border-color:#0d2a42 !important; color:#ffffff !important; } /* Quote-form field underline (client request): the active/focused underline beneath the form's select/input fields (e.g. "Select an area") renders in the same shadowed red as everything else above - set directly to brand navy. Covers both a border-based underline and a possible dedicated bar element, since the live theme markup for this isn't inspectable from this session. */ [class*="quote-form"] select, [class*="quote-form"] input, [class*="quote-form"] textarea, select[class*="quote-form"], input[class*="quote-form"], textarea[class*="quote-form"]{ border-color:#0d2a42 !important; } [class*="quote-form"] select:focus, [class*="quote-form"] input:focus, [class*="quote-form"] textarea:focus, select[class*="quote-form"]:focus, input[class*="quote-form"]:focus, textarea[class*="quote-form"]:focus{ border-color:#0d2a42 !important; outline-color:#0d2a42 !important; } .quote-form-select-bar, .quote-form-field-bar, .quote-form-input-bar, [class*="quote-form"][class*="-bar"], [class*="quote-form"][class*="-underline"]{ background-color:#0d2a42 !important; } /* "Back to top" floating button (client request): the theme's built-in scroll-to-top link (#top.no-external-link-indicator) rendered with the same shadowed red background as everything above - set to brand navy. */ #top.no-external-link-indicator{ background-color:#0d2a42 !important; } /* Cost Calculator (carpet-calculator) accent colour fix (client request): the section kickers ("BUILD YOUR PROJECT", "ESTIMATED INVESTMENT") and the numbered step labels ("1. SELECT A SERVICE" etc.) render in the same shadowed red seen throughout this build - set directly to brand navy. */ .local-calculator-results-kicker, .local-calculator-kicker, .local-calculator-panel-kicker, .local-calculator-step-label{ color:#0d2a42 !important; } /* Correction: service_type/scope/urgency are NOT classes on the results panel's value elements (Drain Cleaning) - they're data-result-row attribute values, so the previous .service_type/.scope/.urgency class selectors never matched anything and the values stayed red. Fixed with the correct attribute selector. */ [data-result-row]{ color:#0d2a42 !important; } /* FAQ accordion hover colour (client request): hovering an FAQ question currently highlights in the same shadowed red - set to the specific blue requested (#3e8dd8) instead, sitewide on every faq-section instance. Scoped to the likely accordion-trigger elements (button/summary/heading) rather than every descendant, so answer-text links aren't affected. Broadened with attribute-contains selectors (confirmed pattern from a sibling build of this same theme) to also cover the site's real /faq archive + single-question pages now that md-faq/ is wired up below - those use different markup than the embedded faq-section block. */ .block-faq-section :is(button,summary,[role="button"],h3,h4):hover, [class*="faq"] [class*="question"]:hover, [class*="faq-item"] summary:hover, [class*="faq-item"] button:hover{ color:#3e8dd8 !important; } /* FAQ archive page ("N answers" count badge) and FAQ single-question page (the "QUESTION NO. 01" eyebrow number): both are theme-native elements that only became reachable once the site had real /faq content (added below via md-faq/) - confirmed via a sibling build of this same theme to hardcode the same shadowed red as everything else in this file. Pinned to the brand accent orange to match the rest of this site's eyebrow/badge treatment. */ .faq-archive-count span, .faq-single-eyebrow-num{ color:#d98a16 !important; } /* FAQ single-question page answer drop-cap (the large stylised first letter of the answer paragraph, eg the "Y" in "Yes - one team handles..."). Confirmed via DevTools on the live /faq/residential- commercial/ page: markup is

...

with the theme styling p::first-letter directly - same shadowed-red default as everything else in this file. Pinned to brand navy, with a broader fallback selector kept for resilience. */ .faq-single-answer.has-drop-cap p::first-letter, [class*="faq-single-answer"] p::first-letter{ color:#0d2a42 !important; } /* Homepage "Plumbing Built Around How Ottawa Actually Uses Water" heading, centered above the two media-text sections that replaced the old plain paragraphs. This is the only standalone `heading` block on the homepage, so scoping to body.home keeps every other page's headings untouched. A couple of fallback selectors are included since the exact wrapper class the theme gives a bare heading block hasn't been confirmed via DevTools - if it doesn't land, send a screenshot and it'll be tightened to the real selector, same as every other guess-then-confirm fix in this file. */ body.home .block-heading, body.home .block-heading h2, body.home h2.wp-block-heading:first-of-type{ text-align:center !important; } /* Header logo, sized up (client request: "make the logo a little bigger", using another client site's header logo as a visual size reference only - not a design/colour reference, just roughly how large a header logo can read at). No documented logo-size token exists in style.md and no existing logo rule was in this file, so this targets the header logo wrapper directly. The exact class name the theme gives the header logo on THIS site hasn't been confirmed via DevTools (the reference site shares this theme family but is a separate project) - selectors below cover the two likely markup shapes (inline

) with a plain-tag fallback. If this doesn't land on the actual header, send a screenshot with DevTools open on the logo and it'll be corrected to the confirmed selector, same as other guess-then-confirm fixes here. */ .site-branding .site-logo-svg, .site-branding svg, .site-logo-link svg, .site-branding img, .site-logo-link img, header .site-logo{ height:48px !important; width:auto !important; } /* Trust-checklist checkmark fix: the theme's own stylesheet embeds a literal UTF-8 check character that the live site serves mis-encoded (renders as "a-oe-quote" mojibake). Re-declare the glyph with an ASCII-safe CSS escape so it renders as a real checkmark regardless of charset. Same fix already proven on the Interlock Experts Toronto build (same theme). */ .block-trust-checklist .card-content::before{ content:"\2713" !important; background-color:#0d2a42 !important; /* site navy */ color:#ffffff !important; font-family:Arial, sans-serif; } /* multi-import:brand-layer:end */