/* ==========================================================================
Секция 8 — платформа NextBot
Правка заказчика: видео нет, поэтому плеер и кнопка play не верстаются.
Вместо нарисованного мокапа — реальный скриншот платформы,
плашка «Скринкаст платформы» заменена на нейтральную подпись.
========================================================================== */
/* Экран обязан помещаться в одно поле зрения: заказчик просил, чтобы его
было видно целиком, без дополнительной прокрутки. Целевые окна 1440×800
и 1366×768. Вертикальные поля секции взяты на ступень ниже общих
(--section-y): это первое, чем платят за высоту, и на стыке с соседями
разница в 17px не читается. Дальше платят отбивки внутри блока (перед
списком, перед показателями, поля ячеек показателей) и ширина скриншота.
Кегль текста в счёт не пошёл: заголовок уменьшился по другой причине —
ради трёх строк, а описание, пункты и цифры остались как были.
Замер getBoundingClientRect на #platform: 754px при окне 800,
738px при окне 768. */
/* Обрезка только по горизонтали, и это правка стыка с экраном 9.
Было overflow: hidden. Секция кончается карточкой показателей во всю
ширину, у неё парная тень --sh-lift; дальняя тень (0 14px 44px) уходит
вниз примерно на 80px — заметно дальше нижнего поля секции (43px на 1440,
36px на узких). overflow: hidden срезал её ровно по нижней кромке секции,
и на стыке с «Как продать ИИ БРО» шла прямая горизонтальная граница тона
во всю ширину экрана: над ней 244, под ней 247 — ступенька в 3 единицы
на одной пиксельной строке. Именно её заказчик и назвал корявым переходом.
Замерено построчно на 1440 и 768; при overflow: visible ступенька
исчезает, тон доходит до 247 плавно за 30px.
Ставим overflow-x: clip — тот же приём, что в 05-niches.css. По горизонтали
резать по-прежнему надо: кольца уезжают на 340px левее контейнера, и без
обрезки documentElement.scrollWidth вырастет, то есть страница снова
держалась бы на overflow-x: hidden у body. Значение clip, а не hidden:
hidden по одной оси заводит скролл-контейнер (и ломает position: sticky
с якорной прокруткой) и вынуждает вторую ось стать auto. Вертикаль
при clip остаётся проницаемой — тени и подсветки секции затухают сами,
резать их нечему.
Что раньше держала вертикальная обрезка, проверено отдельно: кольца
(top: 5%, высота ≤460 при высоте секции 754) целиком внутри, свечение
под рамкой скриншота (-13% высоты) упирается в карточку показателей,
маска низа скриншота работает на самой картинке. Наружу не выходит
ничего, кроме той самой тени. */
/* Своего --section-y у секции больше нет: межсекционная отбивка одна
на весь сайт (tokens.css). Высоту, которой экран платил за «поместиться
в одно поле зрения», теперь дают отбивки внутри блока, а не поля секции:
у поля секции работа другая — держать одинаковый зазор между экранами. */
.platform {
overflow-x: clip;
}
/* ---------- Бейдж ---------- */
/* Материал общий с бейджами экранов 1 и 4: перелив вместо плоской заливки,
волосяная брендовая кромка, мягкое свечение. Размер не трогаем —
он единый для всей страницы (base.css).
ТОЛЬКО ОТ 768. Ниже base.css снимает у всех бейджей секций заливку,
рамку, тень и поля: там метка — строка над заголовком, а не плашка
(см. раздел про шапки секций в base.css). Селекторы одинаковой
специфичности (.section .badge и .platform .badge — оба 0-2-0), но
08-platform.css подключается после base.css, поэтому плашка тихо
возвращалась — и возвращалась с padding: 0 от base, то есть без полей.
Замер (приёмка 11.08.2026): экран 8 был единственным из тринадцати,
у кого метка на телефоне читалась сиреневой полосой, а не строкой.
Медиазапрос ставит правило на ту ширину, для которой оно и писалось. */
@media (min-width: 768px) {
.platform .badge {
background: var(--grad-soft);
border: 1px solid rgba(124, 59, 246, .16);
box-shadow: 0 1px 2px rgba(27, 22, 51, .04),
0 10px 28px rgba(124, 59, 246, .14);
}
}
/* ---------- Декор ----------
Объект секции — мокап платформы справа, объект-окно, значит точки
(docs/visual-language.md, «Декор: два вопроса»).
Были кольца, и от них наружу торчала полоса в 120px у левой кромки экрана:
формально приём стоял, на снимке 1440 его не было видно вовсе, а на 640
его и вовсе приходилось выключать, чтобы он не лёг под заголовок. Кольца —
ореол силуэта, а на экране прямоугольное окно: концентрический круг
за прямоугольником не ореол, а случайная дуга рядом. Точечная сетка
продолжает прямоугольную геометрию самого интерфейса, поэтому окну
достаётся она.
Коробка 200×160 садится на внутренний нижний угол мокапа: при left 42%
и top 52% это 605..805 по горизонтали и 417..577 по вертикали, мокап
занимает 705..1389 и 89..524. Верхний правый кут коробки уходит под окно,
наружу выступает угол — сетка нигде не начинается прямой линейкой.
До верхней кромки секции 417px, до нижней 224: обрезать нечего,
и на стык с экраном 7 узор не выходит. */
.platform__dots {
left: 42%;
top: 52%;
width: 200px;
height: 160px;
}
/* ---------- Сетка ---------- */
/* Замер по макету (экран 8, вьюпорт 1920):
рамка скриншота 853..1840 = 987px
текстовая колонка 87..798 = 711px (самая длинная строка описания — 709)
зазор между колонками 48
Текстовой колонке отдано 47% вместо макетных 42%. Причина в шрифте:
в макете заголовок набран узким Druk, самая длинная строка «ГДЕ ТЫ СМОЖЕШЬ
ВСЁ СОБРАТЬ.» занимает 12.8 кегля, у нашего Oswald та же строка — 14.3
кегля, то есть на 12% шире. В макетные 711px три строки Oswald при том же
кегле не встают. Скриншот от этого теряет 9% ширины — размен честный:
заголовок в три строки заказчик назвал прямо, а мелочь на скриншоте
и так читается только по рамке. */
.platform__grid {
display: grid;
grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
align-items: center;
gap: var(--s-7);
}
/* ---------- Текстовая колонка ---------- */
/* Отбивки шапки приведены к общим для лендинга: бейдж → H2 40, H2 → лид 24.
Прежние 48/48 были из-за надзаголовка-черты, которого больше нет. */
/* Одно из двух отклонений от общего кегля заголовка секции — тихое.
Причина не «этот экран менее важен», а ширина колонки: 47% полосы,
самая узкая колонка заголовка на сайте (справа скриншот платформы).
Заголовок здесь утверждён в три строки и разбит
в разметке;
на общем --fz-h2 (53.6 на 1440) каждая из трёх строк ломается пополам —
получается пять, и экран перестаёт помещаться в окно ноутбука, чего
заказчик просил отдельно. Величина не новая: это прежний кегль экрана,
вынесенный в токен, — 2.66vw и есть наклон макета (51 при 1920). */
.platform__title {
margin-block: calc(var(--s-5) + var(--s-4)) var(--s-5);
max-width: none;
font-size: var(--fz-h2-quiet);
}
.platform__desc {
max-width: var(--measure);
color: var(--muted);
font-size: var(--fz-body);
line-height: var(--lh-body);
}
/* Отбивка перед списком на ступень ниже прежних 48: список читается как
продолжение описания, а не как отдельный блок, и экран садится по высоте. */
.platform__points {
margin: var(--s-6) 0 0;
padding: 0;
list-style: none;
display: grid;
gap: var(--s-3);
}
/* Маркер списка — значок, а не тире. Тире с макета было ровно декорацией:
три одинаковых чёрточки не добавляли ни смысла, ни материала, а такой же
росчерк уже работает на экранах 3 и 4 в другой роли. Значки duotone
из общего набора и стоят так же, как факты на первом экране:
значок брендового цвета, зазор 16, текст следом. */
.platform__point {
display: flex;
align-items: center;
gap: var(--s-4);
font-size: var(--fz-body);
line-height: 1.4;
}
.platform__point .icon {
width: clamp(24px, 1.7vw, 32px);
height: clamp(24px, 1.7vw, 32px);
color: var(--brand);
}
/* ---------- Скриншот платформы ---------- */
.platform__shot {
position: relative;
margin: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--s-3); /* макет: плашка стоит в 11px над рамкой */
}
/* Свечение под рамкой. Скриншот — главный аргумент экрана, и без подсветки
белая рамка на светлом фоне лежала плоско: тень читалась только снизу,
а вокруг было пусто. Пятно работает на объект, а не на секцию — оно
привязано к рамке и гаснет задолго до её кромок, поэтому стыка
с соседними экранами не создаёт (docs/visual-language.md). */
.platform__shot::before {
content: "";
position: absolute;
z-index: 0;
inset: 6% -7% -13%;
border-radius: 50%;
background: radial-gradient(58% 52% at 50% 52%, rgba(124, 59, 246, .22) 0%, transparent 70%);
pointer-events: none;
}
/* Подпись стоит над рамкой справа — на месте плашки «Скринкаст платформы»
из макета, но без намёка на видео. */
.platform__caption {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: var(--s-3);
/* Было 13px 22px — единственный оставшийся хардкод мимо шкалы отступов
(docs/site-upgrade-plan.md, п. 8). Ступени --s-3/--s-5 дают ту же
таблетку: высота 39px против прежних 41. */
padding: var(--s-3) var(--s-5);
border-radius: var(--r-pill);
background: var(--surface);
box-shadow: var(--sh-card);
color: var(--muted);
font-size: var(--fz-small);
line-height: 1;
}
/* Точка не просто цветной кружок, а индикатор живого продукта: медленное
расходящееся кольцо раз в 3.4 секунды. Движение здесь единственное
на экране и объясняет подпись, а не украшает её.
Анимируется ОТДЕЛЬНОЕ кольцо через transform и opacity, а не box-shadow
у самой точки. Причина не стилистическая: box-shadow не композируется —
каждый кадр браузер перерисовывает область под тенью заново, на телефоне
это стоит кадров ровно там, где их и так мало. Тот же рецепт уже стоит
у индикатора «онлайн» на экране 9 (.selling__demo-status::after)
и у точки бейджа в base.css — три одинаковых по смыслу пульса на сайте
устроены одинаково. Рисунок движения сохранён: кольцо стартует прижатым
к точке, разлетается до 22px и гаснет, больше половины цикла его нет. */
.platform__caption::before {
content: "";
width: 8px;
height: 8px;
border-radius: var(--r-pill);
background: var(--grad-brand);
}
.platform__caption::after {
content: "";
position: absolute;
left: var(--s-5);
top: 50%;
width: 8px;
height: 8px;
margin: -4px 0 0 -4px;
border-radius: var(--r-pill);
background: var(--brand);
pointer-events: none;
animation: platform-live 3.4s ease-out infinite;
}
@keyframes platform-live {
0% { transform: scale(1); opacity: .40; }
70%, 100% { transform: scale(2.8); opacity: 0; }
}
/* Конечный кадр — кольцо разлетелось и погасло: при выключенном движении
на экране остаётся одна точка. */
@media (prefers-reduced-motion: reduce) {
.platform__caption::after { animation: none; opacity: 0; }
}
/* Белая рамка вокруг скриншота — в макете мокап лежит на такой же подложке.
Скругления вложены согласованно: внешние 32 = поле 8 + внутренние 24.
Было 32 при поле 12 и внутренних 24 — линии не были параллельны.
Тень парная (--sh-lift) плюс волосяная кромка по контуру рамки: без неё
белая рамка на светлом фоне теряет границу там, где под ней светлое
свечение. */
.platform__frame {
position: relative;
z-index: 1;
width: 100%;
padding: var(--s-2);
border-radius: var(--r-xl);
background: var(--surface);
box-shadow: var(--sh-lift), 0 0 0 1px rgba(27, 22, 51, .05);
}
/* — строчный элемент и без этого держит внутри себя базовую линию:
под картинкой остаётся 4-5px «хвоста» строки, и на белой рамке он читается
неровным нижним полем. */
.platform__frame picture { display: block; }
/* height: auto — чтобы пропорция бралась из самого файла.
Атрибуты width/height в разметке нужны только против скачка при загрузке.
Кромка и растворение низа. Интерфейс на скриншоте обрезан посреди второго
ряда карточек — так снят исходник, и жёсткий срез читается как брак
картинки. Маска гасит последние проценты высоты: обрез становится
намеренным кадрированием, «дальше есть ещё». Inset-кромка отделяет
светлый интерфейс от белой рамки — без неё их края сливаются. */
.platform__img {
width: 100%;
height: auto;
border-radius: var(--r-lg);
background: var(--bg-tint);
box-shadow: inset 0 0 0 1px rgba(27, 22, 51, .07);
-webkit-mask-image: linear-gradient(to bottom, #000 0 88%, rgba(0, 0, 0, .5) 96%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 0 88%, rgba(0, 0, 0, .5) 96%, transparent 100%);
}
/* ---------- Показатели ---------- */
/* Показатели были голой строкой текста на фоне страницы: ни подложки,
ни тени — рядом с рамкой скриншота, у которой тень читается, они
выглядели вырезанными из другой системы («тени у соседей одинаковые»,
docs/visual-language.md). Теперь это один блок-карточка во всю ширину:
тень --sh-lift, как у всех растянутых блоков сайта, подложка не плоская
заливка, а перелив из двух собственных тонов страницы, и тонкая светлая
кромка сверху от .card--edge. Разделительная черта над блоком стала
не нужна — её роль взяла на себя кромка карточки. */
.platform__stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin: var(--s-6) 0 0;
/* Поля держат сами ячейки — иначе к их 48px сверху прибавились бы
32px от .card и блок раздувался бы на пустом месте. */
padding: 0;
list-style: none;
border-radius: var(--r-xl);
background: linear-gradient(165deg, var(--surface) 0%, var(--bg-tint) 140%);
box-shadow: var(--sh-lift);
}
/* Поля ячейки на ступень ниже прежних 48: экран считается по высоте целиком,
и 32 хватает, чтобы цифра не упиралась в кромку карточки. */
.platform__stat {
padding: var(--s-6) var(--s-5);
text-align: center;
}
.platform__stat + .platform__stat { border-left: 1px solid var(--line); }
/* Цифры показателей набраны НЕ узким заголовочным шрифтом: в макете это широкий
жирный гротеск. Замер по макету при 1920: «200+» 158×51, «48 000+» 258,
третий показатель 312. Oswald при такой высоте даёт ширину вдвое меньше,
поэтому здесь основной шрифт в bold — на нём совпадают и высота, и ширина
строки. Сам показатель по правке заказчика теперь в долларах ($1 500),
и строка стала короче — на посадку это не влияет, ячейки равной ширины. */
.platform__stat-value {
font-family: var(--font-base);
font-weight: 700;
font-size: var(--fz-num);
line-height: 1.05;
letter-spacing: var(--ls-num);
text-transform: none;
}
/* Все три показателя равнозначны и набраны одинаково: раньше третий был
выкрашен в бренд без причины и читался как более важный. */
.platform__stat-label {
margin-top: var(--s-4);
color: var(--muted);
font-size: var(--fz-small);
}
/* ---------- Адаптив ---------- */
@media (max-width: 1000px) {
.platform__grid {
grid-template-columns: minmax(0, 1fr);
gap: var(--s-7);
}
.platform__title { max-width: none; }
.platform__shot { align-items: flex-start; }
.platform__stats { margin-top: var(--s-7); }
.platform__stat { padding: var(--s-6) var(--s-4); }
/* В одну колонку мокап встаёт под текстом во всю ширину, и внутреннего
угла у него не остаётся: слева и справа кромки экрана. Привязать узор
не к чему — он уходит вместе с раскладкой. */
.platform__dots { display: none; }
}
/* ---------- Телефон: скриншот сразу под заголовком ----------
Шапка этой секции — рекорд сайта: 444px на 375 при экране 667, то есть
74%. Замер по частям: бейдж 46 + отбивка 24 + заголовок 171 (пять строк
капсом) + отбивка 24 + описание 179 (восемь строк). Дальше идут три
пункта (104) и только потом объект — скриншот платформы.
Что человек получал за прокрутку. Первый экран: бейдж, заголовок и три
строки описания — одни слова. Второй: остаток описания, пункты, подпись
«Интерфейс платформы». Третий: сам скриншот. Четвёртый: показатели.
Две прокрутки подряд без единого нового объекта.
Переставляем: бейдж → заголовок → СКРИНШОТ → описание → пункты.
Заголовок буквально говорит «мы создали платформу, где ты сможешь
всё собрать» — показать её следующим кадром честнее, чем через
восемь строк объяснения. После правки первый экран кончается на верхней
трети скриншота, второй отдаёт скриншот целиком, третий — описание
и пункты, четвёртый — показатели. Каждая прокрутка что-то приносит.
Как переставлено. Разметка не тронута: .platform__text и .platform__head
объявлены display: contents, их дети становятся прямыми ячейками
.platform__grid, и порядок задаётся order. Порядок в DOM остаётся
осмысленным сам по себе (бейдж → заголовок → описание → пункты →
рисунок с подписью), фокусируемых элементов внутри рисунка нет,
поэтому расхождение визуального порядка с DOM ничего не ломает
ни для клавиатуры, ни для диктора — переписывать разметку не нужно.
gap сетки обнуляется: пять ячеек в столбик с зазором 48 дали бы шапку
ещё выше той, от которой уходим. Отбивки задаются поштучно и все
из шкалы. Отбивка «бейдж → заголовок» не трогается вовсе — она сквозная
(base.css, 24 на ≤999).
Граница 767, а не 999: на планшете 768-999 колонок в секции тоже нет,
но описание там встаёт в четыре строки вместо восьми, шапка занимает
треть экрана, и переставлять нечего.
orientation: portrait в условии — не украшение. В ландшафте телефон
бывает уже 767 (повёрнутый iPhone SE — 667×375), и там работает другая
раскладка, двухколоночная (блок в конце файла). Без этого условия
пришлось бы отменять и display: contents, и все order обратно. */
/* Порог автопереноса в описании и подписях показателей на телефоне.
Общий порог в base.css — hyphenate-limit-chars: 8 4 3, то есть браузер
вправе рвать слова от восьми букв. В колонке 288-382px он этим правом
пользуется трижды и все три раза неудачно: на 375 «Интенсив ведут
создат-ели», на 320 «база знаний, интег-рации», на 393 в подписи
показателя «средний чек инте-гратора». Слова короткие (9, 10 и 11 букв),
выигрыш от разрыва — четверть строки, а дефис посреди слова виден сразу.
Порог 14 6 4 — тот же, что стоит у лида на телефоне (base.css, ≤699):
слова короче четырнадцати букв не рвутся вовсе. Ни одно слово в этих
двух ролях до порога не дотягивает, поэтому переносы пропадают целиком,
а переполнения не возникает: самое длинное слово описания, «интеграции»,
просит 130px при колонке 288, самое длинное в подписи, «интегратора», —
84px при колонке 152.
Граница 699 — та же, что у лида; новых границ не заводим. */
@media (max-width: 699px) {
.platform__desc,
.platform__stat-label { hyphenate-limit-chars: 14 6 4; }
}
@media (max-width: 767px) {
/* Отбивка от скриншота до показателей на ступень ниже (была 48):
между ними уже работает растворение низа кадра маской, и пустоты
там набиралось 80px при 66% заполненности секции.
Правило вне ориентации: в ландшафте зазор такой же лишний. */
.platform__stats { margin-top: var(--s-6); }
}
@media (max-width: 767px) and (orientation: portrait) {
.platform__grid { gap: 0; }
.platform__text,
.platform__head { display: contents; }
/* justify-self обязателен, и вот почему. Строкой выше .platform__text
и .platform__head сняты через display: contents, то есть бейдж
становится прямой ячейкой грида .platform__grid. У грида одна колонка
и justify-items по умолчанию stretch — плашка растягивается во всю
полосу контейнера.
Замер (портрет, приёмка 11.08.2026): бейдж экрана 8 — 288px на 320,
327 на 375, 345 на 393, 382 на 430, то есть РОВНО ширина контейнера
на каждой ширине. У остальных двенадцати бейджей ширина по содержимому:
115–284px. Экран 8 — единственный, у кого плашка с заливкой, кромкой
и свечением (правило выше в этом же файле), поэтому растяжку видно
не как «строка шире», а как сиреневую полосу во всю ширину экрана.
После правки — 217px на 375, в общем ряду. */
.platform .badge { order: 1; justify-self: start; }
.platform__title { order: 2; margin-bottom: 0; }
.platform__shot { order: 3; margin-top: var(--s-6); }
.platform__desc { order: 4; margin-top: var(--s-6); }
.platform__points { order: 5; margin-top: var(--s-5); }
}
@media (max-width: 640px) {
/* Три показателя в ряд на мобильном превращаются в столбики по два слова —
ставим друг под друга и меняем вертикальные разделители на горизонтальные.
ЦИФРА И ПОДПИСЬ В ОДНОЙ СТРОКЕ, а не друг под другом.
Замер до правки (375): три ячейки по 120-121px, блок 361px — больше
половины экрана на три числа. Складывается из того, что каждая ячейка
тратит отдельную строку на цифру (31px), отдельную на подпись (20-40)
и 16px отбивки между ними при полях 24+24. Заполненность блока 47%:
справа от «200+» пусто 200px, справа от «$1 500» — 170.
В строке ячейка стоит ровно во столько, во сколько встаёт самое
высокое из двух: подпись в две строки плюс поля. Замер после:
ячейки 96 / 97 / 97, блок 361 → 290, то есть −71px, и блок читается
таблицей фактов, а не тремя плашками подряд.
Колонка цифры общая на все три ячейки — subgrid, иначе «200+»,
«48 000+» и «$1 500» получат каждая свою ширину и подписи начнутся
с трёх разных позиций, то есть блок распадётся на три независимые
строки вместо таблицы.
Деградация без subgrid честная и бесплатная: объявление
grid-template-columns: subgrid браузер, который его не знает,
отбрасывает целиком, и ячейка остаётся обычной одноколоночной
сеткой — ровно та раскладка, что была до этой правки. Ни пустого
места, ни наезда. Единственное, что нужно вернуть руками, —
отбивка подписи, поэтому margin-top у неё снимается не здесь,
а в @supports ниже. */
.platform__stats { grid-template-columns: minmax(0, auto) minmax(0, 1fr); }
/* Поля по горизонтали обязательны: показатели теперь лежат в карточке,
и без них цифры упирались бы в её кромку. */
.platform__stat {
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
align-items: center;
column-gap: var(--s-5);
padding: var(--s-5);
text-align: left;
}
@supports (grid-template-columns: subgrid) {
.platform__stat-label {
margin-top: 0;
/* Интерлиньяж 1.6 — для текста, который читают строками. Подпись
показателя в узкой колонке встаёт в две строки, и на 1.6 они
разъезжаются на 48px против 31 у цифры рядом: строка перестаёт
быть строкой. 1.35 — та же ступень, что у подписи результата
в кейсах, роль у них одна. Ячейка 96 → 88, блок 290 → 266. */
line-height: 1.35;
}
}
.platform__stat + .platform__stat {
border-left: 0;
border-top: 1px solid var(--line);
}
.platform__points { gap: var(--s-4); }
/* Кадр стоит в полях контейнера, как всё остальное на экране.
Прежде он уезжал вправо за кромку (правый зазор ровно 0 — единственный
такой элемент на странице) и прокручивался вбок: картинке задавали
min-width: 560px. Лечения в этом не было — 1790px файла в кадре 335 CSS
дают интерфейсную строку в 4,4 CSS px, и прокрутка двигала нечитаемое
вбок. Плюс прокручиваемая область, начинающаяся ровно в системной кромке,
спорит с жестом «назад» во встроенном браузере мессенджера.
Теперь на телефон уходит другой кадр ( в разметке): боковое меню
платформы и одна карточка агента вместо общего вида конструктора. Ширину
заменило кадрирование, поэтому ни прокрутки, ни вылета, ни подсказки
«потяни вбок» больше не нужно.
Скругления вложены согласованно: внешнее 24 = поле 8 + внутреннее 16. */
.platform__frame {
padding: var(--s-2);
border-radius: var(--r-lg);
}
.platform__img { border-radius: var(--r-md); }
/* Свечение прижимается под кадр. Прежние -7% по бокам считались от рамки,
которая теперь занимает всю ширину контейнера, — пятно выходило на самую
кромку экрана и читалось полосой засветки вдоль края, а не подсветкой
под объектом. Требование то же, что у всех подсветок на сайте: свет
работает на объект и гаснет задолго до кромок (docs/visual-language.md).
Пятно уходит под низ кадра: на телефоне это единственное место, где его
вообще видно (по бокам кадр занимает всю ширину контейнера), и там оно
работает контактной подсветкой — кадр не лежит на фоне, а висит над ним.
Кадр комьюнити на экране 10 подсвечен теперь так же. */
.platform__shot::before {
inset: auto 16% -8% 16%;
height: 18%;
background: radial-gradient(closest-side, rgba(124, 59, 246, .30) 0%, transparent 100%);
}
}
/* ---------- Ручные переносы заголовка: до какой ширины они работают ----------
Граница была 480. Она считалась под прежний кегль (26px минимум) и после
смены шкалы заголовков перестала совпадать с арифметикой: на нынешнем
кегле самая длинная строка «Бро, мы создали платформу,» просит 465px,
а контейнер добирает эти 465 только на 513px ширины окна. В полосе
480–512
уже работали, но заданные ими строки САМИ переносились —
заголовок вставал в пять строк с огрызками «платформу,» и «всё собрать.»
на отдельных строках (замер на 480: 270 / 186 / 261 / 194 / 300).
Новая граница — 639, из уже существующих в проекте. Проверено по шагам
480, 500, 512, 520, 560, 600, 639, 640:
до 512 браузер собирает четыре ровные строки (нбсп в разметке
расставлены так, что иначе он их и не соберёт);
513–639 браузер собирает РОВНО ТЕ ЖЕ ТРИ СТРОКИ, что задают
(465 / 463 / 300) — переход на 640, где
снова включаются,
не виден вовсе: разбивка совпадает.
То есть сдвиг границы ничего не ломает и чинит полосу 480–512.
display: none на
снимает сам перенос, элемент для этого и годится. */
@media (max-width: 639px) {
.platform__title br { display: none; }
}
/* ---------- Ландшафт телефона ----------
852×393. Замер до правки: шапка занимает ВЕСЬ экран целиком — от верхней
кромки секции до низа описания 393px при высоте окна 393, содержания
видно ноль пикселей. Секция 1338px, то есть 3.4 экрана.
Причина не в размерах шапки, а в том, что одноколоночная раскладка
≤1000px растягивает на 852px то, что придумано для 375. Заголовок в две
строки вместо пяти, описание в четыре вместо восьми — и справа от них
пустая половина полосы, а объект секции ждёт своей очереди внизу.
В ландшафте ширины хватает ровно на ту композицию, что принята
на десктопе: слева текст, справа скриншот. Возвращаем её. Доли те же
47/53 — они посчитаны под ширину заголовка Oswald, а он от ориентации
не зависит. Тот же приём и тот же медиазапрос уже стоят в 09-selling.css:
поворот телефона обязан переключать раскладку одинаково по всему сайту.
Отдельно снимается перестановка портретного блока (display: contents
и order): повёрнутый iPhone SE — это 667×375, он попадает и под 767.
Условие orientation: portrait там это уже сделало, здесь только
страховка на случай, если порядок правил когда-нибудь переедет.
max-width: 999px обязателен: без него правило поймало бы десктоп
в низком окне, а десктоп принят заказчиком и от высоты окна
зависеть не должен. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 999px) {
.platform__grid {
grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
align-items: center;
gap: var(--s-6);
}
.platform__text,
.platform__head { display: block; }
.platform__shot { align-items: flex-end; }
/* Отбивки шапки на ступень ниже десктопных: экран низкий, и заголовок
с описанием обязаны уместиться рядом со скриншотом, а не задавать
секции высоту. */
.platform__head > .platform__title { margin-block: var(--s-3) var(--s-4); }
.platform__points { margin-top: var(--s-5); }
}