From b5498e34e424af6f88cf54f6c33cacc8d2c6c107 Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Wed, 2 Aug 2023 23:51:06 +0000
Subject: [PATCH 01/22] fix(css): first pass @ responsive letter-spacing for h1

---
 benefits/static/css/styles.css | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
index 5f063fee1..b88b94d4b 100644
--- a/benefits/static/css/styles.css
+++ b/benefits/static/css/styles.css
@@ -18,6 +18,8 @@
   --heading-line-height: 1.3; /* Displayed as 130% on Figma */
   --h4-line-height: 1.2; /* Displayed as 120% on Figma */
   --body-letter-spacing: 0.05em;
+  --letter-spacing-3: 0.03;
+  --letter-spacing-5: 0.05;
   --dark-color: #212121;
   --hover-color: #044869;
   --error-color: #ea1010;
@@ -40,14 +42,6 @@
   --border-radius: calc(3rem / 16);
 }
 
-@media (min-width: 992px) {
-  :root {
-    --h1-font-size: var(--font-size-35px);
-    --h1-text-align: center;
-    --font-size-35px: calc(35rem / 16);
-  }
-}
-
 @font-face {
   font-family: "Public Sans";
   font-weight: var(--bold-font-weight);
@@ -176,7 +170,6 @@ h3,
 .h3,
 h4 {
   font-weight: var(--bold-font-weight);
-  letter-spacing: var(--body-letter-spacing);
   margin: 0;
 }
 
@@ -184,11 +177,25 @@ h4 {
 /* Mobile first: Screen width up to 992px - 24px (24rem/16 = 1.5rem) and left */
 /* Screen width above 992px - 35px (35rem/16 = 2.1875rem) and centered */
 /* Does not have a class. Do not apply to non-headline elements. */
+:root {
+  --h1-letter-spacing-percent: var(--letter-spacing-3);
+}
+
+@media (min-width: 992px) {
+  :root {
+    --h1-font-size: var(--font-size-35px);
+    --h1-text-align: center;
+    --h1-letter-spacing-percent: var(--letter-spacing-5);
+    --font-size-35px: 2.1875rem;
+  }
+}
+
 h1 {
   font-size: var(--h1-font-size);
   text-align: var(--h1-text-align);
   padding-top: calc(70rem / 16);
   line-height: var(--heading-line-height);
+  letter-spacing: calc(var(--h1-font-size) * var(--h1-letter-spacing-percent));
 }
 
 /* H2 */

From 67c810b2931d674cbe0d0b1e98882b478559f8a2 Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Tue, 8 Aug 2023 22:52:54 +0000
Subject: [PATCH 02/22] feat(css): h2 - rename p-sm to h2-sm; apply responsive
 letter-spacing

---
 benefits/core/templates/core/landing.html |  2 +-
 benefits/static/css/styles.css            | 37 ++++++++++++++++-------
 2 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/benefits/core/templates/core/landing.html b/benefits/core/templates/core/landing.html
index 5e4d8e9d8..06957a034 100644
--- a/benefits/core/templates/core/landing.html
+++ b/benefits/core/templates/core/landing.html
@@ -19,7 +19,7 @@ <h1 class="text-left p-0 ">
             {% block headline %}
             {% endblock headline %}
           </h1>
-          <h2 class="p-sm pt-1 pt-lg-5 pb-4 pb-lg-5 mb-lg-2">
+          <h2 class="h2-sm pt-1 pt-lg-5 pb-4 pb-lg-5 mb-lg-2">
             {% translate "Cal-ITP Benefits connects your transit benefit to your contactless card" %}
           </h2>
           <span role="img" aria-label="{% translate "A person holds a contactless debit card next to a card reader on a bus." %}"></span>
diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
index b88b94d4b..c8b5dbc42 100644
--- a/benefits/static/css/styles.css
+++ b/benefits/static/css/styles.css
@@ -89,17 +89,6 @@ li {
   margin: 0;
 }
 
-@media (max-width: 992px) {
-  /* Paragraph: Body Text, up to Small width */
-  .p-sm {
-    font-size: var(--bs-body-font-size);
-    font-weight: var(--bs-body-font-weight);
-    letter-spacing: var(--body-letter-spacing);
-    line-height: var(--bs-body-line-height);
-    margin: 0;
-  }
-}
-
 @media (min-width: 992px) {
   /* Utility Class: Padding bottom 64px on Desktop */
   /* Pair with pb-4 on Form pages to get 24px on Mobile, 64px on Desktop */
@@ -201,10 +190,36 @@ h1 {
 /* H2 */
 /* Same sizes for all screen widths: 24px (24rem/16 = 1.5rem) */
 /* Also has a class which can be applied to non-headline elements */
+:root {
+  --h2-letter-spacing-percent: var(--letter-spacing-5);
+}
+
+@media (min-width: 992px) {
+  :root {
+    --h2-letter-spacing-percent: var(--letter-spacing-3);
+  }
+}
+
 h2,
 .h2 {
   font-size: var(--h2-font-size);
   line-height: var(--heading-line-height);
+  letter-spacing: calc(var(--h2-font-size) * var(--h2-letter-spacing-percent));
+}
+
+@media (max-width: 992px) {
+  /* Paragraph: Body Text, up to Small width */
+  /* Used with an H2 */
+  /* Only used on Landing Pages */
+  .h2-sm {
+    font-size: var(--bs-body-font-size);
+    font-weight: var(--bs-body-font-weight);
+    letter-spacing: calc(
+      var(--bs-body-font-size) * var(--h2-letter-spacing-percent)
+    );
+    line-height: var(--heading-line-height);
+    margin: 0;
+  }
 }
 
 @media (max-width: 992px) {

From 333149f8a9d50f8f2f6f3c7fc27494f81bdfaf01 Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Thu, 3 Aug 2023 00:13:23 +0000
Subject: [PATCH 03/22] chore(css): make comment clearer

---
 benefits/static/css/styles.css | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
index c8b5dbc42..bab329642 100644
--- a/benefits/static/css/styles.css
+++ b/benefits/static/css/styles.css
@@ -208,8 +208,7 @@ h2,
 }
 
 @media (max-width: 992px) {
-  /* Paragraph: Body Text, up to Small width */
-  /* Used with an H2 */
+  /* H2 mobile sizing */
   /* Only used on Landing Pages */
   .h2-sm {
     font-size: var(--bs-body-font-size);

From edac160b67e6bb15f2722e3421ea4e11b4239f54 Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Tue, 8 Aug 2023 22:55:23 +0000
Subject: [PATCH 04/22] fix(agency-modal): use .h1 instead of custom font
 declaration

---
 .../core/includes/modal--agency-selector.html        |  4 +++-
 benefits/static/css/styles.css                       | 12 ++++--------
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/benefits/core/templates/core/includes/modal--agency-selector.html b/benefits/core/templates/core/includes/modal--agency-selector.html
index 6014d7b94..1a8fd5809 100644
--- a/benefits/core/templates/core/includes/modal--agency-selector.html
+++ b/benefits/core/templates/core/includes/modal--agency-selector.html
@@ -4,7 +4,9 @@
 
 {% block modal-content %}
     <div class="container text-center">
-        <h3 id="{{ aria_labelledby_id }}" class="modal-title">{% translate "Please choose your transit provider:" %}</h3>
+        <h3 id="{{ aria_labelledby_id }}" class="modal-title h1 p-0 text-center">
+            {% translate "Please choose your transit provider:" %}
+        </h3>
         <div class="row gx-lg-5 mx-lg-1 d-flex flex-column flex-lg-row text-start text-lg-center">
             {% for agency in active_agencies %}
                 <div class="col">
diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
index bab329642..35a33198f 100644
--- a/benefits/static/css/styles.css
+++ b/benefits/static/css/styles.css
@@ -153,6 +153,7 @@ a[target="_blank"]::after {
 /* Headlines */
 /* All headlines */
 h1,
+.h1,
 h2,
 .h2,
 h3,
@@ -165,7 +166,6 @@ h4 {
 /* H1 */
 /* Mobile first: Screen width up to 992px - 24px (24rem/16 = 1.5rem) and left */
 /* Screen width above 992px - 35px (35rem/16 = 2.1875rem) and centered */
-/* Does not have a class. Do not apply to non-headline elements. */
 :root {
   --h1-letter-spacing-percent: var(--letter-spacing-3);
 }
@@ -179,7 +179,9 @@ h4 {
   }
 }
 
-h1 {
+h1,
+.h1 {
+  font-family: var(--bs-font-sans-serif);
   font-size: var(--h1-font-size);
   text-align: var(--h1-text-align);
   padding-top: calc(70rem / 16);
@@ -710,7 +712,6 @@ a.card:focus-visible {
 /* Modal Dialogs */
 
 :root {
-  --modal-title-font-size: var(--font-size-24px);
   --modal-border-radius: 8px;
   --modal-body-top: -36px;
 }
@@ -723,7 +724,6 @@ a.card:focus-visible {
 
 @media (min-width: 992px) {
   :root {
-    --modal-title-font-size: var(--font-size-35px);
     --modal-border-radius: 4px;
   }
 }
@@ -758,10 +758,6 @@ a.card:focus-visible {
   color: var(--text-primary-color);
 }
 
-.modal-title {
-  font-size: var(--modal-title-font-size);
-}
-
 .modal-info .modal-header {
   z-index: 1057;
 }

From 6ea1a92fbeb8bc9e6dab39e9dbfe595bd2896872 Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Thu, 3 Aug 2023 20:02:52 +0000
Subject: [PATCH 05/22] fix(css): add .h1 to font fam declaration

---
 benefits/static/css/styles.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
index 35a33198f..596c4ae46 100644
--- a/benefits/static/css/styles.css
+++ b/benefits/static/css/styles.css
@@ -57,6 +57,7 @@ body {
 }
 
 h1,
+.h1,
 h2,
 .h2,
 h3,
@@ -181,7 +182,6 @@ h4 {
 
 h1,
 .h1 {
-  font-family: var(--bs-font-sans-serif);
   font-size: var(--h1-font-size);
   text-align: var(--h1-text-align);
   padding-top: calc(70rem / 16);

From 8a134e67704aa6c8d7eec523a6913cccb0b2a266 Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Thu, 3 Aug 2023 20:57:33 +0000
Subject: [PATCH 06/22] fix(css): h1, h2 - declare font sizes responsively up
 front

---
 benefits/static/css/styles.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
index 596c4ae46..e526b13fb 100644
--- a/benefits/static/css/styles.css
+++ b/benefits/static/css/styles.css
@@ -28,9 +28,7 @@
   --bs-danger: var(--error-color);
   --bs-danger-rgb: var(--error-color-rgb);
   --standout-color: #323a45;
-  --h1-font-size: calc(24rem / 16);
   --h1-text-align: left;
-  --h2-font-size: calc(24rem / 16);
   --h3-font-size: calc(20rem / 16);
   --font-size-24px: calc(24rem / 16);
   --font-size-20px: calc(20rem / 16);
@@ -168,6 +166,7 @@ h4 {
 /* Mobile first: Screen width up to 992px - 24px (24rem/16 = 1.5rem) and left */
 /* Screen width above 992px - 35px (35rem/16 = 2.1875rem) and centered */
 :root {
+  --h1-font-size: var(--font-size-24px);
   --h1-letter-spacing-percent: var(--letter-spacing-3);
 }
 
@@ -193,11 +192,13 @@ h1,
 /* Same sizes for all screen widths: 24px (24rem/16 = 1.5rem) */
 /* Also has a class which can be applied to non-headline elements */
 :root {
+  --h2-font-size: var(--font-size-20px);
   --h2-letter-spacing-percent: var(--letter-spacing-5);
 }
 
 @media (min-width: 992px) {
   :root {
+    --h2-font-size: var(--font-size-24px);
     --h2-letter-spacing-percent: var(--letter-spacing-3);
   }
 }

From 0044f8d23a95401029e09156e2559accf7c453b3 Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Tue, 8 Aug 2023 22:56:33 +0000
Subject: [PATCH 07/22] fix(css): h1, h2 - declare font sizes responsively up
 front

---
 benefits/eligibility/templates/eligibility/start.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/benefits/eligibility/templates/eligibility/start.html b/benefits/eligibility/templates/eligibility/start.html
index edb263f74..cc0561f05 100644
--- a/benefits/eligibility/templates/eligibility/start.html
+++ b/benefits/eligibility/templates/eligibility/start.html
@@ -12,7 +12,7 @@
 
 {% block inner-content %}
   <div class="col-12 col-sm-12 col-lg-8">
-    <h2 class="media-title p-sm">{% translate "You will need a few items to continue:" %}</h2>
+    <h2 class="media-title h2-sm">{% translate "You will need a few items to continue:" %}</h2>
     <ul class="media-list mx-0 px-0 d-flex justify-content-center flex-column">
       {% block media-item %}
       {% endblock media-item %}

From ea037c5e703cc229d219ebdb7b378f5477e4b03e Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Tue, 8 Aug 2023 22:57:24 +0000
Subject: [PATCH 08/22] fix(css): replace p-sm with h2-sm, renamed class

---
 benefits/core/templates/core/landing.html             | 5 +++++
 benefits/eligibility/templates/eligibility/start.html | 4 ++++
 benefits/static/css/styles.css                        | 2 +-
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/benefits/core/templates/core/landing.html b/benefits/core/templates/core/landing.html
index 06957a034..dea499c70 100644
--- a/benefits/core/templates/core/landing.html
+++ b/benefits/core/templates/core/landing.html
@@ -19,10 +19,15 @@ <h1 class="text-left p-0 ">
             {% block headline %}
             {% endblock headline %}
           </h1>
+<<<<<<< HEAD
           <h2 class="h2-sm pt-1 pt-lg-5 pb-4 pb-lg-5 mb-lg-2">
             {% translate "Cal-ITP Benefits connects your transit benefit to your contactless card" %}
           </h2>
           <span role="img" aria-label="{% translate "A person holds a contactless debit card next to a card reader on a bus." %}"></span>
+=======
+          <h2 class="h2-sm-p pt-1 pt-lg-5 pb-4 pb-lg-5 mb-lg-2">{% translate "core.pages.landing.h2" %}</h2>
+          <span role="img" aria-label="{% translate "core.pages.index.alt" %}"></span>
+>>>>>>> 26fe9477 (fix(css): replace p-sm with h2-sm, renamed class)
           {% block call-to-action %}
           {% endblock call-to-action %}
         </div>
diff --git a/benefits/eligibility/templates/eligibility/start.html b/benefits/eligibility/templates/eligibility/start.html
index cc0561f05..367a1a95a 100644
--- a/benefits/eligibility/templates/eligibility/start.html
+++ b/benefits/eligibility/templates/eligibility/start.html
@@ -12,7 +12,11 @@
 
 {% block inner-content %}
   <div class="col-12 col-sm-12 col-lg-8">
+<<<<<<< HEAD
     <h2 class="media-title h2-sm">{% translate "You will need a few items to continue:" %}</h2>
+=======
+    <h2 class="media-title h2-sm-p">{% translate "eligibility.pages.start.sub_headline" %}</h2>
+>>>>>>> 26fe9477 (fix(css): replace p-sm with h2-sm, renamed class)
     <ul class="media-list mx-0 px-0 d-flex justify-content-center flex-column">
       {% block media-item %}
       {% endblock media-item %}
diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
index e526b13fb..8c5e6b6d9 100644
--- a/benefits/static/css/styles.css
+++ b/benefits/static/css/styles.css
@@ -213,7 +213,7 @@ h2,
 @media (max-width: 992px) {
   /* H2 mobile sizing */
   /* Only used on Landing Pages */
-  .h2-sm {
+  .h2-sm-p {
     font-size: var(--bs-body-font-size);
     font-weight: var(--bs-body-font-weight);
     letter-spacing: calc(

From b631a856f4549623e22ce802b8a3b636daf58bae Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Tue, 8 Aug 2023 22:57:55 +0000
Subject: [PATCH 09/22] fix(css): replace p-sm with h2-sm, renamed class

---
 benefits/eligibility/templates/eligibility/start.html | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/benefits/eligibility/templates/eligibility/start.html b/benefits/eligibility/templates/eligibility/start.html
index 367a1a95a..e7aa4b347 100644
--- a/benefits/eligibility/templates/eligibility/start.html
+++ b/benefits/eligibility/templates/eligibility/start.html
@@ -12,11 +12,7 @@
 
 {% block inner-content %}
   <div class="col-12 col-sm-12 col-lg-8">
-<<<<<<< HEAD
-    <h2 class="media-title h2-sm">{% translate "You will need a few items to continue:" %}</h2>
-=======
-    <h2 class="media-title h2-sm-p">{% translate "eligibility.pages.start.sub_headline" %}</h2>
->>>>>>> 26fe9477 (fix(css): replace p-sm with h2-sm, renamed class)
+    <h2 class="media-title h2-sm-p">{% translate "You will need a few items to continue:" %}</h2>
     <ul class="media-list mx-0 px-0 d-flex justify-content-center flex-column">
       {% block media-item %}
       {% endblock media-item %}

From 29d6f0324976e9763177af7839b74360021ad117 Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Tue, 8 Aug 2023 18:08:44 +0000
Subject: [PATCH 10/22] fix(css): add l-s for h3, h4 responsive

---
 benefits/static/css/styles.css | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
index 8c5e6b6d9..5354463b1 100644
--- a/benefits/static/css/styles.css
+++ b/benefits/static/css/styles.css
@@ -239,11 +239,26 @@ h3,
 .h3 {
   font-size: var(--h3-font-size);
   line-height: var(--heading-line-height);
+  letter-spacing: calc(var(--h3-font-size) * var(--letter-spacing-5));
 }
 
 /* H4 */
-/* Desktop only: Used for Agency Selector card, agency name */
+/* Used for Agency Selector card, agency name */
+:root {
+  --h4-font-size: var(--font-size-18px);
+  --h4-letter-spacing-percent: var(--letter-spacing-5);
+}
+
+@media (min-width: 992px) {
+  :root {
+    --h4-font-size: var(--font-size-20px);
+    --h4-letter-spacing-percent: var(--letter-spacing-3);
+  }
+}
+
 h4 {
+  font-size: var(--h4-font-size);
+  letter-spacing: calc(var(--h4-font-size) * var(--h4-letter-spacing-percent));
   line-height: var(--h4-line-height);
 }
 

From fabdfcc849eba944080873b65861c46d8fb18c11 Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Tue, 8 Aug 2023 18:13:09 +0000
Subject: [PATCH 11/22] fix(h4): flip the 3 and 5 perc

---
 benefits/static/css/styles.css | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
index 5354463b1..2b0f859dc 100644
--- a/benefits/static/css/styles.css
+++ b/benefits/static/css/styles.css
@@ -246,13 +246,13 @@ h3,
 /* Used for Agency Selector card, agency name */
 :root {
   --h4-font-size: var(--font-size-18px);
-  --h4-letter-spacing-percent: var(--letter-spacing-5);
+  --h4-letter-spacing-percent: var(--letter-spacing-3);
 }
 
 @media (min-width: 992px) {
   :root {
     --h4-font-size: var(--font-size-20px);
-    --h4-letter-spacing-percent: var(--letter-spacing-3);
+    --h4-letter-spacing-percent: var(--letter-spacing-5);
   }
 }
 
@@ -672,7 +672,7 @@ h1 + .media-list, /* A .media-list immediately following the h1: Enrollment Succ
 
 :root {
   --card-title-font-size: var(--font-size-18px);
-  --card-title-letter-spacing: 0.03em;
+  /* --card-title-letter-spacing: 0.03em; */
   --card-x-padding: calc(10rem / 16);
   --card-body-x-padding: 0;
   --card-body-y-padding: 0.75rem;
@@ -684,7 +684,7 @@ h1 + .media-list, /* A .media-list immediately following the h1: Enrollment Succ
 @media (min-width: 992px) {
   :root {
     --card-title-font-size: var(--font-size-20px);
-    --card-title-letter-spacing: 0.05rem;
+    /* --card-title-letter-spacing: 0.05rem; */
     --card-x-padding: calc(35rem / 16);
     --card-body-x-padding: calc(40rem / 16);
     --card-body-y-padding: 0;
@@ -718,7 +718,7 @@ a.card:focus-visible {
 
 .card .card-title {
   font-size: var(--card-title-font-size);
-  letter-spacing: var(--card-title-letter-spacing);
+  /* letter-spacing: var(--card-title-letter-spacing); */
 }
 
 .card .card-body {

From c47bbaaff8a5fa4fd61c143196f85fa8986035ef Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Tue, 8 Aug 2023 18:14:16 +0000
Subject: [PATCH 12/22] refactor(css): card title font size/letter-spacing
 should come f from h4

---
 benefits/static/css/styles.css | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
index 2b0f859dc..f243e3be3 100644
--- a/benefits/static/css/styles.css
+++ b/benefits/static/css/styles.css
@@ -672,7 +672,6 @@ h1 + .media-list, /* A .media-list immediately following the h1: Enrollment Succ
 
 :root {
   --card-title-font-size: var(--font-size-18px);
-  /* --card-title-letter-spacing: 0.03em; */
   --card-x-padding: calc(10rem / 16);
   --card-body-x-padding: 0;
   --card-body-y-padding: 0.75rem;
@@ -684,7 +683,6 @@ h1 + .media-list, /* A .media-list immediately following the h1: Enrollment Succ
 @media (min-width: 992px) {
   :root {
     --card-title-font-size: var(--font-size-20px);
-    /* --card-title-letter-spacing: 0.05rem; */
     --card-x-padding: calc(35rem / 16);
     --card-body-x-padding: calc(40rem / 16);
     --card-body-y-padding: 0;
@@ -716,11 +714,6 @@ a.card:focus-visible {
   border-top: solid var(--card-border-width) var(--hover-color);
 }
 
-.card .card-title {
-  font-size: var(--card-title-font-size);
-  /* letter-spacing: var(--card-title-letter-spacing); */
-}
-
 .card .card-body {
   padding: 0 var(--card-body-x-padding) !important;
 }

From ce8da3b4c409d2e04807b65cf9e537a2cd44a4d7 Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Tue, 8 Aug 2023 18:14:56 +0000
Subject: [PATCH 13/22] chore: remove unused vars

---
 benefits/static/css/styles.css | 2 --
 1 file changed, 2 deletions(-)

diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
index f243e3be3..b750fbd00 100644
--- a/benefits/static/css/styles.css
+++ b/benefits/static/css/styles.css
@@ -671,7 +671,6 @@ h1 + .media-list, /* A .media-list immediately following the h1: Enrollment Succ
 /* Cards */
 
 :root {
-  --card-title-font-size: var(--font-size-18px);
   --card-x-padding: calc(10rem / 16);
   --card-body-x-padding: 0;
   --card-body-y-padding: 0.75rem;
@@ -682,7 +681,6 @@ h1 + .media-list, /* A .media-list immediately following the h1: Enrollment Succ
 
 @media (min-width: 992px) {
   :root {
-    --card-title-font-size: var(--font-size-20px);
     --card-x-padding: calc(35rem / 16);
     --card-body-x-padding: calc(40rem / 16);
     --card-body-y-padding: 0;

From fa3c6f086c2f417fdf5b68c55d0f5fc64dcb5464 Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Tue, 8 Aug 2023 18:18:15 +0000
Subject: [PATCH 14/22] feat(css): add new body letter-spacing

---
 benefits/static/css/styles.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
index b750fbd00..058f95dc7 100644
--- a/benefits/static/css/styles.css
+++ b/benefits/static/css/styles.css
@@ -83,7 +83,7 @@ span,
 li {
   font-size: var(--bs-body-font-size);
   font-weight: var(--bs-body-font-weight);
-  letter-spacing: var(--body-letter-spacing);
+  letter-spacing: calc(var(--bs-body-font-size) * var(--letter-spacing-5));
   line-height: var(--bs-body-line-height);
   margin: 0;
 }

From c4506efecb26bc67c8833462cf9cacb6e50b82e2 Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Tue, 8 Aug 2023 18:19:49 +0000
Subject: [PATCH 15/22] feat(css): footer link letter-spacing

---
 benefits/static/css/styles.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
index 058f95dc7..19cac10da 100644
--- a/benefits/static/css/styles.css
+++ b/benefits/static/css/styles.css
@@ -313,7 +313,7 @@ footer .footer-links li a {
   font-weight: var(--footer-link-font-weight);
   font-size: var(--bs-body-font-size);
   text-decoration: underline;
-  letter-spacing: var(--body-letter-spacing);
+  letter-spacing: calc(var(--bs-body-font-size) * var(--letter-spacing-5));
   line-height: 50px;
 }
 

From 51976f16fe97f627932829f5eca90a8e49e96193 Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Tue, 8 Aug 2023 18:25:22 +0000
Subject: [PATCH 16/22] feat(css): letter-spacing for buttons

---
 benefits/static/css/styles.css | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
index 19cac10da..a5f15aa09 100644
--- a/benefits/static/css/styles.css
+++ b/benefits/static/css/styles.css
@@ -18,6 +18,7 @@
   --heading-line-height: 1.3; /* Displayed as 130% on Figma */
   --h4-line-height: 1.2; /* Displayed as 120% on Figma */
   --body-letter-spacing: 0.05em;
+  --letter-spacing-2: 0.02;
   --letter-spacing-3: 0.03;
   --letter-spacing-5: 0.05;
   --dark-color: #212121;
@@ -373,17 +374,19 @@ footer .footer-links li a:visited {
 
 .btn.btn-lg.btn-primary {
   border-width: 2px;
-  letter-spacing: 0.02em;
   font-weight: var(--medium-font-weight);
-  font-size: calc(20rem / 16);
+  font-size: var(--font-size-20px);
+  letter-spacing: calc(var(--font-size-20px) * var(--letter-spacing-2));
   width: 100%;
   padding: var(--primary-button-padding);
 }
 
+/* Unclear if this class is still necessary/different from .btn.btn-lg */
+/* Only used in Form */
 .btn-text {
-  letter-spacing: 0.02em;
   font-weight: var(--medium-font-weight);
-  font-size: calc(20rem / 16);
+  font-size: var(--font-size-20px);
+  letter-spacing: calc(var(--font-size-20px) * var(--letter-spacing-2));
 }
 
 /* A button that actually is a text link */

From ee2c2e52a3fa1ff456723f7c569854eb0be7a79f Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Tue, 8 Aug 2023 18:36:57 +0000
Subject: [PATCH 17/22] feat(css): letter-spacing for ls-base, rest of links

---
 benefits/static/css/styles.css | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
index a5f15aa09..a232bb9eb 100644
--- a/benefits/static/css/styles.css
+++ b/benefits/static/css/styles.css
@@ -17,10 +17,9 @@
   --bs-body-line-height: 1.5; /* Displayed as 150% on Figma */
   --heading-line-height: 1.3; /* Displayed as 130% on Figma */
   --h4-line-height: 1.2; /* Displayed as 120% on Figma */
-  --body-letter-spacing: 0.05em;
-  --letter-spacing-2: 0.02;
-  --letter-spacing-3: 0.03;
-  --letter-spacing-5: 0.05;
+  --letter-spacing-2: 0.02; /* Displayed as 2% on Figma */
+  --letter-spacing-3: 0.03; /* Displayed as 3% on Figma */
+  --letter-spacing-5: 0.05; /* Displayed as 5% on Figma */
   --dark-color: #212121;
   --hover-color: #044869;
   --error-color: #ea1010;
@@ -110,7 +109,7 @@ li {
 }
 
 .ls-base {
-  letter-spacing: var(--body-letter-spacing);
+  letter-spacing: calc(var(--bs-body-font-size) * var(--letter-spacing-5));
 }
 
 /* Links */
@@ -503,7 +502,7 @@ footer .footer-links li a:visited {
   padding: 2px 4px;
   border-radius: var(--border-radius);
   border: var(--border-width) solid var(--primary-color);
-  letter-spacing: 0.02em;
+  letter-spacing: calc(var(--bs-body-font-size) * var(--letter-spacing-2));
   font-weight: 500 !important;
   text-decoration: none !important;
 }
@@ -513,7 +512,7 @@ footer .footer-links li a:visited {
   .signout-link:visited {
     font-size: var(--font-size-12px);
     text-decoration: underline !important;
-    letter-spacing: var(--body-letter-spacing);
+    letter-spacing: calc(var(--font-size-12px) * var(--letter-spacing-5));
     border: none;
   }
 }
@@ -525,7 +524,7 @@ footer .footer-links li a:visited {
   color: var(--text-primary-color);
   font-weight: var(--medium-font-weight);
   font-size: var(--font-size-14px);
-  letter-spacing: var(--body-letter-spacing);
+  letter-spacing: calc(var(--font-size-14px) * var(--letter-spacing-5));
   padding: 3.5px 2.35px; /* button dimensions are 130 x 32 */
 }
 
@@ -562,7 +561,7 @@ footer .footer-links li a:visited {
 .form-container .form-control-label {
   font-size: var(--bs-body-font-size);
   font-weight: var(--medium-font-weight);
-  letter-spacing: var(--body-letter-spacing);
+  letter-spacing: calc(var(--bs-body-font-size) * var(--letter-spacing-5));
   padding-bottom: calc(12rem / 16);
 }
 

From 540c7a36e3c17bd52825f60725b9ddc471c7cfde Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Tue, 8 Aug 2023 19:07:22 +0000
Subject: [PATCH 18/22] fix: remove this for now, use from Help PR

---
 benefits/static/css/styles.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
index a232bb9eb..81e232782 100644
--- a/benefits/static/css/styles.css
+++ b/benefits/static/css/styles.css
@@ -192,22 +192,22 @@ h1,
 /* Same sizes for all screen widths: 24px (24rem/16 = 1.5rem) */
 /* Also has a class which can be applied to non-headline elements */
 :root {
-  --h2-font-size: var(--font-size-20px);
   --h2-letter-spacing-percent: var(--letter-spacing-5);
 }
 
 @media (min-width: 992px) {
   :root {
-    --h2-font-size: var(--font-size-24px);
     --h2-letter-spacing-percent: var(--letter-spacing-3);
   }
 }
 
 h2,
 .h2 {
-  font-size: var(--h2-font-size);
+  font-size: var(--font-size-24px);
   line-height: var(--heading-line-height);
-  letter-spacing: calc(var(--h2-font-size) * var(--h2-letter-spacing-percent));
+  letter-spacing: calc(
+    var(--font-size-24px) * var(--h2-letter-spacing-percent)
+  );
 }
 
 @media (max-width: 992px) {

From 958baa9b24ec5b35a59b7db7db1db757ae6f67cb Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Tue, 8 Aug 2023 19:20:22 +0000
Subject: [PATCH 19/22] fix(h2): h2 only has 1 letter-spacing percent

---
 benefits/static/css/styles.css | 21 +++------------------
 1 file changed, 3 insertions(+), 18 deletions(-)

diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
index 81e232782..a3c2783a7 100644
--- a/benefits/static/css/styles.css
+++ b/benefits/static/css/styles.css
@@ -191,23 +191,11 @@ h1,
 /* H2 */
 /* Same sizes for all screen widths: 24px (24rem/16 = 1.5rem) */
 /* Also has a class which can be applied to non-headline elements */
-:root {
-  --h2-letter-spacing-percent: var(--letter-spacing-5);
-}
-
-@media (min-width: 992px) {
-  :root {
-    --h2-letter-spacing-percent: var(--letter-spacing-3);
-  }
-}
-
 h2,
 .h2 {
   font-size: var(--font-size-24px);
   line-height: var(--heading-line-height);
-  letter-spacing: calc(
-    var(--font-size-24px) * var(--h2-letter-spacing-percent)
-  );
+  letter-spacing: calc(var(--font-size-24px) * var(--letter-spacing-3));
 }
 
 @media (max-width: 992px) {
@@ -216,16 +204,13 @@ h2,
   .h2-sm-p {
     font-size: var(--bs-body-font-size);
     font-weight: var(--bs-body-font-weight);
-    letter-spacing: calc(
-      var(--bs-body-font-size) * var(--h2-letter-spacing-percent)
-    );
+    letter-spacing: calc(var(--bs-body-font-size) * var(--letter-spacing-5));
     line-height: var(--heading-line-height);
     margin: 0;
   }
-}
 
-@media (max-width: 992px) {
   /* H2: 20px, up to Small width */
+  /* Only used on Help Pages */
   .h2-sm {
     font-size: var(--font-size-20px);
     line-height: var(--heading-line-height);

From 7c145d885cca793e7d4138da33477d540595e18d Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Tue, 8 Aug 2023 19:23:34 +0000
Subject: [PATCH 20/22] fix(h2): add letter-spacing for h2-sm

---
 benefits/static/css/styles.css | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
index a3c2783a7..58b1adcfe 100644
--- a/benefits/static/css/styles.css
+++ b/benefits/static/css/styles.css
@@ -199,21 +199,22 @@ h2,
 }
 
 @media (max-width: 992px) {
-  /* H2 mobile sizing */
-  /* Only used on Landing Pages */
-  .h2-sm-p {
-    font-size: var(--bs-body-font-size);
-    font-weight: var(--bs-body-font-weight);
-    letter-spacing: calc(var(--bs-body-font-size) * var(--letter-spacing-5));
-    line-height: var(--heading-line-height);
-    margin: 0;
-  }
-
   /* H2: 20px, up to Small width */
   /* Only used on Help Pages */
   .h2-sm {
     font-size: var(--font-size-20px);
     line-height: var(--heading-line-height);
+    letter-spacing: calc(var(--font-size-20px) * var(--letter-spacing-5));
+  }
+
+  /* H2: 18px, up to Small width */
+  /* Only used on Landing Page, Eligibility Start */
+  .h2-sm-p {
+    font-size: var(--bs-body-font-size);
+    font-weight: var(--bs-body-font-weight);
+    line-height: var(--heading-line-height);
+    letter-spacing: calc(var(--bs-body-font-size) * var(--letter-spacing-5));
+    margin: 0;
   }
 }
 

From 5163dd100a0e6ce1751c133561cf088cbf5f5f65 Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Tue, 8 Aug 2023 20:30:31 +0000
Subject: [PATCH 21/22] chore: omit unneeded comment

---
 benefits/static/css/styles.css | 2 --
 1 file changed, 2 deletions(-)

diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
index 58b1adcfe..0ded6e7bb 100644
--- a/benefits/static/css/styles.css
+++ b/benefits/static/css/styles.css
@@ -366,8 +366,6 @@ footer .footer-links li a:visited {
   padding: var(--primary-button-padding);
 }
 
-/* Unclear if this class is still necessary/different from .btn.btn-lg */
-/* Only used in Form */
 .btn-text {
   font-weight: var(--medium-font-weight);
   font-size: var(--font-size-20px);

From e3975e4eb335184c7c4efd06fe4b680df95f69af Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Tue, 8 Aug 2023 23:02:56 +0000
Subject: [PATCH 22/22] fix(landing): resolve merge conflict

---
 benefits/core/templates/core/landing.html | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/benefits/core/templates/core/landing.html b/benefits/core/templates/core/landing.html
index dea499c70..bba80268c 100644
--- a/benefits/core/templates/core/landing.html
+++ b/benefits/core/templates/core/landing.html
@@ -19,15 +19,10 @@ <h1 class="text-left p-0 ">
             {% block headline %}
             {% endblock headline %}
           </h1>
-<<<<<<< HEAD
-          <h2 class="h2-sm pt-1 pt-lg-5 pb-4 pb-lg-5 mb-lg-2">
+          <h2 class="h2-sm-p pt-1 pt-lg-5 pb-4 pb-lg-5 mb-lg-2">
             {% translate "Cal-ITP Benefits connects your transit benefit to your contactless card" %}
           </h2>
           <span role="img" aria-label="{% translate "A person holds a contactless debit card next to a card reader on a bus." %}"></span>
-=======
-          <h2 class="h2-sm-p pt-1 pt-lg-5 pb-4 pb-lg-5 mb-lg-2">{% translate "core.pages.landing.h2" %}</h2>
-          <span role="img" aria-label="{% translate "core.pages.index.alt" %}"></span>
->>>>>>> 26fe9477 (fix(css): replace p-sm with h2-sm, renamed class)
           {% block call-to-action %}
           {% endblock call-to-action %}
         </div>