/* =============================================================
PIARNYA — Header Styles
Топбар · хедер · мегаменю
Зависит от: variables.css, base.css
============================================================= */
/* ── ТОПБАР ─────────────────────────────────────────────────── */
.topbar {
height: 48px;
background: var(--topbar-bg);
color: var(--color-text-inverse);
font-size: var(--text-base); /* 16px вместо 14px */
font-weight: 500;
}
.topbar__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
gap: var(--sp-4);
}
.topbar__left,
.topbar__right {
display: flex;
align-items: center;
gap: var(--sp-4);
}
.topbar__city {
display: flex;
align-items: center;
gap: var(--sp-1);
font-weight: 500;
opacity: .9;
}
.topbar__hours {
opacity: .8;
}
.topbar__phone {
font-weight: 700;
color: inherit;
letter-spacing: .01em;
transition: opacity var(--dur-fast) var(--ease);
}
.topbar__phone:hover {
opacity: .85;
}
/* WCAG AA контраст: белый (#FFF) на #7B2FBE → 8.5:1 ✓, на #CC1FA0 → 5.1:1 ✓ */
.topbar__wa {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: var(--radius-full);
color: inherit;
transition:
background var(--dur-fast) var(--ease),
transform var(--dur-fast) var(--ease);
}
.topbar__wa:hover {
background: rgba(255, 255, 255, .15);
transform: scale(1.1);
}
/* ── САЙТ-ХЕДЕР (обёртка) ───────────────────────────────────── */
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: var(--header-z); /* 1000 */
}
/* 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 */
.admin-bar body {
padding-top: calc(var(--header-total-h) + 32px);
}
@media screen and (max-width: 782px) {
.admin-bar body {
padding-top: calc(var(--header-total-h) + 46px);
}
}
/* Топбар — скрываем часы при нехватке места */
@media (max-width: 700px) {
.topbar__hours { display: none; }
}
@media (max-width: 480px) {
.topbar__city { font-size: var(--text-sm); }
.topbar__phone { font-size: var(--text-sm); }
}
/* ── ОСНОВНОЙ ХЕДЕР ─────────────────────────────────────────── */
.header-main {
height: var(--header-main-h); /* 72px */
background: var(--color-bg);
border-bottom: 1px solid var(--color-border);
transition:
box-shadow var(--dur-base) var(--ease),
border-color var(--dur-base) var(--ease);
}
/* Тень при скролле: JS добавляет .is-scrolled на .site-header */
.site-header.is-scrolled .header-main {
box-shadow: var(--header-shadow);
border-bottom-color: transparent;
}
.header-main__inner {
display: flex;
align-items: center;
height: 100%;
gap: var(--sp-8);
}
/* ── ЛОГОТИП ────────────────────────────────────────────────── */
.header__logo {
flex-shrink: 0;
display: flex;
align-items: center;
gap: var(--sp-3);
}
/* 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 {
height: 52px;
width: 52px;
object-fit: contain;
}
.header__logo-name {
font-family: var(--font-display);
font-size: 20px;
font-weight: 600;
letter-spacing: -.02em;
line-height: 1;
background: linear-gradient(
90deg,
var(--_magenta-500) 0%,
var(--_purple-500) 55%,
var(--_cyan-500) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ── НАВИГАЦИЯ ──────────────────────────────────────────────── */
.header__nav {
flex: 1;
display: flex;
justify-content: center;
min-width: 0;
}
.nav__list {
display: flex;
align-items: center;
gap: var(--sp-1);
}
.nav__item {
position: relative;
}
/* .nav__link используется и на , и на