/* ============================================================================ base.css — сброс, типографика, layout-примитивы, кнопки, утилиты. Mobile-first: базовые правила — для телефона, медиа-запросы расширяют вверх. ============================================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; } /* --- Обязательный CSS Lenis --- БЕЗ него нативный scroll-behavior дерётся с инерцией Lenis → скролл «залипает», медленно реагирует на колесо. Класс .lenis-smooth Lenis вешает на сам. */ html.lenis, html.lenis body { height: auto; } /* ВАЖНО: эта версия Lenis вешает класс `lenis` (без `lenis-smooth`), поэтому гасим нативный smooth именно по `.lenis` — иначе он дерётся с инерцией. */ html.lenis { scroll-behavior: auto !important; } .lenis [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis iframe { pointer-events: none; } /* Плавный якорный скролл только когда Lenis выключен (reduced-motion) */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: smooth; } } body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; /* страховка от горизонтального скролла */ /* отступ снизу под mobile sticky-бар, чтобы он не перекрывал контент */ padding-bottom: env(safe-area-inset-bottom); } @media (max-width: 768px) { body { padding-bottom: calc(var(--mobilebar-h) + env(safe-area-inset-bottom)); } } img, video, canvas, svg { display: block; max-width: 100%; } /* picture как обёртка AVIF+WebP — прозрачна для layout, ведёт себя как прямой потомок */ picture { display: contents; } /* hidden обязан скрывать: явный display в компонентах (.thanks{display:grid}) иначе перебивает атрибут [hidden], и экран «Готово» виден до отправки формы */ [hidden] { display: none !important; } img, video { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; } ul { list-style: none; padding: 0; } :focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); } /* --- Типографика --- */ h1, h2, h3 { font-family: var(--font-head); line-height: var(--lh-head); letter-spacing: var(--tracking-head); font-weight: 800; } h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); text-transform: uppercase; font-weight: 900; } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); font-weight: 700; } p { color: var(--ink); } strong { color: var(--ink); font-weight: 700; } .lead { font-size: var(--fs-lead); color: var(--ink-muted); line-height: 1.5; } .muted { color: var(--ink-muted); } .tabular { font-variant-numeric: tabular-nums; } /* --- Layout --- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-pad); position: relative; } .section--tight { padding-block: clamp(48px, 8vw, 80px); } .stack > * + * { margin-top: var(--space-4); } .eyebrow { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .12em; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-muted); display: inline-flex; align-items: center; gap: var(--space-2); } .eyebrow::before { content: ""; width: 28px; height: 3px; background: var(--brand-red); display: inline-block; } /* красный = идентичность */ .section-title { max-width: 22ch; } .section-intro { max-width: 60ch; margin-top: var(--space-4); } /* --- Кнопки --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 52px; padding: var(--space-3) var(--space-6); border-radius: var(--radius); font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; text-align: center; transition: background var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out), border-color var(--dur); -webkit-tap-highlight-color: transparent; touch-action: manipulation; /* убираем 300ms задержку тапа */ } .btn:active { transform: scale(.98); } .btn--primary { background: var(--cta); color: var(--cta-ink); box-shadow: 0 8px 24px -10px rgba(223,112,56,.6); } .btn--primary:hover { background: var(--cta-hover); } .btn--ghost { border: 1.5px solid var(--line); color: var(--ink); background: rgba(255,255,255,.02); } .btn--ghost:hover { border-color: var(--action); color: var(--action-hi); } .btn--block { width: 100%; } .btn--lg { min-height: 60px; font-size: 1.1rem; padding-inline: var(--space-7); } .btn[disabled] { opacity: .5; cursor: not-allowed; } .btn__spin { width: 18px; height: 18px; border: 2px solid rgba(0,0,0,.35); border-top-color: var(--cta-ink); border-radius: 50%; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* --- Чипы / бейджи / плашки --- */ .badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink-muted); } .badge svg { width: 16px; height: 16px; flex: none; } .badge--warn { background: rgba(255,178,0,.12); border-color: rgba(255,178,0,.4); color: var(--warn); } .badge--success { color: var(--success); } /* --- Карточка --- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-6); } /* --- Зебра-разделитель (фирменный мотив) --- */ .zebra-divider { height: 10px; background: var(--zebra-dark); opacity: .6; } /* --- Иконки (Lucide-стиль, stroke 2, без эмодзи) --- */ .icon { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; } .icon--accent { color: var(--action); } .icon--success { color: var(--success); } /* --- Утилиты --- */ .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; } .center { text-align: center; } .nowrap { white-space: nowrap; } .grid { display: grid; gap: var(--gutter); } @media (min-width: 768px) { .md\:cols-2 { grid-template-columns: repeat(2,1fr); } .md\:cols-3 { grid-template-columns: repeat(3,1fr); } } @media (min-width: 1024px) { .lg\:cols-3 { grid-template-columns: repeat(3,1fr); } .lg\:cols-4 { grid-template-columns: repeat(4,1fr); } } /* --- Reveal-анимации (на transform/opacity — GPU). Базово скрыто, .is-in показывает. --- */ [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); will-change: opacity, transform; } [data-reveal].is-in { opacity: 1; transform: none; } [data-reveal-stagger] > * { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } [data-reveal-stagger].is-in > * { opacity: 1; transform: none; } /* Reduced-motion: всё видно сразу, без сдвигов (доступность) */ @media (prefers-reduced-motion: reduce) { [data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; } .btn:active { transform: none; } }