AI update: בצע שני שיפורים בדף הדמו של מספרת קובי שריקי: 1) הוסף פופ-אפ מכירה שנפתח אוטומטית כ-5 שניות אחרי כניסת המבקר לדף, ונגיש
This commit is contained in:
@@ -103,6 +103,12 @@ ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Focus styles */
|
||||
:focus-visible {
|
||||
outline: 3px solid var(--gold);
|
||||
@@ -362,33 +368,57 @@ ul {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 35%;
|
||||
max-width: 400px;
|
||||
max-width: 450px;
|
||||
}
|
||||
|
||||
.scissors-art {
|
||||
.hero-image-container {
|
||||
position: relative;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 30px 60px rgba(44, 24, 16, 0.2);
|
||||
}
|
||||
|
||||
.hero-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
aspect-ratio: 3/4;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.scissors-art {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.scissors {
|
||||
transform-origin: center;
|
||||
animation: scissorsPulse 4s ease-in-out infinite;
|
||||
}
|
||||
.hero-image-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(to top, rgba(44, 24, 16, 0.3) 0%, transparent 50%);
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0) rotate(0deg); }
|
||||
50% { transform: translateY(-20px) rotate(3deg); }
|
||||
/* Showcase Section */
|
||||
.showcase {
|
||||
padding: var(--space-xl) 0;
|
||||
background: var(--cream-dark);
|
||||
}
|
||||
|
||||
@keyframes scissorsPulse {
|
||||
0%, 100% { transform: translate(100px, 100px) scale(1); }
|
||||
50% { transform: translate(100px, 100px) scale(1.05); }
|
||||
.showcase-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.showcase-item {
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
aspect-ratio: 4/3;
|
||||
}
|
||||
|
||||
.showcase-item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.showcase-item:hover img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
@@ -424,9 +454,9 @@ section {
|
||||
|
||||
.service-card {
|
||||
background: white;
|
||||
padding: var(--space-lg);
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(201, 169, 110, 0.2);
|
||||
overflow: hidden;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
@@ -437,20 +467,28 @@ section {
|
||||
}
|
||||
|
||||
.service-card-featured {
|
||||
background: linear-gradient(135deg, white 0%, rgba(201, 169, 110, 0.08) 100%);
|
||||
border-color: var(--gold);
|
||||
}
|
||||
|
||||
.service-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin-bottom: var(--space-md);
|
||||
color: var(--gold);
|
||||
.service-image {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.service-icon svg {
|
||||
.service-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.service-card:hover .service-image img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.service-content {
|
||||
padding: var(--space-md);
|
||||
}
|
||||
|
||||
.service-title {
|
||||
@@ -479,6 +517,64 @@ section {
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
/* Atmosphere Section */
|
||||
.atmosphere {
|
||||
padding: var(--space-xl) 0;
|
||||
background: var(--cream);
|
||||
}
|
||||
|
||||
.atmosphere-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.atmosphere-main {
|
||||
position: relative;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.atmosphere-main img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.atmosphere-overlay {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
inset-inline: 0;
|
||||
padding: var(--space-lg);
|
||||
background: linear-gradient(to top, rgba(44, 24, 16, 0.8), transparent);
|
||||
}
|
||||
|
||||
.atmosphere-text {
|
||||
color: var(--cream);
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.atmosphere-side {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.atmosphere-item {
|
||||
flex: 1;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.atmosphere-item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* Gallery */
|
||||
.gallery {
|
||||
background: var(--brown-dark);
|
||||
@@ -503,7 +599,6 @@ section {
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
aspect-ratio: 4 / 3;
|
||||
}
|
||||
|
||||
.gallery-item:focus-within {
|
||||
@@ -511,19 +606,20 @@ section {
|
||||
outline-offset: 4px;
|
||||
}
|
||||
|
||||
.gallery-placeholder {
|
||||
.gallery-figure {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: var(--transition);
|
||||
margin: 0;
|
||||
aspect-ratio: 5/4;
|
||||
}
|
||||
|
||||
.gallery-placeholder svg {
|
||||
.gallery-figure img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.gallery-label {
|
||||
@@ -547,7 +643,7 @@ section {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.gallery-item:hover .gallery-placeholder {
|
||||
.gallery-item:hover .gallery-figure img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
@@ -605,11 +701,10 @@ section {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.map-art {
|
||||
.area-image {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 20px 40px rgba(44, 24, 16, 0.15);
|
||||
}
|
||||
|
||||
/* Contact */
|
||||
@@ -627,6 +722,7 @@ section {
|
||||
align-items: center;
|
||||
box-shadow: 0 20px 60px rgba(44, 24, 16, 0.1);
|
||||
border: 1px solid rgba(201, 169, 110, 0.2);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.contact .section-title {
|
||||
@@ -692,8 +788,15 @@ section {
|
||||
color: var(--brown-dark);
|
||||
}
|
||||
|
||||
.contact-cta {
|
||||
text-align: center;
|
||||
.contact-image {
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.contact-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
@@ -734,6 +837,284 @@ section {
|
||||
color: rgba(250, 246, 240, 0.7);
|
||||
}
|
||||
|
||||
/* Floating CTA */
|
||||
.floating-cta {
|
||||
position: fixed;
|
||||
bottom: var(--space-lg);
|
||||
inset-inline-start: var(--space-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
padding: 1rem 1.5rem;
|
||||
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
|
||||
color: var(--brown-dark);
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
font-family: var(--font-body);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 8px 30px rgba(201, 169, 110, 0.4);
|
||||
z-index: 90;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.floating-cta svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.floating-cta:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 12px 40px rgba(201, 169, 110, 0.5);
|
||||
}
|
||||
|
||||
.floating-cta:focus-visible {
|
||||
outline: 3px solid var(--brown-dark);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
/* Popup Styles */
|
||||
.popup-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(44, 24, 16, 0.7);
|
||||
backdrop-filter: blur(5px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: var(--transition);
|
||||
padding: var(--space-md);
|
||||
}
|
||||
|
||||
.popup-overlay.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.popup-container {
|
||||
background: white;
|
||||
border-radius: 24px;
|
||||
max-width: 540px;
|
||||
width: 100%;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
transform: translateY(20px) scale(0.95);
|
||||
transition: var(--transition);
|
||||
box-shadow: 0 30px 60px rgba(44, 24, 16, 0.3);
|
||||
}
|
||||
|
||||
.popup-overlay.active .popup-container {
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
|
||||
.popup-close {
|
||||
position: absolute;
|
||||
top: var(--space-md);
|
||||
inset-inline-end: var(--space-md);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--cream);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.popup-close svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: var(--brown-dark);
|
||||
}
|
||||
|
||||
.popup-close:hover {
|
||||
background: var(--cream-dark);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.popup-close:focus-visible {
|
||||
outline: 3px solid var(--gold);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
padding: var(--space-xl);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.popup-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 0 auto var(--space-md);
|
||||
color: var(--gold);
|
||||
}
|
||||
|
||||
.popup-icon svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.popup-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--brown-dark);
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
|
||||
.popup-subtitle {
|
||||
color: var(--text-muted);
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.popup-options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.popup-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
padding: var(--space-md);
|
||||
background: var(--cream);
|
||||
border-radius: 16px;
|
||||
text-align: start;
|
||||
transition: var(--transition);
|
||||
position: relative;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
.popup-option:hover {
|
||||
border-color: var(--gold);
|
||||
transform: translateX(-4px);
|
||||
}
|
||||
|
||||
.popup-option:focus-visible {
|
||||
outline: none;
|
||||
border-color: var(--gold);
|
||||
box-shadow: 0 0 0 4px rgba(201, 169, 110, 0.3);
|
||||
}
|
||||
|
||||
.popup-option-premium {
|
||||
background: linear-gradient(135deg, rgba(201, 169, 110, 0.15) 0%, rgba(201, 169, 110, 0.05) 100%);
|
||||
border-color: var(--gold);
|
||||
}
|
||||
|
||||
.option-badge {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
inset-inline-end: var(--space-md);
|
||||
background: var(--gold);
|
||||
color: var(--brown-dark);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
.option-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
color: var(--gold);
|
||||
}
|
||||
|
||||
.option-icon svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.option-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.option-title {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
color: var(--brown-dark);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.option-desc {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.popup-warning {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-sm);
|
||||
padding: var(--space-md);
|
||||
background: #FFF3CD;
|
||||
border-radius: 12px;
|
||||
text-align: start;
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.popup-warning svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
.popup-warning p {
|
||||
font-size: 0.9rem;
|
||||
color: #856404;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.popup-warning strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.popup-extras {
|
||||
padding: var(--space-md);
|
||||
background: var(--cream);
|
||||
border-radius: 12px;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.popup-extras p {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.popup-extras p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.popup-extras-note {
|
||||
color: var(--brown);
|
||||
}
|
||||
|
||||
.popup-extras a {
|
||||
color: var(--gold-dark);
|
||||
font-weight: 600;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.popup-extras a:hover {
|
||||
color: var(--brown-dark);
|
||||
}
|
||||
|
||||
/* Reveal Animation */
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
@@ -767,10 +1148,22 @@ section {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.showcase-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.services-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.atmosphere-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.atmosphere-side {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.gallery-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
@@ -800,6 +1193,11 @@ section {
|
||||
.contact-details {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.contact-image {
|
||||
order: -1;
|
||||
max-height: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@@ -856,10 +1254,18 @@ section {
|
||||
transform: rotate(-45deg) translate(5px, -5px);
|
||||
}
|
||||
|
||||
.showcase-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.services-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.atmosphere-side {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.gallery-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
@@ -882,6 +1288,30 @@ section {
|
||||
.footer-brand {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.floating-cta {
|
||||
bottom: var(--space-md);
|
||||
inset-inline-start: var(--space-md);
|
||||
padding: 0.875rem 1.25rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.floating-cta span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.floating-cta svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
padding: var(--space-lg);
|
||||
}
|
||||
|
||||
.popup-title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
@@ -889,6 +1319,11 @@ section {
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
|
||||
.showcase-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.contact-card {
|
||||
padding: var(--space-lg);
|
||||
}
|
||||
@@ -900,4 +1335,14 @@ section {
|
||||
.gallery-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.popup-option {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.option-badge {
|
||||
position: static;
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user