From ebf0d2249f932a35a78f9916c2d9d25bda827eef Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Wed, 7 Aug 2024 22:09:22 +0000
Subject: [PATCH 01/15] chore(scss): convert pill to css

---
 src/_sass/components/_pill.scss | 32 +++++++++++++++-----------------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/src/_sass/components/_pill.scss b/src/_sass/components/_pill.scss
index b38d1b46..7f91db6e 100644
--- a/src/_sass/components/_pill.scss
+++ b/src/_sass/components/_pill.scss
@@ -8,21 +8,19 @@
   line-height: 1;
   padding: 0.5rem 1rem;
   white-space: nowrap;
-
-  .pill__close {
-    appearance: none;
-    background-color: transparent;
-    border: 0;
-    margin-left: 0.5rem;
-    padding: 0;
-
-    &::after {
-      display: inline-block;
-      content: "";
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-x-circle' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath fill='%23ffffff' d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
-      height: 16px;
-      width: 16px;
-      margin-top: -1px;
-    }
-  }
+}
+.pill .pill__close {
+  appearance: none;
+  background-color: transparent;
+  border: 0;
+  margin-left: 0.5rem;
+  padding: 0;
+}
+.pill .pill__close::after {
+  display: inline-block;
+  content: "";
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-x-circle' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath fill='%23ffffff' d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
+  height: 16px;
+  width: 16px;
+  margin-top: -1px;
 }

From da5461056252f62567cab23925889d400fac93c0 Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Wed, 7 Aug 2024 22:10:58 +0000
Subject: [PATCH 02/15] chore(scss): convert footnotes to css

---
 src/_sass/components/_footnotes.scss | 54 ++++++++++++----------------
 1 file changed, 23 insertions(+), 31 deletions(-)

diff --git a/src/_sass/components/_footnotes.scss b/src/_sass/components/_footnotes.scss
index e107c5d1..2a595698 100644
--- a/src/_sass/components/_footnotes.scss
+++ b/src/_sass/components/_footnotes.scss
@@ -1,38 +1,30 @@
 a.footnote-link {
   color: currentColor;
   display: inline-flex;
-
-  &::before {
-    content: '[';
-  }
-
-  &::after {
-    content: ']';
-  }
-}
-
+}
+a.footnote-link::before {
+  content: "[";
+}
+a.footnote-link::after {
+  content: "]";
+}
 .footnote-listing {
   font-size: 0.85rem;
   list-style: none;
-
-  li:target {
-    background-color: yellow;
-
-    // Stupid overrides for some very invasive CA Gov styles
-    &::before {
-      height: auto;
-      margin: 0;
-    }
-  }
-
-  li {
-    position: relative;
-  }
-
-  span.footnote-number {
-    position: absolute;
-    right: 100%;
-    white-space: nowrap;
-    margin-right: .4em;
-  }
+}
+.footnote-listing li:target {
+  background-color: yellow;
+}
+.footnote-listing li:target::before {
+  height: auto;
+  margin: 0;
+}
+.footnote-listing li {
+  position: relative;
+}
+.footnote-listing span.footnote-number {
+  position: absolute;
+  right: 100%;
+  white-space: nowrap;
+  margin-right: 0.4em;
 }

From fc885d253139b41d592a4886a093962b450410df Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Wed, 7 Aug 2024 22:12:12 +0000
Subject: [PATCH 03/15] chore(scss): convert main content to css

---
 src/_sass/overrides/_main-content.scss | 24 ++++++++++--------------
 1 file changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/_sass/overrides/_main-content.scss b/src/_sass/overrides/_main-content.scss
