Refine sponsor hover and update CTA styling

Author: carlospolop

theme/css/chrome.css

@@ -56,15 +56,24 @@ a > .hljs {
 .menu-bar-link-request-update:visited {
     display: inline-flex;
     align-items: center;
-    border-radius: 6px;
-    padding: 6px 10px;
-    color: #ffffff;
-    background: #d12f1f;
+    border: 1px solid color-mix(in srgb, var(--links) 45%, transparent);
+    border-radius: 999px;
+    padding: 5px 11px;
+    color: var(--menu-bar-link-color-hover);
+    background:
+        linear-gradient(135deg,
+            color-mix(in srgb, var(--links) 20%, transparent),
+            color-mix(in srgb, var(--sidebar-active) 16%, transparent));
     font-weight: 700;
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 10%, transparent);
 }
 .menu-bar-link-request-update:hover {
-    color: #ffffff;
-    background: #f04b36;
+    color: var(--menu-bar-link-color-hover);
+    border-color: color-mix(in srgb, var(--links) 70%, transparent);
+    background:
+        linear-gradient(135deg,
+            color-mix(in srgb, var(--links) 30%, transparent),
+            color-mix(in srgb, var(--sidebar-active) 24%, transparent));
 }
 #menu-bar.sticky,
 #menu-bar-hover-placeholder:hover + #menu-bar,
@@ -296,15 +305,21 @@ body.sidebar-visible #menu-bar {
 #menubar-collapse-popup .menu-bar-link-request-update:visited {
     margin: 6px 8px;
     padding: 8px 12px;
-    color: #ffffff;
-    background: #d12f1f;
+    color: var(--fg);
+    background:
+        linear-gradient(135deg,
+            color-mix(in srgb, var(--links) 18%, var(--bg)),
+            color-mix(in srgb, var(--sidebar-active) 14%, var(--bg)));
 }
 #menubar-collapse-popup .menu-bar-link:hover {
     background-color: var(--theme-hover);
 }
 #menubar-collapse-popup .menu-bar-link-request-update:hover {
-    color: #ffffff;
-    background: #f04b36;
+    color: var(--menu-bar-link-color-hover);
+    background:
+        linear-gradient(135deg,
+            color-mix(in srgb, var(--links) 28%, var(--bg)),
+            color-mix(in srgb, var(--sidebar-active) 22%, var(--bg)));
 }
 
 /* Languages Menu Popup */

theme/pagetoc.css

@@ -144,6 +144,7 @@
        padding: 4px;
        grid-area: sponsor-image;
        align-self: start;
+       transition-duration: 0s;
     }
     .sidesponsor:hover {
         display: grid !important;
@@ -177,7 +178,9 @@
         font-size: 1.55rem;
         line-height: 1.15;
         overflow-wrap: anywhere;
-        animation: sponsorTextReveal .3s ease .12s both;
+        visibility: hidden;
+        opacity: 0;
+        animation: sponsorTextReveal .12s ease .18s forwards;
     }
     .sidesponsor .sponsor-description{
         display: block;
@@ -205,9 +208,8 @@
         visibility: visible;
         overflow: auto;
         overscroll-behavior: contain;
-        transition:
-            opacity .18s ease .14s,
-            visibility 0s linear 0s;
+        animation: sponsorTextReveal .12s ease .18s forwards;
+        transition: none;
     }
     .sidesponsor .sponsor-cta{
         margin-top: auto;
@@ -234,14 +236,18 @@
         font-size: 1.2rem;
         font-weight: 800;
         line-height: 1.1;
-        animation: sponsorTextReveal .3s ease .12s both;
+        visibility: hidden;
+        opacity: 0;
+        animation: sponsorTextReveal .12s ease .18s forwards;
     }
     @keyframes sponsorTextReveal {
-        0%, 45% {
+        0% {
             opacity: 0;
+            visibility: hidden;
         }
         100% {
             opacity: 1;
+            visibility: visible;
         }
     }
     .sidesponsor-bsa {