/* ============================================================================ * EVENT360 — Interactive Tab Guide (driver-style product tour) * ---------------------------------------------------------------------------- * Self-contained styles for the step-by-step guide that opens from the existing * "הצגת מדריך" / "מדריך" button in every tab. Nothing here touches existing * component styles — every class is namespaced with `e360-guide-`. * Fully responsive (desktop + mobile), RTL-first. * ========================================================================== */ /* Dark, click-blocking layer behind everything. The bright "hole" is produced by the spotlight element's huge box-shadow, so this layer itself stays fully transparent and only exists to swallow clicks on the page behind the guide. */ .e360-guide-overlay { position: fixed; inset: 0; z-index: 2147483000; background: transparent; cursor: pointer; /* click-to-explain: any area is clickable to jump to its step */ -webkit-tap-highlight-color: transparent; } /* The highlighted region. The massive spread box-shadow darkens the whole page while leaving this rectangle bright; the white border + glow is the "frame" from the reference image. */ .e360-guide-spot { position: fixed; z-index: 2147483001; border-radius: 14px; pointer-events: none; background: transparent; border: 2px solid rgba(255, 255, 255, 0.96); box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.72), 0 0 0 4px rgba(255, 255, 255, 0.9), 0 0 0 7px rgba(124, 58, 237, 0.45), 0 0 26px 8px rgba(124, 58, 237, 0.55); /* No positional transition by default → tracks the element instantly while scrolling (no mobile lag/jitter). The smooth move is enabled per step only. */ animation: e360-guide-glow 2s ease-in-out infinite; } .e360-guide-spot.is-moving { transition: top .3s cubic-bezier(.4, 0, .2, 1), left .3s cubic-bezier(.4, 0, .2, 1), width .3s cubic-bezier(.4, 0, .2, 1), height .3s cubic-bezier(.4, 0, .2, 1); } /* Highlight-only mode (window.Event360Guide.spotlight). The tour runs exactly as it always does — same overlay, same ring, same tracking — but the explanation panel and its arrow are not shown, so the screen is presented with the relevant control marked and nothing else on top of it. Scoped to the root class the engine sets for that run only, so a normal "הצגת מדריך" tour is untouched. */ .e360-guide-quiet .e360-guide-bubble, .e360-guide-quiet .e360-guide-arrow { display: none !important; } @keyframes e360-guide-glow { 0%, 100% { box-shadow: 0 0 0 9999px rgba(15,23,42,.72), 0 0 0 4px rgba(255,255,255,.9), 0 0 0 7px rgba(124,58,237,.40), 0 0 22px 6px rgba(124,58,237,.45); } 50% { box-shadow: 0 0 0 9999px rgba(15,23,42,.72), 0 0 0 4px rgba(255,255,255,.95), 0 0 0 8px rgba(124,58,237,.55), 0 0 30px 10px rgba(124,58,237,.65); } } /* Guide-only "ghost" replica of an element that is not currently on screen (no data yet, action not performed, or a state-specific element). It lives ONLY inside the guide layer (appended to ), is NEVER inserted into the real tab, is non-interactive, and is removed on step change / close. It sits above the spotlight's dark shadow so it appears bright inside the hole. */ .e360-guide-demo { position: fixed; z-index: 2147483002; pointer-events: none; /* never clickable / focusable */ max-width: calc(100vw - 28px); direction: rtl; text-align: right; font-family: 'Rubik', 'Heebo', Arial, sans-serif; } .e360-guide-demo-inner { display: inline-block; background: #ffffff; border-radius: 14px; padding: 14px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18); max-width: calc(100vw - 28px); } /* Small ribbon so the user understands this element is only an illustration. */ .e360-guide-demo-inner::before { content: 'תצוגה להמחשה'; display: block; font-size: 10.5px; font-weight: 700; color: #9333ea; background: #f5f3ff; border: 1px solid #ede9fe; border-radius: 999px; padding: 2px 9px; margin: 0 0 10px; width: max-content; } /* Small diamond that visually connects the bubble to the spotlight. */ .e360-guide-arrow { position: fixed; z-index: 2147483002; width: 16px; height: 16px; background: #ffffff; transform: rotate(45deg); border-radius: 3px; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); pointer-events: none; } /* The explanation bubble. */ .e360-guide-bubble { position: fixed; z-index: 2147483003; width: 340px; max-width: calc(100vw - 24px); box-sizing: border-box; background: #ffffff; border-radius: 18px; padding: 18px 18px 14px; direction: rtl; text-align: right; font-family: 'Rubik', 'Heebo', Arial, sans-serif; box-shadow: 0 18px 50px rgba(15, 23, 42, 0.30), 0 2px 8px rgba(15, 23, 42, 0.10); opacity: 0; transform: translateY(8px) scale(.98); transition: opacity .22s ease, transform .22s ease; } .e360-guide-bubble.is-shown { opacity: 1; transform: translateY(0) scale(1); } .e360-guide-bubble__title { margin: 0 0 8px; /* Force the system font — beats theme `h3{font-family:…}` heading rules. */ font-family: 'Rubik', 'Heebo', Arial, sans-serif !important; font-size: 17px; font-weight: 800; line-height: 1.35; color: #1e1b4b; } .e360-guide-bubble__text { margin: 0; font-family: 'Rubik', 'Heebo', Arial, sans-serif !important; font-size: 14.5px; font-weight: 400; line-height: 1.7; color: #475569; } /* "You can click any area" hint line. */ .e360-guide-hint { margin-top: 11px; font-size: 12px; font-weight: 600; line-height: 1.5; color: #7c3aed; background: #f5f3ff; border: 1px solid #ede9fe; border-radius: 10px; padding: 7px 10px; } /* Footer is two rows: progress dots on top, action buttons below. */ .e360-guide-bubble__footer { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; } /* Buttons row (below the dots): skip on the right, prev/next on the left (RTL). */ .e360-guide-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; } /* Skip / finish text link. */ .e360-guide-skip { flex: 0 0 auto; background: none; border: 0; padding: 6px 4px; font-family: 'Rubik', 'Heebo', Arial, sans-serif; font-size: 13.5px; font-weight: 600; color: #7c3aed; cursor: pointer; white-space: nowrap; } .e360-guide-skip:hover { color: #6d28d9; text-decoration: underline; } /* Progress dots + "X מתוך Y", centered on their own row. */ .e360-guide-progress { display: flex; align-items: center; gap: 10px; justify-content: center; min-width: 0; } .e360-guide-dots { display: flex; align-items: center; gap: 5px; } .e360-guide-dot { width: 7px; height: 7px; border-radius: 50%; background: #d8d5e8; transition: background .2s ease, width .2s ease; } .e360-guide-dot.is-active { width: 20px; border-radius: 4px; background: #7c3aed; } .e360-guide-counter { font-size: 12.5px; font-weight: 600; color: #94a3b8; white-space: nowrap; } /* Nav buttons (left side in RTL). */ .e360-guide-nav { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .e360-guide-btn-next, .e360-guide-btn-prev { /* Desktop: use the system font (same stack the app uses everywhere). */ font-family: 'Rubik', 'Heebo', Arial, sans-serif; font-size: 14px; font-weight: 700; border-radius: 11px; padding: 9px 18px; cursor: pointer; transition: background .15s ease, box-shadow .15s ease, transform .1s ease; line-height: 1; white-space: nowrap; } /* White label, hardened against theme `button`/`-webkit-text-fill-color` rules. */ .e360-guide-btn-next { background: linear-gradient(135deg, #7c3aed, #4f46e5) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; border: 0; box-shadow: 0 6px 16px rgba(124, 58, 237, 0.35); } .e360-guide-btn-next:hover { box-shadow: 0 8px 20px rgba(124, 58, 237, 0.45); } .e360-guide-btn-next:active { transform: translateY(1px); } .e360-guide-btn-prev { background: #f1f0fb; color: #4f46e5; border: 1px solid #e4e2f5; } .e360-guide-btn-prev:hover { background: #e9e7fb; } /* Mobile tuning. */ @media (max-width: 820px) { .e360-guide-bubble { width: calc(100vw - 24px); border-radius: 16px; padding: 16px 16px 13px; } .e360-guide-bubble__title { font-size: 16px; } .e360-guide-bubble__text { font-size: 14px; } .e360-guide-btn-next, .e360-guide-btn-prev { padding: 9px 16px; font-size: 13.5px; } /* Mobile: force the "הבא" label to white (overrides themed mobile buttons). */ .e360-guide-btn-next, .e360-guide-btn-next span { color: #fff !important; -webkit-text-fill-color: #fff !important; background: linear-gradient(135deg, #7c3aed, #4f46e5) !important; } .e360-guide-btn-next span { background: transparent !important; } } @media (prefers-reduced-motion: reduce) { .e360-guide-spot { animation: none; transition: none; } .e360-guide-bubble { transition: opacity .12s ease; transform: none; } } /* EVENT360 global mobile input zoom fix Purpose: prevent iOS Safari/Chrome mobile auto-zoom when focusing any editable field. Logic untouched. */ @media screen and (max-width: 900px) { html, body { -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; } input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea, select, .event360 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), .event360 textarea, .event360 select, [class^="eil-"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), [class*=" eil-"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), [class^="eil-"] textarea, [class*=" eil-"] textarea, [class^="eil-"] select, [class*=" eil-"] select, [class^="p6-"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), [class*=" p6-"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), [class^="p6-"] textarea, [class*=" p6-"] textarea, [class^="p6-"] select, [class*=" p6-"] select { font-size: 16px !important; -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; } }