/* ========================================================================= Promo top-bar. ---------------------------------------------------------------------- Поведение: бар сидит в обычном flow самой первой строкой . .header (sticky на десктопе / sticky на мобиле — см. override ниже) при скролле плавно "поднимается" и встаёт на место бара. Бар уезжает вверх вместе с контентом. Никаких JS-листенеров на scroll — это всё CSS. Видимость по сессии: sessionStorage ключ `irinagrit_promo_v1`. Закрыли (крестик / свайп) → класс `.promo-closed` на → бар display:none. Inline-script в partial'е добавляет класс ДО отрисовки → layout-shift'а нет. ========================================================================= */ /* === БАР === */ .promo-bar { position: relative; z-index: 51; /* чуть выше .header (z:50) на случай overlap при сжатии */ background: linear-gradient(90deg, #8b1d28 0%, #641520 100%); color: #fff; overflow: hidden; transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .25s; contain: layout paint; } .promo-closed .promo-bar { display: none; } .promo-bar.is-swiping { transition: none; } .promo-bar.is-swiping .promo-bar__marquee { animation-play-state: paused; } /* Пауза marquee когда полоса скрыта за viewport (юзер скроллит вниз) или вкладка не активна. Класс ставит promo-bar.js через IntersectionObserver и visibilitychange. Это предотвращает GPU-композитор-leak на iOS Safari, из-за которой WKWebView убивал вкладку через ~1:45 memory-pressure'ом. */ .promo-bar.is-offscreen .promo-bar__marquee { animation-play-state: paused; } .promo-bar__inner { display: flex; align-items: center; justify-content: center; gap: 14px; height: 38px; padding: 0 44px 0 16px; font: 500 13px/1 'Manrope', sans-serif; color: #fff; text-decoration: none; -webkit-tap-highlight-color: transparent; } .promo-bar__badge { flex-shrink: 0; font: 700 9px/1 'Manrope', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: #f0865f; padding: 5px 8px; border-radius: 999px; } .promo-bar__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100vw - 240px); } .promo-bar__text b { font-weight: 700; color: #fff; } .promo-bar__cta { flex-shrink: 0; font: 600 12px/1 'Manrope', sans-serif; color: #fff; padding: 7px 14px; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; transition: background .15s, border-color .15s; } .promo-bar__inner:hover .promo-bar__cta { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.7); } .promo-bar__close { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center; font: 600 12px/1 'Manrope', sans-serif; transition: background .15s; z-index: 2; } .promo-bar__close:hover { background: rgba(255,255,255,.28); } /* Marquee только в мобиле */ .promo-bar__marquee { display: none; } /* ============================================================ MOBILE (≤820px) - меняем .header c position:fixed на sticky, чтобы бар в flow наверху был виден, а потом header плавно занял его место. - body padding-top убираем — sticky сам занимает место в потоке. - шрифт бара чуть крупнее (13px вместо 12px на marquee). ============================================================ */ @media (max-width: 820px) { /* HEADER scroll-fix через sticky (вместо fixed) */ .header { position: sticky !important; left: auto !important; right: auto !important; top: 0 !important; } /* body padding-top больше не нужен — sticky-header занимает место сам */ body { padding-top: 0 !important; } .promo-bar__inner { display: block; height: 38px; padding: 0 36px 0 0; position: relative; overflow: hidden; } .promo-bar__inner::after { content: ""; position: absolute; top: 0; right: 0; width: 36px; height: 100%; background: linear-gradient(90deg, transparent, #641520); pointer-events: none; z-index: 1; } .promo-bar__text { display: none; } .promo-bar__cta { display: none; } .promo-bar__inner > .promo-bar__badge { display: none; } .promo-bar__close { right: 6px; width: 24px; height: 24px; font-size: 12px; } .promo-bar__marquee { display: flex; align-items: center; height: 100%; width: max-content; animation: promoMarquee 28s linear infinite; will-change: transform; /* GPU-layer заранее, без джиттера на reset */ backface-visibility: hidden; } .promo-bar__marquee-item { flex-shrink: 0; /* запрет округления ширины — обе копии 1:1 */ display: inline-flex; align-items: center; gap: 10px; padding: 0; /* зазор переехал в разделитель внутри потока */ font: 500 13.5px/1 'Manrope', sans-serif; color: #fff; white-space: nowrap; } .promo-bar__marquee-item .promo-bar__badge { font-size: 9px; padding: 5px 8px; } .promo-bar__marquee-item b { font-weight: 700; } .promo-bar__marquee-dot { opacity: .5; font-size: 11px; padding: 0 14px; /* зазор между повторами читается как разделитель */ } @keyframes promoMarquee { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-50%, 0, 0); } } }