ELYSIAN SANCTUARY & BOTANICAL DAY SPA

ELYSIAN SANCTUARY & BOTANICAL DAY SPA - FULL PROJECT DESCRIPTION
PROJECT OVERVIEW
Elysian Sanctuary & Botanical Day Spa is a high-end, responsive web application engineered for an ultra-luxury day spa and holistic wellness center. The platform combines minimalist luxury aesthetics with ultra-fast page speeds, rich sensory interactivity, and a frictionless in-site booking system.

Location: /home/anujith/.gemini/antigravity/scratch/elysian-luxury-spa Live Server: http://localhost:8080

BRAND IDENTITY & DESIGN SYSTEM
• Aesthetic Philosophy: Serene, unhurried, minimalist luxury. Focuses on generous whitespace, delicate 1px borders, subtle image zoom effects, and soft micro-interactions without visual clutter. • Primary Colors (Earth & Deep Sage):

Deep Sanctuary Sage: #26382F
Midnight Forest: #192721
Moss Accent: #3E5347
Soft Botanical Mist: #EBF0EC • Accent Colors (Muted Gold & Warm Sand):
Muted Gold Leaf: #C8A97E
Champagne Highlight: #E2CFB4
Warm Bronze: #A6875B
Natural Sand: #EAE3D6 • Canvas Backgrounds (Cream & Off-White):
Warm Linen: #FAF7F2
Ivory Cream: #FDFBF7
Pure White: #FFFFFF • Typography Hierarchy:
Headings: Editorial Serif (Cormorant Garamond & Playfair Display)
Body & Numbers: Clean Sans-serif (Plus Jakarta Sans)
CORE ARCHITECTURE & FILE BREAKDOWN
• index.html: Semantic HTML5 document containing all sections, accessible dialog modals, and Schema.org DaySpa JSON-LD structured data. • css/styles.css: Custom luxury design tokens, glassmorphism utilities, micro-animations, wave visualizers, and printable voucher styles. • js/data.js: Centralized data repository storing treatments, therapists, reviews, press quotes, amenities, FAQs, and gift card themes for non-technical team updates. • js/booking.js: 6-step in-site luxury booking engine with live date/time slot computation and .ICS calendar export file generation. • js/soundscape.js: Native Web Audio API ambient audio synthesizer generating 432Hz Tibetan singing bowl tones and flowing stream pink noise in real-time. • js/quiz.js: 3-step interactive "Find Your Ritual" consultation quiz that matches guest energy states to specific treatments. • js/giftcard.js: Live real-time luxury gift voucher customizer with theme toggles, custom dollar amounts, and instant print styles. • js/app.js: Application controller managing category filters, live search, Grid vs. Editorial Price List switcher, multi-currency conversion, detail modals, and toast notifications.

