From fb9c8f2b3aa046bce77532c08314431052427d5f Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Mon, 18 Nov 2024 22:49:00 +0000
Subject: [PATCH 1/5] refactor: remove CA State Web Template from base, remove
 CSP for AzureEdge

---
 benefits/core/templates/core/base.html | 29 +++++++-------------------
 benefits/settings.py                   |  5 ++---
 2 files changed, 10 insertions(+), 24 deletions(-)

diff --git a/benefits/core/templates/core/base.html b/benefits/core/templates/core/base.html
index caf763b67f..b6283dd8f8 100644
--- a/benefits/core/templates/core/base.html
+++ b/benefits/core/templates/core/base.html
@@ -16,23 +16,17 @@
     <title>{% block page-title %}{% endblock page-title %}| {% translate "Cal-ITP Benefits" %}</title>
     {# djlint:on #}
 
-    {% block preload %}{% endblock preload %}
+    {% block preload %}
+    {% endblock preload %}
 
     <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet" type="text/css">
-
-    {% comment %}
-      CA State Template v6.0.7 comes with Bootstrap v5.1.3
-      See https://github.com/Office-of-Digital-Services/California-State-Web-Template/releases/tag/v6.0.7
-    {% endcomment %}
-    <link href="https://california.azureedge.net/cdt/statetemplate/6.0.7/css/cagov.core.min.css" rel="stylesheet">
-
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
+          rel="stylesheet"
+          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
+          crossorigin="anonymous">
     <link href="{% static "css/styles.css" %}" rel="stylesheet">
     <link href="{% static "img/favicon.ico" %}" rel="icon" type="image/x-icon" />
 
-    {% comment %}
-      CA State Template v6.0.7 does not include jQuery
-      See https://github.com/Office-of-Digital-Services/California-State-Web-Template/releases/tag/v6.0.7
-    {% endcomment %}
     <script nonce="{{ request.csp_nonce }}"
             src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js"
             integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
@@ -149,15 +143,8 @@
 
     </footer>
 
-    {% comment %}
-      CA State Template v6.0.7 comes with Bootstrap v5.1.3
-      see https://github.com/Office-of-Digital-Services/California-State-Web-Template/releases/tag/v6.0.7
-
-      But we aren't using CA State Template Javascript, so include Bootstrap directly
-    {% endcomment %}
-    <script nonce="{{ request.csp_nonce }}"
-            src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
-            integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
+            integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
             crossorigin="anonymous"></script>
 
     <script nonce="{{ request.csp_nonce }}">
diff --git a/benefits/settings.py b/benefits/settings.py
index 23d892f6c1..91d79e470b 100644
--- a/benefits/settings.py
+++ b/benefits/settings.py
@@ -310,7 +310,7 @@ def RUNTIME_ENVIRONMENT():
 env_connect_src = _filter_empty(os.environ.get("DJANGO_CSP_CONNECT_SRC", "").split(","))
 CSP_CONNECT_SRC.extend(env_connect_src)
 
-CSP_FONT_SRC = ["'self'", "https://california.azureedge.net/", "https://fonts.gstatic.com/"]
+CSP_FONT_SRC = ["'self'", "https://fonts.gstatic.com/"]
 env_font_src = _filter_empty(os.environ.get("DJANGO_CSP_FONT_SRC", "").split(","))
 CSP_FONT_SRC.extend(env_font_src)
 
@@ -353,9 +353,8 @@ def RUNTIME_ENVIRONMENT():
 CSP_STYLE_SRC = [
     "'self'",
     "'unsafe-inline'",
-    "https://california.azureedge.net/",
     "https://fonts.googleapis.com/css",
-    "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/",
+    "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/",
 ]
 env_style_src = _filter_empty(os.environ.get("DJANGO_CSP_STYLE_SRC", "").split(","))
 CSP_STYLE_SRC.extend(env_style_src)

From 46148404196d3d869ac66cf1aa9c948dbdc8c70b Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Mon, 18 Nov 2024 22:50:15 +0000
Subject: [PATCH 2/5] fix(css): replace text-left with text-start

---
 benefits/core/templates/core/includes/nocookies.html        | 2 +-
 benefits/core/templates/core/includes/noscript.html         | 2 +-
 benefits/core/templates/core/landing.html                   | 2 +-
 benefits/in_person/templates/error-base.html                | 2 +-
 benefits/in_person/templates/in_person/eligibility.html     | 2 +-
 .../in_person/templates/in_person/enrollment/index.html     | 2 +-
 .../in_person/templates/in_person/enrollment/success.html   | 2 +-
 benefits/templates/admin/agency-dashboard-index.html        | 6 +++---
 8 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/benefits/core/templates/core/includes/nocookies.html b/benefits/core/templates/core/includes/nocookies.html
index a03ff4727b..3be05bc587 100644
--- a/benefits/core/templates/core/includes/nocookies.html
+++ b/benefits/core/templates/core/includes/nocookies.html
@@ -2,7 +2,7 @@
 {% load i18n %}
 
 {% block content %}
-  <div class="text-left">
+  <div class="text-start">
     <span class="navbar-brand">{% translate "Cookies are disabled" %}</span>
     <span class="navbar-text">
       {% translate "To function properly, this website requires a browser that supports cookies. Please enable cookies for this website and" %}
diff --git a/benefits/core/templates/core/includes/noscript.html b/benefits/core/templates/core/includes/noscript.html
index 11c6fd4149..2202de5a43 100644
--- a/benefits/core/templates/core/includes/noscript.html
+++ b/benefits/core/templates/core/includes/noscript.html
@@ -2,7 +2,7 @@
 {% load i18n %}
 
 {% block content %}
-  <div class="text-left">
+  <div class="text-start">
     <span class="navbar-brand">{% translate "JavaScript is disabled" %}</span>
     <span class="navbar-text">
       {% translate "To function properly, this website requires a browser that supports JavaScript. Please enable JavaScript for this website and" %}
diff --git a/benefits/core/templates/core/landing.html b/benefits/core/templates/core/landing.html
index 7090d4ddab..ba1e6e2a41 100644
--- a/benefits/core/templates/core/landing.html
+++ b/benefits/core/templates/core/landing.html
@@ -21,7 +21,7 @@
     <div class="row align-items-end align-items-lg-center">
       <div class="col-lg-5">
         <div class="box py-3 px-3 py-lg-0 px-lg-0 mt-lg-5 pt-lg-4">
-          <h1 class="text-left p-0 ">
+          <h1 class="text-start p-0 ">
             {% block headline %}
             {% endblock headline %}
           </h1>
diff --git a/benefits/in_person/templates/error-base.html b/benefits/in_person/templates/error-base.html
index 642dba1f5a..77c847ca4b 100644
--- a/benefits/in_person/templates/error-base.html
+++ b/benefits/in_person/templates/error-base.html
@@ -9,7 +9,7 @@
     <div class="row justify-content-center">
         <div class="col-lg-6">
             <div class="border border-3 p-3">
-                <h2 class="p-0 m-0 text-left">In-person enrollment</h2>
+                <h2 class="p-0 m-0 text-start">In-person enrollment</h2>
             </div>
             <div class="border border-3 border-top-0 p-3 min-vh-60 d-flex flex-column justify-content-between">
                 <div class="d-flex">
diff --git a/benefits/in_person/templates/in_person/eligibility.html b/benefits/in_person/templates/in_person/eligibility.html
index d78a43850d..95b4d4c9d8 100644
--- a/benefits/in_person/templates/in_person/eligibility.html
+++ b/benefits/in_person/templates/in_person/eligibility.html
@@ -8,7 +8,7 @@
     <div class="row justify-content-center">
         <div class="col-11 col-md-10 col-lg-6 border border-3 px-0">
             <div class="border border-3 border-top-0 border-start-0 border-end-0">
-                <h2 class="p-3 m-0 text-left">In-person enrollment</h2>
+                <h2 class="p-3 m-0 text-start">In-person enrollment</h2>
             </div>
             <div class="p-3">{% include "core/includes/form.html" with form=form %}</div>
             <div class="row d-flex justify-content-start p-3 pt-8">
diff --git a/benefits/in_person/templates/in_person/enrollment/index.html b/benefits/in_person/templates/in_person/enrollment/index.html
index 68bf22c175..1690a415df 100644
--- a/benefits/in_person/templates/in_person/enrollment/index.html
+++ b/benefits/in_person/templates/in_person/enrollment/index.html
@@ -9,7 +9,7 @@
     <div class="row justify-content-center">
         <div class="col-lg-6">
             <div class="border border-3 p-3">
-                <h2 class="p-0 m-0 text-left">In-person enrollment</h2>
+                <h2 class="p-0 m-0 text-start">In-person enrollment</h2>
             </div>
             <div class="border border-3 border-top-0 p-3">
                 <div class="loading">
diff --git a/benefits/in_person/templates/in_person/enrollment/success.html b/benefits/in_person/templates/in_person/enrollment/success.html
index 88e304638e..9d02041304 100644
--- a/benefits/in_person/templates/in_person/enrollment/success.html
+++ b/benefits/in_person/templates/in_person/enrollment/success.html
@@ -9,7 +9,7 @@
     <div class="row justify-content-center">
         <div class="col-lg-6">
             <div class="border border-3 p-3">
-                <h2 class="p-0 m-0 text-left">In-person enrollment</h2>
+                <h2 class="p-0 m-0 text-start">In-person enrollment</h2>
             </div>
             <div class="border border-3 border-top-0 p-3 min-vh-60 d-flex flex-column justify-content-between">
                 <div class="d-flex">
diff --git a/benefits/templates/admin/agency-dashboard-index.html b/benefits/templates/admin/agency-dashboard-index.html
index 8e67c589cf..542fad5978 100644
--- a/benefits/templates/admin/agency-dashboard-index.html
+++ b/benefits/templates/admin/agency-dashboard-index.html
@@ -8,10 +8,10 @@
 {% block content %}
     <div class="row">
         <div class="col-lg-12">
-            <h1 class="pt-0 pb-3 text-left">{{ agency.long_name }}</h1>
+            <h1 class="pt-0 pb-3 text-start">{{ agency.long_name }}</h1>
             {% if has_permission_for_in_person %}
                 <div class="border border-3 p-3">
-                    <h2 class="pt-0 pb-2 text-left">In-person enrollment</h2>
+                    <h2 class="pt-0 pb-2 text-start">In-person enrollment</h2>
                     <p>Verify transit benefit eligibility using agency criteria and complete a rider’s open-loop card enrollment.</p>
                     {% url routes.IN_PERSON_ELIGIBILITY as url_eligibility %}
                     <div class="row pt-4">
@@ -22,7 +22,7 @@ <h2 class="pt-0 pb-2 text-left">In-person enrollment</h2>
                 </div>
                 {% if transit_processor_portal_url %}
                     <div class="border border-3 p-3 mt-4">
-                        <h2 class="pt-0 pb-2 text-left">Transit Processor</h2>
+                        <h2 class="pt-0 pb-2 text-start">Transit Processor</h2>
                         <p>Manage fare-calculation, view rider transactions, and process refunds.</p>
                         <div class="row pt-4">
                             <div class="col-lg-3">

From 24d6322411d2e0c14f60dd33ce82553cb8900e8e Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Mon, 18 Nov 2024 23:38:48 +0000
Subject: [PATCH 3/5] fix(css): buttons - all btn border-radius is 0.1875rem

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

diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
index a2021612b0..5b14b2cca8 100644
--- a/benefits/static/css/styles.css
+++ b/benefits/static/css/styles.css
@@ -320,6 +320,11 @@ footer .footer-links li a.footer-link:visited {
   }
 }
 
