/* ============================================================= tour.css — shared first-run guided tutorial styles Paired with /tour.js. Self-contained; uses theme vars when present but falls back to hard-coded dark values. ============================================================= */ /* ---- Persistent replay button (bottom-right) ---- */ .dze-tour-launch { position: fixed; right: 16px; bottom: 16px; z-index: 9000; display: inline-flex; align-items: center; gap: 6px; font: 600 0.82rem/1 'Segoe UI', system-ui, sans-serif; color: #cfe8bf; background: #1c2a14; border: 1px solid #3e5a28; border-radius: 999px; padding: 8px 14px; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.4); transition: background .15s, color .15s, transform .15s; } .dze-tour-launch:hover { background: #28401a; color: #eaf4dc; transform: translateY(-1px); } [data-theme="light"] .dze-tour-launch { color: #2a5a10; background: #e8f4de; border-color: #a0c880; box-shadow: 0 4px 14px rgba(0,0,0,.12); } /* ---- Overlay + spotlight ---- */ .dze-tour-overlay { position: fixed; inset: 0; z-index: 9500; display: none; /* dim everything; the spotlight punches a hole via huge shadow */ } .dze-tour-overlay.dze-tour-on { display: block; } body.dze-tour-lock { overflow: hidden; } /* A modal the tour opens is raised above the dimmer (9500) but below the popover (9600) so its fields stay visible and interactive during the tour. */ .dze-tour-raise { z-index: 9550 !important; } /* Spotlight lives at level (like the popover) so it can rise above a raised modal. Hidden until the tour is active. */ .dze-tour-spotlight { display: none; } body.dze-tour-active .dze-tour-spotlight { display: block; } .dze-tour-spotlight { position: fixed; z-index: 9510; /* above the dimmer (9500) for normal steps */ border-radius: 8px; box-shadow: 0 0 0 9999px rgba(0,0,0,.66); outline: 3px solid #7fd460; box-shadow: 0 0 0 9999px rgba(0,0,0,.66), 0 0 0 3px #7fd460, 0 0 18px 4px rgba(127,212,96,.55); pointer-events: none; transition: top .2s ease, left .2s ease, width .2s ease, height .2s ease; } /* During a modal step the highlighted field is inside the raised modal (9550), so the spotlight ring must sit just above it (but below the popover, 9600). The full-page dim is dropped here — the modal itself focuses attention. */ .dze-tour-spotlight.dze-tour-spot-modal { z-index: 9560; box-shadow: 0 0 0 3px #7fd460, 0 0 18px 5px rgba(127,212,96,.7); } @media (prefers-reduced-motion: reduce) { .dze-tour-spotlight { transition: none; } } /* ---- Popover ---- */ /* Hidden by default; shown only while a tour is active. The popover lives at level (not inside the overlay) so it can sit above a raised modal. */ .dze-tour-pop { display: none; } body.dze-tour-active .dze-tour-pop { display: block; } .dze-tour-pop { position: fixed; z-index: 9600; width: min(340px, calc(100vw - 24px)); background: #161616; border: 1px solid #3e5a28; border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,.6); padding: 16px 18px; color: #d0d0d0; font-family: 'Segoe UI', system-ui, sans-serif; } [data-theme="light"] .dze-tour-pop { background: #ffffff; border-color: #a0c880; color: #222; box-shadow: 0 12px 40px rgba(0,0,0,.18); } .dze-tour-pop.dze-tour-centered { top: 50%; left: 50%; transform: translate(-50%, -50%); } .dze-tour-pop-step { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .06em; color: #7fd460; font-weight: 700; margin-bottom: 6px; } [data-theme="light"] .dze-tour-pop-step { color: #3d7020; } .dze-tour-pop-title { font-size: 1.02rem; font-weight: 800; color: #eaeaea; margin-bottom: 6px; } [data-theme="light"] .dze-tour-pop-title { color: #111; } .dze-tour-pop-body { font-size: 0.88rem; line-height: 1.55; color: #b8b8b8; } .dze-tour-pop-body code { font-family: 'Consolas', monospace; font-size: .85em; background: #0e0e0e; border: 1px solid #2a2a2a; border-radius: 3px; padding: 0 4px; color: #98d66e; } [data-theme="light"] .dze-tour-pop-body { color: #444; } [data-theme="light"] .dze-tour-pop-body code { background: #eef4e8; border-color: #b8d898; color: #2e6010; } .dze-tour-pop-btns { display: flex; align-items: center; gap: 8px; margin-top: 16px; } .dze-tour-spacer { flex: 1; } .dze-tour-btn { font: 600 0.85rem/1 'Segoe UI', system-ui, sans-serif; padding: 7px 14px; border-radius: 6px; border: 1px solid #3a3a3a; background: transparent; color: #c0c0c0; cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .dze-tour-btn:hover { color: #eaeaea; border-color: #555; } [data-theme="light"] .dze-tour-btn { color: #555; border-color: #ccc; } [data-theme="light"] .dze-tour-btn:hover { color: #111; border-color: #999; } .dze-tour-primary { background: #4e8a2e; border-color: #62ae3a; color: #fff; } .dze-tour-primary:hover { background: #62ae3a; color: #fff; } /* ---- First-run prompt ---- */ .dze-tour-prompt { position: fixed; inset: 0; z-index: 9700; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); padding: 16px; } .dze-tour-prompt-box { width: min(420px, 100%); background: #161616; border: 1px solid #3e5a28; border-radius: 12px; box-shadow: 0 16px 50px rgba(0,0,0,.6); padding: 24px; text-align: center; color: #d0d0d0; font-family: 'Segoe UI', system-ui, sans-serif; } [data-theme="light"] .dze-tour-prompt-box { background: #fff; border-color: #a0c880; color: #222; } .dze-tour-prompt-icon { font-size: 2rem; margin-bottom: 8px; } .dze-tour-prompt-title { font-size: 1.1rem; font-weight: 800; color: #eaeaea; margin-bottom: 8px; } [data-theme="light"] .dze-tour-prompt-title { color: #111; } .dze-tour-prompt-body { font-size: 0.9rem; line-height: 1.55; color: #b0b0b0; margin-bottom: 20px; } [data-theme="light"] .dze-tour-prompt-body { color: #555; } .dze-tour-prompt-btns { display: flex; gap: 10px; justify-content: center; } @media (max-width: 640px) { .dze-tour-launch { right: 12px; bottom: 12px; padding: 7px 12px; } }