/* ============================================================ PRICENOW — DARK MODE Applied when ============================================================ */ [data-theme="dark"] { /* ── Surfaces ─────────────────────────────────────────── */ --pn-background: #0D1117; --pn-card: #161B22; --pn-surface-2: #1C2333; /* ── Text ─────────────────────────────────────────────── */ --pn-foreground: #E6EDF3; --pn-muted: #8B949E; --pn-faint: #6E7681; /* ── Border ───────────────────────────────────────────── */ --pn-border: #30363D; --pn-border-strong: #484F58; /* ── Legacy aliases ───────────────────────────────────── */ --color-bg: var(--pn-background); --color-bg-soft: var(--pn-surface-2); --color-bg-card: var(--pn-card); --color-bg-card-hover:#1E2430; --color-border: var(--pn-border); --color-border-soft: var(--pn-border-strong); --color-text: var(--pn-foreground); --color-text-muted: var(--pn-muted); --color-text-faint: var(--pn-faint); --color-white: var(--pn-foreground); /* ── Shadows ──────────────────────────────────────────── */ --pn-shadow-xs: 0 1px 3px rgba(0,0,0,0.3); --pn-shadow-sm: 0 4px 12px rgba(0,0,0,0.4); --pn-shadow-md: 0 8px 30px rgba(0,0,0,0.5); --pn-shadow-lg: 0 20px 60px rgba(0,0,0,0.6); } /* ── Body ──────────────────────────────────────────────── */ [data-theme="dark"] body { background: var(--pn-background); color: var(--pn-foreground); } /* ── Header ────────────────────────────────────────────── */ [data-theme="dark"] .pn-header { background: rgba(13, 17, 23, 0.92); border-bottom-color: var(--pn-border); } [data-theme="dark"] .pn-header.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,0.5); } [data-theme="dark"] .pn-topbar { background: var(--pn-surface-2); border-bottom-color: var(--pn-border); } /* ── Navigation ────────────────────────────────────────── */ [data-theme="dark"] .pn-nav__link { color: var(--pn-muted); } [data-theme="dark"] .pn-nav__link:hover, [data-theme="dark"] .pn-nav__item.current-menu-item .pn-nav__link { color: var(--pn-foreground); background: var(--pn-surface-2); } [data-theme="dark"] .pn-mega-menu { background: var(--pn-surface-2); border-color: var(--pn-border); box-shadow: 0 16px 48px rgba(0,0,0,0.5); } [data-theme="dark"] .pn-mega-col__heading { color: var(--pn-foreground); } [data-theme="dark"] .pn-mega-col__subs a { color: var(--pn-muted); } /* ── Search ─────────────────────────────────────────────── */ [data-theme="dark"] .pn-search-toggle { color: var(--pn-muted); background: var(--pn-surface-2); border-color: var(--pn-border); } [data-theme="dark"] .pn-search-toggle:hover { color: var(--pn-foreground); } [data-theme="dark"] .pn-search-overlay { background: rgba(0, 0, 0, 0.85); } [data-theme="dark"] .pn-search-box__row { background: var(--pn-card); border-color: var(--pn-border); } [data-theme="dark"] .pn-search-box__cat { background: var(--pn-surface-2); border-right-color: var(--pn-border); color: var(--pn-muted); } [data-theme="dark"] .pn-search-box__input { color: var(--pn-foreground); } [data-theme="dark"] .pn-autocomplete { background: var(--pn-card); border-color: var(--pn-border); } [data-theme="dark"] .pn-autocomplete__group-label { background: var(--pn-surface-2); color: var(--pn-faint); } [data-theme="dark"] .pn-autocomplete__item { color: var(--pn-foreground); } [data-theme="dark"] .pn-autocomplete__item:hover, [data-theme="dark"] .pn-autocomplete__item.is-highlighted { background: var(--pn-surface-2); } /* ── Cards ──────────────────────────────────────────────── */ [data-theme="dark"] .pn-card { background: var(--pn-card); border-color: var(--pn-border); } [data-theme="dark"] .pn-card:hover { background: var(--color-bg-card-hover); border-color: var(--pn-border-strong); } [data-theme="dark"] .pn-card__image-wrap { background: var(--pn-surface-2); } [data-theme="dark"] .pn-card__title, [data-theme="dark"] .pn-card__title a { color: var(--pn-foreground); } [data-theme="dark"] .pn-card__platform-count { background: rgba(0,0,0,0.7); } /* ── Deal Cards ─────────────────────────────────────────── */ [data-theme="dark"] .pn-deal-card { background: var(--pn-card); border-color: var(--pn-border); } [data-theme="dark"] .pn-deal-card__title { color: var(--pn-foreground); } [data-theme="dark"] .pn-deal-card__image { background: var(--pn-surface-2); } /* ── Category Cards ─────────────────────────────────────── */ [data-theme="dark"] .pn-cat-card { background: var(--pn-card); border-color: var(--pn-border); } [data-theme="dark"] .pn-cat-card__icon { background: var(--pn-surface-2); } [data-theme="dark"] .pn-cat-card__name { color: var(--pn-foreground); } /* ── Hero ───────────────────────────────────────────────── */ [data-theme="dark"] .pn-hero__eyebrow { background: var(--pn-surface-2); border-color: var(--pn-border); color: var(--pn-muted); } [data-theme="dark"] .pn-hero__search-box { background: var(--pn-card); border-color: var(--pn-border); } [data-theme="dark"] .pn-hero__search-cat { background: var(--pn-surface-2); border-right-color: var(--pn-border); color: var(--pn-muted); } [data-theme="dark"] .pn-hero__search-input { color: var(--pn-foreground); } [data-theme="dark"] .pn-hero__cat-pill { background: var(--pn-surface-2); border-color: var(--pn-border); color: var(--pn-muted); } [data-theme="dark"] .pn-hero__autocomplete { background: var(--pn-card); border-color: var(--pn-border); } /* ── Sections ───────────────────────────────────────────── */ [data-theme="dark"] .pn-section--dark { background: var(--pn-surface-2); border-color: var(--pn-border); } [data-theme="dark"] .section-title { color: var(--pn-foreground); } /* ── Archive / Category Page ────────────────────────────── */ [data-theme="dark"] .pn-archive-header, [data-theme="dark"] .pn-brand-header { background: var(--pn-card); border-color: var(--pn-border); } [data-theme="dark"] .pn-archive-title, [data-theme="dark"] .pn-brand-header__name { color: var(--pn-foreground); } [data-theme="dark"] .pn-archive-toolbar { border-bottom-color: var(--pn-border); } [data-theme="dark"] .pn-archive-count strong { color: var(--pn-foreground); } [data-theme="dark"] .pn-sort-select { background: var(--pn-card); border-color: var(--pn-border); color: var(--pn-foreground); } [data-theme="dark"] .pn-view-btn { background: var(--pn-card); color: var(--pn-muted); } [data-theme="dark"] .pn-view-btn:hover { background: var(--pn-surface-2); color: var(--pn-foreground); } /* ── Sidebar ────────────────────────────────────────────── */ [data-theme="dark"] .pn-sidebar { background: var(--pn-card); border-color: var(--pn-border); } [data-theme="dark"] .pn-sidebar__header { background: var(--pn-surface-2); border-bottom-color: var(--pn-border); } [data-theme="dark"] .pn-sidebar__title { color: var(--pn-foreground); } [data-theme="dark"] .pn-filter-group { border-bottom-color: var(--pn-border); } [data-theme="dark"] .pn-filter-group__toggle { color: var(--pn-foreground); } [data-theme="dark"] .pn-filter-cats__link { color: var(--pn-muted); } [data-theme="dark"] .pn-filter-cats__count { background: var(--pn-surface-2); border-color: var(--pn-border); color: var(--pn-faint); } [data-theme="dark"] .pn-filter-checks__label { color: var(--pn-muted); } [data-theme="dark"] .pn-filter-checks__label:hover { color: var(--pn-foreground); } /* ── Single Product Page ────────────────────────────────── */ [data-theme="dark"] .pn-single-gallery__main { background: var(--pn-card); border-color: var(--pn-border); } [data-theme="dark"] .pn-single-gallery__thumb { border-color: var(--pn-border); } [data-theme="dark"] .pn-single-title { color: var(--pn-foreground); } [data-theme="dark"] .pn-single-intro { color: var(--pn-muted); border-bottom-color: var(--pn-border); } [data-theme="dark"] .pn-platform-row { background: var(--pn-card); border-color: var(--pn-border); } [data-theme="dark"] .pn-platform-row:hover { border-color: var(--pn-border-strong); } [data-theme="dark"] .pn-platform-row--featured { background: rgba(233,160,32,0.07); } [data-theme="dark"] .pn-single-section-title { color: var(--pn-foreground); } [data-theme="dark"] .pn-single-desc__body { color: var(--pn-muted); } [data-theme="dark"] .pn-single-desc__body h2, [data-theme="dark"] .pn-single-desc__body h3, [data-theme="dark"] .pn-single-desc__body h4 { color: var(--pn-foreground); } [data-theme="dark"] .pn-single-desc__body th { background: var(--pn-surface-2); color: var(--pn-foreground); } [data-theme="dark"] .pn-single-desc__body td { border-color: var(--pn-border); } [data-theme="dark"] .pn-reviews-summary { background: var(--pn-card); border-color: var(--pn-border); } [data-theme="dark"] .pn-review-card { background: var(--pn-card); border-color: var(--pn-border); } [data-theme="dark"] .pn-review-card__author { color: var(--pn-foreground); } [data-theme="dark"] .pn-review-form { background: var(--pn-card); border-color: var(--pn-border); } [data-theme="dark"] .pn-review-form__title { color: var(--pn-foreground); } [data-theme="dark"] .comment-form input[type="text"], [data-theme="dark"] .comment-form input[type="email"], [data-theme="dark"] .comment-form textarea { background: var(--pn-surface-2); border-color: var(--pn-border); color: var(--pn-foreground); } [data-theme="dark"] .pn-related-sidebar { background: var(--pn-card); border-color: var(--pn-border); } [data-theme="dark"] .pn-related-sidebar__title { color: var(--pn-foreground); border-bottom-color: var(--pn-border); } [data-theme="dark"] .pn-related-item:hover { background: var(--pn-surface-2); border-color: var(--pn-border); } [data-theme="dark"] .pn-related-item__title { color: var(--pn-foreground); } /* ── Mobile Drawer ──────────────────────────────────────── */ [data-theme="dark"] .pn-mobile-drawer { background: var(--pn-card); border-right-color: var(--pn-border); } [data-theme="dark"] .pn-mobile-drawer__header { border-bottom-color: var(--pn-border); } [data-theme="dark"] .pn-mobile-nav > ul > li { border-bottom-color: var(--pn-border); } [data-theme="dark"] .pn-mobile-nav a, [data-theme="dark"] .pn-mobile-nav__toggle { color: var(--pn-foreground); } [data-theme="dark"] .pn-mobile-nav__sub { background: var(--pn-surface-2); } /* ── Pagination ─────────────────────────────────────────── */ [data-theme="dark"] .pn-pagination li a, [data-theme="dark"] .pn-pagination li span { background: var(--pn-card); border-color: var(--pn-border); color: var(--pn-muted); } /* ── Ad Slot ────────────────────────────────────────────── */ [data-theme="dark"] .pn-ad-slot { background: var(--pn-surface-2); border-color: var(--pn-border); } /* ── Sponsored Bar ──────────────────────────────────────── */ [data-theme="dark"] .pn-sponsored { background: var(--pn-surface-2); border-color: var(--pn-border); } [data-theme="dark"] .pn-sponsored__card { background: var(--pn-card); border-color: var(--pn-border); } /* ── Footer ─────────────────────────────────────────────── */ [data-theme="dark"] .pn-footer { border-top-color: var(--pn-border); } [data-theme="dark"] .pn-footer__bottom { background: var(--pn-surface-2); border-top-color: var(--pn-border); } [data-theme="dark"] .pn-social { border-color: var(--pn-border); color: var(--pn-muted); } /* ── Forms ──────────────────────────────────────────────── */ [data-theme="dark"] .form-input, [data-theme="dark"] .pn-filter-input { background: var(--pn-surface-2); border-color: var(--pn-border); color: var(--pn-foreground); } [data-theme="dark"] .pn-price-input { background: var(--pn-surface-2); border-color: var(--pn-border); color: var(--pn-foreground); } /* ── Carousel Buttons ───────────────────────────────────── */ [data-theme="dark"] .pn-carousel-btn { background: var(--pn-card); border-color: var(--pn-border); color: var(--pn-muted); } /* ── Theme Toggle Button ────────────────────────────────── */ .pn-theme-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--pn-radius-sm); border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; margin-left: 6px; } .pn-theme-toggle:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.35); color: #fff; } .pn-theme-toggle svg { width: 17px; height: 17px; transition: opacity 0.2s, transform 0.3s; } .pn-theme-toggle .icon-sun { display: none; } .pn-theme-toggle .icon-moon { display: block; } [data-theme="dark"] .pn-theme-toggle .icon-sun { display: block; } [data-theme="dark"] .pn-theme-toggle .icon-moon { display: none; } /* Smooth global transitions when theme switches */ *, *::before, *::after { transition-property: background-color, border-color, color, box-shadow; transition-duration: 0.2s; transition-timing-function: ease; } /* But don't slow down animations/transforms */ .pn-carousel, .pn-card:hover, .pn-hero__orb, .pn-mobile-drawer, .pn-search-overlay, .pn-mega-menu { transition: none; }