/* Доп-стили лендинга: то, что в React было на Framer Motion / GSAP, * а теперь воспроизводится на CSS + лёгком vanilla JS. * Основной визуал приходит из landing.compiled.css (сборка Tailwind v4). */ /* ─── Reveal при скролле (замена Framer Motion FadeUp) ─────────────── */ /* ВАЖНО: контент виден ВСЕГДА и не зависит от JavaScript. * Раньше блоки стартовали с opacity:0 и «проявлялись» скриптом при скролле. * Минус: в тяжёлых браузерах (расширения/прокси) JS стартует с задержкой → * пустой экран, пока он не отработал. Теперь показ не завязан на JS вообще: * страница всегда отрисована мгновенно, пустого экрана быть не может. * * Лёгкое «всплытие» оставляем ТОЛЬКО как бонус и ТОЛЬКО когда JS точно готов: * скрипт вешает на класс .js-reveal и лишь тогда включается анимация. * Если JS не сработал/тормозит — контент просто виден, без анимации. */ [data-reveal] { opacity: 1; transform: none; } .js-reveal [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .js-reveal [data-reveal].revealed { opacity: 1; transform: none; } .js-reveal [data-reveal-delay="1"] { transition-delay: 0.1s; } .js-reveal [data-reveal-delay="2"] { transition-delay: 0.2s; } .js-reveal [data-reveal-delay="3"] { transition-delay: 0.3s; } .js-reveal [data-reveal-delay="4"] { transition-delay: 0.4s; } .js-reveal [data-reveal-delay="5"] { transition-delay: 0.5s; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; } .marquee-track, .book-float, .badge-spin { animation: none !important; } } /* ─── Бегущая строка (Marquee) ────────────────────────────────────── */ .marquee-mask { overflow: hidden; white-space: nowrap; } .marquee-track { display: inline-flex; align-items: center; white-space: nowrap; animation: marquee-scroll 80s linear infinite; } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ─── Плавающая книга (замена motion animate y) ───────────────────── */ .book-float { animation: book-float 6s ease-in-out infinite; } @keyframes book-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } } /* Вращение бейджа «Клуб» (arbitrary animate-[spin] иногда не попадает) */ .badge-spin { animation: spin 15s linear infinite; } /* ─── Модальное окно чекаута ──────────────────────────────────────── */ .checkout-modal { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; padding: 1rem; } .checkout-modal.open { display: flex; } .checkout-modal__backdrop { position: absolute; inset: 0; background: rgba(19, 26, 43, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; transition: opacity 0.3s ease; } .checkout-modal.open .checkout-modal__backdrop { opacity: 1; } .checkout-modal__panel { position: relative; width: 100%; max-width: 28rem; z-index: 10; opacity: 0; transform: translateY(20px) scale(0.97); transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .checkout-modal.open .checkout-modal__panel { opacity: 1; transform: none; } body.modal-locked { overflow: hidden; } /* ─── Разворачивающийся текст («Читать полностью») ────────────────── */ .expandable { overflow: hidden; position: relative; transition: max-height 0.7s ease-in-out; } .expandable__fade { position: absolute; bottom: 0; left: 0; right: 0; height: 6rem; background: linear-gradient(to top, rgba(19, 26, 43, 0.9), transparent); pointer-events: none; transition: opacity 0.3s; } .expandable.is-open .expandable__fade { opacity: 0; } /* Зерно шума — родное из Google AI Studio (compiled CSS): opacity .04, * baseFrequency 0.65, тайл рендерится в натуральную величину без растяжения. * Свой override убран: он растягивал тайл 200px→440px (получалась «сетка») и * поднимал opacity до .13 (сайт бледнел). Хочешь чуть виднее/крупнее — трогаем * opacity и baseFrequency в .noise-bg, но НЕ background-size. */ /* Bento «Почему работает»: карточки в ряду — одинаковой высоты (grid stretch * по умолчанию). Чтобы у более «коротких» карточек не было разрыва внутри, * прижимаем их контент к верху, а «Историю» заставляем ЗАПОЛНИТЬ высоту под * соседний «Бензин»: текст обрезается по доступной высоте, «Читать полностью» * открывает остаток. Классы md:justify-start и т.п. из compiled CSS не пришли, * поэтому задаём поведение своим CSS. Только для десктопа (≥768px). */ @media (min-width: 768px) { /* Карточки в ряду — одинаковой высоты (grid stretch по умолчанию), а их содержимое прижато к верху. Так блоки ровные, без разрывов посередине; у карточки с меньшим текстом просто чуть больше воздуха снизу. */ .bento-why > * { justify-content: flex-start; } } /* Утилита flex-grow не попала в скомпилированный Tailwind (её не было в * исходном React-лендинге). Нужна для «липкого» футера: контент растягивается, * футер прижимается к низу экрана на коротких страницах (success/fail/404). */ .flex-grow { flex-grow: 1; } /* ─── Юридические страницы (оферта / политика) ─────────────────────── * В compiled CSS есть базовое правило h1..h6 → font-display (Playfair). * Для номеров разделов это смотрится тяжело — переводим заголовки разделов * на обычный шрифт (Inter). Крупный титул страницы (у него свой класс * .font-display) остаётся Playfair. Плюс — аккуратная типографика текста. */ .legal-prose h2 { font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; font-size: 1.2rem; font-weight: 700; color: #fff; margin-top: 2.5rem; margin-bottom: 0.75rem; } .legal-prose h3 { font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; font-size: 1.05rem; font-weight: 600; color: rgba(255, 255, 255, 0.95); margin-top: 1.75rem; margin-bottom: 0.5rem; } .legal-prose p { color: rgba(255, 255, 255, 0.72); line-height: 1.75; margin-bottom: 0.85rem; } .legal-prose ul { list-style: disc; padding-left: 1.35rem; margin: 0.5rem 0 1.1rem; color: rgba(255, 255, 255, 0.72); } .legal-prose li { line-height: 1.7; margin-bottom: 0.35rem; } .legal-prose strong { color: #fff; font-weight: 600; } .legal-prose a { color: var(--color-brand-accent); text-decoration: underline; } .legal-prose .muted { color: rgba(255, 255, 255, 0.55); } /* Кнопка чекаута в состоянии disabled — как в ShinyButton */ button[type="submit"]:disabled { background: rgba(90, 106, 133, 0.4); color: rgba(255, 255, 255, 0.5); box-shadow: none; cursor: not-allowed; }