+.btn,
+.btn-lg {
+  --bs-btn-border-radius: var(--border-radius);
+}
+
 .btn.btn-lg.btn-primary {
   background-color: var(--primary-color);
   border-color: var(--primary-color);

From 4e3fd9fb9f8be9346e42757aba864ff415dd2790 Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Tue, 19 Nov 2024 00:36:33 +0000
Subject: [PATCH 4/5] refactor(buttons): fix hover/focus bg, use css vars over
 rules

---
 .../templates/core/includes/lang-selector.html   |  2 +-
 benefits/static/css/styles.css                   | 16 +++++++++-------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/benefits/core/templates/core/includes/lang-selector.html b/benefits/core/templates/core/includes/lang-selector.html
index 82fc08b074..891bfb3616 100644
--- a/benefits/core/templates/core/includes/lang-selector.html
+++ b/benefits/core/templates/core/includes/lang-selector.html
@@ -16,7 +16,7 @@
       {% get_language_info for code as langinfo %}
       <input name="next" type="hidden" value="{{ redirect_to }}" />
       <input name="language" type="hidden" value="{{ code }}" />
-      <button class="btn btn-lg btn-outline-light" type="submit">{{ langinfo.name_local | capfirst }}</button>
+      <button class="btn btn-outline-light" type="submit">{{ langinfo.name_local | capfirst }}</button>
     </form>
   {% endif %}
 {% endfor %}
diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
index 5b14b2cca8..91e8ccc3ff 100644
--- a/benefits/static/css/styles.css
+++ b/benefits/static/css/styles.css
@@ -227,8 +227,9 @@ h4 {
 
 /* Language button */
 #header-container .btn-outline-light {
-  font-size: var(--bs-body-font-size);
-  padding: 3.5px 29.01px; /* 126 x 38px, all screen sizes  */
+  --bs-btn-font-size: var(--bs-body-font-size);
+  --bs-btn-padding-y: 3.5px;
+  --bs-btn-padding-x: 29.01px;
 }
 
 /* Main */
@@ -323,6 +324,7 @@ footer .footer-links li a.footer-link:visited {
 .btn,
 .btn-lg {
   --bs-btn-border-radius: var(--border-radius);
+  --bs-btn-hover-bg: #ffffff;
 }
 
 .btn.btn-lg.btn-primary {
@@ -348,10 +350,10 @@ footer .footer-links li a.footer-link:visited {
 .btn-outline-dark:focus,
 .btn-outline-dark:focus-visible,
 .btn-outline-light:focus,
-.btn-ouline-dark:focus-visible {
-  outline: 3px solid var(--focus-color) !important;
-  outline-offset: 2px !important;
-  box-shadow: none !important; /* override CA State Web Template */
+.btn-ouline-light:focus-visible {
+  outline: 3px solid var(--focus-color);
+  outline-offset: 2px;
+  box-shadow: none;
 }
 
 .btn-text {
@@ -363,7 +365,7 @@ footer .footer-links li a.footer-link:visited {
 /* Previous Button, Language Button */
 .btn-outline-dark,
 .btn-outline-light {
-  border-width: 2px;
+  --bs-btn-border-width: 2px;
 }
 
 /* Custom button: Loading spinner */

From a8a89dd905242721d6d6b09514eddc328e16e764 Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Tue, 19 Nov 2024 00:45:34 +0000
Subject: [PATCH 5/5] fix: fix skip nav - should not show up on load

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

diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
index 91e8ccc3ff..aa80388681 100644
--- a/benefits/static/css/styles.css
+++ b/benefits/static/css/styles.css
@@ -242,6 +242,7 @@ main {
   left: unset !important;
   transform: none;
   overflow: hidden;
+  height: 0;
 }
 
 #skip-to-content:focus {