, но не коробку ::details-content, и без
процента «было» и «стало» перестают доставать до низа карточки. */
.cases__fold { display: contents; }
.cases__fold-summary { display: none; }
.cases__result {
height: 100%;
display: flex;
flex-direction: column;
gap: var(--s-6); /* макет: между плашками 30 */
margin: 0;
padding: 0;
list-style: none;
}
/* Блоки делят высоту колонки поровну — так вторая колонка держит карточку
так же, как в макете, и под ними не остаётся пустого места.
Текст внутри отцентрован, иначе в высоком блоке он висит вверху. */
.cases__state {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1 1 0;
padding: var(--s-6); /* макет: текст отступает от края плашки на 40 */
border-radius: var(--r-md);
}
/* Подложка — перелив, а не плоская заливка: два ровных прямоугольника цвета
рядом с белой карточкой были самым дешёвым местом секции. Перелив уходит
в белый (--surface), поэтому новых цветов не заводится, а волосяная кромка
в тон плашки отделяет её от карточки без рамки-обводки. */
.cases__state--bad {
background: linear-gradient(145deg, var(--bad-bg) 0%, var(--surface) 130%);
box-shadow: inset 0 0 0 1px rgba(176, 58, 80, .12);
}
.cases__state--good {
background: linear-gradient(145deg, var(--good-bg) 0%, var(--surface) 130%);
box-shadow: inset 0 0 0 1px rgba(30, 122, 70, .12);
}
.cases__state-title {
display: flex;
align-items: center;
gap: var(--s-3);
margin-bottom: var(--s-5);
font-size: var(--fz-body);
font-weight: 600;
}
/* Значок «было/стало» — тот же duotone, что у иконок проекта, только слой
заливки здесь рисует CSS, а не сам SVG: круг из семантического цвета
на 14% прозрачности плюс контурный глиф поверх. Голые контурные ✕ и ✓
выглядели значками из бесплатного набора — ровно то, что заказчик
отметил по иконкам. */
.cases__state-mark {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: clamp(26px, 2.1vw, 40px);
height: clamp(26px, 2.1vw, 40px);
border-radius: var(--r-pill);
}
.cases__state-mark .icon {
width: clamp(14px, 1.1vw, 21px);
height: clamp(14px, 1.1vw, 21px);
stroke-width: 2.6;
}
.cases__state--bad .cases__state-mark { background: rgba(176, 58, 80, .14); }
.cases__state--good .cases__state-mark { background: rgba(30, 122, 70, .14); }
.cases__state--bad .cases__state-title { color: var(--bad-ink); }
.cases__state--good .cases__state-title { color: var(--good-ink); }
.cases__state-text {
color: var(--ink-2);
font-size: var(--fz-body);
line-height: var(--lh-body);
}
/* Второе по важности число внутри «Стало». Главное стоит строкой результата,
поэтому здесь не цвет, а вес: цветное выделение в абзаце заставило бы
плашку спорить с цифрой.
Из текстов «Стало» при этом убран повтор главной цифры: раньше
«$250 000 выручки за 9 месяцев» стояло и на плашке поверх фото, и в абзаце,
но фотография их разводила. Без фотографии повтор оказался в одной строке
взгляда, поэтому в абзаце осталось только то, чего нет в строке результата. */
.cases__hi { color: var(--ink); font-weight: 700; }
/* ---------- Адаптив ---------- */
/* Колонки те же, ужимается только зазор: две колонки текста держатся
до 640px, ниже которых в проекте колонок не бывает вовсе. */
@media (max-width: 1080px) {
.cases__card { --cases-gap: var(--s-5); }
.cases__state { padding: var(--s-5); }
}
@media (max-width: 640px) {
/* Выравнивание высот снимается вместе с колонками.
grid-auto-rows: 1fr на десктопе делает дело: три карточки стоят
в ленте одинаковой высоты, и кнопка «Смотреть кейс» в каждой на одной
линии. На телефоне карточки идут столбиком, сравнивать их не с чем,
а плата за выравнивание есть, и она не в тексте — в раскрывашке.
Замер на 375 при всех трёх открытых кейсах: сами по себе карточки
446 / 446 / 443, то есть выравнивание по тексту стоит три пикселя
и никого не волнует. Но стоит раскрыть «Было и стало» у одного кейса,
как его строка вырастает до 793 — И ВМЕСТЕ С НЕЙ ДВЕ ОСТАЛЬНЫЕ:
446 / 446 / 443 → 793 / 793 / 793, секция 2117 → 2814. Человек нажал
на одну строку, а получил 697px пустоты в двух чужих карточках,
которые при этом даже не видны на экране одновременно с той,
которую он открыл.
Зазор между карточками заодно уходит с 32 на 24: это список одинаковых
карточек, а не группа групп — группировать 32 пикселями нечего. */
.cases__list {
grid-auto-rows: auto;
gap: var(--s-5);
}
.cases__card {
--cases-gap: var(--s-5);
grid-template-columns: minmax(0, 1fr);
padding: var(--s-4);
}
/* Кнопка больше не должна прижиматься к низу: колонок нет, прижимать
её не к чему, а margin-top: auto в столбике отрывал бы её от текста.
Высота 48 вместо 46 — общий размер вторичной кнопки на узких экранах
(в цене и «показать ещё» главная стоит 56). Три высоты на одну роль
на десктопе не видно, потому что кнопки разнесены по экранам;
на телефоне «Смотреть кейс» и «Показать ещё» попадают в один экран. */
.cases__link {
margin-top: var(--s-5);
width: auto;
min-height: 48px;
padding-inline: var(--s-5);
}
/* Зона нажатия сжимается до самой кнопки.
На десктопе растянутая на всю карточку зона — это правильно: попадать
мышью в кнопку 306×73 посреди карточки в 604px высотой неудобно,
и вся карточка работает одной ссылкой.
На телефоне тот же приём работает против человека. Ссылка ведёт
на внешний сайт (nextbot.ru), то есть промах уводит с лендинга —
ровно та беда, которую в историях партнёров лечат разведением кнопок.
А промахнуться тут легко: внутри карточки есть вторая цель, строка
«Было и стало», и вокруг неё 460px чужой зоны нажатия. Плюс палец
на телефоне уже попадает в кнопку без всякой помощи: она 295×48,
то есть почти во всю ширину карточки.
Оставляем ссылкой то, что ссылкой выглядит. Наведения на телефоне нет,
поэтому подсветка кнопки от карточки (@media hover) тоже не работает —
терять нечего. */
.cases__link::after { display: none; }
.cases__result { gap: var(--s-4); }
/* Поля плашек и карточки на узком экране — по мобильной шкале, а не по десктопному замеру */
.cases__state-title { margin-bottom: var(--s-3); gap: var(--s-2); }
/* ---------- Строка-раскрытие ---------- */
.cases__fold { display: block; }
/* Та же строка, что у историй партнёров: один приём на две секции,
иначе на странице появятся два разных раскрытия. Отличается только
подпись — она собрана из ярлыков, которые в карточке уже стоят. */
.cases__fold-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-3);
min-height: 48px;
padding: var(--s-2) var(--s-4);
border-radius: var(--r-md);
border: 1px solid var(--line);
background: var(--bg-tint);
color: var(--ink);
font-size: var(--fz-small);
font-weight: 700;
line-height: 1.3;
cursor: pointer;
list-style: none;
-webkit-hyphens: none;
hyphens: none;
/* Зона нажатия .cases__link::after растянута на всю карточку и стоит
на z-index: 3 — без собственного контекста строка раскрытия оказалась бы
под ней и не нажималась бы вовсе. Ступень выше отдаёт строке ровно её
прямоугольник, вся остальная карточка по-прежнему ведёт на кейс. */
position: relative;
z-index: 4;
}
.cases__fold-summary::-webkit-details-marker { display: none; }
.cases__fold-icon {
width: 20px;
height: 20px;
flex: none;
color: var(--brand);
transform: rotate(90deg);
transition: transform var(--t-fast);
}
.cases__fold[open] .cases__fold-icon { transform: rotate(-90deg); }
.cases__fold[open] .cases__result { margin-top: var(--s-3); }
/* Плашки на телефоне не делят высоту колонки: колонки нет, делить нечего,
а flex: 1 1 0 растягивал бы короткую «Стало» до высоты длинной «Было».
Текст при этом прижимается к верху — центровка нужна была там, где блок
заведомо выше своего содержимого. */
.cases__state {
flex: 0 0 auto;
justify-content: flex-start;
padding: var(--s-4);
}
}
/* ---------- Показать ещё ----------
Замер до правки: 2857px на 375 — три с половиной экрана, и это при том,
что кейсов всего три. Механизм тот же, что у историй партнёров: секция
показывает два кейса и кнопку, третий открывается по нажатию. Разметка
отдаёт все три, скрипт прячет лишние — без JS секция работает как прежде.
Отбивка и цвет — как у историй: 64 от ленты, ghost, потому что акцентная
заливка на этом экране закреплена за «Смотреть кейс» внутри карточек.
Прилипания к низу экрана здесь нет намеренно: нажатие ровно одно, после
него блок получает hidden и исчезает вовсе — прилипать нечему. */
.cases__more {
display: flex;
justify-content: center;
margin-top: var(--s-8);
}
/* Отбивка до кнопки на узком экране на ступень ниже: 64 задавали, когда
между лентой и кнопкой стоял десктопный воздух в 96 между секциями.
На телефоне межсекционный стык 96, внутренние зазоры 24 — 48 перед
кнопкой остаётся заметно больше зазора между карточками и заметно
меньше стыка, то есть иерархия отбивок сохраняется. */
@media (max-width: 640px) {
.cases__more { margin-top: var(--s-7); }
}
.cases__more-icon { transform: rotate(90deg); }
/* ---------- Ландшафт телефона ----------
852×393. Замер до правки: шапка секции занимает 71% первого экрана,
до верха первой карточки 280px при высоте окна 393 — то есть человек,
повернувший телефон, видит бейдж, заголовок, подпись и полоску карточки.
Ширины при этом вдоволь: лид «Реальные ниши, реальные внедрения
и реальные результаты — без воды» встаёт в ОДНУ строку и занимает
половину полосы, вторая половина пустая. Складываем шапку в две колонки —
тот же приём, что уже стоит в 09-selling.css: бейдж и заголовок слева,
лид справа по центру пары. Вертикальные отбивки идут ступенью ниже.
max-width: 999px обязателен по той же причине, что и там: без него
правило поймало бы десктоп в низком окне, а десктоп принят. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 999px) {
/* Доли 1.45/1, а не поровну: заголовок набран капсом узким Oswald и рвётся
по слову, лид — обычным текстом и рвётся где угодно. При равных колонках
заголовок вставал в три строки («СМОТРИ,» / «ЧТО ДЕЛАЮТ НАШИ» /
«ПОСЛЕ ИНТЕНСИВА») и задавал шапке высоту, а лид дочитывался в две.
При 1.45 заголовку хватает на две строки, лид уходит в три,
и шапка садится: секция 1460 → 1417 при равных долях → 1373. */
.cases__head {
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
align-items: start;
column-gap: var(--s-6);
margin-bottom: var(--s-6);
}
/* justify-self обязателен: бейдж — блочный , в ячейке сетки он
растянулся бы таблеткой во всю колонку. */
.cases__head > .badge { grid-column: 1; grid-row: 1; justify-self: start; }
/* Селектор с потомком, а не голый класс: сквозную отбивку «бейдж →
заголовок» base.css задаёт правилом `.badge + :is(h1,h2,h3,.display)`
с весом 0,2,0, и одиночный .cases__title (0,1,0) её не перебивает.
Через .cases__head веса равны, а этот файл подключён позже. */
.cases__head > .cases__title {
grid-column: 1;
grid-row: 2;
margin-block: var(--s-3) 0;
max-width: none;
}
.cases__lead {
grid-column: 2;
grid-row: 1 / span 2;
align-self: center;
margin-top: 0;
}
}
/* Появление добавленного кейса — та же ступень и та же лесенка, что
у историй партнёров (11-stories.css). Анимируются transform и opacity. */
.cases__card--enter {
animation: cases-card-in var(--t-base) both;
animation-delay: var(--d, 0ms);
}
@keyframes cases-card-in {
from { opacity: 0; transform: translateY(10px); }
}