/* wave2: мобильная и планшетная главная */ /* ========================================================================== Волна 2: верх мобильной главной (шапка/герой/партнёры/поиск) на ширинах до 480px. Все правила — поверх figma-home.css и gw1-*.css (подключён последним в header.tpl), поэтому специфичность селекторов не поднимаем. ========================================================================== */ @media (max-width:480px){ /* ---------- ШАПКА ---------- Критик: в макете шапка — бургер + лого + один компактный CTA (круглая кнопка). Поиск-иконку и переключатель языка НЕ удаляем (рабочие элементы) — переносим в бургер-меню (см. .hdr__mobsearch/.hdr__moblang в hdr__mobnav, добавлены в header.tpl), а тут просто прячем их дублирующее отображение в самой шапке. Кнопка «Войти» тоже дублируется в бургер-меню, поэтому в самой шапке остаётся только одна CTA-кнопка (Присоединиться либо, если юзер залогинен, ссылка на кабинет). */ body .fg .hdr__right .hdr__icon{display:none} body .fg .hdr__right .hdr__langwrap{display:none} body .fg .hdr__right:has(.btn--primary) .btn--ghost{display:none} body .fg .hdr__right .btn{ width:40px;height:40px;padding:0;border-radius:50%; display:inline-flex;align-items:center;justify-content:center; font-size:0;line-height:0; } body .fg .hdr__right .btn svg{flex:0 0 auto;margin:0} body .fg .hdr__right .btn--primary svg, body .fg .hdr__right .hdr__join-ico{width:24px;height:24px;flex:0 0 24px} /* Новые пункты бургер-меню: поиск-ссылка и блок языка (тот же неактивный список языков, что был в шапке — на сайте реально работает только ru). */ body .fg .hdr__mobsearch{ display:flex;align-items:center;gap:10px; color:var(--blue);font-size:16px; } body .fg .hdr__mobsearch svg{flex:0 0 auto;color:var(--blue)} body .fg .hdr__moblang{ display:flex;flex-direction:column;gap:8px; padding:13px 20px;border-bottom:1px solid var(--line);font-size:14px;color:var(--muted); } body .fg .hdr__moblang .lang-opt{display:flex;align-items:center;gap:8px} body .fg .hdr__moblang .is-off{opacity:.55} body .fg .hdr__moblang em{font-style:normal;font-size:12px} /* Компактный переключатель языка в мобильном меню: одна строка вместо трёх — активный язык + два неактивных плашкой, ближе к макету (1007:76306), где переключатель занимает верхнюю строку, а не отдельный блок на всю ширину. */ body .fg .hdr__moblang--compact{ flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 14px; padding:12px 20px; } body .fg .hdr__moblang--compact .lang-opt{gap:6px;font-size:13px} body .fg .hdr__moblang--compact em{color:var(--muted)} /* Бургер превращается в крестик, когда меню открыто — единственный явный элемент закрытия (в макете это отдельная иконка X, здесь для простоты переиспользуем ту же кнопку без дублирования шапки). */ body .fg .hdr__burger{transition:transform .15s ease} body .fg .hdr__burger span{transition:transform .18s ease,opacity .12s ease} body .fg .hdr.is-open .hdr__burger span:nth-child(1){transform:translateY(6px) rotate(45deg)} body .fg .hdr.is-open .hdr__burger span:nth-child(2){opacity:0} body .fg .hdr.is-open .hdr__burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* Аккордеон «Каталог» в мобильном меню (замена плоской ссылки макетом раскрывающегося блока — см. 1007:76306: синяя плашка «Каталог», «Смотреть весь каталог» и список подкатегорий). */ body .fg .hdr__mobacc{border-bottom:1px solid var(--line)} body .fg .hdr__mobacc-t{ width:100%;text-align:left;padding:13px 20px;color:#fff;background:var(--blue); font-size:16px;display:flex;align-items:center;justify-content:space-between; } body .fg .hdr__mobacc-t::after{ content:"";width:8px;height:8px;border-right:1.6px solid #fff;border-bottom:1.6px solid #fff; transform:rotate(45deg);transition:transform .15s ease; } body .fg .hdr__mobacc.is-open .hdr__mobacc-t::after{transform:rotate(-135deg)} body .fg .hdr__mobacc-p{display:none;flex-direction:column;max-height:60vh;overflow-y:auto} body .fg .hdr__mobacc.is-open .hdr__mobacc-p{display:flex} body .fg .hdr__mobacc-p a{padding:12px 20px;border-bottom:1px solid var(--line);color:var(--blue);font-size:15px} body .fg .hdr__mobacc-all{color:var(--blue) !important;font-weight:500} body .fg .hdr__mobacc-cards{display:flex;flex-direction:column;gap:8px;padding:12px 20px} body .fg .hdr__mobacc-card{display:flex;align-items:center;gap:12px;border-bottom:0 !important;padding:0 !important} body .fg .hdr__mobacc-card img{width:56px;height:56px;border-radius:8px;object-fit:cover;flex:0 0 auto} body .fg .hdr__mobacc-card span{color:var(--blue);font-size:14px;line-height:1.3} /* Липкая плашка «Присоединиться» и cookie-баннер перекрывали нижние пункты открытого меню — прячем их, пока меню открыто. */ body.hdr-menu-open #cookie_popup, body.hdr-menu-open .footer_fixed-menu{display:none !important} /* ---------- ГЕРОЙ ---------- В макете: заголовок+подзаголовок сверху, коллаж людей под текстом. figma-home.css на этой ширине даёт hero__text position:static, из-за чего порядок в DOM (картинка первая, текст второй) решает вёрстку — картинка оказывается выше текста. Разворачиваем через flex+order: задаём order обоим детям контейнера явно (жёсткое правило проекта). */ body .fg .hero{padding-top:0} body .fg .hero__in{display:flex;flex-direction:column} /* gw1-hero.css оставляет body.common-home .hero__text{max-width:60%} на ширинах <=1100px (мобильная попадает в тот же диапазон) — это сжимало блок героя до ~210px внутри flex-колонки .hero__in. text-align:center работал ВНУТРИ этой узкой коробки, но сама коробка не была растянута на всю ширину и стояла у левого края (align-items:stretch не помогает, когда есть внешний max-width) — визуально текст выглядел выровненным влево. Возвращаем блоку полную ширину явно. */ body .fg .hero__text{order:1;width:100%;max-width:none;padding:18px 8px 6px;text-align:center} body .fg .hero__img{order:2;margin-top:2px} /* Заголовок должен ломаться на 2 строки, как в макете, а не на 3. В шаблоне уже есть
после «№1» — держим её. Раньше .hero__text был сжат до ~210px чужим max-width:60% (см. выше), из-за чего даже 26px едва помещался в 2 строки. После возврата полной ширины (~374px на 390px экране) места стало заметно больше: макет держит крупный кегль за счёт (1) отрицательного letter-spacing, (2) узких боковых полей контейнера (padding 8px, не 20-24px) и (3) чуть более лёгкого начертания (600, не 700/800). На освободившемся запасе поднимаем кегль с 26px до 34px — с letter-spacing -.6px и text-align:center строка «Платформа №1» (192-266px) и «в Израиле» (~130-180px) по-прежнему держат 2 строки даже на узких 360px экранах (проверено измерением через Range.getClientRects() в браузере). */ body .fg .hero__title{font-size:34px;line-height:1.18;font-weight:600;margin:0 0 10px;white-space:normal;padding:0;letter-spacing:-.6px} body .fg .hero__title br{display:inline} body .fg .hero__sub{font-size:14px;line-height:1.35;max-width:300px;margin:0 auto} /* ---------- ЛОГОТИПЫ ПАРТНЁРОВ ---------- figma-home @<=860 задаёт partners img min-width:700px → overflowBodies 700px на 390 viewport. Держим горизонтальный скролл полосы логотипов, но не форсим 700: height+min-width:100% — полоса не уже экрана и не раздувает scrollWidth без нужды. */ body .fg .partners{ padding:10px 0; overflow-x:auto; -webkit-overflow-scrolling:touch; } /* additional_102024: img{height:auto!important}; figma-home min-width:700. Keep logo strip readable (h=36) + horizontal scroll; drop forced 700. */ body .fg .partners img, body .fg .partners .wrap img{ width:auto !important; max-width:none !important; height:36px !important; min-width:100% !important; } body .fg .partners__list{ gap:28px; padding:6px 12px; justify-content:flex-start; } body .fg .partners__item img, body .fg .partners__link img, body .fg .partners .wrap .partners__item img{ width:auto !important; max-width:140px !important; height:32px !important; min-width:0 !important; } /* ---------- Я ХОЧУ НАЙТИ ---------- */ body .fg .find{padding:28px 0 6px} body .fg .find__title{font-size:24px;margin:0 0 16px} /* Поле поиска и круглая кнопка-лупа в одном ряду, квадратная кнопка фильтра — сразу за ней. Ничего не скрываем: фильтр остаётся кликабельным (рабочий элемент, просто меняем раскладку под макет). */ body .fg .srch{ flex-wrap:nowrap;align-items:center;gap:8px; padding:8px 10px;border-radius:10px; } body .fg .srch__field{flex:1 1 auto;min-width:0;padding-right:0;overflow:hidden} body .fg .srch__input{font-size:13px;height:34px;white-space:nowrap;text-overflow:ellipsis} body .fg .srch__input::placeholder{font-size:13px;white-space:nowrap} /* Кнопка «Найти» становится круглой лупой без текста — как в макете. */ body .fg .srch__btn{ flex:0 0 auto;width:46px;height:46px;min-width:46px; border-radius:50%;padding:0;font-size:0;gap:0; } body .fg .srch__btn svg{width:18px;height:18px} body .fg .srch__filterwrap{flex:0 0 auto;margin-left:0} body .fg .srch__filter{ width:40px;height:40px;margin-left:0; border:1px solid var(--line);border-radius:8px; } /* Пилюля «AI поиск» — ниже поля, прижата вправо, как в макете. */ body .fg .srch__ai{margin-top:10px} body .fg .ai{font-size:13px;padding:4px 14px} /* ---------- Чипсы популярных запросов ---------- В макете умещаются в 3 ряда: компактнее кегль и паддинги, gap меньше. */ body .fg .find__pop{margin-top:14px} /* В макете подписи «Популярные запросы» нет — это просто текстовая метка без функционала, скрываем только на мобильном. На десктопе не трогаем. */ body .fg .find__poplabel{display:none} /* Figma mobile: плотнее чипсы (больше в ряд, ниже высота) */ body .fg .chips{gap:6px 6px} body .fg .chips a{ font-size:13px;padding:5px 10px;height:auto;line-height:1.2;border-radius:8px; } body .fg .find__ill{display:none} /* ---------- ШАПКА (закрытая, 400px) ---------- Критик вернул пункт: макет 1050:91421 держит высоту 64px, логотип 181x44 и видимую круглую кнопку 48x48 с градиентом и белой обводкой. figma-home.css задаёт логотип 123x30 !important на <=860px — здесь та же пара селекторов, но подключена позже (гарантия победы в каскаде), и с !important, т.к. иначе проигрывает. Высота .hdr__in подгоняется паддингом под высоту круглой кнопки (48 + 8+8 = 64px), лого 44px вписывается в те же 48px по центру. Проверено: бургер(~24)+gap10+ лого181+gap10+круглая48 = 273px из ~372px доступных — помещается. */ body .fg-header .hdr__logo img{height:44px !important;width:181px !important} body .fg .hdr__in{padding:8px 14px} body .fg .hdr__right .btn--primary{ width:48px;height:48px; background:linear-gradient(180deg,#2E437B 0%,#0066B2 100%) !important; border:1px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.04); } /* Залогинен: иконка человека как у кнопки доступности — синий контур, без круга. */ body .fg .hdr__right .btn--ghost, body .fg .hdr__right .hdr__acc{ width:44px;height:44px; background:none !important; background-image:none !important; border:0 !important; box-shadow:none !important; border-radius:8px; color:#0066B2 !important; } body .fg .hdr__right .btn--ghost svg, body .fg .hdr__right .hdr__acc svg{ width:22px;height:22px;flex:0 0 22px; stroke:#0066B2; } body .fg .hdr__right .btn--ghost:hover, body .fg .hdr__right .hdr__acc:hover{ background:#F1F5FA !important; color:#0066B2 !important; } } /* Меню «Мой профиль» прижато к круглой кнопке справа, а вкладка рассылки (38px, fixed, z-index выше шапки) накрывает его правый край — меню выглядит обрезанным и не под кнопкой. Сдвигаем влево от вкладки. */ @media (max-width: 860px) { body .fg .hdr__sub--acc { right: 0; left: auto; min-width: 0; width: max-content; transform: translateX(-36px); } }