/* performa — adaptive.css · СЛОЙ ТЕЛЕФОНА И ПЛАНШЕТА Подключается ПОСЛЕ styles.css, поэтому перебивает его при равной специфичности. Сюда — ВСЁ, что зависит от ширины экрана; в styles.css таких правил быть не должно. 🔴 ЧТО ЗДЕСЬ НЕОЧЕВИДНО · Нижние границы clamp() в токенах считаны от латиницы. Русские слова длиннее, и на 320px заголовки разваливались на 8–10 строк — поэтому ниже есть блок @media (max-width:379px) с поджатыми дисплейными кеглями. Меняешь типографику — проверяй именно 320. · Шаговые токены на телефоне поджаты: --stack-lg = 24px против 18px у --stack-md. Подъём с md на lg даёт всего +6px, а не «в полтора раза» — нужен заметный отступ, бери множитель. · Правила «под палец» ищи по @media (pointer:coarse) — они привязаны к ВОЗМОЖНОСТЯМ устройства, а не к ширине окна. Отдельный слой ТЕЛЕФОНА и ПЛАНШЕТА. Подключается ПОСЛЕ styles.css. Здесь лежат другие раскладки, другой порядок блоков, другая типо-шкала и другой ритм — спроектированные под палец, а не унаследованные от 1440. Карта слоя: 0. Токены телефона/планшета (ритм, кегли, поля) 1. Шапка: контраст-адаптивная + бургер-панель 2. Общие мобильные приёмы (кнопки, ссылки-стрелки, ленты) 3. Главная — посекционно 4. «Монетизация» — посекционно (в т.ч. окно-приложение) 5. «Практикум» — посекционно 6. Подвал 7. Модалки, лайтбокс, телефон-виджет 8. Планшет 768–1023 — собственные раскладки */ /* 0. ТОКЕНЫ ТЕЛЕФОНА И ПЛАНШЕТА Сайт на телефоне «листался как будто час»: 18 968px против 10 436 на десктопе. Ритм здесь задаётся заново — плотнее, но с воздухом там, где он несёт смысл (стык полотен, шапка секции → контент). */ @media (max-width:767px){ :root{ --section-y: 2.75rem; /* было ~3.5rem */ --section-y-sm: 2rem; --stack-lg: 1.5rem; --stack-md: 1.125rem; --gutter: 1.25rem; /* Кегли телефона: заголовок секции перестаёт спорить с H1 героя. */ --fs-h1: clamp(1.5rem, 1.15rem + 1.6vw, 1.875rem); --fs-h2: 1.375rem; --fs-h3: 1.125rem; --fs-lg: 1rem; --hdr-h: 60px; } html{scroll-padding-top:72px} } @media (min-width:768px) and (max-width:1023px){ :root{ --section-y: 3.25rem; --section-y-sm: 2.25rem; --stack-lg: 2rem; --stack-md: 1.5rem; --gutter: 2rem; --hdr-h: 64px; } html{scroll-padding-top:80px} } /* 1. ШАПКА Было: одна светлая полупрозрачная плашка на весь сайт — над тёмными секциями («Кейсы», финальный CTA, подвал) она читалась инородной заплаткой, а на телефоне навигации не было ВООБЩЕ (пункты просто гасились display:none, бургера не существовало). Стало: две темы шапки, переключаются по полотну под ней (JS ставит .hdr--dark), и полноценная мобильная панель на том же