/* Skysnag Trust Advisor — conversion launcher (bottom right by default). widget.js adds .sgadv-left to #sgadv-root to dock the launcher and panel in the bottom-LEFT corner instead — used to hand the bottom-right to Intercom (see cfg.side: auto|left|right) so the two chat widgets never collide. Launcher and panel render in the browser TOP LAYER ([popover]) so position:fixed anchors to the real viewport even when the theme puts transform/filter on or . Explicit inset/margin/padding rules neutralize UA [popover] defaults (inset:0; margin:auto; border:solid). */ /* --sgadv-right / --sgadv-offset are set inline by widget.js, measured from Intercom's real launcher bubble so the two always align. These are only the no-Intercom fallbacks. */ #sgadv-root{ --sgadv-right: 24px; } /* Left-corner mode (set by widget.js to sidestep Intercom, which owns the bottom-right by convention). --sgadv-right then measures from the LEFT edge and the panel opens leftward. */ #sgadv-root.sgadv-left #sgadv-launcher, #sgadv-root.sgadv-left #sgadv-panel{ right: auto; left: var(--sgadv-right, 24px); } /* ── Launcher pill ─────────────────────────────────────────────────────── */ #sgadv-launcher{ position: fixed; inset: auto; right: var(--sgadv-right, 24px); bottom: var(--sgadv-offset, 24px); margin: 0; z-index: 999990; display: flex; align-items: center; gap: 11px; height: 62px; max-width: min(400px, calc(100vw - 120px)); padding: 0 22px 0 9px; border: 1px solid transparent; border-radius: 999px; cursor: pointer; color: #fff; text-align: left; white-space: nowrap; overflow: hidden; /* deep navy body + restrained hairline gradient border */ background: linear-gradient(165deg, #171e3d 0%, #0e1430 60%, #141b42 100%) padding-box, linear-gradient(135deg, rgba(130,152,220,.45), rgba(130,152,220,.05) 45%, rgba(120,150,210,.32)) border-box; box-shadow: 0 14px 34px -16px rgba(12,18,45,.6), 0 4px 12px -8px rgba(8,12,28,.45); opacity: 0; transform: translateY(16px) scale(.97); pointer-events: none; /* not interactive until revealed */ transition: opacity .45s ease, transform .35s cubic-bezier(.22,1,.36,1), max-width .45s cubic-bezier(.22,1,.36,1), padding .45s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, right .35s ease, bottom .35s ease; } #sgadv-launcher.sgadv-in, #sgadv-launcher.sgadv-open{ opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } /* entrance: a soft rise with a gentle spring-settle, on its own keyframe so the hover lift above (which shares the transform transition) stays snappy. animation-fill-mode: both holds the 0% frame before it starts and the 100% after it ends, so there's no flash of the default opacity:0 state. */ #sgadv-launcher.sgadv-rise{ animation: sgadv-rise .82s cubic-bezier(.16,1,.3,1) both; } @keyframes sgadv-rise{ 0% { opacity: 0; transform: translateY(40px) scale(.9); } 45% { opacity: 1; } 70% { transform: translateY(-4px) scale(1.012); } 100% { opacity: 1; transform: translateY(0) scale(1); } } #sgadv-launcher:hover{ transform: translateY(-2px); box-shadow: 0 20px 44px -16px rgba(20,30,80,.6), 0 5px 14px -8px rgba(8,12,28,.5); } #sgadv-launcher:active{ transform: translateY(0) scale(.98); } #sgadv-launcher:focus-visible{ outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 6px #4f74ff, 0 18px 44px -14px rgba(33,48,120,.55); } /* subtle sheen — sweeps once on hover only (no attention-seeking auto-loop) */ #sgadv-launcher .sgadv-sheen{ position: absolute; top: 0; bottom: 0; left: -60%; width: 46%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.10), transparent); transform: skewX(-18deg); pointer-events: none; opacity: 0; } #sgadv-launcher:hover .sgadv-sheen{ animation: sgadv-sheen 1.1s ease-out; } @keyframes sgadv-sheen{ 0%{ left: -60%; opacity: 1; } 100%{ left: 130%; opacity: 1; } } /* icon chip: gradient disc + shield, live dot pinging in the corner */ #sgadv-launcher .sgadv-ico{ position: relative; width: 46px; height: 46px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, #3f66d4 0%, #2a44a0 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 3px 9px -4px rgba(24,44,120,.55); } #sgadv-launcher .sgadv-ico svg{ position: absolute; width: 22px; height: 22px; transition: opacity .25s, transform .3s; } #sgadv-launcher .sgadv-ico-close{ opacity: 0; transform: rotate(-90deg) scale(.6); } #sgadv-launcher.sgadv-open .sgadv-ico-scan{ opacity: 0; transform: rotate(90deg) scale(.6); } #sgadv-launcher.sgadv-open .sgadv-ico-close{ opacity: 1; transform: none; } #sgadv-launcher .sgadv-dot{ position: absolute; top: 1px; right: 1px; width: 9px; height: 9px; border-radius: 50%; background: #35c97a; border: 2px solid #141b3a; } #sgadv-launcher.sgadv-open .sgadv-dot{ display: none; } /* unread count — pops over the icon chip corner while the panel is closed */ #sgadv-launcher .sgadv-badge{ position: absolute; top: -4px; right: -6px; z-index: 1; min-width: 19px; height: 19px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; background: #ff4757; color: #fff; font: 700 11px/15px -apple-system, "Segoe UI", sans-serif; text-align: center; border: 2px solid #131a3a; transform: scale(0); pointer-events: none; transition: transform .35s cubic-bezier(.34,1.56,.64,1); } #sgadv-launcher .sgadv-badge.sgadv-badge-in{ transform: scale(1); } /* the live dot yields to the badge when there's something to read */ #sgadv-launcher .sgadv-ico:has(.sgadv-badge-in) .sgadv-dot{ display: none; } #sgadv-launcher.sgadv-open .sgadv-badge{ display: none; } /* two-line copy: benefit + friction-killer */ #sgadv-launcher .sgadv-txt{ display: flex; flex-direction: column; gap: 3px; min-width: 0; transition: opacity .2s ease; } #sgadv-launcher .sgadv-txt strong{ font: 650 14.5px/1.15 -apple-system, "Segoe UI", Inter, sans-serif; letter-spacing: -.005em; color: #f4f7ff; overflow: hidden; text-overflow: ellipsis; /* graceful if a locale overflows */ } #sgadv-launcher .sgadv-txt small{ font: 500 11.5px/1.15 -apple-system, "Segoe UI", Inter, sans-serif; letter-spacing: .01em; color: rgba(198,212,245,.7); overflow: hidden; text-overflow: ellipsis; } /* open: pill collapses to a round close button so the panel owns the stage. Text is only HIDDEN (opacity) — never removed, so it returns on close. */ #sgadv-launcher.sgadv-open{ max-width: 64px; padding: 0 8px; gap: 0; } #sgadv-launcher.sgadv-open .sgadv-txt{ opacity: 0; } /* ── Legacy fallback (no Popover API): widget.js gives the mount this viewport box and counter-translates it against the theme's transform. The baseline transform makes the mount the containing block, so the launcher/panel anchor to it instead of the hijacked . ── */ #sgadv-root.sgadv-fix{ position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; height: 100dvh; pointer-events: none; z-index: 999990; transform: translate(0, 0); } /* ── Panel ─────────────────────────────────────────────────────────────── */ #sgadv-panel{ position: fixed; inset: auto; right: var(--sgadv-right, 24px); bottom: calc(var(--sgadv-offset, 24px) + 78px); margin: 0; border: 0; padding: 0; z-index: 999991; width: min(460px, calc(100vw - 48px)); height: min(680px, calc(100vh - var(--sgadv-offset, 24px) - 116px)); border-radius: 18px; overflow: hidden; background: #fbf8f2; box-shadow: 0 24px 64px -12px rgba(10,14,30,.45), 0 0 0 1px rgba(10,14,30,.06); opacity: 0; transform: translateY(18px) scale(.97); pointer-events: none; transform-origin: bottom right; transition: opacity .35s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1), bottom .35s ease, right .35s ease; display: flex; flex-direction: column; } #sgadv-panel.sgadv-open{ opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } #sgadv-panel .sgadv-bar{ display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding: 8px 10px; background: #14182a; flex-shrink: 0; } #sgadv-panel .sgadv-bar button, #sgadv-panel .sgadv-bar a{ background: transparent; border: 0; color: rgba(255,255,255,.75); cursor: pointer; width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s; text-decoration: none; } #sgadv-panel .sgadv-bar button:hover, #sgadv-panel .sgadv-bar a:hover{ background: rgba(255,255,255,.12); color: #fff; } #sgadv-panel .sgadv-bar svg{ width: 16px; height: 16px; } #sgadv-frame{ flex: 1; width: 100%; border: 0; background: #fbf8f2; } /* ── Mobile ────────────────────────────────────────────────────────────── */ @media (max-width: 600px){ #sgadv-root{ --sgadv-right: 16px; } /* (with Intercom present, widget.js stacks the pill above the bubble) */ #sgadv-launcher{ height: 58px; max-width: calc(100vw - 32px); padding: 0 16px 0 7px; } #sgadv-launcher .sgadv-ico{ width: 44px; height: 44px; } } @media (max-width: 540px){ /* True full-screen on phones. Must also override the higher-specificity .sgadv-left rule (id+class) or the panel keeps left:16px + width:100vw and spills off the right edge. Pin all four sides and clear any max limits. */ #sgadv-panel, #sgadv-root.sgadv-left #sgadv-panel{ left: 0; right: 0; top: 0; bottom: 0; width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; } } @media (prefers-reduced-motion: reduce){ #sgadv-launcher.sgadv-rise, #sgadv-launcher .sgadv-sheen, #sgadv-launcher .sgadv-dot::after{ animation: none; } #sgadv-launcher, #sgadv-panel, #sgadv-launcher .sgadv-txt{ transition-duration: .01s; } } /* ── Auto-inserted nav trigger (Settings → Launcher style → auto-insert) ── Deliberately minimal so it doesn't clash with the theme; override with more specific theme CSS targeting .sgadv-nav-btn if you want it to match a specific button style exactly. */ .sgadv-nav-btn{ display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; font: 600 14px/1 inherit; text-decoration: none; white-space: nowrap; color: #2e57b2; border: 1px solid #2e57b2; background: transparent; cursor: pointer; } .sgadv-nav-btn:hover{ background: rgba(46,87,178,.08); }