/* ============================================================ MAT — Base styles (reset + typography + utilities) ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; } body { margin: 0; min-height: 100dvh; font-family: var(--font-sans); font-size: var(--fs-16); line-height: var(--lh-normal); font-weight: var(--fw-regular); color: var(--color-text); background: var(--color-bg); overflow-x: hidden; } img, svg, video, picture { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; } input, textarea, select { font: inherit; color: inherit; } ul, ol { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, h5, h6, p { margin: 0; } :focus-visible { outline: 2px solid var(--color-blue-700); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--color-blue-700); color: var(--color-white); } /* ---------- Layout primitives ---------- */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } .section { padding-block: var(--section-pad-y); } .section--soft { background: var(--color-bg-soft); } .section--dark { background: var(--color-blue-700); color: var(--color-white); } .section--white { background: var(--color-white); } /* ---------- Typography classes ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-12); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-blue-700); background: var(--color-blue-50); border-radius: var(--radius-pill); } .eyebrow--on-dark { color: var(--color-white); background: rgba(255, 255, 255, 0.12); } .h-display { font-size: clamp(var(--fs-40), 5.2vw, var(--fs-72)); font-weight: var(--fw-extrabold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); } .h1 { font-size: clamp(var(--fs-32), 4vw, var(--fs-56)); font-weight: var(--fw-extrabold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); } .h2 { font-size: clamp(var(--fs-28), 3vw, var(--fs-40)); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); } .h3 { font-size: var(--fs-24); font-weight: var(--fw-bold); line-height: var(--lh-snug); } .lead { font-size: var(--fs-18); line-height: var(--lh-relaxed); color: var(--color-text-muted); } .muted { color: var(--color-text-muted); } .accent { color: var(--color-accent); } .primary { color: var(--color-primary); } /* ---------- Visibility helpers ---------- */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (max-width: 768px) { .hide-mobile { display: none !important; } } @media (min-width: 769px) { .hide-desktop { display: none !important; } } /* ---------- Animations ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Progressive enhancement: .reveal стартует видимым, чтобы контент не пропадал при отключённом JS, медленном observer'е или fullPage-скриншоте. Анимация включается только когда JS успешно навесил класс .js-reveal на . */ .reveal { opacity: 1; transform: none; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .js-reveal .reveal { opacity: 0; transform: translateY(24px); will-change: opacity, transform; } .js-reveal .reveal.is-visible { opacity: 1; transform: none; }