diff --git a/index.html b/index.html new file mode 100644 index 0000000..3c345c2 --- /dev/null +++ b/index.html @@ -0,0 +1,389 @@ + + + + + + אבי אינסטלציה | אינסטלטור בפתח תקווה 24/7 + + + + + + + + + + + + + +
+ +
+ +
+
+
+
+ + זמינים 24/7 +
+

+ בעיית + אינסטלציה? + אנחנו בדרך. +

+

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

+
+ + + 052-8234567 + + השאירו פרטים +
+

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

+
+
+
+ +
+ זמן הגעה ממוצע + 30-45 דקות +
+
+
+ +
+ הצעת מחיר + לפני תחילת העבודה +
+
+
+
+ +
+
+
+ מה אנחנו עושים +

שירותי אינסטלציה מקיפים

+
+
+
+ +
+

תיקונים דחופים 24/7

+

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

+
+ הכי מבוקש +
+
+ +
+

פתיחת סתימות

+

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

+
+
+
+ +
+

התקנות חדשות

+

התקנת כיורים, אסלות, מקלחות, ברזים, מכונות כביסה ומדיחי כלים. עבודה נקייה עם אחריות.

+
+
+
+ +
+

איתור נזילות

+

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

+
+
+
+ +
+

תיקון והחלפת צנרת

+

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

+
+
+
+
+
+ +
+
+
+
+ למה לבחור בנו +

אינסטלטור שאפשר לסמוך עליו

+
    +
  • + +
    + מגיעים מהר + זמן הגעה של 30-45 דקות בפתח תקווה והסביבה +
    +
    • +
  • + +
    + מחיר סגור מראש + הצעת מחיר לפני תחילת העבודה, בלי הפתעות +
    +
    • +
  • + +
    + עבודה נקייה + משאירים את הבית נקי בדיוק כמו שמצאנו +
    +
    • +
  • + +
    + אחריות על העבודה + אחריות מלאה על כל עבודה שאנחנו מבצעים +
    +
    • +
+
+
+
+ +

מורשה ומבוטח

+

בעל רישיון אינסטלטור מוסמך וביטוח מלא לכל עבודה

+
+
+
+
+
+ +
+
+
+
+ צרו קשר +

זקוקים לאינסטלטור?

+

+ למקרים דחופים — התקשרו ישירות.
+ לתיאום ביקור — מלאו את הטופס. +

+ + + + חייגו עכשיו + 052-8234567 + + +
+

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

+
+
+
+
+ + + +
+
+ + + +
+
+ + +
+
+ + +
+
+ מתי תרצו שנגיע? +
+ + + +
+
+ +

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

