/* ═══════════════════════════════════════════════════════════════════════ ui.css — ЕДИНЫЙ ИСТОЧНИК ПРАВДЫ для общих компонентов сайта Tendo. Подключается на КАЖДОЙ странице (включая index.html) ПЕРЕД home.css. Значения захардкожены — namespace-agnostic: главная использует токены --accent/--ink/--violet, подстраницы/блог/юр — --c-accent/--c-ink. Поэтому канон здесь в явных hex, а не var(), + !important на объединяющих свойствах, чтобы победить и inline-стили главной, и home.css/nav.css/blog*.css. Канон цвета: primary = #061D29 (hover #13303E), accent = #6D49CE. Канон радиуса: 12px на все кнопки (эталон навбар-CTA «Получить прототип»). Канон блика: left .6s cubic-bezier(.23,1,.32,1), width 60%, rgba .38, skewX(-18deg). §1 кнопки · §2 футер · §3 чекбокс · §6 переходы · §8 микро-UI иконок · RM-гейт ═══════════════════════════════════════════════════════════════════════ */ /* ============ §1 КНОПКИ — один канонический компонент ============ */ /* Единый радиус на ВСЕ кнопки сайта (было: 999px пилюля / 10px / 9px / 12px). */ .btn,.btn-primary,.btn-p,.btn-ghost,.btn-g,.cta-btn,.snav-cta,.cd-btn, .cta-band .btn,.oc-cta{border-radius:12px !important} /* primary / тёмная — единый цвет, фон, hover */ .btn-primary,.btn-p,.cta-btn{ background:#061D29 !important;color:#fff !important;border-color:transparent !important; position:relative;overflow:hidden; } @media (hover:hover) and (pointer:fine){ .btn-primary:hover,.btn-p:hover,.cta-btn:hover{ background:#13303E !important;transform:translateY(-2px); box-shadow:0 12px 30px -12px rgba(6,29,41,.45),0 0 0 1px rgba(109,73,206,.10) !important; } } /* блик-sweep — ОДИН канон для всех тёмных primary + навбар-CTA + Telegram */ .btn-primary::before,.btn-p::before,.cta-btn::before,.snav-cta::before,.cd-btn::before, .cta-band .btn-primary::before{ content:"";position:absolute;top:0;left:-120%;width:60%;height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent); transform:skewX(-18deg); transition:left .6s cubic-bezier(.23,1,.32,1) !important; pointer-events:none;z-index:1; } .btn-primary>*,.btn-p>*,.cta-btn>*,.snav-cta>*,.cd-btn>*{position:relative;z-index:2} @media (hover:hover) and (pointer:fine){ .btn-primary:hover::before,.btn-p:hover::before,.cta-btn:hover::before, .snav-cta:hover::before,.cd-btn:hover::before, .cta-band .btn-primary:hover::before{left:140% !important} } @media (hover:none){ .btn-primary::before,.btn-p::before,.cta-btn::before,.snav-cta::before,.cd-btn::before, .cta-band .btn-primary::before{content:none} } /* вторичная / ghost — единый вид: белый фон, серая рамка, hover → accent */ .btn-ghost,.btn-g{ background:#fff !important;color:#061D29 !important;border:1px solid #D1D5DB !important; } @media (hover:hover) and (pointer:fine){ .btn-ghost:hover,.btn-g:hover{ border-color:#6D49CE !important;background:rgba(109,73,206,.06) !important;transform:translateY(-2px); } } /* Telegram .cd-btn — светлая, но блик/hover в канон (см. sweep-группу выше) */ @media (hover:hover) and (pointer:fine){ .cd-btn:hover{transform:translateY(-2px)} } /* ============ §2 ФУТЕР — единый компонент (эталон .foot, светлый) ============ */ .foot{background:#F6F8FA;color:#425D6D;border-top:1px solid #E5E7EB;padding:64px 0 40px;margin-top:clamp(4rem,8vw,7rem);position:relative} .foot .wrap,.foot .container{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1rem,4vw,2rem)} /* 🔴 2026-08-25, QA-волна 3. Было пять дорожек: бренд + Сайты/Боты/Компания/Документы. Стало шесть: добавлены колонки «ИИ» (четыре новые страницы направления) и «Услуги» (аналитика, поддержка, хостинг, документы — их в подвале не было вообще). minmax(0,1fr) обязателен: голый 1fr берёт min-content дорожки, и длинная ссылка «Многостраничные сайты» раздвигала бы грид за контейнер. Зазор сжимается вместе с экраном — на 1024–1140 шесть дорожек по 40px не помещаются. */ .foot-grid{display:grid;grid-template-columns:2fr repeat(5,minmax(0,1fr));gap:clamp(20px,2.4vw,40px);margin-bottom:40px} .foot-brand .logo,.foot .logo,.foot-brand .logo-f,.foot-brand b{margin-bottom:14px;font-size:20px;color:#061D29;font-weight:800;letter-spacing:-.02em;display:inline-flex;align-items:center;gap:8px} .foot .logo .dot,.foot .logo .d,.foot-brand .logo-f span{color:#6D49CE} .foot-brand b i{width:15px;height:15px;border-radius:var(--r-sm);background:linear-gradient(95deg,#4A63E0,#6D49CE 52%,#1AA47C);transform:rotate(45deg);display:inline-block} .foot-desc{color:#425D6D;font-size:14px;line-height:1.7;margin:0 0 24px;max-width:280px} .foot-social{display:flex;gap:10px} .foot-soc{width:38px;height:38px;border-radius:var(--r-sm);border:1px solid #E5E7EB;background:#fff;display:flex;align-items:center;justify-content:center;color:#425D6D;transition:color .2s,border-color .2s,background .2s,transform .2s} .foot-soc svg{width:18px;height:18px} @media (hover:hover) and (pointer:fine){.foot-soc:hover{color:#061D29;border-color:#6D49CE;background:rgba(109,73,206,.08);transform:translateY(-2px)}} .foot-col h3,.foot-col h4,.foot h4,.foot-col .foot-h{font-size:12px;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:#061D29;margin-bottom:16px;font-weight:600} .foot-col a{display:block;color:#425D6D;font-size:14px;margin-bottom:10px;transition:color .2s} @media (hover:hover) and (pointer:fine){.foot-col a:hover{color:#061D29}} .foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;border-top:1px solid #E5E7EB} .foot-copy{font-size:13px;color:#5A7382} .foot-badges{display:flex;gap:8px;flex-wrap:wrap} .foot-badge{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.06em;color:#425D6D;background:#fff;border:1px solid #E5E7EB;padding:4px 10px;border-radius:var(--r-pill)} .foot-legal{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:18px;font-size:12px;color:#425D6D} .foot-legal a{color:#425D6D;transition:color .2s} @media (hover:hover) and (pointer:fine){.foot-legal a:hover{color:#061D29}} /* Единая сетка футера = как на главной: desktop 4 кол → ≤1024 2 кол (brand на всю) → ≤380 1 кол */ @media(max-width:1024px){.foot-grid{grid-template-columns:1fr 1fr;gap:28px}.foot-brand{grid-column:1 / -1}} @media(max-width:480px){.foot-bottom{flex-direction:column;gap:14px;align-items:flex-start}} @media(max-width:380px){.foot-grid{grid-template-columns:1fr}} /* утилита: ряд CTA-кнопок по центру (был повторяющийся инлайн-стиль на подстраницах) */ .cta-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:24px} /* ============ §3 ЧЕКБОКС согласия — эталон главной (appearance:none + ::after) ============ */ input[type=checkbox]{ appearance:none;-webkit-appearance:none;width:19px;height:19px;flex:none;padding:0;margin:0; border:1.6px solid #D1D5DB;border-radius:var(--r-sm);background:#fff;cursor:pointer;position:relative;vertical-align:middle; box-shadow:none;accent-color:auto; transition:border-color .2s,background .2s,box-shadow .2s,transform .12s cubic-bezier(.34,1.56,.64,1); } @media (hover:hover) and (pointer:fine){input[type=checkbox]:hover{border-color:#6D49CE}} input[type=checkbox]:checked{background:linear-gradient(135deg,#6D49CE,#4A63E0);border-color:transparent;box-shadow:0 4px 12px -3px rgba(109,73,206,.45)} input[type=checkbox]:checked::after{ content:"";position:absolute;left:50%;top:45%;width:4.5px;height:9px; border:solid #fff;border-width:0 2px 2px 0;transform:translate(-50%,-50%) rotate(45deg);transform-origin:center; animation:uiCheckPop .22s cubic-bezier(.22,.61,.36,1); } input[type=checkbox]:active{transform:scale(.86)} input[type=checkbox]:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(109,73,206,.26)} @keyframes uiCheckPop{0%{opacity:0;transform:translate(-50%,-50%) rotate(45deg) scale(.4)}100%{opacity:1;transform:translate(-50%,-50%) rotate(45deg) scale(1)}} /* ============ §8 ВАУ-микроUI на иконках-плитках ============ */ /* поверхности: .promo .ic (главная), .vitem .ck, .card .ic, .out-card .oic (подстраницы) */ .promo .ic,.vitem .ck,.card .ic,.out-card .oic,.oic{ transition:transform .35s cubic-bezier(.34,1.4,.5,1),box-shadow .3s,background .3s,color .3s; will-change:transform; } .promo .ic svg,.out-card .oic svg,.card .ic svg{transition:transform .35s cubic-bezier(.34,1.4,.5,1)} @media (hover:hover) and (pointer:fine){ .promo:hover .ic,.vitem:hover .ck,.out-card:hover .oic,.card:hover .ic{ transform:translateY(-3px) rotate(-4deg); box-shadow:0 10px 22px -12px rgba(109,73,206,.45); } .promo:hover .ic svg,.out-card:hover .oic svg,.card:hover .ic svg{transform:scale(1.08)} } /* ============ §9 ФИЛЬТР-ЧИПЫ — единый стиль (эталон .qa-tab) ============ */ /* ОДИН класс на ВСЕ фильтр-чипы сайта: блог, главная (FAQ-тизер), вопрос-ответ. Определение живёт ТОЛЬКО здесь (ui.css грузится на всех трёх страницах; home.css — нет на index.html). Значения — namespace-agnostic hex, равные резолву эталонных токенов home.css: --c-muted #425D6D · --c-tint #F6F8FA · --c-line2 #D1D5DB · --c-line #E5E7EB --c-accent #6D49CE · --c-text #061D29 · --c-faint #5A7382 · --f-mono / --ease. */ .qa-tab{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.9rem;color:#425D6D;background:#F6F8FA;border:1px solid #D1D5DB;border-radius:var(--r-pill);padding:9px 18px;cursor:pointer;transition:color .2s cubic-bezier(.4,0,.2,1),border-color .2s cubic-bezier(.4,0,.2,1),background .2s cubic-bezier(.4,0,.2,1)} .qa-tab .n{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.74rem;color:#5A7382;transition:color .2s} /* 🔴 25.08.2026: фильтр блога переехал с role="tab"/aria-selected на кнопки с aria-pressed (панелей у него нет, см. js/ext/f4103c9dad37e665.js). Оба состояния в селекторе — чтобы чип подсвечивался и там, где семантика вкладок настоящая. */ .qa-tab[aria-selected="true"],.qa-tab[aria-pressed="true"]{color:#061D29;border-color:#6D49CE;background:rgba(109,73,206,.08)} .qa-tab[aria-selected="true"] .n,.qa-tab[aria-pressed="true"] .n{color:#6D49CE} /* 🔴 Было `border-color:#E5E7EB` — рамка при наведении становилась СВЕТЛЕЕ обычной (#D1D5DB), а у выбранной вкладки наведение стирало акцентную рамку (#6D49CE → #E5E7EB), то есть подсказывало «эта вкладка не выбрана». По словарю (тип 17): наведение → текст и рамка в --c-ink; выбранная — без изменений. */ @media (hover:hover) and (pointer:fine){.qa-tab:not([aria-selected="true"]):not([aria-pressed="true"]):hover{color:#061D29;border-color:#061D29}} /* тач-таргет ≥44px на мобиле (§4 чёрный список — мелкие контролы) */ @media(max-width:768px){.qa-tab{min-height:44px}} /* ============ §6 ПЕРЕХОДЫ МЕЖДУ СТРАНИЦАМИ — ОТКЛЮЧЕНЫ (по запросу) ============ */ /* Никаких анимаций перехода: мгновенная навигация на всех страницах. */ @view-transition{navigation:none} .ui-nav.ui-in body,.ui-nav.ui-out body{animation:none!important;opacity:1!important;transform:none!important;transition:none!important} /* ============ prefers-reduced-motion — глушим весь вау-слой ============ */ @media (prefers-reduced-motion:reduce){ .btn-primary::before,.btn-p::before,.cta-btn::before,.snav-cta::before,.cd-btn::before, .cta-band .btn-primary::before{content:none !important} .promo .ic,.vitem .ck,.card .ic,.out-card .oic,.oic{transition:none !important;transform:none !important} ::view-transition-old(root),::view-transition-new(root){animation:none !important} .ui-nav.ui-in body,.ui-nav.ui-out body{animation:none !important;opacity:1 !important;transition:none !important} } /* FOOTER-MOBILE-COMPACT — единый компактный футер на всех страницах */ @media(max-width:768px){ .foot{padding:34px 0 24px;margin-top:clamp(3rem,7vw,5rem)} .foot-grid{gap:24px 20px;margin-bottom:22px} .foot-brand{grid-column:1/-1} .foot-desc{display:none} } /* ── Реферальная механика (js/ref.js) ── */ .ref-banner{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:1400; display:flex;align-items:center;gap:10px;max-width:min(560px,calc(100vw - 32px)); padding:12px 14px;border-radius:var(--r-md);background:var(--c-text,#061D29);color:#fff; box-shadow:0 12px 32px rgba(6,29,41,.28);font-size:14px;line-height:1.4; animation:refIn .35s cubic-bezier(.2,.8,.2,1) both} @keyframes refIn{from{opacity:0;transform:translateX(-50%) translateY(12px)}to{opacity:1;transform:translateX(-50%) translateY(0)}} .ref-banner-ico{font-size:18px;flex:0 0 auto} .ref-banner-txt{flex:1 1 auto} .ref-banner-txt b{color:#fff} .ref-banner-x{flex:0 0 auto;background:none;border:0;color:rgba(255,255,255,.6); font-size:15px;line-height:1;cursor:pointer;padding:4px;border-radius:var(--r-sm)} .ref-banner-x:hover{color:#fff;background:rgba(255,255,255,.1)} @media (prefers-reduced-motion:reduce){.ref-banner{animation:none}} .ref-toggle{align-self:flex-start;background:none;border:0;padding:2px 0; color:var(--c-accent,#6D49CE);font:inherit;font-size:13px;font-weight:600; cursor:pointer;text-decoration:underline;text-underline-offset:3px} .ref-toggle:hover{opacity:.8} .ref-code,.ref-phone{display:flex;flex-direction:column;gap:5px} /* 🔴 БАГ (13.07.2026): ref.js создаёт эти блоки с hidden=true, но display:flex перебивает встроенное [hidden]{display:none} — и «Промокод», «Телефон» и подсказка про скидку висели РАСКРЫТЫМИ на всех 14 формах сайта. Форма выглядела раздутой, а пользователь видел поля, которые должны появляться только после клика. Правило: любой элемент с display в CSS обязан иметь пару [hidden]{display:none}. */ .ref-code[hidden],.ref-phone[hidden]{display:none} /* 🔴 20.07.2026 — ТОТ ЖЕ БАГ ВЕРНУЛСЯ, потому что чинили точечно. На `podderzhka` в @media(max-width:640px) у `.tf-rows dt` стоит display:flex — и на телефоне цены ТРЁХ неактивных вкладок тарифов («Веб-приложения», «Боты», «AI-боты») висели столбиком голых сумм без названий: 9 лишних строк. На десктопе бага нет — там у dt никакого display не объявлено, и hidden работает. Поэтому и не ловилось: правило-нарушитель живёт ТОЛЬКО в мобильной медиа. Ставим ОДИН глобальный пояс вместо перечисления элементов по одному. ui.css подключён на всех страницах, так что закрывает и будущие случаи. */ [hidden]{display:none!important} .ref-status{font-size:12.5px;color:var(--c-faint,#5A7382);min-height:1em} .ref-status.ok{color:#1B9E6A;font-weight:600} .ref-status.bad{color:#D6455D;font-weight:600} .ref-hint{font-size:12px;color:var(--c-faint,#5A7382);line-height:1.45} .ref-alt{margin-top:12px;font-size:13.5px;color:var(--c-muted,#425D6D)} .ref-issue{display:flex;flex-direction:column;gap:10px;margin-top:16px;max-width:440px; background:#fff;border:1px solid var(--c-line2,#E5E7EB);border-radius:var(--r-md);padding:20px} .ref-issue[hidden]{display:none} .ref-issue-head h3{font-size:1.02rem;font-weight:700;margin:0 0 4px} .ref-issue-head p{font-size:12.5px;line-height:1.5;color:var(--c-faint,#5A7382);margin:0 0 4px} .ref-issue-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} @media(max-width:520px){.ref-issue-grid{grid-template-columns:1fr}} .ref-issue .btn{width:100%;justify-content:center;margin-top:2px} .ref-issue input[type=text],.ref-issue input[type=tel],.ref-issue input[type=email]{ padding:11px 13px;border:1px solid var(--c-line,#E5E7EB);border-radius:var(--r-sm); font:inherit;font-size:14px;background:#fff;color:var(--c-text,#061D29)} .ref-issue input:focus{outline:2px solid var(--c-accent,#6D49CE);outline-offset:1px;border-color:transparent} .ref-consent{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.45;color:var(--c-muted,#425D6D)} .ref-consent input{margin-top:2px;flex:0 0 auto} /* ─── PWA: кнопка «Установить приложение» в подвале (ненавязчиво) ─── */ .pwa-install-wrap{margin-top:14px} .pwa-install{ display:inline-flex;align-items:center;gap:8px; min-height:44px;padding:10px 16px;border-radius:var(--r-sm); border:1px solid var(--c-line,#E5E7EB);background:#fff; color:var(--c-text,#061D29);font:inherit;font-size:14px;font-weight:600; cursor:pointer;transition:border-color .2s,background .2s,transform .2s} .pwa-install svg{color:var(--c-accent,#6D49CE)} @media (hover:hover) and (pointer:fine){ .pwa-install:hover{border-color:var(--c-accent,#6D49CE);background:rgba(109,73,206,.06);transform:translateY(-1px)}} .pwa-ios-hint{ margin-top:10px;max-width:320px;padding:11px 13px;border-radius:var(--r-sm); background:var(--c-lav,#F1ECFD);color:var(--c-muted,#425D6D); font-size:13px;line-height:1.5} .pwa-ios-hint b{color:var(--c-text,#061D29)} /* ═══════════════════════════════════════════════════════════════════════════ ФОКУС С КЛАВИАТУРЫ — единый видимый индикатор (аудит 28.07.2026). 🔴 Живой прогон табом по главной: из 134 фокусируемых элементов у 13 не было НИКАКОГО видимого признака фокуса — это ссылки выпадающих меню навбара. Плюс у полей формы фокус был объявлен тремя разными способами (обводка / тень / только смена цвета рамки), а «смена цвета рамки» слаборазличима. Правило-подстраховка: любой интерактивный элемент, у которого нет своего :focus-visible, получает обводку. Своя обводка элемента, объявленная ниже по каскаду или с большей специфичностью, продолжает работать как была. ── */ :where(a[href], button, input, textarea, select, summary, [role="button"], [role="radio"], [role="switch"], [role="tab"], [tabindex]:not([tabindex="-1"])):focus-visible{ outline:2px solid var(--c-accent,#6D49CE); outline-offset:2px; border-radius:var(--r-sm,6px); } /* Мышью фокус не показываем — только с клавиатуры (:focus-visible это и делает, строка ниже гасит нативную обводку у браузеров без поддержки :focus-visible). */ :where(a[href], button, summary):focus:not(:focus-visible){outline:none} /* Выпадающее меню навбара: триггер и ссылки внутри. Меню открывается по :focus-within (nav.css), поэтому ссылки становятся достижимыми только после фокуса на триггере — обводка нужна обоим. */ .snav-ddt:focus-visible{outline:2px solid var(--c-accent,#6D49CE);outline-offset:2px} .snav-ddm a:focus-visible{outline:2px solid var(--c-accent,#6D49CE);outline-offset:-2px;background:rgba(109,73,206,.08)} /* ══════════════════════════════════════════════════════════════════════════ §12 ДОБОРКА СОСТОЯНИЙ — заход 9 (визуальный аудит 28.07.2026) Матрица «22 типа × 6 состояний» пройдена реальной мышью и реальной клавиатурой. Ниже — типы, у которых объявленное в СЛОВАРЕ поведение в коде отсутствовало. Все правила наведения — только в hover-гейте. ══════════════════════════════════════════════════════════════════════════ */ /* Тип 15 «Тумблер» — по словарю рамка при наведении уходит в акцент. Правила :hover у .switch не было НИ В ОДНОМ файле: замер показал «нет изменений» на /sayty/veb-prilozheniya/ и /ai-avtomatizaciya/. */ @media (hover:hover) and (pointer:fine){ .switch:hover{border-color:var(--c-accent,#6D49CE)} } /* Тип 20 «Бургер и закрытие меню» — по словарю translateY(-1px). Правила :hover у .snav-burger не было; замер — «нет изменений». */ .snav-burger{transition:transform .18s ease} @media (hover:hover) and (pointer:fine){ .snav-burger:hover{transform:translateY(-1px)} } @media (prefers-reduced-motion:reduce){ .snav-burger{transition:none} .snav-burger:hover{transform:none} } /* Тип 19 «Поле формы» — 🔴 фокус с клавиатуры был невидим. `input:focus{outline:none}` в home.css и index.css перебивал правило- подстраховку из §11 (оно на :where() и имеет нулевую специфичность). Оставался только box-shadow rgba(109,73,206,.12) — 12 % прозрачности, на глаз почти не читается. Возвращаем обводку, кольцо оставляем. */ /* !important обязателен: ui.css грузится РАНЬШЕ index.css/home.css, а там `input:not([type=checkbox]):not([type=range]):focus{outline:none}` — и по специфичности, и по порядку сильнее. Проверено живьём: без !important обводка оставалась `none`. */ input:not([type=checkbox]):not([type=range]):not([type=radio]):focus-visible, textarea:focus-visible, select:focus-visible{ outline:2px solid var(--c-accent,#6D49CE)!important; outline-offset:2px!important; } /* Тип 21 «Кнопка чата» — подъём при наведении не работал: на кнопке висела `animation:floaty 4s infinite`, а анимация transform всегда сильнее обычного объявления transform в `:hover`. 29.07 по решению владельца floaty снята совсем (осталась только пульсация кольца `.fab-ring` на дочернем элементе), поэтому глушитель `:hover{animation:none}` больше не нужен и убран — подъём работает штатно. Проверено замером: transform при наведении matrix(1.06,0,0,1.06,0,-3). */ /* ── Тач-гейт для правил наведения, объявленных ВНЕ hover-гейта ────────── Механическая опись 28.07: 373 правила `:hover` в проекте объявлены без обёртки `@media (hover:hover) and (pointer:fine)` (76 из них двигают элемент — transform/opacity/max-height). В настоящем тач-контексте (hasTouch: (hover:none) и (pointer:coarse) = true) в Chromium состояние наведения НЕ залипает — оно вспыхивает на время касания и снимается. Проверено тапом: карточка блога на главной поднималась на −3px во время касания и возвращалась после. В WebKit/iOS Safari поведение исторически другое (ховер держится до следующего тапа), а WebKit в этой среде не запускается — поэтому ставим глушитель по типам, а не полагаемся на движок. Правила ниже гасят ТОЛЬКО движение; смена цвета остаётся — она безвредна. */ @media (hover:none), (pointer:coarse){ .card:hover,.bcard:hover,.blog-card:hover,.related-card:hover,.anav-card:hover, .post:hover,.dir-card:hover,.proj:hover,.pr:hover,.plan:hover,.feat:hover, .guar:hover,.tier:hover,.rule-card:hover,.ocard:hover,.promo:hover, .btn:hover,.btn-primary:hover,.btn-ghost:hover,.cta-btn:hover,.cd-btn:hover, .snav-cta:hover,.foot-soc:hover,.chip:hover,.tt:hover,.burger:hover, .snav-close:hover,.mob-close:hover,.snav-burger:hover,.chat-fab:hover{ transform:none; } } /* ── Поля ввода: 16px там, где палец, а не там, где узкое окно ──────────── Правило «iOS не зумит при фокусе» в index.css стояло под `max-width:760px`. iPad Safari зумит поле <16px точно так же, а его ширина 768 / 810 / 834 / 1024 — то есть на планшете правило не срабатывало. Замер: на index.html при 768px и шире поля 13.3px и 14px. Привязываем к типу указателя, а не к ширине. */ @media (pointer:coarse){ input:not([type=checkbox]):not([type=range]):not([type=radio]), textarea,select{font-size:16px} } /* ── Чат в горизонтальной ориентации телефона ──────────────────────────── 🔴 При окне 844×390 (iPhone 13 боком) панель считалась как height:min(640px, 100dvh − 120px) = 270px, из которых шапка + поле ввода + подпись съедали всё: на ленту переписки оставалось 32px — меньше одной строки. То же на 740×320. Делаем панель в низком окне почти во всю высоту и убираем подпись, которая в такой полосе только отнимает место. */ @media (max-height:520px) and (orientation:landscape){ .chat-panel{ top:8px!important;bottom:8px!important;height:auto!important;max-height:none!important; width:min(420px,calc(100vw - 24px))!important; } /* Всё, кроме самой переписки, ужимается: в полосе 390px высоты шапка+чипы+поле+подсказка съедали 276px из 374px, на ленту оставалось 98px. */ .chat-note,.chat-hint{display:none!important} .chat-head{padding:7px 12px!important} .chat-head .av{width:28px!important;height:28px!important} .chat-input{padding:7px 9px!important;flex-wrap:nowrap!important} .chat-input input{padding:7px 10px!important} .chips{padding:4px 10px!important;gap:6px!important;flex-wrap:nowrap!important;overflow-x:auto} .chat-fab{bottom:10px;right:10px;width:48px;height:48px} } /* ── Тач-цели ≥44×44 там, где палец ─────────────────────────────────────── Механический замер 28.07 по всем 105 страницам: бургер 36×36, иконки соцсетей в подвале 38×38, сегменты тарифа 144×40, тумблер 54×30 — все ниже минимума 44px. Растим область нажатия, а не сам рисунок: рамка и иконка остаются прежнего размера, увеличивается только зона. */ @media (pointer:coarse){ .snav-burger{width:44px;height:44px} .foot-soc{position:relative} .foot-soc::after{content:"";position:absolute;top:-3px;bottom:-3px;left:-3px;right:-3px} /* !important: сегменты объявлены в инлайн-