/* landing-glass.css — дизайн-система Liquid Glass для лендинга. * * Слой примитивов: палитра, фон-сцена, стеклянные поверхности, кнопки, * плавающая навигация, типографическая шкала, механика появления. * Секции и их композиция — в pages/landing.css (грузится следом). * * ВСЁ здесь заскоплено на `.lp` (класс на лендинга). Приложение и * Библиотека этот файл не подключают и не затрагиваются — общие компоненты * (.btn, .card, .badge) переопределяются только внутри `.lp`. * * Тем на лендинге две: светлая (по умолчанию) и тёмная (авто по системной * настройке — theme-init.js, либо вручную переключателем в навигации). * Тёмная — ведущая: стекло, рефракции и свечения раскрываются на графите. */ /* Якорная прокрутка не должна прятать заголовок под плавающим меню. Файл грузит только index.html, поэтому правило на html безопасно. */ html { scroll-padding-top: clamp(88px, 12vh, 132px); } /* ═══════════════════════════════════════════════════════════════════════════ 1. ПАЛИТРА ЛЕНДИНГА Спокойная, почти монохромная: графит + холодный серый + белый. Брендовый индиго и голубой живут только в микро-акцентах (кромки, свечения, иконки), а не в заливках — цвет не должен спорить со стеклом. ═══════════════════════════════════════════════════════════════════════════ */ .lp { /* Светлая схема — «морозное стекло» на почти белом. */ --lp-bg: #F1F3F8; --lp-bg-deep: #E7EAF2; --lp-ink: #0B0D14; --lp-ink-2: #4A5162; /* ink-3 — подписи и сноски кеглем 13–15px, а это «обычный текст» по WCAG (нужно ≥4.5:1). Прежние #636A7B давали 4.88 — но замерено против ПЛОСКОГО --lp-bg, а сцена не плоская: орбы подмешивают до 12% --lp-accent в видимой части экрана, и на них тот же текст падал до 4.10. Под стеклом это неважно (заливка 0.62 гасит тинт), но подписи подвала и сноска hero лежат прямо на сцене. Пересчитано с тинтом: 5.76 / 5.36 (5%) / 5.06 (9%) / 4.84 (12%). Тёмную схему это не задевает — там ink-3 держит 4.65 в худшей точке. */ --lp-ink-3: #585F70; --lp-accent: #5546D8; --lp-accent-2: #0E93B0; --lp-line: rgba(11, 13, 20, 0.10); /* Заливка стекла при наведении — на тон плотнее покоя. */ --lp-glass-hover: rgba(255, 255, 255, 0.80); /* Заливка «непрозрачной» поверхности внутри стекла (вложенные элементы, где второй backdrop-filter был бы лишней композицией). */ --lp-solid: rgba(255, 255, 255, 0.72); --lp-solid-2: rgba(255, 255, 255, 0.46); /* Радиусы: крупнее продуктовых — маркетинговые панели «мягче». */ --lp-r-sm: 14px; --lp-r-md: 20px; --lp-r-lg: 28px; --lp-r-xl: 36px; /* Вертикальный ритм секций: было 80–152px, стало 56–104px. Плотнее, но воздух между смысловыми блоками остался — аудитории он нужен, чтобы блоки не сливались в сплошное полотно. */ --lp-section: clamp(3.5rem, 1.75rem + 6.2vw, 6.5rem); background: var(--lp-bg); color: var(--lp-ink-2); /* Стекло рассчитано на непрозрачный фон под ним. */ overflow-x: clip; } [data-theme="dark"] .lp { --lp-bg: #07080B; --lp-bg-deep: #040507; --lp-ink: #F3F5F9; --lp-ink-2: #A2AABB; /* Аудит 08.09: оба значения подбирались против ПЛОСКОЙ сцены (#07080B), где давали 5.25 и 6.32. Но набранный ими текст лежит на СТЕКЛЕ, а его эффективная подложка в тёмной схеме — #2F2E3C…#45425E, то есть в 6–8 раз светлее сцены. Замер по 108 узлам лендинга: 12 провалов, минимум 2.79:1 (мета статей, «/ месяц», «/ навсегда», бейдж тарифа, сноска финальной CTA). Новые значения: ink-3 даёт 4.62 на обычном стекле (#3E3D4A) против 2.80 у прежнего и 8.68 на сцене; accent — 5.04 и 9.48. Прогон скриптом после правки: провалов 12 → 5, минимум 2.79 → 3.64. Светлая и тихая схемы этим не задеты (там было 0 провалов из 108 и 104). Потолок у ink-3 не по контрасту, а по ИЕРАРХИИ: он обязан остаться тише основного текста. --lp-ink-2 = #A2AABB, светлота 68.4%; #A5ABB6 — 68.0%, то есть впритык. Светлее делать нельзя — вторичная подпись станет ярче основного текста. Оставшиеся 5 «провалов» этой правкой НЕ закрываются, и это не про токен: все они на стекле, где даже --lp-ink-2 (основной текст!) измеряется в 3.34. Проблема в самой поверхности — стеклянная панель поверх почти чёрной сцены с saturate(180%) выходит светлее задуманного. Отдельная задача: приглушить заливку стекла в тёмной схеме, а не осветлять текст. Оговорка к числам: contrast-audit.js по своей документации НЕ моделирует backdrop-filter, поэтому абсолютные значения на стекле приблизительны — достоверна разница между прогонами до и после, а не сами цифры. */ --lp-ink-3: #A5ABB6; --lp-accent: #B7ADFF; --lp-accent-2: #3ADCF2; --lp-line: rgba(255, 255, 255, 0.10); --lp-glass-hover: rgba(255, 255, 255, 0.085); --lp-solid: rgba(255, 255, 255, 0.045); --lp-solid-2: rgba(255, 255, 255, 0.025); } /* Высокий контраст. Раньше этой схемы у лендинга не было вовсе: при data-theme="high-contrast" он отдавал светлую палитру. То есть человек, который включил режим ради читаемости, знакомился с продуктом на странице из полупрозрачного стекла, световых кромок и бликов — то есть ровно из того, что ему мешает. И это при том, что FAQ на этой же странице обещает высококонтрастную тему. Стекло здесь не «настраивается», а выключается: заливки становятся сплошными, blur обнуляется, кромка и тень превращаются в чёрную линию 1px. Токены --glass-* переопределяются прямо тут, потому что design-tokens.css задаёт их только для светлой и тёмной схем. Проверено: чернила 21:1, ink-2 18.9, ink-3 12.6, акцент 11.2, белый на акцентной плашке 9.6. */ [data-theme="high-contrast"] .lp { --lp-bg: #FFFFFF; --lp-bg-deep: #FFFFFF; --lp-ink: #000000; --lp-ink-2: #111111; --lp-ink-3: #333333; --lp-accent: #0000CC; --lp-accent-2: #006782; --lp-line: #000000; --lp-glass-hover: #F0F0F0; --lp-solid: #FFFFFF; --lp-solid-2: #FFFFFF; --glass-blur-sm: 0px; --glass-blur-md: 0px; --glass-blur-lg: 0px; --glass-saturate: 100%; --glass-fill: #FFFFFF; --glass-fill-2: #FFFFFF; --glass-edge: #000000; --glass-edge-dim: #000000; --glass-hairline: #000000; --glass-specular: transparent; --glass-shadow: 0 0 0 1px #000000; } /* Сцена — чистый декор (три градиентных орба и зерно). В режиме, включённом ради читаемости, она только снижает контраст под текстом. */ [data-theme="high-contrast"] .lp-scene { display: none; } /* Проблеск по кнопке — тоже декор, и он размывает границу нажимаемого. */ [data-theme="high-contrast"] .lp .btn::after { display: none; } /* «Тихая» тема (сенсорная чувствительность). Схема остаётся светлой — меняется насыщенность, а не контраст: орбы приглушены, блик стекла ослаблен, брендовый индиго уведён в серо-фиолетовый. Тот же приём, что у .app-scene в приложении. Проверено: акцент 6.61 на фоне, 7.04 на стекле, белый на акцентной заливке 5.42. */ [data-theme="muted"] .lp { --lp-bg: #F4F3F7; --lp-bg-deep: #EDEBF2; --lp-accent: #55527A; --lp-accent-2: #4E6E74; --glass-specular: rgba(255, 255, 255, 0.24); } [data-theme="muted"] .lp-scene { opacity: 0.45; } [data-theme="muted"] .lp-scene::after { opacity: 0.02; } /* ═══════════════════════════════════════════════════════════════════════════ 2. ФОН-СЦЕНА Фон не плоский: три мягких световых орба + едва различимое зерно. Орбы — радиальные градиенты на одном фиксированном слое, а НЕ размытые div-ы: тот же результат без единого пикселя blur (blur фона стоил бы дороже всего стекла страницы вместе взятого). ═══════════════════════════════════════════════════════════════════════════ */ .lp-scene { position: fixed; /* Запас сверху 120px, снизу 210px — а не inset: 0. Параллакс уводит слой вверх на 90px, и без запаса снизу открывалась полоса голого фона body — чёткий край, едущий по экрану при прокрутке. До 14.09 запас был симметричным (inset: -120px 0), и к концу параллакса снизу оставалось 30px: оттяжка сильнее открывала холст. 210 = 120 + 90. Высота постоянная — от «большого» вьюпорта (100lvh), а не inset: при inset слой менял высоту, когда прячется адресная строка, и орбы съезжали (фон «дышал» при каждой смене направления прокрутки). Позиции орбов считаются от прежней коробки (экран + 240px), поэтому картинка та же, что была. */ --lp-scene-h: 100vh; top: -120px; left: 0; right: 0; height: calc(var(--lp-scene-h) + 330px); z-index: -1; pointer-events: none; background: radial-gradient(46rem 34rem at 14% calc((var(--lp-scene-h) + 240px) * -0.06), color-mix(in srgb, var(--lp-accent) 26%, transparent) 0%, transparent 62%), radial-gradient(38rem 30rem at 92% calc((var(--lp-scene-h) + 240px) * 0.04), color-mix(in srgb, var(--lp-accent-2) 14%, transparent) 0%, transparent 58%), radial-gradient(52rem 42rem at 52% calc((var(--lp-scene-h) + 240px) * 1.06), color-mix(in srgb, var(--lp-accent) 16%, transparent) 0%, transparent 64%), linear-gradient(180deg, var(--lp-bg) 0, var(--lp-bg-deep) calc(var(--lp-scene-h) + 240px)); /* Переменную двигает JS-фоллбэк (initScene); там, где браузер умеет scroll-driven animation, её никто не трогает и сдвиг задают keyframes. */ transform: translate3d(0, var(--lp-scene-y, 0px), 0); will-change: transform; } /* Деликатный параллакс: слой уезжает на 90px за первые 1500px прокрутки. Считает сам браузер (scroll-driven animation). Раньше это делал JS по событию scroll: прокрутка идёт на композиторе, а трансформ приезжал из основного потока кадром позже — фон заметно отставал, и это же отставание размазывало стекло, которое его подхватывает через backdrop-filter. Здесь анимация живёт на композиторе и от прокрутки не отстаёт в принципе. Где не поддерживается (Safari до 26, Firefox) — остаётся JS-фоллбэк из landing.js: с запасом в 120px его отставание больше не рвёт край, а мягкий градиент, приезжающий кадром позже, глазом не ловится. */ @supports (animation-timeline: scroll()) { .lp-scene { animation-name: lp-scene-drift; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: scroll(root block); animation-range: 0px 1500px; } /* Системная настройка покоя; явный выбор в Настройках главнее (см. animations.css и FN.motion). Гасим именно имя анимации: обнулённая длительность из animations.css для прогресс-таймлайна смысла не имеет. */ @media (prefers-reduced-motion: reduce) { html:not([data-reduced-motion="false"]) .lp-scene { animation-name: none; } } } @keyframes lp-scene-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -90px, 0); } } @supports (height: 100lvh) { .lp-scene { --lp-scene-h: 100lvh; } } [data-theme="dark"] .lp-scene { background: radial-gradient(46rem 34rem at 14% calc((var(--lp-scene-h) + 240px) * -0.06), color-mix(in srgb, var(--lp-accent) 20%, transparent) 0%, transparent 60%), radial-gradient(38rem 30rem at 92% calc((var(--lp-scene-h) + 240px) * 0.04), color-mix(in srgb, var(--lp-accent-2) 11%, transparent) 0%, transparent 56%), radial-gradient(52rem 42rem at 52% calc((var(--lp-scene-h) + 240px) * 1.06), color-mix(in srgb, var(--lp-accent) 14%, transparent) 0%, transparent 62%), linear-gradient(180deg, var(--lp-bg) 0, var(--lp-bg-deep) calc(var(--lp-scene-h) + 240px)); } /* Зерно: убирает пластиковую гладкость градиентов и полосы (banding) на больших плоскостях. Один SVG-шум в data-URI — без сетевого запроса. */ .lp-scene::after { content: ""; position: absolute; inset: 0; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } [data-theme="dark"] .lp-scene::after { opacity: 0.05; } /* ═══════════════════════════════════════════════════════════════════════════ 3. СТЕКЛЯННАЯ ПОВЕРХНОСТЬ Настоящее стекло собирается из четырёх слоёв: 1) полупрозрачная заливка — тело стекла; 2) backdrop-filter blur+saturate — преломление фона (saturate возвращает цвет, который blur «вымывает» — без него стекло выглядит мутным); 3) градиентная рамка 1px (::before)— световая кромка, ярче сверху-слева, затухает книзу: свет в сцене падает сверху; 4) радиальный блик (::after) — specular-рефракция в верхнем углу. Внешняя многослойная тень даёт отрыв от фона (эффект парения). ═══════════════════════════════════════════════════════════════════════════ */ .lp-glass { position: relative; isolation: isolate; border-radius: var(--lp-r-lg); background: var(--glass-fill); -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate)); box-shadow: var(--glass-shadow); } /* Слой 3 — световая граница. Рисуется маской «рамка из градиента»: заливка обрезается до 1px по периметру (mask-composite: exclude). */ .lp-glass::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; background: linear-gradient( 148deg, var(--glass-edge) 0%, var(--glass-hairline) 42%, var(--glass-edge-dim) 78%, var(--glass-edge) 100% ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; } /* Слой 4 — блик-рефракция и лёгкое внутреннее свечение. */ .lp-glass::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient( 130% 90% at 8% -14%, var(--glass-specular) 0%, transparent 56% ); opacity: 0.78; pointer-events: none; transition: opacity var(--transition-slow); } /* Уровни размытия. sm — мелкие плавающие элементы, lg — крупные «облака». */ .lp-glass--sm { -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate)); } .lp-glass--lg { -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate)); } /* Интерактивное стекло: подъём, уплотнение заливки, усиление блика и тени. Анимируются только transform/opacity/box-shadow — без реflow. */ .lp-glass--lift { transition: transform 420ms var(--ease-out-quart), box-shadow 420ms var(--ease-out-quart), background 420ms var(--ease-out-quart); } @media (hover: hover) and (pointer: fine) { .lp-glass--lift:hover { transform: translateY(-6px); background: var(--lp-glass-hover); box-shadow: var(--glass-shadow), 0 0 0 1px color-mix(in srgb, var(--lp-accent) 22%, transparent), 0 24px 60px color-mix(in srgb, var(--lp-accent) 18%, transparent); } /* Блик разгорается до полного — стекло «ловит свет» под курсором. */ .lp-glass--lift:hover::after { opacity: 1; } } /* Резерв: без backdrop-filter стекло превращается в плотную поверхность — контент остаётся читаемым (старые Firefox ESR, режимы экономии). */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .lp-glass { background: var(--lp-solid); box-shadow: var(--shadow-md); } [data-theme="dark"] .lp-glass { background: #14161C; } } /* ═══════════════════════════════════════════════════════════════════════════ 4. ТИПОГРАФИКА Шкала перестроена: крупнее контрастов, плотнее оптика на больших кеглях. Заголовки — Nunito (как во всём продукте), текст — Inter. Межстрочный интервал абзацев остаётся relaxed: аудитория с дислексией читает по нему. ═══════════════════════════════════════════════════════════════════════════ */ .lp { /* Верх шкалы — 72px, а не 84: кириллица в Nunito шире латиницы, и на 84px строка hero-заголовка перестаёт помещаться в контейнер уже на 1280px. */ --lp-display: clamp(2.5rem, 1.2rem + 5.2vw, 4.5rem); /* 40 → 72 */ --lp-h2: clamp(1.875rem, 1.25rem + 2.8vw, 3.375rem); /* 30 → 54 */ --lp-h3: clamp(1.1875rem, 1.05rem + 0.7vw, 1.5rem); /* 19 → 24 */ --lp-lead: clamp(1.0625rem, 0.98rem + 0.6vw, 1.375rem);/* 17 → 22 */ } .lp-display { font-family: var(--font-heading); font-weight: var(--font-bold); font-size: var(--lp-display); line-height: 1.02; /* Минус-трекинг только на маркетинговом display: на кегле ≥42px он оптически нейтрален и не мешает чтению при дислексии (правило проекта «без отрицательного трекинга» касается заголовков нормального размера). */ letter-spacing: -0.022em; color: var(--lp-ink); text-wrap: balance; } .lp-h2 { font-family: var(--font-heading); font-weight: var(--font-bold); font-size: var(--lp-h2); line-height: 1.1; letter-spacing: -0.015em; color: var(--lp-ink); text-wrap: balance; } .lp-h3 { font-family: var(--font-heading); font-weight: var(--font-bold); font-size: var(--lp-h3); line-height: 1.28; color: var(--lp-ink); } .lp-lead { font-size: var(--lp-lead); line-height: 1.55; color: var(--lp-ink-2); text-wrap: pretty; } /* ⚠ Ловушка специфичности — ПРАВИЛО НИЖЕ СИЛЬНЕЕ, ЧЕМ ВЫГЛЯДИТ. `.lp p` — это (0,1,1), а правило вида `.lp-head__sub` — (0,1,0). Поэтому любое `color: var(--lp-ink-3)`, объявленное на элементе

одним классом, молча проигрывает этой строке и не действует. Так вхолостую висели пять объявлений (.lp-head__sub, .lp-hero__note, .lp-final__note, .lp-footer__tagline, .quiz__counter) — все рисовались ink-2, и трёхуровневая иерархия «заголовок → текст → подпись» на лендинге отсутствовала: сноска под кнопкой весила столько же, сколько основной абзац. Аудит 21.08: все пять переписаны с ведущим `.lp ` (0,2,1) и теперь работают. ПРАВИЛО ДЛЯ НОВОГО КОДА: если задаёте color на

внутри `.lp` — пишите селектор с ведущим `.lp `, иначе объявление не применится и вы этого не заметите (ink-2 контрастнее ink-3, страница выглядит «просто иначе»). Контраст ink-3 замерен с учётом тинта сцены: 5.76 / 5.36 / 5.06 / 4.84 в светлой схеме, 4.65 в худшей точке тёмной — то есть AA держится. */ .lp p { color: var(--lp-ink-2); line-height: var(--leading-relaxed); } .lp strong { color: var(--lp-ink); font-weight: var(--font-semi); } .lp .lp-muted { color: var(--lp-ink-3); } /* Надзаголовок секции — маленькая стеклянная пилюля вместо голого caps-текста. */ .lp-eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); background: var(--glass-fill); -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate)); box-shadow: inset 0 0 0 1px var(--glass-hairline), 0 2px 10px rgba(0, 0, 0, 0.05); font-size: var(--text-xs); font-weight: var(--font-semi); letter-spacing: 0.08em; text-transform: uppercase; color: var(--lp-ink-2); } /* Точка-индикатор в фирменном градиенте — единственное место яркого цвета. */ .lp-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, var(--lp-accent), var(--lp-accent-2)); } /* ═══════════════════════════════════════════════════════════════════════════ 5. КНОПКИ Главная CTA — плотная капсула максимального контраста (графит на светлой теме, почти белый на тёмной) с брендовым свечением под ней: цвет присутствует как свет, а не как заливка. Вторичная — честное стекло. ═══════════════════════════════════════════════════════════════════════════ */ .lp .btn { position: relative; isolation: isolate; overflow: hidden; font-weight: var(--font-bold); letter-spacing: -0.005em; /* translate отделён от transform: магнитный сдвиг (JS) и нажатие (transform: scale) не перетирают друг друга. */ translate: var(--lp-mx, 0) var(--lp-my, 0); transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-normal), translate 300ms var(--ease-out-quart), transform 220ms var(--ease-spring); } /* Проблеск стекла: узкая световая полоса проходит по кнопке ОДИН раз при наведении. Не бесконечный цикл — правило проекта: ничего постоянно движущегося в периферии зрения. */ .lp .btn::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient( 100deg, transparent 32%, rgba(255, 255, 255, 0.30) 48%, transparent 64% ); transform: translateX(-120%); opacity: 0; pointer-events: none; } @media (hover: hover) and (pointer: fine) { .lp .btn:hover::after { opacity: 1; transform: translateX(120%); transition: transform 850ms var(--ease-out-quart), opacity 120ms linear; } } .lp .btn--primary { background: var(--lp-ink); color: var(--lp-bg); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 2px 8px rgba(0, 0, 0, 0.12), 0 10px 30px color-mix(in srgb, var(--lp-accent) 26%, transparent); } .lp .btn--primary:hover { background: var(--lp-ink); color: var(--lp-bg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 4px 12px rgba(0, 0, 0, 0.16), 0 16px 44px color-mix(in srgb, var(--lp-accent) 42%, transparent); } /* На тёмной теме капсула светлая — текст берём из графитового фона. */ [data-theme="dark"] .lp .btn--primary { background: #F5F7FB; color: #0A0C11; } [data-theme="dark"] .lp .btn--primary:hover { background: #FFFFFF; color: #0A0C11; } /* ── Единственная брендовая заливка на лендинге: CTA первого экрана ──────── * Палитра лендинга намеренно почти монохромная (графит + стекло), и это * решение остаётся. Но следствием было то, что фирменный индиго не * встречался на маркетинговой странице НИ РАЗУ в заливке — только в свечении * тени. Пользователь нажимал чёрную капсулу «Начать бесплатно» и попадал в * приложение, где та же главная кнопка фиолетовая: цвет главного действия * менялся ровно на границе продукта. * * Заливку получает одна кнопка — hero-CTA. Остальные (шапка, тарифы, * финальная панель, плавающая мобильная) остаются графитовыми: правило * «одна брендовая заливка на экран» из layouts/app-glass.css §2 теперь * действует и здесь. * * Токены берём продуктовые (--clr-primary / --clr-on-primary), а не --lp-*: * именно их пара проверена по WCAG во всех четырёх темах (светлая 4.57, * тёмная 6.55, тихая 5.86, контрастная 11.22) и именно они делают кнопку * тем же объектом, что и в приложении. * * Специфичность (0,3,0) и позиция ПОСЛЕ тёмного переопределения выше — * обязательны: у `[data-theme="dark"] .lp .btn--primary` та же (0,3,0), и * без «позже в файле» тёмная тема вернула бы светлую капсулу. */ .lp .lp-hero__cta .btn--primary { background: var(--clr-primary); color: var(--clr-on-primary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 2px 8px color-mix(in srgb, var(--clr-primary) 24%, transparent), 0 10px 30px color-mix(in srgb, var(--clr-primary) 30%, transparent); } .lp .lp-hero__cta .btn--primary:hover { background: var(--clr-primary-hover); color: var(--clr-on-primary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 4px 12px color-mix(in srgb, var(--clr-primary) 32%, transparent), 0 16px 44px color-mix(in srgb, var(--clr-primary) 42%, transparent); } /* Контрастная тема: свечение — декор, а режим включают ради читаемости. Заливка остаётся брендовой (#0000CC, белый на ней 11.22:1), уходит только цветная тень — как и у остальных элементов в этой теме. */ [data-theme="high-contrast"] .lp .lp-hero__cta .btn--primary, [data-theme="high-contrast"] .lp .lp-hero__cta .btn--primary:hover { box-shadow: none; } .lp .btn--secondary { background: var(--glass-fill); -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate)); border-color: transparent; color: var(--lp-ink); box-shadow: inset 0 0 0 1px var(--glass-hairline), inset 0 1px 0 var(--glass-edge), 0 4px 16px rgba(0, 0, 0, 0.06); } .lp .btn--secondary:hover { background: var(--lp-glass-hover); color: var(--lp-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lp-accent) 30%, transparent), inset 0 1px 0 var(--glass-edge), 0 8px 26px rgba(0, 0, 0, 0.10); } .lp .btn--ghost { color: var(--lp-ink-2); border-color: transparent; } .lp .btn--ghost:hover { background: var(--glass-fill); color: var(--lp-ink); } /* Компактная капсула для плотной навигации. */ .lp .btn--sm { min-height: 38px; padding: var(--space-2) var(--space-5); font-size: var(--text-sm); } .lp .btn--lg { min-height: 54px; padding: var(--space-4) var(--space-8); font-size: var(--text-lg); } /* ═══════════════════════════════════════════════════════════════════════════ 6. ПЛАВАЮЩАЯ НАВИГАЦИЯ Стеклянное облако поверх страницы: не прилегает к краю, центрировано, капсульное, со своей тенью. Обёртка растянута на всю ширину, но прозрачна для курсора (pointer-events) — клики проходят мимо неё к контенту. ═══════════════════════════════════════════════════════════════════════════ */ /* Сенсор верха страницы: его пересечение переключает «прилипшее» состояние навигации. Абсолютный и без высоты в потоке — на макет не влияет. */ #lp-top-sentinel { position: absolute; inset-block-start: 0; inset-inline: 0; height: 72px; pointer-events: none; } .lp-nav { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: var(--z-sticky); display: flex; justify-content: center; /* Вырезы экрана: в ландшафте на iPhone капсула иначе заезжает под скруглённый угол, а в установленной PWA — под статус-бар. */ padding-block-start: calc(clamp(14px, 1.8vw, 30px) + env(safe-area-inset-top, 0px)); padding-inline: max(var(--space-4), env(safe-area-inset-left, 0px)) max(var(--space-4), env(safe-area-inset-right, 0px)); pointer-events: none; transition: padding-block-start 500ms var(--ease-out-quart); } /* При прокрутке облако «прилипает»: отступ сверху сжимается. */ .lp-nav.is-stuck { padding-block-start: clamp(8px, 0.9vw, 14px); } .lp-nav__cloud { --nav-scale: 1; pointer-events: auto; display: flex; align-items: center; gap: clamp(var(--space-2), 1.4vw, var(--space-6)); width: 100%; max-width: 940px; padding: 8px 8px 8px var(--space-5); border-radius: var(--radius-full); transform: scale(var(--nav-scale)); transform-origin: top center; transition: transform 450ms var(--ease-out-quart), background 450ms var(--ease-out-quart), box-shadow 450ms var(--ease-out-quart); /* Плавное появление при загрузке: облако «проявляется» сверху. */ animation: lp-nav-in 720ms var(--ease-out-quart) both; } @keyframes lp-nav-in { from { opacity: 0; transform: translateY(-16px) scale(0.94); filter: blur(6px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } /* Прокрученное состояние: чуть компактнее и заметно прозрачнее — под облаком уже идёт контент, и оно должно уходить на второй план. */ .lp-nav.is-stuck .lp-nav__cloud { --nav-scale: 0.975; background: var(--glass-fill-2); } @media (hover: hover) and (pointer: fine) { .lp-nav__cloud:hover { --nav-scale: 1.012; } .lp-nav.is-stuck .lp-nav__cloud:hover { --nav-scale: 0.99; } } .lp-nav__logo { display: inline-flex; align-items: center; /* gap нельзя: текстовые узлы «Фокусн», «ИИ», «к» — отдельные flex-элементы, отступ между ними разорвал бы слово. Зазор задан margin у маскота. */ gap: 0; flex-shrink: 0; font-family: var(--font-heading); font-weight: var(--font-bold); font-size: var(--text-lg); color: var(--lp-ink); letter-spacing: -0.01em; } .lp-nav__logo span { color: var(--lp-accent); } /* Знак приложения. width/height проставлены в разметке — без CLS до загрузки. */ .lp-nav__mark { width: 28px; height: 28px; margin-right: var(--space-2); flex-shrink: 0; } .lp-nav__links { position: relative; display: flex; align-items: center; gap: 2px; margin-inline: auto; } .lp-nav__link { position: relative; z-index: 1; padding: 9px var(--space-4); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--lp-ink-2); white-space: nowrap; transition: color var(--transition-normal); } .lp-nav__link:hover, .lp-nav__link.is-active { color: var(--lp-ink); } /* Индикатор активного пункта — стеклянная «капля», перетекающая между пунктами по пружине. Позиция и ширина приходят из JS переменными. */ .lp-nav__pill { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--pill-w, 0px); border-radius: var(--radius-full); background: var(--glass-fill); box-shadow: inset 0 0 0 1px var(--glass-hairline), inset 0 1px 0 var(--glass-edge); opacity: var(--pill-o, 0); transform: translateX(var(--pill-x, 0px)); transition: transform 520ms var(--ease-spring), width 520ms var(--ease-spring), opacity var(--transition-normal); pointer-events: none; } .lp-nav__actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } /* Переключатель темы — иконочная стеклянная кнопка. */ .lp-nav__theme { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--radius-full); color: var(--lp-ink-2); transition: background var(--transition-fast), color var(--transition-fast), transform 220ms var(--ease-spring); } .lp-nav__theme:hover { background: var(--glass-fill); color: var(--lp-ink); } .lp-nav__theme:active { transform: scale(0.9); } /* Показываем иконку противоположной темы — то, что произойдёт по нажатию. */ .lp-nav__theme .lp-ico-sun { display: none; } [data-theme="dark"] .lp-nav__theme .lp-ico-sun { display: block; } [data-theme="dark"] .lp-nav__theme .lp-ico-moon { display: none; } /* Бургер: три линии, складывающиеся в крест. Только мобильный. */ .lp-nav__burger { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-full); color: var(--lp-ink); } .lp-nav__burger span { position: relative; display: block; width: 18px; height: 1.6px; border-radius: 2px; background: currentColor; transition: transform 320ms var(--ease-out-quart), opacity 200ms linear; } .lp-nav__burger span::before, .lp-nav__burger span::after { content: ""; position: absolute; inset-inline: 0; height: 100%; border-radius: inherit; background: currentColor; transition: transform 320ms var(--ease-out-quart); } .lp-nav__burger span::before { transform: translateY(-6px); } .lp-nav__burger span::after { transform: translateY(6px); } .lp-nav__burger[aria-expanded="true"] span { background: transparent; } .lp-nav__burger[aria-expanded="true"] span::before { transform: rotate(45deg); } .lp-nav__burger[aria-expanded="true"] span::after { transform: rotate(-45deg); } /* Мобильное меню — стеклянная шторка под облаком навигации. На десктопе пунктов меню на телефоне раньше не было вовсе (display:none). */ .lp-menu { position: fixed; inset-block-start: calc(clamp(14px, 1.8vw, 30px) + 62px + env(safe-area-inset-top, 0px)); inset-inline: max(var(--space-4), env(safe-area-inset-left, 0px)) max(var(--space-4), env(safe-area-inset-right, 0px)); /* Шторка не должна уезжать за экран, если пунктов больше, чем помещается (мелкие экраны в ландшафте). */ max-height: calc(100dvh - clamp(14px, 1.8vw, 30px) - 62px - env(safe-area-inset-top, 0px) - var(--space-4)); overflow-y: auto; overscroll-behavior: contain; z-index: calc(var(--z-sticky) - 1); padding: var(--space-4); border-radius: var(--lp-r-lg); opacity: 0; transform: translateY(-12px) scale(0.98); visibility: hidden; transition: opacity 320ms var(--ease-out-quart), transform 320ms var(--ease-out-quart), visibility 320ms; } .lp-menu.is-open { opacity: 1; transform: none; visibility: visible; } /* Фон не прокручивается, пока открыта шторка (top задаёт JS = -scrollY). */ .lp-menu-lock { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; } .lp-menu__list { display: flex; flex-direction: column; gap: 2px; } .lp-menu__list a { padding: var(--space-3) var(--space-4); border-radius: var(--lp-r-sm); font-size: var(--text-lg); font-weight: var(--font-semi); color: var(--lp-ink); transition: background var(--transition-fast); } .lp-menu__list a:hover { background: var(--glass-fill); } .lp-menu__cta { margin-top: var(--space-3); } @media (max-width: 900px) { .lp-nav__links { display: none; } .lp-nav__burger { display: inline-flex; } .lp-nav__cloud { justify-content: space-between; max-width: 620px; } .lp-nav__actions .lp-nav-hide-sm { display: none; } } /* Узкие экраны: в облаке остаются логотип, тема и бургер. CTA не теряется — она есть и в самом меню, и в плавающей нижней капсуле. Без этого шапка перестаёт помещаться в 375px и содержимое вылезает за край. */ @media (max-width: 560px) { .lp-nav__cloud { padding-inline-start: var(--space-4); } .lp-nav__actions .btn { display: none; } } @media (min-width: 901px) { .lp-menu { display: none; } } /* ── Широкая навигация лендинга ──────────────────────────────────────────── Пункт «Как это работает?» длиннее прежних «Возможностей», и ряд ссылок в облако 940px больше не помещается: оно шире, поля пунктов сжимаются, пороги сдвинуты. Шапки Библиотеки это не касается — там пунктов меньше. ⚠ Пороги навигации (1020 / 960 / 900 / 560) намеренно НЕ приведены к шкале --bp-* из design-tokens.css. Шкала описывает ярусы макета, а здесь порог определяется фактической шириной капсулы с конкретным набором подписей: у лендинга пунктов четыре и они длинные, у Библиотеки — меньше и короче, поэтому у них разные пороги (960 и 900) при одинаковом ярусе. Подгонка их под общую шкалу вернёт переполнение облака. Секции контента — наоборот, живут строго на шкале, см. landing.css. */ .lp-nav--wide .lp-nav__cloud { max-width: 1020px; } .lp-nav--wide .lp-nav__link { padding-inline: clamp(var(--space-3), 1vw, var(--space-4)); } /* Ниже 1020px «Войти» уступает место пунктам: вход остаётся в меню и в подвале. */ @media (max-width: 1020px) { .lp-nav--wide .lp-nav__actions .lp-nav-hide-sm { display: none; } } /* Ниже 960px ссылки уже не помещаются рядом с логотипом и кнопками — навигация уходит в бургер (у Библиотеки этот порог остаётся 900px). */ @media (max-width: 960px) { .lp-nav--wide .lp-nav__links { display: none; } .lp-nav--wide .lp-nav__burger { display: inline-flex; } .lp-nav--wide .lp-nav__cloud { justify-content: space-between; max-width: 620px; } .lp-nav--wide ~ .lp-menu { display: block; } } /* Тач-устройства: единый тач-таргет 44px (аудитория с импульсивной моторикой чаще промахивается). Ориентируемся на тип указателя, а не на ширину экрана. */ @media (pointer: coarse) { .lp .btn--sm { min-height: 44px; } /* 46px, а не 44: при прокрутке облако навигации ужимается (--nav-scale: 0.975), и объявленные 44px превращались на экране в 42.9px. 46 × 0.975 = 44.85 — норма выдержана в обоих состояниях шапки. */ .lp-nav__theme, .lp-nav__burger { width: 46px; height: 46px; } /* Логотип-ссылка «на главную» — тоже цель, а была 27.9px по высоте. */ .lp-nav__logo { min-height: 46px; } } /* ═══════════════════════════════════════════════════════════════════════════ 7. РИТМ СЕКЦИЙ Чередование фона (.section--alt) убрано: сцена сквозная, а разделение секций держится на воздухе и на стеклянных поверхностях, а не на полосах. ═══════════════════════════════════════════════════════════════════════════ */ .lp-section { position: relative; padding-block: var(--lp-section); } .lp-section--tight { padding-block: calc(var(--lp-section) * 0.55); } .lp-container { width: 100%; max-width: var(--container-mk); margin-inline: auto; padding-inline: clamp(var(--space-4), 3vw, var(--space-10)); } .lp-container--narrow { max-width: 860px; } /* Шапка секции: eyebrow → заголовок → подзаголовок, по центру. */ .lp-head { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); margin-bottom: clamp(var(--space-10), 5vw, var(--space-16)); text-align: center; } /* `.lp ` в начале — не украшение: см. заметку о специфичности у `.lp p` выше. Без него объявление color проигрывает (0,1,1) и подзаголовок рисуется ink-2. */ .lp .lp-head__sub { max-width: 56ch; font-size: var(--lp-lead); line-height: 1.55; color: var(--lp-ink-3); text-wrap: pretty; } /* ═══════════════════════════════════════════════════════════════════════════ 8. ПОЯВЛЕНИЕ ПРИ ПРОКРУТКЕ Элемент выезжает снизу и проявляется, с каскадом внутри группы. Атрибут data-reveal-on ставит JS и только когда движение разрешено — без JS и при reduced-motion контент виден сразу. ═══════════════════════════════════════════════════════════════════════════ */ /* ⚠ Здесь НЕТ filter: blur(). Раньше был — blur(8px), уходивший в none за 700мс на 43 элементах страницы. opacity и transform браузер отдаёт композитору и считает вне основного потока; filter: blur() — нет: каждый кадр перехода требует пересчёта размытия по площади элемента, и при каскаде (стаггер 70мс) таких элементов на экране несколько одновременно. На среднем Android это стоило кадров ровно во время прокрутки, то есть в единственный момент, когда анимацию видно. Сдвиг + прозрачность дают тот же смысл «блок появился» за ноль дополнительной композиции. */ [data-reveal-on] .lp-reveal { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--ease-out-quart), transform 700ms var(--ease-out-quart); transition-delay: calc(var(--reveal-i, 0) * 70ms); } [data-reveal-on] .lp-reveal.is-in { opacity: 1; transform: none; } /* Полное уважение к настройке «меньше движения»: гасим всё, что двигается само, включая появление навигации и параллакс сцены. */ @media (prefers-reduced-motion: reduce) { .lp-nav__cloud { animation: none; } .lp-scene { transform: none; will-change: auto; } .lp .btn::after { display: none; } .lp-glass--lift:hover { transform: none; } } [data-reduced-motion="true"] .lp-nav__cloud { animation: none; } [data-reduced-motion="true"] .lp-scene { transform: none; } [data-reduced-motion="true"] .lp .btn::after { display: none; }