/* Skysnag Trust Advisor — conversion launcher (bottom right, beside Intercom). widget.js adds .sgadv-has-ic to #sgadv-root when an Intercom launcher is present: the pill then shifts left so the two sit side by side on desktop and stacks above Intercom on mobile. 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; } /* ── 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 + hairline gradient border (indigo → cyan) */ background: linear-gradient(160deg, #161d40 0%, #101631 55%, #1a2456 100%) padding-box, linear-gradient(135deg, rgba(124,151,255,.75), rgba(124,151,255,.08) 38%, rgba(86,214,255,.6)) border-box; box-shadow: 0 18px 44px -14px rgba(33,48,120,.55), 0 6px 16px -8px rgba(8,12,28,.5); 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) scale(1.015); box-shadow: 0 0 0 5px rgba(91,124,250,.13), 0 24px 54px -14px rgba(53,79,190,.6), 0 6px 16px -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); } /* periodic sheen sweep — a quiet "look at me" every few seconds */ #sgadv-launcher .sgadv-sheen{ position: absolute; top: 0; bottom: 0; left: -60%; width: 46%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.14), transparent); transform: skewX(-18deg); pointer-events: none; animation: sgadv-sheen 6s ease-in-out 3.5s infinite; } @keyframes sgadv-sheen{ 0%, 74%{ left: -60%; } 92%, 100%{ left: 130%; } } #sgadv-launcher.sgadv-open .sgadv-sheen{ animation: none; } /* 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(140deg, #5a7bff 0%, #2fb1ff 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 12px -4px rgba(47,127,255,.7); } #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: 0; right: 0; width: 11px; height: 11px; border-radius: 50%; background: #3ddc84; border: 2px solid #131a3a; } #sgadv-launcher .sgadv-dot::after{ content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid rgba(61,220,132,.7); animation: sgadv-ping 2.6s ease-out infinite; } @keyframes sgadv-ping{ 0%, 50%{ opacity: 0; transform: scale(.7); } 60% { opacity: 1; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.7); } } #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: 700 14.5px/1.1 -apple-system, "Segoe UI", Inter, sans-serif; letter-spacing: .01em; color: #fff; overflow: hidden; text-overflow: ellipsis; /* graceful if a locale overflows */ } #sgadv-launcher .sgadv-txt small{ font: 500 11.5px/1.1 -apple-system, "Segoe UI", Inter, sans-serif; letter-spacing: .02em; color: rgba(214,226,255,.78); 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){ #sgadv-panel{ right: 0; bottom: 0; width: 100vw; height: 100dvh; 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; } }