# Tantillo Restaurant Template

A bold, minimalist single-page restaurant template inspired by modern design trends. Features dramatic typography, animated marquee, and a sophisticated color palette.

## Preview

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

## Features

- **Bold Hero Section** - Dramatic "BITE ME" headline with animated marquee
- **Menu Showcase** - Beautiful card-based menu item display
- **Image Gallery** - 6-image grid with hover effects
- **Hours & Location** - Clear information section
- **Testimonials** - Customer reviews with star ratings
- **Reservation CTA** - Prominent booking call-to-action
- **Dark Mode Support** - Full light/dark theme toggle
- **Accessibility Widget** - Built-in accessibility features
- **Mobile Responsive** - Fully responsive design
- **WCAG 2.1 AA Compliant** - Skip links, semantic HTML, proper ARIA

## Pages Included

- `index.html` - Single-page restaurant website

## RSL Components Used

- **Navbar** - Fixed navigation with theme toggle
- **Grid System** - Responsive layouts throughout
- **Gallery** - Image gallery with lightbox potential
- **Testimonials** - Customer review cards
- **Star Rating** - Visual star ratings
- **Buttons** - CTA buttons
- **Cards** - Menu item cards
- **Accessibility Widget** - User accessibility controls

## Color Palette

```css
:root {
    --tantillo-charcoal: #1A1A1A;      /* Primary dark */
    --tantillo-terracotta: #C75B39;     /* Accent color */
    --tantillo-cream: #FAF7F2;          /* Background light */
    --tantillo-white: #FFFFFF;          /* Pure white */
    --tantillo-gray: #6B6B6B;           /* Text gray */
}
```

## Customization

### Colors

Override the CSS custom properties in `tantillo-style.css`:

```css
:root {
    --tantillo-terracotta: #your-accent-color;
    --tantillo-charcoal: #your-dark-color;
}
```

### Typography

The template uses Inter from Google Fonts. To change:

1. Update the Google Fonts link in `index.html`
2. Update `--tantillo-font-heading` and `--tantillo-font-body` in CSS

### Content

Replace placeholder content:
- Update restaurant name ("Tantillo")
- Replace menu items and prices
- Update hours and location
- Replace Unsplash images with your own
- Update contact information

### Images

Current images use Unsplash URLs. For production:
1. Download or create your own images
2. Place them in an `images/` folder
3. Update `src` attributes in HTML

## Installation

1. Extract the template folder
2. Open `index.html` in your browser
3. All dependencies are included locally

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## Accessibility

This template includes:
- Skip navigation link
- Semantic HTML5 elements
- ARIA labels and landmarks
- Keyboard navigation support
- Focus indicators
- Reduced motion support
- Color contrast compliant

## Credits

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

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

## License

MIT License - Free to use for personal and commercial projects
