/* ============================================ BradlyOS – DARK MODE THEME Applied via [data-theme="dark"] on ============================================ */ [data-theme="dark"] { /* Dashboard variables */ --bos-bg: #0C0F1A; --bos-bg-warm: #10131F; --bos-card-bg: #161A2B; --bos-sidebar-bg: #111526; --bos-hover: #1C2035; --bos-text: #E8ECF4; --bos-text-secondary: #B0B8CC; --bos-text-muted: #7A839B; --bos-text-light: #4F5672; --bos-border: #232840; --bos-border-light: #1A1F35; --bos-success-light: rgba(5,150,105,0.15); --bos-danger-light: rgba(220,38,38,0.15); --bos-warning-light: rgba(217,119,6,0.15); --bos-gradient-soft: linear-gradient(135deg, rgba(249,115,22,0.12), rgba(225,29,72,0.08)); --bos-shadow-sm: 0 1px 2px rgba(0,0,0,0.2); --bos-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2); --bos-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.35), 0 2px 4px -2px rgba(0,0,0,0.2); --bos-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px -4px rgba(0,0,0,0.25); --bos-shadow-glow: 0 0 20px rgba(249,115,22,0.2); /* Landing page variables — override for dark */ --lp-text: #E8ECF4; --lp-text-secondary: #B0B8CC; --lp-text-muted: #7A839B; --lp-bg: #0C0F1A; --lp-bg-alt: #10131F; --lp-border: #232840; } /* Fix select dropdown arrow color in dark mode */ [data-theme="dark"] .bos-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237A839B' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); } /* Fix select option background */ [data-theme="dark"] .bos-select option { background: var(--bos-card-bg); color: var(--bos-text); } /* Selection color in dark mode */ [data-theme="dark"] ::selection { background: rgba(249,115,22,0.25); } /* Mobile toggle in dark mode */ [data-theme="dark"] .bos-mobile-toggle { box-shadow: var(--bos-shadow-lg); } /* Score circle background fix */ [data-theme="dark"] .score-ring span, [data-theme="dark"] .score-circle span { background: var(--bos-card-bg) !important; } /* ============================================ THEME TOGGLE SWITCH (Dashboard sidebar) ============================================ */ .bos-theme-toggle { display: flex; align-items: center; gap: 10px; margin: 4px 12px 8px; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--bos-border); background: var(--bos-bg); cursor: pointer; transition: all 0.2s ease; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--bos-text-secondary); width: calc(100% - 24px); } .bos-theme-toggle:hover { background: var(--bos-hover); border-color: var(--bos-text-light); } .bos-theme-toggle .toggle-track { width: 36px; height: 20px; border-radius: 10px; background: var(--bos-border); position: relative; transition: background 0.25s ease; flex-shrink: 0; margin-left: auto; } .bos-theme-toggle .toggle-thumb { width: 16px; height: 16px; border-radius: 50%; background: white; position: absolute; top: 2px; left: 2px; transition: transform 0.25s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.15); } [data-theme="dark"] .bos-theme-toggle .toggle-track { background: var(--bos-primary); } [data-theme="dark"] .bos-theme-toggle .toggle-thumb { transform: translateX(16px); } .bos-theme-toggle .toggle-label { flex: 1; } /* ============================================ LANDING PAGE — DARK MODE OVERRIDES ============================================ */ [data-theme="dark"] .bos-landing-body { background: #0C0F1A; color: #E8ECF4; } [data-theme="dark"] .lp-nav { background: rgba(12,15,26,0.92); border-bottom-color: #232840; } [data-theme="dark"] .lp-nav-links a { color: #B0B8CC; } [data-theme="dark"] .lp-nav-links a:hover { color: #E8ECF4; } [data-theme="dark"] .lp-theme-btn { border-color: #232840; } [data-theme="dark"] .lp-theme-btn:hover { border-color: #F97316; background: rgba(249,115,22,0.08); } [data-theme="dark"] .lp-hero { background: linear-gradient(180deg, #10131F 0%, #0C0F1A 100%); } [data-theme="dark"] .lp-hero-stat .num { color: #E8ECF4; } [data-theme="dark"] .lp-feature-card { background: #161A2B; border-color: #232840; } [data-theme="dark"] .lp-feature-card:hover { border-color: rgba(249,115,22,0.3); box-shadow: 0 12px 24px rgba(0,0,0,0.2); } [data-theme="dark"] .lp-feature-card h3 { color: #E8ECF4; } [data-theme="dark"] .lp-feature-card p { color: #7A839B; } [data-theme="dark"] .lp-feature-icon { background: rgba(255,255,255,0.06) !important; } [data-theme="dark"] .lp-step h4 { color: #E8ECF4; } [data-theme="dark"] .lp-step p { color: #7A839B; } [data-theme="dark"] .lp-price-card { background: #161A2B; border-color: #232840; } [data-theme="dark"] .lp-price-card:hover { box-shadow: 0 12px 24px rgba(0,0,0,0.2); } [data-theme="dark"] .lp-price-card.popular { border-color: #F97316; box-shadow: 0 0 0 1px #F97316, 0 8px 24px rgba(249,115,22,0.15); } [data-theme="dark"] .lp-price-card h3 { color: #E8ECF4; } [data-theme="dark"] .lp-price-amount { color: #E8ECF4; } [data-theme="dark"] .lp-price-features li { color: #B0B8CC; } [data-theme="dark"] .lp-cta { background: linear-gradient(135deg, rgba(249,115,22,0.12), rgba(225,29,72,0.08)); } [data-theme="dark"] .lp-cta h2 { color: #E8ECF4; } [data-theme="dark"] .lp-cta p { color: #B0B8CC; } [data-theme="dark"] .lp-btn-secondary { background: #161A2B; color: #E8ECF4; border-color: #232840; } [data-theme="dark"] .lp-btn-secondary:hover { border-color: #4F5672; } [data-theme="dark"] .lp-footer { border-top-color: #232840; color: #4F5672; } /* ============================================ SMOOTH THEME TRANSITION ============================================ */ body.bos-dashboard-body, body.bos-landing-body, .bos-sidebar, .bos-main, .bos-card, .bos-stat-card, .bos-result-item, .bos-nav-item, .bos-input, .bos-textarea, .bos-select, .bos-trend-card, .bos-pricing-card, .bos-calendar-day, .bos-calendar-post, .bos-toast, .lp-nav, .lp-feature-card, .lp-price-card, .lp-cta, .lp-hero, .lp-section-alt { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; }