/** * Site-wide email verification banner. * * Rendered by templates/parts/verify-email-banner.php for logged-in users * whose email address is not yet verified and who haven't dismissed it for * the current login session. */ /** * Sticky-layout contract: reserve the banner's height for the sticky stack even * before custom-scripts.js measures and publishes the exact value. Without this, * a stale, slow, or not-yet-run script leaves --vh-banner-height unset, so the * dashboard sidebar + sticky widget bar (and the site header) anchor at top: 0 * and get clipped behind the banner when scrolling. The JS value refines this * once it runs and wins via the inline style it sets on ; on mobile the * dashboard shell is display:none, so this single-line 57px default (56px inner * min-height + 1px border) is always accurate wherever it is actually consumed. */ :root:has(.vh-verify-banner), :root:has(.vh-docs-banner), :root:has(.vh-2fa-banner) { --vh-banner-height: 57px; } .vh-verify-banner { position: sticky; top: 0; z-index: 1100; /* Opaque: the tint is layered over a solid surface so page content scrolling under the sticky banner never bleeds through (mirrors the docs banner). */ background: linear-gradient(rgba(var(--vh-primary-rgb), 0.06), rgba(var(--vh-primary-rgb), 0.06)), var(--vh-surface-alt); border-bottom: 1px solid rgba(var(--vh-primary-rgb), 0.22); box-shadow: inset 0 3px 0 0 var(--vh-primary); color: var(--vh-text-heading); font-family: var(--vh-font-body); } .vh-verify-banner__inner { max-width: 1280px; margin: 0 auto; min-height: 56px; padding: 0.5rem clamp(1rem, 3vw, 2rem); display: flex; align-items: center; gap: 0.85rem; } .vh-verify-banner__icon { display: inline-flex; align-items: center; flex-shrink: 0; color: var(--vh-primary); line-height: 1; } .vh-verify-banner .vh-verify-banner__message { margin: 0; font-size: 0.9rem; line-height: 1; flex: 1 1 auto; color: var(--vh-slate-700); } .vh-verify-banner__message strong { color: var(--vh-text-heading); font-weight: 600; margin-right: 0.25rem; } /* TaskHive's frontend.js loops every