/* * Public light/dark colour mode. * Brand variables remain owner-controlled; this layer changes neutral surfaces, * text and borders only. The saved choice is applied in before CSS loads. */ :root { --cpb-theme-page: #ffffff; --cpb-theme-surface: #ffffff; --cpb-theme-surface-raised: #ffffff; --cpb-theme-surface-soft: #f5f7fa; --cpb-theme-text: #0a1b33; --cpb-theme-muted: #5b6b80; --cpb-theme-border: #dfe5ec; } html[data-cpb-theme="dark"] { color-scheme: dark; --cpb-theme-page: #07111f; --cpb-theme-surface: #0d1a2b; --cpb-theme-surface-raised: #122238; --cpb-theme-surface-soft: #101d2d; --cpb-theme-text: #edf3fb; --cpb-theme-muted: #aab8ca; --cpb-theme-border: #2a3b52; --cpb-text: var(--cpb-theme-text); --cpb-text-light: var(--cpb-theme-muted); --cpb-bg: var(--cpb-theme-page); --cpb-bg-alt: var(--cpb-theme-surface-soft); --cpb-border: var(--cpb-theme-border); --cpb-shadow: 0 10px 30px rgba(0, 0, 0, 0.24); --cpb-shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.38); } /* The approved homepage defines its own neutral tokens with !important. */ html[data-cpb-theme="dark"] body.home { --cpb-bg-alt: var(--cpb-theme-surface-soft) !important; --cpb-border: var(--cpb-theme-border) !important; --cpb-text: var(--cpb-theme-text) !important; --cpb-text-light: var(--cpb-theme-muted) !important; } .cpb-theme-toggle { display: inline-grid; width: 42px; height: 42px; margin-left: 10px; padding: 0; color: var(--cpb-text); background: var(--cpb-theme-surface); border: 1px solid var(--cpb-border); border-radius: 50%; cursor: pointer; flex: none; place-items: center; transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease; } .cpb-theme-toggle:hover { color: var(--cpb-accent); background: var(--cpb-bg-alt); border-color: var(--cpb-accent); transform: translateY(-1px); } .cpb-theme-icon { grid-area: 1 / 1; } .cpb-theme-icon--sun { display: none; } html[data-cpb-theme="dark"] .cpb-theme-icon--moon { display: none; } html[data-cpb-theme="dark"] .cpb-theme-icon--sun { display: block; } .cpb-theme-toggle + .cpb-search-toggle { margin-left: 8px; } .cpb-header-actions { display: flex; flex: none; gap: 10px; align-items: center; } .cpb-header-actions .cpb-theme-toggle, .cpb-header-actions .cpb-search-toggle, .cpb-header-actions .cpb-header-cta { margin-left: 0; } html[data-cpb-theme="dark"] body, html[data-cpb-theme="dark"] main { color: var(--cpb-theme-text); background: var(--cpb-theme-page); } html[data-cpb-theme="dark"] .cpb-header { background: rgba(7, 17, 31, 0.97); border-color: var(--cpb-theme-border); } html[data-cpb-theme="dark"] .cpb-header.cpb-sticky { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3); } html[data-cpb-theme="dark"] .cpb-logo img { filter: brightness(0) invert(1); } html[data-cpb-theme="dark"] .cpb-logo img[src*="white-logo"] { filter: none; } html[data-cpb-theme="dark"] .cpb-nav > ul > li > a, html[data-cpb-theme="dark"] .cpb-nav-dropdown-toggle, html[data-cpb-theme="dark"] .cpb-search-toggle, html[data-cpb-theme="dark"] .cpb-theme-toggle { color: var(--cpb-theme-text); } html[data-cpb-theme="dark"] .cpb-search-toggle, html[data-cpb-theme="dark"] .cpb-theme-toggle { background: var(--cpb-theme-surface); border-color: var(--cpb-theme-border); } html[data-cpb-theme="dark"] .cpb-search-toggle:hover, html[data-cpb-theme="dark"] .cpb-theme-toggle:hover { color: var(--cpb-accent); background: var(--cpb-theme-surface-raised); border-color: var(--cpb-accent); } html[data-cpb-theme="dark"] .cpb-mobile-toggle span { background: var(--cpb-theme-text); } html[data-cpb-theme="dark"] .cpb-nav, html[data-cpb-theme="dark"] .cpb-nav ul li ul.sub-menu, html[data-cpb-theme="dark"] .cpb-mega-menu, html[data-cpb-theme="dark"] .cpb-mega-card { color: var(--cpb-theme-text); background: var(--cpb-theme-surface); border-color: var(--cpb-theme-border); } html[data-cpb-theme="dark"] .cpb-mega-card:hover, html[data-cpb-theme="dark"] .cpb-mega-card:focus-visible, html[data-cpb-theme="dark"] .cpb-nav ul li ul.sub-menu li a:hover { background: var(--cpb-theme-surface-raised); } html[data-cpb-theme="dark"] .cpb-mega-menu__sidebar h3, html[data-cpb-theme="dark"] .cpb-mega-card__title, html[data-cpb-theme="dark"] .cpb-nav ul li ul.sub-menu a { color: var(--cpb-theme-text); } html[data-cpb-theme="dark"] .cpb-mega-card__count, html[data-cpb-theme="dark"] .cpb-mega-menu__sidebar p { color: var(--cpb-theme-muted); } html[data-cpb-theme="dark"] .cpb-hero-gpb__trust { color: var(--cpb-theme-muted); } html[data-cpb-theme="dark"] .cpb-single-product { --cpbx-border: var(--cpb-theme-border); --cpbx-border-strong: color-mix(in srgb, var(--cpb-theme-border) 74%, #ffffff); --cpbx-ink: var(--cpb-theme-text); --cpbx-muted: var(--cpb-theme-muted); --cpbx-bg: var(--cpb-theme-page); } html[data-cpb-theme="dark"] .cpb-single-product .cpb-breadcrumbs { color: var(--cpb-theme-muted); background: var(--cpb-theme-surface-soft); border-color: var(--cpb-theme-border); } html[data-cpb-theme="dark"] .cpb-single-product .cpb-breadcrumbs a, html[data-cpb-theme="dark"] .cpb-single-product .cpb-breadcrumbs .separator { color: var(--cpb-theme-muted); } html[data-cpb-theme="dark"] .cpb-shop-header, html[data-cpb-theme="dark"] .cpb-page-header, html[data-cpb-theme="dark"] .cpb-about-hero, html[data-cpb-theme="dark"] .cpb-contact-hero, html[data-cpb-theme="dark"] .cpbq-hero, html[data-cpb-theme="dark"] .cpbs-hero { color: var(--cpb-theme-text) !important; background: radial-gradient(circle at 84% 10%, color-mix(in srgb, var(--cpb-accent) 18%, transparent), transparent 26%), linear-gradient(135deg, #0d1a2b 0%, #101d2d 100%) !important; border-color: var(--cpb-theme-border); } html[data-cpb-theme="dark"] :is( .cpb-shop-header, .cpb-page-header, .cpb-about-hero, .cpb-contact-hero, .cpbq-hero, .cpbs-hero ) :is(h1, h2, h3, p) { color: inherit !important; } html[data-cpb-theme="dark"] .cpb-shop-filter-bar { background: rgba(7, 17, 31, 0.94); border-color: var(--cpb-theme-border); } html[data-cpb-theme="dark"] .cpb-filter-tab, html[data-cpb-theme="dark"] .cpbr-chip, html[data-cpb-theme="dark"] .cpbx-cat-chip, html[data-cpb-theme="dark"] .cpbq-chip { color: var(--cpb-theme-muted); background: var(--cpb-theme-surface); border-color: var(--cpb-theme-border); } html[data-cpb-theme="dark"] :is( .cpbx-product-hero, .cpb-product-tabs, .cpb-related-products, .cpb-page-content-section, .cpbbl-section, .cpb-hero-gpb, .cpb-expertise, .cpb-materials-grid-sec, .cpb-home-usp, .cpb-home-products, .cpb-box-templates, .cpb-home-hiw, .cpb-why-us, .cpb-product-marquee, .cpb-testimonials, .cpb-home-faqs ) { color: var(--cpb-theme-text); background: var(--cpb-theme-page) !important; } html[data-cpb-theme="dark"] :is( .cpb-slim-trust, .cpb-recent-projects, .cpb-numeric-proof, .cpb-shop-products, .cpb-archive-content, .cpb-blog-section, .cpb-search-results, .cpb-buyer-next ) { color: var(--cpb-theme-text); background: var(--cpb-theme-surface-soft) !important; } html[data-cpb-theme="dark"] :is( ul.products li.product, .cpb-home-product-card, .cpb-product-card, .cpb-template-card, .cpb-usp-card, .cpb-hiw-step, .cpb-why-item, .cpb-testi-card, .cpb-showroom-card, .cpbbl-featured-link, .cpbbl-card-link, .cpbr-card, .cpb-values-card, .cpb-industry-card, .cpb-testimonial-card, .cpb-home-faq-item, .cpb-product-gallery, .cpb-product-summary, .cpbx-specs, .pdsp-cta-card, .cpbq-side-card, .cpb-contact-form-wrap, .cpb-form-card, .cpb-search-result, .cpb-post-card, .cpb-buyer-guide, .cpb-buyer-tips ) { color: var(--cpb-theme-text); background: var(--cpb-theme-surface) !important; border-color: var(--cpb-theme-border) !important; } html[data-cpb-theme="dark"] .cpb-faq-card { background: var(--cpb-theme-surface-soft); border-color: var(--cpb-theme-border); } html[data-cpb-theme="dark"] .cpb-faq-card__trigger { color: var(--cpb-theme-text) !important; } html[data-cpb-theme="dark"] .cpb-faq-card__trigger[aria-expanded="true"] { color: var(--cpb-accent) !important; } html[data-cpb-theme="dark"] .cpb-faq-card__body p { color: var(--cpb-theme-muted) !important; } html[data-cpb-theme="dark"] .pdv--split .pdsp-cta-card { background: var(--cpb-theme-surface-raised); } html[data-cpb-theme="dark"] main :is(h1, h2, h3, h4, h5, h6), html[data-cpb-theme="dark"] .woocommerce-loop-product__title, html[data-cpb-theme="dark"] .entry-content :is(h2, h3, h4) { color: var(--cpb-theme-text) !important; } html[data-cpb-theme="dark"] main :is(p, li), html[data-cpb-theme="dark"] .entry-content { color: var(--cpb-theme-muted); } html[data-cpb-theme="dark"] :is( .cpb-shop-cta, .cpb-cta-section, .cpb-final-cta, .cpb-home-cta-card, .cpb-capabilities-spec ) :is(h1, h2, h3, h4, p, li) { color: #ffffff !important; } html[data-cpb-theme="dark"] .cpb-btn-outline { color: var(--cpb-theme-text) !important; background: transparent; border-color: var(--cpb-theme-border); } html[data-cpb-theme="dark"] .cpb-btn-outline:hover { color: #ffffff !important; background: var(--cpb-accent); border-color: var(--cpb-accent); } html[data-cpb-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), html[data-cpb-theme="dark"] select, html[data-cpb-theme="dark"] textarea, html[data-cpb-theme="dark"] .cpb-search-panel { color: var(--cpb-theme-text); background: var(--cpb-theme-surface); border-color: var(--cpb-theme-border); } html[data-cpb-theme="dark"] input::placeholder, html[data-cpb-theme="dark"] textarea::placeholder { color: color-mix(in srgb, var(--cpb-theme-muted) 78%, transparent); } html[data-cpb-theme="dark"] :is(table, th, td, .cpb-product-tabs, .cpb-search-panel-footer) { border-color: var(--cpb-theme-border); } html[data-cpb-theme="dark"] th { color: var(--cpb-theme-text); background: var(--cpb-theme-surface-raised); } html[data-cpb-theme="dark"] td { color: var(--cpb-theme-muted); background: var(--cpb-theme-surface); } html[data-cpb-theme="dark"] .cpb-pagination a, html[data-cpb-theme="dark"] .cpb-pagination span { color: var(--cpb-theme-text); background: var(--cpb-theme-surface); border-color: var(--cpb-theme-border); } html[data-cpb-theme="dark"] .cpb-search-panel-footer, html[data-cpb-theme="dark"] .cpb-search-body { color: var(--cpb-theme-muted); background: var(--cpb-theme-surface); } html[data-cpb-theme="dark"] :is( .cpb-buyer-guide-title, .cpb-buyer-next-title, .cpb-buyer-prep-title, .cpb-buyer-explore-title, .cpb-bg-item summary, .cpb-buyer-guide-points strong, .cpb-buyer-next-points strong, .cpb-buyer-prep-list strong ) { color: var(--cpb-theme-text) !important; } html[data-cpb-theme="dark"] :is( .cpb-buyer-guide-intro, .cpb-buyer-guide-points li, .cpb-bg-answer, .cpb-buyer-next-col p, .cpb-buyer-next-points li, .cpb-buyer-next-links li, .cpb-buyer-prep p, .cpb-buyer-prep-list li, .cpb-buyer-prep-foot ) { color: var(--cpb-theme-muted); } html[data-cpb-theme="dark"] .cpb-bg-item { background: var(--cpb-theme-surface-soft); border-color: transparent; } html[data-cpb-theme="dark"] .cpb-bg-item[open] { background: var(--cpb-theme-surface); border-color: var(--cpb-theme-border); } html[data-cpb-theme="dark"] .cpb-buyer-prep { background: var(--cpb-theme-surface-soft); border-left-color: var(--cpb-accent); } html[data-cpb-theme="dark"] .cpb-buyer-explore-links li a { color: var(--cpb-theme-text); background: var(--cpb-theme-surface-soft); } html[data-cpb-theme="dark"] .cpb-buyer-explore-links li a:hover, html[data-cpb-theme="dark"] .cpb-buyer-explore-links li a:focus-visible { color: #ffffff; background: var(--cpb-accent); } html[data-cpb-theme="dark"] .cpb-buyer-explore { border-top-color: var(--cpb-theme-border); } @media (max-width: 768px) { .cpb-header-actions { order: 1; margin-left: auto; gap: 6px; } .cpb-theme-toggle { width: 38px; height: 38px; } .cpb-header-actions .cpb-theme-toggle, .cpb-header-actions .cpb-search-toggle { margin: 0; order: 0; } .cpb-theme-toggle + .cpb-search-toggle { margin: 0; } html[data-cpb-theme="dark"] .cpb-nav { background: var(--cpb-theme-surface); } html[data-cpb-theme="dark"] .cpb-mega-menu { background: var(--cpb-theme-surface-soft); } } @media (prefers-reduced-motion: reduce) { .cpb-theme-toggle { transition: none; } }