From abedd8c018e8cbcd85f08bf22f1937b138c91f38 Mon Sep 17 00:00:00 2001
From: teknium1 <127238744+teknium1@users.noreply.github.com>
Date: Sat, 12 Sep 2026 08:13:21 -0700
Subject: [PATCH] fix(website): active filter pill stays readable on hover

The generic .filterBtn:hover rule outranks .filterActive and set the label to emphasis-1000 (near-black) on the emphasis-900 pill background, so hovering the selected filter made it unreadable in light mode and left the #91491 contrast fix incomplete. Add a .filterActive:hover rule keeping the emphasis-0 foreground. Dark mode is unaffected: [data-theme='dark'] .filterActive ties .filterBtn:hover on specificity and wins by source order.
---
 website/src/components/UserStoriesCollage/styles.module.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/website/src/components/UserStoriesCollage/styles.module.css b/website/src/components/UserStoriesCollage/styles.module.css
index c0a02e514d..aa9266cf67 100644
--- a/website/src/components/UserStoriesCollage/styles.module.css
+++ b/website/src/components/UserStoriesCollage/styles.module.css
@@ -72,6 +72,10 @@
   color: var(--ifm-color-emphasis-0);
   border-color: var(--ifm-color-emphasis-900);
 }
+/* .filterBtn:hover outranks .filterActive and would paint emphasis-1000 text on the emphasis-900 pill. */
+.filterActive:hover {
+  color: var(--ifm-color-emphasis-0);
+}
 [data-theme='dark'] .filterActive {
   background: #e2e8f0;
   color: #0f172a;