/* ============================================================ BRRO CAUSE — Mobile bottom navigation bar ============================================================ Plain CSS on purpose (not Tailwind utility classes) — app.min.css is a PURGED production build, so any new Tailwind classes used only here wouldn't exist in it unless someone reruns `npm run build:css`. Plain CSS always works regardless of that build step. Desktop (>=768px) keeps the existing top nav — this bar is mobile-only. ============================================================ */ .mobile-bottom-nav { display: none; } @media (max-width: 767px) { /* Leaves room at the bottom ONLY on pages that actually show the bar (marked with .has-mobile-bottom-nav on — see includes/header.php). This avoids leaving a blank 64px gap at the bottom of every other page. */ body.has-mobile-bottom-nav { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } body.has-mobile-bottom-nav .mobile-bottom-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; height: 64px; padding-bottom: env(safe-area-inset-bottom, 0px); background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(20px) saturate(180%); border-top: 1px solid rgba(15, 23, 42, 0.08); box-shadow: 0 -8px 30px -12px rgba(30, 41, 90, 0.18); } .mobile-bottom-nav__item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; color: #94A3B8; font-size: 10px; font-weight: 700; padding-top: 8px; } .mobile-bottom-nav__item i { font-size: 18px; line-height: 1; } .mobile-bottom-nav__item.is-active { color: #0B6FD1; } /* Center "Start a fundraiser" button — raised, filled, brand color */ .mobile-bottom-nav__cta { flex: 1 1 0; display: flex; align-items: flex-start; justify-content: center; text-decoration: none; margin-top: -22px; } .mobile-bottom-nav__cta-circle { width: 52px; height: 52px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #1296FB, #0B6FD1); box-shadow: 0 10px 24px -6px rgba(18, 150, 251, 0.55); color: #fff; font-size: 20px; border: 4px solid #F3F5FB; } }