From 0ed1e18fe0ce313599d9eb85fad7efe955e5bb7c Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Thu, 5 Dec 2024 19:20:20 +0000
Subject: [PATCH 1/6] feat(recaptcha): all H1s are now left-aligned on desktop
 and mobile

---
 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 b15a8f7f6..afd1aa82c 100644
--- a/benefits/static/css/styles.css
+++ b/benefits/static/css/styles.css
@@ -145,7 +145,6 @@ h4 {
 @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;
   }
@@ -154,7 +153,6 @@ h4 {
 h1,
 .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));

From a10e1acd21a2c9d6ca810db3571254b296800474 Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Thu, 5 Dec 2024 19:53:06 +0000
Subject: [PATCH 2/6] feat(recaptcha): convert elig page to all col-lg-6

---
 benefits/core/templates/core/includes/form.html             | 4 ++--
 benefits/core/templates/core/widgets/flow-radio-select.html | 2 +-
 benefits/eligibility/forms.py                               | 2 +-
 benefits/eligibility/templates/eligibility/index--cst.html  | 2 +-
 benefits/eligibility/templates/eligibility/index.html       | 4 ++--
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/benefits/core/templates/core/includes/form.html b/benefits/core/templates/core/includes/form.html
index 718a1dd94..456227a63 100644
--- a/benefits/core/templates/core/includes/form.html
+++ b/benefits/core/templates/core/includes/form.html
@@ -28,8 +28,8 @@
     </div>
 
     {% if form.submit_value %}
-      <div class="row d-flex justify-content-lg-end pt-8">
-        <div class="col-lg-3 offset-2 offset-sm-2 offset-lg-0 col-sm-8 col-8">
+      <div class="row d-flex justify-content-center pt-8">
+        <div class="col-lg-6">
           <button class="btn btn-lg btn-primary spinner-hidden d-flex justify-content-center align-items-center"
                   data-action="submit"
                   type="submit"
diff --git a/benefits/core/templates/core/widgets/flow-radio-select.html b/benefits/core/templates/core/widgets/flow-radio-select.html
index 82df36212..4f04aff84 100644
--- a/benefits/core/templates/core/widgets/flow-radio-select.html
+++ b/benefits/core/templates/core/widgets/flow-radio-select.html
@@ -4,7 +4,7 @@
 
   <label for="{{ id }}" class="pb-4 h2">{% translate "Which transit benefit would you like to enroll in?" %}</label>
 
-  <div {% if id %}id="{{ id }}"{% endif %} class="ps-3 ps-md-0 ps-lg-0 offset-md-1 offset-lg-1 radio-container">
+  <div {% if id %}id="{{ id }}"{% endif %}>
     {% for group, options, index in widget.optgroups %}
       {% if group %}
         <div>
diff --git a/benefits/eligibility/forms.py b/benefits/eligibility/forms.py
index ae16efa3a..00baf1eff 100644
--- a/benefits/eligibility/forms.py
+++ b/benefits/eligibility/forms.py
@@ -28,7 +28,7 @@ def __init__(self, agency: models.TransitAgency, *args, **kwargs):
         super().__init__(*args, **kwargs)
         flows = agency.enrollment_flows.filter(supported_enrollment_methods__contains=models.EnrollmentMethods.DIGITAL)
 
-        self.classes = "col-lg-8"
+        self.classes = "col-lg-6"
         # second element is not used since we render the whole label using selection_label_template,
         # therefore set to None
         flow_field = self.fields["flow"]
diff --git a/benefits/eligibility/templates/eligibility/index--cst.html b/benefits/eligibility/templates/eligibility/index--cst.html
index 90af4cf8a..7c017d7e2 100644
--- a/benefits/eligibility/templates/eligibility/index--cst.html
+++ b/benefits/eligibility/templates/eligibility/index--cst.html
@@ -3,7 +3,7 @@
 {% load i18n %}
 
 {% block explanatory-text %}
-  <p class="pt-4 pb-4 pb-lg-8">
+  <p class="pt-4 pb-4">
     {% translate "Cal-ITP doesn’t save any of your information. All CST transit benefits reduce fares by 50% for bus service on fixed routes." %}
   </p>
 {% endblock explanatory-text %}
diff --git a/benefits/eligibility/templates/eligibility/index.html b/benefits/eligibility/templates/eligibility/index.html
index 3468b1906..428e2e8c8 100644
--- a/benefits/eligibility/templates/eligibility/index.html
+++ b/benefits/eligibility/templates/eligibility/index.html
@@ -15,14 +15,14 @@
 {% endblock nav-buttons %}
 
 {% block headline %}
