/* ============================================================================ base.css — ЗАТВЕРДЕВШАЯ БОЛВАНКА web-модулей (Гейт А, ветка «Формирование web-модулей») ---------------------------------------------------------------------------- Назначение: КАЖДЫЙ новый проект/модуль начинается С КОПИИ этого файла, а не с нуля. Здесь по построению зашиты ВСЕ классы ошибок, накопленные на Steit/Dipaul/RVS (см. _methodology/review-logic.md, раздел 2). Если проект собран от base.css — соответствующий класс физически не может повториться. Как пользоваться: 1. Скопировать base.css в проект (output//dist/css/). 2. Заполнить блок ТОКЕНЫ ПРОЕКТА цветами/шрифтом из Figma (только значения). 3. Верстать блоки, ОБЯЗАТЕЛЬНО переопределяя adaptive-долги (см. ПАТТЕРНЫ ниже). 4. Перед показом — Гейт Б: node scripts/verify-module.js (+ class-traps). BASELINE выбирается ОДИН раз на проект: 1920 ИЛИ 1440. Здесь — 1920. px→rem при baseline 1920: rem = px / 16. ============================================================================ */ /* Порядок каскадных слоёв: `base` — самый нижний (резет-этаж). Любое неслоёное правило (компоненты, страницы, chrome) выигрывает у него независимо от специфичности. */ @layer base; main{padding-bottom: 170px} /* --- FLUID SCALING (класс: «fluid не включён / pixel-перевёрстка») --------- */ html { font-size: clamp(10.67px, calc(100vw / 1920 * 16), 16px); } /* 1440 → clamp(10.67px, calc(100vw/1440*16), 16px) */ @media (max-width: 1000px) { html { font-size: 16px; } } /* ниже 1280 — fixed px по кадрам адаптивов дизайнера */ @media (max-width: 1000px) { body.wm { margin: 0; } } /* сброс дефолтного body margin (крал 16px ширины на узком); десктоп НЕ трогаем — он верифицирован с ним */ @media (max-width: 1000px) { main{padding-bottom: 100px} } /* --- УНИВЕРСАЛЬНЫЕ СБРОСЫ + (класс: «шрифт не antialiased») ----------------- */ /* @layer base (реестр #30, утв. 07-10): резеты-носители селектора `.wm ` имеют специфичность (0,1,1) и МОЛЧА бьют однокласс-стили компонентов (0,1,0) — так серый `.wm a{color:inherit}` перебивал белый `.spec__tab--active{color:#fff}` и `.u-header__cta{color:#fff}` (класс «починил случай, не класс», р3 Уролесана). Оборачивание в @layer base ставит ВЕСЬ резет-этаж НИЖЕ любого неслоёного правила независимо от специфичности → одноклассовые стили компонентов выигрывают всегда. Существующие `.wm`-префиксы страниц (0,2,0, неслоёные) продолжают работать. */ @layer base { .wm, .wm * , .wm *::before, .wm *::after { box-sizing: border-box; } .wm { -webkit-font-smoothing: antialiased; /* обязателен — иначе текст толще Figma */ -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-family: var(--wm-font); color: var(--wm-ink); background: var(--wm-bg); } .wm h1, .wm h2, .wm h3, .wm p, .wm ul, .wm ol, .wm figure { margin: 0; } .wm ul, .wm ol { padding: 0; list-style-position: inside; } .wm img { display: block; max-width: 100%; } /* от пайплайна optimize-images.js: display:contents убирает inline-обёртку, чтобы img.height:100% по-прежнему мерил фикс-высоту КОНТЕЙНЕРА, а не схлопывался (класс «picture схлопнул фото-филл», разбор Ires 06-26). */ .wm picture { display: contents; } .wm button { font-family: inherit; cursor: pointer; } .wm a { color: inherit; } } /* СЕМАНТИЧЕСКИЙ СКЕЛЕТ ПО УМОЛЧАНИЮ (предотвращение классов S1–S6, Консилиум 06-21, P4): • контакты — ВСЕГДА ссылки: телефон , email (визуально нейтрально ниже) • действия —