diff --git a/index.html b/index.html new file mode 100644 index 0000000..3d98e91 --- /dev/null +++ b/index.html @@ -0,0 +1,396 @@ + + + + + + + ציוד למספרות | אביזרים ותכשירים מקצועיים בפתח תקווה + + + + + + + + + + + +
+ +
+ +
+
+
+

מאז 2012 בפתח תקווה

+

+ הציוד המקצועי + למספרה שלך +

+

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

+
+ לקטלוג המוצרים + + + 03-987-6543 + +
+
+ +
+ +
+
+
+
+ +
+

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

+

רק מוצרים מקוריים ממותגים מובילים כמו Wella, Schwarzkopf ו-L'Oréal. אחריות מלאה על כל פריט.

+
+
+
+ +
+

משלוח מהיר

+

הזמנות נשלחות תוך 24 שעות. איסוף עצמי מהחנות ללא עלות.

+
+
+
+ +
+

ייעוץ מקצועי

+

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

+
+
+
+ +
+
+

קטלוג מוצרים

+

מגוון רחב של ציוד מקצועי למספרות

+
+ +
+ + + + + +
+ +
+
+
+ +
+
+ כלי עבודה +

מכונת תספורת מקצועית

+

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

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

מספריים יפניים

+

מספריים מקצועיים מפלדה יפנית איכותית

+ לפרטים ומחיר צרו קשר +
+
+ +
+
+ +
+
+ צבעי שיער +

צבע שיער מקצועי

+

מגוון גוונים רחב עם כיסוי שיער שיבה מושלם

+ לפרטים ומחיר צרו קשר +
+
+ +
+
+ +
+
+ טיפוח +

שמפו מקצועי

+

שמפו לשימוש יומיומי במספרות, כמויות גדולות

+ לפרטים ומחיר צרו קשר +
+
+ +
+
+ +
+
+ טיפוח +

מסכת שיער

+

מסכה מזינה לשיקום שיער פגום ויבש

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

פן מקצועי

+

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

+ לפרטים ומחיר צרו קשר +
+
+ +
+
+ +
+
+ צבעי שיער +

ערכת אוקסי

+

מי חמצן באחוזים שונים לצביעה מקצועית

+ לפרטים ומחיר צרו קשר +
+
+ +
+
+ +
+
+ ריהוט +

כיסא מספרה

+

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

+ לפרטים ומחיר צרו קשר +
+
+
+ +
+

מחפשים מוצר ספציפי? יש לנו הרבה יותר במלאי!

+ דברו איתנו +
+
+ +
+
+

למה לבחור בנו?

+
+

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

+

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

+
+
    +
  • + 10+ + שנות ניסיון +
    • +
  • + 500+ + מוצרים במלאי +
    • +
  • + 1000+ + לקוחות מרוצים +
    • +
+
+ +
+ +
+
+

צרו קשר

+

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

