/* ============================================================ BONNIEBYTE PC - THEME OVERRIDES (dark-theme.css) Uses data-theme="dark" / "light" on Base.css defines defaults as DARK; this file: - Reinforces dark theme - Provides LIGHT THEME overrides ============================================================ */ /* ------------------------------------------------------------ DARK THEME (explicit, but matches base.css defaults) ------------------------------------------------------------ */ html[data-theme="dark"] { --bb-bg: #0d0d0d; --bb-surface: #111; --bb-panel: #151515; --bb-border: #222; --bb-text: #e5e5e5; --bb-text-soft: #bfbfbf; --bb-text-muted: #999; --bb-blue: #66aaff; } /* Specific dark tweaks if needed */ html[data-theme="dark"] body { background-color: var(--bb-bg); color: var(--bb-text); } html[data-theme="dark"] .site-header { background: rgba(13,13,13,0.95); border-bottom-color: var(--bb-blue); } html[data-theme="dark"] footer { background: var(--bb-panel); border-top-color: var(--bb-blue); } /* ------------------------------------------------------------ LIGHT THEME OVERRIDES (for when user toggles to light mode) ------------------------------------------------------------ */ html[data-theme="light"] { --bb-bg: #f4f4f4; --bb-surface: #ffffff; --bb-panel: #ffffff; --bb-border: #e0e0e0; --bb-text: #222222; --bb-text-soft: #444444; --bb-text-muted: #777777; --bb-blue: #66aaff; } /* Backgrounds & text */ html[data-theme="light"] body { background-color: var(--bb-bg); color: var(--bb-text); } /* Header in light theme */ html[data-theme="light"] .site-header { background: rgba(255,255,255,0.96); border-bottom: 2px solid var(--bb-blue); } html[data-theme="light"] .header-nav a { color: var(--bb-text); } html[data-theme="light"] .header-nav a::after { background: var(--bb-blue); } /* Footer in light theme */ html[data-theme="light"] footer { background: var(--bb-panel); border-top: 2px solid var(--bb-blue); color: var(--bb-text-soft); } /* Sections / panels */ html[data-theme="light"] .section, html[data-theme="light"] .section-products, html[data-theme="light"] .section-why, html[data-theme="light"] .section-story, html[data-theme="light"] .section-warranty, html[data-theme="light"] .section-signup, html[data-theme="light"] .section-community { background: var(--bb-surface); border-color: var(--bb-border); } /* Hero tweaks (light theme) */ html[data-theme="light"] .hero { background-color: #ffffff; color: var(--bb-text); } /* Buttons in light theme still use brand blue */ html[data-theme="light"] .button { background: var(--bb-blue); color: #ffffff; } html[data-theme="light"] .button-secondary, html[data-theme="light"] .button.button-secondary { background: transparent; border-color: var(--bb-blue); color: var(--bb-blue); } /* MailerLite + form fields in light theme */ html[data-theme="light"] .ml-form-embedContainer .ml-form-embedBody .ml-form-fieldRow input { background-color: #ffffff !important; color: var(--bb-text) !important; border-color: var(--bb-blue) !important; } /* Dark theme form variants (to keep consistent) */ html[data-theme="dark"] .ml-form-embedContainer .ml-form-embedBody .ml-form-fieldRow input { background-color: #111 !important; color: var(--bb-text) !important; border-color: var(--bb-blue) !important; } /* Iubenda embeds – match theme background */ html[data-theme="light"] .iubenda-embed { background: #ffffff; color: var(--bb-text-soft); } html[data-theme="dark"] .iubenda-embed { background: #111; color: var(--bb-text-soft); } /* Cookie banners take panel look in both themes */ html[data-theme="light"] .iubenda-consent-ui, html[data-theme="light"] .iucs-consent-ui { background: rgba(255,255,255,0.98) !important; border-color: var(--bb-border) !important; color: var(--bb-text) !important; } html[data-theme="dark"] .iubenda-consent-ui, html[data-theme="dark"] .iucs-consent-ui { background: rgba(13,13,13,0.98) !important; border-color: #444 !important; color: #ffffff !important; }