/* ========================= Dark theme (MobilePrices) Toggle via: ========================= */ html[data-theme="dark"]{ color-scheme: dark; --bg: #0b0f19; --surface: #0f172a; --text: #e5e7eb; --muted: #9ca3af; --border-color: rgba(229,231,235,0.12); --color-white: #0b0f19; /* used in some legacy areas */ --color-black: #e5e7eb; --color-gray-900: #e5e7eb; --color-gray-800: #d1d5db; --color-gray-700: #cbd5e1; --color-gray-600: #9ca3af; --color-gray-500: #94a3b8; --color-gray-400: #94a3b8; --color-gray-300: rgba(229,231,235,0.18); --color-gray-200: rgba(229,231,235,0.12); --color-gray-100: rgba(229,231,235,0.08); --color-gray-50: rgba(229,231,235,0.05); --brand: #e5e7eb; /* primary becomes light in dark mode */ --brand-2: #ffffff; --soft: rgba(229,231,235,0.08); --soft-2: rgba(229,231,235,0.12); --shadow-sm: 0 2px 10px rgba(0,0,0,.28); --shadow-md: 0 10px 25px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.25); --border: 1px solid var(--border-color); --focus-ring: 0 0 0 1px rgba(229,231,235,.22); } /* Background helpers */ html[data-theme="dark"] body{ background: var(--bg); color: var(--text); } /* Cards */ html[data-theme="dark"] .card, html[data-theme="dark"] .mp-card { background: var(--surface); } /* Inputs */ html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select{ background: rgba(229,231,235,0.06); color: var(--text); } html[data-theme="dark"] .select { /* Custom dropdown caret (lets us control spacing) */ -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 44px; /* space for caret */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 7px center; /* increase 16px -> more left */ background-size: 16px 16px; } /* Nav */ html[data-theme="dark"] .nav{ background: rgba(15,23,42,0.92); backdrop-filter: blur(10px); } html[data-theme="dark"] .hero__grid { background: #0f172a; } html[data-theme="dark"] .badge--outline { background: #0b0f19; } html[data-theme="dark"] .product-brand-btn { background: #0b0f19; } html[data-theme="dark"] .btn--primary { background: #0b0f19; border-color: var(--color-gray-200) } html[data-theme="dark"] button.product-brand-btn:hover{ background: #0f172a; color: #fff; } html[data-theme="dark"] .btn--primary:hover{ background: #0f172a; } html[data-theme="dark"] .page--404 .hero-404 { background: #0f172a; } html[data-theme="dark"] .footer { background: #0e1629; } /* ========================= Dark theme coverage extensions Keep light-mode CSS untouched; only override in dark mode. ========================= */ html[data-theme="dark"]{ --color-white-rgb: 229, 231, 235; --color-surface-2: #111b31; --color-surface-3: #16233d; --color-blue-soft: rgba(8,102,255,0.16); --color-blue-soft-2: rgba(8,102,255,0.22); --color-green-soft: rgba(34,197,94,0.14); --color-warn-soft: rgba(245,158,11,0.16); --color-yellow-soft: rgba(250,204,21,0.14); } html[data-theme="dark"] a{ color: inherit; } html[data-theme="dark"] .skip-link, html[data-theme="dark"] .dropdown, html[data-theme="dark"] .drawer, html[data-theme="dark"] .drawer-search, html[data-theme="dark"] .search, html[data-theme="dark"] .compare-overlay, html[data-theme="dark"] .compare-overlay__footer{ background: var(--surface); color: var(--text); } html[data-theme="dark"] .search input, html[data-theme="dark"] .drawer-search input, html[data-theme="dark"] .compare-overlay__close, html[data-theme="dark"] .compare-item__remove, html[data-theme="dark"] .btn-icon, html[data-theme="dark"] .theme-toggle{ color: var(--text); } html[data-theme="dark"] .search input, html[data-theme="dark"] .drawer-search input{ background: transparent; } html[data-theme="dark"] .nav-links a, html[data-theme="dark"] .brand, html[data-theme="dark"] .dropdown a, html[data-theme="dark"] .drawer a, html[data-theme="dark"] .drawer-title, html[data-theme="dark"] .widget__title, html[data-theme="dark"] .more-products__name, html[data-theme="dark"] .more-products__price, html[data-theme="dark"] .page--contact .quick-contact__value, html[data-theme="dark"] .page--about .stat__v, html[data-theme="dark"] .page--about .callout__title, html[data-theme="dark"] .page--about .callout__text a, html[data-theme="dark"] .page--brand-archive .archive-head__title, html[data-theme="dark"] .page--brand-archive .brand-card__name, html[data-theme="dark"] .page--legal .legal-summary__title, html[data-theme="dark"] .page--404 .error-code, html[data-theme="dark"] .page--404 .hero-404__title, html[data-theme="dark"] .page--404 .error-card__title, html[data-theme="dark"] .page--404 .error-links a, html[data-theme="dark"] .page--404 .quick-card__title{ color: var(--text); } html[data-theme="dark"] .drawer a{ background: transparent; border-bottom-color: rgba(var(--color-white-rgb), 0.08); } html[data-theme="dark"] .nav-links a:hover, html[data-theme="dark"] .dropdown a:hover, html[data-theme="dark"] .drawer a:hover, html[data-theme="dark"] .list__link:hover, html[data-theme="dark"] .page--brand-archive .brand-card__link:hover, html[data-theme="dark"] .page--404 .error-links a:hover, html[data-theme="dark"] .page--404 .quick-card:hover, html[data-theme="dark"] .pagination__btn:hover, html[data-theme="dark"] .pagination__link:hover, html[data-theme="dark"] .section-nav__link:hover{ background: rgba(var(--color-white-rgb), 0.08); } html[data-theme="dark"] .hero__grid, html[data-theme="dark"] .page--home .hero__grid, html[data-theme="dark"] .page--404 .hero-404, html[data-theme="dark"] .hero__panel, html[data-theme="dark"] .compare-box, html[data-theme="dark"] .page--about .stat, html[data-theme="dark"] .page--about .callout, html[data-theme="dark"] .page--404 .error-card, html[data-theme="dark"] .page--404 .quick-card, html[data-theme="dark"] .page--brand-archive .brand-mark, html[data-theme="dark"] .ad-placeholder{ background: var(--surface); } html[data-theme="dark"] .list__link, html[data-theme="dark"] .page--home .brand-card, html[data-theme="dark"] .page--home .price-card, html[data-theme="dark"] .page--brand-archive .brand-card__link, html[data-theme="dark"] .pagination, html[data-theme="dark"] .pagination__btn, html[data-theme="dark"] .pagination__link, html[data-theme="dark"] .spec-group, html[data-theme="dark"] .spec-group__head, html[data-theme="dark"] .table, html[data-theme="dark"] .compare-selector__cell, html[data-theme="dark"] .compare-section__head, html[data-theme="dark"] .picker-search, html[data-theme="dark"] .picker-empty, html[data-theme="dark"] .page--product .pros-cons__col, html[data-theme="dark"] .page--product .reviews__summary, html[data-theme="dark"] .page--product .our-rating, html[data-theme="dark"] .page--product .our-rating-item, html[data-theme="dark"] .page--product .variant-card, html[data-theme="dark"] .page--product .key-specs:not(.key-specs--premium), html[data-theme="dark"] .page--product .section-nav__link, html[data-theme="dark"] .page--product .price-box, html[data-theme="dark"] .page--product .product-hero__media, html[data-theme="dark"] .page--contact .quick-contact__icon{ background: var(--surface); border-color: var(--border-color); } html[data-theme="dark"] .table th, html[data-theme="dark"] .table--spec th, html[data-theme="dark"] .page--product .table--spec tr:hover th, html[data-theme="dark"] .page--product .table--spec tr:hover td{ background: rgba(var(--color-white-rgb), 0.06); } html[data-theme="dark"] .table td, html[data-theme="dark"] .table th, html[data-theme="dark"] .page--brand-archive .archive-head__meta, html[data-theme="dark"] .page--brand-archive .brand-card__count, html[data-theme="dark"] .page--brand-archive .brand-card__desc, html[data-theme="dark"] .page--about .stat__k, html[data-theme="dark"] .page--about .bullets, html[data-theme="dark"] .page--legal .legal-summary__list, html[data-theme="dark"] .page--legal .bullets, html[data-theme="dark"] .page--404 .hero-404__subtitle, html[data-theme="dark"] .page--404 .error-card__text, html[data-theme="dark"] .page--404 .quick-card__desc, html[data-theme="dark"] .page--contact, html[data-theme="dark"] .page--contact .quick-contact__label, html[data-theme="dark"] .page--product .product-hero__sub, html[data-theme="dark"] .page--product .price-box__label, html[data-theme="dark"] .page--product .price-box__note, html[data-theme="dark"] .page--product .key-specs__k, html[data-theme="dark"] .page--product .mini-price__label, html[data-theme="dark"] .page--product .reviews__outof, html[data-theme="dark"] .page--product .our-rating-item__label, html[data-theme="dark"] .page--product .our-rating-item__score, html[data-theme="dark"] .page--product .our-rating-item__score span, html[data-theme="dark"] .page--product .price-box__variant-title, html[data-theme="dark"] .page--product .variant-card__price, html[data-theme="dark"] .page--product .section-nav__link, html[data-theme="dark"] .more-products__cta, html[data-theme="dark"] .ad-placeholder__text, html[data-theme="dark"] .pagination__dots{ color: var(--muted); } html[data-theme="dark"] .page--product .price-box__value, html[data-theme="dark"] .page--product .mini-price__value, html[data-theme="dark"] .page--product .variant-card__spec, html[data-theme="dark"] .page--product .key-specs__v, html[data-theme="dark"] .compare-slot__name, html[data-theme="dark"] .compare-slot__price, html[data-theme="dark"] .compare-section__title{ color: var(--text); } html[data-theme="dark"] .page--product .product-hero__compare-btn, html[data-theme="dark"] .page--product .product-hero__more-images, html[data-theme="dark"] .page--product .key-specs--premium .key-specs__item, html[data-theme="dark"] .page--product .variant-card, html[data-theme="dark"] .page--product .compare-box, html[data-theme="dark"] .page--product .reviews__summary, html[data-theme="dark"] .page--product .our-rating-item, html[data-theme="dark"] .page--contact .quick-contact__icon, html[data-theme="dark"] .page--home .brand-card__icon, html[data-theme="dark"] .page--home .price-card__icon{ background: var(--color-surface-2); } html[data-theme="dark"] .page--product .product-hero__media{ border-color: rgba(34,197,94,0.2); } html[data-theme="dark"] .page--product .product-hero__more-images, html[data-theme="dark"] .page--product .key-specs--premium .key-specs__item{ border-color: rgba(8,102,255,0.24); color: var(--text); } html[data-theme="dark"] .page--product .key-specs--premium .key-specs__item:focus-within, html[data-theme="dark"] .page--product .section-nav__link:hover{ border-color: rgba(var(--color-white-rgb), 0.18); } html[data-theme="dark"] .page--product .key-specs--premium .key-specs__icon, html[data-theme="dark"] .pagination__link.is-active, html[data-theme="dark"] .compare-overlay__count, html[data-theme="dark"] .btn-primary, html[data-theme="dark"] .btn--primary, html[data-theme="dark"] .btn-primary:hover, html[data-theme="dark"] .btn--primary:hover{ background: #0866ff; border-color: #0866ff; color: #fff; } html[data-theme="dark"] .btn-outline, html[data-theme="dark"] .btn--outline, html[data-theme="dark"] .page--product .product-hero__compare-btn, html[data-theme="dark"] .page--product .product-hero__more-images, html[data-theme="dark"] .pagination__btn, html[data-theme="dark"] .pagination__link, html[data-theme="dark"] .product-brand-btn{ color: var(--text); border-color: var(--border-color); } html[data-theme="dark"] .btn-outline:hover, html[data-theme="dark"] .btn--outline:hover, html[data-theme="dark"] button.product-brand-btn:hover{ background: rgba(var(--color-white-rgb), 0.08); color: #fff; } html[data-theme="dark"] .badge, html[data-theme="dark"] .kicker, html[data-theme="dark"] .page--home .product-tile__compare, html[data-theme="dark"] .page--404 .error-links a, html[data-theme="dark"] .page--404 .quick-card, html[data-theme="dark"] .page--about .stat, html[data-theme="dark"] .page--about .callout{ background: rgba(var(--color-white-rgb), 0.05); } html[data-theme="dark"] .badge--outline{ background: transparent; } html[data-theme="dark"] .page--product .compare-box, html[data-theme="dark"] .page--product .reviews__summary, html[data-theme="dark"] .page--product .our-rating, html[data-theme="dark"] .page--product .our-rating-item, html[data-theme="dark"] .page--product .pros-cons__col, html[data-theme="dark"] .page--product .variant-card, html[data-theme="dark"] .compare-table, html[data-theme="dark"] .compare-section__head, html[data-theme="dark"] .compare-selector__cell, html[data-theme="dark"] .page--404 .error-card, html[data-theme="dark"] .page--404 .quick-card, html[data-theme="dark"] .page--home .product-tile, html[data-theme="dark"] .page--home .brand-card, html[data-theme="dark"] .page--home .price-card{ box-shadow: var(--shadow-sm); } html[data-theme="dark"] .page--product .compare-box, html[data-theme="dark"] .page--product .our-rating, html[data-theme="dark"] .page--product .reviews__summary, html[data-theme="dark"] .page--product .pros-cons__col, html[data-theme="dark"] .page--product .our-rating-item, html[data-theme="dark"] .page--product .variant-card, html[data-theme="dark"] .page--product .key-specs:not(.key-specs--premium), html[data-theme="dark"] .page--product .price-box, html[data-theme="dark"] .page--product .section-nav, html[data-theme="dark"] .page--404 .error-card, html[data-theme="dark"] .page--404 .quick-card, html[data-theme="dark"] .page--brand-archive .brand-card__link, html[data-theme="dark"] .page--home .brand-card, html[data-theme="dark"] .page--home .price-card, html[data-theme="dark"] .pagination, html[data-theme="dark"] .compare-table, html[data-theme="dark"] .compare-selector, html[data-theme="dark"] .compare-section__head{ border-color: var(--border-color); } html[data-theme="dark"] .page--product .our-rating__overallbar, html[data-theme="dark"] .page--product .our-rating-item__bar, html[data-theme="dark"] .page--product .reviews__bar, html[data-theme="dark"] .page--product .rating-bar, html[data-theme="dark"] .page--product .rating-progress{ background: rgba(var(--color-white-rgb), 0.12); } html[data-theme="dark"] .page--product .our-rating__badge, html[data-theme="dark"] .page--compare .our-rating__badge{ background: var(--color-surface-3); color: var(--text); border-color: var(--surface); } html[data-theme="dark"] .page--product .table--spec th{ border-right-color: var(--border-color); } html[data-theme="dark"] .page--product .section-nav__link, html[data-theme="dark"] .compare-slot__remove, html[data-theme="dark"] .compare-slot__img, html[data-theme="dark"] .page--product .variant-spec, html[data-theme="dark"] .page--product .reviews__item, html[data-theme="dark"] .page--product .review-item, html[data-theme="dark"] .page--product .review-card, html[data-theme="dark"] .page--product .review-form, html[data-theme="dark"] .page--product .review-box, html[data-theme="dark"] .page--product .review-list > *{ border-color: var(--border-color); } html[data-theme="dark"] .compare-slot__img, html[data-theme="dark"] .page--product .compare-box, html[data-theme="dark"] .page--product .variant-card, html[data-theme="dark"] .page--product .review-card, html[data-theme="dark"] .page--product .review-box, html[data-theme="dark"] .page--product .review-form, html[data-theme="dark"] .page--product .reviews__item, html[data-theme="dark"] .page--product .review-item{ background: var(--surface); } html[data-theme="dark"] .page--product .pros-cons__col:first-child{ border-left: 3px solid rgba(34,197,94,0.45); } html[data-theme="dark"] .page--product .pros-cons__col:last-child{ border-left: 3px solid rgba(239,68,68,0.45); } html[data-theme="dark"] .page--product .product-hero__compare-btn, html[data-theme="dark"] .page--product .product-hero__more-images, html[data-theme="dark"] .page--product .product-hero__more-images i, html[data-theme="dark"] .page--product .product-hero__more-images span{ color: var(--text); } html[data-theme="dark"] .page--product .variant-card, html[data-theme="dark"] .page--product .reviews__summary, html[data-theme="dark"] .page--product .compare-box{ background-image: none; } html[data-theme="dark"] .page--product .price-box__variant-title{ color: var(--muted); } html[data-theme="dark"] .page--product .pros-cons__list, html[data-theme="dark"] .page--product .reviews__count, html[data-theme="dark"] .page--product .reviews__meta, html[data-theme="dark"] .page--product .review-meta, html[data-theme="dark"] .page--product .review-date, html[data-theme="dark"] .page--product .review-help, html[data-theme="dark"] .page--product .review-empty, html[data-theme="dark"] .page--product .review-form__hint{ color: var(--muted); } html[data-theme="dark"] .page--product .note, html[data-theme="dark"] .page--product .product-note, html[data-theme="dark"] .page--product .warning, html[data-theme="dark"] .page--product .chip, html[data-theme="dark"] .page--product .highlight, html[data-theme="dark"] .page--product .mini-note{ background: rgba(var(--color-white-rgb), 0.06); color: var(--text); border-color: var(--border-color); } html[data-theme="dark"] .page--product .badge, html[data-theme="dark"] .page--product .chip, html[data-theme="dark"] .page--product .kicker{ color: var(--text); } html[data-theme="dark"] .page--login .inline-link, html[data-theme="dark"] .page--register .inline-link, html[data-theme="dark"] .page--404 .error-links a, html[data-theme="dark"] .page--about .callout__text a{ color: #cfe1ff; } html[data-theme="dark"] .page--home .product-tile__compare:hover, html[data-theme="dark"] .page--home .product-tile__compare, html[data-theme="dark"] .page--home .brand-card__icon, html[data-theme="dark"] .page--home .price-card__icon, html[data-theme="dark"] .page--contact .quick-contact__icon, html[data-theme="dark"] .page--brand-archive .brand-mark{ background: rgba(var(--color-white-rgb), 0.06); } html[data-theme="dark"] .page--home .product-tile__checkbox{ accent-color: #0866ff; } html[data-theme="dark"] .footer { background: radial-gradient(1200px 300px at 20% -40%, rgba(255,255,255,.06), transparent 60%), radial-gradient(900px 300px at 80% -40%, rgba(255,255,255,.05), transparent 60%), linear-gradient(180deg, #0f172a, #0b1120); }