diff --git a/index.html b/index.html new file mode 100644 index 0000000..3b0abb5 --- /dev/null +++ b/index.html @@ -0,0 +1,291 @@ + + + + + + + סטודיו לירון – עיצוב שיער לכלות בחולון + + + + + + + + + + + + + +
+ +
+ +
+
+ +
+ עיצוב שיער לכלות בחולון +

היום המושלם
מתחיל בשיער מושלם

+

עיצוב שיער ואיפור מקצועי לכלות, בגישה אישית ומסורה

+
+ קבעי תור לייעוץ + 072-325-7654 +
+
+ +
+ +
+
+
+ השירותים שלנו +

מגוון שירותים לכל אירוע

+
+
+
+
+ +
+

עיצוב שיער לכלות

+

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

+ החל מ-₪800 +
+
+
+ +
+

תספורות נשים

+

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

+ החל מ-₪120 +
+
+
+ +
+

צביעה והבהרה

+

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

+ החל מ-₪250 +
+
+
+ +
+

איפור מקצועי

+

איפור כלות ואירועים ברמה הגבוהה ביותר, עמיד לאורך כל היום

+ החל מ-₪450 +
+
+
+
+ +
+
+
+

״כל כלה ראויה להרגיש כמו מלכה ביום הגדול שלה״

+ — לירון, מעצבת שיער ראשית +
+
+
+ + + +
+
+
+
+
+ בואי נדבר +

קבעי תור לייעוץ חינם

+
+

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

