/* TASK-0661 — мобильное меню-шторка по макету Дмитрия (15.09.2026). * * Разметка — core/elements/chunks/site-header.tpl (nav.mm + .mm-overlay), * поведение — js/mobile-menu-task0661.js. Скрипт переносит шторку в : * внутри

(position:fixed; z-index:500 — это свой контекст наложения) * она уходила бы под нижнюю панель разделов (1100) и кнопку чата. * * Порядок (круги 3–4, Дмитрий 15.09): полоса «Каталог» с крестиком → разделы * каталога → «Связаться с нами» → «О компании» / «Информация» плитками → город. * * Все классы — с префиксом mm- и под .mm: легаси-правила .mobile-menu из * styles.min.css их не задевают, а общие правила темы (div{display:flex}, * body{text-align:justify}, button:hover и т.п.) перебиты явными значениями. */ /* Кнопку-бургер (a.toggleMenu — три оранжевые точки, 25×25 в левом верхнем углу) рисует тема: styles.min.css, @media (width <= 1023px). Перекраска под макет (квадрат с тремя полосками) снята по просьбе Дмитрия 16.09.2026 — не возвращать. */ /* --- подложка и шторка --------------------------------------------------- */ .mm-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: block; background: rgba(16, 26, 40, .45); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; /* выше кнопки помощника section#ht-chatbot (z-index 2147482000) — на боевом она лежала поверх открытой шторки, над плиткой телефона */ z-index: 2147483000; } .mm-overlay.is-open { opacity: 1; visibility: visible; transition: opacity .25s ease; } .mm { position: fixed; top: 0; left: 0; bottom: 0; width: 92%; max-width: 390px; display: flex; flex-direction: column; justify-content: flex-start; margin: 0; padding: 0; background: #fff; color: #1C2530; font-family: inherit; font-size: 14px; line-height: 1.3; text-align: left; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(232, 115, 30, .12); box-shadow: 8px 0 40px rgba(16, 26, 40, .18); transform: translateX(-102%); visibility: hidden; transition: transform .28s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .28s; z-index: 2147483001; } .mm.is-open { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.4, 0, .2, 1); } .mm *, .mm *::before, .mm *::after { box-sizing: border-box; } .mm svg { display: block; flex: none; } html.mm-lock, html.mm-lock body { overflow: hidden !important; } /* --- верхняя полоса: «Каталог» и крестик --------------------------------- */ .mm .mm-top { display: flex; flex: none; align-items: center; justify-content: space-between; padding: 10px 14px; background: #F7F9FC; border-bottom: 1px solid #E9ECF1; } .mm .mm-label { display: block; margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .9px; line-height: 1.3; text-transform: uppercase; color: #8A94A2; } .mm .mm-close, .mm .mm-close:hover, .mm .mm-close:focus { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; min-height: 0; margin: 0; padding: 0; border: 1px solid #DFE3EA; border-radius: 9px; background: #fff; color: #1C2530; box-shadow: none; cursor: pointer; } /* --- прокручиваемая часть ------------------------------------------------ */ .mm .mm-scroll { display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* каталог: первая строка встаёт прямо под полосу «Каталог» — без двойной линии */ .mm .mm-catalog { display: block; } .mm .mm-catalog > :first-child { border-top: 0; } .mm .mm-item { display: block; border-top: 1px solid #EEF0F4; } .mm .mm-item-btn, .mm .mm-item-btn:hover, .mm .mm-item-btn:focus { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: auto; min-height: 56px; margin: 0; padding: 14px 18px; background: transparent; border: 0; border-radius: 0; box-shadow: none; cursor: pointer; text-align: left; text-transform: none; letter-spacing: normal; font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.2; color: #1C2530; } .mm .mm-item.is-current > .mm-item-btn { color: #E8731E; } .mm .mm-chev { display: flex; flex: none; align-items: center; justify-content: center; width: 22px; height: 22px; color: #B4BCC8; transition: transform .22s ease, color .22s ease; } .mm .mm-item.is-open .mm-chev { transform: rotate(180deg); color: #E8731E; } .mm .mm-sub { display: none; flex-direction: column; justify-content: flex-start; gap: 2px; padding: 0 18px 14px; } .mm .mm-item.is-open .mm-sub { display: flex; } .mm .mm-sub a, .mm .mm-sub a:visited, .mm .mm-sub .mm-all { display: flex; align-items: center; justify-content: flex-start; min-height: 40px; padding: 9px 0 9px 14px; border-left: 2px solid #F0E2D2; font-size: 15px; font-weight: 500; line-height: 1.25; color: #5B6676; text-decoration: none; } .mm .mm-sub .mm-all, .mm .mm-sub a.mm-all:visited { gap: 8px; font-weight: 700; color: #1E4C7A; border-left-color: #E8731E; } .mm .mm-sub a.is-current, .mm .mm-sub .mm-all.is-current { color: #E8731E; border-left-color: #E8731E; } .mm .mm-group { display: block; padding: 12px 0 4px 16px; font-size: 11px; font-weight: 700; letter-spacing: .9px; line-height: 1.3; text-transform: uppercase; color: #8A94A2; } /* заглушка на время загрузки каталога и ошибка */ .mm .mm-skel { display: flex; align-items: center; justify-content: flex-start; min-height: 56px; padding: 0 18px; border-top: 1px solid #EEF0F4; } .mm .mm-skel::before { content: ""; display: block; width: 55%; height: 14px; border-radius: 7px; background: linear-gradient(90deg, #EEF1F5 0, #F7F9FC 50%, #EEF1F5 100%); background-size: 200% 100%; animation: mm-shimmer 1.2s linear infinite; } .mm .mm-skel:nth-child(2n)::before { width: 42%; } @keyframes mm-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } } .mm .mm-error { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-top: 1px solid #EEF0F4; font-size: 14px; color: #5B6676; } .mm .mm-retry, .mm .mm-retry:hover, .mm .mm-retry:focus { display: inline-flex; align-items: center; height: 36px; margin: 0; padding: 0 14px; background: #FFF4E9; border: 1px solid #F6DBBE; border-radius: 10px; box-shadow: none; font-family: inherit; font-size: 14px; font-weight: 700; color: #E8731E; cursor: pointer; } /* --- секции под каталогом: «Связаться с нами», страницы ------------------ */ .mm .mm-sec { display: block; padding: 16px 18px 18px; background: #F7F9FC; border-top: 1px solid #E9ECF1; } .mm .mm-sec--contacts { margin-top: 8px; } .mm .mm-sec > .mm-label { margin-bottom: 10px; } .mm .mm-contacts { display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; } .mm .mm-contact, .mm .mm-contact:visited { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-height: 44px; padding: 0 12px; background: #fff; border: 1px solid #E4E8EE; border-radius: 11px; font-size: 15px; font-weight: 700; line-height: 1.2; color: #1C2530; text-decoration: none; white-space: nowrap; /* номер не переносится — ужимается подпись справа */ } .mm .mm-contact small { min-width: 0; margin-left: auto; padding-left: 8px; overflow: hidden; text-overflow: ellipsis; font-size: 11px; font-weight: 600; color: #9AA3B0; } .mm .mm-social { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .mm .mm-social a, .mm .mm-social a:visited { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; min-height: 42px; padding: 0 8px; background: #fff; border: 1px solid #E4E8EE; border-radius: 11px; font-size: 13px; font-weight: 700; line-height: 1.2; color: #1C2530; text-decoration: none; white-space: nowrap; } .mm .mm-note { display: block; margin-top: 10px; font-size: 12px; font-weight: 500; line-height: 1.5; color: #9AA3B0; } /* «О компании» и «Информация» — две колонки открытых плиток, как в шапке сайта */ .mm .mm-pages { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); } .mm .mm-pages-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 8px; } .mm .mm-col { display: flex; flex-direction: column; justify-content: flex-start; gap: 8px; min-width: 0; } .mm .mm-col > .mm-label { margin: 0 0 2px 2px; } .mm .mm-tile, .mm .mm-tile:visited { display: flex; align-items: center; justify-content: flex-start; min-width: 0; min-height: 44px; padding: 0 12px; background: #fff; border: 1px solid #E4E8EE; border-radius: 12px; font-size: 14px; font-weight: 600; line-height: 1.2; color: #1C2530; text-decoration: none; } .mm .mm-tile[aria-current] { background: #FFF4E9; border-color: #F6DBBE; color: #E8731E; } .mm .mm-city:not([hidden]) { display: flex; align-items: center; justify-content: flex-start; gap: 6px; margin-top: 14px; font-size: 12px; font-weight: 600; line-height: 1.4; color: #8A94A2; } .mm .mm-city[hidden] { display: none; } .mm .mm-city::before { content: ""; flex: none; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA3B0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21Z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat; } /* узкие экраны (320 px): телефон мельче, у плиток — тесней поля */ @media (max-width: 340px) { .mm .mm-contact, .mm .mm-contact:visited { gap: 8px; padding: 0 10px; font-size: 14px; } .mm .mm-tile, .mm .mm-tile:visited { padding: 0 10px; font-size: 13.5px; } } /* hover — только там, где он есть */ @media (hover: hover) { .mm .mm-contact:hover, .mm .mm-social a:hover, .mm .mm-tile:hover { border-color: #F6DBBE; color: #E8731E; } .mm .mm-sub a:hover { color: #E8731E; } } @media (prefers-reduced-motion: reduce) { .mm, .mm.is-open, .mm-overlay, .mm-overlay.is-open, .mm .mm-chev { transition: none; } .mm .mm-skel::before { animation: none; } }