✨ Implement newsletter subscription form using API

Switch from SendInBlue to EmailOctopus for newsletter. Now uses their API through the form to handle subscription.

src/style/_typography.scss

@@ -127,6 +127,18 @@
     }
 }
 
+// XSmall
+.text-xsmall {
+    font-size: rem(16px);
+    font-weight: 400;
+    line-height: 1.4;
+
+    @include bp (sm) {
+        font-size: rem(18px);
+        line-height: 1.5;
+    }
+}
+
 // Information
 .text-info {
     font-size: rem(14px);

src/style/molecules/_newsletter-form.scss

@@ -1,5 +1,7 @@
 // Email Form
 .newsletter-form {
+    position: relative;
+
     &__email {
         position: relative;
         width: 100%;
@@ -23,7 +25,7 @@
             font-size: rem(16px);
             font-family: $font-sans;
             font-weight: 300;
-            color: #333;
+            color: $color-tertiary;
             background: none;
             border: none;
 
@@ -99,4 +101,24 @@
             }
         }
     }
+
+    // Message
+    &__message {
+        padding: 24px;
+        text-align: center;
+        border-radius: 8px;
+
+        &.is-error {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            color: #fff;
+            background: $color-secondary;
+        }
+        &.is-success {
+            color: $color-text;
+            background: $color-tertiary;
+        }
+    }
 }

src/style/organisms/_newsletter.scss

@@ -46,6 +46,21 @@
         }
     }
 
+    // Form input
+    :global(.newsletter-form__email) {
+        :global(input) {
+            color: $color-text;
+        }
+        :global(input::placeholder) {
+            color: $color-gray;
+        }
+    }
+    // Form message
+    :global(.newsletter-form__message.is-success) {
+        color: #fff;
+        background: $color-primary-tertiary20;
+    }
+
 
     /*
     ** Variants
@@ -56,10 +71,6 @@
 
         :global(.newsletter-form__email) {
             background: $color-tertiary;
-
-            :global(input::placeholder) {
-                color: $color-gray;
-            }
         }
      }
     // Light

src/style/pages/_subscribe.scss

@@ -13,11 +13,6 @@
                 margin-bottom: 120px;
             }
         }
-        :global(.newsletter-form__email) {
-            :global(input) {
-                color: #fff;
-            }
-        }
         :global(.newsletter-form__bottom) {
             :global(p) {
                 color: rgba($color-tertiary, 0.6);