/* multi-import:brand-layer:start - managed by Tools > Multi Import; edits inside are replaced on re-import */ /* Electrical Services Ottawa - overrides.css Only documented tokens are touched (see build-client-zip skill's style.md). */ /* 1. Self-hosted brand fonts. Real static woff2 files, converted from the official Google Fonts source files you supplied (Inter and Manrope, both SIL Open Font License - see OFL.txt in each family's download). Inter uses the 18pt static optical-size cut, which is the correct pick for body/UI text at typical sizes (the variable font's opsz axis defaults toward the larger 28pt cut, meant for headline-size text). One @font-face per weight, self-hosted from styles/assets/fonts/ - no external font CDN involved. */ @font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap; src:url('../fonts/manrope-600.woff2') format('woff2');} @font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap; src:url('../fonts/manrope-700.woff2') format('woff2');} @font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap; src:url('../fonts/manrope-800.woff2') format('woff2');} @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap; src:url('../fonts/inter-400.woff2') format('woff2');} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap; src:url('../fonts/inter-500.woff2') format('woff2');} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap; src:url('../fonts/inter-600.woff2') format('woff2');} :root{ /* 2. Typography - Manrope for headings (600/700/800), Inter for body/UI (400/500/600). */ --typography-family-heading:'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif; --typography-family-main:'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --typography-family-paragraph:var(--typography-family-main); --typography-weight-regular:400; --typography-weight-medium:500; --typography-weight-semibold:600; --typography-weight-bold:700; --typography-weight-paragraph:var(--typography-weight-regular); --typography-weight-heading:800; /* 3. Brand hues. Blue is primary; the theme's own default sienna-deep (#1d4ed8) is coincidentally this exact blue, so we set the pair explicitly for clarity. */ --color-sienna:#1D4ED8; /* Blue - primary brand hue */ --color-sienna-deep:#1E3A8A; /* Deeper blue - hover state */ --color-canadian-red:#EAB308; /* Amber - tertiary accent (icon tiles, process-step numbers, badges) */ /* 4. Semantic role pins (belt-and-braces, per style.md's fast path). */ --color-primary:#1D4ED8; --color-accent:#1D4ED8; --color-accent-hover:#1E3A8A; --color-link-text:#1D4ED8; --color-link-text-hover:#1E3A8A; --color-tertiary:#EAB308; /* Amber - explicit pin, same role as canadian-red above */ /* 5. Surface & ink ramp - Off-white paper, black text. */ --color-paper:#F8FAFC; --color-paper-tint:#F1F5F9; --color-paper-deep:#E2E8F0; --color-rule:#CBD5E1; --color-ink:#000000; --color-ink-soft:#404040; --color-surface-container:#EEF1F5; --color-tertiary-dark:#B45309; --color-tertiary-container:#E2E8F0; } /* Page background (set in theme.json by default) - match the off-white paper token. */ body{ background:#F8FAFC; } /* Cost calculator: keep its accent black rather than the site-wide amber tertiary. Best-effort scoped override - ".block-" matches the wrapper naming convention seen on every other block (block-feature-cards, block-process-steps, block-quote-form, etc.); the calculator's own type is "carpet-calculator", so ".block-carpet-calculator" is the expected wrapper class. If the calculator's accent still isn't black after import, send a screenshot of its element inspector (like the feature-card-icon-tile one) and I'll target the real class. */ .block-carpet-calculator{ --color-tertiary:#000000; --color-primary:#000000; --color-accent:#000000; --color-canadian-red:#000000; --color-secondary:#000000; --color-sienna:#000000; --color-sienna-deep:#000000; --color-link-text:#000000; --color-link-text-hover:#000000; --color-tertiary-dark:#000000; } /* Calculator label/copy/value text: real confirmed class names from your inspector (the earlier .eyebrow/.field-label/etc guesses were wrong, which is why that attempt didn't take effect). This does not touch the dark "Estimated range" card, which isn't in this list and keeps its own white text. */ .local-calculator-panel-copy, .local-calculator-note, .local-calculator-description, .local-calculator-kicker, .local-calculator-results-kicker, .local-calculator-panel-kicker, .local-calculator-step-label, .local-calculator-option-value{ color:#000000 !important; } /* "Electrical panel upgrade" / "Standard upgrade..." value text specifically: your latest inspector screenshot shows this is a inside a wrapper with class "local-calculator-breakdown" (confirmed from the Styles panel - the element's actual class, not "local-calculator-results-breakdown" as guessed previously, which is why that rule never matched and the text stayed red at #E1315C). Targeting the real class this time. */ .local-calculator-breakdown strong{ color:#000000 !important; } /* Pricing table (homepage "What jobs typically cost in Ottawa"): three specific undocumented component classes, targeted directly using the exact class names from the client's own element inspector (pricing-card-cta, pricing-card-price, pricing-card.is-popular). Not scoped under a guessed ".block-pricing-table" wrapper since these class names were confirmed, not guessed. */ .pricing-card-cta{ background-color:#1E3685 !important; /* dark blue - site button default */ border-color:#1E3685 !important; color:#FFFFFF !important; } .pricing-card-cta:hover{ background-color:#1D4ED8 !important; /* primary brand blue - site button hover */ border-color:#1D4ED8 !important; } /* Except the "Most Popular" pricing card's button - kept in its original colours (not switched to the site-wide dark-blue/blue pattern above) per your request, so it still stands out against the other three tiers. */ .pricing-card.is-popular .pricing-card-cta{ background-color:#1D4ED8 !important; border-color:#1D4ED8 !important; } .pricing-card.is-popular .pricing-card-cta:hover{ background-color:#1E3A8A !important; border-color:#1E3A8A !important; } .pricing-card-price{ color:#000000 !important; /* black */ } .pricing-card.is-popular{ border-color:#EAB308 !important; /* amber */ } .pricing-card-badge{ background-color:#EAB308 !important; /* amber */ color:#000000 !important; border-color:#EAB308 !important; } /* Quote-form widget (the embedded multi-step form in the homepage hero and every carpet-hero): three exact class names from your inspector - step indicator bar, Next button, Back button. Navy blue base, a deeper navy on hover. */ .quote-form-step-indicator-bar{ background-color:#E8E0CA !important; /* incomplete step - tan */ } li:first-child .quote-form-step-indicator-bar{ background-color:#1E3A8A !important; /* current step - navy blue */ } /* The red underline below the "Select a service" dropdown - no confirmed class for this one, so a best-effort guess at the field/select wrapper, following the same "quote-form-*" naming pattern as the confirmed classes above. If it doesn't take effect, an inspector screenshot of that underline (like you did for the step indicator) will let me target the real class. */ .quote-form-select, .quote-form-select-underline, .quote-form-field-underline, .quote-form-input-underline, .quote-form select{ border-bottom-color:#1E3A8A !important; outline-color:#1E3A8A !important; } .quote-form-next{ background-color:#1E3685 !important; /* dark blue - site button default */ border-color:#1E3685 !important; color:#FFFFFF !important; } .quote-form-next:hover{ background-color:#1D4ED8 !important; /* primary brand blue - site button hover */ border-color:#1D4ED8 !important; } .quote-form-back{ background-color:transparent !important; border-color:#1E3685 !important; /* dark blue outline */ color:#1E3685 !important; /* dark blue text */ } .quote-form-back:hover{ border-color:#1D4ED8 !important; /* primary brand blue */ color:#1D4ED8 !important; } /* Feature-card icon tiles: the --color-canadian-red/--color-tertiary token route (set to amber at :root in section 3 above) hasn't been taking effect on this component across several revisions, so switching to targeting the confirmed class name directly instead - ".feature-card-icon-tile" and its icon glyph, from your own element inspector. */ .feature-card-icon-tile, .feature-card-icon-tile i, .feature-card-icon-tile svg{ color:#EAB308 !important; /* amber */ } /* Description text under the pricing table and services grid headings - exact class names from your inspector. */ .block-pricing-table-description, .block-services-grid-description{ color:#000000 !important; /* black */ } /* Hero button - exact class name as given: ".block-hero-button". Fill now matches the CTA banner's navy (#1f3684), with a slightly darker shade on hover for the usual pressed-state feedback. Scoped with ":not(.block-hero-button-secondary)" - your screenshot showed this rule had also recolored the secondary/phone button in the hero (".block-hero-button.block-hero-button-secondary" carries the same base class), which wasn't the intent. Excluding that modifier class reverts the secondary button to the theme's own original style and leaves only the primary "Request a Free Quote" button navy. */ .block-hero-button:not(.block-hero-button-secondary){ background-color:#1E3685 !important; /* dark blue - site button default */ border-color:#1E3685 !important; } .block-hero-button:not(.block-hero-button-secondary):hover{ background-color:#1D4ED8 !important; /* primary brand blue - site button hover */ border-color:#1D4ED8 !important; } /* FAQ accordion hover state: client reports the hover colour is currently red and wants navy blue. No confirmed class name for this one yet, so this is a best-effort guess covering the most likely selectors for a FAQ accordion question/toggle on hover, scoped to the FAQ block wrapper so it can't leak into other components. If this doesn't take effect, send an element-inspector screenshot of the FAQ item mid-hover (like the pricing-card one) and I'll target the exact class. */ .block-faq-section .faq-question:hover, .block-faq-section .faq-item:hover .faq-question, .block-faq-section summary:hover, .block-faq-section .faq-toggle:hover, .block-faq-section .faq-icon:hover, .block-faq-section details[open] summary{ color:#1E3A8A !important; /* navy blue */ border-color:#1E3A8A !important; } /* Announcement bar ("Free written quotes - no obligation" strip above the header). Real class confirmed from your element inspector: ".announcement-hat". Now dark blue (was the lighter primary blue), and shown on every page again - this reverses the Revision 16 "homepage only" restriction. */ .announcement-hat{ background-color:#172554 !important; /* dark blue */ color:#FFFFFF !important; } .announcement-hat a{ color:#FFFFFF !important; } /* "Back to top" floating button: confirmed via your inspector as id="top" with classes .top.no-external-link-indicator.is-visible - targeting the id directly since it's unique on the page. Navy blue, dark blue on hover. */ #top{ background-color:#1E3685 !important; /* dark blue - site button default */ } #top:hover{ background-color:#1D4ED8 !important; /* primary brand blue - site button hover */ } /* CTA banner custom "electrical breaker panel" design, Revision 28. cta-banner has no bg_image field in this importer's schema (heading, description, primary_button, secondary_button only) and its markup is rendered by the base theme's own template, not something this content folder can edit directly - there's no "CTA HTML" file to touch. So this is still done entirely through CSS, scoped to ".block-cta-banner": - Breaker rows are now evenly spaced and centered as one continuous 16-breaker sequence per row (80x117 each - the same screw/red-strip/ switch/marking/shadow detail as before, just resized via the symbol's own viewBox so nothing internal was redrawn), with a single consistent 7px gap between every breaker and small, roughly equal margins on either side of the row - no more lopsided empty space on the right. Both rows share the exact same x-positions, so every top breaker sits directly above its matching bottom breaker. The row runs uninterrupted behind wherever the CTA card happens to sit; the card is a separate layer on top and never affects this artwork's own layout. - All decorative curved cables (the four top-left, three top-right, two bottom-left, two bottom-right wires from earlier revisions) are deleted from the SVG outright - not hidden, removed. Only the three straight vertical red/green/blue wires remain, now moved in close to the inner-right frame (24px from the frame to the blue wire's outer edge), identical 14px width each, evenly spaced, with their rounding highlight kept, and running the full canvas height with no bleed past the top/bottom edges. Three grey ties, evenly spaced top to bottom, centered across all three wires. - Card colors: background #1f3684 (unchanged), a solid 12px outer frame in #071a35, and the inner glow border is now a solid 2px #10245f line (no opacity) via an inset box-shadow layer - this replaces the semi-transparent bright-blue inset border from earlier revisions, which is what "rgba(96,165,250,0.3)" was. - Buttons: no confirmed classes, so styled via :first-of-type/:last-of-type on the two CTA links - safe here because every cta-banner block on this site always ships exactly two buttons (primary + phone). Both now have a hover lift (3px up, 1.03 scale, a soft dark-blue shadow) and an active/click press (0.98 scale), all on one shared transition. The phone button's own resting style (transparent, white border/text) is unchanged - only its hover state is new (solid white background, navy text). A "prefers-reduced-motion: reduce" block turns the transform/ transition off entirely for anyone who has that OS setting on. - The card-wrapper selector is still a best-effort guess (a few plausible selectors below) since the theme's real inner-content class isn't confirmed - if the text doesn't land inside the drawn card after reimport, an inspector screenshot of that wrapper will let me target it precisely. */ .block-cta-banner{ box-sizing:border-box; position:relative; display:flex; align-items:center; justify-content:center; width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); max-width:100vw; min-height:320px; padding:32px 16px !important; background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNjAwIDU4MCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiPgogIDxkZWZzPgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJiZ0dyYWQiIHgxPSIwIiB5MT0iMCIgeDI9IjAiIHkyPSIxIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U4ZWFlYiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjQyJSIgc3RvcC1jb2xvcj0iI2M4Y2NjZSIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5Y2E0YTgiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImZhY2VHcmFkIiB4MT0iMCIgeTE9IjAiIHgyPSIwIiB5Mj0iMSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmOGY5ZjkiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9IiNkZmUzZTUiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYjljMGMzIi8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJzY3Jld0dyYWQiIHgxPSIwIiB5MT0iMCIgeDI9IjAiIHkyPSIxIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y3ZmJmYyIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzg3OTM5OCIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyNTJkMzEiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9InN3aXRjaEdyYWQiIHgxPSIwIiB5MT0iMCIgeDI9IjAiIHkyPSIxIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMwMzczYiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjM1JSIgc3RvcC1jb2xvcj0iIzBhMGQwZiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzMjM4M2IiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8cGF0dGVybiBpZD0idGV4dHVyZSIgd2lkdGg9IjQ2IiBoZWlnaHQ9IjQ2IiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPGNpcmNsZSBjeD0iOSIgY3k9IjEyIiByPSIxLjIiIGZpbGw9IiMzYTNmNDIiIG9wYWNpdHk9IjAuMTIiLz4KICAgICAgPGNpcmNsZSBjeD0iMzQiIGN5PSIzMiIgcj0iMSIgZmlsbD0iI2ZmZmZmZiIgb3BhY2l0eT0iMC4zMCIvPgogICAgPC9wYXR0ZXJuPgogICAgPGZpbHRlciBpZD0iYnJlYWtlclNoYWRvdyIgeD0iLTQwJSIgeT0iLTQwJSIgd2lkdGg9IjE4MCUiIGhlaWdodD0iMTgwJSI+CiAgICAgIDxmZURyb3BTaGFkb3cgZHg9IjAiIGR5PSI3IiBzdGREZXZpYXRpb249IjMuNSIgZmxvb2QtY29sb3I9IiMyMDI2MjkiIGZsb29kLW9wYWNpdHk9IjAuMzgiLz4KICAgIDwvZmlsdGVyPgogICAgCiAgPHN5bWJvbCBpZD0iYnJlYWtlciIgdmlld0JveD0iMCAwIDg2IDEyNiI+CiAgICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iODYiIGhlaWdodD0iMTI2IiByeD0iNSIgZmlsbD0idXJsKCNmYWNlR3JhZCkiIHN0cm9rZT0iIzc3N2Y4MyIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgICA8Y2lyY2xlIGN4PSI0MyIgY3k9IjE5IiByPSIxMSIgZmlsbD0idXJsKCNzY3Jld0dyYWQpIiBzdHJva2U9IiMzNzQwNDQiIHN0cm9rZS13aWR0aD0iMiIvPgogICAgPGxpbmUgeDE9IjM2IiB5MT0iMTkiIHgyPSI1MCIgeTI9IjE5IiBzdHJva2U9IiMzMDM4M2MiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgICA8cmVjdCB4PSIwIiB5PSIzNyIgd2lkdGg9Ijg2IiBoZWlnaHQ9IjEyIiBmaWxsPSIjYzcxZjI2Ii8+CiAgICA8bGluZSB4MT0iMjAiIHkxPSI1MiIgeDI9IjIwIiB5Mj0iNTgiIHN0cm9rZT0iIzhjOTQ5OCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KICAgIDxsaW5lIHgxPSI2NiIgeTE9IjUyIiB4Mj0iNjYiIHkyPSI1OCIgc3Ryb2tlPSIjOGM5NDk4IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgogICAgPHJlY3QgeD0iMjUiIHk9IjU5IiB3aWR0aD0iMzYiIGhlaWdodD0iNDMiIHJ4PSI3IiBmaWxsPSJ1cmwoI3N3aXRjaEdyYWQpIi8+CiAgICA8cmVjdCB4PSIyOSIgeT0iNTkiIHdpZHRoPSIyOCIgaGVpZ2h0PSI5IiByeD0iNCIgZmlsbD0iIzRlNTc1YiIgb3BhY2l0eT0iMC44Ii8+CiAgICA8bGluZSB4MT0iMTMiIHkxPSIxMTIiIHgyPSI3MyIgeTI9IjExMiIgc3Ryb2tlPSIjOGM5NDk4IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgogIDwvc3ltYm9sPgogIDwvZGVmcz4KCiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjE2MDAiIGhlaWdodD0iNTgwIiBmaWxsPSJ1cmwoI2JnR3JhZCkiLz4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI1ODAiIGZpbGw9InVybCgjdGV4dHVyZSkiLz4KCiAgPGc+PHVzZSBocmVmPSIjYnJlYWtlciIgeD0iNTMiIHk9IjE2NiIgd2lkdGg9IjgwIiBoZWlnaHQ9IjExNyIgZmlsdGVyPSJ1cmwoI2JyZWFrZXJTaGFkb3cpIi8+CiAgPHVzZSBocmVmPSIjYnJlYWtlciIgeD0iMTQwIiB5PSIxNjYiIHdpZHRoPSI4MCIgaGVpZ2h0PSIxMTciIGZpbHRlcj0idXJsKCNicmVha2VyU2hhZG93KSIvPgogIDx1c2UgaHJlZj0iI2JyZWFrZXIiIHg9IjIyNyIgeT0iMTY2IiB3aWR0aD0iODAiIGhlaWdodD0iMTE3IiBmaWx0ZXI9InVybCgjYnJlYWtlclNoYWRvdykiLz4KICA8dXNlIGhyZWY9IiNicmVha2VyIiB4PSIzMTQiIHk9IjE2NiIgd2lkdGg9IjgwIiBoZWlnaHQ9IjExNyIgZmlsdGVyPSJ1cmwoI2JyZWFrZXJTaGFkb3cpIi8+CiAgPHVzZSBocmVmPSIjYnJlYWtlciIgeD0iNDAxIiB5PSIxNjYiIHdpZHRoPSI4MCIgaGVpZ2h0PSIxMTciIGZpbHRlcj0idXJsKCNicmVha2VyU2hhZG93KSIvPgogIDx1c2UgaHJlZj0iI2JyZWFrZXIiIHg9IjQ4OCIgeT0iMTY2IiB3aWR0aD0iODAiIGhlaWdodD0iMTE3IiBmaWx0ZXI9InVybCgjYnJlYWtlclNoYWRvdykiLz4KICA8dXNlIGhyZWY9IiNicmVha2VyIiB4PSI1NzUiIHk9IjE2NiIgd2lkdGg9IjgwIiBoZWlnaHQ9IjExNyIgZmlsdGVyPSJ1cmwoI2JyZWFrZXJTaGFkb3cpIi8+CiAgPHVzZSBocmVmPSIjYnJlYWtlciIgeD0iNjYyIiB5PSIxNjYiIHdpZHRoPSI4MCIgaGVpZ2h0PSIxMTciIGZpbHRlcj0idXJsKCNicmVha2VyU2hhZG93KSIvPgogIDx1c2UgaHJlZj0iI2JyZWFrZXIiIHg9Ijc0OSIgeT0iMTY2IiB3aWR0aD0iODAiIGhlaWdodD0iMTE3IiBmaWx0ZXI9InVybCgjYnJlYWtlclNoYWRvdykiLz4KICA8dXNlIGhyZWY9IiNicmVha2VyIiB4PSI4MzYiIHk9IjE2NiIgd2lkdGg9IjgwIiBoZWlnaHQ9IjExNyIgZmlsdGVyPSJ1cmwoI2JyZWFrZXJTaGFkb3cpIi8+CiAgPHVzZSBocmVmPSIjYnJlYWtlciIgeD0iOTIzIiB5PSIxNjYiIHdpZHRoPSI4MCIgaGVpZ2h0PSIxMTciIGZpbHRlcj0idXJsKCNicmVha2VyU2hhZG93KSIvPgogIDx1c2UgaHJlZj0iI2JyZWFrZXIiIHg9IjEwMTAiIHk9IjE2NiIgd2lkdGg9IjgwIiBoZWlnaHQ9IjExNyIgZmlsdGVyPSJ1cmwoI2JyZWFrZXJTaGFkb3cpIi8+CiAgPHVzZSBocmVmPSIjYnJlYWtlciIgeD0iMTA5NyIgeT0iMTY2IiB3aWR0aD0iODAiIGhlaWdodD0iMTE3IiBmaWx0ZXI9InVybCgjYnJlYWtlclNoYWRvdykiLz4KICA8dXNlIGhyZWY9IiNicmVha2VyIiB4PSIxMTg0IiB5PSIxNjYiIHdpZHRoPSI4MCIgaGVpZ2h0PSIxMTciIGZpbHRlcj0idXJsKCNicmVha2VyU2hhZG93KSIvPgogIDx1c2UgaHJlZj0iI2JyZWFrZXIiIHg9IjEyNzEiIHk9IjE2NiIgd2lkdGg9IjgwIiBoZWlnaHQ9IjExNyIgZmlsdGVyPSJ1cmwoI2JyZWFrZXJTaGFkb3cpIi8+CiAgPHVzZSBocmVmPSIjYnJlYWtlciIgeD0iMTM1OCIgeT0iMTY2IiB3aWR0aD0iODAiIGhlaWdodD0iMTE3IiBmaWx0ZXI9InVybCgjYnJlYWtlclNoYWRvdykiLz4KICA8dXNlIGhyZWY9IiNicmVha2VyIiB4PSI1MyIgeT0iMzgyIiB3aWR0aD0iODAiIGhlaWdodD0iMTE3IiBmaWx0ZXI9InVybCgjYnJlYWtlclNoYWRvdykiLz4KICA8dXNlIGhyZWY9IiNicmVha2VyIiB4PSIxNDAiIHk9IjM4MiIgd2lkdGg9IjgwIiBoZWlnaHQ9IjExNyIgZmlsdGVyPSJ1cmwoI2JyZWFrZXJTaGFkb3cpIi8+CiAgPHVzZSBocmVmPSIjYnJlYWtlciIgeD0iMjI3IiB5PSIzODIiIHdpZHRoPSI4MCIgaGVpZ2h0PSIxMTciIGZpbHRlcj0idXJsKCNicmVha2VyU2hhZG93KSIvPgogIDx1c2UgaHJlZj0iI2JyZWFrZXIiIHg9IjMxNCIgeT0iMzgyIiB3aWR0aD0iODAiIGhlaWdodD0iMTE3IiBmaWx0ZXI9InVybCgjYnJlYWtlclNoYWRvdykiLz4KICA8dXNlIGhyZWY9IiNicmVha2VyIiB4PSI0MDEiIHk9IjM4MiIgd2lkdGg9IjgwIiBoZWlnaHQ9IjExNyIgZmlsdGVyPSJ1cmwoI2JyZWFrZXJTaGFkb3cpIi8+CiAgPHVzZSBocmVmPSIjYnJlYWtlciIgeD0iNDg4IiB5PSIzODIiIHdpZHRoPSI4MCIgaGVpZ2h0PSIxMTciIGZpbHRlcj0idXJsKCNicmVha2VyU2hhZG93KSIvPgogIDx1c2UgaHJlZj0iI2JyZWFrZXIiIHg9IjU3NSIgeT0iMzgyIiB3aWR0aD0iODAiIGhlaWdodD0iMTE3IiBmaWx0ZXI9InVybCgjYnJlYWtlclNoYWRvdykiLz4KICA8dXNlIGhyZWY9IiNicmVha2VyIiB4PSI2NjIiIHk9IjM4MiIgd2lkdGg9IjgwIiBoZWlnaHQ9IjExNyIgZmlsdGVyPSJ1cmwoI2JyZWFrZXJTaGFkb3cpIi8+CiAgPHVzZSBocmVmPSIjYnJlYWtlciIgeD0iNzQ5IiB5PSIzODIiIHdpZHRoPSI4MCIgaGVpZ2h0PSIxMTciIGZpbHRlcj0idXJsKCNicmVha2VyU2hhZG93KSIvPgogIDx1c2UgaHJlZj0iI2JyZWFrZXIiIHg9IjgzNiIgeT0iMzgyIiB3aWR0aD0iODAiIGhlaWdodD0iMTE3IiBmaWx0ZXI9InVybCgjYnJlYWtlclNoYWRvdykiLz4KICA8dXNlIGhyZWY9IiNicmVha2VyIiB4PSI5MjMiIHk9IjM4MiIgd2lkdGg9IjgwIiBoZWlnaHQ9IjExNyIgZmlsdGVyPSJ1cmwoI2JyZWFrZXJTaGFkb3cpIi8+CiAgPHVzZSBocmVmPSIjYnJlYWtlciIgeD0iMTAxMCIgeT0iMzgyIiB3aWR0aD0iODAiIGhlaWdodD0iMTE3IiBmaWx0ZXI9InVybCgjYnJlYWtlclNoYWRvdykiLz4KICA8dXNlIGhyZWY9IiNicmVha2VyIiB4PSIxMDk3IiB5PSIzODIiIHdpZHRoPSI4MCIgaGVpZ2h0PSIxMTciIGZpbHRlcj0idXJsKCNicmVha2VyU2hhZG93KSIvPgogIDx1c2UgaHJlZj0iI2JyZWFrZXIiIHg9IjExODQiIHk9IjM4MiIgd2lkdGg9IjgwIiBoZWlnaHQ9IjExNyIgZmlsdGVyPSJ1cmwoI2JyZWFrZXJTaGFkb3cpIi8+CiAgPHVzZSBocmVmPSIjYnJlYWtlciIgeD0iMTI3MSIgeT0iMzgyIiB3aWR0aD0iODAiIGhlaWdodD0iMTE3IiBmaWx0ZXI9InVybCgjYnJlYWtlclNoYWRvdykiLz4KICA8dXNlIGhyZWY9IiNicmVha2VyIiB4PSIxMzU4IiB5PSIzODIiIHdpZHRoPSI4MCIgaGVpZ2h0PSIxMTciIGZpbHRlcj0idXJsKCNicmVha2VyU2hhZG93KSIvPjwvZz4KCiAgPGc+PGxpbmUgeDE9IjE0ODIuMCIgeTE9IjAiIHgyPSIxNDgyLjAiIHkyPSI1ODAiIHN0cm9rZT0iI2M5MjgzMiIgc3Ryb2tlLXdpZHRoPSIxNCIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiLz4KICA8bGluZSB4MT0iMTUwNi4wIiB5MT0iMCIgeDI9IjE1MDYuMCIgeTI9IjU4MCIgc3Ryb2tlPSIjMTY4NzQ2IiBzdHJva2Utd2lkdGg9IjE0IiBzdHJva2UtbGluZWNhcD0iYnV0dCIvPgogIDxsaW5lIHgxPSIxNTMwLjAiIHkxPSIwIiB4Mj0iMTUzMC4wIiB5Mj0iNTgwIiBzdHJva2U9IiMxNzZhYTUiIHN0cm9rZS13aWR0aD0iMTQiIHN0cm9rZS1saW5lY2FwPSJidXR0Ii8+CiAgPGxpbmUgeDE9IjE0NzguNSIgeTE9IjAiIHgyPSIxNDc4LjUiIHkyPSI1ODAiIHN0cm9rZT0iI2ZmNzQ3OSIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0iYnV0dCIgb3BhY2l0eT0iMC41NSIvPgogIDxsaW5lIHgxPSIxNTAyLjUiIHkxPSIwIiB4Mj0iMTUwMi41IiB5Mj0iNTgwIiBzdHJva2U9IiM2OWM5ODkiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiIG9wYWNpdHk9IjAuNTUiLz4KICA8bGluZSB4MT0iMTUyNi41IiB5MT0iMCIgeDI9IjE1MjYuNSIgeTI9IjU4MCIgc3Ryb2tlPSIjNjdiOWU4IiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJidXR0IiBvcGFjaXR5PSIwLjU1Ii8+CiAgPGxpbmUgeDE9IjE0NjcuMCIgeTE9IjE0NSIgeDI9IjE1NDUuMCIgeTI9IjE0NSIgc3Ryb2tlPSIjNjk3Mjc2IiBzdHJva2Utd2lkdGg9IjE2IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KICA8bGluZSB4MT0iMTQ2Ny4wIiB5MT0iMjkwIiB4Mj0iMTU0NS4wIiB5Mj0iMjkwIiBzdHJva2U9IiM2OTcyNzYiIHN0cm9rZS13aWR0aD0iMTYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgogIDxsaW5lIHgxPSIxNDY3LjAiIHkxPSI0MzUiIHgyPSIxNTQ1LjAiIHkyPSI0MzUiIHN0cm9rZT0iIzY5NzI3NiIgc3Ryb2tlLXdpZHRoPSIxNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9nPgoKICA8cmVjdCB4PSIyMCIgeT0iNTgiIHdpZHRoPSIxNTYwIiBoZWlnaHQ9IjQ2NCIgcng9IjEwIiBmaWxsPSJub25lIiBzdHJva2U9IiM3MzdjODAiIHN0cm9rZS13aWR0aD0iOCIvPgogIDxyZWN0IHg9IjM5IiB5PSI3NyIgd2lkdGg9IjE1MjIiIGhlaWdodD0iNDI2IiByeD0iNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1vcGFjaXR5PSIwLjU1Ii8+Cjwvc3ZnPg=="); background-size:cover; background-position:center; background-repeat:no-repeat; overflow:hidden; } .block-cta-banner > div, .block-cta-banner .container, .block-cta-banner .cta-banner-inner, .block-cta-banner .inner{ box-sizing:border-box; position:static; width:calc(100% - 32px); max-width:none; min-width:0; margin:0; padding:28px 18px; background:#1f3684; border:12px solid #071a35; border-radius:20px; box-shadow:0 18px 36px rgba(0,0,0,0.35), inset 0 0 0 2px #10245f; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; } .block-cta-banner h2, .block-cta-banner h3{ box-sizing:border-box; width:100%; color:#FFFFFF !important; font-family:'Manrope', Arial, sans-serif !important; /* site heading font - no serif */ font-weight:800 !important; text-align:center; position:relative; margin:0; line-height:1.2; font-size:clamp(24px, 6vw, 32px); } .block-cta-banner h2::after, .block-cta-banner h3::after{ content:""; display:block; width:70px; height:4px; margin:18px auto 0; background:#ECB20C; border-radius:999px; flex-shrink:0; } .block-cta-banner p{ box-sizing:border-box; width:100%; color:#D8E7EF !important; font-family:'Inter', Arial, sans-serif !important; text-align:center; margin:18px 0 0; font-size:15px; line-height:1.5; } .block-cta-banner .cta-banner-buttons, .block-cta-banner .buttons{ display:flex; flex-wrap:wrap; flex-direction:column; justify-content:center; align-items:center; gap:20px; margin-top:26px; width:100%; } .block-cta-banner a{ display:inline-flex; align-items:center; justify-content:center; border-radius:999px; width:min(238px, 80vw); height:52px; font-family:'Inter', Arial, sans-serif; font-weight:700; font-size:15px; text-decoration:none; white-space:nowrap; padding:0 10px; margin:0; transition:transform 180ms ease, background-color 180ms ease, color 180ms ease, box-shadow 180ms ease; } .block-cta-banner a:first-of-type{ background:#ECB20C !important; color:#102b43 !important; border:none !important; } .block-cta-banner a:first-of-type:hover{ background:#f4c93f !important; color:#102b43 !important; } .block-cta-banner a:last-of-type{ background:transparent !important; color:#FFFFFF !important; border:3px solid #FFFFFF !important; } .block-cta-banner a:last-of-type:hover{ background:#FFFFFF !important; color:#1f3684 !important; } .block-cta-banner a:hover{ transform:translateY(-3px) scale(1.03); box-shadow:0 10px 18px rgba(16,36,95,0.45); } .block-cta-banner a:active{ transform:scale(0.98); box-shadow:none; } .block-cta-banner a:focus-visible{ outline:3px solid #ECB20C; outline-offset:3px; } @media (prefers-reduced-motion: reduce){ .block-cta-banner a{ transition:background-color 180ms ease, color 180ms ease; } .block-cta-banner a:hover, .block-cta-banner a:active{ transform:none; box-shadow:none; } } /* Tablet: wider card, a bit more height and padding, buttons side by side. */ @media (min-width:640px){ .block-cta-banner{ min-height:460px; padding:44px 24px !important; } .block-cta-banner > div, .block-cta-banner .container, .block-cta-banner .cta-banner-inner, .block-cta-banner .inner{ width:calc(100% - 48px); padding:40px 32px; } .block-cta-banner h2, .block-cta-banner h3{ font-size:clamp(28px, 4.5vw, 36px); } .block-cta-banner .cta-banner-buttons, .block-cta-banner .buttons{ flex-direction:row; } } /* Desktop: the spec's exact numbers - 580px banner, 1040x390 card, 60/70 padding. */ @media (min-width:900px){ .block-cta-banner{ min-height:580px; padding:56px !important; } .block-cta-banner > div, .block-cta-banner .container, .block-cta-banner .cta-banner-inner, .block-cta-banner .inner{ width:min(1040px, calc(100% - 80px)); min-height:390px; padding:60px 70px; } .block-cta-banner h2, .block-cta-banner h3{ font-size:clamp(32px, 3.2vw, 44px); } .block-cta-banner h2::after, .block-cta-banner h3::after{ width:84px; height:5px; margin-top:24px; } .block-cta-banner p{ font-size:18px; margin-top:22px; } .block-cta-banner .cta-banner-buttons, .block-cta-banner .buttons{ margin-top:34px; } .block-cta-banner a{ width:238px; height:60px; font-size:17px; } } /* Note: the hero's dark-section heading colour is left to the theme's own §7 default and not touched here. The CTA banner is the one deliberate exception (see the ".block-cta-banner" rules above), scoped narrowly to that block only per an explicit custom-design request - every other section still follows §10's "do not rewrite block internals" rule and only documented tokens are overridden in this file. */ /* Header logo, made bigger per request (sized larger, as a reference example of the target scale - no exact pixel spec given). No documented style.md token controls logo size, and there's no confirmed class name from an element inspector for this site's header logo yet, so this targets every common WordPress custom-logo selector at once as a best-effort, harmless guess - only one of these will actually match, the rest are no-ops. If the logo doesn't visibly grow after import, a screenshot with the header logo selected in the browser's inspector (like the ones used elsewhere in this project) will let this be corrected to the real class name. */ .custom-logo, .custom-logo-link img, .site-logo img, .site-branding img, header .logo img, .site-header .logo img{ height:64px !important; width:auto !important; max-height:none !important; } @media (max-width:640px){ .custom-logo, .custom-logo-link img, .site-logo img, .site-branding img, header .logo img, .site-header .logo img{ height:48px !important; } } /* FAQ archive page ("/faq/") and individual FAQ single-answer pages. Real classes confirmed from your element-inspector screenshots. These are theme archive/single templates for the FAQ collection (not a content block from this folder), styled the same way as the other confirmed-class fixes in this file - by targeting the exact class the theme already renders. */ /* 1. FAQ list item text - was red, now turns blue on hover. */ .faq-list-text{ transition:color .15s ease; } .faq-question-link:hover .faq-list-text, .faq-list-text:hover{ color:#1D4ED8 !important; /* primary brand blue */ } /* 2. The answer-count number ("12" in "12 answers") on the FAQ archive page - was red, now amber to match the site's existing amber accent token. */ .faq-archive-count span{ color:#EAB308 !important; /* amber */ } /* 3. The eyebrow number on the individual FAQ single-answer page - now blue. */ .faq-single-eyebrow-num{ color:#1D4ED8 !important; /* primary brand blue */ } /* 4. The drop-cap first letter on individual FAQ single-answer pages - was amber/orange, now navy blue. Scoped to the FAQ single-answer article wrapper so it can't affect first letters anywhere else on the site. */ .faq-single-inner p::first-letter, .faq-single p::first-letter{ color:#1E3A8A !important; /* navy blue */ } /* 5. "Adjacent questions" related-FAQ links (in the .faq-related sidebar on individual FAQ single-answer pages) - confirmed from your element inspector: the link's hover background was red (#E1315C). Now blue. */ .faq-related-item a:hover, .faq-related-list a:hover{ background-color:#1D4ED8 !important; /* primary brand blue */ } /* 6. The "Talk to a real human, today." CTA section at the bottom of individual FAQ single-answer pages (section.faq-cta) - confirmed from your element inspector: background was red (#E1315C). Now dark blue, matching the same dark blue already used on the announcement bar. */ .faq-cta{ background-color:#172554 !important; /* dark blue */ } /* 7. Inline links inside a FAQ answer's body text (e.g. "Outlet & Switch Installation" linking to that service page) - confirmed from your element inspector: text color was red (#E1315C). Now the same primary brand blue used elsewhere on this page. Scoped to the answer text so it doesn't affect links anywhere else on the site. */ .faq-single-answer a{ color:#1D4ED8 !important; /* primary brand blue */ } /* 8. The "Get a quote" button text in the faq-cta section (a.faq-cta-btn.is-primary) - confirmed from your element inspector: text was red (#E1315C) on a light background. Now the same primary brand blue. */ .faq-cta-btn.is-primary{ color:#1D4ED8 !important; /* primary brand blue */ } /* Cost calculator ("How many lights?" / "How many outlets?" number-entry step) - confirmed classes from your element inspector: the "lights"/"openings" unit label, the number input's typed digit, and the unselected preset buttons were all red (#E1315C). Now black, matching the calculator's other plain text. */ .local-calculator-input-unit{ color:#000000 !important; /* black */ } .local-calculator-input-wrap input[type="number"]{ color:#000000 !important; /* black */ } .local-calculator-preset:not(.is-selected){ color:#000000 !important; /* black */ } /* The SELECTED preset button (e.g. "3", "8 lights") - background matches the primary brand blue used as the CTA colour everywhere else on this site. Confirmed live via your own element-inspector screenshot: computed background-color is #1D4ED8, sourced from this rule. */ .local-calculator-preset.is-selected{ background-color:#1D4ED8 !important; /* primary brand blue */ border-color:#1D4ED8 !important; } /* Mobile-menu hamburger icon (span.hamburger, plus its ::before/::after bars) - confirmed from your element inspector: all three bars were red (#E1315C). Now dark blue. When the menu is open (button.nav-toggle gets aria-expanded="true"), the middle bar (the span's own background) is hidden so only the top/bottom bars remain to form the X - the standard hamburger-to-X pattern, matching what you asked for. */ .hamburger, .hamburger::before, .hamburger::after{ background-color:#172554 !important; /* dark blue */ } .nav-toggle[aria-expanded="true"] .hamburger{ background-color:transparent !important; } /* Sticky mobile CTA bar - the "Call" button. Confirmed structure: it's the sticky-cta bar's link with a "tel:" href (the "Get a Quote" button links elsewhere, so this targets only the phone button, not both). Background was red; now dark blue per your request. */ .sticky-cta a[href^="tel:"]{ background-color:#1E3685 !important; /* dark blue - site button default */ border-color:#1E3685 !important; } .sticky-cta a[href^="tel:"]:hover{ background-color:#1D4ED8 !important; /* primary brand blue - site button hover */ border-color:#1D4ED8 !important; } /* Header CTA button (a.header-cta-button, the phone-number pill next to the nav) - confirmed from your element inspector: background was primary blue (#1D4ED8). Now dark blue by default, switching to the primary blue on hover (a swap of the two colours already used everywhere else on site). */ .header-cta-button{ background-color:#1E3685 !important; /* dark blue */ border-color:#1E3685 !important; } .header-cta-button:hover{ background-color:#1D4ED8 !important; /* primary brand blue */ border-color:#1D4ED8 !important; } /* House rule: kill the theme's decorative ::before on process steps. Scoped to structural elements only - Font Awesome draws step icons through ::before on , so no blanket *::before here. */ .block-process-steps :where(ol, ul, li, div, h3, h4, p)::before, .wp-block-acf-process-steps :where(ol, ul, li, div, h3, h4, p)::before { content: none !important; display: none !important; } /* No gradient buttons - house rule. The theme paints several buttons with a background-image gradient; setting background-color alone doesn't remove it (the gradient layer sits on top), which is why buttons still looked gradient-filled. This strips the image layer from every known button class on this site plus the generic button selectors, leaving the solid colours defined above. Scoped to buttons only - section/hero background images are untouched. */ button, input[type="submit"], .btn, a.button, .wp-block-button__link, .pricing-card-cta, .quote-form-next, .quote-form-back, .quote-form-submit, .block-hero-button, .faq-cta-btn, .local-calculator-preset, .announcement-hat a, #top, .block-cta-banner a{ background-image:none !important; } /* multi-import:brand-layer:end */