Initial commit: MSD backend API, docs, mockups, README
This commit is contained in:
root
@@ -0,0 +1,398 @@
|
||||
<!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 — Admin Dashboard</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0f172a;
|
||||
--surface: #1e293b;
|
||||
--border: #334155;
|
||||
--text: #e2e8f0;
|
||||
--muted: #94a3b8;
|
||||
--accent: #06b6d4;
|
||||
--accent2: #f59e0b;
|
||||
--green: #10b981;
|
||||
--red: #ef4444;
|
||||
--amber: #f59e0b;
|
||||
--radius: 12px;
|
||||
--shadow: 0 4px 24px rgba(0,0,0,0.3);
|
||||
}
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { font-family: 'Inter', -apple-system, sans-serif; background: var(--bg); color: var(--text); min-height:100vh; display:flex; }
|
||||
a { color: var(--accent); text-decoration:none; }
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar { width:240px; background: #0a0f1a; border-right:1px solid var(--border); padding:20px 16px; display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0; z-index:10; }
|
||||
.sidebar .logo { font-size:18px; font-weight:700; color:var(--accent); margin-bottom:32px; display:flex; align-items:center; gap:8px; }
|
||||
.sidebar .logo span { color:var(--text); font-weight:400; font-size:12px; display:block; }
|
||||
.nav-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; color:var(--muted); font-size:14px; cursor:pointer; margin-bottom:4px; transition:all 0.15s; border:none; background:none; width:100%; text-align:left; }
|
||||
.nav-item:hover { background:var(--surface); color:var(--text); }
|
||||
.nav-item.active { background:var(--accent); color:#fff; }
|
||||
.nav-item svg { width:18px; height:18px; flex-shrink:0; }
|
||||
|
||||
/* Main */
|
||||
.main { margin-left:240px; flex:1; padding:24px 32px; max-width:calc(100vw - 240px); }
|
||||
.header { display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; }
|
||||
.header h1 { font-size:22px; font-weight:600; }
|
||||
.header .user { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:13px; }
|
||||
.header .user img { width:32px; height:32px; border-radius:50%; object-fit:cover; }
|
||||
|
||||
/* Stats */
|
||||
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px; }
|
||||
.stat-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; }
|
||||
.stat-card .label { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:6px; }
|
||||
.stat-card .value { font-size:28px; font-weight:700; }
|
||||
.stat-card .sub { font-size:12px; color:var(--muted); margin-top:4px; }
|
||||
.stat-card .accent { color:var(--accent); }
|
||||
.stat-card .green { color:var(--green); }
|
||||
.stat-card .amber { color:var(--amber); }
|
||||
|
||||
/* Panels */
|
||||
.panels { display:grid; grid-template-columns:2fr 1fr; gap:20px; }
|
||||
.panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; }
|
||||
.panel-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
|
||||
.panel-header h2 { font-size:15px; font-weight:600; }
|
||||
.panel-header .badge { font-size:11px; background:var(--accent); color:#fff; padding:3px 8px; border-radius:20px; font-weight:500; }
|
||||
|
||||
/* Bookings table */
|
||||
table { width:100%; border-collapse:collapse; }
|
||||
th { text-align:left; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; padding:8px 10px; border-bottom:1px solid var(--border); }
|
||||
td { padding:10px 10px; font-size:13px; border-bottom:1px solid var(--border); }
|
||||
.status { padding:3px 8px; border-radius:20px; font-size:11px; font-weight:500; }
|
||||
.status.confirmed { background:rgba(16,185,129,0.15); color:var(--green); }
|
||||
.status.checkin { background:rgba(6,182,212,0.15); color:var(--accent); }
|
||||
.status.pending { background:rgba(245,158,11,0.15); color:var(--amber); }
|
||||
.status.completed { background:rgba(148,163,184,0.15); color:var(--muted); }
|
||||
|
||||
/* Guest list */
|
||||
.guest-item { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); }
|
||||
.guest-item:last-child { border:none; }
|
||||
.guest-avatar { width:36px; height:36px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:14px; color:#fff; }
|
||||
.guest-info { flex:1; }
|
||||
.guest-info .name { font-size:13px; font-weight:500; }
|
||||
.guest-info .date { font-size:11px; color:var(--muted); }
|
||||
|
||||
/* Calendar quick */
|
||||
.cal-mini { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; font-size:11px; }
|
||||
.cal-mini .day-header { color:var(--muted); text-align:center; padding:4px; }
|
||||
.cal-mini .day { text-align:center; padding:6px 2px; border-radius:4px; cursor:pointer; }
|
||||
.cal-mini .day.booked { background:rgba(6,182,212,0.2); color:var(--accent); font-weight:600; }
|
||||
.cal-mini .day.today { border:1px solid var(--accent2); }
|
||||
.cal-mini .day:hover { background:var(--border); }
|
||||
|
||||
/* Full-width panels */
|
||||
.full-width { grid-column:1/-1; }
|
||||
|
||||
/* Mobile */
|
||||
@media (max-width:768px) {
|
||||
.sidebar { display:none; }
|
||||
.main { margin-left:0; max-width:100vw; padding:16px; }
|
||||
.stats { grid-template-columns:repeat(2,1fr); }
|
||||
.panels { grid-template-columns:1fr; }
|
||||
}
|
||||
|
||||
.hidden { display:none !important; }
|
||||
|
||||
/* View switching */
|
||||
.view { display:none; }
|
||||
.view.active { display:block; }
|
||||
|
||||
/* Settings form */
|
||||
.form-group { margin-bottom:16px; }
|
||||
.form-group label { display:block; font-size:12px; color:var(--muted); margin-bottom:4px; text-transform:uppercase; letter-spacing:0.5px; }
|
||||
.form-group input, .form-group textarea, .form-group select { width:100%; padding:8px 12px; background:var(--bg); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:13px; font-family:inherit; }
|
||||
.form-group textarea { min-height:80px; resize:vertical; }
|
||||
.btn { padding:10px 20px; border-radius:8px; font-size:13px; font-weight:500; cursor:pointer; border:none; transition:all 0.15s; }
|
||||
.btn-primary { background:var(--accent); color:#fff; }
|
||||
.btn-primary:hover { opacity:0.9; }
|
||||
.btn-outline { background:transparent; border:1px solid var(--border); color:var(--text); }
|
||||
.btn-outline:hover { border-color:var(--accent); color:var(--accent); }
|
||||
|
||||
/* Graph placeholder */
|
||||
.graph-bar { display:flex; align-items:flex-end; gap:4px; height:100px; }
|
||||
.graph-bar .bar { flex:1; background:var(--accent); border-radius:4px 4px 0 0; min-height:4px; transition:height 0.5s; }
|
||||
.graph-bar .bar:nth-child(odd) { opacity:0.7; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<aside class="sidebar">
|
||||
<div class="logo">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M12 2L2 22h20L12 2z" fill="#06b6d4"/></svg>
|
||||
<div>Moore Sunny Daze<br><span>Owner Dashboard</span></div>
|
||||
</div>
|
||||
<button class="nav-item active" onclick="switchView('overview')" id="nav-overview">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
|
||||
Overview
|
||||
</button>
|
||||
<button class="nav-item" onclick="switchView('calendar')" id="nav-calendar">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
|
||||
Calendar
|
||||
</button>
|
||||
<button class="nav-item" onclick="switchView('guests')" id="nav-guests">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
||||
Guests
|
||||
</button>
|
||||
<button class="nav-item" onclick="switchView('bookings')" id="nav-bookings">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/></svg>
|
||||
Bookings
|
||||
</button>
|
||||
<button class="nav-item" onclick="switchView('settings')" id="nav-settings">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
|
||||
Settings
|
||||
</button>
|
||||
<div style="margin-top:auto; padding-top:16px; border-top:1px solid var(--border);">
|
||||
<div style="font-size:11px; color:var(--muted);">Logged in as</div>
|
||||
<div style="font-size:13px; font-weight:500;">Tim Moore</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="main">
|
||||
|
||||
<!-- ============ OVERVIEW ============ -->
|
||||
<div class="view active" id="view-overview">
|
||||
<div class="header">
|
||||
<h1>Dashboard Overview</h1>
|
||||
<div class="user">Aug 2026</div>
|
||||
</div>
|
||||
|
||||
<div class="stats">
|
||||
<div class="stat-card">
|
||||
<div class="label">Upcoming Bookings</div>
|
||||
<div class="value">4</div>
|
||||
<div class="sub">Next: Aug 22-25</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="label">Revenue (Month)</div>
|
||||
<div class="value accent">$8,240</div>
|
||||
<div class="sub">+12% vs last month</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="label">Occupancy Rate</div>
|
||||
<div class="value green">82%</div>
|
||||
<div class="sub">August 2026</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="label">Avg Nightly Rate</div>
|
||||
<div class="value amber">$295</div>
|
||||
<div class="sub">Peak season pricing</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panels">
|
||||
<div class="panel">
|
||||
<div class="panel-header">
|
||||
<h2>Upcoming Reservations</h2>
|
||||
<span class="badge">4</span>
|
||||
</div>
|
||||
<table>
|
||||
<thead><tr><th>Guest</th><th>Check-In</th><th>Check-Out</th><th>Guests</th><th>Total</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Sarah Johnson</td><td>Aug 22</td><td>Aug 25</td><td>6</td><td>$885</td>
|
||||
<td><span class="status confirmed">Confirmed</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mark Davidson</td><td>Aug 30</td><td>Sep 2</td><td>4</td><td>$1,180</td>
|
||||
<td><span class="status confirmed">Confirmed</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rachel Kim</td><td>Sep 5</td><td>Sep 8</td><td>8</td><td>$885</td>
|
||||
<td><span class="status pending">Pending</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thompson Family</td><td>Sep 12</td><td>Sep 17</td><td>5</td><td>$1,475</td>
|
||||
<td><span class="status confirmed">Confirmed</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-header">
|
||||
<h2>Recent Guests</h2>
|
||||
</div>
|
||||
<div class="guest-item">
|
||||
<div class="guest-avatar">JD</div>
|
||||
<div class="guest-info">
|
||||
<div class="name">James & Dana Miller</div>
|
||||
<div class="date">Aug 8-11 · 4 guests · ★★★★★</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="guest-item">
|
||||
<div class="guest-avatar" style="background:#f59e0b;">CW</div>
|
||||
<div class="guest-info">
|
||||
<div class="name">Chris Williams</div>
|
||||
<div class="date">Aug 1-4 · 2 guests · ★★★★★</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="guest-item">
|
||||
<div class="guest-avatar" style="background:#10b981;">BR</div>
|
||||
<div class="guest-info">
|
||||
<div class="name">Brittany & Robert Chen</div>
|
||||
<div class="date">Jul 25-28 · 6 guests · ★★★★☆</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="guest-item">
|
||||
<div class="guest-avatar" style="background:#ef4444;">KP</div>
|
||||
<div class="guest-info">
|
||||
<div class="name">Kevin Porter</div>
|
||||
<div class="date">Jul 18-22 · 3 guests · ★★★★★</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel full-width">
|
||||
<div class="panel-header">
|
||||
<h2>Monthly Revenue</h2>
|
||||
</div>
|
||||
<div style="display:flex; align-items:flex-end; gap:6px; height:140px; padding-top:10px;">
|
||||
<div style="display:flex; flex-direction:column; align-items:center; flex:1; gap:6px;">
|
||||
<div style="width:100%; background:var(--accent); height:90px; border-radius:4px 4px 0 0; opacity:0.7;"></div>
|
||||
<span style="font-size:10px; color:var(--muted);">Jul</span>
|
||||
</div>
|
||||
<div style="display:flex; flex-direction:column; align-items:center; flex:1; gap:6px;">
|
||||
<div style="width:100%; background:var(--accent); height:110px; border-radius:4px 4px 0 0;"></div>
|
||||
<span style="font-size:10px; color:var(--muted);">Aug</span>
|
||||
</div>
|
||||
<div style="display:flex; flex-direction:column; align-items:center; flex:1; gap:6px;">
|
||||
<div style="width:100%; background:var(--accent); height:72px; border-radius:4px 4px 0 0; opacity:0.5;"></div>
|
||||
<span style="font-size:10px; color:var(--muted);">Sep</span>
|
||||
</div>
|
||||
<div style="display:flex; flex-direction:column; align-items:center; flex:1; gap:6px;">
|
||||
<div style="width:100%; background:var(--accent); height:45px; border-radius:4px 4px 0 0; opacity:0.3;"></div>
|
||||
<span style="font-size:10px; color:var(--muted);">Oct</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ CALENDAR ============ -->
|
||||
<div class="view" id="view-calendar">
|
||||
<div class="header">
|
||||
<h1>Reservation Calendar</h1>
|
||||
<div style="display:flex; gap:8px;">
|
||||
<button class="btn btn-outline" onclick="alert('Prev month')">←</button>
|
||||
<span style="padding:10px 0; font-weight:600;">August 2026</span>
|
||||
<button class="btn btn-outline" onclick="alert('Next month')">→</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel full-width">
|
||||
<div class="cal-mini" style="font-size:13px;">
|
||||
<div class="day-header">Sun</div><div class="day-header">Mon</div><div class="day-header">Tue</div><div class="day-header">Wed</div><div class="day-header">Thu</div><div class="day-header">Fri</div><div class="day-header">Sat</div>
|
||||
<div class="day booked">1</div><div class="day booked">2</div><div class="day booked">3</div><div class="day booked">4</div><div class="day">5</div><div class="day">6</div><div class="day">7</div>
|
||||
<div class="day booked">8</div><div class="day booked">9</div><div class="day booked">10</div><div class="day booked">11</div><div class="day">12</div><div class="day">13</div><div class="day">14</div>
|
||||
<div class="day">15</div><div class="day">16</div><div class="day booked">17</div><div class="day booked">18</div><div class="day booked">19</div><div class="day booked">20</div><div class="day booked">21</div>
|
||||
<div class="day booked">22</div><div class="day booked">23</div><div class="day booked">24</div><div class="day booked">25</div><div class="day">26</div><div class="day">27</div><div class="day">28</div>
|
||||
<div class="day">29</div><div class="day booked">30</div><div class="day booked">31</div>
|
||||
</div>
|
||||
<div style="margin-top:16px; display:flex; gap:16px; font-size:12px; color:var(--muted);">
|
||||
<span><span style="display:inline-block;width:12px;height:12px;background:rgba(6,182,212,0.2);border-radius:2px;margin-right:4px;"></span> Booked</span>
|
||||
<span><span style="display:inline-block;width:12px;height:12px;background:var(--surface);border:1px solid var(--border);border-radius:2px;margin-right:4px;"></span> Available</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ GUESTS ============ -->
|
||||
<div class="view" id="view-guests">
|
||||
<div class="header">
|
||||
<h1>Guest Directory</h1>
|
||||
<button class="btn btn-primary" onclick="alert('Add guest flow - TBD')">+ Add Guest</button>
|
||||
</div>
|
||||
<div class="panel full-width">
|
||||
<table>
|
||||
<thead><tr><th>Name</th><th>Email</th><th>Last Stay</th><th>Total Stays</th><th>Rating</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>James & Dana Miller</td><td>jdmiller@gmail.com</td><td>Aug 8-11, 2026</td><td>3</td><td>★★★★★</td></tr>
|
||||
<tr><td>Chris Williams</td><td>chris.williams@yahoo.com</td><td>Aug 1-4, 2026</td><td>1</td><td>★★★★★</td></tr>
|
||||
<tr><td>Brittany & Robert Chen</td><td>brittchen@gmail.com</td><td>Jul 25-28, 2026</td><td>2</td><td>★★★★☆</td></tr>
|
||||
<tr><td>Kevin Porter</td><td>kporter@outlook.com</td><td>Jul 18-22, 2026</td><td>1</td><td>★★★★★</td></tr>
|
||||
<tr><td>Sarah Johnson</td><td>sjohnson@gmail.com</td><td>Upcoming: Aug 22</td><td>4</td><td>★★★★★</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ BOOKINGS ============ -->
|
||||
<div class="view" id="view-bookings">
|
||||
<div class="header">
|
||||
<h1>All Bookings</h1>
|
||||
<button class="btn btn-primary" onclick="alert('New booking form - TBD')">+ New Booking</button>
|
||||
</div>
|
||||
<div class="panel full-width">
|
||||
<table>
|
||||
<thead><tr><th>ID</th><th>Guest</th><th>Check-In</th><th>Check-Out</th><th>Nights</th><th>Guests</th><th>Total</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>#1042</td><td>Sarah Johnson</td><td>Aug 22</td><td>Aug 25</td><td>3</td><td>6</td><td>$885</td><td><span class="status confirmed">Confirmed</span></td></tr>
|
||||
<tr><td>#1041</td><td>Mark Davidson</td><td>Aug 30</td><td>Sep 2</td><td>3</td><td>4</td><td>$1,180</td><td><span class="status confirmed">Confirmed</span></td></tr>
|
||||
<tr><td>#1040</td><td>Rachel Kim</td><td>Sep 5</td><td>Sep 8</td><td>3</td><td>8</td><td>$885</td><td><span class="status pending">Pending</span></td></tr>
|
||||
<tr><td>#1039</td><td>Thompson Family</td><td>Sep 12</td><td>Sep 17</td><td>5</td><td>5</td><td>$1,475</td><td><span class="status confirmed">Confirmed</span></td></tr>
|
||||
<tr><td>#1038</td><td>James Miller</td><td>Aug 8</td><td>Aug 11</td><td>3</td><td>4</td><td>$885</td><td><span class="status completed">Completed</span></td></tr>
|
||||
<tr><td>#1037</td><td>Chris Williams</td><td>Aug 1</td><td>Aug 4</td><td>3</td><td>2</td><td>$750</td><td><span class="status completed">Completed</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ SETTINGS ============ -->
|
||||
<div class="view" id="view-settings">
|
||||
<div class="header">
|
||||
<h1>Property Settings</h1>
|
||||
</div>
|
||||
<div class="panel full-width" style="max-width:600px;">
|
||||
<div class="form-group">
|
||||
<label>Property Name</label>
|
||||
<input type="text" value="Moore Sunny Daze">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Nightly Rate (Base)</label>
|
||||
<input type="text" value="$295">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Cleaning Fee</label>
|
||||
<input type="text" value="$150">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Minimum Night Stay</label>
|
||||
<input type="number" value="3">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Max Guests</label>
|
||||
<input type="number" value="8">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Check-In Time</label>
|
||||
<input type="text" value="4:00 PM">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Check-Out Time</label>
|
||||
<input type="text" value="10:00 AM">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Stripe Account</label>
|
||||
<input type="text" value="acct_••••••••••" disabled style="opacity:0.5;">
|
||||
</div>
|
||||
<div style="display:flex; gap:10px; margin-top:20px;">
|
||||
<button class="btn btn-primary" onclick="alert('Settings saved! (mock)')">Save Changes</button>
|
||||
<button class="btn btn-outline">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<script>
|
||||
function switchView(name) {
|
||||
document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
|
||||
document.getElementById('view-' + name).classList.add('active');
|
||||
document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
|
||||
document.getElementById('nav-' + name).classList.add('active');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,604 @@
|
||||
<!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, FL</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:#3D3027;background:#FFFAF5;line-height:1.7;overflow-x:hidden}
|
||||
img{max-width:100%;height:auto;display:block}
|
||||
h1,h2,h3{line-height:1.2}
|
||||
a{color:inherit;text-decoration:none}
|
||||
|
||||
/* ===== CSS VARIABLES ===== */
|
||||
:root{
|
||||
--sand:#F5E6D3;
|
||||
--sand-dark:#D4C4A8;
|
||||
--sand-light:#FDF8F2;
|
||||
--ocean:#6CB4D9;
|
||||
--ocean-dark:#4A9BC5;
|
||||
--ocean-light:#A8D8EA;
|
||||
--palm:#6B8E5A;
|
||||
--palm-dark:#4A6B3A;
|
||||
--palm-light:#8FBC6B;
|
||||
--coral:#E8836E;
|
||||
--coral-dark:#D46A55;
|
||||
--warm-white:#FFFAF5;
|
||||
--brown:#3D3027;
|
||||
--brown-light:#6B5D52;
|
||||
--text-muted:#7A6E63;
|
||||
--gold:#C9A84C;
|
||||
--radius:12px;
|
||||
--radius-sm:8px;
|
||||
--shadow-sm:0 2px 8px rgba(0,0,0,.06);
|
||||
--shadow:0 4px 20px rgba(0,0,0,.08);
|
||||
--shadow-lg:0 8px 40px rgba(0,0,0,.12);
|
||||
--max-width:1200px;
|
||||
}
|
||||
|
||||
/* ===== UTILITY ===== */
|
||||
.container{max-width:var(--max-width);margin:0 auto;padding:0 1.5rem}
|
||||
.section{padding:5rem 0}
|
||||
.section-label{display:inline-block;font-size:.8rem;text-transform:uppercase;letter-spacing:.15em;color:var(--coral);font-weight:700;margin-bottom:.5rem}
|
||||
.section-title{font-size:clamp(2rem,4vw,2.8rem);color:var(--brown);margin-bottom:1rem;font-weight:700}
|
||||
.section-subtitle{font-size:1.15rem;color:var(--text-muted);max-width:640px;margin-bottom:2.5rem}
|
||||
|
||||
/* ===== NAVIGATION ===== */
|
||||
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;padding:1rem 0;transition:all .35s ease}
|
||||
.navbar.scrolled{background:rgba(255,250,245,.97);backdrop-filter:blur(10px);box-shadow:0 2px 20px rgba(0,0,0,.08);padding:.6rem 0}
|
||||
.navbar .container{display:flex;align-items:center;justify-content:space-between}
|
||||
.nav-logo{display:flex;align-items:center;gap:.5rem}
|
||||
.nav-logo .palm-icon{font-size:1.6rem}
|
||||
.nav-logo span{font-weight:700;font-size:1.25rem;color:var(--warm-white);transition:color .35s}
|
||||
.navbar.scrolled .nav-logo span{color:var(--brown)}
|
||||
.nav-btn{display:inline-flex;align-items:center;gap:.35rem;background:var(--coral);color:#fff;padding:.55rem 1.4rem;border-radius:50px;font-weight:700;font-size:.9rem;transition:all .25s;border:none;cursor:pointer;font-family:inherit}
|
||||
.nav-btn:hover{background:var(--coral-dark);transform:translateY(-1px);box-shadow:0 4px 15px rgba(232,131,110,.4)}
|
||||
.nav-mobile-btn{display:none}
|
||||
|
||||
/* ===== HERO PARALLAX ===== */
|
||||
.hero{position:relative;height:100vh;min-height:600px;display:flex;align-items:center;justify-content:center;overflow:hidden}
|
||||
.hero-bg{position:absolute;inset:0;background:url('https://static.wixstatic.com/media/0a1b51_e07cc4dbb6c74815812ad594235b011e~mv2.jpg') center/cover no-repeat;will-change:transform;z-index:0}
|
||||
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.25) 40%,rgba(0,0,0,.55) 100%);z-index:1}
|
||||
.hero-content{position:relative;z-index:2;text-align:center;color:#fff;padding:0 1.5rem;max-width:800px}
|
||||
.hero-subtitle{font-size:1.1rem;text-transform:uppercase;letter-spacing:.2em;margin-bottom:.75rem;opacity:.9;font-weight:500}
|
||||
.hero-title{font-size:clamp(2.4rem,6vw,4rem);font-weight:800;margin-bottom:1rem;text-shadow:0 2px 10px rgba(0,0,0,.3);line-height:1.15}
|
||||
.hero-title em{font-style:normal;color:var(--gold)}
|
||||
.hero-desc{font-size:1.2rem;margin-bottom:2rem;opacity:.95;max-width:600px;margin-left:auto;margin-right:auto}
|
||||
.hero-cta{display:inline-flex;align-items:center;gap:.5rem;background:var(--coral);color:#fff;padding:.85rem 2.2rem;border-radius:50px;font-weight:700;font-size:1.1rem;transition:all .3s;box-shadow:0 4px 20px rgba(232,131,110,.4);border:none;cursor:pointer;font-family:inherit}
|
||||
.hero-cta:hover{background:var(--coral-dark);transform:translateY(-2px);box-shadow:0 6px 28px rgba(232,131,110,.5)}
|
||||
.hero-scroll-indicator{position:absolute;bottom:2rem;left:50%;z-index:2;transform:translateX(-50%);animation:bounce 2s infinite;opacity:.8}
|
||||
.hero-scroll-indicator .arrow{display:block;width:24px;height:24px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}
|
||||
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(10px)}}
|
||||
|
||||
/* ===== FADE-IN ON SCROLL ===== */
|
||||
.fade-up{opacity:0;transform:translateY(40px);transition:opacity .7s ease,transform .7s ease}
|
||||
.fade-up.visible{opacity:1;transform:translateY(0)}
|
||||
.fade-up-delay-1{transition-delay:.1s}
|
||||
.fade-up-delay-2{transition-delay:.2s}
|
||||
.fade-up-delay-3{transition-delay:.3s}
|
||||
|
||||
/* ===== PROPERTY INTRO ===== */
|
||||
.property-intro{background:var(--warm-white)}
|
||||
.property-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
|
||||
.property-image img{border-radius:var(--radius);box-shadow:var(--shadow-lg);aspect-ratio:4/3;object-fit:cover;width:100%}
|
||||
.property-stats{display:flex;gap:1.5rem;flex-wrap:wrap;margin-top:1.5rem}
|
||||
.stat-badge{display:flex;align-items:center;gap:.4rem;background:var(--sand-light);padding:.5rem 1rem;border-radius:50px;font-weight:600;font-size:.9rem;color:var(--brown);border:1px solid var(--sand)}
|
||||
.stat-badge .icon{font-size:1.1rem}
|
||||
|
||||
/* ===== ROOMS SECTION ===== */
|
||||
.rooms{background:var(--sand)}
|
||||
.rooms-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.8rem}
|
||||
.room-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .3s,box-shadow .3s}
|
||||
.room-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
|
||||
.room-card img{width:100%;height:220px;object-fit:cover}
|
||||
.room-card-body{padding:1.4rem}
|
||||
.room-card-body h3{font-size:1.15rem;color:var(--brown);margin-bottom:.3rem}
|
||||
.room-card-body .room-badge{display:inline-block;font-size:.75rem;background:var(--ocean-light);color:var(--ocean-dark);padding:.2rem .7rem;border-radius:50px;font-weight:600;margin-bottom:.5rem}
|
||||
.room-card-body p{font-size:.9rem;color:var(--text-muted);line-height:1.5}
|
||||
|
||||
/* ===== AMENITIES ===== */
|
||||
.amenities{background:var(--warm-white)}
|
||||
.amenities-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1.5rem}
|
||||
.amenity-card{background:#fff;border-radius:var(--radius);padding:1.8rem 1.2rem;text-align:center;box-shadow:var(--shadow-sm);transition:transform .3s,box-shadow .3s;border:1px solid transparent}
|
||||
.amenity-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--ocean-light)}
|
||||
.amenity-icon{font-size:2.4rem;margin-bottom:.6rem;display:block}
|
||||
.amenity-card h4{font-size:.9rem;color:var(--brown);font-weight:600}
|
||||
.amenity-card p{font-size:.78rem;color:var(--text-muted);margin-top:.2rem}
|
||||
|
||||
/* ===== COMMUNITY BANNER ===== */
|
||||
.community{position:relative;padding:6rem 0;overflow:hidden;color:#fff}
|
||||
.community-bg{position:absolute;inset:0;background:url('https://static.wixstatic.com/media/0a1b51_6e0326ddac2349b9a62a2a416dcb49e5~mv2.jpg') center/cover no-repeat fixed;z-index:0}
|
||||
.community::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.5);z-index:1}
|
||||
.community .container{position:relative;z-index:2}
|
||||
.community .section-title{color:#fff}
|
||||
.community .section-subtitle{color:rgba(255,255,255,.85)}
|
||||
.community-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin-top:2rem}
|
||||
.community-feature{background:rgba(255,255,255,.12);backdrop-filter:blur(8px);border-radius:var(--radius);padding:1.5rem;border:1px solid rgba(255,255,255,.2);transition:transform .3s}
|
||||
.community-feature:hover{transform:translateY(-4px);background:rgba(255,255,255,.18)}
|
||||
.community-feature .feature-icon{font-size:2rem;margin-bottom:.5rem}
|
||||
.community-feature h4{font-size:1rem;margin-bottom:.3rem}
|
||||
.community-feature p{font-size:.85rem;opacity:.85}
|
||||
|
||||
/* ===== BEACH SERVICE ===== */
|
||||
.beach-service{background:var(--ocean);color:#fff;text-align:center}
|
||||
.beach-service .section-title,.beach-service .section-subtitle{color:#fff}
|
||||
.beach-service-inner{display:flex;align-items:center;justify-content:center;gap:3rem;flex-wrap:wrap;margin-top:2rem}
|
||||
.beach-stat{text-align:center}
|
||||
.beach-stat .number{font-size:3.5rem;font-weight:800;line-height:1}
|
||||
.beach-stat .label{font-size:.95rem;opacity:.85;margin-top:.3rem}
|
||||
|
||||
/* ===== NEARBY ===== */
|
||||
.nearby{background:var(--sand-light)}
|
||||
.nearby-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2rem}
|
||||
.nearby-tab{padding:.55rem 1.4rem;border-radius:50px;border:2px solid var(--sand-dark);background:transparent;font-weight:600;font-size:.9rem;color:var(--brown);cursor:pointer;transition:all .25s;font-family:inherit}
|
||||
.nearby-tab:hover,.nearby-tab.active{background:var(--ocean);border-color:var(--ocean);color:#fff}
|
||||
.nearby-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.2rem}
|
||||
.nearby-item{display:flex;align-items:flex-start;gap:.8rem;background:#fff;border-radius:var(--radius-sm);padding:1rem;box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s}
|
||||
.nearby-item:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
|
||||
.nearby-item .item-icon{font-size:1.4rem;flex-shrink:0;margin-top:2px}
|
||||
.nearby-item .item-info strong{display:block;font-size:.9rem;color:var(--brown)}
|
||||
.nearby-item .item-info span{font-size:.8rem;color:var(--text-muted)}
|
||||
|
||||
/* ===== OWNERS ===== */
|
||||
.owners{background:var(--warm-white)}
|
||||
.owners-grid{display:grid;grid-template-columns:auto 1fr;gap:3rem;align-items:center}
|
||||
.owners-photo{width:240px;height:240px;border-radius:50%;object-fit:cover;box-shadow:var(--shadow-lg);border:4px solid var(--sand)}
|
||||
.owners-text h2{margin-bottom:.5rem}
|
||||
.owners-text .tag{color:var(--coral);font-weight:600;font-size:.95rem;margin-bottom:1rem}
|
||||
.owners-text p{color:var(--text-muted);margin-bottom:1rem}
|
||||
|
||||
/* ===== BOOK NOW STRIP ===== */
|
||||
.book-strip{background:linear-gradient(135deg,var(--ocean-dark),var(--ocean));color:#fff;text-align:center;padding:4rem 0}
|
||||
.book-strip h2{color:#fff;font-size:clamp(1.8rem,3vw,2.4rem);margin-bottom:.5rem}
|
||||
.book-strip p{opacity:.9;margin-bottom:2rem;font-size:1.1rem}
|
||||
.book-strip .hero-cta{font-size:1.15rem;padding:1rem 2.8rem}
|
||||
|
||||
/* ===== FOOTER ===== */
|
||||
.footer{background:var(--brown);color:#D4C4A8;padding:4rem 0 2rem}
|
||||
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2.5rem;margin-bottom:3rem}
|
||||
.footer h4{color:var(--warm-white);margin-bottom:1rem;font-size:1rem}
|
||||
.footer a{color:#D4C4A8;transition:color .2s}
|
||||
.footer a:hover{color:var(--coral)}
|
||||
.footer-links{list-style:none;display:flex;flex-direction:column;gap:.5rem}
|
||||
.footer-links li{font-size:.9rem}
|
||||
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:2rem;text-align:center;font-size:.85rem}
|
||||
|
||||
/* ===== MOBILE BOOK NOW FAB ===== */
|
||||
.fab-book{display:none;position:fixed;bottom:1.5rem;right:1.5rem;z-index:999;background:var(--coral);color:#fff;padding:.8rem 1.5rem;border-radius:50px;font-weight:700;font-size:1rem;box-shadow:0 4px 25px rgba(232,131,110,.5);border:none;cursor:pointer;font-family:inherit;align-items:center;gap:.4rem;transition:transform .25s}
|
||||
.fab-book:active{transform:scale(.95)}
|
||||
|
||||
/* ===== RESPONSIVE ===== */
|
||||
@media(max-width:768px){
|
||||
.section{padding:3rem 0}
|
||||
.hero{min-height:500px}
|
||||
.hero-title br{display:none}
|
||||
.property-grid{grid-template-columns:1fr;gap:2rem}
|
||||
.property-grid .property-text{order:1}
|
||||
.property-grid .property-image{order:2}
|
||||
.rooms-grid{grid-template-columns:1fr}
|
||||
.amenities-grid{grid-template-columns:repeat(2,1fr);gap:1rem}
|
||||
.community-features{grid-template-columns:1fr}
|
||||
.owners-grid{grid-template-columns:1fr;text-align:center}
|
||||
.owners-photo{margin:0 auto;width:180px;height:180px}
|
||||
.nav-desktop-btn{display:none}
|
||||
.fab-book{display:inline-flex}
|
||||
}
|
||||
|
||||
@media(max-width:480px){
|
||||
.amenities-grid{grid-template-columns:repeat(2,1fr)}
|
||||
.nearby-grid{grid-template-columns:1fr}
|
||||
.beach-stat .number{font-size:2.5rem}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ===== NAVBAR ===== -->
|
||||
<nav class="navbar" id="navbar">
|
||||
<div class="container">
|
||||
<div class="nav-logo">
|
||||
<span class="palm-icon">🌴</span>
|
||||
<span>Moore Sunny Daze</span>
|
||||
</div>
|
||||
<a href="#book" class="nav-btn nav-desktop-btn">🏖️ Book Now</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- ===== HERO ===== -->
|
||||
<section class="hero" id="hero">
|
||||
<div class="hero-bg" id="hero-bg"></div>
|
||||
<div class="hero-content fade-up visible">
|
||||
<p class="hero-subtitle">Maravilla 1403 · Miramar Beach, Florida</p>
|
||||
<h1 class="hero-title">Your <em>Sunny</em> Beach<br>Escape Awaits</h1>
|
||||
<p class="hero-desc">3BR / 2BA · Sleeps 8 · Gated Beachfront Community<br>2.5 acres of sugar-white sand on the Emerald Coast</p>
|
||||
<a href="#book" class="hero-cta">🏖️ Book Your Stay</a>
|
||||
</div>
|
||||
<div class="hero-scroll-indicator">
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== PROPERTY INTRO ===== -->
|
||||
<section class="section property-intro">
|
||||
<div class="container">
|
||||
<div class="property-grid">
|
||||
<div class="property-text fade-up">
|
||||
<span class="section-label">Welcome To</span>
|
||||
<h2 class="section-title">Moore Sunny Daze</h2>
|
||||
<p>Come make family memories at our beautiful beachfront condo in Maravilla — a gated resort community on Miramar Beach. With 3 bedrooms, 2 baths, and room for up to 8 guests, it's the perfect home base for your Emerald Coast getaway.</p>
|
||||
<p style="margin-top:1rem">Wake up to Gulf views from the private balcony, spend your days on our 2.5 acres of private sugar-white sand beach, and unwind in one of two sparkling pools. Whether you're here for the beaches, the dining, or just some quality family time — Moore Sunny Daze delivers.</p>
|
||||
<div class="property-stats">
|
||||
<span class="stat-badge"><span class="icon">🛏️</span> 3 Bedrooms</span>
|
||||
<span class="stat-badge"><span class="icon">🛁</span> 2 Baths</span>
|
||||
<span class="stat-badge"><span class="icon">👨👩👧👦</span> Sleeps 8</span>
|
||||
<span class="stat-badge"><span class="icon">🏖️</span> Beachfront</span>
|
||||
<span class="stat-badge"><span class="icon">🐕</span> Dog Friendly</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="property-image fade-up fade-up-delay-1">
|
||||
<img src="https://static.wixstatic.com/media/0a1b51_cc8d5a3847bf46ed90d4f801d63ccc47~mv2.jpg" alt="Living room at Moore Sunny Daze" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== BEDROOMS ===== -->
|
||||
<section class="section rooms" id="rooms">
|
||||
<div class="container">
|
||||
<span class="section-label">Sleeping Arrangements</span>
|
||||
<h2 class="section-title">Room to Relax</h2>
|
||||
<p class="section-subtitle">Four comfortable sleeping spaces — perfect for families and groups of up to 8.</p>
|
||||
<div class="rooms-grid">
|
||||
<div class="room-card fade-up">
|
||||
<img src="https://static.wixstatic.com/media/0a1b51_f0ab02b0263d4d9f8deb071af33bf414~mv2.jpg" alt="King suite bedroom" loading="lazy">
|
||||
<div class="room-card-body">
|
||||
<span class="room-badge">🛏️ Primary Suite</span>
|
||||
<h3>King Suite with Private Bath</h3>
|
||||
<p>Spacious king bedroom with en-suite bathroom and private balcony access — wake up to Gulf breezes.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="room-card fade-up fade-up-delay-1">
|
||||
<img src="https://static.wixstatic.com/media/0a1b51_f0ab02b0263d4d9f8deb071af33bf414~mv2.jpg" alt="Second king bedroom" loading="lazy">
|
||||
<div class="room-card-body">
|
||||
<span class="room-badge">🛏️ Second Bedroom</span>
|
||||
<h3>King with Bath Access</h3>
|
||||
<p>Comfortable king bedroom with direct access to a full bathroom — restful and private.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="room-card fade-up fade-up-delay-2">
|
||||
<img src="https://static.wixstatic.com/media/0a1b51_badbf4f136c741a1b2eae378e1d92787~mv2.jpg" alt="Bunk room" loading="lazy">
|
||||
<div class="room-card-body">
|
||||
<span class="room-badge">👧 Kids' Favorite</span>
|
||||
<h3>Bunk Room</h3>
|
||||
<p>Fun bunk beds with hallway bath access — the kids will love it!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="room-card fade-up fade-up-delay-3">
|
||||
<img src="https://static.wixstatic.com/media/0a1b51_cc8d5a3847bf46ed90d4f801d63ccc47~mv2.jpg" alt="Living room with sleeper sofa" loading="lazy">
|
||||
<div class="room-card-body">
|
||||
<span class="room-badge">🛋️ Living Room</span>
|
||||
<h3>Queen Sleeper Sofa</h3>
|
||||
<p>New queen sleeper sofa in the living room — comfortable extra sleeping for two.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== KITCHEN & LIVING ===== -->
|
||||
<section class="section" style="background:var(--warm-white)">
|
||||
<div class="container">
|
||||
<div class="property-grid">
|
||||
<div class="property-image fade-up">
|
||||
<img src="https://static.wixstatic.com/media/0a1b51_fda7ac3fe55d429393a51b2c1148dbb5~mv2.jpg" alt="Kitchen and dining area" loading="lazy" style="aspect-ratio:16/10">
|
||||
</div>
|
||||
<div class="property-text fade-up fade-up-delay-1">
|
||||
<span class="section-label">Interior</span>
|
||||
<h2 class="section-title">Fully Equipped<br>Kitchen & Living</h2>
|
||||
<p>Cook like you're at home in our fully equipped kitchen with modern appliances, spacious countertops, and a dining area for family meals. The open-concept living room flows seamlessly to the balcony — perfect for gathering after a day at the beach.</p>
|
||||
<div class="property-stats">
|
||||
<span class="stat-badge"><span class="icon">🍳</span> Full Kitchen</span>
|
||||
<span class="stat-badge"><span class="icon">📺</span> WiFi + TV</span>
|
||||
<span class="stat-badge"><span class="icon">❄️</span> Central A/C</span>
|
||||
<span class="stat-badge"><span class="icon">🅿️</span> Free Parking</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== AMENITIES ===== -->
|
||||
<section class="section amenities" id="amenities">
|
||||
<div class="container">
|
||||
<span class="section-label">Resort Amenities</span>
|
||||
<h2 class="section-title">Everything You Need</h2>
|
||||
<p class="section-subtitle">Maravilla offers resort-style amenities for the whole family — all just steps from your door.</p>
|
||||
<div class="amenities-grid">
|
||||
<div class="amenity-card fade-up">
|
||||
<span class="amenity-icon">🏊</span>
|
||||
<h4>2 Pools</h4>
|
||||
<p>One heated in winter</p>
|
||||
</div>
|
||||
<div class="amenity-card fade-up fade-up-delay-1">
|
||||
<span class="amenity-icon">♨️</span>
|
||||
<h4>Hot Tub</h4>
|
||||
<p>Open year-round</p>
|
||||
</div>
|
||||
<div class="amenity-card fade-up fade-up-delay-2">
|
||||
<span class="amenity-icon">🏖️</span>
|
||||
<h4>Private Beach</h4>
|
||||
<p>2.5 acres of white sand</p>
|
||||
</div>
|
||||
<div class="amenity-card fade-up">
|
||||
<span class="amenity-icon">🎾</span>
|
||||
<h4>Tennis & Pickleball</h4>
|
||||
<p>2 courts, 1 lined for pickleball</p>
|
||||
</div>
|
||||
<div class="amenity-card fade-up fade-up-delay-1">
|
||||
<span class="amenity-icon">🏀</span>
|
||||
<h4>Basketball</h4>
|
||||
<p>Full court</p>
|
||||
</div>
|
||||
<div class="amenity-card fade-up fade-up-delay-2">
|
||||
<span class="amenity-icon">🍖</span>
|
||||
<h4>BBQ Grills</h4>
|
||||
<p>Poolside grilling</p>
|
||||
</div>
|
||||
<div class="amenity-card fade-up">
|
||||
<span class="amenity-icon">💪</span>
|
||||
<h4>Fitness Center</h4>
|
||||
<p>Stay active on vacation</p>
|
||||
</div>
|
||||
<div class="amenity-card fade-up fade-up-delay-1">
|
||||
<span class="amenity-icon">🐕</span>
|
||||
<h4>Dog Friendly</h4>
|
||||
<p>Bring your furry family</p>
|
||||
</div>
|
||||
<div class="amenity-card fade-up fade-up-delay-2">
|
||||
<span class="amenity-icon">🔑</span>
|
||||
<h4>Self Check-In</h4>
|
||||
<p>Keypad entry</p>
|
||||
</div>
|
||||
<div class="amenity-card fade-up">
|
||||
<span class="amenity-icon">🪑</span>
|
||||
<h4>Beach Service</h4>
|
||||
<p>4 chairs + 2 umbrellas</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== POOL & BEACH PHOTOS ===== -->
|
||||
<section class="section" style="background:var(--sand)">
|
||||
<div class="container">
|
||||
<span class="section-label">The Views</span>
|
||||
<h2 class="section-title">Pool, Beach & Beyond</h2>
|
||||
<p class="section-subtitle">From the pool deck to the sugar-white shoreline — every angle is postcard-worthy.</p>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;">
|
||||
<img src="https://static.wixstatic.com/media/0a1b51_6fe99a65a950470bb4a760ce751d7631~mv2.jpg" alt="Maravilla pool" loading="lazy" class="fade-up" style="border-radius:var(--radius);box-shadow:var(--shadow-lg);aspect-ratio:4/3;object-fit:cover;width:100%">
|
||||
<img src="https://static.wixstatic.com/media/0a1b51_6781033f117e4c78979c2e8dcdeba671~mv2.jpg" alt="Miramar Beach view" loading="lazy" class="fade-up fade-up-delay-1" style="border-radius:var(--radius);box-shadow:var(--shadow-lg);aspect-ratio:4/3;object-fit:cover;width:100%">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== BEACH SERVICE ===== -->
|
||||
<section class="section beach-service" id="beach-service">
|
||||
<div class="container">
|
||||
<span class="section-label" style="color:rgba(255,255,255,.75)">Included With Your Stay</span>
|
||||
<h2 class="section-title">Beach Service Included</h2>
|
||||
<p class="section-subtitle">Available mid-March through late October — set up and waiting for you every morning.</p>
|
||||
<div class="beach-service-inner">
|
||||
<div class="beach-stat fade-up">
|
||||
<div class="number">4</div>
|
||||
<div class="label">Beach Chairs</div>
|
||||
</div>
|
||||
<div class="beach-stat fade-up fade-up-delay-1">
|
||||
<div class="number">2</div>
|
||||
<div class="label">Umbrellas</div>
|
||||
</div>
|
||||
<div class="beach-stat fade-up fade-up-delay-2">
|
||||
<div class="number">2.5</div>
|
||||
<div class="label">Acres Private Beach</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== COMMUNITY ===== -->
|
||||
<section class="community" id="community">
|
||||
<div class="community-bg"></div>
|
||||
<div class="container">
|
||||
<span class="section-label" style="color:rgba(255,255,255,.75)">The Community</span>
|
||||
<h2 class="section-title">Maravilla Resort</h2>
|
||||
<p class="section-subtitle">A gated beachfront community on Miramar Beach — where the Emerald Coast shines brightest.</p>
|
||||
<div class="community-features">
|
||||
<div class="community-feature fade-up">
|
||||
<div class="feature-icon">🏘️</div>
|
||||
<h4>Gated Community</h4>
|
||||
<p>Secure, private access for residents and guests only.</p>
|
||||
</div>
|
||||
<div class="community-feature fade-up fade-up-delay-1">
|
||||
<div class="feature-icon">🏖️</div>
|
||||
<h4>2.5 Acre Private Beach</h4>
|
||||
<p>Sugar-white sand stretching along the Gulf — never crowded.</p>
|
||||
</div>
|
||||
<div class="community-feature fade-up fade-up-delay-2">
|
||||
<div class="feature-icon">📍</div>
|
||||
<h4>Prime Location</h4>
|
||||
<p>On Scenic Gulf Drive between Destin Harbor and 30A — close to everything.</p>
|
||||
</div>
|
||||
<div class="community-feature fade-up fade-up-delay-3">
|
||||
<div class="feature-icon">🌅</div>
|
||||
<h4>Gulf Views</h4>
|
||||
<p>Stunning sunsets from your private balcony — every evening is a show.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== NEARBY ===== -->
|
||||
<section class="section nearby" id="nearby">
|
||||
<div class="container">
|
||||
<span class="section-label">Explore the Area</span>
|
||||
<h2 class="section-title">Nearby Restaurants & Attractions</h2>
|
||||
<p class="section-subtitle">Everything you need within a few miles — from casual beach eats to upscale dining and shopping.</p>
|
||||
<div class="nearby-tabs">
|
||||
<button class="nearby-tab active" onclick="switchTab('dining',this)">🍽️ Dining</button>
|
||||
<button class="nearby-tab" onclick="switchTab('shopping',this)">🛍️ Shopping</button>
|
||||
<button class="nearby-tab" onclick="switchTab('attractions',this)">🎯 Attractions</button>
|
||||
</div>
|
||||
<div class="nearby-grid" id="nearby-dining">
|
||||
<div class="nearby-item"><span class="item-icon">🦞</span><div class="item-info"><strong>Pompano Joe's</strong><span>Beachfront seafood, casual</span></div></div>
|
||||
<div class="nearby-item"><span class="item-icon">🐟</span><div class="item-info"><strong>Captain Dave's</strong><span>Fresh Gulf seafood</span></div></div>
|
||||
<div class="nearby-item"><span class="item-icon">🍔</span><div class="item-info"><strong>Surf Hut</strong><span>Beachside burgers & drinks</span></div></div>
|
||||
<div class="nearby-item"><span class="item-icon">🦀</span><div class="item-info"><strong>Kenny D's</strong><span>Local seafood favorite</span></div></div>
|
||||
<div class="nearby-item"><span class="item-icon">🍝</span><div class="item-info"><strong>Mama Clemenza's</strong><span>Italian breakfast & brunch</span></div></div>
|
||||
<div class="nearby-item"><span class="item-icon">🍷</span><div class="item-info"><strong>Bijoux</strong><span>Upscale New Orleans seafood</span></div></div>
|
||||
<div class="nearby-item"><span class="item-icon">🧀</span><div class="item-info"><strong>Vin'Tij Food & Wine</strong><span>Wine bar at Grand Blvd</span></div></div>
|
||||
<div class="nearby-item"><span class="item-icon">🌺</span><div class="item-info"><strong>Tommy Bahama</strong><span>Island-inspired dining</span></div></div>
|
||||
</div>
|
||||
<div class="nearby-grid" id="nearby-shopping" style="display:none">
|
||||
<div class="nearby-item"><span class="item-icon">🛒</span><div class="item-info"><strong>Winn-Dixie</strong><span>Grocery — 1.5 miles</span></div></div>
|
||||
<div class="nearby-item"><span class="item-icon">🏪</span><div class="item-info"><strong>Wal-Mart</strong><span>Supercenter nearby</span></div></div>
|
||||
<div class="nearby-item"><span class="item-icon">🛍️</span><div class="item-info"><strong>Sandestin Outlet Mall</strong><span>Premium outlet shopping</span></div></div>
|
||||
<div class="nearby-item"><span class="item-icon">✨</span><div class="item-info"><strong>Grand Blvd</strong><span>Upscale shopping district</span></div></div>
|
||||
<div class="nearby-item"><span class="item-icon">👗</span><div class="item-info"><strong>Silver Sands Outlets</strong><span>Designer outlet stores</span></div></div>
|
||||
</div>
|
||||
<div class="nearby-grid" id="nearby-attractions" style="display:none">
|
||||
<div class="nearby-item"><span class="item-icon">🏖️</span><div class="item-info"><strong>James Lee Beach</strong><span>Direct public beach access</span></div></div>
|
||||
<div class="nearby-item"><span class="item-icon">⚓</span><div class="item-info"><strong>Destin Harbor</strong><span>World's Luckiest Fishing Village</span></div></div>
|
||||
<div class="nearby-item"><span class="item-icon">🛣️</span><div class="item-info"><strong>30A</strong><span>Scenic coastal highway & boutique towns</span></div></div>
|
||||
<div class="nearby-item"><span class="item-icon">🌊</span><div class="item-info"><strong>Emerald Coast</strong><span>Stunning green-hued water</span></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== OWNERS ===== -->
|
||||
<section class="section owners" id="owners">
|
||||
<div class="container">
|
||||
<div class="owners-grid">
|
||||
<img src="https://static.wixstatic.com/media/0a1b51_5dca81e7c6984df68055636c3ab61015~mv2.jpg" alt="Tim & Ashley Moore" class="owners-photo fade-up" loading="lazy">
|
||||
<div class="owners-text fade-up fade-up-delay-1">
|
||||
<span class="section-label">Your Hosts</span>
|
||||
<h2 class="section-title">Tim & Ashley Moore</h2>
|
||||
<p class="tag">Welcome to our family's beach retreat!</p>
|
||||
<p>We fell in love with Miramar Beach years ago and are thrilled to share our slice of paradise with you. Our goal is simple: give your family the kind of beach vacation that turns into a tradition. We've stocked the condo with everything you need, partnered with the best beach service on the coast, and are always just a message away.</p>
|
||||
<p style="font-style:italic">"Come soak up the sun and make some memories. That's what Moore Sunny Daze is all about."</p>
|
||||
<p style="font-weight:600;color:var(--coral)">— Tim & Ashley</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== BOOK NOW ===== -->
|
||||
<section class="book-strip" id="book">
|
||||
<div class="container">
|
||||
<span class="section-label" style="color:rgba(255,255,255,.75)">Ready to Escape?</span>
|
||||
<h2>Book Your Stay at Moore Sunny Daze</h2>
|
||||
<p>Maravilla 1403 · Miramar Beach, FL · 3BR / 2BA · Sleeps 8 · Dog Friendly</p>
|
||||
<a href="https://www.vrbo.com/1313017" class="hero-cta" target="_blank" rel="noopener">🏖️ Check Availability on VRBO</a>
|
||||
<p style="margin-top:1rem;font-size:.9rem;opacity:.75">Also available on <a href="https://airbnb.com/rooms/1387088497032914961" target="_blank" rel="noopener" style="text-decoration:underline;color:#fff">Airbnb</a> — 5.0 ⭐ · 3-night minimum</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== FOOTER ===== -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-grid">
|
||||
<div>
|
||||
<h4>🌴 Moore Sunny Daze</h4>
|
||||
<p style="font-size:.9rem">Maravilla 1403<br>Miramar Beach, FL 32550</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Quick Links</h4>
|
||||
<ul class="footer-links">
|
||||
<li><a href="#rooms">Bedrooms</a></li>
|
||||
<li><a href="#amenities">Amenities</a></li>
|
||||
<li><a href="#community">Maravilla</a></li>
|
||||
<li><a href="#nearby">Nearby</a></li>
|
||||
<li><a href="#book">Book Now</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Book Direct</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 (5.0)</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">🌐 mooresunnydaze.com</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Hosted by</h4>
|
||||
<p style="font-size:.9rem">Tim & Ashley Moore<br>Superhosts · 1 year hosting</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>© 2026 Moore Sunny Daze. All rights reserved. | Maravilla 1403, Miramar Beach, FL</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- ===== MOBILE BOOK NOW FAB ===== -->
|
||||
<a href="#book" class="fab-book">🏖️ Book Now</a>
|
||||
|
||||
<script>
|
||||
/* ===== PARALLAX HERO ===== */
|
||||
const heroBg = document.getElementById('hero-bg');
|
||||
const navbar = document.getElementById('navbar');
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
const scrollY = window.scrollY;
|
||||
|
||||
// Parallax
|
||||
if (scrollY < window.innerHeight) {
|
||||
heroBg.style.transform = `translateY(${scrollY * 0.4}px)`;
|
||||
}
|
||||
|
||||
// Navbar
|
||||
navbar.classList.toggle('scrolled', scrollY > 60);
|
||||
});
|
||||
|
||||
/* ===== FADE-UP ON SCROLL ===== */
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' });
|
||||
|
||||
document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));
|
||||
|
||||
/* ===== NEARBY TABS ===== */
|
||||
function switchTab(tab, btn) {
|
||||
document.querySelectorAll('.nearby-tab').forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
|
||||
['dining','shopping','attractions'].forEach(id => {
|
||||
const el = document.getElementById(`nearby-${id}`);
|
||||
if (el) el.style.display = id === tab ? 'grid' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
/* ===== SMOOTH SCROLL OFFSET FOR FIXED NAV ===== */
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function(e) {
|
||||
const href = this.getAttribute('href');
|
||||
if (href === '#') return;
|
||||
const target = document.querySelector(href);
|
||||
if (target) {
|
||||
e.preventDefault();
|
||||
const offset = 80;
|
||||
const top = target.getBoundingClientRect().top + window.pageYOffset - offset;
|
||||
window.scrollTo({ top, behavior: 'smooth' });
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,789 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,599 @@
|
||||
<!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</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;1,14..32,400&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
/* ── Reset & Base ── */
|
||||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||||
html{scroll-behavior:smooth;font-size:16px}
|
||||
body{
|
||||
font-family:'Inter',-apple-system,sans-serif;
|
||||
color:#3D4A53;
|
||||
background:#FBF9F6;
|
||||
line-height:1.7;
|
||||
-webkit-font-smoothing:antialiased;
|
||||
overflow-x:hidden;
|
||||
}
|
||||
|
||||
/* ── Typography ── */
|
||||
h1,h2,h3,h4,.serif{font-family:'Playfair Display','Cormorant Garamond',Georgia,serif;font-weight:500;letter-spacing:-0.01em}
|
||||
h1{font-size:clamp(2.6rem,6vw,5rem);line-height:1.08;color:#fff}
|
||||
h2{font-size:clamp(1.8rem,3.5vw,2.6rem);line-height:1.2;color:#2C3E4E;margin-bottom:1.5rem}
|
||||
h3{font-size:clamp(1.3rem,2.2vw,1.6rem);color:#2C3E4E}
|
||||
.accent-line{
|
||||
display:block;
|
||||
width:60px;height:2px;
|
||||
background:linear-gradient(90deg,#C5A572 0%,#C5A572 40%,transparent 100%);
|
||||
margin:0 auto 1.8rem;
|
||||
}
|
||||
.accent-line.left{margin:0 0 1.8rem 0}
|
||||
|
||||
/* ── Colors ── */
|
||||
:root{
|
||||
--dusty-blue:#8BA4BC;
|
||||
--dusty-blue-dark:#6B8AA0;
|
||||
--sand:#D4C5B9;
|
||||
--sand-light:#EAE0D6;
|
||||
--gold:#C5A572;
|
||||
--gold-light:#D4B98A;
|
||||
--cream:#FBF9F6;
|
||||
--white:#FFFFFF;
|
||||
--text:#3D4A53;
|
||||
--text-light:#6B7B86;
|
||||
}
|
||||
|
||||
/* ── Navigation ── */
|
||||
.nav{
|
||||
position:fixed;top:0;left:0;right:0;z-index:100;
|
||||
padding:1.5rem 3rem;
|
||||
display:flex;justify-content:space-between;align-items:center;
|
||||
transition:background 0.4s ease, padding 0.4s ease;
|
||||
}
|
||||
.nav.scrolled{
|
||||
background:rgba(255,255,255,0.95);
|
||||
backdrop-filter:blur(16px);
|
||||
-webkit-backdrop-filter:blur(16px);
|
||||
padding:0.8rem 3rem;
|
||||
box-shadow:0 1px 0 rgba(0,0,0,0.05);
|
||||
}
|
||||
.nav-logo{
|
||||
font-family:'Playfair Display',serif;
|
||||
font-size:1.4rem;font-weight:600;color:#fff;
|
||||
letter-spacing:0.04em;
|
||||
transition:color 0.4s ease;
|
||||
}
|
||||
.nav.scrolled .nav-logo{color:#2C3E4E}
|
||||
.nav-links{display:flex;gap:2.2rem;list-style:none}
|
||||
.nav-links a{
|
||||
text-decoration:none;color:rgba(255,255,255,0.85);
|
||||
font-size:0.85rem;font-weight:400;letter-spacing:0.08em;
|
||||
text-transform:uppercase;
|
||||
transition:color 0.3s ease;
|
||||
}
|
||||
.nav.scrolled .nav-links a{color:#6B7B86}
|
||||
.nav-links a:hover{color:#C5A572}
|
||||
|
||||
/* ── Sections ── */
|
||||
section{padding:7rem 2rem}
|
||||
.section-header{text-align:center;max-width:650px;margin:0 auto 4rem}
|
||||
.section-header p{color:var(--text-light);font-size:1.05rem;line-height:1.8}
|
||||
|
||||
/* ── Hero ── */
|
||||
.hero{
|
||||
position:relative;
|
||||
height:100vh;min-height:650px;
|
||||
display:flex;align-items:center;justify-content:center;
|
||||
overflow:hidden;
|
||||
}
|
||||
.hero-bg{
|
||||
position:absolute;inset:0;
|
||||
background:url('https://static.wixstatic.com/media/0a1b51_e07cc4dbb6c74815812ad594235b011e~mv2.jpg') center/cover no-repeat;
|
||||
will-change:transform;
|
||||
}
|
||||
.hero::after{
|
||||
content:'';position:absolute;inset:0;
|
||||
background:linear-gradient(180deg,rgba(44,62,78,0.35) 0%,rgba(44,62,78,0.15) 60%,rgba(44,62,78,0.4) 100%);
|
||||
}
|
||||
.hero-content{
|
||||
position:relative;z-index:2;
|
||||
text-align:center;
|
||||
max-width:800px;
|
||||
padding:0 1.5rem;
|
||||
}
|
||||
.hero-overline{
|
||||
font-family:'Inter',sans-serif;
|
||||
font-size:0.8rem;font-weight:500;
|
||||
letter-spacing:0.25em;text-transform:uppercase;
|
||||
color:var(--gold-light);
|
||||
margin-bottom:1.5rem;
|
||||
}
|
||||
.hero h1{margin-bottom:1rem}
|
||||
.hero-subtitle{
|
||||
font-family:'Cormorant Garamond',serif;
|
||||
font-size:clamp(1.1rem,2vw,1.4rem);
|
||||
font-style:italic;font-weight:400;
|
||||
color:rgba(255,255,255,0.85);
|
||||
margin-bottom:2.5rem;
|
||||
}
|
||||
.hero-btn{
|
||||
display:inline-block;
|
||||
padding:0.9rem 2.8rem;
|
||||
border:1.5px solid rgba(255,255,255,0.8);
|
||||
color:#fff;
|
||||
text-decoration:none;
|
||||
font-size:0.85rem;font-weight:500;
|
||||
letter-spacing:0.12em;
|
||||
text-transform:uppercase;
|
||||
transition:all 0.35s ease;
|
||||
}
|
||||
.hero-btn:hover{background:#fff;color:#2C3E4E;border-color:#fff}
|
||||
|
||||
/* ── Story / Intro ── */
|
||||
.story{background:var(--cream)}
|
||||
.story-grid{
|
||||
display:grid;
|
||||
grid-template-columns:1fr 1fr;
|
||||
gap:5rem;
|
||||
align-items:center;
|
||||
max-width:1100px;
|
||||
margin:0 auto;
|
||||
}
|
||||
.story-image{
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
border-radius:2px;
|
||||
}
|
||||
.story-image img{
|
||||
width:100%;height:100%;
|
||||
object-fit:cover;
|
||||
display:block;
|
||||
transition:transform 0.6s ease;
|
||||
}
|
||||
.story-image:hover img{transform:scale(1.04)}
|
||||
.story-text .tag{
|
||||
display:inline-block;
|
||||
font-size:0.75rem;font-weight:500;
|
||||
letter-spacing:0.2em;text-transform:uppercase;
|
||||
color:var(--gold);
|
||||
margin-bottom:1rem;
|
||||
}
|
||||
.story-text h2{margin-bottom:1rem}
|
||||
.story-text p{color:var(--text-light);margin-bottom:1.2rem;font-size:1.02rem;line-height:1.85}
|
||||
|
||||
/* ── Bedroom Gallery ── */
|
||||
.gallery{background:var(--white)}
|
||||
.gallery-grid{
|
||||
display:grid;
|
||||
grid-template-columns:repeat(3,1fr);
|
||||
gap:1.5rem;
|
||||
max-width:1150px;
|
||||
margin:0 auto;
|
||||
}
|
||||
.gallery-card{
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
border-radius:2px;
|
||||
cursor:pointer;
|
||||
aspect-ratio:4/5;
|
||||
}
|
||||
.gallery-card img{
|
||||
width:100%;height:100%;
|
||||
object-fit:cover;
|
||||
display:block;
|
||||
transition:transform 0.6s ease;
|
||||
}
|
||||
.gallery-card:hover img{transform:scale(1.06)}
|
||||
.gallery-card .overlay{
|
||||
position:absolute;inset:0;
|
||||
background:linear-gradient(180deg,transparent 40%,rgba(44,62,78,0.7) 100%);
|
||||
display:flex;flex-direction:column;justify-content:flex-end;
|
||||
padding:1.8rem;
|
||||
transition:opacity 0.35s ease;
|
||||
}
|
||||
.gallery-card .room-name{
|
||||
font-family:'Playfair Display',serif;
|
||||
font-size:1.3rem;color:#fff;font-weight:500;
|
||||
}
|
||||
.gallery-card .room-detail{
|
||||
font-family:'Inter',sans-serif;
|
||||
font-size:0.8rem;color:rgba(255,255,255,0.75);
|
||||
margin-top:0.3rem;letter-spacing:0.05em;
|
||||
}
|
||||
|
||||
/* ── Amenities ── */
|
||||
.amenities{background:var(--cream)}
|
||||
.amenities-grid{
|
||||
display:grid;
|
||||
grid-template-columns:repeat(4,1fr);
|
||||
gap:2.5rem;
|
||||
max-width:1050px;
|
||||
margin:0 auto;
|
||||
}
|
||||
.amenity-item{text-align:center}
|
||||
.amenity-icon{
|
||||
width:56px;height:56px;
|
||||
margin:0 auto 1.2rem;
|
||||
display:flex;align-items:center;justify-content:center;
|
||||
opacity:0.7;
|
||||
}
|
||||
.amenity-icon svg{width:36px;height:36px;stroke:var(--dusty-blue)}
|
||||
.amenity-item h4{
|
||||
font-family:'Playfair Display',serif;
|
||||
font-size:1.05rem;font-weight:500;
|
||||
color:#2C3E4E;
|
||||
margin-bottom:0.4rem;
|
||||
}
|
||||
.amenity-item p{
|
||||
font-size:0.85rem;color:var(--text-light);
|
||||
line-height:1.5;
|
||||
}
|
||||
|
||||
/* ── Area Highlights ── */
|
||||
.area{background:var(--white)}
|
||||
.area-grid{
|
||||
display:grid;
|
||||
grid-template-columns:repeat(3,1fr);
|
||||
gap:2rem;
|
||||
max-width:1100px;
|
||||
margin:0 auto;
|
||||
}
|
||||
.area-card{
|
||||
background:var(--cream);
|
||||
padding:2.2rem 2rem;
|
||||
border-radius:2px;
|
||||
transition:transform 0.3s ease,box-shadow 0.3s ease;
|
||||
}
|
||||
.area-card:hover{
|
||||
transform:translateY(-4px);
|
||||
box-shadow:0 12px 40px rgba(0,0,0,0.06);
|
||||
}
|
||||
.area-card .cat{
|
||||
font-size:0.72rem;font-weight:500;
|
||||
letter-spacing:0.18em;text-transform:uppercase;
|
||||
color:var(--gold);
|
||||
margin-bottom:0.8rem;
|
||||
}
|
||||
.area-card h4{
|
||||
font-family:'Playfair Display',serif;
|
||||
font-size:1.25rem;margin-bottom:0.8rem;
|
||||
}
|
||||
.area-card p{
|
||||
font-size:0.9rem;color:var(--text-light);
|
||||
line-height:1.7;
|
||||
}
|
||||
|
||||
/* ── Booking CTA ── */
|
||||
.cta{
|
||||
position:relative;
|
||||
padding:8rem 2rem;
|
||||
display:flex;align-items:center;justify-content:center;
|
||||
overflow:hidden;
|
||||
}
|
||||
.cta-bg{
|
||||
position:absolute;inset:0;
|
||||
background:url('https://static.wixstatic.com/media/0a1b51_6781033f117e4c78979c2e8dcdeba671~mv2.jpg') center/cover no-repeat;
|
||||
will-change:transform;
|
||||
}
|
||||
.cta::after{
|
||||
content:'';position:absolute;inset:0;
|
||||
background:rgba(44,62,78,0.55);
|
||||
}
|
||||
.cta-content{
|
||||
position:relative;z-index:2;
|
||||
text-align:center;
|
||||
max-width:650px;
|
||||
}
|
||||
.cta-content h2{color:#fff;margin-bottom:1rem}
|
||||
.cta-content p{color:rgba(255,255,255,0.8);font-size:1.1rem;line-height:1.8;margin-bottom:2.5rem}
|
||||
.cta-btn{
|
||||
display:inline-block;
|
||||
padding:1rem 3rem;
|
||||
background:var(--gold);
|
||||
color:#fff;
|
||||
text-decoration:none;
|
||||
font-size:0.85rem;font-weight:500;
|
||||
letter-spacing:0.12em;
|
||||
text-transform:uppercase;
|
||||
border-radius:2px;
|
||||
transition:all 0.35s ease;
|
||||
}
|
||||
.cta-btn:hover{background:#B8955F;transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.15)}
|
||||
|
||||
/* ── Footer ── */
|
||||
.footer{
|
||||
background:#2C3E4E;
|
||||
color:rgba(255,255,255,0.7);
|
||||
padding:4rem 2rem 2.5rem;
|
||||
text-align:center;
|
||||
}
|
||||
.footer-owners{
|
||||
width:90px;height:90px;
|
||||
border-radius:50%;
|
||||
object-fit:cover;
|
||||
margin:0 auto 1.5rem;
|
||||
border:2px solid rgba(255,255,255,0.15);
|
||||
}
|
||||
.footer h3{color:#fff;font-size:1.4rem;margin-bottom:0.3rem}
|
||||
.footer .byline{font-size:0.85rem;color:rgba(255,255,255,0.5);margin-bottom:2rem}
|
||||
.footer-info{font-size:0.85rem;line-height:1.8;margin-bottom:2rem}
|
||||
.footer-bottom{
|
||||
border-top:1px solid rgba(255,255,255,0.08);
|
||||
padding-top:1.5rem;
|
||||
font-size:0.78rem;color:rgba(255,255,255,0.35);
|
||||
}
|
||||
|
||||
/* ── Fade-in Animations ── */
|
||||
.fade-in{
|
||||
opacity:0;
|
||||
transform:translateY(40px);
|
||||
transition:opacity 0.8s ease,transform 0.8s ease;
|
||||
}
|
||||
.fade-in.visible{opacity:1;transform:translateY(0)}
|
||||
.fade-in-delay-1{transition-delay:0.15s}
|
||||
.fade-in-delay-2{transition-delay:0.3s}
|
||||
.fade-in-delay-3{transition-delay:0.45s}
|
||||
|
||||
/* ── Mobile Nav Toggle ── */
|
||||
.mobile-toggle{
|
||||
display:none;
|
||||
background:none;border:none;
|
||||
cursor:pointer;
|
||||
padding:0.5rem;
|
||||
}
|
||||
.mobile-toggle span{
|
||||
display:block;
|
||||
width:24px;height:2px;
|
||||
background:#fff;
|
||||
margin:5px 0;
|
||||
transition:all 0.3s ease;
|
||||
}
|
||||
.nav.scrolled .mobile-toggle span{background:#2C3E4E}
|
||||
|
||||
/* ── Responsive ── */
|
||||
@media(max-width:900px){
|
||||
.nav{padding:1.2rem 1.5rem}
|
||||
.nav.scrolled{padding:0.7rem 1.5rem}
|
||||
.nav-links{display:none}
|
||||
.mobile-toggle{display:block}
|
||||
section{padding:4rem 1.2rem}
|
||||
.story-grid{grid-template-columns:1fr;gap:2.5rem}
|
||||
.gallery-grid{grid-template-columns:1fr 1fr}
|
||||
.amenities-grid{grid-template-columns:1fr 1fr;gap:2rem}
|
||||
.area-grid{grid-template-columns:1fr;max-width:500px}
|
||||
.hero{min-height:500px}
|
||||
}
|
||||
|
||||
@media(max-width:520px){
|
||||
.gallery-grid{grid-template-columns:1fr;max-width:380px;margin:0 auto}
|
||||
.amenities-grid{grid-template-columns:1fr 1fr;gap:1.5rem}
|
||||
.hero h1{font-size:2rem}
|
||||
.hero-subtitle{font-size:1rem}
|
||||
h2{font-size:1.5rem}
|
||||
section{padding:3rem 1rem}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ── Navigation ── -->
|
||||
<nav class="nav" id="nav">
|
||||
<a href="#" class="nav-logo">Moore Sunny Daze</a>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#story">The Property</a></li>
|
||||
<li><a href="#gallery">Rooms</a></li>
|
||||
<li><a href="#amenities">Amenities</a></li>
|
||||
<li><a href="#area">Explore</a></li>
|
||||
<li><a href="#cta">Book</a></li>
|
||||
</ul>
|
||||
<button class="mobile-toggle" id="mobileToggle" aria-label="Menu">
|
||||
<span></span><span></span><span></span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<!-- ── Hero ── -->
|
||||
<section class="hero" id="home">
|
||||
<div class="hero-bg" id="heroBg"></div>
|
||||
<div class="hero-content fade-in" id="heroContent">
|
||||
<p class="hero-overline">Maravilla 1403 · Miramar Beach, Florida</p>
|
||||
<h1>Moore<br>Sunny Daze</h1>
|
||||
<p class="hero-subtitle">A refined coastal retreat on the sugar-white shores of the Emerald Coast</p>
|
||||
<a href="#cta" class="hero-btn">Reserve Your Stay</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── Story ── -->
|
||||
<section class="story" id="story">
|
||||
<div class="section-header fade-in">
|
||||
<span class="accent-line"></span>
|
||||
<h2>Where the Gulf Meets Grace</h2>
|
||||
<p>Nestled within the gated enclave of Maravilla, this thoughtfully appointed three-bedroom retreat offers the rare combination of privacy, comfort, and effortless access to Miramar Beach's celebrated shoreline.</p>
|
||||
</div>
|
||||
<div class="story-grid">
|
||||
<div class="story-image fade-in">
|
||||
<img src="https://static.wixstatic.com/media/0a1b51_cc8d5a3847bf46ed90d4f801d63ccc47~mv2.jpg" alt="Moore Sunny Daze living room" loading="lazy">
|
||||
</div>
|
||||
<div class="story-text fade-in fade-in-delay-1">
|
||||
<span class="tag">The Property</span>
|
||||
<p>Perched on the 14th floor, Moore Sunny Daze captures panoramic Gulf views from every angle. Wake to the sound of waves, sip coffee on your private balcony, and let the rhythm of the coast set the pace. With three bedrooms, two full baths, and accommodations for eight, this is sanctuary redefined — where every detail has been curated for the discerning traveler.</p>
|
||||
<p>Step beyond your door to discover 2.5 acres of pristine private beach, two resort-style pools (one heated seasonally), and the warm hospitality that Miramar Beach is known for. This is more than a rental — it's your home on the Gulf.</p>
|
||||
<p style="font-style:italic;color:#8BA4BC;">— Tim & Ashley Moore, Owners</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── Bedroom Gallery ── -->
|
||||
<section class="gallery" id="gallery">
|
||||
<div class="section-header fade-in">
|
||||
<span class="accent-line"></span>
|
||||
<h2>Restful Interiors</h2>
|
||||
<p>Each sleeping space is designed for comfort and tranquility — premium linens, thoughtful touches, and the kind of quiet that invites deep rest.</p>
|
||||
</div>
|
||||
<div class="gallery-grid">
|
||||
<div class="gallery-card fade-in">
|
||||
<img src="https://static.wixstatic.com/media/0a1b51_f0ab02b0263d4d9f8deb071af33bf414~mv2.jpg" alt="Primary bedroom with king bed" loading="lazy">
|
||||
<div class="overlay">
|
||||
<span class="room-name">Primary Suite</span>
|
||||
<span class="room-detail">King Bed · En-Suite Bath · Balcony Access</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery-card fade-in fade-in-delay-1">
|
||||
<img src="https://static.wixstatic.com/media/0a1b51_fda7ac3fe55d429393a51b2c1148dbb5~mv2.jpg" alt="Kitchen and dining area" loading="lazy">
|
||||
<div class="overlay">
|
||||
<span class="room-name">Gourmet Kitchen</span>
|
||||
<span class="room-detail">Fully Equipped · Open Plan · Gulf Views</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery-card fade-in fade-in-delay-2">
|
||||
<img src="https://static.wixstatic.com/media/0a1b51_badbf4f136c741a1b2eae378e1d92787~mv2.jpg" alt="Bunk room" loading="lazy">
|
||||
<div class="overlay">
|
||||
<span class="room-name">Bunk Room</span>
|
||||
<span class="room-detail">Twin Bunks · Shared Bath · Coastal Charm</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="max-width:1150px;margin:2rem auto 0;text-align:center" class="fade-in">
|
||||
<p style="color:var(--text-light);font-size:0.95rem;">
|
||||
<strong style="color:#2C3E4E;">Sleeping Arrangements:</strong> Primary Suite — King with en-suite · Guest Room — King with direct bath access · Bunk Room — Twin bunks · Living Room — Queen sleeper sofa
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── Amenities ── -->
|
||||
<section class="amenities" id="amenities">
|
||||
<div class="section-header fade-in">
|
||||
<span class="accent-line"></span>
|
||||
<h2>Thoughtful Amenities</h2>
|
||||
<p>Every detail has been considered for an effortless stay — from beach service to resort recreation.</p>
|
||||
</div>
|
||||
<div class="amenities-grid">
|
||||
<div class="amenity-item fade-in">
|
||||
<div class="amenity-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.6"><path d="M2 20h20M5 12l-1 8M12 4l-1 16M19 8l-1 12"/></svg>
|
||||
</div>
|
||||
<h4>Private Beach</h4>
|
||||
<p>2.5 acres of sugar-white sand, exclusive to Maravilla guests</p>
|
||||
</div>
|
||||
<div class="amenity-item fade-in fade-in-delay-1">
|
||||
<div class="amenity-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.6"><rect x="2" y="4" width="20" height="16" rx="1"/><circle cx="12" cy="12" r="3"/></svg>
|
||||
</div>
|
||||
<h4>Beach Service</h4>
|
||||
<p>4 chairs + 2 umbrellas included mid-March through late October</p>
|
||||
</div>
|
||||
<div class="amenity-item fade-in fade-in-delay-2">
|
||||
<div class="amenity-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.6"><path d="M6 9h12M6 13h12M4 6h16a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V8a2 2 0 012-2z"/></svg>
|
||||
</div>
|
||||
<h4>Two Pools</h4>
|
||||
<p>Resort-style pools with one heated in winter, plus hot tub</p>
|
||||
</div>
|
||||
<div class="amenity-item fade-in fade-in-delay-3">
|
||||
<div class="amenity-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.6"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
|
||||
</div>
|
||||
<h4>Sports & Rec</h4>
|
||||
<p>Tennis, pickleball, basketball court, BBQ grills, fitness center</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── Area Highlights ── -->
|
||||
<section class="area" id="area">
|
||||
<div class="section-header fade-in">
|
||||
<span class="accent-line"></span>
|
||||
<h2>Explore the Emerald Coast</h2>
|
||||
<p>Miramar Beach sits at the heart of it all — between Destin Harbor and iconic 30A, with world-class dining and shopping within minutes.</p>
|
||||
</div>
|
||||
<div class="area-grid">
|
||||
<div class="area-card fade-in">
|
||||
<span class="cat">Dining</span>
|
||||
<h4>Coastal Flavors</h4>
|
||||
<p>Pompano Joe's for beachfront seafood, Captain Dave's for Gulf-to-table fare, Bijoux for New Orleans-inspired fine dining, and Mama Clemenza's for Italian breakfast.</p>
|
||||
</div>
|
||||
<div class="area-card fade-in fade-in-delay-1">
|
||||
<span class="cat">Shopping</span>
|
||||
<h4>Grand Boulevard</h4>
|
||||
<p>An upscale open-air district with Vin'Tij Food & Wine, Tommy Bahama Restaurant, and boutique shopping. Silver Sands Premium Outlets just minutes away.</p>
|
||||
</div>
|
||||
<div class="area-card fade-in fade-in-delay-2">
|
||||
<span class="cat">Beyond the Beach</span>
|
||||
<h4>Adventures Await</h4>
|
||||
<p>Drive the scenic 30A through Seaside and Rosemary Beach, explore Destin Harbor's fishing fleet, or simply stroll James Lee Beach at sunset.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── Booking CTA ── -->
|
||||
<section class="cta" id="cta">
|
||||
<div class="cta-bg" id="ctaBg"></div>
|
||||
<div class="cta-content fade-in">
|
||||
<span class="accent-line" style="margin:0 auto 1.8rem"></span>
|
||||
<h2>Begin Your Stay</h2>
|
||||
<p>A limited number of dates remain for the coming season. Three-night minimum · Beach service included · Dog friendly upon request. Secure your reservation today.</p>
|
||||
<a href="https://www.vrbo.com/1313017" class="cta-btn" target="_blank" rel="noopener">View Availability</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── Footer ── -->
|
||||
<footer class="footer">
|
||||
<img class="footer-owners" src="https://static.wixstatic.com/media/0a1b51_5dca81e7c6984df68055636c3ab61015~mv2.jpg" alt="Tim & Ashley Moore" loading="lazy">
|
||||
<h3>Tim & Ashley Moore</h3>
|
||||
<p class="byline">Your Hosts at Moore Sunny Daze</p>
|
||||
<p class="footer-info">
|
||||
Maravilla 1403 · Miramar Beach, FL 32550<br>
|
||||
3 Bedrooms · 2 Bathrooms · Sleeps 8<br>
|
||||
Gated Community · 2.5 Acres Private Beach
|
||||
</p>
|
||||
<p class="footer-bottom">
|
||||
© 2026 Moore Sunny Daze. All rights reserved. Designed with love on the Emerald Coast.
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<!-- ── Scripts ── -->
|
||||
<script>
|
||||
// Parallax
|
||||
(function(){
|
||||
const heroBg=document.getElementById('heroBg'),
|
||||
ctaBg=document.getElementById('ctaBg'),
|
||||
heroContent=document.getElementById('heroContent');
|
||||
function parallax(){
|
||||
const sy=window.scrollY;
|
||||
if(heroBg)heroBg.style.transform='translateY('+(sy*0.35)+'px)';
|
||||
if(ctaBg)ctaBg.style.transform='translateY('+((sy-ctaBg.parentElement.offsetTop)*0.25)+'px)';
|
||||
}
|
||||
window.addEventListener('scroll',parallax,{passive:true});
|
||||
parallax();
|
||||
|
||||
// Nav scroll effect
|
||||
const nav=document.getElementById('nav');
|
||||
window.addEventListener('scroll',function(){
|
||||
nav.classList.toggle('scrolled',window.scrollY>60);
|
||||
});
|
||||
|
||||
// Fade-in on scroll
|
||||
const faders=document.querySelectorAll('.fade-in');
|
||||
const observer=new IntersectionObserver(function(entries){
|
||||
entries.forEach(function(entry){
|
||||
if(entry.isIntersecting){entry.target.classList.add('visible');observer.unobserve(entry.target);}
|
||||
});
|
||||
},{threshold:0.15,rootMargin:'0px 0px -40px 0px'});
|
||||
faders.forEach(function(el){observer.observe(el);});
|
||||
|
||||
// Trigger hero content visible immediately
|
||||
if(heroContent)heroContent.classList.add('visible');
|
||||
|
||||
// Mobile toggle placeholder
|
||||
document.getElementById('mobileToggle').addEventListener('click',function(){
|
||||
// Placeholder for mobile menu expansion
|
||||
this.classList.toggle('open');
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user