/* Driver.js product-tour popover — themed to match the app's confirm-popup design language (`.ish-confirm-modal` in ish-design.css): a white rounded card, deep-navy display-font title, muted body copy, a sunken footer band, and the same Cancel/Confirm button treatment (outline + navy primary). WHY THIS IS GLOBAL (not a .razor.css / not a Blazor component): Driver.js renders its popover at the root, OUTSIDE any Blazor component's CSS scope — so a scoped stylesheet would never match it, and the ConfirmModal Blazor component can't be injected into Driver's own DOM. The reusable mechanism here is this global theme, opted into per-tour via `popoverClass: 'ish-tour-popover'` (see wwwroot/js/tour.js). It reuses the shared --ucpm-* palette tokens, so it tracks the design system automatically. Selectors are doubled-up (.driver-popover.ish-tour-popover ...) so this theme only wins over driver.css for OUR tours and never restyles a stray popover. */ .driver-popover.ish-tour-popover { background: #fff; max-width: 340px; padding: 0; /* we band the title / description / footer ourselves */ border-radius: var(--ucpm-radius-lg); box-shadow: 0 20px 60px rgba(15, 30, 45, .25), 0 4px 12px rgba(15, 30, 45, .10); font-family: var(--ucpm-font-sans); } /* Title — the modal "head": display font, deep navy, with a divider beneath. */ .driver-popover.ish-tour-popover .driver-popover-title { margin: 0; padding: 18px 20px 12px; font-family: var(--ucpm-font-display); font-size: 16.5px; font-weight: 600; line-height: 1.3; letter-spacing: -.005em; color: var(--ucpm-deep-navy); } /* Description — the modal "body" message. */ .driver-popover.ish-tour-popover .driver-popover-description { margin: 0; padding: 0 20px 16px; font-size: 13.5px; line-height: 1.55; color: var(--ucpm-fg2); } .driver-popover.ish-tour-popover .driver-popover-description b { color: var(--ucpm-deep-navy); font-weight: 600; } /* Footer — the modal "foot": sunken band, progress on the left, buttons right. */ .driver-popover.ish-tour-popover .driver-popover-footer { margin: 0; padding: 12px 20px; border-top: 1px solid var(--ucpm-divider); background: var(--ucpm-surface-sunken); display: flex; align-items: center; justify-content: space-between; gap: 10px; /* The card is rounded on all four corners, but this footer's sunken fill is a square rectangle that would otherwise cover the bottom two. The confirm modal hides this with `overflow:hidden` on .modal-content — we can't, since Driver's arrow is a child that pokes outside the box and would be clipped — so we round the footer's own bottom corners to match the card instead. */ border-bottom-left-radius: var(--ucpm-radius-lg); border-bottom-right-radius: var(--ucpm-radius-lg); } .driver-popover.ish-tour-popover .driver-popover-progress-text { font-size: 12px; font-weight: 500; color: var(--ucpm-fg3); } .driver-popover.ish-tour-popover .driver-popover-navigation-btns { display: flex; gap: 8px; } /* Buttons mirror `.ish-confirm-modal__foot .btn` (Cancel = outline, Confirm = navy). Reset Driver's default gradient / text-shadow / faux-border box-shadow first. */ .driver-popover.ish-tour-popover .driver-popover-navigation-btns button { margin: 0; padding: 6px 14px; font-family: var(--ucpm-font-sans); font-size: 13px; font-weight: 600; line-height: 1.3; border-radius: var(--ucpm-radius-sm); text-shadow: none; background-image: none; box-shadow: none; transition: background .12s, border-color .12s, color .12s; } /* Back = .btn-cancel */ .driver-popover.ish-tour-popover .driver-popover-prev-btn { background: #fff; border: 1px solid var(--ucpm-divider-strong); color: var(--ucpm-fg2); } .driver-popover.ish-tour-popover .driver-popover-prev-btn:hover { background: var(--ucpm-ink-025); border-color: var(--ucpm-fg3); color: var(--ucpm-deep-navy); } /* Next / Done = .btn-confirm */ .driver-popover.ish-tour-popover .driver-popover-next-btn { background: var(--ucpm-deep-navy); border: 1px solid var(--ucpm-deep-navy); color: #fff; } .driver-popover.ish-tour-popover .driver-popover-next-btn:hover { background: #1b2e3c; border-color: #1b2e3c; color: #fff; } /* Close (×) — subtle, matching the muted foreground. */ .driver-popover.ish-tour-popover .driver-popover-close-btn { color: var(--ucpm-ink-300); font-size: 20px; transition: color .12s; } .driver-popover.ish-tour-popover .driver-popover-close-btn:hover { color: var(--ucpm-deep-navy); } /* The arrow is white by default (Driver matches it to the popover bg); we keep the card white, so no arrow override is needed. */ /* Step 1 (the welcome screen) only — a roomier introductory popover. Driver applies this through the welcome step's own popoverClass (which is why that step lists BOTH ish-tour-popover and ish-tour-welcome — a step-level popoverClass replaces the global one rather than adding to it). Every other popover keeps the standard ish-tour-popover sizing. */ .driver-popover.ish-tour-welcome { max-width: 460px; } .driver-popover.ish-tour-welcome .driver-popover-title { font-size: 20px; } .driver-popover.ish-tour-welcome .driver-popover-description { font-size: 15px; } /* The sidebar collapse toggle is reveal-on-hover (opacity:0 until the sidebar is hovered — see NavMenu.razor.css). When the tour spotlights it, Driver adds .driver-active-element to the real element, so force it visible for that step; otherwise the tour would point at an invisible button. */ .ish-navtoggle.driver-active-element { opacity: 1 !important; }