/* ========================================================================== Секция 13б — финальный призыв к действию Последний светлый блок перед тёмным подвалом. Задача ровно одна — кнопка, поэтому на экране нет ничего, что могло бы с ней спорить: ни карточки, ни бейджа, ни значков, ни картинки. Своего фона у секции тоже нет — общий фон страницы один на весь сайт (body::before в base.css). Как блок отбивается от соседей, если у него нет ни плашки, ни фона: 1. ВОЗДУХОМ. Сверху к --section-y добавлено 24, снизу 48. Асимметрия не случайна: снизу секция упирается в единственный намеренно резкий стык сайта — светлая страница обрывается в тёмный подвал. Резким он должен выглядеть решением, а не обрывом, поэтому перед срезом остаётся спокойная полоса пустого фона: сначала пауза, потом темнота. Верхнее поле меньше, но вместе с нижним полем экрана 13 даёт 112-184px — список возражений точно закончился, начался финал. 2. СВЕТОМ. Под кнопкой лежит мягкий брендовый омут. Это тот же рычаг «свечение у акцентов» из docs/visual-language.md, что под акцентными кружками и главными кнопками: пятно не украшение, оно метит единственную активную точку экрана. Кегль заголовка общий — .h2. Соблазн сделать финальную фразу крупнее всех остальных заголовков отброшен намеренно: разъехавшийся кегль у блоков одной роли — ровно та «нет единой системы», с которой начинался проект. Выключка по центру — тоже осознанно, хотя заголовки разделов на сайте стоят слева (и на экране 11 центральный заголовок как раз правится на левый). Разница в роли: слева стоит заголовок, который ВЕДЁТ колонки и карточки под собой, а здесь под заголовком нет ни сетки, ни колонок — только одна кнопка. По центру набраны все шесть выводов секций (.verdict в base.css: «только текст, крупно, по центру»), и финал страницы — из той же семьи, что они, а не из семьи заголовков-разделов. ========================================================================== */ .cta { /* Поля секции общие: --section-y — единственная ручка межсекционной отбивки на весь сайт. Прибавки +24 сверху и +48 снизу сняты: они давали 145px до экрана 13 и 172px до подвала против 121 у всех остальных пар, то есть финал звучал не громче, а просто иначе набранным. Воздух вокруг кнопки остался — его дают собственные отбивки блока (.cta__actions, .cta__note), и это отбивки ВНУТРИ секции. */ text-align: center; } /* Свет под кнопкой. Коробка пятна поджата внутрь секции (inset), а сам градиент гаснет на 78% своих радиусов — то есть до нуля он доходит далеко от кромок и на стыках с экраном 13 и подвалом его не видно вовсе. Это обязательное условие: декор, обрывающийся на кромке секции, и есть тот «плохой переход фона», который сняли общестраничной подсветкой. Центр смещён вниз (64%), под кнопку, а не в середину блока: свет должен показывать, куда нажимать, а не подсвечивать текст. Радиусы поджаты до 32/40% (первая проба была 42/46) — на широком пятне свет размазывался по всему блоку и кнопку ничем не выделял. */ .cta__glow { inset: 8% 0 6%; background: radial-gradient(32% 40% at 50% 64%, rgba(124, 59, 246, .17) 0%, rgba(124, 59, 246, .07) 40%, rgba(124, 59, 246, 0) 78%); } /* Колонка по центру. Ширину держит не контейнер (1880px — на нём строка уходит за все пределы читаемости), а мера в em: при смене кегля число строк не плывёт. */ .cta__inner { max-width: 40em; margin-inline: auto; } /* Лид центрируется сам: у .lead стоит max-width: --measure и прижим влево полями по умолчанию. Здесь мера уже, чем 68ch, — под коротким заголовком строка на 68 знаков разъезжается шире самого заголовка. */ .cta__lead { max-width: 24em; margin: var(--s-5) auto 0; color: var(--muted); } /* Отбивка до кнопки заметно больше, чем до лида: заголовок и лид — одна мысль, кнопка — следующий шаг. */ .cta__actions { margin-top: var(--s-7); } /* Дата встаёт над кнопкой вплотную — 16px против 48px до лида сверху и 24px до приписки снизу. Это закон близости, а не вкус: дата и кнопка должны читаться одной группой «когда и куда нажать», а не двумя подписями подряд. Кегль подписи, но вес и цвет крепче приписки под кнопкой (--muted 600 против --muted-2 400): это факт, а не сноска. Брендовым не красим — на экране ровно один акцент, и он на кнопке. */ .cta__date { margin-bottom: var(--s-4); font-size: var(--fz-small); font-weight: 600; line-height: 1.2; color: var(--muted); /* Диапазон дат — одна группа: без nowrap браузер вправе сломать строку по короткому тире. Неразрывный пробел перед «августа» стоит в разметке. */ white-space: nowrap; } /* Главное действие сайта — кнопка чуть крупнее базовых 56px. Ступень взята не с потолка: ровно так же приподнята кнопка первого экрана (01-hero.css, .hero__actions .btn--primary { min-height: 64px }). Кегль подписи не трогается: у .btn он один на весь сайт. */ .cta__btn { min-height: 64px; padding-inline: var(--s-7); } .cta__note { max-width: 32em; margin: var(--s-5) auto 0; line-height: 1.5; } /* ---------- Адаптив ---------- */ /* ---------- Переносы на телефоне ---------- ПРАВКА ЗАКАЗЧИКА про строку «Про интенсив ты знаешь всё, что нужно. Осталось нажать.»: «почему-то перенос, убери все вот эти вот прямые переносы». Прямых переносов на экране было два, и оба не в самой этой строке: 1.
в заголовке «Всё, бро.
Погнали.» — единственный жёсткий перенос секции. На телефоне он ломал фразу принудительно и на любой ширине в одном и том же месте, то есть ровно то, что свод называет браком: «ручные
в заголовках — на другой ширине они рвут текст в произвольном месте». Гасим его на узких экранах (display: none на самом
— элемент перестаёт создавать перенос) и отдаём фразу text-wrap: balance из base.css: где помещается — одна строка, где нет — две ровные, но по ширине экрана, а не по разметке. На десктопе
остаётся: пауза «ВСЁ, БРО.» перед «ПОГНАЛИ.» там принята, а десктоп в этом круге не трогаем. 2. Мера у самой строки: max-width: 24em. Она у́же контейнера и рвала фразу раньше, чем это делает ширина экрана. Ниже 640 она уже снималась, теперь снимается на всём телефонном диапазоне до 767 — на 641-767 контейнер 617-719px, а 24em это 504, то есть перенос назначала мера, а не экран. Фраза ложится сама. */ @media (max-width: 767px) { .cta__title br { display: none; } .cta__lead { max-width: none; } /* ---------- Финальный заголовок крупнее заголовков разделов ---------- Правка заказчика: «этот заголовок побольше процентов». Отдельная — общую ступень кеглей поднимает tokens.css, но она поднимает ВСЕ заголовки секций сразу, и финал после неё остался бы ровно таким же, как тринадцать заголовков до него. Заказчик просил не «крупнее, чем было», а «крупнее» — то есть чтобы финал звучал громче раздела. Множитель, а не своё число в px: правило едет поверх --fz-h2 и остаётся верным, какой бы ступень ни поставил tokens.css. Разъехаться с ним нечем — здесь не назначается кегль, а объявляется разница. Замер: на 375 --fz-h2 = 27.4px, финал становится 33.4; на 320 — 24 и 29.3. Фраза при этом по-прежнему ложится сама (см. выше про
): где помещается в строку — одна строка, где нет — две ровные по balance. Только на телефоне. На десктопе кегль финала равен .h2 и это принято заказчиком, а десктоп в этом круге не трогаем. */ .cta__title { font-size: calc(var(--fz-h2) * 1.22); } } /* Высота кнопки на телефоне. На десктопе 64 у финала — эхо первого экрана, и это принято. На телефоне у той же роли набралось три значения сразу: 64 здесь, 56 в цене, 46 в историях, — причём цена и финал стоят через один экран друг от друга и читаются как кнопки из разных наборов. Сводим к двум: главная 56, вторичная 48. 64 остаётся ровно одной кнопке сайта — той, что в первом экране, где рядом нет ни одной другой. Ширина при этом всё равно во всю полосу (.btn в base.css ниже 640), так что заметности кнопка не теряет: она и так самый крупный объект экрана. */ @media (max-width: 767px) { .cta__btn { min-height: 56px; } } @media (max-width: 640px) { /* На узком экране .btn из base.css растягивается во всю ширину — обёртке остаётся только не мешать. Собственные поля кнопки при этом не нужны: ширину задаёт контейнер. */ .cta__btn { padding-inline: var(--s-5); } /* Мера в em на мобильном ни к чему: контейнер и так уже её. Снимаем, чтобы строки не ужимались вдвое против ширины экрана. У .cta__lead это же делает блок ≤767 выше — здесь остаётся приписка. */ .cta__note { max-width: none; } } /* Своей анимации у секции нет намеренно. Живого на экране ровно один элемент — кнопка, и её медленный блик уже описан в base.css (.btn--primary, btn-sheen) вместе со своим @media (prefers-reduced-motion: reduce). Второе движение рядом с ним — движение ради движения; выключать здесь нечего, поэтому и блока с prefers-reduced-motion в файле нет. */