/* ========================================================================== SportZone — Dark Mode Stylesheet Applied when is set. Covers every container, card, form, table, and text element. ========================================================================== */ /* ── 1. Root surface & text ─────────────────────────────────────────────── */ [data-theme="dark"] { --light-surface: #1E1E1E; --text-main: #F0F4F8; --text-muted: #A0AEC0; --border-color: #2D3748; --primary-light: #1A3A1A; --shadow: 0 4px 6px -1px rgba(0,0,0,0.4); } [data-theme="dark"] body { background-color: #111827; color: #F0F4F8; } /* ── 2. Mega Navbar ─────────────────────────────────────────────────────── */ [data-theme="dark"] .sz-mega-header { background: #1A1F2E; border-color: #2D3748; box-shadow: 0 2px 12px rgba(0,0,0,0.4); } [data-theme="dark"] .sz-logo span { color: #94A3B8; } [data-theme="dark"] .sz-nav-item > a, [data-theme="dark"] .sz-nav-item > span { color: #E2E8F0; } [data-theme="dark"] .sz-nav-item > a:hover, [data-theme="dark"] .sz-nav-item > span:hover { color: #A5D6A7; } [data-theme="dark"] .sz-nav-item > a::after, [data-theme="dark"] .sz-nav-item > span::after { background: #A5D6A7; } [data-theme="dark"] .sz-mega-menu { background: #1A1F2E; border-color: #2D3748; box-shadow: 0 20px 48px rgba(0,0,0,0.6); } [data-theme="dark"] .sz-mega-col h4 { color: #A5D6A7; border-color: #2D3748; } [data-theme="dark"] .sz-mega-col ul li a { color: #CBD5E0; } [data-theme="dark"] .sz-mega-col ul li a:hover { color: #C8E6C9; } [data-theme="dark"] .sz-search-box input { background: #2D3748; border-color: #4A5568; color: #E2E8F0; } [data-theme="dark"] .sz-search-box input::placeholder { color: #718096; } [data-theme="dark"] .sz-action-icon { color: #CBD5E0; } [data-theme="dark"] .sz-action-icon:hover { color: #A5D6A7; } [data-theme="dark"] .sz-hamburger { color: #CBD5E0; } [data-theme="dark"] .sz-mob-section { border-color: #2D3748; } [data-theme="dark"] .sz-mob-heading { color: #E2E8F0; } [data-theme="dark"] .sz-mob-sub a { color: #94A3B8; } [data-theme="dark"] .sz-mob-sub a:hover { color: #A5D6A7; } [data-theme="dark"] .sz-mobile-offcanvas .offcanvas-body > a { color: #E2E8F0; border-color: #2D3748; } [data-theme="dark"] .sz-mobile-offcanvas .offcanvas-body > a:hover { color: #A5D6A7; } /* Offcanvas panel */ [data-theme="dark"] .offcanvas { background-color: #1A1F2E !important; color: #E2E8F0; } [data-theme="dark"] .offcanvas-header { border-color: #2D3748 !important; } [data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(2); } /* ── 3. Page Banner ─────────────────────────────────────────────────────── */ [data-theme="dark"] .page-banner { background: linear-gradient(120deg, rgba(129,199,132,0.9), rgba(102,187,106,0.9)); } /* ── 4. Cards — Product, Category, Sport ───────────────────────────────── */ [data-theme="dark"] .product-card { background: #1E2433; border-color: #2D3748; color: #E2E8F0; } [data-theme="dark"] .product-card:hover { border-color: transparent; } [data-theme="dark"] .product-card .product-img-wrap { background: #252D3D; } [data-theme="dark"] .product-card .product-brand { color: #94A3B8; } [data-theme="dark"] .product-card .product-name a { color: #E2E8F0; } [data-theme="dark"] .product-card .product-name a:hover { color: #A5D6A7; } [data-theme="dark"] .price-current { color: #F0F4F8; } [data-theme="dark"] .add-cart-btn { background: #252D3D; border-color: #3D4F6A; color: #E2E8F0; } [data-theme="dark"] .add-cart-btn:hover { background: #81C784; border-color: #81C784; color: #fff; } [data-theme="dark"] .product-card .wishlist-btn { background: rgba(30,36,51,0.9); color: #94A3B8; } /* Category card */ [data-theme="dark"] .category-card { background: #1E2433; color: #E2E8F0; } [data-theme="dark"] .category-card:hover { background: #252D3D; } [data-theme="dark"] .category-card .category-icon-wrap { background: #252D3D; } [data-theme="dark"] .category-card:hover .category-icon-wrap { background: #81C784; } [data-theme="dark"] .category-card h6 { color: #E2E8F0; } /* Category page card */ [data-theme="dark"] .category-page-card { background: #1E2433; border-color: #2D3748; color: #E2E8F0; } [data-theme="dark"] .category-page-card .cat-img-wrap { background: #252D3D; } [data-theme="dark"] .category-page-card .cat-overlay h4 { color: #E2E8F0; } [data-theme="dark"] .category-page-card .cat-count { color: #94A3B8; } /* Sport card */ [data-theme="dark"] .sport-card { background: #1E2433; border-color: #2D3748; } [data-theme="dark"] .sport-card .sport-card-img-wrap { background: #252D3D; } [data-theme="dark"] .sport-card .sport-card-label h5 { color: #E2E8F0; } [data-theme="dark"] .sport-card .sport-card-label small { color: #94A3B8; } /* Feature icon card */ [data-theme="dark"] .feature-icon-card { color: #E2E8F0; } /* Testimonial */ [data-theme="dark"] .testimonial-card { background: #1E2433; } [data-theme="dark"] .testimonial-card p.quote { color: #94A3B8; } /* ── 5. INDEX home-specific ─────────────────────────────────────────────── */ [data-theme="dark"] .sz-cat-card { background: #1E2433; border-color: #2D3748; color: #E2E8F0; } [data-theme="dark"] .sz-cat-card i { color: #A5D6A7; } [data-theme="dark"] .sz-cat-card:hover { background: #81C784; border-color: #81C784; } [data-theme="dark"] .sz-product-card { background: #1E2433; border-color: #2D3748; } [data-theme="dark"] .sz-prod-img { background: #252D3D; } [data-theme="dark"] .sz-prod-name { color: #E2E8F0; } [data-theme="dark"] .sz-prod-price { color: #F0F4F8; } [data-theme="dark"] .sz-prod-footer { border-color: #2D3748; } [data-theme="dark"] .sz-prod-brand { color: #94A3B8; } [data-theme="dark"] .sz-prod-stars span { color: #94A3B8; } [data-theme="dark"] .sz-wish-btn { background: rgba(30,36,51,0.9); color: #94A3B8; } [data-theme="dark"] .sz-section-header h2 { color: #F0F4F8; } [data-theme="dark"] .sz-feature-box { background: #1A3A1A; } [data-theme="dark"] .sz-feature-box h5 { color: #E2E8F0; } [data-theme="dark"] .sz-feature-box p { color: #94A3B8; } [data-theme="dark"] .sz-back-top { background: #81C784; } /* ── 6. Filter Sidebar ──────────────────────────────────────────────────── */ [data-theme="dark"] .filter-sidebar { background: #1E2433; border-color: #2D3748; } [data-theme="dark"] .filter-sidebar .filter-block { border-color: #2D3748; } [data-theme="dark"] .filter-sidebar .filter-title { color: #E2E8F0; } [data-theme="dark"] .filter-sidebar .form-check-label { color: #CBD5E0; } [data-theme="dark"] .toolbar-sz { background: #1E2433; } [data-theme="dark"] .filter-toggle-btn { background: #81C784; } /* ── 7. Product Details ─────────────────────────────────────────────────── */ [data-theme="dark"] .pd-main-img-wrap { background: #1E2433; } [data-theme="dark"] .pd-thumb { background: #252D3D; border-color: #3D4F6A; } [data-theme="dark"] .pd-thumb.active, [data-theme="dark"] .pd-thumb:hover { border-color: #A5D6A7; } [data-theme="dark"] .qty-selector { border-color: #3D4F6A; } [data-theme="dark"] .qty-selector button { background: #252D3D; color: #E2E8F0; } [data-theme="dark"] .qty-selector input { background: #1E2433; color: #E2E8F0; border-color: #3D4F6A; } [data-theme="dark"] .size-pill { border-color: #3D4F6A; color: #CBD5E0; } [data-theme="dark"] .size-pill:hover, [data-theme="dark"] .size-pill.active { background: #81C784; border-color: #81C784; color: #fff; } [data-theme="dark"] .nav-tabs-sz { border-color: #2D3748; } [data-theme="dark"] .nav-tabs-sz .nav-link { color: #94A3B8; } [data-theme="dark"] .nav-tabs-sz .nav-link.active { color: #A5D6A7; border-color: #A5D6A7; } [data-theme="dark"] .review-item { border-color: #2D3748; } /* ── 8. Cart ────────────────────────────────────────────────────────────── */ [data-theme="dark"] .cart-summary-box { background: #1E2433; } [data-theme="dark"] .table { color: #E2E8F0; } [data-theme="dark"] .table > :not(caption) > * > * { background-color: #1E2433; border-color: #2D3748; color: #E2E8F0; } [data-theme="dark"] .table-hover tbody tr:hover > * { background-color: #252D3D; } [data-theme="dark"] .table thead th { background: #252D3D !important; color: #94A3B8; border-color: #2D3748; } /* ── 9. Checkout / Payment ──────────────────────────────────────────────── */ [data-theme="dark"] .checkout-step-box, [data-theme="dark"] .payment-card { background: #1E2433; border-color: #2D3748; } [data-theme="dark"] .payment-method-option { border-color: #2D3748; color: #E2E8F0; } [data-theme="dark"] .payment-method-option:hover { border-color: #A5D6A7; } [data-theme="dark"] .payment-method-option.active { border-color: #A5D6A7; background: rgba(165,214,167,0.08); } [data-theme="dark"] .order-summary-box { background: #1E2433; } [data-theme="dark"] .checkout-progress .step { color: #94A3B8; } [data-theme="dark"] .checkout-progress .step .circle { background: #252D3D; border-color: #3D4F6A; color: #94A3B8; } [data-theme="dark"] .checkout-progress .divider-line { background: #2D3748; } [data-theme="dark"] .payment-tabs .nav-link { border-color: #3D4F6A; color: #CBD5E0; background: #1E2433; } [data-theme="dark"] .payment-tabs .nav-link.active { background: #81C784; color: #fff; border-color: #81C784; } [data-theme="dark"] .qr-placeholder { background: #252D3D; border-color: #3D4F6A; color: #94A3B8; } [data-theme="dark"] .netbanking-bank, [data-theme="dark"] .wallet-option { background: #1E2433; border-color: #2D3748; color: #E2E8F0; } /* ── 10. Auth ───────────────────────────────────────────────────────────── */ [data-theme="dark"] .auth-card { background: #1E2433; } [data-theme="dark"] .auth-card > .row > div:last-child { background: #1E2433 !important; } [data-theme="dark"] .auth-card h2 { color: #F0F4F8; } [data-theme="dark"] .social-btn { border-color: #3D4F6A; background: #252D3D; color: #CBD5E0; } [data-theme="dark"] .social-btn:hover { background: #2D3748; } /* ── 11. Forms (global) ─────────────────────────────────────────────────── */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: #252D3D !important; border-color: #3D4F6A !important; color: #E2E8F0 !important; } [data-theme="dark"] .form-control::placeholder { color: #718096; } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: #2D3748 !important; border-color: #A5D6A7 !important; color: #F0F4F8 !important; box-shadow: 0 0 0 0.2rem rgba(165,214,167,0.2) !important; } [data-theme="dark"] .form-label { color: #94A3B8; } [data-theme="dark"] .form-check-label { color: #CBD5E0; } [data-theme="dark"] .form-check-input { background-color: #252D3D; border-color: #4A5568; } [data-theme="dark"] .form-check-input:checked { background-color: #81C784; border-color: #81C784; } [data-theme="dark"] .input-group-text { background: #252D3D; border-color: #3D4F6A; color: #CBD5E0; } /* ── 12. Bootstrap modals ───────────────────────────────────────────────── */ [data-theme="dark"] .modal-content { background-color: #1E2433 !important; border-color: #2D3748; color: #E2E8F0; } [data-theme="dark"] .modal-header { border-color: #2D3748 !important; color: #E2E8F0; } [data-theme="dark"] .modal-footer { border-color: #2D3748 !important; } [data-theme="dark"] .modal-backdrop { background-color: #000; } /* ── 13. Bootstrap alerts / badges ─────────────────────────────────────── */ [data-theme="dark"] .alert { background-color: #252D3D; border-color: #3D4F6A; color: #E2E8F0; } [data-theme="dark"] .badge.bg-light { background-color: #2D3748 !important; color: #E2E8F0 !important; } [data-theme="dark"] .bg-white { background-color: #1E2433 !important; } [data-theme="dark"] .bg-light { background-color: #252D3D !important; } [data-theme="dark"] .text-dark { color: #E2E8F0 !important; } [data-theme="dark"] .text-muted { color: #94A3B8 !important; } /* ── 14. Pagination ─────────────────────────────────────────────────────── */ [data-theme="dark"] .page-link { background-color: #1E2433; border-color: #2D3748; color: #CBD5E0; } [data-theme="dark"] .page-link:hover { background-color: #252D3D; color: #A5D6A7; } [data-theme="dark"] .page-item.active .page-link { background-color: #81C784; border-color: #81C784; } [data-theme="dark"] .page-item.disabled .page-link { background-color: #1A1F2E; color: #4A5568; } /* ── 15. Accordion ──────────────────────────────────────────────────────── */ [data-theme="dark"] .accordion-item { background-color: #1E2433; border-color: #2D3748; } [data-theme="dark"] .accordion-button { background-color: #1E2433 !important; color: #E2E8F0 !important; border-color: #2D3748; } [data-theme="dark"] .accordion-button:not(.collapsed) { background-color: rgba(129,199,132,0.15) !important; color: #A5D6A7 !important; } [data-theme="dark"] .accordion-button::after { filter: invert(1); } [data-theme="dark"] .accordion-collapse .accordion-body { background: #1E2433; color: #CBD5E0; } /* ── 16. Toasts ─────────────────────────────────────────────────────────── */ [data-theme="dark"] .toast { background-color: #252D3D; border-color: #3D4F6A; color: #E2E8F0; } [data-theme="dark"] .toast-body { color: #E2E8F0; } /* ── 17. Admin Panel ────────────────────────────────────────────────────── */ [data-theme="dark"] body.admin-body { background: #0F1623; } [data-theme="dark"] .admin-sidebar { background: #0F1623; border-right: 1px solid #1E2433; } [data-theme="dark"] .admin-topbar { background: #1A1F2E; border-color: #2D3748; color: #E2E8F0; } [data-theme="dark"] .admin-card { background: #1E2433; box-shadow: 0 2px 8px rgba(0,0,0,0.3); } [data-theme="dark"] .admin-stat-card { background: #1E2433; } [data-theme="dark"] .admin-stat-card .stat-label { color: #94A3B8; } [data-theme="dark"] .admin-stat-card .stat-value { color: #F0F4F8; } [data-theme="dark"] .admin-table { color: #E2E8F0; } [data-theme="dark"] .admin-table thead th { background: #252D3D !important; color: #94A3B8; } [data-theme="dark"] .admin-table td { border-color: #2D3748; color: #CBD5E0; } [data-theme="dark"] .admin-table tr:hover td { background: #252D3D; } [data-theme="dark"] .admin-table-striped tbody tr:nth-of-type(odd) > * { background-color: rgba(255,255,255,0.03); } [data-theme="dark"] .chart-placeholder { background: #252D3D; color: #94A3B8; } [data-theme="dark"] .order-detail-section { background: #252D3D; border-color: #3D4F6A; } [data-theme="dark"] .order-summary-box { background: #1E2433; border-color: #3D4F6A; } [data-theme="dark"] .timeline::before { background: #3D4F6A; } [data-theme="dark"] .timeline-item::before { background: #252D3D; border-color: #4A5568; } [data-theme="dark"] .static-list-row { background: #252D3D; } [data-theme="dark"] .static-list-bar { background: #3D4F6A; } [data-theme="dark"] .coupon-select-trigger { background: #252D3D; border-color: #3D4F6A; color: #E2E8F0; } [data-theme="dark"] .coupon-dropdown { background: #1E2433; border-color: #2D3748; } [data-theme="dark"] .coupon-dropdown .coupon-search-input { background: #1E2433; border-color: #2D3748; } [data-theme="dark"] .coupon-dropdown .coupon-search-input input { background: #252D3D; border-color: #3D4F6A; color: #E2E8F0; } [data-theme="dark"] .coupon-option { color: #CBD5E0; border-color: #252D3D; } [data-theme="dark"] .coupon-option:hover { background: #252D3D; } [data-theme="dark"] .image-upload-zone { background: #252D3D; border-color: #3D4F6A; } [data-theme="dark"] .image-upload-zone .upload-title { color: #E2E8F0; } [data-theme="dark"] .image-preview-wrap .image-info { background: #2D3748; color: #CBD5E0; } [data-theme="dark"] .marketing-nav .nav-link { color: #94A3B8; } [data-theme="dark"] .marketing-nav .nav-link:hover { color: #A5D6A7; border-color: rgba(165,214,167,0.3); } [data-theme="dark"] .marketing-nav .nav-link.active { color: #A5D6A7; border-color: #A5D6A7; } [data-theme="dark"] .modal-status-row { background: #252D3D; border-color: #3D4F6A; } [data-theme="dark"] .detail-tabs .nav-link { color: #94A3B8; } [data-theme="dark"] .detail-tabs .nav-link:hover:not(.active) { background: #252D3D; } [data-theme="dark"] .admin-login-card { background: #1A1F2E; } [data-theme="dark"] .admin-login-card h4, [data-theme="dark"] .admin-login-card p { color: #E2E8F0; } /* ── 18. Profile Page ───────────────────────────────────────────────────── */ [data-theme="dark"] .profile-sidebar { background: #1E2433; } [data-theme="dark"] .profile-nav-item { color: #94A3B8; } [data-theme="dark"] .profile-nav-item:hover, [data-theme="dark"] .profile-nav-item.active { background: #1A3A1A; color: #A5D6A7; border-color: #A5D6A7; } [data-theme="dark"] .profile-nav-divider { background: #2D3748; } [data-theme="dark"] .pcard { background: #1E2433; box-shadow: 0 2px 8px rgba(0,0,0,0.3); } [data-theme="dark"] .pcard-title { color: #F0F4F8; border-color: #2D3748; } [data-theme="dark"] .stat-tile { background: #1A3A1A; } [data-theme="dark"] .stat-tile .lbl { color: #94A3B8; } [data-theme="dark"] .order-card { border-color: #2D3748; } [data-theme="dark"] .order-card-head { background: #252D3D; border-color: #2D3748; } [data-theme="dark"] .order-total { color: #F0F4F8; } [data-theme="dark"] .order-date { color: #94A3B8; } [data-theme="dark"] .order-items-count { color: #94A3B8; } [data-theme="dark"] .address-card { border-color: #2D3748; } [data-theme="dark"] .address-card.default { background: #1A3A1A; border-color: #A5D6A7; } [data-theme="dark"] .address-name { color: #E2E8F0; } [data-theme="dark"] .address-line { color: #94A3B8; } [data-theme="dark"] .address-btn { background: #252D3D; border-color: #3D4F6A; color: #CBD5E0; } [data-theme="dark"] .address-btn:hover { border-color: #A5D6A7; color: #A5D6A7; } [data-theme="dark"] .add-address-card { border-color: #3D4F6A; color: #94A3B8; } [data-theme="dark"] .add-address-card:hover { background: #1A3A1A; color: #A5D6A7; border-color: #A5D6A7; } [data-theme="dark"] .wish-item { border-color: #2D3748; background: #1E2433; } [data-theme="dark"] .wish-name { color: #E2E8F0; } [data-theme="dark"] .wish-remove { background: #252D3D; } [data-theme="dark"] .track-modal { background: #1E2433; } [data-theme="dark"] .track-modal-header { border-color: #2D3748; } [data-theme="dark"] .track-modal-header h5 { color: #F0F4F8; } [data-theme="dark"] .track-modal-close { background: #252D3D; color: #94A3B8; } [data-theme="dark"] .track-modal-close:hover { background: #2D3748; } [data-theme="dark"] .delivery-bar { background: #1A3A1A; } [data-theme="dark"] .track-timeline::before { background: #2D3748; } [data-theme="dark"] .track-dot.pending { background: #2D3748; color: #718096; } [data-theme="dark"] .track-dot.done { box-shadow: 0 0 0 4px #1A3A1A; } [data-theme="dark"] .track-step-title.muted { color: #718096; } [data-theme="dark"] .track-step-desc, [data-theme="dark"] .track-step-time { color: #94A3B8; } [data-theme="dark"] .modal-order-item { border-color: #2D3748; } [data-theme="dark"] .item-meta { color: #94A3B8; } [data-theme="dark"] .security-label { color: #E2E8F0; } [data-theme="dark"] .security-hint { color: #94A3B8; } [data-theme="dark"] .security-section { border-color: #2D3748; } [data-theme="dark"] .btn-save { background: #81C784; } [data-theme="dark"] .btn-danger-soft { background: rgba(197,48,48,0.15); border-color: rgba(254,215,215,0.2); color: #FC8181; } /* ── 19. About / Contact / Success ─────────────────────────────────────── */ [data-theme="dark"] .contact-info-card { background: #1E2433; } [data-theme="dark"] .map-placeholder { background: #1E2433; border-color: #2D3748; color: #94A3B8; } [data-theme="dark"] .stat-box .stat-number { color: #A5D6A7; } [data-theme="dark"] .team-card { background: #1E2433; } [data-theme="dark"] .team-card .team-info h6 { color: #E2E8F0; } [data-theme="dark"] .team-card .social-mini a { background: #252D3D; } [data-theme="dark"] .certification-badge { background: #1E2433; border-color: #2D3748; } [data-theme="dark"] .certification-badge h6 { color: #E2E8F0; } [data-theme="dark"] .admin-card.h-100 { background: #1E2433; } [data-theme="dark"] .admin-card.h-100 h5 { color: #E2E8F0; } /* ── 20. Bootstrap utility overrides for dark ───────────────────────────── */ [data-theme="dark"] .card { background-color: #1E2433 !important; border-color: #2D3748 !important; color: #E2E8F0; } [data-theme="dark"] .card-header { background-color: #252D3D !important; border-color: #2D3748 !important; } [data-theme="dark"] .card-footer { background-color: #252D3D !important; border-color: #2D3748 !important; } [data-theme="dark"] .list-group-item { background-color: #1E2433; border-color: #2D3748; color: #CBD5E0; } [data-theme="dark"] .list-group-item:hover { background-color: #252D3D; } [data-theme="dark"] .nav-tabs { border-color: #2D3748; } [data-theme="dark"] .nav-tabs .nav-link { color: #94A3B8; } [data-theme="dark"] .nav-tabs .nav-link.active { background-color: #1E2433; border-color: #2D3748 #2D3748 #1E2433; color: #A5D6A7; } [data-theme="dark"] .dropdown-menu { background-color: #1E2433 !important; border-color: #2D3748 !important; } [data-theme="dark"] .dropdown-item { color: #CBD5E0 !important; } [data-theme="dark"] .dropdown-item:hover { background-color: #252D3D !important; color: #A5D6A7 !important; } [data-theme="dark"] .dropdown-divider { border-color: #2D3748 !important; } [data-theme="dark"] hr { border-color: #2D3748; opacity: 1; } [data-theme="dark"] .border, [data-theme="dark"] .border-bottom, [data-theme="dark"] .border-top, [data-theme="dark"] .border-start, [data-theme="dark"] .border-end { border-color: #2D3748 !important; } [data-theme="dark"] .shadow-sm { box-shadow: 0 1px 4px rgba(0,0,0,0.4) !important; } [data-theme="dark"] .shadow { box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important; } [data-theme="dark"] ::selection { background: #81C784; color: #fff; }