From 0c65b5e2d151245dd00ea126a327955cef9f2d0f Mon Sep 17 00:00:00 2001 From: ccadmingit1 Date: Wed, 2 Sep 2026 20:14:57 +0000 Subject: [PATCH] Initial AI-generated site --- contact.html | 190 +++++++ index.html | 400 +++++++++++++++ script.js | 188 +++++++ style.css | 1334 ++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 2112 insertions(+) create mode 100644 contact.html create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..ed47ea9 --- /dev/null +++ b/contact.html @@ -0,0 +1,190 @@ + + + + + + צור קשר | Est Trade + + + + + + + + + + + + + +
+ +
+ +
+
+
+ +
+
+
+ צור קשר +

נשמח לשמוע מכם

+

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

+
+
+
+ +
+
+
+
+
+
+ + + +
+
+ + +
+
+
+ + + +
+
+ + + +
+
+
+ + +
+
+ + + +
+ +

* שדות חובה

+
+ +
+ +
+
+
+
+ + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..c188b99 --- /dev/null +++ b/index.html @@ -0,0 +1,400 @@ + + + + + + Est Trade | יבוא ויצוא מקצועי לעסקים + + + + + + + + + + + + + +
+ +
+ +
+
+
+ +
+
+

+ פתרונות + יבוא ויצוא + לעסקים +

+

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

+
+ בקשת הצעת מחיר + למידע נוסף +
+
+
+ 20+ + שנות ניסיון +
+
+ 500+ + לקוחות פעילים +
+
+ 15K+ + פריטים במלאי +
+
+
+
+ +
+
+
+
+ מי אנחנו +

ניסיון וותק בענף היבוא והיצוא

+

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

+

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

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

קטגוריות מוצרים

+

מגוון רחב של מוצרים ופתרונות לכל תעשייה

+
+
+
+
+ +
+

ציוד תעשייתי

+

מכונות, כלי עבודה וציוד לקווי ייצור מהמותגים המובילים בעולם.

+
+
+
+ +
+

חומרי גלם

+

מתכות, פלסטיקה, רכיבים כימיים וחומרי בסיס לתעשייה.

+
+
+
+ +
+

ציוד בנייה

+

חומרי בניין, כלים וציוד לקבלנים ולפרויקטים גדולים.

+
+
+
+ +
+

אלקטרוניקה

+

רכיבים אלקטרוניים, מעגלים ופתרונות טכנולוגיים.

+
+
+
+ +
+

לוגיסטיקה

+

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

+
+
+
+

לא מצאתם?

+

נשמח לעזור לכם למצוא את המוצר המתאים

+ דברו איתנו +
+
+
+
+
+ +
+
+
+ למה Est Trade +

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

+
+
+
+ +
+

אמינות ושקיפות

+

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

+
+
+
+ +
+

שירות אישי

+

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

+
+
+
+ +
+

מלאי זמין

+

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

+
+
+
+ +
+

לוגיסטיקה יעילה

+

מערך הפצה ארצי עם זמני אספקה קצרים ומעקב בזמן אמת.

+
+
+
+
+
+ +
+
+
+ שותפים וספקים +

עובדים עם המובילים

+
+
+ + + + + + +
+
+
+ +
+
+
+ לקוחות ממליצים +

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

+
+
+
+
+ +

עובדים עם Est Trade כבר 8 שנים. האמינות והזמינות שלהם יוצאות דופן. תמיד יודעים שאפשר לסמוך עליהם.

+
+
+
מ.כ
+
+ משה כהן + מנכ"ל, תעשיות הצפון +
+
+
+
+
+ +

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

+
+
+
ש.ל
+
+ שרה לוי + רכשת ראשית, אלקטרו-מק +
+
+
+
+
+ +

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

+
+
+
י.ב
+
+ יוסי ברק + בעלים, ברק מתכות +
+
+
+
+
+
+ +
+
+
+

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

+

השאירו פרטים ונחזור אליכם עם הצעת מחיר מותאמת אישית

