diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index f83b3ce..a7b373e 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -38,6 +38,11 @@ font-size: 20px; line-height: 23px; font-family: $font-family-secundary; + @media (min-width: 2500px) { + font-weight: 400; + font-size: 40px; + line-height: 47px; + } } small { @@ -47,6 +52,11 @@ font-size: 20px; line-height: 23px; font-family: $font-family-secundary; + @media (min-width: 2500px) { + font-weight: 400; + font-size: 40px; + line-height: 47px; + } } } } @@ -65,7 +75,10 @@ border: 1px solid $color-black2; box-sizing: border-box; border-radius: 5px 0 0 5px; - width: 443px; + width: 65.737%; + @media (min-width: 2500px) { + width: 85%; + } @media (max-width: 1024px) { width: 84.498% !important; @@ -89,22 +102,26 @@ font-size: 14px; line-height: 19px; text-transform: uppercase; - width: 126.76px; + width: 17.326%; font-family: $font-family; height: 54px; right: 0; top: 0; + @media (min-width: 2500px) { + width: 219px; + } @media (max-width: 1024px) { - margin-right: 16px; + margin-right: 30px; position: absolute; } @media (max-width: 490px) { - height: 52px; - margin-right: 16px; - position: absolute; - top: -5px; + margin-right: 30px; + margin-bottom: 49px; + /* position: absolute; */ + top: -8px; + width: 33.8%; } } @@ -118,6 +135,9 @@ .emailInfo { padding: 16px; + @media (max-width: 1024px) { + margin-top: 49px; + } background-color: $color-white; border: 1px solid $color-gray4; border-radius: 0; @@ -128,6 +148,11 @@ font-weight: 700; font-size: 12px; line-height: 16px; + @media (min-width: 2500px) { + font-weight: 700; + font-size: 24px; + line-height: 33px; + } } ul { @@ -139,6 +164,11 @@ font-weight: 700; font-size: 12px; line-height: 16px; + @media (min-width: 2500px) { + font-weight: 700; + font-size: 24px; + line-height: 33px; + } } i::before { @@ -360,15 +390,27 @@ .vtex-omnishipping-1-x-addressFormPart1 { p.input.ship-postalCode.required.text { + @media (min-width: 2500px) { + font-weight: 400; + font-size: 20px; + line-height: 23px; + } display: flex; flex-direction: column; + label { + @media (min-width: 2500px) { + font-weight: 400; + font-size: 24px; + line-height: 33px; + } + } #ship-postalCode { padding-right: 67.612%; } } - .input.ship-country.text { + p.input.ship-country.text { display: none; } } @@ -376,6 +418,11 @@ .input .ship-complement .text { display: inline-block; width: 95.331%; + @media (min-width: 2500px) { + font-weight: 400; + font-size: 20px; + line-height: 23px; + } } .vtex-omnishipping-1-x-address { @@ -399,8 +446,6 @@ } } - - .vtex-omnishipping-1-x-addressSummary .vtex-omnishipping-1-x-summaryChange { border-color: #303030; color: #303030; @@ -417,4 +462,23 @@ } } } + + p.input.ship-country.text { + display: none; + } + + p.input.postalCode.text { + @media (min-width: 2500px) { + font-weight: 400; + font-size: 24px; + line-height: 33px; + } + } +} +p.input.ship-postalCode.required.text { + @media (min-width: 2500px) { + font-weight: 400; + font-size: 20px; + line-height: 23px; + } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 91d555b..31b47f1 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -131,8 +131,9 @@ padding: 0; width: 60px; - @include mq(sm, max) { - width: 72px; + @media (min-width: 2500px) { + height: 146px; + width: 146px; } img { @@ -140,9 +141,10 @@ max-width: 100%; width: 60px; - @include mq(sm, max) { - height: 72px; - width: auto; + @media (min-width: 2500px) { + height: 146px; + max-width: 100%; + width: 146px; } } } @@ -183,12 +185,22 @@ th.quantity, th.product, th.product-price { + @media (min-width: 2500px) { + font-weight: 400; + font-size: 28px; + line-height: 33px; + } @media (max-width: 1024px) { display: none; } } th.quantity-price { + @media (min-width: 2500px) { + font-weight: 400; + font-size: 28px; + line-height: 33px; + } @media (max-width: 1024px) { display: none; } @@ -198,6 +210,11 @@ color: $color-gray2; font-size: 12px; line-height: 14px; + @media (min-width: 2500px) { + font-weight: 400; + font-size: 24px; + line-height: 28px; + } @media (max-width: 1024px) { display: none; @@ -205,6 +222,11 @@ } td.quantity-price { + @media (min-width: 2500px) { + font-weight: 700; + font-size: 28px; + line-height: 38px; + } @media (max-width: 1024px) { display: none; } @@ -375,9 +397,15 @@ } .summary { + /* @media (min-width: 2500px) { + display: flex; + }*/ .cart-more-options { margin: 0; width: max-content; + /*@media (min-width: 2500px) { + width: max-content; + }*/ .srp-container { padding: 0 0 0 10px; @@ -387,6 +415,11 @@ } .srp-main-title { + @media (min-width: 2500px) { + font-weight: 400; + font-size: 48px; + line-height: 65px; + } margin: 32px 0 12px; font-style: normal; font-weight: normal; @@ -400,6 +433,12 @@ } .srp-description { + @media (min-width: 2500px) { + font-weight: 400; + font-size: 28px; + line-height: 36px; + width: 552px; + } color: $color-gray2; font-size: 12px; line-height: 18px; @@ -453,6 +492,11 @@ font-size: 14px; line-height: 19px; letter-spacing: 0.05em; + @media (min-width: 2500px) { + font-weight: 700; + font-size: 28px; + line-height: 38px; + } &:hover { background-color: lighten($color-black, 5); @@ -477,6 +521,9 @@ font-size: 14px; line-height: 16px; text-transform: uppercase; + @media (min-width: 2500px) { + width: 543.67px; + } } &__current { @@ -489,7 +536,11 @@ } label { - width: 50%; + @media (min-width: 2500px) { + font-weight: 400; + font-size: 28px; + line-height: 38px; + } &:active { background-color: #f0f0f0; @@ -770,6 +821,12 @@ line-height: 16px; color: $color-black; padding: 12px 0; + @media (min-width: 2500px) { + font-weight: 400; + font-size: 28px; + line-height: 33px; + width: 153px; + } } &.info { @@ -790,6 +847,12 @@ font-size: 18px; line-height: 25px; color: $color-black; + @media (min-width: 2500px) { + font-weight: 700; + font-size: 36px; + line-height: 49px; + width: 153px; + } } } } @@ -858,6 +921,11 @@ vertical-align: middle; text-shadow: none; color: $color-black2; + @media (min-width: 2500px) { + font-weight: 700; + font-size: 28px; + line-height: 38px; + } } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index f4ebfdd..76d3c10 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -82,12 +82,12 @@ body .container-main.container-order-form .orderform-template.active { margin-right: 25px; @media (max-width: 1024px) { width: 45.603% !important; - margin-left: 16px; + margin-right: 16px; } @media (min-width: 2500px) { width: 42.573%; - margin-left: 30px; + margin-right: 60px; } #client-first-name { width: 100% !important; @@ -101,11 +101,12 @@ body .container-main.container-order-form .orderform-template.active { width: 42.933%; @media (max-width: 1024px) { width: 45.603%; - margin-left: 14.5px; + margin-right: 14.5px; } @media (min-width: 2500px) { width: 42.573%; + margin-right: 60px; } #client-last-name { width: 100%; diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 7d2b0ad..602e211 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -60,6 +60,13 @@ body { .btn-success { background: $color-black; text-shadow: none; + span { + @media (min-width: 2500px) { + font-weight: 700; + font-size: 28px; + line-height: 38px; + } + } &:hover { background: lighten($color-black, 15%); diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index 0e26a78..1f50c65 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -107,6 +107,11 @@ no-repeat center center; z-index: 4; left: 10px; + @media (min-width: 2500px) { + width: 26px; + height: 56px; + top: 251px; + } } .slick-next { border: none; @@ -115,6 +120,11 @@ no-repeat center center; z-index: 4; right: 10px; + @media (min-width: 2500px) { + width: 26px; + height: 56px; + top: 251px; + } } .slick-arrow.slick-hidden { display: none; diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 9166388..8e32e34 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -14,9 +14,16 @@ color: $color-black2; font-family: font-family-secundary; text-align: center; + @media (min-width: 2500px) { + font-weight: 400; + font-size: 48px; + line-height: 76px; + } } .product-name { + overflow: auto; + height: 18px; font-family: $font-family; font-style: normal; margin-bottom: 20px; @@ -25,7 +32,15 @@ line-height: 18px; text-align: center; color: $color-black2; + display: flex; margin-top: 20px; + @media (min-width: 2500px) { + width: 485.07px; + height: 34.99px; + font-weight: 400; + font-size: 26px; + line-height: 35px; + } } figure { @@ -41,12 +56,16 @@ list-style-type: none; justify-content: center; gap: 5px; - display: flex; + width: 92%; + flex-wrap: wrap; text-transform: uppercase; + display: flex; margin: 0; + margin-bottom: 20px; } .size-cards { + display: flex; margin-bottom: 20px; background-color: $color-blue2; border-radius: 8px; @@ -55,6 +74,15 @@ font-weight: 700; font-size: 13px; line-height: 18px; + @media (min-width: 2500px) { + font-weight: 700; + font-size: 26px; + line-height: 35px; + display: flex; + align-items: center; + text-align: center; + letter-spacing: 0.05em; + } /* identical to box height */ display: flex; @@ -74,6 +102,15 @@ width: 97%; color: white; display: flex; + @media (min-width: 2500px) { + font-weight: 700; + font-size: 26px; + line-height: 35px; + display: flex; + align-items: center; + text-align: center; + letter-spacing: 0.05em; + } } } @@ -173,17 +210,32 @@ display: flex; list-style-type: none; margin: 0; + span { + @media (min-width: 2500px) { + font-weight: 400; + font-size: 18px; + line-height: 25px; + } + } .logo-m3 { margin: 0; width: 28.66px; height: 15.65px; + @media (min-width: 2500px) { + width: 55.98px; + height: 30.55px; + } } .logo-vtex { margin: 0; width: 44.92px; height: 16px; + @media (min-width: 2500px) { + width: 87.73px; + height: 31.24px; + } } li:last-child { diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 59fa4ce..12467e5 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -155,11 +155,20 @@ line-height: 16px; text-transform: uppercase; color: $color-gray; + @media (min-width: 2500px) { + font-weight: 400; + font-size: 24px; + line-height: 33px; + } } img { width: 12px; height: auto; + @media (min-width: 2500px) { + width: 29.47px; + height: 41.46px; + } } i {