/** * Native WebView Experience Framework * Transforms web pages to feel like native iOS/Android apps * * Usage: Add class 'native-ios' or 'native-android' to or * JavaScript will auto-detect platform if native-webview.js is included */ /* ============================================ 1. CSS CUSTOM PROPERTIES ============================================ */ :root { /* Safe area insets */ --safe-area-top: env(safe-area-inset-top, 0px); --safe-area-bottom: env(safe-area-inset-bottom, 0px); --safe-area-left: env(safe-area-inset-left, 0px); --safe-area-right: env(safe-area-inset-right, 0px); /* Native timing functions */ --native-spring: cubic-bezier(0.25, 0.46, 0.45, 0.94); --native-spring-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); --native-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --native-ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); /* Touch targets */ --min-tap-target: 44px; /* System fonts */ --font-system: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-system-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Native colors */ --native-separator: rgba(60, 60, 67, 0.12); --native-fill: rgba(120, 120, 128, 0.12); --native-overlay: rgba(0, 0, 0, 0.4); } /* ============================================ 2. BASE NATIVE STYLES (ALL PLATFORMS) ============================================ */ /* Prevent text selection on interactive elements */ .native-ios, .native-android { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Allow text selection on content areas */ .native-ios .selectable, .native-android .selectable, .native-ios input, .native-android input, .native-ios textarea, .native-android textarea { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } /* Disable tap highlight */ .native-ios, .native-android { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } /* Prevent zooming */ .native-ios, .native-android { touch-action: manipulation; } /* Safe area handling */ .native-ios body, .native-android body, body.native-ios, body.native-android { padding-top: var(--safe-area-top); padding-bottom: var(--safe-area-bottom); padding-left: var(--safe-area-left); padding-right: var(--safe-area-right); } /* System font */ .native-ios, .native-android { font-family: var(--font-system); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ============================================ 3. NATIVE SCROLLING ============================================ */ /* Hide scrollbars but keep functionality */ .native-scroll, .native-ios .native-scroll, .native-android .native-scroll { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; } .native-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; } /* Prevent overscroll bounce when needed */ .no-overscroll { overscroll-behavior: none; } /* Enable overscroll for pull-to-refresh areas */ .overscroll-enabled { overscroll-behavior-y: auto; } /* Full height containers */ .native-ios .native-fullscreen, .native-android .native-fullscreen { height: 100vh; height: 100dvh; /* Dynamic viewport height */ height: -webkit-fill-available; } /* ============================================ 4. IOS SPECIFIC STYLES ============================================ */ /* iOS navigation bar style */ .native-ios .native-header { background: rgba(255, 255, 255, 0.98); border-bottom: 0.5px solid var(--native-separator); padding-top: var(--safe-area-top); min-height: calc(44px + var(--safe-area-top)); } /* iOS dark header */ .native-ios .native-header-dark { background: rgba(30, 30, 30, 0.98); border-bottom: 0.5px solid rgba(255, 255, 255, 0.1); } /* iOS tab bar */ .native-ios .native-tabbar { background: rgba(255, 255, 255, 0.98); border-top: 0.5px solid var(--native-separator); padding-bottom: var(--safe-area-bottom); min-height: calc(49px + var(--safe-area-bottom)); } /* iOS dark tab bar */ .native-ios .native-tabbar-dark { background: rgba(30, 30, 30, 0.94); border-top: 0.5px solid rgba(255, 255, 255, 0.1); } /* iOS button press effect */ .native-ios .native-btn:active { opacity: 0.6; transform: scale(0.98); transition: transform 0.1s var(--native-ease-out), opacity 0.1s; } /* iOS card style */ .native-ios .native-card { background: #ffffff; border-radius: 10px; box-shadow: 0 0 0 0.5px var(--native-separator); } /* iOS grouped list style */ .native-ios .native-list-grouped { background: #f2f2f7; } .native-ios .native-list-item { background: #ffffff; border-bottom: 0.5px solid var(--native-separator); min-height: var(--min-tap-target); padding: 11px 16px; } .native-ios .native-list-item:first-child { border-top-left-radius: 10px; border-top-right-radius: 10px; } .native-ios .native-list-item:last-child { border-bottom: none; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } /* iOS modal/sheet */ .native-ios .native-sheet { background: #ffffff; border-radius: 12px 12px 0 0; padding-bottom: var(--safe-area-bottom); } .native-ios .native-sheet-handle { width: 36px; height: 5px; background: rgba(60, 60, 67, 0.3); border-radius: 2.5px; margin: 6px auto 8px; } /* iOS toggle switch */ .native-ios .native-toggle { width: 51px; height: 31px; background: rgba(120, 120, 128, 0.16); border-radius: 15.5px; position: relative; transition: background 0.25s var(--native-ease-out); } .native-ios .native-toggle.active { background: #34c759; } .native-ios .native-toggle::after { content: ''; position: absolute; width: 27px; height: 27px; background: #ffffff; border-radius: 50%; top: 2px; left: 2px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.16); transition: transform 0.25s var(--native-ease-out); } .native-ios .native-toggle.active::after { transform: translateX(20px); } /* ============================================ 5. ANDROID SPECIFIC STYLES (Material Design) ============================================ */ /* Android app bar */ .native-android .native-header { background: #ffffff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); min-height: 56px; padding-top: var(--safe-area-top); } /* Android dark header */ .native-android .native-header-dark { background: #1f1f1f; box-shadow: none; } /* Android bottom navigation */ .native-android .native-tabbar { background: #ffffff; box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.08); min-height: calc(56px + var(--safe-area-bottom)); padding-bottom: var(--safe-area-bottom); } /* Android ripple effect */ .native-android .native-btn, .native-android .native-tap { position: relative; overflow: hidden; } .native-android .native-btn::after, .native-android .native-tap::after { content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; background: radial-gradient(circle, rgba(0, 0, 0, 0.12) 10%, transparent 10.01%); transform: translate(-50%, -50%) scale(10); opacity: 0; transition: transform 0.4s var(--native-ease-out), opacity 0.5s; pointer-events: none; } .native-android .native-btn:active::after, .native-android .native-tap:active::after { transform: translate(-50%, -50%) scale(0); opacity: 1; transition: 0s; } /* Android FAB (Floating Action Button) */ .native-android .native-fab { width: 56px; height: 56px; border-radius: 16px; background: #6200ee; box-shadow: 0 6px 10px rgba(0, 0, 0, 0.14), 0 1px 18px rgba(0, 0, 0, 0.12), 0 3px 5px rgba(0, 0, 0, 0.2); display: flex; align-items: center; justify-content: center; color: #ffffff; position: fixed; right: 16px; bottom: calc(16px + var(--safe-area-bottom)); z-index: 100; } /* Android card */ .native-android .native-card { background: #ffffff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } /* Android list */ .native-android .native-list-item { min-height: 48px; padding: 12px 16px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } /* Android toggle/switch */ .native-android .native-toggle { width: 36px; height: 14px; background: rgba(0, 0, 0, 0.38); border-radius: 7px; position: relative; transition: background 0.15s; } .native-android .native-toggle.active { background: rgba(98, 0, 238, 0.5); } .native-android .native-toggle::after { content: ''; position: absolute; width: 20px; height: 20px; background: #fafafa; border-radius: 50%; top: -3px; left: 0; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24); transition: transform 0.15s, background 0.15s; } .native-android .native-toggle.active::after { transform: translateX(16px); background: #6200ee; } /* ============================================ 6. NATIVE LOADING STATES ============================================ */ /* iOS-style spinner */ /* iOS-style spinner - DEPRECATED for branded design .native-ios .native-spinner { width: 20px; height: 20px; border: 2px solid rgba(0, 0, 0, 0.1); border-top-color: #000000; border-radius: 50%; animation: native-spin 0.8s linear infinite; } */ /* Android-style circular progress - DEPRECATED for branded design .native-android .native-spinner { width: 24px; height: 24px; border: 3px solid transparent; border-top-color: #6200ee; border-radius: 50%; animation: native-spin 0.75s linear infinite; } */ @keyframes native-spin { to { transform: rotate(360deg); } } /* Skeleton loading */ .native-skeleton { background: linear-gradient(90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.06) 75%); background-size: 200% 100%; animation: native-skeleton-pulse 1.5s ease-in-out infinite; border-radius: 4px; } @keyframes native-skeleton-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ============================================ 7. NATIVE TRANSITIONS ============================================ */ /* Page transition - slide from right */ .native-page-enter { transform: translateX(100%); opacity: 0; } .native-page-enter-active { transform: translateX(0); opacity: 1; transition: transform 0.35s var(--native-ease-out), opacity 0.35s; } .native-page-exit { transform: translateX(0); opacity: 1; } .native-page-exit-active { transform: translateX(-30%); opacity: 0.3; transition: transform 0.35s var(--native-ease-out), opacity 0.35s; } /* Modal transition - slide up */ .native-modal-enter { transform: translateY(100%); } .native-modal-enter-active { transform: translateY(0); transition: transform 0.4s var(--native-spring); } .native-modal-exit-active { transform: translateY(100%); transition: transform 0.3s var(--native-ease-in-out); } /* Fade transition */ .native-fade-enter { opacity: 0; } .native-fade-enter-active { opacity: 1; transition: opacity 0.2s var(--native-ease-out); } .native-fade-exit-active { opacity: 0; transition: opacity 0.15s var(--native-ease-in-out); } /* ============================================ 8. OFFLINE & ERROR STATES ============================================ */ /* Offline indicator */ .native-offline-banner { position: fixed; top: var(--safe-area-top); left: 0; right: 0; background: #ff3b30; color: #ffffff; text-align: center; padding: 8px 16px; font-size: 14px; font-weight: 500; z-index: 9999; transform: translateY(-100%); transition: transform 0.3s var(--native-ease-out); } .native-offline-banner.visible { transform: translateY(0); } /* Native error modal */ .native-error-modal { position: fixed; inset: 0; background: var(--native-overlay); display: flex; align-items: center; justify-content: center; z-index: 10000; padding: 20px; } .native-ios .native-error-content { background: rgba(255, 255, 255, 0.98); border-radius: 14px; width: 100%; max-width: 270px; text-align: center; overflow: hidden; } .native-android .native-error-content { background: #ffffff; border-radius: 28px; width: 100%; max-width: 312px; padding: 24px; } /* ============================================ 9. FORM ELEMENTS ============================================ */ /* Native input styling */ .native-ios input[type="text"], .native-ios input[type="email"], .native-ios input[type="password"], .native-ios input[type="tel"], .native-ios input[type="number"], .native-ios textarea { font-size: 17px; padding: 11px 16px; border: none; background: #ffffff; border-radius: 10px; -webkit-appearance: none; appearance: none; } .native-android input[type="text"], .native-android input[type="email"], .native-android input[type="password"], .native-android input[type="tel"], .native-android input[type="number"], .native-android textarea { font-size: 16px; padding: 16px; border: none; border-bottom: 2px solid rgba(0, 0, 0, 0.42); background: transparent; border-radius: 4px 4px 0 0; -webkit-appearance: none; appearance: none; transition: border-color 0.2s; } .native-android input:focus, .native-android textarea:focus { border-bottom-color: #6200ee; outline: none; } /* Prevent zoom on input focus (iOS) */ .native-ios input, .native-ios textarea, .native-ios select { font-size: 16px !important; } /* ============================================ 10. UTILITY CLASSES ============================================ */ /* Touch-friendly tap targets */ .native-tap-target { min-width: var(--min-tap-target); min-height: var(--min-tap-target); display: flex; align-items: center; justify-content: center; } /* Hardware acceleration hint */ .native-accelerated { transform: translateZ(0); will-change: transform; } /* Hide on specific platform */ .native-ios .hide-ios { display: none !important; } .native-android .hide-android { display: none !important; } /* Show on specific platform */ .show-ios { display: none !important; } .show-android { display: none !important; } .native-ios .show-ios { display: block !important; } .native-android .show-android { display: block !important; } /* Status bar spacing */ .native-status-bar-spacing { padding-top: var(--safe-area-top); } /* Home indicator spacing */ .native-home-indicator-spacing { padding-bottom: var(--safe-area-bottom); } /* Full safe area */ .native-safe-area { padding: var(--safe-area-top) var(--safe-area-right) var(--safe-area-bottom) var(--safe-area-left); } /* Prevent content shift */ .native-fixed-viewport { position: fixed; inset: 0; overflow: hidden; } /* ============================================ 11. PULL TO REFRESH ============================================ */ .native-pull-indicator { position: absolute; top: 50px; left: 50%; transform: translateX(-50%); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; transition: transform 0.2s var(--native-ease-out), opacity 0.2s; z-index: 40; opacity: 0; /* Bubble Design */ background: white; border-radius: 50%; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); border: 1px solid rgba(0, 0, 0, 0.05); } .native-pull-indicator.pulling { transform: translateX(-50%) translateY(60px); opacity: 1; } .native-pull-indicator.refreshing { transform: translateX(-50%) translateY(60px) scale(1.1); opacity: 1; } .native-pull-indicator.refreshing .native-spinner { animation: native-spin 0.8s linear infinite; } /* Branded Spinner for all platforms */ .native-spinner { width: 24px; height: 24px; border: 2.5px solid rgba(62, 39, 35, 0.1); /* Light brown track */ border-top-color: #3E2723; /* Dark Chocolate brand color */ border-radius: 50%; } /* ============================================ 12. SWIPE BACK GESTURE (iOS) ============================================ */ /* ============================================ 13. SPLASH SCREEN ============================================ */ .native-splash { position: fixed; inset: 0; background: linear-gradient(135deg, #201d1c 0%, #2d2926 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 99999; transition: opacity 0.3s var(--native-ease-out); } .native-splash.hidden { opacity: 0; pointer-events: none; } .native-splash-logo { width: 80px; height: 80px; margin-bottom: 24px; } .native-splash-text { color: #ffffff; font-size: 18px; font-weight: 500; margin-top: 16px; }