Make secondary button translucent so it tracks whatever surface it's on

bg-elevated is fully opaque and only hue-matches --mf-bg (the plain
page background), so it stayed stark white on the hero/spotlight cards,
which use a separately-computed, more saturated gradient (--mf-hero-bg/
--mf-spotlight-bg). An opaque fill can never pick up that color no
matter what hue it's tied to.

Make it translucent (bg-elevated/45) with backdrop-blur-lg so it
samples and lightly tints whatever is actually behind it, hero card,
spotlight card, or plain background, instead of only matching one of
them.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-22 17:31:22 +02:00
co-authored by Claude Sonnet 5
parent 28107ac09e
commit df70290631
@@ -36,7 +36,7 @@
const variants = {
primary: 'bg-cta-strong text-ink hover:brightness-95',
secondary: 'bg-elevated text-fg-2 hover:bg-btn-hover hover:text-fg',
secondary: 'bg-elevated/45 backdrop-blur-lg text-fg-2 hover:bg-btn-hover hover:text-fg',
accent: 'bg-accent-btn text-accent-soft hover:bg-accent-btn-hover',
danger: 'bg-danger text-on-art hover:brightness-110'
};