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

feat: added new blocks/form changed #13

Merged
elarmethu merged 1 commits from style/edit into main 2026-05-22 11:01:44 +00:00
Conversation 0 Commits 1 Files Changed 6 +690 -144
6 changed files with 690 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

272
assets/css/main.css
View File

@@ -713,17 +713,11 @@ img {
filter: saturate(1.08); filter: saturate(1.08);
} }
.reviews { .facts {
background: #121212; background: #121212;
background-image: url(../images/bg-pattern.svg); background-image: url(../images/bg-pattern.svg);
background-position: center; background-position: center;
} }
.reviews__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px;
margin-bottom: 64px;
}
.review-card { .review-card {
background: rgba(18, 18, 18, 0.4); background: rgba(18, 18, 18, 0.4);
@@ -762,33 +756,40 @@ img {
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px; gap: 32px;
} }
.stats article { .stats__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);
border-radius: 16px; border-radius: 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
border: 0; border: 0;
background: #cf1717; background: #cf1717;
min-height: 144px; min-height: 248px;
padding: 32px; padding: 34px 24px;
text-align: center; text-align: center;
transition: transform 0.3s ease; transition: transform 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
} }
.stats article:hover { .stats__item:hover {
transform: translateY(-5px); transform: translateY(-5px);
} }
.stats strong { .stats strong {
display: block; display: block;
margin-bottom: 8px; margin-bottom: 14px;
color: #ffffff; color: #ffffff;
font-size: 48px; font-size: clamp(80px, 9vw, 120px);
font-weight: 700; font-weight: 700;
line-height: 1; line-height: 0.9;
letter-spacing: 0.01em;
} }
.stats span { .stats span {
color: #ffffff; color: #ffffff;
font-size: 16px; font-size: 19px;
line-height: 1.3; font-weight: 500;
line-height: 1.25;
max-width: 320px;
} }
.booking { .booking {
@@ -950,11 +951,89 @@ img {
font-weight: 500; font-weight: 500;
line-height: 1.1; line-height: 1.1;
} }
.contacts-card__item-content a {
color: rgba(255, 255, 255, 0.9);
font-size: 16px;
line-height: 1.4;
text-decoration: underline;
text-underline-offset: 2px;
}
.contacts-card__item-content span { .contacts-card__item-content span {
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
font-size: 16px; font-size: 16px;
line-height: 1.45; line-height: 1.45;
} }
.contacts-card__item-content small {
display: block;
margin-top: 6px;
color: rgba(255, 255, 255, 0.6);
font-size: 13px;
line-height: 1.35;
}
.contacts-card__links {
margin-top: 24px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.contacts-card__messenger {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.92);
text-decoration: none;
transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.contacts-card__messenger:hover {
transform: translateY(-1px);
border-color: rgba(207, 23, 23, 0.7);
background: rgba(207, 23, 23, 0.18);
}
.contacts-card__messenger--secondary {
background: rgba(255, 255, 255, 0.02);
}
.contacts-card__action-icon {
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.contacts-card__action-icon svg {
width: 20px;
height: 20px;
display: block;
color: currentColor;
opacity: 0.9;
}
.contacts-card__links--social {
margin-top: 14px;
}
.contacts-card__links--social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.85);
background: rgba(255, 255, 255, 0.03);
transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
text-decoration: none;
}
.contacts-card__links--social a:hover {
border-color: rgba(207, 23, 23, 0.8);
color: #ffffff;
background: rgba(207, 23, 23, 0.2);
}
.hours-card h4 { .hours-card h4 {
margin-bottom: 16px; margin-bottom: 16px;
@@ -968,6 +1047,64 @@ img {
line-height: 1.25; line-height: 1.25;
} }
.map-card__embed {
width: 100%;
margin-top: 18px;
margin-bottom: 16px;
overflow: hidden;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.15);
}
.map-card__embed iframe {
width: 100%;
min-height: 260px;
border: 0;
display: block;
}
.map-card__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.map-card__actions a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
background: rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}
.map-card__actions a:hover {
transform: translateY(-1px);
border-color: rgba(207, 23, 23, 0.75);
background: rgba(207, 23, 23, 0.18);
}
.map-card__action-icon {
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #ffd5d5;
}
.map-card__action-icon svg {
width: 20px;
height: 20px;
display: block;
}
.map-card__route {
min-width: 44px;
width: 44px;
height: 44px;
padding: 0;
box-shadow: none;
}
.booking-modal { .booking-modal {
position: fixed; position: fixed;
inset: 0; inset: 0;
@@ -1073,19 +1210,19 @@ img {
font-size: 14px; font-size: 14px;
line-height: 1.28; line-height: 1.28;
} }
.footer__nav h4, .footer__contacts h4, .footer__social h4 { .footer__nav h4, .footer__contacts h4 {
margin-bottom: 16px; margin-bottom: 16px;
font-size: 16px; font-size: 16px;
font-weight: 700; 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 {
display: block; display: block;
color: rgba(255, 255, 255, 0.65); color: rgba(255, 255, 255, 0.65);
font-size: 14px; font-size: 14px;
line-height: 1.35; line-height: 1.35;
} }
.footer__nav span, .footer__contacts span, .footer__social span { .footer__nav span, .footer__contacts span {
display: block; display: block;
color: rgba(255, 255, 255, 0.65); color: rgba(255, 255, 255, 0.65);
font-size: 14px; font-size: 14px;
@@ -1093,35 +1230,36 @@ img {
} }
.footer__nav a + a, .footer__nav a + a,
.footer__nav span + span, .footer__contacts a + a, .footer__nav span + span, .footer__contacts a + a,
.footer__contacts span + span, .footer__social a + a, .footer__contacts span + span {
.footer__social span + span {
margin-top: 10px; margin-top: 10px;
} }
.footer__socials { .footer__socials {
display: flex; display: flex;
flex-wrap: wrap;
gap: 12px; gap: 12px;
} }
.footer__socials a { .footer__socials a {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 58px; width: 46px;
height: 58px; height: 46px;
border: 1px solid rgba(207, 23, 23, 0.5); border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 10px; border-radius: 12px;
background: rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.92); color: rgba(255, 255, 255, 0.92);
transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease; transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
margin-top: 0 !important; margin-top: 0 !important;
} }
.footer__socials a svg { .footer__socials a svg {
width: 24px; width: 22px;
height: 24px; height: 22px;
display: block; display: block;
} }
.footer__socials a:hover { .footer__socials a:hover {
transform: translateY(-2px); transform: translateY(-2px);
border-color: rgba(207, 23, 23, 0.85); border-color: rgba(207, 23, 23, 0.75);
background: rgba(207, 23, 23, 0.15); background: rgba(207, 23, 23, 0.18);
} }
.footer__bottom { .footer__bottom {
display: flex; display: flex;
@@ -1139,7 +1277,46 @@ img {
} }
.footer__legal { .footer__legal {
display: flex; display: flex;
gap: 34px; flex-wrap: wrap;
gap: 10px 24px;
}
.footer__messengers {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.footer__messengers a {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 12px;
color: rgba(255, 255, 255, 0.85) !important;
background: rgba(255, 255, 255, 0.03);
margin-top: 0 !important;
text-decoration: none !important;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.footer__messengers a:hover {
border-color: rgba(207, 23, 23, 0.72);
background: rgba(207, 23, 23, 0.16);
}
.footer__messenger-icon {
width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.footer__messenger-icon svg {
width: 16px;
height: 16px;
display: block;
color: currentColor;
} }
@media only screen and (max-width: 1600px) { @media only screen and (max-width: 1600px) {
@@ -1195,15 +1372,14 @@ img {
font-size: 16px; font-size: 16px;
} }
.footer__brand p { .footer__brand p {
font-size: 28px; font-size: 16px;
} }
.footer__nav h4, .footer__contacts h4, .footer__social h4 { .footer__nav h4, .footer__contacts h4 {
font-size: 16px; font-size: 16px;
} }
.footer__nav a, .footer__nav a,
.footer__nav span, .footer__contacts a, .footer__nav span, .footer__contacts a,
.footer__contacts span, .footer__social a, .footer__contacts span {
.footer__social span {
font-size: 14px; font-size: 14px;
} }
.footer__bottom span, .footer__bottom span,
@@ -1282,19 +1458,18 @@ img {
gap: 28px; gap: 28px;
} }
.footer__brand p { .footer__brand p {
font-size: 22px; font-size: 16px;
margin-top: 18px; margin-top: 18px;
} }
.footer__nav h4, .footer__contacts h4, .footer__social h4 { .footer__nav h4, .footer__contacts h4 {
font-size: 30px; font-size: 18px;
margin-bottom: 16px; margin-bottom: 16px;
} }
.footer__nav a, .footer__nav a,
.footer__nav span, .footer__contacts a, .footer__nav span, .footer__contacts a,
.footer__contacts span, .footer__social a, .footer__contacts span {
.footer__social span { font-size: 15px;
font-size: 22px; line-height: 1.4;
line-height: 1.32;
} }
.footer__bottom span, .footer__bottom span,
.footer__bottom a { .footer__bottom a {
@@ -1387,13 +1562,12 @@ img {
font-size: 16px; font-size: 16px;
max-width: 100%; max-width: 100%;
} }
.footer__nav h4, .footer__contacts h4, .footer__social h4 { .footer__nav h4, .footer__contacts h4 {
font-size: 16px; font-size: 16px;
} }
.footer__nav a, .footer__nav a,
.footer__nav span, .footer__contacts a, .footer__nav span, .footer__contacts a,
.footer__contacts span, .footer__social a, .footer__contacts span {
.footer__social span {
font-size: 16px; font-size: 16px;
} }
.footer__bottom span, .footer__bottom span,
@@ -1401,7 +1575,7 @@ img {
font-size: 14px; font-size: 14px;
} }
.stats strong { .stats strong {
font-size: 40px; font-size: clamp(66px, 17vw, 96px);
} }
.booking-modal__content { .booking-modal__content {
padding: 28px 18px 22px; padding: 28px 18px 22px;
@@ -1457,7 +1631,7 @@ img {
.info-card, .info-card,
.feature-card, .feature-card,
.review-card, .review-card,
.stats article, .stats__item,
.contacts-card, .contacts-card,
.hours-card, .hours-card,
.object-card__content { .object-card__content {
@@ -1492,8 +1666,8 @@ img {
gap: 20px; gap: 20px;
} }
.footer__socials a { .footer__socials a {
width: 50px; width: 44px;
height: 50px; height: 44px;
} }
} }
@media (hover: none) { @media (hover: none) {

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

File diff suppressed because one or more lines are too long

33
assets/images/svg-sprites.svg
View File

@@ -43,4 +43,37 @@
<path d="M20 4H4C2.89543 4 2 4.89543 2 6V18C2 19.1046 2.89543 20 4 20H20C21.1046 20 22 19.1046 22 18V6C22 4.89543 21.1046 4 20 4Z" stroke="#CF1717" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M20 4H4C2.89543 4 2 4.89543 2 6V18C2 19.1046 2.89543 20 4 20H20C21.1046 20 22 19.1046 22 18V6C22 4.89543 21.1046 4 20 4Z" stroke="#CF1717" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M22 7L13.03 12.7C12.7213 12.8934 12.3643 12.996 12 12.996C11.6357 12.996 11.2787 12.8934 10.97 12.7L2 7" stroke="#CF1717" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M22 7L13.03 12.7C12.7213 12.8934 12.3643 12.996 12 12.996C11.6357 12.996 11.2787 12.8934 10.97 12.7L2 7" stroke="#CF1717" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</symbol> </symbol>
<symbol id="icon-time" viewBox="0 0 24 24" fill="none">
<circle cx="12" cy="12" r="9" stroke="#CF1717" stroke-width="2"/>
<path d="M12 7V12L15 14" stroke="#CF1717" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</symbol>
<symbol id="icon-whatsapp" viewBox="0 0 24 24" fill="none">
<path d="M20.521 3.479A11.91 11.91 0 0012.037 0C5.488 0 .137 5.35.137 11.9c0 2.096.548 4.141 1.588 5.946L0 24l6.307-1.66a11.844 11.844 0 005.73 1.46h.005c6.549 0 11.9-5.35 11.9-11.9a11.833 11.833 0 00-3.421-8.421zm-8.484 18.31h-.004a9.86 9.86 0 01-5.018-1.371l-.36-.213-3.742.984.998-3.646-.234-.374a9.88 9.88 0 01-1.51-5.27c.002-5.457 4.442-9.896 9.904-9.896a9.83 9.83 0 017.01 2.903 9.833 9.833 0 012.89 6.997c-.003 5.458-4.443 9.886-9.934 9.886z" fill="currentColor"/>
<path d="M17.457 14.572c-.298-.15-1.764-.87-2.037-.968-.273-.1-.472-.15-.67.15-.198.298-.768.968-.943 1.166-.174.2-.347.224-.645.075-.298-.149-1.257-.463-2.395-1.477-.885-.788-1.483-1.762-1.657-2.06-.174-.299-.019-.46.131-.61.135-.134.298-.348.447-.521.15-.174.199-.299.299-.498.099-.199.05-.373-.025-.523-.075-.149-.67-1.614-.918-2.211-.241-.58-.486-.502-.67-.511-.174-.008-.372-.01-.57-.01a1.097 1.097 0 00-.794.373c-.273.298-1.042 1.017-1.042 2.48 0 1.465 1.067 2.88 1.216 3.078.149.199 2.103 3.213 5.095 4.505.712.307 1.266.49 1.699.627.713.227 1.362.195 1.875.118.572-.085 1.764-.72 2.013-1.414.248-.695.248-1.29.173-1.414-.074-.125-.273-.2-.57-.349z" fill="currentColor"/>
</symbol>
<symbol id="icon-telegram" viewBox="0 0 24 24" fill="none">
<path d="M9.347 14.695l-.394 5.54c.564 0 .808-.242 1.101-.533l2.64-2.52 5.472 4.005c1.004.558 1.712.264 1.983-.924L23.74 3.35c.355-1.453-.525-2.022-1.503-1.658L1.09 9.84c-1.443.563-1.421 1.367-.246 1.73l5.406 1.686L18.806 5.4c.591-.39 1.13-.174.687.217l-10.146 9.078z" fill="currentColor"/>
</symbol>
<symbol id="icon-route" viewBox="0 0 24 24" fill="none">
<path d="M6.5 4.5a2.5 2.5 0 110 5 2.5 2.5 0 010-5zm0 10a2.5 2.5 0 110 5 2.5 2.5 0 010-5zm11-5a2.5 2.5 0 110 5 2.5 2.5 0 010-5z" stroke="currentColor" stroke-width="1.8"/>
<path d="M8.8 7h5.1c1.2 0 2.1 1 2.1 2.1v.2M15.9 12.9v.2c0 1.2-1 2.1-2.1 2.1H8.8" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
</symbol>
<symbol id="icon-map" viewBox="0 0 24 24" fill="none">
<path d="M8 3.5l8-2v19l-8 2-6-1.5v-19L8 3.5zm0 0v19m8-21l6 1.5v19L16 20.5" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>
</symbol>
<symbol id="icon-instagram" viewBox="0 0 24 24" fill="none">
<rect x="2.5" y="2.5" width="19" height="19" rx="5" stroke="currentColor" stroke-width="2"/>
<circle cx="12" cy="12" r="4.25" stroke="currentColor" stroke-width="2"/>
<circle cx="17.2" cy="6.8" r="1.2" fill="currentColor"/>
</symbol>
<symbol id="icon-vk" viewBox="0 0 24 24" fill="none">
<path d="M3.8 7.5c.1-.4.4-.6.8-.6h2.2c.3 0 .6.2.7.5.8 2.1 1.8 3.9 2.6 4.8.3.3.5.4.7.4.1 0 .2-.1.2-.4V7.8c0-.5.4-.9.9-.9h2c.5 0 .9.4.9.9v2.4c0 .8.3 1.1.6 1.1.2 0 .4-.1.7-.4.8-.9 1.7-2.6 2.5-4.6.1-.3.4-.5.7-.5h2.2c.6 0 1 .6.8 1.2-.6 1.7-1.5 3.3-2.4 4.4-.3.4-.4.7 0 1.2.9 1 1.8 1.9 2.5 3.2.3.6-.1 1.3-.8 1.3h-2.4c-.3 0-.5-.1-.7-.4-.5-.7-1.1-1.4-1.8-2-.2-.1-.3-.2-.5-.2-.2 0-.4.2-.4.5v1.2c0 .5-.4.9-.9.9h-1.3c-1.2 0-2.4-.4-3.6-1.4-1.7-1.4-3.1-3.7-4-6.4 0-.1 0-.3 0-.4z" fill="currentColor"/>
</symbol>
</svg> </svg>

67
assets/js/main.js
View File

@@ -55,6 +55,73 @@
elements.forEach((element) => observer.observe(element)); elements.forEach((element) => observer.observe(element));
})(); })();
(() => {
const counters = Array.from(document.querySelectorAll(".js-counter"));
if (!counters.length) return;
const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const formatCounter = (counter, value) => {
const suffix = counter.dataset.suffix || "";
counter.textContent = `${value}${suffix}`;
};
const setFinalValue = (counter) => {
const target = Number(counter.dataset.target || 0);
formatCounter(counter, Number.isFinite(target) ? target : 0);
};
const animateCounter = (counter) => {
const target = Number(counter.dataset.target || 0);
const duration = Number(counter.dataset.duration || 1300);
if (!Number.isFinite(target) || target <= 0) {
setFinalValue(counter);
return;
}
let startTime = null;
const tick = (timestamp) => {
if (startTime === null) startTime = timestamp;
const progress = Math.min((timestamp - startTime) / duration, 1);
const currentValue = Math.floor(progress * target);
formatCounter(counter, currentValue);
if (progress < 1) {
window.requestAnimationFrame(tick);
return;
}
setFinalValue(counter);
};
window.requestAnimationFrame(tick);
};
if (reduceMotion || !("IntersectionObserver" in window)) {
counters.forEach(setFinalValue);
return;
}
const observer = new IntersectionObserver(
(entries, currentObserver) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) return;
animateCounter(entry.target);
currentObserver.unobserve(entry.target);
});
},
{ threshold: 0.45 }
);
counters.forEach((counter) => {
formatCounter(counter, 0);
observer.observe(counter);
});
})();
(() => { (() => {
const bookingForm = document.getElementById("booking-form"); const bookingForm = document.getElementById("booking-form");
const successModal = document.getElementById("booking-success-modal"); const successModal = document.getElementById("booking-success-modal");

284
assets/scss/_base.scss
View File

@@ -735,17 +735,10 @@ img {
} }
} }
.reviews { .facts {
background: $color-bg; background: $color-bg;
background-image: url(../images/bg-pattern.svg); background-image: url(../images/bg-pattern.svg);
background-position: center; background-position: center;
&__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px;
margin-bottom: 64px;
}
} }
.review-card { .review-card {
@@ -786,14 +779,18 @@ img {
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px; gap: 32px;
article { &__item {
@include card; @include card;
border: 0; border: 0;
background: $color-accent; background: $color-accent;
min-height: 144px; min-height: 248px;
padding: 32px; padding: 34px 24px;
text-align: center; text-align: center;
transition: transform 0.3s ease; transition: transform 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
&:hover { &:hover {
transform: translateY(-5px); transform: translateY(-5px);
@@ -802,17 +799,20 @@ img {
strong { strong {
display: block; display: block;
margin-bottom: 8px; margin-bottom: 14px;
color: $color-text; color: $color-text;
font-size: 48px; font-size: clamp(80px, 9vw, 120px);
font-weight: 700; font-weight: 700;
line-height: 1; line-height: 0.9;
letter-spacing: 0.01em;
} }
span { span {
color: $color-text; color: $color-text;
font-size: 16px; font-size: 19px;
line-height: 1.3; font-weight: 500;
line-height: 1.25;
max-width: 320px;
} }
} }
@@ -991,11 +991,100 @@ img {
line-height: 1.1; line-height: 1.1;
} }
a {
color: rgba(255, 255, 255, 0.9);
font-size: 16px;
line-height: 1.4;
text-decoration: underline;
text-underline-offset: 2px;
}
span { span {
color: $color-text-soft; color: $color-text-soft;
font-size: 16px; font-size: 16px;
line-height: 1.45; line-height: 1.45;
} }
small {
display: block;
margin-top: 6px;
color: rgba(255, 255, 255, 0.6);
font-size: 13px;
line-height: 1.35;
}
}
&__links {
margin-top: 24px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
&__messenger {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.92);
text-decoration: none;
transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
&:hover {
transform: translateY(-1px);
border-color: rgba(207, 23, 23, 0.7);
background: rgba(207, 23, 23, 0.18);
}
&--secondary {
background: rgba(255, 255, 255, 0.02);
}
}
&__action-icon {
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
svg {
width: 20px;
height: 20px;
display: block;
color: currentColor;
opacity: 0.9;
}
}
&__links--social {
margin-top: 14px;
a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.85);
background: rgba(255, 255, 255, 0.03);
transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
text-decoration: none;
}
a:hover {
border-color: rgba(207, 23, 23, 0.8);
color: $color-text;
background: rgba(207, 23, 23, 0.2);
}
} }
} }
@@ -1014,6 +1103,73 @@ img {
} }
} }
.map-card {
&__embed {
width: 100%;
margin-top: 18px;
margin-bottom: 16px;
overflow: hidden;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.15);
iframe {
width: 100%;
min-height: 260px;
border: 0;
display: block;
}
}
&__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
background: rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}
a:hover {
transform: translateY(-1px);
border-color: rgba(207, 23, 23, 0.75);
background: rgba(207, 23, 23, 0.18);
}
}
&__action-icon {
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #ffd5d5;
svg {
width: 20px;
height: 20px;
display: block;
}
}
&__route {
min-width: 44px;
width: 44px;
height: 44px;
padding: 0;
box-shadow: none;
}
}
.booking-modal { .booking-modal {
position: fixed; position: fixed;
inset: 0; inset: 0;
@@ -1136,8 +1292,7 @@ img {
} }
&__nav, &__nav,
&__contacts, &__contacts {
&__social {
h4 { h4 {
margin-bottom: 16px; margin-bottom: 16px;
font-size: 16px; font-size: 16px;
@@ -1167,30 +1322,32 @@ img {
&__socials { &__socials {
display: flex; display: flex;
flex-wrap: wrap;
gap: 12px; gap: 12px;
a { a {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 58px; width: 46px;
height: 58px; height: 46px;
border: 1px solid rgba(207, 23, 23, 0.5); border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 10px; border-radius: 12px;
background: rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.92); color: rgba(255, 255, 255, 0.92);
transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease; transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
margin-top: 0 !important; margin-top: 0 !important;
svg { svg {
width: 24px; width: 22px;
height: 24px; height: 22px;
display: block; display: block;
} }
&:hover { &:hover {
transform: translateY(-2px); transform: translateY(-2px);
border-color: rgba(207, 23, 23, 0.85); border-color: rgba(207, 23, 23, 0.75);
background: rgba(207, 23, 23, 0.15); background: rgba(207, 23, 23, 0.18);
} }
} }
} }
@@ -1213,7 +1370,51 @@ img {
&__legal { &__legal {
display: flex; display: flex;
gap: 34px; flex-wrap: wrap;
gap: 10px 24px;
}
&__messengers {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
a {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 12px;
color: rgba(255, 255, 255, 0.85) !important;
background: rgba(255, 255, 255, 0.03);
margin-top: 0 !important;
text-decoration: none !important;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
a:hover {
border-color: rgba(207, 23, 23, 0.72);
background: rgba(207, 23, 23, 0.16);
}
}
&__messenger-icon {
width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
svg {
width: 16px;
height: 16px;
display: block;
color: currentColor;
}
} }
} }
@@ -1304,12 +1505,11 @@ img {
.footer { .footer {
&__brand p { &__brand p {
font-size: 28px; font-size: 16px;
} }
&__nav, &__nav,
&__contacts, &__contacts {
&__social {
h4 { h4 {
font-size: 16px; font-size: 16px;
} }
@@ -1422,22 +1622,21 @@ img {
} }
&__brand p { &__brand p {
font-size: 22px; font-size: 16px;
margin-top: 18px; margin-top: 18px;
} }
&__nav, &__nav,
&__contacts, &__contacts {
&__social {
h4 { h4 {
font-size: 30px; font-size: 18px;
margin-bottom: 16px; margin-bottom: 16px;
} }
a, a,
span { span {
font-size: 22px; font-size: 15px;
line-height: 1.32; line-height: 1.4;
} }
} }
@@ -1574,8 +1773,7 @@ img {
} }
&__nav, &__nav,
&__contacts, &__contacts {
&__social {
h4 { h4 {
font-size: 16px; font-size: 16px;
} }
@@ -1595,7 +1793,7 @@ img {
} }
.stats strong { .stats strong {
font-size: 40px; font-size: clamp(66px, 17vw, 96px);
} }
.booking-modal { .booking-modal {
@@ -1672,7 +1870,7 @@ img {
.info-card, .info-card,
.feature-card, .feature-card,
.review-card, .review-card,
.stats article, .stats__item,
.contacts-card, .contacts-card,
.hours-card, .hours-card,
.object-card__content { .object-card__content {
@@ -1718,8 +1916,8 @@ img {
} }
&__socials a { &__socials a {
width: 50px; width: 44px;
height: 50px; height: 44px;
} }
} }
} }

166
index.html
View File

@@ -282,36 +282,26 @@
</div> </div>
</section> </section>
<section class="section reviews"> <section class="section facts" id="facts">
<div class="container"> <div class="container">
<header class="section__head"> <header class="section__head">
<h2>Отзывы</h2> <h2>Цифры о комплексе</h2>
<p>Что говорят о нас спортсмены и тренеры</p> <p>Ключевые показатели инфраструктуры OlimpArena</p>
</header> </header>
<div class="stats stats--facts">
<div class="reviews__grid"> <article class="stats__item">
<article class="review-card"> <strong class="js-counter" data-target="70" data-suffix="+">0</strong>
<p>"Лучшие ледовые условия в Москве. Качество льда на высочайшем уровне, всё организовано профессионально."</p> <span>номеров для проживания</span>
<strong>Александр Иванов</strong>
<span>Тренер хоккейной школы</span>
</article> </article>
<article class="review-card"> <article class="stats__item">
<p>"Отличный комплекс для тренировок. Залы хореографии и фитнеса действительно помогают прогрессировать быстрее."</p> <strong class="js-counter" data-target="2">0</strong>
<strong>Елена Петрова</strong> <span>ледовые арены 56×26 м</span>
<span>Фигуристка</span>
</article> </article>
<article class="review-card"> <article class="stats__item">
<p>"Проводим здесь турниры уже второй год. Профессиональный подход команды и высокая готовность площадок."</p> <strong class="js-counter" data-target="9">0</strong>
<strong>Дмитрий Соколов</strong> <span>оборудованных раздевалок</span>
<span>Организатор турниров</span>
</article> </article>
</div> </div>
<div class="stats">
<article><strong>150+</strong><span>Мест для проживания</span></article>
<article><strong>2</strong><span>Профессиональных ледовых поля</span></article>
<article><strong>10</strong><span>Оборудованных раздевалок</span></article>
</div>
</div> </div>
</section> </section>
@@ -376,7 +366,18 @@
</span> </span>
<div class="contacts-card__item-content"> <div class="contacts-card__item-content">
<strong>Адрес</strong> <strong>Адрес</strong>
<span>Москва, в пределах ТТК<br>15 минут от м. Волгоградский проспект</span> <span>Москва, Автомобильный проезд, 4</span>
</div>
</li>
<li>
<span class="contacts-card__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<use href="./assets/images/svg-sprites.svg#icon-time"></use>
</svg>
</span>
<div class="contacts-card__item-content">
<strong>Режим работы</strong>
<span>Ежедневно с 06:00 до 23:00</span>
</div> </div>
</li> </li>
<li> <li>
@@ -387,7 +388,7 @@
</span> </span>
<div class="contacts-card__item-content"> <div class="contacts-card__item-content">
<strong>Телефон</strong> <strong>Телефон</strong>
<span>+7 (495) 123-45-67</span> <a href="tel:+74951234567">+7 (495) 123-45-67</a>
</div> </div>
</li> </li>
<li> <li>
@@ -398,14 +399,64 @@
</span> </span>
<div class="contacts-card__item-content"> <div class="contacts-card__item-content">
<strong>Email</strong> <strong>Email</strong>
<span>receptionadmin@o-arena.ru</span> <a href="mailto:receptionadmin@o-arena.ru">receptionadmin@o-arena.ru</a>
</div> </div>
</li> </li>
</ul> </ul>
<div class="contacts-card__links">
<a class="contacts-card__messenger" href="https://wa.me/74951234567?text=%D0%94%D0%BE%D0%B1%D1%80%D1%8B%D0%B9%20%D0%B4%D0%B5%D0%BD%D1%8C%2C%20%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D0%B5%D1%81%D1%83%D0%B5%D1%82%20%D0%B1%D1%80%D0%BE%D0%BD%D1%8C%20%D0%B2%20OlimpArena." target="_blank" rel="noopener noreferrer" aria-label="WhatsApp">
<span class="contacts-card__action-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<use href="./assets/images/svg-sprites.svg#icon-whatsapp"></use>
</svg>
</span>
</a>
<a class="contacts-card__messenger contacts-card__messenger--secondary" href="https://t.me/o_arena_admin" target="_blank" rel="noopener noreferrer" aria-label="Telegram">
<span class="contacts-card__action-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<use href="./assets/images/svg-sprites.svg#icon-telegram"></use>
</svg>
</span>
</a>
</div>
<div class="contacts-card__links contacts-card__links--social">
<a href="#" aria-label="ВКонтакте">
<span class="contacts-card__action-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<use href="./assets/images/svg-sprites.svg#icon-vk"></use>
</svg>
</span>
</a>
<a href="#" aria-label="Instagram">
<span class="contacts-card__action-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<use href="./assets/images/svg-sprites.svg#icon-instagram"></use>
</svg>
</span>
</a>
</div>
</div>
<div class="hours-card map-card">
<h4>Карта и маршрут</h4>
<div class="map-card__embed">
<iframe title="OlimpArena на Яндекс Картах" src="https://yandex.ru/map-widget/v1/?text=%D0%9C%D0%BE%D1%81%D0%BA%D0%B2%D0%B0%2C%20%D0%90%D0%B2%D1%82%D0%BE%D0%BC%D0%BE%D0%B1%D0%B8%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9%20%D0%BF%D1%80%D0%BE%D0%B5%D0%B7%D0%B4%2C%204&z=16" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<div class="map-card__actions">
<a class="btn btn--small map-card__route" href="https://yandex.ru/maps/?rtext=~%D0%9C%D0%BE%D1%81%D0%BA%D0%B2%D0%B0%2C%20%D0%90%D0%B2%D1%82%D0%BE%D0%BC%D0%BE%D0%B1%D0%B8%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9%20%D0%BF%D1%80%D0%BE%D0%B5%D0%B7%D0%B4%2C%204&rtt=auto" target="_blank" rel="noopener noreferrer" aria-label="Построить маршрут">
<span class="map-card__action-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<use href="./assets/images/svg-sprites.svg#icon-route"></use>
</svg>
</span>
</a>
<a href="https://yandex.ru/maps/?text=%D0%9C%D0%BE%D1%81%D0%BA%D0%B2%D0%B0%2C%20%D0%90%D0%B2%D1%82%D0%BE%D0%BC%D0%BE%D0%B1%D0%B8%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9%20%D0%BF%D1%80%D0%BE%D0%B5%D0%B7%D0%B4%2C%204" target="_blank" rel="noopener noreferrer" aria-label="Открыть в Яндекс Картах">
<span class="map-card__action-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<use href="./assets/images/svg-sprites.svg#icon-map"></use>
</svg>
</span>
</a>
</div> </div>
<div class="hours-card">
<h4>Режим работы</h4>
<p>Ежедневно: 06:00 — 23:00</p>
</div> </div>
</div> </div>
</div> </div>
@@ -432,44 +483,67 @@
<a class="logo" href="#top" aria-label="OlimpArena"> <a class="logo" href="#top" aria-label="OlimpArena">
<img src="./assets/images/logo.svg" alt="OlimpArena"> <img src="./assets/images/logo.svg" alt="OlimpArena">
</a> </a>
<p>Современный спортивный комплекс в центре Москвы</p> <p>OlimpArena — спорткомплекс полного цикла: ледовые арены, залы, проживание и питание на одной территории.</p>
</div> </div>
<nav class="footer__nav" aria-label="Навигация в футере"> <nav class="footer__nav" aria-label="Навигация в футере">
<h4>Навигация</h4> <h4>Объекты</h4>
<a href="#objects">Объекты</a> <a href="#objects">Объекты</a>
<a href="#services">Услуги</a> <a href="#infrastructure">Инфраструктура</a>
<a href="#gallery">Галерея</a> <a href="#gallery">Галерея</a>
<a href="#contacts">Контакты, режим работы</a> <a href="#facts">Цифры о комплексе</a>
</nav>
<nav class="footer__nav" aria-label="Услуги в футере">
<h4>Услуги</h4>
<a href="#services">Форматы аренды и мероприятий</a>
<a href="#pricing">Стоимость</a>
<a href="#booking">Оставить заявку</a>
</nav> </nav>
<div class="footer__contacts"> <div class="footer__contacts">
<h4>Контакты</h4> <h4>Контакты и режим работы</h4>
<span>+7 (495) 123-45-67</span> <a href="tel:+74951234567">+7 (495) 123-45-67</a>
<span>receptionadmin@o-arena.ru</span> <a href="mailto:receptionadmin@o-arena.ru">receptionadmin@o-arena.ru</a>
<span>Москва, ТТК</span> <span>Москва, Автомобильный проезд, 4</span>
<span>Ежедневно с 06:00 до 23:00</span>
<div class="footer__messengers">
<a href="https://wa.me/74951234567" target="_blank" rel="noopener noreferrer" aria-label="WhatsApp">
<span class="footer__messenger-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<use href="./assets/images/svg-sprites.svg#icon-whatsapp"></use>
</svg>
</span>
</a>
<a href="https://t.me/o_arena_admin" target="_blank" rel="noopener noreferrer" aria-label="Telegram">
<span class="footer__messenger-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<use href="./assets/images/svg-sprites.svg#icon-telegram"></use>
</svg>
</span>
</a>
</div> </div>
<div class="footer__social">
<h4>Социальные сети</h4>
<div class="footer__socials"> <div class="footer__socials">
<a href="#" aria-label="Instagram"> <a href="#" aria-label="Instagram">
<span class="footer__messenger-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none"> <svg viewBox="0 0 24 24" fill="none">
<rect x="2.5" y="2.5" width="19" height="19" rx="5" stroke="currentColor" stroke-width="2"/> <use href="./assets/images/svg-sprites.svg#icon-instagram"></use>
<circle cx="12" cy="12" r="4.25" stroke="currentColor" stroke-width="2"/>
<circle cx="17.2" cy="6.8" r="1.2" fill="currentColor"/>
</svg> </svg>
</span>
</a> </a>
<a href="#" aria-label="Facebook"> <a href="#" aria-label="ВКонтакте">
<span class="footer__messenger-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none"> <svg viewBox="0 0 24 24" fill="none">
<path d="M14.5 8H16.5V5H14C11.8 5 10 6.8 10 9V11H8V14H10V19H13V14H15.5L16 11H13V9.5C13 8.67 13.67 8 14.5 8Z" fill="currentColor"/> <use href="./assets/images/svg-sprites.svg#icon-vk"></use>
</svg> </svg>
</span>
</a> </a>
</div> </div>
</div> </div>
</div> </div>
<div class="footer__bottom"> <div class="footer__bottom">
<span>© 2026 OlimpArena. Все права защищены.</span> <span>© 2026 ООО «ОлимпАрена»</span>
<div class="footer__legal"> <div class="footer__legal">
<a href="#">Политика конфиденциальности</a> <a href="#">Политика конфиденциальности</a>
<a href="#">Условия использования</a> <a href="#">Договор оферты</a>
<span>ИНН 7700000000 · ОГРН 1207700000000</span>
</div> </div>
</div> </div>
</div> </div>