feat: highlight active backend service with logo border

[2u841r]

Description (required)

Improves user experience by providing clear visual feedback about which backend service page the user is currently viewing.
As my previous comment: #12055 (comment)
Netlify Preview Deploy Demo: Here

Related issues & labels (optional)

hacktoberfest-accepted

First-time contributor to Astro Docs?

No, 2nd time.

If you are a member of the Astro Discord, please add your username in the description so we can welcome you there!

2u841r

[netlify]

✅ Deploy Preview for astro-docs-2 ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	3740fa6
🔍 Latest deploy log	https://app.netlify.com/projects/astro-docs-2/deploys/68ea809c608a3a00080e13f8
😎 Deploy Preview	https://deploy-preview-12540--astro-docs-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[2u841r]

Additional Consideration: if we add

	.card--current {
		background-color: color-mix(in srgb, var(--sl-color-text-accent) 10%, transparent);
	}

in Card.astro,

(Turso is current page, Supabase is mouse hovered.)

then when a card next to the selected one is hovered, its hover background overlaps with the selected card’s accent background, causing two semi-transparent colors to stack and look uneven.

for fix, we have to remove margin: -0.75rem; from

docs/src/components/NavGrid/Card.astro

Line 31 in 88cc926

margin: -0.75rem;

then we will get

Xata is current page, Turso is mouse hovered.