@charset "UTF-8";
html, body {
font-size: 16px;
margin: 0 auto;
padding: 0;
font-family: "AudiType";
background-color: #101319;
color: #fff;
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;
}
.text-center {
text-align: center;
}
.ot-floating-button__open,
.ot-floating-button__close {
display: grid;
place-items: center;
}
.container {
padding-inline: 4.69vw;
}
@media (max-width: 960px) {
.container {
padding-inline: 20px;
}
}
.space {
margin-block: 100px;
}
@media (max-width: 960px) {
.space {
margin-block: 70px;
}
}
h1 {
font-size: 7.5vw;
font-weight: 500;
}
@media (min-width: 960px) {
h1 {
font-size: 2.71vw;
}
}
@media (min-width: 1920px) {
h1 {
font-size: 52px;
}
}
h2 {
font-size: 44px;
}
@media (max-width: 1440px) {
h2 {
font-size: 36px;
}
}
@media (max-width: 1150px) {
h2 {
font-size: 32px;
}
}
@media (max-width: 600px) {
h2 {
font-size: 24px;
}
}
h3 {
font-size: 36px;
font-weight: 500;
}
@media (max-width: 1440px) {
h3 {
font-size: 30px;
}
}
@media (max-width: 1150px) {
h3 {
font-size: 26px;
}
}
@media (max-width: 600px) {
h3 {
font-size: 22px;
}
}
h4 {
font-size: 3.54vw;
font-weight: 500;
}
@media (min-width: 960px) {
h4 {
font-size: 1.25vw;
}
}
@media (min-width: 1920px) {
h4 {
font-size: 24px;
}
}
h5 {
font-size: 24px;
font-weight: 500;
}
@media (max-width: 960px) {
h5 {
font-size: 22px;
}
}
.c-baner {
position: relative;
}
.c-baner img {
width: 100%;
}
.c-baner__content {
position: absolute;
left: 0px;
right: 0px;
bottom: 5.73vw;
display: flex;
flex-direction: column;
gap: 1.82vw;
}
@media (max-width: 960px) {
.c-baner__content {
gap: 20px;
bottom: 10px;
}
}
@media (max-width: 400px) {
.c-baner__content {
gap: 10px;
}
}
@media (max-width: 960px) {
.c-package__header {
text-align: left !important;
}
.c-package__header br {
display: none;
}
}
.c-package__content {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 25px;
max-width: 1150px;
width: 100%;
margin: 70px auto;
}
.c-package__content-elem {
max-width: calc(25% - 19px);
width: 100%;
text-align: center;
padding: 25px 20px;
border-radius: 10px;
background-color: #181d25;
}
@media (max-width: 960px) {
.c-package__content-elem {
max-width: calc(50% - 13px);
}
}
@media (max-width: 600px) {
.c-package__content-elem {
max-width: 100%;
}
}
.c-package__content-elem .icon {
display: flex;
align-items: center;
justify-content: center;
min-height: 67px;
margin-bottom: 25px;
}
.c-package__content-elem .txt {
font-size: 16px;
}
.c-package__content-elem .txt b {
font-weight: 600;
}
.c-package__wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: unset;
gap: 12px;
width: 100%;
}
@media (min-width: 992px) {
.c-package__wrapper {
flex-direction: row;
justify-content: center;
align-items: unset;
width: auto;
}
}
.btns {
box-sizing: border-box;
display: inline-flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 15px 24px;
border-radius: 30px;
text-decoration: none;
font-family: inherit;
font-size: 15px;
transition: all 0.3s ease;
white-space: nowrap;
cursor: pointer;
}
@media (min-width: 992px) {
.btns {
width: auto;
min-width: 200px;
}
}
.btns--solid {
background-color: #657081;
color: #fff;
border: 1px solid #657081;
}
.btns--solid:hover, .btns--solid:focus {
background-color: #181d25;
border-color: #ffffff;
outline: none;
}
.btns--outline {
background-color: #181d25;
color: #fff;
border: 1px solid #ffffff;
}
.btns--outline:hover, .btns--outline:focus {
background-color: #657081;
border-color: #657081;
outline: none;
}
.c-tires {
box-sizing: border-box;
display: flex;
flex-direction: column;
margin-block: 40px;
overflow: hidden;
}
.c-tires *, .c-tires *::before, .c-tires *::after {
box-sizing: inherit;
}
@media (min-width: 1100px) {
.c-tires {
flex-direction: row;
align-items: stretch;
border: 1px solid #fff;
border-radius: 15px;
}
}
.c-tires__header {
margin-bottom: 80px;
}
@media (max-width: 960px) {
.c-tires__header {
margin-bottom: 40px;
}
}
.c-tires__image-wrapper {
background-color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
max-width: 100%;
width: 100%;
border-radius: 15px;
}
@media (min-width: 1100px) {
.c-tires__image-wrapper {
max-width: 15.63vw;
flex-shrink: 0;
border-radius: 0px;
}
}
.c-tires__img {
max-width: 100%;
height: auto;
display: block;
}
.c-tires__content {
display: flex;
flex-direction: column;
padding-top: 24px;
}
@media (min-width: 1600px) {
.c-tires__content {
padding: 1.56vw 3.13vw;
}
}
@media (min-width: 1100px) {
.c-tires__content {
flex-direction: row;
flex-grow: 1;
padding: 1.56vw 2.13vw;
align-items: center;
justify-content: space-between;
}
}
.c-tires__main-info {
display: flex;
flex-direction: column;
gap: 40px;
align-items: center;
text-align: center;
}
@media (min-width: 1100px) {
.c-tires__main-info {
align-items: flex-start;
text-align: left;
flex: 1.3;
gap: 30px;
}
}
.c-tires__title {
font-weight: 500;
}
.c-tires__specs {
font-size: 15px;
line-height: 1.6;
}
.c-tires__spec {
display: flex;
align-items: center;
}
@media (max-width: 1450px) {
.c-tires__spec {
flex-direction: column;
}
}
.c-tires__spec-elem {
display: inline-flex;
align-items: center;
padding-inline: 5px;
gap: 5px;
border-right: 1px solid #ffffff;
}
@media (max-width: 1450px) {
.c-tires__spec-elem {
display: flex;
border: 0px;
padding: 0px;
max-width: 100%;
width: 100%;
}
}
@media (max-width: 1100px) {
.c-tires__spec-elem {
max-width: auto;
width: auto;
border-bottom: 1px solid #ffffff;
padding: 5px !important;
justify-content: center;
}
}
.c-tires__spec-elem:first-child {
padding-left: 0px;
}
.c-tires__spec-elem:last-child {
border: 0px;
padding-right: 0px;
}
.c-tires__spec-elem div {
display: inline-block;
max-width: auto;
width: auto;
}
.c-tires__label {
font-weight: 600;
white-space: nowrap;
}
.c-tires__tire-details {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
width: 100%;
}
@media (min-width: 1100px) {
.c-tires__tire-details {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
}
@media (min-width: 1300px) {
.c-tires__tire-details {
flex-direction: row;
align-items: flex-start;
gap: 32px;
}
}
.c-tires__detail-group {
display: flex;
flex-direction: column;
font-size: 15px;
}
.c-tires__value {
margin-top: 4px;
color: rgba(255, 255, 255, 0.9);
}
.c-tires__divider {
height: 1px;
background-color: #fff;
width: 300px;
margin: 40px auto;
}
@media (min-width: 1100px) {
.c-tires__divider {
height: 100%;
width: 1px;
margin: 0 2.13vw;
align-self: center;
}
}
@media (min-width: 1300px) {
.c-tires__divider {
margin: 0 3.13vw;
}
}
.c-tires__pricing {
display: flex;
flex-direction: column;
gap: 50px;
}
@media (min-width: 1100px) {
.c-tires__pricing {
flex: 1;
gap: 30px;
}
}
.c-tires__price-row {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
@media (min-width: 1100px) {
.c-tires__price-row {
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
gap: 15px;
}
}
@media (min-width: 1300px) {
.c-tires__price-row {
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 24px;
}
}
.c-tires__price-label {
font-size: 15px;
text-align: center;
line-height: 1.4;
}
.c-tires__price-label--highlight {
font-weight: 600;
}
@media (min-width: 1100px) {
.c-tires__price-label {
text-align: left;
}
}
.c-tires__price-value {
font-size: 15px;
font-weight: 500;
white-space: nowrap;
}
.c-tires__price-value--highlight {
font-size: 24px;
font-weight: 600;
white-space: nowrap;
}
.c-tires__price-value--highlight span {
font-size: 15px;
font-weight: 500;
}
.c-tires__actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
}
@media (min-width: 1100px) {
.c-tires__actions {
flex: 0.7;
gap: 20px;
}
}
.c-tires__actions .btns--outline {
border-color: #657081;
max-width: 100%;
width: 100%;
min-height: 61px;
}
@media (min-width: 1100px) {
.c-tires__actions .btns--outline {
max-width: unset;
width: auto;
min-height: unset;
}
}
.c-tires__savings {
display: flex;
flex-direction: column;
align-items: center;
}
.c-tires__savings-label {
font-size: 15px;
margin-bottom: 6px;
}
.c-tires__savings-value {
font-size: 24px;
font-weight: 700;
white-space: nowrap;
}
.c-tires__savings-value span {
font-size: 15px;
font-weight: 700;
}
.c-tires__showMore {
padding-bottom: 100px;
}
@media (max-width: 960px) {
.c-tires__showMore {
padding-block: 50px;
}
}
.c-tires__showMore .btns {
display: flex;
align-items: center;
justify-content: center;
max-width: 550px;
width: 100%;
min-height: 100px;
border-radius: 50px;
margin-inline: auto;
font-size: 20px;
}
.c-photoText {
display: flex;
flex-direction: column;
gap: 120px;
}
@media (max-width: 960px) {
.c-photoText {
gap: 90px;
}
}
.c-photoText__elem {
display: flex;
align-items: center;
gap: 20px;
}
.c-photoText__elem:nth-child(even) {
flex-direction: row-reverse;
}
@media (max-width: 960px) {
.c-photoText__elem {
max-width: 860px;
margin-inline: auto;
flex-direction: column-reverse !important;
gap: 35px;
}
}
.c-photoText__image {
max-width: 860px;
width: 100%;
}
.c-photoText__content {
max-width: 700px;
width: 100%;
margin-inline: auto;
}
.c-photoText__content p {
margin-block: 20px 40px;
}
[v-cloak] {
display: none !important;
}
.contact-form {
color: #ffffff;
padding-block: 60px;
display: flex;
flex-direction: column;
align-items: center;
}
.contact-form__header {
text-align: center;
margin-bottom: 50px;
}
@media (max-width: 600px) {
.contact-form__header {
text-align: left;
}
}
.contact-form__title {
margin-bottom: 10px;
font-weight: 400;
}
.contact-form__subtitle {
color: #d1d5db;
}
.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;
}
/*# sourceMappingURL=style.css.map */