/* ═══════════════════════════════════════════════════════════════════════════
ЗАГЛУШКА ГЛАВНОЙ · ГЕРОЙ «ПОЛОТНО» — ПОРТ, А НЕ АВТОРСКИЙ КОД.
Источник: the-essence-storefront, ветка feat/ch03-mirrors,
web/src/components/book/chapters/ch01hero.css (сам — порт выверенного
стенда ЛЕНДИНГ-ФИНАЛ/ГЕРОЙ-ПОЛОТНО-v22: итерации v18→v22, две слепые
рецензии, десятки замеров в headless Chrome).
⛔ НЕ ПРАВИТЬ ЗДЕСЬ ТО, ЧТО ПРАВИТСЯ В ИСТОЧНИКЕ. Файл — производная;
расхождение означает, что следующий порт молча затрёт правку. Комментарии
оригинала сохранены ЦЕЛИКОМ: в них цена каждого решения и замеры.
⚠️ СНЯТО ПО СЕЛЕКТОРАМ, А НЕ ПО НОМЕРАМ СТРОК — и это не педантизм.
Первый заход резал диапазонами строк по заголовкам разделов, и вместе с
«видео в углу» уехала вся типографика заголовка, лида и цепочки, лежавшая
в том же диапазоне: кегль h1 упал с 70 px до 32, полоса развалилась.
Поймано на рендере, а не в уме.
Снято: .vid* (кружок с видео — в источнике помечен как плейсхолдер с
ПОСТОРОННИМ человеком и «не для публикации») и .qv* (попап книги по клику:
на заглушке кликам вести некуда). Всё остальное — дословно, включая .lift
и всю адаптивную систему: телефон, короткий телефон, планшет, короткий
ноутбучный кадр, prefers-reduced-motion.
⚠️ Цвета зашиты числами — это ПОРТ, переписывать их на токены значило бы
расходиться с источником. Файл лежит в app/assets/stylesheets, поэтому
детектор 202 (сырые hex в app/views) его не считает.
═══════════════════════════════════════════════════════════════════════════ */
/* ⚠️ МЁРТВЫЕ ПРАВИЛА ОТ ВЫРЕЗАННЫХ КУСКОВ — ЗДЕСЬ, И ЭТО ОСОЗНАННО.
Порт снял видеокружок, попап книги (.qv) и кнопки покупки, но их стили
остались: 24 класса в селекторах, которых нет на странице ни в разметке,
ни в том, что ставит скрипт, — примерно 55 строк из 2382 (2,3%).
Замерено сверкой селекторов файла со списком классов ЖИВОЙ страницы.
Почему не вырезано. Я попробовал — самодельный удалятель принял текст
комментариев за селекторы и обрезал два объяснения в середине файла
(поймано diff'ом, откачено). Резать двухтысячестрочный порт вручную
написанным разборщиком дороже, чем стоит выигрыш: вред здесь — вес и
ложный след для следующего читателя, а не поведение страницы.
Что сделано вместо: число закреплено храповиком в
spec/views/marketing/placeholder_guards_spec.rb — вырасти оно не может.
Появится новый мёртвый класс — страж назовёт его поимённо.
Мёртвые: act__go/next/row/up · bk--light · btn · ghost · grp__i ·
lnk/lnk__t/lnk__w · org · qv__fig/in/no/note/q/t/x · vid__cap/disc/play/v · w3 */
.bp-hero{
/* ⚠️ ДОБАВЛЕНО ПРИ ПОРТЕ: в витрине эти токены объявлены глобально в её
tokens.css, у нас такой ветки нет. Без них порт молча сереет —
rgb(var(--…-rgb) / .x) не вычисляется, и правило отбрасывается целиком.
Значения сняты с живого next.the-essence.ai. */
--color-bg-deep:#0A0805; --color-bg-deep-rgb:10 8 5;
--color-accent-rgb:232 184 152; --color-accent-strong-rgb:240 201 174;
--color-fg-rgb:244 239 231; --color-paper-rgb:251 248 243;
--ease-entrance:cubic-bezier(.16,1,.3,1);
--ease-standard:cubic-bezier(.2,0,0,1);
}
/* ═══════════════════════════════════════════════════════════════════════════
АКТ 01 · ОБЛОЖКА · ГЕРОЙ «ПОЛОТНО» (Ch01Hero). ТЁМНЫЙ ОСТРОВ.
Порт выверенного стенда ЛЕНДИНГ-ФИНАЛ/ГЕРОЙ-ПОЛОТНО-v22.html (итерации
v18→v22, слепые рецензии 5,5 → 6,3, десятки замеров в headless Chrome).
Той же дорогой раньше пришла Глава VIII (ch10.css) — стенд правится в
«Сути Души», сюда приезжает готовым.
ЧТО ВНУТРИ: полотно из 21 обложки (три яруса, разные скорости), заголовок
со сменным словом, карточка запроса читателя в углу, три такта метода,
нижняя полоса «цена · гарантия · кнопка», две аннотации-раскрытия — смета
«300 000» и состав команды — и попап книги по клику на обложку.
⚠️ ВСЁ SELF-SCOPED ПОД .bp-hero. Страница /next светлая (light-first), и
любое правило, оставшееся глобальным, покрасило бы соседние главы. При
порте :root уехал в .bp-hero, body-правила потеряли margin/height/overflow
(на стенде они держали единственный экран без прокрутки — здесь убили бы
страницу), а @keyframes переименованы в hero-*: имена анимаций глобальны,
и «run» с «breath» почти наверняка есть у соседей.
⛔ НЕ ПРАВИТЬ ЗДЕСЬ ТО, ЧТО МОЖНО ПОПРАВИТЬ В СТЕНДЕ. Файл — производная;
расхождение с ЛЕНДИНГ-ФИНАЛ/ГЕРОЙ-ПОЛОТНО-v22.html означает, что следующий
порт молча затрёт правку. Исключение — три правила выше, помеченные
«⚠️ порт»: они существуют только потому, что герой встал в длинную страницу.
═══════════════════════════════════════════════════════════════════════════ */
.bp-hero{
--acc:#E8B898; --acc2:#F0C9AE; --acc-on:#0F0D08;
--fg:#F4EFE7; --body:#E8E2D8; --mut:#B5AB9D; --sub:#9C9287;
/* .34 давали 1.7:1 — нечитаемо и мимо любого порога. */
--faint:rgba(251,248,243,.58); --brd:#4A4135; --line:rgba(251,248,243,.09);
--sans:"Manrope",-apple-system,system-ui,sans-serif;
--ital:"Lora","Times New Roman",Georgia,serif;
--mono:"JetBrains Mono","SF Mono",ui-monospace,monospace;
--tnum:"tnum" 1,"lnum" 1;
--e-enter:var(--ease-entrance); --e-std:var(--ease-standard);
/* ПЕРСПЕКТИВА ЗАДАЁТСЯ РАЗМЕРОМ, А НЕ transform:scale — scale не меняет
раскладку, ряд визуально ужимается и оставляет за собой пустую полосу.
У каждого ряда своя ШИРИНА ОБЛОЖКИ, и раскладка честно следует за планом.
--fsum — сумма долей всех планов, её выставляет скрипт (см. PLANES).
База обратно пропорциональна ей: сколько бы планов ни было, их стопка
занимает ту же высоту кадра. 61vh подобрано так, что при трёх планах
(сумма 2.72) выходит 22.4vh и стопка чуть выходит за край, продолжаясь за
рамкой. Верхний предел 420, а не 290: на 2560×1440 стопка упиралась в
потолок и не доставала до краёв кадра — сверху и снизу оставались чёрные
поля по 73 px. Замерено. */
--fsum:2.72;
/* --cwb-px выставляет скрипт по ВИДИМОЙ высоте полотна (см. applyStack);
clamp остаётся страховкой на случай, если скрипт ещё не отработал. */
--cwb-px:calc(61vh / var(--fsum));
--cwb:clamp(118px,var(--cwb-px),420px);
--cw:var(--cwb);
--gap:clamp(10px,1.5vh,20px);
--pad:clamp(20px,4vw,72px);
/* --colw снят вместе с колонной: текст больше не стоит в левой половине,
ширме нечего под неё подгонять (см. .veil). */
}
.bp-hero *{box-sizing:border-box}
/* ⚠️ position:relative + isolation НА КОРНЕ СЕКЦИИ — вместо того, что на
стенде держал . Внутри героя лежат fixed-панели аннотаций и
absolute-слои полотна; без своей системы координат и своего контекста
наложения они считались бы от страницы и всплывали над соседними главами. */
.bp-hero{position:relative;isolation:isolate;
background:var(--color-bg-deep);color:var(--body);font-family:var(--sans);
-webkit-font-smoothing:antialiased;}
.bp-hero :focus-visible{outline:2px solid var(--acc);outline-offset:3px}
/* isolation — чтобы подсветка смешивалась строго внутри сцены и не уходила
блендиться с корнем документа. */
.bp-hero .scene{position:relative;height:100dvh;overflow:hidden;background:var(--color-bg-deep);
isolation:isolate}
/* ═══ ПОЛОТНО ════════════════════════════════════════════════════════════ */
.bp-hero .web{position:absolute;inset:0;display:flex;flex-direction:column;
justify-content:center;gap:var(--gap);z-index:1;pointer-events:none;
padding-bottom:var(--web-pad,0px);
/* Наклон приподнимает правый край на полширины × tg(угла), и внизу справа
открывается тёмный клин. Угол держим небольшим, а вылет за кадр — с
запасом, чтобы стопка этот клин перекрывала. */
transform:rotate(-2.2deg) scale(1.12);
/* ⚠️ ЦЕНТР МАСШТАБИРОВАНИЯ — СЕРЕДИНА ВИДИМОЙ ЧАСТИ, А НЕ КАДРА.
Полотно занимает весь кадр, но стопка центрируется в его верхней части
(padding-bottom поднимает её над полосой). При origin 50% 50% увеличение
считалось от середины ЭКРАНА и утаскивало стопку вниз: на 1920×1080 низ
последнего ряда уходил на 837 при кромке полосы 724, то есть третий ряд
снова прятался под текст — ровно та беда, ради которой всё и затевалось.
Здесь origin следует за той же величиной, что и отступ. */
transform-origin:50% calc((100% - var(--web-pad,0px)) / 2);will-change:transform;
opacity:0;animation:hero-webIn 1.5s var(--e-enter) .05s forwards}
@keyframes hero-webIn{to{opacity:1}}
/* Ряд — это план. Размер + яркость + скорость: три согласованных признака
глубины вместо одного. Размытия нет намеренно — оно топит обложки, а именно
они здесь товар.
⚠️ ЯРКОСТЬ ПЛАНА — НИ В КОЕМ СЛУЧАЕ НЕ ФИЛЬТРОМ НА РЯДЕ. Ряд это родитель
едущей дорожки в несколько тысяч пикселей, и filter родителя браузер обязан
пересчитывать по всей её площади на каждом кадре (замерено: 65 мс на кадр).
План гасит полупрозрачная плашка — см. --dim у .bk::after. */
.bp-hero .row{display:flex;flex:none;overflow:visible}
/* align-items:flex-start — иначе вертикальный сдвиг карточки (см. --off)
съедался бы stretch-ем и строй остался бы линейкой. */
.bp-hero .track{display:flex;align-items:flex-start;gap:var(--gap);padding-right:var(--gap);
flex:none;animation:hero-run var(--dur,120s) linear infinite;will-change:transform}
.bp-hero .row--back .track{animation-direction:reverse}
@keyframes hero-run{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* Лента замирает и когда всматриваются в обложку, и когда открыта карточка. */
.bp-hero .scene[data-hold="1"] .track{animation-play-state:paused}
/* Вкладка в фоне — время для сцены не идёт. Разбор в блоке «ВКЛАДКА УШЛА В
ФОН» в скрипте: без этого лента на возврате перескакивает вперёд на всё
время отсутствия. Подсветка замирает по той же причине — её дыхание
отыграло бы накопленные циклы одним махом. */
.bp-hero .scene[data-away="1"] .track,
.bp-hero .scene[data-away="1"] .glow{animation-play-state:paused}
/* --off — вертикальный сдвиг карточки. Через top у relative-элемента, а не
через margin: смещение не трогает раскладку, высота ряда не пляшет. */
/* ⚠️ НИ ФИЛЬТРА, НИ РАЗМЫТОЙ ТЕНИ НА КАРТОЧКЕ — ЭТО ПЛАТА ЗА ПЛАВНОСТЬ.
filter:brightness() на каждой из шести десятков карточек заставляет браузер
заводить под каждую отдельную поверхность; box-shadow с радиусом 26 px по
всем карточкам — лишняя закраска на каждом тайле едущей дорожки. Отсюда и
рывки. Яркость плана даёт плашка (--dim в ::after): чёрный с альфой a даёт
ровно то же, что brightness(1−a), но композитору не стоит ничего. Тень
остаётся только у наведённой карточки — она одна. */
.bp-hero .bk{position:relative;top:var(--off,0px);flex:none;width:var(--cw);aspect-ratio:707/1000;
border-radius:2px;overflow:hidden;background:var(--color-bg);padding:0;border:none;
cursor:pointer;pointer-events:auto;
box-shadow:inset 0 0 0 .5px rgba(255,255,255,.07);
/* Карточка сама больше не растёт: подъём вынесен в .lift, поэтому здесь
переходу нечего вести. Лишний transition на полусотне едущих плиток —
это лишняя работа композитора на каждом кадре. */
transition:none}
.bp-hero .bk img{width:100%;height:100%;object-fit:cover;display:block}
/* Лак. Блик по верхней кромке — то, чем печатная обложка отличается от
картинки обложки: у неё есть поверхность. Обычным альфа-градиентом, без
mix-blend-mode: смешивание пришлось бы пересчитывать на каждой карточке. */
.bp-hero .bk::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
background:linear-gradient(146deg,rgb(var(--color-paper-rgb) / .13) 0%,
rgb(var(--color-paper-rgb) / .035) 11%,transparent 27%)}
.bp-hero .bk--light{--dim:.7}
/* ЗАТЕНЕНИЕ ПЛАНА + виньетка сверху — одним псевдоэлементом, двумя слоями
фона. --dim задаётся рядом и равен 1 минус яркость плана. */
.bp-hero .bk::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
background:
radial-gradient(ellipse 132% 92% at 50% 0%,transparent 44%,rgb(var(--color-bg-deep-rgb) / .24)),
linear-gradient(rgba(10,8,5,var(--dim,0)),rgba(10,8,5,var(--dim,0)));
transition:opacity .5s var(--e-std)}
.bp-hero .bk__no{position:absolute;left:7%;top:4.5%;z-index:4;font-family:var(--mono);
font-size:clamp(7px,calc(var(--cw) * .055),9.5px);letter-spacing:.14em;
color:rgb(var(--color-paper-rgb) / .55);font-feature-settings:var(--tnum)}
/* Затирка нижней строки обложки (там настоящее имя читателя). Была
backdrop-filter:blur — это сто с лишним элементов, каждый заставляет браузер
пересобирать подложку на движущейся ленте. Плотный градиент скрывает строку
так же, а стоит ноль. */
/* 🔴 30% И БЫСТРОЕ НАРАСТАНИЕ — ОБА ЧИСЛА ПОДБИРАЛИСЬ ЗАМЕРОМ, НЕ ТРОГАЙТЕ
ПООДИНОЧКЕ. Имя читателя набрано на 82% высоты обложки. Полоса в 16%
начинала глушить только с 84% — то есть проходила ПОД именем. Расширение до
24% не помогло: имя попадало в участок градиента плотностью .55 и читалось
насквозь. Работает лишь сочетание: полоса 30% (от 70% высоты обложки) и
нарастание, выходящее на плотное к 38% полосы, то есть к 81% обложки.
⚠️ ЗАТИРКА ЖИВЁТ В ТРЁХ МЕСТАХ: .bk__mask (лента), .lift::after (поднятая
копия) и .qv__fig::after (карточка). Разъедутся — имя проступит там, где
про него забыли, а рядом стоит обещание «личные данные скрыты». */
.bp-hero .bk__mask{position:absolute;left:0;right:0;bottom:0;height:30%;z-index:3;
background:linear-gradient(180deg,rgb(var(--color-bg-deep-rgb) / 0) 0%,rgb(var(--color-bg-deep-rgb) / .42) 12%,
rgb(var(--color-bg-deep-rgb) / .86) 26%,rgb(var(--color-bg-deep-rgb) / .97) 38%,var(--color-bg-deep) 48%)}
/* ═══ ОБЛОЖКА ПОД КУРСОРОМ ═══════════════════════════════════════════════
🔴 ГЛАВНАЯ ПРИЧИНА, ПО КОТОРОЙ ЭТО НЕ РАБОТАЛО ТРИ ПОДХОДА ПОДРЯД.
Карточке ставили z-index 9 и ждали, что она выйдет на передний план. Она не
выходила и выйти не могла: у .web есть transform, а transform создаёт
контекст наложения — все z-index карточек считаются ВНУТРИ полотна, и целиком
оно остаётся на своём слое 1, под ширмой, зерном, подложкой полосы и текстом.
Юрий это и увидел: увеличенная обложка лезла под плашки и не вылезала даже
из нижней полосы.
Поднимать z-index у самого .web нельзя — тогда наверх выедут ВСЕ обложки и
лягут на текст.
РЕШЕНИЕ: ПОДЪЁМНИК. Наведённая обложка не увеличивается на месте — её копия
выносится отдельным слоем поверх всей сцены (.lift, position:fixed) и растёт
уже там. Оригинал на это время гасится, дыру в стене полностью перекрывает
выросшая копия. Лента под курсором и так стоит, поэтому копия никуда не
плывёт.
Побочная выгода, ради которой стоило: копия рисуется БЕЗ наклона полотна —
книга будто выпрямляется в руке, когда её берут с полки.
⚠️ РАЗМЕР КОПИИ СЧИТАЕТСЯ НЕ ПО getBoundingClientRect. Карточка лежит в
повёрнутом полотне, и rect отдаёт axis-aligned коробку — она шире и выше
настоящей примерно на 5%, копия вышла бы раздутой и с чужими пропорциями.
Берём собственные offsetWidth/offsetHeight и умножаем на реальный масштаб
полотна, вынутый из его матрицы (см. liftOn). */
.bp-hero .bk:hover,
.bp-hero .bk:focus-visible{z-index:9}
.bp-hero .bk[data-lift="1"]{opacity:0;transition:opacity .18s linear}
.bp-hero .bk:hover::after,
.bp-hero .bk:focus-visible::after{opacity:0}
/* Подъёмник. Один элемент на всю страницу, поверх всего (z-index 30 — выше
ширмы, зерна, полосы и текста, ниже модальной карточки книги). */
/* ⚠️ В ПЕРЕХОДЕ ТОЛЬКО opacity И transform. БОЛЬШЕ НИЧЕГО.
Первая версия анимировала ещё box-shadow, outline-offset и координаты с
размерами. Каждое из этих свойств заставляет браузер перерисовывать элемент
на каждом кадре, а тень тут с размытием в 120 px — то есть пересчитывать
приходилось площадь много больше самой обложки. Отсюда и «подлагивает, нет
плавности»: не тяжёлая графика, а анимация некомпозитных свойств.
Тень и рамка теперь заданы статично — они появляются вместе с элементом
через его общую прозрачность и не пересчитываются ни разу. Координаты едут
через translate3d внутри того же transform, что и рост: и переезд с обложки
на обложку, и раскрытие идут одним композитным свойством. */
.bp-hero .lift{position:fixed;left:0;top:0;z-index:30;pointer-events:none;border-radius:2px;
background:var(--color-bg);overflow:hidden;
outline:1px solid rgb(var(--color-accent-rgb) / .5);outline-offset:9px;
box-shadow:0 44px 96px rgba(0,0,0,.84),
0 0 120px rgb(var(--color-accent-rgb) / .22),
0 0 30px rgb(var(--color-accent-rgb) / .12);
opacity:0;transform-origin:50% 50%;will-change:transform,opacity;
transition:opacity .28s var(--e-std),transform .52s var(--e-enter)}
.bp-hero .lift img{display:block;width:100%;height:100%;object-fit:cover}
/* Лак и затирка имени — те же, что на карточке: копия обязана быть неотличима
от оригинала, иначе подмена читается. */
.bp-hero .lift::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:linear-gradient(146deg,rgb(var(--color-paper-rgb) / .13) 0%,
rgb(var(--color-paper-rgb) / .035) 11%,transparent 27%)}
.bp-hero .lift::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;z-index:3;
background:linear-gradient(180deg,rgb(var(--color-bg-deep-rgb) / 0) 0%,rgb(var(--color-bg-deep-rgb) / .42) 12%,
rgb(var(--color-bg-deep-rgb) / .86) 26%,rgb(var(--color-bg-deep-rgb) / .97) 38%,var(--color-bg-deep) 48%)}
.bp-hero .lift__no{position:absolute;left:7%;top:4.5%;z-index:4;font-family:var(--mono);
font-size:11px;letter-spacing:.2em;
color:var(--acc2);font-feature-settings:var(--tnum)}
/* Затемнение поля. Один элемент, одна прозрачность, ноль работы на кадр. */
.bp-hero .web__dim{position:absolute;inset:-20%;z-index:5;pointer-events:none;
background:var(--color-bg-deep);opacity:0;transition:opacity .5s var(--e-std)}
.bp-hero .scene[data-hold="1"] .web__dim{opacity:.32}
/* ═══ СВЕТ ════════════════════════════════════════════════════════════════
Тёплый ключевой свет на полотне: без него ряды освещены равномерно и
читаются обоями. Пятно медленно дышит — сцена живёт сама по себе;
анимируется одна opacity на одном композитном слое.
⚠️ mix-blend-mode:screen СНЯТ. Он заставлял композитор вычитывать подложку
под всей правой третью кадра на КАЖДОМ кадре, а под ним едут три дорожки.
Это была одна из трёх причин рывков. Обычная альфа даёт тот же тёплый воздух
и стоит ноль. */
.bp-hero .glow{position:absolute;inset:0 0 0 34%;pointer-events:none;z-index:2;
background:
radial-gradient(ellipse 68% 42% at 54% 38%,rgb(var(--color-accent-strong-rgb) / .115) 0%,
rgb(var(--color-accent-strong-rgb) / .045) 42%,transparent 72%),
radial-gradient(ellipse 50% 32% at 82% 86%,rgba(184,164,214,.07) 0%,transparent 70%);
animation:hero-breath 19s ease-in-out infinite}
@keyframes hero-breath{0%,100%{opacity:.72}50%{opacity:1}}
/* ═══ ШИРМА · ЕДИНСТВЕННОЕ МЕСТО, ГДЕ ГАСИТСЯ ПОЛОТНО ════════════════════
Весь текст, лежащий на едущих обложках, читается благодаря ЭТОМУ слою и
собственной тени глифов. Локальных подложек ни у одного элемента нет —
почему, разобрано над .cap.
ТРИ ПРАВИЛА, БЕЗ КОТОРЫХ ЭТОТ СЛОЙ СНОВА СТАНЕТ ПЯТНОМ
1. КАЖДОЕ ЗАТЕМНЕНИЕ ПРИКРЕПЛЕНО К КРОМКЕ КАДРА. Центр эллипса стоит
строго на 0%, 100% или на краю по вертикали — никогда внутри. Тогда самая
плотная его часть совпадает с краем экрана, где темнота естественна, а
наружу от неё ничего нет. Граница появляется ровно в тот момент, когда
центр уезжает внутрь кадра.
2. СПАД ИДЁТ ПО КРИВОЙ, А НЕ В ТРИ СТУПЕНИ. Линейная альфа на площади в
пол-экрана видна полосами: глаз ловит излом производной, даже когда не
ловит сам переход. Одиннадцать стопов ниже приближают ease-out: плотность
держится у центра и быстро тает к 70–80%, дальше почти невидима.
⛔ НЕ СОКРАЩАЙТЕ КОЛИЧЕСТВО СТОПОВ «для чистоты кода» — они и есть
причина, по которой слой не читается объектом.
3. ЭЛЛИПСЫ РАЗМЕЧЕНЫ ПО ФАКТИЧЕСКИМ КОРОБКАМ НАБОРА, а не на глаз.
Левый: от кромки до конца самой длинной строки лида (46ch ≈ 31vw) с
запасом; по вертикали от колонтитула до низа лида.
Правый: карточка стоит на 71–96% ширины и 38–52% высоты (замерено на
1512×800 и 1920×1080) — отсюда центр 46% и радиус 26%.
Если двинете лид или карточку — перемерьте и поправьте здесь, иначе
набор снова окажется на светлой обложке.
⚠️ МЕЖДУ ЛЕВЫМ И ПРАВЫМ ЗАТЕМНЕНИЕМ НАМЕРЕННО ОСТАВЛЕН СВЕТЛЫЙ КОРИДОР.
Обложки — товар, и середина кадра обязана идти в полную силу. Если поднять
любой из радиусов так, что коридор схлопнется, полотно превратится в фон,
и весь смысл экрана пропадёт.
⚠️ ЗЕРНО (.grain) — ЧАСТЬ ЭТОГО РЕШЕНИЯ, А НЕ УКРАШЕНИЕ. Градиенты такого
размаха на 8-битной панели идут ступенями; зерно их разбивает. Снимете
зерно — вернётся полосатость. */
.bp-hero .veil{position:absolute;inset:0;pointer-events:none;z-index:3;
background:
/* ── ВЕРХ СЛЕВА: ЗАГОЛОВОК. Центр на левой кромке, вертикаль прижата
к верху.
⚠️ РАДИУС ОБРЕЗАН ПО ФАКТИЧЕСКОЙ КОРОБКЕ НАБОРА, А НЕ «С ЗАПАСОМ».
Было 44vw × 46% от 16% — эллипс дотягивался до 62% высоты и до
середины кадра, гася обложки там, где текста нет вовсе: под лидом
оставалась мёртвая тёмная четверть, и Юрий это увидел.
Заголовок занимает по вертикали 8–33%, по горизонтали до 35vw.
Эллипс 32vw × 28% от 13% накрывает 0–41% — ровно набор и полосу
спада под ним, ни пикселем ниже. */
radial-gradient(ellipse clamp(340px,32vw,700px) 28% at 0% 13%,
rgb(var(--color-bg-deep-rgb) / .56) 0%, rgb(var(--color-bg-deep-rgb) / .55) 10%, rgb(var(--color-bg-deep-rgb) / .525) 20%,
rgb(var(--color-bg-deep-rgb) / .49) 30%, rgb(var(--color-bg-deep-rgb) / .44) 40%, rgb(var(--color-bg-deep-rgb) / .38) 50%,
rgb(var(--color-bg-deep-rgb) / .31) 60%, rgb(var(--color-bg-deep-rgb) / .225) 70%, rgb(var(--color-bg-deep-rgb) / .135) 80%,
rgb(var(--color-bg-deep-rgb) / .06) 90%, transparent 100%),
/* ── ВДОЛЬ СТРОКИ ЛИДА: широкое и низкое, тоже от левой кромки.
Набор имеет форму буквы «Г» — заголовок высокий и узкий, лид низкий
и широкий, — и одним эллипсом такая фигура не покрывается.
⚠️ ВЫСОТА УРЕЗАНА С 19% ДО 13%. Лид — одна строка; всё, что ниже неё,
затемнялось впустую. Полоса 29–55% по вертикали покрывает строку и
короткий спад, дальше полотно идёт в полную силу.
Шва между двумя затемнениями не возникает: сумма плавных полей
плавная, оба прикреплены к одной кромке. Пик ниже (.80 против .88),
чтобы в зоне наложения не вышло глухого пятна. */
radial-gradient(ellipse clamp(460px,48vw,1020px) 13% at 0% 42%,
rgb(var(--color-bg-deep-rgb) / .52) 0%, rgb(var(--color-bg-deep-rgb) / .51) 10%, rgb(var(--color-bg-deep-rgb) / .485) 20%,
rgb(var(--color-bg-deep-rgb) / .45) 30%, rgb(var(--color-bg-deep-rgb) / .405) 40%, rgb(var(--color-bg-deep-rgb) / .35) 50%,
rgb(var(--color-bg-deep-rgb) / .28) 60%, rgb(var(--color-bg-deep-rgb) / .205) 70%, rgb(var(--color-bg-deep-rgb) / .12) 80%,
rgb(var(--color-bg-deep-rgb) / .055) 90%, transparent 100%),
/* ── СПРАВА ПО СЕРЕДИНЕ: карточка с запросом читателя. Центр на правой
кромке (100%). */
radial-gradient(ellipse clamp(330px,31vw,600px) 27% at 100% 46%,
rgb(var(--color-bg-deep-rgb) / .66) 0%, rgb(var(--color-bg-deep-rgb) / .65) 10%, rgb(var(--color-bg-deep-rgb) / .625) 20%,
rgb(var(--color-bg-deep-rgb) / .58) 30%, rgb(var(--color-bg-deep-rgb) / .525) 40%, rgb(var(--color-bg-deep-rgb) / .45) 50%,
rgb(var(--color-bg-deep-rgb) / .365) 60%, rgb(var(--color-bg-deep-rgb) / .265) 70%, rgb(var(--color-bg-deep-rgb) / .155) 80%,
rgb(var(--color-bg-deep-rgb) / .07) 90%, transparent 100%),
/* ── КОЛОНТИТУЛ: марка слева, девиз справа. Прижат к верхней кромке. */
linear-gradient(180deg,
rgb(var(--color-bg-deep-rgb) / .60) 0%, rgb(var(--color-bg-deep-rgb) / .52) 3%, rgb(var(--color-bg-deep-rgb) / .40) 6%,
rgb(var(--color-bg-deep-rgb) / .26) 10%, rgb(var(--color-bg-deep-rgb) / .13) 14%, rgb(var(--color-bg-deep-rgb) / .04) 18%,
transparent 22%),
/* ── НИЗ: лёгкий притин, чтобы полотно не обрывалось по кромке кадра.
Основную работу под полосой делает её собственная подложка (.deck). */
linear-gradient(180deg,
transparent 0%, transparent 60%, rgb(var(--color-bg-deep-rgb) / .05) 70%,
rgb(var(--color-bg-deep-rgb) / .13) 80%, rgb(var(--color-bg-deep-rgb) / .22) 90%, rgb(var(--color-bg-deep-rgb) / .32) 100%),
/* ── ВИНЬЕТКА: собирает кадр, гасит углы. */
radial-gradient(ellipse 92% 86% at 50% 46%,
transparent 58%, rgb(var(--color-bg-deep-rgb) / .09) 78%, rgb(var(--color-bg-deep-rgb) / .22) 100%)}
/* ЗЕРНО. Тёмные градиенты такого размаха на 8-битной панели идут полосами;
зерно их разбивает и заодно даёт полотну фактуру печати — уместно там, где
товар книга. Статичный слой, ни одного пересчёта на кадр. */
.bp-hero .grain{position:absolute;inset:0;pointer-events:none;z-index:6;opacity:.055;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.62'/%3E%3C/svg%3E");
background-size:160px 160px}
/* ═══ УГОЛ: ПОДСКАЗКА И КАРТОЧКА КНИГИ ═══════════════════════════════════
⛔ ПОДПИСЬ НЕ ХОДИТ ЗА ОБЛОЖКОЙ. Пробовал ставить её под саму карточку —
казалось, что этикетка под экспонатом честнее. На деле у нижнего ряда она
падала прямо в текст полосы и ложилась на третью колонку (Юрий это и
увидел), а у крайних обложек прижималась к краю кадра. Место у неё одно —
правый нижний угол над полосой, тот самый, что Юрий отдал воздуху ещё в
v18: там пусто по построению, и туда же смотрит глаз после полотна.
ПОЯВЛЕНИЕ ПОСТРОЧНОЕ. Три строки выезжают из-под маски со сдвигом в 70 мс —
номер, название, запрос. Это дороже простого проявления и стоит ровно
столько же: три композитных transform на трёх элементах.
═══ v22: КАРТОЧКА ПЕРЕСТАЛА ЖДАТЬ КУРСОРА ═══════════════════════════════
🔴 ГЛАВНАЯ СМЫСЛОВАЯ ПРАВКА ЭКРАНА, И ОНА ЗДЕСЬ, А НЕ В ЗАГОЛОВКЕ.
Поле `q` у каждой книги — настоящий запрос читателя его словами. Это лучший
текст на всём проекте, и в v21 его видел только тот, кто догадался навести
мышь на едущую обложку; на телефоне (.cap{display:none}) его не видел
никто. Экран из-за этого читался как каталог чужих книг: «Аня»,
«Владимир», «Твой год» — красиво и ни о чём. Стоило запросу выйти на свет,
и полотно стало галереей случаев: каждая книга родилась из чьего-то
вопроса, и в чужом вопросе покупатель узнаёт свой.
Поэтому карточка теперь листает витрину САМА (см. autoNext в скрипте), а
наведение её перебивает. Разметка та же, добавлено одно состояние.
⚠️ ЧТО ИМЕННО ПОМЕНЯЛОСЬ В ПРАВИЛАХ НИЖЕ, ЧТОБЫ ЭТО СТАЛО ВОЗМОЖНО:
· .card больше не position:absolute поверх подсказки. Раньше они делили
одно место и подменяли друг друга (.cap__hint гасла по data-cap="1"), —
логика «или подсказка, или карточка». Теперь карточка стоит всегда, а
подсказка ПОД ней объясняет, что это за текст и что будет по клику.
· data-cap из переключателя «видно / не видно» стал переключателем
«на месте / уезжает»: смена книги гасит его на 300 мс, и три строки
уезжают и приезжают той же анимацией, что писалась под наведение.
Ничего нового на кадр это не стоит — те же три transform раз в пять
секунд. */
.bp-hero .cap{position:relative;grid-row:2;grid-column:1;align-self:end;justify-self:end;z-index:7;
/* ⚠️ 38ch, А НЕ 44. На широком кадре длинная цитата дотягивалась левым
краем до зоны, где затемнение уже почти сошло на нет, и сквозь начало
строки проступало название подъехавшей обложки. Расширять затемнение
нельзя — оно съело бы светлый коридор в середине кадра, ради которого
всё и построено; поэтому сужается карточка. Переносу вторая строка не
мешает: высота под неё зарезервирована (см. .card__q). */
width:min(38ch,34vw);text-align:right;pointer-events:none;
display:grid;gap:10px;
margin-bottom:clamp(30px,5vh,64px)}
/* ⚠️ ЭТО НЕ ПЛАШКА ПОД КАРТОЧКОЙ, И РАЗНИЦА ПРИНЦИПИАЛЬНА.
Правило экрана: тип на полотне несёт собственный контраст тенью, а не
ширмой, потому что каждый процент ширмы гасит товар. Тень карточку и
держит — но у одной строки она не справляется: «Экземпляр № 001» набран
9.5 px акцентным #E8B898, и когда под него подъезжает бирюзовая «Тёплые
руки», строка тонет не по яркости, а по ЦВЕТУ — тень против этого бессильна
(замерено на 1512: номер и название обложки сливались в одно пятно).
Поэтому здесь не прямоугольник под текстом, а радиальный градиент из
правого нижнего угла кадра — визуальное продолжение подложки полосы
(.deck::before), которая приходит снизу. Он не имеет собственного контура,
гаснет к 75% радиуса и на полотне читается как та же тень кадра, а не как
подложка под надписью.
⛔ НЕ ЗАМЕНЯТЬ НА ROUNDED-ПРЯМОУГОЛЬНИК: любая различимая форма превратит
витрину в интерфейсную панель, а весь смысл угла — что там книги, а не UI.
Стоит ноль на кадре: статический градиент, ничего не анимируется. */
/* ⛔ ЛОКАЛЬНЫХ ПЯТЕН ПОД ТЕКСТОМ БОЛЬШЕ НЕТ — И НЕ ЗАВОДИТЕ ИХ СНОВА.
Я дважды пытался подпереть набор собственной подложкой: сперва радиальной,
потом линейной с маской. Оба раза выходило пятно с различимой кромкой, и оба
раза Юрий это видел («смотри как неопрятно», «отвратительно»).
Причина не в подборе стопов, а в геометрии: у подложки есть КОРОБКА, и её
край всегда где-то проходит. Спрятать его можно, только доведя градиент до
нуля на всех четырёх кромках, — а тогда под самим текстом плотности уже не
остаётся. Это тупик по построению, а не неудачная настройка.
✅ РАБОТАЕТ ТОЛЬКО ОДНО: затемнение, ПРИКРЕПЛЁННОЕ К КРОМКЕ КАДРА. У него
нет видимой границы, потому что там, где оно плотнее всего, — край экрана,
где глаз и ожидает темноту. Всю эту работу делает .veil, см. ниже. */
/* 🔴 УГОЛ ГАСНЕТ И ЗАЖИГАЕТСЯ ЦЕЛИКОМ — ЭТО ИСПРАВЛЕНИЕ, А НЕ УКРАШЕНИЕ.
Прозрачность стояла на .card, а подсказка под ней жила своей жизнью. В
момент смены книги (240 мс каждые 5 с) три строки карточки исчезали, а
служебная строка «ЗАПРОС ЧИТАТЕЛЯ · КЛИК — ИСТОРИЯ КНИГИ» оставалась висеть
одна над пустотой в добрую сотню пикселей. Выглядело поломкой вёрстки.
Независимый рецензент поймал это в двух случайных кадрах из шести — то есть
посетитель это увидит, а не теоретически может увидеть.
Теперь состояние одно на весь угол: карточка и подсказка — один предмет,
гаснут и возвращаются вместе. Подложка (::before) гаснет с ними же, иначе в
паузе на полотне оставалось бы тёмное пятно без содержимого. */
/* .14s, а не .2s: вместе с паузой в 165 мс угол пустует около 300 мс из
каждых 5 секунд — 6% времени вместо прежних 11%. Рецензент ловил пустой
кадр случайным скриншотом; теперь окно вдвое ýже. */
.bp-hero .cap{transition:opacity .14s var(--e-std)}
.bp-hero .scene[data-cap="0"] .cap{opacity:0}
/* 🔴 НА ТАЧ-УСТРОЙСТВАХ КАРТОЧКА НЕ ГАСНЕТ ВООБЩЕ.
На десктопе она висит поверх полотна: пока текст сменяется, под ней всё
равно едут обложки, и провала не видно. На телефоне она лежит В ПОТОКЕ, и
те же 150 мс прозрачности оставляют посреди первого экрана чёрный прямо-
угольник в треть высоты — рецензент поймал его случайным кадром, и поймает
каждый, кто смотрит дольше пяти секунд.
Здесь смена мгновенная: текст подменяется без перехода. Потери нет —
построчная выездка задумывалась под наведение курсором, которого на
телефоне не существует. */
@media (hover:none){
.bp-hero .cap{transition:none}
.bp-hero .scene[data-cap="0"] .cap{opacity:1}
.bp-hero .card__l > *{transition:none}
.bp-hero .scene[data-cap="0"] .card__l > *{transform:none}
}
/* 9.5 → 11 px. Слепой рецензент: «интерактив, в который вложены пятнадцать
обложек и модальные окна, на телефоне просто не обнаруживается». Строка
служебная, но она единственная объясняет, что за текст висит над ней и что
будет по клику; невидимая подсказка не служебная, а бесполезная.
Трекинг ослаблен с .2em до .16em: на выросшем кегле прежний разряд начинал
рассыпать слово. */
.bp-hero .cap__hint{margin:0;white-space:nowrap;font-family:var(--mono);font-size:11px;
letter-spacing:.16em;text-transform:uppercase;color:var(--mut);opacity:.92}
.bp-hero .card{width:100%;display:grid;justify-items:end;gap:6px}
/* Каждая строка едет из-под собственной маски: overflow скрывает её до входа,
а не прозрачность — от этого движение читается как проявка, а не как
включение лампы. */
.bp-hero .card__l{display:block;overflow:hidden}
.bp-hero .card__l > *{display:block;transform:translateY(115%);
transition:transform .62s var(--e-enter)}
.bp-hero .scene[data-cap="1"] .card__l > *{transform:none}
.bp-hero .scene[data-cap="1"] .card__l:nth-child(1) > *{transition-delay:.02s}
.bp-hero .scene[data-cap="1"] .card__l:nth-child(2) > *{transition-delay:.09s}
.bp-hero .scene[data-cap="1"] .card__l:nth-child(3) > *{transition-delay:.16s}
/* opacity .85 снята: строка и так самая мелкая на полотне, приглушать её
означало отдавать её первой же светлой обложке. */
.bp-hero .card__no{font-family:var(--mono);font-size:9.5px;letter-spacing:.26em;
color:var(--acc);font-feature-settings:var(--tnum)}
.bp-hero .card__t{font-family:var(--ital);font-style:italic;color:var(--fg);line-height:1.12;
font-size:clamp(1.2rem,1.45vw,1.7rem);letter-spacing:-.01em}
/* 🔴 ЗАПРОС ЧИТАТЕЛЯ ПОДНЯТ В ВЕСЕ — САМАЯ ВАЖНАЯ СТРОКА ЭКРАНА ПОСЛЕ ЛИДА.
Было: .82–.98rem цветом --mut, то есть приглушённая подпись под названием.
И оба рецензента, независимо друг от друга, сказали одно: единственное
место, где покупатель узнаёт СЕБЯ, — это чужой вопрос, и он набран самым
мелким кеглем на экране, в самом дальнем углу. Красивая витрина при этом
объясняет ЧТО продаётся и не объясняет ЗАЧЕМ.
Стало .95–1.18rem цветом --body: строка сравнялась по весу с корпусом
полосы и стала читаться раньше названия книги, что и правильно — название
принадлежит продавцу, вопрос принадлежит человеку.
⚠️ Больше 1.18rem поднимать нельзя: карточка начнёт спорить с заголовком. */
/* 🔴 ВЫСОТА ЗАРЕЗЕРВИРОВАНА ПОД ДВЕ СТРОКИ — ЭТО ИСПРАВЛЕНИЕ СДВИГА МАКЕТА.
Запросы читателей разной длины: «жду знака, хотя всё уже случилось» встаёт в
одну строку, «десять вопросов, которые ты не задаёшь вслух» — в две. Карточка
меняла высоту на 21 px каждые пять секунд, и на телефоне, где она лежит в
потоке, вместе с ней ездило всё ниже: КНОПКА ПОКУПКИ ПРЫГАЛА С 666 НА 687 px
ПОД БОЛЬШИМ ПАЛЬЦЕМ. Замерено на 390×844 девяноста пробами; высота документа
скакала 1465 ↔ 1486.
Промах по кнопке в точке конверсии — самая дорогая мелочь, какая бывает, и
выглядит она недоделанностью, а не живостью.
min-height в 2.8em — ровно две строки при line-height 1.4. На десктопе
карточка стоит в гриде с выключкой по низу и ничего не двигала, но правило
общее: так одинаково на всех ширинах и не сломается от новой книги с длинным
запросом.
⛔ НЕ МЕНЯЙТЕ line-height, НЕ ПЕРЕСЧИТАВ min-height: они связаны. */
.bp-hero .card__q{color:var(--body);line-height:1.4;font-size:clamp(.95rem,1.05vw,1.18rem);
min-height:2.8em;text-wrap:pretty}
/* Волосяная черта под карточкой — та же, что держит линейку под заголовком:
на полотне тексту нужна опора, иначе он висит. Растёт вместе с появлением. */
.bp-hero .card__rule{height:1px;background:var(--acc);opacity:.34;width:0;justify-self:end;
transition:width .7s var(--e-enter) .1s}
.bp-hero .scene[data-cap="1"] .card__rule{width:100%}
/* ⚠️ ТЕНЬ ЗДЕСЬ СИЛЬНЕЕ, ЧЕМ У ЗАГОЛОВКА, И ЭТО НЕ ПЕРЕСТРАХОВКА.
Пока карточка появлялась только под курсором, она лежала на ЗАМЕРШЕЙ и
притушенной сцене: при hold="1" .web__dim гасит полотно на 32%, и трёх
слоёв тени хватало с запасом. Теперь карточка стоит всегда — то есть на
полном, непритушенном полотне, и под неё раз в несколько секунд подъезжает
любая обложка, включая бирюзовую «Тёплые руки» и кремовую «Всё уже взошло».
Замерено на 1512: на светлой обложке «Экземпляр № 001» и название тонули.
Четвёртый слой в 52 px — мягкое тёмное гало, которое не читается плашкой
(плашку тут ставить нельзя: обложки — товар, см. правило над h1). */
.bp-hero .cap__hint,
.bp-hero .card__no,
.bp-hero .card__t,
.bp-hero .card__q{
text-shadow:0 1px 10px rgb(var(--color-bg-deep-rgb) / .95),0 0 24px rgb(var(--color-bg-deep-rgb) / .92),
0 0 52px rgb(var(--color-bg-deep-rgb) / .9),0 0 3px rgb(var(--color-bg-deep-rgb) / .95)}
/* ═══ СЦЕНА В ТРИ ЯРУСА ══════════════════════════════════════════════════
ПОЛНАЯ ПЕРЕСБОРКА РАЗМЕЩЕНИЯ (правка Юрия 18.08: «переделай ВСЁ с нуля»).
ЧТО БЫЛО НЕ ТАК. Весь текст стоял колонной в левой половине кадра: три
абзаца подряд одинакового веса, заголовок всего вдвое крупнее корпуса,
врезка — тёмным прямоугольником посреди них. Получался документ, положенный
на красивый фон. Плюс колонна в 54vw держала меру на голодном пайке и
заставляла тушить половину полотна ширмой.
ЧТО СТАЛО. Кадр разложен на три яруса во всю ширину:
I · КОЛОНТИТУЛ — марка слева, девиз справа, прижаты к верхней кромке.
II · ЗАГОЛОВОК — доминанта. Освободившееся место позволило поднять кегль
вдвое (было ~49 px на 14", стало ~95): теперь между заголовком и
корпусом пять с половиной крат, а не два с половиной. Ровно это и
отличает кадр от документа.
III· ПОЛОСА — весь корпус ушёл вниз и лёг тремя колонками во всю ширину
кадра. Колонка получилась ~420 px вместо прежних 240 — мера выросла до
~50 знаков, и это при том, что текст занимает вдвое меньше высоты, чем
когда стоял в столбик.
Полотно от этого выиграло больше всех: верхние две трети кадра теперь его
целиком, гасить приходится только низ. */
/* ⚠️ КОЛОНКА ОБЯЗАНА БЫТЬ minmax(0,1fr), А НЕ ПОДРАЗУМЕВАЕМОЙ auto.
Неявная колонка грида сайзится по содержимому — и вся сцена сжималась до
1117 px при кадре в 1512: полоса не доходила до правого края, кнопка
останавливалась за 275 px до него, и правый нижний угол выглядел пустым
(Юрий это и увидел). Колонки текста при этом теряли пятую часть меры. */
.bp-hero .stage{position:absolute;inset:0;z-index:8;display:grid;
grid-template-columns:minmax(0,1fr);
grid-template-rows:auto 1fr auto;
/* Ни один ярус не должен заводить неявных дорожек — см. grid-column у .cap */
padding:clamp(18px,2.8vh,34px) var(--pad) clamp(20px,3vh,36px);
pointer-events:none}
/* ⚠️ КУРСОР РАЗРЕШЁН АДРЕСНО, А НЕ «ВСЕМ ДЕТЯМ СЦЕНЫ».
Здесь стояло `.stage > * {pointer-events:auto}` плюс отдельное правило,
гасившее заголовок и колонтитул. Оно не работало — и это чистая
специфичность: `.stage > *` весит один класс (0,1,0), а `h1` — один тег
(0,0,1), и тег проигрывает. Так же молча проигрывало и `pointer-events:none`
у подсказки в углу.
Итог замером: 47% площади полотна курсор не брал вовсе. Перехватывали
заголовок, окно ролика, его колонка, слово внутри и карточка в углу —
человек вёл мышью по обложкам, а книги не отзывались. Ровно на это Юрий и
указал («много мест если навести — не наводится, особенно верхний ряд»).
Теперь сцена не ловит курсор целиком, а право получает единственный, кому
оно нужно, — нижняя полоса с кнопкой и ссылкой. Заголовок больше не
выделяется мышью: на первом экране это никому не нужно, а живое полотно —
нужно. */
.bp-hero .deck{pointer-events:auto}
/* ⚠️ ВЕСЬ ТИП, ЛЕЖАЩИЙ НА ПОЛОТНЕ, НЕСЁТ СОБСТВЕННЫЙ КОНТРАСТ.
Это принципиальнее, чем кажется. Читаемость заголовка и колонтитула нельзя
обеспечивать затемнением полотна: обложки — товар, и каждый процент ширмы
гасит именно его. Мы дважды прошли этот маятник — сначала эллипс не
дотягивался до конца строки и тире тонуло в обложке, потом растянулся до
78vw и выжег левую треть кадра. Тень по тексту снимает вопрос вовсе: она
работает на любом фоне, ничего не гасит, статична и стоит ноль на кадре.
Ширме после этого остаётся лишь мягкая подложка под самый плотный набор. */
.bp-hero h1,
.bp-hero .brand,
.bp-hero .vid__cap,
.bp-hero .lede{text-shadow:
0 1px 14px rgb(var(--color-bg-deep-rgb) / .92),
0 0 34px rgb(var(--color-bg-deep-rgb) / .8),
0 0 4px rgb(var(--color-bg-deep-rgb) / .75)}
/* ═══ ЛЕСТНИЦА ПОЯВЛЕНИЯ ══════════════════════════════════════════════════
🔴 ЗАДЕРЖКИ УКОРОЧЕНЫ ВДВОЕ (было .16 / .28 / .42 / .5 с). Слепой замер
рецензента: на кадре t≈0.3 с нижняя половина экрана — три колонки, гарантия,
цена, кнопка — практически невидима, и первое, что встречает человека, это
стена обложек без единого читаемого предложения о сделке. Полсекунды на
экране, где живут пять, — это десятая часть всего внимания, потраченная на
красивый вход.
Лестница сохранена (колонтитул → заголовок → лид → полоса), но сжата так,
что к 0.35 с читается уже всё. Порядок важнее длительности: он ведёт взгляд,
а не развлекает. */
/* ЯРУС I — колонтитул. Так набирают колонтитул книги: слева марка, справа
девиз (строка Юрия от 17.08 21:08). Ноль лишней высоты. */
.bp-hero .top{grid-row:1;display:flex;align-items:center;justify-content:space-between;gap:24px;
opacity:0;animation:hero-riseIn .7s var(--e-enter) .06s forwards}
.bp-hero .brand{display:flex;align-items:center;gap:10px;margin:0;
font-family:var(--mono);font-size:clamp(9px,.62vw,10.5px);letter-spacing:.32em;
text-transform:uppercase;color:var(--sub);white-space:nowrap}
.bp-hero .brand i{width:15px;height:15px;flex:none;border-radius:50%;border:1px solid var(--acc);
position:relative}
.bp-hero .brand i::after{content:"";position:absolute;inset:4.5px;border-radius:50%;background:var(--acc)}
/* ═══ ВИДЕО В УГЛУ ══════════════════════════════════════════════════════
⚠️ ДИАМЕТР 76–96 px — ЭТО НЕ ВКУСОВЩИНА, А ПОРОГ УЗНАВАНИЯ ЛИЦА. Мельче
60 px лицо перестаёт читаться лицом и превращается в значок: доверия такой
кружок не добавляет, а место занимает. Крупнее сотни начинает спорить с
заголовком, который обязан оставаться единственной доминантой.
⚠️ ПОДПИСЬ СЛЕВА, А НЕ ПОД КРУЖКОМ. Под ним она уехала бы на полотно и
потребовала собственного затемнения; слева она попадает в тот же градиент
колонтитула, что и марка, и ничего не стоит.
⚠️ pointer-events:auto ОБЯЗАТЕЛЕН: сцена курсор не ловит (см. разбор над
.deck), иначе кружок будет виден и не нажат. */
.bp-hero .vid__cap{font-family:var(--mono);font-size:clamp(9px,.62vw,10.5px);
letter-spacing:.18em;text-transform:uppercase;color:var(--mut);
text-align:right;line-height:1.65;white-space:nowrap;
transition:color .3s var(--e-std)}
.bp-hero .vid__disc{position:relative;flex:none;
/* Диаметр поднят с 76–96 до 92–118: на прежнем лицо считывалось, но
приходилось всматриваться, а кружок должен звать, а не проверять зрение. */
width:clamp(92px,7.4vw,118px);aspect-ratio:1;border-radius:50%;overflow:hidden;
/* ПЛЕЙСХОЛДЕР ПОСТЕРА. Тёплое пятно уходит в тень книзу — так же, как
освещены обложки, чтобы кружок читался частью этого мира, а не вставкой
из другого. Заменяется на без единой правки остальных правил. */
background:
radial-gradient(circle at 42% 34%,rgb(var(--color-accent-strong-rgb) / .30) 0%,
rgb(var(--color-accent-strong-rgb) / .10) 42%,transparent 70%),
linear-gradient(160deg,var(--color-border) 0%,var(--color-bg-elevated) 62%,var(--color-bg) 100%);
box-shadow:0 0 0 1px rgb(var(--color-accent-rgb) / .34),0 14px 34px rgba(0,0,0,.5);
transition:box-shadow .35s var(--e-std),transform .35s var(--e-enter)}
/* Знак воспроизведения — треугольник на границах, без картинки и шрифта. */
.bp-hero .vid__play{position:absolute;top:50%;left:calc(50% + 2px);
width:0;height:0;transform:translate(-50%,-50%);
border-top:9px solid transparent;border-bottom:9px solid transparent;
border-left:15px solid var(--acc);
transition:border-left-color .3s var(--e-std)}
/* Кадр берётся по ширине, а голова сидит в верхней трети вертикального
ролика — поэтому окно смещено вверх, иначе в круг попадает торс. */
.bp-hero .vid__v{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:50% 10%;display:block}
/* Знак воспроизведения лежит поверх кадра и должен читаться на любом:
собственная тень вместо плашки — плашка закрыла бы лицо. */
.bp-hero .vid__play{filter:drop-shadow(0 2px 6px rgba(0,0,0,.75))}
/* ЯРУС II — заголовок. Прижат к верхней трети, а не по центру: под ним должен
остаться воздух, иначе доминанта превращается в шапку.
⚠️ v22: МЕСТО В СЕТКЕ ДЕРЖИТ .lead, А НЕ h1. В ярус въехал лид, и два
элемента в одной ячейке грида легли бы друг на друга: у .cap та же
grid-row:2, и она уже занимает низ ячейки (align-self:end). Обёртка решает
это без единой новой дорожки — h1 и лид едут вместе как один предмет.
Если будете возвращать grid-row на h1 — не забудьте снять его с .lead,
иначе заголовок встанет в неявную дорожку и полоса уедет за кадр. */
@keyframes hero-riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* ⛔ НИКАКОГО max-width НА .lead — ЭТО ЛОВУШКА, В КОТОРУЮ Я УЖЕ ПОПАЛ.
Стояло max-width:min(100%,52ch), и выглядело безобидно. Но `ch` считается от
ШРИФТА САМОГО ЭЛЕМЕНТА, а .lead — обычный
с кеглем тела в 16 px.
52ch превращались в 508 px, и в эти 508 px зажимался ЗАГОЛОВОК в 90 px: на
1920 «Создаём книги —» ломалось на «Создаём / книги —», хотя свободного
места справа оставалось больше тысячи пикселей. В v21 такого не было —
там max-width стоял на самом h1, где 38ch считаются от 90 px и в реальную
ширину никогда не упираются.
Меру держат дети, каждый в своём кегле: h1 — 38ch от заголовочного,
.lede — 46ch от своего. Обёртке ширину ограничивать нечем и незачем. */
.bp-hero .lead{grid-row:2;grid-column:1;align-self:start;margin:clamp(20px,5vh,64px) 0 0}
.bp-hero h1{margin:0;max-width:min(100%,38ch);
font-weight:250;color:var(--fg);letter-spacing:-.038em;line-height:.98;
text-wrap:balance;
/* Ножка «Создаём книги —» вдвое короче прежней «Создаём персональные
книги —», и потолок кегля поднят следом: доминанта не должна теряться
оттого, что текста в ней стало меньше. */
font-size:clamp(2rem,.5rem + 4.3vw,min(6rem,12.2vh));
opacity:0;animation:hero-riseIn .8s var(--e-enter) .12s forwards}
/* ЛИД — сделка одной строкой. Смысл разобран в шапке файла; здесь только
почему он набран ИМЕННО так.
⚠️ КЕГЛЬ ДЕРЖИМ НА 19–22 px, НЕ БОЛЬШЕ. Соблазн поднять его велик — строка
несёт главное сообщение экрана. Но между заголовком (до 96 px) и корпусом
полосы (~17 px) сейчас пять с половиной крат, и это то, чем кадр отличается
от документа. Лид крупнее 22 px становится вторым заголовком, разница
схлопывается до двух крат, и экран снова читается страницей.
⚠️ И НЕ УЖЕ 40ch: строка обязана лечь в ОДНУ, максимум в две строки. На
трёх она перестаёт быть репликой и становится абзацем, а абзац на этом
месте спорит с полосой внизу — там уже есть три.
Верхний отступ отрицательный по той же причине, что у .roll: под окном
ролика остаётся 0.235em пустоты от маски, и без подтяга лид отваливается
от заголовка на видимую пропасть. */
.bp-hero .lede{position:relative;margin:clamp(14px,1.9vh,24px) 0 0;color:var(--body);
font-weight:300;
max-width:min(100%,46ch);line-height:1.38;text-wrap:pretty;
font-size:clamp(1rem,.86rem + .5vw,1.34rem);
opacity:0;animation:hero-riseIn .8s var(--e-enter) .2s forwards}
/* 🔴 ЛИДУ НУЖНА СОБСТВЕННАЯ ОПОРА, И ТЕНИ ЗДЕСЬ НЕ ХВАТАЕТ.
Тень спасает белый набор на тёмном, но лид лежит на едущей ленте, и под него
раз в несколько секунд подъезжает ЗОЛОТОЕ название обложки — того же роста,
почти на той же базовой линии и близкого тона. Слепой рецензент прочитал
получившееся как «мы отвечаем на негоОксана» и «на него Владимир»: главная
строка экрана ломалась ровно там, где человек должен понять сделку.
Тень такое не лечит в принципе — она гасит фон ВОКРУГ глифа, а мешает здесь
не фон, а чужой текст той же яркости.
Слой узкий и вытянут вдоль строки, гаснет к правому краю: обложки под ним
темнеют ровно на ширину набора и остаются видны — ширмой это не становится
(см. правило над h1). Тот же приём, что у карточки в углу, и по той же
причине; радиус так же не превышает 100%, иначе появится видимый край. */
/* Подложки у лида нет: см. запрет над .cap и разбор в .veil. */
/* Опора под сделкой — тем же акцентом, что в полосе: «целой книгой» и
есть то, ради чего строка написана. */
.bp-hero .lede b{color:var(--fg);font-weight:600}
/* ЦЕПОЧКА. На десктопе скрыта — там путь разложен тактами полосы.
Стрелка рисуется псевдоэлементом между звеньями, а не символом в разметке:
так последнее звено не тащит за собой висячую стрелку при переносе. */
.bp-hero .chain{display:none;margin:clamp(10px,1.6vh,16px) 0 0;
font-family:var(--mono);font-size:12px;letter-spacing:.12em;
text-transform:uppercase;color:var(--sub)}
.bp-hero .chain span + span::before{content:"→";margin:0 .7em;color:var(--acc);opacity:.75}
/* ═══ РОЛИК ПОЛУЧАТЕЛЯ ════════════════════════════════════════════════════
⚠️ ШАГ РАВЕН ВЫСОТЕ ОКНА — и это единственная величина, других здесь нет.
Ошибка, которую ловили дважды: шаг делали по высоте СТРОКИ (1.2em, потом
1.44em), а окно — того же размера. Тогда соседнее слово стоит ink-в-ink к
границе окна, и его хвосты («р», «у», «б») торчат в срезе: под заголовком
висела чёрточка, а в момент смены — обрубки букв.
ПОЧЕМУ 1.78em, А НЕ 2.08em. Сосед уходит за край окна на (шаг − 1.31)/2, где
1.31em — содержательная коробка Lora italic. Формально хватило бы и 1.44em,
но метрика шрифта не учитывает выносные курсива: хвост «р» вылезает ещё
примерно на 0.12em, на этом 1.44em и посыпался. 1.78em даёт зазор 0.235em —
вдвое больше выноса. 2.08em, поставленные сгоряча, были перестраховкой, и
весь лишний воздух осел между строками заголовка: Юрий увидел пропасть.
--rpad .22em, а не .3em: при шаге 1.78em низ окна отстоит от хвоста «р»
всего на 15.6 px, и растушёвка в 18.7 px подтирала выносные у пяти слов из
девяти на 2–3 px. Замерено по actualBoundingBoxDescent.
⚠️ ЭТОТ БЛОК ОДНАЖДЫ БЫЛ УДАЛЁН ЦЕЛИКОМ вместе со старой колонной при
пересборке композиции — и заголовок мгновенно превратился в столбик из
шести слипшихся строк («о васо вашем ребёнкео вашей паре…»), потому что без
.roll__win пропадает и окно, и обрезка. Если правите разметку заголовка —
проверяйте, что эти пять правил на месте. */
/* margin-top −.38em, а не −.24em: на кегле 79 px шаг окна в 1.78em даёт 141 px,
и при прежнем подтяге между «Пишем книгу —» и получателем открывалась
пропасть — та самая, на которую Юрий указывал ещё в v18. Подтяг съедает её,
не трогая ни шаг окна, ни маску, то есть выносные курсива по-прежнему целы. */
.bp-hero .roll{display:block;margin-top:-.38em;--rstep:1.78em;--rpad:.22em}
/* 🔴 МАСКА СНЯТА — ОНА И БЫЛА ПРИЧИНОЙ РАЗЪЕХАВШЕГОСЯ ЗАГОЛОВКА.
Здесь сходились три вещи: overflow:hidden, mask-image и transition:transform
на дочерней колонке. Маска на слое, который непрерывно анимируется, — тот
самый composited-опасный приём, от которого этот файл предостерегает в
разборе над .bk: браузер заводит под маску отдельную поверхность и в
какой-то момент перестаёт её перерисовывать. Тогда обрезка отваливается, и
соседние слова ролика проступают поверх заголовка полупрозрачными
призраками — Юрий поймал это на боевом файле.
⚠️ ОБРЕЗКУ ДЕЛАЕТ contain:paint, А НЕ ТОЛЬКО overflow. contain — это
гарантия на уровне спецификации: ни один потомок не имеет права рисовать
за коробкой, что бы ни решил композитор. Стоит дешевле маски и не заводит
лишних поверхностей.
⚠️ ЧТО ПОТЕРЯЛИ. Маска растушёвывала верх и низ окна на 0.22em, пряча
выносные курсива в срезе. Их прячет и шаг: при 1.78em под ink-ом остаётся
0.235em пустоты — больше, чем вылет хвоста «р» (≈0.12em). То есть чернила
до кромки не доходят и без растушёвки; ради этого запаса шаг и подбирался
(см. разбор выше).
⛔ НЕ ВОЗВРАЩАЙТЕ mask-image СЮДА. Если понадобится смягчить кромку —
делайте это неподвижным слоем поверх, а не маской на движущемся. */
.bp-hero .roll__win{display:block;position:relative;overflow:hidden;contain:paint;
height:var(--rstep);min-width:var(--rw-max,0px)}
.bp-hero .roll__col{display:block;position:absolute;left:0;top:0;width:max-content;
transition:transform .95s var(--e-enter)}
.bp-hero .roll__it{display:block;width:max-content;height:var(--rstep);line-height:var(--rstep);
white-space:nowrap;font-family:var(--ital);font-style:italic;color:var(--acc);
letter-spacing:-.018em}
/* Линейка идёт по низу окна. При шаге 1.78em под ink-ом слова остаётся 0.235em
пустоты, поэтому подтягивать её можно не больше чем на 0.06em — иначе она
сядет на хвост «р» в «партнёре». */
.bp-hero .roll__rule{display:block;height:1px;background:var(--acc);opacity:.34;
width:var(--rw,10ch);margin-top:-.06em;transition:width .95s var(--e-enter)}/* ═══ ЯРУС III · ПОЛОСА ══════════════════════════════════════════════════
Три такта в три колонки во всю ширину кадра. Это НЕ те три столбца, что были
в v20: там колонка была 240 px и держала 24 знака в строке — газетная врезка,
из-за которой кегль упирался в потолок. Здесь колонка ~420 px и мера ~50
знаков, потому что полоса идёт во всю ширину, а не в 54vw.
Колонки равной длины по построению: в каждом такте 27–31 слово.
Волосяная линейка сверху — граница между кадром и полосой; она же не даёт
тексту «висеть» на полотне. */
/* ⚠️ ПОДЛОЖКА ПРИНАДЛЕЖИТ САМОЙ ПОЛОСЕ, А НЕ ШИРМЕ. Это была главная ошибка
всей нижней части: затемнение задавалось процентами высоты кадра, а полоса
стоит там, где кончился её собственный текст. На 727 px они совпадали, на
1100 — расходились, и сквозь колонки просвечивали корешки «Всё уже взошло»
и номера обложек. Юрий это и увидел.
Теперь полоса несёт затемнение сама: отрицательные поля выводят фон под
самые края кадра, а 88 px разгона сверху дают мягкий вход без шва. Где бы
полоса ни оказалась, текст всегда лежит на плотном — по построению, а не по
совпадению. Ширме остаётся только заголовок, и полотно открылось ещё выше. */
.bp-hero .deck{position:relative;grid-row:3;align-self:end;
opacity:0;animation:hero-riseIn .8s var(--e-enter) .26s forwards}
/* ⚠️ ПОДЛОЖКА МЕРЯЕТСЯ ОТ ОКНА, А НЕ ОТ СЕТКИ. Первый заход делал её фоном
самой полосы с отрицательными полями — и справа она не доставала до края:
замерено 1238 px вместо 1512, потому что ширина колонки грида считается по
содержимому, а не по контейнеру. Из-за этого сквозь правую треть полосы
по-прежнему просвечивали обложки, хотя текст слева уже лежал на плотном.
Отдельный слой в 100vw с выключкой по центру не зависит от сетки вовсе и
доедет до края при любой раскладке.
92 px разгона сверху дают мягкий вход без шва: к верхней кромке полосы
плотность уже .92, а над ней полотно открыто. */
.bp-hero .deck::before{content:"";position:absolute;z-index:-1;pointer-events:none;
left:50%;transform:translateX(-50%);width:100vw;
/* ⚠️ РАЗГОН 92 px БЫЛ КОРОТОК. Обложка высотой 300–400 px попадала в него
серединой: низ уже в глухом чёрном, верх ещё в полную силу — карточка
выглядела обрезанной ножом, и стык полосы читался полосой. 170 px — это
примерно половина ближней обложки, на такой длине переход перестаёт быть
виден вовсе. Плотность к верхней кромке полосы прежняя, .93. */
top:-170px;bottom:calc(-1 * clamp(24px,3.4vh,42px));
background:linear-gradient(180deg,
rgb(var(--color-bg-deep-rgb) / 0) 0%,
rgb(var(--color-bg-deep-rgb) / .14) 9%,
rgb(var(--color-bg-deep-rgb) / .46) 18%,
rgb(var(--color-bg-deep-rgb) / .8) 25%,
rgb(var(--color-bg-deep-rgb) / .93) 31%,
rgb(var(--color-bg-deep-rgb) / .99) 40%,
var(--color-bg-deep) 50%)}
/* Зазор вынесен в переменную: им и только им разводятся колонки — см.
разбор снятых вертикальных линеек ниже. */
.bp-hero .beats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
--bgap:clamp(20px,3vw,58px);gap:var(--bgap);margin:0;padding:0;list-style:none;
border-top:.5px solid rgb(var(--color-paper-rgb) / .14);padding-top:clamp(12px,1.8vh,20px)}
/* 🔴 ВЕРТИКАЛЬНЫЕ ЛИНЕЙКИ МЕЖДУ КОЛОНКАМИ СНЯТЫ (правка Юрия 20.08:
«лишние полоски разграничивающие колонки текста появились, ужасно
выглядит»). Довод в их пользу был газетный: вертикаль сообщает объём до
чтения и снижает порог «начать читать». На этой полосе он не сработал —
у каждой колонки уже есть свой знак сверху, и линейка оказалась третьим
разделителем подряд после знака и зазора: полоса читалась таблицей.
⛔ НЕ ВОЗВРАЩАТЬ. Если колонки снова покажутся слипшимися, лечить нужно
зазором --bgap, а не новой графикой. */
.bp-hero .bt{position:relative}
/* ЗНАК КОЛОНКИ. Рисован волосяной линией в 0.9 px — той же, что печать и
рамки обложек: на первом экране не должно быть двух разных графических
языков. Знак не украшение: он даёт глазу точку входа в колонку, которой
раньше не было вовсе — три абзаца читались как три простыни (правка Юрия
18.08). */
/* ⚠️ ВЫКЛЮЧКА ЗНАКА ПО ЛЕВОМУ КРАЮ НАБОРА, А НЕ ПО КОРОБКЕ SVG. У всех трёх
рисунков внутри квадрата 40×40 оставались разные поля — 3.2, 5.1 и 7.2 —
и на кадре знаки висели правее первой буквы абзаца, каждый на свою величину.
viewBox у каждого обрезан по фактическим границам рисунка, поэтому теперь
они выключены по одной оси с текстом и одного оптического размера. */
/* ⛔ РИМСКИХ ЦИФР У ТАКТОВ НЕТ И БЫТЬ НЕ ДОЛЖНО. Я завёл их, чтобы колонки
читались тремя шагами, а не тремя абзацами, — и это была ошибка: знак уже
делает ровно эту работу, он и есть маркер такта. Две маркировки подряд не
усиливают друг друга, а спорят, и цифра читается служебным мусором.
Правило на будущее: если у элемента уже есть визуальный маркер, второй не
добавляет ясности — он добавляет шум. */
.bp-hero .bt__i{display:block;width:clamp(32px,2.7vw,42px);height:auto;color:var(--acc);
margin:0 0 clamp(10px,1.5vh,15px)}
/* ⛔ РАЗРЕЗАТЬ ТАКТ НАДВОЕ — ХУЖЕ, ЧЕМ ОСТАВИТЬ ПРОСТЫНЁЙ. Я разбил каждый
такт по смысловой цезуре и набрал части разным тоном: думал, так появится
вход в абзац. На деле один такт превратился в два обрывка — вторая часть
с приглушённым тоном стала читаться сноской, хотя в третьей колонке там
как раз самое важное («тон, цвета, обложка — всё персонально»). И низ
колонок разъехался: 3+3, 3+3, 4+2 строки при общей высоте, выровненной по
верху.
✅ ЧИТАЕМОСТЬ УЗКОЙ КОЛОНКИ ДАЁТ НЕ РАЗРЕЗ, А ВОЗДУХ МЕЖДУ СТРОК. При мере
в 42 знака межстрочный 1.5 держит текст плотной серой массой; 1.62 её
разжимает, не трогая ни высоту блока целиком, ни порядок чтения.
⛔ НЕ ВОЗВРАЩАЙТЕ РАЗБИВКУ НА ДВА