Update CLAUDE.md with website design guidelines

- Added detailed website design guidelines section
- Documented color scheme with specific hex codes
- Added information about interactive components
- Included responsive design specifications
- Documented navigation structure and linking
- Added details about content organization approach
- Updated media guidelines for figure conversion

🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>

CLAUDE.md

@@ -5,6 +5,7 @@
 - Static website built with Bulma CSS framework
 - No build system (pure HTML/CSS/JavaScript)
 - Research paper for ACL Annual Advances in Research (Feb 2025)
+- Hosted on HuggingFace Spaces
 
 ## Serving the Website
 - For local testing: `python -m http.server 8000` (will serve from current directory)
@@ -20,17 +21,44 @@
   - Use function declarations with 'function' keyword
   - Prefer vanilla JS with minimal dependencies
 
+## Website Design Guidelines
+- Color scheme: 
+  - Primary: Deep blue (#004d99) for finance theme
+  - Secondary: Orange (#ff6b00) for "flame" accent
+  - Light background (#f8f9fa) for content areas
+- Card-based layout for content organization
+- Interactive elements with hover effects
+- Mobile-responsive design
+- Navigation menu with fixed positioning
+- Footer with institutional information and resource links
+
 ## Media Guidelines
 - Image formats: Prefer .jpg for photos, .svg for vector graphics
 - Video formats: Use .mp4 for compatibility
 - Optimize media files for web delivery
 - Paper figures are in PDF format in FLaME/content/figures/
+- For web display, convert PDF figures to PNG/JPG formats
 
 ## Structure
 - Keep all CSS in static/css/
 - Keep all JavaScript in static/js/
 - Keep media files in appropriate subdirectories
 - Paper content in FLaME/content/
+- Use section IDs for navigation linking (e.g., #abstract, #methodology)
+
+## Interactive Components
+- Navbar with smooth scrolling to sections
+- Performance indicator bars for result visualization
+- Card layouts for key findings with hover effects
+- Methodology workflow diagram with step visualization
+- Interactive feature highlights with icons
+- Getting started guide with numbered steps
+
+## Responsive Design
+- Mobile-friendly navigation menu (hamburger on small screens)
+- Stacked cards on mobile devices
+- Adjusted typography and spacing for different screen sizes
+- Media queries for breakpoints at 768px
 
 ## FLaME Research Paper Information