adcovn/olimparena
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: chaged blocks

Browse Source
This commit is contained in:
Ignat Karelov
2026-05-15 14:29:01 +03:00
parent 29d81800ce
commit a72a42031a
13 changed files with 802 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

335
assets/css/main.css
View File

@@ -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/
v2.0 | 20110126
License: none (public domain)
@@ -64,11 +65,38 @@ html,
body {
background: #121212;
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 {
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 {
@@ -183,7 +211,7 @@ img {
.header__nav a {
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
font-weight: 600;
font-weight: 500;
line-height: 20px;
transition: color 0.2s ease;
}
@@ -272,7 +300,7 @@ img {
border-radius: 999px;
background: rgba(41, 49, 51, 0.6);
font-size: 14px;
font-weight: 600;
font-weight: 500;
line-height: 20px;
white-space: nowrap;
transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
@@ -367,7 +395,7 @@ img {
}
.infrastructure .section__head h2 {
font-size: 48px;
font-weight: 600;
font-weight: 700;
line-height: 1.05;
}
.infrastructure .section__head p {
@@ -554,24 +582,63 @@ img {
.service-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 72px;
padding: 12px 18px;
gap: 10px;
position: relative;
overflow: hidden;
min-height: 152px;
padding: 20px;
border: 1px solid rgba(207, 23, 23, 0.45);
border-radius: 16px;
background: #1d252b;
color: #ffffff;
font-size: 18px;
font-weight: 700;
line-height: 1.2;
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);
border-color: rgba(207, 23, 23, 0.75);
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 {
@@ -603,7 +670,6 @@ img {
font-size: 18px;
line-height: 1.2;
}
.pricing-item {
background: rgba(18, 18, 18, 0.4);
border: 1px solid rgba(255, 255, 255, 0.1);
@@ -736,42 +802,100 @@ img {
.booking h2 {
margin-bottom: 24px;
font-size: 48px;
font-weight: 600;
font-weight: 700;
line-height: 1.02;
}
.booking p {
margin-bottom: 32px;
color: rgba(255, 255, 255, 0.8);
font-size: 16px;
font-size: 18px;
font-weight: 500;
line-height: 1.4;
}
.booking form {
display: flex;
flex-direction: column;
gap: 16px;
gap: 14px;
}
.booking form .btn {
width: 100%;
height: 60px;
margin-top: 4px;
padding: 0 24px;
.booking__field {
display: flex;
flex-direction: column;
gap: 8px;
}
.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%;
height: 72px;
height: 64px;
margin-top: 10px;
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-radius: 14px;
background: rgba(18, 18, 18, 0.35);
color: #ffffff;
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);
}
.booking input {
outline: none;
.booking input,
.booking select {
height: 56px;
}
.booking textarea {
min-height: 130px;
padding: 16px 20px;
resize: vertical;
}
.contacts-card,
@@ -795,7 +919,7 @@ img {
.contacts-card h3 {
margin-bottom: 30px;
font-size: 24px;
font-weight: 600;
font-weight: 700;
line-height: 1.05;
}
.contacts-card ul {
@@ -823,7 +947,7 @@ img {
display: block;
margin-bottom: 8px;
font-size: 16px;
font-weight: 600;
font-weight: 500;
line-height: 1.1;
}
.contacts-card__item-content span {
@@ -835,7 +959,7 @@ img {
.hours-card h4 {
margin-bottom: 16px;
font-size: 16px;
font-weight: 600;
font-weight: 700;
line-height: 1.2;
}
.hours-card p {
@@ -844,6 +968,93 @@ img {
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 {
border-top: 1px solid rgba(207, 23, 23, 0.1);
background: #090a0f;
@@ -865,7 +1076,7 @@ img {
.footer__nav h4, .footer__contacts h4, .footer__social h4 {
margin-bottom: 16px;
font-size: 16px;
font-weight: 600;
font-weight: 700;
line-height: 1.1;
}
.footer__nav a, .footer__contacts a, .footer__social a {
@@ -933,7 +1144,7 @@ img {
@media only screen and (max-width: 1600px) {
.hero__content {
margin-left: 420px;
margin-left: auto;
}
.hero h1 {
font-size: 64px;
@@ -1029,7 +1240,6 @@ img {
}
.highlights__grid,
.gallery__grid,
.pricing__list,
.reviews__grid,
.stats,
.footer__top,
@@ -1128,7 +1338,6 @@ img {
}
.highlights__grid,
.gallery__grid,
.pricing__list,
.reviews__grid,
.stats,
.footer__top,
@@ -1142,8 +1351,9 @@ img {
.booking h2 {
font-size: 24px;
}
.booking input {
height: 60px;
.booking input,
.booking select {
height: 52px;
}
.contacts-card h3 {
font-size: 34px;
@@ -1163,17 +1373,15 @@ img {
font-size: 16px;
}
.infrastructure .section__head h2,
.services .section__head h2,
.pricing .section__head h2 {
.services .section__head h2 {
font-size: 38px;
}
.infrastructure .section__head p,
.services .section__head p,
.pricing .section__head p {
.services .section__head p {
font-size: 20px;
}
.service-card {
font-size: 17px;
.service-card__title {
font-size: 19px;
}
.footer__brand p {
font-size: 16px;
@@ -1195,6 +1403,26 @@ img {
.stats strong {
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) {
.header__inner {
@@ -1239,8 +1467,18 @@ img {
min-height: 260px;
}
.service-card {
min-height: 64px;
font-size: 16px;
min-height: 142px;
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 {
width: 100%;
@@ -1258,6 +1496,17 @@ img {
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) {
*,
*::before,

2
assets/css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

BIN
assets/images/other/_tmp_infra.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

BIN
assets/images/other/_tmp_services.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
assets/images/other/booking-section.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
assets/images/other/footer-section.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
assets/images/other/infrastructure-section.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
assets/images/other/services-section.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

104
assets/js/main.js
View File

@@ -54,3 +54,107 @@
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();
}
});
})();

353
assets/scss/_base.scss
View File

@@ -14,6 +14,33 @@ body {
body {
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 {
@@ -134,7 +161,7 @@ img {
a {
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
font-weight: 600;
font-weight: 500;
line-height: 20px;
transition: color 0.2s ease;
@@ -242,7 +269,7 @@ img {
border-radius: 999px;
background: rgba(41, 49, 51, 0.6);
font-size: 14px;
font-weight: 600;
font-weight: 500;
line-height: 20px;
white-space: nowrap;
transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
@@ -350,7 +377,7 @@ img {
h2 {
font-size: 48px;
font-weight: 600;
font-weight: 700;
line-height: 1.05;
}
@@ -563,24 +590,68 @@ img {
.service-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 72px;
padding: 12px 18px;
gap: 10px;
position: relative;
overflow: hidden;
min-height: 152px;
padding: 20px;
border: 1px solid rgba(207, 23, 23, 0.45);
border-radius: $radius-md;
background: #1d252b;
color: $color-text;
font-size: 18px;
font-weight: 700;
line-height: 1.2;
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);
border-color: rgba(207, 23, 23, 0.75);
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 {
margin-bottom: 24px;
font-size: 48px;
font-weight: 600;
font-weight: 700;
line-height: 1.02;
}
p {
margin-bottom: 32px;
color: $color-text-soft;
font-size: 16px;
font-size: 18px;
font-weight: 500;
line-height: 1.4;
}
form {
display: flex;
flex-direction: column;
gap: 16px;
gap: 14px;
}
.btn {
width: 100%;
height: 60px;
margin-top: 4px;
padding: 0 24px;
&__field {
display: flex;
flex-direction: column;
gap: 8px;
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%;
height: 72px;
height: 64px;
margin-top: 10px;
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-radius: $radius-sm;
background: rgba(18, 18, 18, 0.35);
color: $color-text;
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 {
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 {
margin-bottom: 30px;
font-size: 24px;
font-weight: 600;
font-weight: 700;
line-height: 1.05;
}
@@ -852,7 +987,7 @@ img {
display: block;
margin-bottom: 8px;
font-size: 16px;
font-weight: 600;
font-weight: 500;
line-height: 1.1;
}
@@ -868,7 +1003,7 @@ img {
h4 {
margin-bottom: 16px;
font-size: 16px;
font-weight: 600;
font-weight: 700;
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 {
border-top: 1px solid rgba(207, 23, 23, 0.1);
background: #090a0f;
@@ -907,7 +1141,7 @@ img {
h4 {
margin-bottom: 16px;
font-size: 16px;
font-weight: 600;
font-weight: 700;
line-height: 1.1;
}
@@ -986,7 +1220,7 @@ img {
@include respond($bp-xxl) {
.hero {
&__content {
margin-left: 420px;
margin-left: auto;
}
h1 {
@@ -1285,8 +1519,9 @@ img {
}
.booking {
input {
height: 60px;
input,
select {
height: 52px;
}
}
@@ -1328,8 +1563,8 @@ img {
font-size: 20px;
}
.service-card {
font-size: 17px;
.service-card__title {
font-size: 19px;
}
.footer {
@@ -1362,6 +1597,33 @@ img {
.stats strong {
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) {
@@ -1422,8 +1684,20 @@ img {
}
.service-card {
min-height: 64px;
font-size: 16px;
min-height: 142px;
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 {
@@ -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) {
*,
*::before,

4
assets/scss/_fonts.scss
View File

@@ -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;
}

3
assets/scss/_vars.scss
View File

@@ -7,7 +7,8 @@ $bp-lg: 1024px;
$bp-md: 768px;
$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-surface: #293133;

102
index.html
View File

@@ -204,15 +204,33 @@
<p>Широкий спектр возможностей для вашего спорта</p>
</header>
<div class="services__grid">
<a class="service-card" href="#booking">Аренда льда — почасовая или абонементом</a>
<a class="service-card" href="#booking">Аренда залов — универсального, единоборств, хореографии, фитнес-зон</a>
<a class="service-card" href="#booking">Сборы команд «под ключ» — лёд + зал + проживание + питание</a>
<a class="service-card" href="#booking">Проведение турниров и соревнований</a>
<a class="service-card" href="#booking">Корпоративные мероприятия и тимбилдинги</a>
<a class="service-card" href="#booking">Фитнес — индивидуально, абонемент, групповые занятия</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>
<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 class="services__cta">
<a class="btn services__cta-btn" href="#">Подобрать формат и время</a>
<a class="btn services__cta-btn" href="#booking">Подобрать формат и время</a>
</div>
</div>
</section>
@@ -300,22 +318,49 @@
<section class="section booking" id="booking">
<div class="container booking__wrap">
<div class="booking__form">
<h2>Забронировать время</h2>
<p>Заполните форму, и мы свяжемся с вами в ближайшее время для подтверждения заявки.</p>
<form action="#" method="post">
<label>
<input type="text" name="sport" placeholder="Вид спорта">
<h2>Оставьте заявку — подберём площадку и время</h2>
<p>Перезвоним в течение 15 минут в рабочее время и пришлём расчёт</p>
<form id="booking-form" action="#" method="post" novalidate data-metrika-id="" data-autoreply-endpoint="">
<div class="booking__field">
<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>
<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>
<button class="btn booking__submit" type="submit">Отправить заявку</button>
</form>
</div>
@@ -367,6 +412,19 @@
</section>
</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">
<div class="container">
<div class="footer__top">