/* ========================================================================= БОКОВАЯ КОЛОНКА — ВОСТОЧНАЯ АРКА (вариант 62) — добавлено Claude Code 31.08.2026 Изумрудная эмаль в середине, плиточная кайма по краям, тонкая золотая стрельчатая арка над логотипом, розетки над меню и под ним. 🔴 ЭТОТ ФАЙЛ ПОДКЛЮЧАЕТСЯ ТОЛЬКО ПРИ ВКЛЮЧЁННОМ ОФОРМЛЕНИИ. Пока галочка в Настройщике не стоит, посетитель его даже не загружает. Три способа переключиться: 1. Галочка в Настройщике — раздел «🔧 Ассистент: Боковая колонка». 2. Ссылка https://hanaka.kz/?hnk-sidebar=new — новый вид только тому, кто открыл эту ссылку. Остальные видят прежний. 3. Ссылка https://hanaka.kz/?hnk-sidebar=off — срочный возврат к прежнему. Работает только шире 1280px — там, где колонка вообще существует. На телефоне и планшете тема превращает её в строку с бургер-меню, этой раскладки правка не касается. Меню остаётся штатным меню WordPress (wp_nav_menu) — правится в «Внешний вид → Меню», разметка темы не тронута, sidebar.php не копировался. Картинки: images/sb62-arch.svg · sb62-tile.svg · sb62-rosette.svg Откат совсем: удалить этот файл, три картинки выше и блок «БОКОВАЯ КОЛОНКА» в functions.php. ========================================================================= */ @media (min-width: 1281px) { body.hnk-sb62 { /* Значения по умолчанию. Ползунки в Настройщике подменяют их строкой в . */ --sb62-deep: #04322b; /* глубина камня */ --sb62-glow: #12907d; /* свечение бирюзы */ --sb62-gold: #d9b871; --sb62-edge: 34px; /* ширина плиточной каймы */ --sb62-inset: 46px; /* отступ золотой рамки от края колонки */ --sb62-crown: 200px; /* высота арки */ --sb62-gap: 22px; /* отступ арки от верха колонки */ --sb62-foot: 26px; /* отступ рамки от низа */ --sb62-spark: 0.55; /* яркость искр */ --sb62-font: 17px; /* кегль пунктов меню */ /* Колонка узкая на экранах 1281…1500px (тема делает 300px вместо 400px). Всё, что задано в пикселях, ужимается одним коэффициентом — иначе ползунок из Настройщика перебил бы media-правку и рамка разъехалась бы. */ --sb62-k: 1; --sb62-edge-c: calc(var(--sb62-edge) * var(--sb62-k)); --sb62-inset-c: calc(var(--sb62-inset) * var(--sb62-k)); --sb62-crown-c: calc(var(--sb62-crown) * var(--sb62-k)); --sb62-gap-c: calc(var(--sb62-gap) * var(--sb62-k)); } /* ---------- поле колонки: эмаль, свечение, искры, арка ---------- */ body.hnk-sb62 .header { background-color: var(--sb62-deep); background-image: url(images/sb62-arch.svg), radial-gradient(circle at 21% 13%, rgba(255, 255, 255, var(--sb62-spark)) 0 1px, rgba(255, 255, 255, 0) 5px), radial-gradient(circle at 79% 24%, rgba(255, 255, 255, calc(var(--sb62-spark) * .8)) 0 1.2px, rgba(255, 255, 255, 0) 6px), radial-gradient(circle at 15% 47%, rgba(255, 255, 255, calc(var(--sb62-spark) * .6)) 0 1px, rgba(255, 255, 255, 0) 5px), radial-gradient(circle at 86% 61%, rgba(255, 255, 255, calc(var(--sb62-spark) * .7)) 0 1px, rgba(255, 255, 255, 0) 5px), radial-gradient(circle at 30% 78%, rgba(255, 255, 255, calc(var(--sb62-spark) * .5)) 0 1px, rgba(255, 255, 255, 0) 5px), radial-gradient(circle at 68% 90%, rgba(255, 255, 255, calc(var(--sb62-spark) * .6)) 0 1.2px, rgba(255, 255, 255, 0) 6px), radial-gradient(86% 30% at 50% 3%, rgba(198, 255, 243, .38), rgba(198, 255, 243, 0) 74%), radial-gradient(78% 46% at 50% 30%, rgba(70, 225, 195, .22), rgba(70, 225, 195, 0) 72%), radial-gradient(120% 60% at 50% 108%, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 62%), linear-gradient(170deg, var(--sb62-glow) 0%, #0a6f60 38%, var(--sb62-deep) 76%, #04241f 100%); background-repeat: no-repeat; background-position: center var(--sb62-gap-c), 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; background-size: calc(100% - var(--sb62-inset-c) * 2) var(--sb62-crown-c), auto, auto, auto, auto, auto, auto, auto, auto, auto, auto; } /* ---------- кайма зелидж по краям ---------- */ body.hnk-sb62 .header::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(to bottom, var(--sb62-gold), var(--sb62-gold)), linear-gradient(to bottom, var(--sb62-gold), var(--sb62-gold)), url(images/sb62-tile.svg), url(images/sb62-tile.svg), linear-gradient(to right, #0d6f5e 0%, #0a5346 55%, #063d33 100%), linear-gradient(to left, #0d6f5e 0%, #0a5346 55%, #063d33 100%); background-repeat: repeat-y; background-position: var(--sb62-edge-c) 0, calc(100% - var(--sb62-edge-c)) 0, left 0, right 0, left 0, right 0; background-size: 1px 100%, 1px 100%, var(--sb62-edge-c) var(--sb62-edge-c), var(--sb62-edge-c) var(--sb62-edge-c), var(--sb62-edge-c) 100%, var(--sb62-edge-c) 100%; opacity: .96; } /* ---------- золотые стойки арки и нижняя перекладина ---------- */ body.hnk-sb62 .header::after { content: ""; position: absolute; left: calc(var(--sb62-inset-c) + 4px * var(--sb62-k)); right: calc(var(--sb62-inset-c) + 4px * var(--sb62-k)); top: calc(var(--sb62-gap-c) + var(--sb62-crown-c) - 2px); bottom: var(--sb62-foot); z-index: 0; pointer-events: none; border: 1px solid var(--sb62-gold); border-top: 0; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; box-shadow: inset 7px 0 0 -6px rgba(217, 184, 113, .5), inset -7px 0 0 -6px rgba(217, 184, 113, .5), inset 0 -7px 0 -6px rgba(217, 184, 113, .5); } body.hnk-sb62 .header > * { position: relative; z-index: 1; } body.hnk-sb62 .site-title__logo { filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .5)); } /* ---------- меню ---------- */ /* тема заливает .nav-menu тем же цветом, что и колонку, — это непрозрачный прямоугольник поверх эмали. Снимаем заливку только у верхнего меню; выпадающее подменю свою заливку сохраняет, иначе стало бы нечитаемым поверх содержимого страницы. */ body.hnk-sb62 .nav-menu { background-color: transparent; padding: 1.4rem 2rem 1.2rem; } /* меню к середине колонки: у .header_bottom тоже margin-top: auto, два авто-отступа делят пустое место поровну. */ body.hnk-sb62 .header .nav { margin-top: auto; } body.hnk-sb62 .nav-menu > li { padding: .55rem 2rem; } body.hnk-sb62 .nav-menu > li > a { color: #FFF9EE; font-size: var(--sb62-font); letter-spacing: .07em; text-shadow: 0 1px 7px rgba(0, 0, 0, .55); transition: color .25s ease, text-shadow .25s ease; } body.hnk-sb62 .nav-menu > li > a:hover { color: var(--sb62-gold); text-decoration: none; text-shadow: 0 0 16px rgba(217, 184, 113, .55); } body.hnk-sb62 .nav-menu > li.current-menu-item > a, body.hnk-sb62 .nav-menu > li.current-menu-ancestor > a { color: var(--sb62-gold); } /* розетки над меню и под ним */ body.hnk-sb62 .nav-menu::before, body.hnk-sb62 .nav-menu::after { content: ""; display: block; width: 34px; height: 34px; align-self: center; background-image: url(images/sb62-rosette.svg); background-position: center; background-size: 34px 34px; background-repeat: no-repeat; opacity: .92; } body.hnk-sb62 .nav-menu::before { margin: .2rem auto 1.2rem; } body.hnk-sb62 .nav-menu::after { margin: 1.2rem auto .2rem; } /* выпадающее подменю — в том же камне, с золотым волоском */ body.hnk-sb62 .nav-menu li ul { background-color: rgba(4, 45, 38, .97); border: 1px solid rgba(217, 184, 113, .45); border-left: 0; } /* ---------- кнопки соцсетей ---------- */ body.hnk-sb62 .header_bottom { align-self: center; } body.hnk-sb62 .header_bottom .social-btns { justify-content: center; } } /* узкая колонка темы: 300px вместо 400px */ @media (min-width: 1281px) and (max-width: 1500px) { body.hnk-sb62 { --sb62-k: .75; } /* На узкой колонке «ПЕРВЫЙ ВИЗИТ» упирался в стрелку: штатные отступы темы считаны под колонку 400px. */ body.hnk-sb62 .nav-menu { padding-left: 3rem; padding-right: 3rem; } body.hnk-sb62 .nav-menu > li { padding-left: 0; padding-right: 0; } body.hnk-sb62 .nav-menu > li.menu-item-has-children::before { right: 0; } } /* --------------------------------------------------------------------------- ФОН КАРТИНКОЙ вместо нарисованного узора — класс hnk-sb62-img Добавлено Claude Code 31.08.2026. Исходная панель 900×3000 («задний фон для меню») разрезана на три куска. Целиком её растягивать нельзя: колонка выше или ниже на каждом экране, и арка сплющивалась бы. sb62-bg-top.webp — арка. Кладётся к верху, не повторяется; sb62-bg-mid.webp — прямой участок каймы, повторяется по вертикали. Внутри он зеркальный (полоса плюс её отражение), поэтому стыков между повторами не видно; sb62-bg-bottom.webp — нижний орнамент, кладётся к низу. Верхние 70px у него прозрачные — они гасят стык с повторяющейся частью. Все три масштабируются по ширине колонки (background-size: 100% auto), поэтому пропорции арки и плитки держатся на любом экране. --------------------------------------------------------------------------- */ @media (min-width: 1281px) { body.hnk-sb62-img .header { background-color: var(--sb62-deep); background-image: var(--sb62-bg-mid, url(images/sb62-bg-mid.webp)); background-position: center top; background-size: 100% auto; background-repeat: repeat-y; } body.hnk-sb62-img .header::before { background-image: var(--sb62-bg-top, url(images/sb62-bg-top.webp)), var(--sb62-bg-bottom, url(images/sb62-bg-bottom.webp)); background-position: center top, center bottom; background-size: 100% auto, 100% auto; background-repeat: no-repeat, no-repeat; opacity: 1; } /* нарисованные стойки арки не нужны — они уже есть на картинке */ body.hnk-sb62-img .header::after { display: none; } } /* Читаемость меню на картинке: бирюза в середине панели светлее, чем у нарисованного варианта, и белый текст на ней теряется. Плотность подложки — ползунок «🌑 Тёмная подложка под меню» в Настройщике. */ @media (min-width: 1281px) { body.hnk-sb62-img .nav-menu { background-image: radial-gradient(78% 58% at 50% 50%, rgba(2, 26, 22, var(--sb62-veil, .55)), rgba(2, 26, 22, 0) 74%); } body.hnk-sb62-img .nav-menu > li > a { text-shadow: 0 1px 3px rgba(0, 0, 0, .75), 0 0 18px rgba(0, 0, 0, .5); } body.hnk-sb62-img .site-title__logo { filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .55)); } } /* Логотип внутрь арки. На картинке проём арки начинается ниже, чем у нарисованного варианта, и штатный отступ темы ставит логотип на плитку над аркой. Ползунок «⬇ Логотип ниже» в Настройщике. */ @media (min-width: 1281px) { body.hnk-sb62-img .site-title__link { display: block; margin-top: calc(var(--sb62-logo-y, 90px) * var(--sb62-k)); } } /* --------------------------------------------------------------------------- ШРИФТ МЕНЮ И ИКОНКИ СОЦСЕТЕЙ — добавлено Claude Code 06.09.2026 По замечанию Еркина: «шрифт меню должен быть в нашей стилистике» и «внизу меню иконки соцсетей вылезли». 1. ПУНКТЫ МЕНЮ — на Cormorant Garamond, как уже сделано на телефоне (style.css, блок «МЕНЮ НА ТЕЛЕФОНЕ», 06.09.2026). Кегль по-прежнему один ползунок «Кегль пунктов меню» в Настройщике, но с множителем 1,38: у Cormorant высота строчной буквы 0,39 от кегля, у Manrope — 0,54, разница ровно 1,385. Без множителя те же 17px антиквой выглядят мельче, чем гротеском, и строка становится вялой. Подпункты выпадающего списка остаются на Manrope — там кегль мелкий, и антиква в нём читается хуже (тот же вывод, что и на телефоне). 2. ИКОНКИ СОЦСЕТЕЙ — золотым глифом вместо фирменных плиток. Тема берёт иконки из assets/img/sprite.svg, и цвет там зашит в сам путь (fill="#F00073", "#0088CC", "#25D366"). Снаружи это не перекрашивается ничем: внешний чужие стили не принимает, а правило темы .social-btns__link svg { fill: currentColor } до таких путей не доходит. Поэтому из спрайта взят только белый глиф (без плитки), сохранён рядом как images/soc-*.svg и используется маской — цвет задаёт --sb62-gold, тот же, что у рамки. ⚠️ Если в Настройщике включить ещё одну сеть, её иконка останется фирменной плиткой, пока рядом не появится такой же файл-глиф и строка ниже. 3. НЕВЫСОКИЕ ЭКРАНЫ — из-за них иконки и «вылезали». Замер до правки: 1366×620 — содержимому колонки нужно 695px, видно 620, иконок не видно совсем, они уезжают за нижний край. Прокрутки у .header нет (height: 100%), а margin-top: auto у .nav и .header_bottom при нехватке места просто обнуляются. Ниже — сжатие вертикального ритма, когда экран ниже 860px. Проверено живьём: 1281×600, 1366×620, 1920×1080 — помещается везде. Снимается целиком вместе с файлами images/soc-*.svg. --------------------------------------------------------------------------- */ @media (min-width: 1281px) { body.hnk-sb62 .nav-menu > li > a { font-family: var(--hanaka-disp); font-weight: 600; font-size: calc(var(--sb62-font) * 1.38); letter-spacing: .03em; } body.hnk-sb62 .header_bottom .social-btns__link[aria-label="Instagram"], body.hnk-sb62 .header_bottom .social-btns__link[aria-label="Telegram"], body.hnk-sb62 .header_bottom .social-btns__link[aria-label="WhatsApp"] { width: 30px; height: 30px; background-color: var(--sb62-gold); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 30px 30px; mask-size: 30px 30px; } body.hnk-sb62 .header_bottom .social-btns__link[aria-label="Instagram"] svg, body.hnk-sb62 .header_bottom .social-btns__link[aria-label="Telegram"] svg, body.hnk-sb62 .header_bottom .social-btns__link[aria-label="WhatsApp"] svg { display: none; } body.hnk-sb62 .header_bottom .social-btns__link[aria-label="Instagram"] { -webkit-mask-image: url(images/soc-instagram.svg); mask-image: url(images/soc-instagram.svg); } body.hnk-sb62 .header_bottom .social-btns__link[aria-label="Telegram"] { -webkit-mask-image: url(images/soc-telegram.svg); mask-image: url(images/soc-telegram.svg); } body.hnk-sb62 .header_bottom .social-btns__link[aria-label="WhatsApp"] { -webkit-mask-image: url(images/soc-whatsapp.svg); mask-image: url(images/soc-whatsapp.svg); } } /* колонка ниже 860px — сжимаем вертикальный ритм, иначе низ не помещается */ @media (min-width: 1281px) and (max-height: 860px) { body.hnk-sb62-img .site-title__link { margin-top: calc(var(--sb62-logo-y, 90px) * var(--sb62-k) * .35); } body.hnk-sb62 .nav-menu { padding-top: .5rem; padding-bottom: .4rem; } body.hnk-sb62 .nav-menu > li { padding-top: .25rem; padding-bottom: .25rem; } body.hnk-sb62 .nav-menu::before { margin: .1rem auto .5rem; } body.hnk-sb62 .nav-menu::after { margin: .5rem auto .1rem; } body.hnk-sb62 .header_bottom .social-btns { margin: .5rem 0 .6rem; } }