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

This commit is contained in:
Aaron D. Lee
2026-01-07 19:41:23 -05:00
parent 3f02e55ffd
commit afd502dbf3

View File

@@ -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%,
rgba(255, 255, 255, 0.6) 50%,
transparent 100%
#ffe699 0%,
#ffe699 35%,
#fff8e0 50%,
#ffe699 65%,
#ffe699 100%
);
background-size: 25% 100%;
background-repeat: no-repeat;
background-position: -30% 0;
mix-blend-mode: overlay;
animation: top-shine 4s ease-in-out infinite;
pointer-events: none;
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: gold-shimmer 4s ease-in-out infinite;
}
@keyframes top-shine {
0%, 15% { background-position: -30% 0; }
40%, 60% { background-position: 130% 0; }
85%, 100% { background-position: -30% 0; }
@keyframes gold-shimmer {
0%, 20% { background-position: 100% 0; }
50%, 70% { background-position: 0% 0; }
100% { background-position: 100% 0; }
}
/* ----------------------------------------------------------------------------