Fix CSS/asset paths for GitHub Pages deployment

- Convert absolute paths (/src/) to relative paths across 50+ HTML files
- Depth 1 files (src/components/*.html): use ../
- Depth 2 files (atoms, molecules, organisms, pages, templates): use ../../
- Depth 3 files (featured-section): use ../../../
- Add new organism components (hero, sections, featured variants)
- Add page components (user-flow, dashboard)
- Add documentation files (COMPONENTS.md, design system docs)
- Update button system documentation

This fixes CSS not loading on GitHub Pages deployment.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

Author: babayomi

COMPONENTS.md

@@ -0,0 +1,345 @@
+# Dr G Lab Trauma-informed Design System - Component Documentation
+
+This document provides a comprehensive overview of all **implemented and production-ready** trauma-informed components for Dr G Lab's certification courses, organized according to atomic design methodology.
+
+## Implementation Status: ✅ COMPLETE
+
+All components listed below are fully implemented, tested, and available in `src/samples.html` and individual component files.
+
+## Table of Contents
+
+1. [Atoms (Base Components)](#atoms-base-components)
+2. [Molecules (Compound Components)](#molecules-compound-components)
+3. [Organisms (Complex Components)](#organisms-complex-components)
+4. [Templates (Page Layouts)](#templates-page-layouts)
+5. [Trauma-Informed Specialty Components](#trauma-informed-specialty-components)
+6. [Implementation Examples](#implementation-examples)
+
+## Atoms (Base Components)
+
+### ✅ Buttons
+All button components are fully implemented with trauma-informed interactions.
+
+- **Emergency Exit Button** 
+  - Location: Always visible, bottom-right positioning
+  - Classes: `fixed bottom-4 right-4 bg-rhodochrosite-rose-600 text-selenite-white-50 px-md py-sm rounded-md focus:ring-2 focus:ring-rhodochrosite-rose-300 focus:outline-none transition-all duration-300`
+  - Features: Single-click activation, no confirmation dialogs, high contrast, clear focus state
+  - Trauma-informed: Always accessible, immediate escape from triggering content, visible keyboard navigation
+
+- **Primary Button**
+  - Classes: `bg-chrysocolla-green text-selenite-white-50 px-md py-sm rounded-md hover:bg-chrysocolla-green-600 focus:ring-2 focus:ring-chrysocolla-green-300 focus:outline-none transition-all duration-300`
+  - Features: Gentle transitions, clear feedback, consistent styling, visible focus state
+  - Trauma-informed: Calm color palette, predictable behavior, supportive disabled states, accessible keyboard navigation
+
+- **Secondary Button** 
+  - Classes: `border-2 border-chrysocolla-green text-chrysocolla-green px-md py-sm rounded-md hover:bg-chrysocolla-green-50 focus:ring-2 focus:ring-chrysocolla-green-200 focus:outline-none transition-all duration-300`
+  - Features: Clear hierarchy, gentle hover states, visible focus state
+  - Trauma-informed: Non-pressuring visual weight, supportive messaging, accessible keyboard navigation
+
+- **Tertiary Button** 
+  - Classes: `font-montserrat text-small text-chrysocolla-green hover:text-chrysocolla-green-600 underline focus:ring-2 focus:ring-chrysocolla-green-100 focus:outline-none transition-all duration-300`
+  - Features: Minimal styling for optional actions, visible focus state
+  - Trauma-informed: Low visual pressure, validates user choice to engage or not, accessible keyboard navigation
+
+### ✅ Form Elements
+All form components include trauma-informed validation and feedback.
+
+- **Text Input** 
+  - Classes: `w-full border border-grey-300 rounded-md px-md py-sm focus:ring-2 focus:ring-azurite-blue-300`
+  - Features: Gentle focus states, supportive error messaging, clear labels
+  - Trauma-informed: Non-judgmental validation, clear expectations
+
+- **Checkbox** 
+  - Classes: `h-4 w-4 rounded border-grey-300 text-chrysocolla-green focus:ring-chrysocolla-green-200`
+  - Features: Large touch targets, clear visual feedback
+  - Trauma-informed: Easy to use, supports user choice and control
+
+- **Radio Button** 
+  - Classes: `h-4 w-4 text-chrysocolla-green focus:ring-chrysocolla-green-200`
+  - Features: Clear grouping, card-style variants available
+  - Trauma-informed: Predictable behavior, clear current selection
+
+- **Select Dropdown** 
+  - Classes: `w-full border border-grey-300 rounded-md px-md py-sm appearance-none bg-select-arrow`
+  - Features: Custom styling, clear option hierarchy
+  - Trauma-informed: Non-overwhelming option lists, clear current state
+
+### ✅ Typography
+Complete typography system with semantic hierarchy.
+
+- **Headings (H1-H6)** 
+  - Classes: `font-playfair font-bold text-h1-mobile md:text-h1-tablet lg:text-h1-desktop text-azurite-blue-900`
+  - Features: Responsive scaling, consistent hierarchy
+  - Trauma-informed: Clear information hierarchy, comfortable reading
+
+- **Body Text** 
+  - Classes: `font-montserrat text-grey-800 text-body`
+  - Features: Optimal line length, comfortable line spacing
+  - Trauma-informed: Easy reading, reduces cognitive load
+
+- **Captions & Labels** 
+  - Classes: `font-montserrat text-caption text-grey-600`
+  - Features: Supporting text without visual competition
+  - Trauma-informed: Clear context without overwhelming primary content
+
+### ✅ Status Indicators
+
+- **Category Badges** 
+  - Classes: `bg-azurite-blue-50 text-azurite-blue-600 px-sm py-xs rounded-md text-caption`
+  - Features: Content categorization, color-coded systems
+  - Trauma-informed: Clear content expectations, gentle visual indicators
+
+- **Progress Bars** 
+  - Classes: `h-2 bg-grey-200 rounded-full overflow-hidden`
+  - Features: Visual progress indication, supportive messaging
+  - Trauma-informed: Celebrates progress, no time pressure, encouraging feedback
+
+- **Status Badges** 
+  - Classes: Variable based on status (completed, in-progress, not-started)
+  - Features: Clear completion states, gentle color coding
+  - Trauma-informed: Non-judgmental status indicators, celebrates all progress
+
+## Molecules (Compound Components)
+
+### ✅ Content Warnings
+Comprehensive content warning system.
+
+- **Content Warning Panel**
+  - Classes: `bg-rhodochrosite-rose-50 border-l-4 border-rhodochrosite-rose p-md rounded-r-md`
+  - Features: Clear warning text, multiple engagement options, skip alternatives
+  - Trauma-informed: Gives users control, validates all choices, clear alternatives
+
+- **Supportive Messages** 
+  - Classes: `bg-azurite-blue-50 border border-azurite-blue-100 rounded-md p-md`
+  - Features: Encouraging feedback, non-judgmental language
+  - Trauma-informed: Positive reinforcement, validates user experience
+
+### ✅ Form Groups
+
+- **Input with Label** 
+  - Features: Accessible labeling, helper text, validation messaging
+  - Trauma-informed: Clear expectations, supportive error messages, optional field indicators
+
+- **Checkbox Groups** 
+  - Features: Clear grouping, consistent spacing, accessible markup
+  - Trauma-informed: Supports user choice, clear what each option means
+
+### ✅ Navigation Components
+
+- **Breadcrumb Navigation** 
+  - Classes: `flex items-center space-x-sm text-small`
+  - Features: Clear path indication, current location highlighting
+  - Trauma-informed: Helps orientation, predictable navigation
+
+- **Course Navigation Sidebar** 
+  - Features: Module listing, progress indication, learning preferences
+  - Trauma-informed: Clear course structure, user control over experience
+
+## Organisms (Complex Components)
+
+### ✅ Course Components
+Complete learning platform implementation.
+
+- **Core Course Card** 
+  - Location: `src/components/organisms/course/core-course-card.html`
+  - Features: Course overview, module preview, clear navigation
+  - Trauma-informed: Self-paced messaging, clear expectations, gentle visual design
+
+- **Module Card** 
+  - Location: `src/components/organisms/course/module-card.html`
+  - Features: Progress tracking, content preview, status indicators
+  - Trauma-informed: Non-pressuring progress indicators, time estimates, pause options
+
+- **Specialization Course Card** 
+  - Features: Prerequisites clearly stated, different visual treatment
+  - Trauma-informed: Clear skill requirements, no pressure to advance
+
+- **Progress Tracker** 
+  - Location: `src/components/organisms/course/progress-tracker.html`
+  - Features: Visual progress bars, encouraging messaging, module status
+  - Trauma-informed: Celebrates small wins, no time pressure, supportive language
+
+- **Quiz Component** 
+  - Features: Multiple attempts, hints available, skip options
+  - Trauma-informed: Learning-focused, not testing-focused, supportive feedback
+
+- **Certificate Component** 
+  - Features: Achievement recognition, download options, sharing controls
+  - Trauma-informed: Celebrates accomplishment, user controls sharing
+
+### ✅ Content Components
+
+- **Blog Card** 
+  - Location: `src/components/organisms/blog/blog-card.html`
+  - Features: Content warnings, author information, reading time
+  - Trauma-informed: Content intensity indicators, clear expectations
+
+- **Project Card** 
+  - Features: Case study previews, categorization, gentle hover effects
+  - Trauma-informed: Clear content disclosure, no sudden movements
+
+- **Service Card** 
+  - Features: Service descriptions, transparent pricing, clear inclusions
+  - Trauma-informed: No high-pressure CTAs, clear expectations
+
+- **Toolkit Card** 
+  - Features: Resource downloads, file format specifications, content preview
+  - Trauma-informed: Preview before download, clear file information
+
+### ✅ Learning Interface
+
+- **Main Learning Interface** 
+  - Features: Video controls, content alternatives, sidebar navigation
+  - Trauma-informed: Emergency exit, content warnings, break reminders
+
+- **Video Player Controls** 
+  - Play/Pause (Primary): `bg-chrysocolla-green text-selenite-white-50 px-md py-sm rounded-md hover:bg-chrysocolla-green-600 focus:ring-2 focus:ring-chrysocolla-green-300 focus:outline-none transition-all duration-300`
+  - Speed Controls (Secondary): `border-2 border-chrysocolla-green text-chrysocolla-green px-md py-sm rounded-md hover:bg-chrysocolla-green-50 focus:ring-2 focus:ring-chrysocolla-green-200 focus:outline-none transition-all duration-300`
+  - Show Transcript (Tertiary): `font-montserrat text-small text-chrysocolla-green hover:text-chrysocolla-green-600 underline focus:ring-2 focus:ring-chrysocolla-green-100 focus:outline-none transition-all duration-300`
+
+## Templates (Page Layouts)
+
+### ✅ Authentication Templates
+Complete authentication flow.
+
+- **Login Template** 
+  - Features: Simple form, password reset link, supportive messaging
+  - Trauma-informed: Non-judgmental error messages, clear help options
+
+- **Password Reset Template** 
+  - Features: Reassuring messaging, clear instructions, support contact
+  - Trauma-informed: Validates that forgetting is normal, supportive tone
+
+- **Account Creation Template** 
+  - Features: Minimal required fields, clear privacy information
+  - Trauma-informed: Respects user privacy, clear data usage
+
+- **Course Registration Template**
+  - Features: Step-by-step process, save progress, clear pricing
+  - Trauma-informed: No time pressure, clear expectations, privacy respected
+
+### ✅ Learning Templates
+
+- **Course Grid Templates** 
+  - Multiple layout variations: Light, dark, gradient, mixed styles
+  - Features: Filtering, consistent card layouts, clear categorization
+  - Trauma-informed: Content intensity filtering, clear course expectations
+
+- **Learning Interface Template** 
+  - Features: Full learning environment with safety features integrated
+  - Trauma-informed: Emergency exit, break reminders, content alternatives
+
+## Trauma-Informed Specialty Components
+
+### ✅ Safety Features
+
+- **Emergency Exit Button** 
+  - Always visible, single-click escape, no confirmation dialogs
+  - Provides immediate safety for users experiencing distress
+
+- **Content Intensity Controls** 
+  - User-adjustable content density, warning preferences, format alternatives
+  - Gives users complete control over their content experience
+
+- **Emotional Check-in Component** 
+  - Feeling scale, recommendations based on selection, grounding exercise access
+  - Supports user emotional awareness and regulation
+
+- **Grounding Exercise Integration** 
+  - 5-4-3-2-1 sensory technique, step-by-step guidance, accessible anytime
+  - Provides immediate emotional regulation support
+
+- **Support Resources Panel** 
+  - Crisis resources, course support, grounding techniques
+  - Quick access to help when needed
+
+### ✅ Content Management Features
+
+- **Alternative Content Formats** 
+  - Video, text, audio options for all content
+  - Respects different learning preferences and needs
+
+- **Content Warning System** 
+  - Detailed warnings, content alternatives, skip options
+  - Comprehensive protection for sensitive content
+
+- **Break Reminders** 
+  - Session time tracking, gentle break suggestions
+  - Supports healthy engagement patterns
+
+## Implementation Examples
+
+### Basic Component Usage
+
+```html
+<!-- Emergency Exit - Always include -->
+<button class="fixed top-4 right-4 bg-rhodochrosite-rose-600 text-selenite-white-50 px-md py-sm rounded-md">
+  Exit to Safe Space ✕
+</button>
+
+<!-- Content Warning -->
+<div class="bg-rhodochrosite-rose-50 border-l-4 border-rhodochrosite-rose p-md rounded-r-md mb-lg">
+  <p class="font-montserrat font-medium text-grey-800 mb-xs">Content Notice</p>
+  <p class="font-montserrat text-small text-grey-700">This lesson contains discussion of...</p>
+  <div class="mt-md flex gap-sm">
+    <button class="bg-selenite-white-50 text-grey-700 px-md py-xs rounded-md border">View summary</button>
+    <button class="bg-selenite-white-50 text-grey-700 px-md py-xs rounded-md border">Skip section</button>
+  </div>
+</div>
+
+<!-- Primary Button -->
+<button class="bg-chrysocolla-green text-selenite-white-50 px-md py-sm rounded-md hover:bg-chrysocolla-green-600">
+  Continue Learning
+</button>
+```
+
+### Complete Course Card
+
+```html
+<div class="bg-selenite-white-50 border border-grey-200 rounded-lg shadow-soft p-lg hover:shadow transition-all duration-300">
+  <div class="mb-sm">
+    <span class="bg-azurite-blue-50 text-azurite-blue-600 px-sm py-xs rounded-md text-caption">Core Course</span>
+  </div>
+  <h3 class="font-playfair font-bold text-azurite-blue-900 text-h3-mobile mb-sm">
+    Introduction to Trauma-Informed Design
+  </h3>
+  <p class="font-montserrat text-grey-800 text-body mb-lg">
+    This foundational course introduces trauma-informed design principles...
+  </p>
+  <a href="#" class="inline-block bg-chrysocolla-green text-selenite-white-50 px-md py-sm rounded-md hover:bg-chrysocolla-green-600 focus:ring-2 focus:ring-chrysocolla-green-300 focus:outline-none transition-all duration-300 text-center w-full">
+    Explore Course
+  </a>
+</div>
+```
+
+## Browser Support & Testing
+
+- ✅ **Chrome 90+**: Fully tested and supported
+- ✅ **Firefox 88+**: Fully tested and supported  
+- ✅ **Safari 14+**: Fully tested and supported
+- ✅ **Edge 90+**: Fully tested and supported
+
+## Accessibility Compliance
+
+- ✅ **WCAG 2.2 AA**: All components tested and compliant
+- ✅ **Screen Readers**: Compatible with NVDA, JAWS, VoiceOver
+- ✅ **Keyboard Navigation**: Full keyboard accessibility
+- ✅ **Color Contrast**: All text meets minimum contrast requirements
+- ✅ **Focus Management**: Clear focus indicators throughout
+
+## Performance
+
+- ✅ **CSS Size**: Optimized Tailwind build
+- ✅ **Load Time**: Fast loading with minimal dependencies
+- ✅ **Animations**: Respects user motion preferences
+- ✅ **Images**: Lazy loading and alt text support
+
+## Contributing
+
+When contributing to this component library:
+
+1. **Maintain Trauma-Informed Principles**: Never remove safety features
+2. **Test Accessibility**: Verify WCAG compliance
+3. **Document Changes**: Update this documentation
+4. **User Test**: Validate with diverse users including trauma survivors
+5. **Consistent Styling**: Follow established design tokens

button-system-doc/emergency-exit-button-documentation.md

@@ -15,8 +15,9 @@ The Emergency Exit Button is a critical trauma-informed UI component that provid
 
 ### Color System
 
-- **Primary Color**: `rhodochrosite-rose` - Warm, urgent but approachable
-- **Hover State**: `rhodochrosite-rose-600` - Darker variant for feedback
+- **Primary Color**: `rhodochrosite-rose-600` - Warm, urgent but approachable
+- **Hover State**: `rhodochrosite-rose-700` - Darker variant for feedback
+- **Focus State**: `focus:ring-2 focus:ring-rhodochrosite-rose-300 focus:outline-none` - Clear accessibility indicator
 - **Text Color**: `selenite-white-50` - High contrast for accessibility
 - **Tooltip**: `selenite-white-50` background with `grey-800` text
 
@@ -265,7 +266,7 @@ Emergency Exit button interactions prioritize immediate accessibility and reliab
         @focus="hover = true"
         @blur="hover = false"
         @click="exit()"
-        class="bg-rhodochrosite-rose hover:bg-rhodochrosite-rose-600 text-selenite-white-50 transition-all duration-300 flex items-center space-x-2 rounded-md shadow-soft"
+        class="bg-rhodochrosite-rose-600 hover:bg-rhodochrosite-rose-700 text-selenite-white-50 transition-all duration-300 flex items-center space-x-2 rounded-md shadow-soft focus:ring-2 focus:ring-rhodochrosite-rose-300 focus:outline-none"
         :class="{
           'px-sm py-xs text-small': window.innerWidth < 768,
           'px-md py-sm': window.innerWidth >= 768