/** * JustReused global themes — Light (warm marketplace) + Spotify (dark). * Applied via data-jr-theme on . Load LAST on browse + listing pages. * Cache bust: v14 */ /* ── Smooth theme transitions ── */ html, body, main, #siteHeader, footer, .af-container, .af-main, .af-search-section, .af-sidebar, .af-hero-card, .jr-listing-card, .jr2-page, .jr2-glass, .jr2-primary-card { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } /* ═══════════════════════════════════════ LIGHT — warm marketplace ═══════════════════════════════════════ */ [data-jr-theme="light"] { --jr-bg-base: #fffbfa; --jr-bg-elevated: #ffffff; --jr-bg-highlight: #f8fafc; --jr-bg-header: rgba(255, 255, 255, 0.94); --jr-bg-input: #f1f5f9; --jr-text-primary: #0f172a; --jr-text-secondary: #475569; --jr-text-muted: #64748b; --jr-border: #e2e8f0; --jr-accent: #f8991b; --jr-accent-hover: #e88a0c; --jr-accent-secondary: #39763a; --jr-link: #2563eb; --jr-card-shadow: 0 4px 18px rgba(15, 23, 42, 0.06); --primary: #f8991b; --primary-dark: #e88a0c; --secondary: #39763a; color-scheme: light; } /* ═══════════════════════════════════════ SPOTIFY — dark premium ═══════════════════════════════════════ */ [data-jr-theme="spotify"] { --jr-bg-base: #121212; --jr-bg-elevated: #181818; --jr-bg-highlight: #282828; --jr-bg-header: rgba(0, 0, 0, 0.92); --jr-bg-input: #242424; --jr-text-primary: #ffffff; --jr-text-secondary: #b3b3b3; --jr-text-muted: #a7a7a7; --jr-border: rgba(255, 255, 255, 0.1); --jr-accent: #1db954; --jr-accent-hover: #1ed760; --jr-accent-secondary: #1db954; --jr-link: #1ed760; --jr-card-shadow: 0 8px 28px rgba(0, 0, 0, 0.55); --primary: #1db954; --primary-dark: #1aa34a; --secondary: #1db954; --jr2-page: #121212; --jr2-surface: rgba(24, 24, 24, 0.96); --jr2-surface-solid: #181818; --jr2-surface-soft: #282828; --jr2-line: rgba(255, 255, 255, 0.1); --jr2-line-strong: rgba(255, 255, 255, 0.16); --jr2-text: #ffffff; --jr2-muted: #b3b3b3; --jr2-subtle: #a7a7a7; --jr2-green: #1db954; --jr2-green-dark: #1aa34a; --jr2-green-soft: rgba(29, 185, 84, 0.14); --jr2-shadow: 0 8px 28px rgba(0, 0, 0, 0.55); --jr2-shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.4); color-scheme: dark; font-feature-settings: "kern" 1, "liga" 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── Base surfaces (both themes) ── */ html, body { background-color: var(--jr-bg-base) !important; color: var(--jr-text-primary); } main, .page-wrapper, .af-search-root, .af-container, .af-main { background-color: var(--jr-bg-base); color: var(--jr-text-primary); } /* ═══════════════════════════════════════ SPOTIFY — anti-mixing foundation Never allow light surfaces on one page ═══════════════════════════════════════ */ [data-jr-theme="spotify"] html, [data-jr-theme="spotify"] body, [data-jr-theme="spotify"] main, [data-jr-theme="spotify"] .page-wrapper, [data-jr-theme="spotify"] .af-search-root, [data-jr-theme="spotify"] .af-container, [data-jr-theme="spotify"] .af-main, [data-jr-theme="spotify"] .af-grid-split, [data-jr-theme="spotify"] .af-results-split { background-color: var(--jr-bg-base) !important; color: var(--jr-text-primary) !important; } [data-jr-theme="spotify"] .bg-white, [data-jr-theme="spotify"] .bg-white\/90, [data-jr-theme="spotify"] .bg-white\/95, [data-jr-theme="spotify"] .bg-warm-light, [data-jr-theme="spotify"] .bg-slate-50, [data-jr-theme="spotify"] .bg-slate-100, [data-jr-theme="spotify"] .hover\:bg-slate-50:hover, [data-jr-theme="spotify"] .hover\:bg-gray-100:hover { background-color: var(--jr-bg-elevated) !important; } [data-jr-theme="spotify"] #preloader { background: var(--jr-bg-base) !important; } /* Tailwind text utilities → silver / white */ [data-jr-theme="spotify"] .text-gray-600, [data-jr-theme="spotify"] .text-gray-700, [data-jr-theme="spotify"] .text-gray-800, [data-jr-theme="spotify"] .text-slate-500, [data-jr-theme="spotify"] .text-slate-600, [data-jr-theme="spotify"] .text-slate-700, [data-jr-theme="spotify"] .text-slate-800, [data-jr-theme="spotify"] .text-slate-900 { color: var(--jr-text-secondary) !important; } [data-jr-theme="spotify"] .text-slate-400, [data-jr-theme="spotify"] .placeholder\:text-slate-400::placeholder { color: var(--jr-text-muted) !important; } [data-jr-theme="spotify"] .border-gray-200, [data-jr-theme="spotify"] .border-slate-200, [data-jr-theme="spotify"] .border-slate-100, [data-jr-theme="spotify"] .ring-slate-200 { border-color: var(--jr-border) !important; } [data-jr-theme="spotify"] .bg-gray-200 { background-color: var(--jr-bg-highlight) !important; } [data-jr-theme="spotify"] .bg-primary-lighter { background: rgba(29, 185, 84, 0.12) !important; } [data-jr-theme="spotify"] .border-primary-light { border-color: rgba(29, 185, 84, 0.35) !important; } /* ── Header ── */ #siteHeader { background: var(--jr-bg-header) !important; border-color: var(--jr-border) !important; color: var(--jr-text-primary); } #siteHeader .text-slate-800, #siteHeader .text-slate-700, #siteHeader .text-slate-600, #siteHeader .text-slate-500 { color: var(--jr-text-secondary) !important; } #siteHeader a:not(.post-ad-btn):not(.bg-primary) { color: inherit; } [data-jr-theme="spotify"] #siteHeader.bg-white\/90 { background: var(--jr-bg-header) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } /* Header search pill — Spotify #242424 */ [data-jr-theme="spotify"] #siteHeader input[type="text"], [data-jr-theme="spotify"] #siteHeader .bg-slate-100 { background-color: #242424 !important; color: var(--jr-text-primary) !important; border: none !important; box-shadow: none !important; --tw-ring-color: rgba(255, 255, 255, 0.08) !important; } [data-jr-theme="spotify"] #siteHeader input[type="text"]:focus { --tw-ring-color: rgba(255, 255, 255, 0.2) !important; outline: none; } [data-jr-theme="spotify"] #siteHeader .fa-magnifying-glass { color: var(--jr-text-muted) !important; } [data-jr-theme="spotify"] #siteHeader .absolute.bg-white, [data-jr-theme="spotify"] #siteHeader .shadow-lg.border-slate-200 { background: #282828 !important; border-color: var(--jr-border) !important; } [data-jr-theme="spotify"] #siteHeader .hover\:bg-slate-50:hover { background: #333333 !important; } [data-jr-theme="spotify"] #siteHeader .bg-white.shadow-xl, [data-jr-theme="spotify"] #siteHeader .flex.h-full.flex-col.bg-white { background: #181818 !important; } /* ── Browse / search hero ── */ .af-search-section, .af-hero-card, .af-sidebar, .af-refine-list, .af-popular-brands-grid, .af-popular-brand, .af-main, .af-empty, .jr-listing-card, .product-grid .jr-listing-card, .af-grid .jr-listing-card { background: var(--jr-bg-elevated) !important; border-color: var(--jr-border) !important; color: var(--jr-text-primary); box-shadow: var(--jr-card-shadow); } [data-jr-theme="spotify"] .af-search-section::before { opacity: 0.08; background: linear-gradient(135deg, rgba(29, 185, 84, 0.06), rgba(255, 255, 255, 0.02)) !important; } [data-jr-theme="spotify"] .af-search-title { color: var(--jr-text-primary) !important; } [data-jr-theme="spotify"] .af-search-subtitle, [data-jr-theme="spotify"] .af-browse-prompt, [data-jr-theme="spotify"] .af-results-count, [data-jr-theme="spotify"] .af-filter-grid-label, [data-jr-theme="spotify"] .af-step-label, [data-jr-theme="spotify"] .af-quick-label, [data-jr-theme="spotify"] .af-sidebar-hint, [data-jr-theme="spotify"] .af-sidebar-context, [data-jr-theme="spotify"] .af-refine-label, [data-jr-theme="spotify"] .af-toggle-row { color: var(--jr-text-secondary) !important; } [data-jr-theme="spotify"] .af-sidebar-context-label, [data-jr-theme="spotify"] .af-sidebar-context-sep { color: var(--jr-text-muted) !important; } /* Hero search forms — dark surfaces */ [data-jr-theme="spotify"] .af-search-form, [data-jr-theme="spotify"] .af-search-form-secondary { background: var(--jr-bg-highlight) !important; border-color: var(--jr-border) !important; } [data-jr-theme="spotify"] .af-search-form:focus-within, [data-jr-theme="spotify"] .af-search-form-secondary:focus-within { border-color: var(--jr-accent) !important; box-shadow: 0 0 0 3px rgba(29, 185, 84, 0.15) !important; } [data-jr-theme="spotify"] .af-quick-select, [data-jr-theme="spotify"] .af-sidebar-quick-input, [data-jr-theme="spotify"] .af-filter-row input, [data-jr-theme="spotify"] .af-filter-row select, [data-jr-theme="spotify"] .af-option-label input { background: var(--jr-bg-highlight) !important; border-color: var(--jr-border) !important; color: var(--jr-text-primary) !important; } [data-jr-theme="spotify"] .af-vertical-rail { background: #181818 !important; border-color: var(--jr-border) !important; } [data-jr-theme="spotify"] .af-vertical-rail-btn { color: var(--jr-text-secondary) !important; } [data-jr-theme="spotify"] .af-vertical-rail-btn:hover, [data-jr-theme="spotify"] .af-vertical-rail-btn.active { background: #282828 !important; border-color: var(--jr-border) !important; color: var(--jr-text-primary) !important; } [data-jr-theme="spotify"] .af-vertical-rail-btn.active { border-color: var(--jr-accent) !important; box-shadow: 0 2px 8px rgba(29, 185, 84, 0.2) !important; } [data-jr-theme="spotify"] .af-vertical-rail-btn.active i, [data-jr-theme="spotify"] .af-vertical-rail-btn i { color: var(--jr-text-muted) !important; } [data-jr-theme="spotify"] .af-vertical-rail-btn.active i { color: var(--jr-accent) !important; } [data-jr-theme="spotify"] .af-type-grid, [data-jr-theme="spotify"] .af-type-grid .af-type-pick { background: var(--jr-bg-elevated) !important; border-color: var(--jr-border) !important; color: var(--jr-text-secondary) !important; } [data-jr-theme="spotify"] .af-type-grid .af-type-pick.active { background: rgba(29, 185, 84, 0.12) !important; color: var(--jr-text-primary) !important; box-shadow: inset 0 0 0 2px var(--jr-accent) !important; } [data-jr-theme="spotify"] .af-type-pick { background: var(--jr-bg-highlight) !important; border-color: var(--jr-border) !important; color: var(--jr-text-secondary) !important; } [data-jr-theme="spotify"] .af-listing-tab { color: var(--jr-text-muted) !important; border-color: var(--jr-border) !important; } [data-jr-theme="spotify"] .af-listing-tab.active { color: var(--jr-accent) !important; border-bottom-color: var(--jr-accent) !important; } [data-jr-theme="spotify"] .af-listing-tabs { border-color: var(--jr-border) !important; } [data-jr-theme="spotify"] .af-more-filters { color: var(--jr-accent) !important; } [data-jr-theme="spotify"] .af-result-cta, [data-jr-theme="spotify"] .af-show-offers-btn { background: var(--jr-accent) !important; color: #ffffff !important; } [data-jr-theme="spotify"] .af-result-cta:hover, [data-jr-theme="spotify"] .af-show-offers-btn:hover { background: var(--jr-accent-hover) !important; } [data-jr-theme="spotify"] .af-hero-footer, [data-jr-theme="spotify"] .af-quick-grid, [data-jr-theme="spotify"] .af-sidebar-footer { border-color: var(--jr-border) !important; } [data-jr-theme="spotify"] .af-filter-row:hover, [data-jr-theme="spotify"] .af-option-label:hover, [data-jr-theme="spotify"] .af-drill-item:hover { background: #333333 !important; } [data-jr-theme="spotify"] .af-sidebar::-webkit-scrollbar-thumb { background: #404040 !important; } [data-jr-theme="spotify"] .af-sidebar-close { color: var(--jr-text-muted) !important; } [data-jr-theme="spotify"] .af-sidebar-quick-label::after { background: var(--jr-border) !important; } [data-jr-theme="spotify"] .af-geo-notice { background: rgba(29, 185, 84, 0.1) !important; border-color: rgba(29, 185, 84, 0.35) !important; color: var(--jr-text-secondary) !important; } [data-jr-theme="spotify"] .af-geo-notice-clear { background: var(--jr-bg-highlight) !important; border-color: var(--jr-border) !important; color: var(--jr-text-primary) !important; } /* ── Listing cards — unified dark card ── */ .jr-listing-card { overflow: hidden; } [data-jr-theme="spotify"] .jr-listing-card, [data-jr-theme="spotify"] .product-grid .jr-listing-card, [data-jr-theme="spotify"] .af-grid .jr-listing-card { background: #181818 !important; border-color: var(--jr-border) !important; } [data-jr-theme="spotify"] .jr-listing-card:hover { border-color: rgba(255, 255, 255, 0.18) !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important; } [data-jr-theme="spotify"] .jr-listing-card__body { background: #181818 !important; } [data-jr-theme="spotify"] .jr-listing-card__media { background: #282828 !important; } [data-jr-theme="spotify"] .jr-listing-card__spec-grid, [data-jr-theme="spotify"] .jr-listing-card__footer { border-color: var(--jr-border) !important; } [data-jr-theme="spotify"] .jr-listing-card__title, [data-jr-theme="spotify"] .jr-listing-card__price { color: var(--jr-text-primary) !important; } [data-jr-theme="spotify"] .jr-listing-card__subtitle, [data-jr-theme="spotify"] .jr-listing-card__loc, [data-jr-theme="spotify"] .jr-listing-card__spec, [data-jr-theme="spotify"] .jr-listing-card__price-alt, [data-jr-theme="spotify"] .jr-listing-card__loc i { color: var(--jr-text-muted) !important; } [data-jr-theme="spotify"] .jr-listing-card__brand-mark { background: var(--jr-bg-highlight) !important; border-color: var(--jr-border) !important; color: var(--jr-text-secondary) !important; } [data-jr-theme="spotify"] .jr-listing-card__spec .jr2-spec-svg { color: var(--jr-accent) !important; } [data-jr-theme="spotify"] .jr-listing-card__cta { background: var(--jr-accent) !important; color: #ffffff !important; } [data-jr-theme="spotify"] .jr-listing-card:hover .jr-listing-card__cta { background: var(--jr-accent-hover) !important; } [data-jr-theme="spotify"] .jr-listing-card__price.is-free { color: var(--jr-accent) !important; } [data-jr-theme="spotify"] .jr-spec-chip { background: var(--jr-bg-highlight) !important; border-color: var(--jr-border) !important; color: var(--jr-text-secondary) !important; } [data-jr-theme="spotify"] .jr-spec-chip.is-free { background: rgba(29, 185, 84, 0.12) !important; border-color: rgba(29, 185, 84, 0.35) !important; color: var(--jr-accent) !important; } [data-jr-theme="spotify"] .jr-spec-chip.is-condition { background: rgba(255, 255, 255, 0.06) !important; border-color: var(--jr-border) !important; color: var(--jr-text-secondary) !important; } [data-jr-theme="spotify"] .af-grid .jr-spec-chip.is-free, [data-jr-theme="spotify"] .af-grid .jr-spec-chip.is-condition { background: var(--jr-bg-highlight) !important; color: var(--jr-text-secondary) !important; } /* Card gallery chrome */ [data-jr-theme="spotify"] .jr-card-gallery__dots, [data-jr-theme="spotify"] .jr-card-gallery__arrow { background: rgba(0, 0, 0, 0.55) !important; } [data-jr-theme="spotify"] .jr-media-chrome__action i, [data-jr-theme="spotify"] .jr-media-chrome__price { background: var(--jr-bg-highlight) !important; color: var(--jr-text-primary) !important; } [data-jr-theme="spotify"] .jr-map-sheet { background: linear-gradient(180deg, rgba(18, 18, 18, 0), var(--jr-bg-base) 18%) !important; } [data-jr-theme="spotify"] .jr-map-sheet__card { background: var(--jr-bg-elevated) !important; border-color: var(--jr-border) !important; color: var(--jr-text-primary) !important; box-shadow: var(--jr-card-shadow) !important; } [data-jr-theme="spotify"] .jr-map-sheet__card.is-active { border-color: var(--jr-accent) !important; } /* Typography — secondary silver */ .af-results-count, .af-sidebar-title, .jr-listing-card__title, .jr-listing-card__price { color: var(--jr-text-primary) !important; } .jr-listing-card__subtitle, .jr-listing-card__loc, .jr-listing-card__spec, .af-refine-label, .af-breadcrumb, .af-breadcrumb a, .jr2-breadcrumb, .jr2-breadcrumb a, .jr2-meta, .jr2-subtitle, .jr2-location, .jr2-muted-label { color: var(--jr-text-muted) !important; } [data-jr-theme="spotify"] .af-sidebar-title { color: var(--jr-text-primary) !important; } /* ── Footer ── */ footer, .site-footer, #footer, .footernewhome, footer.bg-white { background: var(--jr-bg-elevated) !important; border-color: var(--jr-border) !important; color: var(--jr-text-secondary) !important; } [data-jr-theme="spotify"] footer a, [data-jr-theme="spotify"] .site-footer a { color: var(--jr-text-secondary) !important; } [data-jr-theme="spotify"] footer a:hover, [data-jr-theme="spotify"] .site-footer a:hover { color: var(--jr-text-primary) !important; } /* ── Listing detail (jr2-*) ── */ [data-jr-theme="spotify"] .jr2-page, [data-jr-theme="spotify"] .jr-listing-v2-page { background: var(--jr-bg-base) !important; color: var(--jr-text-primary) !important; } [data-jr-theme="spotify"] .jr2-root { color: var(--jr-text-primary) !important; } [data-jr-theme="spotify"] .jr2-glass, [data-jr-theme="spotify"] .jr2-primary-card, [data-jr-theme="spotify"] .jr2-section-card, [data-jr-theme="spotify"] .jr2-tab-card, [data-jr-theme="spotify"] .jr2-gallery-card, [data-jr-theme="spotify"] .jr2-map-card, [data-jr-theme="spotify"] .jr2-compact-strip .jr2-glass { background: var(--jr-bg-elevated) !important; border-color: var(--jr-border) !important; color: var(--jr-text-primary) !important; box-shadow: var(--jr-card-shadow) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } [data-jr-theme="spotify"] .jr2-glass { background: linear-gradient(180deg, #1a1a1a 0%, #181818 100%) !important; } [data-jr-theme="spotify"] .jr2-price, [data-jr-theme="spotify"] .jr2-title, [data-jr-theme="spotify"] .jr2-heading, [data-jr-theme="spotify"] .jr2-section-title { color: var(--jr-text-primary) !important; } [data-jr-theme="spotify"] .jr2-muted, [data-jr-theme="spotify"] .jr2-subtle, [data-jr-theme="spotify"] .jr2-spec-label, [data-jr-theme="spotify"] .jr2-spec-value, [data-jr-theme="spotify"] .jr2-breadcrumb, [data-jr-theme="spotify"] .jr2-location, [data-jr-theme="spotify"] .jr2-posted { color: var(--jr-text-muted) !important; } [data-jr-theme="spotify"] .jr2-tab { color: var(--jr-text-secondary) !important; border-color: var(--jr-border) !important; } [data-jr-theme="spotify"] .jr2-tab.is-active, [data-jr-theme="spotify"] .jr2-tab:hover { color: var(--jr-text-primary) !important; border-color: var(--jr-accent) !important; } [data-jr-theme="spotify"] .jr2-btn-primary, [data-jr-theme="spotify"] .jr2-cta-primary { background: var(--jr-accent) !important; color: #ffffff !important; } [data-jr-theme="spotify"] .jr2-btn-primary:hover, [data-jr-theme="spotify"] .jr2-cta-primary:hover { background: var(--jr-accent-hover) !important; } [data-jr-theme="spotify"] .jr2-btn-secondary, [data-jr-theme="spotify"] .jr2-cta-secondary { background: transparent !important; border-color: var(--jr-border) !important; color: var(--jr-text-secondary) !important; } [data-jr-theme="spotify"] .jr2-btn-secondary:hover { border-color: var(--jr-text-primary) !important; color: var(--jr-text-primary) !important; } [data-jr-theme="spotify"] .jr2-chip, [data-jr-theme="spotify"] .jr2-badge { background: var(--jr-bg-highlight) !important; border-color: var(--jr-border) !important; color: var(--jr-text-secondary) !important; } [data-jr-theme="spotify"] .jr2-divider, [data-jr-theme="spotify"] .jr2-line { border-color: var(--jr-border) !important; background: var(--jr-border) !important; } [data-jr-theme="spotify"] .jr2-input, [data-jr-theme="spotify"] .jr2-select, [data-jr-theme="spotify"] .jr2-textarea { background: var(--jr-bg-highlight) !important; border-color: var(--jr-border) !important; color: var(--jr-text-primary) !important; } /* ── Profile / account pages ── */ [data-jr-theme="spotify"] .bg-warm-light, [data-jr-theme="spotify"] .hover\:bg-warm-light:hover { background-color: var(--jr-bg-base) !important; } [data-jr-theme="spotify"] .card, [data-jr-theme="spotify"] .rounded-2xl.shadow-md, [data-jr-theme="spotify"] .rounded-xl.shadow-sm { background: var(--jr-bg-elevated) !important; border-color: var(--jr-border) !important; color: var(--jr-text-primary) !important; } /* ── Form inputs (global spotify) ── */ [data-jr-theme="spotify"] input[type="text"], [data-jr-theme="spotify"] input[type="email"], [data-jr-theme="spotify"] input[type="tel"], [data-jr-theme="spotify"] input[type="password"], [data-jr-theme="spotify"] input[type="date"], [data-jr-theme="spotify"] input[type="search"], [data-jr-theme="spotify"] input[type="number"], [data-jr-theme="spotify"] select, [data-jr-theme="spotify"] textarea { background: var(--jr-bg-highlight) !important; border-color: var(--jr-border) !important; color: var(--jr-text-primary) !important; } [data-jr-theme="spotify"] input::placeholder, [data-jr-theme="spotify"] textarea::placeholder { color: var(--jr-text-muted) !important; } /* ── Preferences + account menus ── */ [data-jr-theme="spotify"] .jr-prefs-panel, [data-jr-theme="spotify"] .jr-prefs-body, [data-jr-theme="spotify"] .jr-am { background: #282828 !important; border-color: var(--jr-border) !important; color: var(--jr-text-primary); } [data-jr-theme="spotify"] .jr-prefs-head { background: linear-gradient(180deg, #282828 0%, #181818 100%) !important; border-color: var(--jr-border) !important; } [data-jr-theme="spotify"] .jr-prefs-tabs { background: #121212 !important; border-color: var(--jr-border) !important; } [data-jr-theme="spotify"] .jr-prefs-tab.is-active { color: var(--jr-accent) !important; background: #282828 !important; } [data-jr-theme="spotify"] .jr-prefs-item.is-active { background: rgba(29, 185, 84, 0.12) !important; box-shadow: inset 0 0 0 1px rgba(29, 185, 84, 0.35) !important; } [data-jr-theme="spotify"] .jr-prefs-item-text strong, [data-jr-theme="spotify"] .jr-am-name { color: #ffffff !important; } [data-jr-theme="spotify"] .jr-prefs-trigger-label, [data-jr-theme="spotify"] .jr-prefs-trigger { color: var(--jr-text-secondary) !important; } [data-jr-theme="spotify"] .jr-prefs-trigger > .fa-globe { color: var(--jr-accent) !important; } [data-jr-theme="spotify"] .jr-am-head { background: linear-gradient(180deg, #1a1a1a 0%, #282828 100%) !important; } [data-jr-theme="spotify"] .jr-am-foot { background: #181818 !important; } [data-jr-theme="spotify"] .jr-am-item:hover { background: #333333 !important; } /* ── Theme picker UI ── */ .jr-theme-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; } .jr-theme-option { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px; border-radius: 12px; border: 2px solid var(--jr-border); background: var(--jr-bg-highlight); cursor: pointer; text-align: left; font-family: inherit; transition: border-color 0.15s ease, transform 0.15s ease; } .jr-theme-option:hover { transform: translateY(-1px); } .jr-theme-option.is-active { border-color: var(--jr-accent); box-shadow: 0 0 0 1px var(--jr-accent); } .jr-theme-swatch { height: 44px; border-radius: 8px; border: 1px solid var(--jr-border); } .jr-theme-swatch--light { background: linear-gradient(135deg, #fffbfa 0%, #fff7ed 50%, #ffffff 100%); } .jr-theme-swatch--spotify { background: linear-gradient(135deg, #000000 0%, #121212 50%, #1db954 100%); } .jr-theme-option strong { font-size: 13px; color: var(--jr-text-primary); } .jr-theme-option small { font-size: 11px; color: var(--jr-text-muted); } /* ── Map / refine / pagination ── */ [data-jr-theme="spotify"] .af-map-wrap, [data-jr-theme="spotify"] .af-refine-panel, [data-jr-theme="spotify"] .af-pagination, [data-jr-theme="spotify"] .af-sort-bar { background: var(--jr-bg-elevated) !important; border-color: var(--jr-border) !important; color: var(--jr-text-primary) !important; } [data-jr-theme="spotify"] .af-empty { color: var(--jr-text-secondary) !important; } [data-jr-theme="spotify"] .af-loading { color: var(--jr-text-muted) !important; } /* ── Typography — smooth antialiased rendering ── */ html, body, #siteHeader, .af-container, .jr2-root, .jr-listing-card { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ── My profile page ── */ [data-jr-theme="spotify"] .myprofile-shell, [data-jr-theme="spotify"] #myprofile-root { background: var(--jr-bg-base) !important; color: var(--jr-text-primary) !important; } [data-jr-theme="spotify"] .myprofile-shell .bg-white, [data-jr-theme="spotify"] #myprofile-root .bg-white, [data-jr-theme="spotify"] .myprofile-shell .rounded-2xl.shadow-md, [data-jr-theme="spotify"] #myprofile-root .rounded-2xl.shadow-md { background: var(--jr-bg-elevated) !important; border-color: var(--jr-border) !important; color: var(--jr-text-primary) !important; } [data-jr-theme="spotify"] .myprofile-shell .border-gray-200, [data-jr-theme="spotify"] .myprofile-shell .border-gray-300, [data-jr-theme="spotify"] #myprofile-root .border-gray-200, [data-jr-theme="spotify"] #myprofile-root .border-gray-300 { border-color: var(--jr-border) !important; } [data-jr-theme="spotify"] .myprofile-shell .text-gray-500, [data-jr-theme="spotify"] .myprofile-shell .text-gray-600, [data-jr-theme="spotify"] .myprofile-shell .text-gray-700, [data-jr-theme="spotify"] #myprofile-root .text-gray-500, [data-jr-theme="spotify"] #myprofile-root .text-gray-600, [data-jr-theme="spotify"] #myprofile-root .text-gray-700 { color: var(--jr-text-secondary) !important; } [data-jr-theme="spotify"] .myprofile-shell .form-input, [data-jr-theme="spotify"] #myprofile-root .form-input, [data-jr-theme="spotify"] .myprofile-shell select, [data-jr-theme="spotify"] #myprofile-root select { background: var(--jr-bg-highlight) !important; border-color: var(--jr-border) !important; color: var(--jr-text-primary) !important; } [data-jr-theme="spotify"] .sp-container, [data-jr-theme="spotify"] .sp-header-card, [data-jr-theme="spotify"] .sp-shop-details, [data-jr-theme="spotify"] .sp-content { background: var(--jr-bg-elevated) !important; border-color: var(--jr-border) !important; color: var(--jr-text-primary) !important; } [data-jr-theme="spotify"] .sp-seller-name, [data-jr-theme="spotify"] .sp-shop-block-title { color: var(--jr-text-primary) !important; } [data-jr-theme="spotify"] .sp-seller-meta, [data-jr-theme="spotify"] .sp-shop-text, [data-jr-theme="spotify"] .sp-rating-text { color: var(--jr-text-secondary) !important; } /* ── Product accent overlays (listing detail + browse cards) ── */ [data-jr-theme="spotify"] .jr2-listing-accent { background: radial-gradient(ellipse 130% 60% at 50% -6%, var(--jr-product-accent-glow, rgba(29, 185, 84, .28)), transparent 58%), linear-gradient(180deg, color-mix(in srgb, var(--jr-product-accent-deep, #121212) 72%, #121212) 0%, #121212 32%, #121212 100%) !important; } [data-jr-theme="light"] .jr2-listing-accent { background: radial-gradient(ellipse 120% 52% at 50% -4%, var(--jr-product-accent-soft, rgba(248, 153, 27, .14)), transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--jr-product-accent, #f8991b) 12%, var(--jr-bg-base, #fffbfa)) 0%, var(--jr-bg-base, #fffbfa) 26%, var(--jr-bg-base, #fffbfa) 100%) !important; } [data-jr-theme="spotify"] .jr2-hero-accent-backdrop { opacity: .88; } /* Listing detail — kill hardcoded white surfaces in Spotify mode */ [data-jr-theme="spotify"] .jr2-spec-grid, [data-jr-theme="spotify"] .jr2-seller-stats, [data-jr-theme="spotify"] .jr2-trusted, [data-jr-theme="spotify"] .jr2-seller-badge, [data-jr-theme="spotify"] .jr2-trust-box, [data-jr-theme="spotify"] .jr2-tag, [data-jr-theme="spotify"] .jr2-mini-chip, [data-jr-theme="spotify"] .jr2-distance, [data-jr-theme="spotify"] .jr2-phone-band, [data-jr-theme="spotify"] .jr2-save-tools button, [data-jr-theme="spotify"] .jr2-save-tools a, [data-jr-theme="spotify"] .jr2-more-media, [data-jr-theme="spotify"] .jr2-thumb { background: #282828 !important; border-color: var(--jr-border) !important; } [data-jr-theme="spotify"] .jr2-spec-icon { background: #333 !important; border-color: rgba(255, 255, 255, 0.12) !important; color: #fff !important; } [data-jr-theme="spotify"] .jr2-seller-photo { border-color: #333 !important; background: #282828 !important; } [data-jr-theme="spotify"] .jr2-outline-button, [data-jr-theme="spotify"] .jr2-soft-button { background: #282828 !important; } [data-jr-theme="light"] .jr2-hero-accent-backdrop { opacity: .78; } .jr-listing-card::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 3px; border-radius: 8px 8px 0 0; background: linear-gradient(90deg, var(--jr-product-accent, #07753d), color-mix(in srgb, var(--jr-product-accent, #07753d) 40%, transparent)); opacity: .85; pointer-events: none; } .jr-listing-card { position: relative; overflow: hidden; } .jr-listing-card__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 80% 60% at 50% 100%, var(--jr-product-accent-soft, transparent), transparent 70%); opacity: .55; } .jr-reveal:not(.is-revealed) { opacity: 0; transform: translateY(16px); } .jr-reveal.is-revealed { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .jr-reveal:not(.is-revealed) { opacity: 1; transform: none; } } /* ═══════════════════════════════════════ HOMEPAGE — stats, FAQ, search layering ═══════════════════════════════════════ */ .jr-home-stats { max-width: 1200px; margin: 24px auto; padding: 0 16px; } .jr-home-stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; text-align: center; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; } .jr-home-stats__value { font-size: 1.5rem; font-weight: 800; color: #0f172a; line-height: 1.1; } .jr-home-stats__label { font-size: 0.875rem; color: #475569; margin-top: 4px; } .af-hero-faq { max-width: 1200px; margin: 24px auto; padding: 0 16px; } .af-hero-faq-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 16px; color: #111827; } .af-hero-faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; } .af-hero-faq-item { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px 16px; } .af-hero-faq-item summary { cursor: pointer; font-weight: 600; color: #1f2937; list-style: none; } .af-hero-faq-item summary::-webkit-details-marker { display: none; } .af-hero-faq-item p { margin: 8px 0 0; color: #4b5563; line-height: 1.55; font-size: 0.92rem; } [data-jr-theme="spotify"] .jr-home-stats__grid { background: var(--jr-bg-elevated, #181818) !important; border: 1px solid var(--jr-border, rgba(255, 255, 255, 0.1)) !important; } [data-jr-theme="spotify"] .jr-home-stats__value { color: var(--jr-text-primary, #ffffff) !important; } [data-jr-theme="spotify"] .jr-home-stats__label { color: var(--jr-text-secondary, #b3b3b3) !important; } [data-jr-theme="spotify"] .af-hero-faq-title { color: var(--jr-text-primary, #ffffff) !important; } [data-jr-theme="spotify"] .af-hero-faq-item { background: var(--jr-bg-highlight, #282828) !important; border: 1px solid var(--jr-border, rgba(255, 255, 255, 0.1)) !important; } [data-jr-theme="spotify"] .af-hero-faq-item[open], [data-jr-theme="spotify"] .af-hero-faq-item:hover { background: #333333 !important; } [data-jr-theme="spotify"] .af-hero-faq-item summary { color: var(--jr-text-primary, #ffffff) !important; } [data-jr-theme="spotify"] .af-hero-faq-item p { color: var(--jr-text-secondary, #b3b3b3) !important; } /* Prevent global select styling from creating dark pills on light group shells */ [data-jr-theme="spotify"] .af-search-group select, [data-jr-theme="spotify"] .af-search-form select { background: transparent !important; border: none !important; box-shadow: none !important; color-scheme: dark; } [data-jr-theme="spotify"] .af-vertical-rail::-webkit-scrollbar-thumb { background: #404040 !important; } [data-jr-theme="spotify"] .af-browse-prompt { color: var(--jr-text-secondary, #b3b3b3) !important; } [data-jr-theme="spotify"] .af-search-root, [data-jr-theme="spotify"] .af-search-section, [data-jr-theme="spotify"] .af-hero-panel { background-color: transparent !important; } /* ── Browse results bar + controls ── */ [data-jr-theme="spotify"] .af-topbar, [data-jr-theme="spotify"] .af-active-bar { background: var(--jr-bg-elevated, #181818) !important; border-color: var(--jr-border, rgba(255, 255, 255, 0.1)) !important; box-shadow: var(--jr-card-shadow, 0 8px 28px rgba(0, 0, 0, 0.55)) !important; color: var(--jr-text-primary, #ffffff) !important; } [data-jr-theme="spotify"] .af-view-toggle, [data-jr-theme="spotify"] .af-view-btn { background: var(--jr-bg-highlight, #282828) !important; border-color: var(--jr-border, rgba(255, 255, 255, 0.1)) !important; color: var(--jr-text-secondary, #b3b3b3) !important; } [data-jr-theme="spotify"] .af-view-btn.active, [data-jr-theme="spotify"] .af-view-btn:hover { background: #333333 !important; color: var(--jr-text-primary, #ffffff) !important; border-color: var(--jr-accent, #1db954) !important; } [data-jr-theme="spotify"] .af-sort label, [data-jr-theme="spotify"] .af-sort select { background: var(--jr-bg-highlight, #282828) !important; border-color: var(--jr-border, rgba(255, 255, 255, 0.1)) !important; color: var(--jr-text-primary, #ffffff) !important; } [data-jr-theme="spotify"] .af-chip, [data-jr-theme="spotify"] .af-vertical-pill { background: var(--jr-bg-highlight, #282828) !important; border-color: var(--jr-border, rgba(255, 255, 255, 0.1)) !important; color: var(--jr-text-secondary, #b3b3b3) !important; } [data-jr-theme="spotify"] .af-hero-card, [data-jr-theme="spotify"] .af-sidebar, [data-jr-theme="spotify"] .af-sidebar-panel, [data-jr-theme="spotify"] .af-split-list-panel, [data-jr-theme="spotify"] .af-split-map-panel { background: var(--jr-bg-elevated, #181818) !important; border-color: var(--jr-border, rgba(255, 255, 255, 0.1)) !important; } [data-jr-theme="spotify"] .af-grid, [data-jr-theme="spotify"] .af-results-layout, [data-jr-theme="spotify"] .af-list-results { background: transparent !important; } /* ── Listing detail (pd-* legacy layout) ── */ [data-jr-theme="spotify"] .pd-main, [data-jr-theme="spotify"] .root-element-div { background: transparent !important; color: var(--jr-text-primary, #ffffff) !important; } [data-jr-theme="spotify"] .pd-card, [data-jr-theme="spotify"] .pd-gallery-card, [data-jr-theme="spotify"] .pd-info-card, [data-jr-theme="spotify"] .pd-tabs-card, [data-jr-theme="spotify"] .pd-seller-card, [data-jr-theme="spotify"] .pd-location-card { background: var(--jr-bg-elevated, #181818) !important; border-color: var(--jr-border, rgba(255, 255, 255, 0.1)) !important; box-shadow: var(--jr-card-shadow, 0 8px 28px rgba(0, 0, 0, 0.55)) !important; color: var(--jr-text-primary, #ffffff) !important; } [data-jr-theme="spotify"] .pd-main-image-wrap, [data-jr-theme="spotify"] .pd-no-images { background: var(--jr-bg-highlight, #282828) !important; } [data-jr-theme="spotify"] .pd-section-title, [data-jr-theme="spotify"] .pd-breadcrumb span, [data-jr-theme="spotify"] .pd-related-count, [data-jr-theme="spotify"] .tab-content, [data-jr-theme="spotify"] .tab-content p { color: var(--jr-text-primary, #ffffff) !important; } [data-jr-theme="spotify"] .pd-breadcrumb, [data-jr-theme="spotify"] .pd-breadcrumb a, [data-jr-theme="spotify"] .pd-quick-btn, [data-jr-theme="spotify"] .pd-tab-btn { color: var(--jr-text-secondary, #b3b3b3) !important; } [data-jr-theme="spotify"] .pd-breadcrumb a:hover, [data-jr-theme="spotify"] .pd-tab-btn:hover, [data-jr-theme="spotify"] .pd-tab-btn.active { color: var(--jr-accent, #1db954) !important; } [data-jr-theme="spotify"] .pd-tab-btn::after { background: var(--jr-accent, #1db954) !important; } [data-jr-theme="spotify"] .pd-thumb:hover { border-color: rgba(255, 255, 255, 0.25) !important; } [data-jr-theme="spotify"] .pd-thumb.active { border-color: var(--jr-accent, #1db954) !important; box-shadow: 0 0 0 2px rgba(29, 185, 84, 0.25) !important; } [data-jr-theme="spotify"] .pd-img-nav { background: rgba(40, 40, 40, 0.92) !important; color: var(--jr-text-primary, #ffffff) !important; } [data-jr-theme="spotify"] .pd-img-nav:hover { background: #333333 !important; } [data-jr-theme="spotify"] .pd-img-counter { background: rgba(0, 0, 0, 0.72) !important; color: #ffffff !important; } [data-jr-theme="spotify"] .pd-price-available { background: rgba(29, 185, 84, 0.12) !important; border-color: rgba(29, 185, 84, 0.35) !important; } [data-jr-theme="spotify"] .pd-price-sold { background: rgba(239, 68, 68, 0.12) !important; border-color: rgba(239, 68, 68, 0.35) !important; } [data-jr-theme="spotify"] .pd-btn-primary { background: linear-gradient(135deg, var(--jr-accent, #1db954), var(--jr-accent-hover, #1ed760)) !important; color: #ffffff !important; } [data-jr-theme="spotify"] .pd-btn-offer, [data-jr-theme="spotify"] .pd-btn-outline { background: transparent !important; border-color: var(--jr-accent, #1db954) !important; color: var(--jr-accent, #1db954) !important; } [data-jr-theme="spotify"] .pd-btn-offer:hover, [data-jr-theme="spotify"] .pd-btn-outline:hover { background: rgba(29, 185, 84, 0.12) !important; } [data-jr-theme="spotify"] .pd-btn-secondary, [data-jr-theme="spotify"] .pd-load-more-btn { background: var(--jr-bg-highlight, #282828) !important; border-color: var(--jr-border, rgba(255, 255, 255, 0.1)) !important; color: var(--jr-text-primary, #ffffff) !important; } [data-jr-theme="spotify"] .pd-btn-secondary:hover, [data-jr-theme="spotify"] .pd-load-more-btn:hover, [data-jr-theme="spotify"] .pd-quick-btn:hover { background: #333333 !important; color: var(--jr-text-primary, #ffffff) !important; } [data-jr-theme="spotify"] .pd-quick-actions { border-top-color: var(--jr-border, rgba(255, 255, 255, 0.1)) !important; } [data-jr-theme="spotify"] .pd-safety-card { background: rgba(29, 185, 84, 0.1) !important; border-color: rgba(29, 185, 84, 0.35) !important; color: var(--jr-text-secondary, #b3b3b3) !important; } [data-jr-theme="spotify"] .pd-mobile-bar { background: var(--jr-bg-elevated, #181818) !important; border-top-color: var(--jr-border, rgba(255, 255, 255, 0.1)) !important; box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.45) !important; } [data-jr-theme="spotify"] .pd-badge-green { background: rgba(29, 185, 84, 0.18) !important; color: var(--jr-accent, #1db954) !important; } [data-jr-theme="spotify"] .pd-badge-blue, [data-jr-theme="spotify"] .pd-badge-orange, [data-jr-theme="spotify"] .pd-badge-indigo { background: var(--jr-bg-highlight, #282828) !important; color: var(--jr-text-secondary, #b3b3b3) !important; } [data-jr-theme="spotify"] .skeleton-loader, [data-jr-theme="spotify"] .pd-main .skeleton-loader { background-color: var(--jr-bg-highlight, #282828) !important; } [data-jr-theme="spotify"] .pd-main .border-gray-200, [data-jr-theme="spotify"] .pd-main .border-b { border-color: var(--jr-border, rgba(255, 255, 255, 0.1)) !important; } [data-jr-theme="spotify"] .pd-main .text-gray-500, [data-jr-theme="spotify"] .pd-main .text-gray-600, [data-jr-theme="spotify"] .pd-main .text-gray-800, [data-jr-theme="spotify"] .pd-main .text-gray-300 { color: var(--jr-text-secondary, #b3b3b3) !important; } [data-jr-theme="spotify"] .pd-main .prose, [data-jr-theme="spotify"] .pd-main .prose p { color: var(--jr-text-secondary, #b3b3b3) !important; } [data-jr-theme="spotify"] .pd-main .card, [data-jr-theme="spotify"] .pd-main .btn-secondary { background: var(--jr-bg-highlight, #282828) !important; border-color: var(--jr-border, rgba(255, 255, 255, 0.1)) !important; color: var(--jr-text-primary, #ffffff) !important; } [data-jr-theme="spotify"] .pd-main .btn-primary { background: var(--jr-accent, #1db954) !important; color: #ffffff !important; } /* ── Listing detail: gallery, placeholder, map (v10) ── */ [data-jr-theme="spotify"] .pd-gallery-card, [data-jr-theme="spotify"] .pd-gallery-card.pd-card { background: var(--jr-bg-elevated, #181818) !important; } [data-jr-theme="spotify"] .pd-main-image-wrap, [data-jr-theme="spotify"] .pd-no-images, [data-jr-theme="spotify"] .pd-main-image, [data-jr-theme="spotify"] #main-image-wrap, [data-jr-theme="spotify"] #image-loader, [data-jr-theme="spotify"] .pd-gallery-card .skeleton-loader { background: var(--jr-bg-highlight, #282828) !important; background-color: var(--jr-bg-highlight, #282828) !important; } [data-jr-theme="spotify"] .pd-no-images i, [data-jr-theme="spotify"] .pd-no-images p { color: var(--jr-text-secondary, #b3b3b3) !important; } [data-jr-theme="spotify"] .pd-map-wrap, [data-jr-theme="spotify"] .pd-map-canvas, [data-jr-theme="spotify"] .pd-location-card .pd-map-wrap, [data-jr-theme="spotify"] .pd-location-card #map { background: var(--jr-bg-highlight, #282828) !important; background-color: var(--jr-bg-highlight, #282828) !important; border-color: var(--jr-border, rgba(255, 255, 255, 0.1)) !important; } [data-jr-theme="spotify"] .pd-map-open-btn { background: var(--jr-bg-elevated, #181818) !important; color: var(--jr-text-primary, #ffffff) !important; border: 1px solid var(--jr-border, rgba(255, 255, 255, 0.1)) !important; } [data-jr-theme="spotify"] .pd-map-open-btn:hover { background: #333333 !important; } [data-jr-theme="spotify"] .pd-location-card .border-gray-200 { border-color: var(--jr-border, rgba(255, 255, 255, 0.1)) !important; } [data-jr-theme="spotify"] .pd-location-card .text-gray-600 { color: var(--jr-text-secondary, #b3b3b3) !important; } [data-jr-theme="spotify"] .pd-main .bg-white, [data-jr-theme="spotify"] .pd-main .bg-white\/95, [data-jr-theme="spotify"] .pd-main .hover\:bg-white:hover { background-color: var(--jr-bg-elevated, #181818) !important; } [data-jr-theme="spotify"] body.pb-24, [data-jr-theme="spotify"] .root-element-div, [data-jr-theme="spotify"] .pd-main { background-color: var(--jr-bg-base, #121212) !important; } /* ── Listing v2: hero gallery + location map (v11) ── */ [data-jr-theme="spotify"] .jr2-hero-shell, [data-jr-theme="spotify"] .jr2-hero-accent, [data-jr-theme="spotify"] .jr2-hero-slide, [data-jr-theme="spotify"] .jr2-hero-slide img { background: #282828 !important; background-color: #282828 !important; } [data-jr-theme="spotify"] .jr2-map-shell, [data-jr-theme="spotify"] .jr-location-map-wrap, [data-jr-theme="spotify"] .jr-location-map, [data-jr-theme="spotify"] #map.jr-location-map { background: #282828 !important; background-color: #282828 !important; border-color: rgba(255, 255, 255, 0.1) !important; } [data-jr-theme="spotify"] .jr-location-card { background: #181818 !important; border-color: rgba(255, 255, 255, 0.1) !important; color: #ffffff !important; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55) !important; } [data-jr-theme="spotify"] .jr-location-card-title, [data-jr-theme="spotify"] .jr-location-card-title span { color: #ffffff !important; } [data-jr-theme="spotify"] .jr-location-card-sub, [data-jr-theme="spotify"] .jr-location-no-map { color: #b3b3b3 !important; } [data-jr-theme="spotify"] .jr-location-address { background: #282828 !important; border-color: rgba(255, 255, 255, 0.1) !important; color: #b3b3b3 !important; } [data-jr-theme="spotify"] .jr-location-secondary-btn { background: #282828 !important; border-color: rgba(255, 255, 255, 0.1) !important; color: #ffffff !important; } [data-jr-theme="spotify"] .jr-location-secondary-btn:hover { background: #333333 !important; } [data-jr-theme="spotify"] .jr-more-from-seller { background: #181818 !important; border-color: rgba(255, 255, 255, 0.1) !important; } /* Gallery empty state + accent backdrop (no white flash) */ [data-jr-theme="spotify"] .jr2-hero-shell > p, [data-jr-theme="spotify"] .jr2-hero-accent > p { color: #b3b3b3 !important; background: #282828 !important; } [data-jr-theme="spotify"] .jr2-hero-accent-backdrop { opacity: 0.35 !important; background: linear-gradient(180deg, rgba(40, 40, 40, 0.6) 0%, transparent 48%, rgba(0, 0, 0, 0.55) 100%) !important; } /* ── Home / landing page (user-landing-component inline styles) ── */ [data-jr-theme="spotify"] .page-wrapper { background: var(--jr-bg-elevated) !important; border-color: var(--jr-border) !important; color: var(--jr-text-primary) !important; } [data-jr-theme="spotify"] .hero-text h1, [data-jr-theme="spotify"] .section-title, [data-jr-theme="spotify"] .category-title { color: var(--jr-text-primary) !important; } [data-jr-theme="spotify"] .hero-text p, [data-jr-theme="spotify"] .section-view-all { color: var(--jr-text-secondary) !important; } [data-jr-theme="spotify"] .icon-card, [data-jr-theme="spotify"] .category-btn, [data-jr-theme="spotify"] .product-card, [data-jr-theme="spotify"] .empty-ads-state, [data-jr-theme="spotify"] .app-promo-card, [data-jr-theme="spotify"] .banner-carousel-slide { background: var(--jr-bg-elevated) !important; border-color: var(--jr-border) !important; color: var(--jr-text-primary) !important; } [data-jr-theme="spotify"] .icon-card:hover, [data-jr-theme="spotify"] .category-btn:hover, [data-jr-theme="spotify"] .product-card:hover { background: var(--jr-bg-highlight) !important; } [data-jr-theme="spotify"] .hero-badge { background: rgba(29, 185, 84, 0.12) !important; border-color: rgba(29, 185, 84, 0.35) !important; color: #1ed760 !important; } [data-jr-theme="spotify"] footer[style], [data-jr-theme="spotify"] .jr-site-footer { background: var(--jr-bg-elevated) !important; color: var(--jr-text-secondary) !important; } [data-jr-theme="spotify"] #preloader, [data-jr-theme="spotify"] #preloader[style] { background: var(--jr-bg-base) !important; } /* ── Seller profile hardcoded whites ── */ [data-jr-theme="spotify"] .sp-header-card, [data-jr-theme="spotify"] .sp-stat-card, [data-jr-theme="spotify"] .sp-listing-card, [data-jr-theme="spotify"] .sp-review-card, [data-jr-theme="spotify"] .sp-tab-panel { background: var(--jr-bg-elevated) !important; border-color: var(--jr-border) !important; color: var(--jr-text-primary) !important; } /* ── Package / contact pages ── */ [data-jr-theme="spotify"] .contact-form-wrap, [data-jr-theme="spotify"] .contact-info-card { background: var(--jr-bg-elevated) !important; border-color: var(--jr-border) !important; color: var(--jr-text-primary) !important; } /* ═══════════════════════════════════════ NOTIFICATIONS PAGE — full dark canvas ═══════════════════════════════════════ */ [data-jr-theme="spotify"] .jr-notifications-page, [data-jr-theme="spotify"] .jr-notifications-page.min-h-screen { background-color: var(--jr-bg-base, #121212) !important; color: var(--jr-text-primary, #ffffff) !important; } [data-jr-theme="spotify"] .jr-notifications-page .bg-warm-light { background-color: var(--jr-bg-base, #121212) !important; } [data-jr-theme="spotify"] .jr-notifications-card, [data-jr-theme="spotify"] .jr-notifications-page .bg-white, [data-jr-theme="spotify"] .jr-notifications-page .border-gray-200, [data-jr-theme="spotify"] .jr-notifications-page .border-slate-200, [data-jr-theme="spotify"] .jr-notifications-page .border-slate-100, [data-jr-theme="spotify"] .jr-notifications-page details { background: var(--jr-bg-elevated, #181818) !important; border-color: var(--jr-border, rgba(255, 255, 255, 0.1)) !important; color: var(--jr-text-primary, #ffffff) !important; } [data-jr-theme="spotify"] .jr-notifications-page .text-gray-900, [data-jr-theme="spotify"] .jr-notifications-page .text-slate-900, [data-jr-theme="spotify"] .jr-notifications-page .text-slate-800, [data-jr-theme="spotify"] .jr-notifications-page h1, [data-jr-theme="spotify"] .jr-notifications-page h2, [data-jr-theme="spotify"] .jr-notifications-page h3, [data-jr-theme="spotify"] .jr-notifications-page summary { color: var(--jr-text-primary, #ffffff) !important; } [data-jr-theme="spotify"] .jr-notifications-page .text-gray-600, [data-jr-theme="spotify"] .jr-notifications-page .text-gray-700, [data-jr-theme="spotify"] .jr-notifications-page .text-gray-500, [data-jr-theme="spotify"] .jr-notifications-page .text-slate-600, [data-jr-theme="spotify"] .jr-notifications-page .text-slate-700, [data-jr-theme="spotify"] .jr-notifications-page p, [data-jr-theme="spotify"] .jr-notifications-page li span { color: var(--jr-text-secondary, #b3b3b3) !important; } [data-jr-theme="spotify"] .jr-notifications-page .border-slate-300 { border-color: var(--jr-border, rgba(255, 255, 255, 0.1)) !important; background: var(--jr-bg-highlight, #282828) !important; color: var(--jr-text-primary, #ffffff) !important; } [data-jr-theme="spotify"] .jr-notifications-page .hover\:bg-slate-50:hover { background: #333333 !important; } [data-jr-theme="spotify"] .jr-notifications-page .hover\:border-gray-300:hover { border-color: rgba(255, 255, 255, 0.18) !important; } /* ═══════════════════════════════════════ POST-ADD FORM (pa-* shell) ═══════════════════════════════════════ */ [data-jr-theme="spotify"] body.jr-post-form-page, [data-jr-theme="spotify"] body.jr-post-form-page .page-wrapper, [data-jr-theme="spotify"] body.jr-post-form-page footer { background-color: var(--jr-bg-base, #121212) !important; color: var(--jr-text-primary, #ffffff) !important; } [data-jr-theme="spotify"] .pa-shell { color: var(--jr-text-primary, #ffffff) !important; } [data-jr-theme="spotify"] .pa-progress-bar, [data-jr-theme="spotify"] .pa-card, [data-jr-theme="spotify"] .pa-chip, [data-jr-theme="spotify"] .pa-alert { background: var(--jr-bg-elevated, #181818) !important; border-color: var(--jr-border, rgba(255, 255, 255, 0.1)) !important; color: var(--jr-text-primary, #ffffff) !important; box-shadow: var(--jr-card-shadow, 0 8px 28px rgba(0, 0, 0, 0.55)) !important; } [data-jr-theme="spotify"] .pa-card-header, [data-jr-theme="spotify"] .pa-step-line { border-color: var(--jr-border, rgba(255, 255, 255, 0.1)) !important; } [data-jr-theme="spotify"] .pa-card-header h2, [data-jr-theme="spotify"] .pa-step-item.active, [data-jr-theme="spotify"] .pa-label, [data-jr-theme="spotify"] .pa-sub-label { color: var(--jr-text-primary, #ffffff) !important; } [data-jr-theme="spotify"] .pa-step-item, [data-jr-theme="spotify"] .pa-hint, [data-jr-theme="spotify"] .pa-muted, [data-jr-theme="spotify"] .pa-category-trail { color: var(--jr-text-secondary, #b3b3b3) !important; } [data-jr-theme="spotify"] .pa-step-circle { background: var(--jr-bg-highlight, #282828) !important; color: var(--jr-text-muted, #a7a7a7) !important; } [data-jr-theme="spotify"] .pa-step-item.active .pa-step-circle { background: var(--jr-accent, #1db954) !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(29, 185, 84, 0.35) !important; } [data-jr-theme="spotify"] .pa-step-line.filled { background: var(--jr-accent, #1db954) !important; } [data-jr-theme="spotify"] .pa-input, [data-jr-theme="spotify"] .pa-select, [data-jr-theme="spotify"] .pa-textarea, [data-jr-theme="spotify"] .pa-input-readonly { background: var(--jr-bg-highlight, #282828) !important; border-color: var(--jr-border, rgba(255, 255, 255, 0.1)) !important; color: var(--jr-text-primary, #ffffff) !important; } [data-jr-theme="spotify"] .pa-input:focus, [data-jr-theme="spotify"] .pa-select:focus, [data-jr-theme="spotify"] .pa-textarea:focus { border-color: var(--jr-accent, #1db954) !important; box-shadow: 0 0 0 3px rgba(29, 185, 84, 0.15) !important; } [data-jr-theme="spotify"] .pa-card-header i { background: rgba(29, 185, 84, 0.14) !important; color: var(--jr-accent, #1db954) !important; } [data-jr-theme="spotify"] .pa-chip:hover, [data-jr-theme="spotify"] .pa-chip.active { background: rgba(29, 185, 84, 0.12) !important; border-color: rgba(29, 185, 84, 0.35) !important; color: var(--jr-text-primary, #ffffff) !important; } [data-jr-theme="spotify"] .pa-btn-secondary, [data-jr-theme="spotify"] .pa-use-category, [data-jr-theme="spotify"] .pa-location-map { background: var(--jr-bg-highlight, #282828) !important; border-color: var(--jr-border, rgba(255, 255, 255, 0.1)) !important; color: var(--jr-text-primary, #ffffff) !important; } [data-jr-theme="spotify"] .pa-btn-primary, [data-jr-theme="spotify"] .pa-btn-success { background: var(--jr-accent, #1db954) !important; color: #ffffff !important; } [data-jr-theme="spotify"] .pa-loading, [data-jr-theme="spotify"] .pa-spinner { color: var(--jr-text-secondary, #b3b3b3) !important; } [data-jr-theme="spotify"] .pa-alert-success { background: rgba(29, 185, 84, 0.12) !important; border-color: rgba(29, 185, 84, 0.35) !important; color: var(--jr-text-primary, #ffffff) !important; } /* Header dropdown surfaces in Spotify theme */ [data-jr-theme="spotify"] .jr-header-dropdown, [data-jr-theme="spotify"] .jr-header-search-dropdown { background: #282828 !important; border-color: var(--jr-border, rgba(255, 255, 255, 0.1)) !important; color: var(--jr-text-primary, #ffffff) !important; } [data-jr-theme="spotify"] .jr-header-dropdown .text-slate-800, [data-jr-theme="spotify"] .jr-header-dropdown .text-slate-700, [data-jr-theme="spotify"] .jr-header-dropdown .text-slate-500 { color: var(--jr-text-secondary, #b3b3b3) !important; } [data-jr-theme="spotify"] .jr-header-dropdown .hover\:bg-slate-100:hover { background: #333333 !important; } /* ── Auth pages (login / register) ── */ .jr-auth-body { min-height: 100vh; } [data-jr-theme="spotify"] .jr-auth-shell { background: transparent; } [data-jr-theme="spotify"] .jr-auth-card { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.55) !important; } /* ── Account menu — Spotify readability ── */ [data-jr-theme="spotify"] .jr-am-email, [data-jr-theme="spotify"] .jr-am-label { color: #b3b3b3 !important; } [data-jr-theme="spotify"] .jr-am-item, [data-jr-theme="spotify"] .jr-am-label-text { color: #ffffff !important; } [data-jr-theme="spotify"] .jr-am-edit { background: #333333 !important; border-color: rgba(255, 255, 255, 0.12) !important; color: #b3b3b3 !important; } [data-jr-theme="spotify"] .jr-am-edit:hover { background: #404040 !important; border-color: #1db954 !important; color: #ffffff !important; } [data-jr-theme="spotify"] .jr-am-section { border-top-color: rgba(255, 255, 255, 0.06) !important; } [data-jr-theme="spotify"] .jr-am-head { border-bottom-color: rgba(255, 255, 255, 0.08) !important; } [data-jr-theme="spotify"] .jr-am-foot { border-top-color: rgba(255, 255, 255, 0.08) !important; } [data-jr-theme="spotify"] .jr-am-logout { background: #282828 !important; border-color: rgba(220, 38, 38, 0.35) !important; } [data-jr-theme="spotify"] .jr-am-chev { color: #666666 !important; } [data-jr-theme="spotify"] .jr-am-badge { box-shadow: 0 0 0 2px #282828 !important; } [data-jr-theme="spotify"] .jr-am-avatar-dot { border-color: #282828 !important; }