/* ==========================================================================
4 блок — «В каких направлениях мы работаем» — node 743:2799, y 7243–10670
Замеры с design-ref/desktop_main_full.png:
· заголовок блока — 230px (--fs-display-l), 2 строки по 165px, по центру;
· заголовки направлений — 180px (--fs-display-m), шаг строк 137px = 0.76em,
первая строка «выбита» белым, остальные — чёрные;
· фото 905×624 с радиусом 48px, занимает половину сетки напротив текста;
· у каждого направления свой участок вертикальных линий (.has-lines),
между участками 201px чистого фона.
========================================================================== */
.directions {
padding-top: 21.625rem; /* 346px от низа линий 3 блока до заголовка */
padding-bottom: 0;
}
/* обе строки заголовка — по центру макета, переносы только по */
.directions__title {
white-space: nowrap;
}
.directions__caption {
margin-top: 2.9375rem; /* 47px */
}
/* --- Направление ---------------------------------------------------------- */
.directions__item {
position: relative;
min-height: 43.8125rem; /* 701px — высоту задаёт фото, оно вне потока */
padding-top: 1.5rem; /* 24px от верха линий до первой строки */
padding-bottom: 2.375rem; /* 38px */
margin-top: 18.4375rem; /* 295px от подписи «(всего их 3)» */
}
.directions__item + .directions__item {
margin-top: 12.5625rem; /* 201px между направлениями */
}
.directions__row {
position: relative;
z-index: 2;
}
.directions__head {
display: block;
line-height: 0.76; /* 137px при кегле 180 */
}
.directions__head [class*="col-"] {
white-space: nowrap;
}
/* абзацы под заголовком направления */
.directions__body { margin-top: 2.8125rem; } /* 45px */
.directions__note { margin-top: 4.0625rem; } /* 65px — второй абзац у направления 2 */
/* --- Фото ----------------------------------------------------------------
Вне потока: по вертикали оно перекрывает и заголовок, и абзацы. Высоту
направления держит min-height у .directions__item. */
.directions__media {
position: absolute;
top: 2.4375rem; /* 39px от верха линий */
left: var(--x);
width: 48.34%; /* 905 из 1872 */
aspect-ratio: 905 / 624;
margin: 0;
overflow: hidden; /* рамка кадра теперь здесь — картинку внутри увеличиваем */
border-radius: 3rem; /* 48px */
}
/* Кадр приближается зумом, а не перерисовкой исходника: исходные рендеры
сняты общим планом, в макете аппарат крупнее. --zoom/--shift-* задаются
на самом , по умолчанию — обычный object-fit: cover. */
.directions__media img,
.directions__media video {
width: 100%;
height: 100%;
object-fit: cover;
transform: translate(var(--shift-x, 0), var(--shift-y, 0)) scale(var(--zoom, 1));
}
/* --- Рисованный номер ----------------------------------------------------- */
.directions__num {
position: absolute;
left: var(--x);
top: var(--y);
width: var(--w);
height: auto;
z-index: 2;
pointer-events: none;
}
/* --- Преимущества (только у направления 1) -------------------------------- */
.directions__adv { margin-top: 12.1875rem; } /* 195px */
.directions__adv-text { margin-top: 2.5rem; } /* 40px от строки «№N» */
/* --- Текст по линиям сетки, вынос 14px ------------------------------------
У статьи 13px padding'а (container-13), а линии .has-lines рисуются по всей
её ширине — колонки внутри padding'а на 26px уже шага линий и каждая пара
уезжает влево ещё на 4.3px. Гасим padding отрицательным полем: ряд снова
равен шагу линий, а вынос задаём сами. */
.directions__head .directions__row,
.directions__body,
.directions__note,
.directions__adv,
.directions__adv-nums,
.directions__adv-text {
margin-inline: -13px;
}
.directions__head .directions__row > [class*="col-"],
.directions__body > p,
.directions__note > p,
.directions__adv > p,
.directions__adv-nums > p,
.directions__adv-text > p {
padding-left: var(--in-line); /* 14px @1920 */
}
/* --- Мобильный макет (952:606, y 4850…7504) -------------------------------
Схема та же, что в 3 блоке: строки заголовков стоят абсолютно по --mx
(абсолютная координата макета, поле контейнера вычитается в CSS), абзацы
заворачиваются сами внутри --mw.
Отличия:
· линии сетки идут СКВОЗЬ все три направления (5217…7504), а на десктопе
у каждого свой участок — поэтому .has-lines на пунктах гасим и рисуем
одну подложку на секцию;
· во 2 и 3 направлениях вторая и третья десктопные строки заголовка идут
ОДНОЙ строкой, поэтому у среднего ряда --lines: 0, а третий встаёт на его
место со своим --mx;
· у фото не круглые углы, а эллиптические, как у кнопки-пилюли: в макете
это объединение двух прямоугольников с угловыми доборами 28.07×18.75,
то есть ровно border-radius 6.41% / 6.25% (те же доли, что у десктопной
маски 905×624).
Вертикаль по макету:
4850…5066 заголовок, 3 строки 100/72 5105 «(всего их 3)»
5217…7504 линии сетки
5241…6202 направление 1 (заголовок, два абзаца, фото, 6 преимуществ)
6294…6859 направление 2 6954…7474 направление 3
------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
.directions {
padding-top: 16.5rem; /* 264px: низ линий 3 блока 4586 → заголовок 4850 */
padding-bottom: 1.8125rem; /* 29px: низ фото 7474 → низ линий 7503 */
}
.directions__title { white-space: normal; }
.directions__caption { margin-top: 2.4375rem; } /* 39px */
/* Линии сетки одной подложкой на всю секцию: на десктопе они у каждого
направления свои, с разрывами, в макете мобилки — сплошные. */
.directions__item.has-lines::before { display: none; }
#directions::before {
content: "";
position: absolute;
top: 39.4375rem; /* 631px: 5217 от начала секции (4586) */
/* Низ — по краю секции, а не заданной высотой: высота считалась от
макета, и стоило описанию направления перенестись на строку иначе,
как линии кончались раньше фотографии — та вылезала за них.
Нижнее поле секции (29px) как раз и есть просвет под последним фото. */
bottom: 0;
inset-inline: calc(var(--layout-pad) - var(--line-w) / 2);
z-index: 0;
pointer-events: none;
background-image: linear-gradient(
to right,
var(--c-line) 0 var(--line-w),
transparent var(--line-w)
);
background-size: calc((100% - var(--line-w)) / var(--line-cols)) 100%;
box-shadow: var(--rule-right);
}
/* Флекс-колонка нужна ради order: в разметке фото стоит ПЕРЕД заголовком
(на десктопе оно вне потока, и порядок не важен), а в макете мобилки
идёт после абзацев. */
.directions__item {
position: relative;
z-index: 1;
min-height: 0;
padding-top: 0;
padding-bottom: 0;
display: flex;
flex-direction: column;
}
.directions__head { order: 1; }
.directions__body { order: 2; }
.directions__note { order: 3; }
.directions__media { order: 4; }
.directions__adv { order: 5; }
.directions__item:nth-of-type(1) { margin-top: 7.5625rem; } /* 121px от «(всего их 3)» */
.directions__item:nth-of-type(2) { margin-top: 5.75rem; } /* 92px */
.directions__item:nth-of-type(3) { margin-top: 5.9375rem; } /* 95px */
/* --- Заголовок направления --- */
.directions__head { line-height: var(--lh-title); }
.directions__head .directions__row {
height: calc(var(--lines, 1) * 3.3125rem); /* 53px на строку */
margin-inline: 0;
}
.directions__head .directions__row > [class*="col-"] {
position: absolute;
left: calc(var(--mx, 0px) - var(--container-pad));
top: 0;
width: auto;
margin-left: 0;
padding-left: 0;
padding-right: 0;
white-space: nowrap;
}
/* --- Абзацы --- */
.directions__body,
.directions__note,
.directions__adv,
.directions__adv-nums,
.directions__adv-text { margin-inline: 0; }
.directions__body { margin-top: 1.6875rem; } /* 27px от заголовка */
.directions__note { margin-top: 0.9375rem; } /* 15px — второй абзац 2 направления */
/* Абзацы, как и строки заголовка, ставятся абсолютно: в 1 и 3 направлениях
их в ряду два, и во флексе второй отсчитывался бы от края первого, а не
от края макета. Высоту ряду задаёт --lines (15px на строку). */
.directions__body,
.directions__note { height: calc(var(--lines, 1) * 0.9375rem); }
.directions__body > p,
.directions__note > p {
position: absolute;
top: 0;
left: calc(var(--mx, 0px) - var(--container-pad));
width: var(--mw, 100%);
max-width: none;
margin-left: 0;
padding-left: 0;
}
.directions__adv > p,
.directions__adv-nums > p,
.directions__adv-text > p {
width: var(--mw, 100%);
max-width: none;
margin-left: calc(var(--mx, 0px) - var(--container-pad));
padding-left: 0;
}
/* В макете строки заворачиваются шириной абзаца, а не расставлены руками */
/* Кроме .br-m — это переносы, поставленные специально под мобильный макет
там, где короткое слово («в», «и») иначе влезает в предыдущую строку. */
.directions__body > p br:not(.br-m),
.directions__note > p br:not(.br-m),
.directions__adv-text > p br:not(.br-m) { display: none; }
/* --- Фото ---
В потоке (на десктопе оно вне потока и перекрывает текст), во всю ширину
контента минус поджатие, пропорция из макета. */
.directions__media {
position: static;
width: auto;
margin: 1.6875rem var(--grid-inset) 0; /* 27px от абзаца */
aspect-ratio: 438 / 300;
border-radius: 6.41% / 6.25%;
}
/* --- Номера направлений --- */
.directions__num {
display: block;
left: calc(var(--mx) - var(--container-pad));
top: var(--my);
width: var(--mw);
}
.directions__item:nth-of-type(1) .directions__num { --mx: 19.4375rem; --my: 0.375rem; --mw: 5.208rem; }
.directions__item:nth-of-type(2) .directions__num { --mx: 7rem; --my: -1.75rem; --mw: 5.081rem; }
.directions__item:nth-of-type(3) .directions__num { --mx: 14.4375rem; --my: -1.4375rem; --mw: 4.6675rem; }
/* --- Преимущества (только 1 направление) ---
На десктопе это три ряда: подпись, шесть номеров, шесть текстов. В макете
мобилки они идут парами «№N — текст» в столбик с шагом 60. Ставим два
столбца абсолютно от верха пункта, шаг задаём высотой слота (см. ниже). */
.directions__adv { margin-top: 1.75rem; } /* 28px от низа фото */
/* Отсчёт от ВЕРХА пункта. Число проверяемое, а не подогнанное: заголовок
3 × 53 = 159, абзацы 27 + 5 × 15, фото 27 + 300, строка «Преимущество»
28 + 15 — итого она занимает 616…631, и столбцы начинаются ровно под ней.
Поток над ними от переносов не зависит: у рядов заголовка и абзацев высота
задана через --lines, у фото — пропорцией.
Привязывать столбцы НИЗОМ нельзя, хотя низ пункта и задан от той же строки
(«Преимущество» + padding-bottom 330). Высота у столбцов разная: номера
всегда 360, а тексты растут, когда описание уходит в три строки, — и
столбец текстов уезжал вверх на фотографию. */
.directions__adv-nums,
.directions__adv-text {
position: absolute;
top: 39.4375rem; /* 631px — сразу под строкой «Преимущество» */
margin-top: 0; /* десктопный отступ от строки «№N» тут не нужен */
display: block;
}
.directions__adv-nums { left: calc(1.8125rem - var(--container-pad)); } /* x=29 */
.directions__adv-text {
left: calc(11.5625rem - var(--container-pad)); /* x=185 */
width: 16.5rem; /* 264px */
}
.directions__adv-nums > p,
.directions__adv-text > p { margin-left: 0; width: 100%; }
/* Шаг пары «№N — описание» держим ВЫСОТОЙ слота, а не нижним отступом.
Отступ давал шаг 60, только пока в описании ровно две строки, а это
держится на волоске: колонка 264 при кегле 15 с трекингом −0.05em
вмещает ровно 32 знака — впритык, и на такой границе перенос решает
округление кегля. На 375 px четыре описания из шести уходят в три строки,
столбец вырастает с 360 до 405, номера перестают стоять напротив своих
описаний, а низ столбца расходится с макетом.
Слот в 60 держит шаг при любом числе строк: третья строка съедает
воздух под описанием, а не сдвигает всё, что ниже. */
.directions__adv-nums > p,
.directions__adv-text > p {
height: 3.75rem; /* 60px — шаг пары */
margin-bottom: 0;
}
/* Высоту пункту задают абсолютные столбцы, поэтому добираем её отступом:
от строки «Преимущество» (5857) до низа последнего текста (6202) — 345,
из них 15 занимает сама строка. */
.directions__adv { padding-bottom: 20.625rem; }
}