From 8e9ab55b9f69aebd7b98b0c54b9378f000112c35 Mon Sep 17 00:00:00 2001 From: ccadmingit1 Date: Tue, 15 Sep 2026 09:27:23 +0000 Subject: [PATCH] Initial AI-generated site --- index.html | 376 +++++++++++++++++++++ script.js | 164 +++++++++ style.css | 966 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 1506 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..78063f1 --- /dev/null +++ b/index.html @@ -0,0 +1,376 @@ + + + + + + מספרה בחולון – מוצרי שיער | המקום שלך ליופי ולטיפוח + + + + + + + + + + + + + +
+ +
+ +
+
+ +
+

מספרה וחנות מוצרי שיער

+

הסגנון שלך מתחיל כאן

+

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

+
+ + + הזמנת תור: 050-792-5222 + + לקטלוג המוצרים +
+
+
+ +
+
+
+
+

למה דווקא אנחנו?

+

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

+

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

+
+
+
+ +
+

ניסיון של שנים

+

צוות מספרים מוסמכים עם הכשרות מתקדמות

+
+
+
+ +
+

מוצרים מקוריים

+

רק מותגים מובילים, ישירות מהיבואנים

+
+
+
+ +
+

יחס אישי

+

כל לקוח מקבל את מלוא תשומת הלב

+
+
+
+
+
+
+ +
+
+
+

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

+

המוצרים שהמספרה עובדת איתם — עכשיו גם אצלכם בבית

+
+
+
+ +

לוריאל פרופסיונל

+

סדרות צבע, טיפוח ועיצוב מקצועיות

+
+
+
+ שוורצקופף +
+
+ וולה +
+
+ מרוקן אויל +
+
+ אולפלקס +
+
+ קרסטס +
+
+ ועוד... +
+
+
+
+

מה תמצאו אצלנו

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

שעות פתיחה

+
+
+
ראשון – חמישי
+
09:00 – 20:00
+
+
+
שישי
+
08:00 – 14:00
+
+
+
שבת
+
סגור
+
+
+
+ +

מומלץ לתאם תור מראש לשירות מהיר ואיכותי

+
+
+
+

איפה אנחנו?

+
+ +
+

חולון, מרכז העיר

+

ממוקמים בלב חולון עם גישה נוחה מכל רחבי העיר ומערי גוש דן.

+

חניה חינם ברחובות הסמוכים

+
+
+ + + התקשרו: 050-792-5222 + +
+
+
+
+ +
+
+
+
+

צרו קשר

+

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

+
+ + + 050-792-5222 + +
+
+
+
+ + +
+
+ + +
+
+ + +
+ +

* הטופס לצורכי הדגמה. להזמנת תור התקשרו ישירות.

