* {
box-sizing: border-box !important;
font-family: var(--main-font);
line-height: 115%;
}
:root {
--main-yellow: #ffd60a;
--dark-grey: #1c1c1c;
--button-grey: #3a3a3a;
--card-grey: #2a2a2a;
--middle-grey: #222;
--main-font: 'Play';
--title-font: 'Tektur';
}
html {
overflow-x: clip;
font-size: 20px;
scroll-behavior: smooth;
scrollbar-gutter: stable;
}
/* .is-android {
backdrop-filter: none;
} */
.is-android dialog::backdrop {
backdrop-filter: none !important;
}
/* @media(max-width: 1920px){
html{
font-size: 18px;
}
} */
body {
font-family: var(--main-font);
color: #fff;
background: var(--dark-grey);
line-height: 115%;
margin: 0 auto;
overflow-x: clip;
}
.container {
max-width: 1490px;
padding: 0 15px;
margin: 0 auto;
width: 100%;
}
section {
margin-bottom: 6.5rem;
}
a {
text-decoration: none;
transition: .3s;
/* color: var(--main-yellow); */
display: inline-block;
}
a,
.country_list li {
cursor: pointer;
-webkit-background-clip: text;
background-clip: text;
background-repeat: no-repeat;
transition: 0.3s ease-out;
background-image: linear-gradient(to right, var(--main-yellow) 45%, #fff 55%);
background-size: 220% 100%;
background-position: 100% 50%;
color: transparent;
/* position: relative; */
}
a.yellow {
background-image: linear-gradient(to right, #fff 45%, var(--main-yellow) 55%);
}
/* a:not(#wpadminbar a, a.pretty-button):hover {
color: var(--main-yellow);
transition: .3s;
} */
a:not(#wpadminbar a, a.pretty-button):hover,
.country_list li:hover {
background-position: 0% 50%;
transition: 0.3s;
color: transparent;
}
button {
font-family: var(--main-font);
cursor: pointer;
font-size: 20px;
}
button:focus-visible,
button:focus {
outline: none;
}
button,
a {
-webkit-tap-highlight-color: transparent;
}
h1 {
margin: 0;
font-size: 2.5rem;
}
.page-title {
margin-bottom: 2.5rem;
}
p {
margin: 0 0 .5rem 0;
}
p:last-child {
margin: 0;
}
p:empty {
margin: 0;
display: none;
}
.empty-styles {
border: none;
background: transparent;
padding: 0;
margin: 0;
}
main {
padding-bottom: 6.5rem;
}
h2 {
font-size: 2rem;
margin: 0 0 2.5rem 0;
line-height: 120%;
}
ol {
list-style-type: none;
counter-reset: num;
margin: 15px 0;
padding: 0 0 0 25px;
}
ol li {
position: relative;
margin: 0 0 0 0;
padding: 0 0 15px 0;
}
ol li:before {
content: counter(num) '.';
counter-increment: num;
display: inline-block;
position: absolute;
top: 0px;
left: -26px;
width: 20px;
color: var(--main-yellow);
text-align: right;
font-weight: 700;
font-size: 20px;
}
/* Хлебные крошки */
.breadcrumbs-home {
display: flex;
position: relative;
width: 1.75rem;
height: 1.5rem;
color: transparent;
overflow: hidden;
background-position: center;
background-size: contain;
transition: none;
background-repeat: no-repeat;
background-color: var(--dark-grey);
background-image: url('data:image/svg+xml,');
}
.breadcrumbs-home:hover {
background-image: url('data:image/svg+xml,');
}
#breadcrumbs span {
display: flex;
}
#breadcrumbs>span {
gap: 10px;
display: flex;
align-items: center;
}
#breadcrumbs {
margin: 1.75rem 0 3.5rem 0;
}
.breadcrumbs-separator {
width: 2px;
height: 20px;
background: #fff;
}
.page-content ul,
.banner__desc ul {
padding-left: 0px;
list-style: none;
}
.page-content ul>li,
.banner__desc ul>li {
position: relative;
padding-left: 15px;
}
.page-content ul>li::before,
.banner__desc ul>li::before {
position: absolute;
content: '';
border-radius: 1px;
width: 5px;
height: 5px;
background: #fff;
left: 0;
top: 10px;
}
.pretty-button {
position: relative;
overflow: hidden;
border: none;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
border-radius: 5px;
padding: 0.6rem 1.1rem;
background: var(--button-grey);
background-size: 400%;
color: #fff;
cursor: pointer;
display: flex;
justify-content: center;
width: fit-content;
transition: .3s;
align-items: center;
}
.pretty-button>span {
position: relative;
z-index: 1;
transition: .3s;
text-align: center;
display: flex;
flex-wrap: wrap;
font-size: 1rem;
}
.pretty-button::before {
content: '';
position: absolute;
inset: 0;
margin: auto;
width: 150px;
height: 150px;
border-radius: 50%;
scale: 0;
z-index: 0;
background-color: var(--main-yellow);
transition: all 0.6s cubic-bezier(.23, 1, .32, 1);
}
.pretty-button--yellow {
background: var(--main-yellow);
}
.pretty-button--yellow>span {
color: var(--dark-grey);
font-weight: 700;
}
.pretty-button--yellow::before {
background: #fff;
}
@media (hover: none) and (pointer: coarse) {
.pretty-button::before {
content: none;
}
/* .pretty-button:hover>span {
color: #fff !important;
}
.pretty-button:hover {
border-color: #fff !important;
}
.pretty-button--yellow:hover span {
color: #000 !important;
} */
}
@media(width >=1024px) {
.pretty-button:hover>span {
color: var(--dark-grey);
transition: .3s;
}
.pretty-button:hover::before {
scale: 5;
transition: all 0.8s cubic-bezier(.23, 1, .32, 1);
}
.pretty-button:hover {
border-color: var(--main-yellow);
transition: .3s;
}
.pretty-button--yellow:hover {
border-color: #fff;
transition: .3s;
}
}
.title {
font-family: var(--title-font);
line-height: 85%;
}
.gradient-border {
position: relative;
overflow: hidden;
}
.gradient-border>* {
z-index: 1;
position: relative;
}
.gradient-border {
border: 1px solid transparent;
border-radius: 5px;
border-radius: 5px;
width: 100%;
height: 100%;
z-index: 1;
}
.gradient-border--light {
background: linear-gradient(225deg, var(--button-grey), var(--button-grey))padding-box, conic-gradient(from 200deg at 26.56% 107.7%, hsla(0, 0%, 100%, 0.007) 0%, #ffffff07 5%, #ffffff2b 47%, #505050a6 100%) border-box !important;
}
.gradient-border--middle {
background:
linear-gradient(225deg, var(--middle-grey), var(--middle-grey)) padding-box, conic-gradient(from 200deg at 26.56% 107.7%, hsla(0, 0%, 100%, 0.007) 0%, #ffffff07 5%, #ffffff2b 47%, #505050a6 100%) border-box !important;
}
.gradient-border--dark {
background:
linear-gradient(225deg, var(--dark-grey), var(--dark-grey)) padding-box, conic-gradient(from 200deg at 26.56% 107.7%, hsla(0, 0%, 100%, 0.007) 0%, #ffffff07 5%, #ffffff2b 47%, #505050a6 100%) border-box !important;
}
/* Header */
header {
position: relative;
top: -1px;
z-index: 50;
background: transparent;
}
header.is-sticky {
position: sticky;
top: 0;
animation: headerStickyIn .35s cubic-bezier(0.16, 1, 0.3, 1);
/* background: oklab(0.23 0 0 / 0.8); */
background: var(--dark-grey);
/* backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px); */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
@keyframes headerStickyIn {
from {
opacity: 0;
transform: translateY(-12px);
/* backdrop-filter: blur(0);
-webkit-backdrop-filter: blur(0);
background: oklab(0.23 0 0 / 0); */
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
to {
opacity: 1;
transform: translateY(0);
/* backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
background: oklab(0.23 0 0 / 0.8); */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
}
.header__inner {
gap: 50px;
padding: 25px 0;
grid-template-columns: 1fr auto 1fr;
position: relative;
/* display: grid !important; */
}
.header__menu-list {
gap: 2.25rem;
list-style: none;
padding: 0;
margin: 0;
}
.header__menu-list>li>a {
color: transparent;
}
.header__info-buttons {
gap: 10px;
display: none !important;
}
.header__info-button button {
cursor: pointer;
}
.header__info-phone {
gap: 5px;
}
.header__info-phone a {
/* color: var(--main-yellow); */
font-size: 20px;
}
.header__info-phone button {
font-size: 14px;
text-decoration: dashed;
border-bottom: 2px dashed #fff;
width: fit-content;
color: #fff;
}
.header__info {
gap: 30px;
margin-left: auto;
}
.header__logo img {
transition: .3s;
max-width: 11.25rem;
height: auto;
}
.header__logo:hover img {
filter: drop-shadow(0px 0px 7px var(--main-yellow));
transition: .3s;
}
/* Баннер в шапке */
.marquee {
background-image: url(/wp-content/uploads/2025/12/info-line-1.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
z-index: 1;
}
.marquee__item {
gap: 30px;
display: flex !important;
position: relative;
padding: 7px 15px;
}
.marquee__item a.hidden-link {
width: 100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
opacity: 0;
}
.marquee__item .pretty-button {
z-index: 1;
}
/* Баннер на главной */
.banner {
position: relative;
min-height: 960px;
height: 960px;
top: 0;
margin-top: -5rem;
margin-bottom: 5rem;
}
.banner__slider-img::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(180deg,
rgba(28, 28, 28, 0.95) 0%,
rgba(28, 28, 28, 0.40) 40.43%,
rgba(28, 28, 28, 0.50) 50.74%,
#1C1C1C 100%);
}
.banner__slider-img {
position: absolute;
width: 100%;
height: 100%;
}
.banner__slider-img>div {
width: 100%;
height: 100%;
}
.banner__title {
color: transparent;
-webkit-text-stroke: 1px #fff;
font-size: 3.5rem;
margin: 0;
display: block;
max-width: 49rem;
line-height: 109%;
letter-spacing: 0.03em;
}
.banner__title span {
color: #fff;
-webkit-text-stroke: 0px;
line-height: 109%;
font-family: var(--title-font);
/* display: inline-block; */
}
.banner__container {
height: 100%;
/* padding-top: 7rem;
padding-bottom: 35px; */
}
.banner__content {
height: 100%;
position: relative;
z-index: 1;
gap: 2rem;
padding-top: 7rem;
padding-bottom: 2.5rem;
}
.banner__desc {
max-width: 340px;
font-size: 0.9rem;
position: relative;
overflow: hidden;
}
.banner__desc::before {
position: absolute;
content: '';
border-radius: 1px;
width: 5px;
height: 5px;
background: #fff;
left: 0;
top: 0;
}
.banner__desc p {
padding-top: 15px;
padding-left: 15px;
}
.banner__desc ul {
margin: 0;
position: relative;
}
.banner__desc ul::before {
content: '';
position: absolute;
left: 2px;
height: 200%;
background: #fff;
bottom: calc(100% - 10px);
width: 1px;
}
.banner__slider {
/* position: absolute !important; */
left: 0;
top: 0;
width: 100%;
height: 100%;
/* z-index: -1 !important; */
}
.banner__slider-item img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
left: 0;
top: 0;
}
.banner__content-top {
gap: 25px;
}
.banner__content-top .pretty-button {
backdrop-filter: blur(4px);
background: rgba(255, 255, 255, 0.18);
}
.banner-controls__container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.banner-controls__container>div {
width: 100%;
height: 100%;
}
.banner__controls {
position: absolute;
right: 0;
top: 50%;
transform: translate(0, -50%);
z-index: 2;
}
.slider-button {
width: 2.3rem;
height: 2.3rem;
border-radius: 50px;
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(4px);
border: none;
padding: 0;
display: grid;
place-items: center;
transition: .3s;
opacity: 0;
}
.slider-button.swiper-initialized {
opacity: 1;
}
.slider-button:hover {
background: var(--main-yellow);
transition: .3s;
border-color: transparent;
}
.slider-button svg path {
transition: .3s;
}
.slider-button:hover svg path {
fill: var(--dark-grey);
}
/* .swiper-button-lock{
display: grid !important;
opacity: .5;
pointer-events: none;
} */
.banner__controls:has(.swiper-button-lock) {
display: none;
}
.banner-pagination {
display: flex;
flex-direction: column;
gap: 2px;
position: static !important;
width: fit-content !important;
height: fit-content !important;
}
.swiper-pagination-bullet strong {
width: 0.75rem !important;
height: 0.75rem !important;
background: transparent !important;
outline: 2px solid rgba(255, 255, 255, 0.25);
margin: 0 !important;
border: none;
border-radius: 50%;
transition: .3s;
}
.swiper-pagination-bullet-active strong {
background: var(--main-yellow) !important;
transition: .3s;
}
.swiper-pagination-bullet span {
width: 2px;
height: 30px;
margin-left: 1px;
background: rgba(255, 255, 255, 0.18);
}
.swiper-pagination-bullet {
width: max-content !important;
height: max-content !important;
background: transparent !important;
margin: 0 !important;
border: none;
display: flex !important;
opacity: 1 !important;
flex-direction: column;
align-items: center;
gap: 2px;
}
.swiper-pagination-bullet:first-child::before {
content: '';
width: 2px;
width: 2px;
height: 30px;
margin-left: 1px;
background: rgba(255, 255, 255, 0.18);
}
.banner__video {
width: 17rem;
background: transparent;
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
position: relative;
aspect-ratio: 34 / 19;
height: auto;
border-radius: 5px;
}
.banner__video::before{
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(180deg,
rgba(28, 28, 28, 0.95) 0%,
rgba(28, 28, 28, 0.40) 40.43%,
rgba(28, 28, 28, 0.50) 50.74%,
#1C1C1C 100%);
}
.banner__video img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 5px;
z-index: 0;
}
.banner__video>a {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
gap: 10px;
border: none;
color: #fff;
font-size: 1.2rem;
padding: 0;
margin: 0;
}
.banner__video>a svg circle {
transition: .3s;
}
.banner__video>a svg{
width: 2.75rem;
height: 2.75rem;
}
.banner__video>a svg path {
transition: .3s;
}
.banner__video>a svg stop {
transition: .3s;
}
.banner__video>a:hover svg circle {
fill: var(--main-yellow);
transition: .3s;
}
.banner__video>a:hover svg path {
fill: var(--dark-grey);
transition: .3s;
}
.banner__video>a:hover svg stop {
stop-color: var(--main-yellow);
transition: .3s;
}
/* Категории авто */
.car-country {
margin-bottom: 5rem;
}
.car-country__list {
list-style: none;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem 2.5rem;
padding: 0 0 65px;
margin: 0;
}
.car-country__item {
position: relative;
padding: .75rem 1.25rem;
aspect-ratio: 45 / 19;
overflow: visible;
transition: .3s;
}
.car-country__item:hover {
transition: .3s;
background: linear-gradient(225deg, var(--card-grey), var(--card-grey)) padding-box, conic-gradient(from 200deg at 26.56% 107.7%, hsla(0, 0%, 100%, 0.007) 0%, #ffffff07 5%, #ffffff2b 47%, #505050a6 100%) border-box !important;
}
.car-country__item a {
z-index: 2;
position: static;
}
.car-country__item img {
position: absolute;
right: 0;
bottom: -65px;
z-index: 1;
height: auto;
object-fit: contain;
}
.car-country__item a::before {
content: '';
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 2;
position: absolute;
border-radius: 5px;
}
/* Footer */
footer {
background: var(--dark-grey);
position: relative;
z-index: 10;
}
.footer-top__logo img {
transition: .3s;
height: auto;
max-width: 11rem;
}
.footer-top__logo:hover img {
filter: drop-shadow(0px 0px 7px var(--main-yellow));
transition: .3s;
}
.footer-top {
border-bottom: 1px solid #ffffff33;
padding: 20px 0;
}
.footer-top__contacts {
gap: 60px;
}
.footer-top__contacts-item {
gap: 5px;
}
.footer-main {
padding: 40px 0;
}
.messengers {
list-style: none;
padding: 0;
margin: 0;
gap: 20px;
}
.messengers__item {
width: 1.8rem;
height: 1.8rem;
border-radius: 50%;
position: relative;
}
.messengers__item::before {
content: '';
position: absolute;
border-radius: 50px;
border: 1px solid transparent;
mask-composite: exclude;
background: linear-gradient(var(--dark-grey), var(--dark-grey)) padding-box, radial-gradient(92.18% 99.11% at 26.56% 107.7%, #ffffff 0%, #808080 25%, #ffffff 50%, #808080 100%) border-box;
width: 100%;
height: 100%;
}
.messengers__item svg {
width: .8rem;
height: .8rem;
}
.messengers__item a {
position: relative;
z-index: 1;
}
.footer-center .footer__items {
gap: 1.5rem;
}
.footer-center .footer__items>* {
width: calc(33.3% - 20px);
}
.footer-center {
padding: 2rem 0;
border-bottom: 1px solid #ffffff33;
}
.footer__title {
color: #aaa;
font-size: 1.2rem;
}
.footer__column {
position: relative;
gap: 1.5rem;
}
.footer__column:nth-child(1)::before,
.footer__column:nth-child(2)::before {
content: '';
width: 1px;
height: 100%;
right: -15px;
border-right: 1px solid #fff;
opacity: .2;
position: absolute;
}
.footer__column:nth-child(1) .footer__title {
margin-bottom: 10px;
}
.footer__column:nth-child(2) {
padding-left: 4.5rem;
}
.footer__column:nth-child(3) {
padding-left: 4.5rem;
}
.footer__copyright {
gap: 10px;
}
.footer__copyright>* {
color: #aaa;
margin: 0;
font-size: .9rem;
}
.footer__menu-list {
padding: 0;
margin: 0;
gap: 1rem 2rem;
grid-template-columns: repeat(2, 1fr);
list-style: none;
}
.form__inputs {
gap: 1rem;
margin-bottom: 15px;
width: 100%;
}
.form__inputs input:not(.form__inputs input[type="tel"]) {
border: none;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
border-radius: 5px;
padding: 0.6rem 1.25rem;
background: var(--button-grey);
font-size: 1.2rem;
color: #fff;
transition: .3s;
}
.form__inputs input{
background: var(--button-grey);
}
.phone-block{
border: none;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
border-radius: 5px;
padding: 0.6rem 1.25rem;
background: var(--button-grey);
font-size: 1.2rem;
color: #fff;
transition: .3s;
display: flex;
align-items: center;
gap: .75rem;
}
.form__inputs input[type="tel"]::placeholder {
color: #fff;
font-size: 1.2rem;
}
.form__inputs input[type="tel"]{
font-size: 1.2rem;
}
.form__inputs input::placeholder {
color: #aaa;
font-size: 1.2rem;
transition: .3s;
}
.form__agreement {
margin-bottom: 20px;
}
.footer__form button[type="submit"] {
width: 100%;
}
.footer__form button[type="submit"] span {
font-size: 1rem;
}
.form__inputs input:focus,
.form__inputs input:focus-visible {
outline: none;
border-color: var(--main-yellow);
transition: .3s;
}
.form__agreement {
font-size: 18px;
line-height: 110%;
color: #aaa;
gap: 15px;
}
.form__agreement label {
gap: 15px;
}
.form__agreement label input {
appearance: none;
background: var(--button-grey);
border-radius: 3px;
width: 29px;
height: 29px;
margin: 0;
padding: 0;
position: relative;
transition: .3s;
outline: 1px solid transparent;
}
.form__agreement label input:hover {
outline: 1px solid var(--main-yellow);
transition: .3s;
}
.form__agreement label span {
display: inline-block;
max-width: calc(100% - 45px);
}
.form__agreement label input::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 3px;
background-repeat: no-repeat;
background-position: center;
background-size: 15px;
background-color: var(--main-yellow);
opacity: 0;
transition: .3s;
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg width='16' height='13' viewBox='0 0 16 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.83829 12.7508L15.7446 1.45235C16.0851 1.12005 16.0851 0.581272 15.7446 0.249129C15.4043 -0.083042 14.8525 -0.083042 14.5123 0.249129L6.22213 10.946L1.4877 6.32381C1.14732 5.99164 0.595532 5.99164 0.255287 6.32381C-0.085096 6.65598 -0.085096 7.19473 0.255287 7.52703L5.60612 12.751C5.77632 12.9171 5.99916 13 6.2221 13C6.44516 13 6.66816 12.9169 6.83829 12.7508Z' fill='%233A3A3A' /%3E%3C/svg%3E");
}
.form__agreement label input:checked:before {
opacity: 1;
transition: .3s;
}
.phone-block {
position: relative;
}
.phone-block svg {
transition: .3s;
width: .75rem;
height: .75rem;
}
.phone-block:has(.country_list--active) svg {
transform: rotateX(-180deg);
transition: .3s;
}
.phone-block input[type="tel"] {
/* padding-left: 4.5rem; */
width: 100%;
border: none;
font-size: 1.2rem;
color: #fff;
}
.active_mask {
position: static;
left: 1.25rem;
top: 50%;
background: transparent;
border: none;
font-size: 1.2rem;
color: #fff;
padding: 0;
margin: 0;
/* transform: translate(0, -50%); */
line-height: 115%;
gap: 5px;
}
/* .active_mask::before {
content: '';
width: 100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
opacity: 0;
transform: translateX(-50%);
} */
.country_list {
display: none;
position: absolute;
top: calc(100% + 10px);
left: 0;
width: max-content;
margin: 0;
padding: 0;
list-style: none;
background: var(--button-grey);
padding: 10px;
gap: 5px;
z-index: 2;
border-radius: 5px;
transition: .3s;
transition-behavior: allow-descrete;
min-width: 150px;
box-shadow: 0 0px 10px 3px rgba(0, 0, 0, 0.12);
}
.country_list.country_list--active {
display: flex;
}
.country_list>li {
position: relative;
gap: 3px;
font-size: 1rem;
}
.country_list>li::before {
content: attr(data-country);
width: 0;
color: var(--main-yellow);
top: 0%;
left: calc(0px - 5px);
transition: .3s;
position: relative;
display: block;
opacity: 1;
width: fit-content;
}
/* .country_list>li:hover::before {
width: 30px;
transition: .3s;
opacity: 1;
} */
@starting-style {
.country_list {
top: calc(100% + 30px);
opacity: 0;
}
}
.footer-bottom {
padding: 1rem 0;
}
.footer-bottom p {
color: #aaa;
margin: 0;
font-size: .9rem;
}
.footer-bottom a {
font-size: .9rem;
}
.footer-bottom svg {
animation: heartbeat 2s infinite;
margin-bottom: -3px;
}
@keyframes heartbeat {
0% {
transform: scale(1);
}
10% {
transform: scale(1.2);
}
20% {
transform: scale(1);
}
30% {
transform: scale(1.2);
}
40% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}
/* Шорткод "Бренды" */
.car-brand {
gap: 1.5rem;
margin-bottom: 6.5rem;
}
.car-brand__desc {
width: calc(33.3% - 15px);
gap: 15px;
}
.car-brand__list {
width: calc(66.6% - 15px);
padding: 1.5rem 3rem;
background: var(--middle-grey);
gap: 1.5rem;
position: relative;
grid-template-columns: repeat(10, 1fr);
list-style: none;
margin: 0;
}
.car-brand__counter {
/* color: var(--button-grey); */
color: #858585;
font-size: 1.3rem;
}
.car-brand__counter span {
font-size: 4.8rem;
line-height: 85%;
letter-spacing: 0.03em;
}
.car-brand__item {
transition: .3s;
will-change: transform;
}
.car-brand__item img {
width: 70px;
height: auto;
aspect-ratio: 1 / 1;
height: auto;
object-fit: contain;
transition: .3s;
}
.car-brand__item:hover {
transform: scale(1.05);
transition: .3s;
}
.car-brand-container h2 {
margin-bottom: 2.5rem;
}
/* Шорткод "Преимущества" */
.advantages {
gap: 30px;
margin-bottom: 6.5rem;
}
.advantages__numbered {
gap: 1.5rem;
width: calc(33.3% - 15px);
padding-right: 2.5rem;
}
.advantages__list {
list-style: none;
padding: 0;
margin: 0;
gap: 1.5rem;
}
.advantages__grid {
width: calc(66.6% - 15px);
}
.advantages__grid>ul {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
list-style: none;
padding: 0;
margin: 0;
position: relative;
}
.advantages__item {
gap: 1.75rem;
}
.advantages__text {
color: #c2c2c2;
padding-bottom: 7px;
width: 100%;
max-width: 70%;
}
.advantages__num {
/* color: var(--button-grey); */
color: #858585;
font-size: 4.8rem;
line-height: 85%;
letter-spacing: 0.03em;
width: 110px;
}
.advantages__grid-item {
padding: 1.5rem 2rem 2rem;
background: var(--card-grey);
border-radius: 5px;
position: relative;
overflow: hidden;
}
.with-blur-item>* {
position: relative;
z-index: 1;
}
.with-blur {
overflow: hidden;
position: relative;
}
.with-blur-item {
position: relative;
overflow: hidden;
}
.cursor-blur {
position: absolute;
top: 0;
left: 0;
width: 350px;
height: 250px;
border-radius: 50%;
background: #ffd60a52;
filter: blur(100px);
pointer-events: none;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity .2s ease;
mix-blend-mode: screen;
z-index: 0;
}
.advantages__grid-item img {
position: absolute;
bottom: 0;
right: 0;
max-width: 245px;
}
.advantages__grid-item>span {
font-size: 1.556rem;
display: inline-block;
margin-bottom: 15px;
line-height: 115%;
}
.advantages__grid-item p {
margin-bottom: 40px;
}
.advantages__grid-item .pretty-button {
min-width: 210px;
}
/* Авто в наличии (шорткод) */
.cars-stock {
grid-template-columns: repeat(6, 1fr);
gap: 1.5rem;
list-style: none;
padding: 0;
margin: 0;
margin-bottom: 6.5rem;
}
.cars-stock-item__link {
gap: 10px;
}
.cars-stock-item__brand {
margin-bottom: 5px;
font-size: 1.2rem;
}
.cars-stock-item__count {
font-size: 16px;
}
.cars-stock-item__img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: 1.5s;
}
.cars-stock-item__link img.no-img {
object-fit: contain;
background: var(--button-grey);
}
.cars-stock-item__img {
aspect-ratio: 22 / 32;
width: 100%;
height: auto;
border-radius: 5px;
overflow: hidden;
}
.cars-stock-item:hover img:not(.no-img) {
transform: scale(1.05);
transition: 1.5;
}
.car-stats__inner {
gap: 30px;
}
.car-stats__image {
width: calc(50% - 15px);
position: relative;
}
.car-stats__grid {
width: calc(50% - 15px);
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.car-stats__item {
padding: 1.25rem;
border-radius: 5px;
background: var(--button-grey);
line-height: 115%;
position: relative;
}
.car-stats__item:first-child {
background: var(--main-yellow);
}
.car-stats__item:first-child::before {
content: 'или';
position: absolute;
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.35);
background: #fff;
font-size: 1rem;
font-variation-settings: 'wght' 700;
font-weight: 700;
padding: 10px 0;
border-radius: 5px;
top: 50%;
left: 100%;
transform: translate(-27%, -50%);
z-index: 1;
line-height: 115%;
width: 3.25rem;
text-align: center;
}
.car-stats__value {
font-size: 4.5rem;
}
.car-stats__value small {
font-size: 2rem;
line-height: 100%;
margin-top: -15px;
}
.car-stats__item:first-child {
color: #1c1c1c;
}
.car-stats__title {
font-size: 1.2rem;
}
.car-stats__image img {
transform: translate(100%, -50%);
transition: 1s;
position: absolute;
top: 50%;
object-fit: contain;
}
.js-car-stats.is-visible .car-stats__image img {
transform: translate(0, -50%);
transition: 1s;
}
.car-stats {
margin-bottom: 6.5rem;
}
/* Шорткод помощь в покупке */
.help-purchase {
padding: 4.5rem 4.5rem 8rem 4.5rem;
background: var(--middle-grey);
border-radius: 5px;
background-size: cover;
background-position: center;
position: relative;
margin-bottom: 7rem;
}
.help-purchase__inner {
gap: 1.5rem;
}
.help-purchase__form {
width: calc(50% - 15px);
max-width: 465px;
padding: 2rem 1.5rem 2.25rem 1.5rem;
gap: .75rem;
background: var(--button-grey);
border-radius: 5px;
}
.help-purchase__form>form+img {
position: absolute;
left: 0;
z-index: 2;
top: 100%;
transform: translate(-17%, calc(-50% - 30px));
pointer-events: none;
object-fit: contain;
}
.help-purchase__form>span {
font-size: 2rem;
letter-spacing: 0.03em;
}
.help-form .form__inputs input,
.help-form .form__agreement label input {
background: #5d5d5d !important;
}
.help-form .form__inputs input[type="tel"]{
background: transparent !important;
}
.help-form .form__inputs .phone-block{
background: #5d5d5d !important;
}
.help-form {
z-index: 3;
}
.help-purchase__form>span+p {
margin-bottom: 15px;
}
.help-purchase__items {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
padding: 0;
margin: 0;
}
.help-purchase__list {
width: calc(50% - 15px);
}
.help-purchase__icon {
width: 3rem;
height: 3rem;
border-radius: 10px;
border: 3px solid var(--button-grey);
padding: 8px;
}
.help-purchase__icon img {
max-width: 100%;
object-fit: contain;
}
.help-purchase__item {
gap: .75rem;
max-width: 290px;
}
/* Шорткод "Как мы работаем" */
.how-we-work__list {
gap: 1.5rem;
list-style: none;
padding: 0;
position: relative;
}
.how-we-work__wrapper {
position: relative;
}
.how-we-work__progress {
top: 28px;
left: 0;
width: 100%;
height: 2px;
background: #ffffff40;
border-radius: 2px;
position: relative;
}
.how-we-work__progress-fill {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 0;
background: #FFD200;
transition: width .3s ease;
}
.how-we-work__item {
position: relative;
cursor: pointer;
text-align: center;
gap: 12px;
}
.how-we-work__number {
display: inline-flex;
border-radius: 50%;
align-items: center;
justify-content: center;
position: relative;
font-size: 4.8rem;
line-height: 85%;
letter-spacing: 0.03em;
/* color: var(--button-grey); */
color: #858585;
transition: .3s;
}
.how-we-work__item.is--hovered .how-we-work__number {
color: var(--main-yellow);
}
.how-we-work__dot {
position: relative;
background: transparent;
border: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
.how-we-work__dots {
position: absolute;
top: 50%;
left: 0;
width: 100%;
transform: translate(0, -50%);
gap: 1.5rem;
}
.how-we-work__dot {}
.how-we-work__dot:last-child::after {
width: 50%;
content: '';
height: 100%;
background: var(--dark-grey);
position: absolute;
right: 0;
top: 50%;
height: 10px;
transform: translate(0, -50%);
}
.how-we-work__dot:first-child::before {
width: 50%;
content: '';
height: 100%;
background: var(--dark-grey);
position: absolute;
left: 0;
top: 50%;
height: 10px;
z-index: 0;
transform: translate(-50%, -50%);
}
.how-we-work__dot button {
z-index: 1;
position: relative;
}
.how-we-work__dot--button {
width: 15px;
height: 15px;
border: 2px solid var(--button-grey);
background: var(--dark-grey);
border-radius: 50%;
transition: .3s;
}
.how-we-work__dot.is--active .how-we-work__dot--button {
border-color: var(--main-yellow);
transition: .3s;
}
.how-we-work {
padding-bottom: 50px;
margin-bottom: 6.5rem;
}
/* Из чего складывается стоимость авто */
.car-price-components {
margin-bottom: 11.5rem;
}
.car-price-components__header {
gap: 30px;
margin-bottom: 3.25rem;
}
.car-price-components__title {
width: calc(50% - 15px);
max-width: 500px;
font-size: 2rem;
}
.car-price-components__description {
margin: 0;
width: calc(33.3% - 15px);
}
.car-price-components__content {
gap: 30px;
}
.car-price-components__content>* {
width: calc(33.3% - 17px);
}
.car-price-components__item {
max-width: 320px;
padding: 1rem 1rem 2rem 1rem;
position: relative;
background: var(--button-grey);
border-radius: 5px;
gap: 15px;
aspect-ratio: 320 / 175;
}
.car-price-components__side {
gap: 2.5rem;
}
.car-price-components__side--left>* {
margin-left: auto;
}
.car-price-components__side--right>* {
margin-right: auto;
}
.car-price-components__image {
position: relative;
}
.car-price-components__image::before {
content: '';
position: absolute;
width: 895px;
aspect-ratio: 1 / 1;
height: auto;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-image: url('data:image/svg+xml,');
z-index: -1;
/* transform: translate(-50%, -50%) rotate(-180deg); */
}
@keyframes CircleRotate {
0% {
transform: translate(-50%, -50%) rotate(0deg);
/* filter: drop-shadow(0 0 0 transparent); */
}
50% {
transform: translate(-50%, -50%) rotate(180deg);
/* filter: drop-shadow(0 0 6px var(--main-yellow)); */
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
/* filter: drop-shadow(0 0 0 transparent); */
}
}
.car-price-components__image.is-visible::before {
animation: CircleRotate 60s linear infinite;
}
.car-price-components__item-title {
margin: 0;
}
.car-price-components__item-desc {
font-size: 16px;
}
/* Рекомендуемые предложения авто */
.recommended-cars {
margin-bottom: 6.5rem;
}
.recommended-cars__swiper .swiper-slide {
height: auto !important;
margin-right: 1.5rem !important;
/* max-width: 446px; */
}
.car-card {
background: var(--card-grey);
padding: 1.5rem 0;
border-radius: 5px;
height: 100%;
}
.car-card .car-condition {
position: absolute;
left: 30px;
top: 30px;
font-size: 14px;
color: var(--main-yellow);
z-index: 2;
}
.car-card__price {
color: var(--main-yellow);
font-size: 1.3rem;
margin-bottom: 1.5rem;
}
.car-card__price.model-cart {
margin-bottom: 15px;
}
.car-card__content {
padding: 0 1.5rem;
}
.car-card__colors {
margin-bottom: 15px;
gap: 15px;
}
.car-card__title {
font-size: 2rem;
margin-bottom: 5px;
display: inline-block;
}
.car-card__chars {
gap: 1.2rem;
grid-template-columns: repeat(2, 1fr);
}
.car-card__chars--item strong {
font-size: 1.1rem;
line-height: 90%;
}
.car-card__chars--item {
gap: .25rem;
padding-left: .75rem;
transition: .3s;
position: relative;
}
.car-card__chars--item::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
border-left: 1px solid #fff;
pointer-events: none;
box-sizing: border-box;
/* background-color: var(--card-grey); */
border-top-right-radius: 0px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 0px;
}
.car-card__chars--item>* {
position: relative;
z-index: 1;
}
.car-card__chars--item>span {
font-size: 16px;
}
.car-card:hover .car-card__chars--item {
border-color: var(--main-yellow);
transition: .3s;
}
.car-card>a {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 2;
}
.car-card__image {
max-width: 85%;
margin: 0 auto 10px auto;
height: 100%;
}
.car-card__image img {
width: 100%;
height: 100%;
max-height: 18rem;
object-fit: contain;
}
.horirontal-controls {
position: relative;
top: 0;
transform: none;
margin: 0 auto;
justify-content: center;
margin-top: 1.5rem;
}
.horirontal-controls .swiper-pagination-bullet {
flex-direction: row !important;
}
.horirontal-controls .slider-pagination {
display: flex;
justify-content: center;
width: fit-content !important;
margin: 0 -2px;
}
.horirontal-controls .swiper-pagination-bullet:first-child::before {
content: '';
width: 2px;
width: 30px;
height: 2px;
margin-left: 1px;
background: rgba(255, 255, 255, 0.18);
}
.horirontal-controls .swiper-pagination-bullet span {
width: 30px;
height: 2px;
margin-left: 0px;
background: rgba(255, 255, 255, 0.18);
margin-right: 2px;
}
.horirontal-controls button svg {
transform: rotate(-90deg);
}
/* Блок с отсчётом до даты */
.offer-countdown {
margin-bottom: 3.5rem;
background-image: url(/wp-content/uploads/2026/04/countdown.png.webp);
/* mix-blend-mode: lighten; */
height: 26.5rem;
background-position: center;
background-repeat: no-repeat;
background-color: var(--dark-grey);
overflow: hidden;
background-size: contain;
}
.offer-countdown__content {
gap: 30px;
padding-top: 20px;
}
.offer-countdown__left {
gap: 1.5rem;
position: relative;
}
.offer-countdown__left::before {
width: 130px;
height: 130px;
content: '';
position: absolute;
pointer-events: none;
filter: blur(80px);
left: 0;
top: 0;
background: var(--main-yellow);
transform: translate(-50%, 0%);
z-index: -1;
}
.offer-countdown__left::after {
width: 130px;
height: 130px;
content: '';
position: absolute;
pointer-events: none;
filter: blur(80px);
right: 0;
bottom: 0;
background: var(--main-yellow);
transform: translate(0%, 30%);
z-index: -1;
}
.countdown-item {
font-weight: 700;
color: var(--main-yellow);
font-size: 3.5rem;
}
.offer-countdown__link {
min-width: 210px;
}
.countdown-number {
align-items: center;
justify-content: center;
border-radius: 5px;
padding: 8px 9px 12px 9px;
background: rgba(28, 28, 28, 0.5);
overflow: visible;
}
.countdown-number::before {
content: "";
position: absolute;
inset: 0;
padding: 1px;
background: linear-gradient(225deg, #FFFFFF24, #99999908);
border-radius: inherit;
mask: conic-gradient(#000 0 0) content-box exclude, conic-gradient(#000 0 0);
/* border: 1px solid transparent; */
width: 100%;
height: calc(100% - 1px);
}
.countdown-label {
font-size: 1.2rem;
}
.offer-countdown__timer {
gap: 1rem;
}
.offer-countdown__text {
font-size: 1.556rem;
}
/* Форма с фоном и картинкой */
.help-purchase-block {
width: 100vw;
left: 50%;
top: 50%;
transform: translate(-50%, 0);
position: relative;
padding: 2rem 0;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-bottom: 2.5rem;
}
.help-form-bottom {
max-width: 465px;
}
.help-form-bottom .form__inputs input:not(.help-form-bottom .form__inputs input[type="tel"]) {
padding: 1rem 1.25rem;
}
.help-form-bottom .form__inputs .phone-block{
padding: 1rem 1.25rem;
}
.help-form-bottom .phone-block input[type="tel"] {
/* padding-left: 4.5rem; */
}
.help-form-bottom .footer__form button[type="submit"] {
padding: 20px;
}
.help-purchase-block .help-purchase__inner {
gap: 30px;
}
.help-purchase-block .help-purchase__inner>div:first-child {
width: calc(50% - 15px);
gap: 1.5rem;
}
.help-purchase-block .help-purchase__inner>div:first-child>span {
font-size: 2rem;
line-height: 125%;
}
.help-purchase-block .help-purchase__inner>div:first-child>p {
font-size: 1.2rem;
}
.help-purchase__image {
width: calc(50% - 15px);
position: relative;
}
.help-purchase__image img {
position: absolute;
left: 0;
top: 20px;
}
.help-purchase-block .footer__form button[type="submit"] {
padding: 1rem;
}
.help-purchase-block .footer__form button[type="submit"]>span {
font-size: 1.2rem;
}
/* Блок о компании */
.about-company {
min-height: 35rem;
margin-bottom: 6.5rem;
padding: 1.5rem;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.about-company__items {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.5rem;
}
.about-company__item {
backdrop-filter: blur(14px);
background: rgba(255, 255, 255, 0.15);
border-radius: 5px;
padding: 1rem;
aspect-ratio: 33 / 27;
height: auto;
transition: .3s;
}
.about-company__item:hover {
transform: translateY(-4px);
transition: .3s;
}
.about-company__text {
font-size: 16px;
}
.about-company__title {
font-size: 1.2rem;
min-height: 55px;
}
/* Квиз */
.answers__item {
gap: 20px;
position: relative;
display: none;
transition: .3s;
opacity: 1;
transition-behavior: allow-descrete;
}
.answers__item--active {
display: flex;
}
.quiz-form {
display: none;
transition-behavior: allow-descrete;
transition: .3s;
background: var(--dark-grey);
overflow: visible;
gap: 20px;
}
.quiz-form__container {
overflow: visible;
width: 100%;
padding: 3.75rem 2rem;
position: relative;
}
.quiz-form__container:has(.quiz-form__success) {
min-height: 23rem;
justify-content: start;
}
.answer__item {
background: var(--middle-grey);
min-height: 6.5rem;
border: 1px solid transparent;
transition: .3s;
border-radius: 5px;
}
.answer__item:has(input:checked) {
border-color: var(--main-yellow);
transition: .3s;
}
.answer__item>label {
padding: 1rem 2rem;
height: 100%;
width: 100%;
font-size: 1.556rem;
}
.answer__item>label p {
margin: 0;
max-width: calc(100% - 80px);
}
.answer__item>label>span {
gap: 1.5rem;
}
.answers {
grid-template-columns: repeat(2, 1fr);
gap: 36px;
}
.quiz-answers {
gap: 3.5rem;
width: 100%;
}
.question-counter {
gap: 15px;
width: calc(50% - 18px);
}
.answers-controls {
gap: 1.5rem;
width: calc(50% - .75rem);
}
.question-counter__top {
gap: 30px;
}
.question-counter-items {
gap: 4px;
}
.question-counter__item {
height: 7px;
background: #fff;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.question-counter__item::before {
content: '';
width: 0;
height: 100%;
left: 0;
top: 0;
background: var(--main-yellow);
position: absolute;
transition: .3s ease-in-out;
}
.question-counter__item--painted::before {
width: 100%;
transition: .3s ease-in-out;
}
.answers-bottom {
gap: 1.8rem;
position: relative;
z-index: 1;
}
.answers-controls>* {
width: calc(50% - .75rem);
font-size: 1.2rem;
}
.answers-controls button:disabled {
opacity: .5;
pointer-events: none;
}
.answer__item input {
padding: 0;
margin: 0;
appearance: none;
width: 2.3rem;
height: 2.3rem;
transition: .3s;
position: relative;
}
.answer__item input::before {
position: absolute;
transition: .3s;
content: '';
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: var(--button-grey);
border: 1px solid transparent;
}
.answer__item label:has(input:checked) input::before {
transition: .3s;
background: var(--main-yellow);
}
.answer__item:hover input::before {
border-color: var(--main-yellow);
}
.question {
font-size: 1.556rem;
}
.answer__item label:has(input:checked)::before {
opacity: 0;
}
.quiz-form--active {
display: flex;
}
@starting-style {
.answers__item {
opacity: 0;
transform: translateY(20px)
}
.quiz-form {
opacity: 0;
transform: translateY(20px)
}
}
#quiz {
background-position: top center;
background-size: contain;
min-height: 23rem;
background-repeat: no-repeat;
}
.quiz-form__end {
margin-bottom: 24px;
}
.quiz-form__end>img {
position: absolute;
left: 50%;
top: -85px;
transform: translate(-50%, -50%);
}
.quiz-form__left {
width: calc(25% - 15px);
backdrop-filter: blur(14px);
background: rgba(255, 255, 255, 0.15);
padding: 3rem 1rem;
border-radius: 5px;
max-width: 290px;
}
.quiz-text__block>span {
margin-bottom: 24px;
display: inline-block;
font-size: 1.2rem;
}
.quiz-text__block>p {
font-size: 16px;
}
.quiz-form__right {
width: calc(75% - 15px);
}
.quiz_form {
max-width: 390px;
}
.quiz-text {
height: 100%;
}
.quiz-form__success {
width: 100%;
gap: 1.2rem;
transition: .3s;
transition-behavior: allow-descrete;
position: relative;
}
.quiz-form__success h3 {
font-size: 3rem;
margin: 0;
}
@starting-style {
.quiz-form__success {
opacity: 0;
transform: translateY(20px)
}
}
.quiz-form__success::before {
content: '';
background: url(/wp-content/uploads/2026/02/zikr-1.png.webp);
width: 290px;
height: 130px;
background-size: contain;
position: absolute;
background-position: center;
background-repeat: no-repeat;
left: 50%;
top: -85px;
transform: translate(-50%, -50%);
}
/* 404 */
.page-404 img {
max-height: 605px;
}
.page-404 {
gap: 64px;
}
.page-404 a {
min-width: 390px
}
/* Контакты */
.map-container {
margin-bottom: 5rem;
}
#map {
width: 100vw;
left: 50%;
position: relative;
transform: translateX(-50%);
}
.mark-text {
font-size: 1.556rem;
background: rgba(255, 255, 255, 0.78);
backdrop-filter: blur(5px);
width: max-content;
padding: 8px 15px 8px 55px;
left: -40px;
position: absolute;
z-index: -1;
border-radius: 30px 10px 10px 30px;
top: 0px;
}
.mark-text>div {
white-space: nowrap;
color: var(--button-grey);
}
.rekv-container {
gap: 30px;
}
.rekv__form {
padding: 2rem 1.5rem 3rem 1.5rem;
width: calc(33.3% - 15px);
border-radius: 5px;
position: relative;
background-color: var(--card-grey);
}
.rekv__form>img {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
top: calc(100% + 55px);
}
.rekv__form>span {
font-size: 1.556rem;
line-height: 125%;
display: inline-block;
margin-bottom: 15px;
}
.rekv__form>span>span {
font-size: 1.556rem;
line-height: 125%;
display: block;
}
.rekv__form>p {
margin-bottom: 30px;
}
section.rekvizity {
padding-bottom: 130px;
}
.rekv__table>img {
width: fit-content;
}
.rekv__table {
width: calc(58% - 15px);
gap: 10px;
}
.rekv__item {
gap: 10px;
padding: .5rem 0;
border-bottom: 1px solid var(--button-grey);
font-size: 1.2rem;
}
.rekv__item>* {
width: calc(50% - 5px);
word-break: break-word;
}
.rekv__item>*:first-child {
/* max-width: calc(33.3% - 5px); */
}
.contact-page-items {
gap: 1.5rem;
margin-bottom: 5rem;
}
.contact-page__item {
width: calc(25% - 23px);
gap: 1.2rem;
border-radius: 5px;
background: var(--button-grey);
padding: 24px;
position: relative;
min-height: 7.75rem;
}
.contact-page__item a {
gap: 1.2rem;
font-size: 1.2rem;
}
.contact-page__item:last-child {
width: calc(50% - 15px);
}
.contact-page__item--title {
color: var(--main-yellow);
font-size: 1.2rem;
}
.contact-page__item:first-child::before,
.contact-page__item:nth-child(2)::before {
content: 'или';
position: absolute;
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.35);
background: #fff;
font-size: 1.2rem;
font-variation-settings: 'wght' 700;
font-weight: 700;
padding: 10px 0;
border-radius: 5px;
top: 50%;
left: 100%;
transform: translate(-22px, -50%);
z-index: 1;
line-height: 115%;
width: 74px;
text-align: center;
color: var(--dark-grey);
}
.messengers-shortcode img {
max-width: 2.5rem;
height: auto;
}
.messengers-shortcode__list {
padding: 0;
margin: 0;
gap: 1.5rem;
}
.messengers-shortcode {
gap: 1.5rem;
}
.messengers-shortcode__title {
font-size: 2rem;
}
.messengers-shortcode .pretty-button {
gap: 10px;
width: 100%;
}
/* Блог */
.blog-posts {
margin: 0;
}
.posts__items {
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.post-item {
padding: 1rem 1.5rem 1.5rem 1.5rem;
gap: 1rem;
position: relative;
background: var(--middle-grey);
/* aspect-ratio: 466 / 320; */
}
.post-item a::before {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
content: '';
z-index: 2;
}
.post-item__image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: 2s;
}
.post-item:hover img {
transform: scale(1.1);
transition: 2s;
}
.post-item__image {
max-height: 165px;
height: 100%;
overflow: hidden;
border-radius: 5px;
min-height: 165px;
}
.post-item__text {
gap: 20px;
position: static;
z-index: unset;
height: 100%;
}
.post-item__text a {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.post-item__text a h3{
margin: 0;
font-size: 1rem;
}
.post-item__info {
gap: .75rem;
}
.post-item__info>span:nth-child(1) {
font-size: 16px;
}
.post-item__info>span:nth-child(2) {
font-size: .75rem;
color: #898989;
}
/* skeleton base */
.skeleton {
pointer-events: none;
/* aspect-ratio: unset; */
border-radius: 5px;
}
.skeleton-line,
.skeleton-box {
background: linear-gradient(90deg,
#333 25%,
var(--middle-grey) 37%,
#333 63%);
background-size: 400% 100%;
animation: shimmer 1.4s ease infinite;
border-radius: 5px;
}
.skeleton-line.title {
height: 20px;
width: 80%;
margin-bottom: 12px;
}
.skeleton-line.meta {
height: 14px;
width: 40%;
}
.skeleton-box {
width: 100%;
}
@keyframes shimmer {
0% {
background-position: 100% 0;
}
100% {
background-position: -100% 0;
}
}
.skeleton .post-item__text {
height: auto;
}
.pagination {
gap: 30px;
}
.pagination__item {
border-radius: 50%;
width: 30px;
border: 2px solid var(--button-grey);
background: transparent;
color: #fff;
font-size: 18px;
height: 30px;
position: relative;
}
.pagination__item::before {
content: '';
width: 32px;
height: 2px;
background: var(--button-grey);
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 100%;
}
.pagination__item.active {
background: var(--main-yellow);
color: var(--dark-grey);
}
.pagination__item {
transition: background .3s, color .3s;
}
.pagination__nav[disabled] {
opacity: .3;
pointer-events: none;
}
.pagination__nav {
position: relative;
opacity: 1;
}
.pagination__nav::before {
content: '';
width: 30px;
height: 2px;
background: var(--button-grey);
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.pagination__nav.prev::before {
left: 100%;
}
.pagination__nav.next::before {
right: 100%;
}
.pagination__dots {
width: 30px;
height: 30px;
border: 2px solid var(--button-grey);
border-radius: 50%;
position: relative;
gap: 2px;
}
.pagination__dots::before {
content: '';
width: 32px;
height: 2px;
background: var(--button-grey);
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 100%;
}
.pagination__dots span {
display: block;
width: 3px;
height: 3px;
background: #fff;
}
/* Каталог */
.cars-grid {
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.catalog-posts {
gap: 2.5rem;
margin: 0;
}
.post-loader {
margin-bottom: 5rem;
width: 100%;
text-align: center;
display: none;
}
.post-loader.post-loader--active {
display: block;
}
.post-loader img {
width: 52px;
height: 52px;
animation: rotation 1.5s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#aside {
margin-bottom: 60px;
}
.filter-form {
gap: 1.5rem;
transition: .3s;
}
/* .filter-form fieldset{
transition: .3s;
}
.filter-form.filter-form--loading fieldset{
opacity: .5;
transition: .3s;
} */
.class-filters {
margin: 0 0 15px 0;
gap: 1.5rem;
grid-template-columns: repeat(4, 1fr);
padding: 0;
}
.class-filters>label {
margin-right: 15px;
position: relative;
min-height: 6.75rem;
overflow: visible;
padding: .75rem 1.25rem;
color: #fff;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
border-radius: 5px;
transition: .3s;
cursor: pointer;
gap: 50px;
}
.class-filters>label:hover {
background: var(--card-grey) !important;
}
.class-filters>label:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: var(--main-yellow);
transition: .3s;
opacity: 0;
border-radius: 5px;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
}
.class-filters>label::before {
opacity: 0;
}
.class-filters>label:has(input:checked)::before {
opacity: 1
}
.class-filters>label>img {
position: absolute;
bottom: 0;
right: -15px;
pointer-events: none;
width: 12rem;
transform: translateY(35%);
height: auto;
object-fit: contain;
}
.filter-form fieldset {
border: none;
}
.filter-form fieldset:not(:has(>*)) {
display: none;
}
.class-filters>label>input,
.brand-filters>label>input,
.body-type-filters>label>input {
appearance: none;
position: absolute;
opacity: 0;
}
.class-filters>label>span {
font-size: 1.2rem;
max-width: 135px;
}
.class-filters>label:has(input:checked) {
color: var(--button-grey);
}
.class-filters>label small {
font-size: 3.5rem;
position: absolute;
right: 75px;
top: -5px;
color: var(--button-grey);
z-index: 0;
}
.brand-filters {
padding: 0;
margin: 0;
grid-template-columns: repeat(10, 1fr);
gap: 2rem;
padding: 0 1.5rem 0.25rem 1.5rem;
background: var(--middle-grey);
border-radius: 5px;
}
.brand-filters>label {
margin: .5rem .25rem;
border-radius: 5px;
transition: .3s;
padding: 10px 6px;
gap: 5px;
border-bottom: 2px solid transparent;
cursor: pointer;
}
.brand-filters>label:hover {
background: rgba(58, 58, 58, 0.2);
transition: .3s;
border-color: #ffd60a33;
}
.brand-filters>label img {
max-width: 3.5rem;
width: 100%;
height: 3.5rem;
}
.brand-filters>label:has(input:checked) {
border-color: var(--main-yellow);
transition: .3s;
background: var(--button-grey);
}
.body-type-filters {
padding: 0;
margin: 0;
grid-template-columns: repeat(10, 1fr);
gap: 2rem;
padding: 0 1.5rem 0.25rem 1.5rem;
background: var(--middle-grey);
border-radius: 5px;
}
.body-type-filters>label {
border-radius: 5px;
transition: .3s;
padding: 1rem .35rem;
gap: .75rem;
cursor: pointer;
border-bottom: 2px solid transparent;
margin: .25rem;
}
.body-type-filters>label>img {
width: 4rem;
height: auto;
object-fit: contain;
}
/*
.body-type-filters>label:hover {
background: rgba(58, 58, 58, 0.2);
transition: .3s;
} */
.body-type-filters>label:hover {
background: rgba(58, 58, 58, 0.2);
transition: .3s;
border-color: #ffd60a33;
}
.body-type-filters>label:has(input:checked) {
border-color: var(--main-yellow);
transition: .3s;
background: var(--button-grey);
}
/* .body-type-filters>label svg path {
transition: .3s;
} */
/* .body-type-filters>label:has(input:checked) {
color: var(--main-yellow);
transition: .3s;
} */
/*
.body-type-filters>label img {
filter: brightness(99);
}
*/
/* .body-type-filters>label:has(input:checked)
.body-type-filters>label:has(input:checked) img {
filter: brightness(1);
} */
/* label:has(input:disabled) {
opacity: .5;
transition: .3s;
pointer-events: none;
} */
.others-param {
padding: 0;
border: none;
margin: 0;
position: relative;
width: calc(25% - 12px);
}
.other-filters {
gap: 15px;
}
.others-param:nth-child(-n + 4) {
order: -1;
}
.filter-ranges {
width: calc(50% - 6px);
order: -1;
background: var(--middle-grey);
border-radius: 5px;
padding: .25rem 1rem;
/* min-height: 63px; */
margin: 0;
}
.filter-list {
margin: 0;
list-style: none;
padding: 0;
max-height: 195px;
overflow-y: auto;
}
/* WebKit-браузеры (Chrome, Edge, Opera, Safari) */
.filter-list::-webkit-scrollbar {
width: 5px;
}
.filter-list::-webkit-scrollbar-track {
background: transparent;
/* или свой цвет */
}
.filter-list::-webkit-scrollbar-thumb {
background: #4B4B4B;
border-radius: 5px;
}
/* Firefox */
.filter-list {
scrollbar-width: thin;
/* тонкий скроллбар */
scrollbar-color: #4B4B4B transparent;
/* ползунок и трек */
}
#filter {
margin-bottom: 3rem;
position: relative;
z-index: 3;
}
.filter-list-wrapper {
position: absolute;
top: 100%;
left: 0;
opacity: 0;
pointer-events: none;
transform: translateY(20px);
transition: .3s;
border-radius: 0 0 5px 5px;
border: 1px solid #fff;
border-top: none;
border-bottom: none;
background: var(--button-grey);
z-index: 2;
width: 100%;
padding: 10px 0;
border-top: 1px solid #4B4B4B;
padding-right: 10px;
}
.others-param>legend {
width: 100%;
padding: 1rem;
background: var(--middle-grey);
border-radius: 5px;
cursor: pointer;
transition: .3s;
border: 1px solid var(--middle-grey);
border-top: none;
border-bottom: none;
position: relative;
}
.others-param>legend::before {
content: '';
position: absolute;
right: 20px;
width: 14px;
height: 14px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
top: 50%;
transform: translateY(-50%);
transition: .3s;
background-image: url('data:image/svg+xml,');
}
.others-param.param--active .filter-list-wrapper {
opacity: 1;
visibility: visible;
transition: .3s;
pointer-events: all;
transform: translateY(0px);
}
.others-param.param--active>legend {
background: var(--button-grey);
transition-delay: .2s;
border-radius: 5px 5px 0 0;
border-color: #fff;
transition: .3s;
}
.others-param.param--active>legend::before {
transform: translateY(-50%) rotateX(-180deg);
transition: .3s;
}
.filter-list>li label input {
appearance: none;
background: var(--button-grey);
border-radius: 3px;
width: 1.5rem;
height: 1.5rem;
margin: 0;
padding: 0;
position: relative;
transition: .3s;
outline: 1px solid #c3c3c3;
}
.filter-list>li label input::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 3px;
background-repeat: no-repeat;
background-position: center;
background-size: 15px;
background-color: var(--main-yellow);
opacity: 0;
transition: .3s;
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg width='16' height='13' viewBox='0 0 16 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.83829 12.7508L15.7446 1.45235C16.0851 1.12005 16.0851 0.581272 15.7446 0.249129C15.4043 -0.083042 14.8525 -0.083042 14.5123 0.249129L6.22213 10.946L1.4877 6.32381C1.14732 5.99164 0.595532 5.99164 0.255287 6.32381C-0.085096 6.65598 -0.085096 7.19473 0.255287 7.52703L5.60612 12.751C5.77632 12.9171 5.99916 13 6.2221 13C6.44516 13 6.66816 12.9169 6.83829 12.7508Z' fill='%233A3A3A' /%3E%3C/svg%3E");
}
.filter-list>li label input:checked:before {
opacity: 1;
transition: .3s;
}
.filter-list>li label input:checked {
outline-color: var(--main-yellow);
transition: .3s;
}
.filter-list>li:hover input {
outline-color: #fff;
transition: .3s;
}
.filter-list>li label {
padding: .75rem;
cursor: pointer;
transition: .3s;
border-radius: 5px;
}
.filter-list>li label:hover {
background: var(--card-grey);
transition: .3s;
}
.filter-range__inputs {
width: 100%;
gap: 1rem;
}
.filter-range--price {
gap: .75rem;
}
.filter-range--price .noUi-horizontal .noUi-handle {
width: 15px;
height: 15px;
right: 0px;
top: -7px;
background: var(--main-yellow) !important;
box-shadow: none;
border: none;
cursor: grab;
border-radius: 50%;
outline: 2px solid var(--button-grey);
}
#range-slider-price {
width: calc(100% - 40px);
top: 13px;
height: 2px;
left: 10px;
border: none;
background: var(--button-grey) !important;
box-shadow: none !important;
}
.noUi-connect {
background: var(--main-yellow) !important;
}
.noUi-handle:after,
.noUi-handle:before {
content: none !important;
}
.filter-range__inputs input {
font-size: 1rem;
appearance: none;
background: transparent;
border: none;
color: #fff;
max-width: 80px;
transition: .3s;
}
.filter-range__input-min {
text-align: end;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type="number"] {
-moz-appearance: textfield;
}
.filter_range-__inputs--item {
gap: 7px;
}
input[type="number"]:focus-visible {
outline: 1px solid var(--main-yellow);
border: none;
border-radius: 3px;
}
/* Страница новости */
.news-content {
margin-bottom: 6.5rem;
}
.news-content ul,
.faq-accordeon__answer ul {
padding: 0;
margin: 15px 0;
list-style: none;
}
.news-content ul li,
.faq-accordeon__answer ul li {
position: relative;
padding-left: 2rem;
padding-bottom: 0.75rem;
}
.news-content ul li::before,
.faq-accordeon__answer ul li::before,
.model-feature__content p::before {
content: '';
left: 0;
top: 0px;
width: 25px;
height: 25px;
position: absolute;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml,');
/* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25' fill='none'%3E%3Ccircle cx='12.5' cy='12.5' r='12' fill='%233A3A3A' stroke='url(%23paint0_linear_789_37883)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_789_37883' x1='25' y1='12.5' x2='0' y2='12.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='white'/%3E%3Cstop offset='0.175646' stop-color='white' stop-opacity='0'/%3E%3Cstop offset='0.819633' stop-color='white' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='white'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E"); */
}
.p-link-item {
width: calc(42.3% - 15px);
gap: 1rem;
}
.p-link-item[rel="next"] {
margin-left: auto;
}
.p-link-item[rel="prev"] {
margin-right: auto;
}
.p-link {
gap: 1.5rem;
}
.p-link__item__body>div {
gap: .75rem;
}
.p-link__item__body>div>span {
background-color: var(--button-grey);
border: none;
width: 2.3rem;
height: 2.3rem;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
border-radius: 50%;
opacity: 1;
}
.p_link_block {
padding: 1.5rem;
gap: 1.5rem;
}
.p_link_img {
width: 100%;
max-width: 11.75rem;
aspect-ratio: 235 / 165;
border-radius: 5px;
background-size: 100%;
overflow: hidden;
}
.p_link_img>div {
width: 100%;
height: 100%;
transition: 5s;
}
.p_link_text {
width: calc(100% - 265px);
color: #fff;
gap: 15px;
}
.p-link__item__body p {
margin: 0;
}
.p-link-item:hover .p_link_img>div {
transform: scale(1.1);
transition: 5s;
}
/* Страница FAQ */
.faq-tabs {
gap: 1.5rem;
margin-bottom: 2rem;
}
.faq-content {
margin-bottom: 5rem;
}
.before-faq_text {
margin-bottom: 2.5rem;
}
.faq-tab {
font-size: 1.2rem;
padding: 1rem 2rem;
}
.faq-item {
display: none;
gap: 1.5rem;
transition: .3s;
transition-behavior: allow-descrete;
}
@starting-style {
.faq-item {
opacity: 0;
transform: translateY(20px)
}
}
.faq-item--active {
display: flex;
}
.faq-accordeon {
padding: 1.5rem 2rem;
gap: 0px;
transition: .3s;
}
.faq-accordeon__question {
gap: 1.5rem;
cursor: pointer;
}
.faq-accordeon__answer {
overflow: hidden;
max-height: 0;
transition: .3s;
}
.faq-accordeon--active {
gap: 1.5rem;
transition: .3s;
}
.faq-accordeon--active .slider-button {
background: var(--main-yellow);
}
.faq-accordeon .slider-button svg {
transition: .3s;
}
.faq-accordeon--active .slider-button svg {
transform: rotate(90deg);
transition: .3s;
}
.faq-accordeon--active .slider-button svg path {
fill: var(--dark-grey);
}
.faq-tab--active {
background: var(--main-yellow);
}
.faq-tab--active>span {
color: var(--dark-grey);
font-weight: 400 !important;
font-variation-settings: 'wght' 400 !important;
}
.faq-accordeon .slider-button {
opacity: 1;
}
/* Карточка авто */
.car-page__banner {
position: absolute;
left: 0;
width: 100%;
height: 100%;
top: -5rem;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.product-page-header {
background: oklab(0.23 0 0 / 0.8);
}
.product-breadcrumbs #breadcrumbs {
margin: 0;
}
.product-breadcrumbs {
background: oklab(0.23 0 0 / 0.8);
position: relative;
padding: 1.75rem 2rem;
top: -1px;
}
.product-breadcrumbs .breadcrumbs-home {
background-color: transparent;
}
.car-page__triangles {
width: 100%;
height: 100%;
position: relative;
}
.car-page__triangle svg {
width: 100%;
height: auto;
}
.car-page__triangle {
position: absolute;
top: 0;
}
.car-page__triangle:nth-child(1) {
left: 0;
}
.car-page__triangle:nth-child(2) {
right: 0;
}
.car-page-content {
min-height: 27rem;
height: max-content;
padding-bottom: 2.5rem;
margin-bottom: 3.5rem;
}
.car-main-container {
gap: 1.2rem;
}
.car-container__left {
gap: 1.2rem;
max-width: calc(75% - 12px);
}
.car-container__right {
gap: 15px;
max-width: calc(25% - 12px);
}
.car-container__right>.pretty-button {
background: rgba(255, 255, 255, 0.05);
min-width: 275px;
}
.car-condition {
border-radius: 5px;
border-right: 1px solid var(--main-yellow);
border-left: 1px solid var(--main-yellow);
background: var(--button-grey);
width: fit-content;
padding: 3px 7px;
}
#currency_list {
gap: 12px;
padding: 0;
margin: 0;
list-style: none;
}
#currency_list li {
border-radius: 5px;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
background: var(--button-grey);
width: fit-content;
padding: 3px 7px;
transition: .3s;
font-size: 0.7rem;
cursor: pointer;
}
#currency_list li.active-currency {
border-color: var(--main-yellow);
transition: .3s;
color: var(--main-yellow);
}
.car-info__center {
gap: 8px;
}
.car-info__bottom {
gap: 12px;
}
#car_price {
font-size: 1.6rem;
}
#car_price strong,
#car_price b {
color: var(--main-yellow);
}
.car-info__chars {
text-transform: lowercase;
}
.text-slider-container {
gap: 36px;
margin-bottom: 6.5rem;
}
.text-slider-container>* {
width: calc(50% - 18px);
}
.post-chars {
background: #272727;
padding: 1.2rem;
border-radius: 5px;
gap: 1.6rem;
}
.post-chars__top {
padding: 1.2rem;
border-radius: 5px;
background: #323232;
gap: 1.2rem;
}
.post-brand__img img {
max-width: 3.45rem;
max-height: 3.45rem;
width: auto;
height: auto;
object-fit: contain;
min-width: 3.45rem;
}
.post-brand__img {
transition: .3s;
}
.post-brand__img:hover {
transform: scale(1.03);
transition: .3s;
}
.post-brand__button .pretty-button {
gap: 10px;
min-width: 200px;
}
.post-brand__button .pretty-button svg path {
transition: .3s;
}
.post-brand__button .pretty-button:hover svg path {
fill: #fff;
transition: .3s;
}
.post-brand__text {
gap: 4px;
}
.post-brand__text>span {
letter-spacing: -0.616px;
font-size: 1.556rem;
line-height: 150%;
}
.post-brand__text>p {
opacity: .5;
}
.post-brand__button {
margin-left: auto;
}
.post-chars-grid {
grid-template-columns: repeat(2, 1fr);
gap: .6rem 1.2rem;
}
.chars-item__title {
opacity: .5;
text-transform: lowercase;
}
.chars-item__value {
font-size: 1.556rem;
}
.chars-item__value {
/* line-height: 150%; */
gap: 12px;
font-size: 1.2rem;
}
.chars-item__value span {
line-height: 150%;
}
.post-chars-buttons {
gap: 24px;
}
.post-chars-buttons>* {
width: calc(50% - 12px);
}
.post-chars-buttons>button {
background: #000;
color: var(--main-yellow);
border-color: var(--main-yellow);
}
.post-chars-buttons>*.pretty-button.disabled {
pointer-events: none;
cursor: not-allowed;
opacity: .5;
}
.post-chars-warning {
gap: 15px;
}
.post-slider-main .slider-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: var(--button-grey);
z-index: 1;
}
.post-slider-main .slider-button:hover {
background: var(--main-yellow);
}
.post-slider-main .post-slider-prev {
left: 20px;
}
.post-slider-main .post-slider-next {
right: 20px;
}
.post-slider-main {
max-height: 22rem;
height: 100%;
border-radius: 5px;
overflow: hidden;
width: 100%;
}
.post-slide img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 5px;
max-height: 22rem;
}
.post-slide a {
width: 100%;
height: 100%;
display: block;
}
.post-slide {
border-radius: 5px;
overflow: hidden;
}
.post-slide-thumb {
border-radius: 5px;
overflow: hidden;
aspect-ratio: 140 / 127;
max-width: 140px;
}
.post-slide-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
/* max-height: 6.5rem; */
}
.post-slider {
gap: 4px;
}
.post-slider-thumbs {
width: 100%;
min-height: 6.5rem;
border-radius: 5px;
overflow: hidden;
}
.post-slide-thumb::before {
content: '';
width: 100%;
height: 100%;
border: 2px solid var(--main-yellow);
border-radius: 5px;
position: absolute;
left: 0;
top: 0;
box-sizing: border-box;
opacity: 0;
pointer-events: none;
transition: .3s;
}
.swiper-slide-thumb-active::before {
opacity: 1;
transition: .3s;
}
.swiper-button-disabled {
opacity: .5;
/* pointer-events: none; */
}
.car-additional-info {
gap: 1.8rem;
margin-bottom: 6.5rem;
}
.car-additional-info>* {
width: calc(50% - .9rem);
gap: 24px;
}
.additional-info__title {
font-size: 1.556rem;
}
.info-chars__button .pretty-button {
width: 100%;
}
/* Базовый стиль всех диалогов */
dialog {
border: none;
max-width: 1490px;
width: calc(100% - 30px);
padding: 0;
padding-right: 32px;
color: #fff;
opacity: 0;
transform: translateY(20px);
max-height: 90vh;
max-height: 90dvh;
overflow: hidden;
background: transparent;
transition:
opacity 0.3s ease-out,
transform 0.3s ease-out,
overlay 0.3s ease-out allow-discrete,
display 0.3s ease-out allow-discrete;
transition-behavior: allow-discrete;
min-height: 50vh;
}
/* Открытый dialog */
dialog[open] {
opacity: 1;
transform: translateY(0);
}
/* Стартовое состояние для появления */
@starting-style {
dialog[open] {
opacity: 0;
transform: translateY(20px) scale(.98);
}
}
/* Подложка для всех dialog */
dialog::backdrop {
background: rgba(28, 28, 28, 0.8);
backdrop-filter: blur(5px);
transition:
background-color 0.3s ease-out,
overlay 0.3s allow-discrete,
display 0.3s allow-discrete;
transition-behavior: allow-discrete;
}
dialog[open]::backdrop {
background: rgba(28, 28, 28, 0.8);
}
/* Стартовое состояние подложки */
@starting-style {
dialog[open]::backdrop {
background-color: rgba(0, 0, 0, 0);
}
}
#chars_dialog {
max-width: 1490px;
padding-right: 32px;
max-height: 90dvh;
height: 90dvh;
}
.complectation-card__info {
max-width: 480px;
padding-right: 0;
}
.complectation-card__info>form[method="dialog"] {
top: -.15rem;
right: .25rem;
}
.complectation-card__info>form[method="dialog"]>button {
/* right: 1rem; */
width: .5rem;
height: .5rem;
}
.complectation-card__info>form[method="dialog"]>button>svg {
width: .5rem;
height: .5rem;
}
.chars-dialog__content {
height: 100%;
overflow-y: auto;
background: #272727;
/* border-radius: 10px; */
padding-right: 24px;
gap: 1.2rem;
}
.chars-dialog__content::-webkit-scrollbar {
width: 6px;
border-radius: 10px;
}
.chars-dialog__content::-webkit-scrollbar-thumb {
background-color: var(--main-yellow);
border-radius: 10px;
width: 4px;
border: 1px solid var(--dark-grey);
}
.chars-dialog__content::-webkit-scrollbar-track {
background: var(--dark-grey);
border-radius: 10px;
padding: 1px;
}
dialog>form[method="dialog"]>button[type="submit"] {
background: transparent;
border: none;
margin: 0;
padding: 0;
}
dialog>form[method="dialog"] {
position: absolute;
right: 0;
top: 0;
padding: 0;
margin: 0;
background: none;
}
dialog>form[method="dialog"]>button[type="submit"] svg path {
transition: .3s;
}
dialog>form[method="dialog"]>button[type="submit"]:hover svg path {
transition: .3s;
fill: var(--main-yellow);
}
.dialog-container {
/* height: 100%; */
padding: 1.2rem;
background: #272727;
border-radius: 10px;
/* overflow: hidden; */
}
#chars_dialog .dialog-container {
height: 100%;
}
.chars-dialog__content h2 {
margin: 0;
}
.chars-dialog__group {
gap: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
padding-bottom: 24px;
}
.chars-dialog__items {
gap: 1rem 2.8rem;
grid-template-columns: repeat(2, 1fr);
}
.chars-dialog__grid {
gap: 24px;
}
.chars-dialog__item {
gap: 24px;
}
.chars-dialog__group-title {
font-size: 1.556rem;
}
.chars-dialog__item-label {
opacity: .5;
}
.chars-dialog__section {
gap: 24px;
}
.chars-dialog__list {
margin: 0;
padding: 0;
gap: 20px 56px;
list-style: none;
grid-template-columns: repeat(2, 1fr);
}
.chars-dialog__list>li {
gap: 20px;
padding-left: 36px;
}
.chars-dialog__list>li::before {
content: '';
width: 17px;
height: 17px;
border-radius: 50%;
box-sizing: border-box;
background: var(--main-yellow);
border: 2px solid var(--button-grey);
display: block;
position: absolute;
left: 0;
top: 4px;
}
dialog:focus-visible {
outline: none;
}
/* Шорткод отзывов */
.reviews__slide {
padding: 1rem;
max-width: 465px;
margin-right: 30px;
}
.reviews__person {
gap: .5rem;
}
.reviews__from {
width: 2.3rem;
height: 2.3rem;
background: #fff;
border-radius: 50%;
margin-top: -5px;
}
.reviews__from img {
max-width: 1.3rem;
max-height: 1.3rem;
object-fit: contain;
}
.reviews__text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 8;
overflow: hidden;
font-size: 0.9rem;
}
.reviews__card {
gap: .5rem;
}
.reviews__original-link {
color: transparent;
border-bottom: 2px dotted var(--main-yellow);
transition: .3s;
}
.reviews__original-link:hover {
border-color: #fff;
transition: .3s;
}
.reviews__star:not(.reviews__star.is-active) svg path {
fill: var(--dark-grey);
}
.reviews__original {
font-size: 0.9rem;
}
/* Страница модели авто */
.car-price-item {
font-size: 1.6rem;
}
.car-price-item__value {
color: var(--main-yellow);
}
.model-info__desc {
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.info-desc__img {
max-width: 4.75rem;
}
.info-desc__img>img {
max-width: 100%;
object-fit: contain;
height: auto;
width: 100%;
}
.info-desc__text {
max-width: calc(100% - 6.25rem);
}
.model-elements {
margin-bottom: 3.5rem;
gap: 1.5rem;
grid-template-columns: repeat(4, 1fr);
}
.element-item img {
height: 12.75rem;
width: 100%;
object-fit: cover;
border-radius: 5px;
background: var(--button-grey);
}
.element-item {
gap: 1rem;
}
.element-description {
font-size: 1.1rem;
padding-left: 15px;
border-radius: 5px 0 0 5px;
border-left: 1px solid #fff;
}
.complectation-card {
padding: 1.2rem;
overflow: visible;
gap: 1.2rem;
height: 100%;
}
.complectation-card__icon {
max-width: 2.5rem;
}
.complectation-card__values {
padding: 0;
margin: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
gap: .6rem;
}
.complectation-card__values>li::after {
content: '/';
color: #595959;
display: inline-block;
transform: translateX(6px);
font-weight: 400;
font-variation-settings: 'wght' 400;
}
/* Правильно: :last-child, а не :last-child() */
.complectation-card__values>li:last-child::after {
content: none;
}
.complectation-card__values>li {
font-size: 1.2rem;
}
.complectation-card__title {
margin: 0;
}
.complectation-card__text {
gap: 5px;
}
.complectations-short {
position: relative;
margin-bottom: 5rem;
}
.complectations__nav>button {
position: absolute;
top: 50%;
z-index: 2;
}
.complectations-button-prev {
right: calc(100% - 15px);
transform: translate(5px, calc(-50% + 10px));
}
.complectations-button-next {
left: calc(100% - 15px);
transform: translate(-5px, calc(-50% + 10px));
}
.complectations__swiper .swiper-slide {
height: auto !important;
}
.open-compl-dialog {
position: absolute;
top: 0;
transform: translate(-15px, -50%);
right: 0;
padding: 0;
background: transparent;
border: none;
width: 23px;
height: 23px;
transition: .3s;
}
.open-compl-dialog:hover {
transform: translate(-15px, -50%) scale(1.01);
transition: .3s;
}
.complectations__swiper {
padding-top: 15px !important;
margin-top: -15px;
}
.complectation-card__info {
position: fixed !important;
border-radius: 5px;
border: none;
padding: 15px;
height: fit-content;
background: #fff;
color: var(--dark-grey);
min-height: fit-content;
}
.model-features {
margin-bottom: 6.5rem;
}
.model-features__inner {
/* gap: 30px; */
}
/* Карточка особенности */
.model-feature {
position: relative;
width: 25%;
background: transparent;
}
/* обнулить «реверс», если не нужен */
.model-feature--reverse {
/* можно оставить пустым или вообще убрать класс из PHP */
}
/* Область с изображением */
.model-feature__media {
position: relative;
z-index: 1;
min-height: 24rem;
}
.model-feature__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform-origin: center;
transition: transform 0.3s ease-out;
min-height: 480px;
clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0% 100%);
}
/* Белые угловые рамки */
.model-feature__media::before,
.model-feature__media::after {
content: '';
position: absolute;
width: 105px;
height: 90px;
border: 6px solid #ffffff;
pointer-events: none;
z-index: 1;
}
.model-feature__media::before {
top: -2px;
left: 45px;
border-right: none;
border-bottom: none;
transform: skewX(-5.5deg);
}
.model-feature__media::after {
bottom: -2px;
right: 47px;
border-left: none;
border-top: none;
transform: skewX(-5.5deg);
}
.model-feature__content p {
position: relative;
margin: 0;
padding-left: 2rem;
max-width: calc(100% - .5rem);
}
.model-feature:nth-child(odd) {
gap: 1.2rem;
}
.model-feature:nth-child(even) {
gap: 6.5rem;
}
.model-feature:nth-child(2) {
transform: translateX(7px);
}
.model-feature:nth-child(3) {
transform: translateX(-7px);
}
.model-feature:nth-child(even) .model-feature__media::before {
content: none !important;
}
.model-feature:nth-child(odd) .model-feature__media::after {
content: none !important;
}
.model-feature:nth-child(even)::before {
content: '';
position: absolute;
/* inset: 0; */
z-index: -1;
background-image: linear-gradient(180deg,
#1C1C1C 38.96%,
rgba(28, 28, 28, 0.00) 74.93%,
#1C1C1C 100%),
url(/wp-content/uploads/2026/03/rectangle-34624569.png.webp);
background-position: bottom right;
background-size: contain;
background-repeat: no-repeat;
height: 88%;
top: 0;
width: calc(100% + 50px);
right: 15px;
}
.model-feature:nth-child(2)::before {
width: calc(100% + 110px);
right: -50px;
}
.feature-media__background {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-size: cover !important;
background-repeat: no-repeat !important;
min-height: 24rem;
clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0% 100%);
background-position: center !important;
}
/* 360-фото */
.car-360 {
margin-bottom: 5rem;
}
.car-360__tabs {
gap: 1.5rem;
padding: 0.75rem 1.5rem 0.75rem 0;
background: #fff;
position: relative;
border-radius: 0 5px 0 0;
width: fit-content;
}
.car-360__tabs::before {
content: '';
width: 100vw;
right: 0;
height: 100%;
top: 0;
background: #fff;
position: absolute;
border-radius: 0 5px 0 0;
}
.car-360__tabs::after {
content: '';
background-image: radial-gradient(circle at 100% 0, var(--dark-grey) 6px, #fff 7px);
width: 6px;
height: 6px;
display: flex;
position: absolute;
right: -6px;
bottom: 0;
backdrop-filter: blur(4px);
}
.car-360__tab {
width: 2.6rem;
height: 2.6rem;
border-radius: 50%;
padding: 0;
cursor: pointer;
border: none;
position: relative;
box-shadow: 0px 0px 4px 0px #2223;
}
.car-360__tab::before {}
.car-360__tab::before {
content: '';
width: 20px;
height: 20px;
border: 2px solid #fff;
background-color: var(--main-yellow);
background-position: center;
background-repeat: no-repeat;
background-size: 12px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.3074 0.154389C11.3692 0.208474 11.4196 0.274301 11.4557 0.348042C11.4918 0.421783 11.5129 0.501966 11.5177 0.58393C11.5226 0.665895 11.5111 0.748004 11.4839 0.825483C11.4567 0.902962 11.4144 0.974266 11.3594 1.03525L4.84652 8.26362C4.79128 8.32484 4.72437 8.37441 4.64972 8.40942C4.57507 8.44444 4.49418 8.4642 4.41179 8.46755C4.3294 8.4709 4.24717 8.45776 4.16993 8.42891C4.09268 8.40006 4.02197 8.35608 3.96195 8.29955L0.193206 4.75195C0.0801426 4.644 0.0116861 4.49756 0.00136366 4.34158C-0.00895879 4.18559 0.0396038 4.03141 0.137455 3.9095C0.190273 3.84341 0.255971 3.78874 0.330562 3.74881C0.405153 3.70888 0.487081 3.68453 0.571371 3.67723C0.655661 3.66993 0.740555 3.67983 0.8209 3.70635C0.901244 3.73286 0.975363 3.77542 1.03876 3.83145L3.96257 6.46164C4.08465 6.57152 4.24537 6.62841 4.40939 6.61982C4.57341 6.61122 4.7273 6.53784 4.83723 6.4158L10.4389 0.204564C10.548 0.0836704 10.7002 0.0105636 10.8627 0.00105773C11.0253 -0.00844809 11.185 0.0464113 11.3074 0.153769V0.154389Z' fill='%231C1C1C'/%3E%3C/svg%3E");
opacity: 0;
transition: .3s;
position: absolute;
right: 0;
bottom: -5px;
border-radius: 50%;
}
.car-360__tab.is-active::before {
opacity: 1;
transition: .3s;
}
.car-360__tab>span {
width: 100%;
height: 100%;
display: block;
border-radius: 50%;
}
.car-360-tabs__container {
gap: 1.5rem;
}
.car-360__view {
display: none;
max-height: 500px;
gap: 30px;
width: 100%;
}
.car-360__view.is-active {
display: flex;
}
@starting-style {
.car-360__view {
opacity: 0;
transform: translateY(20px) scale(.98);
}
}
/* контейнер под 360 */
.cloudimage-360-inner-box {
aspect-ratio: 16 / 9;
max-height: 25rem;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: #fff;
border-radius: 0 5px 200px 5px;
}
.car-360-controls {
position: absolute;
/* left: 0; */
width: 75%;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
}
.car-360-controls>img {
width: 100%;
}
/* canvas вписывается, центр внутри бокса */
.cloudimage-360-inner-box canvas {
max-width: 100%;
max-height: 100%;
width: auto !important;
height: auto !important;
display: block;
z-index: 1;
transform: translateY(40px);
}
.car-360__chars {
padding: 0 3rem 0 0;
margin: 0;
list-style: none;
gap: 1.5rem;
}
.car-360__chars>li {
gap: 6px;
}
.car-360__char-value {
font-size: 1.5rem;
}
.car-360__views {
position: relative;
width: calc(100% - 250px);
}
.car-360__views::before {
content: '';
}
.cloudimage-360 {
position: relative;
}
.cloudimage-360::before {
content: '';
width: 100vw;
height: 100%;
right: 50%;
top: 0;
position: absolute;
background: #fff;
z-index: -1;
pointer-events: none;
}
.cloudimage-360::after {
content: '';
width: 100%;
height: 100%;
right: 0;
top: 0;
position: absolute;
background: var(--button-grey);
z-index: -1;
pointer-events: none;
border-radius: 5px;
}
.cloudimage-360-view-360-icon {
display: none;
}
.image-ellipse__arrows-container {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, calc(50% - 4px));
background: #fff;
}
.presentation {
position: relative;
width: 100vw;
height: 35rem;
left: 50%;
transform: translateX(-50%);
margin-bottom: 6.5rem;
}
.presentation__slider {
z-index: unset !important;
}
.presentation__slider .swiper-wrapper {
z-index: unset !important;
}
.presentation__image {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.presentation__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.presentation__slider {
height: 100%;
}
.presentation__slide {
display: flex !important;
flex-direction: column;
justify-content: end;
padding-bottom: 5rem;
}
.presentation__content {
position: relative;
z-index: 1;
}
.presentation__content>* {
width: 100%;
max-width: 590px;
}
.presentation__title {
font-size: 2rem;
display: inline-block;
margin-bottom: 1rem;
}
.presentation__progress-list {
gap: 8px;
/* margin-top: 20px; */
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 30px;
}
.presentation__progress-item {
height: 1px;
background: rgba(255, 255, 255, 0.3);
overflow: hidden;
width: 3.5rem !important;
}
.presentation__progress-bar {
width: 0%;
height: 100%;
background: var(--main-yellow);
border-radius: inherit;
transition: width 0.15s linear;
/* можно оставить, но JS всё равно переопределит */
}
.reasons-block .faq-accordeon {
box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.40);
border: 1px solid transparent;
border-radius: 5px;
}
.reasons-block .faq-accordeon.faq-accordeon--active {
border-color: var(--main-yellow);
}
.reasons-block__content {
gap: 1.5rem;
}
.reasons-block {
margin-bottom: 6.5rem;
}
.reasons-block__inner {
gap: 1.5rem;
}
.reasons-block__image {
width: calc(33.3% - .75rem);
background: #fff;
border-radius: 5px;
overflow: hidden;
height: 382px;
}
.reasons-block__image>img {
max-height: 100%;
width: 100%;
object-fit: cover;
object-position: center;
height: 100%;
}
.reasons-block__content {
width: calc(66.6% - .75rem);
}
.video-reviews-slider .swiper-slide {
min-height: 13rem;
max-width: 23.3rem;
/* margin-right: 1.5rem !important; */
height: auto !important;
}
.video-review-slide {
padding: 0;
margin: 0;
background: transparent;
border: none;
width: 100%;
height: 100%;
border-radius: 5px;
overflow: hidden;
place-items: center;
}
.video-review-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.video-review-slide::before {
position: absolute;
left: 50%;
top: 50%;
width: 3.75rem;
height: 3.75rem;
content: '';
transform: translate(-50%, -50%);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
background-image: url('data:image/svg+xml,');
}
.video-review-slide::after {
position: absolute;
left: 50%;
top: 50%;
width: 1.35rem;
height: 1.5rem;
content: '';
transform: translate(calc(-50% + 3px), -50%);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
transition: .3s;
background-image: url('data:image/svg+xml,');
}
.video-review-slide:hover::after {
transition: .3s;
background-image: url('data:image/svg+xml,');
}
.car-galleries__group {
display: none;
transition: .3s;
transition-behavior: allow-descrete;
}
.car-galleries__group.is-active {
display: block;
}
@starting-style {
.car-galleries__group {
opacity: 0;
transform: translateY(20px)
}
}
.car-galleries__tabs {
gap: 10px;
}
.car-galleries__tabs .separator {
background-color: var(--button-grey);
width: 2rem;
height: 2px;
border-radius: 5px;
min-width: 2rem;
}
.car-galleries__tabs>*:last-child.separator {
display: none;
}
.car-galleries {
gap: 1.5rem;
}
.car-galleries__item img {
/* aspect-ratio: 34 / 18; */
width: 100%;
height: 9rem;
max-width: 17rem;
object-fit: cover;
border-radius: 5px;
background: #fff;
max-height: 100%;
}
.car-galleries__item {
width: 100%;
height: 100%;
}
.car-galleries__tab {
padding: 10px 20px;
}
.car-galleries__slider .swiper-wrapper {
gap: 1.5rem;
}
.car-galleries__slider .swiper-slide {
max-width: 17rem;
aspect-ratio: 34 / 18;
}
.car-equipment-block {}
.car-years-tabs {
gap: 1.5rem;
margin-bottom: 2.5rem;
}
.car-years-tabs__btn.is-active {
/* background: var(--main-yellow); */
}
.car-years-tabs__btn {
padding: .5rem 1rem;
}
.car-years-tabs__btn.is-active span {
/* color: var(--dark-grey); */
}
.car-equipment-tabs__btn {
padding: 0 0 12px 0;
border-radius: 4px;
border: none;
background: transparent;
color: #fff;
cursor: pointer;
position: relative;
font-size: 1.2rem;
/* white-space: nowrap; */
height: 100%;
user-select: none; /* Запрещаем выделение текста при перетаскивании */
-webkit-user-select: none;
-webkit-user-drag: none; /* Отключаем нативное перетаскивание элемента браузером */
}
.car-equipment-tabs__btn::before {
content: '';
width: 100%;
height: 5px;
background: #fff;
left: 0;
top: calc(100% - 4px);
position: absolute;
opacity: 0;
transition: .3s;
}
.car-equipment-tabs {
margin-bottom: 2.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.20);
gap: 50px;
}
.car-equipment-tabs .swiper-slide {
max-width: 20rem;
margin-right: 2.5rem !important;
height: auto !important;
width: fit-content;
}
.years-tabs__buttons {
gap: 1rem;
}
.car-equipment-tabs__btn.is-active::before {
opacity: 1;
transition: .3s;
}
.car-equipment-panels {
position: relative;
}
.car-equipment-panel {
display: none;
transition: .3s;
}
.car-year-panel {
display: none;
transition: .3s;
}
@starting-style {
.car-year-panel {
opacity: 0;
transform: translateY(20px)
}
.car-equipment-panel {
opacity: 0;
transform: translateY(20px)
}
}
.car-year-panel.is-active {
display: block;
}
.car-equipment-panel.is-active {
display: block;
}
.car-equipment-panel__cols {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.5rem;
}
.car-equipment-list {
margin: 0;
}
.car-equipment-list>div {
gap: 30px;
padding: 12px 0;
border-bottom: 1px solid var(--button-grey);
}
.car-equipment-list dt {
max-width: calc(50% - 15px);
}
.car-equipment-list dd {
max-width: calc(50% - 15px);
margin: 0;
}
.car-equipment-panel__title {
font-size: 1.556rem;
margin-bottom: 1.2rem;
gap: 12px;
}
.car-equipment-panel__title img {
width: 1.9rem;
height: 1.9rem;
}
.contact-form>span.title {
font-size: 2rem;
display: inline-block;
margin-bottom: 12px;
text-align: center;
line-height: 123%;
}
.contact-form>span.title+.form-text {
margin-bottom: 1.2rem;
text-align: center;
}
.dialog-form .chars-dialog__content {
padding: 0;
overflow: visible;
}
.dialog-form {
max-width: 450px;
/* height: max-content; */
}
.offer-model {
margin-bottom: 24px;
}
.form_subtext {
color: #AAA;
font-size: .9rem;
margin-bottom: 1.2rem;
}
.thanks-form__img {
margin-bottom: 1.2rem;
}
.thanks-form__img img {
max-width: 275px;
height: auto;
object-fit: contain;
max-height: 7.5rem;
}
.contact-form.is-loading>*:not(.post-loader) {
visibility: hidden;
opacity: 0;
}
.contact-form .post-loader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
visibility: hidden;
opacity: 0;
transition: opacity .3s;
margin: 0;
}
.contact-form.is-loading .post-loader--active {
visibility: visible;
opacity: 1;
}
.thanks-progress {
width: calc(100% - 24px);
height: 4px;
background: var(--button-grey);
border-radius: 999px;
overflow: hidden;
margin-top: 0;
position: absolute;
left: 50%;
box-sizing: border-box;
transform: translate(-50%, -10px);
}
.thanks-progress__bar {
width: 0%;
height: 100%;
background: var(--main-yellow);
border-radius: 999px;
transition: width 5s linear;
}
dialog>form[method="dialog"].is-closing>button[type="submit"] svg path {
transition: .3s;
fill: var(--main-yellow);
}
#thanks_form .offer-model {
margin-top: 10px;
}
#sticky-bar {
z-index: 99;
position: relative;
position: fixed;
bottom: 15px;
left: 50%;
transform: translate(-50%, 20px) scale(.9);
background: rgba(28, 28, 28, 0.50);
backdrop-filter: blur(2.5px);
border-radius: 5px;
border: 1px solid transparent;
padding: .5rem 1rem;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.20);
opacity: 0;
visibility: hidden;
transition: .3s;
}
#sticky-bar.is-visible{
opacity: 1;
transform: translate(-50%, 0) scale(1);
transition: .3s;
visibility: visible;
}
#sticky-bar::before {
content: "";
position: absolute;
inset: -1px 0 0 -1px;
padding: 1px;
border-radius: inherit;
pointer-events: none;
width: 100%;
height: 100%;
background: conic-gradient(from 200deg at 26.56% 107.7%,
hsla(0, 0%, 100%, 0.007) 0%,
rgba(255, 255, 255, 0.027) 5%,
rgba(255, 255, 255, 0.17) 47%,
rgba(80, 80, 80, 0.70) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude,
linear-gradient(#000 0 0);
}
.sticky-bar__items {
gap: 1.2rem;
}
.search-bar__item {
gap: .5rem;
padding: .5rem;
color: #fff;
border: none;
}
.search-bar__item.active{
color: var(--dark-grey);
}
.sticky-bar__item {
border-radius: 5px;
background: rgba(79, 78, 78, 0.20);
}
.sticky-bar__item:not(.search-bar__item) {
width: 1.8rem;
height: 1.8rem;
}
.sticky-bar__item img {
max-width: 1.2rem;
}
.sticky-bar__item a {
display: flex;
padding: .25rem;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
.sticky-bar__item.active{
background: var(--main-yellow);
}
.sticky-bar__item.active img {
filter: brightness(0.25);
}
.sticky-bar__item span{
font-size: .9rem;
}
.search-no-results{
margin-bottom: 5rem;
}
.sticky-bar__search {
position: absolute;
bottom: calc(100% + .5rem);
background: linear-gradient(180deg, rgba(28, 28, 28, 0.00) 53.12%, #1C1C1C 99.67%);
border-radius: 5px;
border-right: 1px solid #FFF;
border-left: 1px solid #FFF;
background: var(--button-grey);
left: 0;
width: 100%;
opacity: 0;
transition: .3s;
visibility: hidden;
transform: translateY(20px);
}
.sticky-bar__search .search-form__results {
padding: 1rem 0 1rem.5rem;
border-bottom: 1px solid #fff;
}
.sticky-bar__search form input {
width: 100%;
background: transparent;
border: none;
padding: .75rem .5rem;
font-size: 1rem;
color: #fff;
}
#sticky-bar:has(.search-bar__item.active) .sticky-bar__search{
opacity: 1;
visibility: visible;
transition: .3s;
transform: translateY(0);
}
.sticky-bar__search form {
width: 100%;
}
.sticky-bar__search form input:focus-visible{
border: none;
outline: none;
}
.search-result-item a {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .5rem;
width: 100%;
}
.search-result-item a span{
color: #fff;
opacity: .5;
font-size: .75rem;
width: calc(33.3% - .5rem);
}
.search-result-item a h4{
width: calc(66.6% - .5rem);
}
/* .search-result-item>a>*{
width: calc(50% - .25rem);
} */
.search-results-more {
margin: 1rem auto 0;
display: none;
}
.search-results-more.active{
display: block;
}
.ajax-search-results::-webkit-scrollbar {
width: 6px;
border-radius: 10px;
}
.ajax-search-results::-webkit-scrollbar-thumb {
background-color: var(--main-yellow);
border-radius: 10px;
width: 4px;
border: 1px solid var(--dark-grey);
}
.ajax-search-results::-webkit-scrollbar-track {
background: var(--dark-grey);
border-radius: 10px;
padding: 1px;
}
.show-all-results {
background: transparent;
border: none;
color: var(--main-yellow);
border-bottom: 1px dashed var(--main-yellow);
font-size: 1rem;
}
.search-loading{
height: 100%;
}
.search-placeholder{
height: 100%;
}
.search-form__results .post-loader {
left: 50%;
top: 50%;
margin: 1rem 0;
}
.search-form {
height: 100%;
}
.search-form form{
height: 100%;
}
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!Адаптив!!!!!!!!!!!!!!!!!!!!!!!!!!! */
.mob-hidden {
display: flex !important;
}
/* .mob-hidden.flex {
display: flex !important;
} */
.desc-hidden {
display: none !important;
}
@media(max-width: 1550px) {
html {
font-size: 16px;
}
main {
padding-bottom: 5rem;
}
#breadcrumbs {
margin: 1.5rem 0 2rem 0;
}
.header__inner {
gap: 2rem;
padding: 1.25rem 0;
}
.banner {
min-height: unset;
height: 85vh;
top: 0;
margin-top: -5.5rem;
margin-bottom: 4rem;
}
.car-country {
margin-bottom: 4px;
}
.car-country__item img {
max-width: 75%;
}
.car-stats__value {
font-size: 3rem;
}
.car-card__title {
font-size: 1.5rem;
}
.car-card__price {
margin-bottom: 1rem;
}
.car-price-components__side {
gap: 1.5rem;
}
.car-card__chars--item strong {
font-size: 1rem;
}
.advantages__text {
max-width: 65%;
}
.form__agreement label input {
width: 25px;
height: 25px;
}
.class-filters>label {
/* min-height: 125px; */
}
.help-purchase__image img {
top: 0;
left: 45px;
}
.news-content ul li::before,
.faq-accordeon__answer ul li::before,
.model-feature__content p::before {
width: 20px;
height: 20px;
}
.car-page__banner {
top: -5.6rem;
}
.help-purchase__form>form+img {
transform: translate(0, calc(-50% - 30px));
width: 50%;
}
.pretty-button {
padding: 0.75rem 1rem;
}
.banner__controls {
right: 15px;
}
}
#mobile_bar {
z-index: 99;
display: none;
position: relative;
width: calc(100% - 30px);
position: fixed;
bottom: 15px;
left: 50%;
transform: translate(-50%, 0);
background: #3b3b3b99;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.20);
backdrop-filter: blur(2.5px);
border-radius: 30px;
border: 1px solid transparent;
padding: 4px;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.20);
z-index: 101;
}
#mobile_bar::before {
content: "";
position: absolute;
inset: -1px 0 0 -1px;
padding: 1px;
border-radius: inherit;
pointer-events: none;
width: 100%;
height: 100%;
background: conic-gradient(from 200deg at 26.56% 107.7%,
hsla(0, 0%, 100%, 0.007) 0%,
rgba(255, 255, 255, 0.027) 5%,
rgba(255, 255, 255, 0.17) 47%,
rgba(80, 80, 80, 0.70) 100%);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask:
linear-gradient(#000 0 0) content-box exclude,
linear-gradient(#000 0 0);
}
.mobile-bar__items {
width: 100%;
list-style: none;
padding: 0;
margin: 0;
overflow: hidden;
border-radius: 60px;
gap: 1px;
}
.mobile-bar__items>li>a,
.mobile-bar__items>li>button {
padding: 10px;
transition: .3s;
}
.bar-item__name {
color: #fff;
font-size: 14px;
}
.mobile-bar__items>li>button {
background: none;
border: none;
width: 100%;
border-radius: 60px;
transition: .3s;
}
.mobile-bar__items>li>a.is-active {
background: var(--main-yellow);
transition: .3s;
border-radius: 60px;
}
.mobile-bar__items>li>button.is-active {
background: var(--main-yellow);
transition: .3s;
}
.mobile-bar__items>li>a.is-active .bar-item__name,
.mobile-bar__items>li>button.is-active .bar-item__name {
color: #000;
}
.mobile-bar__items>li>a.is-active .bar-item__img>img,
.mobile-bar__items>li>button.is-active .bar-item__img>img {
filter: brightness(0);
}
.menu-bar-button>.bar-item__img {
position: relative;
width: 24px;
height: 24px;
}
.menu-bar-button>.bar-item__img::before {
width: 12px;
height: 12px;
content: '';
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
left: 50%;
top: 50%;
opacity: 0;
transition: .3s;
transform: translate(-50%, -50%);
background-image: url('data:image/svg+xml,');
}
.menu-bar-button.is-active>.bar-item__img::before {
opacity: 1;
transition: .3s;
}
.menu-bar-button.is-active>.bar-item__img img {
opacity: 0;
transition: .3s;
}
.menu-bar-button>.bar-item__img img {
transition: .3s;
}
.mobile-upward__curtain {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
min-height: 50vh;
height: 75vh;
max-height: 85vh;
max-height: 85dvh;
padding-bottom: 100px;
background: var(--dark-grey);
border-radius: 60px 60px 0 0;
box-shadow: 0 -3px 20px 0 rgba(0, 0, 0, 0.25);
transform: translateY(100%);
visibility: hidden;
pointer-events: none;
opacity: 1;
filter: blur(var(--sheet-blur, 0px));
transition: transform 0.3s ease, opacity 0.3s ease, filter 0.3s ease;
z-index: 100;
}
.mobile-upward__curtain.search-curtain {
height: 75vh;
height: 75dvh;
min-height: max-content;
}
.mobile-upward__curtain.is-active {
transform: translateY(0);
visibility: visible;
pointer-events: auto;
}
#mobile_sheet_backdrop {
--backdrop-opacity: 0.8;
--backdrop-blur: 6px;
position: fixed;
inset: 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
background: rgba(28, 28, 28, var(--backdrop-opacity));
backdrop-filter: blur(var(--backdrop-blur));
-webkit-backdrop-filter: blur(var(--backdrop-blur));
transition:
opacity 0.3s ease,
visibility 0.3s ease,
backdrop-filter 0.3s ease,
-webkit-backdrop-filter 0.3s ease,
background-color 0.3s ease;
z-index: 90;
}
#mobile_sheet_backdrop.is-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.is-ios #mobile_sheet_backdrop {
backdrop-filter: blur(var(--backdrop-blur));
-webkit-backdrop-filter: blur(var(--backdrop-blur));
}
.is-android #mobile_sheet_backdrop {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.is-android .mobile-upward__curtain {
transition: transform 0.3s ease, opacity 0.3s ease;
}
.is-ios .mobile-upward__curtain {
transition: transform 0.3s ease, opacity 0.3s ease, filter 0.3s ease;
}
.mobile-sheet-handle {
width: 120px;
height: 1px;
border-radius: 999px;
background: #fff;
margin: 0 auto;
cursor: grab;
-webkit-tap-highlight-color: transparent;
position: absolute;
top: 10px;
left: 50%;
transform: translate(-50%, 0);
/* z-index: 2; */
}
.mobile-sheet-handle::before {
width: 100vw;
height: 75vh;
transform: translate(-50%, 0);
left: 50%;
top: -10px;
position: absolute;
opacity: 0;
content: '';
z-index: 1;
}
body:has(.mobile-upward__curtain.is-active),
html:has(.mobile-upward__curtain.is-active) {
overflow: hidden !important;
}
.mobile-menu__container {
padding: 1.5rem;
height: 100%;
}
.mobile-menu__scrollable {
gap: 1.5rem;
height: 100%;
overflow-y: auto;
}
.mobile-menu__scrollable>* {
position: relative;
z-index: 1;
}
.mobile-menu__container .button-in-menu {
min-width: 11.875rem;
/* min-height: max-content; */
}
.mob-menu {
margin: 0;
padding: 0;
list-style: none;
gap: 1rem;
}
.mob-menu>li {
min-width: 11.875rem;
}
.mob-menu>li>.pretty-button {
width: 100%;
}
.search-container {
position: relative;
z-index: 1;
margin: 1.5rem 1.5rem 0 1.5rem;
height: auto;
width: 100%;
}
.search-container form {
width: 100%;
}
.search-container form input {
width: 100%;
background: transparent;
border: none;
border-top: 1px solid #fff;
padding: 1rem;
font-size: 1rem;
color: #fff;
}
.search-form__results {
padding: 1rem;
height: 100%;
}
.ajax-search-results {
overflow: auto;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
list-style: none;
gap: .5rem;
margin-bottom: 1rem;
/* height: 50dvh; */
height: fit-content;
margin-right: .5rem;
padding-right: .5rem;
max-height: 60vh;
max-height: 60dvh;
}
.search-container form input:focus-visible {
border: none;
outline: 1px solid var(--main-yellow);
border-radius: 5px;
}
.search-result-item h4 {
margin: 0;
font-size: .9rem;
}
@media(width<=1250px) {
.banner {
margin-top: -4.7rem;
}
.car-stats__image img {
width: 150%;
}
.help-purchase {
background-position: bottom;
padding: 2.5rem 2.5rem 4rem 2.5rem;
margin-bottom: 6.5rem;
}
.help-purchase__form>form+img {
transform: translate(17%, calc(-40% - 42px));
pointer-events: none;
width: 50%;
}
.about-company {
min-height: 30rem;
}
.about-company__item {
aspect-ratio: unset;
}
.about-company__items {
align-items: stretch;
}
.contact-page__item {
width: calc(33.3% - 1rem);
gap: 1.2rem;
border-radius: 5px;
background: var(--button-grey);
padding: 1.2rem;
position: relative;
min-height: 7.75rem;
}
.contact-page__item:last-child {
width: calc(33.3% - 1rem);
}
.contact-page__item:first-child::before,
.contact-page__item:nth-child(2)::before {
padding: .5rem 0;
transform: translate(-25%, -50%);
z-index: 1;
width: 3rem;
}
.car-card {
padding: 1rem 0;
}
.p-link-item {
width: calc(50% - 15px);
}
.header__menu-list {
gap: 2rem;
}
.header__inner {
gap: 1rem;
padding: 1rem 0;
}
.product-breadcrumbs {
padding: 1rem 0;
}
.car-page__triangle {
max-width: 25%;
}
.car-equipment-tabs__btn {
font-size: 1.2rem;
}
.presentation {
height: 32rem;
}
}
@media(width<=1100px) {
.header__menu-list {
gap: 1rem;
}
.car-page__triangle {
max-width: 15%;
}
.presentation {
height: 30rem;
}
}
@media(width<=1023px) {
html {
font-size: 16px;
}
main {
padding-bottom: 4rem;
}
section {
margin-bottom: 4rem;
}
/* Информационная строка */
.marquee {
display: none;
}
/* Header */
.header__menu {
display: none;
}
.desc-hidden {
display: flex !important;
}
/* .desc-hidden.flex {
display: flex !important;
} */
.mob-hidden {
display: none !important;
}
.header__info {
display: none !important;
}
.header__inner {
display: flex !important;
justify-content: space-between;
padding: 1rem 0;
}
#mobile_bar {
display: flex;
}
#mobile_menu {
display: block;
}
#mobile_search {
display: flex;
}
.pretty-button {
min-height: 2.375rem;
padding: .75rem 1rem;
}
.banner__content-top {
gap: 1rem;
max-width: calc(100% - 50px);
}
.banner__title {
font-size: 2.5rem;
}
.banner__desc {
max-width: calc(100% - 50px);
position: relative;
overflow: hidden;
}
.banner {
height: max-content;
}
.advantages__grid {
width: 100%;
}
.advantages__numbered {
gap: 1.5rem;
width: 100%;
padding-right: 0
}
.car-brand-container h2 {
margin: 0 0 1.5rem 0;
}
.car-brand__list {
width: calc(66.6% - 15px);
padding: 1rem 1.5rem;
gap: 1rem;
grid-template-columns: repeat(8, 1fr);
}
h1 {
font-size: 1.875rem !important;
}
.car-brand__item img {
width: 100%;
}
.countdown-item {
font-size: 2.5rem;
}
.help-purchase__form>form+img {
display: none;
}
.help-purchase {
padding: 2rem;
margin-bottom: 6.5rem;
}
.form__agreement label span {
font-size: 1rem;
}
.help-purchase__form>span {
font-size: 1.5rem;
letter-spacing: 0.03em;
}
.help-purchase__form>span+p {
margin-bottom: 0;
}
.form__inputs input {
font-size: 1rem !important;
}
.active_mask {
font-size: 1rem;
}
.form__inputs input::placeholder {
font-size: 1rem !important;
}
.horirontal-controls .swiper-pagination-bullet span {
width: 1.5rem;
}
.horirontal-controls .swiper-pagination-bullet:first-child::before {
width: 1.5rem;
}
.car-price-components__item {
aspect-ratio: unset;
}
.car-price-components {
margin-bottom: 6.5rem;
}
.help-purchase-block .help-purchase__inner>div:first-child {
gap: 1rem;
}
.help-purchase__image img {
width: 100%;
object-fit: contain;
height: auto;
top: unset;
bottom: -50px;
}
.phone-block input[type="tel"] {
/* padding-left: 4rem; */
width: 100%;
}
.help-purchase-block {
margin-bottom: 0;
}
.post-item__text {
gap: 1rem;
height: auto;
}
.post-item {
padding: .75rem 1rem;
}
.post-item__image {
min-height: auto;
}
#breadcrumbs span {
white-space: nowrap;
}
#breadcrumbs {
margin: 1rem 0 1rem 0;
padding-bottom: .5rem;
overflow-x: auto;
}
.recommended-cars__swiper .swiper-slide {
margin-right: 1rem !important;
}
.faq-tab {
padding: 1rem;
min-width: max-content;
}
.faq-tab span {
white-space: nowrap;
}
.faq-tabs {
width: 100%;
overflow-x: auto;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
flex-wrap: nowrap !important;
}
.before-faq_text {
margin-bottom: 1.5rem;
}
.faq-accordeon {
padding: 1rem 1.5rem;
}
.faq-accordeon__question span {
max-width: calc(100% - 3.8rem);
}
.faq-accordeon--active {
gap: 1rem;
}
.car-brand {
margin-bottom: 4rem;
}
.car-price-components {
margin-bottom: 4rem;
}
.recommended-cars {
margin-bottom: 4rem;
}
.about-company {
min-height: 30rem;
margin-bottom: 4rem;
}
.advantages {
margin-bottom: 4rem;
}
.cars-stock {
margin-bottom: 4rem;
}
.car-stats {
margin-bottom: 4rem;
}
.help-purchase {
margin-bottom: 4rem;
}
.about-company__items {
grid-template-columns: repeat(auto-fit, minmax(200, 1fr));
gap: 1rem;
}
.reviews__from {
width: 2.3rem;
height: 2.3rem;
}
.reviews__from img {
max-width: 1.3rem;
max-height: 1.3rem;
object-fit: contain;
}
.help-purchase-block .footer__form button[type="submit"] {
padding: .75rem 1rem;
}
.help-purchase-block .footer__form button[type="submit"]>span {
font-size: 1rem;
}
.contact-page-items {
margin-bottom: 4rem;
}
.messengers-shortcode {
gap: 1rem;
}
.messengers-shortcode__list {
gap: 1rem;
}
.messengers-shortcode img {
max-width: 2rem;
}
#map {
height: 20rem !important;
}
.mark-text {
font-size: 1rem;
left: -25px;
padding-left: 25px;
}
.rekv__item {
gap: .5rem;
font-size: 1rem;
}
.rekv__table {
width: 100%;
gap: .5rem;
}
.rekv__form {
width: 50%;
margin: 0 auto;
}
.cars-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
#filter {
margin-bottom: 2rem;
}
.others-param {
width: calc(33.3% - 10px);
}
.filter-ranges {
width: calc(66%);
}
.class-filters {
grid-template-columns: repeat(3, 1fr);
}
.class-filters>label small {
right: 15px;
}
.class-filters>label>span {
font-size: 1rem;
max-width: 100px;
}
.brand-filters {
grid-template-columns: repeat(6, 1fr);
gap: 1rem;
padding: 0 1rem 0.25rem 1rem;
}
.body-type-filters {
grid-template-columns: repeat(6, 1fr);
gap: 2rem;
padding: 0 1rem 0.25rem 1rem;
}
.body-type-filters>label>img {
max-width: 3rem;
width: 3rem;
width: 100%;
}
.body-type-filters>label {
gap: .5rem;
}
.brand-filters>label img {
max-width: 3rem;
height: 3rem;
}
.p_link_block {
padding: 1rem;
gap: 1rem;
}
.p_link_text {
width: calc(100% - (14rem - 20px));
}
.news-content {
margin-bottom: 4rem;
}
.product-breadcrumbs {
/* background: transparent; */
}
.product-page-header {
/* background: transparent; */
}
.car-page-content {
min-height: 25rem;
height: max-content;
padding-bottom: 1.5rem;
margin-bottom: 2rem;
}
.car-main-container {
gap: 1rem;
align-items: start !important;
}
.car-container__right>.pretty-button {
min-width: auto;
width: 100%;
white-space: nowrap;
}
.car-container__left {
gap: 1rem;
max-width: calc(66.6% - 12px);
}
.car-container__right {
max-width: calc(33.3% - 12px);
}
.car-price-item {
font-size: 1.5rem;
}
.info-desc__img {
max-width: 3rem;
}
.model-elements {
margin-bottom: 2.5rem;
gap: 1rem;
grid-template-columns: repeat(2, 1fr);
}
.complectations-short {
margin-bottom: 2rem;
padding: 0 1rem;
}
.complectations-button-prev {
right: calc(100% - 20px);
}
.complectations-button-next {
left: calc(100% - 20px);
}
.element-item img {
height: 10rem;
}
.complectation-card {
padding: 1rem;
gap: 1rem;
}
.complectation-card__values>li {
font-size: 1rem;
}
.complectation-card__icon {
max-width: 2rem;
}
.feature-media__background {
min-height: 20rem;
clip-path: polygon(11% 0, 100% 0%, 89% 100%, 0% 100%);
}
.model-feature__media {
min-height: 20rem;
}
.model-feature {
width: 50%;
margin-bottom: 1rem;
}
.model-feature__media::after {
right: 9%;
transform: skewX(-5.5deg);
}
.model-feature__media::before {
left: 9%;
transform: skewX(-5.5deg);
}
.model-feature:nth-child(even)::before {
content: none !important;
}
.model-feature:nth-child(even) {
gap: 1rem;
}
.model-feature:nth-child(odd) {
gap: 1rem;
}
.model-features {
margin-bottom: 4rem;
}
.car-360__views {
width: 100%;
}
.car-360__chars {
padding: 0;
gap: 1rem;
}
.car-360__char-value {
font-size: 1.2rem;
}
.car-360__tab {
width: 2rem;
height: 2rem;
}
.car-360__chars {
grid-template-columns: repeat(6, 1fr);
display: grid !important;
width: 100%;
}
.question {
font-size: 1rem;
}
.answers {
gap: 1.5rem;
}
.answer__item>label {
padding: 1rem 1.5rem;
font-size: 1.2rem;
}
#quiz {
min-height: max-content;
}
.quiz-answers {
gap: 2rem;
}
.answer__item input {
width: 1.5rem;
height: 1.5rem;
}
.answer__item>label>span {
gap: 1rem;
}
.answer__item>label p {
max-width: calc(100% - 2.5rem);
}
.contact-form>span.title {
font-size: 1.5rem;
margin-bottom: .6rem;
max-width: calc(100% - 2rem);
}
.car-360__tabs::before {
content: none !important;
}
.cloudimage-360::before {
content: none !important;
}
.car-360__tabs::after {
content: none !important;
}
.cloudimage-360-inner-box {
border-radius: 0 0px 200px 5px;
}
.car-galleries__tabs {
flex-wrap: nowrap !important;
overflow-x: auto;
width: 100%;
justify-content: start !important;
padding-bottom: 0.5rem;
}
.car-galleries {
gap: .5rem;
margin-bottom: 4rem;
}
.car-equipment-tabs .swiper-slide {
max-width: 12rem !important;
margin-right: 1.5rem !important;
}
.car-equipment-tabs {
margin-bottom: 2rem;
}
.car-equipment-panel__cols {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem;
}
.car-equipment-block {
margin-bottom: 4rem;
}
.presentation {
height: 25rem;
margin-bottom: 4rem;
}
.presentation__title {
font-size: 1.5rem;
}
.reasons-block {
margin-bottom: 4rem;
}
.video-reviews {
margin-bottom: 4rem;
}
.help-purchase-block {
padding: 1.5rem 0 1rem 0;
}
.car-page-content {
margin-bottom: 1.5rem;
}
.text-slider-container {
gap: 1rem;
margin-bottom: 4rem;
flex-direction: column-reverse;
}
.text-slider-container>* {
width: 75%;
margin: 0 auto;
}
.post-brand__img img {
max-width: 2.5rem;
max-height: 2.5rem;
min-width: 2rem;
}
.post-brand__text>span {
font-size: 1.2rem;
}
.car-additional-info {
gap: 1rem;
margin-bottom: 4rem;
}
.car-additional-info>* {
width: calc(50% - .5rem);
}
.chars-dialog__items {
gap: 1rem 1.5rem;
}
.post-slider-thumbs {
min-height: unset;
}
.post-slider-main .post-slider-next {
right: 10px;
}
.post-slider-main .post-slider-prev {
left: 10px;
}
.footer-top__items .footer-top__contacts {
display: none !important;
}
footer {
max-width: calc(100% - 30px);
margin: 0 auto;
border-radius: 20px;
background: #222;
padding: 2rem .75rem 5rem .75rem;
}
footer .container {
padding: 0;
}
.footer-top {
border-bottom: none;
padding: 0;
}
.header__logo img {
max-width: 11.25rem;
}
.messengers__item::before {
content: '';
position: absolute;
border-radius: 50px;
border: 1px solid transparent;
mask-composite: exclude;
background: linear-gradient(#222, #222) padding-box, radial-gradient(92.18% 99.11% at 26.56% 107.7%, #ffffff 0%, #808080 25%, #ffffff 50%, #808080 100%) border-box;
width: 100%;
height: 100%;
}
.footer__column:nth-child(2) {
padding-left: 1rem;
}
.footer__column:nth-child(3) {
padding-left: 1rem;
}
.footer-center .footer__items>* {
width: calc(33.3% - 1rem);
}
.footer-center {
padding: 1rem 0;
border: none;
}
.footer__column {
gap: .75rem;
}
.footer-center>.container {
padding: 0;
}
.footer-bottom>.container {
padding: 0;
}
.footer-top__contacts {
gap: 1rem;
flex-direction: column;
align-items: start !important;
justify-content: start !important;
margin-top: .75rem;
}
.form_subtext {
margin-bottom: 1rem;
}
.quiz-form__success::before {
content: '';
width: 75%;
top: -60px;
height: 100px;
}
.quiz-form__left {
width: calc(33.3% - 15px);
padding: 2rem 1rem;
}
.quiz-form__right {
width: calc(66.6% - 15px);
}
.quiz-form__success h3 {
font-size: 2rem;
}
.quiz-form__container:has(.quiz-form__success) {
min-height: 20rem;
}
.footer__copyright {
margin-bottom: 1rem;
}
#car_price {
font-size: 1.5rem;
}
.search-no-results{
margin-bottom: 4rem;
}
.banner__video {
display: none;
}
.car-stats__value small{
font-size: 1.5rem;
margin-top: 0;
}
.countdown-label {
font-size: 1rem;
}
}
@media(width<=768px) {
h1 {
font-size: 1.5rem !important;
}
.banner__title {
font-size: 2rem;
}
.banner__content {
gap: 1.5rem;
}
.swiper-pagination-bullet:first-child::before {
height: 1rem;
}
.swiper-pagination-bullet span {
height: 1rem;
}
.car-country__list {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.car-country__item img {
bottom: -40px;
}
.car-brand__counter span {
font-size: 3rem;
}
h2 {
font-size: 1.5rem;
margin: 0 0 1.5rem 0;
}
.advantages__num {
font-size: 3rem;
width: 55px;
}
.advantages__text {
max-width: 85%;
}
.advantages__grid-item>span {
font-size: 1.25rem;
}
.cars-stock {
grid-template-columns: repeat(4, 1fr);
}
.car-stats__image {
display: none;
}
.car-stats__grid {
width: 100%;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.countdown-item {
font-size: 1.5rem;
}
.offer-countdown__timer {
gap: .75rem;
}
.offer-countdown__text {
font-size: 1.25rem;
}
.offer-countdown {
background-size: cover;
margin-bottom: 2rem;
height: 24rem;
}
.help-purchase__items {
gap: 1rem;
grid-template-columns: repeat(3, 1fr);
}
.help-purchase__form {
width: 100%;
max-width: unset;
padding: 1.5rem;
}
.help-purchase__list {
width: 100%;
}
.how-we-work__number {
font-size: 3rem;
}
.how-we-work__item {
width: 15rem !important;
min-width: 15rem;
}
.how-we-work__dot {
width: 15rem !important;
min-width: 15rem;
}
/* .how-we-work__list {
width: 100%;
overflow-x: auto;
} */
.how-we-work {
padding-bottom: 0;
margin-bottom: 3rem;
}
.how-we-work__list {
margin: 0;
overflow-x: auto;
width: 100%;
padding-bottom: 1rem;
gap: 1rem;
}
.how-we-work__progress {
display: none;
}
.horirontal-controls .swiper-pagination-bullet span {
width: 1rem;
}
.horirontal-controls .swiper-pagination-bullet:first-child::before {
width: 1rem;
}
.car-price-components__title {
font-size: 1.5rem;
margin: 0 0 1.5rem 0;
}
.car-price-components__header {
gap: 1.5rem;
margin-bottom: 2rem;
align-items: start !important;
}
.car-price-components__content {
gap: 1.5rem;
flex-wrap: wrap;
}
.car-price-components__description {
margin: 0;
width: calc(50% - 15px);
}
.car-price-components__item {
max-width: 100%;
padding: 1rem 1rem 1.5rem 1rem;
aspect-ratio: auto;
gap: .75rem;
}
.car-price-components__side {
gap: 1rem;
width: 100%;
}
.car-price-components__image {
width: 100%;
}
.car-price-components__image img {
max-height: 200px;
object-fit: contain;
}
.car-price-components__image::before {
width: auto;
aspect-ratio: 1 / 1;
height: 600px;
background-size: contain;
}
.help-purchase-block .help-purchase__inner>div:first-child>span {
font-size: 1.5rem;
margin: 0
}
.help-purchase-block .help-purchase__inner>div:first-child>p {
font-size: 1rem;
}
.form__inputs input {
padding: .75rem 1rem;
}
.form__inputs input[type="tel"] {
padding: 0;
}
.form__inputs .phone-block {
padding: .75rem 1rem;
}
.posts__items {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.car-country__item {
padding: .75rem 1rem;
aspect-ratio: 45 / 15;
}
.car-country__item img {
max-width: 60%;
}
.about-company {
min-height: 30rem;
width: 100vw;
left: 50%;
position: relative;
transform: translateX(-50%);
}
.about-company__title {
font-size: 1.2rem;
min-height: unset;
}
.about-company__item {
background: rgb(42 42 42 / 15%);
gap: .25rem;
}
.messengers-shortcode__title {
font-size: 1.5rem;
margin: 0;
}
.contact-page__item {
width: 100% !important;
gap: 1rem;
padding: 1rem;
min-height: unset;
}
.contact-page__item--title {
font-size: 1rem;
}
.contact-page__item a {
gap: .75rem;
font-size: 1rem;
}
.contact-page__item:first-child::before,
.contact-page__item:nth-child(2)::before {
transform: translate(-25%, -50%);
z-index: 1;
width: 3rem;
top: unset;
bottom: 0;
left: 50%;
transform: translate(-50%, calc(0% + 26px));
bottom: 0;
}
.messengers-shortcode {
margin-bottom: 1rem;
}
.messengers-page-container {
margin-bottom: 1.5rem !important;
}
.contact-page-items {
margin-bottom: 2.5rem;
gap: 1rem;
}
.rekv__form {
width: 75%;
}
.rekv__form>img {
width: 100%;
top: calc(100% + 90px);
}
.body-type-filters {
gap: 1rem;
}
.class-filters {
gap: 1rem;
}
.filter-form {
gap: 1rem;
}
.body-type-filters {
gap: 1rem;
}
.class-filters>label {
padding: .5rem 1rem;
}
.others-param {
width: calc(50% - 8px);
}
.filter-ranges {
width: 100%;
}
.p_link_text {
width: 100%;
}
.p_link_img {
width: 100%;
max-width: 100%;
max-height: 8rem;
}
.model-info__desc {
gap: 1rem;
align-items: start !important;
}
.car-price-item {
font-size: 1.2rem;
}
.info-desc__text {
max-width: calc(100% - (3.25rem + 12px));
}
.element-item img {
height: 6rem;
}
.answer__item>label {
padding: 1rem;
font-size: 1rem;
}
.answers {
gap: 1rem;
}
.answer__item {
min-height: 4rem;
}
.car-360__chars {
grid-template-columns: repeat(3, 1fr);
}
.car-360__tabs {
gap: 1rem;
width: 100%;
padding: 1rem .75rem;
border-radius: 5px 5px 0 0;
}
.cloudimage-360-inner-box canvas {
transform: translateY(0px);
}
.cloudimage-360-inner-box {
aspect-ratio: 16 / 10;
}
.car-galleries__slider .swiper-wrapper {
gap: 1rem;
}
.car-equipment-tabs {
margin-bottom: 1.5rem;
}
.car-equipment-panel__title {
font-size: 1.2rem;
margin-bottom: .5rem;
}
.presentation__slide {
margin-bottom: 3rem;
}
.presentation__progress-item {
width: 2.5rem !important;
}
.car-galleries__tabs .separator {
display: none;
}
.post-chars__top {
padding: 1rem;
gap: 1rem;
}
.chars-item__value {
font-size: 1rem;
}
.chars-item__title {
font-size: .9rem;
}
.text-slider-container>* {
width: 100%;
gap: 1rem;
}
.footer-center .footer__items {
gap: 2rem;
}
.footer-center .footer__items>* {
width: 100%;
}
.footer__column:nth-child(1)::before,
.footer__column:nth-child(2)::before {
content: none;
}
.footer__column:nth-child(2) {
padding-left: 0;
}
.footer__column:nth-child(3) {
padding-left: 0;
width: 50%;
margin: 0 auto;
}
.footer__copyright {
margin-bottom: 1rem;
}
.advantages__grid-item {
padding: 1rem 1.5rem 1.5rem;
}
.quiz-form__container {
flex-direction: column-reverse;
align-items: center;
gap: 1rem;
}
.quiz-form__left {
width: 75%;
max-width: 100%;
}
.quiz-form__right {
width: 75%;
}
.quiz-form__end>img {
top: -60px;
height: 100px;
}
.quiz-form__success h3 {
font-size: 1.5rem;
margin: 0;
}
}
@media(width<=630px) {
.car-container__left {
max-width: 100%;
}
.car-container__right {
max-width: 100%;
}
}
@media(width<=568px) {
.car-brand__list {
width: 100%;
grid-template-columns: repeat(6, 1fr);
}
.car-brand__desc {
width: 100%;
}
.advantages__grid-item .pretty-button {
width: 100%;
}
.advantages__grid>ul {
grid-template-columns: repeat(1, 1fr);
gap: 1rem;
}
.advantages__grid-item p {
margin-bottom: 1rem;
}
.cars-stock {
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.advantages__grid-item img {
max-width: 8.125rem;
object-fit: contain;
height: auto;
}
.help-purchase__items {
gap: 1rem;
}
.help-purchase {
padding: 1rem;
width: 100vw;
left: 50%;
top: 0;
transform: translate(-50%, 0);
}
.help-purchase__text {
font-size: .875rem;
}
.form__agreement label span {
font-size: .875rem;
}
.car-card__content {
padding: 0 1rem;
}
.car-card .car-condition {
left: 1rem;
top: 1rem;
}
.car-card__title {
font-size: 1.25rem;
}
.car-card__chars--item {
padding-left: .75rem;
}
.car-card__chars--item strong {
font-size: .75rem;
}
.car-card__chars--item>span {
font-size: .75rem;
}
.car-card__chars {
gap: .75rem;
}
.car-price-components__title {
width: 100%;
max-width: 100%;
}
.car-price-components__header {
flex-wrap: wrap;
gap: 0;
}
.car-price-components__description {
width: 100%;
}
.help-purchase-block .help-purchase__inner>div:first-child {
width: 100%;
gap: .75rem;
}
.help-purchase__image img {
width: 75%;
object-fit: contain;
height: auto;
top: unset;
bottom: -30px;
position: relative;
right: 0;
}
.help-purchase__image {
width: 100%;
display: flex;
justify-content: end;
}
.help-purchase-block .help-purchase__inner {
gap: 0;
}
.help-form-bottom {
max-width: 100%;
}
.messengers-column .messengers-shortcode__list {
flex-wrap: wrap;
}
.messengers-column .messengers-shortcode__item {
width: 100% !important;
}
.rekv__form {
width: 100%;
}
.rekv__form>img {
top: calc(100% + 75px);
}
.class-filters {
grid-template-columns: repeat(2, 1fr);
}
.class-filters>label {
min-height: 120px;
}
.filter-range>svg {
display: none;
}
.filter-range>label {
display: none;
}
.filter-range--price {
flex-direction: column;
align-items: start !important;
}
.others-param>legend {
padding: 0.75rem;
font-size: .9rem;
}
.filter-ranges {
padding: 0.75rem;
}
.body-type-filters>label {
padding: .5rem .25rem;
padding: 0;
}
.brand-filters>label {
padding: .5rem .25rem;
padding: .25rem;
}
.body-type-filters>label>span {
font-size: .9rem;
}
.brand-filters>label>span {
font-size: .9rem;
}
.body-type-filters {
grid-template-columns: repeat(4, 1fr);
gap: .75rem;
padding: 0.5rem 0.25rem 0.5rem;
}
.brand-filters {
grid-template-columns: repeat(4, 1fr);
gap: .75rem;
padding: 0.5rem 0.25rem 0.5rem;
}
.filter-range__inputs input {
font-size: .9rem;
max-width: 70px;
}
.filter-list>li label {
font-size: .9rem;
}
.filter-list>li label input {
width: 1rem;
height: 1rem;
}
.filter-range__input-min {
text-align: start;
}
.filter-range__input-max {
text-align: end;
}
#range-slider-price {
width: calc(100% - 20px);
top: 10px;
}
.filter-list-wrapper {
padding-right: 0;
}
.news-content {
margin-bottom: 2rem;
}
.product-breadcrumbs {
padding: .6rem 0;
}
.header__inner {
padding: .6rem 0;
}
.answers-bottom {
gap: 1rem;
flex-direction: column-reverse;
width: 100%;
}
.question-counter {
width: 100%;
}
.answers-controls {
gap: 1rem;
width: 100%;
}
.answers-controls>* {
width: calc(50% - .5rem);
font-size: 1rem;
}
.answer__item>label {
padding: 1rem .75rem;
}
.answer__item input {
width: 1rem;
height: 1rem;
}
.answer__item>label p {
max-width: calc(100% - 2rem);
}
dialog {
padding: 0 1.5rem;
width: calc(100% - 15px);
min-height: 50vh;
}
dialog>form[method="dialog"] {
/* right: 1rem;
top: 1rem; */
}
dialog>form[method="dialog"]>button[type="submit"] {
max-width: 1rem;
}
dialog>form[method="dialog"]>button[type="submit"]>svg {
width: 100%;
height: 100%;
}
.feature-media__background {
min-height: 15rem;
}
.model-feature__media {
min-height: 15rem;
}
.cloudimage-360-inner-box {
border-radius: 0 0px 100px 5px;
}
.car-360-controls {
bottom: 40px;
}
.car-equipment-panel__cols {
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1rem;
}
.presentation__title {
font-size: 1.2rem;
margin-bottom: 1rem;
}
.reasons-block__content {
width: 100%;
}
.reasons-block__image {
width: 50%;
margin: 0 auto;
}
.car-years-tabs {
gap: 1rem;
margin-bottom: 2rem;
}
.reasons-block__inner {
flex-direction: column-reverse;
}
.faq-tab--active {
background: var(--button-grey);
border-color: var(--main-yellow);
}
.faq-tab--active>span {
color: var(--main-yellow) !important;
}
.faq-tab {
padding: .5rem .7rem !important;
min-height: unset !important;
}
.info-desc__text {
max-width: 100%;
}
.car-page-content {
margin-bottom: 1rem;
}
.reasons-block__content {
gap: 1rem;
}
.faq-tabs {
gap: 1rem;
}
#chars_dialog {
padding: 0 1.5rem;
}
.post-chars__top {
flex-wrap: wrap;
}
.post-brand__text {
width: 100%;
}
.post-brand__button {
margin-left: 0;
width: 100%;
}
.text-slider-container>* {
gap: .5rem;
}
.post-brand__button .pretty-button {
width: 100%;
}
.post-chars-buttons>* {
width: 100%;
}
.post-chars-buttons {
gap: 1rem;
}
.car-additional-info>* {
width: 100%;
gap: 1rem;
}
.chars-dialog__items {
gap: .75rem 1rem;
}
.chars-dialog__list>li {
padding-left: 24px;
}
.chars-dialog__item {
gap: .7rem;
}
.dialog-container {
/* padding-top: 3rem; */
}
.chars-dialog__content {
gap: 1rem;
}
.chars-dialog__list {
margin: 0;
padding: 0;
gap: 1rem;
list-style: none;
grid-template-columns: repeat(1, 1fr);
}
.chars-dialog__section {
gap: 1rem;
}
.chars-dialog__group-title {
font-size: 1.2rem;
}
#chars_dialog {
height: 90vh;
height: 90dvh;
}
.post-chars__item {
display: flex;
flex-direction: column;
gap: 4px;
}
.footer-center .footer__items>* {
width: 100%;
}
.footer-bottom>.container>div {
flex-direction: column;
gap: .75rem;
margin-bottom: 0;
}
.footer-top__logo img {
max-width: 7rem;
}
.quiz-form__success::before {
height: 80px;
top: -100px;
}
.quiz-form__container:has(.quiz-form__success) {
justify-content: center;
}
.quiz-form__container {
padding: 1.5rem 1rem;
}
.quiz-form__right {
width: 100%;
}
.quiz-form__left {
width: 100%;
padding: 1rem;
}
.quiz-form__end>img {
top: -40px;
height: 80px;
transform: translate(25%, -50%);
}
.quiz-form__success h3 {
font-size: 1.2rem;
margin: 0;
}
}
@media(width<=478px) {
.cars-grid {
grid-template-columns: repeat(1, 1fr);
}
.p-link-item[rel="prev"] .p-link__item__body>div {
flex-direction: column;
align-items: start;
}
.p-link-item[rel="next"] .p-link__item__body>div {
flex-direction: column-reverse;
align-items: end;
}
.model-elements {
grid-template-columns: repeat(1, 1fr);
}
.element-item img {
height: 10rem;
}
.reasons-block__image {
width: 100%;
height: 15rem;
}
.chars-dialog__items {
gap: 1rem 1.5rem;
grid-template-columns: repeat(1, 1fr);
}
.quiz-form__success::before {
height: 80px;
top: -70px;
}
}
@media(width<=425px) {
.car-country__list {
grid-template-columns: repeat(1, 1fr);
}
.car-brand__desc {
width: 100%;
}
.car-brand__list {
width: 100%;
grid-template-columns: repeat(5, 1fr);
}
.cars-stock {
grid-template-columns: repeat(3, 1fr);
}
.car-stats__value small {
font-size: 1.2rem;
line-height: 100%;
margin-top: 0;
}
.car-stats__value {
font-size: 2rem;
}
.car-stats__grid {
gap: 1rem;
}
.help-purchase__items {
gap: 1rem;
grid-template-columns: repeat(2, 1fr);
}
.posts__items {
grid-template-columns: repeat(1, 1fr);
}
.class-filters>label>img {
width: 10rem;
}
.class-filters>label>span {
max-width: min-content;
}
.body-type-filters>label>img {
max-width: 2rem;
width: 2rem;
}
.brand-filters>label>img {
max-width: 2rem;
width: 2rem;
height: 2rem;
}
.others-param {
width: 100%;
}
.others-param>legend::before {
right: 10px;
}
.p-link {
gap: 1rem;
}
.p-link-item {
width: calc(50% - .5rem);
}
.car-360__chars {
grid-template-columns: repeat(2, 1fr);
}
.car-equipment-panel__title img {
width: 1.5rem;
height: 1.5rem;
}
}
@media(width<=380px) {
.car-stats__grid {
grid-template-columns: repeat(1, 1fr);
}
.car-stats__item:first-child::before {
content: 'или';
top: 100%;
left: 50%;
transform: translate(-50%, calc(-50% + 7px));
}
.rekv__form>img {
top: calc(100% + 45px);
}
.p-link-item {
width: 100%;
}
.quiz-form__success::before {
height: 60px;
}
}
@media (hover: none) and (pointer: coarse) {
.cursor-blur {
display: none;
}
.faq-tab--active span {
color: #000;
}
}