diff --git a/src/components/ContainerBreadCrumbs/style.module.css b/src/components/ContainerBreadCrumbs/style.module.css index 56be4fc..b934205 100644 --- a/src/components/ContainerBreadCrumbs/style.module.css +++ b/src/components/ContainerBreadCrumbs/style.module.css @@ -45,11 +45,7 @@ margin-right: 0.547rem; } -@media only screen and (max-width: 1024px) { - .contentWrapper { - width: 100%; - padding: 1.875rem 1rem; - } +@media only screen and (max-width: 1280px) { .contentBreadCrumb li { font-size: 0.75rem !important; @@ -62,4 +58,11 @@ .contentBreadCrumb li img[alt="seta para a direita"]{ max-width: 8px; } +} + +@media only screen and (max-width: 1024px) { + .contentWrapper { + width: 100%; + padding: 1.875rem 1rem; + } } \ No newline at end of file diff --git a/src/components/Footer/ContainerFooter/style.module.css b/src/components/Footer/ContainerFooter/style.module.css index f7a0440..64de7f5 100644 --- a/src/components/Footer/ContainerFooter/style.module.css +++ b/src/components/Footer/ContainerFooter/style.module.css @@ -1,15 +1,3 @@ -@media only screen and (max-width: 1024px) { - .containerFooter { - display: none; - } -} - -@media only screen and (min-width: 1025px) { - .containerFooter { - display: flex; - } -} - .containerFooter { width: 100%; @@ -98,4 +86,27 @@ display: flex; gap: 0.625rem; margin-bottom: 0.75rem; +} + +@media only screen and (max-width: 1024px) { + .containerFooter { + display: none; + } +} + +@media only screen and (max-width: 1280px) { + .listIcons svg { + max-width: 35px; + max-height: 35px; + } + + .contentListIconsWrapper span { + font-size: 0.875rem; + } +} + +@media only screen and (min-width: 1025px) { + .containerFooter { + display: flex; + } } \ No newline at end of file diff --git a/src/components/Footer/ContainerFooterInfo/style.module.css b/src/components/Footer/ContainerFooterInfo/style.module.css index 1e874ca..b61b5eb 100644 --- a/src/components/Footer/ContainerFooterInfo/style.module.css +++ b/src/components/Footer/ContainerFooterInfo/style.module.css @@ -20,6 +20,10 @@ .contentInfoFooter { grid-area: info; + display: flex; + justify-content: flex-start; + align-items: center; + max-width: 234px; } .contentInfoFooter span, @@ -29,12 +33,18 @@ line-height: 23.44px; } -.contentInfoFooter span { - max-width: 467px; -} - .contentIconsPay { grid-area: iconPay; + display: flex; + justify-content: center; + align-items: center; + gap: 0.75rem; +} + +.contentIconsPay span{ + width: 1px; + height: 24px; + border: 1px solid var(--white); } .contentVtexIcon span, @@ -48,6 +58,9 @@ .iconsVtexAndM3 { grid-area: logVtexAnM3; + display: flex; + justify-content: flex-end; + align-items: center; } .contentVtexIcon, @@ -66,6 +79,39 @@ width: 40.78%; } + +@media only screen and (min-width: 1281px) { + + .contentInfoFooter { + max-width: 467px; + } +} + +@media only screen and (max-width: 1280px) { + + .contentInfoFooter { + max-width: 234px; + } + + .contentInfoFooter span, + .contentVtexIcon span, + .contentM3Icon span { + font-size: 0.625rem; + } + + .contentIconsPay img { + width: 36px; + } + + .contentVtexIcon img { + width: 44.92px; + } + + .contentM3Icon img { + width: 17px; + } +} + @media only screen and (max-width: 1024px) { .containerFooterInfo { display: flex; @@ -110,7 +156,7 @@ border-right: 1px solid var(--white); } - .contentInfoFooter span{ + .contentInfoFooter span { font-size: 0px; } @@ -125,6 +171,7 @@ .iconsVtexAndM3 { padding: 0.938rem 0; display: flex; + justify-content: flex-start; } .contentVtexIcon, diff --git a/src/components/Footer/ContainerNewsLetter/style.module.css b/src/components/Footer/ContainerNewsLetter/style.module.css index e2eacd6..1d0f6c6 100644 --- a/src/components/Footer/ContainerNewsLetter/style.module.css +++ b/src/components/Footer/ContainerNewsLetter/style.module.css @@ -42,6 +42,32 @@ font-size: 1.5rem; font-weight: 700; padding: 0.875rem 1.25rem; + border-radius: 0.25rem; + box-shadow: 0 4px 4px 0 #00000040; +} + +@media only screen and (max-width: 1280px) { + .contentNewsLetter { + min-width: 474px; + } + + .contentNewsLetter h3 { + font-size: 1.125rem; + } + + .contentNewsLetter form input { + height: 42px; + font-size: 0.875rem; + } + + .contentNewsLetter form input::placeholder { + font-size: 0.875rem; + } + + .contentNewsLetter form button { + height: 42px; + font-size: 0.75rem; + } } @media only screen and (max-width: 1024px) { @@ -86,5 +112,17 @@ width: 100%; margin-top: 1rem; font-size: 0.875rem; + border-radius: none; + box-shadow: none; + } +} + +@media only screen and (max-width: 340px) { + + .contentNewsLetter form span { + top: -11px; + right: 1px; + + font-size: 0.5rem; } } \ No newline at end of file diff --git a/src/components/Header/ContainerList/style.module.css b/src/components/Header/ContainerList/style.module.css index 70fc21c..03f13f0 100644 --- a/src/components/Header/ContainerList/style.module.css +++ b/src/components/Header/ContainerList/style.module.css @@ -29,7 +29,7 @@ text-decoration: none; color: var(--white); text-transform: uppercase; - font-size: 28px; + font-size: 1.75rem; font-weight: 500; } diff --git a/src/components/Header/ContainerPrincipal/style.module.css b/src/components/Header/ContainerPrincipal/style.module.css index e88b0ac..81ee6bb 100644 --- a/src/components/Header/ContainerPrincipal/style.module.css +++ b/src/components/Header/ContainerPrincipal/style.module.css @@ -79,7 +79,7 @@ outline: none; } -.contentSearch span button img { +.contentSearch span button svg { width: 100%; } @@ -98,7 +98,7 @@ } .contentLogin a { - font-size: 28px; + font-size: 1.75rem; font-weight: 400; text-decoration: none; color: var(--white); @@ -111,6 +111,30 @@ border: none; } -.miniCart img { +.miniCart svg { width: 100%; +} + +@media only screen and (max-width: 1280px) { + .contentLogo figure { + max-width: 136px; + } + + .contentSearch span { + width: 100%; + height: 32px; + position: relative; + } + + .contentSearch span button { + width: 18px; + } + + .contentLogin a { + font-size: 0.875rem; + } + + .miniCart { + max-width: 28px; + } } \ No newline at end of file diff --git a/src/components/TopButton/style.module.css b/src/components/TopButton/style.module.css index c4b9fdf..9da4523 100644 --- a/src/components/TopButton/style.module.css +++ b/src/components/TopButton/style.module.css @@ -9,4 +9,23 @@ height: 66px; background-color: var(--gray-300); border-radius: 50%; +} + +.topButton span svg { + width: 30px; + height: 13px; +} + +@media only screen and (max-width: 1024px) { + .topButton { + right: 16px; + bottom: 55px; + width: 34px; + height: 34px; + } + + .topButton span { + width: 12px; + height: 16px; + } } \ No newline at end of file diff --git a/src/components/WhatsappButton/style.module.css b/src/components/WhatsappButton/style.module.css index ba27fbf..d374679 100644 --- a/src/components/WhatsappButton/style.module.css +++ b/src/components/WhatsappButton/style.module.css @@ -4,4 +4,22 @@ bottom: 220px; width: 66px; height: 66px; +} + +.WhatsappButton span{ + width: 66px; + height: 66px; +} + +.WhatsappButton span svg{ + width: 100% +} + +@media only screen and (max-width: 1024px) { + .WhatsappButton { + right: 16px; + bottom: 117px; + width: 34px; + height: 34px; + } } \ No newline at end of file diff --git a/src/global.css b/src/global.css index 7f8ffb2..0705023 100644 --- a/src/global.css +++ b/src/global.css @@ -37,13 +37,39 @@ body { position: relative; } -@media only screen and (max-width: 1890px) { +/* @media only screen and (min-width: 1281px) { body p { + font-size: 0.813rem !important; + } + + body h1, h2 { font-size: 1.5rem !important; } body li { - font-size: 1.875rem !important; + font-size: 1rem !important; + } + + body h3, h4 { + font-size: 0.875rem !important; + } +} */ + +@media only screen and (max-width: 1280px) { + body p { + font-size: 0.813rem !important; + } + + body h1, h2 { + font-size: 1.5rem !important; + } + + body li { + font-size: 1rem !important; + } + + body h3, h4 { + font-size: 0.875rem !important; } } diff --git a/src/pages/Contato/style.module.css b/src/pages/Contato/style.module.css index 8aed624..b4c7b9b 100644 --- a/src/pages/Contato/style.module.css +++ b/src/pages/Contato/style.module.css @@ -7,7 +7,7 @@ margin: 0.75rem 0; font-weight: 700; color: var(--gray-1300); - font-size: 48px; + font-size: 3rem; } .dataList p { @@ -20,13 +20,25 @@ .formContent button[type="submit"] { background-color: var(--black); color: var(--white); - font-size: 32px; + font-size: 1rem; + font-weight: 400; + height: 52.44px; text-transform: uppercase; width: 100%; border-radius: 1.563rem; padding: 1rem; line-height: 32.81px; font-family: "Roboto"; + display: flex; + justify-content: center; + align-items: center; + + transition: opacity 0.2s; + cursor: pointer; +} + +.formContent button[type="submit"]:hover { + opacity: 0.9; } .contentInput { @@ -38,7 +50,7 @@ } .contentInput label{ - font-size: 28px; + font-size: 1.75rem; color: var(--black2); margin-bottom: 0.75rem; } @@ -89,6 +101,7 @@ font-size: 28px; color: var(--black2); text-decoration: underline; + cursor: pointer; } .contentCheckbox label::before { @@ -124,6 +137,41 @@ font-size: 24px; } +@media only screen and (max-width: 1280px) { + .contentInfoList h2 { + font-size: 1.5rem; + } + + .contentInput label{ + font-size: 0.875rem; + } + + .contentInput input{ + font-size: 0.875rem; + height: 46px; + } + + .contentInput input::placeholder { + font-size: 0.875rem; + } + + .contentInput span{ + font-size: 0.75rem; + top: 17px; + right: 22px; + } + + .contentCheckbox label { + font-size: 0.875rem; + } + + .contentCheckbox label::before { + height: 1.125rem; + width: 1.165rem; + right: -26px; + } +} + @media only screen and (max-width: 1024px) { .contentInfoList { grid-area: contentInfo; @@ -154,7 +202,13 @@ top: 15px; } - .contentCheckbox span { - font-size: 0.75rem; + .contentCheckbox label { + font-size: 0.875rem; + } + + .contentCheckbox label::before { + width: 1.165rem; + height: 1.125rem; + right: -26px; } } \ No newline at end of file