POINT-BY-POINT FEATURE BREAKDOWN
Sticky Frosted Header & Multi-Currency Engine • Frosted glass backdrop (backdrop-blur-md bg-[#FAF7F2]/90) with subtle gold accent border. • Monogram logo and luxury brand typography. • Ambient soundscape quick-toggle with live animated audio wave indicator. • Multi-currency selector (USD $, EUR €, GBP £) with real-time price conversion across all catalog cards and modal windows. • High-visibility "Book Appointment" CTA button. • Responsive mobile drawer menu with smooth spring open/close animations.

Full-Width Visual Hero & Quick Availability Ribbon • High-impact visual hero featuring serene photography and warm ambient overlays. • Headline: "Where Stillness Meets Radiance" with sub-tagline. • Accolade trust badges: Condé Nast Traveler 2025 Winner, Forbes 5-Star Rating, 100% Certified Organic Botanicals, and UV Sterilized Suites. • Quick Availability Ribbon Bar: Interactive floating bar below the hero allowing guests to select a ritual category, arrival date, and guest count for rapid availability lookup.

Treatment & Pricing Catalog • Six Categorized Filter Tabs:

All Rituals (Full catalog view)

Signature Rituals (Flagship multi-hour journeys like 24K Gold & Sound Bath)

Massages & Bodywork (Himalayan stone, lymphatic flow, heated bamboo)

Botanical Facials (Rose quartz gua sha, 24K gold alchemy, bio-active enzyme peels)

Hydrotherapy & Thermal (Private Japanese cedar onsen, Nordic contrast grotto)

Express Enhancements (Scalp meridian elixir, bio-cellulose eye rescue) • Dual Layout View Switcher:

Visual Card Grid: Rich photography cards with duration badges, price tags, botanical highlights, and hover zoom.
Editorial Spa Menu / Price List: Clean linear layout optimized for rapid scanning. • Live Search Bar: Real-time client-side search filtering across service names, taglines, and botanical ingredients. • Direct Booking Triggers: Direct "Reserve Ritual" buttons pre-select that treatment in the booking modal. • Deep-Dive Detail Modal: In-depth popup displaying full ritual breakdown, therapeutic benefits, cold-pressed botanicals, contraindications, and guest ratings.
Interactive "Find Your Ritual" Consultation Quiz • 3-Step Adaptive Consultation Tool:
Step 1 (Intention): Deep Stress Relief, Radiant Glow, Muscle Recovery, Detoxification.
Step 2 (Energy State): Depleted/Fatigued, Overstimulated/Restless, Stiff/Compressed, Event-Ready.
Step 3 (Sensory Touch): Singing Bowl & Gold Oils, Himalayan Crystals, Rose Quartz & Enzymes, Cedar Onsen. • Dynamic animated progress tracking. • Personalized Recommendation Card displaying the matched ritual, rationale, and 1-click booking button.
Seamless Multi-Step In-Site Luxury Booking Engine • Simulates leading luxury booking platforms (Fresha / Mindbody / Calendly) without page redirects. • Step 1 (Service & Duration): Categorized treatment cards with duration and dynamic prices. • Step 2 (Master Practitioner): Select Elena Vance, Kai Chen, Dr. Maya Lin, Lucas Moreau, or "First Available Specialist". • Step 3 (Date & Time): Interactive date picker with Morning, Midday, Afternoon, and Twilight availability slots. • Step 4 (Sensory Aromatherapy & Add-Ons): Choose custom essential oil blend (Celestial Serenity, Alpine Clarity, Golden Radiance) + Thermal Suite Pass and Ceremonial Matcha pairings. • Step 5 (Guest Details & Preferences): Contact details, pressure preference (Light, Medium, Firm), and allergy/medical notes. • Step 6 (Instant Confirmation): Unique reservation code (ELY-XXXXXX), Add to Apple/Google Calendar (.ICS export file generation), and printable digital pass.

Ambient Sensory Soundscape Engine (Web Audio API) • Native browser audio synthesizer with zero external audio assets:

432Hz Harmonic Tibetan Singing Bowl: Pure sine synthesis with rich overtone series and decay.
Flowing Water Stream: Pink noise processed through a resonant low-pass biquad filter with slow LFO swell. • Interactive play/pause, volume attenuation, and animated waveform bars.
Interactive Luxury Gift Voucher Studio • Live real-time preview of the customized luxury gift certificate. • Preset amounts (
150
,
150,250,
385
S
i
g
n
a
t
u
r
e
R
i
t
u
a
l
,
385SignatureRitual,500) or custom dollar entry. • 3 Certificate Themes: Imperial Gold Leaf, Botanical Sage, and Cashmere Cream. • Live input synchronization for Recipient Name, Sender, Personal Message, and unique Voucher Code. • Print and export formatted stylesheet.

The Thermal Suite & Master Practitioners Showcase • Detailed exploration of the Hinoki Cedar Onsen, Eucalyptus Steam Grotto, Himalayan Salt Room, and Botanical Infusion Lounge. • Master Therapist biographies, certifications, years of experience, and specialty tags. • Press accolades from Vogue Wellness, Harper's Bazaar, and Elle Magazine. • Verified 5-star client review cards.

Sanctuary Etiquette, FAQs, Location & Newsletter • Interactive FAQ accordion covering arrival timing, robes/attire, hygiene, and cancellations. • Location details with address, hours of operation, concierge telephone, and directions. • Newsletter subscription form with instant 15% discount code toast reward (SANCTUARY15).

TECHNICAL & SEO SPECIFICATIONS

• Structured Data: Fully valid Schema.org DaySpa / LocalBusiness JSON-LD markup with geo coordinates, opening hours, pricing tier, telephone, and service catalog. • Performance: Ultra-fast load times, zero layout shifts (CLS = 0), optimized asset pipeline. • Accessibility: Semantic HTML5 structure, ARIA modal attributes, keyboard trap (ESC key handling). • Maintainability: Modular data architecture in js/data.js allows non-technical team members to update copy, prices, durations, and images without touching HTML markup.

HOW TO RUN LOCALLY