/* StimPlan guided product tour ยท spotlight + coachmarks Self-contained. Brand: green #0F7A4D, navy #0F2A4A. */ :root { --tour-green: #0F7A4D; --tour-green-d: #0B5E3B; --tour-navy: #0F2A4A; } /* Dim layer for the welcome modal (full screen) */ #tour-backdrop { position: fixed; inset: 0; z-index: 99970; background: rgba(9, 20, 36, 0.66); backdrop-filter: blur(1px); opacity: 0; transition: opacity .2s ease; } #tour-backdrop.show { opacity: 1; } /* Spotlight ring around the highlighted target */ #tour-ring { position: fixed; z-index: 99980; border-radius: 10px; border: 2px solid var(--tour-green); box-shadow: 0 0 0 9999px rgba(9, 20, 36, 0.62), 0 0 0 4px rgba(15, 122, 77, 0.35), 0 8px 30px rgba(0,0,0,0.25); pointer-events: none; transition: all .28s cubic-bezier(.4,0,.2,1); } #tour-ring.pulse::after { content: ''; position: absolute; inset: -2px; border-radius: 10px; border: 2px solid var(--tour-green); animation: tourPulse 1.6s ease-out infinite; } @keyframes tourPulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.12); opacity: 0; } } /* Coachmark / tooltip card */ #tour-pop { position: fixed; z-index: 100000; width: 320px; max-width: calc(100vw - 32px); background: #fff; border-radius: 14px; box-shadow: 0 18px 50px rgba(9,20,36,0.34), 0 2px 8px rgba(9,20,36,0.18); font-family: 'Manrope', system-ui, sans-serif; overflow: hidden; opacity: 0; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease; } #tour-pop.show { opacity: 1; transform: translateY(0); } #tour-pop .tp-bar { height: 4px; background: var(--tour-green); width: 100%; } #tour-pop .tp-body { padding: 16px 18px 6px; } #tour-pop .tp-step { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--tour-green); margin-bottom: 6px; } #tour-pop .tp-title { font-size: 16px; font-weight: 700; color: #14202E; letter-spacing: -0.2px; margin-bottom: 6px; line-height: 1.3; } #tour-pop .tp-text { font-size: 13.5px; line-height: 1.55; color: #44505F; } #tour-pop .tp-foot { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px 16px; gap: 10px; } #tour-pop .tp-count { font-size: 12px; color: #8A95A3; font-weight: 600; white-space: nowrap; } #tour-pop .tp-actions { display: flex; align-items: center; gap: 8px; } #tour-pop button { font-family: inherit; cursor: pointer; border: none; border-radius: 8px; font-weight: 600; } #tour-pop .tp-skip { background: none; color: #8A95A3; font-size: 12.5px; padding: 6px 4px; } #tour-pop .tp-skip:hover { color: #5A6573; } #tour-pop .tp-back { background: #EEF1F4; color: #44505F; font-size: 13px; padding: 8px 12px; } #tour-pop .tp-back:hover { background: #E3E7EC; } #tour-pop .tp-next { background: var(--tour-green); color: #fff; font-size: 13px; padding: 8px 14px; display: inline-flex; align-items: center; gap: 6px; } #tour-pop .tp-next:hover { background: var(--tour-green-d); } /* Arrow */ #tour-arrow { position: fixed; z-index: 100001; width: 0; height: 0; pointer-events: none; transition: all .2s ease; opacity: 0; } #tour-arrow.show { opacity: 1; } #tour-arrow.up { border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 10px solid #fff; } #tour-arrow.down { border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 10px solid #fff; } #tour-arrow.left { border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-right: 10px solid #fff; } #tour-arrow.right { border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 10px solid #fff; } /* Welcome / finish modal (centered) */ #tour-modal { position: fixed; z-index: 100000; left: 50%; top: 50%; transform: translate(-50%, -48%); opacity: 0; width: 420px; max-width: calc(100vw - 32px); background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px rgba(9,20,36,0.45); font-family: 'Manrope', system-ui, sans-serif; transition: opacity .25s ease, transform .25s ease; } #tour-modal.show { opacity: 1; transform: translate(-50%, -50%); } #tour-modal .tm-head { background: linear-gradient(135deg, var(--tour-navy), #16395f); color: #fff; padding: 22px 26px; } #tour-modal .tm-kicker { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #7FD8AE; margin-bottom: 7px; } #tour-modal .tm-title { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; } #tour-modal .tm-body { padding: 20px 26px 8px; font-size: 14px; line-height: 1.6; color: #44505F; } #tour-modal .tm-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 26px 22px; } #tour-modal button { font-family: inherit; cursor: pointer; border: none; border-radius: 9px; font-weight: 600; font-size: 14px; } #tour-modal .tm-secondary { background: #EEF1F4; color: #44505F; padding: 11px 16px; } #tour-modal .tm-secondary:hover { background: #E3E7EC; } #tour-modal .tm-primary { background: var(--tour-green); color: #fff; padding: 11px 20px; display: inline-flex; align-items: center; gap: 7px; } #tour-modal .tm-primary:hover { background: var(--tour-green-d); } /* Restart pill (always available when tour inactive) */ #tour-restart { position: fixed; z-index: 99960; right: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px; background: var(--tour-navy); color: #fff; font-family: 'Manrope', system-ui, sans-serif; font-size: 13px; font-weight: 600; padding: 10px 15px; border-radius: 999px; border: none; cursor: pointer; box-shadow: 0 8px 24px rgba(9,20,36,0.3); transition: transform .15s ease, background .15s ease; } #tour-restart:hover { transform: translateY(-1px); background: #16395f; } #tour-restart svg { width: 15px; height: 15px; } /* Mobile: tooltip becomes a bottom sheet, arrow hidden */ @media (max-width: 640px) { #tour-pop { left: 12px !important; right: 12px !important; width: auto !important; bottom: 12px !important; top: auto !important; } #tour-arrow { display: none !important; } #tour-modal { width: calc(100vw - 28px); } #tour-restart { right: 12px; bottom: 12px; padding: 9px 13px; font-size: 12px; } }