/* ────────────────────────────────────────────────────────── * NUTBOM Mobile — Base styles * Reset + body + boot splash + utility classes. * ────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-hebrew); font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: var(--lh-normal); letter-spacing: var(--tracking-normal); color: var(--text-1); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Direction is driven by (set by i18n.js applyToDocument). Default to rtl for the pre-hydration boot splash. */ html { direction: rtl; } html[dir="ltr"] { direction: ltr; } /* ── English (Latin) swap: flips font stack. */ body.lang-en { font-family: var(--font-latin); } #root { min-height: 100vh; min-height: 100dvh; max-width: var(--max-width); margin: 0 auto; background: var(--bg); position: relative; box-shadow: 0 0 80px rgba(0, 0, 0, 0.06); } button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; } button { border: 0; background: none; padding: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } /* ── Boot splash (shown before React mounts) ── */ .boot-splash { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-6); background: var(--bg); z-index: 9999; } .boot-logo { font-family: var(--font-latin); font-weight: var(--fw-black); font-size: 28px; letter-spacing: var(--tracking-widest); color: var(--teal); } .boot-spinner { width: 28px; height: 28px; border: 3px solid var(--teal-tint); border-top-color: var(--teal); border-radius: 50%; animation: spin 0.9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Touch targets ── */ .tap { transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); } .tap:active { transform: scale(0.96); opacity: 0.85; } /* ── Fade in for screen transitions ── */ @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: fadeIn var(--dur-base) var(--ease); } /* ── Toast pop (used by components/Toast.js) ── */ @keyframes toastPop { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .toast-pop { animation: toastPop var(--dur-base) var(--ease); } /* ── Bottom sheet pop (OrgSwitcher / LangSwitcher) ── */ @keyframes sheetPop { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } } .sheet-pop { animation: sheetPop var(--dur-base) var(--ease); } /* ── Scrollbars (mobile rarely shows them, but if shown be subtle) ── */ ::-webkit-scrollbar { width: 0; background: transparent; }