/* ========================================================================== 7 блок — «Ассортимент кофе», слайдер — node 743:3000, y 16830–18122 Заголовок и подпись по центру макета, дальше слайд-коллаж: пачка по центру, названия сорта «выбиты» белым слева и справа, два текстовых блока по краям. Слайдер — карусель Bootstrap (data-bs-slide на своих стрелках), слайд — слой с абсолютными координатами из макета, как в 5 блоке. В макете нарисован один слайд; остальные сорта добавляются копией .carousel-item без правок стилей. Кегль названия выбирается по длине, а не «как в макете»: на десктопе имя стоит в col-6 (936px при 1920), вторая строка — в col-4 (624px). Макетные 180 держат всё, кроме «ПЕРИСКОП ЛОТ 3» — он даёт 770px и во вторую колонку не влезает. У этого сорта обе строки идут кеглем 110 (t-display-s), и там же вторая строка поднята с 8.6875rem до 5.5rem: у меньшего кегля меньше высота прописных, и на макетной отметке между строками появлялась дыра. Ширины считаны по самому шрифту (Coolvetica Condensed, трекинг −0.02em), а не на глаз. ========================================================================== */ .assortment { margin-top: 21.625rem; /* 346px от низа линий 6 блока */ padding-block: 0; } .assortment__title { white-space: nowrap; } /* в макете заголовок в одну строку */ .assortment__caption { margin-top: 2.875rem; } /* 46px */ /* Ширина слайдера упёрта в ширину макета: проценты внутри слайда (пачка, стрелки) считаются от неё, а высота слайда и вертикали слоёв заданы в rem, которые выше 1920 уже не растут (root font-size: clamp(.., .8333vw, 16px)). Без потолка на широком экране пачка росла, а короб оставался 760px — и .carousel-inner (overflow: hidden) срезал ей низ. */ .assortment__slider { position: relative; width: 100%; max-width: var(--layout-max); margin: 7.8125rem auto 0; /* 125px от подписи до верха слайда */ /* Горизонталь внутри слайдера — наша: браузер не должен трактовать свайп как жест навигации. Вертикальную прокрутку страницы оставляем ему. */ touch-action: pan-y; } .assortment__slide { height: 47.5rem; /* 760px — высота коллажа по макету */ /* Непрозрачный фон обязателен из-за mix-blend-mode у пачки. На время перелистывания Bootstrap вешает на слайд transform, тот создаёт контекст наложения — и multiply начинает смешиваться не со страницей, а с фоном самого слайда. Прозрачный фон давал белый прямоугольник вокруг пачки ровно на время анимации. Цвет тот же, что у страницы, поэтому в покое ничего не меняется. */ background: var(--c-bg); } /* слой слайда, поставленный по вертикали из макета */ .assortment__at { position: absolute; inset-inline: 0; top: var(--t); } /* Пачка снята на белом — в макете стоит через multiply. --x/--w у каждого слайда СВОИ, и это не небрежность. В макете кадр квадратный и пачка занимает 55.7% его ширины; у снимков остальных сортов композиция шире (ингредиенты разложены дальше в стороны), и та же самая пачка занимает там всего 50–52% кадра. При одинаковой --w она выходила на странице на 10–16% мельче — первое, что видно при листании. Поэтому ширина кадра на слайде считается от пачки: --w подобрана так, чтобы пачка вышла ровно того же размера, что на первом слайде, а --x — так, чтобы она встала на то же место. Числа получены замером самих файлов (ширина пачки по верхней кромке, где ингредиенты ещё не начались), пересчёт — в истории коммита. Кадры при этом обрезаны по содержимому и ничего не потеряли: лишняя ширина уходит в ингредиенты, которые лежат низко и в текст не попадают. Плата: правый край снимка доходит до ~78% вместо 74.8% и заезжает под левую треть правой стрелки. Стрелка рисуется поверх и остаётся чёрной — multiply её не трогает. На мобилке проще: кадр идёт во всю ширину слайдера (--xm: 0, --wm равна макету), и пачка сама попадает в размер с точностью 96–100%. */ .assortment__pack { position: absolute; top: var(--t); left: var(--x); width: var(--w); margin: 0; mix-blend-mode: multiply; } .assortment__pack img { width: 100%; } /* --- Стрелки -------------------------------------------------------------- */ .assortment__arrow { position: absolute; top: var(--t); left: var(--x); width: 5.88%; /* 110px из 1872 */ padding: 0; border: 0; background: none; transition: opacity 0.2s ease; } .assortment__arrow:hover { opacity: 0.55; } .assortment__arrow img { width: 100%; } /* левая стрелка — та же, отражённая */ .assortment__arrow--prev img { transform: scaleX(-1); } /* --- Мобильный макет (952:742…952:753, y 11892…12663) --------------------- Заголовок и подпись по центру, дальше тот же слайд-коллаж, что на десктопе, но со своими координатами: рядом с --t/--x/--w в разметке стоит вторая тройка --tm/--xm/--wm (inline-стиль медиазапросом не перебить). Отсчёт как в 5 блоке: слои абсолютные, считаются от края слайда, поэтому --mx идёт абсолютной координатой макета без вычитания поля. Вертикаль по макету: 11892…12036 заголовок, 2 строки 100/72 12074 «(собрание лучших из лучших)» 12065…12533 фото пачки 468×468 — начинается ВЫШЕ подписи и идёт под ней 12460 «Коста рика алахуэла» — на мобилке одной строкой, кеглем 50 12515 «Обработка: натуральная» 12519 «Описание: …», 5 строк 12621 индикаторы слайдера ------------------------------------------------------------------------- */ @media (max-width: 991.98px) { .assortment { margin-top: 16.5rem; /* 264px от низа линий 6 блока (11628) */ padding-bottom: 15.75rem; /* 252px до 8 блока (12898): слайд ниже макета на 21px (см. .assortment__slide), поэтому отступ на столько же короче — 8 блок остаётся на своей отметке */ } .assortment__title { white-space: normal; } /* Пачка начинается ВЫШЕ подписи и в потоке накрывает её — поднимаем. */ .assortment__caption { position: relative; z-index: 1; margin-top: 2.375rem; /* 38px */ } /* Пачка в макете заезжает ПОД подпись — отсюда отрицательный отступ. */ .assortment__slider { margin-top: -1.5rem; } /* −24px: подпись 12089 → слайд 12065 */ /* Высота коллажа по макету — 539px (12065…12604), но описание сорта заканчивалось ровно в 3px от нижнего края, а .carousel-inner режет по overflow: hidden. Любая замена шрифта (или подстановка системного, пока грузится свой) добавляла строке лишний пиксель — и последняя строка описания пропадала. Держим 8px запаса, ниже они вычитаются из отступа до индикаторов и до 8 блока, поэтому по макету ничего не съезжает. */ .assortment__slide { height: 35rem; } /* 539 + 8px запаса + 13px под шестистрочные описания новых сортов: у них текст длиннее макетного и в 539 последняя строка срезалась */ .assortment__at { position: absolute; top: var(--tm, var(--t)); margin-top: 0; } .assortment__pack { position: absolute; top: var(--tm, var(--t)); left: var(--xm, var(--x)); width: var(--wm, var(--w)); margin-top: 0; } .assortment__at > p { position: absolute; top: 0; left: var(--mx, 0); /* без --mw коробка сжимается по тексту: у названия сорта ширина не задана, а 100% растянуло бы его на весь слайд и утащило перенос */ width: var(--mw, auto); white-space: nowrap; max-width: none; margin-left: 0; padding-left: 0; } /* Название сорта на мобилке кеглем 50 (высота ноды 38), а не 70 */ .assortment__at > p.t-display-m { font-size: var(--fs-display-s); } /* абзацы с заданной шириной переносятся как обычно */ .assortment__at > p[style*="--mw"] { white-space: normal; } /* Мобильное описание первого сорта переносится по
из макета, но в ширину ноды макета (283px) наш моно не влезает: строка «кофе с идеальным балансом сладости» набирается на 302px и заворачивалась — описание становилось шестистрочным и упиралось в низ слайда. Даём коробке ширину по самой длинной строке; вправо она уходит на 7px за габарит пачки, на глаз это незаметно — правый край у абзаца рваный. */ .assortment__at > p.assortment__desc--m { width: 19rem; } /* 304px */ /* Переносы десктопа гасим — на мобилке строки заворачиваются шириной абзаца. Исключение — мобильный вариант описания первого сорта: там переносы стоят по макету. */ .assortment__at > p:not(.assortment__desc--m) br { display: none; } /* Стрелок в мобильном макете нет — листается индикаторами */ .assortment__arrow { display: none; } /* --- Индикаторы --- В макете нарисованы четыре штриха 27×4 с шагом 33, первый закрашен наполовину. Слайдов шесть, поэтому штрихов тоже шесть — иначе индикатор не показывает, где ты; геометрия и цвета взяты из макета. */ .assortment__dots { position: static; justify-content: center; gap: 0.375rem; /* 6px: шаг 33 при ширине 27 */ margin: 0.5625rem 0 0; /* 17px от низа слайда по макету минус 8px запаса, добавленных к высоте слайда */ padding: 0; } /* Селектор с атрибутом, а не с тегом: у Bootstrap правило `.carousel-indicators [data-bs-target]` весит (0,2,0), и `.assortment__dots > button` (0,1,1) ему проигрывает — размеры и цвета оставались дефолтными. */ .assortment__dots > [data-bs-target] { width: 1.6875rem; /* 27px */ height: 0.25rem; /* 4px */ margin: 0; border: 0; border-radius: 0.125rem; background: #c1c1c1; opacity: 1; transition: background-color 0.25s ease; } .assortment__dots > [data-bs-target].active { background: var(--c-ink); } /* --- Подсказка «это листается» --- Когда блок доезжает до экрана, он один раз качается влево и обратно. Двигаем весь слайдер, а не слайд: слайд Bootstrap двигает сам во время перелистывания, и две трансформации подрались бы. Отскок вправо в конце («0.5rem») — чтобы движение читалось как упругое, а не как рывок. Класс вешает js/main.js по IntersectionObserver, один раз за загрузку. */ .assortment__slider.is-hinted { animation: assortment-hint 1.1s ease-in-out; } } @keyframes assortment-hint { 0% { transform: translateX(0); } 35% { transform: translateX(-2.5rem); } 70% { transform: translateX(0.5rem); } 100% { transform: translateX(0); } }