/* ═══════════════════════════════════════════════════════════════ MARKETONEX — GLOBAL DARK THEME SYSTEM v2.0 Palette: Netflix Red + Apple Dark UI Applied via: [data-theme="dark"] on ═══════════════════════════════════════════════════════════════ */ /* ── LIGHT (default) ─────────────────────────────────────────── */ :root { --color-primary: #E50914; --color-primary-hover: #B20710; --color-primary-glow: rgba(229, 9, 20, 0.30); --bg-main: #f8f9fc; --bg-secondary: #f1f3f8; --bg-card: #ffffff; --bg-modal: #ffffff; --gradient-hero: linear-gradient(135deg, #f8f9fc 0%, #e8eaf6 100%); --text-primary: #0B0B0B; --text-secondary: #4a5568; --text-muted: #8a8a8a; --border-color: #e2e8f0; --input-bg: #ffffff; --button-secondary: #edf2f7; --accent-orange: #FF6A00; --accent-blue: #3B82F6; --shadow-card: 0 2px 12px rgba(0,0,0,0.06); --shadow-hover: 0 8px 32px rgba(0,0,0,0.12); --transition: all 0.3s ease; } /* ── DARK ────────────────────────────────────────────────────── */ [data-theme="dark"] { --color-primary: #E50914; --color-primary-hover: #B20710; --color-primary-glow: rgba(229, 9, 20, 0.38); --bg-main: #0B0B0B; --bg-secondary: #111111; --bg-card: #1A1A1A; --bg-modal: #1A1A1A; --gradient-hero: linear-gradient(135deg, #0F172A 0%, #1E293B 100%); --text-primary: #FFFFFF; --text-secondary: #B3B3B3; --text-muted: #8A8A8A; --border-color: #2A2A2A; --input-bg: #1F1F1F; --button-secondary: #2C2C2C; --accent-orange: #FF6A00; --accent-blue: #3B82F6; --shadow-card: 0 2px 12px rgba(0,0,0,0.50); --shadow-hover: 0 8px 32px rgba(0,0,0,0.70); } /* ── SYSTEM DARK AUTO-DETECT ─────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-primary: #E50914; --color-primary-hover: #B20710; --bg-main: #0B0B0B; --bg-secondary: #111111; --bg-card: #1A1A1A; --bg-modal: #1A1A1A; --gradient-hero: linear-gradient(135deg, #0F172A 0%, #1E293B 100%); --text-primary: #FFFFFF; --text-secondary: #B3B3B3; --text-muted: #8A8A8A; --border-color: #2A2A2A; --input-bg: #1F1F1F; --button-secondary: #2C2C2C; } } /* ═══════════════════════════════════════════════════════════════ GLOBAL THEME SWITCHER (Pill Style) ═══════════════════════════════════════════════════════════════ */ .theme-switcher { display: inline-flex; align-items: center; background: var(--bg-secondary, #F3F4F6); border: 1px solid var(--border-color, #E5E7EB); border-radius: 50px; padding: 4px; gap: 4px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); } .theme-switcher .theme-btn { width: 14px !important; height: 14px !important; border-radius: 50% !important; border: 2px solid transparent !important; cursor: pointer; transition: all 0.2s ease !important; padding: 0; } .theme-switcher .theme-btn[data-theme="dark"] { background: #0B0B0B; } .theme-switcher .theme-btn[data-theme="light"] { background: #F3F4F6; border: 1px solid #D1D5DB; } .theme-switcher .theme-btn[data-theme="coffee"] { background: #4A3728; } .theme-switcher .theme-btn:hover { transform: scale(1.1) !important; } .theme-switcher .theme-btn.active { border-color: #fff !important; transform: scale(1.1) !important; box-shadow: none !important; } /* ═══════════════════════════════════════════════════════════════ GLOBAL TRANSITIONS — smooth theme switching ═══════════════════════════════════════════════════════════════ */ *, *::before, *::after { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important; } /* Exclude transforms from blanket transition */ a, button, .product-card, .trending-card, .vendor-card { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.25s ease !important; } /* ═══════════════════════════════════════════════════════════════ DARK THEME — COMPONENT OVERRIDES ═══════════════════════════════════════════════════════════════ */ /* ── Body / Page ─────────────────────────────────────────────── */ [data-theme="dark"] body { background-color: var(--bg-main) !important; color: var(--text-primary) !important; } /* ── Navbar / Header ─────────────────────────────────────────── */ [data-theme="dark"] header { background: rgba(11, 11, 11, 0.97) !important; border-bottom: 1px solid var(--border-color) !important; box-shadow: 0 1px 0 var(--border-color) !important; } [data-theme="dark"] .logo { color: var(--color-primary) !important; } [data-theme="dark"] .search-bar, [data-theme="dark"] .search-input-wrap { background: var(--input-bg) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .search-bar input { color: var(--text-primary) !important; background: transparent !important; } [data-theme="dark"] .search-bar input::placeholder { color: var(--text-muted) !important; } [data-theme="dark"] .search-bar i { color: var(--text-muted) !important; } /* ── Sidebar / Filter Panel ──────────────────────────────────── */ [data-theme="dark"] .filter-panel, [data-theme="dark"] .filters-sidebar, [data-theme="dark"] .filter-section { background: var(--bg-card) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .filter-title, [data-theme="dark"] .collapsible-header span, [data-theme="dark"] .collapsible-header { color: var(--text-primary) !important; } [data-theme="dark"] .filter-option label, [data-theme="dark"] .vendor-filter label, [data-theme="dark"] .category-filter label { color: var(--text-secondary) !important; } [data-theme="dark"] input[type="checkbox"], [data-theme="dark"] input[type="radio"] { accent-color: var(--color-primary) !important; } [data-theme="dark"] input[type="range"] { accent-color: var(--color-primary) !important; } [data-theme="dark"] .price-display { color: var(--text-secondary) !important; } /* ── Hero Section ────────────────────────────────────────────── */ [data-theme="dark"] .hero-section { background: var(--gradient-hero) !important; } [data-theme="dark"] .hero-title, [data-theme="dark"] .hero h1 { color: var(--text-primary) !important; } [data-theme="dark"] .hero-description, [data-theme="dark"] .hero p { color: var(--text-secondary) !important; } [data-theme="dark"] .hero-badge { background: rgba(229, 9, 20, 0.15) !important; color: var(--color-primary) !important; border: 1px solid rgba(229, 9, 20, 0.3) !important; } [data-theme="dark"] .stat-number { color: var(--text-primary) !important; } [data-theme="dark"] .stat-label { color: var(--text-muted) !important; } [data-theme="dark"] .floating-card { background: rgba(26, 26, 26, 0.92) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; backdrop-filter: blur(12px); } /* ── Product Cards ───────────────────────────────────────────── */ [data-theme="dark"] .product-card, [data-theme="dark"] .trending-card, [data-theme="dark"] .vendor-card, [data-theme="dark"] .category-card, [data-theme="dark"] .related-card { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; } [data-theme="dark"] .product-card:hover, [data-theme="dark"] .trending-card:hover, [data-theme="dark"] .vendor-card:hover { transform: translateY(-6px) !important; border-color: rgba(229, 9, 20, 0.45) !important; box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(229,9,20,0.2) !important; } [data-theme="dark"] .product-name, [data-theme="dark"] .product-card h3, [data-theme="dark"] .trending-name { color: var(--text-primary) !important; } [data-theme="dark"] .category-tag, [data-theme="dark"] .trending-category { color: var(--text-muted) !important; } [data-theme="dark"] .vendor-name, [data-theme="dark"] .trending-vendor { color: var(--text-muted) !important; } [data-theme="dark"] .price, [data-theme="dark"] .trending-price, [data-theme="dark"] .product-price { color: var(--color-primary) !important; font-weight: 700; } [data-theme="dark"] .original-price, [data-theme="dark"] .trending-original-price { color: var(--text-muted) !important; } [data-theme="dark"] .discount-badge { background: var(--color-primary) !important; color: #fff !important; } [data-theme="dark"] .stock-badge { background: rgba(239, 68, 68, 0.18) !important; color: #f87171 !important; } [data-theme="dark"] .rating, [data-theme="dark"] .trending-rating { color: #F59E0B !important; } /* ── Buttons ─────────────────────────────────────────────────── */ [data-theme="dark"] .add-to-cart-btn, [data-theme="dark"] .btn-add-to-cart, [data-theme="dark"] .btn-primary, [data-theme="dark"] .build-pc-btn, [data-theme="dark"] .hero-btn.primary, [data-theme="dark"] .submit-btn { background: var(--color-primary) !important; color: #fff !important; border: none !important; box-shadow: 0 4px 14px var(--color-primary-glow) !important; } [data-theme="dark"] .add-to-cart-btn:hover, [data-theme="dark"] .btn-add-to-cart:hover, [data-theme="dark"] .build-pc-btn:hover, [data-theme="dark"] .btn-primary:hover { background: var(--color-primary-hover) !important; box-shadow: 0 6px 20px var(--color-primary-glow) !important; } [data-theme="dark"] .hero-btn.secondary, [data-theme="dark"] .btn-secondary, [data-theme="dark"] .filter-reset-btn { background: var(--button-secondary) !important; color: var(--text-primary) !important; border: 1px solid var(--border-color) !important; } [data-theme="dark"] button:disabled, [data-theme="dark"] .btn:disabled { background: var(--button-secondary) !important; color: var(--text-muted) !important; opacity: 0.5 !important; cursor: not-allowed !important; } [data-theme="dark"] .back-btn { color: var(--text-secondary) !important; } [data-theme="dark"] .back-btn:hover { color: var(--text-primary) !important; } /* ── Forms / Inputs ──────────────────────────────────────────── */ [data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), [data-theme="dark"] textarea, [data-theme="dark"] select { background: var(--input-bg) !important; color: var(--text-primary) !important; border: 1px solid var(--border-color) !important; border-radius: 8px; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--text-muted) !important; } [data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus { border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.15) !important; outline: none !important; } [data-theme="dark"] label { color: var(--text-secondary) !important; } /* ── Modals / Popups ─────────────────────────────────────────── */ [data-theme="dark"] .modal-content, [data-theme="dark"] .product-premium-modal-content, [data-theme="dark"] .review-modal-card, [data-theme="dark"] .profile-dropdown, [data-theme="dark"] .pc-builder-modal .modal-content { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; } [data-theme="dark"] .modal-backdrop, [data-theme="dark"] .modal-overlay { background: rgba(0, 0, 0, 0.88) !important; } [data-theme="dark"] .modal-close-btn, [data-theme="dark"] .close-modal { color: var(--text-muted) !important; background: var(--button-secondary) !important; } [data-theme="dark"] .modal-close-btn:hover { color: var(--text-primary) !important; background: #3a3a3a !important; } [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-title { color: var(--text-primary) !important; } /* Profile Dropdown ─── */ [data-theme="dark"] .profile-dropdown { box-shadow: 0 20px 60px rgba(0,0,0,0.8) !important; } [data-theme="dark"] .profile-header { background: linear-gradient(135deg, #1a0000, #2d0608) !important; } [data-theme="dark"] .profile-name, [data-theme="dark"] .profile-greeting { color: #fff !important; } [data-theme="dark"] .profile-menu-item { color: var(--text-secondary) !important; } [data-theme="dark"] .profile-menu-item:hover { background: rgba(229, 9, 20, 0.08) !important; color: var(--text-primary) !important; } [data-theme="dark"] .profile-menu-section { border-bottom-color: var(--border-color) !important; } [data-theme="dark"] .section-title { color: var(--text-muted) !important; } [data-theme="dark"] .logout-btn { color: var(--color-primary) !important; } /* ── Theme Toggle Button ─────────────────────────────────────── */ [data-theme="dark"] #theme-toggle-btn { color: var(--text-primary) !important; } [data-theme="dark"] #theme-toggle-btn:hover { background: var(--button-secondary) !important; } [data-theme="dark"] .dropdown-menu { background: var(--bg-card) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .dropdown-menu button { color: var(--text-secondary) !important; } [data-theme="dark"] .dropdown-menu button:hover { background: rgba(229, 9, 20, 0.1) !important; color: var(--text-primary) !important; } [data-theme="dark"] .dropdown-menu button.theme-active { color: var(--color-primary) !important; } /* ── Sections / Tabs ─────────────────────────────────────────── */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5 { color: var(--text-primary) !important; } [data-theme="dark"] p { color: var(--text-secondary) !important; } [data-theme="dark"] .text-muted { color: var(--text-muted) !important; } [data-theme="dark"] .section-header h2 { color: var(--text-primary) !important; } [data-theme="dark"] .section-badge { background: rgba(229, 9, 20, 0.15) !important; color: var(--color-primary) !important; border-color: rgba(229, 9, 20, 0.3) !important; } [data-theme="dark"] .tabs-header { background: var(--bg-secondary) !important; border: 1px solid var(--border-color) !important; } [data-theme="dark"] .tab-btn { color: var(--text-secondary) !important; } [data-theme="dark"] .tab-btn.active { color: var(--color-primary) !important; border-bottom: 2px solid var(--color-primary) !important; } /* ── Tables ──────────────────────────────────────────────────── */ [data-theme="dark"] table { background: var(--bg-card) !important; color: var(--text-primary) !important; } [data-theme="dark"] th { background: var(--bg-secondary) !important; color: var(--text-muted) !important; border-bottom: 1px solid var(--border-color) !important; } [data-theme="dark"] td { border-bottom: 1px solid var(--border-color) !important; color: var(--text-secondary) !important; } [data-theme="dark"] tr:hover td { background: rgba(255,255,255,0.03) !important; } /* ── Tags / Pills ────────────────────────────────────────────── */ [data-theme="dark"] .tag, [data-theme="dark"] .filter-tag, [data-theme="dark"] .tag-bg { background: var(--button-secondary) !important; color: var(--text-secondary) !important; border: 1px solid var(--border-color) !important; } [data-theme="dark"] .tag.active, [data-theme="dark"] .tag:hover { background: var(--color-primary) !important; color: #fff !important; border-color: var(--color-primary) !important; } /* ── Cart Sidebar / Drawer ───────────────────────────────────── */ [data-theme="dark"] .cart-sidebar, [data-theme="dark"] .cart-drawer { background: var(--bg-card) !important; border-left: 1px solid var(--border-color) !important; } [data-theme="dark"] .cart-item { border-bottom: 1px solid var(--border-color) !important; color: var(--text-primary) !important; } [data-theme="dark"] .cart-total { color: var(--color-primary) !important; } /* ── Product View (premium shared) ──────────────────────────── */ [data-theme="dark"] .info-glass-card { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; } [data-theme="dark"] .spec-item { border-bottom: 1px solid var(--border-color) !important; } [data-theme="dark"] .spec-item span { color: var(--text-muted) !important; } [data-theme="dark"] .spec-item strong { color: var(--text-primary) !important; } [data-theme="dark"] .premium-review-card { background: var(--bg-secondary) !important; border: 1px solid var(--border-color) !important; } [data-theme="dark"] .bar-bg { background: var(--button-secondary) !important; } [data-theme="dark"] .bar-fill { background: var(--color-primary) !important; } [data-theme="dark"] .qty-btn { background: var(--button-secondary) !important; color: var(--text-primary) !important; border: 1px solid var(--border-color) !important; } [data-theme="dark"] .btn-add-to-cart, [data-theme="dark"] .btn-buy-now { background: var(--color-primary) !important; color: #fff !important; box-shadow: 0 4px 14px var(--color-primary-glow) !important; } [data-theme="dark"] .stock-status.in-stock { color: #22c55e !important; } [data-theme="dark"] .stock-status.out-of-stock { color: #ef4444 !important; } [data-theme="dark"] .premium-highlights-bar { background: var(--bg-secondary) !important; border: 1px solid var(--border-color) !important; } [data-theme="dark"] .highlight-item { color: var(--text-secondary) !important; } [data-theme="dark"] .related-card { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; } [data-theme="dark"] .related-card:hover { border-color: var(--color-primary) !important; box-shadow: 0 8px 30px rgba(0,0,0,0.5) !important; } /* ── Lightbox / Review Form ──────────────────────────────────── */ [data-theme="dark"] .premium-lightbox .lightbox-overlay { background: rgba(0,0,0,0.94) !important; } [data-theme="dark"] .review-form-modal .modal-overlay { background: rgba(0,0,0,0.80) !important; } [data-theme="dark"] .review-modal-card { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; } [data-theme="dark"] .form-group label { color: var(--text-secondary) !important; } [data-theme="dark"] .form-group textarea { background: var(--bg-secondary) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } [data-theme="dark"] .upload-area { border-color: var(--border-color) !important; color: var(--text-muted) !important; } [data-theme="dark"] .submit-review-btn { background: var(--color-primary) !important; box-shadow: 0 4px 12px var(--color-primary-glow) !important; } [data-theme="dark"] .star-picker i.fas { color: #F59E0B !important; } [data-theme="dark"] .star-picker i.far { color: var(--text-muted) !important; } /* ── PC Builder ──────────────────────────────────────────────── */ [data-theme="dark"] .pc-builder-modal, [data-theme="dark"] .selection-modal { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; } [data-theme="dark"] .component-slot { background: var(--bg-secondary) !important; border: 1px solid var(--border-color) !important; color: var(--text-secondary) !important; } [data-theme="dark"] .component-slot.selected { border-color: var(--color-primary) !important; background: rgba(229, 9, 20, 0.08) !important; } [data-theme="dark"] .selection-card { background: var(--bg-secondary) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; } [data-theme="dark"] .selection-card:hover { border-color: var(--color-primary) !important; } [data-theme="dark"] .pc-summary { background: var(--bg-secondary) !important; border-color: var(--border-color) !important; } /* ── Footer ──────────────────────────────────────────────────── */ [data-theme="dark"] footer, [data-theme="dark"] .site-footer { background: #000000 !important; color: var(--text-secondary) !important; border-top: 1px solid var(--border-color) !important; } [data-theme="dark"] footer a { color: var(--text-muted) !important; } [data-theme="dark"] footer a:hover { color: var(--color-primary) !important; } /* ── Scrollbar ───────────────────────────────────────────────── */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; background: var(--bg-secondary); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--color-primary); } /* ── Toast / Alerts ──────────────────────────────────────────── */ [data-theme="dark"] .toast { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; box-shadow: 0 8px 30px rgba(0,0,0,0.6) !important; } /* ── Pagination ──────────────────────────────────────────────── */ [data-theme="dark"] .pagination button, [data-theme="dark"] .page-btn { background: var(--button-secondary) !important; color: var(--text-secondary) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .pagination button.active, [data-theme="dark"] .page-btn.active { background: var(--color-primary) !important; color: #fff !important; border-color: var(--color-primary) !important; } /* ═══════════════════════════════════════════════════════════════ THEME TOGGLE BUTTON STYLES ═══════════════════════════════════════════════════════════════ */ #theme-toggle-btn { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 20px; border: 1px solid var(--border-color); background: var(--button-secondary); color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: var(--transition); white-space: nowrap; } #theme-toggle-btn:hover { border-color: var(--color-primary); color: var(--color-primary); } #theme-toggle-btn i { font-size: 0.9rem; } /* ═══════════════════════════════════════════════════════════════ ☕ COFFEE THEME — Warm Brown + Ivory Activated via: data-theme="coffee" Inspired by: Luxury brands · Coffee aesthetics · Minimal SaaS ═══════════════════════════════════════════════════════════════ */ /* ── Coffee Variables ────────────────────────────────────────── */ [data-theme="coffee"] { --color-primary: #9C6B3E; --color-primary-hover: #7A4E2D; --color-primary-glow: rgba(156, 107, 62, 0.30); --bg-main: #FDFBF8; --bg-secondary: #F5EFE7; --bg-card: #FFFFFF; --bg-modal: #FFFFFF; --gradient-hero: linear-gradient(135deg, #EADBC8 0%, #D6B48A 100%); --text-primary: #1F1F1F; --text-secondary: #5C5C5C; --text-muted: #8C8C8C; --border-color: #D6C5B4; --input-bg: #FFFFFF; --button-secondary: #F5EFE7; --accent-gold: #D4A373; --accent-coffee: #C08457; --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.06); --shadow-hover: 0 8px 24px rgba(156, 107, 62, 0.15); --transition: all 0.25s ease; /* Legacy compat keys used by marketonex.css */ --bg-color: #FDFBF8; --text-color: #1F1F1F; --header-bg: #FFFFFF; --card-bg: #FFFFFF; --primary-color: #9C6B3E; --hover-color: #7A4E2D; --tag-bg: #F5EFE7; --shadow-light: rgba(0, 0, 0, 0.06); --shadow-medium: rgba(156, 107, 62, 0.15); --shadow-strong: rgba(156, 107, 62, 0.25); } /* ── Body ────────────────────────────────────────────────────── */ [data-theme="coffee"] body { background-color: var(--bg-main) !important; color: var(--text-primary) !important; } /* ── Navbar ──────────────────────────────────────────────────── */ [data-theme="coffee"] header { background: rgba(255, 255, 255, 0.97) !important; border-bottom: 1px solid var(--border-color) !important; box-shadow: 0 2px 12px rgba(139, 94, 60, 0.08) !important; } [data-theme="coffee"] .logo { color: var(--color-primary) !important; } [data-theme="coffee"] .search-bar, [data-theme="coffee"] .search-input-wrap { background: var(--input-bg) !important; border-color: var(--border-color) !important; } [data-theme="coffee"] .search-bar input { color: var(--text-primary) !important; background: transparent !important; } [data-theme="coffee"] .search-bar input::placeholder { color: var(--text-muted) !important; } [data-theme="coffee"] .search-bar i { color: var(--accent-coffee) !important; } [data-theme="coffee"] .back-btn { color: var(--text-secondary) !important; } [data-theme="coffee"] .back-btn:hover { color: var(--color-primary) !important; } /* ── Sidebar / Filters ───────────────────────────────────────── */ [data-theme="coffee"] .filter-panel, [data-theme="coffee"] .filters-sidebar, [data-theme="coffee"] .filter-section { background: var(--bg-card) !important; border-color: var(--border-color) !important; box-shadow: var(--shadow-card) !important; } [data-theme="coffee"] .filter-title, [data-theme="coffee"] .collapsible-header span, [data-theme="coffee"] .collapsible-header { color: var(--text-primary) !important; } [data-theme="coffee"] .filter-option label, [data-theme="coffee"] .vendor-filter label, [data-theme="coffee"] .category-filter label { color: var(--text-secondary) !important; } [data-theme="coffee"] input[type="checkbox"], [data-theme="coffee"] input[type="radio"] { accent-color: var(--color-primary) !important; } [data-theme="coffee"] input[type="range"] { accent-color: var(--color-primary) !important; } [data-theme="coffee"] .price-display { color: var(--text-secondary) !important; } /* ── Hero Section ────────────────────────────────────────────── */ [data-theme="coffee"] .hero-section { background: var(--gradient-hero) !important; } [data-theme="coffee"] .hero-title, [data-theme="coffee"] .hero h1 { color: #2E2E2E !important; } [data-theme="coffee"] .hero-description, [data-theme="coffee"] .hero p { color: #5A3E2B !important; } [data-theme="coffee"] .hero-badge { background: rgba(139, 94, 60, 0.15) !important; color: var(--color-primary) !important; border: 1px solid rgba(139, 94, 60, 0.30) !important; } [data-theme="coffee"] .stat-number { color: var(--color-primary) !important; font-weight: 800; } [data-theme="coffee"] .stat-label { color: #7A5C3E !important; } [data-theme="coffee"] .floating-card { background: rgba(255, 255, 255, 0.88) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; backdrop-filter: blur(12px); box-shadow: 0 4px 20px rgba(139, 94, 60, 0.12) !important; } /* ── Product Cards ───────────────────────────────────────────── */ [data-theme="coffee"] .product-card, [data-theme="coffee"] .trending-card, [data-theme="coffee"] .vendor-card, [data-theme="coffee"] .category-card, [data-theme="coffee"] .related-card { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; box-shadow: var(--shadow-card) !important; border-radius: 14px !important; } [data-theme="coffee"] .product-card:hover, [data-theme="coffee"] .trending-card:hover, [data-theme="coffee"] .vendor-card:hover { transform: translateY(-4px) !important; border-color: var(--color-primary) !important; box-shadow: var(--shadow-hover) !important; } [data-theme="coffee"] .product-name, [data-theme="coffee"] .product-card h3, [data-theme="coffee"] .trending-name { color: var(--text-primary) !important; } [data-theme="coffee"] .category-tag, [data-theme="coffee"] .trending-category { color: var(--accent-coffee) !important; font-weight: 600; } [data-theme="coffee"] .vendor-name, [data-theme="coffee"] .trending-vendor { color: var(--text-muted) !important; } [data-theme="coffee"] .price, [data-theme="coffee"] .trending-price, [data-theme="coffee"] .product-price { color: var(--color-primary) !important; font-weight: 700; } [data-theme="coffee"] .original-price, [data-theme="coffee"] .trending-original-price { color: var(--text-muted) !important; } [data-theme="coffee"] .discount-badge { background: var(--color-primary) !important; color: #fff !important; border-radius: 6px !important; } [data-theme="coffee"] .stock-badge { background: rgba(200, 100, 80, 0.12) !important; color: #C05030 !important; } [data-theme="coffee"] .rating, [data-theme="coffee"] .trending-rating { color: var(--accent-gold) !important; } [data-theme="coffee"] .trending-badge.hot { background: linear-gradient(135deg, #C8A96A, #8B5E3C) !important; color: #fff !important; } /* ── Buttons ─────────────────────────────────────────────────── */ [data-theme="coffee"] .add-to-cart-btn, [data-theme="coffee"] .btn-add-to-cart, [data-theme="coffee"] .btn-primary, [data-theme="coffee"] .build-pc-btn, [data-theme="coffee"] .hero-btn.primary, [data-theme="coffee"] .submit-btn, [data-theme="coffee"] .clear-all-filters-btn { background: var(--color-primary) !important; color: #fff !important; border: none !important; box-shadow: 0 4px 10px var(--color-primary-glow) !important; border-radius: 10px !important; } [data-theme="coffee"] .add-to-cart-btn:hover, [data-theme="coffee"] .btn-add-to-cart:hover, [data-theme="coffee"] .build-pc-btn:hover, [data-theme="coffee"] .btn-primary:hover { background: var(--color-primary-hover) !important; box-shadow: 0 6px 14px var(--color-primary-glow) !important; transform: translateY(-2px) scale(1.03) !important; } [data-theme="coffee"] .hero-btn.secondary, [data-theme="coffee"] .btn-secondary, [data-theme="coffee"] .filter-reset-btn { background: var(--button-secondary) !important; color: var(--text-primary) !important; border: 1px solid var(--border-color) !important; } [data-theme="coffee"] button:disabled, [data-theme="coffee"] .btn:disabled { opacity: 0.45 !important; cursor: not-allowed !important; } /* ── Forms / Inputs ──────────────────────────────────────────── */ [data-theme="coffee"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), [data-theme="coffee"] textarea, [data-theme="coffee"] select { background: var(--input-bg) !important; color: var(--text-primary) !important; border: 1px solid var(--border-color) !important; border-radius: 8px; } [data-theme="coffee"] input::placeholder, [data-theme="coffee"] textarea::placeholder { color: var(--text-muted) !important; } [data-theme="coffee"] input:focus, [data-theme="coffee"] textarea:focus, [data-theme="coffee"] select:focus { border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px rgba(139, 94, 60, 0.15) !important; outline: none !important; } [data-theme="coffee"] label { color: var(--text-secondary) !important; } /* ── Modals / Popups ─────────────────────────────────────────── */ [data-theme="coffee"] .modal-content, [data-theme="coffee"] .product-premium-modal-content, [data-theme="coffee"] .review-modal-card, [data-theme="coffee"] .profile-dropdown, [data-theme="coffee"] .pc-builder-modal .modal-content { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; box-shadow: 0 20px 60px rgba(139, 94, 60, 0.15) !important; } [data-theme="coffee"] .modal-backdrop, [data-theme="coffee"] .modal-overlay { background: rgba(46, 30, 18, 0.55) !important; } [data-theme="coffee"] .modal-header, [data-theme="coffee"] .modal-title { color: var(--text-primary) !important; } [data-theme="coffee"] .modal-close-btn, [data-theme="coffee"] .close-modal { color: var(--text-muted) !important; background: var(--button-secondary) !important; } [data-theme="coffee"] .modal-close-btn:hover { color: var(--color-primary) !important; background: var(--bg-secondary) !important; } /* Profile Dropdown ─── */ [data-theme="coffee"] .profile-dropdown { box-shadow: 0 20px 60px rgba(139, 94, 60, 0.18) !important; } [data-theme="coffee"] .profile-header { background: linear-gradient(135deg, #EADBC8, #C7A17A) !important; } [data-theme="coffee"] .profile-name { color: #2E2E2E !important; } [data-theme="coffee"] .profile-greeting { color: #5A3E2B !important; } [data-theme="coffee"] .profile-menu-item { color: var(--text-secondary) !important; } [data-theme="coffee"] .profile-menu-item:hover { background: rgba(139, 94, 60, 0.08) !important; color: var(--color-primary) !important; } [data-theme="coffee"] .profile-menu-section { border-bottom-color: var(--border-color) !important; } [data-theme="coffee"] .section-title { color: var(--text-muted) !important; } [data-theme="coffee"] .logout-btn { color: var(--color-primary) !important; } /* ── Theme Toggle ────────────────────────────────────────────── */ [data-theme="coffee"] #theme-toggle-btn { color: var(--color-primary) !important; border-color: var(--border-color) !important; background: var(--button-secondary) !important; } [data-theme="coffee"] #theme-toggle-btn:hover { border-color: var(--color-primary) !important; } [data-theme="coffee"] .dropdown-menu { background: var(--bg-card) !important; border-color: var(--border-color) !important; box-shadow: 0 8px 30px rgba(139,94,60,0.12) !important; } [data-theme="coffee"] .dropdown-menu button { color: var(--text-secondary) !important; } [data-theme="coffee"] .dropdown-menu button:hover { background: rgba(139,94,60,0.08) !important; color: var(--color-primary) !important; } [data-theme="coffee"] .dropdown-menu button.theme-active { color: var(--color-primary) !important; font-weight: 700; } /* ── Sections / Headings ─────────────────────────────────────── */ [data-theme="coffee"] h1, [data-theme="coffee"] h2, [data-theme="coffee"] h3, [data-theme="coffee"] h4 { color: var(--text-primary) !important; } [data-theme="coffee"] p { color: var(--text-secondary) !important; } [data-theme="coffee"] .section-badge { background: rgba(139, 94, 60, 0.12) !important; color: var(--color-primary) !important; border-color: rgba(139, 94, 60, 0.25) !important; } [data-theme="coffee"] .tabs-header { background: var(--bg-secondary) !important; border: 1px solid var(--border-color) !important; } [data-theme="coffee"] .tab-btn { color: var(--text-secondary) !important; } [data-theme="coffee"] .tab-btn.active { color: var(--color-primary) !important; border-bottom: 2px solid var(--color-primary) !important; } /* ── Tags / Pills ────────────────────────────────────────────── */ [data-theme="coffee"] .tag, [data-theme="coffee"] .filter-tag, [data-theme="coffee"] .tag-bg { background: var(--button-secondary) !important; color: var(--text-secondary) !important; border: 1px solid var(--border-color) !important; border-radius: 20px !important; } [data-theme="coffee"] .tag.active, [data-theme="coffee"] .tag:hover { background: var(--color-primary) !important; color: #fff !important; border-color: var(--color-primary) !important; } /* ── Tables ──────────────────────────────────────────────────── */ [data-theme="coffee"] table { background: var(--bg-card) !important; color: var(--text-primary) !important; } [data-theme="coffee"] th { background: var(--bg-secondary) !important; color: var(--accent-coffee) !important; border-bottom: 1px solid var(--border-color) !important; } [data-theme="coffee"] td { border-bottom: 1px solid var(--border-color) !important; color: var(--text-secondary) !important; } [data-theme="coffee"] tr:hover td { background: rgba(139, 94, 60, 0.04) !important; } /* ── Product View (premium) ──────────────────────────────────── */ [data-theme="coffee"] .info-glass-card { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; box-shadow: var(--shadow-card) !important; } [data-theme="coffee"] .spec-item { border-bottom: 1px solid var(--border-color) !important; } [data-theme="coffee"] .spec-item span { color: var(--text-muted) !important; } [data-theme="coffee"] .spec-item strong { color: var(--text-primary) !important; } [data-theme="coffee"] .premium-review-card { background: var(--bg-secondary) !important; border: 1px solid var(--border-color) !important; } [data-theme="coffee"] .bar-bg { background: var(--button-secondary) !important; } [data-theme="coffee"] .bar-fill { background: var(--color-primary) !important; } [data-theme="coffee"] .qty-btn { background: var(--button-secondary) !important; color: var(--text-primary) !important; border: 1px solid var(--border-color) !important; } [data-theme="coffee"] .btn-add-to-cart, [data-theme="coffee"] .btn-buy-now { background: var(--color-primary) !important; color: #fff !important; box-shadow: 0 4px 14px var(--color-primary-glow) !important; } [data-theme="coffee"] .stock-status.in-stock { color: #2D7A3A !important; } [data-theme="coffee"] .stock-status.out-of-stock { color: #C05030 !important; } [data-theme="coffee"] .premium-highlights-bar { background: var(--bg-secondary) !important; border: 1px solid var(--border-color) !important; } [data-theme="coffee"] .highlight-item { color: var(--text-secondary) !important; } [data-theme="coffee"] .product-badge { background: rgba(139,94,60,0.12) !important; color: var(--color-primary) !important; } [data-theme="coffee"] .related-card { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; } [data-theme="coffee"] .related-card:hover { border-color: var(--color-primary) !important; box-shadow: var(--shadow-hover) !important; } [data-theme="coffee"] .star-picker i.fas { color: var(--accent-gold) !important; } [data-theme="coffee"] .star-picker i.far { color: var(--text-muted) !important; } /* ── PC Builder ──────────────────────────────────────────────── */ [data-theme="coffee"] .pc-builder-modal, [data-theme="coffee"] .selection-modal { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; } [data-theme="coffee"] .component-slot { background: var(--bg-secondary) !important; border: 1px solid var(--border-color) !important; color: var(--text-secondary) !important; border-radius: 10px !important; } [data-theme="coffee"] .component-slot.selected { border-color: var(--color-primary) !important; background: rgba(139, 94, 60, 0.07) !important; } [data-theme="coffee"] .selection-card { background: var(--bg-secondary) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; } [data-theme="coffee"] .selection-card:hover { border-color: var(--color-primary) !important; } [data-theme="coffee"] .pc-summary { background: var(--bg-secondary) !important; border-color: var(--border-color) !important; } /* ── Cart ────────────────────────────────────────────────────── */ [data-theme="coffee"] .cart-sidebar, [data-theme="coffee"] .cart-drawer { background: var(--bg-card) !important; border-left: 1px solid var(--border-color) !important; } [data-theme="coffee"] .cart-item { border-bottom: 1px solid var(--border-color) !important; color: var(--text-primary) !important; } [data-theme="coffee"] .cart-total { color: var(--color-primary) !important; } /* ── Pagination ──────────────────────────────────────────────── */ [data-theme="coffee"] .pagination button, [data-theme="coffee"] .page-btn { background: var(--button-secondary) !important; color: var(--text-secondary) !important; border-color: var(--border-color) !important; } [data-theme="coffee"] .pagination button.active, [data-theme="coffee"] .page-btn.active { background: var(--color-primary) !important; color: #fff !important; border-color: var(--color-primary) !important; } /* ── Footer ──────────────────────────────────────────────────── */ [data-theme="coffee"] footer, [data-theme="coffee"] .site-footer { background: #F3EFEA !important; color: var(--text-secondary) !important; border-top: 1px solid var(--border-color) !important; } [data-theme="coffee"] footer a { color: var(--text-muted) !important; } [data-theme="coffee"] footer a:hover { color: var(--color-primary) !important; } /* ── Scrollbar ───────────────────────────────────────────────── */ [data-theme="coffee"] ::-webkit-scrollbar { width: 8px; background: var(--bg-secondary); } [data-theme="coffee"] ::-webkit-scrollbar-thumb { background: #D4C4B0; border-radius: 4px; } [data-theme="coffee"] ::-webkit-scrollbar-thumb:hover { background: var(--color-primary); } /* ── Toast ───────────────────────────────────────────────────── */ [data-theme="coffee"] .toast { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; box-shadow: 0 8px 30px rgba(139, 94, 60, 0.15) !important; } /* ── Coffee theme toggle indicator ──────────────────────────── */ [data-theme="coffee"] #theme-toggle-btn { background: #F5F0E8 !important; }