+ 
+
+
+ Badge
+
+
+Product Name
+Product Description
+
+```
+
+### 4. Modify Sections
+
+**Add a new section:**
+```html
+
+ Product Description
+Experience the authentic taste of Turkey's premium nuts and dried fruits, carefully selected from local farms and crafted with traditional methods passed down through generations.
+ +Years Experience
+Happy Customers
+Natural Products
+
+ Quality
+Premium
+Tradition
+Heritage
+Scroll to explore
+100% Natural
+Within 24 Hours
+ISO 9001
+Best Taste 2024
+
+
+ 
+ Each product represents our commitment to quality, taste, and tradition
+
+
+ Premium
+ Turkish Pistachios
+ +
+
+ Fresh
+ Premium Almonds
+ +
+
+ Bestseller
+ Chocolate Coated Almonds
+ +
+
+ Premium
+ Turkish Hazelnuts
+ +
+
+ Bestseller
+ Mixed Nuts Selection
+ +
+
+ Fresh
+ Premium Walnuts
+ +Stay updated with our latest news, events, and announcements
+
+ Announcement
+ We're excited to announce the start of our new harvest season with premium quality Antep pistachios from local farms.
+ + Read More + + +
+ Achievement
+ Mega Kuruyemiş receives national recognition for maintaining the highest standards in quality and food safety.
+ + Read More + + +
+ Product Launch
+ Discover our new range of certified organic nuts and dried fruits, grown without synthetic pesticides.
+ + Read More + + +Explore our world of premium nuts and dried fruits
+
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ Have questions? We'd love to hear from you
+Gaziantep, Turkey
Central Business District
info@megakuruyemis.com
support@megakuruyemis.com
+90 (342) XXX XX XX
Mon-Fri 9:00-18:00
${message}
+ `; + + document.body.appendChild(notification); + this.addNotificationStyles(); + + // Animate in + requestAnimationFrame(() => { + notification.classList.add('show'); + }); + + // Auto remove + setTimeout(() => { + notification.classList.remove('show'); + setTimeout(() => notification.remove(), 300); + }, 4000); + } + + addNotificationStyles() { + if (document.querySelector('#notification-styles')) return; + + const style = document.createElement('style'); + style.id = 'notification-styles'; + style.textContent = ` + .notification { + position: fixed; + top: 100px; + right: 20px; + display: flex; + align-items: center; + gap: 12px; + padding: 16px 24px; + background: white; + border-radius: 12px; + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); + z-index: 10000; + transform: translateX(400px); + transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); + max-width: 400px; + } + + .notification.show { + transform: translateX(0); + } + + .notification-icon { + width: 32px; + height: 32px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; + flex-shrink: 0; + } + + .notification-success .notification-icon { + background: #4CAF50; + color: white; + } + + .notification-error .notification-icon { + background: #f44336; + color: white; + } + + .notification p { + margin: 0; + color: #2C2416; + font-weight: 500; + } + + @media (max-width: 640px) { + .notification { + right: 10px; + left: 10px; + max-width: none; + transform: translateY(-100px); + } + + .notification.show { + transform: translateY(0); + } + } + `; + document.head.appendChild(style); + } +} + +// =================================== +// Parallax Effects +// =================================== + +class ParallaxEffects { + constructor() { + this.init(); + } + + init() { + window.addEventListener('scroll', () => this.handleScroll(), { passive: true }); + } + + handleScroll() { + const scrolled = window.pageYOffset; + + // Hero parallax + const heroImage = document.querySelector('.hero-image-wrapper'); + if (heroImage) { + const speed = 0.3; + heroImage.style.transform = `translateY(${scrolled * speed}px)`; + } + + // Floating cards + const floatingCards = document.querySelectorAll('.floating-card'); + floatingCards.forEach((card, index) => { + const speed = 0.1 + (index * 0.05); + card.style.transform = `translateY(${scrolled * speed}px)`; + }); + } +} + +// =================================== +// Button Ripple Effect +// =================================== + +class RippleEffect { + constructor() { + this.buttons = document.querySelectorAll('.btn'); + this.init(); + } + + init() { + this.buttons.forEach(button => { + button.addEventListener('click', (e) => this.createRipple(e)); + }); + } + + createRipple(e) { + const button = e.currentTarget; + const ripple = document.createElement('span'); + ripple.className = 'ripple-effect'; + + const rect = button.getBoundingClientRect(); + const size = Math.max(rect.width, rect.height); + const x = e.clientX - rect.left - size / 2; + const y = e.clientY - rect.top - size / 2; + + ripple.style.cssText = ` + position: absolute; + width: ${size}px; + height: ${size}px; + left: ${x}px; + top: ${y}px; + background: rgba(255, 255, 255, 0.5); + border-radius: 50%; + pointer-events: none; + animation: ripple 0.6s ease-out; + `; + + button.style.position = 'relative'; + button.style.overflow = 'hidden'; + button.appendChild(ripple); + + setTimeout(() => ripple.remove(), 600); + } +} + +// Add ripple animation +const rippleStyle = document.createElement('style'); +rippleStyle.textContent = ` + @keyframes ripple { + from { + transform: scale(0); + opacity: 1; + } + to { + transform: scale(2); + opacity: 0; + } + } +`; +document.head.appendChild(rippleStyle); + +// =================================== +// Cursor Effect (Optional Premium Feature) +// =================================== + +class CursorEffect { + constructor() { + this.cursor = document.createElement('div'); + this.cursor.className = 'custom-cursor'; + document.body.appendChild(this.cursor); + this.init(); + } + + init() { + document.addEventListener('mousemove', (e) => { + this.cursor.style.left = e.clientX + 'px'; + this.cursor.style.top = e.clientY + 'px'; + }); + + // Add hover effect for interactive elements + const interactiveElements = document.querySelectorAll('a, button, .product-card, .gallery-item'); + interactiveElements.forEach(el => { + el.addEventListener('mouseenter', () => this.cursor.classList.add('hover')); + el.addEventListener('mouseleave', () => this.cursor.classList.remove('hover')); + }); + + this.addCursorStyles(); + } + + addCursorStyles() { + const style = document.createElement('style'); + style.textContent = ` + .custom-cursor { + width: 20px; + height: 20px; + border: 2px solid #8B4513; + border-radius: 50%; + position: fixed; + pointer-events: none; + z-index: 10001; + transform: translate(-50%, -50%); + transition: all 0.15s ease; + mix-blend-mode: difference; + display: none; + } + + .custom-cursor.hover { + width: 40px; + height: 40px; + background: rgba(232, 119, 34, 0.2); + } + + @media (min-width: 1024px) { + .custom-cursor { + display: block; + } + } + `; + document.head.appendChild(style); + } +} + +// =================================== +// Counter Animation +// =================================== + +class CounterAnimation { + constructor() { + this.counters = document.querySelectorAll('.stat-item h3'); + this.init(); + } + + init() { + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + this.animateCounter(entry.target); + observer.unobserve(entry.target); + } + }); + }, { threshold: 0.5 }); + + this.counters.forEach(counter => observer.observe(counter)); + } + + animateCounter(element) { + const target = element.textContent; + const number = parseInt(target.replace(/\D/g, '')); + const suffix = target.replace(/[\d\s]/g, ''); + const duration = 2000; + const increment = number / (duration / 16); + let current = 0; + + const updateCounter = () => { + current += increment; + if (current < number) { + element.textContent = Math.floor(current) + suffix; + requestAnimationFrame(updateCounter); + } else { + element.textContent = number + suffix; + } + }; + + updateCounter(); + } +} + +// =================================== +// Page Loading Animation +// =================================== + +class PageLoader { + constructor() { + this.init(); + } + + init() { + window.addEventListener('load', () => { + document.body.style.opacity = '0'; + + requestAnimationFrame(() => { + document.body.style.transition = 'opacity 0.5s ease-out'; + document.body.style.opacity = '1'; + }); + }); + } +} + +// =================================== +// Initialize All Components +// =================================== + +document.addEventListener('DOMContentLoaded', () => { + new Navigation(); + new SmoothScroll(); + new ScrollAnimations(); + new ProductCards(); + new GalleryModal(); + new FormHandler(); + new ParallaxEffects(); + new RippleEffect(); + new CounterAnimation(); + new PageLoader(); + + // Optional: Enable custom cursor on desktop only + if (window.innerWidth >= 1024) { + new CursorEffect(); + } + + // Console branding + console.log( + '%c🌰 Mega Kuruyemiş', + 'font-size: 24px; font-weight: bold; color: #8B4513; text-shadow: 2px 2px 4px rgba(0,0,0,0.1);' + ); + console.log( + '%cPremium Turkish Nuts & Dried Fruits', + 'font-size: 14px; color: #E87722; font-weight: 500;' + ); + console.log( + '%cWebsite crafted with ❤️ and modern technologies', + 'font-size: 12px; color: #6B6B6B;' + ); +}); + +// =================================== +// Performance Monitoring (Optional) +// =================================== + +if ('PerformanceObserver' in window) { + const observer = new PerformanceObserver((list) => { + for (const entry of list.getEntries()) { + if (entry.entryType === 'largest-contentful-paint') { + console.log('LCP:', entry.renderTime || entry.loadTime); + } + } + }); + observer.observe({ entryTypes: ['largest-contentful-paint'] }); +} + +// =================================== +// Export for module usage (if needed) +// =================================== + +if (typeof module !== 'undefined' && module.exports) { + module.exports = { + Navigation, + SmoothScroll, + ScrollAnimations, + ProductCards, + GalleryModal, + FormHandler + }; +} diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..5b7aaf6 --- /dev/null +++ b/styles.css @@ -0,0 +1,1670 @@ +/* =================================== + PROFESSIONAL DESIGN SYSTEM + =================================== */ + +:root { + /* Advanced Color Palette */ + --primary-900: #5C3317; + --primary-800: #6D3F1F; + --primary-700: #7E4B27; + --primary-600: #8B4513; + --primary-500: #A0826D; + --primary-400: #B59885; + --primary-300: #C9AE9D; + --primary-200: #DEC4B5; + --primary-100: #F2DACE; + + --accent-600: #C74528; + --accent-500: #E87722; + --accent-400: #F59042; + --accent-300: #FFA962; + + --neutral-900: #1A1108; + --neutral-800: #2C2416; + --neutral-700: #3E3724; + --neutral-600: #504A32; + --neutral-500: #6B6B6B; + --neutral-400: #9A9A9A; + --neutral-300: #C8C8C8; + --neutral-200: #E5E5E5; + --neutral-100: #F5F5F5; + --neutral-50: #FAFAFA; + + --beige-dark: #E6D3C1; + --beige: #F5E6D3; + --beige-light: #FFF8F0; + --cream: #FFFBF7; + --white: #FFFFFF; + + /* Typography Scale */ + --font-display: 'Cormorant Garamond', serif; + --font-body: 'Poppins', sans-serif; + + --text-xs: 0.75rem; /* 12px */ + --text-sm: 0.875rem; /* 14px */ + --text-base: 1rem; /* 16px */ + --text-lg: 1.125rem; /* 18px */ + --text-xl: 1.25rem; /* 20px */ + --text-2xl: 1.5rem; /* 24px */ + --text-3xl: 1.875rem; /* 30px */ + --text-4xl: 2.25rem; /* 36px */ + --text-5xl: 3rem; /* 48px */ + --text-6xl: 3.75rem; /* 60px */ + --text-7xl: 4.5rem; /* 72px */ + + /* Spacing Scale */ + --space-1: 0.25rem; /* 4px */ + --space-2: 0.5rem; /* 8px */ + --space-3: 0.75rem; /* 12px */ + --space-4: 1rem; /* 16px */ + --space-5: 1.25rem; /* 20px */ + --space-6: 1.5rem; /* 24px */ + --space-8: 2rem; /* 32px */ + --space-10: 2.5rem; /* 40px */ + --space-12: 3rem; /* 48px */ + --space-16: 4rem; /* 64px */ + --space-20: 5rem; /* 80px */ + --space-24: 6rem; /* 96px */ + --space-32: 8rem; /* 128px */ + + /* Shadows */ + --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); + --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); + --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); + --shadow-warm: 0 8px 24px rgba(139, 69, 19, 0.15); + + /* Border Radius */ + --radius-sm: 0.375rem; /* 6px */ + --radius-md: 0.5rem; /* 8px */ + --radius-lg: 0.75rem; /* 12px */ + --radius-xl: 1rem; /* 16px */ + --radius-2xl: 1.5rem; /* 24px */ + --radius-full: 9999px; + + /* Transitions */ + --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); + --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1); + --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1); + --transition-smooth: 700ms cubic-bezier(0.4, 0, 0.2, 1); + + /* Container */ + --container-max: 1280px; + --container-lg: 1140px; + --container-md: 960px; + --container-sm: 720px; +} + +/* =================================== + RESET & BASE STYLES + =================================== */ + +*, *::before, *::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; + font-size: 16px; +} + +body { + font-family: var(--font-body); + font-size: var(--text-base); + line-height: 1.7; + color: var(--neutral-800); + background-color: var(--white); + overflow-x: hidden; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +h1, h2, h3, h4, h5, h6 { + font-family: var(--font-display); + font-weight: 700; + line-height: 1.2; + color: var(--neutral-900); +} + +img { + max-width: 100%; + height: auto; + display: block; +} + +a { + text-decoration: none; + color: inherit; + transition: var(--transition-base); +} + +button { + font-family: inherit; + cursor: pointer; + border: none; + background: none; +} + +/* =================================== + LAYOUT UTILITIES + =================================== */ + +.container { + max-width: var(--container-max); + margin: 0 auto; + padding: 0 var(--space-6); +} + +.container-fluid { + width: 100%; + padding: 0 var(--space-6); +} + +.section-header { + margin-bottom: var(--space-16); +} + +.section-header.centered { + text-align: center; +} + +.section-label { + display: flex; + align-items: center; + gap: var(--space-4); + margin-bottom: var(--space-4); +} + +.section-label.centered { + justify-content: center; +} + +.label-line { + width: 40px; + height: 2px; + background: linear-gradient(90deg, transparent, var(--accent-500)); +} + +.section-label.centered .label-line:first-child { + background: linear-gradient(90deg, var(--accent-500), transparent); +} + +.label-text { + font-size: var(--text-sm); + font-weight: 600; + text-transform: uppercase; + letter-spacing: 2px; + color: var(--accent-500); +} + +.section-title { + font-size: clamp(var(--text-4xl), 5vw, var(--text-5xl)); + margin-bottom: var(--space-6); + color: var(--neutral-900); +} + +.section-title.centered { + text-align: center; +} + +.text-accent { + color: var(--accent-500); + position: relative; +} + +.section-description { + font-size: var(--text-lg); + color: var(--neutral-600); + max-width: 700px; +} + +.section-header.centered .section-description { + margin: 0 auto; +} + +.section-cta { + text-align: center; + margin-top: var(--space-16); +} + +/* =================================== + BUTTONS + =================================== */ + +.btn { + display: inline-flex; + align-items: center; + gap: var(--space-2); + padding: var(--space-4) var(--space-8); + font-size: var(--text-base); + font-weight: 600; + border-radius: var(--radius-full); + transition: all var(--transition-base); + position: relative; + overflow: hidden; + white-space: nowrap; +} + +.btn::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 0; + height: 0; + border-radius: 50%; + background: rgba(255, 255, 255, 0.3); + transform: translate(-50%, -50%); + transition: width var(--transition-base), height var(--transition-base); +} + +.btn:hover::before { + width: 300px; + height: 300px; +} + +.btn > * { + position: relative; + z-index: 1; +} + +.btn-primary { + background: linear-gradient(135deg, var(--accent-500), var(--accent-600)); + color: var(--white); + box-shadow: var(--shadow-md); +} + +.btn-primary:hover { + box-shadow: var(--shadow-xl); + transform: translateY(-2px); +} + +.btn-secondary { + background: var(--white); + color: var(--neutral-800); + border: 2px solid var(--neutral-200); + box-shadow: var(--shadow-sm); +} + +.btn-secondary:hover { + border-color: var(--accent-500); + color: var(--accent-500); + box-shadow: var(--shadow-md); +} + +.btn-outline { + background: transparent; + color: var(--neutral-800); + border: 2px solid var(--neutral-300); + padding: var(--space-3) var(--space-6); + font-size: var(--text-sm); +} + +.btn-outline:hover { + background: var(--neutral-900); + color: var(--white); + border-color: var(--neutral-900); +} + +.btn-outline-large { + background: transparent; + color: var(--neutral-800); + border: 2px solid var(--neutral-300); + padding: var(--space-5) var(--space-10); + font-size: var(--text-lg); +} + +.btn-outline-large:hover { + background: var(--neutral-900); + color: var(--white); + border-color: var(--neutral-900); + transform: translateY(-2px); +} + +.btn-white { + background: var(--white); + color: var(--accent-600); + box-shadow: var(--shadow-lg); +} + +.btn-white:hover { + box-shadow: var(--shadow-2xl); + transform: translateY(-2px); +} + +.btn-block { + width: 100%; + justify-content: center; +} + +/* =================================== + HEADER & NAVIGATION + =================================== */ + +.header { + position: fixed; + top: 0; + left: 0; + width: 100%; + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + z-index: 1000; + transition: all var(--transition-base); + box-shadow: var(--shadow-sm); +} + +.header.scrolled { + box-shadow: var(--shadow-md); + background: rgba(255, 255, 255, 0.98); +} + +.nav { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-5) 0; +} + +.logo { + display: flex; + align-items: center; + gap: var(--space-3); +} + +.logo-text h1 { + font-size: var(--text-2xl); + color: var(--primary-600); + line-height: 1; + margin-bottom: var(--space-1); +} + +.logo-text span { + font-size: var(--text-xs); + color: var(--neutral-500); + font-family: var(--font-body); + font-weight: 400; + letter-spacing: 1px; +} + +.nav-menu { + display: flex; + align-items: center; + gap: var(--space-10); + list-style: none; +} + +.nav-link { + font-size: var(--text-sm); + font-weight: 500; + color: var(--neutral-700); + position: relative; + padding: var(--space-2) 0; + letter-spacing: 0.5px; +} + +.nav-link::after { + content: ''; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + width: 0; + height: 2px; + background: linear-gradient(90deg, var(--accent-500), var(--accent-600)); + transition: var(--transition-base); +} + +.nav-link:hover, +.nav-link.active { + color: var(--accent-500); +} + +.nav-link:hover::after, +.nav-link.active::after { + width: 100%; +} + +.nav-cta { + display: flex; + align-items: center; +} + +.hamburger { + display: none; + flex-direction: column; + gap: 5px; + cursor: pointer; + padding: var(--space-2); +} + +.hamburger span { + width: 24px; + height: 2px; + background: var(--primary-600); + transition: var(--transition-base); + border-radius: var(--radius-full); +} + +/* =================================== + HERO SECTION + =================================== */ + +.hero { + position: relative; + min-height: 100vh; + display: flex; + align-items: center; + padding-top: var(--space-24); + padding-bottom: var(--space-20); + background: linear-gradient(135deg, var(--cream) 0%, var(--beige-light) 50%, var(--cream) 100%); + overflow: hidden; +} + +.hero-bg-shape { + position: absolute; + top: -10%; + right: -10%; + width: 800px; + height: 800px; + background: radial-gradient(circle, var(--accent-500) 0%, transparent 70%); + opacity: 0.05; + border-radius: 50%; +} + +.hero-content { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-16); + align-items: center; + position: relative; + z-index: 2; +} + +.hero-badge { + display: inline-flex; + align-items: center; + gap: var(--space-2); + padding: var(--space-2) var(--space-4); + background: var(--white); + border-radius: var(--radius-full); + font-size: var(--text-sm); + font-weight: 500; + color: var(--accent-600); + box-shadow: var(--shadow-md); + margin-bottom: var(--space-6); +} + +.hero-text h1 { + font-size: clamp(var(--text-5xl), 7vw, var(--text-7xl)); + line-height: 1.1; + margin-bottom: var(--space-6); + color: var(--neutral-900); +} + +.hero-text .highlight { + color: var(--accent-500); + position: relative; + display: inline-block; +} + +.hero-description { + font-size: var(--text-lg); + color: var(--neutral-600); + margin-bottom: var(--space-8); + line-height: 1.8; + max-width: 600px; +} + +.hero-actions { + display: flex; + gap: var(--space-4); + margin-bottom: var(--space-12); +} + +.hero-stats { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-8); + padding-top: var(--space-8); + border-top: 1px solid var(--neutral-200); +} + +.stat-item h3 { + font-size: var(--text-4xl); + color: var(--accent-500); + margin-bottom: var(--space-1); +} + +.stat-item p { + font-size: var(--text-sm); + color: var(--neutral-600); + font-weight: 500; +} + +.hero-image-wrapper { + position: relative; + display: flex; + justify-content: center; +} + +.hero-image-wrapper img { + width: 100%; + max-width: 600px; + border-radius: var(--radius-2xl); + box-shadow: var(--shadow-2xl); + position: relative; + z-index: 2; +} + +.image-decoration { + position: absolute; + width: 200px; + height: 200px; + border-radius: var(--radius-2xl); + z-index: 1; +} + +.image-decoration.top-left { + top: -20px; + left: -20px; + background: linear-gradient(135deg, var(--accent-500), var(--accent-600)); + opacity: 0.1; +} + +.image-decoration.bottom-right { + bottom: -20px; + right: -20px; + background: linear-gradient(135deg, var(--primary-600), var(--primary-700)); + opacity: 0.1; +} + +.floating-card { + position: absolute; + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-4) var(--space-5); + background: var(--white); + border-radius: var(--radius-xl); + box-shadow: var(--shadow-xl); + z-index: 3; + animation: float 3s ease-in-out infinite; +} + +.card-1 { + top: 15%; + left: -10%; +} + +.card-2 { + bottom: 20%; + right: -5%; + animation-delay: -1.5s; +} + +.card-label { + font-size: var(--text-xs); + color: var(--neutral-500); + text-transform: uppercase; + letter-spacing: 1px; + font-weight: 600; +} + +.card-value { + font-size: var(--text-lg); + font-weight: 700; + color: var(--neutral-900); + line-height: 1; +} + +@keyframes float { + 0%, 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-15px); + } +} + +.scroll-indicator { + position: absolute; + bottom: var(--space-8); + left: 50%; + transform: translateX(-50%); + display: flex; + flex-direction: column; + align-items: center; + gap: var(--space-2); + opacity: 0.6; +} + +.mouse { + width: 24px; + height: 36px; + border: 2px solid var(--neutral-700); + border-radius: var(--radius-full); + position: relative; +} + +.wheel { + width: 3px; + height: 8px; + background: var(--neutral-700); + border-radius: var(--radius-full); + position: absolute; + top: 8px; + left: 50%; + transform: translateX(-50%); + animation: scroll 2s infinite; +} + +@keyframes scroll { + 0% { + opacity: 1; + transform: translateX(-50%) translateY(0); + } + 100% { + opacity: 0; + transform: translateX(-50%) translateY(12px); + } +} + +.scroll-indicator p { + font-size: var(--text-xs); + color: var(--neutral-700); + text-transform: uppercase; + letter-spacing: 1px; + font-weight: 500; +} + +/* =================================== + TRUST BADGES + =================================== */ + +.trust-badges { + padding: var(--space-16) 0; + background: var(--white); +} + +.badges-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: var(--space-8); +} + +.badge-item { + text-align: center; + padding: var(--space-6); +} + +.badge-item svg { + margin: 0 auto var(--space-4); +} + +.badge-item h4 { + font-size: var(--text-lg); + color: var(--neutral-900); + margin-bottom: var(--space-2); + font-family: var(--font-body); + font-weight: 600; +} + +.badge-item p { + font-size: var(--text-sm); + color: var(--neutral-500); +} + +/* =================================== + ABOUT SECTION + =================================== */ + +.about { + padding: var(--space-24) 0; + background: var(--neutral-50); +} + +.about-content { + display: grid; + grid-template-columns: 5fr 7fr; + gap: var(--space-20); + align-items: center; +} + +.about-image-grid { + position: relative; + display: grid; + grid-template-columns: 2fr 1fr; + gap: var(--space-6); +} + +.about-img-main { + position: relative; + border-radius: var(--radius-2xl); + overflow: hidden; + box-shadow: var(--shadow-xl); +} + +.about-img-main img { + width: 100%; + height: 600px; + object-fit: cover; +} + +.image-overlay { + position: absolute; + bottom: 0; + left: 0; + right: 0; + padding: var(--space-8); + background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); +} + +.overlay-badge { + text-align: center; +} + +.overlay-badge h3 { + font-size: var(--text-5xl); + color: var(--white); + margin-bottom: var(--space-2); +} + +.overlay-badge p { + font-size: var(--text-base); + color: var(--white); + font-weight: 500; +} + +.about-img-small { + border-radius: var(--radius-xl); + overflow: hidden; + box-shadow: var(--shadow-lg); + margin-top: var(--space-16); +} + +.about-img-small img { + width: 100%; + height: 300px; + object-fit: cover; +} + +.lead-text { + font-size: var(--text-xl); + font-weight: 500; + color: var(--neutral-800); + line-height: 1.7; + margin-bottom: var(--space-6); +} + +.about-text p { + margin-bottom: var(--space-5); + color: var(--neutral-600); + line-height: 1.8; +} + +.about-features { + display: flex; + flex-direction: column; + gap: var(--space-6); + margin: var(--space-10) 0; +} + +.feature-box { + display: flex; + gap: var(--space-5); + padding: var(--space-6); + background: var(--white); + border-radius: var(--radius-xl); + box-shadow: var(--shadow-sm); + transition: var(--transition-base); +} + +.feature-box:hover { + box-shadow: var(--shadow-md); + transform: translateX(5px); +} + +.feature-icon { + flex-shrink: 0; +} + +.feature-content h4 { + font-size: var(--text-lg); + margin-bottom: var(--space-2); + color: var(--neutral-900); + font-family: var(--font-body); + font-weight: 600; +} + +.feature-content p { + font-size: var(--text-sm); + color: var(--neutral-600); + margin: 0; +} + +/* =================================== + PRODUCTS SECTION + =================================== */ + +.products { + padding: var(--space-24) 0; + background: var(--white); +} + +.products-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); + gap: var(--space-8); +} + +.product-card { + background: var(--white); + border-radius: var(--radius-xl); + overflow: hidden; + box-shadow: var(--shadow-md); + transition: var(--transition-base); + cursor: pointer; +} + +.product-card:hover { + transform: translateY(-8px); + box-shadow: var(--shadow-2xl); +} + +.product-image { + position: relative; + overflow: hidden; + height: 320px; +} + +.product-image img { + width: 100%; + height: 100%; + object-fit: cover; + transition: var(--transition-slow); +} + +.product-card:hover .product-image img { + transform: scale(1.1); +} + +.product-overlay { + position: absolute; + inset: 0; + background: rgba(0, 0, 0, 0.6); + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: var(--transition-base); +} + +.product-card:hover .product-overlay { + opacity: 1; +} + +.overlay-btn { + padding: var(--space-3) var(--space-6); + background: var(--white); + color: var(--neutral-900); + border-radius: var(--radius-full); + font-weight: 600; + font-size: var(--text-sm); + transform: translateY(10px); + transition: var(--transition-base); +} + +.product-card:hover .overlay-btn { + transform: translateY(0); +} + +.product-badge { + position: absolute; + top: var(--space-4); + right: var(--space-4); + padding: var(--space-2) var(--space-4); + border-radius: var(--radius-full); + font-size: var(--text-xs); + font-weight: 700; + text-transform: uppercase; + letter-spacing: 1px; + backdrop-filter: blur(10px); +} + +.product-badge.premium { + background: rgba(231, 183, 81, 0.95); + color: var(--neutral-900); +} + +.product-badge.fresh { + background: rgba(76, 175, 80, 0.95); + color: var(--white); +} + +.product-badge.bestseller { + background: rgba(232, 119, 34, 0.95); + color: var(--white); +} + +.product-content { + padding: var(--space-6); +} + +.product-content h3 { + font-size: var(--text-xl); + margin-bottom: var(--space-2); + color: var(--neutral-900); + font-family: var(--font-display); +} + +.product-content > p { + font-size: var(--text-sm); + color: var(--neutral-500); + margin-bottom: var(--space-4); +} + +.product-meta { + display: flex; + align-items: center; + gap: var(--space-2); +} + +.meta-item { + display: flex; + align-items: center; + gap: var(--space-1); + font-size: var(--text-xs); + color: var(--accent-600); + font-weight: 600; +} + +/* =================================== + CTA BANNER + =================================== */ + +.cta-banner { + padding: var(--space-20) 0; + background: linear-gradient(135deg, var(--accent-600), var(--accent-500)); + position: relative; + overflow: hidden; +} + +.cta-banner::before { + content: ''; + position: absolute; + top: 0; + right: 0; + width: 500px; + height: 500px; + background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); + border-radius: 50%; +} + +.cta-content { + display: flex; + align-items: center; + justify-content: space-between; + position: relative; + z-index: 2; +} + +.cta-text h2 { + font-size: var(--text-5xl); + color: var(--white); + margin-bottom: var(--space-3); +} + +.cta-text p { + font-size: var(--text-xl); + color: rgba(255, 255, 255, 0.9); +} + +/* =================================== + NEWS SECTION + =================================== */ + +.news { + padding: var(--space-24) 0; + background: var(--neutral-50); +} + +.news-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); + gap: var(--space-10); +} + +.news-card { + background: var(--white); + border-radius: var(--radius-xl); + overflow: hidden; + box-shadow: var(--shadow-sm); + transition: var(--transition-base); +} + +.news-card:hover { + box-shadow: var(--shadow-xl); + transform: translateY(-5px); +} + +.news-image { + position: relative; + height: 280px; + overflow: hidden; +} + +.news-image img { + width: 100%; + height: 100%; + object-fit: cover; + transition: var(--transition-slow); +} + +.news-card:hover .news-image img { + transform: scale(1.05); +} + +.news-category { + position: absolute; + top: var(--space-4); + left: var(--space-4); + padding: var(--space-2) var(--space-4); + background: var(--white); + color: var(--accent-600); + border-radius: var(--radius-full); + font-size: var(--text-xs); + font-weight: 700; + text-transform: uppercase; + letter-spacing: 1px; +} + +.news-content { + padding: var(--space-8); +} + +.news-meta { + display: flex; + align-items: center; + gap: var(--space-4); + margin-bottom: var(--space-4); + font-size: var(--text-xs); + color: var(--neutral-500); +} + +.news-meta svg { + flex-shrink: 0; +} + +.news-date { + display: flex; + align-items: center; + gap: var(--space-2); +} + +.reading-time { + font-weight: 500; +} + +.news-content h3 { + font-size: var(--text-2xl); + margin-bottom: var(--space-4); + color: var(--neutral-900); +} + +.news-content p { + color: var(--neutral-600); + line-height: 1.7; + margin-bottom: var(--space-5); +} + +.news-link { + display: inline-flex; + align-items: center; + gap: var(--space-2); + color: var(--accent-600); + font-weight: 600; + font-size: var(--text-sm); + transition: var(--transition-base); +} + +.news-link:hover { + gap: var(--space-3); +} + +/* =================================== + GALLERY SECTION + =================================== */ + +.gallery { + padding: var(--space-24) 0; + background: var(--white); +} + +.gallery-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: var(--space-6); +} + +.gallery-item { + position: relative; + overflow: hidden; + border-radius: var(--radius-xl); + cursor: pointer; + aspect-ratio: 1; +} + +.gallery-item.large { + grid-column: span 2; + grid-row: span 2; +} + +.gallery-item.tall { + grid-row: span 2; +} + +.gallery-item img { + width: 100%; + height: 100%; + object-fit: cover; + transition: var(--transition-slow); +} + +.gallery-item:hover img { + transform: scale(1.1); +} + +.gallery-overlay { + position: absolute; + inset: 0; + background: linear-gradient(135deg, rgba(139, 69, 19, 0.9), rgba(232, 119, 34, 0.9)); + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: var(--transition-base); +} + +.gallery-item:hover .gallery-overlay { + opacity: 1; +} + +.gallery-btn { + width: 60px; + height: 60px; + background: var(--white); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + color: var(--accent-600); + transform: scale(0.8); + transition: var(--transition-base); +} + +.gallery-item:hover .gallery-btn { + transform: scale(1); +} + +/* =================================== + CONTACT SECTION + =================================== */ + +.contact { + padding: var(--space-24) 0; + background: var(--neutral-50); +} + +.contact-content { + display: grid; + grid-template-columns: 1fr 2fr; + gap: var(--space-16); + margin-top: var(--space-16); +} + +.contact-info { + display: flex; + flex-direction: column; + gap: var(--space-6); +} + +.contact-card { + padding: var(--space-8); + background: var(--white); + border-radius: var(--radius-xl); + box-shadow: var(--shadow-sm); + transition: var(--transition-base); +} + +.contact-card:hover { + box-shadow: var(--shadow-md); + transform: translateY(-3px); +} + +.contact-icon { + margin-bottom: var(--space-4); +} + +.contact-card h4 { + font-size: var(--text-lg); + margin-bottom: var(--space-3); + color: var(--neutral-900); + font-family: var(--font-body); + font-weight: 600; +} + +.contact-card p { + color: var(--neutral-600); + line-height: 1.7; +} + +.contact-form-wrapper { + background: var(--white); + padding: var(--space-10); + border-radius: var(--radius-2xl); + box-shadow: var(--shadow-lg); +} + +.form-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-6); +} + +.form-group { + margin-bottom: var(--space-6); +} + +.form-group label { + display: block; + font-size: var(--text-sm); + font-weight: 600; + color: var(--neutral-700); + margin-bottom: var(--space-2); +} + +.form-group input, +.form-group textarea { + width: 100%; + padding: var(--space-4); + border: 2px solid var(--neutral-200); + border-radius: var(--radius-lg); + font-family: var(--font-body); + font-size: var(--text-base); + color: var(--neutral-800); + transition: var(--transition-base); + background: var(--neutral-50); +} + +.form-group input:focus, +.form-group textarea:focus { + outline: none; + border-color: var(--accent-500); + background: var(--white); +} + +.form-group textarea { + resize: vertical; + min-height: 120px; +} + +/* =================================== + FOOTER + =================================== */ + +.footer { + background: linear-gradient(135deg, var(--primary-900), var(--primary-800)); + color: var(--beige); + padding: var(--space-20) 0 var(--space-8); +} + +.footer-content { + display: grid; + grid-template-columns: 2fr 1fr 1fr 1.5fr; + gap: var(--space-12); + margin-bottom: var(--space-16); +} + +.footer-logo { + display: flex; + align-items: center; + gap: var(--space-3); + margin-bottom: var(--space-5); +} + +.footer-logo h3 { + font-size: var(--text-2xl); + color: var(--white); + line-height: 1; + margin-bottom: var(--space-1); +} + +.footer-logo span { + font-size: var(--text-xs); + color: var(--beige); + font-family: var(--font-body); + font-weight: 400; +} + +.footer-about p { + line-height: 1.8; + margin-bottom: var(--space-6); + color: var(--beige); +} + +.social-links { + display: flex; + gap: var(--space-3); +} + +.social-links a { + width: 40px; + height: 40px; + background: rgba(255, 255, 255, 0.1); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + color: var(--beige); + transition: var(--transition-base); +} + +.social-links a:hover { + background: var(--accent-500); + color: var(--white); + transform: translateY(-3px); +} + +.footer-col h4 { + font-size: var(--text-lg); + color: var(--white); + margin-bottom: var(--space-5); + font-family: var(--font-body); + font-weight: 600; +} + +.footer-links { + list-style: none; + display: flex; + flex-direction: column; + gap: var(--space-3); +} + +.footer-links a { + color: var(--beige); + transition: var(--transition-base); + display: inline-block; +} + +.footer-links a:hover { + color: var(--accent-400); + padding-left: var(--space-2); +} + +.newsletter-text { + font-size: var(--text-sm); + margin-bottom: var(--space-4); + color: var(--beige); +} + +.newsletter-form { + display: flex; + gap: var(--space-2); +} + +.newsletter-form input { + flex: 1; + padding: var(--space-3) var(--space-4); + border: 2px solid rgba(255, 255, 255, 0.2); + border-radius: var(--radius-lg); + background: rgba(255, 255, 255, 0.1); + color: var(--white); + font-size: var(--text-sm); + transition: var(--transition-base); +} + +.newsletter-form input::placeholder { + color: rgba(255, 255, 255, 0.5); +} + +.newsletter-form input:focus { + outline: none; + border-color: var(--accent-400); + background: rgba(255, 255, 255, 0.15); +} + +.newsletter-form button { + width: 44px; + height: 44px; + background: var(--accent-500); + border-radius: var(--radius-lg); + display: flex; + align-items: center; + justify-content: center; + color: var(--white); + transition: var(--transition-base); + flex-shrink: 0; +} + +.newsletter-form button:hover { + background: var(--accent-600); + transform: scale(1.05); +} + +.footer-bottom { + display: flex; + align-items: center; + justify-content: space-between; + padding-top: var(--space-8); + border-top: 1px solid rgba(255, 255, 255, 0.1); + font-size: var(--text-sm); +} + +.footer-bottom-links { + display: flex; + align-items: center; + gap: var(--space-4); +} + +.footer-bottom-links a { + color: var(--beige); + transition: var(--transition-base); +} + +.footer-bottom-links a:hover { + color: var(--accent-400); +} + +/* =================================== + ANIMATIONS + =================================== */ + +.fade-in { + opacity: 0; + animation: fadeIn 1s ease-out forwards; +} + +@keyframes fadeIn { + to { + opacity: 1; + } +} + +.slide-in-left, +.slide-in-right, +.fade-up { + opacity: 0; +} + +.slide-in-left { + transform: translateX(-30px); +} + +.slide-in-right { + transform: translateX(30px); +} + +.fade-up { + transform: translateY(30px); +} + +.slide-in-left.visible, +.slide-in-right.visible, +.fade-up.visible { + opacity: 1; + transform: translate(0, 0); + transition: all var(--transition-smooth); +} + +/* =================================== + RESPONSIVE DESIGN + =================================== */ + +@media (max-width: 1200px) { + .hero-content { + gap: var(--space-12); + } + + .about-content { + gap: var(--space-12); + } +} + +@media (max-width: 968px) { + .nav-menu { + position: fixed; + left: -100%; + top: 80px; + flex-direction: column; + background: var(--white); + width: 100%; + text-align: center; + transition: var(--transition-base); + box-shadow: var(--shadow-lg); + padding: var(--space-8) 0; + gap: var(--space-6); + } + + .nav-menu.active { + left: 0; + } + + .nav-cta { + display: none; + } + + .hamburger { + display: flex; + } + + .hamburger.active span:nth-child(1) { + transform: rotate(45deg) translate(8px, 8px); + } + + .hamburger.active span:nth-child(2) { + opacity: 0; + } + + .hamburger.active span:nth-child(3) { + transform: rotate(-45deg) translate(7px, -6px); + } + + .hero-content { + grid-template-columns: 1fr; + text-align: center; + } + + .hero-description { + margin: 0 auto var(--space-8); + } + + .hero-actions { + justify-content: center; + } + + .floating-card { + display: none; + } + + .about-content { + grid-template-columns: 1fr; + } + + .about-image-grid { + max-width: 500px; + margin: 0 auto; + } + + .contact-content { + grid-template-columns: 1fr; + } + + .cta-content { + flex-direction: column; + text-align: center; + gap: var(--space-8); + } + + .footer-content { + grid-template-columns: 1fr; + gap: var(--space-10); + } + + .footer-bottom { + flex-direction: column; + gap: var(--space-4); + text-align: center; + } + + .gallery-item.large { + grid-column: span 1; + grid-row: span 1; + } + + .gallery-item.tall { + grid-row: span 1; + } +} + +@media (max-width: 640px) { + .hero-text h1 { + font-size: var(--text-4xl); + } + + .hero-stats { + grid-template-columns: 1fr; + } + + .section-title { + font-size: var(--text-3xl); + } + + .cta-text h2 { + font-size: var(--text-3xl); + } + + .form-row { + grid-template-columns: 1fr; + } + + .products-grid, + .news-grid { + grid-template-columns: 1fr; + } + + .badges-grid { + grid-template-columns: 1fr; + } + + .about-image-grid { + grid-template-columns: 1fr; + } + + .about-img-small { + margin-top: 0; + } +}