feat: fixed issues

assets/css/index.css

@@ -55,6 +55,11 @@ body {
   color: #2d2d2d;
   background-color: #ededed;
 }
+@media (max-width: 992px) {
+  body.hidden {
+    overflow: hidden;
+  }
+}
 
 a,
 button,
@@ -277,6 +282,16 @@ h3 {
   transition: all ease-in-out 0.1s;
   cursor: pointer;
 }
+@keyframes move-light {
+  from {
+    transform: translateX(-40px) skewX(-45deg);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(400px) skewX(-45deg);
+    opacity: 0.8;
+  }
+}
 .button--lg {
   display: flex;
   align-items: center;
@@ -315,29 +330,59 @@ h3 {
   background: url(../img/icons/ruble.svg) center no-repeat;
 }
 .button--light {
+  position: relative;
+  overflow: hidden;
   color: #2d2d2d;
   background-color: #ffffff;
 }
 .button--light:hover {
   color: #609eff;
 }
+.button--light:hover::after {
+  animation: move-light 0.5s;
+}
 .button--light:active {
   color: #3081ff;
 }
+.button--light::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1.5em;
+  height: 100%;
+  background-color: rgba(96, 158, 255, 0.5);
+  transform: translateX(-4em) skewX(-45deg);
+}
 .button--dark {
-  background-color: #609eff;
+  position: relative;
+  overflow: hidden;
   color: #ffffff;
   border-color: rgba(255, 255, 255, 0.3);
+  background-color: #609eff;
 }
 .button--dark:hover {
   color: #609eff;
   background-color: #ffffff;
   border-color: #609eff;
 }
+.button--dark:hover::after {
+  animation: move-light 0.5s;
+}
 .button--dark:active {
   color: #3081ff;
   border-color: #3081ff;
 }
+.button--dark::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1.5em;
+  height: 100%;
+  background-color: rgba(96, 158, 255, 0.5);
+  transform: translateX(-4em) skewX(-45deg);
+}
 .button--dark::before {
   filter: brightness(10);
 }
@@ -527,9 +572,12 @@ h3 {
     top: 70px;
     left: 0;
     right: 0;
+    bottom: 0;
+    z-index: 1000;
     flex-direction: column;
     gap: 0;
     padding: 7px 7px 44px;
+    overflow: auto;
     border-radius: 40px 7px;
     background-color: #609eff;
     transform: translateX(-200%);
@@ -1369,8 +1417,10 @@ h3 {
   justify-content: flex-start;
   gap: 20px;
   padding: 11px 29px 15px;
-  border: 1px solid rgba(98, 98, 98, 0.25);
+  color: #878787;
+  border: 1px solid #ffffff;
   border-radius: 8px 25px;
+  background-color: #ffffff;
   transition: all ease-in-out 0.1s;
   cursor: pointer;
 }
@@ -1380,17 +1430,19 @@ h3 {
     padding: 8px 21px;
   }
 }
