diff --git a/index.html b/index.html new file mode 100644 index 0000000..dc4a210 --- /dev/null +++ b/index.html @@ -0,0 +1,442 @@ + + + + + + + + פורטל לימודים | המדריך האישי שלך ללימודים אקדמיים + + + + + + + + + + + + + +
+ +
+ +
+
+ +
+

+ המסע האקדמי + מתחיל כאן +

+

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

+
+ גלה את השירותים שלנו + למד עוד +
+
+ +
+ +
+
+
+ מה אנחנו מציעים +

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

+

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

+
+ +
+
+
+ +
+

מידע על תארים אקדמיים

+

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

+ + לפרטים נוספים + + +
+ +
+
+ +
+

מבחני מיון והכנה

+

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

+ + לפרטים נוספים + + +
+ +
+
+ +
+

חוות דעת אישיות

+

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

+ + לפרטים נוספים + + +
+ +
+
+ +
+

השוואת מוסדות לימוד

+

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

+ + לפרטים נוספים + + +
+
+
+
+ +
+
+
+
+
+ מי אנחנו +

אודות פורטל לימודים

+
+
+

+ פורטל לימודים נולד מתוך הבנה פשוטה: הבחירה היכן ומה ללמוד היא אחת ההחלטות המשמעותיות בחיים, ומגיע לכם מידע אמיתי ומקיף כדי לקבל אותה. +

+

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

+

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

+
+
    +
  • + + מידע מדויק ומעודכן +
    • +
  • + + חוות דעת אותנטיות +
    • +
  • + + חינם לחלוטין +
    • +
+
+ +
+
+
+ +
+
+
+ יש שאלות? +

שאלות נפוצות

+

התשובות לשאלות שהכי מעניינות אתכם

+
+ +
+
+ + מה ההבדל בין אוניברסיטה למכללה? + + +
+

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

+

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

+
+
+ +
+ + מה זה מבחן פסיכומטרי ולמה הוא חשוב? + + +
+

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

+

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

+
+
+ +
+ + מה זה מבחן אמיר״ם ומתי משתמשים בו? + + +
+

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

+

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

+
+
+ +
+ + איך אני יודע איזה תחום לימודים מתאים לי? + + +
+

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

+

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

+
+
+ +
+ + האם חוות הדעת באתר אמיתיות? + + +
+

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

+

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

+
+
+
+
+
+ +
+
+
+
+
+ דברו איתנו +

יצירת קשר

+
+

+ יש לכם שאלה? הצעה לשיפור? רוצים לשתף את החוויה שלכם? נשמח לשמוע מכם! +

