/** * theme.css — Coach App Theme Overrides * Ivory White Day Mode: applied when * Default dark theme is defined inline in each page's :root — untouched. * * Specificity note: * Page inline styles use :root (0,1,0). * This file uses html[data-theme="light"] (0,1,1) — wins on all variables. */ /* ───────────────────────────────────────────────────────────────── 1. CSS VARIABLE OVERRIDES — Ivory White palette ───────────────────────────────────────────────────────────────── */ html[data-theme="light"] { --bg: #FAFAF7; --surface: #F4F0E9; --card: #FFFFFF; --card2: #F9F6F0; --line: rgba(180,138,70,.16); --gold: #C9A96E; --gold2: #E8C990; --golddim: rgba(201,169,110,.10); --text: #1A1208; --muted: rgba(26,18,8,.40); --muted2: rgba(26,18,8,.20); --green: #3D9964; --amber: #C8781C; --red: #C04040; --blue: #4E88A8; } /* ───────────────────────────────────────────────────────────────── 2. PAGE BODY & HTML ───────────────────────────────────────────────────────────────── */ html[data-theme="light"] body, html[data-theme="light"] html { background: var(--bg); color: var(--text); } /* ───────────────────────────────────────────────────────────────── 3. BOTTOM NAVIGATION BAR — stays DARK in day mode for contrast Light content area + dark nav with gold = client-app aesthetic ───────────────────────────────────────────────────────────────── */ html[data-theme="light"] .coach-nav { background: rgba(16,13,9,.97) !important; border-top-color: rgba(201,169,110,.18) !important; } /* Nav items — use dark-mode text colors so they read on dark nav */ html[data-theme="light"] .coach-nav .nav-item, html[data-theme="light"] .coach-nav a.nav-item { color: rgba(240,232,216,.42) !important; } html[data-theme="light"] .coach-nav .nav-item.active, html[data-theme="light"] .coach-nav a.nav-item.active { color: #C9A96E !important; } /* Nav badge dot border matches dark nav bg */ html[data-theme="light"] .nav-badge::after, html[data-theme="light"] .nav-badge-wrap::after { border-color: #100D09 !important; } /* ───────────────────────────────────────────────────────────────── 4. TOAST NOTIFICATIONS Original: background:#2A2318 ───────────────────────────────────────────────────────────────── */ html[data-theme="light"] .toast, html[data-theme="light"] .toast-msg { background: #FFFFFF !important; border-color: rgba(180,138,70,.2) !important; color: var(--text) !important; box-shadow: 0 4px 20px rgba(26,18,8,.12) !important; } /* ───────────────────────────────────────────────────────────────── 5. BOTTOM SHEETS (overlay + sheet) .sheet already uses var(--surface) — handled by variable override .sheet-handle was rgba(240,232,216,.18) ───────────────────────────────────────────────────────────────── */ html[data-theme="light"] .sheet-handle { background: rgba(26,18,8,.12) !important; } /* ───────────────────────────────────────────────────────────────── 6. COACH SIDEBAR (injected by coach-shared.js) All hardcoded dark values need light overrides ───────────────────────────────────────────────────────────────── */ html[data-theme="light"] .coach-sidebar { background: #FAFAF7 !important; border-left-color: rgba(180,138,70,.18) !important; } html[data-theme="light"] .coach-sb-toprow { border-bottom-color: rgba(180,138,70,.14) !important; } html[data-theme="light"] .coach-sb-closebtn { background: rgba(26,18,8,.06) !important; border-color: rgba(26,18,8,.1) !important; } html[data-theme="light"] .coach-sb-closebtn svg { stroke: rgba(26,18,8,.5) !important; } html[data-theme="light"] .coach-sb-hero { border-bottom-color: rgba(180,138,70,.1) !important; } html[data-theme="light"] .coach-sb-name { color: #1A1208 !important; } html[data-theme="light"] .coach-sb-email { color: rgba(26,18,8,.45) !important; } html[data-theme="light"] .coach-sb-item { border-bottom-color: rgba(26,18,8,.05) !important; } html[data-theme="light"] .coach-sb-item:active { background: rgba(201,169,110,.07) !important; } html[data-theme="light"] .coach-sb-ititle { color: #1A1208 !important; } html[data-theme="light"] .coach-sb-ititle.danger { color: #C04040 !important; } html[data-theme="light"] .coach-sb-isub { color: rgba(26,18,8,.40) !important; } html[data-theme="light"] .coach-sb-arr { stroke: rgba(26,18,8,.22) !important; } html[data-theme="light"] .coach-sb-ico.danger svg { stroke: #C04040 !important; } html[data-theme="light"] .coach-sb-ico.danger { background: rgba(192,64,64,.08) !important; border-color: rgba(192,64,64,.14) !important; } /* ───────────────────────────────────────────────────────────────── 7. CREATE CLIENT SHEET (injected by coach-shared.js) ───────────────────────────────────────────────────────────────── */ html[data-theme="light"] .create-cl-sht { background: var(--surface) !important; border-top-color: rgba(180,138,70,.16) !important; } html[data-theme="light"] .create-cl-handle { background: rgba(26,18,8,.12) !important; } html[data-theme="light"] .create-cl-htitle { color: #1A1208 !important; } html[data-theme="light"] .create-cl-hclose { background: rgba(26,18,8,.06) !important; border-color: rgba(26,18,8,.1) !important; } html[data-theme="light"] .create-cl-hclose svg { stroke: rgba(26,18,8,.5) !important; } html[data-theme="light"] .create-cl-hint { color: rgba(26,18,8,.45) !important; } html[data-theme="light"] .create-cl-inp { background: rgba(26,18,8,.04) !important; border-color: rgba(180,138,70,.22) !important; color: #1A1208 !important; } html[data-theme="light"] .create-cl-inp:focus { border-color: rgba(180,138,70,.5) !important; } html[data-theme="light"] .create-cl-inp::placeholder { color: rgba(26,18,8,.28) !important; } /* ───────────────────────────────────────────────────────────────── 8. SELECT / DROPDOWN INPUTS (coach-library fq-type etc.) ───────────────────────────────────────────────────────────────── */ html[data-theme="light"] .fq-type, html[data-theme="light"] select { background: rgba(26,18,8,.04) !important; border-color: rgba(180,138,70,.2) !important; color: var(--text) !important; } /* ───────────────────────────────────────────────────────────────── 9. GENERAL INPUT / TEXTAREA (any remaining inline-dark inputs) ───────────────────────────────────────────────────────────────── */ html[data-theme="light"] input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), html[data-theme="light"] textarea { background: rgba(26,18,8,.04); border-color: rgba(180,138,70,.2); color: var(--text); } html[data-theme="light"] input::placeholder, html[data-theme="light"] textarea::placeholder { color: rgba(26,18,8,.30); } /* ───────────────────────────────────────────────────────────────── 10. PROFILE / ACCOUNT SHEET (coach-home) .sheet already uses var(--surface) — covered by variable override Some hardcoded text colors inside sheets ───────────────────────────────────────────────────────────────── */ html[data-theme="light"] .profile-menu-row { border-bottom-color: var(--line) !important; } html[data-theme="light"] .btn-outline { border-color: var(--line) !important; color: var(--text) !important; } /* ───────────────────────────────────────────────────────────────── 11. COACH INBOX — search bar, message bubbles ───────────────────────────────────────────────────────────────── */ html[data-theme="light"] .inbox-search { background: var(--card) !important; border-color: var(--line) !important; color: var(--text) !important; } html[data-theme="light"] .inbox-search::placeholder { color: var(--muted) !important; } /* Outgoing message bubbles (coach messages) */ html[data-theme="light"] .msg-out .bubble { background: linear-gradient(135deg, var(--gold), var(--gold2)) !important; color: #1A1208 !important; } /* ───────────────────────────────────────────────────────────────── 12. THEME TOGGLE ROW — pill indicator appearance ───────────────────────────────────────────────────────────────── */ .coach-theme-pill { font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(201,169,110,.28); transition: background .2s, color .2s; flex-shrink: 0; }