/* mobile.css — защитный адаптивный слой (quality floor). Не редизайн: чинит типовые мобильные поломки поверх существующей вёрстки. Подключать ПОСЛЕДНИМ в , после основного CSS. */ /* 1. Ничто не создаёт горизонтальный скролл */ html, body { max-width: 100%; overflow-x: hidden; } *, *::before, *::after { box-sizing: border-box; } /* 2. Медиа не вылезают за экран */ img, svg, video, canvas, iframe, embed, object { max-width: 100%; height: auto; } /* 3. Таблицы — в горизонтальный скролл-контейнер, а не ломают вёрстку. Оборачивать таблицу в
ИЛИ авто через overflow. */ table { max-width: 100%; } .table-scroll, .table-wrap, figure.table { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 640px) { table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } } /* 4. Длинные строки (url, коды, номера дел) переносятся, не распирают контейнер */ pre, code, kbd, samp { max-width: 100%; overflow-x: auto; } p, li, h1, h2, h3, h4, td, th, a, dd, dt, blockquote { overflow-wrap: break-word; word-wrap: break-word; } /* 5. Мин. размер тап-целей на телефоне (Google mobile-friendly) */ @media (max-width: 640px) { a, button, input[type="button"], input[type="submit"], .btn, [role="button"] { min-height: 44px; } nav a { padding-top: .5rem; padding-bottom: .5rem; } } /* 6. Формы не шире экрана и не зумят на iOS (font-size>=16px убирает авто-zoom) */ input, select, textarea, button { max-width: 100%; font-size: 16px; } /* 7. Мягкий фолбэк для grid/flex-рядов: на узком экране — в колонку. Срабатывает только если вёрстка НЕ задала свой брейкпоинт (безопасно). */ @media (max-width: 560px) { .row, .cols, .grid-2, .grid-3, .cols-2, .cols-3, .two-col, .three-col { display: block !important; } .row > *, .cols > *, [class*="grid"] > * { width: 100% !important; } } /* 8. Никакого фиксированного пиксельного width у контейнеров на мобиле */ @media (max-width: 640px) { .wrap, .container, .content, main, section, header, footer, article { width: auto !important; max-width: 100% !important; } } /* 9. Уважать reduced-motion (a11y quality floor) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* --- контактная форма (contact-form.html) --- */ .hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .contact-form { display: grid; gap: .85rem; max-width: 560px; } .contact-form label { display: grid; gap: .3rem; font-size: .95rem; } .contact-form input, .contact-form textarea { width: 100%; padding: .6rem .7rem; border: 1px solid currentColor; border-radius: 4px; background: transparent; } .contact-form .cf-consent { grid-template-columns: auto 1fr; align-items: start; gap: .5rem; font-size: .88rem; } .contact-form .cf-consent input { width: auto; min-height: 0; margin-top: .2rem; } .contact-form .btn { justify-self: start; cursor: pointer; padding: .65rem 1.4rem; } .contact-form .cf-or { font-size: .85rem; opacity: .8; } .contact-form .form-msg { font-size: .9rem; }