/* ========================================================================== znachenie-imeny.ru — слой дизайн-токенов (редизайн 2026) -------------------------------------------------------------------------- Единственный источник правды по цвету, типографике, радиусам, теням и отступам. Подключается ПЕРВЫМ, до names.min.css: переменные резолвятся в момент использования, поэтому старые правила можно переопределять, не трогая 234 КБ легаси-CSS. Настроение: светлый воздушный фон, крупные скруглённые карточки, мягкие тени вместо жирных рамок, один тёплый акцент. Аудитория: женская — будущие мамы и читательницы про совместимость имён. ========================================================================== */ :root { /* ---------------------------------------------------------------- ЦВЕТ -- Акцент: тёплый розово-коралловый. Один на весь сайт. -ink-вариант затемнён до контраста 5.1:1 на белом — годится для текста (AA для основного кегля), сам --zi-accent для текста НЕ использовать. */ --zi-accent: #E76F62; --zi-accent-hover: #D65B4E; --zi-accent-active: #C24E42; --zi-accent-ink: #B84A40; /* контраст 5.1:1 на белом — для текста */ --zi-accent-soft: #F7C4BC; /* бордюры, разделители в акцентной зоне */ --zi-accent-wash: #FDF1EE; /* заливка карточек, чипов, ховеров */ --zi-accent-wash-2: #FBE6E1; /* Тёплый вторичный тон — только для оттенения, не второй акцент */ --zi-warm: #E9A17C; --zi-warm-wash: #FDF4EE; /* Нейтрали: тёплые, не холодно-серые — иначе фон «синит» */ --zi-ink: #2E2A32; /* основной текст, контраст ~14:1 */ --zi-ink-2: #574F5C; /* вторичный текст, ~7.8:1 */ --zi-ink-3: #8A8190; /* приглушённый, мета, ~3.7:1 */ --zi-ink-4: #B7AFBB; /* плейсхолдеры, отключённое */ --zi-line: #EDE6EA; /* волосяные линии */ --zi-line-strong: #E0D6DC; --zi-surface: #FFFFFF; /* карточки */ --zi-surface-2: #FCFAFA; /* вложенные поверхности */ --zi-bg: #FBF7F6; /* фон страницы — тёплый, почти белый */ --zi-bg-2: #F6EFEE; /* чередующиеся секции */ /* Состояния */ --zi-success: #4E9A72; --zi-success-wash: #EAF5EF; --zi-warning: #C98A2E; --zi-warning-wash: #FBF3E4; --zi-danger: #C0453F; --zi-danger-wash: #FBECEB; --zi-info: #5B7FA8; --zi-info-wash: #EDF2F8; /* Пол — для фильтра «Пол» на главной */ --zi-female: #E0709A; --zi-female-wash: #FDEFF4; --zi-male: #5B8FB9; --zi-male-wash: #EDF4F9; /* Градиенты айдентики (логотип, акцентные плашки) */ --zi-grad-accent: linear-gradient(135deg, #F0907F 0%, #E76F62 55%, #D8608F 100%); --zi-grad-soft: linear-gradient(160deg, #FFF6F3 0%, #FDEDF2 100%); /* ---------------------------------------------------------- ТИПОГРАФИКА -- Заголовки — Playfair Display (серифная, женственная, с кириллицей). Текст — Nunito (мягкая гротеска, высокая читаемость, кириллица). Оба грузятся с Google Fonts с font-display: swap. */ --zi-font-display: 'Playfair Display', 'Georgia', 'Times New Roman', serif; --zi-font-body: 'Nunito', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; /* Плавные размеры: не ломаются между 320px и 1440px. --------------------------------------------------------------------- Ревизия 2: базовый кегль поднят с 16px до 20px. Причина — легаси задавало body{font-size:14px}, и весь контент читался мелко. ВАЖНО: значения заданы в px, а не в rem. names.min.css содержит html{font-size:10px} — старый приём «1rem = 10px». Из-за него любая rem-шкала сжимается до 0.625 от задуманного: 1.25rem давало 12.5px вместо 20px. Менять html{font-size} нельзя — на нём держатся все легаси-размеры. Поэтому редизайн живёт в абсолютных px. */ --zi-fs-hero: clamp(38px, 28px + 2.9vw, 64px); /* 38 -> 64 px */ --zi-fs-h1: clamp(34px, 26px + 2.2vw, 54px); /* 34 -> 54 px */ --zi-fs-h2: clamp(26px, 21px + 1.1vw, 36px); /* 26 -> 36 px */ --zi-fs-h3: clamp(22px, 19px + 0.6vw, 26px); /* 22 -> 26 px */ --zi-fs-h4: clamp(19px, 18px + 0.32vw, 22px); /* 19 -> 22 px */ --zi-fs-lead: clamp(21px, 19px + 0.45vw, 24px); /* 21 -> 24 px */ --zi-fs-base: 20px; /* 20 px */ --zi-fs-sm: 18px; /* 18 px */ --zi-fs-xs: 16px; /* 16 px */ --zi-fs-micro: 14px; /* 14 px, только счётчики */ --zi-lh-tight: 1.15; --zi-lh-head: 1.25; --zi-lh-base: 1.65; --zi-lh-loose: 1.8; --zi-fw-regular: 400; --zi-fw-medium: 600; --zi-fw-bold: 700; --zi-tracking-tight: -0.015em; --zi-tracking-wide: 0.06em; /* -------------------------------------------------------------- ФОРМА --- */ --zi-radius-xs: 8px; --zi-radius-sm: 12px; --zi-radius-md: 18px; --zi-radius-lg: 26px; --zi-radius-xl: 36px; --zi-radius-pill: 999px; /* Тени мягкие и тёплые: тень — замена рамкам, а не довесок к ним */ --zi-shadow-xs: 0 1px 2px rgba(46, 42, 50, 0.04); --zi-shadow-sm: 0 2px 10px rgba(46, 42, 50, 0.05); --zi-shadow-md: 0 8px 24px rgba(46, 42, 50, 0.07); --zi-shadow-lg: 0 16px 44px rgba(46, 42, 50, 0.09); --zi-shadow-accent: 0 10px 26px rgba(231, 111, 98, 0.26); --zi-ring: 0 0 0 3px rgba(231, 111, 98, 0.28); /* ------------------------------------------------------------ ОТСТУПЫ --- */ --zi-space-1: 4px; --zi-space-2: 8px; --zi-space-3: 12px; --zi-space-4: 16px; --zi-space-5: 24px; --zi-space-6: 32px; --zi-space-7: 40px; --zi-space-8: 56px; --zi-space-9: 72px; --zi-space-10: 96px; /* ------------------------------------------------------------- СЕТКА ---- */ --zi-container: 1220px; --zi-gutter: clamp(16px, 3.2vw, 32px); --zi-layout-gap: clamp(20px, 2.4vw, 36px); --zi-sidebar-width: clamp(260px, 24vw, 320px); /* ------------------------------------------------------------ ДВИЖЕНИЕ -- */ --zi-ease: cubic-bezier(0.2, 0.7, 0.3, 1); --zi-dur-fast: 0.15s; --zi-dur: 0.24s; --zi-dur-slow: 0.4s; --zi-z-header: 100; --zi-z-overlay: 900; } @media (prefers-reduced-motion: reduce) { :root { --zi-dur-fast: 0.01ms; --zi-dur: 0.01ms; --zi-dur-slow: 0.01ms; } }