hero : add baseline

assets/css/src/_mobile.scss

@@ -130,13 +130,12 @@ body.no-scroll {
 
   // ---- HERO ----
   section#hero {
-    height: auto;
-    min-height: 100vh;
+    height: calc(100vh - 3.5rem);
     text-align: center;
     align-items: center;
-    padding: 4rem var(--padding-body) 3rem;
-    background-position: 74% -44vh;
-    background-size: 96vh;
+    padding: 25vh var(--padding-body) 3rem;
+    background-position: 70% -51vh;
+    background-size: 100vh;
 
     .title {
       font-size: 4rem;
@@ -147,7 +146,12 @@ body.no-scroll {
     }
 
     #preorder-button {
-      position: static;
+      margin-top: 0;
+    }
+
+    .baseline {
+      bottom: 2rem;
+      width: 15rem;
     }
   }
 

assets/css/src/_section_1-hero.scss

@@ -1,4 +1,5 @@
 section#hero {
+  box-sizing: border-box;
   position: relative;
   background-image: url('/assets/images/le-courage-du-reel-hero-bg.jpg');
   background-position: center 45%;
@@ -29,8 +30,14 @@ section#hero {
     font-weight: 400;
   }
 
-  #preorder-button {
+  .baseline {
     position: absolute;
-    top: 50rem;
+    bottom: 3rem;
+    font-size: var(--font-size-m);
+    font-weight: 500;
+  }
+
+  #preorder-button {
+    margin-top: 4.625rem;
   }
 }

assets/css/style.css

@@ -204,6 +204,7 @@ body > header ul li:first-child {
 }
 
 section#hero {
+  box-sizing: border-box;
   position: relative;
   background-image: url("/assets/images/le-courage-du-reel-hero-bg.jpg");
   background-position: center 45%;
@@ -230,9 +231,14 @@ section#hero .title {
 section#hero .subtitle {
   font-weight: 400;
 }
-section#hero #preorder-button {
+section#hero .baseline {
   position: absolute;
-  top: 50rem;
+  bottom: 3rem;
+  font-size: var(--font-size-m);
+  font-weight: 500;
+}
+section#hero #preorder-button {
+  margin-top: 4.625rem;
 }
 
 section#quote-full,
@@ -896,13 +902,12 @@ body.no-scroll {
     scroll-margin-top: 5.8125rem;
   }
   section#hero {
-    height: auto;
-    min-height: 100vh;
+    height: calc(100vh - 3.5rem);
     text-align: center;
     align-items: center;
-    padding: 4rem var(--padding-body) 3rem;
-    background-position: 74% -44vh;
-    background-size: 96vh;
+    padding: 25vh var(--padding-body) 3rem;
+    background-position: 70% -51vh;
+    background-size: 100vh;
   }
   section#hero .title {
     font-size: 4rem;
@@ -911,7 +916,11 @@ body.no-scroll {
     margin-bottom: 2rem;
   }
   section#hero #preorder-button {
-    position: static;
+    margin-top: 0;
+  }
+  section#hero .baseline {
+    bottom: 2rem;
+    width: 15rem;
   }
   section#quote-full,
   section#quote {

index.html

@@ -89,7 +89,7 @@
           Le courage<br />
           du réel
         </h1>
-        <h2 class="subtitle">Changer sans tomber,<br />tenir sans croire</h2>
+        <h2 class="subtitle">Changer sans tomber<br />Tenir sans croire</h2>
         <a
           id="preorder-button"
           class="blue-button"
@@ -97,6 +97,7 @@
           target="_blank"
           >Précommander le livre</a
         >
+        <p class="baseline">Une métaphysique neuve pour sortir du vide</p>
       </section>
 
       <section id="quote-full" class="blue-container">
@@ -120,21 +121,18 @@
           <div class="text">
             <p>
               Tout sonne creux, comme si le monde se fermait. Une sensation
-              d'absurde. Des mots, encore des mots— ils glissent. Ce livre
+              d'absurde. Des mots, encore des mots — ils glissent. Ce livre
               commence là : quand ça ne tient plus.
             </p>
             <p>
-              Ce n'est ni un développement personnel, ni un traité académique.
-            </p>
-            <p>
-              Le Courage du Réel propose une ontologie du passage. Le réel n'est
-              pas ce qui est, mais ce qui se traverse — localement — dans un
-              geste vivant, face à un inconnu.
+              Le Courage du Réel remplace le logiciel qu'on utilise pour penser
+              sa vie. Le réel n'est pas ce qui est, mais ce qui se traverse —
+              localement — dans un geste vivant, face à un inconnu.
             </p>
             <p>
               Le mal n'est pas moral : il est structurel. La vérité, l'amour,
-              l'intelligence, le pouvoir ne sont pas ce que tu crois — et toi
-              non plus. De Platon à Derrida, ce livre met à nu ce qui ne
+              l'intelligence, le pouvoir ne sont pas ce que vous croyez — et
+              vous non plus. De Platon à Lacan, ce livre met à nu ce qui ne
               fonctionne plus. Voici venu le temps de construire.
             </p>
           </div>