diff --git a/index.html b/index.html new file mode 100644 index 0000000..1a2b44e --- /dev/null +++ b/index.html @@ -0,0 +1,392 @@ + + + + + + + עמותה 360 | מערכת ניהול מקיפה לעמותות + + + + + + + + + + + + + + +
+ +
+ +
+
+
+

הפלטפורמה המובילה לניהול עמותות בישראל

+

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

+

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

+
+ בקשו הדגמה חינם + גלו את היכולות +
+
+ מהימנים על ידי מאות עמותות +
+
+
+
+
+
+
+
+
+
+
+
+ +
+ עמותה 360 — לוח בקרה +
+
+
+ + + + +
+
+
+
+ 1,247 + תורמים פעילים + +12% +
+
+ ₪847K + תרומות החודש + +8% +
+
+ 384 + מתנדבים + — +
+
+
+
מגמת תרומות — 6 חודשים אחרונים
+
+
ינו׳
+
פבר׳
+
מרץ
+
אפר׳
+
מאי
+
יוני
+
+
+
+
משימות להיום
+
+ ✓ + שליחת תודה לתורמים חדשים +
+
+ + הכנת דוח רבעוני +
+
+ + תיאום משמרת מתנדבים +
+
+
+
+
+
+
+ +
+
+
+ +500 + עמותות משתמשות +
+ +
+ 98% + שביעות רצון +
+ +
+ 24/7 + תמיכה טכנית +
+ +
+ 10+ + שנות פעילות +
+
+
+ +
+
+

היכולות שלנו

+

כלי ניהול שנבנו עבור עמותות

+

לא עוד התאמות של מערכות עסקיות — עמותה 360 נבנתה מהיסוד עבור המגזר השלישי

+
+
+
+
+ +
+

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

+

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

+ + למידע נוסף + + +
+
+
+ +
+

ניהול מתנדבים

+

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

+ + למידע נוסף + + +
+
+
+ +
+

ניהול פרויקטים

+

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

+ + למידע נוסף + + +
+
+
+ +
+

דיווחים לרשויות

+

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

+ + למידע נוסף + + +
+
+
+ +
+

דוחות ואנליטיקה

+

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

+ + למידע נוסף + + +
+
+
+ +
+

אוטומציות

+

תזכורות חכמות, מיילים מתוזמנים ו-workflows — המערכת עובדת בשבילכם.

+ + למידע נוסף + + +
+
+
+ כל היכולות במקום אחד +
+
+ +
+
+

מה אומרים עלינו

+

עמותות שעברו לעמותה 360

+

הצטרפו לקהילה של מנהלים שמשקיעים פחות זמן בניהול ויותר בהשפעה

+
+
+
+
+

״המערכת שינתה לנו את הדרך שבה אנחנו עובדים. במקום 5 אקסלים ו-3 מערכות שונות — הכל במקום אחד. חסכנו לפחות 10 שעות שבועיות של עבודה אדמיניסטרטיבית.״

+
+
+
ר״ח
+
+ רונית חן-מזרחי + מנכ״לית, עמותת ״שער להזדמנות״ +
+
+
+
+
+

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

+
+
+
ד״ל
+
+ דוד לוינסון + גזבר, עמותת ״אופק חדש״ +
+
+
+
+
+

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

+
+
+
מ״כ
+
+ מיכל כהן-דוד + מנהלת מתנדבים, ״יד עוזרת״ +
+
+
+
+
+ לכל סיפורי ההצלחה +
+
+ +
+
+

מוכנים להתחיל?

+

הצטרפו לעמותות שכבר עברו לעבוד חכם

+

קבלו הדגמה אישית בחינם וגלו איך עמותה 360 יכולה לפשט את הניהול היומיומי שלכם.

