diff --git a/index.html b/index.html new file mode 100644 index 0000000..7682aac --- /dev/null +++ b/index.html @@ -0,0 +1,539 @@ + + + + + + קרוב לטבע - כל מה שחיית המחמד שלך צריכה + + + + + + + + + + + + +
+ +
+ +
+ +
+
+
+
+
+
+
+
+ + למעלה מ-30,000 הזמנות מרוצות +
+

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

+

+ מותגים מובילים כמו מונג', הילס, ברבקטו ונקסגארד. +
משלוחים לכל הארץ תוך 2-5 ימי עסקים. +

+
+ + + להזמנה + + לקטלוג המוצרים +
+
+
+ 0 + מוצרים +
+
+ 0 + הזמנות +
+
+ 5 + קטגוריות +
+
+
+
+
+ + +
+
+
+ + +
+
+
+

הקטלוג שלנו

+

מגוון רחב של מוצרים איכותיים לכל סוגי חיות המחמד

+
+
+
+
+ +
+

כלבים

+
    +
  • מזון יבש ורטוב
    • +
  • חטיפים ופינוקים
    • +
  • צעצועים
    • +
  • מוצרי הדברה
    • +
+ להזמנה ← +
+ +
+
+ +
+

חתולים

+
    +
  • מזון פרימיום
    • +
  • מתקני גירוד
    • +
  • צעצועים
    • +
  • מוצרי הדברה
    • +
+ להזמנה ← +
+ +
+
+ +
+

דגים ואקווריום

+
    +
  • מזון לדגים
    • +
  • ציוד לאקווריום
    • +
  • תוספי מים
    • +
  • קישוטים
    • +
+ להזמנה ← +
+ +
+
+ +
+

תוכים וציפורים

+
    +
  • מזון וזרעים
    • +
  • כלובים
    • +
  • אביזרים
    • +
  • צעצועים
    • +
+ להזמנה ← +
+ +
+
+ +
+

מכרסמים

+
    +
  • מזון
    • +
  • כלובים
    • +
  • שבבי עץ
    • +
  • אביזרים
    • +
+ להזמנה ← +
+ +
+
+ +
+

אוכל רפואי

+
    +
  • דיאטות רפואיות לכלבים
    • +
  • דיאטות רפואיות לחתולים
    • +
  • מותגים: הילס, רויאל קנין
    • +
  • ייעוץ מקצועי
    • +
+ להזמנה ← +
+ +
+
+ +
+

מוצרי הדברה פרימיום

+
    +
  • ברבקטו
    • +
  • נקסגארד
    • +
  • פרונטליין
    • +
  • קולרים נגד פרעושים
    • +
+ להזמנה ← +
+
+ +
+

המותגים המובילים שלנו

+
+ מונג' + הילס + ברבקטו + נקסגארד + טייסט אוף דה ווילד + רויאל קנין + פרונטליין +
+
+
+
+ + +
+
+
+
+

הסיפור שלנו

+

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

+

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

+
+
+
+ +
+
+ מותגים מובילים + רק המותגים הטובים בעולם +
+
+
+
+ +
+
+ משלוחים מהירים + 2-5 ימי עסקים לכל הארץ +
+
+
+
+ +
+
+ שירות אישי + ייעוץ מקצועי ואכפתי +
+
+
+
+
+
+ 0 + מוצרים בקטלוג +
+
+ 0 + הזמנות מרוצות +
+
+ 7+ + מותגים מובילים +
+
+ 5 + סוגי חיות מחמד +
+
+
+
+
+ + +
+
+
+

טופס הזמנה

+

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

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

התקינו את האפליקציה

+

גישה מהירה מהמסך הראשי, התראות על מבצעים ופועל תמיד — גם אופליין!

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

צור קשר

+

יש לכם שאלות? נשמח לעזור!

