diff --git a/index.html b/index.html new file mode 100644 index 0000000..6d3c0bc --- /dev/null +++ b/index.html @@ -0,0 +1,489 @@ + + + + + + תוספות שיער ליאור | סטודיו מקצועי בבת ים + + + + + + + + + + + + + +
+
+
+
+

סטודיו לתוספות שיער בבת ים

+

השיער שתמיד
חלמת עליו

+

תוספות שיער טבעי באיכות פרימיום, התאמה אישית מדויקת, ותוצאות שמדברות בעד עצמן. כבר 8 שנים שאנחנו הופכות חלומות למציאות.

+
+ קביעת תור + + + 052-765-4321 + +
+
+
+
+
+ + תמונה של ליאור +
+
+
+
+
+
+
+ +
+
+ 01 +

השירותים שלנו

+

כל אישה ראויה לשיער שגורם לה להרגיש מדהים. אנחנו מתמחות במגוון טכניקות מתקדמות להארכה והעשרת שיער.

+
+ +
+
+
+ +
+
+

תוספות שיער טבעי

+

שיער אנושי באיכות הגבוהה ביותר, מראה טבעי לחלוטין שמשתלב בצורה מושלמת עם השיער שלך. אנחנו עובדות רק עם שיער רמי 100% — בלי פשרות.

+
    +
  • שיער רמי 100%
    • +
  • אורך 40-70 ס״מ לבחירה
    • +
  • התאמת צבע מדויקת
    • +
  • אחריות לשנה
    • +
+
+
+ +
+
+ +
+
+

הדבקת שיער (טייפ)

+

טכניקת הדבקה מתקדמת וחדשנית — בטוחה לשיער, נוחה לשימוש יומיומי ומחזיקה 6-8 שבועות.

+
    +
  • התקנה מהירה (שעה-שעתיים)
    • +
  • ללא נזק לשיער הטבעי
    • +
  • קלות להסרה ולהחלפה
    • +
+
+
+ +
+
+ +
+
+

תחזוקה והרמה

+

שירות תחזוקה שוטף להארכת חיי התוספות. מומלץ כל 6-8 שבועות לשמירה על מראה מושלם.

+
    +
  • הרמה והדבקה מחדש
    • +
  • בדיקת מצב השיער
    • +
  • ייעוץ טיפוח אישי
    • +
+
+
+ +
+
+ +
+
+

ייעוץ ראשוני חינם

+

לא בטוחה מה מתאים לך? בואי לפגישת ייעוץ ללא התחייבות. נבדוק את השיער, נדבר על הציפיות, ונבנה יחד תוכנית.

+ קביעת ייעוץ חינם +
+
+
+
+ + + +
+
+ 03 +

איך זה עובד

+

תהליך פשוט ונעים שמתחיל בייעוץ אישי ומסתיים בשיער החלומות שלך.

+
+ +
+
+
1
+
+

ייעוץ אישי

+

נפגש לשיחת היכרות, נבין את הצרכים שלך ונתאים את הפתרון המושלם — סוג השיער, האורך, הצבע והטכניקה.

+
+
+ +
+
2
+
+

בחירת השיער

+

נבחר יחד את השיער הטבעי באיכות הגבוהה ביותר, עם התאמת צבע מדויקת שתשתלב בצורה מושלמת.

+
+
+ +
+
3
+
+

התקנה מקצועית

+

ההתקנה מתבצעת בסטודיו הנעים שלנו, בתשומת לב לכל פרט, תוך שמירה על בריאות השיער הטבעי.

+
+
+ +
+
4
+
+

ליווי ותחזוקה

+

אנחנו כאן בשבילך גם אחרי — הדרכה לטיפוח נכון ותחזוקה שוטפת לשמירה על מראה מושלם.

+
+
+
+
+ +
+
+
+ 04 +

קביעת תור

+

מוכנה להתחיל? מלאי את הפרטים ואנחנו נחזור אליך תוך 24 שעות לתיאום.

