/* ========== SHEPHERD.JS TOUR CUSTOMIZATION ========== * These selectors only affect your tour because we add 'stx' on each step * and 'stx-tour-scope' on when the tour is active. * * STANDARDIZED CARD SIZES: * - card-small: 320px (simple confirmations/alerts) * - card-standard: 360px (default tour steps) * - card-large: 480px (content-heavy steps) * - card-xlarge: 650px (special completion/welcome screens) * - large-tour-step: Legacy class mapped to card-large */ /* Panel — remove grey border, soften shadow, rounder corners */ .shepherd-element.stx { background: #ffffff; color: #0f172a; border: none; /* removed */ border-radius: 12px; /* smoother */ box-shadow: 0 10px 30px rgba(2, 6, 23, 0.12); /* softer/cleaner */ max-width: 360px; /* Standard size */ width: min(92vw, 360px); font-size: 0.92rem; } /* ========== STANDARDIZED CARD SIZES ========== */ /* Small cards - For simple confirmations/alerts */ .shepherd-element.stx.card-small { max-width: 320px !important; width: min(92vw, 320px) !important; } /* Standard cards - Default tour steps (360px) */ .shepherd-element.stx.card-standard { max-width: 360px !important; width: min(92vw, 360px) !important; } /* Large cards - For content-heavy steps */ .shepherd-element.stx.card-large { max-width: 480px !important; width: min(92vw, 480px) !important; } /* Extra Large cards - For special completion/welcome screens */ .shepherd-element.stx.card-xlarge { max-width: 650px !important; width: min(92vw, 650px) !important; } /* Legacy support - Map old large-tour-step to new card-large */ .shepherd-element.stx.large-tour-step { max-width: 480px !important; width: min(92vw, 480px) !important; } /* Header & title — no divider bar, transparent header */ .shepherd-element.stx .shepherd-header { padding: 12px 16px 0 16px; background: transparent; /* ensure no grey strip */ border-bottom: none; /* remove default divider */ } .shepherd-element.stx .shepherd-title { font-size: 1.05rem; font-weight: 650; color: #0f172a; } /* Close (cancel) icon */ .shepherd-element.stx .shepherd-cancel-icon { color: #7acbbd; border-radius: 8px; padding: 6px; } .shepherd-element.stx .shepherd-cancel-icon:hover { background: rgba(122, 203, 189, 0.12); } /* Content */ .shepherd-element.stx .shepherd-content { padding: 10px 16px 16px 16px; background: transparent; /* keep body clean */ } .shepherd-element.stx .shepherd-text { font-size: 0.92rem; line-height: 1.5; color: #334155; } /* Footer & buttons */ .shepherd-element.stx .shepherd-footer { display: flex; gap: 10px; justify-content: flex-end; padding: 0 16px 16px 16px; } .shepherd-element.stx .shepherd-button { border-radius: 10px; padding: 8px 14px; font-weight: 600; font-size: 0.88rem; border: 1px solid transparent; cursor: pointer; transition: filter .15s ease, transform .05s ease; } .shepherd-element.stx .shepherd-button:active { transform: translateY(1px); } /* Primary (Next) */ .shepherd-element.stx .shepherd-button.shepherd-button-primary { background: #ed1a5e; color: #ffffff; border-color: #ed1a5e; } .shepherd-element.stx .shepherd-button.shepherd-button-primary:hover { filter: brightness(0.95); } /* Secondary (Skip) — neutral outline, less shouty */ .shepherd-element.stx .shepherd-button.shepherd-button-secondary { background: transparent; color: #0f172a; border: 1.5px solid #d1d5db; /* neutral grey */ } .shepherd-element.stx .shepherd-button.shepherd-button-secondary:hover { background: rgba(15, 23, 42, 0.04); border-color: #9ca3af; } /* Match arrow to panel (no border) */ .shepherd-element.stx .shepherd-arrow:before { background: #ffffff; border: none; /* removed grey arrow border */ box-shadow: 0 6px 18px rgba(2, 6, 23, 0.08); /* subtle depth for arrow */ } /* Overlay tuning (uses body scope because overlay sits outside step element) */ .stx-tour-scope .shepherd-modal-overlay-container.shepherd-modal-is-visible { backdrop-filter: blur(2px); } .stx-tour-scope .shepherd-modal-overlay { background: rgba(15, 23, 42, 0.45); } /* Disabled primary button */ .shepherd-element.stx .shepherd-button.shepherd-button-primary.disabled { background: #9ca3af !important; color: #ffffff !important; border-color: #9ca3af !important; cursor: not-allowed !important; opacity: 0.6 !important; } .shepherd-element.stx .shepherd-button.shepherd-button-primary.disabled:hover { filter: none !important; background: #9ca3af !important; } /* Layering */ .shepherd-element.stx { z-index: 999999; } .stx-tour-scope .shepherd-modal-overlay { z-index: 999998; }