+
+
+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+
+ +
+
+ אינסטגרם + @closetonature12 +
+
+
+
+ +
+
+ אתר + closetonature.co.il +
+
+
+
+ +
+
+ משלוחים + לכל רחבי הארץ +
+
+
+
+
+
+
+ + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..b1c9b91 --- /dev/null +++ b/script.js @@ -0,0 +1,211 @@ +(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 = navToggle.getAttribute('aria-expanded') === 'true'; + navToggle.setAttribute('aria-expanded', !isExpanded); + navLinks.classList.toggle('active'); + }); + + // Close menu when clicking a link + navLinks.querySelectorAll('a').forEach(function(link) { + link.addEventListener('click', function() { + navLinks.classList.remove('active'); + navToggle.setAttribute('aria-expanded', 'false'); + }); + }); + } + + // Smooth scroll for anchor links + document.querySelectorAll('a[href^="#"]').forEach(function(anchor) { + anchor.addEventListener('click', function(e) { + e.preventDefault(); + const target = document.querySelector(this.getAttribute('href')); + if (target) { + const headerHeight = document.querySelector('.site-header').offsetHeight; + const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - headerHeight; + window.scrollTo({ + top: targetPosition, + behavior: 'smooth' + }); + } + }); + }); + + // Intersection Observer for reveal animations + const observerOptions = { + root: null, + rootMargin: '0px', + threshold: 0.1 + }; + + const revealObserver = new IntersectionObserver(function(entries) { + entries.forEach(function(entry) { + if (entry.isIntersecting) { + entry.target.classList.add('revealed'); + revealObserver.unobserve(entry.target); + } + }); + }, observerOptions); + + // Add reveal class to elements + const revealElements = document.querySelectorAll( + '.category-card, .stat-card, .feature, .contact-item, .pwa-card' + ); + + revealElements.forEach(function(el, index) { + el.classList.add('reveal'); + el.style.transitionDelay = (index % 4) * 0.1 + 's'; + revealObserver.observe(el); + }); + + // Counter animation for statistics + function animateCounter(element) { + const target = parseInt(element.getAttribute('data-count'), 10); + if (!target) return; + + const duration = 2000; + const step = target / (duration / 16); + let current = 0; + + function update() { + current += step; + if (current < target) { + element.textContent = Math.floor(current).toLocaleString('he-IL'); + requestAnimationFrame(update); + } else { + element.textContent = target.toLocaleString('he-IL') + '+'; + } + } + + update(); + } + + const statNumbers = document.querySelectorAll('.stat-number[data-count], .stat-big[data-count]'); + + const statsObserver = new IntersectionObserver(function(entries) { + entries.forEach(function(entry) { + if (entry.isIntersecting) { + animateCounter(entry.target); + statsObserver.unobserve(entry.target); + } + }); + }, { threshold: 0.5 }); + + statNumbers.forEach(function(stat) { + statsObserver.observe(stat); + }); + + // Form submission handling + const orderForm = document.getElementById('orderForm'); + const formSuccess = document.getElementById('formSuccess'); + + if (orderForm) { + orderForm.addEventListener('submit', function(e) { + e.preventDefault(); + + // Simulate form submission + const submitBtn = orderForm.querySelector('button[type="submit"]'); + submitBtn.disabled = true; + submitBtn.innerHTML = 'שולח...'; + + setTimeout(function() { + orderForm.style.display = 'none'; + formSuccess.hidden = false; + formSuccess.scrollIntoView({ behavior: 'smooth', block: 'center' }); + }, 1500); + }); + } + + const contactForm = document.getElementById('contactForm'); + + if (contactForm) { + contactForm.addEventListener('submit', function(e) { + e.preventDefault(); + + const submitBtn = contactForm.querySelector('button[type="submit"]'); + const originalText = submitBtn.textContent; + submitBtn.disabled = true; + submitBtn.textContent = 'שולח...'; + + setTimeout(function() { + contactForm.reset(); + submitBtn.disabled = false; + submitBtn.textContent = 'נשלח בהצלחה!'; + + setTimeout(function() { + submitBtn.textContent = originalText; + }, 2000); + }, 1500); + }); + } + + // PWA Install functionality + let deferredPrompt; + const installBtn = document.getElementById('installBtn'); + const installBtnMain = document.getElementById('installBtnMain'); + + window.addEventListener('beforeinstallprompt', function(e) { + e.preventDefault(); + deferredPrompt = e; + + if (installBtn) { + installBtn.hidden = false; + } + }); + + function handleInstall() { + if (!deferredPrompt) { + alert('האפליקציה כבר מותקנת או שהדפדפן לא תומך בהתקנה.'); + return; + } + + deferredPrompt.prompt(); + + deferredPrompt.userChoice.then(function(choiceResult) { + if (choiceResult.outcome === 'accepted') { + console.log('User accepted PWA install'); + } + deferredPrompt = null; + + if (installBtn) installBtn.hidden = true; + }); + } + + if (installBtn) { + installBtn.addEventListener('click', handleInstall); + } + + if (installBtnMain) { + installBtnMain.addEventListener('click', handleInstall); + } + + // Header scroll effect + const header = document.querySelector('.site-header'); + let lastScrollY = window.scrollY; + + window.addEventListener('scroll', function() { + const currentScrollY = window.scrollY; + + if (currentScrollY > 100) { + header.style.boxShadow = 'var(--shadow-md)'; + } else { + header.style.boxShadow = 'none'; + } + + lastScrollY = currentScrollY; + }, { passive: true }); + + // Respect reduced motion preference + if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { + document.querySelectorAll('.floating, .floating-delayed').forEach(function(el) { + el.style.animation = 'none'; + }); + } + +})(); diff --git a/style.css b/style.css new file mode 100644 index 0000000..1d078ec --- /dev/null +++ b/style.css @@ -0,0 +1,1152 @@ +:root { + --green-dark: #1a4d2e; + --green-main: #2d6a4f; + --green-light: #52b788; + --green-pale: #b7e4c7; + --green-bg: #d8f3dc; + --white: #ffffff; + --beige: #f5f0e8; + --beige-dark: #e8e0d5; + --accent: #e07a5f; + --accent-light: #f2cc8f; + --text-dark: #1a1a1a; + --text-muted: #555; + --shadow-sm: 0 2px 8px rgba(26, 77, 46, 0.08); + --shadow-md: 0 4px 20px rgba(26, 77, 46, 0.12); + --shadow-lg: 0 8px 40px rgba(26, 77, 46, 0.15); + --radius-sm: 8px; + --radius-md: 16px; + --radius-lg: 24px; + --radius-full: 100px; + --transition: 0.3s ease; + --font-main: 'Heebo', sans-serif; + --font-display: 'Rubik', sans-serif; +} + +*, +*::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-main); + font-weight: 400; + font-size: 16px; + line-height: 1.7; + color: var(--text-dark); + 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; +} + +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; +} + +/* Header */ +.site-header { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 1000; + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + border-bottom: 1px solid var(--green-pale); + transition: var(--transition); +} + +.nav-container { + max-width: 1200px; + margin: 0 auto; + padding: 1rem 1.5rem; + display: flex; + align-items: center; + justify-content: space-between; + gap: 2rem; +} + +.logo { + display: flex; + align-items: center; + gap: 0.5rem; + font-family: var(--font-display); + font-size: 1.25rem; + font-weight: 600; + color: var(--green-dark); +} + +.logo-icon { + width: 36px; + height: 36px; + color: var(--green-main); +} + +.nav-toggle { + display: none; + flex-direction: column; + justify-content: center; + align-items: center; + width: 40px; + height: 40px; + background: none; + border: none; + cursor: pointer; + gap: 5px; +} + +.nav-toggle span { + width: 24px; + height: 2px; + background: var(--green-dark); + border-radius: 2px; + transition: var(--transition); +} + +.nav-links { + display: flex; + align-items: center; + gap: 2rem; +} + +.nav-links a { + font-size: 0.95rem; + font-weight: 500; + color: var(--text-dark); + transition: color var(--transition); + position: relative; +} + +.nav-links a::after { + content: ''; + position: absolute; + bottom: -4px; + right: 0; + width: 0; + height: 2px; + background: var(--green-light); + transition: width var(--transition); +} + +.nav-links a:hover, +.nav-links a:focus { + color: var(--green-main); +} + +.nav-links a:hover::after, +.nav-links a:focus::after { + width: 100%; +} + +.pwa-install-btn { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 1rem; + background: var(--green-main); + color: var(--white); + border: none; + border-radius: var(--radius-full); + font-size: 0.85rem; + font-weight: 500; + cursor: pointer; + transition: var(--transition); +} + +.pwa-install-btn:hover { + background: var(--green-dark); + transform: scale(1.02); +} + +/* Buttons */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + padding: 0.875rem 1.75rem; + border: none; + border-radius: var(--radius-full); + font-family: var(--font-display); + font-size: 1rem; + font-weight: 500; + cursor: pointer; + transition: var(--transition); + text-align: center; +} + +.btn:focus { + outline: 3px solid var(--green-light); + outline-offset: 2px; +} + +.btn-primary { + background: var(--green-main); + color: var(--white); +} + +.btn-primary:hover { + background: var(--green-dark); + transform: translateY(-2px); + box-shadow: var(--shadow-md); +} + +.btn-secondary { + background: var(--white); + color: var(--green-main); + border: 2px solid var(--green-main); +} + +.btn-secondary:hover { + background: var(--green-pale); + transform: translateY(-2px); +} + +.btn-large { + padding: 1rem 2.5rem; + font-size: 1.1rem; +} + +/* Hero Section */ +.hero { + position: relative; + min-height: 100vh; + padding: 8rem 1.5rem 4rem; + display: flex; + align-items: center; + overflow: hidden; + background: linear-gradient(135deg, var(--white) 0%, var(--green-bg) 50%, var(--beige) 100%); +} + +.hero-bg { + position: absolute; + inset: 0; + pointer-events: none; + overflow: hidden; +} + +.hero-shape { + position: absolute; + border-radius: 50%; + opacity: 0.3; +} + +.hero-shape-1 { + width: 600px; + height: 600px; + background: radial-gradient(circle, var(--green-pale) 0%, transparent 70%); + top: -200px; + right: -200px; +} + +.hero-shape-2 { + width: 400px; + height: 400px; + background: radial-gradient(circle, var(--accent-light) 0%, transparent 70%); + bottom: -100px; + left: -100px; +} + +.hero-shape-3 { + width: 300px; + height: 300px; + background: radial-gradient(circle, var(--green-light) 0%, transparent 70%); + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.hero-content { + position: relative; + max-width: 700px; + margin: 0 auto; + text-align: center; + z-index: 1; +} + +.hero-badge { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 1rem; + background: var(--white); + border-radius: var(--radius-full); + font-size: 0.9rem; + font-weight: 500; + color: var(--green-main); + box-shadow: var(--shadow-sm); + margin-bottom: 1.5rem; +} + +.hero-badge svg { + color: var(--accent); +} + +.hero-title { + font-size: clamp(2.5rem, 6vw, 4rem); + font-weight: 600; + color: var(--green-dark); + margin-bottom: 1rem; +} + +.hero-subtitle-line { + display: block; + font-size: clamp(1.25rem, 3vw, 1.75rem); + font-weight: 400; + color: var(--text-muted); + margin-top: 0.5rem; +} + +.hero-description { + font-size: 1.125rem; + color: var(--text-muted); + margin-bottom: 2rem; + line-height: 1.8; +} + +.hero-actions { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 1rem; + margin-bottom: 3rem; +} + +.hero-stats { + display: flex; + justify-content: center; + gap: 3rem; + flex-wrap: wrap; +} + +.stat-item { + text-align: center; +} + +.stat-number { + display: block; + font-family: var(--font-display); + font-size: 2rem; + font-weight: 600; + color: var(--green-dark); +} + +.stat-label { + font-size: 0.9rem; + color: var(--text-muted); +} + +.hero-visual { + position: absolute; + inset: 0; + pointer-events: none; + z-index: 0; +} + +.paw-grid { + position: relative; + width: 100%; + height: 100%; +} + +.paw-grid svg { + position: absolute; +} + +.paw { + width: 120px; + height: 120px; + top: 15%; + right: 10%; + opacity: 0.4; +} + +.heart { + width: 80px; + height: 80px; + bottom: 20%; + left: 10%; + opacity: 0.5; +} + +.floating { + animation: float 6s ease-in-out infinite; +} + +.floating-delayed { + animation: float 6s ease-in-out infinite; + animation-delay: -3s; +} + +@keyframes float { + 0%, 100% { transform: translateY(0) rotate(0deg); } + 50% { transform: translateY(-20px) rotate(5deg); } +} + +/* Section Styling */ +.section-container { + max-width: 1200px; + margin: 0 auto; + padding: 5rem 1.5rem; +} + +.section-header { + text-align: center; + margin-bottom: 3rem; +} + +.section-title { + font-size: clamp(2rem, 4vw, 2.75rem); + font-weight: 600; + color: var(--green-dark); + margin-bottom: 0.75rem; +} + +.section-subtitle { + font-size: 1.1rem; + color: var(--text-muted); +} + +/* Catalog Section */ +.catalog { + background: var(--beige); +} + +.category-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 1.5rem; +} + +.category-card { + background: var(--white); + border-radius: var(--radius-lg); + padding: 2rem; + box-shadow: var(--shadow-sm); + transition: var(--transition); + position: relative; + overflow: hidden; +} + +.category-card::before { + content: ''; + position: absolute; + top: 0; + right: 0; + width: 100px; + height: 100px; + background: var(--green-pale); + border-radius: 0 0 0 100%; + opacity: 0.5; + transition: var(--transition); +} + +.category-card:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-md); +} + +.category-card:hover::before { + width: 120px; + height: 120px; +} + +.category-icon { + width: 64px; + height: 64px; + margin-bottom: 1rem; + color: var(--green-main); + position: relative; + z-index: 1; +} + +.category-card h3 { + font-size: 1.35rem; + font-weight: 600; + color: var(--green-dark); + margin-bottom: 1rem; + position: relative; + z-index: 1; +} + +.category-list { + margin-bottom: 1.5rem; + position: relative; + z-index: 1; +} + +.category-list li { + padding: 0.3rem 0; + color: var(--text-muted); + font-size: 0.95rem; + position: relative; + padding-right: 1.25rem; +} + +.category-list li::before { + content: '✓'; + position: absolute; + right: 0; + color: var(--green-light); + font-weight: 600; +} + +.category-link { + display: inline-flex; + align-items: center; + gap: 0.25rem; + color: var(--green-main); + font-weight: 500; + transition: var(--transition); + position: relative; + z-index: 1; +} + +.category-link:hover { + color: var(--green-dark); + gap: 0.5rem; +} + +/* Category-specific colors */ +.category-dogs .category-icon { color: #8b5a2b; } +.category-dogs::before { background: #f5deb3; } + +.category-cats .category-icon { color: #6b5b95; } +.category-cats::before { background: #d4c5e2; } + +.category-fish .category-icon { color: #4a90a4; } +.category-fish::before { background: #b8d4e3; } + +.category-birds .category-icon { color: #e4a64a; } +.category-birds::before { background: #fde5b4; } + +.category-rodents .category-icon { color: #c17767; } +.category-rodents::before { background: #f0d5cf; } + +.category-medical .category-icon { color: #d64545; } +.category-medical::before { background: #fad4d4; } + +.category-pest .category-icon { color: var(--green-main); } +.category-pest::before { background: var(--green-pale); } + +/* Brands Section */ +.brands-section { + margin-top: 4rem; + text-align: center; +} + +.brands-title { + font-size: 1.25rem; + font-weight: 500; + color: var(--text-muted); + margin-bottom: 1.5rem; +} + +.brands-list { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 0.75rem; +} + +.brand-tag { + padding: 0.5rem 1.25rem; + background: var(--white); + border: 2px solid var(--green-pale); + border-radius: var(--radius-full); + font-size: 0.95rem; + font-weight: 500; + color: var(--green-dark); + transition: var(--transition); +} + +.brand-tag:hover { + background: var(--green-main); + color: var(--white); + border-color: var(--green-main); +} + +/* About Section */ +.about { + background: var(--white); +} + +.about-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + align-items: center; +} + +.about-content .section-title { + text-align: right; +} + +.about-text { + color: var(--text-muted); + margin-bottom: 1.5rem; + font-size: 1.05rem; +} + +.about-features { + display: flex; + flex-direction: column; + gap: 1.25rem; + margin-top: 2rem; +} + +.feature { + display: flex; + align-items: flex-start; + gap: 1rem; +} + +.feature-icon { + width: 48px; + height: 48px; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + background: var(--green-bg); + border-radius: var(--radius-md); + color: var(--green-main); +} + +.feature-icon svg { + width: 24px; + height: 24px; +} + +.feature-text strong { + display: block; + font-weight: 600; + color: var(--green-dark); + margin-bottom: 0.25rem; +} + +.feature-text span { + font-size: 0.9rem; + color: var(--text-muted); +} + +.about-stats { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1.5rem; +} + +.stat-card { + background: linear-gradient(135deg, var(--green-bg) 0%, var(--beige) 100%); + border-radius: var(--radius-lg); + padding: 2rem; + text-align: center; + transition: var(--transition); +} + +.stat-card:hover { + transform: scale(1.03); + box-shadow: var(--shadow-md); +} + +.stat-big { + display: block; + font-family: var(--font-display); + font-size: 2.5rem; + font-weight: 600; + color: var(--green-dark); + margin-bottom: 0.5rem; +} + +.stat-desc { + font-size: 0.95rem; + color: var(--text-muted); +} + +/* Order Section */ +.order { + background: linear-gradient(180deg, var(--beige) 0%, var(--green-bg) 100%); +} + +.order-form { + max-width: 700px; + margin: 0 auto; + background: var(--white); + border-radius: var(--radius-lg); + padding: 2.5rem; + box-shadow: var(--shadow-md); +} + +.form-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1.25rem; + margin-bottom: 2rem; +} + +.form-group { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.form-group-full { + grid-column: 1 / -1; +} + +.form-group label { + font-weight: 500; + color: var(--green-dark); + font-size: 0.95rem; +} + +.form-group input, +.form-group select, +.form-group textarea { + padding: 0.875rem 1rem; + border: 2px solid var(--beige-dark); + border-radius: var(--radius-md); + background: var(--white); + transition: var(--transition); + font-size: 1rem; +} + +.form-group input:focus, +.form-group select:focus, +.form-group textarea:focus { + outline: none; + border-color: var(--green-light); + box-shadow: 0 0 0 3px rgba(82, 183, 136, 0.15); +} + +.form-group textarea { + resize: vertical; + min-height: 100px; +} + +.order-form .btn { + width: 100%; +} + +.form-success { + max-width: 700px; + margin: 0 auto; + text-align: center; + padding: 3rem; + background: var(--white); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-md); +} + +.success-icon { + width: 80px; + height: 80px; + margin: 0 auto 1.5rem; + background: var(--green-bg); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + color: var(--green-main); +} + +.success-icon svg { + width: 40px; + height: 40px; +} + +.form-success h3 { + font-size: 1.5rem; + color: var(--green-dark); + margin-bottom: 0.5rem; +} + +.form-success p { + color: var(--text-muted); +} + +/* PWA Section */ +.pwa-section { + background: var(--green-dark); + padding: 0; +} + +.pwa-section .section-container { + padding: 3rem 1.5rem; +} + +.pwa-card { + display: flex; + align-items: center; + justify-content: space-between; + gap: 2rem; + flex-wrap: wrap; +} + +.pwa-content { + display: flex; + align-items: center; + gap: 1.5rem; +} + +.pwa-icon { + width: 64px; + height: 64px; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + background: var(--green-main); + border-radius: var(--radius-md); + color: var(--white); +} + +.pwa-icon svg { + width: 32px; + height: 32px; +} + +.pwa-text h3 { + color: var(--white); + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 0.25rem; +} + +.pwa-text p { + color: var(--green-pale); + font-size: 0.95rem; +} + +.pwa-btn { + background: var(--white); + color: var(--green-dark); +} + +.pwa-btn:hover { + background: var(--beige); + color: var(--green-dark); +} + +/* Contact Section */ +.contact { + background: var(--white); +} + +.contact-grid { + display: grid; + grid-template-columns: 1.5fr 1fr; + gap: 4rem; + align-items: start; +} + +.contact-form { + background: var(--beige); + border-radius: var(--radius-lg); + padding: 2rem; +} + +.contact-form .form-group { + margin-bottom: 1.25rem; +} + +.contact-form .btn { + width: 100%; +} + +.contact-info { + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +.contact-item { + display: flex; + align-items: flex-start; + gap: 1rem; + padding: 1.5rem; + background: var(--green-bg); + border-radius: var(--radius-md); + transition: var(--transition); +} + +.contact-item:hover { + background: var(--green-pale); +} + +.contact-icon { + width: 48px; + height: 48px; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + background: var(--white); + border-radius: var(--radius-sm); + color: var(--green-main); +} + +.contact-icon svg { + width: 24px; + height: 24px; +} + +.contact-item strong { + display: block; + font-weight: 600; + color: var(--green-dark); + margin-bottom: 0.25rem; +} + +.contact-item a, +.contact-item span { + color: var(--text-muted); + font-size: 0.95rem; +} + +.contact-item a:hover { + color: var(--green-main); +} + +/* Footer */ +.site-footer { + background: var(--green-dark); + color: var(--white); + padding: 3rem 1.5rem; +} + +.footer-content { + max-width: 1200px; + margin: 0 auto; + text-align: center; +} + +.footer-logo { + display: inline-flex; + align-items: center; + gap: 0.5rem; + font-family: var(--font-display); + font-size: 1.5rem; + font-weight: 600; + margin-bottom: 0.5rem; +} + +.footer-logo .logo-icon { + width: 40px; + height: 40px; + color: var(--green-light); +} + +.footer-tagline { + color: var(--green-pale); + margin-bottom: 1.5rem; +} + +.footer-links { + display: flex; + justify-content: center; + gap: 1.5rem; + margin-bottom: 1.5rem; +} + +.footer-links a { + width: 44px; + height: 44px; + display: flex; + align-items: center; + justify-content: center; + background: var(--green-main); + border-radius: var(--radius-sm); + color: var(--white); + transition: var(--transition); +} + +.footer-links a:hover { + background: var(--green-light); + transform: translateY(-2px); +} + +.footer-copy { + font-size: 0.9rem; + color: var(--green-pale); + opacity: 0.8; +} + +/* Animations */ +.reveal { + opacity: 0; + transform: translateY(30px); + transition: opacity 0.6s ease, transform 0.6s ease; +} + +.reveal.revealed { + opacity: 1; + transform: translateY(0); +} + +/* Mobile Navigation */ +@media (max-width: 768px) { + .nav-toggle { + display: flex; + } + + .nav-links { + position: fixed; + top: 70px; + right: 0; + left: 0; + background: var(--white); + flex-direction: column; + padding: 2rem; + gap: 1rem; + box-shadow: var(--shadow-md); + transform: translateY(-100%); + opacity: 0; + pointer-events: none; + transition: var(--transition); + } + + .nav-links.active { + transform: translateY(0); + opacity: 1; + pointer-events: auto; + } + + .nav-links a { + padding: 0.75rem 0; + font-size: 1.1rem; + } + + .pwa-install-btn { + display: none; + } + + .hero { + padding-top: 6rem; + } + + .paw, .heart { + display: none; + } + + .hero-stats { + gap: 1.5rem; + } + + .stat-number { + font-size: 1.5rem; + } + + .about-grid { + grid-template-columns: 1fr; + gap: 2rem; + } + + .about-content .section-title { + text-align: center; + } + + .about-stats { + grid-template-columns: repeat(2, 1fr); + gap: 1rem; + } + + .form-grid { + grid-template-columns: 1fr; + } + + .order-form { + padding: 1.5rem; + } + + .pwa-card { + flex-direction: column; + text-align: center; + } + + .pwa-content { + flex-direction: column; + text-align: center; + } + + .contact-grid { + grid-template-columns: 1fr; + gap: 2rem; + } + + .category-grid { + grid-template-columns: 1fr; + } +} + +@media (max-width: 480px) { + .hero-title { + font-size: 2rem; + } + + .hero-subtitle-line { + font-size: 1.1rem; + } + + .section-container { + padding: 3rem 1rem; + } + + .btn { + padding: 0.75rem 1.25rem; + font-size: 0.95rem; + } + + .stat-card { + padding: 1.5rem; + } + + .stat-big { + font-size: 2rem; + } + + .category-card { + padding: 1.5rem; + } +}