+
+ קבעו הדגמה חינם + + + צרו קשר + +
+
+
+
+ + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..fbb6446 --- /dev/null +++ b/script.js @@ -0,0 +1,226 @@ +// Navigation Toggle +const navToggle = document.querySelector('.nav-toggle'); +const navMenu = document.querySelector('.nav-menu'); + +if (navToggle && navMenu) { + navToggle.addEventListener('click', () => { + const isExpanded = navToggle.getAttribute('aria-expanded') === 'true'; + navToggle.setAttribute('aria-expanded', !isExpanded); + navMenu.classList.toggle('active'); + }); + + // Close menu when clicking outside + document.addEventListener('click', (e) => { + if (!navToggle.contains(e.target) && !navMenu.contains(e.target)) { + navToggle.setAttribute('aria-expanded', 'false'); + navMenu.classList.remove('active'); + } + }); + + // Close menu on escape key + document.addEventListener('keydown', (e) => { + if (e.key === 'Escape' && navMenu.classList.contains('active')) { + navToggle.setAttribute('aria-expanded', 'false'); + navMenu.classList.remove('active'); + navToggle.focus(); + } + }); +} + +// Reveal on Scroll +const revealElements = document.querySelectorAll('[data-reveal]'); + +const revealObserver = new IntersectionObserver((entries) => { + entries.forEach((entry, index) => { + if (entry.isIntersecting) { + // Stagger the reveal animation + setTimeout(() => { + entry.target.classList.add('revealed'); + }, index * 100); + revealObserver.unobserve(entry.target); + } + }); +}, { + threshold: 0.1, + rootMargin: '0px 0px -50px 0px' +}); + +// Check for reduced motion preference +const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + +if (!prefersReducedMotion) { + revealElements.forEach(el => revealObserver.observe(el)); +} else { + // If user prefers reduced motion, reveal everything immediately + revealElements.forEach(el => el.classList.add('revealed')); +} + +// Animated Counter +const counters = document.querySelectorAll('[data-count]'); + +const counterObserver = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + const counter = entry.target; + const target = parseInt(counter.getAttribute('data-count')); + const duration = 2000; + const step = target / (duration / 16); + let current = 0; + + const updateCounter = () => { + current += step; + if (current < target) { + counter.textContent = Math.floor(current).toLocaleString('he-IL'); + requestAnimationFrame(updateCounter); + } else { + counter.textContent = target.toLocaleString('he-IL'); + } + }; + + if (!prefersReducedMotion) { + updateCounter(); + } else { + counter.textContent = target.toLocaleString('he-IL'); + } + + counterObserver.unobserve(counter); + } + }); +}, { + threshold: 0.5 +}); + +counters.forEach(counter => counterObserver.observe(counter)); + +// Pricing Toggle +const pricingToggle = document.querySelector('.toggle-switch'); +const monthlyLabel = document.querySelector('[data-pricing="monthly"]'); +const annualLabel = document.querySelector('[data-pricing="annual"]'); +const prices = document.querySelectorAll('[data-price-monthly]'); + +if (pricingToggle && prices.length > 0) { + pricingToggle.addEventListener('click', () => { + pricingToggle.classList.toggle('active'); + const isAnnual = pricingToggle.classList.contains('active'); + + if (monthlyLabel) monthlyLabel.classList.toggle('active', !isAnnual); + if (annualLabel) annualLabel.classList.toggle('active', isAnnual); + + prices.forEach(price => { + const monthly = price.getAttribute('data-price-monthly'); + const annual = price.getAttribute('data-price-annual'); + price.innerHTML = isAnnual ? annual : monthly; + }); + }); +} + +// Form Validation and Submission +const contactForm = document.querySelector('.contact-form'); + +if (contactForm) { + contactForm.addEventListener('submit', (e) => { + e.preventDefault(); + + // Basic validation + const required = contactForm.querySelectorAll('[required]'); + let isValid = true; + + required.forEach(field => { + if (!field.value.trim()) { + isValid = false; + field.classList.add('error'); + } else { + field.classList.remove('error'); + } + }); + + // Email validation + const email = contactForm.querySelector('[type="email"]'); + if (email && email.value) { + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + if (!emailRegex.test(email.value)) { + isValid = false; + email.classList.add('error'); + } + } + + if (isValid) { + // Simulate form submission + const submitBtn = contactForm.querySelector('button[type="submit"]'); + const originalText = submitBtn.textContent; + submitBtn.textContent = 'שולח...'; + submitBtn.disabled = true; + + setTimeout(() => { + submitBtn.textContent = 'נשלח בהצלחה!'; + submitBtn.classList.add('success'); + + setTimeout(() => { + contactForm.reset(); + submitBtn.textContent = originalText; + submitBtn.disabled = false; + submitBtn.classList.remove('success'); + }, 3000); + }, 1500); + } + }); +} + +// Newsletter Form +const newsletterForm = document.querySelector('.newsletter-form'); + +if (newsletterForm) { + newsletterForm.addEventListener('submit', (e) => { + e.preventDefault(); + + const email = newsletterForm.querySelector('input[type="email"]'); + const submitBtn = newsletterForm.querySelector('button'); + + if (email && email.value) { + const originalText = submitBtn.textContent; + submitBtn.textContent = 'נרשמת!'; + submitBtn.disabled = true; + + setTimeout(() => { + email.value = ''; + submitBtn.textContent = originalText; + submitBtn.disabled = false; + }, 3000); + } + }); +} + +// 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' + }); + } + }); +}); + +// Header scroll effect +const header = document.querySelector('.site-header'); + +if (header) { + let lastScroll = 0; + + window.addEventListener('scroll', () => { + const currentScroll = window.pageYOffset; + + if (currentScroll > 100) { + header.style.boxShadow = 'var(--shadow-md)'; + } else { + header.style.boxShadow = 'none'; + } + + lastScroll = currentScroll; + }, { passive: true }); +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..5e86c39 --- /dev/null +++ b/style.css @@ -0,0 +1,1658 @@ +:root { + /* Colors */ + --color-primary: #0d9488; + --color-primary-dark: #0f766e; + --color-primary-light: #ccfbf1; + --color-accent: #0891b2; + --color-accent-light: #cffafe; + --color-success: #059669; + --color-success-light: #d1fae5; + + --color-text: #1e293b; + --color-text-muted: #64748b; + --color-text-light: #94a3b8; + + --color-bg: #ffffff; + --color-surface: #f8fafc; + --color-border: #e2e8f0; + + --color-dark: #0f172a; + --color-dark-muted: #1e293b; + + /* Typography */ + --font-family: 'Heebo', -apple-system, BlinkMacSystemFont, sans-serif; + --font-size-xs: 0.75rem; + --font-size-sm: 0.875rem; + --font-size-base: 1rem; + --font-size-lg: 1.125rem; + --font-size-xl: 1.25rem; + --font-size-2xl: 1.5rem; + --font-size-3xl: 2rem; + --font-size-4xl: 2.5rem; + --font-size-5xl: 3.5rem; + + /* Spacing */ + --space-xs: 0.25rem; + --space-sm: 0.5rem; + --space-md: 1rem; + --space-lg: 1.5rem; + --space-xl: 2rem; + --space-2xl: 3rem; + --space-3xl: 4rem; + --space-4xl: 6rem; + + /* Layout */ + --max-width: 1200px; + --header-height: 72px; + + /* Transitions */ + --transition-fast: 150ms ease; + --transition-base: 250ms ease; + --transition-slow: 400ms ease; + + /* Shadows */ + --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); + --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); + --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); + --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1); + + /* Border Radius */ + --radius-sm: 4px; + --radius-md: 8px; + --radius-lg: 12px; + --radius-xl: 16px; + --radius-full: 9999px; +} + +/* Reset & Base */ +*, *::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-family); + font-size: var(--font-size-base); + line-height: 1.7; + color: var(--color-text); + background-color: var(--color-bg); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +h1, h2, h3, h4, h5, h6 { + line-height: 1.3; + font-weight: 600; +} + +h1 { + font-size: var(--font-size-4xl); +} + +h2 { + font-size: var(--font-size-3xl); +} + +h3 { + font-size: var(--font-size-xl); +} + +a { + color: inherit; + text-decoration: none; +} + +img, svg { + display: block; + max-width: 100%; +} + +ul { + list-style: none; +} + +button { + font-family: inherit; + cursor: pointer; + border: none; + background: none; +} + +/* Utility Classes */ +.container { + max-width: var(--max-width); + margin-inline: auto; + padding-inline: var(--space-lg); +} + +/* Header */ +.site-header { + position: fixed; + top: 0; + inset-inline: 0; + z-index: 1000; + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + border-block-end: 1px solid var(--color-border); + height: var(--header-height); +} + +.nav-container { + max-width: var(--max-width); + margin-inline: auto; + padding-inline: var(--space-lg); + height: 100%; + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-xl); +} + +.logo { + display: flex; + align-items: center; + gap: var(--space-sm); + color: var(--color-primary); + font-weight: 600; + font-size: var(--font-size-lg); +} + +.logo-icon { + width: 36px; + height: 36px; +} + +.nav-menu { + display: flex; + align-items: center; + gap: var(--space-lg); +} + +.nav-menu a { + color: var(--color-text-muted); + font-size: var(--font-size-sm); + font-weight: 500; + padding: var(--space-sm) var(--space-xs); + transition: color var(--transition-fast); + position: relative; +} + +.nav-menu a::after { + content: ''; + position: absolute; + inset-inline: 0; + bottom: 0; + height: 2px; + background: var(--color-primary); + transform: scaleX(0); + transition: transform var(--transition-base); +} + +.nav-menu a:hover, +.nav-menu a.active { + color: var(--color-primary); +} + +.nav-menu a:hover::after, +.nav-menu a.active::after { + transform: scaleX(1); +} + +.nav-menu a:focus-visible { + outline: 2px solid var(--color-primary); + outline-offset: 4px; + border-radius: var(--radius-sm); +} + +.nav-cta { + background: var(--color-primary); + color: white; + padding: var(--space-sm) var(--space-lg); + border-radius: var(--radius-full); + font-size: var(--font-size-sm); + font-weight: 500; + transition: background var(--transition-fast), transform var(--transition-fast); +} + +.nav-cta:hover { + background: var(--color-primary-dark); + transform: translateY(-1px); +} + +.nav-cta:focus-visible { + outline: 2px solid var(--color-primary); + outline-offset: 4px; +} + +.nav-toggle { + display: none; + flex-direction: column; + gap: 5px; + padding: var(--space-sm); +} + +.nav-toggle span { + display: block; + width: 24px; + height: 2px; + background: var(--color-text); + transition: transform var(--transition-base), opacity var(--transition-base); +} + +@media (max-width: 900px) { + .nav-toggle { + display: flex; + } + + .nav-menu { + position: fixed; + top: var(--header-height); + inset-inline: 0; + background: var(--color-bg); + flex-direction: column; + padding: var(--space-xl); + gap: var(--space-md); + border-block-end: 1px solid var(--color-border); + transform: translateY(-100%); + opacity: 0; + visibility: hidden; + transition: transform var(--transition-base), opacity var(--transition-base), visibility var(--transition-base); + } + + .nav-menu.active { + transform: translateY(0); + opacity: 1; + visibility: visible; + } + + .nav-toggle[aria-expanded="true"] span:nth-child(1) { + transform: rotate(45deg) translate(5px, 5px); + } + + .nav-toggle[aria-expanded="true"] span:nth-child(2) { + opacity: 0; + } + + .nav-toggle[aria-expanded="true"] span:nth-child(3) { + transform: rotate(-45deg) translate(5px, -5px); + } + + .nav-cta { + display: none; + } +} + +/* Buttons */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: var(--space-sm); + padding: var(--space-md) var(--space-xl); + border-radius: var(--radius-md); + font-size: var(--font-size-base); + font-weight: 500; + transition: all var(--transition-fast); + cursor: pointer; + border: 2px solid transparent; +} + +.btn:focus-visible { + outline: 2px solid var(--color-primary); + outline-offset: 4px; +} + +.btn-primary { + background: var(--color-primary); + color: white; +} + +.btn-primary:hover { + background: var(--color-primary-dark); + transform: translateY(-2px); + box-shadow: var(--shadow-lg); +} + +.btn-secondary { + background: var(--color-surface); + color: var(--color-text); + border-color: var(--color-border); +} + +.btn-secondary:hover { + background: var(--color-bg); + border-color: var(--color-primary); + color: var(--color-primary); +} + +.btn-outline { + background: transparent; + color: var(--color-primary); + border-color: var(--color-primary); +} + +.btn-outline:hover { + background: var(--color-primary); + color: white; +} + +.btn-ghost { + background: transparent; + color: white; + border-color: rgba(255, 255, 255, 0.3); +} + +.btn-ghost:hover { + background: rgba(255, 255, 255, 0.1); + border-color: white; +} + +.btn-large { + padding: var(--space-lg) var(--space-2xl); + font-size: var(--font-size-lg); +} + +/* Hero Section */ +.hero { + padding-block-start: calc(var(--header-height) + var(--space-4xl)); + padding-block-end: var(--space-4xl); + padding-inline: var(--space-lg); + max-width: var(--max-width); + margin-inline: auto; + display: grid; + grid-template-columns: 1fr 1.1fr; + gap: var(--space-3xl); + align-items: center; +} + +.hero-badge { + display: inline-block; + background: var(--color-primary-light); + color: var(--color-primary-dark); + padding: var(--space-sm) var(--space-lg); + border-radius: var(--radius-full); + font-size: var(--font-size-sm); + font-weight: 500; + margin-block-end: var(--space-lg); +} + +.hero h1 { + font-size: var(--font-size-5xl); + font-weight: 600; + margin-block-end: var(--space-lg); + letter-spacing: -0.02em; +} + +.hero h1 .highlight { + color: var(--color-primary); +} + +.hero-subtitle { + font-size: var(--font-size-lg); + color: var(--color-text-muted); + margin-block-end: var(--space-2xl); + max-width: 540px; + line-height: 1.8; +} + +.hero-actions { + display: flex; + gap: var(--space-md); + flex-wrap: wrap; +} + +.hero-visual { + position: relative; +} + +.dashboard-illustration { + width: 100%; + height: auto; + filter: drop-shadow(var(--shadow-xl)); +} + +@media (max-width: 900px) { + .hero { + grid-template-columns: 1fr; + text-align: center; + padding-block-start: calc(var(--header-height) + var(--space-2xl)); + } + + .hero h1 { + font-size: var(--font-size-3xl); + } + + .hero-subtitle { + margin-inline: auto; + } + + .hero-actions { + justify-content: center; + } + + .hero-visual { + order: -1; + max-width: 500px; + margin-inline: auto; + } +} + +/* Stats Bar */ +.stats-bar { + background: var(--color-surface); + padding-block: var(--space-3xl); + border-block: 1px solid var(--color-border); +} + +.stats-container { + max-width: var(--max-width); + margin-inline: auto; + padding-inline: var(--space-lg); + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: var(--space-xl); +} + +.stat-item { + text-align: center; +} + +.stat-number { + display: block; + font-size: var(--font-size-4xl); + font-weight: 600; + color: var(--color-primary); + line-height: 1.2; +} + +.stat-suffix { + font-size: var(--font-size-2xl); + font-weight: 600; + color: var(--color-primary); +} + +.stat-label { + display: block; + font-size: var(--font-size-sm); + color: var(--color-text-muted); + margin-block-start: var(--space-sm); +} + +@media (max-width: 768px) { + .stats-container { + grid-template-columns: repeat(2, 1fr); + } + + .stat-number { + font-size: var(--font-size-3xl); + } +} + +/* Section Headers */ +.section-header { + text-align: center; + max-width: 700px; + margin-inline: auto; + margin-block-end: var(--space-3xl); +} + +.section-header h2 { + margin-block-end: var(--space-md); +} + +.section-header p { + color: var(--color-text-muted); + font-size: var(--font-size-lg); +} + +/* Features Preview */ +.features-preview { + padding-block: var(--space-4xl); + padding-inline: var(--space-lg); + max-width: var(--max-width); + margin-inline: auto; +} + +.features-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-xl); +} + +.feature-card { + background: var(--color-bg); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-2xl); + transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); +} + +.feature-card:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-lg); + border-color: var(--color-primary-light); +} + +.feature-icon { + width: 56px; + height: 56px; + color: var(--color-primary); + margin-block-end: var(--space-lg); +} + +.feature-card h3 { + margin-block-end: var(--space-sm); + font-weight: 600; +} + +.feature-card p { + color: var(--color-text-muted); + font-size: var(--font-size-sm); + margin-block-end: var(--space-lg); + line-height: 1.7; +} + +.feature-link { + color: var(--color-primary); + font-size: var(--font-size-sm); + font-weight: 500; + display: inline-flex; + align-items: center; + gap: var(--space-sm); + transition: gap var(--transition-fast); +} + +.feature-link:hover { + gap: var(--space-md); +} + +.features-cta { + text-align: center; + margin-block-start: var(--space-3xl); +} + +@media (max-width: 900px) { + .features-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 600px) { + .features-grid { + grid-template-columns: 1fr; + } +} + +/* Testimonials */ +.testimonials { + padding-block: var(--space-4xl); + padding-inline: var(--space-lg); + background: var(--color-surface); +} + +.testimonials-grid { + max-width: var(--max-width); + margin-inline: auto; + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-xl); +} + +.testimonial-card { + background: var(--color-bg); + border-radius: var(--radius-lg); + padding: var(--space-2xl); + box-shadow: var(--shadow-sm); + display: flex; + flex-direction: column; +} + +.testimonial-content { + flex: 1; + margin-block-end: var(--space-xl); +} + +.testimonial-content p { + font-size: var(--font-size-base); + color: var(--color-text); + line-height: 1.8; + position: relative; +} + +.testimonial-content p::before { + content: '"'; + position: absolute; + top: -20px; + right: -10px; + font-size: 60px; + color: var(--color-primary-light); + font-family: Georgia, serif; + line-height: 1; +} + +.testimonial-author { + display: flex; + align-items: center; + gap: var(--space-md); +} + +.author-avatar { + width: 48px; + height: 48px; + border-radius: var(--radius-full); + background: var(--color-primary); + color: white; + display: flex; + align-items: center; + justify-content: center; + font-weight: 600; + font-size: var(--font-size-sm); +} + +.author-info { + display: flex; + flex-direction: column; +} + +.author-info cite { + font-style: normal; + font-weight: 600; + font-size: var(--font-size-sm); +} + +.author-info span { + font-size: var(--font-size-xs); + color: var(--color-text-muted); +} + +.testimonials-cta { + text-align: center; + margin-block-start: var(--space-3xl); +} + +@media (max-width: 900px) { + .testimonials-grid { + grid-template-columns: 1fr; + max-width: 600px; + } +} + +/* CTA Section */ +.cta-section { + background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, var(--color-accent) 100%); + padding-block: var(--space-4xl); + padding-inline: var(--space-lg); + position: relative; + overflow: hidden; +} + +.cta-content { + max-width: 700px; + margin-inline: auto; + text-align: center; + position: relative; + z-index: 1; +} + +.cta-content h2 { + color: white; + margin-block-end: var(--space-lg); +} + +.cta-content p { + color: rgba(255, 255, 255, 0.9); + font-size: var(--font-size-lg); + margin-block-end: var(--space-2xl); +} + +.cta-actions { + display: flex; + gap: var(--space-md); + justify-content: center; + flex-wrap: wrap; +} + +.cta-actions .btn-primary { + background: white; + color: var(--color-primary-dark); +} + +.cta-actions .btn-primary:hover { + background: var(--color-surface); + transform: translateY(-2px); +} + +.cta-decoration { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + opacity: 0.5; +} + +.cta-decoration svg { + width: 100%; + max-width: 600px; +} + +/* Footer */ +.site-footer { + background: var(--color-dark); + color: var(--color-text-light); + padding-block: var(--space-4xl) var(--space-2xl); +} + +.footer-content { + max-width: var(--max-width); + margin-inline: auto; + padding-inline: var(--space-lg); +} + +.footer-main { + display: grid; + grid-template-columns: 1.5fr 2fr; + gap: var(--space-4xl); + padding-block-end: var(--space-3xl); + border-block-end: 1px solid var(--color-dark-muted); +} + +.footer-brand .logo { + color: white; + margin-block-end: var(--space-lg); +} + +.footer-brand p { + max-width: 300px; + font-size: var(--font-size-sm); + line-height: 1.7; +} + +.footer-nav { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-2xl); +} + +.footer-nav-group h4 { + color: white; + font-size: var(--font-size-sm); + font-weight: 600; + margin-block-end: var(--space-lg); +} + +.footer-nav-group ul { + display: flex; + flex-direction: column; + gap: var(--space-sm); +} + +.footer-nav-group a { + font-size: var(--font-size-sm); + transition: color var(--transition-fast); +} + +.footer-nav-group a:hover { + color: white; +} + +.footer-bottom { + display: flex; + justify-content: space-between; + align-items: center; + padding-block-start: var(--space-2xl); + flex-wrap: wrap; + gap: var(--space-lg); +} + +.footer-bottom p { + font-size: var(--font-size-sm); +} + +.footer-legal { + display: flex; + gap: var(--space-xl); +} + +.footer-legal a { + font-size: var(--font-size-sm); + transition: color var(--transition-fast); +} + +.footer-legal a:hover { + color: white; +} + +@media (max-width: 900px) { + .footer-main { + grid-template-columns: 1fr; + gap: var(--space-3xl); + } + + .footer-nav { + grid-template-columns: repeat(3, 1fr); + } +} + +@media (max-width: 600px) { + .footer-nav { + grid-template-columns: 1fr 1fr; + } + + .footer-bottom { + flex-direction: column; + text-align: center; + } +} + +/* Reveal Animations */ +[data-reveal] { + opacity: 0; + transform: translateY(30px); + transition: opacity var(--transition-slow), transform var(--transition-slow); +} + +[data-reveal].revealed { + opacity: 1; + transform: translateY(0); +} + +/* Page specific styles */ + +/* Features Page */ +.page-header { + padding-block-start: calc(var(--header-height) + var(--space-4xl)); + padding-block-end: var(--space-3xl); + padding-inline: var(--space-lg); + text-align: center; + background: var(--color-surface); + border-block-end: 1px solid var(--color-border); +} + +.page-header h1 { + margin-block-end: var(--space-md); +} + +.page-header p { + color: var(--color-text-muted); + font-size: var(--font-size-lg); + max-width: 600px; + margin-inline: auto; +} + +.feature-section { + padding-block: var(--space-4xl); + padding-inline: var(--space-lg); + max-width: var(--max-width); + margin-inline: auto; +} + +.feature-section:nth-child(even) { + background: var(--color-surface); + max-width: none; +} + +.feature-section:nth-child(even) .feature-section-inner { + max-width: var(--max-width); + margin-inline: auto; +} + +.feature-section-inner { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-4xl); + align-items: center; +} + +.feature-section:nth-child(odd) .feature-section-inner { + direction: ltr; +} + +.feature-section:nth-child(odd) .feature-section-content { + direction: rtl; +} + +.feature-section-content h2 { + margin-block-end: var(--space-lg); + color: var(--color-text); +} + +.feature-section-content > p { + color: var(--color-text-muted); + margin-block-end: var(--space-xl); + font-size: var(--font-size-lg); +} + +.feature-list { + display: flex; + flex-direction: column; + gap: var(--space-md); +} + +.feature-list-item { + display: flex; + align-items: flex-start; + gap: var(--space-md); +} + +.feature-list-item svg { + width: 24px; + height: 24px; + color: var(--color-primary); + flex-shrink: 0; + margin-block-start: 2px; +} + +.feature-list-item span { + font-size: var(--font-size-base); +} + +.feature-section-visual { + position: relative; +} + +.feature-illustration { + width: 100%; + height: auto; + border-radius: var(--radius-lg); + box-shadow: var(--shadow-lg); +} + +@media (max-width: 900px) { + .feature-section-inner { + grid-template-columns: 1fr; + gap: var(--space-2xl); + } + + .feature-section:nth-child(odd) .feature-section-inner { + direction: rtl; + } + + .feature-section-visual { + order: -1; + } +} + +/* Pricing Page */ +.pricing-section { + padding-block: var(--space-4xl); + padding-inline: var(--space-lg); + max-width: var(--max-width); + margin-inline: auto; +} + +.pricing-toggle { + display: flex; + align-items: center; + justify-content: center; + gap: var(--space-md); + margin-block-end: var(--space-3xl); +} + +.pricing-toggle span { + font-size: var(--font-size-sm); + color: var(--color-text-muted); +} + +.pricing-toggle span.active { + color: var(--color-text); + font-weight: 500; +} + +.toggle-switch { + width: 56px; + height: 28px; + background: var(--color-border); + border-radius: var(--radius-full); + position: relative; + cursor: pointer; + transition: background var(--transition-fast); +} + +.toggle-switch::after { + content: ''; + position: absolute; + top: 3px; + right: 3px; + width: 22px; + height: 22px; + background: white; + border-radius: var(--radius-full); + box-shadow: var(--shadow-sm); + transition: transform var(--transition-fast); +} + +.toggle-switch.active { + background: var(--color-primary); +} + +.toggle-switch.active::after { + transform: translateX(-28px); +} + +.pricing-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-xl); +} + +.pricing-card { + background: var(--color-bg); + border: 2px solid var(--color-border); + border-radius: var(--radius-xl); + padding: var(--space-2xl); + position: relative; + transition: transform var(--transition-base), box-shadow var(--transition-base); +} + +.pricing-card:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-lg); +} + +.pricing-card.featured { + border-color: var(--color-primary); +} + +.pricing-card.featured::before { + content: 'הכי פופולרי'; + position: absolute; + top: -12px; + right: var(--space-xl); + background: var(--color-primary); + color: white; + padding: var(--space-xs) var(--space-md); + border-radius: var(--radius-full); + font-size: var(--font-size-xs); + font-weight: 500; +} + +.pricing-card-header { + text-align: center; + padding-block-end: var(--space-xl); + border-block-end: 1px solid var(--color-border); + margin-block-end: var(--space-xl); +} + +.pricing-card-header h3 { + margin-block-end: var(--space-sm); +} + +.pricing-card-header .price { + font-size: var(--font-size-4xl); + font-weight: 600; + color: var(--color-primary); +} + +.pricing-card-header .price span { + font-size: var(--font-size-base); + font-weight: 400; + color: var(--color-text-muted); +} + +.pricing-card-header .price-note { + font-size: var(--font-size-sm); + color: var(--color-text-muted); +} + +.pricing-features { + display: flex; + flex-direction: column; + gap: var(--space-md); + margin-block-end: var(--space-2xl); +} + +.pricing-features li { + display: flex; + align-items: center; + gap: var(--space-sm); + font-size: var(--font-size-sm); +} + +.pricing-features li svg { + width: 20px; + height: 20px; + color: var(--color-success); + flex-shrink: 0; +} + +.pricing-card .btn { + width: 100%; +} + +@media (max-width: 900px) { + .pricing-grid { + grid-template-columns: 1fr; + max-width: 400px; + margin-inline: auto; + } +} + +/* About Page */ +.about-hero { + padding-block-start: calc(var(--header-height) + var(--space-4xl)); + padding-block-end: var(--space-4xl); + padding-inline: var(--space-lg); + max-width: var(--max-width); + margin-inline: auto; + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-4xl); + align-items: center; +} + +.about-hero-content h1 { + margin-block-end: var(--space-lg); +} + +.about-hero-content p { + color: var(--color-text-muted); + font-size: var(--font-size-lg); + line-height: 1.8; +} + +.about-hero-visual svg { + width: 100%; + height: auto; +} + +.about-section { + padding-block: var(--space-4xl); + padding-inline: var(--space-lg); +} + +.about-section.alt { + background: var(--color-surface); +} + +.about-section-inner { + max-width: var(--max-width); + margin-inline: auto; +} + +.values-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-xl); +} + +.value-card { + text-align: center; + padding: var(--space-2xl); +} + +.value-card svg { + width: 64px; + height: 64px; + color: var(--color-primary); + margin-inline: auto; + margin-block-end: var(--space-lg); +} + +.value-card h3 { + margin-block-end: var(--space-sm); +} + +.value-card p { + color: var(--color-text-muted); + font-size: var(--font-size-sm); +} + +.team-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: var(--space-xl); +} + +.team-card { + text-align: center; +} + +.team-avatar { + width: 120px; + height: 120px; + border-radius: var(--radius-full); + background: linear-gradient(135deg, var(--color-primary-light), var(--color-accent-light)); + margin-inline: auto; + margin-block-end: var(--space-lg); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--font-size-2xl); + font-weight: 600; + color: var(--color-primary); +} + +.team-card h4 { + margin-block-end: var(--space-xs); +} + +.team-card span { + color: var(--color-text-muted); + font-size: var(--font-size-sm); +} + +@media (max-width: 900px) { + .about-hero { + grid-template-columns: 1fr; + text-align: center; + } + + .about-hero-visual { + order: -1; + max-width: 400px; + margin-inline: auto; + } + + .values-grid { + grid-template-columns: 1fr; + max-width: 400px; + margin-inline: auto; + } + + .team-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 600px) { + .team-grid { + grid-template-columns: 1fr; + max-width: 300px; + margin-inline: auto; + } +} + +/* Contact Page */ +.contact-section { + padding-block: var(--space-4xl); + padding-inline: var(--space-lg); + max-width: var(--max-width); + margin-inline: auto; +} + +.contact-grid { + display: grid; + grid-template-columns: 1fr 1.2fr; + gap: var(--space-4xl); +} + +.contact-info h2 { + margin-block-end: var(--space-lg); +} + +.contact-info > p { + color: var(--color-text-muted); + margin-block-end: var(--space-2xl); +} + +.contact-methods { + display: flex; + flex-direction: column; + gap: var(--space-lg); +} + +.contact-method { + display: flex; + align-items: flex-start; + gap: var(--space-md); +} + +.contact-method svg { + width: 24px; + height: 24px; + color: var(--color-primary); + flex-shrink: 0; +} + +.contact-method h4 { + font-size: var(--font-size-sm); + margin-block-end: var(--space-xs); +} + +.contact-method p, +.contact-method a { + color: var(--color-text-muted); + font-size: var(--font-size-sm); +} + +.contact-method a:hover { + color: var(--color-primary); +} + +.contact-form-wrapper { + background: var(--color-surface); + border-radius: var(--radius-xl); + padding: var(--space-2xl); +} + +.contact-form-wrapper h3 { + margin-block-end: var(--space-xl); +} + +.form-group { + margin-block-end: var(--space-lg); +} + +.form-group label { + display: block; + font-size: var(--font-size-sm); + font-weight: 500; + margin-block-end: var(--space-sm); +} + +.form-group input, +.form-group textarea, +.form-group select { + width: 100%; + padding: var(--space-md); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + font-family: inherit; + font-size: var(--font-size-base); + background: var(--color-bg); + transition: border-color var(--transition-fast), box-shadow var(--transition-fast); +} + +.form-group input:focus, +.form-group textarea:focus, +.form-group select:focus { + outline: none; + border-color: var(--color-primary); + box-shadow: 0 0 0 3px var(--color-primary-light); +} + +.form-group textarea { + min-height: 120px; + resize: vertical; +} + +.form-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-lg); +} + +@media (max-width: 600px) { + .form-row { + grid-template-columns: 1fr; + } +} + +.contact-form .btn { + width: 100%; +} + +@media (max-width: 900px) { + .contact-grid { + grid-template-columns: 1fr; + } +} + +/* Clients Page */ +.clients-logos { + padding-block: var(--space-4xl); + padding-inline: var(--space-lg); + background: var(--color-surface); +} + +.clients-logos-inner { + max-width: var(--max-width); + margin-inline: auto; +} + +.logos-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: var(--space-xl); + margin-block-start: var(--space-3xl); +} + +.logo-item { + background: var(--color-bg); + border-radius: var(--radius-lg); + padding: var(--space-xl); + display: flex; + align-items: center; + justify-content: center; + min-height: 100px; + transition: transform var(--transition-fast), box-shadow var(--transition-fast); +} + +.logo-item:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-md); +} + +.logo-placeholder { + font-weight: 600; + color: var(--color-text-muted); + font-size: var(--font-size-sm); + text-align: center; +} + +@media (max-width: 900px) { + .logos-grid { + grid-template-columns: repeat(3, 1fr); + } +} + +@media (max-width: 600px) { + .logos-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.client-testimonials { + padding-block: var(--space-4xl); + padding-inline: var(--space-lg); +} + +.client-testimonials-inner { + max-width: var(--max-width); + margin-inline: auto; +} + +.client-testimonial-large { + background: var(--color-surface); + border-radius: var(--radius-xl); + padding: var(--space-3xl); + margin-block-start: var(--space-3xl); +} + +.client-testimonial-large blockquote p { + font-size: var(--font-size-xl); + line-height: 1.8; + margin-block-end: var(--space-xl); +} + +.large-testimonial-author { + display: flex; + align-items: center; + gap: var(--space-lg); +} + +.large-author-avatar { + width: 64px; + height: 64px; + border-radius: var(--radius-full); + background: var(--color-primary); + color: white; + display: flex; + align-items: center; + justify-content: center; + font-weight: 600; + font-size: var(--font-size-lg); +} + +.large-author-info cite { + display: block; + font-style: normal; + font-weight: 600; + margin-block-end: var(--space-xs); +} + +.large-author-info span { + color: var(--color-text-muted); + font-size: var(--font-size-sm); +} + +/* Blog Page */ +.blog-section { + padding-block: var(--space-4xl); + padding-inline: var(--space-lg); + max-width: var(--max-width); + margin-inline: auto; +} + +.blog-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-xl); +} + +.blog-card { + background: var(--color-bg); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + overflow: hidden; + transition: transform var(--transition-base), box-shadow var(--transition-base); +} + +.blog-card:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-lg); +} + +.blog-card-image { + aspect-ratio: 16 / 10; + background: linear-gradient(135deg, var(--color-primary-light), var(--color-accent-light)); + display: flex; + align-items: center; + justify-content: center; +} + +.blog-card-image svg { + width: 64px; + height: 64px; + color: var(--color-primary); + opacity: 0.5; +} + +.blog-card-content { + padding: var(--space-xl); +} + +.blog-card-meta { + display: flex; + gap: var(--space-md); + margin-block-end: var(--space-sm); +} + +.blog-card-meta span { + font-size: var(--font-size-xs); + color: var(--color-text-muted); +} + +.blog-card-meta .category { + color: var(--color-primary); + font-weight: 500; +} + +.blog-card h3 { + font-size: var(--font-size-lg); + margin-block-end: var(--space-sm); + line-height: 1.4; +} + +.blog-card h3 a { + transition: color var(--transition-fast); +} + +.blog-card h3 a:hover { + color: var(--color-primary); +} + +.blog-card p { + color: var(--color-text-muted); + font-size: var(--font-size-sm); + line-height: 1.7; +} + +@media (max-width: 900px) { + .blog-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 600px) { + .blog-grid { + grid-template-columns: 1fr; + } +} + +.newsletter-section { + padding-block: var(--space-4xl); + padding-inline: var(--space-lg); + background: var(--color-surface); +} + +.newsletter-inner { + max-width: 600px; + margin-inline: auto; + text-align: center; +} + +.newsletter-inner h2 { + margin-block-end: var(--space-md); +} + +.newsletter-inner > p { + color: var(--color-text-muted); + margin-block-end: var(--space-xl); +} + +.newsletter-form { + display: flex; + gap: var(--space-md); +} + +.newsletter-form input { + flex: 1; + padding: var(--space-md) var(--space-lg); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + font-size: var(--font-size-base); +} + +.newsletter-form input:focus { + outline: none; + border-color: var(--color-primary); + box-shadow: 0 0 0 3px var(--color-primary-light); +} + +@media (max-width: 600px) { + .newsletter-form { + flex-direction: column; + } + + .newsletter-form .btn { + width: 100%; + } +} \ No newline at end of file