html {
scroll-behavior: smooth;
}
.catalog-detailed-hero__car-link {
padding: 16px 10px 16px 0!important;
}
#header .header__mega-columns h4 a {
margin: 0 0 12px;
font-size: 24px;
line-height: 1.15;
font-weight: 700;
color: var(--color-brand-dark);
}
.gform_required_legend {
display: none;
}
#gform_fields_5 .buyout-cta__check-row .gfield_radio {
display: flex;
justify-content: space-between!important;
}
#gform_fields_5 .buyout-cta__check-row .gfield_radio .gform-field-label {
color: #fff;
}
.top-phone__list img {
width: 18px;
height: 18px;
flex: none;
display: block;
}
.about-holder ul img {
width: 44px;
height: 44px;
}
.contacts .gform_body .gform_fields {
row-gap: 16px!important;
}
.contacts .gform_title , .contacts_wrapper .gform_title, .gfield_required{
display: none!important;
}
.contacts.sm-btn button[type="submit"] {
width: min(100%, 430px)!important;
margin: 0 auto!important;
}
.contacts input {
all: unset!important;
width: 100%!important;
border-radius: var(--radius-md)!important;
padding: 16px!important;
background-color: var(--color-white)!important;
border: 1px solid var(--color-border-gray)!important;
color: var(--color-input-muted)!important;
font-size: 16px!important;
font-weight: 400!important;
box-sizing: border-box!important;
transition: border-color 0.25s ease!important;
}
.contacts_wrapper  legend.gfield_label_before_complex, .gfield.gfield--type-text label, .gfield--type-phone label {
margin: 0 0 6px!important;
padding: 0!important;
font-size: 18px!important;
line-height: 1.2!important;
font-weight: 700!important;
}
#gform_submit_button_2 {
width: max-content !important;
margin: auto!important;
}
.contacts_wrapper .gfield-choice-input {
width: 22px!important;
height: 22px!important;
appearance: none!important;
margin: 0!important;
border: 2px solid #aeb8c4!important;
border-radius: 5px!important;
background: #fff!important;
flex: none!important;
display: grid!important;
place-items: center!important;
padding: 0!important;
}
.contacts_wrapper .gfield-choice-input::before {
content: "\2713" !important; height: 18px !important;     z-index: 10;
color: #fff !important;
}
.buyers .gfield-choice-input::before {
content: "\2713" !important; height: 18px !important;     z-index: 10;
color: #000 !important;
background: transparent !important;
}
.contacts_wrapper .gfield-choice-input:checked {
background: #0a58f5!important;
border-color: #0a58f5!important;
}
.buyers .gfield-choice-input:checked {
background: #fff!important;
border-color: #fff!important;
}
.gfield_checkbox label {
font-size: 16px!important;
line-height: 1.2!important;
font-weight: 500;!important;
}
.contacts .button {
width: 100%!important;
}
.button:hover {
transform: translateY(-3px) scale(1.02)!important;
box-shadow: var(--button-shadow-hover)!important;
}
.button--danger {
background: var(--gradient-danger)!important;
--button-shadow-hover: var(--shadow-danger)!important;
--button-shadow-active: var(--shadow-danger-active)!important;
}                                   .popular-car-item > img {
display: block;
height: 90px !important;
object-fit: contain;
width: auto;
max-width: 100%;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.faq--accordion .faq__answer ul li {
font-size: 16px;
}
.faq--accordion .faq__question {
font-weight: 700!important;
}
@media (max-width: 767px) {
.faq--accordion .faq__answer ul li {
font-size: 14px;
}
} .shop-layout {
display: grid;
grid-template-columns: 280px 1fr; gap: 30px;
padding: 40px 0;
align-items: start;
} @media (max-width: 992px) {
.shop-layout {
grid-template-columns: 1fr;
}
}
.shop-sidebar {
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
overflow: hidden;
}
.shop-sidebar h3 {
background: #001f3f; color: #fff;
margin: 0;
padding: 15px 20px;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
}
.filter-content {
padding: 20px;
} .filter-content ul {
list-style: none;
padding: 0;
}
.filter-content li {
padding: 8px 0;
border-bottom: 1px solid #f0f0f0;
}
.shop-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
background: #003366; padding: 10px 20px;
border-radius: 4px;
margin-bottom: 30px;
}
.sku-search input {
padding: 8px 15px;
border-radius: 4px;
border: none;
width: 200px;
}
.view-switcher span {
color: #fff;
font-size: 20px;
margin-right: 15px;
cursor: pointer;
}
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
.product-card {
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 15px;
position: relative;
transition: box-shadow 0.3s ease;
}
.product-card:hover {
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
} .product-badge {
position: absolute;
top: 10px;
left: 10px;
background: #4a90e2;
color: #fff;
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
z-index: 2;
}
.product-image {
margin-bottom: 15px;
text-align: center;
}
.product-image img {
max-width: 100%;
height: auto;
}
.product-title {
font-size: 15px;
font-weight: 700;
margin-bottom: 15px;
min-height: 40px;
line-height: 1.3;
} .product-meta {
border-top: 1px solid #f0f0f0;
padding-top: 10px;
margin-bottom: 15px;
}
.meta-row {
display: flex;
justify-content: space-between;
font-size: 12px;
margin-bottom: 5px;
}
.meta-row span:first-child {
color: #888;
}
.meta-row span:last-child {
font-weight: 600;
} .product-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
}
.product-footer .price {
font-size: 18px;
font-weight: 800;
color: #333;
}
.buy-button {
background: #a00; color: #fff !important;
padding: 8px 20px;
border-radius: 20px;
text-decoration: none;
font-weight: 600;
font-size: 14px;
transition: background 0.2s;
}
.buy-button:hover {
background: #d00;
}
.woocommerce-pagination {
margin-top: 40px;
text-align: center;
}
.woocommerce-pagination ul {
display: inline-flex;
border: 1px solid #e0e0e0;
border-radius: 4px;
overflow: hidden;
}
.woocommerce-pagination li {
border-right: 1px solid #e0e0e0;
}
.woocommerce-pagination li:last-child {
border-right: none;
}
.woocommerce-pagination li span.current {
background: #003366;
color: #fff;
}
.woocommerce-pagination li a, .woocommerce-pagination li span {
padding: 10px 15px;
display: block;
text-decoration: none;
color: #333;
}
.single-product-custom .product-main-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
margin-bottom: 50px;
}
@media (max-width: 768px) {
.single-product-custom .product-main-container {
grid-template-columns: 1fr;
}
}
.product-info-block {
background: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}
.product-title {
font-size: 28px;
margin-bottom: 20px;
color: #001f3f;
}
.product-meta-specs {
margin-bottom: 25px;
border-bottom: 1px solid #eee;
padding-bottom: 15px;
}
.spec-item {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
font-size: 14px;
}
.spec-item .label {
color: #777;
}
.spec-item .value {
font-weight: 600;
}
.product-actions {
display: flex;
align-items: center;
justify-content: space-between;
background: #f8f9fa;
padding: 20px;
border-radius: 6px;
margin-bottom: 20px;
}
.price-box .amount {
font-size: 24px;
font-weight: 800;
color: #333;
} .single-product-custom .single_add_to_cart_button {
background-color: #a00 !important;
border-radius: 30px !important;
padding: 12px 30px !important;
font-weight: 700;
text-transform: uppercase;
}
.catalog-filters__select.is-open .catalog-filters__list {
display: block;
}
.product-details-buy form {
width: 100%;
}
.product-details-buy__button {
height: 48px;
}
.product-details-gallery {
display: grid;
grid-template-columns: 86px minmax(0, 1fr);
gap: 12px;
min-width: 0;
} .product-details-gallery:has(> :only-child) {
grid-template-columns: 1fr;
}
strong {
font-weight: bold!important;
}
@media (max-width: 767px) {
.banner--hero-service .banner__actions .button {
font-size: 12px !important;
padding-inline: 12px;
flex: 1 1 calc(50% - 6px);
flex-grow: 1;
flex-shrink: 1;
flex-basis: calc(50% - 6px);
padding: 15px 0px !important;
}
}
.header__search-form {
margin: 0!important;
}
.cart_totals .select2-container .select2-selection--single .select2-selection__arrow {
top: 2px !important;
right: unset;
left: 2px;
}
:where(.woocommerce) .select2-container .select2-selection--single .select2-selection__arrow {
top: 28px!important;
}
.catalog-detailed-hero__cars-list {
max-height: 400px!important;
}
.catalog-products--list .catalog-product-card__media {
overflow: hidden!important;
}
.catalog-products--list .catalog-product-card {
gap: 10px 25px!important;
}.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: flex;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.slick-vertical .slick-track
{
flex-direction: column;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
flex: 1 0 auto;
display: none;
float: left;
width: 100%;
height: auto;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
.slick-arrow[aria-disabled="true"]
{
opacity: 0.4;
pointer-events: none;
}:root {
--font-family-base: "Golos Text", sans-serif;
--font-size-base: 16px;
--color-base: #2B2C34;
--color-white: #fff;
--color-bg-base: #fff;
--color-brand-dark: #121D47;
--color-brand-primary: #0734BF;
--color-brand-primary-light: #2d6cdf;
--color-brand-danger: #93010F;
--color-brand-danger-light: #c10318;
--color-accent-red: #E93D26;
--color-border-muted: #cbcdd2;
--color-border-gray: #D1D5DB;
--color-text-muted: #8f9197;
--color-input-muted: #A8ADB7;
--color-nav-divider: #59617e;
--color-banner-muted: #C9D6FF;
--color-banner-muted-2: #d5dcf3;
--color-banner-border: #b4b9c6;
--color-footer-bg: #f3f5fa;
--color-surface-soft: #eff0f5;
--color-surface-soft-2: #ebecf3;
--color-surface-soft-3: #fafbfc;
--color-surface-soft-4: #dfdfe1;
--color-text-invert-muted: #c1cadc;
--color-text-dark-muted: #24252C;
--glass-white-10: rgba(255, 255, 255, 0.1);
--glass-white-25: rgba(255, 255, 255, 0.25);
--glass-white-35: rgba(255, 255, 255, 0.35);
--glass-white-50: rgba(255, 255, 255, 0.50);
--glass-white-70: rgba(255, 255, 255, 0.7);
--glass-white-90: rgba(255, 255, 255, 0.9);
--glass-black-10: rgba(0, 0, 0, 0.1);
--glass-black-25: rgba(0, 0, 0, 0.25);
--glass-black-35: rgba(0, 0, 0, 0.35);
--glass-black-50: rgba(0, 0, 0, 0.50);
--glass-black-70: rgba(0, 0, 0, 0.7);
--glass-black-90: rgba(0, 0, 0, 0.9);
--glass-navy-55: rgba(10, 32, 75, 0.55);
--glass-brand-border: rgba(201, 214, 255, 0.45);
--color-text-dark-soft: rgba(36, 37, 44, 0.5);
--radius-md: 12px;
--radius-sm: 6px;
--header-height: 89px;
--header-height-mobile: 70px;
--shadow: 0 0 25px 0 rgba(0, 0, 0, 0.3);
--shadow-card: -10px 5px 20px 0 rgba(0, 0, 0, 0.3);
--shadow-brand: 0 10px 25px rgba(7, 52, 191, 0.4);
--shadow-brand-active: 0 5px 10px rgba(7, 52, 191, 0.3);
--shadow-danger: 0 10px 25px rgba(147, 1, 15, 0.4);
--shadow-danger-active: 0 5px 10px rgba(147, 1, 15, 0.3);
--gradient-banner: linear-gradient(90deg, #0c1f3f, #1e4fa3);
--gradient-brand: linear-gradient(135deg, #0734BF, #2d6cdf);
--gradient-danger: linear-gradient(135deg, #93010F, #c10318);
--gradient-services: linear-gradient(#e8eef6, #fefeff);
--gradient-services-mobile: linear-gradient(to bottom, rgba(139, 171, 208, 0.30) 50.3%, rgba(251, 252, 253, 0.20) 104.61%);
--gradient-services-btn: linear-gradient(to right, #101D3C, #017EC2);
--gradient-testimonials: linear-gradient(to bottom right, #81a3c9, #f8fafc);
}
@font-face {
font-family: 'Golos Text';
src: url(//boltorez.com.ua/wp-content/themes/boltorez/fonts/GolosText-Regular.woff2) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Golos Text';
src: url(//boltorez.com.ua/wp-content/themes/boltorez/fonts/GolosText-Medium.woff2) format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Golos Text';
src: url(//boltorez.com.ua/wp-content/themes/boltorez/fonts/GolosText-DemiBold.woff2) format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Golos Text';
src: url(//boltorez.com.ua/wp-content/themes/boltorez/fonts/GolosText-Bold.woff2) format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Golos Text';
src: url(//boltorez.com.ua/wp-content/themes/boltorez/fonts/GolosText-Black.woff2) format('woff2');
font-weight: 900;
font-style: normal;
font-display: swap;
}
*,
::before,
::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:where(ul, ol):where([class]) {
padding-left: 0;
}
body,
:where(blockquote, figure):where([class]) {
margin: 0;
}
:where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl):where([class]) {
margin-block: 0;
}
:where(dd[class]) {
margin-left: 0;
}
:where(fieldset[class]) {
margin-left: 0;
padding: 0;
border: none;
}
:where(ul[class]) {
list-style: none;
}
:where(address[class]) {
font-style: normal;
}
p {
--paragraphMarginBottom: 16px;
margin-block: 0;
}
p:where(:not([class]):not(:last-child)) {
margin-bottom: var(--paragraphMarginBottom);
}
img,
video {
display: block;
max-width: 100%;
height: auto;
}
img {
-o-object-fit: cover;
object-fit: cover;
font-style: italic;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
abbr[title] {
text-decoration: none;
}
cite {
display: inline-block;
font-style: normal;
}
input,
textarea,
select,
button {
font: inherit;
}
html {
height: 100%;
scrollbar-gutter: stable;
text-rendering: optimizeLegibility;
}
html,
:has(:target) {
scroll-behavior: smooth;
}
a:where([class]) {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
button,
label {
cursor: pointer;
}
button {
border: none;
padding: 0;
background-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
a {
color: inherit;
}
a[class] {
text-decoration: none;
}
svg * {
-webkit-transition-property: fill, stroke;
transition-property: fill, stroke;
}
:where(table) {
border-collapse: collapse;
border-color: currentColor;
}
@media (prefers-reduced-motion: reduce) {
*,
::before,
::after {
-webkit-animation-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
-webkit-animation-iteration-count: 1 !important;
animation-iteration-count: 1 !important;
-webkit-transition-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
dialog {
border: none;
padding: 0;
}
summary {
cursor: pointer;
list-style: none;
}
summary::-webkit-details-marker {
display: none;
}
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
border-radius: 0;
background-color: var(--color-white);
margin: 0;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration,
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
display: none;
}
input[type=number] {
-moz-appearance: textfield;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
background-color: transparent !important;
-webkit-transition: background-color 10000000s 10000000s, -webkit-box-shadow 10000000s 10000000s;
transition: background-color 10000000s 10000000s, -webkit-box-shadow 10000000s 10000000s;
transition: background-color 10000000s 10000000s, box-shadow 10000000s 10000000s;
transition: background-color 10000000s 10000000s, box-shadow 10000000s 10000000s, -webkit-box-shadow 10000000s 10000000s;
}
textarea::-webkit-resizer {
display: none;
}
textarea::-moz-resizer {
display: none;
}
textarea::resizer {
display: none;
}
mark {
background-color: transparent;
color: currentColor;
}
body {
margin: 0;
font-family: var(--font-family-base);
font-size: var(--font-size-base);
line-height: 1.5;
color: var(--color-base);
min-height: 100%;
background-color: var(--color-bg-base);
overflow-x: clip;
}
.container {
width: 100%;
max-width: 1298px;
padding-inline: 18px;
margin: 0 auto;
}
#main {
overflow-x: clip;
}
body.site-modal-open {
overflow: hidden;
}
.site-modal {
position: fixed;
inset: 0;
z-index: 70;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
opacity: 0;
visibility: hidden;
pointer-events: none;
backdrop-filter: blur(12px);
transition: opacity 0.24s ease, visibility 0.24s ease;
}
.site-modal.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.site-modal__overlay {
position: absolute;
inset: 0;
background: rgba(18, 29, 71, 0.56);
}
.site-modal__dialog {
position: relative;
z-index: 1;
width: min(100%, 680px);
max-height: calc(100vh - 48px);
padding: 32px;
border-radius: 24px;
background: var(--color-white);
box-shadow: 0 24px 60px rgba(12, 29, 71, 0.22);
overflow-y: auto;
}
.site-modal__close {
all: unset;
position: absolute;
top: 18px;
right: 18px;
width: 36px;
height: 36px;
border-radius: 10px;
cursor: pointer;
background: #f2f5fa;
}
.site-modal__close::before,
.site-modal__close::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 18px;
height: 2px;
background: var(--color-brand-dark);
transform-origin: center;
}
.site-modal__close::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.site-modal__close::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.site-modal__head {
padding-right: 48px;
margin-bottom: 20px;
}
.site-modal__head h3 {
margin: 0 0 8px;
font-size: 28px;
line-height: 1;
color: var(--color-brand-dark);
}
.site-modal__head p {
margin: 0;
font-size: 15px;
line-height: 1.5;
color: #6f7f94;
}
.site-modal__content:empty {
display: none;
}
@media screen and (max-width: 767px) {
.mobile-hidden {
display: none !important;
}
.site-modal {
padding: 12px;
}
.site-modal__dialog {
max-height: calc(100vh - 24px);
padding: 48px 20px 20px;
border-radius: 20px;
}
.site-modal__head h3 {
font-size: 24px;
}
}
@media screen and (min-width: 768px) {
.mobile-visible {
display: none !important;
}
}
.checkout-page__content .woocommerce-billing-fields__field-wrapper,
.checkout-page__content .woocommerce-shipping-fields__field-wrapper {
display: block !important;
}
.woocommerce form .form-row .input-text,
.woocommerce form .form-row select {
min-height: 48px;
border-radius: var(--radius-sm, 6px);
}
.checkout-page__content .woocommerce-order-overview li {
&:not(:first-child) {
margin-top: -20px;
}
}
.account-page__card,
.checkout-page__content .woocommerce-order-details,
.checkout-page__content .woocommerce-customer-details {
background: transparent !important;
padding: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
border: none !important;
}
.woocommerce .woocommerce-customer-details address,
.woocommerce table.shop_table {
background: #fff;
color: #000;
}
.woocommerce table.shop_table {
@media screen and (max-width: 767px) {
&.woocommerce-MyAccount-orders {
background: transparent !important;
border: none !important;
tr {
&:nth-child(2n) {
background: var(--color-footer-bg);
td {
background: var(--color-footer-bg);
&.woocommerce-orders-table__cell-order-date {
border-top: none;
}
}
}
td {
&.woocommerce-orders-table__cell-order-date {
border-top: none;
}
}
padding: 6px 0;
}
}
}
}
.account-page .woocommerce-MyAccount-navigation li a {
background: #ffff;
}
.woocommerce .addresses.col2-set {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
gap: 20px 0;
&:before,
&:after {
display: none;
}
.woocommerce-Address {
padding: 10px 16px;
border-radius: 12px;
background: #fff;
border: 1px solid rgba(19, 32, 49, 0.07);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
}
.account-page .woocommerce-EditAccountForm.edit-account {
padding: 10px 16px 24px;
border-radius: 12px;
background: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.cart-page__content .cart-empty {
border-radius: 24px !important;
}
.cart-page__content .wc-empty-cart-message {
width: 100%;
grid-column: 1 / -1;
}
.woocommerce table.my_account_orders td,
.woocommerce table.my_account_orders th {
text-align: center;
}
.account-page .woocommerce-MyAccount-content a {
&:not([class]):hover {
text-decoration: none;
}
&[class]:not(.button):hover {
text-decoration: underline;
}
}
.cart-page__content .woocommerce-message,
.cart-page__content .woocommerce-error {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: space-between;
gap: 16px;
&:after {
display: none;
}
}
.account-page #customer_login .u-column1, .account-page #customer_login .u-column2 {
background: #fff !important;
box-shadow: 0 10px 25px rgba(18, 29, 71, 0.08);
form {
border: none !important;
padding: 0 !important;
p {
font-size: 12px;
}
.woocommerce-form-register__submit {
margin-top: 20px;
}
.form-row:has(.woocommerce-form-login__submit) {
display: flex;
flex-flow: row-reverse wrap;
align-items: center;
justify-content: flex-end;
&:before {
display: none;
}
.woocommerce-form-login__rememberme {
& > input {
opacity: 0;
position: absolute;
&:checked + span {
&:before {
content: '✓';
}
}
}
& > span {
display: flex;
align-items: center;
gap: 4px;
&:before {
content: '';
width: 12px;
height: 12px;
font-size: 10px;
line-height: 10px;
text-align: center;
border: 1px solid currentColor;
border-radius: 2px;
}
} 
}
}
}
}
[data-reveal][data-reveal-ready="true"] {
opacity: 0;
visibility: hidden;
backface-visibility: hidden;
}
[data-reveal] {
will-change: transform, opacity;
}
[data-reveal][data-reveal-ready="true"].is-revealed {
opacity: 1;
visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
[data-reveal][data-reveal-ready="true"] {
opacity: 1;
visibility: visible;
will-change: auto;
}
}
.breadcrumbs {
position: absolute;
width: 100%;
left: 0;
z-index: 3;
padding: 18px 0 0;
}
.breadcrumbs__list {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
font-size: 14px;
line-height: 1.2;
}
.breadcrumbs__item {
display: inline-flex;
align-items: center;
color: var(--color-base);
opacity: 0.5;
&:has(.breadcrumbs__link) {
opacity: 1;
&:before {
opacity: 0.5;
}
}
}
.breadcrumbs__item + .breadcrumbs__item::before {
content: '/';
margin-right: 10px;
}
.breadcrumbs__link {
color: inherit;
text-decoration: none;
opacity: 0.5;
transition: opacity 0.3s ease-in-out;
}
.breadcrumbs__link:hover {
text-decoration: none;
opacity: 1;
}
.breadcrumbs--light .breadcrumbs__item,
.breadcrumbs--light .breadcrumbs__link {
color: var(--color-white);
}
@media (max-width: 767px) {
.breadcrumbs {
padding-top: 12px;
}
.breadcrumbs__list {
font-size: 12px;
}
}
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 40px;
}
.pagination__list {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.pagination__control,
.pagination__link,
.pagination__dots {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px;
height: 34px;
border-radius: 999px;
font-size: 14px;
line-height: 1;
font-weight: 600;
text-decoration: none;
color: var(--color-brand-dark);
}
.pagination__control {
padding: 0 14px;
border: 1px solid var(--color-stroke-soft);
}
.pagination__control--prev::before,
.pagination__control--next::after {
content: '';
width: 7px;
height: 7px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
}
.pagination__control--prev::before {
margin-right: 8px;
transform: rotate(135deg);
}
.pagination__control--next::after {
margin-left: 8px;
transform: rotate(-45deg);
}
.pagination__link {
border: 1px solid transparent;
}
.pagination__link:hover,
.pagination__control:hover {
border-color: var(--color-brand-primary-light);
}
.pagination__link.is-active {
background: var(--color-brand-primary);
color: var(--color-white);
border-color: var(--color-brand-primary);
}
.pagination__control.is-disabled {
opacity: 0.45;
pointer-events: none;
}
@media (max-width: 767px) {
.pagination {
gap: 8px;
margin-top: 28px;
}
.pagination__control {
padding: 0 10px;
font-size: 12px;
}
.pagination__control,
.pagination__link,
.pagination__dots {
min-width: 30px;
height: 30px;
font-size: 12px;
}
}
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button,
.restore-item,
.order-success-actions a,
.gform_wrapper form .button[type="submit"],
.button {
--button-shadow-hover: none;
--button-shadow-active: none;
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
padding: 20px 48px;
border-radius: var(--radius-md);
text-align: center;
color: var(--color-white);
text-decoration: none;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
box-sizing: border-box;
cursor: pointer;
position: relative;
overflow: hidden;
transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease, color 0.35s ease, background-color 0.35s ease;
@media screen and (max-width: 767px) {
& {
padding: 14px 24px;
font-size: 14px;
font-weight: 500;
}
}
}
.gform_wrapper form .button[type="submit"] {
font-size: 16px !important;
font-weight: 600 !important;
padding: 20px 48px !important;
text-transform: uppercase !important;
border-radius: var(--radius-md) !important;
@media screen and (max-width: 767px) {
& {
padding: 14px 24px !important;
font-size: 14px !important;
font-weight: 500 !important;
}
}
}
.gform_wrapper .gfield-choice-input:before {
text-align: center !important;
width: 100% !important;
}
.restore-item,
.order-success-actions a,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button,
:root :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button {
&:not(.alt, .order-success-actions__link, [type="submit"]) {
min-height: 48px;
padding: 8px 20px !important;
border: 1px solid  var(--color-brand-primary) !important;
color: var(--color-brand-primary) !important;
background: transparent !important;
}
&.order-success-actions__link {
min-height: 48px;
padding: 8px 20px;
}
&:disabled {
transform: none !important;
&:before {
display: none;
}
}
}
.order-success-actions a:before,
.restore-item:before,
.button::before {
content: '';
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: var(--glass-white-25);
transform: skewX(-25deg);
transition: all 0.6s ease;
}
.order-success-actions a:hover,
.restore-item:hover,
.button:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: var(--button-shadow-hover);
}
.order-success-actions a:hover::before,
.restore-item:hover::before,
.button:hover::before {
left: 130%;
}
.order-success-actions a:active,
.restore-item:active,
.button:active {
transform: translateY(0) scale(0.98);
box-shadow: var(--button-shadow-active);
}
.button.woocommerce-Button[type="submit"], 
.order-success-actions a,
.account-page .button, .account-page button.button,
.button--danger {
background: var(--gradient-danger) !important;
color: var(--color-white) !important;
border: none !important;
--button-shadow-hover: var(--shadow-danger);
--button-shadow-active: var(--shadow-danger-active);
}
.button--brand {
background: var(--gradient-brand);
--button-shadow-hover: var(--shadow-brand);
--button-shadow-active: var(--shadow-brand-active);
}
.order-success-actions a {
opacity: 1 !important;
}
.order-success-actions {
display: flex;
flex-flow: row wrap;
gap: 10px;
@media screen and (max-width: 767px) {
& > a {
flex: 1 1 auto;
}
}
}
.top-bar {
padding: 11px 0;
background-color: var(--color-brand-dark);
color: var(--color-white);
font-size: 12px;
font-weight: 500;
line-height: 1.2;
}
.top-bar .container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 24px;
}
.top-menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
gap: 40px;
}
.top-menu a {
color: var(--color-white);
text-decoration: none;
}
.top-menu a:hover {
text-decoration: underline;
}
.top-info {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
align-items: center;
gap: 0;
}
.top-info li {
padding: 0 16px;
border-left: 1px solid var(--color-nav-divider);
}
.top-info li:first-child {
border: none;
padding: 0 16px 0 0;
}
.top-info a {
color: var(--color-white);
text-decoration: none;
}
.top-info a:hover {
text-decoration: underline;
}
.top-shedule span {
display: inline-flex;
align-items: center;
}
.top-shedule .top-shedule-label {
opacity: 0.8;
margin-right: 8px;
}
.top-shedule .top-shedule-time {
font-weight: 500;
}
.top-shedule .top-shedule-separator {
width: 4px;
height: 4px;
border-radius: 50%;
background-color: var(--color-white);
opacity: 0.7;
margin: 0 14px;
}
.top-info .top-social {
display: flex;
flex-direction: row;
align-items: center;
gap: 6px;
padding: 0 0 0 16px;
}
.top-phone {
position: relative;
}
.top-phone .top-phone__current {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0 0 0 24px;
background: url(//boltorez.com.ua/wp-content/themes/boltorez/images/ico-phone.svg) no-repeat left center;
font-weight: 500;
}
.top-phone .top-phone__current::after {
content: '';
width: 10px;
height: 10px;
border-right: 2px solid var(--color-white);
border-bottom: 2px solid var(--color-white);
transform: rotate(45deg) translateY(-2px);
transition: transform 0.25s ease;
}
.top-phone .top-phone__list {
list-style: none;
margin: 0;
padding: 8px 0;
position: absolute;
top: calc(100% + 10px);
left: 0;
min-width: 220px;
background-color: var(--color-brand-dark);
border: 1px solid var(--color-nav-divider);
border-radius: 8px;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
z-index: 20;
}
.top-phone .top-phone__list li {
padding: 0;
border: none;
}
.top-phone .top-phone__list a {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 12px;
background: none;
}
.top-phone .top-phone__number {
white-space: nowrap;
}
.top-phone .top-phone__operator-icon {
width: 18px;
height: 18px;
flex: none;
display: block;
}
.top-phone .top-phone__list a:hover {
text-decoration: none;
background-color: var(--glass-white-10);
}
.top-phone:hover .top-phone__list,
.top-phone:focus-within .top-phone__list {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.top-phone:hover .top-phone__current::after,
.top-phone:focus-within .top-phone__current::after {
transform: rotate(225deg) translateY(-1px);
}
.top-social a {
display: inline-flex;
width: 20px;
height: 20px;
align-items: center;
justify-content: center;
line-height: 0;
}
.top-social svg {
width: 20px;
height: 20px;
}
@media (max-width: 1199px) {
.top-bar .container {
flex-wrap: wrap;
justify-content: space-between;
gap: 10px 24px;
}
.top-menu {
gap: 24px;
}
}
@media (max-width: 899px) {
.top-bar .container {
justify-content: center;
}
}
@media (max-width: 767px) {
.top-bar {
display: none;
}
}
#header {
position: sticky;
width: 100%;
z-index: 10;
top: 0;
background: var(--header-bg);
transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
--header-offset: calc(var(--header-height) * -1);
--header-bg: transparent;
}
#header .header__container {
display: flex;
align-items: center;
justify-content: space-between;
padding-block: 10px;
min-height: var(--header-height);
}
#header.header--overlay + #main{
--header-offset: calc(var(--header-height) * -1);
margin-top: var(--header-offset);
}
#header.header--transparent {
--header-bg: transparent;
}
#header.header--solid {
--header-offset: 0px;
--header-bg: #F6F7FF;
box-shadow: 0 4px 18px rgba(18, 29, 71, 0.08);
}
#header.header--hidden {
transform: translateY(-100%);
}
#header .header__logo {
position: relative;
display: inline-block;
vertical-align: top;
}
#header .header__nav .header__logo {
position: absolute;
left: 18px;
top: calc(var(--header-height-mobile) / 2);
width: 108px;
height: 42px;
transform: translateY(-50%);
}
#header .header__logo img {
display: block;
width: 155px;
height: auto;
margin: 0 0 0 -8px;
opacity: 1;
transition: opacity 0.25s ease;
&.logo--alt {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
}
}
#header.header--solid .header__logo img {
opacity: 0;
&.logo--alt {
opacity: 1;
}
}
#header .header__nav {
padding: 0 80px 0 40px;
}
#header .header__nav > .header__menu-toggle {
display: none;
}
#header .header__nav-list {
display: flex;
gap: 12px;
list-style: none;
font-size: 14px;
padding: 0;
margin: 0;
}
#header .header__mega {
display: none;
}
#header .header__mega-mobile-head {
display: none;
}
#header .header__mega-mobile-panel-head {
display: none;
}
#header .header__nav-link {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 22px;
border-radius: var(--radius-md);
background: var(--color-brand-primary);
font-size: 14px;
font-weight: 600;
line-height: 1;
color: var(--color-white);
text-decoration: none;
position: relative;
overflow: hidden;
transition: all 0.35s ease;
}
#header .header__nav-link::before {
content: '';
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: var(--glass-white-25);
transform: skewX(-25deg);
transition: all 0.6s ease;
}
#header .header__nav-link::after {
content: '';
width: 6px;
height: 6px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg) translateY(-2px);
}
#header .header__nav-link:hover {
background: var(--color-brand-primary);
box-shadow: var(--shadow-brand);
}
#header .header__nav-link:hover::before {
left: 130%;
}
#header .header__nav-link.is-active {
background: var(--color-brand-primary-light);
}
#header .header__nav-link:active {
transform: translateY(1px);
}
#header .header__menu-toggle {
display: none;
}
#header .header__actions {
display: flex;
align-items: center;
gap: 16px;
padding: 0 0 0 16px;
flex: 1;
}
#header .header__search {
max-width: 560px;
flex: 1;
margin-inline-start: auto;
}
#header .header__search-form {
width: 100%;
padding: 10px 16px 10px 47px;
border-radius: var(--radius-md);
background-color: var(--glass-white-35);
position: relative;
box-sizing: border-box;
border: 1px solid transparent;
transition: border-color 0.25s ease;
.header--solid & {
border-color: var(--glass-black-50);
&:has(input:focus) {
border-color: var(--glass-black-90);
}
}
&:has(input:focus) {
border-color: var(--glass-black-90);
}
}
#header .header__actions form input {
all: unset;
width: 100%;
font-size: 14px;
color: var(--color-white);
.header--solid & {
color: var(--color-brand-dark);
}
}
#header .header__actions form input::placeholder,
#header .header__actions form input::-moz-placeholder,
#header .header__actions form input::-webkit-input-placeholder {
opacity: 1;
color: var(--color-white);
}
#header.header--solid  .header__actions form input::placeholder,
#header.header--solid  .header__actions form input::-moz-placeholder,
#header.header--solid  .header__actions form input::-webkit-input-placeholder {
color: var(--color-brand-dark);
}
#header .header__actions form input::-webkit-input-placeholder {
opacity: 1;
color: var(--color-white);
}
#header.header--solid  .header__actions form input::-webkit-input-placeholder {
color: var(--color-brand-dark);
}
#header .header__actions form input::-webkit-input-placeholder {
opacity: 1;
color: var(--color-white);
}
#header .header__actions form button {
all: unset;
position: absolute;
top: 12px;
left: 14px;
width: 20px;
height: 20px;
cursor: pointer;
color: var(--color-white);
.header--solid & {
color: var(--color-brand-dark);
}
}
#header .header__action {
position: relative;
display: inline-flex;
color: var(--color-white);
text-decoration: none;
border-radius: var(--radius-md);
background-color: var(--glass-white-35);
transition: background-color 0.25s ease, color 0.2s ease;
.header--solid & {
color: var(--color-brand-dark);
border: 1px solid var(--glass-black-50);
background-color: var(--color-surface-soft-3);
&:hover,
&[aria-expanded="true"] {
background-color: var(--color-brand-dark);
border-color: var(--color-brand-dark);
color: var(--color-white);
}
}
&:hover,
&[aria-expanded="true"] {
background-color: var(--glass-white-90);
color: var(--color-brand-dark);
}
}
#header .header__search-opener {
display: none;
}
#header .header__action-icon {
width: 45px;
height: 45px;
padding: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
#header .header__action-icon svg {
display: block;
width: 25px;
height: 25px;
}
#header .header__cart-icon svg {
display: block;
}
#header .header__cart-icon svg path {
fill: currentColor;
}
#header .header__cart-count {
position: absolute;
top: -2px;
right: -8px;
width: 20px;
height: 20px;
color: var(--color-white);
background-color: var(--color-accent-red);
border-radius: 50%;
font-size: 14px;
line-height: 20px;
font-weight: 500;
text-align: center;
}
#header .header-vin {
position: relative;
display: inline-flex;
flex: 0 0 auto;
}
#header .header-vin__opener {
padding: 0;
border: 0;
cursor: pointer;
}
#header .header-vin__opener[hidden],
#header .header-vin__selected[hidden] {
display: none !important;
}
#header .header-vin__selected {
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
min-width: 0;
max-width: 258px;
height: 47px;
padding: 0 14px 0 10px;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 12px;
background: rgba(7, 52, 191, 0.52);
backdrop-filter: blur(35px);
color: var(--color-white);
cursor: pointer;
transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
.header--solid & {
border-color: var(--glass-black-50);
background-color: var(--color-white);
color: var(--color-brand-dark);
.header-vin__selected-icon {
filter: invert(1);
transition: filter 0.25s ease;
}
&:hover {
color: var(--color-white);
}
}
&:hover {
background-color: var(--color-brand-dark);
.header-vin__selected-icon {
filter: invert(0);
}
}
}
#header .header-vin__selected-icon {
position: relative;
flex: 0 0 26px;
width: 26px;
height: 26px;
}
#header .header-vin__selected-icon img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
#header .header-vin__selected-badge {
position: absolute;
top: -4px;
left: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 999px;
background: #e93d26;
color: var(--color-white);
font-size: 14px;
line-height: 1;
font-weight: 500;
}
#header .header-vin__selected-text {
min-width: 0;
overflow: hidden;
font-size: 12px;
line-height: 1.1;
font-weight: 400;
white-space: nowrap;
text-overflow: ellipsis;
}
#header .header-vin__selected-arrow {
flex: 0 0 auto;
width: 8px;
height: 8px;
margin-left: auto;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg) translateY(-1px);
}
body.vin-modal-open {
overflow: hidden;
}
.vin-modal {
position: fixed;
inset: 0;
z-index: 60;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
opacity: 0;
visibility: hidden;
pointer-events: none;
backdrop-filter: blur(12px);
transition: opacity 0.24s ease, visibility 0.24s ease;
}
.vin-modal.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.vin-modal__overlay {
position: absolute;
inset: 0;
background: rgba(18, 29, 71, 0.56);
}
.vin-modal__dialog {
position: relative;
z-index: 1;
width: min(100%, 520px);
padding: 32px;
border-radius: 24px;
background: var(--color-white);
box-shadow: 0 24px 60px rgba(12, 29, 71, 0.22);
}
.vin-modal__close {
all: unset;
position: absolute;
top: 18px;
right: 18px;
width: 36px;
height: 36px;
border-radius: 10px;
cursor: pointer;
background: #f2f5fa;
}
.vin-modal__close::before,
.vin-modal__close::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 18px;
height: 2px;
background: var(--color-brand-dark);
transform-origin: center;
}
.vin-modal__close::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.vin-modal__close::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.vin-modal__head {
padding-right: 48px;
margin-bottom: 20px;
}
.vin-modal__head h3 {
margin: 0 0 8px;
font-size: 28px;
line-height: 1;
color: var(--color-brand-dark);
}
.vin-modal__head p {
margin: 0;
font-size: 15px;
line-height: 1.5;
color: #6f7f94;
}
.vin-modal__field {
display: block;
}
.vin-modal__label {
display: inline-block;
margin-bottom: 8px;
font-size: 12px;
line-height: 1.2;
font-weight: 600;
color: var(--color-brand-dark);
text-transform: uppercase;
}
.vin-modal__input {
width: 100%;
height: 56px;
padding: 0 18px;
box-sizing: border-box;
border: 1px solid #d0dae9;
border-radius: 14px;
outline: none;
font-size: 16px;
color: var(--color-brand-dark);
transition: border-color 0.24s ease, box-shadow 0.24s ease;
}
.vin-modal__input:focus {
border-color: var(--color-brand-primary);
box-shadow: 0 0 0 3px rgba(7, 52, 191, 0.12);
}
.vin-modal__results-wrap {
margin-top: 14px;
border: 1px solid #d0dae9;
border-radius: 16px;
background: #f8fafe;
overflow: hidden;
transition: opacity 0.2s ease;
}
.vin-modal__results-wrap.is-loading {
opacity: 0.45;
pointer-events: none;
}
.vin-modal__status {
padding: 14px 16px;
font-size: 14px;
line-height: 1.35;
color: #6f7f94;
}
.vin-modal__results {
margin: 0;
padding: 0;
max-height: 230px;
overflow-y: auto;
list-style: none;
}
.vin-modal__result {
width: 100%;
padding: 14px 16px;
border: 0;
border-top: 1px solid #dfe6f1;
background: transparent;
color: var(--color-brand-dark);
text-align: left;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}
.vin-modal__results li:first-child .vin-modal__result {
border-top: 0;
}
.vin-modal__result:hover,
.vin-modal__result.is-active {
background: rgba(7, 52, 191, 0.08);
}
.vin-modal__result-title {
display: block;
font-size: 15px;
line-height: 1.3;
font-weight: 600;
}
.vin-modal__result-meta {
display: block;
margin-top: 4px;
font-size: 13px;
line-height: 1.3;
color: #6f7f94;
}
.vin-modal__submit {
width: 100%;
margin-top: 18px;
}
.vin-modal__reset {
width: 100%;
margin-top: 10px;
padding: 0;
border: 0;
background: transparent;
color: #6f7f94;
font-size: 14px;
line-height: 1.3;
font-weight: 600;
cursor: pointer;
transition: color 0.2s ease, opacity 0.2s ease;
}
.vin-modal__reset[hidden] {
display: none !important;
}
.vin-modal__reset:hover {
color: var(--color-brand-dark);
}
.vin-modal__reset:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.vin-modal__submit:disabled {
opacity: 0.5;
cursor: not-allowed;
}
#header.header--solid .header__search-form {
background-color: var(--color-surface-soft-3);
}
#header.header--solid .header__search-form input {
color: var(--color-text-dark-muted);
}
#header.header--solid .header__search-form input::placeholder {
color: var(--color-text-dark-soft);
}
#header.header--solid .header__search-form button svg path {
fill: var(--color-text-dark-muted);
}
#header.header--solid .header__actions::after {
background-image: linear-gradient(var(--color-text-dark-muted), var(--color-text-dark-muted)), linear-gradient(var(--color-text-dark-muted), var(--color-text-dark-muted)), linear-gradient(var(--color-text-dark-muted), var(--color-text-dark-muted));
}
#header .header__mega-panel {
display: none;
}
#header .header__mega-panel.is-active {
display: block;
}
#header .header__mega-services-items {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 0;
}
#header .header__mega-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border-top: 1px solid #d9dee7;
border-left: 1px solid #d9dee7;
background: var(--color-white);
}
#header .header__mega-grid-item {
display: flex;
align-items: center;
gap: 12px;
min-height: 72px;
padding: 16px;
border-right: 1px solid #d9dee7;
border-bottom: 1px solid #d9dee7;
color: var(--color-brand-dark);
text-decoration: none;
transition: background-color 0.2s ease, color 0.2s ease;
}
#header .header__mega-grid-item:hover {
background: #f4f8ff;
color: var(--color-brand-primary);
}
#header .header__mega-grid-item-icon {
flex: 0 0 38px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
padding: 6px;
border-radius: 12px;
border: 1px solid var(--color-brand-primary);
box-shadow: 0 8px 14px rgba(5, 142, 216, 0.24);
color: var(--color-brand-primary);
font-size: 13px;
line-height: 1;
font-weight: 700;
text-transform: uppercase;
}
#header .header__mega-grid-item-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
#header .header__mega-grid-item-name {
font-size: 14px;
line-height: 1.2;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
@media (min-width: 1440px) {
#header .header__mega-services-items .services-item {
min-height: 94px;
}
}
@media (min-width: 768px) {
#header .header__mega {
position: absolute;
left: 0;
right: 0;
top: 100%;
background: #f8f9fb;
border-top: 1px solid var(--color-border-muted);
box-shadow: 0 22px 42px rgba(12, 29, 71, 0.08);
z-index: 34;
max-height: calc(100vh - var(--header-height) - 60px);
overflow-y: auto;
display: block;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-10px);
transition: opacity 0.2s ease, transform 0.24s ease, visibility 0.24s ease;
}
#header .header__nav .header__logo {
display: none;
}
#header .header__mega.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
#header .header__mega-layout {
display: grid;
grid-template-columns: 346px minmax(0, 1fr);
align-items: start;
min-height: 420px;
}
#header .header__mega-sidebar {
padding: 16px 0;
border-right: 1px solid #cfd3dc;
min-height: 100%;
}
#header .header__mega-mobile-head {
display: none;
}
#header .header__mega-search {
display: block;
padding: 0 10px 12px;
}
#header .header__mega-search input {
width: 100%;
height: 38px;
padding: 0 12px;
border: 1px solid #9fa8ba;
border-radius: 10px;
outline: none;
font-size: 16px;
line-height: 1;
color: var(--color-brand-dark);
background: var(--color-white);
}
#header .header__mega-search input::placeholder {
color: #7c8393;
}
#header .header__mega-category {
all: unset;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
box-sizing: border-box;
padding: 10px 22px;
font-size: 18px;
line-height: 1.1;
font-weight: 500;
color: var(--color-brand-dark);
cursor: pointer;
transition: color 0.25s ease, background-color 0.25s ease;
}
#header .header__mega-category:hover {
color: var(--color-brand-primary);
}
#header .header__mega-category::after {
content: '';
width: 8px;
height: 8px;
border-top: 1.5px solid currentColor;
border-right: 1.5px solid currentColor;
transform: rotate(45deg);
}
#header .header__mega-category.is-active {
background: #0734BF33;
pointer-events: none;
}
#header .header__mega-content {
position: relative;
padding: 14px 48px 30px 22px;
overflow-y: auto;
max-height: calc(100vh - var(--header-height));
}
#header .header__mega-close {
all: unset;
position: absolute;
right: 20px;
top: 12px;
width: 34px;
height: 34px;
cursor: pointer;
}
#header .header__mega-close::before,
#header .header__mega-close::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 24px;
height: 2px;
background: var(--color-brand-dark);
transform-origin: center;
}
#header .header__mega-close::before {
transform: translate(-50%, -50%) rotate(45deg);
}
#header .header__mega-close::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
#header .header__mega-panel h3 {
margin: 0 0 18px;
font-size: 40px;
line-height: 1.1;
font-weight: 700;
color: var(--color-brand-dark);
}
#header .header__mega-columns {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: 58px;
row-gap: 24px;
padding-right: 36px;
}
#header .header__mega-columns h4 {
margin: 0 0 12px;
font-size: 24px;
line-height: 1.15;
font-weight: 700;
color: var(--color-brand-dark);
}
#header .header__mega-columns ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 8px;
}
#header .header__mega-columns a {
text-decoration: none;
color: var(--color-brand-dark);
font-size: 16px;
line-height: 1.1;
font-weight: 500;
}
#header .header__mega-columns a:hover {
text-decoration: underline;
}
#header .header__mega-columns a.is-current {
color: #0f5ef0;
text-decoration: underline;
}
#header .header__mega--services .header__mega-layout {
display: block;
min-height: 0;
}
#header .header__mega-services {
position: relative;
padding: 20px 22px;
}
#header .header__mega-services h3 {
margin: 0 0 18px;
font-size: 40px;
line-height: 1.1;
font-weight: 700;
color: var(--color-brand-dark);
}
#header .header__mega-services-items .services-item {
flex-direction: row-reverse;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: none;
min-width: 0;
min-height: 88px;
padding: 10px 14px 10px 16px;
border: 1px solid #d9dee7;
border-radius: 14px;
background: var(--color-white);
box-shadow: none;
}
#header .header__mega-services-items .services-item:hover {
background: #f4f8ff;
}
#header .header__mega-services-items .services-item img {
flex: 0 0 56px;
width: 56px;
height: 56px;
aspect-ratio: 1 / 1;
border-radius: 12px;
opacity: 1;
}
#header .header__mega-services-items .services-item strong {
flex: 1 1 auto;
display: block;
padding: 0 14px 0 0;
border-radius: 0;
background: transparent;
text-align: left;
font-size: 18px;
line-height: 1.15;
}
#header .header__mega--alt {
width: 768px;
top: calc(100% - 8px);
left: unset;
right: unset;
box-shadow: 0 8px 7px rgba(0, 0, 0, 0.1);
border-radius: 12px;
}
#header .header__mega--alt .header__mega-layout {
display: block;
min-height: 0;
}
#header .header__mega-secondary {
position: relative;
padding: 0;
margin-top: -1px;
}
#header .header__mega-secondary-head {
padding: 0 22px 18px;
}
#header .header__mega-secondary-head h3 {
margin: 0;
font-size: 40px;
line-height: 1.1;
font-weight: 700;
color: var(--color-brand-dark);
}
}
@media (min-width: 768px) and (max-width: 1023px) {
#header .header__mega {
max-height: calc(100vh - var(--header-height) - 80px);
}
}
@media (max-width: 1199px) {
#header .header__container {
padding-block: 16px;
}
#header .header__search {
width: min(100%, 360px);
}
#header .header-vin__selected {
max-width: 214px;
}
#header .header__nav {
padding: 0;
}
#header .header__nav-list {
gap: 10px;
}
#header .header__mega-columns {
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: 32px;
}
#header .header__mega-services-items .services-item {
min-width: 0;
}
#header .header__mega-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 1023px) {
#header .header-vin {
width: 45px;
}
.header-vin__selected {
padding-inline: 0 !important;
width: 100%;
align-items: center;
justify-content: center;
}
.header-vin__selected-text {
position: absolute;
opacity: 0;
pointer-events: none;
}
#header .header__mega--alt {
width: 100%;
left: 0;
top: 100%;
border-radius: 0 0 12px 12px;
}
}
@media (max-width: 767px) {
#header .header__container {
padding-block: 0;
min-height: var(--header-height-mobile);
}
#header.header--overlay + #main {
--header-offset: calc(var(--header-height-mobile) * -1);
}
#header .header__logo img {
width: 108px;
margin-left: 0;
}
#header .header__search {
width: auto;
position: static;
flex: initial;
&:before {
content: '';
position: absolute;
left: 0;
top: var(--header-height-mobile);
width: 100vw;
height: 80px;
background: var(--color-white);
box-shadow: 0 12px 24px rgba(7, 20, 64, 0.18);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-14px);
transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s ease;
}
&:has(>.is-open):before {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
}
#header.header--transparent .header__search:before {
background-color: transparent;
box-shadow: none;
}
#header.header--hidden .header__search:before {
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-14px);
}
#header .header__search-opener {
display: inline-flex;
}
#header .header__search-form {
display: block;
position: relative;
position: fixed;
top: calc(var(--header-height-mobile) + 16px);
left: 16px;
width: calc(100vw - 32px);
height: 48px;
max-width: none;
margin: 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-14px);
transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s ease;
}
#header:not(.header--hidden) .header__search-form.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
transition: opacity 0.24s ease, transform 0.24s ease, visibility 0s linear;
}
#header .header-vin {
width: 38px;
}
#header .header__action,
#header .header-vin__selected {
width: 38px;
height: 38px;
}
#header .header__action-icon {
padding: 2px;
width: 100%;
height: 100%;
}
#header .header__actions {
display: flex;
align-items: center;
justify-content: flex-end;
min-width: auto;
padding: 0;
gap: 12px;
flex: 0 0 auto;
}
#header .header__menu-toggle {
all: unset;
display: inline-flex;
width: 28px;
height: 20px;
cursor: pointer;
}
#header .header__menu-toggle::before {
content: '';
width: 22px;
height: 14px;
display: block;
margin: auto;
background-image: linear-gradient(var(--color-white), var(--color-white)), linear-gradient(var(--color-white), var(--color-white)), linear-gradient(var(--color-white), var(--color-white));
background-repeat: no-repeat;
background-size: 100% 2px;
background-position: 0 0, 0 6px, 0 12px;
}
#header .header__nav > .header__menu-toggle {
all: unset;
position: absolute;
top: 20px;
right: 12px;
width: 28px;
height: 28px;
display: block;
cursor: pointer;
z-index: 6;
}
#header .header__nav > .header__menu-toggle::before,
#header .header__nav > .header__menu-toggle::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 20px;
height: 2px;
background: var(--color-brand-dark);
transform-origin: center;
}
#header .header__nav > .header__menu-toggle::before {
transform: translate(-50%, -50%) rotate(45deg);
}
#header .header__nav > .header__menu-toggle::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
#header.header--solid .header__menu-toggle::before {
background-image: linear-gradient(var(--color-text-dark-muted), var(--color-text-dark-muted)), linear-gradient(var(--color-text-dark-muted), var(--color-text-dark-muted)), linear-gradient(var(--color-text-dark-muted), var(--color-text-dark-muted));
}
#header.header--solid .header__nav > .header__menu-toggle::before,
#header.header--solid .header__nav > .header__menu-toggle::after {
background-image: none;
background-color: var(--color-brand-dark);
}
#header .header__nav {
display: flex;
flex-flow: column nowrap;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: var(--color-white);
z-index: 35;
transform: translateX(-100%);
transition: transform 0.3s ease;
padding: 0;
overflow: hidden;
}
#header .header__nav.has-mobile-mega {
width: 100vw;
}
#header .header__nav::before {
content: '';
position: fixed;
inset: 0;
background: var(--glass-black-35);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.3s ease, visibility 0.3s ease;
left: 100%;
}
body.mobile-menu-open #header .header__nav {
transform: translateX(0);
}
body.mobile-menu-open #header .header__nav::before {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
body.mobile-menu-open {
overflow: hidden;
}
#header .header__nav-list {
display: block;
margin: 0;
flex: 1 1 auto;
padding: 70px 0 24px;
overflow-y: auto;
position: relative;
}
#header .header__nav-item > .header__nav-link {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 16px 20px;
border-radius: 0;
background: transparent;
color: var(--color-brand-dark);
font-size: 20px;
font-weight: 600;
border-bottom: 1px solid var(--color-border-muted);
}
#header .header__nav-item > .header__nav-link::before {
display: none;
}
#header .header__nav-item > .header__nav-link::after {
display: none;
}
#header .header__nav-item > .header__nav-link[data-mega-trigger]::after {
display: block;
border-color: currentColor;
width: 8px;
height: 8px;
transform: rotate(-45deg);
}
#header .header__nav-item:last-child > .header__nav-link {
border-bottom: 0;
}
#header .header__nav-item > .header__nav-link:hover {
background: transparent;
transform: none;
box-shadow: none;
}
#header .header__nav-item > .header__nav-link:active {
transform: none;
}
#header .header__mega {
position: fixed;
inset: 0;
background: var(--color-white);
transform: translateX(-100%);
transition: transform 0.28s ease;
display: block !important;
pointer-events: none;
opacity: 1;
visibility: visible;
border-top: 0;
box-shadow: none;
max-height: none;
z-index: 3;
}
#header .header__mega.is-mobile-open {
transform: translateX(0);
pointer-events: auto;
}
#header .header__mega-layout {
display: block;
min-height: 100%;
position: relative;
overflow: hidden;
}
#header .header__mega-sidebar {
padding: 0 0 20px;
border-right: 0;
min-height: 100%;
background: var(--color-white);
transition: transform 0.28s ease;
}
#header .header__mega.is-mobile-category-open .header__mega-sidebar {
transform: translateX(-100%);
}
#header .header__mega-mobile-head {
display: flex;
align-items: center;
gap: 14px;
padding: 20px;
border-bottom: 1px solid var(--color-border-muted);
}
#header .header__mega-mobile-back {
all: unset;
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 15px;
font-weight: 600;
color: var(--color-text-dark-muted);
}
#header .header__mega-mobile-back::before {
content: '';
width: 8px;
height: 8px;
border-top: 2px solid currentColor;
border-left: 2px solid currentColor;
transform: rotate(-45deg);
}
#header .header__mega-mobile-parent {
color: var(--color-brand-primary);
font-size: 16px;
font-weight: 700;
text-decoration: none;
}
#header .header__mega-search {
padding: 12px 20px;
display: block;
width: 100%;
}
#header .header__mega-search input {
height: 48px;
width: 100%;
padding: 4px 16px;
border: 1px solid var(--color-border-gray);
border-radius: 6px;
}
#header .header__mega-category {
all: unset;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
width: 100%;
padding: 14px 20px;
font-size: 17px;
font-weight: 600;
color: var(--color-brand-dark);
border-bottom: 1px solid var(--color-border-muted);
cursor: pointer;
}
#header .header__mega-category::after {
content: '';
width: 8px;
height: 8px;
border-top: 1.5px solid currentColor;
border-right: 1.5px solid currentColor;
transform: rotate(45deg);
}
#header .header__mega-category.is-active {
background: #f2f4f8;
}
#header .header__mega-sidebar .header__mega-category:last-child {
border-bottom: 0;
}
#header .header__mega-content {
position: absolute;
inset: 0;
background: var(--color-white);
padding: 0 20px 20px;
max-height: none;
overflow: auto;
transform: translateX(100%);
transition: transform 0.28s ease;
pointer-events: none;
}
#header .header__mega-content ul {
list-style: none outside;
padding: 0 0 0 10px;
li {
list-style: none outside;
}
.is-current {
color: var(--color-brand-primary);
text-decoration: underline;
}
}
#header .header__mega.is-mobile-category-open .header__mega-content {
transform: translateX(0);
pointer-events: auto;
}
#header .header__mega-mobile-panel-head {
display: flex;
align-items: center;
gap: 14px;
padding: 20px 0;
border-bottom: 1px solid var(--color-border-muted);
margin-bottom: 16px;
}
#header .header__mega-mobile-panel-back {
all: unset;
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 15px;
font-weight: 600;
color: var(--color-text-dark-muted);
}
#header .header__mega-mobile-panel-back::before {
content: '';
width: 8px;
height: 8px;
border-top: 2px solid currentColor;
border-left: 2px solid currentColor;
transform: rotate(-45deg);
}
#header .header__mega-mobile-panel-title {
color: var(--color-brand-primary);
font-size: 16px;
font-weight: 700;
}
#header .header__mega-close {
display: none;
}
#header .header__mega-panel h3 {
display: none;
}
#header .header__mega-columns {
grid-template-columns: 1fr;
gap: 18px;
padding-right: 0;
}
#header .header__mega-columns h4 {
margin-bottom: 8px;
font-size: 16px;
}
#header .header__mega-columns a {
display: block;
padding: 10px 0;
color: var(--color-base);
font-size: 16px;
border-bottom: 1px solid var(--color-surface-soft-2);
}
#header .header__mega-columns li:last-child a {
border-bottom: 0;
}
#header .header__mega--services .header__mega-layout {
display: block;
min-height: 100%;
overflow: auto;
}
#header .header__mega--services .header__mega-mobile-head {
display: flex;
}
#header .header__mega-services {
padding: 16px 20px 24px;
}
#header .header__mega-services h3 {
margin: 0 0 14px;
font-size: 26px;
line-height: 1.1;
font-weight: 700;
color: var(--color-brand-dark);
}
#header .header__mega-services-items {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 0;
}
#header .header__mega-services-items .services-item {
width: 100%;
max-width: none;
min-width: 0;
min-height: 82px;
padding: 0;
overflow: hidden;
border-radius: 12px;
}
#header .header__mega-services-items .services-item img {
flex-basis: 0;
width: 100%;
height: auto;
min-height: 112px;
border-radius: 10px 10px 0 0;
}
#header .header__mega-services-items .services-item strong {
font-size: 13px;
padding: 6px 8px;
line-height: 1.15;
flex: 1 0 auto;
}
#header .header__mega--alt .header__mega-layout {
display: block;
height: 100vh;
overflow-y: auto;
}
#header .header__mega--alt .header__mega-mobile-head {
display: flex;
position: sticky;
top: 0;
z-index: 2;
background: var(--color-white);
}
#header .header__mega-secondary {
padding: 0;
}
#header .header__mega-secondary-head {
padding: 0 0 14px;
}
#header .header__mega-secondary-head h3 {
margin: 0;
font-size: 26px;
line-height: 1.1;
font-weight: 700;
color: var(--color-brand-dark);
}
#header .header__mega-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
padding: 8px;
border: none;
align-items: stretch;
}
#header .header__mega-grid-item {
padding: 12px;
border: 1px solid #d9dee7;
border-radius: 10px;
min-height: 0;
}
#header .header__mega-grid-item-icon {
flex-basis: 36px;
width: 36px;
height: 36px;
border-radius: 10px;
font-size: 12px;
}
#header .header__mega-grid-item-name {
font-size: 12px;
letter-spacing: 0.06em;
}
#header .header__mobile-extra {
display: flex;
flex-flow: row wrap;
gap: 16px 12px;
padding: 24px 20px 28px;
border-top: 1px solid var(--color-border-muted);
background: #f8f9fb;
& > * {
flex: 1 0 calc(50% - 6px);
}
}
#header .header__mobile-menu-links,
#header .header__mobile-phone-list {
margin: 0;
padding: 0;
list-style: none;
}
#header .header__mobile-menu-links {
display: grid;
gap: 8px;
}
#header .header__mobile-menu-links a,
#header .header__mobile-phone-list a {
color: var(--color-brand-dark);
text-decoration: none;
font-size: 16px;
font-weight: 600;
}
#header .header__mobile-extra-title {
display: block;
margin-block: 7px 10px;
color: #7c8393;
font-size: 12px;
line-height: 1.2;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
}
#header .header__mobile-schedule,
#header .header__mobile-phones,
#header .header__mobile-social {
margin-bottom: 20px;
}
#header .header__mobile-schedule p {
margin: 0;
color: var(--color-brand-dark);
font-size: 15px;
line-height: 1.5;
}
#header .header__mobile-phone-current {
display: inline-flex;
margin-bottom: 10px;
color: var(--color-brand-primary);
text-decoration: none;
font-size: 13px;
font-weight: 700;
}
#header .header__mobile-phone-list a {
font-size: 13px;
&:not(.header__mobile-phone-current) {
font-weight: normal;
}
}
#header .header__mobile-phone-list {
display: grid;
gap: 10px;
}
#header .header__mobile-social {
margin-bottom: 0;
}
#header .header__mobile-social-links {
display: flex;
gap: 12px;
}
#header .header__mobile-social-links a {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--color-brand-primary);
border: 1px solid var(--color-brand-primary);
color: var(--color-white);
}
.vin-modal {
padding: 12px;
}
.vin-modal__dialog {
width: 100%;
padding: 22px 18px 18px;
border-radius: 20px;
}
.vin-modal__close {
top: 12px;
right: 12px;
}
.vin-modal__head {
padding-right: 42px;
}
.vin-modal__head h3 {
font-size: 24px;
}
}
.banner {
display: grid;
position: relative;
min-height: calc(100vh - 42px);
max-height: 900px;
padding-block: 100px 30px;
background: var(--gradient-banner);
color: var(--color-white);
}
.banner__bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.banner__bg picture,
.banner__bg img {
display: block;
width: 100%;
height: 100%;
}
.banner__bg img {
object-fit: cover;
object-position: center;
}
.banner__container {
height: 100%;
max-width: 1440px;
display: flex;
flex-direction: column;
justify-content: start;
align-items: stretch;
}
.banner .banner__content {
max-width: 576px;
margin-block: auto;
position: relative;
}
.banner h1 {
font-size: 58px;
font-weight: 600;
line-height: 1.3;
margin: 0 0 14px;
}
.banner__bottom {
padding-top: 40px;
position: relative;
}
.banner__features {
display: flex;
justify-content: left;
margin: 0 0 60px;
padding: 0;
font-size: 14px;
font-weight: normal;
color: var(--color-banner-muted);
gap: 38px;
}
.banner__features li {
border-left: 1px solid var(--color-banner-muted);
padding: 0 0 0 12px;
}
.banner .banner__filters {
background: var(--glass-white-35);
padding: 30px;
border-radius: 20px;
}
.banner .filters__opener,
.banner .filters__close {
display: none;
}
.banner .filters__tabs {
display: flex;
align-items: center;
gap: 32px;
font-size: 16px;
list-style: none;
margin: 0;
padding: 0;
position: relative;
border-bottom: 1px solid var(--color-banner-border);
--tab-indicator-left: 0px;
--tab-indicator-width: 0px;
}
.banner .filters__tabs::after {
content: '';
position: absolute;
left: var(--tab-indicator-left);
bottom: 0;
width: var(--tab-indicator-width);
height: 1px;
background-color: var(--color-white);
transition: left 0.3s ease, width 0.3s ease;
}
.banner .filters__tabs li {
opacity: 0.7;
}
.banner .filters__tabs li.active {
font-weight: 600;
opacity: 1;
}
.banner .filters__tabs li a {
color: var(--color-white);
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
padding: 0 0 16px;
}
.banner .filters__tabs li.active a {
border-bottom: 1px solid transparent;
}
.banner .filters__panel {
display: none;
}
.banner .filters__panel.active {
display: block;
}
.banner .filters__row {
display: flex;
gap: 8px;
align-items: center;
padding: 20px 0 0;
}
.banner .custom-select {
position: relative;
width: 20%;
}
.banner .select__head {
background: var(--color-white);
color: var(--color-text-dark-soft);
font-size: 14px;
padding: 12px 16px;
border-radius: var(--radius-md);
cursor: pointer;
transition: transform 0.5s ease-in-out;
}
.banner .select__head:before {
content: '';
clear: both;
position: absolute;
top: 50%;
right: 15px;
width: 16px;
height: 16px;
margin: -8px 0 0;
background: var(--color-white) url(//boltorez.com.ua/wp-content/themes/boltorez/images/ico-arrow.svg) no-repeat;
}
.banner .custom-select.active .select__head:before {
transform: rotate(180deg);
}
.banner .select__list {
display: none;
position: absolute;
top: 110%;
left: 0;
right: 0;
background: var(--color-white);
color: var(--color-text-dark-muted);
border-radius: var(--radius-md);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
padding: 5px 0;
z-index: 5;
}
.banner .select__list li {
padding: 12px 16px;
cursor: pointer;
}
.banner .select__list li a {
display: block;
color: var(--color-text-dark-muted);
text-decoration: none;
}
.banner .select__list li a:hover {
text-decoration: underline;
}
.banner .filters__btn {
font-weight: 500;
padding: 12px 32px;
}
.banner__features strong {
font-weight: inherit;
display: block;
}
.banner--hero-service .banner__actions {
display: flex;
flex-wrap: wrap;
gap: 24px;
}
@media (min-width: 1440px) {
.banner__container {
padding-inline: 50px;
}
.banner .banner__content {
padding: 0 0 0 40px;
}
.banner__features {
padding: 0 0 0 40px;
}
.banner--hero-service .banner__actions {
padding-left: 40px;
}
}
@media (max-width: 1199px) {
.banner {
height: unset;
max-height: none;
min-height: 760px;
padding-block: 140px 44px;
}
.banner__container {
padding-inline: 24px;
padding-bottom: 0;
flex-direction: column;
align-items: flex-start;
min-height: 100%;
gap: 36px;
}
.banner .banner__content {
max-width: 620px;
}
.banner h1 {
font-size: 48px;
font-weight: 500;
}
.banner__bottom {
width: 100%;
&.is-revealed {
transform: unset !important;
will-change: auto !important;
}
}
.banner .banner__features {
padding: 0;
gap: 20px;
margin-bottom: 28px;
}
.banner .banner__filters {
padding: 22px;
}
.banner .filters__tabs {
gap: 18px;
font-size: 14px;
}
.banner .filters__tabs li a {
padding-bottom: 12px;
gap: 8px;
}
.banner .filters__row {
flex-wrap: wrap;
padding-top: 16px;
}
.banner .custom-select {
width: calc(33.333% - 6px);
}
.banner .filters__btn {
width: 100%;
min-width: 0;
}
}
@media (max-width: 767px) {
body.filters-popup-open {
overflow: hidden;
}
.banner {
min-height: 100vh;
padding-block: 116px 26px;
display: flex;
}
.banner__container {
padding-inline: 16px;
gap: 20px;
height: auto;
min-height: 100%;
}
.banner .banner__content {
width: 100%;
max-width: 100%;
flex: 1;
display: flex;
flex-flow: column nowrap;
padding: 5vh 0;
}
.banner h1 {
font-size: 38px;
margin-bottom: auto;
padding-bottom: 20px;
}
.banner .banner__content p {
font-size: 16px;
line-height: 1.4;
margin: 0;
}
.banner .banner__features {
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
font-size: 10px;
}
.banner .banner__features li {
width: calc(50% - 4px);
padding-left: 5px;
color: var(--color-banner-muted-2);
}
.banner__features strong {
display: inline;
}
.banner .filters__opener {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
width: 100%;
padding: 18px 16px;
border-radius: 12px;
background: var(--glass-white-35);
backdrop-filter: blur(5px);
border: 1px solid transparent;
color: var(--color-white);
font-size: 14px;
line-height: 1;
font-weight: 400;
text-transform: uppercase;
}
.banner .filters__opener svg {
width: 20px;
height: 20px;
flex: 0 0 auto;
}
.banner .banner__filters {
position: fixed;
inset: 0;
z-index: 30;
display: flex;
flex-direction: column;
gap: 40px;
padding: 14px 16px 24px;
background: var(--glass-navy-55);
border-radius: 0;
overflow-y: auto;
opacity: 0;
pointer-events: none;
transform: translateY(0);
backdrop-filter: blur(10px);
transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
}
.banner .banner__filters.is-open {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.banner .filters__close {
display: inline-flex;
align-items: center;
justify-content: center;
align-self: flex-end;
width: 31px;
height: 31px;
color: var(--color-white);
}
.banner .filters__tabs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border: 1px solid var(--glass-white-70);
border-radius: 14px;
overflow: hidden;
}
.banner .filters__tabs::after {
display: none;
}
.banner .filters__tabs li {
opacity: 1;
border-right: 1px solid var(--glass-white-70);
}
.banner .filters__tabs li:last-child {
border-right: 0;
}
.banner .filters__tabs li a {
justify-content: center;
padding: 9px 8px;
font-size: 14px;
line-height: 1.2;
}
.banner .filters__tabs li.active {
background-color: var(--color-brand-primary);
}
.banner .filters__tabs li svg {
display: none;
}
.banner .filters__tabs li span {
white-space: nowrap;
}
.banner .filters__tabs li:nth-child(1) span {
font-size: 0;
}
.banner .filters__tabs li:nth-child(1) span::before {
content: 'ДВЗ';
font-size: 14px;
}
.banner .custom-select {
display: block;
width: 100%;
}
.banner .select__head {
font-size: 20px;
padding: 16px 18px;
border-radius: 16px;
}
.banner .select__head:before {
right: 16px;
}
.banner .filters__row {
border-top: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.banner .filters__btn {
width: 100%;
background: var(--color-brand-primary);
border: 0;
margin-top: 20px;
}
}
.banner--hero-service {
padding-block: 26px 48px;
min-height: 80vh;
}
.banner--hero-service::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to right, var(--glass-black-90) 0%, rgba(12, 29, 71, 0.72) 43%, rgba(12, 29, 71, 0.3) 100%);
}
.banner--hero-service .banner__container {
position: relative;
z-index: 1;
}
.banner--hero-service .banner__container {
justify-content: flex-start;
}
.banner--hero-service .banner__logo {
display: flex;
justify-content: center;
margin: 0 0 20px;
}
.banner--hero-service .banner__logo img {
width: 220px;
}
.banner--hero-service .banner__content {
max-width: 100%;
}
.banner--hero-service h1 {
margin: 0 0 0.6em;
}
.banner--hero-service .banner__content p {
font-size: 18px;
line-height: 1.35;
}
.banner--hero-service .banner__bottom {
padding-bottom: 60px;
}
.banner--hero-service .banner__features {
display: grid;
grid-template-columns: repeat(6, minmax(199px, auto));
gap: 14px;
}
.banner--hero-service .banner__features li {
border-color: var(--glass-white-35);
}
@media (max-width: 1199px) {
.banner--hero-service .banner__logo {
margin-bottom: 54px;
}
.banner--hero-service .banner__content {
margin-bottom: 46px;
}
.banner--hero-service h1 {
font-size: 54px;
}
.banner--hero-service .banner__features {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 1023px) {
.banner--hero-service h1 {
max-width: 600px;
}
}
@media (max-width: 767px) {
.banner--hero-service {
padding-block: 22px 30px;
min-height: 75vh;
}
.banner--hero-service::after {
background: linear-gradient(to bottom, var(--glass-black-90) 0%, rgba(12, 29, 71, 0.72) 43%, rgba(12, 29, 71, 0.3) 100%);
}
.banner--hero-service .banner__logo {
justify-content: center;
width: 100%;
margin-bottom: 28px;
}
.banner--hero-service .banner__logo img {
width: 150px;
}
.banner--hero-service .banner__content {
margin-bottom: 26px;
}
.banner--hero-service .banner__content p {
font-size: 14px;
line-height: 1.7;
margin: 8px 0 0;
}
.banner--hero-service h1 {
margin-block: auto;
font-size: clamp(30px, 8vw, 54px);
max-width: 89%;
}
.banner--hero-service .banner__bottom {
padding-block: 10px 0;
}
.banner--hero-service .banner__features {
margin-bottom: 22px;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.banner--hero-service .banner__features li {
font-size: 10px;
width: auto;
}
.banner--hero-service .banner__actions {
gap: 12px;
}
.banner--hero-service .banner__actions .button {
font-size: 12px;
padding-inline: 14px;
flex: 1 1 calc(50% - 6px);
}
}
.popular-car {
background: var(--color-surface-soft);
padding: 100px 0;
}
.popular-car .heading {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
font-weight: 600;
margin: 0 0 30px;
}
.popular-car .heading h2 {
font-size: 40px;
font-weight: 700;
margin: 0;
}
.popular-car .view-all {
position: relative;
padding: 0 24px 0 0;
text-transform: uppercase;
font-size: 14px;
font-weight: 500;
color: var(--color-base);
text-decoration: none;
}
.popular-car .view-all:after {
content: '';
position: absolute;
top: 50%;
right: 0;
transform: translate(0, -50%);
width: 12px;
height: 12px;
background: url(//boltorez.com.ua/wp-content/themes/boltorez/images/ico-arrow-right.svg) no-repeat center right;
transition: transform 0.25s ease;
}
.popular-car .view-all:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
transform: scaleX(0);
width: calc(100% - 24px);
height: 1px;
background: currentColor;
transform-origin: 100% 0;
transition: transform 0.25s ease;
}
.popular-car .view-all:hover {
text-decoration: none;
}
.popular-car .view-all:hover:after {
transform: translate(5px, -50%);
}
.popular-car .view-all:hover:before {
transform: scaleX(1);
transform-origin: 0 0;
}
.popular-car-items {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 4px;
}
.popular-car-item {
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-evenly;
padding: 10px 20px;
border-radius: 16px;
background-color: var(--glass-white-70);
min-height: 237px;
position: relative;
overflow: hidden;
cursor: pointer;
}
.popular-car-item img {
display: block;
height: 90px;
width: auto;
max-width: 100%;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.popular-car-item strong {
display: block;
font-size: 16px;
font-weight: 500;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.popular-car-item:hover img,
.popular-car-item:hover strong {
opacity: 0;
transform: translateY(-6px);
}
.popular-car-item:hover .popular-car-info {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
.popular-car-info {
display: block;
position: absolute;
width: 100%;
height: 100%;
padding: 16px 16px 60px;
z-index: 1;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(8px);
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}
.popular-car-info-holder {
display: flex;
flex-direction: column;
justify-content: space-around;
gap: 12px;
font-size: 12px;
}
.popular-car-info-holder img {
display: block !important;
align-self: start;
width: auto;
height: 32px;
max-width: 100%;
object-fit: contain;
opacity: 1 !important;
}
.popular-car-info-holder ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
width: 100%;
text-align: start;
}
.popular-car-info-holder ul li {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.popular-car-info-holder ul li a {
display: block;
color: inherit;
text-decoration: none;
}
.popular-car-info-holder ul li a:hover {
text-decoration: none;
color: var(--color-brand-primary);
}
.popular-car-info .popular-car-info-btn {
position: absolute;
bottom: 16px;
left: 16px;
width: 86%;
padding: 12px 0 0;
border-top: 1px solid var(--color-surface-soft-4);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
background-color: var(--color-surface-soft-3);
color: inherit;
text-decoration: none;
}
.popular-car-info .popular-car-info-btn:hover {
color: var(--color-brand-primary-light);
}
.popular-car-info .popular-car-info-btn::before {
content: '';
clear: both;
position: absolute;
top: 16px;
right: 0;
width: 16px;
height: 16px;
background: url(//boltorez.com.ua/wp-content/themes/boltorez/images/ico-arrow-right.svg) no-repeat;
}
.popular-car-popup-close {
display: none;
}
@media (max-width: 1199px) {
.popular-car .container {
padding-inline: 24px;
}
.popular-car {
padding-block: 64px;
}
.popular-car-items {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 767px) {
.popular-car {
padding-block: 60px 110px;
position: relative;
}
.popular-car .container {
padding-inline: 16px;
}
.popular-car .heading {
margin-bottom: 16px;
}
.popular-car .heading h2 {
font-size: 26px;
}
.popular-car .view-all {
position: absolute;
bottom: 60px;
inset-inline-end: var(--popular-car-popup-origin-x, 18px);
}
.popular-car-items {
grid-template-columns: repeat(4, 1fr);
gap: 8px;
will-change: unset;
}
.popular-car-item {
min-height: 64px;
padding: 10px 6px;
gap: 12px;
text-align: center;
align-items: center;
border-radius: 12px;
transform: none !important;
}
.popular-car-item img {
width: auto;
height: 42px;
object-fit: contain;
}
.popular-car-item strong {
font-size: clamp(12px, 3vw, 16px);
}
.popular-car-item:hover img,
.popular-car-item:hover strong {
opacity: 1;
transform: none;
}
.popular-car-item:hover .popular-car-info {
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: scale(0.22);
}
.popular-car-item .popular-car-info {
position: fixed;
inset: 0;
width: auto;
height: auto;
padding: 56px 16px 60px;
border-radius: 0;
background: var(--glass-white-70);
z-index: 40;
backdrop-filter: blur(10px);
transform: scale(0.22);
transform-origin: var(--popular-car-popup-origin-x, 50%) var(--popular-car-popup-origin-y, 50%);
transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.32s ease;
}
.popular-car-item.is-open .popular-car-info {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: scale(1);
}
.popular-car-item.is-open .popular-car-popup-close {
display: inline-flex;
align-items: center;
justify-content: center;
position: absolute;
top: 12px;
right: 16px;
width: 31px;
height: 31px;
border: 0;
padding: 0;
background: transparent;
color: var(--color-brand-dark);
z-index: 2;
}
.popular-car-item.is-open .popular-car-info-holder {
font-size: 16px;
gap: 10px;
align-items: start;
}
body.popular-car-popup-open {
overflow: hidden;
}
.popular-car-info .popular-car-info-btn {
background-color: transparent;
border: 0;
}
}
.services {
background: var(--gradient-services);
padding: 100px 0;
}
.services .heading {
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 600;
margin: 0 0 60px;
}
.services .heading h2 {
font-size: 40px;
font-weight: 700;
margin: 0;
}
.services-items {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
gap: clamp(16px, 3.5vw, 40px);
margin: 0 0 70px;
}
.services-item {
position: relative;
display: flex;
flex-flow: column nowrap;
align-items: stretch;
overflow: hidden;
width: calc(25% - 12px);
max-width: 263px;
color: var(--color-base);
text-decoration: none;
font-size: 18px;
font-weight: 700;
line-height: 1.1;
border-radius: var(--radius-md);
text-transform: uppercase;
z-index: 1;
box-shadow: var(--shadow-card);
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
&:hover {
img {
transform: scale(1.15);
opacity: 1;
}
}
&:has(.coming-soon) {
pointer-events: none;
position: relative;
user-select: none;
& > * {
opacity: 0.6;
}
}
}
.coming-soon {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: normal;
color: var(--color-white);
border-radius: inherit;
opacity: 1 !important;
z-index: 5;
backdrop-filter: blur(2px);
&:before {
content: '';
position: absolute;
inset: 0;
background: var(--color-brand-dark);
opacity: 0.3;
z-index: -1;
}
span {
transform: rotate(-45deg);
#header & {
transform: rotate(-5deg);
}
}
}
.services-item img {
display: block;
width: 100%;
aspect-ratio: 263 / 168;
object-fit: cover;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
opacity: 0.8;
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.services-item strong {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
position: relative;
flex: 1 0 auto;
background: var(--color-surface-soft-2);
font-weight: 700;
text-align: center;
padding: 8px;
z-index: 3;
border-bottom-left-radius: var(--radius-md);
border-bottom-right-radius: var(--radius-md);
}
.services-banner {
position: relative;
width: 100%;
z-index: 0;
aspect-ratio: 1220 / 230;
margin: 40px 0 -10px;
img {
position: absolute;
left: 50%;
top: 0;
width: 100%;
max-width: 1220px;
height: auto;
transform: translateX(-50%);
}
}
.services-button {
display: flex;
justify-content: center;
}
.services-button .button {
min-width: 405px;
font-weight: 500;
}
.road-help-modal {
--rhm-overlay-bg: rgba(19, 32, 49, 0.55);
--rhm-dialog-width: min(780px, calc(100% - 32px));
--rhm-dialog-max-height: calc(100vh - 32px);
--rhm-dialog-padding: 60px 32px 40px;
--rhm-dialog-radius: 20px;
--rhm-dialog-bg: #eff1f5;
--rhm-dialog-shadow: none;
--rhm-close-top: 14px;
--rhm-close-right: 14px;
--rhm-close-size: 28px;
--rhm-close-line-width: 24px;
--rhm-close-line-height: 2px;
--rhm-close-line-radius: 2px;
--rhm-form-gap: 12px;
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 1200;
backdrop-filter: blur(8px);
transition: opacity 0.25s ease, visibility 0.25s ease;
}
.road-help-modal.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.road-help-modal__overlay {
position: absolute;
inset: 0;
background: var(--rhm-overlay-bg);
}
.road-help-modal__dialog {
position: relative;
width: var(--rhm-dialog-width);
max-height: var(--rhm-dialog-max-height);
padding: var(--rhm-dialog-padding);
border-radius: var(--rhm-dialog-radius);
background: var(--rhm-dialog-bg);
box-shadow: var(--rhm-dialog-shadow);
overflow: auto;
}
.road-help-modal__close {
position: absolute;
top: var(--rhm-close-top);
right: var(--rhm-close-right);
width: var(--rhm-close-size);
height: var(--rhm-close-size);
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
}
.road-help-modal__close::before,
.road-help-modal__close::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: var(--rhm-close-line-width);
height: var(--rhm-close-line-height);
border-radius: var(--rhm-close-line-radius);
background: #111827;
}
.road-help-modal__close::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.road-help-modal__close::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.road-help-modal__head {
margin: 0 0 16px;
text-align: center;
}
.road-help-modal__head h3 {
margin: 0 0 10px;
font-size: clamp(28px, 2.1vw, 36px);
line-height: 1.12;
font-weight: 700;
}
.road-help-modal__head p {
margin: 0;
font-size: 16px;
line-height: 1.3;
font-weight: 500;
}
.road-help-modal__form {
display: grid;
gap: var(--rhm-form-gap);
}
.road-help-modal__problems {
margin: 0;
padding: 0;
border: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 36px;
}
.road-help-modal__problems legend {
margin: 0 0 6px;
padding: 0;
font-size: 18px;
line-height: 1.2;
font-weight: 700;
}
.road-help-modal__option {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
font-size: 16px;
line-height: 1.2;
font-weight: 500;
}
.road-help-modal__option input {
appearance: none;
width: 22px;
height: 22px;
margin: 0;
border: 2px solid #aeb8c4;
border-radius: 5px;
background: #fff;
flex: none;
display: grid;
place-items: center;
}
.road-help-modal__option input::before {
content: '';
width: 6px;
height: 11px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(45deg) scale(0);
transform-origin: center;
transition: transform 0.15s ease;
}
.road-help-modal__option input:checked {
background: #0a58f5;
border-color: #0a58f5;
}
.road-help-modal__option input:checked::before {
transform: rotate(45deg) scale(1);
}
.road-help-modal__field {
display: grid;
gap: 8px;
}
.road-help-modal__field label {
font-size: 18px;
line-height: 1.2;
font-weight: 700;
}
.road-help-modal__field label small {
font-size: 14px;
font-weight: 700;
}
.road-help-modal__field input {
width: 100%;
height: 44px;
padding: 0 14px;
border: 2px solid #b2bcc8;
border-radius: 8px;
font-size: 16px;
line-height: 1.2;
}
.road-help-modal__field input::placeholder {
color: #9ea8b5;
}
.road-help-modal__submit {
min-width: 0;
width: min(100%, 340px);
justify-self: center;
margin-top: 10px;
}
.road-help-modal--service-booking {
--rhm-dialog-width: min(540px, calc(100% - 32px));
--rhm-dialog-padding: 56px 24px 24px;
--rhm-dialog-radius: 20px;
--rhm-dialog-bg: #eff1f5;
--rhm-close-top: 12px;
--rhm-close-right: 12px;
--rhm-close-size: 28px;
--rhm-close-line-width: 24px;
--rhm-close-line-height: 2px;
--rhm-close-line-radius: 2px;
--rhm-simple-form-width: 100%;
--rhm-simple-form-gap: 14px;
--rhm-simple-input-height: 56px;
--rhm-simple-input-padding: 0 18px;
--rhm-simple-input-border: 1px solid #d5ddea;
--rhm-simple-input-radius: 12px;
--rhm-simple-input-font-size: 18px;
--rhm-simple-input-color: var(--color-brand-dark);
--rhm-simple-input-placeholder: #b2bccd;
--rhm-simple-submit-height: 60px;
--rhm-simple-submit-margin-top: 8px;
--rhm-simple-submit-radius: 12px;
--rhm-simple-submit-font-size: 16px;
--rhm-simple-submit-letter-spacing: 0.03em;
}
.road-help-modal--service-booking .road-help-modal__form--service-booking {
width: var(--rhm-simple-form-width);
margin: 0 auto;
display: grid;
gap: var(--rhm-simple-form-gap);
}
.road-help-modal--service-booking .road-help-modal__form--service-booking input {
width: 100%;
height: var(--rhm-simple-input-height);
padding: var(--rhm-simple-input-padding);
border: var(--rhm-simple-input-border);
border-radius: var(--rhm-simple-input-radius);
color: var(--rhm-simple-input-color);
font-size: var(--rhm-simple-input-font-size);
font-weight: 500;
line-height: 1.1;
}
.road-help-modal--service-booking .road-help-modal__form--service-booking input::placeholder {
color: var(--rhm-simple-input-placeholder);
}
.road-help-modal--service-booking .road-help-modal__submit--service-booking {
width: 100%;
height: var(--rhm-simple-submit-height);
margin-top: var(--rhm-simple-submit-margin-top);
justify-content: center;
font-size: var(--rhm-simple-submit-font-size);
font-weight: 700;
letter-spacing: var(--rhm-simple-submit-letter-spacing);
line-height: 1;
text-transform: uppercase;
border-radius: var(--rhm-simple-submit-radius);
}
body.road-help-modal-open {
overflow: hidden;
}
@media (max-width: 1199px) {
.services .container {
padding-inline: 24px;
}
.services {
padding-block: 70px;
}
.services-items {
justify-content: center;
gap: 12px;
}
.services-item {
font-size: 16px;
}
.services-banner {
aspect-ratio: 1000 / 230;
}
}
@media (max-width: 767px) {
.services {
padding-block: 60px;
background: var(--gradient-services-mobile);
}
.services .container {
padding-inline: 16px;
}
.services .heading {
margin-bottom: 24px;
}
.services .heading h2 {
font-size: 26px;
}
.services-items {
gap: 24px 12px;
margin-bottom: 40px;
}
.services-item {
width: calc(50% - 6px);
font-size: clamp(11px, 3vw, 18px);
line-height: 1.1;
border-radius: 10px;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
}
.services-item img {
width: 100%;
min-height: 82px;
height: auto;
opacity: 1;
aspect-ratio: 125 / 82;
}
.services-item strong {
padding: 6px 4px;
}
.services-banner {
display: none;
}
.services-button .button {
min-width: 0;
width: auto;
}
.road-help-modal {
--rhm-dialog-width: 100%;
--rhm-dialog-max-height: none;
--rhm-dialog-padding: 48px 16px 22px;
--rhm-dialog-radius: 0;
--rhm-close-top: 10px;
--rhm-close-right: 10px;
align-items: stretch;
}
.road-help-modal__dialog {
height: 100%;
}
.road-help-modal__head {
margin-bottom: 18px;
}
.road-help-modal__head h3 {
font-size: clamp(24px, 7.2vw, 30px);
margin-bottom: 10px;
}
.road-help-modal__head p {
font-size: 18px;
}
.road-help-modal__problems {
grid-template-columns: 1fr;
gap: 10px;
}
.road-help-modal__problems legend {
font-size: 20px;
margin-bottom: 6px;
}
.road-help-modal__option {
font-size: 16px;
gap: 12px;
}
.road-help-modal__option input {
width: 28px;
height: 28px;
border-radius: 6px;
}
.road-help-modal__option input::before {
width: 7px;
height: 12px;
border-right-width: 2px;
border-bottom-width: 2px;
}
.road-help-modal__field label {
font-size: 18px;
}
.road-help-modal__field label small {
font-size: 16px;
}
.road-help-modal__field input {
height: 52px;
padding: 0 14px;
font-size: 18px;
}
.road-help-modal__submit {
width: 100%;
margin-top: 8px;
}
.road-help-modal--service-booking .road-help-modal__dialog {
--rhm-dialog-width: min(540px, calc(100% - 24px));
--rhm-dialog-padding: 54px 20px 22px;
}
.road-help-modal--service-booking .road-help-modal__form--service-booking {
--rhm-simple-form-width: 100%;
}
}
@media (max-width: 767px) {
.road-help-modal--service-booking .road-help-modal__dialog {
--rhm-dialog-width: 100%;
--rhm-dialog-max-height: none;
--rhm-dialog-padding: 48px 20px 22px;
--rhm-dialog-radius: 0;
height: 100%;
margin: 0;
}
.road-help-modal--service-booking .road-help-modal__close {
--rhm-close-right: 10px;
--rhm-close-top: 10px;
--rhm-close-size: 28px;
}
.road-help-modal--service-booking .road-help-modal__form--service-booking {
--rhm-simple-form-width: 100%;
--rhm-simple-form-gap: 12px;
--rhm-simple-input-height: 52px;
--rhm-simple-input-padding: 0 16px;
--rhm-simple-input-font-size: 16px;
--rhm-simple-submit-height: 56px;
--rhm-simple-submit-margin-top: 6px;
}
}
.services--switchable {
padding-block: 86px 58px;
background: var(--color-white);
}
.services--switchable .heading {
margin: 0 0 42px;
}
.services--switchable .heading h2 {
font-size: 40px;
line-height: 1.06;
}
.services--switchable .services__layout {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.95fr);
gap: 36px;
align-items: center;
}
.services--switchable .services__media {
border-radius: 20px;
overflow: hidden;
box-shadow: var(--shadow);
aspect-ratio: 568 / 391;
}
.services--switchable .services__image {
width: 100%;
height: 100%;
object-fit: cover;
}
.services--switchable .services__switcher {
display: grid;
gap: 12px;
}
.services__switcher-btn {
display: flex;
align-items: center;
position: relative;
overflow: hidden;
min-height: 58px;
padding: 14px 22px;
border-radius: var(--radius-md);
color: var(--color-brand-dark);
font-size: 20px;
font-weight: 500;
line-height: 1.2;
text-align: left;
gap: 16px;
z-index: 1;
transition: color 0.25s ease;
&:before {
content: '';
position: absolute;
inset: 0;
background: var(--gradient-services-btn);
transform: translateX(-100%);
z-index: -1;
transition: transform 0.25s ease;
}
}
.services__switcher-icon {
width: 175px;
height: 70px;
margin-block: -18px;
flex: none;
object-fit: contain;
transition: filter 0.25s ease;
}
.services__switcher-btn.is-active {
color: var(--color-white);
.services__switcher-icon {
filter: invert(1);
}
&:before {
transform: translateX(0);
}
}
.services__description {
max-width: 760px;
padding: 34px 0 0;
}
.services__description-item {
display: none;
font-size: 20px;
line-height: 1.42;
color: var(--color-base);
}
.services__description-item.is-active {
display: block;
}
.services__description-item p {
margin: 16px 0 0;
&:first-child {
margin-top: 0;
}
}
.services__description-item ul {
margin: 0;
padding: 0;
list-style: none;
}
.services__description-item li {
margin: 0 0 8px;
padding-left: 22px;
position: relative;
}
.services__description-item li::before {
content: '';
position: absolute;
left: 5px;
top: 12px;
width: 5px;
height: 5px;
border-radius: 50%;
background-color: var(--color-brand-primary);
}
@media (min-width: 1200px) {
.services__description {
&:before {
content: '';
display: block;
width: 95%;
height: 1px;
background: var(--color-border-gray);
margin: 0 0 34px;
}
}
}
@media (max-width: 1199px) {
.services--switchable .heading h2 {
font-size: 40px;
}
.services--switchable .services__layout {
grid-template-columns: 1fr;
}
.services__switcher {
order: -1;
}
.services__description {
padding-top: 22px;
}
.services__switcher-btn,
.services__description-item {
font-size: 18px;
}
}
@media (max-width: 767px) {
.services--switchable {
padding: 52px 0 40px;
}
.services--switchable .heading {
margin-bottom: 28px;
}
.services--switchable .heading h2 {
font-size: 26px;
}
.services__media,
.services__image {
min-height: 220px;
}
.services__switcher {
margin-inline: -18px;
}
.services__switcher-btn {
font-size: 16px;
min-height: 52px;
padding-inline: 18px;
border-radius: 0;
gap: 10px;
}
.services__switcher-icon {
width: 90px;
}
.services__description-item {
font-size: 14px;
}
}
.about {
background: var(--color-surface-soft);
padding: 60px 0 90px;
}
.about .heading {
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 600;
margin: 0 0 60px;
}
.about .heading h2 {
font-size: 40px;
font-weight: 700;
margin: 0;
}
.about-holder {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 60px;
font-size: 20px;
}
.about-holder img {
display: block;
max-width: 500px;
width: 50%;
border-radius: 12px;
}
.about-holder ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.about-holder ul li {
display: flex;
align-items: center;
gap: 16px;
}
@media (max-width: 1199px) {
.about .container {
padding-inline: 24px;
}
.about-holder {
gap: 28px;
font-size: 17px;
}
}
@media (max-width: 767px) {
.about {
padding-block: 60px;
}
.about .container {
padding-inline: 16px;
}
.about .heading {
margin-bottom: 20px;
}
.about .heading h2 {
font-size: 26px;
}
.about-holder {
flex-direction: column;
align-items: flex-start;
gap: 16px;
font-size: 14px;
}
.about-holder img {
width: 100%;
max-width: none;
}
.about-holder ul li {
gap: 10px;
}
.about-holder ul li svg {
width: 18px;
height: 18px;
}
}
.contacts {
min-height: 700px;
padding: 90px 0;
background-image: url(//boltorez.com.ua/wp-content/themes/boltorez/images/img-contacts.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.contacts-holder {
max-width: 520px;
}
.contacts .heading {
font-size: 16px;
font-weight: 400;
margin: 0 0 16px;
}
.contacts .heading h2 {
font-size: 40px;
font-weight: 700;
line-height: 1.2;
margin: 0 0 12px;
}
.contacts form {
display: flex;
flex-direction: column;
gap: 16px;
}
.contacts input {
all: unset;
width: 100%;
border-radius: var(--radius-md);
padding: 16px;
background-color: var(--color-white);
border: 1px solid var(--color-border-gray);
color: var(--color-input-muted);
font-size: 16px;
font-weight: 400;
box-sizing: border-box;
transition: border-color 0.25s ease;
&:focus {
border-color: var(--color-bradnd-dark);
}
}
.contacts input::placeholder,
.contacts input::-moz-placeholder,
.contacts input::-webkit-input-placeholder {
opacity: 1;
color: var(--color-input-muted);
}
.contacts input::-webkit-input-placeholder {
opacity: 1;
color: var(--color-input-muted);
}
.contacts .button {
width: 100%;
}
@media (max-width: 1199px) {
.contacts .container {
padding-inline: 40px;
}
.contacts {
padding-block: 70px;
}
}
@media (max-width: 767px) {
.contacts {
padding-block: 60px;
min-height: 0;
background-position: 60% center;
}
.contacts .container {
padding-inline: 16px;
}
.contacts .heading {
font-size: 14px;
}
.contacts .heading h2 {
font-size: 26px;
}
.contacts form {
gap: 12px;
}
.contacts input {
font-size: 14px;
padding: 12px;
}
}
.testimonials {
padding: 90px 0;
background-color: var(--color-white);
}
.testimonials .container {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 90px;
}
.testimonials .img-testimonials {
position: absolute;
bottom: -30px;
left: -231px;
width: 225px;
height: 337px;
object-fit: cover;
}
.testimonials .testimonials-holder,
.testimonials .testimonials-slider {
width: 50%;
box-sizing: border-box;
}
.testimonials .testimonials-holder {
position: relative;
padding: 0 0 80px;
}
.testimonials-bottom {
position: absolute;
bottom: 16px;
left: 0;
}
.testimonials-bottom p {
margin: 0;
}
.testimonials-bottom p a {
color: var(--color-brand-primary);
font-size: 16px;
font-weight: 700;
text-decoration: none;
position: relative;
padding: 0 26px 0 0;
}
.testimonials-bottom p a::after {
content: '';
clear: both;
position: absolute;
top: 4px;
right: 0;
width: 17px;
height: 17px;
background: url(//boltorez.com.ua/wp-content/themes/boltorez/images/ico-right-arrow.svg) no-repeat;
transition: transform 0.25s ease;
}
.testimonials-bottom p a::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: calc(100% - 26px);
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: 100% 0;
transition: transform 0.25s ease;
}
.testimonials-bottom p a:hover::before {
transform: scaleX(1);
transform-origin: 0 0;
}
.testimonials-bottom p a:hover::after {
transform: translateX(8px);
}
.testimonials-frame {
padding: 0 0 60px;
}
.testimonials h2 {
font-size: 40px;
font-weight: 700;
line-height: 1.2;
margin: 0 0 12px;
}
.testimonials h3 {
font-size: 32px;
font-weight: 700;
line-height: 1.2;
margin: 0 0 16px;
}
.testimonials p strong {
font-size: 20px;
font-weight: 500;
}
.testimonials-slider {
width: 624px;
border-radius: 33px;
padding: 110px 40px 30px 120px;
background-image: var(--gradient-testimonials);
position: relative;
}
.testimonials-slider .ico-quotes {
position: absolute;
top: 40px;
left: 40px;
}
.testimonials-slider-holder {
width: 100%;
padding: 0 0 70px;
position: relative;
}
.testimonials-slider-holder .slick-prev,
.testimonials-slider-holder .slick-next {
position: absolute;
left: 0;
bottom: 0;
width: 49px;
height: 41px;
background: url(//boltorez.com.ua/wp-content/themes/boltorez/images/ico-arrow1-left.svg) no-repeat;
text-indent: -9999px;
overflow: hidden;
transition: transform 0.25s ease;
&:hover {
transform: scale(1.1);
}
}
.testimonials-slider-holder .slick-next {
left: 60px;
background: url(//boltorez.com.ua/wp-content/themes/boltorez/images/ico-arrow1-right.svg) no-repeat;
}
.testimonials-slide {
width: 100%;
}
.testimonials-info {
display: flex;
flex-direction: row;
gap: 16px;
}
.testimonials-info img {
display: block;
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 50%;
}
.testimonials-info strong {
display: block;
font-weight: 400;
}
.testimonials-rating-holder {
display: flex;
flex-direction: column;
gap: 8px;
justify-content: center;
}
.testimonials-rating {
display: flex;
flex-direction: row;
gap: 16px;
align-items: center;
}
.testimonials-info em {
display: block;
font-style: normal;
}
.testimonials-star {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
gap: 6px;
}
.testimonials-star img {
display: block;
width: 16px;
height: auto;
}
.testimonials-buttons {
display: flex;
gap: 10px;
padding: 30px 0 0;
}
@media (max-width: 1199px) {
.testimonials .container {
padding-inline: 40px;
gap: 40px;
}
.testimonials {
padding-block: 70px;
}
.testimonials .img-testimonials {
left: -115px;
width: 160px;
height: auto;
}
.testimonials-slider {
width: 100%;
padding: 92px 30px 26px 88px;
}
}
@media (max-width: 767px) {
.testimonials {
padding-block: 60px 84px;
}
.testimonials .container {
padding-inline: 16px;
flex-direction: column;
gap: 20px;
}
.testimonials .testimonials-holder,
.testimonials .testimonials-slider {
width: 100%;
}
.testimonials .testimonials-holder {
padding-bottom: 18px;
text-align: center;
}
.testimonials-frame {
padding-bottom: 34px;
}
.testimonials .button {
margin-bottom: 16px;
}
.testimonials-bottom,
.testimonials .img-testimonials {
display: none;
}
.testimonials h2 {
font-size: 26px;
}
.testimonials h3 {
font-size: 20px;
}
.testimonials p,
.testimonials p strong {
font-size: 14px;
}
.testimonials-slider {
padding: 76px 18px 22px;
border-radius: 20px;
}
.testimonials-slider .ico-quotes {
top: 20px;
left: 18px;
width: 40px;
height: 40px;
}
.testimonials-slider-holder {
padding-bottom: 0;
position: static;
}
.testimonials-slider-holder .slick-dots {
position: absolute;
left: 0;
right: 0;
bottom: -24px;
display: flex;
justify-content: center;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.testimonials-slider-holder .slick-dots li {
line-height: 0;
}
.testimonials-slider-holder .slick-dots button {
width: 33px;
height: 2px;
border-radius: 999px;
border: 0;
padding: 0;
background: rgba(10, 32, 75, 0.25);
font-size: 0;
transition: background-color 0.3s ease-in-out;
}
.testimonials-slider-holder .slick-dots li.slick-active button {
background: var(--color-brand-dark);
}
}
.steps-panel {
display: flex;
flex-flow: row nowrap;
align-items: stretch;
gap: 0;
background-color: var(--color-brand-dark);
color: var(--color-white);
}
.steps-panel__media {
width: 50%;
margin-right: -10%;
position: relative;
overflow: hidden;
background-color: var(--color-white);
clip-path: polygon(-2px -2px, 75% -2px, 100% calc(100% + 2px), -2px calc(100% + 2px));
}
.steps-panel__media img {
position: absolute;
inset: 0;
width: 100%;
height: 110%;
object-fit: cover;
object-position: 100% 50%;
}
.steps-panel__content {
display: flex;
flex-flow: column nowrap;
align-items: start;
width: 60%;
position: relative;
padding: 64px 58px 64px 5%;
}
.steps-panel__content h2 {
margin: 0 0 36px;
font-size: 40px;
line-height: 1.12;
font-weight: 600;
}
.steps-panel__content ol {
margin: 0 0 42px;
padding: 0;
list-style: none;
width: 100%;
}
.steps-panel__content ol li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 16px 0;
border-bottom: 1px solid var(--color-brand-danger);
font-size: 20px;
line-height: 1.2;
font-weight: 500;
}
.steps-panel__content ol li:nth-child(2) {
margin-left: 50px;
}
.steps-panel__content ol li:nth-child(3) {
margin-left: 100px;
}
.steps-panel__content ol li strong {
font-size: 40px;
line-height: 1;
font-weight: 700;
}
.steps-panel__contacts {
position: relative;
margin: 60px 0 0 auto;
}
.steps-panel__contacts-toggle {
min-width: 380px;
margin-left: auto;
}
.steps-panel__contacts-menu {
position: absolute;
left: 0;
right: 0;
bottom: calc(100% + 12px);
margin: 0;
padding: 12px;
list-style: none;
background-color: var(--color-white);
border-radius: var(--radius-md);
box-shadow: 0 14px 34px var(--glass-black-25);
opacity: 0;
transform: translateY(10px);
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.steps-panel__contacts.is-open .steps-panel__contacts-menu {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.steps-panel__contacts-menu a {
display: flex;
padding: 10px 12px;
border-radius: 8px;
color: var(--color-brand-dark);
font-size: 20px;
font-weight: 600;
}
.steps-panel__contacts-menu a:hover {
background-color: var(--color-surface-soft);
}
@media (max-width: 1199px) {
.steps-panel__content h2 {
font-size: 42px;
margin-bottom: 24px;
}
.steps-panel__content ol li {
font-size: 28px;
}
.steps-panel__content li strong {
font-size: 42px;
}
}
@media (max-width: 989px) {
.steps-panel {
flex-flow: column nowrap;
align-items: stretch;
}
.steps-panel__content {
width: 100%;
align-items: stretch;
padding: 40px 18px 60px;
}
.steps-panel__content h2 {
font-size: clamp(26px, 5vw, 40px);
line-height: 1.1;
text-align: center;
}
.steps-panel__media {
width: 100%;
aspect-ratio: 444 / 210;
clip-path: none;
overflow: hidden;
}
.steps-panel__media img {
height: 115%;
object-position: 110% 50%;
}
.steps-panel__content ol li {
position: relative;
margin: 0 0 0 50px !important;
font-size: clamp(16px, 3vw, 20px);
& > strong {
position: absolute;
left: -50px;
top: 50%;
font-size: 40px;
line-height: 1;
transform: translateY(-50%);
}
}
.steps-panel__contacts {
margin: 20px auto 0;
}
}
@media (max-width: 767px) {
.steps-panel__content ol li {
font-size: 16px;
}
.steps-panel__content li strong {
font-size: 34px;
}
.steps-panel__contacts-toggle {
width: 100%;
min-width: 0;
}
.steps-panel__contacts-menu a {
font-size: 17px;
}
}
.gallery--auto-rotate {
padding: 100px 0;
background-color: var(--color-surface-soft-3);
overflow: hidden;
}
.gallery--auto-rotate .gallery__track {
margin: 0 -6px;
}
.gallery--auto-rotate .gallery__track .slick-list {
overflow: visible;
}
.gallery--auto-rotate .gallery__item {
padding: 0 6px;
}
.gallery--auto-rotate .gallery__item img {
width: 100%;
height: auto;
aspect-ratio: 450 / 310;
object-fit: cover;
border-radius: 14px;
}
@media (max-width: 767px) {
.gallery--auto-rotate {
padding: 60px 0;
}
}
.catalog {
padding: 80px 0 46px;
background: var(--color-surface-soft);
}
.catalog__head {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(16px, 3vw, 80px);
margin: 0 0 28px;
}
.catalog__head h1 {
margin: 0;
font-size: clamp(30px, 4.2vw, 62px);
font-weight: 600;
line-height: 0.95;
letter-spacing: 0.02em;
}
.catalog__brand {
width: clamp(40px, 6vw, 86px);
height: clamp(40px, 6vw, 86px);
object-fit: contain;
}
.catalog__grid {
display: flex;
flex-flow: row wrap;
justify-content: center;
gap: 10px;
}
.catalog__more {
display: none;
}
.more-btn {
display: inline-flex;
align-items: center;
gap: 10px;
cursor: pointer;
font-size: 12px;
line-height: 1.2;
font-weight: 600;
text-transform: uppercase;
color: var(--color-brand-dark);
}
.more-btn::after {
content: '';
width: 6px;
height: 6px;
border-right: 1px solid currentColor;
border-bottom: 1px solid currentColor;
transform: rotate(-45deg);
}
.more-btn.is-hidden {
display: none;
}
.catalog-card {
flex: 0 0 calc(20% - 8px);
display: block;
position: relative;
border-radius: 14px;
border: 2px solid transparent;
background: var(--color-white);
padding: 10px 14px 14px;
text-decoration: none;
text-align: center;
color: var(--color-brand-dark);
min-height: 172px;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.catalog-card:hover {
border-color: var(--color-brand-primary-light);
transform: translateY(-2px);
}
.catalog-card.is-active {
border-color: var(--color-brand-primary-light);
box-shadow: var(--shadow-brand-active);
transform: translateY(0);
}
.catalog-card__count {
position: absolute;
left: 12px;
top: 10px;
display: inline-flex;
align-items: center;
height: 32px;
padding: 0 10px 1px;
border-radius: 10px;
background: var(--color-white) radial-gradient(50% 50% at 50% 50%, #027FC2 0%, #10203F 100%) 0 -33px no-repeat;
background-size: 100% 100%;
box-shadow: 0 4px 10px var(--glass-navy-55);
font-size: 11px;
line-height: 1;
transition: background-position 0.2s ease, color 0.2s ease;
z-index: 1;
}
.catalog-card:hover .catalog-card__count,
.catalog-card.is-active .catalog-card__count {
background-position: 0 0;
color: var(--color-white);
}
.catalog-card__media {
display: flex;
align-items: flex-end;
justify-content: center;
min-height: 90px;
padding-top: 40px;
}
.catalog-card__media img {
width: 100%;
height: auto;
object-fit: contain;
aspect-ratio: 247 / 165;
}
.catalog-card__title {
margin: 6px 0 0;
font-size: 20px;
line-height: 1;
font-weight: 700;
}
.catalog-card__years {
margin: 2px 0 0;
font-size: 16px;
line-height: 1.05;
font-weight: 700;
}
.catalog-groups {
background: var(--color-white);
padding: 80px 0 40px;
}
.catalog-group {
margin: 0 0 10px;
}
.catalog-group__title {
display: flex;
align-items: center;
gap: 14px;
min-height: 30px;
padding: 12px 20px;
border-radius: 8px;
background: var(--gradient-services-btn);
color: var(--color-white);
font-size: 18px;
line-height: 1;
font-weight: 700;
text-transform: uppercase;
cursor: pointer;
user-select: none;
}
.catalog-group__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 25px;
height: 25px;
flex: none;
}
.catalog-group__icon img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: brightness(0) invert(1);
}
.catalog-group__content {
padding: 7px 6px 5px;
}
.catalog-group__columns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px 24px;
}
.catalog-group__columns ul {
margin: 0;
padding: 0;
list-style: none;
}
.catalog-group__columns li {
margin: 0 0 4px;
}
.catalog-group__columns a {
font-size: 13px;
line-height: 1.2;
font-weight: 500;
text-decoration: none;
color: var(--color-text-dark-muted);
transition: color 0.25s ease;
}
.catalog-group__columns a:hover {
text-decoration: none;
color: var(--color-brand-primary);
}
.catalog-group__columns a.is-current {
color: var(--color-brand-primary);
font-weight: 700;
}
@media (max-width: 1199px) {
.catalog-card {
flex: 0 0 calc(33.3334% - 7px);
min-height: 160px;
}
.catalog-card__media {
min-height: 86px;
}
.catalog-card__title {
font-size: 18px;
}
.catalog-card__years {
font-size: 14px;
}
.catalog-group__title {
font-size: 16px;
min-height: 28px;
}
.catalog-group__columns {
gap: 8px 14px;
}
.catalog-group__columns a {
font-size: 12px;
}
}
@media (max-width: 767px) {
.catalog {
padding-block: 60px;
}
.catalog__head {
margin-bottom: 20px;
}
.catalog__grid {
gap: 8px;
}
.catalog__grid .catalog-card.is-hidden-mobile {
display: none;
}
.catalog-card {
flex: 0 0 calc(50% - 4px);
padding: 10px 10px 12px;
min-height: 138px;
border-radius: 12px;
}
.catalog-card__count {
font-size: 11px;
height: 22px;
padding-inline: 8px;
}
.catalog-card__media {
min-height: 66px;
}
.catalog-card__media img {
height: 58px;
}
.catalog-card__title {
font-size: 16px;
}
.catalog-card__years {
font-size: 12px;
}
.catalog__more {
display: flex;
flex-flow: row wrap;
align-items: start;
justify-content: end;
gap: 12px;
margin: 30px 0 0;
}
.catalog__more:has([aria-expanded="true"]) {
display: none;
}
.catalog-groups {
padding: 60px 0 30px;
}
.catalog-group {
margin: 0 -18px 12px;
}
.catalog-group__title {
min-height: 30px;
font-size: 13px;
padding: 8px 18px;
gap: 8px;
justify-content: start;
border-radius: 0;
}
.catalog-group__title::after {
content: '';
width: 8px;
height: 8px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform 0.2s ease;
flex: none;
margin: 0 0 0 auto;
}
.catalog-group.is-open .catalog-group__title::after {
transform: rotate(-135deg);
}
.catalog-group__icon {
width: 25px;
height: auto;
}
.catalog-group__content {
padding: 0 18px;
}
.catalog-group__columns {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 12px;
padding: 10px 0 0;
}
.catalog-group__columns a {
font-size: 12px;
}
}
.catalog-detailed-page .breadcrumbs {
padding-top: 14px;
}
.catalog-detailed-hero {
padding: 76px 0 45px;
background: radial-gradient(48.36% 58.14% at 71.91% 51.64%, #2A559D 0%, #102445 100%);
}
.catalog-detailed-hero__layout {
display: grid;
grid-template-columns: repeat(2, minmax(0, calc(50% - 20px)));
justify-content: space-between;
align-items: stretch;
gap: 30px 60px;
}
.catalog-detailed-hero__info {
display: flex;
flex-direction: column;
}
.catalog-detailed-hero__title {
grid-column: 1 / -1;
margin: 0 0 18px;
color: var(--color-white);
font-size: clamp(42px, 4vw, 58px);
line-height: 1;
letter-spacing: 0.04em;
}
.catalog-detailed-hero__cars {
max-width: 100%;
flex: 0 1 auto;
}
.catalog-detailed-hero__cars-head,
.catalog-detailed-hero__car-link {
display: grid;
grid-template-columns: minmax(0, 1fr) 156px;
align-items: center;
gap: 18px;
}
.catalog-detailed-hero__cars-head {
padding: 0 0 12px;
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
line-height: 1.2;
font-weight: 600;
text-transform: uppercase;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
letter-spacing: 0.06em;
}
.catalog-detailed-hero__cars-head span:last-child {
padding-left: 24px;
text-align: end;
white-space: nowrap;
}
.catalog-detailed-hero__cars-list {
margin: 0;
padding: 0;
list-style: none;
max-height: calc(100% - 80px);
overflow-y: auto;
}
.catalog-detailed-hero__cars-item {
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.catalog-detailed-hero__car-link {
width: 100%;
padding: 16px 0;
background: transparent;
color: var(--color-white);
text-align: left;
transition: color 0.25s ease;
&:hover {
color: rgba(255, 255, 255, 0.65);
img {
transform: scale(1.1);
}
}
}
.catalog-detailed-hero__car-main {
display: flex;
align-items: center;
gap: 16px;
min-width: 0;
}
.catalog-detailed-hero__car-thumb {
flex: 0 0 72px;
width: 72px;
height: 56px;
border-radius: 10px;
overflow: hidden;
}
.catalog-detailed-hero__car-thumb img {
width: 100%;
height: 100%;
transition: transform 0.25s ease;
}
.catalog-detailed-hero__car-name {
font-size: 18px;
line-height: 1.35;
}
.catalog-detailed-hero__car-date {
display: flex;
align-self: stretch;
align-items: center;
justify-content: flex-end;
padding-left: 24px;
font-size: 18px;
line-height: 1.2;
white-space: nowrap;
}
.catalog-detailed-hero__specs {
margin: 0;
padding: 0;
list-style: none;
max-width: 100%;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.catalog-detailed-hero__specs li {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
padding: 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
font-size: 18px;
line-height: 1.2;
}
.catalog-detailed-hero__specs span {
flex: 0 0 173px;
color: rgba(255, 255, 255, 0.9);
font-size: 18px;
font-weight: 400;
}
.catalog-detailed-hero__specs strong {
flex: 1 1 auto;
color: var(--color-white);
text-align: right;
font-size: 18px;
font-weight: 400;
}
.catalog-detailed-hero__actions {
display: grid;
grid-template-columns: repeat(3, minmax(0, calc(50% - 10px)));
gap: 16px;
margin-top: 30px;
}
.catalog-detailed-hero__specs-templates[hidden] {
display: none !important;
}
.site-modal__dialog {
width: min(100%, 640px);
background: #fff;
}
.site-modal__content {
overflow: hidden;
}
.catalog-detailed-hero__specs {
border-top: 0;
}
.catalog-detailed-hero__specs li {
padding: 14px 0;
border-bottom: 1px solid #dfe6f1;
}
.catalog-detailed-hero__specs span {
color: var(--color-brand-dark);
}
.catalog-detailed-hero__specs strong {
color: var(--color-brand-dark);
}
.catalog-detailed-hero__stat {
display: inline-flex;
flex-flow: row nowrap;
justify-content: start;
align-items: center;
gap: 6px;
min-height: 55px;
padding: 6px 10px;
border-radius: 12px;
font-size: 12px;
line-height: 1.4;
font-weight: 400;
text-transform: none;
text-align: left;
background: rgba(165, 183, 204, 0.45);
color: var(--color-white);
backdrop-filter: blur(35px);
}
.catalog-detailed-hero__stat-icon {
width: 28px;
height: 28px;
object-fit: cover;
}
.catalog-detailed-hero__stat-number {
font-size: 18px;
line-height: 1;
font-weight: 400;
}
.catalog-detailed-gallery {
display: flex;
flex-flow: column nowrap;
gap: 13px;
width: 100%;
max-width: 100%;
min-width: 0;
}
.catalog-detailed-gallery__main,
.catalog-detailed-gallery__thumbs {
min-width: 0;
display: none;
&.slick-initialized {
display: block;
}
}
.catalog-detailed-gallery__thumbs {
padding-inline: 30px;
}
.catalog-detailed-gallery__main div,
.catalog-detailed-gallery__thumbs div {
border-radius: 10px;
overflow: hidden;
}
.catalog-detailed-gallery__thumbs .slick-list {
min-height: 100%;
}
.catalog-detailed-gallery__main img,
.catalog-detailed-gallery__thumbs img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.catalog-detailed-gallery__main img {
max-height: 400px;
}
.catalog-detailed-gallery__main div {
border-radius: 20px;
}
.catalog-detailed-gallery__thumbs.slick-vertical .slick-list {
padding: 14px 0;
} 
.catalog-detailed-gallery__thumbs .slick-slide {
aspect-ratio: 134 / 94;
border: none;
position: relative;
opacity: 0.5;
margin: 0 7px;
transition: opacity 0.25s ease;
&.slick-current {
opacity: 1;
&:after {
opacity: 1;
}
}
&:after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
border: 2px solid var(--color-brand-dark);
opacity: 0;
transition: opacity 0.25s ease;
}
img {
position: absolute;
left: 0;
top: 0;
}
}
.catalog-detailed-gallery__thumbs .slick-arrow {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
inset: 50% auto auto 0;
transform: translateY(-50%);
width: 24px;
height: 24px;
padding: 0;
border: 0;
background: transparent;
color: rgba(255, 255, 255, 0.8);
font-size: 0;
cursor: pointer;
z-index: 5;
}
.catalog-detailed-gallery__thumbs .slick-next {
inset-inline: auto 0;
}
.catalog-detailed-gallery__thumbs .slick-arrow::before {
content: '';
display: block;
width: 12px;
height: 12px;
border-right: 2px solid currentColor;
border-top: 2px solid currentColor;
}
.catalog-detailed-gallery__thumbs .slick-prev::before {
transform: rotate(-135deg);
}
.catalog-detailed-gallery__thumbs .slick-next::before {
transform: rotate(45deg);
}
.catalog-detailed-categories {
padding: 40px 0;
background: #f4f7fa;
}
.catalog-detailed-hero__categories {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 24px;
margin-top: 0;
}
.catalog-detailed-hero__categories a {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
min-height: 116px;
padding: 12px 16px;
border-radius: 14px;
background: var(--color-white);
color: var(--color-brand-dark);
text-decoration: none;
font-size: 15px;
line-height: 1.1;
font-weight: 500;
letter-spacing: 0.02em;
text-transform: uppercase;
text-align: center;
border: 1px solid #e5eaf1;
flex: 0 0 calc((100% - 96px) / 5);
overflow: hidden;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
z-index: 1;
}
.catalog-detailed-hero__categories a:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(58.19% 58.19% at 50.19% 50%, #2A559D 0%, #102445 100%);
opacity: 0;
pointer-events: none;
z-index: -1;
transition: opacity 0.2s ease;
}
.catalog-detailed-hero__categories a img {
width: 48px;
height: 48px;
object-fit: contain;
transition: filter 0.2s ease;
}
.catalog-detailed-hero__categories a:hover,
.catalog-detailed-hero__categories a.is-active {
color: var(--color-white);
border-color: transparent;
&:before {
opacity: 1;
}
}
.catalog-detailed-hero__categories a:hover img,
.catalog-detailed-hero__categories a.is-active img {
filter: brightness(0) invert(1);
}
.catalog-detailed-products {
padding: 56px 0 74px;
background: var(--color-white);
}
.catalog-detailed-products__head {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 16px;
margin-bottom: 18px;
}
.catalog-detailed-products__head h2 {
margin: 0;
font-size: clamp(28px, 2.8vw, 50px);
line-height: 1;
text-transform: uppercase;
}
.catalog-detailed-page--selected-car .catalog-detailed-products__layout {
display: grid;
grid-template-columns: 286px minmax(0, 1fr);
gap: 24px;
align-items: start;
}
.catalog-detailed-sidebar {
position: sticky;
z-index: 4;
top: calc(var(--header-height) + 16px);
transition: top 0.25s ease;
}
.catalog-detailed-page--selected-car .catalog-detailed-sidebar__inner {
padding: 20px;
border: 1px solid #d0dae9;
border-radius: 18px;
background: var(--color-white);
transition: top 0.25s ease;
}
.header--hidden ~ #main .catalog-detailed-sidebar {
top: 16px;
}
.catalog-detailed-page--selected-car .catalog-detailed-sidebar__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.catalog-detailed-page--selected-car .catalog-detailed-sidebar__head h3 {
margin: 0;
font-size: 16px;
line-height: 1;
text-transform: uppercase;
}
.catalog-detailed-page--selected-car .catalog-detailed-sidebar__head-actions {
display: flex;
align-items: center;
gap: 14px;
}
.catalog-detailed-page--selected-car .catalog-detailed-sidebar__reset {
color: #6f7f94;
font-size: 12px;
font-weight: 500;
text-decoration: none;
text-transform: uppercase;
}
.catalog-detailed-page--selected-car .catalog-detailed-sidebar__close {
display: none;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: 8px;
background: transparent;
color: #6f7f94;
cursor: pointer;
svg {
width: 80%;
height: 80%;
}
}
.catalog-detailed-page--selected-car .catalog-detailed-sidebar__car {
position: relative;
display: flex;
align-items: center;
gap: 10px;
height: 54px;
padding: 0 24px 0 14px;
margin-bottom: 18px;
border-radius: 10px;
background: linear-gradient(90deg, #041c42 0%, #0279ba 100%);
color: var(--color-white);
}
.catalog-detailed-page--selected-car .catalog-detailed-sidebar__car-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
color: currentColor;
svg,
img {
width: 34px;
height: 34px;
}
}
.catalog-detailed-page--selected-car .catalog-detailed-sidebar__car-input {
flex: 1 1 auto;
min-width: 0;
height: 100%;
padding: 0;
border: 0;
background: transparent;
color: var(--color-white);
font-size: 14px;
font-weight: 300;
line-height: 1;
}
.catalog-detailed-page--selected-car .catalog-detailed-sidebar__car-input::placeholder {
color: rgba(255, 255, 255, 0.8);
}
.catalog-detailed-page--selected-car .catalog-detailed-sidebar__car-input:focus {
outline: none;
}
.catalog-detailed-page--selected-car .catalog-detailed-sidebar__car-clear {
position: absolute;
top: 50%;
right: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
padding: 0;
border: 0;
background: transparent;
color: rgba(255, 255, 255, 1);
transform: translateY(-50%);
cursor: pointer;
}
.catalog-detailed-page--selected-car .catalog-detailed-sidebar__car-results {
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
z-index: 8;
border: 1px solid #d0dae9;
border-radius: 14px;
background: var(--color-white);
box-shadow: 0 14px 30px rgba(18, 29, 71, 0.16);
overflow: hidden;
transition: opacity 0.2s ease;
}
.catalog-detailed-page--selected-car .catalog-detailed-sidebar__car-results[hidden] {
display: none;
}
.catalog-detailed-page--selected-car .catalog-detailed-sidebar__car-results.is-loading {
opacity: 0.45;
pointer-events: none;
}
.catalog-detailed-page--selected-car .catalog-detailed-sidebar__car-status {
padding: 12px 14px;
font-size: 13px;
line-height: 1.35;
color: #6f7f94;
}
.catalog-detailed-page--selected-car .catalog-detailed-sidebar__car-list {
margin: 0;
padding: 0;
list-style: none;
max-height: 228px;
overflow-y: auto;
}
.catalog-detailed-page--selected-car .catalog-detailed-sidebar__car-option {
width: 100%;
padding: 12px 14px;
border: 0;
border-top: 1px solid #e3e8f1;
background: transparent;
text-align: left;
cursor: pointer;
}
.catalog-detailed-page--selected-car .catalog-detailed-sidebar__car-list li:first-child .catalog-detailed-sidebar__car-option {
border-top: 0;
}
.catalog-detailed-page--selected-car .catalog-detailed-sidebar__car-option:hover {
background: rgba(7, 52, 191, 0.06);
}
.catalog-detailed-page--selected-car .catalog-detailed-sidebar__car-option-title {
display: block;
color: var(--color-brand-dark);
font-size: 14px;
line-height: 1.3;
font-weight: 600;
}
.catalog-detailed-page--selected-car .catalog-detailed-sidebar__car-option-meta {
display: block;
margin-top: 4px;
color: #6f7f94;
font-size: 12px;
line-height: 1.35;
}
.catalog-detailed-page--selected-car .catalog-filters--sidebar {
flex-direction: column;
gap: 12px;
}
.catalog-detailed-page--selected-car .catalog-filters--sidebar .catalog-filters__field,
.catalog-detailed-page--selected-car .catalog-filters--sidebar .catalog-filters__select,
.catalog-detailed-page--selected-car .catalog-filters--sidebar .catalog-filters__group {
min-width: 100%;
}
.catalog-detailed-page--selected-car .catalog-filters--sidebar .catalog-filters__input,
.catalog-detailed-page--selected-car .catalog-filters--sidebar .catalog-filters__head {
height: 48px;
border-radius: 10px;
}
.catalog-detailed-page--selected-car .catalog-filters--sidebar .catalog-filters__input {
font-size: 14px;
}
.catalog-detailed-page--selected-car .catalog-filters__group {
padding-top: 2px;
}
.catalog-detailed-page--selected-car .catalog-filters__group-head {
margin-bottom: 12px;
color: var(--color-brand-dark);
font-size: 16px;
font-weight: 500;
line-height: 1.2;
}
.catalog-detailed-page--selected-car .catalog-filters__checkbox {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
cursor: pointer;
}
.catalog-detailed-page--selected-car .catalog-filters__checkbox:last-child {
margin-bottom: 0;
}
.catalog-detailed-page--selected-car .catalog-filters__checkbox input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.catalog-detailed-page--selected-car .catalog-filters__checkbox span {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border: 1px solid #b9bac2;
border-radius: 4px;
background: rgba(217, 217, 217, 0.09);
flex: none;
}
.catalog-detailed-page--selected-car .catalog-filters__checkbox span::after {
content: '';
width: 10px;
height: 6px;
border-left: 2px solid var(--color-white);
border-bottom: 2px solid var(--color-white);
transform: rotate(-45deg) scale(0);
transition: transform 0.2s ease;
}
.catalog-detailed-page--selected-car .catalog-filters__checkbox input:checked + span {
border-color: var(--color-brand-primary);
background: var(--color-brand-primary);
}
.catalog-detailed-page--selected-car .catalog-filters__checkbox input:checked + span::after {
transform: rotate(-45deg) scale(1);
}
.catalog-detailed-page--selected-car .catalog-filters__checkbox em {
font-style: normal;
color: var(--color-brand-dark);
font-size: 14px;
line-height: 1.3;
}
.catalog-detailed-page--selected-car .catalog-detailed-sidebar__submit {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 48px;
padding: 0 16px;
margin-top: 6px;
border: 0;
border-radius: 10px;
background: #af1328;
color: var(--color-white);
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
cursor: pointer;
}
.catalog-detailed-page--selected-car .catalog-detailed-sidebar__submit.is-hidden {
display: none;
}
.catalog-detailed-page--selected-car .catalog-detailed-sidebar__backdrop,
.catalog-detailed-page--selected-car .catalog-detailed-products__filters-opener {
display: none;
}
.catalog-detailed-page--selected-car .catalog-detailed-products__content {
min-width: 0;
}
.catalog-detailed-page--selected-car .catalog-products--grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.catalog-detailed-page--selected-car .catalog-detailed-products__toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 20px;
margin-bottom: 24px;
border: 1px solid #d0dae9;
border-radius: 18px;
background: #f4f7fa;
}
.catalog-detailed-page--selected-car .catalog-detailed-products__summary {
display: flex;
flex-direction: column;
gap: 4px;
}
.catalog-detailed-page--selected-car .catalog-detailed-products__summary strong {
color: var(--color-brand-dark);
font-size: 30px;
line-height: 1;
}
.catalog-detailed-page--selected-car .catalog-detailed-products__summary span {
color: #6f7f94;
font-size: 12px;
line-height: 1.2;
text-transform: uppercase;
}
.catalog-detailed-page--selected-car .catalog-detailed-products__toolbar-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
}
.catalog-detailed-page--selected-car .catalog-detailed-products__filters-opener {
align-items: center;
justify-content: center;
gap: 8px;
height: 42px;
width: 42px;
padding: 0;
border: 1px solid #9fb0c5;
border-radius: 10px;
background: var(--color-white);
color: var(--color-brand-dark);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
cursor: pointer;
svg {
width: 70%;
height: 70%;
}
}
.catalog-detailed-products__controls {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-block: 24px;
z-index: 2;
}
.catalog-view {
display: inline-flex;
gap: 8px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
}
.catalog-view__btn {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
padding: 0;
border: 1px solid #9fb0c5;
border-radius: 8px;
background: #fff;
color: #5f7694;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
svg	{
width: 70%;
height: 70%;
}
}
.catalog-view__btn.is-active {
background: var(--color-brand-primary);
color: var(--color-white);
border-color: var(--color-brand-primary);
}
.catalog-view__btn:hover {
border-color: #6f91c1;
}
.catalog-filters {
display: flex;
flex-wrap: nowrap;
justify-content: flex-end;
gap: 12px;
margin-bottom: 0;
}
.catalog-filters__select {
position: relative;
min-width: 205px;
}
.catalog-filters__field {
min-width: 205px;
}
.catalog-filters__input {
width: 100%;
height: 45px;
padding: 0 16px;
border: 1px solid #b6c2d2;
border-radius: 8px;
background: #fff;
font-size: 14px;
color: #677489;
}
.catalog-filters__input::placeholder {
color: #7b8491;
opacity: 1;
}
.catalog-filters__head {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
height: 45px;
padding: 0 16px;
border: 1px solid #b6c2d2;
border-radius: 8px;
background: var(--color-white);
font-size: 14px;
font-weight: 500;
text-transform: none;
color: #7b8491;
cursor: pointer;
}
.catalog-filters__head::after {
content: '';
width: 6px;
height: 6px;
border-right: 1px solid currentColor;
border-bottom: 1px solid currentColor;
transform: rotate(45deg);
position: relative;
transition-duration: 0.3s;
}
.catalog-filters__select.is-open .catalog-filters__head::after {
transform: rotate(-135deg);
top: 2px;
}
.catalog-filters__list {
display: none;
position: absolute;
left: 0;
right: 0;
top: calc(100% + 4px);
margin: 0;
padding: 6px;
list-style: none;
border-radius: 4px;
border: 1px solid #b6c2d2;
background: var(--color-white);
z-index: 4;
}
.catalog-filters__list button {
display: block;
width: 100%;
padding: 8px;
border: 0;
border-radius: 6px;
background: transparent;
font-size: 12px;
text-align: left;
cursor: pointer;
}
.catalog-filters__list button:hover {
background: var(--color-surface-soft);
}
.catalog-products {
display: grid;
gap: 24px;
}
.catalog-products--grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.catalog-product-card {
display: flex;
flex-direction: column;
min-height: 377px;
padding: 17px 13px;
border: 1px solid #d0dae9;
border-radius: 10px;
background: var(--color-white);
}
.catalog-product-card__media {
position: relative;
display: block;
width: calc(100% + 26px);
margin: -17px -13px 15px;
border-radius: 10px;
overflow: hidden;
}
.catalog-product-card__media img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
aspect-ratio: 296 / 176;
}
.catalog-product-card__badge {
position: absolute;
top: 8px;
left: 8px;
min-width: 45px;
height: 29px;
padding: 0 8px;
border-radius: 6px;
background: #1b91e8;
color: #fff;
font-size: 16px;
font-weight: 700;
line-height: 29px;
text-transform: lowercase;
text-align: center;
}
.catalog-product-card__mark {
position: absolute;
right: 8px;
top: 8px;
color: #1b91e8;
font-size: 18px;
line-height: 1;
}
.catalog-product-card h3 {
margin: 0 0 10px;
min-height: 42px;
font-size: 18px;
line-height: 1.2;
}
.catalog-product-card h3 a {
color: var(--color-brand-dark);
text-decoration: none;
}
.catalog-product-card__meta {
display: grid;
grid-template-columns: auto 1fr;
gap: 0;
padding: 0;
margin: 0 0 14px;
}
.catalog-product-card__meta p {
margin: 0;
padding: 5px 0;
font-size: 14px;
line-height: 1;
color: #9aa2af;
text-transform: uppercase;
border-bottom: 1px solid #dbe2ec;
}
.catalog-product-card__meta p:nth-child(2n) {
text-align: right;
text-transform: none;
color: #2b2c34;
}
.catalog-product-card__footer {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.catalog-product-card__footer strong {
font-size: 32px;
line-height: 1;
}
.catalog-product-card__buy {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 101px;
height: 29px;
padding: 0 12px;
border-radius: 6px;
background: #af1328;
color: var(--color-white);
font-size: 16px;
font-weight: 500;
text-transform: uppercase;
text-decoration: none;
}
.catalog-detailed-products .pagination {
gap: 12px;
margin-top: 60px;
}
.catalog-detailed-products .pagination__control,
.catalog-detailed-products .pagination__link,
.catalog-detailed-products .pagination__dots {
min-width: 28px;
height: 30px;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
}
.catalog-detailed-products .pagination__control {
padding: 0 10px;
}
.catalog-products--list {
grid-template-columns: 1fr;
gap: 16px;
}
.catalog-products--list .catalog-product-card {
display: grid;
grid-template-columns: 220px minmax(0, 1fr) 168px;
grid-template-areas:
"media title footer"
"media meta footer";
gap: 18px 24px;
padding: 18px;
align-items: center;
min-height: 0;
}
.catalog-products--list .catalog-product-card__media {
margin: 0;
grid-area: media;
display: flex;
align-items: center;
justify-content: center;
padding: 0 16px 0 0;
border-radius: 14px;
}
.catalog-products--list .catalog-product-card__media img {
height: 172px;
aspect-ratio: auto;
object-fit: contain;
}
.catalog-products--list .catalog-product-card__badge {
top: 12px;
left: 12px;
}
.catalog-products--list .catalog-product-card h3 {
grid-area: title;
min-height: 0;
margin: 0;
font-size: 22px;
}
.catalog-products--list .catalog-product-card__meta {
grid-area: meta;
align-self: start;
margin: 0;
}
.catalog-products--list .catalog-product-card__meta p {
padding: 8px 0;
font-size: 13px;
}
.catalog-products--list .catalog-product-card__footer {
grid-area: footer;
flex-direction: column;
align-items: stretch;
justify-content: center;
gap: 14px;
min-width: 0;
margin-top: 0;
}
.catalog-products--list .catalog-product-card__footer strong {
font-size: 36px;
text-align: right;
}
.catalog-products--list .catalog-product-card__buy {
width: 100%;
height: 40px;
border-radius: 10px;
}
@media (max-width: 1199px) {
.catalog-detailed-hero__layout {
gap: 18px;
}
.catalog-detailed-hero__cars-head,
.catalog-detailed-hero__car-link {
grid-template-columns: minmax(0, 1fr) 132px;
}
.catalog-detailed-hero__actions {
gap: 8px;
margin-top: 42px;
}
.catalog-detailed-gallery {
width: 100%;
}
.catalog-detailed-hero__categories {
justify-content: center;
gap: 16px;
}
.catalog-detailed-hero__categories a {
flex-basis: calc((100% - 32px) / 3);
}
.catalog-products--grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.catalog-detailed-page--selected-car .catalog-products--grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.catalog-product-card {
min-height: 360px;
}
.catalog-detailed-page--selected-car .catalog-detailed-products__layout {
grid-template-columns: 240px minmax(0, 1fr);
gap: 18px;
}
.catalog-detailed-page--selected-car .catalog-detailed-sidebar__inner,
.catalog-detailed-page--selected-car .catalog-detailed-products__toolbar {
border-radius: 14px;
}
.catalog-detailed-page--selected-car .catalog-detailed-sidebar__car-input {
font-size: 13px;
}
.catalog-products--list .catalog-product-card {
grid-template-columns: 188px minmax(0, 1fr) 152px;
gap: 14px 16px;
}
.catalog-products--list .catalog-product-card__media img {
height: 150px;
}
.catalog-products--list .catalog-product-card h3 {
font-size: 18px;
}
.catalog-products--list .catalog-product-card__footer strong {
font-size: 28px;
}
.catalog-product-card__footer strong {
font-size: 24px;
}
}
@media (max-width: 1023px) {
.catalog-detailed-hero__layout {
display: flex;
flex-direction: column;
gap: 12px;
}
.catalog-detailed-hero__info {
order: 99;
width: 100%;
max-width: 100%;
margin-top: 30px;
}
.catalog-detailed-hero__cars-list {
max-height: 300px;
}
}
@media (max-width: 767px) {
body.is-catalog-sidebar-open {
overflow: hidden;
}
.catalog-detailed-page .breadcrumbs {
position: static;
padding-block: 8px;
background: #123a71;
}
.catalog-detailed-page .breadcrumbs .container {
padding-top: 6px;
padding-bottom: 4px;
}
.catalog-detailed-hero {
padding: 20px 0 26px;
}
.catalog-detailed-hero__title {
order: 1;
margin: 0 0 14px;
font-size: 30px;
line-height: 1;
letter-spacing: 0.04em;
}
.catalog-detailed-gallery {
order: 2;
display: block;
width: 100%;
max-width: none;
justify-self: stretch;
margin: 0 -6px;
}
.catalog-detailed-gallery__main {
width: 100%;
margin: 0 0 8px;
}
.catalog-detailed-gallery__main .slick-list {
overflow: visible;
}
.catalog-detailed-gallery__main .slick-track {
display: flex;
align-items: center;
}
.catalog-detailed-gallery__main .slick-slide {
padding: 0 8px;
}
.catalog-detailed-gallery__main .slick-slide > div {
opacity: 0.48;
transform: scale(0.86);
transition: transform 0.25s ease, opacity 0.25s ease;
}
.catalog-detailed-gallery__main .slick-current > div {
opacity: 1;
transform: scale(1);
}
.catalog-detailed-gallery__main div {
height: auto;
}
.catalog-detailed-gallery__main .slick-slide {
opacity: 1;
transform: scale(1);
transition: transform 0.25s ease, opacity 0.25s ease;
}
.catalog-detailed-gallery__main .slick-slide:not(.slick-center) {
opacity: 0.5;
transform: scale(0.8);
}
.catalog-detailed-gallery__main .slick-slide img {
aspect-ratio: 1 / 1;
border-radius: 16px;
}
.catalog-detailed-gallery__thumbs {
display: none;
}
.catalog-detailed-gallery__main .slick-dots {
display: flex !important;
justify-content: center;
gap: 8px;
margin: 12px 0 0;
padding: 0;
list-style: none;
}
.catalog-detailed-gallery__main .slick-dots li {
margin: 0;
}
.catalog-detailed-gallery__main .slick-dots button {
width: 10px;
height: 10px;
padding: 0;
border: 0;
border: 2px solid #647186;
border-radius: 50%;
background: transparent;
font-size: 0;
opacity: 1;
}
.catalog-detailed-gallery__main .slick-dots .slick-active button {
background:#ACA8AC;
}
.catalog-detailed-hero__info {
gap: 30px;
}
.catalog-detailed-hero__cars-list {
max-height: 240px;
}
.catalog-detailed-gallery__thumbs {
position: absolute;
width: 100%;
visibility: hidden;
}
.catalog-detailed-hero__actions {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 6px;
width: 100%;
margin: 0 0 12px;
}
.catalog-detailed-hero__stat {
min-height: 55px;
padding: 6px 8px;
border-radius: 10px;
font-size: 10px;
line-height: 1.3;
flex: 1 0 auto; }
.catalog-detailed-hero__cars {
width: 100%;
}
.catalog-detailed-hero__cars-head,
.catalog-detailed-hero__car-link {
grid-template-columns: minmax(0, 1fr) 112px;
gap: 12px;
}
.catalog-detailed-hero__cars-head {
padding-bottom: 10px;
font-size: 12px;
}
.catalog-detailed-hero__cars-head span:last-child,
.catalog-detailed-hero__car-date {
padding-left: 12px;
}
.catalog-detailed-hero__car-link {
padding: 12px 0;
}
.catalog-detailed-hero__car-main {
gap: 10px;
}
.catalog-detailed-hero__car-thumb {
flex-basis: 58px;
width: 58px;
height: 44px;
border-radius: 8px;
}
.catalog-detailed-hero__car-name,
.catalog-detailed-hero__car-date {
font-size: 14px;
}
.catalog-detailed-hero__specs {
max-width: 100%;
width: 100%;
}
.catalog-detailed-hero__specs li {
gap: 0;
padding: 10px 10px 10px 0;
font-size: 14px;
}
.catalog-detailed-hero__specs span {
flex-basis: 173px;
font-size: 14px;
}
.catalog-detailed-hero__specs strong {
font-size: 14px;
}
.catalog-detailed-categories {
padding: 30px 0 28px;
}
.catalog-detailed-hero__categories {
gap: 13px 18px;
}
.catalog-detailed-hero__categories a {
flex-basis: calc(50% - 9px);
min-height: 87px;
padding: 10px 12px;
border-radius: 10px;
gap: 10px;
font-size: 12px;
font-weight: 500;
}
.catalog-detailed-hero__categories a img {
width: 32px;
height: 32px;
}
.catalog-detailed-products {
padding: 30px 0 42px;
}
.catalog-detailed-products__head {
margin-bottom: 10px;
}
.catalog-detailed-products__head h2 {
font-size: 26px;
}
.catalog-detailed-page--selected-car .catalog-detailed-products__layout {
grid-template-columns: 1fr;
gap: 14px;
}
.catalog-detailed-page--selected-car .catalog-detailed-sidebar {
position: fixed;
inset: 0 0 0 auto !important;
width: min(100%, 360px);
max-width: calc(100vw - 28px);
transform: translateX(108%) !important;
opacity: 1 !important;
visibility: visible !important;
z-index: 999;
transition: transform 0.3s ease;
}
body.is-catalog-sidebar-open .catalog-detailed-page--selected-car .catalog-detailed-sidebar {
transform: translateX(0) !important;
}
.catalog-detailed-page--selected-car .catalog-detailed-sidebar__backdrop {
position: fixed;
inset: 0;
background: rgba(18, 29, 71, 0.45);
opacity: 0;
pointer-events: none;
backdrop-filter: blur(12px);
transition: opacity 0.3s ease;
z-index: 998;
}
body.is-catalog-sidebar-open .catalog-detailed-page--selected-car .catalog-detailed-sidebar__backdrop {
opacity: 1;
pointer-events: auto;
}
.catalog-detailed-page--selected-car .catalog-detailed-sidebar__inner {
position: relative;
top: 0;
height: 100dvh;
padding: 16px 14px 20px;
border-radius: 0;
overflow-y: auto;
box-shadow: -16px 0 48px rgba(18, 29, 71, 0.18);
}
.catalog-detailed-page--selected-car .catalog-detailed-sidebar__head h3 {
font-size: 20px;
}
.catalog-detailed-page--selected-car .catalog-detailed-sidebar__close,
.catalog-detailed-page--selected-car .catalog-detailed-products__filters-opener,
.catalog-detailed-page--selected-car .catalog-detailed-sidebar__backdrop {
display: inline-flex;
}
.catalog-detailed-page--selected-car .catalog-detailed-sidebar__backdrop {
display: block;
}
.catalog-detailed-page--selected-car .catalog-detailed-products__toolbar {
flex-wrap: wrap;
padding: 14px;
margin-bottom: 14px;
border-radius: 12px;
}
.catalog-detailed-page--selected-car .catalog-detailed-products__summary strong {
font-size: 24px;
}
.catalog-detailed-page--selected-car .catalog-detailed-products__toolbar-actions {
justify-content: space-between;
}
.catalog-detailed-page--selected-car .catalog-detailed-sidebar__head-actions {
gap: 10px;
}
.catalog-detailed-page--selected-car .catalog-detailed-sidebar__reset {
font-size: 11px;
}
.catalog-detailed-page--selected-car .catalog-detailed-sidebar__car {
margin-bottom: 16px;
}
.catalog-detailed-page--selected-car .catalog-filters__group-head {
font-size: 14px;
}
.catalog-detailed-page--selected-car .catalog-filters__checkbox em {
font-size: 12px;
}
.catalog-detailed-products__controls {
flex-wrap: wrap;
gap: 10px;
margin-bottom: 14px;
}
.catalog-detailed-page--selected-car .catalog-detailed-products__filters-opener,
.catalog-view__btn {
width: 32px;
height: 32px;
}
.catalog-filters {
flex-wrap: wrap;
justify-content: flex-start;
gap: 8px;
width: 100%;
}
.catalog-filters__select {
min-width: calc(50% - 4px);
}
.catalog-filters__field {
min-width: calc(50% - 4px);
}
.catalog-filters__input,
.catalog-filters__head {
height: 40px;
padding-inline: 12px;
font-size: 12px;
}
.catalog-detailed-page--selected-car .catalog-products--grid,
.catalog-products--grid {
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 12px;
}
.catalog-product-card {
min-height: 306px;
padding: 12px;
}
.catalog-product-card__media {
margin-bottom: 10px;
}
.catalog-product-card h3 {
min-height: 34px;
margin-bottom: 8px;
font-size: 14px;
}
.catalog-product-card__meta {
margin-bottom: 10px;
}
.catalog-product-card__meta p {
padding-block: 4px;
font-size: 10px;
}
.catalog-product-card__footer strong {
font-size: 20px;
}
.catalog-product-card__buy {
min-width: 72px;
height: 24px;
font-size: 11px;
}
.catalog-products--list .catalog-product-card {
grid-template-columns: 108px minmax(0, 1fr);
grid-template-areas:
"media title"
"media meta"
"footer footer";
gap: 10px 12px;
padding: 12px;
}
.catalog-products--list .catalog-product-card__media {
padding: 0 10px 0 0;
border-radius: 10px;
}
.catalog-products--list .catalog-product-card__media img {
height: 96px;
}
.catalog-products--list .catalog-product-card h3 {
font-size: 14px;
}
.catalog-products--list .catalog-product-card__meta p {
padding: 4px 0;
font-size: 10px;
}
.catalog-products--list .catalog-product-card__footer {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.catalog-products--list .catalog-product-card__footer strong {
font-size: 20px;
text-align: left;
}
.catalog-products--list .catalog-product-card__buy {
width: auto;
height: 24px;
}
.catalog-product-card__footer strong {
font-size: 20px;
}
.catalog-detailed-products .pagination {
margin-top: 24px;
gap: 8px;
}
.catalog-detailed-products .pagination__control {
padding-inline: 8px;
font-size: 12px;
}
.catalog-detailed-products .pagination__control,
.catalog-detailed-products .pagination__link,
.catalog-detailed-products .pagination__dots {
height: 28px;
min-width: 28px;
font-size: 12px;
}
}
.product-details-page .breadcrumbs {
padding: 14px 0 16px;
}
.product-details {
padding: 80px 0 64px;
background: var(--color-white);
}
.product-details__layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 600px);
gap: 28px;
align-items: start;
margin-bottom: 24px;
}
.product-details-mobile-head {
display: none;
}
.product-details-gallery {
display: grid;
grid-template-columns: 86px minmax(0, 1fr);
gap: 12px;
min-width: 0;
}
.product-details-gallery__thumbs {
display: flex;
flex-direction: column;
gap: 10px;
position: relative;
height: 424px;
padding: 24px 0;
box-sizing: border-box;
max-height: none;
}
.product-details-gallery__thumbs .slick-list {
height: 100% !important;
}
.product-details-gallery__thumbs .slick-track {
height: 100% !important;
}
.product-details-gallery__thumb {
width: 100%;
height: 86px;
padding: 0;
border: 1px solid #d9e2ec;
border-radius: 10px;
background: #fff;
cursor: pointer;
overflow: hidden;
transition: border-color 0.2s ease;
}
.product-details-gallery__main .slick-list,
.product-details-gallery__main .slick-track {
height: 100%;
}
.product-details-gallery__thumb img,
.product-details-gallery__main img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.product-details-gallery__main > div {
height: 424px;
}
.product-details-gallery__main {
height: 424px;
border-radius: 14px;
overflow: hidden;
background: #fff;
}
.product-details-gallery__thumbs .slick-slide {
margin: 0 0 10px;
height: calc(25% - 7.5px);
opacity: 0.65;
transition: opacity 0.2s ease, border-color 0.2s ease;
}
.product-details-gallery__thumbs .slick-slide:last-child {
margin-bottom: 0;
}
.product-details-gallery__thumbs .slick-slide.slick-current  {
border-color: var(--color-brand-primary);
opacity: 1;
}
.product-details-gallery__thumbs .slick-arrow {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 39px;
height: 12px;
padding: 0;
border: 0;
background: transparent;
font-size: 0;
cursor: pointer;
z-index: 5;
}
.product-details-gallery__thumbs .slick-prev {
top: 0;
}
.product-details-gallery__thumbs .slick-next {
bottom: 0;
}
.product-details-gallery__thumbs .slick-arrow::before {
content: '';
display: block;
width: 39px;
height: 8px;
background-position: center;
background-repeat: no-repeat;
background-size: 39px 8px;
}
.product-details-gallery__thumbs .slick-prev::before {
background-image: url(//boltorez.com.ua/wp-content/themes/boltorez/images/icons/icon-arrow-up.svg);
}
.product-details-gallery__thumbs .slick-next::before {
background-image: url(//boltorez.com.ua/wp-content/themes/boltorez/images/icons/icon-arrow-down.svg);
}
.product-details-info {
padding: 0;
}
.product-details-info__category {
margin: 0 0 8px;
font-size: 12px;
line-height: 1.2;
font-weight: 700;
text-transform: uppercase;
color: #6f7f93;
}
.product-details-info h1 {
margin: 0 0 18px;
font-size: clamp(26px, 2.4vw, 34px);
line-height: 1.05;
}
.product-details-info__meta {
margin: 0 0 22px;
padding: 0;
list-style: none;
border-top: 1px solid #e4ebf3;
}
.product-details-info__meta li {
display: flex;
justify-content: space-between;
gap: 18px;
padding: 10px 0;
border-bottom: 1px solid #e4ebf3;
font-size: 14px;
line-height: 1.25;
}
.product-details-info__meta span {
color: #6f7f93;
}
.product-details-info__meta strong {
color: var(--color-brand-dark);
font-weight: 700;
text-align: right;
}
.product-details-info__price {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
gap: 16px;
margin: 0 0 22px;
font-size: 14px;
line-height: 1.25;
margin-block: 10px 20px;
}
.product-details-info__price span {
font-size: 24px;
color: #6f7f93;
}
.product-details-info__price strong {
font-size: 24px;
color: var(--color-brand-dark);
font-weight: 700;
text-align: right;
margin-inline-start: auto;
small {
font-size: 16px;
vertical-align: baseline;
opacity: 0.5;
font-weight: normal;
}
}
.product-details-buy {
display: flex;
gap: 10px;
margin-bottom: 16px;
}
.product-details-qty {
display: inline-flex;
align-items: center;
justify-content: space-between;
height: 48px;
min-width: 172px;
padding: 0 8px;
border: 1px solid #d4deea;
border-radius: 10px;
background: #fff;
}
.product-details-qty__btn {
width: 36px;
height: 36px;
border: 0;
border-radius: 8px;
background: #f4f7fa;
cursor: pointer;
position: relative;
}
.product-details-qty__btn::before,
.product-details-qty__btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
background: #31465e;
transform: translate(-50%, -50%);
}
.product-details-qty__btn::before {
width: 12px;
height: 2px;
border-radius: 2px;
}
.product-details-qty__btn--plus::after {
width: 2px;
height: 12px;
border-radius: 2px;
}
.product-details-qty__input {
width: 56px;
border: 0;
background: transparent;
text-align: center;
font-size: 18px;
line-height: 1;
font-weight: 700;
color: var(--color-brand-dark);
appearance: textfield;
-moz-appearance: textfield;
}
.product-details-qty__input:focus {
outline: none;
}
.product-details-qty__input::-webkit-outer-spin-button,
.product-details-qty__input::-webkit-inner-spin-button {
appearance: none;
margin: 0;
}
.product-details-buy__button {
flex: 1 1 auto;
min-height: 48px;
padding: 12px 18px;
border-radius: 10px;
}
.product-details-accordions {
display: grid;
gap: 10px;
}
.product-details-accordion {
border: 1px solid #dce6f1;
border-radius: 10px;
background: #f9fbfd;
}
.product-details-accordion summary {
list-style: none;
padding: 14px 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.product-details-accordion summary::after {
content: '';
width: 10px;
height: 10px;
border-right: 2px solid #607189;
border-bottom: 2px solid #607189;
transform: rotate(45deg);
transition: transform 0.2s ease;
flex: 0 0 auto;
}
.product-details-accordion[open] summary::after {
transform: rotate(-135deg);
}
.product-details-accordion summary::-webkit-details-marker {
display: none;
}
.product-details-accordion__label {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
}
.product-details-accordion__label::before {
content: '';
width: 35px;
height: 35px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
flex: 0 0 35px;
}
.product-details-accordion--payment .product-details-accordion__label::before {
background-image: url(//boltorez.com.ua/wp-content/themes/boltorez/images/icons/icon-payment.svg);
}
.product-details-accordion--delivery .product-details-accordion__label::before {
background-image: url(//boltorez.com.ua/wp-content/themes/boltorez/images/icons/icon-delivery.svg);
}
.product-details-accordion__content {
padding: 0 16px 14px;
}
.product-details-accordion__content p {
margin: 0;
font-size: 14px;
line-height: 1.45;
color: #31465e;
}
.product-details-description {
padding: 22px 0;
border-radius: 14px;
background: var(--color-white);
position: relative;
&:before {
content: '';
position: absolute;
width: 35%;
height: 1px;
left: 0;
top: 0;
background: var(--color-border-gray);
}
}
.product-details-description p {
margin: 0;
font-size: 14px;
line-height: 1.6;
color: #31465e;
}
@media (max-width: 1023px) {
.product-details__layout {
grid-template-columns: 1fr;
}
.product-details-gallery {
grid-template-columns: 72px minmax(0, 1fr);
}
.product-details-gallery__thumb {
height: 72px;
}
}
@media (max-width: 767px) {
.product-details {
padding-bottom: 48px;
}
.product-details-mobile-head {
display: block;
margin-bottom: -12px;
}
.product-details-mobile-head__title {
margin: 0;
font-size: clamp(24px, 7.2vw, 36px);
line-height: 1.05;
text-transform: uppercase;
}
.product-details-gallery {
grid-template-columns: 1fr;
}
.product-details-gallery__thumbs {
order: 2;
flex-direction: row;
overflow-x: auto;
padding-bottom: 2px;
padding-top: 0;
padding-bottom: 0;
height: auto;
max-height: none;
}
.product-details-gallery__thumbs .slick-list,
.product-details-gallery__thumbs .slick-track {
height: auto !important;
}
.product-details-gallery__thumbs .slick-track {
display: flex;
flex-flow: row nowrap;
}
.product-details-gallery__thumbs .slick-slide {
margin: 0 8px 0 0;
width: calc(25% - 8px);
aspect-ratio: 4 / 3;
}
.product-details-gallery__thumbs .slick-arrow {
display: none !important;
}
.product-details-gallery__main {
height: auto;
aspect-ratio: 4 / 3;
}
.product-details-info {
padding: 20px 0;
}
.product-details-info > .product-details-info__category,
.product-details-info > h1 {
display: none;
}
.product-details-qty {
min-width: 130px;
}
.product-details-description {
padding: 18px 0;
}
}
.faq {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.faq--accordion {
padding: 72px 0 98px;
position: relative;
overflow: hidden;
}
.faq--accordion .faq__container {
position: relative;
display: grid;
grid-template-columns: 400px minmax(0, 1fr);
gap: 36px;
align-items: stretch;
z-index: 1;
}
.faq--accordion .faq__intro {
position: relative;
display: flex;
flex-direction: column;
gap: 18px;
}
.faq--accordion .faq__intro-image {
display: block;
position: absolute;
bottom: 0;
left: 50%;
width: 130%;
max-width: none;
height: auto;
opacity: 0.08;
filter: grayscale(1) brightness(1.35);
transform: translate(-50%, 20%) scaleX(-1);
}
.faq--accordion h2 {
margin: 0;
font-size: 40px;
font-weight: 600;
line-height: 1.12;
}
.faq--accordion .faq__items {
position: relative;
z-index: 1;
}
.faq--accordion .faq__item {
border: 1px solid var(--color-border-gray);
border-radius: 14px;
background: var(--color-white);
margin: 0 0 12px;
overflow: hidden;
}
.faq--accordion .faq__question {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
width: 100%;
min-height: 72px;
padding: 20px 24px;
text-align: left;
font-size: 20px;
line-height: 1.3;
font-weight: 500;
color: var(--color-base);
}
.faq--accordion .faq__question::after {
content: '';
width: 20px;
height: 20px;
flex: none;
background: url(//boltorez.com.ua/wp-content/themes/boltorez/images/ico-arrow.svg) center / contain no-repeat;
transform: rotate(0deg);
transition: transform 0.25s ease;
}
.faq--accordion .faq__item.is-open .faq__question::after {
transform: rotate(180deg);
}
.faq--accordion .faq__answer {
height: 0;
overflow: hidden;
}
.faq--accordion .faq__answer-inner {
padding: 0 24px 18px;
}
.faq--accordion .faq__answer p {
margin: 0;
font-size: 17px;
line-height: 1.4;
color: var(--color-text-dark-muted);
}
.faq--accordion .faq__bg-media {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.faq--accordion .faq__bg-media::after {
content: '';
position: absolute;
inset: 0;
background: var(--color-white);
opacity: 0.5;
}
.faq--accordion .faq__bg-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 1199px) {
.faq--accordion {
padding: 52px 0 76px;
}
.faq--accordion .faq__container {
grid-template-columns: 1fr;
gap: 22px;
}
.faq--accordion h2 {
font-size: 34px;
}
.faq__intro {
position: relative;
z-index: 1;
&:has(.faq__intro-image) {
min-height: min(30vw, 300px);
}
}
.faq--accordion .faq__intro-image {
position: absolute;
left: 0;
top: 0;
width: 95%;
height: auto;
z-index: -1;
transform: translate(-20%, -40%) scaleX(-1);
}
.faq--accordion .faq__question {
font-size: 18px;
}
.faq--accordion .faq__answer p {
font-size: 16px;
}
}
@media (max-width: 767px) {
.faq--accordion h2 {
font-size: 26px;
text-align: center;
}
.faq--accordion .faq__question {
min-height: 50px;
padding: 14px 16px;
font-size: 14px;
}
.faq--accordion .faq__answer-inner {
padding: 0 16px 14px;
}
.faq--accordion .faq__answer p {
font-size: 14px;
}
}
.not-found {
padding: 60px 0 200px;
background: var(--color-white);
position: relative;
z-index: 1;
}
.not-found .container {
text-align: center;
}
.not-found__content {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
min-height: 40vh;
max-width: 760px;
margin: 0 auto;
}
.not-found__code {
margin: 0 0 30px;
color: #000;
font-size: 50px;
font-weight: 700;
line-height: 1;
}
.not-found__title {
margin: 0 0 47px;
color: #000;
font-size: 40px;
font-weight: 700;
line-height: 1;
}
.not-found__lead {
margin: 0 auto 30px;
max-width: 740px;
color: #000;
font-size: 20px;
font-weight: 400;
line-height: 1.2;
}
.not-found__note {
margin: auto 0 0;
color: #000;
font-size: 14px;
font-weight: 700;
line-height: 1.3;
}
.not-found__button {
margin-top: 33px;
}
.not-found__visual {
position: absolute;
right: 0;
bottom: 0;
width: min(560px, 52vw);
transform: translateX(14%);
transform-origin: right bottom;
animation: not-found-crash 1.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
z-index: -1;
}
.not-found__visual img {
width: 100%;
height: auto;
object-fit: contain;
object-position: right bottom;
transform-origin: 82% 100%;
animation: not-found-rear-lift 0.7s ease-out 0.2s both;
}
@keyframes not-found-crash {
0% {
transform: translateX(10%) rotate(-0.4deg) scale(0.995);
opacity: 1;
}
52% {
transform: translateX(14%) rotate(0) scale(1);
}
66% {
transform: translateX(13.4%) rotate(0.12deg) scale(0.999);
}
80% {
transform: translateX(14.2%) rotate(-0.06deg) scale(1);
}
100% {
transform: translateX(14%) rotate(0) scale(1);
opacity: 1;
}
}
@keyframes not-found-rear-lift {
0% {
transform: rotate(0deg) translateY(0);
}
35% {
transform: rotate(1.35deg) translateY(-2px);
}
62% {
transform: rotate(0.55deg) translateY(0);
}
100% {
transform: rotate(0deg) translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.not-found__visual,
.not-found__visual img {
animation: none;
}
}
@media (max-width: 1439px) {
.not-found {
padding-top: 58px;
}
.not-found .container {
padding-bottom: 220px;
}
.not-found__code {
font-size: 62px;
}
.not-found__title {
font-size: 44px;
}
.not-found__lead {
font-size: 30px;
}
.not-found__note {
font-size: 20px;
}
.not-found__visual {
width: min(480px, 50vw);
}
}
@media (max-width: 767px) {
.not-found {
padding-block: 34px;
}
.not-found .container {
padding-bottom: 0;
}
.not-found__code {
font-size: 46px;
}
.not-found__title {
font-size: 34px;
margin-bottom: 22px;
}
.not-found__lead {
font-size: 16px;
margin-bottom: 22px;
}
.not-found__note {
font-size: 16px;
}
.not-found__button {
min-width: 0;
margin-top: 18px;
}
.not-found__visual {
position: static;
width: calc(100% + 18px);
margin: 22px -18px 0 auto;
}
}
.contacts-section {
padding: 76px 0;
}
.contacts-section__layout {
display: grid;
grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
gap: 30px;
align-items: stretch;
}
.contacts-section__info p {
margin: 0 0 16px;
line-height: 1.5;
}
.contacts-section__info a {
text-decoration: none;
}
.contacts-section__map {
border-radius: 18px;
overflow: hidden;
min-height: 340px;
aspect-ratio: 808 / 500;
}
.contacts-section__map iframe {
width: 100%;
height: 100%;
border: 0;
}
@media (max-width: 1199px) {
.contacts-section {
padding-block: 60px;
}
.contacts-section__layout {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.contacts-section__map {
min-height: 240px;
}
}
.hero-block,
.sto-hero {
position: relative;
color: var(--color-white);
background-color: var(--color-brand-dark);
}
.hero-block__bg,
.sto-hero__bg {
position: absolute;
inset: 0;
}
.hero-block--overlay .hero-block__bg::after,
.sto-hero__bg::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(7, 16, 40, 0.92) 0%, rgba(10, 34, 86, 0.72) 42%, rgba(12, 29, 71, 0.28) 100%);
}
.hero-block--no-overlay .hero-block__bg::after {
display: none;
}
.hero-block__bg picture,
.hero-block__bg img,
.sto-hero__bg picture,
.sto-hero__bg img {
width: 100%;
height: 100%;
display: block;
}
.hero-block__bg img,
.sto-hero__bg img {
object-fit: cover;
}
.hero-block__container,
.sto-hero__container {
position: relative;
z-index: 1;
min-height: clamp(420px, 58vh, 620px);
display: flex;
align-items: center;
padding-block: 60px 72px;
}
.hero-block__content,
.sto-hero__content {
max-width: 620px;
}
.hero-block__content h1,
.sto-hero__content h1 {
margin: 0 0 20px;
font-size: clamp(38px, 4vw, 64px);
line-height: 1.04;
font-weight: 700;
}
.hero-block__content p,
.sto-hero__content p {
margin: 0 0 30px;
font-size: 18px;
line-height: 1.45;
max-width: 560px;
}
.brands-strip,
.sto-brands {
padding: 18px 0;
border-bottom: 1px solid var(--color-border-gray);
background-color: var(--color-white);
}
.brands-strip__marquee,
.sto-brands__marquee {
width: 100%;
overflow: hidden;
}
.brands-strip__track,
.sto-brands__track {
display: flex;
width: max-content;
animation: sto-brands-scroll 26s linear infinite;
}
.brands-strip__group,
.sto-brands__group {
display: flex;
align-items: center;
gap: 5vw;
padding-inline: 36px;
}
.brands-strip__group img,
.sto-brands__group img {
width: 90px;
height: auto;
object-fit: contain;
object-position: center;
flex: none;
aspect-ratio: 1 / 1;
}
@keyframes sto-brands-scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
.services--sto {
padding: 72px 0 84px;
background: var(--color-white);
}
.services--sto .heading {
margin-bottom: 10px;
}
.services--sto .services__subtitle {
margin: 0 0 32px;
text-align: center;
font-size: 18px;
color: var(--color-text-dark-muted);
}
.services--sto .services-items {
margin-bottom: 0;
}
.services--sto .services-item img {
aspect-ratio: 392 / 233;
object-fit: cover;
}
.services--sto .services-item strong {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
text-transform: none;
min-height: 70px;
font-size: 16px;
line-height: 1.2;
}
.sto-benefits {
background: linear-gradient(271.98deg, #FFFFFF 40.63%, #EAF0F7 98.61%);
color: var(--color-brand-dark);
position: relative;
overflow: hidden;
}
.sto-benefits__container {
display: flex;
flex-direction: row-reverse;
position: static;
min-height: 560px;
}
.sto-benefits__content h2,
.sto-process__content h2,
.sto-booking__box h2,
.contacts-section__info h2 {
margin: 0 0 14px;
font-size: clamp(32px, 3vw, 46px);
line-height: 1.06;
font-weight: 700;
color: var(--color-brand-dark);
}
.sto-benefits__content p {
margin: 0 0 40px;
max-width: 620px;
font-size: 22px;
line-height: 1.35;
color: var(--color-brand-dark);
}
.sto-benefits__list {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 14px;
}
.sto-benefits__list li {
display: flex;
align-items: center;
gap: 18px;
font-size: 20px;
font-weight: 500;
line-height: 1.25;
}
.sto-benefits__list img {
width: 34px;
height: 34px;
flex: none;
}
.sto-benefits__media {
position: absolute;
overflow: hidden;
inset: 0 0 0 50%;
clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
}
.sto-benefits__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: right center;
}
.sto-benefits__content {
position: relative;
padding: 70px 0 13vw;
z-index: 1;
max-width: 50%;
margin: 0 auto 0 0;
}
.sto-benefits__content h2 {
color: var(--color-brand-dark);
font-size: clamp(30px, 3.8vw, 40px);
margin-bottom: 25px;
}
.sto-benefits__content::after {
content: 'ABTO';
position: absolute;
left: 50%;
bottom: 0;
font-size: clamp(100px, 16vw, 220px);
font-weight: 700;
letter-spacing: 0.03em;
line-height: 1;
color: rgba(18, 29, 71, 0.03);
pointer-events: none;
transform: translate(-50%, 12%);
}
.sto-process {
padding: 78px 0;
position: relative;
}
.sto-process__layout {
display: flex;
flex-direction: row-reverse;
gap: 28px;
}
.sto-process__steps {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 28px;
}
.sto-process__steps li {
position: relative;
background: #102B4E;
border-radius: 8px;
padding: 11px 18px;
color: var(--color-white);
font-size: 16px;
font-weight: 600;
line-height: 1.2;
width: calc(100% - 160px);
&:before {
content: '';
position: absolute;
width: 9999px;
height: 100%;
right: calc(100% - 8px);
top: 0;
background: inherit;
}
}
.sto-process__steps li:nth-child(2) {
width: calc(100% - 120px);
}
.sto-process__steps li:nth-child(3) {
width: calc(100% - 80px);
}
.sto-process__steps li:nth-child(4) {
width: calc(100% - 40px);
}
.sto-process__steps li:nth-child(5) {
width: 100%;
}
.sto-process__content {
width: 50%;
margin: 0 auto 0 0;
}
.sto-process__content::after {
content: 'сервіс';
position: absolute;
left: 50%;
top: 0;
font-size: clamp(100px, 16vw, 220px);
font-weight: 700;
letter-spacing: 0.03em;
line-height: 1;
text-transform: uppercase;
color: rgba(18, 29, 71, 0.03);
pointer-events: none;
transform: translate(-20%, -17%);
}
.sto-process__content h2 {
font-size: clamp(30px, 3.8vw, 40px);
margin: 0 0 75px;
}
.sto-process__media {
position: absolute;
inset: 0 0 0 50%;
}
.sto-process__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sto-booking {
position: relative;
padding: 76px 0;
background-size: cover;
background-position: center;
isolation: isolate;
}
.sto-booking::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(5, 13, 31, 0.84) 0%, rgba(5, 13, 31, 0.8) 100%);
z-index: -1;
}
.sto-booking__box {
max-width: 1030px;
margin: 0 auto;
}
.sto-booking__box h2,
.sto-booking__box p {
text-align: center;
color: var(--color-white);
}
.sto-booking__box p {
margin: 0 0 24px;
font-size: 18px;
}
.sto-booking__form {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 26px;
}
.sto-booking__form input {
height: 54px;
padding: 0 16px;
border-radius: 10px;
border: none;
background-color: var(--color-white);
font-size: 18px;
color: var(--color-brand-dark);
}
.sto-booking__form input::placeholder {
color: #b8bcc9;
font-size: 18px;
line-height: 1.2;
}
.sto-booking__form button {
grid-column: 1 / -1;
width: min(100%, 430px);
margin: 6px auto 0;
justify-content: center;
}
@media (max-width: 1199px) {
.brands-strip__group,
.sto-brands__group {
gap: 30px;
padding-inline: 26px;
}
.brands-strip__group img,
.sto-brands__group img {
width: 108px;
height: 40px;
}
.sto-benefits,
.sto-process__layout {
grid-template-columns: 1fr;
}
.sto-booking__form {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sto-benefits__media {
min-height: 340px;
}
.sto-benefits__content {
clip-path: none;
padding-block: 42px;
}
.sto-benefits__content-inner {
padding-left: 0;
}
.sto-benefits,
.sto-process,
.sto-booking {
padding-block: 60px;
}
}
@media (max-width: 767px) {
.hero-block__container,
.sto-hero__container {
min-height: 420px;
padding-block: 36px;
}
.hero-block__content p,
.sto-hero__content p {
font-size: 15px;
}
.brands-strip,
.sto-brands {
padding-block: 14px;
}
.brands-strip__group,
.sto-brands__group {
gap: 18px;
padding-inline: 14px;
}
.brands-strip__group img,
.sto-brands__group img {
width: 88px;
height: 32px;
}
.services--sto {
padding-block: 52px;
}
.services--sto .services__subtitle {
font-size: 15px;
margin-bottom: 22px;
}
.sto-benefits__content p,
.sto-benefits__list li,
.sto-booking__box p {
font-size: 15px;
}
.sto-benefits__content::after {
display: none;
}
.sto-benefits__list img {
width: 30px;
height: 30px;
}
.services--sto .services-item strong {
font-size: 15px;
}
.sto-process__steps li,
.sto-process__steps li:nth-child(n) {
width: 100%;
}
.sto-booking__form {
grid-template-columns: 1fr;
}
}
.tire-hero {
background-color: #071733;
}
.tire-hero.hero-block--overlay .hero-block__bg::after {
background: linear-gradient(91deg, rgba(8, 18, 45, 0.94) 0%, rgba(6, 28, 82, 0.64) 48%, rgba(7, 16, 40, 0.32) 100%);
}
.tire-hero .hero-block__container {
min-height: 470px;
padding-block: 64px 76px;
}
.tire-hero .hero-block__content {
max-width: 560px;
}
.tire-hero .hero-block__content h1 {
margin: 0 0 18px;
font-size: clamp(44px, 4.2vw, 66px);
line-height: 0.98;
font-weight: 700;
}
.tire-hero .hero-block__content p {
margin: 0 0 10px;
max-width: 480px;
font-size: 18px;
line-height: 1.35;
}
.tire-hero .hero-block__content .button {
margin-top: 26px;
}
.services--tire {
padding: 76px 0 84px;
background: var(--color-white);
}
.services--tire .heading {
margin-bottom: 34px;
}
.services--tire .services-items {
margin-bottom: 0;
}
.services--tire .services-item {
font-size: 17px;
text-transform: none;
}
.services--tire .services-item img {
aspect-ratio: 263 / 184;
opacity: 1;
}
.services--tire .services-item strong {
min-height: 76px;
padding: 10px;
line-height: 1.2;
}
.tire-how {
padding: 76px 0;
background: #fff;
}
.tire-how__layout {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: 36px;
align-items: center;
}
.tire-how__media {
margin-block: -76px;
}
.tire-how__media img {
width: 100%;
height: auto;
display: block;
}
.tire-how__content h2 {
margin: 0 0 26px;
font-size: clamp(34px, 3.3vw, 48px);
line-height: 1.08;
color: var(--color-brand-dark);
}
.tire-how__steps {
margin: 0 0 60px;
padding: 0;
list-style: none;
display: grid;
gap: 14px;
}
.tire-how__steps li {
position: relative;
padding: 5px 0 0 44px;
font-size: 18px;
line-height: 1.35;
font-weight: 500;
color: var(--color-brand-dark);
}
.tire-how__steps li::before {
content: '';
position: absolute;
left: 0;
top: 3px;
width: 30px;
height: 30px;
background: url(//boltorez.com.ua/wp-content/themes/boltorez/images/icons/icon-tire.svg) no-repeat center / contain;
}
.catalog-cta {
padding: 72px 0;
background: #f6f7f9;
}
.catalog-cta__head {
text-align: center;
max-width: 700px;
margin: 0 auto 28px;
}
.catalog-cta__head h2 {
margin: 0 0 10px;
font-size: clamp(32px, 3vw, 44px);
line-height: 1.06;
color: var(--color-brand-dark);
}
.catalog-cta__head p {
margin: 0;
color: var(--color-text-dark-muted);
font-size: 17px;
}
.catalog-cta__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 50px;
}
.catalog-cta__card {
position: relative;
overflow: hidden;
border-radius: 16px;
padding: 72px 140px 72px 24px;
background: var(--gradient-banner);
box-shadow: 0 12px 26px rgba(7, 28, 72, 0.22);
}
.catalog-cta__card-image {
position: absolute;
right: 0;
top: 37px;
bottom: 37px;
width: auto;
transform: translateX(58%);
}
.catalog-cta__card-image img {
width: auto;
height: 100%;
display: block;
object-fit: contain;
}
.catalog-cta__card-header {
display: flex;
flex-flow: row nowrap;
align-items: center;
gap: 24px;
margin: 0 0 16px;
z-index: 1;
}
.catalog-cta__card-title {
position: relative;
z-index: 1;
color: var(--color-white);
font-size: 38px;
line-height: 0.95;
font-weight: 700;
text-transform: uppercase;
}
.catalog-cta__card-decor {
position: relative;
flex: 1;
}
.catalog-cta__card-decor img {
max-width: 100%;
height: auto;
display: block;
}
.catalog-cta__form {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 8px;
}
.catalog-cta__form select,
.catalog-cta__form button {
width: 100%;
height: 56px;
border-radius: 8px;
}
.catalog-cta__form select {
padding: 0 12px;
border: 0;
font-size: 14px;
font-weight: 500;
color: #39445d;
background: #fff;
grid-column: span 2;
}
.catalog-cta__form button {
grid-column: 1 / -1;
height: 60px;
margin-top: 16px;
}
.catalog-cta__form--tires .catalog-cta__field--season,
.catalog-cta__form--tires .catalog-cta__field--brand {
grid-column: span 3;
}
.tire-service-page .contacts-section {
padding-top: 84px;
}
@media (max-width: 1199px) {
.tire-hero .hero-block__container {
min-height: 420px;
}
.catalog-cta__grid {
grid-template-columns: 1fr;
}
.tire-how__layout {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.tire-hero .hero-block__container {
min-height: 390px;
padding-block: 42px 46px;
}
.tire-hero .hero-block__content h1 {
font-size: clamp(38px, 13vw, 52px);
}
.tire-hero .hero-block__content p {
font-size: 15px;
}
.services--tire,
.tire-how,
.catalog-cta,
.tire-service-page .contacts-section {
padding-block: 56px;
}
.services--tire .heading {
margin-bottom: 24px;
}
.services--tire .services-item strong {
font-size: 12px;
min-height: 56px;
}
.catalog-cta__head p {
font-size: 15px;
}
.catalog-cta__card {
padding: 18px 14px 16px;
}
.catalog-cta__card h3 {
font-size: 30px;
}
.catalog-cta__form {
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.catalog-cta__form select {
height: 48px;
grid-column: span 1;
}
.catalog-cta__form button {
height: 56px;
}
.catalog-cta__form--tires .catalog-cta__field--season,
.catalog-cta__form--tires .catalog-cta__field--brand {
grid-column: span 1;
}
}
.buyout-hero {
background-color: #091732;
}
.buyout-hero.hero-block--overlay .hero-block__bg::after {
background: linear-gradient(90deg, rgba(10, 22, 50, 0.9) 0%, rgba(25, 48, 97, 0.75) 55%, rgba(56, 81, 144, 0) 100%);
}
.buyout-hero .hero-block__container {
min-height: 535px;
padding-block: 74px 56px;
}
.buyout-hero .hero-block__content {
max-width: 700px;
}
.buyout-hero .hero-block__content h1 {
margin: 0 0 28px;
font-size: clamp(42px, 4.3vw, 58px);
line-height: 1.05;
}
.buyout-hero .hero-block__content p {
margin: 0 0 8px;
font-size: 18px;
line-height: 1.45;
}
.buyout-hero__list {
margin: 0 0 34px;
padding: 0;
list-style: none;
display: grid;
gap: 6px;
font-size: 18px;
line-height: 1.45;
}
.buyout-hero__list li::before {
content: "- ";
}
.buyout-types {
padding: 88px 0 92px;
background: var(--color-white);
}
.buyout-types .heading {
margin-bottom: 8px;
text-align: center;
}
.buyout-types .heading h2 {
font-size: clamp(34px, 3vw, 40px);
margin: 0 0 30px;
}
.buyout-types__subtitle {
max-width: 790px;
margin: 0 auto 54px;
text-align: center;
color: rgba(0, 0, 0, 0.85);
font-size: 18px;
line-height: 1.43;
}
.buyout-types__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 370px));
justify-content: space-between;
gap: 18px;
}
.buyout-types__card {
background: var(--color-white);
border: 1px solid var(--glass-black-50);
border-radius: var(--radius-md);
overflow: hidden;
padding-bottom: 14px;
}
.buyout-types__card img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
aspect-ratio: 370 / 275;
}
.buyout-types__card h3 {
margin: 14px 10px 0;
text-align: center;
font-size: 20px;
font-weight: 500;
line-height: 1.25;
color: var(--color-base);
}
.buyout-benefits {
padding: 86px 0 96px;
background: #081632;
}
.buyout-benefits .container {
display: flex;
flex-direction: column;
}
.buyout-benefits .heading {
margin-bottom: 0;
text-align: center;
}
.buyout-benefits .heading h2 {
color: var(--color-white);
font-size: clamp(34px, 3vw, 40px);
margin: 0 0 30px;
}
.buyout-benefits__footnote {
order: 2;
max-width: 860px;
margin: 16px auto 42px;
text-align: center;
font-size: 18px;
line-height: 1.43;
color: rgba(255, 255, 255, 0.72);
}
.buyout-benefits__grid {
order: 3;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.buyout-benefits__card {
display: flex;
flex-flow: column nowrap;
gap: 7px;
position: relative;
padding: 22px;
background: rgba(17, 36, 73, 0.65);
border: 1px solid var(--glass-white-35);
border-radius: 15px;
overflow: hidden;
aspect-ratio: 1.5 / 1;
color: var(--color-white);
}
.buyout-benefits__card img {
position: absolute;
width: 100%;
height: 100%;
position: absolute;
inset: 0;
object-fit: cover;
z-index: 0;
}
.buyout-benefits__card::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
z-index: 1;
background: linear-gradient(to bottom, rgba(6, 13, 32, 0.86) 0%, rgba(6, 13, 32, 0.52) 45%, rgba(6, 13, 32, 0.18) 100%);
}
.buyout-benefits__card h3 {
position: relative;
margin: 0;
z-index: 2;
font-size: 20px;
font-weight: 700;
line-height: 1.25;
}
.buyout-benefits__card p {
position: relative;
z-index: 2;
margin: 0;
font-size: 16px;
line-height: 1.35;
}
.buyout-gallery {
padding: 88px 0 86px;
background: var(--color-white);
}
.buyout-gallery .heading {
margin-bottom: 42px;
text-align: center;
}
.buyout-gallery .heading h2 {
font-size: clamp(34px, 3vw, 40px);
margin: 0 0 30px;
}
.buyout-gallery__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 22px 18px;
}
.buyout-gallery__item {
display: block;
color: inherit;
text-decoration: none;
background: var(--color-white);
overflow: hidden;
&:hover {
img {
transform: scale(1.05);
}
h3 {
color: var(--color-brand);
}
}
}
.buyout-gallery__item img {
width: 100%;
aspect-ratio: 1.44 / 1;
display: block;
object-fit: cover;
transition: transform 0.35s ease;
}
.buyout-gallery__item h3 {
position: relative;
padding: 12px 0 2px;
margin: 0;
font-size: 16px;
font-weight: 500;
line-height: 1.3;
color: var(--color-base);
background-color: inherit;
transition: color 0.35s ease;
}
.buyout-gallery__item p {
margin: 0;
font-size: 14px;
line-height: 1.3;
background: #000;
color: rgba(0, 0, 0, 0.5);
background-color: inherit;
}
.buyout-cta {
position: relative;
padding: 78px 0 88px;
background-size: cover;
background-position: center;
}
.buyout-cta::before {
content: "";
position: absolute;
inset: 0;
background: rgba(9, 20, 46, 0.76);
}
.buyout-cta__container {
position: relative;
z-index: 1;
max-width: 700px;
}
.buyout-cta h2 {
margin: 0 0 8px;
color: var(--color-white);
text-align: center;
font-size: clamp(34px, 3.2vw, 46px);
line-height: 1.12;
}
.buyout-cta p {
margin: 0 0 18px;
color: rgba(255, 255, 255, 0.88);
text-align: center;
font-size: 16px;
line-height: 1.35;
}
.buyout-cta__form {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.buyout-cta__form input {
height: 44px;
padding: 0 14px;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px;
background: var(--color-white);
color: var(--color-base);
}
.buyout-cta__form button {
width: 100%;
margin: 8px 0 0;
justify-content: center;
text-transform: uppercase;
}
.buyout-cta__check-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-top: 2px;
}
.buyout-cta__check-item,
.buyout-cta__check-ite {
display: flex;
align-items: center;
gap: 8px;
padding: 3px 0;
font-size: 14px;
line-height: 1.25;
color: var(--color-white);
cursor: pointer;
}
.buyout-cta__check-item input,
.buyout-cta__check-ite input {
margin: 0;
width: 30px;
height: 30px;
padding: 0;
appearance: none;
border: 1px solid var(--color-border-gray);
border-radius: 3px;
background: rgba(255, 255, 255, 0.95);
display: grid;
place-items: center;
flex: none;
cursor: pointer;
}
.buyout-cta__check-item input::before,
.buyout-cta__check-ite input::before {
content: "";
width: 9px;
height: 15px;
position: relative;
top: -3px;
border-right: 2px solid #081632;
border-bottom: 2px solid #081632;
transform: rotate(45deg) scale(0);
transform-origin: center;
transition: transform 0.14s ease;
}
.buyout-cta__check-item input:checked,
.buyout-cta__check-ite input:checked {
background: var(--color-white);
border-color: var(--color-white);
}
.buyout-cta__check-item input:checked::before,
.buyout-cta__check-ite input:checked::before {
transform: rotate(45deg) scale(1);
}
.buyout-cta__check-item span,
.buyout-cta__check-ite span {
display: inline-block;
user-select: none;
}
.buyout-faq {
padding-top: 8px;
}
.buyout-faq .faq__intro-image {
opacity: 0.14;
filter: grayscale(1);
}
@media (max-width: 1199px) {
.buyout-types__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 1024px) {
.buyout-benefits__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.buyout-gallery__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.buyout-hero .hero-block__container {
min-height: 460px;
padding-block: 42px;
}
.buyout-hero .hero-block__content h1 {
font-size: clamp(34px, 10vw, 46px);
margin-bottom: 16px;
}
.buyout-hero__list,
.buyout-hero .hero-block__content p {
font-size: 15px;
}
.buyout-types,
.buyout-benefits,
.buyout-gallery,
.buyout-cta {
padding: 54px 0;
}
.buyout-types__subtitle {
margin-bottom: 24px;
font-size: 15px;
}
.buyout-types__grid,
.buyout-benefits__grid,
.buyout-gallery__grid {
grid-template-columns: 1fr;
}
.buyout-types__card h3,
.buyout-benefits__card h3 {
font-size: 18px;
}
.buyout-benefits__card p,
.buyout-benefits__footnote {
font-size: 14px;
}
.buyout-cta h2 {
font-size: clamp(30px, 8vw, 40px);
}
.buyout-cta p {
font-size: 14px;
}
.buyout-cta__check-item input {
width: 20px;
height: 20px;
}
.buyout-cta__check-ite input {
width: 20px;
height: 20px;
}
.buyout-cta__check-item input::before,
.buyout-cta__check-ite input::before {
width: 6px;
height: 10px;
top: -1px;
}
}
#footer {
overflow: hidden;
padding: 0;
background-color: var(--color-footer-bg);
}
.footer-holder {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: space-between;
gap: 20px;
padding: 60px 0 120px;
}
.footer-info {
width: 40%;
}
.footer-info .logo {
overflow: hidden;
margin: 0 0 40px;
}
.footer-info .logo img {
float: left;
width: 200px;
height: auto;
}
.footer-info .social {
display: flex;
flex-direction: row;
align-items: center;
gap: 20px;
padding: 0 0 0 40px;
}
.footer-menu {
display: flex;
flex-direction: row;
gap: 24px;
flex: 1;
font-size: 14px;
}
.footer-menu-holder {
flex: 1;
}
.footer-menu h3 {
font-size: 14px;
font-weight: 500;
margin: 0 0 20px;
text-transform: uppercase;
opacity: 0.6;
}
.footer-menu ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-menu ul a {
color: var(--color-base);
text-decoration: none;
}
.footer-menu .footer-phone-link {
display: inline-flex;
align-items: center;
gap: 8px;
}
.footer-menu .footer-phone-icon {
width: 18px;
height: 18px;
flex: none;
display: block;
}
.footer-menu ul a:hover {
text-decoration: underline;
}
.footer-bottom {
border-top: 1px solid var(--color-border-muted);
padding: 30px 0;
color: var(--color-text-muted);
font-size: 14px;
font-weight: 300;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
}
.footer-bottom p {
margin: 0;
}
.footer-bottom .copy:only-child {
margin: 0 auto 0 0;
}
.footer-bottom ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
gap: 16px;
}
.footer-bottom ul a {
color: var(--color-text-muted);
text-decoration: none;
}
.footer-bottom ul a:hover {
text-decoration: underline;
}
@media (max-width: 1199px) {
#footer .container {
padding-inline: 24px;
}
.footer-holder {
padding: 46px 0 80px;
gap: 28px;
}
.footer-menu {
gap: 56px;
}
}
@media (max-width: 767px) {
#footer .container {
padding-inline: 16px;
}
.footer-holder {
flex-direction: column;
padding: 34px 0 36px;
}
.footer-info {
width: 100%;
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: start;
}
.footer-info .logo {
margin-bottom: 18px;
}
.footer-info .logo img {
width: 150px;
float: none;
}
.footer-info .social {
padding: 0;
}
.footer-menu {
flex-wrap: wrap;
gap: 40px 24px;
font-size: 13px;
& > * {
flex: 0 1 calc(50% - 12px);
}
}
.footer-bottom {
flex-direction: column;
align-items: stretch;
text-align: center;
gap: 10px;
font-size: 12px;
}
.footer-bottom ul {
justify-content: center;
}
.footer-bottom .copy:only-child { 
margin: 0 auto;
}
}
.footer-holder--contacts {
padding: 46px 0 34px;
}
.footer-menu--contacts {
gap: 32px;
}
.footer-bottom--compact {
padding: 20px 0 30px;
}