diff --git a/index.html b/index.html index 61dcbc6..771a6b9 100644 --- a/index.html +++ b/index.html @@ -41,8 +41,8 @@
-
-
+ +

מספרה מעצבת בחולון

@@ -77,54 +77,45 @@
-
- +
+ תספורת גברים מודרנית +
+
+

תספורות טרנדיות

+

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

+ גברים ונשים
-

תספורות טרנדיות

-

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

- גברים ונשים
-
- +
+ צביעת שיער מקצועית +
+
+

צביעות מקצועיות

+

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

+ כל סוגי הצבע
-

צביעות מקצועיות

-

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

- כל סוגי הצבע
הכי מבוקש
-
- +
+ החלקת שיער מושלמת +
+
+

החלקות שיער

+

החלקה ברזילאית, יפנית וקראטין. תוצאות חלקות ומבריקות שנשמרות לאורך זמן.

+ תוצאות לטווח ארוך
-

החלקות שיער

-

החלקה ברזילאית, יפנית וקראטין. תוצאות חלקות ומבריקות שנשמרות לאורך זמן.

- תוצאות לטווח ארוך
-
- +
+ הבהרות שיער טבעיות +
+
+

הבהרות

+

הבהרות מקצועיות, היילייטס ובייביליס. יוצרים עומק וממד טבעי בשיער שלכם.

+ מראה טבעי
-

הבהרות

-

הבהרות מקצועיות, היילייטס ובייביליס. יוצרים עומק וממד טבעי בשיער שלכם.

- מראה טבעי
@@ -138,40 +129,28 @@
-
-
- תספורת גברים -
+ תספורת גברים מעוצבת +
תספורת גברים
-
-
- צביעה אומברה -
+ צביעת אומברה מרהיבה +
צביעה אומברה
-
-
- החלקה ברזילאית -
+ שיער חלק ומבריק +
החלקה ברזילאית
-
-
- בלאיאז׳ -
+ בלאיאז׳ מקצועי +
בלאיאז׳
-
-
- תספורת נשים -
+ תספורת נשים אלגנטית +
תספורת נשים
-
-
- הבהרות -
+ הבהרות טבעיות +
הבהרות
@@ -181,15 +160,8 @@
-
-
- -
+
+ סלון עיצוב שיער מודרני
10+ @@ -229,14 +201,19 @@
-

מוכנים לשינוי?

-

התקשרו עכשיו ונקבע לכם תור

- - - 054-541-1291 - +
+ מוצרי טיפוח שיער +
+
+

מוכנים לשינוי?

+

התקשרו עכשיו ונקבע לכם תור

