/* ====================================================== LIGHT THEME — client design alternative Link AFTER /css/global.css in ====================================================== */ body { background: #ffffff !important; color: #0d0d0d !important; } .section-h { color: #0d0d0d; } .eyebrow { color: #5a7800; } /* ─── Content Body ─── */ .content-wrap { background: #ffffff; } .content-body h2 { color: #0d0d0d !important; } .content-body h2 .answer-lead { color: rgba(0,0,0,.58) !important; } .content-body p { color: rgba(0,0,0,.65) !important; } .content-body ul li { color: rgba(0,0,0,.65) !important; border-bottom-color: rgba(0,0,0,.08) !important; } .content-body ul li::before { content: '✓' !important; background: #BEDE15 !important; border: none !important; color: #000 !important; line-height: 20px !important; text-align: center !important; } .content-body ul li::after { content: none !important; } .content-body ul li strong { color: #0d0d0d !important; } .content-body h4 { color: #0d0d0d !important; } /* ─── Benefit Cards ─── */ .benefit-card { background: #f2f5e8 !important; border: 1px solid rgba(0,0,0,.09) !important; } .benefit-card h4 { color: #0d0d0d !important; } .benefit-card p { color: rgba(0,0,0,.58) !important; } .benefit-num { background: rgba(130,165,0,.18) !important; border-color: #7a9a00 !important; color: #4d6600 !important; } /* ─── Process Steps ─── */ .process-step { background: #f2f5e8 !important; border-color: rgba(0,0,0,.1) !important; } .process-step:hover { border-color: #7a9a00 !important; } .process-step h4 { color: #0d0d0d !important; } .process-step p { color: rgba(0,0,0,.6) !important; } .step-num { background: rgba(130,165,0,.18) !important; border-color: #7a9a00 !important; color: #4d6600 !important; } /* ─── Review Cards ─── */ .rev-card { background: #f5f5ee !important; border-color: rgba(0,0,0,.1) !important; } .rev-card:hover { border-color: #7a9a00 !important; } /* ─── FAQ ─── */ .faq-item { border-color: rgba(0,0,0,.12) !important; } .faq-q { color: #0d0d0d !important; background: transparent !important; } .faq-q:hover, .faq-q[aria-expanded="true"] { color: #4d6600 !important; } .faq-icon { color: #4d6600 !important; } .faq-a { background: transparent !important; } .faq-a p { color: rgba(0,0,0,.65) !important; } /* ─── Inner Trust Bar ─── */ .inner-trust { background: #edf2da !important; } .inner-trust-item { color: rgba(0,0,0,.7) !important; border-right-color: rgba(0,0,0,.15) !important; } /* ─── CTA Banner ─── */ .cta-banner h2 { color: #0d0d0d; } .cta-banner p { color: rgba(0,0,0,.65); } /* ─── Exit Popup ─── */ .exit-box { background: #fff !important; border: 1px solid rgba(0,0,0,.12) !important; } .exit-box h3 { color: #0d0d0d !important; } .exit-box p { color: rgba(0,0,0,.6) !important; } .exit-box label { color: rgba(0,0,0,.6) !important; } .exit-box button[aria-label="Close"] { color: rgba(0,0,0,.35) !important; } .exit-box button[aria-label="Close"]:hover { color: #0d0d0d !important; } .exit-box .form-field { background: #fff !important; border: 1px solid rgba(0,0,0,.15) !important; color: #0d0d0d !important; } .exit-box .form-field::placeholder { color: rgba(0,0,0,.4) !important; } .exit-box .form-field:focus { border-color: #7a9a00 !important; } /* ─── Page Hero — keep dark (photographic overlay) ─── */ .page-hero-content h1 { color: #fff; } .page-hero-content .lead { color: rgba(255,255,255,.8); } /* ─── Buttons ─── */ .btn-outline { color: #0d0d0d !important; border-color: rgba(0,0,0,.5) !important; } .btn-outline:hover { background: #0d0d0d !important; color: #fff !important; border-color: #0d0d0d !important; } .page-hero-content .btn-outline { color: #fff !important; border-color: rgba(255,255,255,.6) !important; } .page-hero-content .btn-outline:hover { background: #fff !important; color: #000 !important; border-color: #fff !important; } /* ─── Nav (injected via header.html) ─── */ /* Default: transparent nav over dark hero — white links, white toggle */ #mainNav .nav-links a { color: rgba(255,255,255,.8) !important; } #mainNav .nav-links a:hover { color: #BEDE15 !important; } #mainNav .nav-dropdown-btn { color: rgba(255,255,255,.8) !important; background: transparent !important; border: none !important; } #mainNav .nav-dropdown-btn:hover { color: #BEDE15 !important; } #mainNav .toggle-track { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.35); } #mainNav .toggle-thumb { background: rgba(255,255,255,.9); } /* Scrolled: light sticky nav — dark links, grey toggle, dark logo */ #mainNav.scrolled { background: rgba(255,255,255,.97) !important; border-bottom-color: rgba(0,0,0,.1) !important; } #mainNav.scrolled .nav-links a { color: rgba(0,0,0,.65) !important; } #mainNav.scrolled .nav-links a:hover { color: #4d6600 !important; } #mainNav .nav-links a.nav-quote-btn, #mainNav.scrolled .nav-links a.nav-quote-btn { color: #000 !important; } #mainNav.scrolled .nav-dropdown-btn { color: rgba(0,0,0,.65) !important; } #mainNav.scrolled .nav-dropdown-btn:hover { color: #4d6600 !important; } #mainNav.scrolled .toggle-track { background: rgba(0,0,0,.1) !important; border-color: rgba(0,0,0,.2) !important; } #mainNav.scrolled .toggle-thumb { background: #444 !important; } #mainNav.scrolled .nav-hamburger span { background: #333 !important; } #mainNav.scrolled .logo-light-bg { display: block !important; } #mainNav.scrolled .logo-dark-bg { display: none !important; } /* Dropdown menu — always light */ #mainNav .nav-dropdown-menu { background: #fff !important; border: 1px solid rgba(0,0,0,.1) !important; box-shadow: 0 8px 24px rgba(0,0,0,.1) !important; } #mainNav .nav-dropdown-menu a { color: rgba(0,0,0,.7) !important; } #mainNav .nav-dropdown-menu a:hover { background: #f2f5e8 !important; color: #4d6600 !important; } /* ══════════════════════════════════════════════════════ DARK MODE — activated via #darkToggle checkbox body:has() specificity overrides all light-theme rules ══════════════════════════════════════════════════════ */ body:has(#darkToggle:checked) { background: #0d0d0d !important; color: #f2f2f2 !important; } body:has(#darkToggle:checked) ::-webkit-scrollbar-track { background: #111 !important; } /* Logo — always show white in dark mode */ body:has(#darkToggle:checked) #mainNav .logo-light-bg { display: none !important; } body:has(#darkToggle:checked) #mainNav .logo-dark-bg { display: block !important; } /* Nav — revert to dark styles */ body:has(#darkToggle:checked) #mainNav { background: transparent !important; border-bottom-color: transparent !important; } body:has(#darkToggle:checked) #mainNav.scrolled { background: rgba(13,13,13,.96) !important; border-bottom-color: rgba(190,222,21,.18) !important; } body:has(#darkToggle:checked) #mainNav .nav-links a { color: rgba(255,255,255,.65) !important; } body:has(#darkToggle:checked) #mainNav .nav-links a:hover { color: #BEDE15 !important; } body:has(#darkToggle:checked) #mainNav .nav-links a.nav-quote-btn { color: #000 !important; } body:has(#darkToggle:checked) #mainNav .nav-dropdown-btn { color: rgba(255,255,255,.65) !important; background: transparent !important; } body:has(#darkToggle:checked) #mainNav .nav-dropdown-btn:hover { color: #BEDE15 !important; } body:has(#darkToggle:checked) #mainNav .nav-dropdown-menu { background: #111 !important; border-color: rgba(190,222,21,.18) !important; box-shadow: 0 24px 64px rgba(0,0,0,.6) !important; } body:has(#darkToggle:checked) #mainNav .nav-dropdown-menu a { color: rgba(255,255,255,.72) !important; } body:has(#darkToggle:checked) #mainNav .nav-dropdown-menu a:hover { background: rgba(190,222,21,.07) !important; color: #BEDE15 !important; } /* Toggle pill in dark mode nav */ body:has(#darkToggle:checked) #mainNav.scrolled .toggle-track { background: #BEDE15 !important; border-color: #a5c70f !important; } body:has(#darkToggle:checked) #mainNav.scrolled .toggle-thumb { background: #000 !important; left: 22px !important; } body:has(#darkToggle:checked) #mainNav.scrolled .nav-hamburger span { background: #fff !important; } /* Typography */ body:has(#darkToggle:checked) .section-h { color: #fff !important; } body:has(#darkToggle:checked) .eyebrow { color: #BEDE15 !important; } body:has(#darkToggle:checked) .content-wrap { background: transparent !important; } body:has(#darkToggle:checked) .content-body h2 { color: #fff !important; } body:has(#darkToggle:checked) .content-body h2 .answer-lead { color: rgba(255,255,255,.6) !important; } body:has(#darkToggle:checked) .content-body p { color: rgba(255,255,255,.68) !important; } body:has(#darkToggle:checked) .content-body ul li { color: rgba(255,255,255,.68) !important; border-bottom-color: rgba(255,255,255,.05) !important; } body:has(#darkToggle:checked) .content-body ul li::before { content: '✓' !important; background: #BEDE15 !important; border: none !important; color: #000 !important; line-height: 20px !important; text-align: center !important; } body:has(#darkToggle:checked) .content-body ul li::after { content: none !important; } body:has(#darkToggle:checked) .content-body ul li strong { color: #fff !important; } body:has(#darkToggle:checked) .content-body h4 { color: #fff !important; } /* Before & After Sections (all service pages) */ body:has(#darkToggle:checked) section:has(.ba-wrap) { background: #0d0d0d !important; } body:has(#darkToggle:checked) section:has(.ba-wrap) p { color: rgba(255,255,255,.5) !important; } /* Service Area Section (About page) */ body:has(#darkToggle:checked) .area-section { background: #0d0d0d !important; border-color: rgba(255,255,255,.06) !important; } body:has(#darkToggle:checked) .area-section p { color: rgba(255,255,255,.5) !important; } body:has(#darkToggle:checked) .area-tile { background: #141414 !important; border-color: rgba(255,255,255,.08) !important; } body:has(#darkToggle:checked) .area-tile span { color: #fff !important; } /* Service Grid Section (About page) */ body:has(#darkToggle:checked) .svc-grid-section { background: #0d0d0d !important; } body:has(#darkToggle:checked) .svc-about-card { background: #141414 !important; border-color: rgba(255,255,255,.08) !important; } body:has(#darkToggle:checked) .svc-about-card h3 { color: #fff !important; } body:has(#darkToggle:checked) .svc-about-card p { color: rgba(255,255,255,.5) !important; } body:has(#darkToggle:checked) .svc-about-card div { color: #BEDE15 !important; } body:has(#darkToggle:checked) .svc-about-card span { color: #BEDE15 !important; } /* Benefit Cards */ body:has(#darkToggle:checked) .values-section { background: #0d0d0d !important; } body:has(#darkToggle:checked) .benefit-card { background: #141414 !important; border-color: rgba(190,222,21,.12) !important; } body:has(#darkToggle:checked) .benefit-card h4 { color: #fff !important; } body:has(#darkToggle:checked) .benefit-card p { color: rgba(255,255,255,.5) !important; } body:has(#darkToggle:checked) .benefit-num { background: rgba(190,222,21,.1) !important; border-color: #BEDE15 !important; color: #BEDE15 !important; } /* Process Steps */ body:has(#darkToggle:checked) .process-step { background: #141414 !important; border-color: rgba(255,255,255,.06) !important; } body:has(#darkToggle:checked) .process-step h4 { color: #fff !important; } body:has(#darkToggle:checked) .process-step p { color: rgba(255,255,255,.5) !important; } body:has(#darkToggle:checked) .step-num { background: rgba(190,222,21,.1) !important; border-color: #BEDE15 !important; color: #BEDE15 !important; } /* Review Cards */ body:has(#darkToggle:checked) .rev-card { background: #141414 !important; border-color: rgba(190,222,21,.12) !important; } /* Service Cards */ body:has(#darkToggle:checked) .svc-card { background: #141414 !important; border-color: rgba(255,255,255,.06) !important; } /* Latest Blog Posts (homepage) */ body:has(#darkToggle:checked) .blog-latest-section { background: #111 !important; } body:has(#darkToggle:checked) .blog-latest-all { color: #BEDE15 !important; } body:has(#darkToggle:checked) .blog-latest-card { background: #1a1a1a !important; border-color: rgba(255,255,255,.08) !important; } body:has(#darkToggle:checked) .blog-latest-card > div > div:first-child { color: rgba(255,255,255,.35) !important; } body:has(#darkToggle:checked) .blog-latest-card h3 { color: #fff !important; } body:has(#darkToggle:checked) .blog-latest-card h3 a { color: #fff !important; } body:has(#darkToggle:checked) .blog-latest-card h3 a:hover { color: #BEDE15 !important; } body:has(#darkToggle:checked) .blog-latest-card p { color: rgba(255,255,255,.55) !important; } body:has(#darkToggle:checked) .blog-latest-card > div > a:last-child { color: #BEDE15 !important; } /* Hub Service Grid (industrial & residential pages) */ body:has(#darkToggle:checked) .hub-svc-section { background: #111 !important; } body:has(#darkToggle:checked) .hub-svc-section > div > p { color: rgba(255,255,255,.55) !important; } body:has(#darkToggle:checked) .hub-svc-card { background: #1a1a1a !important; border-color: rgba(255,255,255,.1) !important; } body:has(#darkToggle:checked) .hub-svc-card > div:first-child { color: #BEDE15 !important; } body:has(#darkToggle:checked) .hub-svc-card h3 { color: #fff !important; } body:has(#darkToggle:checked) .hub-svc-card p { color: rgba(255,255,255,.55) !important; } body:has(#darkToggle:checked) .hub-svc-card > span { color: #BEDE15 !important; } /* FAQ */ body:has(#darkToggle:checked) .faq-list { border-top-color: rgba(255,255,255,.07) !important; } body:has(#darkToggle:checked) .faq-item { border-color: rgba(255,255,255,.07) !important; } body:has(#darkToggle:checked) .faq-q { color: #fff !important; } body:has(#darkToggle:checked) .faq-q:hover { color: #BEDE15 !important; } body:has(#darkToggle:checked) .faq-icon { color: #BEDE15 !important; } body:has(#darkToggle:checked) .faq-a p { color: rgba(255,255,255,.6) !important; } /* Inner Trust Bar */ body:has(#darkToggle:checked) .inner-trust { background: #111 !important; border-bottom-color: rgba(190,222,21,.1) !important; } body:has(#darkToggle:checked) .inner-trust-item { color: rgba(255,255,255,.7) !important; border-right-color: rgba(255,255,255,.1) !important; } /* Exit Popup */ body:has(#darkToggle:checked) .exit-box { background: #141414 !important; border-color: #BEDE15 !important; } body:has(#darkToggle:checked) .exit-box h3 { color: #fff !important; } body:has(#darkToggle:checked) .exit-box p { color: rgba(255,255,255,.55) !important; } body:has(#darkToggle:checked) .exit-box label { color: rgba(255,255,255,.45) !important; } body:has(#darkToggle:checked) .exit-box button[aria-label="Close"] { color: rgba(255,255,255,.4) !important; } body:has(#darkToggle:checked) .exit-box .form-field { background: #1c1c1c !important; border-color: rgba(255,255,255,.09) !important; color: #fff !important; } body:has(#darkToggle:checked) .exit-box .form-field::placeholder { color: rgba(255,255,255,.35) !important; } /* Buttons */ body:has(#darkToggle:checked) .btn-outline { color: #fff !important; border-color: rgba(255,255,255,.6) !important; } /* ── Homepage: #services ── */ body:has(#darkToggle:checked) #services { background: #111 !important; } body:has(#darkToggle:checked) #services div[style*="text-align:center"] > p { color: rgba(255,255,255,.6) !important; } body:has(#darkToggle:checked) #industrial span { color: #BEDE15 !important; } body:has(#darkToggle:checked) #services .svc-card p { color: rgba(255,255,255,.55) !important; } body:has(#darkToggle:checked) #services .svc-card a[href] { color: #BEDE15 !important; } body:has(#darkToggle:checked) #services .svc-card a[style*="background:#BEDE15"] { color: #000 !important; background: #BEDE15 !important; } body:has(#darkToggle:checked) #services .svc-card div[style*="rgba(0,0,0,.05)"] { background: rgba(255,255,255,.08) !important; color: rgba(255,255,255,.5) !important; } body:has(#darkToggle:checked) #services .svc-card div[style*="rgba(190,222,21,.15)"] { color: #BEDE15 !important; border-color: rgba(190,222,21,.3) !important; } body:has(#darkToggle:checked) #services .svc-card div[style*="rgba(255,60,60"] { background: rgba(255,60,60,.15) !important; border-color: rgba(220,60,60,.35) !important; color: rgba(255,130,130,.9) !important; } /* ── Homepage: #guarantee ── */ body:has(#darkToggle:checked) #guarantee { background: linear-gradient(140deg,rgba(7,14,0,.96) 0%,rgba(13,13,13,.92) 50%,rgba(0,16,10,.96) 100%),url('/assets/roof-painting-home-after.avif') center/cover no-repeat !important; border-top-color: rgba(190,222,21,.15) !important; border-bottom-color: rgba(190,222,21,.15) !important; } body:has(#darkToggle:checked) #guarantee p { color: rgba(255,255,255,.65) !important; } body:has(#darkToggle:checked) #guarantee h2 span { color: #BEDE15 !important; } body:has(#darkToggle:checked) .g-badge div[style*="color:#0d0d0d"] { color: #fff !important; } body:has(#darkToggle:checked) .g-badge div[style*="rgba(0,0,0,.5)"] { color: rgba(255,255,255,.5) !important; } body:has(#darkToggle:checked) .g-badge div[style*="color:#5a7800"] { color: #BEDE15 !important; } /* ── Homepage: #projects ── */ body:has(#darkToggle:checked) #projects { background: #0d0d0d !important; } body:has(#darkToggle:checked) #projects div[style*="text-align:center"] > p { color: rgba(255,255,255,.6) !important; } body:has(#darkToggle:checked) #projects p[style*="rgba(0,0,0,.5)"] { color: rgba(255,255,255,.45) !important; } /* ── Roof-painting article sections ── */ /* Benefits section bg */ body:has(#darkToggle:checked) section[aria-labelledby="benefits-heading"] { background: #111 !important; } /* Who We Serve section */ body:has(#darkToggle:checked) section[style*="rgba(245,252,230"] { background: #111 !important; } body:has(#darkToggle:checked) section[style*="rgba(245,252,230"] div[style*="background:#fff"] { background: #1a1a1a !important; border-color: rgba(255,255,255,.08) !important; } body:has(#darkToggle:checked) section[style*="rgba(245,252,230"] div[style*="color:#5a7800"] { color: #BEDE15 !important; } body:has(#darkToggle:checked) section[style*="rgba(245,252,230"] h3 { color: #fff !important; } body:has(#darkToggle:checked) section[style*="rgba(245,252,230"] p { color: rgba(255,255,255,.65) !important; } body:has(#darkToggle:checked) section[style*="rgba(245,252,230"] div[style*="rgba(0,0,0,.35)"] { color: rgba(255,255,255,.38) !important; } body:has(#darkToggle:checked) section[style*="rgba(245,252,230"] span[style*="rgba(0,0,0,.75)"] { color: rgba(255,255,255,.72) !important; } /* Process section */ body:has(#darkToggle:checked) section[aria-labelledby="process-heading"] { background: #111 !important; border-top-color: rgba(255,255,255,.05) !important; border-bottom-color: rgba(255,255,255,.05) !important; } body:has(#darkToggle:checked) section[aria-labelledby="process-heading"] > div > p { color: rgba(255,255,255,.65) !important; } /* Stat cards in article */ body:has(#darkToggle:checked) article div[style*="background:#f0f2e8"] { background: #1a1a1a !important; border-color: rgba(255,255,255,.08) !important; } body:has(#darkToggle:checked) article div[style*="background:#f0f2e8"] div[style*="rgba(0,0,0,.45)"] { color: rgba(255,255,255,.4) !important; } body:has(#darkToggle:checked) article div[style*="background:#f0f2e8"] div[style*="color:#0d0d0d"] { color: #fff !important; } /* Trust item checklist spans in article */ body:has(#darkToggle:checked) article span[style*="rgba(0,0,0,.75)"] { color: rgba(255,255,255,.75) !important; } /* Testimonial quote in article */ body:has(#darkToggle:checked) article div[style*="background:#f5f5ee"] { background: #1c1c1c !important; border-color: rgba(255,255,255,.08) !important; border-left-color: #BEDE15 !important; } body:has(#darkToggle:checked) article div[style*="background:#f5f5ee"] p { color: rgba(255,255,255,.75) !important; } body:has(#darkToggle:checked) article div[style*="background:#f5f5ee"] div[style*="color:#0d0d0d"] { color: #fff !important; } body:has(#darkToggle:checked) article div[style*="background:#f5f5ee"] div[style*="color:#5a7800"] { color: #BEDE15 !important; } /* ── Contact page: contact methods section ── */ body:has(#darkToggle:checked) section[aria-labelledby="contact-methods-heading"] { background: #111 !important; } body:has(#darkToggle:checked) .contact-methods-grid a, body:has(#darkToggle:checked) .contact-methods-grid > div { background: #1a1a1a !important; border-color: rgba(255,255,255,.08) !important; } body:has(#darkToggle:checked) .contact-methods-grid div[style*="color:#0d0d0d"], body:has(#darkToggle:checked) .contact-methods-grid div[style*="color:#141414"] { color: #fff !important; } body:has(#darkToggle:checked) .contact-methods-grid div[style*="rgba(0,0,0,.5)"], body:has(#darkToggle:checked) .contact-methods-grid address { color: rgba(255,255,255,.45) !important; } body:has(#darkToggle:checked) .contact-methods-grid div[style*="color:#5a7800"] { color: #BEDE15 !important; } body:has(#darkToggle:checked) .contact-methods-grid div[style*="color:#1a7a3a"] { color: #25D366 !important; } /* ── Contact page: form + guarantee panel ── */ body:has(#darkToggle:checked) section#contact { background: #0d0d0d !important; } body:has(#darkToggle:checked) section#contact h2 { color: #fff !important; } body:has(#darkToggle:checked) section#contact p { color: rgba(255,255,255,.6) !important; } body:has(#darkToggle:checked) section#contact .form-label { color: rgba(255,255,255,.5) !important; } body:has(#darkToggle:checked) section#contact label[style*="rgba(0,0,0,.5)"] { color: rgba(255,255,255,.4) !important; } body:has(#darkToggle:checked) section#contact div[style*="background:#f8f8f4"] { background: #1a1a1a !important; border-color: rgba(255,255,255,.08) !important; } body:has(#darkToggle:checked) section#contact div[style*="color:#0d0d0d"] { color: #fff !important; } body:has(#darkToggle:checked) section#contact div[style*="rgba(0,0,0,.5)"] { color: rgba(255,255,255,.45) !important; } body:has(#darkToggle:checked) #contactPageForm .form-field { background: #1c1c1c !important; border-color: rgba(255,255,255,.09) !important; color: #fff !important; } body:has(#darkToggle:checked) #contactPageForm .form-field::placeholder { color: rgba(255,255,255,.35) !important; } body:has(#darkToggle:checked) #contactPageForm select.form-field option { background: #1c1c1c !important; color: #fff !important; } /* ── Contact page: service links section ── */ body:has(#darkToggle:checked) section:has(.services-link-grid) { background: #111 !important; border-top-color: rgba(255,255,255,.05) !important; } body:has(#darkToggle:checked) section:has(.services-link-grid) h2 { color: #fff !important; } body:has(#darkToggle:checked) .services-link-grid a { background: #1a1a1a !important; border-color: rgba(255,255,255,.08) !important; color: #fff !important; } /* ── Homepage: #reviews ── */ body:has(#darkToggle:checked) #reviews { background: #0d0d0d !important; } body:has(#darkToggle:checked) #reviews span[style*="color:#5a7800"] { color: #BEDE15 !important; } body:has(#darkToggle:checked) #reviews span[style*="rgba(0,0,0,.5)"] { color: rgba(255,255,255,.5) !important; } body:has(#darkToggle:checked) #reviews .rev-card p { color: rgba(255,255,255,.7) !important; } body:has(#darkToggle:checked) #reviews .rev-card div[style*="rgba(0,0,0,.4)"] { color: rgba(255,255,255,.38) !important; }