/* ============================================================================ site/film.css — скролл-фильм «Грузовик». Два состояния одной разметки: • БЕЗ класса .film-on (нет JS, либо prefers-reduced-motion) — обычная секция: постер сверху, реплики столбиком под ним. Законченный экран, а не обломок. • С классом .film-on — липкая сцена во весь экран, кадры на , реплики выплывают по прогрессу (альфу и подъём считает film.js). Класс вешает крошечный синхронный скрипт в , а не сам модуль: модуль отложенный, и переключение раскладки после разбора HTML дало бы видимый перескок. ========================================================================== */ .film{ position:relative; isolation:isolate } .film-stage{ position:relative; overflow:hidden; /* Статичный вид — обычная секция страницы: те же поля, что у .wrap, и запас сверху под шапку. В режиме фильма всё это снимается. */ width:100%; max-width:var(--maxw); margin:0 auto; padding:clamp(122px,15vh,196px) var(--pad) clamp(40px,7vh,88px); } /* Постер = первый кадр. Держит LCP и лежит под холстом, пока не доехали кадры: холст до этого прозрачный, поэтому пустого экрана нет ни секунды. Обёртка (AVIF/WebP/JPEG) в раскладке не участвует вовсе. */ .film-stage picture{ display:contents } .film-poster{ display:block; width:100%; height:auto; border-radius:var(--r); } .film-canvas{ display:none } .film-rail{ display:none } /* ── реплики: статичный столбик ─────────────────────────────────────── */ .film-beats{ display:grid; gap:56px; padding:56px 0 8px } .beat{ display:grid; gap:18px; align-content:start } .beat-eyebrow{ font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--acc); } .beat-eyebrow.is-quiet{ color:var(--muted) } .beat h1,.beat h2{ max-width:16ch } .beat p{ max-width:46ch; color:var(--muted); font-size:clamp(15px,1.5vw,18px); line-height:1.5 } /* ── карточка «что видит FLUX» ──────────────────────────────────────── */ .beat-panel{ width:min(360px,100%); padding:18px 18px 14px; border-radius:20px; background:var(--glass); border:var(--hair); box-shadow:var(--bevel),var(--shadow); } /* В фильме карточка стоит не на странице, а на кадре — и самый яркий кусок ленты («просвеченный» кузов с грузом) приходится ровно под неё. Обычного стекла там не хватает: строки заказа тонут в свечении. Поэтому под стеклом плотная подложка — плотнее общего --glass-base, тот рассчитан на спокойный фон страницы. */ .film-on .beat-panel{ background-color:rgba(7,17,14,.86); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); } .beat-panel-h{ display:flex; align-items:center; gap:9px; padding-bottom:12px; margin-bottom:10px; border-bottom:var(--hair); font-size:13px; font-weight:700; letter-spacing:-.01em; } .beat-panel-h svg{ width:17px; height:17px; flex:none; stroke:var(--acc) } .beat-rows{ display:grid; gap:9px } .beat-row{ display:grid; grid-template-columns:20px 1fr auto; align-items:center; gap:10px; font-size:13.5px } .beat-row svg{ width:18px; height:18px; stroke:var(--muted) } .beat-row b{ font-weight:500; color:var(--ink) } .beat-row span{ color:var(--muted); font-size:12.5px; white-space:nowrap } .beat-foot{ padding-top:11px; margin-top:11px; border-top:var(--hair); font-size:11.5px; color:var(--muted); letter-spacing:.01em } /* ══════════════════════════════════════════════════════════════════════ Режим фильма ══════════════════════════════════════════════════════════════════════ */ .film-on .film{ height:660vh; height:660svh; } .film-on .film-stage{ position:sticky; top:0; height:100vh; height:100svh; max-width:none; padding:0; background:var(--bg); } .film-on .film-poster, .film-on .film-canvas{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:0; } .film-on .film-canvas{ display:block; opacity:0; transition:opacity .45s var(--e-micro); } .film-on .film.is-live .film-canvas{ opacity:1 } /* Затемнение слева под текст: кадры светлые (закат, лампы ангара), белая типографика на них без подложки не читается. Второй слой — низ кадра, чтобы рельс прогресса и подпись не висели в пустоте. */ .film-scrim{ display:none } .film-on .film-scrim{ display:block; position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(100deg, rgba(6,16,12,.90) 0%, rgba(6,16,12,.72) 26%, rgba(6,16,12,.30) 52%, rgba(6,16,12,0) 74%), linear-gradient(0deg, rgba(6,16,12,.72) 0%, rgba(6,16,12,0) 26%); } /* Все реплики лежат стопкой в центре сцены. Абсолютом, а не потоком: иначе каждая двигала бы соседние, а нужно чтобы одна уходила ровно туда, откуда приходит следующая. */ .film-on .film-beats{ position:absolute; inset:0; z-index:2; display:block; padding:0 } .film-on .beat{ position:absolute; left:50%; top:50%; translate:-50% -50%; /* центрирование по своей высоте */ transform:translate3d(0,18px,0); /* этот канал ведёт film.js */ width:min(1180px,100% - 48px); opacity:0; will-change:transform,opacity; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:48px; } .film-on .beat > .beat-copy{ grid-column:1; max-width:640px } .film-on .beat-1{ opacity:1 } .film-on .beat-copy{ display:grid; gap:18px; align-content:center } /* Unbounded шире Manrope — кегль ниже прежнего, размах тот же. */ .film-on .beat h1{ font-size:clamp(30px,4.4vw,58px); max-width:14ch } .film-on .beat h2{ font-size:clamp(24px,3.5vw,44px); max-width:15ch; font-weight:700; letter-spacing:-.01em; line-height:1.12 } .film-on .beat p{ color:#C6D8D1; max-width:44ch; text-shadow:0 1px 18px rgba(0,0,0,.5) } .film-on .beat h1, .film-on .beat h2{ text-shadow:0 2px 30px rgba(0,0,0,.55) } .film-on .beat-panel{ grid-column:2; justify-self:end } /* ── рельс прогресса: где я в фильме ──────────────────────────────────── Он же заменяет «крутите вниз»: полоса, которая наливается, объясняет происходящее лучше подпрыгивающей стрелки — и ничего не мигает. */ .film-on .film-rail{ display:block; position:absolute; z-index:3; right:26px; top:50%; translate:0 -50%; width:2px; height:min(240px,32vh); border-radius:2px; background:rgba(255,255,255,.14); overflow:hidden; } .film-on .film-rail i{ display:block; width:100%; height:100%; background:linear-gradient(180deg,var(--acc-d),var(--acc-lit)); transform:scaleY(var(--p,0)); transform-origin:top; } .film-on .film-rail b{ position:absolute; left:-3px; width:8px; height:1px; background:rgba(255,255,255,.28); } .film-on .film-cap{ position:absolute; z-index:3; left:50%; translate:-50% 0; bottom:22px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(230,243,238,.42); opacity:calc(1 - var(--p,0) * 7); } /* ── телефон ────────────────────────────────────────────────────────── */ @media (max-width:900px){ /* Путь фильма на телефоне короче: шесть реплик на 5,6 экрана — это минута прокрутки большим пальцем ради ролика, который сам по себе длится десять секунд. Реплики те же и в том же порядке, просто кадр перематывается живее — так фильм читается за один жест, а не за десять. */ .film-on .film{ height:440vh; height:440svh } /* Кадр вертикальный, и середину занимает сама машина. Реплику сажаем на низ: там она не спорит с сюжетом и стоит на плотной подложке. Прижимаем по нижнему краю, а не по центру — иначе реплики разной высоты прыгали бы друг относительно друга. */ .film-on .beat{ grid-template-columns:minmax(0,1fr); gap:22px; top:auto; bottom:clamp(46px,8vh,92px); translate:-50% 0; align-content:end; justify-items:start } .film-on .beat-panel{ grid-column:1; justify-self:start; width:min(320px,100%) } .film-on .film-rail{ right:13px; top:38%; height:min(150px,22vh) } .film-on .film-cap{ display:none } /* низ занят репликой */ .film-on .film-scrim{ background: linear-gradient(180deg, rgba(6,16,12,.62) 0%, rgba(6,16,12,.16) 22%, rgba(6,16,12,.60) 54%, rgba(6,16,12,.93) 100%); } } @media (max-width:520px){ .film-on .beat h1{ font-size:clamp(26px,7vw,38px) } .film-on .beat h2{ font-size:clamp(22px,5.8vw,30px) } .film-on .beat-panel{ display:none } /* на 360 px карточка съедает реплику */ }