/* ЦВМ Маяк — main.css v7 (прототип + tokens + луч маяка + rope-fix) */ /* ===== tokens.css ===== */ /* ============================================================= tokens.css — Design tokens для сайта АНО ЦВМ «Маяк» Автор: brand-designer (МАС, департамент дизайна) Дата: 2026-08-12 Источник: MOODBOARD.md (approved by art-director) Правило: расширять запрещено, только использовать перечисленные токены. Новые цвета/шрифты — только через art-director. ============================================================= */ :root { /* ------------------------------------------------------------- 1. ЦВЕТА — базовые (из логотипа + референса) Пропорции 60-30-10: 60% cream+white, 30% navy, 10% gold+teal ------------------------------------------------------------- */ /* Navy — основной драматический фон: hero, шапка, футер, og:image */ --navy-900: #243660; /* база: нижняя точка градиента hero, футер */ --navy-800: #2D4272; /* верх градиента hero, hover navy-поверхностей */ /* Gold — айдентити-акцент, «свет маяка»: иконки, обводки, разделители */ --gold-500: #C9A961; /* основной золотой: иконки категорий, кавычка, линии */ --gold-400: #D9BE7E; /* осветлённое: hover gold, тонкие декоративные линии */ /* Cream — фон «дневных» секций (60% плоскости) */ --cream-100: #EBE3D3; /* основной кремовый: секции контента, карточки */ --cream-50: #F5F0E4; /* самый светлый: модалки, hover карточек, длинный текст */ /* Teal — морской бирюзовый, основной CTA */ --teal-600: #6B9BA8; /* заливка первичных кнопок «Мы рядом», «Связаться» */ --teal-700: #547E8A; /* hover первичных кнопок, ссылки на teal-плашках */ /* Текст */ --ink-900: #1A1A1A; /* основной текст на кремовом */ --ink-600: #5C5C5C; /* вторичный текст, подписи, meta */ --white: #FFFFFF; /* заголовки hero, текст на teal */ --white-80: rgba(255, 255, 255, 0.80); /* body-текст на navy (мягче чистого белого) */ /* ------------------------------------------------------------- 2. ЦВЕТА — состояния интерактивных элементов Используются в кнопках, ссылках, инпутах, фокус-обводках ------------------------------------------------------------- */ /* Primary CTA (teal): default → hover → active → disabled v7.1: WCAG AA. Раньше teal-600 (2.9:1) с white — ниже AA. Теперь teal-700 (4.2:1) как база, ещё темнее на hover. */ --btn-primary-bg: var(--teal-700); --btn-primary-bg-hover: #456975; --btn-primary-bg-active: #365866; /* teal ещё темнее */ --btn-primary-bg-disabled: rgba(84, 126, 138, 0.40); --btn-primary-text: var(--white); /* Secondary CTA (gold outline на navy): default → hover → active */ --btn-secondary-border: var(--gold-500); --btn-secondary-border-hover: var(--gold-400); --btn-secondary-text: var(--gold-500); --btn-secondary-text-hover: var(--gold-400); --btn-secondary-bg-hover: rgba(201, 169, 97, 0.08); /* gold 8% для тонкой подсветки */ /* Ссылки */ --link: var(--teal-700); --link-hover: var(--teal-600); --link-visited: #3F5F6A; /* teal ещё глубже */ --link-on-navy: var(--gold-400); /* ссылки поверх navy — золотом */ --link-on-navy-hover: var(--gold-500); /* Фокус (клавиатурная навигация, WCAG AA) */ --focus-ring: 0 0 0 3px rgba(201, 169, 97, 0.55); /* золотое кольцо 55% */ --focus-ring-offset: 2px; /* Ошибка / успех — редкие, для CMS-админки, не для публичного контента */ --state-error: #B44242; /* приглушённый терракот, не bootstrap-красный */ --state-success: #5C8A6F; /* приглушённый мшистый, не bootstrap-зелёный */ /* ------------------------------------------------------------- 3. ТИПОГРАФИКА — семейства Cormorant для заголовков (тёплая антиква с открытыми овалами) Manrope для тела (гуманистический гротеск, полная кириллица) ------------------------------------------------------------- */ --font-serif: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif; --font-sans: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace; /* редко, для кода в базе знаний */ /* ------------------------------------------------------------- 4. ТИПОГРАФИКА — размеры (fluid: мобильный → десктоп) clamp(min, preferred, max) — плавная адаптация без брейкпоинтов ------------------------------------------------------------- */ --fs-h1: clamp(2rem, 5vw, 3.5rem); /* Hero H1 (serif) */ --fs-h2: clamp(1.5rem, 3.5vw, 2.25rem); /* Секции (serif) */ --fs-h3: clamp(1.125rem, 2vw, 1.5rem); /* Подзаголовки карточек (sans 600) */ --fs-h4: clamp(1rem, 1.5vw, 1.125rem); /* Микрозаголовки (sans 600 UPPERCASE) */ --fs-body: 1rem; /* Основной текст 16px */ --fs-body-lg: 1.125rem; /* Body large — подзаголовки hero */ --fs-small: 0.875rem; /* Small — подписи, метаданные */ --fs-caption: 0.75rem; /* Caption — copyright, микротекст */ /* Line-height */ --lh-tight: 1.15; /* H1-H2 (плотно, серифно) */ --lh-snug: 1.3; /* H3-H4 */ --lh-normal: 1.5; /* Small, кнопки */ --lh-relaxed: 1.55; /* Body — комфортное чтение */ /* Letter-spacing (tracking) */ --ls-tight: -0.01em; /* H1 — плотнее для крупных серифов */ --ls-snug: -0.005em; /* H2 */ --ls-normal: 0; /* Body */ --ls-wide: 0.02em; /* Кнопки — чуть шире для air */ --ls-wider: 0.08em; /* H4 UPPERCASE редко */ /* Font-weight */ --fw-regular: 400; /* Cormorant заголовки (никогда не жирнее 500!) */ --fw-medium: 500; /* Кнопки, меню */ --fw-semibold: 600; /* H3-H4 (sans) */ /* ------------------------------------------------------------- 5. SPACING — шкала 4/8/12/16/24/32/48/64/96 Использовать через var(--sp-N), не хардкодить px ------------------------------------------------------------- */ --sp-1: 4px; /* микро: между иконкой и текстом */ --sp-2: 8px; /* внутри инлайн-элементов, gap чипов */ --sp-3: 12px; /* padding маленьких кнопок */ --sp-4: 16px; /* базовый rhythm: между строк, padding кнопок */ --sp-5: 24px; /* между блоками внутри карточки */ --sp-6: 32px; /* между карточками, padding больших блоков */ --sp-7: 48px; /* между секциями на мобилке */ --sp-8: 64px; /* между секциями на планшете */ --sp-9: 96px; /* между секциями на десктопе (минимум по чеклисту §6.6) */ /* ------------------------------------------------------------- 6. RADIUS — геометрия углов Стандарт карточек 16px, не «пузырьки», не «казёнщина» ------------------------------------------------------------- */ --radius-sm: 8px; /* инпуты CMS, теги, чипы */ --radius-card: 16px; /* карточки категорий, историй, модалки */ --radius-lg: 24px; /* крупные drama-блоки (изредка) */ --radius-pill: 999px; /* pill-кнопки CTA («Мы рядом», «Связаться») */ --radius-full: 50%; /* круглые соц-иконки в футере */ /* ------------------------------------------------------------- 7. SHADOWS — только мягкие с navy-оттенком Никаких резких `rgba(0,0,0,.3)` — только приглушённые ------------------------------------------------------------- */ --shadow-card: 0 4px 24px rgba(36, 54, 96, 0.06); /* карточки в состоянии rest */ --shadow-card-hover: 0 8px 32px rgba(36, 54, 96, 0.12); /* карточки при hover — «поднимаются» */ --shadow-hero: 0 24px 80px rgba(36, 54, 96, 0.35); /* фото маяка в hero — «врос в глубину» */ --shadow-modal: 0 32px 96px rgba(36, 54, 96, 0.24); /* модалки поверх кремового */ --shadow-inset-gold: inset 0 0 0 1px var(--gold-500); /* внутренняя обводка золотом */ /* ------------------------------------------------------------- 8. TRANSITIONS — скорость и плавность Всё анимируется через prefers-reduced-motion (см. globals) ------------------------------------------------------------- */ --tr-fast: 150ms; /* мгновенные микро-фидбэки: hover ссылки, focus-ring */ --tr-base: 250ms; /* базовый: hover кнопок, карточек, transform */ --tr-slow: 400ms; /* плавные: fade модалок, раскрытие аккордеона */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* базовая: приземляется мягко */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* симметричная: раскрытия */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* лёгкий bounce: nav-подсветка */ /* ------------------------------------------------------------- 9. BORDERS — обводки ------------------------------------------------------------- */ --border-gold-thin: 1px solid var(--gold-500); /* карточки, разделители */ --border-gold-med: 2px solid var(--gold-500); /* акцентные обводки редко */ --border-cream: 1px solid var(--cream-100); /* внутренние разделители на белом */ --border-navy-soft: 1px solid rgba(36, 54, 96, 0.10); /* тонкие разделители на кремовом */ /* ------------------------------------------------------------- 10. LAYOUT — контейнер и Z-индексы ------------------------------------------------------------- */ --container-max: 1360px; /* v3.1 Волна 5++ (23.10, user feedback): 1280→1360 — наполовину вернули ширину (компромисс между 1280 плотно и 1440 просторно) */ --container-pad: clamp(16px, 4vw, 32px); /* горизонтальный padding контейнера */ --z-base: 0; --z-header: 100; /* v3.1 Волна 3 (bughunter P1 #7): 10→100 запас */ --z-overlay: 1000; /* v3.1 Волна 3: 100→1000 */ --z-modal: 9500; /* v3.1 Волна 3 (bughunter P0 #4): 200→9500 — выше cookie (8500), rope (8600), попапов (9000) */ --z-toast: 9800; /* v3.1 Волна 3: 300→9800 */ } /* ============================================================= 11. LIGHT THEME v7.8 — «утро после ночи» Дневная палитра: тёплая пшеничная охра вместо navy, воздух вместо драматической ночи. Gold остаётся неизменным — это якорь бренда: «свет маяка» и днём остаётся золотым. Активируется через . ============================================================= */ [data-theme="light"] { /* v10 — «МОНОХРОМНЫЙ РАССВЕТ» (ux-ui-designer + art-director, фидбэк v2): Пользователь: «уберём бежевый, оранжевый тон и картинку в тон». Чисто монохромно-оранжевый градиент: светлый персик (header) → насыщенный оранжевый (middle) → глубокий терракот (footer). Deep-sea убран — не было связи с «оранжевым рассветом». Gold-identity (#C9A961) неприкосновенен. WCAG AAA на body-text. */ /* v12 (Волна 1, правка 4) — смягчили «жёлтый» фон. Пользователь: «весь экран в тёплых тонах, напрягает». Было: cream-100 #FEEEDA + navy-900 #FBD9AE (двойной жёлтый). Стало: кремовый без жёлто-оранжевого отлива. */ /* Navy → тёплый персик-рассвет (bg-section / bg-soft) */ --navy-900: #F0DBB8; /* bg-section — шапка/плоскости (мягче, менее яркий персик) */ --navy-800: #F6B771; /* bg-soft — карточки fund, hover-поверхности (яркий закат) */ /* Cream — bg-main (почти-кремовый, без жёлтого) + ещё светлее tint */ --cream-100: #FAF6F0; /* bg-main — холст контента (нейтральный кремовый) */ --cream-50: #FDFAF5; /* ещё светлее — hover подложки */ /* Gold — айдентити (НЕ ТРОГАЕМ) */ /* --gold-500 #C9A961, --gold-400 #D9BE7E — brand constant */ /* Teal → огонь: CTA primary (#B8541C) + hover-states (глубже) */ --teal-600: #B8541C; /* accent-primary — огонь, CTA, ссылки */ --teal-700: #8A3410; /* hover — глубже огонь */ /* Текст — графит-шоколад (чуть темнее для контраста на оранжевом) */ --ink-900: #2B1810; /* text-primary — якорь, body/h (глубокий шоколад) */ --ink-600: #5A3014; /* text-secondary — приглушённая охра */ --white: #2B1810; /* «текст на navy» = шоколад на персике */ --white-80: rgba(43, 24, 16, 0.88); /* Кнопки — огонь рассвета (не золото, не teal). v3.1 Волна 2 (23.10.2026): #B8541C «кричащий терракот» → #D97A3C «мягкий закат». Было: насыщенный пожарный оранжевый, доминировал на странице. Стало: тёплый, приглушённый — сохраняет identity (огонь), не агрессивен. Hover/active пересчитаны от нового base в той же L-пропорции (-15%, -27%). */ --btn-primary-bg: #D97A3C; --btn-primary-bg-hover: #C06430; --btn-primary-bg-active: #A6531F; --btn-primary-text: #FFFFFF; /* Ссылки на «navy» (=персике) — огонь */ --link-on-navy: #B8541C; --link-on-navy-hover: #FFB062; /* accent-sun — светящийся жёлто-оранжевый hover */ /* Focus ring — тёплый sun */ --focus-ring: 0 0 0 3px rgba(255, 176, 98, 0.75); /* Тени — тёплые fire-охровые */ --shadow-card: 0 4px 24px rgba(184, 84, 28, 0.14); --shadow-card-hover: 0 8px 32px rgba(184, 84, 28, 0.24); --shadow-hero: 0 24px 80px rgba(184, 84, 28, 0.30); --shadow-modal: 0 32px 96px rgba(184, 84, 28, 0.26); /* Обводки — fire-мягкая */ --border-navy-soft: 1px solid rgba(184, 84, 28, 0.22); /* v12 (Волна 1, правки 3+5): --accent-text-warm — бежевый для «акцентных» строк (бывший красный marquee). --icon-color-muted — приглушённый цвет иконок на светлой подложке. */ --accent-text-warm: #D4A574; --icon-color-muted: #C98B5E; /* v10 «Монохромный рассвет»: deep-sea убран, middle = насыщенный оранжевый. Hero (светлый персик) → middle (огненный закат #E89548) → footer (терракот). Токены переименованы: деприкейтед dawn-deep-*, добавлены dawn-mid-*. */ --dawn-mid-section: #E89548; /* bg-mid-section — насыщенный оранж (ЦЕНТР) */ --dawn-mid-section-top: #F0A05A; /* верх (переходит из mist) */ --dawn-mid-section-bot: #E08838; /* низ (глубже, в сторону footer) */ --dawn-mid-ink: #2B1810; /* body-текст на оранжевом (шоколад, AA 7.5:1) */ --dawn-mid-ink-muted: rgba(43, 24, 16, 0.78); --dawn-sun: #FFB062; /* sun-highlight (eyebrow, hover) — светящийся */ --dawn-sun-biscuit: #F6B771; /* тёплый sun-biscuit (marquee, mist) */ --dawn-footer-top: #D4813E; /* верх footer — глубокий терракот */ --dawn-footer-bot: #B8541C; /* низ footer — огонь CTA */ /* Легаси-алиасы (чтобы не ломать старые селекторы, если встретятся) */ --dawn-deep-section: var(--dawn-mid-section); --dawn-deep-section-top: var(--dawn-mid-section-top); --dawn-deep-section-bot: var(--dawn-mid-section-bot); --dawn-deep-ink: var(--dawn-mid-ink); --dawn-deep-ink-muted: var(--dawn-mid-ink-muted); color-scheme: light; } /* v10 «Dark middle = deep-ocean» — чтобы в НОЧНОЙ версии между hero и footer не было светлого кремового поля (пользователь: «меня полоса раздражает»). Middle-секция теперь продолжение ночного моря. */ :root { --dark-mid-section: #162038; /* deep-ocean — продолжение низа hero (v11: +8L, менее мрачный) */ --dark-mid-section-top: #1C2B48; /* верх (переходит из mist-to-cream, v11: заметно светлее bot) */ --dark-mid-section-bot: #121C30; /* низ (темнее, уходит в footer, v11: чуть светлее #0B1526) */ /* v12 (Волна 1, правка 1) — шапка «слишком синяя». Было: rgba(36, 54, 96, .92) ≈ #243660 (navy-900 dark). v12.1: #15233A — полуночный, темнее и менее насыщенный. v3.1 (23.10, выбор пользователя из 3 вариантов): #15233A → #1E2850 Deep ultramarine. Причина замены: #15233A выглядел «серо-мёртвым», сливался с hero. Deep ultramarine даёт явный синий с глубиной, отделяется от hero #0F1B34, контраст с золотом ≈ 8.5:1 AAA. */ --header-bg-dark: #1E2850; } :root { color-scheme: dark; } /* ============================================================= Уважение к системным настройкам пользователя ============================================================= */ @media (prefers-reduced-motion: reduce) { :root { --tr-fast: 0ms; --tr-base: 0ms; --tr-slow: 0ms; } } /* ===== main (prototype style[1]) ===== */ /* ========================================================= Prototype styles for ЦВМ «Маяк» homepage. Cinematic premium NGO look — deep navy + gold + cream. Uses tokens from tokens.css. In prod → компонентная разбивка. ========================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-sans); color: var(--ink-900); background: var(--cream-100); line-height: var(--lh-relaxed); font-size: var(--fs-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* v7.8: плавный переход между тёмной и светлой темой (day/night) */ transition: background-color 400ms var(--ease-out, ease-out), color 400ms var(--ease-out, ease-out); } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } /* Screen-reader only */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Skip-link для клавиатуры — ПОЛНОСТЬЮ СКРЫТ пока нет :focus. v3.1 Волна 4+ (23.10): был виден кусочек сверху (-40 + height 44 = +4px видимый). Теперь top: -80px гарантированно скрывает полную высоту. */ .skip-link { position: absolute; top: -80px; left: 12px; background: var(--gold-500); color: var(--navy-900); padding: 12px 16px; border-radius: 8px; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; z-index: 999; transition: top var(--tr-fast); } .skip-link:focus { top: 12px; outline: none; } /* Focus-ring — золотое кольцо для клавиатурной навигации */ :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; } /* ============================================================ HEADER ============================================================ */ .site-header { position: sticky; top: 0; z-index: var(--z-header); /* v12 (Волна 1, правка 1): цвет шапки #15233A вместо #243660. v3.1 (23.10, выбор пользователя): #15233A → #1E2850 «Deep ultramarine» — насыщенный синий, явно отделяется от hero #0F1B34, контраст с золотом #F2C464 ≈ 8.5:1 (AAA). v12 (anti-flicker): will-change изолирует композитный слой с backdrop-filter. */ background: rgba(30, 40, 80, 0.92); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); border-bottom: 1px solid rgba(201, 169, 97, 0.14); will-change: transform; } .header-inner { /* v7.9e: возвращён max-width:container-max (1200px) + auto-margin — правая сторона шапки строго на одной линии с правым краем контента во ВСЕХ секциях. Логотип — на левом краю ТОГО ЖЕ контейнера, что и весь контент. Никакого разъезда. */ max-width: var(--container-max); margin: 0 auto; padding: 18px var(--container-pad); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: nowrap; } /* v7.2: логотип не даём сжимать, nav держим по центру */ .header-inner .logo-brand { flex-shrink: 0; } .header-inner nav.main-nav { flex-shrink: 1; } .logo-brand { display: flex; align-items: center; gap: 16px; color: var(--white); transition: opacity var(--tr-fast); } .logo-brand:hover { opacity: 0.9; } .logo-mark { /* v7.3 (аудит #4): убран gradient-bezel + shadow — «медальонная казённость» мешала живописной эстетике. Логотип «парит», как в референсе. */ width: 74px; height: 74px; border-radius: 50%; padding: 0; background: none; box-shadow: none; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .logo-mark img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; /* Тонкая золотая обводка вокруг фото — сохраняет айдентити без «пластика» */ box-shadow: 0 0 0 1px rgba(201, 169, 97, 0.35); } .brand-text { /* v7.3 (аудит #типо): 1.75→1.4rem — шапка перестала конкурировать с H1, соответствует пропорциям referece visual-reference-01.jpg */ font-family: var(--font-serif); font-size: 1.4rem; font-weight: var(--fw-medium); color: var(--gold-500); letter-spacing: 0.015em; line-height: 1.05; } .brand-text small { /* v7.3: 0.85→0.78rem — сохраняет пропорцию к уменьшенному основному. v3.1 Волна 5+++ (23.10, user feedback): line-height 1.6 — межстрочный интервал увеличен, читается легче. */ display: block; margin-top: 7px; font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: 0.78rem; color: var(--white-80); letter-spacing: 0.10em; text-transform: uppercase; line-height: 1.6; } nav.main-nav { /* v7.3: align-items: center — все ссылки строго по одной линии */ /* v7.4: gap 34→40px — воздух между пунктами шапки */ display: flex; align-items: center; gap: 40px; } nav.main-nav a { color: var(--white-80); font-size: 0.94rem; font-weight: var(--fw-medium); transition: color var(--tr-fast); padding: 6px 0; position: relative; /* v7.3 (фикс шапки): запрет переноса «О центре» на 2 строки — иначе baseline соседних пунктов «уходит» и весь ряд выглядит смещённым */ white-space: nowrap; } nav.main-nav a::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: var(--gold-500); transform: scaleX(0); transform-origin: center; transition: transform var(--tr-base) var(--ease-out); } nav.main-nav a:hover, nav.main-nav a:focus-visible { color: var(--gold-400); } nav.main-nav a:hover::after, nav.main-nav a:focus-visible::after { transform: scaleX(1); } nav.main-nav a:active { color: var(--white); } .header-cta { padding: 11px 26px; border: 1px solid var(--gold-500); border-radius: var(--radius-pill); color: var(--gold-500); font-size: 0.92rem; font-weight: var(--fw-medium); letter-spacing: var(--ls-wide); /* v12 (anti-flicker): transition по конкретным свойствам — исключили background и backdrop-filter из переходов, они срабатывали при смене темы. */ transition: color var(--tr-base) var(--ease-out), border-color var(--tr-base) var(--ease-out), transform var(--tr-base) var(--ease-out), box-shadow var(--tr-base) var(--ease-out); white-space: nowrap; /* v6: лёгкая navy-подложка — гарантированная читаемость на blurred header */ background: rgba(15, 27, 52, 0.35); } .header-cta:hover, .header-cta:focus-visible { background: rgba(201, 169, 97, 0.14); color: var(--gold-400); border-color: var(--gold-400); transform: translateY(-1px); } .header-cta:active { transform: translateY(0); background: rgba(201, 169, 97, 0.22); } /* ============================================================ v7.10: КАНАТ МАЯЧНОГО КОЛОКОЛА (rope pull → theme switch) Морской плетёный канат справа screen. Hover = «тянешь» → зажигаешь маяк = плавная смена темы. Метафора: тебя услышали, свет вспыхнул. ============================================================ */ .rope-pull { position: fixed; /* v3.1 Волна 4+++++ (23.10, revert): viewBox 920 meet, bottom:100px (gap до cookie), rope. meet означает что SVG вписывается ПОЛНОСТЬЮ (без обрезания) с центровкой. */ top: 0; right: 12px; bottom: 100px; width: 60px; z-index: 8600; /* v3.1 Волна 3: выше cookie-banner (8500), чтобы канат+кисть были поверх */ cursor: pointer; pointer-events: auto; border: none; padding: 0; background: none; /* Origin для «тянущей» анимации — верхняя точка крепления к «потолку» */ transform-origin: 50% 0%; /* v3.1 Волна 4+++ (23.10, user feedback 5x): был cubic-bezier(0.34, 1.56, 0.64, 1) с overshoot 1.56. На длинном канате (height 1000) rotate -2.5deg + overshoot = трясётся и уходит за экран. Стало ease-out без overshoot — плавное наклонение без колебания. */ transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1); /* v3-fix (hover-flicker): will-change постоянно → канат всегда в своём GPU-слое, hover не триггерит promote → hero-bg не делает dirty repaint */ will-change: transform; /* На мобильных — прячем чтобы не мешать (< 900px) */ } @media (max-width: 900px) { .rope-pull { display: none; } } .rope-pull svg { width: 100%; height: 100%; display: block; /* v3.1 Волна 3++: разные тени для dark и light — тёмно-синяя тень не читается на оранжевом */ filter: drop-shadow(0 4px 12px rgba(15, 27, 52, 0.35)); } [data-theme="light"] .rope-pull svg { /* тёплая тень в тон закату, кисточка читается на оранжевом */ filter: drop-shadow(0 4px 12px rgba(90, 30, 10, 0.55)); } /* Hover — v3.1 Волна 5 (23.10, user feedback): rotate ВЫКЛЮЧЕН на hover. Низ длинного каната смещался за правый край экрана. Теперь на hover только подсказка «потяни →» (через ::before). Rotate остаётся на .pulling (click). */ .rope-pull:hover { transform: none; } /* Active/click — «тянем», но угол уменьшен чтобы не уходить за правый край экрана. v3.1 Волна 5 (23.10, user feedback): rotate -6deg → -2deg на длинном канате -6deg = смещение внизу ~90px (кисть вылетает за край), -2deg = ~30px (в пределах). */ .rope-pull.pulling { transform: rotate(-2deg) translateY(4px); transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1); } /* Хинт-подсказка над кисточкой при hover */ .rope-pull::before { content: 'потяни →'; position: absolute; bottom: 120px; right: 52px; padding: 6px 14px; font-family: var(--font-serif); font-style: italic; font-size: 0.9rem; color: var(--gold-500); background: rgba(15, 27, 52, 0.72); border: 1px solid rgba(201, 169, 97, 0.35); border-radius: 999px; backdrop-filter: blur(6px); white-space: nowrap; opacity: 0; pointer-events: none; transform: translateX(8px); transition: opacity 250ms, transform 250ms; } .rope-pull:hover::before { opacity: 1; transform: translateX(0); } /* В светлой теме подсказка — v10: заметнее на светлом персике */ [data-theme="light"] .rope-pull::before { content: 'потяни →'; color: #FFFBF4; background: #B8541C; border-color: #8A3410; font-weight: 600; box-shadow: 0 4px 12px rgba(184, 84, 28, 0.35); } /* prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { .rope-pull { transition: none; } .rope-pull:hover, .rope-pull.pulling { transform: none; } /* v3.1 Волна 3 (bughunter P2 #12): drop-shadow filter тяжёл для weak-GPU в reduced-motion */ .rope-pull svg { filter: none; } /* v3.1 Волна 3 (bughunter P1 #6): cookie-кнопка не должна анимироваться */ #cookie-banner button { transition: none !important; } #cookie-banner button:hover { transform: none !important; } } /* v3.1 Волна 3 (bughunter P2 #13): hero-eyebrow на 320px viewport (iPhone SE 1-го поколения) */ @media (max-width: 360px) { .hero-eyebrow { letter-spacing: 0.10em; font-size: 0.65rem; } } /* v3.1 Волна 4 (23.10): CSS для View Transitions API — cross-fade между темами. Старые браузеры (Firefox до v128) игнорируют — fallback на обычные CSS transitions цвета/бордера. */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 420ms; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } ::view-transition-old(root) { animation-name: fade-out; } ::view-transition-new(root) { animation-name: fade-in; } @keyframes fade-out { to { opacity: 0; } } @keyframes fade-in { from { opacity: 0; } } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } /* v7.8: THEME TOGGLE — переключатель день/ночь в шапке. Круглая 44px, transparent + gold border. При hover — gold 15%. Иконка меняется: ph-sun-dim (в тёмной теме → «переключи на день») / ph-moon-stars (в светлой → «переключи на ночь»). */ .theme-toggle { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--gold-500); border: 1px solid var(--gold-500); background: transparent; /* v12 (anti-flicker): явные свойства вместо `all` */ transition: color var(--tr-base) var(--ease-out), border-color var(--tr-base) var(--ease-out), background-color var(--tr-base) var(--ease-out), transform var(--tr-base) var(--ease-out); flex-shrink: 0; position: relative; } .theme-toggle:hover, .theme-toggle:focus-visible { background: rgba(201, 169, 97, 0.15); border-color: var(--gold-400); color: var(--gold-400); transform: translateY(-1px); } .theme-toggle:active { transform: translateY(0) scale(0.96); background: rgba(201, 169, 97, 0.24); } .theme-toggle i { font-size: 20px; transition: opacity var(--tr-base), transform var(--tr-base); } /* По умолчанию (тёмная) показываем солнце, прячем луну */ .theme-toggle .icon-moon { display: none; } .theme-toggle .icon-sun { display: inline-block; } /* В светлой теме — наоборот */ [data-theme="light"] .theme-toggle .icon-sun { display: none; } [data-theme="light"] .theme-toggle .icon-moon { display: inline-block; } /* v7: search в шапке — pill-input в тон gold-outline */ .header-search { position: relative; display: inline-flex; align-items: center; width: 200px; min-width: 160px; max-width: 240px; flex-shrink: 1; } /* v7.2: search скрывается ниже 1180px чтоб не ломать шапку */ @media (max-width: 1180px) { .header-search { display: none; } } .header-search .search-icon { position: absolute; left: 14px; color: var(--gold-500); font-size: 16px; pointer-events: none; transition: color var(--tr-fast); } .header-search input[type="search"] { width: 100%; padding: 10px 16px 10px 40px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(201, 169, 97, 0.35); border-radius: var(--radius-pill); color: var(--white); font-family: var(--font-sans); font-size: 0.9rem; /* v12 (anti-flicker): явные свойства */ transition: border-color var(--tr-base) var(--ease-out), background-color var(--tr-base) var(--ease-out), color var(--tr-base) var(--ease-out), box-shadow var(--tr-base) var(--ease-out); -webkit-appearance: none; appearance: none; } .header-search input[type="search"]::placeholder { color: rgba(255, 255, 255, 0.5); font-weight: var(--fw-regular); } .header-search input[type="search"]:hover { border-color: var(--gold-400); background: rgba(255, 255, 255, 0.08); } .header-search input[type="search"]:focus, .header-search input[type="search"]:focus-visible { outline: none; border-color: var(--gold-500); background: rgba(255, 255, 255, 0.10); box-shadow: var(--focus-ring); } .header-search:focus-within .search-icon { color: var(--gold-400); } .header-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } /* Гамбургер для мобилки */ .nav-toggle { display: none; /* v3.1 Волна 4 (Playwright P1 WCAG 2.5.5): 42→44px + явный min-* чтобы ширина не зависела от внутренней иконки Phosphor (которая может быть ещё не загружена с CDN при first paint) */ width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 50%; flex-shrink: 0; align-items: center; justify-content: center; color: var(--gold-500); border: 1px solid rgba(201, 169, 97, 0.4); background: rgba(15, 27, 52, 0.35); /* v12 (anti-flicker): явные свойства */ transition: color var(--tr-base) var(--ease-out), border-color var(--tr-base) var(--ease-out), background-color var(--tr-base) var(--ease-out), transform var(--tr-base) var(--ease-out); } .nav-toggle:hover, .nav-toggle:focus-visible { background: rgba(201, 169, 97, 0.14); border-color: var(--gold-400); color: var(--gold-400); } .nav-toggle:active { transform: scale(0.96); background: rgba(201, 169, 97, 0.24); } .nav-toggle i { font-size: 22px; } /* ============================================================ MOBILE NAV OVERLAY v6 — full-screen navy panel + focus-trap ============================================================ */ .mobile-nav { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(15, 27, 52, 0.96); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; opacity: 0; visibility: hidden; transform: translateY(-16px); transition: opacity 350ms var(--ease-out), transform 350ms var(--ease-out), visibility 0s linear 350ms; } .mobile-nav[aria-hidden="false"] { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 350ms var(--ease-out), transform 350ms var(--ease-out), visibility 0s; } .mobile-nav a { font-family: var(--font-serif); font-size: clamp(1.6rem, 5.5vw, 2.2rem); font-weight: var(--fw-medium); color: var(--white); padding: 8px 20px; transition: color var(--tr-fast); position: relative; } .mobile-nav a::after { content: ''; position: absolute; left: 20%; right: 20%; bottom: 0; height: 1px; background: var(--gold-500); transform: scaleX(0); transform-origin: center; transition: transform var(--tr-base) var(--ease-out); } .mobile-nav a:hover, .mobile-nav a:focus-visible { color: var(--gold-400); } .mobile-nav a:hover::after, .mobile-nav a:focus-visible::after { transform: scaleX(1); } .mobile-nav a:active { color: var(--gold-500); } .mobile-nav .mobile-cta { margin-top: 8px; padding: 15px 34px; border: 1px solid var(--gold-500); border-radius: var(--radius-pill); color: var(--gold-500); font-family: var(--font-sans); font-size: 1rem; font-weight: var(--fw-medium); letter-spacing: var(--ls-wide); } .mobile-nav .mobile-cta::after { display: none; } .mobile-nav .mobile-cta:hover, .mobile-nav .mobile-cta:focus-visible { background: rgba(201, 169, 97, 0.14); border-color: var(--gold-400); } .mobile-nav-close { position: absolute; top: 20px; right: 20px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(201, 169, 97, 0.4); background: rgba(15, 27, 52, 0.6); color: var(--gold-500); display: flex; align-items: center; justify-content: center; /* v12 (anti-flicker): явные свойства */ transition: color var(--tr-base) var(--ease-out), border-color var(--tr-base) var(--ease-out), background-color var(--tr-base) var(--ease-out), transform var(--tr-base) var(--ease-out); } .mobile-nav-close i { font-size: 24px; } .mobile-nav-close:hover, .mobile-nav-close:focus-visible { background: rgba(201, 169, 97, 0.14); border-color: var(--gold-400); color: var(--gold-400); transform: rotate(90deg); } .mobile-nav-close:active { transform: rotate(90deg) scale(0.94); } /* body scroll lock когда меню открыто */ body.mobile-nav-open { overflow: hidden; } /* ============================================================ HERO v5 — full-bleed cinematic night scene Иллюстрация маяка = фон hero. Слева — звёздное небо + тексты. ============================================================ */ .hero { position: relative; overflow: hidden; color: var(--white); min-height: calc(100svh - var(--header-h, 108px)); /* Глубокий ночной градиент — небо */ background: radial-gradient(ellipse at 22% 18%, rgba(36, 54, 94, 0.75) 0%, transparent 55%), radial-gradient(ellipse at 85% 85%, rgba(11, 20, 40, 0.9) 0%, transparent 55%), linear-gradient(180deg, #0F1B34 0%, #1B2A4E 45%, #24365E 100%); } /* Full-bleed иллюстрация маяка как фон — правая часть сцены */ .hero-bg-lighthouse { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; /* v3-fix (hover-flicker): контейнер в собственном GPU-слое, чтобы hover соседнего .rope-pull не триггерил repaint hero */ will-change: transform; transform: translateZ(0); } .hero-bg-lighthouse img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* v11 (2026-10-09): ЕДИНАЯ позиция для обеих тем — картинки 1152×928 одинакового размера, композиция «маяк справа». Пользователь: «маяк не должен прыгать при переключении темы». */ object-position: 55% 32%; filter: none; opacity: 1; will-change: transform; transition: opacity 400ms var(--ease-out), filter 400ms var(--ease-out); -webkit-mask-image: linear-gradient(180deg, black 0%, black 82%, transparent 100%); mask-image: linear-gradient(180deg, black 0%, black 82%, transparent 100%); } /* Атмосферный gradient overlay для «Айвазовского»: мягкий тёплый glow справа-сверху (луна+лампа) и туман снизу */ .hero-bg-lighthouse::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 40% 30% at 78% 32%, rgba(217, 190, 126, 0.10), transparent 70%), linear-gradient(180deg, transparent 60%, rgba(15, 27, 52, 0.5) 100%); pointer-events: none; } /* Левый overlay v6: усилили левый край (AAA-контраст для H1/subhead), правая часть с парусниками остаётся почти чистой — плавный falloff */ .hero-veil { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(15, 27, 52, 0.94) 0%, rgba(15, 27, 52, 0.85) 22%, rgba(27, 42, 78, 0.55) 44%, rgba(36, 54, 94, 0.12) 60%, transparent 74%); } /* Звёздное небо — слой 1: статичные точки через radial-gradient */ .hero-stars { position: absolute; inset: 0; z-index: 3; pointer-events: none; background-image: radial-gradient(1.4px 1.4px at 8% 12%, rgba(245, 228, 176, 0.9), transparent), radial-gradient(1px 1px at 14% 28%, rgba(245, 228, 176, 0.6), transparent), radial-gradient(1.2px 1.2px at 22% 8%, rgba(255, 250, 220, 0.8), transparent), radial-gradient(0.8px 0.8px at 6% 42%, rgba(245, 228, 176, 0.5), transparent), radial-gradient(1px 1px at 18% 55%, rgba(245, 228, 176, 0.55), transparent), radial-gradient(1.3px 1.3px at 28% 18%, rgba(255, 250, 220, 0.75), transparent), radial-gradient(0.9px 0.9px at 34% 34%, rgba(245, 228, 176, 0.45), transparent), radial-gradient(1.1px 1.1px at 4% 62%, rgba(245, 228, 176, 0.55), transparent), radial-gradient(1px 1px at 12% 72%, rgba(245, 228, 176, 0.5), transparent), radial-gradient(1.5px 1.5px at 26% 48%, rgba(255, 250, 220, 0.85), transparent), radial-gradient(0.7px 0.7px at 32% 62%, rgba(245, 228, 176, 0.4), transparent), radial-gradient(1px 1px at 40% 22%, rgba(245, 228, 176, 0.5), transparent), radial-gradient(1.2px 1.2px at 44% 8%, rgba(255, 250, 220, 0.7), transparent), radial-gradient(0.8px 0.8px at 38% 44%, rgba(245, 228, 176, 0.4), transparent), radial-gradient(1.4px 1.4px at 46% 32%, rgba(245, 228, 176, 0.6), transparent), radial-gradient(0.9px 0.9px at 20% 82%, rgba(245, 228, 176, 0.45), transparent), radial-gradient(1px 1px at 8% 88%, rgba(245, 228, 176, 0.4), transparent); background-repeat: no-repeat; background-size: 100% 100%; /* Млечный путь — очень subtle диагональная полоса */ mix-blend-mode: screen; } .hero-stars::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 20%, rgba(255, 250, 220, 0.035) 42%, rgba(217, 190, 126, 0.03) 50%, rgba(255, 250, 220, 0.035) 58%, transparent 80%); pointer-events: none; } /* Слой 2: SVG звёзды с индивидуальным twinkle */ .hero-stars-svg { position: absolute; inset: 0; z-index: 3; pointer-events: none; width: 100%; height: 100%; } .twinkle-star { animation: twinkle 4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; } @keyframes twinkle { 0%, 100% { opacity: 0.35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.4); } } /* Живая летящая звезда — пролетает по пути оригинальной кометы на картине. Хвост из светящегося градиента + яркая точка-голова впереди. */ .shooting-star { /* v7.3 (аудит #арт): top 14→8%, left 8→3% — траектория выше H1, не пересекает заголовок */ position: absolute; top: 8%; left: 3%; width: 220px; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(217, 190, 126, 0.35) 30%, rgba(255, 240, 200, 0.85) 70%, rgba(255, 250, 220, 1) 100%); border-radius: 999px; z-index: 3; transform: rotate(24deg); transform-origin: right center; opacity: 0; animation: shootingStar 9s cubic-bezier(0.4, 0, 0.6, 1) infinite; animation-delay: 2s; filter: drop-shadow(0 0 6px rgba(255, 240, 200, 0.9)); pointer-events: none; } /* Яркая голова кометы впереди — маленькая точка света */ .shooting-star::after { content: ''; position: absolute; right: -2px; top: 50%; width: 6px; height: 6px; background: radial-gradient(circle, #FFF6D8 0%, #FFE4A8 40%, transparent 70%); border-radius: 50%; transform: translateY(-50%); filter: drop-shadow(0 0 8px rgba(255, 240, 200, 1)); } /* Второй экземпляр — другой delay и небольшой сдвиг для «звёзды бывают" */ .shooting-star:nth-of-type(2) { /* v7.3: тоже поднят выше H1 */ top: 14%; left: 2%; animation-delay: 14s; animation-duration: 11s; width: 180px; opacity: 0; } @keyframes shootingStar { /* v7.3: короче траектория (18vw/8vh вместо 24vw/12vh) — звезда уходит за H1 быстрее */ 0% { transform: translate(0, 0) rotate(24deg); opacity: 0; } 4% { opacity: 1; } 22% { transform: translate(18vw, 8vh) rotate(24deg); opacity: 1; } 32% { transform: translate(26vw, 12vh) rotate(24deg); opacity: 0; } 100% { transform: translate(26vw, 12vh) rotate(24deg); opacity: 0; } } /* Pulse свечения лампы маяка — координаты подобраны под hero-lighthouse.jpg */ .lamp-glow { position: absolute; z-index: 2; right: 15%; top: 26%; width: 220px; height: 220px; background: radial-gradient(circle, rgba(255, 220, 140, 0.35) 0%, rgba(217, 190, 126, 0.18) 30%, transparent 65%); border-radius: 50%; filter: blur(8px); pointer-events: none; animation: lampGlowPulse 4.5s var(--ease-in-out) infinite; mix-blend-mode: screen; } @keyframes lampGlowPulse { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 0.95; transform: scale(1.12); } } /* v6: sfumato-переход к следующей секции — многоступенчатый градиент, без чётких границ. Продолжение живописи Айвазовского в фон страницы. Используется вместе с .atmospheric-mist сверху cream-секции. */ .hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 220px; z-index: 4; pointer-events: none; background: linear-gradient(180deg, transparent 0%, rgba(15, 27, 52, 0.05) 15%, rgba(36, 54, 94, 0.18) 32%, rgba(61, 75, 110, 0.30) 50%, rgba(107, 123, 139, 0.32) 65%, rgba(158, 165, 149, 0.34) 78%, rgba(201, 169, 97, 0.14) 90%, rgba(201, 169, 97, 0.22) 100%); } .hero-inner { /* v7.9g: padding-top 40→10 + margin-top hero-copy 30→0 — eyebrow максимально прижат к top viewport. Header backdrop-blur делает контент видимым «сквозь» шапку, потери нет. v3.1 Волна 3 (23.10): padding-bottom 140→60px, grid 1.1fr/0.9fr → 1fr/auto — вся text-колонка подтянута вверх, нижняя треть hero свободна для кораблей. */ position: relative; z-index: 5; max-width: var(--container-max); margin: 0 auto; padding: 10px var(--container-pad) 60px; display: grid; grid-template-columns: 1fr; gap: 60px; align-items: start; min-height: calc(100svh - var(--header-h, 108px)); } .hero-inner .hero-copy { margin-top: 0; } /* v3.1 Волна 3: 560→900px — «Сила в сопричастности» вмещается в одну строку на desktop (при clamp H1 max 3.4rem). Корабли внизу Айвазовского видны. */ .hero-copy { max-width: 900px; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--gold-500); /* v13 (audit desktop): 20→14px — минус 6px на eyebrow */ margin-bottom: 14px; opacity: 0; animation: fadeUp 0.9s var(--ease-out) 0.2s forwards; } .hero-eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--gold-500); } .hero-copy h1 { font-family: var(--font-serif); font-weight: 500; /* v12.1 (критик #2): для крупной Cormorant letter-spacing -0.025em, line-height 1.05 (было 1.15 — слишком воздушно для крупной антиквы). v13 (audit desktop): margin-bottom 28→20px — CTA поднимается ~24px выше. v3.1 Волна 3 (23.10): font-size clamp 2.6-4.2rem → 2.0-3.4rem — «Сила в сопричастности» помещается в ОДНУ строку при max-width 900px на desktop. */ font-size: clamp(2.0rem, 4.2vw, 3.4rem); line-height: 1.05; color: var(--white); margin-bottom: 20px; letter-spacing: -0.025em; /* v3.1 Волна 5+++ (23.10, типограф P4): text-wrap:balance вместо nowrap — гибче, не ломает layout при добавлении контента */ text-wrap: balance; opacity: 0; animation: fadeUp 1s var(--ease-out) 0.35s forwards; /* Двойной shadow: мягкий большой + плотный маленький — читаемость на всех участках картины */ text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55), 0 4px 32px rgba(15, 27, 52, 0.65); } .hero-copy h1 em { font-style: italic; color: var(--gold-400); font-weight: var(--fw-regular); } .hero-motto { font-family: var(--font-serif, 'Cormorant Garamond', 'Times New Roman', serif); font-style: italic; font-weight: 500; color: var(--gold-400); /* v12.1 (критик #2): motto на уровень ниже subhead — не конкурируют */ font-size: clamp(1.05rem, 1.7vw, 1.3rem); opacity: 0.86; line-height: 1.5; max-width: 520px; margin: -8px 0 22px; letter-spacing: 0.005em; opacity: 0; animation: fadeUp 1s var(--ease-out) 0.55s forwards; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45), 0 2px 18px rgba(15, 27, 52, 0.55); } .gold-line { width: 72px; height: 1px; background: linear-gradient(90deg, var(--gold-500), transparent); margin: 0 0 24px; opacity: 0; animation: expandLine 1s var(--ease-out) 0.6s forwards; } @keyframes expandLine { from { opacity: 0; width: 0; } to { opacity: 1; width: 72px; } } .hero-copy p.subhead { /* v6: чуть плотнее белый (0.92) + усиленный shadow — гарантированно AAA поверх картины. v13 (audit desktop): margin-bottom 36→26px — CTA поднимается ещё на ~10px. */ color: rgba(255, 255, 255, 0.92); font-size: 1.18rem; line-height: 1.6; max-width: 500px; margin-bottom: 26px; letter-spacing: -0.005em; opacity: 0; animation: fadeUp 1s var(--ease-out) 0.7s forwards; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45), 0 2px 18px rgba(15, 27, 52, 0.55); } .hero-ctas { display: flex; gap: 18px; margin-bottom: 20px; flex-wrap: wrap; opacity: 0; animation: fadeUp 1s var(--ease-out) 0.85s forwards; } .hero-disclaimer { /* v7.3 (аудит #типо): +letter-spacing 0.015em и fw 500 — компенсируют opacity 0.72 и мелкий 0.85rem на blurred pill */ font-size: 0.85rem; color: rgba(255, 255, 255, 0.72); font-weight: 500; letter-spacing: 0.015em; margin-top: 16px; padding: 6px 14px; display: inline-block; background: rgba(15, 27, 52, 0.28); border-radius: 999px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45); opacity: 0; animation: fadeUp 1s var(--ease-out) 1s forwards; } @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Button system */ .btn { padding: 15px 34px; border-radius: var(--radius-pill); font-size: 1rem; font-weight: var(--fw-medium); letter-spacing: var(--ls-wide); /* v12 (anti-flicker): точечные свойства — главные при hover+смене темы */ transition: color var(--tr-base) var(--ease-out), background-color var(--tr-base) var(--ease-out), border-color var(--tr-base) var(--ease-out), transform var(--tr-base) var(--ease-out), box-shadow var(--tr-base) var(--ease-out); display: inline-flex; align-items: center; gap: 10px; border: 1px solid transparent; position: relative; overflow: hidden; } .btn::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255,255,255,0.15); transform: translate(-50%, -50%); transition: width var(--tr-slow), height var(--tr-slow); } .btn:hover::before { width: 400px; height: 400px; } .btn > * { position: relative; z-index: 1; } .btn-primary { /* v12.1 (критик #2): усилили gold-rim + добавили тёплый ореол — teal CTA перестал «тонуть» в холодной navy-сцене */ background: linear-gradient(135deg, #78A8B5 0%, #5C8B98 100%); color: var(--white); box-shadow: 0 0 0 1.5px rgba(217, 190, 126, 0.55), /* заметный gold-rim */ 0 6px 24px rgba(107, 155, 168, 0.35), 0 0 32px rgba(217, 190, 126, 0.18), /* тёплый ореол */ inset 0 1px 0 rgba(255, 250, 235, 0.22); } /* v3.1 Волна 3+++: явный focus-visible для CTA (keyboard a11y) */ .btn-primary:focus-visible, .btn-secondary-outline:focus-visible, .header-cta:focus-visible, .mobile-cta:focus-visible { outline: 3px solid rgba(242, 196, 100, 0.8); outline-offset: 3px; } .btn-primary:hover, .btn-primary:focus-visible { background: linear-gradient(135deg, #88B8C5 0%, #5C8B98 100%); transform: translateY(-2px); box-shadow: 0 0 0 1.5px rgba(217, 190, 126, 0.78), 0 10px 32px rgba(107, 155, 168, 0.5), 0 0 48px rgba(217, 190, 126, 0.28), inset 0 1px 0 rgba(255, 250, 235, 0.32); } .btn-primary:active { transform: translateY(0); box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(217, 190, 126, 0.18); background: var(--btn-primary-bg-active); } .btn-secondary-outline { /* v6: гарантированно читаемая полупрозрачная navy-подложка на любом фоне */ border-color: var(--gold-500); color: var(--gold-500); background: rgba(15, 27, 52, 0.28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .btn-secondary-outline:hover, .btn-secondary-outline:focus-visible { background: rgba(201, 169, 97, 0.14); color: var(--gold-400); border-color: var(--gold-400); transform: translateY(-2px); } .btn-secondary-outline:active { transform: translateY(0); background: rgba(201, 169, 97, 0.24); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.20); } /* ============================================================ ATMOSPHERIC MIST ZONE v6 — sfumato-переход между секциями Заменяет жёсткий wave-divider. Многослойный градиент + мягкие облака (blob-shapes с blur), плывущие очень медленно. Никаких hard-edge линий. Работает и для hero→cream, и для fund→cream. Модификаторы .mist-* задают палитру. ============================================================ */ .atmospheric-mist { /* v7.6c: убран mask, весь градиент виден. v7.7: добавлена painterly-фактура через ::after — иначе 300px плоского linear-gradient читались как «пустая полоса». Теперь mist сам является «размытой живописью Айвазовского», а не gradient-baton. v9 (dawn-v2): высота 300 → 420px, стопов 4+ (см. ниже), + sfumato-blur overlay на границе — переходы перестают быть «неуклюжими» при скролле. */ position: relative; height: 420px; overflow: visible; line-height: 0; pointer-events: none; } /* v7.7: sand-фактура сквозь mist — непрерывная фактурная поверхность между двумя секциями. Opacity низкая (0.30) + overlay blend — не искажает цвет градиента, но убирает «плоскость». */ .atmospheric-mist::after { content: ''; position: absolute; inset: 0; background-image: url('textures/sand-aivazovsky-2.webp'); background-size: 720px 720px; background-repeat: repeat; opacity: 0.30; mix-blend-mode: overlay; pointer-events: none; z-index: 1; } /* Base gradient: navy → интерполяция через промежуточные тона → cream (14 stops для sfumato-эффекта: цвет тек как в живописи Айвазовского, не «полосой»). v9: добавлены промежуточные тона в начале/конце для «затяжки» швов. */ .atmospheric-mist.mist-to-cream { /* v11: цвета синхронизированы с обновлёнными токенами navy-900 #243660 → dark-mid-section #162038 */ background: linear-gradient(180deg, #243660 0%, #233559 7%, #223356 14%, #213154 22%, #202F51 30%, #1F2D4E 38%, #1E2B4C 46%, #1D2A49 55%, #1C2847 64%, #1B2644 73%, #1A2441 82%, #18223E 92%, #162038 100%); } /* Обратный: deep-ocean middle → navy footer */ .atmospheric-mist.mist-to-navy { background: linear-gradient(180deg, #0F1A2E 0%, #10192B 8%, #111A2D 16%, #121B2F 25%, #131C31 34%, #141D33 44%, #151E35 54%, #161F37 64%, #182039 74%, #19223B 84%, #0F1B34 100%); } /* v10: feather-edge на стыках mist с соседними секциями (dark). Теперь оба стыка — тёмные, цвета согласованы с deep-ocean. */ .atmospheric-mist.mist-to-cream { box-shadow: inset 0 80px 70px -40px #243660, /* верх — цвет hero (v11) */ inset 0 -80px 70px -40px #162038; /* низ — deep-ocean middle (v11) */ } .atmospheric-mist.mist-to-navy { box-shadow: inset 0 80px 70px -40px #162038, /* верх — deep-ocean middle (v11) */ inset 0 -80px 70px -40px #0F1B34; /* низ — navy footer */ } /* Плавающие облачные blob-shapes — SVG с blur, floating очень медленно. 3 слоя разного размера/скорости — parallax эффект тумана. v7.7: opacity 0.55→0.90, blur 60→40px — облака ЯВНО читаются как живописные пятна, а не намёк. z-index:2 над sand-текстурой. */ .atmospheric-mist svg { position: absolute; left: 0; right: 0; width: 100%; height: 100%; filter: blur(40px); opacity: 0.90; z-index: 2; } /* v11: в ночной теме blobs и golden ray приглушены — иначе светлые пятна на тёмном */ :root .atmospheric-mist svg { opacity: 0.45; } :root .atmospheric-mist::before { opacity: 0.10; } .mist-cloud-1 { animation: mistFloat1 42s ease-in-out infinite alternate; } .mist-cloud-2 { animation: mistFloat2 58s ease-in-out infinite alternate-reverse; } .mist-cloud-3 { animation: mistFloat3 72s ease-in-out infinite alternate; } @keyframes mistFloat1 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-30px, 12px) scale(1.08); } } @keyframes mistFloat2 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(40px, -8px) scale(1.05); } } @keyframes mistFloat3 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-20px, 20px) scale(1.1); } } /* ============================================================ v7.11 «ЗОЛОТОЙ ЛУЧ МАЯКА» — свет пробивается сквозь mist Реализация: conic-gradient через ::before (луч), inline SVG .mist-rays (bokeh + горизонтальные отражения). ::after у mist уже занят sand-текстурой, поэтому луч — через ::before. Работает в обеих темах: dark = насыщенный gold, light = нежнее. ============================================================ */ .atmospheric-mist::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0.35; mix-blend-mode: screen; } /* mist-to-cream: луч из верхнего-левого угла вниз-вправо */ .atmospheric-mist.mist-to-cream::before { background: conic-gradient( from 105deg at 8% -10%, transparent 0deg, rgba(139, 115, 85, 0.0) 8deg, rgba(212, 165, 116, 0.28) 14deg, rgba(244, 217, 152, 0.55) 20deg, rgba(244, 217, 152, 0.55) 26deg, rgba(212, 165, 116, 0.28) 32deg, transparent 40deg, transparent 360deg ); } /* mist-to-navy: зеркальный — из верхнего-правого угла (ритм) */ .atmospheric-mist.mist-to-navy::before { background: conic-gradient( from 195deg at 92% -10%, transparent 0deg, rgba(139, 115, 85, 0.0) 8deg, rgba(212, 165, 116, 0.28) 14deg, rgba(244, 217, 152, 0.55) 20deg, rgba(244, 217, 152, 0.55) 26deg, rgba(212, 165, 116, 0.28) 32deg, transparent 40deg, transparent 360deg ); } /* mist-fund-to-footer: луч сверху по центру, «свет опускается к воде» */ .atmospheric-mist.mist-fund-to-footer::before { background: conic-gradient( from 150deg at 50% -20%, transparent 0deg, rgba(212, 165, 116, 0.22) 24deg, rgba(244, 217, 152, 0.50) 28deg, rgba(244, 217, 152, 0.55) 32deg, rgba(244, 217, 152, 0.50) 36deg, rgba(212, 165, 116, 0.22) 40deg, transparent 60deg, transparent 360deg ); opacity: 0.40; } /* Bokeh-частицы и горизонтальные отражения — inline SVG внутри mist. Родитель .atmospheric-mist уже relative + overflow:visible. z-index:3 — поверх облаков (.atmospheric-mist svg → z-index:2). */ .mist-rays { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; opacity: 0.85; mix-blend-mode: screen; /* Сбросить blur, унаследованный от общего .atmospheric-mist svg — bokeh должны быть резкими */ filter: blur(0.6px); } .mist-rays .bokeh { fill: #F4D998; animation: bokehFloat 14s ease-in-out infinite alternate; } .mist-rays .bokeh:nth-child(2n) { animation-duration: 18s; animation-direction: alternate-reverse; } .mist-rays .bokeh:nth-child(3n) { animation-duration: 22s; } .mist-rays .reflection { stroke: #D4A574; stroke-width: 1; opacity: 0.25; fill: none; } @keyframes bokehFloat { 0% { transform: translate(0, 0); opacity: 0.35; } 50% { opacity: 0.60; } 100% { transform: translate(-10px, 4px); opacity: 0.40; } } /* Light theme: луч ещё нежнее (пергамент не давит на свет), меняем blend-mode на soft-light — луч ложится тёплой лессировкой. */ [data-theme="light"] .atmospheric-mist::before { opacity: 0.55; mix-blend-mode: soft-light; } [data-theme="light"] .atmospheric-mist.mist-fund-to-footer::before { opacity: 0.60; } [data-theme="light"] .mist-rays { opacity: 0.75; mix-blend-mode: multiply; } [data-theme="light"] .mist-rays .bokeh { fill: #E89548; } [data-theme="light"] .mist-rays .reflection { stroke: #D89848; opacity: 0.32; } @media (prefers-reduced-motion: reduce) { .mist-rays .bokeh { animation: none; } } /* ============================================================ SECTIONS v6 — живописный холст, не плоский cream ============================================================ */ section { padding: 88px var(--container-pad); /* v10 (dawn-v3): по умолчанию section = DARK middle (deep-ocean, продолжение низа hero). В light-режиме перекрывается ниже на оранжевый #E89548. Пользователь: «меня полоса раздражает» (dark v2) — в dark middle теперь тёмно-синяя (deep-ocean), и mist переходит плавно без светлого разрыва. */ background: radial-gradient(ellipse at 15% 10%, rgba(107, 155, 168, 0.10), transparent 55%), radial-gradient(ellipse at 85% 92%, rgba(27, 42, 78, 0.45), transparent 55%), linear-gradient(180deg, var(--dark-mid-section-top) 0%, var(--dark-mid-section) 50%, var(--dark-mid-section-bot) 100%); color: var(--white-80); position: relative; overflow: hidden; } /* v6++: органический шум без sharp круглых точек — избегаем эффекта повторяющегося pattern-плитки. Один слой fractal turbulence с высокой частотой (~2.5) даёт живое зерно как на бумаге акварельного этюда. Оттенки — тёплый охра. */ .sand-texture { position: absolute; inset: 0; z-index: 0; pointer-events: none; /* v7.2: opacity 0.14→0.32 + overlay вместо soft-light. soft-light 0.14 был почти невидимым. Overlay при opacity 0.32 даёт заметную живописную фактуру, но НЕ затемняет фон как multiply — читаемость сохраняется. */ /* v7.6c (web-designer report): multiply НЕ осветляет — золото файла sand-aivazovsky-2 (яркий гoлден) терялось. Overlay сохраняет светлые тона как highlights, тёмные — как shadows, как в реальной живописи. */ opacity: 0.55; background-image: url('textures/sand-aivazovsky-2.webp'); background-size: 720px 720px; background-repeat: repeat; background-position: 0 0; mix-blend-mode: overlay; /* v7.6: fade-in СВЕРХУ (5%) + fade-out СНИЗУ (5%) — sand мягко растворяется в mist-переходах с обеих сторон, никаких резких «швов начала фактуры». */ -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 5%, black 95%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, black 5%, black 95%, transparent 100%); } /* v7.5: вариант #1 фактуры (тёмнее, охра) — для stories-section, визуальная вариация между двумя cream секциями. */ .sand-texture--v2 { background-image: url('textures/sand-aivazovsky.webp'); /* другой offset background-position — «смещение мазка» между секциями */ background-position: 320px 160px; } /* v6: тонкие «облачные» пятна subtle warm-gold — переливы света на холсте. Очень медленно floating, ощущение живого полотна. */ .canvas-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .canvas-glow::before, .canvas-glow::after { content: ''; position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.55; } .canvas-glow::before { top: 8%; left: 12%; width: 40vw; height: 40vw; max-width: 520px; max-height: 520px; background: radial-gradient(circle, rgba(201, 169, 97, 0.10), transparent 65%); animation: canvasFloat1 55s ease-in-out infinite alternate; } .canvas-glow::after { bottom: 12%; right: 8%; width: 45vw; height: 45vw; max-width: 580px; max-height: 580px; background: radial-gradient(circle, rgba(217, 190, 126, 0.07), transparent 65%); animation: canvasFloat2 70s ease-in-out infinite alternate-reverse; } @keyframes canvasFloat1 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(60px, -30px) scale(1.12); } } @keyframes canvasFloat2 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-40px, 40px) scale(1.08); } } /* v6: sand-dunes и sand-particles удалены — арт-стиль важнее «песочной» метафоры. Место дюн заняли canvas-glow (тёплые пятна света на холсте). section-fade-* и section-navy-fade-* удалены — заменены на .atmospheric-mist zones. */ section > .section-inner { position: relative; z-index: 2; } .section-inner { max-width: var(--container-max); margin: 0 auto; } .section-header { text-align: center; margin-bottom: 80px; max-width: 680px; margin-left: auto; margin-right: auto; } .section-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--gold-500); margin-bottom: 20px; } .section-eyebrow::before, .section-eyebrow::after { content: ''; width: 32px; height: 1px; background: var(--gold-500); } .section-header h2 { font-family: var(--font-serif); font-weight: var(--fw-medium); /* v3.1 Волна 5 (23.10, типограф-аудит P1): min 2.2→1.6rem — на iPhone SE (320px) не вылезает */ font-size: clamp(1.6rem, 4.5vw, 3.2rem); /* v10 (dawn-v3): dark middle = deep-ocean → заголовок светлый. В light light-overrides перекрывают на #2B1810. */ color: #FFFBF4; margin-bottom: 20px; letter-spacing: -0.02em; line-height: 1.1; } .section-header p { color: rgba(255, 251, 244, 0.86); max-width: 560px; margin: 0 auto; font-size: 1.08rem; line-height: 1.6; /* v10: painterly-подложка убрана для dark (тёмный фон читается без молока). Light-overrides принудительно обнуляют background тоже. */ position: relative; z-index: 1; padding: 18px 32px; background: none; } /* v7.7: brush-stroke подложка для параграфов в stories-copy */ .stories-copy p { position: relative; padding: 16px 26px; background: radial-gradient(ellipse 70% 88% at 50% 50%, rgba(247, 241, 229, 0.88) 0%, rgba(247, 241, 229, 0.65) 50%, transparent 100%); } /* v7.7: подложка для blockquote-цитаты */ .quote-block { position: relative; } .quote-block p { position: relative; padding: 24px 34px; background: radial-gradient(ellipse 72% 90% at 50% 50%, rgba(247, 241, 229, 0.90) 0%, rgba(247, 241, 229, 0.68) 55%, transparent 100%); } /* Reveal-on-scroll */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* v12.1 (критик #2): staggered reveal карточек grid — цепочка, не пачка */ .cards-grid .reveal:nth-child(1).is-visible { transition-delay: 0ms; } .cards-grid .reveal:nth-child(2).is-visible { transition-delay: 120ms; } .cards-grid .reveal:nth-child(3).is-visible { transition-delay: 240ms; } .cards-grid .reveal:nth-child(4).is-visible { transition-delay: 360ms; } /* ============================================================ CATEGORY CARDS ============================================================ */ .cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; /* v3.1 Волна 5 (23.10): явно stretch — все карточки одинаковой высоты, визуально выровнены по верху И низу */ align-items: stretch; } .card { /* v3.1 Волна 5 (23.10): .card теперь — убираем underline и наследуем цвет, flex column для внутр. выравнивания */ text-decoration: none; color: inherit; display: flex; flex-direction: column; /* v7.5: убран плоский cream-50 — заменён на painterly gradient (cream-50 сверху → чуть тёплее охрой снизу) + внутренний glow золотом сверху. Ощущение бумажного этюда, а не пустой белой карточки. */ background: radial-gradient(ellipse at 50% 0%, rgba(217, 190, 126, 0.18) 0%, transparent 55%), linear-gradient(180deg, #F7F1E5 0%, #EFE7D3 100%); border: 1px solid rgba(201,169,97,0.30); border-radius: var(--radius-card); padding: 44px 28px 36px; text-align: center; /* v12 (anti-flicker): точечные — исключили background из перехода, тема переключала градиент карточки и это давало flash. */ transition: border-color var(--tr-base) var(--ease-out), transform var(--tr-base) var(--ease-out), box-shadow var(--tr-base) var(--ease-out); cursor: default; position: relative; overflow: hidden; box-shadow: /* v3.1 Волна 3 (23.10): усилены тени — было 0 2px 8px rgba(0.04) почти незаметно. Стало 2-слойная тень для depth. */ inset 0 1px 0 rgba(255, 250, 235, 0.6), 0 2px 6px rgba(27, 42, 78, 0.08), 0 8px 24px rgba(27, 42, 78, 0.10); } .card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(201,169,97,0.08), transparent 60%); opacity: 0; transition: opacity var(--tr-base); pointer-events: none; } .card:hover { /* v3.1 Волна 3: hover явнее — translateY -6→-10, тени мощнее */ transform: translateY(-10px); border-color: var(--gold-500); box-shadow: inset 0 1px 0 rgba(255, 250, 235, 0.8), 0 12px 24px rgba(201, 169, 97, 0.20), 0 24px 56px rgba(27, 42, 78, 0.22); } .card:hover::before { opacity: 1; } /* v3.1 Волна 5 (23.10, user feedback): press-effect при клике — иконка/карточка «проседает» вниз, scale слегка меньше, тени короче = тактильный отклик. */ .card:active { transform: translateY(-2px) scale(0.98); transition: transform 100ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 100ms; box-shadow: inset 0 1px 0 rgba(255, 250, 235, 0.6), 0 4px 10px rgba(201, 169, 97, 0.14), 0 8px 18px rgba(27, 42, 78, 0.15); } .card:active .card-icon-wrap { transform: scale(0.95); transition: transform 100ms cubic-bezier(0.4, 0, 0.2, 1); } .card-icon-wrap { display: inline-flex; align-items: center; justify-content: center; /* v3.1 Волна 5 (23.10, user feedback): 100→128px — вернули крупный контейнер. Руководство ранее просило уменьшить, но на новой версии user хочет как было на Tilda-live. */ width: 128px; height: 128px; margin: 0 auto 20px; transition: transform var(--tr-base); position: relative; /* v12 (anti-flicker): изолируем композитный слой — у .card-icon-wrap есть radial-gradient ::before и hover transform. */ will-change: transform; } /* v7.4→v7.12: soft radial glow под иконкой — прямоугольная форма (radius 18px) чтобы подходить под прямоугольную PNG. */ .card-icon-wrap::before { content: ''; position: absolute; inset: -10px; border-radius: 18px; background: radial-gradient(ellipse at 50% 45%, rgba(217, 190, 126, 0.35) 0%, rgba(201, 169, 97, 0.15) 35%, transparent 70%); z-index: 0; transition: opacity var(--tr-base); opacity: 0.75; } .card:hover .card-icon-wrap { transform: translateY(-3px) scale(1.05); } .card:hover .card-icon-wrap::before { opacity: 1; } .card-icon-img { /* v3.1 Волна 5 (23.10, user feedback): 94→120px — САМА иконка крупнее, под Tilda-live. */ position: relative; z-index: 1; width: 120px; height: 120px; border-radius: 14px; object-fit: contain; transition: transform var(--tr-base), box-shadow var(--tr-base); box-shadow: 0 2px 6px rgba(15, 27, 52, 0.35), 0 12px 28px rgba(15, 27, 52, 0.30), inset 0 0 0 1px rgba(217, 190, 126, 0.20); } .card:hover .card-icon-img { box-shadow: 0 3px 8px rgba(15, 27, 52, 0.42), 0 18px 40px rgba(15, 27, 52, 0.38), inset 0 0 0 1px rgba(217, 190, 126, 0.35); } .card h3 { font-family: var(--font-serif); font-weight: var(--fw-medium); font-size: 1.55rem; color: var(--navy-900); margin-bottom: 14px; letter-spacing: -0.01em; } .card p { color: var(--ink-600); font-size: 0.98rem; line-height: 1.6; } .section-cta { text-align: center; margin-top: 72px; } /* Декоративный ornament-divider между секциями */ .ornament-divider { /* v7.3 (аудит #арт): padding 40→72px, gap 20→32px — заметная пауза между секциями */ display: flex; align-items: center; justify-content: center; gap: 32px; padding: 72px 0; color: var(--gold-500); opacity: 0.5; } .ornament-divider::before, .ornament-divider::after { content: ''; /* v7.3: линии длиннее — 200→280px / 30→40vw */ width: min(280px, 40vw); height: 1px; background: linear-gradient(90deg, transparent, var(--gold-500), transparent); } .ornament-divider i { font-size: 22px; } /* ============================================================ v7.7: MARQUEE — бегущая строка «Получить помощь · Мы рядом» Живой рукописный элемент между секциями — не декоративный divider, а «шёпот сайта», плавно скользящий сквозь фон. ============================================================ */ .marquee-band { position: relative; overflow: hidden; padding: 38px 0; /* v10 (dawn-v3): dark marquee теперь тёмно-синий (продолжение middle), раньше был светлый cream — создавал полосу между middle и footer. */ background: radial-gradient(ellipse at 50% 50%, rgba(201, 169, 97, 0.10), transparent 65%), linear-gradient(180deg, #0F1A2E 0%, #0F1B34 100%); border-top: 1px solid rgba(201, 169, 97, 0.25); border-bottom: 1px solid rgba(201, 169, 97, 0.25); -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%); } .marquee-track { display: flex; gap: 60px; white-space: nowrap; animation: marqueeScroll 42s linear infinite; will-change: transform; } .marquee-item { display: inline-flex; align-items: center; gap: 32px; font-family: var(--font-serif); font-style: italic; font-weight: var(--fw-regular); font-size: clamp(1.4rem, 2.2vw, 2rem); color: var(--gold-500); letter-spacing: 0.01em; flex-shrink: 0; } /* Разделитель между фразами — тонкий золотой ромб */ .marquee-item::after { content: '◆'; color: rgba(201, 169, 97, 0.55); font-size: 0.7em; font-style: normal; margin-left: 32px; } @keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Уважение к prefers-reduced-motion — статичная строка */ @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } } /* ============================================================ STORIES SECTION ============================================================ */ .stories-section { /* v7.6c (web-designer): убран верхний-левый radial 8% gold — «козырёк» на стыке с ornament-divider выше. Оставлены только нижний vignette и центральный тёплый blush. */ background: radial-gradient(ellipse at 80% 90%, rgba(140, 100, 60, 0.07), transparent 55%), linear-gradient(180deg, #EBE3D3 0%, #F0E9D8 50%, #EBE3D3 100%); padding: 88px var(--container-pad); position: relative; overflow: hidden; } .stories-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; max-width: var(--container-max); margin: 0 auto; position: relative; z-index: 2; } .stories-copy h2 { font-family: var(--font-serif); font-weight: var(--fw-medium); /* v3.1 Волна 5+++ (23.10, типограф P3): min 2.0→1.5rem для small screens */ font-size: clamp(1.5rem, 4vw, 2.8rem); color: var(--navy-900); margin-bottom: 24px; letter-spacing: -0.02em; line-height: 1.1; } .stories-copy p { color: var(--ink-600); font-size: 1.08rem; line-height: 1.65; margin-bottom: 40px; max-width: 480px; } .quote-block { position: relative; padding: 48px 44px 48px 68px; background: linear-gradient(135deg, rgba(201,169,97,0.08) 0%, rgba(107,155,168,0.04) 100%); border-left: 2px solid var(--gold-500); border-radius: 0 var(--radius-card) var(--radius-card) 0; box-shadow: 0 8px 32px rgba(27, 42, 78, 0.06); } .quote-block::before { content: '\201C'; position: absolute; left: 20px; top: 8px; font-family: var(--font-serif); font-size: 6rem; color: var(--gold-500); line-height: 1; font-weight: 500; opacity: 0.9; } .quote-block p { font-family: var(--font-serif); font-style: italic; font-weight: var(--fw-regular); font-size: 1.4rem; line-height: 1.55; color: var(--navy-900); margin: 0; letter-spacing: -0.005em; } /* ============================================================ FUND SECTION (drama navy) ============================================================ */ .fund-section { background: radial-gradient(ellipse at 30% 30%, rgba(36, 54, 94, 0.7) 0%, transparent 60%), radial-gradient(ellipse at 75% 70%, rgba(15, 27, 52, 0.6) 0%, transparent 55%), linear-gradient(180deg, #1B2A4E 0%, #0F1B34 100%); color: var(--white); padding: 88px var(--container-pad); text-align: center; position: relative; overflow: hidden; } /* Тонкий звёздный слой */ .fund-section::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 15% 40%, rgba(245, 228, 176, 0.4), transparent), radial-gradient(1px 1px at 70% 25%, rgba(245, 228, 176, 0.3), transparent), radial-gradient(1px 1px at 40% 70%, rgba(245, 228, 176, 0.35), transparent), radial-gradient(1.2px 1.2px at 85% 55%, rgba(245, 228, 176, 0.3), transparent); pointer-events: none; } .fund-inner { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; } .fund-section h3 { font-family: var(--font-sans); font-weight: var(--fw-medium); letter-spacing: 0.22em; font-size: 0.72rem; text-transform: uppercase; color: var(--gold-500); margin-bottom: 28px; display: inline-flex; align-items: center; gap: 12px; } .fund-section h3::before, .fund-section h3::after { content: ''; width: 32px; height: 1px; background: var(--gold-500); } .fund-section p.fund-text { font-family: var(--font-serif); font-style: italic; font-weight: var(--fw-regular); font-size: clamp(1.3rem, 2.4vw, 1.65rem); line-height: 1.5; color: rgba(255,255,255,0.9); margin-bottom: 40px; letter-spacing: -0.005em; } /* v6: mountains-panorama удалена — резкий horizon-переход fund→mountains cream был слишком графичным. Замена: .atmospheric-mist.mist-fund-to-footer — sfumato-переход navy → navy (footer), с намёком на «горизонт» через тёплое золотое свечение внизу. Название .mountains сохранено как noop для fallback стилей responsive. */ .atmospheric-mist.mist-fund-to-footer { height: 200px; background: linear-gradient(180deg, #0F1B34 0%, #142347 25%, #1B2A4E 55%, #142240 82%, #0F1B34 100%); position: relative; overflow: hidden; } .atmospheric-mist.mist-fund-to-footer::before { content: ''; position: absolute; left: 0; right: 0; top: 55%; height: 40%; background: radial-gradient(ellipse 60% 100% at 50% 100%, rgba(217, 190, 126, 0.06) 0%, transparent 70%); pointer-events: none; } /* ============================================================ FOOTER ============================================================ */ footer { /* v7.6c (web-designer): убран top-left radial glow (rgba 36,54,94,0.55) — он давал светлую полосу на стыке с fund-section (#0F1B34). Убран и «светлеющий центр» #172342 в середине — теперь footer монотонно уходит вглубь от #0F1B34 к #0D1930. */ background: radial-gradient(ellipse at 80% 40%, rgba(15, 27, 52, 0.45) 0%, transparent 55%), linear-gradient(180deg, #0F1B34 0%, #0D1930 100%); color: var(--white-80); padding: 100px var(--container-pad) 40px; position: relative; overflow: hidden; } footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-500), transparent); opacity: 0.5; z-index: 2; } /* v7.3: painterly overlay — второй песок Айвазовского с очень низкой opacity + navy tint. Даёт «тканевую» живописную структуру на navy, не пестрит. */ footer::after { content: ''; position: absolute; inset: 0; background-image: url('textures/sand-aivazovsky-2.webp'); background-size: 640px 640px; background-repeat: repeat; background-position: 200px 400px; opacity: 0.08; mix-blend-mode: overlay; pointer-events: none; z-index: 0; } /* Всё содержимое футера — над оверлеем */ footer > * { position: relative; z-index: 1; } .footer-inner { /* v3.1 Волна 3 (23.10): + padding - теперь колонки выровнены с шапкой (та имеет padding: 18px var(--container-pad)). Без padding footer «уезжал» левее лого. */ max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); } .footer-grid { display: grid; /* v3.1 Волна 5++ (23.10): равные колонки 1fr 1fr 1fr — Как связаться и Реквизиты сдвинуты ещё левее. Brand ограничен max-width 320px чтобы не растягивался. */ grid-template-columns: 1fr 1fr 1fr; gap: 50px; align-items: start; margin-bottom: 72px; } /* v8 (24.10 вечер): baseline "КАК СВЯЗАТЬСЯ" / "РЕКВИЗИТЫ" выравниваем с "ЦВМ Маяк". Замерено Playwright: brand baseline на 13px ниже h4 baseline (font 22.4 vs 11.5). Только на desktop ≥1025px — иначе на tablet/mobile колонки идут в столбик и padding создаёт лишнюю пустоту. */ @media (min-width: 1025px) { .footer-col > h4:first-child { padding-top: 13px; } } /* v8.3 (24.10 вечер): все 3 колонки с точной шириной + прижать к левому краю. */ @media (min-width: 1025px) { .footer-grid { grid-template-columns: 320px 240px 240px !important; gap: 60px !important; justify-content: start !important; } } /* v8.2 (24.10 вечер): левый край контента ul должен совпадать с левым краем h4. Корень: default padding-left у