fix(footer): align legal link hover color with adjacent nav

Author: Sahilshrma31

src/components/Footer/Footer.jsx

@@ -10,7 +10,7 @@ const footerLinkClasses =
 
 const Footer = () => (
   <footer className="w-full flex-[0_0_auto] print:hidden">
-    <Container className="mx-auto max-w-[900px] px-5 pb-[30px] pt-[40px] text-center [&_a]:text-[#3b7eb5]">
+    <Container className="mx-auto max-w-[900px] px-5 pb-[30px] pt-[40px] text-center">
       <div className="mb-[24px] flex justify-center">
         <a href="https://openjsf.org" target="_blank" rel="noopener noreferrer">
           <img
@@ -20,7 +20,7 @@ const Footer = () => (
           />
         </a>
       </div>
-      <p className="mx-auto text-[15px] leading-[1.6] text-[#333333] dark:text-[#e0e0e0]">
+      <p className="footer-legal-links mx-auto text-[15px] leading-[1.6] text-[#333333] dark:text-[#e0e0e0]">
         Copyright <a href="https://openjsf.org">OpenJS Foundation</a> and
         webpack contributors. All rights reserved. The{" "}
         <a href="https://openjsf.org">OpenJS Foundation</a> has registered
@@ -36,7 +36,7 @@ const Footer = () => (
         holders. Use of them does not imply any affiliation with or endorsement
         by them.
       </p>
-      <p className="mx-auto mt-[18px] text-[15px] leading-[1.6] text-[#333333] dark:text-[#e0e0e0]">
+      <p className="footer-legal-links mx-auto mt-[18px] text-[15px] leading-[1.6] text-[#333333] dark:text-[#e0e0e0]">
         <a href="https://openjsf.org">The OpenJS Foundation</a> |{" "}
         <a href="https://terms-of-use.openjsf.org">Terms of Use</a> |{" "}
         <a href="https://privacy-policy.openjsf.org">Privacy Policy</a> |{" "}

src/styles/index.css

@@ -66,3 +66,15 @@ body {
 .screen-reader-only {
   @apply sr-only;
 }
+
+.footer-legal-links a {
+  @apply text-[#3b7eb5] transition-colors duration-[250ms];
+}
+
+.footer-legal-links a:hover {
+  color: var(--color-brand-link-hover);
+}
+
+.dark .footer-legal-links a:hover {
+  color: var(--color-dark-link-hover);
+}