/** * AllBizSoft Dark Mode * Comprehensive dark theme - applied via [data-theme="dark"] on */ /* ======================================== 1. CSS Variables Override ======================================== */ [data-theme="dark"] { --primary: #667eea; --primary-dark: #5a6fd6; --primary-light: #8b9cf7; --secondary: #94a3b8; --dark: #e2e8f0; --light: #1e293b; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4); color-scheme: dark; } /* ======================================== 2. Global Base ======================================== */ [data-theme="dark"] body { background-color: #0f172a !important; color: #cbd5e1 !important; } [data-theme="dark"] ::selection { background: rgba(102, 126, 234, 0.4); color: #f1f5f9; } [data-theme="dark"] ::-moz-selection { background: rgba(102, 126, 234, 0.4); color: #f1f5f9; } /* ======================================== 3. Typography - catch ALL hardcoded text colors ======================================== */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: #e2e8f0 !important; } /* Override body color: #333 etc in custom_css */ [data-theme="dark"] p, [data-theme="dark"] li, [data-theme="dark"] span, [data-theme="dark"] div, [data-theme="dark"] td, [data-theme="dark"] th, [data-theme="dark"] label { color: inherit; } [data-theme="dark"] .text-muted { color: #94a3b8 !important; } [data-theme="dark"] .text-primary { color: #8b9cf7 !important; } [data-theme="dark"] .text-gradient { background: linear-gradient(135deg, #8b9cf7 0%, #a78bfa 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } [data-theme="dark"] a { color: #8b9cf7; text-decoration: none; } [data-theme="dark"] a:hover { color: #a5b4fc; } /* Don't override links inside gradient/colored sections */ [data-theme="dark"] .hero a, [data-theme="dark"] .about-hero a, [data-theme="dark"] .portfolio-hero a, [data-theme="dark"] .blog-detail-hero a, [data-theme="dark"] .detail-hero a, [data-theme="dark"] .cta-section a, [data-theme="dark"] .footer a, [data-theme="dark"] footer a { text-decoration: none !important; } [data-theme="dark"] .footer a, [data-theme="dark"] footer a, [data-theme="dark"] .btn, [data-theme="dark"] .nav-brand, [data-theme="dark"] .portfolio-overlay a { color: inherit; } /* ======================================== 4. Backgrounds - catch ALL white/light backgrounds ======================================== */ /* Sections */ [data-theme="dark"] .section, [data-theme="dark"] section { background-color: #0f172a; } [data-theme="dark"] .bg-light, [data-theme="dark"] .section.bg-light { background-color: #0b1222 !important; } /* Inline style overrides for sections */ [data-theme="dark"] section[style*="background: #f9fafb"], [data-theme="dark"] section[style*="background: #f8fafc"], [data-theme="dark"] section[style*="background:#f9fafb"], [data-theme="dark"] section[style*="background:#f8fafc"], [data-theme="dark"] section[style*="background-color: #f8f9fa"] { background-color: #0b1222 !important; } /* Cards - universal white background override */ [data-theme="dark"] .card, [data-theme="dark"] .service-card, [data-theme="dark"] .portfolio-card, [data-theme="dark"] .team-card, [data-theme="dark"] .stat-card, [data-theme="dark"] .value-card, [data-theme="dark"] .info-card, [data-theme="dark"] .sidebar-card, [data-theme="dark"] .testimonial-card, [data-theme="dark"] .related-post-card, [data-theme="dark"] .related-card, [data-theme="dark"] .blog-card, [data-theme="dark"] .comment-form, [data-theme="dark"] .author-box, [data-theme="dark"] .team-section, [data-theme="dark"] .tasks-section, [data-theme="dark"] .progress-section, [data-theme="dark"] .timeline-content, [data-theme="dark"] .faq-item, [data-theme="dark"] .contact-card, [data-theme="dark"] .contact-form-card, [data-theme="dark"] .feature-card, [data-theme="dark"] .pricing-card, [data-theme="dark"] .type-card, [data-theme="dark"] .sidebar-widget, [data-theme="dark"] .featured-post, [data-theme="dark"] .map-container, [data-theme="dark"] .modal-content { background: #1e293b !important; color: #cbd5e1; border-color: rgba(255, 255, 255, 0.06) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15) !important; } [data-theme="dark"] .service-card:hover, [data-theme="dark"] .portfolio-card:hover, [data-theme="dark"] .team-card:hover, [data-theme="dark"] .stat-card:hover, [data-theme="dark"] .related-post-card:hover, [data-theme="dark"] .related-card:hover, [data-theme="dark"] .blog-card:hover { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important; } /* Related section backgrounds */ [data-theme="dark"] .related-section { background: #0b1222 !important; } /* ======================================== 5. Navigation (handled in header.php inline) ======================================== */ /* ======================================== 6. Footer ======================================== */ [data-theme="dark"] .footer, [data-theme="dark"] footer { background: #060b17 !important; } [data-theme="dark"] footer[style*="background: #343a40"], [data-theme="dark"] footer[style*="background:#343a40"], [data-theme="dark"] footer[style*="background: #1a1a1a"], [data-theme="dark"] footer[style*="background:#1a1a1a"] { background: #060b17 !important; } [data-theme="dark"] .footer-desc, [data-theme="dark"] .footer-links a, [data-theme="dark"] .copyright, [data-theme="dark"] .footer-legal a, [data-theme="dark"] .footer-newsletter-desc { color: rgba(255, 255, 255, 0.45) !important; } [data-theme="dark"] .footer-links a:hover, [data-theme="dark"] .footer-legal a:hover, [data-theme="dark"] footer a:hover { color: white !important; } [data-theme="dark"] .footer-bottom { border-top-color: #1e293b !important; } [data-theme="dark"] .newsletter-input { background: #1e293b !important; border-color: #334155 !important; color: white !important; } /* ======================================== 7. Buttons ======================================== */ [data-theme="dark"] .btn-primary { background: #667eea !important; color: white !important; } [data-theme="dark"] .btn-primary:hover { background: #5a6fd6 !important; } [data-theme="dark"] .btn-outline-primary { color: #8b9cf7 !important; border-color: #667eea !important; } [data-theme="dark"] .btn-outline-primary:hover { background: #667eea !important; color: white !important; } [data-theme="dark"] .btn-link { color: #8b9cf7 !important; } /* ======================================== 8. Forms ======================================== */ [data-theme="dark"] .form-control, [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="tel"], [data-theme="dark"] textarea, [data-theme="dark"] select { background-color: #0f172a !important; border-color: #334155 !important; color: #e2e8f0 !important; } [data-theme="dark"] .form-control:focus, [data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus { border-color: #667eea !important; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2) !important; } [data-theme="dark"] .form-control::placeholder, [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #64748b !important; } /* ======================================== 9. Tags, Chips, Filters, Badges ======================================== */ [data-theme="dark"] .tech-tag, [data-theme="dark"] .tech-chip, [data-theme="dark"] .filter-btn, [data-theme="dark"] .blog-tag, [data-theme="dark"] .badge { background: #334155 !important; color: #cbd5e1 !important; } [data-theme="dark"] .filter-btn:hover, [data-theme="dark"] .tech-chip:hover, [data-theme="dark"] .blog-tag:hover { background: #475569 !important; } [data-theme="dark"] .filter-btn.active { background: #667eea !important; color: white !important; } [data-theme="dark"] .blog-tag:hover { background: #667eea !important; color: white !important; } /* ======================================== 10. Borders & Dividers ======================================== */ [data-theme="dark"] hr { border-color: #1e293b !important; background-color: #1e293b !important; } [data-theme="dark"] .border-secondary { border-color: #334155 !important; } [data-theme="dark"] .info-row { border-bottom-color: #1e293b !important; } [data-theme="dark"] .dropdown-divider { background: #334155 !important; } /* ======================================== 11. Blog ======================================== */ [data-theme="dark"] .blog-content { color: #94a3b8 !important; } [data-theme="dark"] .blog-content blockquote { border-left-color: #667eea !important; color: #94a3b8 !important; } [data-theme="dark"] .blog-content pre, [data-theme="dark"] .blog-content code { background: #0f172a !important; color: #e2e8f0 !important; } [data-theme="dark"] .share-button.copy { background: #334155 !important; } [data-theme="dark"] .comment-text { color: #94a3b8 !important; } [data-theme="dark"] .comment-date { color: #64748b !important; } /* ======================================== 12. Portfolio Detail ======================================== */ [data-theme="dark"] .project-description { color: #94a3b8 !important; } [data-theme="dark"] .info-label { color: #94a3b8 !important; } [data-theme="dark"] .info-value { color: #e2e8f0 !important; } [data-theme="dark"] .back-link { color: #94a3b8 !important; } [data-theme="dark"] .back-link:hover { color: #667eea !important; } [data-theme="dark"] .breadcrumb-item a, [data-theme="dark"] .breadcrumb-nav a { color: #94a3b8 !important; } [data-theme="dark"] .breadcrumb-item a:hover, [data-theme="dark"] .breadcrumb-nav a:hover { color: #667eea !important; } /* ======================================== 13. About Page ======================================== */ [data-theme="dark"] .timeline-dot { border-color: #0f172a !important; } [data-theme="dark"] .team-content { color: #cbd5e1; } /* ======================================== 14. Contact Page ======================================== */ [data-theme="dark"] .contact-info-item { color: #cbd5e1; } /* ======================================== 15. Scroll Buttons ======================================== */ [data-theme="dark"] .scroll-btn { background: rgba(30, 41, 59, 0.95) !important; color: #94a3b8 !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important; } [data-theme="dark"] .scroll-btn:hover { background: var(--gradient-primary) !important; color: white !important; } /* ======================================== 16. Dropdowns & Menus ======================================== */ [data-theme="dark"] .navbar-dropdown { background: #1e293b !important; border: 1px solid #334155 !important; } [data-theme="dark"] .navbar-dropdown a { color: #e2e8f0 !important; } [data-theme="dark"] .navbar-dropdown a:hover { background: #334155 !important; } /* ======================================== 17. Box Shadows ======================================== */ [data-theme="dark"] .shadow-lg, [data-theme="dark"] [class*="shadow"] { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4) !important; } /* ======================================== 18. Tables ======================================== */ [data-theme="dark"] .table { color: #cbd5e1; } [data-theme="dark"] .table th { color: #94a3b8 !important; border-bottom-color: #1e293b !important; } [data-theme="dark"] .table td { border-bottom-color: #1e293b !important; } [data-theme="dark"] .table tbody tr:hover { background: #1e293b !important; } /* ======================================== 19. Miscellaneous ======================================== */ [data-theme="dark"] .portfolio-overlay { background: rgba(0, 0, 0, 0.8) !important; } [data-theme="dark"] .empty-portfolio i, [data-theme="dark"] .empty-state i { color: #334155 !important; } [data-theme="dark"] .progress { background: #1e293b !important; } /* Service icon bg in dark mode */ [data-theme="dark"] .service-icon { background: rgba(102, 126, 234, 0.15) !important; color: #8b9cf7 !important; box-shadow: none; } [data-theme="dark"] .service-card:hover .service-icon { background: linear-gradient(135deg, #4338ca 0%, #667eea 35%, #764ba2 65%, #9333ea 100%) !important; color: white !important; box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3); } /* Stat card in hero (glass) - don't override */ [data-theme="dark"] .hero .stat-card { background: rgba(255, 255, 255, 0.1) !important; } /* Feature cards with f8fafc backgrounds */ [data-theme="dark"] [style*="background: #f8fafc"], [data-theme="dark"] [style*="background:#f8fafc"], [data-theme="dark"] [style*="background: #f8f9fa"], [data-theme="dark"] [style*="background:#f8f9fa"], [data-theme="dark"] [style*="background: #f9fafb"], [data-theme="dark"] [style*="background-color: #f8f9fa"], [data-theme="dark"] [style*="background: #f1f5f9"] { background: #0b1222 !important; } /* Inline footer override */ [data-theme="dark"] [style*="background: #343a40"], [data-theme="dark"] [style*="background:#343a40"], [data-theme="dark"] [style*="background: #1a1a1a"], [data-theme="dark"] [style*="background:#1a1a1a"], [data-theme="dark"] [style*="background: linear-gradient(180deg, #0f172a"], [data-theme="dark"] footer[style*="background: linear-gradient"] { background: #060b17 !important; } /* Alternating section backgrounds for visual depth */ [data-theme="dark"] .section:nth-child(even) { background-color: #0b1222; } /* Modal close button */ [data-theme="dark"] .modal-close { background: #1e293b !important; color: #e2e8f0 !important; } /* ======================================== 20. Hero Sections - dark deep tones ======================================== */ /* index.php - deep purple gradient */ [data-theme="dark"] .hero { background: linear-gradient(135deg, #1e1b4b 0%, #3b3d8e 40%, #4a2d6b 100%) !important; } /* about.php - amber/red gradient */ [data-theme="dark"] .about-hero { background: linear-gradient(135deg, #92400e 0%, #991b1b 100%) !important; } /* services.php - blue/purple gradient */ [data-theme="dark"] .services-hero { background: linear-gradient(135deg, #1e3a8a 0%, #4c1d95 100%) !important; } /* portfolio.php - primary gradient */ [data-theme="dark"] .portfolio-hero { background: linear-gradient(135deg, #3b3d8e 0%, #4a2d6b 100%) !important; } /* blog.php & blog-detail.php - purple/pink gradient */ [data-theme="dark"] .blog-hero, [data-theme="dark"] .blog-detail-hero { background: linear-gradient(135deg, #4c1d95 0%, #831843 100%) !important; } /* contact.php - cyan/blue gradient */ [data-theme="dark"] .contact-hero { background: linear-gradient(135deg, #164e63 0%, #1e3a8a 100%) !important; } /* portfolio-detail.php - handled dynamically, override with deep tones */ [data-theme="dark"] .detail-hero { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important; border-bottom: 1px solid #334155; } /* CTA sections */ [data-theme="dark"] .cta-section { background: linear-gradient(135deg, #3b3d8e 0%, #4a2d6b 100%) !important; } /* Smooth transition for theme switch */ body, .simple-nav, .service-card, .portfolio-card, .team-card, .stat-card, .timeline-content, .sidebar-card, .card, footer, .footer, .scroll-btn, .form-control, input, textarea, select, .btn, .filter-btn, .tech-tag, .tech-chip, .blog-tag { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* ======================================== 21. Privacy & Terms Pages ======================================== */ [data-theme="dark"] .privacy-content, [data-theme="dark"] .terms-content { background: #1e293b !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15) !important; border: 1px solid rgba(255, 255, 255, 0.06); } [data-theme="dark"] .privacy-section h2, [data-theme="dark"] .terms-section h2 { color: #8b9cf7 !important; } [data-theme="dark"] .privacy-section p, [data-theme="dark"] .privacy-section li, [data-theme="dark"] .terms-section p, [data-theme="dark"] .terms-section li { color: #94a3b8 !important; } [data-theme="dark"] .privacy-table th { background-color: #0f172a !important; color: #e2e8f0 !important; border-color: #334155 !important; } [data-theme="dark"] .privacy-table td { color: #cbd5e1 !important; border-color: #334155 !important; } [data-theme="dark"] .last-updated { color: #64748b !important; border-top-color: #334155 !important; } /* ======================================== 22. Services Page ======================================== */ /* Service detail sections - alternating backgrounds */ [data-theme="dark"] .service-detail { background: #0f172a !important; } [data-theme="dark"] .service-detail:nth-child(even) { background: #0b1222 !important; } /* Service header text */ [data-theme="dark"] .service-header h2, [data-theme="dark"] .service-header h3 { color: #e2e8f0 !important; } [data-theme="dark"] .service-header p, [data-theme="dark"] .service-detail p, [data-theme="dark"] .service-detail li { color: #94a3b8 !important; } /* Feature cards */ [data-theme="dark"] .feature-card { background: #1e293b !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15) !important; } [data-theme="dark"] .feature-card:hover { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3) !important; } [data-theme="dark"] .feature-card h4, [data-theme="dark"] .feature-card h3 { color: #e2e8f0 !important; } [data-theme="dark"] .feature-card p { color: #94a3b8 !important; } [data-theme="dark"] .feature-icon { background: rgba(102, 126, 234, 0.15) !important; color: #8b9cf7 !important; } /* Pricing cards */ [data-theme="dark"] .pricing-card { background: #1e293b !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15) !important; } [data-theme="dark"] .pricing-card.featured { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3) !important; border-color: rgba(102, 126, 234, 0.3) !important; } [data-theme="dark"] .pricing-card h3 { color: #e2e8f0 !important; } [data-theme="dark"] .pricing-price { color: #8b9cf7 !important; } [data-theme="dark"] .pricing-price span { color: #64748b !important; } [data-theme="dark"] .pricing-features li { color: #cbd5e1 !important; border-bottom-color: #334155 !important; } /* Badge */ [data-theme="dark"] .badge-primary { background: rgba(102, 126, 234, 0.15) !important; color: #8b9cf7 !important; } /* List items on services page */ [data-theme="dark"] .list-unstyled li { color: #94a3b8 !important; } [data-theme="dark"] .list-unstyled i.bi-check-circle-fill { color: #10b981 !important; } /* Service icon large in dark mode */ [data-theme="dark"] .service-icon-large { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important; } /* CTA section override for services */ [data-theme="dark"] .cta-section h2, [data-theme="dark"] .cta-section .display-3 { color: white !important; } [data-theme="dark"] .cta-section p { color: rgba(255, 255, 255, 0.85) !important; } /* Char counter */ [data-theme="dark"] .char-count { color: #64748b !important; } /* Map info */ [data-theme="dark"] .map-address strong, [data-theme="dark"] .map-directions strong { color: #e2e8f0 !important; } [data-theme="dark"] .map-address span, [data-theme="dark"] .map-directions span { color: #94a3b8 !important; } [data-theme="dark"] .map-container { border: 1px solid rgba(255, 255, 255, 0.06) !important; } [data-theme="dark"] .map-container iframe { filter: invert(0.9) hue-rotate(180deg) saturate(0.3) brightness(0.8); } [data-theme="dark"] .last-updated p { color: #64748b !important; } /* ======================================== 23. FAQ Section (Contact Page) ======================================== */ [data-theme="dark"] .faq-section { background: #0b1222 !important; } [data-theme="dark"] .faq-question { color: #e2e8f0 !important; } [data-theme="dark"] .faq-question:hover { background: #334155 !important; } [data-theme="dark"] .faq-icon { color: #94a3b8 !important; } [data-theme="dark"] .faq-answer, [data-theme="dark"] .faq-answer p { color: #94a3b8 !important; } /* ======================================== 24. Blog Page — Sidebar & Components ======================================== */ /* Category list */ [data-theme="dark"] .category-list a { background: #1e293b !important; color: #cbd5e1 !important; } [data-theme="dark"] .category-list a:hover { background: linear-gradient(135deg, #4338ca 0%, #667eea 35%, #764ba2 65%, #9333ea 100%) !important; color: white !important; } [data-theme="dark"] .category-list a.active { background: linear-gradient(135deg, #4338ca 0%, #667eea 35%, #764ba2 65%, #9333ea 100%) !important; color: white !important; } [data-theme="dark"] .category-count { background: rgba(255, 255, 255, 0.08) !important; color: #94a3b8 !important; } [data-theme="dark"] .category-list a:hover .category-count, [data-theme="dark"] .category-list a.active .category-count { background: rgba(255, 255, 255, 0.2) !important; color: white !important; } /* Tag cloud */ [data-theme="dark"] .tag-cloud a { background: #1e293b !important; color: #94a3b8 !important; } [data-theme="dark"] .tag-cloud a:hover { background: linear-gradient(135deg, #4338ca 0%, #667eea 35%, #764ba2 65%, #9333ea 100%) !important; color: white !important; } [data-theme="dark"] .tag-cloud a.active { background: linear-gradient(135deg, #4338ca 0%, #667eea 35%, #764ba2 65%, #9333ea 100%) !important; color: white !important; } /* Blog tags on cards */ [data-theme="dark"] .blog-tag { background: #1e293b !important; color: #94a3b8 !important; } [data-theme="dark"] .blog-tag:hover { background: linear-gradient(135deg, #4338ca 0%, #667eea 35%, #764ba2 65%, #9333ea 100%) !important; color: white !important; } /* Widget title border */ [data-theme="dark"] .widget-title { color: #e2e8f0 !important; border-bottom-color: #334155 !important; } /* Search input */ [data-theme="dark"] .search-widget input { background: #0f172a !important; border-color: #334155 !important; color: #e2e8f0 !important; } [data-theme="dark"] .search-widget input::placeholder { color: #64748b !important; } [data-theme="dark"] .search-widget button { color: #94a3b8 !important; } /* Popular posts */ [data-theme="dark"] .popular-post { border-bottom-color: #334155 !important; } [data-theme="dark"] .popular-post-title { color: #e2e8f0 !important; } [data-theme="dark"] .popular-post-title:hover { color: #8b9cf7 !important; } [data-theme="dark"] .popular-post-date { color: #64748b !important; } /* Blog card content */ [data-theme="dark"] .blog-title { color: #e2e8f0 !important; } [data-theme="dark"] .blog-title:hover { color: #8b9cf7 !important; } [data-theme="dark"] .blog-excerpt { color: #94a3b8 !important; } [data-theme="dark"] .blog-meta { color: #64748b !important; } /* Featured post */ [data-theme="dark"] .featured-post-title { color: #e2e8f0 !important; } /* Pagination */ [data-theme="dark"] .pagination a, [data-theme="dark"] .pagination span { border-color: #334155 !important; color: #cbd5e1 !important; } [data-theme="dark"] .pagination a:hover { background: linear-gradient(135deg, #4338ca 0%, #667eea 35%, #764ba2 65%, #9333ea 100%) !important; color: white !important; border-color: #667eea !important; } [data-theme="dark"] .pagination .active { background: linear-gradient(135deg, #4338ca 0%, #667eea 35%, #764ba2 65%, #9333ea 100%) !important; color: white !important; border-color: #667eea !important; } /* Newsletter input */ [data-theme="dark"] .sidebar-widget .form-control { background: #0f172a !important; border-color: #334155 !important; color: #e2e8f0 !important; } /* ======================================== 25. Portfolio Detail Page ======================================== */ /* Section headings */ [data-theme="dark"] .detail-main h2 { color: #e2e8f0 !important; } /* Tech chips */ [data-theme="dark"] .tech-chip { background: #1e293b !important; color: #cbd5e1 !important; border: 1px solid rgba(255, 255, 255, 0.06); } [data-theme="dark"] .tech-chip:hover { background: #334155 !important; } /* Sidebar card */ [data-theme="dark"] .sidebar-card { background: #1e293b !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important; } [data-theme="dark"] .sidebar-card h3 { color: #e2e8f0 !important; border-bottom-color: #334155 !important; } /* Info rows */ [data-theme="dark"] .info-row { border-bottom-color: rgba(255, 255, 255, 0.06) !important; } /* CTA card — keep gradient, fix button */ [data-theme="dark"] .cta-card { background: linear-gradient(135deg, #4338ca 0%, #667eea 35%, #764ba2 65%, #9333ea 100%) !important; } [data-theme="dark"] .btn-white { background: rgba(255, 255, 255, 0.15) !important; color: white !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; backdrop-filter: blur(10px); } [data-theme="dark"] .btn-white:hover { background: rgba(255, 255, 255, 0.25) !important; border-color: rgba(255, 255, 255, 0.4) !important; } /* Related section */ [data-theme="dark"] .related-section { background: #0b1222 !important; } [data-theme="dark"] .related-section h2 { color: #e2e8f0 !important; } [data-theme="dark"] .related-card { background: #1e293b !important; border: 1px solid rgba(255, 255, 255, 0.06); } [data-theme="dark"] .related-card:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important; } [data-theme="dark"] .related-info h4 { color: #e2e8f0 !important; } [data-theme="dark"] .related-info p { color: #94a3b8 !important; } /* ======================================== 26. Outline / Glass Buttons in Dark Mode ======================================== */ [data-theme="dark"] .btn-outline-light:hover { background: rgba(255, 255, 255, 0.15) !important; color: white !important; border-color: rgba(255, 255, 255, 0.4) !important; backdrop-filter: blur(10px); }