/* Theme Name: Ханака Theme URI: https://hanaka.kz Description: Дочерняя тема Make Progress 3 для Дома медитаций «Ханака». Все правки стиля живут здесь — родительская тема не трогается и обновляется безопасно. Author: Ханака Author URI: https://hanaka.kz Template: make-progress-3 Version: 1.75.5 Text Domain: hanaka */ /* ========================================================================== Стиль Ханаки Пока пусто: палитра и шрифты ждут выбора команды по подборщику стиля. Правило контраста (брендбук, разд. 5.8) — акцент в четырёх ролях: --acc заливки, линейки, рамки (контраст не нужен) --acc-text подписи, ссылки, цифры (контраст >= 4.5) --acc-dark то же на тёмных фонах --on-acc текст поверх заливки Переменные родительской темы, которые перекрываются отсюда: --prime-font --accent --light-col --grey-col --grey-bg --border-col --rich-border-col --placeholder --bold --width --ghost --call ========================================================================== */ :root { /* ждёт выбора команды */ } /* ======================= Размещайте ваши стили под этой строкой ======================= */ /* --------------------------------------------------------------------------- ФОН СТРАНИЦЫ — бумага Почему не хватает настройки «Фон» в настройщике: тема кладёт поверх body два непрозрачных белых контейнера: .site-wrapper { background: var(--light-col) } где --light-col: #fff .main { background: var(--light-col) } Фон body под ними не виден вообще. Поэтому красим их напрямую. Почему не меняем саму --light-col: она работает в 32 местах как фон и ещё в 17 как цвет текста (белые буквы на тёмном и на шафране). Глобальная замена сломала бы контраст надписей на шафрановых кружках. --------------------------------------------------------------------------- */ .site-wrapper, .main { background: var(--hanaka-bg-color, #F4EDE1); } /* --hanaka-bg-color — поле «Цвет фона страницы» в Настройщике (functions.php, wp_head). Запасное значение #F4EDE1 срабатывает, если переменной ещё нет. */ /* --------------------------------------------------------------------------- ШРИФТЫ ХАНАКИ Cormorant Garamond — заголовки · Spectral — текст Заменяют Montserrat (Паспорт 13.5 — «не как у всех»). Файлы лежат локально в themes/hanaka/fonts/ — так же, как тема держит Montserrat: без обращения к чужим серверам. Разбиты на сабсеты кириллица/латиница: браузер тянет только то, что реально нужно. Cormorant — переменный шрифт: один файл на весь диапазон 300–700. --------------------------------------------------------------------------- */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('fonts/CormorantGaramond-300-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('fonts/CormorantGaramond-300-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Spectral'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Spectral-400-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Spectral'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Spectral-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Spectral'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Spectral-600-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Spectral'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Spectral-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Manrope — единственный гротеск в наборе, добавлен 12.08.2026 по просьбе Еркина. Переменный: один файл покрывает веса 300-600, поэтому начертаний всего два (кириллица и латиница), а не четыре, как у Spectral. */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('fonts/Manrope-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('fonts/Manrope-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* — применение — */ :root { --prime-font: "Spectral", Georgia, serif; /* переменная самой темы */ --hanaka-disp: "Cormorant Garamond", Georgia, serif; --bold: 600; /* у Spectral нет 700, есть 600 */ } /* Тема ставит body в 500. У Spectral такого начертания нет — браузер стал бы синтезировать жирность и замылил бы буквы. */ body { font-family: var(--prime-font); font-weight: 400; } b, strong, th, .bold { font-weight: 600; } /* Заголовки — Cormorant. Он узкий и с маленькой строчной, поэтому на том же кегле выглядит мельче Montserrat. */ h1, h2, h3, h4, h5, h6, .poster__title, .section-title, .site-title__name { font-family: var(--hanaka-disp); /* Тема давала заголовкам font-weight: var(--bold) = 700 (жирный Montserrat). 300 было ошибкой: это значение из подборщика, где заголовки 38–70px. На здешних ~21px тонкая антиква теряется рядом с текстом. Cormorant переменный (300–700) — вес меняется без новых файлов. */ font-weight: 600; letter-spacing: 0.01em; } /* РАЗМЕРЫ ЗАГОЛОВКОВ — базовые числа здесь не меняются, масштаб — блоком ниже. Было ошибкой: h1 { font-size: 1.12em } — em считается от родителя, а не от собственного размера заголовка. Это не прибавка 12%, а полная замена: .poster__title превращался из 1.8rem в ~1.12rem и становился мельче соседнего текста. */ /* Кнопки, поля форм и ВЕРХНЕЕ (десктопное, ≥1280px) меню — на текстовом шрифте: антиква в мелких интерфейсных элементах читается хуже. */ .btn, .nav-menu li a, input, textarea, select { font-family: var(--prime-font); } /* --------------------------------------------------------------------------- МЕНЮ НА ТЕЛЕФОНЕ (.mobile-menu, <1280px, ~90% посетителей) — верхний уровень на Cormorant Garamond, живьём проверено на самом сайте 06.09.2026. Прямая замена шрифта без правок не годится (тот же вывод, что и в комментарии выше): на кегле темы 1rem антиква выглядит тонкой и вялой. Кегль поднят до 1.55rem — компенсирует разницу высоты строчной буквы у Cormorant (0.39 от кегля) против Manrope (0.54), см. правило проверки заголовков. Только пункты ВЕРХНЕГО уровня (`> li > a`) — подпункты в раскрывающихся списках остаются на Manrope, их этот вывод не касается. --------------------------------------------------------------------------- */ .mobile-menu > li > a { font-family: var(--hanaka-disp); font-weight: 600; font-size: 1.43rem; line-height: 1.15; padding: 0.7rem 0; } /* --------------------------------------------------------------------------- РАСКЛАДКА «ОГЛАВЛЕНИЕ» — выбрана Еркиным 06.09.2026 (вариант 02 из четырёх живых кадров на пульте Сайт/варианты_меню_телефон_06.09.2026/). Два замечания, ради которых всё это: 1. Слишком много воздуха между пунктами — низ меню приходилось доставать прокруткой. Замер до правки: пункт 69 px (кегль 23,9 · межстрочный 1,65 · отступы по 14,6), шесть пунктов 412 px. Стало: кегль 22 · межстрочный 1,15 · отступы по 10,8 — пункт около 47 px. Кегль снижен только на полтора пункта: читают пожилые люди, место сэкономлено на пустоте, а не на буквах. 2. Маленькая стрелка разворота непонятна посетителю. Было: значок 13 px, приглушён наполовину, висел за краем текста. Стало: шеврон в золотом кружке 27 px у правого края — читается как кнопка. ⚙️ Механика темы не тронута. Раскрывает подменю темовой custom.js по клику по всему
  • , а сама ссылка — inline-block шириной по тексту. Поэтому нажатие на название ведёт на страницу, а нажатие правее (включая кружок) — раскрывает список. Ссылке НЕЛЬЗЯ давать display: block или ширину на всю строку — тогда раздел перестанет раскрываться вовсе. Снимается целиком вместе с файлом images/chevron-down.svg. --------------------------------------------------------------------------- */ /* волосяная линейка между разделами — видно, где кончается один и начинается следующий; цвет — золото сайта в четверть силы */ .mobile-menu > li { border-bottom: 1px solid rgba(185, 150, 90, .3); } .mobile-menu > li:last-child { border-bottom: 0; } /* шеврон в золотом кружке вместо маленькой стрелки темы. transform: none обязателен — тема крутит свою стрелку на 90°, а наш значок уже смотрит вниз */ .mobile-menu > li.menu-item-has-children::before { top: 0.62rem; right: 0; width: 1.75rem; height: 1.75rem; border: 1px solid rgba(185, 150, 90, .55); border-radius: 50%; background-image: url('images/chevron-down.svg'); background-size: 0.78rem 0.78rem; opacity: 1; transform: none; transition: transform .2s ease; } /* развёрнутый раздел — шеврон смотрит вверх. Класса у темы нет: jQuery slideToggle пишет display прямо в style, поэтому ловим его. Если тема когда-нибудь пересядет на классы, шеврон просто перестанет поворачиваться — ничего не сломается */ .mobile-menu > li.menu-item-has-children:has(> .sub-menu[style*="block"])::before { transform: rotate(180deg); } /* подпункты — без серой коробки темы, с золотой чёрточкой. Кегль не трогаем: он и так мелкий (1rem гротеском) */ .mobile-menu .sub-menu { border-radius: 0; padding: 0 0 0.55rem 0.15rem; background-color: transparent; } .mobile-menu .sub-menu a { position: relative; padding: 0.4rem 0 0.4rem 0.9rem; } .mobile-menu .sub-menu a::before { content: ""; position: absolute; left: 0; top: 1.08rem; width: 5px; height: 1px; background: var(--hnk-gold-line, #B9965A); } /* --------------------------------------------------------------------------- МАСШТАБ ТЕКСТА — ползунок в Настройщике (Внешний вид → Настроить → «Ханака — шрифты и фон») html{font-size} — общий множитель для rem по всей теме: абзацы, кнопки, меню, поля форм — всё, кроме заголовков (у них свой множитель ниже — иначе один html{font-size} тянул бы их вместе с текстом, раздельного диала бы не получилось). Значения 16/15/14px и точки переключения 1500px/500px — из родительской темы (style.css, разд. «04 Базовые контейнеры»). --hanaka-text-scale задаётся инлайн-стилем в wp_head (functions.php); запасное значение 1 даёт родительские 16/15/14px без изменений. --------------------------------------------------------------------------- */ html { font-size: calc(16px * var(--hanaka-text-scale, 1)); } @media (max-width: 1500px) { html { font-size: calc(15px * var(--hanaka-text-scale, 1)); } } @media (max-width: 500px) { html { font-size: calc(14px * var(--hanaka-text-scale, 1)); } } /* --------------------------------------------------------------------------- МАСШТАБ ЗАГОЛОВКОВ — отдельный ползунок от текста В родительской теме нет одной переменной для размера всех заголовков — каждый селектор несёт своё число rem на каждой точке перелома. Чтобы масштабировать их отдельно от текста, пришлось повторить эти числа здесь (взяты из исходников родительской темы, не выдуманы) и умножить каждое на --hanaka-heading-scale. Селекторы и точки перелома взяты из родительского style.css буквально — включая специфичность у a.site-title__name (иначе мобильные точки перелома родителя перебьют нашу правку из-за большей специфичности). --------------------------------------------------------------------------- */ .poster__title { font-size: calc(1.8rem * var(--hanaka-heading-scale, 1)); } @media (max-width: 800px) { .poster__title { font-size: calc(1.45rem * var(--hanaka-heading-scale, 1)); } } /* Заголовок страницы. Поднят вместе со шкалой h1–h3 21.08.2026: при старых 1,8rem он оказался мельче h2 внутри своей же страницы. */ .single-title { font-size: calc(2.4rem * var(--hanaka-heading-scale, 1)); } @media (max-width: 800px) { .single-title { font-size: calc(2rem * var(--hanaka-heading-scale, 1)); } } @media (max-width: 415px) { .single-title { font-size: calc(1.7rem * var(--hanaka-heading-scale, 1)); } } a.site-title__name { font-size: calc(1.3rem * var(--hanaka-heading-scale, 1)); } @media (max-width: 700px) { a.site-title__name { font-size: calc(1.2rem * var(--hanaka-heading-scale, 1)); } } @media (max-width: 500px) { a.site-title__name { font-size: calc(1.1rem * var(--hanaka-heading-scale, 1)); } } /* Шкала заголовков в тексте страниц — добавлено Claude Code 19.08.2026. Было: h1 1.3 / h2 1.25 / h3 1.2 rem — шаг 0,05rem, то есть H2 и H3 отличались на 0,8 px и читались как один уровень: на странице «Вопросы» раздел выглядел так же, как вопрос внутри него. Стало: шаг ≈ 1,25 между уровнями. Множитель --hanaka-heading-scale сохранён, ползунок в Настройщике работает. */ /* 🔴 ПЕРЕСЧИТАНО 21.08.2026 — правило «не мельче 1,45rem». Старые числа (h1 2 / h2 1.62 / h3 1.28 / h4 1.12 / h5 1.04 / h6 0.96) брались как если бы заголовок и текст были одним шрифтом. Они разные, и глаз сравнивает не кегль, а высоту строчной буквы. Замерено в браузере: Cormorant — 0,39 от кегля, Manrope — 0,54. Разница в 1,385 раза. Поэтому h3 на 1,28rem давал строчную 8,24 против 9,36 у абзаца — заголовок выглядел мельче текста, который озаглавлял (30+ вопросов на /voprosy/). Правило: антиква мельче ≈ 1,45rem рядом с Manrope читается как мелкий текст, а не как заголовок. Поэтому h1–h3 подняты выше этой границы, а h4–h6 — редкие служебные уровни, на сайте сейчас не встречаются ни разу — переведены на текстовой шрифт. Это то же решение, что выше для кнопок и меню: антиква в мелких элементах читается хуже. Шаг между уровнями ≈ 1,23. */ .post-content h1 { font-size: calc(2.3rem * var(--hanaka-heading-scale, 1)); } .post-content h2 { font-size: calc(1.85rem * var(--hanaka-heading-scale, 1)); } .post-content h3 { font-size: calc(1.5rem * var(--hanaka-heading-scale, 1)); } .post-content h4, .post-content h5, .post-content h6 { font-family: var(--prime-font); letter-spacing: 0; } .post-content h4 { font-size: calc(1.15rem * var(--hanaka-heading-scale, 1)); } .post-content h5 { font-size: calc(1.06rem * var(--hanaka-heading-scale, 1)); } .post-content h6 { font-size: calc(1rem * var(--hanaka-heading-scale, 1)); } /* Сброс темы обнуляет margin у всего, поэтому заголовок был приклеен к предыдущему абзацу. Группировку в длинном тексте делает воздух, не только кегль. */ .post-content h2 { margin-top: 2.2em; margin-bottom: .55em; } .post-content h3 { margin-top: 1.75em; margin-bottom: .4em; } .post-content h4 { margin-top: 1.6em; margin-bottom: .4em; } .post-content > *:first-child { margin-top: 0; } .post-content h1, .post-content h2, .post-content h3 { text-wrap: balance; } /* Заголовок карточки записи — добавлено Claude Code 21.08.2026. Родительская тема даёт .entry__title и .entry__anons один и тот же 1rem — это задумано: в её Montserrat заголовок видно по насыщенности и по золотой волосяной линии под ним (.entry__title::before). После смены пары шрифтов это перестало работать: у Cormorant строчная примерно на треть ниже, чем у Manrope, и на том же кегле заголовок читается мельче описания. Ступень взята та же, что у h3 в тексте статьи, и тот же множитель ползунка. */ .entry__title { font-size: calc(1.5rem * var(--hanaka-heading-scale, 1)); line-height: 1.3; } /* Те же два случая в карточках темы — найдены сплошным замером сайта 21.08.2026. Имя ведущей: было 1,1rem при подписи роли в 1rem — строчная 7,08 против 8,91, то есть имя выглядело мельче своей же подписи. Вопрос в аккордеоне «Если Вы впервые»: было 1rem при ответе в 1rem — строчная 6,44 против 8,91, самое сильное расхождение на сайте. В родном Montserrat темы оба случая работали — разница шла по насыщенности. */ .team-item__name, .faq-accordion__title, .service-item__title, .portfolio-item__title { font-size: calc(1.5rem * var(--hanaka-heading-scale, 1)); line-height: 1.3; } /* --------------------------------------------------------------------------- МЕЖСТРОЧНЫЙ ИНТЕРВАЛ — ползунок в том же разделе Настройщика Тема держит body{line-height:1.65} жёстко. Передаём через переменную — заголовки со своим line-height (130%/1.4) этот диал не затрагивает. --------------------------------------------------------------------------- */ body { line-height: var(--hanaka-line-height, 1.65); } /* --------------------------------------------------------------------------- ДОБАВОЧНЫЕ ПАРЫ ГАРНИТУР — переключатель в Настройщике (Разд. «Шрифты и фон» — «Пара шрифтов»). Отобраны из того же живого подбора, что и текущая пара (Cormorant Garamond + Spectral) — артефакт «выбор визуального стиля», версия 3. Кириллица проверена технически (запрос к Google Fonts с кириллическим текстом), файлы свои — скачаны один раз и лежат в fonts/, внешний сервер не запрашивается. Какая пара активна — решает wp_head (functions.php): он перезаписывает --prime-font и --hanaka-disp из этого файла. Здесь — только шрифтовые файлы, без применения по умолчанию. --------------------------------------------------------------------------- */ @font-face { font-family: 'Lora'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/Lora-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Lora'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/Lora-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'PT Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/PTSerif-400-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'PT Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/PTSerif-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'PT Serif'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/PTSerif-700-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'PT Serif'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/PTSerif-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Literata'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/Literata-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Literata'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/Literata-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/SourceSerif4-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/SourceSerif4-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Alegreya'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/Alegreya-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Alegreya'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/Alegreya-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Noto Serif'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/NotoSerif-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Noto Serif'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/NotoSerif-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* --------------------------------------------------------------------------- ЦВЕТ ФОНА КАРТОЧЕК — переключатель в Настройщике (разд. «🔧 Ассистент: Шрифты и фон» — «Цвет фона карточек и блоков»). Родительская тема красит все карточки и одной той же переменной --light-col (белый по умолчанию), что и 32 других места включая 17 случаев, где это — цвет текста (белые буквы на шафрановой заливке и тёмном фоне). Менять --light-col целиком нельзя — поэтому здесь отдельная переменная --hanaka-card-bg, применённая точечно к карточкам/блокам, без модальных окон, полей форм и иконок мобильного меню — там белый цвет функционален, менять его не просили. --------------------------------------------------------------------------- */ .service-list__item, .products-item, .team-list__item, .feedback-list__item, .benefits__item, .faq-accordion__item, .entry, .single-service, .single-folio, .single-team, .single-products, .cpt-slider, .service-portfolio { background-color: var(--hanaka-card-bg, #fff); } /* --------------------------------------------------------------------------- ВНУТРЕННИЕ СТРАНИЦЫ — бумажный фон вместо белого листа Фон страницы уже кремовый (.site-wrapper / .main выше в этом файле), но родительская тема кладёт поверх него непрозрачную белую секцию: .single-post, .post-archive, .blog { background-color: var(--light-col) } Именно она и делала «О Ханаке» белой. Настройки для неё в консоли нет (разд. «Оформление» красит кнопки, шрифты, ссылки, меню, боковую колонку и подвал — фона контента там нет), поэтому снимаем заливку здесь. Прозрачность, а не свой цвет: тогда секция наследует общий фон страницы, и поле «Цвет фона страницы» в Настройщике продолжает всем управлять. --------------------------------------------------------------------------- */ .single-post, .post-archive, .blog { background-color: transparent; } /* --------------------------------------------------------------------------- МОБИЛЬНОЕ МЕНЮ — кнопка остаётся на экране при прокрутке По инструкции темы (разд. 46) на ширине 1280px и ниже боковая колонка превращается в шапку, а меню — в «бургер». Кнопка уезжает вверх вместе с шапкой; настройки, которая бы её удержала, в теме нет. Поэтому вынимаем кнопку из потока и держим в правом верхнем углу окна. Круг под ней — #007A6D, тот же цвет, что стоит в консоли темы как фон боковой колонки. Линии бургера тема красит в --light-col (белый), так что контраст на этом круге сохраняется. padding-right у шапки — чтобы значки соцсетей не уходили под кнопку после того, как она покинула поток. --------------------------------------------------------------------------- */ @media (max-width: 1280px) { /* Высота задана явно, а не полями вокруг логотипа. Раньше шапка тянулась за логотипом, и два ползунка были связаны. overflow: visible — чтобы крупный логотип мог выходить за полосу, не растягивая её. */ .header { height: var(--hnk-header-h, 92px); min-height: var(--hnk-header-h, 92px); padding-top: 0; padding-bottom: 0; padding-left: 5rem; padding-right: 5rem; align-items: center; overflow: visible; } .mobile-menu-btn { position: fixed; top: 0.7rem; right: 1rem; z-index: 9999; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; /* цвет берётся из консоли темы («Оформление» → «Фон боковой колонки»), чтобы кнопка всегда совпадала с цветом шапки и меню */ background-color: var(--hnk-burger-bg, #007A6D); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); } .mobile-menu-btn__line { width: 20px; } } /* --------------------------------------------------------------------------- ОСТАЛЬНЫЕ ШАБЛОНЫ — тот же бумажный фон Родительская тема красит белым не одну секцию, а каждый шаблон отдельно (31 правило с background-color: var(--light-col)). Страницы и архивы: .service-archive — архив практик (/services/) .service-portfolio — работы внутри практики .single-service — страница практики .single-team — страница ведущего .single-folio — страница «Как это было» .single-products — страница продукта Эти шесть — полотно страницы, а не карточки внутри неё, поэтому фон снимается. Правило стоит ниже блока карточек и перекрывает его для этих шести селекторов — карточки внутри (услуги, ведущие, отзывы) остаются белыми и по-прежнему слушаются поля «Цвет фона карточек». --------------------------------------------------------------------------- */ .service-archive, .service-portfolio, .single-service, .single-team, .single-folio, .single-products { background-color: transparent; } /* --------------------------------------------------------------------------- ЛОГОТИП НА ТЕЛЕФОНЕ — по центру шапки На ширине 1280px и ниже шапка — flex-строка с justify-content: space-between, и логотип прижимается влево. Выносим его из потока и ставим по середине: кнопка меню теперь тоже вне потока (блок выше), поэтому они не сталкиваются. Значения взяты в переменные — переключатель «🔧 Логотип на телефоне» в Настройщике подменяет их одной строкой и возвращает логотип влево. --------------------------------------------------------------------------- */ @media (max-width: 1280px) { /* шапка остаётся той же высоты: логотип в потоке, центрируем саму строку. Отступы слева и справа равные — иначе центр уедет влево на ширину места под кнопку. */ .header { justify-content: var(--hanaka-logo-justify, center); } .site-title__logo { margin: 0; } } /* --------------------------------------------------------------------------- ПРОЗРАЧНАЯ ШАПКА НА ТЕЛЕФОНЕ — переключатель в Настройщике Класс hnk-header-clear вешается на из functions.php. Шапка выносится из потока — фотография поднимается под неё. Логотип при этом держится за верх экрана, а не за крышу дома: кадрировка фотографии меняется от экрана к экрану (тема грузит отдельную картинку для телефона и обрезает её по cover), а верх экрана — не меняется. Затемнение сверху — чтобы белый логотип не пропадал на светлом небе. Селектор из трёх классов — чтобы перебить заливку из консоли темы («Фон боковой колонки»), которая выводится в одним классом. --------------------------------------------------------------------------- */ @media (max-width: 1280px) { .hnk-header-clear.home .header { position: absolute; left: 0; top: 0; width: 100%; z-index: 100; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0)); } } /* --------------------------------------------------------------------------- ЛОГОТИП — размер и точная посадка (ползунки в Настройщике) Разметка темы: — то есть site-title__logo это сама картинка, а не обёртка. Родительская тема даёт ей max-width: 80px на ширине до 1280px. Сдвиг сделан через transform у ссылки-обёртки, а не через отступы: transform не участвует в раскладке, поэтому высота зелёной плашки от вертикального сдвига не меняется — логотип ездит внутри неё. --------------------------------------------------------------------------- */ @media (max-width: 1280px) { /* width, а не max-width: исходный файл логотипа 130x130px, и max-width не давал увеличить его сверх этого — ползунок работал только вниз. */ .site-title__logo { width: var(--hnk-logo-size, 72px); max-width: 100%; height: auto; margin: 0; } .site-title__link { display: inline-block; padding: 0; transform: translate(var(--hnk-logo-x, 0px), var(--hnk-logo-y, 0px)); } } /* --------------------------------------------------------------------------- ЦВЕТ И ПРОЗРАЧНОСТЬ — шапка на компьютере и плашка постера Тема выводит свой цвет прямо в правилом в один класс: .header, .nav-menu { background-color: <Фон боковой колонки из консоли> } Поэтому здесь селектор из двух классов — чтобы перебить его независимо от порядка подключения файлов. Выпадающее подменю (.nav-menu) не трогаем: прозрачное подменю было бы нечитаемым. Шапка — только шире 1280px: на телефоне за её вид отвечает отдельный переключатель «Шапка на телефоне: зелёная / прозрачная». Плашка постера: у темы два правила — .poster__caption (тёмная) и .poster__caption--light (белая, 0.96), плюс отдельное для узких экранов. Перекрываем все три одним значением — так она выглядит одинаково везде. --------------------------------------------------------------------------- */ .poster .poster__caption, .poster .poster__caption--light { background-color: var(--hnk-poster-bg, rgba(255, 255, 255, 0.96)); } /* --------------------------------------------------------------------------- КОНТАКТНАЯ СТРОКА НА ГЛАВНОЙ — цвет, прозрачность, размытие У темы для этой полосы два разных источника цвета: • на внутренних страницах — поле консоли «Фон контактного блока в шапке»; • на Главной — жёсткое правило темы: .home .top-contacts { background-color: rgba(0, 0, 0, 0.7) } настройки для него в консоли нет вообще. Меняем только главную — внутренние страницы остаются за консолью темы. Селектор body.home — на один шаг сильнее темы, чтобы перебить её наверняка. Запасные значения равны заводским — без настроек вид не меняется. --------------------------------------------------------------------------- */ body.home .top-contacts { background-color: var(--hnk-contacts-bg, rgba(0, 0, 0, 0.7)); -webkit-backdrop-filter: blur(var(--hnk-contacts-blur, 0px)); backdrop-filter: blur(var(--hnk-contacts-blur, 0px)); } /* Размытие фотографии за плашкой постера — ползунок в Настройщике. Заметно только при прозрачности меньше 100: сквозь плотный цвет размывать нечего. */ .poster .poster__caption, .poster .poster__caption--light { -webkit-backdrop-filter: blur(var(--hnk-poster-blur, 0px)); backdrop-filter: blur(var(--hnk-poster-blur, 0px)); } /* --------------------------------------------------------------------------- ЗОЛОТЫЕ ШТРИХИ — добавлено Claude Code 13.08.2026, решение Еркина Три декоративных штриха. Каждый снимается отдельно: удалить его блок — остальные продолжат работать. Раскладку не меняет ни один: только линии, рамки и один фоновый рисунок. Золото #B9965A взято из кнопок сайта. Как ЦВЕТ ТЕКСТА оно не годится (на белом 2,77, на бумаге 2,38 при норме 4,5), поэтому здесь оно живёт только в линиях и рамках, где контраст не нормируется. --------------------------------------------------------------------------- */ :root { --hnk-gold-line: #B9965A; } /* 1 · Волосяная линия под шапкой секции. ::after у .section-inner__subheader — блока «надзаголовок + заголовок». Почему inline-block, а не position:absolute — найдено проверкой на телефоне 13.08: на узких экранах тема центрирует заголовки секций, а прибитая к left:0 линия оставалась у левого края и выглядела ошибкой. inline-block подчиняется text-align родителя — то есть линия сама ездите влево или в центр вместе с заголовком, на любой ширине экрана и без привязки к точкам перелома темы. */ .section-inner__subheader::after { content: ""; display: inline-block; width: 64px; height: 1px; margin-top: 1.1rem; vertical-align: middle; background: var(--hnk-gold-line); } /* 2 · Тёплая рамка карточек. Тема даёт им border: 1px solid #EFF0F8 — холодный серо-синий из демо, он спорит с кремовым фоном страницы. !important — потому что тема задаёт рамку правилом той же специфичности. Перебивается ЦВЕТ, не раскладка. */ .service-item, .team-item, .steps-item, .feedback-list__item, .faq-accordion__item, .benefits__item, .products-item, .entry { border: 1px solid rgba(185, 150, 90, 0.30) !important; } /* 3 · Разделитель между секциями: линия, разорванная веткой. Рисунок — орнамент 01 из подборки Гульмиры (золотисто-оливковый; десять из тринадцати её орнаментов сине-стальные и здесь не годятся). Ужат до 200x300 и лежит в images/ этой темы. Три слоя в одном свойстве: левый отрезок линии, правый отрезок, ветка. */ .service::before, .team::before, .faq::before { content: ""; display: block; height: 132px; margin: 0 auto 3rem; background: linear-gradient(to right, transparent 0, rgba(185, 150, 90, .5) 10%, rgba(185, 150, 90, .5) 38%, transparent 42%) center / 100% 1px no-repeat, linear-gradient(to right, transparent 58%, rgba(185, 150, 90, .5) 62%, rgba(185, 150, 90, .5) 90%, transparent 100%) center / 100% 1px no-repeat, url('images/ornament-divider.webp') center / auto 132px no-repeat; } /* Средний разделитель зеркалится — три одинаковые ветки подряд читались бы как штамп. Отрезки линии симметричны, поэтому отражение их не задевает. */ .team::before { transform: scaleX(-1); } @media (max-width: 700px) { .service::before, .team::before, .faq::before { height: 96px; background-size: 100% 1px, 100% 1px, auto 96px; margin-bottom: 2rem; } } /* 4 · Ветвь в углу подвала. Подвал — единственное тёмное поле на сайте, и золотистый орнамент на нём читается как тиснение. На кремовых секциях свободного угла нет — ветка там садится на карточки (проверено 13.08). .container поднят над рисунком z-index'ом: без этого абсолютный ::after лёг бы поверх телефонов и ссылок. overflow:hidden обрезает ветку по краю — она уходит за угол, а не лежит наклейкой. */ .footer { position: relative; overflow: hidden; } .footer .container { position: relative; z-index: 1; } .footer::after { content: ""; position: absolute; right: -12px; bottom: -26px; width: 210px; height: 315px; z-index: 0; pointer-events: none; background: url('images/ornament-corner.webp') center / contain no-repeat; opacity: .55; } /* На телефоне подвал складывается в одну колонку шириной с экран. Первая проба (128px в том же углу) наехала на строку копирайта — проверено снимком 13.08. Поэтому ветке выделена своя полоса внизу (padding-bottom у .container), а сама она уменьшена и приглушена. */ @media (max-width: 1024px) { .footer .container { padding-bottom: 5rem; } .footer::after { width: 118px; height: 177px; right: -14px; bottom: -16px; opacity: .38; } } /* На телефоне угла для ветки нет вообще. Замер 19.08.2026 на iPhone 13: верх ветки стоял на 551 px, строка копирайта занимает 552–570 px — то есть рисунок вставал вплотную к тексту, а правым краем уходил под круглую кнопку «наверх», которая на телефоне висит ровно в том же углу. Плюс overflow:hidden срезал у ветки низ и бок, и от неё оставался обрезок. Первая поправка 19.08 поставила ветку в поток под копирайт — ветка стала целой, но потянула подвал вниз на ~140 px и читалась как отдельный блок, а не как украшение (Еркин, 19.08). Орнамент должен заполнять уже пустое место, а не создавать себе новое. На телефоне пустота одна и большая: подвал складывается в одну узкую колонку слева (замер 19.08: самая длинная строка кончается на 213 px из 390), и вся правая половина — чистое тёмное поле высотой около 280 px. Туда ветка и встаёт: абсолютно (высоты подвалу не добавляет), целиком в поле (ничего не срезается), над линией копирайта и вдали от круглой кнопки «наверх». Изменено Claude Code 19.08.2026. */ @media (max-width: 700px) { /* полоса под угловую ветку больше не нужна — подвал возвращается к своей высоте по теме */ .footer .container { padding-bottom: 0; } .footer::after { width: 140px; height: 210px; right: 10px; bottom: 96px; opacity: .28; } } /* Узкие телефоны (Galaxy S9+, iPhone SE — 320–380 px): пустое поле справа уже, и ветка в 140 px подошла бы вплотную к тексту. */ @media (max-width: 380px) { .footer::after { width: 112px; height: 168px; right: 8px; bottom: 104px; } } /* --------------------------------------------------------------------------- ПЕРВЫЙ ЭКРАН НА ТЕЛЕФОНЕ И ПЛАНШЕТЕ — блок СНЯТ 28.08.2026 Решение Еркина 28.08.2026: вернуть мобильный и планшетный первый экран к штатному виду темы Make Progress 3. Здесь стояли два раздела: «Первый экран на телефоне и планшете, редакция 3» (13.08.2026) и «Положение текста первого экрана по вертикали» (14.08.2026). Вместе с ними из functions.php убраны пять полей Настройщика: масштаб и сдвиг фото на телефоне, цвет · прозрачность · высота зелёного поля. Шапка на телефоне, типографика статей и весь десктоп не тронуты. Вернуть обратно: /hanaka-private-backups/style.css.v1.40-20260828-082816 и functions.php.v1.40-20260828-082816 (вне веб-корня). --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- СТАТЬИ — длинный текст (добавлено Claude Code 19.08.2026) Первая настоящая статья в разделе «Статьи» — длинный связный текст, а не карточка и не список. Тема такого случая не предусматривает: в разд. «Блог и записи» есть только дата, изображение записи, метки, кнопки «Поделиться», комментарии и навигация — ширины колонки и оформления врезок там нет (проверено по инструкции темы). Поэтому всё ниже — здесь, и только для записей: остальные шаблоны не затронуты. --------------------------------------------------------------------------- */ /* 1 · Ширина колонки. Контейнер темы — 1180px (--width). На нём строка статьи выходит около ста знаков: глаз, дочитав строку, не находит начало следующей. Комфортная длина — 65–75 знаков, отсюда 44rem вместе с полями контейнера (2rem по бокам). Сужается вся колонка целиком — заголовок, дата и текст: узкий текст под широким заголовком читается как сбой вёрстки. */ .single-post .container--single { max-width: 44rem; } /* 2 · Кегль. Тема даёт тексту записи тот же размер, что подписям в карточках. На длинном чтении он мелковат — ступень вверх по той же шкале. */ .single-post__content { font-size: 1.05rem; } /* 3 · Лид — первый абзац, вход в текст. */ .single-post__content .hnk-lead { font-size: 1.18rem; line-height: 1.55; } /* 4 · Цитаты. Тема уже оформляет blockquote (линия слева 2px, кегль 1.2rem, серый, cite справа) — раскладку берём её, меняем только то, что делает цитату ханакинской: антиква вместо текстового шрифта и золотая линия вместо серой. */ .single-post__content blockquote { border-left-color: var(--hnk-gold-line); } .single-post__content blockquote p { font-family: var(--hanaka-disp); font-size: 1.55rem; line-height: 1.5; letter-spacing: 0; } /* Подпись под цитатой. Было 0,85rem — антиквой это вид десятипиксельного текста (строчная 5,5 против 9,4 у абзаца). Имя автора должно быть тише цитаты, но читаемым. Пересчитано 21.08.2026. */ .single-post__content blockquote cite { font-size: 1.05rem; line-height: 1.5; } /* Эпиграф — та же цитата, но открывает статью: без рамки слева, с волосяной линией сверху — тем же приёмом, что шапки секций на Главной. */ .single-post__content .hnk-epigraph { margin: 0 0 2.6rem; padding: 0; border-left: 0; } .single-post__content .hnk-epigraph::before { content: ""; display: block; width: 64px; height: 1px; margin-bottom: 1.5rem; background: var(--hnk-gold-line); } .single-post__content .hnk-epigraph p { font-size: 1.75rem; } .single-post__content .hnk-epigraph cite { text-align: left; } /* 5 · Два способа практики рядом: открытый и тихий видны одним взглядом, как противопоставление. Ниже 820px колонки складываются в столбик — на телефоне рядом нечитаемо. */ .hnk-two { display: grid; gap: 1.4rem; margin: 1.8rem 0 2.2rem; } @media (min-width: 820px) { .hnk-two { grid-template-columns: 1fr 1fr; /* блок шире колонки текста — двум колонкам нужен воздух; контейнер темы (1180px) это позволяет */ margin-left: -3.5rem; margin-right: -3.5rem; } } .hnk-two > *, .hnk-aside { padding: 1.5rem 1.7rem; border-radius: 6px; background-color: var(--hanaka-card-bg, #fff); border: 1px solid rgba(185, 150, 90, 0.30); } .hnk-two p:last-child, .hnk-aside p:last-child { margin-bottom: 0; } /* 6 · Имена и формулы — двумя столбцами, а не перечислением через запятую. Тема рисует у пунктов списка точку слева (.post-content ul li::before) — здесь она мешает: строка и так делится на две части. */ .hnk-names { margin: 1.3rem 0 1.8rem; border-top: 1px solid rgba(185, 150, 90, 0.30); } .hnk-names li { display: grid; grid-template-columns: 11rem 1fr; gap: 0 1rem; align-items: baseline; padding: 0.65rem 0; border-bottom: 1px solid rgba(185, 150, 90, 0.30); } .post-content .hnk-names li { padding-left: 0; } .post-content .hnk-names li::before { content: none; } .post-content .hnk-names li:not(:last-child) { margin-bottom: 0; } .hnk-names .n { font-family: var(--hanaka-disp); font-size: 1.45rem; line-height: 1.35; } @media (max-width: 560px) { .hnk-names li { grid-template-columns: 1fr; gap: 0.15rem; } } /* 7 · Три вопроса — пауза в тексте, читаются медленнее остального. */ .hnk-questions, .hnk-pull { margin: 2.2rem 0; padding: 1.4rem 0; border-top: 1px solid rgba(185, 150, 90, 0.30); border-bottom: 1px solid rgba(185, 150, 90, 0.30); font-family: var(--hanaka-disp); font-size: 1.6rem; line-height: 1.6; text-align: center; } /* 8 · Последние две фразы — вывод статьи. */ .hnk-final { margin-top: 2rem; font-family: var(--hanaka-disp); font-size: 1.55rem; line-height: 1.5; } /* 9 · Подпись автора в шапке записи. Пользователь на сайте один, и его имя выводится как «admin» — технический логин на публичной странице. Пока команда не решила, чьим именем подписывать статьи, строку скрываем; дата остаётся. */ .single-post .post-meta__author { display: none; } /* --------------------------------------------------------------------------- СТАТЬИ · продолжение серии (добавлено Claude Code 21.08.2026) Кружение и активные практики. Приёмов, сделанных под статью про зикр, на два новых текста не хватило: там есть ступени практики и перечисления, которые в сплошном абзаце теряются. Врезка (.hnk-aside) и центральная строка (.hnk-pull) — те же карточка и разворот из зикра, просто вынесены в самостоятельные классы, новых стилей у них нет. --------------------------------------------------------------------------- */ /* 10 · Врезка — отступ вокруг карточки, когда она стоит одна, а не в паре. */ .hnk-aside { margin: 1.8rem 0 2.2rem; } /* 11 · Уровни практики — ступени одного процесса, а не отдельные разделы. Номер рисуем сами: штатная нумерация списка рядом с абзацами читается как перечень пунктов, а не как ступени. */ .hnk-levels { counter-reset: hnk-level; margin: 1.6rem 0 2.2rem; padding: 0; list-style: none; } .post-content .hnk-levels > li { counter-increment: hnk-level; display: grid; grid-template-columns: 3rem 1fr; gap: 0 1.2rem; margin: 0; padding: 1.6rem 0 0.4rem; border-top: 1px solid rgba(185, 150, 90, 0.30); } .post-content .hnk-levels > li::before { content: counter(hnk-level); position: static; width: auto; height: auto; border-radius: 0; background: none; font-family: var(--hanaka-disp); font-size: 2.6rem; line-height: 1; color: var(--hnk-gold-line); } .post-content .hnk-levels > li > * { grid-column: 2; } .hnk-levels h3 { margin: 0 0 0.6rem; font-family: var(--hanaka-disp); font-size: 1.5rem; line-height: 1.3; } .hnk-levels p:last-child { margin-bottom: 0; } @media (max-width: 560px) { .post-content .hnk-levels > li { grid-template-columns: 1fr; gap: 0.4rem; } .post-content .hnk-levels > li > * { grid-column: 1; } .post-content .hnk-levels > li::before { font-size: 2rem; } } /* 12 · Перечисление в строку — «один почувствует… другой встретится…». В абзаце такие ряды сливаются; здесь каждый пункт отделён волосяной линией. Точка темы перед пунктом убрана: строки и так разделены. */ .hnk-lines { margin: 1.3rem 0 1.8rem; padding: 0; list-style: none; border-top: 1px solid rgba(185, 150, 90, 0.30); } .post-content .hnk-lines li { margin: 0; padding: 0.65rem 0; border-bottom: 1px solid rgba(185, 150, 90, 0.30); } .post-content .hnk-lines li::before { content: none; } .post-content .hnk-lines li:not(:last-child) { margin-bottom: 0; } /* --------------------------------------------------------------------------- НОВЫЙ ПЕРВЫЙ ЭКРАН НА ТЕЛЕФОНЕ — добавлено Claude Code 28.08.2026 Работает только когда у есть класс hnk-poster-new. Класс ставит functions.php — по галочке в Настройщике или по ссылке ?hnk-poster=new. Без класса ни одно правило отсюда не действует. Граница — 800px И только portrait: • компьютер и планшет остаются штатными; • телефон боком — тоже штатный: вертикальный кадр 1:2 в ландшафтном экране обрезался бы в узкую полоску (решение Еркина 28.08). Геометрия кадра считается в CSS, а не в PHP: cover — это max() из двух отношений, поэтому при повороте и смене высоты всё пересчитывается само. Откат: удалить этот блок целиком и такой же в functions.php. Копии: /hanaka-private-backups/style.css.v1.41-20260828-100949 --------------------------------------------------------------------------- */ @media (max-width: 800px) and (orientation: portrait) { body.hnk-poster-new .poster { position: relative; height: calc(var(--hnkp-h, 78) * 1svh); overflow: hidden; /* цвет-заглушка: средний цвет вечернего кадра, считан по файлу. Пока фотография грузится, экран не мигает белым. */ background-color: #3E5A6F; } /* высота первого экрана в px — нужна для расчёта cover ниже */ body.hnk-poster-new .poster__bg { --hnkp-vh: calc(var(--hnkp-h, 78) * 1svh); --hnkp-sc: max(calc(100vw / var(--hnkp-iw, 1080)), calc(var(--hnkp-vh) / var(--hnkp-ih, 2160))); position: absolute; inset: 0; height: auto !important; z-index: 0; background-image: var(--hnkp-img) !important; background-repeat: no-repeat !important; /* --hnkp-fill: запас сверх cover. Добавлен 28.08.2026: без него cover точно вписывает кадр по одной из сторон, и по этой стороне двигать нечего — ползунок сдвига честно ничего не делал, и это читалось как поломка. */ background-size: calc(var(--hnkp-sc) * var(--hnkp-iw, 1080) * var(--hnkp-zoom, 1) * var(--hnkp-fill, 1.15)) calc(var(--hnkp-sc) * var(--hnkp-ih, 2160) * var(--hnkp-zoom, 1) * var(--hnkp-fill, 1.15)) !important; background-position: var(--hnkp-x, 50%) var(--hnkp-y, 50%) !important; filter: blur(var(--hnkp-blur-all, 0px)); -webkit-mask-image: none; mask-image: none; } /* матовое стекло только под текстом — верхний край растворяется, чтобы не было видно границы размытия */ body.hnk-poster-new .poster::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: 1; pointer-events: none; -webkit-backdrop-filter: blur(var(--hnkp-blur-txt, 0px)); backdrop-filter: blur(var(--hnkp-blur-txt, 0px)); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 26%); mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 26%); } /* вуаль поверх кадра */ body.hnk-poster-new .poster::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to bottom, rgba(6, 20, 16, 0) var(--hnkp-veil-stop, 38%), var(--hnkp-veil-mid, rgba(6, 20, 16, .33)) 72%, var(--hnkp-veil-bot, rgba(6, 20, 16, .68)) 100%); } /* текст прижат к низу кадра */ body.hnk-poster-new .poster .section-inner--poster { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: flex-end; box-sizing: border-box; padding: 104px 24px calc(28px + env(safe-area-inset-bottom, 0px)); } body.hnk-poster-new .poster .poster__caption, body.hnk-poster-new .poster .poster__caption--light { position: relative; z-index: 0; transform: none; width: 100%; max-width: 560px; margin: 0 auto; padding: 0; background: none; border-radius: 0; text-align: left; -webkit-backdrop-filter: none; backdrop-filter: none; } /* Вуаль, которая следует за текстом. Добавлено Claude Code 28.08.2026. Почему одной общей вуали мало: она привязана к высоте секции, а текст при другом кегле или на узком экране уезжает выше её плотной части. Замер 28.08 на экране 360 px: худший квадрат под текстом давал 3,05 : 1 при норме 4,5, и подъём общей вуали до 65 почти не помогал (3,37) — тёмным становился низ, а текст стоял выше. Эта полоса привязана к самой подписи и растянута на 56 px выше и 40 ниже, с мягким растворением сверху. Плотность — из того же ползунка вуали. */ body.hnk-poster-new .poster .poster__caption::before { content: ""; position: absolute; z-index: -1; left: -24px; right: -24px; top: -56px; bottom: -40px; pointer-events: none; background: linear-gradient(to bottom, rgba(6, 20, 16, 0) 0%, var(--hnkp-cap, rgba(6, 20, 16, .47)) 34%, var(--hnkp-cap, rgba(6, 20, 16, .47)) 100%); } body.hnk-poster-new .poster .poster__title { margin: 0; color: #FFF9EE; font-size: var(--hnkp-ttl, 34px); line-height: 1.06; /* Перенос строки: надо «Дом медитаций / у подножия гор», а не «Дом медитаций у / подножия гор». Замер при кегле 34px: «Дом медитаций» = 215px, с «у» = 238px, «у подножия гор» = 216px. Окно для разрыва — 216...237px, берём 6.65em = 226px. В em, а не в px — чтобы держалось при любом кегле из ползунка (проверено на 26 и 46px). ⚠️ Привязано к этой фразе — сменится заголовок, пересчитать или снять. */ max-width: 6.65em; text-shadow: var(--hnkp-tsh, none); } body.hnk-poster-new .poster .poster__descr { margin: .8rem 0 1.25rem; color: rgba(255, 249, 238, .92); font-size: 16px; line-height: 1.5; text-shadow: var(--hnkp-tsh, none); } body.hnk-poster-new .poster .poster__btn { display: block; width: 100%; min-height: 56px; text-align: center; } /* стрелка прокрутки ложится на текст */ body.hnk-poster-new .poster .poster__arrow { display: none; } } /* Конец блока «НОВЫЙ ПЕРВЫЙ ЭКРАН НА ТЕЛЕФОНЕ» */ /* --------------------------------------------------------------------------- ЛОГОТИП НА КОМПЬЮТЕРЕ — ширина задаётся явно (ползунок в Настройщике) Добавлено Claude Code 31.08.2026. Зачем: у родительской темы шире 1280px логотипу задан только margin: 0 auto, ширины нет вовсе — картинка рисуется в свою натуральную величину из атрибутов width/height тега. У PNG это 130px, и всё выглядело правильно случайно. У SVG WordPress не знает размеров и подставляет 0 — логотип пропадал. Разбор целиком — в functions.php, блок «ЛОГОТИП В ФОРМАТЕ SVG». 130px по умолчанию — ровно нынешний вид. --------------------------------------------------------------------------- */ @media (min-width: 1281px) { .site-title__logo { width: var(--hnk-logo-size-desk, 130px); max-width: 100%; height: auto; } } /* --------------------------------------------------------------------------- КАЗАХСКИЕ БУКВЫ — расширенная кириллица (cyrillic-ext) Добавлено Claude Code 02.09.2026. Зачем: у всех наших @font-face выше unicode-range описывает только базовую кириллицу (U+0400-045F, U+0490-0491, U+04B0-04B1). Казахских букв ә ғ қ ң ө ү һ там нет — их коды лежат выше, в диапазоне U+0460-052F. Браузер для них подставлял системный шрифт, поэтому на казахских страницах часть букв выглядела чужой и более жирной. Ниже — те же семейства, второй сабсет. Файлы скачаны с Google Fonts один раз и лежат рядом, в fonts/. На русских и английских страницах не загружаются вовсе: unicode-range не совпадает. Снимается целиком вместе с файлами *-cyrillic-ext.woff2. --------------------------------------------------------------------------- */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('fonts/CormorantGaramond-300-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Spectral'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Spectral-400-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Spectral'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Spectral-600-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('fonts/Manrope-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Lora'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/Lora-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'PT Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/PTSerif-400-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'PT Serif'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/PTSerif-700-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Literata'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/Literata-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/SourceSerif4-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Alegreya'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/Alegreya-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Noto Serif'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/NotoSerif-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* --------------------------------------------------------------------------- СТРАНИЦЫ «НАСТАВНИКИ» — карточка-профиль, полоса-цитата, список карточками Добавлено Claude Code 06.09.2026. Новые классы, ничего существующего не переопределяют — включено всегда, без гейта в Настройщике (в отличие от sb62.css это не меняет вид уже существующей части сайта, а добавляет вид для новых страниц). Решение Еркина 06.09: цветная заливка под цитату «делает грязным» — заливки нет вовсе, только тонкая линия. --hnk-mentor-accent — новая переменная, значение «болюс» из Бренд/design-tokens.json (роль в брендбуке: «кикер и акцент на светлом»). Шрифт — переменная темы --hanaka-disp, рамка карточек — тот же тон, что у карточек «Статей». --------------------------------------------------------------------------- */ :root { --hnk-mentor-accent: #923426; --hnk-mentor-border: rgba(185, 150, 90, .35); } /* 1 · Рубрика и роль — над и под именем (имя даёт заголовок страницы) */ .hnk-mentor-profile__kicker { font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--hnk-mentor-accent); margin: 0 0 4px; } .hnk-mentor-profile__role { font-size: .92rem; color: #6b6558; margin: 0 0 28px; } /* 2 · Цитата-полоса — редакционная выключка, без рамки и без заливки цветом */ .hnk-mentor-quote { display: flex; gap: 22px; margin: 0 0 34px; } .hnk-mentor-quote__bar { width: 2px; border: none; background: var(--hnk-gold-line); margin: 0; align-self: stretch; } .hnk-mentor-quote__text { font-family: var(--hanaka-disp); font-size: 1.35rem; font-style: italic; line-height: 1.5; margin: 0; } .hnk-mentor-quote__who { display: block; margin-top: 10px; font-style: normal; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #6b6558; } /* 3 · Текст — Cormorant, крупнее обычного тела, буквица на первом абзаце */ .hnk-mentor-poem { font-family: var(--hanaka-disp); font-size: 1.26rem; line-height: 1.75; } .hnk-mentor-poem p { margin: 0 0 1.4em; } .hnk-mentor-poem > p:first-of-type::first-letter { font-size: 3.2em; float: left; line-height: .85; padding: .03em .08em 0 0; color: var(--hnk-mentor-accent); } /* 4 · Карточка-ссылка внизу страницы */ .hnk-mentor-more { background: #fff; border: 1px solid var(--hnk-mentor-border); border-radius: 6px; padding: 22px 26px; text-align: center; margin-top: 40px; font-size: .95rem; color: #5c5648; } .hnk-mentor-more a { color: var(--hnk-mentor-accent); font-weight: 700; text-decoration: none; } /* 5 · Список «Наставники» — карточки той же формы, что у «Статей» (.entry.blog-entry): белый фон, тонкая золотая рамка, радиус 6px. */ .hnk-news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px; margin-top: 8px; } .hnk-news-card { background: #fff; border: 1px solid var(--hnk-mentor-border); border-radius: 6px; overflow: hidden; text-decoration: none; color: inherit; display: block; } .hnk-news-card:hover { box-shadow: 0 8px 22px rgba(0,0,0,.08); } .hnk-news-card__body { padding: 24px 16px 16px; } .hnk-news-card__title { font-family: var(--hanaka-disp); font-weight: 600; font-size: 1.35rem; margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--hnk-mentor-border); } .hnk-news-card__excerpt { font-size: .92rem; line-height: 1.55; color: #3a362c; margin: 0 0 16px; } .hnk-news-card__tag { font-size: .8rem; color: #626e86; } .hnk-news-card--soon { background: transparent; border: 1px dashed var(--hnk-mentor-border); display: flex; align-items: center; justify-content: center; min-height: 160px; color: #9a927e; font-size: .92rem; text-align: center; padding: 20px; } /* 6 · Узкая колонка чтения — то же значение, что у Статей (.single-post .container--single { max-width: 44rem }, см. выше по файлу). Страницы-страницы типа «page» идут через container--cpt (1180px) — широко для списков/сеток, но длинный текст в нём читается как прижатый к левому краю. .hnk-mentor-page сужает именно текстоовую часть внутри широкого контейнера, не трогая шаблон самой страницы. */ .hnk-mentor-page { max-width: 44rem; margin: 0 auto; } /* =========================================================================== БЛОК «НАСТАВНИКИ», часть 2 — добавлено Claude Code 06.09.2026. Замер: золото #B9965A на фоне #F4EDE1 даёт контраст 2.38:1 — ниже порога 3:1 для графических элементов. Полоса цитаты была единственным, что отделяет цитату от текста, и на телефоне пропадала. --hnk-gold-ink — то же золото, притемнённое до 3.57:1. =========================================================================== */ :root { --hnk-gold-ink: #9C7634; } .hnk-mentor-quote__bar { width: 3px; background: var(--hnk-gold-ink); } /* Указатель списком — альтернатива карточкам: [hnk_nastavniki view="list"] */ .hnk-idx { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hnk-mentor-border); } .hnk-idx li { border-bottom: 1px solid var(--hnk-mentor-border); } body.hnk-mentor .hnk-idx li { padding-left: 0; } body.hnk-mentor .hnk-idx li::before { content: none; display: none; } /* точка-маркер темы */ /* тема даёт li отступ 23px под маркер — строка уезжала вправо от заголовка */ .hnk-idx a { display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap; padding: 20px 0; text-decoration: none; color: inherit; } .hnk-idx__name { font-family: var(--hanaka-disp); font-size: 1.3rem; font-weight: 600; flex: 0 0 auto; border-bottom: 1px solid var(--hnk-gold-ink); padding-bottom: 2px; } .hnk-idx__go { flex: 0 0 auto; color: var(--hnk-gold-ink); font-size: 1rem; margin-left: -8px; } .hnk-idx a:hover .hnk-idx__name { color: var(--hnk-mentor-accent); border-color: var(--hnk-mentor-accent); } .hnk-idx__note { font-size: .92rem; color: #5c5648; flex: 1 1 260px; } .hnk-idx a:hover .hnk-idx__name { color: var(--hnk-mentor-accent); } .hnk-idx-empty { color: #6b6558; font-style: italic; } /* Конец блока «НАСТАВНИКИ», часть 2 */ /* =========================================================================== СТРАНИЦА НАСТАВНИКА, вид «Тихо» — Claude Code 06.09.2026. Самая длинная строка стиха — 390 px. В обычной колонке страницы (1041 px) справа оставалось около 650 px пустоты, и текст читался прижатым влево. Колонка сужена и выровнена по центру — воздух слева и справа одинаковый, как на страницах статей. =========================================================================== */ body.hnk-mentor .container--cpt { max-width: 40rem; margin-left: auto; margin-right: auto; } .hnk-mentor-opening { font-family: var(--hanaka-disp); font-size: 1.02rem; letter-spacing: .04em; text-align: center; color: #6b6558; line-height: 1.7; margin: 0 0 34px; } .hnk-mentor-verse { font-family: var(--hanaka-disp); font-size: 1.26rem; line-height: 1.62; } .hnk-mentor-verse p { margin: 0 0 1.55em; } .hnk-mentor-rule { display: flex; align-items: center; gap: 14px; margin: 38px 0; } .hnk-mentor-rule::before, .hnk-mentor-rule::after { content: ""; flex: 1; height: 1px; background: rgba(185, 150, 90, .5); } .hnk-mentor-rule span { display: flex; align-items: center; color: var(--hnk-gold-ink); } .hnk-mentor-prose p { font-size: 1.06rem; line-height: 1.72; margin: 0 0 1.25em; color: #24211c; } .hnk-mentor-sign { font-family: var(--hanaka-disp); font-size: 1.1rem; text-align: right; color: #6b6558; line-height: 1.5; margin: 34px 0 0; } .hnk-mentor-back { margin: 44px 0 0; font-size: .9rem; } .hnk-mentor-back a { color: var(--hnk-gold-ink); text-decoration: none; border-bottom: 1px solid rgba(156, 118, 52, .4); } /* Конец вида «Тихо» */ /* =========================================================================== СТИЛИ АБЗАЦА ДЛЯ РЕДАКТОРА — Claude Code 06.09.2026. Выбираются в панели справа: блок «Абзац» → Стили. =========================================================================== */ .is-style-hnk-verse { font-family: var(--hanaka-disp); font-size: 1.26rem; line-height: 1.62; margin: 0 0 1.55em; } .is-style-hnk-opening { font-family: var(--hanaka-disp); font-size: 1.02rem; letter-spacing: .04em; text-align: center; color: #6b6558; line-height: 1.7; margin: 0 0 34px; } .is-style-hnk-sign { font-family: var(--hanaka-disp); font-size: 1.1rem; text-align: right; color: #6b6558; line-height: 1.5; margin: 34px 0 0; } /* Разделитель со звездой: обычный блок «Разделитель» на страницах раздела */ body.hnk-mentor hr.wp-block-separator { border: 0; height: 22px; margin: 38px 0; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2211%22%20fill%3D%22%23F4EDE1%22%2F%3E%3Cpath%20d%3D%22M12%201.5l2.3%205.4%205.4-2.3-2.3%205.4%205.4%202.3-5.4%202.3%202.3%205.4-5.4-2.3L12%2022.5l-2.3-5.4-5.4%202.3%202.3-5.4L1.2%2012l5.4-2.3-2.3-5.4%205.4%202.3z%22%20fill%3D%22none%22%20stroke%3D%22%239C7634%22%20stroke-width%3D%221.1%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center center / 22px 22px no-repeat, linear-gradient(rgba(185,150,90,.5), rgba(185,150,90,.5)) center center / 100% 1px no-repeat; } /* ===== HNK-LANGSWITCH — переключатель языков, 3 стиля через ?langswitch= ===== */ .hnk-lang-switch { list-style: none; display: flex; align-items: center; justify-content: center; position: relative; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid rgba(217,184,113,.25); } .hnk-lang-switch__list { list-style: none; display: flex; align-items: center; margin: 0; padding: 0; background: transparent !important; border-radius: 0 !important; } .hnk-lang-switch__list li { margin: 0; padding: 0 !important; } .hnk-lang-switch__list a { color: #d9b871; opacity: .7; text-decoration: none; font-family: "Cormorant Garamond", Georgia, serif; font-size: 17px; font-weight: 600; letter-spacing: .04em; transition: opacity .2s, color .2s; } .hnk-lang-switch__list a:hover { opacity: 1; color: #b9965a; } .hnk-lang-switch__list li.is-current a { opacity: 1; color: #b9965a; font-weight: 600; } .hnk-lang-switch__trigger { display: none; } /* вариант B — dots: без рамок, только текст и точки-разделители, самый тихий */ .hnk-lang-switch--dots { border-top: none; padding-top: 8px; } .hnk-lang-switch--dots .hnk-lang-switch__list { justify-content: center; gap: 0; } .hnk-lang-switch--dots .hnk-lang-switch__list li { display: flex; align-items: center; } .hnk-lang-switch--dots .hnk-lang-switch__list li + li::before { content: '\00b7'; color: rgba(217,184,113,.4); margin: 0 9px; font-size: 14px; } .hnk-lang-switch--dots .hnk-lang-switch__list a { font-family: "Manrope", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; opacity: .55; } .hnk-lang-switch--dots .hnk-lang-switch__list a:hover { opacity: .85; } .hnk-lang-switch--dots .hnk-lang-switch__list li.is-current a { opacity: 1; color: #b9965a; } /* стиль 1: pill — три плашки в ряд, видны сразу, без наведения */ /* родительская тема прячет любой