+ +
+
+ + אישור תוך 24 שעות +
+
+ + ביטול חינם עד 24 שעות לפני +
+
+ + ייעוץ ראשוני ללא עלות +
+
+ +
+

מעדיפה לדבר? התקשרי עכשיו:

+ 052-765-4321 +
+
+ +
+
+ + +
+ +
+
+ + +
+
+ + +
+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+
+
+ +
+
+
+ 05 +

הסטודיו שלנו

+

ממוקם בלב בת ים, באווירה נעימה ואינטימית. חניה חינם ברחוב.

+ +
+ + +
+ כתובת + רחוב העצמאות 50, בת ים +
+ + + + +
+ טלפון + 052-765-4321 +
+ + +
+ +
+ שעות פעילות + א׳-ה׳: 09:00-19:00
ו׳: 09:00-14:00 +
+
+
+
+ +
+

שלחי הודעה

+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+
+
+
+ + + + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..6606b5c --- /dev/null +++ b/script.js @@ -0,0 +1,206 @@ +(function() { + 'use strict'; + + // Navigation toggle + const navToggle = document.querySelector('.nav-toggle'); + const navLinks = document.querySelector('.nav-links'); + + if (navToggle && navLinks) { + navToggle.addEventListener('click', () => { + const isOpen = navToggle.getAttribute('aria-expanded') === 'true'; + navToggle.setAttribute('aria-expanded', !isOpen); + navLinks.classList.toggle('open'); + document.body.style.overflow = isOpen ? '' : 'hidden'; + }); + + // Close menu when clicking a link + navLinks.querySelectorAll('a').forEach(link => { + link.addEventListener('click', () => { + navToggle.setAttribute('aria-expanded', 'false'); + navLinks.classList.remove('open'); + document.body.style.overflow = ''; + }); + }); + + // Close on escape key + document.addEventListener('keydown', (e) => { + if (e.key === 'Escape' && navLinks.classList.contains('open')) { + navToggle.setAttribute('aria-expanded', 'false'); + navLinks.classList.remove('open'); + document.body.style.overflow = ''; + navToggle.focus(); + } + }); + } + + // Reveal animations + const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + + if (!prefersReducedMotion) { + const revealElements = document.querySelectorAll('.reveal'); + + const revealObserver = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('visible'); + revealObserver.unobserve(entry.target); + } + }); + }, { + threshold: 0.1, + rootMargin: '0px 0px -50px 0px' + }); + + revealElements.forEach(el => revealObserver.observe(el)); + } else { + document.querySelectorAll('.reveal').forEach(el => { + el.classList.add('visible'); + }); + } + + // Stats counter animation + const stats = document.querySelectorAll('.stat-number'); + + if (!prefersReducedMotion && stats.length) { + const statsObserver = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + const target = parseInt(entry.target.getAttribute('data-target'), 10); + animateCounter(entry.target, target); + statsObserver.unobserve(entry.target); + } + }); + }, { threshold: 0.5 }); + + stats.forEach(stat => statsObserver.observe(stat)); + } else { + stats.forEach(stat => { + stat.textContent = stat.getAttribute('data-target'); + }); + } + + function animateCounter(element, target) { + let current = 0; + const duration = 2000; + const step = target / (duration / 16); + + function update() { + current += step; + if (current < target) { + element.textContent = Math.floor(current); + requestAnimationFrame(update); + } else { + element.textContent = target; + } + } + + requestAnimationFrame(update); + } + + // Set minimum date for booking form + const dateInput = document.getElementById('booking-date'); + if (dateInput) { + const today = new Date(); + const tomorrow = new Date(today); + tomorrow.setDate(tomorrow.getDate() + 1); + const minDate = tomorrow.toISOString().split('T')[0]; + dateInput.setAttribute('min', minDate); + } + + // Form handling + const bookingForm = document.getElementById('bookingForm'); + const contactForm = document.getElementById('contactForm'); + + function showToast(message) { + const toast = document.getElementById('toast'); + if (toast) { + toast.textContent = message; + toast.classList.add('show'); + setTimeout(() => { + toast.classList.remove('show'); + }, 4000); + } + } + + function validatePhone(phone) { + const cleaned = phone.replace(/[-\s]/g, ''); + return /^0[0-9]{9}$/.test(cleaned); + } + + if (bookingForm) { + bookingForm.addEventListener('submit', (e) => { + e.preventDefault(); + + const phone = bookingForm.querySelector('[name="phone"]').value; + if (!validatePhone(phone)) { + showToast('מספר הטלפון לא תקין. נא להזין מספר ישראלי.'); + return; + } + + const formData = new FormData(bookingForm); + const data = Object.fromEntries(formData); + + // Simulate form submission + console.log('Booking request:', data); + + showToast('הבקשה נשלחה בהצלחה! נחזור אליך תוך 24 שעות.'); + bookingForm.reset(); + }); + } + + if (contactForm) { + contactForm.addEventListener('submit', (e) => { + e.preventDefault(); + + const phone = contactForm.querySelector('[name="phone"]').value; + if (!validatePhone(phone)) { + showToast('מספר הטלפון לא תקין. נא להזין מספר ישראלי.'); + return; + } + + const formData = new FormData(contactForm); + const data = Object.fromEntries(formData); + + // Simulate form submission + console.log('Contact message:', data); + + showToast('ההודעה נשלחה! נחזור אליך בהקדם.'); + contactForm.reset(); + }); + } + + // Smooth scroll for anchor links + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function(e) { + const targetId = this.getAttribute('href'); + if (targetId === '#') return; + + const target = document.querySelector(targetId); + if (target) { + e.preventDefault(); + const nav = document.querySelector('.main-nav'); + const navHeight = nav ? nav.offsetHeight : 0; + const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - navHeight; + + window.scrollTo({ + top: targetPosition, + behavior: prefersReducedMotion ? 'auto' : 'smooth' + }); + } + }); + }); + + // Nav shadow on scroll + const nav = document.querySelector('.main-nav'); + + if (nav) { + window.addEventListener('scroll', () => { + if (window.pageYOffset > 100) { + nav.style.boxShadow = 'var(--shadow-sm)'; + } else { + nav.style.boxShadow = 'none'; + } + }, { passive: true }); + } + +})(); diff --git a/style.css b/style.css new file mode 100644 index 0000000..9187b11 --- /dev/null +++ b/style.css @@ -0,0 +1,1217 @@ +:root { + --gold: #d4a574; + --gold-light: #e8c9a8; + --gold-dark: #996b3d; + --cream: #faf7f2; + --cream-dark: #f0ebe3; + --charcoal: #2d2926; + --charcoal-light: #4a4543; + --text: #3d3835; + --text-muted: #5c5552; + --white: #ffffff; + --shadow-sm: 0 2px 8px rgba(45, 41, 38, 0.08); + --shadow-md: 0 8px 30px rgba(45, 41, 38, 0.12); + --shadow-lg: 0 20px 60px rgba(45, 41, 38, 0.15); + --radius-sm: 4px; + --radius-md: 8px; + --radius-lg: 16px; + --radius-xl: 24px; + --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: 'Heebo', sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 1.7; + color: var(--text); + background-color: var(--cream); + overflow-x: hidden; +} + +/* Typography — Hebrew capped at 600 */ +h1, h2, h3, h4, h5, h6 { + font-family: 'Heebo', sans-serif; + font-weight: 600; + line-height: 1.3; + color: var(--charcoal); +} + +h1 { + font-size: clamp(2.25rem, 7vw, 4rem); + letter-spacing: -0.01em; + line-height: 1.2; +} + +h2 { + font-size: clamp(1.75rem, 5vw, 2.5rem); +} + +h3 { + font-size: clamp(1.125rem, 3vw, 1.375rem); + font-weight: 500; +} + +a { + color: inherit; + text-decoration: none; + transition: color var(--transition); +} + +img { + max-width: 100%; + height: auto; + display: block; +} + +/* Focus states — visible for all interactive elements */ +a:focus-visible, +button:focus-visible, +input:focus-visible, +select:focus-visible, +textarea:focus-visible { + outline: 3px solid var(--gold); + outline-offset: 3px; +} + +/* Buttons */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + padding: 1rem 2rem; + font-family: inherit; + font-size: 1rem; + font-weight: 500; + border: none; + border-radius: var(--radius-md); + cursor: pointer; + transition: all var(--transition); + text-decoration: none; +} + +.btn-primary { + background: var(--gold); + color: var(--white); +} + +.btn-primary:hover, +.btn-primary:focus { + background: var(--gold-dark); + transform: translateY(-2px); + box-shadow: var(--shadow-md); +} + +.btn-secondary { + background: transparent; + color: var(--charcoal); + border: 2px solid var(--charcoal); +} + +.btn-secondary:hover, +.btn-secondary:focus { + background: var(--charcoal); + color: var(--cream); +} + +.btn-secondary svg { + transition: transform var(--transition); +} + +.btn-secondary:hover svg { + transform: scale(1.1); +} + +.btn-full { + width: 100%; +} + +/* Navigation */ +.main-nav { + position: fixed; + top: 0; + inset-inline: 0; + z-index: 1000; + background: rgba(250, 247, 242, 0.95); + backdrop-filter: blur(10px); + border-bottom: 1px solid rgba(212, 165, 116, 0.1); + transition: box-shadow var(--transition); +} + +.nav-container { + max-width: 1200px; + margin: 0 auto; + padding: 1rem 2rem; + display: flex; + align-items: center; + justify-content: space-between; +} + +.logo { + display: flex; + align-items: center; + gap: 0.75rem; + font-size: 1.25rem; + font-weight: 600; + color: var(--charcoal); +} + +.logo svg { + transition: transform var(--transition); +} + +.logo:hover svg { + transform: rotate(-10deg); +} + +.nav-toggle { + display: none; + flex-direction: column; + gap: 5px; + background: none; + border: none; + cursor: pointer; + padding: 0.5rem; + z-index: 1001; +} + +.nav-toggle span { + display: block; + width: 24px; + height: 2px; + background: var(--charcoal); + transition: all var(--transition); + transform-origin: center; +} + +.nav-toggle[aria-expanded="true"] span:nth-child(1) { + transform: rotate(45deg) translateY(5px); +} + +.nav-toggle[aria-expanded="true"] span:nth-child(2) { + opacity: 0; +} + +.nav-toggle[aria-expanded="true"] span:nth-child(3) { + transform: rotate(-45deg) translateY(-5px); +} + +.nav-links { + display: flex; + align-items: center; + gap: 2rem; + list-style: none; +} + +.nav-links a { + position: relative; + font-weight: 500; + color: var(--text); + padding: 0.5rem 0; +} + +.nav-links a::after { + content: ''; + position: absolute; + bottom: 0; + inset-inline-start: 0; + width: 0; + height: 2px; + background: var(--gold); + transition: width var(--transition); +} + +.nav-links a:hover::after, +.nav-links a:focus::after { + width: 100%; +} + +/* Hero */ +.hero { + min-height: 100vh; + display: flex; + align-items: center; + padding: 7rem 2rem 4rem; + background: linear-gradient(160deg, var(--cream) 0%, var(--cream-dark) 100%); +} + +.hero-content { + max-width: 1200px; + margin: 0 auto; + width: 100%; + display: grid; + grid-template-columns: 1.1fr 0.9fr; + gap: 4rem; + align-items: center; +} + +.hero-tagline { + font-size: 0.9rem; + font-weight: 500; + color: var(--charcoal-light); + text-transform: uppercase; + letter-spacing: 0.1em; + margin-bottom: 1rem; +} + +.hero-subtitle { + font-size: 1.125rem; + color: var(--text-muted); + margin-top: 1.5rem; + max-width: 480px; + line-height: 1.8; +} + +.hero-cta { + display: flex; + gap: 1rem; + margin-top: 2.5rem; + flex-wrap: wrap; +} + +/* Hero Image */ +.hero-image { + position: relative; +} + +.hero-image-frame { + position: relative; + z-index: 2; + border-radius: var(--radius-xl); + overflow: hidden; + box-shadow: var(--shadow-lg); + background: var(--cream-dark); + aspect-ratio: 4/5; +} + +.hero-image-placeholder { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background: linear-gradient(180deg, var(--cream-dark) 0%, var(--gold-light) 100%); + position: relative; +} + +.hero-image-placeholder svg { + width: 80%; + height: auto; + opacity: 0.9; +} + +.image-label { + position: absolute; + bottom: 1rem; + inset-inline-start: 50%; + transform: translateX(-50%); + font-size: 0.75rem; + color: var(--text-muted); + background: rgba(255,255,255,0.8); + padding: 0.25rem 0.75rem; + border-radius: var(--radius-sm); +} + +[dir="rtl"] .image-label { + transform: translateX(50%); +} + +.hero-accent { + position: absolute; + border-radius: 50%; + z-index: 1; +} + +.hero-accent-1 { + width: 200px; + height: 200px; + background: var(--gold-light); + opacity: 0.4; + top: -30px; + inset-inline-end: -30px; +} + +.hero-accent-2 { + width: 120px; + height: 120px; + background: var(--gold); + opacity: 0.3; + bottom: 40px; + inset-inline-start: -40px; +} + +/* Section Headers */ +.section-number { + display: block; + font-size: 0.875rem; + font-weight: 600; + color: var(--gold-dark); + letter-spacing: 0.1em; + margin-bottom: 0.5rem; +} + +.section-header { + text-align: center; + max-width: 600px; + margin: 0 auto 4rem; +} + +.section-intro { + font-size: 1.0625rem; + color: var(--text-muted); + margin-top: 1rem; + line-height: 1.8; +} + +/* Services */ +.services { + padding: 6rem 2rem; + background: var(--white); +} + +.services-grid { + max-width: 1000px; + margin: 0 auto; + display: grid; + grid-template-columns: 1fr; + gap: 1.5rem; +} + +.service-card { + display: grid; + grid-template-columns: auto 1fr; + gap: 1.5rem; + background: var(--cream); + padding: 2rem; + border-radius: var(--radius-lg); + transition: all var(--transition); + align-items: start; +} + +.service-card:hover { + box-shadow: var(--shadow-md); +} + +.service-card-featured { + background: linear-gradient(135deg, var(--cream) 0%, var(--gold-light) 100%); + border: 2px solid var(--gold-light); +} + +.service-card-cta { + background: var(--charcoal); + color: var(--cream); +} + +.service-card-cta h3 { + color: var(--white); +} + +.service-card-cta p { + color: var(--cream-dark); +} + +.service-icon { + width: 64px; + height: 64px; + flex-shrink: 0; +} + +.service-content h3 { + margin-bottom: 0.75rem; +} + +.service-content p { + color: var(--text-muted); + margin-bottom: 1rem; + line-height: 1.7; +} + +.service-features { + list-style: none; + display: flex; + flex-wrap: wrap; + gap: 0.5rem 1.5rem; +} + +.service-features li { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.875rem; + color: var(--text); +} + +.service-features li::before { + content: ''; + width: 6px; + height: 6px; + background: var(--gold); + border-radius: 50%; + flex-shrink: 0; +} + +.service-cta { + display: inline-flex; + align-items: center; + gap: 0.5rem; + margin-top: 0.5rem; + padding: 0.75rem 1.5rem; + background: var(--gold); + color: var(--white); + border-radius: var(--radius-md); + font-weight: 500; + transition: all var(--transition); +} + +.service-cta:hover { + background: var(--gold-light); + color: var(--charcoal); +} + +/* Gallery */ +.gallery { + padding: 6rem 2rem; + background: var(--cream); +} + +.gallery-grid { + max-width: 1100px; + margin: 0 auto; + display: grid; + grid-template-columns: 1.3fr 1fr; + grid-template-rows: auto auto; + gap: 1.5rem; +} + +.gallery-item { + background: var(--white); + border-radius: var(--radius-lg); + overflow: hidden; + box-shadow: var(--shadow-sm); + transition: all var(--transition); +} + +.gallery-item:hover { + box-shadow: var(--shadow-lg); + transform: translateY(-4px); +} + +.gallery-item-large { + grid-row: span 2; +} + +.gallery-comparison { + display: grid; + grid-template-columns: 1fr 1fr; + height: 100%; +} + +.gallery-item-large .gallery-comparison { + min-height: 400px; +} + +.comparison-side { + position: relative; + overflow: hidden; +} + +.comparison-image { + width: 100%; + height: 100%; +} + +.comparison-image img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform var(--transition); +} + +.gallery-item:hover .comparison-image img { + transform: scale(1.03); +} + +.comparison-label { + position: absolute; + top: 0.75rem; + inset-inline-start: 0.75rem; + font-size: 0.75rem; + font-weight: 500; + background: var(--white); + padding: 0.25rem 0.75rem; + border-radius: var(--radius-sm); + color: var(--text); +} + +.gallery-item figcaption { + padding: 1.25rem 1.5rem; + border-top: 1px solid var(--cream); +} + +.gallery-item figcaption strong { + display: block; + font-weight: 500; + color: var(--charcoal); + margin-bottom: 0.25rem; +} + +.gallery-item figcaption span { + font-size: 0.875rem; + color: var(--text-muted); +} + +.gallery-stats { + max-width: 700px; + margin: 4rem auto 0; + display: flex; + align-items: center; + justify-content: center; + gap: 2rem; + background: var(--white); + padding: 2rem 3rem; + border-radius: var(--radius-lg); + box-shadow: var(--shadow-sm); +} + +.stat { + text-align: center; + flex: 1; +} + +.stat-number { + font-size: 2.5rem; + font-weight: 600; + color: var(--gold-dark); + line-height: 1; +} + +.stat-plus, +.stat-percent { + font-size: 1.5rem; + font-weight: 500; + color: var(--gold-dark); +} + +.stat-label { + display: block; + margin-top: 0.5rem; + font-size: 0.875rem; + color: var(--text-muted); +} + +.stat-divider { + width: 1px; + height: 50px; + background: var(--cream-dark); + flex-shrink: 0; +} + +/* Process */ +.process { + padding: 6rem 2rem; + background: var(--charcoal); + color: var(--cream); +} + +.process .section-header h2 { + color: var(--white); +} + +.process .section-number { + color: var(--gold-light); +} + +.process .section-intro { + color: var(--cream-dark); +} + +.process-timeline { + max-width: 700px; + margin: 0 auto; + display: flex; + flex-direction: column; + gap: 0; +} + +.process-step { + display: grid; + grid-template-columns: 60px 1fr; + gap: 1.5rem; + position: relative; + padding-bottom: 2.5rem; +} + +.process-step:last-child { + padding-bottom: 0; +} + +.process-step::before { + content: ''; + position: absolute; + top: 60px; + inset-inline-start: 29px; + width: 2px; + height: calc(100% - 60px); + background: linear-gradient(180deg, var(--gold), transparent); +} + +.process-step:last-child::before { + display: none; +} + +.step-marker { + width: 60px; + height: 60px; + background: var(--gold); + color: var(--charcoal); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; + font-weight: 600; + flex-shrink: 0; +} + +.step-content { + padding-top: 0.75rem; +} + +.step-content h3 { + color: var(--white); + margin-bottom: 0.75rem; +} + +.step-content p { + color: var(--cream-dark); + line-height: 1.8; +} + +/* Booking */ +.booking { + padding: 6rem 2rem; + background: var(--cream); +} + +.booking-container { + max-width: 1000px; + margin: 0 auto; + display: grid; + grid-template-columns: 1fr 1.2fr; + gap: 3rem; + align-items: start; +} + +.booking-info h2 { + margin-top: 0.5rem; +} + +.booking-info > p { + margin-top: 1rem; + color: var(--text-muted); + font-size: 1.0625rem; + line-height: 1.7; +} + +.booking-features { + margin-top: 2rem; + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.booking-feature { + display: flex; + align-items: center; + gap: 0.75rem; + color: var(--text); +} + +.booking-feature svg { + width: 22px; + height: 22px; + flex-shrink: 0; +} + +.booking-contact { + margin-top: 2.5rem; + padding-top: 2rem; + border-top: 1px solid var(--cream-dark); +} + +.booking-contact p { + font-size: 0.9rem; + color: var(--text-muted); + margin-bottom: 0.5rem; +} + +.booking-phone { + font-size: 1.5rem; + font-weight: 600; + color: var(--gold-dark); + direction: ltr; + display: inline-block; +} + +.booking-phone:hover { + color: var(--gold); +} + +.booking-form, +.contact-form { + background: var(--white); + padding: 2.5rem; + border-radius: var(--radius-lg); + box-shadow: var(--shadow-md); +} + +.form-group { + margin-bottom: 1.25rem; +} + +.form-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; +} + +label { + display: block; + font-size: 0.875rem; + font-weight: 500; + color: var(--charcoal); + margin-bottom: 0.5rem; +} + +input, +select, +textarea { + width: 100%; + padding: 0.875rem 1rem; + font-family: inherit; + font-size: 1rem; + border: 2px solid var(--cream-dark); + border-radius: var(--radius-md); + background: var(--cream); + color: var(--text); + transition: all var(--transition); +} + +input:focus, +select:focus, +textarea:focus { + outline: none; + border-color: var(--gold); + background: var(--white); +} + +input::placeholder, +textarea::placeholder { + color: var(--text-muted); +} + +select { + cursor: pointer; + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235c5552' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: left 1rem center; + padding-inline-start: 1rem; + padding-inline-end: 3rem; +} + +textarea { + resize: vertical; + min-height: 100px; +} + +/* Contact */ +.contact { + padding: 6rem 2rem; + background: var(--white); +} + +.contact-container { + max-width: 1000px; + margin: 0 auto; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 3rem; + align-items: start; +} + +.contact-intro { + margin-top: 1rem; + color: var(--text-muted); + font-size: 1.0625rem; + line-height: 1.7; +} + +.contact-details { + margin-top: 2.5rem; + display: flex; + flex-direction: column; + gap: 1.25rem; +} + +.contact-item { + display: flex; + gap: 1rem; + align-items: flex-start; + padding: 0; +} + +.contact-item-link { + padding: 0.75rem; + margin: -0.75rem; + border-radius: var(--radius-md); + transition: background var(--transition); +} + +.contact-item-link:hover { + background: var(--cream); +} + +.contact-item svg { + width: 26px; + height: 26px; + color: var(--gold); + flex-shrink: 0; + margin-top: 0.125rem; +} + +.contact-item strong { + display: block; + font-weight: 500; + color: var(--charcoal); + margin-bottom: 0.125rem; +} + +.contact-item span { + color: var(--text-muted); + line-height: 1.5; +} + +.contact-form h3 { + margin-bottom: 1.5rem; +} + +/* Footer */ +.main-footer { + background: var(--charcoal); + color: var(--cream); + padding: 3rem 2rem; +} + +.footer-container { + max-width: 1000px; + margin: 0 auto; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + gap: 1.5rem; +} + +.footer-brand { + display: flex; + align-items: center; + gap: 1rem; + font-size: 1.125rem; + font-weight: 500; +} + +.footer-nav { + display: flex; + gap: 2rem; + flex-wrap: wrap; + justify-content: center; +} + +.footer-nav a { + color: var(--cream-dark); + transition: color var(--transition); +} + +.footer-nav a:hover { + color: var(--gold); +} + +.footer-contact { + display: flex; + gap: 2rem; + flex-wrap: wrap; + justify-content: center; + font-size: 0.9rem; +} + +.footer-contact a { + color: var(--gold-light); +} + +.footer-contact a:hover { + color: var(--gold); +} + +.footer-contact span { + color: var(--cream-dark); +} + +.footer-copy { + font-size: 0.8125rem; + color: var(--cream-dark); + opacity: 0.7; +} + +/* Toast */ +.toast { + position: fixed; + bottom: 2rem; + inset-inline-start: 50%; + transform: translateX(-50%) translateY(100px); + background: var(--charcoal); + color: var(--cream); + padding: 1rem 2rem; + border-radius: var(--radius-md); + box-shadow: var(--shadow-lg); + z-index: 2000; + opacity: 0; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + pointer-events: none; +} + +[dir="rtl"] .toast { + transform: translateX(50%) translateY(100px); +} + +.toast.show { + opacity: 1; + transform: translateX(-50%) translateY(0); +} + +[dir="rtl"] .toast.show { + transform: translateX(50%) translateY(0); +} + +/* Reveal animations */ +.reveal { + opacity: 0; + transform: translateY(30px); + transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); + transition-delay: var(--delay, 0s); +} + +.reveal.visible { + opacity: 1; + transform: translateY(0); +} + +/* Responsive */ +@media (min-width: 769px) { + .services-grid { + grid-template-columns: 1fr 1fr; + } + + .service-card-featured { + grid-column: span 2; + } + + .service-card-cta { + grid-column: span 2; + } +} + +@media (max-width: 1024px) { + .hero-content { + grid-template-columns: 1fr; + text-align: center; + gap: 3rem; + } + + .hero-subtitle { + margin: 1.5rem auto 0; + } + + .hero-cta { + justify-content: center; + } + + .hero-image { + max-width: 350px; + margin: 0 auto; + } + + .gallery-grid { + grid-template-columns: 1fr 1fr; + grid-template-rows: auto; + } + + .gallery-item-large { + grid-row: span 1; + grid-column: span 2; + } + + .gallery-item-large .gallery-comparison { + min-height: 280px; + } + + .booking-container, + .contact-container { + grid-template-columns: 1fr; + gap: 2.5rem; + } +} + +@media (max-width: 768px) { + .nav-toggle { + display: flex; + } + + .nav-links { + position: fixed; + top: 0; + inset-inline: 0; + bottom: 0; + flex-direction: column; + justify-content: center; + gap: 2rem; + background: var(--cream); + padding: 2rem; + transform: translateX(100%); + transition: transform var(--transition); + } + + [dir="rtl"] .nav-links { + transform: translateX(-100%); + } + + .nav-links.open { + transform: translateX(0); + } + + .nav-links a { + font-size: 1.25rem; + } + + .services-grid { + grid-template-columns: 1fr; + } + + .service-card-featured, + .service-card-cta { + grid-column: span 1; + } + + .service-card { + grid-template-columns: 1fr; + text-align: center; + } + + .service-icon { + margin: 0 auto; + } + + .service-features { + justify-content: center; + } + + .gallery-grid { + grid-template-columns: 1fr; + } + + .gallery-item-large { + grid-column: span 1; + } + + .gallery-stats { + flex-direction: column; + gap: 1.5rem; + padding: 2rem; + } + + .stat-divider { + width: 60px; + height: 1px; + } + + .process-step { + grid-template-columns: 50px 1fr; + gap: 1rem; + } + + .step-marker { + width: 50px; + height: 50px; + font-size: 1.25rem; + } + + .process-step::before { + inset-inline-start: 24px; + top: 50px; + height: calc(100% - 50px); + } + + .form-row { + grid-template-columns: 1fr; + } +} + +@media (max-width: 480px) { + .hero { + padding: 6rem 1.25rem 3rem; + } + + .hero-cta { + flex-direction: column; + align-items: stretch; + } + + .btn { + width: 100%; + justify-content: center; + } + + .service-card, + .booking-form, + .contact-form { + padding: 1.5rem; + } + + .stat-number { + font-size: 2rem; + } +} + +/* Reduced motion */ +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } + + html { + scroll-behavior: auto; + } + + .reveal { + opacity: 1; + transform: none; + } +}