/* ══════════════════════════════════════════════════════════════ * landing.css — оформление «лендинг как документ редактора». * Дополняет index.css (не заменяет). Все декоративные слои — aria-hidden. * Анимируем только transform/opacity/stroke-dashoffset/clip-path. * Ветки оформления выбираются классами на : .lz-anim / .lz-static / .lz-reduced. * ══════════════════════════════════════════════════════════════ */ /* ── Reduced-motion killswitch ────────────────────────────────── Равноценная статичная версия: гасим ЛЮБЫЕ анимации/переходы лендинга, декоративные слои показываем в конечном (читаемом) состоянии. Это не заглушка — контент тот же, просто без движения. */ .lz-reduced [data-lz-anim], .lz-reduced .lz-frame, .lz-reduced .lz-ghost-layer { animation: none !important; transition: none !important; } /* Слои-призраки и линейки не участвуют в раскладке и не мешают вводу. */ .lz-ghost-layer, .lz-ruler { pointer-events: none; } /* ── Hero: перо рисует заголовок (#2) ─────────────────────────── .lz-hero-run ставится СИНХРОННО (до первой отрисовки) только когда решено анимировать: без JS / reduced / повторный визит — класса нет, текст и рамка видны сразу (LCP = «Дизайн», SEO/no-JS целы, вспышки нет). */ .lz-draw { position: relative; } /* ФИНАЛЬНОЕ ВИДИМОЕ состояние слов задаём ЯВНО и как базу (не зависит от снятия .lz-hero-run) — так текст виден без JS, при reduced-motion и даже если финализация не сработала. Обычное слово — цветом темы. */ .hero .lz-draw { color: var(--text); } /* Градиентное слово: background-clip:text родителя .grad-text не докрашивает вложенный span (баг — «и санкций» невидимо). Даём градиент+clip САМОМУ .lz-draw. */ .hero .grad-text .lz-draw { background: var(--grad-spark); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* На время прорисовки прячем настоящий текст (его контур рисует SVG-оверлей) и заводскую рамку выделения (защёлкнется в финале). */ .lz-hero-run .hero .lz-draw { color: transparent; -webkit-text-fill-color: transparent; } .lz-hero-run .hero .grad-text .lz-draw { background: none; } /* убрать градиент-фон, пока рисуем */ .lz-hero-run .hero .sel-box, .lz-hero-run .hero .sel-dim { opacity: 0 !important; } /* SVG-оверлей с обводкой глифов поверх слова (декоративный, не мешает вводу). */ .lz-draw-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .lz-draw-svg text { fill: none; stroke: var(--brand-violet); stroke-width: 1.2px; stroke-linejoin: round; stroke-linecap: round; } /* Градиентное слово «и санкций» рисуется бирюзово-фиолетовым акцентом. */ .grad-text .lz-draw-svg text { stroke: var(--brand-guide); } /* Курсор-перо и точки-якоря — fixed-слой поверх, не перехватывают клики. */ .lz-pen { position: fixed; left: 0; top: 0; z-index: 60; width: 24px; height: 24px; pointer-events: none; opacity: 0; transform: translate(-200px, -200px); will-change: transform, opacity; } .lz-anchor { position: fixed; left: 0; top: 0; z-index: 59; width: 7px; height: 7px; pointer-events: none; background: var(--bg); border: 1.5px solid var(--brand-violet); border-radius: 2px; opacity: 0; will-change: transform, opacity; } /* Бейдж размера при «защёлке» рамки в финале — лёгкое появление (только transform/opacity). */ @keyframes lz-badge-in { from { opacity: 0; transform: translateX(-50%) scale(.9); } to { opacity: 1; transform: translateX(-50%) scale(1); } } .lz-hero-settled .hero .sel-word.active .sel-dim { animation: lz-badge-in .32s ease-out both; } /* ── Фиксы рамки выделения hero ────────────────────────────────── #2 Бейдж наследовал letter-spacing заголовка (−.03em ≈ −2.64px) → цифры слипались. Возвращаем нормальный трекинг (размер уже 11px). */ .hero .sel-dim { letter-spacing: normal; } /* #3 Рамка облегает СЛОВО, а не строку: было inset:-10px (рамка выше/ниже глифов из-за line-height:1.2). Поджимаем сверху/снизу к тексту, по бокам — небольшой отступ. */ .hero .sel-box { inset: 4px -7px 6px -7px; } /* Snap-направляющие не должны висеть вечно — короткая вспышка 400мс при активации слова, затем скрываются (перекрываем постоянный opacity:.55 из index.css). */ .hero .sel-word.active .snap-guide { opacity: 0; animation: lz-snap .4s ease-out both; } @keyframes lz-snap { 0% { opacity: 0; } 30% { opacity: .5; } 100% { opacity: 0; } } .lz-reduced .hero .sel-word.active .snap-guide { animation: none; opacity: 0; } /* ── Секции-фреймы + ярлычки (#3) ─────────────────────────────── Каждая секция — «фрейм на канвасе»: тонкая рамка выровнена по .wrap (1180px) и подпись-ярлычок моно-шрифтом сверху слева. Оба декоративны (::before/::after не попадают в дерево доступности). Боковой отступ повторяет центрирование .wrap. */ .lz-frame { position: relative; } .lz-frame::after { content: ''; position: absolute; pointer-events: none; top: 34px; bottom: 34px; left: max(20px, calc((100% - 1180px) / 2 + 8px)); right: max(20px, calc((100% - 1180px) / 2 + 8px)); border: 1px solid var(--bd); border-radius: 16px; } .lz-frame::before { content: attr(data-lz-label); position: absolute; pointer-events: none; top: 16px; left: max(20px, calc((100% - 1180px) / 2 + 10px)); font-family: var(--font-mono); font-size: 11px; letter-spacing: .5px; color: var(--t3); z-index: 1; } /* Вход секции во вьюпорт: лёгкий zoom-in (только transform/opacity, GPU). */ .lz-anim .lz-frame { animation: lz-frame-in linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; will-change: transform, opacity; } @keyframes lz-frame-in { from { opacity: 0; transform: scale(.965); } to { opacity: 1; transform: scale(1); } } /* Ярлычок — чуть раньше содержимого (на своей timeline, короче). */ .lz-anim .lz-frame::before { animation: lz-label-in linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; } @keyframes lz-label-in { from { opacity: 0; } to { opacity: 1; } } /* ── Параллакс сетки + линейки + статусбар (#4) ────────────────── Фон-сетка едет медленнее контента (параллакс) — только transform по scroll-timeline. */ .lz-anim .bg-grid { animation: lz-grid-parallax linear both; animation-timeline: scroll(root); will-change: transform; } @keyframes lz-grid-parallax { from { transform: translateY(0); } to { transform: translateY(-12vh); } } /* Линейки по краям вьюпорта (создаются JS, десктоп). Деления — repeating-gradient, смещаются transform внутреннего слоя по той же scroll-timeline. */ .lz-ruler { position: fixed; z-index: 3; opacity: .5; } .lz-ruler-top { top: 0; left: 0; right: 0; height: 16px; border-bottom: 1px solid var(--bd); } .lz-ruler-left { top: 0; bottom: 0; left: 0; width: 16px; border-right: 1px solid var(--bd); } .lz-ruler .lz-ticks { position: absolute; inset: 0; } .lz-ruler-top .lz-ticks { background-image: repeating-linear-gradient(90deg, var(--bd) 0 1px, transparent 1px 40px); } .lz-ruler-left .lz-ticks { background-image: repeating-linear-gradient(0deg, var(--bd) 0 1px, transparent 1px 40px); } .lz-anim .lz-ruler-top .lz-ticks { animation: lz-tick-x linear both; animation-timeline: scroll(root); } .lz-anim .lz-ruler-left .lz-ticks { animation: lz-tick-y linear both; animation-timeline: scroll(root); } @keyframes lz-tick-x { from { transform: translateX(0); } to { transform: translateX(-40px); } } @keyframes lz-tick-y { from { transform: translateY(0); } to { transform: translateY(-160px); } } /* Мини-статусбар: «координата» скролла и фиктивный зум (JS обновляет textContent). */ .lz-statusbar { position: fixed; right: 14px; bottom: 14px; z-index: 40; font-family: var(--font-mono); font-size: 11px; color: var(--t3); background: var(--surf2); border: 1px solid var(--bd); border-radius: 8px; padding: 5px 10px; backdrop-filter: blur(8px); pointer-events: none; } /* ── Фантомные коллабораторы (#5) ─────────────────────────────── Слой поверх страницы, не перехватывает клики (pointer-events:none), aria-hidden. */ .lz-ghost-layer { position: fixed; inset: 0; z-index: 55; pointer-events: none; opacity: 0; transition: opacity .25s ease; } .lz-ghost { position: absolute; left: 0; top: 0; opacity: 0; display: flex; align-items: flex-start; gap: 3px; transform: translate(-200px, -200px); will-change: transform, opacity; } .lz-ghost svg { display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); } .lz-ghost .lz-ghost-name { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: #fff; padding: 2px 7px; border-radius: 0 9px 9px 9px; white-space: nowrap; background: var(--ghost-color); transform: translateY(1px); } /* Верхняя метка Алёны — печатающийся текст-«комментарий» над курсором. Правый край закреплён у курсора, текст растёт ВЛЕВО (в пустой отступ) — длинное сообщение не наезжает на Мишу справа. Пустая метка скрыта. */ .lz-ghost .lz-ghost-tag { position: absolute; bottom: 100%; right: -2px; margin-bottom: 6px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; color: #fff; padding: 2px 7px; border-radius: 8px 8px 2px 8px; white-space: nowrap; background: var(--ghost-color); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); pointer-events: none; } .lz-ghost .lz-ghost-tag:empty { display: none; } /* Верхняя реакция Миши — всплывающий эмодзи-бейдж над курсором (вправо). */ .lz-ghost .lz-react { position: absolute; bottom: 100%; right: -6px; margin-bottom: 6px; width: 24px; height: 24px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 14px; line-height: 1; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); opacity: 0; transform: scale(0); transform-origin: right bottom; will-change: transform, opacity; pointer-events: none; } /* Облёт периметра: метки смотрят НАРУЖУ от карточки (JS ставит классы по грани) — на нижней грани уходят под курсор, на правой растут вправо → не наезжают на текст. */ .lz-ghost.lz-lbl-below .lz-ghost-tag, .lz-ghost.lz-lbl-below .lz-react { bottom: auto; top: 100%; margin-bottom: 0; margin-top: 6px; } .lz-ghost.lz-lbl-right .lz-ghost-tag { right: auto; left: -2px; } .lz-ghost.lz-lbl-right .lz-react { right: auto; left: -6px; transform-origin: left bottom; } /* ── #6 Декоративные слои hero не перехватывают мышь ───────────── sel-box/sel-dim/snap-guide лежат поверх заголовка (z-index 5–6) и мешали выделять текст. Гасим их для мыши; сами слова (.lz-draw) остаются выделяемыми. */ .hero .sel-box, .hero .sel-dim, .hero .snap-guide { pointer-events: none; } /* ── #7 Hover = рамка выделения редактора ─────────────────────── Только opacity/box-shadow, без transform (кнопка/карточка неподвижны). */ /* Кнопки: рамка через ::after (opacity 120мс, pointer-events:none, inset:-4px). */ .btn { position: relative; } .btn::after { content: ''; position: absolute; inset: -4px; pointer-events: none; z-index: 1; border: 1.5px solid var(--brand-violet); border-radius: 14px; opacity: 0; transition: opacity .12s ease; } .btn:hover::after { opacity: 1; } .btn:active { box-shadow: inset 0 0 0 2px var(--brand-violet); } /* нажатие — толще, мгновенно */ /* Строки таблицы (нет overflow) — рамка через ::before. */ .cmp-row { position: relative; } .cmp-row::before { content: ''; position: absolute; inset: -2px -6px; pointer-events: none; z-index: 1; border: 1.5px solid var(--brand-violet); border-radius: 7px; opacity: 0; transition: opacity .12s ease; } .cmp-row:hover::before { opacity: 1; } /* Карточки .feat.card-spot: overflow:hidden обрезает рамку за краем, а ::before занят spot-подсветкой (.card-spot). Рамку даём box-shadow (собственный overflow его не режет), 4 ручки — ::after ВНУТРИ углов (не обрезаются). Никаких рамок по scroll. */ .feat { position: relative; transition: box-shadow .12s ease, border-color .12s ease; } .feat:hover { box-shadow: 0 0 0 1.5px var(--brand-violet); } .feat::after { content: ''; position: absolute; inset: 5px; pointer-events: none; z-index: 3; opacity: 0; transition: opacity .12s ease; background: linear-gradient(var(--brand-violet), var(--brand-violet)) 0 0 / 6px 6px no-repeat, linear-gradient(var(--brand-violet), var(--brand-violet)) 100% 0 / 6px 6px no-repeat, linear-gradient(var(--brand-violet), var(--brand-violet)) 0 100% / 6px 6px no-repeat, linear-gradient(var(--brand-violet), var(--brand-violet)) 100% 100% / 6px 6px no-repeat; } .feat:hover::after { opacity: 1; } /* ── #8 Таблица сравнения: анимация входа ─────────────────────── Минусы «Зарубежных» перечёркиваются линией (stroke-dashoffset), плюсы Rugma подсвечиваются галочкой (scale). Запуск один раз при входе секции (JS-класс). */ .cmp-strike { position: absolute; left: -2px; right: -2px; top: 50%; height: 2px; overflow: visible; pointer-events: none; } .cmp-strike line { stroke: var(--t3); stroke-width: 2; } .cmp-card.us.lz-cmp-in .m { display: inline-block; animation: lz-check-pop .3s ease-out both; } @keyframes lz-check-pop { from { transform: scale(0); } to { transform: scale(1); } } /* ── #9 Секция инженерии: статусбар редактора ──────────────────── Факты из стека в моно-формате с мигающей кареткой (только opacity в steps). */ .lz-eng-status { font-family: var(--font-mono); font-size: 13px; color: var(--t3); text-align: center; margin: 0 auto 22px; letter-spacing: .3px; } .lz-caret { display: inline-block; width: 8px; height: 15px; margin-left: 4px; vertical-align: -2px; background: var(--brand-violet); } .lz-anim .lz-caret, .lz-static .lz-caret { animation: lz-blink 1.1s steps(1) infinite; } @keyframes lz-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } .lz-reduced .lz-caret { animation: none; opacity: 1; } /* Мобайл: все эффекты кроме рисующегося заголовка выключены (ТЗ п.5). Линеек/рамок нет, параллакса и zoom-in нет — статичная раскладка. */ @media (max-width: 767px) { .lz-ruler, .lz-statusbar { display: none; } .lz-frame::after, .lz-frame::before { display: none; } .lz-frame, .bg-grid, .lz-ruler .lz-ticks { animation: none !important; transform: none !important; opacity: 1 !important; } } /* ── PROMPT_12: строка импорта .fig под hero-CTA ───────────────── Приглушённый тон (уровень hero-trust), ссылка на редактор, перенос на мобильном — не обрезается. Только цвет, без layout-анимаций. */ .hero-fig { display: block; max-width: 640px; margin: 20px auto 0; text-align: center; font-size: 14px; line-height: 1.5; color: var(--t3); text-decoration: none; transition: color .15s ease; } .hero-fig:hover { color: var(--text); } .hero-fig b { color: var(--text); font-weight: 600; } /* ── PROMPT_12: лента «И ещё» под карточками фич ───────────────── Легче карточек. Сетка (десктоп 3 → 2 ряда, планшет 2, мобайл 1) — подписи длинные, в одну строку без обрезки не помещаются. Hover — тот же приём рамки, что у .feat/кнопок (box-shadow), без нового. */ .feat-more { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; } .fm-item { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; padding: 12px 14px; border: 1px solid var(--bd); border-radius: 12px; text-decoration: none; color: var(--text); transition: box-shadow .12s ease, border-color .12s ease; } .fm-item:hover { box-shadow: 0 0 0 1.5px var(--brand-violet); } .fm-item .fm-ic { font-size: 16px; } .fm-item b { font-weight: 600; } .fm-item .fm-t { color: var(--t3); font-size: 13px; line-height: 1.4; flex-basis: 100%; } @media (min-width: 768px) and (max-width: 1199px) { .feat-more { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .feat-more { grid-template-columns: 1fr; } }