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

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

+

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

+
+ + + התקשרו עכשיו + + השאירו פרטים +
+
+ או חייגו ישירות: + 053-221-9226 +
+
+ +
+ +
+
+
+ +
+ הגעה מהירה + תוך שעה באזור +
+
+
+ +
+ אחריות מלאה + על כל עבודה +
+
+
+ +
+ זמינות 24/7 + כולל שבת וחג +
+
+
+ +
+ בני ברק והסביבה + שירות מקומי +
+
+
+
+ +
+
+
+

השירותים שלי

+

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

+
+
+
+
השירות הנפוץ
+
+ +
+

פתיחת סתימות

+

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

+
+
+
+ +
+

תיקון נזילות

+

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

+
+
+
+ +
+

דודי שמש

+

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

+
+
+
+ +
+

התקנת ברזים

+

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

+
+
+
+ +
+

אינסטלציה כללית לבית ולעסק

+

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

+
+
+
+
+ +
+
+
+

למה לבחור בי?

+

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

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

בעיית אינסטלציה? אני כאן!

+

זמין עכשיו לכל קריאה — התקשרו ואגיע במהירות.

+
+ + + 053-221-9226 + +
+
+ +
+
+
+
+

צרו קשר

+

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

+
+ + + 053-221-9226 + +
+ + בני ברק והסביבה +
+
+ + זמינות 24 שעות, 7 ימים בשבוע +
+
+
+
+
+ + +
+
+ + +
+
+ + +
+ + +

או התקשרו ישירות: 053-221-9226

