/** * Smartio — Dark-mode contrast fixes (P0-C4 + P0-C5) * * The theme used `@media (prefers-color-scheme: dark)` for several blocks, * but the site exposes a *manual* toggle that sets `` * — so the @media rules never fire when the user clicks the moon icon. * * This file: * 1. Mirrors the manual `.theme-dark` selector everywhere the team already * wrote dark-mode CSS. * 2. Forces readable text on H2/H3/H4 inside dark-mode contexts (was #333). * 3. Inverts the white "Featured / #1 Best Seller" hero card so its text * stays readable instead of inheriting dark color over near-white bg. * 4. Patches a few low-contrast chips/links that were also too dim. * * Loaded site-wide by smartio_dark_mode_fixes_enqueue() in functions.php. */ /* --------------------------------------------------------------------- * 1. Universal dark-mode text contrast (covers any CMS-edited heading * that didn't get an explicit dark color) * ------------------------------------------------------------------- */ html.theme-dark, html.theme-dark body { color: #e9eef5; } /* Headings that previously inherited Divi's `h2 { color: #333 }` and * stayed invisible on the dark navy background. */ html.theme-dark h1, html.theme-dark h2, html.theme-dark h3, html.theme-dark h4, html.theme-dark h5, html.theme-dark h6, html.theme-dark .why-title, html.theme-dark .wa-strip-title, html.theme-dark .section-title, html.theme-dark .delivery-card-title, html.theme-dark .why-item-title { color: #f3f6fb; } /* Mid-tone body copy — keep it readable on dark navy without going pure white */ html.theme-dark .why-desc, html.theme-dark .wa-strip-desc, html.theme-dark .why-item-desc, html.theme-dark .delivery-card-desc, html.theme-dark .hero-desc, html.theme-dark p { color: #b9c5d4; } /* Eyebrow + link accents — bump from primary navy (invisible on dark) to teal */ html.theme-dark .why-eyebrow, html.theme-dark .wa-strip-eyebrow, html.theme-dark .hero-eyebrow, html.theme-dark .section-link, html.theme-dark .product-card-brand { color: #7bd0ca; } /* Stat / price emphasis numbers — same treatment. * Include the inner Woo `.woocommerce-Price-amount` span explicitly because * WC/Divi colors it directly, so the parent's color: doesn't inherit. */ html.theme-dark .stat-card span, html.theme-dark .why-stat-num, html.theme-dark .hero-best-price, html.theme-dark .hero-best-price .woocommerce-Price-amount, html.theme-dark .hero-best-price .amount, html.theme-dark .product-card-price, html.theme-dark .product-card-price .woocommerce-Price-amount, html.theme-dark .product-card-price .amount { color: #7bd0ca; } /* --------------------------------------------------------------------- * 2. Featured "#1 Best Seller" hero card (P0-C5) * In dark mode the card kept a near-white background but its text * inherited the dark color → invisible. Turn the card itself dark. * ------------------------------------------------------------------- */ html.theme-dark .hero-best-card, html.theme-dark .featured-card, html.theme-dark .product-card, html.theme-dark .bestseller-card, html.theme-dark .delivery-card, html.theme-dark .why-stat, html.theme-dark .cat-card, html.theme-dark .stat-card { background: #1a2535; border-color: #243248; color: #e9eef5; } html.theme-dark .hero-best-name, html.theme-dark .bestseller-name, html.theme-dark .product-card-title, html.theme-dark .cat-name, html.theme-dark .why-stat-label, html.theme-dark .stat-card-label, html.theme-dark .delivery-card-title { color: #f3f6fb; } /* B21 — Product photo wells used to be light grey (#f4f6f9) in dark mode, * which still punches a bright hole against the dark cards. Use a muted * blue-grey that sits closer to the card surface so the photo floats in * a softer surround. Photos themselves stay readable (most have white * product-shot backgrounds already). */ html.theme-dark .hero-best-img, html.theme-dark .bestseller-img, html.theme-dark .product-card-image { background: #e7ecf3; } /* Sub-text inside cards */ html.theme-dark .cat-count, html.theme-dark .why-stat-sub, html.theme-dark .bestseller-brand, html.theme-dark .product-card-old { color: #95a4b8; } /* --------------------------------------------------------------------- * 3. Promo / delivery / shipping chips — were dim teal-on-navy * ------------------------------------------------------------------- */ html.theme-dark .delivery-card-tag, html.theme-dark .wa-online, html.theme-dark .pdp-spec-chip, html.theme-dark .pdp-tag { background: rgba(123, 208, 202, 0.18); color: #a6e0db; border-color: rgba(123, 208, 202, 0.32); } /* --------------------------------------------------------------------- * 4. Header navigation in dark mode — bump contrast slightly * ------------------------------------------------------------------- */ html.theme-dark .nav-cat, html.theme-dark .nav-link, html.theme-dark .nav-icon-btn, html.theme-dark .mobile-nav-link { color: #d9e2ee; } html.theme-dark .nav-cat:hover, html.theme-dark .nav-link:hover { color: #ffffff; } /* --------------------------------------------------------------------- * 5. "Why icon" tile + WhatsApp green CTA stay correct in dark * ------------------------------------------------------------------- */ html.theme-dark .why-item-icon { background: rgba(123, 208, 202, 0.12); color: #7bd0ca; } /* Hero "Exclusive distributor of Govee" strong link — was navy on navy */ html.theme-dark .hero-desc strong, html.theme-dark .hero-desc a { color: #a6e0db; } /* --------------------------------------------------------------------- * 6. Breadcrumbs + small links * ------------------------------------------------------------------- */ html.theme-dark .breadcrumb a, html.theme-dark .breadcrumb span, html.theme-dark .wishlist-page-sub { color: #b9c5d4; } /* --------------------------------------------------------------------- * 7. FunnelKit Cart side drawer (.fkcart-modal) — text was hardcoded * near-black (#24272D) and stayed invisible on the dark navy panel * background, making the open cart look empty. Restore contrast. * ------------------------------------------------------------------- */ html.theme-dark .fkcart-modal .fkcart-item-title, html.theme-dark .fkcart-modal .fkcart-item-title a, html.theme-dark .fkcart-modal .fkcart-item-price, html.theme-dark .fkcart-modal .fkcart-item-misc, html.theme-dark .fkcart-modal .fkcart-summary-text, html.theme-dark .fkcart-modal .fkcart-summary-text strong, html.theme-dark .fkcart-modal .fkcart-slider-body strong, html.theme-dark .fkcart-modal .fkcart-slider-heading, html.theme-dark .fkcart-modal .fkcart-title, html.theme-dark .fkcart-modal .woocommerce-Price-amount, html.theme-dark .fkcart-modal .woocommerce-Price-currencySymbol, html.theme-dark .fkcart-modal .fkcart-zero-state-title, /* FunnelKit Cart 1.9.1.1+ added text elements — keep them readable in dark mode */ html.theme-dark .fkcart-modal .fkcart-item-heading, html.theme-dark .fkcart-modal .fkcart--item-heading, html.theme-dark .fkcart-modal .fkcart-item-info, html.theme-dark .fkcart-modal .fkcart-item-count, html.theme-dark .fkcart-modal .fkcart-desc-title, html.theme-dark .fkcart-modal .fkcart-addon-title, html.theme-dark .fkcart-modal .fkcart-amount, html.theme-dark .fkcart-modal .fkcart-discounted-amount, html.theme-dark .fkcart-modal .fkcart-discounted-price, html.theme-dark .fkcart-modal .fkcart-discounted-text, html.theme-dark .fkcart-modal .fkcart-free-item, html.theme-dark .fkcart-modal .fkcart-checkout--text, html.theme-dark .fkcart-modal .fkcart-checkout--price, html.theme-dark .fkcart-modal .fkcart-checkout--price-normal, html.theme-dark .fkcart-modal .fkcart-checkout--price-discounted, html.theme-dark .fkcart-modal .fkcart-coupon-text, html.theme-dark .fkcart-modal .fkcart-coupon-title, html.theme-dark .fkcart-modal .fkcart-help-text, html.theme-dark .fkcart-modal .fkcart-info-text, html.theme-dark .fkcart-modal .fkcart-quantity__input { color: #e9eef5 !important; } html.theme-dark .fkcart-modal .fkcart-attr-key, html.theme-dark .fkcart-modal .fkcart-attr-value, html.theme-dark .fkcart-modal .fkcart-zero-state-text, html.theme-dark .fkcart-modal .fkcart-item-meta, html.theme-dark .fkcart-modal .fkcart-item-meta-content, html.theme-dark .fkcart-modal .fkcart-summary-subtext { color: #9aa6b2 !important; } html.theme-dark .fkcart-modal .fkcart-quantity__input { background: transparent !important; } /* The +/- stepper buttons (and the box border that separates them from the * input) carry the same hardcoded near-black #24272D as the text above, so * the glyphs and the outline disappeared on the dark navy panel. Lighten the * glyph (the icons honor currentColor — proven by light mode) with an SVG * fill fallback for hardcoded icons, and give the box a subtle visible border. */ html.theme-dark .fkcart-modal .fkcart-quantity-button, html.theme-dark .fkcart-modal .fkcart-quantity-up, html.theme-dark .fkcart-modal .fkcart-quantity-down, html.theme-dark .fkcart-modal .fkcart-quantity-selector { color: #e9eef5 !important; border-color: #34465f !important; } html.theme-dark .fkcart-modal .fkcart-quantity-button svg, html.theme-dark .fkcart-modal .fkcart-quantity-button svg * { fill: #e9eef5 !important; } html.theme-dark .fkcart-modal .fkcart-quantity-button:hover { color: #ffffff !important; border-color: var(--smartio-teal, #7bd0ca) !important; } /* --------------------------------------------------------------------- * 7b. FunnelKit Cart side drawer — DARK SURFACES (2026-07-14) * FunnelKit ships every drawer panel white (css_bg_color #fff), so in dark * mode the whole cart was a white sheet with the lightened text washed out. * Force the drawer surfaces to the dark theme bg. The cart is JS-injected, * so cover the full FunnelKit 1.9.1.1 container class set. * ------------------------------------------------------------------- */ html.theme-dark .fkcart-modal { color: #e9eef5 !important; } /* base: un-colored text reads light */ /* The .fkcart-modal is the full-viewport fixed overlay — keep it TRANSPARENT, never an * opaque sheet, or opening the cart hides the whole website behind it. FunnelKit's own * .fkcart-modal-backdrop already dims the page; the solid dark surface belongs to the * panel below. */ html.theme-dark .fkcart-modal { background-color: transparent !important; } html.theme-dark .fkcart-drawer, html.theme-dark .fkcart-drawer-container, html.theme-dark .fkcart-drawer-content, html.theme-dark .fkcart-drawer-wrap, html.theme-dark .fkcart-drawer-header, html.theme-dark .fkcart-drawer-header-panel, html.theme-dark .fkcart-drawer-items, html.theme-dark .fkcart-container, html.theme-dark .fkcart-body-style, html.theme-dark .fkcart-checkout-wrap, html.theme-dark .fkcart-checkout-info, html.theme-dark .fkcart-modal-footer, html.theme-dark .fkcart-below-checkout-upsell, html.theme-dark .fkcart-drawer-upsells, html.theme-dark .fkcart-modal-upsell, html.theme-dark .fkcart-carousel-wrap, html.theme-dark .fkcart-coupon-body { background-color: var(--bg, #0f1722) !important; border-color: var(--border, #26344a) !important; } /* Raised inner surfaces — item rows, product-image frames, reward chips, * upsell cards — one step lighter than the panel. */ html.theme-dark .fkcart-modal .fkcart--item, html.theme-dark .fkcart-modal .fkcart-item-wrap, html.theme-dark .fkcart-modal .fkcart-line-item, html.theme-dark .fkcart-modal .fkcart-image-wrapper, html.theme-dark .fkcart-modal .fkcart-product-image, html.theme-dark .fkcart-modal .fkcart-product-form-thumbnail, html.theme-dark .fkcart-modal .fkcart-reward-item, html.theme-dark .fkcart-modal .fkcart-reward-item-wrap { background-color: var(--bg-surface, #18222f) !important; border-color: var(--border, #26344a) !important; } /* Header + reward-line text FunnelKit hardcodes dark */ html.theme-dark .fkcart-modal .fkcart-drawer-heading, html.theme-dark .fkcart-modal .fkcart-drawer-header-heading, html.theme-dark .fkcart-modal .fkcart-reward-item, html.theme-dark .fkcart-modal .fkcart-reward-item-wrap, html.theme-dark .fkcart-modal .fkcart-item-meta-content-wrap { color: #e9eef5 !important; } /* Remaining light surfaces: loading shimmers, empty/zero-state preview, the * quick-view sub-drawer and its panels — so nothing flashes white on a dark cart. */ html.theme-dark .fkcart-modal .fkcart-shimmer, html.theme-dark .fkcart-modal .fkcart-preview-ui, html.theme-dark .fkcart-modal .fkcart-quick-view-drawer, html.theme-dark .fkcart-modal .fkcart-product-description, html.theme-dark .fkcart-modal .fkcart-form-input-wrap, html.theme-dark .fkcart-modal .fkcart-view-link-wrap { background-color: var(--bg-surface, #18222f) !important; } /* Reward-progress track (ships #ccc grey) — dark slate so only the filled bar reads */ html.theme-dark .fkcart-modal .fkcart-progress-wrap { background-color: #24344a !important; } /* Slider notice box (ships light-pink #fff0f0; hidden until a cart notice fires) */ html.theme-dark .fkcart-modal .fkcart-slider-notices { background-color: var(--bg-surface, #18222f) !important; color: #e9eef5 !important; border-color: var(--border, #26344a) !important; } /* --------------------------------------------------------------------- * 8. P1 fixes — 2026-05-22 * * Most cards and prices use color:var(--primary) which resolves to * the brand navy #0d4877 — invisible against the dark navy body bg. * Switch these to the brand teal in dark mode. * ------------------------------------------------------------------- */ /* B3 + B16 + B25 — every product-card price variant that uses var(--primary). * Include the inner WC `.woocommerce-Price-amount` span explicitly, otherwise * WC/Divi colors the span directly and our parent rule never reaches the text. */ html.theme-dark .bestseller-price, html.theme-dark .bestseller-price .woocommerce-Price-amount, html.theme-dark .bestseller-price .amount, html.theme-dark .card-price, html.theme-dark .card-price .woocommerce-Price-amount, html.theme-dark .card-price .amount, html.theme-dark .smartio-cart-item-subtotal, html.theme-dark .smartio-cart-item-subtotal .woocommerce-Price-amount, html.theme-dark .smartio-summary-total span:last-child, html.theme-dark .smartio-summary-total span:last-child .woocommerce-Price-amount, html.theme-dark .smartio-upsell-price, html.theme-dark .smartio-upsell-price .woocommerce-Price-amount, /* B25 — mobile drawer best-seller tile prices */ html.theme-dark .smartio-drawer-bs-price, html.theme-dark .smartio-drawer-bs-price .woocommerce-Price-amount, html.theme-dark .smartio-drawer-bs-price .amount { color: var(--teal-1, #7bd0ca) !important; } /* Strike-through original price on a sale card — keep it visible but muted */ html.theme-dark .bestseller-price del, html.theme-dark .card-price del, html.theme-dark .smartio-cart-item-subtotal del { color: var(--text-soft, #6e8198) !important; } /* B4 — hero h1 highlight fragment "made simple" — was var(--primary) on dark */ html.theme-dark .hero-title .em { color: var(--teal-1, #7bd0ca); } /* B5 — hero "Exclusive distributor of Govee in Lebanon" * has an inline color attr from template-home.php, so we need !important */ html.theme-dark .hero-desc strong, html.theme-dark .hero-desc strong[style] { color: #a6e0db !important; } /* B6 — "💡 Pro Tip" callout box uses an inline cream background * (rgb(244,241,234) / #f4f1ea) injected from product description HTML. * We can't touch the source content; override via attribute selector. */ html.theme-dark [style*="#f4f1ea"], html.theme-dark [style*="#F4F1EA"], html.theme-dark [style*="rgb(244,241,234)"], html.theme-dark [style*="rgb(244, 241, 234)"] { background-color: rgba(123, 208, 202, 0.08) !important; background-image: none !important; color: #e9eef5 !important; border-left: 3px solid var(--teal-1, #7bd0ca) !important; } html.theme-dark [style*="#f4f1ea"] strong, html.theme-dark [style*="rgb(244, 241, 234)"] strong { color: #f3f6fb !important; } /* B9 — variation "Save on bills" pill (.bundle-tag.navy) had no dark * variant; .green/.blue/.orange already had ones in functions.php */ html.theme-dark .bundle-card .bundle-tag.navy { background: rgba(99, 102, 241, 0.22) !important; color: #c7d2fe !important; } html.theme-dark .bundle-card .bundle-tag.red { background: rgba(239, 68, 68, 0.22) !important; color: #fecaca !important; } /* B10 — "Update cart" button was bg-surface (dark) + navy text in dark mode */ html.theme-dark .smartio-cart-update { background: transparent; color: var(--teal-1, #7bd0ca); border-color: var(--teal-1, #7bd0ca); } html.theme-dark .smartio-cart-update:not(:disabled):hover { background: var(--teal-1, #7bd0ca); color: #0f1722; border-color: var(--teal-1, #7bd0ca); } html.theme-dark .smartio-cart-continue { color: var(--text-mid, #9fb0c4); } html.theme-dark .smartio-cart-continue:hover { color: var(--teal-1, #7bd0ca); } /* B11 — "Proceed to checkout" was being overridden by Divi's .button.alt * outline (light-blue border + transparent fill). The button is output as * a bare directly inside * .smartio-summary-card (no .wc-proceed-to-checkout wrapper in this build). * Match on the button's own classes and use !important to beat Divi. */ .smartio-summary-card a.checkout-button, .smartio-summary-card a.checkout-button.alt, .smartio-summary-card a.checkout-button.button, .smartio-summary-card a.checkout-button.button.alt, body .smartio-summary-card a.checkout-button { display: block !important; width: 100% !important; padding: 14px !important; background: #0d4877 !important; color: #fff !important; border: none !important; border-radius: 10px !important; font-family: 'D-DIN Exp', sans-serif !important; font-size: 14px !important; font-weight: 700 !important; text-align: center !important; text-decoration: none !important; margin: 18px 0 14px !important; } .smartio-summary-card a.checkout-button:hover, body .smartio-summary-card a.checkout-button:hover { background: #092f50 !important; color: #fff !important; } /* Dark mode — keep the primary-CTA hierarchy. Brand navy #0d4877 is invisible * against the dark navy page, but pale teal weakens the conversion hierarchy * (audit 2026-05-29). Use --primary-light #1a6099: navy-aligned, white text * passes WCAG AA (~5.55:1), still reads as the strongest CTA on the page. * Must match the .checkout-button.button.alt specificity (4 classes) of the * light rule above, otherwise the light rule wins the cascade. */ html.theme-dark .smartio-summary-card a.checkout-button, html.theme-dark .smartio-summary-card a.checkout-button.alt, html.theme-dark .smartio-summary-card a.checkout-button.button, html.theme-dark .smartio-summary-card a.checkout-button.button.alt, html.theme-dark body .smartio-summary-card a.checkout-button.button.alt { background: #1a6099 !important; color: #ffffff !important; } html.theme-dark .smartio-summary-card a.checkout-button.button.alt:hover { background: #2470b0 !important; color: #ffffff !important; } /* B8 — out-of-stock cart line item styling (PHP marks it with .is-oos) */ .smartio-cart-item.is-oos { opacity: .72; position: relative; } .smartio-cart-item.is-oos .smartio-qty-stepper { display: none; } .smartio-cart-oos-pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(239, 68, 68, 0.12); color: #b91c1c; border: 1px solid rgba(239, 68, 68, 0.32); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; } html.theme-dark .smartio-cart-oos-pill { background: rgba(239, 68, 68, 0.20); color: #fecaca; border-color: rgba(239, 68, 68, 0.45); } /* --------------------------------------------------------------------- * 9. P2 contrast bumps — 2026-05-22 * * Solid colors that fell just short of WCAG AA (4.5 body / 3.0 large). * B12/B13/B14 from the audit were false positives caused by my contrast * tool not blending rgba alphas — actual visual contrast is fine. * ------------------------------------------------------------------- */ /* B15 — footer column links in dark mode were #9fb0c4 on navy → 4.29. * Bump to #b9c5d4 (~5.0 against #0d4877) so the link list passes AA. */ html.theme-dark .footer-col a, html.theme-dark .footer-col h4, html.theme-dark .footer-link, html.theme-dark .footer-contact-link, html.theme-dark .footer-col a:visited { color: #b9c5d4 !important; } html.theme-dark .footer-col a:hover, html.theme-dark .footer-link:hover { color: #ffffff !important; } /* B18 — strikethrough old prices were #a8b8cc on white in LIGHT mode → 2.02. * Darken to a slightly stronger grey (about 4.0). Applies in both themes, * but light-mode-only by where the rule fires — the dark variants of these * elements use the existing del color rules. */ .product-card-old, .card-price del, .bestseller-price del, .hero-best-price del, .smartio-summary-row .smartio-strike, .product-card-price del, ins + del, del.amount, del .woocommerce-Price-amount { color: #556b85 !important; /* light-mode: 5.41 on white */ } /* In dark mode, restore the muted (lighter) grey so it doesn't fight the * teal current price. */ html.theme-dark .product-card-old, html.theme-dark .card-price del, html.theme-dark .bestseller-price del, html.theme-dark .hero-best-price del, html.theme-dark .product-card-price del, html.theme-dark del.amount, html.theme-dark del .woocommerce-Price-amount { color: #8896a8 !important; } /* B19 — "In stock only" toggle was #16a34a on #ecfdf5 → 3.13. * Darken to forest green #166534 → ~6.8 on the same mint bg. */ .toggle-pill.on { color: #166534 !important; } .toggle-pill.on .toggle-dot { background: #166534 !important; } html.theme-dark .toggle-pill.on { background: rgba(22, 163, 74, 0.18) !important; color: #86efac !important; border-color: rgba(22, 163, 74, 0.45) !important; } /* B20 — sale badges were #fff on #ef4444 / #e53e3e → 4.13. * Darken the red to #b91c1c (Tailwind red-700) → 5.94 with white text. * Two markup variants exist: .card-badge.sale (shop archive) and * .product-card-badge.badge-sale (home featured cards). */ .card-badge.sale, .product-card-badge.badge-sale, .product-card-sale, .product-card-discount, .smartio-sale-badge { background: #b91c1c !important; color: #ffffff !important; } html.theme-dark .card-badge.sale, html.theme-dark .product-card-badge.badge-sale, html.theme-dark .product-card-sale, html.theme-dark .product-card-discount { background: #b91c1c !important; color: #ffffff !important; } /* --------------------------------------------------------------------- * 10. P3 polish — 2026-05-22 * ------------------------------------------------------------------- */ /* B23 — WhatsApp green CTAs were #25D366 → 1.98 on white text. * Use a darker brand-aligned green that passes AA (4.7 ratio) while * staying recognizably "WhatsApp green". Apply globally; brand * familiarity is preserved by the WhatsApp logo on the button. */ .btn-wa, .btn-whatsapp, a.btn-wa, .hero-cta-wa, .smartio-summary-wa, .smartio-cart-empty-cta.is-wa, .smartio-wa-cta, a[href*="wa.me/"].btn, a[href*="wa.me/"].smartio-summary-wa { background: #0c7669 !important; /* darker WA green — 5.55 on white */ color: #ffffff !important; } .btn-wa:hover, a.btn-wa:hover, .smartio-summary-wa:hover, a[href*="wa.me/"].btn:hover { background: #075E54 !important; /* WhatsApp's official dark green */ color: #ffffff !important; } /* B24 — "Choose your setup: …" red-700 prompt looked like an error. * Switch to brand navy in light, brand teal in dark for accent feel. */ .bundle-label .bundle-prompt-q { color: #0d4877 !important; font-weight: 700; } html.theme-dark .bundle-label .bundle-prompt-q { color: #7bd0ca !important; } /* --------------------------------------------------------------------- * 11. H3 — FAQ category section header contrast fix — 2026-05-23 * In dark mode, Divi fullwidth-header modules (et_pb_bg_layout_light) that * sit between FAQ accordion groups have white backgrounds but near-white text * (from the global html.theme-dark h2 rule). Fix: give them navy bg so text * stays readable. Scoped to .smartio-branded-page (FAQ page only). * ------------------------------------------------------------------- */ html.theme-dark .smartio-branded-page .et_pb_fullwidth_header.et_pb_bg_layout_light { background-color: #0d4877 !important; } html.theme-dark .smartio-branded-page .et_pb_section:has(.et_pb_fullwidth_header.et_pb_bg_layout_light) { background-color: #0d4877 !important; } /* --------------------------------------------------------------------- * 12. Wishlist heart button — dark-mode contrast — 2026-05-26 * .smartio-wishlist-btn--card hardcodes a white background, and the icon * color resolves to --text (light #e9eef5 in dark mode) → heart vanishes * into the white circle. Swap the card/wishlist-page button to a dark * translucent surface so the light icon reads. Also retint the pressed * (filled) state from brand navy to teal since navy on dark is invisible. * ------------------------------------------------------------------- */ html.theme-dark .smartio-wishlist-btn--card, html.theme-dark .smartio-wishlist-btn--wishlist { background: rgba(15, 23, 34, 0.85); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } html.theme-dark .smartio-wishlist-btn[aria-pressed="true"] .smartio-wishlist-btn-icon--filled { color: var(--teal-1, #7bd0ca); } html.theme-dark .smartio-wishlist-btn:hover { color: var(--teal-1, #7bd0ca); } /* --------------------------------------------------------------------- * 13. Audit follow-ups — 2026-05-29 * * Sweep based on a full-site audit (homepage/shop/PDP/cart/checkout/account * + utility pages, both themes, both mobile + desktop). See also the * matching :hover/contrast fixes inline. * ------------------------------------------------------------------- */ /* P0 #1 — Checkout "Place order" CTA was using --navy on dark page → 2.2:1. * The mu-plugin (smartio-checkout.php) scopes its styles under .smartio-checkout * with its own --navy var which doesn't get re-themed in dark mode. Lift the * button to --primary-light navy so white text passes WCAG AA. Same idea as the * cart B11 fix above, but for the standalone checkout template. */ html.theme-dark .smartio-checkout .btn-primary, html.theme-dark .smartio-checkout .btn.btn-primary, html.theme-dark .smartio-checkout .place-order-desktop, html.theme-dark .smartio-checkout .sticky-place-btn, html.theme-dark .smartio-checkout .btn-coupon { background: #1a6099 !important; color: #ffffff !important; } html.theme-dark .smartio-checkout .btn-primary:hover, html.theme-dark .smartio-checkout .btn-coupon:hover { background: #2470b0 !important; color: #ffffff !important; } /* Keep disabled state legible (button stays #1a6099 with reduced opacity). */ html.theme-dark .smartio-checkout .btn-primary[disabled] { background: #1a6099 !important; opacity: 0.55 !important; color: #ffffff !important; } /* P0 #3 — Mobile drawer was rendering with a light surface even when the * page is in dark mode. The drawer panel itself uses var(--bg-surface) which * SHOULD be themed, but a few hardcoded white surfaces inside (bestseller * tile image bg, drawer head, etc.) punch through. Pin them explicitly. */ html.theme-dark .smartio-drawer-panel { background: #18222f !important; } html.theme-dark .smartio-drawer-head { background: #18222f !important; border-bottom-color: #243245 !important; } html.theme-dark .smartio-drawer-foot { background: #18222f !important; border-top-color: #243245 !important; } html.theme-dark .smartio-drawer-item-title { color: #f3f6fb !important; } html.theme-dark .smartio-drawer-item-sub, html.theme-dark .smartio-drawer-chips { color: #9fb0c4 !important; } html.theme-dark .smartio-drawer-bs-img { /* White plate so the product photo shows at full brightness (was a dark * plate + mix-blend:multiply, which darkened the product). */ background: #ffffff !important; } html.theme-dark .smartio-drawer-bs-img img { mix-blend-mode: normal !important; filter: none !important; } html.theme-dark .smartio-drawer-bs-name { color: #e9eef5 !important; } html.theme-dark .smartio-drawer-bs-brand { color: #9fb0c4 !important; } /* P0 #4 — Product-image plates in dark mode. * Previous approach: dark (#1a2535) plate + mix-blend-mode:multiply on the * to fold white product PNGs into the dark card. Problem: multiply over * a dark backdrop also darkens the PRODUCT itself, so photos came out muddy * and hard to see ("images too dark in dark mode"). New approach: a clean * white plate with NO blend/filter, so the product shows at full brightness. * The white tile (rounded via the base CSS) reads as an intentional product * swatch — the standard dark-mode e-commerce pattern — instead of a darkened * rectangle. */ html.theme-dark .hero-best-img, html.theme-dark .bestseller-img, html.theme-dark .product-card-image, html.theme-dark .smartio-mega-feat-img { background: #ffffff !important; } html.theme-dark .hero-best-img img, html.theme-dark .bestseller-img img, html.theme-dark .product-card-image img, html.theme-dark .smartio-mega-feat-img img { mix-blend-mode: normal !important; filter: none !important; } /* P1 #6 — "Works With" compat cards on PDP were rendering pure white in * dark mode despite an existing override at single-product.php:1389. Force * the dark surface with explicit !important so no specificity quirk leaves * them as white islands. */ html.theme-dark .compat-item, html.theme-dark .compat-logo { background: var(--bg-surface, #18222f) !important; border-color: var(--border, #243245) !important; } html.theme-dark .compat-logo { /* Slightly elevated tile so the brand logo (rendered on light) reads */ background: #ffffff !important; } html.theme-dark .compat-name { color: #f3f6fb !important; } html.theme-dark .compat-note { color: #9fb0c4 !important; } /* P1 #7 — Compare-products table on PDP — was a white island. Existing rule * targets .compare-section-head only. Sweep the rest. */ html.theme-dark .compare-section, html.theme-dark .compare-table, html.theme-dark .compare-row, html.theme-dark .compare-row-label, html.theme-dark .compare-row-label-spacer, html.theme-dark .compare-product-col, html.theme-dark .compare-product-head { background: var(--bg-surface, #18222f) !important; border-color: var(--border, #243245) !important; color: #e9eef5 !important; } html.theme-dark .compare-section .compare-cell, html.theme-dark .compare-table .compare-cell { background: transparent !important; color: #e9eef5 !important; border-color: var(--border, #243245) !important; } html.theme-dark .compare-product-col.is-current { background: rgba(123, 208, 202, 0.06) !important; border-color: var(--teal-1, #7bd0ca) !important; } /* P1 #8 — Cream "Click here to watch the quick installation video" banner. * Catches both the existing #f4f1ea variants AND a broader cream/beige * inline-style range some PDPs use (#fef3c7, #fffbe6). */ html.theme-dark [style*="#fef3c7"], html.theme-dark [style*="#FEF3C7"], html.theme-dark [style*="#fffbe6"], html.theme-dark [style*="#FFFBE6"], html.theme-dark [style*="rgb(254,243,199)"], html.theme-dark [style*="rgb(254, 243, 199)"], html.theme-dark [style*="rgb(255,251,230)"], html.theme-dark [style*="rgb(255, 251, 230)"] { background-color: rgba(123, 208, 202, 0.08) !important; background-image: none !important; color: #e9eef5 !important; border-left: 3px solid var(--teal-1, #7bd0ca) !important; } html.theme-dark [style*="#fef3c7"] a, html.theme-dark [style*="#fffbe6"] a { color: var(--teal-1, #7bd0ca) !important; text-decoration: underline; } /* P1 #10 — nav-icon-btn hover in dark mode was setting `color: var(--primary)` * (#0d4877 navy) against `bg: var(--bg)` (#0f1722) → 1.9:1. Hover icon * essentially vanished. Use the brand teal + a faintly elevated surface so * the hover is clearly visible. */ html.theme-dark .nav-icon-btn:hover, html.theme-dark .smartio-theme-toggle:hover { color: var(--teal-1, #7bd0ca) !important; background: rgba(123, 208, 202, 0.10) !important; } /* P1 #11 — Hero "trust pills" (6-month Warranty, Cash on Delivery, etc.) * used --text-soft (#6e8198) on the navy hero → 2.2:1. Bump muted hero text * to a lighter blue-gray that passes WCAG AA. Scoped to the hero so we don't * over-brighten muted text elsewhere. */ html.theme-dark .hero .trust-pill, html.theme-dark .hero-trust-pill, html.theme-dark .hero-trust-row > *, html.theme-dark .hero-trust { color: #c4d2e4 !important; } html.theme-dark .hero .trust-pill svg, html.theme-dark .hero-trust-pill svg, html.theme-dark .hero-trust svg { color: var(--teal-1, #7bd0ca) !important; } /* P1 #14 — Shop archive default products-per-page is 9 (3×3 in admin), which * leaves a single orphan card in row 3 of the 4-col desktop grid. Force 12 * per page so rows are always complete. (Set via filter in functions.php.) */ /* CSS-only note: the actual fix is server-side; this comment is a beacon. */ /* --------------------------------------------------------------------- * 14. P2 polish — 2026-05-29 * * Lower-priority refinements identified during the same audit pass. None * of these are bugs — they're calibration tweaks to lift perceived * quality across the most-visited templates. * ------------------------------------------------------------------- */ /* P2 #1 — Product card hover affordance. * Cards already had translateY + shadow on hover but the border-color * shift was too subtle to register. Use a 2px brand-aligned border so * the hover state is obvious, and bump the lift slightly. Applied across * homepage, shop archive, related-products, and mega-nav featured. */ .product-card, .bestseller-card, .smartio-mega-col-featured-products { transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; } .product-card:hover, .bestseller-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px -12px rgba(13, 72, 119, 0.22); border-color: var(--teal-4, #61afcc); } html.theme-dark .product-card:hover, html.theme-dark .bestseller-card:hover { box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.55); border-color: var(--teal-1, #7bd0ca); } /* P2 #2 — "View all" / "All products" section-link polish. * Bump weight, slightly stronger color in dark, and a CSS-only arrow * nudge by transitioning padding-right (the trailing `→` glyph moves * right on hover without needing a template edit). */ .section-link { font-weight: 700 !important; padding-right: 0; transition: padding-right 180ms ease, color 180ms ease; text-decoration: none !important; } .section-link:hover { padding-right: 6px; color: var(--primary-dark, #092f50) !important; text-decoration: none !important; } html.theme-dark .section-link { color: var(--teal-1, #7bd0ca) !important; } html.theme-dark .section-link:hover { color: #a6e0db !important; } /* P2 #3 — Pack-selector (.bundle-card) active state strengthen. * Was a soft tint that read more like a hover than a confirmed pick. * Thicker border + a brand-tinted inner glow makes the active pack * unmistakable on both themes. */ .bundle-card { transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease, transform 180ms ease; } .bundle-card.active { border-width: 2px !important; box-shadow: 0 0 0 3px rgba(13, 72, 119, 0.10), inset 0 0 0 1px rgba(13, 72, 119, 0.05) !important; } html.theme-dark .bundle-card.active { box-shadow: 0 0 0 3px rgba(123, 208, 202, 0.18), inset 0 0 0 1px rgba(123, 208, 202, 0.10) !important; } /* P2 #4 — Top-5 best-seller card breathing room. * Card padding was 18px which cramps the brand + title + price stack. * Bump to 20px and lift name line-height for easier scanning. */ .bestseller-card .bestseller-meta, .bestseller-card .bestseller-body { padding: 18px 18px 20px; } .bestseller-card .bestseller-name { line-height: 1.35; } /* P2 #5 — Category tile (.cat-card) hover polish. * Existing border-color shift on hover is fine but the lift is muted. * Add a small teal accent ring and slightly more lift to make the * 5-up category strip feel responsive. */ .cat-card { transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; } .cat-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -10px rgba(13, 72, 119, 0.18), 0 0 0 3px rgba(123, 208, 202, 0.10); border-color: var(--teal-4, #61afcc); } html.theme-dark .cat-card:hover { box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.55), 0 0 0 3px rgba(123, 208, 202, 0.16); border-color: var(--teal-1, #7bd0ca); } /* P2 #6 — Focus-ring consistency (accessibility polish). * Existing :focus-visible used 2px teal-1 across a/button/input/select, * but missed `[role="button"]`, summary elements, and cards-with-anchors. * Sweep those in so keyboard users get the same affordance everywhere. */ .product-card a:focus-visible, .bestseller-card:focus-visible, .cat-card:focus-visible, .smartio-drawer-item:focus-visible, .bundle-card:focus-visible, .compat-item:focus-visible, [role="button"]:focus-visible, summary:focus-visible { outline: 2px solid var(--teal-1, #7bd0ca) !important; outline-offset: 2px; border-radius: 8px; } /* P2 #7 — Footer review-bar separation. * `.footer-reviews` sits on --primary-dark (#092f50) directly above the * main footer on --primary (#0d4877). The transition is subtle. Give the * row a thin teal top border so the reviews bar reads as its own band. */ .footer-reviews { border-top: 1px solid rgba(123, 208, 202, 0.16); } .review-badge-link { transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease; } .review-badge-link:hover { transform: translateY(-1px); } /* ════════════════════════════════════════════════════════════════════════ DARK-MODE GAP FIXES — manual toggle on light-OS devices (2026-06-04) -------------------------------------------------------------------------- woocommerce/single-product.php puts its full dark palette behind @media (prefers-color-scheme: dark); functions.php (~L911-971) mirrors MOST of it under html.theme-dark for the manual toggle — but a handful of classes were never mirrored, so on a LIGHT-OS device the manual toggle left them in their light (navy-on-dark / white-card) state. Mirror the stragglers here. ════════════════════════════════════════════════════════════════════════ */ /* PDP delivery ETA — base is color:var(--primary) (navy) → invisible on dark. */ html.theme-dark .sdel-eta { color: var(--teal-1, #7bd0ca) !important; } html.theme-dark .sdel-eta .sdel-range { color: var(--text-mid, #9fb0c4) !important; } html.theme-dark .sdel-note-warn { background: rgba(245, 158, 11, 0.12) !important; color: #fcd34d !important; border-color: rgba(245, 158, 11, 0.30) !important; } /* PDP WhatsApp "offline" pill + its ETA (online variant is mirrored already). */ html.theme-dark .wa-offline { background: rgba(245, 158, 11, 0.10) !important; color: #fcd34d !important; border-color: rgba(245, 158, 11, 0.35) !important; } html.theme-dark .wa-offline .wa-next { color: #fbbf24 !important; } /* PDP "Get the app" card cluster — never mirrored, so the card stayed white. */ html.theme-dark .app-card { background: var(--bg-surface, #18222f) !important; border-color: var(--border, #243245) !important; } html.theme-dark .app-card:hover { border-color: var(--teal-4, #61afcc) !important; } html.theme-dark .app-card-icon { background: var(--bg, #0f1722) !important; } html.theme-dark .app-store-pill { background: var(--bg, #0f1722) !important; border-color: var(--border, #243245) !important; color: var(--text-mid, #9fb0c4) !important; } /* PDP trust pills — light pill left sitting on the dark page. */ html.theme-dark .trust-pill { background: var(--bg-surface, #18222f) !important; border-color: var(--border, #243245) !important; color: var(--text-mid, #9fb0c4) !important; } /* ── /my-account auth views (2026-06-04) ────────────────────────────────── The redesigned login/register cards (.auth-card) color the heading and .auth-link with var(--primary) (navy) → unreadable on the dark card. The Create Account submit also carries an inline teal-4 (#61afcc) background with white text = 2.47 contrast (fails AA) in BOTH themes. */ html.theme-dark .auth-card h1 { color: var(--text, #e9eef5) !important; } html.theme-dark .auth-link { color: var(--teal-1, #7bd0ca) !important; } html.theme-dark .auth-link:hover { color: #ffffff !important; } /* Create Account → match the navy primary "Sign In" button (white-on-navy ≈ 9:1). */ .auth-btn[style*="teal-4"] { background: var(--primary, #0d4877) !important; } .auth-btn[style*="teal-4"]:hover { background: var(--primary-dark, #092f50) !important; } /* ── Mega-nav panel accents (2026-06-04) ────────────────────────────────── smartio-mega-nav.php colors its accent text (featured price, hovered/active category link, "View All / View More", hovered use-case row) with var(--primary) = #0d4877 navy. smartio-dark-mode.php never redefines --primary, so on a LIGHT-OS device the manual toggle leaves those accents as navy-on-dark-surface (≈1.6:1, fails AA). The panel container itself themes fine (it uses --bg-surface / --border / --text, which ARE mirrored). Swap the navy accents to --teal-1, exactly as the product-card prices were handled. */ html.theme-dark .smartio-mega-feat-price { color: var(--teal-1, #7bd0ca) !important; } html.theme-dark .smartio-mega-list a:hover, html.theme-dark .smartio-mega-list a.is-active, html.theme-dark .smartio-mega-iconlist a:hover { color: var(--teal-1, #7bd0ca) !important; } html.theme-dark .smartio-mega-all, html.theme-dark .smartio-mega-more { color: var(--teal-1, #7bd0ca) !important; } html.theme-dark .smartio-mega-all:hover, html.theme-dark .smartio-mega-more:hover, html.theme-dark .smartio-mega-foot:hover { color: var(--teal-4, #61afcc) !important; } /* Hovered use-case chip: navy text on a light-teal chip is correct in light mode; in dark the chip is var(--teal-1) so keep the navy ink for contrast. */ html.theme-dark .smartio-mega-iconlist a:hover .smartio-mega-iconlist-icon { color: var(--primary, #0d4877) !important; } /* ════════════════════════════════════════════════════════════════════════ 15. Site-wide --text-soft contrast — empirical sweep (2026-06-05) -------------------------------------------------------------------------- --text-soft is defined INLINE in each standalone template's own :root (there is no shared root), so the global bump in smartio-dark-mode.php never reached the templates' own values. Measured failures site-wide: • light: #a8b8cc on white = 2.02:1 (fails AA) • dark: #6e8198 on dark surface = 4.02:1 (fails AA) …used for product counts, stat sublabels, card descriptions, "or" dividers, strikethrough prices, breadcrumbs. Redefine the token on : custom properties resolve from the nearest ancestor, so body wins over each template's :root REGARDLESS of inline-style load order. Govee is excluded in light (always-dark page, no theme class — darkening would hurt it). */ html:not(.theme-dark) body:not(.smartio-govee-page) { --text-soft: #64748b; } /* light → 4.76:1 on white */ html.theme-dark body { --text-soft: #8597ad; } /* dark → 5.4–6.0:1 on dark surfaces */ /* ════════════════════════════════════════════════════════════════════════ 16. WhatsApp-green CTAs + Sonoff teal buttons — empirical sweep (2026-06-05) ════════════════════════════════════════════════════════════════════════ */ /* WhatsApp buttons still on bright #25D366 (white text = 1.98:1, fails AA). B23 standardized classed WA buttons to #0c7669 (5.5:1); these slipped through: the React homepage buttons set their green via an INLINE style, and the slide- cart drawer CTA uses .smartio-drawer-cta.wa. A wa.me link WITH an inline background is always a button (never body text), so this is safe. */ a[href*="wa.me/"][style*="ackground"], a[href*="api.whatsapp.com"][style*="ackground"], .smartio-drawer-cta.wa { background: #0c7669 !important; } a[href*="wa.me/"][style*="ackground"]:hover, .smartio-drawer-cta.wa:hover { background: #075E54 !important; } /* Sonoff solid-teal CTAs/badges: white text on #61afcc (bg-teal) = 2.47:1. Darken the teal to #2c7a8f (4.9:1) ONLY where it carries white text — the decorative bg-teal dots/progress bars are left untouched. */ .sonoff-landing-page .bg-teal.text-white { background-color: #2c7a8f !important; } .sonoff-landing-page .bg-teal.text-white:hover { background-color: #246575 !important; } /* ════════════════════════════════════════════════════════════════════════ 17. delivery-info navy chips + shared breadcrumb-back + about WA — sweep (2026-06-05) ════════════════════════════════════════════════════════════════════════ */ /* .del-chip / .del-opt-tag.is-blue color their text with var(--primary) (navy) on a faint navy tint — invisible on the dark surface (1.69:1). Re-tint both text and surface to teal in dark mode. Light mode is unaffected. */ html.theme-dark .del-chip, html.theme-dark .del-opt-tag.is-blue { background: rgba(123, 208, 202, 0.10) !important; color: var(--teal-1, #7bd0ca) !important; border-color: rgba(123, 208, 202, 0.24) !important; } /* Shared "← Back" breadcrumb link is brand navy → 1.69:1 on the dark page (the existing .breadcrumb a/span rule didn't cover this separate class). */ html.theme-dark .breadcrumb-back { color: var(--teal-1, #7bd0ca) !important; } /* About-page "Ask about pickup on WhatsApp" CTA still on bright #25D366 (white text 1.98:1) — bring it to the brand WA green like the others. */ .pickup-cta { background: #0c7669 !important; } .pickup-cta:hover { background: #075E54 !important; } /* ════════════════════════════════════════════════════════════════════════ 18. PDP a11y contrast — rating link + verified badge (2026-06-08) ════════════════════════════════════════════════════════════════════════ */ /* ".N review(s)" link is brand navy (var(--primary)) → ~1.9:1 on the dark info surface. Re-tint to teal in dark mode (same pattern as §17). */ html.theme-dark .rating-text a { color: var(--teal-1, #7bd0ca) !important; } /* "✓ Verified Purchase" badge is dark green (#166534) → ~2.3:1 on the dark review card. Lift to a brighter green in dark mode; light mode unaffected. */ html.theme-dark .review-verified { color: #34d399 !important; } /* ════════════════════════════════════════════════════════════════════════ 19. Blog templates — white cards keep dark heading ink in dark mode (2026-06-11) -------------------------------------------------------------------------- template-blog-index.php (.bi-*) and single-post.php (.sp-*) keep their card chrome on white (--surface) in BOTH themes: the article body ships its own inline styles that assume a white surface, so the surrounding cards stay white to match. But the global `html.theme-dark h1..h6 { #f3f6fb }` rule (§1) forces every heading near-white — so on the dark page the "Most read" card label and the related/index card
titles rendered white-on-white (invisible). Re-assert each template's designed dark ink for the headings that sit on these white cards. NOT touched: section headings like "Read next" (.sp-related-h2) sit directly on the dark page background, not on a white card, so they correctly stay light. The article body (.sp-prose / .smartio-post) is also left alone — it ships its own white-surface typography that already wins the cascade. ════════════════════════════════════════════════════════════════════════ */ /* "Most read" sidebar card label (an
) — restore the muted ink it uses in light mode. --ink-soft is NOT redefined by the dark theme, so it stays the intended #6b7a8d (≈4.7:1 on the white card). */ html.theme-dark .bi-aside-title, html.theme-dark .sp-aside-title { color: var(--ink-soft, #6b7a8d) !important; } /* Post-grid (blog index) + "Read next" (single post) card titles are
on the white card body — restore near-black --ink (≈16:1 on white). */ html.theme-dark .bi-card h3, html.theme-dark .sp-card h3 { color: var(--ink, #111827) !important; } /* ════════════════════════════════════════════════════════════════════════ 20. Reviews trust wall (smartio-reviews plugin) — dark skin + polish (2026-06-22) -------------------------------------------------------------------------- The Google/Facebook trust wall (`.smartio-reviews-wrap`, shortcode [smartio_reviews], on the homepage + PDPs) is a server-rendered, CSS-variable-driven widget with no dark-mode branch of its own. Three fixes: (a) Dark skin — its cards stayed pure white on the dark page (looked like a foreign embed). We remap its --sr-* design tokens onto the theme's dark palette so the cards become the same elevated navy surface as the rest of the page. Variable remap is element-scoped, so it wins over the widget's :root defaults regardless of CSS load order. (b) Count mismatch — the summary printed "Based on 537 reviews" (the true Google+FB total) beside a star-distribution built only from the ~15 reviews synced locally → "5★ 15 / 0 / 0", which reads as broken. The review APIs return total + average only (no per-star breakdown for all 537), so the honest fix is to drop the distribution bars and keep the confident "5.0 ★★★★★ · Based on 537 reviews". (c) Mobile slider — the plugin's own @media(max-width:768px) rule (full-width cards, hidden arrows) is present in the CSSOM but LOSES the cascade: LiteSpeed splits/reorders the combined CSS so the base 50%-width rule wins, cramming 2 half-cards between overlapping arrows. We re-assert it at higher specificity + !important so it survives the reorder. The slider JS already computes perView=1 below 769px and steps by the measured card width, so full-width cards advance fine. ════════════════════════════════════════════════════════════════════════ */ /* (b) Count-mismatch fix — both themes. Hide the sample-only distribution bars and centre the remaining score + source badges. */ .smartio-reviews-wrap .sr-summary-bars { display: none !important; } .smartio-reviews-wrap .sr-summary { justify-content: center; gap: 40px; } .smartio-reviews-wrap .sr-summary-sources { margin-left: 0; } /* (c) Mobile slider — one full-width, readable card; no overlapping arrows. Higher specificity + !important beats the LiteSpeed-reordered base rule. */ @media (max-width: 768px) { .smartio-reviews-wrap .sr-slider .sr-card { flex: 0 0 calc(100% - 8px) !important; margin: 0 4px !important; } .smartio-reviews-wrap .sr-slider-btn { display: none !important; } .smartio-reviews-wrap .sr-summary { gap: 18px; } } /* (a) Dark skin — remap the widget's tokens onto the theme dark palette. */ html.theme-dark .smartio-reviews-wrap { --sr-card-bg: var(--bg-surface, #18222f); --sr-bg: var(--bg, #0f1722); --sr-border: var(--border, #243245); --sr-text: #d7e0ec; --sr-text-muted: var(--text-soft, #8597ad); --sr-dark: #f3f6fb; --sr-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); --sr-shadow-hover: 0 16px 44px rgba(0, 0, 0, 0.55); } /* Review body uses `.sr-card-text p { color: var(--sr-text) }` (0,1,1), which the Divi `html.theme-dark p` rule (§1, 0,1,2) would otherwise override — re-assert the widget colour at higher specificity. */ html.theme-dark .smartio-reviews-wrap .sr-card-text p { color: #d7e0ec; } html.theme-dark .smartio-reviews-wrap .sr-total-count { color: var(--text-soft, #8597ad); } /* Source pills: the 8–10% brand tint is invisible on navy — lift the chip background and brighten the label so Google/Facebook stay legible. */ html.theme-dark .smartio-reviews-wrap .sr-source-google { background: rgba(66, 133, 244, 0.20); color: #8ab4f8; } html.theme-dark .smartio-reviews-wrap .sr-source-facebook { background: rgba(24, 119, 242, 0.22); color: #79a9ff; } html.theme-dark .smartio-reviews-wrap .sr-card-source.sr-source-google { background: rgba(66, 133, 244, 0.20); } html.theme-dark .smartio-reviews-wrap .sr-card-source.sr-source-facebook { background: rgba(24, 119, 242, 0.22); } /* ════════════════════════════════════════════════════════════════════════ 21. PDP photo-review lightbox — dark surface in dark mode (2026-07-10) -------------------------------------------------------------------------- `.review-lightbox-card` shipped `background:white` (single-product-v2.css L704) with NO dark override, so in dark mode it rendered a glaring white modal whose body text used the global dark tokens: `--text` (#e9eef5) on white ≈ 1.1:1 — the reviewer name and review body were invisible (only the date's slate `--text-soft` survived). Re-skin the whole modal to the dark surface so the already-light text tokens read correctly, and darken the image letterbox so it isn't a bright frame around the photo. The verified badge (§18, #34d399) and the near-white name/text now sit on #18222f, which is what those fixes always assumed. Light mode is untouched. ════════════════════════════════════════════════════════════════════════ */ html.theme-dark .review-lightbox-card { background: var(--bg-surface, #18222f) !important; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.65) !important; } html.theme-dark .review-lightbox-media { background: var(--bg, #0f1722) !important; } /* Date used --text-soft (#6e8198 ≈ 3.4:1 on #18222f) — lift to --text-mid. */ html.theme-dark .review-lightbox-body .review-date { color: var(--text-mid, #9fb0c4) !important; } /* Keep the white close pill visible without floating as a bare blob. */ html.theme-dark .review-lightbox-close { border: 1px solid rgba(123, 208, 202, 0.35) !important; }