/**
* Левая навигационная колонка.
*
* Ширина и цвета — в переменных ниже. Брейкпоинт 850px совпадает с
* hide-for-medium / show-for-medium в Flatsome, менять его отдельно нельзя.
*/
:root {
--mcl-sidebar-w: 300px;
--mcl-brand: #283586;
--mcl-line: #e6e8f0;
--mcl-muted: #55596b;
/* Тёмно-синий витрины: заголовки разделов и плитки категорий. */
--mcl-navy: #001f51;
/* Красный — вторая плитка в чередовании на главной. */
--mcl-red: #ff0008;
}
.mcl-sidebar {
background: #fff;
display: none;
flex-direction: column;
/* Снизу отступа нет: список упирается в край колонки, как и задумано. */
padding: 14px 0 0;
width: var(--mcl-sidebar-w);
}
/*
* Логотип отбит от меню линией и воздухом. Прежние 20px не читались как
* граница блоков: между пунктами меню и так 10px, и зазор выглядел просто
* чуть большим шагом списка. Теперь 24px до линии и 24px после — вдвое
* больше внутреннего ритма, поэтому шапка колонки отделяется сама собой.
*
* Линия во всю ширину, а не с отступами: она рифмуется с правой границей
* колонки, того же цвета, и читается как структура панели, а не как
* разделитель внутри списка.
*/
.mcl-sidebar__logo {
border-bottom: 1px solid var(--mcl-line);
margin-bottom: 24px;
padding: 0 22px 24px;
}
.mcl-sidebar__logo a {
display: block;
}
.mcl-sidebar__logo img {
height: auto;
max-width: 100%;
}
/*
* Подпись под логотипом. Не heading: заголовок здесь встал бы выше h1
* страницы и попал в структуру документа как раздел, которым не является.
*
* Набрана прописными по ширине колонки — заказчик хотел так. От пунктов
* меню, которые тоже прописные, её отделяют насыщенность (800 против 500),
* размер мельче и линия под блоком логотипа.
*
* Выключка по ширине задана вместе с `text-align-last`: без него последняя
* строка осталась бы короткой, и блок не читался бы прямоугольником под
* логотипом — ради чего выключка и нужна.
*
* Строки разбиты вручную через
в тексте подписи. Автоматический перенос
* уводил «лентоткацкой» в первую строку, во второй оставалось одно слово —
* а одно слово по ширине не выключить, между чем растягивать нечего.
*
* `text-align-last` применяется и к последней строке блока, и к строке перед
* принудительным переносом, поэтому по ширине встают обе.
*
* Текст меняется фильтром `mcl_sidebar_tagline` из functions.php.
* Через blogdescription нельзя: он уходит в SEO-заголовок главной.
*/
.mcl-sidebar__tagline {
color: var(--mcl-muted);
font-family: 'Onest', var(--fs-font-family, sans-serif);
font-weight: 800;
font-size: 13px;
letter-spacing: 0.2px;
line-height: 1.45;
margin: 10px 0 0;
text-align: left;
text-transform: uppercase;
}
/* Варианты логотипа для тёмной и «прилипшей» шапки в сайдбаре не нужны. */
.mcl-sidebar__logo .header-logo-dark,
.mcl-sidebar__logo .header-logo-sticky {
display: none !important;
}
/* -------------------------------------------------------------------------
* Главное меню
* ---------------------------------------------------------------------- */
.mcl-menu,
.mcl-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
/*
* В «Дополнительном CSS» заказчика (Внешний вид → Настроить → Дополнительные
* стили) задано глобальное `li { margin-left: 40px }`. Оно сдвигало вправо весь
* список в колонке. Правило заказчика намеренно не трогаем — оно действует на
* весь сайт; гасим его только здесь.
*/
.mcl-menu li,
.mcl-catalog li {
margin-left: 0;
}
/*
* Между пунктами верхнего уровня зазор набирался из отступов ссылки
* (12px сверху и снизу) и ещё 9.6px от списочного `margin-bottom`
* Flatsome — всего 33.6px. На ноутбучных экранах из-за этого «Контакты»
* и «Полезная информация» уходили под сгиб.
*
* Лишний margin убран (он тут не нужен — пункты и так разделены), а
* отступы ссылки ужаты до 9px: зазор стал 18px, а меню короче на 84px
* и помещается целиком при высоте окна от 800px.
*/
.mcl-menu > li {
margin-bottom: 0;
}
.mcl-menu > li > a {
border-left: 3px solid transparent;
color: #2b2b2b;
display: block;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.03em;
line-height: 1.35;
/* 19 + 3px рамки слева = 22, вровень с логотипом и полем поиска. */
padding: 9px 22px 9px 19px;
text-transform: uppercase;
transition: color 0.15s, border-color 0.15s;
}
.mcl-menu > li > a:hover {
color: var(--mcl-brand);
}
.mcl-menu > li.current-menu-item > a,
.mcl-menu > li.current-menu-parent > a,
.mcl-menu > li.current-menu-ancestor > a {
border-left-color: var(--mcl-brand);
color: var(--mcl-brand);
}
/* -------------------------------------------------------------------------
* Категории WooCommerce — всегда развёрнуты.
* Разметку даёт wp_list_categories(), отсюда классы cat-item / current-cat.
* Те же стили работают и внутри мобильной панели Flatsome.
* ---------------------------------------------------------------------- */
.mcl-catalog {
border-left: 1px solid var(--mcl-line);
list-style: none;
margin: 2px 0 12px 25px;
padding: 0;
}
/*
* В колонке список вложен в .mcl-menu, а тамошнее `.mcl-menu ul { margin: 0 }`
* специфичнее и обнуляет отступ выше. Задаём явно: направляющая встаёт вровень
* с текстом пунктов меню, сами категории уходят на ступень вправо.
*/
.mcl-menu .mcl-catalog {
margin-left: 22px;
}
/*
* Между категориями не должно быть воздуха: Flatsome задаёт спискам
* `li { margin-bottom: 0.6em }` — это 9.6px, разумные для текста статьи и
* лишние для навигации. Зазор задаёт только внутренний отступ ссылки, им
* же набирается область нажатия.
*/
.mcl-catalog li {
margin-bottom: 0;
}
.mcl-catalog .cat-item > a {
color: var(--mcl-muted);
display: block;
font-size: 13px;
line-height: 1.35;
padding: 6px 20px 6px 14px;
transition: background 0.15s, color 0.15s;
}
.mcl-catalog .cat-item > a:hover {
background: #f4f5fa;
color: var(--mcl-brand);
}
/*
* У пункта со стрелкой ссылка занимает не всю ширину, поэтому подсветка
* обрывалась бы за 44px до края — заметно рядом с пунктами без стрелки.
* Красим строку целиком, с какой бы её части ни наводили.
*/
.mcl-catalog .mcl-has-children:hover > a,
.mcl-catalog .mcl-has-children:hover > .mcl-toggle {
background: #f4f5fa;
color: var(--mcl-brand);
}
/*
* current-cat — открыта сама категория;
* current-cat-parent — открыта её подкатегория;
* current-cat-ancestor — открыт кто-то глубже по ветке.
* Классы расставляет ядро WordPress, вручную ничего проставлять не нужно.
*/
.mcl-catalog .current-cat > a,
.mcl-catalog .current-cat-parent > a,
.mcl-catalog .current-cat-ancestor > a {
color: var(--mcl-brand);
font-weight: 500;
}
/* Вложенные уровни, если MCL_CATALOG_DEPTH станет больше единицы. */
.mcl-catalog .children {
list-style: none;
margin: 0;
padding-left: 14px;
}
/* -------------------------------------------------------------------------
* Аккордеон.
*
* Раскрытием управляет assets/js/sidebar-nav.js: он дописывает кнопку-стрелку
* и вешает класс `mcl-open`. Пока скрипт не отработал, действуют правила
* с current-cat — так хотя бы текущая ветка видна, если скрипт не загрузился.
* Как только список помечен классом `mcl-js`, состоянием управляет только он.
* ---------------------------------------------------------------------- */
.mcl-catalog .children {
display: none;
}
.mcl-catalog .current-cat > .children,
.mcl-catalog .current-cat-parent > .children,
.mcl-catalog .current-cat-ancestor > .children {
display: block;
}
.mcl-catalog.mcl-js .children {
display: none;
}
.mcl-catalog.mcl-js .mcl-open > .children {
display: block;
}
/* Ссылка остаётся ссылкой, поэтому кнопка кладётся поверх правого края
строки. Отступ у ссылки — чтобы длинное название не уходило под стрелку. */
/*
* Пункт с подкатегориями — строка из ссылки и кнопки-стрелки, а под ней
* вложенный список. Раньше кнопка накладывалась поверх ссылки абсолютом
* и получала высоту числом; число приходилось держать равным высоте
* строки, и после правки отступов стрелка съехала вниз.
*
* Теперь это обычная строка: ссылка занимает всё свободное место,
* кнопка — свои 44px, обе растянуты на высоту строки, и стрелка встаёт
* по центру сама. Вложенный список переносится на следующую строку.
*/
.mcl-catalog .mcl-has-children {
display: flex;
flex-wrap: wrap;
}
.mcl-catalog .mcl-has-children > a {
flex: 1 1 auto;
/* Место под стрелку больше не нужно: у неё своя колонка. */
padding-right: 6px;
}
.mcl-catalog .mcl-has-children > .children {
flex-basis: 100%;
}
/*
* Кнопка — такой же элемент строки, как ссылка, и тянется на её высоту.
* Высоту числом не задаём: она зависит от отступов ссылки, и при их
* правке разъехалась бы — так стрелка уже однажды съехала на 4.6px.
*/
.mcl-toggle {
align-items: center;
align-self: stretch;
background: none;
border: 0;
color: var(--mcl-muted);
cursor: pointer;
display: flex;
flex: 0 0 44px;
justify-content: center;
/*
* Поля и минимальную высоту Flatsome задаёт всем кнопкам: `margin-bottom:
* 1em` съедал растяжку (при top+bottom он вычитается из высоты), а
* min-height делала кнопку выше строки.
*/
margin: 0;
min-height: 0;
padding: 0;
}
.mcl-toggle svg {
height: 6px;
transition: transform 0.2s;
width: 10px;
}
.mcl-toggle:hover {
color: var(--mcl-brand);
}
.mcl-toggle:focus-visible {
border-radius: 3px;
outline: 2px solid var(--mcl-brand);
outline-offset: -4px;
}
.mcl-open > .mcl-toggle svg {
transform: rotate(180deg);
}
/* -------------------------------------------------------------------------
* Десктоп: колонка фиксирована, контент сдвинут вправо.
* ---------------------------------------------------------------------- */
@media screen and (min-width: 850px) {
#wrapper {
padding-left: var(--mcl-sidebar-w);
}
.mcl-sidebar {
border-right: 1px solid var(--mcl-line);
bottom: 0;
display: flex;
left: 0;
position: fixed;
top: 0;
z-index: 40;
}
/* Скроллится только список, логотип и поиск остаются на месте. */
.mcl-sidebar__nav {
display: flex;
flex: 1;
flex-direction: column;
min-height: 0;
overflow-y: auto;
/*
* Полосу прокрутки прячем, сама прокрутка (колесо, тач, клавиши)
* работает. Заодно списку возвращаются съеденные ею 15px.
* Firefox и старый Edge — свойствами, Chrome и Safari — псевдоэлементом ниже.
*/
-ms-overflow-style: none;
scrollbar-width: none;
}
.mcl-sidebar__nav::-webkit-scrollbar {
display: none;
}
/*
* Если меню короче колонки, свободное место раскладывается между
* пунктами, и список доходит до нижнего края вместо того, чтобы
* обрываться посередине с пустотой под ним.
*
* `min-height: 100%` берётся от видимой высоты списка, поэтому на
* невысоких экранах, где меню и так не влезает, правило не делает
* ничего: свободного места нет, раскладывать нечего, прокрутка
* работает как прежде.
*
* Только на десктопе: в выезжающей панели список идёт подряд.
*/
.mcl-sidebar .mcl-menu {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100%;
}
/* Логотип живёт в сайдбаре, из шапки его убираем. */
#header #logo {
display: none;
}
/*
* padding у #wrapper не действует на position: fixed, поэтому все
* фиксированные элементы темы сдвигаем вручную. Список закрытый —
* если во Flatsome включат ещё один такой блок, его нужно добавить сюда.
*/
.header-wrapper.stuck, /* прилипающая шапка */
.sticky-add-to-cart--active, /* панель заказа на карточке товара */
.is-sticky-section, /* липкая секция конструктора страниц */
.flatsome-cookies { /* уведомление о cookie */
left: var(--mcl-sidebar-w);
}
/*
* Одного left мало. Flatsome задаёт `.header, .header-wrapper { width: 100% }`,
* а у фиксированного элемента 100% считаются от вьюпорта, а не от родителя.
* Ширина получалась во весь экран, right:0 при заданной ширине игнорируется,
* и прилипшая шапка уезжала за правый край ровно на ширину колонки.
* width:auto возвращает управление паре left/right.
*/
.header-wrapper.stuck {
right: 0;
width: auto;
}
/*
* В шапке остались только контакты и корзина. Штатно Flatsome прячет этот
* ряд при скролле и оставляет полосу категорий, но её больше нет —
* иначе прилипшая шапка была бы пустой.
*/
.header-wrapper.stuck .hide-for-sticky {
display: block;
}
}
/* -------------------------------------------------------------------------
* Ширина баннера и секции заявки.
*
* В «Дополнительном CSS» заказчика задано
* `.callback-section, .video-slider { width: 86vw }`. Единицы vw считаются
* от вьюпорта и ломались в обе стороны:
*
* на десктопе 86vw шире контентной области (она уже на ширину колонки),
* и секция вылезала за правый край, обрезая содержимое;
* на узких экранах 86vw уже вьюпорта — блоки получали поля по 7% с каждой
* стороны, хотя должны идти от края до края.
*
* Ширину задаём от родителя, а не от вьюпорта: на десктопе это контентная
* область, на мобильных — вся ширина экрана. Правило заказчика намеренно
* не трогаем и его 86% здесь не повторяем, чтобы при его правке ничего
* не разъехалось.
*
* Правильнее задать ширину самой секции в UX Builder — тогда vw не нужен
* вовсе, и это правило можно будет убрать.
*
* `#wrapper` в селекторе нужен ради веса: блок «Дополнительного CSS» Flatsome
* выводит в разметке ниже нашего файла, и при равной специфичности выигрывал бы он.
* ---------------------------------------------------------------------- */
#wrapper .callback-section,
#wrapper .video-slider {
margin-left: 0;
margin-right: 0;
max-width: 100%;
width: 100%;
}
/* -------------------------------------------------------------------------
* Слои баннера: логотип в левом верхнем углу, слоган в правом нижнем.
*
* Оба блока собраны шорткодами темы (text_box + ux_image) и правятся в
* UX Builder — здесь только оформление слогана и вертикальные отступы,
* которых у text_box нет в настройках.
*
* Под логотип добавлена мягкая тень: на светлых кадрах ролика знак
* теряет края, даже в светлой версии.
* ---------------------------------------------------------------------- */
/*
* Поля от краёв баннера. Слои Flatsome позиционирует абсолютно и вплотную
* к краю, а у .banner-layers по бокам всего 15px — логотип и слоган
* упирались в границы кадра.
*/
.mcl-banner__intro .text-inner {
padding: 42px 0 0 42px;
}
.mcl-banner__outro .text-inner {
padding: 0 42px 42px 0;
}
/* Обёртке картинки Flatsome даёт класс .img, а не .ux-image. */
.mcl-banner__intro .img img {
filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
}
/*
* Селектор с обоими классами нужен ради веса: у абзаца внутри text_box
* свой вертикальный отступ от темы, и одного .mcl-banner__slogan не хватало —
* слоган отходил от края на лишние 26px сверху и снизу.
*/
.mcl-banner__outro .mcl-banner__slogan {
margin: 0;
}
.mcl-banner__slogan {
color: #fff;
font-family: 'Onest', var(--fs-font-family, sans-serif);
font-size: 26px;
/*
* У Onest нет собственного курсива — браузер наклоняет прямое
* начертание сам. Для трёх коротких строк это приемлемо; если
* понадобится настоящий курсив, придётся брать другое семейство.
*/
font-style: italic;
font-weight: 500;
letter-spacing: 0.2px;
line-height: 1.35;
margin: 0;
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}
@media (max-width: 849px) {
.mcl-banner__intro .text-inner {
padding: 26px 0 0 20px;
}
.mcl-banner__outro .text-inner {
padding: 0 20px 26px 0;
}
.mcl-banner__slogan {
font-size: 19px;
}
}
/* -------------------------------------------------------------------------
* Шапка: то, что осталось после переноса меню и логотипа в колонку.
* Слева контакты, справа поиск и корзина.
*
* Состав и порядок элементов — «Внешний вид → Настроить → Flatsome →
* Header → Header Elements»: контакты это «HTML Block 2» в левой группе,
* поиск и корзина — в правой. Сама разметка контактов лежит в поле
* «HTML Block 2» (theme_mod `topbar_right`), там три элемента подряд,
* без переносов строк. Раскладку в строку задаём здесь.
*
* Не в медиазапросе: этот же блок Flatsome выводит в мобильной
* off-canvas панели, и там строка так же уместна — просто переносится.
* ---------------------------------------------------------------------- */
.mcl-contacts {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 2px 18px;
line-height: 1.3;
}
.mcl-contacts__hours {
white-space: nowrap;
}
/*
* Почта и телефон — ссылки, поэтому красились в синий цвет ссылок темы.
* Приводим их к тёмно-синему витрины, тем же, что у заголовков разделов
* и плиток категорий.
*/
.mcl-contacts__mail,
.mcl-contacts__phone {
color: var(--mcl-navy);
}
.mcl-contacts__mail:hover,
.mcl-contacts__phone:hover,
.mcl-contacts__mail:focus,
.mcl-contacts__phone:focus {
color: var(--mcl-brand);
}
/* Телефон — главный контакт, поэтому крупнее остальных.
Раньше эту роль играл