/* ==========================================================================
Секция 2 — проблема
========================================================================== */
/* Размеры нижней карточки-вывода и бейджа сняты линейкой с design/экран 2.png
(коэффициент 1.742) и пересчитаны в css-px для вьюпорта 1920. Значения
«на глаз» не ставим: если число выглядит странным — оно с макета.
Верхняя половина от макета отступает намеренно, это третий заход по экрану.
Было: слева крупный заголовок, справа окно чата, а вокруг него — подводка
сверху и красный удар снизу. Текст стоял по обоим краям экрана разными
кеглями и читался как четыре отдельных объекта. Сейчас вся вербальная часть
собрана в левый столбец одной гарнитурой с убывающим кеглем, справа остался
один объект — окно переписки. */
.problem {
overflow: hidden;
/* Своего поля у секции нет: межсекционная отбивка одна на весь сайт
и живёт в --section-y (tokens.css). Было 70/56 — из макета, где
верхний и нижний срез экрана 2 обрезаны иначе, чем у соседей. */
}
/* ---------- Декор ----------
Объект секции — окно переписки в правой колонке, объект-окно, значит
точки (docs/visual-language.md, «Декор: два вопроса»). Прежде на экране
декора не было вовсе, хотя объект есть, — как раз тот случай, когда приём
применяется по настроению.
Коробка садится на внутренний нижний угол окна: правый край чата упирается
в кромку экрана, и узор оттуда пришлось бы срезать, а внутрь секции
ему есть куда лечь. Заодно узор занимает пустоту под «НО…», на которую
заказчик жаловался отдельно. Верхняя часть коробки уходит под само окно
и не видна — наружу выступает только угол, поэтому сетка нигде
не начинается прямой линейкой.
Габариты: коробка 200×160 при left 45% и top 30.5% — от верхней кромки
секции 474px, до нижней 922px. Ни одна кромка её не пересекает, резать
overflow: hidden нечего. */
.problem__dots {
left: 45%;
top: 30.5%;
width: 200px;
height: 160px;
}
/* Размеры бейджа сюда не приезжают: кегль, поля и трекинг у него одни
на весь сайт (base.css). Было 18px/.06em против общих 15px/.08em —
на прокрутке бейдж экрана 2 выпадал из ряда одинаковых надзаголовков.
align-self обязателен: колонка заголовка — грид, и без него inline-flex
бейджа растягивался бы по всей её ширине. */
.problem .badge {
align-self: flex-start;
}
.problem .badge .icon { width: 22px; height: 22px; }
/* ---------- Верх экрана: текст слева, визуализация справа ----------
Две равные колонки, а не 12-колоночная сетка: объекта ровно два, делить
полосу дробно не на чем.
Столбец текста тянется на высоту окна переписки (align-items по умолчанию,
stretch), и высказывание распирает его изнутри: бейдж держит верхнюю кромку
вровень с шапкой чата, «НО…» уходит к нижней. Центрировать столбец, как
было, теперь нельзя: из него ушли две строки подводки, он стал заметно
короче окна, и при центрировании бейдж — надзаголовок секции! — повисал
в 70px ниже её верхнего края, а угол над ним пустовал.
Окно переписки центрируется само: если на какой-то ширине столбец текста
окажется выше него, оно останется по центру, как раньше. */
.problem__top {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: var(--s-9);
}
.problem__say {
display: flex;
flex-direction: column;
min-width: 0;
}
/* ---------- Левый столбец: одно высказывание ----------
В столбце осталось ровно то, что было в прототипе: заголовок и «НО…».
Подводка «Клиент косячит в продажах, а слышишь это ты» снята заказчиком —
красная строка выбивалась, а диалог справа говорит то же самое своими
словами, и повторять его текстом незачем.
Заголовочный шрифт макета (Druk Cyr Condensed) заметно уже Oswald: при
одинаковой высоте заглавных Oswald шире примерно в 1.5 раза, поэтому кегль
подбирается по ШИРИНЕ колонки, а плотность добирается отрицательным
трекингом.
Кегль поднят с 4.6 до 4.9vw: из столбца ушли две строки продолжения, и
на прежнем размере он стал заметно короче окна переписки — при вертикальном
центрировании бейдж уезжал вниз от верхней кромки чата. Выше не берём:
на 1024 «ТЫ УЖЕ НЕ НОВИЧОК.» встаёт в 409px при колонке в 428, и любая
добавка ломает строку.
Верхняя граница clamp обязательна: контейнер упирается в 1880px, а vw
растёт дальше — без потолка на широких мониторах переносы поехали бы. */
/* Отбивка бейдж → заголовок общая для секций 2-5: 40px (см. отчёт по ритму).
Флекс-колонка на всю оставшуюся высоту: она нужна, чтобы «НО…» встало
к нижней кромке столбца (см. .problem__but). Ниже 640 сброшена в block —
там строки заголовка снова инлайновые и текст переливается сам, а во
флекс-контейнере каждая строка стала бы отдельным флекс-элементом. */
.problem__title {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
margin-top: calc(var(--s-6) + var(--s-2));
/* Одно из двух мест с громким кеглем на сайте. Причина не «этот экран
важнее», а композиция: левая колонка отдана заголовку целиком, справа
стоит окно переписки, и на общем --fz-h2 колонка провисает.
Трекинг и интерлиньяж приезжают из .display: было -.05em на капсе 69px,
единственное отрицательное значение на сайте — буквы в «БРО, ДАВАЙ
ЧЕСТНО» соприкасались. */
font-size: var(--fz-h2-loud);
text-wrap: initial; /* balance рвёт длинные caps-строки по слогам */
}
/* Строки заголовка — блоки, а не
: на телефоне CSS возвращает им
display: inline и текст переливается сам. Без разбивки на широкой колонке
«ТЫ» подтягивается в конец первой строки и перенос ломается по смыслу. */
.problem__title-line { display: block; }
/* «Но…» — перелом высказывания и последнее слово столбца: дальше идут боли.
margin-top: auto прижимает его к нижней кромке столбца, то есть к нижней
кромке окна переписки: заголовок держит верх, «НО…» — низ, пустого угла
в столбце не остаётся. Пауза между ними тем самым стала длинной, и это
к лучшему: «БРО, ДАВАЙ ЧЕСТНО. ТЫ УЖЕ НЕ НОВИЧОК.» … «НО…» — так эта
фраза и произносится вслух, а само «НО…» оказывается прямо над полосой
болей и работает мостом к ней.
padding-top обязателен: там, где свободной высоты нет (одна колонка ниже
1000), auto-отступ схлопывается в ноль и «НО…» прилипло бы к заголовку. */
.problem__but {
display: block;
margin-top: auto;
padding-top: var(--s-6);
}
/* ---------- Окно переписки ----------
Шапка с аватаркой, именем и временем вернулась. Без неё окно читалось
плашкой с текстом, а не чатом: кто говорит — непонятно, и роль говорящего
приходилось называть подписью снаружи.
Тень --sh-lift, а не --sh-card: это единственный объект правой половины
и главная визуализация экрана, она должна лежать выше карточек-болей.
overflow: hidden обязателен — шапка залита переливом до самой кромки
и без обрезки вылезала бы за скругление. */
.client-chat {
min-width: 0;
align-self: center;
border: 1px solid var(--line);
border-radius: var(--r-xl);
background: var(--surface);
box-shadow: var(--sh-lift);
overflow: hidden;
}
/* Перелив в шапке вместо плоской заливки: подложка на 7% брендового цвета
уходит в прозрачность к правому краю. Плоская серая шапка читалась бы
как служебная полоса, а не как часть интерфейса. */
.client-chat__head {
display: flex;
align-items: center;
gap: var(--s-4);
padding: var(--s-5) var(--s-6);
border-bottom: 1px solid var(--line);
background:
linear-gradient(115deg, rgba(124, 59, 246, .085) 0%, rgba(124, 59, 246, 0) 64%),
var(--surface);
}
/* Кружок под аватаркой. Перелив и свечение — тот же приём, что
у .icon-badge--accent: собеседник читается как активный, а не как
наклейка. Кружок рисует CSS, а не сам рисунок: аватар одноцветный
и лежит в спрайте, поэтому фон и тон задаются снаружи — ровно так же,
как у знака ИИ БРО на экранах 5 и 9. */
.client-chat__avatar {
display: inline-flex;
width: 58px;
height: 58px;
flex: none;
border-radius: var(--r-pill);
overflow: hidden;
background: var(--grad-soft);
color: var(--ink);
box-shadow: var(--glow-brand);
}
.client-chat__avatar svg {
display: block;
width: 100%;
height: 100%;
}
.client-chat__who {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.client-chat__name {
color: var(--ink);
font-size: var(--fz-body);
font-weight: 700;
line-height: 1.2;
}
/* Точка «в сети» — кружок с мягким ореолом, а не сплошной кружок:
тот же приём подсветки, что у аватарки, только в миниатюре.
#726C87 на белом даёт 5.06:1. */
.client-chat__status {
display: flex;
align-items: center;
gap: var(--s-2);
color: var(--muted-2);
font-size: var(--fz-caption);
line-height: 1.2;
}
.client-chat__status::before {
content: '';
width: 7px;
height: 7px;
flex: none;
border-radius: var(--r-pill);
background: var(--brand);
box-shadow: 0 0 0 3px rgba(124, 59, 246, .16);
}
.client-chat__time {
margin-left: auto;
flex: none;
align-self: flex-start;
color: var(--muted-2);
font-size: var(--fz-caption);
line-height: 1.2;
}
.client-chat__log { padding: var(--s-6); }
/* 86% — чтобы у входящих оставался виден край справа, а исходящий не сливался
с ними в один столбец: без ограничения все три пузыря шли во всю ширину
и переписка переставала читаться как переписка. */
.client-chat__msg {
max-width: 86%;
margin-top: var(--s-4);
padding: var(--s-4) var(--s-5);
border-radius: var(--r-lg);
border-bottom-left-radius: var(--s-1);
background: var(--bg-tint);
color: var(--ink);
font-size: var(--fz-lead);
font-weight: 500;
line-height: 1.3;
}
.client-chat__msg:first-child { margin-top: 0; }
.client-chat__msg--out {
margin-left: auto;
border-bottom-left-radius: var(--r-lg);
border-bottom-right-radius: var(--s-1);
background: var(--brand-soft);
text-align: right;
}
.client-chat__typing {
display: inline-flex;
gap: 6px;
margin-top: var(--s-4);
padding: var(--s-4) var(--s-5);
border-radius: var(--r-lg);
border-bottom-left-radius: var(--s-1);
background: var(--bg-tint);
}
.client-chat__typing span {
width: 8px;
height: 8px;
border-radius: var(--r-pill);
background: var(--muted-2);
animation: problem-typing 1.2s ease-in-out infinite;
}
.client-chat__typing span:nth-child(2) { animation-delay: .18s; }
.client-chat__typing span:nth-child(3) { animation-delay: .36s; }
@keyframes problem-typing {
0%, 60%, 100% { opacity: .35; }
30% { opacity: 1; }
}
/* Собственных стилей у аватарки клиента здесь нет: рисунок целиком лежит
в assets/icons/client.svg и красится одним color обёртки. Фотографий
клиента у нас нет, а чужие лица брать нельзя, поэтому персонаж нарисован.
Наклон бровей внутрь вниз и дуга рта углами вниз — единственная мимика:
больше деталей на 58px всё равно не различить. */
/* ---------- Боли ----------
Третий заход по блоку. Было: пять одинаковых строк-фраз (взгляду не за что
зацепиться), потом — карточка, где подпись стояла над мини-интерфейсом.
Второй вариант проиграл по той же причине, что и первый: мини-интерфейс
(пять строк CRM, три строки счёта, строка поиска с подсказками) занимал
втрое больше площади, чем сама фраза, был пестрее и перетягивал взгляд —
боль не прочитывалась.
Сейчас каждая боль разложена на две белые плашки с зазором 12px:
верхняя, узкая — только формулировка, крупно и жирно, рядом ничего нет;
нижняя, квадратная — визуализация.
Формулировка выросла с 22 до 30px (потолок) и стоит на собственной плашке:
теперь первое, что попадает в глаз в этой полосе, — сам текст боли,
и визуализация под ней уже не спорит с фразой, а подтверждает её. Отсюда
же и правило для всех четырёх сцен: деталей ровно столько, чтобы сцена
узнавалась (карточка сделки, ряд одинаковых сумм, лента объявлений,
строка поиска), кегль и цвет — заведомо спокойнее формулировки.
subgrid обязателен: он выравнивает обе плашки по всем четырём картам —
верхние по высоте самой длинной фразы, нижние по самой высокой детали.
Без него плашки-детали начинались бы на разной высоте и полоса рассыпалась.
Там, где subgrid не поддержан, карта просто становится обычным гридом
из двух строк — плашки остаются на месте, теряется только выравнивание. */
.problem__pains {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--s-6);
margin: var(--s-8) 0 0;
padding: 0;
list-style: none;
}
.pain {
display: grid;
grid-row: span 2;
grid-template-rows: subgrid;
/* Зазор внутри карты меньше зазора между картами: две плашки читаются
как одна пара, а не как восемь независимых прямоугольников.
Собственный row-gap подсетки перекрывает унаследованный от родителя. */
row-gap: var(--s-3);
}
.pain__say,
.pain__art {
border: 1px solid var(--line);
border-radius: var(--r-lg);
background: var(--surface);
box-shadow: var(--sh-card);
/* Тени у соседних плашек одинаковые: разнобой читается как блоки
из разных систем. Разница веса держится кеглем, а не тенью. */
/* Ступень отклика на руку — --t-fast, как у .card--interactive и кнопок
(правило в base.css, раздел «Движение»). Пара плашек поднимается
одновременно, поэтому длительность у обеих одна и та же строка. */
transition: transform var(--t-fast), box-shadow var(--t-fast);
}
/* Формулировки разной длины: самая длинная ложится в четыре строки, самая
короткая в две. Высоту плашки задаёт длинная, поэтому текст центрируется
по вертикали — иначе у коротких карт под фразой оставалась бы пустая
треть плашки и полоса выглядела бы недоверстанной.
#1B1633 на белой плашке даёт 17.37:1. */
.pain__say {
display: grid;
align-content: center;
padding: var(--s-5);
color: var(--ink);
/* Кегль со ступени «заголовок карточки»: фраза и есть заголовок этой карты.
Трекинг снят в ноль — поджим тут не нужен, это не крупный набор.
Разбивка на четыре строки держится неразрывными пробелами в разметке
и от кегля не зависит. */
font-size: var(--fz-h3);
font-weight: 700;
line-height: 1.2;
/* Перенос гасим: фраза здесь в роли заголовка карточки, а не абзаца.
С унаследованным от body `auto` на 1440 выходило «мене-джеры их сливают»
и «на ИИ уже зараба-тывают», на 768 и 375 — то же самое. Свод, «Переносы»:
в основном тексте перенос незаметен, в заголовке виден на весь экран.
Разбивка на строки и без него держится неразрывными пробелами разметки. */
-webkit-hyphens: none;
hyphens: none;
}
/* ---------- Кнопка-раскрывашка (только телефон) ----------
На десктопе её нет вовсе: display: none здесь, в базовом правиле, и
разметка отдаёт её ещё и с атрибутом hidden. То есть без JS кнопки нет
ни на одной ширине, а все четыре визуализации показаны — ровно нынешнее
поведение. Включает её скрипт секции (js/sections/02-problem.js),
и только ниже 640.
ПОЧЕМУ ВООБЩЕ. На 375 полоса болей это 1038px: четыре раза подряд
«фраза на плашке + иллюстрация на плашке». Иллюстрация каждой боли
занимает 134-205px и в каждом из четырёх случаев показывает то же,
что уже сказано фразой. Заказчик это уже отмечал словами «либо
визуализация лишняя» (docs/design-review.md, круг 3, экран 2).
Убирать её нельзя — на десктопе она принята и работает. Но на телефоне
четыре одинаковых узора подряд стоят 1.6 экрана прокрутки, за которые
человек не получает ни одной новой мысли: он читает четыре фразы,
а между ними четыре раза видит одну и ту же композицию.
Первая карта раскрыта всегда: она показывает, что прячется под
шевронами у трёх остальных. Все четыре ФРАЗЫ видны сразу — а фраза
и есть содержание боли; визуализация её подтверждает.
ЗОНА НАЖАТИЯ — ВСЯ ПЛАШКА. Сам шеврон 24px, и палец в него не целится:
::after растягивается на всю .pain__say (76-124px высотой при полной
ширине контейнера). Приём тот же, что у .tap-safe в base.css, только
зона задана не «не меньше 44», а «вся плашка».
Шеврон взят chevron-right и повёрнут: в спрайте нет chevron-down,
а трогать спрайт нельзя (сборка спрайта — отдельная задача).
Закрыто — вниз (90°), открыто — вверх (−90°). */
.pain__more { display: none; }
/* Деталь центрируется по высоте плашки: карты разной наполненности
(одна строка счёта против трёх одинаковых офферов) иначе висели бы
прижатыми к верху, а под ними оставался пустой низ. */
.pain__art {
display: grid;
align-content: center;
padding: var(--s-5);
}
.pain__art > * + * { margin-top: var(--s-3); }
/* Отклик при наведении — общий приём сайта (.card--interactive). Обе плашки
поднимаются вместе на одну и ту же высоту, поэтому зазор между ними
не меняется и пара не распадается. Брендовая тень уходит только под
верхнюю: два свечения в 12px друг от друга сливаются в муть.
Медиазапрос — общее правило сайта, разбор в base.css: на тач-устройстве
наведение залипает после тапа, и пара плашек так и стоит приподнятой. */
@media (hover: hover) {
.pain:hover .pain__say,
.pain:hover .pain__art { transform: translateY(-4px); }
.pain:hover .pain__say { box-shadow: var(--sh-hover); }
}
/* ---------- Детали внутри плашек ----------
Все четыре набраны мельче формулировки и спокойным цветом: их работа —
подтвердить фразу, а не спорить с ней за внимание. */
/* Шапка карточки сделки: номер и статус в одной строке, как в CRM.
space-between вместо margin-left: auto у статуса — ради переноса. В полосе
из четырёх карт (1200-1440) внутренняя ширина падает до 205px, а номер
со статусом требуют 230: с auto-отступом статус повисал бы у правого края
отдельной строкой, а при space-between одиночный элемент на строке встаёт
по левому краю, и карточка читается как обычная CRM-шапка «номер, под ним
статус». Номеру запрещён перенос: «Заявка / №1482» в две строки — брак. */
.pain__row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--s-2) var(--s-3);
font-size: var(--fz-small);
}
.pain__key { color: var(--ink); font-weight: 700; white-space: nowrap; }
.pain__label { color: var(--muted); font-size: var(--fz-small); line-height: 1.3; }
/* Статус-чип. Кегль мельче номера сделки — так он и выглядит в любой CRM,
заодно шапка встаёт в одну строку на 130px более узкой карте.
#B03A50 на #FDF2F3 даёт 5.37:1 */
.pain__flag {
flex: none;
padding: 3px 9px;
border-radius: var(--r-sm);
background: var(--bad-bg);
color: var(--bad-ink);
font-size: var(--fz-caption);
font-weight: 700;
line-height: 1.4;
}
/* #726C87 на белом даёт 5.06:1 */
.pain__note {
color: var(--muted-2);
font-size: var(--fz-caption);
line-height: 1.45;
}
/* ---------- Карточка сделки: воронка и поля ----------
Прежде тут стояли строка «Ответственный — Менеджер» и подпись мелким
«последний ответ клиенту — нет». Заказчик попросил узнаваемую карточку
сделки из CRM, и набор полей взят оттуда: номер, статус, стадия воронки,
ответственный, последнее касание. */
/* Воронка: четыре стадии, закрашена первая. Полосы, а не подписи стадий —
на карте в четверть полосы четыре слова не помещаются, а полоса читается
мгновенно и на любой ширине. Высота 6px: это индикатор, а не элемент
управления, спорить с текстом полей ему нечем. */
.pain__track {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--s-1);
}
.pain__step {
height: 6px;
border-radius: var(--r-pill);
background: var(--line);
}
/* Пройденная стадия — переливом, а не плоским цветом: приём общий для сайта */
.pain__step--on { background: var(--grad-brand); }
/* Поле карточки. Кегль caption, а не small: в CRM поля всегда мельче
заголовка сделки, и «Последнее касание — 3 дня назад» иначе не встаёт
в строку на карте в 225px (диапазон 1200-1300, четыре карты в полосе).
#5D5773 на белом даёт 6.83:1. */
.pain__meta {
display: flex;
align-items: baseline;
gap: var(--s-3);
color: var(--muted);
font-size: var(--fz-caption);
line-height: 1.5;
}
/* Между полями 8px, а не общие 12: поля читаются одним блоком, отделённым
от шапки и воронки. */
.pain__meta + .pain__meta { margin-top: var(--s-2); }
.pain__meta-val {
margin-left: auto;
color: var(--ink);
font-weight: 600;
text-align: right;
}
/* Единственное красное поле карточки: именно оно и есть боль.
#B03A50 на белом даёт 5.89:1. */
.pain__meta-val--bad { color: var(--bad-ink); }
/* ---------- Сумма, которая не двигается ----------
Было: одна сумма и подпись «столько же, сколько год назад» — вывод
приходилось вычитывать словами. Заказчик попросил вернуть ряд из трёх
одинаковых сумм, и одинаковость работает здесь тремя способами сразу:
одно и то же число трижды строго друг под другом (колонка сумм фиксирована
сеткой, цифры совпадают до пикселя), три полосы одной длины и потолок —
вертикальная линия, в которую все три упираются. Роста нет, и это видно
раньше, чем прочитаны подписи. */
.pain__ceiling {
position: relative;
display: grid;
/* Три колонки на весь блок, а не грид в каждой строке: только так суммы
встают строго друг под другом, а полосы получают одинаковую длину. */
grid-template-columns: auto auto minmax(24px, 1fr);
align-items: stretch;
column-gap: var(--s-3);
row-gap: var(--s-2);
}
/* Потолок: сплошная линия по правой кромке блока, то есть ровно там, где
кончаются все три полосы (последняя колонка тянется до края). Отдельным
слоем, а не границей у каждой полосы: тремя отрезками с разрывами линия
читалась случайными штрихами, а сплошной — стеной, в которую упёрлись.
Вылет на 2px вверх и вниз — чтобы стена была чуть выше крайних полос
и не выглядела обрезанной по ним. */
.pain__ceiling::after {
content: '';
position: absolute;
top: -2px;
bottom: -2px;
right: 0;
width: 2px;
border-radius: var(--r-pill);
background: rgba(176, 58, 80, .5);
}
/* #726C87 на белом даёт 5.06:1 */
.pain__ceiling-when {
align-self: center;
color: var(--muted-2);
font-size: var(--fz-caption);
line-height: 1.3;
}
/* Кегль ниже формулировки боли: цифра подтверждает фразу, а не спорит с ней
за внимание. #3E3A55 на белом даёт 10.8:1. */
.pain__ceiling-sum {
align-self: center;
color: var(--ink-2);
font-size: var(--fz-body);
font-weight: 700;
line-height: 1.1;
white-space: nowrap;
}
/* Полоса. Длину задаёт колонка, поэтому все три одинаковы по определению —
на любой ширине карты и при любой длине подписи. До потолка полоса
не доходит на 8px: касайся она стены вплотную, три полосы слились бы
с ней в одну фигуру. */
.pain__ceiling-bar {
position: relative;
}
.pain__ceiling-bar::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: var(--s-2);
height: 8px;
transform: translateY(-50%);
border-radius: var(--r-pill);
/* Перелив, а не плоская заливка: полос три, и плоские читались бы
служебной графикой. */
background: linear-gradient(90deg, rgba(124, 59, 246, .20), rgba(124, 59, 246, .55));
}
/* ---------- Лента чужих объявлений ----------
Было: три одинаковые строки без подписей, нижняя помечена «это ты».
Повтор читался, а вот то, что две верхние — конкуренты, нет. Теперь
у каждой строки есть автор: кружок с буквой и подпись с обезличенным
именем и родом занятий. Твоя строка набрана ровно так же, как чужие,
и выдаёт её только ярлык — в этом вся боль. */
.pain__rivals {
display: grid;
gap: var(--s-3);
margin: 0;
padding: 0;
list-style: none;
}
/* Плашек под строками нет намеренно: их на сайте и так много, а тут они
ещё и превратили бы ленту в три одинаковых прямоугольника — приём,
который заказчик снимал по всему проекту. Строки держит структура:
подпись с кружком, под ней оффер. */
.pain__rival {
display: grid;
row-gap: 2px;
}
.pain__rival-who {
display: flex;
align-items: center;
gap: var(--s-2);
color: var(--muted-2);
/* Мелкая метка внутри мокапа ленты, а не текст страницы. */
font-size: var(--fz-caption);
line-height: 1.35;
}
/* Аватарка профиля: кружок с буквой. Разные буквы — разные люди, этого
хватает, чтобы лента читалась чужой. Перелив и кромка те же, что
у .icon-badge, — материал на сайте один. */
.pain__rival-ava {
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
flex: none;
border-radius: var(--r-pill);
background: var(--grad-soft);
border: 1px solid rgba(124, 59, 246, .12);
/* Буква набрана 13.5px на --grad-soft: --brand давал 4.28:1 у тёмного конца
заливки при норме 4.5 (SC 1.4.3, AA). --brand-dark выводит на 5.5:1. */
color: var(--brand-dark);
font-size: var(--fz-caption);
font-weight: 700;
line-height: 1;
}
/* Оффер идёт от левого края строки, а не с отступом под аватаркой: на карте
в четверть полосы каждые лишние 26px ломают фразу на вторую строку,
и три одинаковые строки перестают быть одинаковыми по высоте.
#5D5773 на белом даёт 6.83:1. */
.pain__rival-say {
color: var(--muted);
font-size: var(--fz-caption);
line-height: 1.3;
}
/* Ярлык стоит на месте имени, сразу за кружком: имя у этой строки и есть
«это ты». Прижимать его к правому краю нельзя — кружок остался бы в строке
один, с провалом до ярлыка.
#FFFFFF на #B03A50 даёт 5.89:1 */
.pain__tag {
flex: none;
padding: 2px 8px;
border-radius: var(--r-sm);
background: var(--bad-ink);
color: #fff;
font-size: var(--fz-caption);
font-weight: 600;
line-height: 1.2;
}
.pain__field {
display: flex;
align-items: center;
gap: var(--s-3);
padding: var(--s-3) var(--s-4);
border: 1px solid var(--line);
border-radius: var(--r-pill);
background: var(--bg-tint);
}
.pain__field .icon { width: 18px; height: 18px; color: var(--brand); }
.pain__field-text {
min-width: 0;
color: var(--ink);
font-size: var(--fz-caption);
font-weight: 500;
}
/* Курсор стоит сразу за набранным текстом, а не у правого края поля:
иначе он читается не курсором, а разделителем. */
.pain__caret {
width: 2px;
height: 1.1em;
flex: none;
background: var(--brand);
animation: problem-caret 1.1s steps(1) infinite;
}
@keyframes problem-caret { 50% { opacity: 0; } }
/* ---------- Нижняя карточка-вывод ----------
Правая половина, круг со стрелкой и сама карточка согласованы заказчиком
дважды и не менялись. Правка коснулась только левой половины — см. ниже. */
/* Карточка по макету: x 79…1840, y 868…1302 — высота 434px, внутреннее поле
74px. Круг со стрелкой стоит не по центру карточки, а на 894px, поэтому
колонки неравные: 0.826fr / auto / 1fr при промежутке 96px.
align-items: start вместо center. Обе половины теперь начинаются с мелкого
надзаголовка и продолжаются фразой одного кегля, и по верхней кромке они
рифмуются построчно: «И самое обидное:» вровень с «Короче, бро.», фраза
слева вровень с «Тебе не нужен ещё один навык.» справа. При центрировании
строки расходились на 60px и выглядели случайно съехавшими. Разделитель
и круг это не задевает: у них свой align-self: stretch. */
.problem__summary {
display: grid;
grid-template-columns: minmax(0, .826fr) auto minmax(0, 1fr);
align-items: start;
column-gap: var(--s-9);
margin-top: var(--s-8);
/* Было 64px 74px. Семьдесят четыре ни из чего не следовали и в шкале
(4·8·12·16·24·32·48·64·96·128) их нет — ровно то, что свод называет
«верстали на глаз». Поля блока сведены к одной ступени --s-8. */
padding: var(--s-8);
border: 1px solid var(--line);
border-radius: var(--r-xl);
background:
linear-gradient(120deg, rgba(124, 59, 246, .05) 0%, transparent 55%),
var(--surface);
}
.problem__summary-col { min-width: 0; }
/* 38px = кегль этого блока в макете (совпал с --fz-lead), шаг строк 53px */
.problem__summary-text {
font-size: var(--fz-lead);
line-height: var(--lh-lead);
}
/* ---------- Левая половина: текст прототипа ----------
Было: крупный красный удар «Ты отвечаешь за трафик, а спрашивают
за продажи» и спокойное пояснение под ним. Заказчик вернул формулировку
прототипа — «И самое обидное: ты отвечаешь за трафик. А зависишь от тех,
кто отвечает после заявки» — и снял крупный красный набор.
Отсюда устройство половины: она собрана ровно так же, как правая, теми же
двумя классами. Надзаголовок мелкий, фраза под ним — .problem__summary-text,
то есть кегль и вес один в один с «Тебе не нужен ещё один навык.» справа.
Разница между половинами только в цвете надзаголовка: слева красный
(это боль), справа брендовый (это выход), и дальше правая продолжает
разгон до «Тебе нужен новый продукт», а левая договорила. */
.problem__summary-kicker {
margin-bottom: var(--s-5);
font-size: var(--fz-body);
font-weight: 600;
}
/* #B03A50 на белой карточке даёт 5.89:1 */
.problem__summary-kicker--bad { color: var(--bad-ink); }
.problem__summary-strong {
margin-top: var(--s-6);
color: var(--brand);
/* Ступень «крупное число-результат»: одна на калькулятор, кейсы,
показатели платформы и этот удар. Было четыре разных кегля. */
font-size: var(--fz-num);
font-weight: 700;
line-height: 1.02;
letter-spacing: var(--ls-num);
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
.problem__summary-strong {
background: linear-gradient(100deg, var(--brand-light) 0%, var(--brand-dark) 75%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
}
/* Росчерк в макете: 273x20px, начинается сразу под второй строкой */
.problem__summary-swoosh {
width: min(100%, 273px);
height: 20px;
margin-top: var(--s-1);
color: var(--brand);
}
/* Кружок со стрелкой — разделитель двух половин, не кнопка: не кликается,
поэтому это span, а не button, и он скрыт от скринридера. */
.problem__summary-arrow {
display: flex;
align-items: center;
justify-content: center;
align-self: stretch;
position: relative;
width: 66px;
}
.problem__summary-arrow::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 1px;
background: var(--line);
}
/* Диаметр круга в макете — 66px */
.problem__summary-arrow .icon {
position: relative;
z-index: 1;
width: 66px;
height: 66px;
padding: 19px;
border-radius: var(--r-pill);
background: var(--brand);
color: #fff;
box-shadow: var(--sh-brand);
}
/* ---------- Адаптив ---------- */
/* Ниже 1200 карта боли по четверти полосы даёт 265px: формулировка в 30px
ломается на пять строк и снова перестаёт читаться. Полоса складывается
в 2x2 — кегль остаётся, ширины хватает. */
@media (max-width: 1200px) {
.problem__pains { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.problem__summary { margin-top: var(--s-7); padding: var(--s-7) var(--s-6); }
}
/* Ниже 1000 столбец текста сжимается настолько, что заголовок уходит
в четыре строки, а окно переписки становится уже пузырей. Верх экрана
раскладывается в одну колонку: сначала текст, следом визуализация. */
@media (max-width: 1000px) {
.problem__top {
grid-template-columns: minmax(0, 1fr);
row-gap: var(--s-7);
}
/* Во всю ширину планшета переписка растянулась бы, и пузыри поехали бы
в одну строку каждый: ограничиваем оба блока колонкой текста. */
.problem__say,
.client-chat { max-width: 720px; }
/* В одну колонку окно переписки встаёт под текстом и прижимается к левой
кромке — внутреннего угла, к которому крепится узор, у него больше нет.
Узор уходит вместе с раскладкой: так же ведут себя экраны 5, 8 и 10. */
.problem__dots { display: none; }
}
@media (max-width: 900px) {
/* Стрелка ложится между блоками, линия-разделитель становится горизонтальной */
.problem__summary {
grid-template-columns: 1fr;
gap: var(--s-6);
padding: var(--s-6) var(--s-5);
}
.problem__summary-arrow {
align-self: start;
width: 100%;
height: 56px;
}
.problem__summary-arrow::before {
top: 50%;
bottom: auto;
left: 0;
width: 100%;
height: 1px;
}
/* Стрелка обязана смотреть туда, где продолжение. На десктопе половины
вывода стоят рядом, вторая справа — стрелка вправо. Здесь половины
встали друг под другом, и та же стрелка показывает в поле: следующая
мысль не справа, а ниже. Поворот на 90° по часовой — вниз.
Крутится содержимое значка (