# Mesa de Frades Website

This document provides context and structural information about the codebase for **Mesa de Frades**, a traditional Portuguese Fado house and restaurant situated in an 18th-century chapel in Alfama, Lisbon.

## Tech Stack & Architecture

- **HTML5:** Semantic single-page HTML structure, generated visually via Webflow.
- **CSS3:** Custom styles managed via Webflow classes, bundled into a compiled CSS stylesheet (`mesadefrades.webflow.shared.*.css`).
- **JavaScript:**
  - Webflow runtime JS for built-in interactions, responsive navbars, and form handling behavior (`webflow.schunk.*.js`).
  - [Swiper.js](https://swiperjs.com/) (v11) initialized via an inline script for the custom carousels used in the "Voices" section.
  - [Bokun Widgets](https://www.bokun.io/) JS for the iframe-based booking/reservation system integration.
- **Fonts:** External Google Fonts integration (Montserrat, Bodoni Moda, Inter, Roboto Serif).
- **Analytics:** Google Analytics (`gtag.js`) integration active.

## File Structure

The project currently consists of a single primary file in the directory:
- `/index.html`: The main entry point containing all content, layout, and inline scripts.

## Structure of `index.html`

The site is designed as a sophisticated single-page application with smooth scrolling sections:

1. **Navigation (`.navbar-3.w-nav`)**: Fixed or relative header with a logo, main section links, language dropdown (EN/PT/FR/ES), and a "Book a Table" anchor link.
2. **Hero Section (`.hero`)**: Features a responsive video background showcasing Fado performances, a primary headline, and a call-to-action button.
3. **History (`.section.history`)**: Text-content segment detailing the rich history of "The Chapel" and "The Legend of D. Rosa". Styled with fade-in interactions triggered by scroll.
4. **Voices (`.section.voices`)**: Fado artists catalog showcasing two generations. Implemented using two distinct Swiper.js carousels:
    - `.swiper.is-new-generation`: Contemporary artists (e.g., Ana Margarida Prado).
    - `.swiper.is-legacy`: Legendary artists (e.g., Beatriz da Conceição, Amália's sister Celeste Rodrigues).
5. **Menu (`.section.menu`)**: Detailed restaurant menu including Couvert, Starters, Main Dishes, and Desserts, alongside distinct pricing tiers depending on drink harmony (60€, 70€, 80€).
6. **Booking Module (`.section.bookinng-moodule`)**: Pricing tier cards dynamically placed next to a Bokun widget iframe (`bokunWidget`) allowing real-time table reservations.
7. **Gallery & Instruments (`.section.gallery`)**: Image layouts showcasing the venue and significant historical instruments (e.g., Portuguese Guitar by Domingos Cerqueira, Viola Baixo from Joel Pina).
8. **Footer (`#footer.footer-test`)**: Contact information (address, phone, email), a functional contact form (`#email-form`), social media links, and copyright notices.

## Development Notes & Constraints for LLMs

- **CSS Classes:** Class names explicitly follow Webflow's generated utility and component naming patterns (e.g., `text-block-2`, `div-block-14`). Avoid arbitrarily altering HTML class names, as they are tightly coupled with the external Webflow CSS and JS chunks.
- **Animations & Interactions:** Elements frequently utilize Webflow Interactions (`data-w-id` attributes paired with `w-mod-ix` class states) and inline transform/opacity styles applied dynamically by JavaScript. If adding new elements that should animate identically, you must emulate these attributes or reconfigure the interaction scripts.
- **Swiper Integration:** The two `.swiper` instances are initialized at the bottom of the HTML using an inline `<script>`. If modifying the slides (`.swiper-slide`), ensure the DOM hierarchy within `.swiper-wrapper` remains intact to prevent the Swiper instance from malfunctioning.
- **Form Submission:** The contact form is a native Webflow setup. Because this is an exported site, native Webflow form submissions will not function unassisted. Any custom modification (e.g., sending emails) requires overriding the form action with a service like Formspree, EmailJS, or writing a custom form handler.