/* ============================================================================ ГУСІ — дизайн-токены Единственный источник правды для цвета, типографики и сетки. Значения взяты из Figma itEmakumQakgTMyOwgVs1z (desktop 2001:3 / mobile 2104:21). ========================================================================= */ :root { /* -------------------------------------------------------------------- ЮНИТ МАКЕТА --u — это ровно 1 пиксель макета. Все размеры и координаты в проекте записываются как calc(<число из Figma> * var(--u)), поэтому вёрстка масштабируется пропорционально и совпадает с макетом на любой ширине. -------------------------------------------------------------------- */ --design-w: 1920; /* --u-page — юнит страницы, --u — юнит того куска, где он читается. Обычно они равны; подвал переопределяет --u на свою долю от страничного и этим одним числом ужимает всю свою композицию. Через себя (--u: calc(var(--u) * k)) так сделать нельзя — ссылка на собственное значение делает свойство недействительным. */ --u-page: calc(100vw / var(--design-w)); --u: var(--u-page); /* Подвал занимает кадр макета целиком — 1920×1080, как фрейм 2089:53. Одно число задаёт и его высоту, и юнит, которым набрана его композиция; при 1 подвал живёт в тех же юнитах, что вся страница. */ --footer-k: 1; --footer-h: calc(1080 * var(--u-page) * var(--footer-k)); /* -------------------------------------------------------------------- ЦВЕТ -------------------------------------------------------------------- */ --c-brand: #a96dcd; /* основной сиреневый — весь текст и обводки */ --c-ink: #1e1e1e; /* тёмные секции (мерч, подвал) */ --c-paper: #ffffff; /* светлые секции */ --c-brand-50: rgba(169, 109, 205, 0.5); --c-paper-50: rgba(255, 255, 255, 0.5); --c-paper-80: rgba(255, 255, 255, 0.8); /* Два градиента макета, оба от сиреневого к белому. Вертикальный обрывается на 91.827% (панель «Дызайн гусей», карточки мерча, подвал), горизонтальный доходит до 100% (полоса под геро, панель «Беларускія традыцыі»). Стопы сверены по пикселям экспорта Figma. */ --grad-panel: linear-gradient(180deg, var(--c-brand-50) 0%, var(--c-paper-50) 91.827%); --grad-h: linear-gradient(90deg, var(--c-brand-50) 0%, var(--c-paper-50) 100%); /* -------------------------------------------------------------------- ТИПОГРАФИКА — СТРОГАЯ ШКАЛА Уровней семь, и шаг между ними один и тот же — ≈1.35 (кварта): 22 · 30 · 40 · 72 · 80 · 100 · 800. Раньше рабочих кеглей было ровно два — 100 у всех заголовков и 30 у всего остального, — и страница читалась как «крупное» и «мелкое»: подзаголовок внутри панели («ЧАМУ МЕНАВІТА БІРУЛЬКІ?») спорил в весе с названием секции над ним, а подводка под заголовком ничем не отличалась от обычного абзаца. Три уровня добавлены не «для разнообразия», у каждого своя работа: H2 (72) — заголовок ВНУТРИ секции, он обязан быть меньше её названия; LEAD (40) — одна фраза-подводка под заголовком, она крупнее абзаца, но не заголовок; SMALL (22) — подпись-кнопка под товаром, самый мелкий уровень страницы. Внутри уровня кегль одинаков без исключений. Ни один элемент не имеет права на «свой» размер мимо этой шкалы. -------------------------------------------------------------------- */ --font-display: "Alumni Sans SC", "Oswald", "Arial Narrow", sans-serif; /* Рукописная гарнитура макета. В Figma ей набраны все «кисточные» надписи («бірулька», «гусі па-беларуску», «крэк-крэк» …) и пункты меню. Сами надписи на странице стоят картинками — Figma отдала их контурами, — а меню набирается текстом, и ему нужен файл шрифта: положите ShaltaiW10 в assets/fonts (см. @font-face в components.css). Пока файла нет, меню набирается запасной гарнитурой и не ломается. */ --font-hand: "ShaltaiW10", var(--font-display); --fs-display: calc(800 * var(--u)); /* L0 — «ГУСІ» в подвале */ --fs-h1: calc(100 * var(--u)); /* L1 — h1 + названия секций */ --fs-logo: calc(80 * var(--u)); /* L2 — логотип */ --fs-h2: calc(72 * var(--u)); /* L3 — заголовок внутри секции, меню */ --fs-lead: calc(40 * var(--u)); /* L4 — подводка под заголовком */ --fs-nav: calc(40 * var(--u)); /* L4 — МЕНЮ / МАГАЗІН, тот же кегль */ --fs-body: calc(30 * var(--u)); /* L5 — абзацы, ссылки, кнопки */ --fs-small: calc(22 * var(--u)); /* L6 — подпись-кнопка под товаром */ /* Межстрочный — ровно два токена, третьего не существует. */ --lh-flat: 1; --lh-tight: 0.8; --fw-regular: 400; --fw-bold: 700; /* -------------------------------------------------------------------- СЕТКА Направляющие Figma: контейнер 1800px, поля по 60px. -------------------------------------------------------------------- */ --gutter: calc(60 * var(--u)); --container: calc(1800 * var(--u)); /* -------------------------------------------------------------------- КОМПОНЕНТЫ -------------------------------------------------------------------- */ --btn-radius: calc(25 * var(--u)); --btn-border: calc(2 * var(--u)); --btn-pad-y: calc(10 * var(--u)); --btn-pad-x: calc(55 * var(--u)); --card-radius: calc(30 * var(--u)); --panel-radius: calc(50 * var(--u)); /* -------------------------------------------------------------------- ДВИЖЕНИЕ -------------------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 0.28s; --dur-base: 0.6s; --dur-slow: 1.1s; } /* ---------------------------------------------------------------------- ШИРОКИЕ ЭКРАНЫ Выше 1920 макет не растягиваем бесконечно — фиксируем юнит на 1 и центруем сцену, иначе на 4K текст становится нечитаемо крупным. -------------------------------------------------------------------- */ @media (min-width: 1921px) { :root { --u-page: 1px; } } /* ---------------------------------------------------------------------- МОБИЛЬНЫЙ МАКЕТ Отдельный фрейм Figma 2104:21 — 360px. Юнит пересчитывается на него, шкала шрифтов сохраняет те же 5 уровней в мобильных значениях. -------------------------------------------------------------------- */ @media (max-width: 767px) { :root { --design-w: 360; /* Та же семиступенчатая шкала в мобильных значениях: шаг между уровнями сохранён, поэтому иерархия на узком экране читается так же, как на широком. */ --fs-display: calc(302 * var(--u)); --fs-h1: calc(50 * var(--u)); --fs-logo: calc(50 * var(--u)); --fs-h2: calc(36 * var(--u)); --fs-lead: calc(26 * var(--u)); --fs-nav: calc(20 * var(--u)); --fs-body: calc(20 * var(--u)); --fs-small: calc(15 * var(--u)); --gutter: calc(18 * var(--u)); --container: calc(324 * var(--u)); --btn-radius: calc(25 * var(--u)); --btn-border: calc(2 * var(--u)); --btn-pad-y: calc(10 * var(--u)); --btn-pad-x: calc(36 * var(--u)); --card-radius: calc(20 * var(--u)); --panel-radius: calc(20 * var(--u)); } }