feat: add AI banner component to match BMAD-METHOD layout

Author: Brian Madison

website/src/components/Banner.astro

@@ -0,0 +1,56 @@
+---
+import { getSiteUrl } from '../lib/site-url.mjs';
+
+const llmsFullUrl = `${getSiteUrl()}/llms-full.txt`;
+---
+
+<div class="ai-banner">
+  <span>🤖 AI-optimized docs: <a href={llmsFullUrl}>llms-full.txt</a></span>
+</div>
+
+<style>
+  .ai-banner {
+    width: 100vw;
+    margin-left: calc(-50vw + 50%);
+    height: var(--ai-banner-height, 2.75rem);
+    background: #334155;
+    color: rgb(148, 163, 184);
+    padding: 0.5rem 1rem;
+    font-size: 0.875rem;
+    border-bottom: 1px solid rgba(140, 140, 255, 0.15);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    font-family: system-ui, sans-serif;
+  }
+
+  .ai-banner span {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+  }
+  .ai-banner a {
+    color: #8C8CFF;
+    text-decoration: none;
+    font-weight: 600;
+  }
+  .ai-banner a:hover {
+    text-decoration: underline;
+  }
+
+  @media (min-width: 50rem) {
+    .ai-banner {
+      padding-left: 2.5rem;
+      padding-right: 2.5rem;
+    }
+  }
+
+  @media (min-width: 72rem) {
+    .ai-banner {
+      padding-left: 3rem;
+      padding-right: 3rem;
+    }
+  }
+</style>

website/src/components/Header.astro

@@ -7,13 +7,15 @@ import Search from 'virtual:starlight/components/Search';
 import SiteTitle from 'virtual:starlight/components/SiteTitle';
 import SocialIcons from 'virtual:starlight/components/SocialIcons';
 import ThemeSelect from 'virtual:starlight/components/ThemeSelect';
+import Banner from './Banner.astro';
 /**
  * Render the `Search` component if Pagefind is enabled or the default search component has been overridden.
  */
 const shouldRenderSearch =
 	config.pagefind || config.components.Search !== '@astrojs/starlight/components/Search.astro';
 ---
 
+<Banner />
 <div class="header sl-flex">
 	<div class="title-wrapper sl-flex">
 		<SiteTitle {...Astro.props} />

website/src/styles/custom.css

@@ -13,7 +13,8 @@
    COLOR PALETTE - Light Mode
    ============================================ */
 :root {
-  --sl-nav-height: 3.5rem;
+  --ai-banner-height: 2.75rem;
+  --sl-nav-height: 6.25rem; /* Base nav height (~3.5rem) + banner height (2.75rem) */
 
   /* Full-width content - override Starlight's default 45rem/67.5rem */
   --sl-content-width: 100%;
@@ -210,7 +211,7 @@ header.header {
 
 header.header .header.sl-flex {
   padding: 0 1.5rem;
-  height: var(--sl-nav-height);
+  height: calc(var(--sl-nav-height) - var(--ai-banner-height));
   width: 100%;
 }