/* ============================================================================= theme.css — тёмная тема Переопределяет дизайн-токены при data-theme="dark" на . Все компоненты, которые используют var(--token), автоматически перестраиваются. ============================================================================= */ /* Плавный переход цветов при смене темы */ html, body, .l-nav, .l-footer, .l-section, .l-cta, .sp-header, .sp-catalog, .sp-process, .dp-section, .dp-trust, .bp-section, .cp-section, .ap-hero, .ap-advantages, .ap-mission, .ap-stats, .bk-section, .bk-hero, .card, .stat-card, .l-service-card, .l-doctor-card, .l-review-card, .l-branch-card, .sp-card, .dp-card, .bp-card, .dp-trust-card, .ap-adv, .bk-cat, .bk-list__item, .bk-summary, .bk-calendar, .bk-doctor, .bk-time, .btn, .field__box, .badge { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } /* ---------- DARK THEME ---------- */ html[data-theme="dark"] { --primary: #3B82F6; --primary-dark: #60A5FA; --primary-light: #1E3A8A; --accent: #34D399; --bg: #0B1120; --bg-alt: #0F172A; /* ex #F8FAFC */ --surface: #1E293B; --surface-alt: #0F172A; --border: #334155; --overlay: rgba(0, 0, 0, 0.7); --text-primary: #F1F5F9; --text-secondary: #94A3B8; --text-muted: #64748B; --text-white: #F8FAFC; --success: #34D399; --success-light: #064E3B; --warning: #FBBF24; --warning-light: #78350F; --error: #F87171; --error-light: #7F1D1D; --info: #60A5FA; --info-light: #1E3A8A; --shadow-color: rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.5); /* Белые-альфа становятся чёрными-альфа для тёмных поверхностей */ --white-alpha-5: rgba(255, 255, 255, 0.04); --white-alpha-8: rgba(255, 255, 255, 0.08); } /* ---------- Специфичные правки, где были хардкодные цвета ---------- */ /* Страничные шапки, блоки с фоном #F8FAFC */ html[data-theme="dark"] .sp-header, html[data-theme="dark"] .sp-process, html[data-theme="dark"] .dp-trust, html[data-theme="dark"] .ap-advantages, html[data-theme="dark"] .ap-stats, html[data-theme="dark"] .bk-hero, html[data-theme="dark"] .bk-summary { background: var(--bg-alt); } /* Футер — сам по себе тёмный, в dark-теме делаем чуть иначе */ html[data-theme="dark"] .l-footer { background: #020617; } html[data-theme="dark"] .l-footer__divider { background: #1E293B; } /* Nav bar в тёмной теме */ html[data-theme="dark"] .l-nav { background: rgba(15, 23, 42, 0.7); border-bottom-color: var(--border); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } /* FAQ список фон */ html[data-theme="dark"] .l-faq-list { background: var(--surface); } html[data-theme="dark"] .l-faq-item__row:hover { background: var(--bg-alt); } /* Карточки врача на лендинге имеют фон --bg, оставим так */ html[data-theme="dark"] .l-doctor-card { background: var(--surface); } /* Reviews card с белым фоном */ html[data-theme="dark"] .l-review-card { background: var(--surface); border-color: var(--border); } html[data-theme="dark"] .l-review-card__quote { color: var(--text-primary); } /* Branch cards */ html[data-theme="dark"] .l-branch-card { background: var(--surface); } /* Login page gradient */ html[data-theme="dark"] .login-page { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%); } html[data-theme="dark"] .login-header__brand { color: var(--primary); } /* Hero gradient */ html[data-theme="dark"] .l-stats { background: var(--bg-alt); } /* Landing body */ html[data-theme="dark"] body.landing { background: var(--bg); } html[data-theme="dark"] .landing-wrap { background: var(--bg); } /* CTA block keep blue but slightly more saturated on dark */ html[data-theme="dark"] .l-cta { background: var(--bg); } html[data-theme="dark"] .l-cta__btn-primary { background: var(--surface); color: var(--primary); } html[data-theme="dark"] .l-cta__btn-primary:hover { background: var(--bg-alt); } /* Services process step icons background should stay light tint */ html[data-theme="dark"] .sp-step__icon { background: var(--primary-light); } /* Forms */ html[data-theme="dark"] .bk-form__input, html[data-theme="dark"] .bk-form__textarea, html[data-theme="dark"] .field__input, html[data-theme="dark"] .field__box { background: var(--surface); color: var(--text-primary); border-color: var(--border); } html[data-theme="dark"] .bk-form__input::placeholder, html[data-theme="dark"] .bk-form__textarea::placeholder { color: var(--text-muted); } /* Demo list в login */ html[data-theme="dark"] .demo-list__item { background: var(--surface); border-color: var(--border); } html[data-theme="dark"] .demo-list__item:hover { background: var(--primary-light); } /* Badges с светлыми фонами — в тёмной теме инвертируем */ html[data-theme="dark"] .badge { background: rgba(59, 130, 246, 0.15); color: #93C5FD; } html[data-theme="dark"] .badge--success { background: rgba(52, 211, 153, 0.15); color: #6EE7B7; } html[data-theme="dark"] .badge--warning { background: rgba(251, 191, 36, 0.15); color: #FCD34D; } html[data-theme="dark"] .badge--error { background: rgba(248, 113, 113, 0.15); color: #FCA5A5; }