/* Belovode · топ-бар и основная шапка (секции 7–8)
Часть brand.css — подключается в inc/assets.php.
Источник истины: исторический разрез по секциям 1–26. */
/* ---------------------------------------------------------------------
7. ТОП-БАР (тонкая полоса над основной шапкой)
--------------------------------------------------------------------- */
.belovode-topbar {
background: linear-gradient(180deg, var(--bel-ink) 0%, #3a2a20 100%);
color: var(--bel-bg);
font-family: var(--bel-font-body);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
border-bottom: 2px solid var(--bel-ochre);
}
.belovode-topbar__inner {
max-width: var(--bel-wide-width);
margin: 0 auto;
padding: 10px 24px;
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.belovode-topbar__logo {
color: var(--bel-bg) !important;
text-decoration: none !important;
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--bel-font-display);
font-weight: 700;
font-size: 14px;
letter-spacing: 0.14em;
line-height: 1;
}
.belovode-topbar__logo:hover { color: var(--bel-ochre) !important; }
.belovode-topbar__logo-mark { color: var(--bel-ochre); flex: 0 0 auto; }
.belovode-topbar__logo-text { white-space: nowrap; }
.belovode-topbar__phone {
color: var(--bel-bg) !important;
text-decoration: none !important;
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 600;
letter-spacing: 0.06em;
}
.belovode-topbar__phone:hover { color: var(--bel-ochre) !important; }
.belovode-topbar__phone-icon { color: var(--bel-ochre); }
.belovode-topbar__divider { color: var(--bel-oak); opacity: 0.7; }
.belovode-topbar__meta {
color: rgba(247, 241, 229, 0.72);
font-weight: 400;
letter-spacing: 0.1em;
}
.belovode-topbar__spacer { flex: 1; }
.belovode-topbar__social { display: flex; gap: 10px; }
.belovode-topbar__social a {
color: var(--bel-bg) !important;
text-decoration: none !important;
width: 30px; height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(247, 241, 229, 0.22);
border-radius: 50%;
transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.belovode-topbar__social a:hover {
background: var(--bel-ochre);
border-color: var(--bel-ochre);
color: var(--bel-ink) !important;
}
@media (max-width: 922px) {
.belovode-topbar__meta,
.belovode-topbar__divider { display: none; }
.belovode-topbar__inner {
justify-content: space-between;
padding: 10px 16px;
gap: 12px;
}
.belovode-topbar__logo-text { font-size: 13px; }
.belovode-topbar__phone { font-size: 12px; }
.belovode-topbar__social a { width: 28px; height: 28px; }
}
/* На узких экранах телефон — главный CTA, оставляем только WhatsApp
как самую конверсионную «связь». TG и VK перенесены в футер. */
@media (max-width: 480px) {
.belovode-topbar__social a[aria-label="Написать в Telegram"],
.belovode-topbar__social a[aria-label="Мы во ВКонтакте"] { display: none; }
.belovode-topbar__logo-text { display: none; }
.belovode-topbar__inner { gap: 8px; padding: 8px 12px; }
}
/* На ≤922px основная шапка Astra превращалась в «одинокий бургер справа
на пустой полосе» — потому что мы ранее скрыли .ast-site-identity
для всей темы. Возвращаем site-branding в мобильной шапке, чтобы слева
встал логотип — бургер уже не болтается. Для десктопа всё остаётся как
было (логотип живёт в топбаре). */
@media (max-width: 922px) {
#ast-mobile-header .ast-site-identity,
#ast-mobile-header .site-branding,
#ast-mobile-header .ast-builder-layout-element[data-section="title_tagline"] {
display: flex !important;
align-items: center;
}
#ast-mobile-header .site-title,
#ast-mobile-header .site-title a {
font-family: var(--bel-font-display) !important;
font-size: 18px !important;
font-weight: 700 !important;
letter-spacing: 0.1em;
text-transform: none !important;
color: var(--bel-ink) !important;
text-decoration: none !important;
}
}
/* ---------------------------------------------------------------------
8. ОСНОВНАЯ ШАПКА (двойная линейка, логотип + меню)
Логотип вынесен в топ-бар, в основной шапке — только меню.
--------------------------------------------------------------------- */
.ast-site-identity,
.site-branding,
.ast-builder-layout-element[data-section="title_tagline"] {
display: none !important;
}
.site-header,
.main-header-bar,
.ast-primary-header-bar {
background: var(--bel-bg) !important;
box-shadow: none !important;
transition: box-shadow 200ms ease, padding 200ms ease;
position: relative;
}
.site-header { border-bottom: none; }
/* двойная линейка под всей шапкой: тонкая охряная + пробел + тонкая дубовая */
.site-header::before,
.site-header::after {
content: '';
position: absolute;
left: 0; right: 0;
height: 1px;
pointer-events: none;
z-index: 3;
}
.site-header::before { bottom: 0; background: var(--bel-oak-faded); }
.site-header::after { bottom: -4px; background: var(--bel-ochre); opacity: 0.6; }
.main-header-bar,
.ast-primary-header-bar,
.ast-desktop .main-header-bar-wrap,
.ast-primary-header-bar.ast-primary-header {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.main-header-bar,
.ast-primary-header-bar { min-height: 76px; }
.main-header-bar-wrap .ast-container,
.site-primary-header-wrap .ast-container {
padding-top: 14px;
padding-bottom: 14px;
}
.ast-site-identity { padding: 0 !important; }
.main-header-menu,
.ast-header-navigation-wrapper nav.site-navigation {
display: flex;
align-items: center;
}
/* Меню на всю ширину шапки + пункты равномерно по строке */
.ast-hf-menu-1,
.ast-builder-menu-1,
.ast-builder-menu-1 > .ast-builder-menu-1-default,
.ast-builder-menu-1 nav.site-navigation,
.ast-builder-menu-1 .main-navigation {
width: 100% !important;
flex: 1 1 auto;
}
.ast-hf-menu-1 .main-header-menu,
.ast-builder-menu-1 .main-header-menu {
width: 100%;
justify-content: center;
flex-wrap: wrap;
gap: 4px 18px;
}
.ast-hf-menu-1 .main-header-menu > .menu-item,
.ast-builder-menu-1 .main-header-menu > .menu-item {
flex: 0 1 auto;
}
.main-header-menu .menu-item { display: inline-flex; align-items: center; position: relative; }
body.is-scrolled .site-header,
body.is-scrolled .main-header-bar {
box-shadow: 0 3px 14px rgba(43, 32, 24, 0.08) !important;
}
/* Название сайта — вордмарк Philosopher uppercase + колос перед ним */
.site-title, .ast-site-title {
font-family: var(--bel-font-display);
font-size: 1.45rem !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase;
line-height: 1 !important;
margin: 0 !important;
}
.site-title a, .ast-site-title a {
color: var(--bel-ink) !important;
text-decoration: none !important;
position: relative;
padding-left: 34px;
display: inline-block;
}
.site-title a::before, .ast-site-title a::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 22px; height: 28px;
background-color: var(--bel-ochre);
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
.site-description, .ast-site-description {
font-family: var(--bel-font-body) !important;
color: var(--bel-ink-soft) !important;
font-weight: 500 !important;
font-size: 0.66rem !important;
letter-spacing: 0.18em !important;
text-transform: uppercase;
margin-top: 4px !important;
line-height: 1 !important;
}
/* Основное меню — Philosopher uppercase с анимированной охряной подсветкой */
.main-header-menu,
.ast-masthead-custom-menu-items { gap: 2px; }
.main-header-menu .menu-item > a,
.main-navigation a,
#ast-desktop-header a.menu-link {
font-family: var(--bel-font-display) !important;
font-weight: 500;
color: var(--bel-ink) !important;
font-size: 0.82rem !important;
letter-spacing: 0.12em !important;
text-transform: uppercase;
padding: 0.7em 1em 0.65em !important;
line-height: 1.2 !important;
border-radius: 0;
background: transparent !important;
transition: color 160ms ease;
position: relative;
}
/* Охряная «ленточка» под пунктом — анимированная */
.main-header-menu .menu-item:not(.menu-item-cta) > a::after {
content: '';
position: absolute;
left: 50%;
bottom: 8px;
width: 0; height: 2px;
background: var(--bel-ochre);
transform: translateX(-50%);
transition: width 200ms ease;
pointer-events: none;
}
.main-header-menu .menu-item:not(.menu-item-cta) > a:hover,
.main-header-menu .current-menu-item:not(.menu-item-cta) > a,
.main-header-menu .current-menu-ancestor:not(.menu-item-cta) > a {
color: var(--bel-burgundy) !important;
background: transparent !important;
}
.main-header-menu .menu-item:not(.menu-item-cta) > a:hover::after,
.main-header-menu .current-menu-item:not(.menu-item-cta) > a::after,
.main-header-menu .current-menu-ancestor:not(.menu-item-cta) > a::after {
width: calc(100% - 1.6em);
}
/* Подсказка о подменю: маленький треугольник-шеврон */
.main-header-menu .menu-item-has-children > a::before {
content: '';
position: absolute;
right: -2px;
top: 50%;
width: 6px; height: 6px;
border-right: 1.2px solid var(--bel-oak);
border-bottom: 1.2px solid var(--bel-oak);
transform: translateY(-75%) rotate(45deg);
opacity: 0.6;
transition: opacity 150ms ease, transform 180ms ease;
}
.main-header-menu .menu-item-has-children:hover > a::before {
opacity: 1;
transform: translateY(-50%) rotate(45deg);
}
/* Штатная SVG-стрелка Astra дублирует шеврон выше. Прячем здесь, а не
в Customizer: настройка живёт в БД и теряется при развёртывании с нуля. */
#ast-desktop-header .main-header-menu .dropdown-menu-toggle { display: none !important; }
/* Тонкий вертикальный разделитель между верхними пунктами (десктоп) */
@media (min-width: 993px) {
.main-header-menu > .menu-item:not(.menu-item-cta) + .menu-item:not(.menu-item-cta)::before {
content: '';
position: absolute;
left: 0; top: 50%;
width: 1px; height: 14px;
background: var(--bel-oak-faded);
transform: translateY(-50%);
pointer-events: none;
}
}
/* ---------- Подменю: «сложенный буклет» ----------
Десктопный dropdown. Astra по умолчанию делает sub-menu абсолютно
позиционированным и скрытым до hover/focus; тема не должна перебивать
это `position: relative` — иначе sub-menu занимает место в потоке и
шапка раздувается на 3-4 строки. */
.main-header-menu .sub-menu,
#ast-desktop-header .sub-menu {
background: var(--bel-bg) !important;
border: 1px solid var(--bel-oak-faded) !important;
border-top: 3px solid var(--bel-ochre) !important;
box-shadow: 0 14px 32px rgba(43, 32, 24, 0.14) !important;
padding: 6px 0 !important;
min-width: 260px !important;
border-radius: 0 !important;
position: absolute !important;
top: 100% !important;
left: 0;
margin-top: 0 !important;
z-index: 99;
visibility: hidden;
opacity: 0;
transform: translateY(-6px);
transition: opacity 150ms ease, transform 150ms ease, visibility 0s linear 150ms;
pointer-events: none;
}
/* Невидимый мостик над подменю: закрывает зазор между пунктом-родителем
и выпадушкой, чтобы курсор не «спотыкался» при переходе вниз — иначе
hover слетает с родителя и sub-menu прячется. Прозрачный, ловит мышь. */
.main-header-menu .sub-menu::after,
#ast-desktop-header .sub-menu::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: -10px;
height: 10px;
}
.main-header-menu > .menu-item-has-children:hover > .sub-menu,
.main-header-menu > .menu-item-has-children:focus-within > .sub-menu,
#ast-desktop-header .menu-item-has-children:hover > .sub-menu,
#ast-desktop-header .menu-item-has-children:focus-within > .sub-menu {
visibility: visible;
opacity: 1;
transform: translateY(0);
transition: opacity 150ms ease, transform 150ms ease, visibility 0s linear 0s;
pointer-events: auto;
}
/* маленький «язычок» над подменю, указывающий на родителя */
.main-header-menu .sub-menu::before {
content: '';
position: absolute;
top: -8px; left: 24px;
width: 14px; height: 8px;
background: var(--bel-ochre);
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.main-header-menu .sub-menu .menu-item { display: block !important; }
.main-header-menu .sub-menu .menu-item > a {
position: relative;
font-family: var(--bel-font-display) !important;
font-size: 0.76rem !important;
letter-spacing: 0.08em !important;
text-transform: uppercase;
padding: 11px 22px !important;
border-bottom: 1px solid rgba(139, 111, 71, 0.1);
color: var(--bel-ink) !important;
}
.main-header-menu .sub-menu .menu-item:last-child > a { border-bottom: none; }
.main-header-menu .sub-menu .menu-item > a::after { display: none !important; }
.main-header-menu .sub-menu .menu-item > a:hover {
background: var(--bel-oak-wash) !important;
color: var(--bel-burgundy) !important;
}
/* Активный пункт: оставляем место под розетку (dot), чтобы она не
налезала на текст с учётом letter-spacing/uppercase. */
.main-header-menu .sub-menu .current-menu-item > a {
background: var(--bel-oak-wash) !important;
color: var(--bel-burgundy) !important;
padding-left: 36px !important;
}
/* Маленькая розетка у активного пункта подменю */
.main-header-menu .sub-menu .current-menu-item > a::before {
content: '';
position: absolute;
left: 14px; top: 50%;
transform: translateY(-50%);
width: 8px; height: 8px;
background: var(--bel-ochre);
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* ---------- CTA-пункт «Связаться» ---------- */
.menu-item.menu-item-cta { margin-left: 16px !important; }
.menu-item.menu-item-cta .belovode-cta,
.menu-item.menu-item-cta > a {
display: inline-flex !important;
align-items: center;
gap: 8px;
background: var(--bel-burgundy) !important;
color: var(--bel-bg) !important;
padding: 0.65em 1.3em !important;
border-radius: var(--bel-radius);
font-family: var(--bel-font-body) !important;
font-weight: 600 !important;
text-transform: uppercase;
font-size: 0.76rem !important;
letter-spacing: 0.14em;
line-height: 1 !important;
box-shadow: 0 2px 0 var(--bel-burgundy-dark), 0 4px 14px rgba(122, 36, 48, 0.22);
transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.menu-item.menu-item-cta .belovode-cta svg {
color: var(--bel-bg);
flex: 0 0 auto;
}
.menu-item.menu-item-cta .belovode-cta::after,
.menu-item.menu-item-cta > a::after { display: none !important; }
.menu-item.menu-item-cta a:hover {
background: var(--bel-burgundy-dark) !important;
color: var(--bel-bg) !important;
transform: translateY(-1px);
box-shadow: 0 3px 0 var(--bel-burgundy-dark), 0 6px 18px rgba(122, 36, 48, 0.3);
}
/* ---------------------------------------------------------------------
X. ХЛЕБНЫЕ КРОШКИ + БЛОК «ЕЩЁ В РАЗДЕЛЕ»
--------------------------------------------------------------------- */
.belovode-crumbs {
max-width: var(--bel-content-width);
margin: 0 auto 0.8em;
padding: 18px 0 0;
font-family: var(--bel-font-body);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bel-oak);
overflow-x: auto;
scrollbar-width: none;
}
.belovode-crumbs::-webkit-scrollbar { display: none; }
.belovode-crumbs ol {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: nowrap;
gap: 0 10px;
align-items: center;
justify-content: center;
white-space: nowrap;
}
.belovode-crumbs li {
display: inline-flex;
align-items: center;
gap: 10px;
white-space: nowrap;
flex-shrink: 0;
}
.belovode-crumbs li + li::before {
content: '/';
color: var(--bel-oak-faded);
margin-right: 0;
}
.belovode-crumbs a {
color: var(--bel-oak) !important;
text-decoration: none !important;
border-bottom: 1px solid transparent;
transition: color 150ms ease, border-color 150ms ease;
}
.belovode-crumbs a:hover {
color: var(--bel-burgundy) !important;
border-bottom-color: var(--bel-burgundy);
}
.belovode-crumbs [aria-current='page'] {
color: var(--bel-ink);
font-weight: 600;
}
/* Sibling-блок «Ещё в разделе» — добавляется в конец .entry-content */
.belovode-siblings {
margin-top: 3em;
padding-top: 2em;
border-top: 2px solid var(--bel-oak-faded);
}
.belovode-siblings__head {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 1em;
}
.belovode-siblings__kicker {
font-family: var(--bel-font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--bel-ochre);
}
.belovode-siblings__parent {
font-family: var(--bel-font-display);
font-weight: 700;
font-size: 20px;
letter-spacing: 0.04em;
color: var(--bel-ink) !important;
text-decoration: none !important;
border-bottom: 1px solid transparent;
align-self: flex-start;
transition: border-color 150ms ease, color 150ms ease;
}
.belovode-siblings__parent:hover {
color: var(--bel-burgundy) !important;
border-bottom-color: var(--bel-burgundy);
}
.belovode-siblings__list {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px 20px;
}
.belovode-siblings__list li { margin: 0 !important; padding: 0 !important; }
.belovode-siblings__list li::before { display: none !important; content: '' !important; }
.belovode-siblings__list a {
display: block;
padding: 10px 14px;
background: var(--bel-bg-card, rgba(247, 241, 229, 0.55));
border: 1px solid var(--bel-oak-faded);
border-radius: var(--bel-radius);
color: var(--bel-ink) !important;
text-decoration: none !important;
font-family: var(--bel-font-body);
font-size: 14px;
font-weight: 500;
transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.belovode-siblings__list a:hover {
background: var(--bel-ochre);
border-color: var(--bel-ochre);
color: var(--bel-ink) !important;
transform: translateY(-1px);
}