/* ────────────────────────────────────────────────────────────────────── * Vitality App Shell — desktop sidebar layout (loaded in ) * * This CSS lands BEFORE the first paint so the wide labeled rail * renders immediately on desktop — no flash, no jump when you click * from one page to another. * * Covers both shell patterns the app uses: * .app-shell > .sidebar (dashboard, ondemand, ai-coach, etc.) * .shell > .sidebar (program/community/course pages) * * And both item class patterns: * a.nav-item (most pages) * a.s-item (program/community-style pages) * ────────────────────────────────────────────────────────────────────── */ /* ────────────────────────────────────────────────────────────────────── * Cross-document View Transitions — Chrome/Safari/Edge 126+ * * Makes navigation between full HTML pages feel like a single-page app: * - No white flash between page loads * - The sidebar and topbar stay visually locked (they get a stable * view-transition-name so the browser treats both instances as the * same element — no cross-fade on them, only on the main content area) * - Main content cross-fades quickly (180ms) instead of hard-cutting * * Older browsers ignore these rules and use normal navigation. * ────────────────────────────────────────────────────────────────────── */ /* DISABLED 2026-07-08: cross-document view transitions were leaving long pages HALF-PAINTED after navigation in real Chrome (hard horizontal cut, void below, fixed by reload, re-broken by navigating — reported by Elizabeth on multiple pages). The old-page GPU snapshot + long scrollers don't mix reliably. The named sidebar/topbar rules below stay harmless without this opt-in; re-enable only if Chromium fixes the artifact. @view-transition { navigation: auto; } */ /* The shared, persistent shell elements — same name on every page means the browser treats them as the same DOM element across navigation. */ body .app-shell > .sidebar, body .shell > .sidebar { view-transition-name: app-sidebar; } body .topbar { view-transition-name: app-topbar; } /* Program/community subnavs stay in normal document flow. Do not give these bars a shared view-transition name; Chrome can visually promote them above the page header during cross-page/app-preview movement. */ /* Program sub-nav — left-align on desktop, centered on mobile so Coaching doesn't get cut off */ body .comm-nav.prog-nav { justify-content: flex-start !important; padding-left: 24px !important; } @media (max-width: 768px) { body .comm-nav.prog-nav { justify-content: center !important; padding-left: 10px !important; padding-right: 10px !important; gap: 4px !important; } body .comm-nav.prog-nav a.cn-btn { padding: 8px 12px !important; font-size: 11.5px !important; } } /* Sub-nav layout + tab styles — shared so every page using .comm-nav.prog-nav gets the same pill look. Previously these styles were inline-only on vitality-program-owner.html, which left Calendar/Course/Replay-Library pages with bare-text links after we removed their inline styles. */ body .comm-nav.prog-nav { display: flex; position: relative !important; top: auto !important; order: 1 !important; gap: 8px; padding-top: 14px; padding-bottom: 14px; padding-right: 24px; border-bottom: 1px solid rgba(255,255,255,0.07); overflow-x: auto; background: rgba(8,8,8,0.6); z-index: 40; } body .shell > .main > .topbar { position: relative !important; top: auto !important; order: 0 !important; } body .shell > .main > .page { order: 2 !important; } body .comm-nav.prog-nav::-webkit-scrollbar { display: none; } body .comm-nav.prog-nav a.cn-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 18px; border-radius: 20px; font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.45); border: 1px solid transparent; background: none; text-decoration: none; white-space: nowrap; cursor: pointer; transition: all 0.18s; } body .comm-nav.prog-nav a.cn-btn:hover { color: #fff; background: rgba(255,255,255,0.04); } body .comm-nav.prog-nav a.cn-btn.on { background: rgba(155,45,255,0.22); border-color: rgba(155,45,255,0.55); color: #d8b4fe; } /* Quick cross-fade on the rest (root group = everything not named above) */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.18s; animation-timing-function: ease; } /* The named persistent elements should NOT fade in/out — they should "snap" since they're the same content. Zero-duration animation = no fade. */ ::view-transition-old(app-sidebar), ::view-transition-new(app-sidebar), ::view-transition-old(app-topbar), ::view-transition-new(app-topbar) { animation: none; mix-blend-mode: normal; } /* Hide page-built notification bells + standalone help buttons everywhere — they all live in the avatar dropdown now. Covers both the topbar copy (.topbar .notif-btn/.s-notif) and the legacy sidebar copy (.nav-bottom .notif-btn, .s-bottom .s-notif) — ~29 older pages still carry a hardcoded always-on red-dot bell in the sidebar; only the avatar-dropdown dot is canonical now. */ .topbar .notif-btn, .topbar .topbar-notif, .topbar .s-notif, .nav-bottom .notif-btn, .s-bottom .s-notif, .vt-help-btn { display: none !important; } /* My Tools old role-switcher rows — gone via My Tools restructure */ .my-tools-role-hint, .tools-role-switcher { display: none !important; } /* Use 769px so the wide rail kicks in immediately above the page-level mobile breakpoint (most pages hide .sidebar at max-width:768px). No dead zone between 768 and 899px where the rail reverts to icons. */ @media (min-width: 769px) { /* Widen the grid track on either shell pattern */ body .app-shell, body .shell { grid-template-columns: 220px 1fr !important; } body .app-shell > .sidebar, body .shell > .sidebar { width: 220px !important; align-items: stretch !important; padding: 16px 12px !important; gap: 2px !important; } body .app-shell > .sidebar .wheel-avatar, body .shell > .sidebar .wheel-avatar { align-self: center; margin-bottom: 8px; } /* Items — both class patterns */ body .app-shell > .sidebar a.nav-item, body .app-shell > .sidebar a.s-item, body .shell > .sidebar a.nav-item, body .shell > .sidebar a.s-item { width: auto !important; height: auto !important; flex-direction: row !important; justify-content: flex-start !important; align-items: center !important; gap: 11px !important; padding: 10px 12px !important; font-size: 13.5px !important; font-weight: 600 !important; color: rgba(240,240,240,0.62) !important; text-decoration: none !important; border-radius: 11px !important; letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap !important; } body .app-shell > .sidebar a.nav-item svg, body .app-shell > .sidebar a.s-item svg, body .shell > .sidebar a.nav-item svg, body .shell > .sidebar a.s-item svg { width: 19px !important; height: 19px !important; flex-shrink: 0; } body .app-shell > .sidebar a.nav-item:hover, body .app-shell > .sidebar a.s-item:hover, body .shell > .sidebar a.nav-item:hover, body .shell > .sidebar a.s-item:hover { background: rgba(255,255,255,0.04) !important; color: #fff !important; } body .app-shell > .sidebar a.nav-item.active, body .app-shell > .sidebar a.nav-item[aria-current="page"], body .app-shell > .sidebar a.s-item.on, body .app-shell > .sidebar a.s-item[aria-current="page"], body .shell > .sidebar a.nav-item.active, body .shell > .sidebar a.nav-item[aria-current="page"], body .shell > .sidebar a.s-item.on, body .shell > .sidebar a.s-item[aria-current="page"] { background: linear-gradient(135deg, rgba(155,45,255,0.14), rgba(255,45,155,0.08)) !important; color: #fff !important; border: 1px solid rgba(155,45,255,0.28) !important; } /* Flatten any wrapper groups so items can stack vertically */ body .app-shell > .sidebar .s-group, body .app-shell > .sidebar .s-lbl, body .app-shell > .sidebar .s-label, body .shell > .sidebar .s-group, body .shell > .sidebar .s-lbl, body .shell > .sidebar .s-label { display: contents; } body .app-shell > .sidebar .nav-bottom, body .app-shell > .sidebar .s-bottom, body .shell > .sidebar .nav-bottom, body .shell > .sidebar .s-bottom { margin-top: auto; } /* Divider injected by vitality-app-shell.js between core nav + utility nav */ body .app-shell > .sidebar .vas-divider, body .shell > .sidebar .vas-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 10px 8px; } } /* ────────────────────────────────────────────────────────────────────── * Sub-nav tap target site-wide override. * The .cn-btn pattern lives inline-CSS in ~10 pages with 8px padding + * 12px font, which works out to ~33px tall — under the 36px tap * minimum. Boost every instance to min-height:36px so Calendar / Course * / Coaching / community tabs land reliably under a thumb without * having to refactor every page's