-  <div class="col-lg-8">
+  <div class="col-lg-6">
     <h1>{% translate "Choose the transit benefit you would like to enroll in" %}</h1>
   </div>
 {% endblock headline %}
 
 {% block explanatory-text-wrapper %}
   <div class="row justify-content-center">
-    <div class="col-lg-8">
+    <div class="col-lg-6">
       {% block explanatory-text %}
       {% endblock explanatory-text %}
     </div>

From eb69d784525a72888e15ce8a6a4e217986480a4f Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Thu, 5 Dec 2024 20:00:29 +0000
Subject: [PATCH 3/6] feat(recaptcha): eligibility - remove 64px margin from
 all agency indexes

---
 benefits/eligibility/templates/eligibility/index--mst.html   | 2 +-
 benefits/eligibility/templates/eligibility/index--nevco.html | 2 +-
 benefits/eligibility/templates/eligibility/index--sacrt.html | 2 +-
 benefits/eligibility/templates/eligibility/index--sbmtd.html | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/benefits/eligibility/templates/eligibility/index--mst.html b/benefits/eligibility/templates/eligibility/index--mst.html
index 2acbb986c..41d8fea87 100644
--- a/benefits/eligibility/templates/eligibility/index--mst.html
+++ b/benefits/eligibility/templates/eligibility/index--mst.html
@@ -3,7 +3,7 @@
 {% load i18n %}
 
 {% block explanatory-text %}
-  <p class="pt-4 pb-4 pb-lg-8">
+  <p class="pt-4 pb-4">
     {% translate "Cal-ITP doesn’t save any of your information. All MST transit benefits reduce fares by 50% for bus service on fixed routes." %}
   </p>
 {% endblock explanatory-text %}
diff --git a/benefits/eligibility/templates/eligibility/index--nevco.html b/benefits/eligibility/templates/eligibility/index--nevco.html
index aee7d4b3d..1e14e34ea 100644
--- a/benefits/eligibility/templates/eligibility/index--nevco.html
+++ b/benefits/eligibility/templates/eligibility/index--nevco.html
@@ -3,7 +3,7 @@
 {% load i18n %}
 
 {% block explanatory-text %}
-  <p class="pt-4 pb-4 pb-lg-8">
+  <p class="pt-4 pb-4">
     {% translate "Cal-ITP doesn’t save any of your information. All Nevada County Connects transit benefits reduce fares by 50% for bus service on fixed routes." %}
   </p>
 {% endblock explanatory-text %}
diff --git a/benefits/eligibility/templates/eligibility/index--sacrt.html b/benefits/eligibility/templates/eligibility/index--sacrt.html
index b8667df4e..4abc0de0d 100644
--- a/benefits/eligibility/templates/eligibility/index--sacrt.html
+++ b/benefits/eligibility/templates/eligibility/index--sacrt.html
@@ -6,7 +6,7 @@
   <p class="pt-4">
     {% translate "Cal-ITP doesn’t save any of your information. All SacRT transit benefits reduce fares by 50% for bus service on fixed routes." %}
   </p>
-  <p class="pt-4 pb-4 pb-lg-8">
+  <p class="pt-4 pb-4">
     {% translate "With the new Tap2Ride fare system launching in 2025, SacRT riders that are eligible for discount fares can enroll below. The discount benefit will be available on all SacRT buses beginning in early 2025 and will include light rail tap devices later in the year." %}
   </p>
 {% endblock explanatory-text %}
diff --git a/benefits/eligibility/templates/eligibility/index--sbmtd.html b/benefits/eligibility/templates/eligibility/index--sbmtd.html
index 4ebfc12ea..aae1fd7e6 100644
--- a/benefits/eligibility/templates/eligibility/index--sbmtd.html
+++ b/benefits/eligibility/templates/eligibility/index--sbmtd.html
@@ -3,7 +3,7 @@
 {% load i18n %}
 
 {% block explanatory-text %}
-    <p class="pt-4 pb-4 pb-lg-8">
+    <p class="pt-4 pb-4">
         {% translate "Cal-ITP doesn’t save any of your information. All SBMTD transit benefits reduce fares by 50% for bus service on fixed routes." %}
     </p>
 {% endblock explanatory-text %}

From d844deca8e69945eb0e5bed390f0a29c72193528 Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Thu, 5 Dec 2024 20:17:49 +0000
Subject: [PATCH 4/6] refactor(css): use class to position, instead of
 declaring styles

