/* ============================================================ DARK MODE — Clube dos Descontos ============================================================ Ativado via data-theme="dark" no . Usa CSS custom properties para sobrescrever o tema claro. Transicao suave de 0.3s em background e color. ============================================================ */ /* ── Transicao suave ───────────────────────────────────── */ html[data-theme="dark"] body, html[data-theme="dark"] .main-header-v2, html[data-theme="dark"] .filter-bar-v2, html[data-theme="dark"] .content-area-v2, html[data-theme="dark"] .card, html[data-theme="dark"] .sidebar-widget-v2, html[data-theme="dark"] .custom-footer, html[data-theme="dark"] .modal-content, html[data-theme="dark"] .offcanvas { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } /* ── Root variable overrides ───────────────────────────── */ html[data-theme="dark"] { --main-bg-color: #0f1117; --text-color: #e2e0dd; --secondary-text: #9ca3af; --card-bg: #1a1b23; --hover-bg: #22232e; --primary-color: #ff3355; --bs-body-bg: #0f1117; --bs-body-color: #e2e0dd; color-scheme: dark; } /* ── Body & backgrounds globais ────────────────────────── */ html[data-theme="dark"] body { background-color: #0f1117; color: #e2e0dd; } /* ── Header / Navbar V2 ────────────────────────────────── */ html[data-theme="dark"] .main-header-v2 { background: #16171f; border-bottom-color: #2a2b35; } html[data-theme="dark"] .main-header-v2 .nav-item-v2 { color: #b0b5c0; } html[data-theme="dark"] .main-header-v2 .nav-item-v2:hover { background: #22232e; color: #e2e0dd; } html[data-theme="dark"] .main-header-v2 .nav-item-v2.highlight { background: #332a1a; color: #f5a623; } html[data-theme="dark"] .main-header-v2 .nav-item-v2.highlight:hover { background: #3d331f; } /* Logo brightness boost (mantém o logo legível) */ html[data-theme="dark"] .main-header-v2 .logo-img { filter: brightness(1.15); } /* ── Search Box V2 ─────────────────────────────────────── */ html[data-theme="dark"] .search-box-v2 { background: #1e1f2a; border-color: #2a2b35; } html[data-theme="dark"] .search-box-v2:focus-within { background: #22232e; border-color: #4b6bfb; box-shadow: 0 0 0 3px rgba(75, 107, 251, 0.15); } html[data-theme="dark"] .search-box-v2 input { color: #e2e0dd; } html[data-theme="dark"] .search-box-v2 input::placeholder { color: #6b7280; } /* ── Dropdown Menus (Categorias / Lojas) ───────────────── */ html[data-theme="dark"] .lojas-dropdown-menu-v2, html[data-theme="dark"] .categorias-dropdown-menu-v2 { background: #1a1b23; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); } html[data-theme="dark"] .lojas-dropdown-menu-v2::before, html[data-theme="dark"] .categorias-dropdown-menu-v2::before { border-bottom-color: #1a1b23; } html[data-theme="dark"] .lojas-dropdown-menu-v2 a, html[data-theme="dark"] .categorias-dropdown-menu-v2 a { color: #b0b5c0; } html[data-theme="dark"] .lojas-dropdown-menu-v2 a:hover, html[data-theme="dark"] .categorias-dropdown-menu-v2 a:hover { background: #22232e; color: #e2e0dd; } /* ── Filter Bar V2 ─────────────────────────────────────── */ html[data-theme="dark"] .filter-bar-v2 { background: #16171f; border-bottom-color: #2a2b35; } html[data-theme="dark"] .filter-tab-v2 { color: #8b92a0; } html[data-theme="dark"] .filter-tab-v2:hover { color: #e2e0dd; background: #1e1f2a; } html[data-theme="dark"] .filter-tab-v2.active { color: #6b9fff; border-bottom-color: #6b9fff; } html[data-theme="dark"] .filter-tab-v2.cupons-tab { background: #332a1a; color: #f5a623; } html[data-theme="dark"] .filter-tab-v2.cupons-tab:hover { background: #3d331f; color: #fbbf24; } /* ── WhatsApp Button (Filter Bar) ──────────────────────── */ html[data-theme="dark"] .whatsapp-btn-detailed { color: #4ade80; } html[data-theme="dark"] .whatsapp-btn-detailed:hover { background-color: rgba(34, 197, 94, 0.1); color: #4ade80; } /* ── Content Area V2 ───────────────────────────────────── */ html[data-theme="dark"] .content-area-v2 { background: #16171f; } /* ── Product Cards ─────────────────────────────────────── */ html[data-theme="dark"] .card, html[data-theme="dark"] .promo-card { background: #1a1b23 !important; border-color: #2a2b35 !important; } html[data-theme="dark"] .product-card-hover:hover { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35) !important; } html[data-theme="dark"] .card-body { color: #e2e0dd; } html[data-theme="dark"] .card-title a, html[data-theme="dark"] .card-title { color: #e2e0dd !important; } html[data-theme="dark"] .product-title { color: #e2e0dd; } /* Image container background */ html[data-theme="dark"] .img-container, html[data-theme="dark"] .ratio.bg-light, html[data-theme="dark"] .bg-light { background: #22232e !important; } /* Overlay */ html[data-theme="dark"] .card-overlay { background-color: rgba(15, 17, 23, 0.85); color: #6b9fff; } /* Prices */ html[data-theme="dark"] .new-price, html[data-theme="dark"] .fw-bold.fs-5 { color: #e2e0dd !important; } html[data-theme="dark"] .old-price { color: #6b7280; } html[data-theme="dark"] .text-decoration-line-through { color: #ef6b73 !important; } /* Click counter badges */ html[data-theme="dark"] .click-counter.bg-light { background: #22232e !important; color: #9ca3af !important; border-color: #2a2b35 !important; } /* ── Category Cards ────────────────────────────────────── */ html[data-theme="dark"] .category-card { background: #1a1b23; border-color: #2a2b35 !important; color: #e2e0dd; } html[data-theme="dark"] .category-card:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); } html[data-theme="dark"] .category-card-count { background: #22232e; color: #9ca3af; } html[data-theme="dark"] .category-card-name { color: #e2e0dd; } /* ── Category Chips ────────────────────────────────────── */ html[data-theme="dark"] .category-chip { background: #1e1f2a; border-color: #2a2b35; color: #b0b5c0; } html[data-theme="dark"] .category-chip:hover, html[data-theme="dark"] .category-chip.active { background: #e2e0dd; color: #0f1117; border-color: #e2e0dd; } /* ── Sidebar V2 ────────────────────────────────────────── */ html[data-theme="dark"] .sidebar-widget-v2 { background: #16171f; } html[data-theme="dark"] .sidebar-widget-v2 h4 { color: #e2e0dd; } /* Sidebar widget cards com borda dashed */ html[data-theme="dark"] .sidebar-area-v2 div[style*="border: 2px dashed"] { background: #1a1b23 !important; border-color: #2a2b35 !important; color: #b0b5c0 !important; } html[data-theme="dark"] .sidebar-area-v2 h5 { color: #e2e0dd !important; } html[data-theme="dark"] .sidebar-area-v2 p { color: #8b92a0 !important; } /* ── Coupon Marquee ────────────────────────────────────── */ html[data-theme="dark"] .coupon-marquee-wrapper { background: #1a1b23; border-bottom-color: #2a2b35; } html[data-theme="dark"] .coupon-item { background: #22232e; border-color: #665e2e; color: #e2e0dd; } html[data-theme="dark"] .coupon-item:hover { background: #2a2b35; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); } /* ── Coupon Cards (Ticket Style) ───────────────────────── */ html[data-theme="dark"] .coupon-card-ticket { background: radial-gradient(circle at 0 50%, transparent 10px, #1a1b23 11px) 0 50% / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 10px, #1a1b23 11px) 100% 50% / 51% 100% no-repeat; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3)); } html[data-theme="dark"] .ticket-dashed-line { border-top-color: #2a2b35; } html[data-theme="dark"] .coupon-code-ticket { color: #b0b5c0; background: #22232e; border-color: #2a2b35; } /* ── Section Headers ───────────────────────────────────── */ html[data-theme="dark"] .border-bottom { border-bottom-color: #2a2b35 !important; } html[data-theme="dark"] .border-top { border-top-color: #2a2b35 !important; } html[data-theme="dark"] .border { border-color: #2a2b35 !important; } html[data-theme="dark"] .section-header-link { color: #6b9fff !important; } html[data-theme="dark"] .section-header-link:hover { color: #93b8ff !important; } /* ── Carousel buttons ──────────────────────────────────── */ html[data-theme="dark"] .carousel-btn { background: #22232e; color: #b0b5c0; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } html[data-theme="dark"] .carousel-btn:hover { background: var(--primary-color); color: #fff; } html[data-theme="dark"] .carousel-btn:disabled, html[data-theme="dark"] .carousel-btn:disabled:hover { background: #1e1f2a; color: #4b5563; } /* Section header nav buttons */ html[data-theme="dark"] .btn-white, html[data-theme="dark"] .btn.btn-white { background-color: #22232e !important; color: #b0b5c0 !important; border-color: #2a2b35 !important; } html[data-theme="dark"] .btn-white:hover, html[data-theme="dark"] .btn.btn-white:hover { background-color: #2a2b35 !important; color: #e2e0dd !important; } /* ── Hero Banner ───────────────────────────────────────── */ html[data-theme="dark"] #bannerHomeContainer { background: #1a1b23; } html[data-theme="dark"] .hero-banner { background: linear-gradient(45deg, #0f1117, #1a1b23); } /* ── Badges gerais ─────────────────────────────────────── */ html[data-theme="dark"] .badge.bg-light { background: #22232e !important; color: #e2e0dd !important; } html[data-theme="dark"] .badge.bg-white { background: #22232e !important; color: #e2e0dd !important; } /* Coupon copyable badge */ html[data-theme="dark"] .coupon-copyable { background: #22232e !important; color: #e2e0dd !important; border-color: #2a2b35 !important; } /* ── Button overrides ──────────────────────────────────── */ html[data-theme="dark"] .btn-add-cart { background: #22232e; color: #e2e0dd; } html[data-theme="dark"] .btn-add-cart:hover { background: var(--primary-color); color: #fff; } /* ── Footer ────────────────────────────────────────────── */ html[data-theme="dark"] .custom-footer { background-color: #0b0c10; border-top-color: #1e1f2a; } html[data-theme="dark"] .custom-footer .text-muted { color: #6b7280 !important; } html[data-theme="dark"] .hover-link { color: #6b7280; } /* ── Modals ─────────────────────────────────────────────── */ html[data-theme="dark"] .modal-content { background-color: #1a1b23; border-color: #2a2b35; color: #e2e0dd; } html[data-theme="dark"] .modal-header { border-bottom-color: #2a2b35; } html[data-theme="dark"] .modal-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } html[data-theme="dark"] .modal-footer { border-top-color: #2a2b35; } /* ── Form Controls ─────────────────────────────────────── */ html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select { background-color: #22232e; border-color: #2a2b35; color: #e2e0dd; } html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus { background-color: #2a2b35; border-color: #4b6bfb; color: #e2e0dd; box-shadow: 0 0 0 0.25rem rgba(75, 107, 251, 0.15); } html[data-theme="dark"] .form-control::placeholder { color: #6b7280; } html[data-theme="dark"] .form-check-input { background-color: #22232e; border-color: #2a2b35; } html[data-theme="dark"] .form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); } /* ── Offcanvas (Mobile Menu) ───────────────────────────── */ html[data-theme="dark"] .offcanvas { background-color: #16171f; color: #e2e0dd; } html[data-theme="dark"] .offcanvas-header { border-bottom-color: #2a2b35; } html[data-theme="dark"] .offcanvas .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } html[data-theme="dark"] .mobile-menu-link { background-color: #1e1f2a; color: #b0b5c0; border-color: transparent; } html[data-theme="dark"] .mobile-menu-link:hover { background-color: #22232e; border-color: #2a2b35; color: #e2e0dd; } html[data-theme="dark"] .accordion-button { background-color: transparent; color: #b0b5c0; } html[data-theme="dark"] .accordion-button::after { filter: invert(0.7); } html[data-theme="dark"] .list-group-item { background-color: #1e1f2a; color: #b0b5c0; border-color: #2a2b35; } html[data-theme="dark"] .list-group-item:hover, html[data-theme="dark"] .list-group-item-action:hover { background-color: #22232e; color: #e2e0dd; } /* ── Mobile Menu Button ────────────────────────────────── */ html[data-theme="dark"] .mobile-menu-btn-v2 { color: #b0b5c0; } /* ── Sidebar link ──────────────────────────────────────── */ html[data-theme="dark"] #sidebar-wrapper { background-color: #16171f; border-right-color: #2a2b35; } html[data-theme="dark"] .sidebar-link:hover, html[data-theme="dark"] .sidebar-link.active { background-color: #22232e; color: #e2e0dd; } /* ── Tag buttons (filter bar header) ───────────────────── */ html[data-theme="dark"] .btn-tag-shape { background: #1e1f2a !important; border-color: #2a2b35 !important; } /* ── Text color fixes ──────────────────────────────────── */ html[data-theme="dark"] .text-dark, html[data-theme="dark"] .prod-title-large { color: #e2e0dd !important; } html[data-theme="dark"] .text-secondary { color: #8b92a0 !important; } html[data-theme="dark"] .text-muted { color: #6b7280 !important; } html[data-theme="dark"] .fw-bold, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5 { color: #e2e0dd; } /* ── Background utility fixes ──────────────────────────── */ html[data-theme="dark"] .bg-white, html[data-theme="dark"] .product-main-card, html[data-theme="dark"] .coupon-card, html[data-theme="dark"] .coupon-card .card-left { background-color: #2b2b2b !important; } html[data-theme="dark"] .bg-light-custom { background-color: #1e1f2a; } /* ── Shadow adjustments ────────────────────────────────── */ html[data-theme="dark"] .shadow-sm { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important; } /* ── PWA Splash (dark variant) ─────────────────────────── */ html[data-theme="dark"].pwa-mode .pwa-splash { background: linear-gradient(180deg, #1e1f2a 0%, #16171f 100%); } html[data-theme="dark"] .pwa-splash-name { color: #e2e0dd; text-shadow: none; } html[data-theme="dark"] .pwa-splash-tag { color: #8b92a0; } html[data-theme="dark"] .pwa-splash-spinner { border-color: rgba(255, 255, 255, 0.15); border-top-color: #e2e0dd; } /* ── Scrollbar styling ─────────────────────────────────── */ html[data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0f1117; } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2a2b35; border-radius: 4px; } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #3a3b45; } /* ── Selection color ───────────────────────────────────── */ html[data-theme="dark"] ::selection { background: rgba(107, 159, 255, 0.3); color: #e2e0dd; } /* ── Vote buttons (cupons) ─────────────────────────────── */ html[data-theme="dark"] .vote-btn { border-color: #2a2b35; color: #8b92a0; } html[data-theme="dark"] .vote-btn:hover { background: #22232e; color: #e2e0dd; border-color: #3a3b45; } html[data-theme="dark"] .vote-container-opt6 { background: #1e1f2a; border-color: #2a2b35; } html[data-theme="dark"] .vote-btn-opt6 { color: #8b92a0; } html[data-theme="dark"] .vote-btn-opt6:hover { background: rgba(255, 255, 255, 0.05); } html[data-theme="dark"] .vote-separator { background: #2a2b35; } html[data-theme="dark"] .vote-banner-opt13 { background: #1e1f2a; border-top-color: #2a2b35; } html[data-theme="dark"] .vote-banner-text { color: #8b92a0; } html[data-theme="dark"] .vote-btn-opt13 { border-color: #2a2b35; background: #1a1b23; color: #8b92a0; } html[data-theme="dark"] .vote-btn-opt13:hover:not(:disabled) { background: #22232e; border-color: #3a3b45; } /* ── Expired badge ─────────────────────────────────────── */ html[data-theme="dark"] .expired-badge { background: rgba(26, 27, 35, 0.95); } /* ── Breadcrumbs ───────────────────────────────────────── */ html[data-theme="dark"] .breadcrumb-item a { color: #8b92a0; } html[data-theme="dark"] .breadcrumb-item.active { color: #e2e0dd; } html[data-theme="dark"] .breadcrumb-item+.breadcrumb-item::before { color: #4b5563; } /* ── Sticky Mobile CTA ─────────────────────────────────── */ html[data-theme="dark"] .sticky-mobile-cta { background: #16171f; border-top-color: #2a2b35; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4); } /* ── Toast container ───────────────────────────────────── */ html[data-theme="dark"] .toast { background-color: #1a1b23; color: #e2e0dd; border-color: #2a2b35; } /* ── Dark mode toggle button ───────────────────────────── */ .dark-mode-toggle { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid #e2e8f0; background: transparent; cursor: pointer; transition: all 0.25s ease; color: #64748b; font-size: 1.1rem; flex-shrink: 0; position: relative; overflow: hidden; } .dark-mode-toggle:hover { background: #f1f5f9; border-color: #cbd5e1; color: #1e293b; } html[data-theme="dark"] .dark-mode-toggle { border-color: #2a2b35; color: #fbbf24; } html[data-theme="dark"] .dark-mode-toggle:hover { background: #22232e; border-color: #3a3b45; color: #fde68a; } /* ── Mini toggle inside search box ─────────────────────── */ .search-box-v2 { display: flex; align-items: center; position: relative; padding-right: 5px !important; /* Espaço para o mini-toggle */ } .dark-mode-toggle.mini-toggle { width: 32px; height: 32px; border: none; background: transparent; color: #94a3b8; margin-left: 5px; } .dark-mode-toggle.mini-toggle:hover { background: rgba(0, 0, 0, 0.05); color: #1e293b; } html[data-theme="dark"] .dark-mode-toggle.mini-toggle:hover { background: rgba(255, 255, 255, 0.05); color: #fbbf24; } /* ── Mobile menu link fixes ────────────────────────────── */ .mobile-menu-link { display: flex !important; align-items: center; justify-content: flex-start !important; padding: 12px 20px !important; gap: 15px; text-align: left; width: 100%; border-radius: 12px !important; } .mobile-menu-link i { width: 20px; text-align: center; font-size: 1.1rem; } /* Icon transition */ .dark-mode-toggle i { transition: transform 0.3s ease, opacity 0.2s ease; } .dark-mode-toggle:active i { transform: rotate(30deg); } /* ── Promo bar bg-pattern fixes ────────────────────────── */ html[data-theme="dark"] .bg-expired-overlay { background-color: rgba(153, 27, 27, 0.9) !important; } /* ── Image mix-blend fix ───────────────────────────────── */ /* mix-blend-multiply nao funciona bem em fundos escuros. Removemos o blend pra manter as imagens legiveis. */ html[data-theme="dark"] .mix-blend-multiply { mix-blend-mode: normal !important; } /* ── Banner CLS placeholder ────────────────────────────── */ html[data-theme="dark"] #bannerHomeContainer { background: #1a1b23; } /* ── Bootstrap Navbar overrides ────────────────────────── */ html[data-theme="dark"] .navbar { background: transparent; } /* ── Hero carousel indicators ──────────────────────────── */ html[data-theme="dark"] #heroCarousel .carousel-indicators button { background-color: rgba(255, 255, 255, 0.4); } html[data-theme="dark"] #heroCarousel .carousel-indicators button.active { background-color: #fff; } /* ── Section icon backgrounds (soften for dark) ────────── */ html[data-theme="dark"] .bg-blue-100 { background-color: rgba(59, 130, 246, 0.15) !important; } html[data-theme="dark"] .bg-yellow-100 { background-color: rgba(234, 179, 8, 0.15) !important; } html[data-theme="dark"] .bg-red-100 { background-color: rgba(239, 68, 68, 0.15) !important; } html[data-theme="dark"] .bg-purple-100 { background-color: rgba(124, 58, 237, 0.15) !important; } /* ── Category card icon backgrounds (soften for dark) ──── */ html[data-theme="dark"] .category-card .category-card-icon { opacity: 0.9; } /* ── Border light utility ──────────────────────────────── */ html[data-theme="dark"] .border-light { border-color: #2a2b35 !important; } /* ── Admin Panel ───────────────────────────────────────── */ html[data-theme="dark"] #adminPanel { background: #1a1b23; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); }