diff --git a/index.html b/index.html index 64583ab..76bd2a7 100644 --- a/index.html +++ b/index.html @@ -50,6 +50,8 @@
+ +
@@ -147,55 +137,28 @@
-
- - אומברה זהוב -
+ אומברה זהוב - צביעת גוונים + אומברה זהוב
-
- - תספורת קצרה -
+ תספורת קצרה מודרנית + תספורת קצרה
-
- - בלונד פלטינום -
+ בלונד פלטינום + בלונד פלטינום
-
- - איסוף לכלה -
+ תסרוקת כלה מרהיבה + איסוף לכלה
-
- - גוונים חמים -
+ גוונים חמים ועשירים + גוונים חמים
-
- - היילייטס עדינים -
+ היילייטס עדינים ומקצועיים + היילייטס עדינים
@@ -205,22 +168,9 @@
-
- -
+
+ אורלי חן - מעצבת שיער מקצועית +
אורלי חן מעצבת שיער
@@ -240,23 +190,37 @@
+
+
+
+ מוצרים +

מוצרי טיפוח יוקרתיים

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

בסלון שלנו נעשה שימוש במוצרים המובילים בעולם לטיפוח והגנה על השיער שלך

+
+
+
+
+
-
@@ -284,24 +248,8 @@

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

