/* ============================================================ dark-theme.css — токены и тёмная тема (Phase 1: shell) Активируется атрибутом data-theme="dark" на . Атрибут проставляет inline-скрипт из functions.php (no-flash) и обработчик кнопки переключения. ============================================================ */ /* ── Дизайн-токены ──────────────────────────────────────── */ :root { --c-bg: #ffffff; --c-bg-soft: #f7f3ec; --c-text: #2d2926; --c-text-muted: #6b5a48; --c-border: #ede8e0; --c-accent: #ff6f00; --c-link: #ff6f00; --c-card-bg: #ffffff; --c-card-border: #ede8e0; --c-shadow: 0 4px 20px rgba(0,0,0,0.06); --c-input-bg: #fafaf6; --c-overlay: rgba(0,0,0,0.04); } html[data-theme="dark"] { --c-bg: #161412; /* тёплый чёрный */ --c-bg-soft: #1f1c19; --c-text: #b8b1a4; /* приглушённый тёплый серый — комфортнее для долгого чтения */ --c-text-muted: #8c8273; --c-border: #3a342c; --c-accent: #ff8a3d; --c-link: #ffa566; --c-card-bg: #1f1c19; --c-card-border: #3a342c; --c-shadow: 0 4px 20px rgba(0,0,0,0.4); --c-input-bg: #25211d; --c-overlay: rgba(255,255,255,0.04); color-scheme: dark; } /* ── Верхнее меню в тёмной теме ───────────────────────── Customizer Additional CSS красит кнопки в `background:white;color:#333` с оранжевой рамкой. На тёмном фоне эти белые кнопки выбиваются. Перекрашиваем: тёмный фон / светлый текст / оранжевая рамка остаётся. Hover/current — оранжевая заливка с тёмным текстом (читаемо). */ /* Десктоп — основной горизонтальный ряд кнопок */ html[data-theme="dark"] body #top-menu > li > a, html[data-theme="dark"] body #top-menu > li > div > a { background: var(--c-card-bg) !important; color: var(--c-text) !important; } html[data-theme="dark"] body #top-menu > li > a:hover, html[data-theme="dark"] body #top-menu > li > div > a:hover, html[data-theme="dark"] body #top-menu .current-menu-item > a, html[data-theme="dark"] body #top-menu .current_page_item > a, html[data-theme="dark"] body #top-menu .current-menu-ancestor > a, html[data-theme="dark"] body #top-menu .current-menu-ancestor > div > a { background: var(--c-accent) !important; color: #1a1a1a !important; } /* FA-иконки и chevron ▾ внутри активной/наведённой кнопки — тёмный текст вместо оранжевого, чтобы читались на оранжевой заливке */ html[data-theme="dark"] body #top-menu li:hover > a .menu-fa-icon, html[data-theme="dark"] body #top-menu .current-menu-item > a .menu-fa-icon, html[data-theme="dark"] body #top-menu .current-menu-ancestor > a .menu-fa-icon { color: #1a1a1a !important; } /* Десктоп-дропдаун (.sub-menu) */ html[data-theme="dark"] body #top-menu .menu-item-has-children > .sub-menu { background: var(--c-card-bg) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important; } html[data-theme="dark"] body #top-menu .sub-menu .menu-item a { background: var(--c-card-bg) !important; color: var(--c-text) !important; border-bottom-color: var(--c-card-border) !important; } html[data-theme="dark"] body #top-menu .sub-menu .menu-item a:hover, html[data-theme="dark"] body #top-menu .sub-menu .current-menu-item a { background: var(--c-bg-soft) !important; color: var(--c-accent) !important; } /* Мобильное меню (≤767px) — раскрывающийся список */ @media (max-width: 767px) { html[data-theme="dark"] body .toggled #top-menu, html[data-theme="dark"] body .toggled-on #top-menu { background: var(--c-card-bg) !important; border-color: var(--c-card-border) !important; box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important; } html[data-theme="dark"] body .toggled #top-menu > li > a, html[data-theme="dark"] body .toggled-on #top-menu > li > a, html[data-theme="dark"] body .toggled #top-menu > li > div > a, html[data-theme="dark"] body .toggled-on #top-menu > li > div > a { background: var(--c-card-bg) !important; color: var(--c-text) !important; } html[data-theme="dark"] body .toggled #top-menu > li > a:hover, html[data-theme="dark"] body .toggled-on #top-menu > li > a:hover, html[data-theme="dark"] body .toggled #top-menu > li > div > a:hover, html[data-theme="dark"] body .toggled-on #top-menu > li > div > a:hover { background: var(--c-bg-soft) !important; color: var(--c-accent) !important; } /* Контурная рамка вокруг каждого пункта (была cyan #4ab3e8) — оранжевая */ html[data-theme="dark"] body .toggled #top-menu > li, html[data-theme="dark"] body .toggled-on #top-menu > li { outline-color: var(--c-accent) !important; } /* Маленькая кнопка ▼ (.dropdown-toggle) — оранжевая рамка */ html[data-theme="dark"] body .main-navigation .dropdown-toggle { border-color: var(--c-accent) !important; } html[data-theme="dark"] body .main-navigation .dropdown-toggle svg, html[data-theme="dark"] body .main-navigation .dropdown-toggle .svg-icon { fill: var(--c-accent) !important; } /* Раскрытое мобильное подменю (Библиография / Публикации / Тесты) */ html[data-theme="dark"] body .menu-item-has-children > .sub-menu.toggled-on { background: var(--c-bg-soft) !important; } html[data-theme="dark"] body .sub-menu.toggled-on .menu-item a { background: var(--c-bg-soft) !important; color: var(--c-text) !important; } html[data-theme="dark"] body .sub-menu.toggled-on .menu-item a:hover { background: var(--c-card-bg) !important; color: var(--c-accent) !important; } } /* ── Лейаут (вне зависимости от темы) ──────────────────── */ /* На мобиле .content-block переключается в flex-direction: column; но иконка-эмодзи остаётся прижата к левому краю. Центрируем её. */ @media (max-width: 767px) { body .content-block { align-items: center !important; } body .block-icon { text-align: center !important; } } /* ── Унификация светлой темы ───────────────────────────── Кремовый «полевой» фон страницы как на /contacts/ — для всех страниц одинаково (#f5f3f0). На внутренних страницах раньше был чисто белый. */ body { background: #f5f3f0; } .site-content-contain, .site-content { background: transparent; } /* Унифицируем верхнее меню: разные шаблоны страниц перебивали padding на .navigation-top .wrap по-разному (одни через `.page .wrap { padding:0 }` из page-templates, другие оставляли дефолтный `0.75em 2em` от темы), из-за чего меню скакало на ~21px по высоте между разделами. Жёстко пиним padding=0 везде. Фон следует теме: светлая = кремовый, тёмная = чёрный. */ .navigation-top { background: #f5f3f0; /* кремовый, как body в светлой теме */ } .navigation-top .wrap { padding: 0 !important; max-width: 1000px; margin: 0 auto; } /* ── Кнопка переключателя ──────────────────────────────── */ /* Десктоп: пиним к viewport через position: fixed — иначе на главной (.site-branding = table-cell, full width) и на внутренних страницах (.site-branding с padding-side 32px) right:16px давал разный абсолютный X (расхождение ~32px). С fixed switcher всегда в одной и той же точке относительно окна. */ .site-branding { position: relative; } /* Резервируем место справа в шапке под switcher, чтобы заголовок и логотип не наезжали на круглую кнопку (она position:fixed и сидит поверх layout-а). 60px (size) + 32px (right offset) + 12px зазор = 104px. Селектор начинается с `#masthead` (ID = specificity +100), чтобы перебить: - Customizer custom_css `.site-branding .wrap { padding: 0 !important }` - page-templates `.page .wrap { padding: 0 !important }` */ #masthead .site-branding .wrap, #masthead .site-branding-text { padding-right: 104px !important; } .theme-toggle { position: fixed; /* Центрируем по высоте custom-header (120px) — кнопка ≈половины высоты шапки (60px), top считается так, чтобы её центр совпал с центром шапки. Шапка начинается под admin-bar (если есть). */ top: 30px; /* (120 - 60) / 2 = 30, относительно верха шапки */ right: 32px; z-index: 9999; width: 60px; height: 60px; padding: 0; margin: 0; border: 1px solid rgba(255,255,255,0.55); border-radius: 50%; background: rgba(0,0,0,0.50); color: #fff; cursor: pointer; font-size: 26px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s, transform .15s; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-family: -apple-system, "Segoe UI Emoji", "Apple Color Emoji", system-ui, sans-serif; } /* Залогиненные видят WP admin-bar (32px на десктопе, 46px на узких) — шапка визуально начинается ниже на эту высоту, switcher тоже. */ body.admin-bar .theme-toggle { top: 62px; /* 32 (admin-bar) + 30 (центр шапки) */ } @media (max-width: 782px) { body.admin-bar .theme-toggle { top: 76px; /* 46 + 30 */ } } .theme-toggle:hover { background: rgba(0,0,0,0.65); border-color: rgba(255,255,255,0.75); transform: scale(1.06); } .theme-toggle:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; } .theme-toggle .ic-sun, .theme-toggle .ic-moon { display: inline-block; } .theme-toggle .ic-moon { display: none; } html[data-theme="dark"] .theme-toggle .ic-sun { display: none; } html[data-theme="dark"] .theme-toggle .ic-moon { display: inline-block; } /* ─── Переключатель языка (рядом с theme-toggle) ─────────────── */ .lang-switcher { position: fixed; top: 36px; /* центр шапки 120px */ right: 104px; /* 32 + 60 (theme-toggle) + 12 gap */ z-index: 9999; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } body.admin-bar .lang-switcher { top: 68px; } @media (max-width: 782px) { body.admin-bar .lang-switcher { top: 82px; } } .lang-switcher-toggle { display: inline-flex; align-items: center; gap: 6px; height: 48px; padding: 0 12px; border: 1px solid rgba(255,255,255,0.55); border-radius: 26px; background: rgba(0,0,0,0.50); color: #fff; cursor: pointer; font-size: 14px; font-weight: 700; line-height: 1; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .15s, border-color .15s, transform .15s; font-family: inherit; } .lang-switcher-toggle:hover { background: rgba(0,0,0,0.65); border-color: rgba(255,255,255,0.75); transform: scale(1.04); } .lang-switcher-toggle .lang-flag { font-size: 18px; line-height: 1; } .lang-switcher-toggle .lang-code { letter-spacing: 0.5px; } .lang-switcher-toggle .lang-chevron { font-size: 12px; opacity: 0.85; transition: transform .2s; } .lang-switcher.open .lang-switcher-toggle .lang-chevron { transform: rotate(180deg); } .lang-switcher-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 170px; margin: 0; padding: 6px; list-style: none; background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); border: 1px solid rgba(0,0,0,0.08); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; } .lang-switcher.open .lang-switcher-menu { opacity: 1; transform: translateY(0); pointer-events: auto; } .lang-switcher-menu li { margin: 0; padding: 0; } .lang-switcher-menu .lang-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: #1f2937; text-decoration: none; font-size: 14px; font-weight: 600; transition: background .12s; } .lang-switcher-menu .lang-item:hover { background: #f0f4fa; color: #1f2937; } .lang-switcher-menu .lang-item.is-current { background: linear-gradient(135deg, rgba(102,126,234,.12), rgba(118,75,162,.14)); color: #4338ca; } .lang-switcher-menu .lang-item .lang-flag { font-size: 18px; line-height: 1; } /* Дарк-режим — выпадашка тёмная */ html[data-theme="dark"] .lang-switcher-menu { background: #1f2937; border-color: rgba(255,255,255,0.10); box-shadow: 0 10px 30px rgba(0,0,0,0.6); } html[data-theme="dark"] .lang-switcher-menu .lang-item { color: #e5e7eb; } html[data-theme="dark"] .lang-switcher-menu .lang-item:hover { background: rgba(255,255,255,0.08); color: #fff; } html[data-theme="dark"] .lang-switcher-menu .lang-item.is-current { background: linear-gradient(135deg, rgba(102,126,234,.28), rgba(118,75,162,.30)); color: #fff; } @media (max-width: 600px) { .lang-switcher { top: 14px; right: 60px; } body.admin-bar .lang-switcher { top: 60px; } .lang-switcher-toggle { height: 40px; padding: 0 10px; font-size: 12px; gap: 4px; } .lang-switcher-toggle .lang-flag { font-size: 15px; } } @media (max-width: 600px) { /* ── Мобильная шапка: трёхколоночная компоновка ──────────── [Лого] [Заголовок (2 строки)] [Переключатель темы] */ .site-branding { padding: 0.8em 0 !important; } #masthead .site-branding .wrap { display: flex !important; align-items: center; gap: 10px; flex-wrap: nowrap; max-width: 100%; box-sizing: border-box; /* 44px switcher + 16px right offset + 12px зазор = 72px */ padding-right: 72px !important; } #masthead .site-branding-text { padding-right: 0 !important; /* offset уже на .wrap */ } .custom-logo-link { flex: 0 0 auto; padding-right: 0 !important; margin: 0; } .custom-logo-link img { max-height: 44px !important; width: auto; } body:not(.title-tagline-hidden) .site-branding-text { flex: 1 1 auto; min-width: 0; /* позволяет flex-ребёнку сжиматься и переносить */ display: block !important; max-width: none !important; padding-right: 0 !important; } /* Перебиваем inline-стили (из WPCode), у которых .site-title a имеет white-space: nowrap !important, а .site-branding-text — overflow: hidden. Бампим специфичность через body, чтобы точно выиграть. */ body .site-branding-text { overflow: visible !important; text-overflow: clip !important; } body .site-title, body .site-title a, body h1.site-title, body p.site-title { font-size: 11px !important; line-height: 1.25 !important; letter-spacing: 0.02em !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; word-wrap: break-word !important; word-break: break-word !important; overflow-wrap: anywhere !important; hyphens: auto; max-width: 100% !important; padding-right: 0 !important; display: block !important; } .site-description { font-size: 10.5px !important; line-height: 1.3 !important; white-space: normal !important; overflow: visible !important; } /* Переключатель остаётся position:fixed (см. основное правило выше), просто на узких экранах делаем его компактнее и сдвигаем чуть ниже под admin-bar. Position:static больше не нужен — кнопка перенесена JS-ом в и не сидит внутри .site-branding. */ .theme-toggle { width: 44px !important; height: 44px !important; font-size: 20px !important; top: 12px !important; right: 16px !important; } body.admin-bar .theme-toggle { top: 58px !important; /* 46 (admin-bar mobile) + 12 */ } } /* ============================================================ ТЁМНАЯ ТЕМА: PHASE 1 — обвязка (shell) ============================================================ */ /* ── Базовый body / page ───────────────────────────────── */ /* Общий фон страницы в тёмной теме — чёрный (#000). Карточки и подконтейнеры остаются `--c-card-bg` (#1f1c19) — тёплый чёрный. !important — потому что в теме много inline-