store/blocks/footer/menu.json

@@ -10,6 +10,7 @@
       "menu-item#personalization"
     ]
   },
+
   "menu-item#news": {
     "props": {
       "id": "menu-item-news",

styles/css/vtex.store-footer.css

@@ -1,11 +1,15 @@
-.row--menu-row {
+/*
-  padding-right: 24px;
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+.footerLayout {
+  background-color: #000;
 }
-
+.footerLayout :global(.vtex-store-components-3-x-container) {
-.row--menu-row .rowContainer {
+  margin: 0;
-  align-items: flex-start;
-}
-
-.row--payment-methods {
-  padding-top: 16px;
 }

styles/css/vtex.store-newsletter.css

@@ -0,0 +1,57 @@
+/*
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+.newsletterForm--container-newsletter {
+  display: flex;
+  width: 60% !important;
+  background-color: #000;
+  position: relative;
+  margin-bottom: 16px;
+}
+@media only screen and (max-width: 1023px) {
+  .newsletterForm--container-newsletter {
+    width: 100% !important;
+  }
+}
+
+.emailInputContainer {
+  border-bottom: 1px solid #929292;
+}
+.emailInputContainer :global(.vtex-input-prefix__group) {
+  border: none;
+}
+.emailInputContainer :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
+  background-color: transparent;
+}
+
+.formSubmitContainer {
+  height: 40px;
+  border-bottom: 3px solid #fff;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.formSubmitContainer :global(.vtex-button) {
+  background-color: transparent;
+  border: none;
+}
+.formSubmitContainer :global(.vtex-button) :global(.vtex-button__label) {
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+  padding: 0 16px 13px 16px;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+.defaultSuccessMessage {
+  color: #fff;
+  margin: 0 0 16px 0;
+  text-align: center;
+}

styles/sass/pages/store/vtex.store-newsletter.scss

@@ -0,0 +1,46 @@
+.newsletterForm--container-newsletter {
+  display: flex;
+  width: 60% !important;
+  background-color: $color-black;
+  position: relative;
+  margin-bottom: 16px;
+  @include mq(md, max) {
+    width: 100% !important;
+  }
+}
+
+.emailInputContainer {
+  border-bottom: 1px solid $color-gray6;
+  :global(.vtex-input-prefix__group) {
+    border: none;
+    :global(.vtex-styleguide-9-x-input) {
+      background-color: transparent;
+    }
+  }
+}
+
+.formSubmitContainer {
+  height: 40px;
+  border-bottom: 3px solid $color-white;
+  position: absolute;
+  top: 0;
+  right: 0;
+  :global(.vtex-button) {
+    background-color: transparent;
+    border: none;
+    :global(.vtex-button__label) {
+      font-weight: 700;
+      font-size: 14px;
+      line-height: 19px;
+      padding: 0 16px 13px 16px;
+      padding-top: 0 !important;
+      padding-bottom: 0 !important;
+    }
+  }
+}
+
+.defaultSuccessMessage {
+  color: $color-white;
+  margin: 0 0 16px 0;
+  text-align: center;
+}