/* ==========================================================================
ALTYN — Design Tokens
Ре-тематизация референса tbank.ru: сетка, размеры, радиусы и типографическая
иерархия референса сохранены, цвета и шрифт заменены на фирменный стиль Altyn.
========================================================================== */
/* Google Fonts: Inter (400 regular, 500 medium, 600 semibold).
Для продакшна предпочтительнее подключать через
и в HTML — @import оставлен здесь для того,
чтобы файл токенов был самодостаточным. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
:root {
/* ==========================================================================
1. ЦВЕТА (Colors)
========================================================================== */
/* -- Базовые роли (замена по функциональному назначению из референса) -- */
--color-accent: #FFD119; /* было #ffdd2d — акцентный цвет / CTA */
--color-accent-text: #161514; /* было #333 — текст на акцентных кнопках */
--color-bg: #F6F7F8; /* было #f6f7f8 — фон страницы (совпадает с гайдбуком Altyn) */
--color-card-bg: #E9ECF0; /* было #e2e8f0 — фон карточек (ближайший оттенок шкалы Altyn) */
--color-white: #FFFFFF; /* чистый белый */
/* -- Фон хиро-блока about.html — самостоятельный градиент, не общий
--color-bg. #EEF0F4 близок к --color-card-bg, но не совпадает точно —
оставлен отдельным значением по той же логике "уникальный hero-блок". */
--gradient-about-hero: linear-gradient(to bottom, var(--color-white), #EEF0F4);
/* -- Шкала жёлтого, 10 уровней (брендбук Altyn) --
ВАЖНО (правило брендбука): жёлтый нельзя использовать для мелкого текста —
недостаточная контрастность. Допустим только для заголовков, кнопок
и крупных акцентных элементов. */
--color-accent-900: #572D00;
--color-accent-800: #874E00;
--color-accent-700: #B17500;
--color-accent-600: #D69500;
--color-accent-500: #EFAB00;
--color-accent-400: #FFD119; /* базовый акцент, = --color-accent */
--color-accent-300: #FEC200;
--color-accent-200: #FFD95D;
--color-accent-100: #FFE9A4;
--color-accent-50: #FFF2C8;
/* -- Шкала серого/тёмного, 9 уровней --
для второстепенного текста, бордеров и подложек */
--color-gray-900: #161514;
--color-gray-800: #35302F;
--color-gray-700: #4E4948;
--color-gray-600: #837F7F;
--color-gray-500: #B9B7B7;
--color-gray-400: #D1D1D0;
--color-gray-300: #E9ECF0; /* = --color-card-bg */
--color-gray-200: #F6F7F8; /* = --color-bg */
--color-gray-100: #FFFFFF; /* = --color-white */
/* ==========================================================================
Семантические токены
Алиасы поверх шкал выше — называют роль цвета, а не конкретный оттенок,
чтобы вёрстка не ссылалась на уровень шкалы напрямую.
========================================================================== */
--color-text-primary: var(--color-gray-900); /* было --color-text — основной текст */
--color-text-secondary: var(--color-gray-600); /* было var(--color-gray-700) — приглушённый/второстепенный текст: подзаголовки, лид-абзацы, ссылки-подписи */
--color-text-disable: var(--color-gray-500); /* новое — неактивный/отключённый текст (например «Раскрытие информации», копирайт) */
/* ==========================================================================
2. ТИПОГРАФИКА (Typography)
Масштаб размеров и иерархия сохранены из референса, шрифт заменён на Inter.
========================================================================== */
--font-family: 'Inter', system-ui, sans-serif;
--font-weight-semibold: 600; /* заголовки */
--font-weight-medium: 500; /* акценты */
--font-weight-regular: 400; /* основной текст */
/* line-height выровнен по сетке 8px. Адаптивный паттерн десктоп→планшет→
мобиль для heading-токенов единый (font-size -4px/-6px, line-height
-6px/-6px — выведено из уже принятого на главной для h1/h3). */
--font-size-hero-title: 40px;
--line-height-hero-title: 48px;
/* .hero__title И .about-hero__title — единый общий токен на оба заголовка */
--font-size-heading-2: 36px;
--line-height-heading-2: 40px;
/* Резерв на будущее, пока не используется */
--font-size-heading-3: 32px;
--line-height-heading-3: 40px;
/* .section__title */
--font-size-heading-4: 24px;
--line-height-heading-4: 28px;
/* Резерв */
--font-size-subtitle: 18px;
--line-height-subtitle: 26px;
/* .hero__subtitle, .about-hero__lede, .card__title--sm, .governance__name */
--font-size-body-l: 18px;
--line-height-body-l: 24px;
/* Резерв */
--font-size-body-m: 16px;
--line-height-body-m: 24px;
/* body, .card__description, .section__lede, .section__list li,
.section__list--ordered li::before, .about-hero__text (десктоп/планшет) */
--font-size-body-s: 14px;
--line-height-body-s: 20px;
/* .footer-col__text, .site-footer__copyright, .footer-col__list a —
cookie-баннер на этом токене НЕ сидит (фиксирован отдельно) */
--font-size-body-xs: 12px;
--line-height-body-xs: 14px;
/* .caption */
--font-size-card-title: 22px;
--line-height-card-title: 28px;
/* .card__title (сервисные карточки главной) */
--font-size-btn: 14px;
/* .btn — самостоятельное значение вне общей шкалы */
/* ==========================================================================
3. ФОРМА И ОТСТУПЫ (Shape & Spacing)
Не бренд-специфично, сохранено из референса как часть подачи и масштаба.
========================================================================== */
--radius-button: 12px;
--radius-card: 24px;
--radius-s: 8px; /* мелкие элементы (например cookie-баннер и его кнопка) — не совпадает с button/card */
--container-max-width: 1104px;
/* -- Отступы, шкала 8px -- */
--space-xs: 8px;
--space-sm: 16px;
--space-md: 24px;
--space-lg: 32px;
--space-xl: 48px;
--space-2xl: 64px;
/* -- Отступ от нижнего края шапки до заголовка в hero -- */
--space-header-gap: 72px;
/* -- Высота шапки (используется для расчёта высоты hero) -- */
--header-height: 72px;
/* ==========================================================================
Контентный ритм (Content rhythm)
Именованные семантические токены для повторяющихся вертикальных отступов
внутри карточек услуг (#services .card) и текстовых блоков
(.feature-card__content: #mezhbank, #legal-entities, #app) — фиксируют
единое правило для построения подобных блоков в будущем. Значения
ссылаются на базовую шкалу --space-* там, где число совпадает; там, где
в шкале 8/16/24/32/48/64 подходящего значения нет (20px, 6px, 4px,
10px, 12px), заданы напрямую — переопределения по брейкпоинтам ниже.
========================================================================== */
/* -- #services (.card) -- */
--card-icon-title-gap: var(--space-md); /* 24px — иконка → .card__title */
--card-title-desc-gap: var(--space-xs); /* 8px — .card__title → .card__description */
--section-heading-gap: var(--space-lg); /* 32px — H3 секции → .cards__grid */
/* -- .feature-card__content (#mezhbank, #legal-entities, #app) -- */
--content-heading-gap: var(--space-sm); /* 16px — заголовок → первый абзац/список */
--content-paragraph-gap: 12px; /* абзац→абзац, пункт→пункт — нет соответствия в шкале --space-* */
--content-top-padding: var(--space-xl); /* 48px — верхний паддинг .feature-card__content */
--content-lede-list-gap: var(--space-md); /* 24px — абзац → список (#app) */
--content-item-button-gap: var(--space-lg); /* 32px — последний пункт → кнопка (#app) */
/* -- Переход между контентом и футером -- */
--section-footer-gap: 56px; /* нет соответствия в шкале --space-* */
}
/* --space-header-gap задан под десктоп (72px). На планшете и мобильном это
слишком много — переопределяем токен по брейкпоинтам значениями из той же
шкалы отступов, чтобы получить плавную прогрессию 24 → 48 → 72px. */
@media (max-width: 1024px) {
:root {
--space-header-gap: var(--space-xl); /* 48px — планшет */
/* -- Контентный ритм: планшет -- */
--card-icon-title-gap: 20px; /* нет соответствия в шкале --space-* */
--card-title-desc-gap: 6px; /* нет соответствия в шкале --space-* */
--section-heading-gap: var(--space-md); /* 24px */
--content-heading-gap: 12px; /* нет соответствия в шкале --space-* */
--content-paragraph-gap: 10px; /* нет соответствия в шкале --space-* */
--content-top-padding: var(--space-lg); /* 32px */
--content-lede-list-gap: 20px; /* нет соответствия в шкале --space-* */
--content-item-button-gap: var(--space-md); /* 24px */
--section-footer-gap: 44px; /* нет соответствия в шкале --space-* */
}
}
@media (max-width: 640px) {
:root {
--space-header-gap: var(--space-md); /* 24px — мобильный */
--header-height: 60px; /* было 72px — на мобильном шапка компактнее (~56-64px) */
/* -- Контентный ритм: мобильный -- */
--card-icon-title-gap: var(--space-sm); /* 16px */
--card-title-desc-gap: 4px; /* нет соответствия в шкале --space-* */
--section-heading-gap: var(--space-sm); /* 16px */
--content-heading-gap: var(--space-xs); /* 8px */
--content-paragraph-gap: var(--space-xs); /* 8px */
--content-top-padding: var(--space-md); /* 24px */
--content-lede-list-gap: var(--space-sm); /* 16px */
--content-item-button-gap: var(--space-sm); /* 16px */
--section-footer-gap: var(--space-lg); /* 32px */
}
}
/* Адаптивные переопределения типографических токенов — те же два
брейкпоинта, что и у остальных адаптивных токенов, эффект применяется
везде, где токены используются, без правок в каждом компоненте отдельно. */
@media (max-width: 1024px) {
:root {
--font-size-hero-title: 36px;
--line-height-hero-title: 42px;
--font-size-heading-2: 32px;
--line-height-heading-2: 34px;
--font-size-heading-3: 28px;
--line-height-heading-3: 34px;
--font-size-heading-4: 20px;
--line-height-heading-4: 22px;
/* subtitle не переопределяется — 18/26 совпадает с десктопом */
--radius-card: 20px; /* было 24px — на меньшей ширине карточки радиус должен казаться той же долей */
--font-size-card-title: 18px;
--line-height-card-title: 26px;
}
}
@media (max-width: 640px) {
:root {
--font-size-hero-title: 30px;
--line-height-hero-title: 36px;
--font-size-heading-2: 26px;
--line-height-heading-2: 28px;
--font-size-heading-3: 22px;
--line-height-heading-3: 28px;
--font-size-heading-4: 14px;
--line-height-heading-4: 16px;
--font-size-subtitle: 16px;
--line-height-subtitle: 24px;
--font-size-body-l: 16px;
--line-height-body-l: 22px;
--font-size-body-m: 14px; /* планшет остаётся на базовом значении (16px) */
--line-height-body-m: 22px;
--font-size-body-s: 13px;
--line-height-body-s: 20px;
--radius-card: 16px; /* было 20px на планшете, 24px на десктопе */
--font-size-card-title: 16px;
--line-height-card-title: 24px;
}
}