# Private Academy Template

A premium, WCAG 2.1 AA accessible website template designed for private schools, academies, and educational institutions. Built with the RSL Framework.

## Preview

Open `index.html` in your browser to preview the template.

## Features

- **Fully Responsive** - Optimized for desktop, tablet, and mobile devices
- **WCAG 2.1 AA Accessible** - Skip links, ARIA landmarks, keyboard navigation, screen reader support
- **Dark Mode Support** - Complete light/dark theme switching
- **Modern Design** - Inspired by leading private school websites
- **Performance Optimized** - Minimal dependencies, optimized images

## Sections Included

- **Hero Section** - Full-width background with call-to-action buttons
- **Quick Stats Bar** - Key metrics (founding year, students, faculty ratio, campus size)
- **Grade Level Explorer** - Tabbed interface for Lower/Middle/Upper School
- **Educational Philosophy** - Three-pillar card layout
- **News & Events** - Featured news articles and upcoming events
- **Faculty Spotlight** - Video testimonial with quote
- **Campus Gallery** - Filterable image gallery
- **Call-to-Action Banner** - Conversion-focused section
- **Multi-Campus Footer** - Contact info for multiple campuses

## RSL Components Used

- Navbar with dropdowns
- Tabs
- Cards
- Modal
- Gallery
- Buttons
- Grid System
- Theme Toggle
- Accessibility Widget

## Customization

### Colors

The template uses custom colors defined in `private-academy-style.css`:

```css
:root {
    --academy-maroon: #8B1538;      /* Primary brand color */
    --academy-gold: #C4A035;         /* Accent color */
    --academy-forest: #2D5A3D;       /* Secondary (growth) */
    --academy-navy: #1E3A5F;         /* Secondary (trust) */
    --academy-cream: #F8F5F0;        /* Background */
}
```

### Typography

The template uses Google Fonts:
- **Headings**: Playfair Display (serif)
- **Body**: Inter (sans-serif)

### Content

Replace placeholder content with your own:
- Update text in `index.html`
- Replace image URLs with your own images
- Update contact information in footer
- Customize navigation links

### Images

For production use, replace Unsplash placeholder URLs with your own images:
- Hero background: 1920x1080px recommended
- Grade level images: 600x400px
- News thumbnails: 300x200px
- Gallery images: 400x300px
- Faculty photo: 600x400px

## Accessibility Features

This template follows WCAG 2.1 Level AA guidelines:

- **Skip Link** - Bypass navigation for keyboard users
- **ARIA Landmarks** - Proper semantic structure
- **Keyboard Navigation** - All interactive elements accessible via keyboard
- **Focus Indicators** - Visible focus states on all interactive elements
- **Color Contrast** - Meets 4.5:1 minimum ratio for text
- **Reduced Motion** - Respects `prefers-reduced-motion` preference
- **Screen Reader Support** - Proper heading hierarchy, alt text, ARIA labels

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Mobile Safari (iOS 14+)
- Chrome Mobile (Android 10+)

## File Structure

```
private-academy-template/
├── index.html                     # Main template file
├── private-academy-style.css      # Custom styles
├── private-academy-script.js      # Custom JavaScript
├── README.md                      # This file
├── LICENSE                        # MIT License
├── styles/                        # RSL CSS files
├── javascript/                    # RSL JavaScript files
└── images/                        # RSL images (logos, favicons)
```

## Credits

Built with [Responsive Slot Layout (RSL)](https://rslayout.com)

Design inspired by premium private school websites.

## License

MIT License - Free to use for personal and commercial projects.
