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

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

+

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

+
+ + + התקשרו עכשיו + + השאירו פרטים +
+
+ +
+ +
+
+ מה אנחנו עושים +

שירותים מקצועיים

+
+
+
+
+ +
+
+

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

+

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

+
    +
  • פריצת צנרת
    • +
  • סתימות קשות
    • +
  • הצפות
    • +
  • תקלות דוד שמש
    • +
+
+
+
+
+ +
+

התקנות אינסטלציה

+

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

+
    +
  • כיורים וברזים
    • +
  • אסלות ומקלחונים
    • +
  • מכונות כביסה
    • +
  • מדיחי כלים
    • +
+
+
+
+ +
+

שיפוצים ושדרוגים

+

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

+
    +
  • הנחת צנרת חדשה
    • +
  • העברת נקודות מים
    • +
  • שדרוג מערכות ישנות
    • +
  • אטימה ובידוד
    • +
+
+
+
+ +
+

איתור נזילות

+

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

+
    +
  • מכשירי האזנה
    • +
  • מצלמות תרמיות
    • +
  • בדיקת לחץ
    • +
  • דוח מפורט
    • +
+
+
+
+ +
+
+
+ 0 + שנות ניסיון +
+
+ 0 + + + קריאות שירות +
+
+ 24/7 + זמינות מלאה +
+
+ 0 + דק׳ + זמן הגעה ממוצע +
+
+
+ +
+
+
+ היכן אנחנו פועלים +

אזורי השירות

+

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

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

שכונות נוספות באזור השירות:

+
    +
  • מרכז העיר
    • +
  • עמישב
    • +
  • גני הדר
    • +
  • רמת ורבר
    • +
  • כפר גנים ב׳
    • +
  • כפר גנים ג׳
    • +
  • ביהח״ר
    • +
  • קרול
    • +
  • מחנה יהודה
    • +
  • בן גוריון
    • +
+
+
+ +
+
+
+ בואו נדבר +

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

+

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

+ + + + 052-555-1234 + + +
+
+ + הצעת מחיר ללא התחייבות +
+
+ + מענה תוך שעה בימי עבודה +
+
+ + אחריות על כל העבודות +
+
+
+ +
+
+ + + + + נא להזין שם + +
+
+ + + + + נא להזין מספר טלפון תקין + +
+
+ + +
+
+ + + + + נא לבחור סוג שירות + +
+
+ + +
+ +

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

