diff --git a/apps/website/.vitepress/theme/Landing.vue b/apps/website/.vitepress/theme/Landing.vue index 4714d74..b9aa43b 100644 --- a/apps/website/.vitepress/theme/Landing.vue +++ b/apps/website/.vitepress/theme/Landing.vue @@ -163,7 +163,7 @@ onMounted(() => {

{{ p.blurb }}

@@ -251,7 +251,11 @@ onMounted(() => { } :global(html:not(.dark)) .btv-glow { opacity: 0.55; } +/* general accent highlights (incl. the small copy toast) keep the AA text accent */ .btv-pink { color: var(--text-accent); } +/* the large display wordmark (hero / header / footer) stays full brand pink */ +.btv-title .btv-pink, +.btv-word .btv-pink { color: var(--display-accent); } .btv-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; diff --git a/packages/theme/src/tokens.css b/packages/theme/src/tokens.css index e8bb0c6..63006c6 100644 --- a/packages/theme/src/tokens.css +++ b/packages/theme/src/tokens.css @@ -55,6 +55,10 @@ --text-accent: #E0589A; --text-green: #46B86C; + /* Display accent — the brand pink as the LARGE display wordmark color in + both schemes (large text only needs 3:1, so it can stay fully vibrant). */ + --display-accent: #E0589A; + /* ── Glass (frosted sticky headers) ──────────────────────────── */ --glass: rgba(21, 16, 28, 0.66); @@ -147,7 +151,7 @@ --faint: #978996; --accent: #E0589A; /* fill unchanged (dark ink on top) */ - --text-accent: #C42A6C; /* punchier vivid beetroot, ~5.1:1 on white (was #A52260) */ + --text-accent: #D6246F; /* small labels / links — vivid raspberry, ~4.6:1 AA on white */ --text-green: #15683A; /* ~5.2:1 on white — affirmative text */ --accent-wash: rgba(224, 88, 154, 0.12);