/** * Мобильный слой: юзабилити на телефоне. * * Грузится ПОСЛЕДНИМ (functions.php, приоритет 1000 - после sunday-unify.css), поэтому * перебивает стили темы и плагина без !important там, где специфичность равна. * Здесь только то, что мешает пользоваться сайтом пальцем: цели касания, поля без * зума iOS, плавающие кнопки чата и доступности, блокировка фона под шторками. * Вид на десктопе не меняется: всё - под @media (max-width: 900px) и уже * (900 - порог мобильной шапки, site-header-pro.css). Единственное исключение - * раздел 1, блокировка фона под модалками: она нужна на всех ширинах. * * Норма цели касания: 44x44 для кнопок, чипов, переключателей и полей (WCAG 2.5.5), * не меньше 24x24 для текстовых ссылок (WCAG 2.5.8). Текстовым ссылкам площадь * добавляется паддингом с равным отрицательным отступом: зона касания растёт, вёрстка * не сдвигается. * * Аудит и замеры - 16.10.2026: 5 ролей x 4 ширины (360/390/414/768), playwright. */ /* ═══ 1. Блокировка фона под шторками и модалками - на ВСЕХ ширинах ═════════ html { overflow-x: clip } (sunday.css) отменяет передачу overflow от body к окну: body { overflow: hidden } больше НЕ блокирует прокрутку страницы. Шторка меню (body.shp-no-scroll) и модалки, которые ставят overflow только на body (вход в клуб, контакт клуба, модалки кабинета лидера), листали фон под собой, а модалки без блокировки вовсе (план, жалоба, приглашения, отметка пришедших, заявка на бизнес, подтверждение, 18+) - тем более. Блокируем на html - туда, откуда прокрутка реально идёт. Признак открытого слоя - не список модалок, а состояние: видимый [aria-modal="true"] (все модалки сайта объявлены так и прячутся атрибутом hidden или инлайновым display: none - их и исключаем), плюс прежние метки блокировки на body и html. Исключение - список стран intl-tel-input (.iti__country-selector): библиотека объявляет его aria-modal, а прячет своим классом iti__hide, и без исключения любая страница с полем телефона (настройки, заявки, вход) стояла бы заблокированной с самой загрузки. Блокировка держится, пока слой в DOM: два слоя разом и затухание при закрытии (подтверждение ibd-ui.js удаляется через 220ms) - без счётчиков. Полоса прокрутки: overflow: hidden убирает её, и на десктопе страница прыгала вбок на её ширину (15px). scrollbar-gutter: stable оставляет место под полосой, пока прокрутка закрыта: не сдвигаются ни контент, ни фиксированная шапка (padding-right на body сдвигал бы контент, но не fixed-элементы). На телефоне полоса накладная, ширина ноль - правило ничего не меняет. body здесь НЕ трогаем: с overflow: hidden body становится scroll-контейнером, и position: sticky сайдбаров (лента встреч, «Люди», кабинет) перестаёт липнуть - ради этого sunday.css держит на body clip, а не hidden. Окно прокручивает html. С 17.10.2026 и скрипты сайта на body overflow не пишут (вход в клуб, контакт клуба, участники, кабинет лидера, маршрут, отправка карты, шторка меню): их держит правило по aria-modal. Правило по body[style*="overflow: hidden"] оставлено для чужого кода. Плавного скролла (Lenis/Locomotive), который пришлось бы глушить отдельно, на сайте нет. Три правила, а не одно с общим списком: браузер, не понявший хотя бы один селектор списка, выбрасывает правило целиком. */ html[style*="overflow: hidden"] { scrollbar-gutter: stable; } html:has(> body.shp-no-scroll), html:has(> body[style*="overflow: hidden"]) { overflow: hidden; scrollbar-gutter: stable; } html:has([aria-modal="true"]:not(.iti__country-selector, [hidden], [hidden] *, [style*="display: none"], [style*="display: none"] *, [style*="display:none"], [style*="display:none"] *)) { overflow: hidden; scrollbar-gutter: stable; } /* Чат поддержки на телефоне - на весь экран (chat.css, <=480px): фон под ним тоже не листаем, иначе после закрытия чата страница оказывается не там, где её оставили. */ @media (max-width: 480px) { html:has(#aisc-panel:not([hidden])) { overflow: hidden; } } @media (max-width: 900px) { /* ═══ 2. Поля ввода не мельче 16px ════════════════════════════════════ iOS Safari увеличивает страницу при фокусе на поле с шрифтом < 16px, и после ввода страница остаётся увеличенной и сдвинутой вбок. Поля на сайте были 13-15.2px. Исключение - поле кода карты (19px, моноширинный): крупнее 16 не трогаем. */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="color"]):not([type="image"]):not([type="hidden"]):not([data-ci-code]), select, textarea { font-size: 16px !important; } /* Поля, которые были ниже 44px (адресная книга, сортировки, фильтры) */ .pf-addr-form input, .pf-addr-form select, .pf-input, .ibd-feed-sort, .ibd-feed-city, .ibd-cm-sel, .ld-cell, .ibd-input-prefixed .ibd-input, .ibd-cd-color, .cm-reveal input { min-height: 44px; } /* Телефон: кнопка страны занимает высоту поля минус рамки - поле 46px даёт ей 44 */ .iti__tel-input { min-height: 46px; } .iti__selected-country { min-height: 44px; } /* ═══ 3. Шапка и мобильное меню ════════════════════════════════════════ */ .shp-icon-btn--mobile { width: 44px; height: 44px; } .shp-logo { min-height: 44px; } .shp-sheet-close { width: 44px; height: 44px; } .shp-sheet-cardpill { min-height: 44px; box-sizing: border-box; } /* Языки в шторке: были 17x21. */ .shp-lang-row .shp-lang-alt, .shp-lang-row .shp-lang-cur { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } /* Низ шторки - выше кнопки доступности: та лежит поверх всего (z-index 2147483000), и строку языков в шторке было не нажать. */ .shp-sheet-body { padding-bottom: 96px; } /* Главная: плашка у карты участника (right: -24px) вылезала на 4px за край экрана */ .idf-1 { right: -12px; } /* ═══ 4. Подвал ═════════════════════════════════════════════════════════ */ .foot-col a { padding-top: 10px; padding-bottom: 10px; } /* ═══ 5. Карусели, чипы, переключатели, кнопки-иконки ═════════════════ */ .tus-vp .tus-cnav-side { width: 44px; height: 44px; } .ibd-chip, .ibd-cm-chip, .ibd-feed-chip, .ibd-feed-seg, .ibd-feed-ghost, .ibd-view-toggle, .ibd-hero-add-btn, .ibd-plan-btn, .ibd-sb-map-toggle, .ibd-owner-respond-btn, .ibd-category-badge, .ibd-location-badge, .ev-comm-pill, .ev-invite-selectall, .ld-issue-modes button, .pf-seg, .pf-interest, .pf-ghost, .ld-ghost, .ld-ship-ghost, .tus-pill, .tus-tagpill, .pdir-fbtn, .pdir-rating-tab, .pdir-rating-cat, .pdir-btn, .ibd-cd-seg-btn, .ibd-button-sm, .tus-tags a, .ibd-dashboard-bizswitch a, .evpage .ev-acts button, [data-cm-tab], a[href*="preview=1"], .evpage .ev-cal-btn, .evpage .ev-share-btn, .evpage .ev-date-chip, .ibd-report-link { min-height: 44px; box-sizing: border-box; } .tus-tags a, .ibd-dashboard-bizswitch a, [data-cm-tab] { display: inline-flex; align-items: center; } /* Эти были блочными с паддингом: текст встал бы к верху - центрируем флексом. */ .ibd-cm-chip, .ibd-feed-chip, .ibd-category-badge, .ev-invite-selectall, .ld-issue-modes button, .pf-seg, .ibd-sb-map-toggle, .tus-tagpill { display: inline-flex; align-items: center; justify-content: center; } .ibd-location-badge { display: inline-flex; align-items: center; } .ibd-sb-map-toggle { display: flex; } /* Кнопки-иконки на карточках и в статье */ .ibd-card-share, .ibd-bookmark-btn, .tus-share__btn { width: 44px; height: 44px; } /* Чекбоксы-фильтры, «Запомнить меня», согласие в форме заявки клуба */ .ibd-check, .ibd-remember-label, .ibd-cs-check { min-height: 44px; } /* Звёзды оценки в форме отзыва: были 22x24. Зазор убираем - сама цель 44px даёт расстояние между звёздами. В под-оценках подпись («Цена/качество») - строкой над звёздами: в одну строку с пятью звёздами по 44px она выталкивала их за край. */ .ibd-star-input { gap: 0; } .ibd-star-label { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } .ibd-review-subrating-grid .ibd-star-input { flex-wrap: wrap-reverse; } .ibd-review-subrating-grid .ibd-star-input-label { flex-basis: 100%; } /* Ползунок направления градиента в дизайне карты: был 16px в высоту */ .ibd-cd-range { height: 44px; } /* Мелкие кнопки-действия */ .ibd-helpful-btn, .ev-memory-add, .ibd-cd-fix { min-height: 44px; box-sizing: border-box; } .ibd-helpful-btn { min-width: 44px; justify-content: center; } /* Кнопки-иконки с инлайновыми размерами: «Выйти из клуба» на карте (28px), «Удалить из друзей» / «Отклонить» и «Написать» в карточке друга (30-38px) */ [data-pf-card-remove], [data-cx-remove], [data-cx-reject], [data-cx-accept], .tus-cx-card > div > a[style*="border"] { min-width: 44px; min-height: 44px; box-sizing: border-box; } .tus-cx-card > div > a[style*="border"] { display: inline-flex; align-items: center; } .ibd-cd-fix { display: inline-flex; align-items: center; } /* Глазик пароля: был 16x22 у края поля */ .ibd-password-wrap .ibd-toggle-password { right: 2px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; } .ibd-password-wrap input { padding-right: 48px; } [dir="rtl"] .ibd-password-wrap .ibd-toggle-password { right: auto; left: 2px; } [dir="rtl"] .ibd-password-wrap input { padding-right: 14px; padding-left: 48px; } /* ═══ 6. Текстовые ссылки: зона касания без сдвига вёрстки ═════════════ */ .ibd-breadcrumb-link, .tus-crumbs a, .pf-uix-help, .pf-blog-all, .ibd-pc-row--todo a, .ibd-pc-row--todo button, .ibd-forgot-link, .ibd-hc-flinks a, .ibd-ab-flinks a, .ibd-ab-fnd-aside > a, .tus-featured__more, .ibd-info-value.ibd-link, #pf-settings a[href*="reset-password"], .tus-cx-card > div > a:not([style*="border"]), .tus-authorbox__name, .tus-article-cat, .evpage .ev-list-toggle { display: inline-flex; align-items: center; padding-top: 12px; padding-bottom: 12px; margin-top: -12px; margin-bottom: -12px; } /* «идут 2 человека · показать всех»: строка 18px + 13 + 13 = 44 (с паддингом 12 было 42). Стоит с отступом 10px сверху - сохраняем его: -13 + 10 = -3. */ .evpage .ev-list-toggle { padding-top: 13px; padding-bottom: 13px; margin-top: -3px; margin-bottom: -13px; } /* Короткие крошки («Юг» 19px, «Клубы» 40px, «Блог» 29px в ширину): зона касания шире с каждой стороны, отрицательный отступ возвращает вёрстку на место. Добавка меньше половины промежутка между соседними ссылками, чтобы их зоны не наезжали друг на друга: у .ibd-breadcrumb промежуток 12 + «/» + 12 = 29px, добавка 13 (19 + 26 = 45); у .tus-crumbs 8 + «/» + 8 = 22px, добавка 10 (29 + 20 = 49). */ .ibd-breadcrumb-link, .tus-crumbs a { min-width: 24px; justify-content: center; padding-inline: 13px; margin-inline: -13px; } .tus-crumbs a { padding-inline: 10px; margin-inline: -10px; } /* Заголовки-ссылки карточек справочника: строка 25px, с паддингом 7px было 39px. 10 + 25 + 10 = 45. */ .ibd-business-title a { display: inline-block; padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -10px; } /* Заголовок встречи в кабинете лидера: строка 20px, с паддингом 7px было 34px. 12 + 20 + 12 = 44. */ .ld-meet-link { display: inline-block; padding-top: 12px; padding-bottom: 12px; margin-top: -12px; margin-bottom: -12px; } /* ═══ 7. Плавающие кнопки чата и доступности ═══════════════════════════ Кнопки висят в правом нижнем углу поверх контента (доступность - выше всего). Не прячем их, а не даём закрыть то, что нельзя отодвинуть прокруткой. --tus-fab-a11y / --tus-fab-chat - отступ снизу у кнопки доступности и чата; от них считается подъём кнопок над cookie-баннером (inc/cookie-consent.php). */ :root { --tus-fab-a11y: 20px; --tus-fab-chat: var(--aisc-bottom, 88px); } /* Кнопки «Добавить по карте» и «Найти людей» на /contacts/ (инлайн-стили, были 36-39px) */ [data-cx-scan], [data-cx-scan] + a { min-height: 44px; box-sizing: border-box; } /* Открыта модалка или шторка - плавающие кнопки уходят ПОД её подложку и возвращаются, когда она закрыта. Иначе кнопка доступности (z-index 2147483000) лежала поверх «Отправить» в чате поддержки, «Отмена» в форме плана и строки языков в меню, а кнопка чата (99989) - поверх «Готово» в отметке пришедших (модалка 3100). Признак открытой модалки - не список модалок, а состояние, как в разделе 1: видимый [aria-modal="true"]. Прежний список data-атрибутов отставал от сайта: модалки, появившиеся после него («Связаться», «Вступить», «Все участники», лайтбокс, подтверждения ibd-ui.js), выпали, и кнопки снова лежали поверх их подложки. Исключения: панель доступности (.atx-sheet - сама часть .atx-root, иначе кнопка уходила бы под свою же панель) и список стран intl-tel-input (aria-modal, но прячется классом iti__hide). Отдельным правилом: браузер, не понявший сложный :has(), выбросит только его. */ html:has(> body.shp-no-scroll) :is(.aisc-toggle, .atx-root), html:has(> body[style*="overflow: hidden"]) :is(.aisc-toggle, .atx-root), html[style*="overflow: hidden"] :is(.aisc-toggle, .atx-root), html:has(#aisc-panel:not([hidden])) .atx-root { z-index: 1 !important; } html:has([aria-modal="true"]:not(.atx-sheet, .iti__country-selector, [hidden], [hidden] *, [style*="display: none"], [style*="display: none"] *, [style*="display:none"], [style*="display:none"] *)) :is(.aisc-toggle, .atx-root) { z-index: 1 !important; } /* ═══ 8. Модалки: кнопки, поля и крестики 44px ═════════════════════════ */ :is([data-ld-modal], [data-ci-modal], [data-ibd-plan-modal], [data-ibd-report-modal], [data-ev-invite-modal], [data-cinv-modal], [data-cm-contact-modal], .ld-routemodal, .ld-shipmodal, #ibd-agegate) :is(button, select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"])) { min-height: 44px; } /* Крестики закрытия (были 30-40px) */ [data-ev-invite-modal] button[data-ev-invite-close][aria-label], [data-cinv-modal] button[data-cinv-close][aria-label], [data-cm-contact-modal] button[data-cm-contact-close], .ibd-repmodal__close, .ibd-planmodal__close, [data-ld-modal] button[data-ld-modal-close][aria-label], [data-ci-modal] button[data-ci-close], .shp-mobile-search .cls { min-width: 44px; min-height: 44px; } /* Чат поддержки: кнопки шапки и строки ввода (были 32-36px) */ .aisc-head-btn, .aisc-head-close, .aisc-attach, .aisc-emoji, .aisc-send { min-width: 44px; min-height: 44px; } } /* ═══ 9. Телефон: компактные плавающие кнопки и запас под ними ═══════════════ На 360-414px две круглые кнопки 56+60px с отступами 20-24px занимали правую полосу 80x144px и закрывали кнопки форм, переключатели приватности и текст подвала при каждой прокрутке. 48px - по-прежнему крупная цель касания (норма 44), полоса сжимается до 60x116px. Кнопки не прячутся. */ @media (max-width: 560px) { :root { --tus-fab-a11y: 12px; --tus-fab-chat: 68px; } .atx-root.atx-pos-br { right: 12px; bottom: var(--tus-fab-a11y); } .atx-root.atx-pos-bl { left: 12px; bottom: var(--tus-fab-a11y); } .atx-root .atx-fab { width: 48px; height: 48px; padding: 11px; } .aisc-toggle { width: 48px; height: 48px; right: 12px; bottom: var(--tus-fab-chat); } [dir="rtl"] .aisc-toggle { right: auto; left: 12px; } /* Низ подвала (копирайт) - выше кнопок. Подвал сайта - соседний за #content (footer.php); голый footer задел бы и