/* ============================================================ BeauTips — Тёмная тема Блок 1 · Большая ставка. Подключать ПОСЛЕ tokens.css (переопределяет семантические токены). Логика выбора темы: • по умолчанию — системная (prefers-color-scheme); • пользователь может форсировать через [data-theme="light|dark"] на (см. theme-toggle.js), это перебивает систему. Сырьё палитры (--c-*) не меняем — переопределяем только семантические алиасы, поэтому всё на токенах темнеет само. ============================================================ */ /* --- Набор переменных тёмной темы (переиспользуется дважды) --- */ :root[data-theme="dark"], .theme-dark { --color-bg: #0F1520; --color-surface: #18202E; --color-surface-2: #212C3D; --color-surface-sunken:#121926; --color-brand: #6E90D0; --color-brand-strong: #8AAAE5; --color-brand-hover: #8AAAE5; --color-brand-active: #B8CCEE; --color-brand-soft: rgba(110, 144, 208, 0.16); --color-accent: #8AAAE5; --color-on-brand: #0B1220; --color-ink: #EAF1FB; --color-text: #E3EAF5; --color-text-muted: #9FB0C6; --color-text-subtle: #6E7F97; --color-text-on-dark: #EAF1FB; --color-border: rgba(255, 255, 255, 0.10); --color-border-strong: rgba(255, 255, 255, 0.20); --color-border-brand: rgba(138, 170, 229, 0.38); --color-success: #4ADE80; --color-warning: #FBBF24; --color-danger: #FB7185; --color-info: #60A5FA; --c-success-soft: rgba(74, 222, 128, 0.16); --c-warning-soft: rgba(251, 191, 36, 0.16); --c-danger-soft: rgba(251, 113, 133, 0.16); --c-info-soft: rgba(96, 165, 250, 0.16); --c-success: #4ADE80; --c-warning: #FBBF24; --c-danger: #FB7185; --c-info: #60A5FA; --gradient-brand: linear-gradient(135deg, #2E4D85 0%, #6E90D0 100%); --gradient-brand-soft: linear-gradient(135deg, #3A5A96 0%, #8AAAE5 100%); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.50); --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.60); --shadow-brand: 0 10px 25px rgba(20, 40, 80, 0.55); --focus-ring-color: rgba(138, 170, 229, 0.70); } /* Системная тёмная тема — если пользователь НЕ форсировал светлую */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #0F1520; --color-surface: #18202E; --color-surface-2: #212C3D; --color-surface-sunken:#121926; --color-brand: #6E90D0; --color-brand-strong: #8AAAE5; --color-brand-hover: #8AAAE5; --color-brand-active: #B8CCEE; --color-brand-soft: rgba(110, 144, 208, 0.16); --color-accent: #8AAAE5; --color-on-brand: #0B1220; --color-ink: #EAF1FB; --color-text: #E3EAF5; --color-text-muted: #9FB0C6; --color-text-subtle: #6E7F97; --color-text-on-dark: #EAF1FB; --color-border: rgba(255, 255, 255, 0.10); --color-border-strong: rgba(255, 255, 255, 0.20); --color-border-brand: rgba(138, 170, 229, 0.38); --color-success: #4ADE80; --color-warning: #FBBF24; --color-danger: #FB7185; --color-info: #60A5FA; --c-success-soft: rgba(74, 222, 128, 0.16); --c-warning-soft: rgba(251, 191, 36, 0.16); --c-danger-soft: rgba(251, 113, 133, 0.16); --c-info-soft: rgba(96, 165, 250, 0.16); --c-success: #4ADE80; --c-warning: #FBBF24; --c-danger: #FB7185; --c-info: #60A5FA; --gradient-brand: linear-gradient(135deg, #2E4D85 0%, #6E90D0 100%); --gradient-brand-soft: linear-gradient(135deg, #3A5A96 0%, #8AAAE5 100%); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.50); --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.60); --shadow-brand: 0 10px 25px rgba(20, 40, 80, 0.55); --focus-ring-color: rgba(138, 170, 229, 0.70); } } /* ============================================================ Структурные правки шелла для тёмной темы. Здесь — только то, что задано жёстко картинкой/цветом и не покрывается токенами напрямую (фон , приглушение крупных светлых фото). Оборачиваем в общий селектор темы. ============================================================ */ :root[data-theme="dark"], :root:not([data-theme="light"]) { color-scheme: light dark; } /* Плавный переход при переключении темы */ html, body, .navbar, .footer, .ui-card, .chip, .badge, .input, .textarea, .select, .modal__dialog { transition: background-color var(--transition), color var(--transition), border-color var(--transition); } /* Тёмный фон вместо светлой картинки-подложки */ :root[data-theme="dark"] { --shell-bg-image: none; } html[data-theme="dark"], html[data-theme="dark"] body { background: radial-gradient(1200px 600px at 80% -10%, #1B2740 0%, transparent 60%), radial-gradient(900px 500px at 0% 0%, #16203A 0%, transparent 55%), var(--color-bg); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]), html:not([data-theme="light"]) body { background: radial-gradient(1200px 600px at 80% -10%, #1B2740 0%, transparent 60%), radial-gradient(900px 500px at 0% 0%, #16203A 0%, transparent 55%), var(--color-bg); } } /* Немного приглушаем крупные фото, чтобы не «слепили» в темноте */ html[data-theme="dark"] .hero-image img, html[data-theme="dark"] .about-image img { filter: brightness(0.85) saturate(0.95); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .hero-image img, html:not([data-theme="light"]) .about-image img { filter: brightness(0.85) saturate(0.95); } } /* ---------------- Кнопка-переключатель темы ---------------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: var(--space-4); border: 1.5px solid var(--color-border-brand); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-brand-strong); cursor: pointer; font-size: 20px; line-height: 1; flex-shrink: 0; transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition-fast); } .theme-toggle:hover { border-color: var(--color-brand); transform: translateY(-1px); } .theme-toggle:active { transform: translateY(0); } .theme-toggle:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); } /* Фиксированный вариант — для страниц без навбара */ .theme-toggle--floating { position: fixed; top: 18px; right: 18px; z-index: 10060; margin-left: 0; box-shadow: var(--shadow-sm); } /* Иконка: солнце в тёмной теме, луна — в светлой (показываем нужную) */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: inline; } html[data-theme="dark"] .theme-toggle .icon-sun { display: inline; } html[data-theme="dark"] .theme-toggle .icon-moon { display: none; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .theme-toggle .icon-sun { display: inline; } html:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; } }