From 08427f065563281b5fcf4ce7ce6a40c61b54fd3f Mon Sep 17 00:00:00 2001
From: Luiz Felipe Silva <felipesilva9627@hotmail.com>
Date: Wed, 18 Jan 2023 23:37:23 -0300
Subject: [PATCH] =?UTF-8?q?style:=20trocado=20cor=20hexadecimal=20por=20va?=
 =?UTF-8?q?ri=C3=A1vel=20sass.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../section/ContentContato.module.scss        | 10 +--
 .../section/FormContato.module.scss           | 61 +++++++++++++++++--
 .../section/NavInstitucional.module.scss      | 10 ++-
 3 files changed, 67 insertions(+), 14 deletions(-)

diff --git a/src/components/section/ContentContato.module.scss b/src/components/section/ContentContato.module.scss
index 0f5a74b..7f596aa 100644
--- a/src/components/section/ContentContato.module.scss
+++ b/src/components/section/ContentContato.module.scss
@@ -17,7 +17,7 @@
         font-size: 14px;
         font-weight: 400;
         line-height: 16px;
-        color: $black;
+        color: $black-100;
       }
 
       input {
@@ -27,13 +27,13 @@
         padding: 15px 20px;
         margin: 12px 0;
         outline: none;
-        border: 1px solid #100d0e;
+        border: 1px solid $black-300;
 
         &::placeholder {
           font-size: 14px;
           font-weight: 400;
           line-height: 16px;
-          color: #b9b7b7;
+          color: $primary-500;
         }
       }
     }
@@ -50,7 +50,7 @@
 
         p {
           text-decoration: underline;
-          color: #100d0e;
+          color: $black-300;
           font-size: 14px;
           font-weight: 400;
           line-height: 16px;
@@ -71,7 +71,7 @@
       width: 100%;
       height: 52px;
       border-radius: 25px;
-      background-color: $black;
+      background-color: $black-100;
       color: $white;
       font-size: 16px;
       font-weight: 400;
diff --git a/src/components/section/FormContato.module.scss b/src/components/section/FormContato.module.scss
index 86bc6fc..cc28730 100644
--- a/src/components/section/FormContato.module.scss
+++ b/src/components/section/FormContato.module.scss
@@ -9,6 +9,11 @@
     line-height: 28px;
     margin: 12px 0;
 
+    @media (min-width: 2500px) {
+      font-size: 48px;
+      line-height: 56px;
+    }
+
     @media (max-width: 1024px) {
       text-align: center;
       margin-top: 30px;
@@ -24,7 +29,12 @@
         font-size: 14px;
         font-weight: 400;
         line-height: 16px;
-        color: $black;
+        color: $black-100;
+
+        @media (min-width: 2500px) {
+          font-size: 28px;
+          line-height: 33px;
+        }
       }
 
       .formInvalid {
@@ -32,6 +42,12 @@
         position: absolute;
         right: 15px;
         color: $primary-900;
+
+        @media (min-width: 2500px) {
+          font-size: 24px;
+          line-height: 28px;
+          top: 15px;
+        }
       }
 
       input {
@@ -41,13 +57,24 @@
         padding: 15px 20px;
         margin: 12px 0;
         outline: none;
-        border: 1px solid #100d0e;
+        border: 1px solid $black-300;
+
+        @media (min-width: 2500px) {
+          height: 63px;
+          font-size: 28px;
+          line-height: 33px;
+        }
 
         &::placeholder {
           font-size: 14px;
           font-weight: 400;
           line-height: 16px;
-          color: #b9b7b7;
+          color: $primary-500;
+
+          @media (min-width: 2500px) {
+            font-size: 28px;
+            line-height: 33px;
+          }
         }
       }
     }
@@ -63,6 +90,10 @@
         color: $primary-900;
         grid-row: 1;
 
+        @media (min-width: 2500px) {
+          font-size: 28px;
+        }
+
         @media (max-width: 620px) {
           bottom: 25px;
         }
@@ -71,15 +102,27 @@
       label {
         margin: 0 4px;
         text-decoration: underline;
-        color: #100d0e;
+        color: $black-300;
         font-size: 14px;
         font-weight: 400;
         line-height: 16px;
-        width: 137px;
+        width: max-content;
+
+        @media (min-width: 2500px) {
+          font-size: 28px;
+          font-weight: 400;
+          line-height: 33px;
+        }
       }
 
       input {
         width: 18px;
+        height: 16px;
+
+        @media (min-width: 2500px) {
+          width: 36px;
+          height: 35px;
+        }
       }
     }
 
@@ -87,7 +130,7 @@
       width: 100%;
       height: 52px;
       border-radius: 25px;
-      background-color: $black;
+      background-color: $black-100;
       color: $white;
       font-size: 16px;
       font-weight: 400;
@@ -96,6 +139,12 @@
       text-transform: uppercase;
       outline: none;
       border: none;
+
+      @media (min-width: 2500px) {
+        height: 71px;
+        font-size: 32px;
+        line-height: 38px;
+      }
     }
   }
 }
diff --git a/src/components/section/NavInstitucional.module.scss b/src/components/section/NavInstitucional.module.scss
index 4b86b6a..d94fa91 100644
--- a/src/components/section/NavInstitucional.module.scss
+++ b/src/components/section/NavInstitucional.module.scss
@@ -10,9 +10,13 @@
 
   ul {
     list-style: none;
-    border-right: 1px solid #000;
+    border-right: 1px solid $black-100;
     height: 285px;
 
+    @media (min-width: 2500px) {
+      height: 465px;
+    }
+
     @media (max-width: 1024px) {
       height: auto;
       border-right: none;
@@ -23,7 +27,7 @@
       align-items: center;
       width: 302px;
       height: 39px;
-     
+
       @media (min-width: 2500px) {
         width: 590px;
         height: 58px;
@@ -49,7 +53,7 @@
 
     .active {
       display: flex;
-      background-color: $black;
+      background-color: $black-100;
       width: 100%;
       padding: 10px 16px;
       color: $white;