Initial AI-generated site
This commit is contained in:
+409
@@ -0,0 +1,409 @@
|
||||
<!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="מספרת אייל בפתח תקווה - עיצוב שיער, צביעה מקצועית, טיפולי כלות ואירועים. חווית יופי אישית ומקצועית.">
|
||||
<meta property="og:title" content="מספרת אייל | עיצוב שיער בפתח תקווה">
|
||||
<meta property="og:description" content="עיצוב שיער, צביעה מקצועית, טיפולי כלות ואירועים. חווית יופי אישית ומקצועית.">
|
||||
<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'/><text x='50' y='65' text-anchor='middle' font-size='40' fill='%23d4a574'>א</text></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&family=Playfair+Display:wght@400;500&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">
|
||||
<a href="#hero" class="logo">
|
||||
<svg class="logo-icon" viewBox="0 0 60 60" aria-hidden="true">
|
||||
<circle cx="30" cy="30" r="28" fill="none" stroke="currentColor" stroke-width="1.5"/>
|
||||
<text x="30" y="38" text-anchor="middle" font-family="Heebo" font-size="22" fill="currentColor">א</text>
|
||||
</svg>
|
||||
<span class="logo-text">מספרת אייל</span>
|
||||
</a>
|
||||
<button class="nav-toggle" aria-label="תפריט" aria-expanded="false">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
<ul class="nav-links">
|
||||
<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-content">
|
||||
<div class="hero-tagline">פתח תקווה · רחוב רוטשילד 45</div>
|
||||
<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="cta-btn">קביעת תור</a>
|
||||
<a href="tel:03-9123456" class="cta-btn-secondary">
|
||||
<svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" fill="currentColor"/>
|
||||
</svg>
|
||||
03-912-3456
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-visual" aria-hidden="true">
|
||||
<svg class="hero-illustration" viewBox="0 0 400 500" preserveAspectRatio="xMidYMid meet">
|
||||
<defs>
|
||||
<linearGradient id="hairGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#4a3728"/>
|
||||
<stop offset="40%" style="stop-color:#6b5344"/>
|
||||
<stop offset="70%" style="stop-color:#d4a574"/>
|
||||
<stop offset="100%" style="stop-color:#e8d4b8"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- Scissors -->
|
||||
<g class="scissors" transform="translate(280, 80)">
|
||||
<ellipse cx="0" cy="-30" rx="18" ry="25" fill="none" stroke="#d4a574" stroke-width="2"/>
|
||||
<ellipse cx="0" cy="30" rx="18" ry="25" fill="none" stroke="#d4a574" stroke-width="2"/>
|
||||
<circle cx="0" cy="0" r="6" fill="#d4a574"/>
|
||||
<line x1="-18" y1="-30" x2="-50" y2="-60" stroke="#d4a574" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="-18" y1="30" x2="-50" y2="60" stroke="#d4a574" stroke-width="2" stroke-linecap="round"/>
|
||||
</g>
|
||||
<!-- Hair strands representing styled hair -->
|
||||
<g class="hair-strands" transform="translate(50, 100)">
|
||||
<path d="M100 0 Q80 80 100 180 Q120 280 90 350" stroke="url(#hairGrad)" stroke-width="12" fill="none" stroke-linecap="round"/>
|
||||
<path d="M140 10 Q160 90 140 190 Q120 290 150 360" stroke="url(#hairGrad)" stroke-width="14" fill="none" stroke-linecap="round"/>
|
||||
<path d="M180 5 Q200 85 180 185 Q160 285 190 355" stroke="url(#hairGrad)" stroke-width="10" fill="none" stroke-linecap="round"/>
|
||||
<path d="M60 20 Q40 100 60 200 Q80 300 50 370" stroke="url(#hairGrad)" stroke-width="8" fill="none" stroke-linecap="round" opacity="0.7"/>
|
||||
<path d="M220 15 Q240 95 220 195 Q200 295 230 365" stroke="url(#hairGrad)" stroke-width="8" fill="none" stroke-linecap="round" opacity="0.7"/>
|
||||
</g>
|
||||
<!-- Decorative circles -->
|
||||
<circle cx="320" cy="400" r="40" fill="none" stroke="#d4a574" stroke-width="1" opacity="0.3"/>
|
||||
<circle cx="80" cy="450" r="25" fill="none" stroke="#d4a574" stroke-width="1" opacity="0.2"/>
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="services" class="services">
|
||||
<div class="container">
|
||||
<header class="section-header">
|
||||
<span class="section-tag">מה אנחנו עושים הכי טוב</span>
|
||||
<h2 class="section-title">השירותים שלנו</h2>
|
||||
</header>
|
||||
<div class="services-grid">
|
||||
<article class="service-card service-card-featured reveal">
|
||||
<div class="service-badge">הכי מבוקש</div>
|
||||
<div class="service-icon">
|
||||
<svg viewBox="0 0 64 64" aria-hidden="true">
|
||||
<path d="M32 8 C20 8 12 18 12 28 C12 42 22 52 32 56 C42 52 52 42 52 28 C52 18 44 8 32 8" fill="none" stroke="currentColor" stroke-width="1.5"/>
|
||||
<path d="M24 28 Q28 36 32 28 Q36 20 40 28" fill="none" stroke="currentColor" stroke-width="1.5"/>
|
||||
<circle cx="32" cy="24" r="2" fill="currentColor"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="service-title">עיצוב שיער</h3>
|
||||
<p class="service-desc">תספורות מקצועיות לנשים וגברים. התאמה אישית לצורת הפנים ולסגנון החיים שלך — מקלאסי ועד נועז.</p>
|
||||
<span class="service-price">החל מ-₪80</span>
|
||||
</article>
|
||||
<article class="service-card reveal">
|
||||
<div class="service-icon">
|
||||
<svg viewBox="0 0 64 64" aria-hidden="true">
|
||||
<circle cx="20" cy="32" r="8" fill="none" stroke="currentColor" stroke-width="1.5"/>
|
||||
<circle cx="44" cy="32" r="8" fill="none" stroke="currentColor" stroke-width="1.5"/>
|
||||
<path d="M28 32 L36 32" stroke="currentColor" stroke-width="1.5"/>
|
||||
<path d="M20 20 L20 12 M44 20 L44 12 M20 44 L20 52 M44 44 L44 52" stroke="currentColor" stroke-width="1.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="service-title">צביעת שיער</h3>
|
||||
<p class="service-desc">צביעה מלאה, אומברה, בלייאז׳ והבהרות. חומרים איכותיים לבריאות השיער וברק מושלם.</p>
|
||||
<span class="service-price">החל מ-₪250</span>
|
||||
</article>
|
||||
<article class="service-card service-card-featured reveal">
|
||||
<div class="service-badge">חבילה מלאה</div>
|
||||
<div class="service-icon">
|
||||
<svg viewBox="0 0 64 64" aria-hidden="true">
|
||||
<path d="M32 12 L36 24 L48 24 L38 32 L42 44 L32 36 L22 44 L26 32 L16 24 L28 24 Z" fill="none" stroke="currentColor" stroke-width="1.5"/>
|
||||
<circle cx="32" cy="52" r="4" fill="none" stroke="currentColor" stroke-width="1.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="service-title">טיפולי כלות</h3>
|
||||
<p class="service-desc">חבילת כלה מלאה: ניסיון מקדים, עיצוב ביום החתונה ותיאום עם המאפרת. היום המושלם מתחיל כאן.</p>
|
||||
<span class="service-price">החל מ-₪800</span>
|
||||
</article>
|
||||
<article class="service-card reveal">
|
||||
<div class="service-icon">
|
||||
<svg viewBox="0 0 64 64" aria-hidden="true">
|
||||
<rect x="16" y="20" width="32" height="28" rx="4" fill="none" stroke="currentColor" stroke-width="1.5"/>
|
||||
<path d="M16 28 L48 28" stroke="currentColor" stroke-width="1.5"/>
|
||||
<path d="M24 16 L24 20 M40 16 L40 20" stroke="currentColor" stroke-width="1.5"/>
|
||||
<circle cx="28" cy="36" r="2" fill="currentColor"/>
|
||||
<circle cx="36" cy="36" r="2" fill="currentColor"/>
|
||||
<circle cx="32" cy="42" r="2" fill="currentColor"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="service-title">אירועים מיוחדים</h3>
|
||||
<p class="service-desc">בת מצווה, ערב גאלה, צילומי אופנה. תסרוקות מרהיבות לכל אירוע.</p>
|
||||
<span class="service-price">החל מ-₪200</span>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="experience-section">
|
||||
<div class="container">
|
||||
<div class="experience-content reveal">
|
||||
<div class="experience-number" aria-hidden="true">10+</div>
|
||||
<div class="experience-text">
|
||||
<span class="experience-label">שנות ניסיון</span>
|
||||
<p>מספרת אייל משרתת את תושבי פתח תקווה והסביבה כבר למעלה מעשור. אנחנו לא רק מספרה — אנחנו חלק מהשכונה.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="gallery" class="gallery">
|
||||
<div class="container">
|
||||
<header class="section-header">
|
||||
<span class="section-tag">מהעבודות האחרונות</span>
|
||||
<h2 class="section-title">גלריה</h2>
|
||||
</header>
|
||||
<div class="gallery-grid">
|
||||
<figure class="gallery-item reveal" tabindex="0" style="--delay: 0">
|
||||
<div class="gallery-visual">
|
||||
<svg viewBox="0 0 300 360" aria-hidden="true">
|
||||
<defs>
|
||||
<linearGradient id="g1" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#2c2c2c"/>
|
||||
<stop offset="100%" style="stop-color:#1a1a1a"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="300" height="360" fill="url(#g1)"/>
|
||||
<ellipse cx="150" cy="140" rx="65" ry="80" fill="#d4a574" opacity="0.15"/>
|
||||
<path d="M100 120 Q150 60 200 120 Q215 180 200 240 Q150 280 100 240 Q85 180 100 120" fill="none" stroke="#d4a574" stroke-width="1.5"/>
|
||||
<path d="M90 100 Q150 40 210 100" fill="none" stroke="#d4a574" stroke-width="1" opacity="0.6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<figcaption>תספורת קצרה מודרנית</figcaption>
|
||||
</figure>
|
||||
<figure class="gallery-item gallery-item-tall reveal" tabindex="0" style="--delay: 1">
|
||||
<div class="gallery-visual">
|
||||
<svg viewBox="0 0 300 460" aria-hidden="true">
|
||||
<defs>
|
||||
<linearGradient id="g2" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#5c4033"/>
|
||||
<stop offset="50%" style="stop-color:#d4a574"/>
|
||||
<stop offset="100%" style="stop-color:#e8c9a0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="300" height="460" fill="#1a1a1a"/>
|
||||
<path d="M80 30 Q150 80 150 220 Q150 360 100 440" stroke="url(#g2)" stroke-width="35" fill="none" stroke-linecap="round"/>
|
||||
<path d="M120 40 Q180 100 180 250 Q180 390 140 450" stroke="url(#g2)" stroke-width="25" fill="none" stroke-linecap="round" opacity="0.8"/>
|
||||
<path d="M160 50 Q210 120 200 270 Q190 400 170 445" stroke="url(#g2)" stroke-width="18" fill="none" stroke-linecap="round" opacity="0.6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<figcaption>אומברה זהובה</figcaption>
|
||||
</figure>
|
||||
<figure class="gallery-item reveal" tabindex="0" style="--delay: 2">
|
||||
<div class="gallery-visual">
|
||||
<svg viewBox="0 0 300 360" aria-hidden="true">
|
||||
<rect width="300" height="360" fill="#1a1a1a"/>
|
||||
<circle cx="150" cy="130" r="70" fill="none" stroke="#d4a574" stroke-width="1" opacity="0.2"/>
|
||||
<path d="M100 110 Q110 70 150 60 Q190 70 200 110 Q210 150 200 190 Q180 230 150 240 Q120 230 100 190 Q90 150 100 110" fill="none" stroke="#d4a574" stroke-width="1.5"/>
|
||||
<!-- Crown/tiara -->
|
||||
<path d="M115 65 L125 45 L140 60 L150 35 L160 60 L175 45 L185 65" fill="none" stroke="#d4a574" stroke-width="1.5"/>
|
||||
<circle cx="125" cy="55" r="3" fill="#d4a574" opacity="0.6"/>
|
||||
<circle cx="150" cy="40" r="4" fill="#d4a574" opacity="0.8"/>
|
||||
<circle cx="175" cy="55" r="3" fill="#d4a574" opacity="0.6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<figcaption>תסרוקת כלה</figcaption>
|
||||
</figure>
|
||||
<figure class="gallery-item reveal" tabindex="0" style="--delay: 3">
|
||||
<div class="gallery-visual">
|
||||
<svg viewBox="0 0 300 360" aria-hidden="true">
|
||||
<defs>
|
||||
<linearGradient id="g3" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#4a3728"/>
|
||||
<stop offset="40%" style="stop-color:#6b5344"/>
|
||||
<stop offset="70%" style="stop-color:#d4a574"/>
|
||||
<stop offset="100%" style="stop-color:#e8d4b8"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="300" height="360" fill="#1a1a1a"/>
|
||||
<g transform="translate(50, 30)">
|
||||
<path d="M100 0 Q115 90 100 180 Q85 260 100 300" stroke="url(#g3)" stroke-width="9" fill="none" stroke-linecap="round"/>
|
||||
<path d="M75 15 Q60 105 75 195 Q90 275 75 315" stroke="url(#g3)" stroke-width="7" fill="none" stroke-linecap="round" opacity="0.85"/>
|
||||
<path d="M125 10 Q140 100 125 190 Q110 270 125 310" stroke="url(#g3)" stroke-width="7" fill="none" stroke-linecap="round" opacity="0.85"/>
|
||||
<path d="M50 30 Q35 120 50 210 Q65 290 50 320" stroke="url(#g3)" stroke-width="5" fill="none" stroke-linecap="round" opacity="0.6"/>
|
||||
<path d="M150 25 Q165 115 150 205 Q135 285 150 315" stroke="url(#g3)" stroke-width="5" fill="none" stroke-linecap="round" opacity="0.6"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<figcaption>בלייאז׳ טבעי</figcaption>
|
||||
</figure>
|
||||
<figure class="gallery-item reveal" tabindex="0" style="--delay: 4">
|
||||
<div class="gallery-visual">
|
||||
<svg viewBox="0 0 300 360" aria-hidden="true">
|
||||
<rect width="300" height="360" fill="#1a1a1a"/>
|
||||
<g transform="translate(150, 160)">
|
||||
<ellipse cx="0" cy="0" rx="55" ry="70" fill="none" stroke="#d4a574" stroke-width="1" opacity="0.2"/>
|
||||
<path d="M-40 -50 Q0 -85 40 -50" fill="none" stroke="#d4a574" stroke-width="2"/>
|
||||
<path d="M-50 -30 Q-55 -70 -25 -80 Q10 -90 40 -70 Q55 -50 45 -30" fill="none" stroke="#d4a574" stroke-width="1.5"/>
|
||||
<!-- Updo details -->
|
||||
<ellipse cx="0" cy="-70" rx="30" ry="20" fill="none" stroke="#d4a574" stroke-width="1"/>
|
||||
<circle cx="-15" cy="-75" r="3" fill="#d4a574" opacity="0.5"/>
|
||||
<circle cx="5" cy="-80" r="3" fill="#d4a574" opacity="0.5"/>
|
||||
<circle cx="20" cy="-72" r="3" fill="#d4a574" opacity="0.5"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<figcaption>עיצוב לאירוע</figcaption>
|
||||
</figure>
|
||||
<figure class="gallery-item reveal" tabindex="0" style="--delay: 5">
|
||||
<div class="gallery-visual">
|
||||
<svg viewBox="0 0 300 360" aria-hidden="true">
|
||||
<defs>
|
||||
<radialGradient id="g4" cx="50%" cy="35%" r="65%">
|
||||
<stop offset="0%" style="stop-color:#cd7f32"/>
|
||||
<stop offset="50%" style="stop-color:#b87333"/>
|
||||
<stop offset="100%" style="stop-color:#8b4513"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect width="300" height="360" fill="#1a1a1a"/>
|
||||
<circle cx="150" cy="140" r="90" fill="url(#g4)" opacity="0.25"/>
|
||||
<circle cx="150" cy="140" r="65" fill="none" stroke="#cd7f32" stroke-width="1.5"/>
|
||||
<circle cx="150" cy="140" r="45" fill="none" stroke="#cd7f32" stroke-width="0.75" opacity="0.5"/>
|
||||
<path d="M100 200 Q150 260 200 200" fill="none" stroke="#cd7f32" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<figcaption>גוונים נחושתיים</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="booking" class="booking">
|
||||
<div class="container">
|
||||
<div class="booking-wrapper">
|
||||
<header class="section-header">
|
||||
<span class="section-tag">בואו נקבע</span>
|
||||
<h2 class="section-title">תיאום תור</h2>
|
||||
<p class="section-desc">השאירו פרטים ונחזור אליכם תוך שעות ספורות</p>
|
||||
</header>
|
||||
<form class="booking-form reveal" novalidate>
|
||||
<div class="form-group">
|
||||
<label for="name">שם מלא</label>
|
||||
<input type="text" id="name" name="name" required autocomplete="name">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="phone">טלפון</label>
|
||||
<input type="tel" id="phone" name="phone" required autocomplete="tel" dir="ltr" pattern="[0-9\-\+\s]{9,15}" placeholder="050-000-0000">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="service">סוג השירות</label>
|
||||
<select id="service" name="service" required>
|
||||
<option value="">בחרו שירות</option>
|
||||
<option value="haircut">תספורת</option>
|
||||
<option value="color">צביעה</option>
|
||||
<option value="bride">חבילת כלה</option>
|
||||
<option value="event">אירוע מיוחד</option>
|
||||
<option value="other">אחר</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="date">תאריך מועדף</label>
|
||||
<input type="date" id="date" name="date">
|
||||
</div>
|
||||
<div class="form-group form-group-full">
|
||||
<label for="message">הערות נוספות</label>
|
||||
<textarea id="message" name="message" rows="3" placeholder="ספרו לנו על מה שאתם מחפשים..."></textarea>
|
||||
</div>
|
||||
<button type="submit" class="submit-btn">שליחת בקשה</button>
|
||||
</form>
|
||||
<p class="booking-alt">או התקשרו ישירות: <a href="tel:03-9123456" class="booking-phone">03-912-3456</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact" class="contact">
|
||||
<div class="container">
|
||||
<div class="contact-grid">
|
||||
<div class="contact-info reveal">
|
||||
<header class="section-header">
|
||||
<span class="section-tag">איפה למצוא אותנו</span>
|
||||
<h2 class="section-title">צרו קשר</h2>
|
||||
</header>
|
||||
<div class="contact-details">
|
||||
<a href="https://maps.google.com/?q=רחוב+רוטשילד+45+פתח+תקווה" target="_blank" rel="noopener" class="contact-item contact-item-link">
|
||||
<svg class="contact-icon" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" fill="currentColor"/>
|
||||
</svg>
|
||||
<div>
|
||||
<strong>כתובת</strong>
|
||||
<p>רחוב רוטשילד 45, פתח תקווה</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="tel:03-9123456" class="contact-item contact-item-link">
|
||||
<svg class="contact-icon" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" fill="currentColor"/>
|
||||
</svg>
|
||||
<div>
|
||||
<strong>טלפון</strong>
|
||||
<p>03-912-3456</p>
|
||||
</div>
|
||||
</a>
|
||||
<div class="contact-item">
|
||||
<svg class="contact-icon" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z" fill="currentColor"/>
|
||||
</svg>
|
||||
<div>
|
||||
<strong>שעות פעילות</strong>
|
||||
<p>א׳-ה׳: 9:00–20:00</p>
|
||||
<p>ו׳: 8:00–14:00</p>
|
||||
<p>שבת: סגור</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-cta reveal">
|
||||
<div class="contact-cta-content">
|
||||
<p class="contact-cta-text">מעדיפים וואטסאפ?</p>
|
||||
<a href="https://wa.me/97239123456?text=היי%2C%20אשמח%20לתאם%20תור" target="_blank" rel="noopener" class="whatsapp-btn">
|
||||
<svg class="whatsapp-icon" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" fill="currentColor"/>
|
||||
</svg>
|
||||
שלחו הודעה
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-brand">
|
||||
<svg class="footer-logo" viewBox="0 0 60 60" aria-hidden="true">
|
||||
<circle cx="30" cy="30" r="28" fill="none" stroke="currentColor" stroke-width="1"/>
|
||||
<text x="30" y="38" text-anchor="middle" font-family="Heebo" font-size="22" fill="currentColor">א</text>
|
||||
</svg>
|
||||
<span>מספרת אייל</span>
|
||||
</div>
|
||||
<p class="footer-address">רחוב רוטשילד 45, פתח תקווה · 03-912-3456</p>
|
||||
<p class="footer-copy">© <span id="current-year">2024</span> מספרת אייל. כל הזכויות שמורות.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,188 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
// Set current year in footer
|
||||
const yearEl = document.getElementById('current-year');
|
||||
if (yearEl) {
|
||||
yearEl.textContent = new Date().getFullYear();
|
||||
}
|
||||
|
||||
// Set minimum date for booking (today)
|
||||
const dateInput = document.getElementById('date');
|
||||
if (dateInput) {
|
||||
const today = new Date().toISOString().split('T')[0];
|
||||
dateInput.setAttribute('min', today);
|
||||
}
|
||||
|
||||
// Header scroll effect
|
||||
const header = document.querySelector('.site-header');
|
||||
|
||||
function handleScroll() {
|
||||
if (window.scrollY > 50) {
|
||||
header.classList.add('scrolled');
|
||||
} else {
|
||||
header.classList.remove('scrolled');
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', handleScroll, { passive: true });
|
||||
|
||||
// Mobile nav toggle
|
||||
const navToggle = document.querySelector('.nav-toggle');
|
||||
const navLinks = document.querySelector('.nav-links');
|
||||
|
||||
if (navToggle && navLinks) {
|
||||
navToggle.addEventListener('click', function() {
|
||||
const isExpanded = this.getAttribute('aria-expanded') === 'true';
|
||||
this.setAttribute('aria-expanded', !isExpanded);
|
||||
navLinks.classList.toggle('active');
|
||||
document.body.style.overflow = isExpanded ? '' : 'hidden';
|
||||
});
|
||||
|
||||
// Close menu when clicking a link
|
||||
navLinks.querySelectorAll('a').forEach(function(link) {
|
||||
link.addEventListener('click', function() {
|
||||
navToggle.setAttribute('aria-expanded', 'false');
|
||||
navLinks.classList.remove('active');
|
||||
document.body.style.overflow = '';
|
||||
});
|
||||
});
|
||||
|
||||
// Close menu on escape key
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape' && navLinks.classList.contains('active')) {
|
||||
navToggle.setAttribute('aria-expanded', 'false');
|
||||
navLinks.classList.remove('active');
|
||||
document.body.style.overflow = '';
|
||||
navToggle.focus();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Reveal on scroll
|
||||
const revealElements = document.querySelectorAll('.reveal');
|
||||
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
|
||||
|
||||
if (prefersReducedMotion.matches) {
|
||||
revealElements.forEach(function(el) {
|
||||
el.classList.add('visible');
|
||||
});
|
||||
} else if ('IntersectionObserver' in window) {
|
||||
const revealObserver = new IntersectionObserver(function(entries) {
|
||||
entries.forEach(function(entry) {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
revealObserver.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -40px 0px'
|
||||
});
|
||||
|
||||
revealElements.forEach(function(el) {
|
||||
revealObserver.observe(el);
|
||||
});
|
||||
} else {
|
||||
revealElements.forEach(function(el) {
|
||||
el.classList.add('visible');
|
||||
});
|
||||
}
|
||||
|
||||
// Smooth scroll for anchor links
|
||||
document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
|
||||
anchor.addEventListener('click', function(e) {
|
||||
const targetId = this.getAttribute('href');
|
||||
if (targetId === '#') return;
|
||||
|
||||
const target = document.querySelector(targetId);
|
||||
if (target) {
|
||||
e.preventDefault();
|
||||
const headerHeight = header.offsetHeight;
|
||||
const targetPosition = target.getBoundingClientRect().top + window.scrollY - headerHeight - 20;
|
||||
|
||||
window.scrollTo({
|
||||
top: targetPosition,
|
||||
behavior: prefersReducedMotion.matches ? 'auto' : 'smooth'
|
||||
});
|
||||
|
||||
// Set focus for accessibility
|
||||
target.setAttribute('tabindex', '-1');
|
||||
target.focus({ preventScroll: true });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Gallery keyboard interaction
|
||||
document.querySelectorAll('.gallery-item').forEach(function(item) {
|
||||
item.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
// Could open a lightbox here; for now just visual feedback
|
||||
this.style.transform = 'scale(0.98)';
|
||||
setTimeout(() => {
|
||||
this.style.transform = '';
|
||||
}, 150);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Form handling
|
||||
const form = document.querySelector('.booking-form');
|
||||
|
||||
if (form) {
|
||||
form.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Simple validation
|
||||
let isValid = true;
|
||||
const requiredFields = form.querySelectorAll('[required]');
|
||||
|
||||
requiredFields.forEach(function(field) {
|
||||
if (!field.value.trim()) {
|
||||
isValid = false;
|
||||
field.style.borderColor = '#e74c3c';
|
||||
field.setAttribute('aria-invalid', 'true');
|
||||
} else {
|
||||
field.style.borderColor = '';
|
||||
field.removeAttribute('aria-invalid');
|
||||
}
|
||||
});
|
||||
|
||||
// Phone validation
|
||||
const phoneField = form.querySelector('#phone');
|
||||
if (phoneField && phoneField.value) {
|
||||
const phonePattern = /^[0-9\-\+\s]{9,15}$/;
|
||||
if (!phonePattern.test(phoneField.value.trim())) {
|
||||
isValid = false;
|
||||
phoneField.style.borderColor = '#e74c3c';
|
||||
phoneField.setAttribute('aria-invalid', 'true');
|
||||
}
|
||||
}
|
||||
|
||||
if (isValid) {
|
||||
const btn = form.querySelector('.submit-btn');
|
||||
const originalText = btn.textContent;
|
||||
btn.textContent = 'הבקשה נשלחה בהצלחה!';
|
||||
btn.style.background = '#27ae60';
|
||||
btn.disabled = true;
|
||||
|
||||
setTimeout(function() {
|
||||
btn.textContent = originalText;
|
||||
btn.style.background = '';
|
||||
btn.disabled = false;
|
||||
form.reset();
|
||||
}, 3000);
|
||||
}
|
||||
});
|
||||
|
||||
// Clear error state on input
|
||||
form.querySelectorAll('input, select, textarea').forEach(function(field) {
|
||||
field.addEventListener('input', function() {
|
||||
this.style.borderColor = '';
|
||||
this.removeAttribute('aria-invalid');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
})();
|
||||
@@ -0,0 +1,986 @@
|
||||
:root {
|
||||
--color-bg: #0f0f0f;
|
||||
--color-surface: #171717;
|
||||
--color-surface-elevated: #1f1f1f;
|
||||
--color-text: #f5f5f5;
|
||||
--color-text-muted: #a8a8a8;
|
||||
--color-accent: #d4a574;
|
||||
--color-accent-dark: #b8956a;
|
||||
--color-accent-light: #e8d4b8;
|
||||
--font-body: 'Heebo', sans-serif;
|
||||
--font-display: 'Playfair Display', serif;
|
||||
--space-xs: 0.5rem;
|
||||
--space-sm: 1rem;
|
||||
--space-md: 1.5rem;
|
||||
--space-lg: 2rem;
|
||||
--space-xl: 3rem;
|
||||
--space-2xl: 5rem;
|
||||
--transition-fast: 0.2s ease;
|
||||
--transition-medium: 0.35s ease;
|
||||
--transition-slow: 0.5s ease;
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 8px;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
font-weight: 400;
|
||||
line-height: 1.6;
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-bg);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 1100px;
|
||||
margin-inline: auto;
|
||||
padding-inline: var(--space-md);
|
||||
}
|
||||
|
||||
/* Typography - Hebrew capped at 600 */
|
||||
h1, h2, h3, h4 {
|
||||
font-family: var(--font-body);
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
/* Skip Link */
|
||||
.skip-link {
|
||||
position: absolute;
|
||||
top: -100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: var(--color-accent);
|
||||
color: var(--color-bg);
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border-radius: var(--radius-sm);
|
||||
z-index: 200;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: top var(--transition-fast);
|
||||
}
|
||||
|
||||
.skip-link:focus {
|
||||
top: var(--space-sm);
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
inset-inline: 0;
|
||||
z-index: 100;
|
||||
background: linear-gradient(to bottom, rgba(15, 15, 15, 0.95), rgba(15, 15, 15, 0));
|
||||
padding: var(--space-sm) 0;
|
||||
transition: background var(--transition-medium), padding var(--transition-medium);
|
||||
}
|
||||
|
||||
.site-header.scrolled {
|
||||
background: rgba(15, 15, 15, 0.98);
|
||||
backdrop-filter: blur(12px);
|
||||
padding: var(--space-xs) 0;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
max-width: 1100px;
|
||||
margin-inline: auto;
|
||||
padding-inline: var(--space-md);
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
text-decoration: none;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.nav-toggle {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: var(--space-xs);
|
||||
}
|
||||
|
||||
.nav-toggle span {
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 2px;
|
||||
background: var(--color-text);
|
||||
transition: var(--transition-fast);
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: var(--space-lg);
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
color: var(--color-text-muted);
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 400;
|
||||
transition: color var(--transition-fast);
|
||||
position: relative;
|
||||
padding-block: var(--space-xs);
|
||||
}
|
||||
|
||||
.nav-links a::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: var(--color-accent);
|
||||
transition: width var(--transition-fast);
|
||||
}
|
||||
|
||||
.nav-links a:hover {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.nav-links a:focus {
|
||||
color: var(--color-accent);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.nav-links a:hover::after,
|
||||
.nav-links a:focus::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.nav-toggle {
|
||||
display: flex;
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
.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-links {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
inset-inline-end: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
background: var(--color-bg);
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-xl);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity var(--transition-medium), visibility var(--transition-medium);
|
||||
}
|
||||
|
||||
.nav-links.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hero */
|
||||
.hero {
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
align-items: center;
|
||||
gap: var(--space-xl);
|
||||
padding: calc(var(--space-2xl) + 60px) var(--space-md) var(--space-2xl);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
max-width: 540px;
|
||||
margin-inline-start: auto;
|
||||
padding-inline-end: var(--space-lg);
|
||||
}
|
||||
|
||||
.hero-tagline {
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-accent);
|
||||
margin-bottom: var(--space-md);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: clamp(2.25rem, 6vw, 3.5rem);
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--space-md);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.title-line {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.title-accent {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.hero-desc {
|
||||
font-size: 1.05rem;
|
||||
color: var(--color-text-muted);
|
||||
max-width: 400px;
|
||||
margin-bottom: var(--space-lg);
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-sm);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cta-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--space-sm) var(--space-lg);
|
||||
background: var(--color-accent);
|
||||
color: var(--color-bg);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
font-size: 0.95rem;
|
||||
border-radius: var(--radius-sm);
|
||||
transition: background var(--transition-fast), transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.cta-btn:hover {
|
||||
background: var(--color-accent-light);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.cta-btn:focus {
|
||||
background: var(--color-accent-dark);
|
||||
outline: 2px solid var(--color-accent-light);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.cta-btn-secondary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
font-size: 0.95rem;
|
||||
border: 1px solid #444;
|
||||
border-radius: var(--radius-sm);
|
||||
transition: border-color var(--transition-fast), color var(--transition-fast);
|
||||
}
|
||||
|
||||
.cta-btn-secondary:hover {
|
||||
border-color: var(--color-accent);
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.cta-btn-secondary:focus {
|
||||
outline: 2px solid var(--color-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.hero-visual {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-inline-start: var(--space-lg);
|
||||
}
|
||||
|
||||
.hero-illustration {
|
||||
width: 100%;
|
||||
max-width: 360px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.hero {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
padding-top: 100px;
|
||||
min-height: auto;
|
||||
padding-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
max-width: 100%;
|
||||
padding-inline: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.hero-desc {
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hero-visual {
|
||||
order: -1;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.hero-illustration {
|
||||
max-width: 260px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Section Common */
|
||||
.section-header {
|
||||
text-align: center;
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
.section-tag {
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-accent);
|
||||
margin-bottom: var(--space-xs);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: clamp(1.75rem, 4vw, 2.5rem);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
color: var(--color-text-muted);
|
||||
margin-top: var(--space-sm);
|
||||
max-width: 480px;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
/* Services */
|
||||
.services {
|
||||
padding: var(--space-2xl) 0;
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.services-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.service-card {
|
||||
position: relative;
|
||||
background: var(--color-bg);
|
||||
padding: var(--space-lg);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid transparent;
|
||||
transition: border-color var(--transition-fast), transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.service-card:hover {
|
||||
border-color: rgba(212, 165, 116, 0.3);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.service-card-featured {
|
||||
background: linear-gradient(135deg, var(--color-surface-elevated) 0%, var(--color-bg) 100%);
|
||||
border-color: rgba(212, 165, 116, 0.25);
|
||||
}
|
||||
|
||||
.service-card-featured::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background: var(--color-accent);
|
||||
border-radius: var(--radius-md) 0 0 var(--radius-md);
|
||||
}
|
||||
|
||||
.service-badge {
|
||||
position: absolute;
|
||||
top: var(--space-sm);
|
||||
inset-inline-end: var(--space-sm);
|
||||
background: var(--color-accent);
|
||||
color: var(--color-bg);
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
padding: 0.25em 0.6em;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.service-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
color: var(--color-accent);
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
|
||||
.service-icon svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.service-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
.service-desc {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.65;
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
|
||||
.service-price {
|
||||
display: inline-block;
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-accent);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.services-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Experience Section */
|
||||
.experience-section {
|
||||
padding: var(--space-xl) 0;
|
||||
background: var(--color-bg);
|
||||
}
|
||||
|
||||
.experience-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-lg);
|
||||
max-width: 600px;
|
||||
margin-inline: auto;
|
||||
padding: var(--space-lg);
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-md);
|
||||
border-inline-start: 4px solid var(--color-accent);
|
||||
}
|
||||
|
||||
.experience-number {
|
||||
font-size: clamp(2.5rem, 8vw, 3.5rem);
|
||||
font-weight: 300;
|
||||
color: var(--color-accent);
|
||||
line-height: 1;
|
||||
font-family: var(--font-display);
|
||||
}
|
||||
|
||||
.experience-label {
|
||||
display: block;
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-accent);
|
||||
margin-bottom: var(--space-xs);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.experience-text p {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.experience-content {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
border-inline-start: none;
|
||||
border-top: 4px solid var(--color-accent);
|
||||
}
|
||||
}
|
||||
|
||||
/* Gallery */
|
||||
.gallery {
|
||||
padding: var(--space-2xl) 0;
|
||||
}
|
||||
|
||||
.gallery-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-auto-rows: minmax(180px, auto);
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-surface);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.gallery-item:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.gallery-item:focus-visible {
|
||||
outline: 2px solid var(--color-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.gallery-item-tall {
|
||||
grid-row: span 2;
|
||||
}
|
||||
|
||||
.gallery-visual {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.gallery-visual svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
transition: transform var(--transition-medium);
|
||||
}
|
||||
|
||||
.gallery-item:hover .gallery-visual svg,
|
||||
.gallery-item:focus .gallery-visual svg {
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
.gallery-item figcaption {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
inset-inline: 0;
|
||||
padding: var(--space-sm);
|
||||
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
|
||||
color: var(--color-text);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 400;
|
||||
transform: translateY(100%);
|
||||
transition: transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.gallery-item:hover figcaption,
|
||||
.gallery-item:focus figcaption {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.gallery-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.gallery-item-tall {
|
||||
grid-row: span 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.gallery-grid {
|
||||
grid-template-columns: 1fr;
|
||||
grid-auto-rows: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Booking */
|
||||
.booking {
|
||||
padding: var(--space-2xl) 0;
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.booking-wrapper {
|
||||
max-width: 560px;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.booking-form {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.form-group-full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-text-muted);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select,
|
||||
.form-group textarea {
|
||||
background: var(--color-bg);
|
||||
border: 1px solid #333;
|
||||
color: var(--color-text);
|
||||
padding: var(--space-sm);
|
||||
font-family: var(--font-body);
|
||||
font-size: 0.95rem;
|
||||
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.form-group input::placeholder,
|
||||
.form-group textarea::placeholder {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.form-group input:hover,
|
||||
.form-group select:hover,
|
||||
.form-group textarea:hover {
|
||||
border-color: #555;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group select:focus,
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-accent);
|
||||
box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.15);
|
||||
}
|
||||
|
||||
.form-group select {
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a8a8a8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: left var(--space-sm) center;
|
||||
padding-inline-start: calc(var(--space-sm) + 20px);
|
||||
}
|
||||
|
||||
.form-group textarea {
|
||||
resize: vertical;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
grid-column: 1 / -1;
|
||||
background: var(--color-accent);
|
||||
color: var(--color-bg);
|
||||
border: none;
|
||||
padding: var(--space-sm) var(--space-lg);
|
||||
font-family: var(--font-body);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background var(--transition-fast), transform var(--transition-fast);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.submit-btn:hover {
|
||||
background: var(--color-accent-light);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.submit-btn:focus {
|
||||
background: var(--color-accent-dark);
|
||||
outline: 2px solid var(--color-accent-light);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.submit-btn:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.booking-alt {
|
||||
text-align: center;
|
||||
margin-top: var(--space-lg);
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.booking-phone {
|
||||
color: var(--color-accent);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.booking-phone:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.booking-phone:focus {
|
||||
outline: 2px solid var(--color-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.booking-form {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Contact */
|
||||
.contact {
|
||||
padding: var(--space-2xl) 0;
|
||||
}
|
||||
|
||||
.contact-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-xl);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.contact-info .section-header {
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.contact-details {
|
||||
margin-top: var(--space-lg);
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
display: flex;
|
||||
gap: var(--space-md);
|
||||
margin-bottom: var(--space-md);
|
||||
padding: var(--space-sm);
|
||||
border-radius: var(--radius-sm);
|
||||
transition: background var(--transition-fast);
|
||||
}
|
||||
|
||||
.contact-item-link {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.contact-item-link:hover {
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.contact-item-link:focus {
|
||||
outline: 2px solid var(--color-accent);
|
||||
outline-offset: 2px;
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.contact-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
color: var(--color-accent);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.contact-item strong {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.contact-item p {
|
||||
color: var(--color-text-muted);
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.contact-cta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.contact-cta-content {
|
||||
text-align: center;
|
||||
padding: var(--space-xl);
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-md);
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.contact-cta-text {
|
||||
font-size: 1rem;
|
||||
margin-bottom: var(--space-md);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.whatsapp-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
padding: var(--space-sm) var(--space-lg);
|
||||
background: #25D366;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
font-size: 0.95rem;
|
||||
border-radius: var(--radius-sm);
|
||||
transition: background var(--transition-fast), transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.whatsapp-btn:hover {
|
||||
background: #1fb855;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.whatsapp-btn:focus {
|
||||
outline: 2px solid #25D366;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.whatsapp-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.contact-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-lg);
|
||||
}
|
||||
|
||||
.contact-info .section-header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.contact-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.site-footer {
|
||||
background: var(--color-surface);
|
||||
padding: var(--space-lg) 0;
|
||||
border-top: 1px solid #222;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
color: var(--color-accent);
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.footer-address {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.footer-copy {
|
||||
color: #666;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
/* Reveal Animation */
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity var(--transition-slow), transform var(--transition-slow);
|
||||
transition-delay: calc(var(--delay, 0) * 0.08s);
|
||||
}
|
||||
|
||||
.reveal.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Focus Visible - global fallback */
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--color-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
Reference in New Issue
Block a user