/* ============================================================ SafePac — токены дизайн-системы Северная звезда: «Посадочное место». Контент не плавает по странице, он лежит в вырезанной под него полости. Волосяная линия — контур реза, а не декор. Единственный источник правды по цвету, типографике и ритму. ============================================================ */ :root { /* ---------- Цвет: чернила ---------- Тёплый графит из логотипа вместо чёрного. Чёрного на сайте нет. */ /* Заголовки. Тёплый почти-чёрный: на референсе контраст держится не жирностью, а глубиной цвета — 26,26,26 против наших 76,72,64. Жирного начертания у MagistralC попросту нет, в лицензии клиента один вес, и подделка браузером смазала бы контуры. Поэтому вес оставляем, а разницу берём тоном. Тон тёплый, а не нейтральный: иначе заголовки выпадут из палитры остальной страницы. */ --ink-strong: #26231E; /* 15.4:1 — заголовки */ --ink: #4C4840; /* 9.1:1 на бумаге — основной текст */ --ink-muted: #6F6A61; /* 5.4:1 — вторичный текст, подписи */ --ink-faint: #A8A29A; /* 2.5:1 — только неактивное и метки */ --ink-invert: #FFFFFF; /* ---------- Цвет: акцент ---------- Зелёный из логотипа. Как заливка и линия — да. Как текст — нет: #3AAD58 на белом даёт 2.9:1. Для текста и ссылок только --accent-ink. */ --accent: #3AAD58; /* контур реза, маркер, заливка */ --accent-mid: #229748; /* только графика: 3.8:1, не текст */ --accent-soft: #79C172; /* перекрытие контуров, разметка */ --accent-ink: #17703A; /* 6.2:1 — зелёный текст, ссылки, нажатие */ --accent-btn: #268447; /* 4.7:1 — заливка кнопки в покое */ --accent-btn-hov: #1F7A40; /* 5.4:1 — она же при наведении */ --accent-wash: #F1F7F2; /* единственное зелёное поле-подложка */ /* ---------- Цвет: бумага ---------- Тёплая нейтраль. Холодного серого в системе нет: чернила тёплые. */ --paper: #FFFFFF; --paper-sunk: #F7F7F5; /* дно полости, чередование секций */ --paper-deep: #EFEEEA; /* вложенное дно, заполненные поля */ /* ---------- Цвет: контуры ---------- */ --rule: #E3E1DB; /* основной контур реза */ --rule-soft: #EFEDE8; /* разделитель внутри группы */ --rule-strong: #C9C6BE; /* контур в фокусе и при наведении */ /* ---------- Цвет: состояния ---------- */ --danger: #B03A2E; --danger-wash: #FBF1F0; --warning: #9A6B12; --warning-wash: #FBF6EC; /* ---------- Типографика ---------- */ --font-display: 'MagistralC', 'Montserrat', 'Helvetica Neue', Arial, sans-serif; --font-sans: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Плотный отрицательный трекинг — главный почерк системы. Пол по краснополосью: -0.04em, дальше буквы слипаются. */ --track-display: -0.035em; --track-heading: -0.025em; --track-body: -0.01em; --track-mono: 0.01em; --fs-display: clamp(2.375rem, 1.55rem + 3.6vw, 4rem); /* 38 → 64 */ --fs-hero: clamp(2.125rem, 1.35rem + 2.9vw, 3.5rem); /* 34 → 56 */ --fs-stat: clamp(2rem, 1.40rem + 2.2vw, 3rem); /* 32 → 48 */ --fs-h1: clamp(2rem, 1.55rem + 2.0vw, 2.875rem); /* 32 → 46 */ --fs-h2: clamp(1.625rem, 1.40rem + 1.0vw, 2.125rem); /* 26 → 34 */ --fs-h3: clamp(1.25rem, 1.16rem + 0.4vw, 1.5rem); /* 20 → 24 */ --fs-h4: 1rem; /* 16 */ --fs-lead: 1.0625rem; /* 17 */ --fs-body: 0.9375rem; /* 15 */ --fs-small: 0.8125rem; /* 13 */ --fs-micro: 0.75rem; /* 12 */ /* Надзаголовок блока. Был набран микрокеглем в 12 px и терялся над крупным заголовком — читался как техническая пометка, а не как название раздела. Квадратная метка растёт вместе с ним. */ --fs-eyebrow: 0.875rem; /* 14 */ --bullet: 8px; --lh-display: 1.02; --lh-heading: 1.12; --lh-title: 1.28; --lh-body: 1.65; --lh-tight: 1.4; --measure: 68ch; /* длина строки основного текста */ /* ---------- Ритм ---------- Шаг 4px. Всё вертикальное расстояние берётся отсюда, «на глаз» ничего. */ --s-1: 0.25rem; /* 4 */ --s-2: 0.5rem; /* 8 */ --s-3: 0.75rem; /* 12 */ --s-4: 1rem; /* 16 */ --s-5: 1.5rem; /* 24 */ --s-6: 2rem; /* 32 */ --s-7: 3rem; /* 48 */ --s-8: 4rem; /* 64 */ --s-9: 5rem; /* 80 */ --s-10: 7.5rem; /* 120 */ --s-11: 10rem; /* 160 */ --section-y: clamp(3.5rem, 1.5rem + 7vw, 7.5rem); --gutter: 1.5rem; /* Полоса тянется, а не упирается в фикс. На референсе ограничения по ширине нет вовсе: содержимое начинается с 64-го пикселя и занимает остальное — на 1920 это 1792, то есть 93% экрана. Фиксированные 1360 и даже 1440 оставляли по бокам поля, которые читаются как незанятое место, а не как воздух. Предел в 120rem держит очень широкие мониторы: дальше растягивать нечего, строки становятся нечитаемо длинными. Длину самих строк ограничивают заголовочные блоки, а не полоса, поэтому сетки и карточки могут занимать всю ширину без вреда для чтения. */ --container: 120rem; /* 1920 */ --container-pad: clamp(1rem, 0.3rem + 3.1vw, 4rem); /* ---------- Форма ---------- Радиус фрезы: у настоящего ложемента угол полости равен радиусу инструмента. Один радиус на всю систему. Линейка — это рез, у неё 0. */ --cutter: 6px; --cutter-lg: 6px; --hairline: 1px; /* ---------- Движение ---------- Один поставленный момент: сначала прочерчивается контур, потом в него садится содержимое. Ничего другого на странице не анимируется. */ --ease-seat: cubic-bezier(0.16, 1, 0.3, 1); --t-fast: 140ms; --t-base: 240ms; --t-cut: 340ms; --t-reveal: 420ms; /* появление блока при прокрутке */ /* ---------- Слои ---------- */ --z-base: 0; --z-sticky: 100; --z-header: 200; /* Высоты закреплённых полос. Значения по умолчанию совпадают с фактическими; скрипт уточняет --header-h по реальной шапке, чтобы накладка мобильного меню вставала точно под ней и при переносе строки в контактах. */ --header-h: 58px; --mobile-bar-h: 58px; --z-overlay:300; --z-modal: 400; } /* ---------- Кегль на широком экране ---------- Вся шкала выше перестаёт расти около 1100 px: дальше формулы упираются в свой потолок. До недавнего времени это было незаметно, потому что и полоса упиралась в 1360. Теперь полоса тянется до 1920, а буква нет — на большом мониторе текст выглядит мелким относительно всего вокруг. Отсюда и ощущение, что на ноутбуке всё совпадает с референсом, а на 1920 наши заголовки меньше. Здесь шкала продолжается: от 1200 до 1920. Значение на 1200 в точности равно нынешнему, поэтому ноутбуки и планшеты не меняются вовсе — растёт только то, что шире. Сравнение с референсом на 1920: у него основной текст 16 px и заголовки секций 26. Наш основной становится 17, а заголовки — 40. Больше, потому что MagistralC узкий и светлый: при равном кегле он читается мельче Montserrat, и оптическое равенство требует запаса. */ @media (min-width: 75rem) { :root { --fs-display: clamp(4rem, 2.75rem + 1.6667vw, 4.75rem); /* 64 → 76 */ --fs-hero: clamp(3.5rem, 2.4583rem + 1.3889vw, 4.125rem); /* 56 → 66 */ --fs-stat: clamp(3rem, 2.1667rem + 1.1111vw, 3.5rem); /* 48 → 56 */ --fs-h1: clamp(2.875rem, 2.0417rem + 1.1111vw, 3.375rem); /* 46 → 54 */ --fs-h2: clamp(2.125rem, 1.5rem + 0.8333vw, 2.5rem); /* 34 → 40 */ --fs-h3: clamp(1.5rem, 1.0833rem + 0.5556vw, 1.75rem); /* 24 → 28 */ --fs-h4: clamp(1rem, 0.7917rem + 0.2778vw, 1.125rem); /* 16 → 18 */ --fs-lead: clamp(1.0625rem, 0.8542rem + 0.2778vw, 1.1875rem); /* 17 → 19 */ --fs-body: clamp(0.9375rem, 0.7292rem + 0.2778vw, 1.0625rem); /* 15 → 17 */ --fs-small: clamp(0.8125rem, 0.6042rem + 0.2778vw, 0.9375rem); /* 13 → 15 */ --fs-micro: clamp(0.75rem, 0.6458rem + 0.1389vw, 0.8125rem); /* 12 → 13 */ --fs-eyebrow: clamp(0.875rem, 0.7708rem + 0.1389vw, 0.9375rem); /* 14 → 15 */ } } /* Тема одна — светлая. Сцена диктует: снабженец и технолог смотрят сайт с рабочего ноутбука в освещённом кабинете или в цеху, часто сверяя с бумажным чертежом. Тёмная тема здесь не нужна, а не «забыта». */