/* ===================================================================== 02 · СОБЫТИЯ — ПОДПИСИ, ВАРИАНТ B: «СВЯЗЬ РИСУЕТСЯ МАРКЕРОМ» Файл собран поверх preview-events-v2/b2.css. Всё, что относится к композиции — кадры, «100+», маршрут, категории, полосы, появление, — перенесено оттуда БЕЗ ИЗМЕНЕНИЙ. Отличается ровно один слой: подписи. ┌─ СИСТЕМА ПОДПИСЕЙ ────────────────────────────────────────────────┐ │ 1. Один кегль. Всё, что подписывает объект, набрано одним │ │ подписным кеглем (--caption-fs, 16/21) в полную силу чернил. │ │ Мельче и вполсилы набран только колонтитул «/ 02 — события» — │ │ единственная строка, которая ни к чему не относится. │ │ │ │ 2. Подпись прижата: 10–18px от кромки объекта, выключка по его │ │ краю со стороны свободного поля. Прижатой подписи графика не │ │ нужна. │ │ │ │ 3. Жест — только для группы. Если подпись относится к нескольким │ │ предметам сразу (полоса из трёх кадров, список из четырёх │ │ слов), прижаться она не может — тогда от неё идёт черта. │ │ │ │ 4. Жест всегда один и тот же: --lead-w толщиной, круглые концы, │ │ идёт вдоль группы по оптической середине подписной строки и │ │ на дальнем конце загибается крючком в сторону объекта. │ │ │ │ 5. Факт слева — реплика справа. Рукопись не подписывает и жеста │ │ не получает. │ └────────────────────────────────────────────────────────────────────┘ Толщины на развороте разведены намеренно: маршрут 2,4 — он ведёт по всей полосе; жест 1,8 — он привязывает подпись; каракуля 2,2 — она живёт только под курсором. Так три красные линии не путаются между собой. ===================================================================== */ .stage--events { --num-big: 268px; /* 104 → 78 (05.09). Дата спорила с полосой кадров по весу: её строка была почти такой же длины, как первый кадр, и разворот получал два главных предмета справа вместо одного. На 78 «2023» остаётся числом, а не подписью, но полосу больше не перебивает. */ --num-mid: 78px; --num-ls: -0.055em; --edge-r: 73px; /* правое поле, зеркально левому */ --lead-w: 1.8; /* толщина подписного жеста, в координатах сцены */ --lead-ms: 620ms; /* сколько его рисуют */ } /* Проценты, а не числа: высота блока менялась уже дважды, и зашитая цифра каждый раз отставала. */ /* ВЕРХНЕЕ ПОЛЕ 36, А НЕ 18 — И ТОЛЬКО ЗДЕСЬ. Первый экран теперь кончается красной полосой по самой кромке окна: поля под ней нет вовсе (см. .bar--bottom в hero.css). Весь просвет между первым экраном и блоком 02 держит поэтому блок 02 — своим верхним полем. 36 = 18 + 18, то есть ровно столько же, сколько на всех прочих стыках, где поле складывается из двух половинок. Остальные три стороны не тронуты: 18, как у всех. --sheet-t тем же числом сдвигает подложку листа (см. .stage в base.css) — иначе бумага красилась бы с 18 и поле было бы серым. */ .stage--events { --sheet-t: 36px; } .stage--events .paper { left: 18px; top: 36px; width: calc(100% - 36px); height: calc(100% - 54px); } .stage--events .grain { left: 18px; top: 36px; width: calc(100% - 36px); height: calc(100% - 54px); } /* --------------------------------------------------------------------- КРАСНАЯ ЛИНИЯ-МАРШРУТ — перенесена из b2 без единой правки. --------------------------------------------------------------------- */ /* ЭЛЕМЕНТА .route В БЛОКЕ 02 НЕТ (проверено 05.09 в браузере): маршрут этого разворота давно живёт в сквозной линии, а локальный SVG из разметки убран. Правила ниже — мёртвые, и высоту 1280 в них при укорачивании блока трогать было незачем. Оставлены как есть: ограничение сценой само по себе верное, и если маршрут вернут локально, оно снова понадобится. */ .stage--events .route { left: 0; top: 0; width: 1440px; height: 1280px; overflow: visible; pointer-events: none; z-index: 3; } .stage--events .route__path { fill: none; stroke: var(--red); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: var(--len, 3000); stroke-dashoffset: var(--dash, var(--len, 3000)); transition: stroke-width 0.3s ease; } .stage--events:has(.stamp--big:hover) .route__path { stroke-width: 3.6; } /* --------------------------------------------------------------------- КОЛОНТИТУЛ Единственная строка разворота, у которой нет объекта: она метит полосу. Поэтому она и выглядит иначе — мельче и вполсилы. Раньше так же выглядела подпись «кадры с площадок», из-за чего кадры и оставались на вид неподписанными. --------------------------------------------------------------------- */ .folio { left: var(--edge-text); top: 60px; font-size: 13px; line-height: 18px; opacity: 0.62; } /* --------------------------------------------------------------------- ЧИСЛА — перенесены из b2 без правок. --------------------------------------------------------------------- */ .stamp { font-family: var(--font-mono); letter-spacing: var(--num-ls); color: var(--ink); white-space: nowrap; line-height: 0.74; z-index: 4; } .stamp__layer > span, .stamp--mid > span { display: inline-block; transform-origin: 50% 88%; } .stamp .plus { color: var(--red); } .stamp--big { left: var(--edge-text); top: 104px; font-size: var(--num-big); } .stamp--mid { font-size: var(--num-mid); } /* ПОДНЯТА 05.09 с 1112 к полосе кадров. Пара «2023 / веду с этого года» стояла одна внизу разворота, в двухстах пикселях от всего остального, и держала своей пустотой лишние двести пикселей высоты. Теперь она собрана в одну группу с полосой кадров и её подписью: три кадра, «кадры с площадок» слева и дата справа — один предмет, а не два. Выключка по правому полю листа не тронута. */ /* ДАТА СТОИТ НАД ЧЕРТОЙ, А НЕ ПОД НЕЙ (05.09, по эталону Оксаны). Раньше цифры свисали ниже красной черты, и та резала пару «2023 / веду с этого года» посередине. Теперь черта проходит ПОД датой и под подписью «кадры с площадок» одной линией, а расшифровка ушла под неё — так же, как «событий» стоит под числом слева. */ /* ДАТА И ЕЁ РАСШИФРОВКА СОБРАНЫ В ПАРУ, И ПАРА ВЫВЕДЕНА НА ОДИН УРОВЕНЬ С «КАДРЫ С ПЛОЩАДОК» (05.09, по пометкам Оксаны). Было: расшифровка на 441, то есть на 19 ниже подписи слева, и между ней и числом висело 17 пустых. Стало: расшифровка ровно на 422, как подпись, а число опущено к ней вплотную — просвет 12 вместо тридцати четырёх. Ниже нельзя: над числом кончается средний кадр полосы. */ .stamp--since { right: var(--edge-r); top: 358px; text-align: right; } .stamp__layer { display: block; } .stamp__layer--ghost { position: relative; color: transparent; -webkit-text-stroke: 2.2px var(--ink); } .stamp__layer--ghost .plus { color: transparent; -webkit-text-stroke-color: var(--red); } .stamp__layer--ink { position: absolute; left: 0; top: 0; clip-path: polygon( 0 0, calc(var(--fill, 999px) + 13px) 0, calc(var(--fill, 999px) - 13px) 100%, 0 100%); } /* Кромка маркера: короткий красный штрих на границе закраски. В b2 он гасился через calc(var(--nib) * 0.9) и на снимке всё равно оставался стоять красной чертой посреди листа. Здесь состояние переехало на атрибут: нет data-nib — штриха нет вовсе. */ .stamp__nib { position: absolute; top: 6%; left: calc(var(--fill, 999px) + 11px); width: 3px; height: 88%; background: var(--red); opacity: 0; transform: rotate(6deg); transform-origin: 50% 0; pointer-events: none; } .stamp--big[data-nib] .stamp__nib { opacity: 0.9; } /* ===================================================================== ПОДПИСИ ПРАВИЛО 1 — ОДИН КЕГЛЬ. В b2 подписи были трёх калибров: 16px у числа и даты, 13px у кадра, 13px вполсилы у полосы кадров. Со стороны это читалось как разные сорта текста, и связь с объектом приходилось угадывать. Здесь у всех подписей один кегль (тот же, что у подписи под коллажем на первом экране) и одна плотность чернил. ===================================================================== */ .cap { font-size: var(--caption-fs); line-height: var(--caption-lh); z-index: 5; } /* --- ЧИСЛО «100+» ---------------------------------------------------- Было top 368 — на 66px ниже знаков, за красной линией: линия шла между числом и его подписью и разрезала пару. Стало 316 — в 14px под знаками и по левому краю числа (73, не 78: подпись выключена ровно по кромке единицы). Маршрут теперь проходит ПОД парой и работает на неё: подчёркивает число вместе с расшифровкой. */ .cap--big { left: var(--edge-text); top: 316px; } /* --- ПОЛОСА ИЗ ТРЁХ КАДРОВ ------------------------------------------- Было: правый верхний угол листа, 13px вполсилы, над кадрами и в стороне от них. Стало: под полосой, в 16px от нижней кромки первого кадра и по его левой кромке. Дальше подпись подхватывает жест. */ /* Опущена на 26: подпись начиналась ровно на нижней кромке кадра, и строка «кадры с площадок — черта — 2023» слипалась с полосой в кашу. Теперь под кадрами есть воздух, и строка читается отдельным ярусом. */ .cap--strip { left: 852px; top: 422px; } /* по левой кромке .pic--a, в 16px под полосой */ /* --- ПАНОРАМА ЗАЛА --------------------------------------------------- Подписи не было вовсе — и её роль на себя брали категории, стоявшие под кадром. Строка набрана по той же формуле, что подпись большого кадра («город · где»), и прижата к нижней кромке в 10px. Выключка по ПРАВОМУ краю кадра: справа поле свободно, а слева под кадр приходит список со своей меткой. Правая кромка панорамы — 601px, отсюда right: 839. */ /* ЭЛЕМЕНТА С ЭТИМ КЛАССОМ В РАЗМЕТКЕ НЕТ (проверено 05.09): подпись панорамы из блока убрана, правило осталось. Не трогала и не подгоняла под уменьшенный .pic--d — подгонять нечего. Оставлено на случай, если подпись вернут, как и прочее в этом проекте. */ .cap--hall { right: 839px; top: 880px; text-align: right; } /* --- СПИСОК КАТЕГОРИЙ ------------------------------------------------ Метки не было. Слово стоит по левой кромке списка — не по слову «свадьбы» (130), а по точке-маркеру (118): точка и есть настоящий левый край списка. */ /* Список подтянут под снимок и сдвинут к его левой кромке: было 118 и 130, стало 84 и 96 — метка и точки-маркеры встали почти по краю кадра, как на эталоне. Вторая колонка подобрана следом, с 380 на 273. */ .cap--list { left: 84px; top: 782px; } /* --- БОЛЬШОЙ КАДР ---------------------------------------------------- Было left 700 — на 24px левее кадра, в колодце, где идёт маршрут: подпись висела между кадром и линией. Стало 724 — ровно по левой кромке кадра, в 17px под ним. Кегль поднят с 13 до общего подписного: служебных строк на развороте больше нет. */ /* ЭЛЕМЕНТА С ЭТИМ КЛАССОМ В БЛОКЕ 02 НЕТ (проверено 05.09): у слота здесь только .reel__stub «ролика ещё нет». А вот в ОТЗЫВАХ элемент .cap--reel есть, и это правило голое — то есть оно до него достаёт. Спасает только то, что .stage--otz .cap--reel задаёт свои left/top и перебивает специфичностью. Значения ниже поэтому оставлены прежними: двигать их — значит целиться в чужой блок. */ .cap--reel { left: 724px; top: 962px; } /* --- ДАТА ------------------------------------------------------------ Единственная пара, которая и в b2 стояла по правилу: число, под ним в 10px расшифровка, выключка по правому полю листа. Не тронута. */ .cap--since { right: var(--edge-r); top: 422px; text-align: right; } /* ===================================================================== ЖЕСТ — ЧЕРТА ВДОЛЬ ГРУППЫ Рисуется только тогда, когда подпись относится к нескольким предметам сразу и физически не может прижаться ко всем. Такой случай на развороте ровно два: полоса из трёх кадров и список из четырёх слов. Устройство всегда одинаковое: · начинается сразу за словом, на оптической середине строки; · идёт вдоль группы неровной чертой — рукой, а не линейкой; · на дальнем конце загибается крючком В СТОРОНУ объекта (вверх — объект сверху, вниз — объект снизу); · заканчивается в поле, не наезжая ни на кадр, ни на текст. svg стоят в координатах сцены и viewBox 1:1 — поэтому stroke-width здесь те же пиксели, что и везде, и жест не «плывёт» при масштабе. ===================================================================== */ .lead { z-index: 4; overflow: visible; pointer-events: none; } .lead path { fill: none; stroke: var(--red); stroke-width: var(--lead-w); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--len, 460); stroke-dashoffset: var(--len, 460); } /* Жест рисуется анимацией, а не переходом: переход срабатывает только если состояние меняется ПОСЛЕ применения стиля, и когда разворот уже помечен пришедшим (например при съёмке или при переходе по якорю), выноска не рисовалась вовсе. Анимация отрабатывает всегда. */ .scene--events[data-in] .lead path { animation: lead-draw var(--lead-ms) cubic-bezier(0.25, 0.8, 0.35, 1) var(--lead-delay, 0ms) forwards; } @keyframes lead-draw { to { stroke-dashoffset: 0; } } /* Черта к полосе кадров: от конца подписи (x≈962) вправо до правого поля листа (x≈1364) на середине подписной строки (y≈534), крючок вверх — кадры сверху. */ .lead--strip { left: 1050px; top: 396px; width: 410px; height: 60px; --lead-delay: 900ms; } /* Черта к списку: от конца слова «веду» (x≈178) вправо до правого края второй колонки (x≈520) на середине его строки (y≈932), крючок вниз — список снизу. Заканчивается в 16px над первой строкой списка. */ .lead--list { left: 142px; top: 778px; width: 350px; height: 60px; --lead-delay: 1260ms; } /* --------------------------------------------------------------------- КАДРЫ — координаты и поведение перенесены из b2 без правок. --------------------------------------------------------------------- */ .stage--events .pic { object-fit: cover; filter: grayscale(1) contrast(1.04); /* Сдвиг за мышью убран 05.09 вместе со всем параллаксом. Крен и укрупнение при наведении оставлены. */ transform: rotate(var(--tilt, 0deg)) scale(var(--scale, 1)); transform-origin: 50% 50%; transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1), filter 0.55s ease; } /* ПОЛОСА ПРИВЕДЕНА К ОБЩЕМУ ПРАВОМУ ПОЛЮ 05.09. Её последний кадр кончался в 51 от кромки листа, тогда как поле у всего остального — 73: и логотип с кнопкой первого экрана, и колонтитул, и число, и «2023» стоят по 73. Полоса вылезала за общий край на 22 пикселя. Сдвинута влево на эти 22 целиком, вместе с подписью и жестом. 73 — эталон полей на этом сайте; --edge-text и --edge-r равны ему в каждом блоке. Заводишь новый предмет у кромки — ставь по нему. ПОЛОСА ПОДНЯТА 05.09 К ВЕРХУ ЧИСЛА: её первый кадр начинался на 140, тогда как «100+» — на 104, и правая половина разворота висела ниже левой без всякой причины. Вся группа сдвинута на 36 вверх одним куском: три кадра, подпись, жест и дата — иначе они разъехались бы между собой. Выше 104 идти некуда, там колонтитул «/ 02 — события» (top 60). ПОЛОСА УМЕНЬШЕНА 05.09 ПО МОКАПУ ОКСАНЫ. Числа не на глаз: мокап (Downloads/Group 8.png) оказался ровно 2× от макета 1440, и габарит полосы снят с него замером — 904…1424 по горизонтали, 140…432 по вертикали. Прежняя полоса занимала 772…1440 × 126…508, то есть была на четверть крупнее и начиналась левее. Все три кадра пересчитаны одним множителем 0.77 от общего угла полосы, поэтому их взаимные нахлёсты и ступенька по вертикали сохранены — уменьшилась полоса целиком, а не каждый кадр порознь. */ .pic--a { left: 852px; top: 104px; width: 220px; height: 294px; } /* Средний кадр укорочен на 20 (209 → 189): под ним проходит дата, и на прежней высоте цифры упирались в его нижнюю кромку. */ .pic--b { left: 1084px; top: 136px; width: 165px; height: 189px; } .pic--c { left: 1268px; top: 104px; width: 99px; height: 159px; object-position: 46% 34%; } /* Уменьшен 05.09 с 528×350: рядом встал слот под ролик, и два кадра почти одного размера спорили за главенство. Пропорция кадра сохранена (1.507), левый край и верх на месте — правая кромка ушла с 601 на 525. Подписи под кадром нет — правило .cap--hall в блоке висит без элемента, см. ниже. */ /* УМЕНЬШЕН И ПОДНЯТ К ВЕРХУ ВИДЕО (05.09, по эталону Оксаны). Сначала я вытянула его до низа слота — оба кадра встали на одну линию низа. Оксана этот ход отвергла: левый снимок не должен спорить с видео. Теперь он начинается там же, где видео (452), но заметно меньше — 412×307 против 769×433, — и кончается высоко, а под ним поднялся список. Кадрирование меняется само: object-fit: cover, снимок не тянется, а показывает другой кусок. */ /* Увеличен 05.09 тем же приёмом, что и слот: по 10 сверху и снизу, ширина пересчитана пропорцией — 412×307 → 439×327. Левое поле 73 не тронуто, кадр растёт вправо и вниз-вверх от своей середины. */ .pic--d { left: 73px; top: 442px; width: 439px; height: 327px; object-position: 50% 90%; } /* 34 → 90: в рамку влезает половина высоты снимка, и на 34 % это было только небо с салютом — пара стоит в нижней четверти кадра. */ .stage--events .pic:hover { --scale: 1.015; --tilt: -0.6deg; filter: grayscale(0) contrast(1.02) saturate(1.04); transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1), filter 0.4s ease; } .pic--b:hover { --tilt: 0.6deg; } /* --------------------------------------------------------------------- ГЛАВНЫЙ КАДР = СЛОТ ПОД РОЛИК — из b2 без правок. --------------------------------------------------------------------- */ /* Увеличен 05.09 с 620: здесь будет ВИДЕО, и оно должно быть главным предметом разворота, а не вторым кадром рядом с фотографией. Правая кромка оставлена на 1344 — по ней же выключены кадры верхней полосы, поэтому рос он влево. Высота считается пропорцией 16/9 из разметки: 382 вместо 349, низ ушёл с 945 на 978. Подписи под слотом нет — у него только служебная метка .reel__stub. */ .stage--events .reel--hero { position: absolute; /* УВЕЛИЧЕН 05.09 по обводке Оксаны: 680 → 769 в ширину, и поднят с 596 на 452. Здесь будет видео, и оно должно быть главным предметом нижней половины разворота. ПОЛЯ ВЫСТАВЛЕНЫ ПО ЭТАЛОНУ 73, А НЕ НА ГЛАЗ: справа 1367 — то же поле, что у кнопки первого экрана, у даты и у полосы кадров; слева 598 — ровно 73 от правой кромки левого снимка (он кончается на 525). То есть просвет между кадрами равен полю листа. Высота считается пропорцией 16/9 из разметки: 769 × 9 / 16 = 433, низ приходится на 885 — выше списка категорий, он начинается с 922. */ /* УМЕНЬШЕН 05.09 ещё раз: 30 срезано сверху и 30 снизу, ширина пересчитана пропорцией (769 → 663, высота 433 → 373), и весь кадр сдвинут на 30 влево. Стоит 568…1231 × 482…855. */ /* РАСТЯНУТ ВНИЗ ДО НИЖНЕЙ СТРОКИ СПИСКА (05.09). Верх не тронут — он стоял правильно; вырос только низ: 855 → 894, вровень с нижним краем «корпоративы / фестивали». Ширина не задаётся отдельно от высоты: пропорция 16/9 объявлена в разметке, поэтому нужную высоту получаем шириной — 732 × 9 / 16 = 412. Кадр стоит 568…1300 × 482…894. */ left: 568px; top: 482px; width: 732px; transform: rotate(var(--tilt, 0deg)) scale(var(--scale, 1)); transform-origin: 50% 50%; transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1); } .stage--events .reel--hero:hover { --scale: 1.008; --tilt: -0.35deg; } .stage--events .reel--hero .reel__poster { object-position: 50% 40%; } /* --------------------------------------------------------------------- РУКОПИСНЫЕ РЕПЛИКИ ПРАВИЛО 5. Denistina на развороте ничего не подписывает — она комментирует. Поэтому у реплик нет и не может быть жеста: жест означает «эта строка про вон тот предмет», а реплика — про всё сразу и про настроение. Место у реплики тоже предсказуемое: правее и ниже факта, с наклоном, каким подписывают наспех. --------------------------------------------------------------------- */ .note { color: var(--red-hand); line-height: 1.5; /* было 1: у рукописи выносные петли уходят далеко за кегельную площадку, и верх букв срезался */ /* ЗАПАС СПРАВА И СНИЗУ. Интерлиньяж лечит только верх; замер 05.09 показал, что чернила выходят за короб ещё и вправо — у «и это только один год» на 11px, потому что рукопись наклонена и последняя петля уносится за последнюю букву. Safari режет по границе слоя, и хвост «год» обрубался. Правое и нижнее поля ничего не сдвигают: элемент поставлен по left/top, и короб растёт только в пустую сторону. */ padding: 0 20px 6px 0; white-space: nowrap; z-index: 4; } /* Реплика к числу: ниже маршрута и правее подписи-факта. БЫЛО top 377 — рукопись висела в сорока пикселях под подписью и с числом уже не связывалась: читалась как отдельная фраза посреди поля. Стало 336 — её чернила начинаются в десятке пикселей под строкой «событий», то есть внутри той же пары. Ниже и правее факта она осталась, правило блока не нарушено. */ /* Поднята ещё на 40 (377 → 337): между числом и репликой оставалось слишком много воздуха, и реплика опять начинала жить сама по себе. Ниже уже нельзя — при наклоне −13° правый конец строки идёт вверх, и на 40 выше он проходит в двух десятках пикселей под плюсом. */ .note--year { left: 453px; top: 337px; font-size: 52px; transform: rotate(-13deg); } /* Реплика к большому кадру: правый конец той же подписной строки, на которой слева стоит факт. Пара повторяет пару у числа. */ .note--work { /* Держится за нижний правый угол слота: он переехал вместе с ним. Прежние 1186/921 стояли при кадре 664…1344 × 596…978; теперь кадр 598…1367 × 452…885, и реплика сдвинута на те же величины, чтобы по-прежнему заходить на кромку, а не висеть под ней. */ left: 1142px; top: 844px; font-size: 68px; transform: rotate(-9deg); z-index: 5; } /* --------------------------------------------------------------------- КАТЕГОРИИ — координаты и поведение из b2 без правок. Каракуля под словом остаётся событием наведения: она появляется только под курсором и поэтому не путается с подписным жестом, который лежит на бумаге всегда. --------------------------------------------------------------------- */ .cat { position: absolute; z-index: 5; display: block; padding-bottom: 10px; } .cat--1 { left: 96px; top: 825px; } .cat--2 { left: 96px; top: 873px; } .cat--3 { left: 288px; top: 825px; } .cat--4 { left: 288px; top: 873px; } /* ОТКЛИК КАТЕГОРИЙ СНЯТ 05.09 по решению Оксаны — ни зачёркивания, ни роста точки. Точка-маркер росла в полтора раза, а поверх слова прочерчивалась красная черта: на деле она читалась не откликом, а вычёркиванием пункта, будто категорию отменили. Совсем без ответа категории не остались: курсор-перо над ссылкой становится крестиком — это общий для сайта знак «сюда можно нажать». Разметка .cat__line оставлена нетронутой, чтобы черту можно было вернуть одной строкой, но рисоваться она больше не начинает. */ .cat__line { position: absolute; left: 0; bottom: 0; width: 100%; height: 8px; overflow: visible; } .cat__line path { fill: none; stroke: var(--red); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 106; stroke-dashoffset: 106; transition: stroke-dashoffset 0.42s cubic-bezier(0.25, 0.8, 0.35, 1); } /* .cat:hover .cat__line path — правило снято, см. выше. */ /* Нижняя красная полоса. Стояла на 1240 — от старой высоты блока 1280. После укорочения до 1090 она оказалась ЗА ОБРЕЗОМ и не рисовалась вовсе: блок остался без своей закрывающей черты, и это заметили только замером. Переставлена под новую высоту. */ .bar--events { left: 0; top: 977px; width: 560px; height: var(--stripe-h); } .bar--events2 { left: 592px; top: 977px; width: 122px; height: var(--stripe-h); } /* ===================================================================== ПОЯВЛЕНИЕ Порядок чтения тот же, что в b2, и дополнен одним правилом: жест приходит ПОСЛЕ своей подписи, а не вместе с ней. Сначала на бумаге оказывается слово, и только потом от него ведут черту — в этом порядке жест выглядит объяснением, а не украшением. ===================================================================== */ /* Гасим только знаки. В b2 здесь стояло `.stamp span`, а кромка маркера — тоже span: она попадала и под гашение, и под animation-fill-forwards печати, и в итоге проявлялась вместе со знаками — красной чертой посреди листа, справа от «100+». Селектор сужен до самих знаков. */ .stamp .stamp__layer > span, .stamp--mid > span { opacity: 0; } .folio, .cap, .note, .cat { opacity: 0; } .stage--events .pic { opacity: 0; } .stage--events .reel--hero { opacity: 0; } .bar--events, .bar--events2 { transform: scaleX(0); transform-origin: 0 50%; } .scene--events[data-in] .stamp--big .stamp__layer > span { animation: stamp-in 440ms cubic-bezier(0.2, 0.85, 0.3, 1) forwards; animation-delay: calc(var(--i, 0) * 64ms); } .stamp--since[data-lit] span { animation: stamp-in 440ms cubic-bezier(0.2, 0.85, 0.3, 1) forwards; animation-delay: calc(var(--i, 0) * 64ms); } @keyframes stamp-in { 0% { opacity: 0; transform: translateY(14px) scale(1.06) rotate(var(--r, 0deg)); } 55% { opacity: 1; transform: translateY(-2px) scale(0.99) rotate(var(--r, 0deg)); } 78% { transform: translateY(1px) scale(1.004) rotate(var(--r, 0deg)); } 100% { opacity: 1; transform: translateY(0) scale(1) rotate(var(--r, 0deg)); } } .stamp__layer > span:nth-child(1), .stamp--mid > span:nth-child(1) { --i: 0; --r: -0.9deg; } .stamp__layer > span:nth-child(2), .stamp--mid > span:nth-child(2) { --i: 1; --r: 0.7deg; } .stamp__layer > span:nth-child(3), .stamp--mid > span:nth-child(3) { --i: 2; --r: -0.5deg; } .stamp__layer > span:nth-child(4), .stamp--mid > span:nth-child(4) { --i: 3; --r: 1deg; } .stamp__layer > span:nth-child(5), .stamp--mid > span:nth-child(5) { --i: 4; --r: -0.7deg; } .scene--events[data-in] .pic, .scene--events[data-in] .reel--hero { animation: photo-in 620ms ease forwards; } @keyframes photo-in { from { opacity: 0; } to { opacity: 1; } } .scene--events[data-in] .pic--a { animation-delay: 120ms; } .scene--events[data-in] .pic--b { animation-delay: 200ms; } .scene--events[data-in] .pic--c { animation-delay: 270ms; } .scene--events[data-in] .pic--d { animation-delay: 420ms; } .scene--events[data-in] .reel--hero { animation-duration: 880ms; animation-delay: 620ms; } .scene--events[data-in] .folio, .scene--events[data-in] .cap, .scene--events[data-in] .cat { animation: paper-in 560ms ease forwards; } @keyframes paper-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .scene--events[data-in] .note { animation: note-in 620ms ease forwards; } @keyframes note-in { from { opacity: 0; } to { opacity: 1; } } .scene--events[data-in] .folio { animation-delay: 60ms; } .scene--events[data-in] .cap--big { animation-delay: 420ms; } .scene--events[data-in] .note--year { animation-delay: 560ms; } .scene--events[data-in] .cap--strip { animation-delay: 700ms; } /* жест — 900 */ .scene--events[data-in] .cap--hall { animation-delay: 980ms; } .scene--events[data-in] .cap--list { animation-delay: 1060ms; } /* жест — 1260 */ .scene--events[data-in] .cap--reel { animation-delay: 1140ms; } .scene--events[data-in] .note--work { animation-delay: 1240ms; } .scene--events[data-in] .cap--since { animation-delay: 1400ms; } .scene--events[data-in] .cat--1 { animation-delay: 1420ms; } .scene--events[data-in] .cat--2 { animation-delay: 1470ms; } .scene--events[data-in] .cat--3 { animation-delay: 1520ms; } .scene--events[data-in] .cat--4 { animation-delay: 1570ms; } .scene--events[data-in] .bar--events, .scene--events[data-in] .bar--events2 { transition: transform 620ms cubic-bezier(0.2, 0.7, 0.3, 1) 1200ms; transform: scaleX(1); } /* --------------------------------------------------------------------- СПОКОЙНЫЙ РЕЖИМ: разворот собран целиком, число закрашено, маршрут и оба жеста нарисованы сразу — их незачем доводить рукой. --------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .stamp .stamp__layer > span, .stamp--mid > span, .folio, .cap, .note, .cat, .stage--events .pic, .stage--events .reel--hero { opacity: 1; animation: none !important; } .bar--events, .bar--events2 { transform: none; } .note--year { transform: rotate(-3deg); } .note--work { transform: rotate(-9deg); } .stage--events .route__path { stroke-dashoffset: 0; } .lead path { stroke-dashoffset: 0; animation: none !important; } .lead path { stroke-dashoffset: 0; transition: none; } .stamp__layer--ink { clip-path: none; } .stamp__nib { display: none; } } /* ===================================================================== ВИДИМОСТЬ НЕ ЗАВИСИТ ОТ ЛИНИИ Блок был построен так, что предмет появляется, когда до него дошла голова сквозной линии. Красиво — и хрупко: если линия не двинулась (вкладка в фоне, урезанный режим отрисовки, ошибка в скрипте), разворот остаётся пустой бумагой, а человек думает, что страница кончилась. Именно это и происходило. Поэтому базовое состояние теперь — ВИДНО. Линия по-прежнему ведёт и подсвечивает, но решает не «быть или не быть», а только «когда шевельнуться». ===================================================================== */ .stamp .stamp__layer > span, /* так же специфично, как правило, .stamp--mid > span, которое их гасит, — иначе не победить */ .stamp span, .label, .cap, .note, .cat, .stage--events .pic, .reel--showreel { opacity: 1; } .stage--events .pic, .reel--showreel { clip-path: none; } .lead path { stroke-dashoffset: 0; } /* Заливка главного числа: если скрипт не тронул --fill, число стоит закрашенным целиком, а не контуром. */ .stamp--big { --fill: 999px; }