diff --git a/benefits/core/templates/core/base.html b/benefits/core/templates/core/base.html
index 609157227..20ef9cfd5 100644
--- a/benefits/core/templates/core/base.html
+++ b/benefits/core/templates/core/base.html
@@ -106,10 +106,10 @@
diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
index 68f2d5bee..c32359c1f 100644
--- a/benefits/static/css/styles.css
+++ b/benefits/static/css/styles.css
@@ -23,6 +23,7 @@
--error-color: #ea1010;
--selected-color: #562b97;
--focus-color: #fdb714;
+ --secondary-bg-color: #fafafa;
--error-color-rgb: 234, 16, 16;
--bs-danger: var(--error-color);
--bs-danger-rgb: var(--error-color-rgb);
@@ -146,8 +147,8 @@ a:hover:not(.btn) {
text-decoration: underline;
}
-a:focus:not(.btn):not(.card),
-a:focus-visible:not(.btn):not(.card) {
+a:focus:not(.btn):not(.card):not(.footer-link),
+a:focus-visible:not(.btn):not(.card):not(.footer-link) {
outline: 3px solid var(--focus-color) !important;
outline-offset: 2px !important;
}
@@ -277,7 +278,7 @@ footer .footer-links li {
width: var(--footer-link-width);
}
-footer .footer-links li a {
+footer .footer-links li a.footer-link {
color: var(--footer-link-color);
font-weight: var(--footer-link-font-weight);
font-size: var(--bs-body-font-size);
@@ -286,12 +287,18 @@ footer .footer-links li a {
line-height: 50px;
}
-footer .footer-links li a:hover {
+footer .footer-links li a.footer-link:hover {
color: var(--footer-link-hover-color);
}
-footer .footer-links li a:active,
-footer .footer-links li a:visited {
+footer .footer-links li a.footer-link:focus,
+footer .footer-links li a.footer-link:focus-visible {
+ outline: 3px solid var(--secondary-bg-color) !important;
+ outline-offset: 2px !important;
+}
+
+footer .footer-links li a.footer-link:active,
+footer .footer-links li a.footer-link:visited {
color: var(--footer-link-visited-color);
}