/** * Раскрытие поиска по фокусу + превью «Часто ищут». * * Поведение (логика — js/search-overlay.js): * - До фокуса: поле поиска выглядит как обычно (стили — css/header-search.css). * - При фокусе: на вешается класс .search-overlay-active → * • появляется бэкдроп (затемнение + blur, с фоллбэком без blur); * • шапка поднимается НАД бэкдропом (z-index), поле плавно расширяется; * • под полем показывается белая панель: пусто → «Часто ищут» (карточки), * есть ввод → обычный автокомплит (.autocomplete-suggestions из * header-search.css, он же позиционируется под расширенным полем). * * Стэкинг: * .search-backdrop z-index 1500 (fixed, на весь вьюпорт) * header.main-header z-index 2000 (только в активном состоянии — НАД бэкдропом) * .autocomplete-suggestions z-index 3000 (body-child, поверх всего — из header-search.css) * * Тёмная тема — в этом же файле (body.dark-theme), подключается после * dark-theme.css. Десктопный фикс ширины автокомплита (header-search.js) не * затрагивается: расширенное поле просто шире, а дропдаун следует за его шириной. */ /* ===================================================================== 1. Бэкдроп (затемнение + размытие) ===================================================================== */ .search-backdrop { position: fixed; inset: 0; z-index: 1500; /* Фоллбэк без backdrop-filter — чуть плотнее затемнение, чтобы фон читался как «приглушённый» и без размытия. */ background: rgba(15, 18, 26, .5); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility .2s ease; } /* Если поддерживается размытие — мягче затемнение + blur. */ @supports ((backdrop-filter: blur(5px)) or (-webkit-backdrop-filter: blur(5px))) { .search-backdrop { background: rgba(15, 18, 26, .36); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } } body.search-overlay-active .search-backdrop { opacity: 1; visibility: visible; pointer-events: auto; } /* Блокируем прокрутку фона, пока поиск раскрыт (компенсацию ширины скроллбара ставит JS через padding-right, чтобы не было «прыжка» контента). */ body.search-overlay-active { overflow: hidden; } /* ===================================================================== 2. Активное состояние: шапка над бэкдропом + расширение поля ===================================================================== */ body.search-overlay-active header.main-header { z-index: 2000; } /* Разрешаем правому блоку/обёртке поля сжиматься, чтобы расширенное поле никогда не вызывало горизонтальный overflow (поле возьмёт максимум доступного). */ body.search-overlay-active .main-header-right_menu, body.search-overlay-active .main-header-right_menu > .header-item:first-child { min-width: 0; } /* Плавное расширение поля. Анимируем ширину/отступы. */ .header-search { transition: width .18s ease, max-width .18s ease, margin .18s ease; } /* Десктоп: ширина растёт к разумному пределу по центру контента, но НИКОГДА не вылезает за шапку — clamp() резервирует место под лого/меню/иконки (≈700px) и не опускается ниже базовой ширины поля (190px). */ body.search-overlay-active .header-search { width: clamp(190px, calc(100vw - 700px), 580px); } /* В раскрытом виде крестик-«×» всегда виден и работает как «закрыть/очистить». */ body.search-overlay-active .header-search .header-search__clear { display: flex; } /* ===================================================================== 3. Панель «Часто ищут» ===================================================================== */ .search-popular { position: absolute; top: calc(100% + 8px); left: 0; width: 100%; z-index: 60; box-sizing: border-box; background: #fff; border: 1px solid #e3e5e8; border-radius: 12px; box-shadow: 0 8px 28px rgba(17, 24, 39, .16), 0 2px 6px rgba(17, 24, 39, .08); padding: 14px; max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .25) transparent; } /* Управление видимостью — классом is-open (JS). hidden-атрибут снимается в JS. */ .search-popular { display: none; } .search-popular.is-open { display: block; } .search-popular::-webkit-scrollbar { width: 8px; } .search-popular::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .22); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } .search-popular__title { margin: 2px 2px 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #8a9099; } .search-popular__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .search-popular__card { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; padding: 7px 8px; border-radius: 10px; background: transparent; color: inherit; text-decoration: none; transition: background .15s ease; } .search-popular__card:hover { background: #f1f3f5; } .search-popular__cover { flex: 0 0 auto; width: 38px; height: 52px; border-radius: 6px; overflow: hidden; background: #eceef1; } .search-popular__cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .search-popular__name { min-width: 0; flex: 1 1 auto; font-size: 13px; font-weight: 600; line-height: 1.3; color: #1f2328; /* до 2 строк, дальше — многоточие (как на референсе) */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ===================================================================== 4. Тёмная тема ===================================================================== */ body.dark-theme .search-backdrop { background: rgba(0, 0, 0, .58); } @supports ((backdrop-filter: blur(5px)) or (-webkit-backdrop-filter: blur(5px))) { body.dark-theme .search-backdrop { background: rgba(0, 0, 0, .45); } } body.dark-theme .search-popular { background: var(--dark-bg-card, #1e1f24); border-color: var(--dark-border-primary, #34363c); box-shadow: 0 10px 30px rgba(0, 0, 0, .55); scrollbar-color: rgba(255, 255, 255, .25) transparent; } body.dark-theme .search-popular::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); border: 2px solid transparent; background-clip: padding-box; } body.dark-theme .search-popular__title { color: var(--dark-text-muted, #9aa0a6); } body.dark-theme .search-popular__card:hover { background: var(--dark-bg-hover, #2a2c32); } body.dark-theme .search-popular__cover { background: var(--dark-bg-secondary, #26282e); } body.dark-theme .search-popular__name { color: var(--dark-text-primary, #e8eaed); } /* ===================================================================== 5. Адаптив ===================================================================== */ /* Планшетная зона: расширение скромнее (рядом ещё видно верхнее меню). */ @media (max-width: 991px) and (min-width: 768px) { body.search-overlay-active .header-search { width: clamp(190px, calc(100vw - 480px), 360px); } } /* ===================================================================== Мобайл (≤767px): раскрытый поиск ПЕРЕКРЫВАЕТ шапку и идёт во всю ширину. Подход: при активном состоянии шапка превращается в строку поиска — все её элементы, кроме поля, скрываются, а само поле фиксируется как верхний бар (position:fixed; top:0; left/right:0) во всю ширину экрана. Шапка уже поднята над бэкдропом (z-index:2000, см. блок 2 выше), поэтому и бар, и панель рисуются ПОВЕРХ затемнения. Превью и живые результаты — тоже во всю ширину. Нижняя моб. навигация прячется, чтобы не мешать. Десктоп/планшет (≥768) не затрагиваются — всё внутри @media ≤767. ===================================================================== */ @media (max-width: 767px) { /* Прячем всё в шапке, кроме поля поиска (первый ребёнок right_menu). */ body.search-overlay-active .main-header-left_menu, body.search-overlay-active .main-header-right_menu > *:not(:first-child) { display: none !important; } /* Нижняя мобильная навигация не должна перекрывать результаты поиска. */ body.search-overlay-active .mobile-tabbar { display: none !important; } /* Поле — фиксированный бар во всю ширину поверх шапки. Фон — как у шапки (var(--bg-paper) корректен и в тёмной теме). */ body.search-overlay-active .header-search { position: fixed; top: 0; left: 0; right: 0; width: auto !important; max-width: none !important; margin: 0 !important; padding: 8px; box-sizing: border-box; background: var(--bg-paper, #fff); box-shadow: 0 2px 10px rgba(0, 0, 0, .14); z-index: 5; /* поверх остатков контента внутри шапки */ } /* Крупное поле ввода во всю ширину бара, тап-таргет ≥44px. */ body.search-overlay-active .header-search .search-query { width: 100%; height: 44px; } /* Превью «Часто ищут» — во всю ширину бара (= экрана), под баром. */ body.search-overlay-active .search-popular { top: 100%; left: 0; width: 100%; border-radius: 0 0 14px 14px; padding: 12px; max-height: calc(100vh - 70px); } /* Живые результаты автокомплита — тоже во всю ширину экрана. (.autocomplete-suggestions плагин кладёт в и задаёт инлайн left/width; на мобайле header-search.js их не трогает — переопределяем здесь через !important, top оставляем от плагина = под полем.) */ body.search-overlay-active .autocomplete-suggestions { left: 0 !important; right: 0 !important; width: auto !important; max-width: none !important; border-radius: 0 0 14px 14px; } .search-popular__cover { width: 40px; height: 54px; } .search-popular__name { font-size: 14px; } } /* Очень узкие экраны — одна колонка карточек, чтобы названия не зажимались. */ @media (max-width: 380px) { .search-popular__grid { grid-template-columns: 1fr; } }