style: chaged blocks #12
@@ -1,3 +1,4 @@
|
|||||||
|
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Montserrat:wght@700&display=swap");
|
||||||
/* http://meyerweb.com/eric/tools/css/reset/
|
/* http://meyerweb.com/eric/tools/css/reset/
|
||||||
v2.0 | 20110126
|
v2.0 | 20110126
|
||||||
License: none (public domain)
|
License: none (public domain)
|
||||||
@@ -64,11 +65,38 @@ html,
|
|||||||
body {
|
body {
|
||||||
background: #121212;
|
background: #121212;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-family: "Segoe UI", "Segoe UI Variable", "Helvetica Neue", Arial, sans-serif;
|
font-family: "Inter", "Segoe UI", "Segoe UI Variable", "Helvetica Neue", Arial, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
font-family: "Montserrat", "Inter", "Segoe UI", "Segoe UI Variable", "Helvetica Neue", Arial, sans-serif;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
p,
|
||||||
|
li,
|
||||||
|
a,
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
textarea,
|
||||||
|
button,
|
||||||
|
span {
|
||||||
|
font-family: "Inter", "Segoe UI", "Segoe UI Variable", "Helvetica Neue", Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong,
|
||||||
|
b {
|
||||||
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
@@ -183,7 +211,7 @@ img {
|
|||||||
.header__nav a {
|
.header__nav a {
|
||||||
color: rgba(255, 255, 255, 0.8);
|
color: rgba(255, 255, 255, 0.8);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 500;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
transition: color 0.2s ease;
|
transition: color 0.2s ease;
|
||||||
}
|
}
|
||||||
@@ -272,7 +300,7 @@ img {
|
|||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
background: rgba(41, 49, 51, 0.6);
|
background: rgba(41, 49, 51, 0.6);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 500;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
|
transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
|
||||||
@@ -367,7 +395,7 @@ img {
|
|||||||
}
|
}
|
||||||
.infrastructure .section__head h2 {
|
.infrastructure .section__head h2 {
|
||||||
font-size: 48px;
|
font-size: 48px;
|
||||||
font-weight: 600;
|
font-weight: 700;
|
||||||
line-height: 1.05;
|
line-height: 1.05;
|
||||||
}
|
}
|
||||||
.infrastructure .section__head p {
|
.infrastructure .section__head p {
|
||||||
@@ -554,24 +582,63 @@ img {
|
|||||||
|
|
||||||
.service-card {
|
.service-card {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
min-height: 72px;
|
gap: 10px;
|
||||||
padding: 12px 18px;
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
min-height: 152px;
|
||||||
|
padding: 20px;
|
||||||
border: 1px solid rgba(207, 23, 23, 0.45);
|
border: 1px solid rgba(207, 23, 23, 0.45);
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
background: #1d252b;
|
background: #1d252b;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 700;
|
|
||||||
line-height: 1.2;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
|
transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
|
||||||
}
|
}
|
||||||
.service-card:hover {
|
.service-card__title {
|
||||||
|
display: block;
|
||||||
|
font-family: "Montserrat", "Inter", "Segoe UI", "Segoe UI Variable", "Helvetica Neue", Arial, sans-serif;
|
||||||
|
font-size: 21px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.15;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
transition: opacity 0.25s ease, transform 0.25s ease;
|
||||||
|
}
|
||||||
|
.service-card__description {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 2;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 16px 18px;
|
||||||
|
text-align: center;
|
||||||
|
background: rgba(7, 10, 12, 0.84);
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(10px);
|
||||||
|
color: rgba(255, 255, 255, 0.7);
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.45;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: opacity 0.25s ease, transform 0.25s ease;
|
||||||
|
}
|
||||||
|
.service-card:hover, .service-card:focus-visible {
|
||||||
transform: translateY(-3px);
|
transform: translateY(-3px);
|
||||||
border-color: rgba(207, 23, 23, 0.75);
|
border-color: rgba(207, 23, 23, 0.75);
|
||||||
background: #222c33;
|
background: #222c33;
|
||||||
|
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
.service-card:hover .service-card__title, .service-card:focus-visible .service-card__title {
|
||||||
|
opacity: 0.25;
|
||||||
|
transform: scale(0.98);
|
||||||
|
}
|
||||||
|
.service-card:hover .service-card__description, .service-card:focus-visible .service-card__description {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pricing {
|
.pricing {
|
||||||
@@ -603,7 +670,6 @@ img {
|
|||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pricing-item {
|
.pricing-item {
|
||||||
background: rgba(18, 18, 18, 0.4);
|
background: rgba(18, 18, 18, 0.4);
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
@@ -736,42 +802,100 @@ img {
|
|||||||
.booking h2 {
|
.booking h2 {
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
font-size: 48px;
|
font-size: 48px;
|
||||||
font-weight: 600;
|
font-weight: 700;
|
||||||
line-height: 1.02;
|
line-height: 1.02;
|
||||||
}
|
}
|
||||||
.booking p {
|
.booking p {
|
||||||
margin-bottom: 32px;
|
margin-bottom: 32px;
|
||||||
color: rgba(255, 255, 255, 0.8);
|
color: rgba(255, 255, 255, 0.8);
|
||||||
font-size: 16px;
|
font-size: 18px;
|
||||||
|
font-weight: 500;
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
}
|
}
|
||||||
.booking form {
|
.booking form {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 16px;
|
gap: 14px;
|
||||||
}
|
}
|
||||||
.booking form .btn {
|
.booking__field {
|
||||||
width: 100%;
|
display: flex;
|
||||||
height: 60px;
|
flex-direction: column;
|
||||||
margin-top: 4px;
|
gap: 8px;
|
||||||
padding: 0 24px;
|
|
||||||
}
|
}
|
||||||
.booking input {
|
.booking__field label {
|
||||||
|
color: rgba(255, 255, 255, 0.88);
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.25;
|
||||||
|
}
|
||||||
|
.booking__field .required-mark {
|
||||||
|
color: #cf1717;
|
||||||
|
}
|
||||||
|
.booking__submit {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 72px;
|
height: 64px;
|
||||||
|
margin-top: 10px;
|
||||||
padding: 0 24px;
|
padding: 0 24px;
|
||||||
|
font-size: 19px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
.booking__consent {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 10px;
|
||||||
|
margin-top: 2px;
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.45;
|
||||||
|
}
|
||||||
|
.booking__consent input[type=checkbox] {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
margin-top: 2px;
|
||||||
|
accent-color: #cf1717;
|
||||||
|
flex: 0 0 18px;
|
||||||
|
}
|
||||||
|
.booking__consent a {
|
||||||
|
color: #ffd2d2;
|
||||||
|
text-decoration: underline;
|
||||||
|
text-underline-offset: 2px;
|
||||||
|
}
|
||||||
|
.booking input,
|
||||||
|
.booking select,
|
||||||
|
.booking textarea {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 20px;
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
border-radius: 14px;
|
border-radius: 14px;
|
||||||
background: rgba(18, 18, 18, 0.35);
|
background: rgba(18, 18, 18, 0.35);
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 18px;
|
font-weight: 400;
|
||||||
|
line-height: 1.35;
|
||||||
|
outline: none;
|
||||||
|
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||||
}
|
}
|
||||||
.booking input::placeholder {
|
.booking input:focus,
|
||||||
|
.booking select:focus,
|
||||||
|
.booking textarea:focus {
|
||||||
|
border-color: rgba(207, 23, 23, 0.85);
|
||||||
|
box-shadow: 0 0 0 3px rgba(207, 23, 23, 0.25);
|
||||||
|
}
|
||||||
|
.booking input::placeholder,
|
||||||
|
.booking select::placeholder,
|
||||||
|
.booking textarea::placeholder {
|
||||||
color: rgba(255, 255, 255, 0.45);
|
color: rgba(255, 255, 255, 0.45);
|
||||||
}
|
}
|
||||||
.booking input {
|
.booking input,
|
||||||
outline: none;
|
.booking select {
|
||||||
|
height: 56px;
|
||||||
|
}
|
||||||
|
.booking textarea {
|
||||||
|
min-height: 130px;
|
||||||
|
padding: 16px 20px;
|
||||||
|
resize: vertical;
|
||||||
}
|
}
|
||||||
|
|
||||||
.contacts-card,
|
.contacts-card,
|
||||||
@@ -795,7 +919,7 @@ img {
|
|||||||
.contacts-card h3 {
|
.contacts-card h3 {
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
font-weight: 600;
|
font-weight: 700;
|
||||||
line-height: 1.05;
|
line-height: 1.05;
|
||||||
}
|
}
|
||||||
.contacts-card ul {
|
.contacts-card ul {
|
||||||
@@ -823,7 +947,7 @@ img {
|
|||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 600;
|
font-weight: 500;
|
||||||
line-height: 1.1;
|
line-height: 1.1;
|
||||||
}
|
}
|
||||||
.contacts-card__item-content span {
|
.contacts-card__item-content span {
|
||||||
@@ -835,7 +959,7 @@ img {
|
|||||||
.hours-card h4 {
|
.hours-card h4 {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 600;
|
font-weight: 700;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
}
|
}
|
||||||
.hours-card p {
|
.hours-card p {
|
||||||
@@ -844,6 +968,93 @@ img {
|
|||||||
line-height: 1.25;
|
line-height: 1.25;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.booking-modal {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 60;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
padding: 20px;
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: opacity 0.25s ease, visibility 0.25s ease;
|
||||||
|
}
|
||||||
|
.booking-modal.is-open {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
.booking-modal__overlay {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: radial-gradient(circle at 30% 10%, rgba(207, 23, 23, 0.2), transparent 55%), rgba(0, 0, 0, 0.72);
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
}
|
||||||
|
.booking-modal__content {
|
||||||
|
position: relative;
|
||||||
|
width: min(100%, 620px);
|
||||||
|
padding: 36px 30px 30px;
|
||||||
|
border: 1px solid rgba(207, 23, 23, 0.52);
|
||||||
|
border-radius: 24px;
|
||||||
|
background: linear-gradient(140deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)), linear-gradient(165deg, #202a30, #181f24 62%);
|
||||||
|
box-shadow: 0 26px 58px rgba(0, 0, 0, 0.52);
|
||||||
|
}
|
||||||
|
.booking-modal__status {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 56px;
|
||||||
|
height: 56px;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
border-radius: 16px;
|
||||||
|
background: rgba(207, 23, 23, 0.18);
|
||||||
|
border: 1px solid rgba(207, 23, 23, 0.45);
|
||||||
|
color: #ffd9d9;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
.booking-modal__title {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
padding-right: 42px;
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
.booking-modal__text {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.45;
|
||||||
|
}
|
||||||
|
.booking-modal__actions {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.booking-modal__btn {
|
||||||
|
min-width: 220px;
|
||||||
|
}
|
||||||
|
.booking-modal__close {
|
||||||
|
position: absolute;
|
||||||
|
top: 14px;
|
||||||
|
right: 14px;
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(255, 255, 255, 0.12);
|
||||||
|
color: rgba(255, 255, 255, 0.92);
|
||||||
|
font-size: 22px;
|
||||||
|
line-height: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.2s ease, transform 0.2s ease;
|
||||||
|
}
|
||||||
|
.booking-modal__close:hover {
|
||||||
|
background: rgba(207, 23, 23, 0.34);
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
border-top: 1px solid rgba(207, 23, 23, 0.1);
|
border-top: 1px solid rgba(207, 23, 23, 0.1);
|
||||||
background: #090a0f;
|
background: #090a0f;
|
||||||
@@ -865,7 +1076,7 @@ img {
|
|||||||
.footer__nav h4, .footer__contacts h4, .footer__social h4 {
|
.footer__nav h4, .footer__contacts h4, .footer__social h4 {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 600;
|
font-weight: 700;
|
||||||
line-height: 1.1;
|
line-height: 1.1;
|
||||||
}
|
}
|
||||||
.footer__nav a, .footer__contacts a, .footer__social a {
|
.footer__nav a, .footer__contacts a, .footer__social a {
|
||||||
@@ -933,7 +1144,7 @@ img {
|
|||||||
|
|
||||||
@media only screen and (max-width: 1600px) {
|
@media only screen and (max-width: 1600px) {
|
||||||
.hero__content {
|
.hero__content {
|
||||||
margin-left: 420px;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
.hero h1 {
|
.hero h1 {
|
||||||
font-size: 64px;
|
font-size: 64px;
|
||||||
@@ -1029,7 +1240,6 @@ img {
|
|||||||
}
|
}
|
||||||
.highlights__grid,
|
.highlights__grid,
|
||||||
.gallery__grid,
|
.gallery__grid,
|
||||||
.pricing__list,
|
|
||||||
.reviews__grid,
|
.reviews__grid,
|
||||||
.stats,
|
.stats,
|
||||||
.footer__top,
|
.footer__top,
|
||||||
@@ -1128,7 +1338,6 @@ img {
|
|||||||
}
|
}
|
||||||
.highlights__grid,
|
.highlights__grid,
|
||||||
.gallery__grid,
|
.gallery__grid,
|
||||||
.pricing__list,
|
|
||||||
.reviews__grid,
|
.reviews__grid,
|
||||||
.stats,
|
.stats,
|
||||||
.footer__top,
|
.footer__top,
|
||||||
@@ -1142,8 +1351,9 @@ img {
|
|||||||
.booking h2 {
|
.booking h2 {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
}
|
}
|
||||||
.booking input {
|
.booking input,
|
||||||
height: 60px;
|
.booking select {
|
||||||
|
height: 52px;
|
||||||
}
|
}
|
||||||
.contacts-card h3 {
|
.contacts-card h3 {
|
||||||
font-size: 34px;
|
font-size: 34px;
|
||||||
@@ -1163,17 +1373,15 @@ img {
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
.infrastructure .section__head h2,
|
.infrastructure .section__head h2,
|
||||||
.services .section__head h2,
|
.services .section__head h2 {
|
||||||
.pricing .section__head h2 {
|
|
||||||
font-size: 38px;
|
font-size: 38px;
|
||||||
}
|
}
|
||||||
.infrastructure .section__head p,
|
.infrastructure .section__head p,
|
||||||
.services .section__head p,
|
.services .section__head p {
|
||||||
.pricing .section__head p {
|
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
.service-card {
|
.service-card__title {
|
||||||
font-size: 17px;
|
font-size: 19px;
|
||||||
}
|
}
|
||||||
.footer__brand p {
|
.footer__brand p {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
@@ -1195,6 +1403,26 @@ img {
|
|||||||
.stats strong {
|
.stats strong {
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
}
|
}
|
||||||
|
.booking-modal__content {
|
||||||
|
padding: 28px 18px 22px;
|
||||||
|
}
|
||||||
|
.booking-modal__status {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
border-radius: 14px;
|
||||||
|
font-size: 24px;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
.booking-modal__title {
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
.booking-modal__text {
|
||||||
|
font-size: 16px;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
.booking-modal__btn {
|
||||||
|
min-width: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@media only screen and (max-width: 520px) {
|
@media only screen and (max-width: 520px) {
|
||||||
.header__inner {
|
.header__inner {
|
||||||
@@ -1239,8 +1467,18 @@ img {
|
|||||||
min-height: 260px;
|
min-height: 260px;
|
||||||
}
|
}
|
||||||
.service-card {
|
.service-card {
|
||||||
min-height: 64px;
|
min-height: 142px;
|
||||||
font-size: 16px;
|
padding: 16px;
|
||||||
|
}
|
||||||
|
.service-card__title {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
.service-card__description {
|
||||||
|
inset: 0;
|
||||||
|
padding: 14px;
|
||||||
|
opacity: 1;
|
||||||
|
font-size: 14px;
|
||||||
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
.services__cta-btn {
|
.services__cta-btn {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -1258,6 +1496,17 @@ img {
|
|||||||
height: 50px;
|
height: 50px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@media (hover: none) {
|
||||||
|
.service-card {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.service-card__description {
|
||||||
|
position: absolute;
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
*,
|
*,
|
||||||
*::before,
|
*::before,
|
||||||
|
|||||||
2
assets/css/main.min.css
vendored
2
assets/css/main.min.css
vendored
File diff suppressed because one or more lines are too long
BIN
assets/images/other/_tmp_infra.png
Normal file
BIN
assets/images/other/_tmp_infra.png
Normal file
Binary file not shown.
BIN
assets/images/other/_tmp_services.png
Normal file
BIN
assets/images/other/_tmp_services.png
Normal file
Binary file not shown.
BIN
assets/images/other/booking-section.webp
Normal file
BIN
assets/images/other/booking-section.webp
Normal file
Binary file not shown.
BIN
assets/images/other/footer-section.webp
Normal file
BIN
assets/images/other/footer-section.webp
Normal file
Binary file not shown.
BIN
assets/images/other/infrastructure-section.webp
Normal file
BIN
assets/images/other/infrastructure-section.webp
Normal file
Binary file not shown.
BIN
assets/images/other/services-section.webp
Normal file
BIN
assets/images/other/services-section.webp
Normal file
Binary file not shown.
@@ -54,3 +54,107 @@
|
|||||||
|
|
||||||
elements.forEach((element) => observer.observe(element));
|
elements.forEach((element) => observer.observe(element));
|
||||||
})();
|
})();
|
||||||
|
|
||||||
|
(() => {
|
||||||
|
const bookingForm = document.getElementById("booking-form");
|
||||||
|
const successModal = document.getElementById("booking-success-modal");
|
||||||
|
|
||||||
|
if (!bookingForm || !successModal) return;
|
||||||
|
|
||||||
|
const closeTriggers = Array.from(successModal.querySelectorAll("[data-modal-close]"));
|
||||||
|
|
||||||
|
const openModal = () => {
|
||||||
|
successModal.classList.add("is-open");
|
||||||
|
successModal.setAttribute("aria-hidden", "false");
|
||||||
|
};
|
||||||
|
|
||||||
|
const closeModal = () => {
|
||||||
|
successModal.classList.remove("is-open");
|
||||||
|
successModal.setAttribute("aria-hidden", "true");
|
||||||
|
};
|
||||||
|
|
||||||
|
const triggerAnalytics = () => {
|
||||||
|
const eventName = "заявка";
|
||||||
|
|
||||||
|
const metrikaIdRaw = bookingForm.dataset.metrikaId || document.body.dataset.metrikaId || window.YANDEX_METRIKA_ID;
|
||||||
|
const metrikaId = Number(metrikaIdRaw);
|
||||||
|
|
||||||
|
if (typeof window.ym === "function" && Number.isFinite(metrikaId) && metrikaId > 0) {
|
||||||
|
window.ym(metrikaId, "reachGoal", eventName);
|
||||||
|
}
|
||||||
|
|
||||||
|
const legacyCounterKey = Object.keys(window).find((key) => {
|
||||||
|
return key.startsWith("yaCounter") && typeof window[key]?.reachGoal === "function";
|
||||||
|
});
|
||||||
|
|
||||||
|
if (legacyCounterKey) {
|
||||||
|
window[legacyCounterKey].reachGoal(eventName);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof window.gtag === "function") {
|
||||||
|
window.gtag("event", eventName, {
|
||||||
|
event_category: "lead",
|
||||||
|
event_label: "booking_form"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (Array.isArray(window.dataLayer)) {
|
||||||
|
window.dataLayer.push({
|
||||||
|
event: eventName,
|
||||||
|
event_category: "lead",
|
||||||
|
event_label: "booking_form"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const triggerAutoReply = async (email) => {
|
||||||
|
if (!email) return;
|
||||||
|
|
||||||
|
const autoReplyEndpoint = bookingForm.dataset.autoreplyEndpoint || window.BOOKING_AUTOREPLY_ENDPOINT;
|
||||||
|
if (!autoReplyEndpoint) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
await fetch(autoReplyEndpoint, {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json"
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
email,
|
||||||
|
source: "booking-form"
|
||||||
|
})
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
// Auto-reply is optional and should not block form success.
|
||||||
|
console.error("Auto-reply request failed", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
bookingForm.addEventListener("submit", async (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
if (!bookingForm.checkValidity()) {
|
||||||
|
bookingForm.reportValidity();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const formData = new FormData(bookingForm);
|
||||||
|
const email = String(formData.get("email") || "").trim();
|
||||||
|
|
||||||
|
triggerAnalytics();
|
||||||
|
await triggerAutoReply(email);
|
||||||
|
|
||||||
|
bookingForm.reset();
|
||||||
|
openModal();
|
||||||
|
});
|
||||||
|
|
||||||
|
closeTriggers.forEach((trigger) => {
|
||||||
|
trigger.addEventListener("click", closeModal);
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener("keydown", (event) => {
|
||||||
|
if (event.key === "Escape" && successModal.classList.contains("is-open")) {
|
||||||
|
closeModal();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
|||||||
@@ -14,6 +14,33 @@ body {
|
|||||||
|
|
||||||
body {
|
body {
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
font-family: $font-heading;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
p,
|
||||||
|
li,
|
||||||
|
a,
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
textarea,
|
||||||
|
button,
|
||||||
|
span {
|
||||||
|
font-family: $font-main;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong,
|
||||||
|
b {
|
||||||
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
@@ -134,7 +161,7 @@ img {
|
|||||||
a {
|
a {
|
||||||
color: rgba(255, 255, 255, 0.8);
|
color: rgba(255, 255, 255, 0.8);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 500;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
transition: color 0.2s ease;
|
transition: color 0.2s ease;
|
||||||
|
|
||||||
@@ -242,7 +269,7 @@ img {
|
|||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
background: rgba(41, 49, 51, 0.6);
|
background: rgba(41, 49, 51, 0.6);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 500;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
|
transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
|
||||||
@@ -350,7 +377,7 @@ img {
|
|||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-size: 48px;
|
font-size: 48px;
|
||||||
font-weight: 600;
|
font-weight: 700;
|
||||||
line-height: 1.05;
|
line-height: 1.05;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -563,24 +590,68 @@ img {
|
|||||||
|
|
||||||
.service-card {
|
.service-card {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
min-height: 72px;
|
gap: 10px;
|
||||||
padding: 12px 18px;
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
min-height: 152px;
|
||||||
|
padding: 20px;
|
||||||
border: 1px solid rgba(207, 23, 23, 0.45);
|
border: 1px solid rgba(207, 23, 23, 0.45);
|
||||||
border-radius: $radius-md;
|
border-radius: $radius-md;
|
||||||
background: #1d252b;
|
background: #1d252b;
|
||||||
color: $color-text;
|
color: $color-text;
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 700;
|
|
||||||
line-height: 1.2;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
|
transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
|
||||||
|
|
||||||
&:hover {
|
&__title {
|
||||||
|
display: block;
|
||||||
|
font-family: $font-heading;
|
||||||
|
font-size: 21px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.15;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
transition: opacity 0.25s ease, transform 0.25s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__description {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 2;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 16px 18px;
|
||||||
|
text-align: center;
|
||||||
|
background: rgba(7, 10, 12, 0.84);
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(10px);
|
||||||
|
color: $color-text-muted;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.45;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: opacity 0.25s ease, transform 0.25s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus-visible {
|
||||||
transform: translateY(-3px);
|
transform: translateY(-3px);
|
||||||
border-color: rgba(207, 23, 23, 0.75);
|
border-color: rgba(207, 23, 23, 0.75);
|
||||||
background: #222c33;
|
background: #222c33;
|
||||||
|
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
|
||||||
|
|
||||||
|
.service-card__title {
|
||||||
|
opacity: 0.25;
|
||||||
|
transform: scale(0.98);
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card__description {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -757,46 +828,110 @@ img {
|
|||||||
h2 {
|
h2 {
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
font-size: 48px;
|
font-size: 48px;
|
||||||
font-weight: 600;
|
font-weight: 700;
|
||||||
line-height: 1.02;
|
line-height: 1.02;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin-bottom: 32px;
|
margin-bottom: 32px;
|
||||||
color: $color-text-soft;
|
color: $color-text-soft;
|
||||||
font-size: 16px;
|
font-size: 18px;
|
||||||
|
font-weight: 500;
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
}
|
}
|
||||||
|
|
||||||
form {
|
form {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 16px;
|
gap: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
.btn {
|
&__field {
|
||||||
width: 100%;
|
display: flex;
|
||||||
height: 60px;
|
flex-direction: column;
|
||||||
margin-top: 4px;
|
gap: 8px;
|
||||||
padding: 0 24px;
|
|
||||||
|
label {
|
||||||
|
color: rgba(255, 255, 255, 0.88);
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.25;
|
||||||
|
}
|
||||||
|
|
||||||
|
.required-mark {
|
||||||
|
color: $color-accent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
&__submit {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 72px;
|
height: 64px;
|
||||||
|
margin-top: 10px;
|
||||||
padding: 0 24px;
|
padding: 0 24px;
|
||||||
|
font-size: 19px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__consent {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 10px;
|
||||||
|
margin-top: 2px;
|
||||||
|
color: $color-text-soft;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.45;
|
||||||
|
|
||||||
|
input[type="checkbox"] {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
margin-top: 2px;
|
||||||
|
accent-color: $color-accent;
|
||||||
|
flex: 0 0 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #ffd2d2;
|
||||||
|
text-decoration: underline;
|
||||||
|
text-underline-offset: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 20px;
|
||||||
border: 1px solid $color-border;
|
border: 1px solid $color-border;
|
||||||
border-radius: $radius-sm;
|
border-radius: $radius-sm;
|
||||||
background: rgba(18, 18, 18, 0.35);
|
background: rgba(18, 18, 18, 0.35);
|
||||||
color: $color-text;
|
color: $color-text;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 18px;
|
font-weight: 400;
|
||||||
|
line-height: 1.35;
|
||||||
|
outline: none;
|
||||||
|
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: rgba(207, 23, 23, 0.85);
|
||||||
|
box-shadow: 0 0 0 3px rgba(207, 23, 23, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
&::placeholder {
|
&::placeholder {
|
||||||
color: rgba(255, 255, 255, 0.45);
|
color: rgba(255, 255, 255, 0.45);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
outline: none;
|
input,
|
||||||
|
select {
|
||||||
|
height: 56px;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
min-height: 130px;
|
||||||
|
padding: 16px 20px;
|
||||||
|
resize: vertical;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -818,7 +953,7 @@ img {
|
|||||||
h3 {
|
h3 {
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
font-weight: 600;
|
font-weight: 700;
|
||||||
line-height: 1.05;
|
line-height: 1.05;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -852,7 +987,7 @@ img {
|
|||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 600;
|
font-weight: 500;
|
||||||
line-height: 1.1;
|
line-height: 1.1;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -868,7 +1003,7 @@ img {
|
|||||||
h4 {
|
h4 {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 600;
|
font-weight: 700;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -879,6 +1014,105 @@ img {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.booking-modal {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 60;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
padding: 20px;
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: opacity 0.25s ease, visibility 0.25s ease;
|
||||||
|
|
||||||
|
&.is-open {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__overlay {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: radial-gradient(circle at 30% 10%, rgba(207, 23, 23, 0.2), transparent 55%), rgba(0, 0, 0, 0.72);
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
position: relative;
|
||||||
|
width: min(100%, 620px);
|
||||||
|
padding: 36px 30px 30px;
|
||||||
|
border: 1px solid rgba(207, 23, 23, 0.52);
|
||||||
|
border-radius: 24px;
|
||||||
|
background:
|
||||||
|
linear-gradient(140deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
|
||||||
|
linear-gradient(165deg, #202a30, #181f24 62%);
|
||||||
|
box-shadow: 0 26px 58px rgba(0, 0, 0, 0.52);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__status {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 56px;
|
||||||
|
height: 56px;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
border-radius: 16px;
|
||||||
|
background: rgba(207, 23, 23, 0.18);
|
||||||
|
border: 1px solid rgba(207, 23, 23, 0.45);
|
||||||
|
color: #ffd9d9;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
padding-right: 42px;
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
color: $color-text-soft;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.45;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__actions {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__btn {
|
||||||
|
min-width: 220px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__close {
|
||||||
|
position: absolute;
|
||||||
|
top: 14px;
|
||||||
|
right: 14px;
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(255, 255, 255, 0.12);
|
||||||
|
color: rgba(255, 255, 255, 0.92);
|
||||||
|
font-size: 22px;
|
||||||
|
line-height: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.2s ease, transform 0.2s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(207, 23, 23, 0.34);
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
border-top: 1px solid rgba(207, 23, 23, 0.1);
|
border-top: 1px solid rgba(207, 23, 23, 0.1);
|
||||||
background: #090a0f;
|
background: #090a0f;
|
||||||
@@ -907,7 +1141,7 @@ img {
|
|||||||
h4 {
|
h4 {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 600;
|
font-weight: 700;
|
||||||
line-height: 1.1;
|
line-height: 1.1;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -986,7 +1220,7 @@ img {
|
|||||||
@include respond($bp-xxl) {
|
@include respond($bp-xxl) {
|
||||||
.hero {
|
.hero {
|
||||||
&__content {
|
&__content {
|
||||||
margin-left: 420px;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
@@ -1285,8 +1519,9 @@ img {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.booking {
|
.booking {
|
||||||
input {
|
input,
|
||||||
height: 60px;
|
select {
|
||||||
|
height: 52px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1328,8 +1563,8 @@ img {
|
|||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.service-card {
|
.service-card__title {
|
||||||
font-size: 17px;
|
font-size: 19px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
@@ -1362,6 +1597,33 @@ img {
|
|||||||
.stats strong {
|
.stats strong {
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.booking-modal {
|
||||||
|
&__content {
|
||||||
|
padding: 28px 18px 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__status {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
border-radius: 14px;
|
||||||
|
font-size: 24px;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
font-size: 16px;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__btn {
|
||||||
|
min-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include respond($bp-sm) {
|
@include respond($bp-sm) {
|
||||||
@@ -1422,8 +1684,20 @@ img {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.service-card {
|
.service-card {
|
||||||
min-height: 64px;
|
min-height: 142px;
|
||||||
font-size: 16px;
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card__title {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card__description {
|
||||||
|
inset: 0;
|
||||||
|
padding: 14px;
|
||||||
|
opacity: 1;
|
||||||
|
font-size: 14px;
|
||||||
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.services__cta-btn {
|
.services__cta-btn {
|
||||||
@@ -1450,6 +1724,19 @@ img {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (hover: none) {
|
||||||
|
.service-card {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card__description {
|
||||||
|
position: absolute;
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
*,
|
*,
|
||||||
*::before,
|
*::before,
|
||||||
|
|||||||
@@ -1,3 +1,5 @@
|
|||||||
:root {
|
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Montserrat:wght@700&display=swap");
|
||||||
|
|
||||||
|
:root {
|
||||||
color-scheme: dark;
|
color-scheme: dark;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -7,7 +7,8 @@ $bp-lg: 1024px;
|
|||||||
$bp-md: 768px;
|
$bp-md: 768px;
|
||||||
$bp-sm: 520px;
|
$bp-sm: 520px;
|
||||||
|
|
||||||
$font-main: "Segoe UI", "Segoe UI Variable", "Helvetica Neue", Arial, sans-serif;
|
$font-main: "Inter", "Segoe UI", "Segoe UI Variable", "Helvetica Neue", Arial, sans-serif;
|
||||||
|
$font-heading: "Montserrat", "Inter", "Segoe UI", "Segoe UI Variable", "Helvetica Neue", Arial, sans-serif;
|
||||||
|
|
||||||
$color-bg: #121212;
|
$color-bg: #121212;
|
||||||
$color-surface: #293133;
|
$color-surface: #293133;
|
||||||
|
|||||||
102
index.html
102
index.html
@@ -204,15 +204,33 @@
|
|||||||
<p>Широкий спектр возможностей для вашего спорта</p>
|
<p>Широкий спектр возможностей для вашего спорта</p>
|
||||||
</header>
|
</header>
|
||||||
<div class="services__grid">
|
<div class="services__grid">
|
||||||
<a class="service-card" href="#booking">Аренда льда — почасовая или абонементом</a>
|
<a class="service-card" href="#booking">
|
||||||
<a class="service-card" href="#booking">Аренда залов — универсального, единоборств, хореографии, фитнес-зон</a>
|
<span class="service-card__title">Аренда льда</span>
|
||||||
<a class="service-card" href="#booking">Сборы команд «под ключ» — лёд + зал + проживание + питание</a>
|
<span class="service-card__description">Почасовая аренда и абонементы. Подберём удобные слоты для тренировок и матчей.</span>
|
||||||
<a class="service-card" href="#booking">Проведение турниров и соревнований</a>
|
</a>
|
||||||
<a class="service-card" href="#booking">Корпоративные мероприятия и тимбилдинги</a>
|
<a class="service-card" href="#booking">
|
||||||
<a class="service-card" href="#booking">Фитнес — индивидуально, абонемент, групповые занятия</a>
|
<span class="service-card__title">Аренда залов</span>
|
||||||
|
<span class="service-card__description">Универсальный, единоборств, хореографии и фитнес-зоны для команд и индивидуальных занятий.</span>
|
||||||
|
</a>
|
||||||
|
<a class="service-card" href="#booking">
|
||||||
|
<span class="service-card__title">Сборы команд под ключ</span>
|
||||||
|
<span class="service-card__description">Лёд, зал, проживание и питание в одном комплексе без лишней логистики.</span>
|
||||||
|
</a>
|
||||||
|
<a class="service-card" href="#booking">
|
||||||
|
<span class="service-card__title">Турниры и соревнования</span>
|
||||||
|
<span class="service-card__description">Подготовим площадки, организацию и инфраструктуру для событий любого уровня.</span>
|
||||||
|
</a>
|
||||||
|
<a class="service-card" href="#booking">
|
||||||
|
<span class="service-card__title">Корпоративные мероприятия</span>
|
||||||
|
<span class="service-card__description">Спортивные тимбилдинги, активные форматы и сопровождение программы под задачи компании.</span>
|
||||||
|
</a>
|
||||||
|
<a class="service-card" href="#booking">
|
||||||
|
<span class="service-card__title">Фитнес</span>
|
||||||
|
<span class="service-card__description">Индивидуальные тренировки, абонементы и групповые занятия с гибким расписанием.</span>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="services__cta">
|
<div class="services__cta">
|
||||||
<a class="btn services__cta-btn" href="#">Подобрать формат и время</a>
|
<a class="btn services__cta-btn" href="#booking">Подобрать формат и время</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -300,22 +318,49 @@
|
|||||||
<section class="section booking" id="booking">
|
<section class="section booking" id="booking">
|
||||||
<div class="container booking__wrap">
|
<div class="container booking__wrap">
|
||||||
<div class="booking__form">
|
<div class="booking__form">
|
||||||
<h2>Забронировать время</h2>
|
<h2>Оставьте заявку — подберём площадку и время</h2>
|
||||||
<p>Заполните форму, и мы свяжемся с вами в ближайшее время для подтверждения заявки.</p>
|
<p>Перезвоним в течение 15 минут в рабочее время и пришлём расчёт</p>
|
||||||
<form action="#" method="post">
|
<form id="booking-form" action="#" method="post" novalidate data-metrika-id="" data-autoreply-endpoint="">
|
||||||
<label>
|
<div class="booking__field">
|
||||||
<input type="text" name="sport" placeholder="Вид спорта">
|
<label for="booking-name">Имя <span class="required-mark">*</span></label>
|
||||||
|
<input id="booking-name" type="text" name="name" autocomplete="name" placeholder="Введите имя" required>
|
||||||
|
</div>
|
||||||
|
<div class="booking__field">
|
||||||
|
<label for="booking-phone">Телефон <span class="required-mark">*</span></label>
|
||||||
|
<input id="booking-phone" type="tel" name="phone" autocomplete="tel" placeholder="+7 (___) ___-__-__" required>
|
||||||
|
</div>
|
||||||
|
<div class="booking__field">
|
||||||
|
<label for="booking-email">E-mail (для расчёта)</label>
|
||||||
|
<input id="booking-email" type="email" name="email" autocomplete="email" placeholder="example@mail.ru">
|
||||||
|
</div>
|
||||||
|
<div class="booking__field">
|
||||||
|
<label for="booking-interest">Что интересует <span class="required-mark">*</span></label>
|
||||||
|
<select id="booking-interest" name="interest" required>
|
||||||
|
<option value="" selected disabled>Выберите вариант</option>
|
||||||
|
<option value="Лёд">Лёд</option>
|
||||||
|
<option value="Универсальный зал">Универсальный зал</option>
|
||||||
|
<option value="Зал единоборств">Зал единоборств</option>
|
||||||
|
<option value="Зал хореографии">Зал хореографии</option>
|
||||||
|
<option value="Фитнес">Фитнес</option>
|
||||||
|
<option value="Сборы команды">Сборы команды</option>
|
||||||
|
<option value="Турнир">Турнир</option>
|
||||||
|
<option value="Корпоратив">Корпоратив</option>
|
||||||
|
<option value="Другое">Другое</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="booking__field">
|
||||||
|
<label for="booking-date">Удобная дата</label>
|
||||||
|
<input id="booking-date" type="date" name="date">
|
||||||
|
</div>
|
||||||
|
<div class="booking__field">
|
||||||
|
<label for="booking-comment">Комментарий</label>
|
||||||
|
<textarea id="booking-comment" name="comment" placeholder="Кратко опишите запрос"></textarea>
|
||||||
|
</div>
|
||||||
|
<label class="booking__consent" for="booking-consent">
|
||||||
|
<input id="booking-consent" type="checkbox" name="consent" required>
|
||||||
|
<span>Я согласен(а) с <a href="#" target="_blank" rel="noopener noreferrer">политикой обработки ПДн</a> <span class="required-mark">*</span></span>
|
||||||
</label>
|
</label>
|
||||||
<label>
|
<button class="btn booking__submit" type="submit">Отправить заявку</button>
|
||||||
<input type="text" name="date" placeholder="Желаемая дата">
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
<input type="text" name="name" placeholder="Ваше имя">
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
<input type="tel" name="phone" placeholder="Телефон">
|
|
||||||
</label>
|
|
||||||
<button class="btn" type="submit">Отправить заявку</button>
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -367,6 +412,19 @@
|
|||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
<div class="booking-modal" id="booking-success-modal" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="booking-success-title">
|
||||||
|
<button class="booking-modal__overlay" type="button" data-modal-close aria-label="Закрыть окно"></button>
|
||||||
|
<div class="booking-modal__content">
|
||||||
|
<button class="booking-modal__close" type="button" data-modal-close aria-label="Закрыть окно">×</button>
|
||||||
|
<div class="booking-modal__status" aria-hidden="true">✓</div>
|
||||||
|
<h2 class="booking-modal__title" id="booking-success-title">Заявка отправлена</h2>
|
||||||
|
<p class="booking-modal__text">Перезвоним в течение 15 минут.</p>
|
||||||
|
<div class="booking-modal__actions">
|
||||||
|
<button class="btn booking-modal__btn" type="button" data-modal-close>Понятно</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<footer class="footer">
|
<footer class="footer">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="footer__top">
|
<div class="footer__top">
|
||||||
|
|||||||
Reference in New Issue
Block a user