Initial AI-generated site
This commit is contained in:
+455
@@ -0,0 +1,455 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="he" dir="rtl">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>סטודיו מראה | עיצוב שיער בפתח תקווה</title>
|
||||||
|
<meta name="description" content="סטודיו מראה – סלון עיצוב שיער מוביל בפתח תקווה. תספורות, צביעה, טיפולים וייעוץ אישי. רחוב רוטשילד 45. קבעו תור: 054-9876543">
|
||||||
|
<meta property="og:title" content="סטודיו מראה | עיצוב שיער בפתח תקווה">
|
||||||
|
<meta property="og:description" content="תספורות מעוצבות, צביעה מקצועית וטיפולי שיער. רחוב רוטשילד 45, פתח תקווה.">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='45' fill='%231a1a1a'/><path d='M30 70 Q50 20 70 70' stroke='%23c9a961' stroke-width='4' fill='none'/></svg>">
|
||||||
|
<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=Heebo:wght@300;400;500;600&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<a href="#main-content" class="skip-link">דלגו לתוכן הראשי</a>
|
||||||
|
|
||||||
|
<header class="site-header">
|
||||||
|
<nav class="nav-container">
|
||||||
|
<a href="#hero" class="logo">
|
||||||
|
<svg class="logo-icon" viewBox="0 0 50 50" aria-hidden="true">
|
||||||
|
<circle cx="25" cy="25" r="23" fill="none" stroke="currentColor" stroke-width="1.5"/>
|
||||||
|
<path d="M15 38 Q25 10 35 38" stroke="currentColor" stroke-width="2" fill="none"/>
|
||||||
|
</svg>
|
||||||
|
<span>סטודיו מראה</span>
|
||||||
|
</a>
|
||||||
|
<button class="nav-toggle" aria-label="פתיחת תפריט ניווט" aria-expanded="false" aria-controls="main-nav">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</button>
|
||||||
|
<ul class="nav-menu" id="main-nav">
|
||||||
|
<li><a href="#services">שירותים</a></li>
|
||||||
|
<li><a href="#gallery">גלריה</a></li>
|
||||||
|
<li><a href="#booking">תיאום תור</a></li>
|
||||||
|
<li><a href="#contact">צור קשר</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main id="main-content">
|
||||||
|
<section id="hero" class="hero">
|
||||||
|
<div class="hero-bg">
|
||||||
|
<div class="hero-gradient"></div>
|
||||||
|
<svg class="hero-pattern" viewBox="0 0 400 400" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
|
||||||
|
<defs>
|
||||||
|
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
|
||||||
|
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(201,169,97,0.08)" stroke-width="1"/>
|
||||||
|
</pattern>
|
||||||
|
</defs>
|
||||||
|
<rect width="100%" height="100%" fill="url(#grid)"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="hero-content">
|
||||||
|
<p class="hero-eyebrow">רחוב רוטשילד 45, פתח תקווה</p>
|
||||||
|
<h1 class="hero-title">
|
||||||
|
<span class="title-line">סטודיו</span>
|
||||||
|
<span class="title-line title-accent">מראה</span>
|
||||||
|
</h1>
|
||||||
|
<p class="hero-desc">לא רק תספורת — שיחה, התאמה אישית ותוצאה שמרגישה כמוכם. הצוות שלנו מקשיב לפני שגוזר.</p>
|
||||||
|
<div class="hero-actions">
|
||||||
|
<a href="#booking" class="btn btn-primary">קבעו תור</a>
|
||||||
|
<a href="tel:054-9876543" class="btn btn-secondary">
|
||||||
|
<svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
|
||||||
|
</svg>
|
||||||
|
054-9876543
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-visual">
|
||||||
|
<svg class="hero-illustration" viewBox="0 0 300 400" aria-hidden="true">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="hair-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" stop-color="var(--gold)"/>
|
||||||
|
<stop offset="100%" stop-color="var(--gold-dark)"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<ellipse cx="150" cy="120" rx="70" ry="85" fill="var(--surface)"/>
|
||||||
|
<path d="M80 100 Q60 150 80 220 Q100 280 150 300 Q200 280 220 220 Q240 150 220 100 Q200 50 150 40 Q100 50 80 100" fill="url(#hair-gradient)" opacity="0.9"/>
|
||||||
|
<ellipse cx="150" cy="130" rx="50" ry="60" fill="var(--surface)"/>
|
||||||
|
<circle cx="130" cy="120" r="5" fill="var(--text)"/>
|
||||||
|
<circle cx="170" cy="120" r="5" fill="var(--text)"/>
|
||||||
|
<path d="M135 150 Q150 160 165 150" stroke="var(--text)" stroke-width="2" fill="none"/>
|
||||||
|
<path d="M70 90 Q50 60 80 40 Q120 20 150 30" stroke="var(--gold)" stroke-width="3" fill="none"/>
|
||||||
|
<path d="M230 90 Q250 60 220 40 Q180 20 150 30" stroke="var(--gold)" stroke-width="3" fill="none"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="services" class="services">
|
||||||
|
<div class="container">
|
||||||
|
<header class="section-header">
|
||||||
|
<span class="section-number">01</span>
|
||||||
|
<h2 class="section-title">מה אנחנו עושים</h2>
|
||||||
|
<p class="section-desc">כל שירות מתחיל בשיחת ייעוץ קצרה — בלי הפתעות, רק תוצאות</p>
|
||||||
|
</header>
|
||||||
|
<div class="services-grid">
|
||||||
|
<article class="service-card service-card--highlight">
|
||||||
|
<div class="service-icon">
|
||||||
|
<svg viewBox="0 0 60 60" aria-hidden="true">
|
||||||
|
<path d="M20 45 L20 20 Q30 10 40 20 L40 45" stroke="currentColor" stroke-width="2" fill="none"/>
|
||||||
|
<circle cx="30" cy="15" r="8" stroke="currentColor" stroke-width="2" fill="none"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>תספורות עיצוב</h3>
|
||||||
|
<p>גזירה מדויקת שמתאימה למבנה הפנים ולסגנון החיים שלכם. נשים, גברים וילדים.</p>
|
||||||
|
<span class="service-price">החל מ-120 ₪</span>
|
||||||
|
</article>
|
||||||
|
<article class="service-card">
|
||||||
|
<div class="service-icon">
|
||||||
|
<svg viewBox="0 0 60 60" aria-hidden="true">
|
||||||
|
<rect x="15" y="10" width="30" height="40" rx="4" stroke="currentColor" stroke-width="2" fill="none"/>
|
||||||
|
<line x1="22" y1="20" x2="38" y2="20" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<line x1="22" y1="30" x2="38" y2="30" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<circle cx="30" cy="42" r="4" stroke="currentColor" stroke-width="2" fill="none"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>צביעה וגוונים</h3>
|
||||||
|
<p>מבלונד סקנדינבי ועד שחור עמוק. צבעים איכותיים שנשארים חיים לאורך זמן.</p>
|
||||||
|
<span class="service-price">החל מ-250 ₪</span>
|
||||||
|
</article>
|
||||||
|
<article class="service-card">
|
||||||
|
<div class="service-icon">
|
||||||
|
<svg viewBox="0 0 60 60" aria-hidden="true">
|
||||||
|
<path d="M15 30 Q30 15 45 30 Q30 45 15 30" stroke="currentColor" stroke-width="2" fill="none"/>
|
||||||
|
<circle cx="30" cy="30" r="5" fill="currentColor"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>טיפולי שיקום</h3>
|
||||||
|
<p>קרטין, בוטוקס לשיער, טיפולי לחות עמוקים. להחזיר את הברק והבריאות.</p>
|
||||||
|
<span class="service-price">החל מ-180 ₪</span>
|
||||||
|
</article>
|
||||||
|
<article class="service-card">
|
||||||
|
<div class="service-icon">
|
||||||
|
<svg viewBox="0 0 60 60" aria-hidden="true">
|
||||||
|
<path d="M30 10 L30 50 M20 20 L40 20 M15 35 L45 35" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<circle cx="30" cy="10" r="4" fill="currentColor"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>פן והחלקות</h3>
|
||||||
|
<p>עיצוב לאירוע או החלקה שנשארת חודשים. ברזילאית, יפנית או משי.</p>
|
||||||
|
<span class="service-price">החל מ-100 ₪</span>
|
||||||
|
</article>
|
||||||
|
<article class="service-card">
|
||||||
|
<div class="service-icon">
|
||||||
|
<svg viewBox="0 0 60 60" aria-hidden="true">
|
||||||
|
<path d="M20 15 Q30 25 40 15 M20 25 Q30 35 40 25 M20 35 Q30 45 40 35 M20 45 Q30 55 40 45" stroke="currentColor" stroke-width="2" fill="none"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>תוספות שיער</h3>
|
||||||
|
<p>אורך ונפח טבעיים. התקנה מקצועית שלא פוגעת בשיער המקורי.</p>
|
||||||
|
<span class="service-price">החל מ-400 ₪</span>
|
||||||
|
</article>
|
||||||
|
<article class="service-card service-card--accent">
|
||||||
|
<div class="service-icon">
|
||||||
|
<svg viewBox="0 0 60 60" aria-hidden="true">
|
||||||
|
<circle cx="30" cy="25" r="12" stroke="currentColor" stroke-width="2" fill="none"/>
|
||||||
|
<path d="M22 40 L30 50 L38 40" stroke="currentColor" stroke-width="2" fill="none"/>
|
||||||
|
<line x1="30" y1="37" x2="30" y2="50" stroke="currentColor" stroke-width="2"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>עיצוב כלות</h3>
|
||||||
|
<p>פגישת ניסיון + עיצוב ביום החתונה. ניסיון של 15 שנה באירועים.</p>
|
||||||
|
<span class="service-price">החל מ-600 ₪</span>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="gallery" class="gallery">
|
||||||
|
<div class="container">
|
||||||
|
<header class="section-header">
|
||||||
|
<span class="section-number">02</span>
|
||||||
|
<h2 class="section-title">עבודות אחרונות</h2>
|
||||||
|
<p class="section-desc">לקוחות אמיתיות, תוצאות אמיתיות</p>
|
||||||
|
</header>
|
||||||
|
<div class="gallery-grid">
|
||||||
|
<figure class="gallery-item">
|
||||||
|
<div class="gallery-visual">
|
||||||
|
<svg viewBox="0 0 200 200" role="img" aria-label="צביעת אומברה זהובה">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="g1" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" stop-color="#c9a961"/>
|
||||||
|
<stop offset="100%" stop-color="#8b7355"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect width="200" height="200" fill="var(--surface-alt)"/>
|
||||||
|
<ellipse cx="100" cy="85" rx="45" ry="55" fill="#f5f0e8"/>
|
||||||
|
<path d="M55 75 Q40 110 55 160 Q70 195 100 200 Q130 195 145 160 Q160 110 145 75 Q130 50 100 45 Q70 50 55 75" fill="url(#g1)"/>
|
||||||
|
<ellipse cx="100" cy="90" rx="33" ry="40" fill="#f5f0e8"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<figcaption>אומברה זהובה</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure class="gallery-item">
|
||||||
|
<div class="gallery-visual">
|
||||||
|
<svg viewBox="0 0 200 200" role="img" aria-label="תספורת פיקסי מודרנית">
|
||||||
|
<rect width="200" height="200" fill="var(--surface-alt)"/>
|
||||||
|
<ellipse cx="100" cy="90" rx="45" ry="55" fill="#f5f0e8"/>
|
||||||
|
<path d="M55 70 Q40 50 60 35 Q100 15 140 35 Q160 50 145 70 Q130 60 100 55 Q70 60 55 70" fill="#2c2c2c"/>
|
||||||
|
<ellipse cx="100" cy="95" rx="35" ry="42" fill="#f5f0e8"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<figcaption>פיקסי מודרנית</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure class="gallery-item">
|
||||||
|
<div class="gallery-visual">
|
||||||
|
<svg viewBox="0 0 200 200" role="img" aria-label="צביעה בגווני סגול נועז">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="g2" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" stop-color="#9b59b6"/>
|
||||||
|
<stop offset="100%" stop-color="#6c3483"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect width="200" height="200" fill="var(--surface-alt)"/>
|
||||||
|
<ellipse cx="100" cy="85" rx="45" ry="55" fill="#f5f0e8"/>
|
||||||
|
<path d="M50 75 Q35 100 50 150 Q65 190 100 195 Q135 190 150 150 Q165 100 150 75 Q135 55 100 50 Q65 55 50 75" fill="url(#g2)"/>
|
||||||
|
<ellipse cx="100" cy="90" rx="33" ry="40" fill="#f5f0e8"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<figcaption>סגול נועז</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure class="gallery-item gallery-item--wide">
|
||||||
|
<div class="gallery-visual">
|
||||||
|
<svg viewBox="0 0 400 200" role="img" aria-label="תסרוקת כלה רומנטית עם פרחים">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="g3" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" stop-color="#d4a574"/>
|
||||||
|
<stop offset="100%" stop-color="#a67c52"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect width="400" height="200" fill="var(--surface-alt)"/>
|
||||||
|
<ellipse cx="200" cy="90" rx="55" ry="65" fill="#f5f0e8"/>
|
||||||
|
<path d="M140 70 Q120 40 150 25 Q200 5 250 25 Q280 40 260 70" fill="url(#g3)"/>
|
||||||
|
<ellipse cx="200" cy="95" rx="42" ry="50" fill="#f5f0e8"/>
|
||||||
|
<circle cx="170" cy="45" r="8" fill="#fff" opacity="0.6"/>
|
||||||
|
<circle cx="200" cy="35" r="6" fill="#fff" opacity="0.6"/>
|
||||||
|
<circle cx="230" cy="45" r="8" fill="#fff" opacity="0.6"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<figcaption>תסרוקת כלה</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure class="gallery-item">
|
||||||
|
<div class="gallery-visual">
|
||||||
|
<svg viewBox="0 0 200 200" role="img" aria-label="בלייאז׳ טבעי בגווני זהב">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="g4" x1="0%" y1="100%" x2="100%" y2="0%">
|
||||||
|
<stop offset="0%" stop-color="#8b7355"/>
|
||||||
|
<stop offset="50%" stop-color="#c9a961"/>
|
||||||
|
<stop offset="100%" stop-color="#f4e4ba"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect width="200" height="200" fill="var(--surface-alt)"/>
|
||||||
|
<ellipse cx="100" cy="85" rx="45" ry="55" fill="#f5f0e8"/>
|
||||||
|
<path d="M55 80 Q45 110 55 160 Q70 195 100 200 Q130 195 145 160 Q155 110 145 80 Q130 50 100 45 Q70 50 55 80" fill="url(#g4)"/>
|
||||||
|
<ellipse cx="100" cy="90" rx="32" ry="40" fill="#f5f0e8"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<figcaption>בלייאז׳ טבעי</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure class="gallery-item">
|
||||||
|
<div class="gallery-visual">
|
||||||
|
<svg viewBox="0 0 200 200" role="img" aria-label="החלקה יפנית שיער חלק ומבריק">
|
||||||
|
<rect width="200" height="200" fill="var(--surface-alt)"/>
|
||||||
|
<ellipse cx="100" cy="85" rx="45" ry="55" fill="#f5f0e8"/>
|
||||||
|
<path d="M55 65 L55 180 Q77 195 100 195 Q123 195 145 180 L145 65 Q130 50 100 45 Q70 50 55 65" fill="#1a1a1a"/>
|
||||||
|
<ellipse cx="100" cy="90" rx="32" ry="40" fill="#f5f0e8"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<figcaption>החלקה יפנית</figcaption>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="booking" class="booking">
|
||||||
|
<div class="container">
|
||||||
|
<div class="booking-layout">
|
||||||
|
<div class="booking-info">
|
||||||
|
<header class="section-header section-header--start">
|
||||||
|
<span class="section-number">03</span>
|
||||||
|
<h2 class="section-title">קביעת תור</h2>
|
||||||
|
<p class="section-desc">מלאו את הפרטים ונחזור אליכם תוך 3 שעות לאישור. או פשוט התקשרו.</p>
|
||||||
|
</header>
|
||||||
|
<div class="booking-features">
|
||||||
|
<div class="feature">
|
||||||
|
<svg viewBox="0 0 40 40" aria-hidden="true">
|
||||||
|
<circle cx="20" cy="20" r="18" stroke="currentColor" stroke-width="1.5" fill="none"/>
|
||||||
|
<path d="M20 10 L20 22 L28 26" stroke="currentColor" stroke-width="2" fill="none"/>
|
||||||
|
</svg>
|
||||||
|
<div>
|
||||||
|
<h4>שעות פעילות</h4>
|
||||||
|
<p>א׳-ה׳: 9:00-20:00<br>ו׳: 8:00-14:00</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="feature">
|
||||||
|
<svg viewBox="0 0 40 40" aria-hidden="true">
|
||||||
|
<path d="M20 5 C10 5 5 12 5 20 C5 30 20 38 20 38 C20 38 35 30 35 20 C35 12 30 5 20 5Z" stroke="currentColor" stroke-width="1.5" fill="none"/>
|
||||||
|
<circle cx="20" cy="20" r="5" stroke="currentColor" stroke-width="1.5" fill="none"/>
|
||||||
|
</svg>
|
||||||
|
<div>
|
||||||
|
<h4>כתובת</h4>
|
||||||
|
<p>רחוב רוטשילד 45<br>פתח תקווה</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="feature">
|
||||||
|
<svg viewBox="0 0 40 40" aria-hidden="true">
|
||||||
|
<path d="M35 28.5v3a2 2 0 0 1-2.18 2A18 18 0 0 1 5 11.18 2 2 0 0 1 7 9h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L11 17a14 14 0 0 0 6 6l1.36-1.36a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 25 24h3a2 2 0 0 1 2 1.72v2.78z" stroke="currentColor" stroke-width="1.5" fill="none"/>
|
||||||
|
</svg>
|
||||||
|
<div>
|
||||||
|
<h4>טלפון</h4>
|
||||||
|
<p><a href="tel:054-9876543" class="feature-link">054-9876543</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<form class="booking-form" id="bookingForm" novalidate>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="name">שם מלא <span class="required">*</span></label>
|
||||||
|
<input type="text" id="name" name="name" required autocomplete="name">
|
||||||
|
<span class="error-message" id="name-error"></span>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="phone">טלפון <span class="required">*</span></label>
|
||||||
|
<input type="tel" id="phone" name="phone" required autocomplete="tel" dir="ltr" placeholder="050-0000000">
|
||||||
|
<span class="error-message" id="phone-error"></span>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="service">שירות מבוקש <span class="required">*</span></label>
|
||||||
|
<select id="service" name="service" required>
|
||||||
|
<option value="">בחרו שירות</option>
|
||||||
|
<option value="haircut">תספורת עיצוב</option>
|
||||||
|
<option value="color">צביעה וגוונים</option>
|
||||||
|
<option value="treatment">טיפולי שיקום</option>
|
||||||
|
<option value="styling">פן והחלקות</option>
|
||||||
|
<option value="extensions">תוספות שיער</option>
|
||||||
|
<option value="bridal">עיצוב כלות</option>
|
||||||
|
</select>
|
||||||
|
<span class="error-message" id="service-error"></span>
|
||||||
|
</div>
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="date">תאריך מבוקש <span class="required">*</span></label>
|
||||||
|
<input type="date" id="date" name="date" required>
|
||||||
|
<span class="error-message" id="date-error"></span>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="time">שעה מועדפת <span class="required">*</span></label>
|
||||||
|
<select id="time" name="time" required>
|
||||||
|
<option value="">בחרו שעה</option>
|
||||||
|
<option value="09:00">09:00</option>
|
||||||
|
<option value="10:00">10:00</option>
|
||||||
|
<option value="11:00">11:00</option>
|
||||||
|
<option value="12:00">12:00</option>
|
||||||
|
<option value="13:00">13:00</option>
|
||||||
|
<option value="14:00">14:00</option>
|
||||||
|
<option value="15:00">15:00</option>
|
||||||
|
<option value="16:00">16:00</option>
|
||||||
|
<option value="17:00">17:00</option>
|
||||||
|
<option value="18:00">18:00</option>
|
||||||
|
<option value="19:00">19:00</option>
|
||||||
|
</select>
|
||||||
|
<span class="error-message" id="time-error"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="notes">הערות (לא חובה)</label>
|
||||||
|
<textarea id="notes" name="notes" rows="3" placeholder="ספרו לנו מה חשוב לכם..."></textarea>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn btn-primary btn-full">שליחת בקשה</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="contact" class="contact">
|
||||||
|
<div class="container">
|
||||||
|
<div class="contact-layout">
|
||||||
|
<div class="contact-content">
|
||||||
|
<header class="section-header section-header--start">
|
||||||
|
<span class="section-number">04</span>
|
||||||
|
<h2 class="section-title">שאלות?</h2>
|
||||||
|
<p class="section-desc">שלחו הודעה ונחזור אליכם. או פשוט בואו לבקר — הקפה עלינו.</p>
|
||||||
|
</header>
|
||||||
|
<form class="contact-form" id="contactForm" novalidate>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="contactName">שם <span class="required">*</span></label>
|
||||||
|
<input type="text" id="contactName" name="name" required autocomplete="name">
|
||||||
|
<span class="error-message" id="contactName-error"></span>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="contactEmail">אימייל <span class="required">*</span></label>
|
||||||
|
<input type="email" id="contactEmail" name="email" required autocomplete="email" dir="ltr" placeholder="you@example.com">
|
||||||
|
<span class="error-message" id="contactEmail-error"></span>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="contactMessage">הודעה <span class="required">*</span></label>
|
||||||
|
<textarea id="contactMessage" name="message" rows="4" required placeholder="מה תרצו לשאול?"></textarea>
|
||||||
|
<span class="error-message" id="contactMessage-error"></span>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn btn-primary">שליחת הודעה</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="contact-map">
|
||||||
|
<div class="map-embed">
|
||||||
|
<iframe
|
||||||
|
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3380.5!2d34.8869!3d32.0889!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzLCsDA1JzIwLjAiTiAzNMKwNTMnMTMuMCJF!5e0!3m2!1siw!2sil!4v1"
|
||||||
|
allowfullscreen=""
|
||||||
|
loading="lazy"
|
||||||
|
referrerpolicy="no-referrer-when-downgrade"
|
||||||
|
title="מפת הגעה לסטודיו מראה, רחוב רוטשילד 45 פתח תקווה">
|
||||||
|
</iframe>
|
||||||
|
<p>רחוב רוטשילד 45, פתח תקווה</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="site-footer">
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-content">
|
||||||
|
<div class="footer-brand">
|
||||||
|
<a href="#hero" class="logo">
|
||||||
|
<svg class="logo-icon" viewBox="0 0 50 50" aria-hidden="true">
|
||||||
|
<circle cx="25" cy="25" r="23" fill="none" stroke="currentColor" stroke-width="1.5"/>
|
||||||
|
<path d="M15 38 Q25 10 35 38" stroke="currentColor" stroke-width="2" fill="none"/>
|
||||||
|
</svg>
|
||||||
|
<span>סטודיו מראה</span>
|
||||||
|
</a>
|
||||||
|
<p>רחוב רוטשילד 45, פתח תקווה</p>
|
||||||
|
<p><a href="tel:054-9876543" class="footer-phone">054-9876543</a></p>
|
||||||
|
</div>
|
||||||
|
<nav class="footer-nav" aria-label="ניווט תחתון">
|
||||||
|
<a href="#services">שירותים</a>
|
||||||
|
<a href="#gallery">גלריה</a>
|
||||||
|
<a href="#booking">תיאום תור</a>
|
||||||
|
<a href="#contact">צור קשר</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div class="footer-bottom">
|
||||||
|
<p>© <span id="currentYear"></span> סטודיו מראה. כל הזכויות שמורות.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<div class="toast" id="toast" role="status" aria-live="polite" aria-atomic="true"></div>
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,289 @@
|
|||||||
|
(function() {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
// Set current year in footer
|
||||||
|
const yearEl = document.getElementById('currentYear');
|
||||||
|
if (yearEl) {
|
||||||
|
yearEl.textContent = new Date().getFullYear();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check for reduced motion preference
|
||||||
|
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||||
|
|
||||||
|
// Mobile Navigation
|
||||||
|
const navToggle = document.querySelector('.nav-toggle');
|
||||||
|
const navMenu = document.querySelector('.nav-menu');
|
||||||
|
|
||||||
|
if (navToggle && navMenu) {
|
||||||
|
navToggle.addEventListener('click', () => {
|
||||||
|
const isExpanded = navToggle.getAttribute('aria-expanded') === 'true';
|
||||||
|
navToggle.setAttribute('aria-expanded', !isExpanded);
|
||||||
|
navToggle.setAttribute('aria-label', isExpanded ? 'פתיחת תפריט ניווט' : 'סגירת תפריט ניווט');
|
||||||
|
navMenu.classList.toggle('active');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Close menu when clicking a link
|
||||||
|
navMenu.querySelectorAll('a').forEach(link => {
|
||||||
|
link.addEventListener('click', () => {
|
||||||
|
navToggle.setAttribute('aria-expanded', 'false');
|
||||||
|
navToggle.setAttribute('aria-label', 'פתיחת תפריט ניווט');
|
||||||
|
navMenu.classList.remove('active');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Close menu on escape key
|
||||||
|
document.addEventListener('keydown', (e) => {
|
||||||
|
if (e.key === 'Escape' && navMenu.classList.contains('active')) {
|
||||||
|
navToggle.setAttribute('aria-expanded', 'false');
|
||||||
|
navToggle.setAttribute('aria-label', 'פתיחת תפריט ניווט');
|
||||||
|
navMenu.classList.remove('active');
|
||||||
|
navToggle.focus();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Smooth scroll for anchor links
|
||||||
|
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();
|
||||||
|
target.scrollIntoView({
|
||||||
|
behavior: prefersReducedMotion ? 'auto' : 'smooth',
|
||||||
|
block: 'start'
|
||||||
|
});
|
||||||
|
// Set focus to target for accessibility
|
||||||
|
target.setAttribute('tabindex', '-1');
|
||||||
|
target.focus({ preventScroll: true });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Toast notification
|
||||||
|
function showToast(message, type = 'success') {
|
||||||
|
const toast = document.getElementById('toast');
|
||||||
|
if (!toast) return;
|
||||||
|
|
||||||
|
toast.textContent = message;
|
||||||
|
toast.className = 'toast show ' + type;
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
toast.classList.remove('show');
|
||||||
|
}, 4000);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Form validation helpers
|
||||||
|
function showError(inputId, message) {
|
||||||
|
const input = document.getElementById(inputId);
|
||||||
|
const errorEl = document.getElementById(inputId + '-error');
|
||||||
|
if (input) {
|
||||||
|
input.classList.add('error');
|
||||||
|
input.setAttribute('aria-invalid', 'true');
|
||||||
|
input.setAttribute('aria-describedby', inputId + '-error');
|
||||||
|
}
|
||||||
|
if (errorEl) {
|
||||||
|
errorEl.textContent = message;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearError(inputId) {
|
||||||
|
const input = document.getElementById(inputId);
|
||||||
|
const errorEl = document.getElementById(inputId + '-error');
|
||||||
|
if (input) {
|
||||||
|
input.classList.remove('error');
|
||||||
|
input.removeAttribute('aria-invalid');
|
||||||
|
input.removeAttribute('aria-describedby');
|
||||||
|
}
|
||||||
|
if (errorEl) {
|
||||||
|
errorEl.textContent = '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearAllErrors(form) {
|
||||||
|
form.querySelectorAll('.error').forEach(el => el.classList.remove('error'));
|
||||||
|
form.querySelectorAll('.error-message').forEach(el => el.textContent = '');
|
||||||
|
form.querySelectorAll('[aria-invalid]').forEach(el => {
|
||||||
|
el.removeAttribute('aria-invalid');
|
||||||
|
el.removeAttribute('aria-describedby');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set minimum date for booking
|
||||||
|
const dateInput = document.getElementById('date');
|
||||||
|
if (dateInput) {
|
||||||
|
const today = new Date();
|
||||||
|
const tomorrow = new Date(today);
|
||||||
|
tomorrow.setDate(tomorrow.getDate() + 1);
|
||||||
|
|
||||||
|
const year = tomorrow.getFullYear();
|
||||||
|
const month = String(tomorrow.getMonth() + 1).padStart(2, '0');
|
||||||
|
const day = String(tomorrow.getDate()).padStart(2, '0');
|
||||||
|
|
||||||
|
dateInput.setAttribute('min', `${year}-${month}-${day}`);
|
||||||
|
|
||||||
|
// Set max date to 3 months from now
|
||||||
|
const maxDate = new Date(today);
|
||||||
|
maxDate.setMonth(maxDate.getMonth() + 3);
|
||||||
|
const maxYear = maxDate.getFullYear();
|
||||||
|
const maxMonth = String(maxDate.getMonth() + 1).padStart(2, '0');
|
||||||
|
const maxDay = String(maxDate.getDate()).padStart(2, '0');
|
||||||
|
dateInput.setAttribute('max', `${maxYear}-${maxMonth}-${maxDay}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Phone validation (Israeli format)
|
||||||
|
function isValidPhone(phone) {
|
||||||
|
const cleaned = phone.replace(/[\s\-]/g, '');
|
||||||
|
return /^0[2-9]\d{7,8}$/.test(cleaned);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Booking Form
|
||||||
|
const bookingForm = document.getElementById('bookingForm');
|
||||||
|
if (bookingForm) {
|
||||||
|
bookingForm.addEventListener('submit', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
clearAllErrors(this);
|
||||||
|
|
||||||
|
const formData = new FormData(this);
|
||||||
|
const data = Object.fromEntries(formData.entries());
|
||||||
|
let hasError = false;
|
||||||
|
|
||||||
|
// Validate required fields
|
||||||
|
if (!data.name.trim()) {
|
||||||
|
showError('name', 'נא להזין שם');
|
||||||
|
hasError = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!data.phone.trim()) {
|
||||||
|
showError('phone', 'נא להזין טלפון');
|
||||||
|
hasError = true;
|
||||||
|
} else if (!isValidPhone(data.phone)) {
|
||||||
|
showError('phone', 'נא להזין מספר טלפון תקין');
|
||||||
|
hasError = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!data.service) {
|
||||||
|
showError('service', 'נא לבחור שירות');
|
||||||
|
hasError = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!data.date) {
|
||||||
|
showError('date', 'נא לבחור תאריך');
|
||||||
|
hasError = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!data.time) {
|
||||||
|
showError('time', 'נא לבחור שעה');
|
||||||
|
hasError = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (hasError) {
|
||||||
|
showToast('נא לתקן את השגיאות בטופס', 'error');
|
||||||
|
// Focus first error
|
||||||
|
const firstError = this.querySelector('.error');
|
||||||
|
if (firstError) firstError.focus();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Simulate form submission
|
||||||
|
const submitBtn = this.querySelector('button[type="submit"]');
|
||||||
|
const originalText = submitBtn.textContent;
|
||||||
|
submitBtn.textContent = 'שולח...';
|
||||||
|
submitBtn.disabled = true;
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
showToast('הבקשה נשלחה! נחזור אליכם תוך 3 שעות.', 'success');
|
||||||
|
this.reset();
|
||||||
|
submitBtn.textContent = originalText;
|
||||||
|
submitBtn.disabled = false;
|
||||||
|
}, 1200);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Clear errors on input
|
||||||
|
bookingForm.querySelectorAll('input, select, textarea').forEach(input => {
|
||||||
|
input.addEventListener('input', () => {
|
||||||
|
clearError(input.id);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Contact Form
|
||||||
|
const contactForm = document.getElementById('contactForm');
|
||||||
|
if (contactForm) {
|
||||||
|
contactForm.addEventListener('submit', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
clearAllErrors(this);
|
||||||
|
|
||||||
|
const formData = new FormData(this);
|
||||||
|
const data = Object.fromEntries(formData.entries());
|
||||||
|
let hasError = false;
|
||||||
|
|
||||||
|
if (!data.name.trim()) {
|
||||||
|
showError('contactName', 'נא להזין שם');
|
||||||
|
hasError = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||||
|
if (!data.email.trim()) {
|
||||||
|
showError('contactEmail', 'נא להזין אימייל');
|
||||||
|
hasError = true;
|
||||||
|
} else if (!emailRegex.test(data.email)) {
|
||||||
|
showError('contactEmail', 'נא להזין אימייל תקין');
|
||||||
|
hasError = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!data.message.trim()) {
|
||||||
|
showError('contactMessage', 'נא להזין הודעה');
|
||||||
|
hasError = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (hasError) {
|
||||||
|
showToast('נא לתקן את השגיאות בטופס', 'error');
|
||||||
|
const firstError = this.querySelector('.error');
|
||||||
|
if (firstError) firstError.focus();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Simulate form submission
|
||||||
|
const submitBtn = this.querySelector('button[type="submit"]');
|
||||||
|
const originalText = submitBtn.textContent;
|
||||||
|
submitBtn.textContent = 'שולח...';
|
||||||
|
submitBtn.disabled = true;
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
showToast('ההודעה נשלחה! תודה על פנייתכם.', 'success');
|
||||||
|
this.reset();
|
||||||
|
submitBtn.textContent = originalText;
|
||||||
|
submitBtn.disabled = false;
|
||||||
|
}, 1200);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Clear errors on input
|
||||||
|
contactForm.querySelectorAll('input, textarea').forEach(input => {
|
||||||
|
input.addEventListener('input', () => {
|
||||||
|
clearError(input.id);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Header background on scroll
|
||||||
|
const header = document.querySelector('.site-header');
|
||||||
|
let ticking = false;
|
||||||
|
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
if (!ticking) {
|
||||||
|
window.requestAnimationFrame(() => {
|
||||||
|
if (window.pageYOffset > 50) {
|
||||||
|
header.style.background = 'rgba(15, 15, 15, 0.98)';
|
||||||
|
} else {
|
||||||
|
header.style.background = 'rgba(15, 15, 15, 0.92)';
|
||||||
|
}
|
||||||
|
ticking = false;
|
||||||
|
});
|
||||||
|
ticking = true;
|
||||||
|
}
|
||||||
|
}, { passive: true });
|
||||||
|
|
||||||
|
})();
|
||||||
@@ -0,0 +1,925 @@
|
|||||||
|
:root {
|
||||||
|
--bg: #0f0f0f;
|
||||||
|
--surface: #1a1a1a;
|
||||||
|
--surface-alt: #242424;
|
||||||
|
--text: #f5f0e8;
|
||||||
|
--text-muted: #b5b0a8;
|
||||||
|
--gold: #c9a961;
|
||||||
|
--gold-dark: #8b7355;
|
||||||
|
--gold-light: #f4e4ba;
|
||||||
|
--accent: #c9a961;
|
||||||
|
--error: #ef4444;
|
||||||
|
--success: #22c55e;
|
||||||
|
|
||||||
|
--font-body: 'Heebo', sans-serif;
|
||||||
|
|
||||||
|
--space-xs: 0.5rem;
|
||||||
|
--space-sm: 1rem;
|
||||||
|
--space-md: 1.5rem;
|
||||||
|
--space-lg: 2rem;
|
||||||
|
--space-xl: 3rem;
|
||||||
|
--space-2xl: 5rem;
|
||||||
|
|
||||||
|
--radius-sm: 4px;
|
||||||
|
--radius-md: 8px;
|
||||||
|
--radius-lg: 12px;
|
||||||
|
|
||||||
|
--transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
scroll-padding-top: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
html {
|
||||||
|
scroll-behavior: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
animation: none !important;
|
||||||
|
transition: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: var(--text);
|
||||||
|
background-color: var(--bg);
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Skip link */
|
||||||
|
.skip-link {
|
||||||
|
position: absolute;
|
||||||
|
top: -100%;
|
||||||
|
inset-inline-start: var(--space-md);
|
||||||
|
background: var(--gold);
|
||||||
|
color: var(--bg);
|
||||||
|
padding: var(--space-sm) var(--space-md);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
font-weight: 500;
|
||||||
|
z-index: 9999;
|
||||||
|
transition: top var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skip-link:focus {
|
||||||
|
top: var(--space-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1100px;
|
||||||
|
margin-inline: auto;
|
||||||
|
padding-inline: var(--space-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Typography */
|
||||||
|
h1, h2, h3, h4 {
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: clamp(2.5rem, 8vw, 4.5rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: clamp(1.75rem, 4vw, 2.5rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: clamp(1.125rem, 2.5vw, 1.375rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
img, svg {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Focus styles */
|
||||||
|
:focus-visible {
|
||||||
|
outline: 2px solid var(--gold);
|
||||||
|
outline-offset: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Buttons */
|
||||||
|
.btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: var(--space-xs);
|
||||||
|
padding: 0.875rem var(--space-md);
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 500;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: linear-gradient(135deg, var(--gold), var(--gold-dark));
|
||||||
|
color: var(--bg);
|
||||||
|
border-color: var(--gold);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover,
|
||||||
|
.btn-primary:focus-visible {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 6px 20px rgba(201, 169, 97, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background: transparent;
|
||||||
|
color: var(--text);
|
||||||
|
border: 2px solid var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover,
|
||||||
|
.btn-secondary:focus-visible {
|
||||||
|
border-color: var(--gold);
|
||||||
|
color: var(--gold);
|
||||||
|
background: rgba(201, 169, 97, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-full {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
.site-header {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
inset-inline: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
background: rgba(15, 15, 15, 0.92);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
border-bottom: 1px solid rgba(201, 169, 97, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
max-width: 1100px;
|
||||||
|
margin-inline: auto;
|
||||||
|
padding: var(--space-sm) var(--space-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-xs);
|
||||||
|
font-size: 1.125rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--gold);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-icon {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
color: var(--gold);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-toggle {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 5px;
|
||||||
|
padding: var(--space-xs);
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-toggle span {
|
||||||
|
display: block;
|
||||||
|
width: 24px;
|
||||||
|
height: 2px;
|
||||||
|
background: var(--text);
|
||||||
|
transition: transform var(--transition), opacity var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
|
||||||
|
transform: rotate(45deg) translate(5px, 5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
|
||||||
|
transform: rotate(-45deg) translate(5px, -5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-menu {
|
||||||
|
display: none;
|
||||||
|
list-style: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
inset-inline: 0;
|
||||||
|
background: var(--surface);
|
||||||
|
padding: var(--space-md);
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-menu.active {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-menu a {
|
||||||
|
display: block;
|
||||||
|
padding: var(--space-sm);
|
||||||
|
font-weight: 400;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
transition: color var(--transition), background var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-menu a:hover,
|
||||||
|
.nav-menu a:focus-visible {
|
||||||
|
color: var(--gold);
|
||||||
|
background: rgba(201, 169, 97, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.nav-toggle {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-menu {
|
||||||
|
display: flex;
|
||||||
|
position: static;
|
||||||
|
flex-direction: row;
|
||||||
|
background: transparent;
|
||||||
|
padding: 0;
|
||||||
|
gap: var(--space-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-menu a {
|
||||||
|
padding: var(--space-xs) var(--space-sm);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hero */
|
||||||
|
.hero {
|
||||||
|
position: relative;
|
||||||
|
min-height: 100vh;
|
||||||
|
min-height: 100dvh;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 80px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-bg {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-gradient {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background:
|
||||||
|
radial-gradient(ellipse at 30% 20%, rgba(201, 169, 97, 0.12) 0%, transparent 50%),
|
||||||
|
radial-gradient(ellipse at 70% 80%, rgba(139, 115, 85, 0.08) 0%, transparent 50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-pattern {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
padding: var(--space-xl) var(--space-md);
|
||||||
|
max-width: 600px;
|
||||||
|
margin-inline: auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-eyebrow {
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--gold);
|
||||||
|
margin-bottom: var(--space-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title {
|
||||||
|
margin-bottom: var(--space-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-line {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-accent {
|
||||||
|
background: linear-gradient(135deg, var(--gold), var(--gold-light));
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-desc {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
margin-bottom: var(--space-lg);
|
||||||
|
max-width: 480px;
|
||||||
|
margin-inline: auto;
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-actions {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: var(--space-sm);
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-visual {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.hero {
|
||||||
|
grid-template-columns: 1.2fr 0.8fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content {
|
||||||
|
text-align: start;
|
||||||
|
padding-inline-start: var(--space-xl);
|
||||||
|
padding-inline-end: var(--space-md);
|
||||||
|
margin-inline: 0;
|
||||||
|
max-width: 640px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-desc {
|
||||||
|
margin-inline: 0;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-actions {
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-visual {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: var(--space-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-illustration {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 260px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sections */
|
||||||
|
section {
|
||||||
|
padding: var(--space-2xl) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: var(--space-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header--start {
|
||||||
|
text-align: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-number {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--gold);
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
margin-bottom: var(--space-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
margin-bottom: var(--space-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-desc {
|
||||||
|
color: var(--text-muted);
|
||||||
|
max-width: 520px;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header:not(.section-header--start) .section-desc {
|
||||||
|
margin-inline: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Services */
|
||||||
|
.services {
|
||||||
|
background: var(--surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
.services-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: var(--space-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card {
|
||||||
|
background: var(--bg);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
padding: var(--space-lg);
|
||||||
|
transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card:hover,
|
||||||
|
.service-card:focus-within {
|
||||||
|
border-color: rgba(201, 169, 97, 0.3);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card--highlight {
|
||||||
|
background: linear-gradient(135deg, rgba(201, 169, 97, 0.1), rgba(139, 115, 85, 0.05));
|
||||||
|
border-color: rgba(201, 169, 97, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card--accent {
|
||||||
|
border-color: rgba(201, 169, 97, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-icon {
|
||||||
|
width: 52px;
|
||||||
|
height: 52px;
|
||||||
|
margin-bottom: var(--space-md);
|
||||||
|
color: var(--gold);
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card h3 {
|
||||||
|
margin-bottom: var(--space-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card p {
|
||||||
|
color: var(--text-muted);
|
||||||
|
margin-bottom: var(--space-md);
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-price {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--gold);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 600px) {
|
||||||
|
.services-grid {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card--highlight {
|
||||||
|
grid-column: span 2;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto 1fr;
|
||||||
|
grid-template-rows: auto auto auto;
|
||||||
|
gap: 0 var(--space-md);
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card--highlight .service-icon {
|
||||||
|
grid-row: 1 / 4;
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card--highlight h3 {
|
||||||
|
grid-column: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card--highlight p {
|
||||||
|
grid-column: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card--highlight .service-price {
|
||||||
|
grid-column: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 900px) {
|
||||||
|
.services-grid {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card--highlight {
|
||||||
|
grid-column: span 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card--accent {
|
||||||
|
grid-row: span 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Gallery */
|
||||||
|
.gallery-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: var(--space-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-item {
|
||||||
|
position: relative;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-visual {
|
||||||
|
aspect-ratio: 1;
|
||||||
|
background: var(--surface);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: transform var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-visual svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-item:hover .gallery-visual,
|
||||||
|
.gallery-item:focus-within .gallery-visual {
|
||||||
|
transform: scale(1.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-item figcaption {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
inset-inline: 0;
|
||||||
|
padding: var(--space-sm) var(--space-md);
|
||||||
|
background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-item--wide {
|
||||||
|
grid-column: span 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-item--wide .gallery-visual {
|
||||||
|
aspect-ratio: 2/1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.gallery-grid {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: var(--space-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-item--wide {
|
||||||
|
grid-column: span 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Booking */
|
||||||
|
.booking {
|
||||||
|
background: var(--surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
.booking-layout {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: var(--space-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.booking-features {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-md);
|
||||||
|
margin-top: var(--space-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--space-md);
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature svg {
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
color: var(--gold);
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature h4 {
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature p {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-link {
|
||||||
|
color: var(--gold);
|
||||||
|
transition: opacity var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-link:hover {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.booking-form {
|
||||||
|
background: var(--bg);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
padding: var(--space-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: var(--space-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group label {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: var(--space-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.required {
|
||||||
|
color: var(--gold);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input,
|
||||||
|
.form-group select,
|
||||||
|
.form-group textarea {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.875rem var(--space-sm);
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-size: 1rem;
|
||||||
|
color: var(--text);
|
||||||
|
background: var(--surface);
|
||||||
|
border: 2px solid rgba(255, 255, 255, 0.08);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
transition: border-color var(--transition), box-shadow var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input::placeholder,
|
||||||
|
.form-group textarea::placeholder {
|
||||||
|
color: var(--text-muted);
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input:focus,
|
||||||
|
.form-group select:focus,
|
||||||
|
.form-group textarea:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--gold);
|
||||||
|
box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input.error,
|
||||||
|
.form-group select.error,
|
||||||
|
.form-group textarea.error {
|
||||||
|
border-color: var(--error);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group select {
|
||||||
|
cursor: pointer;
|
||||||
|
appearance: none;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b5b0a8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: left 12px center;
|
||||||
|
padding-inline-end: var(--space-sm);
|
||||||
|
padding-inline-start: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group textarea {
|
||||||
|
resize: vertical;
|
||||||
|
min-height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: var(--space-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-message {
|
||||||
|
display: none;
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
color: var(--error);
|
||||||
|
margin-top: var(--space-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-message:not(:empty) {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 900px) {
|
||||||
|
.booking-layout {
|
||||||
|
grid-template-columns: 1fr 1.1fr;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Contact */
|
||||||
|
.contact-layout {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: var(--space-xl);
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-form {
|
||||||
|
background: var(--surface);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
padding: var(--space-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-map {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-embed {
|
||||||
|
background: var(--surface-alt);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-embed iframe {
|
||||||
|
width: 100%;
|
||||||
|
height: 300px;
|
||||||
|
border: 0;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-embed p {
|
||||||
|
padding: var(--space-sm) var(--space-md);
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
text-align: center;
|
||||||
|
background: var(--surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 900px) {
|
||||||
|
.contact-layout {
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-map {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-embed iframe {
|
||||||
|
height: 100%;
|
||||||
|
min-height: 360px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
.site-footer {
|
||||||
|
background: var(--surface);
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
||||||
|
padding: var(--space-xl) 0 var(--space-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-lg);
|
||||||
|
margin-bottom: var(--space-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-brand p {
|
||||||
|
margin-top: var(--space-xs);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-phone {
|
||||||
|
color: var(--gold);
|
||||||
|
transition: opacity var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-phone:hover {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-nav {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: var(--space-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-nav a {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
padding: var(--space-xs);
|
||||||
|
margin: calc(var(--space-xs) * -1);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
transition: color var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-nav a:hover,
|
||||||
|
.footer-nav a:focus-visible {
|
||||||
|
color: var(--gold);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-bottom {
|
||||||
|
padding-top: var(--space-md);
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-bottom p {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.footer-content {
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Toast */
|
||||||
|
.toast {
|
||||||
|
position: fixed;
|
||||||
|
bottom: var(--space-lg);
|
||||||
|
inset-inline-start: var(--space-md);
|
||||||
|
inset-inline-end: var(--space-md);
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--gold);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
padding: var(--space-sm) var(--space-md);
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
transition: opacity var(--transition), visibility var(--transition);
|
||||||
|
z-index: 2000;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 600px) {
|
||||||
|
.toast {
|
||||||
|
inset-inline-start: 50%;
|
||||||
|
inset-inline-end: auto;
|
||||||
|
transform: translateX(50%);
|
||||||
|
max-width: 400px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast.show {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast.success {
|
||||||
|
border-color: var(--success);
|
||||||
|
color: var(--success);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast.error {
|
||||||
|
border-color: var(--error);
|
||||||
|
color: var(--error);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user