/* ===================================================================== 05 · ОТЗЫВЫ — перенесено из preview-otzyvy/a.* 05.09.2026 ВСЕ ПРАВИЛА ОГРАНИЧЕНЫ СЦЕНОЙ (.stage--otz) И ЭТО ВАЖНО. В превью блок жил один на странице, и голые имена были безопасны — их было 59. В сайте рядом стоят другие листы, а имена здесь самые ходовые: .cut, .mark, .q, .by, .alien, .cap, .lead, .slot, .shot. Половина из них уже занята соседями. 05.09 сайт трижды ломался ровно на таком совпадении — последний раз голое `.nav` из шапки уводило кнопку заявки за левый край листа. ОБРЫВКИ ЧУЖИХ КОЛОНОК (.alien) — ЭТО НАСТОЯЩИЕ ТЕКСТЫ САЙТА: ответы из блока «Вопросы» и состав услуги из «Повода», обрезанные кромкой. Меняется исходник — правь и обрывок, иначе он начнёт врать, и никто не заметит: он набран мелко и вполсилы. Список — в комментарии наверху разметки блока. ТЕКСТЫ ОТЗЫВОВ И ИМЕНА — РЫБА. Публиковать нельзя. Плашки «рыба», заголовок «тексты пока рыба» и data-verify снимаются только вместе с подстановкой настоящих отзывов от Валентина. ===================================================================== */ /* ===================================================================== 05 · ОТЗЫВЫ — ВАРИАНТ A: «ГАЗЕТНЫЕ ВЫРЕЗКИ» Отзыв — фрагмент, вырезанный из газеты и наклеенный на лист. Пять вырезок разного размера лежат на развороте с настоящими нахлёстами. ┌─ ИЗ ЧЕГО СДЕЛАНА «ГАЗЕТНОСТЬ» ───────────────────────────────────┐ │ Новых гарнитур не появилось. Газетность собрана из трёх вещей, │ │ которые в языке уже есть: │ │ │ │ 1. РВАНЫЙ КРАЙ — clip-path: polygon() в пикселях сцены. │ │ Никаких картинок-текстур: многоугольник посчитан один раз │ │ генератором (см. хвост файла) и вклеен готовой строкой. │ │ Зубец 13px, вылет кромки 1…13px — та же мелкая рвань, что у │ │ бумаги, порванной руками, а не разрезанной. │ │ │ │ 2. ЧУЖАЯ КОЛОНКА НАБОРА — тот же моноширинный, но мельче, │ │ СТРОЧНЫМИ, без трекинга, выключка по формату и вполсилы │ │ чернил. Она обрезана кромкой вырезки и потому доказывает, │ │ что фрагмент вырван из чего-то большего. Текст в ней — │ │ про типографский набор: его нельзя принять за отзыв. │ │ │ │ 3. РАЗНОТОН БУМАГИ — не новый цвет, а две градации своей: │ │ свежая вырезка чуть выбелена, отлежавшая — чуть притемнена. │ │ Без разнотона наклеенная бумага сливается с листом, и весь │ │ приём пропадает. Обе градации выведены из --bg через │ │ color-mix, с обычным цветом-подстраховкой перед ним. │ └──────────────────────────────────────────────────────────────────┘ ┌─ СОДЕРЖИМОЕ ВИДНО САМО ПО СЕБЕ ──────────────────────────────────┐ │ Ни у одного элемента нет opacity: 0 в исходном состоянии. │ │ Единственное, чем управляет скрипт, — переменная --p («насколько │ │ дорисована пометка маркером»), и её значение ПО УМОЛЧАНИЮ 1: │ │ пометки нарисованы. Скрипт умеет только временно опустить --p │ │ ниже единицы и вернуть. Значит без JS, с ошибкой в JS, в │ │ спокойном режиме и в фоновой вкладке разворот лежит собранным. │ └──────────────────────────────────────────────────────────────────┘ Толщины красного разведены, как на всём сайте: групповая выноска 1.8 — она привязывает подпись; подчёркивание 2.4 — им выделяют главную фразу; обводка имени 2.6 — она главная пометка, ею метят пустое место; каракуля ссылки 2.0 — живёт только под курсором. ===================================================================== */ /* Высота секции держится СООТНОШЕНИЕМ СТОРОН, а не формулой и не скриптом: calc(--scene-h * --k) не работает в Safari, и секция там схлопывалась в ноль. min-height в vw — страховка на случай, если aspect-ratio почему-то не сработал. */ .scene--otz{ aspect-ratio: 1440 / 990; min-height: calc(100vw * 990 / 1440); } .stage--otz{ /* --scene-h здесь НЕ задаём: у блока стоит data-fit, и высоту секции считает fit-scene.js по содержимому. Локальное значение перебивало посчитанное — сцена оставалась 990 при секции 1025, и снизу оставалась лишняя полоса бумаги в 35 пикселей. Из-за неё просвет до следующего блока был 71 вместо общих 36. */ --edge-r: 73px; /* правое поле, зеркально левому */ /* --- БУМАГА ВЫРЕЗКИ ---------------------------------------------- */ --cut-fresh: #f9f9f9; /* свежая: --bg, выбеленная наполовину */ --cut-aged: #e8e8e8; /* отлежавшая: --bg, чуть притемнённая. 05.09 высветлена на два тона (было #dedede / 86 % --bg): рядом с рваной белой соседкой прежний тон читался не «бумага полежала», а «бумага серая», и вырезка проваливалась в лист. Разница со свежей осталась, но стала разницей бумаг, а не заливок. */ /* --- НАБОР --------------------------------------------------------- */ --q-big: 30px; /* главная цитата разворота */ --q-big-lh: 40px; --q-mid: 16px; /* цитаты соседних вырезок. Было 20; главная цитата (30) осталась крупной, и соседние отошли от неё дальше. */ --q-mid-lh: 22px; --alien-fs: 11px; /* чужая колонка */ --alien-lh: 15px; --alien-ink: 0.42; /* вполсилы: это фон, а не чтение */ /* --- ПОМЕТКИ МАРКЕРОМ ---------------------------------------------- */ --lead-w: 1.8; --uline-w: 2.4; --ring-w: 2.6; --hover-w: 2.0; --cap-gap: 12px; /* единственный зазор «объект → подпись» */ } .stage--otz .paper{ left: 18px; top: 18px; width: calc(100% - 36px); height: calc(100% - 36px); } .stage--otz .grain{ left: 18px; top: 18px; width: calc(100% - 36px); height: calc(100% - 36px); } /* --------------------------------------------------------------------- КОЛОНТИТУЛ И ГРУППОВАЯ ПОДПИСЬ Колонтитул — единственная строка листа без предмета: мельче и вполсилы. Подпись, наоборот, в полную силу и подписным кеглем: она относится ко всем вырезкам сразу, поэтому прижаться ни к одной не может и получает красную черту — по системе подписей выноска бывает ТОЛЬКО групповой. --------------------------------------------------------------------- */ .stage--otz .folio{ left: var(--edge-text); top: 60px; font-family: var(--font-mono); font-size: 13px; line-height: 18px; letter-spacing: var(--mono-ls); text-transform: uppercase; color: var(--ink); opacity: 0.62; } .stage--otz .cap{ font-family: var(--font-mono); font-size: var(--caption-fs); line-height: var(--caption-lh); letter-spacing: var(--mono-ls); text-transform: uppercase; color: var(--ink); white-space: nowrap; } .stage--otz .cap--all{ left: var(--edge-text); top: 106px; } .stage--otz .lead{ left: 420px; top: 86px; width: 470px; height: 60px; overflow: visible; pointer-events: none; } .stage--otz .lead path{ stroke-width: var(--lead-w); } /* --------------------------------------------------------------------- ВЫРЕЗКА Два слоя намеренно: .cut коробка в координатах листа + поворот. НЕ клипуется — на ней живут пометки, которые маркер увёл за кромку, и красный оттиск «рыба». .cut__paper сама бумага: фон и весь набор, обрезанные рваным многоугольником. Если сложить их в один элемент, clip-path съест и оттиск, и вылет маркера — а именно они и делают картинку «наклеено и размечено», а не «нарисована рамка с зубчиками». --------------------------------------------------------------------- */ .stage--otz .cut{ transform: rotate(var(--rot, 0deg)); transform-origin: 50% 50%; z-index: var(--z, 1); transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1); } .stage--otz .cut > *{ position: absolute; margin: 0; } .stage--otz .cut__paper{ left: 0; top: 0; width: 100%; height: 100%; background: var(--cut-fresh); background: color-mix(in srgb, var(--bg) 45%, #ffffff); } .stage--otz .cut--aged .cut__paper{ background: var(--cut-aged); background: color-mix(in srgb, var(--bg) 94%, #000000); } .stage--otz .cut__paper > *{ position: absolute; margin: 0; } /* Отклик на курсор: вырезка чуть подравнивается, будто её поправили пальцем. Один transform на один слой — второго движения нет. */ .stage--otz .cut:hover, .stage--otz .cut[data-hover]{ transform: rotate(calc(var(--rot, 0deg) * 0.35)); } /* Красный оттиск редактора: единственная плашка на развороте. Стоит ПОВЕРХ кромки, наполовину на бумаге вырезки, наполовину на листе — так метку и лепят. */ .stage--otz .cut__stub{ right: -10px; top: -9px; padding: 3px 9px 4px; background: var(--red); color: var(--on-red); font-family: var(--font-mono); font-size: 10px; line-height: 13px; letter-spacing: var(--mono-ls); text-transform: uppercase; font-weight: 400; z-index: 2; } .stage--otz .cut__stub--wait{ background: var(--ink); } /* У крупной вырезки оттиск переехал на ЛЕВУЮ кромку: справа на неё легла вертикальная колонка B, и метка уходила под соседнюю бумагу. */ .stage--otz .cut__stub--left{ left: -10px; right: auto; } /* --------------------------------------------------------------------- НАБОР ВНУТРИ ВЫРЕЗКИ --------------------------------------------------------------------- */ /* Цитата. Наш моноширинный прописными с трекингом +10 % — язык не меняется. Кавычки-ёлочки уже в тексте, кегль различает главную цитату и соседние. */ .stage--otz .q{ font-family: var(--font-mono); white-space: normal; /* .mono отдаёт nowrap — цитата обязана переноситься */ letter-spacing: var(--mono-ls); text-transform: uppercase; color: var(--ink); } .stage--otz .q--big{ font-size: var(--q-big); line-height: var(--q-big-lh); } .stage--otz .q--mid{ font-size: var(--q-mid); line-height: var(--q-mid-lh); } /* Строка автора. Имён нет — на их месте красные линейки-заглушки. */ .stage--otz .by{ font-family: var(--font-mono); font-size: var(--caption-fs); line-height: var(--caption-lh); letter-spacing: var(--mono-ls); text-transform: uppercase; color: var(--ink); white-space: nowrap; } /* Чужая колонка набора: тот же моноширинный, но СТРОЧНЫМИ, мельче, без трекинга и вполсилы. Выключка по формату — то, чем газетная полоса отличается от нашей вёрстки. Обрезается кромкой вырезки. */ .stage--otz .alien{ font-family: var(--font-mono); font-size: var(--alien-fs); line-height: var(--alien-lh); letter-spacing: 0.01em; text-transform: none; text-align: justify; color: var(--ink); opacity: var(--alien-ink); overflow: hidden; pointer-events: none; } /* Заглушка под непроверенное. Красная линейка на месте будущего слова; что именно вписать — сказано в data-verify, проявляется на ?dev=1. */ .stage--otz .slot{ display: inline-block; width: 84px; height: 0.62em; margin: 0 4px; border-bottom: 1.6px solid var(--red); vertical-align: baseline; } .stage--otz .slot--s{ width: 62px; } .stage--otz .slot--n{ width: 40px; } html[data-dev] .slot{ position: relative; } html[data-dev] .slot::after{ content: attr(data-verify); position: absolute; left: 0; bottom: -13px; font-family: var(--font-ui); font-size: 9px; letter-spacing: 0; text-transform: none; color: var(--red); white-space: nowrap; } /* --------------------------------------------------------------------- ПОМЕТКИ МАРКЕРОМ Одна механика на все: длина штриха известна из --len (задана в разметке с запасом — переоценка безопасна, недооценка нет), а дорисованность считается из --p. --p: 1 штрих нарисован целиком ← ЗНАЧЕНИЕ ПО УМОЛЧАНИЮ --p: 0 штриха не видно Скрипт только временно опускает --p. Поэтому пустого листа не бывает ни при одном сбое. --------------------------------------------------------------------- */ .stage--otz .mark{ overflow: visible; pointer-events: none; z-index: 3; } .stage--otz .mark path{ fill: none; stroke: var(--red); /* ОДНА ТОЛЩИНА У ВСЕХ ЧЕРТ. Каждая черта — свой SVG со своим viewBox, и когда габарит не совпадает с viewBox, браузер масштабирует вместе с ним и штрих: у одной подписи он выходил заметно тоньше, чем у другой, будто писали разными ручками. non-scaling-stroke считает толщину в экранных единицах, а не в единицах viewBox. */ vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: var(--len, 400); stroke-dashoffset: calc(var(--len, 400) * (1 - var(--p, 1))); } .stage--otz .mark--u path{ stroke-width: var(--uline-w); } .stage--otz .mark--ring path{ stroke-width: var(--ring-w); } /* --------------------------------------------------------------------- КООРДИНАТЫ РАЗВОРОТА (система 1440 × 1060) Левое поле 73 и правое 73 — те же, что на первом экране. z-index идёт ТЕМ ЖЕ СЧЁТОМ, ЧТО И ПОРЯДОК НАКЛЕЙКИ: кто лёг позже, тот сверху. Поэтому нахлёсты настоящие, а не нарисованные. A 73,170 660×300 ← первой C 73,545 392×178 D 430,600 560×248 ← поверх правого края C B 700,132 286×398 ← поверх правого края A R 1067,186 300×533 видеоотзыв E 1067,770 300×132 объявление ВНИМАНИЕ ПРИ ПРАВКЕ: габарит вырезки жёстко связан с её рваным краем — многоугольник посчитан ровно под эти ширину и высоту. Меняете размер — перегенерируйте clip-path (генератор описан в хвосте файла), иначе зубцы растянет и край станет пилой. --------------------------------------------------------------------- */ .stage--otz .cut--a{ left: 73px; top: 170px; width: 660px; height: 300px; --z: 1; } .stage--otz .cut--c{ left: 73px; top: 545px; width: 392px; height: 178px; --z: 2; } .stage--otz .cut--d{ left: 430px; top: 600px; width: 560px; height: 248px; --z: 3; } .stage--otz .cut--b{ left: 700px; top: 132px; width: 286px; height: 398px; --z: 4; } .stage--otz .cut--r{ left: 1067px; top: 186px; width: 300px; height: 533px; --z: 5; } .stage--otz .cut--e{ left: 1067px; top: 770px; width: 300px; height: 132px; --z: 6; } /* --- A · внутренности ------------------------------------------------ */ .stage--otz .alien--a-top{ left: 40px; top: -4px; width: 580px; height: 30px; } .stage--otz .q--big{ left: 40px; top: 62px; width: 452px; } .stage--otz .mark--a-u{ left: 32px; top: 132px; width: 430px; height: 20px; } .stage--otz .by--a{ left: 40px; top: 214px; } .stage--otz .mark--a-ring{ left: 22px; top: 200px; width: 286px; height: 56px; } .stage--otz .alien--a-col{ left: 502px; top: 44px; width: 140px; height: 210px; } .stage--otz .alien--a-bot{ left: 40px; top: 276px; width: 440px; height: 24px; } /* --- B · внутренности ------------------------------------------------ */ .stage--otz .alien--b-top{ left: 26px; top: -8px; width: 234px; height: 76px; } .stage--otz .q--mid{ } .stage--otz .cut--b .q--mid{ left: 26px; top: 84px; width: 236px; } .stage--otz .by--b{ left: 26px; top: 242px; } .stage--otz .alien--b-bot{ left: 26px; top: 292px; width: 234px; height: 118px; } /* Подчёркивание, ушедшее за правую кромку на лист. Лежит в .cut, а не в .cut__paper, поэтому не обрезается. */ /* Черта была ПОД всей цитатой и уходила вправо в пустое поле. Оксана показала, что подчеркнуть надо первое слово — «единственный». */ .stage--otz .mark--b-u{ left: 26px; top: 97px; width: 330px; height: 20px; } /* --- R · видеоотзыв --------------------------------------------------- */ /* Кадр заполняет вырезку целиком: рваный край режет фотографию так же, как режет бумагу. Пропорция 9/16 задана в разметке — под вертикаль с телефона. */ .stage--otz .cut--r .reel{ left: 0; top: 0; width: 100%; height: 100%; } /* Оттиск на левой кромке: справа вверху у слота своя служебная метка (.reel__stub из components.css), и две метки садились друг на друга. */ .stage--otz .cut--r .cut__stub{ left: -10px; right: auto; } .stage--otz .cap--reel{ left: 0; top: calc(100% + var(--cap-gap)); } /* --- C · внутренности ------------------------------------------------ */ .stage--otz .alien--c-top{ left: 28px; top: -5px; width: 336px; height: 30px; } .stage--otz .cut--c .q--mid{ left: 28px; top: 46px; width: 336px; } .stage--otz .by--c{ left: 28px; top: 128px; } .stage--otz .mark--c-ring{ left: 44px; top: 114px; width: 190px; height: 50px; } /* --- D · внутренности ------------------------------------------------ */ .stage--otz .shot--d{ left: 26px; top: 22px; width: 150px; height: 170px; object-fit: cover; filter: grayscale(1) contrast(1.06); /* фото всегда ч/б */ transition: filter 0.5s ease; } /* Цвет только под курсором — общий закон сайта. */ .stage--otz .cut--d:hover .shot--d, .stage--otz .cut--d[data-hover] .shot--d{ filter: grayscale(0) contrast(1.02) saturate(1.04); } .stage--otz .alien--d-cap{ left: 26px; top: 198px; width: 150px; height: 30px; } .stage--otz .cut--d .q--mid{ left: 202px; top: 36px; width: 330px; } /* Черта шла ПО тексту и читалась зачёркиванием, а не подчёркиванием: опущена под последнюю строку цитаты. */ .stage--otz .mark--d-u{ left: 200px; top: 92px; width: 320px; height: 20px; } /* 118 было отмерено под цитату в две строки. Текст, вложенный 05.09, лёг в три, и подпись села прямо на последнюю. Опущена на строку с запасом; вырезка от этого не выросла — внизу оставался воздух. */ .stage--otz .by--d{ left: 202px; top: 158px; } /* Обрывок чужой колонки съехал вниз вслед за подписью: цитата выросла с двух строк до трёх, и на прежней высоте он оказывался прямо под именем. Высота урезана до одной строки — больше в вырезку не влезает, а обрывок и должен обрываться. */ .stage--otz .alien--d-bot{ left: 202px; top: 196px; width: 330px; height: 30px; } /* --- E · объявление --------------------------------------------------- Пока своих отзывов нет, чужой счётчик весит больше своей карусели. И число, и адрес — заглушки. */ .stage--otz .e__ttl{ left: 24px; top: 22px; font-family: var(--font-mono); font-size: 13px; line-height: 18px; letter-spacing: var(--mono-ls); text-transform: uppercase; color: var(--ink); opacity: 0.62; } .stage--otz .e__count{ left: 24px; top: 48px; font-family: var(--font-mono); font-size: var(--caption-fs); line-height: var(--caption-lh); letter-spacing: var(--mono-ls); text-transform: uppercase; color: var(--ink); white-space: nowrap; } .stage--otz .e__link{ left: 24px; top: 84px; font-family: var(--font-mono); font-size: var(--caption-fs); line-height: var(--caption-lh); letter-spacing: var(--mono-ls); text-transform: uppercase; color: var(--ink); white-space: nowrap; cursor: pointer; } /* Каракуля под ссылкой — событие наведения, а не состояние: тот же жест, что под категориями в блоке 02 и под поводами в блоке 03. */ .stage--otz .e__scrawl{ position: absolute; left: 0; bottom: -7px; width: 190px; height: 12px; overflow: visible; pointer-events: none; } .stage--otz .e__scrawl path{ fill: none; stroke: var(--red); stroke-width: var(--hover-w); stroke-linecap: round; stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset 0.42s cubic-bezier(0.25, 0.8, 0.35, 1); } .stage--otz .e__link:hover .e__scrawl path, .stage--otz .e__link:focus-visible .e__scrawl path{ stroke-dashoffset: 0; } .stage--otz .e__link:focus-visible{ outline: 2px solid var(--ink); outline-offset: 6px; } /* --------------------------------------------------------------------- РУКОПИСЬ. Комментирует и никогда не подписывает — выноски у неё нет и быть не может. Одна на разворот. --------------------------------------------------------------------- */ .stage--otz .note{ /* ЗАПАС СЛЕВА И СПРАВА. У «з» в «здесь» выносной хвост уходит левее начала строки, и его срезало границей слоя — та же болячка, что у подписи «Веркин» и у реплики в блоке 02, только с левой стороны. Поля ничего не двигают: строка стоит по left/top, короб растёт в пустую сторону, а left уменьшен на ту же величину. */ padding: 0 20px 6px 24px; left: 68px; top: 782px; font-size: 40px; color: var(--hand-red); transform: rotate(-3.5deg); z-index: 6; } /* --------------------------------------------------------------------- НИЖНИЕ ПОЛОСЫ — тот же приём, что закрывает блоки 02, 03 и 04. --------------------------------------------------------------------- */ .stage--otz .bar--otz{ left: 0; top: 926px; width: 606px; height: var(--stripe-h); } .stage--otz .bar--otz2{ left: 640px; top: 926px; width: 134px; height: var(--stripe-h); } /* --------------------------------------------------------------------- СПОКОЙНЫЙ РЕЖИМ Глушим ДВИЖЕНИЕ, а не появление. Пометки маркером остаются нарисованными (--p по умолчанию 1, скрипт их не трогает), вырезки просто перестают поправляться под курсором. Человек с включённой настройкой видит спокойный разворот, а не сломанный. --------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .cut { transition: none; } .cut:hover, .cut[data-hover] { transform: rotate(var(--rot, 0deg)); } .e__scrawl path { transition: none; } .shot--d { transition: none; } } /* ===================================================================== РВАНЫЙ КРАЙ Ниже — готовые многоугольники, по одному на вырезку. Каждый посчитан ровно под её габарит: шаг зубца 13px, вылет кромки 1…13px, изредка глубокий надрыв. Ни одной картинки-текстуры со стороны. Генератор (детерминированный, seed у каждой вырезки свой) лежит в scratchpad как torn.py; повторить можно в двадцать строк: обойти периметр с шагом 13px и на каждой точке отступить внутрь на 6 ± 4.2px, с вероятностью 13 % добавив ещё 3…7.5px. ПРАВИЛО СОПРОВОЖДЕНИЯ: поменяли размер вырезки — пересчитайте многоугольник. Проценты здесь использовать нельзя: зубцы растянутся вместе с коробкой и край превратится в равномерную пилу. ===================================================================== */ .stage--otz .cut--a .cut__paper{ clip-path: polygon(0px 6px, 9px 18px, 18px 14px, 27px 2px, 36px 9px, 45px 18px, 54px 10px, 63px 9px, 72px 24px, 81px 5px, 90px 3px, 99px 12px, 108px 9px, 118px 6px, 127px 8px, 136px 10px, 145px 6px, 154px 7px, 163px 12px, 172px 5px, 181px 8px, 190px 11px, 199px 21px, 208px 11px, 217px 17px, 226px 11px, 235px 13px, 244px 10px, 253px 9px, 262px 12px, 271px 8px, 280px 2px, 289px 10px, 298px 12px, 307px 7px, 316px 2px, 325px 8px, 335px 17px, 344px 7px, 353px 3px, 362px 9px, 371px 12px, 380px 5px, 389px 6px, 398px 14px, 407px 4px, 416px 5px, 425px 9px, 434px 2px, 443px 6px, 452px 14px, 461px 8px, 470px 21px, 479px 12px, 488px 12px, 497px 15px, 506px 8px, 515px 4px, 524px 7px, 533px 3px, 542px 2px, 552px 9px, 561px 5px, 570px 16px, 579px 14px, 588px 13px, 597px 6px, 606px 12px, 615px 2px, 624px 8px, 633px 16px, 642px 14px, 651px 11px, 660px 6px, 648px 9px, 656px 18px, 646px 27px, 648px 36px, 649px 45px, 652px 55px, 652px 64px, 655px 73px, 646px 82px, 646px 91px, 646px 100px, 656px 109px, 656px 118px, 650px 127px, 648px 136px, 650px 145px, 657px 155px, 647px 164px, 649px 173px, 656px 182px, 654px 191px, 646px 200px, 653px 209px, 649px 218px, 657px 227px, 647px 236px, 657px 245px, 646px 255px, 654px 264px, 646px 273px, 650px 282px, 646px 291px, 647px 300px, 651px 288px, 642px 293px, 633px 297px, 624px 292px, 615px 291px, 606px 298px, 597px 288px, 588px 292px, 579px 289px, 570px 294px, 561px 298px, 552px 290px, 542px 287px, 533px 291px, 524px 293px, 515px 298px, 506px 297px, 497px 290px, 488px 297px, 479px 290px, 470px 285px, 461px 287px, 452px 295px, 443px 287px, 434px 288px, 425px 298px, 416px 297px, 407px 288px, 398px 298px, 389px 290px, 380px 286px, 371px 281px, 362px 296px, 353px 292px, 344px 296px, 335px 286px, 325px 293px, 316px 296px, 307px 287px, 298px 290px, 289px 296px, 280px 288px, 271px 297px, 262px 297px, 253px 297px, 244px 288px, 235px 291px, 226px 286px, 217px 289px, 208px 292px, 199px 293px, 190px 292px, 181px 291px, 172px 287px, 163px 291px, 154px 289px, 145px 295px, 136px 297px, 127px 291px, 118px 294px, 108px 289px, 99px 296px, 90px 286px, 81px 298px, 72px 292px, 63px 287px, 54px 287px, 45px 293px, 36px 287px, 27px 293px, 18px 291px, 9px 295px, 0px 296px, 12px 291px, 8px 282px, 3px 273px, 11px 264px, 13px 255px, 20px 245px, 4px 236px, 6px 227px, 13px 218px, 10px 209px, 8px 200px, 5px 191px, 8px 182px, 3px 173px, 2px 164px, 4px 155px, 8px 145px, 2px 136px, 6px 127px, 5px 118px, 14px 109px, 5px 100px, 4px 91px, 5px 82px, 5px 73px, 13px 64px, 3px 55px, 5px 45px, 3px 36px, 11px 27px, 10px 18px, 12px 9px); } .stage--otz .cut--b .cut__paper{ clip-path: polygon(0px 7px, 9px 13px, 18px 8px, 27px 4px, 36px 10px, 45px 3px, 54px 3px, 63px 21px, 72px 14px, 80px 9px, 89px 2px, 98px 2px, 107px 12px, 116px 7px, 125px 8px, 134px 8px, 143px 7px, 152px 14px, 161px 12px, 170px 6px, 179px 15px, 188px 7px, 197px 7px, 206px 18px, 214px 13px, 223px 14px, 232px 3px, 241px 12px, 250px 3px, 259px 14px, 268px 3px, 277px 12px, 286px 4px, 275px 9px, 269px 18px, 282px 27px, 272px 36px, 281px 45px, 282px 54px, 273px 63px, 283px 72px, 282px 81px, 275px 90px, 276px 100px, 277px 109px, 277px 118px, 279px 127px, 278px 136px, 273px 145px, 282px 154px, 274px 163px, 282px 172px, 272px 181px, 272px 190px, 277px 199px, 272px 208px, 281px 217px, 281px 226px, 277px 235px, 282px 244px, 284px 253px, 277px 262px, 277px 271px, 273px 280px, 284px 289px, 273px 298px, 280px 308px, 283px 317px, 273px 326px, 276px 335px, 277px 344px, 274px 353px, 275px 362px, 284px 371px, 278px 380px, 280px 389px, 283px 398px, 277px 384px, 268px 386px, 259px 390px, 250px 392px, 241px 391px, 232px 385px, 223px 391px, 214px 388px, 206px 385px, 197px 388px, 188px 394px, 179px 388px, 170px 387px, 161px 389px, 152px 387px, 143px 390px, 134px 396px, 125px 395px, 116px 391px, 107px 387px, 98px 387px, 89px 384px, 80px 395px, 72px 389px, 63px 388px, 54px 385px, 45px 391px, 36px 385px, 27px 392px, 18px 386px, 9px 387px, 0px 387px, 10px 389px, 11px 380px, 4px 371px, 12px 362px, 4px 353px, 2px 344px, 18px 335px, 9px 326px, 3px 317px, 13px 308px, 6px 298px, 8px 289px, 14px 280px, 4px 271px, 10px 262px, 11px 253px, 10px 244px, 14px 235px, 13px 226px, 6px 217px, 10px 208px, 18px 199px, 24px 190px, 7px 181px, 9px 172px, 11px 163px, 5px 154px, 11px 145px, 11px 136px, 4px 127px, 14px 118px, 10px 109px, 7px 100px, 2px 90px, 5px 81px, 17px 72px, 17px 63px, 9px 54px, 22px 45px, 12px 36px, 12px 27px, 8px 18px, 7px 9px); } .stage--otz .cut--c .cut__paper{ clip-path: polygon(0px 13px, 9px 21px, 18px 7px, 27px 3px, 36px 7px, 45px 12px, 53px 11px, 62px 8px, 71px 16px, 80px 9px, 89px 10px, 98px 6px, 107px 6px, 116px 10px, 125px 3px, 134px 11px, 143px 7px, 151px 4px, 160px 6px, 169px 9px, 178px 2px, 187px 9px, 196px 6px, 205px 5px, 214px 12px, 223px 14px, 232px 11px, 241px 5px, 249px 13px, 258px 14px, 267px 21px, 276px 2px, 285px 10px, 294px 12px, 303px 8px, 312px 11px, 321px 14px, 330px 11px, 339px 4px, 347px 14px, 356px 3px, 365px 4px, 374px 12px, 383px 7px, 392px 7px, 379px 9px, 385px 18px, 380px 27px, 387px 36px, 385px 44px, 383px 53px, 371px 62px, 386px 71px, 380px 80px, 370px 89px, 383px 98px, 383px 107px, 385px 116px, 390px 125px, 380px 134px, 379px 142px, 382px 151px, 385px 160px, 389px 169px, 384px 178px, 383px 176px, 374px 166px, 365px 157px, 356px 165px, 347px 165px, 339px 168px, 330px 171px, 321px 170px, 312px 172px, 303px 174px, 294px 165px, 285px 169px, 276px 166px, 267px 169px, 258px 170px, 249px 175px, 241px 166px, 232px 164px, 223px 168px, 214px 162px, 205px 171px, 196px 175px, 187px 175px, 178px 173px, 169px 159px, 160px 173px, 151px 173px, 143px 171px, 134px 175px, 125px 163px, 116px 173px, 107px 175px, 98px 173px, 89px 170px, 80px 171px, 71px 172px, 62px 173px, 53px 172px, 45px 169px, 36px 166px, 27px 165px, 18px 155px, 9px 170px, 0px 169px, 8px 169px, 17px 160px, 5px 151px, 11px 142px, 14px 134px, 9px 125px, 7px 116px, 2px 107px, 10px 98px, 13px 89px, 7px 80px, 8px 71px, 9px 62px, 4px 53px, 10px 44px, 5px 36px, 9px 27px, 7px 18px, 13px 9px); } .stage--otz .cut--d .cut__paper{ clip-path: polygon(0px 9px, 9px 10px, 18px 3px, 27px 11px, 36px 11px, 45px 3px, 54px 7px, 63px 18px, 72px 14px, 81px 4px, 90px 6px, 99px 4px, 108px 9px, 117px 14px, 126px 6px, 135px 12px, 145px 2px, 154px 13px, 163px 4px, 172px 11px, 181px 10px, 190px 2px, 199px 6px, 208px 10px, 217px 14px, 226px 14px, 235px 6px, 244px 10px, 253px 16px, 262px 13px, 271px 17px, 280px 13px, 289px 14px, 298px 7px, 307px 7px, 316px 13px, 325px 20px, 334px 6px, 343px 13px, 352px 8px, 361px 5px, 370px 9px, 379px 7px, 388px 11px, 397px 14px, 406px 5px, 415px 14px, 425px 2px, 434px 5px, 443px 12px, 452px 2px, 461px 4px, 470px 12px, 479px 4px, 488px 10px, 497px 13px, 506px 8px, 515px 8px, 524px 8px, 533px 3px, 542px 11px, 551px 10px, 560px 4px, 557px 9px, 554px 18px, 549px 27px, 555px 35px, 549px 44px, 558px 53px, 547px 62px, 556px 71px, 554px 80px, 548px 89px, 556px 97px, 554px 106px, 554px 115px, 558px 124px, 550px 133px, 552px 142px, 555px 151px, 558px 159px, 555px 168px, 552px 177px, 549px 186px, 547px 195px, 553px 204px, 555px 213px, 548px 221px, 546px 230px, 556px 239px, 551px 248px, 551px 245px, 542px 236px, 533px 240px, 524px 244px, 515px 245px, 506px 234px, 497px 239px, 488px 236px, 479px 243px, 470px 239px, 461px 235px, 452px 239px, 443px 245px, 434px 239px, 425px 242px, 415px 246px, 406px 238px, 397px 240px, 388px 236px, 379px 236px, 370px 243px, 361px 227px, 352px 235px, 343px 244px, 334px 242px, 325px 241px, 316px 242px, 307px 234px, 298px 243px, 289px 229px, 280px 239px, 271px 241px, 262px 239px, 253px 235px, 244px 235px, 235px 236px, 226px 241px, 217px 227px, 208px 234px, 199px 241px, 190px 235px, 181px 246px, 172px 234px, 163px 237px, 154px 235px, 145px 240px, 135px 241px, 126px 235px, 117px 240px, 108px 246px, 99px 238px, 90px 240px, 81px 246px, 72px 234px, 63px 238px, 54px 246px, 45px 243px, 36px 241px, 27px 239px, 18px 241px, 9px 235px, 0px 238px, 4px 239px, 13px 230px, 13px 221px, 13px 213px, 7px 204px, 13px 195px, 13px 186px, 6px 177px, 11px 168px, 14px 159px, 7px 151px, 8px 142px, 19px 133px, 11px 124px, 11px 115px, 12px 106px, 13px 97px, 10px 89px, 22px 80px, 6px 71px, 11px 62px, 4px 53px, 3px 44px, 10px 35px, 6px 27px, 13px 18px, 6px 9px); } .stage--otz .cut--e .cut__paper{ clip-path: polygon(0px 6px, 9px 7px, 18px 8px, 27px 2px, 36px 8px, 45px 14px, 55px 9px, 64px 13px, 73px 5px, 82px 6px, 91px 2px, 100px 10px, 109px 9px, 118px 5px, 127px 20px, 136px 6px, 145px 9px, 155px 10px, 164px 13px, 173px 4px, 182px 11px, 191px 10px, 200px 11px, 209px 9px, 218px 15px, 227px 12px, 236px 11px, 245px 9px, 255px 4px, 264px 14px, 273px 9px, 282px 14px, 291px 18px, 300px 12px, 281px 9px, 290px 18px, 290px 26px, 289px 35px, 289px 44px, 294px 53px, 286px 62px, 296px 70px, 297px 79px, 288px 88px, 293px 97px, 294px 106px, 293px 114px, 292px 123px, 288px 132px, 291px 119px, 282px 125px, 273px 120px, 264px 123px, 255px 119px, 245px 115px, 236px 130px, 227px 128px, 218px 119px, 209px 123px, 200px 125px, 191px 123px, 182px 120px, 173px 129px, 164px 120px, 155px 111px, 145px 125px, 136px 120px, 127px 111px, 118px 124px, 109px 127px, 100px 125px, 91px 123px, 82px 110px, 73px 121px, 64px 124px, 55px 127px, 45px 121px, 36px 123px, 27px 119px, 18px 119px, 9px 120px, 0px 124px, 13px 123px, 8px 114px, 18px 106px, 10px 97px, 12px 88px, 14px 79px, 12px 70px, 4px 62px, 10px 53px, 13px 44px, 6px 35px, 13px 26px, 17px 18px, 14px 9px); } .stage--otz .cut--r .cut__paper{ clip-path: polygon(0px 4px, 9px 24px, 18px 11px, 27px 2px, 36px 6px, 45px 8px, 55px 11px, 64px 10px, 73px 13px, 82px 3px, 91px 12px, 100px 2px, 109px 9px, 118px 13px, 127px 12px, 136px 3px, 145px 3px, 155px 12px, 164px 8px, 173px 8px, 182px 7px, 191px 10px, 200px 2px, 209px 9px, 218px 8px, 227px 12px, 236px 3px, 245px 9px, 255px 8px, 264px 7px, 273px 8px, 282px 12px, 291px 2px, 300px 6px, 280px 9px, 298px 18px, 296px 27px, 287px 36px, 294px 45px, 281px 54px, 289px 63px, 296px 72px, 295px 81px, 288px 90px, 294px 99px, 294px 108px, 275px 117px, 298px 126px, 295px 136px, 298px 145px, 289px 154px, 296px 163px, 298px 172px, 290px 181px, 292px 190px, 296px 199px, 291px 208px, 294px 217px, 295px 226px, 290px 235px, 291px 244px, 290px 253px, 298px 262px, 295px 271px, 293px 280px, 296px 289px, 288px 298px, 286px 307px, 289px 316px, 291px 325px, 277px 334px, 288px 343px, 296px 352px, 297px 361px, 293px 370px, 277px 379px, 287px 388px, 289px 397px, 296px 407px, 293px 416px, 295px 425px, 293px 434px, 278px 443px, 296px 452px, 294px 461px, 294px 470px, 287px 479px, 282px 488px, 295px 497px, 297px 506px, 276px 515px, 292px 524px, 292px 533px, 291px 520px, 282px 523px, 273px 520px, 264px 524px, 255px 529px, 245px 517px, 236px 529px, 227px 520px, 218px 531px, 209px 519px, 200px 520px, 191px 530px, 182px 519px, 173px 525px, 164px 521px, 155px 529px, 145px 525px, 136px 523px, 127px 529px, 118px 520px, 109px 523px, 100px 526px, 91px 516px, 82px 522px, 73px 519px, 64px 518px, 55px 525px, 45px 522px, 36px 525px, 27px 531px, 18px 522px, 9px 520px, 0px 525px, 3px 524px, 8px 515px, 13px 506px, 7px 497px, 4px 488px, 6px 479px, 4px 470px, 3px 461px, 9px 452px, 8px 443px, 12px 434px, 7px 425px, 8px 416px, 7px 407px, 7px 397px, 11px 388px, 8px 379px, 5px 370px, 14px 361px, 14px 352px, 7px 343px, 11px 334px, 4px 325px, 14px 316px, 14px 307px, 3px 298px, 14px 289px, 3px 280px, 3px 271px, 8px 262px, 4px 253px, 7px 244px, 20px 235px, 15px 226px, 8px 217px, 12px 208px, 13px 199px, 9px 190px, 16px 181px, 14px 172px, 8px 163px, 12px 154px, 13px 145px, 13px 136px, 10px 126px, 8px 117px, 9px 108px, 13px 99px, 8px 90px, 5px 81px, 4px 72px, 5px 63px, 12px 54px, 12px 45px, 13px 36px, 5px 27px, 3px 18px, 23px 9px); } /* --- ИМЕНА-РЫБА ------------------------------------------------------ Раньше на месте имён стояли красные линейки: имён у нас не было вовсе, и маркер обводил пустое место — самая честная картинка того, что есть. 05.09 Оксана попросила вложить в вырезки сочинённые отзывы, значит появились и сочинённые имена. Они НЕ становятся от этого фактом. Плашки «рыба» на вырезках остаются, `?dev=1` подчёркивает каждое имя красным пунктиром, а data-verify говорит, что подставить. Придут настоящие — меняется только текст внутри span, ни одна координата не трогается. Обводка имён маркером остаётся на месте: теперь она обводит имена, а не пустоту, и это ровно её обычная работа на этом сайте. */ .stage--otz .fish{ color: var(--ink); font-style: normal; } .stage--otz .fish--s{ opacity: 0.55; } html[data-dev] .stage--otz .fish{ border-bottom: 1px dashed var(--red); padding-bottom: 1px; } /* ===================================================================== ТЕНЬ ПОД ВЫРЕЗКАМИ ПОЧЕМУ НЕ drop-shadow. Первый заход ставил filter: drop-shadow прямо на бумагу — и тени не было видно вовсе. Причина в порядке отрисовки: браузер сперва применяет фильтр, а ПОТОМ режет элемент по clip-path, которым нарисован рваный край. Тень выходила за контур и срезалась вместе с ним. ЗДЕСЬ ДРУГОЙ ПРИЁМ: под каждой вырезкой лежит своя подложка, залитая чернилами, сдвинутая вниз и размытая. Она и читается тенью. ПОДЛОЖКА ПРЯМОУГОЛЬНАЯ, А НЕ ПО РВАНОМУ КОНТУРУ — и это правка 05.09, а не упрощение. Сначала под каждую вырезку клался её собственный многоугольник. Толку от него не было по двум причинам. Первая: clip-path режет элемент ПОСЛЕ фильтра, поэтому размытие выносило за контур и там же срезалось — снаружи тень получала идеально резкую кромку, и вместо тени под бумагой лежала тёмная полоса с ножевым краем. Ровно это заказчица и увидела. Вторая: зубец рванины 9 пикселей, размытие 14 — на таком радиусе от рванины не остаётся ничего, форму всё равно не прочесть. Поэтому подложка — простой прямоугольник, втянутый внутрь на 6…8 по каждой стороне (на глубину самой рванины, чтобы тень нигде не выглядывала из-под бумаги в неположенном месте), с большим радиусом и вдвое меньшей плотностью: 0,2 вместо 0,42. Бумага лежит на листе, а не висит над ним. ==================================================== */ .stage--otz .cut{ position: absolute; } .stage--otz .cut::before{ content: ""; position: absolute; left: 7px; right: 7px; top: 9px; bottom: 7px; background: rgba(0, 0, 0, 0.2); filter: blur(14px); transform: translate(1px, 7px); z-index: -1; pointer-events: none; }