/* BeeQR Dark Mode Overlay * Activated by setting [data-bs-theme="dark"] on . * Keep this file small: override Bootstrap CSS variables and a few * specific BeeQR surfaces. Avoid restyling components wholesale. */ html[data-bs-theme="dark"] { /* Match Bootstrap navbar bg-dark (#212529) */ --bs-body-bg: #212529; --bs-body-color: #e6e6e6; --bs-emphasis-color: #f5f5f5; --bs-secondary-color: #b8b8b8; --bs-tertiary-color: #8a8a8a; --bs-body-bg-rgb: 33, 37, 41; --bs-body-color-rgb: 230, 230, 230; --bs-secondary-bg: #2a2e33; --bs-secondary-bg-rgb: 42, 46, 51; --bs-tertiary-bg: #343a40; --bs-tertiary-bg-rgb: 52, 58, 64; --bs-border-color: #3d4248; --bs-border-color-translucent: rgba(255, 255, 255, 0.12); --bs-link-color: #6ea8fe; --bs-link-hover-color: #9ec5fe; --bs-link-color-rgb: 110, 168, 254; --bs-heading-color: #f5f5f5; color-scheme: dark; } /* Smooth transitions between themes */ html, body, .card, .modal-content, .popup-box, .dropdown-menu, .form-control, .form-select, .form-check-input, .list-group-item, .navbar, .toast, .table, .btn-outline-light, .btn-outline-dark, .btn-light, .btn-dark, .bg-white, .bg-light, .bg-body, .bg-body-tertiary { transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease; } /* ---------- Dark mode surface overrides ---------- */ html[data-bs-theme="dark"] body { background-color: var(--bs-body-bg); color: var(--bs-body-color); } html[data-bs-theme="dark"] .bg-white, html[data-bs-theme="dark"] .bg-light, html[data-bs-theme="dark"] .bg-body, html[data-bs-theme="dark"] .bg-body-tertiary { background-color: var(--bs-secondary-bg) !important; color: var(--bs-body-color); } html[data-bs-theme="dark"] .text-dark { color: var(--bs-body-color) !important; } html[data-bs-theme="dark"] .text-muted, html[data-bs-theme="dark"] .text-secondary { color: var(--bs-secondary-color) !important; } html[data-bs-theme="dark"] .text-black, html[data-bs-theme="dark"] .text-body { color: var(--bs-body-color) !important; } /* Cards, modals, popups, toasts */ html[data-bs-theme="dark"] .card, html[data-bs-theme="dark"] .modal-content, html[data-bs-theme="dark"] .popup-box, html[data-bs-theme="dark"] .toast, html[data-bs-theme="dark"] .accordion-item, html[data-bs-theme="dark"] .accordion-button { background-color: var(--bs-secondary-bg); color: var(--bs-body-color); border-color: var(--bs-border-color); } html[data-bs-theme="dark"] .accordion-button:not(.collapsed) { background-color: var(--bs-tertiary-bg); color: var(--bs-emphasis-color); } html[data-bs-theme="dark"] .card-header, html[data-bs-theme="dark"] .card-footer, html[data-bs-theme="dark"] .modal-header, html[data-bs-theme="dark"] .modal-footer { background-color: var(--bs-tertiary-bg); border-color: var(--bs-border-color); color: var(--bs-body-color); } /* Dropdowns */ html[data-bs-theme="dark"] .dropdown-menu { background-color: var(--bs-tertiary-bg); border-color: var(--bs-border-color); color: var(--bs-body-color); } html[data-bs-theme="dark"] .dropdown-item { color: var(--bs-body-color); } html[data-bs-theme="dark"] .dropdown-item:hover, html[data-bs-theme="dark"] .dropdown-item:focus { background-color: rgba(255, 255, 255, 0.08); color: var(--bs-emphasis-color); } html[data-bs-theme="dark"] .dropdown-divider { border-color: var(--bs-border-color); } /* Forms */ html[data-bs-theme="dark"] .form-control, html[data-bs-theme="dark"] .form-select { background-color: var(--bs-tertiary-bg); color: var(--bs-body-color); border-color: var(--bs-border-color); } html[data-bs-theme="dark"] .form-control::placeholder { color: var(--bs-tertiary-color); } html[data-bs-theme="dark"] .form-control:focus, html[data-bs-theme="dark"] .form-select:focus { background-color: var(--bs-tertiary-bg); color: var(--bs-emphasis-color); border-color: #6ea8fe; box-shadow: 0 0 0 0.25rem rgba(110, 168, 254, 0.25); } html[data-bs-theme="dark"] .input-group-text { background-color: var(--bs-tertiary-bg); color: var(--bs-body-color); border-color: var(--bs-border-color); } /* Lists & tables */ html[data-bs-theme="dark"] .list-group-item { background-color: var(--bs-secondary-bg); color: var(--bs-body-color); border-color: var(--bs-border-color); } html[data-bs-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--bs-body-color); --bs-table-border-color: var(--bs-border-color); color: var(--bs-body-color); } /* Borders / dividers */ html[data-bs-theme="dark"] hr { border-color: var(--bs-border-color); opacity: 0.5; } html[data-bs-theme="dark"] .border, html[data-bs-theme="dark"] .border-top, html[data-bs-theme="dark"] .border-end, html[data-bs-theme="dark"] .border-bottom, html[data-bs-theme="dark"] .border-start { border-color: var(--bs-border-color) !important; } /* Buttons */ html[data-bs-theme="dark"] .btn-light { background-color: var(--bs-tertiary-bg); border-color: var(--bs-border-color); color: var(--bs-body-color); } html[data-bs-theme="dark"] .btn-light:hover, html[data-bs-theme="dark"] .btn-light:focus { background-color: #4a4a4a; border-color: #555; color: var(--bs-emphasis-color); } html[data-bs-theme="dark"] .btn-outline-dark { color: var(--bs-body-color); border-color: var(--bs-border-color); } html[data-bs-theme="dark"] .btn-outline-dark:hover { background-color: var(--bs-tertiary-bg); color: var(--bs-emphasis-color); } /* Close buttons (use white invert filter for visibility on dark) */ html[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* Footer container if it uses .bg-light */ html[data-bs-theme="dark"] footer.bg-light, html[data-bs-theme="dark"] .footer { background-color: var(--bs-secondary-bg) !important; color: var(--bs-body-color); } /* Loading modal overlay backdrop dims a little less in dark mode */ html[data-bs-theme="dark"] #loadingModalOverlay { background: rgba(0, 0, 0, 0.65) !important; } /* Keep navbar dark (no change) but tone the brand background so it's * not a glowing white square in dark mode. */ html[data-bs-theme="dark"] .navbar-brand .rounded.bg-white { background-color: #e6e6e6 !important; } /* Stats callout: lighter than body, dark text for legibility. * Original styling uses !important so we must too. */ html[data-bs-theme="dark"] .stats-callout { background: linear-gradient(135deg, #3a3f45 0%, #44494f 100%) !important; color: #e6e6e6 !important; border: 1px solid #4a5057 !important; } html[data-bs-theme="dark"] .stats-callout .text-muted { color: #b8b8b8 !important; } html[data-bs-theme="dark"] .stats-callout a, html[data-bs-theme="dark"] .stats-callout h3 { color: #f5f5f5 !important; } html[data-bs-theme="dark"] .stats-callout a:hover { color: #ffffff !important; } /* Page-specific overrides for Shop / Uses / How It Works / Category pages */ html[data-bs-theme="dark"] .shop-page, html[data-bs-theme="dark"] .category-page, html[data-bs-theme="dark"] .uses-page, html[data-bs-theme="dark"] .howitworks-page, html[data-bs-theme="dark"] .shop-categories, html[data-bs-theme="dark"] .category-products, html[data-bs-theme="dark"] .uses-overview, html[data-bs-theme="dark"] .uses-detailed, html[data-bs-theme="dark"] .howitworks-steps { background: var(--bs-body-bg) !important; } html[data-bs-theme="dark"] .shop-hero, html[data-bs-theme="dark"] .category-hero, html[data-bs-theme="dark"] .uses-hero, html[data-bs-theme="dark"] .howitworks-hero, html[data-bs-theme="dark"] .uses-closing, html[data-bs-theme="dark"] .howitworks-closing { background: linear-gradient(135deg, #2a2f35 0%, #212529 100%) !important; border-color: var(--bs-border-color) !important; } html[data-bs-theme="dark"] .howitworks-intro, html[data-bs-theme="dark"] .use-detail-section.layout-right { background: #2a2e33 !important; } html[data-bs-theme="dark"] .shop-hero-title, html[data-bs-theme="dark"] .category-hero-title, html[data-bs-theme="dark"] .uses-hero-title, html[data-bs-theme="dark"] .howitworks-hero-title, html[data-bs-theme="dark"] .closing-title, html[data-bs-theme="dark"] .step-title, html[data-bs-theme="dark"] .use-overview-title, html[data-bs-theme="dark"] .use-detail-headline, html[data-bs-theme="dark"] .home-use-headline, html[data-bs-theme="dark"] .benefits-title, html[data-bs-theme="dark"] .examples-title, html[data-bs-theme="dark"] .how-title, html[data-bs-theme="dark"] .how-step-title, html[data-bs-theme="dark"] .product-card-wrapper .card-title, html[data-bs-theme="dark"] .product-card-wrapper .h5, html[data-bs-theme="dark"] .category-card .card-title { color: var(--bs-emphasis-color) !important; } html[data-bs-theme="dark"] .shop-hero-subtitle, html[data-bs-theme="dark"] .shop-hero-description, html[data-bs-theme="dark"] .category-hero-subtitle, html[data-bs-theme="dark"] .uses-hero-subtitle, html[data-bs-theme="dark"] .howitworks-hero-subtitle, html[data-bs-theme="dark"] .home-use-summary, html[data-bs-theme="dark"] .intro-content, html[data-bs-theme="dark"] .step-description, html[data-bs-theme="dark"] .closing-description, html[data-bs-theme="dark"] .use-overview-intro, html[data-bs-theme="dark"] .use-detail-description, html[data-bs-theme="dark"] .use-detail-extended, html[data-bs-theme="dark"] .benefits-list li, html[data-bs-theme="dark"] .examples-list li, html[data-bs-theme="dark"] .how-step-description, html[data-bs-theme="dark"] .category-card .card-text, html[data-bs-theme="dark"] .category-card__images--placeholder { color: var(--bs-secondary-color) !important; } html[data-bs-theme="dark"] .use-detail-section { border-color: var(--bs-border-color) !important; } html[data-bs-theme="dark"] .category-card, html[data-bs-theme="dark"] .use-overview-card-inner, html[data-bs-theme="dark"] .step-card, html[data-bs-theme="dark"] .product-card-wrapper .card, html[data-bs-theme="dark"] .popup-box { background: var(--bs-secondary-bg) !important; border-color: var(--bs-border-color) !important; } html[data-bs-theme="dark"] .category-card:hover, html[data-bs-theme="dark"] .category-card:focus { border-color: var(--beeqr-yellow) !important; box-shadow: 0 8px 24px rgba(255, 193, 7, 0.2) !important; } html[data-bs-theme="dark"] .product-card-wrapper .card:hover, html[data-bs-theme="dark"] .product-card-wrapper a:focus .card, html[data-bs-theme="dark"] .product-card-wrapper a:active .card { border-color: var(--beeqr-yellow) !important; box-shadow: 0 8px 24px rgba(255, 193, 7, 0.2) !important; } html[data-bs-theme="dark"] .product-image-container { border-color: var(--bs-border-color) !important; } html[data-bs-theme="dark"] .category-card__images--placeholder { border-color: #59616a !important; } html[data-bs-theme="dark"] .image-placeholder { background: linear-gradient(135deg, #2f343a 0%, #3b424a 100%) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35); } html[data-bs-theme="dark"] .examples-list li:before { color: #a9b0b7; } html[data-bs-theme="dark"] .btn-outline-secondary { color: #c6ccd3; border-color: #5f6670; } html[data-bs-theme="dark"] .btn-outline-secondary:hover, html[data-bs-theme="dark"] .btn-outline-secondary:focus { color: #ffffff; border-color: #6f7782; background-color: #3a4048; } /* Home page mobile: Pinned Tags / Recently Viewed item cards */ html[data-bs-theme="dark"] .mobile-tag-item { background-color: #2f343a !important; border-color: var(--bs-border-color) !important; }