/* ============================================================ МатКапитал24 — редизайн главной. Слой токенов. Нормализация макета Figma "МатКапитал24 (Copy)" (node 4:2457). Источник значений — REST API Figma, не скриншот. Каждый блок ниже: что было в макете -> что стало и почему. Переменные, уже существующие в теме (assets/css/main.css), помечены [ТЕМА] — при посадке на WP они не дублируются. ============================================================ */ :root { /* --- Шрифты ------------------------------------------------ В макете 4 семейства: Inter x221, Manrope x35, Helvetica x3, Georgia x1. Helvetica — мусор (случайный скриншот меню Google Lens на Y≈3675). Georgia — одна декоративная кавычка в блоке эксперта. Реальных два, и оба уже подключены в теме. */ --font-heading: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif; /* [ТЕМА] */ --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* [ТЕМА] */ --font-quote: Georgia, 'Times New Roman', serif; /* --- Размер шрифта ----------------------------------------- Было 31 значение, стало 12. Максимальное отклонение +1px. 9, 9.98, 10 -> 10 11, 11.5, 11.97, 12, 12.5, 12.89 -> 11 / 12 (см. ниже) 13, 13.5 -> 13 14, 14.5, 14.63 -> 14 15, 15.47 -> 15 16, 16.44 -> 16 17, 17.19 -> 17 17.8, 18, 18.1 -> 18 19, 19.57, 20 -> 20 26, 26.61 -> 26 29 -> 30 34 -> 34 Дробные значения — артефакт масштабирования вложенных групп в Figma (19.568 = 17.8 x 1.1), а не замысел. */ --fs-10: 10px; /* микро-лейблы: «Топ», метрики карточек, «Учеников» */ --fs-11: 11px; /* «Отзывы», дата статьи, мелкий футер */ --fs-12: 12px; /* бейджи «Для детей 4–8 лет», «Скидка 10%» */ --fs-13: 13px; /* описания карточек, анонсы статей, eyebrow-метки */ --fs-14: 14px; /* меню, кнопка «Получить предложение», футер */ --fs-15: 15px; /* ссылки футера, «Все предложения» */ --fs-16: 16px; /* лид-абзацы, заголовки преимуществ */ --fs-17: 17px; /* логотип, заголовки статей */ --fs-18: 18px; /* заголовки карточек курсов */ --fs-20: 20px; /* вопросы FAQ, «10 000+ семей» */ --fs-26: 26px; /* «Получить гид в MAX», плюс в аккордеоне */ --fs-30: 30px; /* заголовок CTA-баннера */ --fs-34: 34px; /* H1 и все H2 секций */ /* --- Начертания -------------------------------------------- В макете ровно 5, все есть в подключённых весах Manrope. ВНИМАНИЕ при посадке на WP: Inter в теме грузится только 400;500;600, а макет использует Inter 700 и 800. Нужно расширить запрос Google Fonts. */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* --- Межстрочный ------------------------------------------ Было 42 значения (11.5, 14.38, 18.15, 19.58, 23.68…), их свели к четырём коэффициентам по роли текста. Коэффициенты подобрали «на глаз» (1.3/1.45/1.7) — из-за этого почти весь текст на странице шёл разреженнее макета. По заказчику типографика должна совпадать один в один, поэтому пересчитано по нодам: в макете отношение строки к кеглю почти везде 1.21 (20.6/17, 24.2/20, 16.9/14, 15.7/13, 18.2/15), у кнопок и подписей — около 1.65. */ --lh-tight: 1.15; /* мелкие подписи и крупные заголовки */ --lh-snug: 1.21; /* заголовки карточек */ --lh-normal: 1.21; /* основной текст */ --lh-loose: 1.65; /* кнопки, подписи под кнопками */ /* --- Цвет ------------------------------------------------- Было 91 уникальное значение на 835 заливок, стало 21. Семь совпали с темой точно — они помечены [ТЕМА]. */ /* Синие: в макете пять почти одинаковых оттенков — #0b73ff x56, #006bff x18, #0b6dff x15, #0767f6 x14, #0042c8 x10. Различия ниже порога восприятия, сведены к двум. */ --color-primary: #2563EB; /* [ТЕМА] x60 основной акцент */ --color-primary-dark: #1D4ED8; /* [ТЕМА] ховер */ --color-primary-bright: #0B73FF; /* x56 градиенты, hero */ --color-primary-deep: #0042C8; /* x10 низ градиента */ --color-primary-soft: #8AB8FF; /* x27 светлый акцент */ --color-badge-topic: #0767FB; /* плашка рубрики в карточке статьи (нода 21:912) */ --color-dot-idle: #BFC1C6; /* неактивные точки слайдера (проба пикселя) */ --color-badge-top: #10B981; /* плашка «топ» в меню (ноды 6:2498, 42:1610) */ --color-decor-dot: #0B73FF; /* точки декора у блока пунктов (нода 20:566) */ --color-quote-name: #006BFF; /* имя эксперта в карточке цитаты (ноды 20:688, 80:3596) */ --color-quote-role: #7B8AAA; /* его должность (ноды 20:689, 80:3597) */ --color-brand-blue: #0042C8; /* «Мат» и «24» в логотипе (ноды 6:2493, 42:1656) */ --color-brand-red: #EC2A45; /* «Капитал» в логотипе */ --color-footer-divider: #E4ECFA; /* линии между колонками подвала (ноды 87:510, 87:511) */ --color-mail-plate: #EEF4FF; /* плашка под конвертом в подвале (нода 42:1590) */ --color-secure-bg: #F7FAFF; /* подложка блока «Защита данных» (нода 42:1595) */ --color-secure-border: #E2EBFA; /* её рамка */ --color-secure-plate: #E8F0FF; /* плашка под щитом (нода 42:1596) */ --color-cta-mob-bg: #0540C9; /* фон мобильного баннера под иллюстрацией */ --color-cta-text: #0563F9; /* текст кнопки CTA-баннера (нода 51:2332) */ --color-cta-shadow: #98B9EF; /* её тень (нода 51:2330) */ --color-points-bg: #E6EFFF; /* плашка нижних пунктов эксперта (нода 20:691) */ --color-points-divider: #AFC6EB; /* разделители в ней (ноды 20:698, 20:701) */ --color-plate-rating: #FFF5D8; /* подложка под звезду рейтинга (нода 329:37) */ --color-plate-students: #EAF9F0; /* подложка под иконку учеников (нода 329:44) */ --color-faq-border: #E6EEFC; /* рамка строки FAQ (нода 40:1489) */ --color-faq-plus-border: #E0EAFA;/* рамка кружка «+» (нода 40:1493) */ --color-primary-pale: #DDE7FA; /* x16 фон блоков (+#e6eefc)*/ --color-primary-light: #EFF6FF; /* [ТЕМА] фон-подложка */ /* Нейтральные — полностью совпали с темой */ --color-dark: #0F172A; /* [ТЕМА] x88 заголовки */ --color-body: #334155; /* [ТЕМА] x21 основной текст */ --color-muted: #64748B; /* [ТЕМА] x37 вторичный текст */ --color-border: #E2E8F0; /* [ТЕМА] x51 границы */ --color-bg: #F6F8FD; /* [ТЕМА] фон страницы — заливка корневого фрейма 4:2457 (и героя 7:2666). Было #F8FAFC, а body стоял белым. */ --color-white: #FFFFFF; /* [ТЕМА] x212 */ /* Тёмно-синие: #07163d x12, #07163b x10, #081642 x7, #071335, #061542 — пять оттенков одного цвета, сведены к одному. Используются для заголовков FAQ, футера и счётчика в герое. */ --color-navy: #07163D; /* Заголовок H1 в герое — #121d49, заметно синее, чем --color-dark. Оставлен отдельным токеном: разница видна на 34px. */ --color-hero-title: #121D49; /* Лид-абзац героя — #202b57 (не --color-body). */ --color-lead-navy: #202B57; /* Текст карточек в синей секции — #3e5480. */ --color-trust-text: #3E5480; /* Приглушённые сине-фиолетовые (декор, иллюстрации): #586eaf x33, #314b98 x16, #323077 x12, #5b6d94 x10 */ --color-slate-blue: #586EAF; --color-indigo: #314B98; --color-violet: #673296; /* Зелёные: #16a85a x24 — «успех» в бейджах. Тема использует #10B981; расхождение заметное (макет темнее и холоднее), поэтому берём значение макета, а не темы. */ --color-success: #16A85A; --color-success-dark: #059669; /* [ТЕМА] x8 */ --color-success-pale: #EAF9F0; /* x8 фон бейджа */ --color-success-soft: #CFEBDD; /* x8 граница бейджа */ /* Тёплые: #f7a600 x8, #ff8710 x8, #fff5d8 x8 */ --color-warm: #F7A600; --color-warm-alt: #FF8710; --color-warm-pale: #FFF5D8; /* --- Радиусы ---------------------------------------------- Было 21 значение, стало 7. 0.5, 1.32, 2.64 -> 2 (артефакты масштабирования) 4, 6, 6.4 -> 6 [ТЕМА --radius-sm] 8, 9, 9.6, 10 -> 10 14, 16, 18 -> 16 [ТЕМА --radius-lg] 20, 22, 24 -> 22 30, 37 -> 30 100, 999 -> pill [ТЕМА --radius-pill] */ --radius-xs: 2px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 22px; --radius-2xl: 30px; --radius-pill: 999px; /* --- Отступы ---------------------------------------------- Gap в макете: 4,5,6,7,9,10,12,14,15,20,21,23,25,31,32 Padding: 2,4,5,7,10,12,14,15,16,22,26,29,72 Сведено к шкале ниже; максимальное смещение 1px. */ --sp-1: 4px; /* было 4, 5 (5 — самый частый, x25) */ --sp-2: 8px; /* было 6, 7, 9 */ --sp-3: 10px; /* было 10 (второй по частоте, x23) */ --sp-4: 12px; /* было 12 */ --sp-5: 14px; /* было 14, 15 */ --sp-6: 16px; /* было 16 */ --sp-7: 20px; /* было 20, 21 */ --sp-8: 24px; /* было 22, 23, 25, 26 */ --sp-9: 30px; /* было 29, 31, 32 */ --sp-10: 40px; --sp-12: 48px; --sp-16: 72px; /* было 72 */ /* --- Сетка ------------------------------------------------ Фрейм макета 1366px. Контент внутри начинается на x=94 и идёт до 1272 — ширина колонки 1178 (совпадает с CTA-баннером и чипами). Отсюда: коробка контейнера 1178 + 94*2 = 1366, поля по 94. ВНИМАНИЕ: здесь были склеены два комментария, из-за чего строка --container попадала внутрь незакрытого комментария и переменная не создавалась. max-width: var(--container) молча превращался в none, и на мониторах шире 1366 контент растягивался во всю ширину окна. */ --container-content: 1178px; --container: 1366px; --container-pad: 94px; /* --- Тени ------------------------------------------------- В макете тени заданы эффектами DROP_SHADOW с дробными радиусами. Сведены к трём ступеням темы. */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04); /* [ТЕМА] */ --shadow-md: 0 4px 16px rgba(0, 0, 0, .08), 0 2px 6px rgba(0, 0, 0, .04); /* [ТЕМА] */ --shadow-lg: 0 10px 40px rgba(0, 0, 0, .10), 0 4px 12px rgba(0, 0, 0, .05);/* [ТЕМА] */ /* --- Синие кнопки ------------------------------------------ В макете первичные кнопки залиты по-разному, это не один стиль: герой — вертикальный градиент + широкое синее свечение CTA эксперта — диагональный градиент, без тени кнопка карточки — сплошной цвет с синей тенью Значения сняты с нод 6:2522, 21:735, 329:107. */ --grad-btn-hero: linear-gradient(180deg, #126AFF 0%, #005BFF 100%); --grad-btn: linear-gradient(135deg, #0C72FF 0%, #0056F4 100%); --shadow-btn-hero: 0 22px 42px rgba(0, 91, 255, .28); --shadow-btn-card: 0 12px 28px rgba(37, 99, 235, .22); /* Кружок номера в FAQ (нода 40:1490) */ --grad-faq-num: linear-gradient(135deg, #0B78FF 0%, #0049E8 100%); /* --- Временные глифы ---------------------------------------- Щит, весы и звезда для нижних пунктов эксперта. Ноды 20:693, 21:742 и 20:702 из Figma не выгружаются (лимит экспорта), поэтому нарисованы здесь. Заменить на выгруженные SVG, когда лимит спадёт. */ --icon-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l8 3v6.2c0 5-3.4 8.6-8 10.1-4.6-1.5-8-5.1-8-10.1V5.5l8-3z' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='M8.4 12.1l2.6 2.6 4.6-5' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --icon-scales: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.4v17.2M6.5 20.6h11M12 6.2L4.6 9.4M12 6.2l7.4 3.2' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M1.6 15.1l3-6 3 6zM16.4 15.1l3-6 3 6z' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E"); --icon-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5-5.8-3-5.8 3 1.1-6.5L2.6 9.6l6.5-.9L12 2.8z' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E"); /* --- Глифы карточки предложения ---------------------------- Собраны по данным нод (размер, цвет, толщина обводки), пока экспорт картинок из Figma под лимитом аккаунта. Заменить на выгруженные: 329:29 (бейдж), 329:39 (звезда), 329:45 (ученики), 329:96 (подарок). */ --icon-cap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cg fill='none' stroke='%232563eb' stroke-width='1.1' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M1 5.2 6.5 2.8 12 5.2 6.5 7.6 1 5.2Z'/%3E%3Cpath d='M3.6 6.6v2.4c0 .9 1.3 1.6 2.9 1.6s2.9-.7 2.9-1.6V6.6'/%3E%3C/g%3E%3C/svg%3E"); --icon-star-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 15'%3E%3Cpath d='M8 0l2.4 4.9 5.4.8-3.9 3.8.9 5.4L8 12.3 3.2 14.9l.9-5.4L.2 5.7l5.4-.8L8 0Z' fill='%23f7a600'/%3E%3C/svg%3E"); --icon-students: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%2316a85a' stroke-width='1.67' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='6.5' r='3.5'/%3E%3Cpath d='M1.5 17.5v-1.2c0-2.2 2.7-4 6-4s6 1.8 6 4v1.2'/%3E%3Cpath d='M14.3 3.6a3.5 3.5 0 0 1 0 6.8'/%3E%3Cpath d='M15.8 13c1.6.7 2.7 1.9 2.7 3.3v1.2'/%3E%3C/g%3E%3C/svg%3E"); --icon-gift: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%230f172a' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3.6 10h12.8v7.4H3.6z'/%3E%3Cpath d='M2 6.6h16V10H2z'/%3E%3Cpath d='M10 6.6v10.8'/%3E%3Cpath d='M10 6.6S9.4 3 7.4 3a1.8 1.8 0 0 0 0 3.6H10Z'/%3E%3Cpath d='M10 6.6S10.6 3 12.6 3a1.8 1.8 0 0 1 0 3.6H10Z'/%3E%3C/g%3E%3C/svg%3E"); /* Конверт в плашке у почты подвала (ноды 42:1591, 42:1592) и щит с замком в блоке «Защита данных» (ноды 42:1597, 42:1598) — обводка #0969f6 */ --icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11'%3E%3Cg fill='none' stroke='%230969f6' stroke-width='1.73' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='1' width='12' height='9' rx='1.6'/%3E%3Cpath d='m1.6 2.2 5.4 4.2 5.4-4.2'/%3E%3C/g%3E%3C/svg%3E"); --icon-shield-badge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 22'%3E%3Cg fill='none' stroke='%230969f6' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M9 1l8 3v7.5c0 5.4-3.3 8.9-8 10.5-4.7-1.6-8-5.1-8-10.5V4l8-3Z' stroke-width='2'/%3E%3Ccircle cx='9' cy='10.4' r='4.7' stroke-width='1.4'/%3E%3Cpath d='m6.5 10.5 2 2 4-4.5' stroke-width='1.8'/%3E%3C/g%3E%3C/svg%3E"); /* Щит с галочкой перед подписью под кнопкой эксперта (ноды 20:667, 20:668): 15x18, обводка #006bff */ --icon-shield-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 18'%3E%3Cg fill='none' stroke='%23006bff' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M7.5 1 14 3.4v6.1c0 4.3-2.8 7.1-6.5 8.2C3.8 16.6 1 13.8 1 9.5V3.4L7.5 1Z'/%3E%3Cpath d='m4.8 9.2 2 2 3.6-3.9'/%3E%3C/g%3E%3C/svg%3E"); /* Рукописный росчерк в карточке цитаты — выгруженный из Figma вектор (нода 20:690). Холст 96x34 при рамке пути 93x30: разница — вылет обводки 2.58. Раньше здесь была моя отрисовка по форме с макета. */ --icon-signature: url("../icons/signature-expert.svg"); /* Стрелка в кнопках (ноды 18:3199, 329:109, 51:2333) */ --icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h10M9 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* Белая галочка в маркерах списка CTA-баннера (нода 51:2316) */ --icon-check-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3.6 9.4l3.6 3.6 7.2-8' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* Сердце над двумя фигурами — кружок поверх фото эксперта. Координаты глифа взяты из нод 20:677/20:678 внутри кружка 95x95. */ --icon-family: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 95 95'%3E%3Cg fill='none' stroke='%23006bff' stroke-width='2.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M47.5 40C44 36.5 32 30 32 21.5 32 16.8 35.8 13 40.2 13c3.4 0 6.1 2.1 7.3 4.6 1.2-2.5 3.9-4.6 7.3-4.6C59.2 13 63 16.8 63 21.5 63 30 51 36.5 47.5 40Z'/%3E%3Ccircle cx='37' cy='52' r='7'/%3E%3Cpath d='M27 79v-6c0-5.5 4.5-10 10-10s10 4.5 10 10v6'/%3E%3Ccircle cx='58.5' cy='56' r='5.5'/%3E%3Cpath d='M50.5 79v-4.5c0-4.4 3.6-8 8-8s8 3.6 8 8V79'/%3E%3C/g%3E%3C/svg%3E"); --transition: .3s ease; /* [ТЕМА] */ --transition-fast: .15s ease; /* [ТЕМА] */ }