+
+ + + 072-325-7654 + +
+ + רחוב סוקולוב 42, חולון +
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+
+
+ + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..d1873d6 --- /dev/null +++ b/script.js @@ -0,0 +1,123 @@ +(function() { + 'use strict'; + + // Check for reduced motion preference + const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + + // Reveal on scroll + function initReveal() { + const reveals = document.querySelectorAll('.reveal'); + + if (prefersReducedMotion) { + reveals.forEach(el => el.classList.add('revealed')); + return; + } + + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('revealed'); + observer.unobserve(entry.target); + } + }); + }, { + threshold: 0.1, + rootMargin: '0px 0px -50px 0px' + }); + + reveals.forEach(el => observer.observe(el)); + } + + // Smooth scroll for anchor links + function initSmoothScroll() { + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function(e) { + const targetId = this.getAttribute('href'); + if (targetId === '#') return; + + const target = document.querySelector(targetId); + if (target) { + e.preventDefault(); + const headerHeight = document.querySelector('.site-header').offsetHeight; + const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - headerHeight; + + window.scrollTo({ + top: targetPosition, + behavior: prefersReducedMotion ? 'auto' : 'smooth' + }); + } + }); + }); + } + + // Header background on scroll + function initHeaderScroll() { + const header = document.querySelector('.site-header'); + + window.addEventListener('scroll', () => { + const currentScroll = window.pageYOffset; + + if (currentScroll > 100) { + header.style.boxShadow = '0 2px 20px rgba(42, 37, 32, 0.08)'; + } else { + header.style.boxShadow = 'none'; + } + }, { passive: true }); + } + + // Form handling + function initForm() { + const form = document.getElementById('contactForm'); + if (!form) return; + + form.addEventListener('submit', function(e) { + e.preventDefault(); + + const formData = new FormData(form); + const data = Object.fromEntries(formData); + + // Visual feedback + const button = form.querySelector('.btn-submit'); + const originalText = button.textContent; + button.textContent = 'נשלח בהצלחה! ✓'; + button.style.background = '#4a9d5a'; + button.disabled = true; + + // Reset form + setTimeout(() => { + form.reset(); + button.textContent = originalText; + button.style.background = ''; + button.disabled = false; + }, 3000); + + // Log for demo purposes + console.log('Form submitted:', data); + }); + } + + // Gallery item keyboard interaction + function initGallery() { + const galleryItems = document.querySelectorAll('.gallery-item'); + + galleryItems.forEach(item => { + item.addEventListener('keydown', (e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + // Toggle expanded state for screen readers + const isExpanded = item.getAttribute('aria-expanded') === 'true'; + item.setAttribute('aria-expanded', !isExpanded); + } + }); + }); + } + + // Initialize all functions when DOM is ready + document.addEventListener('DOMContentLoaded', () => { + initReveal(); + initSmoothScroll(); + initHeaderScroll(); + initForm(); + initGallery(); + }); +})(); diff --git a/style.css b/style.css new file mode 100644 index 0000000..d0f45ed --- /dev/null +++ b/style.css @@ -0,0 +1,803 @@ +:root { + --color-cream: #faf8f5; + --color-cream-dark: #f5f0e8; + --color-gold: #9a7b4f; + --color-gold-light: #b8956a; + --color-gold-dark: #7d6340; + --color-charcoal: #2a2520; + --color-charcoal-light: #4a4540; + --color-taupe: #5a534c; + + --font-body: 'Heebo', sans-serif; + + --space-xs: 0.5rem; + --space-sm: 1rem; + --space-md: 1.5rem; + --space-lg: 2.5rem; + --space-xl: 4rem; + --space-2xl: 6rem; + --space-3xl: 10rem; + + --transition-fast: 0.2s ease; + --transition-med: 0.4s ease; + --transition-slow: 0.6s ease; +} + +*, +*::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(--color-charcoal); + background-color: var(--color-cream); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* Hebrew text must never exceed font-weight 600 */ +h1, h2, h3, h4, h5, h6 { + font-family: var(--font-body); + font-weight: 500; + line-height: 1.2; +} + +a { + color: inherit; + text-decoration: none; +} + +img { + max-width: 100%; + height: auto; + display: block; +} + +button { + font-family: inherit; + cursor: pointer; + border: none; + background: none; +} + +input, textarea { + font-family: inherit; + font-size: inherit; +} + +address { + font-style: normal; +} + +.container { + width: 100%; + max-width: 1200px; + margin-inline: auto; + padding-inline: var(--space-md); +} + +/* Skip Link */ +.skip-link { + position: absolute; + top: -100%; + inset-inline-start: var(--space-md); + padding: var(--space-sm) var(--space-md); + background: var(--color-gold); + color: white; + font-weight: 500; + z-index: 200; + border-radius: 0 0 4px 4px; +} + +.skip-link:focus { + top: 0; +} + +/* Navigation */ +.site-header { + position: fixed; + top: 0; + inset-inline: 0; + z-index: 100; + background: rgba(250, 248, 245, 0.95); + backdrop-filter: blur(10px); + border-block-end: 1px solid rgba(154, 123, 79, 0.1); +} + +.nav-container { + display: flex; + align-items: center; + justify-content: space-between; + max-width: 1200px; + margin-inline: auto; + padding: var(--space-sm) var(--space-md); +} + +.logo { + font-size: 1.5rem; + font-weight: 600; + color: var(--color-gold); + letter-spacing: 0.02em; +} + +.nav-links { + display: none; + list-style: none; + gap: var(--space-lg); +} + +@media (min-width: 768px) { + .nav-links { + display: flex; + } +} + +.nav-links a { + font-size: 0.9rem; + font-weight: 500; + color: var(--color-charcoal-light); + transition: color var(--transition-fast); + position: relative; +} + +.nav-links a::after { + content: ''; + position: absolute; + bottom: -4px; + inset-inline: 0; + height: 1px; + background: var(--color-gold); + transform: scaleX(0); + transition: transform var(--transition-fast); +} + +.nav-links a:hover, +.nav-links a:focus { + color: var(--color-gold); +} + +.nav-links a:hover::after, +.nav-links a:focus::after { + transform: scaleX(1); +} + +.nav-phone { + font-size: 0.9rem; + font-weight: 600; + color: var(--color-gold); +} + +/* Hero */ +.hero { + position: relative; + min-height: 100vh; + min-height: 100dvh; + display: flex; + align-items: center; + justify-content: center; + padding: var(--space-3xl) var(--space-md); + overflow: hidden; + background: linear-gradient(160deg, var(--color-cream) 0%, var(--color-cream-dark) 100%); +} + +.hero-bg { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + pointer-events: none; +} + +.hero-ornament { + width: min(80vw, 500px); + height: auto; + opacity: 0.5; +} + +@media (prefers-reduced-motion: no-preference) { + .hero-ornament { + animation: rotate 90s linear infinite; + } +} + +@keyframes rotate { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +.hero-content { + position: relative; + text-align: center; + max-width: 700px; +} + +.hero-tag { + display: inline-block; + font-size: 0.85rem; + font-weight: 500; + letter-spacing: 0.1em; + color: var(--color-gold); + margin-block-end: var(--space-md); +} + +.hero h1 { + font-size: clamp(2.5rem, 8vw, 4.5rem); + font-weight: 300; + color: var(--color-charcoal); + margin-block-end: var(--space-md); + letter-spacing: -0.02em; +} + +.hero-sub { + font-size: 1.125rem; + color: var(--color-taupe); + margin-block-end: var(--space-lg); + max-width: 480px; + margin-inline: auto; +} + +.hero-cta { + display: flex; + flex-wrap: wrap; + gap: var(--space-sm); + justify-content: center; +} + +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + padding: var(--space-sm) var(--space-lg); + font-size: 0.95rem; + font-weight: 500; + border-radius: 2px; + transition: all var(--transition-fast); + min-width: 160px; +} + +.btn:focus { + outline: 2px solid var(--color-gold); + outline-offset: 2px; +} + +.btn-primary { + background: var(--color-charcoal); + color: var(--color-cream); +} + +.btn-primary:hover { + background: var(--color-gold); + color: white; +} + +.btn-secondary { + background: transparent; + color: var(--color-charcoal); + border: 1px solid var(--color-charcoal); +} + +.btn-secondary:hover { + background: var(--color-charcoal); + color: var(--color-cream); +} + +.hero-scroll { + position: absolute; + bottom: var(--space-lg); + inset-inline: 0; + display: flex; + flex-direction: column; + align-items: center; + gap: var(--space-xs); + font-size: 0.75rem; + color: var(--color-taupe); +} + +@media (prefers-reduced-motion: no-preference) { + .hero-scroll { + animation: bounce 2s ease-in-out infinite; + } +} + +@keyframes bounce { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(8px); } +} + +/* Section Styling */ +.section-header { + text-align: center; + margin-block-end: var(--space-xl); +} + +.section-tag { + display: inline-block; + font-size: 0.8rem; + font-weight: 600; + letter-spacing: 0.15em; + color: var(--color-gold); + margin-block-end: var(--space-sm); +} + +.section-header h2 { + font-size: clamp(1.75rem, 5vw, 3rem); + font-weight: 300; + color: var(--color-charcoal); +} + +/* Services */ +.services { + padding: var(--space-3xl) 0; + background: var(--color-cream); +} + +.services-grid { + display: grid; + grid-template-columns: 1fr; + gap: var(--space-md); +} + +@media (min-width: 600px) { + .services-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (min-width: 900px) { + .services-grid { + grid-template-columns: 1.5fr 1fr 1fr; + grid-template-rows: auto auto; + gap: var(--space-lg); + } + + .service-card--featured { + grid-row: span 2; + } +} + +.service-card { + background: white; + padding: var(--space-lg); + border: 1px solid rgba(154, 123, 79, 0.15); + transition: all var(--transition-med); +} + +.service-card:hover, +.service-card:focus-within { + border-color: var(--color-gold); + transform: translateY(-4px); + box-shadow: 0 20px 40px rgba(42, 37, 32, 0.08); +} + +.service-card:focus-within { + outline: 2px solid var(--color-gold); + outline-offset: 2px; +} + +.service-card--featured { + background: linear-gradient(160deg, white 0%, var(--color-cream-dark) 100%); + border-color: var(--color-gold-light); +} + +@media (min-width: 900px) { + .service-card--featured { + display: flex; + flex-direction: column; + justify-content: center; + } +} + +.service-icon { + width: 64px; + height: 64px; + margin-block-end: var(--space-md); + color: var(--color-gold); +} + +.service-icon svg { + width: 100%; + height: 100%; +} + +.service-card h3 { + font-size: 1.25rem; + font-weight: 500; + margin-block-end: var(--space-sm); + color: var(--color-charcoal); +} + +.service-card p { + font-size: 0.9rem; + color: var(--color-taupe); + margin-block-end: var(--space-md); + line-height: 1.6; +} + +.service-price { + font-size: 1.1rem; + font-weight: 600; + color: var(--color-gold); +} + +/* Divider Quote */ +.divider { + padding: var(--space-2xl) 0; + background: linear-gradient(135deg, var(--color-charcoal) 0%, var(--color-charcoal-light) 100%); +} + +.quote { + text-align: center; + max-width: 650px; + margin-inline: auto; +} + +.quote p { + font-size: clamp(1.5rem, 4vw, 2.25rem); + font-weight: 300; + font-style: normal; + color: var(--color-cream); + margin-block-end: var(--space-md); + line-height: 1.5; +} + +.quote cite { + font-style: normal; + font-size: 0.9rem; + font-weight: 500; + letter-spacing: 0.1em; + color: var(--color-gold-light); +} + +/* Gallery */ +.gallery { + padding: var(--space-3xl) 0; + background: var(--color-cream-dark); +} + +.gallery-grid { + display: grid; + grid-template-columns: 1fr; + gap: var(--space-md); +} + +@media (min-width: 600px) { + .gallery-grid { + grid-template-columns: repeat(2, 1fr); + } + + .gallery-item--large { + grid-row: span 2; + } +} + +@media (min-width: 900px) { + .gallery-grid { + grid-template-columns: repeat(3, 1fr); + } + + .gallery-item--large { + grid-row: span 2; + } +} + +.gallery-item { + position: relative; + overflow: hidden; + cursor: pointer; +} + +.gallery-item:focus { + outline: 3px solid var(--color-gold); + outline-offset: 2px; +} + +.gallery-visual { + aspect-ratio: 4/5; + background: var(--gradient); + display: flex; + align-items: center; + justify-content: center; + transition: transform var(--transition-med); +} + +.gallery-item--large .gallery-visual { + aspect-ratio: 4/5; +} + +@media (min-width: 600px) { + .gallery-item--large .gallery-visual { + aspect-ratio: auto; + height: 100%; + } +} + +.gallery-item:hover .gallery-visual, +.gallery-item:focus .gallery-visual { + transform: scale(1.03); +} + +.gallery-icon { + width: 80px; + height: 80px; + color: rgba(42, 37, 32, 0.4); + transition: all var(--transition-med); +} + +.gallery-item:hover .gallery-icon, +.gallery-item:focus .gallery-icon { + color: rgba(42, 37, 32, 0.6); + transform: scale(1.1); +} + +.gallery-item figcaption { + position: absolute; + bottom: 0; + inset-inline: 0; + padding: var(--space-md); + background: linear-gradient(to top, rgba(42, 37, 32, 0.9), transparent); + color: var(--color-cream); + font-size: 0.9rem; + font-weight: 500; + transform: translateY(100%); + transition: transform var(--transition-med); +} + +.gallery-item:hover figcaption, +.gallery-item:focus figcaption { + transform: translateY(0); +} + +/* Contact */ +.contact { + padding: var(--space-3xl) 0; + background: var(--color-cream); +} + +.contact-grid { + display: grid; + grid-template-columns: 1fr; + gap: var(--space-xl); +} + +@media (min-width: 900px) { + .contact-grid { + grid-template-columns: 1fr 1.2fr; + align-items: start; + } +} + +.contact-info .section-header { + text-align: start; +} + +.contact-desc { + font-size: 1rem; + color: var(--color-taupe); + margin-block-end: var(--space-lg); + line-height: 1.8; + max-width: 45ch; +} + +.contact-details { + display: flex; + flex-direction: column; + gap: var(--space-md); +} + +.contact-item { + display: flex; + align-items: center; + gap: var(--space-sm); + font-size: 1.1rem; + color: var(--color-charcoal); +} + +.contact-item svg { + width: 24px; + height: 24px; + color: var(--color-gold); + flex-shrink: 0; +} + +.contact-phone { + font-weight: 600; + transition: color var(--transition-fast); +} + +.contact-phone:hover, +.contact-phone:focus { + color: var(--color-gold); +} + +/* Form */ +.contact-form { + background: white; + padding: var(--space-lg); + border: 1px solid rgba(154, 123, 79, 0.15); + display: grid; + grid-template-columns: 1fr; + gap: var(--space-md); +} + +@media (min-width: 500px) { + .contact-form { + grid-template-columns: repeat(2, 1fr); + padding: var(--space-xl); + } + + .form-group--full { + grid-column: span 2; + } + + .btn-submit { + grid-column: span 2; + justify-self: center; + } +} + +.form-group { + display: flex; + flex-direction: column; + gap: var(--space-xs); +} + +.form-group label { + font-size: 0.85rem; + font-weight: 500; + color: var(--color-charcoal); +} + +.form-group input, +.form-group textarea { + padding: var(--space-sm); + border: 1px solid rgba(154, 123, 79, 0.3); + background: var(--color-cream); + border-radius: 2px; + transition: border-color var(--transition-fast), box-shadow var(--transition-fast); +} + +.form-group input:focus, +.form-group textarea:focus { + outline: none; + border-color: var(--color-gold); + box-shadow: 0 0 0 3px rgba(154, 123, 79, 0.15); +} + +.form-group textarea { + resize: vertical; + min-height: 100px; +} + +.form-group textarea::placeholder { + color: var(--color-taupe); + opacity: 0.7; +} + +/* Footer */ +.site-footer { + background: var(--color-charcoal); + color: var(--color-cream); + padding: var(--space-xl) 0 var(--space-md); +} + +.footer-content { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--space-lg); + padding-block-end: var(--space-lg); + border-block-end: 1px solid rgba(250, 248, 245, 0.1); +} + +@media (min-width: 768px) { + .footer-content { + flex-direction: row; + justify-content: space-between; + } +} + +.footer-brand { + text-align: center; +} + +@media (min-width: 768px) { + .footer-brand { + text-align: start; + } +} + +.footer-logo { + font-size: 1.75rem; + font-weight: 500; + color: var(--color-gold-light); + display: block; + margin-block-end: var(--space-xs); +} + +.footer-brand p { + font-size: 0.9rem; + color: rgba(250, 248, 245, 0.75); +} + +.footer-nav { + display: flex; + gap: var(--space-lg); +} + +.footer-nav a { + font-size: 0.9rem; + color: rgba(250, 248, 245, 0.85); + transition: color var(--transition-fast); +} + +.footer-nav a:hover, +.footer-nav a:focus { + color: var(--color-gold-light); +} + +.footer-phone { + font-size: 1.25rem; + font-weight: 600; + color: var(--color-gold-light); +} + +.footer-bottom { + padding-block-start: var(--space-md); + text-align: center; +} + +.footer-bottom p { + font-size: 0.85rem; + color: rgba(250, 248, 245, 0.7); +} + +/* Reveal Animation */ +.reveal { + opacity: 0; + transform: translateY(30px); + transition: opacity var(--transition-slow), transform var(--transition-slow); +} + +.reveal.revealed { + opacity: 1; + transform: translateY(0); +} + +/* Stagger children */ +.services-grid .reveal:nth-child(1) { transition-delay: 0.1s; } +.services-grid .reveal:nth-child(2) { transition-delay: 0.2s; } +.services-grid .reveal:nth-child(3) { transition-delay: 0.3s; } +.services-grid .reveal:nth-child(4) { transition-delay: 0.4s; } + +.gallery-grid .reveal:nth-child(1) { transition-delay: 0.05s; } +.gallery-grid .reveal:nth-child(2) { transition-delay: 0.1s; } +.gallery-grid .reveal:nth-child(3) { transition-delay: 0.15s; } +.gallery-grid .reveal:nth-child(4) { transition-delay: 0.2s; } +.gallery-grid .reveal:nth-child(5) { transition-delay: 0.25s; } +.gallery-grid .reveal:nth-child(6) { transition-delay: 0.3s; }