/* ── Мобильный app-shell (задача 4, редизайн по макету «cst_ мобильная»). ── Виден ТОЛЬКО на телефонах (<=767px): нижний таб-бар (Заявки/Компании/Чат/Профиль) + плавающая кнопка FAB «новая заявка». Палитра — брендовая сайта (#11AE88), а не зелёный макета, чтобы мобилка не разъезжалась с десктопом. Навигация — обычные ссылки (серверный рендер, не SPA). z-index ниже модалок/дропдаунов/шапки. */ :root{ --ms-green:#11AE88; --ms-green-d:#0E9476; --ms-mut:#8b97a8; } .mobile-tabbar{ display:none; } .mobile-fab{ display:none; } @media (max-width:767px){ /* запас снизу под фикс-таб-бар, чтобы контент/футер не прятались за ним */ body{ padding-bottom:66px; } .mobile-tabbar{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40; height:62px; background:#fff; border-top:1px solid #eef0f3; box-shadow:0 -2px 16px rgba(20,40,60,.06); padding-bottom:env(safe-area-inset-bottom,0); } .mobile-tab{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; text-decoration:none; color:var(--ms-mut); font-size:11px; font-weight:600; position:relative; -webkit-tap-highlight-color:transparent; } .mobile-tab svg{ width:23px; height:23px; stroke:currentColor; fill:none; stroke-width:1.8; } .mobile-tab span{ line-height:1; } .mobile-tab.active{ color:var(--ms-green); } /* красный бейдж/точка непрочитанного на вкладке */ .mobile-tab .ms-badge{ position:absolute; top:6px; left:calc(50% + 7px); min-width:16px; height:16px; padding:0 4px; background:#E24B4A; color:#fff; font-size:10px; font-weight:700; border-radius:8px; display:flex; align-items:center; justify-content:center; line-height:1; } .mobile-fab{ display:flex; position:fixed; right:16px; bottom:78px; z-index:41; width:56px; height:56px; border-radius:50%; background:var(--ms-green); color:#fff; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(17,174,136,.45); text-decoration:none; transition:transform .15s ease, background .15s ease; } .mobile-fab:hover{ background:var(--ms-green-d); } .mobile-fab:active{ transform:scale(.94); } .mobile-fab svg{ width:26px; height:26px; stroke:#fff; fill:none; stroke-width:2.5; } } /* ══════════ Экран «Заявки» (tenders/catalog) под мобильный макет (фаза 1) ══════════ Переверстка на существующей разметке .catalog-v2 — только мобильный @media, десктоп не трогаем. */ @media (max-width:767px){ .catalog-v2 .cards{ gap:12px; } .catalog-v2 .tender-card{ flex-direction:column; align-items:stretch; gap:0; position:relative; padding:14px 15px; border-radius:14px; box-shadow:0 1px 3px rgba(16,45,38,.07), 0 1px 2px rgba(16,45,38,.04); } .catalog-v2 .tender-card:hover{ transform:none; box-shadow:0 1px 3px rgba(16,45,38,.07), 0 1px 2px rgba(16,45,38,.04); } /* длинного тега-категории в макете нет — прячем; оставляем статус + точку срочности. справа резервируем место под блок «N предложений». */ .catalog-v2 .tc-tags{ margin-bottom:8px; padding-right:74px; } .catalog-v2 .tc-tags .cat-tag{ display:none; } .catalog-v2 .tc-title{ font-size:15px; line-height:1.3; margin-bottom:10px; } .catalog-v2 .tc-meta{ gap:6px 14px; font-size:13px; margin-bottom:12px; } .catalog-v2 .tc-meta svg{ width:13px; height:13px; } /* правый столбец (число предложений + просмотры) — компактный кластер в правом верхнем углу */ .catalog-v2 .tc-offers{ position:absolute; top:14px; right:15px; } .catalog-v2 .tc-offers .offers-num{ font-size:20px; } .catalog-v2 .tc-offers .offers-lbl{ font-size:9px; } .catalog-v2 .tc-offers .tc-views{ margin-top:2px; } /* подвал: компактные кнопки-пилюли (outline-green как в макете) */ .catalog-v2 .tc-foot{ padding-top:12px; gap:8px; } .catalog-v2 .btn-sm, .catalog-v2 .fav-btn, .catalog-v2 .abtn{ height:32px; } .catalog-v2 .btn-sm{ border-radius:9px; font-size:12px; } .catalog-v2 .btn-sm-green{ background:#fff; color:var(--ms-green); border-color:var(--ms-green); } .catalog-v2 .btn-sm-green svg{ stroke:var(--ms-green); } .catalog-v2 .abtn{ padding:0 12px; font-size:12px; } /* футер автора: сброс десктопного margin-left:auto (иначе рваный диагональный перенос) + отдельная полноширинная строка, чтобы «Редактировать/Удалить» шли ровным рядом */ .catalog-v2 .author-actions{ gap:8px; margin-left:0; flex-basis:100%; } } /* ── Drawer-фильтр категорий (мобилка) — ОБЩИЙ для каталогов заявок и компаний (оба используют .catalog-checkboxes-part внутри .catalog-container). Категорийная колонка превращается в выезжающую панель, открывается кнопкой «фильтр» в строке поиска. Разметка формы не меняется — чекбоксы остаются в #filterForm. ── */ .ms-drawer-overlay, .ms-drawer-head, .ms-drawer-apply{ display:none; } /* Кнопка «фильтр» — строго мобильная. !important обязателен: .catalog-search button (специфичность 0,1,1) перебивает .ms-filter-btn (0,1,0), из-за чего на десктопе кнопка протекала зелёным квадратом и замораживала страницу (drawer+inert+scroll-lock), хотя фильтры на десктопе и так постоянно видны в левом сайдбаре. */ .ms-filter-btn{ display:none !important; } @media (max-width:767px){ /* кнопка «фильтр» слева от поиска. !important — чтобы перебить общий зелёный градиент .catalog-search button (стиль сабмита «Найти», специфичность выше). */ .ms-filter-btn{ display:inline-flex!important; align-items:center; justify-content:center; position:relative; width:44px!important; height:42px!important; flex-shrink:0; cursor:pointer; background:#fff!important; color:#212121!important; padding:0!important; border:1px solid rgba(112,112,112,.18)!important; border-radius:12px!important; } .ms-filter-btn svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.7; } .ms-filter-btn .ms-filter-count{ position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 4px; background:var(--ms-green); color:#fff; font-size:10px; font-weight:700; border-radius:9px; display:flex; align-items:center; justify-content:center; } /* категорийная колонка → off-canvas drawer. Начинается ПОД фикс-хедером (86px), т.к. .container{z-index:5} создаёт стек-контекст и drawer не может перекрыть хедер. Селектор .catalog-container .catalog-checkboxes-part (специфичность 0,2,0) бьёт инлайн-правило компаний «@991 .catalog-checkboxes-part{width:100%!important}». */ .catalog-container .catalog-checkboxes-part{ position:fixed!important; top:86px; left:-90%; width:86%!important; max-width:330px!important; min-width:0!important; height:calc(100% - 86px)!important; margin:0!important; padding:0!important; z-index:10000001; background:#fff; box-shadow:4px 0 26px rgba(0,0,0,.18); overflow-y:auto; transition:left .28s cubic-bezier(.4,0,.2,1); } .catalog-container .catalog-checkboxes-part.ms-open{ left:0; } /* при открытом drawer убираем нижний таб-бар и FAB, чтобы не всплывали над панелью */ body.ms-drawer-active .mobile-tabbar, body.ms-drawer-active .mobile-fab{ display:none; } .catalog-checkboxes{ width:100%!important; padding:0 0 12px!important; margin:0!important; background:#fff!important; border:0!important; border-radius:0!important; box-shadow:none!important; } .ms-drawer-overlay{ display:block; position:fixed; inset:0; background:rgba(0,0,0,.42); z-index:10000000; opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s; } .ms-drawer-overlay.ms-open{ opacity:1; visibility:visible; } .ms-drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid #eef0f3; position:sticky; top:0; background:#fff; z-index:1; } .ms-drawer-head span{ font-size:16px; font-weight:700; color:#212121; } .ms-drawer-close{ width:40px; height:40px; border:none; background:#f3f4f6; border-radius:50%; font-size:15px; color:#6b7280; cursor:pointer; line-height:1; } .catalog-checkboxes-block{ padding:0 20px 18px!important; } .ms-drawer-apply{ display:block; width:calc(100% - 40px); margin:6px 20px 20px; height:46px; background:var(--ms-green); color:#fff; border:none; border-radius:12px; font-size:15px; font-weight:600; cursor:pointer; } .catalog-checkboxes .btn-filter-reset{ margin:0 20px; } /* компании: их встроенная кнопка «Применить фильтры» (.btn-lk) в drawer — на всю ширину */ .catalog-checkboxes .btn-lk{ margin:6px 20px 12px!important; width:calc(100% - 40px)!important; } } /* ══════════ Экран «Компании» (users/catalog_companies) под мобильный макет (фаза 2) ══════════ */ @media (max-width:767px){ .sec-catalog-companies .cc-card{ flex-direction:column; align-items:stretch; gap:0; position:relative; padding:14px 15px; border-radius:14px; box-shadow:0 1px 3px rgba(16,45,38,.07), 0 1px 2px rgba(16,45,38,.04); } .sec-catalog-companies .cc-card:hover{ transform:none; box-shadow:0 1px 3px rgba(16,45,38,.07), 0 1px 2px rgba(16,45,38,.04); } /* рейтинг + просмотры → компактный кластер в правом верхнем углу */ .sec-catalog-companies .cc-offers{ position:absolute; top:14px; right:15px; } .sec-catalog-companies .cc-offers-num{ font-size:17px; } .sec-catalog-companies .cc-offers-lbl{ font-size:9px; } .sec-catalog-companies .cc-views{ margin-top:2px; } /* теги/название: резервируем место под рейтинг справа; длинную отрасль обрезаем */ .sec-catalog-companies .cc-tags{ margin-bottom:8px; padding-right:60px; } .sec-catalog-companies .cc-cat-tag{ max-width:56vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sec-catalog-companies .cc-titlewrap{ margin-bottom:10px; padding-right:60px; } .sec-catalog-companies .cc-avatar{ width:32px; height:32px; } .sec-catalog-companies .cc-title{ font-size:15px; } .sec-catalog-companies .cc-meta{ gap:6px 14px; font-size:13px; margin-bottom:12px; } .sec-catalog-companies .cc-meta svg{ width:13px; height:13px; } .sec-catalog-companies .cc-foot{ padding-top:12px; gap:8px; } .sec-catalog-companies .cc-btn-sm{ height:32px; font-size:12px; } } /* ══════════ ЛК-экраны под мобильный макет (фазы 4-5) ══════════ Общий фундамент: на мобиле прячем сайдбар-меню ЛК (.lk-menu-block) — оно дублируется нижним таб-баром; навигация по разделам ЛК — через вкладку «Профиль» (меню-список). Контент ЛК занимает всю ширину. */ @media (max-width:767px){ .lk-menu-block{ display:none!important; } .lk-personal-data{ width:100%!important; } .lk-container{ gap:0!important; } /* ── Чат (chat/detail) на весь экран ── */ .lk-personal-data .lk-company-top{ margin-bottom:12px; } #chat-log.chat-window{ /* dvh (динамический вьюпорт) вместо vh: поле ввода фикс-баром считается от «малого» vh, а лента от «большого» → раньше низ списка наезжал под бар; dvh их согласует */ height:calc(100dvh - 300px)!important; min-height:280px; padding:14px!important; /* запас снизу под фикс-бар ввода (~64px), чтобы последнее сообщение не пряталось под ним */ padding-bottom:64px!important; margin-bottom:0!important; border-radius:14px!important; } #chat-log .message{ max-width:82%!important; font-size:14px!important; padding:11px 13px!important; } /* поле ввода — фикс-бар над таб-баром (bottom:62px = высота .mobile-tabbar); base .form__form — column, поэтому row!important. */ .chat-input-bar{ position:fixed!important; left:0; right:0; bottom:62px; z-index:35; background:#fff; border-top:1px solid #eef0f3; padding:9px 12px!important; margin:0!important; flex-direction:row!important; gap:8px; align-items:flex-end; } .chat-input-bar textarea{ height:46px!important; } .chat-input-bar #chat-message-submit{ width:auto!important; padding:0 18px!important; height:46px!important; } /* Вложения (п. 1.7 ТЗ). Бар выше жёстко ставит row: без переноса список выбранных файлов встал бы в ту же строку и раздавил поле ввода. */ .chat-input-bar{ flex-wrap:wrap!important; } .chat-input-bar .chat-picked{ width:100%; order:-1; margin-bottom:2px; } .chat-input-bar textarea{ min-width:0!important; } /* На десктопе скрепка живёт под полем рядом с подсказкой (.chat-compose-foot). В фикс-баре второй строке места нет: подвал «растворяю» (display:contents), подсказку прячу, а скрепку иконкой ставлю перед полем, как было. */ .chat-input-bar .chat-compose-foot{ display:contents; } .chat-input-bar .chat-hint{ display:none; } .chat-input-bar .chat-compose-row{ flex:1; min-width:0; } .chat-input-bar .chat-clip{ order:-1; width:46px!important; height:46px!important; padding:0!important; justify-content:center; font-size:18px; } .chat-input-bar .chat-clip-text{ display:none; } } /* ── Профиль как хаб ЛК (мобилка): сайдбар скрыт, поэтому на странице профиля даём меню-список разделов ЛК (как «МЕНЮ» в макете). Виден только @media≤767. ── */ .lk-mobile-menu{ display:none; } @media (max-width:767px){ .lk-mobile-menu{ display:block; margin-top:26px; border-top:1px solid #eef0f3; } .lk-mobile-menu .lk-mm-title{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ms-mut); margin:16px 0 6px; } .lk-mobile-menu .lk-mm-item{ display:flex; align-items:center; justify-content:space-between; width:100%; padding:15px 4px; border:0; border-bottom:1px solid #f1f3f5; background:none; text-decoration:none; color:#212121; font-size:15px; font-weight:500; cursor:pointer; text-align:left; font-family:inherit; } .lk-mobile-menu .lk-mm-chev{ color:#c0c6cf; font-size:20px; line-height:1; } .lk-mobile-menu .lk-mm-exit{ color:#E24B4A; } .lk-mobile-menu .lk-mm-logout{ margin:0; } } /* ══════════ Экран «Уведомления» (users/lk_notifications) — плоский список (полиш) ══════════ Только CSS: разметку и JS шаблона не трогаем. Префикс .lk-personal-data-content даёт специфичность (0,2,0), чтобы перебить инлайн-