Claude stuffs up. Time to restore mucked up files.

This commit is contained in:
tony
2025-08-25 20:57:04 +10:00
parent 25107c2c8a
commit a344934db4
6 changed files with 153 additions and 28 deletions

View File

@@ -27,5 +27,7 @@
"file-recovery": true, "file-recovery": true,
"publish": false, "publish": false,
"sync": true, "sync": true,
"webviewer": false "webviewer": false,
"footnotes": false,
"bases": true
} }

View File

@@ -37,7 +37,7 @@ export default function RootLayout({
<Sidebar /> <Sidebar />
<div className="lg:pl-64"> <div className="lg:pl-64">
<Header /> <Header />
<main className="pt-chorus-xl md:pt-chorus-xxl dark:bg-mulberry-950 light:bg-white min-h-screen pb-16 md:pb-0"> <main className="dark:bg-mulberry-950 light:bg-white min-h-screen pb-16 md:pb-0">
{children} {children}
</main> </main>
<Footer /> <Footer />

View File

@@ -100,7 +100,7 @@ const Breadcrumb = () => {
<nav className="flex items-center px-chorus-sm secondary-nav breadcrumbs" aria-label="Breadcrumb"> <nav className="flex items-center px-chorus-sm secondary-nav breadcrumbs" aria-label="Breadcrumb">
<ol className="flex items-center space-x-chorus-xs"> <ol className="flex items-center space-x-chorus-xs">
{breadcrumbs.map((item, index) => ( {breadcrumbs.map((item, index) => (
<li key={`${item.href}-${index}`} className="flex items-center"> <li key={`${item.href}-${index}`} className="flex items-center ">
{index > 0 && ( {index > 0 && (
<svg <svg
className="text-carbon-500 dark:text-mulberry-400 mr-chorus-xs w-4 h-4" className="text-carbon-500 dark:text-mulberry-400 mr-chorus-xs w-4 h-4"

View File

@@ -17,17 +17,14 @@ export default function Footer() {
<p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-md"> <p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-md">
A distributed, semantic and temporal knowledge fabric for humans and AI agents alike to share reasoning, context, and intent, not just files. A distributed, semantic and temporal knowledge fabric for humans and AI agents alike to share reasoning, context, and intent, not just files.
</p> </p>
<p className="text-xs text-carbon-500 dark:text-mulberry-400">
© 2025 CHORUS Services. All rights reserved.
</p>
</div> </div>
{/* Navigation Links */} {/* Navigation Links */}
<div className="grid grid-cols-2 gap-chorus-lg"> <div className="grid grid-cols-2 gap-chorus-sm">
<div> <div>
<h4 className="text-h4 text-carbon-950 dark:text-white mb-chorus-md">Brand Guide</h4> <h4 className="text-h4 text-carbon-950 dark:text-white mb-chorus-md">Brand Guide</h4>
<ul className="space-y-chorus-sm text-sm"> <ul className="space-y-chorus-xs text-sm">
<li><Link href="/" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Brand Overview</Link></li> <li><Link href="/" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Overview</Link></li>
<li><Link href="/identity" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Brand Identity</Link></li> <li><Link href="/identity" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Brand Identity</Link></li>
<li><Link href="/colors" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Color Palette</Link></li> <li><Link href="/colors" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Color Palette</Link></li>
<li><Link href="/typography" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Typography</Link></li> <li><Link href="/typography" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Typography</Link></li>
@@ -36,11 +33,11 @@ export default function Footer() {
</div> </div>
<div> <div>
<h4 className="text-h4 text-carbon-950 dark:text-white mb-chorus-md">Resources</h4> <h4 className="text-h4 text-carbon-950 dark:text-white mb-chorus-md">Resources</h4>
<ul className="space-y-chorus-sm text-sm"> <ul className="space-y-chorus-xs text-sm">
<li><Link href="/usage" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Usage Guidelines</Link></li> <li><Link href="/usage" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Help</Link></li>
<li><Link href="/accessibility" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Accessibility</Link></li> <li><Link href="/implementation" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Code</Link></li>
<li><Link href="/implementation" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Implementation</Link></li> <li><a href="/logos/chorus-logo-package-web.zip" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Downloads</a></li>
<li><a href="/logos/chorus-logo-package-web.zip" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Download Assets</a></li> <li><Link href="/accessibility" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Access</Link></li>
</ul> </ul>
</div> </div>
</div> </div>

View File

@@ -39,16 +39,16 @@ const Sidebar = () => {
{ {
id: 'visual-identity', id: 'visual-identity',
label: 'Visual Identity', label: 'Visual Identity',
icon: 'Interface/Main_Component', icon: 'Shape/Circle',
items: [ items: [
{ href: '/visual-identity', section: 'visual-identity', icon: 'Interface/Main_Component', label: 'Visual Identity' }, { href: '/visual-identity', section: 'visual-identity', icon: 'Shape/Circle', label: 'Visual Identity' },
{ href: '/logo', section: 'logo', icon: 'Interface/Star', label: 'Logo System' }, { href: '/logo', section: 'logo', icon: 'Interface/Star', label: 'Logo System' },
{ href: '/typography', section: 'typography', icon: 'Edit/Text', label: 'Typography' }, { href: '/typography', section: 'typography', icon: 'Edit/Text', label: 'Typography' },
{ href: '/colors', section: 'colors', icon: 'Edit/Swatches_Palette', label: 'Color Palette' }, { href: '/colors', section: 'colors', icon: 'Edit/Swatches_Palette', label: 'Color Palette' },
{ href: '/iconography', section: 'iconography', icon: 'Interface/Main_Component', label: 'Iconography' }, { href: '/iconography', section: 'iconography', icon: 'Interface/Main_Component', label: 'Iconography' },
{ href: '/accessibility', section: 'accessibility', icon: 'Interface/Heart_01', label: 'Accessibility' }, { href: '/accessibility', section: 'accessibility', icon: 'Interface/Heart_01', label: 'Accessibility' },
{ href: '/components', section: 'components', icon: 'Interface/Settings', label: 'Components' }, { href: '/components', section: 'components', icon: 'Environment/Puzzle', label: 'Components' },
{ href: '/motion', section: 'motion', icon: 'Interface/Link', label: 'Motion System' }, { href: '/motion', section: 'motion', icon: 'Interface/Trending_Up', label: 'Motion System' },
{ href: '/implementation', section: 'implementation', icon: 'File/File_Code', label: 'Implementation' }, { href: '/implementation', section: 'implementation', icon: 'File/File_Code', label: 'Implementation' },
] ]
}, },
@@ -93,17 +93,14 @@ const Sidebar = () => {
return ( return (
<aside className="fixed inset-y-0 left-0 hidden w-64 border-r border-nickel-200 bg-white/80 p-0 backdrop-blur lg:block dark:border-mulberry-800 dark:bg-mulberry-950/80"> <aside className="fixed inset-y-0 left-0 hidden w-64 border-r border-nickel-200 bg-white/80 p-0 backdrop-blur lg:block dark:border-mulberry-800 dark:bg-mulberry-950/80">
<div className="mb-chorus-xs p-chorus-xs"> <div className="mb-chorus-xs pt-chorus-xs flex justify-content logo-group-circular">
<div className="px-chorus-md py-chorus-sm"> <div className="pb-chorus-md item mx-auto logo-group-circular">
<ThreeLogo width={128} height={128} /> <ThreeLogo width={220} height={220} />
<div> <h4 className="text-h4 font-logo">CHORUS</h4>
<div className="font-logo">CHORUS</div>
</div>
</div> </div>
<h3 className="text-h3 text-carbon-600 dark:text-white mb-chorus-lg">Brand Guide</h3>
</div> </div>
<h4 className="px-chorus-md py-chorus-xs text-h4 text-carbon-600 dark:text-white mb-chorus-lg">Brand Guide</h4>
<nav className="space-y-xs text-sm" id="brand-nav"> <nav className="text-sm" id="brand-nav">
{navCategories.map((category) => { {navCategories.map((category) => {
const isExpanded = expandedSections.includes(category.id); const isExpanded = expandedSections.includes(category.id);
const isActive = isCategoryActive(category); const isActive = isCategoryActive(category);

View File

@@ -4,6 +4,11 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CHORUS Services Brand Style Guide</title> <title>CHORUS Services Brand Style Guide</title>
<link rel="apple-touch-icon" sizes="180x180" href="favicon_io/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon_io/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon_io/favicon-16x16.png">
<link rel="manifest" href="favicon_io/site.webmanifest">
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<script> <script>
tailwind.config = { tailwind.config = {
@@ -1037,6 +1042,8 @@
<header class="md:block inset-y-0 left-0 border-b border-nickel-200 bg-white/95 backdrop-blur dark:border-mulberry-800 dark:bg-mulberry-950/95 shadow-lg"> <header class="md:block inset-y-0 left-0 border-b border-nickel-200 bg-white/95 backdrop-blur dark:border-mulberry-800 dark:bg-mulberry-950/95 shadow-lg">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center gap-chorus-lg"> <div class="flex items-center gap-chorus-lg">
<div class="flex items-center gap-chorus-sm px-chorus-md py-chorus-md"> <div class="flex items-center gap-chorus-sm px-chorus-md py-chorus-md">
<canvas class="chorus-logo" style="width: 64px; height: 64px;"></canvas> <canvas class="chorus-logo" style="width: 64px; height: 64px;"></canvas>
<noscript> <noscript>
@@ -1046,8 +1053,78 @@
<div class="font-thin font-logo">CHORUS</div> <div class="font-thin font-logo">CHORUS</div>
</div> </div>
</div> </div>
<nav class="">
<ul class="primary-nav horizontal-menu md:flex items-center space-x-chorus-lg">
<li class="menu-item">
<div class="menu-item">Overview</div>
<ul class="flyout-menu">
<li class="menu-item"><a href="#overview" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Brand Overview</a></li>
<li class="menu-item"><a href="#identity" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Brand Identity</a></li>
<li class="menu-item"><a href="#usage" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Usage Guidelines</a></li>
</ul>
</li>
<li class="menu-item">
<div class="menu-item">Visual Identity</div>
<ul class="flyout-menu">
<li class="menu-item"><a href="#visual-identity" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Visual Identity</a></li>
<li class="menu-item"><a href="#logo" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Logo System</a></li>
<li class="menu-item"><a href="#typography" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Typography</a></li>
<li class="menu-item"><a href="#colors" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Color Palette</a></li>
<li class="menu-item"><a href="#iconography" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Iconography</a></li>
<li class="menu-item"><a href="#accessibility" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Accessibility</a></li>
<li class="menu-item"><a href="#components" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Components</a></li>
<li class="menu-item"><a href="#motion" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Motion System</a></li>
<li class="menu-item"><a href="#implementation" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Implementation</a></li>
</ul>
</li>
<li class="menu-item">
<div class="menu-item">Communications</div>
<ul class="flyout-menu">
<li class="menu-item"><a href="#culture" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Culture</a></li>
<li class="menu-item"><a href="#communications" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Language Support</a></li>
<li class="menu-item"><a href="#public-relations" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Public Relations</a></li>
<li class="menu-item"><a href="#investor-relations" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Investor Relations</a></li>
<li class="menu-item"><a href="#collaborators" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Collaborators</a></li>
<li class="menu-item"><a href="#social-media" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Social Media</a></li>
</ul>
<li class="menu-item">
<div class="menu-item"></div>
<ul class="flyout-menu">
</ul>
</li>
</ul>
<a href="#communications" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Language Support</a>
<a href="#public-relations" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Public Relations</a>
<a href="#investor-relations" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Investor Relations</a>
<a href="#collaborators" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Collaborators</a>
<a href="#social-media" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Social Media</a>
<a href="#presentations-decks" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Presentations & Decks</a>
<a href="#video-capture" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Video Capture</a>
<a href="#still-photography" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Still Photography</a>
<a href="#ai-generated-imagery" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">AI Generated Imagery</a>
<a href="#print-media" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Print Media</a>
<a href="#advertising" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Advertising Standards</a>
</nav>
</div> </div>
</div> </div>
<!-- Breadcrumb Trail -->
<div class="flex items-center justify-between">
<nav class="flex items-center space-x-chorus-md px-chorus-lg py-chorus-md">
<a href="#overview" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Home</a>
<span class="text-carbon-500 dark:text-mulberry-400">/</span>
<span class="text-carbon-800 dark:text-mulberry-200">Brand Guide</span>
</nav>
</div>
</header> </header>
<!-- Main Content --> <!-- Main Content -->
@@ -1236,12 +1313,64 @@
<div class="bg-sand-50 dark:bg-mulberry-900 border border-sand-200 dark:border-mulberry-800 p-chorus-md"> <div class="bg-sand-50 dark:bg-mulberry-900 border border-sand-200 dark:border-mulberry-800 p-chorus-md">
<h4 class="text-h4 mb-2">Navigation Features</h4> <h4 class="text-h4 mb-2">Navigation Features</h4>
<div class="grid gap-chorus-lg md:grid-cols-4">
<div class="flex items center gap-chorus-sm">
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Right_MD.png" alt="Navigation Arrow" class="icon w-5 h-5 dark:hidden">
<img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Arrow_Right_MD.png" alt="Navigation Arrow" class="icon w-5 h-5 hidden dark:block">
<span>Click on any section in the sidebar to jump directly to that section</span>
</div>
<div class="flex items center gap-chorus-sm">
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Left_MD.png" alt="Back Arrow" class="icon w-5 h-5 dark:hidden">
<img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Arrow_Left_MD.png" alt="Back Arrow" class="icon w-5 h-5 hidden dark:block">
<span>Use the back arrow in the top left to return to the previous section</span>
</div>
<div class="flex items center gap-chorus-sm">
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Arrow_Down.png" alt="Scroll Down Arrow" class="icon w-5 h-5 dark:hidden">
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Arrow_Down.png" alt="Scroll Down Arrow" class="icon w-5 h-5 hidden dark:block">
<span>Scroll down to explore each section in detail</span>
</div>
<div class="flex items center gap-chorus-sm">
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Arrow_Up.png" alt="Scroll Up Arrow" class="icon w-5 h-5 dark:hidden">
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Arrow_Up.png" alt="Scroll Up Arrow" class="icon w-5 h-5 hidden dark:block">
<span>Use the up arrow to quickly return to the top of the page</span>
</div>
<!-- Menu System Navigation -->
<div class="flex items center gap-chorus-sm">
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png" alt="Settings Icon" class="icon w-5 h-5 dark:hidden">
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Settings.png" alt="Settings Icon" class="icon w-5 h-5 hidden dark:block">
<span>Access settings for theme toggle and visual aids in the bottom toolbar</span>
</div>
<!-- Breadcrumb Trails -->
<div class="flex items center gap-chorus-sm">
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Breadcrumbs.png" alt="Breadcrumbs Icon" class="icon w-5 h-5 dark:hidden">
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Breadcrumbs.png" alt="Breadcrumbs Icon" class="icon w-5 h-5 hidden dark:block">
<span>Breadcrumb trails at the top of each section for easy navigation</span>
</div>
<!-- Document Search -->
<div class="flex items center gap-chorus-sm">
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Search.png" alt="Search Icon" class="icon w-5 h-5 dark:hidden">
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Search.png" alt="Search Icon" class="icon w-5 h-5 hidden dark:block">
<span>Use the search bar to quickly find specific topics or keywords</span>
</div>
<!-- AI Assisted Answers (RAG) -->
<div class="flex items center gap-chorus-sm">
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Chat_Conversation.png" alt="AI Assist Icon" class="icon w-5 h-5 dark:hidden">
<img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Chat_Conversation.png" alt="AI Assist Icon" class="icon w-5 h-5 hidden dark:block">
<span>Get AI-assisted answers to questions about the brand guidelines</span>
</div>
<ul class="text-sm space-y-1 text-carbon-600 dark:text-mulberry-300"> <ul class="text-sm space-y-1 text-carbon-600 dark:text-mulberry-300">
<li><strong>Theme Toggle:</strong> Switch between dark/light modes (dark is default)</li> <li><strong>Theme Toggle:</strong> Switch between dark/light modes (dark is default)</li>
<li><strong>Visual Aid:</strong> Access color-blindness accommodations via bottom toolbar</li> <li><strong>Visual Aid:</strong> Access color-blindness accommodations via bottom toolbar</li>
<li><strong>Semantic Icons:</strong> Each section has corresponding Coolicons for visual clarity</li> <li><strong>Semantic Icons:</strong> Each section has corresponding Coolicons for visual clarity</li>
<li><strong>Accessibility First:</strong> All navigation supports keyboard and screen readers</li> <li><strong>Accessibility First:</strong> All navigation supports keyboard and screen readers</li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
@@ -4038,4 +4167,4 @@ p {
}); });
</script> </script>
</body> </body>
</html> </html>