/* * Tutorial / coach-mark styling. * * Used by the public site (Tailwind/daisyUI light theme). The first block * below is `driver.js/dist/driver.css` inlined verbatim (MIT licensed; see * `node_modules/driver.js/LICENSE`) so we can ship the tour styles as a * single CSS file alongside our overrides without hooking a CSS bundler * into the esbuild precompile pipeline. * * Theming uses CSS custom properties scoped under `.cvl-tutorial`, so the * host page styles the popover without affecting Driver's defaults on * third-party pages. */ /* ---- driver.js/dist/driver.css (inlined) ----------------------------- */ .driver-active .driver-overlay, .driver-active * { pointer-events: none; } .driver-active .driver-active-element, .driver-active .driver-active-element *, .driver-popover, .driver-popover * { pointer-events: auto; } @keyframes animate-fade-in { 0% { opacity: 0; } to { opacity: 1; } } .driver-fade .driver-overlay { animation: animate-fade-in 0.2s ease-in-out; } .driver-fade .driver-popover { animation: animate-fade-in 0.2s; } .driver-popover { all: unset; box-sizing: border-box; color: #2d2d2d; margin: 0; padding: 15px; border-radius: 5px; min-width: 250px; max-width: 300px; box-shadow: 0 1px 10px #0006; z-index: 1000000000; position: fixed; top: 0; right: 0; background-color: #fff; } .driver-popover * { font-family: Helvetica Neue, Inter, ui-sans-serif, "Apple Color Emoji", Helvetica, Arial, sans-serif; } /* Action hints embed ``; the universal rule above overrides Font Awesome's font-family and renders missing-glyph boxes. */ .driver-popover .fa-solid { font-family: "Font Awesome 6 Free"; font-weight: 900; } .driver-popover .fa-regular { font-family: "Font Awesome 6 Free"; font-weight: 400; } .driver-popover .fa-brands { font-family: "Font Awesome 6 Brands"; font-weight: 400; } .driver-popover-title { font: 19px/normal sans-serif; font-weight: 700; display: block; position: relative; line-height: 1.5; zoom: 1; margin: 0; } .driver-popover-close-btn { all: unset; position: absolute; top: 0; right: 0; width: 32px; height: 28px; cursor: pointer; font-size: 18px; font-weight: 500; color: #d2d2d2; z-index: 1; text-align: center; transition: color; transition-duration: 0.2s; } .driver-popover-close-btn:hover, .driver-popover-close-btn:focus { color: #2d2d2d; } .driver-popover-title[style*="block"] + .driver-popover-description { margin-top: 5px; } .driver-popover-description { margin-bottom: 0; font: 14px/normal sans-serif; line-height: 1.5; font-weight: 400; zoom: 1; } .driver-popover-footer { margin-top: 15px; text-align: right; zoom: 1; display: flex; align-items: center; justify-content: space-between; } .driver-popover-progress-text { font-size: 13px; font-weight: 400; color: #727272; zoom: 1; } .driver-popover-footer button { all: unset; display: inline-block; box-sizing: border-box; padding: 3px 7px; text-decoration: none; text-shadow: 1px 1px 0 #fff; background-color: #fff; color: #2d2d2d; font: 12px/normal sans-serif; cursor: pointer; outline: 0; zoom: 1; line-height: 1.3; border: 1px solid #ccc; border-radius: 3px; } .driver-popover-footer .driver-popover-btn-disabled { opacity: 0.5; pointer-events: none; } :not(body):has(> .driver-active-element) { overflow: hidden !important; } /* * Driver.js's vendored rule above clips overflow on any non-body element * that has the active element as a direct child. That's correct for most * cases, but our action-gated tour steps frequently highlight elements * with absolutely-positioned popouts that extend BEYOND their parent *
's bounding box: * - The filter popover (`#cvl-filter-popover`) hangs below * `` (the search/filter form). * - The language `
` opens its option * list below its wrapping `` (the language switcher form). * With `overflow: hidden` on the form, those popouts render at full size * but are clipped to the form's tiny bounding box and never paint, so * visitors see a blank Driver overlay where the popout should be. * Restore `overflow: visible` on any form whose direct child is the * active tour element. */ form:has(> .driver-active-element) { overflow: visible !important; } /* * Header controls (search, filters, language, view toggle) live in a * sticky `z-index: 50` stacking context, so they would paint behind * Driver's overlay (z-index 10000) unless the header is lifted. Lifting * the whole header without a scrim made every toolbar button look * "highlighted"; the scrim dims the header interior while the active * step target (and its descendants, e.g. the language option list) stay * above the scrim. */ header:has(.driver-active-element) { z-index: 10001 !important; position: relative; } header:has(.driver-active-element)::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-color: rgba(15, 23, 42, 0.55); } header:has(.driver-active-element) .driver-active-element { position: relative; z-index: 2; } /* * The language step asks the visitor to open `
`. Both the dropdown's option list and the * Driver popover want the same below-the-toggle slot, so when the * dropdown is open we slide the popover down past the option list * (~154px tall + a small gap) so the menu and popover stack vertically * without overlapping. Driver positions the popover with inline * `top`/`left`, so we shift via `transform` (which doesn't disturb * Driver's collision math) and add a short transition so the slide * feels intentional rather than jumpy. * * The body class `cvl-tutorial-language-menu-open` is toggled by a * `toggle` event listener in `public-tutorial.ts`. We use a class * hook instead of a `:has(#cvl-header-language[open])` selector * because :has matching can lag behind the `toggle` event in some * browser/cache combinations — listening directly to the toggle * event is deterministic. */ .driver-popover.cvl-tutorial { transition: transform 0.18s ease-out; } body.cvl-tutorial-language-menu-open .driver-popover.cvl-tutorial { transform: translateY(170px) !important; } /* * The "Program cards" step asks the visitor to click the highlighted * card to advance, but the card embeds a "See on Map" button and * per-location links that route to `?view=map&...` via Alpine handlers * (`@click.prevent`). Those handlers swap the visitor onto the map * view before the next tour step is ready, which leaves the popover * pointed at a now-detached card and effectively "breaks" the tour. * * While the program-card step is active we suppress pointer events on * those nested controls so clicks pass through to the card itself — * which is the configured `advanceOn` target. The next step * ("see-on-map") removes the class, restoring normal interaction. * * The body class `cvl-tutorial-program-card-step` is toggled by * `public-tutorial.ts` based on the active step id. */ body.cvl-tutorial-program-card-step .cvl-program-card.driver-active-element a, body.cvl-tutorial-program-card-step .cvl-program-card.driver-active-element a *, body.cvl-tutorial-program-card-step .cvl-program-card.driver-active-element button, body.cvl-tutorial-program-card-step .cvl-program-card.driver-active-element button * { /* * Both the ``/`