diff --git a/index.html b/index.html new file mode 100644 index 0000000..68ab2b8 --- /dev/null +++ b/index.html @@ -0,0 +1,455 @@ + + + + + + סטודיו מראה | עיצוב שיער בפתח תקווה + + + + + + + + + + + + + +
+ +
+ +
+
+
+
+ +
+
+

רחוב רוטשילד 45, פתח תקווה

+

+ סטודיו + מראה +

+

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

+
+ קבעו תור + + + 054-9876543 + +
+
+
+ +
+
+ +
+
+
+ 01 +

מה אנחנו עושים

+

כל שירות מתחיל בשיחת ייעוץ קצרה — בלי הפתעות, רק תוצאות

+
+
+
+
+ +
+

תספורות עיצוב

+

גזירה מדויקת שמתאימה למבנה הפנים ולסגנון החיים שלכם. נשים, גברים וילדים.

+ החל מ-120 ₪ +
+
+
+ +
+

צביעה וגוונים

+

מבלונד סקנדינבי ועד שחור עמוק. צבעים איכותיים שנשארים חיים לאורך זמן.

+ החל מ-250 ₪ +
+
+
+ +
+

טיפולי שיקום

+

קרטין, בוטוקס לשיער, טיפולי לחות עמוקים. להחזיר את הברק והבריאות.

+ החל מ-180 ₪ +
+
+
+ +
+

פן והחלקות

+

עיצוב לאירוע או החלקה שנשארת חודשים. ברזילאית, יפנית או משי.

+ החל מ-100 ₪ +
+
+
+ +
+

תוספות שיער

+

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

+ החל מ-400 ₪ +
+
+
+ +
+

עיצוב כלות

+

פגישת ניסיון + עיצוב ביום החתונה. ניסיון של 15 שנה באירועים.

+ החל מ-600 ₪ +
+
+
+
+ + + +
+
+
+
+
+ 03 +

קביעת תור

+

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

+
+
+
+ +
+

שעות פעילות

+

א׳-ה׳: 9:00-20:00
ו׳: 8:00-14:00

+
+
+
+ +
+

כתובת

+

רחוב רוטשילד 45
פתח תקווה

+
+
+
+ +
+

טלפון

+

054-9876543

+
+
+
+
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+
+ + +
+ +
+
+
+
+ +
+
+
+
+
+ 04 +

שאלות?

+

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

+
+
+
+ + + +
+
+ + + +
+
+ + + +
+ +
+
+
+
+ +

רחוב רוטשילד 45, פתח תקווה

+
+
+
+
+
+
+ + + +
+ + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..140f26b --- /dev/null +++ b/script.js @@ -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 }); + +})(); diff --git a/style.css b/style.css new file mode 100644 index 0000000..fa64e1e --- /dev/null +++ b/style.css @@ -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); +}