/* ========================================================================== 6 блок — «После нас ваш бизнес не будет прежним» — node 743:2924, y 12687–16484 Устроен как 3 блок: заголовок «лесенкой» 330px и девять пунктов по 110px (шаг строк 86px = 0.78em). У каждого пункта свой рисованный элемент и маркер «№N» — оба стоят вне потока, координаты сняты с макета. ========================================================================== */ .results { padding-block: 0; padding-bottom: 2.1875rem; /* 35px до низа линий */ } .results__row { position: relative; z-index: 2; } /* --- Текст по линиям сетки, вынос 14px -------------------------------------- Линии .has-lines рисуются по всей ширине секции, а содержимое лежит внутри .container-13 — колонки на 26px уже шага линий и каждая следующая уезжает влево. Гасим padding отрицательным полем: ряд снова равен шагу линий, а вынос от линии задаём сами (перебивает ind-display / ind-title). */ .results__row { margin-inline: -13px; } .results__row > [class*="col-"] { padding-left: var(--in-line); /* 14px @1920 */ } /* Заголовок залипает и уезжает вниз ЗА пунктами, дозатухая ко второму (выцветание считает main.js) — та же схема, что в 3 блоке. z-index: 0 — чтобы строки пунктов (.results__row, z-index: 2) шли поверх. */ .results__title { position: sticky; top: 7.5rem; /* 120px — сразу под шапкой */ z-index: 0; } .results__title, .results__head { display: block; } .results__title [class*="col-"], .results__head [class*="col-"] { white-space: nowrap; } .results__head { line-height: 0.78; /* 86px при кегле 110 */ } /* --- Пункт ---------------------------------------------------------------- */ .results__item { position: relative; margin-top: var(--gap, 0); } /* Маркер «№N»: у части пунктов он стоит у первой строки, у части — у последней. Горизонталь — по сетке, как весь остальной текст: --col задаёт линию, дальше тот же вынос --in-line. Раньше стояли проценты, снятые с макета на глаз (0.8%, 9.13%, 25.8% …) — каждый маркер промахивался мимо своей линии на 2–14px, и промах рос вместе с экраном. +26px/−13px — потому что позиционируются они внутри .container-13, чей бокс на 26px уже шага линий (см. .results__row). */ .results__num { position: absolute; left: calc(var(--col) / 12 * (100% + 26px) + var(--in-line) - 13px); top: var(--y); z-index: 2; } .results__doodle { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: auto; z-index: 1; pointer-events: none; } /* --- Мобильный макет (952:681, y 9446…11628) ------------------------------ Схема как в 3 блоке: строки заголовков стоят абсолютно по --mx (абсолютная координата макета, поле контейнера вычитается), ряд держит высоту через --lines × 38, каракули и номера — от верха пункта. Особенности: · во 2 пункте «кофейни» в макете ВЫШЕ «премиальной», в разметке наоборот — меняются местами через --my (+38 / −38); · в 6 пункте «Бюджет» уезжает со своей строки на следующую (--my 38); · у 7 пункта и у заголовка блока разбивка по словам своя, поэтому там отдельные мобильные элементы (d-lg-none), а десктопные скрыты. Вертикаль по макету: 9469…9757 заголовок, 4 строки 100/72 9854 №1 10035 №2 10255 №3 10474 №4 10655 №5 10904 №6 11123 №7 11304 №8 11485 №9 11628 низ линий сетки ------------------------------------------------------------------------- */ @media (max-width: 991.98px) { .results { margin-top: 15.4375rem; /* 247px: низ 5 блока 9199 → линии 9446 */ padding-top: 1.4375rem; /* 23px до первой строки заголовка */ padding-bottom: 1.8125rem; /* 29px от последней строки до низа линий */ } /* --- Заголовок блока (мобильный вариант) --- */ .results__title--m { display: block; position: static; } .results__title--m > span { display: block; margin-left: calc(var(--mx, 0px) - var(--container-pad)); } /* --- Заголовок пункта --- */ .results__head { line-height: var(--lh-title); } .results__row { margin-inline: 0; } .results__head .results__row { height: calc(var(--lines, 1) * 2.375rem); /* 38px на строку */ } .results__head .results__row > span { position: absolute; left: calc(var(--mx, 0px) - var(--container-pad)); top: var(--my, 0); width: auto; margin-left: 0; padding-left: 0; padding-right: 0; white-space: nowrap; } /* Единственный спан, внутри которого перенос: «мотивации / с измеримыми ROI». nowrap явному
не мешает. */ .results__head .results__row > span br { display: block; } /* «рабочего времени» — в макете слова разнесены на 249px, при том что это один спан. Двигаем словом, а не координатой. */ .results__gap { word-spacing: 7.2rem; } /* 115.2px — в rem, чтобы зазор ужимался вместе со страницей */ /* --- Отступы между пунктами (от низа предыдущего заголовка) --- */ .results__item:nth-of-type(1) { margin-top: 6.0625rem; } /* 97px */ .results__item:nth-of-type(2) { margin-top: 6.5625rem; } /* 105px */ .results__item:nth-of-type(3) { margin-top: 6.625rem; } /* 106px */ .results__item:nth-of-type(4) { margin-top: 6.5625rem; } .results__item:nth-of-type(5) { margin-top: 6.5625rem; } .results__item:nth-of-type(6) { margin-top: 8.4375rem; } /* 135px */ .results__item:nth-of-type(7) { margin-top: 6.5625rem; } .results__item:nth-of-type(8) { margin-top: 6.5625rem; } .results__item:nth-of-type(9) { margin-top: 6.5625rem; } /* --- Номера --- */ .results__num { left: calc(var(--mx) - var(--container-pad)); top: var(--my); } .results__item:nth-of-type(1) .results__num { --mx: 1.875rem; --my: 3.9375rem; } .results__item:nth-of-type(2) .results__num { --mx: 28.25rem; --my: 0.125rem; } .results__item:nth-of-type(3) .results__num { --mx: 1.875rem; --my: 6.3125rem; } .results__item:nth-of-type(4) .results__num { --mx: 1.875rem; --my: 0.125rem; } .results__item:nth-of-type(5) .results__num { --mx: 28.25rem; --my: 0.125rem; } .results__item:nth-of-type(6) .results__num { --mx: 21.375rem; --my: 6.3125rem; } .results__item:nth-of-type(7) .results__num { --mx: 1.875rem; --my: 3.9375rem; } .results__item:nth-of-type(8) .results__num { --mx: 28.25rem; --my: 3.9375rem; } .results__item:nth-of-type(9) .results__num { --mx: 1.875rem; --my: 0.125rem; } /* --- Каракули --- Координаты сняты по рендеру, отсчёт по вертикали — от верха пункта. */ .results__doodle { display: block; left: calc(var(--mx) - var(--container-pad)); top: var(--my); width: var(--mw); } .results__item:nth-of-type(1) .results__doodle { --mx: 15.5625rem; --my: 2.8125rem; --mw: 3.875rem; } .results__item:nth-of-type(2) .results__doodle { --mx: 9.0625rem; --my: 3.1875rem; --mw: 5.625rem; } .results__item:nth-of-type(3) .results__doodle { --mx: 11.5625rem; --my: 7.4375rem; --mw: 17.125rem; } .results__item:nth-of-type(4) .results__doodle { --mx: 13.25rem; --my: 0.1875rem; --mw: 11.9656rem; } .results__item:nth-of-type(5) .results__doodle { --mx: 1.875rem; --my: 4rem; --mw: 9.3125rem; } .results__item:nth-of-type(6) .results__doodle { --mx: 5.4375rem; --my: -3.9375rem; --mw: 6rem; } .results__item:nth-of-type(7) .results__doodle { --mx: 23.5rem; --my: -3.375rem; --mw: 3.2875rem; } .results__item:nth-of-type(8) .results__doodle { --mx: 11.5625rem; --my: 0; --mw: 9.5625rem; } .results__item:nth-of-type(9) .results__doodle { --mx: 12rem; --my: 0.25rem; --mw: 15.458rem; } }