/* Dark Mode Stylesheet for Deal Runner AI Add this after styles.css or toggle with a class on Usage: */ .dark-mode { background: #1A1A1A; color: #E5E5E5; } /* Base Elements */ .dark-mode body { background: #1A1A1A; color: #E5E5E5; } /* Header */ .dark-mode .header { background: #2D2D2D; border-bottom: 1px solid #3A3A3A; } .dark-mode .logo-text { color: #E5E5E5; } .dark-mode .nav-link { color: #A8A8A8; } .dark-mode .nav-link:hover, .dark-mode .nav-link-active { color: #FFFFFF; } .dark-mode .btn-logout { color: #A8A8A8; border-color: #3A3A3A; background: transparent; } .dark-mode .btn-logout:hover { background: #3A3A3A; border-color: #4A4A4A; color: #FFFFFF; } /* Navbar */ .dark-mode .navbar { background: #2D2D2D; border-bottom: 1px solid #3A3A3A; } .dark-mode .nav-links a { color: #A8A8A8; } .dark-mode .nav-links a:hover { color: #FFFFFF; } /* Hero Section */ .dark-mode .hero-section { background: linear-gradient(180deg, #1A1A1A 0%, #1F1F1F 100%); } .dark-mode .hero-bg-decoration { background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(96, 165, 250, 0.08) 100%); } .dark-mode .hero-bg-circle-1 { background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, transparent 70%); } .dark-mode .hero-bg-circle-2 { background: radial-gradient(circle, rgba(96, 165, 250, 0.10) 0%, transparent 70%); } .dark-mode .hero-badge { background: rgba(59, 130, 246, 0.15); color: #60A5FA; } .dark-mode .hero-title { color: #FFFFFF; } .dark-mode .hero-title .highlight { color: #60A5FA; } .dark-mode .hero-subtitle { color: #A8A8A8; } .dark-mode .hero-note { color: #6B6B6B; } /* Buttons */ .dark-mode .btn-hero, .dark-mode .btn-primary, .dark-mode .btn-nav-primary { background: #3B82F6; color: #FFFFFF; } .dark-mode .btn-hero:hover, .dark-mode .btn-primary:hover, .dark-mode .btn-nav-primary:hover { background: #2563EB; } .dark-mode .btn-secondary { background: #2D2D2D; border-color: #3A3A3A; color: #E5E5E5; } .dark-mode .btn-secondary:hover { background: #3A3A3A; border-color: #4A4A4A; } .dark-mode .btn-cta { background: #FFFFFF; color: #1A1A1A; } .dark-mode .btn-waitlist, .dark-mode .btn-search { background: #3B82F6; color: #FFFFFF; } .dark-mode .btn-waitlist:hover, .dark-mode .btn-search:hover { background: #2563EB; } /* Property Showcase */ .dark-mode .property-showcase-card { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } .dark-mode .property-badge { background: rgba(59, 130, 246, 0.95); } /* Video Demo */ .dark-mode .video-container { background: #2D2D2D; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); } .dark-mode .video-caption { color: #A8A8A8; } /* How It Works Section */ .dark-mode .how-it-works { background: #1F1F1F; } .dark-mode .section-title { color: #FFFFFF; } .dark-mode .section-subtitle { color: #A8A8A8; } .dark-mode .step-card { background: #2D2D2D; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .dark-mode .step-card:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } .dark-mode .step-number { background: #3B82F6; } .dark-mode .step-content h3 { color: #FFFFFF; } .dark-mode .step-content p { color: #A8A8A8; } .dark-mode .step-image { background: #3A3A3A; } /* Comps Preview */ .dark-mode .comp-mini-card { background: #3A3A3A; border-color: #4A4A4A; } .dark-mode .comp-price { color: #FFFFFF; } .dark-mode .comp-details { color: #A8A8A8; } /* Report Preview */ .dark-mode .report-preview { background: #3A3A3A; border-color: #4A4A4A; } .dark-mode .report-header { color: #FFFFFF; } .dark-mode .report-stat span { color: #A8A8A8; } .dark-mode .report-stat strong { color: #FFFFFF; } /* Analysis Preview */ .dark-mode .analysis-box { background: rgba(59, 130, 246, 0.15) !important; } .dark-mode .analysis-box-alt { background: rgba(16, 185, 129, 0.15) !important; } .dark-mode .analysis-label { color: #60A5FA; } .dark-mode .analysis-box-alt .analysis-label { color: #34D399; } .dark-mode .analysis-value { color: #60A5FA; } .dark-mode .analysis-box-alt .analysis-value { color: #34D399; } /* Features Section */ .dark-mode .features-section { background: #1A1A1A; } .dark-mode .features-hero-image { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); } .dark-mode .feature-card { background: #2D2D2D; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .dark-mode .feature-card:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } .dark-mode .feature-icon { background: rgba(59, 130, 246, 0.15); color: #60A5FA; } .dark-mode .feature-card h3 { color: #FFFFFF; } .dark-mode .feature-card p { color: #A8A8A8; } /* Pricing Section */ .dark-mode .pricing-section { background: #1F1F1F; } .dark-mode .social-proof-banner { background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.10) 100%); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .dark-mode .social-proof-number { color: #60A5FA; } .dark-mode .social-proof-label { color: #A8A8A8; } .dark-mode .pricing-card, .dark-mode .pricing-card-new { background: #2D2D2D; border-color: #3A3A3A; } .dark-mode .pricing-card:hover, .dark-mode .pricing-card-new:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } .dark-mode .pricing-card-featured { border-color: #3B82F6; background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, #2D2D2D 100%); } .dark-mode .pricing-badge, .dark-mode .pricing-badge-new { background: #3B82F6; } .dark-mode .pricing-plan-name, .dark-mode .pricing-content h2 { color: #FFFFFF; } .dark-mode .pricing-description { color: #A8A8A8; } .dark-mode .amount, .dark-mode .price { color: #FFFFFF; } .dark-mode .currency, .dark-mode .period, .dark-mode .price-period { color: #A8A8A8; } .dark-mode .pricing-features li, .dark-mode .features-list li { color: #E5E5E5; border-bottom-color: #3A3A3A; } .dark-mode .trust-signals { border-top-color: #3A3A3A; } .dark-mode .trust-text { color: #A8A8A8; } /* Waitlist Section */ .dark-mode .waitlist-section { background: linear-gradient(135deg, #1F1F1F 0%, rgba(59, 130, 246, 0.05) 100%); } .dark-mode .waitlist-content h2 { color: #FFFFFF; } .dark-mode .waitlist-content p { color: #A8A8A8; } .dark-mode .waitlist-input { background: #2D2D2D; border-color: #3A3A3A; color: #E5E5E5; } .dark-mode .waitlist-input:focus { border-color: #3B82F6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); } .dark-mode .waitlist-input::placeholder { color: #6B6B6B; } .dark-mode .stat-number { color: #60A5FA; } .dark-mode .stat-label { color: #A8A8A8; } .dark-mode .waitlist-note { color: #6B6B6B; } /* CTA Section */ .dark-mode .cta-section { background: #3B82F6; } /* Form Styles */ .dark-mode .form-container { background: #2D2D2D; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } .dark-mode .form-header h1 { color: #FFFFFF; } .dark-mode .form-header p { color: #A8A8A8; } .dark-mode .form-group label { color: #E5E5E5; } .dark-mode .form-group input, .dark-mode .date-filter { background: #1F1F1F; border-color: #3A3A3A; color: #E5E5E5; } .dark-mode .form-group input:focus, .dark-mode .date-filter:focus { border-color: #3B82F6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); } .dark-mode .form-group input::placeholder { color: #6B6B6B; } .dark-mode .helper-text { color: #A8A8A8; } .dark-mode .checkbox-group label { color: #A8A8A8; } .dark-mode .link { color: #60A5FA; } .dark-mode .link:hover { color: #93C5FD; } .dark-mode .divider { color: #6B6B6B; } .dark-mode .divider::before, .dark-mode .divider::after { border-bottom-color: #3A3A3A; } .dark-mode .form-footer { border-top-color: #3A3A3A; } .dark-mode .form-footer p { color: #A8A8A8; } /* Dashboard Styles */ .dark-mode .dashboard-main, .dark-mode .admin-main, .dark-mode .result-main { background: #1A1A1A; } .dark-mode .dashboard-header h1, .dark-mode .admin-header h1 { color: #FFFFFF; } .dark-mode .dashboard-header p, .dark-mode .admin-header p { color: #A8A8A8; } .dark-mode .search-input-wrapper { background: #2D2D2D; border-color: #3A3A3A; } .dark-mode .search-input-wrapper:focus-within { border-color: #3B82F6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); } .dark-mode .search-input { background: #2D2D2D !important; color: #E5E5E5; } .dark-mode .search-input::placeholder { color: #6B6B6B; } /* Results Section */ .dark-mode .results-section { background: #2D2D2D; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .dark-mode .results-header { border-bottom-color: #3A3A3A; } .dark-mode .results-header h2 { color: #FFFFFF; } .dark-mode .results-count { color: #A8A8A8; } .dark-mode .result-item { border-color: #3A3A3A; } .dark-mode .result-item:hover { border-color: #4A4A4A; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .dark-mode .result-address h3 { color: #FFFFFF; } .dark-mode .result-timestamp { color: #6B6B6B; } .dark-mode .btn-view { background: #3B82F6; } .dark-mode .btn-view:hover { background: #2563EB; } .dark-mode .btn-view:disabled { background: #3A3A3A; color: #6B6B6B; } /* Property Detail Page */ .dark-mode .property-header { background: #2D2D2D; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .dark-mode .property-title-section h1 { color: #FFFFFF; } .dark-mode .property-location, .dark-mode .meta-item { color: #A8A8A8; } .dark-mode .detail-card { background: #2D2D2D; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .dark-mode .card-header { border-bottom-color: #3A3A3A; } .dark-mode .card-header h2 { color: #FFFFFF; } .dark-mode .card-subtitle { color: #A8A8A8; } /* AI Summary Card */ .dark-mode .ai-summary-card { background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, #2D2D2D 100%); border-color: rgba(59, 130, 246, 0.3); } .dark-mode .score-circle { background: #1F1F1F; border-color: #3B82F6; } .dark-mode .score-value { color: #60A5FA; } .dark-mode .score-label { color: #A8A8A8; } .dark-mode .score-description h3 { color: #FFFFFF; } .dark-mode .score-description p { color: #A8A8A8; } .dark-mode .key-insights h4 { color: #FFFFFF; } .dark-mode .insights-list li { color: #E5E5E5; } .dark-mode .detail-row { border-bottom-color: #3A3A3A; } .dark-mode .detail-label { color: #A8A8A8; } .dark-mode .detail-value { color: #E5E5E5; } .dark-mode .price-highlight { color: #60A5FA; } .dark-mode .positive-value { color: #34D399; } /* Tables */ .dark-mode .comps-table th { background: #1F1F1F; color: #A8A8A8; border-bottom-color: #3A3A3A; } .dark-mode .comps-table td { color: #E5E5E5; border-bottom-color: #3A3A3A; } .dark-mode .comps-table tr:hover { background: #3A3A3A; } /* Location Scores */ .dark-mode .score-bar-container { background: #3A3A3A; } .dark-mode .score-name { color: #A8A8A8; } .dark-mode .score-num { color: #E5E5E5; } /* Amenities */ .dark-mode .amenity-item { background: #3A3A3A; } .dark-mode .amenity-icon { background: #1F1F1F; } .dark-mode .amenity-name { color: #E5E5E5; } .dark-mode .amenity-distance { color: #A8A8A8; } /* FAQ Section */ .dark-mode .faq-item { background: #2D2D2D; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .dark-mode .faq-item h4 { color: #FFFFFF; } .dark-mode .faq-item p { color: #A8A8A8; } /* Footer */ .dark-mode .footer { background: #2D2D2D; border-top-color: #3A3A3A; } .dark-mode .footer p { color: #6B6B6B; } .dark-mode .footer-new { background: #1F1F1F; } .dark-mode .footer-content { color: #E5E5E5; } .dark-mode .footer-brand p { color: #6B6B6B; } .dark-mode .footer-column a { color: #A8A8A8; } .dark-mode .footer-column a:hover { color: #FFFFFF; } .dark-mode .footer-bottom { border-top-color: #3A3A3A; } /* Admin Dashboard */ .dark-mode .metric-card { background: #2D2D2D; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .dark-mode .metric-card:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5); } .dark-mode .metric-card-primary { background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, #2D2D2D 100%); border-color: rgba(59, 130, 246, 0.3); } .dark-mode .metric-icon-blue { background: rgba(59, 130, 246, 0.2); color: #60A5FA; } .dark-mode .metric-icon-green { background: rgba(16, 185, 129, 0.2); color: #34D399; } .dark-mode .metric-icon-purple { background: rgba(168, 85, 247, 0.2); color: #A78BFA; } .dark-mode .metric-icon-orange { background: rgba(251, 146, 60, 0.2); color: #FB923C; } .dark-mode .metric-value { color: #FFFFFF; } .dark-mode .metric-label { color: #A8A8A8; } .dark-mode .metric-sublabel { color: #6B6B6B; } /* Charts */ .dark-mode .chart-card { background: #2D2D2D; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .dark-mode .chart-header h3 { color: #FFFFFF; } .dark-mode .chart-header p { color: #A8A8A8; } .dark-mode .legend-item { color: #A8A8A8; } .dark-mode .chart-placeholder { background: #1F1F1F; } .dark-mode .token-stat-item { background: #1F1F1F; } .dark-mode .token-stat-label { color: #A8A8A8; } .dark-mode .token-stat-value { color: #FFFFFF; } .dark-mode .token-stat-sublabel { color: #6B6B6B; } .dark-mode .token-stat-bar { background: #3A3A3A; } /* Tables */ .dark-mode .table-card { background: #2D2D2D; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .dark-mode .table-header h3 { color: #FFFFFF; } .dark-mode .btn-text { color: #60A5FA; } .dark-mode .btn-text:hover { color: #93C5FD; } .dark-mode .data-table th { color: #A8A8A8; border-bottom-color: #3A3A3A; } .dark-mode .data-table td { color: #E5E5E5; border-bottom-color: #3A3A3A; } .dark-mode .plan-badge-starter { background: rgba(59, 130, 246, 0.2); color: #60A5FA; } .dark-mode .plan-badge-pro { background: rgba(16, 185, 129, 0.2); color: #34D399; } .dark-mode .plan-badge-enterprise { background: rgba(168, 85, 247, 0.2); color: #A78BFA; } /* Activity List */ .dark-mode .activity-item { background: #1F1F1F; } .dark-mode .activity-item:hover { background: rgba(59, 130, 246, 0.1); } .dark-mode .activity-name { color: #E5E5E5; } .dark-mode .activity-time { color: #6B6B6B; } .dark-mode .btn-small { background: #1F1F1F; border-color: #3A3A3A; color: #60A5FA; } .dark-mode .btn-small:hover { background: #3A3A3A; border-color: #3B82F6; } /* System Stats */ .dark-mode .system-stats { background: #2D2D2D; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .dark-mode .system-stat-card { background: #1F1F1F; } .dark-mode .system-stat-value { color: #FFFFFF; } .dark-mode .system-stat-label { color: #A8A8A8; } /* Scrollbar Styling (Webkit browsers) */ .dark-mode ::-webkit-scrollbar { width: 12px; height: 12px; } .dark-mode ::-webkit-scrollbar-track { background: #1F1F1F; } .dark-mode ::-webkit-scrollbar-thumb { background: #3A3A3A; border-radius: 6px; } .dark-mode ::-webkit-scrollbar-thumb:hover { background: #4A4A4A; } /* Selection */ .dark-mode ::selection { background: rgba(59, 130, 246, 0.3); color: #FFFFFF; }