+ בקשת הצעת מחיר +
+
+
+
+ + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..e7a6ddf --- /dev/null +++ b/script.js @@ -0,0 +1,188 @@ +(function() { + 'use strict'; + + // Mobile Navigation Toggle + const navToggle = document.querySelector('.nav-toggle'); + const navLinks = document.querySelector('.nav-links'); + + if (navToggle && navLinks) { + navToggle.addEventListener('click', function() { + const isExpanded = this.getAttribute('aria-expanded') === 'true'; + this.setAttribute('aria-expanded', !isExpanded); + navLinks.classList.toggle('is-open'); + }); + + // Close menu when clicking a link + navLinks.querySelectorAll('a').forEach(function(link) { + link.addEventListener('click', function() { + navToggle.setAttribute('aria-expanded', 'false'); + navLinks.classList.remove('is-open'); + }); + }); + + // Close menu when clicking outside + document.addEventListener('click', function(e) { + if (!navToggle.contains(e.target) && !navLinks.contains(e.target)) { + navToggle.setAttribute('aria-expanded', 'false'); + navLinks.classList.remove('is-open'); + } + }); + } + + // Scroll Reveal Animation + const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + + if (!prefersReducedMotion) { + const revealElements = document.querySelectorAll( + '.about-content, .about-visual, .service-card, .advantage-item, ' + + '.testimonial-card, .partner-logo, .section-header, .hero-content, ' + + '.hero-stats, .info-card, .contact-form' + ); + + revealElements.forEach(function(el) { + el.classList.add('reveal'); + }); + + const observerOptions = { + root: null, + rootMargin: '0px 0px -50px 0px', + threshold: 0.1 + }; + + const revealObserver = new IntersectionObserver(function(entries) { + entries.forEach(function(entry) { + if (entry.isIntersecting) { + entry.target.classList.add('is-visible'); + revealObserver.unobserve(entry.target); + } + }); + }, observerOptions); + + revealElements.forEach(function(el) { + revealObserver.observe(el); + }); + } + + // Contact Form Handling with Validation + const contactForm = document.getElementById('contactForm'); + const formSuccess = document.getElementById('formSuccess'); + + if (contactForm && formSuccess) { + const validators = { + name: { + validate: function(value) { return value.trim().length >= 2; }, + message: 'נא להזין שם מלא' + }, + email: { + validate: function(value) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value); }, + message: 'נא להזין כתובת אימייל תקינה' + }, + phone: { + validate: function(value) { return /^[\d\-\+\s]{9,}$/.test(value); }, + message: 'נא להזין מספר טלפון תקין' + }, + message: { + validate: function(value) { return value.trim().length >= 10; }, + message: 'נא להזין הודעה (לפחות 10 תווים)' + } + }; + + function validateField(field) { + const validator = validators[field.name]; + if (!validator) return true; + + const errorEl = field.parentElement.querySelector('.form-error'); + const isValid = validator.validate(field.value); + + if (!isValid) { + field.classList.add('is-invalid'); + if (errorEl) errorEl.textContent = validator.message; + } else { + field.classList.remove('is-invalid'); + if (errorEl) errorEl.textContent = ''; + } + + return isValid; + } + + // Real-time validation on blur + Object.keys(validators).forEach(function(fieldName) { + const field = contactForm.querySelector('[name="' + fieldName + '"]'); + if (field) { + field.addEventListener('blur', function() { + validateField(this); + }); + field.addEventListener('input', function() { + if (this.classList.contains('is-invalid')) { + validateField(this); + } + }); + } + }); + + contactForm.addEventListener('submit', function(e) { + e.preventDefault(); + + let isFormValid = true; + + Object.keys(validators).forEach(function(fieldName) { + const field = contactForm.querySelector('[name="' + fieldName + '"]'); + if (field && !validateField(field)) { + isFormValid = false; + } + }); + + if (!isFormValid) { + const firstInvalid = contactForm.querySelector('.is-invalid'); + if (firstInvalid) firstInvalid.focus(); + return; + } + + const submitBtn = contactForm.querySelector('button[type="submit"]'); + const originalText = submitBtn.textContent; + submitBtn.textContent = 'שולח...'; + submitBtn.disabled = true; + + setTimeout(function() { + contactForm.hidden = true; + formSuccess.hidden = false; + }, 1000); + }); + } + + // Smooth scroll for anchor links with header offset + document.querySelectorAll('a[href^="#"]').forEach(function(anchor) { + anchor.addEventListener('click', function(e) { + const targetId = this.getAttribute('href'); + if (targetId === '#') return; + + const targetElement = document.querySelector(targetId); + if (targetElement) { + e.preventDefault(); + const headerHeight = document.querySelector('.site-header').offsetHeight; + const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - headerHeight - 20; + + window.scrollTo({ + top: targetPosition, + behavior: prefersReducedMotion ? 'auto' : 'smooth' + }); + } + }); + }); + + // Header background enhancement on scroll + const header = document.querySelector('.site-header'); + + if (header) { + window.addEventListener('scroll', function() { + const currentScroll = window.pageYOffset; + + if (currentScroll > 100) { + header.style.background = 'rgba(10, 22, 40, 0.98)'; + } else { + header.style.background = 'rgba(10, 22, 40, 0.95)'; + } + }, { passive: true }); + } + +})(); diff --git a/style.css b/style.css new file mode 100644 index 0000000..e337a10 --- /dev/null +++ b/style.css @@ -0,0 +1,1334 @@ +:root { + --font-body: 'Heebo', sans-serif; + --font-display: 'Rubik', sans-serif; + + --bg-dark: #0a1628; + --bg-darker: #060d18; + --bg-light: #f8f9fb; + --bg-card: #ffffff; + + --primary: #1a2d4a; + --primary-light: #2a4266; + --primary-dark: #0d1a2e; + + --accent: #e8732d; + --accent-dark: #c55d1e; + --accent-light: #f5924d; + + --gray-100: #f4f5f7; + --gray-200: #e8eaed; + --gray-300: #d1d5db; + --gray-400: #9ca3af; + --gray-500: #6b7280; + --gray-600: #4b5563; + --gray-700: #374151; + --gray-800: #1f2937; + + --text-primary: #1a1f2e; + --text-secondary: #4a5568; + --text-light: #f8f9fb; + --text-muted: #6b7280; + + --error: #dc2626; + --error-light: #fef2f2; + + --radius-sm: 4px; + --radius-md: 8px; + --radius-lg: 16px; + --radius-xl: 24px; + + --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); + --shadow-md: 0 4px 12px rgba(0,0,0,0.08); + --shadow-lg: 0 12px 32px rgba(0,0,0,0.12); + --shadow-xl: 0 24px 48px rgba(0,0,0,0.16); + + --transition-fast: 150ms ease; + --transition-base: 250ms ease; + --transition-slow: 400ms ease; + + --container-max: 1200px; + --header-height: 80px; +} + +*, +*::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: 16px; + line-height: 1.7; + color: var(--text-primary); + background-color: var(--bg-light); + -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; +} + +a { + color: inherit; + text-decoration: none; +} + +img, svg { + display: block; + max-width: 100%; +} + +ul { + list-style: none; +} + +button, input, select, textarea { + font: inherit; + color: inherit; +} + +.container { + width: 100%; + max-width: var(--container-max); + margin-inline: auto; + padding-inline: 24px; +} + +@media (min-width: 768px) { + .container { + padding-inline: 40px; + } +} + +/* ======================== + SKIP LINK + ======================== */ + +.skip-link { + position: absolute; + top: -100%; + left: 50%; + transform: translateX(-50%); + padding: 12px 24px; + background: var(--accent); + color: var(--text-light); + font-weight: 500; + border-radius: var(--radius-md); + z-index: 9999; + transition: top var(--transition-fast); +} + +.skip-link:focus { + top: 16px; + outline: 3px solid var(--accent-light); + outline-offset: 2px; +} + +/* ======================== + HEADER & NAVIGATION + ======================== */ + +.site-header { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 1000; + background: rgba(10, 22, 40, 0.95); + backdrop-filter: blur(12px); + border-bottom: 1px solid rgba(255,255,255,0.05); + transition: background var(--transition-fast); +} + +.nav-container { + display: flex; + align-items: center; + justify-content: space-between; + height: var(--header-height); + max-width: var(--container-max); + margin-inline: auto; + padding-inline: 24px; +} + +.logo { + display: flex; + align-items: center; + gap: 12px; +} + +.logo-icon { + width: 40px; + height: 40px; +} + +.logo-text { + font-family: var(--font-display); + font-size: 1.25rem; + font-weight: 600; + color: var(--text-light); +} + +.nav-toggle { + display: flex; + flex-direction: column; + justify-content: center; + gap: 5px; + width: 32px; + height: 32px; + background: none; + border: none; + cursor: pointer; +} + +.nav-toggle span { + display: block; + width: 24px; + height: 2px; + background: var(--text-light); + transition: var(--transition-fast); +} + +.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-links { + display: none; + position: absolute; + top: var(--header-height); + left: 0; + right: 0; + background: var(--bg-dark); + padding: 24px; + flex-direction: column; + gap: 8px; + border-top: 1px solid rgba(255,255,255,0.05); +} + +.nav-links.is-open { + display: flex; +} + +.nav-links li a { + display: block; + padding: 12px 16px; + color: var(--gray-300); + font-size: 0.95rem; + font-weight: 400; + border-radius: var(--radius-md); + transition: var(--transition-fast); +} + +.nav-links li a:hover, +.nav-links li a:focus { + color: var(--text-light); + background: rgba(255,255,255,0.05); +} + +.nav-links .nav-cta { + background: var(--accent); + color: var(--text-light); + text-align: center; + font-weight: 500; +} + +.nav-links .nav-cta:hover, +.nav-links .nav-cta:focus { + background: var(--accent-dark); + color: var(--text-light); +} + +@media (min-width: 900px) { + .nav-toggle { + display: none; + } + + .nav-links { + display: flex; + position: static; + flex-direction: row; + align-items: center; + gap: 8px; + background: none; + padding: 0; + border: none; + } + + .nav-links li a { + padding: 8px 16px; + } + + .nav-links .nav-cta { + margin-inline-start: 8px; + padding: 10px 20px; + border-radius: var(--radius-md); + } +} + +/* ======================== + BUTTONS + ======================== */ + +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + padding: 12px 28px; + font-family: var(--font-display); + font-size: 0.95rem; + font-weight: 500; + border-radius: var(--radius-md); + border: 2px solid transparent; + cursor: pointer; + transition: var(--transition-base); + text-align: center; +} + +.btn:focus { + outline: 3px solid var(--accent-light); + outline-offset: 2px; +} + +.btn:focus:not(:focus-visible) { + outline: none; +} + +.btn:focus-visible { + outline: 3px solid var(--accent-light); + outline-offset: 2px; +} + +.btn-primary { + background: var(--accent); + color: var(--text-light); + border-color: var(--accent); +} + +.btn-primary:hover { + background: var(--accent-dark); + border-color: var(--accent-dark); + transform: translateY(-2px); + box-shadow: var(--shadow-lg); +} + +.btn-secondary { + background: transparent; + color: var(--text-light); + border-color: rgba(255,255,255,0.3); +} + +.btn-secondary:hover { + background: rgba(255,255,255,0.1); + border-color: rgba(255,255,255,0.5); +} + +.btn-accent { + background: var(--bg-dark); + color: var(--text-light); +} + +.btn-accent:hover { + background: var(--primary); +} + +.btn-outline { + background: transparent; + color: var(--accent); + border-color: var(--accent); +} + +.btn-outline:hover { + background: var(--accent); + color: var(--text-light); +} + +.btn-large { + padding: 16px 36px; + font-size: 1rem; +} + +/* ======================== + SECTION UTILITIES + ======================== */ + +.section-tag { + display: inline-block; + padding: 6px 16px; + background: rgba(232, 115, 45, 0.1); + color: var(--accent); + font-family: var(--font-display); + font-size: 0.8rem; + font-weight: 500; + border-radius: 100px; + margin-bottom: 16px; +} + +.section-title { + font-size: clamp(1.75rem, 4vw, 2.5rem); + color: var(--text-primary); + margin-bottom: 16px; +} + +.section-desc { + font-size: 1.1rem; + color: var(--text-secondary); + max-width: 600px; +} + +.section-header { + margin-bottom: 48px; +} + +.section-header-center { + text-align: center; +} + +.section-header-center .section-desc { + margin-inline: auto; +} + +/* ======================== + HERO SECTION + ======================== */ + +.hero { + position: relative; + min-height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + padding-top: calc(var(--header-height) + 40px); + padding-bottom: 60px; + overflow: hidden; +} + +.hero-bg { + position: absolute; + inset: 0; + z-index: -1; +} + +.hero-pattern { + width: 100%; + height: 100%; + object-fit: cover; +} + +.hero-content { + max-width: var(--container-max); + margin-inline: auto; + padding-inline: 24px; + text-align: center; +} + +@media (min-width: 768px) { + .hero-content { + text-align: start; + padding-inline: 40px; + } +} + +.hero-title { + margin-bottom: 24px; +} + +.hero-title-line { + display: block; + font-size: clamp(2.5rem, 8vw, 4.5rem); + font-weight: 600; + color: var(--text-light); + line-height: 1.1; +} + +.hero-title-accent { + color: var(--accent); +} + +.hero-subtitle { + font-size: clamp(1rem, 2.5vw, 1.25rem); + color: var(--gray-200); + max-width: 540px; + margin-bottom: 32px; + line-height: 1.7; +} + +@media (min-width: 768px) { + .hero-subtitle { + margin-bottom: 40px; + } +} + +.hero-actions { + display: flex; + flex-wrap: wrap; + gap: 16px; + justify-content: center; + margin-bottom: 48px; +} + +@media (min-width: 768px) { + .hero-actions { + justify-content: flex-start; + } +} + +.hero-stats { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 24px; + max-width: 480px; + margin-inline: auto; + padding: 32px; + background: rgba(255,255,255,0.03); + border: 1px solid rgba(255,255,255,0.08); + border-radius: var(--radius-lg); +} + +@media (min-width: 768px) { + .hero-stats { + margin-inline-start: 0; + } +} + +.stat-item { + text-align: center; +} + +.stat-number { + display: block; + font-family: var(--font-display); + font-size: clamp(1.5rem, 4vw, 2.25rem); + font-weight: 600; + color: var(--accent); + line-height: 1; + margin-bottom: 8px; +} + +.stat-label { + font-size: 0.85rem; + color: var(--gray-100); +} + +/* ======================== + ABOUT SECTION + ======================== */ + +.about { + padding: 80px 0; + background: var(--bg-light); +} + +@media (min-width: 768px) { + .about { + padding: 120px 0; + } +} + +.about-grid { + display: grid; + gap: 48px; + align-items: center; +} + +@media (min-width: 900px) { + .about-grid { + grid-template-columns: 1fr 1fr; + gap: 80px; + } +} + +.about-content .section-title { + margin-bottom: 24px; +} + +.about-text { + color: var(--text-secondary); + margin-bottom: 16px; + font-size: 1.05rem; + line-height: 1.7; +} + +.about-list { + margin-top: 32px; + display: flex; + flex-direction: column; + gap: 16px; +} + +.about-list li { + display: flex; + align-items: center; + gap: 12px; + font-weight: 500; + color: var(--text-primary); +} + +.about-list svg { + width: 24px; + height: 24px; + flex-shrink: 0; +} + +.about-visual { + display: flex; + justify-content: center; +} + +.about-illustration { + width: 100%; + max-width: 400px; +} + +/* ======================== + SERVICES SECTION + ======================== */ + +.services { + padding: 80px 0; + background: var(--bg-card); +} + +@media (min-width: 768px) { + .services { + padding: 120px 0; + } +} + +.services-grid { + display: grid; + gap: 24px; +} + +@media (min-width: 600px) { + .services-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (min-width: 1000px) { + .services-grid { + grid-template-columns: repeat(3, 1fr); + } +} + +.service-card { + padding: 32px; + background: var(--gray-100); + border-radius: var(--radius-lg); + border: 1px solid var(--gray-200); + transition: var(--transition-base); +} + +.service-card:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-lg); + border-color: var(--accent); +} + +.service-icon { + width: 64px; + height: 64px; + margin-bottom: 24px; +} + +.service-icon svg { + width: 100%; + height: 100%; +} + +.service-title { + font-size: 1.25rem; + margin-bottom: 12px; + color: var(--text-primary); +} + +.service-desc { + color: var(--text-secondary); + font-size: 0.95rem; + line-height: 1.7; +} + +.service-card-cta { + background: linear-gradient(135deg, var(--accent), var(--accent-dark)); + border-color: transparent; + display: flex; + align-items: center; + justify-content: center; +} + +.service-cta-content { + text-align: center; +} + +.service-card-cta .service-title { + color: var(--text-light); +} + +.service-card-cta .service-desc { + color: rgba(255,255,255,0.85); + margin-bottom: 24px; +} + +.service-card-cta:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-xl); +} + +/* ======================== + ADVANTAGES SECTION + ======================== */ + +.advantages { + padding: 80px 0; + background: var(--bg-dark); +} + +@media (min-width: 768px) { + .advantages { + padding: 120px 0; + } +} + +.advantages .section-tag { + background: rgba(232, 115, 45, 0.15); +} + +.advantages .section-title { + color: var(--text-light); +} + +.advantages-grid { + display: grid; + gap: 32px; +} + +@media (min-width: 768px) { + .advantages-grid { + grid-template-columns: repeat(2, 1fr); + gap: 48px; + } +} + +.advantage-item { + display: flex; + gap: 24px; + padding: 32px; + background: rgba(255,255,255,0.03); + border: 1px solid rgba(255,255,255,0.08); + border-radius: var(--radius-lg); + transition: var(--transition-base); +} + +.advantage-item:hover { + background: rgba(255,255,255,0.05); + border-color: var(--accent); +} + +.advantage-number { + font-family: var(--font-display); + font-size: 2rem; + font-weight: 600; + color: var(--accent); + line-height: 1; + opacity: 0.8; +} + +.advantage-content h3 { + font-size: 1.25rem; + color: var(--text-light); + margin-bottom: 8px; +} + +.advantage-content p { + color: var(--gray-200); + font-size: 0.95rem; + line-height: 1.7; +} + +/* ======================== + PARTNERS SECTION + ======================== */ + +.partners { + padding: 80px 0; + background: var(--gray-100); +} + +@media (min-width: 768px) { + .partners { + padding: 120px 0; + } +} + +.partners-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 24px; + align-items: center; +} + +@media (min-width: 600px) { + .partners-grid { + grid-template-columns: repeat(3, 1fr); + } +} + +@media (min-width: 900px) { + .partners-grid { + grid-template-columns: repeat(6, 1fr); + } +} + +.partner-logo { + padding: 16px; + opacity: 0.7; + transition: var(--transition-base); +} + +.partner-logo:hover { + opacity: 1; +} + +.partner-logo svg { + width: 100%; + height: 60px; +} + +/* ======================== + TESTIMONIALS SECTION + ======================== */ + +.testimonials { + padding: 80px 0; + background: var(--bg-card); +} + +@media (min-width: 768px) { + .testimonials { + padding: 120px 0; + } +} + +.testimonials-grid { + display: grid; + gap: 24px; +} + +@media (min-width: 768px) { + .testimonials-grid { + grid-template-columns: 1fr 1fr; + } +} + +@media (min-width: 1000px) { + .testimonials-grid { + grid-template-columns: 1.1fr 1fr 1fr; + } +} + +.testimonial-card { + padding: 32px; + background: var(--gray-100); + border-radius: var(--radius-lg); + border: 1px solid var(--gray-200); + display: flex; + flex-direction: column; +} + +.testimonial-featured { + background: var(--bg-dark); + border-color: transparent; +} + +.testimonial-featured .testimonial-content p { + color: var(--gray-100); +} + +.testimonial-featured .quote-icon path { + fill: var(--accent); +} + +.testimonial-featured .testimonial-author { + border-top-color: rgba(255,255,255,0.1); +} + +.testimonial-featured .author-info cite { + color: var(--text-light); +} + +.testimonial-featured .author-info span { + color: var(--gray-300); +} + +.testimonial-content { + flex: 1; + position: relative; +} + +.quote-icon { + width: 32px; + height: 32px; + margin-bottom: 16px; +} + +.testimonial-content p { + font-size: 1.05rem; + color: var(--text-secondary); + line-height: 1.7; +} + +.testimonial-author { + display: flex; + align-items: center; + gap: 16px; + margin-top: 24px; + padding-top: 24px; + border-top: 1px solid var(--gray-200); +} + +.author-avatar { + width: 48px; + height: 48px; + background: var(--accent); + color: var(--text-light); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-family: var(--font-display); + font-weight: 500; + font-size: 0.9rem; +} + +.author-info cite { + display: block; + font-style: normal; + font-weight: 600; + color: var(--text-primary); +} + +.author-info span { + font-size: 0.85rem; + color: var(--text-muted); +} + +/* ======================== + CTA SECTION + ======================== */ + +.cta-section { + padding: 100px 0; + background: linear-gradient(135deg, var(--primary), var(--bg-dark)); + position: relative; + overflow: hidden; +} + +@media (min-width: 768px) { + .cta-section { + padding: 120px 0; + } +} + +.cta-content { + text-align: center; + position: relative; + z-index: 1; +} + +.cta-title { + font-size: clamp(1.75rem, 4vw, 2.5rem); + color: var(--text-light); + margin-bottom: 16px; +} + +.cta-text { + font-size: 1.1rem; + color: var(--gray-200); + margin-bottom: 32px; + max-width: 500px; + margin-inline: auto; +} + +/* ======================== + FOOTER + ======================== */ + +.site-footer { + background: var(--bg-darker); + padding: 60px 0 32px; +} + +.footer-grid { + display: grid; + gap: 40px; + margin-bottom: 48px; +} + +@media (min-width: 768px) { + .footer-grid { + grid-template-columns: 2fr 1fr 1fr; + } +} + +.footer-brand .logo { + margin-bottom: 16px; +} + +.footer-tagline { + color: var(--gray-300); + font-size: 0.95rem; +} + +.footer-nav h4, +.footer-contact h4 { + color: var(--text-light); + font-size: 1rem; + margin-bottom: 20px; +} + +.footer-nav ul { + display: flex; + flex-direction: column; + gap: 12px; +} + +.footer-nav a { + color: var(--gray-300); + font-size: 0.95rem; + transition: var(--transition-fast); +} + +.footer-nav a:hover, +.footer-nav a:focus { + color: var(--accent); +} + +.footer-bottom { + padding-top: 32px; + border-top: 1px solid rgba(255,255,255,0.08); + text-align: center; +} + +.footer-bottom p { + color: var(--gray-400); + font-size: 0.9rem; +} + +/* ======================== + CONTACT PAGE + ======================== */ + +.contact-hero { + position: relative; + padding: calc(var(--header-height) + 60px) 0 60px; + overflow: hidden; +} + +.contact-hero-bg { + position: absolute; + inset: 0; + z-index: -1; +} + +.contact-hero-bg svg { + width: 100%; + height: 100%; + object-fit: cover; +} + +.contact-hero-content { + text-align: center; +} + +.page-title { + font-size: clamp(2rem, 5vw, 3rem); + color: var(--text-light); + margin-bottom: 16px; +} + +.page-subtitle { + font-size: 1.1rem; + color: var(--gray-200); + max-width: 500px; + margin-inline: auto; +} + +.contact-main { + padding: 60px 0 100px; + background: var(--bg-light); +} + +.contact-grid { + display: grid; + gap: 48px; +} + +@media (min-width: 900px) { + .contact-grid { + grid-template-columns: 1.5fr 1fr; + gap: 80px; + } +} + +.contact-form-wrapper { + position: relative; +} + +.contact-form { + background: var(--bg-card); + padding: 40px; + border-radius: var(--radius-lg); + box-shadow: var(--shadow-md); +} + +.form-group { + margin-bottom: 24px; +} + +.form-group label { + display: block; + font-size: 0.9rem; + font-weight: 500; + color: var(--text-primary); + margin-bottom: 8px; +} + +.form-group label .required { + color: var(--error); +} + +.form-group input, +.form-group select, +.form-group textarea { + width: 100%; + padding: 14px 18px; + background: var(--gray-100); + border: 2px solid var(--gray-200); + border-radius: var(--radius-md); + font-size: 1rem; + transition: var(--transition-fast); +} + +.form-group input:focus, +.form-group select:focus, +.form-group textarea:focus { + outline: none; + border-color: var(--accent); + background: var(--bg-card); +} + +.form-group input.is-invalid, +.form-group textarea.is-invalid { + border-color: var(--error); + background: var(--error-light); +} + +.form-error { + display: block; + font-size: 0.85rem; + color: var(--error); + margin-top: 6px; + min-height: 1.2em; +} + +.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='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: 16px center; + padding-inline-start: 18px; + padding-inline-end: 44px; +} + +.form-row { + display: grid; + gap: 24px; +} + +@media (min-width: 600px) { + .form-row { + grid-template-columns: 1fr 1fr; + } +} + +.form-note { + margin-top: 16px; + font-size: 0.85rem; + color: var(--text-muted); + text-align: center; +} + +.form-success { + position: absolute; + inset: 0; + background: var(--bg-card); + border-radius: var(--radius-lg); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + padding: 40px; + box-shadow: var(--shadow-md); + opacity: 0; + transition: opacity var(--transition-base); +} + +.form-success:not([hidden]) { + opacity: 1; +} + +.form-success svg { + width: 80px; + height: 80px; + margin-bottom: 24px; +} + +.form-success h3 { + font-size: 1.5rem; + color: var(--text-primary); + margin-bottom: 8px; +} + +.form-success p { + color: var(--text-secondary); +} + +.contact-info { + display: flex; + flex-direction: column; + gap: 24px; +} + +.info-card { + padding: 32px; + background: var(--bg-card); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-sm); +} + +.info-card h3 { + font-size: 1.1rem; + color: var(--text-primary); + margin-bottom: 20px; +} + +.info-list { + display: flex; + flex-direction: column; + gap: 16px; +} + +.info-list li { + display: flex; + align-items: center; + gap: 12px; + color: var(--text-secondary); +} + +.info-list li a { + color: var(--text-secondary); + transition: color var(--transition-fast); +} + +.info-list li a:hover, +.info-list li a:focus { + color: var(--accent); +} + +.info-list svg { + width: 24px; + height: 24px; + flex-shrink: 0; +} + +.hours-list { + display: flex; + flex-direction: column; + gap: 12px; +} + +.hours-list li { + display: flex; + justify-content: space-between; + color: var(--text-secondary); + font-size: 0.95rem; +} + +.info-card-cta { + background: linear-gradient(135deg, var(--primary), var(--bg-dark)); +} + +.info-card-cta h3 { + color: var(--text-light); +} + +.info-card-cta p { + color: var(--gray-200); + margin-bottom: 8px; +} + +.cta-note { + font-size: 0.9rem; + color: var(--gray-300); +} + +/* ======================== + ANIMATIONS + ======================== */ + +.reveal { + opacity: 0; + transform: translateY(30px); + transition: opacity 0.6s ease, transform 0.6s ease; +} + +.reveal.is-visible { + opacity: 1; + transform: translateY(0); +} + +@media (prefers-reduced-motion: reduce) { + .reveal { + opacity: 1; + transform: none; + } +}