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

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

+

+ היופי שלך, + האומנות שלנו +

+

מקצועיות, תשוקה ותשומת לב לכל פרט. עיצוב שיער, צביעות ברמה הגבוהה ביותר וטיפולי כלות מושלמים.

+
+ קביעת תור + + + 050-123-4567 + +
+
+ +
+ +
+
+

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

+

מגוון טיפולים מקצועיים בהתאמה אישית

+
+
+
+
+ +
+

עיצוב שיער

+

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

+ החל מ-80 ₪ +
+
+
הכי מבוקש
+
+ +
+

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

+

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

+ החל מ-200 ₪ +
+
+
+ +
+

טיפולי כלות

+

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

+ החל מ-800 ₪ +
+
+
+ +
+

טיפולי שיער

+

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

+ החל מ-150 ₪ +
+
+
+ + + +
+
+
+

קביעת תור

+

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

+ + + 050-123-4567 + +
    +
  • + + אישור תוך שעות +
    • +
  • + + ללא התחייבות +
    • +
  • + + ייעוץ ראשוני חינם +
    • +
+
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + נתאם אתכם לשעה המדויקת + +
+
+ + +
+ +
+
+
+ +
+
+
+

בואו לבקר

+

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

+
+
+ + רחוב רוטשילד 42, פתח תקווה +
+
+ + 050-123-4567 +
+
+ +
+ א׳–ה׳: 09:00–20:00 + ו׳: 08:00–14:00 + שבת: סגור +
+
+
+
+
+ +
+
+
+ + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..b40d503 --- /dev/null +++ b/script.js @@ -0,0 +1,195 @@ +(function() { + 'use strict'; + + // Navigation scroll effect + const nav = document.querySelector('.nav'); + + function handleNavScroll() { + if (window.scrollY > 50) { + nav.classList.add('nav--scrolled'); + } else { + nav.classList.remove('nav--scrolled'); + } + } + + window.addEventListener('scroll', handleNavScroll, { passive: true }); + handleNavScroll(); + + // Mobile menu toggle + const navToggle = document.querySelector('.nav__toggle'); + const navMenu = document.querySelector('.nav__menu'); + + if (navToggle && navMenu) { + navToggle.addEventListener('click', function() { + const isExpanded = this.getAttribute('aria-expanded') === 'true'; + this.setAttribute('aria-expanded', !isExpanded); + navMenu.classList.toggle('nav__menu--open'); + }); + + navMenu.querySelectorAll('a').forEach(link => { + link.addEventListener('click', function() { + navToggle.setAttribute('aria-expanded', 'false'); + navMenu.classList.remove('nav__menu--open'); + }); + }); + + document.addEventListener('keydown', function(e) { + if (e.key === 'Escape' && navMenu.classList.contains('nav__menu--open')) { + navToggle.setAttribute('aria-expanded', 'false'); + navMenu.classList.remove('nav__menu--open'); + navToggle.focus(); + } + }); + } + + // Scroll reveal animation + const revealElements = document.querySelectorAll('.reveal'); + const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)'); + + if (prefersReducedMotion.matches) { + revealElements.forEach(el => { + el.classList.add('reveal--visible'); + }); + } else if ('IntersectionObserver' in window) { + const revealObserver = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + entry.target.classList.add('reveal--visible'); + revealObserver.unobserve(entry.target); + } + }); + }, + { + threshold: 0.1, + rootMargin: '0px 0px -40px 0px' + } + ); + + revealElements.forEach(el => { + revealObserver.observe(el); + }); + } else { + revealElements.forEach(el => { + el.classList.add('reveal--visible'); + }); + } + + // 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(); + target.scrollIntoView({ + behavior: prefersReducedMotion.matches ? 'auto' : 'smooth', + block: 'start' + }); + + target.setAttribute('tabindex', '-1'); + target.focus({ preventScroll: true }); + } + }); + }); + + // Form validation and submission handling + const bookingForm = document.querySelector('.booking__form'); + + if (bookingForm) { + const fields = bookingForm.querySelectorAll('input[required], select[required]'); + + // Real-time validation + fields.forEach(field => { + field.addEventListener('blur', function() { + validateField(this); + }); + + field.addEventListener('input', function() { + if (this.classList.contains('error')) { + validateField(this); + } + }); + }); + + function validateField(field) { + const errorEl = field.parentElement.querySelector('.form-error'); + let message = ''; + + if (!field.value.trim()) { + message = 'שדה חובה'; + } else if (field.type === 'tel' && !/^[0-9\-\s]{9,14}$/.test(field.value.replace(/\s/g, ''))) { + message = 'מספר טלפון לא תקין'; + } else if (field.type === 'date') { + const selectedDate = new Date(field.value); + const today = new Date(); + today.setHours(0, 0, 0, 0); + if (selectedDate < today) { + message = 'יש לבחור תאריך עתידי'; + } + } + + if (message) { + field.classList.add('error'); + if (errorEl) errorEl.textContent = message; + return false; + } else { + field.classList.remove('error'); + if (errorEl) errorEl.textContent = ''; + return true; + } + } + + bookingForm.addEventListener('submit', function(e) { + e.preventDefault(); + + let isValid = true; + fields.forEach(field => { + if (!validateField(field)) { + isValid = false; + } + }); + + if (!isValid) { + const firstError = bookingForm.querySelector('.error'); + if (firstError) firstError.focus(); + return; + } + + const submitButton = this.querySelector('.form-submit'); + const originalText = submitButton.textContent; + + submitButton.textContent = 'שולח...'; + submitButton.disabled = true; + + // Simulate form submission + setTimeout(() => { + submitButton.textContent = 'נשלח בהצלחה ✓'; + submitButton.style.background = 'hsl(145, 45%, 40%)'; + + this.reset(); + + setTimeout(() => { + submitButton.textContent = originalText; + submitButton.style.background = ''; + submitButton.disabled = false; + }, 3000); + }, 1200); + }); + + // Set minimum date to today + const dateInput = document.getElementById('date'); + if (dateInput) { + const today = new Date(); + const yyyy = today.getFullYear(); + const mm = String(today.getMonth() + 1).padStart(2, '0'); + const dd = String(today.getDate()).padStart(2, '0'); + dateInput.setAttribute('min', `${yyyy}-${mm}-${dd}`); + } + } + +})(); diff --git a/style.css b/style.css new file mode 100644 index 0000000..4a97cab --- /dev/null +++ b/style.css @@ -0,0 +1,1004 @@ +:root { + --color-bg: #0c0a09; + --color-surface: #1c1917; + --color-surface-elevated: #292524; + --color-text: #fafaf9; + --color-text-muted: #a8a29e; + --color-primary: #44403c; + --color-accent: #d4a574; + --color-accent-light: #e8cdb5; + --color-accent-dark: #b8956a; + --color-error: #ef4444; + --font-body: 'Heebo', sans-serif; + --space-2xs: 0.25rem; + --space-xs: 0.5rem; + --space-sm: 1rem; + --space-md: 1.5rem; + --space-lg: 3rem; + --space-xl: 5rem; + --space-2xl: 8rem; + --transition-fast: 0.15s ease; + --transition-medium: 0.3s ease; + --radius-sm: 3px; + --radius-md: 6px; +} + +*, +*::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-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} + +body { + font-family: var(--font-body); + font-size: 1rem; + font-weight: 400; + line-height: 1.65; + color: var(--color-text); + background-color: var(--color-bg); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +a { + color: inherit; + text-decoration: none; +} + +img { + max-width: 100%; + height: auto; + display: block; +} + +button, +input, +select, +textarea { + font: inherit; + color: inherit; +} + +ul, ol { + list-style: none; +} + +address { + font-style: normal; +} + +.section-title { + font-family: var(--font-body); + font-size: clamp(1.75rem, 4vw, 2.75rem); + font-weight: 600; + letter-spacing: -0.01em; + margin-block-end: var(--space-xs); + color: var(--color-text); +} + +.section-subtitle { + font-size: 1rem; + color: var(--color-text-muted); + max-width: 40ch; +} + +/* Navigation */ +.nav { + position: fixed; + top: 0; + inset-inline: 0; + z-index: 1000; + padding: var(--space-sm) var(--space-md); + transition: background var(--transition-medium), box-shadow var(--transition-medium); +} + +.nav--scrolled { + background: rgba(12, 10, 9, 0.95); + backdrop-filter: blur(12px); + box-shadow: 0 1px 0 rgba(255,255,255,0.05); +} + +.nav__container { + max-width: 1200px; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-between; +} + +.nav__logo { + display: flex; + align-items: center; + gap: var(--space-xs); +} + +.nav__logo-mark { + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-accent); + color: var(--color-bg); + font-family: var(--font-body); + font-size: 1.25rem; + font-weight: 600; + border-radius: var(--radius-sm); +} + +.nav__logo-text { + font-weight: 500; + font-size: 1rem; +} + +.nav__toggle { + display: none; + flex-direction: column; + gap: 5px; + background: none; + border: none; + cursor: pointer; + padding: var(--space-xs); +} + +.nav__toggle span { + width: 22px; + height: 2px; + background: var(--color-text); + transition: var(--transition-fast); + transform-origin: center; +} + +.nav__menu { + display: flex; + gap: var(--space-md); +} + +.nav__menu a { + position: relative; + padding: var(--space-xs) 0; + font-size: 0.9375rem; + color: var(--color-text-muted); + transition: color var(--transition-fast); +} + +.nav__menu a::after { + content: ''; + position: absolute; + bottom: 0; + inset-inline-start: 0; + width: 0; + height: 1px; + background: var(--color-accent); + transition: width var(--transition-fast); +} + +.nav__menu a:hover, +.nav__menu a:focus { + color: var(--color-text); +} + +.nav__menu a:hover::after, +.nav__menu a:focus::after { + width: 100%; +} + +@media (max-width: 768px) { + .nav__toggle { + display: flex; + } + + .nav__menu { + position: absolute; + top: 100%; + inset-inline: 0; + flex-direction: column; + background: var(--color-surface); + padding: var(--space-md); + gap: var(--space-xs); + opacity: 0; + visibility: hidden; + transform: translateY(-8px); + transition: opacity var(--transition-fast), transform var(--transition-fast), visibility 0s linear 0.15s; + } + + .nav__menu--open { + opacity: 1; + visibility: visible; + transform: translateY(0); + transition: opacity var(--transition-fast), transform var(--transition-fast), visibility 0s linear 0s; + } + + .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); + } +} + +/* Hero */ +.hero { + min-height: 100vh; + min-height: 100dvh; + display: grid; + grid-template-columns: 1fr 0.8fr; + align-items: center; + padding: var(--space-2xl) var(--space-md); + gap: var(--space-lg); + position: relative; + overflow: hidden; +} + +.hero__content { + max-width: 540px; + margin-inline-start: auto; + padding-inline-end: var(--space-md); +} + +.hero__tagline { + font-size: 0.8125rem; + text-transform: uppercase; + letter-spacing: 0.15em; + color: var(--color-accent); + margin-block-end: var(--space-sm); + font-weight: 500; +} + +.hero__title { + font-family: var(--font-body); + font-size: clamp(2.25rem, 5.5vw, 3.5rem); + font-weight: 300; + line-height: 1.2; + margin-block-end: var(--space-md); +} + +.hero__title-line { + display: block; +} + +.hero__title-line--accent { + color: var(--color-accent); + font-weight: 500; +} + +.hero__description { + font-size: 1.0625rem; + color: var(--color-text-muted); + margin-block-end: var(--space-md); + max-width: 42ch; + line-height: 1.7; +} + +.hero__actions { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: var(--space-sm); +} + +.hero__cta { + display: inline-flex; + align-items: center; + padding: 0.875rem 1.75rem; + background: var(--color-accent); + color: var(--color-bg); + font-weight: 500; + font-size: 0.9375rem; + border-radius: var(--radius-sm); + transition: background var(--transition-fast), transform var(--transition-fast); +} + +.hero__cta:hover, +.hero__cta:focus { + background: var(--color-accent-light); + transform: translateY(-2px); +} + +.hero__phone { + display: inline-flex; + align-items: center; + gap: var(--space-xs); + padding: 0.875rem 1rem; + color: var(--color-text-muted); + font-size: 0.9375rem; + transition: color var(--transition-fast); +} + +.hero__phone:hover, +.hero__phone:focus { + color: var(--color-accent); +} + +.hero__phone svg { + width: 18px; + height: 18px; +} + +.hero__visual { + position: relative; + height: 70vh; + display: flex; + align-items: center; + justify-content: center; +} + +.hero__shape { + position: absolute; + border-radius: 50%; + opacity: 0.12; +} + +.hero__shape--1 { + width: 320px; + height: 320px; + background: var(--color-accent); + top: 15%; + inset-inline-end: 5%; + animation: heroFloat 10s ease-in-out infinite; +} + +.hero__shape--2 { + width: 180px; + height: 180px; + background: var(--color-accent-light); + bottom: 25%; + inset-inline-start: 10%; + animation: heroFloat 8s ease-in-out infinite 1s; +} + +.hero__shape--3 { + width: 100px; + height: 100px; + background: var(--color-text); + top: 45%; + inset-inline-end: 35%; + animation: heroFloat 12s ease-in-out infinite 2s; +} + +.hero__icon { + width: 140px; + height: 140px; + color: var(--color-accent); + position: relative; + z-index: 1; +} + +.hero__icon svg { + width: 100%; + height: 100%; +} + +@keyframes heroFloat { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-20px); } +} + +@media (max-width: 900px) { + .hero { + grid-template-columns: 1fr; + text-align: center; + padding-block-start: calc(var(--space-2xl) + 40px); + min-height: auto; + padding-block-end: var(--space-xl); + } + + .hero__content { + margin: 0 auto; + padding-inline-end: 0; + } + + .hero__description { + margin-inline: auto; + } + + .hero__actions { + justify-content: center; + } + + .hero__visual { + height: 200px; + order: -1; + } + + .hero__shape--1 { + width: 150px; + height: 150px; + } + + .hero__shape--2 { + width: 80px; + height: 80px; + } + + .hero__shape--3 { + width: 50px; + height: 50px; + } + + .hero__icon { + width: 80px; + height: 80px; + } +} + +/* Services */ +.services { + padding: var(--space-xl) var(--space-md); + background: var(--color-surface); +} + +.services__header { + text-align: center; + margin-block-end: var(--space-lg); +} + +.services__header .section-subtitle { + margin-inline: auto; +} + +.services__grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: var(--space-sm); + max-width: 1100px; + margin: 0 auto; +} + +@media (max-width: 1000px) { + .services__grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 560px) { + .services__grid { + grid-template-columns: 1fr; + } +} + +.service-card { + background: var(--color-surface-elevated); + padding: var(--space-md); + border-radius: var(--radius-md); + position: relative; + transition: transform var(--transition-medium), box-shadow var(--transition-medium); +} + +.service-card:hover { + transform: translateY(-4px); + box-shadow: 0 16px 32px rgba(0, 0, 0, 0.25); +} + +.service-card--featured { + background: linear-gradient(145deg, var(--color-surface-elevated), var(--color-primary)); + border: 1px solid var(--color-accent-dark); +} + +.service-card__badge { + position: absolute; + top: var(--space-sm); + inset-inline-end: var(--space-sm); + background: var(--color-accent); + color: var(--color-bg); + padding: 0.2rem 0.6rem; + font-size: 0.6875rem; + font-weight: 500; + border-radius: var(--radius-sm); + text-transform: uppercase; + letter-spacing: 0.03em; +} + +.service-card__icon { + width: 48px; + height: 48px; + margin-block-end: var(--space-sm); + color: var(--color-accent); +} + +.service-card__icon svg { + width: 100%; + height: 100%; +} + +.service-card__title { + font-family: var(--font-body); + font-size: 1.25rem; + font-weight: 600; + margin-block-end: var(--space-xs); +} + +.service-card__description { + color: var(--color-text-muted); + font-size: 0.875rem; + margin-block-end: var(--space-sm); + line-height: 1.6; +} + +.service-card__price { + display: inline-block; + color: var(--color-accent); + font-weight: 500; + font-size: 0.875rem; +} + +/* Gallery */ +.gallery { + padding: var(--space-xl) var(--space-md); +} + +.gallery__header { + text-align: center; + margin-block-end: var(--space-lg); +} + +.gallery__header .section-subtitle { + margin-inline: auto; +} + +.gallery__grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 180px; + gap: var(--space-sm); + max-width: 1000px; + margin: 0 auto; +} + +.gallery__item { + border-radius: var(--radius-md); + overflow: hidden; + position: relative; +} + +.gallery__item--large { + grid-row: span 2; +} + +.gallery__item--wide { + grid-column: span 2; +} + +.gallery__visual { + width: 100%; + height: 100%; + background: linear-gradient(135deg, + hsl(var(--hue, 30) 25% 18%), + hsl(var(--hue, 30) 30% 28%) + ); + display: flex; + align-items: center; + justify-content: center; + transition: transform var(--transition-medium); +} + +.gallery__item:hover .gallery__visual, +.gallery__item:focus-within .gallery__visual { + transform: scale(1.03); +} + +.gallery__visual svg { + width: 55%; + height: 55%; + opacity: 0.85; +} + +.gallery__caption { + position: absolute; + bottom: 0; + inset-inline: 0; + padding: var(--space-sm); + font-size: 0.875rem; + font-weight: 500; + color: var(--color-text); + background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 60%, transparent 100%); +} + +@media (max-width: 768px) { + .gallery__grid { + grid-template-columns: repeat(2, 1fr); + grid-auto-rows: 160px; + } + + .gallery__item--large { + grid-row: span 1; + } +} + +@media (max-width: 480px) { + .gallery__grid { + grid-template-columns: 1fr; + } + + .gallery__item--wide { + grid-column: span 1; + } +} + +/* Booking */ +.booking { + padding: var(--space-xl) var(--space-md); + background: var(--color-surface); +} + +.booking__container { + max-width: 960px; + margin: 0 auto; + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-lg); + align-items: start; +} + +.booking__text { + color: var(--color-text-muted); + margin-block-end: var(--space-md); + font-size: 1rem; + max-width: 38ch; +} + +.booking__phone { + display: inline-flex; + align-items: center; + gap: var(--space-xs); + padding: 0.75rem 1.25rem; + background: var(--color-surface-elevated); + color: var(--color-accent); + font-weight: 500; + font-size: 1.125rem; + border-radius: var(--radius-sm); + margin-block-end: var(--space-md); + border: 1px solid transparent; + transition: background var(--transition-fast), border-color var(--transition-fast); +} + +.booking__phone:hover, +.booking__phone:focus { + background: var(--color-primary); + border-color: var(--color-accent-dark); +} + +.booking__phone svg { + width: 20px; + height: 20px; +} + +.booking__features { + display: flex; + flex-direction: column; + gap: var(--space-xs); +} + +.booking__feature { + display: flex; + align-items: center; + gap: var(--space-xs); + color: var(--color-text-muted); + font-size: 0.9375rem; +} + +.booking__feature svg { + width: 18px; + height: 18px; + color: var(--color-accent); + flex-shrink: 0; +} + +.booking__form { + background: var(--color-surface-elevated); + padding: var(--space-md); + border-radius: var(--radius-md); + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-sm); +} + +.form-group { + display: flex; + flex-direction: column; + gap: 0.375rem; +} + +.form-group--full { + grid-column: 1 / -1; +} + +.form-group label { + font-size: 0.875rem; + color: var(--color-text); + font-weight: 400; +} + +.form-required { + color: var(--color-accent); +} + +.form-optional { + color: var(--color-text-muted); + font-weight: 300; +} + +.form-group input, +.form-group select, +.form-group textarea { + background: var(--color-surface); + border: 1px solid var(--color-primary); + padding: 0.75rem; + border-radius: var(--radius-sm); + transition: border-color var(--transition-fast), box-shadow var(--transition-fast); +} + +.form-group input::placeholder { + color: var(--color-text-muted); + opacity: 0.7; +} + +.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 input:invalid:not(:placeholder-shown):not(:focus), +.form-group select:invalid:not(:focus), +.form-group input.error, +.form-group select.error { + border-color: var(--color-error); +} + +.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='%23a8a29e' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: left 0.75rem center; + padding-inline-start: 2rem; +} + +.form-group textarea { + resize: vertical; + min-height: 80px; +} + +.form-hint { + font-size: 0.75rem; + color: var(--color-text-muted); +} + +.form-error { + font-size: 0.75rem; + color: var(--color-error); + min-height: 1em; +} + +.form-submit { + grid-column: 1 / -1; + background: var(--color-accent); + color: var(--color-bg); + border: none; + padding: 0.875rem var(--space-md); + font-weight: 500; + cursor: pointer; + border-radius: var(--radius-sm); + transition: background var(--transition-fast), transform var(--transition-fast); + margin-block-start: var(--space-xs); +} + +.form-submit:hover, +.form-submit:focus { + background: var(--color-accent-light); + transform: translateY(-2px); +} + +.form-submit:disabled { + opacity: 0.7; + cursor: not-allowed; + transform: none; +} + +@media (max-width: 768px) { + .booking__container { + grid-template-columns: 1fr; + } + + .booking__form { + grid-template-columns: 1fr; + } + + .form-group--full { + grid-column: 1; + } +} + +/* Contact */ +.contact { + padding: var(--space-xl) var(--space-md); +} + +.contact__container { + max-width: 960px; + margin: 0 auto; + display: grid; + grid-template-columns: 1fr 1.2fr; + gap: var(--space-lg); + align-items: start; +} + +.contact__text { + color: var(--color-text-muted); + margin-block-end: var(--space-md); + font-size: 1rem; + max-width: 38ch; +} + +.contact__details { + display: flex; + flex-direction: column; + gap: var(--space-sm); +} + +.contact__item { + display: flex; + align-items: flex-start; + gap: var(--space-sm); +} + +.contact__item svg { + width: 20px; + height: 20px; + color: var(--color-accent); + flex-shrink: 0; + margin-block-start: 0.2rem; +} + +.contact__item a { + color: var(--color-text); + transition: color var(--transition-fast); +} + +.contact__item a:hover, +.contact__item a:focus { + color: var(--color-accent); +} + +.contact__hours { + display: flex; + flex-direction: column; + gap: 0.125rem; + color: var(--color-text-muted); + font-size: 0.9375rem; +} + +.contact__map { + border-radius: var(--radius-md); + overflow: hidden; + aspect-ratio: 4/3; + background: var(--color-surface); +} + +.contact__map iframe { + width: 100%; + height: 100%; + filter: grayscale(0.3) contrast(1.1); +} + +@media (max-width: 768px) { + .contact__container { + grid-template-columns: 1fr; + } + + .contact__map { + aspect-ratio: 16/9; + } +} + +/* Footer */ +.footer { + background: var(--color-surface); + padding: var(--space-lg) var(--space-md); + border-top: 1px solid var(--color-primary); +} + +.footer__container { + max-width: 1000px; + margin: 0 auto; + 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); + font-weight: 500; +} + +.footer__logo-mark { + width: 28px; + height: 28px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-accent); + color: var(--color-bg); + font-family: var(--font-body); + font-size: 1rem; + font-weight: 600; + border-radius: var(--radius-sm); +} + +.footer__nav { + display: flex; + gap: var(--space-md); + flex-wrap: wrap; + justify-content: center; +} + +.footer__nav a { + color: var(--color-text-muted); + font-size: 0.875rem; + transition: color var(--transition-fast); +} + +.footer__nav a:hover, +.footer__nav a:focus { + color: var(--color-accent); +} + +.footer__copyright { + color: var(--color-text-muted); + font-size: 0.8125rem; +} + +/* Reveal Animation */ +.reveal { + opacity: 0; + transform: translateY(20px); + transition: opacity 0.5s ease, transform 0.5s ease; +} + +.reveal--visible { + opacity: 1; + transform: translateY(0); +} + +/* Focus Visible */ +:focus-visible { + outline: 2px solid var(--color-accent); + outline-offset: 2px; +} + +:focus:not(:focus-visible) { + outline: none; +}