/* ─── Native shell styling ─────────────────────────────────────────────────── * * Loaded on every platform, but every rule is scoped to `.ustk-native`, which * `src/lib/native.js` only ever puts on inside the iOS/Android shell. * The web build is byte-for-byte unaffected. * * These are the details that separate "an app" from "a website in a box". Each * one is a specific thing reviewers and users notice. */ /* 1. Safe areas. Content under the notch or behind the home indicator is the * single clearest tell that something is a wrapped web page. `viewport-fit=cover` * in index.html is what makes env() non-zero in the first place. */ :root { --ustk-safe-top: env(safe-area-inset-top, 0px); --ustk-safe-bottom: env(safe-area-inset-bottom, 0px); --ustk-safe-left: env(safe-area-inset-left, 0px); --ustk-safe-right: env(safe-area-inset-right, 0px); --ustk-keyboard: 0px; } .ustk-native body { padding-top: var(--ustk-safe-top); padding-left: var(--ustk-safe-left); padding-right: var(--ustk-safe-right); /* Not padding-bottom: the bottom navigation handles its own inset below, and doubling it leaves a dead band above the home indicator. */ } /* The app's bottom navigation is fixed; it must sit above the home indicator rather than under it, and grow by exactly the inset — never by a guess. */ .ustk-native nav[data-ustk-bottomnav], .ustk-native [data-ustk-bottomnav] { padding-bottom: calc(10px + var(--ustk-safe-bottom)); } /* 2. No rubber-band. Dragging the whole document and revealing a grey void * behind it is a browser behaviour, not an app one. Scrolling containers * inside still scroll normally. */ .ustk-native, .ustk-native body { overscroll-behavior-y: none; -webkit-overflow-scrolling: touch; } /* 3. No text selection or callout on chrome — but NOT on content. Blanket * `user-select: none` is the usual overcorrection and it breaks copying a * recommendation out of a brief, which people legitimately do. So it is * applied to controls and labels only; paragraphs, inputs and anything the * person wrote stay selectable. */ .ustk-native button, .ustk-native [role="button"], .ustk-native summary, .ustk-native nav, .ustk-native label { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .ustk-native input, .ustk-native textarea, .ustk-native p, .ustk-native li, .ustk-native td { -webkit-user-select: text; user-select: text; } /* 4. No tap highlight rectangle. iOS and Android both draw one over web * content; native controls do not have it. The app already has its own * :active state (`.ustk-touch:active`), so nothing is lost. */ .ustk-native * { -webkit-tap-highlight-color: transparent; } /* 5. Keyboard. When the software keyboard is up, give the page enough bottom * room that the control under the finger is not hidden behind it. */ .ustk-native.ustk-keyboard-open body { padding-bottom: var(--ustk-keyboard); } .ustk-native.ustk-keyboard-open [data-ustk-bottomnav] { display: none; /* a bottom bar floating on top of the keyboard reads as a bug */ } /* 6. iOS momentum + font. The system font is what makes an iOS app feel like an * iOS app, but Unstuk's identity is DM Sans, so this is deliberately NOT a * wholesale swap: only the interface chrome takes the system face, and the * content keeps the brand. */ .ustk-ios button, .ustk-ios nav, .ustk-ios summary { font-family: -apple-system, BlinkMacSystemFont, "DM Sans", system-ui, sans-serif; } .ustk-android button, .ustk-android nav, .ustk-android summary { font-family: Roboto, "DM Sans", system-ui, sans-serif; } /* 7. Pull-to-refresh off. In a native app the gesture does nothing and the * half-spinner that appears mid-drag looks broken. */ .ustk-native body { overscroll-behavior: contain; } /* 8. Text does not scale with the device's browser zoom in a shell, and inputs * are already 16px so iOS will not zoom on focus — but a WebView will still * inflate text on a large-text accessibility setting, which is correct and * is left alone. This only stops the automatic inflation Safari does on * wide paragraphs, which breaks the app's measured type scale. */ .ustk-native { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }