/* ===================================================================== 03 · ПОВОД И ЦЕНА — «ОДИН КАДР, ОДНА КОЛОНКА ПОМЕТОК» Лист 1440×1160. На нём: строка выбора по верхнему полю (вход), отпечаток 1367×856 от левого поля до правого обреза, и НА нём одна колонка пометок: цена (центр) и строка выхода. ┌─ ЧЕМ ЭТО ОТЛИЧАЕТСЯ ОТ preview-povod3/c.css ────────────────────┐ │ Там было восемь независимых пометок, у каждой своя пара │ │ координат в каждом из четырёх состояний — тридцать две цифры, │ │ и порядок чтения держался на честном слове. │ │ │ │ Здесь у состояния ОДНА пара координат: угол колонки. Всё │ │ остальное внутри колонки идёт потоком сверху вниз и порядок │ │ чтения задан вёрсткой, а не расстановкой. Строка выбора вообще │ │ ушла с фотографии на поля листа. │ └──────────────────────────────────────────────────────────────────┘ ┌─ ЧТО ЗДЕСЬ ГЛАВНОЕ ─────────────────────────────────────────────┐ │ Координаты колонки — не композиционное решение, а РЕЗУЛЬТАТ │ │ ЗАМЕРА. Каждый из четырёх кадров кадрируется ровно так, как его │ │ покажет браузер, по нему считается карта яркости, и колонка │ │ целиком ставится в светлое поле. В комментарии у каждого │ │ состояния — замеренный фон и доля тёмных пикселей под колонкой. │ │ │ │ Отсюда правило сопровождения: поменяли фотографию или │ │ object-position — ПЕРЕСЧИТАЙТЕ координаты. Иначе надпись сядет │ │ на чёрное и пропадёт, а белым по фото писать нельзя. │ └──────────────────────────────────────────────────────────────────┘ Толщины красного разведены так же, как на всём сайте: обводка повода 2.6 — она главная, это отметка выбора; каракуля цены 2.4 — подчёркивает сумму, центр разворота; каракуля выхода 2.0 — тоньше цены: это конец фразы; каракуля ховера 2.2 — живёт только под курсором. ===================================================================== */ .stage--povod { --frame-x: 73px; --frame-y: 176px; --frame-w: 1294px; /* поле справа 73, как слева: 73 + 1294 + 73 = 1440 */ /* 856 → 484 (05.09). Карточка с ценой кончалась на 744, а фотография тянулась до 1032 — почти три сотни пикселей ниже карточки были просто фоном, и из-за них блок не влезал в экран. Кадр обрезан снизу; сама фотография не сжата, у неё object-fit: cover — она показывает другой кусок. Карточка поднята следом (--col-y), чтобы стоять в кадре так же, как стояла. */ --frame-h: 531px; /* поле снизу 73: 176 + 531 + 73 = 780 */ --fmt-fs: 16px; /* невыбранный повод — обычная подпись. Было 20; подпись сайта теперь 16, а разрыв с выбранным (26) стал шире — обводка слышнее. */ --fmt-fs-on: 26px; /* выбранный — крупнее: его обвели */ --fmt-slot: 230px; /* шаг слотов в строке выбора */ --price-fs: 54px; /* сумма — самая крупная надпись на листе */ --hand-fs: 40px; /* реплика рукой — вдвое мельче суммы */ --ring-w: 2.6; --exit-w: 2.0; --hover-w: 2.2; --scratch-r: 0.052; /* радиус стирания долей от ширины кадра */ } .stage--povod .paper { left: 18px; top: 18px; width: calc(100% - 36px); height: calc(100% - 36px); } .stage--povod .grain { left: 18px; top: 18px; width: calc(100% - 36px); height: calc(100% - 36px); } /* Колонтитул: единственная строка без предмета — мельче и вполсилы. */ .folio { left: var(--edge-text); top: 60px; font-size: 13px; line-height: 18px; opacity: 0.62; } /* Полосы стояли на 1096 — под прежним кадром высотой 856. Кадр обрезан до 484 и кончается на 660, полосы подняты следом. Высоту блока считает fit-scene.js по самому нижнему предмету, поэтому блок укоротится сам. */ .bar--povod { left: 0; top: 680px; width: 560px; height: var(--stripe-h); } .bar--povod2 { left: 592px; top: 680px; width: 122px; height: var(--stripe-h); } /* ===================================================================== ВХОД · СТРОКА ВЫБОРА Ряд по верхнему полю листа. Слова стоят в слотах фиксированной ширины и выключены ПО НИЖНЕЙ ЛИНИИ: выбранное растёт с 20 до 26px, но ни соседи, ни строка не двигаются. Обводка выбранного и каракуля наведения живут внутри самого слова, поэтому обхватывают ровно его. ===================================================================== */ /* СТРОКА ВЫБОРА — РАВНЫЕ ПРОМЕЖУТКИ, А НЕ РАВНЫЙ ШАГ. Поводы стояли по слотам через 230 пунктов: шаг был одинаковый, а слова разной длины — «свадьба» семь букв, «корпоратив» десять, — и просветы между ними выходили разные. Глаз читает не шаг, а просвет, поэтому строка выглядела расставленной кое-как. Теперь это одна строка от левого поля до 913 с промежутками поровну: ширину слов считает браузер, а промежутки выравнивает сам. Правый край выбран так, чтобы за ним осталось место рукописному «жми» и стрелке. */ .fmts { left: var(--edge-text); top: 100px; width: 840px; height: 40px; display: flex; justify-content: space-between; align-items: flex-end; /* общая нижняя линия ряда */ } .mk--fmt { position: relative; /* стоит в строке, а не по своей координате */ display: flex; align-items: flex-end; padding: 0; border: 0; background: none; font-family: var(--font-mono); font-size: var(--fmt-fs); line-height: 1.32; letter-spacing: var(--mono-ls); text-transform: uppercase; color: var(--ink); white-space: nowrap; cursor: pointer; transition: font-size 0.34s cubic-bezier(0.2, 0.7, 0.3, 1); } /* Координаты слотов убраны: строка сама разводит слова поровну. */ .mk--fmt[aria-checked="true"] { font-size: var(--fmt-fs-on); } .mk--fmt:focus-visible { outline: 2px solid var(--ink); outline-offset: 8px; } .mk__word { position: relative; display: inline-block; } /* Подсказка к ряду: конец той же строки, подписной кегль вполсилы. Отдельной строки-инструкции под кадром больше нет. */ /* ПОДСКАЗКА НАПИСАНА ОТ РУКИ (05.09, решение Оксаны). Была набрана подписным кеглем вполсилы и читалась служебной строкой — такой же, как колонтитул. А это не служебная строка, а обращение к человеку: «нажмите». Голосом сайта такое говорят рукой, и на этом листе рукой уже сказаны реплика над ценой и пометки маркером. Прозрачность снята: рукопись вполсилы выглядит стёртой, а не тихой. Тише её делает сам почерк. Трекинг положительный, хотя общий у Denistina отрицательный: на тридцати четырёх её петли слипаются — та же поправка на оптический размер, что у реплики в карточке пакета. */ .fmts__hint { left: 965px; top: 30px; font-size: 40px; line-height: 1.3; letter-spacing: 0.02em; color: var(--red-hand); transform: rotate(-4deg); } /* Стрелка стоит в просвете между концом ряда (последний повод кончается около 913) и началом подсказки (1075). Толщина 2.2 — та же, что у обводки выбранного повода: один и тот же маркер. */ .fmts__arrow { left: 850px; top: 52px; width: 110px; height: 62px; overflow: visible; } .fmts__arrow path { fill: none; stroke: var(--red); stroke-width: 3; /* толще обводки: стрелка зовёт, а не помечает */ stroke-linecap: round; stroke-linejoin: round; } /* Обводка. Стоит только у выбранного: это и есть отметка выбора. viewBox тянется по слову — при почти единичном масштабе штрих не «плывёт», поэтому non-scaling-stroke не нужен и анимация штриха считается честно, в единицах viewBox. */ .ring { position: absolute; left: -24px; top: -16px; width: calc(100% + 48px); height: calc(100% + 32px); overflow: visible; opacity: 0; pointer-events: none; } .mk--fmt[aria-checked="true"] .ring { opacity: 1; } .ring path { fill: none; stroke: var(--red); stroke-width: var(--ring-w); stroke-linecap: round; } /* Каракуля под невыбранным словом — событие наведения, а не состояние. Тот же жест, что под категориями в блоке 02. */ .mk__line { position: absolute; left: 0; bottom: -8px; width: 100%; height: 8px; overflow: visible; pointer-events: none; } .mk__line path { fill: none; stroke: var(--red); stroke-width: var(--hover-w); stroke-linecap: round; stroke-dasharray: 106; stroke-dashoffset: 106; transition: stroke-dashoffset 0.42s cubic-bezier(0.25, 0.8, 0.35, 1); } .mk--fmt:hover .mk__line path, .mk--fmt:focus-visible .mk__line path { stroke-dashoffset: 0; } .mk--fmt[aria-checked="true"] .mk__line { display: none; } /* ===================================================================== ОТПЕЧАТОК ===================================================================== */ .frame { left: var(--frame-x); top: var(--frame-y); width: var(--frame-w); height: var(--frame-h); overflow: hidden; /* кадр режет и цветное пятно, и колонку у края */ } /* --- СВЕТ ПОД КОЛОНКОЙ ------------------------------------------------ Было круглое пятно вокруг самой колонки: радиальный градиент с растушёвкой во все стороны. На тёмном кадре оно читалось не светом, а round-пятном, которое кто-то положил на фотографию. Стало: свет идёт ОТ КРОМКИ КАДРА и гаснет за концом текста. Полосой, а не кругом — так это читается как подсветка края разворота, а не пятно. Числа. Колонка стоит на --col-x шириной 420 в кадре 1367. У корпоратива и фестиваля она слева (158…578), у свадьбы и вечеринки справа (780…1200). Значит полная плотность держится до 42% ширины кадра и гаснет к 62% — с той стороны, где стоит колонка. Стороной и управляет --veil-dir. Сила своя у каждого повода (--veil): у свадьбы под колонкой и так светло, у вечеринки под текстом лицо, и сильный свет делает из него привидение. --------------------------------------------------------- */ .frame::after { content: ''; position: absolute; inset: 0; z-index: 2; /* над фотографией и холстом, под колонкой */ pointer-events: none; background: linear-gradient(to var(--veil-dir, right), rgba(247, 247, 247, var(--veil, 0)) 0%, rgba(247, 247, 247, var(--veil, 0)) var(--veil-hold, 42%), rgba(247, 247, 247, calc(var(--veil, 0) * 0.45)) calc(var(--veil-hold, 42%) + 10%), rgba(247, 247, 247, 0) calc(var(--veil-hold, 42%) + 20%)); } .frame > * { position: absolute; margin: 0; } /* ОГРАНИЧЕНО СВОЕЙ СЦЕНОЙ, И ЭТО ВАЖНО. Правило стояло голым, а класс .shot занят дважды: здесь это сама фотография, в архиве — фигура-карточка вокруг фотографии. Фильтр садился на фигуру архива, то есть на ПРЕДКА картинки, а родительский фильтр ребёнком не снимается: правило .stage--arh .shot:hover .shot__img честно срабатывало, но цвет не возвращался никогда — все восемь кадров архива оставались ч/б. Это четвёртый случай той же болезни (три разобраны в ЗАМЕТКАХ 05.09). */ .stage--povod .shot { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.04); /* тот же ч/б, что у всех фото сайта */ z-index: 1; } /* Кадрирование, по которому считались координаты колонки. МЕНЯТЬ ТОЛЬКО ВМЕСТЕ С ПЕРЕСЧЁТОМ. */ /* КАДРИРОВКА ПО ЛИЦУ. Все четыре исходника 1200×1800 (2:3), кадр 1294×531 (2,44:1). При cover ширина заполняется целиком (увеличение 1,078 — почти 1:1, за резкость можно не бояться), а по высоте видно 492 строки исходника из 1800. Проценты ниже — это и есть выбор того, какие 492. Считается так: верх видимой полосы = 1307 × (процент). Чтобы пересадить лицо, найдите его координату в исходнике и поделите. Раньше проценты выбирались по светлым местам под колонку, а не по людям, и лица уезжали за кромку: у корпоратива был срезан подбородок, у вечеринки лицо лежало на самом нижнем крае. Теперь наоборот — сначала лицо целиком с запасом, потом уже светлое место. */ .shot--svadba { object-position: 50% 35%; } /* полоса 457…950; лицо 570…780 */ /* КОРПОРАТИВ. Был badge-talk — там голова занимала почти всю полосу и читалась несоразмерно. Теперь фигура в костюме, и кадр взят ниже. */ .shot--korporativ { object-position: 30% 10%; } /* 20 → 10: голову срезало верхней кромкой полосы */ /* ВЕЧЕРИНКА и ФЕСТИВАЛЬ ОТРАЖЕНЫ. Лицо на обоих смотрело вправо, прямо в колонку с ценой, и упиралось в текст. Отражённое — смотрит внутрь кадра, в свободную половину полосы. */ .shot--vecherinka { object-position: 50% 26%; transform: scaleX(-1); } /* кадр поднят: голова была слишком низко в полосе */ /* Кадр взят ниже (25 → 40): в полосу попадала одна голова. */ .shot--festival { object-position: 50% 40%; transform: scaleX(-1); } /* --------------------------------------------------------------------- ПЕРЕКЛЮЧЕНИЕ СОСТОЯНИЙ Виден ровно один отпечаток и ровно одна колонка. Без JS видно то, что записано в разметке (свадьба) — то есть блок полный и осмысленный даже мёртвым файлом. --------------------------------------------------------------------- */ .frame [data-when] { opacity: 0; visibility: hidden; transition: opacity 0.42s ease; } .stage--povod[data-fmt="svadba"] [data-when="svadba"], .stage--povod[data-fmt="korporativ"] [data-when="korporativ"], .stage--povod[data-fmt="vecherinka"] [data-when="vecherinka"], .stage--povod[data-fmt="festival"] [data-when="festival"] { opacity: 1; visibility: visible; } /* --------------------------------------------------------------------- ЦВЕТ ТОЛЬКО ПОД КУРСОРОМ Кружок с тем же кадром в цвете. Кружок едет вперёд, картинка внутри — назад ровно на столько же: обе трансформации, поэтому на движении мыши не пересчитывается ни разметка, ни фон. Включается только на мыши и только если движение разрешено (см. kadr.js). --------------------------------------------------------------------- */ /* ===================================================================== ЦЕНТР И ВЫХОД · КОЛОНКА ПОМЕТОК Единственное место на кадре, где вообще что-то написано. Внутри — поток сверху вниз, никаких координат: порядок чтения зашит в вёрстку. реплика рукой 40px — человеческая фраза, вводит колонку ЦЕНА 54px — центр разворота, под ней каракуля часы 16px — уточнение к цене, не отдельная пометка ЧТО ВХОДИТ 16px — подпись стоит прямо над своей группой, поэтому выноска не нужна и её здесь нет три строки 16px — птички слева, как отметки при сверке НАПИСАТЬ… 20px — выход: дальше не читают, дальше пишут ===================================================================== */ .pack { left: var(--col-x); top: var(--col-y); width: 420px; z-index: 3; pointer-events: none; /* ловит только строка выхода */ } .pack > * { position: relative; margin: 0; } /* --- РЕПЛИКА РУКОЙ --------------------------------------------------- Denistina ничего не подписывает — она комментирует. Поэтому у реплики нет выноски и нет предмета: она про настроение повода. Стоит первой строкой колонки: сначала фраза человека, потом его сумма. ----------- */ .pack__hand { margin-bottom: 2px; font-size: var(--hand-fs); letter-spacing: 0.02em; /* СВОЙ трекинг, а не общий --hand-ls (−4 %). Общий отмерян по подписи первого экрана, где кегль 221 и петли расходятся сами. На сорока Denistina в этот минус слипается — буквы лезут одна на другую. Это оптический размер: мелкой рукописи нужна разрядка, крупной — поджим. Трогать здесь, глобальный токен не двигать. */ line-height: 1.28; /* у рукописи выносные петли уходят далеко за кегельную площадку — иначе срезает верх */ color: var(--red-hand); transform: rotate(-4deg); transform-origin: 0 100%; } /* --- ЦЕНА ------------------------------------------------------------ Такая же пометка на фотографии, как всё остальное: тот же маркер, тот же лист. Ни плашки, ни строки прайса, ни рамки. Самая крупная надпись разворота — потому что это то, ради чего в блок пришли. -------------- */ .pack__price { font-size: var(--price-fs); line-height: 1.06; letter-spacing: -0.02em; margin-bottom: 40px; /* до «что входит»; каракули больше нет */ } /* КАРАКУЛЯ ПОД ЦЕНОЙ (.scrawl) СНЯТА 05.09 вместе со строкой часов: на скрине заказчика перечёркнуто и то и другое одним движением. Красного в колонке и так достаточно — птички и кнопка. */ /* СТРОКА «идёт ___ часов» СНЯТА 05.09 по правке заказчика: часы назывались до разговора, а называть их до разговора нечем. Правило удалено вместе с разметкой — держать мёртвый селектор незачем. Отступ, который она давала под ценой, ушёл в .pack__price. */ /* --- ЧТО ВХОДИТ ------------------------------------------------------ Подпись стоит прямо над своей группой — привязывать её выноской не к чему и незачем. Красной выноски в блоке больше нет вовсе. ------------ */ .pack__cap { font-size: var(--caption-fs); line-height: var(--caption-lh); margin-bottom: 12px; } .pack__list { margin: 0; padding: 0; list-style: none; } .pack__list li { position: relative; display: block; margin-bottom: 7px; padding-left: 24px; font-size: var(--caption-fs); line-height: var(--caption-lh); } /* Птичка — не буллет, а отметка рукой: её ставят, когда сверяют список. */ .tick { position: absolute; left: 0; top: 4px; width: 15px; height: 13px; overflow: visible; } .tick path { fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* --- ВЫХОД ----------------------------------------------------------- Была строка с красной каракулей под ней. 05.09 заказчик попросил кнопку: карточка кончается действием, а подчёркнутая строка читалась как ещё одна пометка на полях, а не как «сюда нажимать». Габарит и красный берутся у общего .btn (components.css) — второй кнопки со своими размерами в макете быть не должно, иначе первый экран и повод разъедутся при любой правке плашки. Здесь остаётся только положение в колонке и отклик на наведение. Каракуля (.scribble) удалена вместе с разметкой: у плашки её роль выполняет сам фон. --------------------------------------------------- */ .pack__exit { margin-top: 34px; font-size: var(--mono-fs); line-height: var(--mono-lh); pointer-events: auto; text-decoration: none; /* тот же отклик, что у кнопки первого экрана: темнеет и чуть растёт */ transition: filter 0.2s ease, transform 0.2s ease; } .pack__exit:hover { filter: brightness(0.88); transform: scale(1.025); } .pack__exit:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; } /* --- ПУСТЫЕ МЕСТА ПОД ЧИСЛА ------------------------------------------ Цифр нет ни одной. Место под число занято красной линейкой ровно той ширины, которую число займёт: подставят цифры — вёрстка не поедет. --- */ .slot { display: inline-block; width: 62px; height: 0.62em; margin: 0 6px; border-bottom: 1.8px solid var(--red); vertical-align: baseline; } .slot--big { width: 168px; height: 0.58em; margin: 0 10px; border-bottom-width: 2.6px; } /* Служебная метка незаполненного числа — только в разработке (?dev=1). */ html[data-dev] .slot { position: relative; } html[data-dev] .slot::after { content: attr(data-verify); position: absolute; left: 0; bottom: -15px; font-family: var(--font-ui); font-size: 10px; letter-spacing: 0; text-transform: none; color: var(--red); white-space: nowrap; } /* ===================================================================== КООРДИНАТЫ КОЛОНКИ ПО СОСТОЯНИЯМ Одна пара на состояние — левый верхний угол колонки в системе ОТПЕЧАТКА (0…1367 × 0…856), не листа. В комментарии — замеренный фон под всей колонкой (420×390) и доля пикселей темнее 125 в её габарите. Колонка у всех четырёх состояний стоит в правой половине кадра. Это не совпадение и не лень: если при смене повода колонка прыгает через весь лист, читатель каждый раз ищет её заново — ровно та жалоба, от которой этот вариант и делался. Правая половина выбрана потому, что светлое место под колонку нашлось там во всех четырёх кадрах сразу. ===================================================================== */ /* ОДНА ПАРА КООРДИНАТ НА ВСЕ ЧЕТЫРЕ СОСТОЯНИЯ. Было четыре: колонку подгоняли под светлое место каждой фотографии отдельно (780/60, 800/0, 900/0, 720/50). На бумаге это выглядело аккуратно, а вживую при переключении повода текст прыгал по кадру — и вверх, и вправо на 180 пикселей. Читатель каждый раз искал цену заново, а сравнить четыре повода между собой было невозможно: они стояли по-разному, и глазу казалось, что и наборы разные. Эталон — свадьба (780 / 60): именно её заказчик указала как правильную. Остальные три приведены к ней. Светлое место под колонкой в каждом кадре проверено — в этой точке фон 195…250, тёмных пикселей не больше 6 %, читаемость нигде не падает. Если когда-нибудь понадобится отвести колонку у ОДНОГО повода — двигать не эти цифры, а кадр: object-position у фотографии. Тогда текст останется на месте, а уедет картинка под ним. -------------- */ .stage--povod { --col-x: 780px; --col-y: 60px; } /* КОЛОНКА СЛЕВА — ТОЛЬКО У КОРПОРАТИВА И ФЕСТИВАЛЯ. Отмечено Оксаной 06.09 именно на этих двух поводах; у свадьбы и вечеринки она остаётся справа. Свет под колонкой едет вместе с ней. */ /* Колонка слева — у корпоратива и фестиваля, 64 от кромки кадра. Сначала стояла на 158, Оксана 06.09 отметила ближе к краю. */ .stage--povod[data-fmt="korporativ"], .stage--povod[data-fmt="festival"] { --col-x: 64px; } /* Сила света под колонкой — по кадру, см. .pack::before выше. */ .stage--povod[data-fmt="svadba"] { --veil: 0; --veil-dir: left; } /* белый шатёр — не нужен */ .stage--povod[data-fmt="korporativ"] { --veil: 0; --veil-dir: right; } /* пробуем без света совсем, решение Оксаны 06.09 */ .stage--povod[data-fmt="vecherinka"] { --veil: 0; --veil-dir: left; } /* под текстом лицо: свет превращал его в привидение, а кадр и так светлый */ .stage--povod[data-fmt="festival"] { --veil: 0.75; --veil-dir: right; --veil-hold: 6%; } /* портьера под набором полосатая: без света набор тонет, с 0.95 кадр выбеливался */ /* ===================================================================== ДВИЖЕНИЕ Статическое состояние файла — СОБРАННОЕ. Ни один штрих здесь не спрятан: обводка, каракули, птички по умолчанию нарисованы полностью. Рисование «от руки» — это то, что kadr.js делает ДОПОЛНИТЕЛЬНО: он сам стирает штрих и ведёт его заново. Нет JS, не сработал IntersectionObserver, снимаем в headless — лист всё равно полный. Именно поэтому здесь нет ни одного правила вида «спрятать до .in». ===================================================================== */ .ring path, .tick path { transition: stroke-dashoffset var(--draw-ms, 640ms) cubic-bezier(0.25, 0.8, 0.35, 1) var(--draw-delay, 0ms); } /* ===================================================================== СПОКОЙНЫЙ РЕЖИМ Ничего не гасим — гасить нечего. Убираем только сами переходы: и смену кадра, и рисование штрихов, и рост выбранного слова. Цветное пятно под курсором не включается вовсе (см. kadr.js). ===================================================================== */ @media (prefers-reduced-motion: reduce) { .frame [data-when], .mk--fmt, .ring path, .tick path, .mk__line path, .scratch { transition: none !important; } .mk__line path { stroke-dashoffset: 106; } /* каракуля ховера остаётся откликом */ } /* ===================================================================== ТАЧ И УЗКИЕ ЭКРАНЫ Цветного пятна нет, каракуля наведения не имеет смысла — остаётся отметка выбора. Сама сцена масштабируется целиком, как везде. ===================================================================== */ @media (hover: none), (pointer: coarse) { .stage--povod .scratch { display: none; } /* стирать нечем — мыши нет */ .mk__line { display: none; } } /* ===================================================================== ХОЛСТ СТИРАНИЯ Лежит поверх кадра и держит его чёрно-белую копию. Курсор стирает холст (destination-out), под ним открывается цветная фотография. Мышь ловит сам кадр, а не холст: холст только рисует. ===================================================================== */ .stage--povod .scratch { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; /* НИЖЕ СВЕТА. Холст рисует чёрно-белую копию кадра, и если положить его выше света под колонкой, свет окажется закрыт: он честно есть, но его не видно ни на какой силе. Порядок такой — фотография, холст, свет, колонка. */ z-index: 1; } /* Фильтр с самой фотографии снимается ТОЛЬКО когда холст готов: без скрипта под ним должен оставаться привычный чёрно-белый кадр, а не цветной. */ .stage--povod .frame[data-scratch] .shot { filter: none; } /* ===================================================================== КОРПОРАТИВ: ТЕКСТ КОЛОНКИ БЕЛЫЙ Кадр корпоратива тёмный целиком, и подсветку под колонкой Оксана сняла — чёрный набор на нём переставал читаться. Решение 06.09: не подсвечивать бумагу, а перекрасить набор. Так текст лежит НА фотографии, а не на пятне поверх неё. Красное не трогаем: рукопись, галочки и кнопка держат свой цвет — на тёмном они читаются и остаются той же меткой, что и везде. ===================================================================== */ .stage--povod[data-fmt="korporativ"] .pack__price, .stage--povod[data-fmt="korporativ"] .pack__cap, .stage--povod[data-fmt="korporativ"] .pack__list, .stage--povod[data-fmt="korporativ"] .pack__list .mono { color: var(--bg); }