@font-face {
font-family: "Verano Sans";
font-style: normal;
font-weight: 400;
font-display: swap;
src:
url(//sto93.ru/wp-content/themes/tyaga-theme/assets/fonts/VeranoSans-Regular.woff2) format("woff2");
}
@font-face {
font-family: "Verano Sans";
font-style: normal;
font-weight: 500;
font-display: swap;
src:
url(//sto93.ru/wp-content/themes/tyaga-theme/assets/fonts/VeranoSans-Medium.woff2) format("woff2");
}
@font-face {
font-family: "Verano Sans";
font-style: normal;
font-weight: 700;
font-display: swap;
src:
url(//sto93.ru/wp-content/themes/tyaga-theme/assets/fonts/VeranoSans-Bold.woff2) format("woff2");
}
@font-face {
font-family: "Kelson Sans RU";
font-style: normal;
font-weight: 400;
font-display: swap;
src:
url(//sto93.ru/wp-content/themes/tyaga-theme/assets/fonts/KelsonSansRU-Normal.woff2) format("woff2");
}
@font-face {
font-family: "Kelson Sans RU";
font-style: normal;
font-weight: 700;
font-display: swap;
src:
url(//sto93.ru/wp-content/themes/tyaga-theme/assets/fonts/kelsonsans_boldru.woff2) format("woff2");
}
:root {
--black-logo: #2b2a28;
--tekst-zagolovkm: #090415;
--blue-dark: #2b2c40;
--blue: #2b3a7f;
--grey: #484e62;
--text-medium: #4c4d51;
--text-light-2: #d0d0d8;
--text-light: #e4e4e4;
--light-grey: #f6f6f6;
--knopka---akcentnyy: #da4c3e;
--red-logo: #e63c23;
--blue-logo-dark-theme: #4b66b6;
--blue: #6dacf3;
--blue-light: #dfecfb;
--mistake-input: #ffece3;
--belyy: #fff;
--text: #84858f;
--fon-kartochki: #f6f6f6;
--seryy: #484e62;
--font-family: "Verano Sans", sans-serif;
--second-family: "Kelson Sans RU", sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-family);
font-weight: 400;
display: flex;
flex-direction: column;
}
html,
body {
height: 100%;
margin: 0;
}
.container {
max-width: 1240px;
margin: 0 auto;
}
h1 {
font-size: 50px;
}
.btn-main {
background: var(--knopka---akcentnyy);
padding: 10px 14px;
font-family: var(--second-family);
font-weight: 400;
font-size: 18px;
line-height: 130%;
color: var(--belyy);
border: none;
cursor: pointer;
max-height: 60px;
transition: all .3s linear;
position: relative;
display: inline-block;
overflow: hidden;
z-index: 1;
text-decoration: none;
}
.btn-main::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, #6dacf3 0%, #65558f 100%);
opacity: 0;
transition: opacity 0.4s ease;
z-index: 0;
}
.btn-main:hover::before {
opacity: 1;
}
.btn-main span,
.btn-main a {
position: relative;
z-index: 1;
}
.btn-main:focus-visible {
outline: none !important;
} header.header {
padding-top: 33px;
}
.header .container {
display: flex;
justify-content: space-between;
}
.header__logo {
max-width: 175px;
width: 100%;
height: 121px;
margin-bottom: -32px;
}
.header__logo svg {
width: 100%;
height: auto;
}
.header__top {
display: flex;
gap: 40px;
align-items: flex-end;
padding-bottom: 20px;
}
.header__bottom--bg {
background: linear-gradient(270deg, #dfecfb 0%, #f5f5eb 100%);
}
.header__search {
position: relative;
}
#search-input {
min-width: 400px;
padding: 8px 8px 8px 38px;
border: 0;
border-bottom: 1px solid var(--text-medium);
font-family: var(--font-family);
font-weight: 500;
font-size: 18px;
color: var(--text-medium);
}
#search-input::placeholder {
font-family: var(--font-family);
font-weight: 400;
font-size: 14px;
line-height: 140%;
color: var(--text);
}
#search-input:focus-visible {
outline: none;
}
.header__search {
position: relative;
max-width: 400px;
width: 100%;
}
.header__search::before {
content: url(//sto93.ru/wp-content/uploads/2025/07/search.svg);
width: 18px;
height: 18px;
position: absolute;
left: 12px;
top: 10px;
display: inline-block;
z-index: 9;
}
#search-results {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #fff;
max-height: 200px;
overflow-y: auto;
display: none;
z-index: 1000;
}
#search-results ul {
list-style: none;
padding: 0;
margin: 0;
}
#search-results li {
padding: 10px;
}
#search-results li:hover {
background: #f0f0f0;
}
#search-results a {
text-decoration: none;
font-family: var(--font-family);
font-weight: 500;
font-size: 18px;
color: var(--text-medium);
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.search-type-label {
font-family: var(--font-family);
font-weight: 500;
font-size: 10px;
color: var(--text);
}
.search-error {
font-family: var(--font-family);
font-weight: 500;
font-size: 18px;
color: var(--text-medium);
padding: 10px;
}
.header__btn {
min-width: 265px;
height: 54px;
}
.header__contacts {
display: flex;
flex-direction: column;
gap: 12px;
max-width: 220px;
width: 100%;
}
.header__contacts--block {
display: flex;
gap: 28px;
align-items: center;
}
.header__contacts--num {
font-family: var(--second-family);
font-weight: 400;
font-size: 18px;
line-height: 130%;
color: var(--tekst-zagolovkm);
text-decoration: none;
}
.header__contacts--name {
font-family: var(--font-family);
font-weight: 400;
font-size: 14px;
line-height: 140%;
color: var(--blue);
}
.header__bottom--bg .container {
justify-content: flex-end;
padding: 12px 0;
}
.header__bottom {
display: flex;
align-items: center;
gap: 70px;
}
.header__menu {
position: relative;
overflow: visible;
}
.header__menu ul {
display: flex;
align-items: center;
gap: 30px;
}
.header__menu ul li {
list-style: none;
position: relative;
padding: 10px;
}
.header__menu ul li a {
font-family: var(--second-family);
font-weight: 400;
font-size: 18px;
line-height: 130%;
color: var(--tekst-zagolovkm);
text-decoration: none;
transition: color .3s linear;
}
.header__menu ul li a:hover {
color: var(--knopka---akcentnyy);
}
.header__menu--dropdown>a.header__menu--main {
position: relative;
padding-right: 18px;
}
.header__menu--dropdown>a.header__menu--main::after {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%) rotate(180deg);
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 6px solid var(--tekst-zagolovkm);
transition: transform 0.3s ease, border-bottom-color 0.3s ease;
}
.header__menu--dropdown:hover>a.header__menu--main::after {
transform: translateY(-50%) rotate(0deg);
border-bottom-color: var(--knopka---akcentnyy);
}
.header__menu ul li ul.header__dropdown--block {
display: none;
flex-direction: column;
align-items: flex-start !important;
position: absolute;
top: 55px;
gap: 10px;
left: 0;
background: white;
padding: 10px 0;
min-width: 188px;
box-shadow: 0 0 1px 0 #bcbcb7;
z-index: 999;
}
.header__address {
display: flex;
align-items: center;
max-width: 209px;
gap: 7px;
}
.header__address--icon svg {
width: 24px;
height: 24px;
}
.header__address--title {
font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
color: var(--text-medium) !important;
text-decoration: none !important;
} footer.footer {
background: var(--blue-dark);
margin-top: auto;
}
.footer .container {
padding: 40px 0;
display: flex;
}
.footer__left {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
margin-right: 110px;
}
.footer__right--top {
display: flex;
justify-content: space-between;
flex: 1;
}
.footer__right--bot {
display: flex;
justify-content: space-between;
min-width: 209px;
margin-left: 110px;
}
.footer__right {
display: flex;
width: 100%;
justify-content: space-between;
}
.footer__logo {
width: 158px;
height: 110px;
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
}
.footer__logo svg {
width: 100%;
height: auto;
}
.footer__rules {
font-family: var(--font-family);
font-weight: 400;
font-size: 11px;
line-height: 140%;
color: var(--belyy);
}
.footer__services,
.footer__about,
.footer__social,
.footer__contacts {
display: flex;
flex-direction: column;
gap: 30px;
}
.footer__contacts--blocks {
display: flex;
flex-direction: column;
gap: 24px;
}
.footer__menu--title {
font-family: var(--second-family);
font-weight: 400;
font-size: 24px;
color: var(--light-grey);
}
.footer__menu--items ul {
display: flex;
flex-direction: column;
gap: 14px;
}
.footer__menu--items ul li {
list-style: none;
}
.footer__menu--items ul li a {
font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
color: var(--text-light-2);
text-decoration: none;
cursor: pointer;
transition: color .3s linear;
display: flex;
align-items: center;
gap: 18px;
}
.footer__menu--items ul li a:hover {
color: var(--knopka---akcentnyy);
}
.footer__menu--icon:not(.ok) svg {
width: 24px;
height: 24px;
stroke: var(--text-light-2);
}
.footer__menu--icon.ok svg rect {
stroke: var(--text-light-2);
transition: stroke .3s linear;
}
.footer__menu--icon.ok svg path {
fill: var(--text-light-2);
transition: fill .3s linear;
}
.footer__menu--icon svg {
transition: all .3s linear;
}
.footer__menu--items ul li {
display: flex;
gap: 16px;
align-items: center;
justify-content: flex-start;
}
.footer__menu--items ul li:hover .footer__menu--icon:not(.ok) svg,
.footer__menu--items ul li:hover .footer__menu--icon.ok svg rect {
stroke: var(--knopka---akcentnyy);
}
.footer__menu--items ul li:hover .footer__menu--icon.ok svg path {
fill: var(--knopka---akcentnyy)
}
.footer__contacts--block {
display: flex;
align-items: center;
gap: 12px;
max-width: 209px;
}
.footer__contacts--icon svg {
width: 24px;
height: 24px;
}
.footer__contacts--info {
font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
line-height: 140%;
color: var(--text-light-2) !important;
gap: 10px;
display: flex;
flex-direction: column;
text-decoration: none !important;
}
.footer__contacts--info a {
text-decoration: none;
color: var(--text-light-2);
} .footer__menu--dropdown {
position: relative;
}
.footer__menu--dropdown ul.footer__dropdown--block {
display: none;
position: absolute;
top: 100%;
left: 0;
background: var(--blue-dark);
min-width: 200px;
padding: 10px 0;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
z-index: 999;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.footer__menu--dropdown ul.footer__dropdown--block li {
padding: 8px 16px;
border-bottom: none;
}
.footer__menu--dropdown ul.footer__dropdown--block li:last-child {
border-bottom: none;
}
.footer__menu--dropdown ul.footer__dropdown--block li a {
font-size: 14px;
padding: 4px 0;
display: block;
border-bottom: none;
}
.footer__menu--dropdown:hover ul.footer__dropdown--block {
display: block;
}
.footer__menu--main {
position: relative;
}
.footer__menu--main::after {
content: '';
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%) rotate(180deg);
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 6px solid var(--text-light-2);
transition: transform 0.3s ease;
}
.footer__menu--dropdown:hover .footer__menu--main::after {
transform: translateY(-50%) rotate(0deg);
}
.privacy-policy-link {
display: flex;
align-items: center;
padding: 20px;
margin-top: -40px;
}
.privacy-policy-link .container {
padding: 0 !important;
}
.privacy-policy-link a {
font-family: var(--font-family);
font-weight: 500;
font-size: 12px;
line-height: 140%;
color: var(--text-light-2);
text-decoration: none;
transition: color .3s linear;
opacity: 0.5;
text-align: center;
}
.privacy-policy-link a:hover {
color: var(--knopka---akcentnyy);
}
.breadcrumbs {
display: flex;
font-family: var(--font-family);
font-weight: 500;
font-size: 18px;
color: var(--text);
margin-bottom: 50px;
}
.breadcrumbs__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.breadcrumbs__item a {
text-decoration: none;
font-family: var(--font-family);
font-weight: 500;
font-size: 18px;
color: var(--text);
transition: color .3s linear;
}
.breadcrumbs__item a:hover {
color: var(--knopka---akcentnyy);
}
.breadcrumbs__item span[aria-current="page"] {
color: var(--text-medium);
} .contact-panel {
background-color: var(--blue-dark);
color: var(--belyy);
padding: 40px;
max-width: 450px;
width: 100%;
}
.contact-panel__title {
font-family: var(--font-family);
font-weight: 700;
font-size: 24px;
color: var(--belyy);
text-align: center;
margin-bottom: 40px;
}
.cf {
display: flex;
flex-direction: column;
}
.cf__btn {
padding: 18px 0 !important;
}
.cf__field {
position: relative;
margin-bottom: 16px;
}
.cf__field.cf__message {
margin-bottom: 5px;
}
.cf__label {
position: absolute;
left: 15px;
top: 18px;
font-family: var(--font-family);
font-weight: 400;
font-size: 16px;
line-height: 130%;
color: var(--text-light-2);
pointer-events: none;
transition: transform .18s ease, font-size .18s ease, top .18s ease, opacity .18s ease;
background: transparent;
padding-right: 10px;
}
.cf__input,
.cf__textarea {
width: 100%;
min-height: 56px;
background: var(--grey);
color: var(--belyy);
border: 1px solid var(--text);
padding: 20px 14px 4px 14px;
outline: none;
font-family: var(--font-family);
font-weight: 400;
font-size: 16px;
line-height: 130%;
}
#contactForm .cf__field:nth-child(3) {
max-height: 186px;
}
.cf__textarea {
min-height: 122px;
padding: 20px 14px 15px 14px;
max-height: 186px;
}
.cf__select {
width: 100%;
min-height: 56px;
background: var(--grey);
color: var(--belyy);
border: 1px solid var(--text);
padding: 20px 14px 4px 14px;
outline: none;
font-family: var(--font-family);
font-weight: 400;
font-size: 16px;
line-height: 130%;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px 16px;
cursor: pointer;
}
.cf__select option {
background: var(--grey);
color: var(--belyy);
padding: 8px 12px;
}
.cf__select optgroup {
background: var(--blue-dark);
color: var(--text-light);
font-weight: 500;
padding: 8px 12px;
}
.cf__select:focus {
border-color: var(--knopka---akcentnyy);
}
.cf__field.has-error .cf__select {
border-color: #e47a7a;
background-color: var(--mistake-input);
color: var(--knopka---akcentnyy);
}
.cf__field.is-filled .cf__label,
.cf__field.is-focus .cf__label {
top: 6px;
font-size: 11px;
transform: translateY(0);
}
.cf__error {
position: absolute;
left: 12px;
top: -26px;
background: var(--mistake-input);
color: var(--knopka---akcentnyy);
font-size: 13px;
padding: 4px 8px;
border: 1px solid #f3c1c1;
border-radius: 4px;
display: none;
max-width: 100%;
z-index: 2;
}
.cf__field--checkbox .cf__error {
left: 20px;
top: -50px;
}
.cf__field--checkbox.has-error .cf__checkbox-text {
color: var(--knopka---akcentnyy);
}
.cf__field.has-error .cf__error {
display: inline-block;
}
.cf__field.has-error .cf__input,
.cf__field.has-error .cf__textarea {
border-color: var(--knopka---akcentnyy);
background-color: var(--mistake-input);
color: var(--knopka---akcentnyy);
}
.cf__field.has-error label {
color: var(--knopka---akcentnyy);
}
.cf__hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
} .cf-modal {
position: fixed;
inset: 0;
display: block;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .25s ease, visibility .25s step-end;
z-index: 9999;
}
.cf-modal.is-open {
display: block;
}
.cf-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .45);
}
.cf-modal__dialog {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(.98);
transition: transform .25s ease, opacity .25s ease;
opacity: .0;
width: min(560px, 92vw);
background: #252a3a;
color: #fff;
text-align: center;
box-shadow: 0 12px 48px rgba(0, 0, 0, .35);
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 25px;
}
.cf-modal__dialog .cf-modal__logo {
align-self: center;
margin-bottom: 0;
}
.cf-modal-logo-bg {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 10px;
background: linear-gradient(270deg, #dfecfb 0%, #f5f5eb 100%);
padding: 20px 0;
}
.cf-modal__title {
font-size: 28px;
font-weight: 800;
letter-spacing: .02em;
margin: 0 0 12px;
padding: 0 25px;
}
.cf-modal__text {
margin: 6px 0;
color: #cdd3df;
padding: 0 25px;
}
.cf-modal__close {
position: absolute;
top: 8px;
right: 10px;
width: 36px;
height: 36px;
border-radius: 6px;
border: 0;
background: #1e2231;
color: #fff;
cursor: pointer;
font-size: 22px;
line-height: 1;
display: none;
}
body.cf-modal-open {
overflow: hidden;
}
.cf-modal.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity .25s ease, visibility .25s step-start;
}
.cf-modal.is-open .cf-modal__dialog {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.cf-modal.is-closing {
opacity: 0;
visibility: visible;
pointer-events: none;
}
.cf-modal.is-closing .cf-modal__dialog {
opacity: 0;
transform: translate(-50%, -50%) scale(.98);
} .header-popup {
position: fixed;
inset: 0;
display: flex;
align-items: center;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .3s ease, visibility .3s step-end;
z-index: 9999;
overflow-y: auto;
padding: 20px;
}
.header-popup.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity .3s ease, visibility .3s step-start;
}
.header-popup__backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .6);
cursor: pointer;
}
.header-popup__dialog {
position: relative;
max-width: 1240px;
width: 100%;
margin: 0 auto;
background: var(--blue-dark);
border-radius: 0;
transform: scale(.95);
transition: transform .3s ease;
z-index: 1;
margin-top: 50px;
margin-bottom: 50px;
display: flex;
min-height: 500px;
}
.header-popup.is-open .header-popup__dialog {
transform: scale(1);
}
.header-popup__content {
display: flex;
width: 100%;
position: relative;
}
.header-popup__close {
position: absolute;
top: 15px;
right: 15px;
width: 30px;
height: 30px;
border-radius: 4px;
border: 0;
color: var(--belyy);
background: none;
cursor: pointer;
font-size: 18px;
line-height: 1;
transition: color 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.header-popup__close:hover {
color: var(--knopka---akcentnyy);
}
.header-popup__close svg {
width: 24px;
height: 24px;
}
.header-popup__main {
display: flex;
padding: 60px;
gap: 40px;
width: 100%;
}
.header-popup__left {
flex: 0 0 350px;
display: flex;
flex-direction: column;
}
.header-popup__right {
flex: 1;
position: relative;
overflow: hidden;
}
.header-popup__image {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.header-popup__header {
margin-bottom: 40px;
}
.header-popup__mobile {
display: none;
}
.header-popup__title {
font-family: var(--second-family);
font-weight: 700;
font-size: 36px;
text-transform: uppercase;
color: var(--belyy);
} .cf--popup {
background: transparent;
padding: 0;
flex: 1;
display: flex;
flex-direction: column;
gap: 0 !important;
}
.cf--popup .cf__actions {
margin-top: auto;
}
.cf--popup .cf__btn {
width: 100%;
}
.cf--popup .cf__note {
text-align: center;
color: var(--knopka---akcentnyy);
font-family: var(--font-family);
font-size: 14px;
}
.cf--popup .cf__input,
.cf--popup .cf__textarea,
.cf--popup .cf__select {
background: var(--grey);
border: 1px solid var(--text);
color: var(--belyy);
font-size: 14px;
min-height: 48px;
padding: 15px 12px 5px 12px;
}
.cf--popup .cf__textarea {
min-height: 80px;
padding: 20px 12px 8px 12px;
resize: vertical;
}
.cf--popup .cf__input:focus,
.cf--popup .cf__textarea:focus,
.cf--popup .cf__select:focus {
border-color: var(--knopka---akcentnyy);
outline: none;
}
.cf--popup .cf__textarea {
max-height: 186px;
}
.cf--popup .cf__label {
font-family: var(--font-family);
font-weight: 400;
font-size: 16px;
line-height: 130%;
color: var(--text-light-2);
top: 15px;
left: 12px;
}
#autopartPopupForm .cf__field:nth-child(3) label {
font-size: 14px;
}
#autopartPopupForm .cf__field:nth-child(3).is-focus label {
font-size: 10px;
}
.cf--popup .cf__field.is-filled .cf__label,
.cf--popup .cf__field.is-focus .cf__label {
top: 6px;
font-size: 10px;
color: rgba(255, 255, 255, 0.8);
z-index: 99;
} .cf--popup .cf__custom-select-wrapper {
position: relative;
}
.cf--popup .cf__custom-select {
width: 100%;
min-height: 48px;
background: var(--grey);
border: 1px solid var(--text);
padding: 15px 40px 5px 12px;
outline: none;
font-family: var(--font-family);
font-weight: 400;
font-size: 14px;
line-height: 130%;
color: var(--belyy);
cursor: pointer;
position: relative;
display: flex;
align-items: center;
user-select: none;
}
.cf--popup .cf__custom-select-value {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 6px;
font-family: var(--font-family);
font-weight: 400;
font-size: 16px;
line-height: 130%;
color: var(--text-light-2);
}
.cf--popup .cf__custom-select-arrow {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
pointer-events: none;
transition: transform 0.2s ease;
}
.cf--popup .cf__custom-select.active .cf__custom-select-arrow {
transform: translateY(-50%) rotate(180deg);
}
.cf--popup .cf__custom-select:focus {
border-color: var(--knopka---akcentnyy);
}
.cf--popup .cf__custom-select-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--grey);
border: 1px solid var(--text);
border-top: none;
max-height: 200px;
overflow-y: auto;
z-index: 1000;
display: none;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.cf--popup .cf__custom-select-dropdown.active {
display: block;
}
.cf--popup .cf__custom-select-item {
padding: 12px 16px;
cursor: pointer;
border-bottom: 1px solid var(--text);
transition: background-color 0.2s ease;
font-family: var(--font-family);
font-weight: 400;
font-size: 16px;
color: var(--text-light-2);
}
.cf--popup .cf__custom-select-item--child {
padding-left: 32px;
color: var(--text-light-2);
}
.cf--popup .cf__custom-select-item:hover,
.cf--popup .cf__custom-select-item.highlighted {
background-color: var(--blue-dark);
}
.cf--popup .cf__custom-select-item:last-child {
border-bottom: none;
}
.cf--popup .cf__custom-select-item.selected {
background-color: var(--knopka---akcentnyy);
color: white;
} .cf--popup .cf__custom-select-dropdown::-webkit-scrollbar {
width: 8px;
}
.cf--popup .cf__custom-select-dropdown::-webkit-scrollbar-track {
background: var(--grey);
}
.cf--popup .cf__custom-select-dropdown::-webkit-scrollbar-thumb {
background: var(--text);
border-radius: 4px;
}
.cf--popup .cf__custom-select-dropdown::-webkit-scrollbar-thumb:hover {
background: var(--text-light);
} .cf--popup .cf__field.is-filled .cf__custom-select,
.cf--popup .cf__field.is-focus .cf__custom-select {
padding-top: 18px;
padding-bottom: 5px;
}
.cf--popup .cf__field.has-error .cf__custom-select {
border-color: var(--knopka---akcentnyy);
background-color: var(--mistake-input);
color: var(--knopka---akcentnyy);
}
.cf--popup .cf__field.has-error .cf__custom-select-value {
color: var(--knopka---akcentnyy);
} .cf--popup .cf__field {
position: relative;
}
.cf--popup .cf__select-icon {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
transition: transform 0.2s ease;
color: var(--text-light-2);
z-index: 1;
height: 16px;
}
.cf--popup .cf__field.is-select-open .cf__select-icon {
transform: translateY(-50%) rotate(180deg);
}
.cf--popup .cf__select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: none;
cursor: pointer;
padding-right: 40px;
}
.cf--popup .cf__select option {
background: var(--grey);
color: var(--belyy);
}
body.header-popup-open {
overflow: hidden;
}
body.mobile-contacts-open {
overflow: hidden;
}
body.mobile-menu-open {
overflow: hidden;
} .mobile-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: var(--belyy);
transform: translateX(-100%);
transition: transform 0.3s ease;
z-index: 1000;
overflow-y: auto;
display: none;
}
.mobile-menu.is-open {
transform: translateX(0);
}
.mobile-menu__content {
padding: 80px 0 40px;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.mobile-menu__logo {
display: flex;
flex-direction: column;
align-items: center;
}
.mobile-menu__logo-img {
display: inline-block;
width: 135px;
height: 93px;
background-image: url(//sto93.ru/wp-content/uploads/2025/07/logo.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: 99;
}
.mobile-menu__logo-line {
background: linear-gradient(270deg, #dfecfb 0%, #f5f5eb 100%);
height: 38px;
width: 100%;
margin-top: -30px;
}
.mobile-menu__nav {
padding: 0 40px;
}
.mobile-menu__nav>ul {
list-style: none;
padding: 0;
margin: 0;
}
.mobile-menu__nav>ul>li {
border-bottom: 1px solid var(--text-light);
}
.mobile-menu__nav>ul>li>a {
display: block;
padding: 18px 0;
font-family: var(--second-family);
font-weight: 400;
font-size: 18px;
line-height: 130%;
color: var(--tekst-zagolovkm);
text-decoration: none;
transition: color 0.3s ease;
}
.mobile-menu__nav>ul>li>a:hover {
color: var(--knopka---akcentnyy);
}
.mobile-menu__dropdown>.mobile-menu__main {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 0;
font-family: var(--font-family);
font-weight: 500;
font-size: 18px;
color: var(--tekst-zagolovkm);
text-decoration: none;
transition: color 0.3s ease;
}
.mobile-menu__dropdown>.mobile-menu__main::after {
content: '';
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 7px solid var(--tekst-zagolovkm);
transition: transform 0.3s ease, border-top-color 0.3s ease;
}
.mobile-menu__dropdown.active>.mobile-menu__main::after {
transform: rotate(180deg);
border-top-color: var(--knopka---akcentnyy);
}
.mobile-menu__dropdown.active>.mobile-menu__main {
color: var(--knopka---akcentnyy);
}
.mobile-menu__submenu {
list-style: none;
padding: 0;
margin: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.mobile-menu__dropdown.active .mobile-menu__submenu {
max-height: 500px;
}
.mobile-menu__submenu li {
padding-left: 20px;
}
.mobile-menu__submenu li a {
display: block;
padding: 12px 0;
font-family: var(--second-family);
font-weight: 400;
font-size: 14px;
line-height: 130%;
color: var(--tekst-zagolovkm);
text-decoration: none;
transition: color 0.3s ease;
}
.mobile-menu__submenu li a:hover {
color: var(--knopka---akcentnyy);
}
.mobile-menu__footer {
margin-top: auto;
padding: 30px 40px 0 40px;
display: flex;
flex-direction: column;
gap: 50px;
}
.mobile-menu__footer-top {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.mobile-menu__btn {
width: 60%;
padding: 16px 20px !important;
font-size: 16px !important;
}
.mobile-menu__address {
display: flex;
align-items: center;
gap: 10px;
}
.mobile-menu__address--icon svg {
width: 20px;
height: 24px;
flex-shrink: 0;
}
.mobile-menu__address--title {
font-family: var(--font-family);
font-weight: 500;
font-size: 14px;
color: var(--text-medium) !important;
line-height: 1.4;
text-decoration: none !important;
}
.mobile-menu__contacts {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 16px;
}
.mobile-menu__contact {
display: flex;
align-items: center;
gap: 20px;
text-decoration: none;
}
.mobile-menu__contact--num {
font-family: var(--second-family);
font-weight: 500;
font-size: 18px;
color: var(--tekst-zagolovkm);
}
.mobile-menu__contact--label {
font-family: var(--font-family);
font-weight: 400;
font-size: 14px;
color: var(--blue);
} .autopart-popup__image {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
} .header__mobile-toggle {
display: none;
align-items: center;
gap: 12px;
background: transparent;
border: none;
cursor: pointer;
padding: 0;
z-index: 1001;
}
.header__mobile-toggle-icon {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 18px;
height: 14px;
}
.header__mobile-toggle-icon span {
display: block;
width: 100%;
height: 2px;
background: var(--text-medium);
transition: all 0.3s ease;
border-radius: 2px;
}
.header__mobile-toggle.active .header__mobile-toggle-icon span:nth-child(1) {
transform: rotate(45deg) translate(5px, 4px);
}
.header__mobile-toggle.active .header__mobile-toggle-icon span:nth-child(2) {
opacity: 0;
}
.header__mobile-toggle.active .header__mobile-toggle-icon span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -3px);
}
.header__mobile-toggle-text {
font-family: var(--second-family);
font-weight: 400;
font-size: 18px;
color: var(--text-medium);
transition: color 0.3s ease;
}
.header__mobile-icons {
display: none;
align-items: center;
gap: 12px;
}
.header__search-icon {
display: none;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: transparent;
border: none;
cursor: pointer;
color: var(--text-medium);
transition: color 0.3s ease;
}
.header__search-icon:hover {
color: var(--knopka---akcentnyy);
}
.header__search-icon svg {
width: 20px;
height: 20px;
}
.header__phone-icon {
display: none;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
background: var(--knopka---akcentnyy);
border: none;
cursor: pointer;
transition: all .3s linear;
position: relative;
overflow: hidden;
z-index: 1;
}
.header__phone-icon svg {
color: var(--belyy);
position: relative;
z-index: 1;
}
.header__phone-icon::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--blue);
opacity: 0;
transition: opacity 0.4s ease;
z-index: 0;
}
.header__phone-icon:hover::before {
opacity: 1;
}
.mobile-contacts-popup {
position: fixed;
top: 0;
right: 0;
display: flex;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .3s ease, visibility .3s step-end;
z-index: 9998;
padding-top: 120px;
}
.mobile-contacts-popup.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity .3s ease, visibility .3s step-start;
}
.mobile-contacts-popup__backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .4);
cursor: pointer;
}
.mobile-contacts-popup__dialog {
position: fixed;
top: 120px;
right: 20px;
width: 320px;
background: var(--belyy);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
transform: translateX(100%);
transition: transform .3s ease;
z-index: 1;
}
.mobile-contacts-popup.is-open .mobile-contacts-popup__dialog {
transform: translateX(0);
}
.mobile-contacts-popup__close {
position: absolute;
top: 12px;
right: 12px;
width: 28px;
height: 28px;
border-radius: 4px;
border: 0;
background: transparent;
color: var(--text-medium);
cursor: pointer;
font-size: 18px;
line-height: 1;
transition: color 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.mobile-contacts-popup__close:hover {
color: var(--knopka---akcentnyy);
}
.mobile-contacts-popup__content {
padding: 48px 24px 24px;
display: flex;
flex-direction: column;
gap: 16px;
}
.mobile-contacts-popup__item {
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px;
background: var(--light-grey);
text-decoration: none;
transition: all .3s ease;
}
.mobile-contacts-popup__item:hover {
background: var(--blue-light);
transform: translateY(-2px);
}
.mobile-contacts-popup__number {
font-family: var(--second-family);
font-weight: 400;
font-size: 20px;
color: var(--tekst-zagolovkm);
}
.mobile-contacts-popup__label {
font-family: var(--font-family);
font-weight: 400;
font-size: 14px;
color: var(--blue);
}
.mobile-contacts-popup__hide {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 8px;
padding: 12px;
background: transparent;
border: 1px solid var(--text-light);
font-family: var(--font-family);
font-weight: 500;
font-size: 14px;
color: var(--text-medium);
cursor: pointer;
transition: all .3s ease;
}
.mobile-contacts-popup__hide:hover {
border-color: var(--knopka---akcentnyy);
color: var(--knopka---akcentnyy);
}
.mobile-contacts-popup__hide svg {
width: 12px;
height: 8px;
stroke: currentColor;
}   .cf__field--checkbox {
margin-bottom: 20px;
}
.cf__checkbox-label {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
user-select: none;
}
.cf__checkbox {
width: 20px;
height: 20px;
min-width: 20px;
border: 2px solid var(--text-medium);
cursor: pointer;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-color: var(--belyy);
transition: all 0.2s ease;
position: relative;
margin-top: 2px;
}
.cf__checkbox:hover {
border-color: var(--blue);
}
.cf__checkbox:checked {
background-color: var(--knopka---akcentnyy);
border-color: var(--knopka---akcentnyy);
}
.cf__checkbox:checked::after {
content: '';
position: absolute;
left: 4px;
top: 0;
width: 6px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.cf__checkbox:focus {
outline: none;
}
.cf__checkbox-text {
font-family: var(--font-family);
font-weight: 400;
font-size: 14px;
color: var(--text-light);
padding-top: 5px;
}
.cf__privacy-link {
color: var(--knopka---akcentnyy);
text-decoration: underline;
transition: color 0.2s ease;
}
.cf__privacy-link:hover {
color: var(--blue);
}
.cf__field--checkbox.has-error .cf__checkbox {
border-color: var(--knopka---akcentnyy);
}
.cf__field--checkbox .cf__error {
display: none;
margin-top: 8px;
font-size: 13px;
color: var(--knopka---akcentnyy);
}
.cf__field--checkbox.has-error .cf__error {
display: block;
}
@media (max-width: 1279px) {
.header>.container {
padding: 0 40px;
position: relative;
}
.header__bottom--bg {
padding: 0 40px;
}
.header__mobile-icons {
display: flex;
order: 2;
padding-bottom: 6px;
}
.header__contacts {
display: none;
}
.header__phone-icon {
display: flex;
}
.header__bottom {
gap: 15px;
}
.header__menu ul {
gap: 5px;
}
.footer .container {
padding: 40px;
}
.header__top {
gap: 30px;
}
.footer__left {
margin-right: 60px;
}
.footer__right--bot {
margin-left: 60px;
}
.contact-panel {
min-width: 0;
padding: 30px;
}
.cf__checkbox-label {
gap: 5px;
}
.cf__checkbox-text {
font-size: 12px;
padding-top: 3px;
}
} @media (max-width: 1023px) {
header.header {
padding-top: 63px;
}
.header>.container {
position: relative;
align-items: center;
padding: 0 40px 14px 40px;
gap: 15px;
}
.header__mobile-toggle {
display: flex;
}
.header__bottom--bg .container {
padding: 0;
height: 38px;
}
.header>.container .header__logo {
position: absolute;
max-width: 135px;
height: 94px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-position: center center;
background-size: cover;
}
.header__mobile-icons {
display: flex;
gap: 16px;
padding-bottom: 0;
}
.header__search-icon {
display: flex;
width: 18px;
height: 18px;
}
.header__top {
display: none;
position: absolute;
top: 183%;
left: 0;
right: 0;
background: var(--belyy);
padding: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
z-index: 999;
}
.header__top.is-search-open {
display: block;
}
.header__search {
max-width: 100%;
}
#search-input {
min-width: 100%;
}
.header__btn {
display: none;
}
.header__bottom--bg .header__bottom {
display: none;
}
.mobile-menu {
display: block;
}
.header-popup__main {
padding: 30px;
}
.header-popup__header {
display: none;
}
.header-popup__main {
flex-wrap: wrap;
gap: 30px;
}
.header-popup__mobile {
display: inline-block;
width: 100%;
}
.header__phone-icon {
background: none;
width: 18px;
height: 18px;
}
.header__phone-icon svg {
color: var(--text-medium);
}
.header__phone-icon::before {
background: none;
}
.header-popup__dialog {
max-width: 90vw;
flex-direction: column;
min-height: auto;
}
.footer__right {
flex-direction: column;
gap: 50px;
}
.footer__right--bot {
margin-left: 0;
}
.footer__contacts {
display: flex;
flex-direction: column;
gap: 30px;
flex: 1;
}
.footer__contacts--blocks {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
}
.footer__contacts--info {
font-size: 14px;
}
.footer__logo {
width: 123px;
height: 80px;
}
.footer__contacts--block:first-child .footer__contacts--info {
max-width: 160px;
}
.contact-panel__title {
font-size: 36px;
text-transform: uppercase;
margin-bottom: 30px;
font-family: var(--second-family);
font-weight: 700;
text-align: start;
}
.cf__checkbox-text {
font-size: 16px;
padding-top: 3px;
}
}
@media (max-width: 959px) {
.cf__checkbox-text {
font-size: 13px;
padding-top: 5px;
}
.breadcrumbs {
margin-bottom: 40px;
}
}
@media (max-width: 767px) {
.header-popup {
padding: 10px;
}
.header-popup__dialog {
margin-top: 20px;
margin-bottom: 20px;
} .mobile-contacts-popup__dialog {
top: 100px;
right: 10px;
left: 10px;
width: auto;
max-width: 340px;
margin: 0 auto;
}
.mobile-contacts-popup__content {
padding: 40px 16px 16px;
}
.mobile-contacts-popup__item {
padding: 12px;
}
.mobile-contacts-popup__number {
font-size: 18px;
}
.header-popup__left {
flex: 1;
}
.header>.container {
padding: 12px 15px;
}
.header__logo {
max-width: 100px;
height: 70px;
}
.mobile-menu__content {
padding: 70px 0 30px;
}
.mobile-menu__nav>ul>li>a,
.mobile-menu__dropdown>.mobile-menu__main {
font-size: 16px;
padding: 16px 0;
}
.mobile-menu__footer {
padding: 30px 15px 0 15px;
}
.mobile-menu__nav {
padding: 0 15px;
}
.mobile-menu__submenu li a {
font-size: 14px;
padding: 10px 0;
}
.footer .container {
flex-direction: column;
gap: 55px;
padding: 40px 15px;
}
.footer__left {
margin-right: 0;
align-self: flex-start;
}
.footer__services,
.footer__about,
.footer__social,
.footer__contacts {
gap: 24px;
}
.header-popup__right {
display: none;
}
.contact-panel {
max-width: 100%;
min-width: auto;
width: 100%;
padding: 30px 20px;
}
.breadcrumbs,
.breadcrumbs__item a {
font-size: 16px;
}
}
@media screen and (max-width: 550px) {
.footer__right--top {
flex-wrap: wrap;
gap: 15px;
}
.footer__services,
.footer__about {
width: 165px;
}
.footer__social {
margin-top: 55px;
}
.footer__right {
gap: 55px;
}
.footer__contacts--block:first-child {
min-width: 100%;
}
.footer__contacts--block:first-child .footer__contacts--info {
max-width: 100%;
}
.footer__social .footer__menu--items ul {
flex-direction: row;
}
.footer__menu--icon span {
display: none;
}
.footer__services,
.footer__about,
.footer__social,
.footer__contacts {
gap: 30px;
}
.header-popup__main {
padding: 30px 15px;
}
.mobile-menu__footer {
gap: 24px;
}
.mobile-menu__footer-top {
flex-direction: column;
align-items: flex-start;
gap: 40px;
}
.mobile-menu__btn {
width: 100%;
}
.contact-panel {
padding: 24px 16px;
}
}
@media screen and (max-width: 474px) {
.mobile-menu__contacts {
flex-direction: column;
align-items: flex-start;
gap: 24px;
}
#search-results a {
font-size: 16px;
}
.breadcrumbs,
.breadcrumbs__item a {
font-size: 14px;
}
.breadcrumbs__list {
gap: 5px;
}
}
@media screen and (max-width: 424px) {
.cf__checkbox-text {
display: flex;
flex-wrap: wrap;
column-gap: 5px;
}
.header-popup__title {
font-size: 28px;
}
}
@media screen and (max-width: 374px) {
.footer__services,
.footer__about {
width: auto;
}
.footer__contacts--block:first-child .footer__contacts--info {
max-width: 160px;
}
.breadcrumbs,
.breadcrumbs__item a {
font-size: 12px;
}
}