+
+
+
+
+
+ + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..ec41f37 --- /dev/null +++ b/script.js @@ -0,0 +1,164 @@ +(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 isActive = navLinks.classList.toggle('active'); + navToggle.classList.toggle('active'); + navToggle.setAttribute('aria-expanded', isActive); + + // Trap focus in mobile menu when open + if (isActive) { + navLinks.querySelector('a').focus(); + } + }); + + // Close menu on link click + navLinks.querySelectorAll('a').forEach(function(link) { + link.addEventListener('click', function() { + navLinks.classList.remove('active'); + navToggle.classList.remove('active'); + navToggle.setAttribute('aria-expanded', 'false'); + }); + }); + + // Close menu on outside click + document.addEventListener('click', function(e) { + if (!navToggle.contains(e.target) && !navLinks.contains(e.target)) { + navLinks.classList.remove('active'); + navToggle.classList.remove('active'); + navToggle.setAttribute('aria-expanded', 'false'); + } + }); + + // Close menu on Escape + document.addEventListener('keydown', function(e) { + if (e.key === 'Escape' && navLinks.classList.contains('active')) { + navLinks.classList.remove('active'); + navToggle.classList.remove('active'); + navToggle.setAttribute('aria-expanded', 'false'); + navToggle.focus(); + } + }); + } + + // Scroll reveal animation + const revealElements = document.querySelectorAll('.reveal'); + + if (revealElements.length > 0 && 'IntersectionObserver' in window) { + const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + + if (prefersReducedMotion) { + revealElements.forEach(function(el) { + el.classList.add('visible'); + }); + } else { + const revealObserver = new IntersectionObserver(function(entries) { + entries.forEach(function(entry) { + if (entry.isIntersecting) { + entry.target.classList.add('visible'); + revealObserver.unobserve(entry.target); + } + }); + }, { + threshold: 0.15, + rootMargin: '0px 0px -40px 0px' + }); + + revealElements.forEach(function(el) { + revealObserver.observe(el); + }); + } + } else { + revealElements.forEach(function(el) { + el.classList.add('visible'); + }); + } + + // Smooth scroll for anchor links + document.querySelectorAll('a[href^="#"]').forEach(function(anchor) { + anchor.addEventListener('click', function(e) { + const targetId = this.getAttribute('href'); + if (targetId === '#') return; + + const target = document.querySelector(targetId); + if (target) { + e.preventDefault(); + const header = document.querySelector('.site-header'); + const headerHeight = header ? header.offsetHeight : 0; + const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - headerHeight - 20; + + window.scrollTo({ + top: targetPosition, + behavior: 'smooth' + }); + + // Set focus for accessibility + target.setAttribute('tabindex', '-1'); + target.focus({ preventScroll: true }); + } + }); + }); + + // Form handling (demo only) + const contactForm = document.getElementById('contact-form'); + + if (contactForm) { + contactForm.addEventListener('submit', function(e) { + e.preventDefault(); + + const submitBtn = this.querySelector('button[type="submit"]'); + const originalText = submitBtn.textContent; + + // Basic validation + const name = this.querySelector('#name'); + const phone = this.querySelector('#phone'); + + if (!name.value.trim() || !phone.value.trim()) { + return; + } + + submitBtn.textContent = 'שולח...'; + submitBtn.disabled = true; + + // Simulate submission + setTimeout(function() { + submitBtn.textContent = 'נשלח בהצלחה ✓'; + submitBtn.style.background = '#4a7c59'; + + setTimeout(function() { + submitBtn.textContent = originalText; + submitBtn.style.background = ''; + submitBtn.disabled = false; + contactForm.reset(); + }, 2500); + }, 800); + }); + } + + // Header shadow on scroll + const header = document.querySelector('.site-header'); + + if (header) { + let ticking = false; + + window.addEventListener('scroll', function() { + if (!ticking) { + window.requestAnimationFrame(function() { + if (window.pageYOffset > 50) { + header.style.boxShadow = '0 2px 20px rgba(0,0,0,0.08)'; + } else { + header.style.boxShadow = 'none'; + } + ticking = false; + }); + ticking = true; + } + }, { passive: true }); + } + +})(); diff --git a/style.css b/style.css new file mode 100644 index 0000000..72d2a8a --- /dev/null +++ b/style.css @@ -0,0 +1,966 @@ +:root { + --gold: #c9a86c; + --gold-dark: #8b7355; + --gold-light: rgba(201, 168, 108, 0.15); + --dark: #1a1a1a; + --dark-soft: #2d2d2d; + --cream: #faf8f5; + --cream-dark: #f0ebe3; + --text: #333; + --text-light: #4a4a4a; + --text-muted: rgba(255,255,255,0.85); + --shadow: 0 4px 20px rgba(0,0,0,0.08); + --shadow-lg: 0 8px 40px rgba(0,0,0,0.12); + --radius: 12px; + --radius-lg: 24px; + --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +*, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: 'Heebo', sans-serif; + font-size: 1rem; + font-weight: 400; + line-height: 1.7; + color: var(--text); + background: var(--cream); + overflow-x: hidden; +} + +/* Skip Link */ +.skip-link { + position: absolute; + top: -100%; + right: 1rem; + background: var(--dark); + color: var(--cream); + padding: 0.75rem 1.5rem; + border-radius: var(--radius); + z-index: 1000; + transition: top 0.2s; +} + +.skip-link:focus { + top: 1rem; +} + +h1, h2, h3 { + font-weight: 600; + line-height: 1.2; +} + +h1 { + font-size: clamp(2.25rem, 5vw, 3.75rem); +} + +h2 { + font-size: clamp(1.75rem, 4vw, 2.25rem); + margin-bottom: 1rem; +} + +h3 { + font-size: 1.125rem; + font-weight: 500; +} + +a { + color: inherit; + text-decoration: none; +} + +img, svg { + display: block; + max-width: 100%; +} + +.container { + width: 100%; + max-width: 1100px; + margin-inline: auto; + padding-inline: 1.5rem; +} + +/* Focus States */ +a:focus-visible, +button:focus-visible, +input:focus-visible, +textarea:focus-visible { + outline: 2px solid var(--gold); + outline-offset: 2px; +} + +/* Header */ +.site-header { + position: fixed; + top: 0; + inset-inline: 0; + z-index: 100; + background: rgba(250, 248, 245, 0.95); + backdrop-filter: blur(10px); + border-bottom: 1px solid rgba(201, 168, 108, 0.2); +} + +.nav-container { + display: flex; + align-items: center; + justify-content: space-between; + max-width: 1100px; + margin-inline: auto; + padding: 1rem 1.5rem; +} + +.logo { + display: flex; + align-items: center; + gap: 0.75rem; + font-weight: 600; + font-size: 1.1rem; +} + +.logo-icon { + width: 40px; + height: 40px; +} + +.nav-links { + display: flex; + align-items: center; + gap: 2rem; + list-style: none; +} + +.nav-links a { + font-size: 0.95rem; + font-weight: 500; + transition: color var(--transition); +} + +.nav-links a:hover, +.nav-links a:focus { + color: var(--gold); +} + +.nav-cta { + background: var(--gold); + color: var(--cream) !important; + padding: 0.6rem 1.2rem; + border-radius: 50px; +} + +.nav-cta:hover, +.nav-cta:focus { + background: var(--gold-dark) !important; +} + +.nav-toggle { + display: none; + flex-direction: column; + gap: 5px; + background: none; + border: none; + cursor: pointer; + padding: 5px; +} + +.nav-toggle span { + width: 24px; + height: 2px; + background: var(--dark); + transition: var(--transition); +} + +/* Buttons */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + padding: 0.9rem 1.8rem; + font-size: 1rem; + font-weight: 500; + font-family: inherit; + border-radius: 50px; + border: none; + cursor: pointer; + transition: var(--transition); +} + +.btn svg { + width: 20px; + height: 20px; + fill: currentColor; +} + +.btn-primary { + background: var(--gold); + color: var(--cream); +} + +.btn-primary:hover, +.btn-primary:focus { + background: var(--gold-dark); + transform: translateY(-2px); + box-shadow: var(--shadow); +} + +.btn-secondary { + background: transparent; + color: var(--dark); + border: 2px solid var(--dark); +} + +.btn-secondary:hover, +.btn-secondary:focus { + background: var(--dark); + color: var(--cream); +} + +.btn-lg { + padding: 1.1rem 2.2rem; + font-size: 1.05rem; +} + +.btn-full { + width: 100%; +} + +/* Hero */ +.hero { + position: relative; + min-height: 100vh; + min-height: 100dvh; + display: flex; + align-items: center; + padding: 7rem 1.5rem 4rem; + overflow: hidden; +} + +.hero-bg { + position: absolute; + inset: 0; + z-index: 0; + pointer-events: none; +} + +.hero-shape { + position: absolute; + border-radius: 50%; + opacity: 0.5; +} + +.hero-shape-1 { + width: 50vw; + height: 50vw; + max-width: 600px; + max-height: 600px; + background: linear-gradient(135deg, var(--gold-light), transparent); + top: -15%; + inset-inline-start: -15%; +} + +.hero-shape-2 { + width: 35vw; + height: 35vw; + max-width: 400px; + max-height: 400px; + background: linear-gradient(225deg, rgba(201, 168, 108, 0.1), transparent); + bottom: 10%; + inset-inline-end: -5%; +} + +.hero-scissors { + position: absolute; + top: 20%; + inset-inline-end: 10%; + width: 15vw; + max-width: 120px; + opacity: 0.25; + transform: rotate(-15deg); +} + +.hero-scissors svg { + width: 100%; + height: auto; +} + +.hero-content { + position: relative; + z-index: 1; + max-width: 600px; + margin-inline: auto 0; +} + +.hero-tagline { + font-size: 1rem; + color: var(--gold-dark); + font-weight: 500; + margin-bottom: 0.5rem; + letter-spacing: 0.02em; +} + +.hero h1 { + margin-bottom: 1.25rem; +} + +.hero h1 span { + color: var(--gold); +} + +.hero-desc { + font-size: 1.1rem; + color: var(--text-light); + margin-bottom: 2rem; + max-width: 50ch; +} + +.hero-actions { + display: flex; + flex-wrap: wrap; + gap: 1rem; +} + +/* About */ +.about { + padding: 5rem 0; + background: var(--cream-dark); +} + +.about-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 3rem; + align-items: start; +} + +.about-text h2 { + color: var(--dark); +} + +.about-text p { + color: var(--text-light); + margin-bottom: 1rem; + max-width: 55ch; +} + +.about-features { + display: flex; + flex-direction: column; + gap: 1.25rem; +} + +.feature { + display: flex; + align-items: flex-start; + gap: 1rem; + padding: 1.25rem; + background: var(--cream); + border-radius: var(--radius); + box-shadow: var(--shadow); +} + +.feature-icon { + flex-shrink: 0; +} + +.feature-icon svg { + width: 44px; + height: 44px; +} + +.feature h3 { + margin-bottom: 0.25rem; +} + +.feature p { + font-size: 0.9rem; + color: var(--text-light); +} + +/* Products */ +.products { + padding: 5rem 0; +} + +.section-header { + text-align: center; + margin-bottom: 2.5rem; +} + +.section-header p { + color: var(--text-light); + max-width: 45ch; + margin-inline: auto; +} + +.brands-showcase { + display: grid; + grid-template-columns: 1fr 2fr; + gap: 1.5rem; + margin-bottom: 3rem; +} + +.brand-featured { + padding: 2rem; + background: linear-gradient(135deg, var(--gold-light), var(--cream-dark)); + border-radius: var(--radius-lg); + text-align: center; + display: flex; + flex-direction: column; + justify-content: center; +} + +.brand-featured .brand-logo { + height: 50px; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 1rem; +} + +.brand-logo-text { + font-family: Georgia, 'Times New Roman', serif; + font-size: 1.5rem; + font-weight: 400; + font-style: italic; + letter-spacing: 0.1em; + color: var(--dark); +} + +.brand-featured h3 { + margin-bottom: 0.5rem; + font-size: 1.25rem; +} + +.brand-featured p { + font-size: 0.9rem; + color: var(--text-light); +} + +.brands-grid-small { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1rem; +} + +.brand-card { + padding: 1.5rem 1rem; + background: var(--cream-dark); + border-radius: var(--radius); + text-align: center; + transition: var(--transition); +} + +.brand-card:hover { + transform: translateY(-2px); + box-shadow: var(--shadow); +} + +.brand-name { + font-weight: 500; + font-size: 0.95rem; +} + +.products-categories { + background: var(--dark); + color: var(--cream); + padding: 2.5rem; + border-radius: var(--radius-lg); +} + +.products-categories h3 { + text-align: center; + margin-bottom: 1.5rem; + color: var(--gold); + font-size: 1.25rem; +} + +.category-list { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); + gap: 0.75rem; + list-style: none; +} + +.category-list li { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.875rem 1rem; + background: var(--dark-soft); + border-radius: var(--radius); + font-size: 0.9rem; +} + +.category-list li::before { + content: ''; + width: 6px; + height: 6px; + background: var(--gold); + border-radius: 50%; + flex-shrink: 0; +} + +/* Gallery */ +.gallery { + padding: 5rem 0; + background: var(--cream-dark); +} + +.gallery-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 220px; + gap: 1rem; +} + +.gallery-item { + position: relative; + border-radius: var(--radius); + overflow: hidden; +} + +.gallery-item-lg { + grid-column: span 2; +} + +.gallery-visual { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(135deg, hsl(var(--hue, 35), 30%, 85%), hsl(var(--hue, 35), 25%, 75%)); + transition: var(--transition); +} + +.gallery-visual svg { + width: 70%; + height: 70%; + max-width: 180px; +} + +.gallery-item:hover .gallery-visual, +.gallery-item:focus-within .gallery-visual { + transform: scale(1.03); +} + +.gallery-caption { + position: absolute; + bottom: 0; + inset-inline: 0; + padding: 1.25rem; + background: linear-gradient(to top, rgba(0,0,0,0.75), transparent); + color: var(--cream); +} + +.gallery-caption span { + font-weight: 500; + font-size: 0.95rem; +} + +/* Hours */ +.hours { + padding: 5rem 0; +} + +.hours-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 3rem; +} + +.hours-info h2, +.location-info h2 { + margin-bottom: 1.5rem; +} + +.hours-table { + background: var(--cream-dark); + border-radius: var(--radius); + overflow: hidden; +} + +.hours-row { + display: flex; + justify-content: space-between; + padding: 1.125rem 1.25rem; + border-bottom: 1px solid rgba(0,0,0,0.05); +} + +.hours-row:last-child { + border-bottom: none; +} + +.hours-row.closed { + background: rgba(201, 168, 108, 0.1); +} + +.hours-row .day { + font-weight: 500; +} + +.hours-row .time { + color: var(--text); +} + +.hours-note { + display: flex; + align-items: flex-start; + gap: 0.75rem; + margin-top: 1.25rem; + padding: 1rem; + background: var(--gold-light); + border-radius: var(--radius); +} + +.hours-note svg { + width: 22px; + height: 22px; + flex-shrink: 0; + margin-top: 2px; +} + +.hours-note p { + font-size: 0.9rem; + color: var(--text-light); +} + +.location-card { + display: flex; + gap: 1.25rem; + padding: 1.5rem; + background: var(--cream-dark); + border-radius: var(--radius); + margin-bottom: 1.5rem; +} + +.location-icon svg { + width: 44px; + height: 44px; +} + +.location-details h3 { + margin-bottom: 0.5rem; + color: var(--gold-dark); +} + +.location-details p { + font-size: 0.9rem; + color: var(--text-light); + margin-bottom: 0.5rem; +} + +.location-highlight { + font-weight: 500; + color: var(--dark) !important; +} + +/* Contact */ +.contact { + padding: 5rem 0; + background: var(--dark); + color: var(--cream); +} + +.contact-grid { + display: grid; + grid-template-columns: 1fr 1.2fr; + gap: 3rem; + align-items: start; +} + +.contact-info h2 { + color: var(--gold); +} + +.contact-info > p { + color: var(--text-muted); + margin-bottom: 1.5rem; + max-width: 40ch; +} + +.contact-methods { + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.contact-method { + display: flex; + align-items: center; + gap: 1rem; + padding: 1rem 1.25rem; + background: var(--dark-soft); + border-radius: var(--radius); + transition: var(--transition); +} + +.contact-method:hover, +.contact-method:focus { + background: rgba(201, 168, 108, 0.15); +} + +.contact-method svg { + width: 22px; + height: 22px; +} + +.contact-method span { + font-size: 1.05rem; + font-weight: 500; +} + +.contact-form { + background: var(--dark-soft); + padding: 2rem; + border-radius: var(--radius-lg); +} + +.form-group { + margin-bottom: 1.25rem; +} + +.form-group label { + display: block; + margin-bottom: 0.5rem; + font-weight: 500; + font-size: 0.9rem; +} + +.form-group input, +.form-group textarea { + width: 100%; + padding: 0.9rem 1rem; + font-family: inherit; + font-size: 1rem; + background: var(--dark); + border: 1px solid rgba(255,255,255,0.15); + border-radius: var(--radius); + color: var(--cream); + transition: var(--transition); +} + +.form-group input::placeholder, +.form-group textarea::placeholder { + color: rgba(255,255,255,0.4); +} + +.form-group input:focus, +.form-group textarea:focus { + outline: none; + border-color: var(--gold); + box-shadow: 0 0 0 3px rgba(201, 168, 108, 0.25); +} + +.form-group textarea { + resize: vertical; + min-height: 100px; +} + +.form-note { + margin-top: 1rem; + font-size: 0.85rem; + color: rgba(255,255,255,0.7); + text-align: center; +} + +/* Footer */ +.site-footer { + padding: 1.5rem 0; + background: var(--dark); + border-top: 1px solid rgba(255,255,255,0.1); +} + +.footer-content { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + gap: 1rem; +} + +.footer-brand { + display: flex; + align-items: center; + gap: 0.75rem; + color: var(--cream); + font-weight: 500; + font-size: 0.95rem; +} + +.footer-logo { + width: 30px; + height: 30px; +} + +.footer-copy { + color: rgba(255,255,255,0.7); + font-size: 0.85rem; +} + +/* Reveal animation */ +.reveal { + opacity: 0; + transform: translateY(20px); + transition: opacity 0.5s ease, transform 0.5s ease; +} + +.reveal.visible { + opacity: 1; + transform: translateY(0); +} + +/* Reduced motion */ +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } + + html { + scroll-behavior: auto; + } + + .reveal { + opacity: 1; + transform: none; + } +} + +/* Responsive */ +@media (max-width: 900px) { + .nav-toggle { + display: flex; + } + + .nav-links { + position: fixed; + top: 0; + inset-inline-end: -100%; + width: 80%; + max-width: 300px; + height: 100vh; + height: 100dvh; + flex-direction: column; + align-items: flex-start; + padding: 5rem 1.5rem 2rem; + background: var(--cream); + box-shadow: var(--shadow-lg); + transition: inset-inline-end var(--transition); + gap: 1.25rem; + } + + .nav-links.active { + inset-inline-end: 0; + } + + .nav-toggle.active span:nth-child(1) { + transform: rotate(45deg) translate(5px, 5px); + } + + .nav-toggle.active span:nth-child(2) { + opacity: 0; + } + + .nav-toggle.active span:nth-child(3) { + transform: rotate(-45deg) translate(5px, -5px); + } + + .hero-scissors { + display: none; + } + + .about-grid, + .hours-grid, + .contact-grid { + grid-template-columns: 1fr; + gap: 2.5rem; + } + + .brands-showcase { + grid-template-columns: 1fr; + } + + .brands-grid-small { + grid-template-columns: repeat(2, 1fr); + } + + .gallery-grid { + grid-template-columns: repeat(2, 1fr); + grid-auto-rows: 180px; + } + + .gallery-item-lg { + grid-column: span 2; + } +} + +@media (max-width: 600px) { + .hero { + padding-top: 5.5rem; + min-height: auto; + padding-bottom: 3rem; + } + + .hero-content { + margin-inline: 0; + } + + .hero-actions { + flex-direction: column; + } + + .btn { + width: 100%; + justify-content: center; + } + + .gallery-grid { + grid-template-columns: 1fr; + grid-auto-rows: 200px; + } + + .gallery-item-lg { + grid-column: span 1; + } + + .brands-grid-small { + grid-template-columns: repeat(2, 1fr); + } + + .category-list { + grid-template-columns: 1fr; + } + + .products-categories { + padding: 1.5rem; + } + + .contact-form { + padding: 1.5rem; + } + + .footer-content { + flex-direction: column; + text-align: center; + } + + .location-card { + flex-direction: column; + text-align: center; + } + + .location-icon { + margin-inline: auto; + } +}