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

אינסטלטור מקצועי
בפתח תקווה והסביבה

+

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

+
+ + + 052-855-5502 + + לשירותים שלנו +
+
+
+ + אמינות מוכחת +
+
+ + הגעה מהירה +
+
+ + מחירים הוגנים +
+
+
+
+ +
+
+
+

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

+

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

+
+
+
+
+ +
+

תיקוני צנרת

+

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

+
+
+
+ +
+

איתור נזילות

+

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

+
+
+
+ +
+

התקנת ברזים

+

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

+
+
+
+ +
+

התקנת דודים

+

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

+
+
+
+ +
+

תיקון שירותים

+

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

+
+
+
+ +
+

מכונות כביסה

+

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

+
+
+
24/7
+
+ +
+
+

קריאות שירות דחופות

+

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

+
+ + + חייגו עכשיו + +
+
+
+
+ +
+
+
+
+

למה לבחור באיציק בכר?

+

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

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

אזור השירות

+

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

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

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

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

צריכים אינסטלטור?

+

אל תחכו עד שהבעיה תחמיר. התקשרו עכשיו לייעוץ חינם או לקביעת תור.

+
+ + 052-855-5502 +
+
+ + התקשרו עכשיו + + +
+
+
+
+ + + + + + 052-855-5502 + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..0729ec8 --- /dev/null +++ b/script.js @@ -0,0 +1,104 @@ +(function() { + 'use strict'; + + // Check for reduced motion preference + const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + + // Intersection Observer for reveal animations + if (!prefersReducedMotion) { + const revealElements = document.querySelectorAll('[data-reveal]'); + + const revealObserver = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + const index = parseInt(entry.target.dataset.revealIndex, 10) || 0; + const delay = index * 100; + setTimeout(() => { + entry.target.classList.add('revealed'); + }, delay); + revealObserver.unobserve(entry.target); + } + }); + }, { + threshold: 0.1, + rootMargin: '0px 0px -50px 0px' + }); + + revealElements.forEach(el => { + revealObserver.observe(el); + }); + + // Service cards reveal + const serviceCards = document.querySelectorAll('.service-card'); + const cardObserver = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + const index = parseInt(entry.target.dataset.revealIndex, 10) || 0; + setTimeout(() => { + entry.target.classList.add('revealed'); + }, index * 100); + cardObserver.unobserve(entry.target); + } + }); + }, { + threshold: 0.1, + rootMargin: '0px 0px -30px 0px' + }); + + serviceCards.forEach(card => { + cardObserver.observe(card); + }); + } else { + // If reduced motion, show everything immediately + document.querySelectorAll('[data-reveal], .service-card').forEach(el => { + el.classList.add('revealed'); + }); + } + + // 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 targetElement = document.querySelector(targetId); + if (targetElement) { + e.preventDefault(); + const header = document.querySelector('.site-header'); + const headerHeight = header ? header.offsetHeight : 0; + const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - headerHeight - 20; + + window.scrollTo({ + top: targetPosition, + behavior: prefersReducedMotion ? 'auto' : 'smooth' + }); + } + }); + }); + + // Header shadow on scroll + const header = document.querySelector('.site-header'); + let lastScroll = 0; + + const handleScroll = () => { + const currentScroll = window.pageYOffset; + + if (currentScroll > 100) { + header.style.boxShadow = 'var(--shadow-md)'; + } else { + header.style.boxShadow = 'none'; + } + + lastScroll = currentScroll; + }; + + window.addEventListener('scroll', handleScroll, { passive: true }); + + // Animate drops with varied timing + if (!prefersReducedMotion) { + const drops = document.querySelectorAll('.drop'); + drops.forEach((drop, i) => { + drop.style.animationDelay = `${i * 1.2}s`; + }); + } +})(); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..a056879 --- /dev/null +++ b/style.css @@ -0,0 +1,980 @@ +:root { + --navy: #1e3a5f; + --navy-dark: #152a45; + --navy-light: #2a4a72; + --orange: #ff6b35; + --orange-dark: #e55a28; + --orange-light: #ff8c5a; + --light-blue: #7eb8da; + --cream: #faf8f5; + --gray: #5f6875; + --gray-light: #e5e7eb; + + --font-display: 'Rubik', sans-serif; + --font-body: 'Heebo', sans-serif; + + --space-xs: 0.5rem; + --space-sm: 1rem; + --space-md: 1.5rem; + --space-lg: 2.5rem; + --space-xl: 4rem; + --space-2xl: 5rem; + + --radius-sm: 4px; + --radius-md: 8px; + --radius-lg: 16px; + --radius-xl: 24px; + + --shadow-sm: 0 1px 3px rgba(30, 58, 95, 0.1); + --shadow-md: 0 4px 12px rgba(30, 58, 95, 0.15); + --shadow-lg: 0 8px 30px rgba(30, 58, 95, 0.2); + --shadow-glow: 0 0 40px rgba(255, 107, 53, 0.3); +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; +} + +@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; + line-height: 1.7; + color: var(--navy); + background-color: var(--cream); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +h1, h2, h3, h4 { + font-family: var(--font-display); + font-weight: 600; + line-height: 1.2; + text-wrap: balance; +} + +a { + color: inherit; + text-decoration: none; +} + +ul { + list-style: none; +} + +img, svg { + display: block; + max-width: 100%; +} + +.container { + width: 100%; + max-width: 1200px; + margin-inline: auto; + padding-inline: var(--space-md); +} + +/* Header */ +.site-header { + position: fixed; + inset-block-start: 0; + inset-inline: 0; + z-index: 100; + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + border-block-end: 1px solid var(--gray-light); +} + +.header-container { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-md); + max-width: 1200px; + margin-inline: auto; + padding: var(--space-sm) var(--space-md); +} + +.logo { + display: flex; + align-items: center; + gap: var(--space-xs); +} + +.logo-icon { + width: 40px; + height: 40px; +} + +.logo-text { + font-family: var(--font-display); + font-size: 1.25rem; + font-weight: 600; + color: var(--navy); +} + +.main-nav ul { + display: flex; + gap: var(--space-md); +} + +.main-nav a { + font-size: 0.95rem; + font-weight: 500; + color: var(--navy); + transition: color 0.2s; +} + +.main-nav a:hover, +.main-nav a:focus { + color: var(--orange); +} + +.header-cta { + display: flex; + align-items: center; + gap: var(--space-xs); + padding: var(--space-xs) var(--space-md); + background: var(--orange); + color: white; + font-weight: 500; + border-radius: var(--radius-md); + transition: background 0.2s, transform 0.2s; +} + +.header-cta:hover, +.header-cta:focus { + background: var(--orange-dark); + transform: translateY(-2px); +} + +.header-cta .phone-icon { + width: 18px; + height: 18px; +} + +@media (max-width: 768px) { + .main-nav { + display: none; + } + + .header-cta span { + display: none; + } + + .header-cta { + padding: var(--space-xs); + border-radius: 50%; + } + + .header-cta .phone-icon { + width: 24px; + height: 24px; + } +} + +/* Hero */ +.hero { + position: relative; + min-height: 100vh; + min-height: 100dvh; + display: flex; + align-items: center; + padding-block: calc(80px + var(--space-xl)) var(--space-xl); + background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%); + overflow: hidden; +} + +.hero-background { + position: absolute; + inset: 0; + pointer-events: none; +} + +.pipe-decoration { + position: absolute; + background: var(--navy-light); + border-radius: 4px; + opacity: 0.5; +} + +.pipe-1 { + width: 8px; + height: 200px; + inset-block-start: 20%; + inset-inline-end: 10%; +} + +.pipe-2 { + width: 150px; + height: 8px; + inset-block-start: 60%; + inset-inline-start: 5%; +} + +.pipe-3 { + width: 8px; + height: 120px; + inset-block-end: 10%; + inset-inline-end: 25%; +} + +.drop { + position: absolute; + width: 12px; + height: 18px; + background: var(--light-blue); + border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; + opacity: 0.6; + animation: drip 3s ease-in-out infinite; +} + +.drop-1 { + inset-block-start: calc(20% + 200px); + inset-inline-end: calc(10% - 2px); + animation-delay: 0s; +} + +.drop-2 { + inset-block-start: 75%; + inset-inline-start: 15%; + animation-delay: 1s; +} + +.drop-3 { + inset-block-end: calc(10% + 120px); + inset-inline-end: calc(25% - 2px); + animation-delay: 2s; +} + +@keyframes drip { + 0%, 100% { + transform: translateY(0); + opacity: 0.6; + } + 50% { + transform: translateY(20px); + opacity: 0.3; + } +} + +.hero-content { + position: relative; + z-index: 1; + max-width: 800px; + margin-inline: auto; + padding-inline: var(--space-md); + text-align: center; + color: var(--cream); +} + +.hero-badge { + display: inline-block; + padding: var(--space-xs) var(--space-md); + background: rgba(255, 107, 53, 0.15); + border: 2px solid var(--orange); + border-radius: 50px; + font-size: 0.875rem; + font-weight: 500; + color: var(--orange-light); + margin-block-end: var(--space-md); +} + +.hero h1 { + font-size: clamp(2rem, 6vw, 3.5rem); + margin-block-end: var(--space-md); +} + +.hero h1 .highlight { + color: var(--orange); +} + +.hero-subtitle { + font-size: 1.125rem; + opacity: 0.9; + max-width: 600px; + margin-inline: auto; + margin-block-end: var(--space-lg); + text-wrap: balance; +} + +.hero-actions { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: var(--space-sm); + margin-block-end: var(--space-xl); +} + +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: var(--space-xs); + padding: var(--space-sm) var(--space-lg); + font-family: var(--font-display); + font-size: 1rem; + font-weight: 500; + border-radius: var(--radius-md); + transition: all 0.2s; + cursor: pointer; + border: none; +} + +.btn svg { + width: 20px; + height: 20px; +} + +.btn-primary { + background: var(--orange); + color: white; +} + +.btn-primary:hover, +.btn-primary:focus { + background: var(--orange-dark); + transform: translateY(-2px); + box-shadow: var(--shadow-glow); +} + +.btn-secondary { + background: transparent; + color: var(--cream); + border: 2px solid var(--cream); +} + +.btn-secondary:hover, +.btn-secondary:focus { + background: var(--cream); + color: var(--navy); +} + +.btn-large { + padding: var(--space-md) var(--space-xl); + font-size: 1.125rem; +} + +.hero-trust { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: var(--space-lg); +} + +.trust-item { + display: flex; + align-items: center; + gap: var(--space-xs); + font-size: 0.9rem; + color: var(--cream); + opacity: 0.9; +} + +.trust-item svg { + width: 20px; + height: 20px; + color: var(--orange); +} + +/* Services */ +.services { + padding-block: var(--space-2xl); + background: var(--cream); +} + +.section-header { + text-align: center; + margin-block-end: var(--space-xl); +} + +.section-header h2 { + font-size: clamp(1.75rem, 4vw, 2.5rem); + margin-block-end: var(--space-xs); + color: var(--navy); +} + +.section-header p { + font-size: 1.125rem; + color: var(--gray); +} + +.section-header-light h2 { + color: var(--cream); +} + +.section-header-light p { + color: var(--light-blue); +} + +.services-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-md); +} + +@media (max-width: 1000px) { + .services-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 600px) { + .services-grid { + grid-template-columns: 1fr; + } +} + +.service-card { + position: relative; + padding: var(--space-lg); + background: white; + border-radius: var(--radius-lg); + box-shadow: var(--shadow-sm); + transition: transform 0.3s, box-shadow 0.3s, opacity 0.6s; + opacity: 0; +} + +.service-card.revealed { + opacity: 1; +} + +.service-card:hover { + transform: translateY(-5px); + box-shadow: var(--shadow-lg); +} + +.service-icon { + width: 72px; + height: 72px; + margin-block-end: var(--space-md); +} + +.service-card h3 { + font-size: 1.25rem; + margin-block-end: var(--space-sm); + color: var(--navy); +} + +.service-card p { + color: var(--gray); + font-size: 0.95rem; + line-height: 1.6; +} + +.service-card-featured { + background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%); +} + +.service-card-featured h3 { + color: var(--cream); +} + +.service-card-featured p { + color: var(--light-blue); +} + +/* Emergency card - full width, horizontal layout */ +.service-card-emergency { + background: linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%); + grid-column: 1 / -1; + display: flex; + flex-wrap: wrap; + align-items: center; + gap: var(--space-md) var(--space-lg); + padding: var(--space-lg) var(--space-xl); +} + +.service-card-emergency .service-icon { + flex-shrink: 0; + margin-block-end: 0; +} + +.service-card-emergency .service-text { + flex: 1; + min-width: 250px; +} + +.service-card-emergency h3 { + margin-block-end: var(--space-xs); +} + +.service-card-emergency h3, +.service-card-emergency p { + color: white; +} + +.service-card-emergency:hover { + transform: none; +} + +.emergency-badge { + position: absolute; + inset-block-start: var(--space-md); + inset-inline-end: var(--space-md); + padding: var(--space-xs) var(--space-sm); + background: white; + color: var(--orange); + font-family: var(--font-display); + font-size: 0.875rem; + font-weight: 600; + border-radius: var(--radius-sm); +} + +.emergency-cta { + flex-shrink: 0; + display: inline-flex; + align-items: center; + gap: var(--space-xs); + padding: var(--space-sm) var(--space-lg); + background: white; + color: var(--orange); + font-family: var(--font-display); + font-weight: 600; + border-radius: var(--radius-md); + transition: transform 0.2s, box-shadow 0.2s; + white-space: nowrap; +} + +.emergency-cta svg { + width: 20px; + height: 20px; +} + +.emergency-cta:hover, +.emergency-cta:focus { + transform: scale(1.05); + box-shadow: var(--shadow-md); +} + +@media (max-width: 600px) { + .service-card-emergency { + padding: var(--space-lg); + flex-direction: column; + text-align: center; + } + + .service-card-emergency .service-icon { + margin-inline: auto; + } + + .service-card-emergency .service-text { + min-width: 0; + } + + .emergency-badge { + inset-block-start: var(--space-sm); + inset-inline-end: var(--space-sm); + } +} + +/* About */ +.about { + padding-block: var(--space-2xl); + background: white; +} + +.about-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-xl); + align-items: center; +} + +@media (max-width: 900px) { + .about-grid { + grid-template-columns: 1fr; + } +} + +.about-content, +.about-visual { + opacity: 0; + transition: opacity 0.6s ease; +} + +.about-content.revealed, +.about-visual.revealed { + opacity: 1; +} + +.about-content h2 { + font-size: clamp(1.75rem, 4vw, 2.5rem); + margin-block-end: var(--space-md); +} + +.about-lead { + font-size: 1.125rem; + color: var(--gray); + margin-block-end: var(--space-lg); +} + +.about-features { + display: flex; + flex-direction: column; + gap: var(--space-md); +} + +.about-features li { + display: flex; + gap: var(--space-sm); +} + +.about-features svg { + flex-shrink: 0; + width: 24px; + height: 24px; + margin-block-start: 2px; + color: var(--orange); +} + +.about-features strong { + display: block; + font-weight: 600; + color: var(--navy); +} + +.about-features span { + font-size: 0.9rem; + color: var(--gray); +} + +.stats-card { + display: flex; + justify-content: space-around; + gap: var(--space-md); + padding: var(--space-xl); + background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%); + border-radius: var(--radius-xl); + text-align: center; +} + +.stat { + display: flex; + flex-direction: column; + gap: var(--space-xs); +} + +@media (max-width: 500px) { + .stats-card { + padding: var(--space-lg); + gap: var(--space-sm); + } + + .stat { + flex-direction: column; + gap: 0; + } +} + +.stat-number { + display: block; + font-family: var(--font-display); + font-size: clamp(1.75rem, 5vw, 2.5rem); + font-weight: 600; + color: var(--orange); +} + +.stat-label { + font-size: 0.8rem; + color: var(--light-blue); +} + +/* Area */ +.area { + padding-block: var(--space-2xl); + background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%); +} + +.area-content { + display: grid; + grid-template-columns: 1.5fr 1fr; + gap: var(--space-xl); + align-items: center; + opacity: 0; + transition: opacity 0.6s ease; +} + +.area-content.revealed { + opacity: 1; +} + +@media (max-width: 768px) { + .area-content { + grid-template-columns: 1fr; + } +} + +.area-map svg { + width: 100%; + max-width: 500px; + margin-inline: auto; +} + +.area-cities h3 { + font-size: 1.25rem; + color: var(--cream); + margin-block-end: var(--space-md); +} + +.area-cities ul { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--space-xs) var(--space-md); +} + +.area-cities li { + position: relative; + padding-inline-start: var(--space-md); + color: var(--cream); + font-size: 0.95rem; +} + +.area-cities li::before { + content: ''; + position: absolute; + inset-inline-start: 0; + inset-block-start: 50%; + transform: translateY(-50%); + width: 6px; + height: 6px; + background: var(--orange); + border-radius: 50%; +} + +/* Contact */ +.contact { + padding-block: var(--space-2xl); + background: var(--cream); +} + +.contact-card { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + gap: var(--space-lg); + padding: var(--space-xl); + background: white; + border-radius: var(--radius-xl); + box-shadow: var(--shadow-lg); + opacity: 0; + transition: opacity 0.6s ease; +} + +.contact-card.revealed { + opacity: 1; +} + +.contact-content h2 { + font-size: clamp(1.5rem, 4vw, 2rem); + margin-block-end: var(--space-xs); +} + +.contact-content p { + color: var(--gray); + margin-block-end: var(--space-md); +} + +.contact-phone { + display: flex; + align-items: center; + gap: var(--space-sm); +} + +.contact-phone svg { + width: 32px; + height: 32px; + color: var(--orange); +} + +.contact-phone a { + font-family: var(--font-display); + font-size: 1.75rem; + font-weight: 600; + color: var(--navy); + transition: color 0.2s; +} + +.contact-phone a:hover, +.contact-phone a:focus { + color: var(--orange); +} + +.contact-cta { + display: flex; + align-items: center; + gap: var(--space-sm); + padding: var(--space-md) var(--space-xl); + background: var(--orange); + color: white; + font-family: var(--font-display); + font-size: 1.25rem; + font-weight: 500; + border-radius: var(--radius-lg); + transition: background 0.2s, transform 0.2s; +} + +.contact-cta svg { + width: 28px; + height: 28px; +} + +.contact-cta:hover, +.contact-cta:focus { + background: var(--orange-dark); + transform: translateY(-3px); + box-shadow: var(--shadow-glow); +} + +/* Footer */ +.site-footer { + padding-block: var(--space-lg); + background: var(--navy-dark); + color: var(--light-blue); +} + +.footer-content { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + gap: var(--space-md); +} + +.footer-brand { + display: flex; + align-items: center; + gap: var(--space-sm); + font-family: var(--font-display); + font-weight: 500; + color: var(--cream); +} + +.footer-logo { + width: 36px; + height: 36px; +} + +.footer-info { + text-align: center; +} + +.footer-info p { + font-size: 0.875rem; + margin-block-end: var(--space-xs); +} + +.footer-info a { + font-family: var(--font-display); + font-size: 1.125rem; + font-weight: 500; + color: var(--orange); + transition: color 0.2s; +} + +.footer-info a:hover, +.footer-info a:focus { + color: var(--orange-light); +} + +.footer-copy { + font-size: 0.8rem; + opacity: 0.7; +} + +@media (max-width: 768px) { + .footer-content { + flex-direction: column; + text-align: center; + } +} + +/* Floating CTA - positioned at inline-end (right in RTL) for thumb reach */ +.floating-cta { + position: fixed; + inset-block-end: var(--space-md); + inset-inline-end: var(--space-md); + z-index: 90; + display: flex; + align-items: center; + gap: var(--space-xs); + padding: var(--space-sm) var(--space-md); + background: var(--orange); + color: white; + font-family: var(--font-display); + font-weight: 500; + border-radius: 50px; + box-shadow: var(--shadow-lg), var(--shadow-glow); + transition: transform 0.2s, box-shadow 0.2s; + animation: pulse 2s ease-in-out infinite; +} + +.floating-cta svg { + width: 24px; + height: 24px; +} + +.floating-cta:hover, +.floating-cta:focus { + transform: scale(1.05); + animation: none; +} + +@keyframes pulse { + 0%, 100% { + box-shadow: var(--shadow-lg), 0 0 20px rgba(255, 107, 53, 0.4); + } + 50% { + box-shadow: var(--shadow-lg), 0 0 40px rgba(255, 107, 53, 0.6); + } +} + +@media (max-width: 500px) { + .floating-cta span { + display: none; + } + + .floating-cta { + padding: var(--space-sm); + border-radius: 50%; + } +} + +/* Focus styles */ +:focus-visible { + outline: 3px solid var(--orange); + outline-offset: 3px; +} + +/* Reveal animation base - fade only, no directional transform for RTL safety */ +[data-reveal] { + transition: opacity 0.6s ease; +} + +/* No-JS fallback */ +.no-js [data-reveal], +.no-js .service-card { + opacity: 1; +} \ No newline at end of file