/* ════════════════════════════════════════════════════════════════════════ bottom-nav-fix.css — single source of truth for the mobile bottom-tab navigation. Loaded LAST in so it wins the cascade naturally. This file is the consolidated, tested replacement for the bottom-nav rules previously scattered across: - app.css (lines 4333, 14364, 15309, 19022, 25008, plus v10–v18) - _mobile.css (lines 545, 1119, 1255+, 729+) Keep this file flat, simple, and well-commented. Do NOT add !important unless absolutely necessary — its load order is enough to win. ════════════════════════════════════════════════════════════════════════ */ /* ── 1. Defaults that affect every viewport ─────────────────────────── */ .bottom-nav { /* Variables, used by all media queries below */ --bn-h: 60px; --bn-active: var(--brand, #2563eb); } /* ── 2. Bar shell — phones & tablets (≤ 1199 px) ────────────────────── */ @media (max-width: 1199px) { .bottom-nav { /* Anchored, full-width — defeats every "centered floating pill" rule set in app.css duplicates and _mobile.css. */ position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100%; max-width: 100vw; height: auto; min-height: calc(var(--bn-h) + env(safe-area-inset-bottom, 0px)); transform: none; margin: 0; padding: 0; padding-bottom: env(safe-area-inset-bottom, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); border: 0; border-top: 1px solid color-mix(in srgb, var(--text, #0f172a) 8%, transparent); border-radius: 0; background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 -1px 0 rgba(15, 23, 42, .06), 0 -8px 28px rgba(15, 23, 42, .08); overflow: visible; display: flex; flex-direction: row; align-items: stretch; justify-content: stretch; box-sizing: border-box; z-index: 45; } [data-theme="dark"] .bottom-nav { background: rgba(10, 14, 26, .92); border-top-color: rgba(255, 255, 255, .07); } } /* ── 3. Items row — flex, 6 evenly-distributed slots ────────────────── */ .bottom-nav__items { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; justify-content: space-around; width: 100%; max-width: 100%; height: var(--bn-h); margin: 0; padding: 0 .25rem; gap: 0; overflow: visible; grid-template-columns: none; grid-template-rows: none; position: relative; box-sizing: border-box; } /* ── 4. Each tab — equal flex slot, can shrink past content ─────────── */ .bottom-nav__item { flex: 1 1 0; flex-basis: 0; flex-grow: 1; flex-shrink: 1; min-width: 0; max-width: none; width: auto; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: .3rem .15rem; margin: 0; border: 0; border-radius: 0; background: transparent; color: var(--text-muted, #6b7280); font-size: clamp(.55rem, 1.4vw, .68rem); font-weight: 500; cursor: pointer; position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: color .18s, transform .12s; text-decoration: none; box-sizing: border-box; } .bottom-nav__item:active { transform: scale(.94); transition-duration: .08s; } .bottom-nav__item.is-active { color: var(--bn-active); font-weight: 700; } /* ── 5. Icon — fluid clamp ──────────────────────────────────────────── */ .bottom-nav__icon { width: clamp(36px, 8vw, 44px); height: clamp(28px, 6vw, 32px); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; color: inherit; background: transparent; transition: background .18s, transform .18s; } .bottom-nav__icon svg { width: clamp(20px, 5vw, 24px); height: clamp(20px, 5vw, 24px); stroke: currentColor; flex-shrink: 0; } .bottom-nav__item:not(.bottom-nav__item--emi).is-active .bottom-nav__icon { background: linear-gradient(135deg, color-mix(in srgb, var(--bn-active) 16%, transparent), color-mix(in srgb, var(--bn-active) 8%, transparent)); } .bottom-nav__item:not(.bottom-nav__item--emi).is-active .bottom-nav__icon svg { transform: translateY(-1px) scale(1.08); } /* ── 6. Label — single line with ellipsis ───────────────────────────── */ .bottom-nav__label { line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: inherit; background: none; -webkit-text-fill-color: currentColor; color: inherit; margin: 0; padding: 0; } /* ── 7. EMI elevated centre tab — jewel button via icon, not via item ── */ .bottom-nav__item--emi { flex: 1 1 0; flex-basis: 0; min-width: 0; max-width: none; width: auto; margin: 0; background: transparent; border-radius: 0; box-shadow: none; color: #059669; z-index: 2; } .bottom-nav__item--emi .bottom-nav__icon { width: clamp(40px, 9.5vw, 48px); height: clamp(40px, 9.5vw, 48px); border-radius: 50%; background: linear-gradient(135deg, #10b981 0%, #059669 50%, #0d9488 100%); box-shadow: 0 4px 14px rgba(5, 150, 105, .45), 0 0 0 3px rgba(255, 255, 255, .92); color: #fff; margin-top: clamp(-8px, -1.4vw, -4px); } .bottom-nav__item--emi .bottom-nav__icon svg { color: #fff; stroke: #fff; fill: none; width: clamp(18px, 4vw, 22px); height: clamp(18px, 4vw, 22px); } .bottom-nav__item--emi:active .bottom-nav__icon { transform: scale(.94); } .bottom-nav__item--emi.is-active .bottom-nav__icon { box-shadow: 0 6px 20px rgba(5, 150, 105, .6), 0 0 0 3px rgba(255, 255, 255, .95); } .bottom-nav__item--emi .bottom-nav__label { color: #059669; -webkit-text-fill-color: #059669; } /* ── 8. Active indicator — single, predictable top notch ────────────── */ /* Nuke every other ::before / ::after the older rule sets created */ .bottom-nav__item::before, .bottom-nav__item::after { content: none; } /* Re-enable a single notch only on the non-EMI active tab */ .bottom-nav__item:not(.bottom-nav__item--emi).is-active::before { content: ''; position: absolute; top: 0; left: 22%; right: 22%; height: 3px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--bn-active), #7c3aed); box-shadow: 0 2px 6px rgba(37, 99, 235, .4); } /* ── 9. Glow accent strip ───────────────────────────────────────────── */ .bottom-nav__glow { position: absolute; top: 0; left: 0; right: 0; height: 36px; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--bn-active) 4%, transparent) 0%, transparent 100%); z-index: 0; } /* ── 10. Tiny phones (≤ 360 px) — compress more, all 6 still fit ────── */ @media (max-width: 360px) { .bottom-nav { --bn-h: 56px; } .bottom-nav__items { padding: 0 .1rem; } .bottom-nav__item { padding: .25rem .05rem; } .bottom-nav__icon { width: 32px; height: 26px; } .bottom-nav__icon svg { width: 18px; height: 18px; } .bottom-nav__label { font-size: .55rem; } .bottom-nav__item--emi .bottom-nav__icon { width: 38px; height: 38px; margin-top: -3px; } .bottom-nav__item--emi .bottom-nav__icon svg { width: 16px; height: 16px; } } /* ── 11. Foldable cover-screens (≤ 280 px) — icons only ─────────────── */ @media (max-width: 280px) { .bottom-nav__label { display: none; } .bottom-nav__item { padding: .3rem 0; } } /* ── 12. Tablet pill mode (1200-1919 px touch screens) ──────────────── */ @media (min-width: 1200px) and (max-width: 1919px) and (hover: none) and (pointer: coarse) { .bottom-nav { display: flex; --bn-h: 68px; border-radius: 22px 22px 0 0; } .bottom-nav__items { max-width: 760px; margin: 0 auto; height: 68px; padding: 0 1rem; } } /* ── 13. Desktop with mouse — hide the bar (sidebar takes over) ─────── */ @media (min-width: 1200px) and (hover: hover) and (pointer: fine) { .bottom-nav { display: none; } } /* ── 14. Page padding so content always clears the nav ──────────────── */ @media (max-width: 1199px) { body:has(nav.bottom-nav) .app .main, body:has(nav.bottom-nav) > .app > .main { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 1rem); } } @media (max-width: 360px) { body:has(nav.bottom-nav) .app .main { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 1rem); } } /* ── 15. Hide states — auth pages, public site, modals, keyboard ────── */ body.no-bottom-nav nav.bottom-nav, body.auth nav.bottom-nav, body.website nav.bottom-nav, body.public nav.bottom-nav { display: none; } body.bn-hide nav.bottom-nav, body[data-bn-hidden="1"] nav.bottom-nav, body[data-bn-keyboard="1"] nav.bottom-nav { transform: translateY(110%); pointer-events: none; transition: transform .25s ease; } /* ── 16. Landscape phone — slim nav ─────────────────────────────────── */ @media (max-height: 480px) and (max-width: 920px) and (orientation: landscape) { .bottom-nav { --bn-h: 48px; } .bottom-nav__item { padding: .2rem .15rem; gap: 1px; } .bottom-nav__icon { height: 22px; width: 30px; } .bottom-nav__icon svg { width: 16px; height: 16px; } .bottom-nav__label { font-size: .5rem; line-height: 1; } .bottom-nav__item--emi .bottom-nav__icon { width: 32px; height: 32px; margin-top: 0; } .bottom-nav__item--emi .bottom-nav__icon svg { width: 14px; height: 14px; } body:has(nav.bottom-nav) .app .main { padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px) + .35rem); } } /* ── 17. Focus visible — keyboard navigation ────────────────────────── */ .bottom-nav__item:focus-visible { outline: 3px solid color-mix(in srgb, var(--bn-active) 70%, transparent); outline-offset: -3px; border-radius: 8px; z-index: 5; } .bottom-nav__item:focus-visible .bottom-nav__icon { background: color-mix(in srgb, var(--bn-active) 14%, transparent); transform: translateY(-2px); } /* ── 18. prefers-contrast — solid background, underlined active ─────── */ @media (prefers-contrast: more) { .bottom-nav { background: var(--surface, #fff); border-top: 2px solid var(--text, #000); backdrop-filter: none; -webkit-backdrop-filter: none; } .bottom-nav__item.is-active { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; } } /* ── 19. forced-colors (Windows High Contrast) ──────────────────────── */ @media (forced-colors: active) { .bottom-nav { background: Canvas; border-top: 2px solid CanvasText; backdrop-filter: none; -webkit-backdrop-filter: none; } .bottom-nav__item.is-active { color: Highlight; forced-color-adjust: none; } .bottom-nav__glow { display: none; } .bottom-nav__item:not(.bottom-nav__item--emi).is-active::before { background: Highlight; box-shadow: none; } } /* ── 20. Reduced-motion — disable transitions and animations ────────── */ @media (prefers-reduced-motion: reduce) { .bottom-nav, .bottom-nav__item, .bottom-nav__icon, .bottom-nav__icon svg { transition: none; animation: none; } } /* ── 21. Print — hide all floating chrome ───────────────────────────── */ @media print { .bottom-nav { display: none; } }