/* ===== COURSE DARK THEME — AI-курс TMA ===== */ /* Переопределяет CSS-переменные светлой темы на тёмную. Подключается последним в , чтобы каскадно перекрыть встроенные :root-переменные каждого HTML-файла курса. */ :root { /* ── Основные фоны ── */ --bg: #1F1A13; --surface: #282118; --surface-elevated: #322A1C; /* ── Фоны курса (кастомные переменные day2/day3) ── */ --bg-card: #282118; --bg-soft: #2A2218; --bg-code: #1A1510; --bg-sidebar: #221C12; /* ── Переменные DAY3 (отдельная система именования) ── */ --bg-primary: #1F1A13; --bg-secondary: #282118; --bg-tertiary: #322A1C; --bg-accent-soft: #2A2010; /* ── Текст DAY3 ── */ --text-primary: #EDE3D8; --text-secondary: #B0A090; /* ── Бордеры DAY3 ── */ --border-soft: #3A3025; --border-strong: #4A3C2A; /* ── РИКЦ цвета (day3) — адаптируем под тёмную тему ── */ --ricz-blue: #7A9ED4; --ricz-blue-hover: #9AB5E0; --ricz-blue-soft: #1A2035; --ricz-gold: #C8A84B; --ricz-gold-soft: #2A2010; /* ── Текст ── */ --text: #EDE3D8; --text-soft: #B0A090; --text-mute: #7A6E62; --text-muted: #8A7A6A; --text-light: #5A4E42; --text-on-navy: #EDE3D8; /* ── Акцент — янтарное золото ── */ --gold: #C8A050; --gold-soft: #D4B060; --gold-deep: #A08030; --gold-hover: #E0B860; --gold-light: #3A2E1A; /* ── Navy → тёмный фон (переопределяем главную проблему!) ── */ --navy: #1F1A13; --navy-dark: #140F0A; --navy-deep: #120E08; --navy-soft: #282118; /* ── Бордеры ── */ --border: #3A3025; --border-dark: #4A3C2A; --border-strong: #4A3C2A; /* ── Состояния (светлые → тёмные аналоги) ── */ --success: #6FA87A; --success-soft: #1A2A1E; --success-bg: #1A2A1E; --warn: #C8923A; --warn-soft: #2A2010; --danger: #C87878; --danger-soft: #2A1818; --info-bg: #282118; --error: #C87878; --error-bg: #2A1818; --error-border: #8A4040; /* ── Шрифты ── */ --font-head: 'Playfair Display', Georgia, serif; --font-body: 'Inter', -apple-system, sans-serif; /* ── Радиусы (совместимость) ── */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; } /* ===== СКРОЛЛБАР ===== */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--border-dark); border-radius: 3px; } /* ===== ВЫДЕЛЕНИЕ ТЕКСТА ===== */ ::selection { background: var(--gold); color: var(--navy-dark); } /* ════════════════════════════════════════════ ЗАГОЛОВКИ — принудительно светлые ════════════════════════════════════════════ */ h1, h2, h3, h4, h5, h6 { color: var(--text) !important; } .section-title, .module-title, .sec-title, .hero-title, .page-title, .result-title, .card-title, .step-title { color: var(--text) !important; } /* Подзаголовки и описания */ .hero-desc, .section-desc, .module-desc, .fork-card-desc, .step-fallback { color: var(--text-soft) !important; } /* Основной текст параграфов */ p { color: var(--text); } /* Бренд в шапке */ .brand { color: var(--text) !important; } .brand .gold, .brand .sep { color: var(--gold) !important; } /* ════════════════════════════════════════════ ГЛОБАЛЬНЫЙ ФИКС: var(--navy) как цвет текста В тёмной теме --navy = #1F1A13 (тёмно-коричневый). Все элементы, использующие color: var(--navy), должны получить светлый цвет текста. ════════════════════════════════════════════ */ /* DAY1: прямые CSS-классы с color: var(--navy) */ .hero h1, .form-card h2, .glossary-card h2 { color: var(--text) !important; } .result-title { color: var(--text) !important; } .result-tip strong { color: var(--gold) !important; } .g-term { color: var(--text) !important; font-weight: 600; } .g-desc { color: var(--text-soft) !important; } /* .choice-rule имеет background: var(--navy) — делаем его тёмной карточкой с золотой рамкой */ .choice-rule { background: var(--surface-elevated) !important; border: 1px solid var(--gold) !important; color: var(--text) !important; } .choice-rule * { color: var(--text) !important; } /* DAY2: классы с color: var(--navy) */ .module-title { color: var(--text) !important; } .section-title { color: var(--text) !important; } .practice-title { color: var(--text) !important; } .practice-label { color: var(--text-soft) !important; } .task-title { color: var(--text) !important; } .test-intro-title { color: var(--text) !important; } .question-text { color: var(--text) !important; } /* DAY2: steps с color: var(--navy) */ .steps .step h4 { color: var(--text) !important; } /* DAY2: result-score b имеет color: var(--navy) */ .result-score b { color: var(--gold) !important; } /* Кнопки outline с color: var(--navy) */ .btn.outline { color: var(--gold) !important; border-color: var(--gold) !important; } .btn.outline:hover { background: var(--gold-light) !important; } /* Кнопки primary с background: var(--navy) */ .btn.primary, .btn-primary { background: var(--gold) !important; color: var(--navy-dark) !important; border: none !important; } .btn.primary:hover, .btn-primary:hover { background: var(--gold-hover) !important; } /* .btn-secondary:hover с border/color var(--navy) */ .btn-secondary:hover { border-color: var(--gold) !important; color: var(--gold) !important; } /* .prompt-copy-btn */ .prompt-copy-btn { background: var(--gold) !important; color: var(--navy-dark) !important; } /* .module-icon с background: var(--navy) */ .module-icon { background: var(--surface-elevated) !important; color: var(--gold) !important; } /* .day-complete с gradient var(--navy) */ .day-complete { background: var(--surface-elevated) !important; border-top: 2px solid var(--gold) !important; } /* .toast с background: var(--navy) */ .toast { background: var(--surface-elevated) !important; color: var(--text) !important; border: 1px solid var(--border-dark) !important; } /* .steps .step::before с background: var(--navy) */ .steps .step::before { background: var(--gold) !important; } /* ════════════════════════════════════════════ КВИЗ — ПОЛНОЕ ПОКРЫТИЕ ════════════════════════════════════════════ */ /* DAY1: вопрос квиза */ .q-text, [class*="q-text"] { color: var(--text) !important; font-size: 17px; } .q-num, [class*="q-num"] { color: var(--text-soft) !important; } .question-block { background: var(--surface) !important; border-color: var(--border) !important; } /* DAY2: квиз */ .test-intro { background: var(--surface) !important; border-color: var(--border) !important; } .test-intro-title { color: var(--text) !important; } .test-intro-desc { color: var(--text-soft) !important; } .question-text { color: var(--text) !important; } .question-progress { color: var(--text-soft) !important; } /* DAY2: варианты ответов (классы .option, .option-marker, .option-text) */ .option, [class*="option"]:not([class*="tag"]) { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; } .option:hover { border-color: var(--gold) !important; background: var(--surface-elevated) !important; } .option-marker { background: var(--surface-elevated) !important; color: var(--text-soft) !important; border-color: var(--border) !important; } .option-text { color: var(--text) !important; } .options-list { background: transparent !important; } /* Выбранный/правильный/неправильный вариант */ .option.selected, .option.chosen { border-color: var(--gold) !important; background: var(--gold-light) !important; } .option.correct { background: var(--success-bg) !important; border-color: var(--success) !important; } .option.correct .option-marker { background: var(--success) !important; color: #fff !important; } .option.wrong, .option.incorrect { background: var(--error-bg) !important; border-color: var(--error-border) !important; } .option.wrong .option-marker { background: var(--error-border) !important; color: #fff !important; } /* DAY2: результат квиза */ .result-title { color: var(--text) !important; } .result-score { color: var(--text-soft) !important; } .result-body { color: var(--text-soft) !important; } .result-action { color: var(--text-soft) !important; } /* DAY3: квиз (другая система именования) */ .test-question { background: var(--bg-primary) !important; border-color: var(--border-soft) !important; color: var(--text) !important; } .test-question-text { color: var(--text) !important; } .test-answer { background: var(--surface) !important; border-color: var(--border-strong) !important; color: var(--text) !important; } .test-answer:hover { border-color: var(--gold) !important; background: var(--surface-elevated) !important; } .test-answers { background: transparent !important; } .test-progress { color: var(--text-muted) !important; } .test-progress-bar { background: var(--border) !important; } .test-progress-fill { background: var(--gold) !important; } .test-intro { color: var(--text-soft) !important; } .test-result { background: var(--surface) !important; border-color: var(--border-soft) !important; color: var(--text) !important; } .test-result-score { color: var(--success) !important; } .test-result-message { color: var(--text) !important; } .test-result-actions { color: var(--text-soft) !important; } .test-explain { background: var(--ricz-blue-soft) !important; border-left-color: var(--ricz-blue) !important; color: var(--text) !important; } .test-locked { color: var(--text-muted) !important; background: var(--surface) !important; } /* DAY3: буква ответа */ .answer-letter { background: var(--surface-elevated) !important; color: var(--text-soft) !important; } .answer-text { color: var(--text) !important; } /* ════════════════════════════════════════════ CALLOUT БЛОКИ ════════════════════════════════════════════ */ /* Callout заголовки — по типу */ .callout-title { color: var(--gold) !important; } .callout.warn .callout-title { color: var(--warn) !important; } .callout.danger .callout-title { color: var(--danger) !important; } .callout.success .callout-title { color: var(--success) !important; } /* ── Callout блоки (warn / danger / success) ── */ .callout { background: var(--bg-soft) !important; border-left-color: var(--gold) !important; color: var(--text) !important; } .callout.warn { background: var(--warn-soft) !important; border-left-color: var(--warn) !important; } .callout.danger { background: var(--danger-soft) !important; border-left-color: var(--danger) !important; } .callout.success { background: var(--success-soft) !important; border-left-color: var(--success) !important; } .callout p, .callout li, .callout span, .callout .callout-title { color: var(--text) !important; } .callout.warn .callout-title { color: var(--warn) !important; } .callout.danger .callout-title { color: var(--danger) !important; } .callout.success .callout-title { color: var(--success) !important; } /* ════════════════════════════════════════════ RADIO-КНОПКИ ════════════════════════════════════════════ */ .radio-label { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; } .radio-label:hover { border-color: var(--gold) !important; background: var(--surface-elevated) !important; } .radio-label.selected, .radio-label:has(input:checked) { border-color: var(--gold) !important; background: var(--gold-light) !important; } .radio-custom { border-color: var(--border-dark) !important; background: var(--surface) !important; } .radio-custom::after { background: var(--gold) !important; } /* ════════════════════════════════════════════ GLOSSARY ITEMS ════════════════════════════════════════════ */ .glossary-item { background: var(--surface) !important; border-color: var(--border) !important; } .glossary-item:hover { border-color: var(--gold) !important; } /* ════════════════════════════════════════════ РЕЗУЛЬТАТ ДИАГНОСТИКИ ════════════════════════════════════════════ */ .result-card, [id^="result-"] { background: var(--surface-elevated) !important; border-color: var(--border-dark) !important; color: var(--text) !important; } .result-tip { background: var(--gold-light) !important; border-left-color: var(--gold) !important; color: var(--text) !important; } .result-tip strong { color: var(--gold) !important; } /* ════════════════════════════════════════════ ТЕГИ / БЕЙДЖИ ════════════════════════════════════════════ */ .g-tag, .tag, [class*="tag"] { background: var(--gold-light) !important; color: var(--gold) !important; border: 1px solid var(--gold) !important; } /* ════════════════════════════════════════════ QUIZ / OPTION КАРТОЧКИ (общий случай) ════════════════════════════════════════════ */ .quiz-option, .option-btn, [class*="quiz-option"], [class*="option-btn"] { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; } .quiz-option:hover, .option-btn:hover { border-color: var(--gold) !important; background: var(--surface-elevated) !important; } .quiz-option.correct, .option-btn.correct { background: var(--success-bg) !important; border-color: var(--success) !important; color: var(--success) !important; } .quiz-option.wrong, .option-btn.wrong { background: var(--error-bg) !important; border-color: var(--error-border) !important; color: var(--error) !important; } /* ════════════════════════════════════════════ ПРОГРЕСС-БАР ════════════════════════════════════════════ */ [class*="progress-bar"], [class*="progressbar"] { background: var(--border) !important; } [class*="progress-fill"], [class*="progress-value"] { background: var(--gold) !important; } /* ════════════════════════════════════════════ ИНПУТЫ И ФОРМЫ ════════════════════════════════════════════ */ input, select, textarea { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; } /* ════════════════════════════════════════════ МОДАЛЬНЫЕ ОКНА И ОВЕРЛЕИ ════════════════════════════════════════════ */ .modal, [class*="modal"] { background: var(--surface-elevated) !important; } .overlay, [class*="overlay"] { background: rgba(0, 0, 0, 0.65) !important; } /* ════════════════════════════════════════════ КОД ════════════════════════════════════════════ */ code, pre { background: var(--surface-elevated) !important; color: var(--gold) !important; border: 1px solid var(--border) !important; } /* ════════════════════════════════════════════ ТАБЛИЦЫ ════════════════════════════════════════════ */ table { border-color: var(--border) !important; } th { background: var(--surface-elevated) !important; color: var(--text) !important; } td { border-color: var(--border) !important; color: var(--text) !important; } /* ════════════════════════════════════════════ НАВИГАЦИЯ / ХЕДЕР ════════════════════════════════════════════ */ .site-header, header, nav { background: var(--navy-dark) !important; border-bottom: 1px solid var(--border) !important; } /* ════════════════════════════════════════════ СЕКЦИИ-МОДУЛИ ════════════════════════════════════════════ */ .module, [class*="module"], .lesson, [class*="lesson"] { background: var(--surface) !important; border-color: var(--border) !important; } /* ════════════════════════════════════════════ ЗАВЕРШЁННЫЕ МОДУЛИ ════════════════════════════════════════════ */ .module.completed, .module.passed, [class*="completed"] { border-color: var(--gold) !important; background: var(--gold-light) !important; } /* ════════════════════════════════════════════ ТИПОГРАФИКА: СЕКЦИОННЫЕ ЛЕЙБЛЫ ════════════════════════════════════════════ */ [class*="eyebrow"], .day-badge, .module-tag, [class*="label"][style*="uppercase"] { color: var(--gold) !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; } /* ════════════════════════════════════════════ PLACEHOLDER, FOCUS, DISABLED ════════════════════════════════════════════ */ ::placeholder { color: var(--text-muted) !important; opacity: 0.7; } input:focus, select:focus, textarea:focus { outline-color: var(--gold) !important; border-color: var(--gold) !important; } input:disabled, select:disabled, button:disabled { opacity: 0.4 !important; cursor: not-allowed !important; } /* ════════════════════════════════════════════ TOOLTIP ════════════════════════════════════════════ */ [class*="tooltip"] { background: var(--surface-elevated) !important; color: var(--text) !important; border: 1px solid var(--border) !important; } /* ════════════════════════════════════════════ КАРТОЧКИ МАТЕРИАЛА ════════════════════════════════════════════ */ .material-card, .card, [class*="card"] { background: var(--bg-card) !important; border-color: var(--border) !important; color: var(--text) !important; } /* ════════════════════════════════════════════ FORK CARDS (выбор трека) ════════════════════════════════════════════ */ .fork-card { background: var(--surface) !important; border-color: var(--border) !important; } .fork-card-title { color: var(--text) !important; } .fork-card-desc { color: var(--text-soft) !important; } .fork-card.track-basic { border-color: var(--gold) !important; } .fork-card.track-full { border-color: var(--success) !important; } /* ════════════════════════════════════════════ SIDEBAR МОДУЛЕЙ ════════════════════════════════════════════ */ .sidebar, [class*="sidebar"], .module-list, [class*="module-list"] { background: var(--bg-sidebar) !important; border-color: var(--border) !important; } .module-item, [class*="module-item"] { color: var(--text-soft) !important; border-color: var(--border) !important; } .module-item.active, .module-item.current, [class*="module-item"].active { background: var(--surface-elevated) !important; color: var(--text) !important; border-left-color: var(--gold) !important; } .module-item.locked, [class*="locked"] { color: var(--text-mute) !important; opacity: 0.6; } .sidebar-title { color: var(--text-muted) !important; } .module-name { color: var(--text-soft) !important; } /* ════════════════════════════════════════════ ШАГИ (step) ════════════════════════════════════════════ */ .step { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; } .step-number, [class*="step-number"] { background: var(--gold) !important; color: var(--navy-dark) !important; } .step-title, [class*="step-title"] { color: var(--text) !important; } .step-body, [class*="step-body"], .step p, .step li { color: var(--text-soft) !important; } /* ════════════════════════════════════════════ HIGHLIGHT ROW ════════════════════════════════════════════ */ .highlight-row { background: var(--surface-elevated) !important; color: var(--text) !important; } /* ════════════════════════════════════════════ ВОПРОСЫ / OBJECTIONS ════════════════════════════════════════════ */ .question-card, .objection-card { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; } .objection-answer { color: var(--text-soft) !important; } /* ════════════════════════════════════════════ ХЕДЕР КУРСА ════════════════════════════════════════════ */ .course-header, [class*="course-header"], .day-header, [class*="day-header"] { background: var(--navy-dark) !important; color: var(--text) !important; } .day-badge { background: var(--gold-light) !important; color: var(--gold) !important; border-color: var(--gold) !important; } /* ════════════════════════════════════════════ MODULE TAG ════════════════════════════════════════════ */ .module-tag, [class*="module-tag"] { background: var(--gold-light) !important; color: var(--gold) !important; } /* ════════════════════════════════════════════ SECTION ICONS ════════════════════════════════════════════ */ .sec-icon { color: var(--gold) !important; } .sec-icon.sec-warn { color: var(--warn) !important; } /* ════════════════════════════════════════════ BREADCRUMB / NAV PILLS ════════════════════════════════════════════ */ [class*="breadcrumb"], [class*="nav-pill"] { background: var(--surface) !important; color: var(--text-soft) !important; border-color: var(--border) !important; } /* ════════════════════════════════════════════ ПАРАГРАФЫ И СПИСКИ ВНУТРИ КОМПОНЕНТОВ ════════════════════════════════════════════ */ .callout p, .callout li, .step p, .step li, .material-card p, .material-card li, .objection-card p, .objection-card li, .question-card p, .question-card li { color: var(--text) !important; } /* ════════════════════════════════════════════ FAQ / DETAILS ════════════════════════════════════════════ */ details, details.faq, details:not([class]) { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; } details summary, details.faq summary, details:not([class]) summary, .spoiler-toggle, .faq-toggle, [class*="faq"] summary { color: var(--text) !important; background: transparent !important; } .faq-body, details > div, details > p { color: var(--text-soft) !important; background: transparent !important; } .faq-question { color: var(--text) !important; } .faq-answer { color: var(--text-soft) !important; } /* ════════════════════════════════════════════ ПРОМПТ-КАРТОЧКИ / SPOILER ════════════════════════════════════════════ */ .prompt-card, [class*="prompt-card"], .spoiler, [class*="spoiler"] { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; } /* ════════════════════════════════════════════ КНОПКИ ════════════════════════════════════════════ */ .test-start-btn, [class*="start-btn"], [class*="test-btn"] { background: var(--gold) !important; color: var(--navy-dark) !important; border: none !important; } /* Стрелка details ▾ */ summary::marker, summary::-webkit-details-marker { color: var(--gold) !important; } /* ════════════════════════════════════════════ РАЗДЕЛИТЕЛИ / HR ════════════════════════════════════════════ */ hr { border-color: var(--border) !important; } /* ════════════════════════════════════════════ INLINE-СТИЛИ: ПЕРЕБИВАЕМ ХАРДКОДНЫЕ ЦВЕТА ════════════════════════════════════════════ */ /* Белые/светлые фоны */ [style*="background: #F"], [style*="background:#F"], [style*="background: white"], [style*="background:white"], [style*="background-color: #F"], [style*="background-color:#F"] { background: var(--surface) !important; } /* Тёмный текст на тёмном фоне */ [style*="color: #1"], [style*="color:#1"], [style*="color: #2"], [style*="color:#2"], [style*="color: #3"], [style*="color:#3"] { color: var(--text) !important; } /* ════════════════════════════════════════════ DAY3: ПЕРЕОПРЕДЕЛЕНИЕ ПЕРЕМЕННЫХ Все var(--bg-primary), var(--text-primary) и т.д. уже переопределены в :root выше. Дополнительные точечные фиксы: ════════════════════════════════════════════ */ /* Accent (синий в day3) → золото */ a, .accent, [class*="accent"] { color: var(--gold) !important; } a:hover { color: var(--gold-hover) !important; } /* РИКЦ синий блок */ .ricz-block, [class*="ricz-blue-soft"] { background: var(--ricz-blue-soft) !important; border-color: var(--ricz-blue) !important; color: var(--text) !important; } /* ════════════════════════════════════════════ ОБЩИЙ СБРОС ════════════════════════════════════════════ */ * { --force-light-bg: initial; }