docs(ensnode.io): soften LinkCard hover with light blue background

[notrab]

Lite PR

Tip: Review docs on the ENSNode PR process

Summary

---

Why

Requested by @lightwalker-eth

---

Testing

• How this was tested.
• If you didn't test it, say why.

---

Notes for Reviewer (Optional)

• Anything non-obvious or worth a heads-up.

---

Pre-Review Checklist (Blocking)

• This PR does not introduce significant changes and is low-risk to review quickly.
• Relevant changesets are included (or are not required)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
enskit-react-example.ensnode.io	Ready	Preview, Comment	May 28, 2026 2:43pm
ensnode.io	Ready	Preview, Comment	May 28, 2026 2:43pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
admin.ensnode.io	Skipped		May 28, 2026 2:43pm
ensrainbow.io	Skipped		May 28, 2026 2:43pm

[coderabbitai]

Warning

Review limit reached

@notrab, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 51 minutes and 59 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: d1a8c4b0-d7bc-422c-98aa-3c6483a5e5ef

📥 Commits

Reviewing files that changed from the base of the PR and between f98a206 and a8334bf.

📒 Files selected for processing (1)

• docs/ensnode.io/src/styles/starlight.css

📝 Walkthrough

Walkthrough

This PR updates the Starlight documentation site link card styling. The .sl-link-card selector now includes CSS transitions for smooth background and border color animations. Its hover state switches to a dedicated selector using color-mix with the accent color variable instead of relying on a grouped hover declaration, improving specificity and separation from other link hover styles.

Changes

Link card hover styling

Layer / File(s)	Summary
Link card hover transitions and accent coloring docs/ensnode.io/src/styles/starlight.css	.sl-link-card gains transition properties for smooth background-color and border-color changes. A dedicated .sl-link-card:hover rule replaces the previous grouped selector and applies color-mix-based accent styling to both background and border on hover.

🎯 1 (Trivial) | ⏱️ ~5 minutes

Suggested labels

docs

🐰 A rabbit hops through docs with CSS delight,
Link cards now shimmer with smooth, accent light,
No more grouped selectors—each hover's its own,
The starlight design shines more clearly shown! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change: softening LinkCard hover styling with a light blue background, which matches the CSS modifications in the changeset.
Description check	✅ Passed	The description follows the required template structure with most sections present, though the Testing section contains only placeholder text and lacks actual testing details.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch docs/linkcard-hover-color

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[changeset-bot]

⚠️ No Changeset found

Latest commit: a8334bf

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[greptile-apps]

Greptile Summary

This PR softens the hover effect on .sl-link-card components by replacing the previous plain background swap with a color-mix()-based tinted highlight and smooth CSS transitions.

• Adds a 0.2s ease-in-out transition on background-color and border-color for .sl-link-card, and splits .sl-link-card:hover into its own rule using color-mix(in srgb, var(--sl-color-accent) 8%, transparent) for the background and 50% for the border, making the effect fully theme-adaptive.
• Adds an override inside the aside component context to pin the hover background-color back to var(--sl-color-black), preserving the aside's dark surface when a link card is hovered inside it.

Confidence Score: 5/5

Safe to merge — a scoped CSS hover refinement with no functional or behavioral risk.

The change is limited to hover appearance on link cards. It replaces previously hardcoded hex colors with color-mix() expressions built on existing CSS custom properties, making the tint correctly theme-adaptive in both light and dark mode. The aside-context override is explicit and targeted. No logic, data, or API surface is touched.

No files require special attention.

Important Files Changed

Filename	Overview
docs/ensnode.io/src/styles/starlight.css	Splits .sl-link-card:hover into its own rule using color-mix() with --sl-color-accent, adds CSS transitions, and overrides hover background inside aside blocks. Clean, theme-adaptive implementation.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[.sl-link-card] -->|base styles| B["border-color: --sl-color-gray-4\ntransition: bg + border 0.2s"]
    B --> C{hover?}
    C -->|yes, normal context| D["bg: color-mix(accent 8%, transparent)\nborder: color-mix(accent 50%, transparent)"]
    C -->|yes, inside aside| E["bg: --sl-color-black\nborder: color-mix(accent 50%, transparent)"]
    C -->|no| F[unchanged]
    D --> G[smooth tinted highlight]
    E --> H[aside dark surface preserved]

Loading

_{Reviews (5): Last reviewed commit: "code suggestion" | Re-trigger Greptile}

[Copilot]

Pull request overview

This PR updates the docs site’s Starlight theme styling to make LinkCard hover states feel softer by introducing a light blue hover background and a matching border highlight.

Changes:

• Add a dedicated .sl-link-card:hover rule with a light blue background.
• Adjust LinkCard hover border color to a lighter blue highlight (separate from pagination hover styling).

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Y3drk]

LGTM

[coderabbitai]

Actionable comments posted: 0

[Copilot]

Pull request overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated 2 comments.

[Copilot]

Pull request overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated no new comments.