/* v8-patch.css — Day 3.1 with theme system * * Three themes, all designed for sustained reading: * [data-v8-theme="warm-battle"] — Warm Battle Pass (gaming, easier on eyes) * [data-v8-theme="athlete"] — Athlete Dashboard (FIFA-ish, serious tool) * [data-v8-theme="quiet"] — Quiet Study (e-reader feel) * * Theme is set on via the v8-patch.js script, persisted in localStorage. * * Eye-comfort principles applied to all themes: * - No pure black backgrounds (#000) — softer near-blacks * - No saturated primary colors as text color * - Body text 14.5–15.5px (was 12-13px) * - Warm or neutral text on dark, never pure white * - Cards use elevation, not harsh borders */ /* ===================================================== * DEFAULT THEME (warm-battle) — applied when no data-v8-theme attribute * ===================================================== */ :root, html[data-v8-theme="warm-battle"] { --v8-bg: #1A1714; --v8-panel: #221E1A; --v8-panel-2: #2C2722; --v8-border: #3A3530; --v8-text: #E8DFD3; --v8-text-mute: #9E928A; --v8-text-soft: #BFB4A8; --v8-accent: #D4A05E; /* muted amber instead of saturated orange */ --v8-accent-2: #E8C384; --v8-good: #7DB374; --v8-warn: #E0A868; --v8-bad: #C97A6F; --v8-bar-from: #B5874A; --v8-bar-to: #D4A05E; --v8-radius: 12px; --v8-radius-sm: 8px; --v8-shadow: 0 6px 18px rgba(0,0,0,0.35); } html[data-v8-theme="athlete"] { --v8-bg: #11151D; --v8-panel: #181E2A; --v8-panel-2: #1F2735; --v8-border: #2D3648; --v8-text: #DCE3EE; --v8-text-mute: #8B97AB; --v8-text-soft: #B4BECF; --v8-accent: #5DA0E8; --v8-accent-2: #7FB8F1; --v8-good: #6FB58A; --v8-warn: #E5B341; --v8-bad: #D27866; --v8-bar-from: #5DA0E8; --v8-bar-to: #8FBEF0; --v8-radius: 12px; --v8-radius-sm: 8px; --v8-shadow: 0 6px 18px rgba(0,0,0,0.4); } html[data-v8-theme="quiet"] { --v8-bg: #1C1A17; --v8-panel: #232120; --v8-panel-2: #2C2A28; --v8-border: #3A3835; --v8-text: #CBC4B8; --v8-text-mute: #8E867B; --v8-text-soft: #A8A095; --v8-accent: #C4954A; --v8-accent-2: #5C9B9A; --v8-good: #88A57F; --v8-warn: #C4954A; --v8-bad: #B07868; --v8-bar-from: #8E7A5A; --v8-bar-to: #C4954A; --v8-radius: 10px; --v8-radius-sm: 6px; --v8-shadow: 0 4px 14px rgba(0,0,0,0.25); } /* ===================================================== * THEME SWITCHER (top-right, small) * ===================================================== */ #v8-theme-switcher { position: fixed; top: 60px; /* below the v7 top bar */ right: 14px; z-index: 9997; display: flex; gap: 4px; padding: 6px; background: var(--v8-panel); border: 1px solid var(--v8-border); border-radius: 999px; box-shadow: var(--v8-shadow); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .v8-theme-btn { background: transparent; border: none; color: var(--v8-text-mute); padding: 6px 10px; border-radius: 999px; font-size: 11px; cursor: pointer; letter-spacing: 0.04em; font-weight: 500; } .v8-theme-btn:hover { color: var(--v8-text); } .v8-theme-btn.active { background: var(--v8-panel-2); color: var(--v8-accent); } @media (max-width: 700px) { #v8-theme-switcher { top: auto; bottom: 100px; right: 10px; padding: 4px; } .v8-theme-btn { font-size: 10px; padding: 5px 8px; } } /* ===================================================== * READINESS PANEL — embedded inline (not floating) * ===================================================== */ #v8-readiness-panel { background: var(--v8-panel); border: 1px solid var(--v8-border); border-radius: var(--v8-radius); padding: 18px 20px; margin: 16px 12px 20px; color: var(--v8-text); box-shadow: var(--v8-shadow); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .v8-panel-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; } .v8-panel-title { font-weight: 700; font-size: 15px; color: var(--v8-text); letter-spacing: 0.02em; text-transform: uppercase; } .v8-panel-sub { color: var(--v8-text-mute); font-size: 12px; } .v8-readiness-overall { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; } .v8-readiness-overall-num { font-size: 38px; font-weight: 700; color: var(--v8-accent); line-height: 1; font-feature-settings: "tnum"; } .v8-readiness-overall-label { color: var(--v8-text-mute); font-size: 13px; } .v8-readiness-phase { margin-left: auto; padding: 4px 12px; border-radius: 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; background: var(--v8-panel-2); color: var(--v8-text-mute); border: 1px solid var(--v8-border); } .v8-readiness-phase.phase-exam_prep { background: color-mix(in srgb, var(--v8-warn) 15%, transparent); color: var(--v8-warn); border-color: color-mix(in srgb, var(--v8-warn) 35%, transparent); } .v8-readiness-bars { display: flex; flex-direction: column; gap: 8px; } .v8-dim-row { display: grid; grid-template-columns: 130px 1fr 40px; align-items: center; gap: 12px; } .v8-dim-label { font-size: 14px; color: var(--v8-text-soft); } .v8-dim-bar-wrap { background: var(--v8-panel-2); height: 10px; border-radius: 5px; overflow: hidden; } .v8-dim-bar { background: linear-gradient(90deg, var(--v8-bar-from), var(--v8-bar-to)); height: 100%; transition: width 0.5s ease; border-radius: 5px; } .v8-dim-value { font-size: 14px; color: var(--v8-text); text-align: right; font-feature-settings: "tnum"; font-weight: 600; } .v8-readiness-note { margin-top: 16px; padding: 12px 14px; background: var(--v8-panel-2); border-radius: var(--v8-radius-sm); font-size: 14px; color: var(--v8-text-soft); line-height: 1.6; } .v8-note-label { color: var(--v8-accent); font-weight: 600; margin-right: 4px; } /* ===================================================== * WELCOME — inline card instead of floating banner * ===================================================== */ #v8-welcome-banner { margin: 16px 12px; padding: 18px 20px; background: linear-gradient(135deg, var(--v8-panel-2), var(--v8-panel)); border: 1px solid var(--v8-border); border-left: 4px solid var(--v8-accent); border-radius: var(--v8-radius); box-shadow: var(--v8-shadow); color: var(--v8-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .v8-welcome-preview { display: flex; flex-direction: column; gap: 8px; } .v8-welcome-title { font-weight: 700; font-size: 16px; color: var(--v8-text); letter-spacing: 0.01em; } .v8-welcome-sub { color: var(--v8-text-soft); font-size: 14px; line-height: 1.5; } .v8-welcome-open { align-self: flex-start; margin-top: 6px; background: var(--v8-accent); color: var(--v8-bg); border: none; padding: 9px 18px; border-radius: var(--v8-radius-sm); font-weight: 600; font-size: 14px; cursor: pointer; font-family: inherit; letter-spacing: 0.02em; } .v8-welcome-open:hover { background: var(--v8-accent-2); } /* Welcome modal */ #v8-welcome-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .v8-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); } .v8-modal-card { position: relative; background: var(--v8-panel); border: 1px solid var(--v8-border); border-radius: var(--v8-radius); max-width: 720px; width: 100%; max-height: 88vh; display: flex; flex-direction: column; color: var(--v8-text); box-shadow: 0 20px 60px rgba(0,0,0,0.5); } .v8-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--v8-border); } .v8-modal-title { font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--v8-accent); } .v8-modal-close { background: transparent; color: var(--v8-text-mute); border: none; font-size: 24px; cursor: pointer; line-height: 1; } .v8-modal-close:hover { color: var(--v8-text); } .v8-modal-body { overflow-y: auto; padding: 22px; line-height: 1.65; font-size: 15.5px; color: var(--v8-text-soft); } .v8-modal-body h3, .v8-modal-body h4, .v8-modal-body h5 { margin-top: 22px; margin-bottom: 10px; color: var(--v8-text); font-weight: 700; font-size: 16px; } .v8-modal-body h3:first-child { margin-top: 0; } .v8-modal-body p { margin: 12px 0; } .v8-modal-body strong { color: var(--v8-text); font-weight: 600; } .v8-modal-body ul { margin: 12px 0; padding-left: 24px; } .v8-modal-body li { margin: 6px 0; } .v8-modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--v8-border); } .v8-btn { padding: 9px 16px; border-radius: var(--v8-radius-sm); border: 1px solid var(--v8-border); cursor: pointer; font-weight: 600; font-size: 14px; font-family: inherit; letter-spacing: 0.01em; } .v8-btn-primary { background: var(--v8-accent); color: var(--v8-bg); border-color: var(--v8-accent); } .v8-btn-primary:hover { background: var(--v8-accent-2); } .v8-btn-secondary { background: transparent; color: var(--v8-text-soft); } .v8-btn-secondary:hover { color: var(--v8-text); border-color: var(--v8-text-mute); } /* ===================================================== * COACH VIEW * ===================================================== */ #v8-coach, #v8-coach-standalone { margin: 16px 12px; } .v8-coach-container { background: var(--v8-panel); border: 1px solid var(--v8-border); border-radius: var(--v8-radius); color: var(--v8-text); display: flex; flex-direction: column; min-height: 420px; box-shadow: var(--v8-shadow); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .v8-coach-header { padding: 16px 20px; border-bottom: 1px solid var(--v8-border); } .v8-coach-title { font-weight: 700; font-size: 15px; display: block; letter-spacing: 0.02em; text-transform: uppercase; color: var(--v8-text); } .v8-coach-sub { color: var(--v8-text-mute); font-size: 13px; margin-top: 2px; } .v8-coach-messages { flex: 1; overflow-y: auto; padding: 18px 20px; max-height: 540px; } .v8-msg { margin-bottom: 18px; } .v8-msg-role { font-size: 11px; color: var(--v8-text-mute); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; font-weight: 600; } .v8-msg-body { background: var(--v8-panel-2); border-radius: var(--v8-radius-sm); padding: 12px 14px; font-size: 14.5px; line-height: 1.6; color: var(--v8-text-soft); } .v8-msg-assistant .v8-msg-body { border-left: 3px solid var(--v8-accent); } .v8-msg-user .v8-msg-body { background: var(--v8-bg); color: var(--v8-text); } .v8-msg-body p { margin: 8px 0; } .v8-msg-body h3, .v8-msg-body h4, .v8-msg-body h5 { margin: 12px 0 6px; color: var(--v8-text); font-size: 14.5px; font-weight: 700; } .v8-msg-body strong { color: var(--v8-text); font-weight: 600; } .v8-msg-body ul { margin: 8px 0; padding-left: 20px; } .v8-coach-input-row { display: flex; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--v8-border); } .v8-coach-input { flex: 1; background: var(--v8-bg); color: var(--v8-text); border: 1px solid var(--v8-border); border-radius: var(--v8-radius-sm); padding: 10px 12px; font-family: inherit; font-size: 14.5px; resize: vertical; line-height: 1.5; } .v8-coach-input:focus { outline: none; border-color: var(--v8-accent); } .v8-coach-send { background: var(--v8-accent); color: var(--v8-bg); border: none; padding: 0 20px; border-radius: var(--v8-radius-sm); font-weight: 700; cursor: pointer; font-family: inherit; letter-spacing: 0.02em; } .v8-coach-send:hover { background: var(--v8-accent-2); } .v8-coach-send[disabled] { opacity: 0.5; cursor: default; } .v8-coach-status { padding: 0 18px 12px; font-size: 13px; color: var(--v8-text-mute); min-height: 18px; } /* ===================================================== * HQ-specific (re-uses v8 vars; HQ page has its own root) * ===================================================== */ @media (max-width: 700px) { .v8-dim-row { grid-template-columns: 100px 1fr 36px; gap: 8px; } .v8-dim-label { font-size: 13px; } .v8-coach-messages { max-height: 400px; } .v8-modal-card { max-height: 92vh; } .v8-modal-body { font-size: 15px; padding: 18px; } #v8-readiness-panel, #v8-welcome-banner, #v8-coach, #v8-coach-standalone { margin-left: 8px; margin-right: 8px; } }