Cursor rule

1---
2globs: src/styles/*.css,src/components/*.astro,src/layouts/*.astro
3---
4 
5# JAMCAM Styling and Design System
6 
7## CSS Architecture
8- **Global styles**: [src/styles/global.css](mdc:src/styles/global.css) - Base styles, fonts, and CSS variables
9- **Tailwind CSS**: Version 4.1+ with Vite plugin integration
10- **Component styles**: Use Tailwind utility classes primarily
11- **Custom CSS**: Component-scoped styles when Tailwind isn't sufficient
12 
13## Typography
14Custom fonts loaded from [public/fonts/](mdc:public/fonts/):
15- **Noto Sans** - Primary font family
16- Weights: 300 (light), 400 (regular), 600 (semibold), 700 (bold)
17- Format: WOFF2 for optimal performance
18 
19```css
20/* Font usage pattern */
21.heading {
22  font-family: 'Noto Sans', sans-serif;
23  font-weight: 600;
24}
25```
26 
27## Color Palette
28JAMCAM uses a vibrant color scheme reflecting Colombian nature:
29- **Purple waves**: For section dividers and backgrounds
30- **Pink accents**: For highlights and call-to-action elements  
31- **Natural greens and blues**: Reflecting Colombian biodiversity
32- **Warm earth tones**: For grounding and accessibility
33 
34## Layout Patterns
35 
36### Container System
37```astro
38<!-- Standard container -->
39<div class="container mx-auto px-4">
40  <!-- Content -->
41</div>
42 
43<!-- Full-width sections with contained content -->
44<section class="w-full bg-purple-50">
45  <div class="container mx-auto px-4 py-16">
46    <!-- Section content -->
47  </div>
48</section>
49```
50 
51### Responsive Design
52- **Mobile-first**: Design for mobile, enhance for larger screens
53- **Breakpoints**: Follow Tailwind's default system (sm, md, lg, xl, 2xl)
54- **Image handling**: Use responsive images with multiple sizes
55 
56### Wave Decorations
57Decorative wave SVGs are used throughout:
58- [about-purple-wave.svg](mdc:public/images/about-purple-wave.svg) and mobile variant
59- [cards-purple-wave.svg](mdc:public/images/cards-purple-wave.svg)
60- [program-pink-wave.svg](mdc:public/images/program-pink-wave.svg)
61- [service-team-pink-wave.svg](mdc:public/images/service-team-pink-wave.svg)
62 
63## Component Styling Patterns
64 
65### Cards
66```astro
67<div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
68  <!-- Card content -->
69</div>
70```
71 
72### Buttons
73```astro
74<!-- Primary button -->
75<button class="bg-purple-600 hover:bg-purple-700 text-white font-semibold py-3 px-6 rounded-lg transition-colors">
76  {t.cta.register}
77</button>
78 
79<!-- Secondary button -->
80<button class="border-2 border-purple-600 text-purple-600 hover:bg-purple-600 hover:text-white font-semibold py-3 px-6 rounded-lg transition-colors">
81  {t.cta.learnMore}
82</button>
83```
84 
85### Image Optimization
86- Use Astro's `<Image>` component for optimization
87- Provide WebP and fallback formats
88- Include proper alt text for accessibility
89- Lazy load images below the fold
90 
91## Animation and Interactions
92- **Subtle hover effects** on interactive elements
93- **Smooth transitions** using CSS transitions
94- **Scroll-triggered animations** where appropriate
95- **Maintain 60fps** performance for all animations
96 
97## Colombian Cultural Elements
98- **Nature-inspired**: Colors and imagery reflect Colombian biodiversity
99- **Wildlife motifs**: Featured animals include guacamaya, tangara, loro cabeza azul, pato moscovia
100- **Regional identity**: Cali-specific imagery and cultural references
101- **Scout heritage**: Integration of scouting symbols and traditions
102description:
103globs:
104alwaysApply: false
105---
106