feat(ui): comprehensive UI/UX improvements (#1069)

* feat(ui): replace emoji icons with SVG icon system

Replace all emoji icons with a consistent SVG icon system to improve:
- Visual consistency across platforms
- Design token control and theming
- Professional appearance

Changes:
- Add new Icon.astro component with 16 custom SVG icons
- Update index.astro to use SVG icons in resource cards
- Update index.ts to render SVG icons in search results
- Update utils.ts to return icon names instead of emojis
- Update global.css with proper SVG icon styling
- Remove emoji from Footer component

Icons added: robot, document, lightning, hook, workflow, plug, wrench, book,
plus action icons: close, copy, download, share, external, plus, search, chevron-down

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat(ui): enhance hero section, add animations and mobile responsiveness

Phase 2 & 3 UI/UX improvements:

Hero Section Enhancements:
- Add gradient text effect for title (purple to orange gradient)
- Add animated floating particles in hero background
- Increase hero padding for better visual impact

Card Category Colors:
- Add category-specific accent colors (AI, docs, power, automation, etc.)
- Each category has unique glow effect on hover
- Category colors: purple (AI), orange (docs), red (power), etc.

Entrance Animations:
- Add staggered fade-in animation for cards (50ms delay each)
- Cards animate in with translateY + opacity
- Add slide-down animation for search results

Mobile Responsiveness:
- Responsive grid: 4 cols → 2 cols → 1 col
- Adjust font sizes for mobile screens
- Add safe-area-inset support for notched devices
- Ensure touch targets ≥44px

Accessibility:
- Add prefers-reduced-motion support
- Disable animations for users who prefer reduced motion
- Smooth scroll with fallback

Additional Improvements:
- Add arrow indicator on card hover
- Add loading animation for count numbers
- Enhanced scrollbar styling
- Print styles for better printing

Co-Authored-By: Claude <noreply@anthropic.com>

* feat(ui): add theme toggle, enhanced search, and back to top button

Theme Toggle:
- Create ThemeToggle.astro component with sun/moon icons
- Add theme initialization in Head.astro to prevent flash
- Store theme preference in localStorage
- Keyboard shortcut: Cmd/Ctrl + Shift + L
- Smooth icon transition animation

Back to Top Button:
- Create BackToTop.astro component
- Appears after scrolling 400px
- Smooth scroll to top on click
- Fixed position bottom-right
- Respects reduced motion preference

Enhanced Search:
- Recent searches functionality with localStorage
- Show recent searches on focus when empty
- Remove individual items or clear all
- Enhanced empty state with icon and hint
- Cmd/Ctrl + K keyboard shortcut to focus search
- Add search to recent when getting results

CSS Enhancements:
- Theme toggle container styles
- Recent searches section styling
- Search empty state with icon
- Search loading spinner
- Keyboard shortcut hint styles
- Print styles for new components

Co-Authored-By: Claude <noreply@anthropic.com>

* fix(ui): resolve header and theme toggle issues

- Add Copilot logo to header via Starlight config with automatic theme switching
- Fix theme toggle slider direction (was reversed)
- Fix theme toggle active icon highlighting (was backwards)
- Change theme toggle from purple circle slider to bold text indicator
- Fix theme toggle slider overflow by adding overflow: hidden
- Remove duplicate banner image from home page
- Clean up conflicting logo CSS rules to prevent duplication

The header now displays: [ Copilot Icon ] Awesome GitHub Copilot [ Search ]
Theme toggle indicators are now visually clear with bold text for selected theme.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

* fix(ui): address feedback on UI/UX improvements

- Remove logo from header per brand guidance (logo config and CSS)
- Fix back-to-top button visibility by moving to body level and using global styles
- Fix modal visibility by adding 'visible' class for CSS animations
- Fix theme toggle applying site-wide by using global styles and proper theme initialization
- Update icons to use GitHub Primer SVG icons with proper fill-based styling
- Fix plugin modal to render SVG icons instead of icon names
- Add theme initialization script to prevent flash of unstyled content

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: move modal to body level to fix z-index stacking context issue

The modal was nested inside .main-pane which has isolation: isolate,
creating a new stacking context. This caused the modal's z-index
to be evaluated within that context, unable to stack above the header.

This fix moves the modal to be a direct child of body on page load,
allowing it to properly cover the entire viewport including navbar.

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

website/src/styles/starlight-overrides.css

@@ -14,8 +14,8 @@
   --sl-color-gray-3: #60607a;
   --sl-color-gray-4: #30304a;
   --sl-color-gray-5: #1a1a2e;
-  --sl-color-gray-6: #111120;
-  --sl-color-black: #0a0a0f;
+  --sl-color-gray-6: #0d0d12;
+  --sl-color-black: #0d0d12;
 
   --sl-font-system: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica,
     Arial, sans-serif;
@@ -37,8 +37,13 @@
   --sl-color-gray-3: #30304a;
   --sl-color-gray-4: #60607a;
   --sl-color-gray-5: #9898a6;
-  --sl-color-gray-6: #d0d0da;
-  --sl-color-black: #f0f0f5;
+  --sl-color-gray-6: #f5f5f7;
+  --sl-color-black: #fafafa;
+}
+
+:root[data-theme="light"] header.header {
+  background: rgba(250, 250, 250, 0.6) !important;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
 }
 
 /* ── Sidebar readability ───────────────────────────────────── */
@@ -60,6 +65,55 @@ header .site-title:hover {
   color: var(--sl-color-accent-high) !important;
 }
 
+/* ── Unified background ─────────────────────────────────────── */
+/* Clean header - solid background */
+header.header {
+  background: var(--sl-color-gray-6) !important;
+  border-bottom: 1px solid var(--sl-color-gray-5) !important;
+  z-index: 1000;
+  position: relative;
+}
+
+/* Header inner content for alignment */
+header.header .header-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  max-width: 100%;
+}
+
+header.header .header-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+/* Hide social icons in header - GitHub link moved to hero */
+header .social-icons {
+  display: none !important;
+}
+
+/* Move theme toggle inside header - align with header elements */
+.theme-toggle-container {
+  position: fixed !important;
+  top: 12px !important;
+  right: 80px !important;
+  z-index: 1001;
+}
+
+/* On custom splash pages, body already has the gradient bg.
+   Make Starlight's wrapper layers transparent so it shows through. */
+body:has(#main-content) {
+  --sl-color-bg: transparent;
+  --sl-color-bg-nav: transparent;
+}
+
+/* ── Hide Starlight's built-in theme selector (dropdown) ─── */
+/* We use our own custom ThemeToggle component instead */
+starlight-theme-select {
+  display: none !important;
+}
+
 /* ── Browse Resources sidebar group ────────────────────────── */
 nav[aria-label="Main"] > ul > li:first-child details summary,
 nav[aria-label="Main"] > ul > li:first-child > a {