/* GDErevan v4 — мобильный и планшетный слой. Подключается после общих стилей на главной и страницах событий; владелец файла — задача «мобильный UX». Порядок в файле: токены → тач-устройства → телефон (≤767) → планшет (768–1024) → анимации. Всё, что меняет раскладку, живёт внутри медиазапросов, поэтому широкие экраны (>1024) остаются ровно такими, какими их сделал общий слой. */ /* ─────────────────────────── токены ─────────────────────────── */ :root { --m4-safe-b: env(safe-area-inset-bottom, 0px); --m4-safe-t: env(safe-area-inset-top, 0px); --m4-nav-h: 58px; --m4-buy-h: 64px; --m4-ink: #17181c; --m4-muted: #6b6e78; --m4-line: #e9ebf1; --m4-accent: #0a4fff; --m4-fade: 30px; } /* Меню теперь всегда в разметке (app/v4_shell.py:mobile_nav), не только на телефоне: планшет и ПК прячут его здесь, а не ждут скрипт, который на этих ширинах и не запускается. Показывает только медиазапрос ниже. */ .m4-nav { display: none; } /* ─────────────── тач-устройства: без стрелок, крупные цели ─────────────── */ @media (hover: none) { /* Стрелки существуют только для мыши: на тач-устройстве лента листается пальцем, а кнопки лишь съедают место и мешают «подглядывать» следующей. */ .rail-controls, .top10-header > .rail-controls, .calendar-header > .rail-controls, .category-header > .rail-controls, .ticket-slider-arrow, .slider-arrow-btn { display: none !important; } .event-card-v3__fav { width: 44px; height: 44px; min-width: 44px; min-height: 44px; } .event-card-v3__fav svg { width: 20px; height: 20px; } .dv-round { width: 48px; height: 48px; } .action-circle-btn { width: 44px; height: 44px; } .n6sLal { min-height: 44px; display: inline-flex; align-items: center; } /* Нажатие отзывается всегда, даже если браузер не даёт :hover. */ .event-card-v3__media, .ticket-stub-banner, .region-card, .dv-slot { transition: transform .16s ease; } .event-card-v3:active .event-card-v3__media, .ticket-stub-banner:active, .region-card:active { transform: scale(.982); } } /* ═════════════════════════════ ТЕЛЕФОН ≤767 ═════════════════════════════ */ @media (max-width: 767px) { /* Шапка липнет к верху; body перестаёт быть scroll-контейнером по X, иначе sticky внутри него не работает (hidden → clip). Этого одного было недостаточно: длинный URL без пробелов в описании события (иногда встречается в тексте от организатора) раздувал html.scrollWidth до 544px при видимом 390 — , а не , задаёт границу для position: fixed, и меню с кнопкой покупки съезжали за пределы экрана. */ html { overflow-x: clip; } body { overflow-x: clip; } /* На телефоне ленты листаются пальцем — стрелки только мешают. */ .rail-controls, .top10-header > .rail-controls, .calendar-header > .rail-controls, .category-header > .rail-controls, .ticket-slider-arrow, .slider-arrow-btn { display: none !important; } /* ── 1. Компактная шапка ─────────────────────────────────────────────── */ .nNUGOR { position: sticky; top: 0; z-index: 120; padding-top: var(--m4-safe-t); transition: transform .26s cubic-bezier(.4, 0, .2, 1), box-shadow .2s ease; will-change: transform; } .nNUGOR .TiI0ED { transition: padding .26s ease, gap .26s ease; } /* Сжатое состояние: остаётся одна строка — логотип, город, две кнопки. */ html.m4-compact .nNUGOR .e5E40w, html.m4-compact .nNUGOR .yandex-nav-list { display: none; } html.m4-compact .nNUGOR .TiI0ED { padding: 7px 0; gap: 10px; } html.m4-compact .nNUGOR .brand-logo-img { width: 108px; height: 32px; } html.m4-compact .nNUGOR .city-selector-btn { font-size: 13px; } html.m4-compact .nNUGOR .action-circle-btn { width: 44px; height: 44px; } /* Прокрутка вниз — шапка совсем уезжает, вверх — возвращается. */ html.m4-hidden .nNUGOR { transform: translateY(-104%); } html.m4-hidden.m4-compact .m4-search { padding-top: var(--m4-safe-t); } /* ── 1b. Строка категорий: палец + мягкий край ───────────────────────── */ .yandex-nav-list { display: flex; flex-wrap: nowrap; gap: 8px; padding: 2px 0 12px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--page-side-paddings); scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-x; mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--m4-fade)), transparent 100%); } .yandex-nav-list::-webkit-scrollbar { display: none; } .yandex-nav-list .n6sLal { flex: 0 0 auto; min-height: 44px; padding: 11px 16px; font-size: 14px; line-height: 20px; scroll-snap-align: start; } .yandex-nav-list.m4-fit { mask-image: none; } .yandex-nav-list.m4-mid { mask-image: linear-gradient(to right, transparent 0, #000 var(--m4-fade), #000 calc(100% - var(--m4-fade)), transparent 100%); } .yandex-nav-list.m4-end { mask-image: linear-gradient(to right, transparent 0, #000 var(--m4-fade), #000 100%); } /* ── 1c. Размеры шапки под палец ─────────────────────────────────────── */ .v9gQW { min-height: 44px; display: flex; align-items: center; } .brand-logo-img { width: 118px; height: 38px; } .action-circle-btn { width: 44px; height: 44px; } .header-right-actions { gap: 8px; } .city-selector-btn { min-height: 44px; display: inline-flex; align-items: center; font-size: 13px; } .zN_3e { height: 46px; } .input-search { font-size: 15px; } .search-clear-btn { width: 44px; height: 44px; } /* ── 3. Ленты: снап, «подглядывание», мягкие края ────────────────────── */ .events-slider, .top10-slider, .ticket-banners-slider, .weekend-guide-scroll, .calendar-ribbon-slider, .billboard-slider, .dv-dates { overscroll-behavior-inline: contain; scroll-padding-inline: var(--page-side-paddings); -webkit-overflow-scrolling: touch; } /* Следующая карточка заметно выглядывает — понятно, что лента листается. */ .ticket-banners-slider .ticket-stub-banner { flex: 0 0 min(315px, calc(100% - 46px)); width: auto; } .events-slider .event-card-v3 { flex: 0 0 min(268px, calc(100% - 44px)); min-width: 0; } .top10-slider .D9p63 { flex: 0 0 min(224px, calc(100% - 62px)); width: auto; min-width: 0; } .weekend-guide-scroll .region-card { flex: 0 0 min(168px, calc(100% - 58px)); width: auto; } .billboard-slider .gQt_c.JuHqb { flex: 0 0 min(300px, calc(100% - 40px)); width: auto; } .calendar-ribbon-slider .pdT6c { scroll-snap-align: start; } /* На телефоне градиент по краям ленты не нужен вовсе — карточка и так заметно выглядывает за край (см. правила выше), это уже говорит, что ленту можно листать. Владелец отдельно попросил градиенты только на ПК. */ .events-slider, .top10-slider, .ticket-banners-slider, .weekend-guide-scroll, .calendar-ribbon-slider, .events-slider.m4-mid, .events-slider.m4-end, .top10-slider.m4-mid, .top10-slider.m4-end, .ticket-banners-slider.m4-mid, .ticket-banners-slider.m4-end, .calendar-ribbon-slider.m4-mid, .calendar-ribbon-slider.m4-end { mask-image: none; } /* ── 4. Касания и кегли ──────────────────────────────────────────────── */ /* Мелкие текстовые ссылки получают площадь 44px без визуального роста. */ .dv-crumbs a, .dv-link, .dv-tg a, .footer-links-list a, .seo-about-box a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -11px; } /* Заголовки карточек обрезаются по строкам (overflow: hidden), поэтому накладку ::after обрезало бы вместе с ними — расширяем саму ссылку симметричным padding и возвращаем макет отрицательным margin. */ /* Зона касания расширяется псевдоэлементом: отступы у текста с обрезкой по строкам показывали кусок третьей строки поверх подписи. */ .event-card-v3__title, .top10-event-title, .hero-card-title { position: relative; z-index: 1; } .event-card-v3__title::after, .top10-event-title::after, .hero-card-title::after { content: ''; position: absolute; inset: -10px 0; } .photo-credit { position: relative; z-index: 1; padding-block: 16px; margin-block: -16px; } .all-events-btn { min-height: 44px; display: inline-flex; align-items: center; padding: 12px 18px; font-size: 13px; } .billboard-slider .hero-fav-btn { width: 44px; height: 44px; } .quick-tag-item { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; } .weekend-guide-cta { min-height: 44px; display: inline-flex; align-items: center; } .catalogue-empty a { min-height: 44px; display: inline-flex; align-items: center; } .event-card-v3__fav { width: 44px; height: 44px; min-width: 44px; min-height: 44px; } .event-card-v3__fav svg { width: 20px; height: 20px; } .footer-links-list a { min-height: 44px; } .footer-links-list { gap: 2px; } .footer-links-list a, .footer-links-list span { font-size: 14px; line-height: 1.5; } .footer-col-title { font-size: 15px; } .footer-bottom, .footer-bottom div { font-size: 14px; } .event-card-v3__title { font-size: 16px; line-height: 1.34; } .event-card-v3__genre, .event-card-v3__date { font-size: 14px; line-height: 1.45; } .event-card-v3__price, .event-card-v3__cashback { font-size: 12px; } .top10-event-title { font-size: 15px; } .top10-date, .top10-genre { font-size: 14px; } .hero-card-meta { font-size: 14px; line-height: 1.5; } .region-card-meta { font-size: 14px; } .ticket-stub-accent { font-size: 14px; max-width: 200px; } .weekend-guide-description { font-size: 14px; max-width: 100%; } .rule-card-text { font-size: 15px; } .faq-summary { font-size: 15px; padding: 18px 0; } .faq-content { font-size: 15px; line-height: 1.7; padding: 0 30px 20px 0; } .faq-subtitle { font-size: 14px; } .seo-about-box p { font-size: 15px; line-height: 1.7; } .seo-about-box h2 { font-size: 22px; } .calendar-month-label { font-size: 11px; } .section-eyebrow { font-size: 12px; letter-spacing: .1em; } .catalogue-empty span, .catalogue-empty a { font-size: 14px; } .catalogue-empty strong { font-size: 15px; } .tg-feature-desc { font-size: 14px; line-height: 1.6; } .tg-feature-btn span { font-size: 14px; } /* Страница события: вторичный текст не мельче 14px. */ .dv-lead { font-size: 16px; } .dv-text { font-size: 16px; } .dv-tag, .dv-tags li { font-size: 14px; } .dv-fact dt, .dv-specs dt { font-size: 13px; } .dv-fact dd small { font-size: 14px; } .dv-ticket__label { font-size: 14px; } .dv-ticket__meta { font-size: 15px; } .dv-checks { font-size: 14px; gap: 10px; } .dv-tg p { font-size: 14px; line-height: 1.6; } .dv-tg a, .dv-link { font-size: 14px; } .dv-people span { font-size: 14px; } .dv-venue__addr, .dv-venue__body .dv-text { font-size: 15px; } .dv-cinema__addr { font-size: 15px; } .dv-cinema__route { font-size: 14px; } .dv-hall__name { font-size: 15px; } .dv-hall__name small { font-size: 14px; } .dv-slot span { font-size: 13.5px; } .dv-date span { font-size: 12px; } .dv-schedule__hint { font-size: 15px; } .dv-empty { font-size: 15px; } .dv-crumbs ol { font-size: 13px; } /* Отступы 16–20px и площади нажатия в интерактиве события. */ .dv-chip { min-height: 44px; padding: 12px 17px; font-size: 14px; } .dv-slot { min-height: 52px; } .dv-date { min-height: 56px; } .dv-actions .dv-cta { height: 54px; font-size: 16px; } .dv-btn-soft { height: 48px; font-size: 15px; } .dv-cinema { padding: 18px 16px; } .dv-hall { padding: 16px 0; } .dv-ticket__price { font-size: 28px; } .dv-fact { padding: 14px 16px; } .dv-venue__body { padding: 20px 18px; } .dv-schedule { scroll-margin-top: calc(72px + var(--m4-safe-t)); } /* ── 2. Нижняя навигация ─────────────────────────────────────────────── */ .m4-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 130; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: calc(var(--m4-nav-h) + var(--m4-safe-b)); padding-bottom: var(--m4-safe-b); border-top: 1px solid var(--m4-line); background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(14px) saturate(180%); transform: translateY(0); transition: transform .26s cubic-bezier(.4, 0, .2, 1); } html.m4-search-open .m4-nav { transform: translateY(120%); } .m4-nav__item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 44px; border: 0; background: none; color: var(--m4-muted); font: 600 11px/1 var(--font-sans); text-decoration: none; -webkit-tap-highlight-color: transparent; transition: color .16s ease; } .m4-nav__item svg { width: 24px; height: 24px; } .m4-nav__item[aria-current="page"], .m4-nav__item.is-active { color: var(--m4-accent); } .m4-nav__item[aria-current="page"]::before, .m4-nav__item.is-active::before { content: ''; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 999px; background: var(--m4-accent); } .m4-nav__badge { position: absolute; top: 2px; left: 50%; margin-left: 9px; box-shadow: 0 0 0 2px #fff; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--m4-accent); color: #fff; font: 700 10px/17px var(--font-sans); text-align: center; } .m4-nav__badge[hidden] { display: none; } /* Панель не закрывает контент и подвал: место под неё выделено в body. Меню теперь в разметке сервера и есть всегда на этой ширине — отступ не зависит от класса, который раньше ставил только скрипт. */ body { padding-bottom: calc(var(--m4-nav-h) + var(--m4-safe-b)); } html.m4-buy-open body { padding-bottom: calc(var(--m4-nav-h) + var(--m4-buy-h) + var(--m4-safe-b)); } /* ── 2b. Полноэкранный поиск ─────────────────────────────────────────── */ .m4-search { position: fixed; inset: 0; z-index: 200; display: none; flex-direction: column; padding: calc(var(--m4-safe-t) + 10px) var(--page-side-paddings) 0; background: #fff; } html.m4-search-open .m4-search { display: flex; } html.m4-search-open, html.m4-search-open body { overflow: hidden; } .m4-search__bar { display: flex; align-items: center; gap: 8px; } .m4-search .e5E40w { display: block !important; flex: 1 1 auto; width: auto !important; min-width: 0; margin: 0 !important; grid-column: auto !important; grid-row: auto !important; } .m4-search .zN_3e { height: 48px; background: #f1f2f4; } .m4-search .input-search { font-size: 16px; } .m4-search__close { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--m4-surface, #f5f5f7); color: var(--m4-ink); cursor: pointer; } .m4-search__close svg { width: 20px; height: 20px; } .m4-search__hint { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--m4-muted); } /* Выпадающий список остаётся абсолютным внутри .e5E40w, который переезжает сюда вместе с инпутом: так он сохраняет свою геометрию и раскрывается вниз. */ .m4-search .search-dropdown { max-height: calc(100vh - 140px) !important; } .m4-search .search-dropdown > a div div:first-child { font-size: 14px; } .m4-search .search-dropdown > a div div:last-child { font-size: 13px !important; } /* ── 5. Липкая панель покупки на странице события ────────────────────── */ .m4-buy { position: fixed; left: 0; right: 0; bottom: calc(var(--m4-nav-h) + var(--m4-safe-b)); z-index: 129; display: flex; align-items: center; gap: 12px; min-height: var(--m4-buy-h); padding: 9px var(--page-side-paddings); border-top: 1px solid var(--m4-line); background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%); transform: translateY(130%); visibility: hidden; transition: transform .26s cubic-bezier(.4, 0, .2, 1), visibility .26s; } html.m4-buy-open .m4-buy { transform: translateY(0); visibility: visible; } html.m4-search-open .m4-buy { transform: translateY(130%); visibility: hidden; } .m4-buy__price { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .m4-buy__price b { font: 800 19px/1.15 var(--font-display); letter-spacing: -.03em; color: var(--m4-ink); white-space: nowrap; } .m4-buy__price small { font-size: 12px; line-height: 1.3; color: var(--m4-muted); } .m4-buy__cta { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 999px; background: var(--m4-accent); color: #fff; font: 600 15px/1 var(--font-sans); text-decoration: none; white-space: nowrap; } .m4-buy__cta svg { width: 17px; height: 17px; } /* ── 7. Пустоты и растянутые блоки ───────────────────────────────────── */ .weekend-guide-scroll { margin-top: 20px; } .tg-feature-mockup { height: auto; min-height: 300px; } .tg-feature-banner { padding-bottom: 0; } .footer-brand-strip { gap: 16px; } .footer-brand-strip p { font-size: 22px; } } /* ═════════════════════════════ ПЛАНШЕТ 768–1024 ═════════════════════════════ */ @media (min-width: 768px) and (max-width: 1024px) { /* Общий слой делает шапку липкой на 1024 и нелипкой на 768 — убираем разнобой: на планшете шапка остаётся доступной при прокрутке. */ .nNUGOR { position: sticky; top: 0; z-index: 120; } /* Читаемость: основной текст в тех же кеглях, что и на телефоне. */ .event-card-v3__genre, .event-card-v3__date { font-size: 13px; line-height: 1.45; } .event-card-v3__title { font-size: 15.5px; } .top10-date, .top10-genre { font-size: 13px; } .region-card-meta { font-size: 13px; } .hero-card-meta { font-size: 13px; } .ticket-stub-accent { font-size: 13px; max-width: 200px; } .quick-tag-item { font-size: 13px; } .weekend-guide-description { font-size: 14px; line-height: 1.55; } .tg-feature-desc { font-size: 14px; line-height: 1.6; } .section-eyebrow { font-size: 11px; } .faq-subtitle { font-size: 14px; } /* Колонка рядом с постером на планшете ~400px: три факта в ряд рвали слова («Карен-а»), поэтому факты идут списком. */ .dv-facts { grid-template-columns: minmax(0, 1fr); gap: 8px; } .dv-fact { padding: 14px; gap: 10px; } .dv-fact__icon { width: 34px; height: 34px; } .dv-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Сайдбар события — две колонки, без растянутой одиночной карточки. */ .dv-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dv-ticket { height: 100%; } /* Телеграм-баннер остаётся двухколоночным: на планшете места хватает. */ .tg-feature-banner { display: grid; grid-template-columns: minmax(0, 1fr) 44%; min-height: 340px; padding: 30px 34px 0; } .tg-feature-left { padding: 0 0 30px; max-width: 420px; } .tg-feature-title { font-size: 36px; } .tg-feature-mockup { height: 320px; } .tg-feature-mockup > img { height: 340px; } /* Гид выходного дня — снова две колонки вместо одноколоночной простыни. */ .weekend-guide-container { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; padding: 28px; } .weekend-guide-description { max-width: 100%; } .weekend-guide-scroll { margin-top: 0; } /* Пустая полоса-«сирота» у FAQ: заголовок и список в две колонки. */ .seo-faq-section { display: grid; grid-template-columns: 1fr; gap: 8px; } .faq-title-wrap { padding-top: 0; } .footer-nav-grid { gap: 24px 20px; } .footer-col-title { font-size: 14px; } .footer-links-list a, .footer-links-list span { font-size: 13px; } } /* ─────────────────────────── анимации ─────────────────────────── */ @media (prefers-reduced-motion: no-preference) { .m4-nav__item:active { transform: scale(.94); } .m4-nav__item { transition: color .16s ease, transform .16s ease; } .m4-buy__cta { transition: transform .16s ease, background-color .16s ease; } .m4-buy__cta:active { transform: scale(.97); background: #0843db; } .dv-cta:active, .dv-btn-soft:active, .dv-round:active, .dv-chip:active, .dv-slot:active, .dv-date:active { transform: scale(.97); } .dv-cta, .dv-btn-soft, .dv-round, .dv-chip, .dv-slot, .dv-date { transition: transform .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease; } /* Появление блоков, которые создаёт мобильный слой. */ .m4-nav, .m4-buy { animation: m4-rise .32s cubic-bezier(.4, 0, .2, 1) both; } @keyframes m4-rise { from { opacity: 0; } to { opacity: 1; } } } @media (prefers-reduced-motion: reduce) { .nNUGOR, .m4-nav, .m4-buy, .m4-nav__item, .m4-buy__cta, .dv-cta, .dv-btn-soft, .dv-round, .dv-chip, .dv-slot, .dv-date, .event-card-v3__media, .ticket-stub-banner, .region-card { transition: none !important; animation: none !important; } .m4-nav__item:active, .m4-buy__cta:active, .dv-cta:active, .dv-btn-soft:active, .dv-round:active, .event-card-v3:active .event-card-v3__media { transform: none !important; } } /* ── Общая шапка v4 (все SSR-страницы) ведёт себя как шапка главной ───── */ @media (max-width: 767px) { .v4-header { padding-top: var(--m4-safe-t); transition: transform .26s cubic-bezier(.4, 0, .2, 1); will-change: transform; } html.m4-compact .v4-header .v4-header__search, html.m4-compact .v4-header .v4-header__nav { display: none; } html.m4-compact .v4-header .v4-header__row { padding: 8px 0; } html.m4-hidden .v4-header { transform: translateY(-104%); } .m4-search .v4-header__search { display: block !important; flex: 1 1 auto; min-width: 0; margin: 0 !important; } .m4-search .v4-header__search .seo-search-form { height: 48px; } .m4-search .v4-header__search .seo-search-suggestions { max-height: calc(100vh - 140px); } /* Панель покупки события стоит над нижней навигацией, а не под ней. */ html.m4-has-nav .event-v4-buybar { bottom: calc(var(--m4-nav-h) + var(--m4-safe-b) + 10px); } .v4-footer__inner { padding-bottom: 28px; } } @media (prefers-reduced-motion: reduce) { .v4-header { transition: none; } } /* Отступ под нижнюю панель — внутри серого подвала, а не белой полосой под ним. Меню в разметке сервера есть всегда на этой ширине, поэтому отступ больше не зависит от класса m4-has-nav (его ставит только скрипт). */ @media (max-width: 767px) { body:has(.v4-footer), html.m4-buy-open body:has(.v4-footer) { padding-bottom: 0; } .v4-footer { padding-bottom: calc(var(--m4-nav-h) + var(--m4-safe-b)); } html.m4-buy-open .v4-footer { padding-bottom: calc(var(--m4-nav-h) + var(--m4-buy-h) + var(--m4-safe-b)); } } /* ═════════════════ v10: телефон компактнее по высоте ═════════════════ */ :root { --m4-nav-h: 60px; --m4-fade: 56px; } @media (max-width: 767px) { /* Под страницей при «резиновой» прокрутке — цвет подвала, а не белая полоса. */ html { background: #f1f3f8; overscroll-behavior-y: none; } body { background: #fff; } /* Шапка: логотип и кнопки + строка разделов. Поиск — во вкладке «Поиск» нижнего меню. */ .nNUGOR .e5E40w, .v4-header .v4-header__search { display: none; } .nNUGOR .TiI0ED { height: auto; min-height: 56px; padding: 6px 0 2px; gap: 10px; } .v4-header .v4-header__row { padding: 6px 0 2px; gap: 10px; min-height: 56px; } .brand-logo-img, .v4-header__brand img { width: 104px !important; height: auto; } .action-circle-btn, .v4-header__fav, .v4-header__tg { width: 40px !important; height: 40px !important; } .city-selector-btn, .v4-header__city { font-size: 13px !important; min-height: 40px; gap: 4px !important; } .yandex-nav-list, .v4-header .v4-header__nav { padding: 2px 0 8px !important; gap: 4px !important; } .yandex-nav-list .n6sLal, .v4-header__nav a { min-height: 36px !important; padding: 0 13px !important; font-size: 13.5px !important; line-height: 36px !important; } /* Мягкий край — только у навигации разделов (нужен, чтобы было видно, что список категорий не помещается целиком). У карточных лент на телефоне градиента больше нет вовсе: карточка и так выглядывает за край. */ .yandex-nav-list.m4-mid, .v4-header__nav.m4-mid { mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,.35) 14px, #000 var(--m4-fade), #000 calc(100% - var(--m4-fade)), rgba(0,0,0,.35) calc(100% - 14px), transparent 100%); } .yandex-nav-list:not(.m4-mid):not(.m4-end):not(.m4-fit) { mask-image: linear-gradient(to right, #000 calc(100% - var(--m4-fade)), rgba(0,0,0,.35) calc(100% - 14px), transparent 100%); } .events-slider, .top10-slider, .ticket-banners-slider, .calendar-ribbon-slider, .events-slider.m4-mid, .events-slider.m4-end, .events-slider:not(.m4-mid):not(.m4-end):not(.m4-fit), .top10-slider.m4-mid, .top10-slider.m4-end, .ticket-banners-slider.m4-mid, .ticket-banners-slider.m4-end, .calendar-ribbon-slider.m4-mid, .calendar-ribbon-slider.m4-end { mask-image: none; } /* Календарь главной: заголовок и «Все события» в одну строку, ячейки меньше. */ .calendar-header { flex-wrap: nowrap !important; justify-content: space-between !important; } .calendar-title { flex: 1 1 auto !important; font-size: 22px !important; } .calendar-header .all-events-btn { min-height: 36px; padding: 0 14px; font-size: 13px; } .calendar-block { margin-top: 28px; } .calendar-ribbon-slider .pdT6c { flex-basis: 48px !important; min-width: 48px !important; width: 48px !important; height: 60px !important; border-radius: 14px; } .calendar-ribbon-slider .CEXp3 { padding: 6px 4px; gap: 2px; } .calendar-ribbon-slider .YCVqY { font-size: 19px; line-height: 22px; } .calendar-ribbon-slider .OwbUV { font-size: 10.5px; } .calendar-month-label { flex-basis: 26px; } .category-title, .top10-title { font-size: 22px; } /* Нижнее меню: аккуратная панель с «таблеткой» под активной иконкой. */ .m4-nav { height: calc(var(--m4-nav-h) + var(--m4-safe-b)); padding: 0 6px var(--m4-safe-b); border-top: 0; background: rgba(255,255,255,.94); box-shadow: 0 -1px 0 rgba(20,28,52,.06), 0 -8px 24px rgba(20,28,52,.06); } .m4-nav__item { gap: 2px; color: #5d6270; font: 500 10.5px/1.2 'Golos Text', system-ui, sans-serif !important; letter-spacing: .01em; } .m4-nav__item svg { width: 22px; height: 22px; padding: 4px 16px; box-sizing: content-box; border-radius: 999px; transition: background-color .18s ease, color .18s ease; } .m4-nav__item[aria-current="page"]::before, .m4-nav__item.is-active::before { display: none; } .m4-nav__item[aria-current="page"], .m4-nav__item.is-active { color: var(--m4-accent); font-weight: 600 !important; } .m4-nav__item[aria-current="page"] svg, .m4-nav__item.is-active svg { background: #e8efff; } .m4-nav__badge { top: 4px; margin-left: 12px; } /* Баннер Telegram: в полтора раза ниже — без значка и второй фразы, телефон справа меньше. */ .v4-tg, .tg-feature-banner { min-height: 0 !important; padding: 22px 18px 20px !important; margin-top: 40px !important; border-radius: 22px !important; overflow: hidden; } .v4-tg__badge, .tg-feature-badge, .v4-tg__more, .tg-chips-row { display: none !important; } .v4-tg h2, .tg-feature-title { font-size: 25px !important; line-height: 1.12 !important; margin: 0 0 10px !important; padding-right: 96px; } .v4-tg__lead, .tg-feature-desc { font-size: 14px !important; margin: 0 0 16px !important; padding-right: 96px; } .v4-tg__btn, .tg-feature-btn { width: auto !important; min-height: 46px !important; } .v4-tg__visual, .tg-feature-mockup { position: absolute !important; right: -34px; top: 14px; width: 150px !important; height: 200px !important; min-height: 0 !important; pointer-events: none; } .v4-tg__visual img, .tg-feature-mockup > img { position: static !important; width: 100% !important; height: auto !important; transform: rotate(-8deg); } /* Подвал: компактнее — меньше отступы, ссылки плотнее, без описания. */ .v4-footer { margin-top: 40px !important; } .v4-footer__inner { padding-top: 26px !important; } .v4-footer__brand img { width: 118px; } .v4-footer__grid { gap: 14px !important; margin-top: 18px !important; } .v4-footer__title { margin-bottom: 2px !important; } .v4-footer ul { gap: 0 18px !important; } .v4-footer ul a { display: inline-flex; align-items: center; min-height: 34px !important; font-size: 14px !important; } .v4-footer__about .v4-footer__text { display: none; } .v4-footer__place { margin-top: 2px !important; } .v4-footer__bottom { margin-top: 16px !important; padding-top: 12px !important; } } /* ══════ v10, отчёты тестировщиков: телефон и планшет ══════ */ @media (max-width: 1280px) { /* Гигантские номера «10 идей» налезали на соседние постеры: на узких экранах — бейдж в углу. */ .top10-header { margin-left: 0 !important; } .top10-slider { padding-left: 0 !important; padding-right: 16px !important; gap: 14px !important; } .top10-poster-wrap { margin-left: 0 !important; } .top10-meta { padding-left: 0 !important; } .top10-poster-wrap .top10-number { left: 10px !important; top: 10px !important; bottom: auto !important; display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 9px; border-radius: 11px; background: rgba(10,14,26,.62); color: #fff; font: 800 20px/1 Manrope, sans-serif !important; letter-spacing: 0 !important; -webkit-text-stroke: 0 !important; filter: none !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .top10-slider .D9p63[data-rank="10"] .top10-number { left: 10px !important; font-size: 18px !important; } } @media (max-width: 767px) { /* Нижнее меню: плотный фон — текст страницы больше не просвечивает между иконками. */ .m4-nav { background: #fff; box-shadow: 0 -1px 0 rgba(20,28,52,.08), 0 -6px 20px rgba(20,28,52,.07); } /* Страница события: одна панель внизу. Пока видна кнопка покупки, общее меню уезжает. */ html.m4-buy-open .m4-nav { transform: translateY(120%); } html.m4-has-nav.m4-buy-open .event-v4-buybar { bottom: calc(var(--m4-safe-b) + 10px); } html.m4-has-nav.m4-buy-open .v4-footer { padding-bottom: calc(var(--m4-buy-h) + var(--m4-safe-b)); } /* Зона нажатия 44px там, где элемент визуально меньше. */ .yandex-nav-list .n6sLal, .v4-header__nav a, .calendar-day__chip { position: relative; } .yandex-nav-list .n6sLal::after, .v4-header__nav a::after { content: ''; position: absolute; inset: -4px 0; } .action-circle-btn, .v4-header__fav, .v4-header__tg { width: 44px !important; height: 44px !important; } .action-circle-btn::after, .v4-header__fav::after, .v4-header__tg::after { content: ''; position: absolute; inset: -1px; } .v4-header__fav, .v4-header__tg, .action-circle-btn { position: relative; } .v4-filter > summary { min-height: 44px; } .v4-filter__option input { width: 20px; height: 20px; } .event-card-v3__fav, .seo-card__favorite { z-index: 4; } /* Фильтр — шторка снизу во всю ширину, а не узкий поповер у левого края. */ .v4-filter__panel { width: auto !important; max-height: 68vh !important; padding: 12px !important; border-radius: 22px !important; } /* Полноэкранный поиск: список результатов во всю ширину, названия в две строки, один крестик. */ /* Крестик закрытия лежит поверх поля, поэтому строка поиска — во всю ширину, а выпадающий список повторяет её ширину и не превращается в узкую колонку. */ .m4-search__bar { position: relative; } .m4-search__slot { flex: 1 1 auto; min-width: 0; } /* 40px — минимальная тач-цель; поле резервирует под крестик 50px справа. */ .m4-search__close { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; flex: none; } .m4-search .zN_3e { padding-right: 50px; } .m4-search .search-dropdown, .m4-search .seo-search-suggestions { left: 0 !important; right: 0 !important; width: auto !important; max-height: calc(100vh - 170px) !important; border-radius: 18px !important; } .m4-search .search-result__title, .m4-search .seo-suggestion-item b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal !important; text-overflow: clip !important; font-size: 15px !important; line-height: 1.3 !important; } .m4-search .search-result__meta, .m4-search .search-result__venue { white-space: normal !important; } .m4-search .search-clear-btn, .m4-search .seo-search-clear { display: none !important; } .m4-search .input-search, .m4-search .seo-search-input { font-size: 16px !important; } /* 360px: плитки и ленты не срезаются у края. */ .ticket-banners-slider .ticket-stub-banner { flex-basis: min(315px, calc(100vw - 64px)) !important; } .events-slider .event-card-v3 { flex-basis: min(268px, calc(100vw - 62px)) !important; } .calendar-ribbon-slider { padding-right: 20px; } .weekend-guide-scroll .region-card { flex-basis: min(168px, calc(100vw - 76px)) !important; } /* Один сохранённый — карточка на всю ширину, а не половина с пустотой. */ body.site-v4 .seo-grid > article:only-child { grid-column: 1 / -1; } /* Адрес площадки переносится, а не обрезается. */ .seo-venue-card em, .seo-venue-row small { white-space: normal !important; text-overflow: clip !important; overflow: visible !important; } } /* v10: мелкий текст и обрезки, найденные тестировщиками */ @media (max-width: 767px) { /* Мелкие подписи — в rem: так они растут вместе с системным размером шрифта, а не остаются микроскопическими у тех, кто увеличил текст в настройках. */ .m4-nav__item { font-size: .75rem !important; } .photo-credit { font-size: .6875rem !important; } .calendar-ribbon-slider .OwbUV { font-size: .6875rem !important; } .event-card-v3__price, .event-card-v3__lang, .seo-card__price, .seo-card__lang { font-size: .75rem !important; } .seo-hero__stats span, .seo-section-title > span, .seo-guide-routes .seo-section-title span { font-size: .78rem !important; } .calendar-month-label { font-size: .75rem !important; } /* Площадка в сетке дня: две строки вместо обрезки посреди слова. */ .calendar-day__grid .event-card-v3__genre { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; } /* Лента дат прокручивается, не пряча подпись месяца. */ .calendar-ribbon-slider { scroll-padding-inline: 34px; } }