diff --git a/ventures/anthem/style.css b/ventures/anthem/style.css index 2291836..b9650df 100644 --- a/ventures/anthem/style.css +++ b/ventures/anthem/style.css @@ -140,6 +140,9 @@ header p { cursor: pointer; transition: all 0.2s; font-weight: 500; + font-family: inherit; + font-size: 1rem; + color: inherit; } .style-chip:hover { @@ -167,28 +170,58 @@ header p { align-items: center; } +.title-card.is-playing .title-text { + animation: title-glow 0.9s ease-in-out infinite alternate; +} + +@keyframes title-glow { + from { text-shadow: 0 2px 4px rgba(0,0,0,0.3); letter-spacing: 0; } + to { text-shadow: 0 0 18px rgba(255,255,255,0.55); letter-spacing: 0.04em; } +} + .title-text { color: white; font-size: 2.5rem; font-weight: 800; text-align: center; - margin-bottom: 2rem; + margin-bottom: 1.25rem; text-shadow: 0 2px 4px rgba(0,0,0,0.3); + overflow-wrap: anywhere; } .visualization { display: flex; align-items: flex-end; justify-content: center; - gap: 0.5rem; + gap: 3px; height: 100px; width: 100%; } .bar { - width: 20px; + flex: 1 1 0; + max-width: 16px; + min-width: 4px; border-radius: 4px 4px 0 0; - transition: height 0.3s ease; + transition: height 0.2s ease, transform 0.12s ease, opacity 0.12s ease; + opacity: 0.85; +} + +.bar.on { + transform: scaleY(1.08); + opacity: 1; + filter: brightness(1.25); +} + +.bar.rest { + opacity: 0.35; +} + +.melody-caption { + color: rgba(255,255,255,0.82); + font-size: 0.85rem; + margin-top: 0.85rem; + letter-spacing: 0.02em; } /* Controls */ @@ -209,6 +242,10 @@ header p { font-weight: 600; cursor: pointer; transition: background-color 0.2s; + text-decoration: none; + display: inline-block; + font-family: inherit; + line-height: 1.2; } #share-button:hover { @@ -431,4 +468,4 @@ footer a:hover { padding: 0.25rem 0.75rem; font-size: 0.9rem; } -} \ No newline at end of file +}