diff --git a/index.html b/index.html new file mode 100644 index 0000000..8997fb6 --- /dev/null +++ b/index.html @@ -0,0 +1,897 @@ + + + + + + המדריך ציוד משרדי - כלים למחשבה + + + + + + + + + + + + +
+

משלוח חינם בהזמנות מעל ₪200 | שירות לקוחות זמין בטלפון ובוואטסאפ

+
+ + +
+
+ + + + + + +
+ + + +
+
+
+ + + + + + + + + +
+ +
+ +
+
+
+
+ חדש בחנות +

יומנים 2025

+

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

+ לצפייה בקולקציה +
+
+
+
+
+ מבצע מיוחד +

חזרה לעבודה

+

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

+ לקניות +
+
+
+
+
+ קולקציה חדשה +

ריהוט משרדי

+

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

+ גלו עוד +
+
+
+ + + +
+
+ + +
+
+
+

קטגוריות מובילות

+
+
+ +
+
+

ציוד משרדי

+ צפייה בכל המוצרים +
+ + +
+
+

כלי כתיבה

+ לקניות +
+ + +
+
+

מחשבים

+ לקניות +
+ + +
+
+

ריהוט

+ לקניות +
+ + +
+
+

מדפסות

+ לקניות +
+ +
+
+
+ + +
+
+
+

חדש בחנות

+ צפייה בכל +
+
+ + + + +
+
+
+ + +
+
+
+ השראה +

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

+

מבחר מתנות מיוחדות לעמיתים, לקוחות וחברים. כי מתנה טובה היא לא רק מתנה - היא חוויה.

+ לגלות מתנות +
+
+ + +
+
+
+

רבי מכר

+ צפייה בכל +
+
+ + + + +
+
+
+ + +
+
+
+

קולקציות נבחרות

+
+
+ +
+
+

חזרה ללימודים

+

כל מה שצריך לשנת הלימודים

+
+ + +
+
+

חזרה לעבודה

+

ציוד איכותי לסביבת העבודה

+
+ + +
+
+

מותגים מובילים

+

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

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

משלוח מהיר

+

משלוחים לכל הארץ תוך 2-5 ימי עסקים

+
+
+
+ + + +
+

איכות מובטחת

+

מוצרים מהמותגים המובילים בעולם

+
+
+
+ + + +
+

שירות לקוחות

+

צוות מקצועי זמין לכל שאלה

+
+
+
+ + + + +
+

מחירים תחרותיים

+

הצעות מחיר מיוחדות לעסקים וארגונים

