/* ========================================================================== Aven — Native App Shell A Material-You-inflected component layer laid over the existing Aven brand tokens (--pink/--lime/--amber/--teal from style.css), so the dashboard reads like an installed Android app: a fixed bottom tab bar, an elevated app bar, tactile card "sheets" with real shadow depth instead of hairline borders, and a floating action button for the primary action on each screen. Reuses the existing brand palette on purpose — the redesign is structural (native app chrome), not a re-skin of the brand. ========================================================================== */ :root { --app-bar-h: 56px; --bottom-nav-h: 64px; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --elevation-1: 0 1px 2px rgba(33, 27, 54, 0.06), 0 1px 1px rgba(33, 27, 54, 0.04); --elevation-2: 0 2px 6px rgba(33, 27, 54, 0.08), 0 1px 2px rgba(33, 27, 54, 0.06); --elevation-3: 0 8px 24px rgba(33, 27, 54, 0.14), 0 2px 6px rgba(33, 27, 54, 0.08); --radius-sheet: 20px; --radius-card: 16px; } .app-shell { min-height: 100vh; background: var(--bg, #FBF9F5); padding-top: calc(var(--app-bar-h) + var(--safe-top)); padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 12px); } /* ---- App bar ---- */ .app-bar { position: fixed; top: 0; left: 0; right: 0; height: calc(var(--app-bar-h) + var(--safe-top)); padding-top: var(--safe-top); display: flex; align-items: center; justify-content: space-between; padding-left: 16px; padding-right: 16px; background: var(--bg-card, #fff); box-shadow: var(--elevation-1); z-index: 40; } .app-bar-title { font-weight: 700; font-size: 1.05rem; color: var(--text, #211B36); } .app-bar-action { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; color: var(--text-dim, #625C79); transition: background .15s ease; } .app-bar-action:active { background: var(--pink-dim, rgba(124,111,240,.1)); } /* ---- Bottom nav ---- */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: calc(var(--bottom-nav-h) + var(--safe-bottom)); padding-bottom: var(--safe-bottom); display: flex; background: var(--bg-card, #fff); box-shadow: 0 -2px 12px rgba(33, 27, 54, 0.08); z-index: 40; } .bottom-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-decoration: none; color: var(--text-faint, #9891AC); font-size: 0.62rem; font-weight: 600; position: relative; -webkit-tap-highlight-color: transparent; padding: 0 2px; min-width: 0; } .bottom-nav-item span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .bottom-nav-item svg { width: 21px; height: 21px; } @media (max-width: 380px) { /* Six tabs on a narrow phone: keep icons full-size but drop the text label rather than letting it wrap or get clipped mid-word. */ .bottom-nav-item span:last-child { display: none; } .bottom-nav-item { gap: 0; } } .bottom-nav-item.active { color: var(--pink, #7C6FF0); } .bottom-nav-item.active::before { content: ''; position: absolute; top: 2px; width: 28px; height: 3px; border-radius: 3px; background: var(--pink, #7C6FF0); } /* ---- Elevated cards ("sheets") ---- */ .sheet { background: var(--bg-card, #fff); border-radius: var(--radius-sheet); box-shadow: var(--elevation-2); padding: 20px; } .tile { background: var(--bg-card, #fff); border-radius: var(--radius-card); box-shadow: var(--elevation-1); padding: 16px; transition: box-shadow .15s ease, transform .12s var(--ease-spring, ease); } .tile:active { box-shadow: var(--elevation-2); transform: scale(0.99); } @media (hover: hover) { .tile:hover { box-shadow: var(--elevation-2); transform: translateY(-2px); } } .tile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } /* ---- Floating action button ---- */ .fab { position: fixed; right: 20px; bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 16px); width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--pink, #7C6FF0), var(--amber, #E8875B)); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--elevation-3); border: none; cursor: pointer; z-index: 39; transition: transform .12s var(--ease-spring, ease); } .fab:active { transform: scale(0.94); } @media (hover: hover) { .fab:hover { transform: scale(1.06) translateY(-2px); } } /* Chat widget FAB/panel: on app-shell pages, sit above the bottom-nav bar (mobile) the same way .fab does; on wide screens the nav becomes a left rail instead, so no bottom offset is needed there. */ .has-bottom-nav .av-chat-fab { bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 16px); } .has-bottom-nav .av-chat-panel { bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 86px); } /* The "Build a Career Roadmap" shortcut FAB (account-dashboard.php) used the exact same right:20px / bottom:calc(...+16px) position as the chat FAB right above — since both are global-ish, app-shell, bottom-right circles, they landed perfectly on top of each other on mobile, so only whichever rendered last was actually tappable. Stack this one directly above the chat FAB instead, using the same 86px offset already used for .av-chat-panel just above (so it lines up with the chat panel's open position too, not just an arbitrary gap). */ .has-bottom-nav .fab { bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 86px); } @media (min-width: 720px) { .app-shell-has-rail .av-chat-fab { bottom: 20px; } .app-shell-has-rail .av-chat-panel { bottom: 90px; } /* Bottom nav becomes a left rail at this width, so there's no nav bar height to stack above any more — sit level with the chat FAB instead of floating at the old mobile height, offset sideways so the two don't collide here either. */ .app-shell-has-rail .fab { bottom: 20px; right: 92px; } } /* ---- Section header (used above tile-grids) ---- */ .app-section-title { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-faint, #9891AC); margin: 24px 4px 10px; display: flex; align-items: center; gap: 8px; } .app-section-title::before { content: ''; width: 3px; height: 14px; border-radius: 3px; background: linear-gradient(180deg, var(--pink, #7C6FF0), var(--lime, #1FA97E)); } @media (min-width: 720px) { /* On wider viewports the bottom nav becomes a left rail instead of fighting for space — still "app-like", just adapted to the form factor, the way Android apps do on tablets. Scoped to .app-shell-has-rail (set on in includes/header.php) because pages that hide the bottom nav entirely (login, signup, OTP — anywhere before a person is signed in) render no rail at all; without this scoping, .app-shell/.app-bar still reserved 88px of left space for a rail that was never in the DOM, leaving a bare gap showing the plain page background in the top-left corner. */ .app-shell-has-rail .bottom-nav { flex-direction: column; left: 0; right: auto; top: 0; bottom: 0; width: 88px; height: 100%; padding-top: calc(var(--app-bar-h) + 12px); box-shadow: 2px 0 12px rgba(33,27,54,0.06); } .app-shell-has-rail .bottom-nav-item.active::before { top: auto; left: 0; width: 3px; height: 28px; } .app-shell-has-rail .app-shell { padding-left: 88px; padding-bottom: 24px; } .app-shell-has-rail .app-bar { left: 88px; } } @media (prefers-reduced-motion: reduce) { .tile, .fab, .app-bar-action { transition: none; } } /* ---- Marketing/content pages: bottom nav, mobile-only ---- Set on in includes/header.php for any page that isn't the app-shell dashboard and hasn't explicitly opted out (pageHideBottomNav). These pages already have a full nav bar (.av2-header) for wider viewports, so the bottom tab bar is only needed — and only shown — below the tablet breakpoint. This is the fix for "half the site has no mobile nav": previously includes/footer.php only rendered