# Modern Rebuild Reference Guide - CSS Classes & Patterns

## DESIGN PATTERNS & COMPONENT LIBRARY

### 1. BUTTON STYLES

**Primary Button (Coral/Orange - #f1784b)**
```html
<a href="#" class="btn btn-primary">Text <i data-lucide="icon" class="ms-2"></i></a>
```
- Border radius: 50px
- Padding: 12px 32px
- Font weight: 600
- Hover: Darker shade + translateY(-2px) + box-shadow

**Secondary Button (Teal - #1e8d97)**
```html
<button class="btn btn-secondary">Text</button>
```
- Same styling as primary but teal color

**Outline White Button**
```html
<a href="#" class="btn btn-outline-white">Text</a>
```
- Used on dark backgrounds (hero section)
- Border: 2px white
- Text: white

**Outline Dark Button**
```html
<a href="#" class="btn btn-outline-dark">Text</a>
```
- Used for secondary actions

---

### 2. TYPOGRAPHY

**Headings**
```html
<h1 class="display-3 fw-bold">Main Title</h1>
<h2 class="section-title">Section Heading</h2>
<h3 class="fw-bold">Subsection</h3>
<h4 class="fw-bold">Card Title</h4>
```

**Section Subtitle**
```html
<span class="section-subtitle">OUR STORY</span>
```
- Color: Secondary (#f1784b)
- Uppercase, letter-spacing: 2px
- Font weight: 600
- Font size: 0.85rem

**Text Variants**
```html
<p class="text-muted">Secondary text</p>
<p class="text-sm">Small text</p>
<p class="opacity-90">Slightly transparent</p>
<p class="max-w-2xl">Max width container</p>
```

**Font Families**
- Headings: Playfair Display (serif)
- Body: Poppins (sans-serif)

---

### 3. HERO SECTIONS

**Full-Height Hero with Countdown**
```html
<section class="hero-section" style="background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('image.png');">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <h1 class="hero-title">The Race for <span>Humanity</span></h1>
                <p class="hero-subtitle">Subtitle text</p>
                
                <!-- Countdown -->
                <div class="d-flex justify-content-center mt-5">
                    <div class="countdown-item">
                        <span id="days" class="countdown-number">32</span>
                        <span class="countdown-label">Days</span>
                    </div>
                    <!-- More items -->
                </div>
            </div>
        </div>
    </div>
</section>
```

**Countdown Item Styles**
- Background: rgba(255, 255, 255, 0.1)
- Backdrop filter: blur(10px)
- Width: 100px, Height: 120px
- Border radius: 20px
- Border: 1px solid rgba(255, 255, 255, 0.2)

**Internal Page Hero**
```html
<section class="internal-hero" style="background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('image.png');">
    <div class="container">
        <h1 class="display-3 fw-bold mb-3 text-white">Page Title</h1>
        <p class="lead max-w-2xl mx-auto opacity-90 text-white">Subtitle</p>
    </div>
</section>
```
- Padding: 120px 0 80px
- Uses ::before pseudo-element for overlay

---

### 4. CARD COMPONENTS

**Category Card (4-column grid)**
```html
<div class="card category-card h-100">
    <img src="image.png" class="category-img" alt="Category">
    <div class="card-body p-4">
        <h5 class="fw-bold mb-3">Title</h5>
        <p class="text-muted text-sm mb-4">Description</p>
        <a href="#" class="btn btn-link p-0 text-primary fw-bold text-decoration-none d-flex align-items-center gap-2">
            LEARN MORE <i data-lucide="arrow-right" style="width: 16px;"></i>
        </a>
    </div>
</div>
```
- Border: none
- Border radius: 1.5rem
- Box shadow: 0 10px 30px rgba(0,0,0,0.05)
- Hover: transform translateY(-10px), larger shadow

**Info Box**
```html
<div class="info-box p-3 bg-white">
    <div class="info-box-icon"><i data-lucide="calendar"></i></div>
    <div>
        <h6 class="fw-bold mb-0">Label</h6>
        <p class="text-xs text-muted mb-0">Value</p>
    </div>
</div>
```
- Flex layout with gap: 15px
- Icon container: 40px × 40px, background: #e6f7f8
- Border radius: 1rem

**Value Card**
```html
<div class="value-card h-100 p-4 bg-white rounded-4 shadow-sm">
    <div class="value-icon mb-4"><i data-lucide="icon"></i></div>
    <h5 class="fw-bold mb-3">Title</h5>
    <p class="text-muted text-sm mb-0">Description</p>
</div>
```

---

### 5. SECTIONS & LAYOUTS

**Section Padding & Backgrounds**
```html
<section class="py-5 bg-white">
    <div class="container py-5">
        <!-- Content -->
    </div>
</section>

<section class="py-5 bg-light">
    <div class="container py-5">
        <!-- Content -->
    </div>
</section>
```

**Three-Column Grid (responsive)**
```html
<div class="row g-4">
    <div class="col-md-4">
        <!-- Column 1 -->
    </div>
    <div class="col-md-4">
        <!-- Column 2 -->
    </div>
    <div class="col-md-4">
        <!-- Column 3 -->
    </div>
</div>
```
- Gap: g-4 (1.5rem)
- Breakpoint switches: col-md-6, col-lg-4, etc.

**Two-Column Layout**
```html
<div class="row g-5 align-items-center">
    <div class="col-lg-6">
        <!-- Left content -->
    </div>
    <div class="col-lg-6">
        <!-- Right content (usually image) -->
    </div>
</div>
```
- Gap: g-5 (3rem)
- Alignment: align-items-center

---

### 6. LISTS & NUMBERED ITEMS

**Expect List**
```html
<div class="expect-list">
    <div class="expect-item">
        <div class="expect-number">1</div>
        <div>
            <h6 class="fw-bold mb-1">Title</h6>
            <p class="text-sm text-muted mb-0">Description</p>
        </div>
    </div>
    <!-- More items -->
</div>
```

**Expect Number Styling**
- Width/Height: 30px
- Background: Secondary color (#f1784b)
- Color: white
- Border radius: 50%
- Font weight: bold
- Flex shrink: 0 (prevents squishing)

**Check List (with icons)**
```html
<li class="d-flex align-items-start gap-2 text-sm">
    <i data-lucide="check" class="text-primary mt-1" style="width: 14px;"></i>
    <span>List item text</span>
</li>
```

---

### 7. ICONS & BADGES

**Lucide Icon Usage**
```html
<!-- Inline icon -->
<i data-lucide="icon-name" style="width: 16px; height: 16px;"></i>

<!-- With text -->
<i data-lucide="arrow-right" class="ms-2 d-inline" style="width: 16px;"></i>

<!-- Large icon in badge -->
<div class="activity-icon-badge">
    <i data-lucide="anchor" style="width: 32px; height: 32px;"></i>
</div>
```

**Activity Icon Badge**
```html
<div class="activity-icon-badge shadow-lg" style="background-color: var(--secondary-color);">
    <i data-lucide="heart" style="width: 32px; height: 32px;"></i>
</div>
```
- 60px × 60px
- Background: Accent color or variable
- Border radius: 12px
- Flex centering
- Margin: 0 auto 20px

**Badge Styles**
```html
<span class="badge bg-secondary bg-opacity-10 text-secondary px-3 py-1">Label</span>
<span class="position-absolute top-0 start-50 translate-middle badge bg-primary">MOST POPULAR</span>
```

---

### 8. FORM ELEMENTS

**Form Group**
```html
<div class="col-md-6">
    <label class="form-label fw-semibold text-sm">Label</label>
    <input type="text" name="field" class="form-control bg-light border-0 py-3" placeholder="Placeholder" required>
</div>
```

**Form Control Styles**
- Background: bg-light (light gray)
- Border: border-0 (no border)
- Padding: py-3 (vertical padding)
- Border radius: Inherited from Bootstrap default

**Form Select**
```html
<select name="field" class="form-select" required>
    <option value="">Select option</option>
    <option value="val1">Option 1</option>
</select>
```

**Textarea**
```html
<textarea name="message" class="form-control bg-light border-0 py-3" rows="5" placeholder="Message"></textarea>
```

**Checkbox**
```html
<div class="form-check">
    <input class="form-check-input" type="checkbox" id="terms" required>
    <label class="form-check-label text-muted small" for="terms">
        I agree to terms and conditions
    </label>
</div>
```

---

### 9. CTA (CALL-TO-ACTION) SECTIONS

**Full-Width CTA Section**
```html
<section class="cta-section text-center py-5">
    <div class="container py-5">
        <h2 class="display-4 fw-bold mb-4 text-white">Heading</h2>
        <p class="lead mb-5 text-white opacity-90 max-w-2xl mx-auto">Description</p>
        <div class="d-flex justify-content-center gap-3">
            <a href="#" class="btn btn-primary btn-lg">Primary CTA</a>
            <a href="#" class="btn btn-outline-white btn-lg">Secondary CTA</a>
        </div>
    </div>
</section>
```

**CTA Section Styling**
- Background color: Primary (#1e8d97)
- Color: white
- Padding: 100px 0
- Decorative circles via ::before and ::after pseudo-elements
- Pseudo-elements: position absolute with border-radius: 50%

---

### 10. FOOTER COMPONENT

**Footer Structure**
```html
<footer class="footer pt-5 pb-3">
    <div class="container py-4">
        <div class="row g-5">
            <!-- Column 1: Logo & Description -->
            <div class="col-lg-4">
                <img src="logo.png" alt="Logo" height="45" class="brightness-0 invert">
                <p class="mb-4 text-sm opacity-80">Description...</p>
                <!-- Social circles -->
                <div class="d-flex gap-3">
                    <a href="#" class="social-circle"><i data-lucide="facebook"></i></a>
                </div>
            </div>
            
            <!-- Column 2-4: Links -->
            <div class="col-lg-2">
                <h5 class="fw-bold">Section Title</h5>
                <ul class="list-unstyled">
                    <li><a href="#" class="footer-link">Link</a></li>
                </ul>
            </div>
        </div>
        
        <!-- Footer Bottom -->
        <div class="footer-bottom d-flex justify-content-between align-items-center">
            <p class="mb-0">© 2026 All rights reserved.</p>
        </div>
    </div>
</footer>
```

**Footer Styling**
- Background: #1a242d (dark navy)
- Color: rgba(255, 255, 255, 0.8)
- Links: Lighter on hover
- Social circles: 36px × 36px, hover changes to secondary color

---

### 11. NAVIGATION & NAVBAR

**Navbar Structure**
```html
<nav class="navbar navbar-expand-lg fixed-top shadow-sm py-3">
    <div class="container">
        <a class="navbar-brand d-flex align-items-center gap-3" href="index.php">
            <img src="logo.png" alt="Logo" height="55">
            <div class="vr opacity-10" style="height: 30px;"></div>
            <img src="partner-logo.png" alt="Partner" height="50" class="d-none d-md-block">
        </a>
        
        <button class="navbar-toggler">
            <span class="navbar-toggler-icon"></span>
        </button>
        
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav mx-auto align-items-center">
                <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                        Dropdown <i data-lucide="chevron-down" class="d-inline ms-1" style="width: 14px;"></i>
                    </a>
                    <ul class="dropdown-menu border-0 shadow-lg">
                        <li><a class="dropdown-item" href="#">Item</a></li>
                    </ul>
                </li>
            </ul>
            
            <div class="d-none d-lg-block">
                <a href="#" class="btn btn-primary px-4 py-2">CTA Button</a>
            </div>
        </div>
    </div>
</nav>

<!-- Spacer for fixed navbar -->
<div style="margin-top: 80px;"></div>
```

---

### 12. RESPONSIVE UTILITIES

**Display Classes**
```html
<div class="d-none d-md-block">Hidden on mobile, visible on md+</div>
<div class="d-md-none">Visible on mobile, hidden on md+</div>
```

**Flex Utilities**
```html
<div class="d-flex justify-content-center align-items-center gap-3">
    <!-- Centered flex container -->
</div>

<div class="d-flex flex-column justify-content-center">
    <!-- Vertical flex -->
</div>
```

**Gap Classes**
```html
<div class="row g-3">Gap: 0.75rem</div>
<div class="row g-4">Gap: 1.5rem</div>
<div class="row g-5">Gap: 3rem</div>
```

**Margin/Padding Classes**
```html
<div class="mb-4 mt-5 py-5">Multiple margin/padding utilities</div>
<div class="ms-2 ps-4">Margin-start, padding-start</div>
```

---

### 13. BACKGROUND & COLOR UTILITIES

**Background Colors**
```html
<section class="bg-white">White background</section>
<section class="bg-light">Light cream background (#fdfaf7)</section>
<section class="bg-primary">Teal background</section>
<section class="bg-secondary">Coral background</section>

<div class="bg-opacity-10">10% opacity background</div>
<div class="bg-opacity-50">50% opacity background</div>
```

**Text Colors**
```html
<p class="text-primary">Teal text</p>
<p class="text-secondary">Coral text</p>
<p class="text-muted">Gray text (#64748b)</p>
<p class="text-white">White text</p>
```

**Opacity Classes**
```html
<div class="opacity-50">50% opacity</div>
<div class="opacity-75">75% opacity</div>
<div class="opacity-90">90% opacity</div>
```

---

### 14. IMAGES & MEDIA

**Responsive Images**
```html
<img src="image.png" class="img-fluid rounded-4 shadow-lg" alt="Description">
```

**Image Classes**
- `img-fluid`: max-width: 100%
- `rounded-4`: border-radius: 1.5rem
- `shadow-lg`: Large box shadow
- `shadow-xl`: Extra large shadow

**Image Grid**
```html
<div class="row g-4">
    <div class="col-md-6 col-lg-3">
        <img src="image.png" class="img-fluid rounded-4" alt="Image 1">
    </div>
</div>
```

---

### 15. SPACING & SIZING

**Section Padding**
```html
<section class="py-5">
    <div class="container py-5">
        <!-- Content -->
    </div>
</section>
```
- `py-5`: Padding top + bottom = 3rem
- `pt-5`: Padding top only
- `px-4`: Padding left + right = 1.5rem

**Container Width**
```html
<div class="container">Full width with max-width: 1140px</div>
<div class="max-w-2xl mx-auto">Max width: 42rem (672px), centered</div>
```

**Height Classes**
```html
<div class="h-100">100% height (h-100)</div>
```

---

## QUICK REFERENCE - COMMON PATTERNS

### 6-Column Grid Pattern
```html
<div class="row g-4">
    <div class="col-md-4 col-lg-2">Column (25%/16.67%)</div>
    <div class="col-md-4 col-lg-2">Column (25%/16.67%)</div>
    <div class="col-md-4 col-lg-2">Column (25%/16.67%)</div>
</div>
```

### 3-Column Grid Pattern
```html
<div class="row g-4">
    <div class="col-md-6 col-lg-4">Column (50%/33.33%)</div>
    <div class="col-md-6 col-lg-4">Column (50%/33.33%)</div>
    <div class="col-md-6 col-lg-4">Column (50%/33.33%)</div>
</div>
```

### 4-Column Grid Pattern
```html
<div class="row g-4">
    <div class="col-md-6 col-lg-3">Column (50%/25%)</div>
</div>
```

### 2-Column Layout with Image
```html
<div class="row g-5 align-items-center">
    <div class="col-lg-6">
        <h2>Content</h2>
        <p>Description</p>
    </div>
    <div class="col-lg-6">
        <img src="image.png" class="img-fluid rounded-4" alt="Image">
    </div>
</div>
```

---

## ACCESSIBILITY NOTES

**Missing but Required for Modern Sites:**
- ARIA labels on buttons/icons
- Role attributes on custom components
- Focus states (visible focus rings)
- Keyboard navigation support
- Alt text on all images
- Color contrast ratios (WCAG AA minimum 4.5:1)
- Skip to main content link
- Semantic HTML (nav, main, aside, footer)
- Form labels properly associated
- Error messages linked to inputs

---

## NEXT STEPS FOR MODERN REBUILD

1. **Add to every page:**
   - Meta description
   - Open Graph tags
   - Canonical tag
   - Schema markup (JSON-LD)

2. **Enhance forms:**
   - Client-side validation (HTML5 + JS)
   - Better error messaging
   - Loading states
   - Success confirmations

3. **Add missing interactivity:**
   - Form validation
   - Toast notifications
   - Modal dialogs
   - Smooth scroll anchors
   - Mobile menu animation

4. **Optimize performance:**
   - Image lazy loading
   - CSS/JS minification
   - Font optimization
   - Critical CSS

5. **Security hardening:**
   - CSRF tokens
   - Input sanitization
   - Rate limiting
   - HTTPS

---

This reference guide uses the existing design patterns found in your codebase. Use these patterns consistently when rebuilding to maintain visual coherence.