+
+
+
+
+ + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..d95e977 --- /dev/null +++ b/script.js @@ -0,0 +1,221 @@ +(function() { + 'use strict'; + + // Reduced motion check + const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + + // Header scroll effect + const header = document.querySelector('.site-header'); + + function handleScroll() { + const currentScroll = window.pageYOffset; + + if (currentScroll > 50) { + header.classList.add('scrolled'); + } else { + header.classList.remove('scrolled'); + } + } + + window.addEventListener('scroll', handleScroll, { passive: true }); + + // Mobile menu toggle + const mobileToggle = document.querySelector('.mobile-toggle'); + const navLinks = document.querySelector('.nav-links'); + const navCta = document.querySelector('.nav-cta'); + + if (mobileToggle && navLinks) { + mobileToggle.addEventListener('click', function() { + const isExpanded = this.getAttribute('aria-expanded') === 'true'; + this.setAttribute('aria-expanded', !isExpanded); + navLinks.classList.toggle('active'); + if (navCta) { + navCta.classList.toggle('active'); + } + }); + + // Close menu when clicking a link + navLinks.querySelectorAll('a').forEach(link => { + link.addEventListener('click', () => { + mobileToggle.setAttribute('aria-expanded', 'false'); + navLinks.classList.remove('active'); + if (navCta) { + navCta.classList.remove('active'); + } + }); + }); + } + + // Intersection Observer for animations + if (!prefersReducedMotion) { + const observerOptions = { + root: null, + rootMargin: '0px 0px -80px 0px', + threshold: 0.1 + }; + + const animateOnScroll = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('visible'); + + // Stagger children if it's a grid + if (entry.target.classList.contains('services-grid')) { + const cards = entry.target.querySelectorAll('.service-card'); + cards.forEach((card, index) => { + setTimeout(() => { + card.classList.add('visible'); + }, index * 100); + }); + } + } + }); + }, observerOptions); + + // Elements to animate + document.querySelectorAll('.service-card, .areas-map, .contact-info, .contact-form').forEach(el => { + animateOnScroll.observe(el); + }); + + // Services grid + const servicesGrid = document.querySelector('.services-grid'); + if (servicesGrid) { + animateOnScroll.observe(servicesGrid); + } + } else { + // Show everything immediately if reduced motion is preferred + document.querySelectorAll('.service-card, .areas-map, .contact-info, .contact-form').forEach(el => { + el.classList.add('visible'); + }); + } + + // Counter animation for stats + function animateCounter(element, target, duration = 2000) { + if (prefersReducedMotion) { + element.textContent = target.toLocaleString('he-IL'); + return; + } + + const start = 0; + const startTime = performance.now(); + + function update(currentTime) { + const elapsed = currentTime - startTime; + const progress = Math.min(elapsed / duration, 1); + const easeOut = 1 - Math.pow(1 - progress, 3); + const current = Math.floor(start + (target - start) * easeOut); + + element.textContent = current.toLocaleString('he-IL'); + + if (progress < 1) { + requestAnimationFrame(update); + } + } + + requestAnimationFrame(update); + } + + // Observe stats section + const statsSection = document.querySelector('.stats'); + if (statsSection) { + const statsObserver = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + const counters = entry.target.querySelectorAll('.stat-number[data-target]'); + counters.forEach(counter => { + const target = parseInt(counter.dataset.target, 10); + animateCounter(counter, target); + }); + statsObserver.unobserve(entry.target); + } + }); + }, { threshold: 0.5 }); + + statsObserver.observe(statsSection); + } + + // Form handling + const contactForm = document.getElementById('contactForm'); + if (contactForm) { + contactForm.addEventListener('submit', function(e) { + e.preventDefault(); + + // Reset errors + this.querySelectorAll('.form-group').forEach(group => { + group.classList.remove('error'); + }); + + // Validate + let isValid = true; + const name = this.querySelector('#name'); + const phone = this.querySelector('#phone'); + const service = this.querySelector('#service'); + + if (!name.value.trim()) { + name.closest('.form-group').classList.add('error'); + isValid = false; + } + + if (!phone.value.trim() || !/^[0-9\-\+\s]{9,}$/.test(phone.value)) { + phone.closest('.form-group').classList.add('error'); + isValid = false; + } + + if (!service.value) { + service.closest('.form-group').classList.add('error'); + isValid = false; + } + + if (!isValid) { + // Focus first error field + const firstError = this.querySelector('.form-group.error input, .form-group.error select'); + if (firstError) { + firstError.focus(); + } + return; + } + + // Submit animation + const submitBtn = this.querySelector('.btn-submit'); + submitBtn.classList.add('loading'); + submitBtn.disabled = true; + + // Simulate submission (demo only) + setTimeout(() => { + submitBtn.classList.remove('loading'); + submitBtn.classList.add('success'); + + // Reset form after delay + setTimeout(() => { + contactForm.reset(); + submitBtn.classList.remove('success'); + submitBtn.disabled = false; + }, 2000); + }, 1500); + }); + + // Remove error state on input + contactForm.querySelectorAll('input, select, textarea').forEach(input => { + input.addEventListener('input', function() { + this.closest('.form-group').classList.remove('error'); + }); + }); + } + + // 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 ? 'auto' : 'smooth' + }); + } + }); + }); + +})(); diff --git a/style.css b/style.css new file mode 100644 index 0000000..c2e273c --- /dev/null +++ b/style.css @@ -0,0 +1,1127 @@ +:root { + --bg-dark: #0a1628; + --bg-card: #0f2137; + --bg-card-hover: #142a45; + --accent: #00d4ff; + --accent-dim: #0099cc; + --water: #4fc3f7; + --text: #e8f4f8; + --text-mid: #a8c0d0; + --text-dim: #7a94a8; + --error: #ff6b6b; + --success: #4ade80; + --font-display: 'Rubik', sans-serif; + --font-body: 'Heebo', sans-serif; + --ease-out: cubic-bezier(0.16, 1, 0.3, 1); + --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); + --section-padding: 5rem; +} + +*, +*::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-weight: 400; + background: var(--bg-dark); + color: var(--text); + line-height: 1.7; + overflow-x: hidden; + -webkit-font-smoothing: antialiased; +} + +.grain-overlay { + position: fixed; + inset: 0; + pointer-events: none; + z-index: 9999; + opacity: 0.03; + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); +} + +/* Typography */ +h1, h2, h3, h4 { + font-family: var(--font-display); + font-weight: 600; + line-height: 1.2; +} + +h1 { + font-size: clamp(2.5rem, 8vw, 4.5rem); + letter-spacing: -0.02em; +} + +h2 { + font-size: clamp(1.875rem, 5vw, 2.75rem); + letter-spacing: -0.01em; +} + +h3 { + font-size: clamp(1.125rem, 2.5vw, 1.375rem); +} + +a { + color: inherit; + text-decoration: none; +} + +/* Header */ +.site-header { + position: fixed; + top: 0; + inset-inline: 0; + z-index: 1000; + padding: 1rem; + transition: background 0.3s var(--ease-out), backdrop-filter 0.3s var(--ease-out); +} + +.site-header.scrolled { + background: rgba(10, 22, 40, 0.9); + backdrop-filter: blur(20px); +} + +.nav-container { + max-width: 1200px; + margin: 0 auto; + display: flex; + align-items: center; + gap: 2rem; +} + +.logo { + display: flex; + align-items: center; + gap: 0.75rem; + font-family: var(--font-display); + font-weight: 500; + font-size: 1.125rem; +} + +.logo-icon { + width: 40px; + height: 40px; +} + +.nav-links { + display: flex; + list-style: none; + gap: 2rem; + margin-inline-start: auto; +} + +.nav-links a { + position: relative; + color: var(--text-mid); + transition: color 0.2s; + font-weight: 400; +} + +.nav-links a::after { + content: ''; + position: absolute; + bottom: -4px; + inset-inline: 0; + height: 2px; + background: var(--accent); + transform: scaleX(0); + transition: transform 0.3s var(--ease-out); +} + +.nav-links a:hover, +.nav-links a:focus { + color: var(--text); +} + +.nav-links a:hover::after, +.nav-links a:focus::after { + transform: scaleX(1); +} + +.nav-cta { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.625rem 1.25rem; + background: var(--accent); + color: var(--bg-dark); + font-family: var(--font-display); + font-weight: 500; + border-radius: 8px; + transition: transform 0.2s var(--ease-bounce), box-shadow 0.2s; +} + +.nav-cta:hover { + transform: translateY(-2px); + box-shadow: 0 8px 24px rgba(0, 212, 255, 0.3); +} + +.nav-phone svg { + flex-shrink: 0; +} + +.mobile-toggle { + display: none; + flex-direction: column; + gap: 5px; + background: none; + border: none; + cursor: pointer; + padding: 8px; +} + +.mobile-toggle span { + display: block; + width: 24px; + height: 2px; + background: var(--text); + transition: transform 0.3s, opacity 0.3s; +} + +@media (max-width: 768px) { + .nav-links { + display: none; + } + + .nav-cta.desktop-only { + display: none; + } + + .mobile-toggle { + display: flex; + margin-inline-start: auto; + } + + .mobile-toggle[aria-expanded="true"] span:nth-child(1) { + transform: rotate(45deg) translate(5px, 5px); + } + + .mobile-toggle[aria-expanded="true"] span:nth-child(2) { + opacity: 0; + } + + .mobile-toggle[aria-expanded="true"] span:nth-child(3) { + transform: rotate(-45deg) translate(5px, -5px); + } + + .nav-links.active { + display: flex; + flex-direction: column; + position: absolute; + top: 100%; + inset-inline: 1rem; + background: var(--bg-card); + padding: 1.5rem; + border-radius: 12px; + gap: 1rem; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); + } + + .nav-links.active .mobile-cta { + display: flex; + justify-content: center; + margin-top: 0.5rem; + padding: 0.875rem 1.5rem; + background: var(--accent); + color: var(--bg-dark); + font-family: var(--font-display); + font-weight: 500; + border-radius: 8px; + text-align: center; + } +} + +/* Buttons */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + padding: 1rem 2rem; + font-family: var(--font-display); + font-weight: 500; + font-size: 1rem; + border-radius: 12px; + border: none; + cursor: pointer; + transition: transform 0.2s var(--ease-bounce), box-shadow 0.2s, background 0.2s; +} + +.btn svg { + width: 20px; + height: 20px; +} + +.btn-primary { + background: var(--accent); + color: var(--bg-dark); +} + +.btn-primary:hover, +.btn-primary:focus { + transform: translateY(-3px); + box-shadow: 0 12px 32px rgba(0, 212, 255, 0.4); +} + +.btn-ghost { + background: transparent; + color: var(--text); + border: 2px solid var(--text-mid); +} + +.btn-ghost:hover, +.btn-ghost:focus { + border-color: var(--accent); + color: var(--accent); +} + +/* Hero Section */ +.hero { + min-height: 100vh; + display: grid; + grid-template-columns: 1fr 1fr; + align-items: center; + gap: 4rem; + padding: 7rem 2rem var(--section-padding); + max-width: 1400px; + margin: 0 auto; +} + +.hero-content { + opacity: 0; + transform: translateY(40px); + animation: fadeUp 0.8s var(--ease-out) 0.2s forwards; +} + +@keyframes fadeUp { + to { + opacity: 1; + transform: translateY(0); + } +} + +.hero-badge { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 1rem; + background: rgba(0, 212, 255, 0.1); + border: 1px solid rgba(0, 212, 255, 0.3); + border-radius: 50px; + color: var(--accent); + font-size: 0.875rem; + font-weight: 500; + margin-bottom: 1.5rem; +} + +.pulse { + width: 8px; + height: 8px; + background: var(--accent); + border-radius: 50%; + animation: pulse 2s ease-in-out infinite; +} + +@keyframes pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.5; transform: scale(1.5); } +} + +.hero-line { + display: block; +} + +.hero-accent { + color: var(--accent); +} + +.hero-sub { + font-size: 1.125rem; + color: var(--text); + margin: 1.5rem 0 2.5rem; + max-width: 440px; + line-height: 1.8; +} + +.hero-actions { + display: flex; + flex-wrap: wrap; + gap: 1rem; +} + +.hero-visual { + position: relative; + height: 400px; + opacity: 0; + animation: fadeUp 0.8s var(--ease-out) 0.5s forwards; +} + +.pipe-system { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; +} + +.pipes-svg { + width: 100%; + height: 100%; + max-width: 400px; +} + +.pipe { + stroke-dasharray: 1000; + stroke-dashoffset: 1000; + animation: drawPipe 2s var(--ease-out) forwards; +} + +.pipe-1 { animation-delay: 0.5s; } +.pipe-2 { animation-delay: 1s; } +.pipe-3 { animation-delay: 1.5s; } + +@keyframes drawPipe { + to { stroke-dashoffset: 0; } +} + +.joint { + opacity: 0; + animation: popIn 0.3s var(--ease-bounce) forwards; +} + +.joint:nth-child(4) { animation-delay: 1.2s; } +.joint:nth-child(5) { animation-delay: 1.7s; } +.joint:nth-child(6) { animation-delay: 2.2s; } + +@keyframes popIn { + from { opacity: 0; transform: scale(0); } + to { opacity: 1; transform: scale(1); } +} + +.drop { + opacity: 0; +} + +.drop-1 { + animation: flowDrop1 3s ease-in-out 2.5s infinite; +} + +.drop-2 { + animation: flowDrop2 3.5s ease-in-out 3s infinite; +} + +.drop-3 { + animation: flowDrop3 4s ease-in-out 3.5s infinite; +} + +@keyframes flowDrop1 { + 0% { opacity: 0; cx: 50; cy: 200; } + 10% { opacity: 1; } + 50% { cx: 150; cy: 200; } + 90% { opacity: 1; } + 100% { opacity: 0; cx: 150; cy: 100; } +} + +@keyframes flowDrop2 { + 0% { opacity: 0; cx: 250; cy: 100; } + 10% { opacity: 1; } + 50% { cx: 250; cy: 200; } + 90% { opacity: 1; } + 100% { opacity: 0; cx: 350; cy: 200; } +} + +@keyframes flowDrop3 { + 0% { opacity: 0; cx: 150; cy: 200; } + 10% { opacity: 1; } + 50% { cx: 150; cy: 300; } + 90% { opacity: 1; } + 100% { opacity: 0; cx: 300; cy: 300; } +} + +@media (max-width: 900px) { + .hero { + grid-template-columns: 1fr; + text-align: center; + padding-top: 6rem; + } + + .hero-sub { + margin-inline: auto; + } + + .hero-actions { + justify-content: center; + } + + .hero-visual { + height: 280px; + order: -1; + } +} + +/* Section common */ +.section-header { + text-align: center; + margin-bottom: 3.5rem; +} + +.section-tag { + display: inline-block; + padding: 0.375rem 1rem; + background: rgba(0, 212, 255, 0.1); + color: var(--accent); + font-size: 0.875rem; + font-weight: 500; + border-radius: 50px; + margin-bottom: 1rem; +} + +.section-header p { + color: var(--text); + max-width: 560px; + margin: 1rem auto 0; + font-size: 1.0625rem; +} + +/* Services */ +.services { + padding: var(--section-padding) 2rem; + max-width: 1200px; + margin: 0 auto; +} + +.services-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1.5rem; +} + +.service-card { + background: var(--bg-card); + border-radius: 20px; + padding: 2rem; + transition: transform 0.3s var(--ease-out), box-shadow 0.3s, opacity 0.5s var(--ease-out); + opacity: 0; + transform: translateY(30px); +} + +.service-card.visible { + opacity: 1; + transform: translateY(0); +} + +.service-card:hover { + transform: translateY(-8px); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); +} + +.service-card.visible:hover { + transform: translateY(-8px); +} + +.service-urgent { + background: linear-gradient(135deg, var(--bg-card) 0%, rgba(0, 212, 255, 0.1) 100%); + border: 1px solid rgba(0, 212, 255, 0.2); + grid-column: span 2; +} + +@media (min-width: 701px) { + .service-urgent { + display: flex; + gap: 2rem; + } + + .service-urgent .service-icon { + flex-shrink: 0; + } + + .service-urgent .service-content { + flex: 1; + } +} + +@media (max-width: 700px) { + .services-grid { + grid-template-columns: 1fr; + } + + .service-urgent { + grid-column: span 1; + } +} + +.service-icon { + width: 64px; + height: 64px; + margin-bottom: 1.5rem; + color: var(--accent); +} + +.service-card h3 { + margin-bottom: 0.75rem; +} + +.service-card p { + color: var(--text); + margin-bottom: 1.5rem; + font-size: 0.9375rem; +} + +.service-list { + list-style: none; + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} + +.service-list li { + padding: 0.375rem 0.75rem; + background: rgba(255, 255, 255, 0.05); + border-radius: 6px; + font-size: 0.875rem; + color: var(--text); + transition: background 0.2s, color 0.2s; +} + +.service-list li:hover, +.service-list li:focus-within { + background: rgba(0, 212, 255, 0.15); + color: var(--accent); +} + +/* Stats */ +.stats { + padding: 3.5rem 2rem; + background: linear-gradient(135deg, rgba(0, 212, 255, 0.05) 0%, transparent 100%); + border-top: 1px solid rgba(0, 212, 255, 0.1); + border-bottom: 1px solid rgba(0, 212, 255, 0.1); +} + +.stats-inner { + max-width: 900px; + margin: 0 auto; + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 2rem; +} + +.stat-item { + text-align: center; +} + +.stat-number { + display: block; + font-family: var(--font-display); + font-size: clamp(1.75rem, 4vw, 2.5rem); + font-weight: 600; + color: var(--accent); +} + +.stat-suffix { + font-family: var(--font-display); + font-size: clamp(1.25rem, 2.5vw, 1.5rem); + font-weight: 500; + color: var(--accent); +} + +.stat-label { + display: block; + color: var(--text); + font-size: 0.875rem; + margin-top: 0.5rem; +} + +@media (max-width: 600px) { + .stats-inner { + grid-template-columns: repeat(2, 1fr); + gap: 1.5rem; + } +} + +/* Areas */ +.areas { + padding: var(--section-padding) 2rem; + max-width: 1200px; + margin: 0 auto; +} + +.areas-content { + display: grid; + grid-template-columns: 1fr 1.2fr; + gap: 3rem; + align-items: center; + margin-bottom: 3rem; +} + +.areas-content .section-header { + text-align: start; + margin-bottom: 0; +} + +.areas-map { + position: relative; + opacity: 0; + transform: scale(0.9); + transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); +} + +.areas-map.visible { + opacity: 1; + transform: scale(1); +} + +.map-svg { + width: 100%; + max-width: 500px; + height: auto; +} + +.map-label { + font-family: var(--font-body); + font-size: 13px; + font-weight: 400; +} + +.map-center { + font-size: 15px; + font-weight: 500; +} + +.pulse-ring { + animation: pulseRing 3s ease-out infinite; +} + +@keyframes pulseRing { + 0% { opacity: 0.6; } + 50% { opacity: 0.2; } + 100% { opacity: 0.6; } +} + +.map-point { + opacity: 0; + animation: fadeIn 0.5s var(--ease-out) forwards; + animation-delay: var(--delay, 0s); +} + +.areas-map.visible .map-point { + opacity: 1; +} + +@keyframes fadeIn { + to { opacity: 1; } +} + +.areas-list { + background: var(--bg-card); + padding: 2rem; + border-radius: 16px; +} + +.areas-list h3 { + margin-bottom: 1.5rem; + color: var(--text); +} + +.areas-list ul { + list-style: none; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); + gap: 0.75rem; +} + +.areas-list li { + padding: 0.5rem 1rem; + background: rgba(255, 255, 255, 0.03); + border-radius: 8px; + color: var(--text); + font-size: 0.9rem; + text-align: center; + transition: background 0.2s, color 0.2s; +} + +.areas-list li:hover { + background: rgba(0, 212, 255, 0.1); + color: var(--accent); +} + +@media (max-width: 800px) { + .areas-content { + grid-template-columns: 1fr; + } + + .areas-content .section-header { + text-align: center; + } + + .areas-map { + order: -1; + } +} + +/* Contact */ +.contact { + padding: var(--section-padding) 2rem; + background: linear-gradient(180deg, transparent 0%, rgba(0, 212, 255, 0.03) 100%); +} + +.contact-inner { + max-width: 1100px; + margin: 0 auto; + display: grid; + grid-template-columns: 1fr 1.2fr; + gap: 3rem; + align-items: start; +} + +.contact-info { + opacity: 0; + transform: translateY(30px); + transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); +} + +.contact-info.visible { + opacity: 1; + transform: translateY(0); +} + +.contact-info > p { + color: var(--text); + font-size: 1.0625rem; + margin-top: 1rem; +} + +.contact-phone { + display: inline-flex; + align-items: center; + gap: 0.75rem; + margin-top: 2rem; + padding: 1rem 1.5rem; + background: rgba(0, 212, 255, 0.1); + border: 2px solid var(--accent); + border-radius: 12px; + color: var(--accent); + font-family: var(--font-display); + font-size: 1.5rem; + font-weight: 500; + transition: background 0.2s, transform 0.2s var(--ease-bounce); +} + +.contact-phone:hover, +.contact-phone:focus { + background: rgba(0, 212, 255, 0.2); + transform: scale(1.02); +} + +.contact-phone svg { + width: 28px; + height: 28px; +} + +.contact-features { + margin-top: 2rem; + display: flex; + flex-direction: column; + gap: 0.875rem; +} + +.feature { + display: flex; + align-items: center; + gap: 0.75rem; + color: var(--text); +} + +.feature svg { + width: 22px; + height: 22px; + color: var(--accent); + flex-shrink: 0; +} + +.contact-form { + background: var(--bg-card); + padding: 2.5rem; + border-radius: 20px; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1.5rem; + opacity: 0; + transform: translateY(30px); + transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out) 0.2s; +} + +.contact-form.visible { + opacity: 1; + transform: translateY(0); +} + +.form-group { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.form-group-full { + grid-column: 1 / -1; +} + +.form-group label { + font-size: 0.875rem; + font-weight: 500; + color: var(--text); +} + +.form-group input, +.form-group select, +.form-group textarea { + padding: 0.875rem 1rem; + background: rgba(255, 255, 255, 0.05); + border: 2px solid transparent; + border-radius: 10px; + color: var(--text); + font-family: var(--font-body); + font-size: 1rem; + transition: border-color 0.2s, background 0.2s; +} + +.form-group input::placeholder, +.form-group textarea::placeholder { + color: var(--text-dim); +} + +.form-group input:focus, +.form-group select:focus, +.form-group textarea:focus { + outline: none; + border-color: var(--accent); + background: rgba(0, 212, 255, 0.05); +} + +.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='%238ba3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: left 1rem center; + padding-inline-start: 2.5rem; +} + +.form-group select option { + background: var(--bg-card); + color: var(--text); +} + +.form-group textarea { + resize: vertical; + min-height: 100px; +} + +.form-group.error input, +.form-group.error select { + border-color: var(--error); + background: rgba(255, 107, 107, 0.05); +} + +.error-msg { + display: none; + align-items: center; + gap: 0.375rem; + font-size: 0.8125rem; + color: var(--error); +} + +.error-msg svg { + width: 14px; + height: 14px; + flex-shrink: 0; +} + +.form-group.error .error-msg { + display: flex; +} + +.btn-submit { + grid-column: 1 / -1; + position: relative; + overflow: hidden; +} + +.btn-submit .btn-loading, +.btn-submit .btn-success { + display: none; +} + +.btn-submit.loading .btn-text { + display: none; +} + +.btn-submit.loading .btn-loading { + display: inline; +} + +.btn-submit.success { + background: var(--success); +} + +.btn-submit.success .btn-text, +.btn-submit.success .btn-loading { + display: none; +} + +.btn-submit.success .btn-success { + display: inline-flex; + width: 24px; + height: 24px; +} + +.form-note { + grid-column: 1 / -1; + font-size: 0.75rem; + color: var(--text-dim); + text-align: center; + margin: 0; +} + +@media (max-width: 800px) { + .contact-inner { + grid-template-columns: 1fr; + gap: 2rem; + } + + .contact-info { + text-align: center; + } + + .contact-features { + align-items: center; + } + + .contact-form { + grid-template-columns: 1fr; + } + + .form-group-full { + grid-column: 1; + } +} + +/* Footer */ +.site-footer { + padding: 3rem 2rem; + border-top: 1px solid rgba(255, 255, 255, 0.05); +} + +.footer-inner { + max-width: 1200px; + margin: 0 auto; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + gap: 2rem; +} + +.footer-brand { + display: flex; + align-items: center; + gap: 0.75rem; + font-family: var(--font-display); + font-weight: 500; +} + +.footer-logo { + width: 32px; + height: 32px; +} + +.footer-nav { + display: flex; + gap: 2rem; +} + +.footer-nav a { + color: var(--text-mid); + transition: color 0.2s; +} + +.footer-nav a:hover, +.footer-nav a:focus { + color: var(--accent); +} + +.footer-contact { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0.25rem; +} + +.footer-contact a { + color: var(--accent); + font-family: var(--font-display); + font-weight: 500; + font-size: 1.125rem; +} + +.footer-contact span { + color: var(--text-dim); + font-size: 0.875rem; +} + +.footer-copy { + width: 100%; + text-align: center; + color: var(--text-dim); + font-size: 0.8125rem; + margin-top: 1rem; + padding-top: 1.5rem; + border-top: 1px solid rgba(255, 255, 255, 0.05); +} + +@media (max-width: 700px) { + .footer-inner { + flex-direction: column; + text-align: center; + } + + .footer-contact { + align-items: center; + } + + .footer-nav { + gap: 1.5rem; + } +} + +/* Focus states */ +*:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; +} + +button:focus:not(:focus-visible), +a:focus:not(:focus-visible) { + outline: none; +}