/* =========================
GLOBAL: Переменные CSS
========================= */
/* Основные переменные, используемые по всему сайту:
--first: фоновый цвет элементов
--second: базовый цвет текста
--active: основной акцентный цвет (зеленый)
--active-alt: альтернативный акцентный цвет (оранжевый)
--margin: отступы по умолчанию
--radius: радиус скругления по умолчанию
*/
.vars {
font-size: 16px;
--first: #28282e; /* тёмный фон блоков */
--second: #e0e0e0; /* основной цвет текста */
--accent: #404040; /* дополнительный серый цвет */
--active: #00c76a; /* ярко-зеленый акцент */
--active-alt: #ff7849; /* мягкий оранжево-красный акцент */
--margin: 60px;
--radius: 5px;
}
/* =========================
GLOBAL: Сброс стилей и базовая типографика
========================= */
/* Универсальный сброс: убираем отступы, границы и рамки для всех элементов */
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
outline: none;
-webkit-locale: auto;
}
html, body {
width: 100%;
}
/* Базовые стили для body:
- Шрифт Geologica
- Увеличенный отступ сверху (для fixed-элементов)
- Отключение масштабирования текста на iOS
- Сглаживание шрифтов
- Низкий font-weight (300)
*/
body {
font-family: "Geologica", sans-serif;
line-height: 1;
padding-top: calc(200px + var(--margin)) !important;
-webkit-text-size-adjust: none;
font-weight: 300;
-webkit-font-smoothing: antialiased;
background-color: var(--first);
color: var(--second);
}
/* Ограничитель ширины контейнера */
.max {
margin: 0px auto;
width: 100%;
max-width: 1920px;
padding: 0 calc(var(--margin)*3);
}
/* =========================
GLOBAL: Ссылки, заголовки и структура блоков
========================= */
/* Универсальный стиль ссылок:
- без подчеркивания
- курсор pointer
- плавный переход при hover
*/
a {
color: inherit;
text-decoration: none;
outline: none;
cursor: pointer;
transition: color 250ms, border-color 250ms;
}
a:hover {
color: var(--active);
}
/* Заголовки с классами-хелперами и базовыми размерами */
h1, .h1-like,
h2, .h2-like,
h3, .h3-like {
line-height: 1;
font-weight: 500;
color: var(--second);
}
h1, .h1-like {
font-size: 38px;
margin: 0 0 var(--margin) 0;
}
h2, .h2-like {
font-size: 52px;
margin-bottom: calc(var(--margin)/2);
}
h3, .h3-like {
font-size: 36px;
margin-bottom: calc(var(--margin)/2);
}
.h-block .h2-like {
margin-bottom: 0;
}
.h-block {
margin-bottom: var(--margin);
gap: calc(var(--margin)/2);
}
/* Кнопка "Показать всё" в заголовках */
.h-block .show-all {
background: var(--first);
border-radius: var(--radius);
padding: 10px;
font-size: 14px;
font-weight: 400;
color: var(--second);
border: 1px solid rgba(255, 255, 255, 0.1); /* лёгкая рамка для выделения */
transition: background 250ms, color 250ms;
}
.h-block .show-all:hover {
background: var(--active);
color: #fff;
}
/* =========================
GLOBAL: Текст, списки, изображения
========================= */
/* Усиление жирности для определённых элементов */
b, strong, th {
font-weight: 500;
color: var(--second); /* делаем текст светлым */
}
/* Списки без маркеров */
ul {
list-style-type: none;
color: var(--second); /* для единообразия */
}
/* Унификация отображения изображений и svg */
img {
object-fit: contain;
}
picture {
display: block;
}
img, svg {
height: auto;
max-height: 100%;
max-width: 100%;
display: inline-block;
vertical-align: middle;
}
/* SVG элементы перекрашиваются в текстовый цвет */
svg {
fill: currentColor;
color: var(--second); /* для icon-like SVG */
transition: fill 250ms, color 250ms;
}
iframe {
width: 100%;
border: none;
}
/* =========================
GLOBAL: Формы
========================= */
/* Унификация всех полей форм */
input, select, textarea, button {
-webkit-appearance: none;
-moz-appearance: none;
font-family: inherit;
font-size: inherit;
color: var(--second);
background: var(--first);
border-radius: 0px;
font-weight: inherit;
}
/* Текстовые поля */
input[type=text],
input[type=tel],
input[type=email],
input[type=password],
input[type=search] {
display: block;
width: 100%;
border: 1px solid #333;
padding: 0px 20px;
background: var(--first);
height: 46px;
border-radius: var(--radius);
color: var(--second);
transition: 250ms;
}
/* Текстовая область */
textarea {
display: block;
width: 100%;
border: 1px solid #333;
padding: 20px;
resize: none;
height: 100px;
font-size: 15px;
background: var(--first);
color: var(--second);
border-radius: var(--radius);
transition: 250ms;
}
/* Стилизация фокуса для полей */
input[type=text]:focus,
input[type=tel]:focus,
input[type=email]:focus,
textarea:focus,
input[type=password]:focus,
input[type=search]:focus {
border-color: var(--active-alt);
box-shadow: inset 0 0 0 1px var(--active-alt);
}
/* Кнопки отправки */
.button,
.sendComment {
background: var(--active);
color: #f0f0f0;
height: 50px;
border: none;
width: 220px;
max-width: 100%;
border-radius: var(--radius);
transition: background 250ms;
}
.button:hover,
.sendComment:hover {
background: var(--active-alt);
}
/* Ссылки в виде кнопок */
.links {
margin-top: var(--margin);
gap: var(--margin);
}
.link {
font-weight: 500;
color: var(--active);
transition: 250ms;
padding-bottom: 5px;
border-bottom: 1px dashed var(--active);
width: max-content;
}
.link:hover {
color: var(--active-alt);
border-bottom-color: var(--active-alt);
}
/* =========================
GLOBAL: Чекбоксы и радиокнопки
========================= */
/* Чекбокс */
input[type=checkbox] {
display: inline-block;
vertical-align: middle;
width: 16px !important;
height: 16px;
margin-right: 10px !important;
position: relative;
border: 1px solid #dadada;
background: var(--first);
}
/* Стилизация при активации чекбокса */
input[type=checkbox]:checked {
background: url("data:image/svg+xml,") 50% 50% no-repeat;
background-size: 9px;
border-color: var(--active);
}
/* Радиокнопка */
input[type=radio] {
display: inline-block;
vertical-align: middle;
width: 16px !important;
height: 16px;
margin-right: 10px !important;
margin-left: 4px;
position: relative;
border-radius: 50%;
border: 1px solid #dadada;
background: var(--first);
}
/* Активная радиокнопка */
input[type=radio]:checked {
background: var(--first);
border: 4px solid #FF3D00;
}
/* =========================
GLOBAL: Селекты
========================= */
/* Выпадающие списки */
select,
.form-list .SumoSelect > .CaptionCont {
display: block;
width: 100%;
font-size: 15px;
font-weight: 500;
border: 2px solid #444;
padding: 0px 40px 0 20px;
background: var(--first) url("data:image/svg+xml,") no-repeat;
background-position: right 25px center;
border-radius: 5px;
line-height: 46px;
height: 50px !important;
box-shadow: none !important;
color: var(--second);
cursor: pointer;
transition: border-color 250ms;
}
/* Блокировка редактирования инпутов */
input[readonly],
input[readonly]:focus {
opacity: 0.5;
border-color: #666; /* более тёмный бордер */
background: var(--first);
color: var(--second);
}
/* Валидация поля с классом .check */
input.check:focus:invalid {
border-bottom-color: #f10d48;
}
/* =========================
GLOBAL: SVG, таблицы и placeholder
========================= */
/* SVG и вложенные элементы */
svg {
fill: currentColor;
color: var(--second); /* для наследования цвета текста */
}
svg * {
transition: fill 250ms;
}
/* Таблицы */
table {
width: 100% !important;
border-collapse: collapse;
color: var(--second);
background-color: var(--first);
}
/* Обертка таблиц для скролла */
.table-wrapper {
overflow-x: auto;
margin: 0 -20px;
padding: 0 20px;
}
/* Стили плейсхолдера */
::placeholder {
color: rgba(255, 255, 255, 0.4); /* светлый прозрачный текст */
}
/* Удаление встроенных кнопок в поле поиска */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none;
}
/* =========================
GLOBAL: Admin bar
========================= */
.admin-bar {
top: unset !important;
bottom: 0px;
background: #111 !important;
border-top: 1px solid #333;
}
/* Скрытие кнопки настроек */
.admin-bar__elem--settings {
display: none !important;
}
/* Выравнивание кнопок вправо */
.admin-bar__elem--btns {
margin-left: auto;
}
/* Убираем рамку у кнопки входа */
.admin-bar-link.admin-bar-link--enter {
border: none !important;
}
/* Цвет текста в админ-панели */
body .admin-bar .admin-bar-link__title {
color: var(--second) !important;
}
/* Цвет иконок в админ-панели */
body .admin-bar .admin-bar-link__icon {
fill: var(--second) !important;
}
/* END GLOBAL */
/* =========================
BASIC: Базовая вёрстка и утилиты
========================= */
/* Основной тег main:
- Занимает высоту экрана за вычетом шапки (200px)
- Нижний отступ для предотвращения наложения футера
- Добавлен фон и цвет текста на случай прямой вставки без классов
*/
main {
min-height: calc(100vh - 200px);
padding-bottom: calc(var(--margin)*2);
background: var(--first);
color: var(--second);
}
/* Класс .ds (disable select/drag) */
.ds {
-webkit-user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-touch-callout: none;
}
/* Гибкий контейнер: горизонтальное размещение по умолчанию */
.flex {
display: flex;
flex-wrap: wrap;
}
/* Вертикальный флекс-стек */
.flex.column {
flex-direction: column;
}
/* Запрет переноса строк (nowrap), сброс white-space */
.flex.nowrap {
flex-wrap: nowrap;
white-space: unset;
}
/* Выравнивание по центру по вертикали */
.flex.align-center {
align-items: center;
}
/* Центрирование по горизонтали */
.flex.center {
justify-content: center;
}
/* Равномерное распределение по ширине */
.flex.space-between {
justify-content: space-between;
}
/* Фон-контейнер с обрезкой по краям, центрированием и cover */
.cover {
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
/* Фон-контейнер с полной видимостью изображения (без обрезки), центрированием и contain */
.contain {
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: contain;
}
/* Показывается только на мобильных (по умолчанию скрыт) */
.mobile-show {
display: none;
}
/* Показывается только на планшетах (по умолчанию скрыт) */
.tablet-show {
display: none;
}
/* Flex-контейнер, активный только на мобильных устройствах */
.mobile-flex {
display: none;
}
/* END BASIC */
/* =========================
TOP-LINE: Верхняя навигационная панель (абсолютная)
========================= */
/* Контейнер верхней линии:
- Абсолютное позиционирование
- Закреплена сверху страницы
- Ширина на весь экран
- Нижняя граница
- Высокий z-index для перекрытия других элементов
*/
.top-line {
position: absolute;
top: 0;
left: 0;
width: 100%;
border-bottom: 1px solid var(--second);
z-index: 2000;
background: var(--first);
}
/* Внутренний контейнер */
.top-line > .max {
height: 100%;
}
/* Меню с пунктами */
.top-line .menu-pages {
gap: calc(var(--margin)/2);
}
/* Элемент меню */
.top-line .menu-pages li {
position: relative;
}
/* Активный пункт меню */
.top-line .menu-pages li.bold a {
font-weight: 500;
color: var(--active-alt);
opacity: 1;
}
/* Общие ссылки и спаны */
.top-line .menu-pages li a,
.top-line .menu-pages li span {
display: flex;
align-items: center;
height: 49px;
gap: 10px;
opacity: 0.75;
color: var(--second);
transition: color 250ms, opacity 250ms;
}
/* Стрелка раскрытия подменю */
.top-line .menu-pages li.has-sub svg {
transition: 250ms;
margin-bottom: -2px;
width: 10px;
height: 10px;
transform: rotateZ(90deg);
fill: var(--second);
}
/* Подменю второго уровня */
.top-line .menu-pages .level-2 {
position: absolute;
top: 100%;
left: -20px;
transform: scaleY(0);
transform-origin: 0 0;
transition: 250ms;
background: var(--first);
padding: 20px;
width: 220px;
border: 1px solid rgba(255, 255, 255, 0.05);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
/* Элементы подменю */
.top-line .menu-pages .level-2 li a {
padding: 10px 0;
height: unset;
color: var(--second);
opacity: 0.8;
}
/* Раскрытие подменю */
.top-line .menu-pages li:hover .level-2 {
transform: scaleY(1);
}
/* Email */
.top-line .email {
font-weight: 500;
color: var(--second);
opacity: 0.8;
}
/* Кнопка звонка */
.top-line .back-ring {
font-weight: 500;
margin-left: var(--margin);
color: var(--second);
opacity: 0.8;
}
/* Общие стили для email и звонка */
.top-line .back-ring,
.top-line .email {
gap: 10px;
height: 49px;
cursor: pointer;
transition: opacity 250ms;
}
.top-line .back-ring:hover,
.top-line .email:hover {
opacity: 1;
}
/* Иконки внутри email и звонка */
.top-line .back-ring img,
.top-line .email img {
margin-bottom: -2px;
filter: brightness(1.2);
}
/* Валюты */
.top-line .currency {
gap: calc(var(--margin)/2);
opacity: 0.5;
color: var(--second);
}
/* END TOP-LINE */
/* =========================
INFORMER: Выдвигающаяся панель с уведомлением
========================= */
/* Блок .informer:
- Фиксированное позиционирование на экране
- По умолчанию спрятан за правым краем экрана (right: -250px)
- Ширина 250px (принудительно через !important)
- Отступ сверху — 120px (под шапкой)
- Высокий z-index, чтобы быть поверх остальных элементов
- Плавная анимация при появлении/скрытии
- Внутренние элементы расположены с отступом (gap)
*/
.informer {
width: 250px !important;
gap: 5px;
transition: 250ms;
position: fixed;
top: 120px;
right: -250px;
z-index: 9000;
background: var(--first);
color: var(--second);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
padding: 15px 20px;
border-radius: var(--radius);
}
/* Активное состояние */
.informer.active {
right: var(--margin);
}
/* Уменьшение жирности */
.informer b {
font-weight: 400;
color: var(--second);
}
/* END INFORMER */
/* =========================
HEADER: Основной блок шапки сайта
========================= */
/* Основной контейнер header:
- Абсолютно позиционированный блок
- С фоном основного цвета (--active)
- Фильтр размытия для эффекта "стеклянности"
- Расположен на 50px ниже top-line
- Высота фиксирована — 100px
*/
header {
background: var(--active);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
position: absolute;
top: 50px;
left: 0;
width: 100%;
z-index: 1000;
height: 100px;
}
/* Фикс при скролле */
header.fixed {
top: 0;
position: fixed;
}
/* Внутренний контейнер */
header > .max {
height: 100%;
position: relative;
}
/* Логотип */
header .logo {
width: 250px;
flex-shrink: 0;
height: 60px;
margin-right: var(--margin);
}
/* Блок иконок */
header .icons-block {
gap: calc(var(--margin)/4);
margin: 0 calc(var(--margin)/2);
}
/* Иконка */
header .icons-block .icon {
width: 40px;
height: 40px;
color: var(--second);
padding: 10px;
cursor: pointer;
position: relative;
}
/* Счётчик */
header .icons-block .count {
position: absolute;
top: 10px;
left: 30px;
width: 16px;
height: 16px;
font-size: 10px;
border-radius: 50%;
color: #fff;
background: var(--active-alt);
font-weight: 400;
text-align: center;
line-height: 16px;
}
/* Анимация иконок */
header .icons-block .icon svg {
transition: 250ms;
fill: var(--second);
}
/* Скрытие счётчика избранного, если пусто */
header .icons-block .icon-favorites .count {
display: none;
}
/* =========================
Меню и кнопка открытия меню
========================= */
/* .menu-button — кнопка открытия основного меню:
- Оранжевый фон
- Белый текст
- Стандартная высота
- Радиус скругления
- Ширина фиксирована
- Выравнивание элементов
*/
.menu-button {
color: #fff;
background: var(--active-alt);
height: 50px;
cursor: pointer;
position: relative;
border-radius: var(--radius);
width: 250px;
gap: 10px;
flex-shrink: 0;
}
/* Обёртка бургер-линий */
.menu-button .lines {
width: 20px;
height: 100%;
position: relative;
}
/* Линии бургера */
.menu-button span {
background: #fff;
height: 2px;
position: absolute;
width: 100%;
left: 0;
transition: margin 250ms ease 250ms, top 250ms ease 250ms, transform 250ms ease 0ms;
border-radius: 1px;
}
/* Позиции бургер-линий */
.menu-button span:nth-of-type(1) { top: 50%; margin-top: -7px; }
.menu-button span:nth-of-type(2) { top: 50%; margin-top: -1px; }
.menu-button span:nth-of-type(3) { top: 50%; margin-top: 5px; }
/* Активация меню: крестик */
.menu-button.active span {
transition: margin 250ms ease 0ms, top 250ms ease 0ms, transform 250ms ease 250ms;
}
.menu-button.active span:nth-of-type(1) {
transform: rotateZ(45deg);
margin-top: -1px;
}
.menu-button.active span:nth-of-type(2) {
opacity: 0;
}
.menu-button.active span:nth-of-type(3) {
transform: rotateZ(-45deg);
margin-top: -1px;
}
/* Горизонтальное выпадающее меню */
.menu-block .menu {
position: absolute;
top: 100%;
left: 0;
transform: scaleY(0);
transform-origin: 0 0;
transition: 250ms;
width: 100%;
background: var(--first);
color: var(--second);
padding: calc(var(--margin)/2) 0;
}
/* Показ меню */
.menu-block .menu.show {
transform: scaleY(1);
}
/* Выпадающее подменю (категории) */
.drop-down.menu {
position: absolute;
top: 100%;
left: 0;
overflow-y: auto;
transform: scaleY(0);
transform-origin: 0 0;
transition: 250ms;
width: 100%;
background: var(--first);
color: var(--second);
padding: calc(var(--margin)/2) 0;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}
/* Показ подменю */
.drop-down.menu.show {
transform: scaleY(1);
}
/* =========================
Контактный блок
========================= */
/* Телефон в шапке */
header .phone {
font-weight: 500;
font-size: 22px;
color: var(--second);
}
/* Обёртка телефона */
header .phone-block {
gap: 8px;
}
/* Иконка телефона */
header .phone-block svg {
width: 20px;
height: 20px;
fill: var(--second);
}
/* График работы */
header .schedule {
color: rgba(255, 255, 255, 0.5);
font-size: 14px;
line-height: 1.4;
text-align: end;
}
/* Поле поиска в шапке */
header input[type=search] {
background-color: var(--first);
color: var(--second);
border: 1px solid #333;
}
/* Линейное меню */
.menu-line ul {
gap: var(--margin);
width: 100%;
}
/* Ссылки в меню */
.menu-line a {
transition: 250ms;
gap: 5px;
color: var(--second);
}
/* Иконки в меню */
.menu-line img {
width: 20px;
height: 20px;
filter: brightness(1.2);
}
/* =========================
Категории в меню (многоуровневое меню)
========================= */
/* Контейнер категорий */
header .menu-categories {
position: relative;
height: calc(100vh - 150px);
}
/* Уровень 1 (категории) */
header .menu-categories .level-1 {
width: 250px;
padding: 20px 0;
}
header .menu-categories .level-1 img {
width: 20px;
filter: brightness(1.1);
}
/* Уровень 2 (подкатегории) */
header .menu-categories .level-2 {
width: calc(100% - 250px);
height: 100%;
padding: 20px 40px;
position: absolute;
top: 0;
left: 250px;
background: var(--first);
color: var(--second);
display: none;
overflow-y: auto;
box-shadow: -4px 0 10px rgba(0, 0, 0, 0.4);
}
header .menu-categories .level-2 img {
width: 60px;
filter: brightness(1.2);
}
/* Сетка */
header .menu-categories .level-2 ul {
grid-template-columns: repeat(3, 1fr);
gap: calc(var(--margin)/2);
display: grid;
}
/* Уровень 3 */
header .menu-categories .level-3 {
display: none;
}
/* Общий стиль ссылок */
header .menu-categories a {
display: flex;
align-items: center;
gap: 10px;
color: var(--second);
transition: color 250ms;
}
/* Ссылки первого уровня */
header .menu-categories .level-1 > li > a {
padding: 10px 0;
}
/* SVG иконки */
header .menu-categories a svg {
width: 10px;
height: 10px;
margin-left: 5px;
fill: currentColor;
}
/* Ховер по ссылке */
header .menu-categories a:hover {
color: var(--active);
}
/* Показ второго уровня */
header .menu-categories li:hover > .level-2 {
display: block;
}
/* END HEADER */
/* =========================
MENU-LINE: Горизонтальное меню под шапкой
========================= */
/* Основной контейнер линии меню:
- Абсолютно позиционируется под хедером (150px от верха страницы)
- Белый фон
- Ширина на весь экран
- Высокий z-index (900), чтобы меню было поверх большинства элементов
- Фиксированная высота — 50px
*/
.menu-line {
position: absolute;
top: 150px;
left: 0;
background: var(--accent);
width: 100%;
z-index: 900;
height: 50px;
}
/* Внутренний контейнер с ограниченной шириной и вертикальным выравниванием:
- Высота равна родителю (50px)
- Горизонтальные отступы между элементами меню
*/
.menu-line > .max {
height: 100%;
gap: var(--margin);
}
/* END MENU-LINE */
/* =========================
HOME: Стили для главной страницы
========================= */
/* Блок последнего товара с фоновым паттерном */
.product-wrapper.last {
background: url(../images/pattern.jpg) repeat 0 0;
color: var(--active);
}
/* Заголовок */
.product-wrapper.last .title {
font-size: 20px;
margin: 20px 0;
color: var(--first);
}
/* Подзаголовок */
.product-wrapper.last .sup-title {
font-size: 16px;
color: var(--active-alt);
}
/* Hover по кнопке */
.product-wrapper.last .button:hover {
background: var(--active-alt);
}
/* =========================
HOME-FIRST: Первый экран (баннер)
========================= */
/* Отрицательный верхний отступ для перекрытия хедера */
.home-first {
margin-top: calc(var(--margin)*-1);
overflow: hidden;
}
.home-first .inner {
height: 600px;
padding: 0;
position: relative;
}
/* Закомментированные декоративные оверлеи:
- затемнение слева
- SVG-подложка справа
*/
/* Фоновое изображение — растягивается на всю ширину и высоту блока */
.home-first .back-first-img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Левый контентный блок */
.home-first .left-block {
max-width: 50%;
position: relative;
z-index: 2;
}
.home-first .title {
font-size: 56px;
color: #fff;
}
.home-first .sub-title {
font-size: 22px;
color: #fff;
margin-bottom: var(--margin);
margin-top: 25px;
}
/* Список бонусов (две колонки) */
.home-first .bonuses {
margin-top: 35px;
margin-bottom: var(--margin);
}
.home-first .bonuses ul {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
.home-first .bonuses ul li {
margin-top: 10px;
gap: 12px;
}
.home-first .bonuses ul li:first-child {
margin-top: 0;
}
/* Иконка галочки у пункта бонуса */
.home-first .bonuses .svg-block {
flex-shrink: 0;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: var(--active);
}
.home-first .bonuses .svg-block svg {
color: #fff;
width: 8px;
height: 6px;
}
/* Дата и место проведения */
.home-first .date-place__block {
gap: 10px;
margin-top: 35px;
}
.home-first .date-place__block div {
padding: 4px 18px;
border-radius: 200px;
}
.home-first .date-place__block .date {
background-color: var(--active);
color: #fff;
}
.home-first .date-place__block .place {
background-color: #fff;
color: #202020;
}
/* Нижняя панель с акциями и кнопкой */
.home-first .bottom-part {
gap: 10px;
}
/* Блок "Скидка" с градиентом */
.home-first .bottom-part .discount {
background: linear-gradient(90.39deg, rgba(255, 255, 255, 0.05) -11.42%, rgba(255, 255, 255, 0) 106.86%);
border-radius: 3px;
gap: 10px;
padding: 4px 0 4px 10px;
width: 373px;
color: var(--second);
}
/* Текст скидки */
.home-first .bottom-part .discount p {
font-weight: 500;
font-size: 22px;
color: var(--active);
}
/* Главная кнопка */
.home-first .button {
font-weight: 500;
font-size: 18px;
height: 60px;
gap: 10px;
background-color: var(--first);
border: 1px solid var(--active);
color: var(--active);
}
/* Иконка внутри кнопки */
.home-first .button svg {
transition: 250ms;
width: 24px;
height: 24px;
color: var(--active);
}
/* Пагинация (точки) */
.home-first .home-slider-pagination .swiper-pagination-bullet {
margin: 0;
width: 50px;
height: 4px;
border-radius: 200px;
background-color: var(--second);
opacity: 0.4;
}
/* Активная точка */
.home-first .home-slider-pagination .swiper-pagination-bullet-active {
width: 100px;
background-color: var(--active);
opacity: 1;
}
/* Отступ пагинации */
.home-first .swiper-pagination.home-slider-pagination {
bottom: 35px;
}
/* Стрелки слайдера */
.home-first .navigatin-block {
bottom: var(--margin);
right: 25%;
position: absolute;
}
.home-first .navigatin-block .swiper-button-prev,
.home-first .navigatin-block .swiper-button-next {
position: static;
}
/* =========================
HOME-BRANDS: Секция с брендами
========================= */
.home-brands .flex {
gap: calc(var(--margin)/4);
}
.home-brands .flex a {
height: 40px;
line-height: 40px;
border-radius: var(--radius);
background: var(--first);
padding: 0 calc(var(--margin)/2);
color: var(--second);
transition: background 250ms;
}
.home-brands .flex a:hover {
background: var(--active-alt);
color: #fff;
}
.home-brands .button {
margin-top: calc(var(--margin)/2);
}
/* Сетка логотипов брендов */
.brands {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: var(--margin);
text-align: center;
}
/* Логотипы */
.brands img {
object-fit: contain;
aspect-ratio: 16/9;
margin-bottom: 10px;
margin-top: 0 !important;
filter: brightness(1.2) contrast(1.1);
}
/* =========================
HOME-PROMOTION: Промо-секция
========================= */
.home-promotion .inner {
position: relative;
overflow: hidden;
height: 625px;
padding: 34px;
background-color: var(--first);
gap: 24px;
}
/* Размытие с цветным кругом */
.home-promotion .blur {
width: 366px;
height: 351px;
opacity: 0.16;
background-color: #4BCC8A;
border-radius: 50%;
filter: blur(60px);
position: absolute;
right: 0;
bottom: 0;
}
/* Дополнительные декоративные элементы */
.home-promotion .shadow-stripes {
position: absolute;
bottom: 0;
left: 0;
}
.home-promotion .machine {
position: absolute;
bottom: 0;
right: 0;
}
/* Заголовок промо */
.home-promotion .title {
font-size: 28px;
font-weight: 500;
line-height: 1.2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
min-height: calc(1.2em * 3);
}
/* Стикер акции */
.home-promotion .sticker {
background: linear-gradient(90.39deg, rgba(255, 255, 255, 0.8) -11.42%, rgba(255, 255, 255, 0) 106.86%);
border-radius: 200px;
width: 171px;
color: var(--active);
font-size: 18px;
font-weight: 500;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 10px;
gap: 4px;
}
.home-promotion .sticker img {
width: 26px;
height: 26px;
}
/* Цены */
.home-promotion .price {
font-size: 28px;
font-weight: 500;
line-height: 1.2;
}
.home-promotion .old-price {
color: #505050;
text-decoration: line-through;
}
/* =========================
HOME-ABOUT: Блок "О нас"
========================= */
.home-about {
margin: calc(var(--margin)*2) 0;
}
.home-about .button {
margin-top: var(--margin);
}
/* Сетка из 4 элементов */
.home-about .grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: var(--margin);
}
.home-about .grid .item {
padding: 25px;
background-color: var(--accent);
border-radius: 3px;
color: var(--second);
}
.home-about .grid .item .title {
font-size: 42px;
color: var(--active);
font-weight: 500;
line-height: 1;
margin-bottom: calc(var(--margin)/2);
}
.home-about .grid .item .text {
line-height: 1.4;
color: var(--second);
font-weight: 300;
}
/* Секция "О нас" с изображением и текстом */
.home-about .text-img-part {
gap: calc(var(--margin)/2);
}
.home-about .text-img-part .text-part {
max-width: 711px;
color: var(--second);
}
.home-about .text-img-part .img-part {
max-width: 50%;
}
/* END HOME */
/* =========================
CATS: Категории на главной и в каталоге
========================= */
/* Блок категорий на главной */
.home-cats {
margin-top: var(--margin);
margin-bottom: calc(var(--margin)*2);
}
/* Сетка из 3 колонок */
.home-cats .grid {
grid-template-columns: repeat(3, 1fr);
display: grid;
gap: calc(var(--margin)/2);
}
/* Элемент категории */
.home-cats .grid .item {
position: relative;
padding: var(--margin) calc(var(--margin)/2);
}
/* Активная категория — применяется при наведении или выборе */
.home-cats .grid .item.active {
color: var(--active);
}
/* Скрытие переднего фона и показ заднего */
.home-cats .grid .item.active .img.front {
display: none;
}
.home-cats .grid .item.active .img.back {
display: block;
}
/* Фронтовая (по умолчанию) картинка категории */
.home-cats .grid .item .img.front {
background: url(../images/cat.png) 100% 100% no-repeat;
background-size: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.86;
border: 1px solid var(--active-alt);
border-radius: var(--radius);
}
/* Задняя (альтернативная) картинка категории */
.home-cats .grid .item .img.back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
display: none;
border-radius: var(--radius);
}
/* Затемнение задней картинки */
.home-cats .grid .item .img.back:after {
position: absolute;
border-radius: var(--radius);
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
content: '';
background: #00000088;
}
/* Кнопка "перейти в категорию" */
.home-cats .button {
font-weight: 500;
width: max-content;
padding: 14px 18px;
margin-top: 35px;
position: relative;
z-index: 1;
transition: 250ms;
background-color: var(--active);
color: #fff;
gap: 10px;
}
.home-cats .button svg {
transition: 250ms;
width: 24px;
height: 24px;
}
/* Заголовок категории */
.home-cats .item .title {
position: relative;
font-size: 28px;
font-weight: 500;
margin-bottom: 24px;
gap: 10px;
}
.home-cats .item .title span {
color: var(--active);
}
/* Иконка категории */
.home-cats .item img {
height: 20px;
width: 20px;
}
/* Подкатегории и hover-анимация */
.home-cats .item .subcategories .block {
transition: 250ms;
}
.home-cats .item .subcategories {
position: relative;
gap: 20px;
z-index: 1;
align-items: start;
margin: 0;
}
.home-cats .item .subcategories p {
font-weight: 300;
font-size: 18px;
opacity: 0.5;
line-height: 1.4;
}
/* =========================
CATS: Общий блок категорий
========================= */
.cats {
margin-bottom: calc(var(--margin)*2);
}
.cats .grid {
display: grid;
gap: calc(var(--margin)/3);
grid-template-columns: repeat(4, 1fr);
}
/* Основная плитка категории */
.cats .grid .item {
background: var(--first);
border-radius: var(--radius);
padding: 0 10px;
position: relative;
overflow: hidden;
gap: 20px;
height: 100px;
color: var(--second);
}
/* Модификатор с ссылками */
.cats .grid .item.with-links {
padding: 10px;
}
.cats .item.with-links .links {
margin-top: 0;
gap: 20px;
}
.cats .item.with-links .links a {
opacity: 0.5;
color: var(--second);
transition: 250ms;
}
.cats .item.with-links .links a:hover {
opacity: 1;
color: var(--active);
}
/* Заголовки */
.cats .item.with-links .title {
width: 100%;
}
.cats .item.with-links svg {
height: 24px;
width: 24px;
}
.cats .item .title {
position: relative;
width: calc(100% - 120px);
display: block;
line-height: 1.3;
color: var(--second);
}
.cats .item .title span {
color: var(--active);
}
/* Картинки */
.cats .item img {
width: 100px;
object-fit: contain;
filter: brightness(1.2);
}
/* Отдельный стиль для каталога */
.catalog.main .cats .grid {
grid-template-columns: repeat(5, 1fr);
}
.catalog.main .cats .item img {
width: 30px;
object-fit: contain;
}
/* Подкатегории */
.cats .item .subcategories {
position: relative;
gap: 10px;
z-index: 1;
}
.cats .item .subcategories .block {
transition: 250ms;
padding: 8px 18px;
border-radius: 200px;
border: 1px solid rgba(255, 255, 255, 0.2);
color: var(--second);
}
.cats .item .subcategories p {
font-weight: 300;
font-size: 18px;
color: var(--second);
line-height: 1.4;
}
/* =========================
SALE-CATS: Категории с акциями
========================= */
.sale-cats {
margin-bottom: calc(var(--margin)*2);
display: grid;
gap: calc(var(--margin)/3);
grid-template-columns: repeat(5, 1fr);
}
.sale-cats .item {
background: var(--first);
border: 2px solid var(--active);
border-radius: var(--radius);
padding: 0 10px;
position: relative;
overflow: hidden;
height: 60px;
color: var(--second);
}
.sale-cats .item .title {
position: relative;
width: calc(100% - 120px);
display: block;
line-height: 1.3;
}
.sale-cats .item .title span {
color: var(--active);
}
/* Hover или активное состояние: зелёный фон и белый текст */
.sale-cats .item:hover,
.sale-cats .item.active {
background: var(--active-alt);
color: #fff;
}
/* END CATS */
/* =========================
CATALOG-SLIDER: Обёртка для слайдера в каталоге
========================= */
/* Относительное позиционирование — позволяет позиционировать вложенные элементы,
например, стрелки навигации или декоративные элементы */
.catalog-slider {
position: relative;
}
/* END CATALOG-SLIDER */
/* =========================
HOME-BRANDS: Отступ сверху для секции брендов на главной
========================= */
/* Секция брендов на главной странице: отступ сверху */
.home-brands {
margin-top: calc(var(--margin)*2);
}
/* END HOME-BRANDS */
/* =========================
NEWS: Блок новостей на главной
========================= */
/* Секция новостей на главной странице — отступ сверху */
.home-news {
margin-top: calc(var(--margin)*2);
}
/* Сетка карточек новостей:
- 3 колонки
- промежутки между карточками
- нижний отступ от блока
*/
.news .grid {
grid-template-columns: repeat(3, 1fr);
display: grid;
gap: calc(var(--margin)/3);
margin-bottom: calc(var(--margin)/2);
}
/* Отдельная новостная карточка */
.news .item {
background: var(--accent);
border-radius: var(--radius);
overflow: hidden;
}
/* Блок изображения */
.news .item .img-part {
position: relative;
}
/* Декоративный SVG-оверлей поверх изображения (например, уголок или градиент) */
.news .item .img-part:after {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
content: '';
z-index: 1;
pointer-events: none;
background: url(../images/article.svg) 100% 0% no-repeat;
background-size: contain;
}
/* SVG-логотип/значок поверх изображения */
.news .item .img-part svg {
margin-top: 25px;
margin-left: 25px;
max-width: 150px;
position: absolute;
z-index: 1;
}
/* Контейнер текста новости */
.news .item .text-block {
padding: 35px;
}
/* Картинка внутри карточки:
- адаптивная
- сохраняет соотношение сторон 16:9
*/
.news .item img {
object-fit: cover;
aspect-ratio: 16/9;
width: 100%;
}
/* Дата публикации */
.news .item .date {
font-weight: 300;
color: #999999;
}
/* Заголовок новости:
- обрезка до 2 строк
- выравнивание по высоте через min-height
*/
.news .item .text-block .title {
margin-top: 15px;
margin-bottom: 15px;
font-size: 24px;
font-weight: 500;
line-height: 1.2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
min-height: calc(1.2em * 2);
}
/* Краткое описание новости:
- обрезка до 3 строк
- приглушенный цвет
*/
.news .item .text-block .text {
color: #999999;
margin-bottom: 25px;
font-weight: 300;
line-height: 1.4;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
min-height: calc(1.4em * 3);
}
/* END NEWS */
/* =========================
SEARCH: Поисковая строка и быстрые результаты
========================= */
/* Кнопка открытия меню рядом с поиском (на десктопе):
- абсолютное позиционирование в левом верхнем углу блока
- закругление левого края
- фиксированная ширина и высота
*/
.menu-button {
position: absolute;
top: 0;
left: 0;
height: 46px;
width: 150px;
border-radius: var(--radius) 0 0 var(--radius);
}
/* Обертка для блока поиска */
.search-block {
position: relative;
flex: 1;
}
/* Само поле поиска:
- отступ слева увеличен (учитывает кнопку меню)
- небольшой отступ слева от внешней рамки
*/
.search-block input[type=search] {
padding: 0px 20px 0 160px;
margin-left: 10px;
background-color: var(--accent);
}
/* Кнопка отправки поиска (лупа):
- абсолютное позиционирование в поле
- прозрачный фон, без рамки
*/
.search-block button {
background-color: transparent;
position: absolute;
top: 3px;
right: 5px;
border: none;
padding: 10px;
width: 40px;
height: 40px;
}
/* Анимация иконки поиска */
.search-block button svg,
.mobile-search button svg {
transition: 250ms;
}
/* Кнопка поиска для мобильной версии */
.mobile-search button {
background-color: transparent;
position: absolute;
top: 2px;
right: 5px;
border: none;
padding: 10px;
width: 40px;
height: 40px;
}
/* Контейнер мобильного поиска */
.mobile-search {
position: relative;
margin-top: var(--margin);
margin-bottom: var(--margin);
}
/* Поле ввода на мобильной версии */
.mobile-search input[type=search] {
padding: 0px 20px;
background-color: var(--accent);
}
/* Выпадающий блок быстрых результатов поиска:
- абсолютно позиционируется под поиском
- максимальная высота и скролл
- скрыт по умолчанию
- визуально стилизован под блок с результатами
*/
.wraper-fast-result {
padding: var(--margin);
border-radius: var(--radius);
max-height: 500px;
overflow-y: auto;
background: var(--accent);
margin-top: 3px;
display: none;
position: absolute;
width: 100%;
top: 100%;
left: 0;
z-index: 10;
}
/* Отступ между результатами */
.fast-result-list li + li {
margin-top: 20px;
}
/* Выделение совпадений в результатах */
.wraper-fast-result a .fast-result-info b {
background: var(--active) !important;
color: #fff;
}
/* Отключение показа миниатюры товара */
.wraper-fast-result a .fast-result-img {
display: none;
}
/* Контейнер информации по результату:
- одна строка
- обрезка текста по ширине
*/
.wraper-fast-result a .fast-result-info {
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
/* Дополнительная информация (например, категория) — скрыта */
.wraper-fast-result a .fast-result-info span {
font-weight: 500;
display: none;
}
/* END SEARCH */
/* =========================
BREAD-CRUMBS: Хлебные крошки
========================= */
/* Основной контейнер хлебных крошек:
- нижний отступ от блока
- флекс-контейнер с переносом строк при нехватке ширины
- базовый размер шрифта — 14px
- вертикальное выравнивание по центру
- промежуток между элементами — 10px
*/
.bread-crumbs {
margin-bottom: var(--margin);
flex-wrap: wrap;
display: flex;
font-size: 14px;
align-items: center;
gap: 10px;
}
/* Ссылки и разделители:
- полупрозрачные по умолчанию
*/
.bread-crumbs a,
.bread-crumbs .separator {
opacity: 0.5;
}
/* Размер иконки-разделителя (обычно стрелка) */
.bread-crumbs .separator svg {
width: 8px;
height: auto;
}
/* Последний пункт в цепочке:
- основной акцентный цвет (var(--active))
- полная непрозрачность
*/
.bread-crumbs li:last-child a {
color: var(--active-alt);
opacity: 1;
}
/* END BREAD-CRUMBS */
/* =========================
FORM: Стилизация форм и сетки полей ввода
========================= */
/* Список полей формы, организованный в виде CSS Grid:
- 3 колонки по умолчанию
- расстояние между ячейками — 20px
*/
.form-list.grid {
gap: 20px;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
/* Отдельное поле формы:
- относительное позиционирование (для размещения вспомогательных элементов)
- нижний отступ
- отображается как блочный элемент
*/
.form-list li {
position: relative;
margin-bottom: 17px;
display: block;
background-color: var(--accent);
}
/* Поле, занимающее всю ширину (все 3 колонки) */
.form-list li.wide {
grid-column: span 3;
}
/* END FORM */
/* =========================
CONTENT: Стилизация основного текстового контента (тексты, таблицы, списки)
========================= */
/* Основной текстовый блок:
- увеличенный межстрочный интервал
*/
.content {
line-height: 1.7;
}
/* Заголовки внутри контента:
- отступ сверху
- акцентный цвет
*/
.content h2,
.content h3 {
margin-top: var(--margin);
color: var(--active);
}
/* Убираем верхний отступ у первого заголовка */
.content h2:first-child,
.content td h2:first-child,
.content h3:first-child {
margin-top: 0;
}
/* Таблицы без границ */
.content table {
border: none;
}
/* Стандартные таблицы (не .two-col):
- ячейки с рамками
- паддинги
- выравнивание по левому краю
*/
.content table:not(.two-col) td,
.content table:not(.two-col) th {
border: 1px solid #ccc;
padding: 10px;
text-align: left;
}
/* Чередование фона строк в таблицах */
.content table:not(.two-col) tr:nth-of-type(even) td {
background: var(--accent);
}
/* Двухколоночные таблицы (обычно изображения + текст):
- строки с отступами между ними
- строки как flex-контейнеры
- ячейки по 50% ширины с отступом
*/
.content table.two-col tr + tr {
margin-top: 40px;
}
.content table.two-col tr {
display: flex;
justify-content: space-between;
align-items: center;
}
.content table.two-col td {
border: none;
width: calc(50% - 20px);
}
/* Медиа в двухколоночных таблицах:
- масштабирование
- обрезка
*/
.content table.two-col td img,
.content table.two-col td video {
width: 100% !important;
height: 100% !important;
object-fit: cover;
}
/* Изображения и iframe в тексте:
- адаптивные по ширине
- скругленные углы
*/
.content img,
.content iframe {
border: none;
width: 100% !important;
border-radius: var(--radius);
}
/* Сохраняем пропорции iframe (например, YouTube) */
.content iframe {
aspect-ratio: 16/9;
height: auto;
}
/* Унифицированные отступы для элементов внутри текста */
.content p,
.content blockquote,
.content ul,
.content ol,
.content img {
margin-top: 1em;
}
/* Ссылки внутри текста и списков: акцентный цвет */
.content p a,
.content li a {
color: var(--active);
}
/* Сброс нумерации и стилизация упорядоченного списка */
.content ol {
counter-reset: list1;
list-style-type: none;
}
/* Стилизация маркеров для ul и ol (кроме списков форм) */
.content ul:not(.form-list) li,
.content ol li {
position: relative;
padding-left: 20px;
}
/* Кастомный маркер списка (ul) */
.content ul:not(.form-list) li:before {
position: absolute;
content: '';
width: 4px;
height: 4px;
background: var(--active);
left: 0;
top: 0.7em;
}
/* Нумерация пунктов в ol */
.content ol li:before {
counter-increment: list1;
content: counter(list1) ". ";
position: absolute;
left: 0px;
text-align: right;
}
/* Цитаты внутри контента:
- отступ слева
- вертикальная полоса
- курсив
*/
.content blockquote {
padding-left: 56px;
border-left: 4px solid var(--active);
font-style: italic;
}
/* Подчеркивание всех ссылок кроме кнопок */
.content a:not(.button) {
text-decoration: underline;
}
/* MathJax (формулы в тексте):
- увеличенный размер
- дополнительный отступ
- базовый цвет
*/
.content .MathJax {
font-size: 1.5rem !important;
color: var(--active-alt);
margin: var(--margin) 0 !important;
}
/* Усиление жирности символов в формулах */
.content .MathJax * {
font-weight: 600;
}
/* END CONTENT */
/* =========================
STATIC: Статичные страницы (например, О компании, Контакты и т.п.)
========================= */
/* Левая колонка страницы:
- фиксированная ширина для меню
*/
.static .left-part {
width: 220px;
}
/* Обёртка меню в левой колонке:
- паддинги
- светлый фон
- скругление
*/
.static .left-part .left-menu {
padding: calc(var(--margin)/2) calc(var(--margin)/4);
background: var(--accent);
border-radius: var(--radius);
}
/* Прилипание меню при прокрутке */
.static .left-part .sticky {
position: sticky;
position: -webkit-sticky;
top: 120px;
}
/* Правая часть страницы (контент):
- ширина рассчитывается с учетом отступов и ширины левого меню
*/
.static .right-part {
width: calc(100% - 220px - 40px);
}
/* Форма в правом блоке:
- максимальная ширина
- адаптивная по ширине
*/
.static form {
max-width: 460px;
width: 100%;
}
/* Иконка в левом меню:
- выравнивание по вертикали
- небольшое смещение вправо
- размер 12px
*/
.static .left-menu svg {
display: inline-block;
vertical-align: middle;
margin-left: 4px;
width: 12px;
}
/* Ссылка в меню:
- блочная
- с внутренними отступами
- со скруглением
*/
.static .left-menu a {
padding: 10px 20px;
display: block;
border-radius: var(--radius);
}
/* Скрывем svg в общем случае (переопределяется локально при необходимости) */
.static .left-menu svg {
display: none;
}
/* Hover по элементу меню */
.static .left-menu li:hover > a {
color: var(--active);
}
/* Активный пункт меню:
- фон и цвет текста меняются на акцентные
*/
.static .left-menu li.active > a {
background: var(--active);
color: #fff;
}
/* Подменю второго уровня и вспомогательное меню:
- всегда отображаются
- уменьшенный шрифт
*/
.static .left-menu .level-2,
.static .left-part .sub_menu {
display: block !important;
font-size: 13px;
}
/* Ссылки подменю — смещаются вправо */
.static .left-menu .level-2 a {
padding-left: 20px;
}
/* Изображение руководителя (CEO):
- обтекание справа
- максимальная ширина
- отступ слева
- скругление (круг)
- рамка в акцентном цвете
*/
.ceo-image {
float: right;
max-width: 600px;
margin: 0 0 10px 20px;
border-radius: 50%;
border: 1px solid var(--active);
}
/* END STATIC */
/* =========================
FILTER: Блок фильтрации товаров
========================= */
/* Линия применения фильтра:
- нижний отступ
- выравнивание по центру
*/
.apply-filter-line {
margin-bottom: 40px;
text-align: center;
}
/* Кнопка удаления отдельного фильтра:
- квадратная область
- используется псевдоэлементами для рисования крестика
*/
.apply-filter-line .removeFilter {
width: 20px;
height: 20px;
position: relative;
}
/* Линии крестика (горизонтальная и вертикальная перекрещиваются под углом) */
.apply-filter-line .removeFilter:before,
.apply-filter-line .removeFilter:after {
width: 1px;
height: 20px;
top: 0;
left: 10px;
content: '';
position: absolute;
background: #fff;
transform-origin: 50% 50%;
}
.apply-filter-line .removeFilter:before {
transform: rotateZ(-45deg);
}
.apply-filter-line .removeFilter:after {
transform: rotateZ(45deg);
}
/* Заголовок блока активных фильтров */
.apply-filter-line .apply-filter-title {
font-size: 17px;
font-weight: 500;
margin-bottom: 30px;
}
/* Сетка тегов и значений фильтров */
.apply-filter-line .filter-tags {
gap: 20px;
}
.apply-filter-line .filter-values {
gap: 10px;
}
/* Элемент активного значения фильтра и диапазона цен:
- зелёный фон
- белый текст
- компактные отступы
- скругления
*/
.apply-filter-line .apply-filter-item-value,
.apply-filter-line .filter-price-range {
background: var(--active);
color: #fff;
padding: 0 10px;
border-radius: var(--radius);
font-size: 13px;
gap: 10px;
height: 30px;
}
/* Название свойства фильтра (например: "Цена", "Бренд") */
.apply-filter-line .filter-property-name {
display: block;
margin-bottom: 10px;
font-size: 12px;
text-align: left;
}
/* Сброс фильтра (например, "Очистить всё") */
.apply-filter-line .refreshFilter {
color: #888;
align-self: end;
font-size: 13px;
height: 30px;
line-height: 30px;
}
/* =========================
FILTER-FORM: Общая стилизация фильтров в боковой панели
========================= */
/* Блок с ползунком цены */
.price-slider-list {
gap: 20px;
}
/* Отступы между заголовками и содержимым фильтров */
.mg-filter-head,
.mg-filter-body {
margin-bottom: calc(var(--margin)/2);
}
/* Элементы фильтра (отдельные блоки) */
.mg-filter-item,
.wrapper-field {
margin-bottom: var(--margin);
}
/* Заголовок фильтра (например, "Производитель") */
.mg-filter-title {
margin-bottom: calc(var(--margin)/4);
display: block;
font-weight: 500;
}
/* Элементы списка внутри фильтра */
.mg-filter-item li {
margin-top: 5px;
}
/* Ссылки "Показать все фильтры" или "Свернуть" */
.mg-viewfilter-all,
.mg-viewfilter {
text-decoration: underline;
color: var(--active);
font-weight: 400;
font-size: 12px;
}
/* Сброс фильтра через ссылку */
.refreshFilter {
font-weight: 400;
margin-left: calc(var(--margin)/2);
display: block;
cursor: pointer;
}
/* Неактивные (задизейбленные) опции фильтра */
.mg-filter .disabled-prop {
opacity: 0.1;
}
/* Всплывающая подсказка с выбранным фильтром:
- появляется при наведении
- зелёный фон
- белый текст
- скругление
*/
.filter-preview {
position: absolute;
background: #008A43;
white-space: nowrap;
color: #fff;
padding: 10px;
z-index: 10;
margin-top: -7px;
display: none;
border-radius: 3px;
border-color: var(--active);
}
/* Ссылки внутри подсказки */
.filter-preview a {
text-decoration: underline;
font-weight: 500;
color: #fff;
}
/* Ссылка внизу формы фильтра (например, "Сбросить всё") */
.filter-form .link {
margin-top: calc(var(--margin)/4);
display: block;
}
/* END FILTER */
/* =========================
CATALOG: Верхняя и нижняя части описания
========================= */
/* Верхнее описание каталога */
.top-description {
margin-bottom: var(--margin);
}
/* Флекс-версия описания: заголовок + другие элементы */
.top-description.flex {
align-items: end;
gap: 24px;
}
.top-description h1 {
font-size: 58px;
font-weight: 500;
line-height: 1;
margin-bottom: calc(var(--margin)/2);
}
/* Нижняя часть описания */
.bottom-description {
margin-top: var(--margin);
}
/* =========================
CATALOG: Блоки сортировки и фильтров
========================= */
.actions-block {
gap: calc(var(--margin)/2);
/* margin-bottom: var(--margin); */
}
.actions-block .fast-sort {
width: auto;
background-color: transparent;
}
/* Левый и правый блоки: фиксированные пропорции */
.catalog .left-part {
width: 320px;
}
.catalog .right-part {
width: calc(100% - 320px - 40px);
}
/* Убираем прелоадер у изображений Swiper */
.catalog .product-wrapper .swiper-lazy-preloader {
display: none;
}
/* Сетка товаров (3 колонки) */
.catalog .grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
row-gap: calc(var(--margin)/3);
column-gap: calc(var(--margin)/3);
}
/* Сетка для слайдера каталога (4 колонки) */
.catalog-slider .grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
row-gap: calc(var(--margin)/3);
column-gap: calc(var(--margin)/3);
}
/* =========================
CATALOG: Карточка товара
========================= */
.product-wrapper {
padding: calc(var(--margin)/2);
transition: 250ms;
border-radius: var(--radius);
border: 1px solid #f2f2f2;
}
/* Верхняя часть карточки: изображение + стикеры */
.product-wrapper .top-part {
position: relative;
border-radius: var(--radius) var(--radius) 0 0;
}
.product-wrapper .top-part img {
width: 100%;
object-fit: contain;
aspect-ratio: 4/3;
}
/* Стикеры: скидка, хит, новинка */
.product-wrapper .stickers {
position: absolute;
left: 0;
top: 0;
z-index: 1;
pointer-events: none;
padding: 0;
gap: 5px;
font-size: 14px;
}
.product-wrapper .sticker {
padding: 5px 10px;
border-radius: 4px;
gap: 4px;
width: max-content;
font-weight: 400;
}
.product-wrapper .sticker svg {
width: 16px;
height: 16px;
}
.product-wrapper .sticker.sale {
background: #FF5200;
color: #fff;
}
.product-wrapper .sticker.hit {
background: #03cdd0;
color: #fff;
}
.product-wrapper .sticker.new {
background: var(--active);
color: #fff;
}
/* Нижняя часть карточки */
.product-wrapper .bottom-part {
border-radius: 0 0 var(--radius) var(--radius);
flex: 1;
}
/* Название товара: обрезка до 3 строк */
.product-wrapper .bottom-part .title {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
margin-bottom: 14px;
font-size: 22px;
line-height: 1.4;
font-weight: 500;
height: calc(1.4em * 3);
}
/* Старая цена перечеркнута */
.product-wrapper .old-price {
text-decoration: line-through;
color: #FF5200;
font-size: 14px;
}
/* Кнопка "в корзину" */
.product-wrapper .bottom-part .addToCart {
background: var(--active);
padding: 15px;
width: 50px;
height: 50px;
border-radius: var(--radius);
}
/* Кнопка "подробнее" */
.product-wrapper .more-btn {
font-weight: 500;
transition: 250ms;
background-color: #f2f2f2;
border-radius: 3px;
cursor: pointer;
flex: 1;
}
.product-wrapper .more-btn svg {
width: 24px;
height: 24px;
color: #008A43;
transition: all 0.3s ease;
}
/* Кнопка "сравнить" */
.product-wrapper .addToCompare {
border-radius: 3px;
width: 60px;
height: 52px;
background-color: #f2f2f2;
cursor: pointer;
padding: 15px;
}
/* Блок с кнопками внизу карточки */
.product-wrapper .btn-block {
margin-bottom: 15px;
margin-top: 40px;
gap: 4px;
}
/* Расчет стоимости (подчёркнутая строка) */
.product-wrapper .calculation-block {
gap: 10px;
width: max-content;
padding-bottom: 4px;
border-bottom: 1px dashed #008A43;
cursor: pointer;
}
.product-wrapper .calculation-block svg {
width: 18px;
height: 18px;
color: #008A43;
}
/* Блок с ценой */
.product-wrapper .price-block {
margin-top: auto;
font-size: 18px;
color: var(--active);
gap: calc(var(--margin)/2);
}
.product-wrapper .price-block span {
margin: 0;
}
/* Характеристики */
.feature {
flex-direction: column;
gap: 10px;
}
.feature span {
color: #505050;
}
.feature p {
color: #202020;
}
/* =========================
CATALOG: Сортировка и фильтры
========================= */
.catalog .show-filter {
transition: 250ms;
cursor: pointer;
gap: 5px;
}
.catalog .products-sort__block {
margin-bottom: 30px;
}
.catalog .products-sort__block .left-part {
width: max-content;
}
.catalog .products-sort__block .right-part {
gap: 14px;
width: max-content;
}
.catalog .products-sort__block .right-part span {
color: #737373;
}
.catalog .products-sort__block .right-part .quantities {
gap: 6px;
}
.catalog .products-sort__block .right-part .quantity {
transition: 250ms;
cursor: pointer;
color: #505050;
width: 74px;
height: 41px;
border-radius: 200px;
border: 1px solid #CCCCCC;
}
.catalog .products-sort__block .right-part .quantity.active {
color: #202020;
border-color: var(--active);
}
/* =========================
CATALOG: Секции брендов и коллекций
========================= */
.catalog .brand-country__section,
.catalog .collections__section {
margin-top: calc(var(--margin)*2);
margin-bottom: calc(var(--margin)*2);
}
.catalog .brand-country__section .brands {
gap: 10px;
text-transform: uppercase;
margin-bottom: 30px;
}
.catalog .brand-country__section .countries,
.catalog .collections__section .collections {
gap: 10px;
}
.catalog .brand-country__section .item,
.catalog .collections__section .item {
transition: 250ms;
padding: 8px 18px;
border-radius: 200px;
border: 1px solid #CCCCCC;
}
.catalog .brand-country__section .item.active,
.catalog .collections__section .item.active {
border-color: var(--active);
}
/* =========================
REVIEWS: Отзывы покупателей
========================= */
.reviews__section {
margin-top: calc(var(--margin)*2);
margin-bottom: calc(var(--margin)*2);
}
.reviews-slider .logo {
width: 56px;
height: 56px;
font-size: 36px;
line-height: 1.2;
text-align: center;
background-color: #80D2A7;
color: #fff;
border-radius: 50%;
}
.reviews-slider .title {
font-size: 22px;
font-weight: 500;
gap: 14px;
}
.reviews-slider .swiper-slide .inner {
transition: 250ms;
line-height: 1.4;
padding: 34px;
border: 1px solid #CCCCCC;
border-radius: 3px;
gap: 14px;
}
/* Название станка в отзыве */
.reviews-slider .machine-name {
font-size: 18px;
height: calc(1.4em * 3);
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.reviews-slider .machine-name span {
color: var(--active);
font-weight: 500;
}
/* Текст отзыва */
.reviews-slider .text {
height: calc(1.4em * 6);
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
}
.reviews-slider .text,
.reviews-slider .date {
color: #505050;
}
/* Ссылка "Читать полностью" */
.reviews-slider .more {
color: #202020;
transition: 250ms;
width: max-content;
font-weight: 500;
padding-bottom: 4px;
border-bottom: 1px dashed var(--active);
}
/* Кнопки навигации Swiper */
.swiper-button-next:after,
.swiper-button-prev:after {
display: none;
}
.swiper-button-prev svg {
transform: rotate(180deg);
}
.swiper .swiper-button-prev,
.swiper .swiper-button-next {
transition: 250ms;
border-radius: 3px;
background-color: #f2f2f2;
width: 60px;
height: 60px;
}
.swiper .swiper-button-prev svg,
.swiper .swiper-button-next svg {
transition: 250ms;
width: 24px;
height: 42px;
color: #202020;
}
.swiper .swiper-button-disabled svg {
color: #737373;
}
.reviews-slider.swiper {
overflow: initial;
}
.swiper .swiper-button-prev {
left: -30px;
}
.swiper .swiper-button-next {
right: -30px;
}
/* =========================
COMPANY-DESCRIPTION
========================= */
.company-description__section {
line-height: 1.4;
margin-top: calc(var(--margin)*2);
margin-bottom: calc(var(--margin)*2);
}
.company-description__section .h3-like {
line-height: 1.2;
margin-bottom: 0;
}
.company-description__section .sub-title {
margin-top: 14px;
margin-bottom: 14px;
font-size: 22px;
font-weight: 500;
}
.company-description__section .text {
margin-bottom: 24px;
font-size: 18px;
color: #505050;
}
.company-description__section .expand-btn {
transition: 250ms;
width: max-content;
font-weight: 500;
padding-bottom: 4px;
border-bottom: 1px dashed var(--active);
}
/* END CATALOG */
/* SUBSCRIBE NEWSLETTER — секция подписки на новости */
.subscribe-newsletter__section {
background-color: #202020; /* Тёмный фон всей секции */
padding: 11px 0; /* Вертикальные отступы сверху и снизу */
}
/* Центральная иконка/логотип (обычно между левой и правой частью) */
.subscribe-newsletter__section .center-part {
max-width: 110px;
max-height: 110px;
}
/* Левая часть секции (текстовый блок) */
.subscribe-newsletter__section .left-part {
width: max-content; /* Ширина по содержимому */
gap: 50px; /* Отступы между элементами внутри (если flex) */
}
/* Заголовок в левой части */
.subscribe-newsletter__section .left-part .title {
font-size: 22px;
font-weight: 500;
line-height: 1.4;
color: #fff; /* Белый текст */
}
/* Подзаголовок / описание в левой части */
.subscribe-newsletter__section .left-part .text {
color: #505050; /* Серый текст */
}
/* Правая часть секции (форма подписки) */
.subscribe-newsletter__section .right-part {
width: max-content; /* Ширина по содержимому */
}
/* Контейнер формы — горизонтальный flex с отступом между полем и кнопкой */
.subscribe-newsletter__section .right-part form {
gap: 4px;
}
/* Стилизация поля ввода и кнопки отправки */
.subscribe-newsletter__section .right-part form button,
.subscribe-newsletter__section .right-part form input {
border: none;
height: 52px; /* Общая высота */
border-radius: 3px;
width: max-content; /* Ширина под содержимое */
}
/* SVG-иконка внутри кнопки */
.subscribe-newsletter__section .right-part form button svg {
transition: 250ms;
flex-shrink: 0;
width: 24px;
height: 24px;
color: #fff; /* Белая иконка */
}
/* Стили самой кнопки отправки */
.subscribe-newsletter__section .right-part form button {
padding: 14px 34px;
transition: all .3s ease;
gap: 10px; /* Отступ между текстом и иконкой */
color: #fff;
background-color: var(--active); /* Основной акцентный цвет */
}
/* Цвет плейсхолдера в поле ввода */
.subscribe-newsletter__section .right-part form input::placeholder {
opacity: 1;
color: #202020; /* Тёмный текст плейсхолдера на светлом фоне */
}
/* SUBSCRIBE NEWSLETTER END */
/* CATALOG PAGE END */
/* PAGINATION — стилизация блока пагинации */
/* Отступ сверху у блока пагинации */
.mg-pager {
margin-top: var(--margin);
}
/* Скрытие полной нумерации страниц, если используется "Показать еще" */
.mg-pager .allPages {
display: none;
}
/* Кнопка "Показать еще" */
.mg-pager .show-more__btn {
cursor: pointer; /* Курсор — указатель */
transition: 250ms; /* Плавный ховер */
gap: 10px; /* Расстояние между элементами внутри (если flex) */
margin-top: calc(var(--margin)/2); /* Отступ сверху */
margin-bottom: 24px; /* Отступ снизу */
height: 59px;
border: 1px solid #CCCCCC;
border-radius: 3px;
width: 100%; /* На всю ширину контейнера */
padding-top: 18px;
padding-bottom: 18px;
font-size: 18px;
font-weight: 500;
}
/* Унифицированный стиль для ссылок и кнопок пагинации */
.mg-pager a,
.mg-pager button {
width: 40px;
height: 40px;
border: none;
border-radius: var(--radius); /* Скругление по переменной */
display: flex;
align-items: center;
justify-content: center;
}
/* Активная страница (выделяется фоном) */
.mg-pager button.active {
background: var(--first); /* Цвет из переменных (обычно #f2f2f2) */
}
/* Контейнер списка страниц */
.mg-pager ul {
gap: 2px;
display: flex;
justify-content: center;
}
/* Стили SVG-иконок стрелок */
.mg-pager svg {
width: 20px;
height: 20px;
}
/* Отражение иконки "Назад" (стрелка влево) */
.mg-pager .prev {
transform: rotate(180deg);
}
/* Активная стрелка (например, если кнопка доступна) */
.mg-pager svg.active {
color: var(--active); /* Акцентный цвет (обычно зелёный) */
}
/* Плавность наведения на стрелки */
.mg-pager .arrow-next,
.mg-pager .arrow-prev {
transition: 250ms;
}
/* PAGINATION END */
/* SWIPER — кастомизация элементов слайдера Swiper */
/* Стилизация прелоадера для lazy-загрузки изображений внутри слайдера */
body .swiper-lazy-preloader {
width: var(--margin); /* Ширина = глобальной переменной отступа (например, 60px) */
height: var(--margin); /* Высота аналогично */
border: 1px solid var(--active); /* Граница по цвету акцента (например, зелёный) */
transform: translateX(-50%) translateY(-50%); /* Центрирует прелоадер относительно центра */
border-top-color: transparent; /* Прозрачный верхний сегмент — создаёт эффект вращения при анимации */
margin: 0; /* Убирает внешние отступы */
}
/* Стили точек пагинации (bullets) — по умолчанию полупрозрачные */
body .swiper-pagination-bullet {
opacity: 0.3;
}
/* Активная точка — полностью видимая и акцентного цвета */
body .swiper-pagination-bullet-active {
opacity: 1;
background: var(--active); /* Акцентный цвет, например, зелёный */
}
/* SWIPER END */
/* ALERT — стили для информационного баннера / всплывающего уведомления */
.alert {
background: #FF5200; /* Ярко-оранжевый фон (цвет предупреждения, ошибки, срочности) */
border-radius: var(--radius); /* Скругление углов — по глобальной переменной (обычно 5px) */
color: #fff; /* Белый текст для контраста */
text-align: center; /* Центровка текста по горизонтали */
padding: 10px 20px; /* Вертикальные и горизонтальные отступы внутри */
}
/* ALERT END */
/* ============================
🛍️ PRODUCT PAGE STYLES
============================ */
/* 🔹 Заголовок товара */
.product-details-block h1 {
margin-bottom: 0;
font-size: 32px;
}
/* 🔹 Левая часть (галерея товара) */
.product-details-block .left-part {
width: 36%;
}
/* 📌 Фиксированная позиция блоков */
.product-details-block .sticky,
.product-details-block .right-part .sticky {
position: sticky;
position: -webkit-sticky;
top: 120px;
}
/* 🔹 Контейнер с миниатюрами галереи */
.product-thumbs-slider__wrapper {
width: 100%;
position: relative;
margin-top: 15px;
}
.product-thumbs-slider {
width: 100%;
margin: 0;
}
.product-details-block .product-thumbs-slider .swiper {
margin: 0;
}
.product-details-block .product-thumbs-slider img {
object-fit: contain;
aspect-ratio: 4/3;
width: 100%;
}
.product-details-block .product-thumbs-slider .swiper-slide {
cursor: pointer;
transition: 250ms;
border-radius: var(--radius);
overflow: hidden;
}
/* 🔸 Видеоминитюра */
.product-details-block .product-thumbs-slider .swiper-slide.video {
position: relative;
}
.product-details-block .product-thumbs-slider .swiper-slide.video .play {
background-color: #f2f2f2;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 32px;
height: 32px;
background-image: url(images/svg/play.svg);
}
.product-details-block .product-thumbs-slider .swiper-slide.video .play svg {
transition: 250ms;
width: 13px;
height: 21px;
color: #737373;
margin-right: -2px;
}
/* 🔸 Активный слайд с пониженной прозрачностью */
.product-details-block .product-thumbs-slider .swiper-slide-thumb-active {
opacity: 0.5;
}
/* 🔹 Стрелки миниатюрной галереи */
.product-thumbs-slider__wrapper .swiper-button-prev svg,
.product-thumbs-slider__wrapper .swiper-button-next svg {
transition: 250ms;
width: 20px;
height: 20px;
color: #737373;
}
.product-thumbs-slider__wrapper .swiper-button-next svg {
transform: rotate(180deg);
}
/* 🔹 Основной слайдер товара */
.product-details-block .product-slider {
border-radius: var(--radius);
overflow: hidden;
border: 1px solid #CCCCCC;
}
.product-slider .swiper-slide {
padding: 35px;
height: unset;
}
.product-slider .swiper-slide a {
display: block;
}
.product-slider .swiper-slide a,
.product-slider .swiper-slide picture,
.product-slider .swiper-slide img {
height: 100%;
}
.product-details-block .product-slider img {
width: 100%;
aspect-ratio: 4/3;
object-fit: contain;
}
/* 🔹 Правая часть с описанием и действиями */
.product-details-block .right-part {
width: calc(100% - 58% - 100px);
}
/* 🔹 Страна-производитель */
.product-details-block .right-part .country-logo-part {
gap: 10px;
}
.product-details-block .right-part .country-logo-part .country {
padding: 8px 18px;
border: 1px solid #CCCCCC;
border-radius: 200px;
line-height: 1.4;
color: #505050;
}
.product-details-block .right-part .country-logo-part img {
width: 80px;
}
/* 🔹 Поделиться товаром */
.product-details-block .right-part .share {
cursor: pointer;
transition: 250ms;
color: #737373;
gap: 14px;
}
.product-details-block .right-part .share svg {
transition: 250ms;
flex-shrink: 0;
color: #737373;
width: 24px;
height: 24px;
}
/* 🔹 Сопутствующие модели в серии */
.product-details-block .right-part .series-models .flex {
gap: 4px;
margin-top: 14px;
}
.product-details-block .right-part .series-models a {
transition: 250ms;
line-height: 1.4;
display: block;
padding: 4px 10px;
border-radius: 3px;
border: 1px solid #CCCCCC;
color: #505050;
}
.product-details-block .right-part .series-models a.active {
color: #fff;
background-color: var(--active);
border-color: var(--active);
}
/* 🔹 Преимущества товара */
.product-details-block .right-part .advantage .svg-block {
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 50%;
background-color: #f2f2f2;
}
.product-details-block .right-part .advantage .svg-block svg {
width: 12px;
height: 14px;
color: var(--active);
}
.product-details-block .right-part .advantage li {
gap: 10px;
}
.product-details-block .right-part .advantage ul {
gap: 24px;
}
/* 🔹 Ссылка на подробности */
.product-details-block .right-part .link {
margin-top: calc(var(--margin)/2);
display: block;
}
/* 🔸 Стикеры (скидка, новинка, хит) */
.product-details-block .stickers {
align-items: start;
left: 20px;
top: 20px;
position: absolute;
z-index: 10;
gap: 10px;
pointer-events: none;
padding: 0;
}
.product-details-block .stickers div {
padding: 5px 10px;
border-radius: var(--radius);
}
.product-details-block .stickers .sale {
background: #FF5200;
color: #fff;
}
.product-details-block .stickers .hit {
background: #03cdd0;
color: #fff;
}
.product-details-block .stickers .new {
background: var(--active);
color: #fff;
}
/* 🔸 Видео в галерее */
.product-details-block .amount-video {
width: 100%;
font-size: 18px;
font-weight: 500;
color: #737373;
gap: 15px;
padding-top: 15px;
padding-bottom: 15px;
background-color: var(--first);
border-radius: 0 0 3px 3px;
}
.product-details-block .amount-video svg {
width: 22px;
height: 37px;
color: var(--active);
}
/* 🔹 Блок с кнопками действия (лайк, сравнение) */
.product-details-block .icon-block {
cursor: pointer;
width: max-content;
position: absolute;
right: 17px;
top: 10px;
z-index: 10;
}
.product-details-block .icon-block svg {
width: 25px;
height: 34px;
color: #737373;
}
.product-details-block .like,
.product-details-block .unlike,
.product-details-block .addToCompare {
flex-shrink: 0;
width: 50px;
height: 50px;
border-radius: var(--radius);
}
.product-details-block .unlike {
display: none;
}
.product-details-block .addToCompare {
padding: 15px;
}
.product-wrapper .like,
.product-wrapper .unlike {
transition: 250ms;
position: absolute;
top: -10px;
padding: 10px;
right: -10px;
height: 40px;
width: 40px;
z-index: 1;
cursor: pointer;
}
.product-wrapper .unlike {
color: #FF5200;
}
/* 🔹 Нижняя часть описания */
.product-details-block .bottom-part {
padding: 35px;
margin-top: calc(var(--margin)*0.5);
background-color: #f2f2f2;
border-radius: 3px;
max-width: 75%;
}
/* 🔹 Блок покупки */
.product-details-block .buy-block {
width: 22%;
position: sticky;
top: 120px;
transition: 250ms;
height: max-content;
gap: 24px;
border: 1px solid #CCCCCC;
border-radius: 3px;
padding: 35px;
}
.product-details-block .buy-block .title {
font-weight: 500;
font-size: 28px;
line-height: 1.2;
}
.product-details-block .buy-block .sub-btn {
color: #737373;
font-weight: 300;
margin-top: 14px;
}
.product-details-block .buy-block ul {
gap: 14px;
padding: 0;
}
.product-details-block .buy-block li {
color: #505050;
}
.product-details-block .buy-block li span {
color: #202020;
}
.product-details-block .buy-block .button {
transition: 250ms;
background-color: #fff;
width: 100%;
color: var(--active);
border: 1px solid var(--active);
font-weight: 500;
}
.product-details-block .buy-block .button-buy {
transition: 250ms;
background-color: #008931;
width: 100%;
color: #fff;
border: 0px;
font-weight: 500;
animation: neonPulse 2s infinite, bounce 2s infinite;
}
.product-details-block .buy-block ul svg {
color: #fff;
margin-right: 5px;
}
/* 🔹 Навигационные стрелки слайдера */
.product-details-block .swiper .swiper-button-prev,
.product-details-block .swiper .swiper-button-next {
width: 34px;
height: 34px;
}
.product-details-block .swiper .swiper-button-prev {
left: 25px;
}
.product-details-block .swiper .swiper-button-next {
right: 25px;
}
.product-details-block .swiper .swiper-button-prev svg,
.product-details-block .swiper .swiper-button-next svg {
color: #737373;
width: 18px;
height: 18px;
}
/* 🔹 Блок "Преимущества лизинга" */
.advantages-leasing__wrapper {
border-radius: var(--radius);
margin-top: calc(var(--margin)*2);
background-image: url(../images/lising.jpg);
padding: 35px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.advantages-leasing__wrapper .svg-block {
flex-shrink: 0;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: var(--active);
}
.advantages-leasing__wrapper .svg-block svg {
color: #fff;
width: 12px;
height: 12px;
}
.advantages-leasing__wrapper .title {
font-size: 52px;
font-weight: 500;
}
.advantages-leasing__wrapper .sub-title {
font-size: 18px;
font-weight: 300;
color: #202020;
}
.advantages-leasing__wrapper .advantages-leasing {
gap: 24px;
max-width: 762px;
}
.advantages-leasing__wrapper li {
gap: 12px;
margin-top: 10px;
}
.advantages-leasing__wrapper ul {
column-count: 2;
}
.advantages-leasing__wrapper ul li:first-child {
margin-top: 0;
}
.advantages-leasing__wrapper .more-btn {
transition: 250ms;
cursor: pointer;
width: max-content;
padding: 18px 30px;
border: 1px solid var(--active);
border-radius: 3px;
background-color: #fff;
margin-top: 35px;
}
.advantages-leasing__wrapper .more-btn svg {
transition: 250ms;
width: 24px;
height: 24px;
}
/* ============================
END PRODUCT PAGE STYLES
============================ */
/* =========================== */
/* COMMENTS */
/* =========================== */
/* Основной стиль для каждого комментария */
.comment-list li {
background: #fff; /* Белый фон комментария */
border-radius: var(--radius); /* Скругление углов по переменной */
border: none; /* Убираем стандартную рамку */
padding: var(--margin); /* Внутренний отступ по общей переменной */
margin-top: var(--margin); /* Отступ сверху между комментариями */
}
/* Убираем лишний маркер перед элементом списка (если он используется) */
.comment-list li:before {
display: none !important;
}
/* Стили для верхней части комментария (имя, дата и т.д.) */
.comment-list li .top-part {
margin-bottom: calc(var(--margin) / 2); /* Отступ снизу для разделения с текстом */
}
/* Выравнивание даты комментария вправо */
.comment-list li .date {
margin-left: auto;
}
/* Отключаем блок подписки на комментарии (не отображается) */
.comment-subscribe {
display: none;
}
/* Отключаем действия с комментариями, такие как "ответить" и "действия" */
.comment-list .action,
.comment-list .answer {
display: none;
}
/* =========================== */
/* END OF COMMENTS */
/* =========================== */
/* =========================== */
/* TABS */
/* =========================== */
/* Контейнер табов (вкладок) */
.tab-links {
margin-bottom: var(--margin); /* Отступ снизу от табов до контента */
gap: 20px; /* Расстояние между табами */
border-bottom: 1px solid #ccc; /* Нижняя граница всей таб-панели */
}
/* Отдельная кнопка-таба */
.tab-links .tab-link {
transition: 250ms; /* Плавные переходы (цвет, фон и т.п.) */
color: #505050; /* Цвет текста по умолчанию */
cursor: pointer; /* Курсор в виде руки при наведении */
position: relative; /* Положение для псевдоэлемента .after */
display: flex; /* Горизонтальное размещение иконки и текста */
align-items: center; /* Выравнивание по центру */
height: 50px; /* Высота таба */
gap: 10px; /* Отступ между иконкой и текстом */
}
/* Подчеркивание активного таба */
.tab-links .tab-link:after {
position: absolute;
bottom: -1px; /* Немного ниже основного блока */
left: 0;
width: 100%;
content: '';
height: 3px;
display: none; /* По умолчанию не видно */
background: var(--active); /* Цвет активного таба */
}
/* Стили активного таба */
.tab-links .tab-link.active {
color: var(--active); /* Подсветка активного таба */
}
/* Показываем подчеркивание у активного таба */
.tab-links .tab-link.active:after {
display: block;
}
/* Скрытие неактивных вкладок */
.tab:not(.active) {
display: none;
}
/* Специальные стили для иконки видео в табе */
.tab-link.video svg {
transition: 250ms;
color: #f2f2f2; /* Цвет иконки в неактивном состоянии */
width: 20px;
height: 20px;
}
/* Иконка видео в активном табе */
.tab-links .tab-link.active.video svg {
color: #fff;
}
/* Форма внутри табов — поля ввода и textarea */
.tab input[type="text"],
.tab textarea {
background: #fff; /* Белый фон у полей */
}
/* Контейнер для видео внутри таба */
.videos {
display: grid;
grid-template-columns: repeat(2, 1fr); /* Две колонки */
gap: 40px; /* Отступ между видеороликами */
}
/* Видео через iframe с соотношением сторон 16:9 */
.videos iframe {
aspect-ratio: 16/9;
height: auto;
}
/* =========================== */
/* END OF TABS */
/* =========================== */
/* =========================== */
/* COMPARE */
/* =========================== */
/* Кнопка "Удалить все" сравниваемые товары */
.remove-all {
border-color: #FF5200; /* Красная граница */
color: #FF5200; /* Красный текст */
}
/* Вся таблица сравнения */
.mg-compare-products {
font-size: 13px; /* Базовый размер шрифта */
overflow-x: auto; /* Горизонтальный скролл при переполнении */
width: 100%; /* Растяжение на всю ширину */
}
/* Верхняя часть сравнения */
.mg-compare-products .top-part {
width: 100%; /* Растягивается на всю ширину */
}
/* Строка псевдо-таблицы */
.mg-compare-products .mg-compare-fake-table-row {
height: 40px; /* Высота строки */
line-height: 1;
border-bottom: 1px solid rgba(0,0,0,0.05); /* Светлая нижняя граница */
display: flex;
align-items: center; /* Центрирование по вертикали */
}
/* Ячейка псевдо-таблицы */
.mg-compare-products .mg-compare-fake-table-cell {
display: flex;
align-items: center;
}
/* Левая часть таблицы — названия характеристик */
.mg-compare-products .left-part {
width: 260px; /* Фиксированная ширина */
order: 1; /* Первая по порядку */
font-weight: 400;
padding: 20px;
background: var(--first); /* Светлый фон */
border-radius: 5px;
}
/* Правая часть таблицы — сравниваемые товары */
.mg-compare-products .right-part {
width: calc(100% - 260px - 60px); /* Оставшееся пространство */
order: 2;
padding: 20px 0;
}
/* Ширина блока товара и ячейки */
.mg-compare-product,
.mg-compare-fake-table-cell {
width: 200px;
}
/* Обёртка сравниваемых товаров */
.mg-compare-product-wrapper {
padding-left: calc(260px + 60px); /* Отступ слева (для левой части и зазора) */
display: flex;
gap: 20px;
width: 100%;
}
/* Строка правой части — для каждого товара */
.mg-compare-products .right-part .mg-compare-fake-table-row {
display: flex;
gap: 20px;
}
/* Заголовок товара */
.mg-compare-products .c-goods__title {
font-weight: 600;
}
/* Название группы характеристик (например, "Габариты") */
.mg-compare-products .group-name-cell {
font-weight: 600;
font-size: 18px;
margin-top: 40px;
}
/* Ссылка на удаление одного товара из сравнения */
.mp-remove-compared-product {
text-align: center;
font-weight: 600;
color: #FF5200; /* Красный цвет — как "удалить" */
display: block;
}
/* Список категорий в режиме сравнения */
.mg-category-list-compare {
margin-bottom: 40px;
}
/* Контейнер с изображением товара */
.mg-compare-product-wrapper .img {
display: block;
}
/* Стилизация изображения товара */
.mg-compare-product-wrapper img {
aspect-ratio: 4/3; /* Пропорции изображения */
}
/* =========================== */
/* END COMPARE */
/* =========================== */
/* =========================== */
/* AMOUNT */
/* =========================== */
/* Основной контейнер выбора количества (в одну строку, с отступами) */
.amount {
gap: 10px; /* Расстояние между кнопками и полем ввода */
}
/* Поле ввода количества */
.amount input[type=text] {
width: 60px; /* Ширина поля */
height: 40px; /* Высота поля */
text-align: center; /* Центрирование текста */
border: none; /* Без рамки */
background: transparent; /* Прозрачный фон */
}
/* Кнопки уменьшения (down) и увеличения (up) количества */
.amount .down,
.amount .up {
background: var(--active); /* Основной акцентный цвет */
width: 40px;
height: 40px;
border-radius: var(--radius); /* Скругление углов */
}
/* =========================== */
/* END AMOUNT */
/* =========================== */
/* =========================== */
/* LEASING */
/* =========================== */
/* Маленький текст с ценой в блоке лизинга */
.leasing-price {
color: #000;
font-size: 13px;
margin-top: 20px;
font-weight: 300;
}
/* Жирное значение лизинговой цены, выделенное цветом акцента */
.leasing-price b {
color: var(--active);
font-size: 14px;
margin-bottom: 5px;
display: block;
}
/* Сетка из 3 колонок на странице лизинга */
.leasing-page .grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* Отдельный карточный элемент в сетке */
.leasing-page .item {
padding: 20px;
background: var(--first);
border-radius: var(--radius);
}
/* Блок калькулятора */
.leasing-page .calc {
padding: 35px;
background: var(--first);
border-radius: var(--radius);
margin-top: 40px;
}
/* Заголовок калькулятора */
.leasing-page .calc .title {
font-weight: 400;
}
/* Значение процентной ставки */
.leasing-page .calc .percent {
background: #f50; /* ярко-оранжевый */
padding: 2px 10px;
border-radius: 20px;
color: #fff;
margin-left: 5px;
margin-right: 0;
}
/* Поля ввода чисел в калькуляторе */
.leasing-page .calc input[type=text] {
border: none;
font-size: 20px;
width: 120px;
text-align: right;
padding: 0;
border-bottom: 1px solid #ccc;
border-radius: 0;
box-shadow: none !important;
}
/* Второстепенные надписи */
.leasing-page .calc .milestone {
opacity: 0.5;
}
/* Отступ между несколькими лейблами */
.leasing-page .calc .label + .label {
margin-top: 20px;
}
/* Блок с результатом расчета */
.leasing-page .calc .result {
margin-top: 20px;
}
/* Подсветка цифр результата */
.leasing-page .calc .result span {
color: #f50;
}
/* ====== СТИЛИЗАЦИЯ СЛАЙДЕРА (range input) ====== */
/* Общие стили ползунка */
input[type="range"] {
-webkit-appearance: none;
appearance: none;
width: 100%;
cursor: pointer;
outline: none;
border-radius: 15px;
height: 6px;
background: #ccc;
}
/* Ползунок для Webkit-браузеров */
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
height: 15px;
width: 15px;
background-color: #f50;
border-radius: 50%;
border: none;
transition: .2s ease-in-out;
}
/* Ползунок для Firefox */
input[type="range"]::-moz-range-thumb {
height: 15px;
width: 15px;
background-color: #f50;
border-radius: 50%;
border: none;
transition: .2s ease-in-out;
}
/* Hover/Active/Focus эффекты на Webkit */
input[type="range"]::-webkit-slider-thumb:hover {
box-shadow: 0 0 0 10px rgba(255,85,0, .1);
}
input[type="range"]:active::-webkit-slider-thumb,
input[type="range"]:focus::-webkit-slider-thumb {
box-shadow: 0 0 0 13px rgba(255,85,0, .2);
}
/* Hover/Active/Focus эффекты на Firefox */
input[type="range"]::-moz-range-thumb:hover {
box-shadow: 0 0 0 10px rgba(255,85,0, .1);
}
input[type="range"]:active::-moz-range-thumb,
input[type="range"]:focus::-moz-range-thumb {
box-shadow: 0 0 0 13px rgba(255,85,0, .2);
}
/* =========================== */
/* END LEASING */
/* =========================== */
/* =========================== */
/* PROPERTIES */
/* =========================== */
/* Общий контейнер характеристик в обёртке карточки товара */
.product-wrapper .properties {
font-size: 14px;
margin-bottom: 40px;
}
/* Отступ между характеристиками в карточке товара */
.product-wrapper .properties .prop-item + .prop-item {
margin-top: calc(var(--margin)/4); /* меньше, чем стандартный отступ */
}
/* Отступ между характеристиками в общем блоке */
.properties .prop-item + .prop-item {
margin-top: 15px;
}
/* Название характеристики (например, "Мощность:") с полупрозрачным стилем */
.properties .prop-name {
opacity: 0.5;
margin-right: 5px;
}
/* Значение характеристики (например, "3.5 кВт"), не переносится */
.properties .prop-value {
white-space: nowrap;
margin-left: 5px;
}
/* Визуальный разделитель между названием и значением (точки или линия) */
.properties .prop-separator {
background: linear-gradient(
90deg,
#000 0,
#000 25%,
rgba(255, 255, 255, 0) 0,
rgba(255, 255, 255, 0)
);
flex-grow: 1;
background-position: bottom;
background-size: 4px 1px; /* имитация точек */
background-repeat: repeat-x;
}
/* Ограничение ширины одного пункта характеристики */
.properties li {
max-width: 500px;
margin-top: 15px;
}
/* Убираем отступ у самого первого элемента */
.properties li:first-child {
margin-top: 0;
}
/* Если блок характеристик находится во вкладке — выводим их в 2 колонки */
.product-details-block .tab .properties {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
column-gap: var(--margin); /* задаёт расстояние между колонками */
}
/* =========================== */
/* END PROPERTIES */
/* =========================== */
/* ========================= */
/* VIDEO TAB */
/* ========================= */
/* Сетка для вкладки с видео — две колонки с отступами */
.tab .grid.video {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 2 видео в ряд */
gap: 20px; /* расстояние между блоками */
}
/* Элемент видео: сохраняет пропорции 16:9, белый фон */
.tab .video .video-item {
aspect-ratio: 16 / 9; /* видео сохраняет стандартное соотношение сторон */
background-color: #fff; /* фон до загрузки видео */
}
/* ========================= */
/* REVIEWS */
/* ========================= */
/* Круглый логотип/аватар клиента в отзыве */
.tab .reviews .logo {
color: #fff;
width: 56px;
height: 56px;
border-radius: 50%; /* делает форму круглой */
background-color: #80D2A7; /* зелёный фон логотипа */
}
/* Блок с логотипом + названием компании или именем */
.tab .reviews .logo-part {
gap: 15px;
font-size: 22px;
font-weight: 500;
color: #1A1A1A;
}
/* Отдельный блок отзыва */
.tab .reviews-item {
font-size: 18px;
gap: 15px; /* отступ между логотипом и текстом */
padding-bottom: 35px; /* отступ между отзывами */
font-weight: 300;
color: #505050;
}
/* Серый цвет для даты отзыва */
.tab .reviews .date {
color: #828282;
}
/* ========================= */
/* PHOTO TAB */
/* ========================= */
/* Сетка из 3 колонок для фотографий */
.tab .grid.photo {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 изображения в ряд */
gap: 20px; /* отступ между фотографиями */
}
/* Обёртка фото — белый фон и внутренний отступ */
.tab .photo .photo-item {
padding: 50px;
background-color: #fff;
}
/* ========================= */
/* END OF BLOCKS */
/* ========================= */
/* ======================== */
/* MODAL */
/* ======================== */
/* Затемняющий фон под модалкой */
.overlay {
position: fixed; /* позиционируется поверх всей страницы */
top: 0;
left: 0;
width: 100%; /* покрывает весь экран */
height: 100%;
background: rgba(0,0,0,0.2); /* полупрозрачный тёмный фон */
z-index: 8000; /* ниже модального окна, но выше остального */
display: none; /* скрыт по умолчанию */
}
/* Основной контейнер модального окна */
.modal {
width: 500px;
position: fixed;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%); /* центрирование по экрану */
z-index: 9000; /* выше overlay */
transition: 250ms; /* плавное появление */
background: #fff;
display: none; /* скрыт по умолчанию */
border-radius: var(--radius);
}
/* Заголовок в модалке по центру */
.modal .h3-like {
text-align: center;
}
/* Вариант: фильтр открывается справа */
.filter-form.show {
right: 0px;
}
/* Внутренний отступ и сетка внутри модалки и фильтра */
.modal .inner,
.filter-form .inner {
padding: 80px 40px;
height: 100%;
gap: 40px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* Кнопка закрытия (крестик) для модалки и фильтра */
.modal .close,
.filter-form .close {
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
z-index: 1;
width: 40px;
height: 40px;
}
/* Стили перекрещивающихся линий крестика */
.modal .close:before,
.filter-form .close:before,
.modal .close:after,
.filter-form .close:after {
content: '';
position: absolute;
width: 1px;
height: 20px;
top: 10px;
left: 20px;
background: #008A43; /* зелёный цвет */
transform-origin: 50% 50%; /* центр вращения */
}
/* Наклон линий для крестика (две диагонали) */
.modal .close:before,
.filter-form .close:before {
transform: rotateZ(-45deg);
}
.modal .close:after,
.filter-form .close:after {
transform: rotateZ(45deg);
}
/* Добавление прокрутки при переполнении по вертикали */
.modal .overflow-y,
.filter-form .overflow-y {
overflow-y: auto;
}
/* Специальная модалка под "лизинг" */
.modal[data-modal="lizing"] {
width: 1000px;
height: calc(100vh - var(--margin) - var(--margin)); /* почти полный экран */
}
/* В лизинговом модальном окне .calc не должен иметь верхний отступ */
.modal[data-modal="lizing"] .calc {
margin-top: 0;
}
/* ======================== */
/* END MODAL */
/* ======================== */
/* ======================== */
/* SPOILER */
/* ======================== */
/* Обёртка спойлера */
.spoiler {
background: var(--first); /* фон по переменной (обычно светлый) */
overflow: hidden; /* скрывает переполнение контента при анимации */
}
/* Отступ между спойлерами, если несколько подряд */
.spoiler + .spoiler {
margin-top: 1em;
}
/* Заголовок спойлера — кликабельная шапка */
.spoiler-title {
padding: 20px;
line-height: 1;
font-weight: 400;
cursor: pointer; /* курсор "палец" */
transition: background 250ms, color 250ms; /* плавное изменение цвета */
gap: 20px; /* отступы между элементами внутри заголовка */
}
/* Скрываемый контент — по умолчанию скрыт */
.spoiler-content {
padding: 20px;
display: none; /* отображается только в .active */
}
/* Стили активного (открытого) спойлера */
.spoiler.active .spoiler-title {
color: #fff;
background: var(--active); /* цвет при открытии */
}
/* Элемент для отображения иконки "+" / "-" */
.spoiler-toggle {
position: relative;
width: 20px;
height: 5px;
flex-shrink: 0; /* не сжимается в флекс-контейнере */
order: 1; /* может менять порядок отображения */
}
/* Две перекрещивающиеся полоски: горизонтальная и вертикальная */
.spoiler-toggle:before,
.spoiler-toggle:after {
content: '';
position: absolute;
right: 0;
height: 1px;
width: 100%;
background: #000; /* чёрный цвет по умолчанию */
transition: 250ms;
}
/* Горизонтальная линия */
.spoiler-toggle:before {
top: 0;
}
/* Вертикальная линия (вторая из пары) */
.spoiler-toggle:after {
top: 5px;
}
/* При активации — линии становятся белыми и превращаются в "минус" */
.spoiler.active .spoiler-toggle:before,
.spoiler.active .spoiler-toggle:after {
background: #fff;
}
/* Обе линии смещаются на одну позицию, перекрываясь = "минус" */
.spoiler.active .spoiler-toggle:before {
top: 3px;
}
.spoiler.active .spoiler-toggle:after {
top: 3px;
}
/* ======================== */
/* END SPOILER */
/* ======================== */
/* ======================== */
/* AGREEMENT */
/* ======================== */
/* Контейнер блока соглашения */
.agreement {
margin-top: calc(var(--margin)/2); /* отступ сверху, равный половине базового отступа */
}
/* Ссылки внутри блока — подчёркнуты (например, на политику конфиденциальности) */
.agreement a {
text-decoration: underline;
}
/* Стилизация ошибки: текст ошибки (обычно рядом с чекбоксом) */
.agreement .agreement__label_error {
color: var(--active); /* акцентный цвет — яркий, часто используется для ошибок */
}
/* Дополнительная стилизация чекбокса при ошибке */
.agreement .agreement__label_error input[type=checkbox] {
border-color: var(--active); /* подсвечиваем границу чекбокса в случае ошибки */
}
/* ======================== */
/* END AGREEMENT */
/* ======================== */
/* ======================== */
/* FOOTER */
/* ======================== */
/* Общий стиль подвала */
footer {
background: #202020; /* тёмный фон */
color: #f2f2f2; /* светлый текст */
line-height: 1.4; /* комфортная высота строк */
}
/* Декоративный элемент или иконка "белка" */
footer .belka {
width: 30px;
height: 14px;
margin-left: 20px;
margin-right: auto;
opacity: 0.2;
transition: 250ms;
line-height: 1;
}
/* Отступы между элементами списка */
footer li {
margin-top: 20px;
}
/* Контейнер иконок соцсетей */
footer .social {
gap: 10px;
}
/* Стилизация иконок соцсетей */
footer .social a {
width: 40px;
height: 40px;
}
footer .social a svg {
color: #737373; /* серый цвет иконки */
transition: 250ms;
opacity: 0.75;
}
/* Основная сетка футера */
footer .grid {
gap: calc(var(--margin)*2);
display: grid;
grid-template-columns: repeat(3, auto); /* 3 колонки */
}
/* Категории меню с двумя колонками */
footer .menu-categories {
column-count: 2;
gap: var(--margin);
}
/* Верхняя часть футера */
footer .top-part {
padding-top: var(--margin);
padding-bottom: calc(var(--margin)*1.5);
}
/* Блок с логотипом */
footer .top-part .logo-block {
max-width: 436px;
}
/* Логотип — ограничение ширины */
footer .top-part .logo-block .logo {
width: 220px;
display: block;
}
/* Маленький текст под логотипом */
footer .top-part .logo-block .ps {
font-size: 12px;
opacity: 0.5;
display: block;
margin-top: 5px;
}
/* Текстовое описание под логотипом */
footer .top-part .logo-block .text {
font-weight: 300;
font-size: 14px;
margin: 20px 0;
}
/* Нижняя часть футера с границей */
footer .bottom-part {
padding: calc(var(--margin)/2) 0;
border-top: 1px solid #CCCCCC;
}
/* Выделение полужирным — серый оттенок */
footer b {
color: #737373;
}
/* Телефон — выделен, крупнее, не переносится */
footer .phone {
font-weight: 500;
font-size: 22px;
white-space: nowrap;
}
/* Контейнер с иконкой и телефоном */
footer .phone-block {
gap: 8px;
}
footer .phone-block svg {
width: 20px;
height: 20px;
}
/* Время работы */
footer .schedule {
color: #737373;
font-size: 14px;
}
/* Ссылки в футере — с плавной анимацией */
footer a {
transition: 250ms;
}
/* Скрытые элементы списка (например, в адаптиве) */
footer ul .hidden {
display: none;
}
/* ======================== */
/* END FOOTER */
/* ======================== */
/* ============================= */
/* HOVER EFFECTS */
/* (only on hover devices) */
/* ============================= */
@media (hover: hover) {
/* Категории: при наведении показываем ссылки */
.cats .item:hover .links a {opacity: 1}
/* Кнопка "Показать все" — меняет фон и цвет текста */
.h-block .show-all:hover {background: var(--active); color: #fff}
/* Вкладки: неактивная — меняет цвет текста при наведении */
.tab-links .tab-link:not(.active):hover {color: var(--active)}
/* Блок расчета — подчёркивание и цвет при наведении */
.product-wrapper .calculation-block:hover {
border-bottom: 1px solid #008A43;
color: #008A43;
}
/* Поля формы и селекты */
select:hover,
.form-list .SumoSelect>.CaptionCont:hover,
input[type=radio]:hover,
input[type=checkbox]:hover {
border-color: var(--active);
}
/* Хлебные крошки */
.bread-crumbs a:hover {color: var(--active); opacity: 1}
/* Логотип "белка" в футере */
footer .belka:hover {opacity: 1}
/* Пагинация: кнопка */
.mg-pager a:hover {background-color: var(--active); color: #fff}
/* Иконки в хедере */
header .icons-block .icon:hover {opacity: 0.5}
/* Кнопка поиска */
.search-block button:hover svg {
color: var(--active);
cursor: pointer;
}
/* Лайк, дизлайк, сравнение */
.product-wrapper .like:hover,
.product-wrapper .unlike:hover {color: #FF5200}
.product-wrapper .addToCompare:hover {color: var(--active)}
/* Общий ховер по карточке товара */
.product-wrapper:hover,
.product-wrapper.last {
box-shadow: 0px 4px 40px 0px #00000024;
background-color: #fff;
}
/* Название товара */
.product-wrapper .title:hover {color: var(--active)}
/* Кнопка "Подробнее" */
.product-wrapper .more-btn:hover {
background-color: var(--active);
color: #fff;
}
.product-wrapper .more-btn:hover svg {color: #fff}
/* Главное меню */
.top-line .menu-pages li:hover > a {opacity: 1}
/* Каталог: фильтр и сортировка */
.catalog .show-filter:hover {color: var(--active)}
.catalog .products-sort__block .right-part .quantity:hover {
color: #505050;
border-color: var(--active);
}
/* Кнопка "Показать ещё" */
.mg-pager .show-more__btn:hover {border-color: var(--active)}
/* Коллекции, бренды, категории и подкатегории */
.catalog .brand-country__section .item:hover,
.catalog .collections__section .item:hover,
.cats .item .subcategories .block:hover {
cursor: pointer;
border-color: var(--active);
background-color: var(--active);
color: #fff;
}
/* Слайдер отзывов */
.reviews-slider .swiper-slide .inner:hover {border-color: var(--active)}
.reviews-slider .swiper-slide .inner:hover .more {color: var(--active)}
/* Кнопка "Развернуть" описание компании */
.company-description__section .expand-btn:hover {
cursor: pointer;
color: var(--active);
}
/* Слайдеры: стрелки */
.swiper .swiper-button-prev:hover,
.swiper .swiper-button-next:hover {
background-color: var(--active);
}
.swiper .swiper-button-prev:hover svg,
.swiper .swiper-button-next:hover svg {
color: #fff;
}
/* Видео-вкладки */
.tab-link.video:hover svg {color: #fff}
/* Категории — основной грид */
.cats .grid .item:hover {
background: #04A653;
color: #fff;
}
/* Плавная анимация стрелок пагинации */
.mg-pager .arrow-next:hover:has(svg.active) {
transform: translateX(5px);
cursor: pointer;
}
.mg-pager .arrow-prev:hover:has(svg.active) {
transform: translateX(-5px);
cursor: pointer;
}
/* Подписка на новости */
.subscribe-newsletter__section .right-part form button:hover {
background-color: #04A653;
cursor: pointer;
}
.subscribe-newsletter__section .right-part form button:hover svg {
transform: translate(3px, -3px);
}
/* Главные кнопки на главной странице */
.home-first .button:hover,
.home-cats .button:hover {
background-color: var(--active);
color: #fff;
}
.home-first .button:hover svg,
.home-cats .button:hover svg {
color: #fff;
}
/* Иконки в блоке характеристик товара */
.product-details-block .icon-block span:hover svg {
color: var(--active);
}
/* Покупка: тень при наведении */
.product-details-block .buy-block:hover {
box-shadow: 0px 4px 40px 0px #00000024;
}
/* Кнопка "Купить" */
.product-details-block .buy-block .button:hover {
cursor: pointer;
color: #fff;
background-color: var(--active);
}
/* Кнопка "Купить в один клик" — пульсация */
.product-details-block .buy-block .button-buy:hover {
cursor: pointer;
color: #fff;
background-color: var(--active-alt);
animation: neonPulse 2s infinite;
}
/* Слайды миниатюр */
.product-details-block .product-thumbs-slider .swiper-slide:hover {
border-color: var(--active);
}
.product-details-block .product-thumbs-slider .swiper-slide.video:hover svg {
color: var(--active);
}
/* Стрелки в мини-слайдере */
.product-thumbs-slider__wrapper .swiper-button-prev:hover svg,
.product-thumbs-slider__wrapper .swiper-button-next:hover svg {
color: var(--active);
}
/* Кнопка "Подробнее" в лизинговых преимуществах */
.advantages-leasing__wrapper .more-btn:hover {
background-color: var(--active);
color: #fff;
}
.advantages-leasing__wrapper .more-btn:hover svg {
color: #fff;
}
/* Наверху: кольцо звонка и email */
.top-line .back-ring:hover,
.top-line .email:hover {
color: var(--active);
}
/* Телефон в шапке */
header .phone:hover {opacity: 0.5}
/* Горизонтальное меню */
.menu-line a:hover,
.link:hover {
color: var(--active);
}
/* Элементы с подменю */
.top-line .has-sub:hover {
cursor: pointer;
}
.top-line .has-sub:hover svg {
color: var(--active);
}
/* Поделиться: иконка и текст */
.product-details-block .right-part .share:hover,
.product-details-block .right-part .share:hover svg {
color: var(--active);
}
/* Ссылки моделей в серии */
.product-details-block .right-part .series-models a:hover {
color: #fff;
background-color: var(--active);
border-color: var(--active);
}
/* Ссылки в футере */
footer a:hover {color: var(--active)}
/* Соцсети в футере */
footer .social a:hover svg {color: var(--active)}
/* Класс nowrap */
.nw {white-space: nowrap}
}
/* ============================= */
/* END HOVER EFFECTS */
/* ============================= */
/* ======================================= */
/* 🔧 АДАПТАЦИЯ ДЛЯ ЭКРАНОВ ДО 1919px */
/* ======================================= */
@media screen and (max-width: 1919px) {
/* Кнопка "Показать все" в заголовках — уменьшаем размер */
.h-block .show-all {
font-size: 12px;
}
/* Стикеры (например, "Новинка", "Скидка") в карточке товара */
.product-wrapper .stickers {
font-size: 12px;
}
/* Характеристики товара в карточке — чуть меньше */
.product-wrapper .properties {
font-size: 13px;
}
/* Заголовок товара на странице товара */
.product-details-block h1 {
font-size: 26px;
}
/* Заголовок в блоке покупки */
.product-details-block .buy-block .title {
font-size: 22px;
}
/* Старая цена — уменьшаем */
.product-details-block .price-block .old-price {
font-size: 14px;
text-decoration: line-through;
color: #FF5200;
font-size: 18px;
}
/* Логотип в шапке — уменьшаем */
header .logo {
width: 220px;
}
/* Уменьшаем горизонтальные отступы основного контейнера */
.max {
padding: 0 calc(var(--margin)*2);
}
/* Первый экран главной страницы — уменьшаем высоту */
.home-first .inner {
height: 450px;
}
/* Телефон в шапке — уменьшаем размер шрифта */
header .phone {
font-size: 20px;
}
/* Заголовки на первом экране и в блоке описания */
.home-first .title,
.top-description h1 {
font-size: 42px;
}
/* Заголовки h2 по сайту */
h2,
.h2-like {
font-size: 36px;
}
/* Заголовки в промо-блоках, новостях и категориях — уменьшаем */
.home-promotion .title,
.news .item .text-block .title,
.home-cats .item .title {
font-size: 22px;
}
/* Высота промо-блоков на главной — уменьшаем */
.home-promotion .inner {
height: 550px;
}
/* Заголовки в блоке "О компании" на главной */
.home-about .grid .item .title {
font-size: 32px;
}
}
/* ======================================= */
/* КОНЕЦ АДАПТАЦИИ ДО 1919px */
/* ======================================= */
/* ======================================= */
/* 🎯 АДАПТАЦИЯ ДЛЯ ЭКРАНОВ ДО 1599px */
/* ======================================= */
@media screen and (max-width: 1599px) {
/* Заголовки H2 — чуть меньше */
h2, .h2-like {
font-size: 32px;
}
/* Заголовки H3 — тоже уменьшаем */
h3, .h3-like {
font-size: 24px;
}
/* Базовые переменные — уменьшаем маржин и размер шрифта */
.vars {
font-size: 14px;
--margin: 40px;
--radius: 5px;
}
/* Кнопка на первом экране — чуть ниже и тоньше */
.home-first .button {
font-size: 16px;
height: 50px;
}
/* Общие кнопки и кнопка отправки комментария — фиксированная ширина */
.button, .sendComment {
width: 175px;
}
/* Название товара в карточке */
.product-wrapper .bottom-part .title {
font-size: 18px;
}
/* Подкатегории в блоке категорий */
.cats .item .subcategories .block {
font-size: 14px;
}
/* Слайдер отзывов — размер заголовка */
.reviews-slider .title {
font-size: 18px;
}
/* Логотип в слайдере отзывов — меньше */
.reviews-slider .logo {
width: 45px;
height: 45px;
font-size: 28px;
}
/* Название станка в слайдере отзывов */
.reviews-slider .machine-name {
font-size: 16px;
}
/* Стрелки навигации Swiper — уменьшаем размеры */
.swiper .swiper-button-prev,
.swiper .swiper-button-next {
width: 55px;
height: 55px;
}
/* SVG внутри стрелок Swiper — тоже меньше */
.swiper .swiper-button-prev svg,
.swiper .swiper-button-next svg {
width: 22px;
height: 20px;
}
/* Подзаголовок секции "О компании" */
.company-description__section .sub-title {
font-size: 20px;
}
/* Текст секции "О компании" */
.company-description__section .text {
font-size: 16px;
}
/* Заголовок блока подписки на новости */
.subscribe-newsletter__section .left-part .title {
font-size: 18px;
}
/* Иконка по центру в блоке подписки — ограничение размера */
.subscribe-newsletter__section .center-part {
max-width: 80px;
max-height: 80px;
}
/* Высота инпута и кнопки формы подписки */
.subscribe-newsletter__section .right-part form button,
.subscribe-newsletter__section .right-part form input {
height: 45px;
}
/* Заголовок блока "Преимущества лизинга" */
.advantages-leasing__wrapper .title {
font-size: 36px;
}
/* Кнопка "Подробнее" в этом же блоке */
.advantages-leasing__wrapper .more-btn {
padding: 10px 27px;
}
}
/* ======================================= */
/* КОНЕЦ АДАПТАЦИИ ДО 1599px */
/* ======================================= */
/* ======================================= */
/* 🎯 АДАПТАЦИЯ ДЛЯ ЭКРАНОВ ДО 1439px */
/* ======================================= */
@media screen and (max-width: 1439px) {
/* Уменьшаем отступ сверху для body, так как header становится ниже */
body {
padding-top: calc(180px + var(--margin)) !important;
}
/* Уменьшаем высоту хедера */
header {
height: 80px;
}
/* Уменьшаем размер базового шрифта и хлебных крошек */
.vars,
.bread-crumbs {
font-size: 13px;
}
/* Уменьшаем расстояние между иконкой "назад" и e-mail в топ-баре */
.top-line .back-ring,
.top-line .email {
gap: 5px;
}
/* Сдвигаем кнопку "назад" влево ближе к краю */
.top-line .back-ring {
margin-left: calc(var(--margin) / 2);
}
/* Меню-полоска располагается ниже, с учётом уменьшенного header */
.menu-line {
top: 130px;
}
/* Прячем изображения в верхней линии — освобождаем пространство */
.top-line .back-ring img,
.top-line .email img {
display: none;
}
/* Уменьшаем размер логотипов в хедере и футере */
header .logo,
footer .top-part .logo-block .logo {
width: 200px;
}
/* Уменьшаем правый и левый padding у поисковой строки (в header) */
.search-block input[type=search] {
padding: 0px 20px 0 150px;
}
/* Категории товаров (и блок акций) — уменьшаем количество колонок */
.cats .grid,
.sale-cats {
grid-template-columns: repeat(3, 1fr);
}
}
/* ======================================= */
/* КОНЕЦ АДАПТАЦИИ ДО 1439px */
/* ======================================= */
/* ============================================ */
/* 📱 АДАПТАЦИЯ ДЛЯ ЭКРАНОВ ДО 1279px */
/* ============================================ */
@media screen and (max-width: 1279px) {
/* Меню в одну строку, равномерное распределение */
.menu-line ul {
justify-content: space-between;
}
/* Заголовки становятся компактнее */
h2, .h2-like {
font-size: 24px;
}
/* Сетка новостей: 2 колонки вместо 3 */
.news .grid {
grid-template-columns: repeat(2, 1fr);
}
/* Уменьшенные боковые отступы глобального контейнера */
.max {
padding: 0 calc(var(--margin) * 1);
}
/* Точные отступы для верхних блоков */
.top-line > .max,
header > .max,
.menu-line > .max {
padding: 0 var(--margin);
}
/* Уменьшенная высота поиска и кнопок меню */
input[type=search] {
height: 45px;
}
.menu-button {
height: 45px;
width: 130px;
}
/* Корректировка позиции кнопки поиска */
.search-block button {
top: 2px;
}
/* Телефонный номер меньше */
header .phone {
font-size: 16px;
}
.menu-line > .max {
gap: 20px;
}
/* Стрелки слайдера меньше */
.swiper .swiper-button-prev,
.swiper .swiper-button-next {
width: 45px;
height: 45px;
}
.swiper .swiper-button-prev svg,
.swiper .swiper-button-next svg {
width: 20px;
height: 20px;
}
/* Главный баннер: компактный заголовок и кнопки */
.home-first .title,
.top-description h1 {
font-size: 32px;
}
.home-first .sub-title {
font-size: 18px;
}
.home-first .button {
font-size: 14px;
height: 40px;
width: 150px;
}
.home-first .button svg {
width: 20px;
height: 20px;
}
.home-first .inner {
height: 300px;
}
/* Кнопки категорий на главной */
.home-cats .button {
padding: 9px 12px;
font-size: 14px;
height: auto;
}
.home-cats .button svg {
width: 20px;
height: 20px;
}
/* Кнопка YouTube и заголовки товаров */
.product-wrapper .yt-btn {
height: 42px;
}
.product-wrapper .yt-btn svg {
width: 23px;
}
.product-wrapper .bottom-part .title {
font-size: 17px;
}
/* Блок "О компании" */
.home-about .grid {
grid-template-columns: repeat(2, 1fr);
}
.home-about .grid .item {
padding: 20px;
}
.home-about .grid .item .title {
font-size: 28px;
}
.home-about .grid .item .text {
font-size: 15px;
}
/* Новости */
.news .item .text-block .title {
font-size: 18px;
}
.news .item .text-block {
padding: 25px;
}
.news .item .date {
font-size: 14px;
}
/* Футер */
footer .top-part .max.flex {
gap: 40px;
}
footer .phone {
font-size: 16px;
}
footer .grid {
gap: var(--margin);
}
footer .social a {
padding: 10px;
}
footer .bottom-part {
padding-top: 10px;
padding-bottom: 10px;
}
/* Каталог: сетка и фильтры */
.catalog .grid {
grid-template-columns: repeat(3, 1fr);
}
/* Подписка на рассылку */
.subscribe-newsletter__section .left-part {
gap: 5px;
flex-direction: column;
align-items: baseline;
}
.subscribe-newsletter__section .left-part .title {
font-size: 15px;
}
.subscribe-newsletter__section .left-part .text {
font-size: 13px;
}
.subscribe-newsletter__section .center-part {
max-width: 55px;
max-height: 55px;
}
.subscribe-newsletter__section .right-part form button {
padding: 7px 22px;
}
.subscribe-newsletter__section .right-part form button,
.subscribe-newsletter__section .right-part form input {
height: 40px;
}
.subscribe-newsletter__section .right-part form button svg {
width: 20px;
height: 20px;
}
/* Бренды и коллекции — компактнее */
.catalog .brand-country__section .item,
.catalog .collections__section .item {
padding: 6px 15px;
}
/* Страница товара — блок "статус" */
.product-status h1 {
font-size: 22px;
}
/* Страница товара — блок покупки */
.product-details-block .buy-block {
width: 25%;
padding: 25px;
}
.product-details-block .buy-block .title {
font-size: 20px;
}
.product-details-block .buy-block .sub-btn {
font-size: 13px;
}
/* Стрелки в галерее товара */
.product-details-block .swiper .swiper-button-next {
right: 10px;
}
.product-details-block .swiper .swiper-button-prev {
left: 10px;
}
/* Блок "Преимущества лизинга" */
.advantages-leasing__wrapper .title {
font-size: 28px;
}
.advantages-leasing__wrapper .more-btn {
padding: 8px 20px;
}
}
/* ============================================ */
/* КОНЕЦ БРЕЙКПОИНТА 1279px */
/* ============================================ */
/* ============================================ */
/* 📱 АДАПТАЦИЯ ДЛЯ ЭКРАНОВ ДО 1023px */
/* ============================================ */
@media screen and (max-width: 1023px) {
/* 🔷 Сетка брендов — 3 в ряд */
.brands {
grid-template-columns: repeat(3, 1fr);
}
.brands img {
margin-bottom: 5px;
}
/* 🔷 Высота меню в хедере */
header .menu-categories {
height: calc(100vh - 130px);
}
/* 🔷 Упрощаем уровень 2 в меню: 1 колонка */
header .menu-categories .level-2 ul {
grid-template-columns: 100%;
gap: 10px;
}
/* 🔷 Скрытие третьей новости на главной */
.home-news .item:nth-of-type(3) {
display: none;
}
/* 🔷 Порядок блоков в header: поиск — логотип — иконки — контакты */
.search-block {
order: 1;
flex: unset;
margin-right: calc(var(--margin)/2);
}
header .logo-block {
order: 2;
margin-right: auto;
}
header .icons-block {
margin-left: 0;
order: 3;
}
header .contacts-blocks {
order: 4;
}
/* 🔷 Адаптив логотипа */
header .logo,
footer .top-part .logo-block .logo {
width: 180px;
margin-right: 0;
}
/* 🔷 Адаптация бургер-кнопки */
.menu-button {
font-size: 0;
width: 40px;
height: 40px;
position: static;
border-radius: var(--radius);
}
.menu-button .lines {
left: 5px;
}
/* 🔷 Условное отображение блоков */
.tablet-hide {
display: none !important;
}
.tablet-show {
display: block !important;
}
/* 🔷 Размеры заголовков */
h1 {
font-size: 32px;
}
h2, .h2-like {
font-size: 26px;
}
h3, .h3-like {
font-size: 20px;
}
/* 🔷 Детальная страница товара: блоки друг под другом */
.product-details-block .left-part,
.product-details-block .right-part {
width: 100%;
}
.product-details-block .left-part {
margin-bottom: var(--margin);
}
/* 🔷 Отступ сверху уменьшается */
body {
padding-top: calc(130px + var(--margin)) !important;
}
/* 🔷 Каталоги и категории в 2 колонки */
.catalog .grid,
.cats .grid,
.sale-cats,
.home-cats .grid {
grid-template-columns: repeat(2, 1fr);
}
.home-cats .grid .item {
grid-column: unset !important;
}
/* 🔷 Заголовки и подписи */
.home-cats .item .title {
font-size: 18px;
}
.reviews-slider .logo {
width: 35px;
height: 35px;
font-size: 22px;
}
.reviews-slider .title {
font-size: 17px;
}
.company-description__section .sub-title {
font-size: 17px;
}
/* 🔷 Обнуляем aspect-ratio у последних блоков категорий */
.home-cats .grid .item:nth-last-child(-n+3) {
aspect-ratio: auto;
}
/* 🔷 Главный блок "О компании" — в строку */
.home-about .grid .item {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 20px;
}
.home-about .grid .item .title {
width: 80px;
font-size: 22px;
}
.home-about .grid .item .text {
width: calc(100% - 100px);
}
/* 🔷 Блок "О компании" (текст + картинка) — в колонку */
.home-about .text-img-part {
flex-direction: column;
}
.home-about .text-img-part .img-part {
max-width: 100%;
}
/* 🔷 Подзаголовок первого блока на главной */
.home-first .sub-title {
font-size: 15px;
line-height: 1.4;
}
.home-first .sub-title br {
display: none;
}
/* 🔷 Футер адаптируется к узкой ширине */
footer .top-part .max.flex {
gap: 30px;
flex-wrap: wrap;
}
footer .top-part .logo-block {
max-width: 100%;
}
footer .top-part .logo-block a {
max-width: 150px;
margin: 0 auto;
margin-bottom: 20px;
}
footer .top-part .max.flex {
gap: 40px;
flex-wrap: wrap;
}
/* 🔷 Слайдер с товарами */
.product-slider .swiper-slide {
padding: 20px 20px 40px 20px;
}
}
/* ============================================ */
/* КОНЕЦ БРЕЙКПОИНТА 1023px */
/* ============================================ */
/* ============================================ */
/* 📱 АДАПТАЦИЯ ДЛЯ ЭКРАНОВ ДО 767px (мобильные) */
/* ============================================ */
@media screen and (max-width: 767px) {
/* === Layout: базовые переменные и отступы === */
.vars {
--margin: 20px;
--radius: 3px;
}
body {
padding-top: calc(80px + var(--margin)) !important;
}
.max {
padding: 0 var(--margin);
}
/* === Заголовки === */
h1, .home-first .title, .top-description h1 {
font-size: 26px;
}
h2, .h2-like {
font-size: 22px;
}
h3, .h3-like {
font-size: 18px;
}
/* === Хедер === */
header {
height: 80px;
position: fixed;
top: 0;
}
header .max {
padding: 0 var(--margin);
}
header .menu-block {order: 1}
header .logo-block {order: 2}
header .icons-block {order: 3; margin-left: 0}
header .logo {
width: 160px;
height: 40px;
margin-right: 0;
}
header .phone {
font-size: 0;
}
header .phone-block {
gap: 15px;
}
/* === Меню: бургер, выпадающие уровни, стилизация === */
.menu-button {
padding: 0;
width: 30px;
height: 30px;
font-size: 0;
background: transparent;
}
.menu-button .lines {
width: 20px;
left: 0;
}
.menu-button.active {
background: transparent;
}
header .menu-categories {
height: unset;
}
.drop-down.menu {
padding-bottom: 80px;
height: calc(100vh - 80px);
}
header .menu-pages {
background: var(--first);
padding: 20px;
}
header .menu-pages .level-1 > li > a {
padding: 10px 0;
display: block;
}
header .menu-categories .level-1 {
width: 100%;
}
header .menu-categories .level-1 > li > a {
background: url("data:image/svg+xml,") no-repeat right center;
background-size: 10px;
}
header .menu-categories li.has-sub:active .level-2 {
display: block;
}
header .menu-categories li:hover > .level-2 {
position: static;
width: 100%;
padding: 20px;
}
header .menu-categories .level-2 ul {
gap: 20px;
}
header .menu-categories .level-2 img {
width: 40px;
}
/* === Сетки и блоки на главной === */
.catalog .grid,
.home-cats .grid,
.cats .grid,
.catalog.main .cats .grid,
.sale-cats {
grid-template-columns: 100%;
gap: 10px;
}
.brands {
grid-template-columns: repeat(2, 1fr);
}
.home-about .grid {
grid-template-columns: 100%;
gap: 10px;
}
.catalog-slider .grid {
margin: 0 -20px;
padding: 0 20px;
overflow-x: auto;
grid-template-columns: repeat(4, 85vw);
}
.catalog-slider .swiper {
margin: 0 -20px;
}
.catalog-slider .swiper-wrapper:before,
.catalog-slider .swiper-wrapper:after {
width: 20px;
height: 20px;
content: '';
flex-shrink: 0;
}
.catalog-slider .swiper .swiper-slide {
scroll-snap-align: unset !important;
}
.videos {
gap: 20px;
grid-template-columns: 100%;
}
.news .grid {
grid-template-columns: repeat(2, 1fr);
}
/* === Блоки карточек и товаров === */
.product-wrapper {
box-shadow: none !important;
display: block;
}
.product-wrapper .bottom-part .title {
overflow: unset;
height: unset;
display: block;
text-overflow: unset;
-webkit-line-clamp: unset;
-webkit-box-orient: unset;
}
.product-wrapper .price-block,
.product-wrapper .btn-block {
margin: 20px 0 0;
}
.product-wrapper .properties {
margin-bottom: 0;
}
.product-wrapper .bottom-part .addToCart {
width: 100%;
height: 40px;
}
.product-wrapper .stickers {
top: 12px;
}
.product-wrapper .like,
.product-wrapper .unlike {
top: 0;
right: 0;
}
.product-details-block .product-slider,
.product-details-block .sticky,
.static .left-part,
.static .right-part,
.catalog .left-part,
.catalog .right-part,
.product-details-block .buy-block {
width: 100%;
}
.product-details-block .buy-block {
margin-top: 40px;
}
.product-details-block .buy-block .title {
text-align: center;
}
.product-details-block .bread-crumbs li:nth-last-of-type(1),
.product-details-block .bread-crumbs li:nth-last-of-type(2) {
display: none;
}
.product-details-block .tab .properties {
column-count: unset;
-webkit-column-count: unset;
}
.product-details-block .bottom-part {
margin: 40px -20px 0;
padding: 20px;
border-radius: 0;
max-width: 110%;
}
.product-details-block .like,
.product-details-block .unlike,
.product-details-block .addToCompare {
width: 40px;
height: 40px;
padding: 10px;
}
/* === Формы === */
.form-list.flex li {
width: 100%;
}
.button,
.sendComment {
height: 40px;
width: 100%;
}
.filter-form {
background: #fff;
position: fixed;
top: 0;
left: -100%;
z-index: 9000;
width: 100%;
height: 100%;
transition: 250ms;
}
.filter-form.show {
left: 0;
}
.modal,
.modal .inner,
.filter-form .inner {
width: calc(100% - 40px);
padding: 80px 20px;
}
.modal .close,
.filter-form .close {
top: 10px;
right: 10px;
}
/* === Калькулятор на странице лизинга === */
.leasing-page .calc {
padding: 20px;
margin: 40px -20px;
border-radius: 0;
}
.leasing-page .calc .percent {
font-size: 11px;
padding: 2px 8px;
}
.leasing-page .calc .title {
font-size: 12px;
}
.leasing-page .calc input[type=text] {
font-size: 15px;
width: 90px;
}
/* === Прочее и адаптивные утилиты === */
.bread-crumbs {
gap: 5px;
}
.mobile-hide {
display: none !important;
}
.mobile-show {
display: block !important;
}
.mobile-flex {
display: flex !important;
}
.advantages-leasing__wrapper .title {
font-size: 22px;
}
.advantages-leasing__wrapper .sub-title {
font-size: inherit;
}
.news .item .img-part .title {
font-size: 18px;
}
.news .item .img-part .logo {
max-width: 115px;
}
.news .item .text-block .title {
font-size: 16px;
}
.home-first .left-block {
max-width: 100%;
}
footer .grid {
grid-template-columns: 100%;
}
footer .social {
justify-content: center;
}
}
/* ============================================ */
/* КОНЕЦ БРЕЙКПОИНТА 767px */
/* ============================================ */
/* ============================================ */
/* 📱 АДАПТАЦИЯ ДЛЯ ЭКРАНОВ ДО 550px */
/* Упрощаем сетку новостей: по одному элементу в строку */
/* ============================================ */
@media screen and (max-width: 550px) {
.news .grid {
grid-template-columns: 100%;
}
}
/* ============================================ */
/* КОНЕЦ БРЕЙКПОИНТА 550px */
/* ============================================ */
/* ============================================ */
/* 🎞️ АНИМАЦИИ (KEYFRAMES) */
/* ============================================ */
/* 💡 neonPulse — эффект неонового свечения с пульсацией
Использует переменную --active-alt как цвет свечения */
@keyframes neonPulse {
0%, 100% {
box-shadow:
0 0 4px var(--active-alt),
0 0 7px var(--active-alt),
0 0 10px var(--active-alt);
}
50% {
box-shadow:
0 0 8px var(--active-alt),
0 0 12px var(--active-alt),
0 0 15px var(--active-alt);
}
}
/* 💡 bounce — классическая bounce-анимация (отскок)
Используется для прыгающего эффекта (например, кнопки, иконки) */
@keyframes bounce {
0%, 20%, 53%, 80%, 100% {
transform: translateY(0); /* Положение по умолчанию */
}
40%, 43% {
transform: translateY(-10px); /* Подскок вверх */
}
70% {
transform: translateY(-5px); /* Меньший подскок */
}
90% {
transform: translateY(-2px); /* Финальный лёгкий подскок */
}
}
/* ============================================ */
/* КОНЕЦ АНИМАЦИИ (KEYFRAMES) */
/* ============================================ */