/* ============================================================ SD MERCH SAME AS FRANCHISE V125 Причина резкости Мерча: theme-images-v53.css: .sd-theme-img-v53 { transition:none!important; } и: .home-feature-tile-v5 > .sd-theme-img-v53 { transform:none!important; } Франшиза позже получает: transition: transform .70s cubic-bezier(.2,.8,.2,1) transform: scale(1.01) hover scale(1.055) Здесь Мерчу задаём ТОЧНО ту же механику. ============================================================ */ /* ============================================================ 1. ОБЕ КАРТОЧКИ — ОДИНАКОВАЯ ДИНАМИКА КОРПУСА ============================================================ */ body.site-home-modern .home-merch-tile-v5, body.site-home-modern .home-franchise-tile-v5{ transition: transform .36s cubic-bezier(.2,.8,.2,1), border-color .32s ease, box-shadow .36s ease !important; will-change: transform; } /* ============================================================ 2. КАРТИНКА МЕРЧА ТОЧНО КАК КАРТИНКА ФРАНШИЗЫ ============================================================ */ body.site-home-modern .home-merch-tile-v5 > .sd-theme-img-v53{ position:absolute !important; z-index:0 !important; inset:0 !important; display:block !important; width:100% !important; height:100% !important; margin:0 !important; padding:0 !important; object-fit:cover !important; object-position:center !important; /* * Ровно старт Франшизы. */ transform: scale(1.01) !important; /* * Ровно её плавность. */ transition: transform .70s cubic-bezier(.2,.8,.2,1), filter .42s ease !important; filter: none !important; will-change: transform; pointer-events: none !important; } /* ============================================================ 3. FRANCHISE Фиксируем те же значения явно, чтобы Мерч и Франшиза точно не разошлись из-за старых CSS ниже/выше по каскаду. ============================================================ */ body.site-home-modern .home-franchise-tile-v5 .home-franchise-theme-image-v52{ transform: scale(1.01) !important; transition: transform .70s cubic-bezier(.2,.8,.2,1), filter .42s ease !important; will-change: transform; } /* ============================================================ 4. HOVER КАРТИНКИ — ОДИН В ОДИН ============================================================ */ @media (hover:hover) and (pointer:fine){ body.site-home-modern .home-merch-tile-v5:hover > .sd-theme-img-v53, body.site-home-modern .home-franchise-tile-v5:hover .home-franchise-theme-image-v52{ transform: scale(1.055) !important; filter: saturate(1.025) contrast(1.025) !important; } } /* ============================================================ 5. HOVER САМОЙ КАРТОЧКИ Одинаковое движение. ============================================================ */ @media (hover:hover) and (pointer:fine){ body.site-home-modern .home-merch-tile-v5:hover, body.site-home-modern .home-franchise-tile-v5:hover{ transform: translate3d(0,-4px,0) scale(1.012) !important; } } /* ============================================================ 6. DARK — ОДИНАКОВАЯ ОБВОДКА ============================================================ */ html[data-site-theme="dark"] body.site-home-modern .home-merch-tile-v5, html[data-site-theme="dark"] body.site-home-modern .home-franchise-tile-v5, body.site-home-modern.site-theme-dark .home-merch-tile-v5, body.site-home-modern.site-theme-dark .home-franchise-tile-v5{ border: 1px solid rgba(255,255,255,.15) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 18px 42px rgba(0,0,0,.22) !important; } @media (hover:hover) and (pointer:fine){ html[data-site-theme="dark"] body.site-home-modern .home-merch-tile-v5:hover, html[data-site-theme="dark"] body.site-home-modern .home-franchise-tile-v5:hover, body.site-home-modern.site-theme-dark .home-merch-tile-v5:hover, body.site-home-modern.site-theme-dark .home-franchise-tile-v5:hover{ border-color: rgba(255,255,255,.34) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 24px 56px rgba(0,0,0,.32), 0 0 24px rgba(255,255,255,.045) !important; } } /* ============================================================ 7. LIGHT — ОДИНАКОВАЯ ОБВОДКА ============================================================ */ html[data-site-theme="light"] body.site-home-modern .home-merch-tile-v5, html[data-site-theme="light"] body.site-home-modern .home-franchise-tile-v5, body.site-home-modern.site-theme-light .home-merch-tile-v5, body.site-home-modern.site-theme-light .home-franchise-tile-v5{ border: 1px solid rgba(18,18,18,.46) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 14px 32px rgba(0,0,0,.075) !important; } @media (hover:hover) and (pointer:fine){ html[data-site-theme="light"] body.site-home-modern .home-merch-tile-v5:hover, html[data-site-theme="light"] body.site-home-modern .home-franchise-tile-v5:hover, body.site-home-modern.site-theme-light .home-merch-tile-v5:hover, body.site-home-modern.site-theme-light .home-franchise-tile-v5:hover{ border-color: rgba(15,15,15,.72) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 22px 48px rgba(0,0,0,.14) !important; } } /* ============================================================ 8. НЕ НУЖНЫ РЕЗКИЕ СТАРЫЕ MERCH OVERRIDE ============================================================ */ body.site-home-modern .home-merch-tile-v5:hover > img{ /* * Старый home-feature-pair-v5.css ставил scale(1.065). * Теперь он заменён на franchise 1.055 выше. */ transition: transform .70s cubic-bezier(.2,.8,.2,1), filter .42s ease !important; } /* ============================================================ 9. TOUCH Никакого зависшего hover. ============================================================ */ @media (hover:none){ body.site-home-modern .home-merch-tile-v5, body.site-home-modern .home-franchise-tile-v5{ transform: none !important; } body.site-home-modern .home-merch-tile-v5 > .sd-theme-img-v53, body.site-home-modern .home-franchise-tile-v5 .home-franchise-theme-image-v52{ transform: scale(1.01) !important; } } /* ============================================================ 10. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion:reduce){ body.site-home-modern .home-merch-tile-v5, body.site-home-modern .home-franchise-tile-v5, body.site-home-modern .home-merch-tile-v5 > .sd-theme-img-v53, body.site-home-modern .home-franchise-theme-image-v52{ transition: none !important; } }