/* ========================================================================== tokens.css — все переменные проекта. Меняете цвет или отступ здесь — меняется на всём сайте. ========================================================================== */ :root { /* --- Фирменные цвета -------------------------------------------------- */ --ink: #31363D; /* основной текст и заголовки */ --copper: #AF5F39; /* акцент, заливка кнопок */ --copper-dark: #8F4A2B; /* hover, а также цвет ссылок в тексте */ --bg: #FAFAF8; /* фон страницы */ --surface: #FFFFFF; /* карточки */ --line: #E3E1DC; /* границы */ --muted: #6E737B; /* второстепенный текст */ --dark: #2A2E35; /* фон подвала */ /* Цвета для тёмного фона подвала (проверены на контраст) */ --on-dark: #F2F1EE; --on-dark-muted: #A8ADB5; --copper-light: #CC7B50; /* медный для линий и рамок на тёмном (4.2:1) */ /* Медный для мелких надписей на тёмном фоне. Ещё светлее: мелкому тексту нужен контраст 4.5:1, а --copper-light даёт только 4.2:1. */ --copper-on-dark: #D98A5F; /* 5.0:1 на --dark */ --line-dark: rgba(242, 241, 238, 0.14); /* Полупрозрачные оттенки для подложек и фокуса */ --copper-tint: rgba(175, 95, 57, 0.08); /* Обводка фокуса должна быть чётко видна: полупрозрачная давала контраст 1.8:1 при норме 3:1, поэтому цвет сплошной. */ --focus-ring: #AF5F39; /* --- Шкала отступов --------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* --- Размеры шрифта --------------------------------------------------- Заголовки «резиновые»: clamp(минимум, рост от ширины экрана, максимум). На телефоне берётся минимум, на большом экране — максимум. */ --text-xs: 0.8125rem; /* 13px — подписи, мелочь */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px — базовый текст */ --text-lg: 1.125rem; /* 18px — крупный абзац, лид */ --text-xl: 1.25rem; /* 20px */ --text-h4: clamp(1.125rem, 0.4vw + 1.03rem, 1.25rem); /* Поле ввода на iOS: меньше 16px — и Safari при фокусе увеличивает страницу целиком. Поэтому у полей формы кегль отдельным токеном, и он не опускается ниже 1rem. */ --text-input: 1rem; --text-h3: clamp(1.25rem, 0.8vw + 1.06rem, 1.5rem); /* h1 и h2 набраны акцидентным шрифтом и потому крупнее остального: на телефоне h1 — 36px, на мониторе дорастает до 72px. */ --text-h2: clamp(1.75rem, 1.85vw + 1.28rem, 2.75rem); --text-h1: clamp(2.25rem, 3.15vw + 1.48rem, 4.5rem); /* --- Начертания ------------------------------------------------------- */ --font-sans: "Inter", "Inter fallback Segoe", "Inter fallback Helvetica", "Inter fallback Roboto", "Inter fallback Arial", system-ui, sans-serif; /* Акцидентный шрифт — только заголовки h1 и h2. Широкий геометрический гротеск: та же логика, что у квадратного знака. Запасные варианты — системные шрифты, подтянутые к метрикам Unbounded, чтобы в момент подмены заголовок не менял ни ширину, ни высоту строки. Как считаются их поправки — см. css/base.css, @font-face. */ --font-display: "Unbounded", "Unbounded fallback Segoe", "Unbounded fallback Helvetica", "Unbounded fallback Roboto", "Unbounded fallback Arial", sans-serif; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* --- Межстрочные интервалы -------------------------------------------- */ --leading-tight: 1.2; /* заголовки */ --leading-snug: 1.35; --leading-normal: 1.65; /* абзацы */ /* --- Скругления -------------------------------------------------------- Логика взята у фирменного знака: у него скруглённый квадрат с радиусом примерно 23% стороны — мягкий, заметный, но не круглый. Ступеней три, других значений на сайте быть не должно. */ --radius-sm: 10px; /* мелкое: оговорки, строка состояния, значки */ --radius-md: 16px; /* кнопки, поля ввода, выпадающие списки */ --radius-lg: 24px; /* карточки, крупные плашки, тёмные блоки */ --radius-full: 999px; /* «таблетки»: переключатель языков, теги */ /* --- Фирменный пунктир -------------------------------------------------- Пунктирная дуга из знака — узнаваемая деталь. Здесь она задана один раз как готовая линия, чтобы штрих и просвет были одинаковыми везде: в разделителях секций и в соединительной линии блока «как мы работаем». */ --dash-line: repeating-linear-gradient( to right, var(--copper) 0 5px, transparent 5px 13px); --dash-line-vertical: repeating-linear-gradient( to bottom, var(--copper) 0 5px, transparent 5px 13px); --dash-opacity: 0.5; /* --- Тени -------------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(49, 54, 61, 0.06); --shadow-md: 0 4px 16px rgba(49, 54, 61, 0.08); --shadow-lg: 0 12px 32px rgba(49, 54, 61, 0.12); /* --- Раскладка --------------------------------------------------------- Точки перелома на сайте заданы в em и только в них. 1em здесь — это шрифт браузера по умолчанию, обычно 16px, но если человек увеличил шрифт, порог сдвинется вместе с текстом. В пикселях макет переключался бы не вовремя. 37.5em = 600px вторая колонка в списках 48em = 768px планшет 56.25em = 900px две колонки на первом экране и контактах 64em = 1024px строка меню вместо бургера, широкие сетки Больше порогов быть не должно: всё остальное — clamp() и auto-fit. */ /* Максимальная ширина содержимого. На обычном мониторе это 1200px, на очень широком поля не превращаются в пустыню: строка подрастает до 1360px и на этом останавливается — дальше читать неудобно. */ --container-max: clamp(1200px, 70vw, 1360px); /* Поля растут плавно вместе с экраном, без переключения на пороге */ --container-pad: clamp(16px, 4vw, 32px); /* Наименьшая цель нажатия. Палец меньше не попадает. */ --tap: 44px; /* Вырез и скруглённые углы у телефона. На обычных экранах это нули. */ --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); /* Высота шапки задана в rem, а не в пикселях, намеренно: если человек увеличил шрифт в браузере, шапка растёт вместе с надписями, а вместе с ней — и отступ первого экрана, который её обходит. В пикселях текст вылезал бы шапке под низ. */ --header-h: 4rem; /* 64px при обычном шрифте — телефон */ /* --- Движение ----------------------------------------------------------- Одна система на весь сайт. Три длительности и две кривые — больше значений быть не должно, иначе движение перестанет быть узнаваемым. fast — отклик на наведение и нажатие: цвет, подчёркивание, подъём; base — появление блока в кадре, раскрытие меню; slow — крупные события: прорисовка маршрута, бегущий пунктир. */ --dur-fast: 150ms; --dur-base: 300ms; --dur-slow: 600ms; /* Кривая появления: резво стартует и мягко тормозит — так движение выглядит уверенным, а не вялым. Кривая наведения ровная, без выброса. */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-hover: cubic-bezier(0.4, 0, 0.2, 1); /* Насколько блок приподнят перед появлением и на сколько поднимается кнопка или карточка под курсором. */ --reveal-shift: 20px; --lift: 2px; /* Задержка между соседними элементами списка: первый появляется сразу, каждый следующий — на столько позже. */ --stagger: 70ms; /* Старые имена оставлены, чтобы не переписывать каждое правило разом. */ --transition-fast: var(--dur-fast) var(--ease-hover); --transition-base: var(--dur-base) var(--ease-hover); /* --- Слои (z-index) ----------------------------------------------------- */ --z-header: 100; --z-backdrop: 90; --z-skiplink: 200; --z-splash: 1000; /* заставка выше всего: она закрывает страницу */ } @media (min-width: 48em) { :root { --header-h: 4.75rem; /* 76px при обычном шрифте */ } }