140 lines
3.8 KiB
HTML
140 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Sage Wellness Spa — Temporarily Closed for Maintenance</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body {
|
||
background: #e8f0e9;
|
||
color: #3a5440;
|
||
font-family: 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 2rem;
|
||
}
|
||
.page {
|
||
max-width: 540px;
|
||
text-align: center;
|
||
}
|
||
.circle-logo {
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, #7aad88, #4a8c5c);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 auto 2rem;
|
||
box-shadow: 0 4px 20px rgba(74,140,92,0.25);
|
||
}
|
||
.circle-logo span { font-size: 2rem; }
|
||
.brand {
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
color: #2d4a35;
|
||
letter-spacing: 0.05em;
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
.brand-tag {
|
||
font-size: 0.7rem;
|
||
letter-spacing: 0.4em;
|
||
text-transform: uppercase;
|
||
color: #7aad88;
|
||
margin-bottom: 2.5rem;
|
||
}
|
||
.badge {
|
||
display: inline-block;
|
||
background: #f9f3e8;
|
||
border: 1px solid #d4c4a0;
|
||
padding: 0.5rem 1.25rem;
|
||
border-radius: 999px;
|
||
font-size: 0.75rem;
|
||
letter-spacing: 0.2em;
|
||
text-transform: uppercase;
|
||
color: #8a7055;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
h1 {
|
||
font-size: clamp(1.5rem, 4vw, 2.2rem);
|
||
font-weight: 300;
|
||
color: #2d4a35;
|
||
line-height: 1.3;
|
||
margin-bottom: 1rem;
|
||
}
|
||
h1 strong { font-weight: 700; }
|
||
.leaf-row {
|
||
color: #7aad88;
|
||
font-size: 1.2rem;
|
||
margin: 1.25rem 0;
|
||
letter-spacing: 0.5em;
|
||
}
|
||
p {
|
||
font-size: 0.95rem;
|
||
line-height: 1.8;
|
||
color: #5a7060;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
.info-box {
|
||
background: #fff;
|
||
border: 1px solid #c8dcc8;
|
||
border-radius: 10px;
|
||
padding: 1.5rem;
|
||
margin: 2rem 0;
|
||
text-align: left;
|
||
}
|
||
.info-row {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 0.75rem;
|
||
padding: 0.5rem 0;
|
||
font-size: 0.88rem;
|
||
color: #4a6455;
|
||
border-bottom: 1px solid #e0eae0;
|
||
}
|
||
.info-row:last-child { border-bottom: none; }
|
||
.info-icon { color: #7aad88; flex-shrink: 0; margin-top: 0.1rem; }
|
||
.footer-text {
|
||
font-size: 0.78rem;
|
||
color: #9ab8a0;
|
||
letter-spacing: 0.1em;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="page">
|
||
<div class="circle-logo"><span>🌿</span></div>
|
||
<div class="brand">Sage Wellness Spa</div>
|
||
<div class="brand-tag">Body & Mind</div>
|
||
<div class="badge">⚠ Maintenance Notice</div>
|
||
<h1>Temporarily Closed<br>for <strong>Maintenance</strong></h1>
|
||
<div class="leaf-row">✧ ✧ ✧</div>
|
||
<p>We are performing essential maintenance on our online booking system to give you a smoother, more tranquil experience when scheduling your next visit.</p>
|
||
<p>We expect to be back online within 24 hours. Our spa remains open during this time — please call us directly to book.</p>
|
||
<div class="info-box">
|
||
<div class="info-row">
|
||
<span class="info-icon">🕐</span>
|
||
<span><strong>Maintenance Window:</strong> Approx. 24 hours</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span class="info-icon">💬</span>
|
||
<span><strong>Appointments:</strong> Please call to book during maintenance</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span class="info-icon">🏢</span>
|
||
<span><strong>Spa Hours:</strong> Mon–Sat 9am–7pm, Sun 10am–5pm</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span class="info-icon">✔</span>
|
||
<span><strong>Gift Cards:</strong> Remain valid — no action required</span>
|
||
</div>
|
||
</div>
|
||
<div class="footer-text">Thank you for your patience | We'll be back soon</div>
|
||
</div>
|
||
</body>
|
||
</html>
|