---
 benefits/core/templates/core/widgets/flow-radio-select.html | 4 ++--
 benefits/static/css/styles.css                              | 4 ----
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/benefits/core/templates/core/widgets/flow-radio-select.html b/benefits/core/templates/core/widgets/flow-radio-select.html
index 4f04aff84..9eefe663a 100644
--- a/benefits/core/templates/core/widgets/flow-radio-select.html
+++ b/benefits/core/templates/core/widgets/flow-radio-select.html
@@ -2,7 +2,7 @@
 
 {% with id=widget.attrs.id %}
 
-  <label for="{{ id }}" class="pb-4 h2">{% translate "Which transit benefit would you like to enroll in?" %}</label>
+  <label for="{{ id }}" class="h2">{% translate "Which transit benefit would you like to enroll in?" %}</label>
 
   <div {% if id %}id="{{ id }}"{% endif %}>
     {% for group, options, index in widget.optgroups %}
@@ -13,7 +13,7 @@
           {% endif %}
 
           {% for option in options %}
-            <div class="radio-input-group d-flex">{% include option.template_name with widget=option %}</div>
+            <div class="radio-input-group d-flex pt-4">{% include option.template_name with widget=option %}</div>
           {% endfor %}
 
           {% if group %}
diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
index afd1aa82c..25083dc46 100644
--- a/benefits/static/css/styles.css
+++ b/benefits/static/css/styles.css
@@ -573,10 +573,6 @@ footer .footer-links li a.footer-link:visited {
   gap: var(--radio-input-gap);
 }
 
-.radio-input-group:not(:first-child) {
-  padding-top: calc(24rem / 16);
-}
-
 .radio-input {
   cursor: pointer;
   -webkit-appearance: none;

From e945960881b09751756a762d2854924a5371e03c Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Thu, 5 Dec 2024 20:23:17 +0000
Subject: [PATCH 5/6] refactor(css): use gap-4 (24px), gap-md-3 (16px); bump up
 15px to 16px

---
 .../templates/core/widgets/flow-radio-select.html     |  2 +-
 benefits/static/css/styles.css                        | 11 -----------
 2 files changed, 1 insertion(+), 12 deletions(-)

diff --git a/benefits/core/templates/core/widgets/flow-radio-select.html b/benefits/core/templates/core/widgets/flow-radio-select.html
index 9eefe663a..312b183f9 100644
--- a/benefits/core/templates/core/widgets/flow-radio-select.html
+++ b/benefits/core/templates/core/widgets/flow-radio-select.html
@@ -13,7 +13,7 @@
           {% endif %}
 
           {% for option in options %}
-            <div class="radio-input-group d-flex pt-4">{% include option.template_name with widget=option %}</div>
+            <div class="radio-input-group gap-4 gap-md-3 d-flex pt-4">{% include option.template_name with widget=option %}</div>
           {% endfor %}
 
           {% if group %}
diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
index 25083dc46..b5df52b27 100644
--- a/benefits/static/css/styles.css
+++ b/benefits/static/css/styles.css
@@ -556,23 +556,12 @@ footer .footer-links li a.footer-link:visited {
 :root {
   --radio-button-size: calc(24rem / 16);
   --radio-input-color: var(--standout-color);
-  --radio-input-gap: calc(24rem / 16);
-}
-
-@media (min-width: 992px) {
-  :root {
-    --radio-input-gap: calc(15rem / 16);
-  }
 }
 
 .radio-label {
   cursor: pointer;
 }
 
-.radio-input-group {
-  gap: var(--radio-input-gap);
-}
-
 .radio-input {
   cursor: pointer;
   -webkit-appearance: none;

From 1342b24973bf7644a620a6f4bf1680c4c14a2859 Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Fri, 6 Dec 2024 00:13:52 +0000
Subject: [PATCH 6/6] refactor: remove unused css class

---
 benefits/core/templates/core/widgets/flow-radio-select.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/benefits/core/templates/core/widgets/flow-radio-select.html b/benefits/core/templates/core/widgets/flow-radio-select.html
index 312b183f9..c7cafee68 100644
--- a/benefits/core/templates/core/widgets/flow-radio-select.html
+++ b/benefits/core/templates/core/widgets/flow-radio-select.html
@@ -13,7 +13,7 @@
           {% endif %}
 
           {% for option in options %}
-            <div class="radio-input-group gap-4 gap-md-3 d-flex pt-4">{% include option.template_name with widget=option %}</div>
+            <div class="gap-4 gap-md-3 d-flex pt-4">{% include option.template_name with widget=option %}</div>
           {% endfor %}
 
           {% if group %}