/* ==================================================================== ASTA MART — DARK MODE / LIQUID GLASS Premium dark theme with frosted glass effects Toggle via [data-theme="dark"] on ==================================================================== */ /* ══════════════════════════════════════════════════════════════════ DARK MODE VARIABLES ══════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] { --am-accent: #E07A62; --am-accent-dark: #C8553D; --am-accent-light: #F09A82; --am-accent-glow: rgba(224, 122, 98, 0.3); --am-accent-soft: rgba(224, 122, 98, 0.1); --am-bg-0: #0c0a0e; --am-bg-1: #141218; --am-bg-2: #1c1922; --am-bg-3: #2a2633; --am-bg-card: rgba(22, 20, 28, 0.85); --am-bg-glass: rgba(255, 255, 255, 0.02); --am-text-1: #f0edf5; --am-text-2: #c4bfd0; --am-text-3: #8e87a0; --am-text-4: #5e586e; --am-text-muted: rgba(240, 237, 245, 0.35); --am-border: rgba(255, 255, 255, 0.06); --am-border-hover: rgba(255, 255, 255, 0.12); --am-glass-bg: rgba(22, 20, 28, 0.55); --am-glass-border: rgba(224, 122, 98, 0.1); --am-shadow-sm: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2); --am-shadow-md: 0 4px 16px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.25); --am-shadow-lg: 0 12px 40px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.3); --am-shadow-xl: 0 24px 60px rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.4); /* Legacy mapping for older CSS */ --bg-deep: var(--am-bg-0); --bg-card: var(--am-bg-card); --bg-0: var(--am-bg-0); --bg-1: var(--am-bg-1); --bg-2: var(--am-bg-2); --bg-3: var(--am-bg-3); --bg-primary: var(--am-bg-0); --bg-secondary: var(--am-bg-1); --text-1: var(--am-text-1); --text-2: var(--am-text-2); --text-3: var(--am-text-3); --text-4: var(--am-text-4); --text-primary: var(--am-text-1); --text-secondary: var(--am-text-3); --text-muted: var(--am-text-muted); --white-pure: var(--am-text-1); --white-dim: var(--am-text-2); --white-muted: var(--am-text-muted); --glass-border: var(--am-border); --glass-bg: var(--am-bg-glass); --border-dim: var(--am-border); --border-mid: var(--am-border-hover); --accent: var(--am-accent); --accent-glow: var(--am-accent-glow); --red: var(--am-accent); --red-dark: var(--am-accent-dark); --bg-glass: var(--am-bg-glass); color-scheme: dark; } /* ── BODY & BASE ────────────────────────────────────────────── */ html[data-theme="dark"] body { background: #0c0a0e !important; color: var(--am-text-1); background-image: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(224,122,98,0.04) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 80% 90%, rgba(120,80,200,0.03) 0%, transparent 50%) !important; } html[data-theme="dark"] ::selection { background: var(--am-accent); color: #0c0a0e; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0c0a0e; } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2a2633; } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--am-accent); } /* ══════════════════════════════════════════════════════════════════ LIQUID GLASS — DARK MODE Stunning frosted glassmorphism on dark backgrounds ══════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] .liquid-glass, html[data-theme="dark"] .listing-card, html[data-theme="dark"] .dash-stat, html[data-theme="dark"] .feature-card, html[data-theme="dark"] .vp-card, html[data-theme="dark"] .create-section, html[data-theme="dark"] .browse-card, html[data-theme="dark"] .saved-card, html[data-theme="dark"] .vault-card, html[data-theme="dark"] .compare-card, html[data-theme="dark"] body:not(.page-admin) .card { background: rgba(22, 20, 28, 0.5) !important; backdrop-filter: blur(28px) saturate(160%) brightness(1.05) !important; -webkit-backdrop-filter: blur(28px) saturate(160%) brightness(1.05) !important; border: 1px solid rgba(255, 255, 255, 0.07) !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important; } /* Glass highlight shimmer */ html[data-theme="dark"] .liquid-glass::before, html[data-theme="dark"] .listing-card::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent) !important; } /* Glass hover — glow effect */ html[data-theme="dark"] .liquid-glass:hover, html[data-theme="dark"] .listing-card:hover, html[data-theme="dark"] .feature-card:hover, html[data-theme="dark"] .vp-card:hover { border-color: rgba(224, 122, 98, 0.15) !important; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 30px rgba(224, 122, 98, 0.06) !important; } /* doc-content-card (accordion) */ html[data-theme="dark"] .doc-content-card { background: rgba(22, 20, 28, 0.5) !important; backdrop-filter: blur(28px) saturate(160%) brightness(1.05) !important; -webkit-backdrop-filter: blur(28px) saturate(160%) brightness(1.05) !important; border: 1px solid rgba(255, 255, 255, 0.07) !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; } html[data-theme="dark"] .doc-content-card:hover { border-color: rgba(224, 122, 98, 0.12) !important; } html[data-theme="dark"] .doc-section-content .doc-content-card, html[data-theme="dark"] .doc-section-content ul.doc-content-card, html[data-theme="dark"] ul.doc-content-card, html[data-theme="dark"] ol.doc-content-card { background: transparent !important; backdrop-filter: none !important; border: none !important; box-shadow: none !important; } html[data-theme="dark"] .doc-section-content .doc-content-card li, html[data-theme="dark"] ul.doc-content-card li, html[data-theme="dark"] ol.doc-content-card li { color: var(--am-text-2); } /* ── NAVBAR GLASS — DARK ────────────────────────────────────── */ html[data-theme="dark"] .navbar-glass { background: rgba(12, 10, 14, 0.7) !important; backdrop-filter: blur(40px) saturate(160%) !important; -webkit-backdrop-filter: blur(40px) saturate(160%) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; } html[data-theme="dark"] .navbar-glass.scrolled { background: rgba(12, 10, 14, 0.88) !important; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.08) !important; } html[data-theme="dark"] .navbar-glass .ng-brand-text { color: #f0edf5 !important; } html[data-theme="dark"] .navbar-glass .ng-link { color: rgba(240,237,245,0.6) !important; } html[data-theme="dark"] .navbar-glass .ng-link:hover, html[data-theme="dark"] .navbar-glass .ng-link.active { color: #f0edf5 !important; background: rgba(255,255,255,0.06) !important; } html[data-theme="dark"] .navbar-glass .ng-btn-ghost { color: rgba(240,237,245,0.7) !important; border-color: rgba(255,255,255,0.1) !important; } html[data-theme="dark"] .navbar-glass .ng-btn-ghost:hover { background: rgba(255,255,255,0.06) !important; color: #f0edf5 !important; } html[data-theme="dark"] .navbar-glass .ng-hamburger { color: #f0edf5 !important; } /* ── MOBILE NAV — DARK ─────────────────────────────────────── */ html[data-theme="dark"] .ng-mobile-nav { background: rgba(12, 10, 14, 0.95) !important; backdrop-filter: blur(40px) !important; border-left: 1px solid rgba(255,255,255,0.06) !important; } html[data-theme="dark"] .ng-mobile-nav a { color: var(--am-text-2) !important; } html[data-theme="dark"] .ng-mobile-nav a:hover, html[data-theme="dark"] .ng-mobile-nav a.active { color: var(--am-accent) !important; } html[data-theme="dark"] .ng-mobile-close { color: var(--am-text-3) !important; } /* ── USER MENU — DARK ──────────────────────────────────────── */ html[data-theme="dark"] .ng-user-menu { background: rgba(22, 20, 28, 0.95) !important; backdrop-filter: blur(40px) !important; border: 1px solid rgba(255,255,255,0.08) !important; box-shadow: 0 12px 40px rgba(0,0,0,0.6) !important; } html[data-theme="dark"] .ng-user-menu a, html[data-theme="dark"] .ng-user-menu button { color: var(--am-text-2) !important; } html[data-theme="dark"] .ng-user-menu a:hover, html[data-theme="dark"] .ng-user-menu button:hover { background: rgba(255,255,255,0.05) !important; color: var(--am-accent) !important; } html[data-theme="dark"] .ng-menu-divider { background: rgba(255,255,255,0.06) !important; } html[data-theme="dark"] .ng-avatar { background: rgba(224,122,98,0.15) !important; } /* ── AUTH MODAL — DARK ─────────────────────────────────────── */ html[data-theme="dark"] .auth-overlay-unified { background: rgba(0,0,0,0.75) !important; } html[data-theme="dark"] .auth-modal-unified, html[data-theme="dark"] .auth-modal, html[data-theme="dark"] .modal-box { background: rgba(22, 20, 28, 0.95) !important; backdrop-filter: blur(40px) saturate(160%) !important; border: 1px solid rgba(255,255,255,0.08) !important; box-shadow: var(--am-shadow-xl) !important; } html[data-theme="dark"] .auth-tab-btn { color: var(--am-text-3) !important; } html[data-theme="dark"] .auth-tab-btn.active { color: var(--am-accent) !important; border-color: var(--am-accent) !important; } html[data-theme="dark"] .auth-input-field, html[data-theme="dark"] .auth-input, html[data-theme="dark"] input.auth-input { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.08) !important; color: var(--am-text-1) !important; } html[data-theme="dark"] .auth-input-field:focus, html[data-theme="dark"] .auth-input:focus { border-color: rgba(224,122,98,0.4) !important; background: rgba(255,255,255,0.06) !important; box-shadow: 0 0 0 4px rgba(224,122,98,0.1) !important; } html[data-theme="dark"] .auth-input-field::placeholder { color: var(--am-text-4) !important; } html[data-theme="dark"] .auth-close-btn { color: var(--am-text-3) !important; } html[data-theme="dark"] .auth-divider-line span { color: var(--am-text-4) !important; background: rgba(22,20,28,0.95) !important; } html[data-theme="dark"] .auth-divider-line::before { background: rgba(255,255,255,0.06) !important; } html[data-theme="dark"] .google-signin-premium { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.08) !important; color: var(--am-text-1) !important; } html[data-theme="dark"] .google-signin-premium:hover { background: rgba(255,255,255,0.07) !important; } /* ── PAGE HEADERS — DARK ───────────────────────────────────── */ html[data-theme="dark"] .doc-page-header { background: rgba(22, 20, 28, 0.5) !important; backdrop-filter: blur(24px) !important; border-color: rgba(255,255,255,0.06) !important; } html[data-theme="dark"] .doc-page-title { color: var(--am-text-1) !important; } html[data-theme="dark"] .doc-page-subtitle { color: var(--am-text-3) !important; } /* ── FORMS — DARK ──────────────────────────────────────────── */ html[data-theme="dark"] .form-group input, html[data-theme="dark"] .form-group select, html[data-theme="dark"] .form-group textarea, html[data-theme="dark"] .search-input, html[data-theme="dark"] .filter-input, html[data-theme="dark"] .filters-bar input, html[data-theme="dark"] .filters-bar select, html[data-theme="dark"] .doc-search-input { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.08) !important; color: var(--am-text-1) !important; } html[data-theme="dark"] .form-group input:focus, html[data-theme="dark"] .form-group select:focus, html[data-theme="dark"] .form-group textarea:focus, html[data-theme="dark"] .search-input:focus, html[data-theme="dark"] .doc-search-input:focus { border-color: rgba(224,122,98,0.4) !important; background: rgba(255,255,255,0.06) !important; box-shadow: 0 0 0 4px rgba(224,122,98,0.08) !important; } html[data-theme="dark"] .form-group input::placeholder, html[data-theme="dark"] .form-group textarea::placeholder, html[data-theme="dark"] .search-input::placeholder, html[data-theme="dark"] .doc-search-input::placeholder { color: var(--am-text-4) !important; } html[data-theme="dark"] .form-group label, html[data-theme="dark"] .form-label { color: var(--am-text-2) !important; } /* ── BUTTONS — DARK ────────────────────────────────────────── */ html[data-theme="dark"] .btn-ghost { color: var(--am-text-2) !important; border-color: rgba(255,255,255,0.08) !important; } html[data-theme="dark"] .btn-ghost:hover { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.14) !important; color: var(--am-text-1) !important; } /* ── SKIN CARDS — DARK ─────────────────────────────────────── */ html[data-theme="dark"] .skin-card { background: rgba(22, 20, 28, 0.5) !important; backdrop-filter: blur(20px) !important; border-color: rgba(255,255,255,0.06) !important; } html[data-theme="dark"] .skin-card:hover { border-color: rgba(224,122,98,0.2) !important; } html[data-theme="dark"] .skin-card .skin-name { color: var(--am-text-1) !important; } /* ── TABS & PROGRESS — DARK ────────────────────────────────── */ html[data-theme="dark"] .inv-tab { background: var(--am-bg-2) !important; color: var(--am-text-3) !important; border-color: rgba(255,255,255,0.06) !important; } html[data-theme="dark"] .inv-tab.active { background: rgba(22, 20, 28, 0.8) !important; color: var(--am-accent) !important; } html[data-theme="dark"] .progress-step { background: rgba(255,255,255,0.04) !important; color: var(--am-text-4) !important; } html[data-theme="dark"] .form-progress { background: rgba(22,20,28,0.5) !important; border-color: rgba(255,255,255,0.06) !important; } /* ── UPLOAD ZONE — DARK ────────────────────────────────────── */ html[data-theme="dark"] .upload-zone { border-color: rgba(255,255,255,0.08) !important; background: rgba(255,255,255,0.02) !important; } html[data-theme="dark"] .upload-zone:hover { border-color: var(--am-accent) !important; background: rgba(224,122,98,0.04) !important; } /* ── CALLOUTS — DARK ───────────────────────────────────────── */ html[data-theme="dark"] .doc-callout { background: rgba(224,122,98,0.06) !important; border-left-color: var(--am-accent) !important; color: var(--am-text-2) !important; } html[data-theme="dark"] .doc-callout.success { background: rgba(76,175,80,0.08) !important; } html[data-theme="dark"] .doc-callout.warning { background: rgba(200,135,61,0.08) !important; } /* ── ACCOUNT SUMMARY — DARK ────────────────────────────────── */ html[data-theme="dark"] .account-summary-card { background: rgba(224,122,98,0.06) !important; border-color: rgba(224,122,98,0.15) !important; } html[data-theme="dark"] .summary-val { color: var(--am-text-1) !important; } html[data-theme="dark"] .divider { background: rgba(255,255,255,0.06) !important; } /* ── INSTRUCTION BOX — DARK ────────────────────────────────── */ html[data-theme="dark"] .instruction-box { background: rgba(255,255,255,0.03) !important; border-color: rgba(255,255,255,0.06) !important; } /* ── CONTACT FORM — DARK ───────────────────────────────────── */ html[data-theme="dark"] .contact-form-card { background: rgba(22,20,28,0.5) !important; border-color: rgba(255,255,255,0.06) !important; } /* ── LOGIN REQUIRED — DARK ─────────────────────────────────── */ html[data-theme="dark"] .login-required-box { background: rgba(22,20,28,0.5) !important; border-color: rgba(255,255,255,0.06) !important; } html[data-theme="dark"] .login-required-box h2 { color: var(--am-text-1) !important; } html[data-theme="dark"] .login-required-box p { color: var(--am-text-3) !important; } /* ── SELL ONBOARDING — DARK ────────────────────────────────── */ html[data-theme="dark"] .sell-onboarding.login-required-box { background: radial-gradient(circle at 90% 8%, rgba(224,122,98,0.1), transparent 35%), linear-gradient(135deg, rgba(22,20,28,0.95), rgba(18,16,22,0.9)) !important; border-color: rgba(224,122,98,0.12) !important; } html[data-theme="dark"] .sell-onboarding-step { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.06) !important; } /* ── FOOTER — DARK ─────────────────────────────────────────── */ html[data-theme="dark"] .site-footer, html[data-theme="dark"] footer { background: rgba(12, 10, 14, 0.8) !important; border-top-color: rgba(255,255,255,0.06) !important; color: var(--am-text-2) !important; } html[data-theme="dark"] .footer-col h4 { color: var(--am-text-1) !important; } html[data-theme="dark"] .footer-col ul li a { color: var(--am-text-3) !important; } html[data-theme="dark"] .footer-col ul li a:hover { color: var(--am-accent) !important; } html[data-theme="dark"] .footer-bottom { border-top-color: rgba(255,255,255,0.06) !important; color: var(--am-text-4) !important; } html[data-theme="dark"] .footer-bottom strong { color: var(--am-text-2) !important; } html[data-theme="dark"] .brand-col p { color: var(--am-text-3) !important; } html[data-theme="dark"] .social-icon { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.1) !important; } /* ── TOASTS — DARK ─────────────────────────────────────────── */ html[data-theme="dark"] .am-toast.success { background: rgba(76,175,80,0.12) !important; border-color: rgba(76,175,80,0.25) !important; } html[data-theme="dark"] .am-toast.error { background: rgba(224,122,98,0.12) !important; border-color: rgba(224,122,98,0.25) !important; } /* ── INDEX PAGE HERO — DARK ────────────────────────────────── */ html[data-theme="dark"] .cine-hero { background: #0c0a0e !important; } html[data-theme="dark"] .cine-card { background: rgba(22, 20, 28, 0.5) !important; backdrop-filter: blur(32px) saturate(160%) !important; border-color: rgba(255,255,255,0.06) !important; } html[data-theme="dark"] .cine-badge { background: rgba(22,20,28,0.7) !important; border-color: rgba(255,255,255,0.08) !important; color: var(--am-text-2) !important; } html[data-theme="dark"] .cine-matte, html[data-theme="dark"] .cine-hero h1, html[data-theme="dark"] .hero-title { color: #f0edf5 !important; } html[data-theme="dark"] .cine-silver, html[data-theme="dark"] .cine-hero h2 { color: rgba(240,237,245,0.7) !important; } html[data-theme="dark"] .cine-stat-val { color: var(--am-accent) !important; } html[data-theme="dark"] .cine-stat-label { color: var(--am-text-3) !important; } /* ── MISC DARK OVERRIDES ───────────────────────────────────── */ html[data-theme="dark"] .navbar { background: rgba(12,10,14,0.88) !important; border-bottom-color: rgba(255,255,255,0.04) !important; } html[data-theme="dark"] .nav-brand-text { color: #f0edf5 !important; } html[data-theme="dark"] .nav-link { color: rgba(240,237,245,0.6) !important; } html[data-theme="dark"] .nav-link:hover, html[data-theme="dark"] .nav-link.active { color: #f0edf5 !important; } /* Select option styling */ html[data-theme="dark"] option { background: #1c1922; color: var(--am-text-1); } /* Table dark */ html[data-theme="dark"] table { border-color: rgba(255,255,255,0.06); } html[data-theme="dark"] th { background: rgba(255,255,255,0.03); color: var(--am-text-2); } html[data-theme="dark"] td { color: var(--am-text-2); border-color: rgba(255,255,255,0.04); } /* UPI box */ html[data-theme="dark"] .upi-box { background: rgba(22,20,28,0.7) !important; border-color: var(--am-accent) !important; } /* ══════════════════════════════════════════════════════════════════ THEME TOGGLE BUTTON ══════════════════════════════════════════════════════════════════ */ .theme-toggle { width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(0,0,0,0.08); background: rgba(0,0,0,0.03); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; overflow: hidden; flex-shrink: 0; padding: 0; } .theme-toggle:hover { transform: scale(1.08); background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.12); } .theme-toggle:active { transform: scale(0.95); } .theme-toggle .sun-icon, .theme-toggle .moon-icon { width: 18px; height: 18px; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); position: absolute; } .theme-toggle .sun-icon { opacity: 1; transform: rotate(0deg) scale(1); } .theme-toggle .moon-icon { opacity: 0; transform: rotate(-90deg) scale(0.5); } html[data-theme="dark"] .theme-toggle { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); } html[data-theme="dark"] .theme-toggle:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); } html[data-theme="dark"] .theme-toggle .sun-icon { opacity: 0; transform: rotate(90deg) scale(0.5); } html[data-theme="dark"] .theme-toggle .moon-icon { opacity: 1; transform: rotate(0deg) scale(1); } /* ══════════════════════════════════════════════════════════════════ SMOOTH TRANSITION for theme switch ══════════════════════════════════════════════════════════════════ */ html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition: background-color 0.4s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.4s ease !important; transition-delay: 0s !important; } /* ══════════════════════════════════════════════════════════════════ PERFORMANCE: prefer-reduced-motion ══════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition-duration: 0.01ms !important; } } /* ══════════════════════════════════════════════════════════════════ DARK MODE — INDEX.HTML SPECIFIC OVERRIDES (Cards, Stats, Sections) ══════════════════════════════════════════════════════════════════ */ /* Stats strip */ html[data-theme="dark"] .stat-item { background: rgba(22, 20, 28, 0.5) !important; border-color: rgba(255,255,255,0.06) !important; color: var(--am-text-1) !important; } html[data-theme="dark"] .stat-item:hover { border-color: rgba(224,122,98,0.2) !important; box-shadow: 0 12px 30px rgba(0,0,0,0.3) !important; } html[data-theme="dark"] .stat-num { color: var(--am-accent) !important; } html[data-theme="dark"] .stat-label { color: var(--am-text-3) !important; } /* Process steps */ html[data-theme="dark"] .process-step { background: rgba(22, 20, 28, 0.5) !important; border-color: rgba(255,255,255,0.06) !important; } html[data-theme="dark"] .process-step:hover { border-color: rgba(224,122,98,0.2) !important; box-shadow: 0 14px 40px rgba(0,0,0,0.3) !important; } html[data-theme="dark"] .process-step h3 { color: var(--am-text-1) !important; } html[data-theme="dark"] .process-step p { color: var(--am-text-3) !important; } html[data-theme="dark"] .process-step::before { color: var(--am-accent) !important; } /* Discover tiles */ html[data-theme="dark"] .discover-tile { box-shadow: 0 14px 40px rgba(0,0,0,0.3) !important; } /* Testimonial cards */ html[data-theme="dark"] .testimonial-card { background: rgba(22, 20, 28, 0.5) !important; border-color: rgba(255,255,255,0.06) !important; } html[data-theme="dark"] .testimonial-card:hover { border-color: rgba(224,122,98,0.2) !important; } html[data-theme="dark"] .testimonial-text { color: var(--am-text-2) !important; } html[data-theme="dark"] .testimonial-name { color: var(--am-text-1) !important; } html[data-theme="dark"] .testimonial-rank { color: var(--am-text-3) !important; } html[data-theme="dark"] .testimonial-avatar { background: rgba(224,122,98,0.15) !important; color: var(--am-accent) !important; } html[data-theme="dark"] .testimonial-card::before { color: var(--am-accent) !important; } /* Listing cards on homepage storefront */ html[data-theme="dark"] .listing-card { background: rgba(22, 20, 28, 0.5) !important; border-color: rgba(255,255,255,0.06) !important; } html[data-theme="dark"] .listing-card:hover { border-color: rgba(224,122,98,0.15) !important; box-shadow: 0 20px 60px rgba(0,0,0,0.35) !important; } html[data-theme="dark"] .listing-title { color: var(--am-text-1) !important; } html[data-theme="dark"] .listing-meta { color: var(--am-text-3) !important; } html[data-theme="dark"] .listing-price { color: var(--am-accent) !important; } html[data-theme="dark"] .listing-body { color: var(--am-text-2) !important; } html[data-theme="dark"] .listing-img { background: rgba(22,20,28,0.7) !important; } /* Skeleton cards */ html[data-theme="dark"] .skeleton-img, html[data-theme="dark"] .skeleton-line { background: linear-gradient(90deg, rgba(42,38,51,1) 0%, rgba(28,25,34,1) 50%, rgba(42,38,51,1) 100%) !important; background-size: 200% 100% !important; } /* Empty state */ html[data-theme="dark"] .empty-state { background: rgba(22,20,28,0.5) !important; border-color: rgba(255,255,255,0.06) !important; color: var(--am-text-3) !important; } html[data-theme="dark"] .empty-state strong { color: var(--am-text-1) !important; } /* CTA banner */ html[data-theme="dark"] .cta-banner { box-shadow: 0 30px 80px rgba(0,0,0,0.5) !important; } /* Section labels & titles */ html[data-theme="dark"] .section-label { color: var(--am-accent) !important; } html[data-theme="dark"] .section-title { color: var(--am-text-1) !important; } /* Footer dark */ html[data-theme="dark"] .footer { background: rgba(12,10,14,0.8) !important; border-top-color: rgba(255,255,255,0.04) !important; } html[data-theme="dark"] .footer-brand p { color: var(--am-text-3) !important; } html[data-theme="dark"] .footer-col a { color: var(--am-text-3) !important; } html[data-theme="dark"] .footer-col a:hover { color: var(--am-accent) !important; } html[data-theme="dark"] .footer-col h4 { color: var(--am-text-1) !important; } html[data-theme="dark"] .footer-bottom { border-top-color: rgba(255,255,255,0.04) !important; color: var(--am-text-4) !important; } /* Features section */ html[data-theme="dark"] .features-section { background: #0c0a0e !important; } html[data-theme="dark"] .feature-icon { background: rgba(224,122,98,0.1) !important; } html[data-theme="dark"] .feature-title { color: var(--am-text-1) !important; } html[data-theme="dark"] .feature-desc { color: var(--am-text-3) !important; } /* Navbar (index.html has its own old-style navbar) */ html[data-theme="dark"] .navbar { background: rgba(12,10,14,0.88) !important; border-bottom-color: rgba(255,255,255,0.04) !important; } html[data-theme="dark"] .navbar.scrolled { background: rgba(12,10,14,0.96) !important; box-shadow: 0 2px 20px rgba(0,0,0,0.3) !important; } html[data-theme="dark"] .nav-brand-text { color: #f0edf5 !important; } html[data-theme="dark"] .nav-link { color: rgba(240,237,245,0.6) !important; } html[data-theme="dark"] .nav-link:hover { color: #f0edf5 !important; background: rgba(255,255,255,0.06) !important; } html[data-theme="dark"] .nav-link.active { color: var(--am-accent) !important; background: rgba(224,122,98,0.1) !important; } html[data-theme="dark"] .nav-btn-ghost { color: rgba(240,237,245,0.7) !important; border-color: rgba(255,255,255,0.1) !important; } html[data-theme="dark"] .nav-btn-ghost:hover { background: rgba(255,255,255,0.06) !important; color: #f0edf5 !important; } /* Mobile nav dark */ html[data-theme="dark"] .mobile-nav { background: rgba(12,10,14,0.98) !important; } html[data-theme="dark"] .mobile-nav a { color: var(--am-text-2) !important; } html[data-theme="dark"] .mobile-nav a:hover { color: var(--am-accent) !important; } /* Auth modal dark */ html[data-theme="dark"] .auth-overlay { background: rgba(0,0,0,0.7) !important; } html[data-theme="dark"] .auth-modal { background: rgba(22,20,28,0.95) !important; border-color: rgba(255,255,255,0.08) !important; } html[data-theme="dark"] .auth-tab { color: var(--am-text-3) !important; } html[data-theme="dark"] .auth-tab.active { color: var(--am-accent) !important; border-bottom-color: var(--am-accent) !important; } html[data-theme="dark"] .auth-input { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.08) !important; color: var(--am-text-1) !important; } html[data-theme="dark"] .auth-close { color: var(--am-text-3) !important; } /* User menu dark */ html[data-theme="dark"] .user-menu { background: rgba(22,20,28,0.95) !important; border-color: rgba(255,255,255,0.08) !important; box-shadow: 0 20px 60px rgba(0,0,0,0.5) !important; } html[data-theme="dark"] .user-menu a, html[data-theme="dark"] .user-menu button { color: var(--am-text-2) !important; } html[data-theme="dark"] .user-menu a:hover, html[data-theme="dark"] .user-menu button:hover { background: rgba(255,255,255,0.05) !important; color: var(--am-accent) !important; } html[data-theme="dark"] .user-menu .divider { background: rgba(255,255,255,0.06) !important; } /* Loader screen dark */ html[data-theme="dark"] .loader-screen { background: #0c0a0e !important; } html[data-theme="dark"] .loader-text { color: var(--am-text-3) !important; } html[data-theme="dark"] .loader-bar { background: rgba(255,255,255,0.06) !important; } /* Hero background dark */ html[data-theme="dark"] .cine-hero { background: linear-gradient(160deg, #0c0a0e 0%, #141218 50%, #1c1922 100%) !important; } html[data-theme="dark"] .cine-grid-bg { background-image: linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px) !important; } html[data-theme="dark"] .cine-matte { color: #f0edf5 !important; } html[data-theme="dark"] .cine-scroll-hint { color: var(--am-text-3) !important; } html[data-theme="dark"] .cine-scroll-hint .hint-line { background: rgba(255,255,255,0.08) !important; } html[data-theme="dark"] .cine-cta-wrapper h2 { background: linear-gradient(180deg, #f0edf5 0%, var(--am-accent) 120%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } html[data-theme="dark"] .cine-cta-wrapper p { color: var(--am-text-3) !important; } html[data-theme="dark"] .cine-credit { color: var(--am-text-4) !important; } html[data-theme="dark"] .cine-credit b { color: var(--am-text-1) !important; } /* Storefront header dark */ html[data-theme="dark"] .btn-hero-glass { background: rgba(255,255,255,0.05) !important; color: var(--am-text-2) !important; border-color: rgba(255,255,255,0.1) !important; } html[data-theme="dark"] .btn-hero-glass:hover { background: rgba(255,255,255,0.1) !important; border-color: rgba(255,255,255,0.2) !important; } /* Card body text in listing cards (browse page style) */ html[data-theme="dark"] .card-body { color: var(--am-text-2) !important; } html[data-theme="dark"] .card-title { color: var(--am-text-1) !important; } html[data-theme="dark"] .card-price { color: var(--am-accent) !important; } html[data-theme="dark"] .card-stat { color: var(--am-text-3) !important; } html[data-theme="dark"] .card-stat span { color: var(--am-text-1) !important; } html[data-theme="dark"] .pill { background: rgba(91,138,114,0.06) !important; color: #5B8A72 !important; border-color: rgba(91,138,114,0.15) !important; } html[data-theme="dark"] .rank-badge { color: inherit !important; } html[data-theme="dark"] .region-badge { background: rgba(91,138,114,0.06) !important; color: #5B8A72 !important; border-color: rgba(91,138,114,0.15) !important; } html[data-theme="dark"] .card-footer { border-top-color: rgba(255,255,255,0.04) !important; } html[data-theme="dark"] .bookmarkBtn { background: rgba(255,255,255,0.04) !important; color: var(--am-text-3) !important; border-color: rgba(255,255,255,0.08) !important; } html[data-theme="dark"] .bookmarkBtn.saved { background: rgba(224,122,98,0.1) !important; color: var(--am-accent) !important; border-color: var(--am-accent) !important; } /* Card image wrap dark */ html[data-theme="dark"] .card-img-wrap { background: linear-gradient(135deg, rgba(22,20,28,0.6), rgba(28,25,34,0.8)) !important; } html[data-theme="dark"] .card-img-wrap::after { background: linear-gradient(to top, rgba(22,20,28,0.95), transparent) !important; }