/* ========================================================================== Сайт-приглашение. База: шрифты, переменные, сброс, типографика, ритм секций. Оформление блоков — ниже по мере вёрстки Фазы 3. ========================================================================== */ /* -------------------------------------------------------------------------- Шрифты. Самохостинг, без внешних CDN. Кириллица и латиница объявлены раздельно с unicode-range: браузер скачивает только те сабсеты, которые реально встретились на странице. font-display: swap — текст виден сразу, ещё до загрузки гарнитуры. -------------------------------------------------------------------------- */ @font-face { font-family: 'Lora'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/lora-cyrillic-400-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Lora'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/lora-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2070-209F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Lora'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/lora-cyrillic-500-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Lora'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/lora-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2070-209F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Pompadur — рукописная гарнитура от заказчиков. Одним файлом, без разделения на сабсеты: в ней всего 92 глифа, а латиницы по сути нет — только I, V, X. Делить такую надвое нечего, весь файл весит 20 КБ. ВНИМАНИЕ: нет заглавных Ъ, Ы, Ь и нет знаков « » — – ·. Набирать ею капслоком нельзя: буква пропадёт молча, без ошибки. Ограничитель — в правиле `.accent`. */ @font-face { font-family: 'Pompadur'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/pompadur-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-cyrillic-400-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2070-209F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-cyrillic-500-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2070-209F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* -------------------------------------------------------------------------- Переменные -------------------------------------------------------------------------- */ :root { /* PALETTE:START — активный вариант оформления. Содержимое между маркерами целиком заменяется файлом из assets/variants/<вариант>/palette.css. Состав ролей менять нельзя: на них завязана вся вёрстка, переименование потребовало бы прохода по всем блокам. Цветовые литералы допустимы ТОЛЬКО здесь — остальной файл работает на ролях. Сейчас активен: blush (розоватая пудра, по assets/source/palettes/2.jpg), но с 2026-08-06 (T082+T063) второй акцентный цвет (розовый) снят: снимки стали чёрно-белыми, и золото (--m-gold, MATERIAL ниже) остаётся ЕДИНСТВЕННЫМ цветом страницы — роли палитры пересчитаны в его сторону (тёплый кремовый + графит + приглушённое золото вместо розового), состав ролей не менялся. --c-ink — тёплый графит по решению заказчиков (было коричневым #43302a). Контраст (WCAG, посчитан по формуле относительной яркости, не на глаз) на обоих фонах страницы — --c-bg и --m-glass (стекло реплик, см. MATERIAL): --c-ink 12.06:1 / 10.11:1 · --c-muted 6.03:1 / 5.05:1 · --c-accent-deep (текстовая роль — ссылки, .accent) 6.84:1 / 5.73:1 — все ≥ 4.5:1. --c-accent и --c-line — нетекстовая графика (рамки, обводки), порог 3:1: 3.97:1 / 3.33:1 и 3.67:1 / 3.08:1. --m-gold на обоих фонах см. в комментарии MATERIAL — это единственная пара, которая порог не держит на стекле (держит на странице, см. ниже). 2026-08-06: заказчики попросили «золото чуть ярче». Осветление подняло бы яркость ценой контраста (светлее = ближе к светлому --c-bg), поэтому --c-accent/--c-accent-deep (и --m-gold в MATERIAL) сдвинуты по насыщенности вверх при той же или чуть меньшей светлоте — золото читается звонче, а контраст не упал, а вырос: --c-accent 3.68→3.97 (bg), 3.09→3.33 (glass); --c-accent-deep 5.96→6.84 (bg), 4.99→5.73 (glass). */ --c-bg: #f9f5ef; --c-bg-soft: #ece2d2; --c-ink: #33302e; --c-muted: #655c53; --c-accent: #9b7322; --c-accent-deep: #734e12; --c-line: #887e70; /* Правка заказчиков 2026-08-06: сердце календаря (#date, календарь торжества) — «матовый красный», а не золото, единственное сознательное отступление от D11 «золото — единственный цвет страницы» (memory-bank/resources/decisions.md), по прямой просьбе заказчиков. Матовость — тот же принцип, что у золота (MATERIAL ниже, tools/ gold_extract.py MATTE/GAIN): не яркий чистый тон, а сжатая по насыщенности и притемнённая «краска». Источник — цвет листа сердец 8310.eps #AC1F40 (H 346°, S 0,69, L 0,40): насыщенность ×0,7, светлота -0,03, финальный гейн ×0,9 — тот же путь «сжать разброс + притемнить», что и у золота, только без второго шага (нет диапазона пикселей для сжатия к телу цвета — это плоская CSS-роль, не растр). Контраст к стеклу реплик (--m-glass) 7.04:1, к фону страницы (--c-bg) 8.40:1 — далеко выше порога 3:1 для нетекстовой графики (сердце decorative, aria-hidden). */ --c-heart: #7e2b3f; /* T118 (замечание пользователя 2026-08-12): плавающая кнопка «К анкете» (.rsvp-float) — единственное место, где фон-плашка одновременно (а) на ней лежит настоящий читаемый текст (кегль ниже порога WCAG «крупного текста») и (б) требуется «золотой, а не тёмный» цвет для привлечения внимания. Ни --c-accent (3.97:1 с --c-bg — держит только 3:1-порог для нетекстовой графики), ни --c-accent-deep (это и есть тот «тёмный» цвет, который заказчик просит заменить) не годятся одновременно. Токен — точка на прямой между --c-accent-deep (#734e12) и --c-accent (#9b7322) в сторону более светлого/золотого, до которой контраст с --c-bg ещё держит 4.5:1 с запасом (расчёт — WCAG относительная яркость, не на глаз): 4.84:1. Заметно золотистее --c-accent-deep, заметно контрастнее --c-accent — роль узкая (только эта кнопка), не общая замена ни одному из двух базовых токенов. */ --c-cta-gold: #8c651b; /* PALETTE:END */ /* MATERIAL:START — цвета материала: не роли палитры, вариантом не подменяются. Роли палитры выше подменяются целиком при смене варианта оформления (три тёплых варианта). Голубое стекло и золото рамы зеркала — не роль оформления, а свойство самого декоративного растра: золотой орнамент (вензели, разделители) напечатан один раз и одинаков во всех вариантах, а стекло — его неизменная пара. Значит этот дуэт обязан пережить смену палитры, поэтому вынесен отдельным блоком. --m-gold замерен как медиана непрозрачных пикселей готового орнамента (site/img/decor/divider.webp) — так рисованная CSS-линия рамы и растровый вензель сходятся в одном тоне, а не расходятся на глаз. --m-glass (T082, решение заказчиков 2026-08-06): голубое стекло было вторым цветовым акцентом наравне с золотом — рядом с чёрно-белой съёмкой оно спорило со снимками и с золотом. Уведено в тёплый серый, почти бумажный (близко к --c-bg, но заметно отличимо — иначе реплики перестали бы читаться стеклом на фоне страницы, bg↔glass 1,19:1 отличия по яркости при том же оттенке). Текстовые роли на нём держат 4.5:1 (см. PALETTE выше), --c-accent/--c-line — 3:1. 2026-08-06, та же правка «золото чуть ярче»: --m-gold сдвинут по той же насыщенности вверх при чуть меньшей светлоте (см. PALETTE-комментарий про путь через насыщенность, не осветление). На --c-bg это неожиданно ЗАКРЫЛО старый долг — было 2,90:1 (ниже порога 3:1 для нетекстовой графики), стало 3,03:1. На --m-glass контраст тоже вырос (2,43:1 → 2,54:1), но порог 3:1 по-прежнему не держит — известное ограничение: стекло не может стать значительно темнее бумаги и остаться «почти бумажным», и это не менялось этой правкой, только слегка смягчилось. */ --m-glass: #e6e2d5; --m-gold: #ac8939; /* Светлая кромка блика на стекле — тоже свойство материала, не палитры: блик должен оставаться светлее заливки одинаково во всех вариантах оформления. Вынесена сюда, а не литералом внутри градиента. */ --m-sheen: #ffffff; /* Бумага скрапбук-фото (T078) — тоже материал, не роль оформления: лист остаётся тем же бумажным оттенком независимо от тёплого варианта палитры (как и стекло/золото зеркала выше). Чистый белый заказчики забраковали отдельно («рамка плохо заметна, она белая») — сдвинут в серую сторону, чтобы читаться на светлом `--c-bg`. */ --m-paper: #e4e0d8; /* Свет заката на тиснении (T122, пожелание пользователя 2026-08-13: «как будто лучи солнца, но более мягкие»). Два тона, а не один: у низкого солнца прямой луч янтарный, а рассеянный по краю тени уходит в розовое — на этом различии тень и читается закатной, а не просто коричневой. Почему тона живут в ТЕНИ, а не в блике — причина НЕ в яркости, а в различимости; см. замер в комментарии к --m-emboss ниже. */ --m-sunset: #b4713a; --m-sunset-deep: #9d5a44; /* Блик тиснения. Тёплый белый, а не чистый: чистый был единственным ахроматичным пятном страницы (фон H36°, стекло H46°, золото H42° — всё тёплое). Разница по различимости ничтожна (1.53 против 1.58 к фону), по попиксельному просчёту — не больше 8 из 255, то есть глазом её нет; берётся ради связности палитры, а не ради вида. */ --m-emboss-light: #fffaf0; /* Тиснение золотого декора — свойство материала, а не оформления: венок обложки, вензели зеркал и разделители обязаны быть выдавлены одинаково. Раньше рецепт стоял литералом в трёх местах — правка «сделай ярче» каждый раз требовала трёх одинаковых редактирований, и один из трёх однажды отставал. Здесь один источник. T106 + T117: тиснение — это ОРЕОЛ, а не обводка. Разница вся в размытии: узкий и плотный drop-shadow вплотную к контуру читается как нарисованная кромка, широкий и слабый — как свечение. Первый заход T117 ошибся именно здесь (0.06rem/100% + холодная кромка) — вышла жирная обводка, и декор распался на «фигура + линия вокруг» («бросается в глаза и выглядит не цельно», 2026-08-12). Яркость набирается СЛОЯМИ, а не плотностью одного узкого: плотность при малом размытии и превращает свечение обратно в обводку. Холодная кромка (проба «серебряного свечения») убрана — вторая контрастная линия у контура ломала цельность сильнее всего. T122, замер 2026-08-13: симметричный ореол читался как «свечение», а не как тиснение — источника света у него нет, и глазу не за что зацепиться. Свет теперь идёт сверху слева, как принято в печати и как уже падает тень страницы: 1) блик — со смещением вверх-влево, узким слоем; это НЕ обводка: он смещён, а значит ложится только на одну сторону контура; 2) широкий разлёт остаётся симметричным (рассеянный свет комнаты, у него направления нет) — он и держит мягкость, не давая блику стать кромкой; 3) тень — вниз-вправо, ровно напротив блика. Смещения намеренно КРОШЕЧНЫЕ (0.05rem ≈ 0.8 px): орнамент — тонкая филигрань, при заметном сдвиге блик отрывается от контура и читается вторым, призрачным орнаментом рядом. ВАЖНО ПРО ФОН — и это ловушка, на которой разбор 2026-08-13 споткнулся дважды. Декор лежит НЕ на кремовой бумаге. Под всей страницей стоит .page-bg — фотография рассвета, `position: fixed`, `z-index: -2`, под матовым слоем --c-bg всего 40 % (см. комментарий у .page-bg). Отрицательный z-index кладёт её ПОВЕРХ фона body, поэтому обход предков по background-color её не видит: она не предок, а фиксированный сосед. Первый замер именно так и ошибся — насчитал «кремовую бумагу #f9f5ef, запас до белого 6/10/16» и вывел из этого, что закатные тона в блик поставить нельзя. Проверять фон под элементом — композитом, а не деревом предков. Настоящая поверхность (просчёт фото под матовым слоем): медиана RGB 193/156/131, запас до белого 62/99/124 — в десять с лишним раз больше. Из-за `fixed` она ещё и ЕДЕТ под декором при прокрутке: яркость участка гуляет от 0.14 до 0.97 по луминансу. Один рецепт неизбежно ложится на разное — отсюда и ощущение «эффект то есть, то нет». Почему при этом закат всё же в тени, а блик почти белый: само золото отделяется от снимка всего на 1.30-1.93 (ниже порога 3:1 для нетекстовой графики) — блик здесь не украшение, а то, что делает филигрань различимой. Замер отделяемости блика от фона: белый 1.58-2.25, тёплый белый 1.53-2.17, закатный #ffdcae — 1.26-1.78, на светлом небе орнамент начинает растворяться в рассвете. Тёплый белый стоит столько же, сколько чистый, — его и берём (--m-emboss-light). Тень двухслойная: плотный янтарь вплотную к контуру и мягкий розовый разлёт шире и ниже — так свет обтекает рельеф, а не кладёт под него одно ровное пятно. Прежняя тень цвета --c-ink убрана: нейтрально-коричневая, она годилась для «объёма вообще», но закатного тона в ней нет. ⚠️ ПОРЯДОК СЛОЁВ ЗДЕСЬ — НЕ КОСМЕТИКА. Цепочка drop-shadow каскадная: каждый следующий слой отбрасывает тень от РЕЗУЛЬТАТА предыдущего, а не от исходной картинки. Пока закатные слои стояли последними, тень отбрасывал не орнамент, а орнамент, уже обёрнутый белым ореолом в 0.95rem: тёплый тон уезжал наружу и размазывался в розовую дымку по фону, а у контура оставалось белое свечение — пользователь так и сказал, «не вижу изменений, белый присутствует». Просчёт четырёх вариантов попиксельно (tools scratch, 2026-08-13) показал разницу с исходником: направление — max 11 по каналу, закат последними слоями — 26, закат ПЕРВЫМИ — 84. Поэтому: сначала обе закатные тени (их отбрасывает чистый силуэт, они ложатся вплотную), блик — последним, поверх. Широкий белый разлёт 0.95rem убран совсем: он размывал контур сильнее, чем добавлял света, и именно он разбавлял закат. */ --m-emboss: drop-shadow(0.05rem 0.12rem 0.28rem color-mix(in srgb, var(--m-sunset) 38%, transparent)) drop-shadow(0.09rem 0.22rem 0.7rem color-mix(in srgb, var(--m-sunset-deep) 26%, transparent)) drop-shadow(-0.05rem -0.05rem 0.28rem color-mix(in srgb, var(--m-emboss-light) 85%, transparent)); /* MATERIAL:END */ --font-display: 'Lora', 'Times New Roman', Georgia, serif; /* Рукописная — от заказчиков. Запасные системные скрипты кириллицы почти не держат, поэтому последним стоит наш же антиквенный, а не cursive. */ --font-script: 'Pompadur', 'Lora', cursive; /* Основной текст (заказчики, минималистичная эстетика): та же антиква, что и в заголовках, а не гротеск — страница должна читаться как единый печатный лист, а не как интерфейс с вкраплениями декора. Роль раньше называлась --font-body и указывала на Inter — имя стало враньём в тот момент, когда решили набирать прозу антиквой, поэтому переименована под новое назначение. */ --font-text: 'Lora', 'Times New Roman', Georgia, serif; /* Интерфейсная роль — там, где важна чёткость, а не эстетика: кнопки, поля и подписи анкеты, время в программе дня, адреса, цифры отсчёта, мелкие служебные подписи. Прежний --font-body занимал эту нишу неявно (был по умолчанию для всего текста) — теперь роль явная и уже, а не роль умолчания. */ --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Плавная типографика: размеры тянутся между 320 px и десктопом, поэтому промежуточных брейкпоинтов под текст не нужно. Cormorant Garamond был заменён на Lora по решению заказчиков 2026-08-05 («шрифт резкий и острый»): высокий контраст штриха и острые клиновидные засечки — свойство рисунка, настройками не смягчается. У Lora засечки мягче, контраст спокойнее — но и x-height заметно больше, чем у Cormorant (замер canvas TextMetrics, кегль 100px: x-height Cormorant 400 ≈ 0,40 кегля, Lora 400 ≈ 0,50, Inter 400 ≈ 0,56). Раньше кегли ниже были подняты примерно на треть, чтобы компенсировать МЕЛКИЕ строчные Cormorant — теперь строчные у Lora сами по себе крупнее, и та же инфляция кегля дала бы страницу заметно КРУПНЕЕ прежней, то есть ровно то, на что заказчики жаловались изначально («шрифт большой»). Поэтому все три роли ниже (--fs-hero/h2/h3/body) умножены на 0,40/0,50 = 0,8 — во столько раз у Lora крупнее x-height по сравнению с Cormorant. Итог: видимая высота строчных (px) остаётся такой же, как была на странице, одобренной заказчиками по масштабу, — меняется гарнитура, а не размер. --fs-ui (Inter) в этот пересчёт не входит: метрика Inter не менялась. */ --fs-hero: clamp(1.52rem, 0.42rem + 5.48vw, 4rem); --fs-h2: clamp(1.18rem, 0.66rem + 2.6vw, 2.4rem); --fs-h3: clamp(0.9rem, 0.66rem + 1.18vw, 1.4rem); --fs-body: clamp(1.08rem, 0.96rem + 0.32vw, 1.28rem); /* Кегль для Inter-текста НЕ на службе у --fs-body: та формула компенсирует маленький x-height антиквы (см. комментарий выше) и в кегле Inter дала бы противоположный эффект — адрес/факты стали бы КРУПНЕЕ, чем были, а не тише. --fs-ui — прежняя формула --fs-body (Inter не менял метрику), уменьшается только вместе с общим плавным --root (html, ниже), как и весь остальной интерфейс. */ --fs-ui: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --fs-small: clamp(0.95rem, 0.88rem + 0.2vw, 1.05rem); --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.75rem; --space-lg: 3rem; --space-xl: clamp(3.5rem, 2rem + 7vw, 6.5rem); /* Заказчики 2026-08-06: «фотка маленькая по сравнению с экраном — экран можно чуть сузить, а фотку увеличить». --measure сузили с 34rem до 30rem (порядка 65 знаков в строке — ещё в комфортном диапазоне, ниже 30rem чтение начинает сбиваться, дальше не уменьшать). --container расширен с 60rem до 68rem, вся прибавка (8rem) уходит фотографии — колонка переписки как была заперта на полном --measure, так и осталась. Потолок для фото задан исходниками (couple-heart 959px, couple-studio 1280px по длинной стороне): слот шире ~480px на экране с удвоенной плотностью потребовал бы апскейла — фото начнёт мылиться. */ --measure: 30rem; /* комфортная длина строки */ --container: 76rem; --radius: 2px; } /* -------------------------------------------------------------------------- Сброс -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } /* Атрибут `hidden` обязан побеждать любой наш `display`. В стилях браузера он объявлен как `[hidden] { display: none }` — правило с меньшей специфичностью, чем `.chat__turn { display: grid }`, поэтому без этой страховки скрытая реплика анкеты молча остаётся на экране, и пошаговое раскрытие не работает. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Базовый размер — плавный (заказчики: «сам экран можно сделать меньше и масштабировать его вместе с экраном»). Всё, что считается в rem (кегли, --space-*, --measure, --container), уезжает согласованно вместе с этой величиной — раньше она была жёстко 16px, и только отдельные --fs-* тянулись сами по себе, а отступы и ширина колонки стояли колом. Проценты, а не px: значение остаётся относительным к настройке размера шрифта в браузере гостя, а не переопределяет её. Диапазон 88–92% (12% меньше прежнего на 320px, 8% на 1280px, между ними — линейно) — «заметно» меньше, примерно на десятую часть, как просили. Коэффициент при vw посчитан явно (см. отчёт задачи), а не подобран на глаз: 1vw — ЕДИНИЦА ДЛИНЫ (сотая доля ширины окна в px), а не сотая доля числа процентов слева, и на глаз коэффициент легко промахивается на порядок мимо диапазона min/max клампа (проверено эмпирически: 0.42vw держал preferred-ветку клампа выше верхней границы на любой ширине из диапазона, и на выходе получался не плавный переход, а плоские 92% везде). Хочешь пересчитать диапазон — бери целевые PX-значения на двух концах диапазона ширин, дели их разницу на разницу ширин в px — это и есть коэффициент при vw; свободный член — px-значение на левом конце минус (коэффициент × левая ширина), переведённое в проценты от 16px. */ font-size: clamp(88%, 86.6667% + 0.0667vw, 92%); } /* Гость мог отключить анимации в системе — уважаем это. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; /* animation-timeline: none здесь НЕ ставим, хотя соблазн есть: она бы разом выключила и прокруточный блик. Но `animation-timeline` не различает анимации по природе — она отвязывает от шкалы ЛЮБУЮ, и обычная временная анимация повисает в своём первом кадре навсегда. Для появления реплик (`chat-turn-in`, первый кадр — opacity: 0) это означало вечно невидимый вопрос пары: анимация не кончается, событие animationend не приходит, класс не снимается. Блик выключаем адресно — правилом сразу под его же объявлением. */ } } body { min-height: 100vh; background-color: var(--c-bg); color: var(--c-ink); font-family: var(--font-text); font-size: var(--fs-body); font-weight: 400; /* Было 1.65 — заказчики попросили плотнее; такая же плотная выключка, как у заголовков (1.15), для абзацного текста была бы тесной — 1.45 держит воздух между строк. При замене Cormorant на Lora (см. --fs-body выше) значение перепроверено: у Lora строчные и так крупнее, кегль пересчитан вниз пропорционально — на глаз и по замеру строки не сдвинулись теснее прежнего, 1.45 оставлен без изменений. */ line-height: 1.45; /* Страница не должна ехать вбок ни при какой ширине (FR-008) */ overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* -------------------------------------------------------------------------- Фон страницы (T074) — фотография рассвета над морем под матовым слоем, с медленным смещением по прокрутке. `
` — первый потомок body (см. index.html), не background у самого body: смещаться должен только этот слой (transform), а не вся страница. Автор фото — muhammad.abdullah, бесплатная лицензия (реестр [[design-assets]]). Исходник 8736x4896/5,5 МБ порезан tools/prepare_background.py на пять WebP под брейкпоинты ниже (640/960/1440/1920/2560 px) — под матовым слоем детализация не видна, картинка работает пятном, резкость не нужна. -------------------------------------------------------------------------- */ .page-bg { position: fixed; top: 0; left: 0; right: 0; /* Высота больше вьюпорта РОВНО на величину смещения (--bg-shift ниже): слой едет вверх на translateY(-var(--bg-shift)), и без запаса снизу обнажился бы край под ним. Запас снизу, не сверху — смещение всегда в одну сторону (вверх, вслед за прокруткой). */ height: calc(100vh + var(--bg-shift)); z-index: -2; background-repeat: no-repeat; background-position: center top; background-size: cover; background-image: url('../img/bg-sunrise-640.webp'); pointer-events: none; } @media (min-width: 40em) { .page-bg { background-image: url('../img/bg-sunrise-960.webp'); } } @media (min-width: 60em) { .page-bg { background-image: url('../img/bg-sunrise-1440.webp'); } } @media (min-width: 90em) { .page-bg { background-image: url('../img/bg-sunrise-1920.webp'); } } @media (min-width: 120em) { .page-bg { background-image: url('../img/bg-sunrise-2560.webp'); } } /* Матовый светлый полупрозрачный слой поверх фотографии — тот же --c-bg, что и у бумаги страниц, смешан с прозрачностью через color-mix (тот же приём, что у блика зеркала выше по файлу). Держит контраст текста, который лежит прямо на фоне без своей карточки (.cover__names, .cover__date, подпись и дата в подвале — последняя набрана .muted, самым низкоконтрастным цветом из трёх). 55% (первая прикидка по луминансу самого тёмного пикселя всего исходника) на практике не хватило: снимок страницы и замер РЕАЛЬНОГО фона под подписью в подвале (там, где сквозь матовый слой проступает тень волны у горизонта) дал контраст .muted к фону ~2.3:1 — исходная прикидка считала теоретический глобальный минимум по всей фотографии, а не то, что фактически оказывается под конкретным текстом. Поднято по факту (снимками, не расчётом — см. отчёт задачи T074) до 88%: под подписью в подвале контраст держал 4.5:1 у .muted. T090 (правка 1, решение заказчика 2026-08-07): при 88% фон работал ровным кремовым пятном — не читались ни диск солнца, ни дорожка отражения на воде, ни гребни волн, а именно ради них выбирали фото. Заказчик увидел риск (при низкой плотности контраст .muted в подвале снова падает ниже 4.5:1) и принял его осознанно: «скрути просто контраст, не выдумывай велосипед, текст виден хорошо» — без локальной подложки под подвалом, без градиентов, без backdrop-filter, просто ниже процент. Снижено до 40% (подобрано снимками страницы, не расчётом): фон читается в полную силу, текст в подвале по-прежнему разборчив на глаз, но контраст .muted к фону НИЖЕ 4.5:1 — это принятый размен, а не недосмотр. Смена исходника фона или отступов подвала — переснять на глаз, что текст остаётся читаемым; порог 4.5:1 здесь сознательно не цель. Правка заказчика 2026-08-07: и имя, и дата в подвале переведены на --c-ink (.footer__names/.footer__date, ниже по файлу) — самую контрастную роль палитры, и обе строки одного цвета. Замер снимком по факту (тень волны под подписью, как описано выше): --c-ink здесь держит ~2,9-3,9:1 — лучше, чем было у .muted (~1,9:1) или --c-accent-deep (~1,7-2,2:1), но всё ещё ниже 4,5:1 — тот же принятый размен, что и у .page-bg::after выше, не новый недосмотр. */ .page-bg::after { content: ''; position: absolute; inset: 0; background-color: color-mix(in srgb, var(--c-bg) 40%, transparent); } /* Смещение — порядка 1/10 полной прокрутки страницы (решение заказчиков: «в 100 раз медленнее» на практике неподвижность при высоте страницы в несколько тысяч px). Величина подобрана по факту на живой странице, не вычислена из описания: замер headless-браузером (2026-08-07) дал полную прокрутку ~4150-4300 px (390x844 и 1280x900, до T088/T089/T087 — при их реализации высота страницы вырастет, пересверить). 420px — около 1/10 от обоих замеров. */ :root { --bg-shift: 420px; } @keyframes page-bg-parallax { from { transform: translateY(0); } to { transform: translateY(calc(-1 * var(--bg-shift))); } } @supports (animation-timeline: scroll()) { .page-bg { animation: page-bg-parallax linear; animation-timeline: scroll(root); animation-fill-mode: both; } } @media (prefers-reduced-motion: reduce) { .page-bg { animation-name: none; transform: none; } } img, svg, picture, iframe { display: block; max-width: 100%; } img { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } /* -------------------------------------------------------------------------- Типографика -------------------------------------------------------------------------- */ h1, h2, h3 { font-family: var(--font-display); /* Lora поставляется только в 400 и 500 — начертания 300, каким рисовались заголовки у Cormorant, у неё нет. Берём 400: следующее по насыщенности после отсутствующего лёгкого, не «жирнее задуманного» 500. */ font-weight: 400; line-height: 1.15; text-wrap: balance; } h1 { font-size: var(--fs-hero); letter-spacing: 0.06em; } h2 { font-size: var(--fs-h2); letter-spacing: 0.04em; } h3 { font-size: var(--fs-h3); letter-spacing: 0.02em; } p { text-wrap: pretty; } a { color: var(--c-accent-deep); text-underline-offset: 0.2em; } /* Рукописный акцент: подписи, имена, мелкие подзаголовки. `text-transform: none` здесь не косметика, а страховка: в Pompadur нет заглавных Ъ, Ы, Ь, и капслок от родителя (например от `.cover__names`) съел бы букву, ничего не сообщив. Правило гасит наследование в одном месте. */ .accent { font-family: var(--font-script); font-weight: 400; text-transform: none; color: var(--c-accent-deep); } .muted { color: var(--c-muted); } /* Мелкие служебные подписи (согласие на обработку данных, заметка под картой) — чёткость важнее эстетики, тот же принцип, что и у кнопок/полей (см. --font-ui). Дата в подвале (.footer__date) этот класс больше не несёт — правка пользователя 2026-08-07 подтянула её оформление к .cover__date (Lora, капслок, разрядка), а не к служебным подписям. */ .small { font-family: var(--font-ui); font-size: var(--fs-small); } /* -------------------------------------------------------------------------- Раскладка -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-md); } .section { padding-block: var(--space-xl); } /* Зеркало — блок вместо розовых карточек-заметок с уголками. Голубое стекло в золочёной раме, сверху и снизу — растровый вензель. Вензели идут обычными в потоке (не абсолютным позиционированием): у картинки своя пропорция, и в потоке она сама держит место, без расчёта отступов и риска обрезки. */ .mirror { display: grid; /* Тот же --measure, под который считалась ширина нарезки вензеля (см. комментарий к элементу 47 в tools/gold_extract.py: заказ 1580px — это тройной запас именно от 34rem максимального показа). Без потолка .mirror растягивается на всю ширину .container (60rem) — вензели раздуваются, а .chat__ask, ограниченный процентами, ничего не ограничивает от такой ширины. */ max-width: var(--measure); margin-inline: auto; } .mirror__crest { width: 100%; height: auto; display: block; /* T106/T122: тиснение — общий рецепт --m-emboss (MATERIAL), см. его комментарий. */ filter: var(--m-emboss); } /* Вензель нарисован так, что его нижняя (у верхнего) / верхняя (у нижнего) кромка — та самая линия, на которой стоит орнамент. Орнамент должен сесть НА линию рамы стекла, а не повиснуть над ней зазором — отсюда нахлёст. */ .mirror__crest:first-child { /* У верхнего вензеля (crest-top.webp) линия-подставка не совпадает с нижней кромкой картинки: ниже линии остаётся ещё 62 px завитков и лепестков (из 1580 px ширины кадра) — печатается tools/gold_extract.py при нарезке элемента 47. 62 / 1580 = 3,92%. Процент, а не px: margin по вертикали считается от ширины содержащего блока, а вензель всегда width: 100%, поэтому нахлёст сам масштабируется с зеркалом. Без него линия вензеля виснет НАД рамой стекла второй параллельной чертой. */ --crest-top-overlap: -3.92%; margin-bottom: var(--crest-top-overlap); } .mirror__crest:last-child { margin-top: -1px; } .mirror__glass { position: relative; /* Не overflow: hidden — при нём Chromium (проверено, версия 151) перестаёт обновлять animation-timeline: view() у любого потомка (в т.ч. у ::after с живым бликом ниже): прогресс замирает на значении первого кадра и больше не следует за прокруткой, хотя сам скролл проходит и getBounding- ClientRect меняется корректно. Воспроизведено в изолированном стенде: стоит добавить overflow: hidden на предка — и view()-таймлайн потомка замирает; стоит заменить на clip-path — снова едет. clip-path обрезает по тому же контуру (с тем же скруглением, что border-radius ниже), но не создаёт этот баг. */ clip-path: inset(0 round 1.5rem); padding: var(--space-lg) var(--space-md); background-color: var(--m-glass); /* Блик — диагональная светлая полоса поверх заливки: без неё голубой фон читается плашкой, а не стеклом. Это статичный запасной вариант — там, где браузер понимает animation-timeline: view() (правило ниже), полоса вместо этого едет от прокрутки, а этот background-image просто не используется. 2026-08-06, заказчики: «блики видны, но очень слабо» (важно — у них отключены анимации в системе, они видят именно этот случай, а не бегущую полосу, см. ту же правку у .mirror__glass::after ниже: там же причина, почему поднимать нужно ОБЕ версии). Пик полосы был color-mix(--m-glass 40%, --m-sheen) — почти не отличался от заливки (245 из 255 по светимости, разница с фоном стекла всего ~19 по яркости из физически доступных на этом материале ~29 — 40%-примесь стекла топила блик в самой заливке). Поднято до 10% примеси стекла — разница выросла до ~26 (+33%), это НЕ равно белому наотмашь (чистый --m-sheen без примеси давал 255, полностью убирая тёплый тон стекла из блика, — проверено, выглядит как настоящая вспышка, а не отсвет, поэтому отклонено). Больше 255 не бывает физически (потолок sRGB) — на этом материале (светлое стекло, светимость заливки ~226 из 255) разница не может быть намного больше: это неизбежный физический потолок, не недоработка. Ширина полосы (стопы 30/48/66%) не менялась — усиление только через непрозрачность/яркость, широкая полоса превратила бы блик в засветку всего стекла. */ background-image: linear-gradient( 115deg, transparent 30%, color-mix(in srgb, var(--m-glass) 10%, var(--m-sheen)) 48%, transparent 66% ); border: 1px solid var(--m-gold); /* Скругление мягче общего --radius: 2px — зеркало это стекло в раме, острый угол ему противоречит. */ border-radius: 1.5rem; } @media (max-width: 30em) { .mirror__glass { padding-inline: var(--space-sm); } } /* Живой блик: там, где браузер понимает scroll-driven анимации, полоса едет по стеклу, пока зеркало проходит через вьюпорт — привязана к прокрутке через animation-timeline, без обработчика scroll на каждый кадр. Полоса вынесена в ::after (а не оживляет background-image самого .mirror__glass) ради z-index: -1 — слой должен красться под текстом реплики, но над заливкой, а у самой .mirror__glass под неё уже занят background-image. Раньше слой был шире и выше стекла (inset: -20% -60%) и ехал через translateX — так и было исходно задумано, но это ломало геометрию прокрутки: clip-path обрезает такой слой только визуально, а его layout-box шире родителя (.mirror__glass не overflow: hidden, см. комментарий выше) всё равно расширял scrollWidth страницы на десятки пикселей на каждом зеркале. Проверено: ::after заперт в границах стекла (inset: 0), а едет не сам слой, а фон внутри него — background-size шире контейнера, background-position сдвигается по шкале прокрутки. Диагональная полоса под углом при таком сдвиге едет параллельно самой себе, без искажения (сдвиг position не масштабирует и не скашивает картинку) — прежнее опасение было ошибочным. */ @supports (animation-timeline: view()) { .mirror__glass { background-image: none; /* position: relative само по себе НЕ создаёт контекст наложения — для z-index: -1 у ::after ниже нужен явный контекст на самом .mirror__glass (isolation: isolate), иначе потомок с отрицательным z-index уходит в контекст ближайшего предка, создающего его, и красится под заливкой .mirror__glass, а не над ней. isolation не трогает раскладку/геометрию и не делает элемент содержащим блоком для fixed-потомков — в отличие от transform/filter. */ isolation: isolate; } .mirror__glass::after { content: ''; position: absolute; /* Строго в границах стекла — никакого вклада в scrollWidth родителя. */ inset: 0; background-repeat: no-repeat; /* Втрое шире и в полтора раза выше контейнера — запас, чтобы полосе было куда ехать (background-position) и чтобы её диагональные концы не обрезались по высоте у самых краёв прохода. */ background-size: 300% 140%; /* Стопы сужены обратно пропорционально растяжению background-size: при 300%-ширине полоса шириной 30% ВИДИМОЙ ширины стекла должна занимать 10% длины градиента (30% / 300% × 100). Раньше стопы (30%…66%, разброс 36 пунктов) были унаследованы от нерастянутого фона — на 300%-фоне это превращалось в мягкую заливку почти во всю ширину контейнера (36 пунктов × 3 = 108% контейнера), а не в узкую полосу. Пик градиента (color-mix) поднят той же правкой 2026-08-06, что и у статичного запасного варианта выше (.mirror__glass background-image, см. комментарий там про числа и физический потолок) — оба места делят одну и ту же переменную яркости не случайно: гость с prefers-reduced-motion видит именно ЭТУ полосу, замороженную background-position ниже, а не статичный запасной вариант — если поднять яркость только там, заказчики изменения вообще не увидят. */ background-image: linear-gradient( 115deg, transparent 43%, color-mix(in srgb, var(--m-glass) 10%, var(--m-sheen)) 48%, transparent 53% ); /* Красится поверх заливки .mirror__glass, но под её содержимым: за счёт isolation: isolate выше .mirror__glass сама создаёт контекст наложения, и z-index: -1 остаётся внутри него — между фоном родителя и его контентом. */ z-index: -1; pointer-events: none; animation: mirror-sheen linear; animation-timeline: view(); } /* Гость отключил анимации в системе. Блик не убираем и не «замораживаем» на случайном кадре — ставим полосу намеренно: настройка просит убрать движение, а не превратить стекло в плоскую заливку. 52% по горизонтали — полоса чуть левее середины стекла. Шкала едет справа налево (см. @keyframes ниже: 10% — полоса за правым краем, 90% — за левым), и связь между процентом и местом полосы неочевидна: фон втрое шире стекла, поэтому сдвиг равен -2×ширины×процент. Менять число на глаз бесполезно — считать надо от этого. Правило стоит ЗДЕСЬ, а не в общем блоке prefers-reduced-motion выше по файлу: специфичность у обоих селекторов одинаковая, и победил бы тот, что ниже по исходнику. */ @media (prefers-reduced-motion: reduce) { .mirror__glass::after { animation-name: none; background-position: 52% 50%; } } } @keyframes mirror-sheen { from { /* 50% по вертикали — центрирует запас высоты (140%) симметрично сверху и снизу: (100% - 140%) * 50% = -20%, то есть кадр выступает на 20% за верх и низ стекла, как и было при inset: -20% -60% раньше. */ background-position: 10% 50%; } to { background-position: 90% 50%; } } /* -------------------------------------------------------------------------- Оживление зеркал — появление при прокрутке и «печать» перед контентом. Класс mirror--reveal ставит ТОЛЬКО site/js/mirror.js (и не ставит вовсе при prefers-reduced-motion) — без JS или с уважаемой настройкой гость видит зеркала сразу, начальное скрытие в разметке не зашито. -------------------------------------------------------------------------- */ .mirror--reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .mirror--reveal.mirror--visible { opacity: 1; transform: none; } /* Накладка «печатает…»: создаёт и удаляет её сам mirror.js, в разметке нет и следа — гость без JS и скринридер видят содержимое зеркала сразу. */ .mirror__typing { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 0.6em; background-color: var(--m-glass); } .mirror__typing-dot { width: 0.5em; height: 0.5em; border-radius: 50%; background-color: var(--m-gold); opacity: 0.25; animation: mirror-typing-blink 0.6s ease-in-out infinite; } .mirror__typing-dot:nth-child(2) { animation-delay: 0.15s; } .mirror__typing-dot:nth-child(3) { animation-delay: 0.3s; } @keyframes mirror-typing-blink { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } } /* --c-muted на голубом стекле — 4,04:1, мало для мелкого текста. Роль не переопределяем (--c-muted нужен таким на тёплом фоне страницы), а темним локально через color-mix — это даёт 5,25:1 без нового цветового литерала. */ .mirror__glass .muted { color: color-mix(in srgb, var(--c-muted) 70%, var(--c-ink)); } /* -------------------------------------------------------------------------- Служебное -------------------------------------------------------------------------- */ /* Видно только скринридеру. */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Поле-приманка (FR-017): человек его не видит и не заполняет, бот — заполняет. Спрятано так, чтобы не выпадать из потока подозрительно очевидным display: none, и убрано из обхода клавиатурой и из чтения скринридером. */ .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } :where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--c-accent-deep); outline-offset: 3px; } .decor { margin-inline: auto; } .decor--divider { display: block; width: min(18rem, 60%); height: auto; /* Центрирование берётся из `.decor` (margin-inline: auto). Свой `margin: 0 auto` здесь обнулял бы вертикальные поля и молча гасил `margin-bottom` подвального вензеля — оба правила равной специфичности, победа зависела бы от порядка строк. */ /* T106/T122: тиснение — общий рецепт --m-emboss (MATERIAL), см. его комментарий. */ filter: var(--m-emboss); } /* -------------------------------------------------------------------------- Кнопки -------------------------------------------------------------------------- */ .button { display: inline-block; /* Горизонтальные поля ужаты с 2.2em: кнопки читались как «слишком большие» (замечание пользователя 2026-08-12). Вертикальные НЕ трогаем — они держат высоту тач-цели, и её уменьшение выбило бы попадание пальцем. */ padding: 0.85em 1.5em; border: 1px solid transparent; /* Не --radius (2px): у страницы есть собственный язык скругления — пузыри реплик скруглены на 1.1em, и кнопки с прямыми углами из него выпадали. Тот же 1.1em, а не «пилюля»: на приглашении с рукописными гарнитурами полностью круглый торец читается как элемент современного интерфейса. */ border-radius: 1.1em; /* Кнопка — интерфейс, не проза: чёткость важнее эстетики (см. --font-ui). */ font-family: var(--font-ui); font-size: var(--fs-small); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; text-align: center; transition: background-color 0.2s, color 0.2s, border-color 0.2s; } .button--primary { background-color: var(--c-accent-deep); border-color: var(--c-accent-deep); color: var(--c-bg); } .button--primary:hover { background-color: var(--c-ink); border-color: var(--c-ink); } .button--ghost { background-color: transparent; border-color: var(--c-accent); color: var(--c-accent-deep); } .button--ghost:hover { background-color: var(--c-accent); color: var(--c-bg); } /* -------------------------------------------------------------------------- 1. Обложка -------------------------------------------------------------------------- */ .cover { min-height: 100svh; display: grid; /* Явная колонка, а не auto: auto-трек меряется по содержимому, и длинное неразрывное слово растянуло бы его шире вьюпорта. minmax(0, 1fr) фиксирует ширину по контейнеру (FR-008). */ grid-template-columns: minmax(0, 1fr); align-content: center; padding-block: var(--space-lg); } /* Специфичность 0,2,0 намеренно: правило перебивает `padding-inline` из `.container`, с которым делит элемент. При равной специфичности победа зависела бы от порядка строк в файле — перестановка блоков молча вернула бы широкие поля. */ .cover .cover__inner { padding-inline: var(--space-sm); } .cover__inner { text-align: center; /* У grid-элемента min-width по умолчанию равен min-content: длинное слово распёрло бы его шире трека. */ min-width: 0; } /* Венок обложки. Сетка в одну ячейку: венок и имена лежат друг на друге и масштабируются вместе, поэтому имена не выезжают из просвета ни на какой ширине. Венок идёт целиком, без обрезки: композиция задумана кольцом, отрезанный край оставил бы рубленые листья. */ .cover__frame { display: grid; place-items: center; /* От ширины КОНТЕЙНЕРА, а не вьюпорта: контейнер уже съел свои поля, и 92vw поверх них вылезали за экран — на 320 px венок обрезало скрытым переполнением как раз по краю листьев, ради целостности которых он и берётся целиком. */ width: min(100%, 34rem); margin-inline: auto; /* Кегль внутри считаем от ширины венка, а не от вьюпорта: на десктопе венок упирается в 34rem и расти перестаёт, а vw продолжал бы — имена вылезли бы за просвет на широком экране. */ container-type: inline-size; } .cover__frame > * { grid-area: 1 / 1; } .cover__frame img { width: 100%; height: auto; /* Тиснение — общий рецепт --m-emboss (MATERIAL), там же весь разбор: почему ореол, а не обводка; почему свет идёт сверху слева; почему тон живёт в тени, а не в блике; и почему порядок слоёв менять нельзя. */ filter: var(--m-emboss); } .cover__inside { /* Просвет внутри венка — около 56 % его ширины. */ width: 56%; text-align: center; } .cover__names { display: flex; flex-direction: column; align-items: center; gap: 0.1em; /* Имена набраны рукописным Pompadur (см. .cover__name) — гарнитура рассчитана на строчные, капслока здесь не будет: заказчики подписывают приглашение именно так (assets/source/refs/Пример приглашения + шрифт.jpg). */ /* Запасной кегль от вьюпорта — на случай, если единицы контейнера не поддержаны. Имена — сам заголовок h1, но кегль привязан к ширине венка (cqi ниже), а не к --fs-hero, поэтому в общий пересчёт роли --fs-hero не попадает автоматически. Множитель 0,8 (см. --fs-body), который здесь раньше компенсировал смену Cormorant→Lora, снят по правке заказчика 2026-08-07: имена и дата на макете мельче просвета венка, крупный кегль здесь желателен, а не риск. */ font-size: clamp(0.95rem, 4vw, 1.8rem); } .cover__date { margin-top: 0.9em; /* Множитель 0,8 (как у .cover__names выше) снят по той же правке 2026-08-07. */ font-size: clamp(0.65rem, 2vw, 0.95rem); /* T105: настоящее начертание вместо обычного 400 — файл Lora 500 подключён выше (см. @font-face, style.css:34), это не рукописный Pompadur, капслок ему не мешает. */ font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; /* «19 СЕНТЯБРЯ 2026, СУББОТА» в узком просвете рвётся на две строки — balance выравнивает их по длине, иначе вторая заметно длиннее первой. */ text-wrap: balance; /* Роль --c-muted (самый низкоконтрастный цвет палитры) на осветлённом фоне-рассвете (матовый слой снижен до 40%, см. .page-bg::after) гасила дату почти до невидимости — правка заказчика 2026-08-07. --c-ink — тот же цвет, что у имён выше (наследуется от body), и самый контрастный в палитре. */ color: var(--c-ink); /* T097: дату переносить нельзя, см. комментарий у .cover__name. */ hyphens: none; } @supports (width: 1cqi) { .cover__names { font-size: 6.4cqi; } .cover__date { /* Дата стоит ниже середины венка, а там просвет уже сужается — кегль меньше, чем позволяла бы ширина имён. T105: 2.3cqi (~12px при венке 544px) рвал текст на мелкие пятна вместе с разрядкой 0.22em — поднято до 3cqi. */ /* max(), а не голый 3cqi: у cqi-пути нет нижнего предела, а у запасного clamp выше он есть. Ниже ~375px они расходились в неправильную сторону — на 320px 3cqi давал 8.8px, то есть браузер С поддержкой контейнерных единиц показывал дату мельче, чем без неё. Пол именно 0.9rem, а не 0.65rem: корневой кегль страницы ОТЗЫВЧИВЫЙ и на 320px равен 14.08px, поэтому 0.65rem там = 9.15px — прибавка +0.4px, которая жалобу на читаемость не лечит. Замер 2026-08-12: коробка даты на 320px — 163.4px, при 0.9rem (12.67px) самая длинная строка 120.1px, запас 43px, две строки. Место есть. */ font-size: max(0.9rem, 3cqi); } } .cover__name { display: block; /* Рукописный Pompadur — как подпись под приглашением заказчиков (assets/source/refs/Пример приглашения + шрифт.jpg). Гарнитура рассчитана на строчные: text-transform:none страхует от капслока родителя, у Pompadur нет заглавных Ъ Ы Ь, и буква пропала бы молча (покрытие для «Владимир»/«Анастасия» проверено — обе буквы В и А в гарнитуре есть). */ font-family: var(--font-script); font-weight: 400; text-transform: none; letter-spacing: 0; /* T091 (правка заказчиков 2026-08-11, «сделать чётче/жирнее»): у гарнитуры только начертание 400 — font-weight:700 дал бы синтетическую псевдожирность, которая смазывает тонкие соединения рукописных букв. Утолщаем обводкой того же цвета, что заливка (currentColor = --c-ink, наследуется от body): paint-order рисует обводку ПОД заливкой, иначе она съедала бы внутренние просветы букв. Толщина подобрана снимком — имена стоят в узком просвете растрового венка. */ paint-order: stroke fill; -webkit-text-stroke: 0.4px currentColor; /* Тень — под вопросом заказчиков («может, добавить?»). Оставлена закомментированной: пользователю показаны снимки обоих вариантов (см. отчёт задачи T091), решение ещё не принято. */ /* text-shadow: 0 0.05em 0.1em rgba(51, 48, 46, 0.35); */ /* T097: имя переносить нельзя («Владими-р» хуже отсутствия переноса) — явный запрет, не завязанный на текущее отсутствие hyphens:auto у предков: правило переживёт будущую правку разметки без молчаливой регрессии. */ hyphens: none; } /* Амперсанд рядом с рукописными именами (.cover__names на обложке, .footer__names в подвале — оба набраны Pompadur, .accent/.cover__name) — один общий класс, не два одинаковых правила под разные секции (T090 + правка 10, 2026-08-07: подвал подтянут к обложке). У Pompadur (91 глиф) амперсанда НЕТ — если оставить его унаследованным, браузер молча подставит амперсанд из fallback-стека (cursive), а он у каждого гостя свой. Поэтому амперсанд явно набран курсивом Lora (var(--font-text)), а не унаследован от родителя. Кегль подбирался снимком под кегль имён в КАЖДОМ месте своим модификатором ниже — общего числового кегля тут нет. */ .conj { font-family: var(--font-text); font-style: italic; text-transform: lowercase; letter-spacing: 0; line-height: 0.85; } /* Кегль 1.5em подбирался под мелкий очковый рост Pompadur на обложке — на Lora курсивом при том же кегле амперсанд выглядел разбухшим, снижен до 1.15em (подобрано снимком, не расчётом). */ .cover__conj { font-size: 1.15em; } /* Подвал крупнее обложки (footer__names — 1.3× --fs-h3, см. ниже по файлу), но амперсанд курсивом Lora на этом кегле уже не «разбухает» — снижение не нужно, оставлен родной кегль текста (подобрано снимком). */ .footer__conj { font-size: 1em; } /* -------------------------------------------------------------------------- 2. Отсчёт и факты -------------------------------------------------------------------------- */ /* Компактная строка внутри пузыря реплики — раньше были четыре плашки со своей заливкой и рамкой (плашка в плашке поверх уже залитого зеркала). Теперь просто числа в ряд, разделённые тонкой чертой, без своего фона. */ .countdown { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); margin-top: var(--space-sm); } .countdown__cell { text-align: center; } /* Раньше между ячейками стояла черта (`+`-селектор, border-left на всех, кроме первой). На переносе строки (.countdown — flex-wrap: wrap) это ломалось: первая ячейка второго ряда — не первый child в разметке, черта доставалась и ей, повисая перед «минутами»/«секундами» ни от чего (видно на 390px). Гарантированно уместить 4 ячейки в ряд даже на 320px (см. ниже — на нём секунды скрыты) можно, но черты для минималистичного вида, который просили заказчики, всё равно лишние — ритм держит воздух между ячейками (gap), которому на переносе нечего ломать. */ .countdown__value { display: block; /* Антиква --font-display (раньше Cormorant Garamond, теперь Lora) рисует цифры не маюскульными — риск нечёткости в кегле отсчёта. Поэтому у ЧИСЕЛ отсчёта гарнитура переключена на --font-ui (Inter, маюскульные цифры — чёткость важнее эстетики, тот же принцип, что у кнопок и полей анкеты). Подписи (.countdown__label) — мелкая служебная подпись, тот же принцип. tabular-nums оставлен: без него цифры прыгают по ширине на каждый тик. */ font-family: var(--font-ui); font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem); line-height: 1; color: var(--c-accent-deep); font-variant-numeric: tabular-nums; } .countdown__label { display: block; margin-top: 0.35em; font-family: var(--font-ui); font-size: 0.75rem; letter-spacing: 0.08em; /* Внутри .mirror__glass — тот же затемнённый muted, что и у .avatar--guest (см. .mirror__glass .muted): подписи мелкие, им нужен запас контраста. */ color: color-mix(in srgb, var(--c-muted) 70%, var(--c-ink)); } .countdown__note { font-size: var(--fs-h3); text-align: center; } /* Календарь месяца торжества (FR-004a, T059) — сменил обратный отсчёт выше (.countdown* сохранён неиспользуемым, js/countdown.js осиротел намеренно). Сетка строится в js/calendar.js из EVENT.startsAt, здесь только оформление готовой . Правка «календарь и адреса внутрь сообщения»: раньше блок лежал отдельной плашкой на стекле шире пузыря переписки, margin-top держал отступ от предыдущего блока. Теперь .calendar — содержимое ВНУТРИ пузыря .chat__ask--calendar, свой отступ и фон пузырю не нужны, отступ снят. */ .calendar { position: relative; } .calendar__grid { width: 100%; border-collapse: collapse; table-layout: fixed; } .calendar__caption { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--c-accent-deep); text-align: center; margin-bottom: var(--space-xs); caption-side: top; } .calendar__grid th { /* Подписи дней недели — служебный интерфейс, как время программы дня и адреса (см. .facts__value/.timeline__time): чёткость важнее эстетики антиквы. */ font-family: var(--font-ui); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.08em; text-align: center; padding-block: 0.35em; color: color-mix(in srgb, var(--c-muted) 70%, var(--c-ink)); } .calendar__cell { text-align: center; padding: 0.35em 0; vertical-align: middle; } .calendar__cell--empty { /* Клетка вне месяца — пусто, без числа и без декора. */ } .calendar__day { display: block; font-family: var(--font-ui); font-size: var(--fs-ui); font-variant-numeric: tabular-nums; color: var(--c-ink); } /* Правка заказчиков (лист рисованных сердец 8310.eps, автор rawpixel.com): прямоугольная бежевая подложка клетки 19-го снята — выделение теперь несёт контур сердца №1 листа, заливка-плашка в скрапбучном стиле смотрелась чужеродно. Позиционный контекст для декоративного сердца — оно рисуется абсолютно и вправе выходить за границы клетки (клетка ужимается вплоть до ~20px на 320px-экране, сердцу нужно больше места, чем есть в ячейке). */ .calendar__cell--event { position: relative; } .calendar__cell--event .calendar__day { position: relative; /* Уточнение заказчиков 2026-08-06: число, обведённое сердцем, — тёмным (--c-ink, та же роль, что у обычных чисел календаря), сердце теперь матовым красным (--c-heart, см. PALETTE выше): два разных цвета читаются раздельно, даже когда контур сердца задевает край цифры. Полужирность снята тем же уточнением заказчиков (2026-08-06, третья правка) — выделение несёт сердце, дублировать его насыщенностью штриха цифры не нужно; начертание числа 19 — то же, что у остальных чисел месяца. */ color: var(--c-ink); } /* Оба ассета листа 8310.eps — ЗАЛИТЫЕ фигуры (fill-rule: nonzero), без обводки: у сердца №1 «контурность» дана самой геометрией (внешний и внутренний подпути кольцом гасят друг друга при заливке), а не толщиной линии — stroke тут не рисует ничего. */ .icon-heart { fill: currentColor; fill-rule: nonzero; } /* Сердце №2 листа 222560-P1MBMS-260.eps «Doodle heart collection» — обводит число 19 (клетка .calendar__cell--event). Пропорции контура: viewBox "0 0 93.102 85.511" → 93.102×85.511. Правка заказчиков («сердце перекрывает 19»): сердце №1 листа 8310.eps сюда не годилось по геометрии — нарисовано сдвоенной линией, центр viewBox лежал ПРЯМО НА штрихе, самый большой чистый просвет внутри — 34,2%×17,1% от габарита. Замена размером (множитель 5, старое смещение -74%/-40.6%) делала хуже: линия закрывала 33% площади глифов «19» и задевала ещё четыре числа сетки — 18 (41%), 26 (25%), 25 (22%), 12 (15%), а само сердце выходило вдвое шире клетки календаря. Сердце №2 нарисовано эскизно (один прерывистый контур, не кольцо-обводка): у него нет единого «чистого просвета» — выемка между лопастями уходит глубоко внутрь фигуры и делит середину надвое, так что ориентир вида «центр просвета X%/Y%» для него в принципе не работает (ранняя оценка 45,5%/41,4% была получена как самый большой прямоугольник без чернил и вводила в заблуждение — на практике в этой точке контур задевает саму «19»). Реальная посадка подобрана прямым перебором на живой странице: путь отрисован на canvas в экранном размере/положении (Path2D, fill nonzero), рядом растеризованы глифы чисел сетки тем же шрифтом от вычисленной базовой линии, перекрытие посчитано попиксельно. Для этого эскиза чистой одновременно для «19» и для всех соседей конфигурации нет — решение заказчиков: 4% лёгкого касания края «19» (по факту незаметно на глаз) вместо полного перекрытия соседних чисел. */ .calendar__heart--outline { display: block; position: absolute; /* Ширина в em от --fs-ui (кегль самого числа), не в rem: --fs-ui растёт от 320 к 1280 быстрее, чем корневой rem (плавная база html, см. выше) — на фиксированных rem сердце на широком экране отставало ростом от цифр и обрезало «1» у «19» (замер T059-правки). em привязывает рост сердца к росту самого числа, которое оно обводит. Множитель 3,4 — решение заказчиков после перебора на живой странице (Chromium/CDP, попиксельное сравнение залитого пути сердца и растеризованных глифов чисел сетки от вычисленной базовой линии). У этого эскиза нет размера/позиции, при которой одновременно чиста и «19», и все соседние числа (см. комментарий выше про глубокую выемку между лопастями). Перебор дал: множитель 3,8–4,2 полностью очищает «19», но линия задевает «12» (0,7–9,0% площади его глифов) и «18» (0,7–0,9%); множитель 3,4 с этим же смещением X (-58%) касается только самой «19» (около 4% площади её глифов на 1280px — лёгкое касание края, не перекрытие) и не задевает ни одного соседа. Заказчики выбрали второй вариант: небольшое касание целевого числа приемлемее, чем перечёркнутые соседние дни. */ width: calc(var(--fs-ui) * 3.4); /* Общий сброс `svg { max-width: 100% }` иначе клампит сердце шириной клетки (её containing block, ~20px на 320px-экране) — деко́р должен вправе выйти за границы клетки (см. комментарий у .calendar__cell--event выше), поэтому клампу здесь не место. */ max-width: none; aspect-ratio: 93.102 / 85.511; left: 50%; top: 50%; /* Сердце центрируется на числе: -50%/-50% ставит середину контура в середину клетки. Прежние -58%/-68% поднимали его на 9px выше числа, и верх контура заходил на «12» строкой выше — замечание заказчиков 2026-08-07. ВАЖНО про способ проверки. Подбирать эти координаты попиксельным пересечением «путь сердца × глифы числа» НЕ надо: такая проверка уже дважды дала ложный результат (утверждала перекрытие «19» там, где на снимке экрана цифра чистая). Причина — вычисление вертикали глифов от базовой линии расходится с реальным рендером. Проверять снимком блока, а не арифметикой. */ transform: translate(-50%, -50%); color: var(--c-heart); pointer-events: none; /* Уточнение заказчиков 2026-08-06: сердце рисуется ПОВЕРХ числа (раньше было наоборот, число лежало выше) — стек не меняем этой правкой, только геометрию (width/transform выше): цифра теперь и без стекового порядка не перекрыта — целиком в просвете клина. Цвет сердца — матовый красный (--c-heart), не золото: правка заказчиков 2026-08-06 (см. подробный расчёт цвета — комментарий у роли --c-heart в PALETTE выше). */ z-index: 1; } /* T102 (2026-08-12): прежняя карточка-список .facts/.facts__item/ .facts__label (подпись «Регистрация»/«Банкет» + значение в двух
  • ) удалена — оба адреса теперь звучат репликами от пары внутри .chat__ask, текстом, а не карточкой. Вторая итерация (замечание пользователя того же дня) убрала и обёртку .facts__value-row: она была display: inline-flex, то есть атомарным inline-блоком, — текст обтекал пару «адрес + значок» целиком, значок читался как вставка «в поле диалога», а точка после адреса срывалась на новую строку. Остался только .facts__value (сам текст адреса), значок стоит в строке отдельным inline-элементом (см. index.html, #date). T111 (осмотр 2026-08-12): раньше здесь стояли font-family/font-size var(--font-ui) — расчёт был на то, что критичная информация (адрес) выигрывает от чёткого служебного шрифта. На практике внутри пузыря .chat__ask (гарнитура Lora) это читалось разнобоем гарнитур посреди одного предложения — ошибкой вёрстки, а не осознанным акцентом. Адрес теперь набран той же Lora, что и вся реплика: он и так выделен тем, что стоит после тире и перед именованной кнопкой-значком, отдельная гарнитура для этого не нужна. */ .facts__value { /* T097: адрес переносить нельзя («Екатерин-бург» хуже, чем отсутствие переноса вовсе) — гасит hyphens: auto, унаследованный от .chat__ask (T102: раньше наследовалось от снятого .facts, источник сменился, само правило нужно по-прежнему). */ hyphens: none; } /* Кнопка-глобус — маленькая, круглая, тем же приёмом currentColor, что и .chat__composer-send--icon (D12), но контурная (ghost), а не залитая: рядом с адресом залитый кружок спорил бы за внимание с текстом. Один значок на строку — открывает окно карты с уже проложенным маршрутом именно до этого адреса (page.js#setupMapDialog). Правка T094 (жалоба заказчиков «плохо видны»): кружок и глиф увеличены (снимок строки адреса на 320/390/768/1280px — с прежними 1.75rem/0.95rem значок терялся рядом с текстом адреса, с этими числами читается сразу, но ещё не спорит с адресом за внимание). Видимый кружок сознательно меньше 44px тач-цели — тач-цель добита невидимым hit-area (::before ниже), а не раздутым видимым кругом, который на D12 признали слишком заметным для места рядом с текстом. */ .facts__map-btn { position: relative; display: inline-flex; /* Значок стоит ПРЯМО В СТРОКЕ текста реплики (T102, вторая итерация), а не в отдельной обёртке-flex, как раньше, — поэтому его надо посадить на базовую линию по-человечески: без vertical-align inline-flex выравнивается по baseline своего содержимого и кружок «проваливается» ниже строки. */ vertical-align: middle; flex-shrink: 0; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--c-line); border-radius: 50%; background: none; color: var(--c-accent-deep); cursor: pointer; transition: background-color 0.2s, color 0.2s; } /* Невидимая тач-цель 44×44 CSS px (порог тач-доступности) поверх видимого кружка меньшего размера — тот же приём с абсолютными px, а не rem, что и .map-dialog__close (см. её комментарий про плавающий html{font-size}). Кружок остаётся визуально скромным, а палец промахивается реже. */ .facts__map-btn::before { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } .facts__map-btn:hover { background-color: var(--c-accent-deep); color: var(--c-bg); } /* T101 (переделка 2026-08-12): непрерывно вращающийся золотой ободок — замена отвергнутому пользователем варианту с бегущей дугой (короткая яркая дуга на тусклом кольце — это в точности язык спиннера загрузки, от которой уходили ещё в T094). Здесь ободок залит золотом ЦЕЛИКОМ, без тёмного фона и без чёткого начала/конца дуги — переливается мягкий перепад яркости, а не бежит светлое пятно по тёмному кольцу. ::after (не ::before — та невидимая тач-цель 44px выше, трогать нельзя), сама кнопка border-box (см. * { box-sizing: border-box } в начале файла), поэтому inset: 0 у ::after кладёт его точно в границы кружка со стороной 2.25rem, без отдельного расчёта смещения под border: 1px. Ring-маска не менялась: radial-gradient с ключевым словом circle closest-side — ЕГО радиус равен половине СТОРОНЫ квадратного блока (а не половине диагонали, как у дефолтного farthest-corner на квадрате), поэтому 100% стопа совпадает точно с окружностью кружка (border-radius: 50% обрезает квадрат по тому же радиусу). Конус-градиент — два плавных пика яркости на противоположных сторонах кольца (0%/50%/100% — светлее, 25%/75% — сам --c-accent без подмеса), БЕЗ прозрачных или тёмных стопов: перепад мягкий по всей окружности, резкой границы светлого/тёмного нет нигде — то, что превращало прошлый вариант в дугу-спиннер. Яркость даёт color-mix с white, не сдвиг тона: единственный цвет страницы остаётся золото (--c-accent), меняется только его светлота. Вращает не сам конус (нужен @property для плавной интерполяции angle), а transform: rotate() всего ::after — анимируемо нативно везде без регистрации кастомных свойств. */ .facts__map-btn::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: conic-gradient( from 0deg, color-mix(in srgb, var(--c-accent) 60%, white) 0%, var(--c-accent) 25%, color-mix(in srgb, var(--c-accent) 60%, white) 50%, var(--c-accent) 75%, color-mix(in srgb, var(--c-accent) 60%, white) 100% ); -webkit-mask-image: radial-gradient( circle closest-side, transparent 0, transparent calc(100% - 4px), #000 calc(100% - 4px), #000 100% ); mask-image: radial-gradient( circle closest-side, transparent 0, transparent calc(100% - 4px), #000 calc(100% - 4px), #000 100% ); /* 8s, НЕ 7s (период globe-spin ниже) — периоды сознательно разведены, и разводить их по фазе не требуется: пространственно эффекты не пересекаются. Кольцо живёт на ::after и маской обрезано до внешних 4px кружка; глиф globe-spin — отдельный SVG-элемент 1.3rem внутри кружка 2.25rem, полностью внутри немаскированной прозрачной середины кольца. Разные элементы, разная область экрана — общий кадр с обоими движениями не даёт ряби, потому что накладываться геометрически нечему. linear (не ease-in-out, как у globe-spin) — вращение ободка ровное и медленное, без ускорений, которые читались бы как рывок. */ animation: map-btn-shimmer 8s linear infinite; } /* При наведении рамку заливает :hover выше — вращающийся ободок на золотом кружке был бы шумом поверх заливки, а не акцентом. animation: none (а не только opacity: 0) отменяет саму анимацию, а не замораживает её на текущем кадре. */ .facts__map-btn:hover::after { animation: none; opacity: 0; } @keyframes map-btn-shimmer { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .icon-globe { width: 1.3rem; height: 1.3rem; fill: currentColor; /* Центр вращения — визуальный центр самого глифа, а не левый верхний угол SVG-вьюпорта (дефолт CSS Transforms для SVG без transform-box). */ transform-box: fill-box; transform-origin: center; /* Вращение — периодическое, не непрерывное (T094): постоянно крутящийся значок на свадебном приглашении читается как индикатор загрузки, а не как декоративная деталь. Пауза зашита ВНУТРИ keyframes (глиф стоит на месте от 8% до 100% шкалы), а не через animation-delay — delay просто сдвинул бы старт первого прохода, а не создал бы паузу МЕЖДУ проходами при animation-iteration-count: infinite. Финальный кадр — те же 360deg (визуально неотличимо от 0deg), поэтому виток в начало цикла не даёт видимого скачка глифа назад. Кнопка (родитель) в анимации не участвует — крутится только сам глиф внутри неподвижной цели нажатия. */ animation: globe-spin 7s ease-in-out infinite; } @keyframes globe-spin { 0% { transform: rotate(0deg); } 10% { transform: rotate(360deg); } 100% { transform: rotate(360deg); } } /* Гость отключил анимации в системе. Общий блок @media (prefers-reduced-motion: reduce) выше по файлу уже сжимает animation-duration до 0.01ms — этого достаточно, чтобы вращение стало незаметным, но не гарантирует «полностью выключено»: на этой фиче на reduced-motion уже горели (T091/mirror-sheen), поэтому здесь — явный animation: none, а не расчёт на общее правило. */ @media (prefers-reduced-motion: reduce) { .icon-globe { animation: none; } /* T101: как и у .icon-globe выше — явный animation: none, а не расчёт на сжатие animation-duration общим правилом (на reduced-motion в этой фиче уже горели дважды, см. комментарий у .icon-globe). opacity: 0 дублирует финальный кадр keyframes на случай, если анимация всё же где-то не отменится. */ .facts__map-btn::after { animation: none; opacity: 0; } } /* -------------------------------------------------------------------------- 4. Программа дня -------------------------------------------------------------------------- */ /* Правка T060/T049 (программа дня — внутрь пузыря переписки): раньше .timeline лежал отдельной плашкой на стекле, рельс из вертикальной линии (--c-line) и обведённых кружков размечал шаги вдоль неё. Внутри пузыря .chat__ask своя рамка/фон уже есть (см. .chat__ask--calendar выше), рельс не нужен вовсе — пункты разделяет тонкая граница между строками, тем же --c-line, что раньше был у линии. */ .timeline { list-style: none; padding: 0; } .timeline__item { padding-block: var(--space-xs); } .timeline__item + .timeline__item { border-top: 1px solid var(--c-line); } .timeline__time { display: block; /* Время программы дня — критичная информация, чёткость важнее эстетики (см. --font-ui), в отличие от остального декоративного текста блока. */ font-family: var(--font-ui); font-size: var(--fs-h3); color: var(--c-accent-deep); } .timeline__title { display: block; color: var(--c-ink); } /* -------------------------------------------------------------------------- 5. Карта (T061, решения пользователя 2026-08-07): — отдельный блок «Место проведения» убран — оба адреса названы строками выше в блоке даты (.venue/.venue__name/.venue__address сняты вместе с разметкой); — инлайн-раскрытие карты в пузыре отклонено по факту осмотра («карта зажата шириной реплики») — карта переехала во всплывающее окно .map-dialog, тот же нативный , что у .rsvp-success; — вместо двух текстовых кнопок («Показать карту» + «Построить маршрут») — по одному значку-глобусу у каждой строки адреса, см. .facts__map-btn. -------------------------------------------------------------------------- */ .map { width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; background-color: var(--c-bg-soft); } .map__frame { width: 100%; height: 100%; border: 0; /* Виджет Яндекс.Карт перехватывает вертикальный свайп под панорамирование карты — на телефоне это глушит прокрутку страницы прямо над пузырём. pan-y оставляет браузеру только вертикальный жест страницы, горизонтали и жесты масштабирования карты (пинч, drag вбок) остаются у виджета. */ touch-action: pan-y; } @media (min-width: 40em) { .map { aspect-ratio: 16 / 9; } } /* Окно карты — тот же приём, что у .rsvp-success (width: min(…, 90vw), своя ::backdrop через opacity, а не color-mix — см. её комментарий). Шире .rsvp-success: карте нужна ширина, чтобы маршрут читался, а не только текст. */ .map-dialog { max-width: 40rem; width: min(40rem, 90vw); margin: auto; padding: var(--space-md); border: none; border-radius: var(--radius); background-color: var(--c-bg); } .map-dialog::backdrop { background-color: var(--c-ink); opacity: 0.55; } .map-dialog__close { /* Жалоба заказчика: кнопка «закрыть» визуально доминировала над картой — базовый .button рассчитан на кнопки-призывы во весь экран, а тут это единственная вспомогательная кнопка внутри модалки. Уменьшаем шрифт и паддинги, но не hit-area: min-width/height взяты в px, НЕ в rem — у сайта плавающий html{font-size} (клампится вниз до ~88% от 16px, см. html выше), и 2.75rem там дал бы ~39px вместо нужных 44 — ниже порога тач-цели. 44px — абсолютный порог, привязка к rem его бы подрывала. */ display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: var(--space-sm) auto 0; padding: 0.4em 1.4em; font-size: 0.8rem; } /* -------------------------------------------------------------------------- 6. Опросник -------------------------------------------------------------------------- */ .chat { /* Уже .mirror__glass: .mirror ограничен var(--measure) = 34rem, минус паддинги стекла (--space-md * 2) внутренняя ширина ~30,5rem — этот max-width уже ничего не режет сам по себе. Оставлен как явная граница на случай, если .chat однажды окажется вне зеркала. */ max-width: 32rem; margin-inline: auto; display: grid; gap: var(--space-md); } /* .chat__turn — «домик» реплики: пока гость до неё не дошёл или уже ответил, лежит здесь скрытым (см. chat-form.js). Всегда ровно два прямых потомка — .chat__ask (вопрос, переезжает в ленту навсегда) и .chat__control (поле, ходит туда-сюда между домиком и строкой ввода). */ .chat__turn { display: grid; gap: var(--space-xs); } /* .chat__control для трёх реплик —
    (переключатели/чекбоксы/счётчики), для остальных — сам : сбрасываем рамку fieldset только там, где она есть, иначе это же правило перебило бы padding у .field__input (та же специфичность класса, порядок в файле решил бы исход). */ fieldset.chat__control { border: 0; padding: 0; margin: 0; min-width: 0; /* fieldset иначе не сжимается на узких экранах */ } /* Реплика пары — пузырь, прижатый влево, с «хвостиком» снизу-слева. Аватарка пары рисуется псевдоэлементом, а не отдельной : у части реплик .chat__ask — это