/* ────────────────────────────────────────────────────────────────── Ofek Drilling — UX Polish ────────────────────────────────────────────────────────────────── */ /* ─── 1. License "פתח תעודה מלאה" button polish ─── */ .of-lp-btn{ background: linear-gradient(135deg, #E8842D 0%, #C8632F 100%) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.25) !important; font-size: .95rem !important; padding: 13px 18px !important; font-weight: 700 !important; box-shadow: 0 4px 14px rgba(200,99,47,.40), inset 0 1px 0 rgba(255,255,255,.18) !important; letter-spacing: .01em; } .of-lp-btn:hover{ background: linear-gradient(135deg, #F09545 0%, #E8842D 100%) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 22px rgba(200,99,47,.55) !important; } .of-lp-btn:focus-visible{ outline: 3px solid #ffd790 !important; outline-offset: 3px !important; } /* ─── 2. Hide L-shaped corner brackets when REAL image is inside ─── */ /* Universal: any element containing an has its corner pseudo-elements hidden */ .prt-cat-img:has(img)::before, .prt-cat-img:has(img)::after, .prt-featured-cover:has(img)::before, .prt-featured-cover:has(img)::after, .prt-gal-item:has(img)::before, .prt-gal-item:has(img)::after, .sop-svc-display-cover:has(img)::before, .sop-svc-display-cover:has(img)::after, .abt-story-img:has(img)::before, .abt-story-img:has(img)::after, .abt-featured-client:has(img)::before, .abt-featured-client:has(img)::after, .loc-display-cover:has(img)::before, .loc-display-cover:has(img)::after, .ben-img-ph:has(img)::before, .ben-img-ph:has(img)::after, .cfa-img-ph:has(img)::before, .cfa-img-ph:has(img)::after, .dry-img-ph:has(img)::before, .dry-img-ph:has(img)::after, .gw-img-ph:has(img)::before, .gw-img-ph:has(img)::after, .sec-img-ph:has(img)::before, .sec-img-ph:has(img)::after, .prt-img-ph:has(img)::before, .prt-img-ph:has(img)::after, .svc-img-ph:has(img)::before, .svc-img-ph:has(img)::after, .ben-img-ph[data-img-id]::before, .ben-img-ph[data-img-id]::after, .cfa-img-ph[data-img-id]::before, .cfa-img-ph[data-img-id]::after, .dry-img-ph[data-img-id]::before, .dry-img-ph[data-img-id]::after, .gw-img-ph[data-img-id]::before, .gw-img-ph[data-img-id]::after, .sec-img-ph[data-img-id]::before, .sec-img-ph[data-img-id]::after, .prt-img-ph[data-img-id]::before, .prt-img-ph[data-img-id]::after, .svc-img-ph[data-img-id]::before, .svc-img-ph[data-img-id]::after{ display: none !important; } .ben-img-ph[data-img-id] .ben-img-ph-inner, .cfa-img-ph[data-img-id] .cfa-img-ph-inner, .dry-img-ph[data-img-id] .dry-img-ph-inner, .gw-img-ph[data-img-id] .gw-img-ph-inner, .sec-img-ph[data-img-id] .sec-img-ph-inner, .prt-img-ph[data-img-id] .prt-img-ph-inner, .svc-img-ph[data-img-id] .svc-img-ph-inner{ display: none !important; } /* ─── 3. EMPTY placeholders — clean "בקרוב" design ─── */ /* When a placeholder has no real image — show clean "Coming Soon" */ .ben-img-ph:not([data-img-id]) .ben-img-ph-label, .cfa-img-ph:not([data-img-id]) .cfa-img-ph-label, .dry-img-ph:not([data-img-id]) .dry-img-ph-label, .gw-img-ph:not([data-img-id]) .gw-img-ph-label, .sec-img-ph:not([data-img-id]) .sec-img-ph-label, .prt-img-ph:not([data-img-id]) .prt-img-ph-label, .svc-img-ph:not([data-img-id]) .svc-img-ph-label, .ben-img-ph:not([data-img-id]) .ben-img-ph-desc, .cfa-img-ph:not([data-img-id]) .cfa-img-ph-desc, .dry-img-ph:not([data-img-id]) .dry-img-ph-desc, .gw-img-ph:not([data-img-id]) .gw-img-ph-desc, .sec-img-ph:not([data-img-id]) .sec-img-ph-desc, .prt-img-ph:not([data-img-id]) .prt-img-ph-desc, .svc-img-ph:not([data-img-id]) .svc-img-ph-desc, [class*="-img-ph-spec"], [class*="-img-ph-id"]{ display: none !important; } /* The "coming soon" treatment — applied to the inner div via ::before */ .ben-img-ph:not([data-img-id]), .cfa-img-ph:not([data-img-id]), .dry-img-ph:not([data-img-id]), .gw-img-ph:not([data-img-id]), .sec-img-ph:not([data-img-id]), .prt-img-ph:not([data-img-id]), .svc-img-ph:not([data-img-id]){ background: linear-gradient(135deg, rgba(232,132,45,0.04), rgba(232,132,45,0.10)) !important; border: 1px dashed rgba(232,132,45,0.35) !important; border-radius: 12px; display: flex; align-items: center; justify-content: center; } .ben-img-ph:not([data-img-id]) .ben-img-ph-inner, .cfa-img-ph:not([data-img-id]) .cfa-img-ph-inner, .dry-img-ph:not([data-img-id]) .dry-img-ph-inner, .gw-img-ph:not([data-img-id]) .gw-img-ph-inner, .sec-img-ph:not([data-img-id]) .sec-img-ph-inner, .prt-img-ph:not([data-img-id]) .prt-img-ph-inner, .svc-img-ph:not([data-img-id]) .svc-img-ph-inner{ text-align: center; color: rgba(232,132,45,0.7); } .ben-img-ph:not([data-img-id]) [class*="-img-ph-cam"], .cfa-img-ph:not([data-img-id]) [class*="-img-ph-cam"], .dry-img-ph:not([data-img-id]) [class*="-img-ph-cam"], .gw-img-ph:not([data-img-id]) [class*="-img-ph-cam"], .sec-img-ph:not([data-img-id]) [class*="-img-ph-cam"], .prt-img-ph:not([data-img-id]) [class*="-img-ph-cam"], .svc-img-ph:not([data-img-id]) [class*="-img-ph-cam"]{ width: 40px !important; height: 40px !important; margin-bottom: 8px !important; color: rgba(232,132,45,0.7) !important; opacity: 0.8; } .ben-img-ph:not([data-img-id]) .ben-img-ph-inner::after, .cfa-img-ph:not([data-img-id]) .cfa-img-ph-inner::after, .dry-img-ph:not([data-img-id]) .dry-img-ph-inner::after, .gw-img-ph:not([data-img-id]) .gw-img-ph-inner::after, .sec-img-ph:not([data-img-id]) .sec-img-ph-inner::after, .prt-img-ph:not([data-img-id]) .prt-img-ph-inner::after, .svc-img-ph:not([data-img-id]) .svc-img-ph-inner::after{ content: "תמונה תתווסף בקרוב"; display: block; color: rgba(232,132,45,0.75); font-size: 0.85rem; font-weight: 600; margin-top: 4px; letter-spacing: 0.02em; } /* ─── 4. Real images get elegant frame + hover effect ─── */ [data-img-id]{ border-radius: 12px !important; overflow: hidden !important; position: relative !important; box-shadow: 0 4px 16px rgba(0,0,0,0.25), 0 0 0 1px rgba(232,132,45,0.12) !important; transition: box-shadow .3s ease, transform .3s ease !important; background: #15100A !important; cursor: zoom-in; } [data-img-id] img{ transition: transform .5s cubic-bezier(.2,.7,.3,1) !important; } @media (hover: hover){ [data-img-id]:hover{ box-shadow: 0 12px 36px rgba(0,0,0,0.45), 0 0 0 1px rgba(232,132,45,0.35) !important; transform: translateY(-3px) !important; } [data-img-id]:hover img{ transform: scale(1.06) !important; } } @media (max-width: 640px){ [data-img-id]{ border-radius: 10px !important; } [data-img-id]:hover{ transform: none !important; } } /* ─── 5. VIDEO section — elegant, integrated design (NO L corners) ─── */ .ofek-video-section{ padding: clamp(40px, 6vw, 70px) clamp(16px, 4vw, 60px) !important; background: linear-gradient(180deg, var(--bg-1, #15100A) 0%, var(--bg-2, #0F0906) 100%) !important; position: relative !important; overflow: hidden !important; } .ofek-video-section::before{ content: ""; position: absolute; top: 0; right: 50%; transform: translateX(50%); width: 80px; height: 3px; background: linear-gradient(90deg, transparent, #E8842D, transparent); } .ofek-video-container{ max-width: 980px !important; margin: 0 auto !important; text-align: center !important; } .ofek-video-heading{ color: #EAECEE !important; font-size: clamp(1.4rem, 3vw, 1.9rem) !important; font-weight: 900 !important; margin: 0 0 6px !important; letter-spacing: -.01em !important; font-family: var(--font-h, 'Heebo', sans-serif) !important; } .ofek-video-heading::after{ content: ""; display: block; width: 48px; height: 3px; background: linear-gradient(90deg, #C8632F, #E8842D); margin: 12px auto 0; border-radius: 2px; } .ofek-video-sub{ color: rgba(234,236,238,0.72) !important; font-size: clamp(0.92rem, 1.4vw, 1.05rem) !important; margin: 18px auto 32px !important; max-width: 560px !important; line-height: 1.65 !important; } .ofek-video-wrap{ position: relative !important; width: 100% !important; max-width: 880px !important; aspect-ratio: 16/9 !important; margin: 0 auto !important; border-radius: 16px !important; overflow: hidden !important; box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(232,132,45,0.18), inset 0 0 0 1px rgba(255,255,255,0.04) !important; background: #0F0906 !important; } .ofek-video-wrap video{ width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* L corners on video — REMOVED per request */ @media (max-width: 640px){ .ofek-video-section{ padding: 32px 14px !important; } .ofek-video-wrap{ aspect-ratio: 4/3 !important; border-radius: 12px !important; } .ofek-video-heading{ font-size: 1.25rem !important; } .ofek-video-sub{ font-size: 0.9rem !important; margin-bottom: 24px !important; } } /* ─── 6. Strong focus states for accessibility ─── */ a:focus-visible, button:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible{ outline: 3px solid #E8842D !important; outline-offset: 3px !important; border-radius: 4px; box-shadow: 0 0 0 6px rgba(232,132,45,.25) !important; } :focus:not(:focus-visible){ outline: none; } /* ─── 8. Fix WhatsApp button flicker on iOS Safari ─── */ /* The waPulse animation causes flickering on iPhone due to iOS Safari's */ /* rendering of position:fixed + ::before + animation combo. */ /* iOS Safari only — disable the pulse ring entirely */ @supports (-webkit-touch-callout: none) { .of-wa-float::before{ animation: none !important; opacity: 0 !important; } } /* On all devices — add hardware acceleration to smooth animation if it stays */ .of-wa-float::before{ -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform, opacity; }