/* ══════════════════════════════════════════════════════════════════════ DTR THEME — LIGHT default site-wide. Flips dark heroes/sections/CTAs to light, forces their text dark, keeps gold readable. Add "dtr-dark" to (nav toggle) to restore the original dark design. 2026-06-10. ══════════════════════════════════════════════════════════════════════ */ /* 1) Section surface -> light + local token redefinition */ html:not(.dtr-dark) :is(#pg-client-portal .pg-cta,#pg-client-portal .pg-hero,#pg-estimating .pg-cta,#pg-estimating .pg-hero,#pg-how-to .pg-cta,#pg-how-to .pg-hero,#pg-join-team .jt-hero,#pg-partners .pt-final,#pg-partners .pt-hero,#pg-portfolio .pf-final,#pg-portfolio .pf-hero,#pg-privacy-policy .pg-cta,#pg-team .tm-final,#pg-team .tm-hero,#pg-testimonials .ts-final,#pg-testimonials .ts-hero,#pg-warranty .wr-final,#pg-warranty .wr-hero,.ap-final,.ap-hero,.b23-final,.b23-hero,.bs-cta,.bs-hero,.bs-included,.bs-process,.ch-final,.ch-hero,.cp-final,.cp-hero,.cta-sec,.faq-cta-box,.fn-final,.fn-hero,.gallery,.guar,.hc-final,.hc-hero,.kt-faq-cta-box,.kt-final,.kt-hero,.oc-final,.oc-hero,.proc-cta,.rb-final,.rb-hero,.rd-final,.rd-hero,.rt-final,.rt-hero,.st-final,.st-hero,.wh-final,.wh-hero,.ac-final,.ac-faq-cta-box,.at-final,.at-faq-cta-box,.at-tree-cta,.bt-final,.bt-faq-cta-box,.bt-wp,.cn-hero,.gn-faq-cta-box,.gn-final,.ha-faq-cta-box,.ha-final,.mu-faq-cta-box,.mu-final,.sr-faq-cta-box,.sr-final){ --bg:#f4f6f8; --bg2:#eaeef2; --ivory:#1c2530; --slate:#5a6671; --mist:#e0e5ea; --warm:#eef1f4; --line:rgba(0,0,0,.10); --g10:rgba(0,0,0,.08); --gold-light:#a8781e; background:#f4f6f8 !important; color:#222c38 !important; } /* 2) Force descendant text dark (beats hardcoded white), except buttons/icons/media */ html:not(.dtr-dark) :is(#pg-client-portal .pg-cta,#pg-client-portal .pg-hero,#pg-estimating .pg-cta,#pg-estimating .pg-hero,#pg-how-to .pg-cta,#pg-how-to .pg-hero,#pg-join-team .jt-hero,#pg-partners .pt-final,#pg-partners .pt-hero,#pg-portfolio .pf-final,#pg-portfolio .pf-hero,#pg-privacy-policy .pg-cta,#pg-team .tm-final,#pg-team .tm-hero,#pg-testimonials .ts-final,#pg-testimonials .ts-hero,#pg-warranty .wr-final,#pg-warranty .wr-hero,.ap-final,.ap-hero,.b23-final,.b23-hero,.bs-cta,.bs-hero,.bs-included,.bs-process,.ch-final,.ch-hero,.cp-final,.cp-hero,.cta-sec,.faq-cta-box,.fn-final,.fn-hero,.gallery,.guar,.hc-final,.hc-hero,.kt-faq-cta-box,.kt-final,.kt-hero,.oc-final,.oc-hero,.proc-cta,.rb-final,.rb-hero,.rd-final,.rd-hero,.rt-final,.rt-hero,.st-final,.st-hero,.wh-final,.wh-hero,.ac-final,.ac-faq-cta-box,.at-final,.at-faq-cta-box,.at-tree-cta,.bt-final,.bt-faq-cta-box,.bt-wp,.cn-hero,.gn-faq-cta-box,.gn-final,.ha-faq-cta-box,.ha-final,.mu-faq-cta-box,.mu-final,.sr-faq-cta-box,.sr-final) *:not([class*="btn"]):not([class*="-btn"]):not(svg):not(path):not(use):not(img):not(input):not(select):not(textarea){ color:#2a3340 !important; -webkit-text-fill-color:currentColor !important; } /* 3) Gold italic accents + big numbers -> deep readable gold */ html:not(.dtr-dark) :is(#pg-client-portal .pg-cta,#pg-client-portal .pg-hero,#pg-estimating .pg-cta,#pg-estimating .pg-hero,#pg-how-to .pg-cta,#pg-how-to .pg-hero,#pg-join-team .jt-hero,#pg-partners .pt-final,#pg-partners .pt-hero,#pg-portfolio .pf-final,#pg-portfolio .pf-hero,#pg-privacy-policy .pg-cta,#pg-team .tm-final,#pg-team .tm-hero,#pg-testimonials .ts-final,#pg-testimonials .ts-hero,#pg-warranty .wr-final,#pg-warranty .wr-hero,.ap-final,.ap-hero,.b23-final,.b23-hero,.bs-cta,.bs-hero,.bs-included,.bs-process,.ch-final,.ch-hero,.cp-final,.cp-hero,.cta-sec,.faq-cta-box,.fn-final,.fn-hero,.gallery,.guar,.hc-final,.hc-hero,.kt-faq-cta-box,.kt-final,.kt-hero,.oc-final,.oc-hero,.proc-cta,.rb-final,.rb-hero,.rd-final,.rd-hero,.rt-final,.rt-hero,.st-final,.st-hero,.wh-final,.wh-hero,.ac-final,.ac-faq-cta-box,.at-final,.at-faq-cta-box,.at-tree-cta,.bt-final,.bt-faq-cta-box,.bt-wp,.cn-hero,.gn-faq-cta-box,.gn-final,.ha-faq-cta-box,.ha-final,.mu-faq-cta-box,.mu-final,.sr-faq-cta-box,.sr-final) :is(em,[class$="-num"],[class*="stat-num"],[class*="-stat-n"]){ color:#8a5a16 !important; -webkit-text-fill-color:#8a5a16 !important; background:none !important; } /* 4) Preserve real buttons */ html:not(.dtr-dark) :is(.btn-gold,.btn-dark,.btn-outline,.btn-outline-gold,[class*="-btn-primary"],[class*="-submit"],[class*="-btn"]){ -webkit-text-fill-color:currentColor !important; } /* 5) Footer -> light */ html:not(.dtr-dark) footer{ background:#eef1f4 !important; border-top:1px solid rgba(0,0,0,.08) !important; } html:not(.dtr-dark) footer :is(p,span,a,address,li,small){ color:#5a6671 !important; } html:not(.dtr-dark) footer :is(h1,h2,h3,h4,strong,b,[class*="brand"],[class*="logo"],[class*="name"]){ color:#1c2530 !important; } html:not(.dtr-dark) footer a:hover{ color:#8a5a16 !important; } /* 6) Kitchen "Free design" CTA — light form card + light inputs (flip leaves these dark-styled) */ html:not(.dtr-dark) .kt-final-form{ background:#ffffff !important; border:1px solid rgba(0,0,0,.08) !important; border-top:3px solid var(--gold) !important; box-shadow:0 12px 34px rgba(0,0,0,.07) !important; } html:not(.dtr-dark) .kt-final .kt-f{ background:#f5f6f8 !important; border:1px solid rgba(0,0,0,.14) !important; color:#222c38 !important; -webkit-text-fill-color:#222c38 !important; } html:not(.dtr-dark) .kt-final .kt-f::placeholder{ color:rgba(0,0,0,.42) !important; -webkit-text-fill-color:rgba(0,0,0,.42) !important; } html:not(.dtr-dark) .kt-final .kt-f option{ background:#ffffff !important; color:#222c38 !important; } html:not(.dtr-dark) .kt-final .kt-f:focus{ border-color:var(--gold-text) !important; } html:not(.dtr-dark) .kt-final-form-sub,html:not(.dtr-dark) .kt-final-fine{ color:#5a6671 !important; } html:not(.dtr-dark) .kt-faq-cta-box{ background:#ffffff !important; border:1px solid rgba(0,0,0,.08) !important; box-shadow:0 8px 24px rgba(0,0,0,.05) !important; } /* 7) Blog/how-to POST pages + blog index — dark heroes/CTAs/tips -> light (these pages now load this file) */ html:not(.dtr-dark) :is(.bp-hero,.bp-cta,.ht-hero,.ht-pro,.ht-step-tip,.tk-chatwrap){ --bg:#f4f6f8; --bg2:#eaeef2; --ivory:#1c2530; --slate:#5a6671; background:#f4f6f8 !important; color:#222c38 !important; } html:not(.dtr-dark) :is(.bp-hero,.bp-cta,.ht-hero,.ht-pro,.ht-step-tip,.tk-chatwrap) *:not([class*="btn"]):not([class*="-btn"]):not(svg):not(path):not(use):not(img):not(input):not(select):not(textarea){ color:#2a3340 !important; -webkit-text-fill-color:currentColor !important; } html:not(.dtr-dark) :is(.bp-hero,.bp-cta,.ht-hero,.ht-pro,.ht-step-tip,.tk-chatwrap) :is(em,[class$="-num"]){ color:#8a5a16 !important; -webkit-text-fill-color:#8a5a16 !important; background:none !important; } /* 8) Featured "most popular" pricing cards -> light w/ gold emphasis border (were #0a0f14) */ html:not(.dtr-dark) :is(.at-cost-tier-featured,.bs-tier-featured,.bt-tier-featured,.ch-tier-featured,.ha-tier-featured,.kt-tier-featured,.sr-tier-featured,.gn-pkg-featured,.sr-cmp-featured){ --bg:#fffdf7; --bg2:#f5f1e6; background:#fffdf7 !important; color:#222c38 !important; border:2px solid var(--gold,#b88723) !important; box-shadow:0 16px 44px rgba(184,135,35,.18) !important; } html:not(.dtr-dark) :is(.at-cost-tier-featured,.bs-tier-featured,.bt-tier-featured,.ch-tier-featured,.ha-tier-featured,.kt-tier-featured,.sr-tier-featured,.gn-pkg-featured,.sr-cmp-featured) *:not([class*="btn"]):not([class*="-btn"]):not([class*="badge"]):not(svg):not(path):not(use):not(img):not(input):not(select):not(textarea){ color:#2a3340 !important; -webkit-text-fill-color:currentColor !important; } html:not(.dtr-dark) :is(.at-cost-tier-featured,.bs-tier-featured,.bt-tier-featured,.ch-tier-featured,.ha-tier-featured,.kt-tier-featured,.sr-tier-featured,.gn-pkg-featured,.sr-cmp-featured) :is(em,[class$="-num"],[class*="check"],[class*="-ic"]){ color:#8a5a16 !important; -webkit-text-fill-color:#8a5a16 !important; } /* 9) Calculator / result panels (use var(--bg)) -> light card */ html:not(.dtr-dark) :is(.ha-math-col--result,.mu-calc-results){ --bg:#f4f6f8; --bg2:#eaeef2; --ivory:#1c2530; --slate:#5a6671; background:#f4f6f8 !important; color:#222c38 !important; border:1px solid rgba(0,0,0,.10) !important; box-shadow:0 12px 34px rgba(0,0,0,.07) !important; } html:not(.dtr-dark) :is(.ha-math-col--result,.mu-calc-results) *:not([class*="btn"]):not([class*="-btn"]):not(svg):not(path):not(use):not(img):not(input):not(select):not(textarea){ color:#2a3340 !important; -webkit-text-fill-color:currentColor !important; } html:not(.dtr-dark) :is(.ha-math-col--result,.mu-calc-results) :is(em,[class$="-num"],[class*="total"],[class*="result-fig"]){ color:#8a5a16 !important; -webkit-text-fill-color:#8a5a16 !important; } /* ── Dark-mode toggle button (injected into nav) ── */ .dtr-theme-btn{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:transparent; border:1px solid rgba(184,135,35,.45); color:var(--gold-light,#e0b862); cursor:pointer; font-size:14px; line-height:1; margin-right:8px; transition:background .2s,border-color .2s,transform .2s; } .dtr-theme-btn:hover{ background:rgba(184,135,35,.12); border-color:rgba(184,135,35,.75); transform:translateY(-1px); } /* ── Insights "preview" hero — for blog/how-to posts without a cover photo ── Turns the flat dark header into a designed gradient preview featuring the title + a one-line descriptor, so image-less posts look intentional. */ .bp-hero--preview, .ht-hero--preview{ position:relative; overflow:hidden; background: radial-gradient(62% 90% at 12% 6%, rgba(184,135,35,.22), transparent 55%), radial-gradient(52% 80% at 92% 104%, rgba(224,184,98,.15), transparent 55%), linear-gradient(140deg, #0a0f14 0%, #121a24 55%, #18212c 100%) !important; } .bp-hero--preview::before, .ht-hero--preview::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.45; background-image: linear-gradient(rgba(224,184,98,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(224,184,98,.07) 1px, transparent 1px); background-size:46px 46px; -webkit-mask-image:radial-gradient(130% 120% at 50% 0%, #000 42%, transparent 80%); mask-image:radial-gradient(130% 120% at 50% 0%, #000 42%, transparent 80%); } .bp-hero--preview .bp-hero-inner, .ht-hero--preview .ht-hero-inner{ position:relative; z-index:1; } .bp-preview-desc, .ht-preview-desc{ font-family:'DM Sans',sans-serif; font-size:clamp(15px,1.5vw,17px); line-height:1.65; color:rgba(250,250,250,.80); max-width:600px; margin:18px auto 4px; } /* Preview-hero background — higher specificity than the light-flip rule so it actually applies; light gradient keeps the flip's dark text readable. */ html:not(.dtr-dark) .bp-hero.bp-hero--preview, html:not(.dtr-dark) .ht-hero.ht-hero--preview{ background: radial-gradient(58% 90% at 10% 0%, rgba(184,135,35,.13), transparent 55%), radial-gradient(54% 85% at 94% 110%, rgba(224,184,98,.16), transparent 55%), linear-gradient(150deg, #fefcf6 0%, #f5f7f9 52%, #eef1f4 100%) !important; } html:not(.dtr-dark) .bp-hero.bp-hero--preview::before, html:not(.dtr-dark) .ht-hero.ht-hero--preview::before{ background-image: linear-gradient(rgba(184,135,35,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(184,135,35,.08) 1px, transparent 1px); opacity:.6; } /* Dark mode: rich navy gradient, light text restored. */ html.dtr-dark .bp-hero.bp-hero--preview, html.dtr-dark .ht-hero.ht-hero--preview{ background: radial-gradient(62% 90% at 12% 6%, rgba(184,135,35,.22), transparent 55%), linear-gradient(140deg, #0a0f14 0%, #121a24 55%, #18212c 100%) !important; } /* gold accent rule under the category eyebrow */ .bp-hero--preview .bp-cat, .ht-hero--preview .ht-eyebrow{ position:relative; } .bp-hero--preview .bp-cat::after, .ht-hero--preview .ht-eyebrow::after{ content:""; display:block; width:48px; height:2px; margin:12px auto 0; background:linear-gradient(90deg, #b88723, #e0b862); border-radius:2px; }