From ad352656d37b92e18a6aa55b525bfdc533627fd2 Mon Sep 17 00:00:00 2001
From: Yevhenii Kolesnik <ruvelski1@gmail.com>
Date: Fri, 4 Oct 2024 13:25:08 +0200
Subject: [PATCH] fixed paddings, hover effects, autofill styles

---
 src/index.html                |  7 -------
 src/styles/blocks/form.scss   | 14 ++++++++++++++
 src/styles/blocks/header.scss |  2 --
 src/styles/blocks/info.scss   |  1 +
 src/styles/utils/_mixins.scss | 18 +++++++++---------
 5 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/src/index.html b/src/index.html
index 639ed9f3a9..9dd35b668c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -51,7 +51,6 @@
               alt="Logo"
             />
           </a>
-
           <a
             href="#menu"
             class="top-bar__menu-link"
@@ -63,7 +62,6 @@
             />
           </a>
         </div>
-
         <nav class="top-bar__nav nav">
           <ul class="nav__list">
             <li class="nav__item">
@@ -105,7 +103,6 @@
             </li>
           </ul>
         </nav>
-
         <a
           href="#contacts"
           class="top-bar__hire"
@@ -113,7 +110,6 @@
           Hire Us
         </a>
       </div>
-
       <div class="header__content">
         <h1 class="header__title">Strategic Agency</h1>
         <p class="header__subtitle">
@@ -126,7 +122,6 @@ <h1 class="header__title">Strategic Agency</h1>
         >
           Learn more
         </a>
-
         <div class="header__slider slider">
           <div class="slider__slides">
             <img
@@ -145,7 +140,6 @@ <h1 class="header__title">Strategic Agency</h1>
               alt="Slide 3"
             />
           </div>
-
           <div class="slider__wrapper">
             <div class="slider__scrollers scrollers">
               <div class="scrollers__ellipse scrollers__ellipse--left">
@@ -177,7 +171,6 @@ <h1 class="header__title">Strategic Agency</h1>
                 </svg>
               </div>
             </div>
-
             <div class="slider__description">
               <h5 class="slider__title">Intro</h5>
               <p class="slider__subtitle">
diff --git a/src/styles/blocks/form.scss b/src/styles/blocks/form.scss
index ef373f98c3..1b3b318969 100644
--- a/src/styles/blocks/form.scss
+++ b/src/styles/blocks/form.scss
@@ -33,6 +33,11 @@
     &:focus {
       outline: none;
       border-bottom-color: $c-blue;
+      transition: border-bottom-color 0.3s ease;
+    }
+
+    &:not(:focus) {
+      border-bottom-color: initial;
     }
 
     &:last-child {
@@ -46,6 +51,15 @@
     &::placeholder {
       color: rgba(255, 255, 255, 0.7);
     }
+
+    &:-webkit-autofill,
+    &:-webkit-autofill:hover,
+    &:-webkit-autofill:focus {
+      border-bottom-color: $c-blue;
+      -webkit-text-fill-color: $c-white;
+      -webkit-box-shadow: 0 0 0px 1000px $c-dark-gray inset;
+      caret-color: $c-white;
+    }
   }
 
   &__button {
diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss
index bf7071b67f..7eaf64a21f 100644
--- a/src/styles/blocks/header.scss
+++ b/src/styles/blocks/header.scss
@@ -1,6 +1,4 @@
 .header {
-  @include element-grid;
-
   width: 100%;
   height: 100vh;
   background-color: $c-dark-gray;
diff --git a/src/styles/blocks/info.scss b/src/styles/blocks/info.scss
index fdbda27bd4..17f3f4cadc 100644
--- a/src/styles/blocks/info.scss
+++ b/src/styles/blocks/info.scss
@@ -24,6 +24,7 @@
     &-link {
       color: $c-white;
       text-decoration: none;
+      @include hover(text-shadow, 0 0 2px $c-white);
     }
 
     @include text-styler(Open Sans, 600, 24px, 36px, $c-white);
diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss
index 0f89978dee..5541e1f3d4 100644
--- a/src/styles/utils/_mixins.scss
+++ b/src/styles/utils/_mixins.scss
@@ -24,7 +24,7 @@
 }
 
 @mixin on-tablet {
-  @media (max-width: 1023px) {
+  @media (max-width: 1080px) {
     @content;
   }
 }
@@ -44,18 +44,18 @@
   grid-template-columns: repeat(var(--columns), 68px);
 
   @include on-desktop-xl {
-    margin-inline: 54px;
+    padding-inline: 54px;
   }
 
   @include on-desktop {
-    margin-inline: 54px;
+    padding-inline: 54px;
     column-gap: 20px;
   }
 
   @include on-tablet {
     --columns: 6;
 
-    margin-inline: 41px;
+    padding-inline: 41px;
     column-gap: 30px;
   }
 
@@ -63,7 +63,7 @@
     --columns: 2;
 
     grid-template-columns: repeat(var(--columns), 130px);
-    margin-inline: 20px;
+    padding-inline: 20px;
     column-gap: 20px;
   }
 }
@@ -96,19 +96,19 @@
 
 @mixin paddings {
   @include on-desktop-xl {
-    margin-inline: 54px;
+    padding-inline: 54px;
   }
 
   @include on-desktop {
-    margin-inline: 54px;
+    padding-inline: 54px;
   }
 
   @include on-tablet {
-    margin-inline: 41px;
+    padding-inline: 41px;
   }
 
   @include on-phone {
-    margin-inline: 20px;
+    padding-inline: 20px;
   }
 }