/* =============================================================
PIARNYA — Header Styles
Хедер · мегаменю
Редизайн Claude Design (блок «3a») — топбар убран полностью.
Зависит от: variables.css, base.css
============================================================= */
/* ── САЙТ-ХЕДЕР (обёртка) ───────────────────────────────────── */
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: var(--header-z); /* 1000 */
/* GPU-слой: fixed-элементы без will-change вызывают repaint на скролл */
will-change: transform;
}
/* WP Admin Bar занимает 32px сверху (46px на мобильном).
Сдвигаем хедер вниз чтобы топбар был виден. */
.admin-bar .site-header {
top: 32px;
}
@media screen and (max-width: 782px) {
.admin-bar .site-header {
top: 46px;
}
}
/* Компенсируем padding-top у body с учётом admin bar */
body.admin-bar {
padding-top: calc(var(--header-total-h) + 32px);
}
@media screen and (max-width: 782px) {
body.admin-bar {
padding-top: calc(var(--header-total-h) + 46px);
}
}
/* ── ОСНОВНОЙ ХЕДЕР (редизайн «3a») ─────────────────────────── */
.header-main {
height: var(--header-main-h); /* 88px */
background: #FFFFFF;
box-shadow: 0 1px 0 rgba(21, 10, 36, 0.07);
transition: box-shadow var(--dur-base) var(--ease);
}
/* Тень при скролле: JS добавляет .is-scrolled на .site-header —
усиливаем базовую тень макета, а не заменяем бордер на неё */
.site-header.is-scrolled .header-main {
box-shadow: var(--header-shadow);
}
.header-main__inner {
display: flex;
align-items: center;
height: 100%;
gap: 44px;
max-width: 1920px;
margin-inline: auto;
padding-inline: 48px;
box-sizing: border-box;
}
/* ── ЛОГОТИП ────────────────────────────────────────────────── */
.header__logo {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 13px;
}
/* the_custom_logo() выводит ![]()
— стилизуем содержимое */
.header__logo a,
.header__logo > a {
display: flex;
align-items: center;
min-height: 44px; /* ui-ux-pro-max: touch target */
transition: opacity var(--dur-fast) var(--ease);
}
.header__logo a:hover {
opacity: .85;
}
.header__logo img,
.header__logo svg {
object-fit: contain;
}
/* Десктопная шапка — логотип 46×46 по макету «3a» */
.header-main .header__logo img,
.header-main .header__logo svg {
height: 46px;
width: 46px;
}
/* Мобильный drawer — логотип «4a», 36px */
.mob-panel__logo img,
.mob-panel__logo svg {
height: 36px;
width: 36px;
}
.header__logo-name {
line-height: 1;
}
/* Десктопная шапка — точные значения макета «3a».
⚠ background-clip обязан идти ПОСЛЕ шортхенда background в этом же
правиле: шортхенд неявно сбрасывает clip в border-box, и клип из
менее специфичного правила проигрывает каскад — текст превращается
в закрашенный прямоугольник. */
.header-main .header__logo-name {
font-family: var(--font-body); /* Manrope, не Unbounded — как в макете */
font-size: 25px;
font-weight: 800;
letter-spacing: .05em;
background: var(--hh-gradient-logo);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent; /* fallback для не-webkit движков */
}
/* Мобильный drawer — тот же градиент лого, что в шапке «3a» */
.mob-panel__logo .header__logo-name {
font-family: var(--font-body);
font-size: 20px;
font-weight: 800;
letter-spacing: .05em;
background: var(--hh-gradient-logo);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent; /* fallback для не-webkit движков */
}
/* ── НАВИГАЦИЯ (прижата влево, сразу за лого) ────────────────── */
.header__nav {
display: flex;
min-width: 0;
}
.nav__list {
display: flex;
align-items: center;
gap: 32px;
}
.nav__item {
position: relative;
}
/* .nav__link используется и на , и на