+
+
+
+
+
+ + + + + + + + + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..7fe4d2c --- /dev/null +++ b/script.js @@ -0,0 +1,196 @@ +(function() { + 'use strict'; + + const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + + // Header scroll effect + const header = document.querySelector('.site-header'); + + function handleHeaderScroll() { + if (window.scrollY > 50) { + header.classList.add('scrolled'); + } else { + header.classList.remove('scrolled'); + } + } + + window.addEventListener('scroll', handleHeaderScroll, { passive: true }); + + // Mobile navigation + const mobileToggle = document.querySelector('.mobile-toggle'); + const navLinks = document.querySelector('.nav-links'); + + function closeMobileNav() { + navLinks.classList.remove('open'); + mobileToggle.classList.remove('open'); + mobileToggle.setAttribute('aria-expanded', 'false'); + mobileToggle.setAttribute('aria-label', 'פתח תפריט ניווט'); + } + + function openMobileNav() { + navLinks.classList.add('open'); + mobileToggle.classList.add('open'); + mobileToggle.setAttribute('aria-expanded', 'true'); + mobileToggle.setAttribute('aria-label', 'סגור תפריט ניווט'); + } + + mobileToggle.addEventListener('click', function() { + const isOpen = navLinks.classList.contains('open'); + if (isOpen) { + closeMobileNav(); + } else { + openMobileNav(); + } + }); + + navLinks.querySelectorAll('a').forEach(function(link) { + link.addEventListener('click', closeMobileNav); + }); + + // Close mobile nav on escape + document.addEventListener('keydown', function(e) { + if (e.key === 'Escape' && navLinks.classList.contains('open')) { + closeMobileNav(); + mobileToggle.focus(); + } + }); + + // 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 headerOffset = 80; + const elementPosition = target.getBoundingClientRect().top; + const offsetPosition = elementPosition + window.scrollY - headerOffset; + + window.scrollTo({ + top: offsetPosition, + behavior: prefersReducedMotion ? 'auto' : 'smooth' + }); + + // Set focus to target for accessibility + target.setAttribute('tabindex', '-1'); + target.focus({ preventScroll: true }); + } + }); + }); + + // Contact form handling + const contactForm = document.getElementById('contactForm'); + const formSuccess = document.getElementById('formSuccess'); + const successClose = document.getElementById('successClose'); + const nameInput = document.getElementById('name'); + const phoneInput = document.getElementById('phone'); + const nameError = document.getElementById('nameError'); + const phoneError = document.getElementById('phoneError'); + + function validateName() { + const value = nameInput.value.trim(); + if (!value) { + nameInput.classList.add('error'); + nameError.textContent = 'נא להזין שם'; + return false; + } + nameInput.classList.remove('error'); + nameError.textContent = ''; + return true; + } + + function validatePhone() { + const value = phoneInput.value.replace(/\D/g, ''); + if (!value || value.length < 9) { + phoneInput.classList.add('error'); + phoneError.textContent = 'נא להזין מספר טלפון תקין'; + return false; + } + phoneInput.classList.remove('error'); + phoneError.textContent = ''; + return true; + } + + nameInput.addEventListener('blur', validateName); + phoneInput.addEventListener('blur', validatePhone); + + contactForm.addEventListener('submit', function(e) { + e.preventDefault(); + + const isNameValid = validateName(); + const isPhoneValid = validatePhone(); + + if (!isNameValid || !isPhoneValid) { + if (!isNameValid) { + nameInput.focus(); + } else { + phoneInput.focus(); + } + return; + } + + const submitBtn = contactForm.querySelector('.btn-submit'); + const originalText = submitBtn.innerHTML; + submitBtn.innerHTML = 'שולח...'; + submitBtn.disabled = true; + + // Simulate form submission + setTimeout(function() { + submitBtn.innerHTML = originalText; + submitBtn.disabled = false; + formSuccess.hidden = false; + contactForm.reset(); + + successClose.focus(); + }, 1200); + }); + + function closeSuccessModal() { + formSuccess.hidden = true; + } + + successClose.addEventListener('click', closeSuccessModal); + + formSuccess.addEventListener('click', function(e) { + if (e.target === formSuccess) { + closeSuccessModal(); + } + }); + + document.addEventListener('keydown', function(e) { + if (e.key === 'Escape' && !formSuccess.hidden) { + closeSuccessModal(); + } + }); + + // Phone number formatting + phoneInput.addEventListener('input', function(e) { + let value = e.target.value.replace(/\D/g, ''); + + if (value.length > 10) { + value = value.slice(0, 10); + } + + if (value.length > 3 && value.length <= 6) { + value = value.slice(0, 3) + '-' + value.slice(3); + } else if (value.length > 6) { + value = value.slice(0, 3) + '-' + value.slice(3, 6) + '-' + value.slice(6); + } + + e.target.value = value; + }); + + // Keyboard navigation detection + document.body.addEventListener('keydown', function(e) { + if (e.key === 'Tab') { + document.body.classList.add('keyboard-nav'); + } + }); + + document.body.addEventListener('mousedown', function() { + document.body.classList.remove('keyboard-nav'); + }); + +})(); diff --git a/style.css b/style.css new file mode 100644 index 0000000..508e3ba --- /dev/null +++ b/style.css @@ -0,0 +1,1147 @@ +:root { + --bg: #f8fafc; + --bg-elevated: #ffffff; + --bg-card: #ffffff; + --bg-dark: #1a365d; + --text: #1e293b; + --text-dim: #64748b; + --accent: #059669; + --accent-hover: #047857; + --accent-light: #d1fae5; + --accent-dark: #047857; + --urgent: #dc2626; + --urgent-light: #fee2e2; + --success: #16a34a; + --border: #e2e8f0; + + --font-display: 'Rubik', sans-serif; + --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; + --radius-full: 9999px; + + --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); + --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); + --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); + + --transition: 0.2s ease; +} + +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} + +*, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; +} + +@media (prefers-reduced-motion: reduce) { + html { + scroll-behavior: auto; + } +} + +body { + font-family: var(--font-body); + font-weight: 400; + font-size: 1rem; + line-height: 1.6; + color: var(--text); + background: var(--bg); +} + +.container { + max-width: 1120px; + margin-inline: auto; + padding-inline: var(--space-md); +} + +h1, h2, h3, h4 { + font-family: var(--font-display); + font-weight: 600; + line-height: 1.2; +} + +a { + color: inherit; + text-decoration: none; +} + +ul, fieldset { + list-style: none; + border: none; +} + +img, svg { + display: block; + max-width: 100%; +} + +button, input, textarea { + font: inherit; + color: inherit; + border: none; + background: none; +} + +button { + cursor: pointer; +} + +/* Skip link for accessibility */ +.skip-link { + position: absolute; + top: -100%; + inset-inline-end: var(--space-sm); + padding: var(--space-xs) var(--space-sm); + background: var(--bg-dark); + color: #fff; + border-radius: var(--radius-sm); + z-index: 999; + transition: top var(--transition); +} + +.skip-link:focus { + top: var(--space-sm); +} + +/* ==================== HEADER ==================== */ +.site-header { + position: fixed; + top: 0; + inset-inline: 0; + z-index: 100; + padding: var(--space-sm) 0; + background: var(--bg-elevated); + box-shadow: var(--shadow-sm); + transition: box-shadow var(--transition); +} + +.site-header.scrolled { + box-shadow: var(--shadow-md); +} + +.nav-container { + max-width: 1120px; + margin-inline: auto; + padding-inline: var(--space-md); + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-md); +} + +.logo { + display: flex; + align-items: center; + gap: var(--space-xs); + font-family: var(--font-display); + font-weight: 600; + font-size: 1.125rem; + color: var(--bg-dark); +} + +.logo-icon { + width: 36px; + height: 36px; + color: var(--accent); +} + +.nav-links { + display: flex; + align-items: center; + gap: var(--space-lg); +} + +.nav-links a { + font-weight: 500; + color: var(--text-dim); + transition: color var(--transition); +} + +.nav-links a:hover, +.nav-links a:focus { + color: var(--text); +} + +.nav-cta { + display: inline-flex; + align-items: center; + gap: var(--space-xs); + padding: var(--space-xs) var(--space-sm); + background: var(--accent); + color: #fff !important; + border-radius: var(--radius-md); + font-weight: 500; + transition: background var(--transition); +} + +.nav-cta:hover, +.nav-cta:focus { + background: var(--accent-hover); + color: #fff !important; +} + +.phone-icon { + width: 18px; + height: 18px; +} + +.mobile-phone-btn { + display: none; + width: 44px; + height: 44px; + align-items: center; + justify-content: center; + background: var(--accent); + color: #fff; + border-radius: var(--radius-md); +} + +.mobile-phone-btn svg { + width: 22px; + height: 22px; +} + +.mobile-toggle { + display: none; + flex-direction: column; + justify-content: center; + gap: 5px; + width: 44px; + height: 44px; + padding: 10px; +} + +.mobile-toggle span { + width: 100%; + height: 2px; + background: var(--text); + transition: transform var(--transition), opacity var(--transition); +} + +/* ==================== BUTTONS ==================== */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: var(--space-xs); + padding: 0.75rem 1.5rem; + border-radius: var(--radius-md); + font-family: var(--font-display); + font-weight: 500; + font-size: 1rem; + transition: all var(--transition); +} + +.btn:focus-visible { + outline: 3px solid var(--accent); + outline-offset: 2px; +} + +.btn-primary { + background: var(--accent); + color: #fff; +} + +.btn-primary:hover { + background: var(--accent-hover); +} + +.btn-large { + padding: 1rem 2rem; + font-size: 1.125rem; +} + +.btn-ghost { + border: 2px solid var(--border); + color: var(--text); +} + +.btn-ghost:hover { + border-color: var(--accent); + color: var(--accent); +} + +.btn-icon { + width: 20px; + height: 20px; +} + +/* ==================== HERO ==================== */ +.hero { + display: grid; + grid-template-columns: 1fr 1fr; + align-items: center; + gap: var(--space-xl); + min-height: 100vh; + min-height: 100dvh; + padding-block-start: calc(70px + var(--space-xl)); + padding-block-end: var(--space-xl); + padding-inline: var(--space-md); + max-width: 1120px; + margin-inline: auto; +} + +.hero-badge { + display: inline-flex; + align-items: center; + gap: var(--space-xs); + padding: var(--space-xs) var(--space-sm); + background: var(--bg-dark); + border-radius: var(--radius-full); + font-size: 0.875rem; + font-weight: 500; + color: #fff; + margin-block-end: var(--space-md); +} + +.badge-dot { + width: 8px; + height: 8px; + background: var(--accent); + border-radius: 50%; + animation: pulse 2s infinite; +} + +@keyframes pulse { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.5; } +} + +.hero-title { + font-size: clamp(2rem, 5vw, 3.5rem); + line-height: 1.1; + margin-block-end: var(--space-md); + color: var(--bg-dark); +} + +.title-line { + display: block; +} + +.title-accent { + color: var(--accent); +} + +.hero-subtitle { + font-size: 1.125rem; + color: var(--text-dim); + margin-block-end: var(--space-lg); + max-width: 480px; +} + +.hero-actions { + display: flex; + flex-wrap: wrap; + gap: var(--space-sm); + margin-block-end: var(--space-md); +} + +.hero-area { + font-size: 0.875rem; + color: var(--text-dim); +} + +.hero-visual { + display: flex; + flex-direction: column; + gap: var(--space-md); +} + +.hero-card { + display: flex; + align-items: center; + gap: var(--space-md); + padding: var(--space-md); + background: var(--bg-elevated); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-md); +} + +.hero-card-icon { + flex-shrink: 0; + width: 56px; + height: 56px; + display: flex; + align-items: center; + justify-content: center; + background: var(--accent-light); + border-radius: var(--radius-md); + color: var(--accent); +} + +.hero-card-icon svg { + width: 32px; + height: 32px; +} + +.hero-card-label { + display: block; + font-size: 0.875rem; + color: var(--text-dim); + margin-block-end: 2px; +} + +.hero-card-value { + font-family: var(--font-display); + font-weight: 600; + font-size: 1.125rem; + color: var(--bg-dark); +} + +/* ==================== SECTIONS ==================== */ +.section-header { + text-align: center; + margin-block-end: var(--space-xl); +} + +.section-tag { + display: inline-block; + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.1em; + color: var(--accent); + margin-block-end: var(--space-xs); +} + +.section-title { + font-size: clamp(1.5rem, 3vw, 2rem); + color: var(--bg-dark); +} + +/* ==================== SERVICES ==================== */ +.services { + padding-block: var(--space-2xl); + background: var(--bg); +} + +.services-grid { + display: grid; + grid-template-columns: repeat(12, 1fr); + gap: var(--space-md); +} + +.service-card { + position: relative; + display: flex; + flex-direction: column; + gap: var(--space-sm); + padding: var(--space-lg); + background: var(--bg-elevated); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-sm); + transition: box-shadow var(--transition), transform var(--transition); + grid-column: span 4; +} + +.service-card:hover { + box-shadow: var(--shadow-md); + transform: translateY(-2px); +} + +.service-card-primary { + grid-column: span 6; + border-color: var(--accent); + border-width: 2px; + background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--accent-light) 100%); +} + +.service-card-primary .service-icon { + width: 56px; + height: 56px; +} + +.service-card-primary h3 { + font-size: 1.25rem; +} + +.service-icon { + width: 48px; + height: 48px; + color: var(--accent); +} + +.service-card h3 { + font-size: 1.125rem; + color: var(--bg-dark); +} + +.service-card p { + color: var(--text-dim); + font-size: 0.9375rem; + line-height: 1.6; +} + +.service-badge { + position: absolute; + top: var(--space-sm); + inset-inline-start: var(--space-sm); + padding: 4px 10px; + background: var(--accent); + color: #fff; + font-size: 0.75rem; + font-weight: 500; + border-radius: var(--radius-full); +} + +/* ==================== WHY US ==================== */ +.why-us { + padding-block: var(--space-2xl); + background: var(--bg-elevated); + border-block: 1px solid var(--border); +} + +.why-us-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-xl); + align-items: center; +} + +.benefits-list { + margin-block-start: var(--space-lg); + display: flex; + flex-direction: column; + gap: var(--space-md); +} + +.benefit-item { + display: flex; + align-items: flex-start; + gap: var(--space-sm); +} + +.benefit-icon { + flex-shrink: 0; + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + background: var(--accent-light); + border-radius: var(--radius-md); + color: var(--accent); +} + +.benefit-icon svg { + width: 20px; + height: 20px; +} + +.benefit-text strong { + display: block; + font-weight: 600; + color: var(--bg-dark); + margin-block-end: 2px; +} + +.benefit-text span { + color: var(--text-dim); + font-size: 0.9375rem; +} + +.credentials-card { + padding: var(--space-xl); + background: var(--bg-dark); + border-radius: var(--radius-lg); + color: #fff; + text-align: center; +} + +.credentials-icon { + width: 72px; + height: 72px; + margin-inline: auto; + margin-block-end: var(--space-md); + color: var(--accent); +} + +.credentials-icon svg { + width: 100%; + height: 100%; +} + +.credentials-card h3 { + font-size: 1.375rem; + margin-block-end: var(--space-xs); +} + +.credentials-card p { + font-size: 1rem; + opacity: 0.85; + line-height: 1.5; +} + +/* ==================== CONTACT ==================== */ +.contact { + padding-block: var(--space-2xl); + background: var(--bg); +} + +.contact-wrapper { + display: grid; + grid-template-columns: 1fr 1.1fr; + gap: var(--space-xl); + align-items: start; +} + +.contact-desc { + color: var(--text-dim); + margin-block-start: var(--space-sm); +} + +.contact-phone-block { + display: flex; + align-items: center; + gap: var(--space-sm); + margin-block: var(--space-lg); + padding: var(--space-md); + background: var(--accent); + border-radius: var(--radius-lg); + color: #fff; + transition: background var(--transition); +} + +.contact-phone-block:hover { + background: var(--accent-hover); +} + +.contact-phone-icon { + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + background: rgba(255,255,255,0.2); + border-radius: var(--radius-md); +} + +.contact-phone-icon svg { + width: 24px; + height: 24px; +} + +.contact-phone-label { + display: block; + font-size: 0.875rem; + opacity: 0.9; +} + +.contact-phone-number { + display: inline-block; + font-family: var(--font-display); + font-weight: 600; + font-size: 1.5rem; + direction: ltr; + unicode-bidi: isolate; +} + +.contact-details { + font-size: 0.9375rem; + color: var(--text-dim); +} + +.contact-details strong { + color: var(--text); +} + +.contact-form { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-md); + padding: var(--space-lg); + background: var(--bg-elevated); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-md); +} + +.form-group { + display: flex; + flex-direction: column; + gap: var(--space-xs); +} + +.form-group-full { + grid-column: 1 / -1; +} + +.contact-form label, +.urgency-legend { + font-size: 0.875rem; + font-weight: 500; + color: var(--text); +} + +.required { + color: var(--urgent); +} + +.contact-form input, +.contact-form textarea { + padding: 0.75rem 1rem; + background: var(--bg); + border: 1px solid var(--border); + border-radius: var(--radius-md); + transition: border-color var(--transition), box-shadow var(--transition); +} + +.contact-form input:focus, +.contact-form textarea:focus { + outline: none; + border-color: var(--accent); + box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15); +} + +.contact-form input.error, +.contact-form textarea.error { + border-color: var(--urgent); +} + +.form-error { + font-size: 0.8125rem; + color: var(--urgent); + min-height: 1.25rem; +} + +.contact-form textarea { + resize: vertical; + min-height: 80px; +} + +.urgency-fieldset { + padding: 0; +} + +.urgency-legend { + margin-block-end: var(--space-xs); +} + +.urgency-options { + display: flex; + gap: var(--space-sm); +} + +.urgency-option { + flex: 1; + cursor: pointer; +} + +.urgency-option input { + position: absolute; + opacity: 0; + pointer-events: none; +} + +.urgency-btn { + display: block; + text-align: center; + padding: 0.75rem; + background: var(--bg); + border: 1px solid var(--border); + border-radius: var(--radius-md); + font-size: 0.875rem; + font-weight: 500; + transition: all var(--transition); +} + +.urgency-option input:checked + .urgency-btn { + border-color: var(--accent); + background: var(--accent-light); + color: var(--accent-dark); +} + +.urgency-option input:checked + .urgency-urgent { + border-color: var(--urgent); + background: var(--urgent-light); + color: var(--urgent); +} + +.urgency-option input:focus-visible + .urgency-btn { + outline: 2px solid var(--accent); + outline-offset: 2px; +} + +.btn-submit { + grid-column: 1 / -1; + padding: 1rem; + font-size: 1.0625rem; +} + +.form-note { + grid-column: 1 / -1; + text-align: center; + font-size: 0.8125rem; + color: var(--text-dim); +} + +/* ==================== FOOTER ==================== */ +.site-footer { + padding-block: var(--space-lg); + background: var(--bg-dark); + color: #fff; +} + +.footer-content { + display: flex; + align-items: center; + justify-content: space-between; + padding-block-end: var(--space-md); + border-block-end: 1px solid rgba(255,255,255,0.1); + margin-block-end: var(--space-md); +} + +.footer-brand { + display: flex; + align-items: center; + gap: var(--space-sm); +} + +.footer-logo { + width: 36px; + height: 36px; + color: var(--accent); +} + +.footer-name { + display: block; + font-family: var(--font-display); + font-weight: 600; +} + +.footer-location { + display: block; + font-size: 0.875rem; + opacity: 0.7; +} + +.footer-contact { + text-align: end; +} + +.footer-phone { + display: inline-block; + font-family: var(--font-display); + font-weight: 600; + font-size: 1.25rem; + color: var(--accent); + direction: ltr; + unicode-bidi: isolate; +} + +.footer-phone:hover { + text-decoration: underline; +} + +.footer-hours { + display: block; + font-size: 0.875rem; + opacity: 0.7; +} + +.footer-copy { + font-size: 0.8125rem; + opacity: 0.6; + text-align: center; +} + +/* ==================== SUCCESS MODAL ==================== */ +.form-success { + position: fixed; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + padding: var(--space-md); + background: rgba(0, 0, 0, 0.5); + z-index: 200; + opacity: 0; + visibility: hidden; + transition: all var(--transition); +} + +.form-success:not([hidden]) { + opacity: 1; + visibility: visible; +} + +.success-content { + text-align: center; + padding: var(--space-xl); + background: var(--bg-elevated); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-lg); + max-width: 400px; + width: 100%; +} + +.success-icon { + width: 64px; + height: 64px; + color: var(--success); + margin-inline: auto; + margin-block-end: var(--space-md); +} + +.success-content h3 { + color: var(--success); + margin-block-end: var(--space-xs); +} + +.success-content p { + color: var(--text-dim); + margin-block-end: var(--space-sm); +} + +.success-urgent { + font-weight: 500; + color: var(--text); +} + +.success-urgent a { + color: var(--accent); + font-weight: 600; + text-decoration: underline; +} + +/* ==================== FLOATING CTA ==================== */ +.floating-cta { + position: fixed; + bottom: var(--space-md); + inset-inline-end: var(--space-md); + width: 56px; + height: 56px; + display: flex; + align-items: center; + justify-content: center; + background: var(--accent); + color: #fff; + border-radius: 50%; + box-shadow: var(--shadow-lg); + z-index: 90; + transition: transform var(--transition), background var(--transition); +} + +.floating-cta:hover { + background: var(--accent-hover); + transform: scale(1.1); +} + +.floating-cta svg { + width: 26px; + height: 26px; +} + +/* ==================== RESPONSIVE ==================== */ +@media (max-width: 1024px) { + .services-grid { + grid-template-columns: repeat(6, 1fr); + } + + .service-card { + grid-column: span 3; + } + + .service-card-primary { + grid-column: span 6; + } +} + +@media (max-width: 900px) { + .hero { + grid-template-columns: 1fr; + text-align: center; + padding-block-start: calc(70px + var(--space-lg)); + min-height: auto; + } + + .hero-content { + order: 1; + } + + .hero-visual { + order: 2; + flex-direction: column; + align-items: center; + } + + .hero-card { + width: 100%; + max-width: 360px; + } + + .hero-subtitle { + margin-inline: auto; + } + + .hero-actions { + justify-content: center; + } + + .why-us-grid { + grid-template-columns: 1fr; + gap: var(--space-lg); + } + + .why-us-visual { + order: -1; + } + + .credentials-card { + max-width: 400px; + margin-inline: auto; + } + + .contact-wrapper { + grid-template-columns: 1fr; + } + + .contact-info { + text-align: center; + } + + .contact-phone-block { + justify-content: center; + max-width: 320px; + margin-inline: auto; + } + + .services-grid { + grid-template-columns: 1fr; + } + + .service-card, + .service-card-primary { + grid-column: span 1; + } +} + +@media (max-width: 768px) { + :root { + --space-xl: 2.5rem; + --space-2xl: 3.5rem; + } + + .nav-links { + position: fixed; + top: 0; + inset-inline-start: 0; + bottom: 0; + width: 280px; + flex-direction: column; + justify-content: center; + gap: var(--space-lg); + padding: var(--space-xl); + background: var(--bg-elevated); + box-shadow: var(--shadow-lg); + transform: translateX(-100%); + transition: transform var(--transition); + } + + [dir="rtl"] .nav-links { + transform: translateX(100%); + } + + .nav-links.open { + transform: translateX(0); + } + + .nav-links .nav-phone { + display: none; + } + + .mobile-phone-btn { + display: flex; + } + + .mobile-toggle { + display: flex; + } + + .mobile-toggle.open span:nth-child(1) { + transform: translateY(7px) rotate(45deg); + } + + .mobile-toggle.open span:nth-child(2) { + opacity: 0; + } + + .mobile-toggle.open span:nth-child(3) { + transform: translateY(-7px) rotate(-45deg); + } + + .contact-form { + grid-template-columns: 1fr; + padding: var(--space-md); + } + + .urgency-options { + flex-direction: column; + } + + .footer-content { + flex-direction: column; + gap: var(--space-md); + text-align: center; + } + + .footer-contact { + text-align: center; + } +} + +@media (max-width: 480px) { + .hero-title { + font-size: 1.75rem; + } + + .hero-actions { + flex-direction: column; + width: 100%; + } + + .btn { + width: 100%; + } + + .hero-visual { + flex-direction: column; + } + + .hero-card { + max-width: 100%; + } +} + +/* Focus states for keyboard navigation */ +body.keyboard-nav *:focus { + outline: 3px solid var(--accent); + outline-offset: 2px; +} + +body:not(.keyboard-nav) *:focus { + outline: none; +}