/* ═══════════════════════════════════════════════════════ CSS Custom Properties ═══════════════════════════════════════════════════════ */ :root { /* Сайт оформлен в светлой теплой палитре (bone/wine/chocolate). Явно сообщаем браузеру, что dark-pref не должен переопределять системные UI-цвета (формы, скроллбары) — иначе формы RSVP уезжают в чужую тёмную раскраску. */ color-scheme: light; /* ━━━ BORDEAUX VELVET & BONE — Bernard Maisner / Tuscan luxe ━━━ Гравюра (hero-background.png + page-background.png) и рамка остаются как есть. Сдвиги: ivory → bone, ink → aubergine ink, champagne → antique gold, wine → claret. Тёплое семейство, родственное гравюре. */ /* Палитра — bordeaux velvet & bone (Maisner-канон) */ --milk: #F2E8D2; /* bone — настоящая хлопковая бумага Crane, на тон желтее */ --warm-beige: #E8DCC0; --chocolate: #2A0E14; /* aubergine ink — отливает бордо при свете */ --wine: #7A1F35; /* Bordeaux velvet — насыщенный бургундский, живой на кремовом фоне */ --taupe: #6F5847; --gold: #B89968; /* antique gold — потёртое, не «свежее» жёлтое */ --gold-dark: #8E7344; /* aged darker antique — для крупных орнаментов и hairlines */ --gold-strong: #6F5530; /* AUDIT 2026-05-11: deep antique — для eyebrow caps 10–14px (AA 5.5:1, было 3.7:1) */ --gold-highlight: #C9A773; /* AUDIT 2026-05-11 (colors): bright halo gold — style-tabs hover, music-toggle bloom */ --taupe-light: #C4AD98; /* letterpress paper edge — desktop side-fill */ --chocolate-deep: #1A0610; /* AUDIT 2026-05-11 (colors): deepest aubergine — sync с rsvp.css, details-lightbox overlay */ /* RGB-компоненты для rgba() — единая дисциплина прозрачностей */ --chocolate-rgb: 42, 14, 20; --chocolate-deep-rgb: 26, 6, 16; /* AUDIT 2026-05-11 (colors) */ --wine-rgb: 122, 31, 53; --milk-rgb: 242, 232, 210; --warm-beige-rgb: 232, 220, 192; /* AUDIT 2026-05-11 (colors): для alpha-вариантов warm-beige */ --gold-rgb: 184, 153, 104; --gold-highlight-rgb: 201, 167, 115; /* AUDIT 2026-05-11 (colors): bright halo gold rgb */ /* AUDIT 2026-05-11: 7-уровневая alpha-шкала (была 22 случайных значения). Семантические токены — каждый со своей ролью. Литеральные rgba(token-rgb, 0.X) в коде постепенно заменяются на эти aliases. */ --alpha-shadow: 0.06; /* контактные тени, hover bloom */ --alpha-shadow-soft: 0.10; /* мягкие декоративные тени */ --alpha-line-faint: 0.16; /* subtle borders, paper grain */ --alpha-line: 0.28; /* normal hairlines, emboss */ --alpha-line-strong: 0.50; /* bold hairlines, decoratives */ --alpha-text-muted: 0.72; /* secondary text, footnotes */ --alpha-text: 0.90; /* paper layers, focal text */ --line: rgba(var(--chocolate-rgb), 0.18); /* aubergine hairline */ --line-light: rgba(var(--chocolate-rgb), 0.10); --line-gold: rgba(var(--gold-rgb), 0.32); /* antique gold hairline */ /* Палитра swatches dresscode — physical colors (вынесены из inline) */ --swatch-honey: #C9A882; --swatch-mocha: #7C5C45; --swatch-choco: #2C1A10; --swatch-bordo: #5C2030; --swatch-olive: #6B7C4E; --swatch-darko: #3D4A2A; /* Letter-spacing scale */ --ls-body: 0.04em; --ls-sub: 0.12em; --ls-caps: 0.22em; /* Quiet-luxury stationery: bone-paper, 2 уровня (Bernard Maisner / Tuscan villa register). Hue ~40°, S~32%, alpha 0.64/0.72 mobile — гравюра дышит, карточки парят над ней. */ --paper-base: rgba(var(--milk-rgb), 0.64); /* base — bone, большинство секций */ --paper-focal: rgba(var(--warm-beige-rgb), 0.72); /* focal — Program, Theatre, RSVP, Contacts */ --emboss: rgba(var(--gold-rgb), 0.26); /* antique-gold hairline — base */ --emboss-strong:rgba(var(--gold-rgb), 0.38); /* antique-gold hairline — focal */ /* Алиасы старых токенов на новую систему — обратная совместимость */ --bg-air: var(--paper-base); --bg-paper: var(--paper-base); --bg-parchment: var(--paper-focal); --bg-card-soft: var(--paper-base); --bg-card-airy: var(--paper-base); --bg-card-solid:var(--paper-focal); --card-border: var(--emboss); /* теперь золотой emboss вместо тёмной обводки */ /* Типографика — fallback с size-adjust минимизирует CLS при подмене web-шрифтов. Cormorant Garamond — wedding-grade serif (Christian Thalmann, 2015), оптимизирован для свадебных и литературных проектов: чище читается на mobile + 6 weights для иерархии. */ --f-display: 'Cormorant Garamond', 'Cormorant Garamond Fallback', Georgia, serif; --f-title: 'Bodoni Moda', 'Bodoni Moda Fallback', Georgia, serif; --f-body: 'Cormorant Garamond', 'Cormorant Garamond Fallback', Georgia, serif; --f-accent: 'Cormorant Garamond', 'Cormorant Garamond Fallback', Georgia, serif; /* Накопленный смысл: --f-display для тела, --f-accent для italic-выделений (всё EB Garamond — single-voice). --f-title (Bodoni Moda) остаётся ТОЛЬКО для монументальных section__title — намеренная Didone-нота в роли якорей секций, изолированно от тела. */ /* AUDIT 2026-05-11: Pinyon + Marck (engravers XIX + handwritten XXI) — два разнородных script-голоса спорили за роль каллиграфии. Унифицировано на Cormorant italic 600 swash — single-voice, тот же шрифт что body/hero, плюс swash features через font-feature-settings. */ --f-script: 'Cormorant Garamond', 'Cormorant Garamond Fallback', Georgia, serif; --f-script-display: 'Cormorant Garamond', 'Cormorant Garamond Fallback', Georgia, serif; /* ── Spacing Scale (8px grid) ── */ --sp-1: 0.25rem; /* 4px — micro */ --sp-2: 0.5rem; /* 8px — tiny */ --sp-3: 0.75rem; /* 12px — small */ --sp-4: 1rem; /* 16px — base */ --sp-5: 1.5rem; /* 24px — medium */ --sp-6: 2rem; /* 32px — large */ --sp-7: 2.5rem; /* 40px — xlarge */ --sp-8: 3rem; /* 48px — 2xl */ --sp-9: 4rem; /* 64px — 3xl */ --sp-10: 5rem; /* 80px — 4xl */ /* ── Font-size scale (semantic) ── AUDIT 2026-05-11: было 13 близких значений (11/13/14/15/17/18/19/22/24/26/30/38/50) с неразличимыми парами 15-17-18-19 и 24-26-30. Сжато до 8 модульных по ratio ~1.25 (Major Third с лёгким дрейфом на display-end для увеличенного контраста крупных размеров): 12 · 14 · 16 · 19 · 22 · 28 · 36 · 48. Имена токенов сохранены для обратной совместимости. */ --fs-caps: 12px; /* eyebrow caps, mb-strip hint */ --fs-footnote: 14px; /* footnote, oldstyle nums */ --fs-mini: 14px; /* small body, mobile compact (мерж с footnote) */ --fs-small: 16px; /* dresscode subtitle, theatre footer */ --fs-body-sm: 16px; /* mobile body, mb body (near-miss 17px убран, мерж с small) */ --fs-body: 19px; /* main body — gifts text, rsvp text, final phrase */ --fs-body-lg: 19px; /* welcome text, dresscode lead (мерж с body) */ --fs-em: 22px; /* welcome emphasis, theatre title mid */ --fs-h3: 22px; /* h3 — gifts subtitle, gifts__note-title (мерж с em) */ --fs-h3-lg: 28px; /* welcome highlight, theatre title clamp upper */ --fs-h2-sm: 28px; /* hero names couture clamp upper (мерж с h3-lg) */ --fs-h2: 36px; /* section title, hero invite */ --fs-display: 48px; /* hero date day */ /* ── Semantic Spacing Tokens ── */ --section-py: var(--sp-9); /* вертикальный padding секций */ --section-px: var(--sp-7); /* горизонтальный padding секций */ --card-py: clamp(var(--sp-9), 7vw, 6rem); /* padding карточек — вертикальный (luxury breath: 64–96px) */ --card-px: clamp(1.3rem, 4.5vw, var(--sp-7)); /* padding карточек — горизонтальный */ --card-mx: clamp(var(--sp-3), 4vw, var(--sp-7)); /* margin карточек — горизонтальный */ --card-mt: 0.5rem; /* минимальный зазор, основной ритм через section-line */ --gutter: var(--sp-4); /* базовый отступ от края экрана */ /* ── Width scale (5 ступеней) ── */ --w-xs: 320px; /* mobile force */ --w-sm: 460px; /* text columns */ --w-md: 580px; /* mid columns */ --w-lg: 760px; /* wide content */ --w-xl: 1000px; /* invitation-card */ /* ── Motion tokens ── */ --ease-house: cubic-bezier(0.22, 0.61, 0.36, 1); /* единая кривая на весь сайт */ --dur-fast: 200ms; /* UI-feedback */ --dur-base: 400ms; /* default reveal */ --dur-slow: 800ms; /* scene-enter */ --dur-scene: 1600ms; /* hero / final coda */ /* Прочее */ --transition: var(--dur-slow) var(--ease-house); --card-max: 100%; } /* ═══════════════════════════════════════════════════════ Reset ═══════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 18px; /* root rem-base — НЕ токенизируем, иначе rem-сетка сломается */ background: var(--milk); /* AUDIT FIX 2026-05-11: запрещаем iOS Safari автомасштабирование текста в landscape. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* AUDIT FIX 2026-05-11 mobile: глобальный tap-highlight transparent — синхронно с rsvp.css. Локальные декларации на отдельных компонентах теперь дублируют, но не мешают. */ -webkit-tap-highlight-color: transparent; } /* Плавный скролл только если нет prefers-reduced-motion и не mobile Safari */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Уменьшаем базовый шрифт на маленьких экранах */ @media (max-width: 390px) { html { font-size: 16px; } } @media (max-width: 340px) { html { font-size: 15px; } /* На 320px табы «Дресс-код / Вдохновение» впритык — сжимаем трекинг. */ .style-tab { letter-spacing: 0.16em; padding-left: 10px; padding-right: 10px; } /* Заголовочные строки мудборда: на 320 две короткие фразы разваливались на 3–4 строки. Ужимаем шрифт и убираем «висячий» воздух. */ .moodboard__line { font-size: 14px; line-height: 1.55; } } body { font-family: var(--f-body); font-weight: 400; color: var(--chocolate); background: var(--milk); line-height: 1.7; -webkit-font-smoothing: antialiased; position: relative; isolation: isolate; /* Премиум-микротипографика — kerning + standard ligatures + optical sizing для Bodoni Moda. 'dlig' (discretionary ligatures) убрана: на кириллице эффекта нет, на латинском hero может дать неожиданные «ct», «st» в случайных местах — селективно включается там, где нужно. */ font-kerning: normal; font-optical-sizing: auto; font-feature-settings: 'kern' 1, 'liga' 1; text-rendering: optimizeLegibility; hanging-punctuation: first allow-end last; overscroll-behavior-y: none; } img, svg { display: block; max-width: 100%; } /* Keyboard focus */ :focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; } /* Skip-to-content — невидимый до получения фокуса */ .skip-link { position: absolute; /* AUDIT FIX 2026-05-12: top -40 был расчётом на старую высоту 42px (минус ~2px visible-rim). С новой 44px кромка стала бы видна → -48px (44 + 4 запас). */ top: -48px; left: 0; background: var(--wine); color: var(--milk); /* AUDIT FIX 2026-05-12: 116×42 → 116×44 — Apple HIG / WCAG 2.5.5 минимум. */ min-height: 44px; padding: 0 14px; display: inline-flex; align-items: center; font-family: var(--f-display); font-size: var(--fs-small); text-decoration: none; border-radius: 0 0 4px 0; z-index: 9999; transition: top var(--dur-fast) var(--ease-house); } .skip-link:focus { top: 0; } /* AUDIT 2026-05-11 (a11y fix B): visually-hidden — текст скрыт визуально, но доступен screen-reader'у. Используется для landmark-headings (welcome, final) и других ARIA-якорей, где визуальный H2 не нужен. */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Все текстовые блоки защищены от горизонтального переполнения. word-break не применяем — он ломает слова в произвольных местах. */ p, h1, h2, h3, li, a, span { overflow-wrap: break-word; } /* Балансирование строк (Safari 17+, Chrome 114+) — выравнивает длину строк в центрированных текстовых блоках. Идеально для лирического строфного текста. Работает только для блоков ≤ 6 строк, что нам и нужно. */ .hero__names, .hero__line, .welcome__text, .welcome__highlight, .dresscode__deck, .dresscode__note, .moodboard__line, .gifts__text, .gifts__note-text, .gifts__theatre-subtitle, .gifts__theatre-footer, .gifts__theatre-note, .weather-ps__text, .rsvp__text p, .final__phrase, .details-footnote { text-wrap: balance; } /* page-background.png — фиксированный базовый слой под всеми секциями после hero. Гравюра остаётся как в оригинале — она видна на странице между подложками секций и проступает сквозь их полупрозрачные фоны. */ body::before { content: ''; position: fixed; inset: -10px; background-image: /* AUDIT 2026-05-11 (colors): литерал rgba(238,222,202) → milk-rgb токен. */ linear-gradient(to bottom, rgba(var(--milk-rgb), 0.45) 0%, transparent 22%), url('../images/page-background.png'); background-repeat: no-repeat; background-position: center 72%; background-size: cover; pointer-events: none; z-index: -1; transform: translateZ(0); filter: saturate(0.78) brightness(1.04) contrast(1.05); } /* iOS Safari: URL-bar скрытие/показ меняет высоту visual viewport (~56px), position:fixed пересчитывает inset → прыжок фона и контента. Фикс: inset:0 убирает -10px выпуск (mobile не нуждается в нём — нет scrollbar), отрицательный top создавал sub-pixel смещение при изменении viewport. height:100lvh (large viewport) — предразвёрнуто на полный экран до скрытия URL-bar, при скрытии размер не меняется → jump исключён. */ @media (max-width: 768px) { body::before { inset: 0; height: 100lvh; will-change: auto; transform: translateZ(0); transition: none; filter: saturate(0.65) brightness(1.04) contrast(1.04); } } /* ═══════════════════════════════════════════════════════ Viewport Frame — видима только на hero, исчезает при скролле ═══════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════ Page Wrapper ═══════════════════════════════════════════════════════ */ .page-wrapper { display: block; width: 100%; min-height: 100vh; /* AUDIT FIX 2026-05-11 mobile: 100svh fallback — стабильная high-level высота при коллапсе URL-bar в iOS Safari. */ min-height: 100svh; position: relative; } /* background.jpg теперь на .hero::before — скроллится вместе с контентом */ /* ═══════════════════════════════════════════════════════ Invitation Card — главный контейнер с подложкой ═══════════════════════════════════════════════════════ */ .invitation-card { width: 100%; max-width: var(--w-md); margin-left: auto; margin-right: auto; background: transparent; min-height: 100vh; /* AUDIT FIX 2026-05-11 mobile: 100svh fallback — синхронно с .page-wrapper и rsvp.css. */ min-height: 100svh; position: relative; overflow-x: clip; /* clip не создаёт scroll-контейнер, hidden — создаёт и ломает скролл на iOS */ } /* AUDIT FIX 2026-05-11: safe-area-inset для landscape iPhone — notch съедает ~30px с одной стороны при горизонтальной ориентации. Применяется только когда inset > 0. */ @media (orientation: landscape) { .invitation-card { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } } /* ═══════════════════════════════════════════════════════ Reveal Animation — «Letterpress Unveiling» Expo-out easing (0.16,1,0.3,1): резкий старт + долгое торможение. scale(0.985): контент «поднимается со страницы», не просто слайдит. ═══════════════════════════════════════════════════════ */ .reveal { opacity: 0; transform: translateY(28px) scale(0.985); transition: opacity 920ms cubic-bezier(0.16, 1, 0.3, 1), transform 920ms cubic-bezier(0.16, 1, 0.3, 1); } .reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); } /* ─── Section title: первой оседает с micro letter-spacing ─── Bodoni «сжимается» при входе — letterpress press опускается на бумагу. Входит с задержкой 0 (первым), но duration длиннее чем у body — title «оседает» ещё после того, как контент уже проявился. */ .reveal:not(.is-visible) .section__title { opacity: 0; transform: translateY(10px); letter-spacing: 0.10em; transition: opacity 1000ms cubic-bezier(0.16, 1, 0.3, 1), transform 1000ms cubic-bezier(0.16, 1, 0.3, 1), letter-spacing 900ms cubic-bezier(0.16, 1, 0.3, 1); } .is-visible .section__title { opacity: 1; transform: translateY(0); letter-spacing: 0.01em; transition-delay: 0s; } /* ─── Section-line
: золотая черта рисуется из центра ─── Эффект «гравёр проводит линейку» — черта рисуется от центра к краям. :has() — поддерживается Safari 15.4+, Chrome 105+, Firefox 121+. */ .section-line { transform-origin: center; transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1), opacity 600ms cubic-bezier(0.16, 1, 0.3, 1); } .section-line:has(+ .reveal:not(.is-visible)) { transform: scaleX(0.06); opacity: 0.15; } /* ─── Typewrite: плавное появление строк внутри ещё не раскрытых секций ─── */ .reveal:not(.is-visible) .typewrite { opacity: 0; transform: translateY(8px); transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1), transform 900ms cubic-bezier(0.16, 1, 0.3, 1); } /* Stagger: замедляющаяся волна — первые строки с паузой, последние «залетают». Каждый следующий шаг короче предыдущего — финал приходит как завершение музыкальной фразы. */ .is-visible .typewrite:nth-child(1) { transition-delay: 0.06s; } .is-visible .typewrite:nth-child(2) { transition-delay: 0.15s; } .is-visible .typewrite:nth-child(3) { transition-delay: 0.23s; } .is-visible .typewrite:nth-child(4) { transition-delay: 0.30s; } .is-visible .typewrite:nth-child(5) { transition-delay: 0.35s; } .is-visible .typewrite:nth-child(6) { transition-delay: 0.39s; } .is-visible .typewrite:nth-child(7) { transition-delay: 0.42s; } .is-visible .typewrite:nth-child(8) { transition-delay: 0.45s; } .is-visible .typewrite:nth-child(9) { transition-delay: 0.47s; } .is-visible .typewrite:nth-child(10) { transition-delay: 0.49s; } .is-visible .typewrite:nth-child(11) { transition-delay: 0.51s; } .is-visible .typewrite:nth-child(12) { transition-delay: 0.53s; } .is-visible .typewrite:nth-child(n+13) { transition-delay: 0.55s; } /* ─── Welcome: музыкальный stagger с паузами ─── Лирический ритм вместо линейной «капельницы»: пауза перед italic-emphasis (раскрытие доминанты) и перед highlight (закрывающая подпись). Дети welcome__inner: 1=h2, 2=Этот вечер, 3=эмфазис, 4=с теми, 5=танцевать, 6=и смеяться, 7=signature-divider, 8=highlight. */ .section--welcome.is-visible .typewrite:nth-child(2) { transition-delay: 0.06s; } .section--welcome.is-visible .typewrite:nth-child(3) { transition-delay: 0.50s; } /* пауза перед эмфазисом */ .section--welcome.is-visible .typewrite:nth-child(4) { transition-delay: 0.70s; } .section--welcome.is-visible .typewrite:nth-child(5) { transition-delay: 0.84s; } .section--welcome.is-visible .typewrite:nth-child(6) { transition-delay: 0.98s; } .section--welcome.is-visible .welcome__signature-divider { transition-delay: 1.10s; } .section--welcome.is-visible .typewrite:nth-child(8) { transition-delay: 1.30s; } /* ═══════════════════════════════════════════════════════ Shared Section Styles ═══════════════════════════════════════════════════════ */ .section { padding: var(--section-py) var(--section-px); position: relative; border: none; background: transparent; box-shadow: none; } @media (max-width: 480px) { .section { padding: var(--sp-8) var(--sp-5); /* 48/20 — горизонтальный отступ от края экрана: 20px вместо 16 */ } } .section-card, .section-card-warm, .section-card-soft { margin: var(--card-mt) var(--card-mx) 0; border-radius: 6px; /* quiet-luxury: почти прямоугольник, как реальная бумага */ border: none; position: relative; overflow: hidden; transition: box-shadow var(--dur-base) var(--ease-house); } /* ── Тени — лист на пергаменте: gold-embossed hairline + контактная + воздушная ── */ .section-card { box-shadow: inset 0 0 0 1px var(--emboss), 0 1px 0 rgba(var(--chocolate-rgb), 0.06), 0 22px 50px -30px rgba(var(--chocolate-rgb), 0.24); } .section-card-warm { box-shadow: inset 0 0 0 1px var(--emboss-strong), 0 2px 0 rgba(var(--chocolate-rgb), 0.08), 0 28px 60px -32px rgba(var(--chocolate-rgb), 0.30); } .section-card-soft { box-shadow: inset 0 0 0 1px var(--emboss), 0 1px 0 rgba(var(--chocolate-rgb), 0.06), 0 22px 50px -30px rgba(var(--chocolate-rgb), 0.24); } /* ── Фактура старой бумаги — крупное мягкое зерно (600px @ 0.55 baseFreq) ── */ .section-card::before, .section-card-warm::before, .section-card-soft::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E"); background-repeat: repeat; pointer-events: none; z-index: 0; mix-blend-mode: luminosity; } /* Плотность текстуры по типу карточки */ .section-card::before { opacity: 0.32; } .section-card-warm::before { opacity: 0.32; } .section-card-soft::before { opacity: 0.24; } section.section-card, section.section-card-warm, section.section-card-soft { padding: var(--card-py) var(--card-px); } .section-card { background: var(--paper-base); } .section-card-warm { background: var(--paper-focal); } .section-card-soft { background: var(--paper-base); border-radius: 6px; } @media (max-width: 768px) { /* 2026-05-13 (mobile warmth): плашки ② старая — прозрачность 0.65/0.80 даёт пергаменту просвечивать */ .section-card, .section-card-soft, .section--details.section-card, .section--dresscode.section-card, .section--welcome, .section--gifts { background: rgba(245, 237, 224, 0.65); } .section-card-warm { background: rgba(240, 225, 205, 0.80); } } @media (min-width: 769px) { /* Desktop warmth: amber-parchment гармонирует с сепией гравюры, вместо холодного cream который серел на нейтральном фоне */ .section-card, .section-card-soft, .section--welcome, .section--gifts { background: rgba(252, 242, 222, 0.92); } .section-card-warm { background: rgba(246, 233, 208, 0.94); } } @media (max-width: 480px) { .section-card, .section-card-warm, .section-card-soft { margin: var(--card-mt) var(--gutter) 0; } section.section-card, section.section-card-warm, section.section-card-soft { padding: var(--sp-7) var(--sp-5); /* 40/24 — focal-секции: Welcome, Program, RSVP */ } /* AUDIT 2026-05-12 (mobile cards): Details и Dresscode — вспомогательные, уже padding. Focal-секции (Welcome/Program/RSVP) остаются 40px — больший вес = ритм приоритетов. */ section.section--details.section-card, section.section--dresscode.section-card { padding: var(--sp-6) var(--sp-5); /* 32/24 — compact, не focal */ } /* AUDIT 2026-05-12 (mobile cards): desktop-тени для стека карточек слишком тяжёлые. 60px blur уходит в следующую секцию, создавая тёмный ореол. Облегчаем для mobile. */ /* AUDIT 2026-05-12 (luxury polish): emboss border 0.26→0.44 — gold hairline на OLED при 0.26 сливался с warm-cream фоном. Тень -10px spread → -8px: карточка чётче. */ .section-card { box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), 0.44), 0 1px 0 rgba(var(--chocolate-rgb), 0.05), 0 12px 28px -8px rgba(var(--chocolate-rgb), 0.18); } .section-card-warm { box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), 0.52), 0 2px 0 rgba(var(--chocolate-rgb), 0.08), 0 16px 36px -12px rgba(var(--chocolate-rgb), 0.22); } } .section__title { font-family: var(--f-title); font-size: clamp(31px, 5.5vw, 40px); font-weight: 500; font-style: italic; /* premium-семья: editorial italic Bodoni */ line-height: 1.18; /* engraved h2-якорь: плотно, не наследуя body 1.7 */ letter-spacing: 0.01em; text-transform: none; color: var(--wine); /* единый акцент со всеми h2/h3 */ text-align: center; margin-bottom: 0.5rem; } /* ══ Цвет орнаментов — винный hue-rotate ══ */ .hero__monogram-img { filter: sepia(1) hue-rotate(320deg) saturate(1.8) brightness(0.4) contrast(1.3); } /* Разделитель под заголовком и между секциями — min-divider.png (1600×120, hand-drawn вензеля). hue-rotate(320deg) переводит sepia в винный — единая палитра орнаментов. Аудит 2026-05-11: opacity-шкала 0.75 (tier 3 — подразделитель). Аудит 2026-05-11 анимация: clip-path inset «разворачивание из центра наружу» вместо scaleX — вензеля сохраняют пропорции, не деформируются. */ .section-title-divider { display: block; width: 240px; height: auto; opacity: 0.75; margin: 0 auto var(--sp-5); filter: sepia(1) hue-rotate(320deg) saturate(1.4) brightness(0.42) contrast(1.2); clip-path: inset(0 0 0 0); transition: opacity 1s var(--ease-house), clip-path 1s var(--ease-house); } /* Divider «разворачивается» из-под центра — letterpress-плита ложится на бумагу. Рифма с hero-монограммой (ornament-fadein), но тише — opacity 0.75 vs 0.90. */ .reveal:not(.is-visible) .section-title-divider { opacity: 0; clip-path: inset(0 50% 0 50%); } /* Обёртка разделителя между секциями */ .section-transition { display: flex; justify-content: center; padding: 0.5rem 0; } .section-transition .section-title-divider { margin: 0; } /* Золотая линия-разделитель между секциями — статичный hairline (премиум: тишина). Аудит 2026-05-11: opacity 0.55 → 0.60 (tier 2 — section-line). AUDIT 2026-05-12 (luxury polish): 120px → 180px — на 390px-экране 31% ширины читалось как заглушка. 46% = намеренная черта. */ .section-line { display: block; width: 180px; height: 1px; border: none; background: linear-gradient(90deg, transparent, var(--gold), transparent); margin: var(--sp-5) auto; opacity: 0.65; } /* details наследует базовые margin для единого ритма title→divider */ /* В финале — divider в роли «закрывающего» glyph: вырастает с шириной полотна, но не доминирует над именами (Cormorant italic 600 swash). Specificity .final .x перебивает общий desktop-override `.section-title-divider { width: 300px }`. */ .final .final__divider-ornament, .final__divider-ornament { width: clamp(130px, 14vw, 220px); height: auto; margin-top: 1rem; margin-bottom: 1rem; opacity: 0.60; } .section__lead { font-family: var(--f-display); font-size: var(--fs-body); color: var(--chocolate); text-align: center; margin-bottom: 2rem; line-height: 1.8; } /* ═══════════════════════════════════════════════════════ 1. HERO ═══════════════════════════════════════════════════════ */ .hero { min-height: auto; max-height: none; display: flex; align-items: center; justify-content: center; padding: clamp(2rem, 5vw, 3rem) 2.5rem; text-align: center; position: relative; } /* hero-background.png — рамка hero, скроллится вместе с контентом. AUDIT 2026-05-11 (кейс 5): было background-size: 100% 100% — на 393px+ PNG (720×1280, aspect 9:16) растягивался по горизонтали, ornament-углы плыли. Теперь 100% auto: ширина = 100% контейнера, высота по aspect → углы остры. Если hero выше PNG (Pro Max), нижний край мягко затухает через mask-image. */ .hero::before { content: ''; position: absolute; top: 0; right: 0; left: 0; height: 100%; background-image: url('../images/hero-background.png'); background-repeat: no-repeat; background-position: center top; background-size: 100% auto; /* Плавный переход к следующей секции: рамка полностью видна (hero = PNG), последние ~15% мягко затухают → нет жёсткой границы между hero и следующим блоком. */ -webkit-mask-image: linear-gradient(to bottom, black 82%, transparent 100%); mask-image: linear-gradient(to bottom, black 82%, transparent 100%); pointer-events: none; z-index: 0; opacity: 1; transform: translateZ(0); transition: opacity var(--dur-base) var(--ease-house); } @media (max-width: 768px) { .hero::before { filter: saturate(0.65) brightness(1.04) contrast(1.04); } .hero { min-height: 100vh; /* fallback */ min-height: calc(100vw * 1280 / 720); /* PNG 720×1280 (9:16) — hero = ровно высота PNG, нет зазора под рамкой, нет ощущения растяжки. Если контент выше → hero раздвигается автоматически. */ /* AUDIT 2026-05-11 (кейс 1): bottom safe-area — home-bar 34px на iPhone X+ перекрывал дату при stretch на 100svh. Симметрично с top. */ padding: max(2rem, calc(env(safe-area-inset-top, 0px) + 1rem)) 1.5rem max(2rem, calc(env(safe-area-inset-bottom, 0px) + 1rem)); align-items: stretch; /* hero__inner растягивается на всю высоту */ justify-content: center; transform: translateZ(0); } .hero__inner { justify-content: center; gap: 0; padding-top: 0; padding-bottom: 0; } /* Типографские «цезуры» — пауза между логическими группами. Подогнано под превью B: компактный люксовый ритм без избыточного «дыхания». */ .hero__names--couture { margin-bottom: 14px; /* разрыв группы Identity → Narrative: 14+8=22px */ } .hero__line--remark { margin-top: 8px; margin-bottom: 8px; font-size: 16.5px; line-height: 1.42; letter-spacing: 0.012em; } .hero__line--invite { margin-top: 20px; /* было 12px — пауза перед главным речевым актом */ margin-bottom: 4px; } .hero__line--invite-tail { margin-top: 4px; margin-bottom: 5px; } .hero__line--accent { margin-top: 5px; margin-bottom: 10px; } .hero__date { margin-top: 22px; } } /* iPhone SE / 320×568 — рамка PNG ест ширину, текст-колонка зажата. Уменьшаем padding-inline и поднимаем кегль даты, чтобы кульминация читалась. */ @media (max-width: 359px) { .hero { padding-inline: 1.4rem; } .hero__inner { gap: 0; } .hero__date-day { font-size: 56px; } .hero__date-month { /* AUDIT 2026-05-12 (hero fix #2, iPhone SE): подъём кегля синхронно с базовым правилом. */ font-size: 16px; letter-spacing: 0.20em; } .hero__date-year { font-size: 14px; } } /* iPad/планшет 600–1023px — раньше hero растягивался на 100svh, текст плавал в центре, низ оставался пустым. Капируем высоту, чтобы открытка осталась компактной. */ @media (min-width: 600px) and (max-width: 1023px) { .hero { min-height: clamp(720px, 86svh, 880px); } } /* Desktop ≥1024px — hero-background.png (720×1280, portrait) при stretch в landscape терял орнаменты и расплющивал силуэт города. Вместо stretched-PNG: силуэт contained-снизу + двойная wine-рамка (внешняя border + inner box-shadow line) + corner brackets через background-image. Результат — letterpress-открытка, независимая от aspect-ratio. */ @media (min-width: 1024px) { .hero { isolation: isolate; /* PNG 720×1280 (9:16): clamp 720→1032px по высоте экрана (синхронно с 769px-правилом) */ min-height: clamp(720px, 88svh, 1032px); align-items: stretch; } .hero__inner { justify-content: center; padding-bottom: 0; } .hero::before { background-size: 100% auto; background-position: center top; opacity: 1; -webkit-mask-image: linear-gradient(to bottom, black 82%, transparent 100%); mask-image: linear-gradient(to bottom, black 82%, transparent 100%); } .hero::after { content: none; } } .hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0; width: min(520px, 100%); padding: 0; } @media (max-width: 768px) { .hero__inner { padding-bottom: 5vh; } } .hero__names { font-family: var(--f-display); font-size: clamp(26px, 6.6vw, 33px); font-weight: 400; color: var(--chocolate); line-height: 1.05; letter-spacing: 0.02em; } /* Имена — визитка, не герб: italic Garamond с тонкой золотой подложкой. Раньше были small-caps Bodoni wine с gold-line — переигранный акцент, крал внимание у главного call-to-arms «приглашают вас разделить». */ .hero__names--couture { display: flex; align-items: center; justify-content: center; gap: clamp(0.35em, 1.6vw, 0.6em); font-family: var(--f-display); font-size: 1rem; /* reset — реальные размеры на дочерних spans */ font-style: italic; letter-spacing: 0; line-height: 1.1; margin-bottom: 1.1rem; padding-bottom: 0; white-space: nowrap; position: relative; } /* Линия под именами больше не нужна — italic Garamond сам по себе мягкий, визитка читается без декоративной подчёркивающей черты. Освобождает gold-акцент для главной строки call-to-arms ниже. */ .hero__names--couture::after { content: none; } /* Имена — letterhead-идентификатор отправителя, а не смысловой пик. Гости уже знают, кто Михаил и Евгения; сообщение пригласительного — речевой акт и факт свадьбы, а не имена. Раньше имена визуально конкурировали за главный фокус (28–32px italic + крупный gold-amp), что нарушало классическую иерархию. */ .hero__names-name { font-family: var(--f-display); font-size: clamp(22px, 5.9vw, 26px); font-weight: 500; font-style: italic; text-transform: none; font-variant-caps: normal; font-feature-settings: "kern", "liga"; letter-spacing: 0.025em; color: var(--chocolate); margin-right: 0; } /* AUDIT FIX 2026-05-12: на iPhone SE-1 (320px) финальная «я» в Cormorant Italic слипается с «и» из-за pen-stroke хвоста. +1.5% трекинга только на самом узком брекете — глифы вздыхают, читаемость возвращается. */ @media (max-width: 359px) { .hero__names-name { letter-spacing: 0.04em; } } /* Gold-hairline между именами — вариант В. Символ убран, span рендерится как тонкая gold-линия с fade по краям. align-items на родителе переключён на center чтобы линия сидела вертикально по центру строки имён. */ .hero__names-amp { display: inline-block; width: clamp(32px, 8vw, 52px); height: 1px; background: linear-gradient( to right, transparent, var(--gold-dark) 25%, var(--gold-dark) 75%, transparent ); opacity: 0.60; flex-shrink: 0; align-self: center; font-size: 0; } @media (forced-colors: active) { .hero__names-amp { background: CanvasText; } } .hero__script { font-family: var(--f-script); font-size: clamp(37px, 9.9vw, 48px); font-weight: 600; font-style: italic; color: var(--wine); opacity: 0.75; line-height: 1; letter-spacing: 0.02em; margin-bottom: var(--sp-2); font-feature-settings: 'swsh' 1, 'salt' 1, 'ss01' 1; } /* Fallback на случай если PNG монограммы не загрузится — управляется JS-классом */ .hero__script--fallback { display: none; } .no-img-monogram .hero__script--fallback { display: inline-block; } .no-img-monogram .hero__monogram-img { display: none; } /* ══ Ornamental Images ══ */ .hero__script-wrap { display: block; margin-bottom: 0.5rem; } .hero__monogram-img { display: block; width: 96px; height: auto; aspect-ratio: 378 / 248; /* резервируем место до загрузки → нет CLS */ margin: 0 auto 18px; /* просвет до имён — монограмма-вензель отделена от letterhead */ /* AUDIT 2026-05-12 (hero fix #3): монограмма — вензель-сургуч, а не второй герб. 0.90 + плотный просвет → две идентификации стояли с равной плотностью. 0.72 + просвет до имён — letterhead-иерархия. SPACING 2026-05-12: hero__script-wrap отсутствует в HTML → margin перенесён на img. */ opacity: 0.72; animation: ornament-fadein var(--dur-slow) var(--ease-house) both; } @media (max-width: 768px) { .hero__monogram-img { margin-bottom: 40px; } } @media (max-width: 480px) { .hero__monogram-img { width: 88px; } } @keyframes ornament-fadein { from { opacity: 0; transform: scaleX(0.92); } /* AUDIT 2026-05-12 (hero fix #3): синхронно с .hero__monogram-img opacity (0.90→0.72), иначе animation подменяет static-значение и монограмма «прыгает» к 0.90 на финале. */ to { opacity: 0.72; transform: none; } } /* Дата — горизонталь: 29 АВГУСТА 2026 одной строкой. Раньше была пирамида 5:1:1 («29» / «АВГУСТА» / «2026») — глаз воспринимал день и месяц как разные иерархические уровни. Теперь пропорция 4:1.5:0.9 — единый блок. */ .hero__date { display: flex; flex-direction: row; align-items: center; justify-content: center; flex-wrap: nowrap; margin-top: 1rem; gap: var(--sp-2) 0.8rem; } /* Дата — классическая горизонталь «29 АВГУСТА 2026»: цифра и текст в одной типографической семье (Cormorant Garamond). Раньше Bodoni Moda для цифры создавала стилистический разрыв с Garamond-телом hero (Didone vs Garalde — разные эпохи). Теперь — light italic 300 в wine: грация и лёгкость без плакатной плотности. */ .hero__date-day { font-family: var(--f-display); /* Cormorant Garamond — единая семья со всем hero */ font-style: italic; font-size: clamp(50px, 13vw, 62px); font-weight: 400; /* regular italic — устойчивее на крупном кегле, чем light 300 */ color: var(--wine); line-height: 1; letter-spacing: 0.005em; /* AUDIT 2026-05-12 (typography): единый numeric regime со всеми датами hero и program-time — «29» теперь oldstyle (с descender у «9»), как и «2026» в year. Раньше lining/oldstyle соседствовали (modern «29» + Belle Époque «2026»). */ font-variant-numeric: oldstyle-nums; font-feature-settings: 'onum' 1; opacity: 0.95; } .hero__date-month { font-family: var(--f-display); /* AUDIT 2026-05-12 (hero fix #2): месяц-партнёр, а не подпись. Соотношение day:month было ≈4:1 — «АВГУСТА 2026» читалось как копирайт под «29». Подняли кегль и вес, чуть сжали трекинг → пропорция ≈3:1, единый блок даты. */ font-size: clamp(19px, 4.8vw, 21px); font-weight: 600; color: var(--wine); letter-spacing: 0.22em; text-indent: 0.22em; text-transform: uppercase; opacity: 0.88; } .hero__date-year { font-family: var(--f-display); font-style: italic; /* AUDIT 2026-05-12 (hero fix #2): год подтягивается за месяцем, держит пропорцию. */ font-size: clamp(16px, 4vw, 19px); font-weight: 400; /* AUDIT 2026-05-11 (кейс 4): 0.7 давало контраст ≈6.6:1 (AA, но не AAA для 13px). 0.82 → ≈8.8:1 AAA. Иерархия с day-wine 100% сохранена через светлоту. */ color: rgba(var(--chocolate-rgb), 0.82); letter-spacing: 0.14em; font-variant-numeric: oldstyle-nums; } .hero__line { font-family: var(--f-display); /* Cormorant Garamond regular */ font-size: clamp(17px, 4.6vw, 20px); /* крупнее — связки читаются увереннее */ font-weight: 400; line-height: 1.45; color: var(--chocolate); text-align: center; letter-spacing: 0.02em; } /* Авторская ремарка — italic Garamond, тише фактов на ~15%. Используется для строк-эпиграфов с лёгкой иронией («после долгих переговоров», «По столь редкому и счастливому поводу»). Кегль/цвет наследуют от .hero__line. */ .hero__line--remark { font-style: italic; opacity: 0.82; letter-spacing: 0.015em; /* AUDIT 2026-05-12 (hero типографика §Б): 1.45 на 3 строках весило как абзац. 1.35 — та же информация, читается как лёгкая авторская вставка-в-скобках. */ line-height: 1.35; margin-top: var(--sp-2); margin-bottom: var(--sp-2); /* AUDIT 2026-05-11 (кейс 2): на 320px длинная ремарка «После долгих переговоров…» рвалась greedy-переносом с сиротой в финале. balance выравнивает по длине. */ text-wrap: balance; } /* Side-rules для второй italic-ремарки («По столь редкому…») на desktop — letterpress-anchor. На широких экранах одинокая короткая italic-строка висела без якоря; тонкие wine-линии с soft-fade по краям превращают её в editorial pulled-quote. Применяется только ко ВТОРОМУ remark (после .hero__line--fact), чтобы не ломать многострочную первую ремарку, и через absolute-позиционирование, чтобы не съедать ширину колонки. */ @media (min-width: 1024px) { .hero__line--fact + .hero__line--remark { position: relative; } .hero__line--fact + .hero__line--remark::before, .hero__line--fact + .hero__line--remark::after { content: ''; position: absolute; top: 50%; transform: translateY(-50%); width: clamp(48px, 5vw, 80px); height: 1px; background: linear-gradient( to right, transparent, rgba(var(--wine-rgb), 0.4) 30%, rgba(var(--wine-rgb), 0.4) 70%, transparent ); pointer-events: none; } .hero__line--fact + .hero__line--remark::before { right: calc(100% + clamp(14px, 1.6vw, 24px)); } .hero__line--fact + .hero__line--remark::after { left: calc(100% + clamp(14px, 1.6vw, 24px)); } } /* Факт-декларация — «устраивают свадьбу». Классический ход люксового пригласительного: spaced uppercase Cormorant в роли «request the honor of your presence». Раньше тонул в ряду одинаковых body-строк (Garamond regular 17px рядом с italic-ремарками не давал ни цвета, ни веса). Теперь — единственная uppercase-строка в hero, читается мгновенно как смысловой центр блока, при этом без раздувания кегля. */ .hero__line--fact { font-family: var(--f-display); /* AUDIT 2026-05-12 (hero fix #4): role-marker «устраивают свадьбу» — request-the-honor. Было 13–16px / weight 500 — оптически тонул между двумя длинными italic-фразами (ремарка 3-строчная сверху + «По столь редкому» снизу). Подняли до 15–17px / 600, трекинг 0.32em→0.30em — мгновенно читается как смысловой шарнир, без раздувания кегля. */ font-size: clamp(15px, 4vw, 17px); font-weight: 600; font-style: normal; text-transform: uppercase; letter-spacing: 0.30em; text-indent: 0.30em; /* компенсация tracking — оптический центр */ color: var(--wine); opacity: 0.92; line-height: 1.4; margin-top: var(--sp-3); margin-bottom: var(--sp-3); } /* «приглашают вас разделить камерный праздник» — главный call-to-arms hero. Bodoni Moda italic + одна тонкая gold-черта снизу. Единственный сильный wine-акцент до даты — все остальные строки понижены до chocolate. */ /* Главный акцент — формальный акт приглашения «приглашают вас». Garamond italic 500 — единая тёплая семья со всем hero (вместо Bodoni Didone, который выбивался «fashion magazine» на тёплом папирусе). Кегль чуть крупнее, компенсация менее контрастного шрифта. */ /* «приглашают вас» — речевой акт, СМЫСЛОВОЙ ПИК всего hero. Это и есть сообщение пригласительного («I am hereby inviting you»). Имена выше — лишь идентификатор отправителя, дата ниже — практическая справка. Здесь — самый яркий wine, единственная gold-черта снизу. Garamond italic 600 — тёплая семья со всем hero. */ .hero__line--invite { font-family: var(--f-display); font-style: italic; font-weight: 600; font-size: clamp(30px, 8vw, 38px); color: var(--wine); line-height: 1.16; margin-top: var(--sp-4); margin-bottom: var(--sp-2); padding-bottom: 0.3em; position: relative; display: block; letter-spacing: 0.005em; text-indent: 0; font-feature-settings: 'swsh' 1, 'calt' 1, 'kern' 1, 'liga' 1; } .hero__line--invite::after { content: ''; position: absolute; left: 50%; bottom: 0.05em; transform: translateX(-50%); width: clamp(180px, 12em, 260px); height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0.7; } /* Эпиграф к акценту — «разделить камерный праздник». Garamond italic chocolate, тёплый тон. Минусовой margin-top — продолжение мысли акцента, а не отдельная строка. */ .hero__line--invite-tail { font-family: var(--f-display); font-style: italic; font-size: clamp(19px, 5vw, 23px); color: var(--chocolate); opacity: 0.88; line-height: 1.3; margin: 0.1rem auto 0; letter-spacing: 0.012em; text-wrap: balance; } /* «в Санкт-Петербурге» — тихий штамп-локация, не продолжение прозы. AUDIT 2026-05-12 (типографика §А): было 16–19px italic chocolate — тот же регистр что invite-tail (19–23px). Теперь 12–14px wine 0.58 — место-подпись под пассажем, ускоряет ритм к дате. */ .hero__line--accent { font-family: var(--f-accent); font-size: clamp(13px, 3.4vw, 14px); color: var(--wine); opacity: 0.85; /* V-4: 0.72→0.85 контраст ~5.1→6.0:1, outdoor-читаемость */ font-weight: 400; font-style: italic; line-height: 1.3; letter-spacing: 0.06em; margin-top: 4px; margin-bottom: var(--sp-2); } /* ═══════════════════════════════════════════════════════ 2. WELCOME ═══════════════════════════════════════════════════════ */ .section--welcome { background: var(--bg-air); padding-top: var(--sp-6); /* 32px */ padding-bottom: var(--sp-6); position: relative; } .welcome__inner { max-width: var(--w-sm); margin: 0 auto; padding: 0 var(--sp-5); /* 24px — текст дышит от овальной плашки */ text-align: center; } /* Зеркальная hairline сверху — закрывает конверт с обеих сторон (снизу аналог в ::before/::after welcome__highlight) */ /* AUDIT 2026-05-12 (luxury polish): hairline убрана. Карточка welcome уже имеет inset gold border — дублировать её opener-hairline внутри создаёт лишний горизонтальный ряд в стеке [closer] → [section-line] → [card border] → [opener]. */ .welcome__inner::before { display: none; } /* Триплет действий — базовая строка тела письма. Все строфы равны (включая первую) — иерархия через crescendo: ровные строки → italic emphasis → italic highlight с gold-hairline. */ .welcome__text { font-family: var(--f-display); font-size: var(--fs-body-lg); font-weight: 400; color: var(--chocolate); line-height: 1.72; letter-spacing: 0.015em; /* 0.02em перетрекован для прозы — 0.015em комфортнее */ margin: 0 0 var(--sp-3); /* 12px — каждая фраза-действие получает собственную паузу */ } /* Пунктум — «и смеяться громче, чем уместно.»: курсив как интонация финального жеста перед паузой и подписью. Размер и цвет наследуют от .welcome__text. */ .welcome__text em { font-style: italic; letter-spacing: 0.01em; /* чуть тоньше трекинг при italic Garalde */ } /* Акцент — доминанта блока: крупная курсивная строка */ .welcome__text.welcome__text--emphasis { font-family: var(--f-display); font-size: clamp(22px, 5.9vw, 30px); font-style: italic; font-weight: 500; color: var(--wine); /* AUDIT 2026-05-12 (typography): минус-tracking −0.008em сжимал italic Garalde на 27px, descenders «у/р/д» цепляли следующую строку. Положительный micro-tracking +0.005em и leading 1.36 возвращают воздух между глифами и строками. */ letter-spacing: 0.005em; line-height: 1.36; margin: 0 0 var(--sp-5); /* 8px-grid 20px */ } /* ── Typographic ornament — vintage aldus leaf ❦ ── */ /* Используется в welcome__highlight и dresscode__note вместо svg-сердечек */ .text-ornament { display: inline-block; font-family: var(--f-display); /* Cormorant Garamond — тот же шрифт, что окружающий body italic */ font-style: normal; font-size: 1.15em; /* чуть крупнее — ornament читается как визуальная точка, а не trailing-символ */ color: var(--wine); opacity: 0.90; /* tier 4 — focal accent глиф (аудит 2026-05-11: 0.85 → 0.90) */ vertical-align: -0.04em; margin-left: 0.22em; letter-spacing: 0; line-height: 1; transform-origin: center; } /* В дресс-коде сердечко остаётся в antique gold — рифмуется со swatches и заголовком секции */ .dresscode__note .text-ornament { color: var(--gold-dark); } /* Одноразовая субтильная пульсация ❦ при появлении секции (digital enhancement) */ .reveal.is-visible .text-ornament { animation: glyph-pulse 0.7s var(--ease-house) 0.4s 1 both; } @keyframes glyph-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } /* Финал — italic «подпись» в одном голосе с эмфазисом. Закрывающий gold-hairline mirror открывающему — единая «гравированная» оправа. */ .welcome__highlight { font-family: var(--f-display); font-size: var(--fs-em); font-weight: 400; font-style: italic; color: var(--wine); letter-spacing: 0.012em; line-height: 1.65; margin-top: var(--sp-5); /* 24px — равная пауза над и под финальной hairline */ position: relative; } /* AUDIT 2026-05-12 (luxury polish): средняя hairline убрана — три одинаковые 72px читались как обои. Пространство margin-top (32px) создаёт паузу перед подписью само. */ .welcome__highlight::before { display: none; } /* AUDIT 2026-05-12: closer hairline убрана — стек [closer]→[section-line]→[card border] давал 3+ горизонтальных линии подряд на переходе между секциями. */ .welcome__highlight::after { display: none; } /* Орнамент-«подпись» перед closing-строкой welcome. Разделитель сам создаёт визуальную паузу — margin-top highlight обнуляем. */ .welcome__signature-divider { margin-top: var(--sp-5); /* 24px — воздух после последней строфы */ margin-bottom: var(--sp-3); /* 12px — tight к подписи */ width: 180px; /* чуть уже стандартного 240px — камерный масштаб письма */ } .section--welcome .welcome__highlight { margin-top: 0; } .welcome__ornament-top { display: block; font-family: var(--f-display); font-size: 1.5rem; color: var(--wine); opacity: 0.90; text-align: center; margin-bottom: var(--sp-4); line-height: 1; } @media (max-width: 768px) { .section--welcome .welcome__highlight .text-ornament { display: block; font-size: 1.5rem; margin-top: var(--sp-4); margin-left: 0; } } /* ═══════════════════════════════════════════════════════ 3. DETAILS — компактный блок с двумя интерактивными якорями (фото→место, календарь→время). Описание стейджа и модалок — ниже в секции «DETAILS — interactive synthesis (v7)». ═══════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════ 4. PROGRAM — Vogue Brides editorial programme Заголовок события + caption-подзаголовок. Peak (Церемония) — отдельная сцена, обрамлённая двумя gold-hairlines. Между обычных строк нет линий — воздух разделяет. ═══════════════════════════════════════════════════════ */ /* Dinner-menu layout: имя события слева, время италиком справа на той же линии, между ними — тонкий gold dot leader. Описание под именем на полную ширину. Стиль ужинного меню старой школы. */ .program-list { display: block; max-width: var(--w-md); margin: 0 auto; margin-top: var(--sp-4); } .program-row { display: flex; flex-direction: row; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-5) 0; } .program-row:first-child { padding-top: 0; } .program-row__time { order: 2; flex-shrink: 0; min-width: 3.4rem; text-align: right; font-family: var(--f-display); font-style: italic; font-size: var(--fs-em); color: var(--chocolate); letter-spacing: 0.015em; font-variant-numeric: oldstyle-nums tabular-nums; font-feature-settings: 'onum' 1, 'tnum' 1; white-space: nowrap; margin: 0; padding: 2px 0 0; background: none; opacity: 0.58; } .program-row__event { order: 1; flex: 1; display: block; padding-right: 0; font-family: var(--f-display); color: var(--chocolate); line-height: 1.45; text-wrap: pretty; hanging-punctuation: first last; } .program-row__event::before { content: none; } .program-row__event b { display: inline; font-weight: 500; font-style: italic; font-size: var(--fs-em); color: var(--wine); letter-spacing: 0.005em; background: none; padding-right: 0; } .program-row__event em { display: block; margin-top: 6px; font-style: italic; font-size: var(--fs-small); color: rgba(var(--chocolate-rgb), 0.72); text-wrap: balance; background: none; padding-right: 0; } /* Peak — Церемония: hairlines сверху/снизу обрамляют кульминацию, кегль крупнее. */ .program-row--peak { border-top: 1px solid rgba(var(--gold-rgb), 0.45); border-bottom: 1px solid rgba(var(--gold-rgb), 0.45); } .program-row--peak .program-row__time { font-size: var(--fs-h3); font-weight: 500; color: var(--wine); opacity: 1; } .program-row--peak .program-row__event b { font-size: var(--fs-h3); letter-spacing: 0.015em; } .program-row--peak .program-row__event em { font-size: var(--fs-small); color: rgba(var(--wine-rgb), 0.78); } /* Разделители между обычными строками; после пика не нужен — там border-bottom. */ .program-row + .program-row:not(.program-row--peak) { border-top: 1px solid rgba(var(--chocolate-rgb), 0.07); } .program-row--peak + .program-row { border-top: none; } /* Stagger reveal: caesura перед peak (0.30s) — peak ударяет после паузы. */ .section--program .program-row { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-slow) var(--ease-house), transform var(--dur-slow) var(--ease-house); } /* Peak — cinematic moment: больше амплитуда и чуть длиннее duration, чтобы «Церемония» входила тише и значительнее, не наравне с остальными. */ .section--program .program-row--peak { transform: translateY(14px); transition-duration: calc(var(--dur-slow) * 1.25); } .section--program.is-visible .program-row { opacity: 1; transform: none; } /* AUDIT 2026-05-11 (program кейс 3): coda сжата 0.54/0.66 → 0.48/0.50. Cesura перед peak (0.30s) сохранена — cinematic-вход не теряется. Полное раскрытие 1.46s → 1.30s — на mobile успеваем до скролла. */ .section--program.is-visible .program-row:nth-child(1) { transition-delay: 0s; } .section--program.is-visible .program-row:nth-child(2) { transition-delay: 0.30s; } .section--program.is-visible .program-row:nth-child(3) { transition-delay: 0.42s; } .section--program.is-visible .program-row:nth-child(4) { transition-delay: 0.48s; } .section--program.is-visible .program-row:nth-child(5) { transition-delay: 0.50s; } .section--program.is-visible .program-row:last-child { opacity: 0.92; } /* ═══════════════════════════════════════════════════════ 5. DRESS CODE — editorial full-bleed (desktop) + tucked-text overlay (mobile) ═══════════════════════════════════════════════════════ */ .section--dresscode { background: transparent; } /* Section-card overrides — full-bleed photo+body, без внешнего padding секции */ section.section--dresscode.section-card { padding: 0; overflow: hidden; } /* Texture (paper grain) переносим из section-card на body, чтобы не перекрашивать фото */ .section--dresscode.section-card::before { display: none; } /* ── Photo (mobile: full-width 4/5 сверху · desktop: левая колонка) ── */ .dresscode__image { position: relative; aspect-ratio: 1 / 1; width: 100%; margin: 0; overflow: hidden; } .dresscode__image > img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* Vignette внизу фото — даёт читаемость overlay-текста на mobile. Длинная мягкая шкала: фото «садится» на paper-base без жёсткого стыка. */ .dresscode__image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(var(--chocolate-rgb), 0.62) 0%, rgba(var(--chocolate-rgb), 0.42) 22%, rgba(var(--chocolate-rgb), 0.20) 50%, rgba(var(--chocolate-rgb), 0.06) 75%, transparent 90%); pointer-events: none; } /* ── Overlay (eyebrow + title на нижнем крае фото — mobile only) ── */ .dresscode__overlay { position: absolute; left: 0; right: 0; bottom: var(--sp-6); text-align: center; color: var(--milk); z-index: 1; padding: 0 var(--sp-5); } .dresscode__overlay-eyebrow { display: block; font-family: var(--f-title); font-size: 11px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(var(--milk-rgb), 0.85); margin-bottom: var(--sp-3); } .dresscode__overlay-title { display: block; font-family: var(--f-title); font-style: italic; font-weight: 500; font-size: clamp(31px, 6.6vw, 40px); color: var(--milk); line-height: 1; text-shadow: 0 2px 12px rgba(var(--chocolate-rgb), 0.45); } .dresscode__overlay-rule { display: block; width: 48px; height: 1px; background: var(--gold); opacity: 0.75; margin: var(--sp-3) auto 0; } /* ── Body (paper-base, текст на бумаге) ── */ .dresscode__body { padding: var(--sp-6) var(--sp-5) var(--sp-7); text-align: center; background: var(--paper-base); position: relative; z-index: 1; } /* Paper-grain texture внутри body (унаследована плотность .section-card) */ .dresscode__body::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E"); background-repeat: repeat; pointer-events: none; z-index: 0; mix-blend-mode: multiply; opacity: 0.22; } .dresscode__body > * { position: relative; z-index: 1; } /* Inline header (desktop only — на mobile визуально скрыт, но доступен SR через overlay h2). AUDIT 2026-05-11 (dresscode кейс 1): было display:none — h2 «Стиль вечера» удалялся из дерева доступности на mobile, SR не получал heading для tabpanel. visually-hidden оставляет h2 для SR. */ .dresscode__header { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: 0; } .dresscode__eyebrow { display: block; font-family: var(--f-title); font-size: 11px; font-weight: 400; letter-spacing: 0.24em; margin-left: 0.24em; text-transform: uppercase; color: var(--gold-strong); margin-bottom: var(--sp-3); } /* ── Deck — главная поэтическая фраза, italic 22px ── */ .dresscode__deck { font-family: var(--f-display); font-style: italic; font-size: var(--fs-em); line-height: 1.45; color: rgba(var(--chocolate-rgb), 0.86); margin: 0 auto var(--sp-5); max-width: 28ch; text-wrap: balance; } /* ── Palette names — italic editorial-фраза через запятую, центрированная ── */ .dresscode__palette-names { font-family: var(--f-display); font-style: italic; font-size: var(--fs-small); color: rgba(var(--chocolate-rgb), 0.82); line-height: 1.55; margin: 0 auto var(--sp-5); padding: 0; text-align: center; letter-spacing: 0.015em; max-width: 36ch; /* Запрещаем автоматический перенос слов посреди составных названий («бордово-винный»): только явные пробелы и ­ */ hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; word-break: normal; text-wrap: balance; } /* ── Swatches — atelier fabric-card style: цвет + кремовый лейбл ── */ .dresscode-list { list-style: none; display: flex; justify-content: center; gap: 9px; padding: 0; margin: 0 auto var(--sp-3); flex-wrap: nowrap; width: fit-content; max-width: 100%; /* Убран контейнер-рамка: карточки плавают на бумаге */ } .dresscode-swatch { width: 44px; height: 76px; border-radius: 3px 3px 2px 2px; display: flex; flex-direction: column; cursor: pointer; position: relative; flex-shrink: 0; overflow: hidden; box-shadow: 0 6px 18px rgba(var(--chocolate-rgb), 0.22), 0 1px 4px rgba(var(--chocolate-rgb), 0.12), inset 0 0 0 0.5px rgba(255, 255, 255, 0.18); transition: transform var(--dur-fast) var(--ease-house), box-shadow var(--dur-fast) var(--ease-house); -webkit-tap-highlight-color: transparent; } /* Цветовая часть карточки */ .dresscode-swatch__color { flex: 1; position: relative; } /* Silk sheen — диагональный отблеск на ткани */ .dresscode-swatch__color::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 140deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 35%, transparent 60% ); pointer-events: none; } /* Кремовый лейбл внизу карточки */ .dresscode-swatch__label { flex-shrink: 0; padding: 5px 2px 4px; text-align: center; font-family: var(--f-display); font-style: italic; font-size: 11px; font-weight: 400; letter-spacing: 0.04em; color: rgba(var(--chocolate-rgb), 0.75); background: rgba(var(--milk-rgb), 0.97); border-top: 0.5px solid rgba(var(--gold-rgb), 0.28); white-space: nowrap; overflow: hidden; position: relative; z-index: 1; } @media (hover: hover) { .dresscode-swatch:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 10px 28px rgba(var(--chocolate-rgb), 0.30), 0 2px 6px rgba(var(--chocolate-rgb), 0.16), 0 0 0 1px rgba(var(--gold-rgb), 0.55); } } .dresscode-swatch:active { transform: translateY(-1px) scale(1.01); } .dresscode-swatch:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wine), 0 4px 12px rgba(var(--chocolate-rgb), 0.18); } /* Цвета — назначаем на __color элемент */ .dresscode-swatch:nth-child(1) .dresscode-swatch__color { background: var(--swatch-honey); } .dresscode-swatch:nth-child(2) .dresscode-swatch__color { background: var(--swatch-mocha); } .dresscode-swatch:nth-child(3) .dresscode-swatch__color { background: var(--swatch-choco); } .dresscode-swatch:nth-child(4) .dresscode-swatch__color { background: var(--swatch-bordo); } .dresscode-swatch:nth-child(5) .dresscode-swatch__color { background: var(--swatch-olive); } .dresscode-swatch:nth-child(6) .dresscode-swatch__color { background: var(--swatch-darko); } /* ── Affordance — подсказка под свотчами ── */ .dresscode-swatch-hint { font-family: var(--f-display); font-style: italic; font-size: var(--fs-mini); color: rgba(var(--chocolate-rgb), 0.82); text-align: center; letter-spacing: 0.02em; margin: 0 auto var(--sp-5); } /* ── Note — нижняя строка ── */ .dresscode__note { font-family: var(--f-display); font-size: var(--fs-small); color: rgba(var(--chocolate-rgb), 0.72); line-height: 1.6; max-width: 30ch; margin: 0 auto; } /* P.S. о погоде — маргиналия между moodboard и gifts. Museum-style: тихий italic-текст, smoke-eucalyptus hairline сверху, еле уловимый cool wash — единственный холодный полутон сайта, семантика «петербургское небо в августе». */ .weather-ps { display: block; max-width: var(--w-sm); margin: var(--sp-7) auto; padding: var(--sp-5) var(--sp-4); text-align: center; position: relative; background: linear-gradient(180deg, rgba(var(--smoke-rgb), 0.08) 0%, transparent 70%); border-radius: 4px; } /* AUDIT 2026-05-12 (luxury polish): hairlines top+bottom — 120px→180px, opacity 0.55→0.65. 120px = рифмовалось с section-line (была тоже 120px) и не имело веса. Теперь 180px top+bottom = симметричный letterpress-блок. */ .weather-ps::before, .weather-ps::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 180px; height: 1px; background: linear-gradient(90deg, transparent, var(--smoke), transparent); opacity: 0.65; pointer-events: none; } .weather-ps::before { top: 0; } .weather-ps::after { display: none; } /* section-line ниже уже даёт разделение — ::after дублировал */ @media (max-width: 480px) { .weather-ps { margin: var(--sp-6) var(--gutter); padding: var(--sp-4) 0; /* top + bottom padding для обоих hairlines */ } } /* AUDIT 2026-05-11 typography: small-caps → upright caps. Bodoni Moda Italic Cyrillic не имеет true smcp glyphs → synthetic-smcp делал «Постскриптум» тонким и неравномерным. Upright caps + tracking 0.22em даёт тот же engraved-эффект без подделки. */ .weather-ps__eyebrow { font-family: var(--f-title); font-style: italic; font-size: var(--fs-caps); letter-spacing: 0.22em; text-indent: 0.22em; text-transform: uppercase; color: var(--smoke-deep); display: block; margin-bottom: var(--sp-4); } .weather-ps__text { font-family: var(--f-display); font-style: italic; font-size: var(--fs-body-sm); color: rgba(var(--chocolate-rgb), 0.78); line-height: 1.65; letter-spacing: 0.015em; text-wrap: balance; margin: 0; } .color-preview { position: fixed; inset: 0; background: rgba(var(--chocolate-rgb), 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 7000; cursor: zoom-out; /* Fade-in: visible/opacity управляются классом .is-open из JS */ opacity: 0; visibility: hidden; transition: opacity 240ms var(--ease-house), visibility 0s linear 240ms; } .color-preview.is-open { opacity: 1; visibility: visible; transition-delay: 0s, 0s; } .color-preview__image { max-width: min(92vw, 760px); max-height: min(85vh, 85dvh); width: auto; height: auto; border: 1px solid rgba(var(--milk-rgb), 0.55); box-shadow: 0 20px 70px rgba(var(--chocolate-rgb), 0.45); background: var(--milk); transform: scale(0.96); transition: transform 300ms var(--ease-house); } .color-preview.is-open .color-preview__image { transform: scale(1); } /* Close-button — 44×44 tap-area, milk-on-chocolate */ .color-preview__close { position: absolute; top: max(env(safe-area-inset-top, 0px), 16px); right: max(env(safe-area-inset-right, 0px), 16px); width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(var(--milk-rgb), 0.55); background: rgba(var(--chocolate-rgb), 0.50); color: var(--milk); font-family: var(--f-title); font-size: 22px; font-weight: 400; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: background var(--dur-fast) var(--ease-house), border-color var(--dur-fast) var(--ease-house); /* AUDIT 2026-05-11 (dresscode кейс 4): iOS gray flash на close-btn. */ -webkit-tap-highlight-color: transparent; } .color-preview__close:hover { background: rgba(var(--chocolate-rgb), 0.72); border-color: rgba(var(--milk-rgb), 0.75); } .color-preview__close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } body.no-scroll { overflow: hidden; padding-right: var(--scrollbar-w, 0px); } /* iPad-зона (≥720, <1024): mobile-layout остаётся, но фото-кроп из 4:5 → 16:10, чтобы силк-фото не раздувалось во весь экран. */ @media (min-width: 720px) and (max-width: 1023.98px) { .dresscode__image { aspect-ratio: 16 / 10; } /* Карточка приподнимается над страницей даже без grid-split */ .section--dresscode { box-shadow: 0 24px 60px -20px rgba(var(--chocolate-rgb), 0.16), 0 6px 18px -8px rgba(var(--chocolate-rgb), 0.10); border-radius: 4px; overflow: hidden; } } @media (min-width: 1024px) { /* Editorial full-bleed: фото слева, body справа. Body-колонка теперь достаточно широкая, чтобы заголовок «Стиль вечера» (36px italic) шёл одной строкой. */ .section--dresscode { display: grid; grid-template-columns: 1.2fr 1fr; align-items: stretch; /* Карточка-приглашение «висит» над страницей: soft shadow + hairline */ box-shadow: 0 1px 0 rgba(var(--gold-rgb), 0.28) inset, 0 24px 60px -20px rgba(var(--chocolate-rgb), 0.18), 0 6px 18px -8px rgba(var(--chocolate-rgb), 0.12); border-radius: 4px; overflow: hidden; } .dresscode__image { aspect-ratio: auto; height: 100%; min-height: 540px; } /* Vignette не нужен на desktop — overlay-текст не лежит на фото */ .dresscode__image::after { display: none; } .dresscode__overlay { display: none; } .dresscode__header { /* AUDIT 2026-05-11 (dresscode кейс 1): возвращаем visible на desktop. */ position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal; margin-bottom: var(--sp-5); max-width: 340px; margin-left: auto; margin-right: auto; } /* Body — плотная колонка по центру cell, воздух работает на иерархию, а не пожирает её. */ .dresscode__body { padding: var(--sp-9) var(--sp-7); align-self: center; } /* Вариант C: единый max-width 340px для всех текстовых блоков — согласованная ширина колонки ≈ ширине ряда свотчей (6×44px+5×9px = 309px), устраняет «танец» разноширинных элементов при центральном выравнивании. */ .dresscode__deck { max-width: 340px; margin-bottom: var(--sp-5); } .dresscode__palette-names { max-width: 340px; } .dresscode__note { max-width: 340px; } .dresscode-swatch-hint { max-width: 340px; margin-left: auto; margin-right: auto; } } /* ═══════════════════════════════════════════════════════ 5.1 MOODBOARD ═══════════════════════════════════════════════════════ */ .section--moodboard { background: transparent; padding-top: 1rem; padding-bottom: 1rem; margin-top: 0.5rem; position: relative; } /* Edge-fade — affordance скролла. rgba(milk, 0) вместо transparent — иначе iOS Safari рисует grey-band посередине градиента. */ .section--moodboard::after { content: ''; position: absolute; top: 0; right: 0; width: 56px; height: 100%; background: linear-gradient(90deg, rgba(var(--milk-rgb), 0), var(--milk)); pointer-events: none; z-index: 1; } @media (max-width: 480px) { .section--moodboard::after { width: 32px; } /* V-3: 48→32px — меньше обрезки на 375px (8.5% vs 12.8%) */ } .moodboard__line { font-family: var(--f-display); font-style: italic; text-align: center; color: rgba(var(--chocolate-rgb), 0.75); font-size: var(--fs-body); line-height: 1.65; max-width: var(--w-sm); margin-left: auto; margin-right: auto; } .moodboard__line + .moodboard__line { margin-top: 0.5rem; } /* ── Мудборд: горизонтальная лента ── Editorial-frame: единый формат 3:4 portrait + щедрый зазор → каждое фото читается как отдельная композиция, а не плитка коллажа. */ .mb-strip { display: flex; gap: var(--sp-5); margin-top: var(--sp-6); overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline-start: var(--sp-3); -webkit-overflow-scrolling: touch; padding-bottom: var(--sp-3); padding-inline-start: 8px; padding-inline-end: 8px; scrollbar-width: thin; scrollbar-color: rgba(var(--gold-rgb), 0.5) transparent; } .mb-strip::-webkit-scrollbar { height: 2px; } .mb-strip::-webkit-scrollbar-track { background: transparent; } .mb-strip::-webkit-scrollbar-thumb { background: rgba(var(--gold-rgb), 0.5); border-radius: 2px; } .mb-strip img { flex-shrink: 0; width: clamp(180px, 58vw, 220px); aspect-ratio: 3 / 4; height: auto; object-fit: cover; scroll-snap-align: start; border: 1px solid var(--line-light); display: block; cursor: zoom-in; /* AUDIT 2026-05-11: единая editorial-выдержка с details/dlb-photo */ filter: sepia(0.10) saturate(0.94); transition: transform var(--dur-base) var(--ease-house), box-shadow var(--dur-base) var(--ease-house); } @media (hover: hover) { .mb-strip img:hover { transform: scale(1.015); box-shadow: 0 12px 32px rgba(var(--chocolate-rgb), 0.18); } } /* Tablet (≥720, <1024): кадры крупнее, чтобы 768 не выглядел «обкорнатой мобилкой» — две карточки получают воздух, не хирея у нижней кромки. */ @media (min-width: 720px) and (max-width: 1023.98px) { .mb-strip img { width: clamp(220px, 30vw, 280px); } } .mb-strip img:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; box-shadow: 0 0 0 1px rgba(var(--milk-rgb), 0.6), 0 14px 36px rgba(var(--chocolate-rgb), 0.22); } /* ── Editorial counter «01 / 20» — заменяет хинт «Полистать»: даёт масштаб ленты и обновляется на скролл (см. moodboard.js). Oldstyle + tabular nums, чтобы цифры не «прыгали» при смене разряда. */ .mb-strip__counter { text-align: center; margin: var(--sp-5) 0 0; font-family: var(--f-display); font-style: italic; font-size: var(--fs-footnote); letter-spacing: 0.22em; color: rgba(var(--chocolate-rgb), 0.80); font-variant-numeric: oldstyle-nums tabular-nums; font-feature-settings: "onum", "tnum"; } .mb-strip__counter-current { color: var(--wine); transition: color var(--dur-base) var(--ease-house); } .mb-strip__counter-sep { margin: 0 0.55em; color: var(--gold-dark); font-style: normal; letter-spacing: 0; } .mb-strip__counter-total { color: rgba(var(--chocolate-rgb), 0.78); } /* ── Stagger-reveal: первые 5 кадров проступают волной (60ms × i), дальше — мгновенно, чтобы скролл-навигация не «ловила лаг». */ .section--moodboard .mb-strip img { opacity: 0; transform: translateY(8px); transition: opacity 520ms var(--ease-house), transform 520ms var(--ease-house), box-shadow var(--dur-base) var(--ease-house); } .section--moodboard.is-visible .mb-strip img { opacity: 1; transform: translateY(0); } .section--moodboard.is-visible .mb-strip img:nth-child(1) { transition-delay: 0ms; } .section--moodboard.is-visible .mb-strip img:nth-child(2) { transition-delay: 80ms; } .section--moodboard.is-visible .mb-strip img:nth-child(3) { transition-delay: 160ms; } .section--moodboard.is-visible .mb-strip img:nth-child(4) { transition-delay: 240ms; } .section--moodboard.is-visible .mb-strip img:nth-child(5) { transition-delay: 320ms; } .section--moodboard.is-visible .mb-strip img:nth-child(n+6) { transition-delay: 360ms; } @media (prefers-reduced-motion: reduce) { .section--moodboard .mb-strip img, .section--moodboard.is-visible .mb-strip img { opacity: 1; transform: none; transition: none; } /* Аудит 2026-05-11: clip-path unfold отключаем — divider просто появляется через opacity */ .section-title-divider, .gifts__contacts-divider { clip-path: none !important; transition: opacity 0.3s ease !important; } .reveal:not(.is-visible) .section-title-divider, .reveal:not(.is-visible) .gifts__contacts-divider { clip-path: none !important; } } /* ── Пагинация мудборда ── */ .moodboard-nav { display: flex; align-items: center; justify-content: center; gap: var(--sp-5); margin-top: var(--sp-5); } .moodboard-nav__btn { background: none; border: 1px solid var(--line); color: var(--wine); font-family: var(--f-body); font-size: var(--fs-body); width: 38px; height: 38px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--dur-fast) var(--ease-house), color 0.2s ease; line-height: 1; } .moodboard-nav__btn:hover:not(:disabled) { background: var(--wine); color: var(--milk); } .moodboard-nav__btn:disabled { opacity: 0.25; cursor: default; } .moodboard-nav__counter { font-family: var(--f-display); font-size: var(--fs-footnote); letter-spacing: 0.2em; color: var(--taupe); min-width: 44px; text-align: center; } /* ── Лайтбокс мудборда ── Editorial: warm-bone мир сайта продолжается внутри overlay. Pure-white/black отсутствуют — тинты идут через --milk-rgb / --chocolate-rgb. */ .mb-lightbox { position: fixed; inset: 0; /* AUDIT 2026-05-11: убран backdrop-filter blur(20) saturate(1.05) — anti-luxury glassmorphism + expensive on mobile. Solid alpha 0.95 даёт cinema-style тишину. */ background: rgba(var(--chocolate-rgb), 0.95); z-index: 8000; display: flex; align-items: center; justify-content: center; padding: 1rem; opacity: 0; transition: opacity 320ms var(--ease-house); } .mb-lightbox.is-open { opacity: 1; } .mb-lightbox[hidden] { display: none; } .mb-lightbox__img { max-width: min(92vw, 820px); max-height: min(90vh, 90dvh); width: auto; height: auto; display: block; border: 1px solid rgba(var(--milk-rgb), 0.18); box-shadow: 0 24px 80px rgba(var(--chocolate-rgb), 0.55); /* AUDIT 2026-05-11: tonal-консистентность с mb-strip и details */ filter: sepia(0.10) saturate(0.94); transform: scale(0.96); transition: transform 380ms var(--ease-house), opacity var(--dur-fast) var(--ease-house); } .mb-lightbox.is-open .mb-lightbox__img { transform: scale(1); } .mb-lightbox__close, .mb-lightbox__arrow { position: absolute; background: rgba(var(--chocolate-rgb), 0.35); border: 1px solid rgba(var(--milk-rgb), 0.22); color: rgba(var(--milk-rgb), 0.78); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--dur-fast) var(--ease-house), border-color var(--dur-fast) var(--ease-house), color var(--dur-fast) var(--ease-house); } .mb-lightbox__close { top: 16px; right: 16px; font-size: var(--fs-body); width: 44px; height: 44px; } .mb-lightbox__arrow { top: 50%; transform: translateY(-50%); font-family: var(--f-title); font-size: var(--fs-h3-lg); line-height: 1; width: 46px; height: 46px; } .mb-lightbox__close:hover, .mb-lightbox__arrow:hover { background: rgba(var(--chocolate-rgb), 0.55); border-color: rgba(var(--gold-rgb), 0.45); color: var(--milk); } .mb-lightbox__close:focus-visible, .mb-lightbox__arrow:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; color: var(--milk); } .mb-lightbox__arrow--prev { left: 16px; } .mb-lightbox__arrow--next { right: 16px; } .mb-lightbox__counter { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); font-family: var(--f-display); font-style: italic; font-size: var(--fs-footnote); letter-spacing: 0.24em; color: rgba(var(--milk-rgb), 0.78); font-variant-numeric: oldstyle-nums tabular-nums; font-feature-settings: "onum", "tnum"; } @media (max-width: 480px) { .mb-lightbox__arrow--prev { left: 8px; } .mb-lightbox__arrow--next { right: 8px; } .mb-lightbox__arrow { width: 48px; height: 48px; font-size: 28px; } } /* ═══════════════════════════════════════════════════════ 6. RSVP ═══════════════════════════════════════════════════════ */ .section--rsvp { text-align: center; background: transparent; } .rsvp__text { max-width: var(--w-sm); margin: 0 auto var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); } .rsvp__text p { font-family: var(--f-display); font-size: var(--fs-body); color: var(--chocolate); line-height: 1.65; } .rsvp__text strong { font-weight: 600; font-style: italic; color: var(--wine); font-feature-settings: 'onum' 1, 'tnum' 0, 'kern' 1, 'liga' 1; } /* ═══════════════════════════════════════════════════════ 7. GIFTS ═══════════════════════════════════════════════════════ */ .section--gifts { background: transparent; padding-top: 1.5rem; } .gifts__grid { width: min(920px, 100%); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: var(--sp-5); } .gifts__col { text-align: center; } .gifts__gift-card { width: 100%; margin: 0; } .section--gifts .gifts__gift-card.section-card-soft { position: relative; z-index: 0; background: var(--paper-base); background-image: none; padding: var(--sp-6) var(--sp-6); overflow: hidden; margin: 0; } /* ::before — текстура бумаги наследуется от .section-card-soft */ .section--gifts .gifts__gift-card.section-card-soft::after { content: none; } @media (max-width: 480px) { .section--gifts .gifts__gift-card.section-card-soft, .section--gifts .gifts__contacts.section-card { margin: 0; padding: var(--sp-5) var(--sp-5); /* 24/24 — внутри секции gifts cards дышат равномерно */ } .section--gifts .gifts__note { margin: var(--sp-4) 0 0; padding: var(--sp-5) var(--sp-5); } .gifts__grid { gap: var(--sp-4); } } .gifts__contacts { width: 100%; margin: 0; text-align: center; /* Вертикальное центрирование — карточка ниже театра, контент держится посередине, не прижат к верху (фикс асимметрии 2-колоночного грида). */ display: flex; flex-direction: column; justify-content: center; } .section--gifts .gifts__contacts.section-card { /* AUDIT 2026-05-11: solid warm-beige ломал alpha-семью (0.82 / 0.92 / 0.95). Контакты теперь на paper-focal — единая letterpress-бумага с театром, но с другим shadow/hairline-rhythm: рядом, не близнецы. */ background: var(--paper-focal); padding: var(--sp-7) var(--sp-6); margin: 0; } @media (max-width: 768px) { /* paper-focal (warm-beige) даёт зеленцу на мобайле рядом с тёплым кремом других плашек. Override после базового правила — специфичность одинакова (0-3-0), каскад решает порядок. */ .section--gifts .gifts__contacts.section-card { background: rgba(240, 225, 205, 0.80); } } .section--gifts .gifts__gift-card .gifts__text { transform: none; } .gifts__subtitle { font-family: var(--f-title); font-style: italic; font-size: var(--fs-h3); font-weight: 400; letter-spacing: 0.01em; color: var(--wine); margin-bottom: 1rem; } /* h3 «Контакты» — eyebrow-регистр, тише h2 «Если захотите» (single-domain в карточке) */ .section--gifts .gifts__contacts .gifts__subtitle { font-family: var(--f-display); font-style: normal; font-size: var(--fs-caps); font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-strong); margin-bottom: var(--sp-4); } /* Подкормка нижней зоны: min-divider.png (вензеля) + часы работы. Закрывает асимметрию высоты между «театром» и «контактами» на десктопе. Аудит 2026-05-11: opacity 0.55 → 0.60 (tier 2) + clip-path unfold. */ .gifts__contacts-divider { display: block; width: 140px; height: auto; opacity: 0.60; margin: var(--sp-5) auto var(--sp-3); filter: sepia(1) hue-rotate(320deg) saturate(1.4) brightness(0.42) contrast(1.2); clip-path: inset(0 0 0 0); transition: opacity 1s var(--ease-house), clip-path 1s var(--ease-house); } .reveal:not(.is-visible) .gifts__contacts-divider { opacity: 0; clip-path: inset(0 50% 0 50%); } .gifts__contacts-hours { font-family: var(--f-display); font-style: italic; font-size: var(--fs-mini); color: var(--chocolate); opacity: 0.6; letter-spacing: 0.02em; margin: 0; text-align: center; } .gifts__text { font-family: var(--f-display); font-size: var(--fs-body); color: var(--chocolate); line-height: 1.65; margin-bottom: var(--sp-3); } .gifts__text:last-child { margin-bottom: 0; } /* Натали + телефон — одна контактная единица, убираем разрыв между ними */ .gifts__contacts .gifts__text:nth-of-type(2) { margin-bottom: 0; } .gifts__aside { font-style: italic; font-weight: 600; color: var(--wine); font-size: 0.95em; letter-spacing: 0.01em; } .gifts__link { display: inline-block; padding: 0.7rem 1rem; min-height: 44px; color: var(--wine); text-decoration: underline; text-decoration-color: rgba(var(--wine-rgb), 0.30); text-underline-offset: 0.16em; text-decoration-thickness: 0.5px; transition: color var(--dur-fast) var(--ease-house), text-decoration-color var(--dur-fast) var(--ease-house); } @media (hover: hover) { .gifts__link:hover { color: var(--gold-strong); text-decoration-color: rgba(var(--wine-rgb), 0.55); } } /* Focus-ring — wine hairline + воздушный offset, без «input-rectangle» */ .gifts__link:focus-visible { outline: 1px solid var(--wine); outline-offset: 4px; border-radius: 2px; box-shadow: 0 0 0 3px var(--paper-focal), 0 0 0 4px rgba(var(--wine-rgb), 0.30); } .gifts__note { margin: 1.5rem 0 0; width: 100%; text-align: center; background: var(--paper-base); border: none; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--emboss), 0 1px 0 rgba(var(--chocolate-rgb), 0.06), 0 22px 50px -30px rgba(var(--chocolate-rgb), 0.24); padding: var(--sp-6) var(--sp-6); position: relative; overflow: hidden; } .gifts__note::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E"); background-repeat: repeat; opacity: 0.22; pointer-events: none; z-index: 0; mix-blend-mode: multiply; } .gifts__note-title { font-family: var(--f-title); font-style: italic; font-weight: 400; font-size: var(--fs-h3); color: var(--wine); letter-spacing: 0.01em; text-align: center; margin-bottom: var(--sp-4); } .gifts__note-text { font-family: var(--f-display); font-size: var(--fs-body); color: rgba(var(--chocolate-rgb), 0.72); line-height: 1.65; margin-bottom: var(--sp-3); } .gifts__note-text:last-child { margin-bottom: 0; } /* ── Gifts: эпиграф над театральной программкой ── */ .gifts__epigraph { font-family: var(--f-display); font-style: italic; font-size: var(--fs-small); color: var(--chocolate); opacity: 0.62; text-align: center; margin: 0 0 var(--sp-4); line-height: 1.5; letter-spacing: 0.015em; } .gifts__epigraph::before, .gifts__epigraph::after { content: '·'; display: inline-block; margin: 0 0.7em; color: var(--gold-dark); opacity: 0.75; transform: translateY(-2px); } /* ── Gifts: список «если захотите дополнить» — обычный letterpress-лист ── */ .gifts__theatre { padding: 0; overflow: hidden; background: transparent; border: none; border-radius: 6px; margin: 0 auto; position: relative; box-shadow: inset 0 0 0 1px var(--emboss-strong), 0 2px 0 rgba(var(--chocolate-rgb), 0.08), 0 22px 50px -30px rgba(var(--chocolate-rgb), 0.24); } /* Header: focal paper, мини-divider в центре сверху, gold hairline снизу для отделения от actов */ .gifts__theatre-header { background: var(--paper-focal); padding: var(--sp-7) 2rem var(--sp-5); text-align: center; position: relative; } .gifts__theatre-header::before { content: ''; position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 30px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-dark), transparent); } .gifts__theatre-header::after { content: ''; position: absolute; bottom: 0; left: 26px; right: 26px; height: 1px; background: linear-gradient(90deg, transparent, var(--emboss-strong), transparent); } .gifts__theatre-eyebrow { font-size: var(--fs-caps); letter-spacing: .35em; text-transform: uppercase; color: var(--gold-strong); margin: 0 0 .45rem; } .gifts__theatre-title { font-family: var(--f-title); font-style: italic; font-weight: 400; font-size: clamp(31px, 6.1vw, 40px); color: var(--wine); margin: 0 0 .45rem; line-height: 1.12; letter-spacing: .015em; } .gifts__theatre-subtitle { font-family: var(--f-display); font-size: var(--fs-small); color: rgba(var(--chocolate-rgb), 0.72); font-style: italic; margin: 0; } .gifts__theatre-body { background: var(--paper-focal); padding: var(--sp-6) 2rem; } @media (max-width: 768px) { /* На мобайле header и body театра приводим к тому же warm-focal тону, что у контактов. var(--paper-focal) на mobile = rgba(232,220,192,0.72) даёт оливковый отлив. */ .gifts__theatre-header, .gifts__theatre-body { background: rgba(240, 225, 205, 0.80); } } .gifts__theatre-acts { list-style: none; padding: 0; margin: 0 0 var(--sp-5); } .gifts__theatre-act { display: flex; gap: 14px; align-items: flex-start; padding: .75rem 0; border-bottom: 1px solid var(--emboss); } .gifts__theatre-act:last-child { border-bottom: none; } .gifts__theatre-num { font-family: var(--f-title); font-style: italic; font-size: var(--fs-body); color: var(--wine); flex-shrink: 0; width: 28px; text-align: right; letter-spacing: .03em; opacity: 0.78; padding-top: 1px; } .gifts__theatre-content { flex: 1; text-align: left; } .gifts__theatre-name { font-family: var(--f-display); font-style: italic; font-weight: 600; font-size: var(--fs-body); color: var(--chocolate); display: block; margin-bottom: 2px; } .gifts__theatre-note { font-family: var(--f-display); font-size: var(--fs-small); color: var(--chocolate); opacity: .72; line-height: 1.4; display: block; text-wrap: balance; } .gifts__theatre-footer { font-family: var(--f-display); font-size: var(--fs-mini); color: var(--chocolate); opacity: .72; font-style: italic; line-height: 1.6; padding-top: 1rem; border-top: 1px solid var(--emboss-strong); text-align: center; text-wrap: balance; margin: 0; } @media (max-width: 480px) { .gifts__theatre-header { padding: var(--sp-6) 1.5rem var(--sp-4); } .gifts__theatre-body { padding: var(--sp-2) 1.5rem var(--sp-5); } } /* Подарки — стаггер карточек при появлении секции */ .section--gifts .gifts__gift-card, .section--gifts .gifts__contacts, .section--gifts .gifts__note { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-slow) var(--ease-house), transform var(--dur-slow) var(--ease-house); } .section--gifts.is-visible .gifts__gift-card { opacity: 1; transform: none; } .section--gifts.is-visible .gifts__contacts { opacity: 1; transform: none; transition-delay: 0.18s; } .section--gifts.is-visible .gifts__note { opacity: 1; transform: none; transition-delay: 0.32s; } /* ─── Театральная программка — линейный stagger типографики (фикс :nth-child bug). Generic `.is-visible .typewrite:nth-child(N)` считает среди сиблингов в каждом родителе → title и act-1 получали одинаковую задержку 0.06s. Здесь — единая волна сверху вниз: header → header → акт → акт → акт → footer. */ .section--gifts.is-visible .gifts__theatre-title { transition-delay: 0.10s; } .section--gifts.is-visible .gifts__theatre-subtitle { transition-delay: 0.22s; } .section--gifts.is-visible .gifts__theatre-acts > .gifts__theatre-act:nth-child(1) { transition-delay: 0.40s; } .section--gifts.is-visible .gifts__theatre-acts > .gifts__theatre-act:nth-child(2) { transition-delay: 0.50s; } .section--gifts.is-visible .gifts__theatre-acts > .gifts__theatre-act:nth-child(3) { transition-delay: 0.60s; } .section--gifts.is-visible .gifts__theatre-acts > .gifts__theatre-act:nth-child(4) { transition-delay: 0.70s; } .section--gifts.is-visible .gifts__theatre-footer { transition-delay: 0.86s; } /* Контакты — отдельная волна, сдвинутая после театра */ .section--gifts.is-visible .gifts__contacts .gifts__subtitle { transition-delay: 0.42s; } .section--gifts.is-visible .gifts__contacts .gifts__text:nth-of-type(1) { transition-delay: 0.54s; } .section--gifts.is-visible .gifts__contacts .gifts__text:nth-of-type(2) { transition-delay: 0.66s; } .section--gifts.is-visible .gifts__contacts .gifts__text:nth-of-type(3) { transition-delay: 0.78s; } /* V-5: 2-column @960px убран — внутри invitation-card 580px каждая колонка была ~176px рабочей ширины, текст «Цветы (цветочная подписка, букет)» рвался на 3+ строки. Оставляем 1-колонный стек на всех брекетах. */ /* ═══════════════════════════════════════════════════════ Buttons ═══════════════════════════════════════════════════════ */ /* ── CTA-кнопка: восковая лента ── */ /* ── CTA-кнопка: картуш ── */ .wax-ribbon-btn { position: relative; display: flex; align-items: center; justify-content: center; margin: 0 auto; width: clamp(240px, 85vw, 420px); max-width: 100%; /* не вылезает за padding RSVP-карточки */ aspect-ratio: 3 / 2; max-height: 200px; background: none; border: none; cursor: pointer; text-decoration: none; overflow: visible; transition: opacity var(--dur-slow) var(--ease-house), transform var(--dur-base) var(--ease-house), filter var(--dur-base) var(--ease-house); -webkit-tap-highlight-color: transparent; outline: none; } /* Винная заливка внутри овала — точная маска */ .wax-ribbon-btn::before { content: ''; position: absolute; inset: 0; background: #5E1A2A; -webkit-mask-image: url('../images/ornaments/cartoccio-oval-mask.png'); mask-image: url('../images/ornaments/cartoccio-oval-mask.png'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; z-index: 0; } /* Орнамент поверх */ .wax-ribbon-btn::after { content: ''; position: absolute; inset: 0; background: url('../images/ornaments/cartoccio-clean.png') center / contain no-repeat; filter: sepia(1) hue-rotate(320deg) saturate(1.5) brightness(0.5); z-index: 1; pointer-events: none; } /* Текст — Cinzel: римские лапидарные капители, читается как гравюра на печати */ .wax-ribbon-btn__text { font-family: 'Cinzel', Georgia, serif; font-size: clamp(11px, 3vw, 13px); font-weight: 400; font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: rgba(var(--milk-rgb), 0.96); position: relative; z-index: 2; padding: 0 22%; text-align: center; line-height: 1.4; } /* AUDIT 2026-05-11: shimmer удалён — восковая печать должна молчать (anti-cheap-signal). */ /* Hover — печать вдавливается в бумагу, не отрывается (восковая логика). AUDIT 2026-05-12: добавлен gold drop-shadow halo вокруг маски овала (не box-shadow вокруг bounding-rect). Не cheap-shimmer — печать как будто чуть подсвечена «изнутри» под курсором. */ .wax-ribbon-btn { transition: opacity var(--dur-slow) var(--ease-house), transform var(--dur-base) var(--ease-house), filter var(--dur-base) var(--ease-house); } .wax-ribbon-btn:hover { transform: translateY(1px); filter: drop-shadow(0 0 6px rgba(var(--gold-rgb), 0.38)) drop-shadow(0 4px 12px rgba(var(--chocolate-rgb), 0.14)) brightness(1.04); } .wax-ribbon-btn:active { transform: translateY(2px); filter: brightness(0.96); } /* Caesura — пауза-вдох перед появлением кнопки после последнего typewrite-абзаца. Stagger 3-х .typewrite в RSVP заканчивается ~0.18s; 0.42s даёт отчётливый вдох. */ .reveal:not(.is-visible) .wax-ribbon-btn { opacity: 0; } .section--rsvp.is-visible .wax-ribbon-btn { transition-delay: 0.42s, 0s, 0s; } /* Focus для клавиатуры */ .wax-ribbon-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 8px; } @keyframes dot-wave { 0%, 100% { transform: scale(1); filter: sepia(1) hue-rotate(320deg) saturate(1.8) brightness(0.3) contrast(1.3) drop-shadow(0 1px 2px rgba(var(--wine-rgb), 0.15)); } 50% { transform: scale(1.35); filter: sepia(1) hue-rotate(320deg) saturate(1.8) brightness(0.3) contrast(1.3) drop-shadow(0 0 5px rgba(var(--gold-highlight-rgb), 0.3)); } } @keyframes swatch-glow { 0%, 100% { box-shadow: 0 1px 3px rgba(var(--chocolate-rgb), 0.12); } 50% { box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.25), 0 1px 3px rgba(var(--chocolate-rgb), 0.12); } } @keyframes line-shimmer { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.65; } } /* ═══════════════════════════════════════════════════════ HERO — рукописное появление имён + плавный fade остального ═══════════════════════════════════════════════════════ */ /* Скрываем hero-контент до загрузки веб-шрифтов — пользователь не видит FOUT-колебания. opacity вместо visibility: смена opacity — compositor-операция (без repaint), visibility требует полного перерисовки subtree → stutter при появлении на мобиле. */ html:not(.fonts-ready) .hero__inner { opacity: 0; } html.fonts-ready .hero__inner { opacity: 1; } /* Couture-имена: рукописный росчерк слева направо — «подпись пера». Эффект применяется к h1 целиком, имена раскрываются как один росчерк. */ .hero__names--couture { clip-path: inset(0 100% 0 0); opacity: 0; } html.fonts-ready .hero__names--couture { animation: handwrite-reveal var(--dur-scene) var(--ease-house) 0.5s forwards, handwrite-fade 0.4s ease 0.5s forwards; } @keyframes handwrite-reveal { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0% 0 0); } } @keyframes handwrite-fade { 0% { opacity: 0; } 100% { opacity: 1; } } /* Остальные строки — плавное проявление сверху вниз */ .hero-fade { opacity: 0; transition: opacity 0.7s var(--ease-house); } .hero-fade.is-shown { opacity: 1; } /* ═══════════════════════════════════════════════════════ ЭФФЕКТЫ ═══════════════════════════════════════════════════════ */ /* ── Свотчи дресс-кода — paint-chip появление: opacity + лёгкий lift ── */ .reveal:not(.is-visible) .dresscode-swatch { opacity: 0; transform: translateY(6px); transition: opacity var(--dur-base) var(--ease-house), transform var(--dur-base) var(--ease-house); } .is-visible .dresscode-swatch { opacity: 1; transform: translateY(0); transition: opacity var(--dur-base) var(--ease-house), transform var(--dur-base) var(--ease-house), box-shadow var(--dur-fast) var(--ease-house); } /* Stagger 100ms × 6 от 0.4s — кратно музыкальной сетке */ .is-visible .dresscode-swatch:nth-child(1) { transition-delay: 0.40s, 0.40s, 0s; } .is-visible .dresscode-swatch:nth-child(2) { transition-delay: 0.50s, 0.50s, 0s; } .is-visible .dresscode-swatch:nth-child(3) { transition-delay: 0.60s, 0.60s, 0s; } .is-visible .dresscode-swatch:nth-child(4) { transition-delay: 0.70s, 0.70s, 0s; } .is-visible .dresscode-swatch:nth-child(5) { transition-delay: 0.80s, 0.80s, 0s; } .is-visible .dresscode-swatch:nth-child(6) { transition-delay: 0.90s, 0.90s, 0s; } /* ═══════════════════════════════════════════════════════ FINAL ═══════════════════════════════════════════════════════ */ .final { position: relative; overflow: hidden; padding: var(--sp-5) var(--sp-7) calc(var(--sp-8) + env(safe-area-inset-bottom, 0px)); text-align: center; border: none; background: transparent; box-shadow: none; } /* Bone-halo + золотое свечение — отделяет финальный текст от неровной гравюры под ним. Fade к color-keyed rgba(...,0), не к transparent — иначе Safari даёт серую кайму. AUDIT 2026-05-11 (colors): литералы milk/gold rgba → токены через var() — кульминационный градиент теперь в семье. */ .final::before { content: ''; position: absolute; inset: 0; background: radial-gradient( ellipse 92% 75% at center 35%, rgba(var(--milk-rgb), 0.82) 0%, rgba(var(--milk-rgb), 0.45) 50%, rgba(var(--milk-rgb), 0) 80% ), radial-gradient( ellipse at center 35%, rgba(var(--gold-rgb), 0.22) 0%, rgba(var(--gold-rgb), 0) 60% ); pointer-events: none; z-index: 0; } .final__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); background: transparent; border: none; box-shadow: none; } .final__phrase { font-family: var(--f-display); font-size: var(--fs-body); color: var(--chocolate); letter-spacing: 0.015em; margin-bottom: 0.5rem; /* Soft bone-halo за текстом — диффузный, без cheap-emboss-выпуклости. Поднимает контраст над неровной гравюрой, текст «парит» как чернила на бумаге. AUDIT 2026-05-11 (colors): литералы rgba(242,232,210) → milk-rgb токен. */ text-shadow: 0 0 14px rgba(var(--milk-rgb), 0.6), 0 0 4px rgba(var(--milk-rgb), 0.85); } /* Setup-фраза «Список гостей небольшой» — приглушена, готовит пунчлайн. AUDIT 2026-05-11 (final mobile F4): alpha 0.72 → 0.80 — на текстуре body::before 13px italic был на границе AA; +0.08 alpha сохраняет приглушённость, возвращает запас. */ .final__phrase--quiet { font-size: var(--fs-mini); color: rgba(var(--chocolate-rgb), 0.80); letter-spacing: 0.05em; margin-bottom: var(--sp-3); } /* Пунчлайн «К счастью, вы в нём» — главный смысловой пик финала. Поднят выше имён (было 22-26px → 24-30px) для honest hierarchy. Negative tracking даёт куртюрную плотность italic display-кегля. */ .final__phrase--peak { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: clamp(26px, 6.1vw, 33px); color: var(--wine); line-height: 1.3; letter-spacing: -0.005em; margin-bottom: 0.8rem; } .final__phrase:first-child { margin-bottom: var(--sp-3); } /* Финал — элементы выезжают снизу поэтапно (100ms stagger из JS). translateY вместо scale — «выплывание» честнее, не «приближение». */ .final-emerge { opacity: 0; transform: translateY(20px); transition: opacity 900ms var(--ease-house), transform 900ms var(--ease-house); } .final-emerge.is-emerged { opacity: 1; transform: none; } /* Имена — двойной рендер: • Apple (iOS/macOS): Great Vibes → Snell Roundhand для кириллицы (нативный, красивый) • Все остальные: Cormorant Italic — серифный италик с кириллицей, единый со стилистикой остального сайта */ .final__names { font-family: 'Cormorant Garamond', 'Cormorant Garamond Fallback', Georgia, serif; font-style: italic; font-weight: 500; font-size: clamp(40px, 10vw, 60px); color: var(--wine); letter-spacing: 0.015em; line-height: 1.15; opacity: 0.92; text-shadow: 0 2px 8px rgba(var(--chocolate-rgb), 0.12); font-feature-settings: 'liga' 1, 'dlig' 1, 'kern' 1; max-width: 100%; overflow-wrap: break-word; } .is-apple .final__names { font-family: 'Great Vibes', cursive; font-style: normal; font-weight: 400; font-size: clamp(42px, 11vw, 66px); letter-spacing: 0.025em; } /* «Искренне ваши,» — эпистолярная подпись над именами. Курсивный italic, мягкий тон, чуть мельче основной типографики. AUDIT 2026-05-11 (final mobile F3): alpha 0.7 → 0.82 — italic 15px над текстурой гравюры был на границе AA; подпись остаётся тише имён (α 0.92), но читается на солнце. */ .final__signature { font-family: var(--f-body, var(--f-display)); font-style: italic; font-size: var(--fs-small); font-weight: 400; letter-spacing: 0.015em; color: rgba(var(--chocolate-rgb), 0.88); margin: var(--sp-2) 0 0.2rem; line-height: 1.4; } /* ═══════════════════════════════════════════════════════ MOBILE — single-line fit, max-width: 480px ═══════════════════════════════════════════════════════ */ @media (max-width: 480px) { /* Hero — padding управляется .hero, hero__inner без лишних отступов */ /* Монограмма + имена + проза — собранный плотный блок, без «разбросанности» */ .hero__script-wrap { margin-bottom: clamp(2px, 0.5svh, 6px); } .hero__names--couture { margin-bottom: clamp(14px, 2.6svh, 22px); } /* Симметрия паузы вокруг кульминации первого акта */ .hero__line--remark { margin-top: clamp(6px, 1.2svh, 11px); margin-bottom: clamp(6px, 1.2svh, 11px); } .hero__line--invite { margin-top: clamp(12px, 2svh, 18px); margin-bottom: clamp(2px, 0.4svh, 5px); } .hero__line--invite-tail { margin-top: clamp(2px, 0.4svh, 5px); margin-bottom: clamp(6px, 1.2svh, 10px); } .hero__line--accent { margin-top: clamp(6px, 1.1svh, 10px); margin-bottom: clamp(3px, 0.7svh, 6px); } /* Дата — отступ на мобильном: явный «вдох» между лирикой и кульминацией */ .hero__date { margin-top: clamp(16px, 2.8svh, 28px); } /* Стиль вечера — на mobile фото full-bleed сверху с overlay-текстом */ .dresscode__overlay-title { font-size: 28px; /* чуть тише на узких экранах */ } .dresscode__deck { font-size: 19px; /* 21 → 19 на mobile, чтобы дышать */ max-width: none; /* снимаем 28ch — контейнер диктует, balance находит чистый перенос */ } .dresscode__palette-names { font-size: 15px; line-height: 1.75; } /* Welcome — вариант В «Театральная пауза»: тело плотно (8px), акцент получает сцену (32px до/после), дивайдер + подпись с воздухом снизу. */ .section--welcome { padding-top: var(--sp-5); /* 24px над верхним ❦ */ padding-bottom: 28px; /* 28px под нижним ❦ */ } /* inner padding снят: колонка ≤480px шире без него */ .welcome__inner { padding-left: 0; padding-right: 0; } /* Верхний ❦ — чуть больше воздуха до текста */ .welcome__ornament-top { margin-bottom: var(--sp-4); /* 16px */ } /* Тело — плотная строфа: 8px между строками */ .welcome__text { font-size: 19px; letter-spacing: 0.015em; margin-bottom: var(--sp-2); /* 8px — поэтический блок-строфа */ text-wrap: balance; } /* Акцент «с теми, кто нам по-настоящему дорог» — на сцене: 32px паузы до и после, акцент «висит в воздухе» */ .welcome__text.welcome__text--emphasis { font-size: 21px; letter-spacing: 0; line-height: 1.45; margin-top: 2rem; /* 32px — пауза перед кульминацией */ margin-bottom: 2rem; /* 32px — пауза после */ } /* Дивайдер — больше воздуха вокруг */ .welcome__signature-divider { margin-top: 2.25rem; /* 36px */ margin-bottom: var(--sp-3); /* 12px */ } /* Финальная строка — тише, ближе к дивайдеру */ .welcome__highlight { font-size: 18px; color: rgba(var(--wine-rgb), 0.82); margin-top: var(--sp-3); /* 12px — дивайдер уже создал паузу */ } /* Нижний ❦ — заметный отрыв от текста */ .section--welcome .welcome__highlight .text-ornament { margin-top: var(--sp-4); /* 16px */ } /* Заголовки секций */ .section__title { font-size: var(--fs-h3-lg); letter-spacing: 0.03em; } /* RSVP — длинный заголовок «Ответ на приглашение» в арке должен помещаться в 1 строку */ .section--rsvp .section__title { font-size: var(--fs-em); letter-spacing: 0.02em; } /* Программа — flex-layout на мобильном, время справа. */ .program-row { padding: var(--sp-5) 0; gap: var(--sp-3); } .program-row__time { font-size: var(--fs-em); min-width: 3rem; } .program-row__event b { font-size: var(--fs-em); } .program-row--peak .program-row__time { font-size: 26px; } .program-row--peak .program-row__event b { font-size: var(--fs-em); } /* Подарки */ .gifts__subtitle { font-size: 21px; } /* На mobile eyebrow остаётся eyebrow — НЕ возвращаем h3-кегль (иерархия с h2) */ .section--gifts .gifts__contacts .gifts__subtitle { font-size: var(--fs-caps); } .gifts__note-title { font-size: 21px; } /* Разделители между секциями — больше воздуха и ширина для мобайла */ .section-line { margin: var(--sp-5) auto; width: 200px; /* 180px desktop → 200px mobile: 51% экрана = намеренная черта */ } /* Final — горизонтальный padding не вытесняет имена на iPhone SE. Top-padding уменьшен до sp-6 (32px) — убираем избыточный «провис» перед тихой фразой. */ .final { padding: var(--sp-6) var(--sp-5) calc(var(--sp-7) + env(safe-area-inset-bottom, 0px)); } /* Setup/punchline — единая смысловая пара, стягиваем их вместе. Negative margin-bottom на quiet (-8px) + flex gap (16px) = ~8px между фразами. После пика — обычный gap (16px) + peak margin-bottom (0.8rem) = ~29px пауза перед дивайдером. */ .final__phrase--quiet { margin-bottom: -8px; } /* Letterhead-compact: подпись садится прямо на имена, как рукопись на бумаге. */ .final__inner > .final__signature + .final__names { margin-top: -8px; } /* Финал — clamp в базовом блоке держит честную иерархию (peak > names), mobile-override больше не нужен. */ /* ─── Единая текстовая колонка для центрированных блоков ─── Аккуратно: только простые центрированные параграфы. НЕ трогаем grid/flex-разметки (theatre acts и т.п.). */ .hero__line, .welcome__text, .welcome__highlight, .dresscode__deck, .dresscode__palette-names, .dresscode__note, .moodboard__line, .rsvp__text p, .gifts__text, .gifts__theatre-footer, .final__phrase, .details-footnote { max-width: var(--w-xs) !important; margin-left: auto !important; margin-right: auto !important; } } /* weather-ps: у него explicit
-строки и свой aside-контейнер (358px), 320px-ограничение ломает 3-строчный ритм — не ограничиваем */ @media (max-width: 480px) { .weather-ps__text { max-width: none !important; } } /* ═══════════════════════════════════════════════════════ MEDIUM — 481px–680px (ландшафтный телефон, небольшой планшет) ═══════════════════════════════════════════════════════ */ @media (min-width: 481px) and (max-width: 580px) { .section { padding: calc(var(--sp-8) + var(--sp-2)) var(--sp-6); } section.section-card, section.section-card-warm, section.section-card-soft { padding: clamp(2.5rem, 5vw, 3rem) clamp(1.2rem, 4vw, 2rem); } } /* ═══════════════════════════════════════════════════════ EXTRA SMALL — 375px и ниже ═══════════════════════════════════════════════════════ */ @media (max-width: 375px) { /* iPhone SE / mini — иерархия по СМЫСЛОВОЙ нагрузке: 1) «приглашают вас» (речевой акт — пик) 2) Дата (практическая кульминация — Cormorant italic 300, тоньше Bodoni) 3) «устраивают свадьбу» (caps-факт) 4) Имена (letterhead-идентификатор) 5) Body-ремарки (эпиграфы) */ .hero__line { font-size: 16px; } .hero__line--fact { font-size: var(--fs-mini); letter-spacing: 0.3em; } .hero__line--invite { font-size: 32px; } .hero__line--invite-tail { font-size: var(--fs-body); } .hero__line--accent { font-size: var(--fs-small); } .hero__date-day { font-size: 58px; } /* light italic — нужно крупнее */ .hero__date-month { font-size: var(--fs-mini); letter-spacing: 0.26em; } .hero__date-year { font-size: var(--fs-footnote); } /* Самые узкие экраны (iPhone SE, mini) — поджимаем cesura под именами, чтобы все 5 строк + дата гарантированно поместились в 100svh. Связка монограмма+имена остаётся плотной. */ .hero__script-wrap { margin-bottom: clamp(2px, 0.5svh, 8px); } /* Letterhead-anchor — кегль имён выпадает из общего downscale html (15px base), чтобы не сливаться с body-ремарками; тонкая gold-черта отделяет letterhead от тела письма. */ .hero__names-name { font-size: clamp(24px, 6.6vw, 29px); } .hero__names--couture { margin-bottom: clamp(20px, 4svh, 38px); padding-bottom: 14px; } .hero__names--couture::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 32%; max-width: 90px; height: 1px; background: linear-gradient(90deg, rgba(var(--gold-rgb), 0), var(--gold-dark), rgba(var(--gold-rgb), 0)); opacity: 0.5; } .hero__date { margin-top: clamp(16px, 3svh, 28px); } /* Секции-карточки — чуть меньше внутренний padding */ section.section-card, section.section-card-warm, section.section-card-soft { padding: 2rem var(--sp-3); } /* Оглавления */ .section__title { font-size: clamp(26px, 5vw, var(--fs-h3)); letter-spacing: 0.02em; } /* Программа — самые узкие экраны: ещё теснее gap. */ .program-row { gap: var(--sp-2); } /* Муд-борд — clamp() в базе */ /* Dresscode — самые узкие экраны: paint-chips уже плотные (gap 4px), оставляем */ } /* ═══════════════════════════════════════════════════════ Accessibility: reduce motion ═══════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } /* Подарки — карточки не имеют .reveal (стаггер шёл от section.is-visible), поэтому общий reset .reveal их не задевает. Явно закрываем. */ .section--gifts .gifts__gift-card, .section--gifts .gifts__contacts, .section--gifts .gifts__note { opacity: 1 !important; transform: none !important; transition: none !important; } .program-row { opacity: 1 !important; transform: none !important; transition: none !important; } .moodboard__image { transition: none !important; } /* Лайтбокс мудборда — без cinematic scale/blur */ .mb-lightbox, .mb-lightbox__img { opacity: 1 !important; transform: none !important; transition: none !important; } .mb-strip img { transition: none !important; } .mb-strip img:hover { transform: none !important; } /* Dresscode — свотчи и модалка не анимируются */ .dresscode-swatch, .reveal:not(.is-visible) .dresscode-swatch, .is-visible .dresscode-swatch { opacity: 1 !important; transform: none !important; transition: none !important; } .color-preview, .color-preview__image { transition: none !important; } .section-line { animation: none !important; } /* Восковая печать — гасим caesura и hover/active движение при reduce-motion. */ .wax-ribbon-btn { opacity: 1 !important; transition: none !important; transition-delay: 0s !important; } .wax-ribbon-btn:hover, .wax-ribbon-btn:active { transform: none !important; filter: none !important; } .hero-fade { opacity: 1 !important; filter: none !important; transition: none !important; } .hero-handwrite, .hero__names--couture { clip-path: none !important; opacity: 1 !important; animation: none !important; } .final-emerge { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; transition: none !important; } } /* ═══════════════════════════════════════════════════════ ПЕРЛАМУТР + ФОРМЫ Опалесценция × индивидуальные формы для каждой секции ═══════════════════════════════════════════════════════ */ /* ─── Welcome — Crane-register card, единый прямоугольный ритм со всеми карточками ─── */ .section--welcome { background: var(--paper-focal); /* лист, не призрак: 0.82 → 0.92 */ border-radius: 6px; margin: var(--card-mt) var(--card-mx) 0; overflow: hidden; /* клипуем зерно по углам */ box-shadow: inset 0 0 0 1px var(--emboss-strong), /* gold hairline — рифма с другими карточками */ 0 1px 0 rgba(var(--chocolate-rgb), 0.06), /* контактная тень */ 0 22px 50px -30px rgba(var(--chocolate-rgb), 0.24); /* лист поднят над страницей */ /* padding задан в базовом блоке .section--welcome выше */ } /* Зерно бумаги — тот же SVG-noise, что у section-card */ .section--welcome::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E"); background-repeat: repeat; pointer-events: none; z-index: 0; mix-blend-mode: multiply; opacity: 0.22; } /* Mobile margin — честный положительный зазор от section-line. Раньше -2rem наплывал на разделитель — линия рисовалась и тут же закрывалась. */ @media (max-width: 768px) { .section--welcome { margin-top: var(--sp-5); } } /* ─── Details — base paper, тонкая внутренняя золотая рамка-тиснение ─── */ .section--details.section-card { background: var(--paper-base); border-radius: 6px; } .section--details.section-card::after { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(var(--gold-highlight-rgb), 0.22); border-radius: 3px; pointer-events: none; z-index: 1; } /* ─── Program — focal paper, плотнее ─── */ .section--program.section-card-warm { background: var(--paper-focal); border-radius: 6px; } .section--program.section-card-warm::after { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(var(--gold-highlight-rgb), 0.26); border-radius: 3px; pointer-events: none; z-index: 1; } section.section--program.section-card-warm { padding: var(--sp-6) var(--sp-5); } /* На XS (≤375): inset-frame ослабленнее и ближе к краю, чтобы peak-hairlines не сходились с inner-frame в «двойную линию» в углу. */ @media (max-width: 375px) { .section--program.section-card-warm::after { inset: 6px; border-color: rgba(var(--gold-highlight-rgb), 0.16); } /* AUDIT 2026-05-11 (program кейс 1): peak-time @22px italic ≈ 60-65px, event padding-right 3.2rem (51.2px) → time выезжает в b-зону на 9-13px. Сводим peak-time к fs-small — иерархия через b «Церемония» 22px wine. */ .program-row--peak .program-row__time { font-size: var(--fs-small); } } /* На десктопе плашка не растягивается на всю ширину контейнера — editorial-restraint: программа = интимный лист, не плакат. */ @media (min-width: 1024px) { section.section--program.section-card-warm { max-width: 760px; margin-left: auto; margin-right: auto; padding: var(--sp-7) var(--sp-6); } .section--program .section-title-divider { width: 320px; opacity: 0.78; } } /* ─── Dresscode — base paper, тонкая внутренняя рамка ─── */ .section--dresscode.section-card { background: var(--paper-base); border-radius: 6px; } .section--dresscode.section-card::after { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(var(--gold-highlight-rgb), 0.22); pointer-events: none; z-index: 1; } /* ─── Gifts — прозрачный контейнер, карточки внутри сами по себе ─── */ .section--gifts { background: transparent; border: none; margin: var(--card-mt) var(--card-mx) 0; padding-top: 2rem; padding-bottom: 2rem; } /* Контакты теперь на paper-focal (см. правило выше), здесь не перебиваем. Театр и note (если появятся) — paper-base. */ .section--gifts .gifts__gift-card.section-card-soft, .section--gifts .gifts__note { background: var(--paper-base); } @media (max-width: 768px) { /* Третий override (первые два перебивались более поздними базовыми правилами). Обе подарочные плашки — единый warm-focal тон на мобайле. */ .section--gifts .gifts__gift-card.section-card-soft { background: rgba(240, 225, 205, 0.80); } } /* ─── RSVP — простой letterpress-лист (без cathedral arch). focal paper + золотая hairline-рамка + лёгкая воздушная тень. ─── */ .section--rsvp.section-card-warm { background: var(--paper-focal); border-radius: 6px; box-shadow: inset 0 0 0 1px var(--emboss-strong), 0 2px 0 rgba(var(--chocolate-rgb), 0.08), 0 28px 60px -32px rgba(var(--chocolate-rgb), 0.30); padding-bottom: var(--sp-8); } .section--rsvp.section-card-warm::after { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(var(--gold-rgb), 0.32); border-radius: 3px; pointer-events: none; z-index: 1; } /* ─── Адаптив ─── */ @media (max-width: 480px) { .section--welcome { margin: var(--card-mt) var(--gutter) 0; /* AUDIT 2026-05-12 (mobile cards): облегчаем тень как у остальных focal-карточек */ box-shadow: inset 0 0 0 1px var(--emboss-strong), 0 1px 0 rgba(var(--chocolate-rgb), 0.04), 0 10px 24px -12px rgba(var(--chocolate-rgb), 0.18); } /* AUDIT 2026-05-12 (grain unified): на Retina-мобайле multiply при 0.32 выглядит как крафт, не stationery. Унифицируем все плашки на 0.22 — тихое refined зерно. */ .section--welcome::before, .section-card-warm::before { opacity: 0.22; } /* Вложенная рамка «письмо в конверте» — mobile only */ .section--welcome::after { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(var(--gold-highlight-rgb), 0.14); border-radius: 3px; pointer-events: none; z-index: 1; } .section--gifts { margin: var(--card-mt) var(--gutter) 0; padding-left: var(--gutter); padding-right: var(--gutter); } .section--rsvp.section-card-warm { border-radius: 6px; } .section--rsvp.section-card-warm::after { border-radius: 3px; } } /* ─── Mobile warmth: плашки ② старая — перебиваем section-specific base-правила ─── */ @media (max-width: 768px) { .section-card, .section-card-soft, .section--details.section-card, .section--dresscode.section-card, .section--welcome { background: rgba(245, 237, 224, 0.65); } .section-card-warm, .section--program.section-card-warm, .section--rsvp.section-card-warm { background: rgba(240, 225, 205, 0.80); } } /* ═══════════════════════════════════════════════════════ DESKTOP — min-width: 769px Карточка 1000px. Широкие секции заполняют ширину. Узкие (Welcome, Программа, RSVP) — изящно по центру. Ритм: узкое → широкое → узкое → широкое → узкое ═══════════════════════════════════════════════════════ */ @media (min-width: 769px) { /* Desktop: вариант C «Parchment» — тёплый пергамент 0.86/0.90, гравюра просвечивает деликатнее. 2026-05-12: было Frosted 0.70/0.76 — слишком прозрачно, давало оливково-серый тон. Пергамент теплее и ближе к mobile bone-palette, при этом сохраняет desktop-editorial глубину. */ :root { --paper-base: rgba(240, 229, 208, 0.84); --paper-focal: rgba(238, 227, 207, 0.91); --fs-body: 20px; --fs-body-lg: 20px; } /* Расширяем контейнер — плавный рост до 1080px (точно совпадает с 1440px-правилом min). 75vw: карточка занимает ≈75% вьюпорта от 1334px и плавно дорастает до 1080px к 1440px. */ .invitation-card { max-width: clamp(var(--w-xl), 75vw, 1080px); } /* Секции получают умеренный десктопный padding */ .section { padding: var(--sp-9) var(--sp-8); /* 4rem / 3rem — было 4.5rem */ } section.section-card, section.section-card-soft { padding: clamp(var(--sp-7), 4vw, var(--sp-8)) clamp(var(--sp-6), 4vw, var(--sp-8)); backdrop-filter: blur(2px) brightness(1.06); box-shadow: inset 0 0 0 1px var(--emboss), 0 1px 0 rgba(var(--chocolate-rgb), 0.06), 0 22px 50px -30px rgba(var(--chocolate-rgb), 0.24), -40px 0 60px rgba(var(--chocolate-rgb), 0.08), 40px 0 60px rgba(var(--chocolate-rgb), 0.08); } section.section-card-warm { padding: clamp(var(--sp-7), 4vw, var(--sp-8)) clamp(var(--sp-6), 4vw, var(--sp-8)); backdrop-filter: blur(2px) brightness(1.06); box-shadow: inset 0 0 0 1px var(--emboss-strong), 0 2px 0 rgba(var(--chocolate-rgb), 0.08), 0 28px 60px -32px rgba(var(--chocolate-rgb), 0.30), -40px 0 60px rgba(var(--chocolate-rgb), 0.08), 40px 0 60px rgba(var(--chocolate-rgb), 0.08); } /* ── Welcome: узкая овальная карточка по центру ── */ .section--welcome { max-width: 640px; margin-left: auto; margin-right: auto; box-shadow: -40px 0 60px rgba(var(--chocolate-rgb), 0.07), 40px 0 60px rgba(var(--chocolate-rgb), 0.07); } /* Hairline шире для desktop scale (72px mobile → 88px desktop). */ /* welcome hairlines убраны (2026-05-12) — display:none в базовых стилях */ /* ── Program: компактная карточка по центру ── */ .section--program.section-card-warm { max-width: 640px; margin-left: auto; margin-right: auto; } /* ── RSVP: арка по центру ── */ .section--rsvp.section-card-warm { max-width: 640px; margin-left: auto; margin-right: auto; } /* ── Заголовки секций — italic, без капсов ── */ .section__title { letter-spacing: 0.04em; } /* ── Разделитель — шире на десктопе ── */ .section-title-divider { width: 300px; } /* ── Горизонтальная линия между секциями — шире, с большим отступом ── */ .section-line { width: 200px; margin: var(--sp-6) auto; /* 2rem — было 1rem */ } /* ── Мудборд — fluid через clamp() в базе ── */ /* ── Подарки — gap между карточками ── */ .gifts__grid { gap: var(--sp-6); } /* ── Финал — fluid через clamp() в базе ── */ /* ── Восстанавливаем padding секций, которые имеют свои значения ── */ /* Welcome: T/B-padding задан Fix 2 ниже (4.5rem); здесь — только L/R, чтобы текст не упирался в стенки карточки на широких экранах. */ .section--welcome { padding-left: var(--sp-8); padding-right: var(--sp-8); } .section--gifts { padding-top: var(--sp-6); padding-bottom: var(--sp-7); padding-left: var(--sp-8); padding-right: var(--sp-8); } /* ── Moodboard: на десктопе шире контейнер — лента дышит, кадры крупнее. Было var(--w-lg)=760px → лента вмещала 2 фото и большую правую пустоту. Стало 1080px → 3 фото в кадре, edge-fade сообщает «там ещё есть». */ .section--moodboard { max-width: 1080px; margin-left: auto; margin-right: auto; padding-left: var(--sp-8); padding-right: var(--sp-8); } /* desktop: тот же aspect-ratio 3/4, шире кадры */ .mb-strip img { width: clamp(240px, 24vw, 320px); } /* На desktop текст-интро ближе к ленте — был визуальный разрыв ~120px, становится одним жестом. */ .section--moodboard .mb-strip { margin-top: var(--sp-4); } /* ── Hero: полный портретный формат, молочный полупрозрачный фон ── */ /* clamp: min 720px — весь контент hero гарантированно виден; 88svh — на типичных ноутбуках 768-900px high hero вписывается в экран; 1032px max — на высоких экранах (1080p+) сохраняем оригинальную пропорцию. */ .hero { padding: var(--sp-9) var(--sp-9) var(--sp-8); min-height: clamp(720px, 88svh, 1032px); background: rgba(var(--milk-rgb), 0.72); } /* hero::before — на десктопе рамку убираем, остаётся только гравюра из body::before (архитектурный пейзаж Петербурга) */ .hero::before { background-image: none; } .hero__inner { transform: none; width: min(580px, 100%); gap: 0; } /* Десктопная иерархия — паузы между логическими группами */ .hero__script-wrap { margin-top: 0; margin-bottom: var(--sp-6); /* 2rem — компактнее, чем на mobile */ } .hero__line--remark { margin-top: var(--sp-3); margin-bottom: var(--sp-3); } .hero__line--invite { margin-top: var(--sp-6); /* 2rem — выраженная пауза перед главным акцентом */ margin-bottom: var(--sp-1); /* минимально — эпиграф продолжает мысль */ } .hero__line--invite-tail { margin-top: var(--sp-1); margin-bottom: var(--sp-4); } .hero__line--accent { margin-top: var(--sp-2); margin-bottom: var(--sp-3); } .hero__date { margin-top: var(--sp-7); } /* ── Gifts grid: центрируем и ограничиваем ── */ .gifts__grid { max-width: var(--w-lg); margin-left: auto; margin-right: auto; } /* ── Типографика welcome на десктопе ── */ /* FIX 2026-05-12: явное центрирование — в fullscreen-режиме браузера ширина viewport меняется без scrollbar (≈15px), авто-центрирование может давать drift. Explicit text-align: center страхует от смещения влево на любом viewport. */ .welcome__inner { text-align: center; } .welcome__text { font-size: 23px; line-height: 1.78; letter-spacing: 0.015em; /* синхронно с базовым правилом */ text-align: center; } .welcome__text.welcome__text--emphasis { font-size: 30px; /* crescendo: 23 → 30 (1:1.30) */ margin-bottom: var(--sp-5); text-wrap: balance; display: block; width: 100%; hanging-punctuation: none; text-align: center; } /* V-1: desktop closing — тише emphasis, color dim. color-alpha вместо opacity — дочерний .text-ornament не затрагивается. */ .welcome__highlight { font-size: 23px; color: rgba(var(--wine-rgb), 0.82); margin-top: var(--sp-6); /* 32px — подпись синхронна с базовым правилом */ } /* AUDIT 2026-05-11 (welcome кейс 5): было 44px — асимметрия с открывающим divider 64px ломала Crane stationery mirror. Теперь оба hairline 64px. */ .welcome__highlight::before { width: 80px; /* на десктопе чуть длиннее — больше простора */ margin-bottom: var(--sp-4); } .welcome__highlight::after { width: 80px; margin-top: var(--sp-4); } /* ── RSVP текст на десктопе ── */ .rsvp__text p { font-size: var(--fs-body-lg); } /* ── Финал: больше пространства между «частями письма» на десктопе ── */ .final { padding: var(--sp-8) var(--sp-9) calc(var(--sp-9) + env(safe-area-inset-bottom, 0px)); } .final__inner { gap: var(--sp-5); } /* quiet-фразу на десктопе чуть крупнее (не трогаем peak — у него свой clamp) */ .final__phrase--quiet { font-size: var(--fs-small); } /* Letterhead-плотность: signature ↔ имена тесно (как в реальной подписи на бумаге). Negative margin-top отменяет flex `gap` между signature и именами, оставляя только compact 0.25em — рукописная подпись садится на руку строкой sign-off. */ .final__signature { font-size: 19px; } .final__inner > .final__signature + .final__names { margin-top: calc(var(--sp-5) * -1 + 0.25em); } /* ── Вторая подложка: не апскейлим выше нативного разрешения (1024px). min(100%, 1024px) = на узком десктопе заполняет ширину, на широком (1024px+) стоит по центру на нативных пикселях — без потери качества. На десктопе ограничиваем ширину 1020px (= ширина пригласительного + запас), чтобы по бокам была видна тауповая заливка body. ── */ body::before { background-image: linear-gradient(to bottom, rgba(var(--milk-rgb), 0.35) 0%, transparent 18%), url('../images/page-background-desktop.png'); background-size: cover; background-position: center 60%; inset: -10px; width: auto; left: -10px; right: -10px; transform: none; filter: saturate(0.70) brightness(1.05) contrast(1.08) sepia(0.05); } /* ── Фон по бокам пригласительного: gold-dark с краёв → taupe к центру ── */ body { background: linear-gradient(90deg, var(--gold-dark) 0%, var(--taupe-light) 50%, var(--gold-dark) 100%); background-attachment: fixed; } /* ── Хроника вечера: desktop — шире gap, чуть шире колонка времени. ── */ .program-row { gap: var(--sp-6); } .program-row__time { min-width: 3.8rem; padding-top: 3px; } } /* ═══════════════════════════════════════════════════════ DOT NAV — точки-якоря справа ═══════════════════════════════════════════════════════ */ .dot-nav { position: fixed; right: 18px; top: 50%; transform: translateY(-50%) translateZ(0); z-index: 900; display: flex; flex-direction: column; align-items: center; gap: 14px; opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-house); } .dot-nav.is-visible { opacity: 1; pointer-events: auto; } .dot-nav.is-at-final { opacity: 0; pointer-events: none; } .dot-nav__item { position: relative; display: flex; align-items: center; justify-content: center; text-decoration: none; padding: 4px; } .dot-nav__dot { display: block; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid rgba(var(--wine-rgb), 0.35); background: transparent; transition: all var(--dur-fast) var(--ease-house); } .dot-nav__item:hover .dot-nav__dot, .dot-nav__item.is-active .dot-nav__dot { background: var(--wine); border-color: var(--wine); transform: scale(1.25); } .dot-nav__item:hover .dot-nav__dot { box-shadow: 0 0 0 4px rgba(var(--gold-rgb), 0.22); } .dot-nav__tip { position: absolute; right: calc(100% + 8px); white-space: nowrap; font-family: var(--f-title); font-size: var(--fs-caps); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--chocolate); background: rgba(var(--milk-rgb), 0.96); border: 1px solid rgba(var(--chocolate-rgb), 0.08); padding: 5px 10px; border-radius: 3px; opacity: 0; transform: translateX(4px); pointer-events: none; transition: opacity var(--dur-fast) var(--ease-house), transform 0.2s ease; } .dot-nav__item:hover .dot-nav__tip { opacity: 1; transform: translateX(0); } .dot-nav:not(.is-visible) { visibility: hidden; } .dot-nav.is-visible { visibility: visible; } .dot-nav__item:focus-visible { outline: 2px solid var(--wine); outline-offset: 4px; border-radius: 50%; } @media (max-width: 480px) { .dot-nav { right: 6px; top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 60px); transform: translateZ(0); gap: 0; } .dot-nav__item { min-width: 44px; min-height: 44px; padding: 0; } .dot-nav__dot { width: 9px; height: 9px; } .dot-nav__item.is-active .dot-nav__dot { box-shadow: 0 0 0 2px rgba(var(--milk-rgb), 0.7), 0 0 0 5px rgba(var(--gold-rgb), 0.45); } .dot-nav__tip { display: none; } } @media (pointer: coarse) and (min-width: 481px) { .dot-nav__item { min-width: 44px; min-height: 44px; padding: 0; } } @media (min-width: 769px) { .dot-nav { right: max(18px, calc(50% - 500px - 24px)); } } /* ═══════════════════════════════════════════════════════ STYLE TABS — переключатель Стиль/Moodboard Единый pill-вариант на всех breakpoints: bone-paper подложка с золотой обводкой для активной вкладки. Quiet luxury вместо агрессивного wine-fill — вкладки выглядят как letterpress-карточки. ═══════════════════════════════════════════════════════ */ .style-tabs { display: flex; justify-content: center; gap: 0; max-width: 280px; margin: 0 auto var(--sp-4); position: relative; z-index: 2; /* AUDIT 2026-05-12 (luxury polish): pill-container убран — border-radius:99px + filled background = стандартный iOS-UI, разрушал letterpress-эстетику. Теперь: тонкий gold hairline снизу под обоими табами = editorial Vogue section nav. */ border: none; border-radius: 0; background: transparent; padding: 0; border-bottom: 1px solid rgba(var(--gold-rgb), 0.20); } .style-tab { flex: 1; min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 11px 18px 9px; /* -2px снизу → место для border-bottom underline */ font-family: var(--f-title); font-size: var(--fs-caps); font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--taupe); background: transparent; border: none; border-bottom: 2px solid transparent; /* резерв для active underline */ border-radius: 0; cursor: pointer; position: relative; bottom: -1px; /* перекрывает нижний border контейнера */ transition: color .25s ease, border-color .28s ease; -webkit-tap-highlight-color: transparent; white-space: nowrap; } .style-tab--active { background: transparent; color: var(--wine); border-bottom: 2px solid rgba(var(--gold-rgb), 0.72); box-shadow: none; } .style-tab:hover:not(.style-tab--active) { color: var(--chocolate); } /* Desktop: tabs выравниваются по горизонтали с секциями (те же margins). На 769px+ карточка 1000px, секции margin: var(--card-mx) → tabs совпадают. */ @media (min-width: 769px) { .style-tabs { max-width: none; margin-left: var(--card-mx); margin-right: var(--card-mx); } } .section--moodboard.is-tab-hidden, .section--dresscode.is-tab-hidden { display: none; } /* ═══════════════════════════════════════════════════════ MUSIC TOGGLE — «винтажная виниловая капля» Idle: золотое дыхание + нота. Playing: винный фон, золотой эквалайзер и тонкая виниловая орбита. ═══════════════════════════════════════════════════════ */ .music-toggle { position: fixed; left: calc(env(safe-area-inset-left, 0px) + 18px); bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); transform: translateZ(0); z-index: 800; /* AUDIT FIX 2026-05-11 mobile: 42→44 для WCAG 2.5.5 + Apple HIG. Синхронно с rsvp.css. */ width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid rgba(var(--gold-highlight-rgb), 0.5); background: rgba(var(--warm-beige-rgb), 0.94); color: rgba(var(--chocolate-rgb), 0.72); display: flex; align-items: center; justify-content: center; cursor: pointer; /* AUDIT FIX 2026-05-11 luxury: backdrop-filter blur(4px) удалён — кнопка лежит над solid фоном страницы, блюрить нечего. Синхронно с rsvp.css. */ opacity: 1; box-shadow: 0 2px 8px -4px rgba(var(--chocolate-rgb), 0.2); transition: background 0.45s ease, border-color 0.45s ease, transform 0.35s var(--ease-house), box-shadow 0.35s ease, color 0.45s ease, opacity 0.5s ease, filter 0.4s ease; } /* AUDIT FIX 2026-05-11 luxury: idle music-halo 3.2s infinite удалён — постоянная пульсация противоречит «тихому летрпрессу». Кольцо проявляется теперь только на :hover (через ::after + music-ring) и в is-playing. Синхронно с rsvp.css. */ .music-toggle::before { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid var(--gold); opacity: 0; transform: scale(0.85); pointer-events: none; } /* Hover ring — расходящаяся золотая волна */ .music-toggle::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--gold); opacity: 0; pointer-events: none; transform: scale(1); transition: opacity var(--dur-base) var(--ease-house), transform 0.5s ease; } .music-toggle:hover { background: var(--warm-beige); border-color: rgba(var(--gold-highlight-rgb), 0.85); color: var(--wine); transform: scale(1.08); } .music-toggle:hover::after { animation: music-ring 0.8s ease-out; } .music-toggle:focus-visible { outline: 2px solid var(--wine); outline-offset: 4px; } .music-toggle.is-scrolling { opacity: 0.12; transform: translateX(-26px); pointer-events: none; } /* Если музыка играет — кнопка остаётся заметнее при скролле */ .music-toggle.is-playing.is-scrolling { opacity: 0.42; transform: translateX(-14px); } .music-toggle.is-hidden { opacity: 0; transform: translateY(14px) scale(0.88); pointer-events: none; } .music-toggle.is-revealing { animation: music-reveal 0.7s var(--ease-house) forwards; } @keyframes music-reveal { 0% { opacity: 0; transform: translateY(14px) scale(0.88); filter: drop-shadow(0 0 0 rgba(var(--gold-highlight-rgb),0)); } 60% { opacity: 1; transform: translateY(-2px) scale(1.04); filter: drop-shadow(0 6px 16px rgba(var(--gold-highlight-rgb),.35)); } 100% { opacity: 1; transform: none; filter: none; } } /* ── Иконки внутри: нота + эквалайзер ── */ .music-toggle__icons { position: relative; width: 18px; height: 18px; display: inline-block; } .music-toggle__note, .music-toggle__eq { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity var(--dur-base) var(--ease-house), transform 0.35s ease; } .music-toggle__note svg { width: 100%; height: 100%; color: currentColor; } .music-toggle__eq { gap: 2.5px; opacity: 0; transform: scale(0.6); } .music-toggle__eq span { display: block; width: 2.5px; height: 60%; background: currentColor; border-radius: 2px; transform-origin: center; } .music-toggle__eq span:nth-child(1) { animation: music-eq 0.85s ease-in-out infinite; } .music-toggle__eq span:nth-child(2) { animation: music-eq 1.15s ease-in-out infinite -0.25s; } .music-toggle__eq span:nth-child(3) { animation: music-eq 0.95s ease-in-out infinite -0.5s; } /* ── Орбита (виниловые круги) ── */ .music-toggle__orbit { position: absolute; inset: -4px; border-radius: 50%; border: 1px dashed transparent; pointer-events: none; transition: border-color var(--dur-slow) var(--ease-house); animation: music-spin 8s linear infinite; } /* AUDIT 2026-05-11: .music-toggle__fly и .is-wiggling полностью удалены из CSS и JS — служебная кнопка должна молчать. */ /* ── PLAYING ── */ .music-toggle.is-playing { background: var(--wine); border-color: var(--wine); color: var(--gold); box-shadow: 0 4px 18px -6px rgba(var(--wine-rgb), 0.45); } .music-toggle.is-playing::before { animation: none; opacity: 0; } .music-toggle.is-playing .music-toggle__note { opacity: 0; transform: scale(0.6); } .music-toggle.is-playing .music-toggle__eq { opacity: 1; transform: scale(1); } .music-toggle.is-playing .music-toggle__orbit { border-color: rgba(var(--gold-highlight-rgb), 0.45); } /* Idle wiggle удалён — служебная кнопка молчит */ /* ── Keyframes ── */ @keyframes music-halo { 0%, 100% { opacity: 0; transform: scale(0.85); } 50% { opacity: 0.55; transform: scale(1.0); } } @keyframes music-ring { 0% { opacity: 0.7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.55); } } @keyframes music-eq { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } } @keyframes music-spin { to { transform: rotate(360deg); } } /* music-fly и music-wiggle keyframes удалены — служебная кнопка не играет */ @media (prefers-reduced-motion: reduce) { .music-toggle, .music-toggle::before, .music-toggle::after, .music-toggle__eq span, .music-toggle__orbit { animation: none !important; transition: none; } } @media (max-width: 480px) { .music-toggle { left: calc(env(safe-area-inset-left, 0px) + 14px); bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); width: 44px; height: 44px; } .music-toggle__icons { width: 18px; height: 18px; } } /* ═══════════════════════════════════════════════════════════════════════ AUDIT FIX 2026-05-09 — три точечные правки по результатам визуального аудита. Чтобы откатить — удалить блок целиком (от этого комментария до конца файла). ═══════════════════════════════════════════════════════════════════════ */ /* Fix 2 — welcome-карточка на десктопе сжимается по содержимому. Причина: padding/min-height задавал карточку высотой ~1500px при ~250px текста. */ @media (min-width: 769px) { .section--welcome { padding-top: 3rem; padding-bottom: 3rem; min-height: 0; } .section--welcome > * { max-width: 720px; margin-left: auto; margin-right: auto; } } /* Fix 3 вынесен в rsvp.css — там собственный .rsvp-submit с большей конечной специфичностью. */ /* Fix 8 — Hero ornamental frame на desktop. На mobile рамка hero рисуется через hero-background.png (вписан в портретный аспект). На desktop при растягивании в landscape углы уходят за край. Дорисовываем 1px wine-рамку и угловые виньетки CSS-средствами, чтобы hero на ≥769px тоже воспринимался «карточкой». */ @media (min-width: 769px) { .hero { position: relative; } .hero::after { content: ''; position: absolute; inset: 28px; border: 1px solid rgba(var(--wine-rgb), 0.42); border-radius: 4px; pointer-events: none; z-index: 1; } .hero .hero__inner { position: relative; } .hero .hero__inner::before { content: ''; position: absolute; inset: 14px; background: linear-gradient(135deg, rgba(var(--wine-rgb), 0.22) 0 1.5px, transparent 1.5px) top left / 70px 70px no-repeat, linear-gradient(225deg, rgba(var(--wine-rgb), 0.22) 0 1.5px, transparent 1.5px) top right / 70px 70px no-repeat, linear-gradient(45deg, rgba(var(--wine-rgb), 0.22) 0 1.5px, transparent 1.5px) bottom left / 70px 70px no-repeat, linear-gradient(315deg, rgba(var(--wine-rgb), 0.22) 0 1.5px, transparent 1.5px) bottom right / 70px 70px no-repeat; pointer-events: none; z-index: 1; } } /* Fix 5 — «УСТРАИВАЮТ СВАДЬБУ» — менее экстремальная разрядка. Раньше 0.32em читалось «по буквам» — теперь 0.18em даёт дыхание, но слово воспринимается единым жестом. */ .hero__line--fact { letter-spacing: 0.18em; text-indent: 0.18em; } @media (max-width: 480px) { .hero__line--fact { letter-spacing: 0.16em; text-indent: 0.16em; } } /* Fix 13 — Music toggle делает fade при простое — не отвлекает на длинных секциях, но возвращается к полной видимости при наведении/фокусе. */ .music-toggle { opacity: 0.55; transition: opacity var(--dur-base) var(--ease-house), transform 0.2s ease; } .music-toggle:hover, .music-toggle:focus-visible, .music-toggle.is-playing { opacity: 1; } /* AUDIT 2026-05-11 (final mobile F2): fade при пересечении финала. 44×44 fixed bottom-left перекрывал подпись и имена на коротких экранах. Размещён после Fix 13, чтобы перебить `.is-playing { opacity: 1 }` при равной специфичности (last-declared wins). */ .music-toggle.is-near-final { opacity: 0; transform: translateY(10px) scale(0.92); pointer-events: none; } /* ── Desktop hero: кнопка видна с первого экрана ────────────────────────── На mobile is-hidden = полная невидимость (кнопка мешает на узком экране). На desktop hero — кнопка должна присутствовать: idle opacity, не ноль. Единственный orbit-импульс через 2 с: «я здесь», без зацикленной пульсации. */ @media (min-width: 769px) { .music-toggle.is-hidden { opacity: 0.55; transform: none; pointer-events: auto; } .music-toggle.is-hidden::before { animation: music-intro-pulse 1.4s var(--ease-house) 2s 1 forwards; } } @keyframes music-intro-pulse { 0% { opacity: 0; transform: scale(0.82); } 40% { opacity: 0.55; transform: scale(1.05); } 100% { opacity: 0; transform: scale(1.30); } } /* ═══════════════════════════════════════════════════════════════════════ AUDIT FIX 2026-05-10 — welcome-блок: «гравированная оправа» + ритм письма. Чтобы откатить — удалить блок Fix 14-16. ═══════════════════════════════════════════════════════════════════════ */ /* Fix 14 — gold hairlines (открывающий divider + закрывающий перед highlight) были технически нарисованы, но при 1px × 44px × opacity 0.55 на cream-paper практически не читались. Без них «letter» теряет свою «engraved frame». Аудит 2026-05-11: opacity 0.85 → 0.90 (tier 4 — focal accent). */ .welcome__highlight::before { height: 1px; width: 72px; background: linear-gradient(90deg, transparent, var(--gold-dark) 30%, var(--gold-dark) 70%, transparent); opacity: 1; } /* Fix 15 — на tablet/narrow-desktop карточка превращалась в баннер: средние строки текста схлопывались в одну линию, исчезал «ритм письма». Сужаем текстовую колонку до ~360px — карточка остаётся широкой, текст центрирован. */ @media (min-width: 600px) and (max-width: 1279px) { .welcome__inner { max-width: 360px; } } /* ═══════════════════════════════════════════════════════════════════════ DETAILS — interactive synthesis (v7) Видимы: имя, адрес, район, footnote. Интерактив: фото→Место (карта+маршрут), календарь→Время (расписание). Affordance: только cursor + hover ⌕ (см. memory/feedback_affordance_quiet). ═══════════════════════════════════════════════════════════════════════ */ .section--details .section__title { margin-bottom: var(--sp-1); } .section--details .details-top { display: grid; grid-template-columns: auto auto; gap: var(--sp-5); justify-content: center; align-items: start; margin-top: var(--sp-2); } /* ── Якорь = фото + подпись «Заглянуть ↑» ── */ .section--details .details-anchor, .section--details .details-cal-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); } .section--details .details-caption { font-family: var(--f-display); font-style: italic; font-size: var(--fs-footnote); line-height: 1; letter-spacing: 0.02em; /* AUDIT 2026-05-11 (details кейс 3): gold-dark @0.90 давало контраст ≈3.0:1 (FAIL даже для graphics 3:1 запас). chocolate @0.65 → ≈5:1 AA-pass. AUDIT 2026-05-12: 0.65 → 0.72 — affordance 5.3:1 → 6.7:1, тихость сохранена. */ color: rgba(var(--chocolate-rgb), 0.72); white-space: nowrap; transition: color var(--dur-fast) var(--ease-house); } .section--details .details-caption__glyph { font-family: var(--f-title); font-style: normal; font-size: 1em; vertical-align: -0.06em; margin-left: 0.12em; display: inline-block; transition: transform var(--dur-fast) var(--ease-house); } .section--details .details-caption__glyph--left { margin-left: 0; margin-right: 0.06em; } .section--details .details-cal-wrap:hover .details-caption__glyph:not(.details-caption__glyph--left), .section--details .details-cal-wrap:focus-within .details-caption__glyph:not(.details-caption__glyph--left) { transform: translateY(-2px); } .section--details .details-cal-wrap:hover .details-caption__glyph--left, .section--details .details-cal-wrap:focus-within .details-caption__glyph--left { transform: translateX(-2px); } .section--details .details-cal-wrap:hover .details-caption, .section--details .details-cal-wrap:focus-within .details-caption { color: var(--wine); } /* ── Фото фасада (кликабельно, открывает «Место»-modal) ── */ .section--details .details-photo { width: 280px; height: 364px; border-radius: 3px; overflow: hidden; cursor: pointer; position: relative; transition: transform var(--dur-base) var(--ease-house), box-shadow var(--dur-base) var(--ease-house); box-shadow: inset 0 0 0 1px rgba(var(--chocolate-rgb), 0.12), 0 2px 8px -4px rgba(var(--chocolate-rgb), 0.32); /* AUDIT 2026-05-11 (details кейс 4): iOS gray flash при тапе ломал letterpress-канон. */ -webkit-tap-highlight-color: transparent; } .section--details .details-photo:hover, .section--details .details-photo:focus-visible { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(var(--chocolate-rgb), 0.22), 0 14px 28px -10px rgba(var(--chocolate-rgb), 0.42); } .section--details .details-photo:focus-visible { outline: 1.5px solid rgba(var(--wine-rgb), 0.55); outline-offset: 5px; border-radius: 3px; } .section--details .details-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 80%; display: block; filter: sepia(0.10) saturate(0.94); } /* ── Календарь — оригинальная letterpress-плита (calendar.jpg) Без добавленных рамок и теней: сама JPG несёт свою декоративную раму. ── */ .section--details .details-cal { width: 200px; cursor: pointer; display: block; position: relative; transition: transform var(--dur-base) var(--ease-house); /* AUDIT 2026-05-11 (details кейс 4): iOS gray flash при тапе. */ -webkit-tap-highlight-color: transparent; } .section--details .details-cal:hover, .section--details .details-cal:focus-visible { transform: translateY(-2px); } .section--details .details-cal:focus-visible { outline: 1.5px solid rgba(var(--wine-rgb), 0.55); outline-offset: 6px; border-radius: 3px; } .section--details .details-cal img { width: 100%; height: auto; display: block; } /* ── Hairline + ❦ ornament ── */ .section--details .details-ornament { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin: var(--sp-6) auto var(--sp-4); } .section--details .details-ornament__line { width: 60px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-dark), transparent); opacity: 0.60; } .section--details .details-ornament__glyph { width: 80px; height: auto; display: block; filter: sepia(1) hue-rotate(320deg) saturate(1.4) brightness(0.42) contrast(1.2); opacity: 0.72; } /* ── Place block (всегда видим) ── */ .section--details .details-place { text-align: center; display: flex; flex-direction: column; align-items: center; } .section--details .details-place__name { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: 22px; color: var(--wine); line-height: 1.2; letter-spacing: 0.005em; margin: 0; } .section--details .details-place__addr { display: inline-block; margin-top: var(--sp-1); min-height: 44px; padding: 6px 6px; font-family: var(--f-display); font-size: var(--fs-mini); color: var(--wine); letter-spacing: 0.012em; text-decoration: underline; text-decoration-color: rgba(var(--wine-rgb), 0.30); text-decoration-thickness: 0.04em; text-underline-offset: 0.18em; font-feature-settings: 'onum', 'pnum'; font-variant-numeric: oldstyle-nums proportional-nums; transition: color var(--dur-fast) var(--ease-house), text-decoration-color var(--dur-fast) var(--ease-house); } .section--details .details-place__addr:hover { color: var(--wine); text-decoration-color: rgba(var(--wine-rgb), 0.5); } .section--details .details-place__district { font-family: var(--f-display); font-style: italic; font-size: var(--fs-mini); /* AUDIT 2026-05-11 (details кейс 2): 0.55 → 0.72. Контраст ≈3.8:1 → ≈6.5:1. AA-compliant для 13px italic, читается на солнце. */ color: rgba(var(--chocolate-rgb), 0.72); letter-spacing: 0.04em; margin-top: var(--sp-1); } /* ── Footnote ── */ .section--details .details-footnote { margin: var(--sp-4) auto 0; text-align: center; font-family: var(--f-display); font-style: italic; font-size: var(--fs-small); line-height: 1.5; letter-spacing: 0.012em; color: rgba(var(--chocolate-rgb), 0.82); max-width: 320px; hanging-punctuation: first last; } /* ── Время церемонии — отдельная строка под плашкой ── */ .section--details .details-time { grid-column: 1 / -1; margin: 14px auto 0; text-align: center; font-family: var(--f-display); font-size: var(--fs-footnote); letter-spacing: 0.04em; color: rgba(var(--chocolate-rgb), 0.78); display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 0.8em; row-gap: 4px; hanging-punctuation: none; } .section--details .details-time i { font-style: italic; font-weight: 400; } .section--details .details-time b { font-style: normal; font-weight: 500; color: var(--wine); font-feature-settings: 'onum', 'pnum'; font-variant-numeric: oldstyle-nums proportional-nums; margin-left: 0.25em; } .section--details .details-time__sep { opacity: 0.75; font-style: normal; } /* ── Desktop ≥769px — фото и календарь крупнее, ритм просторнее ── */ @media (min-width: 769px) { .section--details .details-top { gap: var(--sp-6); margin-top: var(--sp-3); align-items: center; } .section--details .details-photo { width: 340px; height: 442px; } .section--details .details-cal { width: 240px; } .section--details .details-caption { font-size: var(--fs-small); } .section--details .details-ornament__line { width: 90px; } .section--details .details-ornament__glyph { width: 90px; } .section--details .details-place__name { font-size: var(--fs-h3-lg); /* AUDIT 2026-05-11 typography: 26→28 на шкале */ } .section--details .details-place__addr { font-size: var(--fs-body-sm); } .section--details .details-place__district { font-size: var(--fs-mini); } .section--details .details-footnote { font-size: var(--fs-body); /* AUDIT 2026-05-11 typography: 16→18 на шкале */ max-width: 640px; } .section--details .details-time { font-size: var(--fs-small); margin-top: 18px; } } /* ── Mobile ≤480px — компактнее ── */ @media (max-width: 480px) { .section--details .details-top { gap: var(--sp-4); } .section--details .details-photo { width: 170px; height: 221px; } /* AUDIT 2026-05-11 (details кейс 5): на 170×221 тонкая sepia(0.10) теряется, letterpress-фото читается как «современная карточка». Усиливаем на mobile. */ .section--details .details-photo img { filter: sepia(0.18) saturate(0.88); } .section--details .details-cal { width: 130px; } .section--details .details-caption { font-size: var(--fs-mini); } .section--details .details-place__name { font-size: 20px; /* AUDIT 2026-05-11 typography: намеренный mobile-shrink между --fs-em(22) и --fs-body(18), per-breakpoint tuning */ } .section--details .details-time { flex-direction: column; font-size: var(--fs-mini); column-gap: 0; } .section--details .details-time__sep { display: none; } } @media (max-width: 380px) { .section--details .details-top { gap: var(--sp-3); } .section--details .details-photo { width: 140px; height: 182px; } .section--details .details-cal { width: 110px; } .section--details .details-caption { font-size: 12px; /* AUDIT 2026-05-11 typography: ultra-mobile (≤380px) drop ниже --fs-mini(13) — намеренный squeeze для caption «Заглянуть» рядом с тесной плашкой */ } .section--details .details-footnote { font-size: var(--fs-mini); max-width: 290px; } .section--details .details-ornament__line { width: 40px; } .section--details .details-ornament__glyph { width: 64px; } } /* AUDIT 2026-05-11 (details кейс 1): на 320×568 ≤380-правило (photo 140 + cal 110 + gap 12 = 262px) превышало доступные ~252.8px → overflow ~9px клипуется inset-frame. Уменьшаем cal с 110 до 96px → 248px помещается с запасом. */ @media (max-width: 340px) { .section--details .details-cal { width: 96px; } } /* ── Details: stagger при появлении секции в viewport ── Фото въезжает слева, календарь справа (150ms позже), адрес и сноска всплывают снизу (200/300ms). Только transform — opacity держит родительский .reveal, чтобы не было вложенного затухания. */ .section--details .details-anchor, .section--details .details-cal-wrap, .section--details .details-place, .section--details .details-footnote { transition: transform var(--dur-slow) var(--ease-house); } .section--details:not(.is-visible) .details-anchor { transform: translateX(-20px); } .section--details:not(.is-visible) .details-cal-wrap { transform: translateX(20px); } .section--details:not(.is-visible) .details-place, .section--details:not(.is-visible) .details-footnote { transform: translateY(12px); } .section--details.is-visible .details-cal-wrap { transition-delay: 150ms; } .section--details.is-visible .details-place { transition-delay: 200ms; } .section--details.is-visible .details-footnote { transition-delay: 300ms; } /* ═══════════════════════════════════════════════════════════════════════ DETAILS LIGHTBOX — модалки «Место» и «Время» ═══════════════════════════════════════════════════════════════════════ */ .details-lightbox { position: fixed; inset: 0; /* AUDIT 2026-05-12: 0.92 → 0.96 + backdrop blur — убирает «ghost copies» календаря с страницы под overlay'ом (раньше просвечивал через 8% дырку). */ background: rgba(var(--chocolate-deep-rgb), 0.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 9999; display: flex; align-items: center; justify-content: center; /* AUDIT FIX 2026-05-11: safe-area для landscape iPhone (notch + home indicator) */ padding: max(4vh, env(safe-area-inset-top, 0px)) max(4vw, env(safe-area-inset-right, 0px)) max(4vh, env(safe-area-inset-bottom, 0px)) max(4vw, env(safe-area-inset-left, 0px)); cursor: zoom-out; opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-house); } .details-lightbox[hidden] { display: flex; } .details-lightbox.is-open { opacity: 1; pointer-events: auto; } .details-lightbox__panel { position: relative; max-width: min(540px, 92vw); max-height: 92vh; cursor: default; transform: scale(0.96); transition: transform 360ms var(--ease-house); border-radius: 6px; overflow: hidden; background: var(--paper-focal); box-shadow: inset 0 0 0 1px var(--emboss-strong), 0 30px 80px -20px rgba(var(--chocolate-rgb), 0.65); overflow-y: auto; -webkit-overflow-scrolling: touch; /* AUDIT FIX 2026-05-12: модал ловит свой скролл, не передаёт body — на iOS при достижении конца не «уезжает» фон, фокус остаётся на лайтбоксе. */ overscroll-behavior: contain; } .details-lightbox.is-open .details-lightbox__panel { transform: scale(1); } .details-lightbox__panel::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E"); background-repeat: repeat; mix-blend-mode: multiply; opacity: 0.20; pointer-events: none; z-index: 1; } .details-lightbox__panel::after { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(var(--gold-rgb), 0.42); border-radius: 3px; pointer-events: none; z-index: 2; } .details-lightbox__close { position: absolute; top: max(16px, env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); width: 44px; height: 44px; background: transparent; border: 1px solid rgba(var(--warm-beige-rgb), 0.65); border-radius: 50%; color: rgba(var(--warm-beige-rgb), 0.85); font-family: var(--f-title); font-size: 18px; line-height: 1; cursor: pointer; z-index: 10; transition: background var(--dur-fast) var(--ease-house), color var(--dur-fast) var(--ease-house); } .details-lightbox__close:hover, .details-lightbox__close:focus-visible { background: rgba(var(--warm-beige-rgb), 0.92); color: var(--chocolate); } /* AUDIT 2026-05-12: focus-visible получает gold-halo — раньше outline:none делал кнопку невидимой при tab-навигации внутри лайтбокса. */ .details-lightbox__close:focus-visible { outline: 2px solid rgba(var(--warm-beige-rgb), 0.95); outline-offset: 4px; box-shadow: 0 0 0 8px rgba(var(--gold-rgb), 0.32); } /* ── Lightbox content blocks ── */ .dlb-body { padding: 22px 24px 24px; text-align: center; position: relative; z-index: 3; } .dlb-eyebrow { font-family: var(--f-title); font-style: italic; font-size: var(--fs-caps); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--gold-strong); margin-bottom: 8px; } .dlb-title { font-family: var(--f-display); font-style: italic; font-weight: 500; color: var(--wine); font-size: 22px; line-height: 1.2; } .dlb-rule { width: 80px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-dark), transparent); margin: 16px auto; opacity: 0.60; } .dlb-photo { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 70%; display: block; filter: sepia(0.08) saturate(0.96); } .dlb-addr { font-family: var(--f-display); color: rgba(var(--chocolate-rgb), 0.70); font-size: var(--fs-footnote); margin-top: 4px; letter-spacing: 0.012em; font-feature-settings: 'onum', 'pnum'; font-variant-numeric: oldstyle-nums proportional-nums; } /* AUDIT 2026-05-11: .dlb-map (рисованная мини-карта) удалена — kitsch для bordeaux-velvet. */ .dlb-dir { text-align: left; margin-top: 16px; display: flex; flex-direction: column; gap: 8px; } .dlb-dir__row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: baseline; font-family: var(--f-display); font-size: 13px; color: var(--chocolate); } .dlb-dir__icon { font-family: var(--f-title); font-style: italic; color: var(--gold-strong); font-size: 11px; } .dlb-dir__text { color: rgba(var(--chocolate-rgb), 0.85); } .dlb-dir__text em { font-style: italic; color: var(--wine); } .dlb-dir__time { font-family: var(--f-display); font-style: italic; color: rgba(var(--chocolate-rgb), 0.80); font-size: var(--fs-footnote); white-space: nowrap; font-feature-settings: 'onum', 'tnum'; font-variant-numeric: oldstyle-nums tabular-nums; } .dlb-link { display: inline-block; margin-top: 16px; padding: 9px 20px; border: 1px solid rgba(var(--chocolate-rgb), 0.38); border-radius: 999px; font-family: var(--f-title); font-style: italic; font-size: var(--fs-caps); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--wine); text-decoration: none; cursor: pointer; transition: background var(--dur-fast) var(--ease-house), color var(--dur-fast) var(--ease-house); } .dlb-link:hover, .dlb-link:focus-visible { background: var(--wine); color: var(--milk); outline: none; } /* AUDIT 2026-05-11 (visual fix #2): deep-link картам — editorial italic-список с gold-hairlines между строк. Раньше были iOS-style цветные glyph-квадраты (Я / A / G) — ломали letterpress-семью. Теперь Bodoni italic 17px в семье с Program dinner-menu. */ .dlb-maps { display: flex; flex-direction: column; gap: 0; margin-top: 16px; } .dlb-maps__eyebrow { font-family: var(--f-title); font-style: italic; font-size: var(--fs-caps); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--gold-strong); text-align: center; margin: 0 0 12px; } .dlb-maps-sep { display: block; width: 100%; height: 1px; background: rgba(var(--chocolate-rgb), 0.15); border: none; margin: 0; padding: 0; flex-shrink: 0; } .dlb-maps-btn { display: flex; align-items: baseline; justify-content: center; padding: 12px 8px; min-height: 44px; background: transparent; border: none; border-radius: 0; font-family: var(--f-title); font-style: italic; font-weight: 400; font-size: 17px; letter-spacing: 0.005em; color: var(--chocolate); text-decoration: none; transition: color var(--dur-fast) var(--ease-house), background var(--dur-fast) var(--ease-house); } @media (hover: hover) { .dlb-maps-btn:hover { color: var(--wine); background: rgba(var(--gold-rgb), 0.08); } } .dlb-maps-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .dlb-maps-btn__arrow { margin-left: 0.6em; color: var(--gold-dark); font-family: var(--f-title); font-style: italic; font-size: 16px; } /* AUDIT 2026-05-11 (visual fix #3): pill-button 9px → inline italic 13px underline. WCAG: small body ≥12px. Inline-link тише главных кнопок без визуального шума. */ .dlb-link--fallback { display: inline-block; margin-top: 14px; padding: 4px 8px; border: none; border-radius: 0; font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: var(--fs-footnote); letter-spacing: 0; text-transform: none; text-decoration: underline; text-decoration-color: rgba(var(--wine-rgb), 0.30); text-decoration-thickness: 0.5px; text-underline-offset: 0.18em; color: var(--wine); opacity: 0.85; background: transparent; } .dlb-link--fallback:hover, .dlb-link--fallback:focus-visible { background: transparent; color: var(--wine); text-decoration-color: rgba(var(--wine-rgb), 0.7); outline: none; opacity: 1; } /* ── Time modal — оригинальная дата-плита крупно + расписание ── */ .dlb-cal-img { display: block; width: min(240px, 70vw); height: auto; margin: 0 auto; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(var(--chocolate-rgb), 0.10), 0 6px 18px -10px rgba(var(--chocolate-rgb), 0.35); } .dlb-sched { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; } .dlb-sched__row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: baseline; } .dlb-sched__time { text-align: right; font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: 22px; color: var(--wine); line-height: 1; font-feature-settings: 'onum', 'tnum'; font-variant-numeric: oldstyle-nums tabular-nums; } .dlb-sched__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold-dark); opacity: 0.60; align-self: center; } .dlb-sched__label { text-align: left; font-family: var(--f-display); font-style: italic; font-size: var(--fs-footnote); color: rgba(var(--chocolate-rgb), 0.78); } .dlb-ps { margin-top: 18px; font-family: var(--f-script); font-style: italic; font-weight: 500; font-size: var(--fs-em); line-height: 1.4; color: var(--chocolate); letter-spacing: 0.005em; /* AUDIT 2026-05-11 typography: swsh для cyr не определён → liga/dlig/kern */ font-feature-settings: 'liga' 1, 'dlig' 1, 'kern' 1; } .dlb-signature { font-family: var(--f-script-display); font-style: italic; font-weight: 600; font-size: 22px; color: var(--wine); margin-top: 4px; letter-spacing: 0.005em; /* AUDIT 2026-05-11 typography: swsh для cyr не определён → liga/dlig/kern */ font-feature-settings: 'liga' 1, 'dlig' 1, 'kern' 1; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .details-lightbox, .details-lightbox__panel { transition: none !important; } .details-lightbox__panel { transform: none !important; } .section--details .details-photo, .section--details .details-cal { transition: none !important; } } /* ═══════════════════════════════════════════════════════════════════════ AUDIT FIX 2026-05-12 (desktop-audit, шаги 1-7) 1+2. Wide-canvas + hero center on ≥1440px 3. y≈1000 vacuum — welcome поднимается слегка ближе к hero 4. Cinematic финал — увеличенный воздух финала; БЕЗ shimmer-loop на wax-ribbon (анти-cheap-signal по комменту line 2769 сохранён) 5. WebKit cross-browser — резервный фон wax-ribbon, если mask-image не отрендерился (детектируется через @supports) 7. Skip-link — заметнее при focus Dot-nav — visibility:hidden пока не is-visible (выпадает из tab-order) ═══════════════════════════════════════════════════════════════════════ */ /* — 1+2. Wide-canvas: invitation-card резинится; вся «семья» плашек внутри расширяется автоматически (плашки наследуют ширину контейнера). */ @media (min-width: 1440px) { .invitation-card { max-width: clamp(1080px, 60vw, 1280px); } /* Hero вертикально центрируется по viewport — карточка не «прижата» к верх-левому углу */ .hero { min-height: 90vh; } } @media (min-width: 1920px) { .invitation-card { max-width: clamp(1180px, 56vw, 1400px); } } /* — 3. y≈1000 «вакуум»: welcome слегка поднимается под hero — без агрессивного смещения, чтобы не сломать letterpress-ритм. */ @media (min-width: 1024px) { .section--welcome { margin-top: clamp(-4vh, -3vw, -1.5rem); } } /* — 4. Cinematic финал: увеличенный padding финального блока на широких экранах, чтобы кульминация имела вес. Анимаций wax-ribbon НЕ добавляем (комментарий 2026-05-11 на line 2769: «восковая печать должна молчать»). */ @media (min-width: 1024px) { .final__inner { padding-block: clamp(4rem, 7vh, 7rem); } .final__names { letter-spacing: 0.04em; } } /* — 5. WebKit fallback: если браузер НЕ поддерживает mask-image — заливка wax-ribbon рендерится как радиальный градиент (форма прямоугольная, но кнопка читается). В Chromium/Safari современных это игнорируется. */ @supports not ((-webkit-mask-image: url('')) or (mask-image: url(''))) { .wax-ribbon-btn::before { background: radial-gradient(ellipse at center, rgba(var(--wine-rgb), 0.96) 0%, rgba(var(--wine-rgb), 0.88) 70%, rgba(var(--wine-rgb), 0.78) 100%) !important; -webkit-mask-image: none !important; mask-image: none !important; border-radius: 50%; } } /* — 7a. Skip-link виден при focus с заметной wine-обводкой и тенью. Дополнение к существующему .skip-link:focus (line 253). */ .skip-link:focus, .skip-link:focus-visible { top: 12px; left: 12px; outline: 2px solid var(--wine); outline-offset: 3px; box-shadow: 0 6px 22px rgba(var(--chocolate-rgb), 0.35); border-radius: 4px; } /* ═══════════════════════════════════════════════════════════════════════ PRINT — гость захотел распечатать приглашение AUDIT 2026-05-11: базовые правила, чтобы PDF/печать была чистой: — скрываем плавающие служебные элементы (music-toggle, dot-nav, skip-link) — bone-paper → белая, текст → чёрный (экономия чернил, чёткость) — backgrounds картинки гасятся — точки разрыва: каждая section ≈ страница ═══════════════════════════════════════════════════════════════════════ */ @media print { html, body { background: #fff !important; } body::before, .hero::before, .hero::after, .section-card::before, .section-card-warm::before, .section-card-soft::before, .section--welcome::before, .dresscode__body::before, .final::before { display: none !important; } .music-toggle, .dot-nav, .skip-link, .style-tabs, .section--moodboard, .mb-lightbox, .details-lightbox, .color-preview { display: none !important; } body { color: #000; font-size: 11pt; line-height: 1.5; } .invitation-card { max-width: 100% !important; } .section, section.section-card, section.section-card-warm, section.section-card-soft { background: transparent !important; box-shadow: none !important; border: none !important; page-break-inside: avoid; padding: 14pt 0 !important; margin: 0 !important; } .section__title, .hero__line--invite, .hero__date-day, .hero__date-month, .hero__date-year, .welcome__highlight, .program-row--peak .program-row__event b, .program-row--peak .program-row__time, .final__phrase--peak, .final__names { color: #000 !important; text-shadow: none !important; } .reveal, .typewrite, .hero-fade, .final-emerge, .hero__names--couture { opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; transition: none !important; } a { color: inherit; text-decoration: none; } /* URL в скобках после ссылок — для распечатанной копии */ a[href^="http"]::after, a[href^="tel:"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; } a[href^="tel:"]::after { content: " (" attr(href) ")"; } /* Hero — одна страница */ .hero { page-break-after: always; } } /* ═══════════════════════════════════════════════════════ PWA STANDALONE OVERRIDES (открыто с экрана "Домой") В standalone нет Safari URL-bar → 100svh = весь экран. Hero на mobile = высоте PNG (calc(100vw * 1280/720)), и под рамкой возникает пустой кремовый зазор. Тянем hero на 100svh и центрируем PNG вертикально. Маску снизу оставляем такой же, как при открытии по ссылке, — плавный переход от первой подложки (hero) к следующему блоку (welcome). ═══════════════════════════════════════════════════════ */ @media all and (display-mode: standalone) and (max-width: 768px) { .hero { min-height: 100vh; min-height: 100svh; } .hero::before { background-position: center center; /* Та же маска что и в базовом правиле: чёткая рамка наверху, плавный fade в нижней 18% полосе — переход к welcome-блоку. */ -webkit-mask-image: linear-gradient(to bottom, black 82%, transparent 100%); mask-image: linear-gradient(to bottom, black 82%, transparent 100%); } }