/** * Limitless Order Builder — Customer Feedback widget styles. * * Companion to public/js/lgsb-feedback.js. Same discipline as the guided tour * (docs/THEME-CSS-OVERRIDE-PLAYBOOK.md): the widget mounts on so * position:fixed anchors to the viewport instead of a transformed Divi * ancestor (and so #lgsb-uploader's container-type can't re-anchor it), the * design-token PRIMITIVES are copied inline onto the root by the JS, derived * tokens are rebuilt here, and anything Divi could repaint carries tripled-ID * armor at the end of the file. * * Stacking: mobile summary bar 100 < THIS 9997 < tour help button 9998 < * tour overlay 99990 < builder modals 99999. The feedback widget is * deliberately the lowest of the floating layer so it can never cover a * modal or trap a customer mid-order. * * Placement is tunable without touching JS: * --lgsb-fb-right inset from the right edge * --lgsb-fb-bottom inset from the bottom edge */ #lgsb-feedback { --lgsb-fb-right: 20px; --lgsb-fb-bottom: 20px; /* Admin-overridable primitives — overwritten inline by the JS token copy. * Literal fallbacks keep the widget styled if the copy is unavailable. */ --lgsb-primary: #007D91; --lgsb-card-bg: #ffffff; --lgsb-light-bg: #F5F7F8; --lgsb-muted: #6B7680; --lgsb-divider: #E3E8EB; --lgsb-error: #B42318; /* Derived tokens (mirrors of the #lgsb-uploader semantic layer) */ --lgsb-surface: var(--lgsb-card-bg); --lgsb-surface-dim: var(--lgsb-light-bg); --lgsb-text: #1F2933; --lgsb-text-muted: var(--lgsb-muted); --lgsb-border: var(--lgsb-divider); --lgsb-radius-card: 12px; --lgsb-radius-button: 12px; --lgsb-radius-input: 8px; --lgsb-radius-pill: 999px; --lgsb-shadow-menu: 0 6px 18px rgba(0, 0, 0, .14); --lgsb-shadow-modal: 0 12px 40px rgba(0, 0, 0, .28); position: fixed; right: var(--lgsb-fb-right); bottom: var(--lgsb-fb-bottom); left: auto; top: auto; z-index: 9997; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; font-family: inherit; line-height: 1.5; } #lgsb-feedback[hidden] { display: none; } /* ------------------------------------------------------------------- * Launcher pill * ------------------------------------------------------------------- */ #lgsb-feedback .lgsb-fb-pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: var(--lgsb-radius-pill); 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-feedback .lgsb-fb-pill:hover { /* Inset overlay instead of opacity/filter — survives theme hover skins * and never washes out the label (playbook §hover survival). */ box-shadow: 0 4px 14px rgba(0, 0, 0, .22), inset 0 0 0 999px rgba(255, 255, 255, .13); } #lgsb-feedback .lgsb-fb-pill-icon { display: inline-flex; } /* While the panel is open the pill becomes the close affordance. */ #lgsb-feedback.lgsb-fb-open .lgsb-fb-pill { background: var(--lgsb-text); } /* ------------------------------------------------------------------- * Panel * ------------------------------------------------------------------- */ #lgsb-feedback .lgsb-fb-panel { width: 340px; max-width: calc(100vw - 32px); max-height: min(80vh, 620px); overflow-y: auto; box-sizing: border-box; padding: 18px; background: var(--lgsb-surface); color: var(--lgsb-text); border-radius: var(--lgsb-radius-card); box-shadow: var(--lgsb-shadow-modal), 0 0 0 1px rgba(0, 0, 0, .05); text-align: left; transform-origin: bottom right; animation: lgsb-fb-in 180ms cubic-bezier(.2, .7, .3, 1); } #lgsb-feedback .lgsb-fb-panel[hidden] { display: none; } @keyframes lgsb-fb-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { #lgsb-feedback .lgsb-fb-panel { animation: none; } } #lgsb-feedback .lgsb-fb-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; } #lgsb-feedback .lgsb-fb-title { margin: 0; padding: 0; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--lgsb-text); } #lgsb-feedback .lgsb-fb-intro { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--lgsb-text-muted); } #lgsb-feedback .lgsb-fb-close { margin-left: auto; width: 28px; height: 28px; flex: 0 0 auto; border: 0; background: none; font: inherit; font-size: 22px; line-height: 1; color: var(--lgsb-text-muted); cursor: pointer; border-radius: 8px; } #lgsb-feedback .lgsb-fb-close:hover { background: var(--lgsb-surface-dim); color: var(--lgsb-text); } /* ------------------------------------------------------------------- * Fields * ------------------------------------------------------------------- */ #lgsb-feedback .lgsb-fb-field { margin-bottom: 14px; } #lgsb-feedback .lgsb-fb-label { display: block; margin: 0 0 6px; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--lgsb-text-muted); } /* Star rating */ #lgsb-feedback .lgsb-fb-stars { display: inline-flex; gap: 2px; } #lgsb-feedback .lgsb-fb-star { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; color: var(--lgsb-divider); cursor: pointer; border-radius: 6px; transition: color 120ms ease; } #lgsb-feedback .lgsb-fb-star.lgsb-fb-star-on { color: #E5A50A; } #lgsb-feedback .lgsb-fb-stars:hover .lgsb-fb-star { color: var(--lgsb-divider); } #lgsb-feedback .lgsb-fb-star svg { width: 22px; height: 22px; display: block; } /* Type chips */ #lgsb-feedback .lgsb-fb-chips { display: flex; flex-wrap: wrap; gap: 6px; } #lgsb-feedback .lgsb-fb-chip { padding: 7px 12px; border: 1.5px solid var(--lgsb-border); border-radius: var(--lgsb-radius-pill); background: var(--lgsb-surface); color: var(--lgsb-text); font: inherit; font-size: 12px; font-weight: 500; line-height: 1; cursor: pointer; } #lgsb-feedback .lgsb-fb-chip:hover { background: var(--lgsb-surface-dim); } #lgsb-feedback .lgsb-fb-chip[aria-pressed="true"] { border-color: var(--lgsb-primary); background: var(--lgsb-primary); color: #fff; } /* Text inputs */ #lgsb-feedback .lgsb-fb-input, #lgsb-feedback .lgsb-fb-textarea { display: block; width: 100%; box-sizing: border-box; padding: 9px 11px; border: 2px solid var(--lgsb-border); border-radius: var(--lgsb-radius-input); background: #fff; color: var(--lgsb-text); font: inherit; font-size: 13px; line-height: 1.5; } #lgsb-feedback .lgsb-fb-textarea { min-height: 96px; resize: vertical; } #lgsb-feedback .lgsb-fb-input:focus, #lgsb-feedback .lgsb-fb-textarea:focus { border-color: var(--lgsb-primary); outline: none; box-shadow: 0 0 0 3px rgba(0, 125, 145, .35); } #lgsb-feedback .lgsb-fb-counter { margin: 4px 0 0; font-size: 11px; text-align: right; color: var(--lgsb-text-muted); } #lgsb-feedback .lgsb-fb-counter.lgsb-fb-counter-near { color: var(--lgsb-error); } /* Honeypot — off-screen, never display:none (bots skip hidden fields). */ #lgsb-feedback .lgsb-fb-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ------------------------------------------------------------------- * Screenshots * ------------------------------------------------------------------- */ #lgsb-feedback .lgsb-fb-drop { display: block; width: 100%; box-sizing: border-box; padding: 14px 12px; border: 2.5px dashed var(--lgsb-border); border-radius: var(--lgsb-radius-input); background: var(--lgsb-surface-dim); color: var(--lgsb-text-muted); font: inherit; font-size: 12px; line-height: 1.4; text-align: center; cursor: pointer; } #lgsb-feedback .lgsb-fb-drop:hover, #lgsb-feedback .lgsb-fb-drop.lgsb-fb-drop-over { border-color: var(--lgsb-primary); color: var(--lgsb-text); } #lgsb-feedback .lgsb-fb-drop-hint { display: block; margin-top: 3px; font-size: 11px; } #lgsb-feedback .lgsb-fb-file-input { position: absolute; left: -9999px; width: 1px; height: 1px; } #lgsb-feedback .lgsb-fb-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; padding: 0; list-style: none; } #lgsb-feedback .lgsb-fb-thumbs:empty { display: none; } #lgsb-feedback .lgsb-fb-thumb { position: relative; width: 64px; height: 64px; margin: 0; border-radius: var(--lgsb-radius-input); border: 1px solid var(--lgsb-border); overflow: hidden; background: var(--lgsb-surface-dim); } #lgsb-feedback .lgsb-fb-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } #lgsb-feedback .lgsb-fb-thumb-remove { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: rgba(17, 17, 17, .72); color: #fff; font: inherit; font-size: 14px; line-height: 1; cursor: pointer; } #lgsb-feedback .lgsb-fb-thumb-remove:hover { background: rgba(17, 17, 17, .9); } /* ------------------------------------------------------------------- * Actions, messages, success state * ------------------------------------------------------------------- */ #lgsb-feedback .lgsb-fb-actions { display: flex; align-items: center; gap: 10px; margin-top: 4px; } #lgsb-feedback .lgsb-fb-submit { padding: 10px 18px; border: 0; border-radius: var(--lgsb-radius-button); background: var(--lgsb-primary); color: #fff; font: inherit; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; } #lgsb-feedback .lgsb-fb-submit:hover { box-shadow: inset 0 0 0 999px rgba(255, 255, 255, .13); } #lgsb-feedback .lgsb-fb-submit[disabled] { opacity: .6; cursor: default; } #lgsb-feedback .lgsb-fb-note { margin: 0 0 12px; padding: 8px 10px; border-radius: var(--lgsb-radius-input); font-size: 12px; line-height: 1.4; background: #FCF1F0; color: var(--lgsb-error); } #lgsb-feedback .lgsb-fb-note[hidden] { display: none; } #lgsb-feedback .lgsb-fb-done { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 8px 10px; text-align: center; } #lgsb-feedback .lgsb-fb-done[hidden] { display: none; } #lgsb-feedback .lgsb-fb-done-icon { color: var(--lgsb-primary); } #lgsb-feedback .lgsb-fb-done-text { margin: 0; font-size: 15px; font-weight: 600; color: var(--lgsb-text); } #lgsb-feedback .lgsb-fb-done-sub { margin: 0; font-size: 12px; color: var(--lgsb-text-muted); } /* Focus visibility for every control */ #lgsb-feedback .lgsb-fb-pill:focus-visible, #lgsb-feedback .lgsb-fb-close:focus-visible, #lgsb-feedback .lgsb-fb-star:focus-visible, #lgsb-feedback .lgsb-fb-chip:focus-visible, #lgsb-feedback .lgsb-fb-drop:focus-visible, #lgsb-feedback .lgsb-fb-thumb-remove:focus-visible, #lgsb-feedback .lgsb-fb-submit:focus-visible { outline: 3px solid rgba(0, 125, 145, .45); outline-offset: 2px; } /* ------------------------------------------------------------------- * Crisp chat coexistence — the Crisp launcher owns the bottom-right * corner at z-index ~1,000,000, far above this widget's deliberate 9997, * so it sits ON TOP of the pill. When lgsb-feedback.js detects Crisp it * adds .lgsb-fb-crisp and the pill slides LEFT of the launcher (Crisp's * default bubble is ~60px wide at a ~24px inset, so 96px clears it with * a comfortable gap) instead of fighting it for the corner. Desktop * only: on mobile the pill already rides at bottom:84px (above the * sticky summary bar), vertically clear of Crisp's launcher — and this * rule would otherwise out-specify the mobile --lgsb-fb-right below. * ------------------------------------------------------------------- */ @media (min-width: 641px) { #lgsb-feedback.lgsb-fb-crisp { --lgsb-fb-right: 96px; } } /* ------------------------------------------------------------------- * Mobile — icon-only pill, near-full-width panel, and a raised bottom * offset so the launcher clears the builder's sticky summary bar * (.lgsb-mobile-bar, bottom:12px, z-index 100). * ------------------------------------------------------------------- */ @media (max-width: 640px) { #lgsb-feedback { --lgsb-fb-right: 14px; --lgsb-fb-bottom: 84px; left: 14px; align-items: flex-end; } #lgsb-feedback .lgsb-fb-pill { padding: 12px; border-radius: 50%; } #lgsb-feedback .lgsb-fb-pill-label { display: none; } #lgsb-feedback .lgsb-fb-panel { width: 100%; max-width: none; max-height: 70vh; border-radius: 16px; } } /* ------------------------------------------------------------------- * Theme-combat armor (tripled-ID, per THEME-CSS-OVERRIDE-PLAYBOOK.md). * The widget is body-mounted, so it is scoped to its OWN id rather than * #lgsb-uploader. Each rule below exists because Divi (global module and * Theme Builder styles) repaints these element types with !important. * ------------------------------------------------------------------- */ /* Positioning armor: guarantee viewport-fixed placement even if a global * theme rule tries to re-flow this body-mounted node. */ #lgsb-feedback#lgsb-feedback#lgsb-feedback { position: fixed !important; right: var(--lgsb-fb-right) !important; bottom: var(--lgsb-fb-bottom) !important; top: auto !important; box-sizing: border-box !important; } /* Divi's button skin (padding/border/text-transform/letter-spacing) plus its * ::after arrow glyph land on anything button-shaped. */ #lgsb-feedback#lgsb-feedback#lgsb-feedback button { font-family: inherit !important; text-transform: none !important; letter-spacing: normal !important; text-decoration: none !important; transition: none !important; } #lgsb-feedback#lgsb-feedback#lgsb-feedback button::before, #lgsb-feedback#lgsb-feedback#lgsb-feedback button::after { content: none !important; display: none !important; } #lgsb-feedback#lgsb-feedback#lgsb-feedback .lgsb-fb-pill, #lgsb-feedback#lgsb-feedback#lgsb-feedback .lgsb-fb-submit { background: var(--lgsb-primary) !important; color: #fff !important; border: 0 !important; } #lgsb-feedback#lgsb-feedback#lgsb-feedback .lgsb-fb-pill *, #lgsb-feedback#lgsb-feedback#lgsb-feedback .lgsb-fb-submit * { color: #fff !important; } #lgsb-feedback#lgsb-feedback#lgsb-feedback.lgsb-fb-open .lgsb-fb-pill { background: var(--lgsb-text) !important; } #lgsb-feedback#lgsb-feedback#lgsb-feedback .lgsb-fb-chip[aria-pressed="true"] { background: var(--lgsb-primary) !important; color: #fff !important; } /* Divi forces its own field background, border-radius and font on inputs. */ #lgsb-feedback#lgsb-feedback#lgsb-feedback .lgsb-fb-input, #lgsb-feedback#lgsb-feedback#lgsb-feedback .lgsb-fb-textarea { background: #fff !important; color: var(--lgsb-text) !important; font-family: inherit !important; border-radius: var(--lgsb-radius-input) !important; width: 100% !important; max-width: none !important; } /* Theme heading/paragraph skins (color, size, transform, margins). */ #lgsb-feedback#lgsb-feedback#lgsb-feedback .lgsb-fb-title, #lgsb-feedback#lgsb-feedback#lgsb-feedback .lgsb-fb-done-text { color: var(--lgsb-text) !important; text-transform: none !important; font-family: inherit !important; padding: 0 !important; } #lgsb-feedback#lgsb-feedback#lgsb-feedback .lgsb-fb-intro, #lgsb-feedback#lgsb-feedback#lgsb-feedback .lgsb-fb-label { color: var(--lgsb-text-muted) !important; font-family: inherit !important; } /* Divi's ul/li list styling (bullets, padding) hits the thumbnail strip. */ #lgsb-feedback#lgsb-feedback#lgsb-feedback .lgsb-fb-thumbs, #lgsb-feedback#lgsb-feedback#lgsb-feedback .lgsb-fb-thumb { list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; background-image: none !important; }