Edit Newsletter component

src/style/_base.scss

@@ -44,7 +44,7 @@ button {
     outline: none;
 }
 [data-focus-visible-added], *:focus-visible {
-    outline: 1px dashed $color-tertiary;
+    outline: 1px dashed $color-secondary;
 }
 
 // Selection

src/style/_variables.scss

@@ -12,11 +12,13 @@ $color-lilas-bright: #C78FEC;
 $color-gray: #666;
 $color-lightgray: #999;
 $color-shadow-brown: #7A5D44;
+$color-cream: #FEF6EF;
+
 
 // CSS Variables
 :root {
     // Sizes
-    --container-width: 1680px;
+    --container-width: 1800px;
 
     // Animation
     --ease-quart: cubic-bezier(.165, .84, .44, 1);

src/style/organisms/_newsletter.scss

@@ -1,75 +1,68 @@
 .newsletter {
-    margin-bottom: 88px;
-
     &__wrapper {
         --columns: 20;
-        background-color: $color-primary-dark;
         grid-column: 3 / span var(--columns);
-        padding: 80px 0;
+        padding: 40px 40px 48px;
+        border-radius: 12px;
 
         @include bp (sd) {
             --columns: 18;
             grid-column: 4 / span var(--columns);
+            padding: 64px 60px 72px;
         }
     }
 
-    // About
-    &__about {
-        grid-column: 3 / span 6;
-        margin: auto 0;
-
-        // Text
-        p {
-            margin: 16px 0;
-        }
-
-        // Past issues
-        a {
-            text-decoration: none;
-            color: $color-lilas-bright;
-            font-size: rem(14px);
-
-            span {
-                margin-left: 12px;
-                border-bottom: 1px solid $color-lilas-bright;
-            }
-        }
+    h3 {
+        color: $color-secondary;
     }
-    // Signup
-    &__signup {
-        grid-column: 11 / span 6;
-        margin: auto 0;
-        justify-content: center;
+    p {
+        margin: 12px 0 40px;
+        color: $color-text;
+        font-weight: 300;
+    }
+    span {
+        font-size: rem(16px);
+        line-height: 1.2;
+        color: rgba($color-text, 0.6);
+    }
+
+    // Past issues
+    a {
+        text-decoration: none;
+        color: $color-text;
+        font-size: rem(14px);
 
         span {
-            font-size: rem(16px);
-            line-height: 1.2;
-            font-weight: 300;
-            color: rgba($color-tertiary, 0.6);
+            color: $color-text;
+            margin-left: 12px;
+            border-bottom: 1px solid $color-text;
         }
     }
 
     // Form
     &__email {
         position: relative;
-        box-shadow: inset 0 0 0 2px $color-secondary;
-        border-radius: 100vh;
-        padding: 0 30px;
-        margin-bottom: 8px;
         display: flex;
+        width: 100%;
         height: 64px;
-        max-width: 400px;
+        margin-bottom: 20px;
+        padding: 0 30px;
+        border-radius: 100vh;
+        box-shadow: inset 0 0 0 3px $color-secondary;
+        transition: box-shadow 0.6s var(--ease-quart);
 
         input {
-            background: none;
+            display: block;
+            width: 100%;
             font-family: $font-sans;
             font-weight: 400;
             font-size: rem(18px);
+            color: #333;
+            background: none;
             border: none;
-            color: #fff;
 
             &::placeholder {
-                color: #fff;
+                color: $color-gray;
                 opacity: 1;
             }
         }
@@ -88,5 +81,30 @@
             flex-shrink: 0;
             border-radius: 100vh;
         }
+
+        // States
+        &.is-focused {
+            box-shadow: inset 0 0 0 4px $color-secondary;
+        }
+    }
+
+    // Past Issues
+    .past-issues {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    // Variants
+    // Default color
+    &--default {
+        .newsletter__wrapper {
+            background-color: $color-tertiary;
+        }
+    }
+    // Light
+    &--light {
+        .newsletter__wrapper {
+            background-color: $color-cream;
+        }
     }
 }