AI update: שדרוג לדף הדמו של 'Hair On Top' (מספרה/עיצוב שיער):
1) תמונות: בכל מקום שיש placeholder או חוסר תמונה — הוסף תמונות סטו
This commit is contained in:
@@ -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 */
|
||||
|
||||
Reference in New Issue
Block a user