не трогает lazySizes.
*/
.model-range-hero {
line-height: 0;
background: #0a0a0a;
overflow: hidden;
}
.model-range-hero__pane {
width: 100%;
background-color: #0a0a0a;
background-repeat: no-repeat;
box-sizing: border-box;
}
.model-range-hero__pane--desktop {
display: none;
}
.model-range-hero__pane--mobile {
display: block;
aspect-ratio: 3 / 1;
max-height: min(48vh, 520px);
margin: 0 auto;
background-size: contain;
background-position: center top;
}
@media (min-width: 992px) {
.model-range-hero {
width: 100%;
height: 200px;
}
.model-range-hero__pane--desktop {
display: block !important;
height: 100%;
min-height: 200px;
background-size: contain;
background-position: left center;
}
.model-range-hero__pane--mobile {
display: none !important;
}
}
@media (max-width: 991px) {
.model-range-hero {
width: 100%;
height: auto;
}
.model-range-hero__pane--desktop {
display: none !important;
}
}
/* Светлая зона как у каталога: фон на .wrapper_inner через model-range/.section.php */
.model-range-page {
--model-range-accent: #000;
--model-range-tabs-sticky-offset: 0px;
--model-range-content-max: 1200px;
padding: 0 0 40px;
max-width: var(--model-range-content-max);
margin: 0 auto;
color: #333;
background: transparent;
}
.model-range-page:not(:has(.model-range-page__tabs-bleed)) {
padding-top: 16px;
}
.model-range-page__tabs-bleed {
position: sticky;
top: var(--model-range-tabs-sticky-offset);
z-index: 20;
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
margin-top: 0;
margin-bottom: 24px;
background-color: #000 !important;
background-image: none !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
box-sizing: border-box;
/* выравнивание с колонкой .model-range-page (тот же max-width) */
padding-left: max(16px, calc(50vw - var(--model-range-content-max) / 2));
padding-right: max(16px, calc(50vw - var(--model-range-content-max) / 2));
}
.model-range-page__tabs-inner {
max-width: var(--model-range-content-max);
margin: 0;
padding: 0;
width: 100%;
box-sizing: border-box;
}
.model-range-page__tabs-wrap {
padding: 10px 0;
margin: 0;
background: none !important;
background-color: transparent !important;
box-shadow: none !important;
}
.model-range-page__tabs {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 8px;
margin: 0;
padding: 0;
background: none !important;
background-color: transparent !important;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.55) rgba(255, 255, 255, 0.12);
scroll-snap-type: x proximity;
}
@media (min-width: 992px) {
.model-range-page__tabs {
gap: 30px;
}
}
@media (max-width: 991px) {
.model-range-page__tabs {
scrollbar-width: none;
-ms-overflow-style: none;
}
.model-range-page__tabs::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
}
.model-range-page__tab {
flex: 0 0 auto;
scroll-snap-align: start;
display: inline-block;
padding: 4px 14px;
margin: 0;
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.05em;
text-transform: uppercase;
text-decoration: none;
color: #fff;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.95);
border-radius: 6px;
white-space: nowrap;
cursor: pointer;
box-shadow: none;
transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
/* Активный по hash визуально как остальные (класс для скрипта) */
.model-range-page__tabs .model-range-page__tab.model-range-page__tab--active {
color: #fff;
font-weight: 500;
background: transparent;
border-color: rgba(255, 255, 255, 0.95);
}
.model-range-page__tabs .model-range-page__tab:hover {
color: #fff;
background: rgba(255, 255, 255, 0.1);
border-color: #fff;
}
.model-range-page__tab:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.85);
outline-offset: 2px;
}
/* Как у каталога: body.theme-dark .wraps--white#content даёт #fff (template_styles.css) */
.wrapper_inner.model-range-light-bg {
background-color: #fff !important;
color: #333;
}
.wrapper_inner.model-range-light-bg .middle > .container {
padding-top: 0;
}
.wrapper_inner.model-range-light-bg .topic__heading h1,
.wrapper_inner.model-range-light-bg #pagetitle {
color: #222 !important;
}
.wrapper_inner.model-range-light-bg .breadcrumbs a span,
.wrapper_inner.model-range-light-bg .breadcrumbs__item a,
.wrapper_inner.model-range-light-bg #navigation .breadcrumbs a {
color: #666 !important;
}
.wrapper_inner.model-range-light-bg .breadcrumbs a:hover span,
.wrapper_inner.model-range-light-bg .breadcrumbs__item a:hover {
color: #111 !important;
}
.wrapper_inner.model-range-light-bg .breadcrumbs__separator {
color: #aaa;
}
.model-range-page__msg {
text-align: center;
padding: 40px 16px;
color: #666;
}
.model-range-page__section {
margin-bottom: 56px;
scroll-margin-top: calc(88px + var(--model-range-tabs-sticky-offset));
}
.model-range-page__section:last-child {
margin-bottom: 0;
}
.model-range-page__heading {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 10px;
font-size: 1.35rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
margin: 0 0 28px;
color: #222;
}
.model-range-page__icon-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
color: var(--model-range-accent);
/* чуть ближе к тексту заголовка */
margin-left: -4px;
}
.model-range-page__icon {
display: flex;
align-items: center;
justify-content: center;
}
.model-range-page__icon svg {
display: block;
width: 32px;
height: 32px;
max-width: 32px;
max-height: 32px;
flex-shrink: 0;
object-fit: contain;
}
/* раньше использовался
![]()
— тема подменяла src на lazy; inline svg не трогает */
.model-range-page__icon-img {
display: block;
width: 32px;
height: 32px;
object-fit: contain;
}
/* До правки на 1200px было repeat(8) + auto-fill с мелким minmax — карточки сжимались (7–8 в ряд). Нужно 4 в ряд на десктопе. */
.model-range-page__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px 12px;
}
@media (min-width: 576px) {
.model-range-page__grid {
gap: 22px 14px;
}
}
@media (min-width: 992px) {
.model-range-page__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 32px 24px;
}
}
.model-range-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
text-decoration: none;
color: #333;
transition: color 0.2s ease, transform 0.28s ease, box-shadow 0.28s ease, background-color 0.28s ease;
}
.model-range-card:hover {
color: #111;
}
@media (hover: hover) and (min-width: 992px) {
.model-range-card {
padding: 10px 6px 12px;
border-radius: 8px;
}
.model-range-card:hover {
transform: translateY(-5px);
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.09);
background-color: rgba(0, 0, 0, 0.02);
}
.model-range-card:active {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
}
}
@media (hover: hover) and (min-width: 992px) and (prefers-reduced-motion: reduce) {
.model-range-card:hover,
.model-range-card:active {
transform: none;
}
}
.model-range-card__img-wrap {
display: block;
width: 100%;
margin-bottom: 8px;
min-height: 0;
background: transparent;
overflow: visible;
}
.model-range-card__img {
display: block;
max-width: 100%;
height: auto;
max-height: 140px;
object-fit: contain;
margin: 0 auto;
transition: opacity 0.25s ease;
}
@media (min-width: 992px) {
.model-range-card__img {
max-height: 220px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.model-range-card__img {
max-height: 180px;
}
}
.model-range-card__img.lazyload,
.model-range-card__img.lazyloading {
opacity: 0.92;
}
.model-range-card__img.lazyloaded {
opacity: 1;
}
.model-range-card__name {
font-weight: 500;
font-size: 0.82rem;
line-height: 1.35;
letter-spacing: 0.01em;
margin-bottom: 4px;
color: #222;
}
.model-range-card__deco {
display: block;
width: 100%;
max-width: 56px;
height: 1px;
margin: 6px auto 8px;
flex-shrink: 0;
border: none;
border-radius: 0;
background: var(--model-range-accent);
}
.model-range-card__price {
font-size: 0.82rem;
line-height: 1.35;
color: #666;
}
.model-range-card__price * {
color: inherit;
}
.model-range-card__soon {
font-size: 0.82rem;
color: #666;
font-style: italic;
}
@media (max-width: 767px) {
.model-range-page__heading {
font-size: 1.1rem;
}
.model-range-card__img {
max-height: 160px;
}
}
/* End */
/* Start:/local/templates/aspro_max/css/bonus-system.min.css?17848172221535*/
.bonus-system-block,.bonus_item_cart,.lt_cart_bonus_all{font-size:.8rem;line-height:1rem;position:relative;padding:4px 0 0 14px;width:max-content}.bonus-system-block:empty,.bonus_item_cart:empty,.lt_cart_bonus_all:empty{display:none}.bonus-system-block:after,.bonus_item_cart:after,.lt_cart_bonus_all:after{content:'';display:block;position:absolute;left:0;top:3px;bottom:0;width:11px;background:url(/local/templates/aspro_max/css/../images/svg/bonus_icon.svg) center no-repeat}.catalog_item.big .bonus-system-block{color:#fff}.catalog_item.big .bonus-system-block:not(:empty):after{background:url(/local/templates/aspro_max/css/../images/svg/bonus_icon_white.svg) center no-repeat}.services_buy_block .bonus-system-block{margin-left:9px}.body-info__bottom .sale_block~.bonus-system-block{margin-top:5px}.prices-services-detail .bonus-system-block{margin-left:8px}.bonus_item_cart{margin-bottom:5px}.basket_fly .items_wrap .bonus-system-block,.basket_hover_block .bonus-system-block,.lt_cart_bonus_all{margin-left:auto}#bx-soa-order .bx-soa-cart-total .bx-soa-cart-total-line [id^=bonus]>span{background:var(--card_bg_black);position:relative;z-index:1}.bx-soa-section-content.lt_bonus_cont_success{background-color:var(--black_bg_black);padding-top:26px}.bonus_comment_min_max{color:var(--white_text_black)}#bonus_payment_block .bx-soa-coupon-input.lt_no_arrow:before{display:none}#bonus_payment_block #bonus_payfield_block .bx-soa-coupon-input{display:inline-block;vertical-align:baseline;overflow:visible}#bonus_payment_block #bonus_payfield_block .bx-soa-coupon-input input{margin-bottom:10px}
/* End */
/* Start:/local/templates/aspro_max/css/animation/animation_ext.css?17848172224934*/
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
@-webkit-keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
@keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
.zoomIn {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
}
.transition{
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
transition: all ease 0.3s;
}
.animated.duration03{
-webkit-animation-duration: 0.3s;
-moz-animation-duration: 0.3s;
-o-animation-duration: 0.3s;
animation-duration: 0.3s;
}
.animated.duration04{
-webkit-animation-duration: 0.4s;
-moz-animation-duration: 0.4s;
-o-animation-duration: 0.4s;
animation-duration: 0.4s;
}
.animated.duration05{
-webkit-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
animation-duration: 0.5s;
}
.animated.duration06{
-webkit-animation-duration: 0.6s;
-moz-animation-duration: 0.6s;
-o-animation-duration: 0.6s;
animation-duration: 0.6s;
}
.animated.duration07{
-webkit-animation-duration: 0.7s;
-moz-animation-duration: 0.7s;
-o-animation-duration: 0.7s;
animation-duration: 0.7s;
}
.animated.duration08{
-webkit-animation-duration: 0.8s;
-moz-animation-duration: 0.8s;
-o-animation-duration: 0.8s;
animation-duration: 0.8s;
}
.animated.duration09{
-webkit-animation-duration: 0.9s;
-moz-animation-duration: 0.9s;
-o-animation-duration: 0.9s;
animation-duration: 0.9s;
}
.animated.duration10{
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
}
.delay01{
-webkit-animation-delay: 0.1s;
-moz-animation-delay: 0.1s;
-o-animation-delay: 0.1s;
animation-delay: 0.1s;}
.delay03{
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
-o-animation-delay: 0.3s;
animation-delay: 0.3s;}
.delay05{
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
-o-animation-delay: 0.5s;
animation-delay: 0.5s;}
.delay055{
-webkit-animation-delay: 0.55s;
-moz-animation-delay: 0.55s;
-o-animation-delay: 0.55s;
animation-delay: 0.55s;}
.delay06{
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
-o-animation-delay: 0.6s;
animation-delay: 0.6s;}
.delay065{
-webkit-animation-delay: 0.65s;
-moz-animation-delay: 0.65s;
-o-animation-delay: 0.65s;
animation-delay: 0.65s;}
.delay07{
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
-o-animation-delay: 0.7s;
animation-delay: 0.7s;}
.delay08{
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
-o-animation-delay: 0.8s;
animation-delay: 0.8s;}
.delay09{
-webkit-animation-delay: 0.9s;
-moz-animation-delay: 0.9s;
-o-animation-delay: 0.9s;
animation-delay: 0.9s;}
.delay11,.delay011{
-webkit-animation-delay: 1.1s;
-moz-animation-delay: 1.1s;
-o-animation-delay: 1.1s;
animation-delay: 1.1s;}
.delay12, .delay012{
-webkit-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
-o-animation-delay: 1.2s;
animation-delay: 1.2s;}
.delay13,.delay013{
-webkit-animation-delay: 1.3s;
-moz-animation-delay: 1.3s;
-o-animation-delay: 1.3s;
animation-delay: 1.3s;}
.delay15, .delay015{
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
-o-animation-delay: 1.5s;
animation-delay: 1.5s;}
.delay17, .delay017{
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
-o-animation-delay: 1.5s;
animation-delay: 1.5s;}
.delay19, .delay019{
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
-o-animation-delay: 1.5s;
animation-delay: 1.5s;}
.delay21, .delay021{
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
-o-animation-delay: 1.5s;
animation-delay: 1.5s;}
@-webkit-keyframes toggle_opacity{
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes toggle_opacity{
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes shine {
100% {
left: 125%;
}
}
@keyframes shine {
100% {
left: 125%;
}
}
@-webkit-keyframes flash {
0% {
opacity: .55;
}
100% {
opacity: 1;
}
}
@keyframes flash {
0% {
opacity: .55;
}
100% {
opacity: 1;
}
}
/* WebKit Opera */
@-webkit-keyframes spinner{
from{
-webkit-transform:rotate(0deg);
}
to{
-webkit-transform:rotate(360deg);
}
}
/* Other */
@keyframes spinner{
from{
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
transform:rotate(0deg);
}
to{
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}
}
/* End */
/* /local/templates/aspro_max/components/bitrix/catalog.section/catalog_model_range/style.css?17848172221916 */
/* /local/components/asteq/model.range/templates/.default/style.css?17848172219059 */
/* /local/templates/aspro_max/css/bonus-system.min.css?17848172221535 */
/* /local/templates/aspro_max/css/animation/animation_ext.css?17848172224934 */