/** * Мобильный слой: юзабилити на телефоне. * * Грузится ПОСЛЕДНИМ (functions.php, приоритет 1000 - после sunday-unify.css), поэтому * перебивает стили темы и плагина без !important там, где специфичность равна. * Здесь только то, что мешает пользоваться сайтом пальцем: цели касания, поля без * зума iOS, плавающие кнопки чата и доступности, блокировка фона под шторками. * Вид на десктопе не меняется: всё - под @media (max-width: 900px) и уже * (900 - порог мобильной шапки, site-header-pro.css). * * Норма цели касания: 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 (вход в клуб, контакт клуба, модалки кабинета лидера), листали фон под собой. Блокируем на html - туда, откуда прокрутка реально идёт. Только на телефоне и планшете: на десктопе html { overflow: hidden } убирает полосу прокрутки и страница прыгает вбок на её ширину, а компенсация полосы есть не во всех модалках. */ @media (max-width: 900px) { html:has(> body.shp-no-scroll), html:has(> body[style*="overflow: hidden"]) { overflow: hidden; } } /* Чат поддержки на телефоне - на весь экран (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, .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 человека · показать всех» стоит с отступом 10px сверху - сохраняем его */ .evpage .ev-list-toggle { margin-top: -2px; } /* Короткие крошки («Юг») были 19px в ширину */ .ibd-breadcrumb-link, .tus-crumbs a { min-width: 24px; justify-content: center; } /* Заголовки-ссылки карточек (справочник, встречи кабинета лидера): 27-30px */ .ibd-business-title a, .ld-meet-link { display: inline-block; padding-top: 7px; padding-bottom: 7px; margin-top: -7px; margin-bottom: -7px; } /* ═══ 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). Признак открытой модалки - блокировка прокрутки (её ставят все модалки сайта) плюс модалки без неё. */ 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, html:has(#ibd-agegate:not([hidden])) :is(.aisc-toggle, .atx-root), html:has([data-ibd-plan-modal]:not([hidden])) :is(.aisc-toggle, .atx-root), html:has([data-ibd-report-modal]:not([hidden])) :is(.aisc-toggle, .atx-root), html:has([data-ev-invite-modal]:not([hidden])) :is(.aisc-toggle, .atx-root), html:has([data-cinv-modal]:not([hidden])) :is(.aisc-toggle, .atx-root), html:has([data-ld-modal]:not([hidden])) :is(.aisc-toggle, .atx-root), html:has([data-ci-modal]:not([hidden])) :is(.aisc-toggle, .atx-root), html:has(.ld-routemodal:not([hidden])) :is(.aisc-toggle, .atx-root), html:has(.ld-shipmodal:not([hidden])) :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 задел бы и