-
- - - - - - - - - - - - - רמת גן - תל אביב - גבעתיים - בני ברק - +
+ לקוחה מרוצה בסלון
@@ -324,6 +272,55 @@ + + + \ No newline at end of file diff --git a/script.js b/script.js index f29d704..c382f46 100644 --- a/script.js +++ b/script.js @@ -140,4 +140,96 @@ }); }); + // Demo Popup functionality + var popup = document.getElementById('demoPopup'); + var popupCloseBtn = popup ? popup.querySelector('.popup-close') : null; + var popupBackdrop = popup ? popup.querySelector('.popup-backdrop') : null; + var POPUP_DELAY = 5000; // 5 seconds + var POPUP_STORAGE_KEY = 'demoPopupShown'; + + function showPopup() { + if (!popup) return; + popup.classList.add('active'); + document.body.classList.add('popup-open'); + // Focus the close button for accessibility + if (popupCloseBtn) { + popupCloseBtn.focus(); + } + } + + function hidePopup() { + if (!popup) return; + popup.classList.remove('active'); + document.body.classList.remove('popup-open'); + // Mark as shown in session storage + try { + sessionStorage.setItem(POPUP_STORAGE_KEY, 'true'); + } catch (e) { + // Session storage not available + } + } + + function initPopup() { + if (!popup) return; + + // Check if popup was already shown this session + try { + if (sessionStorage.getItem(POPUP_STORAGE_KEY) === 'true') { + return; + } + } catch (e) { + // Session storage not available, continue + } + + // Show popup after delay (only if motion is not reduced) + if (!prefersReducedMotion) { + setTimeout(showPopup, POPUP_DELAY); + } else { + showPopup(); + } + } + + // Close popup on close button click + if (popupCloseBtn) { + popupCloseBtn.addEventListener('click', hidePopup); + } + + // Close popup on backdrop click + if (popupBackdrop) { + popupBackdrop.addEventListener('click', hidePopup); + } + + // Close popup on Escape key + document.addEventListener('keydown', function(e) { + if (e.key === 'Escape' && popup && popup.classList.contains('active')) { + hidePopup(); + } + }); + + // Trap focus inside popup when open + if (popup) { + popup.addEventListener('keydown', function(e) { + if (e.key !== 'Tab') return; + + var focusableElements = popup.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'); + var firstElement = focusableElements[0]; + var lastElement = focusableElements[focusableElements.length - 1]; + + if (e.shiftKey) { + if (document.activeElement === firstElement) { + lastElement.focus(); + e.preventDefault(); + } + } else { + if (document.activeElement === lastElement) { + firstElement.focus(); + e.preventDefault(); + } + } + }); + } + + // Initialize popup + initPopup(); + })(); \ No newline at end of file diff --git a/style.css b/style.css index d290d94..0b66025 100644 --- a/style.css +++ b/style.css @@ -252,18 +252,39 @@ button { z-index: 0; } +.hero-image { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + object-fit: cover; + object-position: center 20%; +} + +.hero-overlay { + position: absolute; + inset: 0; + background: linear-gradient( + 135deg, + rgba(10, 10, 10, 0.85) 0%, + rgba(10, 10, 10, 0.7) 50%, + rgba(10, 10, 10, 0.85) 100% + ); +} + .hero-gradient { position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 20%, var(--gold-faint) 0%, transparent 50%), - radial-gradient(ellipse at 30% 80%, rgba(212, 175, 55, 0.05) 0%, transparent 50%), - var(--black); + radial-gradient(ellipse at 30% 80%, rgba(212, 175, 55, 0.05) 0%, transparent 50%); + z-index: 1; } .hero-lines { position: absolute; inset: 0; + z-index: 1; } .hero-lines svg { @@ -273,7 +294,7 @@ button { .hero-content { position: relative; - z-index: 1; + z-index: 2; text-align: center; padding: var(--space-xl) var(--space-md); } @@ -316,6 +337,7 @@ button { .btn { display: inline-flex; align-items: center; + justify-content: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); font-size: 1rem; @@ -341,6 +363,28 @@ button { transform: translateY(-2px); } +.btn-secondary { + color: var(--white); + background: var(--gray-dark); +} + +.btn-secondary:hover, +.btn-secondary:focus { + background: #444; +} + +.btn-outline { + color: var(--gold); + background: transparent; + border: 1px solid var(--gold); +} + +.btn-outline:hover, +.btn-outline:focus { + background: var(--gold); + color: var(--black); +} + .btn-large { padding: var(--space-sm) var(--space-lg); font-size: 1.125rem; @@ -358,6 +402,7 @@ button { font-size: 0.75rem; color: var(--gray); animation: float 2s ease-in-out infinite; + z-index: 2; } .hero-scroll svg { @@ -394,10 +439,10 @@ button { .service-card { position: relative; - padding: var(--space-lg) var(--space-md); background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 100%); border: 1px solid rgba(255,255,255,0.05); border-radius: 4px; + overflow: hidden; transition: all var(--transition); } @@ -409,6 +454,8 @@ button { background: linear-gradient(135deg, var(--gold-faint) 0%, transparent 50%); opacity: 0; transition: opacity var(--transition); + z-index: 1; + pointer-events: none; } .service-card:hover::before, @@ -422,28 +469,41 @@ button { border-color: var(--gold); } -.service-icon { - margin-block-end: var(--space-md); +.service-image { + position: relative; + height: 180px; + overflow: hidden; } -.service-icon svg { - width: 80px; - height: 80px; +.service-image img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform var(--transition); +} + +.service-card:hover .service-image img { + transform: scale(1.05); +} + +.service-content { + padding: var(--space-md); + position: relative; + z-index: 2; } .service-title { font-family: var(--font-body); - font-size: 1.5rem; + font-size: 1.25rem; font-weight: 600; margin-block-end: var(--space-sm); color: var(--gold); } .service-desc { - font-size: 0.9375rem; + font-size: 0.875rem; color: var(--gray); line-height: 1.8; - max-width: 45ch; } /* Gallery */ @@ -465,6 +525,18 @@ button { overflow: hidden; } +.gallery-item img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform var(--transition); +} + +.gallery-item:hover img, +.gallery-item:focus-within img { + transform: scale(1.05); +} + .gallery-item-large { grid-column: span 2; grid-row: span 2; @@ -474,55 +546,10 @@ button { grid-row: span 2; } -.gallery-visual { - position: relative; - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: flex-start; - padding: var(--space-sm); - transition: transform var(--transition); -} - -.gallery-visual-1 { - background: linear-gradient(135deg, var(--gold) 0%, var(--black) 100%); -} - -.gallery-visual-2 { - background: linear-gradient(180deg, #1a1a1a 0%, var(--gold-dark) 100%); -} - -.gallery-visual-3 { - background: linear-gradient(225deg, var(--white) 0%, var(--gray) 100%); -} - -.gallery-visual-4 { - background: linear-gradient(45deg, var(--black) 0%, #2a2a2a 50%, var(--gold) 100%); -} - -.gallery-visual-5 { - background: linear-gradient(180deg, var(--gold) 0%, var(--gold-dark) 50%, var(--black) 100%); -} - -.gallery-visual-6 { - background: radial-gradient(circle at 30% 30%, var(--gold) 0%, var(--black) 70%); -} - -.gallery-item:hover .gallery-visual, -.gallery-item:focus-within .gallery-visual { - transform: scale(1.05); -} - -.gallery-pattern { - position: absolute; - inset: 0; - width: 100%; - height: 100%; -} - .gallery-label { - position: relative; + position: absolute; + bottom: var(--space-sm); + inset-inline-start: var(--space-sm); z-index: 1; font-size: 0.875rem; font-weight: 500; @@ -555,28 +582,31 @@ button { justify-content: center; } -.about-frame { +.about-image-wrapper { position: relative; + border-radius: 8px; + overflow: hidden; + border: 2px solid var(--gold); } -.about-frame svg { +.about-image-wrapper img { width: 100%; - max-width: 300px; + max-width: 350px; height: auto; + aspect-ratio: 3/4; + object-fit: cover; } -.about-frame-text { +.about-frame-overlay { position: absolute; - bottom: 60px; - inset-inline-start: 50%; - transform: translateX(50%); + bottom: 0; + inset-inline-start: 0; + inset-inline-end: 0; + background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); + padding: var(--space-lg) var(--space-md) var(--space-md); text-align: center; } -[dir="ltr"] .about-frame-text { - transform: translateX(-50%); -} - .about-frame-name { display: block; font-family: var(--font-body); @@ -621,6 +651,40 @@ button { letter-spacing: 0.02em; } +/* Products Section */ +.products-section { + padding: var(--space-lg) 0; +} + +.products-showcase { + position: relative; + border-radius: 8px; + overflow: hidden; +} + +.products-showcase img { + width: 100%; + height: 300px; + object-fit: cover; +} + +.products-text { + position: absolute; + bottom: 0; + inset-inline-start: 0; + inset-inline-end: 0; + background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); + padding: var(--space-lg) var(--space-md) var(--space-md); +} + +.products-text p { + font-size: 1.125rem; + color: var(--white); + text-align: center; + max-width: 600px; + margin-inline: auto; +} + /* CTA Section */ .cta-section { padding: var(--space-lg) 0; @@ -630,20 +694,26 @@ button { position: relative; text-align: center; padding: var(--space-xl); - background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, transparent 50%); border: 1px solid var(--gold); border-radius: 8px; overflow: hidden; } -.cta-decor { +.cta-bg-image { position: absolute; - top: 50%; - inset-inline-end: -50px; - transform: translateY(-50%); - width: 200px; - height: 200px; - opacity: 0.5; + inset: 0; +} + +.cta-bg-image img { + width: 100%; + height: 100%; + object-fit: cover; + opacity: 0.3; +} + +.cta-content { + position: relative; + z-index: 1; } .cta-title { @@ -713,15 +783,17 @@ a.contact-item:focus .contact-icon { max-width: 50ch; } -.map-placeholder { +.contact-image-wrapper { border-radius: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); } -.map-placeholder svg { +.contact-image-wrapper img { width: 100%; height: auto; + aspect-ratio: 4/3; + object-fit: cover; } /* Footer */ @@ -758,6 +830,213 @@ a.contact-item:focus .contact-icon { color: var(--gray); } +/* Demo Popup */ +.demo-popup { + position: fixed; + inset: 0; + z-index: 9999; + display: flex; + align-items: center; + justify-content: center; + padding: var(--space-md); + opacity: 0; + visibility: hidden; + transition: opacity 0.4s ease, visibility 0.4s ease; +} + +.demo-popup.active { + opacity: 1; + visibility: visible; +} + +.popup-backdrop { + position: absolute; + inset: 0; + background: rgba(0, 0, 0, 0.85); + backdrop-filter: blur(8px); +} + +.popup-container { + position: relative; + width: 100%; + max-width: 560px; + max-height: 90vh; + overflow-y: auto; + background: linear-gradient(145deg, #1a1a1a, #0d0d0d); + border: 1px solid var(--gold); + border-radius: 12px; + transform: translateY(30px) scale(0.95); + transition: transform 0.4s ease; +} + +.demo-popup.active .popup-container { + transform: translateY(0) scale(1); +} + +.popup-close { + position: absolute; + top: var(--space-sm); + inset-inline-end: var(--space-sm); + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + color: var(--gray); + transition: color var(--transition-fast); + z-index: 10; +} + +.popup-close:hover, +.popup-close:focus { + color: var(--white); +} + +.popup-close svg { + width: 24px; + height: 24px; +} + +.popup-content { + padding: var(--space-lg); + text-align: center; +} + +.popup-icon { + margin-block-end: var(--space-md); +} + +.popup-icon svg { + width: 60px; + height: 60px; + margin-inline: auto; +} + +.popup-title { + font-size: 1.75rem; + font-weight: 600; + color: var(--white); + margin-block-end: var(--space-xs); +} + +.popup-subtitle { + font-size: 1.125rem; + color: var(--gold); + margin-block-end: var(--space-md); +} + +.popup-options { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-sm); + margin-block-end: var(--space-md); +} + +.popup-option { + position: relative; + padding: var(--space-md); + background: rgba(255,255,255,0.03); + border: 1px solid rgba(255,255,255,0.1); + border-radius: 8px; + text-align: center; + transition: all var(--transition); +} + +.popup-option:hover { + border-color: var(--gold); + background: rgba(212, 175, 55, 0.05); +} + +.popup-option-featured { + border-color: var(--gold); + background: rgba(212, 175, 55, 0.08); +} + +.option-badge { + display: inline-block; + font-size: 0.625rem; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.1em; + color: var(--gray); + background: rgba(255,255,255,0.1); + padding: 0.25rem 0.75rem; + border-radius: 20px; + margin-block-end: var(--space-sm); +} + +.option-badge-gold { + color: var(--black); + background: var(--gold); +} + +.option-title { + font-size: 1.125rem; + font-weight: 600; + color: var(--white); + margin-block-end: var(--space-xs); +} + +.option-desc { + font-size: 0.8125rem; + color: var(--gray); + line-height: 1.6; + margin-block-end: var(--space-sm); +} + +.popup-option .btn { + width: 100%; + padding: 0.625rem var(--space-sm); + font-size: 0.875rem; +} + +.popup-warning { + display: flex; + align-items: flex-start; + gap: var(--space-sm); + padding: var(--space-sm); + background: rgba(212, 175, 55, 0.1); + border: 1px solid rgba(212, 175, 55, 0.3); + border-radius: 6px; + margin-block-end: var(--space-md); + text-align: start; +} + +.warning-icon { + width: 20px; + height: 20px; + flex-shrink: 0; + color: var(--gold); + margin-top: 2px; +} + +.popup-warning p { + font-size: 0.8125rem; + color: var(--gray); + line-height: 1.6; +} + +.popup-warning strong { + color: var(--gold); + font-weight: 600; +} + +.popup-extras { + padding-block-start: var(--space-md); + border-top: 1px solid rgba(255,255,255,0.1); +} + +.popup-extras p { + font-size: 0.875rem; + color: var(--gray); + margin-block-end: var(--space-sm); +} + +.popup-extras .btn { + padding: 0.5rem var(--space-md); + font-size: 0.8125rem; +} + /* Reveal Animation */ .reveal { opacity: 0; @@ -839,6 +1118,18 @@ a.contact-item:focus .contact-icon { .hero-scroll { transform: translateX(50%); } + + .popup-options { + grid-template-columns: 1fr; + } + + .popup-content { + padding: var(--space-md); + } + + .popup-title { + font-size: 1.5rem; + } } @media (max-width: 480px) { @@ -867,6 +1158,10 @@ a.contact-item:focus .contact-icon { padding: var(--space-sm) var(--space-md); font-size: 1rem; } + + .service-image { + height: 150px; + } } /* Focus States */ @@ -890,4 +1185,9 @@ button:focus-visible { .skip-link:focus { top: 0; +} + +/* Body scroll lock when popup is open */ +body.popup-open { + overflow: hidden; } \ No newline at end of file