/* ========================================================================== Секция 3 — знакомство с продуктом Композиция: шапка во всю ширину сверху, робот по центру как герой экрана, по две карточки слева и справа, под роботом — вывод секции, на полку которого он встаёт нижним краем. Всё живёт в одной сетке .intro__layout, поэтому шапка, карточки, робот и вывод выровнены по общим вертикалям и читаются как один экран. Экран собран так, чтобы целиком помещаться в окно ноутбука (правка заказчика: «не влезает полностью в поле зрения»). Отсюда сжатые поля секции, плотный внутренний ритм карточек и вывод в одну строку. Высота проверяется линейкой: node tools/fit-intro.js — она показывает и итог, и все слагаемые, из которых он набирается. Линейка ищет .icon-badge и после объединения значка с заголовком печатает «значок null» — кружка в карточке больше нет, значок лежит в .intro__card-icon. ========================================================================== */ .intro { overflow: hidden; /* Поля секции общие: --section-y — единственная ручка межсекционной отбивки на весь сайт (tokens.css). Прежние 24-48 сверху добывали пиксели под «экран должен помещаться в окно ноутбука», но платили за это разнобоем стыков: 147px до экрана 4 против 121 у всех остальных пар. Хвост полки-постамента (.verdict--stage::after, 148px от верхней кромки вывода) при 60px нижнего поля укладывается внутрь секции с большим запасом, чем при прежних 48. */ /* Своего фона у секции нет. Раньше здесь лежала радиальная подсветка во всю ширину (58% 46% at 50% 50%): она дублировала свечение за роботом, но, в отличие от него, не была привязана к объекту — тон ровной полосой доходил до 82% высоты и там гас. На стыке с экраном 4 это читалось сменой фона, а docs/visual-language.md требует прямо обратного: секции своего фона не имеют, подсветка допустима только когда работает на объект. Свечение за фигурой осталось — оно на .intro__visual::before и привязано к роботу. */ } /* Бейдж свой не заводим: в макете он тут 18/48, но в base.css надзаголовок секции сведён к одному компоненту 15/46, и локальный размер снова разводил бы бейджи по странице (docs/audit-design.md — шесть высот и четыре кегля). */ /* ---------- Декор ---------- Объект секции — робот, объект-силуэт, значит кольца ореолом по его оси (docs/visual-language.md, «Декор: два вопроса»). Кольца выведены из левого нижнего угла в центр ещё раньше — правило это подтверждает и оставляет как есть. Две точечные сетки по верхним углам сняты. Они не были привязаны ни к чему: стояли «чтобы полоса шапки не висела в пустоте», то есть ровно по тому вкусовому основанию, из-за которого приём и перестал читаться приёмом. Секция уже держит свой объект кольцами, второй мотив в ней не решает ничего. */ .intro__rings { width: min(52vw, 900px); aspect-ratio: 1; left: 50%; top: 22%; transform: translateX(-50%); /* Круг выше секции: при 22% сверху его нижняя четверть уходит на 100+px за нижнюю кромку, а на секции стоит overflow: hidden — на стыке с экраном 4 были видны два обрубленных конца дуг. Наращивать секцию ради декора нельзя (она обязана влезать в окно ноутбука), сдвигать круг вверх тоже: он работает ореолом за фигурой и должен стоять на её оси. Поэтому кольца гаснут маской и до кромки доходят с нулевой плотностью — обрываться нечему. Стоп 68% выбран по самой тесной ширине. Круг растёт от vw, а его верх отсчитывается долей от высоты секции, поэтому запас до стыка везде разный, и минимум приходится не на край диапазона, а на 1700: там растворение кончается за 37px до кромки, на 1920 — за 51, на 1440 — за 92, на 1280 — за 145. На 72% запас на 1700 схлопывался до одного пикселя, поэтому стоп именно 68. */ -webkit-mask-image: linear-gradient(180deg, #000 46%, transparent 68%); mask-image: linear-gradient(180deg, #000 46%, transparent 68%); } /* ---------- Сетка ---------- База — одна колонка: шапка, четыре карточки, робот, вывод. Порядок в разметке уже правильный, поэтому на узких экранах ничего переставлять не нужно, и робот в любом случае стоит ровно над выводом. */ .intro__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); } /* Список карточек — один