/* ДЕВЯТЬ — скелет: сетка, шкалы, палитра. Всё, из чего собирается страница, объявлено здесь и только здесь. Числа сняты с живого ninemarketing.ru 04.09.2026, разбор — в ПАРАМЕТРЫ-ВЁРСТКИ.md. Решение Максима 04.09.2026: сайт совпадает с тильдовским один в один на 1440. Поэтому кегли, отступы полос и ширины блоков берутся ЧИСЛАМИ ОРИГИНАЛА, а не из нашей шкалы (закон 7.6: число заказчика сильнее шкалы, но живёт токеном). Расхождения с разделом 7 названы вслух рядом с каждым токеном. */ /* ═══ 1. Сетка ═══════════════════════════════════════════════════════════ Оригинал: контейнер 1300 при поле 70, 12 колонок, жёлоб 30. Проверено замером: левый край 88 элементов на 70, правый 69 элементов на 1370. Перестройка 12 → 8 → 4 (закон 7.9), пороги посчитаны, а не взяты круглыми: 1200 = 1300 контейнер + 2×70 поля, минус запас — ниже него сетка 8 колонок; 760 = 8×80 минимальная читаемая колонка + 7×20 жёлоб — ниже него 4 колонки. */ :root { --container: 1300px; /* ширина содержимого на десктопе */ --pad: 16px; /* поле страницы: телефон 16, планшет 40, десктоп 70 */ --cols: 4; /* телефон: 4 колонки */ --gap: 16px; /* ═══ 2. Ритм ═══════════════════════════════════════════════════════════ Ниже 1200 ритм один на всю страницу (закон 7.2). С 1200 каждая полоса получает СВОИ отступы из эталона (--sec-pt / --sec-pb в blocks.css): у оригинала стыки разные - 184, 286, 334, 349, 296, 267, 249, 265, 229, 254, и совпадение один в один с ними важнее ровного ритма. Это названное расхождение с 7.2, решение заказчика. */ --rhythm: 128px; /* ═══ 3. Шкала отступов ═════════════════════════════════════════════════ Для того, что не снято с оригинала: попапы, меню, планшет, телефон. */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px; /* ═══ 4. Кегли ══════════════════════════════════════════════════════════ У оригинала кегль держит БЛОК, а не уровень: заголовки полос набраны 44, 46 и 48, подзаголовки 18, 20, 22, 24, 26. Токен назван числом оригинала, потому что роли у этих чисел нет - и это названное расхождение с 7.4, принятое ради совпадения один в один. На 1440 значение точное; книзу кегль плавно уходит к нижней границе (телефонная шкала оригинала: 14/15/16/18, дальше 20 · 22 · 26 · 30 · 34 · 36 - осмысленные ступени, а не пропорция). */ --t-13: 13px; /* подпись «это бесплатно» под кнопкой попапа */ --t-14: 14px; --t-15: 15px; --t-16: 16px; --t-18: 18px; --t-20: clamp(18px, calc(17.26px + 0.190vw), 20px); --t-22: clamp(20px, calc(19.26px + 0.190vw), 22px); --t-24: clamp(22px, calc(21.26px + 0.190vw), 24px); --t-26: clamp(22px, calc(20.51px + 0.381vw), 26px); --t-28: clamp(22px, calc(19.77px + 0.571vw), 28px); --t-36: clamp(26px, calc(22.29px + 0.952vw), 36px); --t-38: clamp(26px, calc(21.54px + 1.143vw), 38px); --t-44: clamp(30px, calc(24.80px + 1.333vw), 44px); --t-46: clamp(30px, calc(24.06px + 1.524vw), 46px); --t-48: clamp(30px, calc(23.31px + 1.714vw), 48px); --t-50: clamp(34px, calc(28.06px + 1.524vw), 50px); --t-52: clamp(34px, calc(27.31px + 1.714vw), 52px); --t-54: clamp(34px, calc(26.57px + 1.905vw), 54px); --t-60: clamp(34px, calc(24.34px + 2.476vw), 60px); --t-64: clamp(36px, calc(25.60px + 2.667vw), 64px); /* Имена уровней оставлены для правовых страниц и служебных блоков, где своего числа у оригинала нет. */ --t-xs: var(--t-14); --t-s: var(--t-16); --t-m: var(--t-20); --t-l: var(--t-28); --t-xl: var(--t-36); --t-2xl: var(--t-44); --t-hero: var(--t-60); --measure: 54ch; /* правовые страницы; на главной ширины из эталона */ --lh-text: 1.4; --lh-head: 1.1; /* ═══ 5. Палитра ════════════════════════════════════════════════════════ Снята с живой страницы. Акцент #206AD8 — он же в дизайн-системе презентаций. */ --accent: #206AD8; /* кнопки, значки, ссылки */ --accent-soft: #579AFF; /* акцент на тёмном фоне и в антикве */ --accent-name: #5498FF; /* плашка имени на фото */ --ink: #000000; /* текст на светлом */ --ink-invert: #FFFFFF; /* текст на тёмном */ --ink-mute: #979797; /* описания кейсов */ --ink-mute-2: #727272; /* подводка на чёрном */ --ink-mute-3: #4A4A4A; /* подзаголовок тарифа */ --bg: #FFFFFF; /* базовый фон */ --bg-tint: #FAFCFF; /* полоса с холодным оттенком */ --bg-tint-2: #F6F8FB; /* карточка на светлой полосе */ --bg-tint-3: #EFF4FA; /* полоса знакомства */ --bg-pale: #E3EEFF; /* плашка-выноска */ --bg-grey: #EDEDED; /* подложка кадра кейса */ --bg-warm: #F2F1ED; /* плашка гарантии в тарифе */ --line-warm: #E6E4DD; /* обводка светлого тарифа и белых карточек «проблемы» */ --line-cool: #D8D8D8; /* обводка карточек #F6F8FB и белой полосы инструментов */ --line-dark: #484848; /* обводка карточек финальной полосы на чёрном */ --bg-dark: #1C1C1C; /* тёмная полоса, первый экран */ --bg-dark-2: #121212; /* тёмная карточка на тёмной полосе */ --bg-dark-3: #111111; /* плашка PDF, тёмный тариф */ --bg-dark-4: #141414; /* карточка финальной полосы */ --bg-dark-5: #1F1F1F; /* вторая карточка финальной полосы */ --bg-black: #0A0A0A; /* финальная полоса */ --badge-top: #0061D7; /* бейдж «берут чаще всего» */ --badge-win: #8635F6; /* бейдж «для победителей» */ /* ═══ 6. Скругления ═════════════════════════════════════════════════════ Набор оригинала: 3 значок · 10 карточка · 20 крупная карточка · 30 кнопка · 50 подложка портрета. */ --r-s: 3px; --r-m: 10px; --r-l: 20px; --r-btn: 30px; --r-face: 50px; --r-pill: 999px; /* ═══ 7. Кнопка ═════════════════════════════════════════════════════════ У оригинала высота 55 везде, ширина у каждой своя (300 · 320 · 340 · 360): ширина - число эталона у самой кнопки. */ --btn-h: 55px; --hdr-h: 96px; /* высота полосы шапки: плашка 56 + поле 20 сверху и снизу */ --hdr-w: 800px; /* плашка меню 320…1120 */ /* ═══ 8. Движение ═══════════════════════════════════════════════════════ Один набор кривых и длительностей на сайт (скилл animate, 04.09.2026): вход - сильный ease-out вместо встроенного; интерфейс до 300 мс, появление полос по прокрутке длиннее - это витрина, а не рабочий экран. */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --dur-press: 160ms; /* нажатие кнопки */ --dur-hover: 500ms; /* наезд кадра при наведении */ --dur-pop: 250ms; /* окно попапа */ --dur-reveal: 800ms; /* появление блока по прокрутке */ --rv-step: 70ms; /* шаг между соседями одной пачки: js/app.js кладёт --rv-d */ --rv-shift: 24px; /* путь появления снизу */ } @media (min-width: 760px) { :root { --cols: 8; --gap: 20px; --pad: 40px; --rhythm: 192px; } } @media (min-width: 1200px) { :root { --cols: 12; --gap: 30px; --pad: 70px; --rhythm: 256px; } } /* ═══ Сброс ═══════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box } html { -webkit-text-size-adjust: 100% } body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Inter', Arial, sans-serif; font-size: var(--t-16); line-height: var(--lh-text); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block } /* height:auto обязателен: без него aspect-ratio молчит, а картинка сама задаёт высоту строки (2.26) */ h1, h2, h3, h4 { margin: 0; line-height: var(--lh-head); font-weight: 600 } p, ul, ol, figure, blockquote { margin: 0 } ul { padding: 0; list-style: none } a { color: inherit; text-decoration: none } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer } /* Поле формы кеглем меньше 16 заставляет Safari на iOS увеличить страницу и обратно её не отматывает (правило 2.11). У оригинала поля набраны 13 и 14. */ @media (max-width: 767px) { input, textarea, select { font-size: 16px !important } } /* ═══ Раскладка ═══════════════════════════════════════════════════════════ */ .wrap { width: min(100% - var(--pad) * 2, var(--container)); margin-inline: auto; } .g { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--gap); } /* Полоса. Ниже 1200 ритм держит одна переменная; с 1200 полоса берёт свои отступы из эталона (--sec-pt / --sec-pb), см. пояснение у --rhythm. */ .sec { padding-block: var(--sec-pt, calc(var(--rhythm) / 2)) var(--sec-pb, calc(var(--rhythm) / 2)) } /* Состояние объявляется ПОСЛЕ базового класса, иначе при равной специфичности побеждает базовое и заливка не применяется (закон 7.21). */ .sec--tint { background: var(--bg-tint) } .sec--tint-2 { background: var(--bg-tint-3) } .sec--dark { background: var(--bg-dark); color: var(--ink-invert) } .sec--black { background: var(--bg-black); color: var(--ink-invert) } /* Ширины в колонках. Блок занимает ЦЕЛОЕ число колонок (7.1): дробные fr дают края мимо всех линий, и глаз читает такой блок как съехавший. */ /* Ширина пишется КОНЦОМ диапазона (grid-column-end), а не сокращением grid-column. Сокращение задаёт start, и стартовая линия .st-* его затирает: элемент молча схлопывается в одну колонку. */ .c-2, .c-3, .c-4, .c-5, .c-6, .c-7, .c-8, .c-9, .c-10, .c-11, .c-12 { grid-column-end: span var(--cols) } /* Планшет, 8 колонок: половину полосы держат только узкие блоки, всё, что на десктопе занимает больше трети, идёт во всю ширину (7.9). */ @media (min-width: 760px) { .c-2, .c-3, .c-4 { grid-column-end: span 4 } .c-5, .c-6, .c-7, .c-8, .c-9, .c-10, .c-11, .c-12 { grid-column-end: span 8 } } @media (min-width: 1200px) { .c-2 { grid-column-end: span 2 } .c-3 { grid-column-end: span 3 } .c-4 { grid-column-end: span 4 } .c-5 { grid-column-end: span 5 } .c-6 { grid-column-end: span 6 } .c-7 { grid-column-end: span 7 } .c-8 { grid-column-end: span 8 } .c-9 { grid-column-end: span 9 } .c-10 { grid-column-end: span 10 } .c-11 { grid-column-end: span 11 } .c-12 { grid-column-end: span 12 } /* Стартовая линия. Пустая колонка слева - это раскладка «5 + 1 пустая + 6» из 7.1, а не отступ: на планшете и телефоне линия не действует. */ .st-2 { grid-column-start: 2 } .st-3 { grid-column-start: 3 } .st-5 { grid-column-start: 5 } .st-6 { grid-column-start: 6 } .st-7 { grid-column-start: 7 } .st-8 { grid-column-start: 8 } .st-9 { grid-column-start: 9 } .st-10 { grid-column-start: 10 } } /* Ряд равных карточек. При контейнере 1300 и жёлобе 30 ячейки repeat(N) попадают ровно на линии сетки: 2 → 635 (span 6), 3 → 413,3 (span 4), 4 → 302,5 (span 3). Ряды с жёлобом оригинала (20, 14, 27) объявлены у своих полос в blocks.css. */ .row-2, .row-3, .row-4 { display: grid; column-gap: var(--gap); row-gap: var(--s7) } .row-2, .row-3, .row-4 { grid-template-columns: minmax(0, 1fr) } @media (min-width: 760px) { .row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) } .row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) } .row-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) } } @media (min-width: 1200px) { .row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) } } /* ═══ Типографика ════════════════════════════════════════════════════════ Классы уровней остаются для правовых страниц и служебных блоков. На главной кегль ставит полоса - числом оригинала, см. blocks.css. */ .h1 { font-size: var(--t-60); font-weight: 600 } .h2 { font-size: var(--t-44); font-weight: 600 } .h3 { font-size: var(--t-36); font-weight: 600 } h3, .h3c { font-size: var(--t-28); font-weight: 600 } h4, .h4c { font-size: var(--t-20); font-weight: 600 } /* Ручной перенос расставлен под ширину десктопа: ниже 1200 он складывается с автоматическим и рвёт заголовок на семь строк вместо четырёх (2.7). Пробел перед тегом обязателен — иначе при скрытии слова слипнутся. */ .br-d { display: none } @media (min-width: 1200px) { .br-d { display: inline } } /* Акцент антиквой. Гарнитура — вторая ось иерархии, и она законна (7.4): уровень держит кегль, антиква лишь добавляет различие в той же строке. У оригинала антиква везде своего кегля (48 · 50 · 52 · 54 · 64) - число ставит полоса. */ .ny { font-family: 'NyghtSerif', Georgia, serif; font-weight: 400; color: var(--accent) } .ny--h2 { font-size: var(--t-50) } .ny--h1 { font-size: var(--t-64); font-weight: 300; color: var(--accent-soft) } .sec--dark .ny, .sec--black .ny { color: var(--accent-soft) } .lead { font-size: var(--t-16); font-weight: 400 } .small { font-size: var(--t-14) } .mute { color: var(--ink-mute) } /* Мера ставится КОЛОНКЕ, а не абзацу внутри неё (7.8) - правовые страницы. */ .prose { max-width: var(--measure) } /* ═══ Кнопки ═════════════════════════════════════════════════════════════ Высота 55, радиус 30, кегль 16/500, трекинг -0,7 - как у оригинала. Ширина у каждой своя, стоит числом эталона у самой кнопки. */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--btn-h); padding-inline: var(--in-20); /* подпись 273 в кнопке 320: поле 24 её переносило */ border-radius: var(--r-btn); white-space: nowrap; background: var(--accent); color: var(--ink-invert); font-size: var(--t-16); font-weight: 500; letter-spacing: -0.7px; line-height: 1.55; text-align: center; transition: background-color .18s ease, transform var(--dur-press) var(--ease-out); } .btn:hover { background: #1B5CBE } .btn:active { transform: scale(.97) } /* нажатие: интерфейс услышал, 160 мс, без hover-условия - :active честен и на тачскрине */ .btn--light { background: var(--ink-invert); color: var(--ink) } .btn--light:hover { background: #E8EEF7 } .btn--dark { background: var(--bg-dark-3); color: var(--ink-invert) } .btn--dark:hover { background: #262626 } /* Контурная - вторая по важности кнопка: залитая на экране одна (7.7) */ .btn--ghost { background: transparent; border: 1px solid currentColor; color: inherit } .btn--ghost:hover { background: rgba(0, 0, 0, .05) } /* ═══ Появление по скроллу ═══════════════════════════════════════════════ Скрытое состояние включает КЛАСС, который ставит инлайн-скрипт в (правило 2.6). Нет JS — нет класса — весь текст виден. Наблюдатель поднимает верхнюю границу в бесконечность, иначе блоки, проскочившие мимо экрана при переходе по якорю, остаются невидимыми навсегда. */ .js .reveal:not(.is-visible) { opacity: 0; transform: translateY(var(--rv-shift)) } /* Соседи одной пачки (карточки ряда, заголовок и подводка) выходят ступенями: наблюдатель в js/app.js кладёт --rv-d = порядок × --rv-step тем, кто в окне, проскочившим выше экрана задержки не даёт */ .reveal { transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); transition-delay: var(--rv-d, 0ms) } /* Стрелка в шапке чуть уходит вперёд под курсором; на тачскрине hover ложный - условие */ .hdr__go svg { transition: transform var(--dur-press) var(--ease-out) } @media (hover: hover) and (pointer: fine) { .hdr__go:hover svg { transform: translateX(3px) } } /* Меньше движения - не ноль движения: остаётся проявление, уходят сдвиги и масштаб */ @media (prefers-reduced-motion: reduce) { .js .reveal:not(.is-visible) { opacity: 1; transform: none } .reveal, .btn, .hdr__go svg, .case__shot, .case__shot img, .whyc, .whyc__img { transition: none } .js .hero__top, .js .hero__line, .js .hero__sub, .js .hero__acts, .js .hero__facts-row { animation: none } .pop[open] { animation-name: pop-fade } .pop.is-closing { animation-name: pop-fade; animation-direction: reverse } } /* Липкая шапка забирает у якоря свою высоту: без этого заголовок блока встаёт под шапку и человек видит середину предыдущего блока (2.36). 24 — зона отчуждения из 7.14. */ [id] { scroll-margin-top: calc(var(--hdr-h) + 24px) }