chg: usr: add clickable badges for Cap app-wide #13

assets/css/homepage/_auth.scss

@@ -106,12 +106,44 @@
     padding: 4px 10px;
     border-radius: 999px;
     border: 1px solid rgba(149, 207, 245, 0.35);
-    background: rgba(35, 111, 135, 0.2);
+    background:
+        linear-gradient(115deg, transparent 0 38%, rgba(255, 255, 255, 0.18) 48%, transparent 58% 100%),
+        rgba(35, 111, 135, 0.2);
+    background-position: 120% 50%, 0 0;
+    background-size: 260% 100%, auto;
     color: #95cff5;
     font: 600 11px 'Rajdhani', sans-serif;
     letter-spacing: 0.8px;
+    text-decoration: none;
     text-transform: uppercase;
+    transition:
+        background-position 650ms ease,
+        border-color 200ms ease,
+        box-shadow 200ms ease,
+        color 200ms ease,
+        transform 200ms ease;
     white-space: nowrap;
+
+    &:hover,
+    &:focus-visible {
+        background-position: -60% 50%, 0 0;
+        border-color: rgba(149, 207, 245, 0.65);
+        box-shadow: 0 0 18px rgba(35, 111, 135, 0.28);
+        color: #d5f1ff;
+        transform: translateY(-1px);
+    }
+
+    &:hover,
+    &:focus,
+    &:active,
+    &:visited {
+        text-decoration: none;
+    }
+
+    &:focus-visible {
+        outline: 2px solid rgba(149, 207, 245, 0.75);
+        outline-offset: 2px;
+    }
 }
 
 .auth-sub {