/* ═══════════════════════════════════════════════════════════ TOUR WELCOME POPUP ═══════════════════════════════════════════════════════════ */ .tour-welcome { display: none; position: fixed; inset: 0; z-index: 8000; background: rgba(0, 0, 0, 0.65); align-items: center; justify-content: center; padding: 1.5rem; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .tour-welcome--open { display: flex; animation: twBgIn 0.25s ease-out; } @keyframes twBgIn { from { opacity: 0; } to { opacity: 1; } } /* ── Card ── */ .tour-welcome__card { position: relative; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 1.5rem; padding: 2.75rem 2.5rem 2.25rem; max-width: 460px; width: 100%; text-align: center; box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06); animation: twCardIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); overflow: hidden; } @keyframes twCardIn { from { transform: translateY(28px) scale(0.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } /* Teal gradient glow in top-left corner */ .tour-welcome__glow { position: absolute; top: 0; left: 0; width: 100%; height: 50%; background: radial-gradient(ellipse at 20% 0%, rgba(46, 204, 204, 0.14) 0%, transparent 70%); pointer-events: none; } /* ── Content ── */ .tour-welcome__emoji { display: block; font-size: 3.75rem; line-height: 1; margin-bottom: 1.25rem; } .tour-welcome__title { font-size: clamp(1.375rem, 3.5vw, 1.75rem); font-weight: 800; color: var(--c-text); margin: 0 0 0.875rem; line-height: 1.2; } .tour-welcome__title span { color: var(--c-teal); } .tour-welcome__body { font-size: 0.9375rem; color: var(--c-text-2); line-height: 1.65; margin: 0 0 1.75rem; } /* ── Tour stops preview ── */ .tour-welcome__stops { display: flex; justify-content: center; gap: 2rem; margin-bottom: 1.75rem; padding: 1rem 1.5rem; background: var(--c-surface-2); border: 1px solid var(--c-border-light, var(--c-border)); border-radius: 0.875rem; } .tour-welcome__stop { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; font-size: 0.8125rem; font-weight: 500; color: var(--c-muted); } .tour-welcome__stop-icon { font-size: 1.625rem; line-height: 1; } @media (max-width: 480px) { .tour-welcome__stops { display: none; } } /* ═══════════════════════════════════════════════════════════ TOUR BLUR OVERLAY Replaces driver.js's SVG dimming entirely. A backdrop-filter blur sits over the page; the active element floats above it via z-index, so it stays sharp and fully visible in both light and dark mode with no colour-matching tricks needed. ═══════════════════════════════════════════════════════════ */ .tour-blur-overlay { display: none; position: fixed; inset: 0; z-index: 9000; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); background: rgba(0, 0, 0, 0.22) !important; /* !important: prevents dark-mode rule overriding to #0d0d0d */ pointer-events: none; } body.driver-active .tour-blur-overlay { display: block; } /* Hide driver.js's SVG overlay — we handle dimming ourselves */ body.driver-active .driver-overlay { display: none !important; } /* Lift the highlighted element above the blur overlay */ body.driver-active .driver-active-element { position: relative !important; z-index: 9500 !important; } /* ═══════════════════════════════════════════════════════════ DRIVER.JS DARK MODE OVERRIDES .driver-popover is appended directly to so it is a sibling of #theme-toggle — target with the ~ combinator. ═══════════════════════════════════════════════════════════ */ #theme-toggle:checked ~ .driver-popover { background-color: var(--c-surface); color: var(--c-text); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6); } #theme-toggle:checked ~ .driver-popover .driver-popover-title { color: var(--c-text); } #theme-toggle:checked ~ .driver-popover .driver-popover-description { color: var(--c-text-2); } #theme-toggle:checked ~ .driver-popover .driver-popover-progress-text { color: var(--c-muted); } #theme-toggle:checked ~ .driver-popover .driver-popover-close-btn { color: var(--c-muted); } #theme-toggle:checked ~ .driver-popover .driver-popover-close-btn:hover { color: var(--c-text); } #theme-toggle:checked ~ .driver-popover .driver-popover-footer button { background-color: var(--c-surface-2); color: var(--c-text); border-color: var(--c-border); text-shadow: none; } #theme-toggle:checked ~ .driver-popover .driver-popover-footer button:hover, #theme-toggle:checked ~ .driver-popover .driver-popover-footer button:focus { background-color: var(--c-teal-light, rgba(46,204,204,.1)); border-color: var(--c-teal); color: var(--c-teal); } /* Arrow — each side exposes one border; match it to the surface colour */ #theme-toggle:checked ~ .driver-popover .driver-popover-arrow-side-left { border-left-color: var(--c-surface); } #theme-toggle:checked ~ .driver-popover .driver-popover-arrow-side-right { border-right-color: var(--c-surface); } #theme-toggle:checked ~ .driver-popover .driver-popover-arrow-side-top { border-top-color: var(--c-surface); } #theme-toggle:checked ~ .driver-popover .driver-popover-arrow-side-bottom { border-bottom-color: var(--c-surface); } /* ── CTAs ── */ .tour-welcome__cta { width: 100%; justify-content: center; margin-bottom: 0.875rem; } .tour-welcome__skip { display: block; width: 100%; background: none; border: none; cursor: pointer; font-family: var(--font-body); font-size: 0.875rem; color: var(--c-muted); padding: 0.375rem; transition: color var(--t-fast, 0.15s) ease; } .tour-welcome__skip:hover { color: var(--c-text); }