/* ============================================================================ Gradora demo onboarding tour — coachmark / spotlight styles. Loaded by every static drill page (injected via scripts/build-demo.py) but the tour only RUNS when launched (?guide=1 / ?tour=1 or the relaunch button), so these styles are inert until JS adds the `data-gtour-active` flag to . Brand palette mirrors the site (navy #1E2A4A / #0F1729, orange #E06500 / #F57C00, cream #FFF8F0). Self-contained — no external fetch. ========================================================================== */ :root { --gtour-navy: #1E2A4A; --gtour-navy-deep: #0F1729; --gtour-orange: #E06500; --gtour-orange-bright: #F57C00; --gtour-cream: #FFF8F0; --gtour-ink: #1c1c1e; } /* Nothing is shown until the tour is active. */ .gtour-backdrop, .gtour-tooltip { display: none; } html[data-gtour-active] .gtour-backdrop, html[data-gtour-active] .gtour-tooltip { display: block; } /* The backdrop blocks interaction with the page behind the tour; the dimming itself is the spotlight ring's huge box-shadow (so the highlighted area stays bright). */ .gtour-backdrop { position: fixed; inset: 0; z-index: 2147483000; background: transparent; } /* The spotlight ring sits exactly over the target; its massive spread box-shadow IS the dimming, so the target stays bright and everything else is darkened. The orange outline + soft pulse draw the eye to the area under discussion. */ .gtour-ring { position: absolute; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(8, 12, 24, 0.74); outline: 3px solid var(--gtour-orange-bright); outline-offset: 3px; transition: top .3s cubic-bezier(.4,0,.2,1), left .3s cubic-bezier(.4,0,.2,1), width .3s cubic-bezier(.4,0,.2,1), height .3s cubic-bezier(.4,0,.2,1); pointer-events: none; animation: gtour-ring-pulse 2.2s ease-in-out infinite; } @keyframes gtour-ring-pulse { 0%, 100% { outline-color: rgba(245, 124, 0, 1); } 50% { outline-color: rgba(245, 124, 0, .45); } } @media (prefers-reduced-motion: reduce) { .gtour-ring { transition: none; animation: none; } } /* Tooltip card */ .gtour-tooltip { position: absolute; z-index: 2147483002; /* above the page's own primer drawer */ max-width: 380px; width: calc(100vw - 24px); box-sizing: border-box; background: #fff; color: var(--gtour-ink); border-radius: 16px; border: 1px solid #ece6db; box-shadow: 0 22px 60px rgba(8, 12, 24, .34); padding: 18px 20px 15px; font-family: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif; line-height: 1.55; animation: gtour-pop .24s cubic-bezier(.2,.7,.3,1) both; } @keyframes gtour-pop { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .gtour-tooltip { animation: none; } } @media (min-width: 420px) { .gtour-tooltip { width: 380px; } } /* "Live demo" tag — signals the tour is actively driving the page. */ .gtour-step-tag { display: inline-flex; align-items: center; gap: 6px; background: var(--gtour-cream); color: var(--gtour-orange); border: 1px solid #f4d9bf; font-weight: 700; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 9999px; margin-bottom: 9px; } .gtour-step-tag::before { content: ""; width: 7px; height: 7px; border-radius: 9999px; background: var(--gtour-orange); box-shadow: 0 0 0 0 rgba(224, 101, 0, .6); animation: gtour-dot 1.6s ease-out infinite; } @keyframes gtour-dot { 0% { box-shadow: 0 0 0 0 rgba(224, 101, 0, .55); } 100% { box-shadow: 0 0 0 7px rgba(224, 101, 0, 0); } } @media (prefers-reduced-motion: reduce) { .gtour-step-tag::before { animation: none; } } .gtour-head { margin: 0 0 9px; padding-right: 46px; /* reserve space so the title never runs under Skip ✕ */ } .gtour-title { margin: 0; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--gtour-navy); } .gtour-body { margin: 0 0 15px; font-size: 14.5px; color: #36363b; } .gtour-body b { color: var(--gtour-navy); font-weight: 700; } .gtour-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .gtour-progress { font-size: 12px; font-weight: 600; color: #8a8a8e; font-variant-numeric: tabular-nums; } .gtour-btns { display: flex; gap: 8px; } .gtour-btn { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13px; border-radius: 9999px; padding: 8px 16px; cursor: pointer; border: 1px solid transparent; transition: background .12s ease, color .12s ease, border-color .12s ease; } .gtour-btn-ghost { background: #fff; color: var(--gtour-navy); border-color: #d6d3cc; } .gtour-btn-ghost:hover { background: #f6f4ee; } .gtour-btn-primary { background: var(--gtour-orange); color: #fff; } .gtour-btn-primary:hover { background: #c95900; } .gtour-btn:focus-visible { outline: 3px solid var(--gtour-orange-bright); outline-offset: 2px; } /* Skip / close — sits clear in the top-right corner. */ .gtour-skip { position: absolute; top: 12px; right: 12px; background: transparent; border: 0; color: #9a9a9e; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 4px 7px; border-radius: 7px; line-height: 1; } .gtour-skip:hover { color: var(--gtour-orange); background: #f6f4ee; } .gtour-skip:focus-visible { outline: 3px solid var(--gtour-orange-bright); outline-offset: 2px; } /* Connector arrow on the tooltip, set per placement via data-attr. */ .gtour-tooltip::after { content: ""; position: absolute; width: 14px; height: 14px; background: #fff; border: 1px solid #ece6db; transform: rotate(45deg); } .gtour-tooltip[data-place="bottom"]::after { top: -8px; left: var(--gtour-arrow, 28px); border-right: 0; border-bottom: 0; } .gtour-tooltip[data-place="top"]::after { bottom: -8px; left: var(--gtour-arrow, 28px); border-left: 0; border-top: 0; } .gtour-tooltip[data-place="right"]::after { left: -8px; top: var(--gtour-arrow, 28px); border-right: 0; border-top: 0; } .gtour-tooltip[data-place="left"]::after { right: -8px; top: var(--gtour-arrow, 28px); border-left: 0; border-bottom: 0; } .gtour-tooltip[data-place="center"]::after { display: none; } /* Centered intro/outro card (no target) */ .gtour-tooltip[data-place="center"] { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); animation: gtour-pop-center .24s cubic-bezier(.2,.7,.3,1) both; } @keyframes gtour-pop-center { from { opacity: 0; transform: translate(-50%, -46%) scale(.98); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } @media (prefers-reduced-motion: reduce) { .gtour-tooltip[data-place="center"] { animation: none; } } /* Re-launch helper button the page shows (the /demo 6th box is the primary entry). */ .gtour-relaunch { position: fixed; right: 16px; bottom: 84px; z-index: 2147482000; background: var(--gtour-navy); color: #fff; border: 0; border-radius: 9999px; padding: 10px 17px; font: 600 13px 'Inter', sans-serif; cursor: pointer; box-shadow: 0 6px 18px rgba(8, 12, 24, .28); } .gtour-relaunch:hover { background: #142038; } .gtour-relaunch:focus-visible { outline: 3px solid var(--gtour-orange-bright); outline-offset: 2px; }