Add Newsletter Component and Page

- Newsletter form on Subscribe page and at the end of the photos

src/style/_base.scss

@@ -230,7 +230,35 @@ button {
 
     @include breakpoint (sm) {
         max-width: 572px;
+        margin: 0 auto;
         font-size: rem(28px);
         line-height: 1.64;
     }
+
+    // Dark text
+    &--dark {
+        color: $color-text;
+    }
+
+    // Small text variant
+    &--small {
+        font-size: rem(16px);
+        line-height: 1.4;
+
+        @include breakpoint (sm) {
+            font-size: rem(20px);
+            line-height: 1.5;
+        }
+    }
 }
+
+// Notice
+.style-notice {
+    color: rgba($color-tertiary, 0.5);
+    font-family: $font-sans-light;
+    font-size: rem(14px);
+
+    @include breakpoint (sm) {
+        font-size: rem(16px);
+    }
+}

src/style/atoms/_button-control.scss

@@ -27,13 +27,18 @@
         position: relative;
         overflow: hidden;
         display: block;
-        width: 13px;
         height: auto;
         transition: transform 500ms $ease-quart, opacity 150ms $ease-inout;
         will-change: transform;
 
+        &:not([data-width]) {
+            width: 13px;
+        }
+
         @include breakpoint (sm) {
-            width: 20px;
+            &:not([data-width]) {
+                width: 20px;
+            }
         }
     }
     .icon[aria-hidden] {
@@ -54,11 +59,18 @@
             background-color: $color-secondary;
         }
     }
-    &--pink {
+    &--lightpink {
         background-color: rgba($color-secondary, 0.4);
 
         &:hover, &.hover {
-            background-color: rgba($color-secondary, 0.75);
+            background-color: rgba($color-secondary, 0.85);
+        }
+    }
+    &--pink {
+        background-color: rgba($color-secondary, 0.85);
+
+        &:hover, &.hover {
+            background-color: $color-secondary;
         }
     }
     &--gray {

src/style/atoms/_link.scss

@@ -1,4 +1,6 @@
-// Change link
+/*
+** Link: Change location
+*/
 .link-change {
     position: relative;
     display: inline-block;
@@ -65,7 +67,9 @@
 }
 
 
-// Link with animated letters
+/*
+** Link: Translation effect
+*/
 .link-translate {
     display: inline-block;
 
@@ -95,7 +99,7 @@
         }
     }
 
-    // Hover
+    // States
     &:hover {
         .text {
             &:after {

src/style/molecules/_form.scss

@@ -0,0 +1,89 @@
+// Form
+.form {
+    label {
+        cursor: pointer;
+    }
+
+    // Group item
+    // &__group {
+    // }
+
+    // Input group
+    &__inputgroup {
+        position: relative;
+
+        button {
+            position: absolute;
+            top: 50%;
+            right: 10px;
+            transform: translateY(-50%);
+            width: 32px;
+            height: 32px;
+
+            @include breakpoint (sm) {
+                right: 20px;
+            }
+        }
+
+        // Hover
+        &:hover {
+            .input__text {
+                @extend %input__text--active;
+            }
+        }
+    }
+
+
+    /*
+    ** Light version
+    */
+    &--light {
+        // Text input
+        .input__text {
+            &, &::placeholder {
+                color: $color-text;
+            }
+        }
+    }
+}
+
+// Text input
+.input__text {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 48px;
+    padding: 0 24px;
+    color: #fff;
+    font-size: rem(16px);
+    font-family: $font-sans-light;
+    border: 2px solid rgba($color-secondary, 0.6);
+    border-radius: 50vh;
+    transition: border 300ms $ease-quart;
+    background: none;
+    outline: none;
+
+    @include breakpoint (sm) {
+        font-size: rem(18px);
+        height: 64px;
+        padding: 0 32px;
+    }
+
+    // States
+    &::placeholder {
+        color: #fff;
+        opacity: 0.75;
+        transition: all 300ms $ease-quart;
+    }
+    &:focus {
+        @extend %input__text--active;
+    }
+}
+
+%input__text--active {
+    border-color: $color-secondary;
+
+    &::placeholder {
+        opacity: 1;
+    }
+}

src/style/molecules/_newsletter.scss

@@ -0,0 +1,62 @@
+// Newsletter
+.newsletter {
+    max-width: 360px;
+    margin: 0 auto;
+    text-align: center;
+
+    @include breakpoint (sm) {
+        max-width: 444px;
+    }
+
+    // Title
+    h2 {
+        margin-bottom: 40px;
+        color: $color-secondary;
+    }
+
+    // Text
+    &__text {
+        margin-bottom: 72px;
+
+        @include breakpoint (sm) {
+            margin-bottom: 96px;
+        }
+    }
+
+    // Form
+    .form {
+
+    }
+
+    // Notice
+    &__notice {
+        margin-top: 32px;
+    }
+
+
+    /*
+    ** Small version
+    */
+    &--small {
+        .newsletter__text {
+            max-width: 344px;
+            margin-bottom: 56px;
+
+            @include breakpoint (sm) {
+                margin-bottom: 72px;
+            }
+        }
+    }
+
+
+    /*
+    ** Light version
+    */
+    &--light {
+        .newsletter__notice {
+            p {
+                color: rgba($color-text, 0.5);
+            }
+        }
+    }
+}

src/style/organisms/_footer.scss

@@ -83,7 +83,7 @@
             }
 
             // Hover
-            &:hover {
+            &:hover, &.is-active {
                 color: $color-secondary;
             }
         }

src/style/organisms/_pagination.scss

@@ -105,9 +105,10 @@
             font-family: $font-serif;
             font-size: rem(32px);
             color: $color-secondary;
-            margin-bottom: 16px;
+            margin-bottom: 24px;
 
             @include breakpoint (sm) {
+                margin-bottom: 32px;
                 font-size: rem(40px);
             }
         }

src/style/style.scss

@@ -27,6 +27,8 @@
 @import "molecules/location";
 @import "molecules/photo";
 @import "molecules/globe";
+@import "molecules/newsletter";
+@import "molecules/form";
 
 // Organisms
 @import "organisms/carousel";