+
+
+
+
+
+ + + + + + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..7a83472 --- /dev/null +++ b/script.js @@ -0,0 +1,146 @@ +(function() { + 'use strict'; + + // Scroll reveal with staggered animations + const revealElements = document.querySelectorAll('.reveal'); + + if ('IntersectionObserver' in window) { + const revealObserver = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + entry.target.classList.add('visible'); + revealObserver.unobserve(entry.target); + } + }); + }, { + threshold: 0.1, + rootMargin: '0px 0px -40px 0px' + }); + + revealElements.forEach((el) => { + revealObserver.observe(el); + }); + } else { + // Fallback for browsers without IntersectionObserver + revealElements.forEach((el) => { + el.classList.add('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(); + const header = document.querySelector('.site-header'); + const headerHeight = header ? header.offsetHeight : 0; + const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - headerHeight - 20; + + window.scrollTo({ + top: targetPosition, + behavior: 'smooth' + }); + + // Set focus to target for accessibility + target.setAttribute('tabindex', '-1'); + target.focus({ preventScroll: true }); + } + }); + }); + + // Form handling + const contactForm = document.getElementById('contactForm'); + const formFeedback = document.getElementById('formFeedback'); + + function showFeedback(message, isSuccess) { + formFeedback.textContent = message; + formFeedback.className = 'form-feedback ' + (isSuccess ? 'success' : 'error'); + } + + function clearFeedback() { + formFeedback.textContent = ''; + formFeedback.className = 'form-feedback'; + } + + if (contactForm) { + contactForm.addEventListener('submit', function(e) { + e.preventDefault(); + clearFeedback(); + + const formData = new FormData(this); + const name = formData.get('name').trim(); + const phone = formData.get('phone').trim(); + + // Validation + if (!name) { + showFeedback('אנא הזינו את שמכם', false); + document.getElementById('name').focus(); + return; + } + + if (!phone) { + showFeedback('אנא הזינו מספר טלפון', false); + document.getElementById('phone').focus(); + return; + } + + // Phone validation (Israeli format) + const phoneRegex = /^0[0-9]{8,9}$/; + const cleanPhone = phone.replace(/[-\s]/g, ''); + + if (!phoneRegex.test(cleanPhone)) { + showFeedback('אנא הזינו מספר טלפון ישראלי תקין', false); + document.getElementById('phone').focus(); + return; + } + + // Simulate form submission + const submitBtn = this.querySelector('button[type="submit"]'); + const originalText = submitBtn.textContent; + + submitBtn.disabled = true; + submitBtn.textContent = 'שולח...'; + + // In production, replace with actual form submission + setTimeout(() => { + contactForm.reset(); + submitBtn.disabled = false; + submitBtn.textContent = originalText; + + showFeedback('תודה! פנייתכם התקבלה. אחזור אליכם בהקדם.', true); + + setTimeout(() => { + clearFeedback(); + }, 5000); + }, 1000); + }); + + // Clear feedback when user starts typing + contactForm.querySelectorAll('input, textarea').forEach(function(field) { + field.addEventListener('input', clearFeedback); + }); + } + + // Header scroll effect + const header = document.querySelector('.site-header'); + let lastScrollY = 0; + + if (header) { + function updateHeaderShadow() { + if (window.pageYOffset > 100) { + header.style.boxShadow = 'var(--shadow)'; + } else { + header.style.boxShadow = 'none'; + } + lastScrollY = window.pageYOffset; + } + + window.addEventListener('scroll', updateHeaderShadow, { passive: true }); + updateHeaderShadow(); + } + +})(); diff --git a/style.css b/style.css new file mode 100644 index 0000000..361d815 --- /dev/null +++ b/style.css @@ -0,0 +1,1079 @@ +:root { + --primary: #0d4f8b; + --primary-dark: #083759; + --primary-light: #e3f2fd; + --accent: #e65100; + --accent-dark: #bf360c; + --accent-light: #fff3e0; + --text: #1a2634; + --text-muted: #546478; + --bg: #ffffff; + --bg-alt: #f8fafc; + --border: #e2e8f0; + --success: #2e7d32; + --success-light: #e8f5e9; + --error: #c62828; + --error-light: #ffebee; + --shadow: 0 4px 24px rgba(13, 79, 139, 0.08); + --shadow-lg: 0 12px 48px rgba(13, 79, 139, 0.12); + --radius: 12px; + --radius-lg: 20px; + --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: 'Heebo', sans-serif; + font-size: 1rem; + line-height: 1.7; + color: var(--text); + background: var(--bg); + -webkit-font-smoothing: antialiased; +} + +img, svg { + display: block; + max-width: 100%; +} + +a { + color: inherit; + text-decoration: none; +} + +ul { + list-style: none; +} + +/* Skip Link */ +.skip-link { + position: absolute; + top: -100%; + inset-inline-end: 0; + background: var(--primary); + color: white; + padding: 0.75rem 1.5rem; + z-index: 200; + font-weight: 500; + border-radius: 0 0 var(--radius) var(--radius); + transition: top 0.2s; +} + +.skip-link:focus { + top: 0; +} + +/* Typography — Hebrew capped at 600 */ +h1, h2, h3, h4 { + font-family: 'Rubik', sans-serif; + font-weight: 600; + line-height: 1.3; +} + +h1 { font-size: clamp(1.875rem, 5vw, 2.75rem); } +h2 { font-size: clamp(1.625rem, 4vw, 2.125rem); } +h3 { font-size: clamp(1.0625rem, 2vw, 1.1875rem); } + +/* Buttons */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + padding: 0.875rem 1.75rem; + font-family: 'Rubik', sans-serif; + font-size: 1rem; + font-weight: 500; + border: none; + border-radius: var(--radius); + cursor: pointer; + transition: all var(--transition); +} + +.btn svg { + width: 20px; + height: 20px; +} + +.btn-primary { + background: var(--primary); + color: white; +} + +.btn-primary:hover, +.btn-primary:focus { + background: var(--primary-dark); + transform: translateY(-2px); + box-shadow: var(--shadow); +} + +.btn-secondary { + background: transparent; + color: var(--primary); + border: 2px solid var(--primary); +} + +.btn-secondary:hover, +.btn-secondary:focus { + background: var(--primary); + color: white; +} + +.btn-accent { + background: var(--accent); + color: white; +} + +.btn-accent:hover, +.btn-accent:focus { + background: var(--accent-dark); + transform: translateY(-2px); +} + +.btn-large { + padding: 1rem 2rem; + font-size: 1.125rem; +} + +.btn-full { + width: 100%; +} + +/* Header */ +.site-header { + position: fixed; + top: 0; + inset-inline-start: 0; + inset-inline-end: 0; + z-index: 100; + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + border-bottom: 1px solid var(--border); +} + +.nav-container { + display: flex; + align-items: center; + justify-content: space-between; + max-width: 1200px; + margin: 0 auto; + padding: 1rem 1.5rem; +} + +.logo { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.logo-icon { + width: 40px; + height: 40px; +} + +.logo-text { + font-family: 'Rubik', sans-serif; + font-size: 1.125rem; + font-weight: 600; + color: var(--primary); +} + +.nav-links { + display: none; + gap: 2rem; +} + +.nav-links a { + font-weight: 500; + color: var(--text); + transition: color var(--transition); +} + +.nav-links a:hover, +.nav-links a:focus { + color: var(--primary); +} + +.header-phone { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.625rem 1rem; + background: var(--primary); + color: white; + border-radius: var(--radius); + font-weight: 500; + transition: all var(--transition); +} + +.header-phone:hover, +.header-phone:focus { + background: var(--primary-dark); +} + +.header-phone svg { + width: 18px; + height: 18px; +} + +@media (min-width: 768px) { + .nav-links { + display: flex; + } +} + +/* Hero */ +.hero { + position: relative; + min-height: 100svh; + display: flex; + align-items: center; + padding: 7rem 1.5rem 3rem; + overflow: hidden; +} + +@media (min-width: 768px) { + .hero { + padding: 8rem 1.5rem 4rem; + } +} + +.hero-bg { + position: absolute; + inset: 0; + z-index: -1; +} + +.hero-shape { + position: absolute; + border-radius: 50%; +} + +.hero-shape-1 { + width: 600px; + height: 600px; + top: -200px; + inset-inline-end: -200px; + background: linear-gradient(135deg, var(--primary-light) 0%, transparent 70%); +} + +.hero-shape-2 { + width: 400px; + height: 400px; + bottom: -100px; + inset-inline-start: -100px; + background: linear-gradient(135deg, var(--accent-light) 0%, transparent 70%); +} + +.hero-shape-3 { + width: 200px; + height: 200px; + top: 30%; + inset-inline-start: 20%; + background: var(--primary-light); + opacity: 0.5; +} + +.hero-content { + max-width: 600px; +} + +.badge { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 1rem; + background: var(--primary-light); + color: var(--primary-dark); + border-radius: 50px; + font-size: 0.875rem; + font-weight: 500; + margin-bottom: 1.5rem; +} + +.badge svg { + width: 18px; + height: 18px; + color: var(--primary); +} + +.hero-title { + margin-bottom: 1.5rem; + color: var(--primary-dark); +} + +.hero-title-small { + display: block; + font-size: 1rem; + font-weight: 500; + color: var(--accent); + margin-bottom: 0.5rem; + letter-spacing: 0.05em; +} + +.hero-desc { + font-size: 1.0625rem; + color: var(--text-muted); + margin-bottom: 2rem; + max-width: 48ch; +} + +.hero-actions { + display: flex; + flex-wrap: wrap; + gap: 1rem; + margin-bottom: 2rem; +} + +.hero-phone { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.75rem; +} + +.phone-label { + color: var(--text-muted); +} + +.phone-number { + font-family: 'Rubik', sans-serif; + font-size: 1.5rem; + font-weight: 600; + color: var(--primary); + letter-spacing: 0.02em; + direction: ltr; +} + +.hero-visual { + display: none; + position: absolute; + inset-inline-end: 5%; + top: 50%; + transform: translateY(-50%); + width: 400px; +} + +.hero-illustration { + width: 100%; + height: auto; +} + +.water-drop { + animation: dropFall 2s ease-in-out infinite; +} + +.drop-1 { animation-delay: 0s; } +.drop-2 { animation-delay: 0.5s; } +.drop-3 { animation-delay: 1s; } + +@keyframes dropFall { + 0%, 100% { + opacity: 0; + transform: translateY(-20px); + } + 20% { + opacity: 1; + } + 80% { + opacity: 1; + } + 100% { + transform: translateY(30px); + opacity: 0; + } +} + +@media (min-width: 1024px) { + .hero { + padding: 0 5%; + } + + .hero-content { + max-width: 55%; + } + + .hero-visual { + display: block; + } +} + +/* Trust Bar */ +.trust-bar { + background: var(--bg-alt); + padding: 3rem 1.5rem; + border-top: 1px solid var(--border); + border-bottom: 1px solid var(--border); +} + +.trust-container { + display: grid; + grid-template-columns: 1fr; + gap: 1.5rem; + max-width: 1000px; + margin: 0 auto; +} + +.trust-item { + display: flex; + align-items: center; + gap: 1rem; + padding: 0.75rem; + border-radius: var(--radius); + transition: background var(--transition); +} + +.trust-item svg { + width: 48px; + height: 48px; + flex-shrink: 0; +} + +.trust-text { + display: flex; + flex-direction: column; +} + +.trust-text strong { + font-family: 'Rubik', sans-serif; + font-weight: 600; + font-size: 1rem; + color: var(--primary-dark); +} + +.trust-text span { + font-size: 0.875rem; + color: var(--text-muted); +} + +@media (min-width: 640px) { + .trust-container { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (min-width: 900px) { + .trust-container { + grid-template-columns: repeat(4, 1fr); + gap: 1rem; + } + + .trust-item { + flex-direction: column; + text-align: center; + gap: 0.75rem; + padding: 1rem; + } +} + +/* Sections */ +.section-container { + max-width: 1200px; + margin: 0 auto; + padding: 4rem 1.5rem; +} + +@media (min-width: 768px) { + .section-container { + padding: 5rem 1.5rem; + } +} + +.section-header { + text-align: center; + max-width: 600px; + margin: 0 auto 3rem; +} + +.section-title { + color: var(--primary-dark); + margin-bottom: 1rem; +} + +.section-desc { + color: var(--text-muted); + font-size: 1.0625rem; +} + +/* Services */ +.services { + background: var(--bg); +} + +.services-grid { + display: grid; + grid-template-columns: 1fr; + gap: 1.5rem; +} + +.service-card { + position: relative; + background: var(--bg); + padding: 1.75rem; + border-radius: var(--radius-lg); + border: 1px solid var(--border); + transition: all var(--transition); +} + +.service-card:hover { + border-color: var(--primary); + box-shadow: var(--shadow); + transform: translateY(-4px); +} + +.service-card-featured { + border-color: var(--primary); + border-width: 2px; + background: linear-gradient(to bottom, var(--primary-light) 0%, var(--bg) 100%); +} + +.service-badge { + position: absolute; + top: -0.625rem; + inset-inline-end: 1.5rem; + padding: 0.25rem 0.75rem; + background: var(--accent); + color: white; + font-size: 0.75rem; + font-weight: 600; + border-radius: 50px; +} + +.service-card-wide { + background: var(--bg-alt); +} + +.service-icon { + width: 56px; + height: 56px; + margin-bottom: 1rem; +} + +.service-title { + color: var(--primary-dark); + margin-bottom: 0.5rem; +} + +.service-desc { + color: var(--text-muted); + font-size: 0.9375rem; + line-height: 1.65; +} + +@media (min-width: 640px) { + .services-grid { + grid-template-columns: repeat(2, 1fr); + } + + .service-card-wide { + grid-column: span 2; + } +} + +@media (min-width: 1024px) { + .services-grid { + grid-template-columns: repeat(4, 1fr); + grid-template-rows: auto auto; + } + + .service-card-featured { + grid-row: span 2; + display: flex; + flex-direction: column; + } + + .service-card-featured .service-desc { + flex-grow: 1; + } + + .service-card-wide { + grid-column: span 2; + } + + .service-card { + padding: 2rem; + } + + .service-icon { + width: 64px; + height: 64px; + margin-bottom: 1.25rem; + } +} + +/* About */ +.about { + background: var(--bg-alt); +} + +.about-container { + display: grid; + grid-template-columns: 1fr; + gap: 3rem; + max-width: 1200px; + margin: 0 auto; + padding: 4rem 1.5rem; +} + +@media (min-width: 768px) { + .about-container { + padding: 5rem 1.5rem; + } +} + +.about-text { + color: var(--text-muted); + font-size: 1.0625rem; + margin-bottom: 2rem; + max-width: 55ch; +} + +.about-list { + display: flex; + flex-direction: column; + gap: 0.875rem; +} + +.about-list li { + display: flex; + align-items: center; + gap: 0.75rem; + font-weight: 500; +} + +.about-list svg { + width: 22px; + height: 22px; + flex-shrink: 0; +} + +.about-visual { + display: flex; + flex-direction: column; + gap: 1.25rem; +} + +.about-card { + display: flex; + align-items: center; + gap: 1.25rem; + padding: 1.25rem 1.5rem; + background: var(--bg); + border-radius: var(--radius); + box-shadow: var(--shadow); +} + +.about-card-primary { + border-inline-start: 4px solid var(--primary); +} + +.about-card-icon svg { + width: 56px; + height: 56px; +} + +.about-card-content { + display: flex; + flex-direction: column; + gap: 0.25rem; +} + +.about-card-content strong { + font-family: 'Rubik', sans-serif; + font-weight: 600; + font-size: 1.0625rem; + color: var(--primary-dark); +} + +.about-card-content span { + color: var(--text-muted); + font-size: 0.875rem; +} + +@media (min-width: 1024px) { + .about-container { + grid-template-columns: 1fr 1fr; + align-items: center; + } + + .about-card-icon svg { + width: 64px; + height: 64px; + } +} + +/* CTA Section */ +.cta-section { + background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); + padding: 3.5rem 1.5rem; +} + +.cta-container { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + gap: 1.5rem; + max-width: 800px; + margin: 0 auto; +} + +.cta-title { + color: white; + margin-bottom: 0.5rem; +} + +.cta-desc { + color: rgba(255, 255, 255, 0.9); + font-size: 1.0625rem; +} + +.cta-btn { + font-size: 1.25rem; + padding: 1.125rem 2.5rem; +} + +@media (min-width: 768px) { + .cta-section { + padding: 4rem 1.5rem; + } + + .cta-container { + flex-direction: row; + text-align: start; + justify-content: space-between; + gap: 2rem; + } + + .cta-content { + flex: 1; + } +} + +/* Contact */ +.contact { + background: var(--bg); +} + +.contact-wrapper { + display: grid; + grid-template-columns: 1fr; + gap: 2.5rem; +} + +.contact-desc { + color: var(--text-muted); + font-size: 1.0625rem; + margin-bottom: 2rem; +} + +.contact-details { + display: flex; + flex-direction: column; + gap: 1.25rem; +} + +.contact-item { + display: flex; + align-items: center; + gap: 1rem; + color: var(--text); + font-weight: 500; + transition: color var(--transition); +} + +a.contact-item:hover, +a.contact-item:focus { + color: var(--primary); +} + +.contact-item svg { + width: 24px; + height: 24px; + color: var(--primary); + flex-shrink: 0; +} + +.contact-form { + background: var(--bg-alt); + padding: 1.75rem; + border-radius: var(--radius-lg); + border: 1px solid var(--border); +} + +.form-group { + margin-bottom: 1.25rem; +} + +.form-group label { + display: block; + font-weight: 500; + margin-bottom: 0.5rem; + color: var(--text); +} + +.form-group input, +.form-group textarea { + width: 100%; + padding: 0.875rem 1rem; + font-family: inherit; + font-size: 1rem; + border: 1px solid var(--border); + border-radius: var(--radius); + background: var(--bg); + transition: all var(--transition); +} + +.form-group input::placeholder, +.form-group textarea::placeholder { + color: #94a3b8; +} + +.form-group input:focus, +.form-group textarea:focus { + outline: none; + border-color: var(--primary); + box-shadow: 0 0 0 3px var(--primary-light); +} + +.form-group textarea { + resize: vertical; + min-height: 100px; +} + +.form-feedback { + margin-top: 1rem; + padding: 0; + border-radius: var(--radius); + font-weight: 500; + text-align: center; + transition: all var(--transition); +} + +.form-feedback:empty { + display: none; +} + +.form-feedback.success { + display: block; + padding: 1rem; + background: var(--success-light); + color: var(--success); +} + +.form-feedback.error { + display: block; + padding: 1rem; + background: var(--error-light); + color: var(--error); +} + +.form-note { + text-align: center; + margin-top: 1rem; + color: var(--text-muted); + font-size: 0.9375rem; +} + +.form-note a { + color: var(--primary); + font-weight: 600; + direction: ltr; + display: inline-block; +} + +@media (min-width: 768px) { + .contact-wrapper { + grid-template-columns: 1fr 1fr; + align-items: start; + gap: 3rem; + } + + .contact-form { + padding: 2rem; + } +} + +/* Footer */ +.site-footer { + background: var(--primary-dark); + color: white; + padding: 3rem 1.5rem 1.5rem; +} + +.footer-container { + display: grid; + grid-template-columns: 1fr; + gap: 2rem; + max-width: 1200px; + margin: 0 auto; + padding-bottom: 2rem; + border-bottom: 1px solid rgba(255, 255, 255, 0.15); +} + +.footer-logo { + display: flex; + align-items: center; + gap: 0.75rem; + font-family: 'Rubik', sans-serif; + font-size: 1.25rem; + font-weight: 600; +} + +.footer-logo .logo-icon { + width: 40px; + height: 40px; +} + +.footer-desc { + margin-top: 1rem; + color: rgba(255, 255, 255, 0.8); + font-size: 0.9375rem; +} + +.footer-links { + display: flex; + flex-wrap: wrap; + gap: 1.5rem; +} + +.footer-links a { + color: rgba(255, 255, 255, 0.85); + transition: color var(--transition); +} + +.footer-links a:hover, +.footer-links a:focus { + color: white; +} + +.footer-phone { + font-family: 'Rubik', sans-serif; + font-size: 1.5rem; + font-weight: 600; + color: var(--accent); + direction: ltr; + display: inline-block; + transition: color var(--transition); +} + +.footer-phone:hover, +.footer-phone:focus { + color: #ff8a65; +} + +.footer-bottom { + max-width: 1200px; + margin: 0 auto; + padding-top: 1.5rem; + text-align: center; + color: rgba(255, 255, 255, 0.6); + font-size: 0.875rem; +} + +@media (min-width: 768px) { + .footer-container { + grid-template-columns: 2fr 1fr 1fr; + align-items: start; + } +} + +/* Floating CTA */ +.floating-cta { + position: fixed; + bottom: 1.5rem; + inset-inline-start: 1.5rem; + width: 60px; + height: 60px; + background: var(--accent); + color: white; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 4px 20px rgba(230, 81, 0, 0.4); + transition: all var(--transition); + z-index: 90; +} + +.floating-cta:hover, +.floating-cta:focus { + transform: scale(1.1); + box-shadow: 0 6px 28px rgba(230, 81, 0, 0.5); +} + +.floating-cta svg { + width: 28px; + height: 28px; +} + +/* Reveal Animation */ +.reveal { + opacity: 0; + transform: translateY(24px); + transition: opacity 0.5s ease, transform 0.5s ease; +} + +.reveal[data-delay="1"] { transition-delay: 0.1s; } +.reveal[data-delay="2"] { transition-delay: 0.2s; } +.reveal[data-delay="3"] { transition-delay: 0.3s; } +.reveal[data-delay="4"] { transition-delay: 0.4s; } + +.reveal.visible { + opacity: 1; + transform: translateY(0); +} + +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } + + .reveal { + opacity: 1; + transform: none; + } + + html { + scroll-behavior: auto; + } +} + +/* Focus styles */ +:focus-visible { + outline: 3px solid var(--accent); + outline-offset: 2px; +} + +button:focus-visible, +a:focus-visible { + outline: 3px solid var(--accent); + outline-offset: 2px; +} + +/* Ensure focus is visible on dark backgrounds */ +.cta-section :focus-visible, +.site-footer :focus-visible { + outline-color: white; +} + +.cta-section .btn:focus-visible, +.site-footer a:focus-visible { + outline-color: white; + outline-offset: 3px; +}