/* ============================================================ base.css — глобальные основы Подключается после tokens.css, до components.css и blocks.css ============================================================ */ /* ────────────────────────────────────────── Reset (минимальный, без normalize-overkill) ────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } ul, ol, p, h1, h2, h3, h4, h5, h6, figure { margin: 0; padding: 0; } ul, ol { list-style: none; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; } img, svg, video { display: block; max-width: 100%; height: auto; } input, textarea, select, button { font: inherit; color: inherit; } /* ────────────────────────────────────────── и — фон, шрифт, плавный скролл ────────────────────────────────────────── */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; /* картинки шире viewport не должны давать гориз. скролл */ } body { overflow-x: hidden; } /* Типографика: предотвращаем висящие предлоги и одинокие слова на строке. text-wrap: pretty — подбирает разрывы для body, исключая coro-orphans. text-wrap: balance — равномерно распределяет короткие заголовки. */ p, li, blockquote { text-wrap: pretty; hyphens: manual; } h1, h2, h3, h4, h5, h6 { text-wrap: balance; } body { font-family: var(--font-body); font-size: var(--body-size); line-height: var(--body-lh); color: var(--card); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; background: radial-gradient(ellipse 90% 60% at 50% 0%, var(--bg-3) 0%, transparent 55%), radial-gradient(ellipse 80% 70% at 20% 100%, var(--bg-2) 0%, transparent 60%), radial-gradient(ellipse 70% 60% at 100% 80%, var(--bg-3) 0%, transparent 55%), var(--bg-1); background-attachment: fixed; } /* ────────────────────────────────────────── Page wrapper — основная колонка контента Mobile-first: одна колонка, padding по бокам На desktop: фиксированная ширина по центру ────────────────────────────────────────── */ .page { width: 100%; max-width: 100%; margin: 0 auto; padding-left: var(--page-padding-x); padding-right: var(--page-padding-x); padding-top: var(--page-padding-top); padding-bottom: 0; /* footer идёт впритык к последнему блоку */ } /* Tablet: чуть просторнее */ @media (min-width: 700px) { .page { padding-left: 32px; padding-right: 32px; } } /* Desktop: контент по центру, фиксированная ширина */ @media (min-width: 1024px) { .page { max-width: 720px; } } /* ────────────────────────────────────────── Section — каждый блок сайта Между блоками — отступ --block-gap ────────────────────────────────────────── */ .section { padding-top: var(--block-gap); padding-bottom: var(--block-gap); } .section + .section { padding-top: 0; /* избегаем двойного отступа между соседними секциями */ } /* ────────────────────────────────────────── Базовые типографические утилиты ────────────────────────────────────────── */ .h1-hero { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--h1-hero-size); line-height: var(--h1-hero-lh); letter-spacing: var(--h1-hero-ls); color: var(--card); } .h1-section { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--h1-section-size); line-height: var(--h1-section-lh); color: var(--card); } .h2-card { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--h2-card-size); line-height: var(--h2-card-lh); letter-spacing: var(--h2-card-ls); } .h3-num { font-family: var(--font-display); font-weight: var(--fw-regular); font-style: italic; font-size: var(--h3-num-size); color: var(--accent-2); } .body { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--body-size); line-height: var(--body-lh); color: var(--on-dark); } .body-sm { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--body-sm-size); line-height: var(--body-sm-lh); color: var(--on-dark); } .eyebrow { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--eyebrow-size); letter-spacing: var(--eyebrow-ls); text-transform: uppercase; color: var(--lilac); } .caption { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--caption-size); letter-spacing: var(--caption-ls); text-transform: uppercase; color: var(--on-dark-faint); } .script { font-family: var(--font-script); font-weight: var(--fw-regular); font-size: var(--script-size); line-height: var(--script-lh); color: var(--accent-2); } /* Italic-акцент в заголовках (например, «Дизайн Человека» с курсивным «Человека») */ .h1-hero em, .h1-section em, .h2-card em { font-style: italic; font-weight: var(--fw-regular); color: var(--lilac); } /* ────────────────────────────────────────── Утилиты доступа ────────────────────────────────────────── */ .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; } /* Минимум 44px тап-зона для интерактивных элементов на мобилке */ @media (pointer: coarse) { button, a.btn, label.tap, input[type="checkbox"] + label { min-height: 44px; } }