/* --------------------------------------------------------------------------- Точечные исправления адаптивности. Единственный файл в проекте, который намеренно меняет отрисовку по сравнению с исходным экспортом Webflow. Всё остальное воспроизводит оригинал один в один. Правила ниже срабатывают ТОЛЬКО там, где вёрстка уже сломана — то есть где содержимое вылезает за пределы экрана и появляется горизонтальная прокрутка. На корректно отрисованных страницах они не дают никакого эффекта: ни отступы, ни размеры, ни переносы там не меняются. Проблемы унаследованы от оригинального сайта: те же 23 страницы прокручиваются вбок и на kiddom.com.cy. Проверяется скриптом scripts/check_responsive.mjs. Чтобы полностью откатить — удалите строку с подключением этого файла в partials/head.hbs. Больше он нигде не используется. --------------------------------------------------------------------------- */ /* 0. Обёртка не должна участвовать в раскладке. Сборка оборачивает каждый в , чтобы отдать WebP там, где он есть (см. плагин webpPicture в vite.config.js). У по умолчанию display: inline, и во flex- или grid-контейнере элементом раскладки стал бы он, а не картинка — поехали бы выравнивание и размеры. display: contents убирает саму коробку обёртки: остаётся прямым элементом раскладки, как было до обёртывания. Отрисовка не меняется. */ picture { display: contents; } /* 0.1. Пропорции для картинок, которым сборка проставила width/height. scripts/dimensions.py дописывает размеры тем изображениям, у которых их не было, и помечает их атрибутом data-ar. Без height: auto это было бы вредно: в теме сайта у .image стоит width: 100%, а height: auto нигде не задан — атрибут height превратился бы в жёсткую высоту и картинки сплющило бы. Селектор бьёт строго по размеченным нами картинкам. У 1521 изображения размеры заданы вручную ещё в Webflow — их не трогаем, там вёрстка рассчитана на конкретные значения. */ img[data-ar] { height: auto; } /* 1. Длинные слова в заголовках. Причина: у заголовков крупный кегль (32px и выше), а длинное слово переносить запрещено. Например «Самостоятельность» на 32px занимает 425px — при экране 375px оно в одиночку выталкивает всю страницу. Решение: разрешить перенос внутри слова, но только когда иначе никак. break-word (а не break-all) не трогает слова, которые и так помещаются. */ @media screen and (max-width: 991px) { h1, h2, h3, h4, h5, h6 { /* Сначала пробуем перенести по слогам — браузер берёт словарь по атрибуту lang, который проставлен на для каждого языка. Получается «конфиденци-альности» с дефисом, а не разрыв посреди слова. break-word остаётся страховкой на случай, когда словаря нет (например, длинный URL или слово на языке без поддержки переносов). */ -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; } } /* 2. Таблицы сравнения. Причина: ячейки CSS-грида по умолчанию получают min-width: auto и не сжимаются уже своего содержимого, поэтому колонка уезжает за экран. Решение: прокручивать саму таблицу, а не всю страницу. Колонки остаются читаемыми, а вертикальная вёрстка страницы не ломается. */ @media screen and (max-width: 767px) { .div-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* 3. Нечитаемый текст в диапазоне 480–991px. Причина в базовом правиле оригинального сайта: body { font-size: 1vw }. Размер шрифта привязан к ширине окна без нижней границы, поэтому у всего, что не имеет явного размера в px, он схлопывается вместе с экраном: ширина окна 1920 1440 1200 991 768 480 размер 19.2px 14.4px 12px 9.9px 7.7px 4.8px Ниже 480px оригинал спасают явные правила внутри @media (max-width: 479px), а весь диапазон 480–991px остаётся без них — там текст нечитаем. Элементы с явным размером (например .par16) не затронуты. Решение: нижняя граница через max(). Ровно те размеры, которые дизайн сам задаёт для мобильных, становятся полом — 12px для пунктов списка и 14px для заголовков отзывов. На десктопе 1vw больше пола, поэтому там ничего не меняется: при 1440px и выше размеры остаются прежними до пикселя. Правило намеренно не трогает ширины до 479px — там работают собственные правила оригинала, и вмешиваться в них незачем. Корень проблемы — сам body { font-size: 1vw } — не трогаем: пересчёт базового размера сдвинул бы всю em-типографику сайта и поехали бы отступы и заголовки. Это уже вопрос редизайна, а не адаптивности. */ @media screen and (min-width: 480px) { li[class^="list-item-"] { font-size: max(12px, 1vw); } .testimonial-title { font-size: max(14px, 1vw); } } /* 4. Страховка от горизонтальной прокрутки страницы. Причина: отдельные контейнеры оказываются на несколько пикселей шире вьюпорта (на главной — на 4px). Причины разные и точечно неуловимые. Решение: запретить прокрутку по горизонтали на уровне страницы. Вертикальная прокрутка не затрагивается. Слайдерам это не мешает — у них собственный контекст прокрутки внутри .w-slider-mask. */ @media screen and (max-width: 991px) { html, body { overflow-x: hidden; } } /* 5. Флаер продлёнки — книжный, а слайдер под ним растягивается на всю ширину контейнера. Причина: прежний флаер был альбомным 2880×1620, и на 1440px он занимал 1238×696. Клиент прислал новый макет в книжной ориентации (853×1280), и при той же вёрстке он вырастает до 1238×1858 — почти два экрана в высоту, да ещё с растяжением исходника на 45%. Решение: ограничить ширину этого конкретного слайдера так, чтобы флаер показывался в своём масштабе и по центру. Правило бьёт строго по слайду с флаером и на остальные слайдеры сайта не распространяется. Флаер детского сада «Академия Детства» — такой же книжный снимок того же размера, поставлен отдельной картинкой (не в слайдере), поэтому в правило добавлен и он. */ .w-slide:has(img[src*="prodlenka-schedule-26"]) img, img[src*="akademiya-detstva-price-26"] { max-width: 620px; height: auto; margin-left: auto; margin-right: auto; display: block; }