/* Gamified onboarding banner — shown beneath app header until tenant completes activation milestones. */ :root { /* Light card treatment with a touch of brand tint — present enough to draw attention, not so loud it competes with the page. Token-driven for theme and dark-mode coherence. */ --onboarding-banner-bg: var(--wg-brand-light); --onboarding-banner-bg-complete: var(--wg-success-light); --onboarding-banner-accent-bar: var(--wg-brand); --onboarding-banner-accent-bar-complete: var(--wg-success); --onboarding-banner-fg: #2b2f3d; --onboarding-banner-muted: #5e6478; --onboarding-banner-border: var(--wg-brand-border); --onboarding-pill-bg: var(--wg-brand-light); --onboarding-pill-border: var(--wg-brand-border); --onboarding-pill-fg: var(--wg-brand); --onboarding-pill-bg-done: var(--wg-success-light); --onboarding-pill-border-done: color-mix(in srgb, var(--wg-success) 35%, transparent); --onboarding-pill-fg-done: var(--wg-success); --onboarding-pill-check-done: var(--wg-success); --onboarding-pill-bg-partial: var(--wg-accent-light); --onboarding-pill-border-partial: var(--wg-accent-mid); --onboarding-pill-fg-partial: var(--wg-accent); --onboarding-progress-track: color-mix(in srgb, var(--wg-brand) 12%, transparent); --onboarding-progress-fill: linear-gradient(90deg, var(--wg-brand) 0%, var(--wg-accent) 100%); --onboarding-progress-fill-complete: var(--wg-success); --onboarding-cta-bg: var(--wg-brand); --onboarding-cta-bg-hover: var(--wg-brand-hover); --onboarding-cta-fg: #ffffff; --onboarding-cta-bg-complete: var(--wg-success); --onboarding-cta-fg-complete: #ffffff; --onboarding-trial-pill-bg: var(--wg-warning-light); --onboarding-trial-pill-fg: var(--wg-warning-text, #c97a00); --onboarding-trial-pill-border: color-mix(in srgb, var(--wg-warning) 50%, transparent); --onboarding-counter-bg: var(--wg-brand-light); --onboarding-counter-fg: var(--wg-brand); } /* Dark-mode tweaks — the WG tokens flip but the banner background needs help. */ body.dark-mode .onboarding-banner, [data-theme="dark"] .onboarding-banner, [data-mode="dark"] .onboarding-banner { --onboarding-banner-bg: #1a1d27; --onboarding-banner-fg: #e6e9f2; --onboarding-banner-muted: #9aa0b4; } /* Dark mode overrides — swap only where contrast warrants it. */ body.dark-mode .onboarding-banner, [data-theme="dark"] .onboarding-banner { --onboarding-banner-bg: linear-gradient(135deg, #0f1537 0%, #2d3d9c 100%); } .onboarding-banner { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; padding: 10px 20px 8px; background: var(--onboarding-banner-bg); color: var(--onboarding-banner-fg); font-size: 0.85rem; line-height: 1.3; border-top: 3px solid var(--onboarding-banner-accent-bar); border-bottom: 1px solid var(--onboarding-banner-border); position: relative; z-index: 5; } .onboarding-banner--complete { border-top-color: var(--onboarding-banner-accent-bar-complete); } /* When the app header is fixed (default aside layout = 70px tall), push the banner below the header and cancel the body's top padding so they don't double-stack. The top-menu layout uses a 140px header — override via body class at the call-site if you enable top menu. */ @media (min-width: 993px) { body.m-header--fixed .onboarding-banner { margin-top: 70px; } /* When the banner is rendered, JS adds .wg-has-onboarding-banner to . That class lets us override Metronic's fixed-header body padding without relying on sibling-combinator matching across Razor render boundaries. */ body.wg-has-onboarding-banner.m-header--fixed .m-body { padding-top: 0 !important; } /* Tenant pages typically open with an .m-subheader or .m-content that carries its own top padding tuned for the fixed-header offset. With the banner taking that role we need the first content block to sit close. */ body.wg-has-onboarding-banner.m-header--fixed .m-body .m-wrapper > .m-subheader:first-child, body.wg-has-onboarding-banner.m-header--fixed .m-body .m-wrapper > .m-content:first-child { padding-top: 10px !important; margin-top: 0 !important; } /* Keep banner content clear of the fixed left aside. Aside = 255px, minimized = 80px, hidden = 0. Background keeps its full-width strip. */ body.m-aside-left--fixed .onboarding-banner { padding-left: 275px; } body.m-aside-left--fixed.m-aside-left--minimize .onboarding-banner { padding-left: 100px; } body.m-aside-left--hide .onboarding-banner { padding-left: 20px; } } @media (max-width: 992px) { body.m-header--fixed-mobile .onboarding-banner { margin-top: 70px; } body.wg-has-onboarding-banner.m-header--fixed-mobile .m-body { padding-top: 0 !important; } } .onboarding-banner--complete { background: var(--onboarding-banner-bg-complete); } .onboarding-banner--low .onboarding-banner__cta { animation: onboarding-cta-pulse 2s ease-in-out infinite; } .onboarding-banner__inner { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .onboarding-banner__headline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .onboarding-banner__title { font-weight: 600; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 10px; } .onboarding-banner__counter { background: var(--onboarding-counter-bg); color: var(--onboarding-counter-fg); padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.3px; } .onboarding-banner__percent { color: var(--onboarding-banner-muted); font-weight: 500; font-size: 0.8rem; } .onboarding-banner__trial-group { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; } .onboarding-banner__trial-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--onboarding-trial-pill-bg); color: var(--onboarding-trial-pill-fg); border: 1px solid var(--onboarding-trial-pill-border); padding: 3px 12px; border-radius: 999px; font-weight: 600; font-size: 0.78rem; } .onboarding-banner__progress { width: 100%; height: 6px; background: var(--onboarding-progress-track); border-radius: 999px; overflow: hidden; } .onboarding-banner__progress-bar { height: 100%; background: var(--onboarding-progress-fill); border-radius: 999px; transition: width 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); } .onboarding-banner--complete .onboarding-banner__progress-bar { background: var(--onboarding-progress-fill-complete); } .onboarding-banner__tiers { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; } .onboarding-banner__tier { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .onboarding-banner__tier-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--onboarding-banner-muted); padding: 0 10px 0 0; border-right: 1px solid var(--onboarding-banner-border); } .onboarding-banner__tier--success .onboarding-banner__tier-label { color: var(--wg-accent); } .onboarding-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--onboarding-pill-bg); border: 1px solid var(--onboarding-pill-border); color: var(--onboarding-pill-fg); font-size: 0.78rem; font-weight: 500; text-decoration: none; transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease; white-space: nowrap; } .onboarding-pill:hover, .onboarding-pill:focus { color: var(--onboarding-pill-fg); background: color-mix(in srgb, var(--wg-brand) 18%, transparent); border-color: var(--wg-brand); transform: translateY(-1px); text-decoration: none; } .onboarding-pill__icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--wg-brand) 15%, transparent); color: var(--wg-brand); font-size: 0.7rem; } .onboarding-pill--done { background: var(--onboarding-pill-bg-done); border-color: var(--onboarding-pill-border-done); color: var(--onboarding-pill-fg-done); } .onboarding-pill--done .onboarding-pill__icon { background: var(--onboarding-pill-check-done); color: #ffffff; } .onboarding-pill--done:hover { background: var(--onboarding-pill-bg-done); border-color: var(--wg-success); color: var(--onboarding-pill-fg-done); transform: translateY(-1px); } .onboarding-pill--partial { background: var(--onboarding-pill-bg-partial); border-color: var(--onboarding-pill-border-partial); color: var(--onboarding-pill-fg-partial); } .onboarding-pill--partial .onboarding-pill__icon { background: color-mix(in srgb, var(--wg-accent) 25%, transparent); color: var(--wg-accent); } .onboarding-pill--partial:hover { color: var(--onboarding-pill-fg-partial); background: var(--onboarding-pill-bg-partial); border-color: var(--wg-accent); transform: translateY(-1px); } .onboarding-pill--success:not(.onboarding-pill--done):not(.onboarding-pill--partial) { border-style: dashed; } .onboarding-banner__actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .onboarding-banner__cta { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; background: var(--onboarding-cta-bg); color: var(--onboarding-cta-fg); border-radius: 999px; font-weight: 700; font-size: 0.85rem; text-decoration: none; box-shadow: 0 2px 6px color-mix(in srgb, var(--wg-brand) 30%, transparent); transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; } .onboarding-banner__cta:hover, .onboarding-banner__cta:focus { background: var(--onboarding-cta-bg-hover); color: var(--onboarding-cta-fg); text-decoration: none; transform: translateY(-1px); } .onboarding-banner--complete .onboarding-banner__cta { background: var(--onboarding-cta-bg-complete); color: var(--onboarding-cta-fg-complete); } .onboarding-banner__signup { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: transparent; color: var(--wg-warning-text, #c97a00); border: 1.5px solid var(--wg-warning, #f39c12); font-weight: 700; font-size: 0.82rem; text-decoration: none; transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease; } .onboarding-banner__signup:hover, .onboarding-banner__signup:focus { background: var(--wg-warning, #f39c12); color: #ffffff; text-decoration: none; transform: translateY(-1px); } .onboarding-banner__dismiss { background: transparent; border: 0; color: var(--onboarding-banner-muted); font-size: 1rem; cursor: pointer; padding: 6px 8px; border-radius: 4px; transition: color 0.15s ease, background 0.15s ease; } .onboarding-banner__dismiss:hover { color: var(--onboarding-banner-fg); background: color-mix(in srgb, var(--wg-brand) 10%, transparent); } /* Confetti-ish micro-animation when a pill just completed (added via JS). */ @keyframes onboarding-pill-pop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } } .onboarding-pill--just-done { animation: onboarding-pill-pop 0.5s ease-out; } @keyframes onboarding-cta-pulse { 0%, 100% { box-shadow: 0 2px 6px color-mix(in srgb, var(--wg-brand) 35%, transparent); } 50% { box-shadow: 0 4px 18px color-mix(in srgb, var(--wg-brand) 55%, transparent); } } /* Mobile — collapse pills to icons only. */ @media (max-width: 768px) { .onboarding-banner { padding: 10px 12px; gap: 10px; } .onboarding-pill__label { display: none; } .onboarding-banner__tier-label { display: none; } .onboarding-banner__trial-pill { margin-left: 0; } .onboarding-banner__cta { padding: 6px 14px; font-size: 0.8rem; } } /* ----------------------------------------------------------------------- Skeleton loading state. The banner is rendered server-side from the cheap GetVisibility() payload (always EarnedWeight=0). It then fetches real progress via AJAX after DOMContentLoaded and patches the DOM in place. While we're waiting on that fetch, the root element carries data-loading="true" — used here to subtly damp the percent / counter so the brief 0% → real% transition doesn't read as broken state. We deliberately don't blank the values out: keeping "0% complete" visible beats showing "—" because the layout/dimensions never shift, and the value-flip is a sub-second event for almost all users. ----------------------------------------------------------------------- */ .onboarding-banner[data-loading="true"] [data-onboarding-counter], .onboarding-banner[data-loading="true"] [data-onboarding-percent], .onboarding-banner[data-loading="true"] [data-onboarding-cta-label] { opacity: 0.45; transition: opacity 0.2s ease; } .onboarding-banner[data-loading="true"] [data-onboarding-progress-bar] { opacity: 0.5; transition: opacity 0.2s ease, width 0.4s ease; }