+ + + 054-541-1291 + +
@@ -312,6 +289,70 @@
+ + + \ No newline at end of file diff --git a/script.js b/script.js index a874b1f..657c2cf 100644 --- a/script.js +++ b/script.js @@ -104,4 +104,82 @@ }); }); + // Sale Popup + const popup = document.getElementById('salePopup'); + const popupClose = document.getElementById('popupClose'); + const popupButtons = popup ? popup.querySelectorAll('.popup-option-btn, .popup-link') : []; + + // Check if popup was already shown in this session + const popupShown = sessionStorage.getItem('popupShown'); + + function showPopup() { + if (popup && !popupShown) { + popup.classList.add('active'); + document.body.style.overflow = 'hidden'; + sessionStorage.setItem('popupShown', 'true'); + + // Focus trap + const focusableElements = popup.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'); + const firstFocusable = focusableElements[0]; + const lastFocusable = focusableElements[focusableElements.length - 1]; + + firstFocusable.focus(); + + popup.addEventListener('keydown', function(e) { + if (e.key === 'Tab') { + if (e.shiftKey) { + if (document.activeElement === firstFocusable) { + e.preventDefault(); + lastFocusable.focus(); + } + } else { + if (document.activeElement === lastFocusable) { + e.preventDefault(); + firstFocusable.focus(); + } + } + } + }); + } + } + + function hidePopup() { + if (popup) { + popup.classList.remove('active'); + document.body.style.overflow = ''; + } + } + + // Show popup after 5 seconds + if (!popupShown) { + setTimeout(showPopup, 5000); + } + + // Close popup events + if (popupClose) { + popupClose.addEventListener('click', hidePopup); + } + + if (popup) { + popup.addEventListener('click', function(e) { + if (e.target === popup) { + hidePopup(); + } + }); + + document.addEventListener('keydown', function(e) { + if (e.key === 'Escape' && popup.classList.contains('active')) { + hidePopup(); + } + }); + } + + // Button click handlers (just close popup for demo) + popupButtons.forEach(function(btn) { + btn.addEventListener('click', function() { + // In a real implementation, these would link to actual actions + hidePopup(); + }); + }); + })(); \ No newline at end of file diff --git a/style.css b/style.css index 705e753..a949af8 100644 --- a/style.css +++ b/style.css @@ -258,22 +258,22 @@ h1, h2, h3, h4 { z-index: 0; } -.hero-pattern { +.hero-image { position: absolute; inset: 0; - background-image: - radial-gradient(circle at 20% 50%, rgba(212, 175, 55, 0.1) 0%, transparent 50%), - radial-gradient(circle at 80% 20%, rgba(212, 175, 55, 0.08) 0%, transparent 40%), - radial-gradient(circle at 40% 80%, rgba(212, 175, 55, 0.06) 0%, transparent 30%); + width: 100%; + height: 100%; + object-fit: cover; + object-position: center 20%; } -.hero-gradient { +.hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, - rgba(10,10,10,0.3) 0%, - rgba(10,10,10,0.6) 50%, - rgba(10,10,10,1) 100% + rgba(10,10,10,0.5) 0%, + rgba(10,10,10,0.7) 50%, + rgba(10,10,10,0.95) 100% ); } @@ -447,7 +447,6 @@ html[dir="ltr"] .hero-scroll { .service-card { position: relative; - padding: var(--space-lg); background: var(--black-light); border: 1px solid var(--black-lighter); border-radius: var(--radius-lg); @@ -464,6 +463,7 @@ html[dir="ltr"] .hero-scroll { background: linear-gradient(to left, var(--gold), transparent); opacity: 0; transition: var(--transition); + z-index: 2; } .service-card:hover { @@ -494,18 +494,28 @@ html[dir="ltr"] .hero-scroll { font-size: 0.75rem; font-weight: 500; border-radius: var(--radius-sm); + z-index: 3; } -.service-icon { - width: 56px; - height: 56px; - margin-block-end: var(--space-md); - color: var(--gold); +.service-image { + position: relative; + height: 180px; + overflow: hidden; } -.service-icon svg { +.service-image img { width: 100%; height: 100%; + object-fit: cover; + transition: var(--transition-slow); +} + +.service-card:hover .service-image img { + transform: scale(1.05); +} + +.service-content { + padding: var(--space-md); } .service-title { @@ -551,6 +561,19 @@ html[dir="ltr"] .hero-scroll { overflow: hidden; } +.gallery-item img { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + object-fit: cover; + transition: var(--transition-slow); +} + +.gallery-item:hover img { + transform: scale(1.08); +} + .gallery-item-tall { grid-row: span 2; } @@ -559,63 +582,6 @@ html[dir="ltr"] .hero-scroll { grid-column: span 2; } -.gallery-visual { - position: absolute; - inset: 0; - background: linear-gradient( - 135deg, - hsl(calc(var(--hue, 45)), 50%, 15%), - hsl(calc(var(--hue, 45) + 10), 40%, 8%) - ); - transition: var(--transition); -} - -.gallery-pattern { - position: absolute; - inset: 0; - opacity: 0.3; -} - -.gallery-pattern-1 { - background: repeating-linear-gradient( - 45deg, - transparent, - transparent 10px, - rgba(212, 175, 55, 0.1) 10px, - rgba(212, 175, 55, 0.1) 20px - ); -} - -.gallery-pattern-2 { - background: radial-gradient(circle at 30% 70%, rgba(212, 175, 55, 0.2) 0%, transparent 50%); -} - -.gallery-pattern-3 { - background: repeating-linear-gradient( - 90deg, - transparent, - transparent 20px, - rgba(212, 175, 55, 0.08) 20px, - rgba(212, 175, 55, 0.08) 40px - ); -} - -.gallery-pattern-4 { - background: - linear-gradient(135deg, rgba(212, 175, 55, 0.15) 25%, transparent 25%), - linear-gradient(225deg, rgba(212, 175, 55, 0.15) 25%, transparent 25%); - background-size: 40px 40px; -} - -.gallery-pattern-5 { - background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 1px, transparent 1px); - background-size: 20px 20px; -} - -.gallery-pattern-6 { - background: conic-gradient(from 45deg at 50% 50%, rgba(212, 175, 55, 0.1) 0%, transparent 25%, rgba(212, 175, 55, 0.1) 50%, transparent 75%, rgba(212, 175, 55, 0.1) 100%); -} - .gallery-label { position: absolute; inset-block-end: var(--space-md); @@ -631,11 +597,6 @@ html[dir="ltr"] .hero-scroll { transition: var(--transition); } -.gallery-item:hover .gallery-visual, -.gallery-item:focus-within .gallery-visual { - transform: scale(1.05); -} - .gallery-item:hover .gallery-label, .gallery-item:focus-within .gallery-label { transform: translateY(0); @@ -657,37 +618,27 @@ html[dir="ltr"] .hero-scroll { .about-visual { position: relative; - aspect-ratio: 1; - max-width: 380px; + max-width: 420px; } -.about-shape-container { - position: absolute; - inset: 8%; - background: linear-gradient(135deg, var(--black-lighter), var(--black)); - border: 1px solid var(--gold-dark); +.about-image-container { + position: relative; border-radius: var(--radius-xl); - display: flex; - align-items: center; - justify-content: center; + overflow: hidden; + aspect-ratio: 4/5; + border: 1px solid var(--gold-dark); } -.about-icon-scissors { - width: 60%; - height: 60%; - color: var(--gold); - opacity: 0.4; -} - -.about-icon-scissors svg { +.about-image-container img { width: 100%; height: 100%; + object-fit: cover; } .about-badge { position: absolute; - inset-block-end: 0; - inset-inline-start: 0; + inset-block-end: -20px; + inset-inline-start: -20px; padding: var(--space-md); background: var(--gold); color: var(--black); @@ -750,7 +701,10 @@ html[dir="ltr"] .hero-scroll { } .cta-content { - text-align: center; + display: grid; + grid-template-columns: auto 1fr; + gap: var(--space-xl); + align-items: center; padding: var(--space-xl); background: linear-gradient(135deg, var(--black-lighter), var(--black-light)); border: 1px solid var(--gold-dark); @@ -770,17 +724,33 @@ html[dir="ltr"] .hero-scroll { pointer-events: none; } -.cta-title { - font-size: clamp(2rem, 5vw, 3rem); - margin-block-end: var(--space-sm); +.cta-image { + width: 180px; + height: 180px; + border-radius: var(--radius-lg); + overflow: hidden; + flex-shrink: 0; +} + +.cta-image img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.cta-text { position: relative; } +.cta-title { + font-size: clamp(1.75rem, 4vw, 2.5rem); + margin-block-end: var(--space-sm); +} + .cta-desc { color: var(--white-dim); font-size: 1.125rem; margin-block-end: var(--space-lg); - position: relative; } /* Contact - Redesigned */ @@ -983,6 +953,264 @@ html[dir="ltr"] .hero-scroll { transform: translateY(0); } +/* Popup Styles */ +.popup-overlay { + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.85); + backdrop-filter: blur(8px); + z-index: 10000; + display: flex; + align-items: center; + justify-content: center; + padding: var(--space-md); + opacity: 0; + visibility: hidden; + transition: var(--transition); +} + +.popup-overlay.active { + opacity: 1; + visibility: visible; +} + +.popup-container { + position: relative; + width: 100%; + max-width: 520px; + background: linear-gradient(180deg, var(--black-lighter), var(--black)); + border: 1px solid var(--gold-dark); + border-radius: var(--radius-xl); + padding: var(--space-xl); + transform: scale(0.9) translateY(20px); + transition: var(--transition); +} + +.popup-overlay.active .popup-container { + transform: scale(1) translateY(0); +} + +.popup-close { + position: absolute; + inset-block-start: var(--space-md); + inset-inline-end: var(--space-md); + width: 36px; + height: 36px; + background: var(--black-lighter); + border: 1px solid var(--black-lighter); + border-radius: 50%; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + color: var(--white-dim); + transition: var(--transition); +} + +.popup-close:hover, +.popup-close:focus { + background: var(--gold); + color: var(--black); + border-color: var(--gold); +} + +.popup-close svg { + width: 18px; + height: 18px; +} + +.popup-header { + text-align: center; + margin-block-end: var(--space-lg); +} + +.popup-icon { + width: 56px; + height: 56px; + margin-inline: auto; + margin-block-end: var(--space-md); + background: linear-gradient(135deg, var(--gold), var(--gold-dark)); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + color: var(--black); +} + +.popup-icon svg { + width: 28px; + height: 28px; +} + +.popup-title { + font-size: 1.5rem; + color: var(--white); + margin-block-end: var(--space-xs); +} + +.popup-subtitle { + color: var(--white-dim); + font-size: 1rem; +} + +.popup-options { + display: flex; + flex-direction: column; + gap: var(--space-sm); + margin-block-end: var(--space-lg); +} + +.popup-option { + position: relative; + display: grid; + grid-template-columns: auto 1fr auto; + gap: var(--space-md); + align-items: center; + padding: var(--space-md); + background: var(--black); + border: 1px solid var(--black-lighter); + border-radius: var(--radius-lg); + transition: var(--transition); +} + +.popup-option:hover { + border-color: var(--gold-dark); +} + +.popup-option-featured { + border-color: var(--gold-dark); + background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), transparent); +} + +.popup-option-badge { + position: absolute; + inset-block-start: -8px; + inset-inline-start: var(--space-md); + padding: 2px 10px; + background: var(--gold); + color: var(--black); + font-size: 0.6875rem; + font-weight: 600; + border-radius: var(--radius-sm); +} + +.popup-option-icon { + width: 40px; + height: 40px; + color: var(--gold); +} + +.popup-option-icon svg { + width: 100%; + height: 100%; +} + +.popup-option-content { + min-width: 0; +} + +.popup-option-title { + font-size: 1rem; + font-weight: 500; + color: var(--white); + margin-block-end: 2px; +} + +.popup-option-desc { + font-size: 0.8125rem; + color: var(--gray); + line-height: 1.4; +} + +.popup-option-btn { + padding: var(--space-xs) var(--space-md); + font-family: var(--font-body); + font-size: 0.875rem; + font-weight: 500; + border-radius: var(--radius-sm); + cursor: pointer; + transition: var(--transition); + white-space: nowrap; +} + +.popup-option-btn-secondary { + background: transparent; + color: var(--white); + border: 1px solid var(--white-dim); +} + +.popup-option-btn-secondary:hover, +.popup-option-btn-secondary:focus { + border-color: var(--gold); + color: var(--gold); +} + +.popup-option-btn-primary { + background: var(--gold); + color: var(--black); + border: none; +} + +.popup-option-btn-primary:hover, +.popup-option-btn-primary:focus { + background: var(--gold-light); +} + +.popup-warning { + display: flex; + gap: var(--space-sm); + align-items: flex-start; + padding: var(--space-md); + background: rgba(212, 175, 55, 0.1); + border: 1px solid rgba(212, 175, 55, 0.3); + border-radius: var(--radius-md); + margin-block-end: var(--space-md); +} + +.popup-warning svg { + width: 20px; + height: 20px; + color: var(--gold); + flex-shrink: 0; + margin-block-start: 2px; +} + +.popup-warning p { + font-size: 0.8125rem; + color: var(--white-dim); + line-height: 1.5; +} + +.popup-warning strong { + color: var(--gold); + font-weight: 600; +} + +.popup-extra { + text-align: center; +} + +.popup-extra p { + font-size: 0.8125rem; + color: var(--gray); +} + +.popup-link { + background: none; + border: none; + color: var(--gold); + font-family: var(--font-body); + font-size: 0.8125rem; + cursor: pointer; + text-decoration: underline; + transition: var(--transition); +} + +.popup-link:hover, +.popup-link:focus { + color: var(--gold-light); +} + /* Mobile Navigation */ @media (max-width: 900px) { .nav-links { @@ -1038,7 +1266,7 @@ html[dir="ltr"] .hero-scroll { .about-visual { margin-inline: auto; - max-width: 280px; + max-width: 320px; } .contact-grid { @@ -1055,6 +1283,29 @@ html[dir="ltr"] .hero-scroll { justify-content: center; gap: var(--space-md); } + + .cta-content { + grid-template-columns: 1fr; + text-align: center; + } + + .cta-image { + margin-inline: auto; + } + + .popup-option { + grid-template-columns: 1fr; + text-align: center; + gap: var(--space-sm); + } + + .popup-option-icon { + margin-inline: auto; + } + + .popup-option-btn { + width: 100%; + } } @media (max-width: 680px) { @@ -1097,6 +1348,14 @@ html[dir="ltr"] .hero-scroll { .gallery-item-wide { grid-column: span 1; } + + .popup-container { + padding: var(--space-md); + } + + .popup-title { + font-size: 1.25rem; + } } /* Focus States */