/* ========================================================================== Dark theme for shared components (body.theme-dark). tokens.css defines the dark palette; style.css handles header/footer chrome. This file re-maps the remaining hardcoded-light shared components — cart, profile menu, modals, cards, pagination, mobile nav, cookie popup — onto the same tokens so any page that opts in with gets a coherent dark surface. Page-specific rules live in the page's own sheet. Loaded after style.css; every selector is prefixed so it wins at (0,2,0). ========================================================================== */ /* Legacy variables used by ~17 rules in style.css. */ .theme-dark { --text: var(--color-fg); --muted: var(--color-muted); --thumb-bg: var(--color-surface); } /* ---- Header extras ---- */ .theme-dark .header-ghost-btn { border-color: var(--color-border-strong); } .theme-dark .header-ghost-btn:hover { border-color: var(--color-fg); background: rgba(255, 255, 255, 0.06); } .theme-dark #header-login-btn:hover { background: var(--color-bg); color: var(--color-fg); } .theme-dark .mobile-nav-backdrop { background: rgba(0, 0, 0, 0.6); } .theme-dark .mobile-meta { border-top-color: var(--color-border); } /* ---- Dropdowns: profile + cart ---- */ .theme-dark .profile-dropdown-menu, .theme-dark .cart-dropdown-menu { background: var(--color-surface); border-color: var(--color-border); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); color: var(--color-fg); } .theme-dark .profile-dropdown-item:hover, .theme-dark .explore-filters-menu .profile-dropdown-item.active { background: var(--color-surface-2); } .theme-dark .cart-thumb { border-color: var(--color-border); background: var(--color-surface-2); } .theme-dark .cart-dropdown-footer { border-top-color: var(--color-border); } .theme-dark .discounted-price { color: var(--color-fg); } .theme-dark .cart-remove { border-color: var(--color-border-strong); color: var(--color-muted); } .theme-dark .cart-remove:hover { background: var(--color-surface-2); color: var(--color-fg); } /* ---- Product cards (explore / featured / gallery / related) ---- */ .theme-dark .product-card, .theme-dark .product-meta, .theme-dark .product-thumb { background: var(--color-surface); } .theme-dark .product-card-artist { color: var(--color-muted); } .theme-dark .products-grid .product-meta .product-settings { background: var(--color-fg); border-color: var(--color-fg); color: var(--color-bg); } .theme-dark .private-badge { color: var(--color-muted); background: var(--color-surface-2); } .theme-dark .btn-icon { border-color: var(--color-border-strong); color: var(--color-fg); } .theme-dark .carousel::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); } /* ---- Pagination ---- */ .theme-dark .pagination .page-number { color: var(--color-muted); } .theme-dark .pagination .page-number.active { color: var(--color-fg); } /* ---- Modal ---- */ .theme-dark .modal-backdrop { background: rgba(0, 0, 0, 0.65); } .theme-dark .modal { background: var(--color-surface); color: var(--color-fg); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); } .theme-dark .modal-thumb { border-color: var(--color-border); background: var(--color-surface-2); } .theme-dark .modal-editable[contenteditable="true"] { border-bottom-color: var(--color-border-strong); } .theme-dark .modal-editable[contenteditable="true"]:focus { background: rgba(255, 255, 255, 0.05); } /* ---- Share + privacy controls ---- */ .theme-dark .share-btn { border-color: var(--color-border-strong); background: var(--color-surface); color: var(--color-fg); } .theme-dark .share-btn:hover { background: var(--color-surface-2); border-color: var(--color-fg); } .theme-dark .share-dropdown { background: var(--color-surface); border-color: var(--color-border); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); } .theme-dark .share-item { color: var(--color-fg); } .theme-dark .share-item:hover { background: var(--color-surface-2); } .theme-dark .privacy-icon-btn { background: var(--color-fg); color: var(--color-bg); border-color: var(--color-fg); } .theme-dark .privacy-icon-btn:hover { background: var(--color-bg); color: var(--color-fg); } /* ---- Feedback: alerts keep their hue but sit on dark surfaces ---- */ .theme-dark .success-message { background: rgba(127, 209, 160, 0.12); border-color: rgba(127, 209, 160, 0.35); } .theme-dark .success-message h3, .theme-dark .success-message p { color: var(--color-success); } .theme-dark .btn-danger { background: var(--color-danger); border-color: var(--color-danger); color: var(--color-bg); } .theme-dark .btn-danger:hover { background: transparent; color: var(--color-danger); } /* ---- Cookie popup ---- */ .theme-dark .cookie-popup { background: var(--color-surface); border-color: var(--color-border); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6); color: var(--color-fg); } .theme-dark .cookie-text { color: var(--color-muted); } .theme-dark .btn-cookie-decline, .theme-dark .btn-cookie-decline:hover { background: transparent; color: var(--color-fg); border-color: var(--color-border-strong); } /* ---- Native form controls ---- */ .theme-dark select, .theme-dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .theme-dark textarea { color-scheme: dark; } .theme-dark option { color: var(--color-fg); background: var(--color-surface); } /* ---- Review strip, sections ---- */ .theme-dark .reviews-section { background: var(--color-surface); } .theme-dark .review-card { background: var(--color-surface-2); border-color: var(--color-border); } .theme-dark .review-photo-item { background: var(--color-surface-2); box-shadow: none; } .theme-dark .cta-section { background: var(--color-surface); } .theme-dark .section-header h2, .theme-dark .page-title { color: var(--color-fg); } /* ---- Collaborate form ---- */ .theme-dark .collaborate-form { background: var(--color-surface); border-color: var(--color-border); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); } .theme-dark .collaborate-form input, .theme-dark .collaborate-form textarea { background: var(--color-surface-2); border-color: var(--color-border-strong); color: var(--color-fg); } .theme-dark .collaborate-form input::placeholder, .theme-dark .collaborate-form textarea::placeholder { color: var(--color-muted); } .theme-dark .collaborate-form input:focus, .theme-dark .collaborate-form textarea:focus { border-color: var(--color-fg); } .theme-dark .collaborate-form .required { color: var(--color-error); } .theme-dark .collaborate-submit { background: var(--color-primary); color: var(--color-primary-fg); } .theme-dark .collaborate-submit:hover { background: var(--color-accent); color: var(--color-accent-fg); } .theme-dark .collaborate-submit:disabled { background: var(--color-surface-2); color: var(--color-muted); } /* ---- Reversed button ---- */ /* .btn-reversed already inverts (it is built on --color-primary/-fg), but its border is a hardcoded rgba(0,0,0,.18) that disappears on a dark surface — the button then reads as bare text. Settings is the only page that shows it. */ .theme-dark .btn-reversed { border-color: var(--color-border-strong); } .theme-dark .btn-reversed:hover { border-color: var(--color-primary); } /* ---- Inspiration strip ---- */ /* ai.css sets `.inspiration-header h2 { color: #111 }`, which outranks `.lp-section-title`'s token (0,1,1 beats 0,1,0) — so "Made with Posterboy" on / and /login, and "See what others have created" on /ai, rendered black on the dark ground and were simply not there. */ .theme-dark .inspiration-header h2 { color: var(--color-fg); }