/* ==========================================================================
home - стили страницы.
Собрано из source/tajiro скриптом tools/port-tajiro.mjs. Править здесь
бессмысленно: следующий прогон затрёт. Правка идёт в src/css/.
========================================================================== */
/* ========================= HEADER STYLES ========================= */
/* Переопределения шапки для этой страницы. Общая шапка живёт в style.css
в корне темы. */
/* ========================= /HEADER STYLES ======================== */
/* ========================= PAGE STYLES =========================== */
/* ---------------------------------------------------------------
css/home/01-hero.css
--------------------------------------------------------------- */
/* ==========================================================================
tajiro — Home · 01 · Первый экран
ЧТО ЗДЕСЬ
Слева текст, справа фигура. Устройство взято с варианта C, но раму и
осыпь оттуда убрали: цвет полотна остался, а скруглённый прямоугольник
читался карточкой внутри страницы. Теперь экран идёт полосой во всю
ширину и отделяется от следующего блока одной линией.
ПОЧЕМУ СНИЗУ ВВЕРХ
Файл написан mobile first: базовые правила — телефонные, а всё, что
шире, добавляется через min-width. На этой странице это не вкусовщина:
с телефонов ждём девятнадцать посетителей из двадцати, и телефонная
раскладка обязана быть основной, а не остатком после отсечения
десктопной.
Остальные файлы страницы пока написаны наоборот, сверху вниз. Мешать
два подхода в одном файле нельзя — правила начнут спорить за одну и ту
же ширину, — поэтому здесь выдержан один, а перевод остальных секций
остаётся отдельной работой.
========================================================================== */
.s-hero {
/* ОКОШКО ПОД ФИГУРУ И ДОЛЯ СНИМКА В НЁМ
Снимок ВЫШЕ окошка, в котором лежит, и нижним краем уходит за кромку.
Так и задумано: видно голову и торс, а ноги срезаются. Если вписывать
фигуру целиком, она получается мелкой и обрывается посреди штанины —
читается обрубком, а не кадрированием.
--crop — какая доля снимка остаётся видимой. 0.72 приходится на пояс,
чуть ниже подола рубашки. Обе величины связаны: от них считается и
высота полосы, и рост снимка, и разъезжаться им нельзя. */
--fig-h: 300px;
--crop: 0.72;
/* Цвет полотна из варианта C. В токенах его нет: это единственное место
на странице, где нужен кремовый темнее основного фона, и заводить под
него общий токен незачем. */
--hero-bg: #eae4d8;
padding-top: 0;
padding-bottom: 0;
background: var(--hero-bg);
/* Та самая «одна линия» вместо рамы. Снизу, потому что сверху экран
подпирает шапка со своей границей. */
border-bottom: 1px solid var(--c-line);
}
/* --- Течение --------------------------------------------------------------
Полотно текучих линий во всю ширину, под текстом и под фигурой.
Перенесено из варианта B. Рисует js/01-hero-flow.js — там же описано,
что именно считается; здесь только место и края.
Порядок слоёв держится не на .s-hero__inner: на широких экранах он
намеренно static, иначе фигура начнёт считать края от него, а не от
секции. Поэтому наверх поднимаются сами колонки. ---------------------- */
.s-hero__flow {
position: absolute;
z-index: 0;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.s-hero__flow canvas {
display: block;
width: 100%;
height: 100%;
}
/* Края растворяются в фон: без этого полотно обрывается по границе секции
ровной линией и читается вставленной картинкой.
Гашение неравномерное. Слева стоит текст, справа — фигура, и обеим
рябь под ними мешает: у выреза мягкий край, и линии проступают сквозь
его кайму, отчего фигура кажется просвечивающей. Поэтому полотно живёт
в основном в середине, а к обоим бокам сходит на нет. */
.s-hero__flow::after {
content: '';
position: absolute;
inset: 0;
background:
/* Сверху и снизу гашение узкое: течение должно доходить до кромок
полосы, иначе оно снова сжимается в ленту посередине. Хватает
нескольких процентов, чтобы не было ровного обреза по границе. */
linear-gradient(180deg, var(--hero-bg) 0%, transparent 7%),
linear-gradient(0deg, var(--hero-bg) 0%, transparent 9%),
/* Боковые гашения узкие. Прежние съедали всё, кроме полоски в
середине: слева полотно гасло до 46 % ширины, справа до 54 %, и в
сумме на полную силу оставалось процентов восемь экрана. */
linear-gradient(90deg, var(--hero-bg) 0%, transparent 16%),
linear-gradient(270deg, var(--hero-bg) 0%, rgba(234, 228, 216, 0.35) 12%, transparent 26%);
}
.s-hero__inner {
display: flex;
flex-direction: column;
padding-top: 40px;
padding-bottom: 0;
}
/* --- Текст ---------------------------------------------------------------- */
.s-hero__copy {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.s-hero__title {
margin-top: 18px;
/* Строки выравниваются по длине сами. Без этого на узкой колонке
последняя строка регулярно оставалась в одно слово. */
text-wrap: balance;
}
/* Дефис внутри слова — законное место переноса, и браузер им пользуется:
«Built-» и «in» уезжали на разные строки. */
.s-hero__nobr { white-space: nowrap; }
/* Курсивная строка начинается с наклонного штриха, и её оптическая кромка
уходит левее вертикали предыдущей строки. Акцент — отдельной строкой,
прямой (курсив снят в .h1 em): сдвиг под вынос наклона больше не нужен. */
.s-hero__title em {
display: block;
padding-left: 0;
}
.s-hero__lead {
max-width: 34em;
margin-top: 14px;
}
/* --- Подсветка подзаголовка ----------------------------------------------
Красится не текст, а градиент под ним: background-clip: text обрезает
заливку по глифам. Поэтому волну можно двигать — у цвета такой ручки
нет, а переход по color дал бы ровное угасание всей строки разом.
Полотно шире куска вдвое с половиной: волна успевает пройти по нему
целиком, а не мигнуть. */
.s-hero__seg {
--rest: var(--c-text-muted);
color: transparent;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
background-repeat: no-repeat;
background-size: 250% 100%;
background-position: 0 0;
background-image: linear-gradient(90deg, var(--rest), var(--rest));
}
/* Свет входит слева с зелёной кромкой и оседает основным тоном */
.s-hero__seg.is-on {
background-image: linear-gradient(90deg,
var(--c-text) 0%, var(--c-text) 40%,
var(--c-green-bright) 48%,
var(--c-text) 55%,
var(--rest) 60%, var(--rest) 100%);
animation: s01-sweep 1.2s cubic-bezier(0.22, 0.7, 0.2, 1) forwards;
}
/* Гаснет в ту же сторону, в какую пришёл свет: иначе кусок «схлопывается»
назад и глаз читает это как ошибку. */
.s-hero__seg.is-off {
background-image: linear-gradient(90deg,
var(--rest) 0%, var(--rest) 40%,
var(--c-text) 60%, var(--c-text) 100%);
animation: s01-sweep 0.9s ease forwards;
}
@keyframes s01-sweep {
from { background-position: 100% 0; }
to { background-position: 0 0; }
}
/* Обрезка по глифам есть не везде: там просто перекрашиваем текст. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
.s-hero__seg {
color: var(--rest);
-webkit-text-fill-color: var(--rest);
background: none;
transition: color 0.8s;
}
.s-hero__seg.is-on {
color: var(--c-text);
-webkit-text-fill-color: var(--c-text);
}
}
@media (prefers-reduced-motion: reduce) {
.s-hero__seg.is-on,
.s-hero__seg.is-off { animation: none; }
.s-hero__seg.is-on {
background-image: linear-gradient(90deg, var(--c-text), var(--c-text));
}
}
/* Условия под кнопкой */
.s-hero__terms {
margin-top: 16px;
color: var(--c-text-muted);
font-size: 13px;
line-height: 20px;
}
.s-hero__actions {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 12px;
width: 100%;
margin-top: 26px;
}
.s-hero__cta { gap: 10px; }
.s-hero__cta-icon { transition: transform 0.18s ease; }
.s-hero__cta:hover .s-hero__cta-icon { transform: translateX(3px); }
/* --- Фигура ---------------------------------------------------------------
Снимок вырезан по контуру и лежит прямо на фоне: ни плашки, ни тени,
ни скругления — границей служит сам силуэт.
Окошко привязано к ВЕРХУ: обрезается низ, а голова остаётся на месте.
-------------------------------------------------------------------------- */
.s-hero__figure {
position: relative;
z-index: 1;
display: flex;
justify-content: center;
align-items: flex-start;
overflow: hidden;
height: var(--fig-h);
margin-top: 24px;
}
.s-hero__woman {
display: block;
width: auto;
height: calc(var(--fig-h) / var(--crop));
max-width: none;
}
/* --- Планшет -------------------------------------------------------------- */
@media (min-width: 601px) {
.s-hero { --fig-h: 380px; }
.s-hero__inner { padding-top: 52px; }
.s-hero__title { margin-top: 20px; }
.s-hero__lead { margin-top: 16px; }
.s-hero__actions {
flex-direction: row;
align-items: center;
width: auto;
gap: 14px;
margin-top: 30px;
}
}
/* --- Две колонки ---------------------------------------------------------- */
@media (min-width: 901px) {
/* Рост окошка тянется за высотой окна: первый экран обязан помещаться в
сгиб вместе с кнопками, а высота окна у всех разная. */
.s-hero { --fig-h: clamp(380px, calc(100vh - 300px), 580px); }
.s-hero__inner {
display: grid;
/* Колонки НЕ равные: текст берёт больше. При половине на половину
заголовок расходился на пять строк вместо трёх и читался лесенкой.
Фигуру это не сдвигает — она центрируется отдельно, см. ниже. */
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
column-gap: 40px;
align-items: center;
padding-top: 56px;
padding-bottom: 56px;
/* Полоса выше окошка на 48 пикселей — столько воздуха остаётся у
фигуры над головой. Впритык макушка упиралась в шапку. */
min-height: calc(var(--fig-h) + 48px);
}
/* Заголовок в половину ширины набирается мельче, чем во всю: при 72
он расходился на пять строк и выпихивал кнопки за сгиб. */
/* На 901–980 колонка уже 440, и «digital products» при 60 не входил в
строку — заголовок рвался на четыре. Кегль идёт за шириной экрана
(колонка ≈ 0.56 × экран − 98) и с ~985 упирается в 60. */
.s-hero__title {
font-size: min(60px, calc(7.46vw - 13px));
line-height: 1.1;
letter-spacing: -0.03em;
}
.s-hero__copy {
justify-content: center;
padding-bottom: 0;
}
/* Фигура стоит посередине ПРАВОЙ ПОЛОВИНЫ ЭКРАНА — ровно то, что нужно.
Через колонки это не выражается: колонки неравные, поле вёрстки уже
окна и на широких экранах ещё и центрируется. Поэтому фигура выведена
из потока и растянута на правые 50 % секции, а секция идёт во всю
ширину. Середина такой коробки и есть 75 % ширины.
Именно 50 % СЕКЦИИ, а не 50vw: vw считает вместе с полосой прокрутки,
и фигура уезжала на её ширину влево от настоящей середины.
Раз фигура вне потока, высоту полосы она больше не держит — её держит
min-height выше. */
.s-hero__inner { position: static; }
.s-hero__figure {
position: absolute;
/* Правый край фигуры совпадает с правым краем контента: ниже под ней
стоят карточки показателей, и её кромка должна попадать в кромку
последней карточки. Считаем тот же отступ, что у .container —
половину остатка за вычетом поля. */
right: max(var(--gutter), calc((100% - var(--container)) / 2));
bottom: 0;
/* Половина СЕКЦИИ, но не шире правой колонки сетки. На широком мониторе
секция растёт, её половина заезжает на текстовую колонку, и лид уходит
под фигуру. Потолок считаем от ширины контента, а не от экрана. */
width: min(50%, calc(var(--container) * 0.44));
/* Прижата к правому краю коробки, а не по центру: иначе на широком
экране между ней и кромкой контента остаётся пустое поле, и снимок
перестаёт попадать в кромку последней карточки. */
justify-content: flex-end;
margin: 0;
padding: 0;
}
}
@media (min-width: 1281px) {
.s-hero__inner { padding-top: 64px; padding-bottom: 64px; }
.s-hero__title { font-size: 68px; line-height: 74px; letter-spacing: -2px; }
.s-hero__lead { font-size: 22px; line-height: 34px; }
.s-hero__copy { padding-bottom: 0; }
}
/* --- Телефон --------------------------------------------------------------
Правки только для узкого экрана: на двух колонках выключка по левому
краю остаётся, там она работает. */
@media (max-width: 600px) {
/* Окошко выше прежнего, доля видимого снимка прежняя: рез по поясу.
Чтобы он не читался обрезанной фотографией, под фигурой не остаётся
кремового поля — см. padding-bottom ниже. */
.s-hero {
--fig-h: clamp(380px, 52vh, 460px);
--crop: 0.72;
}
/* Заголовок на узкой колонке крупнее базового: 38 при центрировании
выглядел мелко рядом с кнопкой во всю ширину. */
.s-hero__title {
/* КЕГЛЬ ЕДЕТ ЗА ШИРИНОЙ ЭКРАНА.
Сорок четыре держатся с 376 и выше — там заголовок встаёт в две
строки, как и задумано. Ниже он начинал складываться: на 350 три
строки, на 320 четыре, по одному-два слова в каждой. Заголовок из
четырёх огрызков — уже не заголовок.
11.7vw подобраны так, чтобы на 375 выходило ровно прежние сорок
четыре, а на 320 — тридцать восемь: при них самая длинная строка
набора укладывается в ширину колонки. Ниже 325 кегль упирается в
нижнюю границу и дальше не мельчает — читаемость важнее числа строк.
Интерлиньяж и межбуквенное заданы долями кегля, иначе они остались бы
от сорока четырёх и разъехались бы с текстом. */
font-size: clamp(38px, 11.7vw, 44px);
line-height: 1.136;
letter-spacing: -0.027em;
/* прежние значения: 44 / 50 */
letter-spacing: -1.2px;
}
.s-hero__lead {
font-size: 18px;
line-height: 28px;
}
/* Ноль снизу: фигура должна упираться в кромку секции. Любое поле под
ней превращает рез в «неудачно обрезанное фото внутри коробки». */
.s-hero__inner {
padding-top: 56px;
padding-bottom: 0;
}
.s-hero__copy {
align-items: center;
text-align: center;
}
/* Курсивная строка стояла блоком со сдвигом на три пикселя — так она
выравнивалась по левому краю предыдущей. По центру сдвиг лишний. */
.s-hero__title em { padding-left: 0; }
.s-hero__lead {
max-width: 30em;
margin-inline: auto;
}
.s-hero__actions {
align-items: center;
width: 100%;
}
.s-hero__terms { text-align: center; }
}
/* ---------------------------------------------------------------
css/shared/stats.css
--------------------------------------------------------------- */
/* ==========================================================================
tajiro — Home · 02 · Stats
Figma: HoPojxNiFElmltha1NOl3N, node 511:300
Полоса из четырёх показателей на кремовом фоне.
========================================================================== */
.s-02 {
/* Сверху меньше, чем снизу, намеренно: верх этой секции выглядывает из-под
первого экрана, и при равных отступах из-за сгиба торчало бы одно пустое
поле, а не карточки. */
padding-top: 36px;
padding-bottom: 56px;
/* Заливки здесь намеренно нет. Цвет у неё был ровно фоновый, то есть на глаз
ничего не давал, — а холст первого экрана зафиксирован под всем документом,
и непрозрачная секция обрубала песок бритвой ровно по своей верхней
границе. Прозрачная — песок дотаивает сквозь неё сам. */
}
/* --- Сетка показателей ---------------------------------------------------- */
.s-02__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
/* Зазор ужат с 32: числа стали длиннее прежних, и каждый лишний пиксел
между карточками — пиксел, отнятый у строки внутри них. */
gap: 10px;
text-align: center;
}
/* --- Карточка показателя -------------------------------------------------- */
/* column-reverse: в разметке сначала подпись (dt), визуально сначала число */
.s-02__stat {
display: flex;
flex-direction: column-reverse;
align-items: center;
/* flex-end при column-reverse — это верх: число у верхнего поля, вторая
строка подписи уходит вниз, и числа в ряду стоят на одной линии. По
центру «0%» над подписью в две строки поднималось на ~10 выше соседей. */
justify-content: flex-end;
gap: 2px;
/* Отступы НЕ равны намеренно — равной должна быть краска, а не коробки.
Цифра не заполняет свою строку: сверху над ней остаётся около десяти
пикселей пустой строки, снизу под подписью — около двух с половиной.
При ровных полях это давало 34 сверху против 22.5 снизу, и верх
читался просторнее. Здесь разница выбрана так, чтобы от верхнего края
до краски цифры и от краски подписи до нижнего выходило поровну —
около двадцати восьми. */
padding: 14px 12px 18px;
/* Стекло, общее со всеми крупными плашками страницы: токены в 00-base.css.
Эти четыре карточки под него не попали, потому что у них своя разметка,
а рядом с остеклёнными шагами разница читалась. Граница прозрачна и
работает распоркой — в её толщину видно градиентную кромку. */
border: 1px solid transparent;
border-radius: 14px;
background-image: var(--glass-bg), var(--glass-edge);
background-origin: padding-box, padding-box, border-box;
background-clip: padding-box, padding-box, border-box;
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
box-shadow: var(--glass-shadow);
overflow: clip; /* Figma: overflow-clip — страница не должна ехать вбок */
}
.s-02__value {
font-family: var(--f-display);
font-weight: 700;
/* Кегль подобран под САМУЮ ДЛИННУЮ строку — «Up to 100%». Числа здесь
длиннее прежних: было «38» и «4.8/5», стало «Up to 100%» и «50,000+».
При 64 длинная строка занимала 274 пиксела на 214 доступных и либо
срывалась на вторую строку, либо вылезала за карточку. Перенос
недопустим: ряд из четырёх сразу расходится по высоте. */
font-size: 30px;
line-height: 36px;
letter-spacing: -0.9px;
white-space: nowrap;
color: var(--c-text);
}
.s-02__label {
font-size: 14px;
line-height: 20px;
color: #706b61;
text-wrap: balance; /* «Platform commission / on your store²», а не «…on / your store²» */
}
/* --- Адаптив -------------------------------------------------------------- */
/* На четыре колонки «12,400+» перестаёт влезать раньше 900px:
при gutter 64px трек = (vw − 200) / 4, а число в 54px требует ~236px
вместе с паддингами. Порог перехода на две колонки — 1080px. */
/* --- Адаптив: снизу вверх ---------------------------------------------------
Всё выше — телефонные значения. Здесь они дорастают до широкого экрана.
Блоки идут строго по возрастанию порога: правила равной силы, побеждает
последнее подошедшее. Пороги смещены на пиксел (601 вместо 600): при
max-width граница входила в узкий диапазон, при min-width должна войти
в широкий. -------------------------------------------------------------- */
@media (min-width: 601px) {
.s-02 {
padding-top: 44px;
padding-bottom: 80px;
}
.s-02__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
.s-02__stat {
gap: 6px;
/* Отступы НЕ равны намеренно — равной должна быть краска, а не коробки.
Цифра не заполняет свою строку: сверху над ней остаётся около десяти
пикселей пустой строки, снизу под подписью — около двух с половиной.
При ровных полях это давало 34 сверху против 22.5 снизу, и верх
читался просторнее. Здесь разница выбрана так, чтобы от верхнего края
до краски цифры и от краски подписи до нижнего выходило поровну —
около двадцати восьми. */
padding: 20px 16px 26px;
border-radius: 18px;
}
.s-02__value {
font-size: 40px;
line-height: 44px;
letter-spacing: -1.1px;
}
/* Подпись про комиссию длиннее остальных на четыре слова и просила
245 px при 237 доступных — ложилась в две строки, а соседние
оставались в одну. Кегль на полтора пункта меньше выравнивает ряд. */
.s-02__label {
font-size: 15px;
line-height: 21px;
}
}
@media (min-width: 901px) {
.s-02 {
/* Сверху меньше, чем снизу, намеренно: верх этой секции выглядывает из-под
первого экрана, и при равных отступах из-за сгиба торчало бы одно пустое
поле, а не карточки. */
padding-top: 60px;
padding-bottom: 120px;
}
}
@media (min-width: 1081px) {
.s-02__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.s-02__value {
font-size: 34px;
line-height: 38px;
letter-spacing: -0.9px;
}
}
@media (min-width: 1281px) {
.s-02__grid {
/* Зазор ужат с 32: числа стали длиннее прежних, и каждый лишний пиксел
между карточками — пиксел, отнятый у строки внутри них. */
gap: 20px;
}
.s-02__value {
/* Кегль подобран под САМУЮ ДЛИННУЮ строку — «Up to 100%». Числа здесь
длиннее прежних: было «38» и «4.8/5», стало «Up to 100%» и «50,000+».
При 64 длинная строка занимала 274 пиксела на 214 доступных и либо
срывалась на вторую строку, либо вылезала за карточку. Перенос
недопустим: ряд из четырёх сразу расходится по высоте. */
font-size: 38px;
line-height: 42px;
letter-spacing: -1px;
}
}
/* --- Сноски --------------------------------------------------------------
Мельче подписей и приглушены: это оговорка, а не часть показателя. */
.s-02__note {
margin-top: 26px;
color: var(--c-text-muted);
font-size: 12px;
line-height: 20px;
text-align: center;
}
/* Каждая сноска — своим куском. На телефоне каждая с новой строки: одной
строкой хвост первой («2023.») уходил в начало второй и читался как
«2023. ² Payment…». В одну строку обе встают с 901: на 601–900 они
вместе (~540) не входили в колонку и рвались на «fees / apply.». */
.s-02__note-item {
display: block;
text-wrap: balance;
}
.s-02__note .s-02__ref:first-child { margin-left: 0; }
@media (min-width: 901px) {
.s-02__note-item { display: inline; }
.s-02__note-item + .s-02__note-item { margin-left: 10px; }
}
/* Верхний индекс не должен растягивать строку показателя */
.s-02__ref {
font-size: 0.62em;
line-height: 0;
vertical-align: super;
}
/* ---------------------------------------------------------------
css/home/03-ai-influencers.css
--------------------------------------------------------------- */
/* ==========================================================================
tajiro — Home · Dark accents
03-ai-influencers.css — секция «03 · AI influencers»
Источник: Figma HoPojxNiFElmltha1NOl3N, node 511:314
Телефон играет ленту: скриншот видеофида, который стоит на месте, спорит
с самим утверждением секции («они постят каждую неделю»). Здесь он идёт.
Вся моторика — в блоке МОТОРИКА внизу файла.
========================================================================== */
.s-03 {
/* фирменный тёплый тон секции — между --c-bg и --c-bg-alt, отдельного токена нет */
background: var(--c-bg-plain);
padding-block: 72px;
/* Высота строки счётчиков в рейле. Держим в переменной: от неё считаются
и кейфреймы тикеров, и парковка в reduced-motion — зашитые пиксели
разъехались бы с line-height при правке типографики. */
--s03-row: 14px;
/* Сдвиг фазы мастер-цикла. Цикл начинается кадром «первый клип въезжает
снизу», то есть в момент 0 экран телефона ещё пуст. Отматываем часы
на 0.6s назад — и страница открывается на уже въехавшем клипе.
Сдвиг ОДИН на все анимации секции: относительная синхронность не
меняется, меняется только точка, с которой цикл стартует. */
--s03-phase: -0.6s;
}
.s-03__content {
display: flex;
/* row задан явно: ниже 900 колонка встаёт столбиком, и без этой строки
на широком экране столбик было бы нечем отменить. */
flex-direction: column;
align-items: center;
justify-content: center;
gap: 44px;
}
/* --- Текстовая колонка ---------------------------------------------------- */
.s-03__text {
flex: 0 1 auto;
min-width: 0;
/* Значения по умолчанию, выписанные явно: в стопке колонка получает
свою ширину и потолок, и вернуть её к обычному потоку выше 900 можно
только тем, что здесь написано. */
width: 100%;
max-width: 560px;
}
.s-03__eyebrow {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
}
.s-03__eyebrow-line {
flex: none;
width: 24px;
border-radius: 2px;
}
.s-03__eyebrow .kicker {
font-size: 12px;
line-height: 18px;
letter-spacing: 1.3px;
color: var(--c-green-text);
}
.s-03__title {
margin-bottom: 16px;
font-size: 34px;
line-height: 42px;
letter-spacing: -0.8px;
}
.s-03__lead {
margin-bottom: 24px;
}
.s-03__actions {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.s-03__cta img {
flex: none;
transition: transform 0.18s ease;
}
.s-03__cta:hover img { transform: translateX(3px); }
.s-03__note {
display: flex;
align-items: flex-start;
gap: 6px;
font-size: 13px;
line-height: 18px;
color: var(--c-text-muted);
}
.s-03__note img { flex: none; margin-top: 2px; }
/* --- Телефон -------------------------------------------------------------- */
/* Тёплый ореол — тот же приём, что у телефона в s-06: два телефона на
странице должны рифмоваться. Базовое свечение живёт в статической тени,
анимация только качает её силу, поэтому при выключенной анимации
подсветка остаётся — просто перестаёт дышать.
box-shadow тут анимировать можно: элемент один, не повторяющийся. */
.s-03__phone {
flex: none;
width: 280px;
height: 572px;
padding: 4px; /* рамка корпуса */
border-radius: 48px;
background: #080808;
box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-sand) 22%, transparent),
0 0 30px -8px color-mix(in srgb, var(--c-sand) 40%, transparent),
0 30px 60px rgba(89, 61, 28, 0.16);
animation: s03-glow 8s var(--s03-phase) ease-in-out infinite;
}
.s-03__screen {
position: relative;
width: 100%;
height: 100%;
border-radius: 44px;
overflow: hidden;
background: #080808; /* подложка на первый кадр, пока грузится картинка */
}
/* --- Видео ленты -----------------------------------------------------------
Заменило стопку статичных кадров: в рамке телефона играет настоящий mp4,
как на образца. Постер держит кадр до загрузки и остаётся единственным
кадром, если файла ещё нет, — секция не разваливается ни в одном случае.
-------------------------------------------------------------------------- */
.s-03__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
/* Постер ещё и фоном, не только атрибутом. Атрибут показывает кадр
ТОЛЬКО до начала воспроизведения: как только браузер решает играть, он
постер снимает — и если первый кадр ещё не расшифрован, в рамке
телефона стоит чёрный прямоугольник. На телефоне по медленной сети
это секунды. Фоном кадр лежит под видео всегда и виден в любую такую
паузу: пока грузится, если автовоспроизведение запрещено, если mp4
вовсе нет — как в лёгком цельном файле, куда ролик не вшивается. */
background: url(../images/people/ai-team-poster.webp) center / cover no-repeat;
}
/* --- Клипы ленты -----------------------------------------------------------
Четыре слоя, смена — свайпом вверх, а не наплывом. Наплыв тут пробовался
и был отвергнут по делу: во всех четырёх клипах один и тот же человек, и
на середине растворения в кадре оказываются два его лица разного масштаба
друг на друге — читается как дефект, а не как монтаж. Свайп этой проблемы
лишён вовсе: слои не смешиваются, а стыкуются.
Уходящий клип едет на translateY(-100%), приходящий — со 100% к нулю, по
одной и той же кривой. В любой момент перехода уходящий занимает верхние
(1−p) экрана, приходящий — нижние p: сумма ровно экран, ни щели, ни
наложения. Порядок слоёв поэтому неважен, и петля 4→1 работает так же,
как 1→2 — без особого случая на шве.
Возврат слоя под нижнюю кромку (с −100 % на 100 %) пересёк бы кадр, и его
прячем: opacity 0 на 27.5 %, обратно 1 на 60.5 %, когда слой уже внизу.
Планы съёмки: 1 — общий (продукт, лицо, комната), 2 — крупный на лицо,
3 — врезка на продукт в руках, 4 — три четверти со светом слева.
Геометрия наездки. Экран 272×564, снимок 768×1344, object-fit: cover →
при scale(1) картинка отрисована 322×564 по центру. transform читается
как scale(S) translate(t): точка со смещением d от центра уезжает в
S·(d+t), поэтому композиционная точка держится центром при любом S —
наездка получается чистым зумом, без сползания кадра. Запас на сдвиг:
по X (322·S − 272)/2, по Y 282·(S − 1) — все значения ниже внутри него,
так что кадр нигде не открывает пустого края. Самый тугой — клип 3:
чтобы лицо ушло из кадра целиком и остались только руки с продуктом,
нужен зум 2.10 и сдвиг вниз на 25.4 % (запас до нижней кромки ~9px).
Меньший зум лицо не убирает — режет его посередине, а это выглядит
ошибкой кадрирования, а не другим планом. */
/* backwards обязателен. Клипы 2–4 первые 4/8/12 секунд стоят в фазе
animation-delay, а там действует обычный вычисленный стиль — то есть
translateY(0) и opacity 1. Без fill-mode три слоя лежали бы поверх
первого, и до 12-й секунды телефон показывал бы неподвижный кадр.
backwards подставляет им кадр 0 % — «жду под нижней кромкой». */
.s-03__clip {
position: absolute;
inset: 0;
/* linear на уровне элемента: в цикле есть длинные удержания, любое ease
здесь переразметило бы их. Кривая свайпа — внутри кейфреймов. */
animation: s03-swipe 16s linear infinite backwards;
animation-delay: var(--s03-phase);
}
.s-03__clip--1 { --s03-z0: 1.08; --s03-x0: 0%; --s03-y0: 0%;
--s03-z1: 1.15; --s03-x1: 0%; --s03-y1: -0.6%; }
.s-03__clip--2 { --s03-z0: 1.75; --s03-x0: -2.5%; --s03-y0: 11.31%;
--s03-z1: 1.84; --s03-x1: -2.5%; --s03-y1: 10.6%; }
.s-03__clip--3 { --s03-z0: 2.10; --s03-x0: 2%; --s03-y0: -25.4%;
--s03-z1: 2.18; --s03-x1: -1%; --s03-y1: -25.4%; }
.s-03__clip--4 { --s03-z0: 1.25; --s03-x0: 9%; --s03-y0: 4%;
--s03-z1: 1.34; --s03-x1: 8%; --s03-y1: 3.2%; }
/* Наездка живёт на самой картинке, а свайп — на обёртке: у них разные
кривые (наездка строго линейна, свайп смягчён), и на одном элементе
они бы дрались за transform. */
.s-03__frame {
width: 100%;
height: 100%;
object-fit: cover;
transform-origin: center;
animation: s03-ken 16s linear infinite backwards;
animation-delay: var(--s03-phase);
}
/* Домашний приём: одинаковые сиблинги разводятся задержкой, а не копиями
кейфреймов. Обёртка и картинка одного клипа обязаны идти в такт. */
.s-03__clip--2, .s-03__clip--2 .s-03__frame { animation-delay: calc(4s + var(--s03-phase)); }
.s-03__clip--3, .s-03__clip--3 .s-03__frame { animation-delay: calc(8s + var(--s03-phase)); }
.s-03__clip--4, .s-03__clip--4 .s-03__frame { animation-delay: calc(12s + var(--s03-phase)); }
/* Интерфейс поверх видео — раскладка потоком, без магических координат */
.s-03__ui {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
padding: 26px 17px 26px 18px;
/* Интерфейс лежит прямо на кадре. Прежняя лёгкая тень была рассчитана на
четыре тёмных статичных снимка; у живого видео кадры бывают засвеченные
— небо, стена на солнце, — и белый текст на них пропадал целиком.
Две тени вместо одной: узкая держит контур глифа, широкая подкладывает
под него пятно. Так надпись читается и на небе, и на белой стене, не
превращаясь в обводку. */
color: var(--c-on-dark);
/* Затемнений поверх кадра нет ни одного: они лезли на собственные
подписи ролика. Вся читаемость держится на тенях, поэтому их три —
узкая под контур глифа, средняя под пятно, широкая под ореол. */
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75),
0 2px 8px rgba(0, 0, 0, 0.6),
0 0 20px rgba(0, 0, 0, 0.45);
}
/* Ширина колонки задана иконкой (26px), а не самой длинной подписью, —
иначе «Share» растягивает колонку и сдвигает иконки влево. */
.s-03__rail {
position: relative;
display: flex;
margin-top: auto; /* распорка вместо снятых вкладок: рейл держится внизу */
flex-direction: column;
align-items: center;
gap: 18px;
align-self: flex-end;
width: 26px;
margin-bottom: 28px;
}
.s-03__rail-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: 700;
line-height: 14px;
white-space: nowrap;
}
.s-03__rail-item--like { position: relative; }
/* Кольцо-всплеск: рождается в центре сердца и разлетается. Центрируем
марджинами, а не transform, — transform занят самой анимацией.
Максимум scale(2.2) выбран по краю экрана: центр рейла в 30px от правой
кромки, 26px·2.2/2 = 28.6px — кольцо не срезается. */
.s-03__rail-item--like::after {
content: '';
position: absolute;
top: 13px;
left: 50%;
width: 26px;
height: 26px;
margin: -13px 0 0 -13px;
border: 1.5px solid var(--c-sand);
border-radius: 50%;
opacity: 0;
animation: s03-burst 16s var(--s03-phase) linear infinite;
}
.s-03__heart {
transform-origin: center;
animation: s03-heart 16s var(--s03-phase) linear infinite;
}
/* Окно тикера шире колонки рейла (48 против 26): «142.3K» не должен
обрезаться, а элемент центрирован — свес симметричный, ровно как у
надписи «Share», которая свешивается тут с самого начала. */
/* Рейл — единственная часть интерфейса вне шторок: он висит на середине
кадра, а там может оказаться что угодно, от неба до белой стены. Тень
ему нужна плотнее общей, иначе цифры пропадают на светлых кадрах. */
.s-03__rail {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7),
0 2px 10px rgba(0, 0, 0, 0.65),
0 0 22px rgba(0, 0, 0, 0.4);
}
/* text-shadow не красит SVG — иконкам рейла нужна своя тень. Рейл висит
на середине кадра, где скримов нет вовсе, так что без неё белые глифы
пропадали на светлом так же, как надписи. */
.s-03__rail img,
.s-03__heart {
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.65))
drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
}
.s-03__count {
display: block;
width: 48px;
height: var(--s03-row);
overflow: hidden;
text-align: center;
}
.s-03__count-track { display: block; }
.s-03__count-track > span {
display: block;
height: var(--s03-row);
line-height: var(--s03-row);
font-variant-numeric: tabular-nums;
}
/* steps(1, end) — счётчик щёлкает, а не плывёт: цифры не должны
«проезжать» между значениями. Приём взят из тикера заказов s-06. */
.s-03__count-track--likes { animation: s03-likes 16s var(--s03-phase) steps(1, end) infinite; }
.s-03__count-track--comments { animation: s03-comments 16s var(--s03-phase) steps(1, end) infinite; }
/* --- Подпись поста -------------------------------------------------------- */
.s-03__meta {
display: flex;
flex-direction: column;
align-self: stretch;
gap: 5px;
}
.s-03__handle {
display: flex;
align-items: center;
gap: 5px;
font-size: 13px;
font-weight: 700;
line-height: 18px;
}
/* Высота слота задана явно (17 подпись + 4 зазор + 15 ниша): дети
абсолютные, сами высоту не держат, а прыгать разметке нельзя.
overflow: hidden — потому что подписи листаются тем же свайпом, что и
видео: на переходе в окне видно низ старого поста и верх нового, как
в настоящей ленте. */
.s-03__posts {
position: relative;
height: 36px;
overflow: hidden;
}
/* Та же анимация, что у клипа: translateY(100 %) здесь — это 36px, а не
564, но нормированная кривая одна, поэтому подпись едет синхронно
со своим видео, а не живёт отдельной жизнью.
backwards — по той же причине, что и у клипов: иначе первые 12 секунд
все четыре подписи лежали бы друг на друге в нулевой позиции. */
.s-03__post {
position: absolute;
top: 0;
right: 0;
left: 0;
display: flex;
flex-direction: column;
gap: 4px;
animation: s03-swipe 16s linear infinite backwards;
animation-delay: var(--s03-phase);
}
.s-03__post--2 { animation-delay: calc(4s + var(--s03-phase)); }
.s-03__post--3 { animation-delay: calc(8s + var(--s03-phase)); }
.s-03__post--4 { animation-delay: calc(12s + var(--s03-phase)); }
/* flex, а не inline: бейдж «NEW» тогда не растягивает строку выше 17px и
слот подписи остаётся ровно 36px */
.s-03__caption {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
line-height: 17px;
white-space: nowrap;
}
/* Тёмный текст по песочному: 7.35:1. Тень интерфейса тут вредна — сбрасываем */
.s-03__new {
flex: none;
padding: 1px 6px;
border-radius: var(--r-pill);
background: var(--c-sand);
font-size: 9px;
font-weight: 700;
line-height: 12px;
letter-spacing: 0.8px;
color: var(--c-ink-surface-2);
text-shadow: none;
}
.s-03__niche {
font-size: 11px;
line-height: 15px;
}
/* --- Полоса проигрывания -------------------------------------------------- */
.s-03__progress {
margin-top: 14px;
height: 2px;
border-radius: 2px;
background: color-mix(in srgb, var(--c-on-dark) 26%, transparent);
overflow: hidden;
}
.s-03__progress-fill {
display: block;
height: 100%;
border-radius: inherit;
background: var(--c-sand);
width: var(--s03-progress, 0%);
}
/* ==========================================================================
МОТОРИКА. Мастер-цикл — 16s: четыре клипа по 4s.
Почему 16s. Это цикл телефона из s-06 (четыре тоста, шаг 25%), а тут тоже
телефон и тоже четыре сменяющихся карточки — два телефона на странице
обязаны идти в одном темпе. 4s на клип — честная длина короткого видео.
Причинность (её и должен прочитать зритель). Каскад одной смены клипа:
24.4 % полоса проигрывания дошла до края — клип кончился
25 % лента листается вверх: клип уезжает, снизу приходит следующий,
вместе с ним едет и его подпись
26 % новое видео наполовину в кадре — счётчики рейла переписываются
под него
27 % свайп закончился, полоса пошла с нуля
Внутри клипа лайки прибавляются сами (2 щелчка, у нового видео — 3,
оно набирает быстрее), и на каждый щелчок сердце отвечает импульсом.
Дважды за цикл щелчок крупный — тогда же разлетается кольцо.
Что зритель должен из этого узнать: инфлюенсер выкладывает не один ролик,
а библиотеку, ролики продолжают набирать реакции, и свежий (бейдж NEW,
51-е видео) разгоняется быстрее старых.
Правила:
1) animation-delay ненулевой только там, где сменяются одинаковые
сиблинги (клипы и подписи) — это домашний приём. Стаггер ВНУТРИ одного
элемента (импульсы сердца, сегменты полосы) живёт в процентах
кейфреймов, иначе хвост цикла уехал бы вместе с началом.
2) На уровне элемента — linear (или steps там, где нужен щелчок). Любое
ease на элементе переразмечает весь цикл и рушит удержания. Каждое
смягчение объявлено внутри кейфрейма через animation-timing-function.
3) Ambient-петля свечения — 8s, целый делитель 16s: фазируется с мастером.
4) Наездка внутри клипа строго линейна: это движение камеры, у него нет
ни разгона, ни торможения.
Биты (%): 24.4/49.4/74.4/99.4 — полоса дошла до края;
0/25/50/75 — начался свайп (кончился через 2 %);
1/26/51/76 — щёлкнули счётчики;
7.5 · 17 · 32.5 · 42 · 57.5 · 67 · 80 · 86 · 92 — прилетел лайк
(17 и 92 — крупные, с кольцом).
========================================================================== */
/* --- 1. Свайп ленты ---------------------------------------------------------
Локальное время слоя: 0 % — он снизу за кромкой, 0→2 % въезжает, 2→25 %
стоит (это и есть его клип), 25→27 % уезжает вверх. Дальше он за кадром,
и там прячется возврат: гаснет на 27.5 %, тихо возвращается под нижнюю
кромку к 60 %, зажигается обратно на 60.5 %. На 100 % состояние ровно
то же, что на 0 %, — шов петли не существует как событие.
Ту же анимацию носит подпись поста: у неё translateY(100 %) — 36px, но
кривая та же, поэтому текст листается синхронно со своим видео.
Кривая свайпа объявлена на кадрах 0 % и 25 %: обе стороны перехода
обязаны ехать по ОДНОЙ кривой, иначе слои перестанут стыковаться и на
границе мигнёт подложка. */
@keyframes s03-swipe {
0% { opacity: 1; transform: translateY(100%);
animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1); }
2% { opacity: 1; transform: translateY(0); }
25% { opacity: 1; transform: translateY(0);
animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1); }
27% { opacity: 1; transform: translateY(-100%); }
27.5% { opacity: 0; transform: translateY(-100%); }
60% { opacity: 0; transform: translateY(100%); }
60.5%,
100% { opacity: 1; transform: translateY(100%); }
}
/* --- 1b. Наездка ------------------------------------------------------------
Идёт всё время, пока клип на экране (локальные 0→27 %), и возвращается
к началу на 27→60 %, когда слой уже за кадром и погашен. Кроп у каждого
клипа свой — он приходит переменными с обёртки, поэтому кейфрейм один
на все четыре слоя. */
@keyframes s03-ken {
0% { transform: scale(var(--s03-z0)) translate(var(--s03-x0), var(--s03-y0)); }
27% { transform: scale(var(--s03-z1)) translate(var(--s03-x1), var(--s03-y1)); }
60%,
100% { transform: scale(var(--s03-z0)) translate(var(--s03-x0), var(--s03-y0)); }
}
/* --- 1c. Вуаль движения -----------------------------------------------------
Держится на четырёх окнах свайпа (0–2, 25–27, 50–52, 75–77 %). Набегает
за 0.6 % ДО начала свайпа и уходит за 0.6 % после: края приходятся на
моменты, когда лента ещё (или уже) стоит, а там фон обычный и по контрасту
проходит — полупрозрачная вуаль никого не подводит.
Полная сила достигается ровно на 24.4/49.4/74.4/99.4 % — там же, где
полоса проигрывания дошла до края. Кадр темнеет — и только потом едет.
Ramp последнего окна закончен к 99.4 %, поэтому на 99.9 % вуаль уже
на единице, ровно как на 0 %: шов петли не читается и здесь. */
@keyframes s03-veil {
0%, 2% { opacity: 1; }
2.6%, 23.8% { opacity: 0; }
24.4%, 27% { opacity: 1; }
27.6%, 48.8% { opacity: 0; }
49.4%, 52% { opacity: 1; }
52.6%, 73.8% { opacity: 0; }
74.4%, 77% { opacity: 1; }
77.6%, 98.8% { opacity: 0; }
99.4%, 100% { opacity: 1; }
}
/* --- 2. Полоса проигрывания -------------------------------------------------
Четыре одинаковых пробега в одном элементе, поэтому стаггер — в процентах.
Каждый: 24.4 % цикла (3.9s) на заполнение, 0.3 % (48ms) на сброс — это
читается как мгновенный, — и пауза до старта следующего клипа. Полоса
доходит до края на 24.4 %, свайп начинается на 25 %: сначала причина,
через 96 мс следствие. На 99.9 % полоса пуста, как и на 0 %. */
@keyframes s03-progress {
0% { transform: scaleX(0); }
24.4% { transform: scaleX(1); }
24.7% { transform: scaleX(0); }
25% { transform: scaleX(0); }
49.4% { transform: scaleX(1); }
49.7% { transform: scaleX(0); }
50% { transform: scaleX(0); }
74.4% { transform: scaleX(1); }
74.7% { transform: scaleX(0); }
75% { transform: scaleX(0); }
99.4% { transform: scaleX(1); }
99.7% { transform: scaleX(0); }
100% { transform: scaleX(0); }
}
/* --- 3. Счётчик лайков ------------------------------------------------------
Щелчки на 1/26/51/76 % — это следующий пост принёс своё число. Момент —
середина свайпа: новое видео уже наполовину в кадре, и рейл под него
переписывается. Свайпы стоят на 0/25/50/75, поэтому первый щелчок цикла
приходится на 1 %, а не на 0 %: строка 0 — ещё хвост четвёртого клипа.
Она же продублирована последней строкой, так что на 100 % лента встаёт
на то же число и кадр 99.9 % неотличим от кадра 0 %.
Щелчки между сменами — пришедшие лайки текущего клипа. У нового видео
(76–100 %) их три, и шаг крупнее: свежий ролик разгоняется быстрее. */
@keyframes s03-likes {
0% { transform: translateY(0); } /* 3,329 — хвост клипа 4 */
1% { transform: translateY(calc(var(--s03-row) * -1)); } /* 142.3K — пришёл клип 1 */
7.5% { transform: translateY(calc(var(--s03-row) * -2)); }
17% { transform: translateY(calc(var(--s03-row) * -3)); }
26% { transform: translateY(calc(var(--s03-row) * -4)); } /* клип 2 */
32.5% { transform: translateY(calc(var(--s03-row) * -5)); }
42% { transform: translateY(calc(var(--s03-row) * -6)); }
51% { transform: translateY(calc(var(--s03-row) * -7)); } /* клип 3 */
57.5% { transform: translateY(calc(var(--s03-row) * -8)); }
67% { transform: translateY(calc(var(--s03-row) * -9)); }
76% { transform: translateY(calc(var(--s03-row) * -10)); } /* клип 4 — новое видео */
80% { transform: translateY(calc(var(--s03-row) * -11)); }
86% { transform: translateY(calc(var(--s03-row) * -12)); }
92% { transform: translateY(calc(var(--s03-row) * -13)); } /* = строка 0 */
100% { transform: translateY(calc(var(--s03-row) * -13)); }
}
/* Комментарии меняются только вместе с постом — внутри клипа им расти незачем */
@keyframes s03-comments {
0% { transform: translateY(0); }
1% { transform: translateY(calc(var(--s03-row) * -1)); }
26% { transform: translateY(calc(var(--s03-row) * -2)); }
51% { transform: translateY(calc(var(--s03-row) * -3)); }
76% { transform: translateY(calc(var(--s03-row) * -4)); }
100% { transform: translateY(calc(var(--s03-row) * -4)); }
}
/* --- 4. Сердце: импульс на каждый прилетевший лайк ---------------------------
Девять импульсов внутри одного элемента — значит, все девять в процентах.
Пружина на взлёте, мягкий возврат. Два импульса (17 % и 92 %) крупнее:
это те же биты, на которых разлетается кольцо.
Смены поста (1/26/51/76 %) импульса НЕ получают: там не прилетел лайк,
там просто другой пост принёс свои числа. */
@keyframes s03-heart {
0% { transform: scale(1); }
7.5% { transform: scale(1); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
8.2% { transform: scale(1.26); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1); }
9.7% { transform: scale(1); }
17% { transform: scale(1); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
17.7% { transform: scale(1.42); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1); }
19.2% { transform: scale(1); }
32.5% { transform: scale(1); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
33.2% { transform: scale(1.26); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1); }
34.7% { transform: scale(1); }
42% { transform: scale(1); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
42.7% { transform: scale(1.26); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1); }
44.2% { transform: scale(1); }
57.5% { transform: scale(1); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
58.2% { transform: scale(1.26); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1); }
59.7% { transform: scale(1); }
67% { transform: scale(1); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
67.7% { transform: scale(1.26); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1); }
69.2% { transform: scale(1); }
80% { transform: scale(1); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
80.7% { transform: scale(1.26); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1); }
82.2% { transform: scale(1); }
86% { transform: scale(1); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
86.7% { transform: scale(1.26); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1); }
88.2% { transform: scale(1); }
92% { transform: scale(1); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
92.7% { transform: scale(1.42); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1); }
94.2% { transform: scale(1); }
100% { transform: scale(1); }
}
/* --- 5. Кольцо-всплеск ------------------------------------------------------
Только на двух крупных щелчках. Между вспышками кольцо возвращается к
исходному размеру при opacity: 0 — сброс не виден, 100 % совпадает с 0 %. */
@keyframes s03-burst {
0%,
17% { opacity: 0; transform: scale(0.55);
animation-timing-function: cubic-bezier(0.16, 0.84, 0.44, 1); }
17.4% { opacity: 0.85; transform: scale(0.7); }
22% { opacity: 0; transform: scale(2.2); }
92% { opacity: 0; transform: scale(0.55);
animation-timing-function: cubic-bezier(0.16, 0.84, 0.44, 1); }
92.4% { opacity: 0.85; transform: scale(0.7); }
97% { opacity: 0; transform: scale(2.2); }
100% { opacity: 0; transform: scale(0.55); }
}
/* --- 7. Ambient: дыхание рамки ---------------------------------------------
Сегментов-удержаний нет, поэтому ease-in-out на элементе безопасен. */
@keyframes s03-glow {
50% {
box-shadow:
0 0 0 1px color-mix(in srgb, var(--c-sand) 45%, transparent),
0 0 56px -4px color-mix(in srgb, var(--c-sand) 62%, transparent),
0 30px 60px rgba(89, 61, 28, 0.16);
}
}
/* --- Адаптив -------------------------------------------------------------- */
/* --- Уважение к prefers-reduced-motion ------------------------------------
Сброс в 00-base.css схлопывает каждую анимацию в ПОСЛЕДНИЙ кадр. У свайпа
последний кадр — translateY(100 %), то есть «слой ждёт под нижней кромкой»:
без этого блока и все четыре клипа, и все четыре подписи оказались бы за
кадром, а экран телефона — пустым чёрным прямоугольником.
Статичный кадр собран намеренно: это первый клип в начале наездки — общий
план, его подпись, его счётчики, полоса на 42 %. Кадр честен сам по себе:
числа рейла принадлежат ровно тому посту, который виден, а полоса на
середине говорит, что ролик идёт, а не кончился.
Тикеры паркуются на строке 1, а не 0: строка 0 — хвост четвёртого клипа
(3,329 / 214), и рядом с подписью первого поста она бы врала. */
@media (prefers-reduced-motion: reduce) {
.s-03__clip,
.s-03__post {
animation: none !important;
opacity: 0;
transform: none;
}
.s-03__clip--1,
.s-03__post--1 { opacity: 1; }
.s-03__frame {
animation: none !important;
transform: scale(var(--s03-z0)) translate(var(--s03-x0), var(--s03-y0));
}
/* вуаль нужна только на ходу; последний её кадр — opacity 1, поэтому
без явного сброса статичный кадр вышел бы затемнённым без причины */
.s-03__veil { animation: none !important; opacity: 0; }
.s-03__progress-fill { animation: none !important; transform: scaleX(0.42); }
.s-03__count-track {
animation: none !important;
transform: translateY(calc(var(--s03-row) * -1));
}
.s-03__heart { animation: none !important; transform: none; }
.s-03__rail-item--like::after { animation: none !important; opacity: 0; }
/* свечение остаётся в статической тени, просто перестаёт дышать */
.s-03__phone { animation: none !important; }
}
/* Проявление подписи на стыке сегментов. Мгновенная подмена читалась
как глитч: имя дёргалось, хотя человек в кадре менялся плавно. */
.s-03__meta.is-switching .s-03__handle,
.s-03__meta.is-switching .s-03__niche {
animation: s03-meta-in 0.42s ease both;
}
@keyframes s03-meta-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.s-03__meta.is-switching .s-03__handle,
.s-03__meta.is-switching .s-03__niche { animation: none; }
}
/* --- Адаптив: снизу вверх ---------------------------------------------------
Всё выше — телефонные значения. Здесь они дорастают до широкого экрана.
Блоки идут строго по возрастанию порога: правила равной силы, побеждает
последнее подошедшее. Пороги смещены на пиксел (601 вместо 600): при
max-width граница входила в узкий диапазон, при min-width должна войти
в широкий. -------------------------------------------------------------- */
@media (min-width: 601px) {
.s-03 {
padding-block: 96px;
}
.s-03__content {
gap: 56px;
}
.s-03__title {
font-size: 44px;
line-height: 52px;
letter-spacing: -1.2px;
}
.s-03__lead {
margin-bottom: 28px;
}
.s-03__note {
align-items: center;
}
.s-03__note img {
margin-top: 0;
}
}
@media (min-width: 901px) {
.s-03__content {
/* row задан явно: ниже 900 колонка встаёт столбиком, и без этой строки
на широком экране столбик было бы нечем отменить. */
flex-direction: row;
gap: 64px;
}
.s-03__text {
flex: 0 1 520px;
/* Значения по умолчанию, выписанные явно: в стопке колонка получает
свою ширину и потолок, и вернуть её к обычному потоку выше 900 можно
только тем, что здесь написано. */
width: auto;
max-width: none;
}
.s-03__title {
font-size: 56px;
line-height: 62px;
letter-spacing: -1.6px;
}
}
@media (min-width: 1281px) {
.s-03 {
padding-block: 120px;
}
.s-03__content {
gap: 80px;
}
.s-03__title {
font-size: 64px;
line-height: 70px;
letter-spacing: -2px;
}
}
/* ---------------------------------------------------------------
css/home/03b-marketplace-ads.css
--------------------------------------------------------------- */
/* ==========================================================================
tajiro — Home · 03b · Marketplace ads
Тёмный собрат секций 06–08. Первая версия была собрана по чужому макету
и потому читалась вставкой: значки-квадраты с описаниями вместо списка
галочек, свои радиусы, выдуманные товары градиентными квадратами, ни
номера, ни строки показателей.
Здесь взята анатомия «столпов»: крупный номер, плашка-надзаголовок,
заголовок, лид, список с зелёными галочками, ряд показателей, кнопка.
Раскладка, шаги ширины и брейкпоинты — те же, что у 06.
Секция была тёмной — и в этом была ошибка ритма: следом идёт «The Math»
с глобусом, которая тёмной быть обязана. Две тёмные подряд сливались в
одну полосу почти в две тысячи пикселей, и граница между ними не читалась.
Светлеть пришлось этой: у глобуса тёмный фон — часть самой картинки.
Тон кремовый: сверху белёсый маркетинг, снизу тёмный глобус — чередование
сходится. Все цвета переехали с «на тёмном» на обычные токены страницы,
и роли для этого выписаны локальными переменными: --s03b-soft, --s03b-faint,
--s03b-line, --s03b-green. Так видно, что чему соответствует, и следующая
перекраска правит четыре строки, а не двадцать шесть.
Глубина внутри секции осталась той же лесенкой, только вывернутой: раньше
каждая ступень была светлее подложки, теперь тоже светлее — крем, витрина,
плитка. Направление совпало, потому что и там и там ступень означает
«ближе к зрителю».
Мобильный первым: колонки в стопке. Ряд появляется с 901.
========================================================================== */
.s-03b {
/* Кремовый — тёплый якорь страницы. Сосед сверху белёсый, снизу тёмный. */
--s03b-bg: var(--c-bg);
--s03b-ink: var(--c-text); /* заголовок, значения показателей */
--s03b-muted: var(--c-text-body); /* базовый текст секции */
/* Роли, которые на тёмном брались из --c-*-on-dark. Выписаны переменными,
чтобы перекраска секции была правкой этого блока, а не всего файла. */
--s03b-soft: var(--c-text-body); /* галочки, подписи витрины */
--s03b-faint: var(--c-text-muted); /* мета, рубрики, строка поиска */
--s03b-line: var(--c-line);
--s03b-green: var(--c-green-text); /* зелёный на светлом, AA */
/* Витрина светлее фона, плитка светлее витрины: каждая ступень ближе к
зрителю. На тёмном лесенка шла теми же тремя шагами. */
--s03b-mkt: var(--c-bg-alt);
--s03b-tile: var(--c-surface);
padding-block: 64px;
background: var(--s03b-bg);
color: var(--s03b-muted);
}
/* --- Раскладка ------------------------------------------------------------ */
.s-03b__inner {
display: flex;
/* column выписан явно: ниже 900 колонки стоят столбиком, и снять это на
широком экране можно только правилом в брейкпоинте. */
flex-direction: column;
align-items: stretch;
justify-content: center;
gap: 44px;
}
/* --- Левая колонка -------------------------------------------------------- */
.s-03b__text {
display: flex;
max-width: 560px;
flex: none;
flex-direction: column;
align-items: flex-start;
gap: 28px;
width: 100%;
}
.s-03b__block {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
max-width: none;
}
/* Номер — как у столпов, но песок на тёмном тусклее золота: берём --c-sand */
.s-03b__numeral {
font-family: var(--f-display);
font-size: 56px;
font-weight: 600;
line-height: 1;
letter-spacing: -2px;
/* Золото, как у столпов 06 и 07. Песок здесь стоял только потому, что на
тёмном фоне золото гасло; на креме гаснет уже песок. */
color: var(--c-gold);
}
/* Плашка надзаголовка. У светлых столпов она зелёный тинт на кремовом;
на тёмном тот же приём даёт грязь, поэтому тинт светлее подложки. */
.s-03b__label {
align-self: flex-start;
padding: 5px 14px;
border-radius: var(--r-pill);
background: rgba(61, 143, 99, 0.12);
letter-spacing: 1.44px;
line-height: 16px;
color: var(--s03b-green);
}
.s-03b__title {
/* НЕ БОЛЬШЕ ДВУХ СТРОК на телефоне (правило сайта). На 320–375 было три строки.
Кегль растёт с колонкой (ширина экрана минус поля 40) и упирается в
прежний; 0.087 — отношение кегля к колонке, при котором заголовок ровно
встаёт в две строки, с запасом 3 %. Проверено в эмуляции телефона на
320–600 (17.09.2026). Интерлиньяж и разрядка — долями кегля. */
color: var(--s03b-ink);
}
.s-03b__lead {
color: var(--s03b-muted);
}
/* «Conditions apply» рядом с кредитом на рекламу — ссылка на условия.
Секция кремовая, акцент — зелёный текста. */
.s-03b__lead-link {
color: var(--c-green-text);
text-decoration: underline;
text-underline-offset: 3px;
}
/* --- Список фич ----------------------------------------------------------- */
.s-03b__features {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
}
.s-03b__feature {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 15px;
line-height: 23px;
color: var(--s03b-soft);
}
/* Галочка выровнена по верху строки, как у столпов, а не по центру */
.s-03b__check {
flex: none;
width: 16px;
height: 16px;
}
/* --- Кнопка --------------------------------------------------------------- */
.s-03b__actions {
display: flex;
}
.s-03b__cta img {
flex: none;
transition: transform 0.18s ease;
}
.s-03b__cta:hover img { transform: translateX(3px); }
/* --- Правая колонка: витрина ---------------------------------------------- */
/* Плашка кампании свисает за нижний край витрины, поэтому запас снизу,
а не overflow: hidden. */
.s-03b__visual {
position: relative;
width: 100%;
/* Плашка кампании выступает за нижний край панели — запас под неё */
padding-bottom: 56px;
}
.s-03b__mkt {
/* Снизу запас под плашку кампании: она ложится на пустое поле панели,
а не на цены нижнего ряда, как было. */
padding: 16px 16px 76px;
border: 1px solid var(--s03b-line);
border-radius: var(--r-card);
background: var(--s03b-mkt);
box-shadow: 0 20px 48px rgba(43, 38, 33, 0.10);
}
.s-03b__mkt-bar {
display: flex;
align-items: center;
gap: 12px;
justify-content: space-between;
margin-bottom: 14px;
}
.s-03b__mkt-name {
font-size: 11px;
font-weight: 700;
letter-spacing: 1.4px;
color: var(--s03b-soft);
}
/* Поисковая строка — картинка строки, а не поле ввода: кликать нечего */
.s-03b__mkt-search {
flex: 1 1 auto;
max-width: 180px;
padding: 8px 14px;
border: 1px solid var(--s03b-line);
border-radius: var(--r-pill);
font-size: 12px;
line-height: 16px;
color: var(--s03b-faint);
/* Одна строка с многоточием: на 320 подпись переносилась и капсула
превращалась в двухстрочный овал. */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 360px) {
.s-03b__mkt-search { font-size: 11px; padding-inline: 10px; }
}
/* На 320 названия плиток в две строки, панель выше, и плашка кампании
(наложение) закрывала цену нижнего ряда. Запас снизу уводит цену выше
плашки; плашка по-прежнему лежит наложением, но на пустом поле. */
@media (max-width: 360px) {
.s-03b__mkt { padding-bottom: 92px; }
}
.s-03b__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.s-03b__tile {
position: relative;
padding: 10px;
border: 1px solid transparent;
border-radius: var(--r-card);
background: var(--s03b-tile);
}
/* Обложка — снимок товара из того же набора, что в каталоге седьмой
секции: на всей странице товар показывают фотографией, а не заливкой. */
.s-03b__cv {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 11;
margin-bottom: 9px;
border-radius: 10px; /* как у миниатюр каталога */
object-fit: cover;
}
/* Рубрика приглушена у всех, кроме вашей плитки: шесть зелёных подписей
спорили между собой и съедали то самое выделение, ради которого блок. */
.s-03b__tile-cat {
margin: 0 0 2px;
font-size: 9px;
line-height: 14px;
font-weight: 700;
letter-spacing: 1px;
color: var(--s03b-faint);
}
.s-03b__tile--mine .s-03b__tile-cat { color: var(--s03b-green); }
.s-03b__tile-t {
display: block;
font-size: 12px;
line-height: 17px;
font-weight: 700;
color: var(--s03b-soft);
}
.s-03b__tile-p {
display: block;
margin-top: 2px;
font-size: 12px;
line-height: 17px;
color: var(--s03b-faint);
}
/* Соседи уходят на шаг назад: обложка притушена и обесцвечена. Размер и
место в сетке не трогаются — весь смысл в том, что товар стоит среди
других, а не вместо них. */
.s-03b__tile .s-03b__cv {
opacity: 0.62;
filter: saturate(0.72);
transition: opacity 0.2s ease, filter 0.2s ease;
}
/* Ваша плитка: обложка в полную силу, рамка ярче, зелёный ореол наружу
и лёгкий подъём. */
.s-03b__tile--mine {
border-color: rgba(61, 143, 99, 0.7);
background: var(--c-surface);
box-shadow: 0 0 0 4px rgba(61, 143, 99, 0.12),
0 14px 30px rgba(43, 38, 33, 0.14);
transform: translateY(-4px);
}
.s-03b__tile--mine .s-03b__cv {
opacity: 1;
filter: none;
}
.s-03b__tile--mine .s-03b__tile-t { color: var(--s03b-ink); }
.s-03b__chip {
position: absolute;
top: 17px;
left: 17px;
z-index: 1;
padding: 3px 8px;
border-radius: var(--r-pill);
background: rgba(26, 23, 20, 0.82);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.9px;
text-transform: uppercase;
color: var(--c-on-dark);
}
.s-03b__tile-mine {
display: inline-block;
margin-top: 6px;
padding: 2px 8px;
border-radius: var(--r-pill);
background: rgba(61, 143, 99, 0.14);
font-size: 10px;
line-height: 15px;
font-style: normal;
font-weight: 700;
letter-spacing: 0.4px;
color: var(--s03b-green);
}
/* --- Плашка кампании ------------------------------------------------------ */
/* Не часть витрины, а сообщение системы поверх неё. На тёмном её отделял
сам факт светлоты; на светлом отделяют кромка и тень. */
.s-03b__camp {
position: absolute;
right: 14px;
bottom: 0;
left: 14px;
padding: 14px 16px;
border: 1px solid var(--c-line-soft);
border-radius: var(--r-card);
background: var(--c-surface);
box-shadow: 0 16px 38px rgba(43, 38, 33, 0.16);
}
.s-03b__camp-k {
display: flex;
align-items: center;
gap: 7px;
margin: 0 0 6px;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.1px;
text-transform: uppercase;
color: var(--c-green-text);
}
.s-03b__camp-k i {
flex: none;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--c-green-bright);
box-shadow: 0 0 0 3px rgba(61, 143, 99, 0.18);
}
.s-03b__camp-t {
display: block;
font-size: 15px;
line-height: 21px;
color: var(--c-ink-surface-2);
}
.s-03b__camp-d {
display: block;
margin-top: 2px;
font-size: 12px;
line-height: 17px;
color: var(--c-text-muted);
}
.s-03b__camp-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 10px 0 0;
}
.s-03b__camp-chip {
padding: 4px 10px;
border: 1px solid var(--c-line-soft);
border-radius: var(--r-pill);
font-size: 11px;
line-height: 16px;
color: var(--c-text-body);
}
.s-03b__camp-chip b { font-weight: 700; }
.s-03b__camp-chip--credit {
border-color: transparent;
background: var(--c-green-mist);
color: var(--c-green-text);
}
/* --- Планшет -------------------------------------------------------------- */
@media (min-width: 601px) {
.s-03b { padding-block: 80px; }
.s-03b__numeral { font-size: 68px; letter-spacing: -2.4px; }
.s-03b__title {
}
.s-03b__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.s-03b__camp {
right: auto;
left: 24px;
width: 300px;
}
}
/* Шкала номеров столпов 68 / 80 / 96 на 601 / 901 / 1281 (см.
07-pillar-products.css): номер растёт вместе с соседями, а не с раскладкой
этого блока. */
@media (min-width: 901px) {
.s-03b__numeral {
font-size: 80px;
letter-spacing: -3px;
}
}
/* --- Две колонки ----------------------------------------------------------
ПОРОГ 1101, А НЕ 901. Текстовая колонка тут жёсткие 460, и всё, что
осталось, забирает макет маркетплейса. На 901 контейнеру достаётся 773,
макету — 269, а в нём сетка из трёх плиток: по 72 точки на плитку при
картинке 56 и подписи «PRODUCTIVITY». Читать это нельзя. На 1030 плитка
115 — всё ещё тесно.
С 1101 контейнер 973, макету достаётся 469, плитка 138 — столько же, что
и было задумано. Ниже порога блок остаётся в одну колонку, как на 768,
где макет получает всю ширину и плитка выходит 211. */
@media (min-width: 1101px) {
.s-03b { padding-block: 96px; }
.s-03b__inner {
flex-direction: row;
align-items: center;
}
.s-03b__text {
max-width: none;
width: 460px;
}
.s-03b__block { max-width: 480px; }
/* Колонка жёсткие 460 (см. выше), и при 48 «Reach more customers with
less effort.» ложился в три строки на всех ширинах с 1101. Две
строки держатся с 42.5 — здесь 41. */
.s-03b__title {
}
}
/* --- Широкий экран -------------------------------------------------------- */
@media (min-width: 1141px) {
.s-03b { padding-block: 120px; }
.s-03b__inner { gap: 88px; }
.s-03b__mkt { padding: 20px 20px 80px; }
.s-03b__grid { gap: 12px; }
}
/* --- Пункт с заголовком ---------------------------------------------------
В пункте теперь две строки: короткий заголовок и пояснение под ним.
Галочка выравнивается по первой строке, а не по середине блока. */
.s-03b__feature-body {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.s-03b__feature-t {
font-weight: 700;
color: var(--s03b-ink, var(--c-text));
}
.s-03b__feature-d {
color: var(--c-text-body);
}
@media (min-width: 1281px) {
.s-03b__numeral {
font-size: 96px;
letter-spacing: -3.8px;
}
}
/* ---------------------------------------------------------------
css/home/04-how-it-works.css
--------------------------------------------------------------- */
/* ==========================================================================
tajiro — Home · 04 · How it works
Структура взята из блока «Start with $0 investment» образца-макета и
целиком переложена на язык Tajiro: типографика на --f-display и
--f-body, зелень вместо мятного, песок вместо фиолетового, радиусы и
тени из общих токенов. Секция светлая, поэтому тёмная подложка сцены
из макета заменена кремовой — иначе посреди песочной страницы стоял бы
чёрный прямоугольник.
Что даёт эта структура против прежних трёх плиток в ряд: у последова-
тельности появляется направление. Ряд читается как три равноправных
ящика, вертикаль — как порядок. Активный шаг подчёркнут полосой,
которая заполняется за отведённое время и передаёт очередь дальше;
плашка на сцене идёт за ним.
Мобильный первым: одна колонка. Две появляются с 901.
========================================================================== */
.s-04 {
/* Приглушённый текст секции — между --c-text-body и --c-text-muted */
--s04-text-soft: #6e675c;
--s04-card-bg: #f7f2e8;
/* Сколько держится шаг до передачи очереди. В макете было 4.5s — здесь
тексты шагов длиннее на треть, и на 4.5 последняя строка не успевала
дочитаться. */
--s04-hold: 6s;
/* Белёсый, как у остальных светлых секций. Раньше секцию отделял от
кремовой полосы статистики белый блок AI-команды; он переехал вниз,
и две кремовые плоскости встали встык. Тёплый почти-белый я пробовал
до этого — разница с кремовым шесть единиц, на глаз её нет.
Статистику красить нельзя вовсе: она прозрачна затем, что под ней
доигрывает песочный холст первого экрана. */
background: var(--c-bg-plain);
position: relative;
isolation: isolate;
/* Тот же ритм, что у соседних секций: 64 на телефоне и до 120 на
широком экране. Задаётся здесь, потому что .section отступов не
несёт — каждая секция держит свои. */
padding-block: 64px;
}
.s-04::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
/* Пятна ослаблены и уведены в зелень: на кремовой подложке песочный
радиал при 0.55 читался теплом, на белой — рыжим пятном в углу.
Гирих оставлен, он даёт фактуру, но взят вдвое тише. */
background: radial-gradient(54% 46% at 16% 20%, rgba(212, 163, 115, 0.16) 0%, transparent 66%),
radial-gradient(48% 42% at 86% 76%, rgba(61, 143, 99, 0.12) 0%, transparent 64%),
url("../images/decor/girih-pattern.svg") center / 620px repeat;
opacity: 0.30;
}
/* --- Раскладка ------------------------------------------------------------ */
.s-04__wrap {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 44px;
align-items: center;
}
/* --- Шапка ---------------------------------------------------------------- */
/* В макете заголовок стоит в левой колонке, а не по центру над блоком —
вместе со списком он читается одним столбцом текста. */
.s-04__label {
display: flex;
align-items: center;
gap: 8px;
}
/* .rule по умолчанию 120px — здесь короткий штрих слева от надзаголовка */
.s-04 .rule.s-04__label-rule {
display: block;
flex: none;
width: 24px;
border-radius: 2px;
}
/* .kicker по умолчанию 12px/золотой — здесь крупнее и приглушённый */
.s-04 .kicker.s-04__label-text {
font-size: 12px;
line-height: 18px;
letter-spacing: 1.3px;
color: var(--c-green-text);
}
/* «$0» и слово после него — одна смысловая единица: браузер рвал строку
между ними, и «investment» оставалось одно на второй строке. */
.s-04__nobr { white-space: nowrap; }
.s-04__title em {
/* Выделение только цветом: курсив в общем правиле .h2 em, здесь он не
нужен. Заодно снимается оптический зазор — он компенсировал наклон,
а без наклона сдвигал слово вправо. */
font-style: normal;
}
.s-04__title {
/* Строки выравниваются по длине сами */
text-wrap: balance;
margin-top: 14px;
color: var(--c-ink-surface-2);
}
.s-04__lead {
max-width: 46ch;
margin-top: 14px;
color: var(--s04-text-soft);
}
/* --- Список шагов --------------------------------------------------------- */
.s-04__steps {
margin: 32px 0 0;
padding: 0;
list-style: none;
}
.s-04__step {
position: relative;
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
gap: 4px;
padding: 22px 0;
cursor: pointer;
outline: none;
}
/* Разделитель и дорожка прогресса — на одной линии по низу шага:
псевдоэлементы, чтобы не заводить лишнюю разметку. */
.s-04__step::before {
content: '';
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 1px;
background: var(--c-line-soft);
}
.s-04__step::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--c-green-bright);
}
.s-04__step.is-active::after {
animation: s04-fill var(--s04-hold) linear forwards;
}
/* Паузы по наведению здесь нет намеренно. В макете она была, но там
блок короче. Здесь курсор оказывается на списке ровно тогда, когда его
читают, и если очередь переключилась в этот момент, полоса замирала на
нулевой ширине — у активного шага не было линии вообще. Хуже того,
передача очереди привязана к концу этой же анимации, поэтому пауза
останавливала и её: список замирал до увода курсора. */
/* Старт не с нуля. При 567 px ширины и шести секундах полоса набегает
по 94 px в секунду: первые полсекунды это огрызок под цифрой, и
переключение читается как «ничего не произошло». Шесть процентов —
сразу видимая метка, дальше растёт как росла. */
@keyframes s04-fill {
from { width: 6%; }
to { width: 100%; }
}
.s-04__num {
padding-top: 3px;
font-family: var(--f-display);
font-size: 17px;
font-weight: 600;
color: var(--c-text-muted);
transition: color 0.3s;
}
.s-04__step.is-active .s-04__num { color: var(--c-green-text); }
.s-04__step-title {
margin: 0 0 6px;
font-size: 19px;
line-height: 26px;
letter-spacing: -0.2px;
color: var(--s04-text-soft);
transition: color 0.3s;
}
.s-04__step.is-active .s-04__step-title { color: var(--c-ink-surface-2); }
.s-04__step-text {
max-width: 46ch;
margin: 0;
font-size: 15px;
line-height: 24px;
color: var(--s04-text-soft);
}
.s-04__step:focus-visible .s-04__step-title {
text-decoration: underline;
text-decoration-color: var(--c-green-bright);
text-underline-offset: 4px;
}
/* --- Кнопка -------------------------------------------------------------- */
.s-04__actions {
display: flex;
margin-top: 36px;
}
.s-04__cta img {
flex: none;
transition: transform 0.18s ease;
}
.s-04__cta:hover img { transform: translateX(3px); }
/* --- Сцена ---------------------------------------------------------------- */
.s-04__scene {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 3;
border: 1px solid var(--c-line-soft);
border-radius: var(--r-card);
background:
radial-gradient(78% 62% at 30% 18%, rgba(212, 163, 115, 0.26) 0%, transparent 70%),
linear-gradient(158deg, #f9f4ec 0%, var(--s04-card-bg) 55%, #f1e9dc 100%);
box-shadow: var(--sh-card);
}
.s-04__shot {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
/* height задан здесь, поэтому атрибут height у вёрстку не ломает.
Там, где высоту считает aspect-ratio, атрибут обязателен вместе с
height: auto — иначе он перебивает пропорцию. */
object-fit: cover;
object-position: 50% 45%;
}
.s-04__card {
position: absolute;
top: 18px;
left: 18px;
display: flex;
gap: 10px;
align-items: flex-start;
max-width: calc(100% - 36px);
margin: 0;
/* Боковые поля шире вертикальных: у капсулы торцы круглые, и при равных
полях текст подходит к закруглению вплотную. */
padding: 11px 22px;
border: 1px solid var(--c-line-soft);
border-radius: var(--r-pill);
/* Плотнее прежних 0.86: плашка лежит на снимке, а в левом верхнем углу
кадра окно — светлое на светлом читалось одной кромкой. */
background: rgba(251, 248, 243, 0.94);
box-shadow: 0 1px 2px rgba(43, 38, 33, 0.05), 0 8px 20px rgba(43, 38, 33, 0.07);
transition: opacity 0.28s ease, transform 0.28s ease;
}
.s-04__card-dot {
flex: none;
margin-top: 5px; /* к первой строке, а не к середине блока */
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--c-green-bright);
box-shadow: 0 0 0 4px rgba(61, 143, 99, 0.16);
}
/* Две строки в столбик: точка стоит рядом с обеими, поэтому текст
уходит в отдельную обёртку, а не лежит рядом с точкой напрямую. */
.s-04__card-body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.s-04__card-d {
font-family: var(--f-body);
font-size: 12px;
line-height: 17px;
color: var(--c-text-muted);
}
.s-04__card-t {
font-family: var(--f-body);
font-size: 13px;
font-weight: 700;
line-height: 18px;
color: var(--c-ink-surface-2);
}
/* Момент подмены: плашка уходит вниз и возвращается с новым заголовком */
.s-04__card.is-swapping {
opacity: 0;
transform: translateY(6px);
}
/* --- Планшет -------------------------------------------------------------- */
@media (min-width: 601px) {
.s-04 { padding-block: 80px; }
.s-04__title {
}
.s-04__step {
grid-template-columns: 44px minmax(0, 1fr);
padding: 26px 0;
}
.s-04__step-title { font-size: 21px; line-height: 28px; }
.s-04__step-text { font-size: 16px; line-height: 26px; }
}
/* --- Две колонки ---------------------------------------------------------- */
@media (min-width: 901px) {
.s-04 { padding-block: 96px; }
.s-04__wrap {
grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
gap: 72px;
}
/* Плашка ужата и поднята, а сцена на 901–1140 выше: снимок 1100×1122
при 1 : 1.02 не кадрируется, макушка на ~19 % высоты сцены, и на
узкой сцене плашка (18 + 60) ложилась на волосы. При 5 : 6 снимок
встаёт по высоте, голова опускается, по бокам срезается ~9 %. */
.s-04__scene { aspect-ratio: 5 / 6; }
.s-04__card { top: 12px; left: 12px; padding: 8px 18px; }
}
/* --- Широкий экран -------------------------------------------------------- */
@media (min-width: 1141px) {
.s-04 { padding-block: 120px; }
.s-04__wrap { gap: 88px; }
.s-04__scene { aspect-ratio: 1 / 1.02; }
.s-04__title {
}
}
/* --- Без движения --------------------------------------------------------- */
/* Полоса не бежит, но активный шаг всё равно должен быть отмечен —
поэтому не «animation: none» в пустоту, а сразу полная ширина. */
@media (prefers-reduced-motion: reduce) {
.s-04__step.is-active::after {
width: 100%;
animation: none;
}
.s-04__card { transition: none; }
}
/* --- Телефон: плашка под кадром -------------------------------------------
Разбор — в scratchpad/s04card.mjs. Коротко: на 4:3 левый верхний угол
занят лицом, свободного угла в кадре нет, поэтому плашка уходит из кадра
вниз и становится вторым этажом коробки. */
/* До 700, а не 600: на 601–700 плашка «Your store is live» в наложении
ложилась на макушку. Здесь снимок и плашка — двумя этажами. */
@media (max-width: 700px) {
.s-04__scene {
display: flex;
flex-direction: column;
/* Пропорцию держит теперь снимок: коробка выше него на плашку. */
aspect-ratio: auto;
}
.s-04__shot {
position: static;
height: auto;
aspect-ratio: 4 / 3;
}
.s-04__card {
position: static;
align-items: center;
/* Плашка во всю ширину коробки: капсула шириной с кадр читалась бы
кнопкой. Здесь это полоса подписи, и углы у неё общие с коробкой. */
max-width: none;
min-height: 78px;
padding: 12px 16px;
border: 0;
border-top: 1px solid var(--c-line-soft);
border-radius: 0;
background: #fbf8f3;
box-shadow: none;
}
.s-04__card-dot { margin-top: 0; }
}
/* ---------------------------------------------------------------
css/shared/what-you-get.css
--------------------------------------------------------------- */
/* ==========================================================================
05 · What you get — центрированный интро-блок на тёмной плашке
Источник: Figma HoPojxNiFElmltha1NOl3N, node 511:369
========================================================================== */
.s-05 {
/* Плашка темнее --c-ink-surface-2, текст мягче --c-on-dark: точных токенов нет */
--s05-bg: #1a1714;
--s05-title: #f2ede5;
--s05-lead: #d9d1c7;
padding-block: 64px;
background: var(--s05-bg);
color: var(--s05-lead);
}
.s-05__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 22px;
text-align: center;
}
/* --- Надзаголовок: штрих + WHAT YOU GET ----------------------------------- */
.s-05__kicker {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
line-height: 18px;
letter-spacing: 1.1px;
color: var(--c-green-on-dark);
}
.s-05__kicker-rule {
flex: none;
width: 18px;
border-radius: 2px;
}
/* --- Заголовок ------------------------------------------------------------ */
.s-05__title {
/* НЕ БОЛЬШЕ ДВУХ СТРОК на телефоне (правило сайта). На 320–344 было три строки.
Кегль растёт с колонкой (ширина экрана минус поля 40) и упирается в
прежний; 0.098 — отношение кегля к колонке, при котором заголовок ровно
встаёт в две строки, с запасом 3 %. Проверено в эмуляции телефона на
320–600 (17.09.2026). Интерлиньяж и разрядка — долями кегля. */
color: var(--s05-title);
text-wrap: balance;
}
/* --- Подзаголовок --------------------------------------------------------- */
/* 720, а не прежние 640. Лид здесь длинный — 149 знаков, — и одной строкой
при кегле 20 он занимает 1268 px. В 640 не хватало ровно пяти пикселей:
перенос складывается в две строки начиная с 645, а до того уходил в три.
720 — те же две строки с запасом, разрыв ложится после «the whole»,
и половины выходят почти равными: 76 и 73 знака. */
.s-05__lead {
max-width: 720px;
color: var(--s05-lead);
text-wrap: pretty;
}
/* --- Финальный штрих ------------------------------------------------------ */
.s-05__rule {
flex: none;
width: 60px;
border-radius: 2px;
}
/* --- Оглавление к столпам ----------------------------------------------------
Четыре пункта, которые идут дальше отдельными секциями: те же номера, те
же слова.
Подписи держатся в 56 знаках и короче. Колонка узкая — при кегле 14 на
строку приходится 176 px, то есть примерно 28 знаков, и всё длиннее
уходит в третью строку. Дописывая сюда текст, считайте знаки. Появляются один раз, лесенкой, через общую систему
(`.reveal-set` в 00-reveal.css) — зацикливать оглавление нельзя, его
читают, а петля половину времени держала бы список неполным.
Волосяные связи между колонками статичны: это структура, а не движение. */
.s-05__index {
display: grid;
grid-template-columns: minmax(0, 1fr);
width: 100%;
max-width: 420px;
margin-top: 20px;
text-align: left;
}
.s-05__item { position: relative; }
/* Связь между колонками — три пункта читаются как одно оглавление */
.s-05__item + .s-05__item::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: auto;
left: 0;
width: auto;
height: 1px;
background: rgba(212, 163, 115, 0.34);
}
.s-05__link {
display: flex;
align-items: flex-start;
gap: 16px;
height: 100%;
padding: 14px 0;
transition: transform 0.22s ease;
}
.s-05__link:hover { transform: translateY(-3px); }
/* Номер в колонке постоянной ширины: цифры пропорциональные, «01» уже
«03», и подписи в соседних рядах стояли не на одной оси (на 3–7). */
.s-05__num {
flex: none;
min-width: 1.25em;
font-family: var(--f-display);
font-size: 32px;
font-weight: 600;
line-height: 1;
letter-spacing: -1px;
color: var(--c-sand);
}
.s-05__item-body {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.s-05__item-title {
font-size: 17px;
font-weight: 800;
line-height: 23px;
letter-spacing: -0.2px;
color: var(--s05-title);
}
.s-05__item-text {
font-size: 13px;
line-height: 20px;
color: var(--s05-lead);
text-wrap: pretty;
}
/* --- Адаптив -------------------------------------------------------------- */
/* --- Адаптив: снизу вверх ---------------------------------------------------
Всё выше — телефонные значения. Здесь они дорастают до широкого экрана.
Блоки идут строго по возрастанию порога: правила равной силы, побеждает
последнее подошедшее. Пороги смещены на пиксел (601 вместо 600): при
max-width граница входила в узкий диапазон, при min-width должна войти
в широкий. -------------------------------------------------------------- */
@media (min-width: 601px) {
.s-05 {
padding-block: 88px;
}
.s-05__inner {
gap: 26px;
}
.s-05__kicker {
font-size: 12px;
letter-spacing: 1.3px;
}
.s-05__kicker-rule {
width: 24px;
}
.s-05__title {
}
/* Две колонки, а не три: пунктов стало четыре, и 2x2 делится ровно.
Тремя они вставали 3+1, и одинокий четвёртый читался обрубком. */
.s-05__index {
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: 16px; /* ряды 2×2 и их черты не слипаются */
max-width: 720px;
}
/* Вертикальная черта только между соседями ОДНОГО ряда: у первого в ряду
её быть не должно, иначе она повисает у левого края сетки. */
.s-05__item + .s-05__item::before {
top: 4px;
right: auto;
bottom: 4px;
width: 1px;
height: auto;
}
.s-05__item:nth-child(odd)::before {
display: none;
}
.s-05__link {
gap: 14px;
padding: 6px 18px;
}
.s-05__num {
font-size: 34px;
letter-spacing: -1.4px;
}
}
@media (min-width: 901px) {
/* ЧЕТЫРЁХ КОЛОНОК ЗДЕСЬ БОЛЬШЕ НЕТ — они переехали на 1401, ниже.
Стояли с 901 и разваливали текст. Арифметика: на подпись остаётся
ширина колонки минус поля ссылки (64), минус номер (40) и зазор (18).
На экране в 1024 колонка выходит 220, подписи достаётся 98 — это
десять-четырнадцать знаков в строке, слова по одному в строку
столбиком. На 1281 колонка 260, подписи 138 — всё ещё шестнадцать
знаков. Комментарий к блоку обещает двадцать восемь, и они набираются
только при колонке от 298, то есть при экране от 1432.
До этого порога остаются две колонки со ступени 601: там подпись
получает больше четырёхсот точек и читается абзацем, а не столбиком. */
.s-05 {
padding-block: 104px;
}
.s-05__inner {
gap: 32px;
}
.s-05__title {
}
.s-05__link {
gap: 18px;
padding: 6px 32px;
}
.s-05__num {
font-size: 40px;
}
.s-05__item-title {
font-size: 19px;
line-height: 25px;
}
.s-05__item-text {
font-size: 14px;
line-height: 22px;
}
}
@media (min-width: 1281px) {
.s-05 {
padding-block: 120px;
}
.s-05__title {
}
}
/* Четыре в один ряд — оглавление совпадает со столпами один к одному.
Порог 1401, а не 901: только здесь колонка дорастает до 298 точек, при
которых подписи достаётся 176 — те самые двадцать восемь знаков в
строке, на которые рассчитан текст блока. Разбор — в ступени 901 выше. */
@media (min-width: 1401px) {
.s-05__index {
grid-template-columns: repeat(4, minmax(0, 1fr));
max-width: 1200px;
}
/* Ряд снова один, значит черта нужна у всех, кроме первого. */
.s-05__item:nth-child(odd)::before {
display: block;
}
.s-05__item:first-child::before {
display: none;
}
}
/* ---------------------------------------------------------------
css/shared/pillar-store.css
--------------------------------------------------------------- */
/* ==========================================================================
tajiro — Home · 06 · Pillar 01 — Your store
Figma: HoPojxNiFElmltha1NOl3N, node 511:376
Текстовая колонка + макет телефона с плавающими карточками-метриками.
========================================================================== */
.s-06 {
overflow: hidden; /* сияние вокруг телефона шире секции — режем по её краю */
--s06-ink: var(--c-ink-surface-2); /* заголовок, цифры метрик */
--s06-muted: #6e675c; /* лид, подписи метрик */
--s06-glow: #c9a96a; /* галочки */
padding-block: var(--gutter);
background: var(--c-bg-plain);
}
.s-06__inner {
display: flex;
/* row выписан явно: ниже 900 колонки встают столбиком, и снять это на
широком экране можно только тем, что написано здесь. */
flex-direction: column;
align-items: stretch;
justify-content: center;
gap: 44px;
}
/* --- Левая колонка -------------------------------------------------------- */
.s-06__text {
display: flex;
/* Потолок ширины по умолчанию снят: в стопке колонка получает свой,
и вернуть её к обычной ширине выше 900 можно только этой строкой. */
max-width: 560px;
flex: none;
flex-direction: column;
align-items: flex-start;
gap: 28px;
width: 100%;
}
.s-06__block {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
max-width: none;
}
.s-06__numeral {
font-family: var(--f-display);
font-size: 56px;
font-weight: 600;
line-height: 1;
letter-spacing: -2px;
color: var(--c-gold);
}
/* .kicker с пилюлей: другой цвет и трекинг, чем у базового надзаголовка */
.s-06__label {
align-self: flex-start;
padding: 5px 14px;
border-radius: var(--r-pill);
/* Подложка зелёная, а не песочная. Цвет текста тут ни при чём: он и был
--c-green-text, тот же #2f6b4a, что у цены в фокусе ленты. Коричневой
мульку делала песочная плашка — на 12 px с трекингом 1.44 буквы тонкие,
и тёплая подложка перекрашивала их на глаз. Зелёный тинт в 10 % даёт
контраст 4.91:1 при пороге 4.5, запас есть. */
background: color-mix(in srgb, var(--c-green) 10%, transparent);
letter-spacing: 1.44px;
line-height: 16px;
color: var(--c-green-text);
}
.s-06__title {
/* НЕ БОЛЬШЕ ДВУХ СТРОК на телефоне (правило сайта). До 393 было три строки.
Кегль растёт с колонкой (ширина экрана минус поля 40) и упирается в
прежний; 0.080 — отношение кегля к колонке, при котором заголовок ровно
встаёт в две строки, с запасом 3 %. Проверено в эмуляции телефона на
320–600 (17.09.2026). Интерлиньяж и разрядка — долями кегля. */
color: var(--s06-ink);
}
.s-06__lead {
color: var(--s06-muted);
}
/* --- Список фич ----------------------------------------------------------- */
.s-06__features {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
}
.s-06__feature {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 15px;
line-height: 23px;
color: var(--c-text-muted);
}
/* В макете иконка выровнена по верху строки (items-start), не по центру */
.s-06__check {
flex: none;
width: 16px;
height: 16px;
}
/* --- Ряд показателей -------------------------------------------------------
Геометрия и типографика общие для 06, 07 и 08 — заданы один раз в
00-base.css. Здесь только цвета. */
.s-06__stat-value { color: var(--s06-ink); }
.s-06__stat-label { color: var(--s06-muted); }
/* --- Кнопка ----------------------------------------------------------------
Оформление общее для страницы — .btn .btn--primary, стрелка отъезжает на
наведении ровно как в 03b, 04 и 08.
-------------------------------------------------------------------------- */
.s-06__actions {
display: flex;
}
.s-06__cta img {
flex: none;
transition: transform 0.18s ease;
}
.s-06__cta:hover img { transform: translateX(3px); }
/* --- Правая колонка: сцена с телефоном ------------------------------------ */
.s-06__visual {
display: flex;
/* Ниже 600 сцене добавляют боковое поле; ноль здесь — то, чем его снять. */
padding-inline: 18px;
flex: 1 1 auto;
align-items: center;
justify-content: center;
min-width: 0;
min-height: 0;
}
.s-06__stage {
position: relative;
width: min(280px, 100%);
margin-right: 0; /* сдвиг влево, как в макете (phone left 140 из 600) */
}
.s-06__phone {
position: relative;
width: 100%;
aspect-ratio: 280 / 572;
border-radius: 40px;
background: #080808;
/* Базовое свечение живёт в box-shadow, анимация только качает его силу —
при отключённой анимации подсветка остаётся, просто перестаёт дышать. */
box-shadow: 0 0 0 1px rgba(212, 163, 115, 0.22),
0 0 30px -8px rgba(212, 163, 115, 0.40),
0 34px 70px -24px rgba(43, 38, 33, 0.50);
animation: s06-glow 6s ease-in-out infinite;
}
@keyframes s06-glow {
50% {
box-shadow:
0 0 0 1px rgba(212, 163, 115, 0.45),
0 0 58px -4px rgba(212, 163, 115, 0.65),
0 34px 70px -24px rgba(43, 38, 33, 0.50);
}
}
.s-06__screen {
position: absolute;
inset: 4px;
border-radius: 36px;
overflow: hidden;
}
.s-06__shot {
width: 100%;
height: 100%;
object-fit: cover;
}
.s-06__scrim {
position: absolute;
inset: 0;
/* Скрим отпущен по всей высоте, и особенно снизу: 0.92 превращали нижнюю
четверть экрана в чёрную полосу. С новым дневным кадром это топило всю
витрину — средняя яркость экрана выходила 106 при яркости самого фото
184, то есть скрим съедал две трети света.
Теперь экран держится около 134. Низ больше не затемняем ради ленты
заказов: плашка получила собственное тёмное стекло и читается на любом
фоне сама, без помощи скрима. */
background: linear-gradient(180deg,
rgba(0, 0, 0, 0.40) 0%,
rgba(0, 0, 0, 0.05) 26%,
rgba(0, 0, 0, 0.30) 56%,
rgba(0, 0, 0, 0.45) 100%);
}
/* Витрина внутри экрана */
.s-06__store-hero {
position: absolute;
/* Приподнят с 53.2%: под кнопкой должны помещаться две плашки заказов,
а они занимают ровно столько, сколько было свободного низа — зазор
выходил минус два пикселя, стопка наезжала на кнопку. */
top: 50.2%;
left: 8.1%;
right: 8.1%;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-align: center;
}
.s-06__store-title {
font-size: 26px;
font-weight: 800;
line-height: 30px;
letter-spacing: -0.5px;
color: var(--c-on-dark);
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}
.s-06__store-sub {
font-size: 11px;
line-height: 16px;
/* По той же причине, что и логотип: приглушённый бежевый на светлом кадре
не отделялся от фона. Здесь белый с прозрачностью — тише заголовка, но
всё ещё явно светлее подложки. */
color: rgba(251, 248, 243, 0.85);
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}
.s-06__store-cta {
padding: 10px 24px;
border-radius: 24px;
background: var(--c-surface);
font-size: 10px;
font-weight: 700;
line-height: 12px;
letter-spacing: 1.5px;
white-space: nowrap;
color: #0e0e0e;
}
/* Тост «новый заказ» поверх экрана */
/* Обёртка прижата к низу экрана, а не отсчитана сверху: плашки копятся в
стопку, и растёт она вверх — ниже места нет, там край телефона. */
.s-06__toasts {
position: absolute;
/* Ниже нельзя: у экрана скругление 44 px, и на отступе меньше 14 px
угол начинает срезать нижние края плашки. */
bottom: 3.2%;
left: 4.4%;
right: 4.4%;
}
.s-06__toast {
position: absolute;
left: 0;
right: 0;
bottom: 0;
/* Место в стопке задаёт --y: у свежей плашки ноль, каждая следующая
поднята на свою высоту плюс зазор. Считает его скрипт: высота плашки
зависит от содержимого, в стилях её не знать.
Переход по transform, а не по top: перекладывать страницу на каждом
кадре ради сдвига на полсотни пикселей незачем. */
transform: translateY(var(--y, 0px));
transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
display: flex;
align-items: center;
gap: 9px;
/* Плашка ужата: две штуки в стопке должны уместиться под кнопкой
витрины, а на прежних 54 px высоты они туда не влезали. */
padding: 8px 12px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 14px;
/* Тёмное стекло, а не светлое. Светлое работало только потому, что скрим
выжигал низ экрана в чёрный; на дневном кадре светлая плашка со светлым
текстом растворялась в светлом камне. Теперь плашка держит контраст
сама и не зависит от того, что под ней. */
/* Стекло чуть плотнее (0.5 -> 0.56): мелкий текст на полупрозрачной
подложке ловит рябь фотографии под собой и от этого мылится. */
background: rgba(18, 15, 12, 0.56);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
color: var(--c-on-dark);
}
/* Плашку создаёт и убирает скрипт — своего цикла у неё нет. Прежние четыре
карточки крутились по кругу с зашитыми задержками, и заказ в них ничего
не значил: выручка рядом жила отдельной анимацией. */
.s-06__toast {
animation: s06-toast-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Пока идёт въезд, анимация перебивает базовый transform, и подъём по стопке
не сработал бы. Поэтому, как только въезд закончился, скрипт вешает этот
класс и анимация снимается — дальше место в стопке держит переход. */
.s-06__toast.is-settled { animation: none; }
/* Идёт после is-settled: при одинаковой силе селекторов побеждает последний,
иначе уход не проигрался бы. */
.s-06__toast.is-leaving {
animation: s06-toast-out 0.4s ease both;
}
/* Окна соседних карточек слегка перекрываются: на стыке идёт перекрёстное
затухание, а не пустой экран (шаг 25%, видимость 2–23%, уход к 26%). */
/* Въезд и уход отсчитываются от места в стопке, а не от нуля: плашка должна
приезжать на свою полку, а не на дно. */
@keyframes s06-toast-in {
/* Разбег 9 px, а не 14: на четырнадцати плашка на миг заходила в
скругление нижнего угла экрана и подрезалась на въезде. */
from { opacity: 0; transform: translateY(calc(var(--y, 0px) + 9px)) scale(0.96); }
to { opacity: 1; transform: translateY(var(--y, 0px)) scale(1); }
}
@keyframes s06-toast-out {
to { opacity: 0; transform: translateY(calc(var(--y, 0px) - 10px)); }
}
.s-06__toast-icon {
display: flex;
flex: none;
align-items: center;
justify-content: center;
/* Значок и задаёт высоту плашки: текст рядом ниже него. */
width: 28px;
height: 28px;
border-radius: 9px;
background: rgba(201, 169, 106, 0.22);
}
.s-06__toast-copy {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.s-06__toast-title {
/* Без переноса: на длинных городах вроде Abu Dhabi строка ломалась
надвое, плашка становилась выше остальных, и стопка лезла на кнопку
витрины. Одинаковая высота у всех плашек тут не косметика, а условие. */
overflow: hidden;
font-size: 10.5px;
font-weight: 700;
line-height: 13px;
white-space: nowrap;
text-overflow: ellipsis;
}
.s-06__toast-sub {
/* Было 8 px — на таком кегле название товара уже не читается, буквы
сливаются в серую полосу. Место под прибавку есть: высоту плашки задаёт
значок в 28 px, а две строки текста занимали 24.
Цвет не трогаем в сторону приглушения: подпись и так была почти белой,
нечитаемой её делал размер. Иерархию с заголовком держим весом и
кеглем, а не блёклостью. */
font-size: 9.5px;
font-weight: 500;
line-height: 13px;
color: rgba(251, 248, 243, 0.85);
}
/* Время заказа. Набрано мельче и тише заголовка: это служебная пометка,
а не то, ради чего плашку читают. Кегль тот же, что у названия товара, —
иначе строка справа перетягивала бы на себя внимание, как перетягивала
сумма, стоявшая здесь раньше золотым полужирным. */
.s-06__toast-time {
flex: none;
font-size: 9.5px;
font-weight: 500;
line-height: 13px;
white-space: nowrap;
color: rgba(251, 248, 243, 0.55);
}
/* --- Плавающие карточки-метрики ------------------------------------------- */
.s-06__float {
position: absolute;
display: none;
flex-direction: column;
gap: 2px;
padding: 10px 12px;
border: 1px solid rgba(255, 255, 255, 0.75);
border-radius: 12px;
background: rgba(255, 255, 255, 0.44);
box-shadow: 0 10px 30px rgba(43, 38, 33, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.75);
white-space: nowrap;
}
.s-06__float-label {
font-size: 10px;
font-weight: 700;
line-height: 14px;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--s06-muted);
}
/* Точка перед подписью: показывает, что плашка про живое состояние */
.s-06__float-dot {
display: inline-block;
width: 6px;
height: 6px;
margin-right: 7px;
box-shadow: 0 0 8px rgba(61, 143, 99, 0.55);
border-radius: 50%;
background: var(--c-green-bright);
vertical-align: middle;
}
.s-06__float-body {
display: flex;
flex-direction: column;
gap: 2px;
margin: 5px 0 0;
}
.s-06__float-row {
display: flex;
align-items: center;
gap: 8px;
}
.s-06__float-value {
font-family: var(--f-display);
font-size: 18px;
font-weight: 600;
line-height: 22px;
letter-spacing: -0.4px;
color: var(--c-ink-surface-2);
}
/* Счётчик заказов: лента цифр едет на одну строку с каждым заказом */
.s-06__float { animation: s06-drift 7s ease-in-out infinite; }
.s-06__float--rating { animation-duration: 8.5s; animation-delay: -2s; }
.s-06__float--orders { animation-duration: 9.5s; animation-delay: -4s; }
@keyframes s06-drift {
50% { transform: translateY(-6px); }
}
/* Отступ задан от корпуса телефона, а не долей его ширины.
Раньше стояло left: -50% / -47.1%: это позиция ЛЕВОГО края плашки, а
зазор до телефона получался разностью с её собственной шириной. Плашки
разной ширины — и зазоры вышли 3px, 15px и минус 22px, то есть «Orders»
заезжала под корпус. Теперь left/right отсчитывается от ближней грани, и
зазор одинаков независимо от того, насколько длинная в плашке цифра.
56px — та же дистанция, что на образца (там 60–80px при том же корпусе). */
.s-06__float { --s06-gap: 28px; }
/* Противоположная сторона у каждой плашки погашена явно: на узком экране
они перевешиваются на другой бок, и без этих auto прежняя привязка
осталась бы вместе с новой. */
.s-06__float--catalog { top: 13%; right: calc(100% + var(--s06-gap)); left: -16px; }
.s-06__float--rating { top: 29%; left: auto; right: -16px; }
.s-06__float--orders { top: 40%; right: calc(100% + var(--s06-gap)); left: -16px; }
/* Размер подписи внутри плашки: на телефоне 11/15, с 601 — 12/16. */
.s-06__float-note { font-size: 11px; line-height: 15px; }
/* --- Адаптив -------------------------------------------------------------- */
/* --- Уважение к prefers-reduced-motion ------------------------------------
Сброс в 00-base.css схлопывает анимации в последний кадр. У карточек
заказов это opacity: 0 — без этого блока лента исчезла бы целиком.
Оставляем статичную первую карточку, свечение и счётчик на первом значении. */
@media (prefers-reduced-motion: reduce) {
/* Плашка остаётся видимой, просто без выезда: скрипт всё равно создаёт
её и убирает, и прятать её тут значило бы показывать пустой экран. */
.s-06__toast {
animation: none !important;
transform: none;
}
.s-06__float,
.s-06__phone {
animation: none !important;
transform: none;
}
}
/* --- Сцена вокруг телефона -------------------------------------------------
Портирована с образца (pv-aurora / pv-rays / pv-orbit / pv-particle /
pv-float-card). До неё телефон стоял в пустоте, и блок читался плоским —
ровно то, на что была правка.
Слои идут от дальнего к ближнему: сияние → лучи → кольца → орбиты →
пылинки → плашки. Телефон стоит над всем этим на z-index: 3.
Всё, что двигается, собрано на transform и opacity: сцена крутится
постоянно, и любое свойство, дёргающее раскладку, тут стоило бы кадров.
-------------------------------------------------------------------------- */
.s-06__stage { position: relative; }
.s-06__phone { position: relative; z-index: 3; }
/* --- Сияние --- */
.s-06__aurora {
position: absolute;
z-index: 0;
inset: -12% -18%;
/* Плотность поднята: на кремовом фоне прежние 0.28/0.22 после блюра
не читались вовсе — сцена выглядела пустой. */
background: radial-gradient(ellipse 46% 38% at 32% 30%, rgba(61, 143, 99, 0.42) 0%, transparent 70%),
radial-gradient(ellipse 40% 34% at 70% 68%, rgba(212, 163, 115, 0.34) 0%, transparent 70%);
filter: blur(46px);
animation: s06-aurora 14s ease-in-out infinite;
}
@keyframes s06-aurora {
0%, 100% { transform: scale(1) translate(0, 0); opacity: 0.9; }
50% { transform: scale(1.08) translate(2%, -2%); opacity: 1; }
}
/* --- Кольца-импульсы ---
Расходятся из центра и гаснут. Три штуки с разбежкой в треть такта —
получается непрерывная волна, а не три синхронных вспышки. */
.s-06__rings { position: absolute; z-index: 0; inset: 0; }
.s-06__ring {
position: absolute;
top: 50%;
left: 50%;
width: 46%;
aspect-ratio: 1;
border: 1px solid rgba(61, 143, 99, 0.30);
border-radius: 50%;
transform: translate(-50%, -50%);
animation: s06-pulse 6s ease-out infinite;
}
.s-06__ring--2 { animation-delay: 2s; }
.s-06__ring--3 { animation-delay: 4s; }
@keyframes s06-pulse {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
15% { opacity: 0.85; }
100% { opacity: 0; transform: translate(-50%, -50%) scale(2.1); }
}
/* --- Орбиты ---
Наклонённые кольца с точками на ободе. Точка держится за счёт вращения
родителя, а не собственной анимации: так их фазы никогда не разъедутся.
Контр-вращение на самой точке гасит её собственный поворот. */
.s-06__orbits { position: absolute; z-index: 0; inset: 0; }
.s-06__orbit {
position: absolute;
top: 50%;
left: 50%;
border: 1px solid rgba(61, 143, 99, 0.16);
border-radius: 50%;
transform: translate(-50%, -50%) rotateX(74deg);
}
.s-06__orbit i {
position: absolute;
top: 50%;
left: 50%;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--c-green-bright);
box-shadow: 0 0 10px rgba(61, 143, 99, 0.9);
}
.s-06__orbit--1 { --o: 39%; width: 78%; aspect-ratio: 1; animation: s06-orbit 22s linear infinite; }
.s-06__orbit--2 { --o: 48%; width: 96%; aspect-ratio: 1; animation: s06-orbit 34s linear infinite reverse; }
.s-06__orbit--3 { --o: 57%; width: 114%; aspect-ratio: 1; animation: s06-orbit 48s linear infinite; }
.s-06__orbit i:nth-child(1) { transform: translate(-50%, -50%) rotate(0deg) translateX(var(--o, 50%)); }
.s-06__orbit i:nth-child(2) { transform: translate(-50%, -50%) rotate(140deg) translateX(var(--o, 50%)); }
.s-06__orbit i:nth-child(3) { transform: translate(-50%, -50%) rotate(255deg) translateX(var(--o, 50%)); }
@keyframes s06-orbit {
from { transform: translate(-50%, -50%) rotateX(74deg) rotate(0deg); }
to { transform: translate(-50%, -50%) rotateX(74deg) rotate(360deg); }
}
/* --- Пылинки ---
Шесть точек, всплывающих вверх с разной задержкой. Позиции заданы явно:
случайная россыпь тут читается лучше равномерной сетки. */
.s-06__motes { position: absolute; z-index: 1; inset: 0; }
.s-06__motes span {
position: absolute;
width: 4px;
height: 4px;
border-radius: 50%;
background: rgba(61, 143, 99, 0.7);
animation: s06-mote 9s ease-in-out infinite;
}
.s-06__motes span:nth-child(1) { top: 72%; left: 14%; animation-delay: 0s; }
.s-06__motes span:nth-child(2) { top: 84%; left: 33%; animation-delay: 1.6s; }
.s-06__motes span:nth-child(3) { top: 66%; left: 82%; animation-delay: 3.1s; }
.s-06__motes span:nth-child(4) { top: 88%; left: 68%; animation-delay: 4.4s; }
.s-06__motes span:nth-child(5) { top: 58%; left: 8%; animation-delay: 6s; }
.s-06__motes span:nth-child(6) { top: 78%; left: 91%; animation-delay: 7.4s; }
@keyframes s06-mote {
0% { opacity: 0; transform: translateY(0) scale(0.6); }
15%, 60% { opacity: 0.9; }
100% { opacity: 0; transform: translateY(-120px) scale(1); }
}
/* --- Стекло на плавающих плашках ------------------------------------------
Плашки в блоке были и раньше — им не хватало не существования, а
материала: сплошная заливка на фоне сцены читалась наклейкой. Теперь
сквозь них видно сияние и орбиты, как на образца.
-------------------------------------------------------------------------- */
.s-06__float {
/* 62% белого перекрывали фон почти насухо, и стекло было не отличить от
обычной плашки. На 44% сквозь него читается решётка — размытая, но
узнаваемая, а это и есть то, ради чего стекло ставят. */
background: rgba(255, 255, 255, 0.44);
border: 1px solid rgba(255, 255, 255, 0.75);
backdrop-filter: blur(14px) saturate(170%);
-webkit-backdrop-filter: blur(14px) saturate(170%);
box-shadow: 0 10px 30px rgba(43, 38, 33, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.s-06__float { background: rgba(255, 255, 255, 0.94); } /* без размытия — только глухая подложка */
}
/* --- Адаптив сцены --------------------------------------------------------
Ниже 900px по бокам от телефона места нет: плашки уехали бы за край
экрана, поэтому их убираем целиком, а не поджимаем. Сияние и кольца
остаются — они держатся внутри сцены. */
/* Сцена декоративна целиком: при «меньше движения» она замирает, но не
исчезает — статичный кадр остаётся осмысленным. */
@media (prefers-reduced-motion: reduce) {
.s-06__aurora,
.s-06__ring,
.s-06__orbit,
.s-06__motes span { animation: none !important; }
.s-06__ring--1 { opacity: 0.5; }
.s-06__ring--2,
.s-06__ring--3 { opacity: 0; }
.s-06__motes span { opacity: 0.7; }
}
/* Панель витрины (бургер, логотип AURA, корзина со счётчиком) снята вместе
со своими анимациями. Заказ по-прежнему виден: он двигает плашку
уведомления, выручку и число заказов — просто без отклика в корзине. */
@media (prefers-reduced-motion: reduce) {
.s-06__toast { animation: none; }
}
[hidden] .s-06__toast-proto { display: none; }
/* --- Решётка гириха --------------------------------------------------------
Замена расходящимся кривым: они читались случайными царапинами по фону.
Здесь вместо них фирменный мотив — тот же ромб, что лежит подложкой
первого экрана, только собранный в решётку вокруг телефона.
На каждый заказ по решётке идёт волна: ромбы вспыхивают кольцами от
корпуса наружу. Задержку каждый ромб знает сам — она записана ему в
--d при построении, и волна получается из одной анимации на всех.
Маска гасит решётку к краям, иначе она читается обоями, а не подложкой.
-------------------------------------------------------------------------- */
.s-06__lattice {
position: absolute;
z-index: 0;
top: 50%;
left: 50%;
width: 340%;
max-width: none; /* сброс в 00-base.css зажимает svg до ширины родителя */
aspect-ratio: 1;
overflow: visible;
transform: translate(-50%, -50%);
pointer-events: none;
/* Растушёвка отодвинута к краю: раньше решётка гасла раньше, чем
начинаются плавающие плашки, и стеклу нечего было показывать —
размытие пустого фона остаётся пустым фоном. */
mask-image: radial-gradient(circle at 50% 50%,
#000 22%, rgba(0, 0, 0, 0.5) 54%, transparent 78%);
-webkit-mask-image: radial-gradient(circle at 50% 50%,
#000 22%, rgba(0, 0, 0, 0.5) 54%, transparent 78%);
}
/* Цвет ромба идёт через currentColor: только так его можно переназначить
для