+
+
+
+ +
+
+ אימייל + info@limoodim.co.il +
+
+
+
+ +
+
+ זמני מענה + ימים א׳-ה׳, 9:00-17:00 +
+
+
+
+ +
+ +
+ + + נא להזין שם מלא +
+
+ + + נא להזין כתובת אימייל תקינה +
+
+ + + נא לבחור נושא +
+
+ + + נא להזין את תוכן ההודעה +
+ +
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..0928e2b --- /dev/null +++ b/script.js @@ -0,0 +1,213 @@ +(function() { + 'use strict'; + + const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + + // Mobile Navigation Toggle + const navToggle = document.querySelector('.nav-toggle'); + const navLinks = document.querySelector('.nav-links'); + + if (navToggle && navLinks) { + navToggle.addEventListener('click', () => { + const isExpanded = navToggle.getAttribute('aria-expanded') === 'true'; + navToggle.setAttribute('aria-expanded', !isExpanded); + navLinks.classList.toggle('active'); + }); + + navLinks.querySelectorAll('a').forEach(link => { + link.addEventListener('click', () => { + navToggle.setAttribute('aria-expanded', 'false'); + navLinks.classList.remove('active'); + }); + }); + + document.addEventListener('click', (e) => { + if (!navToggle.contains(e.target) && !navLinks.contains(e.target)) { + navToggle.setAttribute('aria-expanded', 'false'); + navLinks.classList.remove('active'); + } + }); + } + + // Reveal on Scroll + const revealElements = document.querySelectorAll('.reveal'); + + if (!prefersReducedMotion && revealElements.length > 0) { + const revealObserver = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('revealed'); + revealObserver.unobserve(entry.target); + } + }); + }, { + threshold: 0.1, + rootMargin: '0px 0px -50px 0px' + }); + + revealElements.forEach(el => revealObserver.observe(el)); + } else { + revealElements.forEach(el => el.classList.add('revealed')); + } + + // Pause blob animations when hero is out of view + const heroBg = document.querySelector('.hero-bg'); + if (heroBg && !prefersReducedMotion) { + const heroObserver = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('in-view'); + } else { + entry.target.classList.remove('in-view'); + } + }); + }, { + threshold: 0 + }); + + heroObserver.observe(heroBg); + } else if (heroBg) { + heroBg.classList.add('in-view'); + } + + // Smooth scroll for anchor links + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function(e) { + const href = this.getAttribute('href'); + if (href === '#') return; + + const target = document.querySelector(href); + if (target) { + e.preventDefault(); + + const headerOffset = 80; + const elementPosition = target.getBoundingClientRect().top; + const offsetPosition = elementPosition + window.pageYOffset - headerOffset; + + if (prefersReducedMotion) { + window.scrollTo(0, offsetPosition); + } else { + window.scrollTo({ + top: offsetPosition, + behavior: 'smooth' + }); + } + } + }); + }); + + // Header shadow on scroll + const header = document.querySelector('.site-header'); + + if (header) { + let ticking = false; + + window.addEventListener('scroll', () => { + if (!ticking) { + window.requestAnimationFrame(() => { + if (window.pageYOffset > 100) { + header.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.08)'; + } else { + header.style.boxShadow = 'none'; + } + ticking = false; + }); + ticking = true; + } + }, { passive: true }); + } + + // Form validation and submission + const contactForm = document.querySelector('.contact-form'); + + if (contactForm) { + const formStatus = contactForm.querySelector('.form-status'); + + // Email validation regex + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + + // Clear error state on input + contactForm.querySelectorAll('input, select, textarea').forEach(field => { + field.addEventListener('input', () => { + const group = field.closest('.form-group'); + if (group) { + group.classList.remove('has-error'); + field.classList.remove('error'); + } + }); + }); + + contactForm.addEventListener('submit', function(e) { + e.preventDefault(); + + // Reset status + formStatus.className = 'form-status'; + formStatus.textContent = ''; + + // Validate fields + const fields = { + name: { el: this.querySelector('#name'), validate: v => v.trim().length > 0 }, + email: { el: this.querySelector('#email'), validate: v => emailRegex.test(v.trim()) }, + subject: { el: this.querySelector('#subject'), validate: v => v.trim().length > 0 }, + message: { el: this.querySelector('#message'), validate: v => v.trim().length > 0 } + }; + + let isValid = true; + let firstError = null; + + Object.values(fields).forEach(({ el, validate }) => { + const group = el.closest('.form-group'); + const valid = validate(el.value); + + if (!valid) { + isValid = false; + group.classList.add('has-error'); + el.classList.add('error'); + if (!firstError) firstError = el; + } else { + group.classList.remove('has-error'); + el.classList.remove('error'); + } + }); + + if (!isValid) { + formStatus.className = 'form-status error'; + formStatus.textContent = 'נא למלא את כל השדות הנדרשים'; + if (firstError) firstError.focus(); + return; + } + + const submitBtn = this.querySelector('button[type="submit"]'); + const originalHTML = submitBtn.innerHTML; + + submitBtn.innerHTML = 'שולח...'; + submitBtn.disabled = true; + + // Simulate form submission + setTimeout(() => { + formStatus.className = 'form-status success'; + formStatus.textContent = 'ההודעה נשלחה בהצלחה! נחזור אליך בהקדם.'; + + submitBtn.innerHTML = 'נשלח בהצלחה ✓'; + submitBtn.style.background = 'var(--teal)'; + + setTimeout(() => { + submitBtn.innerHTML = originalHTML; + submitBtn.style.background = ''; + submitBtn.disabled = false; + contactForm.reset(); + + // Clear success message after a bit + setTimeout(() => { + formStatus.className = 'form-status'; + formStatus.textContent = ''; + }, 3000); + }, 2000); + }, 1500); + }); + } + + // FAQ - native details/summary, no custom animation that fights browser + // The CSS handles the icon rotation; no JS override needed + +})(); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..1546a3f --- /dev/null +++ b/style.css @@ -0,0 +1,1108 @@ +:root { + /* Colors */ + --coral: #FF6B6B; + --orange: #FFA94D; + --yellow: #FFE066; + --teal: #0D9488; + --teal-light: #4ECDC4; + --purple: #9333EA; + --purple-light: #A855F7; + --pink: #F472B6; + + /* Neutrals */ + --white: #FFFFFF; + --gray-50: #FAFAFA; + --gray-100: #F5F5F5; + --gray-200: #E5E5E5; + --gray-300: #D4D4D4; + --gray-400: #A3A3A3; + --gray-500: #737373; + --gray-600: #525252; + --gray-700: #404040; + --gray-800: #262626; + --gray-900: #171717; + + /* Semantic */ + --text-primary: var(--gray-900); + --text-secondary: var(--gray-600); + --text-muted: var(--gray-600); /* Fixed: was --gray-500, now meets AA contrast */ + --link-color: var(--teal); + --link-hover: var(--purple); + + /* Gradients */ + --gradient-warm: linear-gradient(135deg, var(--coral) 0%, var(--orange) 100%); + --gradient-cool: linear-gradient(135deg, var(--purple) 0%, var(--teal-light) 100%); + --gradient-hero: linear-gradient(160deg, #FFF5F5 0%, #F0FDFA 50%, #FAF5FF 100%); + + /* Typography */ + --font-display: 'Rubik', sans-serif; + --font-body: 'Heebo', sans-serif; + + /* 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; + + /* Borders */ + --radius-sm: 8px; + --radius-md: 12px; + --radius-lg: 20px; + --radius-xl: 28px; + --radius-full: 9999px; + + /* Shadows */ + --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04); + --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08); + --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.12); + --shadow-color: 0 8px 30px rgba(13, 148, 136, 0.25); + + /* Transitions */ + --transition-fast: 0.15s ease; + --transition-base: 0.3s ease; + --transition-slow: 0.5s ease; + --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); +} + +/* Reset & Base */ +*, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; + font-size: 16px; +} + +@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; + line-height: 1.7; + color: var(--text-secondary); + background: var(--white); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +h1, h2, h3, h4, h5, h6 { + font-family: var(--font-display); + font-weight: 600; + line-height: 1.3; + color: var(--text-primary); +} + +a { + color: inherit; + text-decoration: none; +} + +img, svg { + display: block; + max-width: 100%; +} + +button, input, select, textarea { + font: inherit; + color: inherit; +} + +ul, ol { + list-style: none; +} + +/* Focus Styles */ +:focus-visible { + outline: 3px solid var(--teal); + outline-offset: 3px; +} + +/* Container */ +.container { + width: 100%; + max-width: 1140px; + margin-inline: auto; + padding-inline: var(--space-lg); +} + +/* Buttons */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: var(--space-sm); + padding: var(--space-md) var(--space-xl); + font-family: var(--font-display); + font-weight: 500; + font-size: 1rem; + border: none; + border-radius: var(--radius-full); + cursor: pointer; + transition: all var(--transition-bounce); +} + +.btn svg { + width: 20px; + height: 20px; + flex-shrink: 0; +} + +.btn-primary { + background: var(--gradient-cool); + color: var(--white); + box-shadow: var(--shadow-color); +} + +.btn-primary:hover { + transform: translateY(-3px) scale(1.02); + box-shadow: 0 12px 40px rgba(13, 148, 136, 0.35); +} + +.btn-secondary { + background: var(--white); + color: var(--text-secondary); + border: 2px solid var(--gray-200); +} + +.btn-secondary:hover { + border-color: var(--teal); + color: var(--teal); + transform: translateY(-3px); +} + +.btn-full { + width: 100%; +} + +/* Header */ +.site-header { + position: fixed; + top: 0; + inset-inline: 0; + z-index: 1000; + background: rgba(255, 255, 255, 0.92); + backdrop-filter: blur(20px); + border-bottom: 1px solid rgba(0, 0, 0, 0.05); + transition: box-shadow var(--transition-base); +} + +.nav-container { + display: flex; + align-items: center; + justify-content: space-between; + max-width: 1140px; + margin-inline: auto; + padding: var(--space-md) var(--space-lg); +} + +.logo { + display: flex; + align-items: center; + gap: var(--space-sm); +} + +.logo-icon { + width: 40px; + height: 40px; +} + +.logo-text { + font-family: var(--font-display); + font-weight: 600; + font-size: 1.25rem; + background: var(--gradient-cool); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} + +.nav-links { + display: flex; + align-items: center; + gap: var(--space-xl); +} + +.nav-links a { + font-weight: 500; + color: var(--text-secondary); + transition: color var(--transition-fast); + position: relative; +} + +.nav-links a:not(.nav-cta)::after { + content: ''; + position: absolute; + bottom: -4px; + inset-inline-start: 0; + width: 0; + height: 2px; + background: var(--gradient-cool); + border-radius: var(--radius-full); + transition: width var(--transition-base); +} + +.nav-links a:not(.nav-cta):hover::after, +.nav-links a:not(.nav-cta):focus::after { + width: 100%; +} + +.nav-links a:not(.nav-cta):hover, +.nav-links a:not(.nav-cta):focus { + color: var(--text-primary); +} + +.nav-cta { + padding: var(--space-sm) var(--space-lg); + background: var(--gradient-warm); + color: var(--white) !important; + border-radius: var(--radius-full); + transition: all var(--transition-bounce); +} + +.nav-cta:hover { + transform: scale(1.05); + box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4); +} + +.nav-toggle { + display: none; + flex-direction: column; + justify-content: center; + gap: 5px; + width: 44px; + height: 44px; + background: none; + border: none; + cursor: pointer; + padding: 10px; +} + +.nav-toggle span { + display: block; + width: 100%; + height: 2px; + background: var(--gray-700); + border-radius: var(--radius-full); + transition: all var(--transition-base); +} + +.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); +} + +/* Hero Section */ +.hero { + position: relative; + min-height: 100vh; + min-height: 100dvh; + display: flex; + align-items: center; + justify-content: center; + padding: calc(80px + var(--space-3xl)) var(--space-lg) var(--space-3xl); + background: var(--gradient-hero); + overflow: hidden; +} + +.hero-bg { + position: absolute; + inset: 0; + overflow: hidden; + pointer-events: none; +} + +.blob { + position: absolute; + border-radius: 50%; + filter: blur(80px); + opacity: 0.5; + will-change: transform; +} + +.blob-1 { + width: 450px; + height: 450px; + background: var(--coral); + top: -15%; + inset-inline-end: -10%; + animation: blobFloat 25s ease-in-out infinite; +} + +.blob-2 { + width: 350px; + height: 350px; + background: var(--teal-light); + bottom: -10%; + inset-inline-start: -5%; + animation: blobFloat 25s ease-in-out infinite reverse; + animation-delay: -8s; +} + +.blob-3 { + width: 280px; + height: 280px; + background: var(--purple-light); + top: 45%; + inset-inline-start: 40%; + animation: blobFloat 25s ease-in-out infinite; + animation-delay: -16s; +} + +@keyframes blobFloat { + 0%, 100% { + transform: translate(0, 0) scale(1); + } + 33% { + transform: translate(25px, -25px) scale(1.05); + } + 66% { + transform: translate(-20px, 15px) scale(0.97); + } +} + +.hero-content { + position: relative; + text-align: center; + max-width: 720px; +} + +.hero-title { + font-size: clamp(2.25rem, 7vw, 4rem); + font-weight: 600; + margin-bottom: var(--space-lg); +} + +.title-line { + display: block; +} + +.title-line.accent { + background: var(--gradient-cool); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} + +.hero-subtitle { + font-size: clamp(1.05rem, 2.2vw, 1.25rem); + color: var(--text-secondary); + margin-bottom: var(--space-2xl); + max-width: 540px; + margin-inline: auto; + line-height: 1.8; +} + +.hero-actions { + display: flex; + flex-wrap: wrap; + gap: var(--space-md); + justify-content: center; +} + +/* Fixed: Direction-agnostic scroll indicator centering */ +.scroll-indicator { + position: absolute; + bottom: var(--space-xl); + inset-inline-start: 50%; + transform: translateX(0); + margin-inline-start: -16px; /* Half of 32px icon width */ + color: var(--gray-400); + animation: bounce 2s ease-in-out infinite; +} + +.scroll-indicator svg { + width: 32px; + height: 32px; +} + +@keyframes bounce { + 0%, 100% { + transform: translateY(0); + } + 50% { + transform: translateY(10px); + } +} + +/* Section Styles */ +section { + padding: var(--space-4xl) 0; +} + +.section-header { + text-align: center; + margin-bottom: var(--space-3xl); +} + +.section-tag { + display: inline-block; + padding: var(--space-sm) var(--space-lg); + background: var(--teal); + color: var(--white); + font-size: 0.9rem; + font-weight: 500; + border-radius: var(--radius-full); + margin-bottom: var(--space-md); +} + +.section-title { + font-size: clamp(1.75rem, 4.5vw, 2.75rem); + margin-bottom: var(--space-md); +} + +.section-desc { + font-size: 1.1rem; + color: var(--text-secondary); + max-width: 560px; + margin-inline: auto; +} + +/* Services Section */ +.services { + background: var(--gray-50); +} + +.services-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--space-xl); +} + +.service-card { + background: var(--white); + padding: var(--space-2xl); + border-radius: var(--radius-xl); + box-shadow: var(--shadow-sm); + transition: all var(--transition-bounce); + border: 2px solid transparent; +} + +.service-card:hover { + transform: translateY(-6px); + box-shadow: var(--shadow-lg); + border-color: var(--gray-100); +} + +.service-card--featured { + grid-column: span 2; + display: grid; + grid-template-columns: auto 1fr auto; + grid-template-rows: auto 1fr; + gap: var(--space-md) var(--space-lg); + align-items: start; +} + +.service-card--featured .service-icon { + grid-row: span 2; +} + +.service-card--featured h3 { + align-self: end; + margin-bottom: 0; +} + +.service-card--featured p { + margin-bottom: 0; +} + +.service-card--featured .service-link { + grid-column: 2; + justify-self: start; +} + +.service-icon { + width: 72px; + height: 72px; + margin-bottom: var(--space-lg); + flex-shrink: 0; +} + +.service-icon svg { + width: 100%; + height: 100%; +} + +.service-card h3 { + font-size: 1.25rem; + margin-bottom: var(--space-md); +} + +.service-card p { + color: var(--text-secondary); + margin-bottom: var(--space-lg); + line-height: 1.8; +} + +.service-link { + display: inline-flex; + align-items: center; + gap: var(--space-sm); + font-weight: 500; + color: var(--teal); + transition: gap var(--transition-base), color var(--transition-fast); +} + +.service-link svg { + width: 20px; + height: 20px; + transition: transform var(--transition-base); +} + +.service-link:hover, +.service-link:focus { + color: var(--purple); + gap: var(--space-md); +} + +.service-link:hover svg, +.service-link:focus svg { + transform: translateX(4px); +} + +[dir="rtl"] .service-link:hover svg, +[dir="rtl"] .service-link:focus svg { + transform: translateX(-4px); +} + +/* About Section */ +.about-layout { + display: grid; + grid-template-columns: 1.1fr 0.9fr; + gap: var(--space-3xl); + align-items: center; +} + +.about-content .section-header { + text-align: start; +} + +.about-text p { + margin-bottom: var(--space-lg); + color: var(--text-secondary); + max-width: 55ch; +} + +.about-features { + display: flex; + flex-wrap: wrap; + gap: var(--space-md); + margin-top: var(--space-xl); +} + +.feature { + display: flex; + align-items: center; + gap: var(--space-sm); + padding: var(--space-sm) var(--space-md); + background: var(--white); + border: 1px solid var(--gray-200); + border-radius: var(--radius-full); +} + +.feature-icon { + width: 24px; + height: 24px; + color: var(--teal); +} + +.feature-icon svg { + width: 100%; + height: 100%; +} + +.feature-text { + font-weight: 500; + color: var(--text-primary); + font-size: 0.95rem; +} + +.about-visual { + display: flex; + align-items: center; + justify-content: center; +} + +.visual-illustration { + width: 100%; + max-width: 320px; +} + +.illustration-svg { + width: 100%; + height: auto; +} + +/* FAQ Section */ +.faq { + background: var(--gradient-hero); +} + +.faq-list { + max-width: 720px; + margin-inline: auto; +} + +.faq-item { + background: var(--white); + border-radius: var(--radius-lg); + margin-bottom: var(--space-md); + box-shadow: var(--shadow-sm); + overflow: hidden; + transition: box-shadow var(--transition-base); +} + +.faq-item:hover { + box-shadow: var(--shadow-md); +} + +.faq-question { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-md); + padding: var(--space-lg) var(--space-xl); + cursor: pointer; + font-weight: 500; + color: var(--text-primary); + transition: color var(--transition-fast); +} + +.faq-question::-webkit-details-marker { + display: none; +} + +.faq-question span { + flex: 1; +} + +.faq-icon { + width: 24px; + height: 24px; + flex-shrink: 0; + color: var(--teal); + transition: transform var(--transition-base); +} + +.faq-item[open] .faq-icon { + transform: rotate(45deg); +} + +.faq-item[open] .faq-question { + color: var(--teal); +} + +.faq-answer { + padding: 0 var(--space-xl) var(--space-lg); + color: var(--text-secondary); + line-height: 1.8; + max-width: 65ch; /* Added: prevents overly long lines */ +} + +.faq-answer p { + margin-bottom: var(--space-md); +} + +.faq-answer p:last-child { + margin-bottom: 0; +} + +/* Contact Section */ +.contact-wrapper { + display: grid; + grid-template-columns: 1fr 1.1fr; + gap: var(--space-3xl); + align-items: start; +} + +.contact-info .section-header { + text-align: start; +} + +.contact-desc { + color: var(--text-secondary); + margin-bottom: var(--space-xl); +} + +.contact-methods { + display: flex; + flex-direction: column; + gap: var(--space-lg); +} + +.contact-method { + display: flex; + align-items: center; + gap: var(--space-md); +} + +.method-icon { + width: 50px; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + background: var(--teal); + border-radius: var(--radius-md); + color: var(--white); + flex-shrink: 0; +} + +.method-icon svg { + width: 24px; + height: 24px; +} + +.method-text { + display: flex; + flex-direction: column; +} + +.method-label { + font-size: 0.85rem; + color: var(--text-muted); +} + +.method-text a { + color: var(--teal); + font-weight: 500; + transition: color var(--transition-fast); +} + +.method-text a:hover { + color: var(--purple); +} + +.contact-form { + background: var(--white); + padding: var(--space-2xl); + border-radius: var(--radius-xl); + box-shadow: var(--shadow-md); +} + +.form-group { + margin-bottom: var(--space-lg); +} + +.form-group label { + display: block; + font-weight: 500; + color: var(--text-primary); + margin-bottom: var(--space-sm); +} + +.form-group input, +.form-group select, +.form-group textarea { + width: 100%; + padding: var(--space-md); + border: 2px solid var(--gray-200); + border-radius: var(--radius-md); + background: var(--gray-50); + transition: all var(--transition-fast); +} + +.form-group input:focus, +.form-group select:focus, +.form-group textarea:focus { + outline: none; + border-color: var(--teal); + background: var(--white); + box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.1); +} + +.form-group input.error, +.form-group select.error, +.form-group textarea.error { + border-color: var(--coral); +} + +.form-group textarea { + resize: vertical; + min-height: 120px; +} + +.form-group select { + cursor: pointer; + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: left 12px center; + background-size: 20px; + padding-inline-start: 40px; +} + +[dir="ltr"] .form-group select { + background-position: right 12px center; + padding-inline-start: var(--space-md); + padding-inline-end: 40px; +} + +.form-error { + color: var(--coral); + font-size: 0.875rem; + margin-top: var(--space-xs); + display: none; +} + +.form-group.has-error .form-error { + display: block; +} + +.form-status { + padding: var(--space-md); + border-radius: var(--radius-md); + margin-bottom: var(--space-lg); + display: none; +} + +.form-status.success { + display: block; + background: rgba(13, 148, 136, 0.1); + color: var(--teal); + border: 1px solid var(--teal); +} + +.form-status.error { + display: block; + background: rgba(255, 107, 107, 0.1); + color: var(--coral); + border: 1px solid var(--coral); +} + +/* Footer */ +.site-footer { + background: var(--gray-900); + color: var(--gray-400); + padding: var(--space-3xl) 0 var(--space-xl); +} + +.footer-content { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: var(--space-xl); + padding-bottom: var(--space-xl); + border-bottom: 1px solid var(--gray-800); +} + +.footer-brand .logo-text { + color: var(--white); + background: none; + -webkit-background-clip: unset; + background-clip: unset; +} + +.footer-tagline { + margin-top: var(--space-sm); + font-size: 0.9rem; +} + +.footer-nav { + display: flex; + gap: var(--space-xl); + flex-wrap: wrap; +} + +.footer-nav a { + transition: color var(--transition-fast); +} + +.footer-nav a:hover, +.footer-nav a:focus { + color: var(--teal-light); +} + +.footer-bottom { + padding-top: var(--space-xl); + text-align: center; + font-size: 0.9rem; +} + +/* Reveal Animations */ +.reveal { + opacity: 0; + transform: translateY(24px); + transition: opacity 0.6s ease, transform 0.6s ease; +} + +.reveal.revealed { + opacity: 1; + transform: translateY(0); +} + +.service-card.reveal { + transition-delay: calc(var(--delay, 0) * 0.1s); +} + +.faq-item.reveal { + transition-delay: calc(var(--delay, 0) * 0.08s); +} + +/* Responsive */ +@media (max-width: 1024px) { + .service-card--featured { + grid-column: span 2; + display: block; + } + + .service-card--featured .service-icon { + margin-bottom: var(--space-lg); + } + + .service-card--featured h3 { + margin-bottom: var(--space-md); + } + + .service-card--featured p { + margin-bottom: var(--space-lg); + } +} + +@media (max-width: 968px) { + .about-layout, + .contact-wrapper { + grid-template-columns: 1fr; + gap: var(--space-2xl); + } + + .about-visual { + order: -1; + } + + .visual-illustration { + max-width: 260px; + } + + .about-content .section-header, + .contact-info .section-header { + text-align: center; + } + + .about-text p { + max-width: none; + } + + .about-features { + justify-content: center; + } + + .contact-desc { + text-align: center; + } + + .contact-methods { + align-items: center; + } +} + +@media (max-width: 768px) { + .nav-toggle { + display: flex; + } + + .nav-links { + position: fixed; + top: 72px; + inset-inline: 0; + flex-direction: column; + background: var(--white); + padding: var(--space-xl); + gap: var(--space-lg); + box-shadow: var(--shadow-lg); + transform: translateY(-100%); + opacity: 0; + visibility: hidden; + transition: all var(--transition-base); + } + + .nav-links.active { + transform: translateY(0); + opacity: 1; + visibility: visible; + } + + .hero { + padding-top: calc(72px + var(--space-2xl)); + } + + section { + padding: var(--space-3xl) 0; + } + + /* Services: keep 2 columns for non-featured cards on tablet */ + .services-grid { + grid-template-columns: 1fr; + } +} + +@media (max-width: 480px) { + :root { + --space-lg: 1.25rem; + --space-xl: 1.5rem; + --space-2xl: 2rem; + --space-3xl: 2.5rem; + --space-4xl: 3rem; + } + + .hero-actions { + flex-direction: column; + width: 100%; + } + + .hero-actions .btn { + width: 100%; + } + + .footer-content { + flex-direction: column; + text-align: center; + } + + .footer-nav { + justify-content: center; + gap: var(--space-md); + } + + .contact-form { + padding: var(--space-lg); + } + + .service-card { + padding: var(--space-xl); + } +} + +/* Pause animations when off-screen (intersection observer handles this in JS) */ +@media (prefers-reduced-motion: no-preference) { + .blob { + animation-play-state: paused; + } + + .hero-bg.in-view .blob { + animation-play-state: running; + } +} \ No newline at end of file