/** * Limitless Order Builder — Guided Tour styles. * * Companion to public/js/lgsb-tour.js. Reuses the plugin design tokens * (loaded by gang-sheet.css) and follows the theme-combat discipline in * docs/THEME-CSS-OVERRIDE-PLAYBOOK.md: the coach mark + help button mount on * (so position:fixed anchors to the viewport, not a transformed Divi * ancestor) and any text/button/link Divi could repaint carries a tripled-ID * armor override. The tour-only sample design card, by contrast, is injected * INSIDE #lgsb-uploader so it inherits the store's design tokens. * * Position offsets are exposed as CSS variables so placement can be tuned * without touching JS: * --lgsb-tour-gap gap between the target and the coach mark (desktop) * --lgsb-tour-help-left floating help button inset from the left * --lgsb-tour-help-bottom floating help button inset from the bottom * --lgsb-tour-sheet-gap bottom-sheet inset on mobile */ /* * The coach mark + help button are mounted on (not inside * #lgsb-uploader) so position:fixed anchors to the viewport — a Divi ancestor * of the uploader establishes a containing block that otherwise traps fixed * elements off-screen. Because the design tokens are scoped to #lgsb-uploader, * the JS copies the admin-overridable PRIMITIVES onto these nodes inline, and * we rebuild the DERIVED tokens the tour uses from those primitives here (with * literal fallbacks so the tour still styles if the copy is unavailable). */ .lgsb-tour, .lgsb-tour-help { /* Position offsets — defined on BOTH the overlay and the (separate, * non-inheriting) help button so var(--lgsb-tour-help-*) resolves on each. */ --lgsb-tour-gap: 14px; --lgsb-tour-help-left: 20px; --lgsb-tour-help-bottom: 20px; --lgsb-tour-sheet-gap: 10px; --lgsb-tour-overlay: rgba(17, 22, 26, .55); --lgsb-primary: #007D91; /* overwritten inline by the JS token copy */ --lgsb-card-bg: #ffffff; --lgsb-light-bg: #F5F7F8; --lgsb-muted: #6B7680; --lgsb-divider: #E3E8EB; --lgsb-surface: var(--lgsb-card-bg); --lgsb-surface-dim: var(--lgsb-light-bg); --lgsb-text: #1F2933; --lgsb-text-muted: var(--lgsb-muted); --lgsb-radius-card: 12px; --lgsb-radius-button: 12px; --lgsb-shadow-menu: 0 6px 18px rgba(0, 0, 0, .14); } .lgsb-tour { position: fixed; inset: 0; z-index: 99990; /* below the builder's own modals (99999) */ pointer-events: none; /* children opt back in */ } .lgsb-tour[hidden] { display: none; } /* Design Tools walkthrough: the mini-tour points at the EDIT MODAL's tool * tabs, so while it runs the overlay must sit ABOVE the builder modals * (the base rule deliberately sits below them for the main tour). */ .lgsb-tour.lgsb-tour--tools { z-index: 100010; } /* Full-screen scrim for centered (target-less) steps */ .lgsb-tour-backdrop { position: absolute; inset: 0; background: var(--lgsb-tour-overlay); pointer-events: auto; } /* Four spotlight panels framing the target — they block outside clicks */ .lgsb-tour-panel { position: absolute; background: var(--lgsb-tour-overlay); pointer-events: auto; } /* Transparent blocker over the target on NON-interactive steps only */ .lgsb-tour-holeblock { position: absolute; background: transparent; pointer-events: auto; } /* Highlight ring — never intercepts pointer events (correction #4) */ .lgsb-tour-ring { position: absolute; pointer-events: none; border-radius: 10px; box-shadow: 0 0 0 2px var(--lgsb-primary), 0 0 0 6px rgba(0, 125, 145, .30); transition: all .18s ease; } /* Coach-mark bubble */ .lgsb-tour-pop { position: fixed; width: 320px; max-width: calc(100vw - 24px); box-sizing: border-box; background: var(--lgsb-surface); color: var(--lgsb-text); border-radius: var(--lgsb-radius-card); box-shadow: var(--lgsb-shadow-menu), 0 0 0 1px rgba(0, 0, 0, .05); padding: 18px 18px 14px; pointer-events: auto; outline: none; } .lgsb-tour-progress { margin: 0 0 4px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--lgsb-text-muted); } .lgsb-tour-title { margin: 0 0 6px; font-size: 16px; line-height: 1.3; font-weight: 700; color: var(--lgsb-text); } .lgsb-tour-body { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--lgsb-text); } .lgsb-tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .lgsb-tour-nav { display: inline-flex; gap: 8px; margin-left: auto; } .lgsb-tour-btn { font: inherit; font-size: 13px; font-weight: 600; line-height: 1; padding: 9px 14px; border-radius: var(--lgsb-radius-button); border: 1.5px solid var(--lgsb-divider); background: var(--lgsb-surface); color: var(--lgsb-text); cursor: pointer; } .lgsb-tour-btn:hover { background: var(--lgsb-surface-dim); } .lgsb-tour-btn-primary { border-color: var(--lgsb-primary); background: var(--lgsb-primary); color: #fff; } .lgsb-tour-btn-primary:hover { filter: brightness(.95); } .lgsb-tour-linkbtn { font: inherit; font-size: 12px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--lgsb-text-muted); text-decoration: underline; } .lgsb-tour-linkbtn:hover { color: var(--lgsb-text); } .lgsb-tour-never { display: inline-block; margin-top: 12px; } .lgsb-tour-close { position: absolute; top: 8px; right: 10px; width: 28px; height: 28px; border: 0; background: none; font-size: 22px; line-height: 1; color: var(--lgsb-text-muted); cursor: pointer; border-radius: 8px; } .lgsb-tour-close:hover { background: var(--lgsb-surface-dim); color: var(--lgsb-text); } /* ------------------------------------------------------------------- * Relaunch step list (help button → full table of contents) * ------------------------------------------------------------------- */ .lgsb-tour-list { margin: 6px 0 2px; max-height: 46vh; overflow: auto; -webkit-overflow-scrolling: touch; } .lgsb-tour-list[hidden] { display: none; } .lgsb-tour-list-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .lgsb-tour-list-item { margin: 0; padding: 0; } .lgsb-tour-list-btn { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; font: inherit; padding: 9px 10px; border: 1px solid var(--lgsb-divider); border-radius: 10px; background: var(--lgsb-surface); color: var(--lgsb-text); cursor: pointer; } .lgsb-tour-list-btn:hover { background: var(--lgsb-surface-dim); border-color: var(--lgsb-primary); } .lgsb-tour-list-num { flex: 0 0 auto; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--lgsb-primary); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; } .lgsb-tour-list-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .lgsb-tour-list-title { font-size: 13px; font-weight: 600; color: var(--lgsb-text); } .lgsb-tour-list-desc { font-size: 12px; line-height: 1.4; color: var(--lgsb-text-muted); } /* "What's New" card — the announcement rows reuse the step-list button * recipe; the number circle is swapped for a small NEW pill. */ .lgsb-tour-wn-badge { flex: 0 0 auto; margin-top: 2px; padding: 4px 7px; border-radius: 999px; background: var(--lgsb-primary); color: #fff; font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: .06em; text-transform: uppercase; } /* Centered welcome / list step */ .lgsb-tour--center .lgsb-tour-pop { left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%); width: 360px; max-height: 86vh; overflow: auto; } /* Focus visibility */ .lgsb-tour-btn:focus-visible, .lgsb-tour-linkbtn:focus-visible, .lgsb-tour-list-btn:focus-visible, .lgsb-tour-close:focus-visible, .lgsb-tour-help:focus-visible { outline: 3px solid rgba(0, 125, 145, .45); outline-offset: 2px; } /* ------------------------------------------------------------------- * Mobile — bottom sheet * ------------------------------------------------------------------- */ .lgsb-tour--sheet .lgsb-tour-pop { left: var(--lgsb-tour-sheet-gap) !important; right: var(--lgsb-tour-sheet-gap) !important; bottom: var(--lgsb-tour-sheet-gap) !important; top: auto !important; transform: none !important; width: auto; max-width: none; max-height: 60vh; overflow: auto; border-radius: 16px; } .lgsb-tour--sheet.lgsb-tour--center .lgsb-tour-pop { left: var(--lgsb-tour-sheet-gap) !important; top: auto !important; } /* ------------------------------------------------------------------- * Floating help button * ------------------------------------------------------------------- */ .lgsb-tour-help { position: fixed; left: var(--lgsb-tour-help-left, 20px); bottom: var(--lgsb-tour-help-bottom, 20px); top: auto; right: auto; z-index: 9998; /* below the coach mark + builder modals */ display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: 999px; background: var(--lgsb-primary); color: #fff; font: inherit; font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .22); } .lgsb-tour-help[hidden] { display: none; } .lgsb-tour-help:hover { filter: brightness(.96); } .lgsb-tour-help-icon { display: inline-flex; } /* Collapse to a compact icon on narrow screens */ @media (max-width: 640px) { .lgsb-tour-help { padding: 12px; border-radius: 50%; } .lgsb-tour-help-label { display: none; } } /* ------------------------------------------------------------------- * Reduced motion * ------------------------------------------------------------------- */ .lgsb-tour--reduced .lgsb-tour-ring, .lgsb-tour--reduced .lgsb-tour-pop { transition: none !important; } @media (prefers-reduced-motion: reduce) { .lgsb-tour-ring { transition: none !important; } } /* ------------------------------------------------------------------- * Sample design (tour-only) — reveal + host * * While the engine runs the one-shot tour for a first-time visitor it adds * .lgsb-tour-demo to #lgsb-uploader and injects a SAMPLE card into a tour-owned * host (#lgsb-tour-demo-host) that sits inside the designs area but OUTSIDE * #lgsb-files-list. The card uses the real `.lgsb-file-row` markup + classes, so * it inherits the exact design-card styling from gang-sheet.css (no bespoke card * CSS here). These rules just reveal the (normally file-gated) designs panel, * collapse the hero dropzone, lay the host out like a single-card grid cell, and * make the sample inert. Everything is undone on tour exit. * * The builder only ever scans rows inside #lgsb-files-list / job sections / by * [data-upload-id], so the sample (tagged data-lgsb-tour-demo, hosted outside * the list) is never counted for pricing / the summary / session save / cart. * ------------------------------------------------------------------- */ #lgsb-uploader.lgsb-tour-demo .lgsb-designs-panel { display: block; } /* !important: the builder's applyJobState() sets an INLINE display on * #lgsb-files-section from the real file count; while the sample is shown we * must keep the section visible regardless, so this has to beat inline. */ #lgsb-uploader.lgsb-tour-demo #lgsb-files-section { display: block !important; } #lgsb-uploader.lgsb-tour-demo:not(.lgsb-jobs-on) .lgsb-dropzone { display: none; } /* Host lays the single real card out at a natural card width (the real list is * a 4-up grid; one card there would be cramped), left-aligned under the heading. */ #lgsb-uploader #lgsb-tour-demo-host { display: grid; gap: var(--lgsb-space-3, 12px); grid-template-columns: repeat(auto-fill, minmax(240px, 300px)); justify-content: start; margin-top: var(--lgsb-space-3, 12px); } /* The sample is illustrative only — kill all interaction so nothing can be * clicked, typed, or dragged (the overlay also blocks it during the tour). */ #lgsb-uploader .lgsb-tour-demo-card, #lgsb-uploader .lgsb-tour-demo-card * { pointer-events: none !important; cursor: default !important; } /* ------------------------------------------------------------------- * Multi-Job step (tour-only) — reveal the REAL "Manage Jobs" chrome + a * sample JOB CARD * * The `jobs` step adds .lgsb-tour-jobs to #lgsb-uploader to SHOW the real, * server-rendered Multi-Job heading (#lgsb-jobs-head, "Manage Jobs") and the * job-cards strip, into which the engine injects one sample `.lgsb-job-card` * (.lgsb-tour-jobcard) — so the step can point at a real-looking job card and * explain its editable name + Job Settings gear. This is WITHOUT entering real * jobs mode (that path does server AJAX to create/delete job groups). We reveal * the chrome, hide the flat heading + empty design grid + scroll arrows, and * make everything inert so un-backed handlers can't fire. Reverted on step exit. * ------------------------------------------------------------------- */ #lgsb-uploader.lgsb-tour-jobs .lgsb-designs-panel { display: block; } #lgsb-uploader.lgsb-tour-jobs .lgsb-jobs-head { display: flex; } #lgsb-uploader.lgsb-tour-jobs .lgsb-designs-head { display: none; } #lgsb-uploader.lgsb-tour-jobs .lgsb-jobs-strip { display: flex; } #lgsb-uploader.lgsb-tour-jobs .lgsb-jobs-arrow { display: none; } #lgsb-uploader.lgsb-tour-jobs #lgsb-files-section { display: none !important; } #lgsb-uploader.lgsb-tour-jobs .lgsb-jobs-head, #lgsb-uploader.lgsb-tour-jobs .lgsb-jobs-head *, #lgsb-uploader.lgsb-tour-jobs .lgsb-job-cards, #lgsb-uploader.lgsb-tour-jobs .lgsb-job-cards * { pointer-events: none !important; cursor: default !important; } /* ------------------------------------------------------------------- * Preview Layout step (tour-only) — reveal the plan-gated button * * #lgsb-preview-layout-btn ships inline display:none and is only shown by the * builder once a real nesting plan exists. The `preview` step force-reveals it * (the inline style is left intact, so it re-hides the instant the class comes * off) and keeps it inert. `!important` beats the inline display:none. Its base * display is inline-flex (the shared .lgsb-btn recipe). */ #lgsb-uploader.lgsb-tour-preview #lgsb-preview-layout-btn { display: inline-flex !important; pointer-events: none !important; cursor: default !important; } /* ------------------------------------------------------------------- * Dark-background toggle step (tour-only) — force-reveal + before/after * * The moon toggle is opacity:0 until you hover the thumbnail, which made the * step fail to resolve (isVisible() rejects opacity:0) and flash-skip. The * `thumbbg` step adds .lgsb-tour-thumb to #lgsb-uploader to pin the sample * card's moon button visible (so the coach mark can point at it) and the engine * auto-toggles .lgsb-thumb-dark on the thumb to play the transparent↔black * before/after. The sample art is a TRANSPARENT PNG (tour-sample-transparent.png, * black keyed out), so the whole checkerboard background flashes to black at full * size — exactly like a real design card, no insetting. A background transition * makes the flip read as a smooth demo. All inert; reverts on step exit. */ #lgsb-uploader.lgsb-tour-thumb .lgsb-thumb-dark-btn { opacity: 1 !important; } #lgsb-uploader.lgsb-tour-thumb .lgsb-file-thumb { transition: background-color 0.35s ease, background-image 0.35s ease; } /* ------------------------------------------------------------------- * Order-summary steps (tour-only) — reveal the design-gated status block * * gang-sheet.js hides #lgsb-order-status (the "Update Order Summary" card) and * the Preview Layout button until a REAL design exists (totalDesignCount()>0). * The tour runs on a SAMPLE (0 real designs), so those targets stay display:none * and their steps flash-skip. The `summary`/`update` steps add .lgsb-tour-summary * to #lgsb-uploader to force the status block visible (the engine paints a * realistic "Summary Needs Update" state) and keep it inert. `!important` beats * gang-sheet.js's inline display:none; reverts on step exit. */ #lgsb-uploader.lgsb-tour-summary #lgsb-order-status { display: block !important; pointer-events: none !important; cursor: default !important; } /* ------------------------------------------------------------------- * Theme-combat armor (tripled-ID, per THEME-CSS-OVERRIDE-PLAYBOOK.md). * The tour is mounted on , so it is scoped to its OWN ids * (#lgsb-tour for the coach mark, #lgsb-tour-help for the floating button) * rather than #lgsb-uploader. Pin text/buttons/links so global theme * button/link skins can't repaint them. * ------------------------------------------------------------------- */ #lgsb-tour#lgsb-tour#lgsb-tour .lgsb-tour-title, #lgsb-tour#lgsb-tour#lgsb-tour .lgsb-tour-body { color: var(--lgsb-text) !important; text-transform: none !important; font-family: inherit !important; } #lgsb-tour#lgsb-tour#lgsb-tour .lgsb-tour-btn-primary, #lgsb-tour-help#lgsb-tour-help#lgsb-tour-help { background: var(--lgsb-primary) !important; color: #fff !important; text-decoration: none !important; font-family: inherit !important; } #lgsb-tour#lgsb-tour#lgsb-tour .lgsb-tour-btn-primary *, #lgsb-tour-help#lgsb-tour-help#lgsb-tour-help * { color: #fff !important; } #lgsb-tour#lgsb-tour#lgsb-tour .lgsb-tour-btn { text-transform: none !important; letter-spacing: normal !important; font-family: inherit !important; } #lgsb-tour#lgsb-tour#lgsb-tour .lgsb-tour-linkbtn { color: var(--lgsb-text-muted) !important; font-family: inherit !important; } /* Positioning armor: guarantee viewport-fixed placement even if a global theme * rule tries to re-flow these body-mounted nodes. */ #lgsb-tour#lgsb-tour#lgsb-tour { position: fixed !important; inset: 0 !important; } #lgsb-tour-help#lgsb-tour-help#lgsb-tour-help { position: fixed !important; left: var(--lgsb-tour-help-left, 20px) !important; bottom: var(--lgsb-tour-help-bottom, 20px) !important; top: auto !important; right: auto !important; }