/* Токены главной MWB. «Тёплая пастель»: кремовый, персик, мята, графит, один коралловый акцент. Все цвета, радиусы, отступы и размеры шрифтов живут тут, в компонентах только var(--...). */ :root { /* Поверхности */ --c-bg: #FFF8F0; /* кремовый фон страницы */ --c-bg-2: #FCEEE0; /* чуть темнее, для чередования секций */ --c-surface: #FFFFFF; --c-peach: #FFD9C4; /* персик, мягкие пятна и капсулы */ --c-peach-2: #FFC2A3; /* персик насыщеннее, только в градиентах */ --c-coral: #F2785C; /* коралл для декора (не для текста и не для кнопок) */ --c-mint: #CFEBDD; /* мята, вторичные капсулы и пометки */ --c-mint-ink: #1F5E49; /* текст на мяте, контраст около 6:1 */ /* Текст */ --c-ink: #2A2623; /* графит, основной текст, около 14:1 на кремовом */ --c-ink-2: #5C534D; /* вторичный, около 7:1 */ --c-ink-3: #756A63; /* мелкие подписи, не ниже 4.5:1 на кремовом */ /* Единственный акцент: кнопки и ссылки */ --c-accent: #C8432B; /* кнопка, белый текст на нём даёт около 4.9:1 */ --c-accent-hover: #AE3520; --c-accent-ink: #FFFFFF; --c-link: #B23820; /* ссылки на кремовом, около 5.6:1 */ /* Пастельные карточки: у каждой свой тон, текст везде графитовый */ --card-1: #FFDCC8; /* персик */ --card-2: #D3EEE0; /* мята */ --card-3: #FBEBB5; /* масляно-жёлтый */ --card-4: #FFCDBF; /* светлый коралл */ --card-5: #E6E0F2; /* сиреневый нейтральный, единственный холодный */ --card-6: #F3E6D3; /* песочный */ /* Линии и стекло */ --c-line: rgba(42, 38, 35, 0.10); --c-glass: rgba(255, 255, 255, 0.58); --c-glass-strong: rgba(255, 255, 255, 0.78); --c-glass-border: rgba(190, 120, 90, 0.20); --c-focus: #1F5E49; /* Радиусы */ --r-s: 16px; --r-24: 24px; --r-40: 40px; --r-pill: 999px; /* Три ступени радиуса (LAYOUT-AUDIT 4.1): внутри карточки меньше, чем у карточки; крупные плашки и фото крупнее */ --r-inner: 1.25rem; /* 20: врезки внутри карточек, блоки аккордеона, вкладки на телефоне */ --r-card: 1.75rem; /* 28: карточки, тарифы, истории, строки аккордеона, вкладки howit */ --r-panel: 2.5rem; /* 40: крупные плашки: hero-plate, final__box, price-card, фото автора, строка фактов */ /* Отступы (шаг 4/8) */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --gutter: clamp(16px, 4vw, 40px); --section-y: var(--space-section); /* алиас: ритм секций 48 / 72 / 96 (шкала 06/10/2026) */ --container: 1320px; --header-h: 68px; /* Тени: вместо тяжёлых внешних, inset-свет */ --inset-glass: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -16px 28px -20px rgba(200, 90, 60, 0.20); --shadow-btn: 0 10px 22px -12px rgba(200, 67, 43, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.25); --shadow-lift: 0 18px 34px -22px rgba(120, 60, 40, 0.35); /* Шрифт: Manrope (assets/css/fonts.css, свои woff2 с кириллицей) с подогнанным запасным шрифтом, стек в --ty-f-sans */ --f-sans: var(--ty-f-sans); /* Размеры: алиасы старых имён на шкалу --ty-* (06/10/2026). Нужны, пока home.css (ведёт сессия mwb) читает --fs-small, --fs-h2 и т.п. Новый код пишет --ty-*; список мест для замены на главной: docs/HOME-CONFLICTS.md */ --fs-h1: var(--ty-h1); --fs-h2: var(--ty-h2); --fs-h3: var(--ty-h3); --fs-lead: var(--ty-lead); --fs-body: var(--ty-body); --fs-small: var(--ty-small); --fs-stat: var(--ty-num-m); --fs-price: var(--ty-num-l); --lh-tight: var(--ty-h1-lh); --lh-head: var(--ty-h2-lh); --lh-body: var(--ty-body-lh); /* Движение */ --t-fast: 0.2s ease; --t-base: 0.3s ease; } /* ========================================================================================== Шкала типографики и отступов (06/10/2026), применена на этапе 2 во всех CSS, кроме home.css. Источник: docs/TYPE-SCALE-PROPOSAL.md, раздел 2-4; план замен: docs/STAGE2-APPLY-PLAN.md. Префикс --ty- у типографики, потому что --fs-h1/h2/h3/lead и --lh-body уже заняты старыми значениями (их менять нельзя до решения по переходу home на шкалу). Отступы и размеры блоков без префикса: этих имён в CSS не было (проверено Grep 06/10/2026). Размеры fluid от 360 до 1440 px: clamp(мин, a + b*vw, макс), a и b посчитаны линейной интерполяцией. ========================================================================================== */ :root { /* Шрифт: стек под Manrope (файлы и запасные грани в assets/css/fonts.css, подключён в head_links.html), --f-sans ссылается сюда */ --ty-f-sans: "Manrope", "Manrope Fallback Segoe", "Manrope Fallback Arial", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, "Noto Sans", Arial, sans-serif; /* Размеры: мин на 360 px, макс на 1440 px, fluid посередине */ --ty-h1-min: 2rem; --ty-h1-fluid: 1.5rem + 2.222vw; --ty-h1-max: 3.5rem; /* 32 -> 56 */ --ty-h2-min: 1.625rem; --ty-h2-fluid: 1.333rem + 1.296vw; --ty-h2-max: 2.5rem; /* 26 -> 40 */ --ty-h3-min: 1.375rem; --ty-h3-fluid: 1.25rem + 0.556vw; --ty-h3-max: 1.75rem; /* 22 -> 28 */ --ty-h4-min: 1.0625rem; --ty-h4-fluid: 1rem + 0.278vw; --ty-h4-max: 1.25rem; /* 17 -> 20 */ --ty-lead-min: 1.125rem; --ty-lead-fluid: 1.042rem + 0.37vw; --ty-lead-max: 1.375rem; /* 18 -> 22 */ --ty-num-l-min: 2rem; --ty-num-l-fluid: 1.667rem + 1.481vw; --ty-num-l-max: 3rem; /* цена тарифа 32 -> 48 */ --ty-num-m-min: 1.5rem; --ty-num-m-fluid: 1.333rem + 0.741vw; --ty-num-m-max: 2rem; /* значение факта 24 -> 32 */ --ty-num-s-min: 1.75rem; --ty-num-s-fluid: 1.583rem + 0.741vw; --ty-num-s-max: 2.25rem; /* номер недели, шага 28 -> 36 */ --ty-h1: clamp(var(--ty-h1-min), var(--ty-h1-fluid), var(--ty-h1-max)); --ty-h2: clamp(var(--ty-h2-min), var(--ty-h2-fluid), var(--ty-h2-max)); --ty-h3: clamp(var(--ty-h3-min), var(--ty-h3-fluid), var(--ty-h3-max)); --ty-h4: clamp(var(--ty-h4-min), var(--ty-h4-fluid), var(--ty-h4-max)); --ty-lead: clamp(var(--ty-lead-min), var(--ty-lead-fluid), var(--ty-lead-max)); --ty-num-l: clamp(var(--ty-num-l-min), var(--ty-num-l-fluid), var(--ty-num-l-max)); --ty-num-m: clamp(var(--ty-num-m-min), var(--ty-num-m-fluid), var(--ty-num-m-max)); --ty-num-s: clamp(var(--ty-num-s-min), var(--ty-num-s-fluid), var(--ty-num-s-max)); --ty-body: 1rem; /* 16 */ --ty-small: 0.875rem; /* 14, подпись, eyebrow, сноска; меньше 14 px в CSS не допускается */ --ty-btn: 1.0625rem; /* 17 */ --ty-icon: 1.25rem; /* 20, глиф-стрелка */ /* Межстрочный */ --ty-h1-lh: 1.15; --ty-h2-lh: 1.2; --ty-h3-lh: 1.25; --ty-h4-lh: 1.3; --ty-lead-lh: 1.5; --ty-body-lh: 1.6; --ty-small-lh: 1.5; --ty-btn-lh: 1.2; --ty-num-lh: 1.1; --ty-icon-lh: 1; /* Веса: 200 и 300 из CSS уходят (у Manrope 300 нет); 700 только для b и strong */ --ty-fw-body: 400; --ty-fw-med: 500; --ty-fw-semi: 600; --ty-fw-bold: 700; --ty-h1-fw: 500; --ty-h2-fw: 500; --ty-h3-fw: 600; --ty-h4-fw: 600; --ty-lead-fw: 400; --ty-btn-fw: 600; --ty-eyebrow-fw: 600; --ty-num-fw: 500; --ty-price-fw: 700; /* цена везде 700 (Владимир 07/10/2026) */ /* Трекинг */ --ty-h1-ls: -0.02em; --ty-h2-ls: -0.015em; --ty-h3-ls: -0.01em; --ty-small-ls: 0.01em; --ty-eyebrow-ls: 0.04em; --ty-num-l-ls: -0.02em; --ty-num-m-ls: -0.015em; /* Длина строки: 1ch у Manrope около 1,2 знака (замер по content.json) */ /* h1 и lead hero заданы в em, а не в ch (07/10/2026): ch берётся от цифры «0» шрифта, у Manrope она на 10% шире, чем у запасного (0,626 em против 0,560 em при весе 500; 0,610 против 0,551 при 400), и колонка hero меняла ширину при подмене шрифта (CLS 0,11 на 1440). 13,772em = 22 x 0,626 (вес h1 500), 26,84em = 44 x 0,610 (вес lead 400): в Manrope то же самое, что было в ch. */ --ty-h1-ch: 13.772em; --ty-h2-ch: 26ch; --ty-h3-ch: 30ch; --ty-lead-ch: 26.84em; --ty-body-ch: 54ch; --ty-small-ch: 60ch; /* Шкала отступов: --s-1..--s-8 уже есть (4/8/12/16/24/32/48/72), добавка 96 */ --s-9: 6rem; /* Роли отступов, телефон (до 639); планшет и десктоп переопределяются ниже */ --space-section: 3rem; /* padding-block секции 48 */ --head-gap: 1.5rem; /* шапка секции -> контент 24 */ --gap-grid: 1rem; /* зазор сетки карточек 16 */ --hero-gap: 2rem; /* колонки hero 32 */ --pad-l: 1.5rem; /* карточка 24 / 32 / 40, со всех сторон: bigcard, story, tier, stack__group, price-card (LAYOUT-AUDIT 4.2) */ --inset-pad: 1rem 1.5rem; /* врезка внутри карточки 16 24 (одно значение на всех ширинах) */ --pad-m: 1.5rem; /* тариф, история, плашка hero, форма 24 */ --pad-s: 1rem; /* светлая вставка, блок аккордеона, терминал 16 */ --pad-xl: 2rem; /* финальный CTA, price-card 32 */ --btn-h: 52px; --btn-h-sm: 44px; /* Вертикальные отступы вокруг заголовков и текста (раздел 4 предложения) */ --ty-gap-eyebrow: var(--s-3); /* eyebrow -> h1/h2, 12 */ --ty-gap-h1-lead: var(--s-4); /* h1 -> лид, 16 (с 640: 24) */ --ty-gap-h2-lead: var(--s-4); /* h2 -> лид, 16 */ --ty-gap-lead-actions: var(--s-5); /* лид -> кнопки, 24 (с 640: 32) */ --ty-gap-actions-note: var(--s-4); /* кнопки -> примечание, 16 */ --ty-gap-h3-text: var(--s-3); /* h3 -> абзац, 12 */ --ty-gap-h4-text: var(--s-2); /* h4 -> абзац, 8 */ --ty-gap-h3-before: var(--s-6); /* h3 в потоке после абзаца, 32 */ --ty-gap-h4-before: var(--s-5); /* h4 в потоке, 24 */ --ty-gap-p: var(--s-4); /* абзац -> абзац, абзац <-> список, 16 */ --ty-gap-li: var(--s-2); /* пункт списка плотный, 8 */ --ty-gap-li-m: var(--s-3); /* пункт списка обычный, 12 */ --ty-list-indent: var(--s-4); /* отступ маркера, 16 */ --ty-gap-btns: var(--s-3); /* между кнопками, 12 (с 640: 16) */ --ty-gap-card-title: var(--s-3); /* в карточке заголовок -> текст, 12 */ --ty-gap-card-foot: var(--s-5); /* в карточке текст -> подвал, 24 */ } @media (min-width: 640px) { /* планшет */ :root { --space-section: 4.5rem; --head-gap: 2rem; --gap-grid: 1.5rem; --pad-l: 2rem; --pad-xl: 3rem; --ty-gap-h1-lead: var(--s-5); --ty-gap-lead-actions: var(--s-6); --ty-gap-btns: var(--s-4); } } @media (min-width: 960px) { /* десктоп */ :root { --space-section: 6rem; --head-gap: 3rem; --pad-l: 2.5rem; --pad-m: 2rem; --pad-s: 1.5rem; --pad-xl: 4.5rem; --hero-gap: 3rem; } } @media (min-width: 1280px) { :root { --hero-gap: 4.5rem; } }