/* ============================================================ base.css — reset, глобальная типографика, утилиты раскладки. Компонентные стили — в components.css, токены — в tokens.css. ============================================================ */ * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; overflow-x: clip; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; } /* --- контейнер --- */ .wrap { max-width: 1060px; margin: 0 auto; padding: 0 24px; } /* --- заголовки и подводки --- */ h1 { font-family: var(--display); font-weight: 700; font-size: clamp(42px, 11vw, 96px); line-height: .92; letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; margin: 0; } h2 { font-family: var(--display); font-weight: 700; font-size: clamp(34px, 5vw, 54px); line-height: 1; text-transform: uppercase; letter-spacing: .015em; text-wrap: balance; margin: 0; } .eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } .sec-lede { color: var(--muted); max-width: 62ch; margin: 0; } /* --- секции --- */ .section { border-top: 1px solid var(--line); } .section .wrap { padding-top: 72px; padding-bottom: 80px; } .sec-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 40px; } /* --- кнопка --- */ .btn { display: inline-block; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: .06em; text-transform: uppercase; background: var(--accent); color: var(--accent-ink); padding: 14px 28px; border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); transition: transform .12s ease, box-shadow .12s ease; } .btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); } .btn:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } /* --- scroll reveal --- Скрытие включается только при работающем JS (класс .js на ), иначе весь контент виден сразу — критично для урезанных WebView. */ .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; } .js .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .reveal { opacity: 1; transform: none; transition: none; } } @media (max-width: 640px) { .wrap { padding: 0 18px; } .section .wrap { padding-top: 52px; padding-bottom: 60px; } .sec-head { margin-bottom: 30px; } }