Luxury Real Estate Full Template
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>Auren Estate โ Luxury Real Estate</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,600&family=Urbanist:wght@300;400;500;600;700&display=swap" rel="stylesheet"> </head> <body> <div class="grain" aria-hidden="true"></div> <!-- โโโโโโโโโโโโโโ NAVBAR โโโโโโโโโโโโโโ --> <nav class="nav" id="nav"> <a href="#" class="nav-logo"> <span class="logo-main">Auren</span> <span class="logo-sub">Estate ยท Luxury Properties</span> </a> <ul class="nav-links"> <li><a href="#properties">Properties</a></li> <li><a href="#categories">Categories</a></li> <li><a href="#agents">Agents</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> <div class="nav-r"> <a href="tel:+18005551234" class="nav-tel">+1 800 555 1234</a> <a href="#contact" class="nav-btn"> Book Viewing <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="#properties">Properties</a> <a href="#categories">Categories</a> <a href="#agents">Agents</a> <a href="#about">About</a> <a href="#contact">Contact</a> <a href="#contact" class="mob-btn">Book Viewing</a> </div> <!-- โโโโโโโโโโโโโโ HERO SLIDER โโโโโโโโโโโโโโ --> <section class="hero" id="hero"> <!-- SLIDE 1 --> <div class="slide on" data-i="0"> <div class="sl-bg"><img src="https://images.unsplash.com/photo-1613490493576-7fde63acd811?w=1800&q=85" alt="Beverly Hills Villa"></div> <div class="sl-body"> <h1 class="sl-title">Modern Villa<br><em>Above the City</em></h1> <p class="sl-desc">A masterwork of contemporary architecture perched above the canyon โ panoramic city views, infinity pool, and an interior designed to inspire.</p> <div class="sl-acts"> <a href="#properties" class="btn-gold"><span>View Property</span><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="#contact" class="btn-outline">Schedule Tour</a> </div> </div> <div class="sl-card"> <div class="card-lbl">Asking Price</div> <div class="card-price">$8,750,000</div> <div class="card-specs"> <div class="card-spec"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>6 Beds</div> <div class="card-spec"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="3"/><path stroke-linecap="round" d="M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>7 Baths</div> <div class="card-spec"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"/></svg>8,400 ftยฒ</div> </div> </div> </div> <!-- SLIDE 2 --> <div class="slide" data-i="1"> <div class="sl-bg"><img src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?w=1800&q=85" alt="Malibu Beachfront"></div> <div class="sl-body"> <h1 class="sl-title">Where Land<br><em>Meets Ocean</em></h1> <p class="sl-desc">Direct beach access, Pacific light flooding every room, and a seamless blur between the chef's kitchen and the endless horizon beyond.</p> <div class="sl-acts"> <a href="#properties" class="btn-gold"><span>View Property</span><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="#contact" class="btn-outline">Schedule Tour</a> </div> </div> <div class="sl-card"> <div class="card-lbl">Asking Price</div> <div class="card-price">$14,900,000</div> <div class="card-specs"> <div class="card-spec"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>5 Beds</div> <div class="card-spec"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="3"/><path stroke-linecap="round" d="M12 2v2m0 16v2M2 12h2m16 0h2"/></svg>6 Baths</div> <div class="card-spec"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"/></svg>5,800 ftยฒ</div> </div> </div> </div> <!-- SLIDE 3 --> <div class="slide" data-i="2"> <div class="sl-bg"><img src="https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=1800&q=85" alt="Manhattan Penthouse"></div> <div class="sl-body"> <h1 class="sl-title">Sky-High<br><em>Living</em></h1> <p class="sl-desc">A full-floor crown atop one of Manhattan's most coveted towers โ wraparound terraces, private elevator, and skyline in every direction.</p> <div class="sl-acts"> <a href="#properties" class="btn-gold"><span>View Property</span><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="#contact" class="btn-outline">Schedule Tour</a> </div> </div> <div class="sl-card"> <div class="card-lbl">Asking Price</div> <div class="card-price">$24,500,000</div> <div class="card-specs"> <div class="card-spec"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>4 Beds</div> <div class="card-spec"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="3"/><path stroke-linecap="round" d="M12 2v2m0 16v2M2 12h2m16 0h2"/></svg>5 Baths</div> <div class="card-spec"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"/></svg>6,200 ftยฒ</div> </div> </div> </div> <!-- SLIDE 4 --> <div class="slide" data-i="3"> <div class="sl-bg"><img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=1800&q=85" alt="Hamptons Estate"></div> <div class="sl-body"> <h1 class="sl-title">Timeless<br><em>Elegance</em></h1> <p class="sl-desc">A grand shingled estate on 3 acres of manicured grounds โ tennis court, pool pavilion, and a guest house designed for gracious living.</p> <div class="sl-acts"> <a href="#properties" class="btn-gold"><span>View Property</span><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="#contact" class="btn-outline">Schedule Tour</a> </div> </div> <div class="sl-card"> <div class="card-lbl">Asking Price</div> <div class="card-price">$11,200,000</div> <div class="card-specs"> <div class="card-spec"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>8 Beds</div> <div class="card-spec"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="3"/><path stroke-linecap="round" d="M12 2v2m0 16v2M2 12h2m16 0h2"/></svg>9 Baths</div> <div class="card-spec"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"/></svg>10,100 ftยฒ</div> </div> </div> </div> <!-- Side arrows (desktop) --> <div class="sl-arrows"> <button class="sl-arr" id="slPrev" aria-label="Previous"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7"/></svg></button> <button class="sl-arr" id="slNext" aria-label="Next"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg></button> </div> <!-- Mobile arrows --> <div class="sl-marr" id="slMarr"> <button class="sl-marr-btn" id="slPrevM"><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="sl-marr-btn" id="slNextM"><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> <!-- Dot nav --> <div class="sl-nav" id="slNav"> <div class="sl-dot on" data-i="0"><div class="dot-bar"><div class="dot-fill"></div></div><span class="dot-num">01</span></div> <div class="sl-dot" data-i="1"><div class="dot-bar"><div class="dot-fill"></div></div><span class="dot-num">02</span></div> <div class="sl-dot" data-i="2"><div class="dot-bar"><div class="dot-fill"></div></div><span class="dot-num">03</span></div> <div class="sl-dot" data-i="3"><div class="dot-bar"><div class="dot-fill"></div></div><span class="dot-num">04</span></div> </div> <!-- Progress bar --> <div class="sl-progress"><div class="sl-progress-fill" id="slProgressFill"></div></div> <!-- Search bar --> <div class="search-bar"> <div class="sg"><label>Location</label> <select><option>All Locations</option><option>Beverly Hills, CA</option><option>Malibu, CA</option><option>Manhattan, NY</option><option>The Hamptons, NY</option><option>Miami Beach, FL</option></select> </div> <div class="sdiv"></div> <div class="sg"><label>Type</label> <select><option>Any Type</option><option>Villa</option><option>Penthouse</option><option>Estate</option><option>Townhouse</option><option>Condo</option></select> </div> <div class="sdiv"></div> <div class="sg"><label>Price</label> <select><option>Any Price</option><option>$1M โ $5M</option><option>$5M โ $10M</option><option>$10M โ $20M</option><option>$20M+</option></select> </div> <div class="sdiv"></div> <div class="sg"><label>Beds</label> <select><option>Any</option><option>2+</option><option>3+</option><option>4+</option><option>6+</option></select> </div> <button class="s-btn"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2"><circle cx="11" cy="11" r="8"/><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-4.35-4.35"/></svg>Search</button> </div> </section> <!-- โโโโโโโโโโโโโโ TICKER โโโโโโโโโโโโโโ --> <div class="ticker" aria-hidden="true"> <div class="tk-track"> <span class="tk-item">Luxury Villas</span><span class="tk-item">Penthouses</span><span class="tk-item">Beachfront Estates</span><span class="tk-item">Country Homes</span><span class="tk-item">New Developments</span><span class="tk-item">Investment Properties</span><span class="tk-item">Vacation Homes</span><span class="tk-item">Off-Market Listings</span> <span class="tk-item">Luxury Villas</span><span class="tk-item">Penthouses</span><span class="tk-item">Beachfront Estates</span><span class="tk-item">Country Homes</span><span class="tk-item">New Developments</span><span class="tk-item">Investment Properties</span><span class="tk-item">Vacation Homes</span><span class="tk-item">Off-Market Listings</span> </div> </div> <!-- โโโโโโโโโโโโโโ STATS โโโโโโโโโโโโโโ --> <div class="stats-strip"> <div class="stat-item"><div class="stat-n" data-target="2400">0</div><div class="stat-l">Properties Sold</div></div> <div class="stat-item"><div class="stat-n"><em>$</em><span data-target="4">0</span><em>B+</em></div><div class="stat-l">Total Sales Volume</div></div> <div class="stat-item"><div class="stat-n" data-target="18">0</div><div class="stat-l">Years Experience</div></div> <div class="stat-item"><div class="stat-n" data-target="97">0</div><div class="stat-l">% Client Satisfaction</div></div> <div class="stat-item"><div class="stat-n" data-target="42">0</div><div class="stat-l">Expert Agents</div></div> </div> <!-- โโโโโโโโโโโโโโ FEATURED PROPERTIES โโโโโโโโโโโโโโ --> <section class="sec sec-alt" id="properties"> <div class="sh"> <div class="sh-row"> <div><div class="slabel">Hand-Picked</div><h2 class="stitle">Featured <em>Properties</em></h2></div> <a href="#" class="link-all">All Properties <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="prop-scroller-wrap"> <div class="prop-scroller" id="propScroller"> <div class="prop-card"> <div class="pc-img"><img src="https://images.unsplash.com/photo-1580587771525-78b9dba3b914?w=600&q=80" alt="Canyon View"><div class="pc-badge">For Sale</div><div class="pc-fav">โก</div></div> <div class="pc-body"><div class="pc-type">Villa</div><div class="pc-name">Canyon View Residence</div><div class="pc-loc"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a2 2 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><circle cx="12" cy="11" r="3"/></svg>Bel Air, Los Angeles</div><div class="pc-foot"><span class="pc-price">$6,850,000</span><div class="pc-specs"><div class="pc-spec"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>5</div><div class="pc-spec"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"/></svg>5,200 ftยฒ</div></div></div></div> </div> <div class="prop-card"> <div class="pc-img"><img src="https://images.unsplash.com/photo-1570129477492-45c003edd2be?w=600&q=80" alt="Park Avenue"><div class="pc-badge new">New</div><div class="pc-fav">โก</div></div> <div class="pc-body"><div class="pc-type">Townhouse</div><div class="pc-name">Park Avenue Classic</div><div class="pc-loc"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a2 2 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><circle cx="12" cy="11" r="3"/></svg>Upper East Side, NY</div><div class="pc-foot"><span class="pc-price">$9,300,000</span><div class="pc-specs"><div class="pc-spec"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>4</div><div class="pc-spec"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"/></svg>4,800 ftยฒ</div></div></div></div> </div> <div class="prop-card"> <div class="pc-img"><img src="https://images.unsplash.com/photo-1523217582562-09d0def993a6?w=600&q=80" alt="Sunset Point"><div class="pc-badge">For Sale</div><div class="pc-fav">โก</div></div> <div class="pc-body"><div class="pc-type">Waterfront Estate</div><div class="pc-name">Sunset Point Manor</div><div class="pc-loc"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a2 2 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><circle cx="12" cy="11" r="3"/></svg>Coral Gables, Miami</div><div class="pc-foot"><span class="pc-price">$7,450,000</span><div class="pc-specs"><div class="pc-spec"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>6</div><div class="pc-spec"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"/></svg>6,600 ftยฒ</div></div></div></div> </div> <div class="prop-card"> <div class="pc-img"><img src="https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=600&q=80" alt="Heritage House"><div class="pc-badge rent">For Rent</div><div class="pc-fav">โก</div></div> <div class="pc-body"><div class="pc-type">Heritage Home</div><div class="pc-name">The Heritage House</div><div class="pc-loc"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a2 2 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><circle cx="12" cy="11" r="3"/></svg>Nob Hill, San Francisco</div><div class="pc-foot"><span class="pc-price">$28,000/mo</span><div class="pc-specs"><div class="pc-spec"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>4</div><div class="pc-spec"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"/></svg>3,900 ftยฒ</div></div></div></div> </div> <div class="prop-card"> <div class="pc-img"><img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&q=80" alt="Glass Ridge"><div class="pc-badge new">New</div><div class="pc-fav">โก</div></div> <div class="pc-body"><div class="pc-type">Modern Villa</div><div class="pc-name">Glass Ridge Estate</div><div class="pc-loc"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a2 2 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><circle cx="12" cy="11" r="3"/></svg>Scottsdale, Arizona</div><div class="pc-foot"><span class="pc-price">$5,200,000</span><div class="pc-specs"><div class="pc-spec"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>5</div><div class="pc-spec"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"/></svg>4,700 ftยฒ</div></div></div></div> </div> </div> <div class="scr-btns"> <button class="scr-btn" id="propLeft"><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="propRight"><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> </div> </section> <!-- โโโโโโโโโโโโโโ CATEGORIES โโโโโโโโโโโโโโ --> <section class="sec sec-dark" id="categories"> <div class="sh"><div class="slabel">Browse By</div><h2 class="stitle">Property <em>Categories</em></h2></div> <div class="cat-grid"> <div class="cat-card"><div class="cat-icon">?</div><div class="cat-name">Villas & Estates</div><div class="cat-count">148 Properties</div></div> <div class="cat-card"><div class="cat-icon">?๏ธ</div><div class="cat-name">Penthouses</div><div class="cat-count">62 Properties</div></div> <div class="cat-card"><div class="cat-icon">?๏ธ</div><div class="cat-name">Beachfront</div><div class="cat-count">89 Properties</div></div> <div class="cat-card"><div class="cat-icon">?</div><div class="cat-name">Country Homes</div><div class="cat-count">74 Properties</div></div> <div class="cat-card"><div class="cat-icon">?</div><div class="cat-name">Condominiums</div><div class="cat-count">215 Properties</div></div> <div class="cat-card"><div class="cat-icon">?๏ธ</div><div class="cat-name">New Developments</div><div class="cat-count">33 Projects</div></div> </div> </section> <!-- โโโโโโโโโโโโโโ WHY CHOOSE US โโโโโโโโโโโโโโ --> <section class="sec sec-alt"> <div class="sh"><div class="sh-row"><div><div class="slabel">Our Difference</div><h2 class="stitle">Why Choose <em>Auren</em></h2></div></div></div> <div class="why-grid"> <div class="why-card"><div class="why-icon">?</div><div class="why-title">Exclusive Listings</div><div class="why-desc">Access to off-market and pre-market properties not available anywhere else. Our network is our difference.</div></div> <div class="why-card"><div class="why-icon">?</div><div class="why-title">Expert Guidance</div><div class="why-desc">Every client gets a dedicated advisor who knows the local market intimately and negotiates fiercely on your behalf.</div></div> <div class="why-card"><div class="why-icon">?</div><div class="why-title">Discreet Service</div><div class="why-desc">We understand privacy. All transactions are handled with the utmost discretion โ your trust is our highest priority.</div></div> <div class="why-card"><div class="why-icon">?</div><div class="why-title">Market Intelligence</div><div class="why-desc">Real-time data and 18 years of market knowledge ensure you buy at the right price and sell at peak value.</div></div> </div> </section> <!-- โโโโโโโโโโโโโโ ABOUT โโโโโโโโโโโโโโ --> <section class="about" id="about"> <div class="about-left"> <img src="https://images.unsplash.com/photo-1497366216548-37526070297c?w=900&q=85" alt="Auren Estate office"> <div class="about-stat-box"><div class="asb-n">$4.2B+</div><div class="asb-l">In Sales 2023</div></div> </div> <div class="about-right"> <div class="slabel">Our Story</div> <h2 class="stitle">Two Decades of<br><em>Trusted Excellence</em></h2> <p class="about-p">Founded in 2006 by Alexandra Auren, our firm was built on a single promise: to treat every client's property journey with the care and precision it deserves. We never chase volume โ we pursue perfection.</p> <p class="about-p">Today our 42-strong team spans 8 cities, with a reputation for discretion, market expertise, and delivering outcomes that exceed expectation โ every single time.</p> <div class="about-pills"> <span class="ap">Off-Market Access</span> <span class="ap">Global Network</span> <span class="ap">Legal Support</span> <span class="ap">Interior Staging</span> <span class="ap">Investment Advisory</span> </div> <a href="#agents" class="about-cta">Meet Our 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> </section> <!-- โโโโโโโโโโโโโโ AGENTS SCROLLER โโโโโโโโโโโโโโ --> <section class="sec sec-alt" id="agents"> <div class="sh"> <div class="sh-row"> <div><div class="slabel">The Team</div><h2 class="stitle">Our <em>Agents</em></h2></div> <a href="#" class="link-all">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="agents-scroller-wrap"> <div class="agents-scroller" id="agScroller"> <div class="agent-card"><div class="ag-photo"><img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=260&q=80" alt="Alexandra"></div><div class="ag-name">Alexandra Auren</div><div class="ag-role">Founder & CEO</div><div class="ag-sales">$620M in sales</div></div> <div class="agent-card"><div class="ag-photo"><img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=260&q=80" alt="James"></div><div class="ag-name">James Whitfield</div><div class="ag-role">Senior Partner</div><div class="ag-sales">$480M in sales</div></div> <div class="agent-card"><div class="ag-photo"><img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=260&q=80" alt="Priya"></div><div class="ag-name">Priya Mehta</div><div class="ag-role">Luxury Specialist</div><div class="ag-sales">$310M in sales</div></div> <div class="agent-card"><div class="ag-photo"><img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=260&q=80" alt="Marcus"></div><div class="ag-name">Marcus Cole</div><div class="ag-role">Investment Advisor</div><div class="ag-sales">$255M in sales</div></div> <div class="agent-card"><div class="ag-photo"><img src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?w=260&q=80" alt="Sofia"></div><div class="ag-name">Sofia Laurent</div><div class="ag-role">International Sales</div><div class="ag-sales">$290M in sales</div></div> <div class="agent-card"><div class="ag-photo"><img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=260&q=80" alt="Daniel"></div><div class="ag-name">Daniel Russo</div><div class="ag-role">New Developments</div><div class="ag-sales">$210M in sales</div></div> </div> <div class="scr-btns"> <button class="scr-btn" id="agLeft"><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="agRight"><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> </div> </section> <!-- โโโโโโโโโโโโโโ TESTIMONIALS โโโโโโโโโโโโโโ --> <section class="sec sec-dark"> <div class="sh"> <div class="sh-row"> <div><div class="slabel">Client Stories</div><h2 class="stitle">What They <em>Say</em></h2></div> <a href="#" class="link-all">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-scroller-wrap"> <div class="testi-scroller" id="testiScroller"> <div class="testi-card"><div class="testi-stars"><span>โ </span><span>โ </span><span>โ </span><span>โ </span><span>โ </span></div><p class="testi-quote">"Alexandra and her team found us a Malibu property that wasn't even on the market. Their network is extraordinary. We couldn't be happier."</p><div class="testi-auth"><div class="ta-av"><img src="https://images.unsplash.com/photo-1557804506-669a67965ba0?w=80&q=80" alt=""></div><div><div class="ta-name">Richard & Claire V.</div><div class="ta-prop">Purchased: Malibu Beachfront ยท $14.2M</div></div></div></div> <div class="testi-card"><div class="testi-stars"><span>โ </span><span>โ </span><span>โ </span><span>โ </span><span>โ </span></div><p class="testi-quote">"James handled the entire sale of our Manhattan penthouse with a discretion and professionalism that was genuinely rare. Sold above asking in two weeks."</p><div class="testi-auth"><div class="ta-av"><img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=80&q=80" alt=""></div><div><div class="ta-name">Thomas M.</div><div class="ta-prop">Sold: Central Park West Penthouse ยท $19M</div></div></div></div> <div class="testi-card"><div class="testi-stars"><span>โ </span><span>โ </span><span>โ </span><span>โ </span><span>โ </span></div><p class="testi-quote">"As first-time buyers in New York, we were overwhelmed. Priya held our hand through every step and we ended up with a home we absolutely love."</p><div class="testi-auth"><div class="ta-av"><img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=80&q=80" alt=""></div><div><div class="ta-name">Sarah & Ben K.</div><div class="ta-prop">Purchased: Upper West Side Townhouse ยท $7.8M</div></div></div></div> <div class="testi-card"><div class="testi-stars"><span>โ </span><span>โ </span><span>โ </span><span>โ </span><span>โ </span></div><p class="testi-quote">"Marcus's investment advisory services helped us build a property portfolio that now generates $2M+ annually. The ROI has been incredible."</p><div class="testi-auth"><div class="ta-av"><img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=80&q=80" alt=""></div><div><div class="ta-name">David H.</div><div class="ta-prop">Portfolio: 6 Properties ยท $42M AUM</div></div></div></div> </div> <div class="scr-btns"> <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> </div> </section> <!-- โโโโโโโโโโโโโโ BLOG โโโโโโโโโโโโโโ --> <section class="sec sec-alt"> <div class="sh"> <div class="sh-row"> <div><div class="slabel">Market Insights</div><h2 class="stitle">Latest <em>News</em></h2></div> <a href="#" class="link-all">All Articles <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="blog-grid"> <div class="blog-card"><div class="blog-img"><img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=600&q=80" alt=""></div><div class="blog-body"><div class="blog-cat">Market Report</div><div class="blog-title">Luxury Sales Volume Hits Record High in Q1 2024</div><div class="blog-meta">Mar 12, 2024 <span>ยท</span> 5 min read</div></div></div> <div class="blog-card"><div class="blog-img"><img src="https://images.unsplash.com/photo-1560518883-ce09059eeffa?w=600&q=80" alt=""></div><div class="blog-body"><div class="blog-cat">Investment</div><div class="blog-title">The 5 US Markets Offering the Best ROI Right Now</div><div class="blog-meta">Feb 28, 2024 <span>ยท</span> 7 min read</div></div></div> <div class="blog-card"><div class="blog-img"><img src="https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=600&q=80" alt=""></div><div class="blog-body"><div class="blog-cat">Lifestyle</div><div class="blog-title">Interior Design Trends Transforming Luxury Homes in 2024</div><div class="blog-meta">Feb 14, 2024 <span>ยท</span> 4 min read</div></div></div> </div> </section> <!-- โโโโโโโโโโโโโโ CTA BANNER โโโโโโโโโโโโโโ --> <div class="cta-banner"> <div class="cta-bg"><img src="https://images.unsplash.com/photo-1600047509807-ba8f99d2cdde?w=1600&q=85" alt="Luxury home"></div> <div class="cta-inner"> <div class="slabel">Start Your Journey</div> <h2 class="cta-title">Your Dream Home<br>Awaits.</h2> <p class="cta-desc">Whether you're buying, selling, or investing โ our team is ready to make it happen with precision, care, and expertise that's second to none.</p> <div class="cta-acts"> <a href="#contact" class="btn-gold-lg"><span>Book a Consultation</span><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="#properties" class="btn-outline-light">Browse Properties</a> </div> </div> </div> <!-- โโโโโโโโโโโโโโ CONTACT โโโโโโโโโโโโโโ --> <section class="sec sec-dark" id="contact"> <div class="sh"><div class="slabel">Get In Touch</div><h2 class="stitle">Book a <em>Consultation</em></h2></div> <div class="contact-grid"> <div class="contact-info"> <div class="ci-item"><div class="ci-label">Head Office</div><div class="ci-val">888 Fifth Avenue, Suite 1200<br>New York, NY 10022</div></div> <div class="ci-item"><div class="ci-label">Phone</div><div class="ci-val"><a href="tel:+18005551234">+1 800 555 1234</a></div></div> <div class="ci-item"><div class="ci-label">Email</div><div class="ci-val"><a href="mailto:hello@aurenestate.com">hello@aurenestate.com</a></div></div> <div class="ci-item"><div class="ci-label">Office Hours</div><div class="ci-val">MonโFri: 9AM โ 7PM<br>Sat: 10AM โ 5PM</div></div> </div> <form class="contact-form" onsubmit="return false"> <div class="form-row"> <div class="fi"><label>First Name</label><input type="text" placeholder="Alexandra"></div> <div class="fi"><label>Last Name</label><input type="text" placeholder="Auren"></div> </div> <div class="form-row"> <div class="fi"><label>Email</label><input type="email" placeholder="you@example.com"></div> <div class="fi"><label>Phone</label><input type="tel" placeholder="+1 (555) 000-0000"></div> </div> <div class="fi"><label>Enquiry Type</label><select><option>Buying a Property</option><option>Selling a Property</option><option>Investment Advisory</option><option>Property Rental</option><option>General Enquiry</option></select></div> <div class="fi"><label>Message</label><textarea rows="4" placeholder="Tell us about your ideal property or how we can help..."></textarea></div> <button type="submit" class="form-submit">Send Enquiry <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> </form> </div> </section> <!-- โโโโโโโโโโโโโโ FOOTER โโโโโโโโโโโโโโ --> <footer> <div class="foot-top"> <div> <div class="foot-logo nav-logo"><span class="logo-main">Auren</span><span class="logo-sub" style="margin-top:.3rem">Estate ยท Luxury Properties</span></div> <p class="foot-desc">Two decades of trusted expertise in luxury real estate across the United States. Precision, discretion, results.</p> <div class="foot-socs"> <div class="fsoc">in</div><div class="fsoc">ig</div><div class="fsoc">fb</div><div class="fsoc">yt</div> </div> </div> <div class="foot-col"><h5>Properties</h5><ul><li><a href="#">For Sale</a></li><li><a href="#">For Rent</a></li><li><a href="#">New Developments</a></li><li><a href="#">Off-Market</a></li><li><a href="#">Investment</a></li></ul></div> <div class="foot-col"><h5>Company</h5><ul><li><a href="#">About Auren</a></li><li><a href="#">Our Agents</a></li><li><a href="#">Careers</a></li><li><a href="#">Press & Media</a></li><li><a href="#">Blog</a></li></ul></div> <div class="foot-col"><h5>Contact</h5><ul><li><a href="#">888 Fifth Avenue, NY</a></li><li><a href="#">MonโFri: 9AM โ 7PM</a></li><li><a href="#">+1 800 555 1234</a></li><li><a href="#">hello@aurenestate.com</a></li><li><a href="#">Book a Viewing</a></li></ul></div> </div> <div class="foot-bot"> <span class="foot-copy">ยฉ 2024 Auren Estate. All rights reserved.</span> <div class="foot-legal"><a href="#">Privacy Policy</a><a href="#">Terms of Use</a><a href="#">Cookie Settings</a></div> </div> </footer> </body> </html>
CSS
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ RESET + TOKENS โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --ink: #0b0a08; --deep: #111009; --card: #161410; --surface: #1c1a15; --border: #2a2620; --gold: #c9923f; --gold2: #e0ab5a; --gold-pale:#f5dfa8; --gold-dim: rgba(201,146,63,.15); --cream: #f2ece0; --cream2: #e8e0d0; --muted: #7a7060; --white: #faf8f4; --red: #c0392b; --ease: cubic-bezier(.77,0,.175,1); --nh: 74px; } html{scroll-behavior:smooth;overflow-x:hidden} body{font-family:'Urbanist',sans-serif;background:var(--ink);color:var(--cream);-webkit-font-smoothing:antialiased;overflow-x:hidden} img{display:block;max-width:100%} a{text-decoration:none;color:inherit} button{font-family:'Urbanist',sans-serif;cursor:pointer} /* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ GRAIN OVERLAY โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */ .grain{position:fixed;inset:0;z-index:500;pointer-events:none;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px} /* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ NAVBAR โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */ .nav{ position:fixed;inset:0 0 auto;height:var(--nh);z-index:400; display:flex;align-items:center;justify-content:space-between; padding:0 clamp(1.25rem,4vw,3.5rem); transition:background .5s,box-shadow .5s; } .nav.solid{ background:rgba(11,10,8,.94); backdrop-filter:blur(22px); box-shadow:0 1px 0 rgba(201,146,63,.14); } .nav-logo{ display:flex;flex-direction:column;gap:.1em; text-decoration:none; } .logo-main{ font-family:'Cormorant Garamond',serif; font-size:clamp(1.3rem,2.5vw,1.6rem); font-weight:600;letter-spacing:.1em;color:var(--cream); text-transform:uppercase; } .logo-sub{ font-size:clamp(.44rem,.85vw,.52rem); font-weight:600;letter-spacing:.38em;text-transform:uppercase; color:var(--gold);line-height:1; } .nav-links{display:flex;align-items:center;gap:clamp(.8rem,2vw,2rem);list-style:none} .nav-links a{ font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:rgba(242,236,224,.45);transition:color .3s; } .nav-links a:hover{color:var(--gold2)} .nav-r{display:flex;align-items:center;gap:.9rem} .nav-tel{font-size:.73rem;font-weight:500;color:var(--muted);letter-spacing:.06em;transition:color .3s} .nav-tel:hover{color:var(--gold2)} .nav-btn{ display:inline-flex;align-items:center;gap:.5em; padding:.52em 1.5em; border:1px solid var(--gold); color:var(--gold);background:transparent; font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; transition:background .3s,color .3s;white-space:nowrap; } .nav-btn:hover{background:var(--gold);color:var(--ink)} .nav-btn svg{width:12px;height:12px} /* Ham */ .ham{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:4px;z-index:410} .ham span{display:block;width:22px;height:1.5px;background:var(--cream);transition:transform .3s,opacity .3s} .ham.o span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .ham.o span:nth-child(2){opacity:0} .ham.o span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} .mob{ display:none;position:fixed;inset:0;top:var(--nh); background:rgba(11,10,8,.98);backdrop-filter:blur(20px);z-index:399; flex-direction:column;align-items:center;justify-content:center; gap:1.8rem;opacity:0;pointer-events:none;transition:opacity .35s; } .mob.o{opacity:1;pointer-events:all} .mob a{ font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,8vw,3rem); font-style:italic;font-weight:400;color:var(--cream);transition:color .3s; } .mob a:hover{color:var(--gold2)} .mob-btn{ margin-top:.5rem;padding:.65em 2.4em; background:var(--gold)!important;color:var(--ink)!important; font-family:'Urbanist',sans-serif!important;font-style:normal!important; font-size:.8rem!important;font-weight:700!important;letter-spacing:.16em!important;text-transform:uppercase!important; } /* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ HERO SLIDER โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */ .hero{position:relative;width:100%;height:100svh;min-height:600px;overflow:hidden;background:var(--ink)} /* Slides */ .slide{ position:absolute;inset:0; display:flex;flex-direction:column;justify-content:flex-end; opacity:0;pointer-events:none;z-index:1; transition:opacity .85s ease; } .slide.on{opacity:1;pointer-events:all;z-index:2} /* BG */ .sl-bg{position:absolute;inset:0;overflow:hidden} .sl-bg img{ width:100%;height:100%;object-fit:cover;object-position:center; transform:scale(1.08);transition:transform 7s linear; filter:brightness(.52) saturate(.85); } .slide.on .sl-bg img{transform:scale(1)} .sl-bg::after{ content:'';position:absolute;inset:0; background: linear-gradient(110deg,rgba(11,10,8,.88) 0%,rgba(11,10,8,.42) 52%,rgba(11,10,8,.12) 100%), linear-gradient(to top,rgba(11,10,8,.9) 0%,transparent 55%); } /* Slide content */ .sl-body{ position:relative;z-index:5; padding:0px clamp(1.25rem,7vw,6rem) clamp(9rem,18vw,13rem); max-width:820px; } .sl-tag{ display:inline-flex;align-items:center;gap:.75em; font-size:clamp(.58rem,1.1vw,.68rem);font-weight:700;letter-spacing:.3em;text-transform:uppercase; color:var(--gold2);margin-bottom:1.1rem; opacity:0;transform:translateX(-20px); transition:opacity .6s .1s ease,transform .6s .1s ease; } .sl-tag::before{content:'';display:block;width:2rem;height:1px;background:var(--gold);flex-shrink:0} .slide.on .sl-tag{opacity:1;transform:translateX(0)} .sl-title{ font-family:'Cormorant Garamond',serif; font-size:clamp(2.8rem,8vw,4.2rem); font-weight:500;line-height:.95;letter-spacing:-.01em; color:var(--white);margin-bottom:1.1rem; opacity:0;transform:translateY(44px); transition:opacity .75s .25s var(--ease),transform .75s .25s var(--ease); } .sl-title em{font-style:italic;color:var(--gold2);display:block} .slide.on .sl-title{opacity:1;transform:translateY(0)} .sl-desc{ font-size:clamp(.82rem,1.4vw,.94rem);font-weight:300;line-height:1.72; color:rgba(242,236,224,.62);max-width:460px;margin-bottom:2.2rem; opacity:0;transform:translateY(24px); transition:opacity .65s .45s ease,transform .65s .45s ease; } .slide.on .sl-desc{opacity:1;transform:translateY(0)} .sl-acts{ display:flex;flex-wrap:wrap;gap:.85rem; opacity:0;transform:translateY(18px); transition:opacity .6s .6s ease,transform .6s .6s ease; } .slide.on .sl-acts{opacity:1;transform:translateY(0)} /* Buttons */ .btn-gold{ display:inline-flex;align-items:center;gap:.65em; padding:.88em 2.1em; background:var(--gold);color:var(--ink); font-size:.78rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase; border:none;position:relative;overflow:hidden;transition:color .35s; } .btn-gold::before{content:'';position:absolute;inset:0;background:var(--gold2);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)} .btn-gold:hover::before{transform:scaleX(1)} .btn-gold span,.btn-gold svg{position:relative;z-index:1} .btn-gold svg{width:14px;height:14px;transition:transform .3s} .btn-gold:hover svg{transform:translateX(4px)} .btn-outline{ display:inline-flex;align-items:center;gap:.65em; padding:.86em 2em; border:1px solid rgba(242,236,224,.22); color:var(--cream);background:transparent; font-size:.78rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase; transition:border-color .3s,background .3s; } .btn-outline:hover{border-color:var(--gold);background:rgba(201,146,63,.08)} /* Property card overlay */ .sl-card{ position:absolute;right:clamp(1.25rem,5vw,4rem); bottom:clamp(9rem,18vw,13rem);z-index:6; background:rgba(11,10,8,.78);backdrop-filter:blur(22px); border:1px solid rgba(201,146,63,.22); padding:1.4rem 1.7rem;min-width:220px; opacity:0;transform:translateY(26px); transition:opacity .65s .72s ease,transform .65s .72s ease; } .slide.on .sl-card{opacity:1;transform:translateY(0)} .card-lbl{font-size:.58rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:.45rem} .card-price{ font-family:'Cormorant Garamond',serif; font-size:clamp(1.6rem,2.8vw,2.1rem);font-weight:600;color:var(--white);line-height:1;margin-bottom:.55rem; } .card-specs{display:flex;flex-wrap:wrap;gap:.8rem 1.1rem} .card-spec{display:flex;align-items:center;gap:.38em;font-size:.72rem;font-weight:400;color:rgba(242,236,224,.55)} .card-spec svg{width:11px;height:11px;color:var(--gold);flex-shrink:0} /* Slider navigation */ .sl-nav{ position:absolute;left:clamp(1.25rem,3vw,2.5rem); bottom:clamp(3rem,6vw,4.5rem);z-index:20; display:flex;flex-direction:column;gap:.9rem; } .sl-dot{display:flex;align-items:center;gap:.75rem;cursor:pointer} .dot-bar{width:2px;height:30px;background:rgba(242,236,224,.12);position:relative;overflow:hidden;border-radius:1px} .dot-fill{position:absolute;top:0;left:0;right:0;background:var(--gold);height:0%;transition:height .12s linear;border-radius:1px} .dot-num{font-size:.58rem;font-weight:700;letter-spacing:.16em;color:rgba(242,236,224,.28);transition:color .3s} .sl-dot.on .dot-num{color:var(--gold)} .sl-arrows{ position:absolute;right:clamp(1.25rem,2.5vw,2.2rem);top:50%; transform:translateY(-50%);z-index:20; display:flex;flex-direction:column;gap:.5rem; } .sl-arr{ width:44px;height:44px;border:1px solid rgba(242,236,224,.14); background:rgba(11,10,8,.35);backdrop-filter:blur(10px); color:var(--cream); display:flex;align-items:center;justify-content:center; transition:border-color .3s,background .3s; } .sl-arr:hover{border-color:var(--gold);background:var(--gold)} .sl-arr:hover svg{color:var(--ink)} .sl-arr svg{width:16px;height:16px;transition:color .3s} /* Mobile arrows */ .sl-marr{ display:none;position:absolute;bottom:clamp(9rem,18vw,13rem); right:clamp(1.25rem,4vw,2rem);z-index:20;flex-direction:column;gap:.5rem; } .sl-marr-btn{ width:40px;height:40px;border:1px solid rgba(242,236,224,.18); background:rgba(11,10,8,.5);backdrop-filter:blur(10px);color:var(--cream); display:flex;align-items:center;justify-content:center;transition:border-color .3s,background .3s; } .sl-marr-btn:hover{border-color:var(--gold);background:var(--gold)} .sl-marr-btn:hover svg{color:var(--ink)} .sl-marr-btn svg{width:14px;height:14px;transition:color .3s} /* Progress bar bottom */ .sl-progress{ position:absolute;bottom:0;left:0;right:0;height:2px; background:rgba(201,146,63,.12);z-index:20; } .sl-progress-fill{height:100%;background:var(--gold);transform-origin:left;transform:scaleX(0);transition:transform .12s linear} /* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ SEARCH BAR โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */ .search-bar{ position:absolute;bottom:0;left:0;right:0;z-index:20; background:rgba(11,10,8,.85);backdrop-filter:blur(24px); border-top:1px solid rgba(201,146,63,.16); padding:1rem clamp(1.25rem,5vw,4rem); display:flex;align-items:center;flex-wrap:wrap;gap:.75rem 1rem; } .sg{display:flex;flex-direction:column;gap:.28rem;flex:1;min-width:105px} .sg label{font-size:.57rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)} .sg select,.sg input{ background:transparent;border:none;outline:none; color:var(--cream);font-family:'Urbanist',sans-serif; font-size:.86rem;font-weight:400;cursor:pointer;appearance:none;-webkit-appearance:none;min-width:0;width:100%; } .sg select option{background:#181510;color:var(--cream)} .sdiv{width:1px;height:30px;background:rgba(201,146,63,.15);flex-shrink:0;align-self:center} .s-btn{ display:flex;align-items:center;gap:.55em; padding:.72em 1.8em;background:var(--gold);color:var(--ink); font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; border:none;white-space:nowrap;flex-shrink:0;transition:background .3s; } .s-btn:hover{background:var(--gold2)} .s-btn svg{width:14px;height:14px} /* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ TICKER โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */ .ticker{overflow:hidden;white-space:nowrap;background:var(--gold);padding:.62rem 0} .tk-track{display:inline-flex;animation:tk 24s linear infinite} @keyframes tk{from{transform:translateX(0)}to{transform:translateX(-50%)}} .tk-item{ font-family:'Cormorant Garamond',serif;font-size:clamp(.95rem,1.7vw,1.08rem); font-style:italic;font-weight:400;letter-spacing:.1em;color:var(--ink); padding:0 2.6rem;display:inline-flex;align-items:center;gap:2.2rem; } .tk-item::after{content:'โ';font-size:.42em;opacity:.5;font-style:normal} /* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ GLOBAL SECTION STYLES โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */ .sec{padding:clamp(4rem,9vw,8rem) clamp(1.25rem,5vw,5rem)} .sec-alt{background:var(--deep)} .sec-dark{background:var(--ink)} .sec-light{background:var(--cream2)} .sh{margin-bottom:clamp(2.5rem,5vw,4rem)} .sh-row{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:1rem} .slabel{font-size:.62rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem} .stitle{ font-family:'Cormorant Garamond',serif; font-size:clamp(2.2rem,4.5vw,4rem);font-weight:400;line-height:1.05;color:var(--cream); } .stitle em{font-style:italic;color:var(--gold2)} .sec-light .stitle{color:var(--ink)} .sec-light .slabel{color:var(--gold)} .link-all{ display:flex;align-items:center;gap:.5em;white-space:nowrap; font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase; color:var(--gold);transition:gap .3s; } .link-all:hover{gap:.9em} .link-all svg{width:13px;height:13px} /* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ STATS STRIP โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */ .stats-strip{ background:var(--surface); border-top:2px solid var(--gold); border-bottom:1px solid var(--border); display:flex;flex-wrap:wrap; padding:clamp(1.4rem,3.5vw,2.2rem) clamp(1.25rem,5vw,5rem); gap:0; } .stat-item{ flex:1;min-width:120px; display:flex;flex-direction:column;gap:.3rem; padding:0 clamp(1.5rem,3vw,2.8rem); border-right:1px solid var(--border); } .stat-item:first-child{padding-left:0} .stat-item:last-child{border-right:none} .stat-n{ font-family:'Cormorant Garamond',serif; font-size:clamp(2rem,4vw,2.8rem);font-weight:600;color:var(--white);line-height:1; } .stat-n em{font-style:italic;color:var(--gold)} .stat-l{font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)} /* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ FEATURED PROPERTIES (card scroller) โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */ .prop-scroller-wrap{position:relative} .prop-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; } .prop-scroller::-webkit-scrollbar{display:none} .prop-scroller.grabbing{cursor:grabbing} .prop-card{ flex:0 0 clamp(280px,32vw,360px); scroll-snap-align:start; background:var(--card); border:1px solid var(--border); overflow:hidden; transition:border-color .35s,transform .35s; cursor:pointer; } .prop-card:hover{border-color:rgba(201,146,63,.4);transform:translateY(-5px)} .pc-img{position:relative;height:clamp(200px,24vw,260px);overflow:hidden} .pc-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)} .prop-card:hover .pc-img img{transform:scale(1.06)} .pc-badge{ position:absolute;top:.9rem;left:.9rem; padding:.26em .85em;background:var(--gold);color:var(--ink); font-size:.58rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase; } .pc-badge.rent{background:var(--surface);color:var(--gold);border:1px solid var(--gold)} .pc-badge.new{background:var(--ink);color:var(--gold2);border:1px solid rgba(201,146,63,.4)} .pc-fav{ position:absolute;top:.9rem;right:.9rem; width:32px;height:32px;border-radius:50%; background:rgba(11,10,8,.6);backdrop-filter:blur(10px); display:flex;align-items:center;justify-content:center; font-size:.85rem;transition:background .3s;cursor:pointer; } .pc-fav:hover{background:rgba(201,146,63,.3)} .pc-body{padding:1.3rem 1.4rem 1.5rem} .pc-type{font-size:.58rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:.35rem} .pc-name{ font-family:'Cormorant Garamond',serif; font-size:1.2rem;font-weight:500;color:var(--cream); margin-bottom:.35rem;line-height:1.2; } .pc-loc{ display:flex;align-items:center;gap:.35em; font-size:.74rem;color:var(--muted);margin-bottom:1rem; } .pc-loc svg{width:11px;height:11px;color:var(--gold);flex-shrink:0} .pc-foot{ display:flex;align-items:center;justify-content:space-between; border-top:1px solid var(--border);padding-top:.85rem; } .pc-price{font-family:'Cormorant Garamond',serif;font-size:1.25rem;font-weight:600;color:var(--white)} .pc-specs{display:flex;gap:.85rem} .pc-spec{display:flex;align-items:center;gap:.3em;font-size:.68rem;color:var(--muted)} .pc-spec svg{width:11px;height:11px;color:var(--gold)} /* Scroll controls */ .scr-btns{ display:flex;gap:.6rem;margin-top:1.5rem;justify-content:flex-end; } .scr-btn{ width:42px;height:42px;border:1px solid var(--border); background:transparent;color:var(--cream); display:flex;align-items:center;justify-content:center; transition:border-color .3s,background .3s; } .scr-btn:hover{border-color:var(--gold);background:var(--gold)} .scr-btn:hover svg{color:var(--ink)} .scr-btn svg{width:16px;height:16px;transition:color .3s} /* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ CATEGORIES โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */ .cat-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr)); gap:1px;background:var(--border);border:1px solid var(--border); } .cat-card{ background:var(--card); padding:clamp(1.6rem,3vw,2.2rem) clamp(1.4rem,2.5vw,1.8rem); display:flex;flex-direction:column;gap:.7rem; cursor:pointer;position:relative;overflow:hidden; transition:background .35s; } .cat-card::after{ content:'';position:absolute;bottom:0;left:0;right:0;height:2px; background:var(--gold);transform:scaleX(0);transform-origin:left; transition:transform .4s var(--ease); } .cat-card:hover{background:var(--surface)} .cat-card:hover::after{transform:scaleX(1)} .cat-icon{font-size:1.6rem;line-height:1} .cat-name{ font-family:'Cormorant Garamond',serif; font-size:1.1rem;font-weight:500;color:var(--cream); } .cat-count{font-size:.7rem;font-weight:600;letter-spacing:.12em;color:var(--gold)} /* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ WHY CHOOSE / FEATURES โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */ .why-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr)); gap:1.5rem; } .why-card{ padding:clamp(1.6rem,3vw,2.2rem); border:1px solid var(--border); background:var(--card); display:flex;flex-direction:column;gap:.85rem; transition:border-color .35s,transform .35s; } .why-card:hover{border-color:rgba(201,146,63,.35);transform:translateY(-3px)} .why-icon{ width:46px;height:46px; border:1px solid rgba(201,146,63,.25); display:flex;align-items:center;justify-content:center; font-size:1.3rem;transition:border-color .3s,background .3s; } .why-card:hover .why-icon{border-color:var(--gold);background:rgba(201,146,63,.08)} .why-title{ font-family:'Cormorant Garamond',serif; font-size:1.15rem;font-weight:500;color:var(--cream); } .why-desc{font-size:.8rem;font-weight:300;line-height:1.68;color:var(--muted)} /* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ ABOUT SPLIT โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */ .about{display:grid;grid-template-columns:1fr 1fr;min-height:560px} .about-left{position:relative;overflow:hidden} .about-left img{width:100%;height:100%;object-fit:cover;object-position:center top;filter:brightness(.75) saturate(.85);transition:filter .5s} .about-left:hover img{filter:brightness(.85) saturate(1)} .about-left::after{content:'';position:absolute;inset:0;background:linear-gradient(to right,transparent 78%,var(--ink) 100%)} .about-stat-box{ position:absolute;bottom:2rem;left:0;z-index:5; background:var(--gold);color:var(--ink); padding:1rem 1.8rem; } .asb-n{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1} .asb-l{font-size:.57rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;opacity:.7;margin-top:.2rem} .about-right{ background:var(--ink); padding:clamp(3rem,6vw,5.5rem) clamp(2rem,5vw,5rem); display:flex;flex-direction:column;justify-content:center; } .about-right .slabel{margin-bottom:.5rem} .about-right .stitle{margin-bottom:1.4rem} .about-p{font-size:clamp(.84rem,1.3vw,.96rem);font-weight:300;line-height:1.78;color:rgba(242,236,224,.55);max-width:440px} .about-p+.about-p{margin-top:.9rem} .about-pills{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem} .ap{ padding:.35em 1.1em;border:1px solid var(--border); font-size:.63rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:rgba(242,236,224,.35);transition:border-color .3s,color .3s; } .ap:hover{border-color:var(--gold);color:var(--gold)} .about-cta{ display:inline-flex;align-items:center;gap:.6em;margin-top:2rem; font-size:.73rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--gold);transition:gap .3s; } .about-cta:hover{gap:.95em} .about-cta svg{width:13px;height:13px} /* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ AGENTS / TEAM โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */ .agents-scroller-wrap{position:relative} .agents-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; } .agents-scroller::-webkit-scrollbar{display:none} .agents-scroller.grabbing{cursor:grabbing} .agent-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; } .ag-photo{ width:clamp(100px,13vw,130px);height:clamp(100px,13vw,130px); border-radius:50%;overflow:hidden; border:1.5px solid rgba(201,146,63,.2);position:relative; transition:border-color .35s,transform .35s; } .agent-card:hover .ag-photo{border-color:var(--gold);transform:translateY(-4px)} .ag-photo img{ width:100%;height:100%;object-fit:cover;object-position:center top; filter:grayscale(.6);transition:filter .4s; } .agent-card:hover .ag-photo img{filter:grayscale(0)} .ag-name{font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-weight:500;color:var(--cream)} .ag-role{font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)} .ag-sales{font-size:.73rem;font-weight:300;color:var(--muted)} /* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ TESTIMONIALS SCROLLER โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */ .testi-scroller-wrap{position:relative} .testi-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; } .testi-scroller::-webkit-scrollbar{display:none} .testi-scroller.grabbing{cursor:grabbing} .testi-card{ flex:0 0 clamp(280px,36vw,420px);scroll-snap-align:start; background:var(--surface); border:1px solid var(--border); padding:clamp(1.6rem,3vw,2.2rem); display:flex;flex-direction:column;gap:1rem; transition:border-color .35s; } .testi-card:hover{border-color:rgba(201,146,63,.3)} .testi-stars{display:flex;gap:.2em} .testi-stars span{color:var(--gold);font-size:.88rem} .testi-quote{ font-family:'Cormorant Garamond',serif; font-size:clamp(1rem,1.6vw,1.15rem);font-style:italic;font-weight:300; line-height:1.65;color:rgba(242,236,224,.75); } .testi-auth{ display:flex;align-items:center;gap:.9rem; margin-top:auto;padding-top:.9rem; border-top:1px solid var(--border); } .ta-av{width:38px;height:38px;border-radius:50%;overflow:hidden;border:1px solid rgba(201,146,63,.25);flex-shrink:0} .ta-av img{width:100%;height:100%;object-fit:cover} .ta-name{font-family:'Cormorant Garamond',serif;font-size:.95rem;font-weight:500;color:var(--cream)} .ta-prop{font-size:.62rem;color:var(--muted)} /* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ BLOG / NEWS โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */ .blog-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)); gap:1.5rem; } .blog-card{background:var(--card);border:1px solid var(--border);overflow:hidden;cursor:pointer;transition:border-color .35s,transform .35s} .blog-card:hover{border-color:rgba(201,146,63,.35);transform:translateY(-4px)} .blog-img{height:clamp(160px,18vw,210px);overflow:hidden} .blog-img img{width:100%;height:100%;object-fit:cover;filter:brightness(.85);transition:transform .6s var(--ease),filter .5s} .blog-card:hover .blog-img img{transform:scale(1.06);filter:brightness(1)} .blog-body{padding:1.2rem 1.4rem 1.5rem} .blog-cat{font-size:.58rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:.4rem} .blog-title{font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-weight:500;color:var(--cream);line-height:1.3;margin-bottom:.5rem} .blog-meta{font-size:.7rem;color:var(--muted);display:flex;align-items:center;gap:.6em} .blog-meta span{color:var(--border)} /* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ CTA BANNER โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */ .cta-banner{ position:relative;overflow:hidden; min-height:420px; display:flex;align-items:center;justify-content:center; text-align:center; padding:clamp(4rem,8vw,6rem) clamp(1.25rem,5vw,5rem); } .cta-bg{position:absolute;inset:0} .cta-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.28) saturate(.7)} .cta-bg::after{content:'';position:absolute;inset:0;background:rgba(11,10,8,.55)} .cta-inner{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;gap:1.5rem;max-width:700px} .cta-inner .slabel{color:rgba(245,223,168,.65)} .cta-title{ font-family:'Cormorant Garamond',serif; font-size:clamp(2.4rem,5.5vw,5rem);font-weight:400;font-style:italic; color:var(--white);line-height:1; } .cta-desc{font-size:clamp(.84rem,1.4vw,.96rem);font-weight:300;line-height:1.65;color:rgba(242,236,224,.6);max-width:480px} .cta-acts{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center} .btn-gold-lg{ display:inline-flex;align-items:center;gap:.65em; padding:1em 2.4em;background:var(--gold);color:var(--ink); font-size:.8rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase; border:none;transition:background .3s; } .btn-gold-lg:hover{background:var(--gold2)} .btn-gold-lg svg{width:14px;height:14px;transition:transform .3s} .btn-gold-lg:hover svg{transform:translateX(4px)} .btn-outline-light{ display:inline-flex;align-items:center;gap:.65em; padding:.97em 2.2em;border:1px solid rgba(242,236,224,.3); color:var(--cream);background:transparent; font-size:.8rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase; transition:border-color .3s,background .3s; } .btn-outline-light:hover{border-color:var(--gold);background:rgba(201,146,63,.1)} /* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ CONTACT SECTION โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start} .contact-info{display:flex;flex-direction:column;gap:1.8rem} .ci-item{display:flex;flex-direction:column;gap:.3rem} .ci-label{font-size:.58rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)} .ci-val{font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-weight:400;color:var(--cream)} .ci-val a{color:var(--cream);transition:color .3s} .ci-val a:hover{color:var(--gold2)} .contact-form{display:flex;flex-direction:column;gap:1rem} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .fi{display:flex;flex-direction:column;gap:.4rem} .fi label{font-size:.58rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)} .fi input,.fi select,.fi textarea{ background:var(--surface);border:1px solid var(--border); padding:.75em 1em; color:var(--cream);font-family:'Urbanist',sans-serif;font-size:.86rem;font-weight:400; outline:none;appearance:none;-webkit-appearance:none; transition:border-color .3s; resize:none; } .fi input::placeholder,.fi textarea::placeholder{color:var(--muted)} .fi input:focus,.fi select:focus,.fi textarea:focus{border-color:var(--gold)} .fi select option{background:#181510} .form-submit{ display:flex;align-items:center;gap:.65em; padding:.9em 2.2em;background:var(--gold);color:var(--ink); font-family:'Urbanist',sans-serif;font-size:.78rem;font-weight:700; letter-spacing:.13em;text-transform:uppercase; border:none;margin-top:.5rem;transition:background .3s; align-self:flex-start; } .form-submit:hover{background:var(--gold2)} .form-submit svg{width:14px;height:14px;transition:transform .3s} .form-submit:hover svg{transform:translateX(4px)} /* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ FOOTER โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */ footer{background:var(--surface);padding:clamp(3rem,6vw,5rem) clamp(1.25rem,5vw,5rem) clamp(1.5rem,3vw,2.5rem)} .foot-top{ display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr; gap:clamp(2rem,4vw,3.5rem); padding-bottom:clamp(2rem,4vw,3rem); border-bottom:1px solid var(--border); margin-bottom:clamp(1.5rem,3vw,2.2rem); } .foot-logo .logo-main{font-size:1.5rem} .foot-desc{font-size:.78rem;font-weight:300;line-height:1.7;color:rgba(242,236,224,.35);margin-top:.9rem;max-width:240px} .foot-socs{display:flex;gap:.6rem;margin-top:1.2rem} .fsoc{ width:32px;height:32px;border:1px solid var(--border); display:flex;align-items:center;justify-content:center; font-size:.68rem;font-weight:700;color:var(--muted);cursor:pointer; transition:border-color .3s,color .3s; } .fsoc:hover{border-color:var(--gold);color:var(--gold2)} .foot-col h5{ font-size:.6rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase; color:var(--gold);margin-bottom:1rem; } .foot-col ul{list-style:none;display:flex;flex-direction:column;gap:.6rem} .foot-col ul li a{font-size:.78rem;font-weight:300;color:rgba(242,236,224,.35);transition:color .3s} .foot-col ul li a:hover{color:var(--gold2)} .foot-bot{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between} .foot-copy{font-size:.68rem;font-weight:300;color:rgba(242,236,224,.2);letter-spacing:.04em} .foot-legal{display:flex;gap:1.5rem} .foot-legal a{font-size:.66rem;color:rgba(242,236,224,.2);transition:color .3s} .foot-legal a:hover{color:var(--gold2)} /* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ RESPONSIVE โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */ @media(max-width:1024px){ .about{grid-template-columns:1fr} .about-left{min-height:380px} .contact-grid{grid-template-columns:1fr} .foot-top{grid-template-columns:1fr 1fr} .sl-arrows{display:none} .sl-marr{display:flex!important} } @media(max-width:768px){ .nav-links,.nav-r{display:none} .ham{display:flex} .mob{display:flex} .sl-card{display:none} .search-bar .sdiv{display:none} .sg{min-width:calc(50% - .5rem)} .form-row{grid-template-columns:1fr} .stats-strip .stat-item{border-right:none;border-bottom:1px solid var(--border);padding:.9rem 0} .stats-strip .stat-item:last-child{border-bottom:none} .stats-strip{flex-direction:column} .foot-top{grid-template-columns:1fr 1fr} } @media(max-width:520px){ .sg{min-width:100%} .search-bar{padding:.85rem 1.25rem} .foot-top{grid-template-columns:1fr} .sl-title{font-size:clamp(2.4rem,9.5vw,3.5rem)} .cta-title{font-size:clamp(2rem,9vw,3.5rem)} }
JavaScript
(function(){ /* โโ NAV โโ */ window.addEventListener('scroll',()=>{ document.getElementById('nav').classList.toggle('solid', scrollY > 20); },{passive:true}); const ham = document.getElementById('ham'); const 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 = ''; })); /* โโ HERO SLIDER โโ */ const slides = Array.from(document.querySelectorAll('.slide')); const dots = Array.from(document.querySelectorAll('.sl-dot')); const TOTAL = slides.length; const DUR = 6000; let cur = 0, busy = false, timer, fillRaf, fillStart; function goTo(idx){ if(busy || idx===cur) return; busy = true; const prev = cur; slides[prev].style.transition='opacity .85s ease'; slides[prev].style.opacity='0'; setTimeout(()=>{ slides[prev].classList.remove('on'); slides[prev].style.cssText=''; cur = idx; slides[cur].style.opacity='0'; slides[cur].classList.add('on'); void slides[cur].offsetHeight; slides[cur].style.transition='opacity .85s ease'; slides[cur].style.opacity='1'; setTimeout(()=>{ slides[cur].style.cssText=''; busy=false; },860); syncUI(); },840); startAutoplay(); } function next(){ goTo((cur+1)%TOTAL) } function prev(){ goTo((cur-1+TOTAL)%TOTAL) } function syncUI(){ dots.forEach((d,i)=>{ d.classList.toggle('on',i===cur); if(i!==cur) d.querySelector('.dot-fill').style.height='0%'; }); } function startAutoplay(){ clearTimeout(timer); cancelAnimationFrame(fillRaf); dots.forEach(d=>d.querySelector('.dot-fill').style.height='0%'); const fill = document.getElementById('slProgressFill'); fill.style.transform='scaleX(0)'; fillStart = performance.now(); (function tick(){ const p = Math.min((performance.now()-fillStart)/DUR,1); const activeDot = dots[cur]; if(activeDot) activeDot.querySelector('.dot-fill').style.height=(p*100)+'%'; fill.style.transform=`scaleX(${p})`; if(p<1) fillRaf=requestAnimationFrame(tick); })(); timer = setTimeout(next, DUR); } document.getElementById('slPrev').addEventListener('click', prev); document.getElementById('slNext').addEventListener('click', next); document.getElementById('slPrevM').addEventListener('click', prev); document.getElementById('slNextM').addEventListener('click', next); dots.forEach(d=>d.addEventListener('click',()=>goTo(+d.dataset.i))); document.addEventListener('keydown',e=>{ if(e.key==='ArrowRight') next(); if(e.key==='ArrowLeft') prev(); }); let tx=0; const heroEl = document.querySelector('.hero'); heroEl.addEventListener('touchstart',e=>{ tx=e.touches[0].clientX; },{passive:true}); heroEl.addEventListener('touchend',e=>{ const dx=e.changedTouches[0].clientX-tx; if(Math.abs(dx)>44) dx<0?next():prev(); },{passive:true}); startAutoplay(); /* โโ DRAG-SCROLL โโ */ function makeDraggable(el){ let isDown=false, startX, scrollLeft; el.addEventListener('mousedown',e=>{ isDown=true; el.classList.add('grabbing'); startX=e.pageX-el.offsetLeft; scrollLeft=el.scrollLeft; }); el.addEventListener('mouseleave',()=>{ isDown=false; el.classList.remove('grabbing'); }); el.addEventListener('mouseup',()=>{ isDown=false; el.classList.remove('grabbing'); }); el.addEventListener('mousemove',e=>{ if(!isDown) return; e.preventDefault(); const x=e.pageX-el.offsetLeft; el.scrollLeft=scrollLeft-(x-startX)*1.2; }); } function makeScrollBtn(scrollEl, leftBtn, rightBtn, amount){ leftBtn.addEventListener('click',()=>scrollEl.scrollBy({left:-amount,behavior:'smooth'})); rightBtn.addEventListener('click',()=>scrollEl.scrollBy({left:amount,behavior:'smooth'})); } const propScr = document.getElementById('propScroller'); makeDraggable(propScr); makeScrollBtn(propScr, document.getElementById('propLeft'), document.getElementById('propRight'), 380); const agScr = document.getElementById('agScroller'); makeDraggable(agScr); makeScrollBtn(agScr, document.getElementById('agLeft'), document.getElementById('agRight'), 280); const tScr = document.getElementById('testiScroller'); makeDraggable(tScr); makeScrollBtn(tScr, document.getElementById('tLeft'), document.getElementById('tRight'), 440); /* โโ STAT COUNTER โโ */ function countUp(el, target, dec=0){ const dur=2000, start=performance.now(); (function update(now){ const p=Math.min((now-start)/dur,1); const ease=1-Math.pow(1-p,3); const v=(ease*target).toFixed(dec); el.textContent=parseFloat(v).toLocaleString(); if(p<1) requestAnimationFrame(update); })(start); } const obs = new IntersectionObserver(entries=>{ entries.forEach(e=>{ if(!e.isIntersecting) return; const el = e.target; const t = +el.dataset.target; const dec = t<10 ? 1 : 0; countUp(el, t, dec); obs.unobserve(el); }); },{threshold:.5}); document.querySelectorAll('[data-target]').forEach(el=>obs.observe(el)); })();
Output Preview
Desktop
Mobile
Fullscreen