finish newsletter style

assets/css/src/calendar-strip.css

@@ -38,6 +38,7 @@
 
 .calendar-strip__date {
   position: absolute;
+  box-sizing: border-box;
   overflow: hidden;
   left: 0;
   top: 100%;

assets/css/src/newsletter.css

@@ -0,0 +1,44 @@
+section.newsletter {
+  --padding-vertical: var(--space-m);
+  background-color: var(--color-brown-light);
+  border-top: var(--border);
+  border-bottom: var(--border);
+}
+
+section.newsletter h2 {
+  margin-bottom: calc(var(--space-m) / 2);
+}
+
+section.newsletter {
+  --space-vertical: 0.4rem;
+}
+
+section.newsletter form {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+}
+
+section.newsletter form > *:last-child {
+  justify-self: end;
+}
+
+section.newsletter form input {
+  border-bottom: 1px solid #000;
+  padding-bottom: var(--space-vertical);
+  width: 100%;
+}
+
+section.newsletter form button[type="submit"] {
+  margin-top: var(--space-vertical);
+}
+
+section.newsletter form button[type="submit"]::before {
+  content: "→";
+  position: absolute;
+  transform: translateX(-1.5rem);
+  transition: transform 0.35s ease-in-out;
+}
+
+section.newsletter form button[type="submit"]:hover::before {
+  transform: translateX(-2.5rem);
+}

assets/css/src/reset.css

@@ -65,3 +65,19 @@ button[disabled] {
   cursor: not-allowed;
   opacity: 0.3;
 }
+
+input {
+  background-color: transparent;
+  border-radius: 0;
+  border: none;
+  outline: none;
+}
+
+::placeholder {
+  color: #000;
+  opacity: 1; /* Firefox */
+}
+::-ms-input-placeholder {
+  /* Edge 12 -18 */
+  color: #000;
+}

assets/css/src/text.css

@@ -42,3 +42,9 @@ h5,
   font-size: var(--font-size-h5);
   font-weight: 600;
 }
+
+input {
+  font-family: "Joker", sans-serif;
+  font-size: inherit;
+  color: #000 !important;
+}

assets/css/style.css

@@ -7,3 +7,4 @@
 @import url("src/hero.css");
 @import url("src/calendar-strip.css");
 @import url("src/events-grid.css");
+@import url("src/newsletter.css");

site/snippets/newsletter-section.php

@@ -1,3 +1,10 @@
-<section>
-  
+<section class="newsletter">
+  <h2>Newsletter</h2>
+  <div class="grid">
+    <p class="grid__item" style="--span: 6;">Inscrivez-vous à notre newsletter pour être tenue informé·e·s de nos dernières actualités !</p>
+    <form class="grid__item" action="" style="--span: 6;">
+      <input placeholder="e-mail" type="email" name="email" autocomplete="email" id="email">
+      <button type="submit">s'inscrire</button>
+    </form>
+  </div>
 </section>