/* * Общий финальный слой адаптива для всех страниц Pokiza. * Подключать последним в после responsive + страничных *-adaptive.css. * Цель: без горизонтального «плыву», без вылезания за край, аккуратные отступы и safe-area. */ /* ========================================================================== Мобильные и планшетные токены (≤900px) ========================================================================== */ @media (max-width: 900px) { :root { --pokiza-primary-headline-from-white-top: calc(3rem + 28px); --pokiza-masthead-h: calc(64px + env(safe-area-inset-top, 0px)); --pokiza-hero-img-h: min(48vh, 380px); --pokiza-hero-halal-offset: 7.75rem; --pokiza-sheet-overlap: clamp(-4.5rem, -14vw, -2.75rem); --pokiza-gutter: clamp(12px, 4vw, 20px); --pokiza-radius-hero: 28px; --pokiza-radius-sheet: 36px; } html { overflow-x: hidden; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { overflow-x: hidden; margin: 0; min-width: 0; -webkit-overflow-scrolling: touch; } .pokiza-viewport { max-width: 100%; width: 100%; margin-left: auto; margin-right: auto; box-sizing: border-box; overflow-y: visible !important; overflow-x: clip !important; } @supports not (overflow: clip) { .pokiza-viewport { overflow-x: hidden !important; } } .main-container { max-width: 100%; min-width: 0 !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box; width: 100% !important; } .main-container img, .main-container video, .main-container iframe, .main-container svg { max-width: 100%; box-sizing: border-box; } .main-container a[href^="http"], .main-container a[href^="mailto"], .main-container a[href^="tel"] { overflow-wrap: anywhere; word-break: break-word; } .main-container button, .main-container [role="button"], .main-container .pokiza-masthead__toggle, .main-container a[href].rectangle-16, .main-container a[href].rectangle-24, .main-container .product-cat-btn { touch-action: manipulation; -webkit-tap-highlight-color: rgba(111, 22, 12, 0.12); } .product-modal, .partner-modal, .kontakty-feedback-modal { padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); box-sizing: border-box; } .product-modal__sheet, .partner-modal__wrap, .kontakty-feedback-modal__sheet { max-width: 100%; box-sizing: border-box; } /* ——— Фиксированная шапка: safe-area и компактнее на узких ——— */ .pokiza-masthead { padding-top: max(10px, env(safe-area-inset-top, 0px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } .pokiza-masthead__nav { left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); } /* ——— Герой: мягкая тень внизу (все страницы с .site-header в main) ——— */ .main-container > .site-header { position: relative !important; isolation: isolate !important; } .main-container > .site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; pointer-events: none; z-index: 1; border-radius: 0 0 var(--pokiza-radius-hero) var(--pokiza-radius-hero); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.38) 100%); } /* Лента «Халяль» — стеклянная плашка (о компании дублирует в o-kompanii-adaptive) */ .main-container > .halal-production.halal-production--over-hero { padding: 0.55rem 1rem !important; border-radius: 999px !important; background: rgba(24, 6, 4, 0.42) !important; -webkit-backdrop-filter: blur(8px) saturate(140%) !important; backdrop-filter: blur(8px) saturate(140%) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; letter-spacing: 0.01em !important; font-weight: 500 !important; z-index: 24 !important; } /* Белые листы: единый «наезд» на герой */ body.pokiza-home .site-main .rectangle-9, body.pokiza-page-inner .rectangle-7, body.pokiza-page-kontakty .kontakty-sheet, html.pokiza-news-doc .news > .pokiza-scale-sheet { box-shadow: 0 -20px 48px rgba(0, 0, 0, 0.12) !important; } /* Подвал full-bleed: без горизонтального скролла от 100vw */ .rectangle-14.site-footer { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; left: 0 !important; right: 0 !important; } body.pokiza-home .rectangle-14.site-footer, body.pokiza-page-inner .main-container .rectangle-14.site-footer { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; } } /* Очень узкие телефоны */ @media (max-width: 380px) { :root { --pokiza-primary-headline-from-white-top: calc(2.5rem + 24px); --pokiza-gutter: 10px; } .pokiza-masthead__brand img { width: 48px !important; height: 48px !important; border-radius: 12px !important; } .pokiza-masthead__toggle { width: 42px !important; height: 42px !important; } .main-container > .halal-production.halal-production--over-hero { padding: 0.45rem 0.75rem !important; font-size: clamp(0.72rem, 3.4vw, 0.88rem) !important; } } /* Планшет в портрете: чуть выше герой, воздух по бокам */ @media (min-width: 601px) and (max-width: 900px) { :root { --pokiza-hero-img-h: min(44vh, 420px); --pokiza-gutter: clamp(16px, 3vw, 28px); } body.pokiza-home .flex-row .rectangle-d { padding: 16px 18px 20px !important; gap: 16px 14px !important; } html.pokiza-news-doc .news .group-17 { max-width: min(640px, calc(100vw - 32px)) !important; gap: 14px !important; } } /* Альбомная ориентация на телефоне — компактный герой */ @media (max-width: 900px) and (orientation: landscape) and (max-height: 540px) { :root { --pokiza-hero-img-h: min(56vh, 320px); --pokiza-hero-halal-offset: 6rem; } .main-container > .site-header .mask-group, .main-container > .site-header .group-1, .main-container > .site-header .img { min-height: var(--pokiza-hero-img-h) !important; height: var(--pokiza-hero-img-h) !important; } body.pokiza-home .site-header .mask-group, body.pokiza-home .site-header .group-1, body.pokiza-home .site-header .img { min-height: var(--pokiza-hero-img-h) !important; height: var(--pokiza-hero-img-h) !important; } .main-container > .halal-production.halal-production--over-hero { top: calc(env(safe-area-inset-top, 0px) + 64px + var(--pokiza-hero-img-h) - var(--pokiza-hero-halal-offset)) !important; } } /* Планшет / ноутбук: масштаб макета на всю ширину, без боковых «ушей» */ @media (max-width: 1918px) and (min-width: 901px) { html.pokiza-js-scaled body, html.pokiza-js-scaled { overflow-x: hidden; } html.pokiza-js-scaled .pokiza-viewport { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } html.pokiza-js-scaled .main-container { margin-left: 0 !important; margin-right: 0 !important; transform-origin: top left !important; } } /* Широкие экраны: без центрирования при масштабе (full-bleed через js/home-layout.js) */ @media (min-width: 1920px) { html { overflow-x: hidden; } html:not(.pokiza-js-scaled) .main-container { margin-left: auto; margin-right: auto; } } /* Уважение к reduced motion */ @media (max-width: 900px) and (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } body.pokiza-home .flex-row .home-product-card, .pokiza-about-gallery__figure { transition: none !important; animation: none !important; } }