/* ===================================================================== QUIZLINO – LIGHT THEME VISIBILITY FIX Loaded after style.css. Only active when . Dark mode is untouched. ===================================================================== */ /* ---------- 1. Light-mode colour tokens (darker accents for white bg) --- */ html[data-theme="light"] { --gold: #b7791f; --cyan: #0e7490; --primary-hover: #7c3aed; --bs-secondary-color: var(--text-secondary); color-scheme: light; } /* ---------- 2. "Dark islands" -------------------------------------------- Image cards, sliders, banners, coloured buttons etc. keep their dark / coloured background in light mode, so their text must stay light. Re-declaring the text tokens here makes every var(--text-primary), .text-white, .text-muted, .card text etc. inside them turn light again. */ html[data-theme="light"] :is( .hero-stack-card, .featured-slider, .featured-slide, .home-cat-tile, .cat-carousel-card, .category-card-v2, .qz-hard-card, .qz-spotlight-card, .qz-trend-rank, .category-banner-v2, .category-banner-image, .article-quiz-banner, .level-selection-container, .sci-fi-question-box-inner, .quiz-option.sci-fi-option .option-inner, .qz-hscroll-arrow, .game-rating-badge, .combo-popup, .announcement-bar, .slide-tile, .live-vs-badge, .podium-rank-badge, .btn-primary, .btn-guest, .btn-success, .btn-danger, .btn-info, .bg-primary, .bg-success, .bg-danger, .bg-info, [style*="linear-gradient(135deg, #"], [style*="linear-gradient(135deg,#"], [style*="rgba(15, 7, 40"], .alert[style*="0.95)"] ) { --text-primary: #f8fafc; --text-secondary: #cbd5e1; --gold: #f5b942; --cyan: #22d3ee; --primary-hover: #a78bfa; } html[data-theme="light"] :is( .hero-stack-card, .featured-slider, .home-cat-tile, .cat-carousel-card, .category-card-v2, .qz-hard-card, .qz-spotlight-card, .category-banner-v2, .article-quiz-banner, .level-selection-container, .sci-fi-question-box-inner ) :is(.text-warning) { color: #ffc107 !important; } /* Profile hero cards (user/admin profile) keep their deep-purple look */ html[data-theme="light"] .card[style*="rgba(15, 7, 40"] { background: linear-gradient(135deg, #2a1a5e, #3b2080) !important; color: #f8fafc !important; } /* Coloured buttons: always white label */ html[data-theme="light"] :is(.btn-primary, .btn-guest, .btn-success, .btn-danger, .btn-info).text-white, html[data-theme="light"] :is(.btn-primary, .btn-guest, .btn-success, .btn-danger, .btn-info) { color: #ffffff !important; } /* Avatars / chips that carry their own gradient background */ html[data-theme="light"] .rounded-circle.text-white, html[data-theme="light"] [style*="linear-gradient"].text-white, html[data-theme="light"] .btn.text-white:not(.btn-outline-light) { color: #ffffff !important; } /* Hero stack tag ("🔥 Trending") – was dark text on dark pill */ html[data-theme="light"] .hero-stack-tag, html[data-theme="light"] .qz-spotlight-tag { color: #ffffff !important; } /* ---------- 3. Navbar ---------------------------------------------------- */ html[data-theme="light"] .navbar-brand { background: linear-gradient(135deg, #7c3aed, #db2777); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } html[data-theme="light"] .navbar .nav-link.active { color: var(--primary) !important; } html[data-theme="light"] .navbar-toggler-icon { filter: invert(1) brightness(0.35); } html[data-theme="light"] .navbar-collapse { background: #ffffff; border-color: rgba(139, 92, 246, 0.2); box-shadow: 0 12px 30px rgba(60, 40, 120, 0.12); } @media (min-width: 992px) { html[data-theme="light"] .navbar-collapse { background: transparent; box-shadow: none; } } html[data-theme="light"] .dropdown-menu, html[data-theme="light"] .dropdown-menu-dark { --bs-dropdown-bg: #ffffff; --bs-dropdown-color: var(--text-primary); --bs-dropdown-link-color: var(--text-primary); --bs-dropdown-link-hover-color: var(--primary); --bs-dropdown-link-hover-bg: rgba(139, 92, 246, 0.08); --bs-dropdown-link-active-bg: var(--primary); --bs-dropdown-border-color: rgba(139, 92, 246, 0.2); --bs-dropdown-divider-bg: rgba(139, 92, 246, 0.15); background-color: #ffffff !important; border: 1px solid rgba(139, 92, 246, 0.2) !important; box-shadow: 0 12px 30px rgba(60, 40, 120, 0.12); } html[data-theme="light"] .dropdown-item { color: var(--text-primary) !important; } html[data-theme="light"] .dropdown-item:hover, html[data-theme="light"] .dropdown-item:focus { color: var(--primary) !important; background: rgba(139, 92, 246, 0.08) !important; } html[data-theme="light"] #soundToggleBtn, html[data-theme="light"] .navbar a[title="Search"] { background: rgba(139, 92, 246, 0.1) !important; border-color: rgba(139, 92, 246, 0.25) !important; } /* Mobile bottom nav */ html[data-theme="light"] .mobile-bottom-nav { background: rgba(255, 255, 255, 0.97); border-top-color: rgba(139, 92, 246, 0.2); box-shadow: 0 -6px 20px rgba(60, 40, 120, 0.1); } html[data-theme="light"] .bottom-nav-link { color: var(--text-secondary); } html[data-theme="light"] .bottom-nav-link:hover, html[data-theme="light"] .bottom-nav-link.active, html[data-theme="light"] .bottom-nav-link.active .nav-text { color: var(--primary) !important; } /* ---------- 4. Home hero ------------------------------------------------- */ html[data-theme="light"] .home-stat-strip .stat-block .stat-num { background: linear-gradient(135deg, #5b21b6, #a21caf); -webkit-background-clip: text; background-clip: text; color: transparent; } html[data-theme="light"] .landing-page .gradient-text, html[data-theme="light"] .gradient-text { background: linear-gradient(135deg, #7c3aed, #db2777); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } html[data-theme="light"] .btn-login, html[data-theme="light"] .landing-page .btn-login { color: #5b21b6 !important; border-color: var(--primary) !important; } html[data-theme="light"] .btn-login:hover, html[data-theme="light"] .landing-page .btn-login:hover { color: #ffffff !important; background: var(--primary) !important; } html[data-theme="light"] .btn-register, html[data-theme="light"] .landing-page .btn-register { color: #5b5876 !important; } html[data-theme="light"] .btn-register:hover, html[data-theme="light"] .landing-page .btn-register:hover { color: #a21caf !important; } html[data-theme="light"] .home-hero-v3 .eyebrow-pill { background: rgba(183, 121, 31, 0.1); border-color: rgba(183, 121, 31, 0.35); color: #92400e; } /* ---------- 5. Components with hard-coded white text -------------------- */ html[data-theme="light"] :is( .stats-strip-value, .result-stat-chip .result-stat-num, .live-score-num, .trending-chip, .trending-chip:hover, #resultCard .card p, .result-accuracy-ring-lg-inner span, #resultCard .btn-secondary ) { color: var(--text-primary) !important; } html[data-theme="light"] .result-stat-level .result-stat-num, html[data-theme="light"] .result-stat-combo .result-stat-num { color: var(--gold) !important; } html[data-theme="light"] .result-stat-score .result-stat-num { color: var(--cyan) !important; } html[data-theme="light"] .result-category-pill { color: #6d28d9; } html[data-theme="light"] .how-step-num { color: rgba(109, 40, 217, 0.12); } html[data-theme="light"] .color-choice-btn { color: #ffffff; text-shadow: 0 1px 3px rgba(0,0,0,0.45); } html[data-theme="light"] .achievement-medal.locked .medal-icon { color: rgba(90, 80, 130, 0.45) !important; } /* Quiz answer options (non sci-fi) */ html[data-theme="light"] .quiz-option:not(.sci-fi-option) { background: #ffffff; border-color: rgba(139, 92, 246, 0.22); color: var(--text-primary); } html[data-theme="light"] .quiz-option:not(.sci-fi-option):hover { background: rgba(139, 92, 246, 0.1); color: #4c1d95; } html[data-theme="light"] .quiz-option.option-correct:not(.sci-fi-option), html[data-theme="light"] .qotd-option.qotd-correct { color: #065f46 !important; } html[data-theme="light"] .quiz-option.option-wrong:not(.sci-fi-option), html[data-theme="light"] .qotd-option.qotd-wrong { color: #991b1b !important; } html[data-theme="light"] .qotd-option { color: var(--text-primary) !important; } html[data-theme="light"] .qotd-card { background: var(--card-bg); } /* Category cards that used a dark translucent fill */ html[data-theme="light"] .category-card, html[data-theme="light"] .category-card-square { background: var(--card-bg) !important; border-color: rgba(139, 92, 246, 0.18) !important; } html[data-theme="light"] .category-card:hover .category-icon-circle { box-shadow: 0 4px 15px rgba(139, 92, 246, 0.2); } html[data-theme="light"] .category-icon-circle { box-shadow: 0 4px 12px rgba(139, 92, 246, 0.12); } html[data-theme="light"] .result-accuracy-ring-lg-inner { color: var(--text-primary); } /* ---------- 6. Bootstrap utilities that assume a dark page --------------- */ html[data-theme="light"] .text-light { color: var(--text-primary) !important; } html[data-theme="light"] .text-white-50 { color: var(--text-secondary) !important; } html[data-theme="light"] .text-warning { color: #b45309 !important; } html[data-theme="light"] .text-info { color: #0e7490 !important; } html[data-theme="light"] .border-light, html[data-theme="light"] .border-secondary, html[data-theme="light"] .border-secondary-subtle { border-color: rgba(139, 92, 246, 0.2) !important; } html[data-theme="light"] .btn-outline-light:hover, html[data-theme="light"] .btn-outline-light:focus, html[data-theme="light"] .btn-outline-light.active { background: var(--primary) !important; border-color: var(--primary) !important; color: #ffffff !important; } html[data-theme="light"] .btn-close-white { filter: none; } html[data-theme="light"] .bg-dark:not(.navbar), html[data-theme="light"] .modal-content.bg-dark, html[data-theme="light"] .form-select.bg-dark, html[data-theme="light"] .form-control.bg-dark { background-color: #ffffff !important; color: var(--text-primary) !important; } html[data-theme="light"] pre.bg-dark { background-color: #f5f3ff !important; } html[data-theme="light"] .modal-content { color: var(--text-primary); border: 1px solid rgba(139, 92, 246, 0.2); } html[data-theme="light"] .modal-content .btn-close { filter: none; } html[data-theme="light"] .table-dark, html[data-theme="light"] .table { --bs-table-color: var(--text-primary); --bs-table-bg: #ffffff; --bs-table-border-color: rgba(139, 92, 246, 0.15); --bs-table-striped-bg: rgba(139, 92, 246, 0.05); --bs-table-striped-color: var(--text-primary); --bs-table-hover-bg: rgba(139, 92, 246, 0.08); --bs-table-hover-color: var(--text-primary); --bs-table-active-bg: rgba(139, 92, 246, 0.1); --bs-table-active-color: var(--text-primary); color: var(--text-primary); border-color: rgba(139, 92, 246, 0.15); } html[data-theme="light"] thead.table-dark, html[data-theme="light"] .table-dark thead, html[data-theme="light"] .table thead th { --bs-table-bg: #f1ecff; --bs-table-color: #3b2a78; } html[data-theme="light"] .form-control::placeholder { color: #8a87a3 !important; opacity: 1; } html[data-theme="light"] .form-check-input { border-color: rgba(139, 92, 246, 0.4); } html[data-theme="light"] .progress { background-color: rgba(139, 92, 246, 0.12) !important; } html[data-theme="light"] .badge.bg-secondary { color: #ffffff; } html[data-theme="light"] .badge.bg-secondary.bg-opacity-25 { color: var(--text-primary) !important; } html[data-theme="light"] .badge.bg-warning, html[data-theme="light"] .badge.text-bg-warning { color: #1e1b3a !important; } html[data-theme="light"] hr { border-color: rgba(139, 92, 246, 0.25); opacity: 1; } html[data-theme="light"] .card, html[data-theme="light"] .hero-card { box-shadow: 0 8px 24px rgba(60, 40, 120, 0.08) !important; } html[data-theme="light"] .card[style*="rgba(15, 7, 40"] { box-shadow: 0 10px 30px rgba(42, 26, 94, 0.3) !important; } html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, 0.35); } /* ---------- 7. Soft white fills / borders -> soft violet (auto-generated) */ html[data-theme="light"] .progress { background: rgba(139, 92, 246, 0.10) !important; } html[data-theme="light"] .category-card:hover .category-icon-circle { border-color: rgba(139, 92, 246, 0.2) !important; } html[data-theme="light"] .hero-stat-chip { background: rgba(139, 92, 246, 0.06) !important; border: 1px solid rgba(139, 92, 246, 0.2) !important; } html[data-theme="light"] #soundToggleBtn { background: rgba(139, 92, 246, 0.08) !important; border: 1px solid rgba(139, 92, 246, 0.2) !important; } html[data-theme="light"] .how-step-card { background: rgba(139, 92, 246, 0.05) !important; } html[data-theme="light"] .privacy-strip { background: rgba(139, 92, 246, 0.05) !important; border: 1px solid rgba(139, 92, 246, 0.2) !important; } html[data-theme="light"] .pq-progress-track { background: rgba(139, 92, 246, 0.08) !important; } html[data-theme="light"] .horoscope-stats-strip { background: rgba(139, 92, 246, 0.05) !important; } html[data-theme="light"] .result-stat-chip { background: rgba(139, 92, 246, 0.05) !important; border: 1px solid rgba(139, 92, 246, 0.2) !important; } html[data-theme="light"] #resultCard .btn-secondary { background: rgba(139, 92, 246, 0.10) !important; } html[data-theme="light"] .live-progress { background: rgba(139, 92, 246, 0.08) !important; } html[data-theme="light"] .trending-chip { background: rgba(139, 92, 246, 0.08) !important; border: 1px solid rgba(139, 92, 246, 0.2) !important; } html[data-theme="light"] .trending-chip:hover { background: rgba(139, 92, 246, 0.10) !important; } html[data-theme="light"] .qz-points-pill-badges { border-left: 1px solid rgba(139, 92, 246, 0.2) !important; } html[data-theme="light"] .qz-badge-ic { background: rgba(139, 92, 246, 0.05) !important; } html[data-theme="light"] .qz-tier-num { background: rgba(139, 92, 246, 0.06) !important; }