/* ==========================================================================
Секция 4 — программа трёх дней
========================================================================== */
/* Размеры сняты линейкой с design/экран 4.png (коэффициент 1.742),
пересчёт в css-px для вьюпорта 1920. */
.days {
--days-card-pad: 40px;
/* Диаметр кружка с номером. Был жёстко 100px на десктопе и 60 ниже 1000:
на 1000-1200 кружок оставался прежним, пока карточка и текст в ней
ужимались, и номер начинал перевешивать карточку. Теперь он тянется
вместе с полосой, кольцо-прогресс — в той же пропорции. */
--days-num: clamp(64px, 6.9vw, 100px);
--days-ring: clamp(7px, .69vw, 10px); /* зазор от кружка до кольца-прогресса */
overflow: hidden;
/* Поля секции общие (--section-y): 99px сверху были из макета, где
экран 4 обрезан иначе соседних, и давали 147px до экрана 3 против
121 у всех остальных пар. Робот над карточками стоит на своих
отрицательных полях внутри .days__stage и от поля секции не зависит. */
/* Своего фона у секции нет. Раньше здесь лежала непрозрачная подложка
--bg-tint с собственной радиальной подсветкой — она перекрывала
общестраничную ауру из base.css (body::before, z-index: -1), и на стыке
с соседними экранами появлялась горизонтальная граница. */
}
/* ---------- Декор ----------
Объект секции — робот справа, объект-силуэт, значит кольца ореолом
по его оси (docs/visual-language.md, «Декор: два вопроса»).
Было два мотива сразу и оба мимо объекта: точки в правом верхнем углу
уходили под самого робота и на снимке не читались, кольца стояли
в левом нижнем углу — то есть по диагонали от единственной фигуры
экрана. Круг в пустом углу заполняет пустоту, но ничего не показывает,
и именно из-за таких постановок приём переставал быть приёмом.
Стало: точек нет (объект один и он силуэт), круг переехал за робота.
Сдвиг вверх считается от собственного размера круга, а не от высоты
секции, — доля вылета тогда одна на всех ширинах (6%), и её накрывает
маска: до 12% высоты коробки узор полностью прозрачен, к 36% выходит
на полную плотность. На верхнюю кромку секции приходятся те самые 6%,
там плотность нулевая — резать overflow: hidden нечего, а верхушки дуг
не обрубаются, а растворяются (та же механика, что у .selling__rings). */
.days__rings {
--rings-size: min(46vw, 660px);
width: var(--rings-size);
aspect-ratio: 1;
right: 1%;
top: calc(var(--rings-size) * -0.06);
-webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 12%, #000 36%);
mask-image: linear-gradient(180deg, transparent 0, transparent 12%, #000 36%);
}
/* ---------- Бейдж ---------- */
/* Своих размеров у бейджа здесь нет: кегль, поля и трекинг общие (base.css).
Было 20px против 15 у остальных двенадцати — на прокрутке высота
надзаголовка прыгала на 12px между соседними экранами. */
/* ---------- Шапка ---------- */
/* Заголовочный шрифт на сайте один — .display (Oswald), см. docs/visual-language.md.
Прежде экран был набран основным гротеском «как в прототипе»; прототип
в этом месте расходится с экранами 1-2, и заказчик решил в пользу единого шрифта.
Кегль поднят с 64 до 71px: Oswald у́же гротеска примерно на четверть, и на 64px
первая строка теряла заметную часть длины — заголовок переставал держать шапку.
Потолок кегля задаёт первая строка: она должна укладываться в полосу шапки
без переноса, а перенос у неё жёсткий, через
в разметке — поэтому
две строки, которые утвердил заказчик, от кегля не зависят.
Кегль, интерлиньяж и трекинг общие (--fz-h2 + .display): было 53.6/1.14/0
против 55.4/1.22/.02em у большинства секций.
Отбивки шапки общие для секций 2-5: бейдж → H2 40px, H2 → лид 24px. */
.days__title {
margin-block: calc(var(--s-6) + var(--s-2)) var(--s-5);
text-wrap: initial; /* balance рвёт длинные caps-строки по слогам */
}
/* Кегль, интерлиньяж и мера — из .lead: подзаголовок секции один на весь сайт.
Мера была в пикселях (830px), теперь общая --measure в ch. */
/* ---------- Сцена: ряд карточек + робот над ним ---------- */
/* В макете от подзаголовка до карточек 118px — втрое больше, чем на соседнем
экране, и вне шкалы. Держим общие для секций 2-5 48px: место под нависающего
робота от этого не страдает, он лежит внутри карточки «03». */
.days__stage {
position: relative;
margin-top: var(--s-7);
}
/* Промежуток был 33px — замер макета, но вне шкалы отступов. Соседняя ступень
даёт ту же картину и попадает в общий ритм страницы. */
.days__list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--s-6);
margin: 0;
padding: 0;
list-style: none;
}
/* ---------- Карточка дня ---------- */
.days__card {
min-width: 0;
padding: var(--days-card-pad);
border-radius: var(--r-xl);
background: var(--surface);
box-shadow: var(--sh-card);
}
/* Доля пути, пройденного к концу дня: её показывает кольцо вокруг номера.
Три карточки читаются как одна последовательность, и для этого не нужна
ни стрелка, ни линия между ними. */
.days__card:nth-child(1) { --days-progress: 33.34%; }
.days__card:nth-child(2) { --days-progress: 66.67%; }
.days__card:nth-child(3) { --days-progress: 100%; }
/* ---------- Кружок дня и дата: один ряд ----------
Дату в кружок не кладём. Там уже две строки — «ДЕНЬ» и цифра, — и третья
превратила бы фирменный знак дня в плотную табличку. Заказчик отдельно
просил минимализма и уже снимал такую перегруженность на экране 6.
Кружок остаётся ровно таким, каким принят, а дата встаёт справа от него.
Высоту ряда задаёт кружок (64-100px), строка даты втрое ниже, поэтому
ряд равен кружку и карточка по вертикали не растёт. Проверено A/B
(с датой и без) на 375 / 640 / 761 / 768 / 860 / 999 / 1000 / 1200 /
1440 / 1920: высота секции и всех трёх карточек совпадает до пикселя.
Отбивка до заголовка не тронута: она у .days__card-title и отсчитывается
теперь от этого ряда, а не от самого кружка.
flex-wrap — не украшение, а поведение для узкой карточки: если дата
перестанет помещаться рядом, она встанет под кружком, а не вылезет
за кромку. Запасы по ширинам — в медиазапросе 999 ниже. */
.days__meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--s-3) var(--s-5);
}
/* Тише кружка и тише заголовка: дата уточняет номер дня, а не спорит с ним.
Брендового цвета не берём — на экране акцент уже занят лидом и кружками.
nowrap держит «18 августа» одной группой; неразрывный пробел внутри
стоит в разметке. --muted на белой карточке — 6.8:1. */
.days__date {
font-size: var(--fz-small);
font-weight: 600;
line-height: 1.25;
color: var(--muted);
white-space: nowrap;
}
/* ---------- Номер дня ----------
В макете это кружок 100px с цифрой 38px и едва заметным кольцом вокруг.
Слово «День» переехало внутрь кружка. Раньше кружок говорил «01», а заголовок
под ним — «День 1 — проектируем»: один и тот же порядковый номер назывался
дважды подряд, причём разными словами. Теперь номер целиком собран в кружке
(«ДЕНЬ» мелко, цифра крупно), а заголовку осталось только то, ради чего он
есть, — что именно делаем: «Проектируем», «Собираем», «БРО в деле».
Последовательность дней от этого не потерялась: её держат и подпись в кружке,
и заполненная дуга кольца, которая растёт от карточки к карточке.
Заливка. Был --grad-brand: перепад между --brand и --brand-light всего
15 единиц по каналу, на кружке 100px он не читался вообще — то есть кружок
выглядел плоской заливкой, самым дешёвым приёмом из набора. Теперь перелив
идёт через три брендовых тона (light → brand → dark), а сверху лежит
мягкий блик: тот же приём объёма, что у главной кнопки, только собранный
на круге. Новых цветов не заведено, все три — из tokens.css. */
.days__num {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
width: var(--days-num);
height: var(--days-num);
border-radius: var(--r-pill);
background:
/* Блик .16, а не .30. На .30 подпись «ДЕНЬ» приходилась на самое светлое
место кружка: под ней получалось rgb(148,96,248), белые 13.5px давали
3.97:1 при норме 4.5 (SC 1.4.3, AA), а вместе с прежней opacity: .82 —
3.19:1. Перелив при .16 виден по-прежнему, контраст выходит 4.7:1.
Замер: снимок с погашенным текстом, пиксель под подписью. */
radial-gradient(118% 118% at 26% 18%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 58%),
linear-gradient(135deg, var(--brand-light) 0%, var(--brand) 44%, var(--brand-dark) 100%);
box-shadow: var(--glow-brand);
color: #fff;
line-height: 1;
}
/* Трекинг раздвигает буквы вправо, из-за чего слово в flex-колонке встаёт
левее центра ровно на один зазор — text-indent возвращает его на ось. */
.days__num-word {
font-size: var(--fz-caption);
font-weight: 600;
letter-spacing: var(--ls-caps-sm);
text-indent: var(--ls-caps-sm);
text-transform: uppercase;
/* Капс не переносится: свод, «Переносы». */
-webkit-hyphens: none;
hyphens: none;
/* opacity: .82 снята: на брендовой заливке она смешивала белый с фоном
и роняла контраст подписи до 3.19:1. Подпись и без неё звучит тише
цифры — она вчетверо мельче. */
}
.days__num-digit {
font-size: var(--fz-num-sm);
font-weight: 700;
}
/* Кольцо: конический градиент, из которого маска оставляет ободок в 2px.
Скругление в 999px обрезает углы квадрата, куда radial-gradient маски
не достаёт. Заполненная дуга тоже с переливом — тем же, что и сам кружок,
иначе рядом с ним ободок выглядит нарисованным другим инструментом. */
.days__num::before {
content: '';
position: absolute;
inset: calc(-1 * var(--days-ring));
border-radius: var(--r-pill);
background: conic-gradient(var(--brand-light) 0%,
var(--brand-dark) var(--days-progress),
rgba(124, 59, 246, .20) var(--days-progress) 100%);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
}
/* Заголовок карточки — ступень --fz-h3, общая с кейсами, ценой и вопросами.
Капс обязан идти с разгоном: было 0, теперь ступень «капс крупнее 24px».
Отбивки внутри карточки сведены к шкале: кружок → черта 48 (в макете 49),
черта → заголовок 24 (в макете 22), заголовок → текст 32 (в макете 30). */
.days__card-title {
margin-top: var(--s-7);
font-size: var(--fz-h3);
font-weight: 700;
line-height: var(--lh-heading);
letter-spacing: var(--ls-caps-lg);
text-transform: uppercase;
/* Капс не переносится: свод, «Переносы». */
-webkit-hyphens: none;
hyphens: none;
}
/* Короткая фиолетовая черта над заголовком, как в макете: 63x3 */
.days__card-title::before {
content: '';
display: block;
width: 63px;
height: 3px;
margin-bottom: var(--s-5);
border-radius: var(--r-pill);
background: var(--brand);
}
.days__card-text {
margin-top: var(--s-6);
color: var(--muted);
font-size: var(--fz-body);
line-height: var(--lh-body);
}
/* ---------- Робот ----------
Робот лежит между поверхностью карточки «03» и её текстом: карточка
прозрачна, а её белая плашка нарисована на ::before ПОВЕРХ картинки.
Так фигура заходит за верхнюю кромку плашки, как на экране 3 она заходит
за вывод (03-intro.css, .intro__visual).
isolation: isolate обязателен. .card--interactive при наведении поднимает
карточку через transform, а transform создаёт контекст наложения — без
isolate порядок слоёв внутри карточки менялся бы на лету и рукав
выпрыгивал бы поверх плашки.
ОТКУДА ЦИФРЫ. Кадр assets/robot-days.webp — не «вырезанный на глаз» робот,
а пиксель-в-пиксель кроп макета: сведением по альфа-каналу найдено, что
левый верхний угол файла лежит в design/экран 4.png на (2028, 231),
средняя ошибка совмещения 1.4 из 255. Значит все макетные координаты
переводятся в координаты кадра вычитанием этой точки, и место фигуры
не подбирается, а замеряется:
кромки карточек в макете card 1: 169-1129 card 2: 1189-2149
card 3: 2208-3168 верх всех трёх: 1140
карточка в координатах кадра лево 2208-2028 = 180
верх 1140- 231 = 909
ширина карточки 960, ширина кадра 1217, высота 1111
Отсюда три величины ниже:
--days-robot-w 1217 / 960 = 126.8% ширины карточки
--days-robot-x -180 / 960 = -18.75% — кадр торчит из карточки влево,
локоть висит над промежутком между «02» и «03»
и заходит на скругление карточки «02» — ровно как
в макете
--days-robot-cut 909 / 1111 = 81.82% — строка кадра, которая обязана
совпасть с верхней кромкой карточки
Прежние 112% / right: 0 сжимали кадр почти до ширины карточки: фигура
оказывалась крупнее относительно карточки, а её края — над промежутком
и над скруглением, где белой поверхности нет.
ПОЧЕМУ БОЛЬШЕ НЕТ ПОДРЕЗКИ. Вырезка сама обрывается ровно на строке 909:
строка 908 — последняя, где корпус сплошной (44-1208 по ширине), а с 909
от фигуры остаются только три куска — низ рукава с локтем (48-403),
кисть (409-660) и правый рукав (1087-1215, уходит вниз до конца файла,
выцветая). В макете это ровно то, что нарисовано ПЕРЕД карточкой или
правее неё. То есть родной контур кадра и есть правильная линия стыка,
и резать её clip-path'ом не нужно — прежняя прямая подрезка отрубала
локоть над промежутком и правый рукав над скруглением, потому что там
под фигурой нет белого, которым можно закрыть срез. Это и есть правка
заказчика: «обрезался локоть, и рука справа обрезалась».
Что закрывает срез теперь: над карточкой — сама карточка (её ::before),
вне карточки — ничего и не надо, там кадр идёт своим контуром. */
.days {
--days-robot-w: 126.8%;
--days-robot-x: -18.75%;
--days-robot-cut: 81.82%;
/* Правее этой доли ширины кадра лежит только правый рукав. Он в макете
уходит ЗА карточку (его режет скругление правого верхнего угла),
поэтому передний слой обязан на нём кончиться. 80% — запас: сам рукав
начинается с 89.3%. */
--days-robot-front-end: 20%;
}
.days__card--pinned {
position: relative;
isolation: isolate;
background: transparent; /* поверхность переехала на ::before, поверх робота */
}
.days__card--pinned::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
background: var(--surface);
}
/* Поднимаем весь ряд (.days__meta), а не один кружок: белая поверхность
карточки лежит на ::before с z-index 1, и любой непозиционированный
потомок рисуется под ней. Пока в карточке был только кружок, хватало
его одного; с датой в том же ряду поднимать надо ряд. */
.days__card--pinned .days__meta,
.days__card--pinned .days__card-title,
.days__card--pinned .days__card-text {
position: relative;
z-index: 2;
}
.days__robot,
.days__robot-front {
position: absolute;
left: var(--days-robot-x);
top: 0;
width: var(--days-robot-w);
max-width: none;
/* Кадр поднят так, чтобы строка --days-robot-cut пришлась на y = 0
карточки, то есть ровно на её верхнюю кромку. */
transform: translateY(calc(-1 * var(--days-robot-cut)));
pointer-events: none;
}
/* Нижний слой — вся фигура целиком, под белой поверхностью карточки.
Всё, что приходится на карточку ниже её кромки, карточка и закрывает;
всё, что оказалось за её пределами (низ локтя над промежутком, правый
рукав правее карточки и в её скруглении), идёт своим контуром.
Маска гасит только самый низ кадра. Ниже 84% высоты вне карточки остаётся
единственная деталь — правый рукав, который в макете уходит вниз, теряя
цвет: на y=1140 он ещё почти чёрный, к 1342 светлеет до 202 из 255
и растворяется полностью только к 1420. Кадр обрезан по 1342, то есть
ровно посреди этого затухания, и без маски рукав кончался бы рваной
кромкой. Маска доводит начатое макетом до нуля.
Ничего другого она не задевает: низ локтя кончается на 930-й строке (83.7%),
кисть ниже 84% лежит уже на карточке и рисуется верхним слоем. */
.days__robot {
z-index: 0;
-webkit-mask-image: linear-gradient(180deg,
#000 84%, rgba(0, 0, 0, .62) 91%, rgba(0, 0, 0, .22) 96%, transparent 100%);
mask-image: linear-gradient(180deg,
#000 84%, rgba(0, 0, 0, .62) 91%, rgba(0, 0, 0, .22) 96%, transparent 100%);
}
/* Верхний слой — то же изображение, но оставлена только часть ниже кромки
карточки и левее правого рукава: низ рукава с локтем и кисть. В макете
они лежат ПЕРЕД карточкой — рука опирается на неё, а не уходит за неё,
и именно это читается как «облокотился».
Шва между слоями нет: выше кромки ту же самую руку рисует нижний слой.
Правая граница обязательна: за ней начинается правый рукав, а он в макете
уходит ЗА карточку. */
.days__robot-front {
z-index: 3;
/* Верхняя граница взята на 2px ВЫШЕ кромки карточки. Ровно по кромке
нельзя: край обрезки сглаживается, и на 768 из-под него проступала
светлая волосяная линия — белая поверхность карточки, видимая сквозь
полупрозрачный пиксель. Поднятая на 2px граница приходится туда,
где карточки ещё нет и ту же самую руку рисует нижний слой, поэтому
стык не виден вовсе. */
clip-path: inset(calc(var(--days-robot-cut) - 2px) var(--days-robot-front-end) 0 0);
}
/* ---------- Вывод секции ---------- */
/* Оформление целиком приходит из .verdict (base.css): кегль, поля, кромка
полки и световой омут под ней. Секции остаётся привязка к сетке и одна
ручка --verdict-measure — она меняет число строк, но не громкость.
Мера в em, а не в ch: масштабируется вместе с кеглем, поэтому число строк
не зависит от ширины экрана.
Было 21em и три строки — заказчик попросил две. Мера считается так:
под текст остаётся мера минус боковые поля .verdict (по .68em с каждой
стороны), то есть на 22em это 20.6em строки. Фраза укорочена до 67 знаков
и ломается ровно один раз — после «отвечает»; обе половины укладываются
в 20.6em с запасом. Замерено на 1280 / 1440 / 1600 / 1920: две строки
на всех четырёх, длины 508+600, 571+675, 635+749, 709+837.
Выше 22em не идём: полка (блок + вылеты .verdict--right) занимает
при 21em — 81% ширины полосы, при 22em — 84%, при 24em — 92%.
На 92% волосяная кромка тянется от края до края и снова читается
разделителем секций, ровно как прежняя плашка.
На узких мера снимается сама: max-width у .verdict упирается в 100%. */
.days__callout {
--verdict-measure: 22em;
margin-top: var(--s-8);
}
/* ---------- Адаптив ---------- */
@media (min-width: 1000px) {
/* Заголовок не заезжает под робота: в макете первая строка кончается
на 1337 при контенте до 1841, то есть занимает 72% полосы. */
.days__head { max-width: 72%; }
/* Лид кончается выше: он стоит на той же высоте, что и локоть, а локоть
теперь уходит влево дальше — до 18.75% ширины карточки за её кромку.
Левее всего фигура на 0.604 полосы + 25px, считая от кромки контента
(вывод: 2*(кар+зазор) - 0.1875*кар при кар = (полоса-64)/3), и почти
не зависит от ширины экрана. С зазором в 24px это ровно 84% полосы
заголовка на всём диапазоне 1000-1560; выше 1560 первым срабатывает
потолок в 830px, замеренный по макету.
Заголовок под это правило не попадает: он на две строки выше локтя.
Отдельное правило больше не нужно: общая мера --measure (777px на 1440)
и так у́же обоих пределов, и локоть она не задевает. */
}
@media (max-width: 999px) {
/* ПЛАНШЕТ (761-999): шапка и фигура стоят рядом, а не друг под другом.
Было: под свисающую часть робота резервировался отступ сцены в 32%
ширины полосы — 225px на 768 и 299 на 999. Робот занимает при этом
только правую треть (он висит над карточкой «03»), и слева от него
оставалась пустая полоса во всю ширину двух карточек: на 834 это
246px пустоты при высоте секции 1193, то есть пятая часть экрана,
в которой нет ничего. Композиция читалась «текст, дыра, фигура
в правом углу, карточки».
Стало: шапка отдаёт правую треть полосы фигуре (max-width: 58%),
а сцена встаёт на обычную отбивку «шапка → содержимое» (--s-7, 48px,
та же, что была до правки в других секциях). Свес больше не добавляет
высоты — он приходится в тот угол шапки, который и так пустовал.
Получается ровно то же движение, что на десктопе: слева высказывание,
справа фигура, под ними ряд дней.
58% — не на глаз. Левее всего фигура на 63.6-63.7% полосы (кромка
карточки «03» минус вылет кадра в 18.75% её ширины), и доля эта почти
не зависит от ширины: между текстом и рукавом остаётся 40-45px.
Свес наружу секции не выйдет: он равен 0.947 ширины карточки,
то есть 202px на 768 и 275 на 999, а шапка в 58% полосы нигде
не ниже 300px. Проверяется линейкой tools/e2-days2.js. */
.days__head { max-width: 58%; }
.days__stage { margin-top: var(--s-7); }
.days { --days-card-pad: var(--s-5); }
/* Самая узкая карточка на сайте. На 761 под содержимое остаётся 167px,
из них кружок 64 и дата 83. При зазоре 24 до кромки не хватало 1px
и дата уезжала под кружок уже на всех ширинах этого диапазона;
ступень шкалы вниз возвращает запас: 8px на 761, 11 на 768, 20 на 800,
51 на 900, 77 на 999 (замер по css/fonts.css, не по фолбэку).
Если запаса когда-нибудь не хватит — длиннее текст, другой фолбэк, —
дата уйдёт под кружок сама, и уйдёт во всех трёх карточках разом:
колонки грида равны, порог у них общий. Это перенос, а не переполнение. */
.days__meta { gap: var(--s-3) var(--s-4); }
.days__card-title { margin-top: var(--s-6); }
.days__card-title::before { margin-bottom: var(--s-5); }
.days__card-text { margin-top: var(--s-4); }
.days__callout { margin-top: var(--s-7); }
/* Робот съехал вниз — ореол едет за ним. Иначе кольца остаются наверху
секции, а фигура оказывается ниже, и приём превращается в пятно
«где-то сверху» ровно того сорта, который правило и убирает.
Вертикаль задана через центр. 36.5%, а не прежние 42: фигура поднялась
вместе с отменой резервного отступа сцены, и центр робота теперь
на 35.6-37.7% высоты секции по всему диапазону (замер tools/e2-rings.js:
35.6 на 761, 37.7 на 768, 36.3 на 834, 36.5 на 900, 35.9 на 999).
Круг целиком внутри секции, вылезать вверх нечему, поэтому маска
снимается: иначе она съедала бы верхнюю треть ореола просто так. */
.days__rings {
top: calc(36.5% - var(--rings-size) / 2);
-webkit-mask-image: none;
mask-image: none;
}
}
/* ==========================================================================
ТЕЛЕФОН (до 760): робот переезжает НАД список
--------------------------------------------------------------------------
Что было. Карточки встают в колонку, а робот остаётся приклеенным
к карточке «03», и место под его нависающую часть добывается отступом
сверху у самой карточки (margin-top: 54%). Из-за этого ряд дней переставал
быть рядом: зазор «День 1 → День 2» 16px, «День 2 → День 3» — 193 на 375
(167 на 320, 227 на 430), причём разрыв растёт вместе с шириной экрана.
Первые два дня слипались, третий оказывался отброшен на двенадцать
обычных зазоров вперёд, и последовательность из трёх шагов читалась
как «два дня, потом что-то ещё, потом третий».
Что стало. Фигура вынесена из ряда карточек и стоит НАД ним: сначала
БРО, потом три равных дня. Три зазора по 24 из шкалы, и порядок чтения
на телефоне свой, а не сжатый десктопный: на узком экране объект уместнее
ДО текста, а не сбоку от него.
Почему робот не может стоять сам по себе. Вырезка обрывается на строке
909 из 1111 (81.82%): выше — сплошной корпус во всю ширину кадра, ниже
остаются только низ рукава с локтем, кисть и правый рукав. Без белой
поверхности под этой строкой был бы виден прямой горизонтальный срез
через весь торс. Поэтому фигура по-прежнему ОБЛОКАЧИВАЕТСЯ на карточку,
только теперь на первую: срез перекрывает её поверхность, а локоть
и кисть лежат перед ней — тот же двухслойный приём, что на десктопе,
без единого нового числа.
Геометрия. Кадр больше не привязан к карточке «03»: обе картинки
позиционируются в .days__stage (она position: relative), поэтому доли
15% / 70% считаются от полосы — а полоса и карточка в одну колонку
это одно и то же, и прежние значения переносятся один в один.
Нависающая часть = 81.82% высоты кадра, высота = ширина × 1111/1217,
значит от верха полосы до кромки первой карточки ровно
0.7 × 0.9129 × 0.8182 = 52.28% ширины полосы — это и есть padding-top
у сцены. Проценты у padding считаются от ШИРИНЫ контейнера, поэтому
запас держится сам на всех ширинах, без единого медиазапроса внутри.
Срез закрыт на любой ширине: по строке 909 корпус занимает 3.6-99.3%
кадра, то есть 17.5-84.5% полосы, а скругление --r-xl съедает только
крайние ~10%. Правый рукав (77.5-84.9% полосы) тоже целиком под
поверхностью карточки.
========================================================================== */
@media (max-width: 760px) {
.days__list { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.days { --days-robot-w: 70%; --days-robot-x: 15%; }
/* ---------- Карточка дня на телефоне: шапка карточки в одну строку ----------
Было (375): кружок с датой 64, отбивка 32, фиолетовая черта 3px, отбивка 24,
заголовок 22, отбивка 16, текст. То есть 59px вертикали держали
декоративную черту в три пикселя, а заголовок из одного слова
(«ПРОЕКТИРУЕМ») занимал собственную строку шириной 279px, где помещается
тридцать знаков. Три карточки выходили 262 / 262 / 313 — 885px на список,
то есть полтора экрана на три коротких абзаца.
Стало: кружок слева, справа в две строки дата и заголовок. Ряд равен
кружку и ни на пиксель выше: дата 19 + заголовок 22 + зазор укладываются
в 64. Текст остаётся ВО ВСЮ ширину карточки, а не в колонку рядом
с кружком, — это не мелочь. В колонке справа от кружка мера падает
с 32 знаков до 22, а на 375 физический потолок строки и так 38-39
(docs/premium-web.md, «Длина строки»): узкая колонка здесь дороже
сэкономленных пикселей.
Раскладка сделана гридом на самой карточке, а .days__meta переведён
в display: contents — тогда кружок и дата становятся прямыми ячейками
и обходятся без обёртки в разметке. contents здесь безопасен: у .days__meta
нет ни роли, ни семантики, дерево доступности не меняется.
Кружок занимает обе строки и центрируется в них, поэтому дата и заголовок
стоят плотной парой против его середины, а не разъезжаются по углам.
Черта снята. Она разделяла кружок и заголовок, когда те стояли друг
под другом; в одной строке разделять нечего, а держать ради неё 27px
на карточке — та самая рыхлость, из-за которой секция читалась
на 2.6 экрана. */
.days__card {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: var(--s-4);
align-content: start;
}
.days__meta { display: contents; }
.days__num {
grid-area: 1 / 1 / 3 / 2;
align-self: center;
}
.days__date {
grid-area: 1 / 2 / 2 / 3;
align-self: end;
}
.days__card-title {
grid-area: 2 / 2 / 3 / 3;
align-self: start;
margin-top: var(--s-1);
}
.days__card-title::before { display: none; }
.days__card-text {
grid-area: 3 / 1 / 4 / 3;
margin-top: var(--s-4);
}
/* Правая треть под фигуру нужна только там, где фигура стоит справа.
Здесь она встала по центру над списком — шапка забирает полосу назад. */
.days__head { max-width: none; }
/* Место под фигуру — у сцены, а не у третьей карточки */
.days__stage {
margin-top: var(--s-7);
padding-top: 52.28%;
}
/* Карточка «03» снова обычная: она больше ничего не держит.
position: static обязателен — иначе система координат для картинок
осталась бы у неё, а не у сцены. Вместе с ним снимается и белая
поверхность с ::before, и подъём содержимого над ней.
isolation: auto — не мелочь, а условие работы двухслойного приёма.
На десктопе isolate заводит внутри карточки «03» собственный контекст
наложения, и это правильно: там обе картинки лежат внутри её же
координат. Здесь картинки уехали в .days__stage, а карточку они
переросли — но контекст наложения от isolate оставался, и обе
картинки вместе с ним оказывались НИЖЕ первой карточки (у той
position: relative + z-index: 1, то есть слой позиционированных
элементов, а карточка «03» со своим контекстом — обычный блок).
Замер: снимок с .days__robot-front { display: none } и без него
совпадал до пикселя — верхний слой не рисовался вовсе, рука
не ложилась ПЕРЕД карточкой, и «облокотился» превращалось в «обрезан
карточкой». Со снятым isolate порядок восстанавливается тем же
набором чисел, что на десктопе: робот 0 → карточка 1 → рука 3. */
.days__card--pinned {
position: static;
isolation: auto;
margin-top: 0;
background: var(--surface);
}
.days__card--pinned::before { content: none; }
.days__card--pinned .days__meta,
.days__card--pinned .days__card-title,
.days__card--pinned .days__card-text {
position: static;
z-index: auto;
}
/* Теперь срез держит первая карточка, значит она обязана рисоваться
ПОВЕРХ нижнего слоя (z-index 0) и ПОД верхним (z-index 3). Без
собственного z-index непозиционированная карточка ушла бы под обе
картинки, потому что фон обычного блока рисуется ниже любого
позиционированного потомка. */
.days__list > .days__card:first-child {
position: relative;
z-index: 1;
}
/* Обе картинки садятся в сцену: top: 0 и никакого подъёма трансформом —
строка 909 приходится ровно на нижнюю границу padding-top, то есть
на верхнюю кромку первой карточки. */
.days__robot,
.days__robot-front {
top: 0;
transform: none;
}
/* В одну колонку робот стоит над списком — ореол идёт туда же.
Размер тот же, что у ореола на экране 3 в этой раскладке
(min(88vw, 560px)): при одинаковой ситуации у двух роботов не может
быть двух разных ореолов. Вертикаль задана через центр фигуры —
замер после переезда: 30.6% высоты секции на 320, 30.3% на 375,
29.8% на 430. */
.days__rings {
--rings-size: min(88vw, 560px);
left: 50%;
right: auto;
transform: translateX(-50%);
top: calc(30.3% - var(--rings-size) / 2);
}
}
@media (max-width: 640px) {
.days__title { margin-block: var(--s-5); }
}
/* ==========================================================================
ЛАНДШАФТ ТЕЛЕФОНА (844×390 и 932×430)
--------------------------------------------------------------------------
Замер до правки: от верхней кромки секции до первой карточки 576px при
вьюпорте высотой 390 и 605 при 430 — полтора экрана, занятых шапкой
и пустым местом под нависающего робота. Ни одного дня в первом экране
не видно, хотя дней ровно три и они и есть содержание экрана.
Из чего складывались 576: поле секции 64 + шапка 263 + отступ сцены 250.
Двести пятьдесят — это место, которое одноколоночная логика резервирует
под свисающую часть фигуры (32% ширины полосы у .days__stage выше):
робот встаёт НАД карточками и толкает их вниз.
Что стало. В ландшафте ширины хватает, чтобы поставить шапку и фигуру
рядом, а не друг под другом: шапка занимает 58% полосы слева, робот
висит над карточкой «03» в правой трети и заходит в пустой правый угол
шапки. Отступ сцены обнуляется — свес больше не добавляет высоты,
он ложится в ту же полосу, где стоят заголовок и лид.
58% — не на глаз: левее всего фигура на 63.6-63.7% полосы (кромка
карточки «03» минус вылет кадра в 18.75% её ширины) на обеих ширинах
диапазона, значит между текстом и рукавом остаётся 44-45px.
Вертикальные отбивки шапки идут на ступень вниз (--s-4/--s-3 вместо
--s-6+--s-2 / --s-5) — тот же приём, что в ландшафтном блоке экрана 9.
Итог: до первой карточки 353px на 844×390 — она начинает открываться
уже в первом экране.
max-width: 999px обязателен: без него правило поймало бы десктоп
в низком окне, а десктоп принят заказчиком и от высоты окна
зависеть не должен. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 999px) {
/* Шапка отдаёт правую треть под фигуру. Мера лида (--measure, 60ch)
до этой ширины не достаёт, поэтому строку ограничивает именно
колонка — и заодно она становится короче, что на низком экране
как раз к лучшему. */
.days__head { max-width: 58%; }
.days__title { margin-block: var(--s-4) var(--s-3); }
/* Жёсткий
в заголовке здесь ни при чём — проверено, а не предположено:
со снятым br высота заголовка на 852×393 та же самая, 176px (четыре
строки). Причина в неразрывных пробелах внутри самой фразы: «где ты
реально» — один неломающийся кусок в 280px, и при полосе 457 строки
набиваются наполовину. Заголовок в ландшафте лечится только кеглем,
а кегль — сквозная ручка (--fz-h2), не секционная. */
/* Свес фигуры больше не резервируется отступом: он приходится
на пустой правый угол шапки. */
.days__stage { margin-top: 0; }
.days__callout { margin-top: var(--s-6); }
/* Секция стала ниже, а фигура — нет: доля центра робота уехала
с 36.5% до 32.8-33.1% (замер: 33.1 на 844×390, 32.8 на 932×430).
Ореол идёт за фигурой, иначе он снова висит отдельным пятном. */
.days__rings { top: calc(33% - var(--rings-size) / 2); }
}