/* Light theme overrides. The site ships dark by default; when is set, these variables and component overrides lighten the main content area. The sidebar/topbar stay dark. */ [data-bs-theme="light"] { --bs-body-bg: #f5f6f8; --bs-body-color: #1c2330; --bs-emphasis-color: #000; --bs-secondary-color: rgba(28, 35, 48, 0.72); --bs-secondary-bg: #e9ecf1; --bs-tertiary-bg: #ffffff; --bs-tertiary-color: rgba(28, 35, 48, 0.6); --bs-border-color: #d8dde5; --bs-heading-color: #141a24; --bs-link-color: #0a58ca; --bs-link-hover-color: #084298; --bs-code-color: #b02a5b; --bs-dark: #e9ecf1; --bs-dark-rgb: 233, 236, 241; --bs-light: #1c2330; --bs-light-rgb: 28, 35, 48; } [data-bs-theme="light"] body { background-color: var(--bs-body-bg); color: var(--bs-body-color); } [data-bs-theme="light"] .card { --bs-card-bg: #ffffff; --bs-card-color: var(--bs-body-color); --bs-card-border-color: var(--bs-border-color); --bs-card-cap-bg: #f0f2f6; color: var(--bs-body-color); } [data-bs-theme="light"] .modal-content, [data-bs-theme="light"] .dropdown-menu:not(.app-sidebar .dropdown-menu), [data-bs-theme="light"] .list-group-item, [data-bs-theme="light"] .accordion-item, [data-bs-theme="light"] .toast { background-color: #ffffff; color: var(--bs-body-color); border-color: var(--bs-border-color); } [data-bs-theme="light"] .form-control, [data-bs-theme="light"] .form-select, [data-bs-theme="light"] .input-group-text { background-color: #ffffff; color: var(--bs-body-color); border-color: #c7cdd8; } [data-bs-theme="light"] .form-control::placeholder { color: rgba(28, 35, 48, 0.45); } [data-bs-theme="light"] .form-control:focus, [data-bs-theme="light"] .form-select:focus { background-color: #ffffff; color: var(--bs-body-color); } [data-bs-theme="light"] .table { --bs-table-bg: #ffffff; --bs-table-color: var(--bs-body-color); --bs-table-border-color: var(--bs-border-color); --bs-table-striped-bg: #f5f6f8; --bs-table-hover-bg: #eef0f4; } [data-bs-theme="light"] .text-muted, [data-bs-theme="light"] .form-text { color: rgba(28, 35, 48, 0.62) !important; } [data-bs-theme="light"] .text-white:not(.badge):not(.btn) { color: #141a24 !important; } [data-bs-theme="light"] .text-light:not(.badge):not(.btn) { color: #1c2330 !important; } [data-bs-theme="light"] .bg-dark { background-color: #e9ecf1 !important; color: var(--bs-body-color); } [data-bs-theme="light"] .badge.bg-dark { background-color: #343d4d !important; color: #fff; } [data-bs-theme="light"] .btn-outline-light { --bs-btn-color: #1c2330; --bs-btn-border-color: #8b94a3; --bs-btn-hover-bg: #e2e6ec; --bs-btn-hover-color: #141a24; --bs-btn-hover-border-color: #6d7686; } [data-bs-theme="light"] .btn-outline-warning { --bs-btn-color: #8a6d00; --bs-btn-hover-color: #000; } [data-bs-theme="light"] .btn-dark { --bs-btn-bg: #232b3a; --bs-btn-border-color: #232b3a; --bs-btn-color: #fff; --bs-btn-hover-bg: #333e52; --bs-btn-hover-border-color: #333e52; --bs-btn-hover-color: #fff; } [data-bs-theme="light"] .alert-secondary { background-color: #eef0f4; color: var(--bs-body-color); border-color: var(--bs-border-color); } /* Footer (uses bg dark vars in the dark stylesheet) */ [data-bs-theme="light"] footer, [data-bs-theme="light"] .site-footer { background-color: #e9ecf1 !important; color: var(--bs-body-color); } /* Keep the app sidebar and topbar dark in light mode for contrast */ [data-bs-theme="light"] .app-sidebar, [data-bs-theme="light"] .app-topbar { color-scheme: dark; } /* Conversion banners: light tinted versions instead of dark gradients */ [data-bs-theme="light"] .conversion-banner { color: var(--bs-body-color); } [data-bs-theme="light"] .conversion-banner-success { background: linear-gradient(135deg, #e6f5ec 0%, #d7eee0 100%); border-color: #28a745; } [data-bs-theme="light"] .conversion-banner-warning { background: linear-gradient(135deg, #fdf6dd 0%, #f8eec4 100%); border-color: #d4a900; } [data-bs-theme="light"] .conversion-banner-info { background: linear-gradient(135deg, #e3eef8 0%, #d5e5f4 100%); border-color: #17a2b8; } [data-bs-theme="light"] .conversion-banner-upgrade { background: linear-gradient(135deg, #f1e6f9 0%, #e7d7f4 100%); border-color: #9b59b6; } [data-bs-theme="light"] .conversion-banner .text-warning { color: #8a6d00 !important; } [data-bs-theme="light"] .conversion-banner .border-secondary { border-color: var(--bs-border-color) !important; } /* Feature lock + upsell cards */ [data-bs-theme="light"] .feature-lock-card { background: #f0f2f6; border-color: #c7cdd8; color: var(--bs-body-color); } [data-bs-theme="light"] .soft-upsell-banner { background: linear-gradient(135deg, #e6eef6 0%, #dbe6f1 100%); border-color: #9db8d6; color: var(--bs-body-color); } [data-bs-theme="light"] .daily-limit-upgrade-card .card { background: linear-gradient(135deg, #fdf6dd 0%, #f8eec4 100%) !important; color: var(--bs-body-color); } /* Results page: caption + hashtag cards */ [data-bs-theme="light"] .caption-card { background: linear-gradient(135deg, #eef2fa 0%, #e3eaf7 100%); border-color: #b9c6de; } [data-bs-theme="light"] .caption-card .card-header { background: rgba(20, 26, 36, 0.04); border-bottom-color: #b9c6de; } [data-bs-theme="light"] .caption-text { color: #1c2330; } [data-bs-theme="light"] .hashtag-card { background: linear-gradient(135deg, #e8f4ed 0%, #ddefe5 100%); border-color: #9fcdb2; } [data-bs-theme="light"] .hashtag-card .card-header { background: rgba(20, 26, 36, 0.04); border-bottom-color: #9fcdb2; } [data-bs-theme="light"] .hashtag-tag { color: #0c6b45; } /* Cards with hardcoded dark inline backgrounds (e.g. dashboard stats) */ [data-bs-theme="light"] .card[style*="#1c2333"], [data-bs-theme="light"] .card[style*="#1a1a1a"], [data-bs-theme="light"] .card[style*="#141414"] { background-color: #ffffff !important; border: 1px solid var(--bs-border-color) !important; } /* Cookie banner keeps its dark background: force light text */ [data-bs-theme="light"] #cookieConsentBanner { color: #f5f6f8; } [data-bs-theme="light"] #cookieConsentBanner h6, [data-bs-theme="light"] #cookieConsentBanner p { color: #f5f6f8; } [data-bs-theme="light"] #cookieConsentBanner .text-muted { color: rgba(245, 246, 248, 0.7) !important; } /* Creators landing page cards (hardcoded dark gradients) */ [data-bs-theme="light"] .creator-card { background: #ffffff; border-color: var(--bs-border-color); } [data-bs-theme="light"] .creator-card:hover { border-color: #d4a900; box-shadow: 0 10px 30px rgba(20, 26, 36, 0.12); } [data-bs-theme="light"] .creator-icon { background: rgba(212, 169, 0, 0.14); color: #8a6d00; } [data-bs-theme="light"] .creator-section.bg-dark { background-color: #e9ecf1 !important; } /* Theme switcher control (Appearance section on the profile page) */ .theme-switcher { display: flex; gap: 6px; } .theme-switcher .btn { flex: 1; padding: 6px 0; font-size: 0.85rem; color: var(--bs-body-color); border: 1px solid var(--bs-border-color); background: transparent; } .theme-switcher .btn:hover { background: var(--bs-secondary-bg); } .theme-switcher .btn.active { background: rgba(255, 215, 0, 0.15); border-color: #ffd700; color: #b8860b; } [data-bs-theme="dark"] .theme-switcher .btn.active { color: #ffd700; }