/** * TVK Mobile Fix — только экраны ≤768px. * Не меняет десктоп и JS. Подключать последним в . * v1.3 */ @media (max-width: 768px) { /* ── 1. Глобальный overflow и ширина ── */ html, body { overflow-x: hidden !important; width: 100% !important; max-width: 100% !important; position: relative !important; } body { background-attachment: scroll !important; } main, .page-main, .hero-section, .page-hero, .page-section, section, .container, .site-header, .site-footer { max-width: 100% !important; box-sizing: border-box; } main, .page-main, .hero-section, .page-hero, .catalog-section--eng, .factory-power-section, .page-section { overflow-x: clip; } img, svg, video, iframe, table { max-width: 100%; } /* ── Сетки: одна колонка (перебивает tvk-fullwidth !important) ── */ .hero-grid, .hero-grid--elite, .page-hero .hero-grid, .page-grid, .product-page .hero-grid, .product-page .page-grid { grid-template-columns: 1fr !important; gap: 18px !important; width: 100% !important; min-width: 0 !important; } .hero-grid > *, .hero-grid--elite > *, .page-hero .hero-grid > *, .page-grid > *, .product-page .hero-grid > *, .product-page .page-grid > * { min-width: 0 !important; max-width: 100% !important; width: 100% !important; } .hero-copy, .hero-aside-col, .page-hero .hero-copy, .product-page .hero-copy, .product-page .content-stack, .product-page .side-card, .product-page .product-media { width: 100% !important; max-width: 100% !important; } .hero-aside-col { display: flex; flex-direction: column; gap: 16px; align-items: stretch; } /* ── 2. Гигантский / вертикальный текст ── */ .hero-copy h1, .page-hero .hero-copy h1, .page-hero h1, .tvk-inner-page .page-hero h1 { font-size: clamp(1.28rem, 5.2vw, 1.72rem) !important; line-height: 1.18 !important; letter-spacing: -0.02em !important; text-transform: none !important; word-break: normal !important; overflow-wrap: break-word !important; hyphens: manual !important; white-space: normal !important; max-width: 100% !important; } .hero-h1-cycle-wrap { display: block; margin-top: 0.35em; font-size: clamp(0.72rem, 3.2vw, 0.88rem) !important; line-height: 1.4 !important; overflow: hidden; max-width: 100%; } .eyebrow, p.eyebrow, .page-hero .eyebrow, .tvk-inner-page .eyebrow { font-size: clamp(0.62rem, 2.8vw, 0.72rem) !important; line-height: 1.45 !important; letter-spacing: 0.08em !important; word-break: normal !important; overflow-wrap: break-word !important; white-space: normal !important; max-width: 100% !important; } .section-heading h2, .factory-power-section--featured .section-heading h2 { font-size: clamp(1.35rem, 4.8vw, 1.65rem) !important; line-height: 1.15 !important; max-width: 100% !important; } .brand-copy strong { font-size: 0.82rem !important; white-space: normal !important; word-break: normal !important; } /* Декоративные псевдо-элементы / фоновые слои */ .section-heading::before, .catalog-section__sys::before, .tvk-inner-sys::before, .faq-section__sys::before, .engineering-notes article::before, .content-card::before, .side-card::before, .faq-list article::before, .seo-link-card::before { display: none !important; } .tvk-inner-hero__grid, .tvk-inner-hero__scan { display: none !important; } .catalog-section__bg { opacity: 0.03 !important; z-index: -10 !important; pointer-events: none !important; max-width: 100vw !important; overflow: hidden !important; } .tvk-marquee-belt, .tvk-marquee-track { max-width: 100% !important; overflow: hidden !important; } /* Hero-лого: на всю ширину колонки */ .hero-aside-col .hero-visual-premium.pov-host.tvk-brand-stage { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; min-height: clamp(300px, 92vw, 440px) !important; padding: 8px 0 4px !important; overflow: visible !important; } .hero-aside-col .tvk-3d-card { width: 100% !important; min-height: inherit !important; } .pov-host, .hero-visual-premium.pov-host { overflow: visible !important; max-width: 100vw !important; width: 100% !important; min-height: clamp(300px, 92vw, 440px) !important; margin-left: auto !important; margin-right: auto !important; } .pov-host .pov-brand-center.pov-pipe-center { width: min(58vw, 58vh, 220px) !important; height: min(58vw, 58vh, 220px) !important; min-width: 120px !important; min-height: 120px !important; } .pov-saturn-svg, .pov-orbit-svg { overflow: visible !important; max-width: 100% !important; width: 100% !important; height: 108% !important; top: -6% !important; left: 0 !important; right: 0 !important; transform: scale(1.05) translateZ(0); transform-origin: 50% 50%; } /* Дубль формы под орбитой — лишняя полоса */ .hero-aside-col .hero-panel { display: none !important; } .tvk-lstat__value { font-size: clamp(1.75rem, 8vw, 2.35rem) !important; } /* ── 3. Модалки, меню, формы, KPI-карточка ── */ body.menu-open:not(:has(#tvk-menu-overlay))::before, body:has(.site-nav.is-open):not(:has(#tvk-menu-overlay))::before { content: ""; position: fixed; inset: 0; z-index: 999; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); pointer-events: none; } body.menu-open .site-header, body:has(.site-nav.is-open) .site-header { position: relative; z-index: 1001; } /* Полноэкранное меню — tvk-menu-overlay.css */ .hero-panel { position: static !important; top: auto !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; transform: none !important; z-index: 1 !important; } .hero-panel .lead-form, .hero-panel .compact-form, .panel-card, .page-hero .side-card, .page-hero .side-card.content-card, .side-card.content-card, .lead-form:not(.izc-host .lead-form) { position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; box-sizing: border-box !important; z-index: 2 !important; } /* KPI «Ключевые показатели» — обычная карточка в потоке, не поверх h1 */ .page-hero .side-card.content-card { order: 2; padding: 18px 16px !important; border-radius: 16px !important; } .page-hero .hero-copy { order: 1; } /* ── 4. Нижняя липкая панель ── */ body:has(.tvk-sticky-cta) { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important; } body:has(.tvk-sticky-cta) main, body:has(.tvk-sticky-cta) .page-main { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important; } .tvk-sticky-cta { z-index: 340 !important; } .site-footer { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important; } body:has(.tvk-sticky-cta) .site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; } /* ── 5. Карточки товаров и каталог ── */ .catalog-card, .catalog-card--premium, .product-page .content-card, .product-page .side-card, .product-page .product-media, .content-card, .side-card, .trust-card, .document-card, .factory-power-card { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding: 16px !important; min-width: 0 !important; } .catalog-card--featured { grid-column: span 1 !important; } .catalog-card--featured .catalog-card__inner { display: flex !important; flex-direction: column !important; } .catalog-card__media, .catalog-photo, .product-photo, .product-page .product-photo { width: 100% !important; max-width: 100% !important; overflow: hidden !important; box-sizing: border-box !important; } .catalog-photo img, .catalog-card__media img, .product-photo img, .product-page .product-photo img, .product-media img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; object-fit: contain !important; box-sizing: border-box !important; } /* Главная: hero-видео — contain как на 95a */ .hero-section--pipe-video .hero-pipe-video.product-photo--video video { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: min(72vw, 340px) !important; min-height: 180px !important; object-fit: contain !important; object-position: center center !important; background: var(--bg-elevated, #14181d) !important; } /* Продуктовые: нижняя панель не перекрывает форму #contact */ body.product-page:has(.sticky-cta) { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important; } body.product-page:has(.sticky-cta) main { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important; } .catalog-section .catalog-grid, .catalog-grid--premium { overflow-x: visible !important; } /* Горизонтальный свайп каталога — не на главной (там только сетка) */ body:not(.home-page) #products .catalog-grid-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } body:not(.home-page) #products .catalog-grid { display: flex !important; flex-wrap: nowrap !important; grid-template-columns: unset !important; width: max-content !important; } body:not(.home-page) #products .catalog-grid .catalog-card { width: min(82vw, 320px) !important; max-width: min(82vw, 320px) !important; flex: 0 0 min(82vw, 320px) !important; } #products .catalog-filter { flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; } #products .catalog-filter__btn { flex-shrink: 0 !important; } #products .catalog-toolbar__actions { display: none !important; } .table-scroll-container, .tvk-table-scroll { max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; } /* Контейнер: без отрицательных вылетов */ .container { width: min(100%, 100vw) !important; padding-left: clamp(12px, 4vw, 20px) !important; padding-right: clamp(12px, 4vw, 20px) !important; } .toast { z-index: 1010 !important; bottom: calc(108px + env(safe-area-inset-bottom, 0px)) !important; } }