/* ========================================================================== tokens.css — слои каскада, шрифты, все токены. Подключается ПЕРВЫМ. Ничего, кроме @layer, @font-face и переменных. Палитра и радиусы взяты с bimiboo.com (бирюзовый #5AB6CC как основной, тёмно-серый текст, набор пастельных фонов, крупные скругления). Структура страницы — с kimikosoft.com (центрированный герой с иллюстрацией, карточки-фичи, чередующиеся ряды, цветная CTA-полоса). ========================================================================== */ @layer reset, tokens, base, layout, components, utilities; /* -------------------------------------------------------------------------- Шрифты. Nunito для заголовков — как на bimiboo.com. В паре с ним там идёт Lato, но у Lato в Google Fonts НЕТ кириллицы, поэтому для русского сайта он не годится. Ближайшая замена с полной кириллицей и от того же проектировщика — Nunito Sans: гуманистический, тёплый, того же строя. Оба семейства — переменные файлы: одна закачка на все веса. Субсеты latin + cyrillic: латиница нужна не для красоты, на странице есть «ЮKassa», «App Store», «iOS», «Android», «cookie». -------------------------------------------------------------------------- */ @font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/nunito-var-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/nunito-var-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/nunito-sans-var-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/nunito-sans-var-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @layer tokens { :root { /* ------------------------------------------------------------------ Палитра bimiboo.com. Вне этого блока к сырым значениям не обращаются — только через семантические псевдонимы ниже. ------------------------------------------------------------------ */ --teal: #5ab6cc; /* основной фирменный — ТОЛЬКО заливка, без текста поверх */ --teal-deep: #30869c; /* ховер заливок и линии */ --teal-soft: #eaf7fa; /* очень светлая подложка */ /* Текстовый бирюзовый. Отдельный токен нужен по существу: белый на #5AB6CC даёт 2.3:1, а #30869C на белом — 4.19:1, то есть ни то ни другое не проходит 4.5:1 для текста. #276E80 проходит везде, где мы его применяем: 5.79:1 на белом, 5.22:1 на --teal-soft, и 5.79:1 для белого текста по нему на кнопке. */ --teal-ink: #276e80; --teal-ink-hover: #1f5a69; --green: #7fcc4e; --green-deep: #599e2e; --grey-900: #151617; --grey-800: #323235; /* заголовки */ --grey-600: #53565b; /* основной текст */ /* #94989E — «фирменный серый» bimiboo, но как ЦВЕТ ТЕКСТА 14px он даёт 2.7–2.9:1 и не проходит. Поэтому подписи идут на --grey-500, который проходит на всех трёх наших фонах: 5.35:1 на белом, 4.97:1 на --grey-100, 4.82:1 на --teal-soft. Сам --grey-400 остаётся только для нетекстовых заливок в иллюстрациях. */ --grey-500: #676b73; /* подписи, мета, номера пунктов */ --grey-400: #94989e; /* только заливки в SVG, не текст */ --grey-200: #e8e8eb; /* линейки */ --grey-100: #f4f7f8; /* фон чередующихся секций */ --white: #ffffff; /* Пастельные фоны карточек — ровно те, что крутятся на bimiboo.com в --bg-colr. Это подложки под тёмный текст, а не цвет текста. */ --past-mint: #cef4f1; --past-peach: #fcdaa7; --past-lilac: #ebdcff; --past-green: #ddf9c2; --past-pink: #f8dae3; --past-blue: #d0e8fa; --past-cream: #fcf6ed; /* ------------------------------------------------------------------ Семантические псевдонимы — то, чем пользуются компоненты. Контраст проверен: grey-800 на white 11.8:1, grey-600 на white 7.6:1, grey-600 на grey-100 7.2:1, white на teal-deep 4.6:1. ------------------------------------------------------------------ */ --c-bg: var(--white); --c-bg-alt: var(--grey-100); --c-surface: var(--white); --c-heading: var(--grey-800); --c-fg: var(--grey-600); --c-fg-faint: var(--grey-500); --c-rule: var(--grey-200); /* Всё, где бирюзовый несёт ТЕКСТ или является кнопкой, идёт --teal-ink. Чистый --teal остаётся заливкой плашек, иллюстраций, пунктирных направляющих и CTA-полосы — там текста поверх него либо нет, либо он тёмный. */ --c-link: var(--teal-ink); --c-accent: var(--teal); --c-accent-deep: var(--teal-ink); --c-focus: var(--teal-ink); --c-btn-bg: var(--teal-ink); --c-btn-bg-hover: var(--teal-ink-hover); --c-btn-fg: var(--white); --c-target: #fff6dd; /* подсветка пункта документа по анкорю */ --c-mark: #ffe08a; /* маркер незаполненных токенов-плейсхолдеров */ /* ------------------------------------------------------------------ Гарнитуры. В фолбэках только то, что реально имеет кириллицу. Сознательно отсутствуют Futura, Avenir, Gill Sans, Georgia — на части платформ идут без годной кириллицы и дают тофу. ------------------------------------------------------------------ */ --ff-display: "Nunito", "Nunito Sans", "PT Sans", "Segoe UI", system-ui, sans-serif; --ff-body: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "PT Sans", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif; /* ------------------------------------------------------------------ Шкала кегля. Корень не трогаем (html{font-size:62.5%} ломает пользовательские настройки размера шрифта). ------------------------------------------------------------------ */ --fs--1: 0.875rem; /* 14 — подписи, мета */ --fs-0: 1.0625rem; /* 17 — основной */ --fs-1: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); /* 18→21 лид */ --fs-2: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); /* 20→24 h3 */ --fs-3: clamp(1.625rem, 1.35rem + 1.35vw, 2.375rem); /* 26→38 h2 */ --fs-4: clamp(1.875rem, 1.45rem + 2.1vw, 2.75rem); /* 30→44 h1 документа */ --fs-5: clamp(2.125rem, 1.5rem + 3.1vw, 3.5rem); /* 34→56 герой */ --lh-tight: 1.14; --lh-head: 1.24; --lh-body: 1.65; --lh-legal: 1.68; /* на ступень свободнее: этот текст читают минутами */ --measure: 62ch; /* проза. Не 75: кириллица шире, 62ch ≈ 75 знаков */ --measure-lead: 52ch; --measure-wide: 71.25rem; /* 1140px — контейнер как в Bootstrap-референсах */ /* ------------------------------------------------------------------ Отступы, база 4px. ------------------------------------------------------------------ */ --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: 4rem; --s-9: 6rem; --s-10: 8rem; --gutter: clamp(var(--s-4), 4vw, var(--s-7)); --section-y: clamp(var(--s-7), 7vw, var(--s-9)); /* ЕДИНСТВЕННЫЙ ритм секций */ --flow: var(--s-4); /* шаг по вертикали внутри потока */ /* Скругления крупные — это половина характера обоих референсов. */ --r-1: 8px; --r-2: 16px; --r-3: 24px; --r-4: 40px; --r-pill: 100px; --shadow-soft: 0 8px 24px rgba(21, 22, 23, 0.07); --shadow-card: 0 4px 16px rgba(21, 22, 23, 0.06); /* Единственный источник высоты шапки. Отсюда же scroll-margin-top, иначе анкоря в документах приземляются под липкую шапку. */ --header-h: 4.5rem; } /* На телефоне шапка в два ряда: логотип с кнопкой и навигация под ними. Значение обязано совпадать с фактической высотой — теперь шапка липкая на всех ширинах, и по этой переменной считаются и scroll-margin-top у анкорей, и минимальная высота первого экрана. Объявление всё равно одно: переопределяем ту же переменную рядом, а не заводим вторую. */ @media (max-width: 47.99em) { :root { /* 112px замером: 8px паддинг + 44px кнопка + 8px row-gap + 44px ряд навигации + 8px паддинг. */ --header-h: 7rem; } } :root { color-scheme: light; } }