Refine tier badges for changelog and blog entries

[Yndira-E]

Description

This PR updates tier badge rendering across changelog pages and blog articles to better match the intended UI and content behavior.

Changes

• restyles ff-tier-badge__label and ff-tier-badge__value to use a neutral segmented badge design
• removes the clickable behavior from tier badges and renders them as static elements
• stops rendering badges for tiers marked as Not available
• removes the unused unavailable badge state styling

Scope

This affects:

• changelog listing pages
• individual changelog pages
• blog articles that render tier badges through Eleventy feature injection

Notes

Unavailable tiers are still represented in the pricing table as a dash, but they are no longer shown as badges in changelog or blog contexts.

Related Issue(s)

#4686

Checklist

• I have read the contribution guidelines
• I have considered the performance impact of these changes
• Suitable unit/system level tests have been added and they pass
• Documentation has been updated
• For blog PRs, an Art Request has been created (instructions)

[netlify]

✅ Deploy Preview for flowforge-website ready!

Name	Link
🔨 Latest commit	3456ea7
🔍 Latest deploy log	https://app.netlify.com/projects/flowforge-website/deploys/69bade178e23070008e6cf52
😎 Deploy Preview	https://deploy-preview-4721--flowforge-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 86 (no change from production) Accessibility: 81 (no change from production) Best Practices: 100 (no change from production) SEO: 91 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Yndira-E]

@dimitrieh following up on the earlier feedback around the badges, I’ve made a few adjustments to make them feel more like contextual metadata rather than interactive elements.

This keeps the focus on the feature content while still surfacing tier availability, without introducing additional navigation paths from each feature.

Looping you in so you're aware for future release articles :)

[dimitrieh]

Hey @Yndira-E just saw the change you made. This led to a bit of confusion in another PR 🙃 #4741 (comment)

Think the toned down badges are fine, but a little too grey/non highlighted. How about we reintroduce a little bit of purple with them, but subtle?

[dimitrieh]

removes the clickable behavior from tier badges and renders them as static elements

@Yndira-E this is also something I wasn't aware about and just saw.

Can you elaborate here?

We have these pricing pages show up across the website. Being able to click on them gives routes back to the pricing page

[dimitrieh]

from DM chat:

The reason I removed the click behaviour here is because of the context — these badges sit under every feature in blog/changelog pages, so turning them into links would effectively repeat the same navigation multiple times throughout the page.
That tends to add noise rather than value, and can dilute more intentional actions (like the main CTA).
Also, visually, they read as metadata, so making them interactive creates a bit of a mismatch between how they look and how they behave.
Keeping them static keeps the focus on communicating availability, and we can link to pricing more deliberately elsewhere on the page, like the main CTA at the end of the article.