🐛 Bug: Heading anchor link reverts to default browser styling after click

[akshatsinghai6682-sketch]

Describe the bug

On the Tools page, clicking a section heading (e.g. "JSON Schema Tooling") changes its styling to a blue color with an underline and a visible pilcrow (¶) symbol. This is the site's intentional "active section" indicator (from components/Headlines.tsx, applied when a heading's slug matches the current URL's #hash), but visually it closely resembles broken or unstyled default browser link styling, which can make it look like a bug at first glance.

Steps To Reproduce

1. Go to https://json-schema.org/tools
2. Observe the "JSON Schema Tooling" heading — styled normally (light/white, bold, no underline)
3. Click directly on the heading text
4. Observe the heading now shows the "active section" style: blue text, underline, and a visible pilcrow

Expected Behavior

The active-section indicator should be visually distinct from a "broken" or default unstyled link, so users don't mistake intentional behavior for a bug. Possible improvements: use a color less similar to standard link-blue, and/or avoid underlining the full heading text (only the pilcrow icon).

Screenshots

Before Clicking:

After Clicking:

Device Information [optional]

OS: macOS
Browser: Chrome
version: 152.0.7977.83

Are you working on this issue?

Yes

Do you think this work might require an [Architectural Decision Record (ADR)]? (significant or noteworthy)

No

[shiv07-blip]

Hey @akshatsinghai6682-sketch, i went through the issue and found that the root cause is in components/Headlines.tsx:69-70. The active state applies blue color to the entire heading, and the base class has hover:underline which underlines the full heading text. Combined with the visible pilcrow, it looks like default browser link styling.
Suggestion: move the underline to only the pilcrow icon when active, and consider a more subtle active indicator color.

[akshatsinghai6682-sketch]

Hey @akshatsinghai6682-sketch, i went through the issue and found that the root cause is in components/Headlines.tsx:69-70. The active state applies blue color to the entire heading, and the base class has hover:underline which underlines the full heading text. Combined with the visible pilcrow, it looks like default browser link styling.
Suggestion: move the underline to only the pilcrow icon when active, and consider a more subtle active indicator color.

Ok ThankYou I will Surely Look Into It Thank You @shiv07-blip

[shiv07-blip]

Hey @akshatsinghai6682-sketch , just wanted to check in - have you had a chance to work on a fix for this? If you're busy, I'm happy to open a PR for the styling changes in Headlines.tsx. Either way, let me know how you'd like to proceed.

[akshatsinghai6682-sketch]

Hey @akshatsinghai6682-sketch , just wanted to check in - have you had a chance to work on a fix for this? If you're busy, I'm happy to open a PR for the styling changes in Headlines.tsx. Either way, let me know how you'd like to proceed.

I am working on it Thanks for the support