+
+
+
+
+ + +
+
+ +
+
+
+ + + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..3f4f2e0 --- /dev/null +++ b/script.js @@ -0,0 +1,306 @@ +(function() { + 'use strict'; + + // DOM Elements + const menuToggle = document.querySelector('.menu-toggle'); + const mobileMenu = document.querySelector('.mobile-menu'); + const mobileMenuClose = document.querySelector('.mobile-menu-close'); + const mobileNavItems = document.querySelectorAll('.mobile-nav-item button'); + + const searchToggle = document.querySelector('.search-toggle'); + const searchOverlay = document.querySelector('.search-overlay'); + const searchClose = document.querySelector('.search-close'); + const searchInput = document.getElementById('search-input'); + + const cartToggle = document.querySelector('.cart-toggle'); + const cartDrawer = document.querySelector('.cart-drawer'); + const cartDrawerClose = document.querySelector('.cart-drawer-close'); + const cartOverlay = document.querySelector('.cart-overlay'); + + const heroSlides = document.querySelectorAll('.hero-slide'); + const heroNavBtns = document.querySelectorAll('.hero-nav-btn'); + + // Mobile Menu + function openMobileMenu() { + mobileMenu.classList.add('active'); + mobileMenu.setAttribute('aria-hidden', 'false'); + menuToggle.setAttribute('aria-expanded', 'true'); + document.body.classList.add('menu-open'); + } + + function closeMobileMenu() { + mobileMenu.classList.remove('active'); + mobileMenu.setAttribute('aria-hidden', 'true'); + menuToggle.setAttribute('aria-expanded', 'false'); + document.body.classList.remove('menu-open'); + } + + if (menuToggle && mobileMenu) { + menuToggle.addEventListener('click', openMobileMenu); + mobileMenuClose.addEventListener('click', closeMobileMenu); + + // Close on escape + document.addEventListener('keydown', (e) => { + if (e.key === 'Escape' && mobileMenu.classList.contains('active')) { + closeMobileMenu(); + } + }); + } + + // Mobile Nav Accordion + mobileNavItems.forEach(item => { + item.addEventListener('click', function() { + const parent = this.closest('.mobile-nav-item'); + const isOpen = parent.classList.contains('open'); + + // Close all + document.querySelectorAll('.mobile-nav-item.open').forEach(openItem => { + openItem.classList.remove('open'); + openItem.querySelector('button').setAttribute('aria-expanded', 'false'); + }); + + // Toggle current + if (!isOpen) { + parent.classList.add('open'); + this.setAttribute('aria-expanded', 'true'); + } + }); + }); + + // Search + function openSearch() { + searchOverlay.classList.add('active'); + searchOverlay.setAttribute('aria-hidden', 'false'); + document.body.classList.add('search-open'); + setTimeout(() => searchInput.focus(), 100); + } + + function closeSearch() { + searchOverlay.classList.remove('active'); + searchOverlay.setAttribute('aria-hidden', 'true'); + document.body.classList.remove('search-open'); + searchInput.value = ''; + } + + if (searchToggle && searchOverlay) { + searchToggle.addEventListener('click', openSearch); + searchClose.addEventListener('click', closeSearch); + + document.addEventListener('keydown', (e) => { + if (e.key === 'Escape' && searchOverlay.classList.contains('active')) { + closeSearch(); + } + }); + } + + // Cart Drawer + function openCart() { + cartDrawer.classList.add('active'); + cartDrawer.setAttribute('aria-hidden', 'false'); + cartOverlay.classList.add('active'); + document.body.classList.add('cart-open'); + } + + function closeCart() { + cartDrawer.classList.remove('active'); + cartDrawer.setAttribute('aria-hidden', 'true'); + cartOverlay.classList.remove('active'); + document.body.classList.remove('cart-open'); + } + + if (cartToggle && cartDrawer) { + cartToggle.addEventListener('click', openCart); + cartDrawerClose.addEventListener('click', closeCart); + cartOverlay.addEventListener('click', closeCart); + + document.addEventListener('keydown', (e) => { + if (e.key === 'Escape' && cartDrawer.classList.contains('active')) { + closeCart(); + } + }); + } + + // Hero Slider + let currentSlide = 0; + let slideInterval; + + function showSlide(index) { + heroSlides.forEach((slide, i) => { + slide.classList.toggle('active', i === index); + }); + heroNavBtns.forEach((btn, i) => { + btn.classList.toggle('active', i === index); + }); + currentSlide = index; + } + + function nextSlide() { + const next = (currentSlide + 1) % heroSlides.length; + showSlide(next); + } + + function startSlider() { + slideInterval = setInterval(nextSlide, 5000); + } + + function stopSlider() { + clearInterval(slideInterval); + } + + if (heroSlides.length > 1 && heroNavBtns.length > 0) { + heroNavBtns.forEach((btn, index) => { + btn.addEventListener('click', () => { + stopSlider(); + showSlide(index); + startSlider(); + }); + }); + + // Check for reduced motion preference + const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)'); + if (!prefersReducedMotion.matches) { + startSlider(); + } + + prefersReducedMotion.addEventListener('change', () => { + if (prefersReducedMotion.matches) { + stopSlider(); + } else { + startSlider(); + } + }); + } + + // Scroll Animations + const observerOptions = { + root: null, + rootMargin: '0px', + threshold: 0.1 + }; + + const animateOnScroll = (entries, observer) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('visible'); + observer.unobserve(entry.target); + } + }); + }; + + const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)'); + + if (!prefersReducedMotion.matches) { + const observer = new IntersectionObserver(animateOnScroll, observerOptions); + + // Add animation classes + const animatedElements = document.querySelectorAll( + '.product-card, .category-card, .collection-card, .feature' + ); + + animatedElements.forEach((el, index) => { + el.style.opacity = '0'; + el.style.transform = 'translateY(20px)'; + el.style.transition = `opacity 0.6s ease ${index * 0.05}s, transform 0.6s ease ${index * 0.05}s`; + observer.observe(el); + }); + + // Add visible class styles + const style = document.createElement('style'); + style.textContent = ` + .product-card.visible, + .category-card.visible, + .collection-card.visible, + .feature.visible { + opacity: 1 !important; + transform: translateY(0) !important; + } + `; + document.head.appendChild(style); + } + + // Quick Add to Cart + const quickAddButtons = document.querySelectorAll('.product-quick-add'); + + quickAddButtons.forEach(btn => { + btn.addEventListener('click', (e) => { + e.preventDefault(); + + // Visual feedback + const originalHTML = btn.innerHTML; + btn.innerHTML = ` + + + + `; + btn.style.background = 'var(--color-text)'; + btn.style.borderColor = 'var(--color-text)'; + btn.style.color = 'var(--color-white)'; + + setTimeout(() => { + btn.innerHTML = originalHTML; + btn.style.background = ''; + btn.style.borderColor = ''; + btn.style.color = ''; + }, 1500); + + // Update cart count + const cartCount = document.querySelector('.cart-count'); + if (cartCount) { + const current = parseInt(cartCount.textContent) || 0; + cartCount.textContent = current + 1; + } + }); + }); + + // Newsletter Form + const newsletterForm = document.querySelector('.newsletter-form'); + + if (newsletterForm) { + newsletterForm.addEventListener('submit', (e) => { + e.preventDefault(); + + const email = newsletterForm.querySelector('input[type="email"]'); + const btn = newsletterForm.querySelector('button'); + const originalText = btn.textContent; + + btn.textContent = 'נרשמת בהצלחה!'; + btn.disabled = true; + email.value = ''; + + setTimeout(() => { + btn.textContent = originalText; + btn.disabled = false; + }, 3000); + }); + } + + // Dropdown keyboard navigation + const dropdownItems = document.querySelectorAll('.nav-item.has-dropdown'); + + dropdownItems.forEach(item => { + const link = item.querySelector('.nav-link'); + const dropdown = item.querySelector('.dropdown-menu'); + + link.addEventListener('keydown', (e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + dropdown.style.opacity = '1'; + dropdown.style.visibility = 'visible'; + dropdown.style.transform = 'translateY(0)'; + + const firstLink = dropdown.querySelector('a'); + if (firstLink) firstLink.focus(); + } + }); + + dropdown.addEventListener('keydown', (e) => { + if (e.key === 'Escape') { + dropdown.style.opacity = ''; + dropdown.style.visibility = ''; + dropdown.style.transform = ''; + link.focus(); + } + }); + }); + +})(); diff --git a/style.css b/style.css new file mode 100644 index 0000000..8f06c5a --- /dev/null +++ b/style.css @@ -0,0 +1,1423 @@ +:root { + --color-bg: #fff; + --color-bg-alt: #f7f7f5; + --color-text: #1a1a1a; + --color-text-light: #666; + --color-text-lighter: #999; + --color-border: #e5e5e5; + --color-border-dark: #d0d0d0; + --color-accent: #1a1a1a; + --color-accent-hover: #333; + --color-white: #fff; + --color-overlay: rgba(0, 0, 0, 0.5); + + --font-primary: 'Heebo', 'Assistant', -apple-system, BlinkMacSystemFont, sans-serif; + + --header-height: 60px; + --announcement-height: 36px; + + --transition-fast: 150ms ease; + --transition-normal: 250ms ease; + --transition-slow: 400ms ease; + + --container-max: 1400px; + --container-padding: 20px; +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + font-size: 16px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +body { + font-family: var(--font-primary); + font-weight: 400; + line-height: 1.6; + color: var(--color-text); + background: var(--color-bg); +} + +body.menu-open, +body.cart-open, +body.search-open { + overflow: hidden; +} + +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +.container { + max-width: var(--container-max); + margin: 0 auto; + padding: 0 var(--container-padding); +} + +a { + color: inherit; + text-decoration: none; +} + +button { + font-family: inherit; + font-size: inherit; + background: none; + border: none; + cursor: pointer; + color: inherit; +} + +ul, ol { + list-style: none; +} + +img { + max-width: 100%; + height: auto; + display: block; +} + +/* Buttons */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 12px 24px; + font-size: 0.875rem; + font-weight: 500; + letter-spacing: 0.02em; + border-radius: 0; + transition: all var(--transition-fast); + cursor: pointer; + border: none; +} + +.btn-primary { + background: var(--color-accent); + color: var(--color-white); +} + +.btn-primary:hover { + background: var(--color-accent-hover); +} + +.btn-secondary { + background: transparent; + color: var(--color-text); + border: 1px solid var(--color-text); +} + +.btn-secondary:hover { + background: var(--color-text); + color: var(--color-white); +} + +.btn-full { + width: 100%; +} + +.btn:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +/* Announcement Bar */ +.announcement-bar { + background: var(--color-accent); + color: var(--color-white); + text-align: center; + padding: 8px var(--container-padding); + font-size: 0.75rem; + font-weight: 400; + letter-spacing: 0.02em; + height: var(--announcement-height); + display: flex; + align-items: center; + justify-content: center; +} + +/* Header */ +.header { + position: sticky; + top: 0; + z-index: 100; + background: var(--color-bg); + border-bottom: 1px solid var(--color-border); + height: var(--header-height); +} + +.header-inner { + max-width: var(--container-max); + margin: 0 auto; + padding: 0 var(--container-padding); + height: 100%; + display: flex; + align-items: center; + justify-content: space-between; + gap: 20px; +} + +.logo { + font-size: 1.125rem; + font-weight: 600; + letter-spacing: -0.01em; + white-space: nowrap; +} + +/* Menu Toggle */ +.menu-toggle { + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + padding: 0; +} + +.hamburger { + display: block; + width: 18px; + height: 2px; + background: var(--color-text); + position: relative; +} + +.hamburger::before, +.hamburger::after { + content: ''; + position: absolute; + right: 0; + width: 18px; + height: 2px; + background: var(--color-text); +} + +.hamburger::before { + top: -6px; +} + +.hamburger::after { + bottom: -6px; +} + +/* Main Nav */ +.main-nav { + display: none; + flex: 1; +} + +.nav-list { + display: flex; + align-items: center; + gap: 24px; +} + +.nav-link { + font-size: 0.875rem; + font-weight: 400; + padding: 8px 0; + position: relative; +} + +.nav-link::after { + content: ''; + position: absolute; + bottom: 4px; + right: 0; + width: 0; + height: 1px; + background: var(--color-text); + transition: width var(--transition-fast); +} + +.nav-item:hover .nav-link::after { + width: 100%; +} + +/* Dropdown */ +.dropdown-menu { + position: absolute; + top: 100%; + right: 0; + left: 0; + background: var(--color-bg); + border-bottom: 1px solid var(--color-border); + opacity: 0; + visibility: hidden; + transform: translateY(-10px); + transition: all var(--transition-normal); + padding: 32px 0; + z-index: 99; +} + +.nav-item.has-dropdown:hover .dropdown-menu { + opacity: 1; + visibility: visible; + transform: translateY(0); +} + +.dropdown-inner { + max-width: var(--container-max); + margin: 0 auto; + padding: 0 var(--container-padding); + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 40px; +} + +.dropdown-menu-brands .dropdown-inner { + grid-template-columns: repeat(3, 1fr); +} + +.dropdown-title { + font-size: 0.75rem; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.05em; + margin-bottom: 16px; + color: var(--color-text-light); +} + +.dropdown-column ul { + display: flex; + flex-direction: column; + gap: 8px; +} + +.dropdown-column a { + font-size: 0.875rem; + color: var(--color-text); + transition: color var(--transition-fast); +} + +.dropdown-column a:hover { + color: var(--color-text-light); +} + +/* Header Actions */ +.header-actions { + display: flex; + align-items: center; + gap: 8px; +} + +.header-actions button, +.header-actions a { + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + transition: opacity var(--transition-fast); +} + +.header-actions button:hover, +.header-actions a:hover { + opacity: 0.7; +} + +.cart-toggle { + position: relative; +} + +.cart-count { + position: absolute; + top: 4px; + left: 4px; + width: 16px; + height: 16px; + background: var(--color-accent); + color: var(--color-white); + font-size: 0.625rem; + font-weight: 500; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; +} + +/* Search Overlay */ +.search-overlay { + position: fixed; + inset: 0; + background: var(--color-bg); + z-index: 200; + display: flex; + align-items: flex-start; + justify-content: center; + padding-top: 120px; + opacity: 0; + visibility: hidden; + transition: all var(--transition-normal); +} + +.search-overlay.active { + opacity: 1; + visibility: visible; +} + +.search-container { + width: 100%; + max-width: 600px; + padding: 0 var(--container-padding); + position: relative; +} + +.search-form { + display: flex; + border-bottom: 2px solid var(--color-text); +} + +.search-form input { + flex: 1; + font-family: inherit; + font-size: 1.5rem; + font-weight: 300; + padding: 12px 0; + border: none; + background: transparent; + outline: none; +} + +.search-form input::placeholder { + color: var(--color-text-lighter); +} + +.search-form button { + padding: 12px; +} + +.search-close { + position: fixed; + top: 20px; + left: 20px; + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; +} + +/* Mobile Menu */ +.mobile-menu { + position: fixed; + top: 0; + right: 0; + bottom: 0; + width: 100%; + max-width: 400px; + background: var(--color-bg); + z-index: 150; + transform: translateX(100%); + transition: transform var(--transition-slow); + display: flex; + flex-direction: column; + overflow-y: auto; +} + +.mobile-menu.active { + transform: translateX(0); +} + +.mobile-menu-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px var(--container-padding); + border-bottom: 1px solid var(--color-border); +} + +.mobile-menu-title { + font-size: 0.75rem; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.mobile-menu-close { + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; +} + +.mobile-nav { + flex: 1; + padding: 24px 0; +} + +.mobile-nav-list { + display: flex; + flex-direction: column; +} + +.mobile-nav-item { + border-bottom: 1px solid var(--color-border); +} + +.mobile-nav-link { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + padding: 16px var(--container-padding); + font-size: 1rem; + font-weight: 400; + text-align: right; +} + +.mobile-nav-link svg { + transition: transform var(--transition-fast); +} + +.mobile-nav-item.open .mobile-nav-link svg { + transform: rotate(90deg); +} + +.mobile-submenu { + display: none; + padding: 0 var(--container-padding) 16px; +} + +.mobile-nav-item.open .mobile-submenu { + display: block; +} + +.mobile-submenu li { + padding: 8px 0; +} + +.mobile-submenu a { + font-size: 0.875rem; + color: var(--color-text-light); +} + +.mobile-menu-footer { + padding: 24px var(--container-padding); + border-top: 1px solid var(--color-border); + display: flex; + gap: 24px; +} + +.mobile-menu-footer a { + font-size: 0.875rem; + color: var(--color-text-light); +} + +/* Cart Drawer */ +.cart-drawer { + position: fixed; + top: 0; + left: 0; + bottom: 0; + width: 100%; + max-width: 420px; + background: var(--color-bg); + z-index: 150; + transform: translateX(-100%); + transition: transform var(--transition-slow); + display: flex; + flex-direction: column; +} + +.cart-drawer.active { + transform: translateX(0); +} + +.cart-drawer-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px var(--container-padding); + border-bottom: 1px solid var(--color-border); +} + +.cart-drawer-header h2 { + font-size: 0.875rem; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.cart-drawer-close { + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; +} + +.cart-drawer-content { + flex: 1; + overflow-y: auto; + padding: var(--container-padding); +} + +.cart-empty { + text-align: center; + padding: 40px 0; +} + +.cart-empty p { + margin-bottom: 24px; + color: var(--color-text-light); +} + +.cart-drawer-footer { + padding: var(--container-padding); + border-top: 1px solid var(--color-border); +} + +.cart-notes { + margin-bottom: 16px; +} + +.cart-notes label { + display: block; + font-size: 0.75rem; + font-weight: 500; + margin-bottom: 8px; + color: var(--color-text-light); +} + +.cart-notes textarea { + width: 100%; + padding: 12px; + font-family: inherit; + font-size: 0.875rem; + border: 1px solid var(--color-border); + resize: vertical; + min-height: 60px; +} + +.cart-subtotal { + display: flex; + justify-content: space-between; + font-size: 0.875rem; + margin-bottom: 8px; +} + +.cart-shipping-note { + font-size: 0.75rem; + color: var(--color-text-light); + margin-bottom: 16px; +} + +.cart-overlay { + position: fixed; + inset: 0; + background: var(--color-overlay); + z-index: 140; + opacity: 0; + visibility: hidden; + transition: all var(--transition-normal); +} + +.cart-overlay.active { + opacity: 1; + visibility: visible; +} + +/* Hero */ +.hero { + position: relative; + height: 70vh; + min-height: 500px; + max-height: 800px; + overflow: hidden; +} + +.hero-slide { + position: absolute; + inset: 0; + opacity: 0; + transition: opacity var(--transition-slow); +} + +.hero-slide.active { + opacity: 1; +} + +.hero-bg { + position: absolute; + inset: 0; +} + +.hero-bg-1 { + background: linear-gradient(135deg, #e8e4dc 0%, #d4cfc5 50%, #c7c2b8 100%); +} + +.hero-bg-2 { + background: linear-gradient(135deg, #2c3e50 0%, #34495e 50%, #3d566e 100%); +} + +.hero-bg-3 { + background: linear-gradient(135deg, #f5f0e8 0%, #e8e0d5 50%, #ddd4c8 100%); +} + +.hero-content { + position: absolute; + bottom: 60px; + right: 60px; + max-width: 500px; + z-index: 2; +} + +.hero-bg-2 + .hero-content { + color: var(--color-white); +} + +.hero-label { + display: inline-block; + font-size: 0.75rem; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.1em; + margin-bottom: 16px; + color: var(--color-text-light); +} + +.hero-bg-2 + .hero-content .hero-label { + color: rgba(255, 255, 255, 0.7); +} + +.hero h1 { + font-size: clamp(2rem, 5vw, 3.5rem); + font-weight: 500; + line-height: 1.1; + margin-bottom: 16px; + letter-spacing: -0.02em; +} + +.hero p { + font-size: 1rem; + line-height: 1.6; + margin-bottom: 24px; + color: var(--color-text-light); +} + +.hero-bg-2 + .hero-content p { + color: rgba(255, 255, 255, 0.8); +} + +.hero-bg-2 + .hero-content .btn-primary { + background: var(--color-white); + color: var(--color-text); +} + +.hero-bg-2 + .hero-content .btn-primary:hover { + background: rgba(255, 255, 255, 0.9); +} + +.hero-nav { + position: absolute; + bottom: 30px; + left: 50%; + transform: translateX(-50%); + display: flex; + gap: 8px; + z-index: 3; +} + +.hero-nav-btn { + width: 8px; + height: 8px; + border-radius: 50%; + background: rgba(0, 0, 0, 0.2); + transition: all var(--transition-fast); +} + +.hero-nav-btn.active { + background: var(--color-text); + width: 24px; + border-radius: 4px; +} + +/* Featured Categories */ +.featured-categories { + padding: 60px 0; +} + +.section-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 32px; +} + +.section-header h2 { + font-size: 1.25rem; + font-weight: 500; + letter-spacing: -0.01em; +} + +.section-link { + font-size: 0.875rem; + color: var(--color-text-light); + transition: color var(--transition-fast); +} + +.section-link:hover { + color: var(--color-text); +} + +.categories-grid { + display: grid; + grid-template-columns: 1fr; + gap: 16px; +} + +.category-card { + position: relative; + display: block; + aspect-ratio: 4/3; + overflow: hidden; +} + +.category-card-large { + aspect-ratio: 16/9; +} + +.category-bg { + position: absolute; + inset: 0; + transition: transform var(--transition-slow); +} + +.category-card:hover .category-bg { + transform: scale(1.03); +} + +.category-bg-office { + background: linear-gradient(135deg, #f8f6f3 0%, #e8e4dc 100%); +} + +.category-bg-writing { + background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%); +} + +.category-bg-computers { + background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); +} + +.category-bg-furniture { + background: linear-gradient(135deg, #d4a373 0%, #bc8a5f 100%); +} + +.category-bg-printers { + background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%); +} + +.category-content { + position: absolute; + bottom: 24px; + right: 24px; + z-index: 2; +} + +.category-card h3 { + font-size: 1.25rem; + font-weight: 500; + margin-bottom: 8px; + color: var(--color-text); +} + +.category-bg-writing + .category-content h3, +.category-bg-computers + .category-content h3, +.category-bg-printers + .category-content h3 { + color: var(--color-white); +} + +.category-link { + font-size: 0.875rem; + color: var(--color-text-light); +} + +.category-bg-writing + .category-content .category-link, +.category-bg-computers + .category-content .category-link, +.category-bg-printers + .category-content .category-link { + color: rgba(255, 255, 255, 0.7); +} + +/* Products Section */ +.products-section { + padding: 60px 0; +} + +.products-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; +} + +.product-card { + position: relative; +} + +.product-link { + display: block; +} + +.product-image { + position: relative; + aspect-ratio: 1; + margin-bottom: 12px; + overflow: hidden; +} + +.product-image-placeholder { + width: 100%; + height: 100%; + transition: transform var(--transition-slow); +} + +.product-card:hover .product-image-placeholder { + transform: scale(1.03); +} + +.product-placeholder-1 { + background: linear-gradient(135deg, #faf8f5 0%, #e8e4dc 100%); +} + +.product-placeholder-2 { + background: linear-gradient(135deg, #1a1a1a 0%, #333 100%); +} + +.product-placeholder-3 { + background: linear-gradient(135deg, #f0ebe3 0%, #ddd5c8 100%); +} + +.product-placeholder-4 { + background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 100%); +} + +.product-placeholder-5 { + background: linear-gradient(135deg, #374151 0%, #1f2937 100%); +} + +.product-placeholder-6 { + background: linear-gradient(135deg, #f3f4f6 0%, #d1d5db 100%); +} + +.product-placeholder-7 { + background: linear-gradient(135deg, #d4a373 0%, #bc8a5f 100%); +} + +.product-placeholder-8 { + background: linear-gradient(135deg, #fff 0%, #f3f4f6 100%); +} + +.product-badge { + position: absolute; + top: 12px; + right: 12px; + padding: 4px 8px; + font-size: 0.625rem; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.05em; + background: var(--color-text); + color: var(--color-white); +} + +.badge-sale { + background: #dc2626; +} + +.product-info { + text-align: right; +} + +.product-title { + font-size: 0.875rem; + font-weight: 400; + margin-bottom: 4px; + line-height: 1.4; +} + +.product-brand { + font-size: 0.75rem; + color: var(--color-text-light); + margin-bottom: 8px; +} + +.product-price { + font-size: 0.875rem; +} + +.price-sale { + color: #dc2626; +} + +.price-original { + text-decoration: line-through; + color: var(--color-text-light); + margin-right: 8px; +} + +.product-quick-add { + position: absolute; + bottom: 80px; + left: 12px; + width: 36px; + height: 36px; + background: var(--color-bg); + border: 1px solid var(--color-border); + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity var(--transition-fast); +} + +.product-card:hover .product-quick-add { + opacity: 1; +} + +.product-quick-add:hover { + background: var(--color-text); + border-color: var(--color-text); + color: var(--color-white); +} + +/* Promo Banner */ +.promo-banner { + position: relative; + padding: 80px var(--container-padding); + min-height: 400px; + display: flex; + align-items: center; +} + +.promo-bg { + position: absolute; + inset: 0; + background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); +} + +.promo-content { + position: relative; + max-width: 500px; + color: var(--color-white); + z-index: 2; + margin: 0 auto 0 0; + padding-right: 40px; +} + +.promo-label { + display: inline-block; + font-size: 0.75rem; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.1em; + margin-bottom: 16px; + color: rgba(255, 255, 255, 0.6); +} + +.promo-banner h2 { + font-size: clamp(1.75rem, 4vw, 2.5rem); + font-weight: 500; + line-height: 1.2; + margin-bottom: 16px; + letter-spacing: -0.02em; +} + +.promo-banner p { + font-size: 1rem; + line-height: 1.6; + margin-bottom: 24px; + color: rgba(255, 255, 255, 0.8); +} + +.promo-banner .btn-secondary { + border-color: var(--color-white); + color: var(--color-white); +} + +.promo-banner .btn-secondary:hover { + background: var(--color-white); + color: var(--color-text); +} + +/* Collections */ +.collections-section { + padding: 60px 0; + background: var(--color-bg-alt); +} + +.collections-grid { + display: grid; + grid-template-columns: 1fr; + gap: 16px; +} + +.collection-card { + position: relative; + display: block; + aspect-ratio: 16/9; + overflow: hidden; +} + +.collection-bg { + position: absolute; + inset: 0; + transition: transform var(--transition-slow); +} + +.collection-card:hover .collection-bg { + transform: scale(1.03); +} + +.collection-bg-1 { + background: linear-gradient(135deg, #fef3c7 0%, #fbbf24 100%); +} + +.collection-bg-2 { + background: linear-gradient(135deg, #d1fae5 0%, #34d399 100%); +} + +.collection-bg-3 { + background: linear-gradient(135deg, #e0e7ff 0%, #818cf8 100%); +} + +.collection-content { + position: absolute; + bottom: 24px; + right: 24px; + z-index: 2; +} + +.collection-card h3 { + font-size: 1.125rem; + font-weight: 500; + margin-bottom: 4px; + color: var(--color-text); +} + +.collection-card p { + font-size: 0.875rem; + color: var(--color-text-light); +} + +/* Features */ +.features-section { + padding: 60px 0; + border-top: 1px solid var(--color-border); +} + +.features-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 32px; +} + +.feature { + text-align: center; +} + +.feature-icon { + margin-bottom: 16px; + color: var(--color-text); +} + +.feature h3 { + font-size: 0.875rem; + font-weight: 500; + margin-bottom: 8px; +} + +.feature p { + font-size: 0.8125rem; + color: var(--color-text-light); + line-height: 1.5; +} + +/* Newsletter */ +.newsletter-section { + padding: 60px 0; + background: var(--color-bg-alt); +} + +.newsletter-content { + max-width: 500px; + margin: 0 auto; + text-align: center; +} + +.newsletter-content h2 { + font-size: 1.5rem; + font-weight: 500; + margin-bottom: 12px; + letter-spacing: -0.01em; +} + +.newsletter-content p { + font-size: 0.9375rem; + color: var(--color-text-light); + margin-bottom: 24px; + line-height: 1.6; +} + +.newsletter-form { + display: flex; + flex-direction: column; + gap: 12px; +} + +.newsletter-form input { + width: 100%; + padding: 14px 16px; + font-family: inherit; + font-size: 0.9375rem; + border: 1px solid var(--color-border); + background: var(--color-bg); + text-align: right; +} + +.newsletter-form input:focus { + outline: none; + border-color: var(--color-text); +} + +.newsletter-form .btn { + width: 100%; +} + +/* Footer */ +.footer { + background: var(--color-text); + color: var(--color-white); + padding: 60px 0 30px; +} + +.footer-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 40px 20px; + margin-bottom: 40px; +} + +.footer h4 { + font-size: 0.75rem; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.05em; + margin-bottom: 20px; + color: rgba(255, 255, 255, 0.5); +} + +.footer ul li { + margin-bottom: 12px; +} + +.footer a { + font-size: 0.875rem; + color: rgba(255, 255, 255, 0.8); + transition: color var(--transition-fast); +} + +.footer a:hover { + color: var(--color-white); +} + +.contact-list li { + display: flex; + align-items: center; + gap: 8px; + font-size: 0.875rem; + color: rgba(255, 255, 255, 0.8); +} + +.contact-list svg { + flex-shrink: 0; +} + +.social-links { + display: flex; + gap: 16px; +} + +.social-links a { + display: flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + color: rgba(255, 255, 255, 0.8); +} + +.social-links a:hover { + color: var(--color-white); +} + +.footer-bottom { + padding-top: 30px; + border-top: 1px solid rgba(255, 255, 255, 0.1); + display: flex; + flex-direction: column; + gap: 20px; + align-items: center; + text-align: center; +} + +.footer-bottom p { + font-size: 0.75rem; + color: rgba(255, 255, 255, 0.5); +} + +.payment-methods { + display: flex; + gap: 12px; +} + +.payment-icon { + display: flex; + align-items: center; + justify-content: center; + opacity: 0.7; +} + +/* Responsive */ +@media (min-width: 640px) { + .categories-grid { + grid-template-columns: repeat(2, 1fr); + } + + .category-card-large { + grid-column: span 2; + } + + .collections-grid { + grid-template-columns: repeat(3, 1fr); + } + + .collection-card { + aspect-ratio: 4/3; + } + + .newsletter-form { + flex-direction: row; + } + + .newsletter-form input { + flex: 1; + } + + .newsletter-form .btn { + width: auto; + } +} + +@media (min-width: 768px) { + :root { + --header-height: 70px; + } + + .products-grid { + grid-template-columns: repeat(3, 1fr); + } + + .features-grid { + grid-template-columns: repeat(4, 1fr); + } + + .footer-grid { + grid-template-columns: repeat(4, 1fr); + } + + .footer-bottom { + flex-direction: row; + justify-content: space-between; + text-align: right; + } +} + +@media (min-width: 1024px) { + .menu-toggle { + display: none; + } + + .main-nav { + display: flex; + justify-content: center; + } + + .hero-content { + right: 80px; + bottom: 80px; + } + + .categories-grid { + grid-template-columns: repeat(4, 1fr); + grid-template-rows: repeat(2, 1fr); + } + + .category-card-large { + grid-column: span 2; + grid-row: span 2; + aspect-ratio: auto; + } + + .products-grid { + grid-template-columns: repeat(4, 1fr); + } + + .promo-content { + padding-right: 80px; + } +} + +@media (min-width: 1280px) { + :root { + --container-padding: 40px; + } + + .nav-list { + gap: 32px; + } +} + +/* Reduced Motion */ +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } + + .hero-slide { + transition: none; + } +} + +/* Focus States */ +:focus-visible { + outline: 2px solid var(--color-text); + outline-offset: 2px; +} + +button:focus-visible, +a:focus-visible { + outline: 2px solid var(--color-text); + outline-offset: 2px; +}