/* ==========================================================================
Секция 9 — как продать ИИ БРО
Главное здесь — карточка «Демо для клиента». Она не декорация:
в вырезанном роботе на её месте дыра, поэтому карточка обязана лежать
поверх робота на любой ширине. Замеры и обоснование — в комментарии
над блоком в 09-selling.html и в docs/design-review.md.
========================================================================== */
.selling {
overflow: hidden;
}
/* Кольца-ореол за роботом.
Было: top: -6% — доля от высоты секции. Высота секции меняется с шириной
в разы (1333px на 1440 против 1783 на 375), поэтому и вылет за верхнюю
кромку гулял: 80px на 1440, 95 на 1920, 105 на 768 и 107 на 375 — то есть
на телефоне за кромкой оказывалось 59% круга. На .selling стоит
overflow: hidden, и весь этот вылет срезался прямой линией ровно на стыке
с экраном 8: две дуги обрывались горизонтально. Заодно на 768 и 375 круг
уезжал так высоко, что переставал быть ореолом за фигурой и висел
отдельным пятном над заголовком.
Стало: сдвиг считается от собственного размера круга, а не от высоты
секции. Доля вылета теперь одна на всех ширинах — 11.5%, и её накрывает
маска: до 15% высоты коробки узор полностью прозрачен, к 40% выходит
на полную плотность. На кромку секции приходится 11.5% — там плотность
уже нулевая, резать overflow: hidden нечего, а верхушки дуг не
обрубаются, а растворяются. На 1440 композиция не меняется вовсе
(83px против прежних 80), на узких экранах круг возвращается к роботу. */
.selling__rings {
--rings-size: min(48vw, 700px);
width: var(--rings-size);
aspect-ratio: 1;
top: calc(var(--rings-size) * -0.115);
right: 2%;
-webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 15%, #000 40%);
mask-image: linear-gradient(180deg, transparent 0, transparent 15%, #000 40%);
}
/* ---------- Сетка ---------- */
/* Робот занимает правую колонку целиком, слева — заголовок,
под ним лента шагов и вывод с готовой фразой. */
/* Замер по макету (экран 9, вьюпорт 1920):
левая колонка 96..1136 = 1040 (по краям карточек-шагов и плашки с фразой)
робот занимает всё, что правее, до края экрана
зазор между колонками 48
В макете плечо робота слегка заходит на левую колонку; в сетке колонки
не перекрываются, поэтому роботу достаётся 745 вместо 787. */
/* Вывод вынесен в отдельный ряд во всю ширину сетки. Пока он сидел в левой
колонке, справа под роботом оставалась пустая полоса в треть экрана —
та же беда, что была на экране 10, и лечится так же
(10-community.css, .community__callout). */
.selling__grid {
display: grid;
grid-template-columns: minmax(0, 1.58fr) minmax(0, 1fr);
grid-template-areas:
"head visual"
"body visual"
"phrase phrase";
align-items: start;
gap: var(--s-6) var(--s-7);
}
.selling__head { grid-area: head; }
.selling__visual { grid-area: visual; }
.selling__body { grid-area: body; }
/* ---------- Шапка ---------- */
/* Ширина под две строки, как в макете: «БРО, НЕ ПРОДАВАЙ» / «МЕНЯ КАК «ЕЩЁ ОДИН ИИ»» */
.selling__title {
margin-block: var(--s-5) var(--s-5);
max-width: 22ch;
}
/* ---------- Части перечисления в подзаголовке ----------
«Клиенту важны не промпты, а результат: быстрый ответ, нормальная
обработка и больше продаж». Перечисление из трёх частей, и каждая часть —
это два слова, которые читаются вместе. Браузеру про это ничего
не известно, поэтому он рвал их посередине там, где не хватало полстроки.
Замер до правки (колонка = ширина окна минус поля):
320–400 «Клиенту важны не промпты, / а результат: быстрый ответ, /
нормальная обработка / и больше продаж.» — целые, но 4 строки
410 «…а результат: быстрый ответ, нормальная / обработка и больше…»
500–540 «…а результат: быстрый / ответ, нормальная обработка…»
768 «…быстрый ответ, нормальная / обработка и больше продаж.»
Заказчик про это и говорил: «результат… больше продаж тоже разбита
на две строки — таких элементов быть не должно».
Почему связка через класс, а не через в тексте. Неразрывный пробел
работает на любой ширине, в том числе на принятом десктопе, и там он
переставляет разбивку: на 1440 первая строка 713 → 583, на 1920 951 → 778.
В этом круге десктоп не меняется, поэтому связка включается медиазапросом.
Граница 999 — принятый десктоп начинается с 1000; планшет 768–999 рвал
«нормальная / обработка» ровно так же, и его правка тоже касается.
Переполнения связки не дают: самая длинная, «нормальная обработка», просит
205px при колонке 288 на 320 — это самый узкий случай на сайте. */
@media (max-width: 999px) {
.selling__nb { white-space: nowrap; }
}
/* ---------- Лента разговора ----------
Было: четыре одинаковые карточки, в каждой значок в кружке, номер в углу,
заголовок и подпись. Заказчик: «иконка, цифра, заголовок, подзаголовок —
куча какого-то воздуха, как-то это выглядит вообще неаккуратно. Добавь
более прикольную визуализацию процесса продажи».
Две беды были разом. Внутри карточки контент стоял по верху и по низу,
а между ними висела пустота — карточку растягивал сосед-робот, а наполнять
её было нечем. И четыре коробки в ряд читались как четыре независимых
пункта: что это последовательность одного разговора, говорил только номер
в углу, то есть ничего не говорило.
Стало: шаги нанизаны на общий рельс. Связь видно глазом, номер работает —
он и есть узел рельса. Элементов в шаге три вместо четырёх: значок в кружке
снят (его работу делает узел), а пояснительная подпись заменена репликой —
тем, что ты реально говоришь клиенту на этом шаге. Подпись и реплика
говорили одно и то же («Где теряются лиды и почему падают продажи» против
«Смотри: заявки есть, а первый ответ клиент ждёт три часа»), и держать обе
значило вернуть ту самую кучу элементов, с которой всё начиналось.
Почему лента вертикальная, а не горизонтальная. Шаги живут в левой колонке
рядом с роботом: на 1440 это 791px, на четыре колонки с зазорами выходит
по 180px — в такой ширине заголовок «ПРОДАВАЙ РЕЗУЛЬТАТ» рвётся на две
строки, а реплика на пять, ровно та беда, из-за которой карточки и были
переведены на 2×2. Вертикальный рельс, наоборот, даёт каждому шагу всю
ширину колонки и остаётся одним и тем же приёмом на всех ширинах:
ни перестроения на 2×2, ни змейки из соединителей.
Рельс безопасен для секции с overflow: hidden — он целиком внутри списка
и обрывается на последнем узле, до кромок секции не доходит. */
.selling__flow {
/* Узел рельса. Габарит один на ленту, от него считается и кегль цифры,
и положение линии — поэтому размер тут один, а не в трёх местах. */
--step-node: clamp(40px, 3.2vw, 56px);
--step-gap: clamp(var(--s-6), 2.2vw, var(--s-7));
margin: var(--s-6) 0 0;
padding: 0;
list-style: none;
}
/* Заголовок стоит в одной строке с узлом и центрируется по нему, остальное
уходит во вторую колонку под заголовок. Так узел не висит сбоку от абзаца,
а держит строку, которую подписывает. */
.selling__step {
position: relative;
display: grid;
grid-template-columns: var(--step-node) minmax(0, 1fr);
grid-template-areas:
"num title"
". say";
column-gap: clamp(var(--s-4), 1.3vw, var(--s-5));
align-items: start;
}
.selling__step + .selling__step { margin-top: var(--step-gap); }
/* Отрезок рельса до следующего узла. Рисуется на самом шаге, а не одной
линией на весь список: тогда он точно упирается в узлы и не зависит от
того, во сколько строк встала реплика. У последнего шага соединителя нет —
разговор на нём заканчивается.
Отбивка в 8px сверху и снизу: линия не касается кружков, а подходит к ним,
иначе стык кружка и линии читается как обрыв. */
.selling__step:not(:last-child)::before {
content: '';
position: absolute;
left: calc(var(--step-node) / 2 - 1px);
top: calc(var(--step-node) + var(--s-2));
bottom: calc(var(--s-2) - var(--step-gap));
width: 2px;
border-radius: var(--r-pill);
background: linear-gradient(180deg, var(--rail-from), var(--rail-to));
pointer-events: none;
}
/* Рельс наливается к концу разговора: от еле заметного к плотному.
Это то же «движение», о котором заказчик говорил на экране 4, только
вертикальное — сделка идёт от первой фразы к тесту, а не наоборот. */
.selling__step:nth-child(1) { --rail-from: rgba(124, 59, 246, .10); --rail-to: rgba(124, 59, 246, .20); }
.selling__step:nth-child(2) { --rail-from: rgba(124, 59, 246, .20); --rail-to: rgba(124, 59, 246, .32); }
.selling__step:nth-child(3) { --rail-from: rgba(124, 59, 246, .32); --rail-to: rgba(124, 59, 246, .52); }
/* Узел. Заголовочным шрифтом, кегль считается от габарита кружка, поэтому
цифра не плывёт относительно него ни на одной ширине.
Кольца-прогресса вокруг узла нет намеренно: этот приём занят карточками
дней (экран 4), и повторять его здесь — плодить одинаковые украшения. */
.selling__step-num {
grid-area: num;
display: flex;
align-items: center;
justify-content: center;
width: var(--step-node);
height: var(--step-node);
border-radius: var(--r-pill);
background: var(--grad-soft);
box-shadow: inset 0 0 0 1px rgba(124, 59, 246, .14);
color: var(--brand-dark);
font-family: var(--font-display);
/* Не ступень шкалы намеренно: это цифра внутри кружка, её размер задан
геометрией узла, а не типографикой. Кружок тянется от вьюпорта —
фиксированный кегль из шкалы на узком экране из него бы вылез. */
font-size: calc(var(--step-node) * .42);
font-weight: 700;
line-height: 1;
/* Ореол вокруг узла — отклик на курсор, ступень --t-fast:
правило в base.css, раздел «Движение». */
transition: box-shadow var(--t-fast);
}
/* Последний узел залит: на нём разговор закрывается тестом, и это
единственный смысловой удар цветом в левой колонке. Материал тот же,
что у номеров дней на экране 4 (перелив через три брендовых тона плюс
блик), — блоки должны выглядеть из одного набора, а не из двух. */
.selling__step:last-child .selling__step-num {
background:
/* Блик .16 — тот же, что у номеров дней (04-days.css): там он опущен
с .30 ради контраста белой подписи, и оставить здесь прежний значило бы
развести два кружка, которые обязаны выглядеть из одного набора. */
radial-gradient(118% 118% at 26% 18%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 58%),
linear-gradient(135deg, var(--brand-light) 0%, var(--brand) 44%, var(--brand-dark) 100%);
box-shadow: var(--glow-brand);
color: #fff;
}
/* Отклик у шага скромный: карточки под ним больше нет, поднимать нечего,
поэтому наведение отзывается узлом — вокруг него появляется ореол.
Ровно то, что делает интерфейс интерфейсом, и ни каплей больше.
Медиазапрос — общее правило сайта, разбор в base.css: иначе на телефоне
тапнутый шаг остаётся в ореоле и читается как выбранный. */
@media (hover: hover) {
.selling__step:hover .selling__step-num {
box-shadow: inset 0 0 0 1px rgba(124, 59, 246, .22),
0 0 0 6px rgba(124, 59, 246, .10);
}
.selling__step:last-child:hover .selling__step-num {
box-shadow: var(--glow-brand), 0 0 0 6px rgba(124, 59, 246, .12);
}
}
/* Кегль подтянут к шкале .h3: заголовок шага держит строку рядом с узлом
в 56px, и прежние 22px рядом с ним читались подписью, а не заголовком. */
.selling__step-title {
grid-area: title;
align-self: center;
font-size: var(--fz-body);
font-weight: 700;
line-height: 1.3;
letter-spacing: var(--ls-caps-md);
text-transform: uppercase;
/* Капс не переносится: свод, «Переносы». */
-webkit-hyphens: none;
hyphens: none;
}
/* Реплика — то, что говоришь клиенту. Пузырь, а не строка в кавычках:
форма пузыря уже заведена на экране 2 (переписка с клиентом), и здесь
она означает то же самое — прямую речь. Кавычек внутри нет: пузырь
и кавычки вместе — два приёма для одной задачи.
Скруглённый угол срезан слева сверху: хвостик смотрит на узел, из которого
реплика следует. Тени нет — заказчик отдельно отметил, что «плашка, фон,
тень небольшая» повторяется по сайту слишком часто; здесь держат волосяная
кромка внутрь и перелив, а глубину даёт разница плотности с фоном.
fit-content обязателен. Растянутый на всю колонку пузырь — это 400px пустоты
справа от короткой фразы, то есть ровно тот воздух, из-за которого сносили
карточки. По длине фразы пузыри выходят разной ширины, и лента читается
перепиской, а не столбиком одинаковых плашек. */
.selling__step-say {
grid-area: say;
width: fit-content;
max-width: 100%;
margin-top: var(--s-4);
padding: clamp(var(--s-3), 1vw, var(--s-4)) clamp(var(--s-4), 1.3vw, var(--s-5));
border-radius: var(--r-lg);
border-top-left-radius: var(--s-1);
background: var(--grad-soft);
box-shadow: inset 0 0 0 1px rgba(124, 59, 246, .13);
color: var(--ink);
/* Кегль и начертание — те же, что у пузырей переписки на экране 2
(.client-chat__msg): это один и тот же приём, и выглядеть он обязан
одинаково, иначе прямая речь на двух экранах набрана из разных наборов. */
font-size: var(--fz-lead);
font-weight: 500;
line-height: 1.45;
}
/* ---------- Готовая фраза ----------
Была длинная фиолетовая плашка во всю ширину. Заказчик: «этих длинных
фиолетовых полосок уже слишком много становится, нужно от них немножко
отходить». Теперь это общий вывод сайта — полка света (.verdict
в base.css), и оформление целиком приходит оттуда: секции остаются
привязка к сетке, верхний отступ и одна ручка --verdict-measure.
Прижата вправо: вывод следует из карточки «Демо для клиента», она
в правой колонке, а световой шлейф уходит влево, под ленту шагов.
Мера была 26em и давала три-четыре строки. Дело не только в строках:
полка — это блок плюс вылеты .verdict--right, вместе 1.52 ширины блока,
и при 26em она занимала 100% ширины полосы на 1280-1600. То есть вывод
опять шёл от края до края полосы — ровно то, что заказчик называл
«длинной фиолетовой полоской». На 22em полка занимает 84%, у полосы
остаются поля, и кромка перестаёт читаться разделителем секций.
Фраза под эту меру укорочена (см. комментарий в 09-selling.html):
две строки на 1280 / 1440 / 1600 / 1920 — 556+566, 626+637,
695+707, 777+790.
margin-bottom обнулён руками: у figure есть собственные поля от браузера
(margin: 1em 40px), боковые гасит margin-inline из .verdict, вертикальные —
нет, и под выводом появлялся лишний отступ в строку. */
.selling__phrase {
grid-area: phrase;
--verdict-measure: 22em;
margin-top: var(--s-6);
margin-bottom: 0;
}
/* У blockquote тоже свои поля от браузера. Кегль, начертание и интерлиньяж
наследуются от .verdict — один кегль на все шесть выводов сайта. */
.selling__phrase-text {
max-width: none;
margin: 0;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
}
/* ---------- Робот и карточка демо ---------- */
/* Куртка робота доходит до последнего пикселя файла: если правый край картинки
встанет по границе контейнера, будет виден прямой вертикальный срез фигуры.
Поэтому колонка уводится вправо за контейнер — до края экрана, включая поля
по бокам на широких мониторах. Лишнее срезает overflow: hidden у секции. */
.selling__visual {
margin-right: calc(-1 * (var(--container-pad) + max(0px, (100vw - var(--container)) / 2)));
}
/* aspect-ratio держит пропорции файла, поэтому проценты внутри считаются
от реального размера робота — и карточка попадает точно в дыру. */
/* Замер по макету: фигура робота занимает 1133..1920, то есть ≈787px */
/* НЕ ОБРЕЗАТЬ ФИГУРУ ЧЕРЕЗ ЭТУ ОБЁРТКУ. Проверено, приём здесь не работает —
в отличие от первого экрана, где кадр по грудь принят заказчиком.
Разница механическая. У ![]()
тут object-fit: contain, а не cover: ужать
aspect-ratio обёртки значит не отрезать низ фигуры, а УМЕНЬШИТЬ её целиком.
Замер на 375: при 1372/1800 картинка 351×509 → 318×460, при 1372/1490 →
263×381. Секция при этом действительно садится (1845 → 1797 → 1718),
и именно эти пиксели видит замер «−128», но платит за них фигура.
Карточка демо прибита процентами к обёртке и уменьшается медленнее
(её ширина 88% обёртки), поэтому при 1372/1490 она становится шире самого
робота: на снимке от фигуры остаётся полоска шапки сверху и кусок плеча
справа, всё остальное закрыто карточкой. Формально вырез накрыт
(проверка перекрытия проходит на всех трёх вариантах), фактически объекта
секции больше нет.
Освободить карточку, как это сделано на первом экране, тоже нельзя:
там плашка ушла в общий список под фигурой, а здесь карточка «Демо для
клиента» — сам объект секции, и наложение как раз и экономит высоту.
Арифметика: робот по грудь ≈254 + зазор 24 + карточка отдельным блоком
≈356 = 634 против нынешних 509. Разложить дороже, чем оставить. */
.selling__robot-wrap {
position: relative;
width: min(100%, 790px);
margin-inline: auto 0;
aspect-ratio: 1372 / 1988;
}
/* Свечение за фигурой — тот же приём, что на экранах 1 и 3: подсветка работает
на объект, а не на секцию. Пятно сидит в средней трети обёртки и затухает
задолго до верхней и нижней кромок секции, поэтому стыка с соседними
экранами не создаёт (docs/visual-language.md). */
.selling__robot-wrap::before {
content: '';
position: absolute;
left: 52%;
top: 26%;
width: min(96%, 620px);
aspect-ratio: 1;
transform: translateX(-50%);
border-radius: 50%;
background: radial-gradient(circle, rgba(124, 59, 246, .16) 0%, transparent 66%);
pointer-events: none;
}
.selling__robot {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: contain;
}
.selling__demo {
display: flex;
flex-direction: column;
padding: var(--s-6);
border-radius: var(--r-lg);
background: var(--surface);
/* Волосяная брендовая кромка поверх тени: карточка лежит на тёмной куртке,
и без неё белое на чёрном обрывается слишком резко. */
box-shadow: var(--sh-lift), 0 0 0 1px rgba(124, 59, 246, .07);
}
/* Зона выреза (замер агента по ассетам, в процентах от размеров robot-sell.webp):
left 8.31%, top 50.65%, правый край 79.08%, нижний край 99.55%.
Карточка прибита НИЖНИМ краем (bottom: -2%), а не верхним: если текст не влезет
в min-height, она вырастет ВВЕРХ, на робота, а не вниз, на ленту шагов.
В макете карточка занимает 7.6%..79.9% ширины робота — то есть ровно накрывает
вырез. Прежние -4%..82% были заметно шире макета, поэтому границы подтянуты
к замеру, но с запасом по всем четырём сторонам:
left 6% ≤ 8.31% правый край 81% ≥ 79.08%
верх 48% ≤ 50.65% низ 102% ≥ 99.55%
(верх = 100% − 2% − min-height 54%). Проценты считаются от размеров картинки,
поэтому запас одинаков на любой ширине. Проверено на 375 / 768 / 1280 / 1920.
min-height здесь ещё и потолок по факту: поля строк-метрик подобраны так,
чтобы содержимое укладывалось в 54% и карточка не росла вверх сверх макета. */
.selling__demo--pinned {
position: absolute;
left: 6%;
bottom: -2%;
width: 75%;
min-height: 54%;
z-index: 2;
}
.selling__demo-head {
display: flex;
align-items: center;
gap: var(--s-4);
}
/* Кегли и размеры внутри карточки — замер по макету при 1920:
аватар 60, «Демо для клиента» 24, подпись и статус 20,
иконка метрики 46, название метрики 25, значение 33. */
/* Аватар. Было: общий значок «человек» в кружке с брендовой заливкой —
заказчик назвал его неинтересным. Теперь в кружке знак самого ИИ БРО,
тот же файл, что в шапке диалога ниш на экране 5. От прежнего решения
осталось ровно то, что работало: круглая форма и свечение — карточка
показывает демо, которое идёт прямо сейчас, и собеседник должен
читаться активным.
Кружок и тон задаются здесь, а не внутри рисунка: знак одноцветный
и живёт в спрайте, своих заливок у него нет. Тон — --ink: персонаж
на рендерах чёрный. Собственных стилей у знака нет ни в одной секции,
поэтому два экрана больше не могут разойтись — прежде классы
.avatar-bro__* объявлялись и здесь, и в 05-niches.css, с разными
значениями, и побеждал тот файл, который подключён позже. */
.selling__demo-avatar {
display: inline-flex;
width: clamp(40px, 3.1vw, 60px);
height: clamp(40px, 3.1vw, 60px);
flex: none;
border-radius: var(--r-pill);
overflow: hidden;
background: var(--grad-soft);
color: var(--ink);
box-shadow: var(--glow-brand);
}
.selling__demo-avatar svg {
display: block;
width: 100%;
height: 100%;
}
.selling__demo-who { min-width: 0; }
.selling__demo-title {
font-size: var(--fz-body);
font-weight: 700;
line-height: 1.3;
}
.selling__demo-sub {
color: var(--muted);
font-size: var(--fz-small);
line-height: 1.3;
}
.selling__demo-status {
display: flex;
align-items: center;
gap: var(--s-2);
margin-left: auto;
color: var(--muted);
font-size: var(--fz-small);
white-space: nowrap;
}
/* Точка «Онлайн» медленно пульсирует ореолом. Это единственная анимация
на экране, и она не украшение: демо показывают клиенту вживую, и статус
должен читаться как включённый прямо сейчас. 2.8s — на грани заметности.
Ореол рисует второй кружок (::after), а не растущая box-shadow у первого.
Причина в свойстве: box-shadow считается на каждом кадре в главном потоке
и не композируется (свод, «Что анимировать»), а на телефоне это вечная
анимация в кадре рядом с лентой шагов — тот же расход, из-за которого
в base.css погашен блик кнопки ниже 1000px. Здесь гасить нечего: тот же
рисунок собран на transform и opacity, то есть на стадии композиции,
и работает на любой ширине.
Кружок-ореол прибит к центру точки: точка — первый флекс-элемент
шириной 8px, значит её центр всегда на 4px от левого края строки. */
.selling__demo-status { position: relative; }
.selling__demo-status::before {
content: "";
width: 8px;
height: 8px;
border-radius: var(--r-pill);
background: var(--good-ink);
}
.selling__demo-status::after {
content: "";
position: absolute;
left: 4px;
top: 50%;
width: 8px;
height: 8px;
margin: -4px 0 0 -4px;
border-radius: var(--r-pill);
background: var(--good-ink);
pointer-events: none;
animation: selling-online 2.8s ease-out infinite;
}
@keyframes selling-online {
0% { transform: scale(1); opacity: .35; }
70%, 100% { transform: scale(2.75); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.selling__demo-status::after { animation: none; opacity: 0; }
}
/* Карточка заведомо выше своего содержимого — она обязана дотянуться
до низа робота. Чтобы низ не пустовал, три метрики делят остаток поровну. */
.selling__metrics {
flex: 1;
display: grid;
grid-template-rows: repeat(3, minmax(0, 1fr));
gap: var(--s-4);
margin: var(--s-5) 0 0;
padding: 0;
list-style: none;
}
/* Поле строки 16, а не 24: замер макета даёт строку 105px при иконке 46
и двух строках названия, то есть поле около 18. С прежними 24 карточка
вырастала до 58% высоты робота против 46% в макете. */
/* Зазор в строке 12, а не 24. Раньше 24 стояло на десктопе и 12 — на планшете
и телефоне (два медиазапроса ниже по файлу, оба сняты как ставшие лишними).
Причина свести к одному значению — правка заказчика: «14 мин» стало
«10 секунд», а это на 38–46px шире, и место значение забирает у названия
слева. На зазоре 24 «Среднее время ответа» вставало в три строки при
двухстрочных соседях, и карточка вырастала на 46–65px, наезжая на робота
(замер: 1000 → 411/476, 1440 → 431/477). На зазоре 12 карточка возвращается
к принятой геометрии: 1000 411, 1440 431, 1600 481, 1920 583 — ровно как
до правки, а на 1200 и 1280 названий становится даже на строку меньше.
Остаётся полоса 1300–1366, где первое название всё же занимает три строки;
высота карточки там не растёт. */
.selling__metric {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: var(--s-3);
padding: var(--s-4);
border: 1px solid var(--line);
border-radius: var(--r-md);
background: var(--bg-tint);
}
/* Значок метрики сидит в собственном кружке с переливом, а не висит контуром
на подложке строки: голый значок в 46px рядом с крупным числом выглядел
вырезанным из бесплатного набора. Габарит кружка не больше высоты строки
(её задают две строки названия), поэтому карточка не растёт вверх. */
.selling__metric-icon {
width: clamp(28px, 2.6vw, 50px);
height: clamp(28px, 2.6vw, 50px);
padding: clamp(5px, .55vw, 11px);
border-radius: var(--r-sm);
background: var(--grad-soft);
box-shadow: inset 0 0 0 1px rgba(124, 59, 246, .12);
color: var(--brand);
}
.selling__metric-name {
font-size: var(--fz-body);
line-height: 1.35;
}
.selling__metric-value {
color: var(--brand);
font-size: var(--fz-h3);
font-weight: 700;
line-height: 1;
white-space: nowrap;
}
/* ---------- Адаптив ---------- */
/* Лента шагов перестроений не требует: она одна колонка на любой ширине.
Раньше здесь стояли три брейкпоинта (1700, 1000, 760) только на то,
чтобы карточки-шаги переезжали 4 → 2×2 → 2 → 1. */
@media (max-width: 1000px) {
.selling__grid {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"head"
"visual"
"body"
"phrase";
gap: var(--s-6);
}
.selling__title { max-width: none; }
/* Отступ до ленты держит зазор сетки: сверху теперь не лид, а робот. */
.selling__flow { margin-top: 0; }
/* В одну колонку реплика во всю ширину экрана становится длиннее предела
читаемости — ограничиваем меру, а не ширину рельса. */
.selling__step-say { max-width: min(100%, var(--measure)); }
/* Робот остаётся прижатым к правому краю экрана — по той же причине,
что и на десктопе: иначе виден прямой срез куртки. */
.selling__robot-wrap { width: min(100%, 480px); }
/* Секция вытягивается почти вдвое, а верх круга по-прежнему отсчитывался
от его собственного размера — ореол оставался у самой кромки, робот
уезжал вниз, и связи между ними не оставалось. Вертикаль задана
через центр: середина круга садится на 34.6% высоты секции — там центр
робота на всём диапазоне (замер: 32.0% на 375, 33.4% на 640,
34.5% на 768, 34.8% на 999). Горизонталь прежняя: и робот, и круг
прижаты вправо, поэтому оси совпадают сами.
Размер тот же, что у ореолов экранов 3 и 4 в одноколоночной раскладке.
Круг целиком внутри секции — маска, гасившая вылет вверх, не нужна. */
.selling__rings {
--rings-size: min(88vw, 560px);
top: calc(34.6% - var(--rings-size) / 2);
-webkit-mask-image: none;
mask-image: none;
}
}
@media (max-width: 640px) {
/* Карточка демо мельчает вместе с роботом — следим, чтобы она
всё ещё накрывала зону дыры целиком.
Десктопные 5%..81% на 375px дают карточку в 255px, и шапка в ней рассыпается
на четыре строки. Расширяем — запас над вырезом только растёт:
left -2% ≤ 8.31%, правый край 86% ≥ 79.08%. */
.selling__demo--pinned {
left: -2%;
width: 88%;
padding: var(--s-4);
border-radius: var(--r-md);
}
.selling__demo-avatar { width: 40px; height: 40px; }
.selling__demo-head { gap: var(--s-3); }
.selling__metrics { gap: var(--s-2); }
/* Зазор в строке 8: на телефоне карточка ограничена зоной выреза на картинке
робота, и после «10 секунд» (значение 95px против 63 у «14 мин») названию
оставалось 102-104px — «Среднее время ответа» вставало в три строки,
а карточка вырастала с 351 до 416 и накрывала 94% фигуры на 320
и 83% на 375. Восемь пикселей возвращают названию 112-114 и карточке —
прежние 351/356, то есть 80% и 70% робота, как до правки значения. */
.selling__metric { column-gap: var(--s-2); padding: var(--s-3); }
/* Кружок значка мельчает вместе с карточкой, но остаётся кружком:
28px внешних при поле 5 дают значок 18px — нижняя граница читаемости. */
.selling__metric-icon { width: 28px; height: 28px; padding: 5px; }
}
/* Отбивка перед выводом.
Замер на 375: между последней репликой ленты и полкой вывода 88px —
самый большой пустой ход секции (следующие по величине 42, между шагами).
Складывался он из двух отбивок, которые в одноколоночной раскладке
встают друг на друга: зазор сетки (--s-6, он же отделяет робота
от ленты) плюс собственный margin-top полки (тоже --s-6).
На десктопе слагаемых два не случайно: там вывод стоит отдельным рядом
под ДВУМЯ колонками, и ему нужна отбивка крупнее внутренней. В столбике
над ним ровно один сосед, и двойной счёт превращается в дыру.
Оставляем зазор сетки: 32 плюс верхнее поле самой полки дают 56 —
заметно больше 42 между шагами ленты и заметно меньше 96 между
секциями. Иерархия отбивок цела, дыры нет. */
/* Второе правило того же блока — мера вывода.
Заказчик: «эту фразу нужно разместить в три строки, пошире». До правки
на телефоне выходило четыре: «Мы приводим тебе / заявки. Покажу, /
как ИИ БРО доведёт / их до продажи».
Ширину вывода на телефоне держит общее правило base.css: на ≤767 мера
секции умножается на .62, чтобы шесть выводов сайта не встали шестью
одинаковыми прямоугольниками во всю ширину контейнера. Секционные 22em
давали 286px, а фраза просит 326 — отсюда и четвёртая строка.
Ручка у секции ровно одна, ей и правим: 30em снимают потолок .62
(30 × .62 = 18.6em = 390px), дальше ширину держит контейнер, и вывод
встаёт «пошире» — во всю полосу. Кегль не тронут: он общий на все шесть
выводов и в секции не меняется.
Что вышло (замер): 375 / 393 / 430 / 480 / 600 / 767 — три строки
«Мы приводим тебе заявки. / Покажу, как ИИ БРО / доведёт их до продажи»,
и третья строка ровно совпала с выделенной маркером частью фразы.
На 320 остаётся четыре: там колонка 288, а первой строке нужно 294 —
на этой ширине три строки не собираются ни при какой мере.
Из шести выводов сайта широким становится только этот: у остальных
пяти множитель .62 в силе, приём с разными ширинами не рассыпается. */
@media (max-width: 767px) {
.selling__phrase {
--verdict-measure: 30em;
margin-top: 0;
}
}
/* Расширения карточки выше не хватило: замер на живой странице даёт
шапку в ЧЕТЫРЕ строки на 320 и 375 («Демо / для клиента / Проект: /
интернет-магазин») — ровно то, что правило выше объявляло исправленным.
Арифметика простая: на 375 карточка 312, поля по 16 — остаётся 280;
аватар 40 и зазор 12 забирают 52, статус «Онлайн» — ещё 65 с зазором.
Текстовой колонке достаётся около 150px, а «Демо для клиента» просит 145
и «Проект: интернет-магазин» — 185. Обе строки ломаются пополам.
Дальше расширять карточку нельзя: её ширина привязана к зоне выреза
на картинке робота, запас там уже выбран.
Поэтому лишнее забирает не текст, а статус: на узких экранах он уходит
на свою строку под текстовую колонку и выравнивается по ней отбивкой
в ширину аватара с зазором. Колонке достаются все 228px — обе строки
встают целиком, шапка читается в две строки плюс статус, а не в четыре
огрызка. Порог 479, а не 375: подпись ломалась пополам вплоть до 479.
Высота при этом не растёт (замер: было 81px, стало 73), а значит
карточка не полезет вверх на робота — условие min-height: 54% в силе. */
@media (max-width: 479px) {
.selling__demo-head { flex-wrap: wrap; }
/* Именно basis 0, а не auto: при auto базой становится max-content, на 320
колонка перестаёт помещаться рядом с аватаром и переносится под него —
шапка вырастает с 81 до 128px, то есть лечение выходит хуже болезни.
С нулевой базой колонка остаётся в строке с аватаром и ужимается. */
.selling__demo-who { flex: 1 1 0; min-width: 0; }
/* Строка статуса получала ширину 100% ПЛЮС собственную отбивку и ровно
на неё и вылезала. Процент во flex-basis считается от ширины контента
.selling__demo-head, а margin-left во флексе лежит СНАРУЖИ базиса; при
flex-shrink: 0 ужаться неоткуда, поэтому правый край уходил за шапку
ровно на 52px (аватар 40 + --s-3) на всей полосе 320-479 — оттого вылет
и не зависел от ширины экрана и совпадал на обеих страницах.
Замер (шапка / правый край бокса статуса / вьюпорт):
375 — 277 / 362 / 375; 320 — 235 / 313 / 320.
Наружу дефект не выходил и прокрутки не давал: до кромки экрана бокс
просто не дотягивал. Не видно его было потому, что фона и рамки у бокса
нет, а текст в строке прижат влево. Дефект тихий — вылез бы при первой
же правке выравнивания статуса или при появлении у него подложки.
Разрешаем сжатие: отрицательный остаток строки (-52px) она гасит сама
и встаёт от отбивки до правой кромки шапки. Меняется одна цифра —
flex-shrink. Базис и отбивка прежние, значит перенос статуса на свою
строку и выравнивание по текстовой колонке те же, высота карточки
не изменилась — условие min-height: 54% не затронуто.
Автоминимум сжатию не мешает: min-content строки — точка 8 плюс зазор
--s-2 плюс «Онлайн» кеглем 15 — около 69px против 183 доступных на 320.
Поэтому white-space: nowrap из базового правила безопасен, он и не был
причиной.
Писать вместо этого flex: 0 0 calc(100% - 40px - var(--s-3)) нельзя:
52 продублируются в двух местах и разъедутся при первой же правке
аватара. Заменить отбивку полем (padding-left) — тоже: ореол ::after
прибит к 4px от левого края строки, то есть к центру точки-первого
флекс-элемента, и поле сдвинуло бы точку, оставив ореол у кромки. */
.selling__demo-status {
flex: 0 1 100%;
margin-left: calc(40px + var(--s-3));
}
}
/* Строка метрики на узком телефоне.
Замер до правки (320@2): названию метрики остаётся 94-109px при трёх
колонках «значок | название | значение». В такой колонке «Тёплых лидов
передано в CRM» встаёт в ЧЕТЫРЕ строки, «Среднее время ответа» в три,
а слово «Квалификация» просит около 96px и упирается в кромку колонки
(перенос по слогам у этой роли погашен в base.css намеренно — это
название показателя в мокапе интерфейса, дефис посреди слова выдаёт
вёрстку). Отдать место можно только за счёт колонки значения: сама
карточка расширена до предела, её ширину держит зона выреза на картинке
робота.
Отдаёт место значок. Он ничего не сообщает сверх названия: часы при
«Среднем времени ответа», график при «Тёплых лидах», чек-лист при
«Квалификации» — это иллюстрация уже написанного слова. На 320 он стоит
28px плюс зазор 12, то есть забирает 40 из 244 доступных, а взамен
название рвётся на четыре строки.
Проверенные варианты, которые отвергнуты замером:
— значение под название (значок остаётся слева, строка в два ряда):
карточка вырастает на 69px и на 320 накрывает робота ЦЕЛИКОМ —
100.9% его высоты вместо 73%; фигуры на экране не остаётся;
— уменьшить кегль значения: даёт названию 20-25px, «Тёплых лидов
передано в CRM» всё равно стоит в три строки.
Снятый значок отдаёт 40px, название встаёт в две строки, а карточка
становится НИЖЕ прежней — робот виден. */
@media (max-width: 359px) {
.selling__metric {
grid-template-columns: minmax(0, 1fr) auto;
column-gap: var(--s-2);
/* Поле строки на ступень мельче: карточка обязана оставаться ниже
робота, иначе от фигуры на экране ничего не остаётся. Поле сведено
к одной величине по той же причине, что и зазор строки выше:
значение «10 секунд» шире прежнего на 32px, и колонке названия
эти 8px нужны, чтобы «Среднее время ответа» осталось в двух строках
(замер на 320: колонка 102 → 114 при самой длинной строке 105). */
padding: var(--s-2);
}
.selling__metric-icon { display: none; }
}
/* ---------- Ландшафт телефона ----------
844×390 и 932×430: высота экрана меньше, чем шапка секции в одноколоночной
раскладке. Замер до правки: от верха секции до первой реплики ленты шагов
980px при вьюпорте высотой 390 — два с половиной экрана, занятых бейджем,
заголовком, лидом и фигурой робота, поставленными друг под друга.
В ландшафте ширины хватает на две колонки — возвращаем ту же композицию,
что на десктопе: слева разговор, справа робот с карточкой демо. Плюс шапка
складывается: бейдж и заголовок остаются одной колонкой, лид встаёт рядом,
вертикальные отбивки идут по --s-3/--s-4 вместо --s-5/--s-6.
max-width: 999px обязателен. Без него правило поймало бы и десктоп
в низком окне (например 1280×480), а десктоп принят заказчиком
и не должен зависеть от высоты окна. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 999px) {
/* Шапка во всю ширину, под ней две колонки: слева разговор, справа робот.
Через шапку колонки не проводятся: в половине полосы заголовок 36px
встаёт в пять строк, и экономия высоты уходит обратно. */
.selling__grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-areas:
"head head"
"body visual"
"phrase phrase";
gap: var(--s-4) var(--s-6);
}
.selling__head {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
align-items: start;
column-gap: var(--s-6);
}
/* justify-self обязателен: бейдж — блочный , и в ячейке сетки он
растянулся бы во всю колонку таблеткой в пол-экрана. */
.selling__head > .badge { grid-column: 1; grid-row: 1; justify-self: start; }
.selling__title {
grid-column: 1;
grid-row: 2;
margin-block: var(--s-3) 0;
max-width: none;
}
.selling__lead {
grid-column: 2;
grid-row: 1 / span 2;
align-self: center;
margin-top: 0;
}
/* Робот занимает правую колонку. Мельче нельзя: ширину карточки демо
задаёт ширина фигуры, а карточке нужно место под три строки метрик —
на роботе в 300px она вырастает выше самой фигуры и вылезает за верх
секции (замер: 133% высоты робота при top −31%). */
.selling__robot-wrap { width: min(100%, 420px); }
/* Те же поля карточки, что на телефоне: колонка узкая, а зона выреза
на картинке от ширины экрана не зависит. */
.selling__demo--pinned {
left: -2%;
width: 88%;
padding: var(--s-4);
border-radius: var(--r-md);
}
.selling__demo-avatar { width: 40px; height: 40px; }
.selling__demo-head { gap: var(--s-3); }
.selling__metrics { gap: var(--s-2); }
/* Зазор строки не переопределяется: он и так 12 по всей секции. */
.selling__metric { padding: var(--s-3); }
.selling__metric-icon { width: 28px; height: 28px; padding: 5px; }
.selling__flow { margin-top: 0; }
.selling__phrase { margin-top: var(--s-4); }
/* Ореол считается от высоты секции, а она в ландшафте другая — центр круга
возвращается на середину правой колонки, где стоит фигура. */
.selling__rings {
--rings-size: min(46vw, 420px);
top: calc(40% - var(--rings-size) / 2);
right: 4%;
}
}