/* ============================================================================= FLU - SHARED LIGHT-MODE OVERRIDES Centralised cream-on-white tokens for every shell that loads base.html. Selector contract: body.light-mode (set by the inline script in base.html on + before first paint). Every rule here MUST be scoped under body.light-mode so it never bleeds into the default dark theme. Brand palette (light): primary #E1306C (magenta) accent #F77737 (sunset orange) canvas #f0e6d2 (warm cream) surface #ffffff (white) ink #111827 (near-black) muted #6b7280 (slate) line rgba(0,0,0,0.12) Load AFTER base-shell.css and custom-styles.css so these rules can override or extend without !important where possible. ========================================================================== */ /* --------------------------------------------------------------------------- 1. CSS CUSTOM PROPERTIES (design tokens) --------------------------------------------------------------------------- */ body.light-mode { color-scheme: light; /* Core palette */ --bg-light: #f0e6d2; --text-light: #111827; --text-light-rgb: 17, 24, 39; --card-bg-light: #ffffff; --footer-bg-light: #ffffff; --brand-color-light: #E1306C; --brand-accent-orange: #F77737; --brand-color-light-rgb: 225, 48, 108; /* Surfaces & borders */ --sf-canvas: 248 240 227; --sf-surface: 255 255 255; --sf-ink: 33 37 41; --sf-line: 212 196 176; --sf-paper: 248 240 227; --sf-mist: 243 235 224; /* Brand gradient (light direction) */ --primary-gradient-light: linear-gradient(135deg, #E1306C 0%, #F77737 100%); --card-shadow-light: 0 8px 16px rgba(0, 0, 0, 0.1); /* Admin panel tokens */ --admin-bg: #f2ede4; --admin-bg-secondary: #faf6f0; --admin-bg-tertiary: #f0ebe3; --admin-surface: rgba(250, 246, 240, 0.95); --admin-surface-hover: rgba(242, 237, 228, 0.95); --admin-border: rgba(0, 0, 0, 0.1); --admin-border-hover: rgba(0, 0, 0, 0.2); --admin-text: #1a1a1a; --admin-text-secondary: rgba(0, 0, 0, 0.7); --admin-text-tertiary: rgba(0, 0, 0, 0.5); --admin-gradient-subtle: linear-gradient(135deg, rgba(187, 134, 252, 0.08), rgba(160, 82, 224, 0.04)); --admin-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05); --admin-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08); --admin-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12); } /* --------------------------------------------------------------------------- 2. PAGE SHELL & TYPOGRAPHY --------------------------------------------------------------------------- */ body.light-mode { background-color: var(--bg-light); color: var(--text-light); } body.light-mode h1, body.light-mode h2, body.light-mode h3, body.light-mode h4, body.light-mode h5, body.light-mode h6 { color: var(--text-light); } /* --------------------------------------------------------------------------- 3. NAVBAR & OFFCANVAS --------------------------------------------------------------------------- */ body.light-mode .navbar { background: rgba(255, 255, 255, 0.95) !important; border-bottom: 1px solid rgba(225, 48, 108, 0.1); } body.light-mode .navbar.scrolled { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); border-bottom-color: rgba(225, 48, 108, 0.15); } body.light-mode .navbar-dark { background-color: rgba(248, 249, 250, 0.95) !important; border-bottom-color: rgba(225, 48, 108, 0.1); } body.light-mode .navbar-dark[data-is-guest="1"] { background-color: transparent !important; border-bottom-color: transparent !important; } body.light-mode .navbar[data-is-guest="1"]::before { background-color: rgba(255, 255, 255, 0.72); border-bottom-color: rgba(0, 0, 0, 0.08); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06); } /* Keep pill scroll state: hide full-width scrim when glass moves to .container-fluid */ body.light-mode .navbar[data-is-guest="1"].is-pill::before { opacity: 0; } /* Brand colours */ body.light-mode .navbar-brand { color: var(--brand-accent-orange) !important; } body.light-mode .navbar-brand:hover { color: #ea580c !important; } /* Logo variants */ body.light-mode .navbar-brand-icon--dark, body.light-mode .navbar-brand-wordmark--dark { display: none !important; } body.light-mode .navbar-brand-icon--light { display: block !important; } body.light-mode .navbar-brand-wordmark--light { display: block !important; } /* --------------------------------------------------------------------------- 4. GUEST PILL NAVBAR (floating glassmorphism bar) --------------------------------------------------------------------------- */ body.light-mode .navbar[data-is-guest="1"].is-pill .container-fluid { background: rgba(255, 255, 255, 0.32); border-color: rgba(255, 255, 255, 0.45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 12px 40px rgba(0, 0, 0, 0.10); } /* --------------------------------------------------------------------------- 5. NAVBAR CONTROLS (toggler, bell, icon buttons) --------------------------------------------------------------------------- */ body.light-mode .navbar-toggler { border-color: rgba(225, 48, 108, 0.3); background: rgba(225, 48, 108, 0.1); } body.light-mode .navbar-toggler:hover { border-color: rgba(225, 48, 108, 0.5); background: rgba(225, 48, 108, 0.2); box-shadow: 0 4px 12px rgba(225, 48, 108, 0.3); } body.light-mode .navbar-dark .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(225,48,108,0.88)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } body.light-mode .notif-bell { color: var(--brand-color-light, #E1306C) !important; background: rgba(225, 48, 108, 0.05); border-color: rgba(225, 48, 108, 0.15); } body.light-mode .notif-bell:hover { background: rgba(225, 48, 108, 0.12); border-color: rgba(225, 48, 108, 0.35); color: #be123c !important; } body.light-mode .notif-bell i { color: inherit !important; } body.light-mode .notif-bell:hover i { color: inherit !important; } body.light-mode .notif-badge { border-color: #ffffff; } /* --------------------------------------------------------------------------- 6. MID-LINK NAV (visitor top-bar links) --------------------------------------------------------------------------- */ body.light-mode .navbar-mid-links .nav-link { color: var(--brand-color-light) !important; text-shadow: none; } body.light-mode .navbar-mid-links .nav-link:hover { color: #f06292 !important; } /* --------------------------------------------------------------------------- 7. WORKSPACE PILL & DROPDOWN --------------------------------------------------------------------------- */ body.light-mode .btn-workspace-pill { background: #ffffff; border-color: rgba(0, 0, 0, 0.12); color: var(--text-light); } body.light-mode .btn-workspace-pill:hover, body.light-mode .btn-workspace-pill.show { background: #f7f7fa; border-color: rgba(225, 48, 108, 0.28); } body.light-mode .ws-label-micro { color: #6d6f78; } body.light-mode .ws-name-current { color: #22242a; } body.light-mode .modern-ws-menu { --ws-bg: #ffffff; --ws-border: rgba(0, 0, 0, 0.1); --ws-hover: #f3f4f7; --ws-text: #23242a; --ws-muted: #6d6f78; --ws-brand: #e1306c; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16); } body.light-mode .ws-count { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.1); } body.light-mode .ws-search-input { background: #f6f7f9; border-color: rgba(0, 0, 0, 0.12); color: #2c2d34; } body.light-mode .ws-search-input::placeholder { color: rgba(0, 0, 0, 0.45); } body.light-mode .ws-search-icon { color: rgba(0, 0, 0, 0.45); } body.light-mode .ws-item { color: #23242a; } body.light-mode .ws-item:hover { background: #f3f4f7; color: #111; } body.light-mode .ws-item.active { background: rgba(225, 48, 108, 0.08); border-color: rgba(225, 48, 108, 0.24); color: #23242a; } body.light-mode .ws-item-avatar { background: rgba(0, 0, 0, 0.05); color: #555; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); } body.light-mode .ws-meta-chip { border-color: rgba(0, 0, 0, 0.12); background: rgba(0, 0, 0, 0.03); } body.light-mode .ws-default-badge { border-color: rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.6); } body.light-mode .ws-more-btn { border-color: rgba(0, 0, 0, 0.12); background: rgba(0, 0, 0, 0.03); color: #444; } body.light-mode .ws-row-menu { background: #ffffff; border-color: rgba(0, 0, 0, 0.12); } body.light-mode .ws-row-menu .dropdown-item { color: #333; } body.light-mode .ws-row-menu .dropdown-item:hover, body.light-mode .ws-row-menu .dropdown-item:focus { background: rgba(0, 0, 0, 0.05); color: #111; } body.light-mode .ws-action { color: #60636f; } body.light-mode .ws-action:hover { color: #1f2027; } body.light-mode .ws-action-brand { color: #bd2e64; } body.light-mode .ws-action-brand:hover { color: #e1306c; } body.light-mode .ws-create-btn { border-color: rgba(225, 48, 108, 0.35); color: #bd2e64; background: rgba(225, 48, 108, 0.07); } body.light-mode .ws-create-btn:hover { border-color: rgba(225, 48, 108, 0.5); background: rgba(225, 48, 108, 0.12); color: #991d4d; } body.light-mode .ws-divider { border-color: rgba(0, 0, 0, 0.08); } /* --------------------------------------------------------------------------- 8. THEME TOGGLE SVG --------------------------------------------------------------------------- */ body.light-mode .toggle-wrapper:focus-visible { outline-color: rgba(var(--brand-color-light-rgb), 0.65); } body.light-mode .track-night { fill: #EAE5DD; stroke: #DFDCD6; } /* --------------------------------------------------------------------------- 9. CARDS & SURFACES --------------------------------------------------------------------------- */ body.light-mode .feature-card { background-color: var(--card-bg-light); color: var(--text-light); box-shadow: var(--card-shadow-light); } body.light-mode .feature-card:hover { box-shadow: var(--card-shadow-light); } body.light-mode .feature-icon { color: var(--brand-color-light) !important; } body.light-mode .card-title, body.light-mode .card-text { color: var(--text-light); } /* Generic card surface hardening */ body.light-mode .card { background-color: var(--card-bg-light); color: var(--text-light); border-color: rgba(0, 0, 0, 0.1); } /* --------------------------------------------------------------------------- 10. BUTTONS --------------------------------------------------------------------------- */ body.light-mode .btn-primary-custom { background-color: var(--brand-color-light); border-color: var(--brand-color-light); color: #fff !important; } body.light-mode .btn-primary-custom:hover { background-color: #c7258f; border-color: #a61775; } body.light-mode .btn-outline-light { border-color: rgba(0, 0, 0, 0.25); color: var(--text-light) !important; } body.light-mode .btn-outline-light:hover, body.light-mode .btn-outline-light:focus { border-color: var(--text-light); color: var(--text-light) !important; background-color: rgba(0, 0, 0, 0.05); } body.light-mode .btn-purple { background: var(--brand-color-light); border-color: var(--brand-color-light); color: #fff !important; } body.light-mode .faq-pill-link { border-color: rgba(225, 48, 108, 0.35); color: var(--brand-color-light) !important; } body.light-mode .faq-pill-link:hover { border-color: rgba(225, 48, 108, 0.7); } /* Progressive topbar buttons */ body.light-mode .progressive-topbar .btn-outline-secondary { color: #334155; background: rgba(255, 255, 255, 0.65); border-color: rgba(15, 23, 42, 0.16); } body.light-mode .progressive-topbar .btn-outline-secondary:hover { color: #0f172a; background: #ffffff; border-color: rgba(15, 23, 42, 0.26); } body.light-mode .progressive-topbar .btn-primary { color: #ffffff; background: var(--brand-color-light); border-color: rgba(0, 0, 0, 0.12); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset; } body.light-mode .progressive-topbar .btn-primary:hover { background: #ec3d7a; border-color: rgba(0, 0, 0, 0.16); } body.light-mode .progressive-topbar .btn-primary:active { background: #c92960; } /* --------------------------------------------------------------------------- 11. FORM CONTROLS --------------------------------------------------------------------------- */ body.light-mode .form-control, body.light-mode .form-select, body.light-mode .form-control:focus, body.light-mode .form-select:focus { background-color: var(--card-bg-light); border-color: rgba(0, 0, 0, 0.15); color: var(--text-light); } body.light-mode .form-control:focus, body.light-mode .form-select:focus { border-color: var(--brand-color-light); box-shadow: 0 0 0 0.25rem rgba(225, 48, 108, 0.25); } body.light-mode .form-label, body.light-mode label { color: var(--text-light); } body.light-mode .form-check-input { background-color: var(--card-bg-light); border-color: rgba(0, 0, 0, 0.25); } body.light-mode .form-check-input:checked { background-color: var(--brand-color-light); border-color: var(--brand-color-light); } body.light-mode .form-select option { background-color: var(--card-bg-light); color: var(--text-light); } /* --------------------------------------------------------------------------- 12. TABLES & LIST GROUPS --------------------------------------------------------------------------- */ body.light-mode .table { --bs-table-bg: var(--card-bg-light); --bs-table-color: var(--text-light); --bs-table-border-color: rgba(0, 0, 0, 0.125); --bs-table-striped-bg: rgba(0, 0, 0, 0.025); --bs-table-hover-bg: rgba(0, 0, 0, 0.05); } body.light-mode .table-dark { --bs-table-bg: var(--bg-light); --bs-table-color: var(--text-light); } body.light-mode .list-group-item { background-color: var(--card-bg-light); border-color: rgba(0, 0, 0, 0.125); color: var(--text-light); } body.light-mode .list-group-item:hover { background-color: rgba(0, 0, 0, 0.05); } /* --------------------------------------------------------------------------- 13. MODALS & OVERLAYS --------------------------------------------------------------------------- */ body.light-mode .modal-content { background-color: var(--card-bg-light); border-color: rgba(0, 0, 0, 0.125); color: var(--text-light); } body.light-mode .modal-header { border-bottom-color: rgba(0, 0, 0, 0.125); } body.light-mode .modal-footer { border-top-color: rgba(0, 0, 0, 0.125); } body.light-mode .modal-title { color: var(--text-light); } body.light-mode .modal-backdrop { background-color: rgba(0, 0, 0, 0.5); } /* Close buttons */ body.light-mode .btn-close-white { filter: invert(0); } body.light-mode .modal .btn-close, body.light-mode .alert .btn-close { filter: invert(0); opacity: 0.6; } /* --------------------------------------------------------------------------- 14. ALERTS & BADGES --------------------------------------------------------------------------- */ body.light-mode .alert-success { background-color: rgba(40, 167, 69, 0.1); border-color: rgba(40, 167, 69, 0.2); color: #155724; } body.light-mode .alert-danger { background-color: rgba(220, 53, 69, 0.1); border-color: rgba(220, 53, 69, 0.2); color: #721c24; } body.light-mode .alert-warning { background-color: rgba(255, 193, 7, 0.1); border-color: rgba(255, 193, 7, 0.2); color: #856404; } body.light-mode .alert-info { background-color: rgba(13, 202, 240, 0.1); border-color: rgba(13, 202, 240, 0.2); color: #055160; } body.light-mode .badge.bg-primary { background-color: var(--brand-color-light) !important; } body.light-mode .badge.bg-dark { background-color: var(--text-light) !important; color: var(--bg-light); } /* --------------------------------------------------------------------------- 15. NAVIGATION & PAGINATION --------------------------------------------------------------------------- */ body.light-mode .nav-pills .nav-link { color: var(--text-light); } body.light-mode .nav-pills .nav-link:hover { background-color: rgba(0, 0, 0, 0.05); } body.light-mode .nav-pills .nav-link.active { background-color: var(--brand-color-light); } body.light-mode .pagination .page-link { background-color: var(--card-bg-light); border-color: rgba(0, 0, 0, 0.125); color: var(--text-light); } body.light-mode .pagination .page-link:hover { background-color: rgba(0, 0, 0, 0.05); border-color: var(--brand-color-light); } body.light-mode .pagination .page-item.active .page-link { background-color: var(--brand-color-light); border-color: var(--brand-color-light); } /* Breadcrumbs */ body.light-mode .breadcrumb-item + .breadcrumb-item::before { color: var(--text-light); } body.light-mode .breadcrumb-item a { color: var(--brand-color-light); } body.light-mode .breadcrumb-item.active { color: var(--text-light); } /* --------------------------------------------------------------------------- 16. SPINNERS & LOADERS --------------------------------------------------------------------------- */ body.light-mode .spinner-border, body.light-mode .spinner-grow { color: var(--brand-color-light); } body.light-mode .loading-overlay { background-color: rgba(255, 255, 255, 0.8); } /* --------------------------------------------------------------------------- 17. HERO & LANDING SECTIONS --------------------------------------------------------------------------- */ body.light-mode .hero { background: var(--primary-gradient-light); color: #fff; } /* --------------------------------------------------------------------------- 18. FOOTER --------------------------------------------------------------------------- */ body.light-mode .footer { background-color: var(--footer-bg-light); color: var(--text-light); border-top: 1px solid rgba(var(--text-light-rgb), 0.08); } body.light-mode .footer .social-icon { border-color: rgba(15, 23, 42, 0.15); background: rgba(15, 23, 42, 0.04); color: #0f172a; } body.light-mode .footer .social-icon:hover { box-shadow: 0 12px 25px rgba(15, 23, 42, 0.2); } body.light-mode .footer .social-icon.x, body.light-mode .footer .social-icon.x:visited { border-color: rgba(15, 23, 42, 0.15); background: rgba(15, 23, 42, 0.04); color: #000000; } body.light-mode .footer .social-icon.x i { color: #000000; } body.light-mode .footer .social-icon.x:hover { background: #000000; border-color: #000000; color: #ffffff; } body.light-mode .footer .social-icon.x:hover i { color: #ffffff; } body.light-mode .footer .newsletter button { background-color: var(--brand-color-light); } body.light-mode .footer .newsletter button:hover { background-color: #c7258f; } /* --------------------------------------------------------------------------- 19. POST CONTAINER (Instagram-like preview) --------------------------------------------------------------------------- */ body.light-mode .post-container { background-color: #fff; border: 1px solid #dbdbdb; } body.light-mode .post-header .username { color: var(--text-light); } body.light-mode .post-header .options { color: var(--text-light); } body.light-mode .post-actions i { color: var(--text-light); } body.light-mode .post-actions i:hover { color: #e1306c; } body.light-mode .post-likes { color: var(--text-light); } body.light-mode .post-caption { color: var(--text-light); } /* --------------------------------------------------------------------------- 20. PLAN CARDS & PRICING --------------------------------------------------------------------------- */ body.light-mode .plan-card { background-color: var(--card-bg-light); box-shadow: var(--card-shadow-light); } body.light-mode .plan-card .card-title, body.light-mode .plan-card .plan-price, body.light-mode .plan-card .plan-details, body.light-mode .plan-card ul li { color: var(--text-light); } body.light-mode .plan-price { color: var(--brand-color-light); } body.light-mode .plan-price .fs-6 { color: var(--text-light); } body.light-mode .premium-plan { border: 3px solid var(--brand-color-light); box-shadow: 0 0 20px rgba(225, 48, 108, 0.5); } body.light-mode .premium-plan ul li, body.light-mode .plan-card ul li, body.light-mode .plan-card .card-body > div > ul > li { color: var(--text-light); } /* --------------------------------------------------------------------------- 21. PLATFORM CARDS & GENERATION FORMS --------------------------------------------------------------------------- */ body.light-mode .generate-container { background-color: #e6e6e6; color: var(--text-light); } body.light-mode .platform-specific-form { background-color: var(--card-bg-light); border: 1px solid rgba(0, 0, 0, 0.125); color: var(--text-light); } body.light-mode .platform-specific-form .form-label { color: var(--text-light); } body.light-mode .models-section { background-color: #ffffff; } body.light-mode .model-card { background-color: var(--card-bg-light); } body.light-mode .model-card-title { color: var(--text-light); } body.light-mode .model-icon { color: var(--brand-color-light) !important; } /* --------------------------------------------------------------------------- 22. NOTIFICATIONS PANEL --------------------------------------------------------------------------- */ body.light-mode .sf-notif-item { background: #ffffff; border-color: rgba(225, 48, 108, 0.08); box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04); } body.light-mode .sf-notif-item:hover { border-color: rgba(225, 48, 108, 0.25); box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08); } body.light-mode .sf-notif-unread { background: rgba(225, 48, 108, 0.06); border-left-color: var(--brand-color-light, #E1306C); } body.light-mode .sf-notif-title { color: #0f172a !important; } body.light-mode .sf-notif-body { color: rgba(51, 65, 85, 0.88) !important; } body.light-mode .sf-notif-time { color: rgba(71, 85, 105, 0.72) !important; } body.light-mode .sf-notif-icon { background: rgba(225, 48, 108, 0.1); border-color: rgba(225, 48, 108, 0.2); color: var(--brand-color-light, #E1306C) !important; } body.light-mode .sf-notif-item:hover .sf-notif-icon { border-color: rgba(225, 48, 108, 0.4); } body.light-mode .sf-notif-item [data-action="mark-read"] { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.1); color: rgba(26, 26, 26, 0.6) !important; } body.light-mode .sf-notif-item [data-action="mark-read"]:hover { background: rgba(225, 48, 108, 0.12); border-color: rgba(225, 48, 108, 0.35); color: #c81e4a !important; } body.light-mode .sf-notif-actions .btn-link { color: rgba(51, 65, 85, 0.85) !important; background: rgba(248, 250, 252, 0.9); border-color: rgba(148, 163, 184, 0.35); } body.light-mode .sf-notif-actions .btn-link:hover { color: #c81e4a !important; background: rgba(225, 48, 108, 0.08); border-color: rgba(225, 48, 108, 0.25); } body.light-mode .sf-notif-actions .btn-outline-secondary { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.2); color: rgba(26, 26, 26, 0.8) !important; } body.light-mode .sf-notif-actions .btn-outline-secondary:hover { background: rgba(0, 0, 0, 0.1); border-color: rgba(0, 0, 0, 0.3); } /* Notification dropdown shell */ body.light-mode .notif-menu { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.04); } body.light-mode .notif-menu-scroll::-webkit-scrollbar-thumb { background: rgba(225, 48, 108, 0.22); } body.light-mode .notif-menu-scroll::-webkit-scrollbar-thumb:hover { background: rgba(225, 48, 108, 0.35); } body.light-mode .notif-menu-header { background: #ffffff; border-bottom-color: rgba(0, 0, 0, 0.06); } body.light-mode .notif-menu .dropdown-divider { border-color: rgba(0, 0, 0, 0.08); } body.light-mode .notif-menu .notif-footer { background: #fafafa; border-top-color: rgba(0, 0, 0, 0.06); } body.light-mode .notif-menu .notif-empty { background: rgba(225, 48, 108, 0.04); color: #64748b; } body.light-mode .notif-local-header { color: #6c7280; } body.light-mode .notif-reel-progress { background: rgba(0, 0, 0, 0.08); } body.light-mode .notif-reel-progress span { background: var(--primary-gradient-light, linear-gradient(135deg, #E1306C 0%, #F77737 100%)); } body.light-mode .notif-menu .btn-link { color: #64748b !important; } body.light-mode .notif-menu .btn-link:hover { color: var(--brand-color-light, #E1306C) !important; background: rgba(225, 48, 108, 0.08); } /* --------------------------------------------------------------------------- 23. REEL PROGRESS INDICATOR --------------------------------------------------------------------------- */ body.light-mode .reel-progress-btn { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.75); } body.light-mode .reel-progress-spinner { border-color: rgba(0, 0, 0, 0.2); border-top-color: #E1306C; } body.light-mode .reel-progress-count { color: #fff; background: linear-gradient(135deg, rgba(225, 48, 108, 0.45), rgba(16, 185, 129, 0.35)); } body.light-mode .reel-indicator-hint { background: rgba(255, 255, 255, 0.95); color: rgba(0, 0, 0, 0.8); border-color: rgba(0, 0, 0, 0.08); } /* --------------------------------------------------------------------------- 24. X (TWITTER) LOGO --------------------------------------------------------------------------- */ body.light-mode .x-logo-navbar::before { background: #000; } /* --------------------------------------------------------------------------- 25. STYLE BUTTONS (AI style picker) --------------------------------------------------------------------------- */ body.light-mode .style-button { background-color: var(--card-bg-light); color: var(--text-light); border: 1px solid rgba(0, 0, 0, 0.15); } body.light-mode .style-button:hover { background-color: rgba(0, 0, 0, 0.05); } body.light-mode .style-button.selected-style { background-color: var(--brand-color-light) !important; color: white !important; border-color: var(--brand-color-light) !important; } /* --------------------------------------------------------------------------- 26. SOCIAL CONNECTIONS --------------------------------------------------------------------------- */ body.light-mode .social-header-icon { color: var(--brand-color-light, #e1306c) !important; } body.light-mode .social-pulse-dot { background: var(--brand-color-light, #e1306c); } body.light-mode .social-network-item:hover { background: rgba(0, 0, 0, 0.03); } body.light-mode .social-network-item.connected { background: rgba(0, 0, 0, 0.03); } body.light-mode .social-network-name { color: var(--text-light, #212529); } body.light-mode .social-network-status-text { color: rgba(0, 0, 0, 0.5); } /* --------------------------------------------------------------------------- 27. IMAGE HISTORY DROPDOWN --------------------------------------------------------------------------- */ body.light-mode .image-history-dropdown { background: #fff !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; } body.light-mode .image-history-dropdown .dropdown-header { color: #1f2937; border-bottom-color: rgba(0, 0, 0, 0.12); } body.light-mode .image-history-thumbnail { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); } body.light-mode .image-history-actions { border-top-color: rgba(0, 0, 0, 0.08); } /* --------------------------------------------------------------------------- 28. MULTI-IMAGE UPLOADER --------------------------------------------------------------------------- */ body.light-mode .multi-thumb { border-color: rgba(0, 0, 0, 0.15); background: rgba(0, 0, 0, 0.03); } body.light-mode .multi-thumb-actions { background: rgba(0, 0, 0, 0.3); } body.light-mode .multi-thumb-btn { background: rgba(255, 255, 255, 0.8); color: #000; } /* --------------------------------------------------------------------------- 29. UTILITY OVERRIDES (Bootstrap classes that need light-mode correction) --------------------------------------------------------------------------- */ /* Text utilities */ body.light-mode .text-white, body.light-mode .text-light { color: var(--text-light) !important; } body.light-mode .text-white-50, body.light-mode .text-light-50 { color: rgba(var(--text-light-rgb), 0.68) !important; } body.light-mode .text-white-mode { color: var(--text-light); } body.light-mode .text-violet, body.light-mode .text-purple { color: var(--brand-color-light) !important; } body.light-mode .text-muted { color: rgba(var(--text-light-rgb), 0.6) !important; } body.light-mode .text-dark { color: var(--text-light) !important; } /* Background utilities */ body.light-mode .bg-dark, body.light-mode .bg-black { background-color: var(--card-bg-light) !important; color: var(--text-light) !important; } body.light-mode .bg-light { background-color: #f0e6d2 !important; } body.light-mode .bg-gradient-violet { background: var(--primary-gradient-light) !important; } /* Border utilities */ body.light-mode .border-secondary { border-color: rgba(148, 163, 184, 0.4) !important; } /* Separators */ body.light-mode hr.my-4 { border-color: rgba(0, 0, 0, 0.1); } /* --------------------------------------------------------------------------- 30. BOOTSTRAP COMPONENT HARDENING Handles inline styles and bg-dark utility classes that pages apply directly. --------------------------------------------------------------------------- */ body.light-mode .modal-content[style*="background:#2a2a2a"], body.light-mode .modal-content[style*="background: #2a2a2a"], body.light-mode .modal-content[style*="background:#111"], body.light-mode .modal-content[style*="background: #111"], body.light-mode .modal-content[style*="background:#000"], body.light-mode .modal-content[style*="background: #000"] { background-color: var(--card-bg-light) !important; color: var(--text-light) !important; border-color: rgba(148, 163, 184, 0.35) !important; } body.light-mode .form-control.bg-dark, body.light-mode .form-select.bg-dark, body.light-mode textarea.bg-dark, body.light-mode input.bg-dark, body.light-mode select.bg-dark { background-color: #ffffff !important; color: var(--text-light) !important; border-color: rgba(148, 163, 184, 0.45) !important; } body.light-mode .input-group-text.bg-dark { background-color: #f8fafc !important; color: var(--text-light) !important; border-color: rgba(148, 163, 184, 0.45) !important; } /* Keep white text on explicitly coloured components */ body.light-mode .btn.text-white, body.light-mode .badge.text-white, body.light-mode .toast.text-white, body.light-mode .alert.text-white, body.light-mode .modal-header.text-white, body.light-mode .card-header.text-white, body.light-mode .bg-primary.text-white, body.light-mode .bg-success.text-white, body.light-mode .bg-danger.text-white, body.light-mode .bg-info.text-white { color: #fff !important; } /* --------------------------------------------------------------------------- 31. CHAR COUNTER & FORM HELPERS --------------------------------------------------------------------------- */ body.light-mode .char-counter { color: #777; } body.light-mode .form-check-label { color: var(--text-light); } body.light-mode .assistant-info { color: var(--brand-color-light, #9147ff); } body.light-mode .form-text { color: rgba(var(--text-light-rgb), 0.7); } body.light-mode .form-floating > label { color: rgba(var(--text-light-rgb), 0.7); } body.light-mode .form-floating > .form-control:focus ~ label, body.light-mode .form-floating > .form-control:not(:placeholder-shown) ~ label { color: var(--brand-color-light); } /* --------------------------------------------------------------------------- 32. PRICING & MISC TEXT --------------------------------------------------------------------------- */ body.light-mode .price-note { color: #555; } body.light-mode .plan-section-subtitle { color: #6b7280; } /* --------------------------------------------------------------------------- 33. MODERN MODALS (shared across home, progressive_products, etc.) --------------------------------------------------------------------------- */ body.light-mode .modal-modern { background: var(--card-bg-light, #ffffff); border-color: #e5e5e5; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12); } body.light-mode .modal-modern .modal-header { border-bottom-color: rgba(0, 0, 0, 0.06); } body.light-mode .modal-modern .modal-header::after { background: linear-gradient(90deg, transparent 0%, rgba(var(--brand-color-light-rgb, 99, 102, 241), 0.2) 50%, transparent 100%); } body.light-mode .modal-modern .modal-header .modal-title { color: var(--text-light, #1f2937); } body.light-mode .modal-modern .modal-header .btn-close { filter: none; opacity: 0.6; } body.light-mode .modal-modern .modal-body { color: var(--text-light, #374151); } body.light-mode .modal-modern .modal-footer { background: rgba(0, 0, 0, 0.02); border-top-color: rgba(0, 0, 0, 0.06); } body.light-mode .modal-modern .btn-secondary { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.1); color: #666666; } body.light-mode .modal-modern .btn-secondary:hover { background: rgba(0, 0, 0, 0.08); color: #333333; } body.light-mode .modal-modern .form-control, body.light-mode .modal-modern .form-select { background: #f8f9fa; border-color: #e5e5e5; color: var(--text-light, #1f2937); } body.light-mode .modal-modern .form-control:focus, body.light-mode .modal-modern .form-select:focus { background: #ffffff; border-color: var(--brand-color-light, #6366f1); }