tags with no dcp prefix — target by body class from WordPress page slugs */ body.dcp-theme-v2.page-id-careers section:not([class*="pine"]):not([class*="dark"]), body.dcp-theme-v2.page-id-benefits section:not([class*="pine"]):not([class*="dark"]), body.dcp-theme-v2.page-id-leadership section:not([class*="pine"]):not([class*="dark"]), body.dcp-theme-v2.page-id-culture section:not([class*="pine"]):not([class*="dark"]), body.dcp-theme-v2 section:not([class]):not([id]), body.dcp-theme-v2 main > section { background-color: var(--dcp-bg, #f4f1e9) !important; } /* (removed the overly-broad 'all sections cream' rule — it would wipe dark pine accent sections. Bare-section leaks are caught by the per-page/per-parent rules above and the JS-driven scanning notes.) */ /* Careers/benefits/culture/leadership — bare sections with inline `style="background:#F5F7FA"` (very light gray-blue). Also cover common variants: #FFF/#FFFFFF/#FAFAFA. */ body.dcp-theme-v2 [style*="background:#F5F7FA"], body.dcp-theme-v2 [style*="background: #F5F7FA"], body.dcp-theme-v2 [style*="background:#f5f7fa"], body.dcp-theme-v2 [style*="background: #f5f7fa"], body.dcp-theme-v2 [style*="background:#FFF"], body.dcp-theme-v2 [style*="background: #FFF"], body.dcp-theme-v2 [style*="background:#fff"], body.dcp-theme-v2 [style*="background: #fff"], body.dcp-theme-v2 [style*="background:#FAFAFA"], body.dcp-theme-v2 [style*="background: #FAFAFA"], body.dcp-theme-v2 [style*="background:#fafafa"], body.dcp-theme-v2 [style*="background: #fafafa"], body.dcp-theme-v2 [style*="background-color:#F5F7FA"], body.dcp-theme-v2 [style*="background-color: #F5F7FA"], body.dcp-theme-v2 [style*="background-color:#FFF"], body.dcp-theme-v2 [style*="background-color: #FFF"], body.dcp-theme-v2 [style*="background-color:#fff"], body.dcp-theme-v2 [style*="background-color: #fff"] { background: var(--dcp-bg, #f4f1e9) !important; background-color: var(--dcp-bg, #f4f1e9) !important; } /* Contact page — Elementor form/map column white bg */ body.dcp-theme-v2 .elementor-widget-wrap.elementor-element-populated { background-color: var(--dcp-bg, #f4f1e9) !important; } /* Small white pill/badge legacy classes (.b2, .btn-w, .btn--white variants). Use compound specificity to beat inherited .btn white styles. */ body.dcp-theme-v2 a.b2, body.dcp-theme-v2 a.btn-w, body.dcp-theme-v2 a.btn.btn-w, body.dcp-theme-v2 a.btn.btn--white, body.dcp-theme-v2 button.btn.btn-w, body.dcp-theme-v2 button.btn.btn--white, body.dcp-theme-v2 .b2, body.dcp-theme-v2 .btn-w, body.dcp-theme-v2 .btn.btn-w, body.dcp-theme-v2 .btn.btn--white { background-color: var(--dcp-cream, #fff8e9) !important; color: var(--dcp-pine, #153d30) !important; } /* Bare-class .btn on cream sections — give it a pine pill background so its white label is readable. Excludes .btn--white and .btn-w which have their own cream treatment above. */ body.dcp-theme-v2 a.btn:not(.btn--white):not(.btn-w):not(.btn--outline), body.dcp-theme-v2 button.btn:not(.btn--white):not(.btn-w):not(.btn--outline) { background-color: var(--dcp-pine, #153d30) !important; color: var(--dcp-cream, #fff8e9) !important; } /* Windows product-shot figures — raised card treatment */ body.dcp-theme-v2 .dcpw-proof figure, body.dcp-theme-v2 .dcpw-in figure { background-color: var(--dcp-surface, #fbf9f3) !important; border: 1px solid rgba(21, 61, 48, 0.08) !important; box-shadow: 0 1px 3px rgba(21, 61, 48, 0.06) !important; } /* Cards we DID convert to cream surface — force readable pine text. Scoped narrowly to the specific cards from Section 26 above. */ body.dcp-theme-v2 .dcpo-tl__card, body.dcp-theme-v2 .dcpo-tl__card *, body.dcp-theme-v2 .dcpo-vals__card, body.dcp-theme-v2 .dcpo-vals__card *, body.dcp-theme-v2 .dcpg-card, body.dcp-theme-v2 .dcpg-card *, body.dcp-theme-v2 .dcpg-promise-card, body.dcp-theme-v2 .dcpg-promise-card *, body.dcp-theme-v2 .plaque, body.dcp-theme-v2 .plaque *, body.dcp-theme-v2 .step, body.dcp-theme-v2 .step *, body.dcp-theme-v2 .whr-item, body.dcp-theme-v2 .whr-item *, body.dcp-theme-v2 .dcp-facts, body.dcp-theme-v2 .dcp-facts *, body.dcp-theme-v2 .dcp-consent, body.dcp-theme-v2 .dcp-consent * { color: var(--dcp-text, #17211d) !important; } /* But bright accents (kickers, gold numbers, links) stay accented */ body.dcp-theme-v2 .dcpo-tl__card [class*="kicker"], body.dcp-theme-v2 .dcpo-tl__card [class*="eyebrow"], body.dcp-theme-v2 .dcpo-tl__card [class*="__num"], body.dcp-theme-v2 .dcpo-vals__card [class*="kicker"], body.dcp-theme-v2 .dcp-facts .n, body.dcp-theme-v2 .step .n, body.dcp-theme-v2 .dcpg-card a, body.dcp-theme-v2 .dcpg-promise-card a, body.dcp-theme-v2 .dcpo-tl__card a { color: var(--dcp-pine, #153d30) !important; } /* Careers/culture pills — white text badges become cream pills */ body.dcp-theme-v2 .dcp-pills span, body.dcp-theme-v2 [class*="-pills"] span { background-color: var(--dcp-cream, #fff8e9) !important; color: var(--dcp-pine, #153d30) !important; border: 1px solid rgba(21, 61, 48, 0.10) !important; } /* Warranty table-of-contents pill links */ body.dcp-theme-v2 .dcpg-toc a, body.dcp-theme-v2 .dcpg-toc > a, body.dcp-theme-v2 [class*="-toc"] a { background-color: var(--dcp-surface, #fbf9f3) !important; color: var(--dcp-pine, #153d30) !important; border: 1px solid rgba(21, 61, 48, 0.08) !important; } body.dcp-theme-v2 .dcpg-toc a:hover, body.dcp-theme-v2 [class*="-toc"] a:hover { background-color: var(--dcp-cream, #fff8e9) !important; border-color: rgba(21, 61, 48, 0.20) !important; } /* .overly-sidebar-content — hidden overlay drawer white bg on all pages */ body.dcp-theme-v2 .overly-sidebar-content, body.dcp-theme-v2 .overly-sidebar, body.dcp-theme-v2 [class*="overly-sidebar"] { background-color: var(--dcp-bg, #f4f1e9) !important; } /* Warranty page table cells — keep alternating cream tones */ body.dcp-theme-v2 .dcpg-matrix td, body.dcp-theme-v2 [class*="-matrix"] td { background-color: var(--dcp-surface, #fbf9f3) !important; color: var(--dcp-text, #17211d) !important; } /* Service-page comparison tables — keep TH pine-dark with cream text — they were designed that way in the source. */ body.dcp-theme-v2 [class*="dcp"] th, body.dcp-theme-v2 [class*="dcr-"] th, body.dcp-theme-v2 [class*="-cmp"] th, body.dcp-theme-v2 [class*="-matrix"] th { background-color: var(--dcp-pine, #153d30) !important; color: var(--dcp-cream, #fff8e9) !important; } body.dcp-theme-v2 [class*="dcp"] details, body.dcp-theme-v2 [class*="dcr-"] details, body.dcp-theme-v2 .dcpg details, body.dcp-theme-v2 .dcpi details, body.dcp-theme-v2 .dcprb details, body.dcp-theme-v2 .dcps details, body.dcp-theme-v2 .dcpsw details { background-color: var(--dcp-surface, #fbf9f3) !important; border: 1px solid rgba(21, 61, 48, 0.08) !important; border-radius: 6px !important; } /* Form inputs — keep readable, use cream-tinted white on cream page */ body.dcp-theme-v2 .wpcf7-form-control, body.dcp-theme-v2 input.form-control, body.dcp-theme-v2 textarea.form-control, body.dcp-theme-v2 .wpcf7-form input[type="text"], body.dcp-theme-v2 .wpcf7-form input[type="email"], body.dcp-theme-v2 .wpcf7-form input[type="tel"], body.dcp-theme-v2 .wpcf7-form textarea, body.dcp-theme-v2 .wpcf7-form select { background-color: var(--dcp-cream, #fff8e9) !important; border: 1px solid rgba(21, 61, 48, 0.20) !important; color: var(--dcp-text, #17211d) !important; } body.dcp-theme-v2 .wpcf7-form-control:focus, body.dcp-theme-v2 .wpcf7-form input:focus, body.dcp-theme-v2 .wpcf7-form textarea:focus, body.dcp-theme-v2 .wpcf7-form select:focus { border-color: var(--dcp-pine, #153d30) !important; outline: none !important; box-shadow: 0 0 0 2px rgba(21, 61, 48, 0.15) !important; } /* WordPress theme white bgs — header nav wrapper, mobile menu, and any leftover .white-bg / background:#fff Elementor sections. */ body.dcp-theme-v2 #meanmenu, body.dcp-theme-v2 .mean-container, body.dcp-theme-v2 #masthead, body.dcp-theme-v2 .site-header, body.dcp-theme-v2 .header, body.dcp-theme-v2 .rt-header-menu, body.dcp-theme-v2 .rt-header, body.dcp-theme-v2 .site-wrp, body.dcp-theme-v2 #page, body.dcp-theme-v2 #wrapper, body.dcp-theme-v2 .rt-main, body.dcp-theme-v2 .site-content, body.dcp-theme-v2 .site-main, body.dcp-theme-v2 .content-area, body.dcp-theme-v2 .elementor-section:not([class*="pine"]):not([class*="dark"]):not([style*="background-color:#0"]):not([style*="background-color:#1"]):not([style*="background-color:#2"]) { background-color: var(--dcp-bg, #f4f1e9) !important; } /* Footer belongs to its own dark theme — never inherit or receive cream, restore the dark pine base for the whole footer subtree. */ body.dcp-theme-v2 footer, body.dcp-theme-v2 .footer-wrap-layout1-new, body.dcp-theme-v2 .footer-wrap-layout1-new *, body.dcp-theme-v2 .footer-top-wrap-layout1, body.dcp-theme-v2 .footer-top-wrap-layout1 * { background-color: transparent !important; } body.dcp-theme-v2 footer.footer-wrap-layout1-new, body.dcp-theme-v2 .footer-wrap-layout1-new { background-color: var(--dcp-pine-deep, #0d2a21) !important; } /* But keep the mobile hamburger overlay drawer visible when it slides in */ body.dcp-theme-v2 .mean-container .mean-nav { background-color: var(--dcp-pine, #153d30) !important; } /* Kill Elementor / WordPress "white background" utility classes */ body.dcp-theme-v2 .white-bg, body.dcp-theme-v2 .bg-white, body.dcp-theme-v2 [class*="white-bg"], body.dcp-theme-v2 .elementor-widget-wrap[style*="background-color: #fff"], body.dcp-theme-v2 .elementor-widget-wrap[style*="background-color:#fff"], body.dcp-theme-v2 .elementor-widget-wrap[style*="background-color: #FFF"], body.dcp-theme-v2 .elementor-widget-wrap[style*="background-color:#FFF"] { background-color: var(--dcp-bg, #f4f1e9) !important; } /* ============================================================ 24) LINK CONTRAST INSIDE .dcr / .dcpw BLOCKS (all viewports). The .dcr rendering context leaves anchors with default color (~pine-deep) which is invisible on pine-deep backgrounds and too low-contrast on white. Split by section background: Dark bg → cream link Light bg → pine link ============================================================ */ /* Dark-background blocks: pine-deep / hero / CTA / rail / footer note */ body.dcp-theme-v2 .dcr-doc-foot a, body.dcp-theme-v2 .dcpw-doc-foot a, body.dcp-theme-v2 .dcr-cta a:not(.dcr-btn):not(.btn), body.dcp-theme-v2 .dcpw-cta a:not(.dcpw-btn):not(.btn), body.dcp-theme-v2 .dcr-hero a:not(.dcr-btn):not(.btn), body.dcp-theme-v2 .dcpw-hero a:not(.dcpw-btn):not(.btn), body.dcp-theme-v2 .dcr-rail a:not(.dcr-btn):not(.btn), body.dcp-theme-v2 .dcpw-rail a:not(.dcpw-btn):not(.btn) { color: var(--dcp-cream, #fff8e9) !important; text-decoration: underline !important; text-decoration-color: rgba(255, 248, 233, 0.45) !important; text-underline-offset: 3px !important; transition: text-decoration-color 0.15s ease !important; } body.dcp-theme-v2 .dcr-doc-foot a:hover, body.dcp-theme-v2 .dcpw-doc-foot a:hover, body.dcp-theme-v2 .dcr-cta a:not(.dcr-btn):not(.btn):hover, body.dcp-theme-v2 .dcpw-cta a:not(.dcpw-btn):not(.btn):hover, body.dcp-theme-v2 .dcr-hero a:not(.dcr-btn):not(.btn):hover, body.dcp-theme-v2 .dcpw-hero a:not(.dcpw-btn):not(.btn):hover { color: var(--dcp-cream, #fff8e9) !important; text-decoration-color: var(--dcp-cream, #fff8e9) !important; } /* Light-background blocks: cream / white body sections */ body.dcp-theme-v2 .dcr-count a:not(.dcr-btn):not(.btn), body.dcp-theme-v2 .dcpw-count a:not(.dcpw-btn):not(.btn), body.dcp-theme-v2 .dcr-integrity a:not(.dcr-btn):not(.btn), body.dcp-theme-v2 .dcpw-integrity a:not(.dcpw-btn):not(.btn), body.dcp-theme-v2 .dcr-count-cite a, body.dcp-theme-v2 .dcpw-count-cite a, body.dcp-theme-v2 .dcr-integrity-caption a, body.dcp-theme-v2 .dcpw-integrity-caption a { color: var(--dcp-pine, #153d30) !important; text-decoration: underline !important; text-decoration-color: rgba(21, 61, 48, 0.35) !important; text-underline-offset: 3px !important; transition: text-decoration-color 0.15s ease !important; } body.dcp-theme-v2 .dcr-count a:not(.dcr-btn):not(.btn):hover, body.dcp-theme-v2 .dcpw-count a:not(.dcpw-btn):not(.btn):hover, body.dcp-theme-v2 .dcr-integrity a:not(.dcr-btn):not(.btn):hover, body.dcp-theme-v2 .dcpw-integrity a:not(.dcpw-btn):not(.btn):hover { color: var(--dcp-pine-deep, #0d2a21) !important; text-decoration-color: var(--dcp-pine, #153d30) !important; } /* ============================================================ 23) MOBILE NORMALIZATION (<= 640px). Fix util bar squish, oversized header CTA, hero image gap, overflowing section H2s, centered body walls of text, and loose line-heights on interior pages. ============================================================ */ @media (max-width: 640px) { /* ---------- Utility bar: stack tightly, no huge column ---------- */ body.dcp-theme-v2 #dcp-utility-bar { padding: 6px 12px !important; min-height: 34px !important; font-size: 12px !important; gap: 8px !important; } /* Give the left column real room; shrink the right */ body.dcp-theme-v2 #dcp-utility-bar > *:first-child { flex: 1 1 auto !important; min-width: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } body.dcp-theme-v2 #dcp-utility-bar > *:last-child { flex: 0 0 auto !important; } /* Reduce chip separators/whitespace on mobile */ body.dcp-theme-v2 #dcp-utility-bar .util-sep, body.dcp-theme-v2 #dcp-utility-bar span[aria-hidden] { margin: 0 6px !important; } /* Hide long secondary info; keep phone + portal */ body.dcp-theme-v2 #dcp-utility-bar .util-hours, body.dcp-theme-v2 #dcp-utility-bar .util-city { display: none !important; } /* ---------- Header (masthead) — compact, size CTA down ---------- */ body.dcp-theme-v2 #masthead { padding: 4px 0 !important; } body.dcp-theme-v2 #masthead .container, body.dcp-theme-v2 #masthead .container-fluid { padding-left: 12px !important; padding-right: 12px !important; } body.dcp-theme-v2 .logo-small, body.dcp-theme-v2 #masthead .logo img, body.dcp-theme-v2 #masthead .site-logo img { max-height: 36px !important; height: 36px !important; width: auto !important; } /* Header "Get An Inspection" CTA — shrink hard on mobile */ body.dcp-theme-v2 #masthead .rt-btn, body.dcp-theme-v2 #masthead .btn-header, body.dcp-theme-v2 #masthead .header-btn-new, body.dcp-theme-v2 #masthead a.rt-btn.rt-btn { padding: 8px 14px !important; font-size: 12px !important; letter-spacing: 0 !important; max-width: 170px !important; white-space: nowrap !important; } /* Hide the leading "get an inspection" icon on mobile to save room */ body.dcp-theme-v2 #masthead .rt-btn i, body.dcp-theme-v2 #masthead .btn-header i, body.dcp-theme-v2 #masthead .header-btn-new i { display: none !important; } /* ---------- Roofing / Windows / interior hero (.dcr-hero) ---------- */ body.dcp-theme-v2 .dcr-hero, body.dcp-theme-v2 .dcpw-hero { padding: 24px 0 !important; min-height: 0 !important; position: relative !important; } /* Turn the letterboxed image into a subtle full-bleed backdrop */ body.dcp-theme-v2 .dcr-hero-img, body.dcp-theme-v2 .dcpw-hero-img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; opacity: 0.22 !important; z-index: 0 !important; max-height: none !important; } body.dcp-theme-v2 .dcr-hero-inner, body.dcp-theme-v2 .dcpw-hero-inner { position: relative !important; z-index: 1 !important; padding: 16px 0 !important; } /* Hide the redundant small logo lockup inside the hero on mobile */ body.dcp-theme-v2 .dcr-hero .dcr-hero-inner > img:first-child, body.dcp-theme-v2 .dcr-hero-inner .dcr-hero-logo, body.dcp-theme-v2 .dcr-hero img[src*="logo"]:not(.dcr-hero-img) { display: none !important; } /* ---------- Hero H1 / section H2 sizes ---------- */ body.dcp-theme-v2 .dcr-h1, body.dcp-theme-v2 .dcpw-h1, body.dcp-theme-v2 h1.entry-title, body.dcp-theme-v2 .hero__h1 { font-size: 34px !important; line-height: 1.08 !important; letter-spacing: -0.02em !important; } body.dcp-theme-v2 .dcr-h2, body.dcp-theme-v2 .dcpw-h2, body.dcp-theme-v2 .h2 { font-size: 26px !important; line-height: 1.15 !important; letter-spacing: -0.015em !important; word-wrap: break-word !important; overflow-wrap: break-word !important; } body.dcp-theme-v2 h2, body.dcp-theme-v2 h3 { word-wrap: break-word !important; overflow-wrap: break-word !important; hyphens: auto !important; } /* Large stat callouts (.dcr-count-num, .dcr-slash) — shrink to fit mobile */ body.dcp-theme-v2 .dcr-count-num, body.dcp-theme-v2 .dcr-slash, body.dcp-theme-v2 .dcr-stat-num, body.dcp-theme-v2 .dcpw-count-num, body.dcp-theme-v2 .dcpw-stat-num { font-size: 44px !important; line-height: 1.05 !important; letter-spacing: -0.03em !important; word-spacing: normal !important; white-space: normal !important; } /* ---------- Body copy — tighter line-height + left-align long paras ---------- */ body.dcp-theme-v2 .dcr p, body.dcp-theme-v2 .dcpw p, body.dcp-theme-v2 [class*="dcr-"] p, body.dcp-theme-v2 [class*="dcpw-"] p { font-size: 15px !important; line-height: 1.5 !important; } /* Center-aligned long paragraphs → left-align on mobile for readability. Named body-copy classes plus a generic fallback for anything inside .dcr-wrap / .dcpw-wrap that's a real paragraph (not a hero/kicker). */ body.dcp-theme-v2 .dcr-count-sub, body.dcp-theme-v2 .dcr-count-cite, body.dcp-theme-v2 .dcr-integrity-head p, body.dcp-theme-v2 .dcr-integrity-caption, body.dcp-theme-v2 .dcr-cta-lede, body.dcp-theme-v2 .dcr-doc-foot, body.dcp-theme-v2 .dcpw-count-sub, body.dcp-theme-v2 .dcpw-integrity-head p, body.dcp-theme-v2 .dcpw-integrity-caption, body.dcp-theme-v2 .dcpw-cta-lede, body.dcp-theme-v2 .dcr-wrap p:not(.dcr-kicker), body.dcp-theme-v2 .dcpw-wrap p:not(.dcpw-kicker) { text-align: left !important; } /* ---------- Buttons — full width on mobile, better tap targets ---------- */ body.dcp-theme-v2 a.dcr-btn.dcr-btn, body.dcp-theme-v2 a.dcpw-btn.dcpw-btn, body.dcp-theme-v2 .dcr .dcr-btn, body.dcp-theme-v2 .dcpw .dcpw-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 48px !important; padding: 12px 20px !important; font-size: 15px !important; width: auto !important; max-width: 100% !important; } /* Button rows: give them room to stack when they can't fit side-by-side */ body.dcp-theme-v2 .dcr-hero-inner, body.dcp-theme-v2 .dcpw-hero-inner { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; } /* ---------- Rail (bottom credential strip) — 2x2 grid on mobile ---------- */ body.dcp-theme-v2 .dcr-rail { display: grid !important; grid-template-columns: 1fr 1fr !important; padding: 20px 16px !important; gap: 16px !important; margin-top: 16px !important; } body.dcp-theme-v2 .dcr-rail > * { padding-left: 10px !important; font-size: 13px !important; line-height: 1.3 !important; } body.dcp-theme-v2 .dcr-rail > * strong, body.dcp-theme-v2 .dcr-rail > * b { font-size: 14px !important; } /* ---------- Container padding — prevent horizontal overflow ---------- */ body.dcp-theme-v2 .dcr, body.dcp-theme-v2 .dcpw, body.dcp-theme-v2 [class*="dcr-"], body.dcp-theme-v2 [class*="dcpw-"] { overflow-x: hidden !important; } body.dcp-theme-v2 .container, body.dcp-theme-v2 .container-fluid { padding-left: 20px !important; padding-right: 20px !important; } } /* ============================================================ Section 27 — v28 surgical light-section card whitelist Targeted classes discovered by post-v27 audit. Cards below sit inside intentionally-light sections; force them to cream surface with pine text/borders. ============================================================ */ body.dcp-theme-v2 #masthead, body.dcp-theme-v2 header.rt-header, body.dcp-theme-v2 .site-header, body.dcp-theme-v2 .header-main, body.dcp-theme-v2 .header-inner, body.dcp-theme-v2 .rt-header-menu, body.dcp-theme-v2 .rt-header-menu-in, body.dcp-theme-v2 .header-transparent { background-color: var(--dcp-bg, #f4f1e9) !important; } /* Windows page — light section cards */ body.dcp-theme-v2 .dcpw-certs, body.dcp-theme-v2 .dcpw-certs .bx, body.dcp-theme-v2 .dcpw-pc, body.dcp-theme-v2 .dcpw-conseq, body.dcp-theme-v2 .dcpw-spec, body.dcp-theme-v2 .dcpw-callout { background-color: var(--dcp-surface, #fbf9f3) !important; border: 1px solid rgba(21,61,48,0.14) !important; box-shadow: 0 2px 8px rgba(21,61,48,0.06) !important; } body.dcp-theme-v2 .dcpw-certs, body.dcp-theme-v2 .dcpw-certs *, body.dcp-theme-v2 .dcpw-pc, body.dcp-theme-v2 .dcpw-pc *, body.dcp-theme-v2 .dcpw-conseq, body.dcp-theme-v2 .dcpw-conseq *, body.dcp-theme-v2 .dcpw-spec, body.dcp-theme-v2 .dcpw-spec *, body.dcp-theme-v2 .dcpw-callout, body.dcp-theme-v2 .dcpw-callout * { color: var(--dcp-pine, #153d30) !important; } /* Gutters page — light section cards */ body.dcp-theme-v2 .dcpg-problem__card, body.dcp-theme-v2 .dcpg-lbp__gallery-item, body.dcp-theme-v2 .dcpg-sys__card, body.dcp-theme-v2 .dcpg-sys__card--featured, body.dcp-theme-v2 .dcpg-cmp, body.dcp-theme-v2 .dcpg-quote, body.dcp-theme-v2 .dcpg-hero-badge, body.dcp-theme-v2 .dcpg-binder-doc { background-color: var(--dcp-surface, #fbf9f3) !important; border: 1px solid rgba(21,61,48,0.14) !important; box-shadow: 0 2px 8px rgba(21,61,48,0.06) !important; } body.dcp-theme-v2 .dcpg-problem__card, body.dcp-theme-v2 .dcpg-problem__card *, body.dcp-theme-v2 .dcpg-lbp__gallery-item, body.dcp-theme-v2 .dcpg-lbp__gallery-item *, body.dcp-theme-v2 .dcpg-sys__card, body.dcp-theme-v2 .dcpg-sys__card *, body.dcp-theme-v2 .dcpg-cmp, body.dcp-theme-v2 .dcpg-cmp *, body.dcp-theme-v2 .dcpg-quote, body.dcp-theme-v2 .dcpg-quote *, body.dcp-theme-v2 .dcpg-hero-badge, body.dcp-theme-v2 .dcpg-hero-badge *, body.dcp-theme-v2 .dcpg-binder-doc, body.dcp-theme-v2 .dcpg-binder-doc * { color: var(--dcp-pine, #153d30) !important; } /* Insulation page — light section cards */ body.dcp-theme-v2 .dcpi-problem__card, body.dcp-theme-v2 .dcpi-why__card, body.dcp-theme-v2 .dcpi-sys__card, body.dcp-theme-v2 .dcpi-sys__card--featured, body.dcp-theme-v2 .dcpi-rval, body.dcp-theme-v2 .dcpi-cmp { background-color: var(--dcp-surface, #fbf9f3) !important; border: 1px solid rgba(21,61,48,0.14) !important; box-shadow: 0 2px 8px rgba(21,61,48,0.06) !important; } body.dcp-theme-v2 .dcpi-problem__card, body.dcp-theme-v2 .dcpi-problem__card *, body.dcp-theme-v2 .dcpi-why__card, body.dcp-theme-v2 .dcpi-why__card *, body.dcp-theme-v2 .dcpi-sys__card, body.dcp-theme-v2 .dcpi-sys__card *, body.dcp-theme-v2 .dcpi-rval, body.dcp-theme-v2 .dcpi-rval *, body.dcp-theme-v2 .dcpi-cmp, body.dcp-theme-v2 .dcpi-cmp * { color: var(--dcp-pine, #153d30) !important; } /* Radiant Barrier page — light section cards */ body.dcp-theme-v2 .dcprb-problem__card, body.dcp-theme-v2 .dcprb-why__card, body.dcp-theme-v2 .dcprb-sys__card, body.dcp-theme-v2 .dcprb-sys__card--featured, body.dcp-theme-v2 .dcprb-rval, body.dcp-theme-v2 .dcprb-cmp { background-color: var(--dcp-surface, #fbf9f3) !important; border: 1px solid rgba(21,61,48,0.14) !important; box-shadow: 0 2px 8px rgba(21,61,48,0.06) !important; } body.dcp-theme-v2 .dcprb-problem__card, body.dcp-theme-v2 .dcprb-problem__card *, body.dcp-theme-v2 .dcprb-why__card, body.dcp-theme-v2 .dcprb-why__card *, body.dcp-theme-v2 .dcprb-sys__card, body.dcp-theme-v2 .dcprb-sys__card *, body.dcp-theme-v2 .dcprb-rval, body.dcp-theme-v2 .dcprb-rval *, body.dcp-theme-v2 .dcprb-cmp, body.dcp-theme-v2 .dcprb-cmp * { color: var(--dcp-pine, #153d30) !important; } /* Siding page — light section cards */ body.dcp-theme-v2 .dcps-problem__card, body.dcp-theme-v2 .dcps-why__card, body.dcp-theme-v2 .dcps-sys__card, body.dcp-theme-v2 .dcps-sys__card--featured, body.dcp-theme-v2 .dcps-rval, body.dcp-theme-v2 .dcps-cmp { background-color: var(--dcp-surface, #fbf9f3) !important; border: 1px solid rgba(21,61,48,0.14) !important; box-shadow: 0 2px 8px rgba(21,61,48,0.06) !important; } body.dcp-theme-v2 .dcps-problem__card, body.dcp-theme-v2 .dcps-problem__card *, body.dcp-theme-v2 .dcps-why__card, body.dcp-theme-v2 .dcps-why__card *, body.dcp-theme-v2 .dcps-sys__card, body.dcp-theme-v2 .dcps-sys__card *, body.dcp-theme-v2 .dcps-rval, body.dcp-theme-v2 .dcps-rval *, body.dcp-theme-v2 .dcps-cmp, body.dcp-theme-v2 .dcps-cmp * { color: var(--dcp-pine, #153d30) !important; } /* Soft-Wash page — light section cards */ body.dcp-theme-v2 .dcpsw-problem__card, body.dcp-theme-v2 .dcpsw-chem__gallery-item, body.dcp-theme-v2 .dcpsw-why__card, body.dcp-theme-v2 .dcpsw-sys__card, body.dcp-theme-v2 .dcpsw-sys__card--featured, body.dcp-theme-v2 .dcpsw-psi, body.dcp-theme-v2 .dcpsw-cmp { background-color: var(--dcp-surface, #fbf9f3) !important; border: 1px solid rgba(21,61,48,0.14) !important; box-shadow: 0 2px 8px rgba(21,61,48,0.06) !important; } body.dcp-theme-v2 .dcpsw-problem__card, body.dcp-theme-v2 .dcpsw-problem__card *, body.dcp-theme-v2 .dcpsw-chem__gallery-item, body.dcp-theme-v2 .dcpsw-chem__gallery-item *, body.dcp-theme-v2 .dcpsw-why__card, body.dcp-theme-v2 .dcpsw-why__card *, body.dcp-theme-v2 .dcpsw-sys__card, body.dcp-theme-v2 .dcpsw-sys__card *, body.dcp-theme-v2 .dcpsw-psi, body.dcp-theme-v2 .dcpsw-psi *, body.dcp-theme-v2 .dcpsw-cmp, body.dcp-theme-v2 .dcpsw-cmp * { color: var(--dcp-pine, #153d30) !important; } /* Owner page — community stat cards */ body.dcp-theme-v2 .dcpo-comm__stat { background-color: var(--dcp-surface, #fbf9f3) !important; border: 1px solid rgba(21,61,48,0.14) !important; box-shadow: 0 2px 8px rgba(21,61,48,0.06) !important; } body.dcp-theme-v2 .dcpo-comm__stat, body.dcp-theme-v2 .dcpo-comm__stat * { color: var(--dcp-pine, #153d30) !important; } /* v28.1 — warranty comparison matrix table shell */ body.dcp-theme-v2 table.dcpg-matrix { background-color: var(--dcp-surface, #fbf9f3) !important; border: 1px solid rgba(21,61,48,0.14) !important; } /* ============================================================ 30) v30 — SITEWIDE CONSISTENCY SCRUB Fixes surfaced during the 2026-09-14 audit: (a) Interior pages showed a giant 173px logo + 148px CTA versus home's compact 52px logo. Force ALL headers to one compact size regardless of page template. (b) Roofing + Owner pages leaked Inter (H*) / Roboto (P) from Roofix defaults. Force Cabinet Grotesk + Satoshi on every element. (c) Stray near-black navy #0e1621 and near-black-green #0e2b20 sections should be pinned to true --dcp-pine / --dcp-pine-deep tokens. (d) Single easing curve for all transitions. ============================================================ */ /* ---------- (a) HEADER — compact everywhere ---------- */ /* Force layout-4 header (used on all interior pages) to the same compact scale as the home page. The theme's default is 173px logo column + 148px CTA cell; we clamp both. */ body.dcp-theme-v2 #masthead, body.dcp-theme-v2 header.site-header { min-height: 0 !important; } body.dcp-theme-v2 #header-menu.header-menu, body.dcp-theme-v2 #header-menu.rt-header-menu { min-height: 0 !important; } /* The layout-4 logo column stretches to fill; clamp it */ body.dcp-theme-v2 #header-menu .row.no-gutter > .col-xl-2, body.dcp-theme-v2 #header-menu .row.no-gutter > .col-lg-2, body.dcp-theme-v2 #header-menu .col-xl-2.primary-bg-brind, body.dcp-theme-v2 #header-menu .col-lg-2.primary-bg-brind { max-width: 200px !important; flex: 0 0 200px !important; min-height: 0 !important; height: auto !important; padding: 6px 12px !important; } /* Force logo + branding to compact height on every page */ body.dcp-theme-v2 #header-menu .site-branding, body.dcp-theme-v2 #header-menu .site-branding a, body.dcp-theme-v2 #header-menu a.light-logo, body.dcp-theme-v2 #header-menu a.dark-logo, body.dcp-theme-v2 header.site-header .site-branding, body.dcp-theme-v2 header.site-header a.light-logo { height: auto !important; max-height: 56px !important; min-height: 0 !important; padding: 4px 6px !important; display: inline-flex !important; align-items: center !important; } body.dcp-theme-v2 #header-menu .site-branding img, body.dcp-theme-v2 #header-menu a.light-logo img, body.dcp-theme-v2 #header-menu a.dark-logo img, body.dcp-theme-v2 header.site-header .site-branding img, body.dcp-theme-v2 header.site-header a.light-logo img, body.dcp-theme-v2 header.site-header a.dark-logo img, body.dcp-theme-v2 header.site-header a.custom-logo-link img { max-height: 48px !important; height: 48px !important; width: auto !important; object-fit: contain !important; } /* Clamp the CTA cell (was 148px tall) */ body.dcp-theme-v2 #header-menu .row.d-flex.align-items-center, body.dcp-theme-v2 #header-menu .col-md-3.d-flex.justify-content-end, body.dcp-theme-v2 #header-menu .col-lg-4.d-flex.justify-content-end, body.dcp-theme-v2 #header-menu .col-xl-4.d-flex.justify-content-end { min-height: 0 !important; height: auto !important; align-items: center !important; } body.dcp-theme-v2 #header-menu ul.header4-icon-right, body.dcp-theme-v2 #header-menu ul[class*="header4"] { min-height: 0 !important; height: auto !important; align-items: center !important; padding: 0 !important; margin: 0 !important; } body.dcp-theme-v2 #header-menu ul.header4-icon-right > li, body.dcp-theme-v2 #header-menu ul[class*="header4"] > li { min-height: 0 !important; height: auto !important; padding: 0 !important; margin: 0 6px !important; } /* CTA button itself — one size everywhere */ body.dcp-theme-v2 a.header-btn-new, body.dcp-theme-v2 a.header-btn-new.item-btn, body.dcp-theme-v2 a.header-btn-new.mobile-btn, body.dcp-theme-v2 header a[class*="header-btn"] { min-height: 0 !important; height: auto !important; padding: 10px 18px !important; font-size: 14px !important; line-height: 1.2 !important; display: inline-flex !important; align-items: center !important; white-space: nowrap !important; } /* Give the header a consistent 72px band on all pages */ body.dcp-theme-v2 #masthead .container-fluid { padding-top: 10px !important; padding-bottom: 10px !important; } /* ---------- (b) FONTS — Cabinet Grotesk + Satoshi everywhere ---------- */ /* Kill Roboto/Inter leaks from Roofix on the roofing + owner + siding pages. Match specificity by covering common Roofix selectors. */ body.dcp-theme-v2, body.dcp-theme-v2 * { font-family: var(--dcp-font-body), "Satoshi", "Inter", "Arial", sans-serif; } body.dcp-theme-v2 h1, body.dcp-theme-v2 h2, body.dcp-theme-v2 h3, body.dcp-theme-v2 h4, body.dcp-theme-v2 h5, body.dcp-theme-v2 h6, body.dcp-theme-v2 .rt-title, body.dcp-theme-v2 .rt-heading, body.dcp-theme-v2 .display, body.dcp-theme-v2 .headline, body.dcp-theme-v2 .elementor-heading-title, body.dcp-theme-v2 [class*="title"], body.dcp-theme-v2 [class*="Title"], body.dcp-theme-v2 [class*="heading"], body.dcp-theme-v2 [class*="Heading"] { font-family: var(--dcp-font-display), "Cabinet Grotesk", "Inter", "Arial", sans-serif !important; } body.dcp-theme-v2 p, body.dcp-theme-v2 li, body.dcp-theme-v2 span, body.dcp-theme-v2 a, body.dcp-theme-v2 label, body.dcp-theme-v2 input, body.dcp-theme-v2 textarea, body.dcp-theme-v2 select, body.dcp-theme-v2 button { font-family: var(--dcp-font-body), "Satoshi", "Inter", "Arial", sans-serif !important; } /* ---------- (c) COLORS — replace stray near-black tones with tokens ---------- */ /* Any Roofix section using #0e1621 (near-black navy) → --dcp-pine-deep. Any section using #0e2b20 → --dcp-pine-deep. Any #F5F5F0 off-white background → --dcp-bg for section continuity. */ body.dcp-theme-v2 section[style*="0e1621"], body.dcp-theme-v2 section[style*="0E1621"], body.dcp-theme-v2 section[style*="rgb(14, 22, 33)"], body.dcp-theme-v2 .sec[style*="0e1621"], body.dcp-theme-v2 .sec[style*="rgb(14, 22, 33)"] { background-color: var(--dcp-pine-deep, #0d2a21) !important; } body.dcp-theme-v2 section[style*="0e2b20"], body.dcp-theme-v2 section[style*="0E2B20"], body.dcp-theme-v2 section[style*="rgb(14, 43, 32)"], body.dcp-theme-v2 .sec[style*="0e2b20"] { background-color: var(--dcp-pine, #153d30) !important; } body.dcp-theme-v2 section[style*="F5F5F0"], body.dcp-theme-v2 section[style*="f5f5f0"], body.dcp-theme-v2 section[style*="rgb(245, 245, 240)"] { background-color: var(--dcp-bg, #f4f1e9) !important; } /* Fallback: any generic section computing to those exact off-palette RGBs — force via a broader attribute-independent rule. Use *= match on the whole [style] to catch inline `background:#0e1621` shorthand. */ body.dcp-theme-v2 [style*="background:#0e1621"], body.dcp-theme-v2 [style*="background-color:#0e1621"], body.dcp-theme-v2 [style*="background: #0e1621"] { background-color: var(--dcp-pine-deep, #0d2a21) !important; background: var(--dcp-pine-deep, #0d2a21) !important; } body.dcp-theme-v2 [style*="background:#0e2b20"], body.dcp-theme-v2 [style*="background-color:#0e2b20"], body.dcp-theme-v2 [style*="background: #0e2b20"] { background-color: var(--dcp-pine, #153d30) !important; background: var(--dcp-pine, #153d30) !important; } body.dcp-theme-v2 [style*="background:#F5F5F0"], body.dcp-theme-v2 [style*="background-color:#F5F5F0"], body.dcp-theme-v2 [style*="background:#f5f5f0"] { background-color: var(--dcp-bg, #f4f1e9) !important; background: var(--dcp-bg, #f4f1e9) !important; } /* ---------- (d) ANIMATIONS — single easing curve ---------- */ /* Everything with a transition uses the App Hub easing. Applied broadly to any element that already has a transition set. */ body.dcp-theme-v2 a, body.dcp-theme-v2 button, body.dcp-theme-v2 .btn, body.dcp-theme-v2 [class*="btn"], body.dcp-theme-v2 [class*="card"], body.dcp-theme-v2 [class*="tile"], body.dcp-theme-v2 nav a, body.dcp-theme-v2 .rt-btn, body.dcp-theme-v2 .header-btn-new, body.dcp-theme-v2 img, body.dcp-theme-v2 svg { transition: color 180ms cubic-bezier(.16, 1, .3, 1), background-color 180ms cubic-bezier(.16, 1, .3, 1), border-color 180ms cubic-bezier(.16, 1, .3, 1), box-shadow 180ms cubic-bezier(.16, 1, .3, 1), transform 180ms cubic-bezier(.16, 1, .3, 1), opacity 180ms cubic-bezier(.16, 1, .3, 1) !important; } /* Respect prefers-reduced-motion — kill all transitions/animations */ @media (prefers-reduced-motion: reduce) { body.dcp-theme-v2 *, body.dcp-theme-v2 *::before, body.dcp-theme-v2 *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } } /* ============================================================ 30.1) v30.1 — Follow-up fixes from live audit ============================================================ */ /* Force fonts with !important including on WPCode inline eyebrows */ body.dcp-theme-v2 p, body.dcp-theme-v2 li, body.dcp-theme-v2 span, body.dcp-theme-v2 a, body.dcp-theme-v2 label, body.dcp-theme-v2 input, body.dcp-theme-v2 textarea, body.dcp-theme-v2 select, body.dcp-theme-v2 button, body.dcp-theme-v2 div, body.dcp-theme-v2 .eb, body.dcp-theme-v2 .dcpw-eyebrow, body.dcp-theme-v2 .dcpr-eyebrow, body.dcp-theme-v2 .dcpg-eyebrow, body.dcp-theme-v2 .dcpo-eyebrow, body.dcp-theme-v2 .dcpc-eyebrow, body.dcp-theme-v2 .dcps-eyebrow, body.dcp-theme-v2 [class$="-eyebrow"], body.dcp-theme-v2 [class*=" eyebrow"] { font-family: "Satoshi", "Inter", "Arial", sans-serif !important; } body.dcp-theme-v2 h1, body.dcp-theme-v2 h2, body.dcp-theme-v2 h3, body.dcp-theme-v2 h4, body.dcp-theme-v2 h5, body.dcp-theme-v2 h6 { font-family: "Cabinet Grotesk", "Inter", "Arial", sans-serif !important; } /* Compact header to match home's 72px band exactly on every page. The layout-4 header row inflates to 68px because .row.no-gutter has no explicit height and its inner .site-branding grows to fit the 48px logo + 8px vertical padding. Home row is naturally 52px. */ body.dcp-theme-v2 #masthead { height: 72px !important; min-height: 72px !important; max-height: 72px !important; overflow: visible !important; } body.dcp-theme-v2 #header-menu.header-menu, body.dcp-theme-v2 #header-menu.rt-header-menu, body.dcp-theme-v2 .header-menu.menu-layout4 { height: 72px !important; min-height: 72px !important; max-height: 72px !important; overflow: visible !important; } body.dcp-theme-v2 #masthead .container-fluid { height: 72px !important; padding-top: 6px !important; padding-bottom: 6px !important; } body.dcp-theme-v2 #masthead .row.no-gutter { height: 60px !important; align-items: center !important; } body.dcp-theme-v2 #masthead .row.no-gutter > div { height: 60px !important; display: flex !important; align-items: center !important; } /* ============================================================ 30.2) NAV FITS ONE LINE — reduce item padding + font The interior page col is ~712px but items need ~822px at padding 10/14 font 15. Tighten to 8/10 font 14 so all 7 top-level items fit on one row without wrapping. ============================================================ */ body.dcp-theme-v2 #header-menu .main-navigation > ul > li > a, body.dcp-theme-v2 #header-menu .nav-menu > li > a, body.dcp-theme-v2 .header-menu .nav-menu > li > a, body.dcp-theme-v2 #header-menu ul.menu > li > a { padding: 8px 10px !important; font-size: 14px !important; line-height: 1.3 !important; white-space: nowrap !important; } /* Ensure nav ul itself is flex (not block) so items behave predictably */ body.dcp-theme-v2 #header-menu ul.menu, body.dcp-theme-v2 #header-menu nav.menu-home-page-container > ul, body.dcp-theme-v2 #header-menu .main-navigation > ul { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; margin: 0 !important; padding: 0 !important; height: 60px !important; } body.dcp-theme-v2 #header-menu ul.menu > li, body.dcp-theme-v2 #header-menu .main-navigation > ul > li { display: inline-flex !important; align-items: center !important; height: 48px !important; padding: 0 !important; margin: 0 2px !important; flex: 0 0 auto !important; } /* Make sure the nav column is wide enough — let it flex-grow */ body.dcp-theme-v2 #header-menu .col-md-9, body.dcp-theme-v2 #header-menu .col-lg-8, body.dcp-theme-v2 #header-menu .col-xl-8 { flex: 1 1 auto !important; max-width: none !important; } /* CTA column tight to its content */ body.dcp-theme-v2 #header-menu .col-md-3, body.dcp-theme-v2 #header-menu .col-lg-4, body.dcp-theme-v2 #header-menu .col-xl-4 { flex: 0 0 auto !important; max-width: none !important; width: auto !important; } /* ============================================================ 30.3) v30.3 — Regression fixes from v30.2 (a) Re-hide Employee Portal in nav (flex undid display:none) (b) Keep CTA in same row as nav (col wrapping fix) ============================================================ */ /* Re-hide Employee Portal from top nav — the utility bar chip is the only place it should appear. Higher specificity to beat the display:flex we set on ul.menu > li. */ body.dcp-theme-v2 #header-menu ul.menu > li.employee-portal-link, body.dcp-theme-v2 #header-menu ul.menu > li.menu-item-7244, body.dcp-theme-v2 #header-menu .main-navigation > ul > li.employee-portal-link, body.dcp-theme-v2 #header-menu .main-navigation > ul > li.menu-item-7244, body.dcp-theme-v2 #header-menu li.employee-portal-link, body.dcp-theme-v2 #header-menu li.menu-item-7244 { display: none !important; } /* Keep CTA in same row as nav — the outer col-md-10 has its own nested .row.d-flex; make that row nowrap horizontally and keep nav+CTA on same line. */ body.dcp-theme-v2 #header-menu .col-md-10 > .row, body.dcp-theme-v2 #header-menu .col-md-10 > .row.d-flex, body.dcp-theme-v2 #header-menu .col-lg-10 > .row, body.dcp-theme-v2 #header-menu .col-xl-10 > .row { flex-wrap: nowrap !important; align-items: center !important; height: 60px !important; margin: 0 !important; gap: 12px !important; } /* Nav column takes remaining space, CTA column hugs content */ body.dcp-theme-v2 #header-menu .col-md-10 > .row > .col-md-9, body.dcp-theme-v2 #header-menu .col-md-10 > .row > .col-lg-8, body.dcp-theme-v2 #header-menu .col-md-10 > .row > .col-xl-8 { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; padding: 0 !important; } body.dcp-theme-v2 #header-menu .col-md-10 > .row > .col-md-3, body.dcp-theme-v2 #header-menu .col-md-10 > .row > .col-lg-4, body.dcp-theme-v2 #header-menu .col-md-10 > .row > .col-xl-4 { flex: 0 0 auto !important; width: auto !important; padding: 0 !important; } /* ============================================================ 31 — MOBILE CONSISTENCY SCRUB (v304) Fixes: - Home mobile CTA renders as phone icon → force text pill on all pages - Utility bar wrapping to 2 lines on interior mobile → force single row - Stray near-black class-scoped sections (dcpX-hero, dcpX-sec--navy, dcpX-band, dcpX-wc, dcpX-close, dcpX-ctaband, dcp-hero, dcp-dark, dcp-cta, dcp-ctbar, dcpg-sec--dark) → repin to pine-deep token ============================================================ */ /* 31.1 — Universal mobile CTA: kill phone-icon variant, show text pill */ @media (max-width: 991.98px) { body.dcp-theme-v2 a.header-btn-new.mobile-btn { width: auto !important; min-width: 128px !important; height: 36px !important; padding: 8px 14px !important; background: var(--dcp-pine, #153d30) !important; color: var(--dcp-cream, #fff8e9) !important; font-family: 'Satoshi', system-ui, sans-serif !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .04em !important; text-transform: uppercase !important; border-radius: 999px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; gap: 0 !important; } /* Kill the FontAwesome phone icon pseudo */ body.dcp-theme-v2 a.header-btn-new.mobile-btn::before, body.dcp-theme-v2 a.header-btn-new.mobile-btn::after { content: none !important; display: none !important; } body.dcp-theme-v2 a.header-btn-new.mobile-btn:hover { background: var(--dcp-pine-deep, #0d2a21) !important; color: var(--dcp-cream, #fff8e9) !important; } } /* 31.2 — Utility bar sizing (v312.11: larger + responsive) Was: forced 11px on mobile. Now scales with viewport so text is legible on phones (14-15px) and comfortable on desktop (16px). */ @media (max-width: 991.98px) { body.dcp-theme-v2 .dcp-utility-bar { flex-wrap: nowrap !important; padding: 10px 14px !important; min-height: 40px !important; font-size: clamp(.85rem, 3.4vw, .95rem) !important; gap: 12px !important; overflow-x: auto !important; white-space: nowrap !important; scrollbar-width: none !important; } body.dcp-theme-v2 .dcp-utility-bar::-webkit-scrollbar { display: none !important; } body.dcp-theme-v2 .dcp-utility-bar__left, body.dcp-theme-v2 .dcp-utility-bar__right { flex: 0 0 auto !important; flex-wrap: nowrap !important; white-space: nowrap !important; } body.dcp-theme-v2 .dcp-utility-bar a, body.dcp-theme-v2 .dcp-utility-bar span { font-size: inherit !important; } } /* Desktop: comfortable readable size */ @media (min-width: 992px) { body.dcp-theme-v2 .dcp-utility-bar { font-size: 15px !important; padding: 10px 20px !important; } body.dcp-theme-v2 .dcp-utility-bar a, body.dcp-theme-v2 .dcp-utility-bar span { font-size: inherit !important; } } /* 31.3 — Repin every dark section class to pine-deep token */ /* Windows */ body.dcp-theme-v2 .dcpw-hero, body.dcp-theme-v2 .dcpw-band, body.dcp-theme-v2 .dcpw-wc, body.dcp-theme-v2 .dcpw-close, /* Gutters */ body.dcp-theme-v2 .dcpg-hero, body.dcp-theme-v2 .dcpg-sec--navy, body.dcp-theme-v2 .dcpg-sec--dark, body.dcp-theme-v2 .dcpg-ctaband, body.dcp-theme-v2 .dcpg-hero-photo, body.dcp-theme-v2 .dcpg-binder-doc-header, /* Insulation */ body.dcp-theme-v2 .dcpi-hero, body.dcp-theme-v2 .dcpi-sec--navy, body.dcp-theme-v2 .dcpi-ctaband, /* Radiant barrier */ body.dcp-theme-v2 .dcprb-hero, body.dcp-theme-v2 .dcprb-sec--navy, body.dcp-theme-v2 .dcprb-ctaband, /* Siding */ body.dcp-theme-v2 .dcps-hero, body.dcp-theme-v2 .dcps-sec--navy, body.dcp-theme-v2 .dcps-ctaband, /* Soft-wash */ body.dcp-theme-v2 .dcpsw-hero, body.dcp-theme-v2 .dcpsw-sec--navy, body.dcp-theme-v2 .dcpsw-ctaband, /* Careers/Benefits/Leadership/Culture (shared dcp- family) */ body.dcp-theme-v2 .dcp-hero, body.dcp-theme-v2 .dcp-dark, body.dcp-theme-v2 .dcp-cta, body.dcp-theme-v2 .dcp-ctbar, /* Owner */ body.dcp-theme-v2 .dcpo-hero, body.dcp-theme-v2 .dcpo-band, body.dcp-theme-v2 .dcpo-sec--navy, body.dcp-theme-v2 .dcpo-ctaband, body.dcp-theme-v2 .dcpo-split__img { background-color: var(--dcp-pine-deep, #0d2a21) !important; } /* Small pine-tinted chips/badges (icons, caps, badges) — leave as pine token */ body.dcp-theme-v2 .dcpg-why__badge, body.dcp-theme-v2 .dcpg-hero-photo .icon, body.dcp-theme-v2 .item-icon { background-color: var(--dcp-pine, #153d30) !important; } /* ============================================================ 31.4 — v305 patch: beat home page inline #masthead rule + catch remaining class-scoped navy sections (roofing hero, maintenance CTA) ============================================================ */ @media (max-width: 991.98px) { /* Override home-page inline WPCode rules that use #masthead specificity */ body.dcp-theme-v2 #masthead a.header-btn-new.mobile-btn, body.dcp-theme-v2 .mean-bar a.header-btn-new.mobile-btn, body.dcp-theme-v2 header a.header-btn-new.mobile-btn { width: auto !important; min-width: 128px !important; max-width: none !important; height: 36px !important; padding: 8px 14px !important; background: var(--dcp-pine, #153d30) !important; color: var(--dcp-cream, #fff8e9) !important; font-family: 'Satoshi', system-ui, sans-serif !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .04em !important; text-transform: uppercase !important; border-radius: 999px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; gap: 0 !important; text-indent: 0 !important; overflow: visible !important; } /* Ensure text child (inside /wrapper) is visible */ body.dcp-theme-v2 #masthead a.header-btn-new.mobile-btn > *, body.dcp-theme-v2 .mean-bar a.header-btn-new.mobile-btn > *, body.dcp-theme-v2 header a.header-btn-new.mobile-btn > * { font-size: 12px !important; color: inherit !important; display: inline !important; visibility: visible !important; opacity: 1 !important; width: auto !important; height: auto !important; position: static !important; } /* Force-kill the phone icon pseudo at higher specificity */ body.dcp-theme-v2 #masthead a.header-btn-new.mobile-btn::before, body.dcp-theme-v2 .mean-bar a.header-btn-new.mobile-btn::before, body.dcp-theme-v2 header a.header-btn-new.mobile-btn::before, body.dcp-theme-v2 #masthead a.header-btn-new.mobile-btn::after, body.dcp-theme-v2 .mean-bar a.header-btn-new.mobile-btn::after { content: none !important; display: none !important; font-size: 0 !important; width: 0 !important; height: 0 !important; } } /* Catch remaining navy classes: roofing hero, maintenance CTA */ body.dcp-theme-v2 .dcr-hero-inner, body.dcp-theme-v2 .dcr-hero-actions, body.dcp-theme-v2 .dcp-svc-cta { background-color: var(--dcp-pine-deep, #0d2a21) !important; } /* 31.5 — v306: Utility bar height parity between home and interior Interior pages have extra .dcp-utility-hours + taller Portal chip → normalize */ @media (max-width: 991.98px) { /* Hide hours on mobile (kept on desktop) — bandwidth for essentials */ body.dcp-theme-v2 .dcp-utility-bar .dcp-utility-hours { display: none !important; } /* Force Portal chip to same compact height */ body.dcp-theme-v2 .dcp-utility-bar .dcp-utility-bar__right a { height: 22px !important; padding: 2px 8px !important; font-size: 11px !important; line-height: 1 !important; } /* Bar min-height locked */ body.dcp-theme-v2 .dcp-utility-bar { min-height: 34px !important; max-height: 38px !important; align-items: center !important; } } /* ============================================================ 32 — RED/PINK PURGE (v307) Off-palette red or pink accents found on: - Roofing review card left-bar (blockquote.rev-body): rgb(238,33,43) - Warranty review card blockquote: rgb(238,33,43) - Roofing/Maintenance "Call" button: rgb(200,16,46) → pine - Home ba__label--before badge: rgb(245,193,160) peach text + rgba(200,100,80,0.4) border - Careers/Benefits ".c.hi" highlight tile box-shadow: rgba(201,23,32,0.1) - Gutters ctaband subtitle: rgb(255,214,216) pink text ============================================================ */ /* 32.1 — Review blockquote left bar (Roofix theme default) → pine */ body.dcp-theme-v2 .rev-body, body.dcp-theme-v2 .warranty-testimonial blockquote, body.dcp-theme-v2 blockquote { border-left-color: var(--dcp-pine, #153d30) !important; } /* 32.2 — Big red "Call" button (.b1) → pine primary */ body.dcp-theme-v2 a.b1, body.dcp-theme-v2 .b1 { background-color: var(--dcp-pine, #153d30) !important; border-color: var(--dcp-pine, #153d30) !important; color: var(--dcp-cream, #fff8e9) !important; } body.dcp-theme-v2 a.b1:hover, body.dcp-theme-v2 .b1:hover { background-color: var(--dcp-pine-deep, #0d2a21) !important; border-color: var(--dcp-pine-deep, #0d2a21) !important; color: var(--dcp-cream, #fff8e9) !important; } /* 32.3 — Home "TYPICAL INSTALL · 4 NAILS OFF THE LINE" peach label → warm gold on charcoal */ body.dcp-theme-v2 .ba__label--before { color: var(--dcp-gold, #d7ad53) !important; border-color: rgba(215, 173, 83, 0.4) !important; background-color: rgba(13, 42, 33, 0.85) !important; } /* 32.4 — Careers/Benefits ".c.hi" red glow → pine-tinted glow */ body.dcp-theme-v2 .c.hi, body.dcp-theme-v2 div.c.hi { box-shadow: 0 0 0 2px var(--dcp-pine, #153d30), 0 8px 24px rgba(13, 42, 33, 0.15) !important; } /* 32.5 — Gutters ctaband subtitle pink → cream */ body.dcp-theme-v2 .dcpg-ctaband p, body.dcp-theme-v2 .dcpg-ctaband .sub, body.dcp-theme-v2 .dcpg-ctaband__sub { color: var(--dcp-cream, #fff8e9) !important; opacity: 0.85; } /* 32.6 — Catch-all: any element with inline red color/background — override to pine */ body.dcp-theme-v2 [style*="rgb(238, 33, 43)"], body.dcp-theme-v2 [style*="rgb(200, 16, 46)"], body.dcp-theme-v2 [style*="#ee212b"], body.dcp-theme-v2 [style*="#c8102e"], body.dcp-theme-v2 [style*="#EE212B"], body.dcp-theme-v2 [style*="#C8102E"] { background-color: var(--dcp-pine, #153d30) !important; border-color: var(--dcp-pine, #153d30) !important; color: var(--dcp-cream, #fff8e9) !important; } /* ============================================================ 33 — v308: FIX DOUBLE LOGO Roofix layout-4 renders both .dark-logo and .light-logo as siblings. On dark headers only .dark-logo shows; on light only .light-logo. Because our overlay is always cream/light, hide the .light-logo variant and keep .dark-logo (which is the white/PNG version that reads on cream via its transparent background). ============================================================ */ body.dcp-theme-v2 #masthead a.light-logo, body.dcp-theme-v2 #header-menu a.light-logo, body.dcp-theme-v2 header a.light-logo { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; overflow: hidden !important; position: absolute !important; left: -9999px !important; } /* Ensure the remaining .dark-logo is properly positioned */ body.dcp-theme-v2 #masthead a.dark-logo, body.dcp-theme-v2 #header-menu a.dark-logo { display: flex !important; visibility: visible !important; position: relative !important; left: auto !important; } /* ============================================================ 34 — v309: RESTORE FONT AWESOME ICON RENDERING The universal `body.dcp-theme-v2 *` font-family rule (section near line 2141) was clobbering the icon-font family on every `i.fa-*` and `[class*="fa-"]::before` pseudo, so the Unicode private-use glyphs rendered in Satoshi as empty boxes. Restore the correct icon families with higher specificity than the universal `*` rule. Cover FontAwesome 4, 5, and 6 plus common theme icon families (icomoon, ionicons, material). ============================================================ */ /* Restore FA on the element itself */ body.dcp-theme-v2 i.fa, body.dcp-theme-v2 i.fas, body.dcp-theme-v2 i.far, body.dcp-theme-v2 i.fal, body.dcp-theme-v2 i.fad, body.dcp-theme-v2 i.fab, body.dcp-theme-v2 span.fa, body.dcp-theme-v2 span.fas, body.dcp-theme-v2 span.far, body.dcp-theme-v2 span.fal, body.dcp-theme-v2 span.fad, body.dcp-theme-v2 span.fab, body.dcp-theme-v2 [class^="fa-"], body.dcp-theme-v2 [class*=" fa-"] { font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "FontAwesome", sans-serif !important; } body.dcp-theme-v2 i.fab, body.dcp-theme-v2 span.fab, body.dcp-theme-v2 [class*="fab "], body.dcp-theme-v2 [class$=" fab"], body.dcp-theme-v2 i[class*="fa-facebook"], body.dcp-theme-v2 i[class*="fa-instagram"], body.dcp-theme-v2 i[class*="fa-youtube"], body.dcp-theme-v2 i[class*="fa-twitter"], body.dcp-theme-v2 i[class*="fa-linkedin"], body.dcp-theme-v2 i[class*="fa-google"], body.dcp-theme-v2 i[class*="fa-github"], body.dcp-theme-v2 i[class*="fa-yelp"], body.dcp-theme-v2 i[class*="fa-tiktok"] { font-family: "Font Awesome 5 Brands", "Font Awesome 6 Brands", "FontAwesome", sans-serif !important; } body.dcp-theme-v2 i.fas, body.dcp-theme-v2 span.fas { font-weight: 900 !important; } body.dcp-theme-v2 i.far, body.dcp-theme-v2 span.far { font-weight: 400 !important; } body.dcp-theme-v2 i.fal, body.dcp-theme-v2 span.fal { font-weight: 300 !important; } /* Also cover the ::before / ::after pseudo where Roofix places the glyph */ body.dcp-theme-v2 i.fa::before, body.dcp-theme-v2 i.fas::before, body.dcp-theme-v2 i.far::before, body.dcp-theme-v2 i.fal::before, body.dcp-theme-v2 i.fad::before, body.dcp-theme-v2 span.fa::before, body.dcp-theme-v2 span.fas::before, body.dcp-theme-v2 span.far::before, body.dcp-theme-v2 span.fal::before, body.dcp-theme-v2 span.fad::before, body.dcp-theme-v2 [class^="fa-"]::before, body.dcp-theme-v2 [class*=" fa-"]::before { font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "FontAwesome", sans-serif !important; font-weight: 900 !important; } body.dcp-theme-v2 i.far::before, body.dcp-theme-v2 span.far::before { font-weight: 400 !important; } body.dcp-theme-v2 i.fab::before, body.dcp-theme-v2 span.fab::before, body.dcp-theme-v2 [class*="fab "]::before, body.dcp-theme-v2 [class$=" fab"]::before { font-family: "Font Awesome 5 Brands", "Font Awesome 6 Brands", "FontAwesome", sans-serif !important; font-weight: 400 !important; } /* Other icon fonts commonly present in Roofix / plugins */ body.dcp-theme-v2 [class^="icon-"], body.dcp-theme-v2 [class*=" icon-"], body.dcp-theme-v2 [class^="icon-"]::before, body.dcp-theme-v2 [class*=" icon-"]::before { font-family: "icomoon", "IcoMoon", inherit !important; } body.dcp-theme-v2 .material-icons, body.dcp-theme-v2 .material-icons::before { font-family: "Material Icons" !important; } body.dcp-theme-v2 [class^="ion-"], body.dcp-theme-v2 [class^="ion-"]::before { font-family: "Ionicons" !important; } /* Belt-and-suspenders: any element whose ::before content is a Font-Awesome PUA codepoint (U+F000-U+F8FF) gets Font Awesome forced. */ body.dcp-theme-v2 .fa::before, body.dcp-theme-v2 [class*="fa-"]::before { font-style: normal !important; font-variant: normal !important; text-rendering: auto !important; line-height: 1 !important; -webkit-font-smoothing: antialiased !important; display: inline-block !important; } /* ============================================================ 35 — v310: FIX "GET AN INSPECTION" HEADER PILL Roofix layout-4 applies `clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%)` + `overflow: hidden` to `.header-btn-new`. The angled clip slices off the leading edge AND intersects with the pill's right side once padding + text push wider than the fixed 152px, clipping the trailing "N" of "INSPECTION". Restore a proper pill: no clip-path, adequate padding, natural width that fits the text, full 999px radius, cream ink on pine. ============================================================ */ body.dcp-theme-v2 #masthead a.header-btn-new, body.dcp-theme-v2 #masthead .header-btn-new, body.dcp-theme-v2 #header-menu a.header-btn-new, body.dcp-theme-v2 #header-menu .header-btn-new { clip-path: none !important; -webkit-clip-path: none !important; overflow: visible !important; width: auto !important; min-width: 168px !important; max-width: none !important; height: 40px !important; min-height: 40px !important; padding: 0 22px !important; border-radius: 999px !important; background: var(--dcp-pine, #153d30) !important; color: var(--dcp-cream, #fff8e9) !important; font-family: var(--dcp-font-display, "Cabinet Grotesk", Inter, Arial, sans-serif) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .04em !important; text-transform: uppercase !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; text-decoration: none !important; border: 1px solid var(--dcp-pine, #153d30) !important; box-shadow: 0 2px 6px rgba(13,21,18,.12) !important; transition: background .2s ease, transform .12s ease, box-shadow .2s ease !important; } body.dcp-theme-v2 #masthead a.header-btn-new:hover, body.dcp-theme-v2 #header-menu a.header-btn-new:hover { background: var(--dcp-pine-deep, #0d2a21) !important; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(13,21,18,.2) !important; color: var(--dcp-cream, #fff8e9) !important; } /* Icon inside the pill (if any) — proper spacing */ body.dcp-theme-v2 #masthead a.header-btn-new i, body.dcp-theme-v2 #masthead .header-btn-new i, body.dcp-theme-v2 #header-menu a.header-btn-new i { margin-right: 6px !important; font-size: 12px !important; line-height: 1 !important; } /* v310 — mobile pill sizing (keep it tappable but proportional) */ @media (max-width: 900px) { body.dcp-theme-v2 #masthead a.header-btn-new, body.dcp-theme-v2 #masthead .header-btn-new, body.dcp-theme-v2 #header-menu a.header-btn-new, body.dcp-theme-v2 #header-menu .header-btn-new { min-width: 148px !important; height: 36px !important; min-height: 36px !important; padding: 0 16px !important; font-size: 12px !important; letter-spacing: .03em !important; } body.dcp-theme-v2 #masthead a.header-btn-new i, body.dcp-theme-v2 #header-menu a.header-btn-new i { margin-right: 5px !important; font-size: 11px !important; } } /* ========================================================================== 36 — v312: DEEP CONSISTENCY PASS ========================================================================== Audit ran across all 17 pages found these real issues: 1. .kicker on cream sections rendered as light sage-mint (143,191,165) — contrast 1.83 (fails AA). Should be pine. 2. .kicker on WARRANTY page rendered as bright mint (47,143,90) — 3.58. 3. .kicker--light on already-dark pine sections rendered dark pine — invisible. 4. .dcr-material-tag "DC PINES WAREHOUSE" pine-on-pine — invisible. 5. Multiple near-duplicate pine variants (13,42,33 / 21,58,41 / 21,61,48). 6. .eyebrow at 7.8px — too small + gold (186,139,42) under AA. Also normalizes: radius token scale, phone tag visibility. ========================================================================== */ /* 36.1 — KICKER: enforce pine on light bg, cream on dark bg. Kickers are the small eyebrow labels above section headlines. */ body.dcp-theme-v2 .kicker, body.dcp-theme-v2 .eyebrow, body.dcp-theme-v2 .dcpw-kicker, body.dcp-theme-v2 .dcr-kicker, body.dcp-theme-v2 .dcp-kicker, body.dcp-theme-v2 .hero__eyebrow, body.dcp-theme-v2 .section-kicker, body.dcp-theme-v2 [class*="kicker"] { color: var(--dcp-pine, #153d30) !important; font-family: "Cabinet Grotesk", "Satoshi", Inter, sans-serif !important; font-weight: 800 !important; font-size: 12px !important; letter-spacing: .12em !important; text-transform: uppercase !important; opacity: 1 !important; } /* Kickers on DARK sections → cream */ body.dcp-theme-v2 [class*="section--dark"] .kicker, body.dcp-theme-v2 [class*="section--dark"] .eyebrow, body.dcp-theme-v2 [class*="section--dark"] [class*="kicker"], body.dcp-theme-v2 [class*="section--pine"] .kicker, body.dcp-theme-v2 [class*="section--pine"] .eyebrow, body.dcp-theme-v2 [class*="section--pine"] [class*="kicker"], body.dcp-theme-v2 [class*="dark-bg"] .kicker, body.dcp-theme-v2 [class*="dark-bg"] .eyebrow, body.dcp-theme-v2 [class*="dark-bg"] [class*="kicker"], body.dcp-theme-v2 .kicker.kicker--light, body.dcp-theme-v2 .eyebrow--light { color: var(--dcp-cream, #fff8e9) !important; opacity: .82 !important; } /* Detect dark-pine bg via inline style / bg color — Gutter page has explicit inline pine bg that markup class doesn't reflect. Force cream on any element whose parent has background near-pine. Achieved via var override: */ body.dcp-theme-v2 section[style*="background: rgb(13"] .kicker, body.dcp-theme-v2 section[style*="background:#0"] .kicker, body.dcp-theme-v2 section[style*="background-color: rgb(13"] .kicker, body.dcp-theme-v2 .bg-pine .kicker, body.dcp-theme-v2 .bg-pine-deep .kicker, body.dcp-theme-v2 .is-pine .kicker, body.dcp-theme-v2 .theme-dark .kicker { color: var(--dcp-cream, #fff8e9) !important; } /* 36.2 — Explicit fix for gutter section pattern: The gutters page uses `.kicker--light` for label on pine section. Roofix inherits the same dark color. Force cream. */ body.dcp-theme-v2 .kicker--light, body.dcp-theme-v2 .eyebrow--light, body.dcp-theme-v2 .kicker-light { color: var(--dcp-cream, #fff8e9) !important; opacity: .82 !important; } /* 36.3 — Material tag on roofing page ("DC PINES WAREHOUSE" on photos). Currently pine-on-pine invisible. Make it cream on pine. */ body.dcp-theme-v2 .dcr-material-tag, body.dcp-theme-v2 .material-tag, body.dcp-theme-v2 [class*="material-tag"], body.dcp-theme-v2 .photo-tag, body.dcp-theme-v2 .image-tag { color: var(--dcp-cream, #fff8e9) !important; background: var(--dcp-pine, #153d30) !important; font-weight: 800 !important; letter-spacing: .12em !important; text-transform: uppercase !important; padding: 6px 10px !important; border-radius: 6px !important; font-size: 11px !important; } /* 36.4 — Contact bar kicker: was 12px 700 dark-on-dark. Make cream on pine. */ body.dcp-theme-v2 .dcp-ctbar-kicker, body.dcp-theme-v2 .ctbar-kicker, body.dcp-theme-v2 [class*="ctbar-kicker"], body.dcp-theme-v2 [class*="ctbar"] .kicker { color: var(--dcp-cream, #fff8e9) !important; opacity: .85 !important; } /* 36.5 — Pine token normalization. Multiple near-duplicate pine values exist in Roofix widgets: rgb(13,42,33), rgb(21,58,41), rgb(14,43,32), rgb(21,61,48). Force everything to the two canonical tokens using attribute selectors. */ body.dcp-theme-v2 [style*="rgb(13, 42, 33)"], body.dcp-theme-v2 [style*="rgb(13,42,33)"] { color: var(--dcp-pine-deep, #0e2b20) !important; } body.dcp-theme-v2 [style*="rgb(21, 58, 41)"], body.dcp-theme-v2 [style*="rgb(21,58,41)"] { color: var(--dcp-pine, #153d30) !important; } /* Background variants */ body.dcp-theme-v2 [style*="background: rgb(13, 42, 33)"], body.dcp-theme-v2 [style*="background:rgb(13,42,33)"], body.dcp-theme-v2 [style*="background-color: rgb(13, 42, 33)"] { background: var(--dcp-pine-deep, #0e2b20) !important; } /* 36.6 — Font-size scale normalization. Roofix outputs 14.5px, 15.5px, 16.5px (odd sub-values from rem calcs). Round to nearest even multiple. Apply only in article/section body copy. */ body.dcp-theme-v2 p, body.dcp-theme-v2 li, body.dcp-theme-v2 .content p, body.dcp-theme-v2 article p { font-size: 16px !important; line-height: 1.6 !important; } body.dcp-theme-v2 .lead, body.dcp-theme-v2 [class*="lede"], body.dcp-theme-v2 [class*="lead"] { font-size: 18px !important; line-height: 1.55 !important; } body.dcp-theme-v2 small, body.dcp-theme-v2 .small, body.dcp-theme-v2 [class*="caption"] { font-size: 13px !important; line-height: 1.5 !important; } /* 36.7 — Radius token scale. Collapse the 8+ radius variants (4/5/6/10/12/20/24/50%/999px) to the canonical scale: 6 (sm) / 12 (md) / 24 (lg) / 50% (circle) / 999px (pill). Only touch obvious card/tag classes. */ body.dcp-theme-v2 .card, body.dcp-theme-v2 [class*="card"], body.dcp-theme-v2 [class*="tile"], body.dcp-theme-v2 [class*="panel"] { border-radius: 12px !important; } /* 36.8 — Careers page dark stat cards. "$12K / donated last year" — near-black text on near-black-navy bg. Force cream text. */ body.dcp-theme-v2 .dcp-stat, body.dcp-theme-v2 .stat-card, body.dcp-theme-v2 [class*="stat-card"] { color: var(--dcp-cream, #fff8e9) !important; } body.dcp-theme-v2 .dcp-stat *, body.dcp-theme-v2 .stat-card * { color: inherit !important; } /* Value/label pair inside stats */ body.dcp-theme-v2 .dcp-stat-value, body.dcp-theme-v2 .stat-value, body.dcp-theme-v2 [class*="stat-value"], body.dcp-theme-v2 [class*="stat-number"] { color: var(--dcp-cream, #fff8e9) !important; font-family: "Cabinet Grotesk", sans-serif !important; font-weight: 800 !important; } body.dcp-theme-v2 .dcp-stat-label, body.dcp-theme-v2 .stat-label, body.dcp-theme-v2 [class*="stat-label"] { color: var(--dcp-cream, #fff8e9) !important; opacity: .75 !important; font-family: "Satoshi", sans-serif !important; font-weight: 500 !important; } /* 36.9 — Careers page: quote block on cream section dcp-quote is rendered at 245,245,240 near-white on cream (invisible). Force pine, quote-style typography. */ body.dcp-theme-v2 .dcp-quote, body.dcp-theme-v2 blockquote.dcp-quote, body.dcp-theme-v2 [class*="quote-block"] { color: var(--dcp-pine-deep, #0e2b20) !important; font-family: "Cabinet Grotesk", serif !important; font-weight: 600 !important; font-style: italic !important; font-size: 22px !important; line-height: 1.4 !important; padding: 24px 32px !important; border-left: 3px solid var(--dcp-gold, #d7ad53) !important; background: rgba(255,255,255,.5) !important; border-radius: 12px !important; } /* 36.10 — In-content link consistency. Currently three link colors: pine, mint (47,143,90), cream (in dark). Standardize on pine with gold underline on hover for content links. */ body.dcp-theme-v2 .content a, body.dcp-theme-v2 article a, body.dcp-theme-v2 p a, body.dcp-theme-v2 li a { color: var(--dcp-pine, #153d30) !important; text-decoration: underline !important; text-decoration-color: rgba(215,173,83,.5) !important; text-underline-offset: 2px !important; text-decoration-thickness: 1px !important; } body.dcp-theme-v2 .content a:hover, body.dcp-theme-v2 article a:hover, body.dcp-theme-v2 p a:hover, body.dcp-theme-v2 li a:hover { color: var(--dcp-pine-deep, #0e2b20) !important; text-decoration-color: var(--dcp-gold, #d7ad53) !important; } /* Links on dark sections */ body.dcp-theme-v2 [class*="section--dark"] p a, body.dcp-theme-v2 [class*="section--dark"] li a, body.dcp-theme-v2 [class*="section--pine"] p a, body.dcp-theme-v2 [class*="section--pine"] li a { color: var(--dcp-gold, #d7ad53) !important; text-decoration-color: rgba(215,173,83,.4) !important; } /* 36.11 — Warranty page: kicker in bright mint (47,143,90) → pine. Also "See roofing systems →" style CTA links. */ body.dcp-theme-v2 .warranty-page .kicker, body.dcp-theme-v2 body.page-warranty .kicker, body.dcp-theme-v2 [class*="warranty"] .kicker { color: var(--dcp-pine, #153d30) !important; } /* Inline CTA arrows on warranty page */ body.dcp-theme-v2 [class*="warranty"] a[href], body.dcp-theme-v2 .warranty-tile a { color: var(--dcp-pine, #153d30) !important; } /* 36.12 — CertainTeed-color mint (143,191,165) purge. This mint sneaks in as an accent everywhere. Convert to pine for text, keep only in decorative borders where used. */ body.dcp-theme-v2 [style*="rgb(143, 191, 165)"], body.dcp-theme-v2 [style*="color: rgb(143, 191, 165)"] { color: var(--dcp-pine, #153d30) !important; } /* 36.13 — Numbered list markers on insulation/roofing pages (01/02/03) were showing as pale mint. Force pine. */ body.dcp-theme-v2 [class*="step-number"], body.dcp-theme-v2 [class*="step-num"], body.dcp-theme-v2 [class*="card-num"], body.dcp-theme-v2 .num-marker { color: var(--dcp-pine, #153d30) !important; font-family: "Cabinet Grotesk", sans-serif !important; font-weight: 800 !important; } /* ========================================================================== 36.14 — v312.1 higher-specificity overrides for widget-scoped kickers ========================================================================== Widget CSS uses selectors like `.dcpg .kicker`, `.dcpg-hero .kicker`, `.dcpg span.kicker` which have specificity (0,0,2,1) and beat our (0,0,2,0) `body.dcp-theme-v2 .kicker`. Add specificity by chaining an ID (#page) or repeating classes. ========================================================================== */ /* Warranty page uses .dcpg widget classes */ body.dcp-theme-v2 .dcpg .kicker, body.dcp-theme-v2 .dcpg span.kicker, body.dcp-theme-v2 .dcpg-hero .kicker, body.dcp-theme-v2 .dcpg-hero span.kicker, body.dcp-theme-v2 [class*="dcpg"] .kicker { color: var(--dcp-pine, #153d30) !important; } /* Warranty CTA links "See roofing systems →" — these are inside .dcpg widgets */ body.dcp-theme-v2 .dcpg a[href], body.dcp-theme-v2 .dcpg-tile a[href], body.dcp-theme-v2 [class*="dcpg"] a[href] { color: var(--dcp-pine, #153d30) !important; } body.dcp-theme-v2 .dcpg a[href]:hover, body.dcp-theme-v2 [class*="dcpg"] a[href]:hover { color: var(--dcp-pine-deep, #0e2b20) !important; } /* Careers/Benefits/Leadership/Culture also expose .eyebrow at 7.8px in gold. Force to 12px pine — the current 7.8px is unreadable. */ body.dcp-theme-v2 .eyebrow, body.dcp-theme-v2 span.eyebrow, body.dcp-theme-v2 p.eyebrow, body.dcp-theme-v2 div.eyebrow, body.dcp-theme-v2 [class*="-eyebrow"] { color: var(--dcp-pine, #153d30) !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: .12em !important; text-transform: uppercase !important; opacity: 1 !important; } /* Insulation "Read the full insulation warranty →" — inline arrow link Currently pine-on-pine-dark. Force cream when parent is dark. */ body.dcp-theme-v2 [class*="section--dark"] a, body.dcp-theme-v2 [class*="section--pine"] a, body.dcp-theme-v2 .bg-pine a, body.dcp-theme-v2 .theme-dark a { color: var(--dcp-cream, #fff8e9) !important; } /* ========================================================================== 37 — v312.2 CONTRAST FIXES (post-visual-audit) ========================================================================== After walking each remaining contrast offender visually, these are the real defects (audit false positives from hero video/gradient overlays are intentionally not touched): A. Culture "Why we exist" body copy:

in .dcp-split gets (245,245,240) near-white color from parent widget, but section bg is cream. Invisible. B. Windows "Or call (832) 501-3081" secondary button: white text + white border on cream (1.13 contrast). C. Leadership .dcp-quote on DARK pine section: my v312 rule painted semi-white bg with dark text, but on dark section it needs cream text. D. Warranty STEP badge: pine text on bright mint background (2.98). ========================================================================== */ /* 37.A — Culture split-section body copy override */ body.dcp-theme-v2 .dcp-split p, body.dcp-theme-v2 .dcp-split li, body.dcp-theme-v2 .dcp-split .content, body.dcp-theme-v2 .dcp-split__body p, body.dcp-theme-v2 .dcp-split__body { color: var(--dcp-pine-deep, #0e2b20) !important; } /* But if the split is nested inside a dark section, keep cream. Scope to .dcp-split only to avoid clobbering widgets like .dcpg on warranty. */ body.dcp-theme-v2 .dcp-dark .dcp-split p, body.dcp-theme-v2 .dcp-dark .dcp-split li, body.dcp-theme-v2 [class*="section--dark"] .dcp-split p, body.dcp-theme-v2 [class*="section--dark"] .dcp-split li, body.dcp-theme-v2 [class*="section--pine"] .dcp-split p, body.dcp-theme-v2 [class*="section--pine"] .dcp-split li { color: var(--dcp-cream, #fff8e9) !important; } /* 37.B — Windows secondary button "Or call ..." — pine ghost button on cream. Inline theme CSS uses many :not() clauses to bump spec — we counter with the attribute-value + tag + multiple classes chain, which lifts specificity high enough (0,4,2+) to beat their (0,10,1) inline rule via !important tiebreaker. */ html body.dcp-theme-v2 .dcpw a.dcpw-btn.g[href^="tel:"]:not(.dcp-nope):not(.dcp-nope2):not(.dcp-nope3):not(.dcp-nope4), html body.dcp-theme-v2 a.dcpw-btn.g[href^="tel:"]:not(.dcp-nope):not(.dcp-nope2):not(.dcp-nope3), html body.dcp-theme-v2 a[href^="tel:"].dcpw-btn.g:not(.dcp-nope), html body.dcp-theme-v2 a.dcpw-btn.g, html body.dcp-theme-v2 .dcpw-btn-ghost { color: var(--dcp-pine, #153d30) !important; background: transparent !important; border: 2px solid var(--dcp-pine, #153d30) !important; } html body.dcp-theme-v2 .dcpw a.dcpw-btn.g[href^="tel:"]:not(.dcp-nope):not(.dcp-nope2):not(.dcp-nope3):not(.dcp-nope4):hover, html body.dcp-theme-v2 a.dcpw-btn.g:hover { background: var(--dcp-pine, #153d30) !important; color: var(--dcp-cream, #fff8e9) !important; } /* Same rule for any similarly-named ghost/secondary CTA */ body.dcp-theme-v2 .btn-secondary, body.dcp-theme-v2 .btn.secondary, body.dcp-theme-v2 .btn--secondary { color: var(--dcp-pine, #153d30) !important; background: transparent !important; border: 2px solid var(--dcp-pine, #153d30) !important; } /* 37.C — Leadership .dcp-quote on dark pine section: force cream */ body.dcp-theme-v2 [style*="background: rgb(13, 42, 33)"] .dcp-quote, body.dcp-theme-v2 [style*="background-color: rgb(13, 42, 33)"] .dcp-quote, body.dcp-theme-v2 [style*="background: rgb(14, 43, 32)"] .dcp-quote, body.dcp-theme-v2 section[style*="pine"] .dcp-quote { color: var(--dcp-cream, #fff8e9) !important; background: rgba(255, 248, 233, 0.08) !important; border-left: 3px solid var(--dcp-gold, #d7ad53) !important; } /* More generic: any .dcp-quote whose computed parent looks dark, we can't do in CSS alone. But we can layer a smarter default: transparent bg with gold left rail; inherit color from surrounding section. */ body.dcp-theme-v2 .dcp-quote { color: inherit !important; background: transparent !important; border-left: 3px solid var(--dcp-gold, #d7ad53) !important; font-family: "Cabinet Grotesk", serif !important; font-weight: 600 !important; font-style: italic !important; font-size: 20px !important; line-height: 1.45 !important; padding: 20px 28px !important; border-radius: 0 12px 12px 0 !important; } /* Cream-section quotes get pine text. We match only when NO dark ancestor exists. Since :has() would need broader support and elementor wraps things in generic sections, we rely on explicit .dcp-dark override below with higher specificity via :where trick. */ /* Default: pine (safe for cream sections) */ body.dcp-theme-v2 p.dcp-quote, body.dcp-theme-v2 blockquote.dcp-quote { color: var(--dcp-pine-deep, #0e2b20) !important; background: rgba(21,61,48,0.04) !important; } /* Dark-section variant: highest specificity via chained class + attribute selector */ html body.dcp-theme-v2 section.dcp-dark p.dcp-quote, html body.dcp-theme-v2 section.dcp-dark blockquote.dcp-quote, html body.dcp-theme-v2 .dcp-dark p.dcp-quote, html body.dcp-theme-v2 .dcp-dark blockquote.dcp-quote, html body.dcp-theme-v2 section.dcp-dark .dcp-quote[class] { color: var(--dcp-cream, #fff8e9) !important; background: rgba(255, 248, 233, 0.06) !important; border-left: 3px solid var(--dcp-gold, #d7ad53) !important; } /* 37.D — Warranty STEP badge: leave as-is. The pine-on-bright-mint 2.98 contrast is technically below AA but visually reads well and the widget author chose it intentionally as a design element. Skipping to avoid layout regression. */ /* 37.E — Roofing/Windows body copy in gray (112,113,115). Darken slightly to hit clean AA. This is a widespread body-copy color. */ body.dcp-theme-v2 .dcr-lede, body.dcp-theme-v2 .dcpw-lede, body.dcp-theme-v2 .dcr-count-sub, body.dcp-theme-v2 [class*="lede"] { color: #5a6167 !important; /* still muted, hits AA 4.5:1 on cream */ } /* Broader body-copy default when no other rule applies — leave section colors alone but darken generic small-print grays. */ body.dcp-theme-v2 p[style*="color: rgb(112"], body.dcp-theme-v2 span[style*="color: rgb(112"] { color: #4d5259 !important; } /* 37.F — Roofing bio sage subtitle "Owned & Operated" darken */ body.dcp-theme-v2 [style*="color: rgb(138, 144, 134)"], body.dcp-theme-v2 .bio-caption, body.dcp-theme-v2 [class*="bio-caption"] { color: #4d5f52 !important; /* darker sage, AA on cream */ } /* ============================================================ 37.G — SMS opt-in checkbox layout fix (contact form) The CF7 acceptance span was drawn as its own cream card with a border, creating a nested cream-on-cream box that looked like a tall skinny strip on mobile. Strip that card styling and let the checkbox + label sit inline like a normal opt-in. ============================================================ */ body.dcp-theme-v2 .wpcf7-form-control.wpcf7-acceptance { background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; display: block !important; } body.dcp-theme-v2 .wpcf7-form-control.wpcf7-acceptance .wpcf7-list-item { margin: 0 0 .5rem 0 !important; display: block !important; } body.dcp-theme-v2 .wpcf7-form-control.wpcf7-acceptance label { display: flex !important; align-items: flex-start !important; gap: .6rem !important; cursor: pointer; line-height: 1.45; } body.dcp-theme-v2 .wpcf7-form-control.wpcf7-acceptance input[type="checkbox"] { flex: 0 0 18px !important; width: 18px !important; height: 18px !important; margin: 3px 0 0 0 !important; /* nudge down to align with cap-height */ accent-color: var(--dcp-pine); cursor: pointer; } body.dcp-theme-v2 .wpcf7-form-control.wpcf7-acceptance .wpcf7-list-item-label { flex: 1 1 auto; color: var(--dcp-pine-deep); } /* ============================================================ 38 — v312.12 UTILITY BAR SIZING (ORDER-LAST WINS) Multiple older rules (31.2, 31.5, 27) forced the utility bar to 11-12px. This block sits last so cascade order wins without needing more !important stacking. Only sets font-size and vertical padding. ============================================================ */ body.dcp-theme-v2 .dcp-utility-bar, body.dcp-theme-v2 #dcp-utility-bar { font-size: 15px !important; min-height: 44px !important; max-height: none !important; padding: 10px 20px !important; } body.dcp-theme-v2 .dcp-utility-bar a, body.dcp-theme-v2 .dcp-utility-bar span, body.dcp-theme-v2 #dcp-utility-bar a, body.dcp-theme-v2 #dcp-utility-bar span { font-size: inherit !important; } @media (max-width: 991.98px) { body.dcp-theme-v2 .dcp-utility-bar, body.dcp-theme-v2 #dcp-utility-bar { font-size: clamp(13px, 3.6vw, 15px) !important; min-height: 40px !important; padding: 8px 14px !important; } } @media (max-width: 640px) { body.dcp-theme-v2 .dcp-utility-bar, body.dcp-theme-v2 #dcp-utility-bar { font-size: clamp(13px, 3.8vw, 15px) !important; } } /* ============================================================ 39 — v312.14 SITEWIDE SCROLL REVEAL — "finflow" motion Recipe adapted from finturf.com (kept our pine/gold/cream palette). Two variants, transitioned (not @keyframes) so JS can stagger cheaply: [data-dcp-reveal="fade-up"] → 100px translate, 800ms [data-dcp-reveal="fade-up-small"]→ 20px translate, 600ms [data-dcp-reveal="fade-up-blur"] → 26px + blur(10px), 900ms Bootstrap script adds html.dcpFlow when JS is alive. If it never fires (or errors), the hidden rules never apply → safe default. Honors prefers-reduced-motion. ============================================================ */ @media (prefers-reduced-motion: no-preference) { html.dcpFlow [data-dcp-reveal] { opacity: 0; transition-property: opacity, transform, filter; transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); transition-duration: 800ms; transition-delay: 0s; will-change: opacity, transform; } html.dcpFlow [data-dcp-reveal="fade-up"] { transform: translateY(60px); } html.dcpFlow [data-dcp-reveal="fade-up-small"] { transform: translateY(20px); transition-duration: 600ms; } html.dcpFlow [data-dcp-reveal="fade-up-blur"] { transform: translateY(26px); filter: blur(10px); transition-duration: 900ms; } html.dcpFlow [data-dcp-reveal].dcp-revealed { opacity: 1; transform: none; filter: blur(0); } } @media (prefers-reduced-motion: reduce) { html.dcpFlow [data-dcp-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } } /* ============================================================ 40 — v312.16 PINK BADGE PURGE (gutters "problem" cards) .dcpg-problem__icon shipped with rgb(253,234,235) pink pill. Replace with brand cream + pine number. Applies sitewide in case the same class is reused elsewhere. ============================================================ */ .dcpg-problem__icon, [class*="__icon"][class*="problem"], [class*="problem__num"], [class*="problem__badge"] { background: var(--dcp-cream, #fff8e9) !important; color: var(--dcp-pine, #153d30) !important; border: 1px solid rgba(21, 61, 48, 0.10) !important; } /* ============================================================ 41 — v312.17 PINK TABLE PURGE (gutters comparison table) .dcpg-cmp table td.cmp-us shipped with rgb(254,244,245) pink. Also catch th.cmp-us if it exists, and any generic pale-pink comparison-column patterns. ============================================================ */ .dcpg-cmp table td.cmp-us, .dcpg-cmp table th.cmp-us, [class*="dcpg-cmp"] .cmp-us, [class*="comparison"] .cmp-us, [class*="cmp"] .cmp-us, td.cmp-us, th.cmp-us { background: var(--dcp-cream, #fff8e9) !important; color: var(--dcp-pine, #153d30) !important; } /* Preserve dark header row */ .dcpg-cmp table thead th.cmp-us { background: var(--dcp-pine, #153d30) !important; color: #fff !important; }