/* ============================================ Kivolo Kids — Design Tokens ============================================ Источник: Figma file "Kivolo Checkout v2" https://www.figma.com/design/vmd9mP4VPWicIsjSa89JTU Импорт в проект: 1. Положи этот файл рядом с index.html (или в assets/) 2. В : 3. В коде используй var(--color-primary) и т.д. вместо хардкода Когда дизайн меняется в Figma — обновляешь только этот файл, и все места, где использованы переменные, перекрашиваются разом. ============================================ */ :root { /* ─── Colors: surface ───────────────────── */ --color-bg: #FFF8EC; /* кремовый фон страницы */ --color-surface: #FFFFFF; /* карточки, поля */ --color-surface-muted: #FFFAF1; /* warm white — карточки на cream */ /* ─── Colors: brand action ──────────────── */ --color-primary: #4D96FF; /* основной CTA, выбранные состояния, ссылки */ --color-primary-pressed: #3979D9; /* нажатое/наведённое состояние CTA */ --color-primary-bg-sel: #EBF3FF; /* пастельная заливка выбранной карточки */ --color-primary-shadow: rgba(77, 150, 255, 0.30); /* тень под CTA */ --color-primary-shadow-soft: rgba(77, 150, 255, 0.18);/* тень под выбранной карточкой */ /* ─── Colors: accents ───────────────────── */ --color-coral: #FF5B7F; /* бейдж «Популярно», акцент */ --color-success: #6BCB77; /* бейдж «-30%», success-сообщения */ --color-success-bg: #E8F8EA; /* пастельная заливка success-плейтов (active-sub plate, badge -30%) */ --color-error: #EF4444; /* красная рамка поля, error text */ --color-error-bg: #FFF1F1; /* пастельная заливка поля при error */ --color-warning: #F59E0B; /* warning-цвет (банеры, рамки) */ --color-warning-bg: #FFF6E5; /* пастельная заливка warning-плейтов */ /* ─── Colors: text ──────────────────────── */ --color-ink: #0B1E3F; /* основной текст (deep navy) */ --color-ink-muted: #647190; /* вторичный текст */ --color-text-inverse: #FFFFFF; /* текст на CTA, на тёмном фоне */ --color-text-link: var(--color-primary); /* ─── Colors: borders ───────────────────── */ --color-border: #EDE8D9; /* warm beige, базовые границы */ --color-border-selected: var(--color-primary); --color-border-error: var(--color-error); /* ─── Colors: overlays ──────────────────── */ --color-overlay-scrim: rgba(11, 30, 63, 0.50); /* затемнение под parental gate */ /* ─── Radii ─────────────────────────────── */ --radius-sm: 8px; /* мелкие элементы (бейджи, чекбоксы) */ --radius-md: 12px; /* средние карточки, поля */ --radius-lg: 16px; /* основные карточки, CTA */ --radius-xl: 24px; /* большие модалки, гейт-оверлей */ --radius-pill: 999px; /* пилюли (iOS badge) */ /* ─── Spacing ───────────────────────────── */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 32px; --space-3xl: 48px; /* ─── Typography: families ──────────────── */ --font-display: 'Fredoka', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; /* ─── Typography: sizes ─────────────────── */ --text-2xs: 10px; --text-xs: 11px; --text-sm: 13px; --text-base: 14px; --text-md: 16px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 24px; --text-3xl: 28px; /* ─── Typography: weights ───────────────── */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ─── Typography: line-heights ──────────── */ --leading-tight: 1.2; /* заголовки */ --leading-snug: 1.4; /* подзаголовки */ --leading-base: 1.5; /* основной текст */ /* ─── Shadows ───────────────────────────── */ --shadow-resting: 0 1px 3px rgba(11, 30, 63, 0.06); --shadow-elevated: 0 4px 12px rgba(11, 30, 63, 0.10); --shadow-modal: 0 12px 30px rgba(11, 30, 63, 0.10); --shadow-cta: 0 6px 16px var(--color-primary-shadow); --shadow-card-sel: 0 4px 12px var(--color-primary-shadow-soft); /* ─── Touch targets ─────────────────────── */ --tap-target-min: 48px; /* WCAG минимум, обязателен для всех тапаемых элементов */ /* ─── Containers ────────────────────────── */ --max-width-portrait: 390px; --max-width-tablet-landscape: 540px; /* центрированная карточка на iPad */ } /* ============================================ Базовые typo-классы (опционально использовать) Если у проекта свой подход к типографике — просто игнорируй и используй --font-* / --text-* ============================================ */ .text-h1 { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-2xl); line-height: var(--leading-tight); color: var(--color-ink); letter-spacing: -0.2px; } .text-h2 { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--color-ink); } .text-body { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--text-md); line-height: var(--leading-base); color: var(--color-ink); } .text-body-medium { font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-md); line-height: var(--leading-base); color: var(--color-ink); } .text-caption { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--text-sm); line-height: var(--leading-base); color: var(--color-ink-muted); } .text-button { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-md); line-height: 1; color: var(--color-text-inverse); } .text-badge { font-family: var(--font-body); font-weight: var(--weight-bold); font-size: var(--text-2xs); letter-spacing: 0.3px; text-transform: uppercase; } /* ============================================ Подключение шрифтов из Google Fonts (положи в начало ): У обоих шрифтов есть кириллица — Russian текст рендерится корректно. ============================================ */ /* ============================================ Адаптивные media queries (3 режима) ============================================ */ /* ─── Phone landscape (компакт) ───────────── iPhone в горизонтали, низкая высота. Тарифы → segmented control, чекбоксы в одну строку. */ @media (orientation: landscape) and (max-height: 500px) { /* пример использования: .tariffs { display: none; } .tariffs-segmented { display: flex; } .consents { flex-direction: row; gap: var(--space-2xl); } */ } /* ─── Tablet landscape ────────────────────── iPad в горизонтали — больше воздуха, можно центрировать карточку. */ @media (orientation: landscape) and (min-height: 600px) { /* пример: .payment-card { max-width: var(--max-width-tablet-landscape); margin: 0 auto; } */ } /* ============================================ Доступность - Минимальный размер тапа: var(--tap-target-min) = 48px - Шрифт текста ввода: минимум 16px (избегаем iOS auto-zoom) - Контраст текста: тестировать по WCAG AA - iOS keyboard fix: ============================================ */