/* =========================================================
Shops Landing — main stylesheet
Палитра, типографика, сетка, секции
========================================================= */
:root {
/* Палитра «Алёнка»: жёлтый/оранжевый из фирстиля + белый фон + красный акцент.
Это схема по умолчанию («Белая»). Альтернативные схемы переопределяют
часть переменных ниже — см. блок «ЦВЕТОВЫЕ СХЕМЫ». */
--color-bg: #ffffff;
--color-bg-soft: #fff8e6; /* мягкий кремовый */
--color-ink: #2b1a0e; /* почти чёрный, тёплый */
--color-ink-soft: #5a4738;
--color-muted: #9a8a78;
--color-line: #f0e4cc;
--color-brand: #ffc629; /* фирменный жёлтый */
--color-brand-soft: #ffe066;
--color-accent: #ee7d00; /* фирменный оранжевый (из меток) */
--color-accent-soft: #ffa647;
--color-red: #c8202b; /* красный — для CTA, как «при покупке» в баннерах */
/* --- «Поверхности»: карточки, форма, инпуты, дропдаун ---
Раньше здесь был жёстко прописан #fff. Вынесено в переменную, чтобы
цветовые схемы могли поменять фон карточек вместе с фоном страницы:
белая карточка на тёмном фоне выглядела бы инородно. */
--color-surface: #ffffff;
--color-map-bg: #efe6d0; /* фон контейнера карты до загрузки ymaps */
/* --- Футер ---
Отдельные переменные, а НЕ var(--color-ink): в тёмных схемах ink
становится светлым, и футер «светлый текст на светлом фоне» ломался бы. */
--color-footer-bg: #2b1a0e;
--color-footer-text: #fff8e6;
/* --- Тени ---
Компоненты RGB отдельно, чтобы схемы могли менять цвет тени
(тёплая коричневая на светлом фоне / нейтральная чёрная на тёмном). */
--shadow-rgb: 43, 26, 14;
/* Стрелка дропдауна выбора города. В переменной целиком, потому что
цвет обводки внутри data-URI иначе не переопределить. */
--icon-chevron: url("data:image/svg+xml;utf8,");
/* Типографика — тёплый рукописный display + добротный гротеск для тела */
--font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
--font-body: 'Manrope', system-ui, sans-serif;
/* Размеры */
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 22px;
--container: 1240px;
--gap: 24px;
}
/* =========================================================
ЦВЕТОВЫЕ СХЕМЫ
---------------------------------------------------------
Схема выбирается в Кастомайзере («Оформление → Цветовая схема»).
PHP навешивает на класс .sl-scheme-- (см. inc/customizer.php),
схема переопределяет только переменные — ни одно правило вёрстки ниже
про схемы не знает.
Фирменные цвета (жёлтый/оранжевый/красный) НЕ трогаем ни в одной схеме:
это айдентика бренда. Меняются только фоны, «поверхности», линии и текст.
Как добавить новую схему:
1) блок .sl-scheme-- { ... } здесь;
2) строка в массиве sl_color_schemes() в inc/customizer.php.
========================================================= */
/* --- Кремовая: белого нет вообще, обе полосы тёплые --- */
.sl-scheme--cream {
--color-bg: #fffdf7;
--color-bg-soft: #fbf1dd;
--color-line: #eddfc4;
--color-surface: #ffffff;
--color-map-bg: #ede2ca;
}
/* --- Песочная: заметно теплее и плотнее, карточки чуть светлее фона --- */
.sl-scheme--sand {
--color-bg: #f8f1e3;
--color-bg-soft: #f0e3ca;
--color-line: #e3d2b2;
--color-ink-soft: #54412f;
--color-muted: #8e7c66;
--color-surface: #fffcf5;
--color-map-bg: #e7dbc0;
--shadow-rgb: 62, 41, 20;
}
/* --- Тёмная (шоколад): максимально контрастный вариант для показа.
Шапка остаётся жёлтой — это узнаваемый элемент бренда. --- */
.sl-scheme--dark {
--color-bg: #1d130b;
--color-bg-soft: #271a10;
--color-ink: #fdf6ea;
--color-ink-soft: #cbb6a0;
--color-muted: #96806a;
--color-line: #3d2a1a;
--color-surface: #2b1c11;
--color-map-bg: #33220f;
--color-footer-bg: #150e07;
--color-footer-text: #fff8e6;
--shadow-rgb: 0, 0, 0;
/* Стрелка дропдауна — светлая, иначе не видна на тёмном инпуте. */
--icon-chevron: url("data:image/svg+xml;utf8,");
}
/* Жёлто-оранжевое свечение в Hero на тёмном фоне светится слишком сильно. */
.sl-scheme--dark .hero::before { opacity: 0.45; }
/* Тени на тёмном фоне не читаются — держим блоки на границах. */
.sl-scheme--dark .shop-card,
.sl-scheme--dark .feedback__form { border: 1px solid var(--color-line); }
/* Зелёный «отправлено» рассчитан на белую подложку формы — на тёмной осветляем. */
.sl-scheme--dark .feedback__status.is-success { color: #6fcf8f; }
/* Фирменный красный #c8202b на тёмном фоне проваливается по контрасту.
Осветляем ТОЛЬКО текстовые акценты — заливки кнопок, метка метро и
ссылка в балуне остаются фирменного цвета, айдентика не плывёт. */
.sl-scheme--dark .section-title em,
.sl-scheme--dark .about__stats strong,
.sl-scheme--dark .shop-card__title,
.sl-scheme--dark .shops__list-title,
.sl-scheme--dark .feedback__label em,
.sl-scheme--dark .feedback__status.is-error { color: #ff6f78; }
/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.55;
color: var(--color-ink);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-accent); }
button { font: inherit; cursor: pointer; }
.container {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 0 24px;
}
/* ---------- shared section parts ---------- */
.section-eyebrow {
display: inline-block;
font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--color-accent);
margin-bottom: 14px;
}
.section-title {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(30px, 4.2vw, 48px);
line-height: 1.05;
letter-spacing: -0.01em;
margin: 0 0 14px;
color: var(--color-ink);
}
.section-title em {
font-style: italic;
color: var(--color-red);
}
.section-lead {
font-size: 17px;
color: var(--color-ink-soft);
max-width: 640px;
margin: 0;
}
/* ---------- чередование фонов секций ---------- */
/* Классы навешиваются из шаблона хелпером sl_band() по порядку вывода секций,
что даёт корректное чередование белый/кремовый при любом наборе включённых
блоков (Hero, Акции и Лояльность включаются независимо). Фон задаётся здесь,
а не в самих секциях, чтобы источник истины был один. */
.sl-band--light { background: var(--color-bg); }
.sl-band--soft { background: var(--color-bg-soft); }
/* ---------- buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 28px;
border-radius: 999px;
font-weight: 700;
font-size: 15px;
letter-spacing: 0.01em;
transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
border: 1px solid transparent;
white-space: nowrap;
}
.btn--primary {
background: var(--color-red);
color: #fff;
box-shadow: 0 6px 16px rgba(200, 32, 43, 0.25);
}
.btn--primary:hover {
background: #a8121b;
color: #fff;
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(200, 32, 43, 0.35);
}
.btn--ghost {
background: transparent;
color: var(--color-ink);
border-color: var(--color-ink);
}
.btn--ghost:hover {
background: var(--color-ink);
/* НЕ #fff: в тёмной схеме --color-ink светлый, белый текст пропал бы. */
color: var(--color-bg);
}
/* ===== HEADER ===== */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--color-brand);
border-bottom: 1px solid #e0a800;
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
padding: 16px 24px;
}
.site-header__logo {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-display);
font-style: italic;
font-weight: 700;
font-size: 28px;
color: var(--color-red);
letter-spacing: 0.01em;
}
.site-header__logo:hover { color: var(--color-red); }
.site-header__logo-mark {
color: var(--color-ink);
font-size: 16px;
font-style: normal;
}
/* Логотип-картинка: фиксируем высоту, ширина по пропорции. 40px хорошо
ложится в шапку рядом с навигацией. На мобиле чуть меньше (см. media). */
.site-header__logo-img {
height: 40px;
width: auto;
display: block;
}
.site-header__nav {
display: flex;
gap: 28px;
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.site-header__nav a {
color: var(--color-ink);
transition: color .15s ease;
}
.site-header__nav a:hover { color: var(--color-red); }
.site-header__phone {
font-weight: 700;
color: var(--color-ink);
font-size: 16px;
}
.site-header__phone-icon {
display: inline-block;
margin-right: 6px;
color: var(--color-red);
}
/* Бургер: спрятан на десктопе, появляется на мобиле через медиа-запрос ниже. */
.site-header__burger {
display: none;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
background: transparent;
border: 0;
cursor: pointer;
flex-direction: column;
gap: 5px;
}
.site-header__burger-line {
display: block;
width: 22px;
height: 2px;
background: var(--color-ink);
border-radius: 2px;
transition: transform .2s ease, opacity .2s ease;
}
.site-header__burger.is-active .site-header__burger-line:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.site-header__burger.is-active .site-header__burger-line:nth-child(2) {
opacity: 0;
}
.site-header__burger.is-active .site-header__burger-line:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* Мобильное меню — выпадающая панель ниже шапки. Полная ширина, сверху вниз. */
.site-header__mobile {
background: var(--color-brand);
border-top: 1px solid #e0a800;
border-bottom: 1px solid #e0a800;
}
.site-header__mobile-nav {
display: flex;
flex-direction: column;
padding: 8px 0;
}
.site-header__mobile-nav a {
display: block;
padding: 14px 24px;
color: var(--color-ink);
font-weight: 600;
font-size: 16px;
border-bottom: 1px solid rgba(0,0,0,0.06);
}
.site-header__mobile-nav a:last-child {
border-bottom: 0;
}
.site-header__mobile-phone {
color: var(--color-red) !important;
}
/* ===== HERO ===== */
.hero {
padding: 70px 0 90px;
overflow: hidden;
background: var(--color-bg-soft);
position: relative;
}
.hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 10% 20%, rgba(255, 198, 41, 0.18) 0%, transparent 40%),
radial-gradient(circle at 90% 80%, rgba(238, 125, 0, 0.12) 0%, transparent 45%);
pointer-events: none;
}
.hero__inner {
position: relative;
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 60px;
align-items: center;
}
.hero__eyebrow {
display: inline-block;
padding: 7px 16px;
border-radius: 999px;
background: var(--color-brand);
border: none;
font-size: 13px;
font-weight: 700;
color: var(--color-ink);
margin-bottom: 24px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.hero__title {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(40px, 5.8vw, 68px);
line-height: 1.04;
letter-spacing: -0.01em;
margin: 0 0 22px;
color: var(--color-ink);
}
.hero__title em {
font-style: italic;
color: var(--color-red);
font-weight: 700;
}
.hero__lead {
font-size: 18px;
color: var(--color-ink-soft);
max-width: 520px;
margin: 0 0 36px;
}
.hero__actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
/* Картинка карты в правом блоке hero */
.hero__visual {
position: relative;
aspect-ratio: 1;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 20px 50px rgba(238, 125, 0, 0.15);
}
.hero__visual img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ===== ABOUT ===== */
.about {
padding: 90px 0;
/* Фон задаётся классом чередования .sl-band--* (см. низ файла). */
border-top: 1px solid var(--color-line);
border-bottom: 1px solid var(--color-line);
}
.about__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
/* Левая колонка: рассказ о компании + строка со статистикой. */
.about__copy { min-width: 0; }
.about__lead {
font-size: 19px;
line-height: 1.55;
color: var(--color-ink);
margin: 28px 0 0;
}
/* Статистика — компактный ряд из трёх цифр.
Раньше были раздутые карточки, занимавшие на мобиле полэкрана. */
.about__stats {
list-style: none;
margin: 36px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, max-content);
gap: 28px 44px;
}
.about__stats li {
display: flex;
flex-direction: column;
}
.about__stats strong {
font-family: var(--font-display);
font-style: italic;
font-size: 38px;
font-weight: 700;
color: var(--color-red);
line-height: 1;
margin-bottom: 8px;
}
.about__stats span {
font-size: 13px;
color: var(--color-ink-soft);
line-height: 1.4;
max-width: 14em;
}
/* Правая колонка: коллаж фотографий продукции.
Главное фото сверху на 2 ячейки + два поменьше снизу.
1.1.0: убраны повороты и сдвиг translateY у нижних фото — по просьбе
заказчика коллаж выровнен по единой сетке. Ховер-эффект снят полностью:
фото декоративные (figure с aria-hidden), кликать по ним некуда, а сдвиг
при наведении читался как «дёрганье». Соотношения сторон у обоих нижних
фото одинаковые (4/3) при равной ширине колонок, поэтому их нижние края
совпадают автоматически. */
.about__visual { min-width: 0; }
.about__collage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
align-items: start;
}
.about__photo {
margin: 0;
border-radius: var(--radius-md);
overflow: hidden;
background: var(--color-bg-soft);
box-shadow:
0 1px 0 rgba(255, 255, 255, .8) inset,
0 14px 28px rgba(var(--shadow-rgb), 0.14),
0 4px 10px rgba(var(--shadow-rgb), 0.08);
}
.about__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.about__photo--main {
grid-column: 1 / -1;
aspect-ratio: 16 / 10;
}
.about__photo--alt-l,
.about__photo--alt-r {
aspect-ratio: 4 / 3;
}
/* ===== ПРОГРАММА ЛОЯЛЬНОСТИ ===== */
/* Небольшой блок: слева картинка карты, справа текст + кнопка.
Кремовый фон, чтобы визуально отделить от белого блока «О компании»
и следующей за ним карты. Раскладка зеркалит .about (2 колонки). */
.loyalty {
padding: 90px 0;
/* Фон задаётся классом чередования .sl-band--* (см. низ файла). */
border-top: 1px solid var(--color-line);
border-bottom: 1px solid var(--color-line);
}
.loyalty__inner {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 60px;
align-items: center;
}
.loyalty__visual { min-width: 0; }
.loyalty__card {
margin: 0;
border-radius: var(--radius-lg);
overflow: hidden;
/* Лёгкий наклон + тень — карта «лежит». Наклон статичный.
1.1.0: ховер-эффект убран по просьбе заказчика (картинка некликабельна,
выпрямление при наведении выглядело как дёрганье). Вместе с ним ушли
transition и will-change — анимировать больше нечего.
Если понадобится выровнять карту заодно с коллажем — достаточно
заменить строку ниже на `transform: none;`. */
transform: rotate(-2deg);
/* 1.1.1: drop-shadow вместо box-shadow.
box-shadow рисуется по прямоугольнику , а он равен ВСЕМУ холсту
картинки. Если у присланного PNG/WebP по краям есть прозрачные поля
(у макета заказчика — 36 px по бокам), тень уходила от самой карты и
читалась как пустая рамка вокруг неё.
drop-shadow строит тень по альфа-каналу, поэтому она обнимает карту
при любых полях — тема больше не зависит от того, как обрезан ассет.
border-radius/overflow оставлены намеренно: при наличии полей они режут
прозрачную область (визуально ничего не меняют), а если однажды зальют
непрозрачный прямоугольник без скруглений — скруглят его. */
filter:
drop-shadow(0 14px 22px rgba(var(--shadow-rgb), 0.24))
drop-shadow(0 4px 8px rgba(var(--shadow-rgb), 0.14));
}
.loyalty__card img {
width: 100%;
height: auto;
display: block;
}
.loyalty__copy { min-width: 0; }
.loyalty__text {
font-size: 18px;
line-height: 1.6;
color: var(--color-ink-soft);
margin: 24px 0 0;
}
.loyalty__actions {
margin-top: 32px;
}
/* ===== SHOPS / MAP ===== */
.shops {
padding: 90px 0;
/* Фон задаётся классом чередования .sl-band--* (см. низ файла). */
}
.shops__head { max-width: 720px; margin: 0 0 40px; }
.shops__map {
position: relative;
height: 540px;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--color-map-bg);
border: 2px solid var(--color-brand);
margin-bottom: 40px;
box-shadow: 0 12px 40px rgba(238, 125, 0, 0.1);
}
.shops__map-loader {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-ink-soft);
font-size: 15px;
z-index: 1;
}
/* Состояние «карта недоступна» (не настроен API-ключ). */
.shops__map--unavailable {
display: flex;
align-items: center;
justify-content: center;
background: var(--color-bg-soft);
border-style: dashed;
}
.shops__map-placeholder {
text-align: center;
max-width: 520px;
padding: 40px 24px;
color: var(--color-ink-soft);
}
.shops__map-placeholder p {
margin: 0 0 12px;
}
.shops__map-admin-hint {
margin-top: 16px;
padding: 12px 16px;
background: #fff8e5;
border: 1px solid #f0d278;
border-radius: var(--radius-md);
font-size: 13px;
color: #5d4a0e;
}
.shops__map-admin-hint em {
display: block;
margin-top: 6px;
font-size: 11px;
opacity: 0.75;
}
/* Тулбар над картой: дропдаун выбора города */
.shops__toolbar {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 18px;
flex-wrap: wrap;
}
.shops__city-filter {
display: inline-flex;
align-items: center;
gap: 10px;
}
/* Обёртка для select+overlay. Position relative чтобы оверлей позиционировался
относительно неё. */
.shops__city-filter-control {
position: relative;
display: inline-block;
}
/* Оверлей «···» поверх текста select'а — показывается когда центр карты ушёл
из области выбранного города. pointer-events: none пропускает клики на
нативный select под ним, поэтому юзер открывает дропдаун как обычно. */
.shops__city-filter-shifted {
position: absolute;
/* Позиция совпадает с областью текста select'а: 16px paddding слева,
38px справа под стрелочку. Высота — кроме самого select. */
top: 1.5px;
left: 1.5px;
right: 1.5px;
bottom: 1.5px;
display: flex;
align-items: center;
padding: 0 38px 0 16px;
background: var(--color-surface);
border-radius: 999px;
font: inherit;
font-weight: 600;
color: var(--color-ink-soft);
letter-spacing: 0.1em;
pointer-events: none;
user-select: none;
}
.shops__city-filter-label {
font-size: 13px;
font-weight: 600;
color: var(--color-ink-soft);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.shops__city-filter select {
appearance: none;
-webkit-appearance: none;
padding: 11px 38px 11px 16px;
border: 1.5px solid var(--color-line);
border-radius: 999px;
background-color: var(--color-surface);
background-image: var(--icon-chevron);
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 12px 8px;
font: inherit;
font-weight: 600;
color: var(--color-ink);
cursor: pointer;
min-width: 220px;
transition: border-color .15s ease, box-shadow .15s ease;
}
.shops__city-filter select:hover { border-color: var(--color-accent); }
.shops__city-filter select:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 4px rgba(238, 125, 0, 0.15);
}
/* Заголовок-контекст над списком — отражает что сейчас в видимой области */
.shops__list-head {
margin-bottom: 22px;
}
.shops__list-title {
font-family: var(--font-display);
font-style: italic;
font-weight: 700;
font-size: 26px;
line-height: 1.2;
color: var(--color-ink);
margin: 0 0 6px;
}
.shops__list-hint {
margin: 0;
font-size: 14px;
color: var(--color-ink-soft);
}
.shops__list-hint:empty { display: none; }
/* Сетка карточек */
.shops__items {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
align-content: start;
}
/* Кнопка «показать ещё» — центрирована под сеткой */
.shops__more-wrap {
display: flex;
justify-content: center;
margin-top: 32px;
}
.shops__more {
min-width: 220px;
}
/* ===== PROMO / ТЕКУЩИЕ АКЦИИ (слайдер) ===== */
.promo {
padding: 90px 0;
/* Фон задаётся классом чередования .sl-band--* (см. низ файла). */
border-bottom: 1px solid var(--color-line);
}
.promo__head {
text-align: center;
max-width: 680px;
margin: 0 auto 40px;
}
.promo__head .section-lead {
margin-left: auto;
margin-right: auto;
}
/* Слайдер = горизонтальная лента с scroll-snap. Свайп на тач-устройствах
работает нативно, JS нужен только для стрелок/точек/автопрокрутки. */
.promo__slider {
position: relative;
}
.promo__track {
display: flex;
gap: 0;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
border-radius: var(--radius-lg);
/* Прячем скроллбар — навигация через стрелки/точки/свайп. */
scrollbar-width: none;
-ms-overflow-style: none;
}
.promo__track::-webkit-scrollbar { display: none; }
.promo__slide {
flex: 0 0 100%;
scroll-snap-align: center;
/* Соотношение 8:3 — как рекомендованный размер макета 2400×900.
object-fit: cover страхует, если зальют картинку другого соотношения. */
aspect-ratio: 8 / 3;
background: var(--color-surface);
}
.promo__slide img,
.promo__link {
display: block;
width: 100%;
height: 100%;
}
.promo__slide img {
object-fit: cover;
border-radius: var(--radius-lg);
}
.promo__link { border-radius: var(--radius-lg); overflow: hidden; }
.promo__link:hover img { opacity: 0.96; }
/* Стрелки — поверх ленты, по краям, по вертикали центрированы. */
.promo__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 46px;
height: 46px;
border-radius: 999px;
background: var(--color-surface);
border: 1px solid var(--color-line);
color: var(--color-ink);
font-size: 26px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 14px rgba(var(--shadow-rgb), 0.15);
transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
z-index: 2;
}
.promo__nav:hover {
background: var(--color-surface);
color: var(--color-accent);
box-shadow: 0 6px 18px rgba(var(--shadow-rgb), 0.22);
}
.promo__nav--prev { left: 14px; }
.promo__nav--next { right: 14px; }
/* Стрелка-заглушка на краю (первый/последний слайд, если не зациклено) —
гасим визуально, но оставляем в потоке. JS ставит .is-disabled. */
.promo__nav.is-disabled {
opacity: 0.35;
pointer-events: none;
}
/* Точки под слайдером. */
.promo__dots {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 22px;
}
.promo__dot {
width: 10px;
height: 10px;
border-radius: 999px;
background: var(--color-line);
border: 1px solid var(--color-muted);
padding: 0;
transition: background .15s ease, transform .15s ease;
}
.promo__dot.is-active {
background: var(--color-accent);
border-color: var(--color-accent);
transform: scale(1.15);
}
/* Один слайд — не карусель: скрываем стрелки/точки, гасим snap. */
.promo--single .promo__nav,
.promo--single .promo__dots { display: none; }
/* Атрибут [hidden] на .btn не работает: .btn { display: inline-flex }
перебивает user-agent правило [hidden] { display: none }. Поэтому
используем явный класс с !important для надёжного скрытия. */
.is-hidden {
display: none !important;
}
.shop-card {
padding: 22px;
background: var(--color-surface);
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
cursor: pointer;
}
.shop-card:hover {
border-color: var(--color-accent);
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(238, 125, 0, 0.12);
}
.shop-card__title {
font-family: var(--font-display);
font-style: italic;
font-size: 20px;
font-weight: 700;
margin: 0 0 10px;
color: var(--color-red);
}
.shop-card__address {
font-size: 14px;
color: var(--color-ink);
margin: 0 0 12px;
line-height: 1.45;
font-weight: 500;
}
.shop-card__meta {
display: flex;
flex-direction: column;
gap: 5px;
font-size: 13px;
color: var(--color-ink-soft);
}
.shop-card__meta strong {
color: var(--color-ink);
font-weight: 600;
}
/* Строка с метро — flex-родитель, чтобы иконка ровно центрировалась
относительно базовой линии текста. Vertical-align хак из .shop-metro-icon
плохо работает на разных line-height; flex-решение надёжнее. */
.shop-card__meta-metro {
display: inline-flex;
align-items: center;
gap: 6px;
}
.shop-card__meta-metro .shop-metro-icon {
/* В flex-контексте сбрасываем vertical-align — он тут не нужен. */
vertical-align: 0;
margin-right: 0;
}
.shops__empty {
color: var(--color-muted);
font-size: 15px;
grid-column: 1 / -1;
text-align: center;
padding: 40px 0;
}
/* ===== FEEDBACK FORM ===== */
.feedback {
padding: 90px 0;
background: linear-gradient(135deg, var(--color-accent) 0%, #d96d00 100%);
color: #fff;
position: relative;
overflow: hidden;
}
.feedback::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 15% 80%, rgba(255, 198, 41, 0.3) 0%, transparent 35%),
radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 40%);
pointer-events: none;
}
.feedback .section-eyebrow { color: #fff8e6; }
.feedback .section-title { color: #fff; }
.feedback .section-title em { color: #ffe066; }
.feedback .section-lead { color: rgba(255, 255, 255, 0.88); }
.feedback__inner {
position: relative;
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 60px;
align-items: start;
}
.feedback__form {
background: var(--color-surface);
color: var(--color-ink);
padding: 40px;
border-radius: var(--radius-lg);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.15);
}
.feedback__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 16px;
}
.feedback__field {
display: block;
margin-bottom: 16px;
}
.feedback__row .feedback__field { margin-bottom: 0; }
.feedback__label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--color-ink-soft);
margin-bottom: 6px;
}
.feedback__label em {
color: var(--color-red);
font-style: normal;
}
.feedback__field input,
.feedback__field select,
.feedback__field textarea {
width: 100%;
padding: 13px 14px;
border: 1.5px solid var(--color-line);
border-radius: var(--radius-sm);
font: inherit;
background: var(--color-surface);
color: var(--color-ink);
transition: border-color .15s ease;
}
.feedback__field input:focus,
.feedback__field select:focus,
.feedback__field textarea:focus {
outline: none;
border-color: var(--color-accent);
}
.feedback__field textarea { resize: vertical; min-height: 110px; }
.feedback__honeypot {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.feedback__actions {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
margin-top: 22px;
}
.feedback__status {
font-size: 14px;
color: var(--color-ink-soft);
}
.feedback__status.is-success { color: #1f7a3e; }
.feedback__status.is-error { color: var(--color-red); }
.feedback__legal {
margin: 16px 0 0;
font-size: 12px;
color: var(--color-muted);
}
.feedback__legal a { color: var(--color-ink-soft); text-decoration: underline; }
/* ===== FOOTER ===== */
.site-footer {
padding: 64px 0 28px;
/* Собственные переменные, а не --color-ink: см. комментарий в :root. */
background: var(--color-footer-bg);
color: var(--color-footer-text);
}
.site-footer__grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 60px;
padding-bottom: 40px;
border-bottom: 1px solid rgba(255, 198, 41, 0.12);
}
.site-footer__brand {
font-family: var(--font-display);
font-style: italic;
font-weight: 700;
font-size: 30px;
color: var(--color-brand);
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
/* Логотип-картинка в футере (светлая версия). Чуть крупнее, чем в шапке —
в футере больше воздуха. */
.site-footer__logo-img {
height: 46px;
width: auto;
display: block;
}
.site-footer__logo-mark { color: var(--color-accent); font-size: 18px; font-style: normal; }
.site-footer__tagline {
color: rgba(255, 248, 230, 0.6);
font-size: 14px;
max-width: 320px;
}
.site-footer__col h4 {
font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
margin: 0 0 14px;
color: var(--color-brand);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.site-footer__col p { margin: 0 0 14px; font-size: 14px; line-height: 1.55; }
.site-footer__col a { color: #fff8e6; }
.site-footer__col a:hover { color: var(--color-brand); }
.site-footer__col .muted { color: rgba(255, 248, 230, 0.5); font-size: 13px; }
.site-footer__social {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.site-footer__social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255, 198, 41, 0.1);
font-size: 12px;
font-weight: 700;
transition: all .15s ease;
color: var(--color-brand);
}
.site-footer__social a:hover {
background: var(--color-brand);
/* Цвет фона футера, а не --color-ink: в тёмной схеме ink светлый и
текст на жёлтом кружке был бы нечитаем. */
color: var(--color-footer-bg);
}
.site-footer__bottom {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
padding-top: 24px;
font-size: 13px;
color: rgba(255, 248, 230, 0.5);
}
.site-footer__bottom a:hover { color: var(--color-brand); }
/* ===== Yandex Maps custom balloon (немного приводим к нашему стилю) ===== */
.ymaps-2-1-79-balloon__content,
.ymaps-balloon__content { font-family: var(--font-body) !important; }
.shop-balloon__title {
font-family: var(--font-display);
font-size: 15px;
font-weight: 600;
margin: 0 0 6px;
color: #2b1a0e; /* фиксировано — балун на светлом фоне Яндекса */
}
/* Внимание: балун рисует сам Яндекс, фон у него всегда светлый и схемой
темы не управляется. Поэтому цвета здесь фиксированные, а не через
--color-ink*: иначе в тёмной схеме текст балуна стал бы невидимым. */
.shop-balloon__row { font-size: 13px; color: #5a4738; margin: 2px 0; }
.shop-balloon__row strong { color: #2b1a0e; font-weight: 500; }
.shop-balloon__actions { margin: 10px 0 2px; }
.shop-balloon__map-link {
display: inline-block;
padding: 7px 14px;
background: var(--color-red);
color: #fff;
font-size: 13px;
font-weight: 600;
border-radius: 8px;
text-decoration: none;
line-height: 1.2;
}
.shop-balloon__map-link:hover { background: #a81a23; color: #fff; }
/* Иконка метро — буква M в круге, узнаваемая для русскоязычного пользователя.
Используется и в балуне на карте, и в карточке магазина в списке. */
.shop-metro-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--color-red);
color: #fff;
font-family: var(--font-display);
font-style: italic;
font-weight: 700;
font-size: 11px;
line-height: 1;
vertical-align: -3px;
margin-right: 4px;
flex-shrink: 0;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
.hero__inner,
.about__inner,
.loyalty__inner,
.feedback__inner { grid-template-columns: 1fr; gap: 40px; }
.hero__visual { max-width: 480px; }
/* Карту лояльности центрируем и ограничиваем ширину, чтобы на планшете
она не растягивалась на весь экран. */
.loyalty__visual { max-width: 440px; margin: 0 auto; }
/* На планшете карту выпрямляем — наклон на узкой колонке выглядит суетливо. */
.loyalty__card { transform: none; }
/* Правил про .about__photo здесь больше нет: с 1.1.0 коллаж выровнен
на всех разрешениях, а ховер-эффекты сняты. */
.site-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
/* Шапка: на ≤720 прячем десктопную навигацию и текстовый телефон,
показываем бургер. 720, а не 640, потому что на 640 шапка уже сильно
зажата (nav 3 пункта + телефон + лого), бургер появляется раньше. */
@media (max-width: 720px) {
.site-header__nav,
.site-header__phone { display: none; }
.site-header__burger { display: inline-flex; }
.site-header__inner { padding: 14px 20px; }
.site-header__logo-img { height: 34px; }
}
@media (max-width: 640px) {
.hero, .about, .promo, .loyalty, .shops, .feedback { padding: 56px 0; }
/* Лояльность на мобиле — в столбик: карта сверху, текст под ней. */
.loyalty__inner {
grid-template-columns: 1fr;
gap: 32px;
}
.loyalty__actions .btn { width: 100%; }
/* Стрелки на мобиле убираем — свайп нативный, плюс точки. Стрелки
на узкой картинке перекрывают контент баннера. */
.promo__nav { display: none; }
.promo__head { margin-bottom: 28px; }
/* Статистика на мобиле — 3 равных колонки, цифры мельче. */
.about__stats {
grid-template-columns: repeat(3, 1fr);
gap: 18px 12px;
margin-top: 28px;
}
.about__stats strong { font-size: 28px; }
.about__stats span { font-size: 12px; max-width: none; }
/* Коллаж на мобиле НЕ разворачиваем в столбик — иначе блок раздуется
на полтора экрана. Оставляем 2 колонки, gap чуть меньше. */
.about__collage { gap: 12px; }
.about__photo--main { aspect-ratio: 16 / 10; }
.feedback__row { grid-template-columns: 1fr; }
.feedback__form { padding: 24px; }
.site-footer__grid { grid-template-columns: 1fr; }
.shops__map { height: 400px; }
/* Дропдаун города на всю ширину — удобно тапать на мобиле. */
.shops__city-filter { width: 100%; }
.shops__city-filter select { flex: 1; min-width: 0; }
.shops__list-title { font-size: 22px; }
.shops__more { width: 100%; }
}