/* ═══════════════════════════════════════════════════════════════
JULIET BEAUTY BOUTIQUE — PREMIUM VISUAL UPGRADE
גרסה: 2.0 פרימיום | עיצוב: Luxury Pink Boutique × Futuristic
הוסיפי קישור לקובץ זה ב-index.html לפני סגירת :
═══════════════════════════════════════════════════════════════ */
/* ── Google Fonts: Cormorant Garamond + Bebas Neue + Pacifico ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,700&family=Bebas+Neue&family=Pacifico&family=Bodoni+Moda:ital,opsz,wght@0,6..96,700;0,6..96,900;1,6..96,400;1,6..96,700&family=Cinzel:wght@600;700;900&family=Cinzel+Decorative:wght@700;900&family=Dancing+Script:wght@700&display=swap');
/* ════════════════════════════════════════════════════════════════
1. DESIGN TOKENS — OVERRIDE / EXTEND
════════════════════════════════════════════════════════════════ */
:root {
/* Warm Glam Pink — #C23768 (הוכהה מ-#D4688A לעמידה בניגודיות AA על טקסט לבן) */
--pk: #C23768;
--pk2: rgba(212,104,138,.15);
--pk3: rgba(212,104,138,.07);
--pk4: rgba(212,104,138,.04);
/* כסף / כרום — אקסנט חדש */
--sv: #C8C8D4;
--sv2: rgba(200,200,212,.18);
--sv3: rgba(200,200,212,.08);
/* זהב — מעודן יותר */
--gd: #D4A96A;
--gd2: rgba(212,169,106,.20);
--gd3: rgba(212,169,106,.08);
/* גלואו מעודכן */
--neon: 0 0 6px rgba(212,104,138,.9), 0 0 20px rgba(212,104,138,.6), 0 0 50px rgba(212,104,138,.25);
--neon-sm: 0 0 4px rgba(212,104,138,.8), 0 0 14px rgba(212,104,138,.4);
--gneon: 0 0 8px rgba(212,169,106,.6), 0 0 24px rgba(212,169,106,.25);
--svneon: 0 0 8px rgba(200,200,212,.5), 0 0 20px rgba(200,200,212,.2);
/* פונט כותרות — שדרוג */
--fd-serif: 'Cormorant Garamond', 'David Libre', serif;
/* זכוכית (glassmorphism) */
--glass-bg: rgba(255,255,255,.04);
--glass-border: rgba(255,255,255,.10);
--glass-shadow: 0 8px 32px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.06) inset;
/* דפוס ריבועים (שחמט) */
--checker-size: 32px;
--checker-color: rgba(212,104,138,.035);
/* מרווחים */
--section-gap: 120px;
}
/* ════════════════════════════════════════════════════════════════
2. GLOBAL BASE UPGRADES
════════════════════════════════════════════════════════════════ */
/* סקרול חלק */
html { scroll-behavior: smooth; }
/* גוף — שיפור אנטי-אליאסינג */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #080808;
}
/* כותרות — שרי-פנט יוקרתי */
h1, h2, .stitle, .hero-t, .hero-sub {
font-family: var(--fd-serif), var(--fd);
}
/* קו מפריד — אורגמנטל */
.bar {
width: 56px;
height: 2px;
background: linear-gradient(90deg, var(--pk), var(--gd));
border-radius: 2px;
margin: 20px 0 28px;
box-shadow: var(--neon-sm);
position: relative;
}
.bar::after {
content: '✦';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
font-size: 9px;
color: var(--pk);
background: var(--bk);
padding: 0 6px;
text-shadow: var(--neon-sm);
}
/* Eyebrow tags */
.eyebrow {
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--pk);
opacity: .95;
display: flex;
align-items: center;
gap: 8px;
font-family: var(--fd);
font-weight: 600;
}
/* ════════════════════════════════════════════════════════════════
3. CHECKERBOARD PATTERN HELPER
════════════════════════════════════════════════════════════════ */
.checker-bg,
.ben-grid,
.cmp-sec,
.quiz-sec {
position: relative;
}
.checker-bg::before,
.ben-grid::before,
.cmp-sec::before,
.quiz-sec::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(45deg, var(--checker-color) 25%, transparent 25%),
linear-gradient(-45deg, var(--checker-color) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, var(--checker-color) 75%),
linear-gradient(-45deg, transparent 75%, var(--checker-color) 75%);
background-size: var(--checker-size) var(--checker-size);
background-position: 0 0, 0 16px, 16px -16px, -16px 0;
pointer-events: none;
z-index: 0;
}
.ben-grid > *,
.cmp-inner,
.quiz-inner {
position: relative;
z-index: 1;
}
/* ════════════════════════════════════════════════════════════════
4. SAKURA PETALS — CSS ANIMATION
════════════════════════════════════════════════════════════════ */
@keyframes sakura-fall {
0% { transform: translateY(-60px) rotate(0deg) translateX(0); opacity: 0; }
10% { opacity: .7; }
90% { opacity: .5; }
100% { transform: translateY(110vh) rotate(720deg) translateX(60px); opacity: 0; }
}
@keyframes sakura-sway {
0%,100% { margin-left: 0; }
50% { margin-left: 30px; }
}
.sakura-petal {
position: fixed;
top: 0;
width: 8px;
height: 8px;
background: radial-gradient(ellipse at 30% 30%, #ffb3d9, #ff80c0 60%, #e8006a);
border-radius: 0 100% 0 100%;
opacity: 0;
pointer-events: none;
z-index: 9999;
animation: sakura-fall linear infinite, sakura-sway ease-in-out infinite;
will-change: transform, opacity;
}
/* ════════════════════════════════════════════════════════════════
5. HERO SECTION UPGRADE
════════════════════════════════════════════════════════════════ */
.hero {
position: relative;
overflow: hidden;
}
/* שכבת צבע מועשרת */
.hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 70% at 70% 40%, rgba(212,104,138,.18) 0%, transparent 60%),
radial-gradient(ellipse 40% 50% at 20% 80%, rgba(212,169,106,.10) 0%, transparent 60%);
z-index: 1;
pointer-events: none;
}
/* שדרוג כותרת הירו */
.hero-t {
font-size: clamp(38px, 7vw, 80px);
font-family: var(--fd-serif);
font-weight: 700;
line-height: 1.1;
letter-spacing: -.01em;
}
.hero-t em {
font-style: italic;
color: var(--pk);
text-shadow: var(--neon);
font-weight: 400;
}
/* כפתורים ראשיים — שדרוג */
.btn-pk {
background: linear-gradient(135deg, var(--pk) 0%, #d4006e 100%);
box-shadow: 0 4px 20px rgba(212,104,138,.45), 0 1px 0 rgba(255,255,255,.15) inset;
border: none;
font-family: var(--fd);
font-weight: 700;
font-size: 15px;
letter-spacing: .02em;
transition: transform .2s var(--ease), box-shadow .2s var(--ease);
position: relative;
overflow: hidden;
}
.btn-pk::before {
content: '';
position: absolute;
top: 0; left: -100%; width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
transition: left .5s;
}@media (hover:hover) and (pointer:fine){
.btn-pk:hover::before{ left: 100%; }
}@media (hover:hover) and (pointer:fine){
.btn-pk:hover{
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(212,104,138,.55), 0 1px 0 rgba(255,255,255,.2) inset;
}
}
.btn-pk:active { transform: translateY(0); }
/* כפתור זהב */
.btn-gd {
background: linear-gradient(135deg, var(--gd) 0%, #b8883a 100%);
box-shadow: 0 4px 20px rgba(212,169,106,.35), 0 1px 0 rgba(255,255,255,.15) inset;
border: none;
font-weight: 700;
transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}@media (hover:hover) and (pointer:fine){
.btn-gd:hover{
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(212,169,106,.5), 0 1px 0 rgba(255,255,255,.2) inset;
}
}
/* Trust items בירו */
.trust-item {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 12px;
padding: 10px 18px;
font-size: 13px;
}
/* ════════════════════════════════════════════════════════════════
6. TICKER / NEWS STRIP
════════════════════════════════════════════════════════════════ */
.ticker {
background: linear-gradient(90deg, #0a0a0a 0%, #120612 30%, #0a0a0a 70%);
border-top: 1px solid var(--pk2);
border-bottom: 1px solid var(--pk2);
position: relative;
overflow: hidden;
}
.ticker::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(212,104,138,.05) 0%, transparent 50%, rgba(212,104,138,.05) 100%);
}
.ti { color: var(--sv); }
.ti::first-letter { color: var(--pk); }
/* ════════════════════════════════════════════════════════════════
7. STATS SECTION
════════════════════════════════════════════════════════════════ */
.stats {
background: linear-gradient(135deg, #0d0208 0%, #110511 50%, #0d0208 100%);
border-top: 1px solid var(--pk3);
border-bottom: 1px solid var(--pk3);
position: relative;
}
.stats::after {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(45deg, rgba(212,104,138,.025) 25%, transparent 25%),
linear-gradient(-45deg, rgba(212,104,138,.025) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, rgba(212,104,138,.025) 75%),
linear-gradient(-45deg, transparent 75%, rgba(212,104,138,.025) 75%);
background-size: 20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0;
pointer-events: none;
}
.stat {
border: 1px solid var(--glass-border);
background: var(--glass-bg);
backdrop-filter: blur(10px);
border-radius: 16px;
padding: 28px 24px;
transition: border-color .3s, transform .3s;
position: relative;
z-index: 1;
}@media (hover:hover) and (pointer:fine){
.stat:hover{
border-color: var(--pk2);
transform: translateY(-4px);
}
}
.snum {
font-family: var(--fd-serif);
font-size: clamp(36px, 5vw, 60px);
font-weight: 700;
color: var(--pk);
text-shadow: var(--neon-sm);
line-height: 1;
}
.slbl {
color: var(--sv);
font-size: 12px;
letter-spacing: .08em;
text-transform: uppercase;
margin-top: 6px;
}
/* ════════════════════════════════════════════════════════════════
8. FEATURED (OXO) SECTION
════════════════════════════════════════════════════════════════ */
.feat {
background: linear-gradient(160deg, #0e0309 0%, #130813 60%, #0b0208 100%);
position: relative;
overflow: hidden;
}
.feat::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 50% 60% at 0% 50%, rgba(212,104,138,.07) 0%, transparent 60%);
pointer-events: none;
}
/* Badge */
.feat-badge {
background: linear-gradient(135deg, var(--pk) 0%, #a0005a 100%);
box-shadow: var(--neon);
font-weight: 700;
font-size: 11px;
letter-spacing: .1em;
border-radius: 20px;
padding: 6px 16px;
}
/* Tags */
.ftag {
background: var(--glass-bg);
border: 1px solid var(--pk2);
border-radius: 20px;
font-size: 11px;
font-weight: 600;
padding: 5px 14px;
color: var(--pk);
letter-spacing: .06em;
transition: background .25s, box-shadow .25s;
}@media (hover:hover) and (pointer:fine){
.ftag:hover{
background: var(--pk2);
box-shadow: var(--neon-sm);
}
}
/* Feature list */
.feat-list li {
border-bottom: 1px solid rgba(255,255,255,.05);
padding: 10px 0;
font-size: 14px;
line-height: 1.6;
transition: color .2s;
}@media (hover:hover) and (pointer:fine){
.feat-list li:hover{ color: #fff; }
}
.feat-list .ic {
background: var(--pk3);
border: 1px solid var(--pk2);
border-radius: 50%;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 14px;
}
/* Price block */
.feat-price {
background: linear-gradient(135deg, rgba(212,169,106,.10), rgba(212,169,106,.05));
border: 1px solid var(--gd2);
border-radius: 14px;
padding: 18px 22px;
font-size: 16px;
color: var(--gd);
backdrop-filter: blur(8px);
box-shadow: var(--gneon);
}
.feat-price strong {
font-size: 22px;
font-family: var(--fd-serif);
color: #fff;
}
/* ════════════════════════════════════════════════════════════════
9. BENEFITS GRID
════════════════════════════════════════════════════════════════ */
.benefits {
background: #090209;
padding-top: 80px;
padding-bottom: 80px;
}
.ben-title {
font-family: var(--fd-serif);
font-size: clamp(20px, 3vw, 28px);
color: var(--sv);
letter-spacing: .08em;
text-align: center;
margin-bottom: 48px;
text-transform: uppercase;
font-weight: 400;
}
.ben-card {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 20px;
padding: 28px 22px;
transition: border-color .3s, box-shadow .3s, transform .3s;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
.ben-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(212,104,138,.4), transparent);
opacity: 0;
transition: opacity .3s;
}@media (hover:hover) and (pointer:fine){
.ben-card:hover{
border-color: var(--pk2);
box-shadow: 0 8px 32px rgba(212,104,138,.12), var(--glass-shadow);
transform: translateY(-6px);
}
}@media (hover:hover) and (pointer:fine){
.ben-card:hover::before{ opacity: 1; }
}
.ben-ic {
width: 48px;
height: 48px;
background: linear-gradient(135deg, var(--pk2), var(--pk3));
border: 1px solid var(--pk2);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
transition: box-shadow .3s;
}
.ben-ic svg {
stroke: var(--pk);
width: 22px;
height: 22px;
}@media (hover:hover) and (pointer:fine){
.ben-card:hover .ben-ic{
box-shadow: 0 0 16px rgba(212,104,138,.3);
}
}
.ben-t {
font-family: var(--fd-serif);
font-size: 17px;
font-weight: 700;
color: #fff;
margin-bottom: 8px;
}
.ben-s { font-size: 13px; line-height: 1.7; color: var(--g1); }
/* ════════════════════════════════════════════════════════════════
10. COMPARISON TABLE
════════════════════════════════════════════════════════════════ */
.cmp-sec {
background: #080208;
}
.cmp-table {
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
}
.cmp-table thead th {
background: rgba(255,255,255,.04);
font-size: 13px;
padding: 16px 12px;
letter-spacing: .04em;
}
.cmp-table th.juliet {
background: linear-gradient(135deg, rgba(212,104,138,.20), rgba(212,104,138,.10));
border-top: 2px solid var(--pk);
color: var(--pk);
text-shadow: var(--neon-sm);
}
.cmp-winner {
display: inline-block;
background: var(--pk);
color: #fff;
border-radius: 20px;
font-size: 10px;
font-weight: 700;
padding: 2px 10px;
letter-spacing: .06em;
box-shadow: var(--neon-sm);
margin-top: 4px;
}@media (hover:hover) and (pointer:fine){
.cmp-table tbody tr:hover td{ background: rgba(255,255,255,.025); }
}
.cmp-table td.juliet { background: rgba(212,104,138,.06); border-left: 1px solid var(--pk2); }
.cmp-check { color: var(--pk); font-weight: 700; text-shadow: var(--neon-sm); }
.cmp-x { color: rgba(255,255,255,.25); }
/* ════════════════════════════════════════════════════════════════
11. BEFORE / AFTER
════════════════════════════════════════════════════════════════ */
.ba-sec {
background: linear-gradient(160deg, #0b0208 0%, #0f0510 100%);
position: relative;
}
.ba-sec::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(212,104,138,.06) 0%, transparent 60%);
pointer-events: none;
}
.ba-item {
border: 1px solid var(--glass-border);
border-radius: 20px;
overflow: hidden;
box-shadow: var(--glass-shadow);
transition: border-color .3s, box-shadow .3s;
}@media (hover:hover) and (pointer:fine){
.ba-item:hover{
border-color: var(--pk2);
box-shadow: 0 12px 40px rgba(212,104,138,.15);
}
}
.ba-handle {
background: linear-gradient(135deg, var(--pk), #a0005a);
box-shadow: var(--neon);
}
.ba-label-b, .ba-label-a {
background: rgba(0,0,0,.6);
backdrop-filter: blur(6px);
border-radius: 20px;
font-size: 11px;
font-weight: 700;
letter-spacing: .1em;
padding: 4px 12px;
text-transform: uppercase;
}
.ba-label-a { color: var(--pk); border: 1px solid var(--pk2); }
/* ════════════════════════════════════════════════════════════════
12. SERVICES GRID
════════════════════════════════════════════════════════════════ */
.svc-sec {
background: #090209;
}
.sc {
border-radius: 20px;
overflow: hidden;
border: 1px solid var(--glass-border);
transition: border-color .3s, box-shadow .3s, transform .3s;
box-shadow: var(--glass-shadow);
}@media (hover:hover) and (pointer:fine){
.sc:hover{
border-color: var(--pk2);
box-shadow: 0 12px 40px rgba(212,104,138,.18);
transform: translateY(-4px);
}
}
.sc-ov {
background: linear-gradient(180deg, transparent 0%, rgba(8,2,8,.92) 50%, rgba(8,2,8,.97) 100%);
backdrop-filter: blur(2px);
}
.sc-name {
font-family: var(--fd-serif);
font-size: 19px;
font-weight: 700;
}
.sc-icon {
width: 44px;
height: 44px;
background: var(--pk2);
border: 1px solid var(--pk2);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
margin-bottom: 10px;
}
/* ════════════════════════════════════════════════════════════════
13. ABOUT SECTION
════════════════════════════════════════════════════════════════ */
.about {
background: linear-gradient(160deg, #0c030c 0%, #0e0510 100%);
position: relative;
overflow: hidden;
}
.about::after {
content: '';
position: absolute;
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(212,104,138,.06) 0%, transparent 70%);
top: -100px; left: -100px;
pointer-events: none;
}
.about-frame {
border: 1px solid var(--pk2);
border-radius: 24px;
box-shadow: 0 0 40px rgba(212,104,138,.12);
}
.abadge {
background: linear-gradient(135deg, var(--pk), #8a0047);
box-shadow: var(--neon);
border: 2px solid rgba(255,255,255,.15);
}
.abadge-n {
font-family: var(--fd-serif);
font-size: 32px;
font-weight: 700;
}
.quote-block {
background: linear-gradient(135deg, rgba(212,104,138,.07), rgba(212,169,106,.05));
border-right: 3px solid var(--pk);
border-radius: 12px;
padding: 20px 24px;
position: relative;
}
.quote-block::before {
content: '"';
position: absolute;
top: -10px; right: 16px;
font-family: var(--fd-serif);
font-size: 60px;
color: var(--pk);
opacity: .3;
line-height: 1;
}
.quote-text {
font-family: var(--fd-serif);
font-size: 17px;
font-style: italic;
line-height: 1.7;
color: var(--g1);
}
.val-card {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 14px;
padding: 18px 16px;
transition: border-color .3s, transform .2s;
}@media (hover:hover) and (pointer:fine){
.val-card:hover{
border-color: var(--pk2);
transform: translateY(-3px);
}
}
.val-title {
color: var(--pk);
font-weight: 700;
font-size: 13px;
font-family: var(--fd-serif);
letter-spacing: .03em;
margin-bottom: 6px;
}
/* ════════════════════════════════════════════════════════════════
14. VIDEO TESTIMONIALS
════════════════════════════════════════════════════════════════ */
.vid-sec {
background: #0b020b;
}
.vid-card {
border: 1px solid var(--glass-border);
border-radius: 20px;
overflow: hidden;
transition: border-color .3s, box-shadow .3s, transform .3s;
}@media (hover:hover) and (pointer:fine){
.vid-card:hover{
border-color: var(--pk2);
box-shadow: 0 8px 32px rgba(212,104,138,.20);
transform: translateY(-5px);
}
}
/* ════════════════════════════════════════════════════════════════
15. REVIEWS CAROUSEL
════════════════════════════════════════════════════════════════ */
.reviews {
background: linear-gradient(160deg, #090209 0%, #0c030c 100%);
}
.rvc {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 20px;
padding: 28px 24px;
min-width: 300px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
position: relative;
overflow: hidden;
transition: border-color .3s, box-shadow .3s;
}
.rvc::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(212,104,138,.5), transparent);
}@media (hover:hover) and (pointer:fine){
.rvc:hover{
border-color: var(--pk2);
box-shadow: 0 8px 28px rgba(212,104,138,.10);
}
}
.rvs {
color: var(--gd);
text-shadow: var(--gneon);
letter-spacing: .1em;
font-size: 14px;
margin-bottom: 12px;
}
.rvt {
font-family: var(--fd-serif);
font-size: 15px;
font-style: italic;
line-height: 1.75;
color: var(--g1);
}
.rva {
font-weight: 700;
color: #fff;
font-size: 13px;
margin-top: 16px;
}
.rvl { color: var(--pk); font-size: 11px; margin-top: 3px; }
.rvp { color: var(--sv); font-size: 11px; }
/* ════════════════════════════════════════════════════════════════
16. INSTAGRAM GRID
════════════════════════════════════════════════════════════════ */
.insta-sec {
background: #090209;
}
.insta-item {
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--glass-border);
transition: border-color .3s, transform .3s, box-shadow .3s;
}@media (hover:hover) and (pointer:fine){
.insta-item:hover{
border-color: var(--pk);
transform: scale(1.03);
box-shadow: 0 8px 32px rgba(212,104,138,.25);
}
}
.insta-item-overlay {
background: linear-gradient(135deg, rgba(212,104,138,.85), rgba(180,0,90,.9));
backdrop-filter: blur(4px);
}
.insta-handle {
background: linear-gradient(135deg, var(--pk2), var(--sv3));
border: 1px solid var(--pk2);
border-radius: 30px;
padding: 12px 28px;
font-weight: 700;
color: var(--pk);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: background .25s, box-shadow .25s, transform .2s;
letter-spacing: .04em;
font-size: 14px;
}@media (hover:hover) and (pointer:fine){
.insta-handle:hover{
background: var(--pk2);
box-shadow: var(--neon-sm);
transform: translateY(-2px);
}
}
/* ════════════════════════════════════════════════════════════════
17. FAQ SECTION
════════════════════════════════════════════════════════════════ */
.faq-sec {
background: linear-gradient(160deg, #0b020b 0%, #0e0510 100%);
position: relative;
}
.faq-item {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 16px;
overflow: hidden;
transition: border-color .3s;
}@media (hover:hover) and (pointer:fine){
.faq-item:hover{ border-color: var(--pk2); }
}
.faq-q {
font-family: var(--fd-serif);
font-size: 16px;
font-weight: 700;
color: #fff;
padding: 20px 24px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.faq-q::after {
content: '+';
color: var(--pk);
font-size: 20px;
font-weight: 300;
flex-shrink: 0;
transition: transform .3s;
text-shadow: var(--neon-sm);
}
.faq-item.open .faq-q::after { transform: rotate(45deg); }
.faq-a {
padding: 0 24px;
font-size: 14px;
line-height: 1.8;
color: var(--g1);
}
.faq-a p { padding-bottom: 18px; }
/* ════════════════════════════════════════════════════════════════
18. QUIZ SECTION
════════════════════════════════════════════════════════════════ */
.quiz-sec {
background: #090209;
padding-top: 80px;
padding-bottom: 80px;
}
.quiz-box {
background: linear-gradient(135deg, rgba(212,104,138,.06), rgba(212,169,106,.04));
border: 1px solid var(--pk2);
border-radius: 24px;
backdrop-filter: blur(12px);
box-shadow: var(--glass-shadow), 0 0 60px rgba(212,104,138,.06);
max-width: 640px;
margin: 0 auto;
}
.quiz-opt {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 12px;
padding: 13px 18px;
font-size: 14px;
font-family: var(--fd);
color: var(--g1);
cursor: pointer;
transition: background .2s, border-color .2s, color .2s, transform .15s;
text-align: right;
}@media (hover:hover) and (pointer:fine){
.quiz-opt:hover{
background: var(--pk2);
border-color: var(--pk);
color: #fff;
transform: translateX(-4px);
}
}
.quiz-step { background: var(--sv3); border-radius: 4px; }
.quiz-step.fill { background: linear-gradient(90deg, var(--pk), var(--gd)); box-shadow: var(--neon-sm); }
.quiz-result-cta {
background: linear-gradient(135deg, var(--pk), #a0005a);
box-shadow: 0 4px 20px rgba(212,104,138,.4);
border-radius: 12px;
padding: 14px 28px;
font-weight: 700;
font-size: 15px;
color: #fff;
text-decoration: none;
display: inline-block;
transition: transform .2s, box-shadow .2s;
}@media (hover:hover) and (pointer:fine){
.quiz-result-cta:hover{
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(212,104,138,.55);
}
}
/* ════════════════════════════════════════════════════════════════
19. LEAD FORM
════════════════════════════════════════════════════════════════ */
.leads-sec {
background: linear-gradient(160deg, #0d030d 0%, #100610 100%);
position: relative;
overflow: hidden;
}
.leads-sec::before {
content: '';
position: absolute;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(212,104,138,.06) 0%, transparent 70%);
bottom: -200px; left: -200px;
pointer-events: none;
}
.leads-form {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 24px;
padding: 36px 32px;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: var(--glass-shadow);
}
.leads-form input,
.leads-form textarea,
.leads-form select {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.10);
border-radius: 12px;
padding: 13px 16px;
font-size: 14px;
color: #fff;
font-family: var(--fd);
transition: border-color .25s, box-shadow .25s;
width: 100%;
}
.leads-form input:focus,
.leads-form textarea:focus,
.leads-form select:focus {
border-color: var(--pk);
box-shadow: 0 0 0 3px rgba(212,104,138,.10);
outline: none;
}
.leads-form label {
font-size: 12px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--sv);
margin-bottom: 8px;
display: block;
}
.lf-submit {
background: linear-gradient(135deg, var(--pk), #a0005a);
box-shadow: 0 4px 24px rgba(212,104,138,.45);
border: none;
border-radius: 12px;
padding: 15px 32px;
font-size: 15px;
font-weight: 700;
color: #fff;
cursor: pointer;
width: 100%;
font-family: var(--fd);
transition: transform .2s, box-shadow .2s;
position: relative;
overflow: hidden;
}@media (hover:hover) and (pointer:fine){
.lf-submit:hover{
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(212,104,138,.55);
}
}
/* ════════════════════════════════════════════════════════════════
20. LOCATION SECTION
════════════════════════════════════════════════════════════════ */
.loc-sec {
background: #090209;
}
.loc-card {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 16px;
padding: 20px 18px;
backdrop-filter: blur(10px);
transition: border-color .3s, transform .2s;
display: flex;
gap: 14px;
align-items: flex-start;
}@media (hover:hover) and (pointer:fine){
.loc-card:hover{
border-color: var(--pk2);
transform: translateY(-3px);
}
}
.loc-ic {
font-size: 22px;
flex-shrink: 0;
width: 40px;
height: 40px;
background: var(--pk3);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.loc-t { font-weight: 700; font-family: var(--fd-serif); color: #fff; margin-bottom: 4px; }
.loc-d { font-size: 13px; line-height: 1.7; color: var(--g1); }
.loc-mbtn {
border-radius: 12px;
padding: 11px 22px;
font-weight: 700;
font-size: 13px;
border: 1px solid var(--glass-border);
background: var(--glass-bg);
transition: border-color .25s, background .25s;
text-decoration: none;
color: #fff;
display: inline-flex;
align-items: center;
gap: 8px;
}@media (hover:hover) and (pointer:fine){
.loc-mbtn.waze:hover{ border-color: #33ccff; background: rgba(51,204,255,.08); }
}@media (hover:hover) and (pointer:fine){
.loc-mbtn.gmaps:hover{ border-color: #4285f4; background: rgba(66,133,244,.08); }
}
/* ════════════════════════════════════════════════════════════════
21. GOOGLE REVIEWS
════════════════════════════════════════════════════════════════ */
.gr-sec {
background: linear-gradient(160deg, #0c030c 0%, #0e0510 100%);
}
.gr-score {
font-family: var(--fd-serif);
font-size: clamp(48px, 8vw, 80px);
font-weight: 700;
color: var(--gd);
text-shadow: var(--gneon);
line-height: 1;
}
.gr-card {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 20px;
padding: 24px 22px;
backdrop-filter: blur(12px);
transition: border-color .3s, box-shadow .3s, transform .3s;
position: relative;
overflow: hidden;
}
.gr-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(212,169,106,.4), transparent);
}@media (hover:hover) and (pointer:fine){
.gr-card:hover{
border-color: var(--gd2);
box-shadow: 0 8px 32px rgba(212,169,106,.08);
transform: translateY(-4px);
}
}
.gr-card-stars { color: var(--gd); font-size: 13px; margin-bottom: 12px; text-shadow: var(--gneon); }
.gr-card-text {
font-family: var(--fd-serif);
font-size: 14px;
font-style: italic;
line-height: 1.75;
color: var(--g1);
}
.gr-btn {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 30px;
padding: 11px 24px;
font-size: 13px;
font-weight: 600;
color: #fff;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: background .25s, border-color .25s, transform .2s;
}@media (hover:hover) and (pointer:fine){
.gr-btn:hover{
background: var(--gd2);
border-color: var(--gd);
transform: translateY(-2px);
}
}
/* ════════════════════════════════════════════════════════════════
22. BLOG SECTION
════════════════════════════════════════════════════════════════ */
.blog-home-sec {
background: #090209;
}
/* ════════════════════════════════════════════════════════════════
23. FOOTER
════════════════════════════════════════════════════════════════ */
footer {
background: #060106 !important;
border-top: 1px solid var(--pk2);
position: relative;
}
footer::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--pk) 30%, var(--gd) 50%, var(--pk) 70%, transparent 100%);
box-shadow: var(--neon-sm);
}
/* ════════════════════════════════════════════════════════════════
24. WHATSAPP FLOAT BUTTON
════════════════════════════════════════════════════════════════ */
.wa-float {
background: linear-gradient(135deg, #25D366, #128C7E) !important;
box-shadow: 0 4px 20px rgba(37,211,102,.4), 0 0 0 0 rgba(37,211,102,.3) !important;
animation: wa-pulse 2.5s ease-out infinite !important;
}
@keyframes wa-pulse {
0% { box-shadow: 0 4px 20px rgba(37,211,102,.4), 0 0 0 0 rgba(37,211,102,.4); }
70% { box-shadow: 0 4px 20px rgba(37,211,102,.4), 0 0 0 14px rgba(37,211,102,0); }
100% { box-shadow: 0 4px 20px rgba(37,211,102,.4), 0 0 0 0 rgba(37,211,102,0); }
}
/* ════════════════════════════════════════════════════════════════
25. MOBILE STICKY BAR
════════════════════════════════════════════════════════════════ */
.mob-sticky {
background: linear-gradient(90deg, #0e030e 0%, #120812 100%) !important;
border-top: 1px solid var(--pk2) !important;
box-shadow: 0 -4px 20px rgba(212,104,138,.10) !important;
}
/* ════════════════════════════════════════════════════════════════
26. SCROLL PROGRESS BAR
════════════════════════════════════════════════════════════════ */
#progress-bar, .progress-bar {
background: linear-gradient(90deg, var(--pk), var(--gd), var(--pk)) !important;
box-shadow: var(--neon-sm) !important;
}
/* ════════════════════════════════════════════════════════════════
27. NAVIGATION / HEADER
════════════════════════════════════════════════════════════════ */
header, nav, .nav, .header {
background: rgba(8,2,8,.85) !important;
border-bottom: 1px solid rgba(212,104,138,.08) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
}
.nav-logo, .logo {
filter: drop-shadow(0 0 8px rgba(212,104,138,.3));
}
/* ════════════════════════════════════════════════════════════════
28. PRELOADER
════════════════════════════════════════════════════════════════ */
.preloader, #preloader {
background: #060106;
}
/* ════════════════════════════════════════════════════════════════
29. SECTION TITLE GLOBAL
════════════════════════════════════════════════════════════════ */
.stitle {
font-family: var(--fd-serif);
font-size: clamp(28px, 4.5vw, 52px);
font-weight: 700;
line-height: 1.15;
letter-spacing: -.01em;
}
.stitle em {
font-style: italic;
color: var(--pk);
text-shadow: var(--neon);
font-weight: 400;
}
/* ════════════════════════════════════════════════════════════════
30. URGENCY / SLOTS BAR
════════════════════════════════════════════════════════════════ */
.urgency-bar, .slots-bar {
background: linear-gradient(90deg, rgba(212,104,138,.12) 0%, rgba(212,169,106,.08) 50%, rgba(212,104,138,.12) 100%) !important;
border: 1px solid var(--pk2) !important;
box-shadow: var(--neon-sm) !important;
}
/* ════════════════════════════════════════════════════════════════
31. MODAL OVERLAYS
════════════════════════════════════════════════════════════════ */
.modal-overlay, .svc-modal {
background: rgba(6,1,6,.92) !important;
backdrop-filter: blur(16px) !important;
}
.modal-box, .svc-modal-box {
background: linear-gradient(160deg, #0f030f 0%, #13081a 100%) !important;
border: 1px solid var(--pk2) !important;
border-radius: 24px !important;
box-shadow: var(--glass-shadow), 0 0 60px rgba(212,104,138,.10) !important;
}
/* ════════════════════════════════════════════════════════════════
32. AI CHATBOT BUTTON
════════════════════════════════════════════════════════════════ */
.chat-bubble, .ai-chat-btn, #ai-chat {
background: linear-gradient(135deg, #6d28d9, #4c1d95) !important;
box-shadow: 0 4px 20px rgba(109,40,217,.4) !important;
}
/* ════════════════════════════════════════════════════════════════
33. EXIT INTENT POPUP
════════════════════════════════════════════════════════════════ */
.exit-popup, #exit-popup {
background: linear-gradient(160deg, #0e030e 0%, #130813 100%) !important;
border: 1px solid var(--pk2) !important;
border-radius: 24px !important;
box-shadow: 0 20px 80px rgba(0,0,0,.8), 0 0 40px rgba(212,104,138,.12) !important;
}
/* ════════════════════════════════════════════════════════════════
34. SECTION SEPARATORS (decorative gradient lines)
════════════════════════════════════════════════════════════════ */
.feat::after,
.benefits::after,
.cmp-sec::after,
.ba-sec::after,
.about::after,
.reviews::after,
.gr-sec::after {
content: none; /* הסר אם כבר יש ::after */
}
/* מפרידים בין סקשנים */
.feat + .benefits,
.benefits + .cmp-sec,
.cmp-sec + .ba-sec,
.ba-sec + .svc-sec,
.svc-sec + .about,
.about + .vid-sec,
.vid-sec + .reviews,
.reviews + .insta-sec,
.insta-sec + .faq-sec,
.faq-sec + .quiz-sec,
.quiz-sec + .leads-sec,
.leads-sec + .loc-sec,
.loc-sec + .gr-sec,
.gr-sec + .blog-home-sec {
position: relative;
}
/* ════════════════════════════════════════════════════════════════
35. RESPONSIVE TWEAKS
════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
:root {
--checker-size: 20px;
--checker-color: rgba(212,104,138,.04);
}
.stitle {
font-size: clamp(24px, 6vw, 36px);
}
.ben-card {
padding: 20px 16px;
}
.leads-form {
padding: 24px 20px;
}
.rvc { min-width: 260px; }
}
@media (max-width: 480px) {
.btn-pk, .btn-gd {
font-size: 14px;
padding: 13px 20px;
}
}
/* ════════════════════════════════════════════════════════════════
36. SAKURA PETAL INJECTOR — מתווסף על ידי JS בסוף הדף
(ראי הוראות בקובץ premium-upgrade-init.js)
════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════
37. HERO PHOTO REDESIGN — SPLIT LAYOUT
תמונת רקע: hero-bg.jpg.jpeg (סלון רחב)
פורטרט: juliet-boss.jpg.jpeg (חליפה שחורה)
════════════════════════════════════════════════════════════════ */
/* רקע: הסלון הרחב — מוגבר */
.hv {
opacity: 0.45 !important;
object-position: center 25%;
}
/* Overlay: כהה מימין (טקסט RTL), קל משמאל (תמונה) */
.ho {
background:
linear-gradient(to left,
rgba(8,8,8,0) 0%,
rgba(8,8,8,.15) 35%,
rgba(8,8,8,.78) 62%,
rgba(8,8,8,.97) 100%
),
linear-gradient(to bottom,
rgba(8,8,8,.55) 0%,
rgba(8,8,8,.0) 18%,
rgba(8,8,8,.0) 72%,
rgba(8,8,8,.96) 100%
) !important;
}
/* פורטרט: ג'ולייט בוס — פאנל שמאלי */
.hero::after {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 46%;
background: url('juliet-boss.jpg.jpeg') center top / cover no-repeat;
z-index: 1;
-webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,.95) 55%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,.95) 55%, rgba(0,0,0,0) 100%);
pointer-events: none;
}
/* Hero: דחוף טקסט לצד ימין (RTL flex-start = ימין ויזואלי) */
.hero {
justify-content: flex-start !important;
}
/* תוכן: ימין ויזואלי, מקסימום רוחב 560px */
.hc {
z-index: 3 !important;
text-align: right !important;
max-width: 560px !important;
margin-left: auto !important;
margin-right: 0 !important;
padding: 120px 56px 80px 32px !important;
}
/* כפתורים: ישור לאחד הצד */
.hbtns {
justify-content: flex-start !important;
}
.hero-mini-review,
.hero-trust {
justify-content: flex-start !important;
}
/* מובייל: פורטרט מעל, טקסט מתחת */
@media (max-width: 900px) {
.hero::after {
width: 100%;
height: 52vh;
bottom: auto;
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,.8) 70%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,.8) 70%, rgba(0,0,0,0) 100%);
}
.hero {
justify-content: center !important;
}
.hc {
text-align: center !important;
max-width: 100% !important;
margin: 0 auto !important;
padding: 54vh 20px 60px !important;
}
.hbtns,
.hero-mini-review,
.hero-trust {
justify-content: center !important;
}
}
/* About — תמונה חדשה: שמלה לבנה + מראות ברוק */
.about-img img {
object-position: center top;
border-radius: 20px !important;
filter: brightness(1.04) contrast(1.02) saturate(1.05);
}
/* ════════════════════════════════════════════════════════════════
38. Y2K PINK BOSS BABE — HERO FULL REDESIGN
════════════════════════════════════════════════════════════════ */
/* טוקנים חדשים */
:root {
--hot-pink: #FF1C7A;
--boss-pink: #D4688A;
--candy-pink: #FF70A6;
--fd-bebas: 'Bebas Neue', 'Impact', sans-serif;
--fd-script: 'Pacifico', 'Dancing Script', cursive;
}
/* ── Hero: רקע ורוד חם ── */
.hero {
background: linear-gradient(140deg, #C4004E 0%, #D4688A 45%, #FF70A6 100%) !important;
justify-content: flex-start !important;
}
/* ── Overlay: זברה + fade לטקסט ── */
.ho {
background:
repeating-linear-gradient(
-38deg,
transparent 0px,
transparent 22px,
rgba(255,255,255,.07) 22px,
rgba(255,255,255,.07) 40px
),
linear-gradient(to left,
rgba(0,0,0,.0) 0%,
rgba(0,0,0,.12) 32%,
rgba(0,0,0,.68) 64%,
rgba(0,0,0,.88) 100%
),
linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 28%) !important;
}
/* ── תמונת רקע: הסלון — מינורית, הורוד שולט ── */
.hv {
opacity: 0.18 !important;
mix-blend-mode: luminosity;
object-position: center 25%;
}
/* ── פורטרט: מוגבר על רקע ורוד ── */
.hero::after {
background: url('juliet-boss.jpg.jpeg') center top / cover no-repeat;
-webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,.95) 52%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,.95) 52%, rgba(0,0,0,0) 100%);
}
/* ── כותרת ראשית: Bebas Neue ── */
.hero h1 {
font-family: var(--fd-bebas) !important;
font-size: clamp(42px, 6.5vw, 88px) !important;
font-weight: 400 !important;
letter-spacing: .03em !important;
line-height: .95 !important;
text-transform: uppercase;
}
.hero h1 em {
font-family: var(--fd-script) !important;
font-style: normal !important;
font-size: clamp(32px, 5vw, 68px) !important;
color: #fff !important;
text-shadow: 3px 3px 0 rgba(0,0,0,.25), 0 0 30px rgba(255,255,255,.3) !important;
display: block;
letter-spacing: .01em;
}
/* ── Eyebrow tag: סטיקר שחור ── */
.hero .hey {
background: #000;
color: var(--candy-pink) !important;
display: inline-block;
padding: 5px 16px;
border-radius: 20px;
font-size: 10px;
letter-spacing: 3px;
}
/* ── כפתור WhatsApp: פיל שחור Y2K ── */
.hero .btn-pk {
background: #000 !important;
border-color: #000 !important;
border-radius: 50px !important;
box-shadow: 4px 4px 0 rgba(255,255,255,.35) !important;
font-weight: 800 !important;
font-size: 13px !important;
letter-spacing: .04em !important;
}@media (hover:hover) and (pointer:fine){
.hero .btn-pk:hover{
transform: translate(-2px,-2px) !important;
box-shadow: 6px 6px 0 rgba(255,255,255,.4) !important;
}
}
/* ── כפתור ghost: מסגרת לבנה עגולה ── */
.hero .btn-ghost {
border: 2px solid rgba(255,255,255,.85) !important;
border-radius: 50px !important;
color: #fff !important;
font-weight: 700 !important;
}
/* ── Trust items: סטיקרים שקופים ── */
.hero .trust-item {
background: rgba(0,0,0,.28) !important;
border: 1px solid rgba(255,255,255,.4) !important;
color: #fff !important;
border-radius: 20px !important;
font-weight: 600;
}
/* ── Hero sub text ── */
.hero .hsub {
color: rgba(255,255,255,.9) !important;
}
.hero .hmr-text { color: #fff !important; }
.hero .hmr-name { color: rgba(255,255,255,.7) !important; }
/* ── Prism overlay: מוסתר (ורוד שולט) ── */
.hero-prism { display: none; }
/* ── TICKER: שחור עם ורוד ── */
.ticker {
background: #000 !important;
border-top: 2px solid var(--hot-pink) !important;
border-bottom: 2px solid var(--hot-pink) !important;
}
.ticker::before { display: none; }
.ti {
color: var(--candy-pink) !important;
letter-spacing: 3px;
}
/* ── STATS: ורוד + שחור ── */
.stats {
background: linear-gradient(135deg, #C4004E 0%, #D4688A 100%) !important;
border: none !important;
position: relative;
}
.stats::after {
background-image:
repeating-linear-gradient(
-38deg,
transparent 0px,
transparent 18px,
rgba(255,255,255,.06) 18px,
rgba(255,255,255,.06) 32px
) !important;
background-size: auto !important;
background-position: 0 0 !important;
}
.stat {
background: rgba(0,0,0,.2) !important;
border: 1px solid rgba(255,255,255,.25) !important;
border-radius: 16px !important;
}@media (hover:hover) and (pointer:fine){
.stat:hover{
background: rgba(0,0,0,.32) !important;
border-color: rgba(255,255,255,.5) !important;
}
}
.snum {
font-family: var(--fd-bebas) !important;
font-size: clamp(40px, 5.5vw, 66px) !important;
color: #fff !important;
text-shadow: 3px 3px 0 rgba(0,0,0,.3) !important;
}
.slbl {
color: rgba(255,255,255,.88) !important;
letter-spacing: .12em;
}
/* ── NAV על רקע ורוד: לוגו ורוד מוכהה ── */
.nlogo .dot { color: #fff; }
nav.s { background: rgba(196,0,78,.92) !important; }
/* ── מובייל: hero ── */
@media (max-width: 900px) {
.hero h1 {
font-size: clamp(36px, 8vw, 58px) !important;
}
.hero h1 em {
font-size: clamp(28px, 7vw, 48px) !important;
}
}
/* ════════════════════════════════════════════════════════════════
39. CUSTOM PINK CURSOR
════════════════════════════════════════════════════════════════ */
*, *::before, *::after { cursor: none !important; }
#jb-cursor-outer,
#jb-cursor-inner {
position: fixed;
border-radius: 50%;
pointer-events: none;
z-index: 999999;
transform: translate(-50%, -50%);
transition-timing-function: ease-out;
will-change: transform;
}
#jb-cursor-outer {
width: 36px;
height: 36px;
border: 2px solid rgba(255,28,122,.7);
box-shadow: 0 0 12px rgba(255,28,122,.5), 0 0 28px rgba(255,28,122,.2);
transition: width .25s, height .25s, border-color .25s, opacity .25s;
background: transparent;
}
#jb-cursor-inner {
width: 8px;
height: 8px;
background: #FF1C7A;
box-shadow: 0 0 8px rgba(255,28,122,1), 0 0 20px rgba(255,28,122,.6);
transition: width .12s, height .12s;
}
body.cursor-hover #jb-cursor-outer {
width: 52px;
height: 52px;
border-color: rgba(255,28,122,1);
background: rgba(255,28,122,.08);
}
body.cursor-hover #jb-cursor-inner {
width: 5px;
height: 5px;
}
body.cursor-click #jb-cursor-inner {
width: 14px;
height: 14px;
}
/* ════════════════════════════════════════════════════════════════
40. SCROLL REVEAL ANIMATIONS
════════════════════════════════════════════════════════════════ */
.jb-reveal {
opacity: 0;
transform: translateY(36px);
transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1);
}
.jb-reveal.jb-visible {
opacity: 1;
transform: translateY(0);
}
.jb-reveal-left {
opacity: 0;
transform: translateX(-40px);
transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1);
}
.jb-reveal-left.jb-visible {
opacity: 1;
transform: translateX(0);
}
.jb-reveal-scale {
opacity: 0;
transform: scale(.92);
transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
.jb-reveal-scale.jb-visible {
opacity: 1;
transform: scale(1);
}
/* stagger delay helpers */
.jb-d1 { transition-delay: .08s !important; }
.jb-d2 { transition-delay: .16s !important; }
.jb-d3 { transition-delay: .24s !important; }
.jb-d4 { transition-delay: .32s !important; }
.jb-d5 { transition-delay: .40s !important; }
/* ════════════════════════════════════════════════════════════════
41. Y2K SERVICE CARDS UPGRADE
════════════════════════════════════════════════════════════════ */
/* כרטיסי שירותים — גרסת boss babe */
.srv-card,
.service-card,
.treat-card,
.price-card,
[class*="card"]:not(.about-card):not(.rev-card) {
background: rgba(255,255,255,.04) !important;
border: 1.5px solid rgba(255,28,122,.25) !important;
border-radius: 20px !important;
position: relative;
overflow: hidden;
transition: transform .3s cubic-bezier(.22,1,.36,1),
box-shadow .3s cubic-bezier(.22,1,.36,1),
border-color .3s !important;
}
/* zebra shimmer inside card */
.srv-card::before,
.service-card::before,
.treat-card::before,
.price-card::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
-42deg,
transparent 0px,
transparent 18px,
rgba(255,28,122,.04) 18px,
rgba(255,28,122,.04) 30px
);
pointer-events: none;
z-index: 0;
}
/* pink glow top border */
.srv-card::after,
.service-card::after,
.treat-card::after,
.price-card::after {
content: '';
position: absolute;
top: 0; left: 10%; right: 10%;
height: 2px;
background: linear-gradient(90deg, transparent, #FF1C7A, transparent);
border-radius: 2px;
opacity: 0;
transition: opacity .3s;
}@media (hover:hover) and (pointer:fine){
.srv-card:hover, .service-card:hover, .treat-card:hover, .price-card:hover{
transform: translateY(-8px) !important;
box-shadow: 0 20px 50px rgba(255,28,122,.22), 0 4px 12px rgba(0,0,0,.4) !important;
border-color: rgba(255,28,122,.6) !important;
}
}@media (hover:hover) and (pointer:fine){
.srv-card:hover::after, .service-card:hover::after, .treat-card:hover::after, .price-card:hover::after{
opacity: 1;
}
}
/* כרטיס ביקורות */
.rev-card {
border: 1.5px solid rgba(255,28,122,.18) !important;
border-radius: 18px !important;
transition: transform .3s, box-shadow .3s, border-color .3s !important;
}@media (hover:hover) and (pointer:fine){
.rev-card:hover{
transform: translateY(-5px) !important;
border-color: rgba(255,28,122,.45) !important;
box-shadow: 0 14px 36px rgba(255,28,122,.18) !important;
}
}
/* כותרות סקשן — Y2K upgrade */
.stitle,
.sec-title,
[class*="sec"] > h2 {
font-family: var(--fd-bebas) !important;
font-size: clamp(36px, 5vw, 64px) !important;
letter-spacing: .04em !important;
font-weight: 400 !important;
}
/* ════════════════════════════════════════════════════════════════
42. HERO HEADLINE — FINAL VERSION
════════════════════════════════════════════════════════════════ */
/* Brand tag עליון */
.jb-brand-tag {
font-family: 'Cinzel Decorative', 'Cinzel', serif !important;
font-size: 13px !important;
letter-spacing: .22em !important;
color: rgba(255,112,166,.75) !important;
background: transparent !important;
border-radius: 0 !important;
padding: 0 !important;
display: block !important;
margin-bottom: 14px !important;
}
/* פתיחה: "לא מגיעות לנו פשרות." */
.jb-preline {
font-family: 'Bodoni Moda', 'Georgia', serif !important;
font-size: 14px !important;
font-style: italic !important;
font-weight: 700 !important;
color: rgba(255,112,166,.55) !important;
letter-spacing: .18em !important;
margin: 0 0 12px !important;
}
/* כותרת ראשית */
.hero h1 {
font-family: 'Bodoni Moda', 'Georgia', serif !important;
font-size: clamp(30px, 4.5vw, 52px) !important;
font-weight: 900 !important;
letter-spacing: -.02em !important;
line-height: 1.05 !important;
text-transform: none !important;
color: #fff !important;
margin-bottom: 12px !important;
}
.hero h1 em {
font-family: 'Bodoni Moda', 'Georgia', serif !important;
font-style: italic !important;
font-weight: 400 !important;
font-size: clamp(26px, 4vw, 46px) !important;
color: #FF70A6 !important;
display: block !important;
margin-top: 4px !important;
text-shadow: none !important;
}
/* "פה לא רק עושים שיער. פה בונים ביטחון." */
.jb-support {
font-family: 'Bodoni Moda', 'Georgia', serif !important;
font-size: clamp(15px, 2vw, 20px) !important;
font-weight: 700 !important;
color: rgba(255,255,255,.65) !important;
letter-spacing: .01em !important;
margin: 0 0 10px !important;
}
/* "כי מגיע לך בוטיק שמכיר אותך." */
.jb-sub-cinzel {
font-family: 'Cinzel', serif !important;
font-size: 11px !important;
letter-spacing: .2em !important;
color: rgba(255,255,255,.28) !important;
text-transform: uppercase !important;
margin: 0 0 20px !important;
}
/* מובייל */
@media (max-width: 900px) {
.jb-brand-tag { font-size: 10px !important; }
.hero h1 { font-size: clamp(26px, 7vw, 38px) !important; }
.hero h1 em { font-size: clamp(22px, 6vw, 32px) !important; }
.jb-support { font-size: 14px !important; }
}
/* ════════════════════════════════════════════════════════════════
43. HERO TEXT CONTRAST FIX
════════════════════════════════════════════════════════════════ */
/* Em — לבן עם צל כהה כדי לבלוט על הרקע הורוד */
.hero h1 em {
color: #fff !important;
font-style: italic !important;
text-shadow:
2px 2px 0 rgba(0,0,0,.45),
0 0 30px rgba(0,0,0,.3) !important;
display: block !important;
}
/* קו תחתון ורוד כהה מתחת ל-em — במקום צבע ורוד בהיר */
.hero h1 em::after {
content: '';
display: block;
width: 80px;
height: 2px;
background: rgba(255,255,255,.5);
margin-top: 8px;
border-radius: 2px;
}
/* פתיחה — לבן עם opacity */
.jb-preline {
color: rgba(255,255,255,.7) !important;
text-shadow: 1px 1px 4px rgba(0,0,0,.4) !important;
}
/* תמיכה — לבן ברור */
.jb-support {
color: rgba(255,255,255,.9) !important;
text-shadow: 1px 1px 6px rgba(0,0,0,.4) !important;
}
/* Cinzel קטן — לבן עם opacity */
.jb-sub-cinzel {
color: rgba(255,255,255,.5) !important;
text-shadow: none !important;
}
/* Brand tag — לבן עדין */
.jb-brand-tag {
color: rgba(255,255,255,.6) !important;
text-shadow: 1px 1px 4px rgba(0,0,0,.3) !important;
}
/* H1 ראשי — ברור לגמרי */
.hero h1 {
color: #fff !important;
text-shadow: 2px 2px 8px rgba(0,0,0,.35) !important;
}
/* hsub ו-hero-typed */
.hero .hsub,
.hero .hero-typed {
color: rgba(255,255,255,.85) !important;
text-shadow: 1px 1px 4px rgba(0,0,0,.3) !important;
}
/* trust items — לבן ברור */
.hero .trust-item {
color: #fff !important;
text-shadow: 1px 1px 3px rgba(0,0,0,.3) !important;
}
/* mini review */
.hero .hmr-text,
.hero .hmr-name {
color: rgba(255,255,255,.9) !important;
text-shadow: 1px 1px 3px rgba(0,0,0,.3) !important;
}
/* ════════════════════════════════════════════════════════════════
44. AURORA HERO BACKGROUND
════════════════════════════════════════════════════════════════ */
@keyframes aurora1 {
0%,100% { transform: translate(0,0) scale(1); }
33% { transform: translate(40px,-30px) scale(1.08); }
66% { transform: translate(-20px,20px) scale(.95); }
}
@keyframes aurora2 {
0%,100% { transform: translate(0,0) scale(1); }
40% { transform: translate(-50px,30px) scale(1.1); }
80% { transform: translate(30px,-20px) scale(.92); }
}
@keyframes aurora3 {
0%,100% { transform: translate(0,0) scale(1); }
50% { transform: translate(20px,40px) scale(1.06); }
}
.jb-aurora {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.jb-aurora span {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: .55;
}
.jb-aurora span:nth-child(1) {
width: 600px; height: 600px;
background: radial-gradient(circle, #ff1c7a 0%, transparent 70%);
top: -100px; right: -100px;
animation: aurora1 8s ease-in-out infinite;
}
.jb-aurora span:nth-child(2) {
width: 500px; height: 500px;
background: radial-gradient(circle, #c4004e 0%, transparent 70%);
bottom: -80px; left: 20%;
animation: aurora2 11s ease-in-out infinite;
}
.jb-aurora span:nth-child(3) {
width: 400px; height: 400px;
background: radial-gradient(circle, #ff70a6 0%, transparent 70%);
top: 30%; right: 30%;
animation: aurora3 9s ease-in-out infinite;
}
/* ════════════════════════════════════════════════════════════════
45. GLITCH TITLE EFFECT
════════════════════════════════════════════════════════════════ */
@keyframes glitch-clip {
0%,95%,100% { clip-path: inset(0 0 100% 0); transform: translate(0); opacity:0; }
96% { clip-path: inset(20% 0 60% 0); transform: translate(-4px,1px); opacity:1; }
97% { clip-path: inset(60% 0 10% 0); transform: translate(4px,-1px); opacity:1; }
98% { clip-path: inset(40% 0 30% 0); transform: translate(-2px,2px); opacity:1; }
99% { clip-path: inset(0 0 80% 0); transform: translate(2px,-1px); opacity:1; }
}
@keyframes glitch-clip2 {
0%,95%,100% { clip-path: inset(0 0 100% 0); transform: translate(0); opacity:0; }
96% { clip-path: inset(50% 0 20% 0); transform: translate(5px,-2px); opacity:1; }
97% { clip-path: inset(10% 0 70% 0); transform: translate(-5px,2px); opacity:1; }
98% { clip-path: inset(70% 0 5% 0); transform: translate(3px,-1px); opacity:1; }
99% { clip-path: inset(30% 0 40% 0); transform: translate(-3px,2px); opacity:1; }
}
.hero h1 { position: relative; }
.hero h1::before,
.hero h1::after {
content: attr(data-text);
position: absolute;
inset: 0;
pointer-events: none;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
color: #fff;
}
.hero h1::before {
color: #ff70a6;
animation: glitch-clip 7s linear infinite;
}
.hero h1::after {
color: #ff1c7a;
animation: glitch-clip2 7s linear infinite .15s;
}
/* ════════════════════════════════════════════════════════════════
46. FILM GRAIN LUXURY OVERLAY
════════════════════════════════════════════════════════════════ */
@keyframes grain {
0%,100% { transform: translate(0,0); }
10% { transform: translate(-2%,-3%); }
20% { transform: translate(3%,2%); }
30% { transform: translate(-1%,4%); }
40% { transform: translate(4%,-1%); }
50% { transform: translate(-3%,1%); }
60% { transform: translate(2%,3%); }
70% { transform: translate(-4%,-2%); }
80% { transform: translate(1%,-4%); }
90% { transform: translate(3%,1%); }
}
#jb-grain {
position: fixed;
inset: -50%;
width: 200%;
height: 200%;
pointer-events: none;
z-index: 99998;
opacity: .028;
animation: grain .08s steps(1) infinite;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
background-size: 300px 300px;
}
/* ════════════════════════════════════════════════════════════════
47. 3D TILT CARDS + SHEEN
════════════════════════════════════════════════════════════════ */
.jb-tilt {
transform-style: preserve-3d;
transition: transform .1s ease-out, box-shadow .3s !important;
will-change: transform;
}@media (hover:hover) and (pointer:fine){
.jb-tilt:hover{
box-shadow: 0 24px 60px rgba(255,28,122,.25), 0 4px 12px rgba(0,0,0,.4) !important;
}
}
.jb-sheen {
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.18) 0%, transparent 60%);
opacity: 0;
transition: opacity .3s;
z-index: 10;
}@media (hover:hover) and (pointer:fine){
.jb-tilt:hover .jb-sheen{ opacity: 1; }
}
/* ════════════════════════════════════════════════════════════════
48. BRANDED PAGE LOADER
════════════════════════════════════════════════════════════════ */
#jb-loader {
position: fixed;
inset: 0;
background: #080008;
z-index: 999999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: opacity .6s ease, visibility .6s ease;
}
#jb-loader.hide {
opacity: 0;
visibility: hidden;
}
#jb-loader-brand {
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-size: clamp(22px, 4vw, 38px);
color: #fff;
letter-spacing: .12em;
overflow: hidden;
white-space: nowrap;
border-right: 2px solid #FF1C7A;
animation: jb-type 1.4s steps(22) forwards, jb-blink .6s step-end infinite;
width: 0;
}
#jb-loader-sub {
font-family: 'Cinzel', serif;
font-size: 11px;
letter-spacing: .3em;
color: rgba(255,112,166,.6);
text-transform: uppercase;
margin-top: 12px;
opacity: 0;
animation: jb-fadein .6s ease 1.6s forwards;
}
#jb-loader-bar {
width: 160px;
height: 1px;
background: rgba(255,28,122,.2);
margin-top: 28px;
border-radius: 1px;
overflow: hidden;
opacity: 0;
animation: jb-fadein .4s ease 1.5s forwards;
}
#jb-loader-bar-fill {
height: 100%;
background: linear-gradient(90deg, #FF1C7A, #ff70a6);
border-radius: 1px;
animation: jb-load 1s ease 1.5s forwards;
width: 0;
}
@keyframes jb-type { to { width: 22ch; } }
@keyframes jb-blink { 50% { border-color: transparent; } }
@keyframes jb-fadein { to { opacity: 1; } }
@keyframes jb-load { to { width: 100%; } }
/* ════════════════════════════════════════════════════════════════
49. SPARKLE TRAIL
════════════════════════════════════════════════════════════════ */
.jb-spark {
position: fixed;
pointer-events: none;
z-index: 999997;
border-radius: 50%;
transform: translate(-50%, -50%) scale(1);
animation: jb-spark-out .6s ease-out forwards;
}
@keyframes jb-spark-out {
0% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0); }
}
/* ════════════════════════════════════════════════════════════════
50. NEON FLOW BORDER
════════════════════════════════════════════════════════════════ */
@property --angle {
syntax: '';
initial-value: 0deg;
inherits: false;
}
@keyframes jb-flow { to { --angle: 360deg; } }
.jb-neon-flow {
position: relative;
}
.jb-neon-flow::before {
content: '';
position: absolute;
inset: -1.5px;
border-radius: inherit;
background: conic-gradient(from var(--angle), transparent 70%, #FF1C7A 85%, #ff70a6 90%, transparent 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
padding: 1.5px;
opacity: 0;
transition: opacity .3s;
animation: jb-flow 2s linear infinite;
z-index: 5;
pointer-events: none;
}@media (hover:hover) and (pointer:fine){
.jb-neon-flow:hover::before{ opacity: 1; }
}
/* ════════════════════════════════════════════════════════════════
51. PARALLAX ELEMENTS
════════════════════════════════════════════════════════════════ */
.jb-parallax { will-change: transform; transition: transform .05s linear; }
/* ════════════════════════════════════════════════════════════════
52. LIQUID GLASS HEADER
════════════════════════════════════════════════════════════════ */
.site-header, header, .header, nav.main-nav, .navbar {
transition: background 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease !important;
}
.jb-header-glass {
background: rgba(255,255,255,0.08) !important;
backdrop-filter: blur(20px) saturate(180%) !important;
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
box-shadow: 0 4px 32px rgba(212,104,138,0.18), 0 1px 0 rgba(255,255,255,0.15) inset !important;
border-bottom: 1px solid rgba(255,255,255,0.12) !important;
}
/* ════════════════════════════════════════════════════════════════
53. MOUSE AURORA — רקע hero חי שעוקב אחרי הסמן
════════════════════════════════════════════════════════════════ */
.hero { --mx: 50%; --my: 50%; }
.jb-mouse-aurora {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
background:
radial-gradient(600px circle at var(--mx) var(--my), rgba(255,112,166,0.22) 0%, transparent 60%),
radial-gradient(400px circle at calc(100% - var(--mx)) calc(100% - var(--my)), rgba(192,0,106,0.15) 0%, transparent 55%);
transition: background 0.08s linear;
}
/* ════════════════════════════════════════════════════════════════
54. HOLOGRAPHIC CARD SHIMMER
════════════════════════════════════════════════════════════════ */
.jb-holo {
position: relative;
overflow: hidden;
transform-style: preserve-3d;
}
.jb-holo::after {
content: '';
position: absolute;
inset: 0;
background: conic-gradient(from var(--holo-angle,0deg) at var(--holo-x,50%) var(--holo-y,50%),
rgba(255,0,128,0.18), rgba(255,200,0,0.14), rgba(0,255,200,0.14),
rgba(0,128,255,0.18), rgba(128,0,255,0.14), rgba(255,0,128,0.18));
mix-blend-mode: color-dodge;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
border-radius: inherit;
}@media (hover:hover) and (pointer:fine){
.jb-holo:hover::after{ opacity: 1; }
}
/* ════════════════════════════════════════════════════════════════
55. LUXURY MARQUEE BAND
════════════════════════════════════════════════════════════════ */
#jb-marquee {
overflow: hidden;
background: linear-gradient(90deg, #1a0010 0%, #2d0018 50%, #1a0010 100%);
padding: 14px 0;
border-top: 1px solid rgba(212,104,138,0.3);
border-bottom: 1px solid rgba(212,104,138,0.3);
white-space: nowrap;
position: relative;
z-index: 10;
}
#jb-marquee-inner {
display: inline-flex;
gap: 0;
animation: jb-marquee-scroll 28s linear infinite;
will-change: transform;
}
#jb-marquee-inner span {
font-family: 'Cinzel', serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.22em;
color: rgba(255,200,220,0.9);
text-transform: uppercase;
padding: 0 2.5rem;
}
#jb-marquee-inner span.sep {
color: #D4688A;
padding: 0 0.5rem;
font-size: 14px;
}
@keyframes jb-marquee-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* ════════════════════════════════════════════════════════════════
56. BEFORE / AFTER SLIDER
════════════════════════════════════════════════════════════════ */
#jb-ba-section {
padding: 5rem 1.5rem;
background: linear-gradient(180deg, #fff 0%, #fff0f5 100%);
text-align: center;
}
#jb-ba-section .jb-ba-title {
font-family: 'Cinzel Decorative', serif;
font-size: clamp(1.4rem, 3.5vw, 2.2rem);
color: #1a0010;
margin-bottom: 0.5rem;
}
#jb-ba-section .jb-ba-sub {
font-family: 'Cormorant Garamond', serif;
font-size: 1.1rem;
color: #888;
margin-bottom: 2.5rem;
}
.jb-ba-wrap {
position: relative;
width: min(640px, 94vw);
height: clamp(280px, 45vw, 420px);
margin: 0 auto;
border-radius: 18px;
overflow: hidden;
cursor: col-resize;
user-select: none;
box-shadow: 0 20px 60px rgba(212,104,138,0.18);
}
.jb-ba-before, .jb-ba-after {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
}
.jb-ba-before { z-index: 1; }
.jb-ba-after {
z-index: 2;
clip-path: inset(0 50% 0 0);
transition: clip-path 0.05s linear;
}
.jb-ba-handle {
position: absolute;
top: 0; bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 3px;
background: #fff;
z-index: 3;
transition: left 0.05s linear;
}
.jb-ba-handle::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: #D4688A;
border: 3px solid #fff;
box-shadow: 0 4px 18px rgba(212,104,138,0.5);
display: flex;
align-items: center;
justify-content: center;
}
.jb-ba-handle::after {
content: '◀ ▶';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #fff;
font-size: 10px;
letter-spacing: -1px;
pointer-events: none;
}
.jb-ba-label {
position: absolute;
bottom: 14px;
font-family: 'Cinzel', serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.15em;
color: #fff;
background: rgba(0,0,0,0.45);
padding: 4px 12px;
border-radius: 999px;
z-index: 4;
text-transform: uppercase;
}
.jb-ba-label.before { right: 14px; }
.jb-ba-label.after { left: 14px; }
/* ════════════════════════════════════════════════════════════════
57. RIPPLE CLICK EFFECT
════════════════════════════════════════════════════════════════ */
.jb-ripple {
position: fixed;
border-radius: 50%;
width: 8px;
height: 8px;
background: rgba(212,104,138,0.45);
pointer-events: none;
transform: translate(-50%,-50%) scale(0);
animation: jb-ripple-anim 0.7s ease-out forwards;
z-index: 99999;
}
@keyframes jb-ripple-anim {
0% { transform: translate(-50%,-50%) scale(0); opacity: 1; }
100% { transform: translate(-50%,-50%) scale(18); opacity: 0; }
}
/* ════════════════════════════════════════════════════════════════
58. FLOATING PETALS — canvas
════════════════════════════════════════════════════════════════ */
#jb-petals-canvas {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: 0.55;
}
/* ════════════════════════════════════════════════════════════════
59. PAGE TRANSITION OVERLAY
════════════════════════════════════════════════════════════════ */
#jb-page-transition {
position: fixed;
inset: 0;
background: linear-gradient(135deg, #D4688A 0%, #FF70A6 50%, #c0006a 100%);
z-index: 999999;
transform: scaleY(0);
transform-origin: bottom;
pointer-events: none;
}
#jb-page-transition.jb-pt-out {
animation: jb-pt-slide-out 0.5s cubic-bezier(0.76,0,0.24,1) forwards;
}
#jb-page-transition.jb-pt-in {
animation: jb-pt-slide-in 0.5s cubic-bezier(0.76,0,0.24,1) forwards;
}
@keyframes jb-pt-slide-out {
0% { transform: scaleY(0); transform-origin: bottom; }
100% { transform: scaleY(1); transform-origin: bottom; }
}
@keyframes jb-pt-slide-in {
0% { transform: scaleY(1); transform-origin: top; }
100% { transform: scaleY(0); transform-origin: top; }
}
/* ════════════════════════════════════════════════════════════════
60. MASONRY GALLERY HOVER
════════════════════════════════════════════════════════════════ */
.jb-masonry-item {
position: relative;
overflow: hidden;
border-radius: 12px;
break-inside: avoid;
margin-bottom: 12px;
}
.jb-masonry-item img {
width: 100%;
display: block;
transition: transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94);
}@media (hover:hover) and (pointer:fine){
.jb-masonry-item:hover img{ transform: scale(1.06); }
}
.jb-masonry-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(26,0,16,0.7) 0%, transparent 50%);
opacity: 0;
transition: opacity 0.35s ease;
display: flex;
align-items: flex-end;
padding: 1rem;
}@media (hover:hover) and (pointer:fine){
.jb-masonry-item:hover .jb-masonry-overlay{ opacity: 1; }
}
.jb-masonry-overlay span {
font-family: 'Cinzel', serif;
font-size: 12px;
color: #fff;
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* ════════════════════════════════════════════════════════════════
61. GRADIENT TEXT SWEEP
════════════════════════════════════════════════════════════════ */
.jb-gradient-text {
background: linear-gradient(90deg, #D4688A 0%, #FF70A6 40%, #fff 60%, #D4688A 100%);
background-size: 250% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: jb-grad-sweep 4s linear infinite;
}
@keyframes jb-grad-sweep {
0% { background-position: 0% center; }
100% { background-position: 250% center; }
}
/* ════════════════════════════════════════════════════════════════
62. WHATSAPP FAB — קיים רק בבוטיק (shop.html יוצר #jb-whatsapp-fab ב-JS); הוסר 10.8.2026 מ-index.html כי היה כפילות מוחלטת של #waf-btn (ראו דוח תיקונים סבב 2). היה מוגדר פעמיים בקובץ הזה — אוחד לעותק אחד.
════════════════════════════════════════════════════════════════ */
#jb-whatsapp-fab {
position: fixed;
bottom: 2rem;
left: 2rem;
width: 60px;
height: 60px;
background: linear-gradient(135deg, #25D366, #128C7E);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 20px rgba(37,211,102,0.5);
cursor: pointer;
z-index: 9999;
text-decoration: none;
animation: jb-wa-pulse 2.5s ease-in-out infinite;
transition: transform 0.2s ease;
}@media (hover:hover) and (pointer:fine){
#jb-whatsapp-fab:hover{ transform: scale(1.12); }
}
#jb-whatsapp-fab svg { width: 32px; height: 32px; fill: #fff; }
@keyframes jb-wa-pulse {
0%,100% { box-shadow: 0 4px 20px rgba(37,211,102,0.5), 0 0 0 0 rgba(37,211,102,0.4); }
50% { box-shadow: 0 4px 20px rgba(37,211,102,0.5), 0 0 0 14px rgba(37,211,102,0); }
}
#jb-wa-tooltip {
position: absolute;
left: calc(100% + 12px);
bottom: 50%;
transform: translateY(50%);
background: #1a1a1a;
color: #fff;
font-family: 'Cinzel', serif;
font-size: 0.75rem;
white-space: nowrap;
padding: 6px 12px;
border-radius: 6px;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
}@media (hover:hover) and (pointer:fine){
#jb-whatsapp-fab:hover #jb-wa-tooltip{ opacity: 1; }
}
/* ════════════════════════════════════════════════════════════════
52. LIQUID GLASS HEADER — header הופך לגלס מורפיזם בגלילה
════════════════════════════════════════════════════════════════ */
.site-header, header, .header, nav.main-nav, .navbar {
transition: background 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease !important;
}
.jb-header-glass {
background: rgba(255,255,255,0.08) !important;
backdrop-filter: blur(20px) saturate(180%) !important;
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
box-shadow: 0 4px 32px rgba(212,104,138,0.18), 0 1px 0 rgba(255,255,255,0.15) inset !important;
border-bottom: 1px solid rgba(255,255,255,0.12) !important;
}
/* ════════════════════════════════════════════════════════════════
53. HOVER CARD FLIP — כרטיסי שירות עם הפיכה 3D
════════════════════════════════════════════════════════════════ */
.jb-flip-card {
perspective: 1000px;
cursor: pointer;
}
.jb-flip-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.65s cubic-bezier(0.4,0.2,0.2,1);
transform-style: preserve-3d;
}@media (hover:hover) and (pointer:fine){
.jb-flip-card:hover .jb-flip-inner{ transform: rotateY(180deg); }
}
.jb-flip-front, .jb-flip-back {
position: absolute;
inset: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
border-radius: inherit;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 1.5rem;
}
.jb-flip-back {
transform: rotateY(180deg);
background: linear-gradient(135deg, #D4688A 0%, #FF70A6 50%, #c0006a 100%);
color: #fff;
font-family: 'Cinzel', serif;
font-size: 1rem;
text-align: center;
line-height: 1.6;
}
/* ════════════════════════════════════════════════════════════════
54. FLOATING WHATSAPP BUTTON — הוסר 10.8.2026: כפילות מוחלטת של #waf-btn, ראו דוח תיקונים סבב 2
════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════
55. GRADIENT TEXT REVEAL — כותרות סקציה עם gradient שגולש
════════════════════════════════════════════════════════════════ */
.jb-gradient-text {
background: linear-gradient(90deg, #D4688A 0%, #FF70A6 40%, #fff 60%, #D4688A 100%);
background-size: 250% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: jb-grad-sweep 4s linear infinite;
}
@keyframes jb-grad-sweep {
0% { background-position: 0% center; }
100% { background-position: 250% center; }
}
/* ══════════════════════════════════════════════════════════════
70. STICKY BOOKING CTA — קיים רק בבוטיק (shop.html יוצר #jb-sticky-cta ב-JS); הוסר 10.8.2026 מ-index.html כי התנגש עם #waf-btn/Hero CTA (ראו דוח תיקונים סבב 2)
══════════════════════════════════════════════════════════════ */
#jb-sticky-cta{position:fixed;bottom:0;left:0;right:0;z-index:9000;display:flex;align-items:center;justify-content:center;gap:1rem;background:linear-gradient(90deg,#1a0010,#2d0018,#1a0010);border-top:1px solid rgba(212,104,138,0.4);padding:10px 1.5rem;transform:translateY(100%);transition:transform 0.4s cubic-bezier(0.16,1,0.3,1);}
#jb-sticky-cta.jb-sc-visible{transform:translateY(0);}
#jb-sticky-cta p{color:rgba(255,200,220,0.85);font-family:'Cinzel',serif;font-size:11px;letter-spacing:0.12em;margin:0;}
#jb-sticky-cta a{display:inline-flex;align-items:center;gap:8px;background:#D4688A;color:#fff;font-family:'Cinzel',serif;font-size:12px;font-weight:700;letter-spacing:0.08em;padding:9px 22px;border-radius:999px;text-decoration:none;white-space:nowrap;animation:jb-sc-pulse 2.8s ease-in-out infinite;}
@keyframes jb-sc-pulse{0%,100%{box-shadow:0 0 0 0 rgba(212,104,138,0.5)}50%{box-shadow:0 0 0 8px rgba(212,104,138,0)}}
#jb-sticky-close{background:none;border:none;color:rgba(255,200,220,0.5);font-size:22px;cursor:pointer;padding:4px 8px;line-height:1;}
/* ══════════════════════════════════════════════════════════════
71. TESTIMONIAL REVERSE TICKER
══════════════════════════════════════════════════════════════ */
#jb-rev-ticker{overflow:hidden;background:linear-gradient(90deg,#fff0f5,#fff,#fff0f5);padding:16px 0;border-top:1px solid rgba(212,104,138,0.12);border-bottom:1px solid rgba(212,104,138,0.12);}
#jb-rev-ticker-inner{display:inline-flex;animation:jb-rev-scroll 38s linear infinite;will-change:transform;}
@keyframes jb-rev-scroll{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}
.jb-rtick{display:inline-flex;align-items:center;gap:10px;padding:0 2rem;white-space:nowrap;}
.jb-rtick-stars{color:#D4688A;font-size:11px;letter-spacing:2px;}
.jb-rtick-text{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:14px;color:#4a1a2e;}
.jb-rtick-name{font-family:'Cinzel',serif;font-size:10px;letter-spacing:0.1em;color:#D4688A;}
/* ══════════════════════════════════════════════════════════════
73. HANDWRITING SIGNATURE
══════════════════════════════════════════════════════════════ */
#jb-signature-wrap{text-align:center;margin:1.5rem 0 0;}
#jb-signature-svg text{font-family:'Dancing Script',cursive;font-size:68px;font-weight:700;fill:none;stroke:#D4688A;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
#jb-sig-text{stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 2.4s cubic-bezier(0.4,0,0.2,1);}
#jb-signature-wrap.jb-sig-draw #jb-sig-text{stroke-dashoffset:0;}
/* ══════════════════════════════════════════════════════════════
74. PRICE CALCULATOR
══════════════════════════════════════════════════════════════ */
#jb-calc-btn{position:fixed;top:50%;left:0;transform:translateY(-50%) rotate(-90deg) translateX(-50%) translateY(-18px);transform-origin:left center;z-index:7000;background:#D4688A;color:#fff;font-family:'Cinzel',serif;font-size:10px;font-weight:700;letter-spacing:0.15em;padding:7px 16px;border:none;border-radius:0 0 8px 8px;cursor:pointer;white-space:nowrap;}
#jb-calc-overlay{position:fixed;inset:0;background:rgba(26,0,16,0.72);z-index:9500;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.3s;backdrop-filter:blur(4px);}
#jb-calc-overlay.open{opacity:1;pointer-events:all;}
#jb-calc-panel{background:#fff;border-radius:20px;padding:2rem;width:min(460px,92vw);max-height:88vh;overflow-y:auto;direction:rtl;text-align:right;position:relative;}
#jb-calc-panel h3{font-family:'Cinzel Decorative',serif;font-size:1rem;color:#1a0010;margin:0 0 0.2rem;}
#jb-calc-panel .sub{font-size:11px;color:#aaa;margin:0 0 1.2rem;font-family:'Cinzel',serif;letter-spacing:0.05em;}
.jb-cs{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid #f0d0de;border-radius:10px;margin-bottom:7px;cursor:pointer;transition:background 0.15s;}.jb-cs.on{background:#fff0f5;}
@media (hover:hover) and (pointer:fine){
.jb-cs:hover{background:#fff0f5;}
}.jb-cs.on{border-color:#D4688A;}
.jb-cs input{accent-color:#D4688A;width:16px;height:16px;flex-shrink:0;}
.jb-cs-name{flex:1;font-family:'Cormorant Garamond',serif;font-size:15px;color:#1a0010;}
.jb-cs-price{font-family:'Cinzel',serif;font-size:10px;color:#D4688A;font-weight:700;}
#jb-calc-result{margin-top:1rem;padding:1rem;background:linear-gradient(135deg,#fff0f5,#ffe4ef);border-radius:12px;text-align:center;}
#jb-cr-label{font-family:'Cinzel',serif;font-size:10px;letter-spacing:0.15em;color:#888;display:block;}
#jb-cr-price{font-family:'Bodoni Moda',serif;font-size:2rem;font-weight:900;color:#D4688A;display:block;}
#jb-cr-note{font-size:11px;color:#aaa;display:block;margin-top:3px;}
#jb-calc-result a{display:inline-block;margin-top:10px;background:#D4688A;color:#fff;font-family:'Cinzel',serif;font-size:11px;font-weight:700;letter-spacing:0.1em;padding:9px 22px;border-radius:999px;text-decoration:none;}
#jb-calc-close{position:absolute;top:12px;left:14px;background:none;border:none;font-size:22px;cursor:pointer;color:#bbb;line-height:1;}
/* ══════════════════════════════════════════════════════════════
75. 3D TILT HERO PORTRAIT
══════════════════════════════════════════════════════════════ */
.hero::after{transform:var(--portrait-tilt,none) !important;transition:transform 0.15s ease-out !important;will-change:transform;}
/* ══════════════════════════════════════════════════════════════
76. LIVE AVAILABILITY
══════════════════════════════════════════════════════════════ */
#jb-avail{position:fixed;top:80px;right:14px;z-index:7500;background:rgba(26,0,16,0.88);border:1px solid rgba(212,104,138,0.3);border-radius:10px;padding:8px 14px;display:flex;align-items:center;gap:8px;backdrop-filter:blur(8px);opacity:0;transform:translateX(20px);transition:opacity 0.5s,transform 0.5s;}
#jb-avail.show{opacity:1;transform:translateX(0);}
#jb-avail-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
#jb-avail-dot.open{background:#25D366;animation:jb-dot-blink 1.4s ease-in-out infinite;}
#jb-avail-dot.busy{background:#FFB800;}
#jb-avail-dot.closed{background:#888;}
@keyframes jb-dot-blink{0%,100%{opacity:1}50%{opacity:0.3}}
#jb-avail-text{font-family:'Cinzel',serif;font-size:10px;letter-spacing:0.08em;color:rgba(255,200,220,0.9);white-space:nowrap;}
/* ══════════════════════════════════════════════════════════════
80. HOLLYWOOD GLAM PALETTE — BLACK × ROSE × GOLD
══════════════════════════════════════════════════════════════ */
:root {
--rose: #D4688A;
--rose2: rgba(212,104,138,.18);
--rose-glow: 0 0 14px rgba(212,104,138,.55), 0 0 40px rgba(212,104,138,.2);
--gold: #C8965A;
--gold2: rgba(200,150,90,.22);
--chrome: linear-gradient(135deg,#fff 0%,#d0d0d0 30%,#fff 50%,#b0b0b0 70%,#fff 100%);
--salon-black: #0D0B0C;
}
/* ── фон тела — глубокий чёрный ── */
body { background-color: var(--salon-black) !important; }
/* ── секции — тёмный фон вместо белого ── */
section, .section, .srv-sec, .ben-sec, .rv-sec, .faq-sec, .loc-sec, .gallery-sec, .cmp-sec, .val-sec {
background-color: #100D0E !important;
}
/* ── альтернативные секции — чуть светлее ── */
.about, .quiz-sec, .insta-sec {
background-color: #160E11 !important;
}
/* ── карточки — чёрные с розовой каёмкой ── */
.ben-card, .val-card, .vid-card, .loc-card, .gr-card, .treat-card {
background: #1A0F14 !important;
border-color: rgba(212,104,138,.25) !important;
}@media (hover:hover) and (pointer:fine){
/* ── Hollywood mirror light border on cards hover ── */
.ben-card:hover, .val-card:hover, .treat-card:hover{
border-color: var(--rose) !important;
box-shadow: 0 0 0 1px var(--rose), 0 0 20px rgba(212,104,138,.3), inset 0 0 30px rgba(212,104,138,.04) !important;
}
}
/* ── כותרות — כרום מטאלי ── */
h1, h2.stitle, .hero-t {
background: linear-gradient(160deg,#fff 0%,#f0c8d8 25%,#D4688A 50%,#f0c8d8 75%,#fff 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
background-size: 200% auto;
animation: jb-chrome-shift 4s linear infinite;
}
@keyframes jb-chrome-shift {
0% { background-position: 0% center; }
100% { background-position: 200% center; }
}
/* ── Hollywood bulb dots — decorative top border ── */
.hero::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: repeating-linear-gradient(90deg,
var(--rose) 0px, var(--rose) 3px,
transparent 3px, transparent 18px,
var(--gold) 18px, var(--gold) 21px,
transparent 21px, transparent 36px
);
z-index: 10;
}
/* ── נווט — שחור עם קו ורוד תחתון ── */
header, nav, .header, .nav {
background: rgba(13,11,12,.95) !important;
border-bottom: 1px solid rgba(212,104,138,.3) !important;
backdrop-filter: blur(12px) !important;
}
/* ── לחצנים ראשיים — ורוד → זהוב ── */
.btn, .cta-btn, .wa-btn, a.btn-primary, button.btn-primary {
background: linear-gradient(135deg, var(--rose) 0%, #C8506A 50%, var(--gold) 100%) !important;
color: #fff !important;
box-shadow: 0 4px 20px rgba(212,104,138,.4) !important;
}@media (hover:hover) and (pointer:fine){
.btn:hover, .cta-btn:hover{
box-shadow: 0 4px 30px rgba(212,104,138,.7) !important;
transform: translateY(-2px) !important;
}
}
/* ── scrollbar ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #0D0B0C; }
::-webkit-scrollbar-thumb { background: var(--rose); border-radius: 99px; }
/* ── gold accent line ── */
.bar {
background: linear-gradient(90deg, var(--rose), var(--gold)) !important;
box-shadow: 0 0 8px rgba(212,104,138,.5) !important;
}
/* ══════════════════════════════════════════════════════════════
90. PINK BASE PALETTE — ROSE × BLACK × GOLD/SILVER
(מבטל את הפאלטה השחורה הקודמת)
══════════════════════════════════════════════════════════════ */
:root {
--base: #F7E0E9;
--base-mid: #F0CEDD;
--base-deep: #E8B8CE;
--ink: #1A0A10;
--ink2: #3D1A28;
--silver: #B8B8C8;
--gold-acc: #C89858;
}
/* ── רקע כללי ── */
html, body {
background-color: var(--base) !important;
color: var(--ink) !important;
}
/* ── כל הסקשנים — ורוד בהיר ── */
section, .section, .srv-sec, .ben-sec, .rv-sec, .faq-sec,
.loc-sec, .gallery-sec, .cmp-sec, .val-sec,
.about, .quiz-sec, .insta-sec,
header, nav, .header, .nav {
background-color: var(--base) !important;
color: var(--ink) !important;
}
/* ── סקשנים סירוגיים — ורוד קצת כהה יותר ── */
.about, .faq-sec, .cmp-sec {
background-color: var(--base-mid) !important;
}
/* ── header/nav ── */
header, nav, .header, .nav {
background: rgba(247,224,233,.92) !important;
border-bottom: 1px solid rgba(200,152,88,.3) !important;
backdrop-filter: blur(14px) !important;
}
/* ── כותרות — שחור עמוק ── */
h1, h2, h3, h4, h5, h6,
h2.stitle, .hero-t, .stitle, .sec-title {
color: var(--ink) !important;
background: none !important;
-webkit-text-fill-color: var(--ink) !important;
background-clip: unset !important;
-webkit-background-clip: unset !important;
animation: none !important;
}
/* ── טקסט כללי ── */
p, li, span:not(.feat-badge):not(.cmp-winner), label, .rv-text, .rv-name, .faq-q, .faq-a {
color: var(--ink2) !important;
}
/* ── כרטיסים — ורוד בהיר עם מסגרת זהב עדינה ── */
.ben-card, .val-card, .vid-card, .loc-card, .gr-card, .treat-card {
background: #fff0f4 !important;
border: 1px solid rgba(200,152,88,.25) !important;
color: var(--ink) !important;
box-shadow: 0 4px 20px rgba(212,104,138,.08) !important;
}@media (hover:hover) and (pointer:fine){
.ben-card:hover, .val-card:hover, .treat-card:hover{
border-color: var(--gold-acc) !important;
box-shadow: 0 6px 28px rgba(200,152,88,.22) !important;
}
}
/* ── קו הבר — זהב ── */
.bar {
background: linear-gradient(90deg, var(--rose), var(--gold-acc)) !important;
box-shadow: none !important;
}
/* ── לחצנים — שחור עם ורוד hover ── */
.btn, .cta-btn, a.btn-primary, button.btn-primary {
background: var(--ink) !important;
color: #fff !important;
border: none !important;
box-shadow: 0 4px 16px rgba(26,10,16,.25) !important;
}@media (hover:hover) and (pointer:fine){
.btn:hover, .cta-btn:hover{
background: var(--rose) !important;
box-shadow: 0 4px 20px rgba(212,104,138,.4) !important;
}
}
/* ── WA FAB + Sticky CTA — קיימים רק בבוטיק (shop.html); ב-index.html הוסרו לגמרי ב-10.8.2026, ראו דוח תיקונים סבב 2 ── */
#jb-whatsapp-fab {
background: var(--ink) !important;
box-shadow: 0 4px 20px rgba(26,10,16,.35) !important;
}
#jb-sticky-cta {
background: linear-gradient(90deg, var(--ink), #2d0d1a, var(--ink)) !important;
}
#jb-sticky-cta a { background: var(--rose) !important; }
/* ── Availability indicator ── */
#jb-avail {
background: rgba(26,10,16,.88) !important;
color: #fff !important;
}
/* ── hero::before line — gold/silver dots ── */
.hero::before {
background: repeating-linear-gradient(90deg,
var(--gold-acc) 0px, var(--gold-acc) 3px,
transparent 3px, transparent 18px,
var(--silver) 18px, var(--silver) 21px,
transparent 21px, transparent 36px
) !important;
}
/* ── scrollbar ── */
::-webkit-scrollbar-track { background: var(--base-mid) !important; }
::-webkit-scrollbar-thumb { background: var(--ink) !important; }
/* ── reviews ticker ── */
#jb-rev-ticker {
background: linear-gradient(90deg, var(--base-mid), var(--base), var(--base-mid)) !important;
}
.jb-rtick-text { color: var(--ink2) !important; }
/* ── price calc panel ── */
#jb-calc-panel { background: #fff5f8 !important; color: var(--ink) !important; }
#jb-calc-result { background: linear-gradient(135deg, var(--base-mid), var(--base-deep)) !important; }
/* ── signature SVG ── */
#jb-signature-svg text { stroke: var(--ink) !important; }