/* First-run onboarding tour for the R/mapgl app — clidewo light glass theme, matching the rest of the app (fonts loaded by the host page's ). */ .rtour-overlay { position: fixed; inset: 0; z-index: 9999; font-family: 'Lora', Georgia, serif; } .rtour-scrim { position: absolute; inset: 0; background: rgba(7, 13, 13, 0.62); } .rtour-spot { position: absolute; border-radius: 10px; border: 2px solid #fedd00; pointer-events: auto; box-shadow: 0 0 0 9999px rgba(7, 13, 13, 0.62); transition: left .3s cubic-bezier(.16,1,.3,1), top .3s cubic-bezier(.16,1,.3,1), width .3s cubic-bezier(.16,1,.3,1), height .3s cubic-bezier(.16,1,.3,1); } .rtour-card { position: absolute; width: 300px; background: #fffff0; border: 1px solid #070d0d; border-radius: 14px; padding: 16px 18px; color: #070d0d; box-shadow: 0 16px 44px rgba(0, 0, 0, 0.4); transition: left .3s cubic-bezier(.16,1,.3,1), top .3s cubic-bezier(.16,1,.3,1); } .rtour-step { font-family: 'Fira Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: rgba(7, 13, 13, .56); } .rtour-title { font-family: 'Bebas Neue', 'Oswald', sans-serif; font-weight: 400; font-size: 22px; line-height: 1; text-transform: uppercase; color: #070d0d; margin-top: 4px; } .rtour-body { font-family: 'Lora', Georgia, serif; font-size: 14px; line-height: 1.5; color: #070d0d; margin: 8px 0 12px; } .rtour-dots { display: flex; gap: 6px; margin-bottom: 12px; } .rtour-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(7, 13, 13, .14); } .rtour-dot.on { background: #070d0d; } .rtour-actions { display: flex; align-items: center; justify-content: space-between; } .rtour-nav { display: flex; gap: 8px; } .rtour-btn, .rtour-skip { font-family: 'Oswald', system-ui, sans-serif; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 7px 14px; cursor: pointer; border-radius: 0; border: 1px solid #070d0d; background: transparent; color: #070d0d; transition: background .15s, color .15s; } .rtour-skip { border-color: transparent; color: rgba(7, 13, 13, .56); padding-left: 0; } .rtour-skip:hover { color: #070d0d; } .rtour-btn:hover { background: rgba(7, 13, 13, .05); } .rtour-primary { background: #fedd00; border-color: #fedd00; color: #070d0d; font-weight: 700; } .rtour-primary:hover { background: #fedd00; filter: brightness(0.94); } .rtour-help { position: fixed; left: 50%; transform: translateX(-50%); bottom: 12px; z-index: 9998; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: rgba(255, 255, 240, .9); border: 1px solid rgba(7, 13, 13, .12); color: #070d0d; font-family: 'Bebas Neue', 'Oswald', sans-serif; font-size: 18px; font-weight: 700; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); transition: background .15s; } .rtour-help:hover { background: #fedd00; } @media (prefers-reduced-motion: reduce) { .rtour-spot, .rtour-card { transition: none; } }