From 6e3c38d00c01cd13f869dd6828be9792b7582d6c Mon Sep 17 00:00:00 2001 From: Soam Desai Date: Wed, 9 Sep 2026 22:37:46 -0700 Subject: [PATCH] docs(nav): neutral selected state for sidebar items Docs 3.0 QA: the selected sidebar item now uses the design's neutral pill (#F3F2F0 background, #181818 text, 6px radius) instead of theme blue, with a dark-mode equivalent; the blue Proof of Human badge swap is dropped to stay monochrome. --- tailwind.css | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/tailwind.css b/tailwind.css index d3bd1ae..f12a5ad 100644 --- a/tailwind.css +++ b/tailwind.css @@ -21,11 +21,18 @@ } @layer components { - /* Tint the custom Proof of Human badge when its sidebar page is selected. */ - #sidebar-content - li[data-active] - img[src$="/images/docs/human-badge-gray.svg"] { - content: url("/images/docs/human-badge-blue.svg"); + /* Sidebar — selected item is a neutral pill per Docs 3.0 (bg gray/a9, ink + text), replacing the theme-default blue tint. The Proof of Human badge + keeps its gray artwork in both states for the same reason. */ + #sidebar-content li[data-active="true"] > a { + background-color: #F3F2F0 !important; + color: #181818 !important; + border-radius: 6px !important; + text-shadow: none !important; + } + .dark #sidebar-content li[data-active="true"] > a { + background-color: rgba(255, 255, 255, 0.08) !important; + color: #F3F2F0 !important; } /* Page content text links only (anchors without custom classes) */