Savoria — Technical Documentation

Version: 1.0  |  Pages: 6  |  Stack: HTML5 / CSS3 / Vanilla JS

1. File Structure

savoria-template/
├── index.html          Homepage
├── menu.html           Full menu page with tabs
├── about.html          About / team page
├── gallery.html        Gallery with lightbox
├── reservation.html    Table booking form
├── contact.html        Contact info + map
├── css/
│   └── style.css       All styles (design system + responsive)
├── js/
│   └── script.js       All JS (nav, slider, AOS, counter, lightbox)
└── docs/
    ├── index.html      This file (documentation)
    └── user-guide.html User guide

2. Dependencies (all via CDN — no install needed)

LibraryVersionPurpose
Swiper.js11Hero image slider
AOS2.3.4Scroll animations (fade-in on scroll)
Font Awesome6.5.1Icons
Google Fonts—Playfair Display (headings) + Lato (body)

3. CSS Design System

All tokens are in :root at the top of css/style.css.

Color Tokens

VariableDefaultRole
--primary#D4A853Brand gold — buttons, accents, hover states
--primary-dark#B8923FButton hover
--secondary#2C2C2CDark backgrounds, footer
--bg-primary#FFFDF8Page background (light mode)
--bg-secondary#FFF8EDAlternating section background
--text-primary#1A1A1AMain body text
--text-secondary#555555Paragraph text

Dark Mode

Add data-theme="dark" to the <html> tag or toggle it via JS. The theme toggle button in the header does this automatically.

Spacing Scale

VariableValue
--space-xs0.5rem
--space-sm1rem
--space-md1.5rem
--space-lg2rem
--space-xl3rem
--space-2xl5rem

4. Responsive Breakpoints

BreakpointBehaviour
max-width: 1024pxgrid-4 and grid-3 collapse to 2 columns
max-width: 768pxMobile nav activates, all grids go to 1 column, hero h1 reduces to 2rem
max-width: 480pxBase font 14px, hero h1 1.75rem, menu-card stacks vertically, specials 1 column
iOS Fix: background-attachment: fixed is disabled on the CTA section — it causes a black background on Safari/iOS. The background now uses scroll on all devices.

5. Grid System

The template uses simple CSS Grid utility classes:

<div class="grid grid-4">   4 equal columns (desktop)
<div class="grid grid-3">   3 equal columns
<div class="grid grid-2">   2 equal columns

All collapse to 1 column at 768px. Add gap via inline style or the gap-1/2/3 utilities.

6. JavaScript Modules (js/script.js)

FeatureHow it works
Sticky header + scroll classAdds .scrolled to .header after 50px scroll — changes background and link color
Mobile nav toggleHamburger button toggles .active on #nav-menu and #mobile-toggle
Hero sliderSwiper.js instance on .hero-slider, autoplay 5s, pagination dots
AOS scroll animationsInitialized globally; elements use data-aos="fade-up" attributes
Stat counterAnimates numbers in .stat-number using data-target attribute when scrolled into view
Gallery lightboxDynamically created modal; clicking .gallery-item opens full-size image
Dark mode toggleToggles data-theme="dark" on <html>; persists in localStorage
Reservation formClient-side validation + success modal on submit
Scroll-to-top buttonAppears after 300px scroll; smooth scrolls to top on click

7. Sections (index.html)

  1. Header — fixed nav with logo, links, theme toggle, reserve button
  2. Hero — full-screen Swiper slider with overlay text and CTA buttons
  3. Features — 4 cards: Fresh Ingredients, Expert Chefs, Fine Wines, 5-Star Service
  4. About Preview — 2-col image + text grid linking to about.html
  5. Chef's Specials — 3 food cards with overlay price labels
  6. Popular Dishes — 4 menu cards with thumbnail, price, allergen tags
  7. CTA / Reservation — parallax background section with booking button
  8. Testimonials — 3 review cards with star ratings
  9. Stats — animated counters (15 years, 50k customers, 120 dishes, 25 awards)
  10. Gallery Preview — 4 lightbox-enabled food/ambiance photos
  11. Newsletter — email subscription form
  12. Footer — 4 columns: brand, quick links, opening hours, contact

8. Responsiveness Fixes Applied (v1.0.1)