/* ============================================================================
PROFiL landing page — styles
Источник макета: Figma «PROFiL_landing-page», фрейм `landing page_1920` (2:10)
Все цвета/отступы/шрифты берутся из tokens.css через var(--...).
Подход: mobile-first, метрики резиновые на всём диапазоне: одна непрерывная
кривая 375 → 1024 → 1920, поэтому на границах ничего не прыгает. Нижний
участок (--fluid-s) задан в :root, верхний (--fluid) — в десктопном блоке.
Медиа-запросы переключают только раскладку. Контрольные точки —
до 768px — мобильный (базовые правила)
768…1023px — планшет (@media min-width: 768px), только раскладка:
колонки, коллаж, столбик индикаторов слайдера
от 1024px — десктоп (@media min-width: 1024px), резиновый:
метрики плавно интерполируются от 1024 к 1920 и на 1920
совпадают с макетом 1:1. Выше 1920 контент замирает и
центрируется — max-width: var(--layout-page-width).
Формулы собраны в начале десктопного блока (--fluid).
от 1340px — шапка разворачивается в ряд (@media min-width: 1340px).
Единственная оставшаяся ступенька: ряд «логотип + меню +
телефон + кнопка» не помещается по ширине раньше.
Раскладка построена на Flexbox/Grid. position: absolute применяется только
там, где в макете элементы намеренно наложены друг на друга (фоны, скримы,
декоративные круги, коллаж) — auto-layout в этих местах отсутствует.
========================================================================== */
/* ------------------------------- reset ----------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-family-base);
font-size: var(--font-size-md);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
color: var(--color-text);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, figure, ol, ul { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; letter-spacing: inherit; }
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 3px;
}
/* ------------------------- служебные утилиты ----------------------------- */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* Прячем через transform, а не через top: calc(-1 * токен), — смещение
на -100% всегда равно реальной высоте ссылки, независимо от того, как
мелкий --font-size-3xl на узких экранах (иначе на 375…1150px ссылка
выше своего же отступа, и снизу торчит полоска фона). */
.skip-link {
position: absolute;
top: 0;
left: var(--space-2);
z-index: 100;
padding: var(--space-2) var(--space-3);
font-size: var(--font-size-xs);
color: var(--color-text-inverse);
background: var(--color-accent);
transform: translateY(-100%);
transition: transform 0.15s ease;
}
.skip-link:focus { transform: translateY(var(--space-2)); }
/* ------------------- резиновая шкала до 1024px ---------------------------
Нижний участок той же кривой, что описана в шапке файла: от макета 375
до значений, с которых начинается десктоп. Благодаря этому на границе
1023/1024 ничего не прыгает, а планшет 768…1023 перестал быть ступенькой
с фиксированными метриками.
Крупные кегли в двух макетах разные (64/48/40 против 28/24/20), поэтому
они текучие. Мелкие — одинаковые в обоих (20/18/16/14/12) и остаются
макетными на всех ширинах: там нечего интерполировать, а занижать их
ради «пропорций» значило бы ухудшить читаемость основного текста.
----------------------------------------------------------------------- */
:root {
--fluid-s: calc(clamp(375px, 100vw, 1024px) - 375px); /* путь 0…649px */
--layout-gutter: calc(20px + 28 * var(--fluid-s) / 649);
--space-section: calc(32px + 32 * var(--fluid-s) / 649);
--font-size-3xl: calc(28px + 8 * var(--fluid-s) / 649);
--font-size-2xl: calc(24px + 8 * var(--fluid-s) / 649);
--font-size-xl: calc(20px + 6 * var(--fluid-s) / 649);
}
/* Общий контейнер: боковой отступ = gutter из токенов */
.site-header__inner,
.standards,
.advantages,
.sizes__inner,
.elements,
.prices__inner,
.calc__inner,
.soffits,
.site-footer > * {
padding-inline: var(--layout-gutter);
}
/* --------------------------- типографика --------------------------------- */
.section-title {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
text-transform: uppercase;
}
.section-title--accent { color: var(--color-accent); }
.section-title--light { color: var(--color-text-inverse); }
.section-subtitle {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
text-transform: uppercase;
}
.section-subtitle--accent { color: var(--color-accent); }
.lead {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-regular);
}
.rule { width: 100%; height: 1px; }
/* Логотип-маска: у макеті це біла заливка, обрізана альфа-каналом PNG,
а не саме зображення — тому mask-image, а не ![]()
. */
.logo-mask {
display: block;
background-color: var(--color-white);
mask-image: url("../imgs/logo-mark.png");
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
-webkit-mask-image: url("../imgs/logo-mark.png");
-webkit-mask-size: contain;
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
}
/* Иконки внутри кнопок — тоже маска, а не ![]()
: заливка берётся из
currentColor, поэтому при наведении иконка перекрашивается вместе с текстом.
Один ассет закрывает оба состояния — отдельный «белый» файл не нужен.
mask-size: 100% 100% повторяет поведение исходных SVG (preserveAspectRatio="none"). */
.icon-mask {
display: block;
flex: none;
background-color: currentColor;
mask-size: 100% 100%;
mask-position: center;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
}
.icon-mask--calculator {
width: 18px; height: 16px;
mask-image: url("../imgs/icon-calculator.svg");
-webkit-mask-image: url("../imgs/icon-calculator.svg");
}
.icon-mask--viber {
width: 24px; height: 24px;
mask-image: url("../imgs/icon-viber.svg");
-webkit-mask-image: url("../imgs/icon-viber.svg");
}
.icon-mask--telegram {
width: 24px; height: 24px;
mask-image: url("../imgs/icon-telegram.svg");
-webkit-mask-image: url("../imgs/icon-telegram.svg");
}
/* Ассет направлен влево — так он и нужен кнопке «назад»,
а «вперёд» отражает его по горизонтали */
.icon-mask--arrow {
width: 7px; height: 13px;
mask-image: url("../imgs/icon-arrow-right.svg");
-webkit-mask-image: url("../imgs/icon-arrow-right.svg");
}
/* Бургер: закрытое состояние (2:710) — две линии, открытое (2:905) — крест.
Обе иконки в макете 16×16 с линией в 1px, поэтому это не два ассета,
а один элемент из двух линий: так переход между состояниями анимируется.
Линия длиной 16px, повёрнутая на 45°, даёт ровно тот крест, что в макете. */
.burger {
position: relative;
display: block;
flex: none;
width: 16px; height: 16px;
}
.burger span {
position: absolute;
left: 0;
top: 50%;
width: 100%; height: 1px;
background: currentColor;
transition: transform 0.3s ease;
}
.burger span:first-child { transform: translateY(-3px); }
.burger span:last-child { transform: translateY(1px); }
/* Открытое окно превращает линии в крест. В меню это переход из бургера,
в попапах — просто способ нарисовать тот же крестик 16×16 одним
компонентом: он собирается вместе с появлением окна. */
.is-open .burger span:first-child { transform: rotate(45deg); }
.is-open .burger span:last-child { transform: rotate(-45deg); }
/* ------------------------------ кнопки ----------------------------------- */
/* Наведение по макету `elements` (5:597) — не затухание, а обмен местами
заливки и фона: сплошная кнопка становится контурной и наоборот.
Прозрачная обводка заложена в базовое состояние, иначе появление рамки
при наведении сдвигало бы кнопку на пол-пикселя. */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--padding-cta);
border: var(--border-width-hairline) solid transparent;
border-radius: var(--radius-base);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
text-transform: uppercase;
text-align: center;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn--accent {
color: var(--color-accent-text);
background: var(--color-accent);
}
.btn--accent:hover {
color: var(--color-accent);
background: var(--color-white);
border-color: var(--color-accent);
}
.btn--outline-accent {
color: var(--color-accent);
background: var(--color-white);
border-color: var(--color-accent);
}
.btn--outline-accent:hover {
color: var(--color-accent-text);
background: var(--color-accent);
border-color: transparent;
}
/* Светлой кнопки в макете состояний нет. Она встречается только на оранжевом
фоне, поэтому обращение достроено по той же логике: заливка уходит в фон
секции, текст и обводка становятся белыми. */
.btn--light {
color: var(--color-accent);
background: var(--color-white);
}
.btn--light:hover {
color: var(--color-text-inverse);
background: var(--color-accent);
border-color: var(--color-white);
}
/* Контурная кнопка на оранжевом фоне — встречается только в мобильном меню
(2:916): заливка совпадает с фоном, обводка и текст белые */
.btn--outline-light {
color: var(--color-text-inverse);
background: var(--color-accent);
border-color: var(--color-white);
}
.btn--outline-light:hover {
color: var(--color-accent);
background: var(--color-white);
}
/* Кнопки фиксированной ширины 343px с узким внутренним отступом */
.btn--fixed {
width: 100%;
max-width: 343px;
padding: var(--padding-cta-compact);
}
header .btn--fixed {
max-width: 100%;
}
.btn__glyph { flex: none; }
.icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 49px; height: 49px;
flex: none;
color: var(--color-accent); /* задаётся явно: в футере унаследовался бы белый */
background: var(--color-white);
border: var(--border-width-hairline) solid var(--color-accent);
border-radius: var(--radius-base);
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.icon-btn path {
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
/* В макете состояний кнопка показана на белом фоне, и обводка при наведении
убирается. В вёрстке она встречается только в футере — на оранжевом, где
заливка совпала бы с фоном и кнопка исчезла бы. Поэтому обводка не убирается,
а становится белой — так же, как у .btn--light рядом. */
.icon-btn:hover {
color: var(--color-accent-text);
background: var(--color-accent);
border-color: var(--color-white);
}
.icon-btn:hover path {
fill: var(--color-white);
}
/* Уменьшенный вариант — в мобильном меню (2:925) */
.icon-btn--sm { width: 36px; height: 36px; }
.icon-btn--sm .icon-mask { width: 22px; height: 22px; }
/* ============================== СЛАЙДЕРЫ ================================= */
/* Общая механика двух слайдеров: переваг (.advantages) и прикладів розрахунку
(.prices). Поведение задаётся классами на самой секции — их можно менять
в разметке или на живой странице:
scroll-on колесо листает слайды, пока секция занимает экран
autoplay-on слайды листаются сами (примечание дизайнера 16:137)
orientation-y слайд уходит вверх, следующий приходит снизу
orientation-h слайди їдуть по горизонталі каруселлю (тільки .prices)
Вертикальный слайдер (orientation-y): слайды лежат в одной ячейке грида
и сменяются кросс-фейдом с небольшим уходом в сторону — контент у них
разной высоты, и при честном сдвиге на 100% высота секции скакала бы
от слайда к слайду.
Горизонтальный слайдер (orientation-h): это настоящая карусель — слайды
лежат в ряд внутри .slider-track (обёртка есть только в разметке .prices)
и трек целиком едет transform: translateX. В любой момент виден максимум
один целый слайд, второй уходит за пределы секции — без наложения.
Перетягивание пальцем/мышью двигает трек в реальном времени (slider.js,
Pointer Events), а не просто триггерит переключение по порогу. */
.orientation-y { --slide-shift-x: 0px; --slide-shift-y: 40px; }
.slider-viewport {
display: grid;
/* Без перехвата листание пальцем идёт поперёк прокрутки, поэтому вертикальные
жесты остаются странице. При scroll-on значение не переопределяем: `none`
запретил бы прокрутку и на краях слайдера, то есть из секции нельзя было бы
выйти свайпом. */
touch-action: pan-y;
}
.scroll-on .slider-viewport { touch-action: auto; }
/* Горизонтальной карусели палец нужен только по горизонтали — вертикаль
всегда остаётся странице, поэтому pan-y не снимается даже при scroll-on
(иначе браузер перехватил бы жест раньше, чем до него доберётся JS) */
.orientation-h .slider-viewport {
touch-action: pan-y;
overflow: hidden;
}
/* Смещение по умолчанию — вертикальное: секция без класса ориентации
ведёт себя как orientation-y */
.slide {
grid-area: 1 / 1;
opacity: 0;
transform: translate(var(--slide-shift-x, 0px), var(--slide-shift-y, 40px));
transition: opacity 0.5s ease, transform 0.5s ease;
}
/* Показанные слайды уходят в обратную сторону, будущие ждут с исходной */
.slide.is-past {
transform: translate(
calc(-1 * var(--slide-shift-x, 0px)),
calc(-1 * var(--slide-shift-y, 40px))
);
}
.slide.is-current {
opacity: 1;
transform: none;
}
/* inert снимает неактивные слайды с фокуса и с читалки, но не прячет их от
мыши — поэтому клики гасим отдельно */
.slide[inert] { pointer-events: none; }
/* ------------------------- горизонтальная карусель ------------------------ */
/* .slider-track — ряд слайдов шириной 100% каждый; flex-shrink: 0 не даёт
им сжаться, поэтому ряд шире контейнера и торчащие слайды обрезает
overflow: hidden у .slider-viewport. translateX(-100%) от ширины самого
трека (=ширине одного слайда) сдвигает ровно на один слайд — не нужно
знать точную ширину в пикселях. Сдвиг анимирует transform, а не opacity:
слайды остаются непрозрачными и просто уезжают за край. */
.slider-track {
display: flex;
width: 100%;
transition: transform 0.5s ease;
}
/* Перекрывает базовые .slide (стек/кросс-фейд) — карусели они не нужны */
.slider-track .slide {
grid-area: auto;
flex: 0 0 100%;
min-width: 0;
opacity: 1;
transform: none;
transition: none;
}
/* Круглая стеклянная кнопка со стрелкой (24:177). В макете нарисована только
«вперёд»; «назад» — её зеркало, без неё к предыдущему слайду не вернуться
мышью. Ассет стрелки тот же, что у шагов расчёта, и смотрит влево. */
.slider-arrow {
display: grid;
place-items: center;
width: 48px; height: 48px;
padding: 0;
color: var(--color-text-inverse);
background: var(--color-cream-03);
border: var(--border-hairline-light);
border-radius: 100px;
backdrop-filter: blur(var(--blur-glass));
-webkit-backdrop-filter: blur(var(--blur-glass));
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.slider-arrow:hover {
color: var(--color-accent);
background: var(--color-white);
}
.slider-arrow--next .icon-mask { transform: scaleX(-1); }
/* ============================== HEADER =================================== */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: var(--color-bg);
}
.site-header__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-2) var(--space-4);
max-width: var(--layout-page-width);
min-height: 52px;
margin-inline: auto;
padding-block: var(--space-2);
}
/* Ассет логотипа — квадрат 816×816; у макеті з нього беруть центральну
горизонтальну смугу, тому object-fit: cover, а не масштабування. */
.site-header__logo img {
width: calc(120px + 30 * var(--fluid-s) / 649);
height: calc(42px + 10 * var(--fluid-s) / 649);
object-fit: cover;
}
/* До 1024px шапка свёрнута: остаются логотип и кнопка «Меню» (макет 2:707),
а навигация с контактами переезжают в модальное меню. Контакты прячутся
в своём же блоке ниже — иначе он перебил бы display обратно на flex. */
.site-nav { display: none; }
.site-header__menu {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-base);
text-transform: uppercase;
color: var(--color-accent);
background: none;
border: 0;
cursor: pointer;
transition: color 0.15s ease;
}
.site-header__menu:hover { color: var(--color-text); }
.site-nav__list {
display: flex;
align-items: center;
gap: var(--space-4);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
white-space: nowrap;
}
/* Пункт меню: тёмный → оранжевый */
.site-nav__list a { transition: color 0.15s ease; }
.site-nav__list a:hover { color: var(--color-accent); }
.site-header__contacts {
display: none; /* до 1024px телефон и кнопка живут в модальном меню */
align-items: center;
gap: var(--space-4);
}
/* Телефон в шапке: оранжевый → тёмный, обратно пункту меню */
.site-header__phone {
display: none;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
white-space: nowrap; /* в макете номер всегда в одну строку, как в футере */
color: var(--color-accent);
transition: color 0.15s ease;
}
.site-header__phone:hover { color: var(--color-text); }
.site-header__contacts .btn { padding: var(--space-2) var(--space-3); }
/* =============================== HERO ==================================== */
.hero {
position: relative;
display: flex;
align-items: flex-end;
min-height: calc(420px + 220 * var(--fluid-s) / 649);
overflow: hidden;
background: var(--color-bg-inverse);
}
.hero__bg {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
.hero__badge {
position: absolute;
top: 8%;
right: var(--layout-gutter);
width: calc(96px + 36 * var(--fluid-s) / 649);
height: calc(96px + 36 * var(--fluid-s) / 649);
object-fit: cover;
}
/* Затухание фото в белый фон страницы — как в макете (310px снизу) */
.hero__fade {
position: absolute;
inset-inline: 0;
bottom: 0;
height: 32%;
background: var(--gradient-hero-fade);
}
.hero__content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-5);
width: 100%;
max-width: var(--layout-page-width);
margin-inline: auto;
padding: var(--space-6) var(--layout-gutter);
}
.hero__title {
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
text-transform: uppercase;
color: var(--color-accent);
}
/* ============================= STANDARDS ================================= */
.standards {
display: grid;
gap: var(--space-6);
max-width: var(--layout-page-width);
margin-inline: auto;
padding-block: var(--space-section);
}
.standards__text {
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.standards__gallery {
display: grid;
gap: var(--space-2);
}
.standards__img {
width: 100%;
height: auto;
object-fit: cover;
border-radius: var(--radius-base);
}
/* У макеті це фото збільшене до 322 % і зсунуте — обрізаємо обгорткою.
Той самий кадр із тим самим збільшенням стоїть на 6-му слайді переваг
(.slide__specks), тому обидва місця беруть одні й ті самі відсотки. */
.standards__crop {
position: relative;
overflow: hidden;
}
.standards__crop img,
.slide__specks img {
position: absolute;
width: 322.52%;
height: 195.68%;
left: -96.46%;
top: -95.68%;
max-width: none;
object-fit: cover;
}
/* ============================= ADVANTAGES ================================ */
/* Слайдер переваг: 6 слайдов. Общая механика — в разделе «СЛАЙДЕРЫ» выше,
здесь только раскладка. Ширины колонок вынесены в переменные — по ним же
выравнивается внутренняя сетка каждого слайда. */
.advantages {
--slide-media: 560px;
--slide-text: var(--layout-column-text);
display: grid;
gap: var(--space-6);
max-width: var(--layout-page-width);
margin-inline: auto;
padding-block: var(--space-section);
}
/* Индикаторы. На мобильном это полоса прогресса (закрашены пройденные),
с планшета — вертикальный столбик с одним активным штрихом: так в макете. */
.slider-dots {
display: flex;
flex-direction: row;
justify-content: center;
gap: 4px;
/* Ряд из шести штрихов по 50px требует 320px. Без min-width: 0 ячейка
сетки не даёт ему сжаться ниже этой ширины, и на экранах уже 360px
страница получала горизонтальную прокрутку. */
min-width: 0;
}
.slider-dots button {
flex: 0 1 50px;
width: 50px; height: 2px;
padding: 0;
border: 0;
background: var(--color-bg-muted);
cursor: pointer;
transition: background-color 0.3s ease, width 0.3s ease;
}
.slider-dots button.is-filled { background: var(--color-accent); }
/* ------------------------------- слайды ---------------------------------- */
.advantages .slide {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
/* Подпись цвета стоит над кадром, поэтому квадратная область — не сама figure,
а обёртка внутри неё; она же держит систему координат для наложений */
.slide__figure {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
}
.slide__media {
position: relative;
display: block;
width: min(270px, 72vw);
aspect-ratio: 1;
}
.slide__media > img {
width: 100%; height: 100%;
object-fit: cover;
}
/* Кадры слайдов 3, 5 и 6 в макете смещены и увеличены — обрезаем обёрткой */
.slide__crop {
position: absolute;
inset: 0;
display: block;
overflow: hidden;
}
.slide__crop img {
position: absolute;
max-width: none;
object-fit: cover;
}
.slide--funnel .slide__crop img {
width: 82.27%; height: 105.76%;
left: 8.87%; top: -2.75%;
}
.slide--colors .slide__crop img {
width: 74.2%; height: 95.39%;
left: 12.9%; top: 2.42%;
}
.slide--warranty .slide__crop img {
width: 118.73%; height: 152.64%;
left: -14.55%; top: -30.67%;
}
/* Россыпь рамок за трубой — тот же кадр, что в секции «стандарти» */
.slide__specks {
position: absolute;
left: -43.9%; top: -6.8%;
width: 91.07%; height: 106.07%;
display: block;
overflow: hidden;
}
/* Селектор с потомком: иначе знак гарантии перебивался бы правилом
основного кадра `.slide__media > img` и растянулся бы на весь квадрат */
.slide__media > .slide__badge {
position: absolute;
left: 48.21%; top: 19.82%;
width: 35.71%; height: 35.71%;
object-fit: contain;
}
.slide__body {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.advantages__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
/* От текста до кнопок шаг вдвое крупнее, чем между строками самого текста */
margin-top: var(--space-2);
}
/* В макете 375 обе кнопки занимают всю ширину колонки */
.advantages__actions .btn { width: 100%; max-width: 100%;}
/* --------------------------- переключатель цветов ------------------------- */
.colors {
/* Единичный шаг макета, в шкалу --space-* не попадает */
--colors-gap: 9px;
display: flex;
flex-direction: column;
gap: 5px;
}
.colors__name { font-size: var(--font-size-2xs); }
.colors__list {
display: flex;
flex-wrap: wrap;
gap: var(--colors-gap);
}
/* Образец цвета изделия: прозрачная рамка в базовом состоянии, чтобы выбор
не сдвигал соседей — та же логика, что у кнопок */
.color {
display: block;
width: 48px; height: 48px;
padding: 0;
border: var(--border-width-selected) solid transparent;
cursor: pointer;
transition: border-color 0.15s ease;
}
.color[aria-pressed="true"] { border-color: var(--color-accent); }
.color--brick { background: var(--color-pipe-brick); }
.color--graphite { background: var(--color-pipe-graphite); }
.color--brown { background: var(--color-pipe-brown); }
.color--red { background: var(--color-pipe-red); }
.color--black { background: var(--color-pipe-black); }
/* Белый образец на белом фоне различим только по серому контуру;
у выбранного образца серую рамку перекрывает оранжевая (aria-pressed) */
.color--white { border-color: var(--color-bg-muted); }
.slide__color-title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
text-transform: uppercase;
text-align: center;
color: var(--color-accent);
}
/* =============================== SIZES =================================== */
.sizes {
position: relative;
overflow: hidden;
background: var(--color-bg-inverse);
}
.sizes__bg {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
/* Скрим + стеклянный слой поверх фото — два наложенных слоя из макета */
.sizes__scrim {
position: absolute;
inset: 0;
background: var(--color-overlay);
backdrop-filter: blur(var(--blur-glass));
-webkit-backdrop-filter: blur(var(--blur-glass));
border: var(--border-hairline-light);
}
.sizes__inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: var(--space-6);
max-width: var(--layout-page-width);
margin-inline: auto;
padding-block: var(--space-section);
color: var(--color-text-inverse);
}
.sizes__meta {
display: flex;
flex-direction: column;
gap: var(--space-2);
max-width: var(--layout-column-text);
}
.sizes__caption {
font-size: var(--font-size-md);
color: var(--color-cream-70);
}
/* У макеті 375 картки вже стоять по дві в ряд (2:788) — це не десктопна
розкладка, а мобільна за замовчуванням, тому колонки задані тут,
а не з 768px. */
.sizes__list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-6);
}
.size-card {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.size-card__value {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
}
/* Кольцо-подсветка лежит под схемой — наложение, как в макете */
.size-card__visual {
position: relative;
display: grid;
place-items: center;
}
.size-card__ring {
position: absolute;
left: 20%;
width: 150px; height: 150px;
pointer-events: none;
}
.size-card__img {
position: relative;
width: 100%;
max-width: 516px;
height: auto;
object-fit: contain;
}
.sizes__footnote {
display: flex;
align-items: flex-start;
gap: var(--space-3);
max-width: var(--layout-column-text);
}
.sizes__mark { width: 16px; height: 20px; flex: none; display: none;}
.sizes__footnote p { font-size: var(--font-size-md); }
/* ============================== ELEMENTS ================================= */
.elements {
display: grid;
gap: var(--space-6);
max-width: var(--layout-page-width);
margin-inline: auto;
padding-block: var(--space-section);
}
.elements__text {
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.elements__figure img {
width: 100%;
height: auto;
object-fit: contain;
}
/* =============================== PRICES ================================== */
/* Слайдер прикладів розрахунку: 3 слайда. Общая механика — в разделе
«СЛАЙДЕРЫ», здесь раскладка. */
.prices {
/* Отступ стрелок от края: в макете 1920 стрелка стоит в 88px от края,
то есть чуть внутри бокового поля страницы */
--slider-arrow-inset: var(--layout-gutter);
position: relative;
overflow: hidden;
background: var(--color-bg-inverse);
}
/* Під кожен data-bg слайду лежить свій ![]()
: усі в одній комірці внахлест,
видимий вмикається class .is-current (slider.js), решта чекають прозоро
позаду. Швидкість переходу — як у .slider-track, щоб фон і карусель
рухались в один такт. */
.prices__bg {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.5s ease;
}
.prices__bg.is-current { opacity: 1; }
.prices__scrim {
position: absolute;
inset: 0;
background: var(--color-overlay);
}
.prices__inner {
position: relative;
z-index: 1;
display: grid;
gap: var(--space-6);
max-width: var(--layout-page-width);
margin-inline: auto;
padding-block: var(--space-section);
color: var(--color-text-inverse);
}
/* Меняется весь расчёт целиком: параметры, стоимость и состав комплекта.
Заголовок секции остаётся на месте, поэтому лежит вне слайдов. Фон тоже
вне слайдов (.prices__bg, кросс-фейд по data-bg — см. «СЛАЙДЕРЫ» и
slider.js), но переключается синхронно с ними. */
.prices .slide {
display: grid;
gap: var(--space-6);
align-content: start;
}
/* В макете 375 кнопка стоит под составом комплекта, а на десктопе —
справа от стоимости, поэтому порядок задаётся раскладкой, а не разметкой */
.prices__cta { order: 1; }
/* Стрелка в макете одна и стоит у правого края на середине высоты. Вторая
(«назад») ставится рядом с ней, а не у левого края: слева весь текст расчёта
прижат к боковому полю, и кнопка легла бы прямо на стоимость.
В макете 375 стрелок нет — там свайп, поэтому на мобильном они скрыты. */
.prices .slider-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
display: none;
}
.prices .slider-arrow--prev {
right: calc(var(--slider-arrow-inset) + 48px + var(--space-2));
}
.prices .slider-arrow--next { right: var(--slider-arrow-inset); }
.prices__params { position: relative; max-width: var(--layout-column-text); }
/* Навігація прикладами розрахунку (2:134, «slidre») — не декоративна
картинка, а 3 крапки-перемикачі, замасковані під точки макета:
d=4px, gap=2px, разом 16×4px, як у вихідному asset. */
.prices__thumb {
position: absolute;
top: 44px; right: 0;
display: flex;
align-items: center;
gap: 2px;
}
.prices__thumb button {
width: 4px; height: 4px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--color-white-70);
cursor: pointer;
transition: background-color 0.15s ease;
}
.prices__thumb button[aria-current="true"] { background: var(--color-white); }
.prices__label {
margin-top: var(--space-2);
font-size: var(--font-size-md);
color: var(--color-text-muted);
}
.prices__value,
.prices__amount {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-base);
}
.prices__value sup { font-size: 0.645em; }
.prices__total {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
/* Стеклянная панель со составом комплекта */
.parts-panel {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-3);
background: var(--color-bg-glass);
border: var(--border-hairline-light);
backdrop-filter: blur(var(--blur-glass));
-webkit-backdrop-filter: blur(var(--blur-glass));
}
/* В макете 375 подпись панели прижата влево, на десктопе — по центру */
.parts-panel__title {
font-size: 10px;
color: var(--color-text-muted);
}
/* В макете элементы стоят плотной группой по центру, а не растянуты по ширине
панели. На мобильном шесть штук не помещаются и панель прокручивается вбок
пальцем (примечание дизайнера 16:140) — отсюда overflow-x вместо переноса.
`safe center` нужен, чтобы при нехватке места не срезало первый элемент. */
.parts-panel__list {
display: flex;
justify-content: safe center;
gap: var(--space-4);
overflow-x: auto;
scrollbar-width: none;
}
.parts-panel__list::-webkit-scrollbar { display: none; }
.part {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-1);
flex: none;
}
.part img {
width: calc(42px + 14 * var(--fluid-s) / 649);
height: calc(42px + 14 * var(--fluid-s) / 649);
object-fit: contain;
}
.part span {
font-size: var(--font-size-2xs);
color: var(--color-text-muted);
text-align: center;
}
/* ========================== FORM / CALCULATOR ============================ */
/* .calc — грид с одной ячейкой: .calc__inner и .calc__thanks лежат друг на
друге (обе grid-area: 1 / 1), высота секции берётся по более высокому из
них (обычный grid auto-sizing). position: absolute здесь не подошёл бы:
inset: 0 жёстко привязывает высоту перекрытия к высоте секции, и если
тексту «Заявку прийнято» вдруг понадобится больше места, чем занимала
форма, — его бы обрезало или он вылез бы поверх соседней секции.
grid-template-columns фиксирует ширину колонки в 100% секции: без него
единственная auto-колонка местами схлопывалась бы по содержимому. */
.calc {
background: var(--color-accent);
display: grid;
grid-template-columns: minmax(0, 1fr);
}
.calc__inner {
grid-area: 1 / 1;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-6);
max-width: var(--layout-page-width);
margin-inline: auto;
padding-block: var(--space-section);
}
.calc__title {
max-width: var(--layout-column-heading);
text-align: left;
}
/* Три шага расчёта */
.steps {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
gap: var(--space-2);
}
.step {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
width: 98px;
}
/* Разделительная стрелка — оформление, а не шаг списка, поэтому ::after.
Ассет направлен влево, в макете он отражён. */
.step:not(:last-child)::after {
content: "";
position: absolute;
top: 21px;
right: -24px;
width: 24px; height: 24px;
background-image: url("../imgs/icon-arrow-right.svg");
background-repeat: no-repeat;
background-position: center;
background-size: 8px 14px;
transform: scaleX(-1);
}
.step__img { width: 98px; height: 65px; object-fit: contain; }
.step__label {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-light);
color: var(--color-text-inverse);
text-align: center;
}
/* Промежутки между шагами оставляют место под стрелку-разделитель */
.steps { column-gap: var(--space-5); }
/* Коллаж третьего шага: детали намеренно наложены — absolute оправдан */
.step__collage {
position: relative;
display: block;
width: 84px; height: 65px;
}
.step__collage img {
position: absolute;
object-fit: contain;
}
.step__collage img:nth-child(1) { width: 35px; height: 35px; left: 42px; top: 35px; }
.step__collage img:nth-child(2) { width: 32px; height: 32px; left: 27px; top: 0; }
.step__collage img:nth-child(3) { width: 42px; height: 42px; left: 0; top: 19px; }
.step__collage-mark {
position: absolute;
width: 16px; height: 20px;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
}
.calc__form {
display: grid;
gap: var(--space-4);
width: 100%;
max-width: 1069px;
}
.field { margin: 0; }
.field input {
width: 100%;
padding: var(--padding-cta-compact);
font-family: inherit;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
text-transform: uppercase;
text-align: center;
color: var(--color-text);
background: var(--color-white);
border: var(--border-hairline-light);
border-radius: var(--radius-base);
}
.field input::placeholder {
color: var(--color-text);
opacity: 1;
}
.field--submit .btn { max-width: none; }
/* Ошибка валидации: рамка поля и подпись под ним — как в .popup-field,
но красный текст на оранжевом фоне секции нечитаем (контраст ~1.3:1),
поэтому подпись здесь тёмная — на оранжевом она даёт контраст ~5:1 */
.calc-field--invalid input { border: var(--border-hairline-error); }
.calc-field__error {
display: block;
min-height: calc(var(--font-size-2xs) * var(--line-height-base));
margin-top: var(--space-2);
font-size: var(--font-size-2xs);
font-weight: var(--font-weight-semibold);
color: var(--color-text);
text-align: center;
}
.consent {
display: flex;
align-items: center;
gap: var(--space-2);
margin: 0;
font-size: var(--font-size-2xs);
font-weight: var(--font-weight-light);
color: var(--color-text-inverse);
}
/* У макеті — білий квадрат 20×20 з оранжевою галочкою */
.consent__box {
position: relative;
width: 20px; height: 20px;
flex: none;
}
.consent input {
appearance: none;
-webkit-appearance: none;
position: absolute;
inset: 0;
margin: 0;
background: var(--color-white);
border: 0;
border-radius: var(--radius-base);
cursor: pointer;
}
/* Галочка экспортирована из Figma в исходной ориентации: внутри компонента
Done_light она повёрнута на 90°, поэтому поворот повторён здесь; квадратная
область при повороте на 90° формы не меняет, поэтому можно крутить весь
слой целиком, а не только сам глиф.
Раньше это был ::before на самом : генерируемый контент на
replaced-элементах вроде чекбоксов — не часть спецификации, Firefox
и Safari его не рисуют (в Chromium совпадение — там это иногда работает).
Поэтому галочка — обычный -сосед. Он тоже absolute (и идёт в DOM
после input) — иначе позиционированный input перекрыл бы его своим фоном,
тот же порядок отрисовки, что уже встречался с .calc__thanks. */
.consent__check {
position: absolute;
inset: 0;
background: url("../imgs/icon-check.svg") no-repeat center / 10px 12px;
transform: rotate(90deg);
opacity: 0;
pointer-events: none;
}
.consent input:checked ~ .consent__check { opacity: 1; }
/* Перекрывает всю секцию сплошным фоном того же цвета, что и .calc — заголовок,
шаги и форма под ней остаются в DOM (и в inert, см. popup.js), просто не видны.
grid-area: 1 / 1 — та же ячейка, что у .calc__inner (см. .calc выше), и в
отличие от него без своих max-width/margin-inline: растягивается на всю
ширину секции, а не только на центральную колонку контента. hidden
снимается в popup.js, opacity — тем же приёмом, что открытие попапов:
класс is-open добавляется кадром позже, чтобы переход отыграл, а не
схлопнулся в одно и то же состояние */
.calc__thanks {
grid-area: 1 / 1;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-5);
padding: var(--space-section) var(--layout-gutter);
background: var(--color-accent);
text-align: center;
opacity: 0;
transition: opacity 0.25s ease;
}
/* [hidden] и класс — одинаковая специфичность, а класс идёт в каскаде
позже: без этого правила снятие/установка hidden из popup.js ни на что
не влияли бы */
.calc__thanks[hidden] { display: none; }
.calc__thanks.is-open { opacity: 1; }
.calc__thanks-title { max-width: var(--layout-column-heading); }
.calc__thanks-lead {
max-width: var(--layout-column-text);
font-size: var(--font-size-md);
font-weight: var(--font-weight-light);
color: var(--color-text-inverse);
}
/* ============================== SOFFITS ================================== */
.soffits {
display: grid;
gap: var(--space-6);
max-width: var(--layout-page-width);
margin-inline: auto;
padding-block: var(--space-section);
}
.soffits__body {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.soffits__body .section-title { max-width: var(--layout-column-text); }
.finishes {
display: grid;
gap: var(--space-4);
}
.finish {
display: grid;
grid-template-columns: auto auto 1fr;
align-items: center;
gap: var(--space-4);
}
.finish__swatch {
width: calc(120px + 12 * var(--fluid-s) / 649);
height: calc(120px + 12 * var(--fluid-s) / 649);
object-fit: cover;
}
.finish__logo { width: 100px; height: 50px; object-fit: contain; }
.finish__name { font-size: var(--font-size-md); }
.soffits__figure img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* =============================== FOOTER ================================== */
.site-footer {
display: flex;
flex-direction: column;
gap: var(--space-6);
padding-block: var(--space-section);
color: var(--color-text-inverse);
background: var(--color-accent);
}
.site-footer__brand {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
}
.site-footer__swoosh { width: min(240px, 60%); height: auto; }
.site-footer__logo {
width: min(240px, 60%);
aspect-ratio: 375 / 130;
background-color: var(--color-white);
mask-image: url("../imgs/logo-footer.png");
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
-webkit-mask-image: url("../imgs/logo-footer.png");
-webkit-mask-size: contain;
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
}
.site-footer__main {
display: grid;
gap: var(--space-6);
max-width: var(--layout-page-width);
margin-inline: auto;
width: 100%;
}
.site-footer__col {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.site-footer__hours {
max-width: var(--layout-column-text);
font-size: var(--font-size-md);
font-weight: var(--font-weight-light);
}
.site-footer__phone {
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
text-transform: uppercase;
white-space: nowrap;
}
.site-footer__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
}
/* Три зони: посилання ліворуч, копірайт по центру сторінки — як у макеті */
.site-footer__legal {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--space-2);
max-width: var(--layout-page-width);
width: 100%;
margin-inline: auto;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-light);
}
.site-footer__legal a:hover { text-decoration: underline; }
.site-footer__copyright { text-align: center; }
/* ============================ МОБІЛЬНЕ МЕНЮ ============================== */
/* Источник: `menu_375` (2:896), свёрнутая шапка — `header` (2:707).
Тот же нативный