@charset "UTF-8";
html, body {
font-size: 16px;
margin: 0 auto;
padding: 0;
font-family: "AudiType";
background-color: #101319;
color: #000;
min-height: 100vh;
scroll-behavior: smooth;
}
@media (max-width: 780px) {
html, body {
font-size: 14px;
}
}
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
all: unset;
display: revert;
}
*, *::after, *::before {
box-sizing: border-box;
}
table, th, td {
border: 0;
vertical-align: top;
padding: 0;
}
/* Fix mobile Safari increase font-size on landscape mode */
html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
scroll-behavior: smooth;
}
/* Reapply the pointer cursor for anchor tags */
a,
button {
cursor: revert;
}
/* Remove list styles (bullets/numbers) */
ol,
ul,
menu,
summary {
list-style: none;
}
ul {
list-style: disc;
padding-left: 20px;
}
/* For images to not be able to exceed their container */
img {
max-inline-size: 100%;
max-block-size: 100%;
display: block;
}
/* removes spacing between cells in tables */
table {
border-collapse: collapse;
}
/* Safari - solving issue when using user-select:none on the text input doesn't working */
input,
textarea {
-webkit-user-select: auto;
}
/* revert the 'white-space' property for textarea elements on Safari */
textarea {
white-space: revert;
}
/* minimum style to allow to style meter element */
meter {
-webkit-appearance: revert;
appearance: revert;
}
/* preformatted text - use only for this feature */
:where(pre) {
all: revert;
box-sizing: border-box;
}
/* reset default text opacity of input placeholder */
::placeholder {
color: unset;
}
/* fix the feature of 'hidden' attribute.
display:revert; revert to element instead of attribute */
:where([hidden]) {
display: none;
}
/* revert for bug in Chromium browsers
- fix for the content editable attribute will work properly.
- webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
:where([contenteditable]:not([contenteditable=false])) {
-moz-user-modify: read-write;
-webkit-user-modify: read-write;
overflow-wrap: break-word;
-webkit-line-break: after-white-space;
-webkit-user-select: auto;
}
/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable=true]) {
-webkit-user-drag: element;
}
/* Revert Modal native behavior */
:where(dialog:modal) {
all: revert;
box-sizing: border-box;
}
/* Remove details summary webkit styles */
::-webkit-details-marker {
display: none;
}
strong {
font-weight: 700;
}
.ot-floating-button__open,
.ot-floating-button__close {
display: grid;
place-items: center;
}
.container {
padding-inline: 7.81vw;
}
@media (max-width: 960px) {
.container {
padding-inline: 20px;
}
}
@media (max-width: 960px) {
.desktop {
display: none;
}
}
@media (min-width: 960px) {
.mobile {
display: none;
}
}
.c-baner {
position: relative;
width: 100%;
}
.c-baner::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
.c-baner__img--mob {
display: none;
}
@media (max-width: 779px) {
.c-baner__img--mob {
display: block;
}
}
.c-baner__img--desktop {
display: block;
}
@media (max-width: 779px) {
.c-baner__img--desktop {
display: none;
}
}
.c-baner__content {
position: absolute;
z-index: 2;
color: #fff;
display: flex;
flex-direction: column;
}
@media (min-width: 780px) {
.c-baner__content {
top: 50%;
transform: translateY(-50%);
left: 8%;
max-width: 600px;
}
}
@media (max-width: 779px) {
.c-baner__content {
top: auto;
bottom: 8%;
left: 20px;
right: 20px;
}
}
.c-baner__title {
font-size: clamp(1.6rem, 4vw, 54px);
line-height: 1.15;
font-weight: 700;
margin: 0 0 10px 0;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.c-baner__subline {
font-size: clamp(1.2rem, 3.5vw, 42px);
font-weight: 700;
line-height: 1.2;
margin: 0 0 10px 0;
}
.c-baner__text {
font-size: clamp(0.9rem, 2vw, 24px);
line-height: 1.4;
font-weight: 400;
margin: 5px 0 0 0;
}
.c-baner__disclaimer {
max-width: 1100px;
display: inline-block;
padding: 1rem 0;
font-size: 0.75rem;
opacity: 0.7;
}
.c-baner__btn {
display: inline-block;
align-self: flex-start;
margin-top: 2rem;
background-color: transparent;
border: 1px solid #fff;
color: #fff;
padding: 1rem 2rem;
font-size: 1.25rem;
text-align: center;
min-width: 165px;
cursor: pointer;
text-decoration: none;
transition: all 0.3s ease;
}
.c-baner__btn:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.c-baner--section .c-baner__text {
line-height: 1.5;
font-size: 18px;
}
@media (min-width: 780px) {
.c-baner--section .c-baner__text {
font-size: 22px;
}
}
@media (min-width: 780px) {
.c-baner--section .c-baner__content {
max-width: 478px;
right: 8%;
left: auto;
}
}
[v-cloak] {
display: none !important;
}
.contact-form {
color: #ffffff;
padding: 60px 20px;
font-family: "Audi Type", Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
}
@media (min-width: 768px) {
.contact-form {
margin-inline: 10%;
}
}
.contact-form__header {
text-align: center;
margin-bottom: 50px;
}
.contact-form__title {
font-size: 2.2rem;
margin-bottom: 10px;
font-weight: 400;
}
.contact-form__subtitle {
color: #d1d5db;
font-size: 1rem;
}
.contact-form__form {
width: 100%;
}
.contact-form__grid {
display: grid;
grid-template-columns: 1fr;
gap: 30px 40px;
margin-bottom: 50px;
}
@media (min-width: 768px) {
.contact-form__grid {
grid-template-columns: repeat(3, 1fr);
}
}
.contact-form__group {
display: flex;
flex-direction: column;
}
@media (min-width: 768px) {
.contact-form__group--span-2 {
grid-column: span 2;
}
}
.contact-form__label {
font-size: 0.8rem;
color: #6c757d;
margin-bottom: 8px;
}
.contact-form__input {
background: transparent;
border: none;
border-bottom: 1px solid #ced4da;
color: #ffffff;
padding: 5px 0 10px 0;
font-size: 1rem;
transition: border-color 0.3s;
}
.contact-form__input:focus {
outline: none;
border-bottom-color: #ffffff;
}
.contact-form__input::placeholder {
color: #ced4da;
opacity: 0.25;
}
.contact-form__input--error {
border-bottom-color: #dc3545;
}
.contact-form__error-msg {
color: #dc3545;
font-size: 0.75rem;
margin-top: 5px;
min-height: 14px;
}
.contact-form__gdpr {
font-size: 0.7rem;
color: #6c757d;
margin-bottom: 40px;
line-height: 1.5;
}
.contact-form__gdpr-text {
margin-bottom: 20px;
}
.contact-form__gdpr-extra {
display: inline;
}
.contact-form__gdpr-dots {
display: inline;
}
.contact-form__collapse-btn {
background: transparent;
border: none;
color: #ffffff;
font-weight: bold;
text-decoration: underline;
cursor: pointer;
padding: 0;
margin-top: 10px;
display: inline-block;
transition: color 0.3s;
}
.contact-form__collapse-btn:hover {
color: #d1d5db;
}
.contact-form__checkbox-wrapper {
display: flex;
flex-direction: column;
}
.contact-form__checkbox-group {
display: flex;
align-items: center;
gap: 15px;
}
.contact-form__optional-consents {
display: flex;
flex-direction: column;
gap: 15px;
margin-top: 15px;
}
@media (min-width: 500px) {
.contact-form__optional-consents {
flex-direction: row;
gap: 40px;
}
}
.contact-form__checkbox {
appearance: none;
width: 22px;
height: 22px;
border: 2px solid #ffffff;
background-color: transparent;
cursor: pointer;
position: relative;
flex-shrink: 0;
transition: border-color 0.3s;
}
.contact-form__checkbox:checked::after {
content: "✔";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #ffffff;
font-size: 14px;
}
.contact-form__checkbox--error {
border-color: #dc3545;
}
.contact-form__checkbox-label {
font-size: 0.75rem;
color: #6c757d;
cursor: pointer;
}
.contact-form__actions {
display: flex;
justify-content: center;
}
.contact-form__submit {
background-color: transparent;
color: #ffffff;
border: 1px solid #495057;
padding: 12px 60px;
border-radius: 30px;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s;
}
.contact-form__submit:hover {
background-color: #212529;
border-color: #ffffff;
}
.contact-form__submit:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.contact-form__message {
text-align: center;
margin: 40px 0;
}
.contact-form__message--success {
color: #ffffff;
font-size: 1.8rem;
font-weight: 300;
line-height: 1.4;
}
.contact-form__message--error {
color: #dc3545;
font-size: 1.1rem;
font-weight: bold;
}
.c-logo-bar {
max-width: 90%;
margin: 0 auto;
}
.c-logo-bar__container {
display: flex;
align-items: center;
padding: 1rem 0;
gap: 25px;
justify-content: flex-start;
width: 100%;
max-width: 152px;
}
.c-logo-bar__logo {
width: auto;
max-height: 33px;
filter: invert(1) brightness(100);
}
.c-logo-bar__text {
font-weight: 500;
min-width: 220px;
color: #fff;
}
.c-logo-bar__text--red {
color: #f50537;
}
.c-footer {
color: #fff;
padding: 4rem 1rem;
text-align: center;
}
.c-footer__main {
font-size: 1.4rem;
}
.c-footer__submain {
font-size: 1.2rem;
font-weight: 600;
margin-block: 0.25rem 0.75rem;
}
.c-footer::before {
content: "";
display: block;
width: 100%;
height: 1px;
background-color: #fff;
margin-bottom: 30px;
}
.c-footer-white {
padding-block: 2rem;
padding-inline: 2rem;
background-color: #fff;
color: #000;
text-align: center;
}
.c-footer-white__main {
font-size: 1.4rem;
}
.c-footer-white__submain {
font-size: 1.2rem;
font-weight: 600;
margin-block: 0.25rem 0.75rem;
}
.c-footer-white::before {
content: "";
display: block;
width: 100%;
height: 1px;
background-color: #000;
margin-bottom: 30px;
}
.c-header {
max-width: 1625px;
margin: 0 auto;
margin-bottom: 100px;
padding: 1rem;
}
.c-header h1 {
font-size: clamp(1.5rem, 2.5vw, 33px);
text-align: center;
font-weight: 500;
margin-block: 50px;
}
.c-header__text {
font-size: 1rem;
text-align: center;
width: 100%;
}
@media screen and (max-width: 960px) {
.c-header__text {
margin-bottom: 30px;
text-align: left;
font-size: 14px;
}
}
.c-photo-text {
display: flex;
align-items: center;
margin: 0 auto 4rem auto;
justify-content: space-between;
max-width: 1600px;
background-color: #fff;
color: #000;
}
@media screen and (max-width: 960px) {
.c-photo-text {
padding-inline: 30px;
flex-direction: column;
}
}
.c-photo-text--row {
flex-direction: row;
}
@media screen and (max-width: 960px) {
.c-photo-text--row {
flex-direction: column-reverse;
margin: 0 auto;
}
}
.c-photo-text--reverse {
flex-direction: row-reverse;
}
@media screen and (max-width: 960px) {
.c-photo-text--reverse {
flex-direction: column-reverse;
margin: 0 auto;
margin-inline: 30px;
}
}
.c-photo-text__content {
padding: 30px 70px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 30px;
width: calc(55% - 140px);
}
@media screen and (max-width: 960px) {
.c-photo-text__content {
gap: 20px;
padding: 2rem;
width: 100%;
}
}
.c-photo-text__content p {
margin-bottom: 1.5rem;
}
.c-photo-text__content b {
font-weight: bold;
}
.c-photo-text__content ul {
list-style-type: none;
}
.c-photo-text__content ul li {
position: relative;
margin: 0.5rem;
}
.c-photo-text__content ul li::before {
content: " ";
display: block;
position: absolute;
left: -15px;
top: 2px;
width: 15px;
height: 15px;
background-image: url(/images/punktor.jpg);
background-size: contain;
background-repeat: no-repeat;
}
.c-photo-text__header {
font-size: clamp(1.5rem, 8vw, 82px);
line-height: 1.2;
font-weight: bold;
margin-top: 1rem;
}
.c-photo-text__subheader {
font-size: clamp(1rem, 2vw, 18px);
line-height: 1.2;
font-weight: 700;
}
.c-photo-text__text {
font-size: clamp(1rem, 1.5vw, 16px);
max-width: 423px;
}
.c-photo-text__text h3 {
font-weight: bold;
font-size: 1.5rem;
margin-bottom: 1rem;
}
.c-photo-text__image {
width: 50%;
align-self: stretch;
}
.c-photo-text__image img {
object-fit: cover;
min-height: 100%;
}
@media screen and (max-width: 960px) {
.c-photo-text__image {
width: 100%;
}
}
@media screen and (max-width: 960px) {
.c-photo-text:nth-child(odd) {
padding-inline: 0;
flex-direction: column;
}
}
.reverse-row {
display: flex;
flex-direction: row-reverse;
}
@media screen and (max-width: 960px) {
.reverse-row {
flex-direction: column-reverse;
}
}
.c-div-flex {
display: flex;
flex: 1;
justify-content: space-between;
gap: 30px;
padding-inline: 70px;
}
@media screen and (max-width: 960px) {
.c-div-flex {
flex-direction: column;
padding-inline: 30px;
}
}
.c-tile {
display: flex;
flex-direction: column;
width: 100%;
background-color: #fff;
color: #000;
max-width: 735px;
}
.c-tile__image {
width: 100%;
}
.c-tile__content {
padding: 2rem;
}
@media (max-width: 960px) {
.c-tile__content {
padding: 0.2rem;
}
}
.c-tile__header {
margin: 20px 0px;
font-size: clamp(1rem, 2vw, 26px);
font-weight: 500;
}
.c-tile__link {
align-items: center;
padding: 20px 50px;
border: 1px solid #000;
display: inline-flex;
justify-content: center;
margin: 1rem 0;
}
@media (min-width: 960px) {
.c-tile__link {
min-width: 322px;
}
}
@media (max-width: 960px) {
.c-tile__link {
width: 100%;
}
}
.c-tile__link span {
text-align: center;
}
.c-tile__params {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 2rem;
margin: 2rem 0;
}
.c-tile__param {
display: flex;
justify-content: flex-start;
align-items: flex-start;
max-width: 300px;
width: 100%;
gap: 1.5rem;
}
@media (max-width: 960px) {
.c-tile__param {
font-size: 12px;
gap: 0.5rem;
}
}
.c-tile__param b {
font-weight: bold;
display: inline-block;
}
.c-tile__param__img {
width: 43px;
height: auto;
}
.c-tile__param__img img {
width: 100%;
}
.c-tiles {
max-width: calc(1600px + 4rem);
margin: 0 auto;
padding: 2rem 2rem 4rem 2rem;
}
.c-tiles__title {
text-align: center;
font-size: 1.5rem;
font-weight: bold;
}
.c-tiles__row {
margin-top: 2rem;
grid-gap: 4rem;
padding: 40px 0;
grid-row-gap: 2rem;
}
@media (min-width: 960px) {
.c-tiles__row {
grid-template-columns: repeat(2, minmax(433px, 1fr));
display: grid;
}
}
@media (max-width: 960px) {
.c-tiles__row {
display: flex;
flex-direction: column;
gap: 2rem;
}
}
.c-button {
border: 1px solid #000;
background-color: #000;
padding: 16px 16px;
width: min-content;
text-wrap: nowrap;
font-size: clamp(0.7rem, 1.5vw, 16px);
transition: all 0.2s ease-in-out;
display: flex;
align-items: center;
justify-content: center;
margin: 16px auto;
max-width: 480px;
color: #fff;
}
.c-button:hover {
background-color: #fff;
color: #000;
transition: all 0.2s ease-in-out;
}
@media screen and (max-width: 960px) {
.c-button {
margin: 30px auto;
min-height: 75px;
font-size: 20px;
width: 100%;
text-align: center;
}
}
.c-button--left {
margin-left: 0;
}
.c-short-photo-text {
max-width: 1600px;
margin-inline: auto;
padding-inline: 10%;
margin-bottom: 50px;
}
.c-short-photo-text__container {
display: flex;
padding-block: 2rem 4rem;
}
.c-short-photo-text__container--row {
flex-direction: row;
}
.c-short-photo-text__container--reverse {
flex-direction: row-reverse;
}
.c-short-photo-text__img-wrapper {
width: 80%;
}
.c-short-photo-text__img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
}
.c-short-photo-text__content {
background-color: #fff;
color: #000;
display: flex;
flex-direction: column;
justify-content: center;
padding-inline: 2rem;
padding-block: 2rem;
}
.c-short-photo-text__header {
font-weight: 600;
font-size: 1.3rem;
margin-block: 0 1rem;
}
.c-short-photo-text__list li {
position: relative;
margin-block: 0.25rem;
margin-inline: 1rem 0;
}
.c-short-photo-text__list li::before {
content: "";
position: absolute;
left: -15px;
top: 2px;
width: 15px;
height: 15px;
background-image: url(/images/punktor.jpg);
background-size: contain;
background-repeat: no-repeat;
}
.c-short-photo-text__link {
border: 1px solid #000;
display: flex;
margin: 2rem 0 0;
width: -moz-fit-content;
width: fit-content;
padding-block: 0.75rem;
padding-inline: 2rem;
transition: all 0.2s ease-in-out;
}
.c-short-photo-text__link:hover {
background-color: #000;
color: #fff;
cursor: pointer;
}
@media screen and (max-width: 960px) {
.table {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
.table h2 {
font-size: 2.4rem;
font-weight: 600;
text-align: center;
margin-block: 4rem;
}
@media screen and (max-width: 960px) {
.table h2 {
font-size: 1.8rem;
}
}
.table__header {
font-size: 1.6rem;
text-align: center;
margin-block: 6rem 3rem;
font-weight: 600;
}
.table__btn {
display: block;
margin-inline: auto;
border: 1px solid #fff;
padding-block: 1rem;
padding-inline: 3rem;
transition: all 0.2s ease-in-out;
}
.table__btn:hover {
cursor: pointer;
color: #000;
background-color: #fff;
}
.table__table {
display: flex;
font-size: 0.82rem;
justify-content: center;
}
.table__table:not(:first-of-type):hover {
cursor: pointer;
}
.table__table:not(:first-of-type):hover div {
background-color: rgba(255, 255, 255, 0.1843137255);
color: #fff;
}
.table__table:last-of-type div {
border-bottom: none;
}
@media screen and (max-width: 960px) {
.table__table {
min-width: 800px;
overflow-x: scroll;
}
}
.table__model {
width: 67px;
padding-inline: 0.5rem 0;
padding-block: 0.5rem;
display: flex;
align-items: center;
border-bottom: 1px solid #fff;
transition: all 0.2s ease-in-out;
}
.table__nr {
width: 160px;
padding-block: 0.5rem;
display: flex;
align-items: center;
border-bottom: 1px solid #fff;
transition: all 0.2s ease-in-out;
}
.table__name {
width: 103px;
padding-block: 0.5rem;
display: flex;
align-items: center;
border-bottom: 1px solid #fff;
transition: all 0.2s ease-in-out;
}
.table__tire {
width: 147px;
padding-inline: 0.2rem;
padding-block: 0.5rem;
display: flex;
align-items: center;
border-bottom: 1px solid #fff;
transition: all 0.2s ease-in-out;
}
.table__size {
width: 110px;
padding-block: 0.5rem;
display: flex;
align-items: center;
border-bottom: 1px solid #fff;
transition: all 0.2s ease-in-out;
}
.table__year {
width: 65px;
padding-block: 0.5rem;
display: flex;
align-items: center;
border-bottom: 1px solid #fff;
transition: all 0.2s ease-in-out;
}
.table__sug-price {
width: 120px;
color: #000;
background-color: #ececec;
padding-inline: 0.5rem;
padding-block: 0.5rem;
display: flex;
align-items: center;
border-bottom: 1px solid #000;
transition: all 0.2s ease-in-out;
}
.table__price-diff {
width: 107px;
color: #fff;
background-color: #f40537;
padding-inline: 0.5rem;
padding-block: 0.5rem;
display: flex;
align-items: center;
border-bottom: 1px solid #fff;
transition: all 0.2s ease-in-out;
}
.table__our-price {
background-color: #1d1d1b;
padding-inline: 0.5rem;
width: 120px;
padding-block: 0.5rem;
display: flex;
align-items: center;
border-bottom: 1px solid #fff;
transition: all 0.2s ease-in-out;
}
.table__tire-img {
background-color: #fff;
width: 100px;
aspect-ratio: 1;
color: black;
display: flex;
justify-content: center;
align-items: center;
}
.table__tire-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.table__padding {
padding-block: 1rem;
}
@media screen and (max-width: 960px) {
.table__img-wrapper {
min-width: 1000px;
overflow-x: scroll;
display: flex;
align-items: center;
justify-content: center;
}
.table__img-wrapper img {
max-width: 100%;
height: auto;
}
}
.c-slide {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
}
.c-slide__image {
max-height: 250px;
}
.c-slide__text {
font-weight: 600;
}
.c-slide__link {
background-color: #000;
color: #fff;
font-size: 14px;
padding: 15px 45px;
text-align: center;
}
.c-slider {
margin: 70px 0px;
}
@media (max-width: 1440px) {
.c-slider {
margin: 50px 0px;
}
}
@media (max-width: 960px) {
.c-slider {
margin: 0px 0px 30px 0px;
}
}
.c-slider__wrap {
position: relative;
margin: 60px 0px;
}
@media (max-width: 1440px) {
.c-slider__wrap {
margin: 40px 0px;
}
}
@media (max-width: 960px) {
.c-slider__wrap {
margin: 30px 0px;
}
}
.c-slider__header {
font-size: 20px;
font-weight: 700;
}
@media (max-width: 1440px) {
.c-slider__header {
font-size: 19px;
}
}
@media (max-width: 1110px) {
.c-slider__header {
font-size: 17px;
}
}
.c-slider__arrows {
max-width: 500px;
width: 100%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
@media (max-width: 960px) {
.c-slider__arrows {
max-width: 42.71vw;
min-width: 208px;
}
}
.c-slider__arrows-prev, .c-slider__arrows-next {
cursor: pointer;
opacity: 1;
transition: all 0.4s ease-in-out;
}
@media (max-width: 960px) {
.c-slider__arrows-prev img, .c-slider__arrows-next img {
max-width: 12px;
width: 100%;
}
}
.c-slider__arrows-prev.swiper-button-disabled, .c-slider__arrows-next.swiper-button-disabled {
opacity: 0;
}
.c-slider__arrows-next img {
transform: rotate(180deg);
}
.c-slider__arrows-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}
.c-slider__arrows-pagination .swiper-pagination-bullet {
background-color: #939393;
border-radius: 100%;
width: 20px;
min-width: 20px;
height: 20px;
min-height: 20px;
opacity: 1;
margin: 0px !important;
transition: all 0.4s ease-in-out;
}
@media (max-width: 960px) {
.c-slider__arrows-pagination .swiper-pagination-bullet {
width: 15px;
min-width: 15px;
height: 15px;
min-height: 15px;
}
}
@media (max-width: 500px) {
.c-slider__arrows-pagination .swiper-pagination-bullet {
width: 8px;
min-width: 8px;
height: 8px;
min-height: 8px;
}
}
.c-slider__arrows-pagination .swiper-pagination-bullet-active {
width: 30px;
min-width: 30px;
height: 30px;
min-height: 30px;
background-color: #000000;
}
@media (max-width: 960px) {
.c-slider__arrows-pagination .swiper-pagination-bullet-active {
width: 20px;
min-width: 20px;
height: 20px;
min-height: 20px;
}
}
@media (max-width: 500px) {
.c-slider__arrows-pagination .swiper-pagination-bullet-active {
width: 12px;
min-width: 12px;
height: 12px;
min-height: 12px;
}
}
.c-slide {
display: grid;
grid-template-rows: 1fr auto;
padding: 2.08vw;
border: 1px solid #000000;
opacity: 0.5;
height: auto;
cursor: pointer;
}
@media (max-width: 960px) {
.c-slide {
padding: 3.13vw;
}
}
.c-slide.active {
opacity: 1;
}
.c-slide.stasis {
opacity: 1;
}
.c-slide__header {
display: flex;
justify-content: space-between;
gap: 1.56vw;
align-items: flex-start;
margin: 2.6vw 0px 0px 0px;
max-width: 100%;
width: 100%;
}
.c-slide__header-text h3 {
font-size: 1.25vw;
font-weight: 700;
margin: 0px 0px 5px 0px;
}
@media (max-width: 960px) {
.c-slide__header-text h3 {
font-size: 2.29vw;
}
}
.c-slide__header-text p {
font-size: 1.1vw;
font-weight: 500;
}
@media (max-width: 960px) {
.c-slide__header-text p {
font-size: 1.88vw;
}
}
.c-slide__header-button input[type=radio] {
-webkit-appearance: none;
appearance: none;
width: 2.6vw;
min-width: 2.6vw;
height: 2.6vw;
min-height: 2.6vw;
border: 1px solid #000000;
border-radius: 100%;
}
@media (max-width: 960px) {
.c-slide__header-button input[type=radio] {
width: 4.17vw;
min-width: 4.17vw;
height: 4.17vw;
min-height: 4.17vw;
}
}
.c-slide__header-button input[type=radio]:checked {
background: url("../images/select-circle-s.webp");
background-color: #f50537;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-color: #ffffff;
}
.c-faq {
margin: 70px 0px;
}
.c-faq__header {
font-size: 40px;
text-align: center;
font-weight: 700;
}
@media (max-width: 1440px) {
.c-faq__header {
font-size: 30px;
}
}
@media (max-width: 1100px) {
.c-faq__header {
font-size: 20px;
}
}
@media (max-width: 550px) {
.c-faq__header {
font-size: 17px;
}
}
.c-faq__content {
margin: 50px 0px 0px 0px;
}
@media (max-width: 550px) {
.c-faq__content {
margin: 30px 0px 0px 0px;
}
}
.c-faqElement {
border-bottom: 1px solid #c3c3c3;
font-size: 20px;
}
@media (max-width: 1440px) {
.c-faqElement {
font-size: 18px;
}
}
@media (max-width: 1100px) {
.c-faqElement {
font-size: 16px;
}
}
@media (max-width: 1100px) {
.c-faqElement {
font-size: 1.88vw;
}
}
.c-faqElement.active .c-faqElement__header img {
transform: rotate(0deg);
}
.c-faqElement.active .c-faqElement__content {
max-height: 100vh;
}
.c-faqElement__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
padding: 20px 40px;
cursor: pointer;
}
@media (max-width: 1600px) {
.c-faqElement__header {
padding: 15px 30px;
}
}
@media (max-width: 1440px) {
.c-faqElement__header {
padding: 13px 25px;
gap: 15px;
}
}
@media (max-width: 960px) {
.c-faqElement__header {
padding: 2.08vw 4.17vw;
}
}
.c-faqElement__header h4 {
font-weight: 700;
}
.c-faqElement__header img {
transform: rotate(180deg);
transition: all 0.4s ease-in-out;
}
.c-faqElement__content {
background-color: #f2f2f2;
max-height: 0px;
overflow: hidden;
transition: all 0.4s ease-in-out;
}
.c-faqElement__content a {
text-decoration: underline;
}
.c-faqElement__content table {
max-width: 1300px;
width: 100%;
}
.c-faqElement__content table tr {
border-bottom: 1px solid #a9a9a9;
}
.c-faqElement__content table tr:last-of-type {
border: 0px;
}
.c-faqElement__content table tr td, .c-faqElement__content table tr th {
padding: 25px 30px 25px 0px;
}
@media (max-width: 1600px) {
.c-faqElement__content table tr td, .c-faqElement__content table tr th {
padding: 20px 25px 20px 0px;
}
}
@media (max-width: 1440px) {
.c-faqElement__content table tr td, .c-faqElement__content table tr th {
padding: 15px 20px 15px 0px;
}
}
@media (max-width: 960px) {
.c-faqElement__content table tr td, .c-faqElement__content table tr th {
padding: 2.08vw 15px 2.08vw 0px;
}
}
.c-faqElement__content-flex {
display: flex;
gap: 10px;
margin: 20px 0px;
}
.c-faqElement__content-flex:first-of-type {
margin-top: 0px;
}
.c-faqElement__content-flex:last-of-type {
margin-bottom: 0px;
}
.c-faqElement__content-flex--step {
white-space: nowrap;
}
.c-faqElement__container {
padding: 20px 40px;
border-top: 1px solid #c3c3c3;
}
@media (max-width: 1600px) {
.c-faqElement__container {
padding: 15px 30px;
}
}
@media (max-width: 1440px) {
.c-faqElement__container {
padding: 13px 25px;
}
}
@media (max-width: 960px) {
.c-faqElement__container {
padding: 2.08vw 4.17vw;
}
}
[v-cloak] {
display: none;
}
.cars-section {
color: #ffffff;
padding-block: 60px;
padding-inline: 13%;
}
@media (max-width: 768px) {
.cars-section {
padding-inline: 1rem;
}
}
.cars-header {
text-align: center;
margin-bottom: 60px;
}
.cars-header h2 {
font-size: 32px;
font-weight: 400;
color: #ffffff;
margin: 0 0 15px 0;
line-height: 1.3;
}
.cars-header p {
font-size: 18px;
font-weight: 300;
color: #ffffff;
margin: 0;
}
@media (max-width: 768px) {
.cars-header {
margin-bottom: 40px;
}
.cars-header h2 {
font-size: 24px;
}
.cars-header p {
font-size: 16px;
}
}
.c-filters {
margin-bottom: 60px;
}
.c-filters__grid {
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: center;
align-items: flex-end;
margin-bottom: 40px;
}
.c-filters__group {
flex: 1;
min-width: 200px;
max-width: 300px;
}
.c-filters__group label {
display: block;
font-size: 13px;
font-weight: 600;
margin-bottom: 10px;
color: #ffffff;
}
.c-filters__group--split {
display: flex;
gap: 15px;
}
.c-filters__group--split .split-col {
flex: 1;
}
.c-filters__actions {
text-align: center;
}
.btn--filter {
background-color: #6e798c;
color: white;
border: none;
border-radius: 30px;
padding: 14px 60px;
font-size: 15px;
cursor: pointer;
transition: 0.3s ease;
}
.btn--filter:hover {
background-color: #8692a5;
}
.btn--filter:disabled {
opacity: 0.5;
pointer-events: none;
}
.btn--ask {
background-color: #6e798c;
color: white;
border: none;
border-radius: 30px;
padding: 12px 30px;
font-size: 14px;
cursor: pointer;
transition: 0.3s ease;
}
.btn--ask:hover {
background-color: #8692a5;
}
.btn--ask {
margin-inline: auto;
text-align: center;
width: fit-content;
}
.custom-select {
position: relative;
width: 100%;
}
.custom-select.is-disabled {
opacity: 0.4;
pointer-events: none;
}
.custom-select__selected {
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 0 10px;
border-bottom: 1px solid #ffffff;
cursor: pointer;
font-size: 15px;
}
.custom-select__selected svg {
transition: transform 0.3s;
}
.custom-select__selected svg.is-open {
transform: rotate(180deg);
}
.custom-select.is-small .custom-select__selected {
font-size: 13px;
}
.custom-select__options {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #181b22;
border: 1px solid #2a2e39;
z-index: 100;
max-height: 250px;
overflow-y: auto;
margin: 0;
padding: 0;
list-style: none;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
scrollbar-width: thin;
scrollbar-color: rgba(245, 245, 240, 0.4) transparent;
}
.custom-select__options::-webkit-scrollbar {
width: 5px;
}
.custom-select__options::-webkit-scrollbar-track {
background: transparent;
}
.custom-select__options::-webkit-scrollbar-thumb {
background-color: rgba(245, 245, 240, 0.3);
border-radius: 10px;
}
.custom-select__options::-webkit-scrollbar-thumb:hover {
background-color: rgba(245, 245, 240, 0.6);
}
.custom-select__options::-webkit-scrollbar-button {
display: none;
}
.custom-select__option {
padding: 12px 15px;
cursor: pointer;
font-size: 14px;
transition: background 0.2s;
}
.custom-select__option:hover {
background: rgba(255, 255, 255, 0.05);
}
.custom-select__option.is-active {
background: #6e798c;
}
.fade-dropdown-enter-active,
.fade-dropdown-leave-active {
transition: opacity 0.2s, transform 0.2s;
}
.fade-dropdown-enter-from,
.fade-dropdown-leave-to {
opacity: 0;
transform: translateY(-10px);
}
.cars-list {
display: flex;
flex-direction: column;
gap: 30px;
}
.car-card {
display: flex;
background-color: #181b22;
border: 1px solid #2a2e39;
border-radius: 12px;
overflow: hidden;
transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.4s ease;
}
@media (min-width: 993px) {
.car-card {
height: 275px;
}
}
@media (hover: hover) {
.car-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
border-color: rgba(255, 255, 255, 0.15);
}
.car-card:hover .car-card__image-mask img {
transform: scale(1.06);
}
.car-card:hover .btn--ask {
background-color: rgb(120.824, 131.3664, 149.576);
}
}
.car-card__image {
flex: 0 0 35%;
display: flex;
align-items: center;
padding: 10px;
}
.car-card__image .car-card__image-mask {
width: 100%;
height: 100%;
border-radius: 10px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.car-card__image .car-card__image-mask img {
height: 100%;
width: 100%;
display: block;
object-fit: cover;
object-position: 50% 50%;
transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.car-card__content {
flex: 1;
padding: 16px 10px;
display: flex;
flex-direction: column;
}
.car-card__content .car-card__title {
font-size: 24px;
margin: 0 0 5px;
font-weight: 400;
color: #ffffff;
}
.car-card__content .car-card__subtitle {
font-size: 14px;
color: #8892a3;
margin: 0 0 30px;
}
.car-card__price-mobile {
display: none;
}
.car-card__price-desktop {
display: block;
}
.car-card .price-label {
font-size: 13px;
color: #8892a3;
margin: 0 0 5px;
}
.car-card .price-value {
font-size: 26px;
font-weight: 700;
margin: 0 0 30px;
color: #ffffff;
}
.car-card .price-value::after {
content: " zł brutto";
font-size: 12px;
font-weight: 600;
}
.car-card__specs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: auto;
}
.car-card__specs .spec-item {
display: flex;
align-items: center;
gap: 15px;
}
.car-card__specs .spec-item .spec-icon {
width: 55px;
height: auto;
}
.car-card__specs .spec-item small {
display: block;
font-size: 11px;
color: #8892a3;
margin-bottom: 2px;
}
.car-card__specs .spec-item strong {
font-size: 14px;
font-weight: 500;
color: #ffffff;
}
.car-card__disclaimer {
font-size: 8px;
color: rgba(136, 146, 163, 0.5);
margin-block: auto 0;
line-height: 1.1;
}
.car-card__actions {
flex: 0 0 300px;
padding: 30px;
border-left: 1px solid #2a2e39;
display: flex;
flex-direction: column;
justify-content: center;
}
@media (max-width: 992px) {
.car-card {
flex-direction: column;
}
.car-card__image {
flex: 0 0 auto;
padding: 0;
}
.car-card__image img {
border-radius: 12px 12px 0 0;
height: auto;
aspect-ratio: 16/9;
}
.car-card__content {
padding: 20px;
}
.car-card__content .car-card__subtitle {
margin-bottom: 20px;
}
.car-card__price-mobile {
display: block;
margin-bottom: 20px;
}
.car-card__price-mobile .price-value {
margin-bottom: 0;
}
.car-card__price-desktop {
display: none;
}
.car-card__specs {
margin-top: 0;
margin-bottom: 20px;
gap: 10px 0;
border-top: 1px solid #2a2e39;
border-bottom: 1px solid #2a2e39;
padding: 16px 0;
}
.car-card .spec-item {
gap: 6px;
}
.car-card .spec-item .spec-icon {
width: 35px;
}
.car-card__disclaimer {
margin-top: 0;
}
.car-card__actions {
flex: 0 0 auto;
border-left: none;
padding: 0 20px 20px 20px;
}
.car-card__actions .btn--ask {
width: 100%;
}
}
@media (max-width: 992px) {
.car-card {
flex-direction: column;
}
.car-card__image {
flex: 0 0 auto;
padding: 0;
}
.car-card__actions {
border-left: none;
border-top: 1px solid #2a2e39;
padding-top: 20px;
}
.car-card__specs {
grid-template-columns: 1fr 1fr;
}
.car-card .car-card__price-mobile {
display: block !important;
margin-bottom: 20px;
}
}
.stagger-enter-active {
transition: all 0.5s ease-out;
transition-delay: calc(var(--stagger-index) * 0.1s);
}
.stagger-leave-active {
transition: all 0.3s ease-in;
}
.stagger-enter-from,
.stagger-leave-to {
opacity: 0;
transform: translateY(30px);
}
.skeleton-box {
background: linear-gradient(90deg, #2a2e39 25%, #3a404d 50%, #2a2e39 75%);
background-size: 400% 100%;
animation: shimmer 1.5s infinite linear;
border-radius: 4px;
}
@keyframes shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
.c-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin-top: 50px;
}
.c-pagination button {
background: none;
border: none;
color: #ffffff;
cursor: pointer;
font-size: 14px;
}
.c-pagination button:disabled {
opacity: 0.3;
cursor: default;
}
.c-pagination__numbers {
display: flex;
gap: 15px;
}
.c-pagination__numbers span {
cursor: pointer;
font-size: 16px;
color: #8892a3;
transition: 0.3s ease;
}
.c-pagination__numbers span.is-active {
color: #ffffff;
font-weight: bold;
}
.c-pagination__numbers span:hover:not(.is-active) {
color: #ffffff;
}
.cars-no-results {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: rgba(24, 27, 34, 0.5);
border: 1px dashed rgba(136, 146, 163, 0.4);
border-radius: 12px;
padding: 80px 20px;
text-align: center;
min-height: 275px;
margin-top: 20px;
animation: fadeIn 0.5s ease-out;
}
.cars-no-results::before {
content: "";
display: block;
width: 64px;
height: 64px;
margin-bottom: 24px;
background-color: #2a2e39;
border-radius: 50%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%238892a3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 32px;
}
.cars-no-results h3 {
font-size: 24px;
font-weight: 400;
color: #ffffff;
margin: 0 0 10px 0;
}
.cars-no-results p {
font-size: 16px;
color: #8892a3;
margin: 0;
max-width: 400px;
line-height: 1.5;
}
@media (max-width: 768px) {
.cars-no-results {
padding: 60px 20px;
min-height: 200px;
}
.cars-no-results h3 {
font-size: 20px;
}
.cars-no-results p {
font-size: 14px;
}
.cars-no-results::before {
width: 54px;
height: 54px;
background-size: 26px;
margin-bottom: 20px;
}
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/*# sourceMappingURL=style.css.map */