Премия
Доктор Рядом
Победитель премии 2ГИС
2025 • 2026
/* =================================================== CARD PHYSIO WHITE (вариант на основе card-physio v4) Отличия от базовой версии: - белый фон под картинкой (вместо transparent) - убрано увеличение (scale) картинки при hover =================================================== */ .card-physio-white { position: relative; /* обязательно: containing block для halo-подсветки ниже */ isolation: isolate; --card-r: 22px; /* единый радиус скругления для всей карточки */ /* Важно: сам uKit вешает на этот же элемент класс .lazy-section, который включает content-visibility:auto (родная лени-загрузка темы). Он неявно добавляет contain:paint — это обрезает наш halo-эффект, выходящий за пределы карточки. Отменяем явно. */ content-visibility: visible !important; contain-intrinsic-size: auto !important; } /* ========================================== Голубая halo-подсветка вокруг всей карточки при hover ========================================== */ .card-physio-white::after { content: ""; position: absolute; inset: -20px; z-index: -1; border-radius: calc(var(--card-r) + 10px); background: radial-gradient(closest-side, rgba(64, 190, 255, 0.85), rgba(110, 120, 255, 0.5) 65%, transparent 85%); filter: blur(22px); opacity: 0; pointer-events: none; transition: opacity 0.4s ease; } .card-physio-white:hover::after, .card-physio-white:focus-within::after { opacity: 1; } .card-physio-white .ul-goods-view-item { position: relative; overflow: hidden; background: linear-gradient(180deg, #ffffff, #f8fbff); border: 1px solid rgba(56, 138, 255, 0.1); border-radius: var(--card-r); box-shadow: 0 8px 24px rgba(18, 56, 108, 0.06); transition: transform 0.35s ease, box-shadow 0.35s ease; } .card-physio-white:hover .ul-goods-view-item, .card-physio-white:focus-within .ul-goods-view-item { will-change: transform; /* держим GPU-слой только пока реально анимируем */ transform: translateY(-4px); box-shadow: 0 12px 28px rgba(18, 56, 108, 0.10); } /* ========================================== Светящийся контур карточки ========================================== */ .card-physio-white .ul-goods-view-item::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: var(--card-r); padding: 1px; background: linear-gradient(135deg, #54d9ff, #7d87ff, #54d9ff); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } .card-physio-white:hover .ul-goods-view-item::before { opacity: 1; } /* ========================================== Картинка/иконка ========================================== */ .card-physio-white .ul-goods-view-image-wrap, .card-physio-white .ul-goods-view-image-wrap2 { position: relative; overflow: hidden; contain: paint; border-radius: var(--card-r) var(--card-r) 0 0; background: #ffffff !important; /* фон под картинкой теперь белый */ isolation: isolate; } .card-physio-white .ul-goods-view-image { position: relative; z-index: 2; /* ВАЖНО: не используем шорткод "background" — он сбрасывает background-image (который проставляет JS инлайн-стилем после загрузки srcset-картинки) в none, из-за чего иконка пропадала. Задаём только нужные подсвойства по отдельности. */ background-color: #ffffff !important; /* белый фон и на самой картинке */ background-position: center !important; background-size: 112% !important; background-repeat: no-repeat !important; /* transition/transform на hover убраны — увеличения больше нет */ } .card-physio-white .ul-goods-view-image-tag { display: none !important; } /* ========================================== Текст ========================================== */ .card-physio-white .ul-goods-view-details { position: relative; z-index: 3; padding-top: 14px; } .card-physio-white .ul-goods-view-title { padding: 0 24px !important; } .card-physio-white .ul-goods-view-descr { position: relative; z-index: 3; padding: 0 24px 28px; } .card-physio-white .ul-goods-view-title, .card-physio-white .ul-goods-view-title * { position: static !important; transform: none !important; z-index: 3; font-size: clamp(22px, 2vw, 28px); line-height: 1.2; font-weight: 700; color: #17385d !important; -webkit-text-fill-color: #17385d !important; background: none !important; margin: 0 0 2px !important; min-height: 2.4em; transition: color 0.3s ease; } .card-physio-white:hover .ul-goods-view-title, .card-physio-white:hover .ul-goods-view-title * { color: #2b7dff !important; -webkit-text-fill-color: #2b7dff !important; } .card-physio-white .note, .card-physio-white .js-goods-descr { position: relative; z-index: 3; font-size: 15px; line-height: 1.7; color: #61718b !important; } /* ========================================== Адаптив (Mobile) ========================================== */ @media (max-width: 768px) { .card-physio-white .ul-goods-view-title, .card-physio-white .ul-goods-view-title * { font-size: 24px; } .card-physio-white .ul-goods-view-descr { padding: 12px 20px 24px; } } /* ========================================== Отключение анимаций (Reduced motion) ========================================== */ @media (prefers-reduced-motion: reduce) { .card-physio-white *, .card-physio-white *::before, .card-physio-white *::after { transition: none !important; animation: none !important; } }