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 expo