+ +
+ + + פתח תקווה (הכתובת המדויקת בתיאום טלפוני) + + + + 03-987-6543 + +
+ + א׳-ה׳ 9:00-19:00 | ו׳ 9:00-14:00 +
+
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+ + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..52a56c9 --- /dev/null +++ b/script.js @@ -0,0 +1,152 @@ +(function() { + 'use strict'; + + // Mobile Navigation Toggle + const navToggle = document.querySelector('.nav-toggle'); + const navMenu = document.querySelector('.nav-menu'); + + if (navToggle && navMenu) { + navToggle.addEventListener('click', function() { + const isExpanded = navToggle.getAttribute('aria-expanded') === 'true'; + navToggle.setAttribute('aria-expanded', !isExpanded); + navMenu.classList.toggle('active'); + }); + + // Close menu when clicking a link + navMenu.querySelectorAll('a').forEach(function(link) { + link.addEventListener('click', function() { + navMenu.classList.remove('active'); + navToggle.setAttribute('aria-expanded', 'false'); + }); + }); + + // Close menu on escape key + document.addEventListener('keydown', function(e) { + if (e.key === 'Escape' && navMenu.classList.contains('active')) { + navMenu.classList.remove('active'); + navToggle.setAttribute('aria-expanded', 'false'); + navToggle.focus(); + } + }); + } + + // Catalog Filtering + const filterButtons = document.querySelectorAll('.filter-btn'); + const productCards = document.querySelectorAll('.product-card'); + + filterButtons.forEach(function(button) { + button.addEventListener('click', function() { + const filter = this.dataset.filter; + + // Update active button + filterButtons.forEach(function(btn) { + btn.classList.remove('active'); + btn.setAttribute('aria-pressed', 'false'); + }); + this.classList.add('active'); + this.setAttribute('aria-pressed', 'true'); + + // Filter products + productCards.forEach(function(card) { + if (filter === 'all' || card.dataset.category === filter) { + card.classList.remove('hidden'); + } else { + card.classList.add('hidden'); + } + }); + }); + }); + + // Form Handling + const contactForm = document.getElementById('contactForm'); + + if (contactForm) { + contactForm.addEventListener('submit', function(e) { + e.preventDefault(); + + const formData = new FormData(contactForm); + const data = {}; + formData.forEach(function(value, key) { + data[key] = value; + }); + + // Simulate form submission + const submitBtn = contactForm.querySelector('.btn-submit'); + const originalText = submitBtn.textContent; + submitBtn.textContent = 'שולח...'; + submitBtn.disabled = true; + submitBtn.style.opacity = '0.7'; + + setTimeout(function() { + submitBtn.textContent = 'נשלח בהצלחה!'; + submitBtn.style.background = '#38a169'; + submitBtn.style.opacity = '1'; + + setTimeout(function() { + contactForm.reset(); + submitBtn.textContent = originalText; + submitBtn.style.background = ''; + submitBtn.disabled = false; + }, 2500); + }, 1200); + }); + } + + // Scroll Reveal Animation + const revealElements = document.querySelectorAll('.reveal'); + const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)'); + + if (prefersReducedMotion.matches) { + // Immediately show all elements if user prefers reduced motion + revealElements.forEach(function(el) { + el.classList.add('visible'); + }); + } else if ('IntersectionObserver' in window) { + const revealObserver = new IntersectionObserver(function(entries) { + entries.forEach(function(entry) { + if (entry.isIntersecting) { + entry.target.classList.add('visible'); + revealObserver.unobserve(entry.target); + } + }); + }, { + threshold: 0.1, + rootMargin: '0px 0px -40px 0px' + }); + + revealElements.forEach(function(el) { + revealObserver.observe(el); + }); + } else { + // Fallback for browsers without IntersectionObserver + revealElements.forEach(function(el) { + el.classList.add('visible'); + }); + } + + // Smooth scroll offset for fixed header + 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 headerOffset = 80; + const elementPosition = target.getBoundingClientRect().top; + const offsetPosition = elementPosition + window.pageYOffset - headerOffset; + + if (prefersReducedMotion.matches) { + window.scrollTo(0, offsetPosition); + } else { + window.scrollTo({ + top: offsetPosition, + behavior: 'smooth' + }); + } + } + }); + }); + +})(); diff --git a/style.css b/style.css new file mode 100644 index 0000000..0adebf0 --- /dev/null +++ b/style.css @@ -0,0 +1,1014 @@ +:root { + --bg: #0a0a0f; + --bg-elevated: #111118; + --bg-card: #18181f; + --text: #f5f5f7; + --text-muted: #a0a0a8; + --accent: #c9a962; + --accent-light: #e0c78a; + --accent-dark: #a08540; + --radius: 12px; + --radius-lg: 20px; + --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); + --shadow: 0 4px 24px rgba(0, 0, 0, 0.4); + --font-display: 'Secular One', sans-serif; + --font-body: 'Heebo', sans-serif; +} + +*, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; +} + +@media (prefers-reduced-motion: reduce) { + html { + scroll-behavior: auto; + } + *, *::before, *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} + +body { + font-family: var(--font-body); + font-weight: 400; + font-size: 1rem; + line-height: 1.7; + color: var(--text); + background: var(--bg); + overflow-x: hidden; +} + +h1, h2, h3, h4 { + font-family: var(--font-display); + font-weight: 400; + line-height: 1.2; +} + +a { + color: inherit; + text-decoration: none; +} + +img, svg { + display: block; + max-width: 100%; +} + +button, input, textarea { + font: inherit; + color: inherit; +} + +/* ===== HEADER ===== */ +.site-header { + position: fixed; + top: 0; + inset-inline: 0; + z-index: 100; + padding-block: 1rem; + background: rgba(10, 10, 15, 0.9); + backdrop-filter: blur(20px); + border-bottom: 1px solid rgba(255, 255, 255, 0.05); +} + +.nav-container { + display: flex; + align-items: center; + justify-content: space-between; + max-width: 1200px; + margin: 0 auto; + padding-inline: 1.5rem; +} + +.logo { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.logo-icon { + width: 40px; + height: 40px; + color: var(--text); +} + +.logo-text { + font-family: var(--font-display); + font-size: 1.25rem; + font-weight: 400; +} + +.nav-toggle { + display: none; + flex-direction: column; + gap: 5px; + padding: 0.5rem; + background: transparent; + border: none; + cursor: pointer; + border-radius: var(--radius); + transition: background var(--transition); +} + +.nav-toggle:focus { + outline: 2px solid var(--accent); + outline-offset: 2px; +} + +.nav-toggle:focus:not(:focus-visible) { + outline: none; +} + +.nav-toggle:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; + background: rgba(201, 169, 98, 0.1); +} + +.nav-toggle span { + display: block; + width: 24px; + height: 2px; + background: var(--text); + transition: var(--transition); +} + +.nav-menu { + display: flex; + align-items: center; + gap: 2rem; + list-style: none; +} + +.nav-menu a { + font-weight: 500; + transition: color var(--transition); +} + +.nav-menu a:hover, +.nav-menu a:focus { + color: var(--accent); +} + +.btn-nav { + padding: 0.5rem 1.25rem; + background: var(--accent); + color: var(--bg) !important; + border-radius: var(--radius); + font-weight: 600; + transition: background var(--transition); +} + +.btn-nav:hover { + background: var(--accent-light); +} + +@media (max-width: 768px) { + .nav-toggle { + display: flex; + } + + .nav-menu { + position: absolute; + top: 100%; + inset-inline: 0; + flex-direction: column; + gap: 0; + padding: 1rem; + background: var(--bg-elevated); + border-bottom: 1px solid rgba(255, 255, 255, 0.05); + transform: translateY(-10px); + opacity: 0; + visibility: hidden; + transition: var(--transition); + } + + .nav-menu.active { + transform: translateY(0); + opacity: 1; + visibility: visible; + } + + .nav-menu li { + width: 100%; + } + + .nav-menu a { + display: block; + padding: 1rem; + text-align: center; + } + + .btn-nav { + margin-top: 0.5rem; + } +} + +/* ===== BUTTONS ===== */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + padding: 1rem 2rem; + font-weight: 600; + border: none; + border-radius: var(--radius); + cursor: pointer; + transition: transform var(--transition), box-shadow var(--transition), background var(--transition); +} + +.btn:hover { + transform: translateY(-2px); +} + +.btn:focus { + outline: 2px solid var(--accent); + outline-offset: 2px; +} + +.btn:active { + transform: translateY(0); +} + +.btn-icon { + width: 18px; + height: 18px; +} + +.btn-primary { + background: var(--accent); + color: var(--bg); + box-shadow: 0 4px 20px rgba(201, 169, 98, 0.25); +} + +.btn-primary:hover { + background: var(--accent-light); + box-shadow: 0 6px 30px rgba(201, 169, 98, 0.35); +} + +.btn-secondary { + background: rgba(255, 255, 255, 0.05); + color: var(--text); + border: 1px solid rgba(255, 255, 255, 0.15); +} + +.btn-secondary:hover { + background: rgba(255, 255, 255, 0.1); + border-color: var(--accent); + color: var(--accent); +} + +/* ===== HERO ===== */ +.hero { + display: grid; + grid-template-columns: 1fr 1fr; + align-items: center; + min-height: 100vh; + padding-block: 8rem 4rem; + padding-inline: 1.5rem; + max-width: 1400px; + margin: 0 auto; + gap: 4rem; +} + +.hero-content { + max-width: 560px; +} + +.hero-eyebrow { + display: inline-block; + padding: 0.5rem 1rem; + margin-bottom: 1.5rem; + font-size: 0.875rem; + font-weight: 500; + color: var(--accent); + background: rgba(201, 169, 98, 0.1); + border: 1px solid rgba(201, 169, 98, 0.2); + border-radius: 100px; +} + +.hero-title { + font-size: clamp(2.5rem, 6vw, 4rem); + margin-bottom: 1.5rem; +} + +.hero-line { + display: block; +} + +.hero-accent { + color: var(--accent); +} + +.hero-subtitle { + font-size: 1.125rem; + color: var(--text-muted); + margin-bottom: 2.5rem; + max-width: 440px; + line-height: 1.8; +} + +.hero-actions { + display: flex; + flex-wrap: wrap; + gap: 1rem; +} + +.hero-visual { + position: relative; + min-height: 500px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 2rem; +} + +.hero-pattern { + position: absolute; + inset: 0; + background-image: + radial-gradient(circle at 25% 25%, rgba(201, 169, 98, 0.08) 0%, transparent 50%), + radial-gradient(circle at 75% 75%, rgba(201, 169, 98, 0.05) 0%, transparent 50%); +} + +.hero-tools { + position: relative; + z-index: 1; + display: flex; + align-items: flex-end; + gap: 2rem; +} + +.hero-tool-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.75rem; +} + +.hero-tool-label { + font-size: 0.75rem; + color: var(--text-muted); + text-align: center; + white-space: nowrap; +} + +.hero-scissors { + width: 140px; + height: 140px; +} + +.hero-comb { + width: 70px; + height: 105px; + opacity: 0.8; +} + +.hero-clipper { + width: 70px; + height: 88px; +} + +.hero-brands { + position: relative; + z-index: 1; + display: flex; + gap: 2rem; + padding-block: 1rem; + padding-inline: 1.5rem; + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.06); + border-radius: var(--radius); +} + +.hero-brands span { + font-size: 0.8125rem; + font-weight: 500; + color: var(--text-muted); + letter-spacing: 0.02em; +} + +@media (max-width: 900px) { + .hero { + grid-template-columns: 1fr; + text-align: center; + padding-block-start: 7rem; + } + + .hero-content { + max-width: 100%; + } + + .hero-subtitle { + max-width: 100%; + } + + .hero-actions { + justify-content: center; + } + + .hero-visual { + min-height: 280px; + } + + .hero-tools { + gap: 1.25rem; + } + + .hero-scissors { + width: 100px; + height: 100px; + } + + .hero-comb { + width: 50px; + height: 75px; + } + + .hero-clipper { + width: 50px; + height: 62px; + } + + .hero-tool-label { + font-size: 0.6875rem; + } + + .hero-brands { + gap: 1.25rem; + padding-inline: 1rem; + } + + .hero-brands span { + font-size: 0.75rem; + } +} + +/* ===== FEATURES ===== */ +.features { + padding-block: 6rem; + padding-inline: 1.5rem; + background: var(--bg-elevated); +} + +.features-grid { + display: grid; + grid-template-columns: 1.2fr 1fr 1fr; + gap: 1.5rem; + max-width: 1200px; + margin: 0 auto; +} + +.feature-card { + padding: 2rem; + background: var(--bg-card); + border-radius: var(--radius-lg); + border: 1px solid rgba(255, 255, 255, 0.05); + transition: transform var(--transition), border-color var(--transition); +} + +.feature-card:hover { + transform: translateY(-4px); + border-color: rgba(201, 169, 98, 0.2); +} + +.feature-card-main { + grid-row: span 1; +} + +.feature-icon { + width: 52px; + height: 52px; + margin-bottom: 1.25rem; + padding: 0.875rem; + background: var(--accent); + border-radius: var(--radius); +} + +.feature-icon svg { + width: 100%; + height: 100%; + color: var(--bg); +} + +.feature-card h3 { + font-size: 1.125rem; + margin-bottom: 0.5rem; +} + +.feature-card p { + color: var(--text-muted); + font-size: 0.95rem; + line-height: 1.6; +} + +@media (max-width: 900px) { + .features-grid { + grid-template-columns: 1fr; + max-width: 450px; + } + + .feature-card-main { + grid-row: auto; + } +} + +/* ===== CATALOG ===== */ +.catalog { + padding-block: 6rem; + padding-inline: 1.5rem; + max-width: 1400px; + margin: 0 auto; +} + +.section-header { + text-align: center; + margin-bottom: 3rem; +} + +.section-header h2 { + font-size: clamp(2rem, 4vw, 2.75rem); + margin-bottom: 0.5rem; +} + +.section-header p { + color: var(--text-muted); + font-size: 1.0625rem; +} + +.catalog-filters { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 0.75rem; + margin-bottom: 3rem; +} + +.filter-btn { + padding: 0.75rem 1.5rem; + background: var(--bg-card); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: var(--radius); + cursor: pointer; + transition: var(--transition); + font-weight: 500; + color: var(--text-muted); +} + +.filter-btn:hover { + background: rgba(201, 169, 98, 0.1); + color: var(--accent); + border-color: rgba(201, 169, 98, 0.3); +} + +.filter-btn.active { + background: var(--accent); + color: var(--bg); + border-color: var(--accent); +} + +.filter-btn:focus { + outline: 2px solid var(--accent); + outline-offset: 2px; +} + +.catalog-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 1.5rem; +} + +@media (max-width: 1100px) { + .catalog-grid { + grid-template-columns: repeat(3, 1fr); + } +} + +@media (max-width: 800px) { + .catalog-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 500px) { + .catalog-grid { + grid-template-columns: 1fr; + max-width: 320px; + margin-inline: auto; + } +} + +.product-card { + background: var(--bg-card); + border-radius: var(--radius-lg); + overflow: hidden; + border: 1px solid rgba(255, 255, 255, 0.05); + transition: transform var(--transition), border-color var(--transition); +} + +.product-card:hover { + transform: translateY(-4px); + border-color: rgba(201, 169, 98, 0.25); +} + +.product-card.hidden { + display: none; +} + +.product-image { + height: 180px; + background: var(--gradient); + display: flex; + align-items: center; + justify-content: center; + padding: 2rem; +} + +.product-image svg { + width: 72px; + height: 72px; + transition: transform var(--transition); +} + +.product-card:hover .product-image svg { + transform: scale(1.08); +} + +.product-info { + padding: 1.25rem; +} + +.product-category { + display: inline-block; + font-size: 0.7rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--accent); + margin-bottom: 0.375rem; +} + +.product-info h3 { + font-size: 1rem; + margin-bottom: 0.375rem; +} + +.product-info p { + color: var(--text-muted); + font-size: 0.875rem; + line-height: 1.5; + margin-bottom: 0.75rem; +} + +.product-cta { + display: block; + font-size: 0.8rem; + font-weight: 500; + color: var(--accent); +} + +.catalog-cta { + text-align: center; + margin-top: 4rem; + padding: 3rem; + background: var(--bg-elevated); + border-radius: var(--radius-lg); + border: 1px solid rgba(255, 255, 255, 0.05); +} + +.catalog-cta p { + font-size: 1.125rem; + margin-bottom: 1.5rem; +} + +/* ===== ABOUT ===== */ +.about { + display: grid; + grid-template-columns: 1fr 0.8fr; + gap: 4rem; + padding-block: 6rem; + padding-inline: 1.5rem; + max-width: 1100px; + margin: 0 auto; + align-items: center; +} + +.about-content h2 { + font-size: clamp(2rem, 4vw, 2.75rem); + margin-bottom: 1.5rem; +} + +.about-text { + margin-bottom: 2.5rem; + max-width: 520px; +} + +.about-text p { + color: var(--text-muted); + margin-bottom: 1rem; + line-height: 1.8; +} + +.about-stats { + display: flex; + gap: 2rem; + list-style: none; +} + +.about-stats li { + text-align: center; +} + +.stat-number { + display: block; + font-family: var(--font-display); + font-size: 2.25rem; + color: var(--accent); +} + +.stat-label { + font-size: 0.875rem; + color: var(--text-muted); +} + +.about-visual { + position: relative; + height: 320px; + display: flex; + align-items: center; + justify-content: center; +} + +.about-shape { + position: absolute; + width: 280px; + height: 280px; + background: radial-gradient(circle, rgba(201, 169, 98, 0.15) 0%, transparent 70%); + border-radius: 50%; +} + +.about-badge { + position: relative; + z-index: 1; + width: 160px; + height: 160px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background: var(--bg-card); + border: 2px solid var(--accent); + border-radius: 50%; +} + +.about-badge-number { + font-family: var(--font-display); + font-size: 3rem; + color: var(--accent); + line-height: 1; +} + +.about-badge-text { + font-size: 0.875rem; + color: var(--text-muted); + margin-top: 0.25rem; +} + +@media (max-width: 900px) { + .about { + grid-template-columns: 1fr; + text-align: center; + } + + .about-text { + max-width: 100%; + } + + .about-stats { + justify-content: center; + gap: 1.5rem; + } + + .about-visual { + height: 200px; + order: -1; + } + + .about-badge { + width: 120px; + height: 120px; + } + + .about-badge-number { + font-size: 2.25rem; + } + + .about-badge-text { + font-size: 0.75rem; + } +} + +/* ===== CONTACT ===== */ +.contact { + display: grid; + grid-template-columns: 1fr 1.3fr; + gap: 3rem; + padding-block: 4rem; + padding-inline: 3rem; + max-width: 1100px; + margin-inline: auto; + margin-block-end: 4rem; + background: var(--bg-elevated); + border-radius: var(--radius-lg); + border: 1px solid rgba(255, 255, 255, 0.05); +} + +.contact-info h2 { + font-size: clamp(1.75rem, 4vw, 2.25rem); + margin-bottom: 1rem; +} + +.contact-info > p { + color: var(--text-muted); + margin-bottom: 2rem; + line-height: 1.7; +} + +.contact-details { + font-style: normal; + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.contact-item { + display: flex; + align-items: center; + gap: 0.875rem; + padding-block: 0.5rem; + transition: color var(--transition); +} + +a.contact-item:hover, +a.contact-item:focus { + color: var(--accent); +} + +.contact-item svg { + width: 22px; + height: 22px; + flex-shrink: 0; + color: var(--accent); +} + +.contact-form { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1.25rem; +} + +.form-group { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.form-group-full { + grid-column: 1 / -1; +} + +.form-group label { + font-weight: 500; + font-size: 0.875rem; +} + +.form-group input, +.form-group textarea { + padding: 0.875rem 1rem; + background: var(--bg); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: var(--radius); + transition: border-color var(--transition), box-shadow var(--transition); +} + +.form-group input:focus, +.form-group textarea:focus { + outline: none; + border-color: var(--accent); + box-shadow: 0 0 0 3px rgba(201, 169, 98, 0.15); +} + +.form-group textarea { + resize: vertical; + min-height: 100px; +} + +.btn-submit { + grid-column: 1 / -1; + justify-self: stretch; +} + +@media (max-width: 900px) { + .contact { + grid-template-columns: 1fr; + padding-block: 2.5rem; + padding-inline: 1.5rem; + margin-inline: 1.5rem; + } + + .contact-form { + grid-template-columns: 1fr; + } +} + +/* ===== FOOTER ===== */ +.site-footer { + padding-block: 3rem 1.5rem; + padding-inline: 1.5rem; + background: var(--bg-elevated); + border-top: 1px solid rgba(255, 255, 255, 0.05); +} + +.footer-content { + display: flex; + justify-content: space-between; + align-items: center; + max-width: 1100px; + margin: 0 auto 2rem; +} + +.footer-logo { + font-family: var(--font-display); + font-size: 1.25rem; +} + +.footer-brand p { + color: var(--text-muted); + font-size: 0.875rem; + margin-top: 0.25rem; +} + +.footer-nav { + display: flex; + gap: 2rem; +} + +.footer-nav a { + color: var(--text-muted); + transition: color var(--transition); + font-size: 0.9375rem; +} + +.footer-nav a:hover, +.footer-nav a:focus { + color: var(--accent); +} + +.footer-bottom { + text-align: center; + padding-top: 1.5rem; + border-top: 1px solid rgba(255, 255, 255, 0.05); + max-width: 1100px; + margin: 0 auto; +} + +.footer-bottom p { + color: var(--text-muted); + font-size: 0.8125rem; +} + +@media (max-width: 600px) { + .footer-content { + flex-direction: column; + text-align: center; + gap: 1.5rem; + } + + .footer-nav { + flex-wrap: wrap; + justify-content: center; + gap: 1rem 1.5rem; + } +} + +/* ===== REVEAL ANIMATIONS ===== */ +.reveal { + opacity: 0; + transform: translateY(24px); + transition: opacity 0.5s ease, transform 0.5s ease; +} + +.reveal.visible { + opacity: 1; + transform: translateY(0); +}