/* ================================================================ TOUR.CSS - Driver.js Theme for Simmons & Simmons Design System Overrides default Driver.js styles to match Lexray's S&S branding. Loaded after driver.css to take precedence. ================================================================ */ /* Override Bootstrap's smooth scrolling during the tour so step transitions are instant. Driver.js adds .driver-active to . */ html.driver-active { scroll-behavior: auto !important; } /* Popover container */ .driver-popover { font-family: var(--ss-font-serif); background-color: #ffffff; color: var(--ss-dark, #111111); border-radius: 8px; padding: 24px 28px 20px; min-width: 300px; max-width: 400px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08); border: 1px solid rgba(0, 0, 0, 0.06); } /* Override the generic font on all children */ .driver-popover * { font-family: var(--ss-font-serif); } /* Title */ .driver-popover-title { font-family: var(--ss-font-primary); font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--ss-dark, #111111); margin: 0; padding-right: 24px; } /* Close button */ .driver-popover-close-btn { top: 12px; right: 12px; width: 28px; height: 28px; font-size: 16px; color: #999; border-radius: 4px; transition: color 0.2s ease, background-color 0.2s ease; } .driver-popover-close-btn:hover, .driver-popover-close-btn:focus { color: var(--ss-dark, #111111); background-color: #f5f5f5; } /* Description */ .driver-popover-description { font-size: 14px; line-height: 1.65; color: #444; margin-top: 8px; margin-bottom: 0; } /* Footer */ .driver-popover-footer { margin-top: 20px; padding-top: 16px; border-top: 1px solid #eee; } /* Step counter */ .driver-popover-progress-text { font-family: var(--ss-font-primary); font-size: 12px; font-weight: 500; color: #999; letter-spacing: 0.02em; } /* Buttons - base */ .driver-popover-footer button { font-family: var(--ss-font-primary); font-size: 13px; font-weight: 500; padding: 7px 16px; border-radius: 4px; border: 1px solid #ddd; background-color: #fff; color: var(--ss-dark, #111111); text-shadow: none; transition: all 0.15s ease; line-height: 1.4; letter-spacing: 0.01em; } .driver-popover-footer button:hover, .driver-popover-footer button:focus { background-color: #f8f8f8; border-color: #ccc; } /* Next / Done button - coral accent */ .driver-popover-navigation-btns .driver-popover-next-btn { background-color: var(--lx-brand); border-color: var(--lx-brand); color: #fff; } .driver-popover-navigation-btns .driver-popover-next-btn:hover, .driver-popover-navigation-btns .driver-popover-next-btn:focus { background-color: #e8454e; border-color: #e8454e; color: #fff; } /* Previous button */ .driver-popover-navigation-btns .driver-popover-prev-btn { background-color: transparent; border-color: #ddd; color: #666; } .driver-popover-navigation-btns .driver-popover-prev-btn:hover, .driver-popover-navigation-btns .driver-popover-prev-btn:focus { background-color: #f5f5f5; border-color: #ccc; color: var(--ss-dark, #111111); } /* Arrow - match popover background */ .driver-popover-arrow { border: 7px solid #fff; } .driver-popover-arrow-side-left { border-right-color: transparent; border-bottom-color: transparent; border-top-color: transparent; } .driver-popover-arrow-side-right { border-left-color: transparent; border-bottom-color: transparent; border-top-color: transparent; } .driver-popover-arrow-side-top { border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; } .driver-popover-arrow-side-bottom { border-left-color: transparent; border-top-color: transparent; border-right-color: transparent; } /* Overlay - slightly darker for better focus */ .driver-overlay { background-color: rgba(0, 0, 0, 0.6) !important; } /* Smooth highlight padding around active elements */ .driver-active-element { border-radius: 4px; } /* Welcome step (no element highlighted) - center the popover */ .driver-popover.tour-welcome { max-width: 480px; } /* Tour-specific: ensure highlighted elements are visible above sticky headers */ .driver-active .toc-sidebar { z-index: auto !important; } /* Bootstrap popover must appear above Driver.js overlay during tour */ .driver-active .popover { z-index: 1000000001 !important; } /* Keyboard navigation step — force popover to top-right of viewport. Uses !important in the stylesheet to beat Driver.js inline styles. */ .driver-popover.tour-keyboard-step { top: 80px !important; right: 16px !important; left: auto !important; bottom: auto !important; inset: 80px 16px auto auto !important; } /* Show arrow at bottom-left of keyboard step popover, pointing down toward the legislation column. Force display since Driver.js sets arrow-none on very large elements. */ .driver-popover.tour-keyboard-step .driver-popover-arrow, .driver-popover.tour-keyboard-step .driver-popover-arrow-none { display: block !important; width: 0 !important; height: 0 !important; border: 7px solid transparent !important; border-top-color: #fff !important; position: absolute !important; bottom: -14px !important; top: auto !important; left: 40px !important; right: auto !important; }