fix(a11y): footer logo hover/active UX

Author: wesleyboar

apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/c-footer.css

@@ -43,18 +43,14 @@
 }
 
 /* For independent logo sizes */
-.c-footer .logos__tacc svg {
+.c-footer .logos--branding svg {
   height: 55%;
-
+}
+.c-footer .logos__tacc svg {
   /* To vertically align center as if small text was not present */
   transform: translateY(5%);
 }
-.c-footer .logos__nsf svg {
-  height: 100%;
-}
 .c-footer .logos__ut svg {
-  height: 66.67%;
-
   /* To vertically align center as if small text was not present */
   transform: translateY(5%);
 }
@@ -78,19 +74,26 @@
 }
 
 /* To skin logo links */
-.c-footer [class*="logos--"] a:hover {
-    color: inherit;
-    opacity: 0.75;
+.c-footer [class*="logos--"] a {
+    &:hover {
+        color: inherit;
+    }
+    &:hover svg {
+        color: currentColor;
+        outline: var(--global-border-width--normal) solid currentColor;
+        outline-offset: 5px;
+        border-radius: var(--global-border-width--normal);
+    }
+    &:active svg {
+        outline-style: dotted;
+    }
 }
 .c-footer .logos--social a {
     padding: 0.5em;
 }
 .c-footer .logos--social svg {
     font-size: 2.5rem;
 }
-.c-footer .logos--social a:hover svg {
-    color: var(--global-color-accent--light-alt);
-}
 
 
 /* HACK: To undo tricky Instagram hover color */
@@ -239,4 +242,3 @@ html#page-portal .c-footer p {
       text-decoration-color: inherit;
     }
 }
-