# Sterling & Associates Law Firm Template

A professional, accessible law firm website template built with the RSL Framework. Designed to convey trust, authority, and expertise while meeting WCAG 2.1 AA accessibility standards.

## Preview

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

## Features

- **Professional Design**: Navy and gold color scheme conveying trust and prestige
- **Fully Responsive**: Optimized for desktop, tablet, and mobile devices
- **Dark Mode Support**: Complete dark theme with automatic theme persistence
- **WCAG 2.1 AA Compliant**: Skip links, proper heading hierarchy, ARIA labels, keyboard navigation
- **SEO Optimized**: Semantic HTML, meta descriptions, proper heading structure
- **Contact Form**: Ready-to-use consultation request form
- **Attorney Profiles**: Professional team member cards with hover effects
- **Practice Areas**: Six practice area cards with icons and descriptions
- **Testimonials**: Client testimonial section with star ratings
- **Trust Badges**: Animated counter statistics
- **Mobile Phone Button**: Sticky call button on mobile devices

## Sections Included

1. **Top Bar** - Contact info and phone number
2. **Navigation** - Sticky navbar with dropdown menus
3. **Hero Section** - Full-width with CTA buttons
4. **Trust Badges** - Animated statistics (30+ Years, 500+ Cases, etc.)
5. **Practice Areas** - 6 practice area cards (Corporate, Litigation, Criminal, Estate, Family, Injury)
6. **Our Attorneys** - 3 featured attorney cards
7. **Why Choose Us** - Features with image and badge
8. **Testimonials** - 3 client testimonial cards
9. **Contact Section** - Contact info + consultation form
10. **CTA Section** - Final call-to-action with background
11. **Footer** - Links, contact info, legal disclaimer

## RSL Components Used

- Grid Layout System (slot-layout)
- Navbar with Dropdowns
- Cards
- Buttons
- Form Elements
- Modern Theme (Dark Mode)
- Accessibility Widget
- Helper Classes

## Customization

### Colors

Update the CSS variables in `law-firm-style.css`:

```css
:root {
    /* Primary - Deep Navy */
    --law-navy: #1a2744;
    --law-navy-light: #2a3a5c;
    --law-navy-dark: #0f1829;

    /* Accent - Warm Gold */
    --law-gold: #c9a961;
    --law-gold-light: #d4ba7a;
    --law-gold-dark: #a88d4a;
}
```

### Typography

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

Update in the `<head>` section of `index.html` to change fonts.

### Content

Replace placeholder content with your firm's information:
- Update firm name in navbar and footer
- Replace attorney photos with actual team photos
- Update practice areas to match your services
- Modify contact information (address, phone, email)
- Add real testimonials from clients
- Update legal disclaimer text

### Images

All images use Unsplash CDN URLs. For production:
1. Download appropriate images or use your own
2. Place in the `images/` folder
3. Update `src` attributes in HTML

## Accessibility Features

- Skip to main content link
- Proper heading hierarchy (H1 → H2 → H3)
- ARIA labels on interactive elements
- Keyboard navigation support
- Focus indicators on all interactive elements
- Screen reader friendly testimonials
- State bar numbers for attorney verification
- Legal disclaimer in footer

## Legal Requirements Addressed

- **Attorney Advertising Disclaimer**: Footer contains required legal disclaimer
- **No Guarantee Statement**: "Past results do not guarantee future outcomes"
- **Privacy Policy Link**: Placeholder link in footer
- **State Bar Numbers**: Included on attorney cards

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Mobile browsers (iOS Safari, Chrome Mobile)

## Installation

1. Extract the template folder
2. Open `index.html` in your browser
3. All RSL dependencies are included - no build step required

## File Structure

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

## Credits

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

Images from [Unsplash](https://unsplash.com)

Icons from [Font Awesome](https://fontawesome.com)

Fonts from [Google Fonts](https://fonts.google.com)

## License

MIT License - Free to use for personal and commercial projects
