/* ============================================================================
ЧИТАЕМОСТЬ МОБИЛЬНОЙ ВЕРСИИ (2026-08-08)
Заводилась как пробная; принята пользователем после проверки на живом
телефоне. Осталась отдельным файлом намеренно — так видно одним взглядом,
что именно в мобильной вёрстке отличается от макета и почему.
ОТКАТ В ОДНО ДЕЙСТВИЕ: удалить на этот файл из index.html
(он подключён последним, сразу после css/mobile.css). Больше ничего
откатывать не нужно — файл только переопределяет чужие правила и не
содержит ни одного собственного элемента. Сам файл при этом можно
оставить лежать: без он ни на что не влияет.
ЗАЧЕМ ЭТО ВООБЩЕ. Мобильная композиция — фиксированный холст 402×874,
который целиком ужимается под окно одним transform:scale(). Ужимается ВСЁ,
включая шрифты. Замеренные масштабы:
402×874 (iPhone 15) 1.000
390×844 (iPhone 14) 0.970
375×667 (iPhone SE 2/3) 0.843 ← ограничен ВЫСОТОЙ, не шириной
360×800 (типовой Android) 0.896
320×568 (старый SE) 0.718
То есть подпись 13 дизайн-px на iPhone SE выходит 11.0 реальных, а на
старом SE — 9.3. По замеру живой страницы на 360×800 половина текстовых
узлов оказывалась мельче 12 px, на 320×568 — две трети.
Сам по себе мелкий текст не приговор: его можно приблизить пальцами. Но
приблизить было НЕЛЬЗЯ — щипок выключен тремя независимыми способами
(touch-action:none у сцены, touch-action:pan-y у body, maximum-scale=1).
Отсюда две части этой надстройки.
========================================================================= */
@media (max-width:1023px), (orientation:portrait){
/* ---------------------------------------------------------------- ЧАСТЬ Б
ЩИПОК РАЗРЕШЁН ВЕЗДЕ, КРОМЕ САМОЙ СЦЕНЫ.
touch-action ПЕРЕСЕКАЕТСЯ по цепочке предков: чтобы щипок дошёл до
элемента, pinch-zoom должен быть разрешён у НЕГО и у всех его предков.
Поэтому мало поправить body — нужно снять запрет и с оверлеев.
Что НЕ трогаем намеренно:
.m-stage-wrap touch-action:none — сама сцена. Там свайп-джек, и
щипок физически конфликтует с жестом листания: развести их можно
только вручную по числу пальцев, то есть переписав жестовый
модуль. Это отдельная работа, не эта правка.
#m-lastpopup / .m-last__card touch-action:none — попап о компании
тянется вверх-вниз собственным жестом, там та же история.
.m-menu__media5 touch-action:none — свайп вверх по плашке.
Что получает пользователь: приближаются шапка, меню, ФОРМА ЗАЯВКИ (самое
важное — там поля 14 дизайн-px) и попап «о компании» целиком.
Значение pinch-zoom понимают Chrome 55+, Safari 13+, Firefox 79+. Более
старый браузер просто не поймёт всё объявление и оставит прежнее
поведение — хуже не станет. */
body{ touch-action:pan-y pinch-zoom; }
.m-ov{ touch-action:pan-y pinch-zoom; }
.m-ov__scroller{ touch-action:pan-y pinch-zoom; }
/* ---------------------------------------------------------------- ЧАСТЬ А
МИНИМАЛЬНЫЙ КЕГЛЬ СОДЕРЖАТЕЛЬНОГО ТЕКСТА — 14 ДИЗАЙН-PX ВМЕСТО 12-13.
Почему именно 14, а не 15 или 16. Холст фиксированный: почти все эти
блоки стоят на абсолютных координатах из макета, и текст, ставший выше,
упирается в то, что стоит под ним. 14 px — самый крупный кегль, который
нигде не приводит к наезду блоков друг на друга (проверено замером
прямоугольников на пяти размерах экрана). Что это даёт:
экран было стало
402×874 13.0 14.0
390×844 12.6 13.6
375×667 11.0 11.8
360×800 11.6 12.5
320×568 9.3 10.1
Ниже 12 остаётся только 375×667 и 320×568 — там масштаб режет высота
экрана, и без переверстки самой композиции больше не выжать. Зато на
этих же экранах теперь работает щипок (часть Б).
ЧЕГО ЗДЕСЬ НАМЕРЕННО НЕТ. Не тронуты подписи на иллюстрациях: имя и срок
на макете банковской карты (7.8 px), цифры номера (11.7 px), тексты
всплывающих уведомлений на макете телефона (9.1 px). Это не текст для
чтения, а рисунок — настоящие уведомления и надписи на карте ровно
такие же мелкие, и увеличение сломало бы узнаваемость картинки. */
/* 3-1 «Что это стоит» — верхняя строка каждого пункта (нижняя уже 18px). */
.m-s31-item__lead{ font-size:14px; }
/* 5-1 «Без замены PMS» — НЕ ТРОГАЕМ, и вот почему (проверено скриншотами).
Четыре карточки с пунктирной рамкой имеют фиксированный размер из макета.
На 13 px «Без перестройки существующих бизнес-процессов» ложится в три
строки и помещается впритык; на 14 px слово «бизнес-процессов» перестаёт
влезать в строку, разрывается переносом, абзац становится четырёхстрочным
и вылезает за нижний край карточки. То же со второй карточкой снизу.
Чтобы поднять кегль здесь, надо менять размер самих карточек — это уже
переверстка экрана, а не надстройка. Оставлено на отдельное решение.
Смягчает то, что текст в карточках набран полужирным и по центру: он
читается заметно легче обычного текста того же кегля. */
/* 6-1 «Что получает гостиница» и 7-1 «Что получает гость» — пункты списка
с галочками. Одиннадцать строк, самый читаемый блок обоих слайдов. */
.m-panel-li p{ font-size:14px; }
/* Плата за это — интервал между пунктами. На 6-1 шесть пунктов, и на
14 px список стал на 20 дизайн-px выше: последняя строка «…сервисами
гостиницы.» уезжала под иллюстрацию здания, которая нарисована поверх.
Пять промежутков по 16 → по 12 возвращают ровно те же 20 px, и список
встаёт на прежнее место. На 7-1 пунктов пять и запас был больше, но
интервал держим одинаковым — экраны стоят подряд и разница в плотности
была бы заметна на свайпе. */
.m-s61-list, .m-s71-list{ gap:12px; }
/* Длинная лента «Внедрение» — пункты трёх секций. */
.m-para__li p{ font-size:14px; }
/* ⚠️ И плата за это в первой секции ленты (поймано пользователем на живом
телефоне 2026-08-08 — блоки наехали друг на друга).
Три абзаца секции стоят на АБСОЛЮТНЫХ координатах из макета: 627, 873,
1077, кнопка — 1265. На 13 px они кончались на 842 / 1048 / 1236, то есть
между блоками было ровно по 29-31 px воздуха. На 14 px средний блок вырос
сразу на 48 px (две его строки разъехались на две каждая) и полез на
третий: «…не требует времени сотрудников гостиницы.» легло поверх
заголовка «Быстрый результат».
Двигаем всё, что ниже, вниз — благо запас есть внизу самой секции: она
1413 px высотой, а кнопка кончалась на 1317.
⚠️ Высоту .m-long-sec и .m-long-canvas НЕ трогаем: 3077 продублировано
в LONG_CANVAS_H в js/mobile-slides.js (от него считается предел
прокрутки), и правка потребовала бы лезть в JS — то есть сломала бы
обещание «откат = удалить одну строку ».
Новые числа держат тот же ритм 29 px между блоками:
.m-para--2 881 … 1104
.m-para--3 1133 … 1301
кнопка 1330 … 1382 (низ секции 1413, запас 31) */
.m-para--2{ top:881px; }
.m-para--3{ top:1133px; }
.m-long-cta--1{ top:1330px; }
/* Длинная лента, абзац под «в вашем объекте». */
.m-long-h3__para{ font-size:14px; }
}