diff --git a/src/arquivos/js/app/app.js b/src/arquivos/js/app/app.js index a04444f..a386bdd 100644 --- a/src/arquivos/js/app/app.js +++ b/src/arquivos/js/app/app.js @@ -66,8 +66,8 @@ const app = new Container({ app.bind(Minicart.name, ".minicart__drawer"); app.bind(Newsletter.name, { - elemento: ".news-form", - textButtom: "Cadastre-se", + elemento: ".footer-newsletter__form", + textButtom: "CADASTRE-SE", }); export default app; diff --git a/src/arquivos/sass/components/_newsletter.scss b/src/arquivos/sass/components/_newsletter.scss index 6ec8b3a..fc66ce4 100644 --- a/src/arquivos/sass/components/_newsletter.scss +++ b/src/arquivos/sass/components/_newsletter.scss @@ -1,196 +1,95 @@ -/***************************************************************/ -/**-- Newslettter --------------------------********************/ -/*-------------------------------------------------------------*/ +.footer-newsletter { + padding: 24px 0; + background: linear-gradient(180deg, $blue-500 0%, $blue-600 100%); -.captacao-emails-newsletter { - background-color: #f71963; - background-image: url("/arquivos/template-background-newsletter.png"); - margin-top: 104px; - padding: 12px 15px 24px; - - @include mq(md, max) { - background-image: url("/arquivos/template-mobile-background-newsletter.png"); - background-size: cover; - padding: 52px 15px 42px; + &__wrapper { + margin: 0 auto; + max-width: 698px; } - .row { + &__title { + margin: 0 0 10px; + font-size: 14px; + line-height: 17px; + color: $white-500; + } + + .m3-custom-newsletter-form { + display: flex; align-items: center; - } - - >.row>div { - max-width: 960px; - margin: auto; - padding: 0 3.5%; - } - - h3 { - color: #fff; - font-size: 18px; - font-weight: normal; - line-height: 26px; - margin: 0 0 8px; - - @include mq(md, max) { - margin-bottom: 24px; - } - - span { - display: block; - font-size: 26px; - } - } - - p { - font-size: 15px; - margin: 0; - } -} - -.m3-custom-newsletter-form { - position: relative; - - label { - display: none; + position: relative; } fieldset { - display: inline-block; + flex: 1; + margin: 0 16px 0 0; padding: 0; - margin-right: 16px; - max-width: 270px; - width: 36%; - @include mq(md, max) { - margin-bottom: 8px; - max-width: 100%; - width: 100%; + &:last-of-type { + margin-right: 0; } &.m3-cn-button-ok-container { max-width: 126px; - margin: 0; - width: 100%; - - @include mq(md, max) { - max-width: 100%; - } - } - } - - input { - border: none; - font-size: 14px; - outline: none; - padding: 9px 16px; - width: 100%; - - @include mq(md, max) { - font-size: 24px; - padding: 18.5px 24px; } - &::placeholder { - color: #142032; - } - - &#m3-cn-button-ok { - background-color: #142032; - color: #fff; - cursor: pointer; - font-weight: 700; - font-size: 14px; - text-transform: lowercase; - transition: all 0.15s linear; - - @include mq(md, max) { - font-size: 24px; - margin-top: 8px; - } - - &:hover { - background-color: lighten(#142032, 5); - } - - &:active { - background-color: darken(#142032, 5); - } - } - } - - .m3-cn-msg { - font-weight: 700; - text-align: center; - - .m3-cn-error { - background-color: #fff; - border-radius: 2px; - bottom: -28px; - color: hsla(348, 83%, 58%, 1); - display: table; - left: 40%; - margin: auto; - padding: 3px 6px; - position: absolute; - right: 0; - } - - .m3-cn-success { - color: #fff; - display: inline-block; - font-size: 16px; - margin-right: 20px; - text-transform: lowercase; - } - - .btn-voltar { - background-color: #fff; - border-radius: 2px; - color: #f71963; - display: inline-block; - font-size: 14px; - line-height: 1; - padding: 4px 8px; - text-transform: lowercase; - } - } -} - -/* pop-up-newsletter */ - -.pop-up-newsletter { - display: none; - position: fixed; - z-index: 10; - width: 100%; - top: 20%; - - .newsletter { - text-align: center; - background-color: #fff; - padding: 20px; - display: table; - margin: 0 auto; - position: relative; - - .close-popup { - font-size: 35px; - color: #000; - padding: 5px; - cursor: pointer; - position: absolute; - top: 0; - right: 0; - line-height: 0.5; + label { + display: none; } input { - border-bottom: solid 1px #333; + width: 100%; + height: 41px; + padding: 0 16px; + border: 0; + outline: 0; + font-size: 10px; + line-height: 12px; + background: $white-500; + + &::placeholder { + text-transform: uppercase; + color: $gray-200; + } + + &.m3-cn-button-ok { + font-weight: 900; + background: $black-500; + color: $white-500; + cursor: pointer; + + @include mq(lg, max) { + &:active { + background: lighten($black-500, 10); + } + } + + @include mq(lg, min) { + &:hover { + background: lighten($black-500, 10); + } + + &:active { + background: $black-500; + } + } + + } } + + } - .m3-custom-newsletter-form .btn-voltar { - color: #333; - border-color: #333; + .m3-cn-msg { + position: absolute; + top: calc(100% + 8px); + left: 50%; + transform: translateX(-50%); + line-height: 1; + font-weight: 700; + + .m3-cn-error { + color: $red-300; + } } } diff --git a/src/arquivos/sass/partials/_menu.scss b/src/arquivos/sass/partials/_menu.scss index 86a88a9..9bbe019 100644 --- a/src/arquivos/sass/partials/_menu.scss +++ b/src/arquivos/sass/partials/_menu.scss @@ -31,7 +31,7 @@ gap: 10px; font-size: 12px; line-height: 15px; - color: $gray-200; + color: $gray-300; } diff --git a/src/arquivos/sass/utils/_variaveis.scss b/src/arquivos/sass/utils/_variaveis.scss index ec1fc70..00ef2a9 100644 --- a/src/arquivos/sass/utils/_variaveis.scss +++ b/src/arquivos/sass/utils/_variaveis.scss @@ -1,5 +1,5 @@ // fonts -@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Roboto&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&family=Roboto&display=swap'); $font-family: 'Inter', sans-serif; $font-weight-light: 300; $font-weight-regular: 400; @@ -9,10 +9,16 @@ $font-height: 1.5; // colors $black-500: #000; $white-500: #fff; + +$blue-600: #03ADDC; $blue-500: #00C8FF; + +$red-300: #db4c4c; + $gray-500: #333333; $gray-400: #6D6E70; -$gray-200: #828282; +$gray-300: #828282; +$gray-200: #BDBDBD; $gray-100: #E0E0E0; diff --git a/src/template-pagina/sub-templates/amandaalmeida-footer-newsletter.html b/src/template-pagina/sub-templates/amandaalmeida-footer-newsletter.html index 58b4a48..e3bc197 100644 --- a/src/template-pagina/sub-templates/amandaalmeida-footer-newsletter.html +++ b/src/template-pagina/sub-templates/amandaalmeida-footer-newsletter.html @@ -1,12 +1,8 @@ -
-
-
-
-

Receba novidades e descontos exclusivos

-
-
-
-
-
+
+
+

+ RECEBA NOVIDADES E DESCONTOS EXCLUSIVOS +

+