diff --git a/src/pages/Institutional/Contact/fragments/Input.tsx b/src/pages/Institutional/Contact/fragments/Input.tsx index c8ac759..2d7ca1f 100644 --- a/src/pages/Institutional/Contact/fragments/Input.tsx +++ b/src/pages/Institutional/Contact/fragments/Input.tsx @@ -10,20 +10,21 @@ interface InputProps extends InputHTMLAttributes { export function Input({ label, name, error, ...props }: InputProps) { return (
-
- + + +
+
-
) } diff --git a/src/pages/Institutional/Contact/index.module.scss b/src/pages/Institutional/Contact/index.module.scss index 1dfe57b..10c8e6a 100644 --- a/src/pages/Institutional/Contact/index.module.scss +++ b/src/pages/Institutional/Contact/index.module.scss @@ -17,17 +17,42 @@ margin-bottom: 12px; } - .form-group-header { + label { display: flex; align-items: center; justify-content: space-between; + display: block; + padding: 0 15px; margin-bottom: 12px; - label { - display: block; + + font-size: var(--txt-normal); + line-height: 16.41px; + @media screen and (min-width: 2500px) { + line-height: 32.81px; } + } + + .form-group-content { + position: relative; + width: 100%; .error-message { + position: absolute; + width: 100%; + padding: 0 16px; + + text-align: end; + + top: 0; + right: 0; + transform: translateY(-100%); color: red; + font-size: var(--txt-xs); + line-height: 14.06px; + + @media screen and (min-width: 2500px) { + line-height: 28.13px; + } } } @@ -40,6 +65,20 @@ border: 1px solid var(--clr-gray-1000); border-radius: 25px; + + font-size: var(--txt-normal); + line-height: 16.41px; + + @media screen and (min-width: 2500px) { + height: 63px; + padding: 15px 20px; + line-height: 32.81px; + } + + &::-webkit-input-placeholder, + &::placeholder { + color: var(--clr-gray-450); + } } .form-check { @@ -53,10 +92,12 @@ label { text-decoration: underline; + margin: 0; + padding: 0; span { - display: inline-block; - + display: inline-block; + text-decoration: none; color: var(--clr-common-red); } @@ -65,8 +106,11 @@ input[type='checkbox'] { width: 18.64px; height: 18px; - border-radius: 3px; - border: 1px solid var(--clr-common-black); + + &:checked { + border-radius: 3px; + border: 1px solid var(--clr-common-black); + } } } @@ -75,6 +119,12 @@ height: 52.44px; border-radius: 25px; + font-weight: 400; + + font-size: var(--txt-medium); + line-height: 18.75px; + letter-spacing: 0.05em; + display: flex; align-items: center; justify-content: center; @@ -82,5 +132,9 @@ color: var(--clr-common-white); text-transform: uppercase; + + @media screen and (min-width: 2500px) { + height: 71px; + } } } diff --git a/src/routes/index.module.scss b/src/routes/index.module.scss index 0202381..68c08ce 100644 --- a/src/routes/index.module.scss +++ b/src/routes/index.module.scss @@ -12,6 +12,10 @@ main :global { line-height: 14.06px; text-transform: uppercase; + + @media screen and (min-width: 2500px) { + line-height: 28.13px; + } } } diff --git a/src/template/Footer/index.module.scss b/src/template/Footer/index.module.scss index d6b3277..ed1eaed 100644 --- a/src/template/Footer/index.module.scss +++ b/src/template/Footer/index.module.scss @@ -156,6 +156,7 @@ a { font-weight: 400; font-size: var(--txt-xs); + line-height: 14.06px; color: var(--clr-gray-800); transition: color 200ms ease; @@ -163,6 +164,10 @@ &:hover { color: var(--clr-primary-blue-500); } + + @media screen and (min-width: 2500px) { + line-height: 28.13px; + } } li:last-child { @@ -190,7 +195,7 @@ } @media only screen and (min-width: 2500px) { - width: function.fluid(1531px, 2500px); + width: function.fluid(1531px, 2299.68px); & > li { width: function.fluid(315px, 1531px); @@ -210,9 +215,15 @@ h4 { font-weight: 500; font-size: var(--txt-normal); + line-height: 16.41px; + text-transform: uppercase; color: var(--clr-gray-800); + + @media screen and (min-width: 2500px) { + line-height: 32.81px; + } } } @@ -249,6 +260,47 @@ li:last-child { margin-left: 10.49px; } + + @media screen and (min-width: 1025px) { + width: function.fluid(398.61px, 1080px); + + gap: 12px; + @each $index in('1', '2', '3', '4', '5', '6', '7') { + li:nth-child(#{$index}) { + margin: 0px; + } + } + + li { + width: function.fluid(36px, 398.61px); + min-height: 20.2px; + + img { + width: 100%; + height: 100%; + } + } + + li:last-child { + width: function.fluid(54.61px, 398.61px); + min-height: 34px; + margin: 0; + } + } + + @media screen and (min-width: 2500px) { + width: function.fluid(692px, 2299.68px); + + li { + width: function.fluid(70px, 692px); + min-height: 39.27px; + } + + li:last-child { + width: function.fluid(106px, 692px); + min-height: 66px; + } + } } .social { diff --git a/src/template/Header/index.module.scss b/src/template/Header/index.module.scss index 9621eef..a855dc8 100644 --- a/src/template/Header/index.module.scss +++ b/src/template/Header/index.module.scss @@ -90,6 +90,11 @@ $containers: ( border-radius: 5px 0 0 5px; font-size: var(--txt-normal); + line-height: 16.41px; + + @media screen and (min-width: 2500px) { + line-height: 32.81px; + } } } @@ -137,7 +142,9 @@ $containers: ( a { display: block; + font-weight: 400; font-size: var(--txt-normal); + line-height: 16.41px; text-transform: uppercase; color: var(--clr-common-white); transition: color 200ms linear; @@ -145,6 +152,10 @@ $containers: ( &:hover { color: var(--clr-primary-blue-500); } + + @media screen and (min-width: 2500px) { + line-height: 32.81px; + } } } @@ -250,8 +261,13 @@ $containers: ( font-weight: 500; font-size: var(--txt-normal); + line-height: 16.41px; color: var(--clr-gray-400); + + @media screen and (min-width: 2500px) { + line-height: 32.81px; + } } } } diff --git a/src/template/Newsletter/index.module.scss b/src/template/Newsletter/index.module.scss index b74ba03..2d1c0d4 100644 --- a/src/template/Newsletter/index.module.scss +++ b/src/template/Newsletter/index.module.scss @@ -12,12 +12,22 @@ .newsletter h3 { margin-bottom: 16px; + font-weight: 500; font-size: var(--txt-normal); + line-height: 16.41px; + text-transform: uppercase; letter-spacing: 0.05em; + color: var(--clr-gray-800); + @media screen and (min-width: 1025px) { font-size: var(--txt-large); + line-height: 21.09px; + } + + @media screen and (min-width: 2500px) { + line-height: 42.19px; } } @@ -39,12 +49,24 @@ padding: 16px 0; margin: 0 auto; } + + @media screen and (min-width: 2500px) { + width: function.fluid(922px, 2500px); + } } .container :global { .form-input { width: 100%; margin-bottom: 16px; + + @media screen and (min-width: 1025px) { + width: function.fluid(340px, 474px); + } + + @media screen and (min-width: 2500px) { + width: function.fluid(668px, 922px); + } } input { @@ -53,14 +75,23 @@ height: 50px; padding: 0 16px; border: 1px solid var(--clr-gray-400); + font-size: var(--txt-normal); + line-height: 16.41px; + @media screen and (min-width: 2500px) { + line-height: 32.81px; + } &::placeholder { color: var(--clr-gray-400); - font-size: var(--txt-normal); } - @media screen and (min-width:1280px) { - + @media screen and (min-width: 1025px) { + height: 42px; + border-radius: 4px; + } + + @media screen and (min-width: 2500px) { + height: 59px; } } } @@ -77,11 +108,21 @@ text-transform: uppercase; font-size: var(--txt-normal); + line-height: 16.41px; font-weight: 700; letter-spacing: 0.05em; @media screen and (min-width: 1025px) { + width: function.fluid(126px, 474px); font-size: var(--txt-xs); + line-height: 14.06px; + height: 42px; + border-radius: 4px; + } + + @media screen and (min-width: 2500px) { + width: function.fluid(246px, 922px); + line-height: 28.13px; height: 59px; } } diff --git a/src/template/Sidebar/index.module.scss b/src/template/Sidebar/index.module.scss index d899511..cb3158a 100644 --- a/src/template/Sidebar/index.module.scss +++ b/src/template/Sidebar/index.module.scss @@ -9,6 +9,10 @@ max-height: 285px; } + @media screen and (min-width: 2500px) { + max-height: 465px; + } + .container { width: 100%; height: auto; @@ -24,6 +28,7 @@ font-weight: 400; font-size: var(--txt-medium); + line-height: 18.75px; color: var(--clr-gray-600); @@ -32,6 +37,10 @@ color: var(--clr-common-white); font-weight: 700; } + + @media screen and (min-width: 2500px) { + line-height: 37.5px; + } } } }