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;