/* ===================================================================== Логотипы клиентов — slick-карусель Ноды: 623:143–623:176. Высота ленты 128px, размеры каждого логотипа заданы индивидуально в соответствии с макетом. ===================================================================== */ .clients { --clients-dark: #262626; padding-top: 90px; /* карточки заканчиваются на 925, заголовок на 1015 */ overflow: hidden; /* лента шире вьюпорта — гасим горизонтальный скролл */ font-family: Montserrat, "Proxima Nova", Arial, Helvetica, sans-serif; } .clients *, .clients *::before, .clients *::after { box-sizing: border-box; } .clients__title { margin: 0 0 40px; font-size: 30px; font-weight: 700; line-height: 1.35; text-align: center; text-transform: uppercase; color: var(--clients-dark); } .clients__track { /* ширина ленты ограничена 1400px и отцентрована; slick строит .slick-list внутри этого контейнера, поэтому обрезка идёт по 1400px, а не по краю окна */ max-width: 1400px; margin: 0 auto; overflow: hidden; /* чтобы до инициализации slick лента тоже обрезалась по 1400px */ /* до инициализации slick лента уже выглядит как ряд, без «простыни» */ display: flex; align-items: center; flex-wrap: nowrap; } .clients__track.slick-initialized { display: block; } .clients-logo { display: flex !important; /* перебиваем inline-стили slick-slide */ align-items: center; justify-content: center; flex: 0 0 auto; height: 128px; padding: 0 23.415px; /* расстояние между изображениями ≈ 46.83px */ outline: none; } .clients-logo img { display: block; width: var(--logo-width); height: var(--logo-height); max-width: none; object-fit: contain; /* логотипы в макете обесцвечены; чтобы включить цвет — уберите фильтр */ filter: grayscale(1); opacity: 0.85; transition: filter 0.25s ease, opacity 0.25s ease; } .clients-logo img.clients-logo__img--mask { filter: brightness(0); opacity: 0.3; } .clients-logo:hover img.clients-logo__img--mask { filter: brightness(0); opacity: 0.65; } .clients-logo:hover img { filter: grayscale(0); opacity: 1; } /* slick при variableWidth опирается на float у слайдов — display:flex на .slick-track ломает расчёт ширины, поэтому здесь только высота */ .clients .slick-slide { height: auto; min-height:164px; } .clients .slick-list { overflow: hidden; } @media (max-width: 1279px) { .clients { padding-top: 70px; } } @media (max-width: 1023px) { .clients { padding-top: 60px; } .clients__title { font-size: 26px; margin-bottom: 32px; } .clients-logo { height: 84px; padding: 0 24px; } .clients-logo img { width: auto; height: 64px; } } @media (max-width: 767px) { .clients { padding-top: 40px; } .clients__title { font-size: 22px; margin-bottom: 24px; } .clients-logo { height: 64px; padding: 0 20px; } .clients-logo img { width: auto; height: 48px; } } /* ===================================================================== Анимация блока --------------------------------------------------------------------- Работает только если на есть класс .anim (его ставит скрипт из blocks/_core/core.js) и класс .is-in на элементе (его ставит IntersectionObserver оттуда же). Без JS контент виден сразу. ===================================================================== */ html.anim .clients__title { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease-out, transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1); } @media (prefers-reduced-motion: reduce) { html.anim .clients__title { opacity: 1; transform: none; animation: none; transition: none; } }