Simpler shimmering gold labels - gradient text, no pseudo-elements

frontends/web/static/style.css

@@ -117,42 +117,28 @@
 }
 
 /* ----------------------------------------------------------------------------
-   Form Labels - Gold with Top Shine
+   Form Labels - Shimmering Gold
    ---------------------------------------------------------------------------- */
 .card .form-label {
-    color: #ffe699;
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    overflow: hidden;
-    padding: 2px 0;
-}
-
-.card .form-label::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 45%;
     background: linear-gradient(
         90deg,
-        transparent 0%,
+        #ffe699 0%,
-        rgba(255, 255, 255, 0.6) 50%,
+        #ffe699 35%,
-        transparent 100%
+        #fff8e0 50%,
+        #ffe699 65%,
+        #ffe699 100%
     );
-    background-size: 25% 100%;
+    background-size: 200% 100%;
-    background-repeat: no-repeat;
+    -webkit-background-clip: text;
-    background-position: -30% 0;
+    background-clip: text;
-    mix-blend-mode: overlay;
+    color: transparent;
-    animation: top-shine 4s ease-in-out infinite;
+    animation: gold-shimmer 4s ease-in-out infinite;
-    pointer-events: none;
 }
 
-@keyframes top-shine {
+@keyframes gold-shimmer {
-    0%, 15% { background-position: -30% 0; }
+    0%, 20% { background-position: 100% 0; }
-    40%, 60% { background-position: 130% 0; }
+    50%, 70% { background-position: 0% 0; }
-    85%, 100% { background-position: -30% 0; }
+    100% { background-position: 100% 0; }
 }
 
 /* ----------------------------------------------------------------------------