Claude stuffs up. Time to restore mucked up files.
This commit is contained in:
tony
@@ -4,6 +4,11 @@
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<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>
|
||||
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">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-chorus-lg">
|
||||
|
||||
|
||||
<div class="flex items-center gap-chorus-sm px-chorus-md py-chorus-md">
|
||||
<canvas class="chorus-logo" style="width: 64px; height: 64px;"></canvas>
|
||||
<noscript>
|
||||
@@ -1046,8 +1053,78 @@
|
||||
<div class="font-thin font-logo">CHORUS</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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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">
|
||||
<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">
|
||||
<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>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>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -4038,4 +4167,4 @@ p {
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user