# Modern Rebuild Reference Guide - CSS Classes & Patterns ## DESIGN PATTERNS & COMPONENT LIBRARY ### 1. BUTTON STYLES **Primary Button (Coral/Orange - #f1784b)** ```html Text ``` - Border radius: 50px - Padding: 12px 32px - Font weight: 600 - Hover: Darker shade + translateY(-2px) + box-shadow **Secondary Button (Teal - #1e8d97)** ```html ``` - Same styling as primary but teal color **Outline White Button** ```html Text ``` - Used on dark backgrounds (hero section) - Border: 2px white - Text: white **Outline Dark Button** ```html Text ``` - Used for secondary actions --- ### 2. TYPOGRAPHY **Headings** ```html

Main Title

Section Heading

Subsection

Card Title

``` **Section Subtitle** ```html OUR STORY ``` - Color: Secondary (#f1784b) - Uppercase, letter-spacing: 2px - Font weight: 600 - Font size: 0.85rem **Text Variants** ```html

Secondary text

Small text

Slightly transparent

Max width container

``` **Font Families** - Headings: Playfair Display (serif) - Body: Poppins (sans-serif) --- ### 3. HERO SECTIONS **Full-Height Hero with Countdown** ```html

The Race for Humanity

Subtitle text

32 Days
``` **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

Page Title

Subtitle

``` - Padding: 120px 0 80px - Uses ::before pseudo-element for overlay --- ### 4. CARD COMPONENTS **Category Card (4-column grid)** ```html
Category
Title

Description

LEARN MORE
``` - 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
Label

Value

``` - Flex layout with gap: 15px - Icon container: 40px × 40px, background: #e6f7f8 - Border radius: 1rem **Value Card** ```html
Title

Description

``` --- ### 5. SECTIONS & LAYOUTS **Section Padding & Backgrounds** ```html
``` **Three-Column Grid (responsive)** ```html
``` - Gap: g-4 (1.5rem) - Breakpoint switches: col-md-6, col-lg-4, etc. **Two-Column Layout** ```html
``` - Gap: g-5 (3rem) - Alignment: align-items-center --- ### 6. LISTS & NUMBERED ITEMS **Expect List** ```html
1
Title

Description

``` **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
  • List item text
    • ``` --- ### 7. ICONS & BADGES **Lucide Icon Usage** ```html
    ``` **Activity Icon Badge** ```html
    ``` - 60px × 60px - Background: Accent color or variable - Border radius: 12px - Flex centering - Margin: 0 auto 20px **Badge Styles** ```html Label MOST POPULAR ``` --- ### 8. FORM ELEMENTS **Form Group** ```html
    ``` **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 ``` **Textarea** ```html ``` **Checkbox** ```html
    ``` --- ### 9. CTA (CALL-TO-ACTION) SECTIONS **Full-Width CTA Section** ```html

    Heading

    Description

    Primary CTA Secondary CTA
    ``` **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 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
    ``` --- ### 12. RESPONSIVE UTILITIES **Display Classes** ```html
    Hidden on mobile, visible on md+
    Visible on mobile, hidden on md+
    ``` **Flex Utilities** ```html
    ``` **Gap Classes** ```html
    Gap: 0.75rem
    Gap: 1.5rem
    Gap: 3rem
    ``` **Margin/Padding Classes** ```html
    Multiple margin/padding utilities
    Margin-start, padding-start
    ``` --- ### 13. BACKGROUND & COLOR UTILITIES **Background Colors** ```html
    White background
    Light cream background (#fdfaf7)
    Teal background
    Coral background
    10% opacity background
    50% opacity background
    ``` **Text Colors** ```html

    Teal text

    Coral text

    Gray text (#64748b)

    White text

    ``` **Opacity Classes** ```html
    50% opacity
    75% opacity
    90% opacity
    ``` --- ### 14. IMAGES & MEDIA **Responsive Images** ```html 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
    Image 1
    ``` --- ### 15. SPACING & SIZING **Section Padding** ```html
    ``` - `py-5`: Padding top + bottom = 3rem - `pt-5`: Padding top only - `px-4`: Padding left + right = 1.5rem **Container Width** ```html
    Full width with max-width: 1140px
    Max width: 42rem (672px), centered
    ``` **Height Classes** ```html
    100% height (h-100)
    ``` --- ## QUICK REFERENCE - COMMON PATTERNS ### 6-Column Grid Pattern ```html
    Column (25%/16.67%)
    Column (25%/16.67%)
    Column (25%/16.67%)
    ``` ### 3-Column Grid Pattern ```html
    Column (50%/33.33%)
    Column (50%/33.33%)
    Column (50%/33.33%)
    ``` ### 4-Column Grid Pattern ```html
    Column (50%/25%)
    ``` ### 2-Column Layout with Image ```html

    Content

    Description

    Image
    ``` --- ## 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.