-.step-by-step__controls-button:hover, .step-by-step__controls-button.active:hover {
+.step-by-step__controls-button:hover {
   background-color: #609eff;
   border-color: #609eff;
+  color: #ffffff;
 }
-.step-by-step__controls-button:active, .step-by-step__controls-button.active:active {
+.step-by-step__controls-button:active {
   background-color: #3081ff;
   border-color: #3081ff;
+  color: #ffffff;
 }
 .step-by-step__controls-button.active {
-  border-color: white;
+  border-color: #609eff;
-  background-color: #ffffff;
+  background-color: #609eff;
 }
 .step-by-step__controls-button-number {
   font-weight: 500;
@@ -1407,18 +1459,18 @@ h3 {
   font-weight: 400;
   font-size: 24px;
   line-height: 146%;
-  color: #4d4d4d;
+  color: #878787;
   font-size: 20px;
 }
+.step-by-step__controls-button:hover .step-by-step__controls-button-number, .step-by-step__controls-button:hover .step-by-step__controls-button-text, .step-by-step__controls-button:active .step-by-step__controls-button-number, .step-by-step__controls-button:active .step-by-step__controls-button-text {
+  color: #ffffff;
+}
 .step-by-step__controls-button.active .step-by-step__controls-button-number {
   font-weight: 700;
-  color: #2d2d2d;
+  color: #ffffff;
 }
 .step-by-step__controls-button.active .step-by-step__controls-button-text {
   font-weight: 500;
-  color: #4d4d4d;
-}
-.step-by-step__controls-button:hover .step-by-step__controls-button-number, .step-by-step__controls-button:hover .step-by-step__controls-button-text {
   color: #ffffff;
 }
 .step-by-step__content {
@@ -2787,6 +2839,7 @@ h3 {
   font-size: 21px;
   line-height: 146%;
   color: #2d2d2d;
+  cursor: pointer;
 }
 @media (max-width: 768px) {
   .faq__item-question {

assets/js/nav.js

@@ -5,6 +5,7 @@ if (burger && headerNav) {
   burger.addEventListener('click', () => {
     headerNav.classList.toggle('active');
     burger.classList.toggle('active');
+    document.body.classList.toggle('hidden')
   });
 
   headerNav.addEventListener('click', (event) => {
@@ -15,6 +16,7 @@ if (burger && headerNav) {
     if (isLink || isPhone || isButton) {
       headerNav.classList.remove('active');
       burger.classList.remove('active');
+      document.body.classList.remove('hidden')
     }
   });
 }

assets/scss/_b-reset.scss

@@ -78,6 +78,12 @@ body {
   overflow-y: scroll;
   color: $black;
   background-color: $greybg;
+
+  &.hidden {
+    @include laptop {
+      overflow: hidden;
+    }
+  }
 }
 
 a,

assets/scss/_l-faq.scss

@@ -60,6 +60,7 @@
       font-size: 21px;
       line-height: 146%;
       color: $black;
+      cursor: pointer;
 
       @include tablet {
         font-size: 18px;

assets/scss/_l-header.scss

@@ -35,9 +35,12 @@
       top: 70px;
       left: 0;
       right: 0;
+      bottom: 0;
+      z-index: 1000;
       flex-direction: column;
       gap: 0;
       padding: 7px 7px 44px;
+      overflow: auto;
       border-radius: 40px 7px;
       background-color: $blue;
       transform: translateX(-200%);

assets/scss/_l-step-by-step.scss

@@ -50,8 +50,10 @@
       justify-content: flex-start;
       gap: 20px;
       padding: 11px 29px 15px;
-      border: 1px solid rgba(98, 98, 98, 0.25);
+      color: $grey;
+      border: 1px solid $white;
       border-radius: 8px 25px;
+      background-color: $white;
       transition: all ease-in-out 0.1s;
       cursor: pointer;
 
@@ -60,21 +62,21 @@
         padding: 8px 21px;
       }
 
-      &:hover,
+      &:hover {
-      &.active:hover {
         background-color: $blue;
         border-color: $blue;
+        color: $white;
       }
 
-      &:active,
+      &:active {
-      &.active:active {
         background-color: $darkblue;
         border-color: $darkblue;
+        color: $white;
       }
 
       &.active {
-        border-color: rgba($color: $white, $alpha: 1);
+        border-color: $blue;
-        background-color: $white;
+        background-color: $blue;
       }
 
       &-number {
@@ -92,23 +94,24 @@
         font-weight: 400;
         font-size: 24px;
         line-height: 146%;
-        color: $darkgrey;
+        color: $grey;
-
         font-size: 20px;
       }
 
+      &:hover &-number,
+      &:hover &-text,
+      &:active &-number,
+      &:active &-text {
+        color: $white;
+      }
+
       &.active &-number {
         font-weight: 700;
-        color: $black;
+        color: $white;
       }
 
       &.active &-text {
         font-weight: 500;
-        color: $darkgrey;
-      }
-
-      &:hover &-number,
-      &:hover &-text {
         color: $white;
       }
     }

assets/scss/_m-button.scss

@@ -5,6 +5,17 @@
   transition: all ease-in-out 0.1s;
   cursor: pointer;
 
+  @keyframes move-light {
+    from {
+      transform: translateX(-40px) skewX(-45deg);
+      opacity: 1;
+    }
+    to {
+      transform: translateX(400px) skewX(-45deg);
+      opacity: 0.8;
+    }
+  }
+
   &--lg {
     display: flex;
     align-items: center;
@@ -50,27 +61,50 @@
   }
 
   &--light {
+    position: relative;
+    overflow: hidden;
     color: $black;
     background-color: $white;
 
     &:hover {
       color: $blue;
+
+      &::after {
+        animation: move-light 0.5s;
+      }
     }
 
     &:active {
       color: $darkblue;
     }
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 1.5em;
+      height: 100%;
+      background-color: rgba($color: $blue, $alpha: 0.5);
+      transform: translateX(-4em) skewX(-45deg);
+    }
   }
 
   &--dark {
-    background-color: $blue;
+    position: relative;
+    overflow: hidden;
     color: $white;
     border-color: rgba($color: $white, $alpha: 0.3);
+    background-color: $blue;
 
     &:hover {
       color: $blue;
       background-color: $white;
       border-color: $blue;
+
+      &::after {
+        animation: move-light 0.5s;
+      }
     }
 
     &:active {
@@ -78,6 +112,17 @@
       border-color: $darkblue;
     }
 
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 1.5em;
+      height: 100%;
+      background-color: rgba($color: $blue, $alpha: 0.5);
+      transform: translateX(-4em) skewX(-45deg);
+    }
+
     &::before {
       filter: brightness(10);
     }
@@ -110,7 +155,7 @@
 
     &--light {
       color: #dcdcdc;
-      border-color: rgba($color: $white, $alpha: 1.0);
+      border-color: rgba($color: $white, $alpha: 1);
     }
 
     &--white {
@@ -123,7 +168,7 @@
         border-color: $white;
         background-color: $blue;
       }
-  
+
       &:active {
         border-color: $white;
         background-color: $darkblue;

index.html

@@ -109,9 +109,9 @@
               <button class="button button--lg button--lg--consult button--light button--callback">
                 Получить консультацию
               </button>
-              <button class="button button--lg button--lg--coin button--dark">
+              <a href="#price" class="button button--lg button--lg--coin button--dark">
                 Посмотреть цены
-              </button>
+              </a>
             </div>
           </div>
         </div>
@@ -518,6 +518,7 @@
                 type="text"
                 placeholder="Введите ваше имя"
                 autocomplete="off"
+                minlength="3"
                 required
               />
               <input
@@ -526,6 +527,7 @@
                 type="tel"
                 placeholder="Введите ваш телефон"
                 autocomplete="off"
+                pattern="(^8|7|\+7)((\d{10})|(\s\(\d{3}\)\s\d{3}\s\d{2}\s\d{2}))"
                 required
               />
               <button class="button button--lg button--light">Получить помощь</button>
@@ -1913,6 +1915,7 @@
                 type="text"
                 placeholder="Введите ваше имя"
                 autocomplete="off"
+                minlength="3"
                 required
               />
               <input
@@ -1921,6 +1924,7 @@
                 type="text"
                 placeholder="Введите ваш телефон"
                 autocomplete="off"
+                pattern="(^8|7|\+7)((\d{10})|(\s\(\d{3}\)\s\d{3}\s\d{2}\s\d{2}))"
                 required
               />
               <button class="button button--lg button--light">Получить помощь</button>
@@ -2007,6 +2011,7 @@
               type="text"
               placeholder="Введите ваше имя"
               autocomplete="off"
+              minlength="3"
               required
             />
             <input
@@ -2015,6 +2020,7 @@
               type="tel"
               placeholder="Введите ваш телефон"
               autocomplete="off"
+              pattern="(^8|7|\+7)((\d{10})|(\s\(\d{3}\)\s\d{3}\s\d{2}\s\d{2}))"
               required
             />
             <button class="button button--lg button--light">Получить помощь</button>