/* ========================================================================== Токены бренда. Единственный файл, который меняется под нового заказчика. Всё остальное написано на этих переменных и не трогается. Источник значений: styles.css прошлого лендинга NextBot + макет «ИИ БРО 1.0». ========================================================================== */ :root { /* ---------- Цвета бренда ---------- */ --brand: #7C3BF6; --brand-dark: #6D28D9; --brand-light: #8B4DFF; --brand-soft: #EFE9FE; /* заливка бейджей и кружков под иконками */ /* Подложка плашек-выводов. Была #F6F2FF — на фоне секции #F7F6FB отличалась на 1-4 единицы по каналам, то есть плашки не читались как плашки вообще. Здесь взят тон, который видно, но который не спорит с карточками. */ --brand-softer: #E9E1FD; /* ---------- Текст ---------- */ --ink: #1B1633; /* заголовки, основной текст */ --ink-2: #3E3A55; --muted: #5D5773; /* вторичный текст */ --muted-2: #726C87; /* подписи, мелочь */ /* ---------- Поверхности ---------- */ --bg: #FFFFFF; --bg-tint: #F7F6FB; /* общий фон страницы, холодный светлый */ --surface: #FFFFFF; /* карточки */ --line: #EEEBF4; /* разделители и границы */ /* ---------- Семантика (блоки «Было / Стало») ---------- */ /* Оба цвета затемнены против исходных: #C2455A давал 4.47:1 на своей подложке, #2E8B57 — 3.96:1, оба не дотягивали до нормы 4.5:1 для мелкого текста. */ --bad-bg: #FDF2F3; --bad-ink: #B03A50; --good-bg: #F1F9F3; --good-ink: #1E7A46; /* ---------- Тёмная зона (подвал, финальный CTA) ---------- */ --dark-bg: #15111F; --dark-ink: #8B84A8; --dark-link: #A99FC6; /* ---------- Шрифты ---------- Основной — Golos Text (как в прошлом лендинге). Заголовочный — узкий жирный гротеск. В макете предположительно Druk Cyr (платный), заменён на бесплатный аналог с кириллицей. Финальный выбор — см. docs/fonts.md. Файлы лежат в fonts/, объявления — в css/fonts.css (собирается скриптом tools/fetch-fonts.js). Google Fonts CDN снят: общий кэш разделён по сайту с 2020 года, выигрыша не осталось, а цена — два чужих домена перед первой отрисовкой и IP посетителя на стороне Google. Вторым в каждой цепочке стоит не системный шрифт, а подогнанный фолбэк из fonts.css: системный там подтянут под метрики вебшрифта по ширине и высоте строки, поэтому в момент подмены вёрстка не прыгает. Для 'Oswald' третьим оставлен 'Golos Text' — на случай, если ни Arial, ни Roboto в системе нет и подогнанный фолбэк не находится. */ --font-base: 'Golos Text', 'Golos fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-display: 'Oswald', 'Oswald fallback', 'Golos Text', system-ui, sans-serif; /* ---------- Типографическая шкала ---------- ЗАКРЫТЫЙ НАБОР. Кеглей, которых нет в этом списке, на сайте не бывает: в css/sections/*.css у font-size стоит только var(--fz-*). Раньше каждая секция подбирала кегли заново — 149 объявлений font-size на 99 разных записей, и на 1440 получалось 52 уникальных computed-размера. Одинаковые по роли вещи звучали с разной громкостью, и это ровно то, что заказчик назвал «нет единой системы». Ступени подобраны руками под этот макет, а не вычислены коэффициентом: модульные 1.25/1.333 из калькуляторов типошкал — ориентир для первой прикидки, метода за ними нет. Три семьи, потому что роли разные: ТЕКСТ — шесть ступеней (h2 / h3 / лид / основной / подпись / метка). Ими набрано всё, что читают строками. Это и есть «4-6 размеров текста на весь сайт» из свода. КРУПНЫЙ НАБОР — четыре ступени, каждая живёт в одном-двух местах и работает как изображение, а не как текст: имя продукта, цена и два отклонения кегля заголовка секции. ЧИСЛА-РЕЗУЛЬТАТЫ — две ступени: цифра в карточке результата. Отдельно стоит --fz-verdict: у полки-вывода один кегль на все шесть секций, и секции его не трогают. Значения верхних границ — замер по макету (1920, экспорт 3344, коэффициент 1.742). В скобках после каждой строки — computed на 375 / 768 / 1440 / 1920. */ /* --- КРУПНЫЙ НАБОР --- */ /* Имя продукта. Одно место — первый экран. (40 / 68 / 127 / 170) */ --fz-h1: clamp(40px, 8.85vw, 170px); /* Цена. Одно место — экран 12. Это не текст, а главный объект экрана: число набрано как заголовок и композицию держит оно. (48 / 57 / 107 / 142) */ --fz-price: clamp(48px, 7.4vw, 142px); /* Потолок того же кегля, но мерится КАРТОЧКОЙ, а не окном. Запись выше задана от vw, а карточка цены — доля сетки 597/375/683, то есть 36% контейнера: окно и карточка ничем не связаны, и на границе раскладки их разносит скачком — на 1180 под содержимое карточки 427px, на 1181 уже 266 при том же кегле 87. Число вылезало из карточки САМО, без прежней цены рядом (замер: 22px на 1190-1410). Другим коэффициентом vw это не чинится: чинить надо скачок, а скачка vw не видит. 1cqi здесь — процент ширины содержимого .price__card, где и объявлен container-type. Поэтому токен применим ТОЛЬКО внутри этой карточки: без контейнера cqi считается от окна и потолок станет ложным. 28 снято замером: самая длинная строка цены «6 900 ₸» набором Oswald 700 занимает 3.27 своего кегля, 28 x 3.27 = 92% ширины карточки. Оставшиеся 8% — запас на метрический фолбэк, пока грузится вебшрифт. ВНИМАНИЕ: число привязано к длине строки цены. Цена в пять знаков («12 900 ₸») даёт около 3.6 кегля, и 28cqi заняли бы 101% карточки. Меняете цену в таблице tools/build-html.js — пересчитайте потолок и прогоните tools/overflow.js. */ --fz-price-cap: 28cqi; /* Потолок плашки «скидка 87% на первый поток» в той же карточке и по той же причине. Плашка — inline-flex, ширину берёт от содержимого и карточку не спрашивает, поэтому на 1190-1340 вылезала за её поле на 18px. Почему вообще понадобился потолок: в строку плашка не влезает никогда — ей нужно 474px при 297 доступных на 1280. Значит вопрос не в том, чтобы убрать перенос, а в том, чтобы он случился в единственном верном месте. «на первый поток» связано неразрывными в разметке, и без потолка вторая строка оказывалась шире карточки. С ним плашка встаёт в две строки на всём диапазоне вместо трёх с висячим «ПОТОК». 7.5 снято перебором с шагом 10px по 1000-1920: 8cqi оставляли 10px вылета, 7.5 дают ноль. Кусается потолок только в узкой полосе — на 1920 карточка широкая, и 7.5cqi там выше --fz-h3, то есть правило холостое. */ --fz-price-badge-cap: 7.5cqi; /* Два отклонения от общего кегля заголовка секции — и оба по одной причине: ширина колонки, в которой заголовок стоит. Одиннадцать экранов из тринадцати ставят заголовок в полосу обычной ширины и берут --fz-h2. ГРОМКИЙ — экран 2 (02-problem.css). Единственное место, где заголовок занимает колонку целиком: под ним нет ни лида, ни карточек, справа стоит отдельный объект. На общем кегле колонка провисает. (30 / 36 / 68 / 90) */ --fz-h2-loud: clamp(30px, 4.7vw, 90px); /* ТИХИЙ — экран 8 (08-platform.css). Самая узкая колонка заголовка на сайте: 47% полосы рядом со скриншотом платформы. Заголовок там утверждён в три строки, и на общем кегле их становится пять, а экран перестаёт помещаться в окно ноутбука — тоже отдельное требование заказчика. (26 / 26 / 39 / 52) */ --fz-h2-quiet: clamp(26px, 2.7vw, 52px); /* --- ТЕКСТ --- */ /* Заголовок секции. Один кегль на весь сайт, кроме двух мест выше. Было восемь: 38.9 / 41 / 42 / 53.6 / 55.4 / 63.4 / 69.1 / 79.2 на 1440. Величина не средняя из этих восьми, а самая тесная: заголовок экрана 4 стоит в колонке шириной 72% полосы (правее робот) и обязан лечь ровно в две строки — это утверждённая заказчиком разбивка. Замерено на 1000/1200/1440/1600/1920: при 3.72vw и потолке 70px первая строка «ЭТО БУДУТ 3 МЯСНЫХ ТРУДОВЫХ ДНЯ,» с разгоном .02em влезает в колонку с запасом 16-26px на всём диапазоне; при 3.85vw не влезает нигде. (28 / 29 / 54 / 70) */ --fz-h2: clamp(28px, 3.72vw, 70px); /* Заголовок карточки, вопрос в списке, крупная метка. (19 / 19 / 27 / 34) */ --fz-h3: clamp(19px, 1.85vw, 34px); /* Подзаголовок секции — один на все секции. Было шесть кеглей. Сюда же реплики в мокапах переписки и абзацы-подводки. (18 / 18 / 21 / 28) */ --fz-lead: clamp(18px, 1.45vw, 28px); /* Основной текст. (16 / 16 / 17 / 23) */ --fz-body: clamp(16px, 1.2vw, 23px); /* Подпись, ярлык, служебная строка. (15 / 15 / 15 / 19) */ --fz-small: clamp(15px, 1vw, 19px); /* Мелкая метка внутри мокапов и надзаголовок-метка. (13.5 / 13.5 / 13.5 / 17) */ --fz-caption: clamp(13.5px, .89vw, 17px); /* --- ЧИСЛА-РЕЗУЛЬТАТЫ --- */ /* Крупная цифра результата: калькулятор, кейсы, показатели платформы, удар в конце экрана 2. Было четыре кегля (49 / 49 / 51.1 / 52.6) — одна роль, четыре громкости. (30 / 30 / 49 / 65) */ --fz-num: clamp(30px, 3.4vw, 65px); /* Средняя цифра: номер дня, зачёркнутая цена, цена на первом экране. Было 38 / 38.3 / 38.3. (24 / 24 / 38 / 51) */ --fz-num-sm: clamp(24px, 2.66vw, 51px); /* Потолки для пары цен на первом экране. Карточка там жёстко ограничена по ширине (max-width: 300px, боковые поля --s-5, то есть 252px под содержимое), а оба кегля выше растут от vw. Пара тенговых сумм на 1920 просила 342px в 252 доступных, и зачёркнутая цена уезжала на фон мимо белой коробки (замер: 90px на 1380-1920). Числа — не круглые «на глаз», а последняя ширина, на которой пара ещё влезала: 36px это --fz-num-sm на 1353, 25px это --fz-h3 на 1351. Выше кегли замирают, в строке остаётся 3px запаса, высота карточки не растёт. Потолок применяется на обеих страницах. Пока на первой стояли доллары, он был только тенговым: «$15 / $115» помещалось с запасом 120px, и сажать доллар заодно значило бы платить за чужую беду. Доллары ушли, остались белорусские рубли и тенге — обе пары длинные. 36px это --fz-num-sm на 1353, 25px это --fz-h3 на 1351: последняя ширина, на которой самая длинная пара ещё влезала. Меняется цена в tools/build-html.js — потолок пересчитывается заново. Почему не cqi, как у --fz-price-cap: там карточка меняет ширину скачком на границе раскладки, а здесь она постоянные 300. Проверено и обратное: container-type на карточке первого экрана обнуляет автоминимум флекс-элемента (contain: inline-size), и карточка ужимается с 300 до 213 на 1440. Потолок числом такой побочки не даёт. */ --fz-hero-price: min(var(--fz-num-sm), 36px); --fz-hero-price-old: min(var(--fz-h3), 25px); /* --- ВЫВОД СЕКЦИИ --- */ /* Кегль полки-вывода. Стоял в base.css числом, здесь он на виду рядом с остальной шкалой: у выводов один кегль на все шесть, и секции его не трогают (docs/visual-language.md). (21 / 21 / 34 / 42) */ --fz-verdict: clamp(21px, 2.35vw, 42px); /* ---------- Интерлиньяж ---------- Свод: крупные заголовки 1.0–1.1, подзаголовки 1.25–1.35, основной текст 1.5–1.6, для кириллицы верхняя граница 1.55–1.65 (у русской строки почти нет выносных вверх, и она читается как ровная серая полоса). --lh-tight выглядит выпадающим из «1.0–1.1», но это пересчёт, а не нарушение: у Oswald заглавные занимают 0.843 кегля против 0.705 у основного шрифта, и заголовки набраны капсом. 1.22 по кеглю даёт между строками тот же просвет, что 1.02 на шрифте с обычной высотой заглавных. */ --lh-tight: 1.22; /* заголовки секций и первого экрана, Oswald caps */ --lh-lead: 1.35; /* подзаголовок секции */ --lh-heading: 1.25; /* заголовок карточки */ --lh-body: 1.6; /* основной текст, верх кириллического коридора */ /* ---------- Трекинг ---------- Направление старое и верное: крупный текст поджимать, мелкий и капслок разгонять. Числовых градаций («−1…−2% на 32–48px») в источниках нет — это достроенная по аналогии шкала, поэтому здесь ровно три ступени разгона, все внутри требования свода 0.02–0.08em на любом text-transform: uppercase, и одна ступень поджима на крупных числах. Разгон обязателен не потому, что «капс убивает силуэт слова» — это объяснение отвергнуто (parallel letter recognition), и в кириллице оно вдвойне слабое: силуэт русского слова и без капса почти прямоугольный. Настоящая причина прикладная: прописные в кириллице шире строчных на 19,9%, и без разгона на мелком кегле они слипаются. */ --ls-caps-lg: .02em; /* капс крупнее 24px */ --ls-caps-md: .04em; /* капс 16–24px */ --ls-caps-sm: .08em; /* капс 15px и мельче */ --ls-num: -.01em; /* только крупные числа от 38px */ /* ---------- Шкала отступов (кратно 4) ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* Вертикальное поле секции. ЕДИНСТВЕННАЯ РУЧКА межсекционной отбивки: соседние секции упираются друг в друга полями, поэтому зазор между любыми двумя экранами равен 2 × --section-y. 375 → 80 768 → 80 1440 → 121 1920 → 160 Свод: между секциями 96–160 на десктопе, 48–80 на мобильном — обе границы выдержаны, и главное, значение одно. Было шесть переопределений в секциях и семь разных зазоров от 82 до 172 px на 1440. Собственные поля остались ровно у одной секции — у первого экрана (01-hero.css): там нижнее поле привязано к высоте окна, потому что робот по макету доходит до нижней кромки экрана. Это стык страницы со сгибом, а не стык двух равноправных секций. Отбивки внутри секции обязаны быть заметно меньше: .section__head даёт 48 (--s-7) на всех ширинах, то есть от 1.7 (375) до 2.5 (1440) раза меньше межсекционной. Это закон близости, а не вкус: пространство вокруг группы больше, чем внутри неё. ВНИМАНИЕ: до 999px значение переопределяется — см. блок «Ступени под узкий экран» в конце файла. Эта запись остаётся десктопной. */ --section-y: clamp(40px, 4.2vw, 80px); /* ---------- Сетка ---------- Замер по макету при вьюпорте 1920: поле слева 67px, ширина контента 1743px. Значит внешняя рамка блока — 1880px, а не 1780: при 1780 контент выходил 1636px и вся композиция сжималась. Прежние 1440px ломали пропорции на всех секциях. ВНИМАНИЕ: до 999px --container-pad переопределяется — см. блок «Ступени под узкий экран» в конце файла. Эта запись остаётся десктопной. */ --container: 1880px; --container-pad: clamp(20px, 3.5vw, 67px); /* Предел длины строки для всех текстовых блоков. Свод: 45–75 знаков, ориентир 66, задавать в ch, а не в px из латинского референса. Почему 60, а не 65-68. Единица ch — ширина нуля, у Golos Text это 0.62em. Средний знак русского текста этого лендинга (замер по реальной фразе, вместе с пробелами) — 0.5441em. Значит 1ch ≈ 1.14 знака, и 60ch = 68 знаков — ровно ориентир свода. Прежние 68ch давали 77 знаков, то есть выходили за верхнюю границу. Обоснование правила называем честно: это про комфорт и предпочтение читателя, а не про скорость чтения — экранные замеры по скорости дают обратный результат. Держим потому, что длинную строку бросают, а не потому, что её медленнее читают. */ --measure: 60ch; /* ---------- Скругления ---------- */ --r-sm: 10px; /* бейджи, мелкие плашки */ --r-md: 16px; /* кнопки, поля ввода */ --r-lg: 24px; /* карточки */ --r-xl: 32px; /* крупные блоки и плашки-выводы */ --r-pill: 999px; /* ---------- Тени ---------- Многослойные: близкая тень даёт контакт с поверхностью, дальняя — объём. Одиночная тень читается плоско, и именно из-за неё интерфейс выглядит дешевле, чем он есть. */ --sh-card: 0 1px 2px rgba(27, 22, 51, .04), 0 6px 20px rgba(27, 22, 51, .05); --sh-lift: 0 2px 4px rgba(27, 22, 51, .05), 0 14px 44px rgba(27, 22, 51, .10); --sh-hover: 0 2px 6px rgba(27, 22, 51, .06), 0 22px 60px rgba(124, 59, 246, .16); --sh-brand: 0 2px 8px rgba(124, 59, 246, .20), 0 14px 36px rgba(124, 59, 246, .28); /* ---------- Фирменные заливки ---------- */ --grad-brand: linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 100%); /* Мягкая подложка под акцентные блоки: не плоская заливка, а перелив */ --grad-soft: linear-gradient(135deg, #F1EBFE 0%, #E7DEFD 100%); /* Свечение под акцентным элементом — даёт ощущение подсветки, а не наклейки */ --glow-brand: 0 0 0 1px rgba(124, 59, 246, .10), 0 8px 32px rgba(124, 59, 246, .18); /* ---------- Движение ---------- */ --t-fast: 150ms ease-out; --t-base: 220ms ease-out; } /* ========================================================================== СТУПЕНИ ПОД УЗКИЙ ЭКРАН -------------------------------------------------------------------------- Всё, что выше, сводилось под десктоп: там ширина большая и clamp по vw отрабатывает честно. На телефоне и планшете те же clamp'ы упираются в нижнюю границу и отдают ОДНО значение на весь диапазон 320-950 — то есть шкалы там фактически нет. Здесь она появляется. Границы ровно три, и дальше в проекте новых заводить не нужно: до 359 «узкий телефон» — 320 и 350, поля минимальные 360-767 «телефон» — 360…430, основная масса трафика 768-999 «планшет» — 768 и 834, есть место на вторую колонку от 1000 ДЕСКТОП, ПРИНЯТ ЗАКАЗЧИКОМ — ни один токен здесь не переопределяется, работают исходные записи выше Почему у типографики граница 700, а у полей 768. Поля — про физическую ширину пальца и кромки корпуса, они меняются вместе с классом устройства. Кегль — про длину строки: колонки в секциях расходятся на две по медиазапросам 640-700, и планшетная ступень кегля обязана начинаться там же, где строка становится короче, а не на 68px позже. ========================================================================== */ /* ---------- Горизонтальное поле ---------- Было clamp(20px, 3.5vw, 67px): 3.5vw обгоняет 20px только на 571px, то есть на ВСЕХ телефонах поле было ровно 20px — значения, которого нет в шкале --s-1…--s-10. Теперь три ступени, все из шкалы. */ @media (max-width: 359px) { :root { --container-pad: var(--s-4); } } /* 16 */ @media (min-width: 360px) and (max-width: 767px) { :root { --container-pad: var(--s-5); } } /* 24 */ @media (min-width: 768px) and (max-width: 999px) { :root { --container-pad: var(--s-6); } } /* 32 */ /* ---------- Вертикальное поле секции ---------- Было clamp(40px, 4.2vw, 80px): 4.2vw обгоняет 40px только на 952px — опять одно значение на весь мобильный диапазон. Межсекционный воздух при этом выходил 80px при внутренних зазорах 24-48: разницу в 16px глаз не читает как «здесь кончился один экран и начался другой». 48 даёт стык 96 против внутренних 24-48 — отношение от 2.0 до 4.0. */ @media (max-width: 767px) { :root { --section-y: var(--s-7); } } /* 48 → стык 96 */ @media (min-width: 768px) and (max-width: 999px) { :root { --section-y: var(--s-8); } } /* 64 → стык 128 */ /* ---------- Планшетная ступень кегля ---------- Между 700 и 999 сайт до сих пор набран телефонными кеглями: заголовок секции 28.6px, лид 18px, текст 16px — те же числа, что на 320. При этом строка на 768 вырастает вдвое, и разрыв h1/h2 доходит до 2.4 (68 против 28.6): заголовок секции перестаёт держать свой экран. h2 34-36: отношение к h1 падает до 1.9, то есть в тот же коридор, в котором эта пара живёт на десктопе (70/53.6 = 1.3) и на телефоне (40/28 = 1.4). Лид 20 и текст 17 — одна ступень вверх, ровно чтобы мера строки вернулась в 60-66 знаков при выросшей колонке. */ @media (min-width: 700px) and (max-width: 999px) { :root { --fz-h2: clamp(34px, 4.7vw, 36px); --fz-lead: 20px; --fz-body: 17px; } } /* ---------- Один заголовок секции до 999px ---------- ГРОМКИЙ (--fz-h2-loud, экран 2) и ТИХИЙ (--fz-h2-quiet, экран 8) — отклонения, у которых причина ровно одна: ширина колонки, в которой заголовок стоит. На десктопе колонки действительно разные, и оба отклонения там остаются. До 999px колонок нет: и заголовок проблемы, и заголовок платформы стоят во всю ширину контейнера, значит причины для отклонения нет, а на 375 они давали 30 и 26 против 28 у остальных одиннадцати — три громкости у одной роли без единого основания. Токены не удалены и не переписаны: они просто равны общему заголовку там, где их повод не работает. Секции продолжают ссылаться на свои имена и ничего у себя не правят. */ @media (max-width: 999px) { :root { --fz-h2-loud: var(--fz-h2); --fz-h2-quiet: var(--fz-h2); } } /* ---------- Заголовок секции на телефоне ---------- Базовая запись clamp(28px, 3.72vw, 70px) на всём мобильном диапазоне отдаёт нижнюю границу, то есть 28px и на 320, и на 430. Прошлый круг опустил её до 6.4vw (24 / 24 / 25.2 / 27.5 на 320 / 375 / 393 / 430), потому что мерил высоту страницы: 24 вместо 28 снимали 304px. Заказчик прошёл всю мобильную версию и на одиннадцати экранах из тринадцати написал «заголовок покрупнее». Это не одиннадцать замечаний, а одно: ступень занижена. Диагноз читается числом — отношение заголовка секции к своему же подзаголовку. На 1440 это 53.6/21 = 2.55, на 1920 70/28 = 2.5, а на 375 было 24/18 = 1.33. Одна и та же пара ролей звучала на телефоне вдвое тише, чем на десктопе: заголовок переставал быть заголовком и читался как жирная строка лида. Новая запись: 7.3vw, нижняя граница прежняя, верхняя поднята с 28 до 32. 320 → 24 (упор в минимум) 360 → 26.3 375 → 27.4 393 → 28.7 412 → 30.1 430 → 31.4 от 439px → 32 (упор в максимум) Отношение к лиду стало 1.52 / 1.59 / 1.74 на 375 / 393 / 430 — половина разрыва с десктопом закрыта. Больше не даёт арифметика, а не вкус: потолок ставят два самых длинных заголовка сайта — калькулятор (73 знака) и комьюнити (63). Замер: все тринадцать заголовков секций прогнаны по ширинам 320-460 с шагом 1px в опасной полосе. При 7.3vw ни один не выходит за четыре строки нигде на диапазоне. При 7.4vw ломается полоса 358-372: там --container-pad уже шагнул с 16 на 24 (граница 360), колонка просела с 323 до 312px, а кегль ещё растёт — и калькулятор уходит в пять строк. При 7.7vw пять строк получают и калькулятор, и комьюнити уже на 320, 375 и 393. Пять строк капсом — ровно та лесенка, которую заказчик сам назвал дефектом на экране 8. Почему 24 на 320 не поднято. Там колонка 288px, и первый же шаг вверх (25px) ломает калькулятор и комьюнити в пять строк. На узком телефоне ограничение физическое, и подъём кегля там не «покрупнее», а «лесенка». Верхняя граница 32, а не 28: раньше между мобильной ступенью (28 с 437px) и планшетной (34 с 700px) была ступенька в 6px на пустом месте. Теперь 32 → 34, и переход через 700px не читается скачком. Что этим НЕ чинится: заголовок экрана 8 остаётся в пяти строках на всех телефонных ширинах, и кегль тут ни при чём — держат неразрывные пробелы в разметке. Разбор и точная правка — в отчёте круга. Не четвёртая граница медиазапроса, а vw внутри существующей. Граница 699, а не 767: типографская ступень в этом файле начинается с 700 (см. блок выше), и новых границ проект не заводит. */ @media (max-width: 699px) { :root { --fz-h2: clamp(24px, 7.3vw, 32px); } } /* ========================================================================== ЛАНДШАФТ ТЕЛЕФОНА -------------------------------------------------------------------------- 852×393 шире 767, поэтому все мобильные ступени выше сюда не попадают: при повороте телефона страница получает ДЕСКТОПНЫЕ токены на экране высотой 393. Замер прошлого круга: в трёх секциях (проблема, три дня, платформа) шапка «бейдж + заголовок + лид» занимает весь экран целиком, содержания видно 0px; в остальных — от 45 до 83%. Здесь только сквозная часть: громкость шапки и межсекционный воздух. Перекомпоновка секций в две колонки — работа самих секций (С10 в плане). (pointer: coarse) обязателен. Без него в запрос попадает и десктоп с низким окном — а десктоп принят заказчиком и не трогается. ========================================================================== */ @media (max-height: 500px) and (orientation: landscape) and (pointer: coarse) { :root { /* 31.7 → 24: тот же кегль, что на телефоне в портрете. Заголовок секции на экране высотой 393 не имеет права занимать три строки. */ --fz-h2: 24px; --fz-lead: 16px; /* 40 → 32. Стык двух экранов остаётся 64 при внутренних 12-24 — отношение 2.7, закон близости выдержан. */ --section-y: var(--s-6); } }