/* ========================================================================== נץ — שכבת Liquid Glass + Claymorphism (ניסיון, דף הבית בלבד) -------------------------------------------------------------------------- שכבה נוספת בלבד: לא משנה מבנה, טקסט, צבעי מותג או פריסה. נטענת אחרונה ב-homepage-new.html. להסרה: למחוק את שורת ה-. Liquid Glass — משטחים שקופים מעל רקע כהה/תוכן: הסרגל העליון · כפתורים משניים (outline) · נתוני ה-hero Claymorphism — אלמנטים קטנים וחמים בלבד: כפתור המחשבון הכתום · בועות האייקונים בשירותים · כפתורי וואטסאפ ========================================================================== */ /* ---------- Liquid Glass ---------- */ /* סרגל עליון: זכוכית עם קצה מבריק במקום קו אפור */ html body header.topbar { background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.58)); -webkit-backdrop-filter: blur(20px) saturate(185%); backdrop-filter: blur(20px) saturate(185%); border-bottom: 1px solid rgba(255,255,255,.7); box-shadow: inset 0 -1px 0 rgba(15,46,99,.08), 0 6px 24px -12px rgba(15,46,99,.25); } /* כפתורים משניים מעל כחול: זכוכית + ברק שחולף במעבר עכבר */ html body .hero .btn.btn-outline-light, html body .cta-card .btn.btn-outline-light { position: relative; overflow: hidden; isolation: isolate; border-radius: 999px; border: 1px solid rgba(255,255,255,.42); background: linear-gradient(135deg, rgba(255,255,255,.24), rgba(255,255,255,.06) 55%, rgba(255,255,255,.14)); -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 1px rgba(255,255,255,.15), inset 0 0 18px rgba(255,255,255,.08), 0 10px 24px -10px rgba(0,16,48,.55); transition: transform .25s ease, box-shadow .25s ease, background .25s ease; } html body .hero .btn.btn-outline-light::after, html body .cta-card .btn.btn-outline-light::after { content: ""; position: absolute; top: -40%; bottom: -40%; inset-inline-start: -60%; width: 40%; z-index: -1; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent); transform: skewX(-18deg); transition: transform .9s ease; } html body .hero .btn.btn-outline-light:hover, html body .cta-card .btn.btn-outline-light:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.7); background: linear-gradient(135deg, rgba(255,255,255,.32), rgba(255,255,255,.1) 55%, rgba(255,255,255,.2)); } html body .hero .btn.btn-outline-light:hover::after, html body .cta-card .btn.btn-outline-light:hover::after { transform: skewX(-18deg) translateX(-420%); } /* רמה 0: בכרטיס "צריכים שליח?" כפתור = 8 (היה 999). ההירו נשאר */ html body .cta-card .btn.btn-outline-light { border-radius: var(--nz-radius-sm); } /* נתוני ה-hero: כמוסות זכוכית בגוון כחול — יושבות על המעבר ללבן בתחתית ה-hero, ולכן הזכוכית צבועה כחול כדי שהטקסט הלבן יישאר קריא גם על הרקע הבהיר */ html body .hero .hero-stats { gap: 10px; position: relative; z-index: 3; } html body .hero .hero-stat { margin: 4px 5px; padding: 7px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.34); background: linear-gradient(135deg, rgba(27,79,168,.82), rgba(15,46,99,.78)); color: #fff; -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 8px 18px -10px rgba(0,16,48,.5); } /* כרטיס "צריכים שליח?": קצה זכוכית מבריק מסביב */ html body .cta-card { box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.1), 0 24px 48px -24px rgba(7,28,71,.55); } /* ---------- Claymorphism ---------- */ /* כפתור המחשבון הכתום: כפתור "מנופח" שנלחץ פנימה */ html body .hero .btn.btn-primary, html body .cta-card .btn.btn-primary { border-radius: 999px; border: 0; background: linear-gradient(180deg, #ff9a55, #ff7a26); box-shadow: 0 12px 24px -8px rgba(255,122,38,.55), inset 0 -5px 10px rgba(163,62,0,.28), inset 0 5px 10px rgba(255,255,255,.55); transition: transform .2s ease, box-shadow .2s ease; } html body .hero .btn.btn-primary:hover, html body .cta-card .btn.btn-primary:hover { background: linear-gradient(180deg, #ffa468, #ff8334); transform: translateY(-2px) scale(1.02); } /* רמה 0 (מפרט 1.8) — רק בכרטיס "צריכים שליח?". ההירו נשאר עד משימת ההירו. #ff9a55→#ff7a26 ← #FF8334 · ריחוף #ffa468→#ff8334 ← #E86F22 (החריג היחיד) · 999 ← 8 */ html body .cta-card .btn.btn-primary { border-radius: var(--nz-radius-sm); background: var(--nz-orange-btn); } html body .cta-card .btn.btn-primary:hover { background: var(--nz-orange-btn-hover); } html body .hero .btn.btn-primary:active, html body .cta-card .btn.btn-primary:active { transform: translateY(1px) scale(.98); box-shadow: 0 4px 10px -4px rgba(255,122,38,.5), inset 0 5px 10px rgba(163,62,0,.3); } /* בועות האייקונים בכרטיסי השירותים — שומרות על הצבעים הקיימים, מקבלות נפח */ html body .service-card .service-icon { border-radius: var(--nz-radius-md); /* רמה 0: 20 ← 16 */ box-shadow: 0 10px 18px -8px rgba(26,87,194,.35), inset 0 -5px 9px rgba(15,46,99,.14), inset 0 5px 9px rgba(255,255,255,.9); } html body .service-card:hover .service-icon { transform: rotate(-6deg) scale(1.08); box-shadow: 0 12px 22px -8px rgba(15,46,99,.45), inset 0 -5px 9px rgba(0,0,0,.22), inset 0 5px 9px rgba(255,255,255,.35); } /* וואטסאפ: הכפתור בכרטיס והכפתור הצף */ html body .cta-card .btn.btn-whatsapp { border-radius: var(--nz-radius-sm); /* רמה 0: כפתור 8 (היה 999) */ box-shadow: 0 12px 24px -8px rgba(7,94,84,.55), inset 0 -5px 10px rgba(0,40,30,.3), inset 0 5px 10px rgba(255,255,255,.3); } /* הכפתור הצף: בלי צל צבעוני ובלי קפיצה וטבעת — רמה 0 במפרט 1.8 (ניר 08/10/2026). הצל = הצל הנייבי של מפרט 2.2, 6.4 (היה none) */ html body a.fab-wa { box-shadow: 0 4px 12px -4px rgba(15,46,99,.12), 0 1px 2px rgba(15,46,99,.06); animation: none; } html body a.fab-wa::before { content: none; } /* כשהסרגל התחתון מוצג יש בו כבר וואטסאפ — בלי כפתור צף כפול (ניר 08/10/2026) */ @media (max-width: 1023px) { html body:has(.nz-mobile-bar:not(.is-hidden)) a.fab-wa { display: none; } } @media (prefers-reduced-motion: reduce) { html body .hero .btn.btn-outline-light::after, html body .cta-card .btn.btn-outline-light::after { display: none; } }