Merge pull request 'style: add some style 5 (modal form)' (#23 ) from style/design into main

Reviewed-on: #23
style: add some style 5 (modal form)
2026-06-05 08:55:47 +00:00 · 2026-06-05 11:55:17 +03:00 · 2026-06-05 08:01:16 +00:00 · 2026-06-05 11:00:13 +03:00 · 2026-06-04 15:05:04 +00:00 · 2026-06-04 18:03:51 +03:00
18 changed files with 487 additions and 101 deletions
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -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;
@@ -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;
@@ -1740,11 +1799,13 @@ img {
  .feature-card,
  .review-card,
  .stats__item,
-  .contacts-card,
  .hours-card,
  .object-card__content {
    padding: 24px;
  }
+  .contacts-card {
+    padding: 33px;
+  }
  .object-card__image {
    min-height: 260px;
  }
--- a/assets/css/main.min.css
+++ b/assets/css/main.min.css
--- a/assets/images/renders/no_photo.png
+++ b/assets/images/renders/no_photo.png
--- a/assets/images/renders/photo_olimp_rest1.jpg
+++ b/assets/images/renders/photo_olimp_rest1.jpg
--- a/assets/images/renders/photo_olimp_rest2.jpg
+++ b/assets/images/renders/photo_olimp_rest2.jpg
--- a/assets/images/renders/photo_olimp_rest3.jpg
+++ b/assets/images/renders/photo_olimp_rest3.jpg
--- a/assets/images/renders/photo_olimp_rest4.jpg
+++ b/assets/images/renders/photo_olimp_rest4.jpg
--- a/assets/images/renders/photo_olimp_rest5.jpg
+++ b/assets/images/renders/photo_olimp_rest5.jpg
--- a/assets/images/renders/photo_olimp_rest6.jpg
+++ b/assets/images/renders/photo_olimp_rest6.jpg
--- a/assets/images/renders/photo_olimp_rest7.jpg
+++ b/assets/images/renders/photo_olimp_rest7.jpg
--- a/assets/images/renders/photo_olimp_sport1.jpg
+++ b/assets/images/renders/photo_olimp_sport1.jpg
--- a/assets/images/renders/photo_olimp_sport2.jpg
+++ b/assets/images/renders/photo_olimp_sport2.jpg
--- a/assets/images/renders/photo_olimp_sport3.jpg
+++ b/assets/images/renders/photo_olimp_sport3.jpg
--- a/assets/images/renders/photo_olimp_sport4.jpg
+++ b/assets/images/renders/photo_olimp_sport4.jpg
--- a/assets/scss/_base.scss
+++ b/assets/scss/_base.scss
@@ -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,6 +525,17 @@ 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 {
@@ -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; // Пример: уменьшаем размер заголовка
@@ -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,6 +1083,14 @@ img {
    input,
    select {
        height: 56px;
+
+    }
+	select {
+		/* 1. Сбрасываем стандартный стиль браузера (стрелка исчезнет) */
+		-webkit-appearance: none;
+		-moz-appearance: none;
+		appearance: none;
+		background-color: #1f2325;
 	}

    textarea {
@@ -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,
@@ -1998,12 +2066,16 @@ img {
    .feature-card,
    .review-card,
    .stats__item,
-    .contacts-card,
    .hours-card,
    .object-card__content {
        padding: 24px;
    }
 	
+	.contacts-card{
+		padding:33px;
+	}
+
+
    .object-card__image {
        min-height: 260px;
    }
--- a/assets/scss/_fonts.scss
+++ b/assets/scss/_fonts.scss
@@ -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;
--- a/index.html
+++ b/index.html
@@ -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/no_photo.png');"></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/no_photo.png');"></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,189 @@
            </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>
+			// Открытие модального окна
+			document.querySelectorAll('[href="#booking"], .btn[href="#booking"]').forEach(btn => {
+				btn.addEventListener('click', function(e) {
+					e.preventDefault();
+					document.getElementById('booking-popup').classList.add('modal--active');
+				});
+			});
+
+			// Закрытие
+			document.querySelectorAll('[data-modal-close]').forEach(el => {
+				el.addEventListener('click', () => {
+					document.getElementById('booking-popup').classList.remove('modal--active');
+				});
+			});
+
+			// Закрытие по Esc
+			document.addEventListener('keydown', e => {
+				if (e.key === "Escape") {
+					document.getElementById('booking-popup').classList.remove('modal--active');
+				}
+			});
+		</script>
+
+
+
+
+
        <script src="./assets/js/main.js" defer></script>
    </body>
 </html>
--- a/send-form.php
+++ b/send-form.php
@@ -0,0 +1,32 @@
+<?php
+if ($_SERVER["REQUEST_METHOD"] == "POST") {
+    $name  = strip_tags(trim($_POST["name"]));
+    $phone = strip_tags(trim($_POST["phone"]));
+    $email = strip_tags(trim($_POST["email"]));
+
+    //$to = "receptionadmin@o-arena.ru"; // поменяй на свой реальный email
+	$to = "rid89@mail.ru"; // поменяй на свой реальный email
+    $subject = "Новая заявка с сайта OlimpArena";
+
+    $message = "Имя: $name\n";
+    $message .= "Телефон: $phone\n";
+    $message .= "Email: $email\n";
+    $message .= "Дата отправки: " . date('d.m.Y H:i') . "\n";
+
+    $headers = "From: no-reply@o-arena.ru\r\n";
+    $headers .= "Reply-To: $email\r\n";
+    $headers .= "Content-Type: text/plain; charset=utf-8\r\n";
+
+    if (mail($to, $subject, $message, $headers)) {
+        // Можно перенаправить на успех
+        header("Location: index.html#booking-success-modal"); 
+        // или показать JSON для JS
+        echo json_encode(["status" => "success"]);
+    } else {
+        echo json_encode(["status" => "error"]);
+    }
+} else {
+    http_response_code(403);
+    echo "Доступ запрещён";
+}
+?>
Author	SHA1	Message	Date
artem	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 Details Reviewed-on: #23	2026-06-05 08:55:47 +00:00
Artem	d3a6cf9540	style: add some style 5 (modal form)	2026-06-05 11:55:17 +03:00
artem	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 Details Reviewed-on: #22	2026-06-05 08:01:16 +00:00
Artem	00b63f0991	style: add some style 4	2026-06-05 11:00:13 +03:00
artem	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 Details Reviewed-on: #21	2026-06-04 15:05:04 +00:00
Artem	79ebb16243	style: add some style 3	2026-06-04 18:03:51 +03:00
artem	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 Details Reviewed-on: #20	2026-06-04 14:15:53 +00:00
Artem	7ac00579ca	style: add some style 2	2026-06-04 17:09:03 +03:00
artem	6bb7c2cf6c	Merge pull request 'style/design' (#19 ) from style/design into main All checks were successful Deploy Olimparena / deploy (push) Successful in 15s Details Reviewed-on: #19	2026-06-04 13:47:09 +00:00
Artem	ac6ddd0b96	style: add some style	2026-06-04 16:45:02 +03:00
Artem	f77ca86e81	Fix font size conflict	2026-06-04 16:43:17 +03:00
artem	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 Details Reviewed-on: #18	2026-06-03 12:03:17 +00:00
Artem	3dd98c874e	style: add styles and photos	2026-06-03 15:01:22 +03:00
artem	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 Details Reviewed-on: #17	2026-06-02 15:07:29 +00:00