790 lines
40 KiB
HTML
790 lines
40 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Moore Sunny Daze — Maravilla 1403 | Miramar Beach Vacation Rental</title>
|
|
<style>
|
|
/* ===== RESET & BASE ===== */
|
|
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
|
html{scroll-behavior:smooth;font-size:16px}
|
|
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;color:#1a1a2e;background:#fff;overflow-x:hidden;line-height:1.6}
|
|
img{max-width:100%;display:block}
|
|
a{text-decoration:none;color:inherit}
|
|
|
|
/* ===== TYPOGRAPHY ===== */
|
|
h1,h2,h3,.hero-title,.stat-number{font-weight:800;letter-spacing:-0.02em;line-height:1.1}
|
|
h2{font-size:clamp(2rem,4.5vw,3.5rem);margin-bottom:0.5rem}
|
|
.section-tag{display:inline-block;text-transform:uppercase;font-size:0.8rem;font-weight:700;letter-spacing:0.15em;margin-bottom:0.75rem;border-radius:50px;padding:0.35em 1em}
|
|
|
|
/* ===== COLORS ===== */
|
|
:root{
|
|
--coral:#FF6B35;
|
|
--coral-dark:#E55A2B;
|
|
--teal:#00B4D8;
|
|
--teal-dark:#0096B4;
|
|
--yellow:#FFD166;
|
|
--yellow-bright:#FFE066;
|
|
--white:#FFFFFF;
|
|
--off-white:#FFF9F5;
|
|
--dark:#1a1a2e;
|
|
--gray-light:#F0EDEB;
|
|
--text-muted:#6B7280;
|
|
}
|
|
|
|
/* ===== UTILITY ===== */
|
|
.container{max-width:1200px;margin:0 auto;padding:0 1.5rem}
|
|
.section{padding:5rem 0}
|
|
.text-center{text-align:center}
|
|
.text-coral{color:var(--coral)}
|
|
.text-teal{color:var(--teal)}
|
|
|
|
/* ===== ANIMATIONS ===== */
|
|
@keyframes float{
|
|
0%,100%{transform:translateY(0)}
|
|
50%{transform:translateY(-12px)}
|
|
}
|
|
@keyframes pulse{
|
|
0%,100%{transform:scale(1);box-shadow:0 8px 32px rgba(255,107,53,0.4)}
|
|
50%{transform:scale(1.05);box-shadow:0 16px 48px rgba(255,107,53,0.6)}
|
|
}
|
|
@keyframes shimmer{
|
|
0%{background-position:-200% 0}
|
|
100%{background-position:200% 0}
|
|
}
|
|
@keyframes wave{
|
|
0%{transform:translateX(0)}
|
|
50%{transform:translateX(-50%)}
|
|
100%{transform:translateX(0)}
|
|
}
|
|
@keyframes driftLeft{
|
|
0%{transform:translateX(0)}
|
|
100%{transform:translateX(-50%)}
|
|
}
|
|
@keyframes particleFloat{
|
|
0%{transform:translateY(100vh) rotate(0deg);opacity:0}
|
|
10%{opacity:1}
|
|
90%{opacity:1}
|
|
100%{transform:translateY(-10vh) rotate(720deg);opacity:0}
|
|
}
|
|
@keyframes bounceIn{
|
|
0%{transform:scale(0.3);opacity:0}
|
|
50%{transform:scale(1.05)}
|
|
70%{transform:scale(0.9)}
|
|
100%{transform:scale(1);opacity:1}
|
|
}
|
|
@keyframes slideUp{
|
|
from{transform:translateY(60px);opacity:0}
|
|
to{transform:translateY(0);opacity:1}
|
|
}
|
|
@keyframes slideLeft{
|
|
from{transform:translateX(-60px);opacity:0}
|
|
to{transform:translateX(0);opacity:1}
|
|
}
|
|
@keyframes slideRight{
|
|
from{transform:translateX(60px);opacity:0}
|
|
to{transform:translateX(0);opacity:1}
|
|
}
|
|
|
|
.reveal{opacity:0}
|
|
.reveal.visible{animation:slideUp 0.7s cubic-bezier(0.16,1,0.3,1) forwards}
|
|
.reveal-left.visible{animation:slideLeft 0.7s cubic-bezier(0.16,1,0.3,1) forwards}
|
|
.reveal-right.visible{animation:slideRight 0.7s cubic-bezier(0.16,1,0.3,1) forwards}
|
|
.delay-1{animation-delay:0.1s}
|
|
.delay-2{animation-delay:0.2s}
|
|
.delay-3{animation-delay:0.3s}
|
|
.delay-4{animation-delay:0.4s}
|
|
|
|
/* ===== NAVBAR ===== */
|
|
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center;transition:all 0.3s ease}
|
|
.navbar.scrolled{background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);box-shadow:0 2px 20px rgba(0,0,0,0.08);padding:0.6rem 2rem}
|
|
.navbar.scrolled .nav-links a{color:var(--dark)}
|
|
.nav-logo{font-size:1.4rem;font-weight:800;color:var(--white);display:flex;align-items:center;gap:0.5rem}
|
|
.navbar.scrolled .nav-logo{color:var(--coral)}
|
|
.nav-logo .sun{font-size:1.8rem;animation:float 3s ease-in-out infinite}
|
|
.nav-links{display:flex;gap:2rem;align-items:center;list-style:none}
|
|
.nav-links a{color:var(--white);font-weight:600;font-size:0.95rem;transition:color 0.3s;position:relative}
|
|
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--coral);transition:width 0.3s}
|
|
.nav-links a:hover::after{width:100%}
|
|
.nav-cta{background:var(--coral);color:#fff!important;padding:0.6rem 1.5rem;border-radius:50px;font-weight:700;transition:all 0.3s}
|
|
.navbar.scrolled .nav-cta{color:#fff!important}
|
|
.nav-cta:hover{background:var(--coral-dark);transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,107,53,0.4)}
|
|
.nav-cta::after{display:none!important}
|
|
.mobile-toggle{display:none;background:none;border:none;color:var(--white);font-size:1.8rem;cursor:pointer}
|
|
.navbar.scrolled .mobile-toggle{color:var(--dark)}
|
|
|
|
/* ===== HERO ===== */
|
|
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;background:linear-gradient(135deg,#0a1628 0%,#0d2137 30%,#003849 70%,#00475e 100%)}
|
|
.hero-bg{position:absolute;inset:0;background:url('https://static.wixstatic.com/media/0a1b51_e07cc4dbb6c74815812ad594235b011e~mv2.jpg') center/cover no-repeat;opacity:0.35;transform:scale(1.05)}
|
|
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,var(--teal-dark) 95%,var(--dark) 100%);opacity:0.6}
|
|
|
|
/* Particles */
|
|
.hero-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
|
|
.particle{position:absolute;border-radius:50%;background:var(--yellow);opacity:0;animation:particleFloat linear infinite}
|
|
.particle:nth-child(1){width:4px;height:4px;left:10%;animation-duration:8s;animation-delay:0s}
|
|
.particle:nth-child(2){width:3px;height:3px;left:22%;animation-duration:12s;animation-delay:1s}
|
|
.particle:nth-child(3){width:5px;height:5px;left:35%;animation-duration:10s;animation-delay:2s}
|
|
.particle:nth-child(4){width:3px;height:3px;left:48%;animation-duration:14s;animation-delay:0.5s}
|
|
.particle:nth-child(5){width:4px;height:4px;left:55%;animation-duration:9s;animation-delay:3s}
|
|
.particle:nth-child(6){width:6px;height:6px;left:65%;animation-duration:11s;animation-delay:1.5s}
|
|
.particle:nth-child(7){width:3px;height:3px;left:75%;animation-duration:13s;animation-delay:2.5s}
|
|
.particle:nth-child(8){width:4px;height:4px;left:85%;animation-duration:8s;animation-delay:0.8s}
|
|
.particle:nth-child(9){width:5px;height:5px;left:92%;animation-duration:10s;animation-delay:3.5s}
|
|
.particle:nth-child(10){width:3px;height:3px;left:5%;animation-duration:15s;animation-delay:4s}
|
|
.particle:nth-child(11){width:4px;height:4px;left:40%;animation-duration:12s;animation-delay:5s}
|
|
.particle:nth-child(12){width:5px;height:5px;left:60%;animation-duration:9s;animation-delay:6s}
|
|
.particle:nth-child(13){width:3px;height:3px;left:18%;animation-duration:11s;animation-delay:2s}
|
|
.particle:nth-child(14){width:4px;height:4px;left:80%;animation-duration:14s;animation-delay:4.5s}
|
|
.particle:nth-child(15){width:3px;height:3px;left:50%;animation-duration:7s;animation-delay:3s}
|
|
|
|
.hero-content{position:relative;z-index:2;max-width:800px;padding:0 2rem;margin-top:2rem}
|
|
.hero-badge{display:inline-block;background:rgba(255,255,255,0.15);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.2);color:var(--yellow);padding:0.5rem 1.25rem;border-radius:50px;font-size:0.85rem;font-weight:700;letter-spacing:0.05em;margin-bottom:1.5rem;animation:slideUp 0.8s ease-out}
|
|
.hero-title{font-size:clamp(3rem,7vw,5.5rem);color:var(--white);margin-bottom:0.5rem;line-height:1.05}
|
|
.hero-title .highlight{color:var(--yellow);display:block;font-size:clamp(2rem,5vw,3.5rem)}
|
|
.hero-title .teal-accent{color:var(--teal)}
|
|
.hero-subtitle{font-size:clamp(1.1rem,2vw,1.4rem);color:rgba(255,255,255,0.85);margin-bottom:2rem;max-width:550px}
|
|
.hero-buttons{display:flex;gap:1rem;flex-wrap:wrap}
|
|
.btn{display:inline-flex;align-items:center;gap:0.5rem;padding:1rem 2.25rem;border-radius:50px;font-weight:700;font-size:1.05rem;border:none;cursor:pointer;transition:all 0.3s;letter-spacing:0.01em}
|
|
.btn-primary{background:var(--coral);color:#fff;box-shadow:0 8px 32px rgba(255,107,53,0.35)}
|
|
.btn-primary:hover{background:var(--coral-dark);transform:translateY(-3px);box-shadow:0 12px 40px rgba(255,107,53,0.5)}
|
|
.btn-outline{background:transparent;color:#fff;border:2px solid rgba(255,255,255,0.4)}
|
|
.btn-outline:hover{background:rgba(255,255,255,0.1);border-color:#fff;transform:translateY(-3px)}
|
|
|
|
/* Hero Wave */
|
|
.hero-wave{position:absolute;bottom:-2px;left:0;width:100%;z-index:3;overflow:hidden;line-height:0}
|
|
.hero-wave svg{display:block;width:200%;height:120px;animation:wave 8s linear infinite}
|
|
.hero-wave svg path{fill:var(--off-white)}
|
|
|
|
/* ===== STATS BANNER ===== */
|
|
.stats-section{background:var(--off-white);position:relative;z-index:4;padding:3rem 0}
|
|
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:center}
|
|
.stat-card{position:relative;padding:1.5rem}
|
|
.stat-card::after{content:'';position:absolute;right:0;top:20%;height:60%;width:1px;background:var(--gray-light)}
|
|
.stat-card:last-child::after{display:none}
|
|
.stat-icon{font-size:2.5rem;margin-bottom:0.5rem;display:block}
|
|
.stat-number{font-size:clamp(2.5rem,4vw,3.5rem);color:var(--coral);margin-bottom:0.25rem}
|
|
.stat-label{font-size:0.95rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:0.05em}
|
|
|
|
/* ===== SECTION HEADERS ===== */
|
|
.section-header{margin-bottom:3.5rem}
|
|
.section-header .section-tag{background:rgba(0,180,216,0.1);color:var(--teal)}
|
|
.section-header h2{color:var(--dark)}
|
|
.section-header p{color:var(--text-muted);font-size:1.15rem;max-width:600px;margin:0 auto}
|
|
|
|
/* ===== BEDROOMS ===== */
|
|
.bedrooms-section{background:var(--white);position:relative}
|
|
.bedrooms-section .section-tag{background:rgba(255,107,53,0.1);color:var(--coral)}
|
|
.bedrooms-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
|
|
.bedroom-card{border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 4px 24px rgba(0,0,0,0.06);transition:all 0.3s;cursor:pointer}
|
|
.bedroom-card:hover{transform:translateY(-8px);box-shadow:0 16px 48px rgba(0,0,0,0.12)}
|
|
.bedroom-card-img{height:260px;overflow:hidden;position:relative}
|
|
.bedroom-card-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s}
|
|
.bedroom-card:hover .bedroom-card-img img{transform:scale(1.08)}
|
|
.bedroom-card-badge{position:absolute;top:1rem;left:1rem;background:var(--coral);color:#fff;padding:0.3rem 0.9rem;border-radius:50px;font-size:0.8rem;font-weight:700;letter-spacing:0.03em}
|
|
.bedroom-card-body{padding:1.5rem}
|
|
.bedroom-card-body h3{font-size:1.25rem;margin-bottom:0.25rem;color:var(--dark)}
|
|
.bedroom-card-body .bed-type{color:var(--teal);font-weight:700;font-size:0.9rem}
|
|
.bedroom-card-body .bed-details{color:var(--text-muted);font-size:0.9rem;margin-top:0.25rem}
|
|
.bedroom-extra{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:1rem}
|
|
.bedroom-extra-card{background:linear-gradient(135deg,var(--teal),var(--teal-dark));border-radius:20px;padding:2rem;color:#fff;display:flex;align-items:center;gap:1.5rem}
|
|
.bedroom-extra-card .extra-icon{font-size:3rem}
|
|
.bedroom-extra-card h4{font-size:1.3rem;margin-bottom:0.25rem}
|
|
.bedroom-extra-card p{opacity:0.9;font-size:0.95rem}
|
|
|
|
/* ===== AMENITIES ===== */
|
|
.amenities-section{background:var(--off-white)}
|
|
.amenities-section .section-tag{background:rgba(255,209,102,0.3);color:#b8860b}
|
|
.amenities-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
|
|
.amenity-card{background:#fff;border-radius:16px;padding:2rem 1.5rem;text-align:center;transition:all 0.3s;position:relative;overflow:hidden}
|
|
.amenity-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--coral),var(--teal),var(--yellow));transform:scaleX(0);transition:transform 0.4s}
|
|
.amenity-card:hover::before{transform:scaleX(1)}
|
|
.amenity-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,0.08)}
|
|
.amenity-icon{font-size:2.8rem;margin-bottom:1rem;display:block}
|
|
.amenity-card h4{font-size:1.1rem;margin-bottom:0.3rem;color:var(--dark)}
|
|
.amenity-card p{font-size:0.85rem;color:var(--text-muted)}
|
|
.amenity-featured{grid-column:span 2;background:linear-gradient(135deg,var(--coral),#FF8C5A);color:#fff;display:flex;align-items:center;justify-content:center;gap:2rem;padding:2.5rem 2rem;text-align:left}
|
|
.amenity-featured::before{display:none}
|
|
.amenity-featured .amenity-icon{font-size:3.5rem;margin:0;color:var(--yellow)}
|
|
.amenity-featured h4{font-size:1.4rem;color:#fff;margin-bottom:0.4rem}
|
|
.amenity-featured p{color:rgba(255,255,255,0.9);font-size:0.95rem}
|
|
|
|
/* ===== BEACH BANNER ===== */
|
|
.beach-banner{position:relative;padding:6rem 0;overflow:hidden}
|
|
.beach-banner-bg{position:absolute;inset:0;background:url('https://static.wixstatic.com/media/0a1b51_6e0326ddac2349b9a62a2a416dcb49e5~mv2.jpg') center/cover no-repeat fixed}
|
|
.beach-banner::after{content:'';position:absolute;inset:0;background:linear-gradient(to right,rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.3) 60%,rgba(0,0,0,0.5) 100%)}
|
|
.beach-banner-content{position:relative;z-index:2;max-width:600px}
|
|
.beach-banner-content h2{color:#fff;font-size:clamp(2rem,5vw,3.5rem);margin-bottom:1rem}
|
|
.beach-banner-content p{color:rgba(255,255,255,0.85);font-size:1.15rem;margin-bottom:1.5rem}
|
|
.beach-banner-stats{display:flex;gap:2rem;margin-top:2rem;flex-wrap:wrap}
|
|
.beach-stat{text-align:center;color:#fff}
|
|
.beach-stat .bs-num{font-size:2.5rem;font-weight:800;color:var(--yellow)}
|
|
.beach-stat .bs-label{font-size:0.9rem;opacity:0.8;text-transform:uppercase;letter-spacing:0.05em}
|
|
|
|
/* ===== AREA GUIDE ===== */
|
|
.area-section{background:var(--white)}
|
|
.area-section .section-tag{background:rgba(0,180,216,0.1);color:var(--teal)}
|
|
.area-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
|
|
.area-card{position:relative;border-radius:20px;overflow:hidden;height:320px;group:true}
|
|
.area-card-img{position:absolute;inset:0}
|
|
.area-card-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s}
|
|
.area-card:hover .area-card-img img{transform:scale(1.08)}
|
|
.area-card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.2) 40%,rgba(0,0,0,0) 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:2rem}
|
|
.area-card-tag{display:inline-block;background:var(--teal);color:#fff;padding:0.25rem 0.75rem;border-radius:50px;font-size:0.7rem;font-weight:700;letter-spacing:0.05em;margin-bottom:0.75rem;width:fit-content}
|
|
.area-card h3{color:#fff;font-size:1.4rem;margin-bottom:0.35rem}
|
|
.area-card p{color:rgba(255,255,255,0.8);font-size:0.9rem;line-height:1.5}
|
|
.area-restaurants{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1rem}
|
|
.resto-chip{background:var(--gray-light);border-radius:50px;padding:0.75rem 1.25rem;text-align:center;font-weight:700;font-size:0.9rem;color:var(--dark);transition:all 0.3s;cursor:pointer}
|
|
.resto-chip:hover{background:var(--teal);color:#fff;transform:translateY(-2px)}
|
|
.resto-chip .cuisine{display:block;font-size:0.7rem;font-weight:400;opacity:0.7;margin-top:0.15rem}
|
|
|
|
/* ===== CTA SECTION ===== */
|
|
.cta-section{background:linear-gradient(135deg,var(--coral) 0%,#FF8C5A 50%,var(--coral) 100%);padding:5rem 0;text-align:center;position:relative;overflow:hidden}
|
|
.cta-section::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 L35 15 L45 15 L37 22 L40 32 L30 26 L20 32 L23 22 L15 15 L25 15 Z' fill='rgba(255,255,255,0.05)'/%3E%3C/svg%3E") repeat;opacity:0.5}
|
|
.cta-content{position:relative;z-index:1;max-width:700px;margin:0 auto;padding:0 1.5rem}
|
|
.cta-content h2{color:#fff;font-size:clamp(2.2rem,5vw,4rem);margin-bottom:1rem}
|
|
.cta-content p{color:rgba(255,255,255,0.9);font-size:1.2rem;margin-bottom:2.5rem}
|
|
.btn-cta{display:inline-flex;align-items:center;gap:0.75rem;background:var(--yellow);color:var(--dark);padding:1.25rem 3rem;border-radius:50px;font-size:1.3rem;font-weight:800;letter-spacing:-0.01em;animation:pulse 2.5s infinite;cursor:pointer;border:none;box-shadow:0 12px 40px rgba(0,0,0,0.2);transition:all 0.3s}
|
|
.btn-cta:hover{animation:none;transform:scale(1.08);box-shadow:0 20px 60px rgba(0,0,0,0.3)}
|
|
.btn-cta .cta-arrow{font-size:1.5rem;transition:transform 0.3s}
|
|
.btn-cta:hover .cta-arrow{transform:translateX(6px)}
|
|
.cta-trust{display:flex;gap:2rem;justify-content:center;margin-top:2rem;flex-wrap:wrap}
|
|
.cta-trust-item{color:rgba(255,255,255,0.8);font-size:0.9rem;display:flex;align-items:center;gap:0.4rem}
|
|
.cta-trust-item .check{color:var(--yellow);font-weight:800}
|
|
|
|
/* ===== OWNERS ===== */
|
|
.owners-section{background:var(--off-white)}
|
|
.owners-section .section-tag{background:rgba(255,209,102,0.3);color:#b8860b}
|
|
.owners-card{max-width:600px;margin:0 auto;background:#fff;border-radius:20px;padding:3rem 2rem;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,0.06)}
|
|
.owners-img{width:120px;height:120px;border-radius:50%;object-fit:cover;margin:0 auto 1.5rem;border:4px solid var(--teal)}
|
|
.owners-card h3{font-size:1.5rem;margin-bottom:0.25rem}
|
|
.owners-card .owners-sub{color:var(--text-muted);margin-bottom:1rem}
|
|
.owners-quote{font-style:italic;color:var(--text-muted);font-size:1.05rem;line-height:1.7}
|
|
|
|
/* ===== FOOTER ===== */
|
|
.footer{background:var(--dark);color:rgba(255,255,255,0.7);padding:4rem 0 2rem}
|
|
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:3rem}
|
|
.footer-brand h3{color:#fff;font-size:1.6rem;margin-bottom:0.75rem}
|
|
.footer-brand .sun{color:var(--yellow)}
|
|
.footer-brand p{font-size:0.95rem;line-height:1.7}
|
|
.footer h4{color:#fff;margin-bottom:1rem;font-size:1.1rem}
|
|
.footer-links{list-style:none;display:flex;flex-direction:column;gap:0.6rem}
|
|
.footer-links a{transition:color 0.3s;font-size:0.95rem}
|
|
.footer-links a:hover{color:var(--coral)}
|
|
.footer-bottom{grid-column:1/-1;text-align:center;padding-top:2rem;border-top:1px solid rgba(255,255,255,0.1);font-size:0.85rem;margin-top:1rem}
|
|
|
|
/* ===== BOTTOM CTA FLOAT (mobile) ===== */
|
|
.mobile-cta{display:none;position:fixed;bottom:0;left:0;right:0;z-index:999;background:var(--coral);padding:0.75rem;text-align:center}
|
|
.mobile-cta a{display:block;color:#fff;font-weight:800;font-size:1.1rem;letter-spacing:0.02em}
|
|
.mobile-cta .price{font-size:0.8rem;opacity:0.85;font-weight:400}
|
|
|
|
/* ===== RESPONSIVE ===== */
|
|
@media(max-width:1024px){
|
|
.stats-grid{grid-template-columns:repeat(2,1fr)}
|
|
.stat-card:nth-child(2)::after{display:none}
|
|
.bedrooms-grid{grid-template-columns:repeat(2,1fr)}
|
|
.amenities-grid{grid-template-columns:repeat(2,1fr)}
|
|
.area-cards{grid-template-columns:repeat(2,1fr)}
|
|
.area-restaurants{grid-template-columns:repeat(2,1fr)}
|
|
.footer-grid{grid-template-columns:1fr 1fr}
|
|
}
|
|
@media(max-width:768px){
|
|
.nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;padding:1.5rem;gap:1rem;box-shadow:0 10px 30px rgba(0,0,0,0.1)}
|
|
.nav-links.active{display:flex}
|
|
.nav-links a{color:var(--dark)!important}
|
|
.mobile-toggle{display:block}
|
|
.hero-title{font-size:clamp(2.5rem,10vw,4rem)}
|
|
.stats-grid{grid-template-columns:1fr 1fr}
|
|
.stat-card::after{display:none}
|
|
.bedrooms-grid{grid-template-columns:1fr}
|
|
.bedroom-extra{grid-template-columns:1fr}
|
|
.amenities-grid{grid-template-columns:1fr 1fr}
|
|
.amenity-featured{grid-column:span 2}
|
|
.area-cards{grid-template-columns:1fr}
|
|
.area-restaurants{grid-template-columns:repeat(2,1fr)}
|
|
.interior-strip{grid-template-columns:1fr}
|
|
.footer-grid{grid-template-columns:1fr;gap:2rem}
|
|
.mobile-cta{display:block}
|
|
.beach-banner-stats{flex-direction:column;align-items:flex-start}
|
|
div[style*="grid-template-columns:1fr 1fr"][style*="display:grid"]{grid-template-columns:1fr!important}
|
|
}
|
|
@media(max-width:480px){
|
|
.section{padding:3rem 0}
|
|
.amenities-grid{grid-template-columns:1fr}
|
|
.amenity-featured{grid-column:span 1;flex-direction:column;text-align:center}
|
|
.hero-buttons{flex-direction:column}
|
|
.btn{justify-content:center}
|
|
.area-restaurants{grid-template-columns:1fr}
|
|
.stats-grid{grid-template-columns:1fr}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ===== NAVBAR ===== -->
|
|
<nav class="navbar" id="navbar">
|
|
<a href="#" class="nav-logo">
|
|
<span class="sun">☀️</span> Moore Sunny Daze
|
|
</a>
|
|
<button class="mobile-toggle" id="mobileToggle" aria-label="Menu">☰</button>
|
|
<ul class="nav-links" id="navLinks">
|
|
<li><a href="#property">The Condo</a></li>
|
|
<li><a href="#bedrooms">Bedrooms</a></li>
|
|
<li><a href="#amenities">Amenities</a></li>
|
|
<li><a href="#area">Area Guide</a></li>
|
|
<li><a href="#book" class="nav-cta">Book Now</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<!-- ===== HERO ===== -->
|
|
<section class="hero" id="hero">
|
|
<div class="hero-bg"></div>
|
|
<div class="hero-particles">
|
|
<div class="particle"></div><div class="particle"></div><div class="particle"></div>
|
|
<div class="particle"></div><div class="particle"></div><div class="particle"></div>
|
|
<div class="particle"></div><div class="particle"></div><div class="particle"></div>
|
|
<div class="particle"></div><div class="particle"></div><div class="particle"></div>
|
|
<div class="particle"></div><div class="particle"></div><div class="particle"></div>
|
|
</div>
|
|
<div class="container hero-content">
|
|
<div class="hero-badge">🏖️ Maravilla 1403 • Miramar Beach, FL</div>
|
|
<h1 class="hero-title">
|
|
Your <span class="highlight">Sunny</span>
|
|
<span class="teal-accent">Beach Escape</span> Awaits
|
|
</h1>
|
|
<p class="hero-subtitle">
|
|
A vibrant 3-bedroom condo in the gated Maravilla resort — 2.5 acres of private sugar-white sand, two pools, and endless Gulf views.
|
|
</p>
|
|
<div class="hero-buttons">
|
|
<a href="#book" class="btn btn-primary">🏝️ Book Your Stay</a>
|
|
<a href="#property" class="btn btn-outline">Explore the Condo ↓</a>
|
|
</div>
|
|
</div>
|
|
<div class="hero-wave">
|
|
<svg viewBox="0 0 2880 120" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M0,60 C480,20 960,100 1440,60 C1920,20 2400,100 2880,60 L2880,120 L0,120 Z"/>
|
|
<path d="M0,80 C480,40 960,110 1440,80 C1920,50 2400,110 2880,80 L2880,120 L0,120 Z" fill="rgba(255,255,255,0.6)"/>
|
|
</svg>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== STATS BANNER ===== -->
|
|
<section class="stats-section" id="property">
|
|
<div class="container">
|
|
<div class="stats-grid">
|
|
<div class="stat-card reveal">
|
|
<span class="stat-icon">🛏️</span>
|
|
<div class="stat-number" data-count="3">0</div>
|
|
<div class="stat-label">Bedrooms</div>
|
|
</div>
|
|
<div class="stat-card reveal delay-1">
|
|
<span class="stat-icon">🚿</span>
|
|
<div class="stat-number" data-count="2">0</div>
|
|
<div class="stat-label">Bathrooms</div>
|
|
</div>
|
|
<div class="stat-card reveal delay-2">
|
|
<span class="stat-icon">👨👩👧👦</span>
|
|
<div class="stat-number" data-count="8">0</div>
|
|
<div class="stat-label">Sleeps</div>
|
|
</div>
|
|
<div class="stat-card reveal delay-3">
|
|
<span class="stat-icon">⭐</span>
|
|
<div class="stat-number" data-count="5">0</div>
|
|
<div class="stat-label">Star Rating</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== BEDROOMS ===== -->
|
|
<section class="section bedrooms-section" id="bedrooms">
|
|
<div class="container">
|
|
<div class="section-header text-center reveal">
|
|
<span class="section-tag">Sleeping Arrangements</span>
|
|
<h2>Room to Relax & Unwind</h2>
|
|
<p>Three beautifully appointed bedrooms plus a queen sleeper sofa — comfortably sleeping 8 guests.</p>
|
|
</div>
|
|
<div class="bedrooms-grid">
|
|
<!-- Bedroom 1 -->
|
|
<div class="bedroom-card reveal">
|
|
<div class="bedroom-card-img">
|
|
<img src="https://static.wixstatic.com/media/0a1b51_f0ab02b0263d4d9f8deb071af33bf414~mv2.jpg" alt="Primary King Suite" loading="lazy" onerror="this.src='https://static.wixstatic.com/media/0a1b51_cc8d5a3847bf46ed90d4f801d63ccc47~mv2.jpg'">
|
|
<span class="bedroom-card-badge">PRIMARY</span>
|
|
</div>
|
|
<div class="bedroom-card-body">
|
|
<h3>King Suite</h3>
|
|
<div class="bed-type">🛏️ King Bed</div>
|
|
<div class="bed-details">Private en-suite bath • Balcony access</div>
|
|
</div>
|
|
</div>
|
|
<!-- Bedroom 2 -->
|
|
<div class="bedroom-card reveal delay-1">
|
|
<div class="bedroom-card-img">
|
|
<img src="https://static.wixstatic.com/media/0a1b51_cc8d5a3847bf46ed90d4f801d63ccc47~mv2.jpg" alt="Second King Bedroom" loading="lazy">
|
|
<span class="bedroom-card-badge">GUEST</span>
|
|
</div>
|
|
<div class="bedroom-card-body">
|
|
<h3>King Guest Room</h3>
|
|
<div class="bed-type">🛏️ King Bed</div>
|
|
<div class="bed-details">Direct access to full bath</div>
|
|
</div>
|
|
</div>
|
|
<!-- Bedroom 3 -->
|
|
<div class="bedroom-card reveal delay-2">
|
|
<div class="bedroom-card-img">
|
|
<img src="https://static.wixstatic.com/media/0a1b51_badbf4f136c741a1b2eae378e1d92787~mv2.jpg" alt="Bunk Room" loading="lazy">
|
|
<span class="bedroom-card-badge">KIDS</span>
|
|
</div>
|
|
<div class="bedroom-card-body">
|
|
<h3>Bunk Room</h3>
|
|
<div class="bed-type">🛏️ Bunk Beds</div>
|
|
<div class="bed-details">Shared hallway bath • Perfect for kids</div>
|
|
</div>
|
|
</div>
|
|
<!-- Extra cards -->
|
|
<div class="bedroom-extra reveal delay-3">
|
|
<div class="bedroom-extra-card">
|
|
<div class="extra-icon">🛋️</div>
|
|
<div>
|
|
<h4>Living Room Sleeper</h4>
|
|
<p>Brand-new queen sleeper sofa — comfortable for 2 additional guests</p>
|
|
</div>
|
|
</div>
|
|
<div class="bedroom-extra-card" style="background:linear-gradient(135deg,rgba(0,180,216,0.85),rgba(0,150,180,0.9)),url('https://static.wixstatic.com/media/0a1b51_aef0f37089e440f592219382b3759f52~mv2.jpg') center/cover no-repeat">
|
|
<div class="extra-icon">🌅</div>
|
|
<div>
|
|
<h4>Private Balcony</h4>
|
|
<p>Sip your morning coffee with Gulf breezes and sunset views</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== INTERIOR PREVIEW STRIP ===== -->
|
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--dark);overflow:hidden">
|
|
<div style="position:relative;overflow:hidden;height:350px" class="reveal-left">
|
|
<img src="https://static.wixstatic.com/media/0a1b51_fda7ac3fe55d429393a51b2c1148dbb5~mv2.jpg" alt="Kitchen & Dining" loading="lazy" style="width:100%;height:100%;object-fit:cover;transition:transform 0.6s" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
|
|
<div style="position:absolute;bottom:0;left:0;right:0;padding:2rem;background:linear-gradient(transparent,rgba(0,0,0,0.7))">
|
|
<span style="background:var(--teal);color:#fff;padding:0.2rem 0.8rem;border-radius:50px;font-size:0.75rem;font-weight:700;letter-spacing:0.05em">INTERIOR</span>
|
|
<h3 style="color:#fff;margin-top:0.5rem">Fully Equipped Kitchen</h3>
|
|
<p style="color:rgba(255,255,255,0.8);font-size:0.9rem">Modern appliances & everything you need to cook for the crew</p>
|
|
</div>
|
|
</div>
|
|
<div style="position:relative;overflow:hidden;height:350px" class="reveal-right">
|
|
<img src="https://static.wixstatic.com/media/0a1b51_cc8d5a3847bf46ed90d4f801d63ccc47~mv2.jpg" alt="Living Room" loading="lazy" style="width:100%;height:100%;object-fit:cover;transition:transform 0.6s" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
|
|
<div style="position:absolute;bottom:0;left:0;right:0;padding:2rem;background:linear-gradient(transparent,rgba(0,0,0,0.7))">
|
|
<span style="background:var(--yellow);color:var(--dark);padding:0.2rem 0.8rem;border-radius:50px;font-size:0.75rem;font-weight:700;letter-spacing:0.05em">LIVING</span>
|
|
<h3 style="color:#fff;margin-top:0.5rem">Open-Concept Living</h3>
|
|
<p style="color:rgba(255,255,255,0.8);font-size:0.9rem">Spacious living area with Gulf views & brand-new sleeper sofa</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===== BEACH BANNER ===== -->
|
|
<div class="beach-banner reveal">
|
|
<div class="beach-banner-bg"></div>
|
|
<div class="container" style="position:relative;z-index:2">
|
|
<div class="beach-banner-content">
|
|
<h2>2.5 Acres of Private Sugar-White Sand</h2>
|
|
<p>Step out of your condo and onto one of Florida's most beautiful beaches. Beach service included — 4 chairs and 2 umbrellas ready for you.</p>
|
|
<div class="beach-banner-stats">
|
|
<div class="beach-stat">
|
|
<div class="bs-num">2.5</div>
|
|
<div class="bs-label">Private Acres</div>
|
|
</div>
|
|
<div class="beach-stat">
|
|
<div class="bs-num">4</div>
|
|
<div class="bs-label">Beach Chairs</div>
|
|
</div>
|
|
<div class="beach-stat">
|
|
<div class="bs-num">2</div>
|
|
<div class="bs-label">Umbrellas</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===== AMENITIES ===== -->
|
|
<section class="section amenities-section" id="amenities">
|
|
<div class="container">
|
|
<div class="section-header text-center reveal">
|
|
<span class="section-tag">Resort Amenities</span>
|
|
<h2>Everything You Need for the Perfect Stay</h2>
|
|
<p>Maravilla has it all — pools, sports, fitness, and more. Here's what's waiting for you.</p>
|
|
</div>
|
|
<div class="amenities-grid">
|
|
<div class="amenity-card reveal">
|
|
<span class="amenity-icon">🏊</span>
|
|
<h4>2 Resort Pools</h4>
|
|
<p>One heated in winter — swim year-round</p>
|
|
</div>
|
|
<div class="amenity-card reveal delay-1">
|
|
<span class="amenity-icon">♨️</span>
|
|
<h4>Hot Tub</h4>
|
|
<p>Soak under the stars after a beach day</p>
|
|
</div>
|
|
<div class="amenity-card reveal delay-2">
|
|
<span class="amenity-icon">🎾</span>
|
|
<h4>Tennis & Pickleball</h4>
|
|
<p>2 tennis courts, 1 lined for pickleball</p>
|
|
</div>
|
|
<div class="amenity-card reveal delay-3">
|
|
<span class="amenity-icon">🏀</span>
|
|
<h4>Basketball Court</h4>
|
|
<p>Shoot hoops with the family</p>
|
|
</div>
|
|
<div class="amenity-card reveal">
|
|
<span class="amenity-icon">🍖</span>
|
|
<h4>BBQ Grills</h4>
|
|
<p>Cook out by the pool — grills provided</p>
|
|
</div>
|
|
<div class="amenity-card reveal delay-1">
|
|
<span class="amenity-icon">💪</span>
|
|
<h4>Fitness Center</h4>
|
|
<p>Stay active with resort gym access</p>
|
|
</div>
|
|
<div class="amenity-card reveal delay-2">
|
|
<span class="amenity-icon">🐕</span>
|
|
<h4>Dog Friendly</h4>
|
|
<p>Bring your furry family member along!</p>
|
|
</div>
|
|
<div class="amenity-card reveal delay-3">
|
|
<span class="amenity-icon">🔑</span>
|
|
<h4>Self Check-In</h4>
|
|
<p>Keypad entry — arrive on your schedule</p>
|
|
</div>
|
|
<div class="amenity-featured reveal" style="background:linear-gradient(135deg,rgba(0,180,216,0.9),rgba(0,130,160,0.95)),url('https://static.wixstatic.com/media/0a1b51_6fe99a65a950470bb4a760ce751d7631~mv2.jpg') center/cover no-repeat">
|
|
<span class="amenity-icon">🏖️</span>
|
|
<div>
|
|
<h4>Beach Service Included</h4>
|
|
<p>4 chairs + 2 umbrellas set up daily (mid-March through late October). Just show up and relax — we've got your spot on the sand.</p>
|
|
</div>
|
|
</div>
|
|
<div class="amenity-card reveal delay-1">
|
|
<span class="amenity-icon">📶</span>
|
|
<h4>Free WiFi</h4>
|
|
<p>High-speed internet throughout the condo</p>
|
|
</div>
|
|
<div class="amenity-card reveal delay-2">
|
|
<span class="amenity-icon">🚗</span>
|
|
<h4>Free Parking</h4>
|
|
<p>Ample parking right at the building</p>
|
|
</div>
|
|
<div class="amenity-card reveal delay-3">
|
|
<span class="amenity-icon">❄️</span>
|
|
<h4>Central A/C</h4>
|
|
<p>Stay cool after a day in the Florida sun</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== AREA GUIDE ===== -->
|
|
<section class="section area-section" id="area">
|
|
<div class="container">
|
|
<div class="section-header text-center reveal">
|
|
<span class="section-tag">Area Guide</span>
|
|
<h2>Explore Miramar Beach</h2>
|
|
<p>Between Destin Harbor and iconic 30A — the best of the Emerald Coast at your doorstep.</p>
|
|
</div>
|
|
<div class="area-cards">
|
|
<div class="area-card reveal">
|
|
<div class="area-card-img">
|
|
<img src="https://static.wixstatic.com/media/0a1b51_6e0326ddac2349b9a62a2a416dcb49e5~mv2.jpg" alt="Beach" loading="lazy">
|
|
</div>
|
|
<div class="area-card-overlay">
|
|
<span class="area-card-tag">🏖️ BEACH</span>
|
|
<h3>James Lee Beach</h3>
|
|
<p>Direct beach access from Maravilla — walk out your door onto soft white sand and emerald water.</p>
|
|
</div>
|
|
</div>
|
|
<div class="area-card reveal delay-1">
|
|
<div class="area-card-img">
|
|
<img src="https://static.wixstatic.com/media/0a1b51_6781033f117e4c78979c2e8dcdeba671~mv2.jpg" alt="Destin Harbor" loading="lazy">
|
|
</div>
|
|
<div class="area-card-overlay">
|
|
<span class="area-card-tag">🎣 FISHING</span>
|
|
<h3>Destin Harbor</h3>
|
|
<p>World's Luckiest Fishing Village — charter a boat, stroll the boardwalk, or dine with harbor views.</p>
|
|
</div>
|
|
</div>
|
|
<div class="area-card reveal delay-2">
|
|
<div class="area-card-img">
|
|
<img src="https://static.wixstatic.com/media/0a1b51_4d5646edd6c443b2acf7940cacd392a7~mv2.jpg" alt="30A" loading="lazy">
|
|
</div>
|
|
<div class="area-card-overlay">
|
|
<span class="area-card-tag">🛣️ SCENIC DRIVE</span>
|
|
<h3>Highway 30A</h3>
|
|
<p>Scenic coastal highway with boutique towns, art galleries, and award-winning dining.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Restaurants -->
|
|
<div style="margin-top:2.5rem;text-align:center">
|
|
<h3 style="margin-bottom:1.5rem;font-size:1.5rem" class="reveal">🍽️ Nearby Restaurants</h3>
|
|
<div class="area-restaurants">
|
|
<div class="resto-chip reveal">Pompano Joe's<span class="cuisine">Seafood • Beachfront</span></div>
|
|
<div class="resto-chip reveal delay-1">Captain Dave's<span class="cuisine">Seafood • Gulf Views</span></div>
|
|
<div class="resto-chip reveal delay-2">Surf Hut<span class="cuisine">Casual • Beach Bar</span></div>
|
|
<div class="resto-chip reveal delay-3">Kenny D's<span class="cuisine">American • Family</span></div>
|
|
<div class="resto-chip reveal">Mama Clemenza's<span class="cuisine">Italian Breakfast</span></div>
|
|
<div class="resto-chip reveal delay-1">Bijoux<span class="cuisine">Upscale Seafood</span></div>
|
|
<div class="resto-chip reveal delay-2">Vin'Tij Wine Bar<span class="cuisine">Wine & Dining</span></div>
|
|
<div class="resto-chip reveal delay-3">Tommy Bahama<span class="cuisine">Island-Inspired</span></div>
|
|
</div>
|
|
</div>
|
|
<!-- Shopping -->
|
|
<div style="margin-top:3rem;text-align:center" class="reveal">
|
|
<h3 style="margin-bottom:1rem;font-size:1.3rem">🛍️ Shopping Nearby</h3>
|
|
<p style="color:var(--text-muted);max-width:600px;margin:0 auto">
|
|
Winn-Dixie & Wal-Mart for groceries • Grand Blvd shopping district • Silver Sands Premium Outlets • Sandestin Outlet Mall — all within 3 miles
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== CTA ===== -->
|
|
<section class="cta-section" id="book">
|
|
<div class="cta-content">
|
|
<h2 class="reveal">Ready for Your <span style="color:var(--yellow)">Sunny Escape</span>?</h2>
|
|
<p class="reveal delay-1">3-night minimum stay. Peak summer dates book solid — reserve your slice of paradise today.</p>
|
|
<a href="https://www.vrbo.com/1313017" class="btn-cta reveal delay-2" target="_blank" rel="noopener">
|
|
☀️ Book Now on VRBO
|
|
<span class="cta-arrow">→</span>
|
|
</a>
|
|
<div class="cta-trust reveal delay-3">
|
|
<div class="cta-trust-item"><span class="check">✓</span> 5.0 ★ on Airbnb</div>
|
|
<div class="cta-trust-item"><span class="check">✓</span> Instant Booking</div>
|
|
<div class="cta-trust-item"><span class="check">✓</span> Beach Service Included</div>
|
|
<div class="cta-trust-item"><span class="check">✓</span> Free Cancellation Window</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== OWNERS ===== -->
|
|
<section class="section owners-section">
|
|
<div class="container">
|
|
<div class="owners-card reveal">
|
|
<img src="https://static.wixstatic.com/media/0a1b51_5dca81e7c6984df68055636c3ab61015~mv2.jpg" alt="Tim & Ashley Moore" class="owners-img" loading="lazy" onerror="this.style.display='none'">
|
|
<h3>Tim & Ashley Moore</h3>
|
|
<p class="owners-sub">Your Hosts</p>
|
|
<p class="owners-quote">"We fell in love with Miramar Beach and can't wait to share our slice of paradise with you. Whether it's your first visit or your tenth, we're committed to making your stay unforgettable."</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== FOOTER ===== -->
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="footer-grid">
|
|
<div class="footer-brand">
|
|
<h3><span class="sun">☀️</span> Moore Sunny Daze</h3>
|
|
<p>Maravilla 1403 • Miramar Beach, FL 32550<br>
|
|
A gated community with 2.5 acres of private beach along Scenic Gulf Drive — between Destin Harbor and Highway 30A.</p>
|
|
</div>
|
|
<div>
|
|
<h4>Quick Links</h4>
|
|
<ul class="footer-links">
|
|
<li><a href="#property">The Condo</a></li>
|
|
<li><a href="#bedrooms">Bedrooms</a></li>
|
|
<li><a href="#amenities">Amenities</a></li>
|
|
<li><a href="#area">Area Guide</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4>Book With Us</h4>
|
|
<ul class="footer-links">
|
|
<li><a href="https://www.vrbo.com/1313017" target="_blank" rel="noopener">VRBO Listing</a></li>
|
|
<li><a href="https://airbnb.com/rooms/1387088497032914961" target="_blank" rel="noopener">Airbnb Listing</a></li>
|
|
<li><a href="https://facebook.com/mooresunnydaze" target="_blank" rel="noopener">Facebook</a></li>
|
|
<li><a href="https://mooresunnydaze.com" target="_blank" rel="noopener">Website</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
© 2026 Moore Sunny Daze. Tim & Ashley Moore. All rights reserved.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== MOBILE CTA ===== -->
|
|
<div class="mobile-cta">
|
|
<a href="#book">☀️ Book Now — From $XXX/night <span class="price">3-night min</span></a>
|
|
</div>
|
|
|
|
<!-- ===== SCRIPTS ===== -->
|
|
<script>
|
|
// Navbar scroll effect
|
|
const navbar = document.getElementById('navbar');
|
|
window.addEventListener('scroll', () => {
|
|
navbar.classList.toggle('scrolled', window.scrollY > 50);
|
|
});
|
|
|
|
// Mobile toggle
|
|
const mobileToggle = document.getElementById('mobileToggle');
|
|
const navLinks = document.getElementById('navLinks');
|
|
mobileToggle.addEventListener('click', () => {
|
|
navLinks.classList.toggle('active');
|
|
});
|
|
// Close mobile nav on link click
|
|
navLinks.querySelectorAll('a').forEach(link => {
|
|
link.addEventListener('click', () => navLinks.classList.remove('active'));
|
|
});
|
|
|
|
// Scroll reveal (Intersection Observer)
|
|
const reveals = document.querySelectorAll('.reveal, .reveal-left, .reveal-right');
|
|
const observerOptions = { threshold: 0.15, rootMargin: '0px 0px -50px 0px' };
|
|
const revealObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible');
|
|
revealObserver.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
reveals.forEach(el => revealObserver.observe(el));
|
|
|
|
// Counter animation
|
|
const counters = document.querySelectorAll('.stat-number[data-count]');
|
|
const counterObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
const el = entry.target;
|
|
const target = parseInt(el.getAttribute('data-count'));
|
|
const duration = 2000;
|
|
const start = performance.now();
|
|
function update(now) {
|
|
const elapsed = now - start;
|
|
const progress = Math.min(elapsed / duration, 1);
|
|
// Ease out cubic
|
|
const eased = 1 - Math.pow(1 - progress, 3);
|
|
el.textContent = Math.round(eased * target);
|
|
if (progress < 1) requestAnimationFrame(update);
|
|
}
|
|
requestAnimationFrame(update);
|
|
counterObserver.unobserve(el);
|
|
}
|
|
});
|
|
}, { threshold: 0.5 });
|
|
counters.forEach(el => counterObserver.observe(el));
|
|
|
|
// Smooth parallax for hero
|
|
window.addEventListener('scroll', () => {
|
|
const hero = document.querySelector('.hero-bg');
|
|
if (hero) {
|
|
hero.style.transform = `scale(1.05) translateY(${window.scrollY * 0.3}px)`;
|
|
}
|
|
});
|
|
|
|
// Close mobile nav when clicking outside
|
|
document.addEventListener('click', (e) => {
|
|
if (!navbar.contains(e.target) && navLinks.classList.contains('active')) {
|
|
navLinks.classList.remove('active');
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|