26 Commits

Author SHA1 Message Date
d3cf2bd04d Merge pull request 'style: add some style 8' (#29) from style/design into main
All checks were successful
Deploy Olimparena / deploy (push) Successful in 15s
Reviewed-on: #29
2026-06-05 10:40:13 +00:00
a94c2f06e3 style: add some style 8 2026-06-05 13:39:50 +03:00
09358b6083 Merge pull request 'style: add some style 7 (photos)' (#28) from style/design into main
All checks were successful
Deploy Olimparena / deploy (push) Successful in 15s
Reviewed-on: #28
2026-06-05 10:12:07 +00:00
a1a6d96656 style: add some style 7 (photos) 2026-06-05 13:11:42 +03:00
1554cbc821 Merge pull request 'style: add some style 6' (#27) from style/design into main
All checks were successful
Deploy Olimparena / deploy (push) Successful in 15s
Reviewed-on: #27
2026-06-05 09:36:31 +00:00
a81290e261 style: add some style 6 2026-06-05 12:36:12 +03:00
5777476e88 Merge pull request 'style: add some style 5 (modal form 3)' (#26) from style/design into main
All checks were successful
Deploy Olimparena / deploy (push) Successful in 14s
Reviewed-on: #26
2026-06-05 09:17:37 +00:00
24824e2dc3 style: add some style 5 (modal form 3) 2026-06-05 12:17:18 +03:00
0ba1b74876 Merge pull request 'style: add some style 5 (modal form 2)' (#25) from style/design into main
All checks were successful
Deploy Olimparena / deploy (push) Successful in 14s
Reviewed-on: #25
2026-06-05 09:07:50 +00:00
9e006c2572 style: add some style 5 (modal form 2) 2026-06-05 12:07:31 +03:00
82529bed91 Merge pull request 'style: add some style 5 (modal form 1)' (#24) from style/design into main
All checks were successful
Deploy Olimparena / deploy (push) Successful in 13s
Reviewed-on: #24
2026-06-05 09:03:55 +00:00
e6ea4f948e style: add some style 5 (modal form 1) 2026-06-05 12:03:18 +03:00
08df9a950d Merge pull request 'style: add some style 5 (modal form)' (#23) from style/design into main
All checks were successful
Deploy Olimparena / deploy (push) Successful in 15s
Reviewed-on: #23
2026-06-05 08:55:47 +00:00
d3a6cf9540 style: add some style 5 (modal form) 2026-06-05 11:55:17 +03:00
28beec6fd2 Merge pull request 'style: add some style 4' (#22) from style/design into main
All checks were successful
Deploy Olimparena / deploy (push) Successful in 16s
Reviewed-on: #22
2026-06-05 08:01:16 +00:00
00b63f0991 style: add some style 4 2026-06-05 11:00:13 +03:00
113eb73305 Merge pull request 'style: add some style 3' (#21) from style/design into main
All checks were successful
Deploy Olimparena / deploy (push) Successful in 14s
Reviewed-on: #21
2026-06-04 15:05:04 +00:00
79ebb16243 style: add some style 3 2026-06-04 18:03:51 +03:00
ea036cce40 Merge pull request 'style: add some style 2' (#20) from style/design into main
All checks were successful
Deploy Olimparena / deploy (push) Successful in 13s
Reviewed-on: #20
2026-06-04 14:15:53 +00:00
7ac00579ca style: add some style 2 2026-06-04 17:09:03 +03:00
6bb7c2cf6c Merge pull request 'style/design' (#19) from style/design into main
All checks were successful
Deploy Olimparena / deploy (push) Successful in 15s
Reviewed-on: #19
2026-06-04 13:47:09 +00:00
ac6ddd0b96 style: add some style 2026-06-04 16:45:02 +03:00
f77ca86e81 Fix font size conflict 2026-06-04 16:43:17 +03:00
86024ba0b7 Merge pull request 'style: add styles and photos' (#18) from style/photo-all into main
All checks were successful
Deploy Olimparena / deploy (push) Successful in 17s
Reviewed-on: #18
2026-06-03 12:03:17 +00:00
3dd98c874e style: add styles and photos 2026-06-03 15:01:22 +03:00
bd4f74acde Merge pull request 'style: update base scss styles' (#17) from style/all into main
All checks were successful
Deploy Olimparena / deploy (push) Successful in 17s
Reviewed-on: #17
2026-06-02 15:07:29 +00:00
20 changed files with 563 additions and 113 deletions

View File

@@ -1,4 +1,5 @@
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Montserrat:wght@700&display=swap");
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;700&family=Montserrat:wght@100;300;400;500;600;700&display=swap");
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
@@ -179,7 +180,9 @@ img {
padding: 10px 24px;
font-size: 14px;
line-height: 20px;
box-shadow: 0 10px 15px rgba(231, 0, 11, 0.4), 0 4px 6px rgba(231, 0, 11, 0.4);
/*box-shadow: 0 10px 15px rgba(231, 0, 11, 0.4), 0 4px 6px rgba(231, 0, 11, 0.4);*/
font-weight: 400;
text-transform: uppercase;
}
.btn--ghost {
border: 2px solid rgba(255, 255, 255, 0.2);
@@ -237,6 +240,7 @@ img {
}
.hero__bg {
position: absolute;
filter: blur(3px);
inset: 0;
background: linear-gradient(90deg, rgba(18, 18, 18, 0.9) 0%, rgba(18, 18, 18, 0.7) 50%, rgba(0, 0, 0, 0) 100%), url("../images/renders/led.jpg") center/cover no-repeat;
}
@@ -253,7 +257,7 @@ img {
max-width: 1000px;
margin-left: 528px;
padding-top: 104px;
padding-bottom: 50px;
padding-bottom: 100px;
}
.hero__content > * {
opacity: 0;
@@ -280,30 +284,37 @@ img {
}
.hero h1 span {
color: #cf1717;
font-family: Montserrat, Inter, Segoe UI, Segoe UI Variable, Helvetica Neue, Arial, sans-serif;
font-weight: 700;
}
.hero p {
max-width: 768px;
margin-bottom: 32px;
color: rgba(255, 255, 255, 0.8);
font-size: 20px;
line-height: 32px;
font-size: 23px;
line-height: 1.5;
font-weight: 300;
}
.hero__tags {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 28px;
margin-bottom: 15px;
}
.hero__tags li {
padding: 9px 17px;
padding: 20px 20px;
border: 1px solid rgba(207, 23, 23, 0.3);
border-radius: 999px;
background: rgba(41, 49, 51, 0.6);
/*background: rgba(41, 49, 51, 0.6);*/
font-size: 14px;
font-weight: 500;
font-weight: 300;
line-height: 20px;
white-space: nowrap;
transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(53px);
-webkit-backdrop-filter: blur(10px);
border: 0px solid rgba(255, 255, 255, 0.3);
border-radius: 12px;
}
.hero__tags li:hover {
transform: translateY(-1px);
@@ -314,6 +325,11 @@ img {
display: flex;
gap: 16px;
}
.hero__actions .btn {
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
}
.highlights {
background: linear-gradient(90deg, #293133, #20272a);
@@ -331,7 +347,7 @@ img {
border-radius: 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
min-height: 178px;
padding: 33px;
padding: 40px;
transition: transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}
.info-card:hover {
@@ -342,13 +358,14 @@ img {
.info-card h3 {
margin-bottom: 8px;
font-size: 20px;
font-weight: 700;
font-weight: 500;
line-height: 28px;
}
.info-card p {
color: rgba(255, 255, 255, 0.7);
font-size: 16px;
line-height: 24px;
line-height: 1.5;
font-weight: 200;
}
.section {
@@ -383,8 +400,9 @@ img {
}
.section__head p {
color: rgba(255, 255, 255, 0.8);
font-size: 28px;
font-size: 22px;
line-height: 1.15;
font-weight: 200;
}
.infrastructure {
@@ -399,8 +417,8 @@ img {
line-height: 1.05;
}
.infrastructure .section__head p {
font-size: 20px;
font-weight: 400;
font-size: 22px;
font-weight: 200;
line-height: 1.2;
}
.infrastructure__grid {
@@ -446,15 +464,17 @@ img {
display: block;
}
.feature-card h3 {
margin-bottom: 10px;
margin-bottom: 7px;
font-size: 18px;
font-weight: 700;
/*font-weight: 700;*/
line-height: 1.2;
font-weight: 600;
}
.feature-card p {
color: rgba(255, 255, 255, 0.7);
font-size: 16px;
line-height: 1.3;
font-weight: 300;
}
.objects {
@@ -505,12 +525,23 @@ img {
font-size: 34px;
font-weight: 700;
line-height: 1.1;
font-weight: 600;
}
.object-card__content p {
margin-bottom: 24px;
color: rgba(255, 255, 255, 0.7);
font-size: 18px;
line-height: 28px;
font-weight: 300;
}
.object-card__content a.btn {
min-width: 200px;
width: 40%;
padding: 10px 24px;
border-radius: 10px;
font-size: 14px;
text-transform: uppercase;
font-weight: 400;
}
.object-card__content ul {
margin-bottom: 24px;
@@ -556,12 +587,12 @@ img {
line-height: 1.05;
}
.services .section__head p {
font-size: 20px;
font-size: 22px;
line-height: 1.2;
}
.services__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
width: 100%;
max-width: 896px;
@@ -601,7 +632,7 @@ img {
display: block;
font-family: "Montserrat", "Inter", "Segoe UI", "Segoe UI Variable", "Helvetica Neue", Arial, sans-serif;
font-size: 21px;
font-weight: 700;
font-weight: 500;
line-height: 1.15;
position: relative;
z-index: 1;
@@ -620,8 +651,8 @@ img {
opacity: 0;
transform: translateY(10px);
color: rgba(255, 255, 255, 0.7);
font-size: 15px;
font-weight: 500;
font-size: 16px;
font-weight: 400;
line-height: 1.45;
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
@@ -649,16 +680,22 @@ img {
}
.pricing__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
margin-bottom: 28px;
}
@media (max-width: 768px) {
.pricing__list {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
}
.pricing__note {
margin-bottom: 30px;
color: rgba(255, 255, 255, 0.8);
font-size: 18px;
font-size: 14px;
line-height: 1.45;
text-align: center;
font-weight: 200;
}
.pricing__cta {
text-align: center;
@@ -676,7 +713,7 @@ img {
border-radius: 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
min-height: 144px;
padding: 24px;
padding: 40px;
}
.pricing-item h3 {
margin-bottom: 10px;
@@ -692,8 +729,9 @@ img {
}
@media (max-width: 600px) {
.pricing-item {
padding: 16px;
padding: 40px;
min-height: auto;
text-align: center;
}
.pricing-item h3 {
font-size: 16px;
@@ -779,20 +817,20 @@ img {
.reviews__dots {
display: flex;
justify-content: center;
gap: 8px;
gap: 12px;
margin-top: 18px;
}
.reviews__dot {
width: 10px;
height: 10px;
width: 16px;
height: 16px;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0.28);
background: rgba(255, 255, 255, 0.17);
cursor: pointer;
transition: width 0.2s ease, background-color 0.2s ease;
}
.reviews__dot.is-active {
width: 26px;
width: 16px;
background: #cf1717;
}
@@ -808,6 +846,7 @@ img {
flex-direction: column;
justify-content: space-between;
transition: transform 0.3s ease, border-color 0.3s ease;
margin-top: 5px;
}
.review-card:hover {
transform: translateY(-5px);
@@ -818,12 +857,14 @@ img {
color: rgba(255, 255, 255, 0.8);
font-size: 16px;
line-height: 1.5;
font-weight: 200;
font-style: italic;
}
.review-card strong {
display: block;
margin-bottom: 10px;
font-size: 16px;
font-weight: 700;
font-weight: 400;
line-height: 1.2;
}
.review-card__meta {
@@ -831,14 +872,16 @@ img {
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.review-card__meta a {
color: #ffd2d2;
/*color: #ffd2d2;*/
color: rgba(223, 223, 223, 0.2901960784);
font-size: 14px;
font-weight: 500;
line-height: 1.4;
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
text-decoration-color: rgba(255, 210, 210, 0.75);
/*text-decoration-color: rgba(255, 210, 210, 0.75);*/
text-decoration-color: rgba(169, 169, 169, 0.28);
transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.review-card__meta a:hover {
@@ -904,8 +947,8 @@ img {
.booking p {
margin-bottom: 32px;
color: rgba(255, 255, 255, 0.8);
font-size: 18px;
font-weight: 500;
font-size: 19px;
font-weight: 200;
line-height: 1.4;
}
.booking form {
@@ -923,6 +966,7 @@ img {
font-size: 14px;
font-weight: 500;
line-height: 1.25;
display: none;
}
.booking__field .required-mark {
color: #cf1717;
@@ -988,6 +1032,13 @@ img {
.booking select {
height: 56px;
}
.booking select {
/* 1. Сбрасываем стандартный стиль браузера (стрелка исчезнет) */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #1f2325;
}
.booking textarea {
min-height: 130px;
padding: 16px 20px;
@@ -1057,6 +1108,7 @@ img {
color: rgba(255, 255, 255, 0.8);
font-size: 16px;
line-height: 1.45;
font-weight: 300;
}
.contacts-card__item-content small {
display: block;
@@ -1080,7 +1132,7 @@ img {
height: 44px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 999px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.92);
text-decoration: none;
@@ -1303,19 +1355,21 @@ img {
margin-top: 16px;
color: rgba(255, 255, 255, 0.65);
font-size: 14px;
line-height: 1.28;
line-height: 1.5;
font-weight: 300;
}
.footer__nav h4, .footer__contacts h4 {
margin-bottom: 16px;
font-size: 16px;
font-weight: 700;
font-weight: 600;
line-height: 1.1;
}
.footer__nav a, .footer__contacts a {
display: block;
color: rgba(255, 255, 255, 0.65);
font-size: 14px;
line-height: 1.35;
line-height: 1.5;
font-weight: 300;
}
.footer__nav span, .footer__contacts span {
display: block;
@@ -1481,6 +1535,9 @@ img {
.footer__bottom a {
font-size: 14px;
}
.footer__nav h4, .footer__contacts h4 {
margin-top: 15px;
}
}
@media only screen and (max-width: 1024px) {
.header__inner {
@@ -1630,10 +1687,12 @@ img {
grid-template-columns: 1fr;
}
.feature-card h3,
.object-card__content h3,
.booking h2 {
.object-card__content h3 {
font-size: 24px;
}
.booking h2 {
font-size: 32px;
}
.booking input,
.booking select {
height: 52px;
@@ -1737,14 +1796,19 @@ img {
font-size: 18px;
}
.info-card,
.feature-card,
.review-card,
.stats__item,
.contacts-card,
.hours-card,
.object-card__content {
padding: 24px;
}
.feature-card {
padding: 34px 24px;
background: hsla(0, 0%, 7%, 0.18);
}
.contacts-card {
padding: 33px;
}
.object-card__image {
min-height: 260px;
}

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 178 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 252 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 115 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 112 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 113 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 123 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 122 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 109 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 134 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 141 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 202 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 150 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 197 KiB

View File

@@ -126,7 +126,9 @@ img {
padding: 10px 24px;
font-size: 14px;
line-height: 20px;
box-shadow: 0 10px 15px rgba(231, 0, 11, 0.4), 0 4px 6px rgba(231, 0, 11, 0.4);
/*box-shadow: 0 10px 15px rgba(231, 0, 11, 0.4), 0 4px 6px rgba(231, 0, 11, 0.4);*/
font-weight:400;
text-transform:uppercase;
}
&--ghost {
@@ -191,6 +193,7 @@ img {
&__bg {
position: absolute;
filter: blur(3px);
inset: 0;
background:
linear-gradient(90deg, rgba(18, 18, 18, 0.9) 0%, rgba(18, 18, 18, 0.7) 50%, rgba(0, 0, 0, 0) 100%),
@@ -213,7 +216,7 @@ img {
max-width: 1000px;
margin-left: 528px;
padding-top: 104px;
padding-bottom: 50px;
padding-bottom: 100px;
> * {
opacity: 0;
@@ -246,6 +249,8 @@ img {
span {
color: $color-accent;
font-family: Montserrat, Inter, Segoe UI, Segoe UI Variable, Helvetica Neue, Arial, sans-serif;
font-weight:700;
}
}
@@ -253,27 +258,33 @@ img {
max-width: 768px;
margin-bottom: 32px;
color: $color-text-soft;
font-size: 20px;
line-height: 32px;
font-size: 23px;
line-height: 1.5;
font-weight:300;
}
&__tags {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 28px;
margin-bottom: 15px;
li {
padding: 9px 17px;
padding: 20px 20px;
border: 1px solid $color-border-strong;
border-radius: 999px;
background: rgba(41, 49, 51, 0.6);
/*background: rgba(41, 49, 51, 0.6);*/
font-size: 14px;
font-weight: 500;
font-weight: 300;
line-height: 20px;
white-space: nowrap;
transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(53px);
-webkit-backdrop-filter: blur(10px);
border: 0px solid rgba(255, 255, 255, 0.3);
border-radius: 12px;
&:hover {
transform: translateY(-1px);
border-color: rgba(207, 23, 23, 0.55);
@@ -285,6 +296,12 @@ img {
&__actions {
display: flex;
gap: 16px;
.btn{
font-size:14px;
font-weight:600;
text-transform:uppercase;
}
}
}
@@ -302,7 +319,7 @@ img {
.info-card {
@include card;
min-height: 178px;
padding: 33px;
padding: 40px;
transition: transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
&:hover {
@@ -314,14 +331,15 @@ img {
h3 {
margin-bottom: 8px;
font-size: 20px;
font-weight: 700;
font-weight: 500;
line-height: 28px;
}
p {
color: $color-text-muted;
font-size: 16px;
line-height: 24px;
line-height: 1.5;
font-weight:200;
}
}
@@ -363,8 +381,9 @@ img {
p {
color: $color-text-soft;
font-size: 28px;
font-size: 22px;
line-height: 1.15;
font-weight:200;
}
}
}
@@ -382,8 +401,8 @@ img {
}
p {
font-size: 20px;
font-weight: 400;
font-size: 22px;
font-weight: 200;
line-height: 1.2;
}
}
@@ -432,16 +451,18 @@ img {
}
h3 {
margin-bottom: 10px;
margin-bottom: 7px;
font-size: 18px;
font-weight: 700;
/*font-weight: 700;*/
line-height: 1.2;
font-weight:600;
}
p {
color: $color-text-muted;
font-size: 16px;
line-height: 1.3;
font-weight:300;
}
}
@@ -496,6 +517,7 @@ img {
font-size: 34px;
font-weight: 700;
line-height: 1.1;
font-weight: 600;
}
p {
@@ -503,8 +525,19 @@ img {
color: $color-text-muted;
font-size: 18px;
line-height: 28px;
font-weight:300;
}
a.btn{
min-width: 200px;
width: 40%;
padding: 10px 24px;
border-radius: 10px;
font-size: 14px;
text-transform: uppercase;
font-weight:400;
}
ul {
margin-bottom: 24px;
}
@@ -559,14 +592,14 @@ img {
}
p {
font-size: 20px;
font-size: 22px;
line-height: 1.2;
}
}
&__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
width: 100%;
max-width: 896px;
@@ -609,7 +642,7 @@ img {
display: block;
font-family: $font-heading;
font-size: 21px;
font-weight: 700;
font-weight: 500;
line-height: 1.15;
position: relative;
z-index: 1;
@@ -629,8 +662,8 @@ img {
opacity: 0;
transform: translateY(10px);
color: $color-text-muted;
font-size: 15px;
font-weight: 500;
font-size: 16px;
font-weight: 400;
line-height: 1.45;
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
@@ -664,17 +697,24 @@ img {
&__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
margin-bottom: 28px;
@media (max-width: 768px) {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
}
&__note {
margin-bottom: 30px;
color: $color-text-soft;
font-size: 18px;
font-size: 14px;
line-height: 1.45;
text-align: center;
font-weight:200;
}
&__cta {
@@ -692,7 +732,7 @@ img {
&-item {
@include card;
min-height: 144px;
padding: 24px;
padding: 40px;
h3 {
margin-bottom: 10px;
@@ -710,8 +750,9 @@ img {
// Медиа-запрос для экранов меньше 600px
@media (max-width: 600px) {
padding: 16px; // Пример: уменьшаем внутренние отступы
padding: 40px; // Пример: уменьшаем внутренние отступы
min-height: auto; // Пример: убираем фиксированную минимальную высоту
text-align: center;
h3 {
font-size: 16px; // Пример: уменьшаем размер заголовка
@@ -811,21 +852,21 @@ img {
&__dots {
display: flex;
justify-content: center;
gap: 8px;
gap: 12px;
margin-top: 18px;
}
&__dot {
width: 10px;
height: 10px;
width: 16px;
height: 16px;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0.28);
background: rgba(255, 255, 255, 0.17);
cursor: pointer;
transition: width 0.2s ease, background-color 0.2s ease;
&.is-active {
width: 26px;
width: 16px;
background: $color-accent;
}
}
@@ -840,6 +881,7 @@ img {
flex-direction: column;
justify-content: space-between;
transition: transform 0.3s ease, border-color 0.3s ease;
margin-top:5px;
&:hover {
transform: translateY(-5px);
@@ -851,13 +893,15 @@ img {
color: $color-text-soft;
font-size: 16px;
line-height: 1.5;
font-weight: 200;
font-style: italic;
}
strong {
display: block;
margin-bottom: 10px;
font-size: 16px;
font-weight: 700;
font-weight: 400;
line-height: 1.2;
}
@@ -866,14 +910,16 @@ img {
border-top: 1px solid rgba(255, 255, 255, 0.08);
a {
color: #ffd2d2;
/*color: #ffd2d2;*/
color: #dfdfdf4a;
font-size: 14px;
font-weight: 500;
line-height: 1.4;
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
text-decoration-color: rgba(255, 210, 210, 0.75);
/*text-decoration-color: rgba(255, 210, 210, 0.75);*/
text-decoration-color: rgb(169 169 169 / 28%);
transition: color 0.2s ease, text-decoration-color 0.2s ease;
&:hover {
@@ -945,8 +991,8 @@ img {
p {
margin-bottom: 32px;
color: $color-text-soft;
font-size: 18px;
font-weight: 500;
font-size: 19px;
font-weight: 200;
line-height: 1.4;
}
@@ -966,6 +1012,7 @@ img {
font-size: 14px;
font-weight: 500;
line-height: 1.25;
display:none;
}
.required-mark {
@@ -1036,7 +1083,15 @@ img {
input,
select {
height: 56px;
}
select {
/* 1. Сбрасываем стандартный стиль браузера (стрелка исчезнет) */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #1f2325;
}
textarea {
min-height: 130px;
@@ -1113,6 +1168,7 @@ img {
color: $color-text-soft;
font-size: 16px;
line-height: 1.45;
font-weight:300;
}
small {
@@ -1140,7 +1196,7 @@ img {
height: 44px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 999px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.92);
text-decoration: none;
@@ -1397,7 +1453,8 @@ img {
margin-top: 16px;
color: rgba(255, 255, 255, 0.65);
font-size: 14px;
line-height: 1.28;
line-height: 1.5;
font-weight:300;
}
}
@@ -1406,7 +1463,7 @@ img {
h4 {
margin-bottom: 16px;
font-size: 16px;
font-weight: 700;
font-weight: 600;
line-height: 1.1;
}
@@ -1414,7 +1471,8 @@ img {
display: block;
color: rgba(255, 255, 255, 0.65);
font-size: 14px;
line-height: 1.35;
line-height: 1.5;
font-weight:300;
}
span {
@@ -1637,6 +1695,14 @@ img {
}
}
}
.footer {
&__nav,
&__contacts{
h4 {
margin-top: 15px;
}
}
}
}
@include respond($bp-lg) {
@@ -1839,10 +1905,12 @@ img {
}
.feature-card h3,
.object-card__content h3,
.booking h2 {
.object-card__content h3 {
font-size: 24px;
}
.booking h2 {
font-size: 32px;
}
.booking {
input,
@@ -1995,15 +2063,23 @@ img {
}
.info-card,
.feature-card,
.review-card,
.stats__item,
.contacts-card,
.hours-card,
.object-card__content {
padding: 24px;
}
.feature-card{
padding: 34px 24px;
background: hsl(0deg 0% 7% / 18%);
}
.contacts-card{
padding:33px;
}
.object-card__image {
min-height: 260px;
}

View File

@@ -1,4 +1,4 @@
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Montserrat:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;700&family=Montserrat:wght@100;300;400;500;600;700&display=swap");
:root {
color-scheme: dark;

View File

@@ -29,7 +29,7 @@
<div class="hero__bg" aria-hidden="true"></div>
<div class="container hero__content">
<h1>
Спорткомплекс полного цикла в <span>Москве:</span>
Спорткомплекс полного цикла в <span>Москве:</span><br>
лёд, залы, проживание и питание на одной территории
</h1>
<p>
@@ -80,7 +80,7 @@
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/renders/led.jpg');"></div>
<div class="object-card__content">
<h3>Два ледовых поля</h3>
<p>Стандарт 58×26 м. Тренировки, сборы, соревнования.</p>
<p>Стандарт 58×26 м. Тренировки, сборы, соревнования</p>
<a class="btn btn--small" href="#booking">Забронировать</a>
</div>
</article>
@@ -89,16 +89,16 @@
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/renders/basket.jpg');"></div>
<div class="object-card__content">
<h3>Универсальный зал</h3>
<p>Зал для игровых видов спорта, паркетное покрытие.</p>
<p>Зал для игровых видов спорта, паркетное покрытие</p>
<a class="btn btn--small" href="#booking">Забронировать</a>
</div>
</article>
<article class="object-card">
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/other/6399e455dd0120ee5802a0d0_643691cf6bb745.08564640.jpg');"></div>
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/renders/photo_olimp_sport4.jpg');"></div>
<div class="object-card__content">
<h3>Фитнес-центр</h3>
<p>Кардио, силовая и функциональная зоны. Premium-оборудование.</p>
<p>Кардио, силовая и функциональная зоны. Premium-оборудование</p>
<a class="btn btn--small" href="#booking">Подробнее</a>
</div>
</article>
@@ -107,34 +107,34 @@
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/other/1231.png');"></div>
<div class="object-card__content">
<h3>Зал хореографии</h3>
<p>Оборудован зеркалами и станками для занятий хореографией.</p>
<p>Оборудован зеркалами и станками для занятий хореографией</p>
<a class="btn btn--small" href="#booking">Подробнее</a>
</div>
</article>
<article class="object-card object-card--reverse">
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/other/6399e455dd0120ee5802a0d0_643691cf6bb745.08564640.jpg');"></div>
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/renders/arena_hotel.jpg');"></div>
<div class="object-card__content">
<h3>Апарт-отель</h3>
<p>70+ номеров для команд и гостей. Прямо на территории.</p>
<p>70+ номеров для команд и гостей. Прямо на территории</p>
<a class="btn btn--small" href="#booking">Подробнее</a>
</div>
</article>
<article class="object-card">
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/other/IMG_4521-min.jpg');"></div>
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/renders/photo_olimp_rest7.jpg');"></div>
<div class="object-card__content">
<h3>Ресторан</h3>
<p>Сбалансированное спортивное питание. Меню для команд.</p>
<p>Сбалансированное спортивное питание. Меню для команд</p>
<a class="btn btn--small" href="#booking">Подробнее</a>
</div>
</article>
<article class="object-card object-card--reverse">
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/other/8540eec74dd51616e6b30215183b38ad1-870x580.jpg');"></div>
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/renders/arena_parking.jpg');"></div>
<div class="object-card__content">
<h3>Парковка и подъезд</h3>
<p>Своя парковка для гостей и автобусов команд.</p>
<p>Своя парковка для гостей и автобусов команд</p>
<a class="btn btn--small" href="#booking">Подробнее</a>
</div>
</article>
@@ -254,9 +254,16 @@
<div class="gallery__item" style="background-image:url('./assets/images/renders/basket.jpg');"></div>
<div class="gallery__item" style="background-image:url('./assets/images/renders/led.jpg');"></div>
<div class="gallery__item" style="background-image:url('./assets/images/renders/ledadnbasket.jpg');"></div>
<div class="gallery__item" style="background-image:url('./assets/images/other/IMG_4521-min.jpg');"></div>
<div class="gallery__item" style="background-image:url('./assets/images/other/ledovie.jpg');"></div>
<div class="gallery__item" style="background-image:url('./assets/images/other/6399e455dd0120ee5802a0d0_643691cf6bb745.08564640.jpg');"></div>
<div class="gallery__item" style="background-image:url('./assets/images/renders/photo_olimp_rest1.jpg');"></div>
<div class="gallery__item" style="background-image:url('./assets/images/renders/photo_olimp_rest2.jpg');"></div>
<div class="gallery__item" style="background-image:url('./assets/images/renders/photo_olimp_rest3.jpg');"></div>
<div class="gallery__item" style="background-image:url('./assets/images/renders/photo_olimp_rest4.jpg');"></div>
<div class="gallery__item" style="background-image:url('./assets/images/renders/photo_olimp_rest5.jpg');"></div>
<div class="gallery__item" style="background-image:url('./assets/images/renders/photo_olimp_sport1.jpg');"></div>
<div class="gallery__item" style="background-image:url('./assets/images/renders/photo_olimp_sport2.jpg');"></div>
<div class="gallery__item" style="background-image:url('./assets/images/renders/photo_olimp_sport3.jpg');"></div>
</div>
</div>
</section>
@@ -382,7 +389,7 @@
<section class="section booking" id="booking">
<div class="container booking__wrap">
<div class="booking__form">
<h2>Оставьте заявку — подберём площадку и время</h2>
<h2>Оставьте заявку — подберём площадку и&nbsp;время</h2>
<p>Перезвоним в течение 15 минут в рабочее время и пришлём расчёт</p>
<form id="booking-form" action="#" method="post" novalidate data-metrika-id="" data-autoreply-endpoint="">
<div class="booking__field">
@@ -493,8 +500,24 @@
</svg>
</span>
</a>
<a class="contacts-card__messenger contacts-card__messenger--secondary" 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 class="contacts-card__messenger contacts-card__messenger--secondary" 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 class="contacts-card__links contacts-card__links--social">
<div style="display:none;" 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">
@@ -575,11 +598,11 @@
</nav>
<div class="footer__contacts">
<h4>Контакты и режим работы</h4>
<a href="tel:+79251404737">+7 (925) 140-47-37</a><br>
<a href="tel:+79251404737">+7 (925) 140-47-37</a>
<a href="tel:+79251404764">+7 (925) 140-47-64</a>
<a href="mailto:receptionadmin@o-arena.ru">receptionadmin@o-arena.ru</a>
<span>Москва, Автомобильный проезд, 4</span>
<span>Ежедневно с 06:00 до 23:00</span>
<a href="mailto:receptionadmin@o-arena.ru">receptionadmin@o-arena.ru</a><br>
<a>Москва, Автомобильный проезд, 4</a>
<a>Ежедневно с 06:00 до 23:00</a><br>
<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">
@@ -594,9 +617,24 @@
<use href="./assets/images/svg-sprites.svg#icon-telegram"></use>
</svg>
</span>
</a>
<a href="#" aria-label="Instagram">
<span class="footer__messenger-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>
<a href="#" aria-label="ВКонтакте">
<span class="footer__messenger-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>
</div>
<div class="footer__socials">
<div style="display:none;" class="footer__socials">
<a href="#" aria-label="Instagram">
<span class="footer__messenger-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
@@ -626,6 +664,235 @@
</footer>
</div>
<!-- Всплывающее окно бронирования -->
<div class="modal" id="booking-popup" aria-hidden="true" role="dialog" aria-modal="true">
<div class="modal__overlay" data-modal-close></div>
<div class="modal__content modal__content--white">
<button class="modal__close" data-modal-close aria-label="Закрыть">×</button>
<h2 class="modal__title">Забронировать время</h2>
<p class="modal__subtitle">Оставьте заявку — перезвоним в течение 15 минут</p>
<form id="popup-booking-form" action="send-form.php" method="POST" class="modal__form">
<div class="modal__field">
<label>Имя <span class="required">*</span></label>
<input type="text" name="name" required placeholder="Введите ваше имя">
</div>
<div class="modal__field">
<label>Телефон <span class="required">*</span></label>
<input type="tel" name="phone" required placeholder="Ваш телефон">
</div>
<div class="modal__field">
<label>Email</label>
<input type="email" name="email" placeholder="Ваша почта">
</div>
<div class="modal__consents">
<label class="consent-label">
<input type="checkbox" name="consent_policy" required>
<span>Согласен с <a href="#" target="_blank">политикой обработки персональных данных</a></span>
</label>
<label class="consent-label">
<input type="checkbox" name="consent" required>
<span>Даю согласие на обработку моих данных</span>
</label>
</div>
<button type="submit" class="btn btn--full">Отправить заявку</button>
</form>
</div>
</div>
<style>
/* Модальное окно */
.modal {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
display: none;
align-items: center;
justify-content: center;
z-index: 10000;
}
.modal--active { display: flex; }
.modal__overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.7);
}
.modal__content {
position: relative;
background: white;
padding: 40px 30px;
border-radius: 12px;
max-width: 420px;
width: 90%;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
z-index: 1;
}
.modal__content--white {
background: #ffffff;
color: #111;
}
.modal__close {
position: absolute;
top: 15px;
right: 20px;
font-size: 28px;
background: none;
border: none;
cursor: pointer;
color: #999;
}
.modal__title {
font-size: 24px;
margin-bottom: 8px;
text-align: center;
}
.modal__subtitle {
text-align: center;
color: #555;
margin-bottom: 25px;
font-weight: 300;
}
.modal__field {
margin-bottom: 18px;
}
.modal__field label {
display: block;
margin-bottom: 6px;
font-weight: 500;
display: none;
}
.modal__field input {
width: 100%;
padding: 12px 14px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 16px;
background: #f9f9f9;
color: #333;
}
.modal__consents {
margin: 20px 0;
font-size: 14px;
}
.consent-label {
display: flex;
align-items: flex-start;
gap: 8px;
margin-bottom: 12px;
cursor: pointer;
}
.consent-label input {
margin-top: 3px;
}
.btn--full {
width: 100%;
padding: 14px;
background: #e30613; /* красный акцент арены */
color: white;
border: none;
border-radius: 12px;
font-size: 16px;
cursor: pointer;
font-weight: 400;
text-transform: uppercase;
box-shadow: none;
}
</style>
<script>
// === МОДАЛЬНОЕ ОКНО + ОТПРАВКА ===
const popup = document.getElementById('booking-popup');
const form = document.getElementById('popup-booking-form');
if (popup && form) {
const openModal = () => {
popup.classList.add('modal--active');
popup.setAttribute('aria-hidden', 'false'); // ← исправление
// Перевод фокуса на первое поле
setTimeout(() => {
form.querySelector('input').focus();
}, 300);
};
const closeModal = () => {
popup.classList.remove('modal--active');
popup.setAttribute('aria-hidden', 'true');
};
// Открытие
document.querySelectorAll('a[href="#booking"], .btn[href="#booking"]').forEach(btn => {
btn.addEventListener('click', function(e) {
e.preventDefault();
openModal();
});
});
// Закрытие
document.querySelectorAll('[data-modal-close]').forEach(el => {
el.addEventListener('click', closeModal);
});
// Отправка формы (оставь как было, только добавь closeModal() при успехе)
form.addEventListener('submit', async function(e) {
e.preventDefault();
const submitBtn = form.querySelector('button[type="submit"]');
const originalText = submitBtn.textContent;
submitBtn.textContent = 'Отправляем...';
submitBtn.disabled = true;
try {
const response = await fetch('send-form.php', {
method: 'POST',
body: new FormData(form)
});
const result = await response.json();
if (result.status === "success") {
alert("✅ Заявка успешно отправлена!\nМы свяжемся с вами в ближайшее время.");
form.reset();
closeModal(); // ← используем функцию
} else {
alert("❌ " + (result.message || "Ошибка при отправке."));
}
} catch (error) {
console.error(error);
alert("❌ Ошибка соединения.");
}
submitBtn.textContent = originalText;
submitBtn.disabled = false;
});
}
</script>
<script src="./assets/js/main.js" defer></script>
</body>
</html>

43
send-form.php Normal file
View File

@@ -0,0 +1,43 @@
<?php
header('Content-Type: application/json; charset=utf-8');
if ($_SERVER["REQUEST_METHOD"] !== "POST") {
echo json_encode(["status" => "error", "message" => "Неверный запрос"]);
exit;
}
$name = trim(strip_tags($_POST["name"] ?? ""));
$phone = trim(strip_tags($_POST["phone"] ?? ""));
$email = trim(strip_tags($_POST["email"] ?? ""));
if (empty($name) || empty($phone)) {
echo json_encode(["status" => "error", "message" => "Имя и телефон обязательны"]);
exit;
}
//$to = "receptionadmin@o-arena.ru"; // ← Обязательно поменяй на свой реальный email!
$to = "rid89@mail.ru";
$subject = "Новая заявка с сайта OlimpArena";
$message = "📩 Новая заявка из всплывающего окна\n\n";
$message .= "Имя: $name\n";
$message .= "Телефон: $phone\n";
$message .= "Email: $email\n\n";
$message .= "Дата: " . date('d.m.Y H:i:s') . "\n";
$headers = "From: no-reply@olimparena.aiconversion.ru\r\n";
$headers .= "Reply-To: $email\r\n";
$headers .= "Content-Type: text/plain; charset=utf-8\r\n";
$headers .= "X-Mailer: PHP/" . phpversion();
if (mail($to, $subject, $message, $headers)) {
echo json_encode(["status" => "success"]);
} else {
error_log("MAIL ERROR: " . print_r(error_get_last(), true));
echo json_encode([
"status" => "error",
"message" => "Не удалось отправить письмо. Администратор уже уведомлён."
]);
}
?>