/* ========================================================================== Экосистема 99Percentile – токены темы Источник: _figma/01-ui-kit/tokens.css (разбор макета от 2026-08-03). Здесь лежит РАБОЧАЯ копия: значения перенесены из разбора один раз, а дальше правятся здесь. Хардкод цветов, размеров и шрифтов в секционных CSS запрещён – иначе смена оттенка превращается в обход тридцати файлов. Токены с пометкой [ВЫВЕДЕН] в макете отсутствуют и ждут подтверждения дизайнером – не выдавай их за решение дизайнера. Пометка [РЕНДЕР] – значение снято с конкретной ноды, но в переменные Figma дизайнером не вынесено. ========================================================================== */ :root { /* --- Цвет: системные роли --------------------------------------------- */ --color-brand: #2597FF; /* Figma bg_blue */ --color-brand-hover: #1A83E6; /* [ВЫВЕДЕН] hover не нарисован ни у одной кнопки */ --color-bg: #FFFFFF; /* Figma bg_white */ --color-bg-soft: #F2F2F8; /* Figma bg_light_grey – карточки, подвал */ --color-bg-cold: #EEF3FF; /* Figma bg_cold_light_blue – карточки на синем */ --color-text: #3A3A3A; /* Figma text_black. НЕ #000 */ --color-text-muted: #8A8A93; /* [ВЫВЕДЕН] дисклеймер в подвале серый, значение не снято */ --color-text-invert: #FFFFFF; /* Figma text_white */ --color-link: #2597FF; /* Figma text_blue */ --color-border: #E6E6E6; /* Figma bg_grey_stroke */ --color-divider: #C8C8DC; /* [РЕНДЕР] разделители на главной */ --color-blue-pale: #D7ECFF; /* [РЕНДЕР] низ голубого градиента, «О нас» */ /* [ВЫВЕДЕН] Семантики статусов в макете НЕТ. Значения взяты из акцентной палитры, но там эти цвета закреплены за категориями – переиспользование под статусы надо согласовать с дизайнером, а не считать решённым. */ --color-success: #53B780; /* [ВЫВЕДЕН] = bg_soft_green */ --color-error: #FF6672; /* [ВЫВЕДЕН] = bg_light_red */ /* --- Цвет: акценты категорий ------------------------------------------ */ /* Несут смысл, а не украшают: закреплены за этапами пути и номерами карточек. Менять местами нельзя. */ --color-yellow: #F7A602; /* «Учимся», карточка 03 */ --color-red: #FF6672; /* «Развиваемся», карточка 05 */ --color-mint: #2AA7A4; /* «Поступаем», карточка 06 */ --color-green: #53B780; /* карточка 04 */ --color-purple: #845BEA; /* карточка 02 */ --color-blue-light: #4BA9FF; /* Figma bg_light_blue */ --color-black: #3A3A3A; /* Figma bg_black */ /* --- Цвет: полупрозрачный белый ------------------------- [РЕНДЕР] ----- */ /* Схема экосистемы в хиро, нода 32705:6901 */ --color-white-90: rgba(255, 255, 255, .9); --color-white-75: rgba(255, 255, 255, .75); --color-white-20: rgba(255, 255, 255, .2); --color-white-55: rgba(255, 255, 255, .55); /* --- Градиенты ------------------------------------------ [РЕНДЕР] ----- */ /* Подложка аватара «Ученик», нода 32705:7001. */ --gradient-avatar: linear-gradient(115.394deg, rgb(230, 219, 255) 13.411%, rgb(181, 220, 255) 97.274%); /* * ВОССТАНОВЛЕНО при вёрстке страниц SAT и «Внешкольная деятельность». * `get_variable_defs` по lin_gradient_1…4 возвращает ПУСТУЮ строку, но * сами значения удалось снять напрямую с нод через get_design_context. * В разборе макета (_figma/01-ui-kit/colors.css) они значатся как * несобранные – эта запись их закрывает. * * Система видна: каждый акцентный цвет уходит в свой бледный оттенок. * Угол у каждого применения свой (124…140°) – это решение дизайнера на * конкретной ноде, а не свойство токена. Здесь взят типовой; если на * странице угол другой, переопределять локально. */ --gradient-info: linear-gradient(131.086deg, #F2F2F8 13.262%, #B5DCFF 127.31%); --gradient-blue: linear-gradient(140.881deg, #2597FF 2.979%, #C8E5FF 97.198%); --gradient-mint: linear-gradient(218.359deg, #2AA7A4 5.865%, #AAE2E0 93.213%); --gradient-red: linear-gradient(-28.463deg, #FFC0C5 3.404%, #FF6672 96.821%); --gradient-purple: linear-gradient(219.294deg, #845BEA 4.933%, #D2C0FF 97.662%); --gradient-yellow: linear-gradient(128.023deg, #F7A602 6.158%, #FFEABE 95.523%); /* --- Типографика ------------------------------------------------------- */ /* Inter – единственная гарнитура макета. Начертания 400 / 500 / 600. Light, Bold, Black не используются – в шрифтовой пак не класть. */ --font-base: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Трекинг Figma отдаёт в ПРОЦЕНТАХ: -5 → -0.05em. В браузере при том же значении кириллица Inter слипается сильнее, чем в макете – поэтому токены ослаблены примерно вдвое относительно сырых замеров Figma (было −8/−6/−5/−3 %, стало −3/−2/−2/−1 %). */ /* H1 [РЕНДЕР, нода 32705:6904] – в переменные Figma не вынесен. Внимание: вес 500, а не 700. */ --fs-h1: 48px; --lh-h1: 1.1; --fw-h1: 500; --ls-h1: -0.03em; /* H2 – заголовок секции. ЗАМЕРЕНО при вёрстке главной: 7 вхождений, 36px / 0.9. Прежнее значение 28px было догадкой из переменной Figma text_28_reg и оказалось неверным. Интерлиньяж 0.9 – меньше высоты строки шрифта, поэтому многострочные заголовки идут внахлёст. Это дефект макета, воспроизведён как нарисовано; дизайнеру стоит поправить. */ --fs-h2: 36px; --lh-h2: 0.9; --fw-h2: 500; --ls-h2: -0.02em; /* Подзаголовок = Figma text_28_reg. На странице «О нас» встречается с весом 400, а не 500 – там переопределяется локально. */ --fs-h4: 28px; --lh-h4: 1.2; --fw-h4: 400; --ls-h4: -0.02em; /* Крупный заголовок блоков CTA и синих полос. ЗАМЕРЕНО на главной и на «О нас». */ --fs-display: 40px; --lh-display: 1.1; --fw-display: 500; --ls-display: -0.02em; /* Мелкий текст: дисклеймер подвала, подписи. ЗАМЕРЕНО: 14px / 1.2. Своей переменной в Figma нет. */ --fs-caption: 14px; --lh-caption: 1.2; --fw-caption: 400; --ls-caption: -0.01em; /* Надзаголовок-лейбл – строка с синей точкой над заголовком секции («Сложность поступления», «Категории ресурсов», «Карта маршрута»). Повторяется минимум на трёх страницах. ВНИМАНИЕ: интерлиньяж 1.2, а не 1.3 как у --lh-body при том же кегле 20px. Отдельный токен заведён именно поэтому. */ --fs-label: 20px; --lh-label: 1.2; --fw-label: 500; --ls-label: -0.02em; --label-dot: 16px; /* диаметр точки */ /* H3 = Figma text_24_med */ --fs-h3: 24px; --lh-h3: 1.2; --fw-h3: 500; --ls-h3: -0.02em; /* Основной текст = Figma text_20_reg. Интерлиньяж 1.3 – единственный стиль системы, где он не 1.2. Это значение из переменной, не опечатка. */ --fs-body: 20px; --lh-body: 1.3; --fw-body: 400; --ls-body: -0.02em; /* Мелкий текст = Figma text_18_reg. */ --fs-small: 18px; --lh-small: 1.2; --fw-small: 400; --ls-small: -0.01em; /* Навигация = Figma nav */ --fs-nav: 18px; --lh-nav: 1.2; --fw-nav: 500; --ls-nav: -0.02em; /* Кнопка = Figma button */ --fs-btn: 20px; --lh-btn: 1.2; --fw-btn: 600; --ls-btn: -0.02em; /* Лид-абзац хиро [РЕНДЕР, нода 32705:6906] – 24px, но интерлиньяж 1.4 против 1.2 у переменной text_24_med. Подгонять под систему нельзя. */ --fs-lead: 24px; --lh-lead: 1.4; --fw-lead: 400; --ls-lead: -0.02em; /* --- Сетка ------------------------------------------------------------- */ --page-width: 1920px; /* ширина макета ПК */ --container: 1840px; /* 1920 − 2×40 */ --side-padding: 40px; /* левая граница у 9 из 15 блоков главной */ --header-width: 1838px; /* хедер на 2px уже контейнера – так в макете */ --gutter: 24px; /* [ВЫВЕДЕН] межколоночный отступ сеток не замерен */ --section-gap: 140px; /* [РЕНДЕР] 10 промежутков из 14 на главной */ /* --- Отступы ----------------------------------------------------------- */ /* Значения, реально встреченные в разобранных нодах */ --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-48: 48px; --space-64: 64px; /* --- Радиусы ----------------------------------------------------------- */ --radius-sm: 8px; /* [РЕНДЕР] плашки 48px в синих полосах, University Tour */ --radius-md: 12px; /* [ВЫВЕДЕН] в макете не встречался */ --radius-lg: 16px; /* [РЕНДЕР] карточка, нода 32705:6908 */ --radius-xl: 24px; /* [РЕНДЕР] карточки секций главной, попап консультации */ --radius-2xl: 32px; /* [РЕНДЕР] панели подвала и плитки соцсетей */ --radius-pill: 999px; /* [РЕНДЕР] кнопки и бейджи-таблетки */ /* --- Тени -------------------------------------------------------------- */ /* В макете НЕТ НИ ОДНОЙ тени: карточки отделяются от фона заливкой. Значение none стоит намеренно. Появившийся box-shadow – отсебятина. */ --shadow-card: none; /* --- Размеры контролов ---------------------------------- [РЕНДЕР] ----- */ --btn-height: 57px; /* высота всех кнопок макета */ --btn-padding: 8px 20px; --btn-w-hero: 485px; /* ширины кнопок ФИКСИРОВАННЫЕ, не по контенту */ --btn-w-narrow: 266px; --btn-w-wide: 808px; --badge-height: 48px; /* таблетка «Учимся/Развиваемся/Поступаем» */ --header-height: 76px; --footer-height: 471px; /* Фактическая высота блока шапки в потоке (отступ 24 + полоса). Базовое значение – расчёт для одного ряда; main.js меряет реальную высоту через ResizeObserver и перебивает переменную, потому что на 1025–1430px навигация переносится на второй ряд и шапка выше 100px. Цветные хиро поднимаются под шапку ровно на эту величину – иначе между шапкой и хиро остаётся белая щель (2026-08-06). */ --header-h: calc(var(--header-height) + 24px); /* --- Движение ------------------------------------------ [ВЫВЕДЕН] ----- */ /* Таймлайн-анимаций в макете нет: get_motion_context по главной вернул пустой список. Значения ниже – соглашение темы, а не решение дизайнера. */ --dur-fast: 150ms; --dur-base: 300ms; --ease-out: cubic-bezier(0, 0, .58, 1); /* --- Слои -------------------------------------------------------------- */ --z-header: 100; --z-overlay: 200; --z-modal: 300; } /* ========================================================================== МОБИЛЬНЫЕ ТОКЕНЫ Источник масштаба – единственный мобильный узел макета 32705:7077 (mobile-hero, 393×669): поле контейнера 24px, плашки 14px Semi Bold 6×12, заголовок блока 16 Bold, подписи ~11px. Остальные значения выведены из этого масштаба (≈0.55–0.65 от десктопа) и помечены как решение верстальщика: других мобильных экранов дизайнер не рисовал. Переопределяются только токены – вся вёрстка, читающая переменные, сжимается сама, единым образом на всех страницах. ========================================================================== */ @media (max-width: 640px) { :root { --side-padding: 24px; /* [МАКЕТ] programs-section padding 24 */ --gutter: 24px; --section-gap: 64px; /* [ВЫВЕДЕНО] 140px на мобиле – дыра в пол-экрана */ --fs-h2: 24px; --lh-h2: 1.1; /* [ВЫВЕДЕНО] 36 → 24 */ --fs-h3: 20px; /* 24 → 20 */ --fs-h4: 20px; /* 28 → 20 */ --fs-display: 28px; /* 40 → 28 */ --fs-body: 16px; --lh-body: 1.4; /* 20 → 16, воздух чуть больше */ --fs-lead: 18px; /* 24 → 18 */ --fs-btn: 18px; /* 20 → 18, как кнопки шапки */ --fs-small: 15px; --btn-height: 52px; --btn-w-hero: 100%; /* фикс-ширины кнопок на мобиле нет */ --btn-w-narrow: 100%; --btn-w-wide: 100%; --space-64: 40px; --space-48: 32px; --footer-height: auto; --radius-2xl: 24px; /* панели подвала: 32 великоват для 390 */ } } /* ========================================================================== ЧЕГО ЗДЕСЬ НЕТ – и почему • Брейкпоинтов. В макете один размер – 1920. Мобильная версия существует единственным фрагментом 393×669 (только хиро). Сетку адаптива надо проектировать с нуля, см. _figma/00-INDEX.md, пункт 1 списка дыр. • Состояний hover / focus / active / disabled – не нарисованы. • Тёмной темы – не нарисована. ========================================================================== */