index ad1f19c5..2a81de4f 100644
--- a/src/_sass/overrides/_main-content.scss
+++ b/src/_sass/overrides/_main-content.scss
@@ -1,15 +1,11 @@
-.main-content a {
-  &:not(.btn) {
-    font-weight: bold;
-
-    &,
-    &:hover {
-      background: 0;
-    }
-  }
-
-  &.no-default-style {
-    border-bottom: 0;
-    font-weight: normal;
-  }
+.main-content a:not(.btn) {
+  font-weight: bold;
+}
+.main-content a:not(.btn),
+.main-content a:not(.btn):hover {
+  background: 0;
+}
+.main-content a.no-default-style {
+  border-bottom: 0;
+  font-weight: normal;
 }

From e8e4cd7f1562b1ca399e27499a696c68d409b697 Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Wed, 7 Aug 2024 22:30:16 +0000
Subject: [PATCH 04/15] chore(scss): map-get, replace map-get spacers 2

---
 src/_sass/components/_filterable-table.scss | 5 +++--
 src/_sass/pages/_contracts.scss             | 4 ++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/_sass/components/_filterable-table.scss b/src/_sass/components/_filterable-table.scss
index 7eded3e4..e9045308 100644
--- a/src/_sass/components/_filterable-table.scss
+++ b/src/_sass/components/_filterable-table.scss
@@ -1,11 +1,12 @@
-.filterable-table-container {}
+.filterable-table-container {
+}
 
 .filterable-table__pills {
   width: 100%;
 
   .pill {
     margin-bottom: map-get($spacers, 3);
-    margin-left: map-get($spacers, 2);
+    margin-left: 0.5rem;
 
     &:first-child {
       margin-left: 0;
diff --git a/src/_sass/pages/_contracts.scss b/src/_sass/pages/_contracts.scss
index 45bfad40..bdeaba25 100644
--- a/src/_sass/pages/_contracts.scss
+++ b/src/_sass/pages/_contracts.scss
@@ -1,5 +1,5 @@
 .contactless-technology {
-  background-color: rgba(#EBF8FC, 50%);
+  background-color: rgba(#ebf8fc, 50%);
   border-radius: $border-radius-lg;
   display: flex;
   margin-bottom: map-get($spacers, 4);
@@ -16,7 +16,7 @@
 
 .contactless-technology__header {
   margin: 0;
-  margin-bottom: map-get($spacers, 2);
+  margin-bottom: 0.5rem;
 }
 
 .contactless-technology__subheader {

From effeae034aa449f4f1b4a13b5244628a87558bc9 Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Wed, 7 Aug 2024 22:31:15 +0000
Subject: [PATCH 05/15] chore(scss): map-get, replace map-get spacers 3

---
 src/_sass/_base.scss                        | 4 ++--
 src/_sass/components/_filterable-table.scss | 2 +-
 src/_sass/components/_page-header.scss      | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/_sass/_base.scss b/src/_sass/_base.scss
index 118ecff6..63d40437 100644
--- a/src/_sass/_base.scss
+++ b/src/_sass/_base.scss
@@ -40,7 +40,7 @@ blockquote {
 figure {
   background: none;
   border: none;
-  margin-bottom: map-get($spacers, 3);
+  margin-bottom: 1rem;
 
   figcaption {
     font-style: italic;
@@ -135,7 +135,7 @@ hr {
 
 .youtube {
   height: 315px;
-  margin-bottom: map-get($spacers, 3);
+  margin-bottom: 1rem;
   margin-left: auto;
   margin-right: auto;
   width: 100%;
diff --git a/src/_sass/components/_filterable-table.scss b/src/_sass/components/_filterable-table.scss
index e9045308..c5f59ab9 100644
--- a/src/_sass/components/_filterable-table.scss
+++ b/src/_sass/components/_filterable-table.scss
@@ -5,7 +5,7 @@
   width: 100%;
 
   .pill {
-    margin-bottom: map-get($spacers, 3);
+    margin-bottom: 1rem;
     margin-left: 0.5rem;
 
     &:first-child {
diff --git a/src/_sass/components/_page-header.scss b/src/_sass/components/_page-header.scss
index ffb9a323..ddd47e35 100644
--- a/src/_sass/components/_page-header.scss
+++ b/src/_sass/components/_page-header.scss
@@ -1,7 +1,7 @@
 .page-header {
   border-bottom: $border-width solid $border-color;
   margin-bottom: 30px;
-  padding-bottom: map-get($spacers, 3);
+  padding-bottom: 1rem;
   text-align: left;
 
   @include media-breakpoint-up(md) {

From 6b3065b7e80d1fda7c8bc3b8191251ca3a2f15c8 Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Wed, 7 Aug 2024 22:31:46 +0000
Subject: [PATCH 06/15] chore(scss): map-get, replace map-get spacers 4

---
 src/_sass/_base.scss            | 4 ++--
 src/_sass/pages/_contracts.scss | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/_sass/_base.scss b/src/_sass/_base.scss
index 63d40437..d3deac8c 100644
--- a/src/_sass/_base.scss
+++ b/src/_sass/_base.scss
@@ -128,8 +128,8 @@ h5,
 }
 
 hr {
-  margin-bottom: map-get($spacers, 4);
-  margin-top: map-get($spacers, 4);
+  margin-bottom: 1.5rem;
+  margin-top: 1.5rem;
   width: 100%;
 }
 
diff --git a/src/_sass/pages/_contracts.scss b/src/_sass/pages/_contracts.scss
index bdeaba25..df643952 100644
--- a/src/_sass/pages/_contracts.scss
+++ b/src/_sass/pages/_contracts.scss
@@ -2,8 +2,8 @@
   background-color: rgba(#ebf8fc, 50%);
   border-radius: $border-radius-lg;
   display: flex;
-  margin-bottom: map-get($spacers, 4);
-  padding: map-get($spacers, 4);
+  margin-bottom: 1.5rem;
+  padding: 1.5rem;
 
   &:last-child {
     margin-bottom: 0;
@@ -11,7 +11,7 @@
 }
 
 .contactless-technology__icon {
-  margin-right: map-get($spacers, 4);
+  margin-right: 1.5rem;
 }
 
 .contactless-technology__header {

From dd088f9393847b0d31714f33aaf4260f9e30a23d Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Wed, 7 Aug 2024 22:32:53 +0000
Subject: [PATCH 07/15] chore(scss): convert filterable table to css

---
 src/_sass/components/_filterable-table.scss | 21 +++++++--------------
 1 file changed, 7 insertions(+), 14 deletions(-)

diff --git a/src/_sass/components/_filterable-table.scss b/src/_sass/components/_filterable-table.scss
index c5f59ab9..b8cea7ec 100644
--- a/src/_sass/components/_filterable-table.scss
+++ b/src/_sass/components/_filterable-table.scss
@@ -1,20 +1,13 @@
-.filterable-table-container {
-}
-
 .filterable-table__pills {
   width: 100%;
-
-  .pill {
-    margin-bottom: 1rem;
-    margin-left: 0.5rem;
-
-    &:first-child {
-      margin-left: 0;
-    }
-  }
 }
-
-// These are magic numbers that probably can be replaced by some CSS magic
+.filterable-table__pills .pill {
+  margin-bottom: 1rem;
+  margin-left: 0.5rem;
+}
+.filterable-table__pills .pill:first-child {
+  margin-left: 0;
+}
 .filterable-table__pills--provider-map {
   left: 15px;
   position: absolute;

From 80760cbf47daf8d1c098d4b689ade4a88dd3b8b5 Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Wed, 7 Aug 2024 22:36:54 +0000
Subject: [PATCH 08/15] chore(scss): convert  to --bs-primary

---
 src/_sass/_base.scss                       | 2 +-
 src/_sass/components/_newsletter.scss      | 4 ++--
 src/_sass/components/_toc-and-content.scss | 8 ++++----
 src/_sass/pages/_go-contactless.scss       | 6 +++---
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/_sass/_base.scss b/src/_sass/_base.scss
index d3deac8c..79120b83 100644
--- a/src/_sass/_base.scss
+++ b/src/_sass/_base.scss
@@ -122,7 +122,7 @@ h5,
 }
 
 .subtext {
-  color: $primary;
+  color: var(--bs-primary);
   font-size: calc(14rem / 16);
   font-weight: 500;
 }
diff --git a/src/_sass/components/_newsletter.scss b/src/_sass/components/_newsletter.scss
index ce8584ad..5c87b2e6 100644
--- a/src/_sass/components/_newsletter.scss
+++ b/src/_sass/components/_newsletter.scss
@@ -47,8 +47,8 @@
   .ctct-form-button,
   div.ctct-form-embed form.ctct-form-custom button.ctct-form-button {
     font-weight: 700;
-    background-color: $primary;
-    border-color: $primary;
+    background-color: var(--bs-primary);
+    border-color: var(--bs-primary);
     padding: calc(11rem / 16);
     &:hover {
       color: #fff;
diff --git a/src/_sass/components/_toc-and-content.scss b/src/_sass/components/_toc-and-content.scss
index 8a64ef40..38bf8db4 100644
--- a/src/_sass/components/_toc-and-content.scss
+++ b/src/_sass/components/_toc-and-content.scss
@@ -81,7 +81,7 @@
       .toggle-menu {
         width: 100%;
         background: white;
-        color: $primary;
+        color: var(--bs-primary);
         border-top: 1px solid #d7d7d7;
         border-left: none;
         border-right: none;
@@ -97,7 +97,7 @@
         &::after {
           position: absolute;
           content: "";
-          border: solid $primary;
+          border: solid var(--bs-primary);
           border-width: 0 3px 3px 0;
           display: inline-block;
           padding: 3px;
@@ -142,7 +142,7 @@
 
   & > li > ul {
     li a {
-      color: $primary;
+      color: var(--bs-primary);
       white-space: break-spaces;
     }
   }
@@ -161,7 +161,7 @@
     display: inline-block;
     padding-bottom: 12px;
     padding-top: 12px;
-    width: 100%
+    width: 100%;
   }
 
   ul .dropdown-item {
diff --git a/src/_sass/pages/_go-contactless.scss b/src/_sass/pages/_go-contactless.scss
index 5b1fca7e..cd74b9c5 100644
--- a/src/_sass/pages/_go-contactless.scss
+++ b/src/_sass/pages/_go-contactless.scss
@@ -114,8 +114,8 @@ ol.timeline {
     font-weight: 600;
     float: left;
     width: calc(48rem / 16);
-    color: $primary;
-    border: calc(4rem / 16) solid $primary;
+    color: var(--bs-primary);
+    border: calc(4rem / 16) solid var(--bs-primary);
     border-radius: 50%;
     height: calc(48rem / 16);
     font-size: calc(24rem / 16);
@@ -130,7 +130,7 @@ ol.timeline {
   .timeline-item {
     margin-left: calc(24rem / 16);
     padding-left: calc(36rem / 16);
-    border-left: 4px solid $primary;
+    border-left: 4px solid var(--bs-primary);
     padding-bottom: calc(50rem / 16);
   }
   li:last-of-type .timeline-item {

From 3e344d6a95250351185c18751ecb70009d2918c6 Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Wed, 7 Aug 2024 22:48:43 +0000
Subject: [PATCH 09/15] chore(scss): replace  important with --bs-primary

---
 src/_sass/components/_header.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/_sass/components/_header.scss b/src/_sass/components/_header.scss
index 7ac53f5d..26d46040 100644
--- a/src/_sass/components/_header.scss
+++ b/src/_sass/components/_header.scss
@@ -46,7 +46,7 @@
       &:hover {
         background-color: $blue-lightest;
         .nav-link {
-          color: $primary !important;
+          color: var(--bs-primary);
         }
       }
       .nav-link {
@@ -95,7 +95,7 @@
       border-radius: 0;
       &[aria-current="page"] {
         background-color: $blue-lightest;
-        color: $primary !important;
+        color: var(--bs-primary) !important;
       }
     }
   }

From 1146dc3136ca3a746960f7ac681568e5ebec2ccf Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Wed, 7 Aug 2024 22:50:27 +0000
Subject: [PATCH 10/15] chore(variables): remove  entirely

---
 src/_sass/_variables.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/_sass/_variables.scss b/src/_sass/_variables.scss
index 6ffff9ff..710802eb 100644
--- a/src/_sass/_variables.scss
+++ b/src/_sass/_variables.scss
@@ -14,7 +14,6 @@ $hover-color: #035376;
 
 // New colors from 2023 / Figma
 
-$primary: #046b99;
 $primary-black: #212121;
 $dark-blue: #225173;
 
@@ -41,7 +40,7 @@ $custom-select-indicator: url('data:image/svg+xml,<svg width="12" height="7" vie
 // Bootstrap CSS Variable Overrides
 
 :root {
-  --bs-primary: #{$primary};
+  --bs-primary: #046b99;
   --bs-body-color: #{$primary-black};
   --bs-link-color: #{$primary};
   --bs-body-font-family: "Poppins", sans-serif;

From aeb84cabef69ddc62dad3acaaac22336d60db80f Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Wed, 7 Aug 2024 23:27:30 +0000
Subject: [PATCH 11/15] chore(scss): convert Header to CSS, remove unused vars,
 convert $ to css var

---
 src/_sass/_base.scss              |   2 +-
 src/_sass/_utilities.scss         |  18 ++-
 src/_sass/_variables.scss         |  35 +++---
 src/_sass/components/_header.scss | 178 +++++++++++++++---------------
 4 files changed, 111 insertions(+), 122 deletions(-)

diff --git a/src/_sass/_base.scss b/src/_sass/_base.scss
index 79120b83..f48011c7 100644
--- a/src/_sass/_base.scss
+++ b/src/_sass/_base.scss
@@ -15,7 +15,7 @@ a:focus {
 }
 
 blockquote {
-  background-color: $gray-light;
+  background-color: var(--gray-light);
   border-radius: $border-radius-lg;
   border-width: 0;
   padding: 2rem;
diff --git a/src/_sass/_utilities.scss b/src/_sass/_utilities.scss
index ec561f17..954c8872 100644
--- a/src/_sass/_utilities.scss
+++ b/src/_sass/_utilities.scss
@@ -2,27 +2,23 @@
 $mm-dark-tan: rgb(246, 243, 237);
 
 .bg-blue-lightest {
-  background-color: $blue-lightest;
+  background-color: var(--cal-itp-background-blue);
 }
 
 .bg-dark-tan {
   background-color: $mm-dark-tan;
 }
 
-.bg-gray-light {
-  background-color: $gray-light;
-}
-
 .bg-gray-lightest {
   background-color: $gray-lightest;
 }
 
 .bg-dark-blue {
-  background-color: $dark-blue;
+  background-color: var(--cal-itp-dark-blue);
 }
 
 .bg-blue-lightest {
-  background-color: $blue-lightest;
+  background-color: var(--cal-itp-background-blue);
 }
 
 // Text
@@ -55,10 +51,10 @@ $mm-dark-tan: rgb(246, 243, 237);
 
 .btn.btn-dark-blue-inverted {
   background-color: #ffffff;
-  color: $dark-blue;
+  color: var(--cal-itp-dark-blue);
   &:hover {
     background-color: $gray-1;
-    color: $dark-blue;
+    color: var(--cal-itp-dark-blue);
   }
 }
 
@@ -110,12 +106,12 @@ $mm-dark-tan: rgb(246, 243, 237);
 // Tables
 
 .table-dark-blue {
-  background-color: $dark-blue !important;
+  background-color: var(--cal-itp-dark-blue) !important;
   box-shadow: none !important;
 }
 
 .border-dark-blue {
-  border-color: $dark-blue !important;
+  border-color: var(--cal-itp-dark-blue) !important;
 }
 
 .table-sticky-column {
diff --git a/src/_sass/_variables.scss b/src/_sass/_variables.scss
index 710802eb..537f4f09 100644
--- a/src/_sass/_variables.scss
+++ b/src/_sass/_variables.scss
@@ -3,20 +3,14 @@
 $headings-font-family: "Raleway", sans-serif;
 $text-color: #323a45;
 $headings-color: $text-color;
-$code-color: $text-color;
 
 // Colors
 
-$blue-lightest: #f5f9fb;
-$gray-light: #d1dee3;
 $gray-lightest: #f3f3f4;
 $hover-color: #035376;
 
 // New colors from 2023 / Figma
 
-$primary-black: #212121;
-$dark-blue: #225173;
-
 $gray-1: #eeeeee;
 $gray-3: #8f9399;
 $gray-4: #60656b;
@@ -29,7 +23,7 @@ $focus: #99b5fa;
 $backgroundColor: #fff;
 $headerBackgroundColor: $backgroundColor;
 $rowBorderColor: #cccccc;
-$rowHoverBackground: $blue-lightest;
+$rowHoverBackground: #f5f9fb;
 $table-border-color: $rowBorderColor;
 
 // Down arrow icon used in selects and table sorts
@@ -41,29 +35,32 @@ $custom-select-indicator: url('data:image/svg+xml,<svg width="12" height="7" vie
 
 :root {
   --bs-primary: #046b99;
-  --bs-body-color: #{$primary-black};
-  --bs-link-color: #{$primary};
+  --bs-body-color: #212121;
+  --bs-link-color: #046b99;
   --bs-body-font-family: "Poppins", sans-serif;
-  --bs-link-hover-color: #{$dark-blue};
+  --bs-link-hover-color: #225173;
+  --gray-light: #d1dee3;
+  --cal-itp-dark-blue: #225173;
+  --cal-itp-background-blue: #f5f9fb;
 }
 
 .btn-primary {
-  --bs-btn-bg: #{$primary};
-  --bs-btn-border-color: #{$primary};
-  --bs-btn-hover-bg: #{$dark-blue};
+  --bs-btn-bg: #046b99;
+  --bs-btn-border-color: #046b99;
+  --bs-btn-hover-bg: #225173;
   --bs-btn-hover-color: #ffffff;
-  --bs-btn-hover-border-color: #{$dark-blue};
-  --bs-btn-active-bg: #{$dark-blue};
-  --bs-btn-active-border-color: #{$dark-blue};
+  --bs-btn-hover-border-color: #225173;
+  --bs-btn-active-bg: #225173;
+  --bs-btn-active-border-color: #225173;
 }
 
 .btn-outline-primary {
-  --bs-btn-color: #{$primary};
-  --bs-btn-border-color: #{$primary};
+  --bs-btn-color: #046b99;
+  --bs-btn-border-color: #046b99;
 }
 
 .dropdown-menu {
   --bs-dropdown-border-radius: 0;
   --bs-dropdown-link-hover-bg: #f7f8fa;
-  --bs-dropdown-link-active-bg: #{$gray-1};
+  --bs-dropdown-link-active-bg: #eeeeee;
 }
diff --git a/src/_sass/components/_header.scss b/src/_sass/components/_header.scss
index 26d46040..7fbf6ba0 100644
--- a/src/_sass/components/_header.scss
+++ b/src/_sass/components/_header.scss
@@ -7,108 +7,104 @@
   width: 0;
   height: 0;
   z-index: 999;
-
-  a {
-    width: 0;
-    height: 0;
-    text-align: center;
-    position: absolute !important;
-    left: 50% !important;
-    -webkit-transform: translateX(-50%);
-    -ms-transform: translateX(-50%);
-    transform: translateX(-50%);
-    clip: unset;
-    background-color: white;
-    border-bottom-left-radius: 7px;
-    border-bottom-right-radius: 7px;
-    overflow: hidden;
-
-    &:focus {
-      width: 160px;
-      height: 27px;
-    }
-  }
 }
-
-@include media-breakpoint-up(lg) {
+#skip-to-content a {
+  width: 0;
+  height: 0;
+  text-align: center;
+  position: absolute !important;
+  left: 50% !important;
+  -webkit-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%);
+  clip: unset;
+  background-color: white;
+  border-bottom-left-radius: 7px;
+  border-bottom-right-radius: 7px;
+  overflow: hidden;
+}
+#skip-to-content a:focus {
+  width: 160px;
+  height: 27px;
+}
+@media (min-width: breakpoint-min(lg, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))) {
   .navbar.main-navigation {
     height: 112px;
     padding: 0;
-    .navbar-brand {
-      margin-left: -20px;
-    }
-    .navbar-collapse {
-      margin: 0;
-      padding: 0;
-    }
-    .nav-fill .nav-item {
-      text-align: center;
-      &:hover {
-        background-color: $blue-lightest;
-        .nav-link {
-          color: var(--bs-primary);
-        }
-      }
-      .nav-link {
-        border-bottom: 0;
-        padding: 31.4px 0 31.4px 0;
-        margin: 0;
-      }
-    }
-    .dropdown .dropdown-menu.dropdown-menu-end {
-      border: 1px solid $gray-light;
-      right: 25% !important;
-      top: 62.4px !important;
-      .dropdown-item {
-        border-bottom: 0;
-        padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
-        &[aria-current="page"] {
-          background-color: $blue-lightest;
-        }
-      }
-    }
+  }
+  .navbar.main-navigation .navbar-brand {
+    margin-left: -20px;
+  }
+  .navbar.main-navigation .navbar-collapse {
+    margin: 0;
+    padding: 0;
+  }
+  .navbar.main-navigation .nav-fill .nav-item {
+    text-align: center;
+  }
+  .navbar.main-navigation .nav-fill .nav-item:hover {
+    background-color: var(--cal-itp-background-blue);
+  }
+  .navbar.main-navigation .nav-fill .nav-item:hover .nav-link {
+    color: var(--bs-primary);
+  }
+  .navbar.main-navigation .nav-fill .nav-item .nav-link {
+    border-bottom: 0;
+    padding: 31.4px 0 31.4px 0;
+    margin: 0;
+  }
+  .navbar.main-navigation .dropdown .dropdown-menu.dropdown-menu-end {
+    border: 1px solid var(--gray-light);
+    right: 25% !important;
+    top: 62.4px !important;
+  }
+  .navbar.main-navigation .dropdown .dropdown-menu.dropdown-menu-end .dropdown-item {
+    border-bottom: 0;
+    padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
+  }
+  .navbar.main-navigation .dropdown .dropdown-menu.dropdown-menu-end .dropdown-item[aria-current="page"] {
+    background-color: var(--cal-itp-background-blue);
   }
   #footer .nav li:first-of-type .nav-link {
     padding-left: 0;
   }
 }
-
 .main-navigation {
   padding-bottom: 0;
   max-width: 1280px;
   margin: 0 auto;
-  .navbar-brand {
-    padding: 14.5px 0;
-  }
-  .navbar-collapse {
-    margin-left: -12px;
-    margin-right: -10px;
-    margin-top: 0;
-  }
-  .nav-fill .nav-item {
-    text-align: left;
-    .nav-link {
-      border-bottom: 1px solid #e1f2f7;
-      padding: 20px 0 20px 15px;
-      margin-right: 2px;
-      margin-left: 2px;
-      border-radius: 0;
-      &[aria-current="page"] {
-        background-color: $blue-lightest;
-        color: var(--bs-primary) !important;
-      }
-    }
-  }
-  .dropdown-menu.show {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    .dropdown-item {
-      border-bottom: 1px solid #e1f2f7;
-      padding: 20px 0 20px 15px;
-      &[aria-current="page"] {
-        background-color: $blue-lightest;
-      }
-    }
-  }
+}
+.main-navigation .navbar-brand {
+  padding: 14.5px 0;
+}
+.main-navigation .navbar-collapse {
+  margin-left: -12px;
+  margin-right: -10px;
+  margin-top: 0;
+}
+.main-navigation .nav-fill .nav-item {
+  text-align: left;
+}
+.main-navigation .nav-fill .nav-item .nav-link {
+  border-bottom: 1px solid #e1f2f7;
+  padding: 20px 0 20px 15px;
+  margin-right: 2px;
+  margin-left: 2px;
+  border-radius: 0;
+}
+.main-navigation .nav-fill .nav-item .nav-link[aria-current="page"] {
+  background-color: var(--cal-itp-background-blue);
+  color: var(--bs-primary) !important;
+}
+.main-navigation .dropdown-menu.show {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+.main-navigation .dropdown-menu.show .dropdown-item {
+  border-bottom: 1px solid #e1f2f7;
+  padding: 20px 0 20px 15px;
+}
+.main-navigation .dropdown-menu.show .dropdown-item[aria-current="page"] {
+  background-color: var(--cal-itp-background-blue);
 }

From 1f0f86db757bfd0cd25b73e900d8894ee38037c8 Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Wed, 7 Aug 2024 23:37:02 +0000
Subject: [PATCH 12/15] chore(scss): convert imaged section to css

---
 src/_sass/components/_imaged-section.scss | 88 ++++++++++-------------
 1 file changed, 38 insertions(+), 50 deletions(-)

diff --git a/src/_sass/components/_imaged-section.scss b/src/_sass/components/_imaged-section.scss
index 5427e8d8..e955008d 100644
--- a/src/_sass/components/_imaged-section.scss
+++ b/src/_sass/components/_imaged-section.scss
@@ -1,74 +1,62 @@
 .imaged-section {
   display: grid;
   grid-column-gap: 2rem;
-  grid-template-areas:
-    "Title"
-    "Image"
-    "Content";
+  grid-template-areas: "Title" "Image" "Content";
   padding: 3rem 0;
-
-  &,
-  &.imaged-section--compact {
-    @include media-breakpoint-up(lg) {
-      grid-template-rows: 0.1fr 0.9fr;
-    }
+}
+@media (min-width: breakpoint-min(lg, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))) {
+  .imaged-section,
+  .imaged-section.imaged-section--compact {
+    grid-template-rows: 0.1fr 0.9fr;
   }
-
-  &.imaged-section--middle {
-    @include media-breakpoint-up(lg) {
-      grid-template-rows: 1fr 1fr;
-    }
+}
+@media (min-width: breakpoint-min(lg, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))) {
+  .imaged-section.imaged-section--middle {
+    grid-template-rows: 1fr 1fr;
   }
-
-  &,
-  &.imaged-section--right {
-    @include media-breakpoint-up(lg) {
-      grid-template-columns: 1.2fr 0.8fr;
-      grid-template-areas:
-        "Title Image"
-        "Content Image";
-    }
+}
+@media (min-width: breakpoint-min(lg, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))) {
+  .imaged-section,
+  .imaged-section.imaged-section--right {
+    grid-template-columns: 1.2fr 0.8fr;
+    grid-template-areas: "Title Image" "Content Image";
   }
-
-  &.imaged-section--left {
-    @include media-breakpoint-up(lg) {
-      grid-template-columns: 0.8fr 1.2fr;
-      grid-template-areas:
-        "Image Title"
-        "Image Content";
-    }
+}
+@media (min-width: breakpoint-min(lg, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))) {
+  .imaged-section.imaged-section--left {
+    grid-template-columns: 0.8fr 1.2fr;
+    grid-template-areas: "Image Title" "Image Content";
   }
 }
-
 .imaged-section__title {
   grid-area: Title;
-
-  @at-root .imaged-section--middle & {
-    display: flex;
-
-    h1, h2, h3,
-    h4, h5, h6 {
-      margin-top: auto;
-    }
-  }
 }
-
+.imaged-section--middle .imaged-section__title {
+  display: flex;
+}
+.imaged-section--middle .imaged-section__title h1,
+.imaged-section--middle .imaged-section__title h2,
+.imaged-section--middle .imaged-section__title h3,
+.imaged-section--middle .imaged-section__title h4,
+.imaged-section--middle .imaged-section__title h5,
+.imaged-section--middle .imaged-section__title h6 {
+  margin-top: auto;
+}
 .imaged-section__content {
   grid-area: Content;
 }
-
 .imaged-section__image {
   display: flex;
   justify-content: space-around;
   grid-area: Image;
   margin-bottom: 2rem;
   margin-top: 1rem;
-
-  @include media-breakpoint-up(lg) {
+}
+@media (min-width: breakpoint-min(lg, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))) {
+  .imaged-section__image {
     margin: 0;
   }
-
-  img {
-    align-self: center; // prevent vertical stretching of images
-  }
+}
+.imaged-section__image img {
+  align-self: center;
 }

From 5c15af8b36a75a2ae0d6362b0f868993adc69343 Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Wed, 7 Aug 2024 23:51:27 +0000
Subject: [PATCH 13/15] chore(scss): convert buttons to css

---
 src/_sass/overrides/_buttons.scss | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

diff --git a/src/_sass/overrides/_buttons.scss b/src/_sass/overrides/_buttons.scss
index 941c2491..e525a89f 100644
--- a/src/_sass/overrides/_buttons.scss
+++ b/src/_sass/overrides/_buttons.scss
@@ -1,21 +1,12 @@
 .btn {
   border-radius: calc(5rem / 16);
   font-weight: bold;
-  padding: 0.4375rem 0.75rem; // Button height of 40px
+  padding: 0.4375rem 0.75rem;
   width: 100%;
   border-width: 2px;
-  @include media-breakpoint-up(md) {
-    width: initial;
-  }
 }
-
-.btn-outline-primary {
-  background-color: transparent !important;
-
-  &:hover,
-  &:active,
-  &:focus {
-    color: $hover-color;
-    border-color: $hover-color;
+@media (min-width: breakpoint-min(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))) {
+  .btn {
+    width: initial;
   }
 }

From a4e328432725336d015247e03f814873e2b2e4f6 Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Wed, 7 Aug 2024 23:53:11 +0000
Subject: [PATCH 14/15] chore(scss): use variables for btn-outline, header font
 fam

---
 src/_sass/_base.scss      | 2 +-
 src/_sass/_variables.scss | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/_sass/_base.scss b/src/_sass/_base.scss
index f48011c7..50f79272 100644
--- a/src/_sass/_base.scss
+++ b/src/_sass/_base.scss
@@ -71,7 +71,7 @@ h5 {
 h1,
 h2,
 h3 {
-  font-family: $headings-font-family;
+  font-family: var(--headings-font-family);
 }
 
 h4,
diff --git a/src/_sass/_variables.scss b/src/_sass/_variables.scss
index 537f4f09..ff7eba34 100644
--- a/src/_sass/_variables.scss
+++ b/src/_sass/_variables.scss
@@ -1,6 +1,5 @@
 // Variables
 
-$headings-font-family: "Raleway", sans-serif;
 $text-color: #323a45;
 $headings-color: $text-color;
 
@@ -39,6 +38,7 @@ $custom-select-indicator: url('data:image/svg+xml,<svg width="12" height="7" vie
   --bs-link-color: #046b99;
   --bs-body-font-family: "Poppins", sans-serif;
   --bs-link-hover-color: #225173;
+  --headings-font-family: "Raleway", sans-serif;
   --gray-light: #d1dee3;
   --cal-itp-dark-blue: #225173;
   --cal-itp-background-blue: #f5f9fb;
@@ -57,6 +57,11 @@ $custom-select-indicator: url('data:image/svg+xml,<svg width="12" height="7" vie
 .btn-outline-primary {
   --bs-btn-color: #046b99;
   --bs-btn-border-color: #046b99;
+  --bs-btn-hover-bg: transparent;
+  --bs-btn-hover-color: #035376;
+  --bs-btn-hover-border-color: #035376;
+  --bs-btn-active-bg: #035376;
+  --bs-btn-active-border-color: #035376;
 }
 
 .dropdown-menu {

From 1eea2b781bb38f1ff252911d3853b4c9210a4c33 Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Wed, 7 Aug 2024 23:56:43 +0000
Subject: [PATCH 15/15] chore(scss): convert newsletter to css

---
 src/_sass/_variables.scss             |   2 +
 src/_sass/components/_newsletter.scss | 161 ++++++++++++--------------
 2 files changed, 76 insertions(+), 87 deletions(-)

diff --git a/src/_sass/_variables.scss b/src/_sass/_variables.scss
index ff7eba34..040486f5 100644
--- a/src/_sass/_variables.scss
+++ b/src/_sass/_variables.scss
@@ -42,6 +42,8 @@ $custom-select-indicator: url('data:image/svg+xml,<svg width="12" height="7" vie
   --gray-light: #d1dee3;
   --cal-itp-dark-blue: #225173;
   --cal-itp-background-blue: #f5f9fb;
+  --newsletter-btn-hover-color: #035376;
+  --newsletter-btn-hover-border-color: #035376;
 }
 
 .btn-primary {
diff --git a/src/_sass/components/_newsletter.scss b/src/_sass/components/_newsletter.scss
index 5c87b2e6..ff80a9ad 100644
--- a/src/_sass/components/_newsletter.scss
+++ b/src/_sass/components/_newsletter.scss
@@ -1,93 +1,80 @@
 .newsletter-container {
   padding-top: calc(80rem / 16);
-
-  @include media-breakpoint-up(md) {
+}
+@media (min-width: breakpoint-min(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))) {
+  .newsletter-container {
     padding-top: calc(104rem / 16);
     padding-bottom: calc(36rem / 16);
   }
-
-  .ctct-form-embed.form_0 .ctct-form-defaults {
-    padding: 0;
-  }
-
-  div.ctct-form-embed div.ctct-form-defaults h2.ctct-form-header {
-    font-family: $headings-font-family;
-  }
-
-  div.ctct-form-embed form.ctct-form-custom {
-    display: flex;
-    flex-direction: column;
-  }
-
-  #gdpr_text {
-    padding-top: 2rem;
-    order: 8;
-    font-size: calc(12rem / 16);
-    line-height: calc(16.8rem / 16);
-  }
-
-  .ctct-inline-form,
-  .ctct-form-defaults,
-  .ctct-form-custom,
-  .ctct-form-header,
-  div.ctct-form-embed div.ctct-form-defaults p.ctct-form-text,
-  div.ctct-form-embed div.ctct-form-defaults p.ctct-gdpr-text,
-  div.ctct-form-embed form.ctct-form-custom input.ctct-form-element,
-  .ctct-form-field,
-  .ctct-form-button {
-    font-family: var(--bs-body-font-family);
-    border-radius: calc(5rem / 16);
-  }
-
-  div.ctct-form-embed form.ctct-form-custom div.ctct-form-field,
-  #email_address_field_0 {
-    margin-bottom: calc(12.55rem / 16);
-  }
-
-  .ctct-form-button,
-  div.ctct-form-embed form.ctct-form-custom button.ctct-form-button {
-    font-weight: 700;
-    background-color: var(--bs-primary);
-    border-color: var(--bs-primary);
-    padding: calc(11rem / 16);
-    &:hover {
-      color: #fff;
-      background-color: $hover-color;
-      border-color: $hover-color;
-    }
-  }
-
-  div.ctct-form-embed form.ctct-form-custom input.ctct-form-element {
-    font-size: calc(24rem / 16);
-    line-height: 125%;
-    box-shadow: none;
-    border: calc(2rem / 16) solid #a6a9ae;
-    height: auto;
-  }
-
-  div.ctct-form-embed div.ctct-form-defaults p.ctct-gdpr-text {
-    color: #6b7178;
-  }
-
-  &.bg-white {
-    .ctct-form-embed.form_0 .ctct-form-defaults {
-      background-color: white !important;
-    }
-  }
-
-  div.ctct-form-embed form.ctct-form-custom .ctct-form-field .ctct-form-label.ctct-form-required::before {
-    display: none !important;
-  }
-
-  div.ctct-form-embed form.ctct-form-custom .ctct-form-field .ctct-form-label.ctct-form-required::after {
-    content: "\2217";
-    position: absolute;
-    top: -4px;
-    right: -10px;
-    color: #f5463b;
-  }
-
-  div.ctct-form-embed form.ctct-form-custom .ctct-form-field .ctct-form-label.ctct-form-required {
-    display: inline;
-  }
+}
+.newsletter-container .ctct-form-embed.form_0 .ctct-form-defaults {
+  padding: 0;
+}
+.newsletter-container div.ctct-form-embed div.ctct-form-defaults h2.ctct-form-header {
+  font-family: var(--headings-font-family);
+}
+.newsletter-container div.ctct-form-embed form.ctct-form-custom {
+  display: flex;
+  flex-direction: column;
+}
+.newsletter-container #gdpr_text {
+  padding-top: 2rem;
+  order: 8;
+  font-size: calc(12rem / 16);
+  line-height: calc(16.8rem / 16);
+}
+.newsletter-container .ctct-inline-form,
+.newsletter-container .ctct-form-defaults,
+.newsletter-container .ctct-form-custom,
+.newsletter-container .ctct-form-header,
+.newsletter-container div.ctct-form-embed div.ctct-form-defaults p.ctct-form-text,
+.newsletter-container div.ctct-form-embed div.ctct-form-defaults p.ctct-gdpr-text,
+.newsletter-container div.ctct-form-embed form.ctct-form-custom input.ctct-form-element,
+.newsletter-container .ctct-form-field,
+.newsletter-container .ctct-form-button {
+  font-family: var(--bs-body-font-family);
+  border-radius: calc(5rem / 16);
+}
+.newsletter-container div.ctct-form-embed form.ctct-form-custom div.ctct-form-field,
+.newsletter-container #email_address_field_0 {
+  margin-bottom: calc(12.55rem / 16);
+}
+.newsletter-container .ctct-form-button,
+.newsletter-container div.ctct-form-embed form.ctct-form-custom button.ctct-form-button {
+  font-weight: 700;
+  background-color: var(--bs-primary);
+  border-color: var(--bs-primary);
+  padding: calc(11rem / 16);
+}
+.newsletter-container .ctct-form-button:hover,
+.newsletter-container div.ctct-form-embed form.ctct-form-custom button.ctct-form-button:hover {
+  color: #fff;
+  background-color: var(--newsletter-btn-hover-color);
+  border-color: var(--newsletter-btn-hover-border-color);
+}
+.newsletter-container div.ctct-form-embed form.ctct-form-custom input.ctct-form-element {
+  font-size: calc(24rem / 16);
+  line-height: 125%;
+  box-shadow: none;
+  border: calc(2rem / 16) solid #a6a9ae;
+  height: auto;
+}
+.newsletter-container div.ctct-form-embed div.ctct-form-defaults p.ctct-gdpr-text {
+  color: #6b7178;
+}
+.newsletter-container.bg-white .ctct-form-embed.form_0 .ctct-form-defaults {
+  background-color: white !important;
+}
+.newsletter-container div.ctct-form-embed form.ctct-form-custom .ctct-form-field .ctct-form-label.ctct-form-required::before {
+  display: none !important;
+}
+.newsletter-container div.ctct-form-embed form.ctct-form-custom .ctct-form-field .ctct-form-label.ctct-form-required::after {
+  content: "\2217";
+  position: absolute;
+  top: -4px;
+  right: -10px;
+  color: #f5463b;
+}
+.newsletter-container div.ctct-form-embed form.ctct-form-custom .ctct-form-field .ctct-form-label.ctct-form-required {
+  display: inline;
 }