Subscribe form logic

assets/css/screen.css

@@ -242,8 +242,12 @@ a:hover {
     transition: background-color 0.2s ease;
 }
 
+.gh-form.error {
+    box-shadow: 0 0 0 1px red;
+}
+
 .gh-form:hover {
-    background-color: rgb(0 0 0 / 0.05);
+    background-color: rgb(0 0 0 / 0.065);
 }
 
 .gh-footer.has-accent-color .gh-form:hover {
@@ -253,7 +257,7 @@ a:hover {
 .gh-form-input {
     position: absolute;
     inset: 0;
-    padding-inline: 28px;
+    padding-inline: 26px;
     width: 100%;
     height: 100%;
     font-size: inherit;
@@ -263,6 +267,14 @@ a:hover {
     outline: none;
 }
 
+:is(.has-serif-title, .has-slab-title) .gh-form-input {
+    padding-inline: 20px;
+}
+
+.gh-footer.has-accent-color .gh-form-input {
+    color: #fff;
+}
+
 .gh-footer.has-accent-color .gh-form-input::placeholder {
     color: rgb(255 255 255 / 0.55);
 }
@@ -280,10 +292,9 @@ button.gh-form-input {
     padding-inline: 32px;
     height: 44px;
     font-size: inherit;
-    font-weight: 600;
 }
 
-.gh-form svg {
+.gh-form > svg {
     position: relative;
     left: 22px;
     width: 24px;
@@ -291,6 +302,24 @@ button.gh-form-input {
     color: var(--color-secondary-text);
 }
 
+.gh-form .gh-button svg {
+    display: none;
+    position: absolute;
+    margin-top: 1px;
+}
+
+.gh-form:is(.loading, .success) .gh-button span {
+    visibility: hidden;
+}
+
+.gh-form.loading .gh-button svg:first-of-type {
+    display: block;
+}
+
+.gh-form.success .gh-button svg:last-of-type {
+    display: block;
+}
+
 /* 5. Layout
 /* ---------------------------------------------------------- */
 
@@ -1341,14 +1370,14 @@ Search                         LOGO                    Login Subscribe
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 28px;
+    gap: 36px;
-    padding: 80px 64px;
+    padding: 80px 64px 72px;
     text-align: center;
     background-color: var(--color-lighter-gray);
 }
 
 .gh-cta-content {
-    max-width: 560px;
+    max-width: 640px;
 }
 
 .gh-cta-title {
@@ -1359,7 +1388,7 @@ Search                         LOGO                    Login Subscribe
 }
 
 .gh-cta-description {
-    margin-top: 16px;
+    margin-top: 12px;
     font-size: 1.8rem;
     line-height: 1.4;
     letter-spacing: -0.015em;

partials/email-subscription.hbs

@@ -1,4 +1,8 @@
-<form class="gh-form">
+<form class="gh-form" data-members-form>
-    <input class="gh-form-input" type="email" placeholder="jamie@example.com">
+    <input class="gh-form-input" type="email" placeholder="jamie@example.com" required data-members-email>
-    <button class="gh-button" type="submit">Subscribe</button>
+    <button class="gh-button" type="submit">
+        <span>Subscribe</span>
+        {{> "icons/loader"}}
+        {{> "icons/checkmark"}}
+    </button>
 </form>

partials/icons/checkmark.hbs

@@ -0,0 +1,24 @@
+<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
+    <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
+    <style>
+        .checkmark {
+            width: 40px;
+            height: 40px;
+            display: block;
+            stroke-width: 2.5;
+            stroke: currentColor;
+            stroke-miterlimit: 10;
+        }
+
+        .checkmark__check {
+            transform-origin: 50% 50%;
+            stroke-dasharray: 48;
+            stroke-dashoffset: 48;
+            animation: stroke .3s cubic-bezier(0.650, 0.000, 0.450, 1.000) .8s forwards;
+        }
+
+        @keyframes stroke {
+            100% { stroke-dashoffset: 0; }
+        }
+    </style>
+</svg>

partials/icons/loader.hbs

@@ -1,11 +1,17 @@
-<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
-    y="0px" width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
+    <g stroke-linecap="round" stroke-width="2" fill="currentColor" stroke="none" stroke-linejoin="round" class="nc-icon-wrapper">
-    <path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
+        <g class="nc-loop-dots-4-24-icon-o">
-s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
+            <circle cx="4" cy="12" r="3"></circle>
-c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z" />
+            <circle cx="12" cy="12" r="3"></circle>
-    <path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
+            <circle cx="20" cy="12" r="3"></circle>
-C22.32,8.481,24.301,9.057,26.013,10.047z">
+        </g>
-        <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20"
+        <style data-cap="butt">
-            dur="0.5s" repeatCount="indefinite" />
+            .nc-loop-dots-4-24-icon-o{--animation-duration:0.8s}
-    </path>
+            .nc-loop-dots-4-24-icon-o *{opacity:.4;transform:scale(.75);animation:nc-loop-dots-4-anim var(--animation-duration) infinite}
+            .nc-loop-dots-4-24-icon-o :nth-child(1){transform-origin:4px 12px;animation-delay:-.3s;animation-delay:calc(var(--animation-duration)/-2.666)}
+            .nc-loop-dots-4-24-icon-o :nth-child(2){transform-origin:12px 12px;animation-delay:-.15s;animation-delay:calc(var(--animation-duration)/-5.333)}
+            .nc-loop-dots-4-24-icon-o :nth-child(3){transform-origin:20px 12px}
+            @keyframes nc-loop-dots-4-anim{0%,100%{opacity:.4;transform:scale(.75)}50%{opacity:1;transform:scale(1)}}
+        </style>
+    </g>
 </svg>