/* ============================================================================ BuzzPost — мобильный слой лендинга. 31.07.2026 Работает только на телефонах и узких планшетах (<= 768px). Настольную вёрстку не трогает ни одной строкой: весь файл внутри @media. Правила, по которым он собран: 1. Одна колонка. Никаких боковых лент, из которых карточки уезжают за край. 2. Ритм отступов кратен 4: 8 / 12 / 16 / 24 / 32 / 48. 3. Кнопки и ссылки — не меньше 44px по высоте. 4. Текст — от 15px, заголовки тянутся по ширине экрана. 5. Движение — только прозрачность и сдвиг, 300-450мс, один раз. ==========================================================================*/ @media (max-width: 768px) { /* ── 1. Общие величины ──────────────────────────────────────────────── */ :root { --bzm-pad: clamp(16px, 5vw, 22px); /* поля страницы */ --bzm-sec: clamp(44px, 11vw, 60px); /* воздух между секциями */ --bzm-r-card: 18px; /* скругление карточки */ --bzm-r-block: 24px; /* скругление крупного блока */ --bzm-ink: #0f172a; --bzm-muted: #5b6b85; --bzm-line: #e6ebf3; --bzm-blue: #2563eb; --bzm-shadow: 0 16px 40px -26px rgba(15, 23, 42, .45); --bzm-ease: cubic-bezier(.22, .75, .25, 1); } /* Боковой прокрутки быть не должно. clip, а не hidden: hidden ломает «липкую» шапку, clip — нет. */ html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: 78px; } /* На body такое же правило ставить нельзя: тогда прокручивается уже не страница, а сам body — window.scrollY замирает на нуле, и всё, что завязано на прокрутку окна (появление блоков, прячущаяся шапка), перестаёт работать. Обрезки на html достаточно. */ body { min-width: 0; } main, #root, section, section > div { min-width: 0; max-width: 100%; } section[id] { scroll-margin-top: 78px; } /* Палец должен попадать без прицеливания */ a, button, [role="button"], .faq-q, label { touch-action: manipulation; } /* ── 2. Появление секций при прокрутке ────────────────────────────── Прячем только когда скрипт жив (класс на ), иначе при сбое страница осталась бы пустой. */ html.bzm-anim .bzm-rise { opacity: 0; transform: translate3d(0, 14px, 0); will-change: opacity, transform; } html.bzm-anim .bzm-rise.bzm-on { opacity: 1; transform: none; transition: opacity .3s ease-out, transform .38s var(--bzm-ease); transition-delay: var(--bzm-d, 0ms); will-change: auto; } @media (prefers-reduced-motion: reduce) { html.bzm-anim .bzm-rise { opacity: 1 !important; transform: none !important; } html.bzm-anim .bzm-rise.bzm-on { transition: none !important; } } /* Нажатие на карточку и кнопку — короткая отдача */ .btn:active, .bzp-lead-b:active, .faq-q:active { transform: scale(.985); } .btn, .bzp-lead-b, .faq-q { transition: transform .12s ease-out; } /* ── 3. Заголовки секций ────────────────────────────────────────────── */ .section-title, .bh-head h2, .bm-tt, .ba-head h2, .bpsc-h1, .bpwho-title, #bpact h2, .bp-hero h2, .br-text h2 { font-size: clamp(25px, 7.2vw, 32px) !important; line-height: 1.22 !important; letter-spacing: -.01em; margin: 0 0 10px !important; } .section-subtitle, .bh-head p, .bm-lead, .ba-head p, .bpsc-sub, .bpwho-sub, #bpact > div > div:first-child p { font-size: 15.5px !important; line-height: 1.6 !important; margin: 0 auto !important; max-width: 34em; } /* ── 4. Ширина и воздух секций ──────────────────────────────────────── */ .container { width: 100%; padding-inline: var(--bzm-pad) !important; } .section { padding-block: var(--bzm-sec) !important; } .bh-wrap, .bm-wrap, .ba-wrap, .bpsc-wrap, .br-wrap, .bpwho, .bp-section { padding-inline: var(--bzm-pad) !important; padding-block: var(--bzm-sec) !important; max-width: 100% !important; } /* У этих секций воздух задаёт внутренняя обёртка. Если оставить отступы ещё и на самой секции, между блоками получается пустая полоса в пол-экрана — именно она и делала страницу бесконечной. */ #add-listing.section, #coverage.section, #monitor.section, #ai-demo.section, #referral.section, #tags.section { padding-block: 0 !important; } /* ── 5. Шапка ───────────────────────────────────────────────────────── */ header.site-header { padding-inline: 12px !important; padding-top: max(8px, env(safe-area-inset-top, 0px)) !important; } header.site-header .logo img, header.site-header .logo svg { height: 26px !important; } /* ── 6. Первый экран ────────────────────────────────────────────────── */ .hero { padding-block: 26px 34px !important; } .hero h1 { font-size: clamp(28px, 8.2vw, 38px) !important; line-height: 1.16 !important; letter-spacing: -.02em; margin-bottom: 14px !important; text-wrap: balance; /* чтобы короткое слово не висело одно в строке */ } .hero .subtitle, .hero .hero-content > p { font-size: 15.5px !important; line-height: 1.6 !important; margin-bottom: 22px !important; } /* Главная кнопка — во всю ширину, палец не промахнётся */ .hero .btn, .hero a.btn-primary, .hero .hero-cta a { display: flex !important; width: 100% !important; min-height: 54px !important; align-items: center; justify-content: center; gap: 8px; font-size: 16px !important; border-radius: 15px !important; } /* Картинку «вечер без BuzzPost / с BuzzPost» сайт на телефоне прячет (`@media(max-width:1000px){#bzp-vs-evening{display:none!important}}`). Это лучший визуал первого экрана — возвращаем и вписываем в ширину. */ html body #bzp-vs-evening.in-hero { display: block !important; margin: 22px 0 0 !important; padding: 0 !important; } #bzp-vs-evening .vswrap { border-radius: var(--bzm-r-block) !important; box-shadow: 0 22px 55px -26px rgba(4, 10, 30, .65) !important; } #bzp-vs-evening .vshead { display: none !important; } /* заголовок дублирует hero */ #bzp-vs-evening .chip { bottom: 10px !important; font-size: 11.5px !important; padding: 6px 11px !important; } /* ── 7. «Кто мы» — ролик ────────────────────────────────────────────── */ .bpwho { padding-block: var(--bzm-sec) calc(var(--bzm-sec) - 12px) !important; } .bpwho-title { margin-bottom: 6px !important; } .bpwho-sub { margin-bottom: 20px !important; } .bpwho-framewrap { padding: 0 !important; margin: 0 !important; } .bpwho-frame { width: min(100%, 340px) !important; margin-inline: auto !important; aspect-ratio: 9 / 16; height: auto !important; border-radius: var(--bzm-r-block) !important; overflow: hidden !important; box-shadow: 0 24px 60px -34px rgba(15, 23, 42, .6); background: #0b1020; } .bpwho-iframe { width: 100% !important; height: 100% !important; border: 0 !important; display: block; } /* ── 8. «Как добавить объявление» ───────────────────────────────────── Сначала три шага, потом телефон с примером: сперва объясняем, потом показываем. На широком экране порядок обратный — там это две колонки. */ .bh-row { display: flex !important; flex-direction: column !important; gap: 0 !important; } .bh-steps { order: 1; } .bh-slot { order: 2; } /* Три шага — столбиком, а не лентой с обрезанными карточками */ .bh-steps { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; overflow: visible !important; width: 100% !important; margin: 0 0 22px !important; padding: 0 !important; } .bh-step { width: auto !important; min-width: 0 !important; border-radius: var(--bzm-r-card) !important; padding: 16px 16px !important; box-shadow: var(--bzm-shadow) !important; } /* Макет телефона внутри телефона не нужен во всю ширину — уменьшаем */ .bh-slot, .bm-slot { display: block !important; margin-inline: auto !important; } .bh-phone, .bm-phone { width: min(100%, 268px) !important; margin-inline: auto !important; } /* Полоса прокрутки внутри макета телефона выглядит как сбой вёрстки */ .bh-phone *, .bm-phone *, .tg-demo-chat { scrollbar-width: none !important; } .bh-phone *::-webkit-scrollbar, .bm-phone *::-webkit-scrollbar, .tg-demo-chat::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; } /* ── 9. Круглосуточное покрытие ─────────────────────────────────────── */ .bp-grid { gap: 14px !important; } /* «Ждёт смены» было написано серо-синим по синему — на телефоне не читалось. Зелёную подпись работающего бота не трогаем. */ #coverage .bp-botcard:not(.active) .status { color: #b8c4ea !important; } /* ── 10. Умное расписание ───────────────────────────────────────────── */ /* Строку из трёх счётчиков сайт сам прячет уже 700px (правило `#smart-schedule .bpsc-mech{display:none}`) — не спорим, на телефоне и без неё понятно. Ниже 768 и выше 700 показываем столбиком. */ .bpsc-mech { grid-template-columns: 1fr !important; gap: 12px !important; overflow: visible !important; width: 100% !important; padding: 0 !important; } .bpsc-mcell { width: auto !important; min-width: 0 !important; border-radius: var(--bzm-r-card) !important; } .bpsc-mdiv { display: none !important; } .bpsc-band { display: grid !important; grid-template-columns: 1fr !important; gap: 18px !important; overflow: visible !important; width: 100% !important; padding: 20px 16px !important; border-radius: var(--bzm-r-block) !important; } .bpsc-bl, .bpsc-br { width: auto !important; min-width: 0 !important; } /* ── 11. Монитор публикаций ─────────────────────────────────────────── */ .bm-row { display: block !important; } .bm-cards { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; overflow: visible !important; width: 100% !important; margin: 0 0 22px !important; padding: 0 !important; } .bm-card { width: auto !important; min-width: 0 !important; border-radius: var(--bzm-r-card) !important; padding: 14px 16px !important; box-shadow: var(--bzm-shadow) !important; } /* ── 11b. «Активность» ────────────────────────────────────────────── Секция собрана из вложенных div со стилями прямо в разметке, классов нет — поэтому цепляемся за порядок элементов. Если вставщик поменяет структуру, правила просто перестанут срабатывать и секция вернётся к своему виду, ничего не сломав. */ #bpact > div { padding-inline: var(--bzm-pad) !important; gap: 26px !important; } /* Меньше 18px синяя подложка читается не как подложка, а как рамка вокруг карточки — будто вёрстка поехала. */ #bpact > div > div:nth-child(2) { padding: 20px 16px !important; border-radius: var(--bzm-r-block) !important; } #bpact > div > div:nth-child(2) > div:last-child { gap: 18px !important; } /* Лента: показываем четыре отклика — дальше идёт повтор одного и того же */ #bpact > div > div:nth-child(2) > div:last-child > div:first-child > div:first-child > div:last-child > div:nth-child(n+5) { display: none !important; } /* ── 12. Что делает ИИ с объявлением ────────────────────────────────── */ .ba-stage { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; overflow: visible !important; width: 100% !important; padding: 0 !important; } .ba-card { width: auto !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; border-radius: var(--bzm-r-card) !important; } /* Пустое место под текстом «до/после» на телефоне не нужно */ .ba-card > *:last-child { margin-bottom: 0 !important; } /* Значок «AI» между карточками — по центру, а не сбоку */ .ba-core { width: auto !important; min-width: 0 !important; display: flex !important; justify-content: center !important; align-items: center; gap: 10px; padding: 2px 0 !important; } /* ── 13. Отзывчивость подвала и ссылок ──────────────────────────────── */ #bzp-rich-footer { padding-inline: var(--bzm-pad) !important; } /* Ссылки подвала — каждая своей строкой и с запасом по высоте под палец. inline-flex тут нельзя: ссылки слипаются в одну строку без пробелов. */ #bzp-rich-footer nav a, #bzp-rich-footer ul a, #bzp-rich-footer li a { display: flex; align-items: center; min-height: 36px; } /* ── 14. Форма заявки ───────────────────────────────────────────────── */ .bzp-lead { border-radius: var(--bzm-r-block) !important; padding: 22px 18px 24px !important; } .bzp-lead-i { min-height: 50px !important; font-size: 16px !important; /* меньше 16px — Safari сам увеличивает страницу */ border-radius: 13px !important; } .bzp-lead-b { min-height: 54px !important; font-size: 16px !important; border-radius: 14px !important; } .bzp-lead-ok { align-items: flex-start; gap: 10px; } .bzp-lead-ok input { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 1px; } /* ── 15. Вопросы и ответы ───────────────────────────────────────────── */ .faq-item { border-radius: var(--bzm-r-card) !important; } .faq-q { min-height: 52px !important; font-size: 16px !important; line-height: 1.4 !important; } .faq-a { font-size: 15px !important; line-height: 1.62 !important; } /* ── 16. Плавающие кнопки связи ─────────────────────────────────────── */ .float-btns { gap: 10px !important; bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important; /* именно left, а не inset-inline-start: страница на иврите, и «начало строки» у неё справа — кнопки уехали бы на другую сторону экрана */ left: 12px !important; } .float-btn { width: 44px !important; height: 44px !important; box-shadow: 0 10px 24px -12px rgba(6, 20, 50, .55) !important; } .float-btn svg { width: 22px !important; height: 22px !important; } /* Пока на экране форма заявки — кнопки уезжают, чтобы не садиться на кнопку отправки (на телефоне она во всю ширину). */ .float-btns.bzm-float-off { opacity: 0 !important; transform: translateY(14px) scale(.9) !important; pointer-events: none !important; transition: opacity .22s ease-out, transform .28s var(--bzm-ease) !important; } .float-btns { transition: opacity .22s ease-out, transform .28s var(--bzm-ease); } /* Набор Codex с кнопкой-«глазом» больше не собирается, но если где-то остался в разметке — не показываем. */ .bzp-contact-toggle { display: none !important; } }