/* DWX Mobile Bottom Nav * Colors are driven by CSS variables printed inline in . * --------------------------------------------------------------- */ .dwx-mbn { position: fixed; left: 0; right: 0; bottom: 0; z-index: 99990; background: var(--dwx-mbn-bg, #ffffff); border-top: 1px solid var(--dwx-mbn-border, #e5e7eb); box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06); /* iPhone notch / home indicator safe area */ padding-bottom: env(safe-area-inset-bottom, 0px); -webkit-tap-highlight-color: transparent; } .dwx-mbn__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; } .dwx-mbn__item { flex: 1 1 0; margin: 0; padding: 0; min-width: 0; } .dwx-mbn__link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 9px 4px; min-height: 56px; text-decoration: none; color: var(--dwx-mbn-label, #4b5563); font-size: 11px; line-height: 1.2; font-weight: 500; transition: color 0.15s ease, background-color 0.15s ease; } .dwx-mbn__link:hover, .dwx-mbn__link:focus, .dwx-mbn__link:active { color: var(--dwx-mbn-active, #2563eb); background-color: color-mix(in srgb, var(--dwx-mbn-active, #2563eb) 8%, transparent); } .dwx-mbn__link:focus-visible { outline: 2px solid var(--dwx-mbn-active, #2563eb); outline-offset: -2px; } .dwx-mbn__icon { display: inline-flex; color: var(--dwx-mbn-icon, #1f2937); } .dwx-mbn__link:hover .dwx-mbn__icon, .dwx-mbn__link:focus .dwx-mbn__icon, .dwx-mbn__link:active .dwx-mbn__icon { color: var(--dwx-mbn-active, #2563eb); } .dwx-mbn__icon svg { display: block; width: 24px; height: 24px; } .dwx-mbn__label { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dwx-mbn--no-labels .dwx-mbn__link { min-height: 52px; } /* Push page content up so the bar never hides the footer / last elements. */ body.dwx-mbn-pad { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); } @media (prefers-reduced-motion: reduce) { .dwx-mbn__link { transition: none; } }