/* Guided setup panel. * * Loaded as its own AFTER the nine parts of styles.css, on purpose: * * - Every class here is new (guide-*), so nothing in the existing 1056 * classes can be shadowed by it or shadow it. * - It sits outside tools/split-css.mjs, so the parts still reassemble * byte-for-byte into styles.css and the split check stays meaningful. * - Deleting the feature is deleting this file and one . * * The app is RTL throughout, so the panel anchors bottom-left, which is the * trailing corner here and away from the nav. */ /* --- Launcher ---------------------------------------------------------- */ #guide-launcher { position: fixed; bottom: 24px; left: 24px; z-index: 9500; display: flex; align-items: center; gap: 8px; padding: 11px 18px; border: 1px solid rgba(59, 130, 246, 0.35); border-radius: 999px; background: #2563eb; color: #fff; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35); } #guide-launcher:hover { background: #1d4ed8; } /* Nothing outstanding: stop shouting, but stay reachable. */ #guide-launcher.is-clear { background: var(--bg-panel, #fff); backdrop-filter: blur(14px); color: var(--success, #15803d); border-color: var(--border-color, rgba(21, 128, 61, 0.3)); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); } .guide-launcher-count:empty { display: none; } .guide-launcher-count { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.22); font-size: 12px; font-weight: 700; } /* --- Panel ------------------------------------------------------------- */ #guide-panel { position: fixed; bottom: 80px; left: 24px; z-index: 9600; display: none; flex-direction: column; width: 340px; max-width: calc(100vw - 32px); max-height: min(72vh, 620px); overflow-y: auto; padding: 16px; border: 1px solid var(--border-color, rgba(148, 163, 184, 0.28)); border-radius: 16px; /* The app ships light and dark, switched by a class on that * redefines these variables. Reading them instead of hard-coding #fff is * the whole reason the panel does not glare white over the dark theme. */ background: var(--bg-panel, #fff); backdrop-filter: blur(14px); color: var(--text-primary, #0f172a); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34); } .guide-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .guide-title { font-weight: 700; font-size: 15px; } .guide-close { display: flex; padding: 4px; border: 0; border-radius: 6px; background: transparent; color: var(--text-secondary, #64748b); cursor: pointer; } .guide-close:hover { background: var(--bg-input, rgba(148, 163, 184, 0.16)); } .guide-score { margin-bottom: 14px; font-size: 13px; color: var(--text-secondary, #475569); } .guide-bar { margin-top: 6px; height: 6px; border-radius: 999px; background: var(--border-color, rgba(148, 163, 184, 0.22)); overflow: hidden; } .guide-bar i { display: block; height: 100%; border-radius: 999px; background: #2563eb; } /* --- Steps ------------------------------------------------------------- */ .guide-steps { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; } .guide-step { border: 1px solid var(--border-color, rgba(148, 163, 184, 0.24)); border-radius: 12px; padding: 4px; } .guide-step.is-active { border-color: rgba(59, 130, 246, 0.55); background: rgba(59, 130, 246, 0.10); } .guide-step.is-done { opacity: 0.62; } .guide-step-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; background: transparent; font: inherit; text-align: inherit; cursor: pointer; } .guide-num { display: flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border-radius: 999px; background: var(--bg-input, rgba(148, 163, 184, 0.22)); color: var(--text-secondary, #475569); font-size: 12px; font-weight: 700; } .guide-step.is-active .guide-num { background: #2563eb; color: #fff; } .guide-step.is-done .guide-num { background: rgba(5, 150, 105, 0.18); color: var(--success, #059669); } .guide-step-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .guide-step-text b { font-size: 13.5px; } .guide-count { font-size: 12px; color: var(--text-secondary, #64748b); } .guide-step.is-done .guide-count { color: var(--success, #059669); } .guide-why { margin: 0 8px 8px; font-size: 12.5px; line-height: 1.55; color: var(--text-secondary, #475569); } .guide-go { margin: 0 8px 8px; padding: 8px 14px; border: 0; border-radius: 9px; background: #2563eb; color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .guide-go:hover { background: #1d4ed8; } .guide-foot { margin: 12px 0 0; font-size: 11.5px; color: var(--text-muted, #94a3b8); } /* --- The glow ---------------------------------------------------------- */ /* Two strengths on purpose. The spotlight is "the page you want is here" and * appears once; the mark is "this specific item still needs you" and may * appear a hundred times, so it has to stay legible en masse. A hundred * pulsing rings is unreadable, so only the spotlight animates. */ .guide-spotlight { position: relative; z-index: 1; border-radius: 10px; outline: 2px solid rgba(37, 99, 235, 0.9); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.18), 0 0 22px rgba(59, 130, 246, 0.45); animation: guide-pulse 1.9s ease-in-out infinite; } .guide-mark { position: relative; border-radius: 8px; outline: 2px solid rgba(59, 130, 246, 0.75); outline-offset: 2px; box-shadow: 0 0 12px rgba(59, 130, 246, 0.4); background-color: rgba(59, 130, 246, 0.08); } @keyframes guide-pulse { 0%, 100% { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.18), 0 0 22px rgba(59, 130, 246, 0.45); } 50% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0.08), 0 0 30px rgba(59, 130, 246, 0.6); } } /* An animation nobody can switch off is an accessibility problem, and this one * runs on a page people are meant to work in for an hour. */ @media (prefers-reduced-motion: reduce) { .guide-spotlight { animation: none; } } /* The bottom navigation owns the last 64px of the viewport, plus whatever the * home indicator adds. Anything fixed inside that band is not floating over the * page, it is sitting on the navigation and taking its taps - and this launcher * carries z-index 9500 against the nav's 300, so it wins every one of them. * * Measured before the fix, at 375x812: the launcher spanned x 16-191, y 752-796, * and elementFromPoint at the centre of each nav button returned the launcher * for הזמנות, קבלות and רכש. Three tabs that could not be reached at all. * * So it now clears the whole band, and drops its label. The label is what makes * it 175px wide, and a pill that long parked over the content is the other half * of the complaint. Icon and count carry the meaning; the accessible name comes * from aria-label on the button, which is what lets the text go. */ @media (max-width: 768px) { #guide-launcher { bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 12px); left: 12px; padding: 10px 12px; } #guide-launcher > span:not(.guide-launcher-count) { display: none; } /* Above the launcher, which is itself above the nav. */ #guide-panel { bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 64px); left: 12px; right: 12px; width: auto; max-height: min(58vh, 520px); } }