/* === Dark Theme Overrides for burntai.com (SAFE COMPLETE) === */ /* Apply all rules only when has .dark-theme */ /* 1) Page background + global text (no CSS variables to avoid flicker) */ .dark-theme body { background: #000 !important; color: #f5f5f5 !important; } .dark-theme body::before { display: none !important; } /* Global text tweaks for dark */ .dark-theme p, .dark-theme li, .dark-theme span, .dark-theme small { color: #f5f5f5 !important; } .dark-theme .section-header p, .dark-theme .feature-desc, .dark-theme .news-desc, .dark-theme .hero-subtitle { color: #ccc !important; } /* Improve hero subtitle readability specifically */ .dark-theme .hero-subtitle { color: #ddd !important; text-shadow: 0 1px 4px rgba(0,0,0,.6); } /* 2) Containers & hero */ .dark-theme .main-container { background: #111 !important; box-shadow: 0 -10px 40px rgba(0,0,0,.55) !important; } .dark-theme .platform-section { background: #0d0d0d !important; } .dark-theme .hero { background: linear-gradient( 180deg, rgba(0,0,0,0) 0%, rgba(10,10,10,.7) 50%, rgba(12,12,12,1) 100% ) !important; } /* 3) Cards & panels (base) */ .dark-theme .news-card, .dark-theme .platform-card, .dark-theme .feature-card, .dark-theme .ai-quote-container, .dark-theme .ais-panel { background: #1a1a1a !important; color: #f5f5f5 !important; border: 1px solid #2b2b2b !important; box-shadow: 0 2px 8px rgba(0,0,0,.6) !important; } /* 4) AI News cards — brighter, readable by default (no big hover jump) */ .dark-theme .news-card { background: #171717 !important; /* a touch brighter than other cards */ border: 1px solid #2f2f2f !important; box-shadow: 0 2px 10px rgba(0,0,0,.55) !important; } .dark-theme .news-title a, .dark-theme .news-title a:visited { color: #f2f2f2 !important; text-shadow: 0 1px 2px rgba(0,0,0,.5); } .dark-theme .news-desc { color: #d6d6d6 !important; } .dark-theme .news-provider, .dark-theme .news-date, .dark-theme .news-source { color: #b5b5b5 !important; } /* Ensure nothing is dimmed via opacity */ .dark-theme .news-card, .dark-theme .news-card * { opacity: 1 !important; } /* 5) Buttons (CTA) */ .dark-theme .cta-button { box-shadow: 0 8px 24px rgba(67,97,238,.35) !important; } .dark-theme .cta-button:hover { box-shadow: 0 12px 32px rgba(67,97,238,.45) !important; } /* 6) Footer */ .dark-theme footer { background: #0b0b0b !important; color: #e5e5e5 !important; } .dark-theme .footer-links a { color: #e5e5e5 !important; } /* 7) Subtle hover “lift” for all cards (keeps readability constant) */ .dark-theme .news-card, .dark-theme .platform-card, .dark-theme .feature-card { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .dark-theme .news-card:hover, .dark-theme .platform-card:hover, .dark-theme .feature-card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,0.6); border-color: #3b82f6; /* simple blue accent (stable) */ } /* 8) Smooth theme transitions (works both ways; no variables involved) */ html, body, header, footer, .main-container, .platform-section, .hero, .news-card, .platform-card, .feature-card, .ai-quote-container, .ais-panel, .news-title a, .news-desc, .news-provider, .hero-subtitle { transition: background .35s ease, background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease; } /* Respect users who prefer less motion */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }