/* Блоки страниц — общее для всех своих страниц сайта.
 *
 * Зачем это появилось. К четвёртой странице выяснилось, что каждая
 * новая начинается с копирования одного и того же: тёмный первый экран
 * с бегущим узором лежал в четырёх файлах по тринадцать строк, полоса
 * заявки — в двух почти слово в слово, оболочка в трёх. Хуже того,
 * копировались не только стили, но и **починки**: сброс наследного
 * `li { margin-bottom }` и своя высота строки дописывались в каждый
 * файл заново, после того как дефект ловили на боевом. Такое забывается
 * ровно один раз — на следующей странице.
 *
 * Поэтому здесь: одна палитра, одна оболочка, один первый экран, одна
 * кнопка, одна полоса, одни плашки и коды. Страница держит только то,
 * чего нет больше нигде.
 *
 * Правило, по которому сюда что-то попадает: **повторилось трижды или
 * это починка**. Блоки впрок не заводим — их потом не отличить
 * от нужных.
 *
 * Всё вложено в `.ss-page`, которую носит `<main>` каждой своей
 * страницы. Одиночный класс кит Elementor перебивает (`.elementor-kit-6
 * h2` — две сущности против одной), и это проверено на подвале.
 */

.ss-page {
	/* Светлая сторона: холст страницы и карточки на нём. */
	--ss-bg: #f7f7f7;
	--ss-surface: #ffffff;
	--ss-ink: #101418;
	--ss-dim: #6b7780;
	--ss-line: rgba(16, 20, 24, 0.1);

	/* Тёмная: первый экран, карточки предложения, страница «Спасибо». */
	--ss-dark: #0e0e0e;
	--ss-dark-card: #171717;
	--ss-dark-ink: #ffffff;
	--ss-dark-muted: rgba(255, 255, 255, 0.66);
	--ss-dark-line: rgba(255, 255, 255, 0.14);
	--ss-dark-surface: rgba(255, 255, 255, 0.06);

	/*
	 * Акцент. `--ss-accent-ink` — тот же цвет, затемнённый до читаемого
	 * на белом: фирменная бирюза на светлом фоне не набирает контраста.
	 */
	--ss-accent: #25cbc2;
	--ss-accent-2: #1affd3;
	--ss-accent-ink: #0d8b84;

	/*
	 * Узор первого экрана. Файл лежит в медиатеке, а не в теме —
	 * правило сайта. Второй, неподвижный, подставляется тем, кто
	 * просил убрать движение.
	 */
	--ss-uzor: url("https://sergeev.studio/wp-content/uploads/2026/09/pattern-s_16x9_1920x1080_1px_animated.svg");
	--ss-uzor-tihiy: url("https://sergeev.studio/wp-content/uploads/2026/07/patt2-323232.svg");

	background: var(--ss-bg);
	color: var(--ss-ink);
	display: block;
	font-family: "Gotham Pro", system-ui, -apple-system, sans-serif;
	font-size: var(--ss-text);
	/*
	 * Своя высота строки обязательна. Кит задаёт её телу в em, а такая
	 * наследуется уже посчитанной — фиксированными пикселями на всё
	 * внутри. Из-за этого телефон кеглем 26 получал строку в 20 px,
	 * и ссылка выходила мельче пальца. Поймано на боевом, на контактах.
	 */
	line-height: 1.5;
	overflow-x: clip;
}

/*
 * В `legacy.css` с Elementor-эпохи висит `li { margin-bottom: 10px }`
 * на все списки сайта. Свои списки расставлены `gap`, и наследный
 * отступ к нему не схлопывается, а прибавляется: ряд плашек расходился
 * вдвое шире столбца. Гасим здесь, а не в legacy — там правило ещё
 * нужно спискам ста двадцати страниц конструктора.
 */
.ss-page li {
	margin-block-end: 0;
}

/* ---------------------------------------------------------------- оболочка */

/*
 * Ширина одна на весь сайт — та же линия, по которой стоят логотип
 * в шапке и в подвале. Величина в `tokens.css`, здесь только применение.
 */
.ss-page .ss-inner {
	box-sizing: border-box;
	inline-size: 100%;
	margin-inline: auto;
	/*
	 * Не `--ss-shell`, а оболочка плюс поля с обеих сторон: 1200 — это
	 * ширина **содержимого**, по ней выстроены шапка, подвал, работы,
	 * страницы плагинов, правовые и 404. Взяв одну только `--ss-shell`,
	 * страница оказывается на сорок пикселей уже всего остального сайта,
	 * и её текст не совпадает по вертикали с логотипом в шапке. Так
	 * и случилось с контактами, отзывами и «Спасибо» — поймано при
	 * сведении блоков.
	 */
	max-inline-size: calc(var(--ss-shell, 1200px) + var(--ss-gutter, 20px) * 2);
	padding-inline: var(--ss-gutter, 20px);
}

/* ------------------------------------------------------------ первый экран */

/*
 * Тёмный первый экран со скруглённым низом. Светлая страница зажата
 * между ним и тёмным подвалом и читается как разворот — приём, который
 * на сайте был до нас, у работ и отзывов.
 *
 * Поле сверху включает высоту шапки: она накладка, места на странице
 * не занимает, и оставить под неё воздух — забота страницы.
 */
.ss-page .ss-hero {
	background: linear-gradient(160deg, #111111 0%, #191919 55%, #111111 100%);
	border-end-end-radius: clamp(20px, 2.4vw, 36px);
	border-end-start-radius: clamp(20px, 2.4vw, 36px);
	color: var(--ss-dark-ink);
	isolation: isolate;
	overflow: hidden;
	padding-block: calc(var(--ss-header-h, 78px) + var(--ss-blok)) var(--ss-blok);
	position: relative;
}

.ss-page .ss-hero::before {
	background: var(--ss-uzor) no-repeat 50% 0 / cover;
	content: "";
	inset: 0;
	opacity: 0.5;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

@media (prefers-reduced-motion: reduce) {
	.ss-page .ss-hero::before {
		background-image: var(--ss-uzor-tihiy);
	}
}

/*
 * Последнему в первом экране — ноль снизу. Нижний отступ абзаца
 * не схлопывается с полем блока, а складывается с ним: лид добавлял
 * к сотне свои четырнадцать, и низ выходил заметно просторнее верха.
 * Померено, не на глаз.
 */
.ss-page .ss-hero .ss-inner > :last-child {
	margin-block-end: 0;
}

/* ------------------------------------------------------------------ кнопка */

.ss-page .ss-cta {
	align-items: center;
	background: linear-gradient(90deg, var(--ss-accent-2), var(--ss-accent));
	border-radius: 999px;
	color: #0b0b0b;
	display: inline-flex;
	font-size: 15px;
	font-weight: 500;
	gap: 10px;
	justify-content: center;
	min-block-size: 54px;
	padding-inline: 24px;
	text-decoration: none;
	text-transform: none;
	transition: transform 0.2s ease;
}

.ss-page .ss-cta:hover,
.ss-page .ss-cta:focus-visible {
	color: #0b0b0b;
}

/* ------------------------------------------------------------------ полоса */

/*
 * Полоса заявки — светлая карточка в четыре части: заголовок, пояснение,
 * кнопка, сноска. Стоит в конце списка работ, под отзывами и всюду, где
 * человек дочитал и решает.
 *
 * Не прижата к низу экрана намеренно: внизу и так живут пузыри
 * мессенджеров, кнопка чата и баннер cookie.
 */
.ss-page .ss-band {
	align-items: center;
	background: var(--ss-surface);
	border: 1px solid var(--ss-line);
	border-radius: 22px;
	display: grid;
	gap: clamp(16px, 2.4vw, 32px);
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	padding: clamp(22px, 2.6vw, 32px) clamp(22px, 3vw, 40px);
}

.ss-page .ss-band__nad {
	color: var(--ss-accent-ink);
	font-size: 13px;
	letter-spacing: 0.08em;
	margin: 0 0 8px;
	text-transform: uppercase;
}

.ss-page .ss-band__zag {
	color: var(--ss-ink);
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: var(--ss-h3);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0;
	text-transform: none;
}

.ss-page .ss-band__text {
	color: var(--ss-dim);
	line-height: 1.5;
	margin: 0;
	max-width: 32ch;
}

.ss-page .ss-band .ss-cta {
	inline-size: auto;
	margin: 0;
	padding-inline: 28px;
}

/* Сноска отделена чертой, а не просто полем: иначе она читается
   как продолжение кнопки. */
.ss-page .ss-band__snoska {
	border-inline-start: 1px solid var(--ss-line);
	color: var(--ss-dim);
	font-size: var(--ss-small);
	line-height: 1.4;
	margin: 0;
	padding-inline-start: clamp(16px, 2vw, 28px);
}

/* ------------------------------------------------------------ мессенджеры */

/*
 * Цвет канала взят не из чужих гайдлайнов, а из самих значков внутри
 * QR-кодов, которые загрузил заказчик: плашка окрашена ровно тем, чем
 * окрашен код рядом. У Max цвет не один — в знаке переход из синего
 * в фиолетовый, поэтому у него две величины расходятся.
 *
 * Канала нет в списке — плашка откатывается на фирменный акцент,
 * а не ломается.
 */
.ss-page [data-kanal="tg"] {
	--ss-kanal: #26a5e4;
	--ss-kanal-2: #41b0e7;
}

.ss-page [data-kanal="wa"] {
	--ss-kanal: #25de21;
	--ss-kanal-2: #40e23d;
}

.ss-page [data-kanal="max"] {
	--ss-kanal: #9b47dd;
	--ss-kanal-2: #36b6fd;
}

/* Список плашек. Переносится по строкам: на узком экране три канала
   в строку не встают. */
.ss-page .ss-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: clamp(18px, 2vw, 26px) 0 0;
	padding: 0;
}

/*
 * Плашка канала на светлом. Заливка вполсилы, а не в полную: в полную
 * зелёный WhatsApp оказывается соседом нашего акцента и начинает спорить
 * с кнопкой заявки за роль главного действия на странице.
 *
 * Первое объявление фона — запасное: `color-mix()` понимают не все
 * браузеры, и там, где не поняли, плашка останется белой, а не пустой.
 */
.ss-page .ss-pill {
	align-items: center;
	background: var(--ss-surface);
	background: linear-gradient(
		120deg,
		color-mix(in srgb, var(--ss-kanal-2, var(--ss-accent)) 16%, #ffffff),
		color-mix(in srgb, var(--ss-kanal, var(--ss-accent)) 16%, #ffffff)
	);
	border: 1px solid var(--ss-line);
	border-color: color-mix(in srgb, var(--ss-kanal, var(--ss-accent)) 45%, transparent);
	border-radius: 999px;
	color: var(--ss-ink);
	display: inline-flex;
	gap: 10px;
	min-block-size: 44px;
	padding-inline: 16px;
	text-decoration: none;
	transition: border-color 0.2s ease;
}

.ss-page .ss-pill:hover,
.ss-page .ss-pill:focus-visible {
	border-color: var(--ss-kanal, var(--ss-accent));
	color: var(--ss-ink);
}

/*
 * На тёмном фоне заливка цветом канала не нужна: значок и так цветной,
 * а плашка вполсилы на чёрном превратилась бы в мутное пятно. Цвет
 * канала здесь — только обводка.
 */
.ss-page .ss-pill--dark {
	background: var(--ss-dark-surface);
	border-color: color-mix(in srgb, var(--ss-kanal, var(--ss-accent)) 50%, transparent);
	color: var(--ss-dark-ink);
	transition: border-color 0.2s ease, background 0.2s ease;
}

.ss-page .ss-pill--dark:hover,
.ss-page .ss-pill--dark:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--ss-kanal, var(--ss-accent));
	color: var(--ss-dark-ink);
}

.ss-page .ss-pill img {
	display: block;
}

/* -------------------------------------------------------------------- коды */

/*
 * Коды занимают ширину колонки целиком, а не стоят фиксированными
 * квадратами: наводиться на них будут с телефона в руке, и каждый лишний
 * десяток пикселей — это лишний сантиметр расстояния, с которого ловит
 * камера. Колонок ровно столько, сколько живых каналов.
 *
 * Показываются только на широком экране — наводить на код с того же
 * телефона, на котором он открыт, нечем, а это почти триста килобайт
 * картинок. Прячет их страница, у которой свой брейкпойнт.
 *
 * Каждый код ещё и ссылка: кому удобнее писать с этого же компьютера,
 * откроет веб-версию мессенджера, а не станет искать телефон.
 */
.ss-page .ss-qr {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	list-style: none;
	margin: clamp(22px, 2.6vw, 32px) 0 0;
	max-inline-size: 700px;
	padding: 0;
}

.ss-page .ss-qr a {
	color: var(--ss-dim);
	display: grid;
	gap: 8px;
	justify-items: center;
	text-decoration: none;
}

/* Код печатается чёрным по белому — подложка обязательна, иначе
   на тёмном фоне его не считает камера. */
.ss-page .ss-qr img {
	background: var(--ss-surface);
	block-size: auto;
	border: 1px solid var(--ss-line);
	border-radius: 16px;
	inline-size: 100%;
	padding: 12px;
	transition: border-color 0.2s ease;
}

.ss-page .ss-qr span {
	font-size: var(--ss-small);
}

.ss-page .ss-qr a:hover img,
.ss-page .ss-qr a:focus-visible img {
	border-color: var(--ss-accent);
}

.ss-page .ss-qr a:hover span,
.ss-page .ss-qr a:focus-visible span {
	color: var(--ss-ink);
}

/*
 * Коды на тёмной странице. Рамка там не нужна — белая подложка сама
 * граница, — а подписи набраны светлым.
 */
.ss-page .ss-qr--dark a {
	color: var(--ss-dark-muted);
}

/*
 * Рамки нет вовсе, а не прозрачная: прозрачная всё равно занимает
 * пиксель с каждой стороны, поле кода становится на два уже, и весь
 * рисунок пересчитывается. На снимке это видно как подменённый код.
 */
.ss-page .ss-qr--dark img {
	border: 0;
}

.ss-page .ss-qr--dark a:hover span,
.ss-page .ss-qr--dark a:focus-visible span {
	color: var(--ss-dark-ink);
}

/* ---------------------------------------------------------- уже 1024 */

@media (max-width: 1024px) {
	.ss-page .ss-band {
		grid-template-columns: minmax(0, 1fr);
	}

	.ss-page .ss-band__snoska {
		border-inline-start: 0;
		padding-inline-start: 0;
	}

	.ss-page .ss-band .ss-cta {
		justify-self: start;
	}
}

/* ----------------------------------------------------------- уже 767 */

@media (max-width: 767px) {
	/* Поля вдвое меньше общих двадцати: экран узкий, и каждые десять
	   пикселей идут содержимому, а не пустоте. */
	.ss-page {
		--ss-gutter: 10px;
	}
}