/* ============================================================ HOME CARDS UNIFIED V55 Merch / Franchise / Categories ============================================================ */ /* ------------------------------------------------------------ КАТЕГОРИИ — базовая плавность ------------------------------------------------------------ */ body.site-home-modern .home-category-card-v6{ position:relative!important; transform:translate3d(0,0,0)!important; transition: transform .36s cubic-bezier(.2,.8,.2,1), border-color .32s ease, box-shadow .36s ease!important; will-change:transform; } /* * Картинка двигается отдельно от самой карточки. * Получается тот же живой эффект, что у Мерча. */ body.site-home-modern .home-category-card-v6 .home-category-media-v6, body.site-home-modern .home-category-card-v6 .home-category-media-v6 img, body.site-home-modern .home-category-card-v6 .home-category-theme-image-v534{ transition: transform .70s cubic-bezier(.2,.8,.2,1), filter .42s ease!important; } /* ------------------------------------------------------------ КАТЕГОРИИ — HOVER ------------------------------------------------------------ */ @media (hover:hover) and (pointer:fine){ body.site-home-modern .home-category-card-v6:hover{ transform: translate3d(0,-4px,0) scale(1.012)!important; box-shadow: 0 18px 42px rgba(0,0,0,.16)!important; } /* * Небольшое увеличение изображения. * Не агрессивное — как на Мерче. */ body.site-home-modern .home-category-card-v6:hover .home-category-media-v6 img, body.site-home-modern .home-category-card-v6:hover .home-category-theme-image-v534{ transform:scale(1.045)!important; filter: saturate(1.04) contrast(1.035)!important; } } /* ------------------------------------------------------------ МЯГКИЙ БЛИК НА КАТЕГОРИЯХ ------------------------------------------------------------ */ body.site-home-modern .home-category-card-v6::after{ content:""!important; display:block!important; position:absolute!important; z-index:12!important; inset:0!important; pointer-events:none!important; border-radius:inherit!important; background: linear-gradient( 112deg, transparent 12%, rgba(255,255,255,.00) 28%, rgba(255,255,255,.14) 43%, rgba(255,255,255,.025) 51%, transparent 68% )!important; background-size:230% 100%!important; background-position:130% 0!important; opacity:0!important; transition: opacity .30s ease, background-position .70s cubic-bezier(.2,.8,.2,1)!important; } @media (hover:hover) and (pointer:fine){ body.site-home-modern .home-category-card-v6:hover::after{ opacity:.55!important; background-position:-115% 0!important; } } /* * Стрелка перехода в категорию должна быть выше блика. */ body.site-home-modern .home-category-card-v6 .sd-category-link-arrow-v548, body.site-home-modern .home-category-card-v6 .home-category-arrow-v6, body.site-home-modern .home-category-card-v6 > i{ z-index:30!important; } /* ============================================================ СВЕТЛАЯ ТЕМА — ЕДИНАЯ ОБВОДКА ============================================================ */ /* * Мерч + Франшиза. * * В свежем архиве оба блока используют * .home-feature-tile-v5, поэтому делаем их одинаковыми. */ html[data-site-theme="light"] body.site-home-modern .home-feature-tile-v5, body.site-home-modern.site-theme-light .home-feature-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; } /* * Категории — точно такая же визуальная логика. */ html[data-site-theme="light"] body.site-home-modern .home-category-card-v6, body.site-home-modern.site-theme-light .home-category-card-v6{ border: 1px solid rgba(18,18,18,.46)!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.58), 0 12px 26px rgba(0,0,0,.055)!important; } /* ------------------------------------------------------------ HOVER В СВЕТЛОЙ ТЕМЕ ------------------------------------------------------------ */ @media (hover:hover) and (pointer:fine){ html[data-site-theme="light"] body.site-home-modern .home-feature-tile-v5:hover, body.site-home-modern.site-theme-light .home-feature-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; } html[data-site-theme="light"] body.site-home-modern .home-category-card-v6:hover, body.site-home-modern.site-theme-light .home-category-card-v6:hover{ border-color: rgba(15,15,15,.72)!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 20px 42px rgba(0,0,0,.12)!important; } } /* ============================================================ ФРАНШИЗА С ФОТО — ДИНАМИКА КАК У МЕРЧА ============================================================ */ body.site-home-modern .home-franchise-theme-image-v52{ transition: transform .70s cubic-bezier(.2,.8,.2,1), filter .42s ease!important; transform:scale(1.01)!important; will-change:transform; } @media (hover:hover) and (pointer:fine){ 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; } } /* ============================================================ САМИ МЕРЧ / ФРАНШИЗА — одинаковая скорость движения ============================================================ */ body.site-home-modern .home-feature-tile-v5{ transition: transform .36s cubic-bezier(.2,.8,.2,1), border-color .32s ease, box-shadow .36s ease!important; } /* ============================================================ МОБИЛЬНЫЕ На touch никаких странных зависших hover/scale. ============================================================ */ @media (hover:none){ body.site-home-modern .home-category-card-v6, body.site-home-modern .home-feature-tile-v5{ transform:none!important; } } /* Системная настройка уменьшения движения */ @media (prefers-reduced-motion:reduce){ body.site-home-modern .home-category-card-v6, body.site-home-modern .home-category-media-v6, body.site-home-modern .home-category-media-v6 img, body.site-home-modern .home-category-theme-image-v534, body.site-home-modern .home-franchise-theme-image-v52{ transition:none!important; } body.site-home-modern .home-category-card-v6::after{ transition:none!important; } }