Beauty Parlor Wellness Studio
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"> <title>LUMIΓRE β Beauty & Wellness Studio</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,700;1,6..96,400;1,6..96,500;1,6..96,700&family=Jost:ital,wght@0,200;0,300;0,400;0,500;1,300;1,400&display=swap" rel="stylesheet"> </head> <body> <!-- Petal Canvas --> <canvas id="petalCanvas" aria-hidden="true"></canvas> <!-- Custom Cursor --> <div class="cur" id="cur"></div> <div class="cur-ring" id="curRing"></div> <!-- βββββββββββ NAVBAR βββββββββββ --> <nav class="nav" id="nav"> <a href="#" class="nav-logo">LUMIΓRE<span>.</span></a> <ul class="nav-links"> <li><a href="#services">Services</a></li> <li><a href="#treatments">Treatments</a></li> <li><a href="#stylists">Our Team</a></li> <li><a href="#gallery">Gallery</a></li> <li><a href="#booking">Book Now</a></li> </ul> <div class="nav-r"> <a href="tel:+12124560199" class="nav-tel">+1 (212) 456-0199</a> <a href="#booking" class="nav-book"> Book Appointment <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg> </a> </div> <button class="ham" id="ham" aria-label="Menu"><span></span><span></span><span></span></button> </nav> <div class="mob" id="mob"> <a href="#services">Services</a> <a href="#treatments">Treatments</a> <a href="#stylists">Our Team</a> <a href="#gallery">Gallery</a> <a href="#booking">Book Now</a> <a href="#booking" class="mob-book">Book Appointment</a> </div> <!-- βββββββββββ HERO βββββββββββ --> <section class="hero" id="top"> <div class="hero-ghost" aria-hidden="true">L</div> <!-- Left editorial content --> <div class="hero-left"> <div class="hero-eyebrow">Established 2012 Β· New York</div> <h1 class="hero-title"> Reveal Your <span class="italic-rose">True</span> <span class="thin">Radiance.</span> </h1> <div class="hero-divider"> <span class="hdiv-line"></span> <span class="hdiv-icon">β§</span> <span class="hdiv-line"></span> </div> <p class="hero-desc">Where science meets artistry. LumiΓ¨re is a sanctuary for modern women β a space to restore, renew, and emerge as the most luminous version of yourself.</p> <div class="hero-acts"> <a href="#booking" class="btn-rose"> Book Appointment <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg> </a> <a href="#services" class="btn-outline-rose">Explore Services</a> </div> <div class="hero-stats"> <div class="hstat"><div class="hstat-n" data-target="8000">0</div><div class="hstat-l">Happy Clients</div></div> <div class="hstat"><div class="hstat-n" data-target="12">0</div><div class="hstat-l">Years Open</div></div> <div class="hstat"><div class="hstat-n" data-target="24">0</div><div class="hstat-l">Expert Stylists</div></div> <div class="hstat"><div class="hstat-n">4.9<span style="font-size:.55em;color:var(--muted)">β </span></div><div class="hstat-l">Average Rating</div></div> </div> </div> <!-- Right photo panel --> <div class="hero-right"> <div class="hero-main-photo"> <img src="https://images.unsplash.com/photo-1560066984-138dadb4c035?w=1000&q=88" alt="LumiΓ¨re Beauty Studio"> </div> <div class="hero-float-card"> <div class="fc-label">Today's Special</div> <div class="fc-val">Hydra-Glow Facial<br>+ Brow Design</div> <div class="fc-sub">From $89 Β· 90 min session</div> </div> <div class="hero-badge"> <div class="badge-n">30%</div> <div class="badge-l">First Visit<br>Discount</div> </div> </div> <div class="hero-scroll"><div class="scroll-dot"></div><span class="scroll-lbl">Discover</span></div> </section> <!-- βββββββββββ TICKER βββββββββββ --> <div class="ticker" aria-hidden="true"> <div class="tk-track"> <span class="tk-item">Facial Treatments</span> <span class="tk-item">Nail Artistry</span> <span class="tk-item">Brow & Lash Design</span> <span class="tk-item">Hair Colour</span> <span class="tk-item">Bridal Packages</span> <span class="tk-item">Body Wraps</span> <span class="tk-item">Keratin Therapy</span> <span class="tk-item">Microdermabrasion</span> <span class="tk-item">Facial Treatments</span> <span class="tk-item">Nail Artistry</span> <span class="tk-item">Brow & Lash Design</span> <span class="tk-item">Hair Colour</span> <span class="tk-item">Bridal Packages</span> <span class="tk-item">Body Wraps</span> <span class="tk-item">Keratin Therapy</span> <span class="tk-item">Microdermabrasion</span> </div> </div> <!-- βββββββββββ SERVICES βββββββββββ --> <section class="sec sec-white" id="services"> <div class="sh"> <div class="sh-row"> <div class="reveal"><div class="eyebrow">What We Offer</div><h2 class="stitle">Our <em>Services</em></h2></div> <a href="#" class="lnk reveal">All Services <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></a> </div> </div> <div class="services-grid"> <div class="svc-card reveal"><div class="svc-icon">?ββοΈ</div><div class="svc-name">Facial & Skin Care</div><div class="svc-desc">Custom facials, chemical peels, and deep-hydration treatments tailored to your skin's unique needs.</div><div class="svc-foot"><span class="svc-price">From $65</span><span class="svc-dur">45β90 min</span></div></div> <div class="svc-card reveal" style="transition-delay:.08s"><div class="svc-icon">?</div><div class="svc-name">Nail Artistry</div><div class="svc-desc">Gel, acrylic, and nail art by our certified technicians. BIAB, chrome, and bespoke designs available.</div><div class="svc-foot"><span class="svc-price">From $45</span><span class="svc-dur">45β75 min</span></div></div> <div class="svc-card reveal" style="transition-delay:.14s"><div class="svc-icon">β¨</div><div class="svc-name">Brow & Lash</div><div class="svc-desc">Threading, waxing, tinting, and lamination for brows. Classic, hybrid, and volume lash sets.</div><div class="svc-foot"><span class="svc-price">From $35</span><span class="svc-dur">30β60 min</span></div></div> <div class="svc-card reveal" style="transition-delay:.2s"><div class="svc-icon">?</div><div class="svc-name">Hair Colour</div><div class="svc-desc">Balayage, highlights, colour corrections, and toning by master colourists. Olaplex treatments included.</div><div class="svc-foot"><span class="svc-price">From $95</span><span class="svc-dur">90β180 min</span></div></div> <div class="svc-card reveal" style="transition-delay:.26s"><div class="svc-icon">?</div><div class="svc-name">Bridal Packages</div><div class="svc-desc">A complete bridal journey β from trial to wedding day, with a dedicated stylist and full glam team.</div><div class="svc-foot"><span class="svc-price">From $280</span><span class="svc-dur">3β5 hours</span></div></div> <div class="svc-card reveal" style="transition-delay:.32s"><div class="svc-icon">?οΈ</div><div class="svc-name">Body & Wellness</div><div class="svc-desc">Body wraps, exfoliation rituals, and massage therapies to restore, relax, and completely renew.</div><div class="svc-foot"><span class="svc-price">From $80</span><span class="svc-dur">60β90 min</span></div></div> </div> </section> <!-- βββββββββββ ABOUT βββββββββββ --> <div class="about-grid" id="about"> <div class="about-photos reveal-left"> <img src="https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?w=900&q=85" alt="LumiΓ¨re studio"> <div class="about-stat"><div class="as-n">8,000+</div><div class="as-l">Transformations</div></div> </div> <div class="about-text"> <div class="reveal"> <div class="eyebrow">Our Story</div> <h2 class="stitle">Beauty <em>Elevated</em></h2> </div> <p class="about-p reveal" style="transition-delay:.1s">Founded in 2012 by aesthetician Sofia Elaine, LumiΓ¨re was built on a belief that every woman deserves to feel extraordinary. Not occasionally β every single day.</p> <p class="about-p reveal" style="transition-delay:.15s">We combine advanced skincare science with the gentle, unhurried luxury of old-world beauty. Our studio in the heart of Manhattan's West Village is a sanctuary from the moment you step through the door.</p> <div class="about-vals reveal" style="transition-delay:.2s"> <div class="aval"><div class="aval-dot">β¦</div>Certified master aestheticians & colourists</div> <div class="aval"><div class="aval-dot">β¦</div>Only clean, cruelty-free product lines</div> <div class="aval"><div class="aval-dot">β¦</div>Fully personalised consultation, every visit</div> <div class="aval"><div class="aval-dot">β¦</div>Complimentary champagne & refreshments</div> </div> <a href="#booking" class="about-cta reveal" style="transition-delay:.28s"> Book Your Visit <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg> </a> </div> </div> <!-- βββββββββββ TREATMENTS βββββββββββ --> <section class="sec sec-ivory2" id="treatments"> <div class="sh"> <div class="sh-row"> <div class="reveal"><div class="eyebrow">Signature Experiences</div><h2 class="stitle">Our <em>Treatments</em></h2></div> <a href="#" class="lnk reveal">Full Menu <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></a> </div> </div> <div class="treat-tabs reveal" id="treatTabs"> <button class="t-tab on">Skin</button> <button class="t-tab">Hair</button> <button class="t-tab">Nails</button> <button class="t-tab">Brows & Lash</button> <button class="t-tab">Body</button> </div> <div class="treat-scroller reveal" id="treatScr"> <div class="treat-card"> <div class="tc-img"><img src="https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?w=500&q=85" alt="Hydra-Glow"><div class="tc-badge pop">Most Popular</div></div> <div class="tc-body"><div class="tc-cat">Facial</div><div class="tc-name">Hydra-Glow Vitamin C Facial</div><div class="tc-desc">Vitamin C infusion, hyaluronic acid layering, and LED light therapy to instantly illuminate and deeply hydrate.</div><div class="tc-foot"><span class="tc-price">$115</span><span class="tc-dur">60 min</span></div></div> </div> <div class="treat-card"> <div class="tc-img"><img src="https://images.unsplash.com/photo-1616394584738-fc6e612e71b9?w=500&q=85" alt="Silk Lash"><div class="tc-badge new">New</div></div> <div class="tc-body"><div class="tc-cat">Lash</div><div class="tc-name">Russian Volume Lash Set</div><div class="tc-desc">Ultra-fine fans, hand-crafted in salon for the most dramatic, featherweight volume lash set available.</div><div class="tc-foot"><span class="tc-price">$145</span><span class="tc-dur">90 min</span></div></div> </div> <div class="treat-card"> <div class="tc-img"><img src="https://images.unsplash.com/photo-1604654894610-df63bc536371?w=500&q=85" alt="Balayage"></div> <div class="tc-body"><div class="tc-cat">Hair</div><div class="tc-name">Signature Balayage</div><div class="tc-desc">Hand-painted babylights and balayage, blended seamlessly for the most natural, sun-kissed effect.</div><div class="tc-foot"><span class="tc-price">$195</span><span class="tc-dur">150 min</span></div></div> </div> <div class="treat-card"> <div class="tc-img"><img src="https://images.unsplash.com/photo-1604654894610-df63bc536371?w=500&q=85" alt="Nail Art"><div class="tc-badge pop">5β Rated</div></div> <div class="tc-body"><div class="tc-cat">Nails</div><div class="tc-name">Bespoke Nail Art Set</div><div class="tc-desc">Full gel extension with fully custom hand-painted artwork, chrome, foils, or 3D designs. No two alike.</div><div class="tc-foot"><span class="tc-price">$85</span><span class="tc-dur">90 min</span></div></div> </div> <div class="treat-card"> <div class="tc-img"><img src="https://images.unsplash.com/photo-1515377905703-c4788e51af15?w=500&q=85" alt="Rose Wrap"></div> <div class="tc-body"><div class="tc-cat">Body</div><div class="tc-name">Rose & Jasmine Body Ritual</div><div class="tc-desc">Full-body dry brushing, rose petal exfoliation, and jasmine oil wrap for skin so soft you won't believe it.</div><div class="tc-foot"><span class="tc-price">$155</span><span class="tc-dur">90 min</span></div></div> </div> </div> <div class="scr-row reveal"> <button class="scr-btn" id="tLeft"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M7 16l-4-4m0 0l4-4m-4 4h18"/></svg></button> <button class="scr-btn" id="tRight"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></button> </div> </section> <!-- βββββββββββ STYLISTS βββββββββββ --> <section class="sec sec-white" id="stylists"> <div class="sh"> <div class="sh-row"> <div class="reveal"><div class="eyebrow">Meet The Team</div><h2 class="stitle">Our <em>Specialists</em></h2></div> <a href="#" class="lnk reveal">Full Team <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></a> </div> </div> <div class="stylists-scroller reveal" id="stylScr"> <div class="stylist-card"><div class="stylist-img"><img src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?w=300&q=80" alt="Sofia"></div><div class="stylist-name">Sofia Elaine</div><div class="stylist-role">Founder Β· Master Aesthetician</div><div class="stylist-spec">Skin & Advanced Treatments</div></div> <div class="stylist-card"><div class="stylist-img"><img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=300&q=80" alt="Chloe"></div><div class="stylist-name">Chloe Bennett</div><div class="stylist-role">Senior Colourist</div><div class="stylist-spec">Balayage & Colour Correction</div></div> <div class="stylist-card"><div class="stylist-img"><img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=300&q=80" alt="Amara"></div><div class="stylist-name">Amara Diallo</div><div class="stylist-role">Lash & Brow Specialist</div><div class="stylist-spec">Volume Lash & Lamination</div></div> <div class="stylist-card"><div class="stylist-img"><img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=300&q=80" alt="Isabelle"></div><div class="stylist-name">Isabelle Voss</div><div class="stylist-role">Nail Technician</div><div class="stylist-spec">Nail Art & BIAB Specialist</div></div> <div class="stylist-card"><div class="stylist-img"><img src="https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=300&q=80" alt="Maya"></div><div class="stylist-name">Maya Chen</div><div class="stylist-role">Bridal Lead Stylist</div><div class="stylist-spec">Bridal Hair & Full Glam</div></div> <div class="stylist-card"><div class="stylist-img"><img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?w=300&q=80" alt="Priya"></div><div class="stylist-name">Priya Sharma</div><div class="stylist-role">Wellness Therapist</div><div class="stylist-spec">Body Rituals & Massage</div></div> </div> <div class="scr-row reveal"> <button class="scr-btn" id="sLeft"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M7 16l-4-4m0 0l4-4m-4 4h18"/></svg></button> <button class="scr-btn" id="sRight"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></button> </div> </section> <!-- βββββββββββ GALLERY βββββββββββ --> <section class="sec sec-ivory2" id="gallery"> <div class="sh"><div class="sh-row"><div class="reveal"><div class="eyebrow">Our Studio & Work</div><h2 class="stitle">The <em>Gallery</em></h2></div><a href="#" class="lnk reveal">View All <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></a></div></div> <div class="gallery-grid reveal"> <div class="g-cell"><img src="https://images.unsplash.com/photo-1521590832167-7bcbfaa6381f?w=800&q=85" alt="Studio"><div class="g-hover"><div class="g-icon"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"/></svg></div></div></div> <div class="g-cell"><img src="https://images.unsplash.com/photo-1487412947147-5cebf100d8e2?w=500&q=85" alt="Makeup"><div class="g-hover"><div class="g-icon"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"/></svg></div></div></div> <div class="g-cell"><img src="https://images.unsplash.com/photo-1519415943484-9fa1873496d4?w=500&q=85" alt="Nails"><div class="g-hover"><div class="g-icon"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"/></svg></div></div></div> <div class="g-cell"><img src="https://images.unsplash.com/photo-1562322140-8baeececf3df?w=800&q=85" alt="Hair"><div class="g-hover"><div class="g-icon"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"/></svg></div></div></div> <div class="g-cell"><img src="https://images.unsplash.com/photo-1540555700478-4be289fbecef?w=500&q=85" alt="Skincare"><div class="g-hover"><div class="g-icon"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"/></svg></div></div></div> </div> </section> <!-- βββββββββββ TESTIMONIALS βββββββββββ --> <section class="sec sec-blush"> <div class="sh"><div class="sh-row"><div class="reveal"><div class="eyebrow">Client Love</div><h2 class="stitle">What They <em>Say</em></h2></div><a href="#" class="lnk reveal">All Reviews <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></a></div></div> <div class="testi-grid"> <div class="testi-card reveal"><div class="t-stars"><span>β </span><span>β </span><span>β </span><span>β </span><span>β </span></div><p class="t-quote">"Sofia completely transformed my skin in three sessions. My friends keep asking what I'm doing differently β the answer is LumiΓ¨re."</p><div class="t-auth"><div class="t-av"><img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=80&q=80" alt=""></div><div><div class="t-name">Rachel P.</div><div class="t-svc">Hydra-Glow Facial Β· Regular Client</div></div></div></div> <div class="testi-card reveal" style="transition-delay:.08s"><div class="t-stars"><span>β </span><span>β </span><span>β </span><span>β </span><span>β </span></div><p class="t-quote">"Chloe did the most breathtaking balayage I've ever had. I drove three hours for this appointment and I would do it again every time."</p><div class="t-auth"><div class="t-av"><img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=80&q=80" alt=""></div><div><div class="t-name">Jessica L.</div><div class="t-svc">Signature Balayage</div></div></div></div> <div class="testi-card reveal" style="transition-delay:.14s"><div class="t-stars"><span>β </span><span>β </span><span>β </span><span>β </span><span>β </span></div><p class="t-quote">"The bridal package was worth every single penny. I had a dedicated team and felt completely taken care of. My lashes were absolute perfection."</p><div class="t-auth"><div class="t-av"><img src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?w=80&q=80" alt=""></div><div><div class="t-name">Amelia T.</div><div class="t-svc">Bridal Glam Package</div></div></div></div> <div class="testi-card reveal" style="transition-delay:.2s"><div class="t-stars"><span>β </span><span>β </span><span>β </span><span>β </span><span>β </span></div><p class="t-quote">"I've been coming to LumiΓ¨re for 4 years. They know my skin better than I do. Every visit feels like a treat and my skin has never looked better."</p><div class="t-auth"><div class="t-av"><img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=80&q=80" alt=""></div><div><div class="t-name">Priya K.</div><div class="t-svc">Monthly Skin Member</div></div></div></div> </div> </section> <!-- βββββββββββ SHOP STRIP βββββββββββ --> <section class="sec sec-white"> <div class="sh"><div class="sh-row"><div class="reveal"><div class="eyebrow">Take It Home</div><h2 class="stitle">Shop <em>Products</em></h2></div><a href="#" class="lnk reveal">Visit Shop <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></a></div></div> <div class="prod-scroller reveal" id="prodScr"> <div class="prod-card"><div class="prod-img"><img src="https://images.unsplash.com/photo-1598440947619-2c35fc9aa908?w=400&q=80" alt="Serum"><div class="prod-tag">Best Seller</div></div><div class="prod-name">Vitamin C Brightening Serum</div><div class="prod-brand">La Mer Β· 30ml</div><div class="prod-price">$78</div></div> <div class="prod-card"><div class="prod-img"><img src="https://images.unsplash.com/photo-1556228720-195a672e8a03?w=400&q=80" alt="Moisturiser"></div><div class="prod-name">Rose Hydra-Plump Cream</div><div class="prod-brand">Tatcha Β· 50ml</div><div class="prod-price">$68</div></div> <div class="prod-card"><div class="prod-img"><img src="https://images.unsplash.com/photo-1571781926291-c477ebfd024b?w=400&q=80" alt="Oil"><div class="prod-tag">New In</div></div><div class="prod-name">Midnight Repair Facial Oil</div><div class="prod-brand">Drunk Elephant Β· 15ml</div><div class="prod-price">$55</div></div> <div class="prod-card"><div class="prod-img"><img src="https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?w=400&q=80" alt="Mask"></div><div class="prod-name">Pink Clay Detox Mask</div><div class="prod-brand">Summer Fridays Β· 60ml</div><div class="prod-price">$42</div></div> <div class="prod-card"><div class="prod-img"><img src="https://images.unsplash.com/photo-1616394584738-fc6e612e71b9?w=400&q=80" alt="SPF"><div class="prod-tag">Staff Pick</div></div><div class="prod-name">Invisible SPF 50+ Fluid</div><div class="prod-brand">Supergoop! Β· 30ml</div><div class="prod-price">$38</div></div> </div> <div class="scr-row reveal"> <button class="scr-btn" id="pLeft"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M7 16l-4-4m0 0l4-4m-4 4h18"/></svg></button> <button class="scr-btn" id="pRight"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></button> </div> </section> <!-- βββββββββββ BOOKING βββββββββββ --> <section class="booking-section" id="booking"> <!-- Botanical SVG bg --> <div class="book-bg" aria-hidden="true"> <svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice"> <defs><style>.petal{fill:none;stroke:rgba(200,123,114,.6);stroke-width:.5}</style></defs> <ellipse class="petal" cx="120" cy="80" rx="60" ry="30" transform="rotate(-30 120 80)"/> <ellipse class="petal" cx="120" cy="80" rx="60" ry="30" transform="rotate(30 120 80)"/> <ellipse class="petal" cx="120" cy="80" rx="60" ry="30" transform="rotate(90 120 80)"/> <ellipse class="petal" cx="680" cy="450" rx="80" ry="35" transform="rotate(45 680 450)"/> <ellipse class="petal" cx="680" cy="450" rx="80" ry="35" transform="rotate(-45 680 450)"/> <ellipse class="petal" cx="680" cy="450" rx="80" ry="35" transform="rotate(135 680 450)"/> <circle class="petal" cx="400" cy="300" r="180"/> <circle class="petal" cx="400" cy="300" r="120"/> </svg> </div> <div class="book-inner"> <div class="book-left"> <div class="reveal"><div class="eyebrow">Reserve Your Visit</div></div> <h2 class="stitle reveal" style="font-size:clamp(2.2rem,4.5vw,3.8rem);color:var(--ivory);margin-bottom:1.4rem">Book Your <em style="color:var(--champagne)">Appointment</em></h2> <p class="book-desc reveal">We'd love to welcome you to LumiΓ¨re. Tell us what you're looking for and we'll match you with the perfect specialist.</p> <div class="book-perks reveal"> <div class="bperk">Complimentary consultation with every booking</div> <div class="bperk">Champagne on arrival for new clients</div> <div class="bperk">30% off your first visit β automatically applied</div> <div class="bperk">Free cancellation up to 24 hours before</div> </div> </div> <form class="book-form reveal" onsubmit="return false"> <div class="form-row"> <div class="fi"><label>First Name</label><input type="text" placeholder="Your name"></div> <div class="fi"><label>Last Name</label><input type="text" placeholder="Last name"></div> </div> <div class="form-row"> <div class="fi"><label>Email</label><input type="email" placeholder="your@email.com"></div> <div class="fi"><label>Phone</label><input type="tel" placeholder="+1 (212) 000-0000"></div> </div> <div class="fi"><label>Service</label> <select> <option>Select a service...</option> <option>Facial & Skin Treatment</option> <option>Hair Colour & Styling</option> <option>Nail Artistry</option> <option>Brow & Lash Design</option> <option>Bridal Package</option> <option>Body & Wellness Ritual</option> <option>Not sure β help me choose</option> </select> </div> <div class="form-row"> <div class="fi"><label>Preferred Date</label><input type="date"></div> <div class="fi"><label>Preferred Time</label> <select><option>9:00 AM</option><option>9:30 AM</option><option>10:00 AM</option><option>10:30 AM</option><option>11:00 AM</option><option>12:00 PM</option><option>1:00 PM</option><option>2:00 PM</option><option>3:00 PM</option><option>4:00 PM</option><option>5:00 PM</option><option>6:00 PM</option></select> </div> </div> <div class="fi"><label>Message / Special Requests</label><textarea rows="3" placeholder="Allergies, skin concerns, anything we should know..."></textarea></div> <button type="submit" class="book-submit"> Confirm Appointment <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg> </button> <p class="book-note">We confirm all bookings within 2 hours. Cancellations accepted up to 24 hours prior.</p> </form> </div> </section> <!-- βββββββββββ FOOTER βββββββββββ --> <footer> <div class="foot-top"> <div> <div class="foot-logo">LUMIΓRE<span>.</span></div> <div class="foot-tagline">Beauty & Wellness Studio, New York</div> <p class="foot-desc">A sanctuary of beauty, skin, and wellness in the heart of Manhattan's West Village.</p> <div class="foot-socs"> <div class="fsoc">in</div><div class="fsoc">ig</div><div class="fsoc">fb</div><div class="fsoc">pt</div> </div> </div> <div class="foot-col"><h5>Services</h5><ul><li><a href="#">Facials & Skin</a></li><li><a href="#">Hair Colour</a></li><li><a href="#">Nail Artistry</a></li><li><a href="#">Brow & Lash</a></li><li><a href="#">Bridal</a></li></ul></div> <div class="foot-col"><h5>Studio</h5><ul><li><a href="#">Our Team</a></li><li><a href="#">Membership</a></li><li><a href="#">Gift Cards</a></li><li><a href="#">Product Shop</a></li><li><a href="#">Press</a></li></ul></div> <div class="foot-col"><h5>Visit Us</h5><ul><li><a href="#">42 Hudson St, NYC</a></li><li><a href="#">TueβSat: 9AMβ8PM</a></li><li><a href="#">Sun: 10AMβ6PM</a></li><li><a href="#">+1 (212) 456-0199</a></li><li><a href="#">hello@lumiere.nyc</a></li></ul></div> </div> <div class="foot-bot"> <span class="foot-copy">Β© 2024 LumiΓ¨re Beauty Studio. Made with <em>β₯</em> in New York.</span> <div class="foot-legal"><a href="#">Privacy</a><a href="#">Terms</a><a href="#">Accessibility</a></div> </div> </footer> </body> </html>
CSS
/* ββββββββββββββββββββββββββββββββ RESET & TOKENS ββββββββββββββββββββββββββββββββ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --ivory: #faf7f2; --ivory2: #f5f0e8; --parchment:#ede5d8; --blush: #f0d8d0; --blush2: #e8c8bc; --rose: #c87b72; --rose2: #b5645c; --mauve: #a87878; --mauve2: #8c5c5c; --champagne:#d4b896; --champ2: #c4a07a; --bark: #3d2c2a; --bark2: #5a3e3a; --muted: #9c8480; --border: #e8ddd4; --border2: #d8ccc0; --white: #ffffff; --ease: cubic-bezier(.77,0,.175,1); --soft: cubic-bezier(.25,.46,.45,.94); --nh: 72px; } html{scroll-behavior:smooth;overflow-x:hidden} body{ font-family:'Jost',sans-serif; background:var(--ivory);color:var(--bark); -webkit-font-smoothing:antialiased;overflow-x:hidden; } img{display:block;max-width:100%} a{text-decoration:none;color:inherit} button{font-family:'Jost',sans-serif;cursor:pointer} /* ββββββββββββββββββββββββββββββββ FLOATING PETALS CANVAS ββββββββββββββββββββββββββββββββ */ #petalCanvas{ position:fixed;inset:0;z-index:0;pointer-events:none; opacity:.55; } /* ββββββββββββββββββββββββββββββββ CUSTOM CURSOR ββββββββββββββββββββββββββββββββ */ .cur{ position:fixed;width:8px;height:8px;border-radius:50%; background:var(--rose);z-index:9999;pointer-events:none; transform:translate(-50%,-50%); transition:width .3s,height .3s; mix-blend-mode:multiply; } .cur-ring{ position:fixed;width:32px;height:32px;border-radius:50%; border:1px solid rgba(200,123,114,.45);z-index:9998;pointer-events:none; transform:translate(-50%,-50%); transition:width .4s,height .4s,border-color .3s; } @media(hover:none){.cur,.cur-ring{display:none}body{cursor:auto}} /* ββββββββββββββββββββββββββββββββ NAVBAR ββββββββββββββββββββββββββββββββ */ .nav{ position:fixed;inset:0 0 auto;height:var(--nh);z-index:500; display:flex;align-items:center;justify-content:space-between; padding:0 clamp(1.25rem,4vw,4rem); transition:background .5s,box-shadow .5s; } .nav.frosted{ background:rgba(250,247,242,.92); backdrop-filter:blur(24px) saturate(1.5); box-shadow:0 1px 0 rgba(200,123,114,.12); } .nav-logo{ font-family:'Bodoni Moda',serif; font-size:clamp(1.3rem,2.5vw,1.6rem);font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--bark); } .nav-logo span{color:var(--rose);font-style:italic} .nav-links{display:flex;align-items:center;gap:clamp(.8rem,2vw,2.2rem);list-style:none} .nav-links a{ font-size:.72rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase; color:rgba(61,44,42,.45);transition:color .3s;position:relative; } .nav-links a::after{ content:'';position:absolute;bottom:-.3em;left:0;width:0;height:1px; background:var(--rose);transition:width .4s var(--ease); } .nav-links a:hover{color:var(--rose)} .nav-links a:hover::after{width:100%} .nav-r{display:flex;align-items:center;gap:1rem} .nav-tel{font-size:.7rem;font-weight:300;letter-spacing:.08em;color:var(--muted);transition:color .3s} .nav-tel:hover{color:var(--rose)} .nav-book{ display:inline-flex;align-items:center;gap:.5em; padding:.52em 1.5em; background:var(--rose);color:var(--white); font-size:.7rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase; border:none;transition:background .35s;white-space:nowrap; border-radius:100px; } .nav-book:hover{background:var(--rose2)} .nav-book svg{width:11px;height:11px} .ham{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:5px;z-index:510} .ham span{display:block;width:22px;height:1px;background:var(--bark);transition:transform .35s,opacity .35s} .ham.o span:nth-child(1){transform:translateY(6px) rotate(45deg)} .ham.o span:nth-child(2){opacity:0} .ham.o span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} .mob{ display:none;position:fixed;inset:0;top:var(--nh); background:rgba(250,247,242,.97);backdrop-filter:blur(28px);z-index:499; flex-direction:column;align-items:center;justify-content:center;gap:2rem; opacity:0;pointer-events:none;transition:opacity .4s; } .mob.o{opacity:1;pointer-events:all} .mob a{ font-family:'Bodoni Moda',serif;font-size:clamp(2rem,8vw,3rem); font-style:italic;font-weight:400;color:var(--bark);transition:color .3s; } .mob a:hover{color:var(--rose)} .mob-book{ margin-top:.5rem;padding:.7em 2.4em; background:var(--rose)!important;color:var(--white)!important; font-family:'Jost',sans-serif!important;font-style:normal!important; font-size:.78rem!important;font-weight:500!important;letter-spacing:.2em!important; text-transform:uppercase!important;border-radius:100px!important; } /* ββββββββββββββββββββββββββββββββ HERO ββββββββββββββββββββββββββββββββ */ .hero{ position:relative;width:100%;min-height:100svh; overflow:hidden;background:var(--ivory); display:grid;grid-template-columns:1fr 1fr; align-items:center; } /* Left editorial panel */ .hero-left{ position:relative;z-index:10; padding:calc(var(--nh) + 3rem) clamp(1.5rem,5vw,5rem) clamp(5rem,10vw,7rem) clamp(1.5rem,7vw,7rem); display:flex;flex-direction:column; min-height:100svh;justify-content:center; } /* Decorative large background letter */ .hero-ghost{ position:absolute;left:-2vw;top:50%;transform:translateY(-50%); font-family:'Bodoni Moda',serif; font-size:clamp(14rem,28vw,26rem); font-weight:700;font-style:italic; color:rgba(200,123,114,.04);line-height:1; pointer-events:none;z-index:0;white-space:nowrap; user-select:none; } .hero-eyebrow{ display:inline-flex;align-items:center;gap:.75em; font-size:.6rem;font-weight:400;letter-spacing:.36em;text-transform:uppercase; color:var(--rose);margin-bottom:1.2rem;position:relative;z-index:1; opacity:0;animation:hslide .6s var(--soft) .3s both; } .hero-eyebrow::before{content:'β§';font-size:.85em;opacity:.7} @keyframes hslide{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:translateX(0)}} .hero-title{ font-family:'Bodoni Moda',serif; font-size:clamp(3rem,7.5vw,7rem); font-weight:700;line-height:.92;letter-spacing:-.01em;color:var(--bark); position:relative;z-index:1; opacity:0;animation:hup .85s var(--ease) .45s both; } .hero-title .italic-rose{font-style:italic;color:var(--rose);display:block} .hero-title .thin{font-weight:400;font-style:italic;display:block;font-size:.72em;color:var(--mauve)} @keyframes hup{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}} .hero-divider{ display:flex;align-items:center;gap:1rem;margin:1.8rem 0; position:relative;z-index:1; opacity:0;animation:hup .6s ease .7s both; } .hdiv-line{flex:1;max-width:60px;height:1px;background:var(--rose);opacity:.4} .hdiv-icon{color:var(--rose);font-size:.75rem;opacity:.6} .hero-desc{ font-size:clamp(.9rem,1.4vw,1.02rem);font-weight:300;line-height:1.85; color:rgba(61,44,42,.55);max-width:420px; position:relative;z-index:1; opacity:0;animation:hup .65s ease .85s both; } .hero-acts{ display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.2rem; position:relative;z-index:1; opacity:0;animation:hup .6s ease 1s both; } /* Buttons */ .btn-rose{ display:inline-flex;align-items:center;gap:.65em; padding:.9em 2.2em;border-radius:100px; background:var(--rose);color:var(--white); font-size:.76rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase; border:none;position:relative;overflow:hidden;transition:background .35s,transform .2s; } .btn-rose:hover{background:var(--rose2);transform:translateY(-2px)} .btn-rose svg{width:13px;height:13px;transition:transform .3s} .btn-rose:hover svg{transform:translateX(3px)} .btn-outline-rose{ display:inline-flex;align-items:center;gap:.65em; padding:.88em 2em;border-radius:100px; border:1.5px solid var(--rose);color:var(--rose);background:transparent; font-size:.76rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase; transition:background .35s,color .35s,transform .2s; } .btn-outline-rose:hover{background:var(--rose);color:var(--white);transform:translateY(-2px)} /* Stats */ .hero-stats{ display:flex;gap:clamp(1.2rem,3vw,2.5rem);margin-top:2.8rem; padding-top:2rem;border-top:1px solid var(--border); position:relative;z-index:1; opacity:0;animation:hup .6s ease 1.15s both; } .hstat{display:flex;flex-direction:column;gap:.22rem} .hstat-n{ font-family:'Bodoni Moda',serif; font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;color:var(--rose);line-height:1; } .hstat-l{font-size:.6rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)} /* Right photo collage */ .hero-right{ position:relative;height:100svh;min-height:600px;overflow:hidden; opacity:0;animation:hright 1s ease .35s both; } @keyframes hright{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}} .hero-main-photo{ position:absolute;inset:0; background:var(--blush); } .hero-main-photo img{ width:100%;height:100%;object-fit:cover;object-position:center top; filter:brightness(.96) saturate(1.05); animation:photoZoom 16s ease-out both; } @keyframes photoZoom{from{transform:scale(1.08)}to{transform:scale(1)}} /* Warm vignette overlay */ .hero-main-photo::after{ content:'';position:absolute;inset:0; background: linear-gradient(to left,rgba(250,247,242,1) 0%,transparent 22%), linear-gradient(to top,rgba(250,247,242,.5) 0%,transparent 30%), radial-gradient(ellipse at 60% 40%,transparent 40%,rgba(250,247,242,.2) 100%); } /* Floating info card */ .hero-float-card{ position:absolute;bottom:clamp(9rem,18vw,13rem);left:-1.5rem;z-index:10; background:var(--white); border:1px solid var(--border); box-shadow:0 20px 60px rgba(61,44,42,.1); padding:1.3rem 1.6rem; border-radius:2px; opacity:0;animation:cardPop .7s var(--ease) 1.2s both; } @keyframes cardPop{from{opacity:0;transform:translateX(-20px) scale(.95)}to{opacity:1;transform:translateX(0) scale(1)}} .fc-label{font-size:.56rem;font-weight:400;letter-spacing:.28em;text-transform:uppercase;color:var(--rose);margin-bottom:.35rem} .fc-val{font-family:'Bodoni Moda',serif;font-size:1rem;font-style:italic;font-weight:400;color:var(--bark);line-height:1.3} .fc-sub{font-size:.68rem;font-weight:300;color:var(--muted);margin-top:.2rem} /* Badge */ .hero-badge{ position:absolute;top:clamp(5.5rem,12vw,9rem);right:2rem;z-index:10; width:clamp(80px,10vw,100px);height:clamp(80px,10vw,100px); border-radius:50%; background:var(--rose);color:var(--white); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem; text-align:center;padding:.8rem; box-shadow:0 8px 32px rgba(200,123,114,.35); animation:badgeSpin .8s var(--ease) 1.4s both; } @keyframes badgeSpin{from{opacity:0;transform:scale(.5) rotate(-25deg)}to{opacity:1;transform:scale(1) rotate(0)}} .badge-n{font-family:'Bodoni Moda',serif;font-size:clamp(1.4rem,2.5vw,1.8rem);font-weight:700;line-height:1} .badge-l{font-size:.48rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;opacity:.8} /* Scroll indicator */ .hero-scroll{ position:absolute;bottom:2rem;left:50%;transform:translateX(-50%); z-index:20;display:flex;flex-direction:column;align-items:center;gap:.6rem; opacity:0;animation:hup .5s ease 1.7s both; } .scroll-dot{ width:1px;height:44px; background:linear-gradient(to bottom,transparent,var(--rose)); animation:scrollDot 2.2s ease-in-out infinite; } @keyframes scrollDot{0%,100%{opacity:.3;transform:scaleY(.4)}50%{opacity:1;transform:scaleY(1)}} .scroll-lbl{font-size:.5rem;font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)} /* ββββββββββββββββββββββββββββββββ MARQUEE TICKER ββββββββββββββββββββββββββββββββ */ .ticker{overflow:hidden;white-space:nowrap;padding:.65rem 0;background:var(--rose);position:relative;z-index:2} .tk-track{display:inline-flex;animation:tkScroll 25s linear infinite} @keyframes tkScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} .tk-item{ font-family:'Bodoni Moda',serif; font-size:clamp(.88rem,1.5vw,1rem);font-style:italic;font-weight:400; color:rgba(255,255,255,.85);padding:0 3rem; display:inline-flex;align-items:center;gap:2.5rem; } .tk-item::after{content:'βΏ';font-style:normal;font-size:.5em;opacity:.6} /* ββββββββββββββββββββββββββββββββ SECTION COMMON ββββββββββββββββββββββββββββββββ */ .sec{padding:clamp(4.5rem,9vw,8rem) clamp(1.25rem,5vw,5.5rem);position:relative;z-index:1} .sec-ivory2{background:var(--ivory2)} .sec-parchment{background:var(--parchment)} .sec-blush{background:var(--blush)} .sec-white{background:var(--white)} .sec-bark{background:var(--bark)} .sh{margin-bottom:clamp(3rem,5vw,5rem)} .sh-row{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:1rem} .eyebrow{ display:inline-flex;align-items:center;gap:.65em; font-size:.6rem;font-weight:400;letter-spacing:.34em;text-transform:uppercase; color:var(--rose);margin-bottom:.55rem; } .eyebrow::before{content:'β¦';font-size:.55em;opacity:.7} .stitle{ font-family:'Bodoni Moda',serif; font-size:clamp(2rem,4.5vw,3.8rem);font-weight:400;line-height:1.1;color:var(--bark); } .stitle em{font-style:italic;color:var(--rose)} .sec-bark .stitle{color:var(--ivory)} .sec-bark .eyebrow{color:var(--champagne)} .lnk{ display:flex;align-items:center;gap:.5em;white-space:nowrap; font-size:.68rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase; color:var(--rose);transition:gap .35s; } .lnk:hover{gap:.9em} .lnk svg{width:12px;height:12px} /* ββββββββββββββββββββββββββββββββ SERVICES GRID ββββββββββββββββββββββββββββββββ */ .services-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr)); gap:1.5rem; } .svc-card{ background:var(--white);border:1px solid var(--border); padding:clamp(1.8rem,3.5vw,2.5rem) clamp(1.5rem,3vw,2rem); display:flex;flex-direction:column;gap:.85rem; position:relative;overflow:hidden;cursor:pointer; transition:border-color .4s,transform .4s,box-shadow .4s; } .svc-card::before{ content:'';position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(to right,var(--rose),var(--champagne)); transform:scaleX(0);transform-origin:left; transition:transform .5s var(--ease); } .svc-card:hover{ border-color:rgba(200,123,114,.3); transform:translateY(-5px); box-shadow:0 24px 64px rgba(61,44,42,.08); } .svc-card:hover::before{transform:scaleX(1)} .svc-icon{font-size:1.8rem;line-height:1;transition:transform .35s} .svc-card:hover .svc-icon{transform:scale(1.15) rotate(-5deg)} .svc-name{ font-family:'Bodoni Moda',serif;font-style:italic; font-size:1.15rem;font-weight:400;color:var(--bark);line-height:1.2; } .svc-desc{font-size:.8rem;font-weight:300;line-height:1.7;color:var(--muted)} .svc-foot{ display:flex;align-items:center;justify-content:space-between; margin-top:auto;padding-top:.9rem;border-top:1px solid var(--border); } .svc-price{ font-family:'Bodoni Moda',serif;font-size:1.05rem;font-weight:500;color:var(--rose); } .svc-dur{ font-size:.62rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase; color:var(--muted); } /* ββββββββββββββββββββββββββββββββ ABOUT SPLIT ββββββββββββββββββββββββββββββββ */ .about-grid{display:grid;grid-template-columns:1fr 1fr;min-height:580px;align-items:stretch} .about-photos{position:relative;background:var(--blush);overflow:hidden} .about-photos img{width:100%;height:100%;object-fit:cover;object-position:center top;filter:brightness(.9) saturate(1.05);transition:transform .6s var(--ease)} .about-photos:hover img{transform:scale(1.04)} /* Decorative inner border */ .about-photos::before{ content:'';position:absolute;inset:1.5rem;z-index:5; border:1px solid rgba(250,247,242,.35);pointer-events:none; } .about-photos::after{content:'';position:absolute;inset:0;background:linear-gradient(to right,transparent 80%,var(--ivory2) 100%);z-index:3} .about-stat{ position:absolute;bottom:2rem;left:0;z-index:6; background:var(--rose);color:var(--white); padding:1rem 1.6rem; box-shadow:0 8px 32px rgba(200,123,114,.3); } .as-n{font-family:'Bodoni Moda',serif;font-size:clamp(1.5rem,3vw,2rem);font-weight:700;font-style:italic;line-height:1} .as-l{font-size:.55rem;font-weight:400;letter-spacing:.22em;text-transform:uppercase;opacity:.75;margin-top:.2rem} .about-text{ background:var(--ivory2); padding:clamp(3.5rem,7vw,6rem) clamp(2rem,5vw,5.5rem); display:flex;flex-direction:column;justify-content:center; } .about-text .stitle{margin-bottom:1.4rem;font-size:clamp(2rem,4vw,3.2rem)} .about-p{font-size:clamp(.85rem,1.3vw,.96rem);font-weight:300;line-height:1.88;color:rgba(61,44,42,.58);max-width:440px} .about-p+.about-p{margin-top:.95rem} .about-vals{display:flex;flex-direction:column;gap:.7rem;margin-top:1.8rem} .aval{ display:flex;align-items:center;gap:.9rem; font-size:.82rem;font-weight:300;color:rgba(61,44,42,.6); } .aval-dot{ width:22px;height:22px;border-radius:50%; background:rgba(200,123,114,.12);border:1px solid rgba(200,123,114,.3); display:flex;align-items:center;justify-content:center;flex-shrink:0; font-size:.6rem;color:var(--rose); } .about-cta{ display:inline-flex;align-items:center;gap:.65em;margin-top:2rem; font-size:.72rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase; color:var(--rose);transition:gap .35s; } .about-cta:hover{gap:1em} .about-cta svg{width:12px;height:12px} /* ββββββββββββββββββββββββββββββββ TREATMENTS / MENU SCROLLER ββββββββββββββββββββββββββββββββ */ .treat-tabs{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2.5rem} .t-tab{ padding:.44em 1.3em;background:transparent; border:1px solid var(--border2);color:var(--muted); font-size:.7rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase; border-radius:100px;transition:all .3s; } .t-tab:hover,.t-tab.on{ background:var(--rose);border-color:var(--rose);color:var(--white); } .treat-scroller{ display:flex;gap:1.5rem; overflow-x:auto;scroll-snap-type:x mandatory; scrollbar-width:none;-ms-overflow-style:none; padding-bottom:.5rem;cursor:grab;user-select:none; } .treat-scroller::-webkit-scrollbar{display:none} .treat-scroller.grabbing{cursor:grabbing} .treat-card{ flex:0 0 clamp(230px,26vw,280px);scroll-snap-align:start; background:var(--white);border:1px solid var(--border); overflow:hidden;position:relative; transition:border-color .4s,transform .4s,box-shadow .4s; } .treat-card:hover{ border-color:rgba(200,123,114,.3); transform:translateY(-5px); box-shadow:0 20px 56px rgba(61,44,42,.1); } .tc-img{height:clamp(170px,19vw,220px);overflow:hidden;position:relative;background:var(--blush)} .tc-img img{ width:100%;height:100%;object-fit:cover;object-position:center; filter:brightness(.92) saturate(1.05); transition:transform .65s var(--ease),filter .5s; } .treat-card:hover .tc-img img{transform:scale(1.07);filter:brightness(1) saturate(1.1)} .tc-badge{ position:absolute;top:.8rem;left:.8rem; padding:.24em .85em;background:var(--rose);color:var(--white); font-size:.56rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase; border-radius:100px; } .tc-badge.pop{background:var(--champagne);color:var(--bark)} .tc-badge.new{background:var(--mauve);color:var(--white)} .tc-body{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.45rem} .tc-cat{font-size:.57rem;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--rose)} .tc-name{font-family:'Bodoni Moda',serif;font-size:1.05rem;font-style:italic;font-weight:400;color:var(--bark);line-height:1.25} .tc-desc{font-size:.77rem;font-weight:300;line-height:1.65;color:var(--muted)} .tc-foot{ display:flex;align-items:center;justify-content:space-between; margin-top:.85rem;padding-top:.8rem;border-top:1px solid var(--border); } .tc-price{font-family:'Bodoni Moda',serif;font-size:1.05rem;font-weight:500;color:var(--rose)} .tc-dur{font-size:.62rem;font-weight:400;color:var(--muted);letter-spacing:.1em} .scr-row{display:flex;gap:.65rem;margin-top:1.5rem;justify-content:flex-end} .scr-btn{ width:42px;height:42px;border-radius:50%; border:1px solid var(--border2);background:transparent;color:var(--bark); display:flex;align-items:center;justify-content:center; transition:border-color .3s,background .3s,color .3s; } .scr-btn:hover{border-color:var(--rose);background:var(--rose);color:var(--white)} .scr-btn svg{width:14px;height:14px} /* ββββββββββββββββββββββββββββββββ STYLISTS ββββββββββββββββββββββββββββββββ */ .stylists-scroller{ display:flex;gap:1.5rem; overflow-x:auto;scroll-snap-type:x mandatory; scrollbar-width:none;-ms-overflow-style:none; padding-bottom:.5rem;cursor:grab;user-select:none; } .stylists-scroller::-webkit-scrollbar{display:none} .stylists-scroller.grabbing{cursor:grabbing} .stylist-card{ flex:0 0 clamp(200px,22vw,250px);scroll-snap-align:start; display:flex;flex-direction:column;align-items:center; gap:.9rem;text-align:center;cursor:pointer; } .stylist-img{ width:clamp(110px,14vw,145px);height:clamp(110px,14vw,145px); border-radius:50%;overflow:hidden;position:relative; border:2px solid var(--border); transition:border-color .4s,transform .4s; box-shadow:0 4px 24px rgba(61,44,42,.08); } .stylist-card:hover .stylist-img{border-color:var(--rose);transform:translateY(-5px)} .stylist-img img{ width:100%;height:100%;object-fit:cover;object-position:center top; filter:saturate(.8);transition:filter .5s; } .stylist-card:hover .stylist-img img{filter:saturate(1)} /* Floating rose ring on hover */ .stylist-img::after{ content:'';position:absolute;inset:-6px; border-radius:50%;border:1px solid rgba(200,123,114,0); transition:border-color .4s,inset .4s; } .stylist-card:hover .stylist-img::after{border-color:rgba(200,123,114,.3);inset:-10px} .stylist-name{font-family:'Bodoni Moda',serif;font-size:1.05rem;font-style:italic;color:var(--bark)} .stylist-role{font-size:.6rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--rose)} .stylist-spec{font-size:.74rem;font-weight:300;color:var(--muted);font-style:italic} /* ββββββββββββββββββββββββββββββββ GALLERY ββββββββββββββββββββββββββββββββ */ .gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(2,clamp(150px,16vw,210px)); gap:1rem; } .g-cell{overflow:hidden;position:relative;cursor:pointer;background:var(--blush)} .g-cell:nth-child(1){grid-column:span 2;grid-row:span 2} .g-cell:nth-child(5){grid-column:span 2} .g-cell img{ width:100%;height:100%;object-fit:cover; filter:brightness(.9) saturate(1.05); transition:transform .65s var(--ease),filter .5s; } .g-cell:hover img{transform:scale(1.07);filter:brightness(1) saturate(1.15)} .g-hover{ position:absolute;inset:0; background:rgba(200,123,114,0); display:flex;align-items:center;justify-content:center; transition:background .4s; } .g-cell:hover .g-hover{background:rgba(200,123,114,.15)} .g-icon{ width:42px;height:42px;border-radius:50%; border:1px solid rgba(250,247,242,.7); display:flex;align-items:center;justify-content:center; color:rgba(250,247,242,.9); transform:scale(0);opacity:0; transition:transform .4s var(--ease),opacity .4s; } .g-cell:hover .g-icon{transform:scale(1);opacity:1} .g-icon svg{width:16px;height:16px} /* ββββββββββββββββββββββββββββββββ TESTIMONIALS ββββββββββββββββββββββββββββββββ */ .testi-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr)); gap:1.5rem; } .testi-card{ background:rgba(255,255,255,.6); border:1px solid var(--border); backdrop-filter:blur(10px); padding:clamp(1.6rem,3.5vw,2.2rem); display:flex;flex-direction:column;gap:1rem; position:relative; transition:transform .4s,box-shadow .4s,border-color .4s; } .testi-card:hover{ transform:translateY(-4px); box-shadow:0 20px 50px rgba(61,44,42,.08); border-color:rgba(200,123,114,.3); } .testi-card::before{ content:'\201C'; position:absolute;top:.6rem;right:1.2rem; font-family:'Bodoni Moda',serif;font-size:5rem; color:rgba(200,123,114,.1);line-height:1;font-weight:700; } .t-stars{display:flex;gap:.25rem} .t-stars span{color:var(--rose);font-size:.82rem} .t-quote{ font-family:'Bodoni Moda',serif;font-style:italic; font-size:clamp(.9rem,1.4vw,1rem);font-weight:300; line-height:1.72;color:rgba(61,44,42,.7); } .t-auth{ display:flex;align-items:center;gap:.85rem; margin-top:auto;padding-top:.9rem;border-top:1px solid var(--border); } .t-av{ width:38px;height:38px;border-radius:50%;overflow:hidden; border:1.5px solid rgba(200,123,114,.25);flex-shrink:0; } .t-av img{width:100%;height:100%;object-fit:cover} .t-name{font-family:'Bodoni Moda',serif;font-size:.92rem;font-style:italic;color:var(--bark)} .t-svc{font-size:.62rem;color:var(--muted)} /* ββββββββββββββββββββββββββββββββ BOOKING / APPOINTMENT ββββββββββββββββββββββββββββββββ */ .booking-section{ position:relative;overflow:hidden; background:var(--bark); } .book-bg{position:absolute;inset:0;opacity:.08;pointer-events:none} /* Soft botanical pattern */ .book-bg svg{width:100%;height:100%;position:absolute;inset:0} .book-inner{ position:relative;z-index:5; display:grid;grid-template-columns:1fr 1fr; gap:clamp(3rem,6vw,7rem);align-items:start; padding:clamp(4.5rem,9vw,8rem) clamp(1.25rem,5vw,5.5rem); } .book-left .eyebrow{color:rgba(212,184,150,.7)} .book-left .stitle{font-size:clamp(2.2rem,4.5vw,3.8rem);color:var(--ivory);margin-bottom:1.4rem} .book-left .stitle em{color:var(--champagne)} .book-desc{font-size:clamp(.84rem,1.3vw,.95rem);font-weight:300;line-height:1.85;color:rgba(245,237,224,.5);max-width:400px} .book-perks{display:flex;flex-direction:column;gap:.75rem;margin-top:2rem} .bperk{ display:flex;align-items:center;gap:.9rem; font-size:.82rem;font-weight:300;color:rgba(245,237,224,.55); } .bperk::before{content:'';display:block;width:18px;height:1px;background:var(--champagne);flex-shrink:0;opacity:.6} /* Form */ .book-form{display:flex;flex-direction:column;gap:1rem} .fi{display:flex;flex-direction:column;gap:.38rem} .fi label{font-size:.57rem;font-weight:400;letter-spacing:.26em;text-transform:uppercase;color:var(--champagne)} .fi input,.fi select,.fi textarea{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); padding:.8em 1.1em; color:var(--cream2);font-family:'Bodoni Moda',serif;font-style:italic; font-size:.9rem;font-weight:300; outline:none;appearance:none;-webkit-appearance:none; transition:border-color .35s,background .35s;resize:none; border-radius:2px; } .fi input::placeholder,.fi textarea::placeholder{color:rgba(255,255,255,.2)} .fi input:focus,.fi select:focus,.fi textarea:focus{border-color:rgba(200,123,114,.6);background:rgba(255,255,255,.1)} .fi select option{background:#3d2c2a;font-family:'Jost',sans-serif;font-style:normal;color:#f5ede0} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .book-submit{ display:flex;align-items:center;justify-content:center;gap:.7em; padding:.92em;border-radius:100px; background:var(--rose);color:var(--white); font-family:'Jost',sans-serif;font-size:.76rem;font-weight:500; letter-spacing:.18em;text-transform:uppercase; border:none;margin-top:.4rem; transition:background .35s,transform .2s; } .book-submit:hover{background:var(--rose2);transform:translateY(-2px)} .book-submit svg{width:13px;height:13px;transition:transform .3s} .book-submit:hover svg{transform:translateX(3px)} .book-note{font-size:.68rem;font-weight:300;color:rgba(245,237,224,.3);text-align:center;font-style:italic} /* ββββββββββββββββββββββββββββββββ PRODUCTS / SHOP STRIP ββββββββββββββββββββββββββββββββ */ .prod-scroller{ display:flex;gap:1.5rem; overflow-x:auto;scroll-snap-type:x mandatory; scrollbar-width:none;-ms-overflow-style:none; padding-bottom:.5rem;cursor:grab;user-select:none; } .prod-scroller::-webkit-scrollbar{display:none} .prod-scroller.grabbing{cursor:grabbing} .prod-card{ flex:0 0 clamp(180px,19vw,220px);scroll-snap-align:start; display:flex;flex-direction:column;gap:.75rem;cursor:pointer; } .prod-img{ aspect-ratio:1;background:var(--blush);overflow:hidden; position:relative;border-radius:2px; transition:transform .4s;box-shadow:0 4px 20px rgba(61,44,42,.06); } .prod-card:hover .prod-img{transform:translateY(-4px);box-shadow:0 16px 40px rgba(61,44,42,.12)} .prod-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)} .prod-card:hover .prod-img img{transform:scale(1.05)} .prod-tag{ position:absolute;top:.7rem;left:.7rem; padding:.22em .75em;border-radius:100px; background:rgba(255,255,255,.85);backdrop-filter:blur(10px); font-size:.56rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--rose); } .prod-name{font-family:'Bodoni Moda',serif;font-size:.95rem;font-style:italic;color:var(--bark);line-height:1.3} .prod-brand{font-size:.65rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .prod-price{font-size:.9rem;font-weight:500;color:var(--rose)} /* ββββββββββββββββββββββββββββββββ FOOTER ββββββββββββββββββββββββββββββββ */ footer{ background:var(--bark); padding:clamp(3.5rem,7vw,5.5rem) clamp(1.25rem,5vw,5.5rem) clamp(1.5rem,3vw,2.5rem); border-top:1px solid rgba(255,255,255,.06); } .foot-top{ display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr; gap:clamp(2rem,4vw,4rem); padding-bottom:clamp(2.5rem,5vw,4rem); border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:clamp(1.5rem,3vw,2.5rem); } .foot-logo{font-family:'Bodoni Moda',serif;font-size:1.55rem;font-weight:700;letter-spacing:.14em;color:var(--ivory)} .foot-logo span{color:var(--champagne);font-style:italic} .foot-tagline{font-family:'Bodoni Moda',serif;font-size:.82rem;font-style:italic;color:rgba(245,237,224,.35);margin-top:.4rem} .foot-desc{font-size:.78rem;font-weight:300;line-height:1.75;color:rgba(245,237,224,.28);margin-top:.9rem;max-width:230px} .foot-socs{display:flex;gap:.6rem;margin-top:1.3rem} .fsoc{ width:34px;height:34px;border-radius:50%; border:1px solid rgba(255,255,255,.1); display:flex;align-items:center;justify-content:center; font-size:.65rem;color:rgba(245,237,224,.35); transition:border-color .3s,color .3s,background .3s; } .fsoc:hover{border-color:var(--rose);color:var(--ivory);background:rgba(200,123,114,.2)} .foot-col h5{ font-family:'Bodoni Moda',serif;font-style:italic;font-weight:400; font-size:.9rem;color:var(--champagne);margin-bottom:1.1rem; } .foot-col ul{list-style:none;display:flex;flex-direction:column;gap:.62rem} .foot-col ul li a{font-size:.77rem;font-weight:300;color:rgba(245,237,224,.28);transition:color .3s} .foot-col ul li a:hover{color:var(--champagne)} .foot-bot{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;justify-content:space-between} .foot-copy{font-size:.67rem;font-weight:300;font-style:italic;color:rgba(245,237,224,.2)} .foot-copy em{color:var(--rose)} .foot-legal{display:flex;gap:1.5rem} .foot-legal a{font-size:.65rem;font-weight:300;color:rgba(245,237,224,.2);transition:color .3s} .foot-legal a:hover{color:var(--champagne)} /* ββββββββββββββββββββββββββββββββ SCROLL REVEAL ββββββββββββββββββββββββββββββββ */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s var(--ease)} .reveal.in{opacity:1;transform:translateY(0)} .reveal-left{opacity:0;transform:translateX(-28px);transition:opacity .7s ease,transform .7s var(--ease)} .reveal-left.in{opacity:1;transform:translateX(0)} .reveal-right{opacity:0;transform:translateX(28px);transition:opacity .7s ease,transform .7s var(--ease)} .reveal-right.in{opacity:1;transform:translateX(0)} /* ββββββββββββββββββββββββββββββββ RESPONSIVE ββββββββββββββββββββββββββββββββ */ @media(max-width:1080px){ .hero{grid-template-columns:1fr} .hero-right{display:none} .hero-left{min-height:100svh;padding-top:calc(var(--nh)+4rem);justify-content:flex-end;padding-bottom:clamp(7rem,18vw,12rem)} /* Show hero bg on mobile */ .hero::before{content:'';position:absolute;inset:0;z-index:0;background:url(https://images.unsplash.com/photo-1560066984-138dadb4c035?w=900&q=80) center/cover;filter:brightness(.22)} .hero-ghost{display:none} .hero-desc{color:rgba(245,237,224,.7)} .hero-title{color:var(--ivory)} .hstat-l{color:rgba(245,237,224,.55)} .hero-stats{border-top-color:rgba(245,237,224,.15)} .about-grid{grid-template-columns:1fr} .about-photos{min-height:400px} .book-inner{grid-template-columns:1fr} .foot-top{grid-template-columns:1fr 1fr} .gallery-grid{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,clamp(130px,16vw,200px))} .g-cell:nth-child(1){grid-column:span 1;grid-row:span 2} .g-cell:nth-child(5){grid-column:span 1} } @media(max-width:768px){ .nav-links,.nav-r{display:none} .ham{display:flex} .mob{display:flex} .form-row{grid-template-columns:1fr} .foot-top{grid-template-columns:1fr 1fr} .gallery-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto} .g-cell:nth-child(1){grid-column:span 2;height:clamp(180px,40vw,240px)} .g-cell:nth-child(5){grid-column:span 1} } @media(max-width:520px){ .hero-title{font-size:clamp(2.8rem,12vw,4.2rem)} .foot-top{grid-template-columns:1fr} .gallery-grid{grid-template-columns:1fr} .g-cell:nth-child(1){grid-column:span 1;height:clamp(200px,55vw,280px)} .g-cell:nth-child(5){grid-column:span 1} .hero-stats .hstat:nth-child(n+3){display:none} }
JavaScript
(function(){ /* ββ PETALS CANVAS ββ */ const canvas = document.getElementById('petalCanvas'); const ctx = canvas.getContext('2d'); let W, H, petals = []; function resize(){ W = canvas.width = innerWidth; H = canvas.height = innerHeight; } resize(); window.addEventListener('resize', resize, {passive:true}); const COLORS = ['rgba(200,123,114,','rgba(212,155,130,','rgba(240,216,208,','rgba(232,200,188,']; class Petal { constructor(){ this.reset(true); } reset(initial = false){ this.x = Math.random() * W; this.y = initial ? Math.random() * H : -30; this.size = 5 + Math.random() * 12; this.speedY = 0.4 + Math.random() * 0.8; this.speedX = (Math.random() - 0.5) * 0.6; this.rotation = Math.random() * Math.PI * 2; this.rotSpeed = (Math.random() - 0.5) * 0.02; this.opacity = 0.3 + Math.random() * 0.5; this.color = COLORS[Math.floor(Math.random() * COLORS.length)]; this.wobble = Math.random() * Math.PI * 2; this.wobbleSpeed = 0.02 + Math.random() * 0.03; } update(){ this.wobble += this.wobbleSpeed; this.x += this.speedX + Math.sin(this.wobble) * 0.4; this.y += this.speedY; this.rotation += this.rotSpeed; if(this.y > H + 30) this.reset(); } draw(){ ctx.save(); ctx.translate(this.x, this.y); ctx.rotate(this.rotation); ctx.beginPath(); // Petal shape ctx.moveTo(0, -this.size); ctx.bezierCurveTo(this.size * 0.7, -this.size * 0.5, this.size * 0.7, this.size * 0.5, 0, this.size); ctx.bezierCurveTo(-this.size * 0.7, this.size * 0.5, -this.size * 0.7, -this.size * 0.5, 0, -this.size); ctx.fillStyle = this.color + this.opacity + ')'; ctx.fill(); ctx.restore(); } } for(let i = 0; i < 28; i++) petals.push(new Petal()); (function animate(){ ctx.clearRect(0,0,W,H); petals.forEach(p => { p.update(); p.draw(); }); requestAnimationFrame(animate); })(); /* ββ CURSOR ββ */ const cur = document.getElementById('cur'); const ring = document.getElementById('curRing'); let mx=0,my=0,rx=0,ry=0; document.addEventListener('mousemove',e=>{ mx=e.clientX; my=e.clientY; cur.style.left=mx+'px'; cur.style.top=my+'px'; }); (function animRing(){ rx += (mx-rx)*.13; ry += (my-ry)*.13; ring.style.left=rx+'px'; ring.style.top=ry+'px'; requestAnimationFrame(animRing); })(); document.querySelectorAll('a,button,[class*="card"],[class*="cell"]').forEach(el=>{ el.addEventListener('mouseenter',()=>{ ring.style.width='52px'; ring.style.height='52px'; ring.style.borderColor='rgba(200,123,114,.7)'; }); el.addEventListener('mouseleave',()=>{ ring.style.width='32px'; ring.style.height='32px'; ring.style.borderColor='rgba(200,123,114,.45)'; }); }); /* ββ NAV ββ */ window.addEventListener('scroll',()=>{ document.getElementById('nav').classList.toggle('frosted', scrollY>20); },{passive:true}); const ham=document.getElementById('ham'), mob=document.getElementById('mob'); ham.addEventListener('click',()=>{ ham.classList.toggle('o'); mob.classList.toggle('o'); document.body.style.overflow=mob.classList.contains('o')?'hidden':''; }); mob.querySelectorAll('a').forEach(a=>a.addEventListener('click',()=>{ ham.classList.remove('o'); mob.classList.remove('o'); document.body.style.overflow=''; })); /* ββ TABS ββ */ document.getElementById('treatTabs').addEventListener('click',e=>{ if(!e.target.classList.contains('t-tab')) return; document.querySelectorAll('.t-tab').forEach(t=>t.classList.remove('on')); e.target.classList.add('on'); }); /* ββ DRAG SCROLL ββ */ function drag(el){ let down=false, sx=0, sl=0; el.addEventListener('mousedown',e=>{ down=true; el.classList.add('grabbing'); sx=e.pageX-el.offsetLeft; sl=el.scrollLeft; }); el.addEventListener('mouseleave',()=>{ down=false; el.classList.remove('grabbing'); }); el.addEventListener('mouseup',()=>{ down=false; el.classList.remove('grabbing'); }); el.addEventListener('mousemove',e=>{ if(!down) return; e.preventDefault(); el.scrollLeft=sl-(e.pageX-el.offsetLeft-sx)*1.2; }); } function arrows(el, lb, rb, amt){ lb.addEventListener('click',()=>el.scrollBy({left:-amt,behavior:'smooth'})); rb.addEventListener('click',()=>el.scrollBy({left:amt,behavior:'smooth'})); } drag(document.getElementById('treatScr')); arrows(document.getElementById('treatScr'), document.getElementById('tLeft'), document.getElementById('tRight'), 300); drag(document.getElementById('stylScr')); arrows(document.getElementById('stylScr'), document.getElementById('sLeft'), document.getElementById('sRight'), 270); drag(document.getElementById('prodScr')); arrows(document.getElementById('prodScr'), document.getElementById('pLeft'), document.getElementById('pRight'), 240); /* ββ STAT COUNTERS ββ */ function countUp(el, target){ const dur=1800, start=performance.now(); const dec = target < 10 ? 1 : 0; (function tick(now){ const p = Math.min((now-start)/dur, 1); const ease = 1-Math.pow(1-p, 3); el.textContent = (ease*target).toFixed(dec).replace(/\.0$/,''); if(p < 1) requestAnimationFrame(tick); })(start); } const counterObs = new IntersectionObserver(entries=>{ entries.forEach(e=>{ if(!e.isIntersecting) return; const t = +e.target.dataset.target; countUp(e.target, t); counterObs.unobserve(e.target); }); },{threshold:.5}); document.querySelectorAll('[data-target]').forEach(el=>counterObs.observe(el)); /* ββ SCROLL REVEAL ββ */ const revObs = new IntersectionObserver(entries=>{ entries.forEach(e=>{ if(e.isIntersecting){ e.target.classList.add('in'); revObs.unobserve(e.target); } }); },{threshold:.1, rootMargin:'0px 0px -30px 0px'}); document.querySelectorAll('.reveal,.reveal-left,.reveal-right').forEach(el=>revObs.observe(el)); })();
Output Preview
Desktop
Mobile
Fullscreen