/* base.css — reset, CSS-переменные, типографика. Источники значений: «фото тз/Цвета.png», «фото тз/Типографика.png», «фото тз/Эффекты.png». */ /* Onest — variable font (вес 100–900), самохост в assets/fonts/, лицензия OFL.txt там же. Разбивка на сабсеты как у Google Fonts; latin-ext нужен из-за знака рубля ₽ (U+20BD). */ @font-face { font-family: 'Onest'; src: url('../assets/fonts/onest-cyrillic.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Onest'; src: url('../assets/fonts/onest-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Onest'; src: url('../assets/fonts/onest-latin-ext.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* Цвета: основные */ --color-black: #2F2C2C; --color-gray-1: #525252; --color-gray-2: #939393; --color-gray-3: #EDEDED; /* светлая заливка под фото-вырезки (блок «О нас») */ --color-white: #FFFFFF; /* Цвета: акцентные */ --color-blue: #366EDF; --color-blue-2: #7AA9EF; --color-blue-chip: #2F54D8; /* текст в синих чипсах карточек тарифов */ /* Голубая заливка бейджей слайдера персонала (замер по 1920.png). Отличается от --color-light-blue (#D8E6FB) — сверить с «Цвета.png», в палитре клиента этих двух цветов (с --color-blue-chip) нет */ --color-blue-chip-bg: #CCE8FF; /* Палитра плашек расписания (блок «Программы»), замер по Figma «Расписание» 1:20850. Именование — по оттенку, а не по предмету: цвет к предмету жёстко не привязан («География» в средней школе фиолетовая, в старшей — розовая), это декор. Предмет и оттенок задаются парой в данных js/programs.js. */ --chip-peach-bg: #FFF0D1; --chip-peach-fg: #FF5319; --chip-green-bg: #D1FAD8; --chip-green-fg: #01410D; --chip-cyan-bg: #CEF9FF; --chip-cyan-fg: #0A4183; --chip-blue-bg: #CCE8FF; --chip-blue-fg: #2F54D8; --chip-pink-bg: #FFCEE2; --chip-pink-fg: #8D176C; --chip-purple-bg: #E6CEFF; --chip-purple-fg: #5237E6; --chip-magenta-bg: #FFE3F5; --chip-magenta-fg: #FF197D; --chip-lime-bg: #F4FFD1; --chip-lime-fg: #CEA500; --chip-mint-bg: #CCFFE7; --chip-mint-fg: #305C39; --chip-violet-bg: #EDCEFF; --chip-violet-fg: #8E1AA6; /* Ошибка формы — из «Эффекты.png» (панель состояний поля) */ --color-error: #FF6E6E; --color-light-blue: #D8E6FB; --color-pink: #FF2A7F; /* Заливка подсветки-маркера на розовом фоне (баннер «70% выпускников»). Шкала — «белый поверх --color-pink»: 20% даёт #FF5599 (как в макете), 30% — этот оттенок, на тон светлее (по просьбе клиента 19.07.2026). Задан сплошным: полупрозрачная заливка над декор-вихрем плывёт по цвету. */ --color-pink-hl: #FF69A5; /* «Фоновый синий». В Figma стиль отдан как linear-gradient(174deg, #408AFA 5%, #3A7EE4 29%, #211BC9 98%), но это пересчёт под рамку одного конкретного объекта: в Figma геометрия градиента хранится относительно bbox каждого элемента. Проверка по 1920.png (баннер «Приходите познакомиться», x=40 y=7570): замер (64,137,248) — 135deg даёт (63,135,245) ✓, 174deg даёт (54,110,224) ✗. Поэтому оставляем 135deg, подобранные по макету. Цвета-стопы — из Figma. */ --gradient-accent: linear-gradient(135deg, #408AFA 0%, #3A7EE4 45%, #211BC9 100%); /* Тот же «Фоновый синий», но для узких высоких блоков телефона. 135deg подобран под широкие десктопные баннеры; на секции 360×1448 (hero 1:8280) диагональ вырождается — исходные 174deg из Figma там означают почти вертикаль, поэтому на мобилке берём стопы Figma как есть, по вертикали. */ --gradient-accent-v: linear-gradient(180deg, #408AFA 5%, #3A7EE4 29%, #211BC9 98%); /* Розового градиента в макете нет: у баннера «70% выпускников» (Figma 1:3836) заливка сплошная #FF2A7F, а переливы даёт декор-вихрь поверх неё. Переменная --gradient-pink была ошибкой чтения макета и удалена. */ /* Фон страницы — F8F8F8 по указанию клиента; в Цвета.png «фон» = D8E6FB (совпадает с «голубой») — расхождение на согласовании */ --color-page-bg: #F8F8F8; /* Тот же F8F8F8, но как заливка внутренних плашек на белой карточке (айтемы FAQ, неактивные миниатюры слайдера персонала) — по Figma */ --color-surface: #F8F8F8; /* Тень (Эффекты.png: 3C82EC 3%, x0 y4, blur 15) */ --shadow-card: 0 4px 15px 0 rgba(60, 130, 236, 0.03); /* Мягкая синяя тень для «плавающих» бабблов (аппрокс., уточнить по Эффекты.png) */ --shadow-bubble: 0 10px 24px 0 rgba(54, 110, 223, 0.28); /* Мягкая тень для приподнятого «фото» (скан лицензии с наклоном) */ --shadow-photo: 0 16px 34px 0 rgba(54, 110, 223, 0.16); /* ═══════════════════ РЕЗИНОВЫЕ ТОКЕНЫ ═══════════════════ Все размеры интерполируются между тремя ширинами, для которых есть макет: 1200 (Figma 1:21396) → 1600 (1:22821) → 1920 (1:219). Ниже 1200 значение замирает на мобильном, выше 1920 — на десктопном (там .container упирается в max-width 1920 и композиция заморожена). Как читать формулу. Каждый токен — кусочно-линейная функция ширины: max(<отрезок 1200→1600>, <отрезок 1600→1920>) зажатая в clamp(<мобильное значение>, …, <значение 1920>). Отрезок вида `5.5vw - 24px` — это прямая через две точки макета: на 1200 даёт 42, на 1600 даёт 64. max() из двух отрезков работает как кусочная функция, потому что кривая выпуклая (наклон растёт с шириной) — на каждом участке «побеждает» нужный отрезок. ⚠️ Кегли НЕ масштабируются пропорционально ширине экрана: при чистой пропорции наборный текст на 1100 упал бы до 10px. Пропорционально едет только геометрия (см. cqw в файлах блоков), а текст — по шкале макета. */ /* Типографика (Onest Medium). Контрольные точки 1200 / 1600 / 1920 */ --font-main: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --fs-h1: clamp(42px, max(5.5vw - 24px, 10vw - 96px), 96px); /* 42 → 64 → 96 */ --fs-h2: clamp(32px, max(4vw - 16px, 4.375vw - 22px), 62px); /* 32 → 48 → 62 */ --fs-h3: clamp(28px, max(1vw + 16px, 5vw - 48px), 48px); /* 28 → 32 → 48 */ --fs-h4: clamp(20px, max(1vw + 8px, 1.25vw + 4px), 28px); /* 20 → 24 → 28 */ --fs-btn: clamp(14px, max(0.5vw + 8px, 1.25vw - 4px), 20px); /* 14 → 16 → 20 */ --fs-text: clamp(14px, max(0.5vw + 8px, 0.625vw + 6px), 18px); /* 14 → 16 → 18 */ --fs-small: clamp(12px, 1.25vw - 8px, 16px); /* 12 → 12 → 16 */ /* Радиусы. Карточки: 20 на 1200 (Figma 1:21417, 1:21518) → 30 на 1600 и выше (1:22842, 1:23578). Кнопки: 10 уже на 1600 (CTA hero 1:22915) → 20 на 1920. */ --radius-btn: clamp(10px, 3.125vw - 40px, 20px); --radius-card: clamp(20px, 2.5vw - 10px, 30px); --radius-pill: 999px; /* Боковое поле страницы: 10 на 1600 и ниже (карточки стоят от x=10 и имеют ширину 1580 и 1180) → 20 на 1920 (x=20, ширина 1880). */ --page-gap: clamp(10px, 3.125vw - 40px, 20px); /* Зазор между карточками в ряду/сетке: 10 на 1600 (ряд инфо-карточек 1:22930, gap 10 при ширине 1540) → 20 на 1920. Та же кривая, что у бокового поля. */ --gap-cards: clamp(10px, 3.125vw - 40px, 20px); /* Внутреннее поле карточек-секций: 20 на 1600 и ниже → 60 на 1920. Замерено дважды: аттестат (1:22943 и 1:25136, padding 20) и «выберите класс» (1:23578 — 60/20/20, 1:22152 — 50/20/20). То есть боковое поле карточки схлопывается до 20 уже на 1600, а вертикальное блоки задают сами. */ --card-pad: clamp(20px, 12.5vw - 180px, 60px); } /* Reset */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; } body { min-height: 100svh; display: flex; flex-direction: column; font-family: var(--font-main); font-weight: 500; font-size: var(--fs-text); line-height: 1.4; color: var(--color-black); background: var(--color-page-bg); -webkit-font-smoothing: antialiased; } /* Футер прижат к низу даже при пустом контенте */ main { flex: 1 0 auto; } /* Страница под открытой модалкой (форма, лайтбокс). `position: fixed` — ради телефонов: от одного `overflow: hidden` страница всё равно едет под окном. Смещение `top` ставит js/main.js (lockScroll), иначе body прыгнул бы в начало. */ body.no-scroll { position: fixed; width: 100%; overflow: hidden; } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } ul, ol { list-style: none; padding: 0; } /* Браузер сам не оставляет висячее слово в конце абзаца. Только абзацы: у заголовков переносы расставлены вручную (
) по макету, и text-wrap их бы перебил. */ p { text-wrap: pretty; } /* Заголовки (Типографика.png) */ h1, h2, h3, h4 { font-weight: 500; } h1 { font-size: var(--fs-h1); line-height: 0.9; letter-spacing: -0.03em; } /* letter-spacing по «Типографика.png»: h1 −3%, h2 −1%, h3/h4 — 0. (В Figma у h2 стоит −2%, но ТЗ клиента здесь главнее.) */ h2 { font-size: var(--fs-h2); line-height: 0.9; letter-spacing: -0.01em; } h3 { font-size: var(--fs-h3); line-height: 0.9; } h4 { font-size: var(--fs-h4); line-height: 1.2; } /* ⚠️ Медиазапросов на 1600 и 1200 здесь больше нет: кегли, поля и радиусы интерполируются формулами выше и на этих ширинах дают ровно макетные значения. Ступени остались только там, где макет реально ПЕРЕСТРАИВАЕТ раскладку (это уже внутри файлов блоков), а не просто меняет масштаб. */ /* Телефоны 360–767 — мобильный фрейм 1:8279, см. Tz/mobile-360.md. Кегли ниже 1200 уже замерли на мобильных значениях (h1 42 / h2 32 / h3 28 / текст 14), радиус кнопки — на 10, поэтому здесь только то, что мобилка меняет отдельно. */ @media (max-width: 767px) { :root { /* Внутренний отступ секций типа A и полноширинных карточек. Введён, чтобы блоки не хардкодили 20px: «выберите класс» переопределяет его на 10. */ --section-pad-x: 20px; --section-pad-y: 50px; } /* Страховка от горизонтальной прокрутки: декор блоков намеренно вылезает за края (вихри, дети, вырезки), на узком экране это давало бы полосу прокрутки. clip, а не hidden — hidden на body ломает position: sticky у шапки. */ html { overflow-x: clip; } body { overflow-x: clip; /* Длинные слова («профориентация», «Дзержинский») на 360 иначе распирают карточки */ overflow-wrap: break-word; } }