tweak book club page

assets/css/static.css

@@ -40,6 +40,14 @@ h2 {
   font-family: var(--wp--preset--font-family--eb-garamond);
   font-size: 38px;
   line-height: 1;
+  margin-block-start: 0;
+  margin-block-end: 42px;
+}
+
+p {
+  margin-block-start: 0;
+  margin-block-end: 25px;
+  line-height: 1.3;
 }
 
 .btn {
@@ -49,6 +57,7 @@ h2 {
   text-decoration: none;
   font-size: 16px;
   transition: all 0.25s ease;
+  margin-bottom: 26px;
 }
 .btn:hover {
   text-decoration: none;
@@ -58,8 +67,8 @@ h2 {
   color: var(--background);
 }
 .btn--solid:hover {
-  background-color: white;
-  color: black;
+  background-color: transparent;
+  color: var(--foreground-text);
 }
 
 .site-navigation {
@@ -92,6 +101,9 @@ h2 {
   justify-content: space-between;
   gap: 1em;
 }
+.site-navigation .action-buttons .btn {
+  margin-bottom: 0;
+}
 
 section {
   padding-block: 82px;
@@ -114,6 +126,9 @@ section.hero .hero--container {
 }
 section.hero .hero--container .hero--text {
   grid-column: 2/4;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 section.hero .hero--container .hero--text h2 {
   font-family: var(--wp--preset--font-family--eb-garamond);
@@ -140,6 +155,8 @@ section.hero .hero--container .hero--img {
   border-top-left-radius: 12px;
   border-bottom-left-radius: 12px;
   border-right: none;
+  max-height: 366px;
+  object-fit: cover;
 }
 @media (max-width: 480px) {
   section.hero .hero--container .hero--img {
@@ -157,16 +174,17 @@ section.hero .hero--container .hero--img {
   display: flex;
   text-align: center;
   flex-wrap: wrap;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
-  column-gap: 2rem;
-  row-gap: 1rem;
 }
 @media (max-width: 480px) {
   .sponsor-logos .container {
     justify-content: space-around;
   }
 }
+.sponsor-logos .container img {
+  transform: scale(0.67);
+}
 
 section.pitch {
   padding-block: 82px;
@@ -195,7 +213,7 @@ section.pitch .pitch--cards .pitch--card-item {
   border: 1px solid #FAF7EF;
   border-radius: 12px;
   text-align: center;
-  padding-block: 40px;
+  padding-block: 25px;
   padding-inline: 25px;
 }
 section.pitch .pitch--cards .pitch--card-item h3 {
@@ -222,6 +240,7 @@ section.book-club-examples h2 {
 }
 section.book-club-examples .book-club-example-cards {
   padding-block: 84px;
+  padding-top: 12px;
 }
 section.book-club-examples .book-club-example-cards .book-club-example-card--item {
   display: flex;
@@ -230,6 +249,7 @@ section.book-club-examples .book-club-example-cards .book-club-example-card--ite
   border-radius: 12px;
   margin-inline: auto;
   margin-block: 36px;
+  max-height: 264px;
 }
 @media (max-width: 480px) {
   section.book-club-examples .book-club-example-cards .book-club-example-card--item {
@@ -386,6 +406,7 @@ section.book-club-benefits .benefit-cards {
   gap: 16px;
   row-gap: 90px;
   margin-block: 140px;
+  margin-top: 84px;
 }
 @media (max-width: 480px) {
   section.book-club-benefits .benefit-cards {
@@ -409,6 +430,7 @@ section.book-club-benefits .benefit-cards .benefit-card--item img {
 section.book-club-benefits .benefit-cards .benefit-card--item p {
   max-width: 289px;
   margin-inline: auto;
+  margin-top: 21px;
 }
 section.book-club-benefits .benefit-cards .benefit-card--item p strong {
   font-weight: 600;

assets/css/static.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/static.scss"],"names":[],"mappings":"AAQA;EACE;EACA;EACA;EAEA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AA9BE;EA4BJ;IAG6B;;;;AAG7B;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AACA;EACE;EACA;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAzEE;EAkEJ;IAUI;IACA;IACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;;AACA;EAEE;EACA;EACA;;AA5GA;EAwGF;IAOI;IACA;IACA;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;;AA3HJ;EAuHE;IAMI;IACA;IACA;;;AAIJ;EACE;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAhJF;EA0IA;IAQI;IACA;IACA;;;;AAMR;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AApKA;EA6JF;IAUI;;;;AAKN;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EAEA;;AA9LA;EA0LF;IAG6B;;;AAG3B;EACE;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAMR;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;;AACA;EACE;EAEA;EACA;EACA;EACA;EACA;;AA5OF;EAqOA;IAE6B;;;AAO3B;EACE;EACA;EACA;;AAjPJ;EA8OE;IAKI;IACA;IACA;IACA;IACA;;;AAIJ;EAEE;EACA;;AAFA;EAAI;;AAGJ;EAAgD;;AAChD;EAAI;;AACJ;EAAS;;AACT;EAAiB;;AAlQrB;EA2PE;IASI;;;AAMR;EACE;EACA;EACA;;;AAKF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AA1RA;EAuRF;IAKI;IACA;;;AAGF;EACE;EACA;EACA;EACA;;AApSF;EAgSA;IAOI;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAIJ;EACE;;;AAMR;EACE;;AACA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AACA;EACE;EACA;EACA;EAEA;;AAlVF;EA6UA;IAI6B;;;AAE3B;EAAiB;;AACjB;EACE;EACA;EAEA;;AAxVJ;EAoVE;IAG6B;;;AAG7B;EACE;EACA;EACA;;AACA;EAAO;;AAIX;EACE;;;AAKN;EACE;;AACA;EACE;;AAGF;EACE;EACA;EAEA;EACA;EACA;;AApXA;EA8WF;IAG6B;;;AAMzB;EAGE;EACA;;AA9XJ;EA0XE;IAC8B;;;AAxXhC;EAuXE;IAE6B;;;AAI7B;EACE;EACA;;AACA;EACE;;AAON;EACE;EACA;;AAEF;EACE;;;AAKN;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;;AA9ZE;EAqZJ;IAC8B;;;AAnZ1B;EAkZJ;IAE6B;;;AApZzB;EAkZJ;IAaI;IACA;IACA;;EAHA;IAAa;;;AAMf;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;;AA5aF;EAwaA;IAMI;IACA;;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAQR;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EAGA;EACA;;AAhdF;EA2cA;IAG6B;;;AAG3B;EACE;EACA;EAGA;EACA;EACA;EACA;;AA5dJ;EAodE;IAG8B;;;AApdhC;EAidE;IAI6B;;;AAK3B;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AApeJ;EA+dE;IAQI;IACA;IACA;;;AAGF;EACE;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EAAU;;AACV;EACE;;AACA;EACE","file":"static.css"}
+{"version":3,"sourceRoot":"","sources":["../scss/static.scss"],"names":[],"mappings":"AAQA;EACE;EACA;EACA;EAEA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AA9BE;EA4BJ;IAG6B;;;;AAG7B;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AACA;EACE;EACA;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAlFE;EA2EJ;IAUI;IACA;IACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;;;AAKN;EACE;;;AAGF;EACE;;AACA;EAEE;EACA;EACA;;AAxHA;EAoHF;IAOI;IACA;IACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AA1IJ;EAsIE;IAMI;IACA;IACA;;;AAIJ;EACE;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;;AAnKF;EAyJA;IAaI;IACA;IACA;;;;AAMR;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AAtLA;EAiLF;IAUI;;;AAEF;EAAM;;;AAIV;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EAEA;;AAnNA;EA+MF;IAG6B;;;AAG3B;EACE;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAMR;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AACA;EACE;EAEA;EACA;EACA;EACA;EACA;EACA;;AAnQF;EA2PA;IAE6B;;;AAQ3B;EACE;EACA;EACA;;AAxQJ;EAqQE;IAKI;IACA;IACA;IACA;IACA;;;AAIJ;EAEE;EACA;;AAFA;EAAI;;AAGJ;EAAgD;;AAChD;EAAI;;AACJ;EAAS;;AACT;EAAiB;;AAzRrB;EAkRE;IASI;;;AAMR;EACE;EACA;EACA;;;AAKF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAjTA;EA8SF;IAKI;IACA;;;AAGF;EACE;EACA;EACA;EACA;;AA3TF;EAuTA;IAOI;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAIJ;EACE;;;AAMR;EACE;;AACA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AACA;EACE;EACA;EACA;EAEA;;AAzWF;EAoWA;IAI6B;;;AAE3B;EAAiB;;AACjB;EACE;EACA;EAEA;;AA/WJ;EA2WE;IAG6B;;;AAG7B;EACE;EACA;EACA;;AACA;EAAO;;AAIX;EACE;;;AAKN;EACE;;AACA;EACE;;AAGF;EACE;EACA;EAEA;EACA;EACA;EACA;;AA5YA;EAqYF;IAG6B;;;AAOzB;EAGE;EACA;;AAtZJ;EAkZE;IAC8B;;;AAhZhC;EA+YE;IAE6B;;;AAI7B;EACE;EACA;EACA;;AACA;EACE;;AAON;EACE;EACA;;AAEF;EACE;;;AAKN;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;;AAvbE;EA8aJ;IAC8B;;;AA5a1B;EA2aJ;IAE6B;;;AA7azB;EA2aJ;IAaI;IACA;IACA;;EAHA;IAAa;;;AAMf;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;;AArcF;EAicA;IAMI;IACA;;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAQR;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EAGA;EACA;;AAzeF;EAoeA;IAG6B;;;AAG3B;EACE;EACA;EAGA;EACA;EACA;EACA;;AArfJ;EA6eE;IAG8B;;;AA7ehC;EA0eE;IAI6B;;;AAK3B;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AA7fJ;EAwfE;IAQI;IACA;IACA;;;AAGF;EACE;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EAAU;;AACV;EACE;;AACA;EACE","file":"static.css"}

assets/scss/static.scss

@@ -45,6 +45,14 @@ h2 {
   font-family: var(--wp--preset--font-family--eb-garamond);
   font-size: 38px;
   line-height: 1;
+  margin-block-start: 0;
+  margin-block-end: 42px;
+}
+
+p {
+  margin-block-start: 0;
+  margin-block-end: 25px;
+  line-height: 1.3;
 }
 
 .btn {
@@ -54,6 +62,7 @@ h2 {
   text-decoration: none;
   font-size: 16px;
   transition: all 0.25s ease;
+  margin-bottom: 26px;
 
   &:hover {
     text-decoration: none;
@@ -63,8 +72,8 @@ h2 {
     background-color: var(--foreground-text);
     color: var(--background);
     &:hover { 
-      background-color: white;
-      color: black;
+      background-color: transparent;
+      color: var(--foreground-text);
     }
   }
 }
@@ -98,6 +107,9 @@ h2 {
     align-items: center;
     justify-content: space-between;
     gap: 1em;
+    .btn {
+      margin-bottom: 0;
+    }
   }
 }
 
@@ -121,6 +133,9 @@ section.hero {
     
     .hero--text {
       grid-column: 2 / 4;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
   
       h2 {
         font-family: var(--wp--preset--font-family--eb-garamond);
@@ -148,6 +163,11 @@ section.hero {
       border-top-left-radius: 12px;
       border-bottom-left-radius: 12px;
       border-right: none;
+
+      // FIXME: Not sure about this rule for the hero image, feels too hacky. We can rework it when building the final pages.
+      max-height: 366px;
+      object-fit: cover;
+
       @include respond(mobile) {
         order: -1;
         border-radius: 12px;
@@ -164,14 +184,15 @@ section.hero {
     display: flex;
     text-align: center;
     flex-wrap: wrap;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
-    column-gap: 2rem;
-    row-gap: 1rem;
+    // column-gap: 2rem;
+    // row-gap: 1rem;
 
     @include respond(mobile) {
       justify-content: space-around;
     }
+    img { transform: scale(0.67) }
   }
 }
 
@@ -199,7 +220,7 @@ section.pitch {
       border: 1px solid #FAF7EF;
       border-radius: 12px;
       text-align: center;
-      padding-block: 40px;
+      padding-block: 25px;
       padding-inline: 25px;
       // height: 244px;
 
@@ -232,6 +253,7 @@ section.book-club-examples {
 
   .book-club-example-cards {
     padding-block: 84px;
+    padding-top: 12px;
     .book-club-example-card--item {
       display: flex;
       @include respond(mobile) { flex-direction: column; }
@@ -240,6 +262,7 @@ section.book-club-examples {
       border-radius: 12px;
       margin-inline: auto;
       margin-block: 36px;
+      max-height: 264px;
   
       &--img {
         border-radius: 12px;
@@ -376,6 +399,7 @@ section.book-club-benefits {
     gap: 16px;
     row-gap: 90px;
     margin-block: 140px;
+    margin-top: 84px;
 
     .benefit-card--item {
       img {
@@ -387,6 +411,7 @@ section.book-club-benefits {
       p {
         max-width: 289px;
         margin-inline: auto;
+        margin-top: 21px;
         strong {
           font-weight: 600;
         }

page-book-club.php

@@ -65,15 +65,15 @@ $checkout_url = add_query_arg(
 
     <section class="sponsor-logos">
       <div class="container">
-        <img src="<?= get_theme_file_uri('/assets/images/sponsor-logos/porta-editora.png'); ?>">
-        <img src="<?= get_theme_file_uri('/assets/images/sponsor-logos/albatroz.png'); ?>">
-        <img src="<?= get_theme_file_uri('/assets/images/sponsor-logos/manuscrito.png'); ?>">
-        <img src="<?= get_theme_file_uri('/assets/images/sponsor-logos/planeta.png'); ?>">
-        <img src="<?= get_theme_file_uri('/assets/images/sponsor-logos/nascente.png'); ?>">
-        <img src="<?= get_theme_file_uri('/assets/images/sponsor-logos/ideias-de-ler.png'); ?>">
-        <img src="<?= get_theme_file_uri('/assets/images/sponsor-logos/pergaminho.png'); ?>">
-        <img src="<?= get_theme_file_uri('/assets/images/sponsor-logos/contraponto.png'); ?>">
-        <img src="<?= get_theme_file_uri('/assets/images/sponsor-logos/penguin-random-house.png'); ?>">
+        <img src="<?= get_theme_file_uri('/assets/images/sponsor-logos/porto-editora.webp'); ?>">
+        <img src="<?= get_theme_file_uri('/assets/images/sponsor-logos/albatroz.webp'); ?>">
+        <img src="<?= get_theme_file_uri('/assets/images/sponsor-logos/manuscrito.webp'); ?>">
+        <img src="<?= get_theme_file_uri('/assets/images/sponsor-logos/planeta.webp'); ?>">
+        <img src="<?= get_theme_file_uri('/assets/images/sponsor-logos/nascente.webp'); ?>">
+        <img src="<?= get_theme_file_uri('/assets/images/sponsor-logos/ideias-de-ler.webp'); ?>">
+        <img src="<?= get_theme_file_uri('/assets/images/sponsor-logos/pergaminho.webp'); ?>">
+        <img src="<?= get_theme_file_uri('/assets/images/sponsor-logos/contraponto.webp'); ?>">
+        <img src="<?= get_theme_file_uri('/assets/images/sponsor-logos/penguin-random-house.webp'); ?>">
       </div>
     </section>