/* ============================================ BASE – reset, typography, layout primitives ============================================ */ /* ──────── RESET ──────── */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { font-size: 16px; line-height: 1.5; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; hanging-punctuation: first last; /* Страховка: если какой-то блок (карусель отзывов с отрицательным margin-inline, широкий placeholder и т.п.) случайно «вылезет» за viewport, не возникнет горизонтального скролла страницы. clip предпочтительнее hidden — не ломает position: sticky у header. */ overflow-x: clip; } body { min-height: 100vh; font-family: var(--font-sans); font-weight: 400; color: var(--color-ink); background: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; } /* Блокировка вертикального скролла при открытом бургер-меню или модалке. Класс ставится JS'ом на , а не на , потому что body.overflow: hidden ломает position: sticky у .header на iOS Safari и мобильном Chrome — sticky перестаёт прилипать, header исчезает, бургер-иконка пропадает, из меню не выйти. */ html.is-locked { overflow-y: hidden; } img, picture, video, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; } a { color: inherit; text-decoration: none; } /* ──────── TOUCH ──────── */ /* Глобально отключаем double-tap-zoom на всех интерактивных элементах. Причина: быстрый двойной тап на мобиле (например, по стрелкам листания отзывов или по логотипу) запускал приближение страницы — потом появлялся горизонтальный скролл, и сайт «уходил влево». Плюс браузер ждал 300мс после каждого тапа, проверяя не будет ли двойного — кнопки «тормозили». `manipulation` разрешает pan и pinch-zoom (двумя пальцами — для accessibility), но убирает double-tap-zoom и 300мс delay. */ a, button, input, select, textarea, summary, [role="button"], [data-modal-open], [data-modal-close] { touch-action: manipulation; } ul, ol { list-style: none; padding: 0; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } /* ──────── FOCUS ──────── */ :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 2px; } /* ──────── TYPOGRAPHY SCALE ──────── */ /* Заголовки — современный sans, tight-spacing, premium-modern (Apple / Linear / Vercel style) */ .h-display { font-family: var(--font-sans); font-size: clamp(2.75rem, 7vw, 5.25rem); line-height: 0.98; letter-spacing: -0.045em; font-weight: 600; } .h1 { font-family: var(--font-sans); font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: 600; } /* Акцент внутри заголовка: тот же шрифт, но лаймовый цвет. Никакого italic — строго, чисто, современно. */ .h-display em, .h1 em { font-family: inherit; font-style: normal; font-weight: 600; color: var(--color-accent); } .section--light .h-display em, .section--light .h1 em { color: var(--color-ink-light); } .h2 { font-family: var(--font-sans); font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.1; letter-spacing: -0.013em; font-weight: 500; } .h3 { font-family: var(--font-sans); font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.25; letter-spacing: -0.005em; font-weight: 500; } .lead { font-size: clamp(1rem, 1.4vw, 1.25rem); line-height: 1.45; letter-spacing: -0.003em; color: var(--color-ink-muted); } .text { font-size: 0.9375rem; line-height: 1.55; color: var(--color-ink-muted); } .text-sm { font-size: 0.8125rem; line-height: 1.5; color: var(--color-ink-muted); } .caption { font-size: 0.75rem; line-height: 1.4; color: var(--color-ink-dim); } .mono { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-muted); } /* ──────── CONTAINER ──────── */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-padding-mobile); } @media (min-width: 768px) { .container { padding-inline: var(--container-padding-tablet); } } @media (min-width: 1280px) { .container { padding-inline: var(--container-padding-desktop); } } /* ──────── SECTION ──────── */ .section { padding-block: var(--space-8); position: relative; } @media (min-width: 768px) { .section { padding-block: var(--space-9); } } @media (min-width: 1280px) { .section { padding-block: var(--space-10); } } .section--dark { background: var(--color-bg); color: var(--color-ink); } .section--elev { background: var(--color-bg-elev); color: var(--color-ink); } .section--light { background: var(--color-bg-light); color: var(--color-ink-light); } .section--light .text, .section--light .lead { color: var(--color-ink-light-muted); } .section--light .mono { color: var(--color-ink-light-muted); } /* Наезжающая скруглённая секция (главный фирменный приём). ВАЖНО: margin-top == radius, иначе по бокам скругления будут видны «заусенцы» body-фона (между верхом скругления и границей предыдущей секции). */ .section--rounded { border-top-left-radius: 32px; border-top-right-radius: 32px; margin-top: -32px; position: relative; z-index: 1; box-shadow: var(--shadow-section-top); } @media (min-width: 768px) { .section--rounded { border-top-left-radius: 48px; border-top-right-radius: 48px; margin-top: -48px; } } @media (min-width: 1024px) { .section--rounded { border-top-left-radius: var(--radius-section); border-top-right-radius: var(--radius-section); margin-top: calc(-1 * var(--radius-section)); } } .section-head { margin-bottom: var(--space-7); } .section-head__sub { max-width: 640px; } /* ──────── COLORS / SECTION OVERRIDES ──────── */ .section--light .eyebrow { color: var(--color-ink-light-muted); } .section--light .lead { color: var(--color-ink-light-muted); } /* ──────── UTILS ──────── */ .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; } .mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); } .mt-6 { margin-top: var(--space-6); } .mt-7 { margin-top: var(--space-7); } .mt-8 { margin-top: var(--space-8); } .nowrap { white-space: nowrap; } /* Переносы строк под конкретный брейкпоинт */ /* .br-desk — только на широких десктопах (≥1280px, 5-колоночная сетка сегментов) */ .br-desk { display: none; } @media (min-width: 1280px) { .br-desk { display: inline; } } /* .br-lap — от ноутбучной ширины (≥1024px): ноутбуки и десктопы */ .br-lap { display: none; } @media (min-width: 1024px) { .br-lap { display: inline; } } /* .br-mob — только на мобильном (<768px). Инвертированная логика: mobile-first inline, от планшета и выше скрываем. */ .br-mob { display: inline; } @media (min-width: 768px) { .br-mob { display: none; } } .accent { color: var(--color-accent); } /* ──────── SKIP LINK ──────── */ .skip-link { position: absolute; top: -40px; left: 8px; z-index: 1000; padding: 8px 16px; background: var(--color-accent); color: #0E0F0D; border-radius: var(--radius-sm); font-weight: 500; transition: top var(--transition-fast); } .skip-link:focus { top: 8px; } /* ──────── MOTION ──────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }