diff --git a/src/components/floating-buttons/floating-buttons.module.scss b/src/components/floating-buttons/floating-buttons.module.scss index 8861bb3..e85c2f7 100644 --- a/src/components/floating-buttons/floating-buttons.module.scss +++ b/src/components/floating-buttons/floating-buttons.module.scss @@ -6,12 +6,28 @@ right: 16px; gap: 5px; + @media (max-width: 375px) { + bottom: 29px; + } + + @media (max-width: 1024px) { + bottom: 51px; + } + + @media (min-width: 2500px) { + bottom: 229px; + } + .wppLink { cursor: pointer; height: 34px; & img { height: 100%; } + + @media (min-width: 2500px) { + height: 66px; + } } .topButton { background: none; @@ -19,5 +35,11 @@ padding: 0; outline: 0; cursor: pointer; + + & img { + @media (min-width: 2500px) { + height: 66px; + } + } } } diff --git a/src/components/header/header-route/header-route.module.scss b/src/components/header/header-route/header-route.module.scss index 63c0e10..7d44927 100644 --- a/src/components/header/header-route/header-route.module.scss +++ b/src/components/header/header-route/header-route.module.scss @@ -7,6 +7,10 @@ margin: 30px 100px; gap: 10px; + @media (max-width: 1024px) and (min-width: 280px) { + margin: 30px 16px; + } + .home { height: 16px; diff --git a/src/components/main/form/custom-form.module.scss b/src/components/main/form/custom-form.module.scss index 9586fd3..b663e5b 100644 --- a/src/components/main/form/custom-form.module.scss +++ b/src/components/main/form/custom-form.module.scss @@ -4,7 +4,11 @@ .CustomFormContainer { margin-left: 30px; - & h1 { + @media (max-width: 1024px) and (min-width: 280px) { + margin: 0; + } + + & h2 { font-family: "Roboto"; font-style: normal; font-weight: 700; @@ -12,12 +16,21 @@ line-height: 28px; color: #000000; margin: 0; + + @media (max-width: 1024px) and (min-width: 280px) { + text-align: center; + margin-top: 12px; + } + + @media (min-width: 2500px) { + font-size: 48px; + line-height: 56px; + } } .FormCol { display: flex; flex-direction: column; - margin-bottom: 12px; & span { font-family: "Roboto"; @@ -26,6 +39,13 @@ font-size: 12px; line-height: 14px; color: #ff0000; + margin: 0; + + @media (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + margin: 0; + } } .FormLabelInsta { @@ -35,23 +55,43 @@ font-weight: 400; font-size: 14px; color: #100d0e; + + @media (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } } .FormField { + font-weight: 400; + font-family: "Roboto"; + font-style: normal; height: 46px; border: 1px solid #100d0e; border-radius: 25px; padding: 15px 20px 15px; box-sizing: border-box; + + @media (min-width: 2500px) { + height: 63px; + font-size: 28px; + line-height: 33px; + } } .FormLabel { + line-height: 16px; margin: 12px 0 12px 0; font-family: "Roboto"; font-style: normal; font-weight: 400; font-size: 14px; color: #100d0e; + + @media (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } } } } @@ -66,6 +106,13 @@ font-weight: 400; font-size: 16px; color: white; + line-height: 19px; + + @media (min-width: 2500px) { + height: 71px; + font-size: 32px; + line-height: 38px; + } } .FormSubmitButton :hover { @@ -79,3 +126,59 @@ align-items: flex-end; margin: 0 18px 0; } + +.formInvalidFeedback { + display: flex; + justify-content: center; + margin: 12px 0 12px 0; + align-items: center; + + & label { + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: #100d0e; + text-decoration: underline; + + @media (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } + } + + & span { + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: #ff0000; + + @media (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } + } + + & input { + width: 18px; + height: 18px; + + @media (min-width: 2500px) { + width: 36px; + height: 35px; + } + } +} + +.successSubmit { + margin-top: 12px; + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 14px; + color: #008000; +} diff --git a/src/components/main/form/custom-form.tsx b/src/components/main/form/custom-form.tsx index 4fa4cea..7709296 100644 --- a/src/components/main/form/custom-form.tsx +++ b/src/components/main/form/custom-form.tsx @@ -32,7 +32,7 @@ export function CustomForm() { return (
-

Preencha o formulário

+

Preencha o formulário

{ @@ -145,11 +145,11 @@ export function CustomForm() { name="Instagram" />
-
+
@@ -157,7 +157,11 @@ export function CustomForm() { - {success && * Formulário enviado com sucesso.} + {success && ( + + * Formulário enviado com sucesso. + + )}
diff --git a/src/components/main/main-content.module.scss b/src/components/main/main-content.module.scss index 16a89c7..c21c85d 100644 --- a/src/components/main/main-content.module.scss +++ b/src/components/main/main-content.module.scss @@ -10,6 +10,12 @@ font-size: 24px; line-height: 28px; margin: 0; + + @media (min-width: 2500px) { + font-size: 48px; + line-height: 56px; + letter-spacing: 0.1em; + } } .institutionalContainer { @@ -18,7 +24,12 @@ .institutionalMainContainer { display: flex; - margin: 80px 100px; + margin: 90px 100px; + + @media (max-width: 1024px) and (min-width: 280px) { + flex-direction: column; + margin: 40px 16px; + } .InstitutionalNavContainer { width: 302px; @@ -27,6 +38,17 @@ border-right: 1px solid #000000; height: 285px; + @media (max-width: 1024px) and (min-width: 280px) { + width: 100%; + border: none; + height: 234px; + } + + @media (min-width: 2500px) { + width: 590px; + height: 465px; + } + .NavSpan { padding: 10px 16px; font-family: "Roboto"; @@ -34,7 +56,13 @@ font-weight: 400; font-size: 16px; color: #7d7d7d; + line-height: 19px; cursor: pointer; + + @media (min-width: 2500px) { + font-size: 32px; + line-height: 38px; + } } } } diff --git a/src/components/main/main-content.tsx b/src/components/main/main-content.tsx index 6a8caf9..929eb63 100644 --- a/src/components/main/main-content.tsx +++ b/src/components/main/main-content.tsx @@ -77,8 +77,6 @@ export function MainContent() {