Fix/remove homepage padding

[utkarsh232005]

Pull Request Checklist

• I have read and followed the CONTRIBUTING.md guidelines.
• I have read and followed the Guidance for submissions involving paid services.
• My contribution adds a new instruction, prompt, agent, skill, or workflow file in the correct directory.
• The file follows the required naming convention.
• The content is clearly structured and follows the example format.
• I have tested my instructions, prompt, agent, skill, or workflow with GitHub Copilot.
• I have run npm start and verified that README.md is up to date.
• I am targeting the staged branch for this pull request.

---

Description

This PR fixes a UI issue on the project's homepage where a dark gap or "annoying bar" appeared between the main header and the hero section grid background.

The issue was caused by Starlight's default wrapper containers (.content-panel) injecting a 1.5rem top padding and a 1px hairline top border on the custom splash page template. By specifically targeting the body:has(#main-content) custom page structure and overriding these Starlight padding and border rules in starlight-overrides.css, the hero section's grid background now extends seamlessly to the bottom of the header.

Visual Changes:

Before

After

Type of Contribution

• New instruction file.
• New prompt file.
• New agent file.
• New plugin.
• New skill file.
• New agentic workflow.
• Update to existing instruction, prompt, agent, plugin, skill, or workflow.
• Other (please specify): Website UI Fix (Homepage)

---

Additional Notes

These CSS overrides strictly limit their scope to the custom splash page using the :has(#main-content) selector, ensuring the layout and padding of regular documentation pages within the site remain completely untouched.

---

By submitting this pull request, I confirm that my contribution abides by the Code of Conduct and will be licensed under the MIT License.

[github-actions]

⚠️ This PR targets main, but PRs should target staged.

The main branch is auto-published from staged and should not receive direct PRs.
Please close this PR and re-open it against the staged branch.

You can change the base branch using the Edit button at the top of this PR,
or run: gh pr edit 1286 --base staged

[Copilot]

Pull request overview

This PR adjusts Starlight CSS overrides so the custom splash/homepage layout no longer shows a visible gap between the site header and the hero/grid background.

Changes:

• Add splash-page-scoped overrides to remove the header bottom border on pages containing #main-content.
• Remove Starlight .content-panel top padding and top border on pages containing #main-content to eliminate the “bar” effect.

[Copilot]

These overrides are scoped to body:has(#main-content), but #main-content is used across multiple splash pages (e.g., /agents, /skills, etc.), not just the homepage. If the intent is truly homepage-only (per PR title/description), consider narrowing the selector to a homepage-specific marker (e.g., body:has(#main-content):has(section.hero) or a body/class set only on index.astro) to avoid unintended layout changes on other splash pages.

[Copilot]

body:has(#main-content) .content-panel will match any .content-panel on pages that include #main-content, even if that panel isn’t the one wrapping the custom splash content. To reduce blast radius, target the specific panel that contains #main-content (e.g., .content-panel:has(#main-content) or main:has(#main-content) > .content-panel) so other Starlight panels aren’t accidentally affected.

Suggested change

	body:has(#main-content) .content-panel {
	.content-panel:has(#main-content) {