/* ========================================================================== Дизайн-токены темы Karakoyun Источник истины — docs/blocks.md, раздел «Дизайн-токены». Значения сняты с макета «BIG IDEA NEW SITE_MAIN» (docs/design/) и сверены с палитрой действующего сайта karakoyun.kz (тема bigidea-agency-theme). Никаких цветов и размеров вне этого файла. ========================================================================== */ :root { /* --- Цвет ------------------------------------------------------------ */ /* Палитра макета. Имена — как в Color Kit и в пресетах текущего сайта, чтобы значения можно было сверять с ним напрямую. */ --color-navy: #1F3561; /* oxford-blue: тёмные секции, футер, карточки */ --color-primary: #53C3F1; /* soft-blue: заливка кнопок */ --color-accent: #007FC4; /* brilliant-blue: акцент в заголовках, ссылки */ --color-accent-light: #A5DAF1; /* casual-blue: контуры номеров, декор */ --color-text: #222222; /* burnt-umber: основной текст */ /* Фоны секций и карточек */ --color-bg: #FFFFFF; --color-bg-light: #DBF0F9; /* cool-aqua: светлые секции и чётные карточки */ --color-bg-grey: #F2F2F2; /* light-gray: нечётные карточки */ --color-bg-card: #F7FBFE; /* карточки услуг на голубой секции */ /* Производные — получены затемнением/осветлением базовых, а не добавлены как новые цвета: палитра должна остаться цельной. */ --color-navy-dark: #172A4D; /* ховер на тёмном */ --color-primary-dark: #35B4E9; /* ховер кнопки */ --color-text-muted: #5E6470; /* подписи, вторичный текст */ --color-border: #DCE3EA; /* границы карточек и полей */ --color-on-dark: #FFFFFF; /* текст и контуры на тёмных секциях */ /* Полупрозрачные — производные от navy */ --color-overlay: rgba(31, 53, 97, 0.40); /* подложка мобильного меню */ --color-overlay-strong: rgba(31, 53, 97, 0.60); /* подложка модального окна */ --color-divider-dark: rgba(255, 255, 255, 0.24);/* разделители на тёмном */ --color-on-dark-tint: rgba(255, 255, 255, 0.24);/* подложка плашек на тёмной панели */ --color-on-dark-muted: rgba(255, 255, 255, 0.88);/* вторичный текст на тёмном */ --color-glass: rgba(255, 255, 255, 0.85);/* шапка при прокрутке: белое матовое стекло */ --color-glass-soft: rgba(255, 255, 255, 0.55);/* плашка поверх фотографии, стекло прозрачнее */ --color-photo-scrim: linear-gradient(180deg, rgba(31,53,97,0) 40%, rgba(31,53,97,0.85) 100%); --color-photo-scrim-strong: linear-gradient(180deg, rgba(31,53,97,0) 30%, rgba(31,53,97,0.72) 62%, rgba(31,53,97,0.96) 100%); /* заголовок прямо на светлой картинке */ /* Контраст. Проверено по WCAG: --color-accent на белом — 4,35; --color-primary на белом — 2,01; --color-navy на белом — 12,07; --color-navy на --color-primary — 6,00. Мелкий текст и ссылки — только --color-accent или --color-navy. --color-primary и --color-accent-light — заливки, иконки, декор. Текст на кнопке — --color-navy: в макете он именно тёмно-синий, пипеткой снято ровно #1F3561. Белый на кнопке дал бы 2,01 и не прошёл. */ /* --- Шрифты ---------------------------------------------------------- */ /* Gilroy — основной шрифт, лежит в теме: assets/fonts/, три начертания 400 / 600 / 700. Google Fonts его не раздаёт, поэтому подключается локально в base.css. Rubik остаётся запасным: он грузится с Google Fonts и подхватится, если Gilroy почему-то не отдастся. Начертаний ровно три, и 500 с 600 берут один и тот же файл — поэтому единственная ступень выше для заголовков это 700. */ --font-heading: 'Gilroy', 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; --font-body: var(--font-heading); /* --- Радиусы --------------------------------------------------------- */ --radius-sm: 6px; /* кнопки, поля формы */ --radius-md: 8px; /* карточки цифр и услуг, стрелки слайдеров */ --radius-logo: 10px; /* плитки логотипов клиентов */ --radius-lg: 12px; /* крупные карточки, изображения */ --radius-xl: 16px; /* карточка цитаты, тёмные CTA-карточки */ --radius-2xl: 24px; /* крупные карточки */ --radius-3xl: 40px; /* карточка первого экрана */ --radius-pill: 999px; /* круглая кнопка «наверх» */ /* --- Сетка и отступы секций ------------------------------------------ */ /* В макете контент занимает 1446px при ширине холста 1920. */ --container: 1440px; --measure-heading: 900px; /* ширина, на которой переносится центрованный заголовок */ --gutter: 24px; --gutter-mobile: 16px; /* Горизонтальный отступ внутри карточек и плашек. Один на всю тему: пока каждый блок задавал свой, левый край текста гулял от блока к блоку — где 24, где 32, где 48, а в квизе и все 64. Вертикальные отступы у блоков разные и дальше, это нормально: карточка услуги и плашка на всю ширину по высоте и не должны совпадать. */ --card-px: var(--space-5); --section-py: 88px; /* между соседними секциями получается 176px */ --section-py-mobile: 52px; /* --- Шкала кеглей ---------------------------------------------------- */ /* Шкала снята с действующего karakoyun.ru: там та же тема, и заголовки набраны пресетами 2-xl / lg / md-2 / md. Числа в vw — это доля от макетной ширины 1440 (40/1440 = 2.778vw), поэтому при 1440px кегль совпадает с макетом, а по краям диапазона упирается в clamp. H1 и заголовок секции на том сайте одного кегля — оставляем так же. */ --fs-base: 1rem; /* 16px */ --fs-h1: clamp(1.875rem, 2.778vw, 3.125rem); /* 30 → 40 → 50 */ --fs-h2: clamp(1.875rem, 2.778vw, 3.125rem); /* 30 → 40 → 50 */ --fs-h3: clamp(1.375rem, 2.083vw, 2.375rem); /* 22 → 30 → 38 */ --fs-h4: clamp(1.125rem, 1.667vw, 1.875rem); /* 18 → 24 → 30 */ --fs-lead: clamp(0.9375rem, 1.389vw, 1.5625rem); /* 15 → 20 → 25 */ --fs-small: 0.875rem; /* 14px, подписи */ --fs-caption: 0.8125rem; /* 13px, мелкое и юридическое */ /* Крупные контурные номера: advantages-numbered, steps */ --fs-display: clamp(3rem, 4.167vw, 4.5rem); /* 48 → 60 → 72 */ --lh-tight: 1.1; /* display-номера */ --lh-heading: 1.2; --lh-base: 1.55; /* Начертание заголовков. Было 500, но в наборе Gilroy 500 и 600 — один файл, то есть заголовки и мелкие подзаголовки весили одинаково. 700 — единственная доступная ступень выше. */ --fw-heading: 700; --fw-light: var(--fw-heading); /* прежнее имя: им пользуются файлы блоков */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Заголовки в макете — прописными, со слегка разреженным трекингом. */ --ls-heading: 0.01em; --ls-title: 0.01em; /* заголовки секций, они набраны заглавными */ --ls-caps: 0.06em; /* eyebrow, надзаголовки */ --ls-display: 0.02em; /* Заголовки секций двухцветные: первая часть --color-accent, вторая --color-text. Контраст акцента на белом 4,35 — для крупного кегля заголовков этого достаточно. */ --color-heading-accent: var(--color-accent); /* Номера в блоках нарисованы контуром, без заливки, и к низу растворяются. */ --number-stroke-width: 2px; --number-stroke-color: var(--color-accent); --number-fade: linear-gradient(180deg, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 0.12) 100%); /* --- Шкала отступов --------------------------------------------------- */ --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; /* --- Границы, тени, переходы ------------------------------------------ */ --border-width: 1px; --border: var(--border-width) solid var(--color-border); --rule-width: 2px; /* декоративная линия у номера в карточках шагов */ --pattern-height: 44px; /* исходная высота фирменного паттерна */ /* Тени в макете едва заметные — карточки держатся на заливке, не на тени. */ --shadow-card: 0 1px 3px rgba(31, 53, 97, 0.05); --shadow-card-hover: 0 8px 24px rgba(31, 53, 97, 0.10); --shadow-modal: 0 24px 64px rgba(31, 53, 97, 0.24); /* Матовое стекло. Размытие вынесено в токен: им пользуются и шапка, и плашка в первом экране, значения должны совпадать. */ --glass-blur: saturate(160%) blur(16px); --transition: 180ms ease; --transition-slow: 320ms ease; --focus-ring: 2px solid var(--color-accent); --focus-ring-offset: 2px; /* --- Слои -------------------------------------------------------------- */ --z-dropdown: 200; --z-header: 300; --z-cookie: 400; --z-modal: 500; /* --- Управление ------------------------------------------------------- */ --control-height: 56px; /* кнопки и поля формы одной высоты */ --control-height-sm: 44px; --control-px: var(--space-6); /* Высота шапки: от неё считается верх выезжающего меню. */ --header-height: 56px; --header-height-lg: 92px; /* с отступом сверху до кнопки */ } /* С планшета карточки и плашки становятся просторнее — вместе с контейнером. */ @media (min-width: 768px) { :root { --card-px: var(--space-6); } } /* Пользователь просил меньше движения — отключаем анимации глобально. */ @media (prefers-reduced-motion: reduce) { :root { --transition: 1ms linear; --transition-slow: 1ms linear; } }