@tailwind base; @tailwind components; @tailwind utilities; @layer base { body { @apply bg-st-offwhite text-st-phantom antialiased; font-family: 'Manrope', sans-serif; } /* Prevent iOS Safari auto-zoom on input focus */ input, select, textarea { font-size: 16px !important; } } /* ─────────────────────────────────────────────────────────────────────────── PWA bottom-nav layout shim When the app runs as an installed PWA, BottomNav.jsx is fixed-positioned at the bottom of the viewport. We need the body to reserve space below so scrollable content isn't trapped under the nav. Height = ~64px (nav content) + safe-area-inset-bottom (home indicator on iPhone) The `pwa-mode` class is added to by the usePWAMode() hook. ─────────────────────────────────────────────────────────────────────────── */ html.pwa-mode body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); } /* When the keyboard is open we hide BottomNav entirely (see useKeyboardOpen). Drop the padding too so the input the user is typing in isn't pushed up awkwardly with empty space below. The `keyboard-open` class is added to by BottomNav when it hides itself. */ html.pwa-mode.keyboard-open body { padding-bottom: 0; }