/* ======================================== DARK MODE — Mirror App Applied via data-theme="dark" on ======================================== */ [data-theme="dark"] { --mirror-bg: #1a1a2e; --mirror-bg-alt: #16213e; --mirror-bg-card: #1e2a3a; --mirror-text: #e8e8e8; --mirror-text-muted: #a0a0b0; --mirror-text-dark: #e8e8e8; --mirror-border: #2a3a4a; --mirror-shadow: rgba(0, 0, 0, 0.3); /* Override theme template variables */ --primary-color: #e8e8e8; --white-color: #1a1a2e; --body-background: #1a1a2e; } [data-theme="dark"] body { background-color: #1a1a2e; color: #e8e8e8; } /* Header */ [data-theme="dark"] .main-header, [data-theme="dark"] .header-sticky { background: #16213e !important; border-bottom: 1px solid #2a3a4a; } [data-theme="dark"] .nav-link, [data-theme="dark"] .mirror-nav-link { color: #e8e8e8 !important; } [data-theme="dark"] .nav-link:hover, [data-theme="dark"] .mirror-nav-link:hover { color: #d4a574 !important; } /* Cards */ [data-theme="dark"] .mirror-salon-card { background: #1e2a3a; border-color: #2a3a4a; } [data-theme="dark"] .mirror-salon-card h3, [data-theme="dark"] .mirror-salon-card-body h3 { color: #e8e8e8; } [data-theme="dark"] .mirror-salon-card-body p { color: #a0a0b0; } [data-theme="dark"] .mirror-category-card { background: #1e2a3a; border-color: #2a3a4a; } [data-theme="dark"] .mirror-category-card h4 { color: #e8e8e8; } /* Sections */ [data-theme="dark"] .mirror-section { background: #1a1a2e; } [data-theme="dark"] .mirror-bg-warm-section { background: #16213e; } [data-theme="dark"] .mirror-bg-cool-section { background: #0f1929; } [data-theme="dark"] .mirror-section-title h2 { color: #e8e8e8 !important; } [data-theme="dark"] .mirror-section-title p { color: #a0a0b0; } /* Trust section */ [data-theme="dark"] .mirror-trust { background: #16213e; } [data-theme="dark"] .mirror-trust-item { background: #1e2a3a; border-color: #2a3a4a; } [data-theme="dark"] .mirror-trust-item .value { color: #d4a574; } [data-theme="dark"] .mirror-trust-item .desc { color: #a0a0b0; } /* Chips */ [data-theme="dark"] .mirror-chips-section { background: #16213e; } [data-theme="dark"] .mirror-chip { background: #1e2a3a; color: #e8e8e8; border-color: #2a3a4a; } [data-theme="dark"] .mirror-chip:hover { background: #721d43; color: #fff; } /* Search form */ [data-theme="dark"] .mirror-hero-search input, [data-theme="dark"] .mirror-hero-search select { background: #1e2a3a; color: #e8e8e8; border-color: #2a3a4a; } /* Buttons */ [data-theme="dark"] .mirror-btn-outline { color: #d4a574; border-color: #d4a574; } [data-theme="dark"] .mirror-btn-outline:hover { background: #d4a574; color: #1a1a2e; } /* Footer */ [data-theme="dark"] .mirror-footer { background: #0f1929 !important; } [data-theme="dark"] .mirror-footer h4 { color: #e8e8e8; } [data-theme="dark"] .mirror-footer p, [data-theme="dark"] .mirror-footer .footer-links a { color: #a0a0b0; } [data-theme="dark"] .mirror-footer .footer-links a:hover { color: #d4a574; } [data-theme="dark"] .mirror-footer-bottom { border-color: #2a3a4a; color: #a0a0b0; } /* FAQ */ [data-theme="dark"] .mirror-faq-item { border-color: #2a3a4a; } [data-theme="dark"] .mirror-faq-q { color: #e8e8e8; background: transparent; } [data-theme="dark"] .mirror-faq-a { color: #a0a0b0; } /* Steps */ [data-theme="dark"] .mirror-step-circle { background: #721d43; color: #fff; } [data-theme="dark"] .mirror-step-title { color: #e8e8e8; } [data-theme="dark"] .mirror-step-desc { color: #a0a0b0; } /* CTA gradient */ [data-theme="dark"] .mirror-cta-gradient { background: linear-gradient(135deg, #2a1030 0%, #1a1a2e 100%); } /* Placeholder */ [data-theme="dark"] .mirror-salon-placeholder { background: #2a3a4a; color: #d4a574; } /* Theme toggle button */ .mirror-theme-toggle { background: none; border: 1px solid #ddd; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; color: var(--mirror-text-dark, #333); transition: all 0.3s ease; } .mirror-theme-toggle:hover { border-color: #721d43; color: #721d43; } [data-theme="dark"] .mirror-theme-toggle { border-color: #2a3a4a; color: #d4a574; } [data-theme="dark"] .mirror-theme-toggle:hover { border-color: #d4a574; } /* Language toggle */ .mirror-lang-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid #ddd; border-radius: 50%; font-weight: 700; font-size: 13px; color: var(--mirror-text-dark, #333); text-decoration: none; transition: all 0.3s ease; } .mirror-lang-toggle:hover { border-color: #721d43; color: #721d43; text-decoration: none; } [data-theme="dark"] .mirror-lang-toggle { border-color: #2a3a4a; color: #d4a574; } /* FAQ styles */ .mirror-faq-list { max-width: 800px; margin: 0 auto; } .mirror-faq-item { border-bottom: 1px solid #eee; } .mirror-faq-q { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 18px 0; background: none; border: none; font-size: 16px; font-weight: 600; color: #333; cursor: pointer; text-align: left; } .mirror-faq-q i { transition: transform 0.3s ease; font-size: 14px; color: #999; } .mirror-faq-item.open .mirror-faq-q i { transform: rotate(180deg); } .mirror-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; font-size: 15px; color: #666; line-height: 1.6; } .mirror-faq-item.open .mirror-faq-a { max-height: 300px; padding-bottom: 18px; } /* Blog card */ .mirror-blog-card { margin: 0 8px; } .mirror-blog-pagination { margin-top: 20px; position: relative; } /* App section title */ .mirror-app-title { margin-bottom: 24px; } /* Small button variant */ .mirror-btn-sm { padding: 7px 16px; font-size: 12px; } /* Preloader dark */ [data-theme="dark"] .preloader { background: #1a1a2e; } /* Map */ [data-theme="dark"] .mirror-map-container { border-color: #2a3a4a; } /* Responsive menu dark */ [data-theme="dark"] .responsive-menu { background: #16213e; } [data-theme="dark"] .slicknav_menu { background: #16213e; } [data-theme="dark"] .slicknav_nav a { color: #e8e8e8; }