/* ============================================================ MODAL CONTRAST FIXES ------------------------------------------------------------ Loaded LAST so these rules win the cascade. They repair modal text that becomes unreadable because its colour is too close to the modal's surface in light and/or dark mode. Root cause for the worst offenders: js/wg-shell.js adds the `wg-themed` class to , which activates body.wg-themed h1, h2, h3, h4 { color: var(--wg-text-strong); } That selector (specificity 0,0,1,2) overrides per-modal heading colours with the *page* theme colour. For modals whose surface is a FIXED colour that does not follow the page theme (e.g. the rest timer overlay, which is always dark), the page-theme heading colour is wrong — in light mode --wg-text-strong is #050B17 (near-black), so the heading disappears against the dark overlay. These rules re-pin text colours to match each modal's ACTUAL surface, in both themes. id / descendant specificity plus !important is used so they beat the body.wg-themed rules. ============================================================ */ /* ------------------------------------------------------------ 1) REST TIMER OVERLAY The .rest-timer-content surface is always dark (#1a1a1a in light mode, #1A1F2E in dark mode), so ALL of its text must stay light in BOTH themes. This is the modal in the bug report: the "Rest Period" title was rendering dark-navy-on-dark in light mode. ------------------------------------------------------------ */ #restTimerModal .rest-timer-content h3, .rest-timer-modal .rest-timer-content h3, .rest-timer-content h3 { color: #ffffff !important; } #restTimerModal .rest-timer-content .rest-subtitle, .rest-timer-modal .rest-timer-content .rest-subtitle, .rest-timer-content .rest-subtitle { color: #cfd3da !important; /* light grey — ~9:1 on the dark surface */ } #restTimerModal .rest-timer-content .rest-time-remaining, .rest-timer-modal .rest-timer-content .rest-time-remaining, .rest-timer-content .rest-time-remaining { color: #ffffff !important; } /* Keep the "+30s" / "Skip Rest" button labels readable on their gradients in both themes (the coral CTA uses an intentional dark label; the orange secondary button uses white). */ #restTimerModal .rest-timer-controls .btn:not(.btn-primary), .rest-timer-content .rest-timer-controls .btn:not(.btn-primary) { color: #ffffff !important; } /* ------------------------------------------------------------ 2) TRAINING STYLES MODAL (generate.html) Description / detail text sits on a very light card (#f8fafc) in light mode. #64748b only reaches ~4.0:1 — below the WCAG AA 4.5:1 target. Darken it in light mode for comfortable reading. ------------------------------------------------------------ */ [data-theme="light"] .training-style-description, :root:not([data-theme="dark"]) .training-style-description { color: #475569 !important; /* ~7:1 on #f8fafc */ } [data-theme="light"] .training-style-detail, :root:not([data-theme="dark"]) .training-style-detail { color: #334155 !important; /* ~9:1 on #f8fafc */ } /* ------------------------------------------------------------ 3) WEEKLY TEMPLATE SELECTION MODAL (generate.html) Card description / schedule text uses dim slate greys that are too faint on the dark modal surface in dark mode. ------------------------------------------------------------ */ [data-theme="dark"] .template-card-main p { color: #C8D0DC !important; } [data-theme="dark"] .template-card-main .template-schedule { color: #AAB8C2 !important; } [data-theme="dark"] .template-card-main h4 { color: #FFFFFF !important; } /* The .randomize variant keeps its own gradient + white text — leave it. */ .template-card-main.randomize h4, .template-card-main.randomize p, .template-card-main.randomize .template-schedule { color: #ffffff !important; }