WCAG AA improvements

website/resources/css/custom.css

@@ -1,3 +1,17 @@
+.main-section a,
+.footer a {
+	text-decoration: underline;
+	text-underline-offset: 0.15em;
+	text-decoration-color: #d9230f20;
+}
+
+.main-section a:hover,
+.main-section a:focus,
+.footer a:hover,
+.footer a:focus {
+	text-decoration-color: #91170A;
+}
+
 .importantNotification {
 	background-color: #FFEBCD;
 	border-radius: 20px;
@@ -5,7 +19,7 @@
 	margin: 10px;
 }
 
-.tidelift-link-inline {
+.main-section .tidelift-link-inline {
 	border-radius: 18px;
 	background-color: #626980;
 	background-color: #626980;
@@ -15,9 +29,10 @@
 	background-size: 12px;
 	padding: 2px 8px 2px 26px;
 	color: white;
+	text-decoration-color: #ffffff20;
 }
 
-.tidelift-link {
+.main-section .tidelift-link {
 	border-bottom-left-radius: 18px;
 	border-top-left-radius: 18px;
 	background-color: #626980;
@@ -32,13 +47,15 @@
 	background-position: 10px;
 	background-size: 12px;
 	padding: 6px 12px 6px 28px;
+	text-decoration-color: #ffffff20;
 }
 
-.tidelift-link:focus,
-.tidelift-link-inline:focus,
-.tidelift-link:hover,
-.tidelift-link-inline:hover {
+.main-section .tidelift-link:focus,
+.main-section .tidelift-link-inline:focus,
+.main-section .tidelift-link:hover,
+.main-section .tidelift-link-inline:hover {
 	color: white;
+	text-decoration-color: white;
 }
 
 #tideliftlink {
@@ -70,6 +87,10 @@ pre {
 	text-align: center;
 }
 
+.main-section a.tideliftb {
+	text-decoration: none;
+}
+
 .tideliftb1 {
 	background-color: white;
 	float: left;
@@ -532,8 +553,12 @@ a:not([role=button]):focus {
 	padding: 0 1em;
 }
 
-.sponsored a {
-	color: #1DA32B;
-	text-decoration: underline;
-	text-underline-offset: 0.15em;
+.main-section .sponsored a {
+	color: #008800;
+	text-decoration-color: currentcolor;
+}
+
+.main-section .sponsored a:hover {
+	color: #008800;
+	text-decoration-color: currentcolor;
 }