/* ==========================================================================
3 блок — «С чем мы можем быть полезны?» — node 743:2737, y 3673–6897
Замеры с design-ref/desktop_main_full.png:
· заголовок блока — аутлайны 224px в строке 238px (шаг макета);
· заголовки пунктов — 110px (--fs-display-s), шаг строк 86px = 0.78em;
· моно-текст — 18px, интерлиньяж 20px.
Горизонталь — колонки Bootstrap (offset-*). Вертикаль пунктов — --gap.
Секция сама .container: линии сетки совпадают с колонками.
========================================================================== */
.benefits {
/* воздух от блока «кто мы»: в макете 328px до первой строки заголовка */
margin-top: 20.5rem;
padding-top: 1.125rem; /* 18px — y 3691 − 3673 */
padding-bottom: 4.8125rem; /* 77px от последнего абзаца до низа линий */
}
/* строки текста — над линиями сетки и над каракулями */
.benefits__row {
position: relative;
z-index: 2;
}
/* --- Текст по линиям сетки, вынос --in-line -------------------------------
Та же схема, что в 4 блоке (directions.css). .has-lines висит на секции и
рисует 12 равных шагов по всей её ширине, а колонки лежат внутри 13px
padding'а .container-13 — ряд на 26px уже шага линий, и каждая следующая
колонка уезжает влево. Гасим padding отрицательным полем: ряд снова равен
шагу линий, колонка садится ровно на линию, вынос задаём сами. */
.benefits__row {
margin-inline: -13px;
}
.benefits__row > [class*="col-"] {
padding-left: var(--in-line);
}
/* --- Заголовок блока «лесенкой» ------------------------------------------
Три SVG-строки из макета (в макете это аутлайны, а не живой текст):
schem 506×224, mymojem 1055×224, bytpolezny 1445×224 — в вёрстке каждая
растянута до общего шага строки 238px, поэтому высота у всех одна, а
ширины разные.
Строки посажены на ту же сетку, что и текст: левый край каждой = линия
плюс --in-line. Размеры в процентах от ширины секции, а не в rem и не в px:
rem растёт от ширины окна, а сетка — от ширины секции (окно минус
фиксированные поля), поэтому rem-строка над сеткой из линий медленно
уезжает. Пропорцию держит aspect-ratio: числитель/знаменатель — ширина и
высота строки из макета, растяжка по вертикали сохраняется ровно как была.
Проценты — доля ширины секции при 1920 (1855px). */
/* Заголовок залипает и едет вниз ЗА пунктами, дозатухая к строке «поднятие»
(выцветание считает main.js) — та же схема, что у «кто мы такие?».
Удержание делает CSS, а не скрипт: sticky считает компоновщик, и картинка
не дрожит. Дорожка залипания — сама секция, ниже неё заголовок отпускает.
z-index: 0 — чтобы пункты (.benefits__row, z-index: 2) шли поверх. */
.benefits__title {
display: block;
position: sticky;
top: 7.5rem; /* 120px — сразу под шапкой */
z-index: 0;
padding-top: 2.5rem; /* 40px */
margin-inline: -13px; /* гасим padding .container-13 — см. .benefits__row */
}
.benefits__title-line {
display: block;
position: relative;
}
.benefits__title-img {
display: block;
height: auto;
}
/* «С чем» — от 3-й линии */
.benefits__title-img--1 {
width: 28.248%; /* 524px */
aspect-ratio: 524 / 238;
margin-left: calc(3 / 12 * 100% + var(--in-line));
}
/* «мы можем» — от 5-й линии, правым краем упирается в правое поле */
.benefits__title-img--2 {
width: 56.873%; /* 1055px */
aspect-ratio: 1055 / 238;
margin-left: calc(5 / 12 * 100% + var(--in-line));
}
/* «быть полезны?» — от самой левой линии */
.benefits__title-img--3 {
width: 78.814%; /* 1462px */
aspect-ratio: 1462 / 238;
margin-left: var(--in-line);
}
/* --- Пункт --------------------------------------------------------------- */
.benefits__item {
position: relative;
margin-top: var(--gap, 0);
}
.benefits__head {
display: block;
line-height: 0.78; /* 86px при кегле 110 */
}
.benefits__head [class*="col-"] {
white-space: nowrap;
}
/* Чашка в заголовке 1 пункта — стоит между словами, поэтому не по сетке,
а приклеена к «Организация». Приподнята над базовой линией на 16px. */
.benefits__cup {
flex: 0 0 auto;
width: 9.9375rem; /* 159px */
height: auto;
margin-left: 1.9375rem; /* 31px от слова */
margin-bottom: 1rem; /* 16px */
}
.benefits__body { margin-top: 2.75rem; } /* 44px */
.benefits__body--tight { margin-top: -2.625rem; } /* -42px */
/* --- Рисованные элементы ------------------------------------------------- */
.benefits__doodle {
position: absolute;
left: var(--x);
top: var(--y, 0);
width: var(--w);
height: auto;
z-index: 1;
pointer-events: none;
}
.benefits__doodle--raster { mix-blend-mode: multiply; }
/* Размер галочки 3 пункта. Стоял inline, перенесён сюда один в один, чтобы
не перебивать мобильные правила (см. desktop-guard). */
@media (min-width: 992px) {
.benefits__doodle--raster { width: 6.1875rem; height: 7.5625rem; }
}
/* --- Мобильный макет (952:557, y 2603…4586) -------------------------------
Заголовки пунктов стоят «лесенкой» на свободных координатах: 29 / 93 / 185 /
248 / 280 / 341 — это НЕ шаг бутстраповской колонки (39px) и не шаг колонки
макета (156px). Уложить их в offset-* нельзя, промах доходит до 20px,
поэтому каждая строка ставится абсолютно по своему --mx из разметки, а ряд
держит высоту строками: --lines × 38.
--my двигает строку внутри ряда: в 1 пункте «Организация» и «кофе брейка»
лежат в одном ряду (на десктопе это одна строка), а в макете мобилки идут
двумя. Каракули позиционируются от верха пункта, как на десктопе.
--mx во всех этих правилах — АБСОЛЮТНАЯ координата из макета, чтобы в
разметке стояли те же числа, что в Figma. Контейнер секции уже отступил на
поле, поэтому в CSS оно вычитается: calc(var(--mx) − var(--container-pad)).
Вертикаль по макету:
2626…2842 заголовок блока, 3 строки 100/72
2939…3170 пункт 1 3308…3471 пункт 2 3573…3751 пункт 3
3833…4011 пункт 4 4109…4257 пункт 5 4394…4542 пункт 6
4586 низ линий сетки
------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
.benefits {
margin-top: 0; /* 2 блок уже довёл страницу до y=2603 */
padding-top: 1.5rem; /* 24px до первой строки заголовка */
padding-bottom: 2.75rem; /* 44px от последнего абзаца до низа линий */
}
.benefits__title { position: static; padding-top: 0; margin-inline: 0; }
.benefits__title-line { display: none; } /* аутлайн-картинки не участвуют */
.benefits__title-m { display: block; }
.benefits__title-m > span {
display: block;
margin-left: calc(var(--mx, 0px) - var(--container-pad));
font-family: var(--f-display);
font-weight: 500;
font-size: var(--fs-display-xl);
line-height: var(--lh-display);
letter-spacing: var(--ls-display);
text-transform: uppercase;
color: var(--c-white);
}
.benefits__row { margin-inline: 0; }
/* Десктопный вынос от линии сетки: на мобилке он уже заложен в --mx.
Селектор с той же специфичностью, что у десктопного правила, иначе
оно выигрывает и добавляет лишние 14px. */
.benefits__row > [class*="col-"] { padding-left: 0; }
/* --- Заголовок пункта --- */
.benefits__head { line-height: var(--lh-title); }
.benefits__head .benefits__row {
height: calc(var(--lines, 1) * 2.375rem); /* 38px на строку */
}
.benefits__head .benefits__row > [class*="col-"] {
position: absolute;
left: calc(var(--mx, 0px) - var(--container-pad));
top: var(--my, 0);
width: auto;
/* offset-* остаётся на элементе и у абсолютного бокса складывается с
left — свои проценты сетки гасим. */
margin-left: 0;
padding-left: 0;
padding-right: 0;
white-space: nowrap;
}
/* --- Абзац пункта ---
Переносы в макете не расставлены руками: текст просто заворачивается
внутри своей ширины. Поэтому десктопные
гасим, а ширину берём
из --mw — так строки ложатся ровно как в макете. */
.benefits__body,
.benefits__body--tight { margin-top: 1.6875rem; } /* 27px от заголовка */
.benefits__body > p {
width: var(--mw, 100%);
max-width: none;
margin-left: calc(var(--mx, 0px) - var(--container-pad));
padding-left: 0;
}
/* Кроме .br-m — это перенос, поставленный специально для мобилки там, где
он есть в макете (см. 2 пункт). Десктопные
гасим все: в макете
переносы почти везде получаются сами, шириной абзаца. */
.benefits__body > p br:not(.br-m) { display: none; }
/* --- Отступы между пунктами (от низа предыдущего абзаца) --- */
.benefits__item { position: relative; }
.benefits__item:nth-of-type(1) { margin-top: 6.0625rem; } /* 97px */
.benefits__item:nth-of-type(2) { margin-top: 8.625rem; } /* 138px */
.benefits__item:nth-of-type(3) { margin-top: 6.375rem; } /* 102px */
/* +15px против макета: в макете описание 3 пункта продублировано из 2-го
и занимает 5 строк, а настоящий текст — 4. Компенсируем здесь, чтобы
4 пункт встал на свою координату. */
.benefits__item:nth-of-type(4) { margin-top: 6.0625rem; } /* 97px */
.benefits__item:nth-of-type(5) { margin-top: 6.125rem; } /* 98px */
.benefits__item:nth-of-type(6) { margin-top: 8.5625rem; } /* 137px */
/* --- Каракули ---
Координаты сняты с рендера, а не из дерева: у векторов Figma отдаёт бокс
ДО трансформаций, и, например, галочка 3 пункта значится на x=394, а
стоит на x=341. Отсчёт по вертикали — от верха пункта. */
.benefits__doodle,
.benefits__cup {
display: block;
position: absolute;
left: calc(var(--mx) - var(--container-pad));
top: var(--my);
width: var(--mw);
height: auto;
margin: 0;
z-index: 1;
}
/* Чашка лежит ВНУТРИ строки заголовка, а та сама абсолютная, — значит
отсчёт у чашки не от пункта, а от этой строки (её левый край 29).
Поэтому 382 − 29 = 353 и никакого вычитания поля. */
.benefits__cup {
left: 22.0625rem; /* 353px от «Организация» */
top: -1.9375rem; /* 2908 против 2939 */
width: 5.47125rem; /* 87.5px */
}
.benefits__item:nth-of-type(2) .benefits__doodle { --mx: 13.3125rem; --my: -5.3125rem; --mw: 9.4275rem; }
.benefits__item:nth-of-type(3) .benefits__doodle { --mx: 21.3125rem; --my: -3rem; --mw: 2.41875rem; }
.benefits__item:nth-of-type(4) .benefits__doodle { --mx: 8.625rem; --my: 2.75rem; --mw: 6.6875rem; }
.benefits__item:nth-of-type(5) .benefits__doodle { --mx: 2.5625rem; --my: 3.1875rem; --mw: 7.4375rem; }
.benefits__item:nth-of-type(6) .benefits__doodle:nth-of-type(1) { --mx: 12.5rem; --my: -4.125rem; --mw: 9.44125rem; }
.benefits__item:nth-of-type(6) .benefits__doodle--m { --mx: 1.875rem; --my: 9.6875rem; --mw: 14.875rem; }
}