/* ===================================================================== Dedicated Android / Capacitor app shell Activated when or has .is-native-app Keep bottom tab bar clearance on EVERY page — content must never hide under it. ===================================================================== */ html.is-native-app { --app-tabbar-h: 64px; /* Android gesture / 3-button bar — env() is often 0 in WebView, so force a floor */ --app-bottom-inset: max(env(safe-area-inset-bottom, 0px), 20px); --app-content-bottom: calc(var(--app-tabbar-h) + var(--app-bottom-inset) + 1.25rem); } html.is-native-app, html.is-native-app body { -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; } html.is-native-app body { padding-top: env(safe-area-inset-top, 0px); padding-bottom: 0; background: #eef2f9; } html.is-native-app ::selection { background: transparent; } html.is-native-app input, html.is-native-app textarea, html.is-native-app [contenteditable] { user-select: text; } /* Always use the mobile app chrome in Capacitor, even on wide tablets */ html.is-native-app .app { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "main" !important; min-height: 100dvh; padding-bottom: 0; } html.is-native-app .app-sidebar { position: fixed !important; left: 0; top: 0; width: min(86vw, 320px) !important; max-width: 320px !important; z-index: 80 !important; transform: translateX(-105%); transition: transform .22s cubic-bezier(.2,.8,.2,1); height: 100dvh !important; padding-top: env(safe-area-inset-top, 0px); padding-bottom: calc(var(--app-tabbar-h) + var(--app-bottom-inset)); box-shadow: 8px 0 32px rgba(15,35,80,.18); } html.is-native-app .app.nav-open .app-sidebar { transform: translateX(0); } html.is-native-app .app > .scrim { display: none !important; position: fixed; inset: 0; background: rgba(10,22,48,.48); z-index: 75 !important; backdrop-filter: blur(2px); } html.is-native-app .app.nav-open > .scrim { display: block !important; } html.is-native-app .menu-toggle { display: inline-flex !important; } html.is-native-app .app-header { position: sticky; top: 0; z-index: 30; min-height: 56px; padding-left: max(.65rem, env(safe-area-inset-left, 0px)); padding-right: max(.65rem, env(safe-area-inset-right, 0px)); background: rgba(255,255,255,.94) !important; border-bottom: 1px solid #e6ebf5; backdrop-filter: blur(12px); } html.is-native-app .app-header .search { display: flex !important; flex: 1; min-width: 0; } /* Page body — ALWAYS clear the bottom tab bar (topic prev/next, last cards, etc.) */ html.is-native-app .app-content { padding: 1rem .95rem var(--app-content-bottom) !important; max-width: 760px; margin: 0 auto; box-sizing: border-box; } html.is-native-app .app-main { padding-bottom: 0; min-height: 100dvh; box-sizing: border-box; } /* Bottom tab bar — sits above gesture/home indicator */ html.is-native-app .bottom-nav { display: flex !important; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; box-sizing: border-box; height: calc(var(--app-tabbar-h) + var(--app-bottom-inset)); min-height: calc(var(--app-tabbar-h) + var(--app-bottom-inset)); padding: .3rem .2rem var(--app-bottom-inset); background: #ffffff; border-top: 1px solid #e4eaf4; box-shadow: 0 -10px 28px rgba(15,35,80,.1); justify-content: space-around; align-items: stretch; } html.is-native-app .bottom-nav a { flex: 1; min-height: 48px; max-width: 88px; margin: 0 .1rem; border-radius: 16px; padding: .35rem .2rem; color: #6b7a94; font-size: .66rem; font-weight: 700; letter-spacing: .01em; transition: background .12s ease, color .12s ease, transform .1s ease; } html.is-native-app .bottom-nav a svg { width: 22px; height: 22px; } html.is-native-app .bottom-nav a.active { color: var(--primary, #1847B8); background: rgba(24,71,184,.08); } html.is-native-app .bottom-nav a.active::before { display: none; } html.is-native-app .bottom-nav a:active { transform: scale(.94); } /* Dedicated app buttons — larger tap targets */ html.is-native-app .btn { min-height: 48px; padding: .75rem 1.15rem; border-radius: 14px; font-size: .95rem; position: relative; overflow: hidden; } html.is-native-app .btn-sm { min-height: 40px; padding: .5rem .85rem; font-size: .85rem; } html.is-native-app .btn-lg { min-height: 54px; font-size: 1.02rem; } html.is-native-app .btn:active { transform: scale(.97); } html.is-native-app .icon-btn { width: 44px; height: 44px; border-radius: 14px; } html.is-native-app .icon-btn:active { transform: scale(.92); background: rgba(24,71,184,.08); } html.is-native-app .side-link { min-height: 48px; border-radius: 14px; padding: .7rem .9rem; font-size: .95rem; } html.is-native-app .side-link:active { background: rgba(24,71,184,.08); } html.is-native-app .list-row { min-height: 56px; padding: .85rem .2rem; } html.is-native-app a.list-row:active { background: rgba(24,71,184,.06); } html.is-native-app .input, html.is-native-app .select, html.is-native-app textarea.input { min-height: 48px; font-size: 16px; /* prevents iOS/Android input zoom */ border-radius: 14px; } /* Floating edge hint for swipe menu */ html.is-native-app .native-edge-hint { position: fixed; left: 0; top: 35%; width: 4px; height: 72px; border-radius: 0 6px 6px 0; background: linear-gradient(180deg, var(--primary), var(--secondary)); opacity: .35; z-index: 25; pointer-events: none; } /* Page transition flash */ html.is-native-app .app-content.native-enter { animation: native-slide-in .22s ease; } @keyframes native-slide-in { from { opacity: .35; transform: translateX(12px); } to { opacity: 1; transform: none; } } /* Auth screens in app — brand hero + bottom sheet form (not a floating desktop card) */ html.is-native-app.auth-body, html.is-native-app body.auth-body { background: #0D2D67; } html.is-native-app .auth-wrap { /* min-height only (NO fixed height): the wrap grows past the screen for long forms so the PAGE scrolls. A fixed 100dvh height plus an inner clipped .auth-main is why "Join now" could not scroll in the app. */ min-height: 100vh; min-height: 100dvh; min-height: 100svh; display: flex !important; flex-direction: column; padding: 0 !important; box-sizing: border-box; background: linear-gradient(165deg, #0D2D67 0%, #1847B8 52%, #2a4fc4 100%); } html.is-native-app .auth-aside { display: none !important; } html.is-native-app .auth-mobile-hero { display: block !important; flex: 0 0 auto; padding: calc(1.5rem + env(safe-area-inset-top, 0px) + var(--app-top-inset, 0px)) 1.4rem 1.25rem; } html.is-native-app .auth-mobile-brand .mark { width: 48px; height: 48px; border-radius: 14px; font-size: 1rem; } html.is-native-app .auth-mobile-name strong { font-size: 1.2rem; } html.is-native-app .auth-mobile-tag { font-size: .95rem; margin-top: .75rem; } html.is-native-app .auth-mobile-hero { padding-bottom: .85rem !important; } html.is-native-app .auth-main { flex: 1 0 auto !important; display: flex !important; align-items: stretch !important; padding: 0 !important; background: #fff !important; min-height: 0; border-radius: 28px 28px 0 0; /* was overflow:hidden — that clipped long forms with no way to scroll. Let the page body scroll instead (WebView-safe). */ overflow: visible; } html.is-native-app .auth-card { border-radius: 0 !important; margin: 0 !important; width: 100%; max-width: none !important; border: none !important; box-shadow: none !important; padding: 1.75rem 1.4rem calc(1.6rem + env(safe-area-inset-bottom, 0px) + var(--app-bottom-inset, 0px)) !important; display: flex; flex-direction: column; flex: 1 1 auto; background: #fff; } html.is-native-app .auth-title { font-size: 1.65rem; font-weight: 800; letter-spacing: -.02em; } html.is-native-app .auth-lead { font-size: .95rem; margin-bottom: 1.35rem; } html.is-native-app .auth-form .field { margin-bottom: 1rem; } html.is-native-app .auth-form .input, html.is-native-app .auth-form .select, html.is-native-app .auth-card .input, html.is-native-app .auth-card .select { min-height: 52px !important; font-size: 16px !important; /* avoids iOS/Android zoom on focus */ border-radius: 14px; padding: .85rem 1rem; } html.is-native-app .auth-form-meta { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: .25rem 0 1.25rem; flex-wrap: wrap; } html.is-native-app .auth-form-meta .checkbox-row { font-size: .95rem; gap: .55rem; min-height: 44px; align-items: center; } html.is-native-app .auth-form-meta a.small { font-size: .92rem; font-weight: 700; padding: .55rem 0; min-height: 44px; display: inline-flex; align-items: center; } html.is-native-app .auth-submit { min-height: 54px !important; font-size: 1.08rem !important; border-radius: 16px !important; font-weight: 800; } html.is-native-app .auth-foot { margin-top: 1.35rem; font-size: .95rem; } html.is-native-app .auth-foot a { font-weight: 700; } /* Auth pages: no edge-swipe chrome noise */ html.is-native-app body.auth-body .native-edge-hint { display: none !important; } /* Hide desktop marketing density on login/public when opened from app */ html.is-native-app .site-header .site-nav { display: none; } html.is-native-app .nav-toggle { display: inline-flex !important; } html.is-native-app .btn.is-pressing, html.is-native-app .icon-btn.is-pressing, html.is-native-app .side-link.is-pressing, html.is-native-app .bottom-nav a.is-pressing { filter: brightness(.94); transform: scale(.96); } /* Tracking consent sits above tab bar */ html.is-native-app .card[style*="bottom:4.5rem"] { bottom: calc(var(--app-tabbar-h) + var(--app-bottom-inset) + .75rem) !important; } /* ---- Fit the phone screen (notch / home indicator / width) ---- */ html.is-native-app, html.is-native-app body { width: 100%; max-width: 100%; overflow-x: hidden !important; min-height: 100dvh; } html.is-native-app .app, html.is-native-app .app-main { width: 100%; max-width: 100%; min-width: 0; min-height: 100dvh; overflow-x: hidden; } html.is-native-app .app-content { max-width: min(760px, 100%) !important; overflow-x: clip; min-width: 0; } html.is-native-app .card, html.is-native-app .grid, html.is-native-app .row, html.is-native-app .list-row, html.is-native-app .resource-lesson-card { max-width: 100%; min-width: 0; } html.is-native-app .btn { max-width: 100%; } html.is-native-app .native-edge-hint { display: none; } /* was a left “strip”; swipe still works */ html.is-native-app .site-header .container, html.is-native-app .site-footer .container, html.is-native-app main.container { padding-left: max(1rem, env(safe-area-inset-left, 0px)); padding-right: max(1rem, env(safe-area-inset-right, 0px)); } html.is-native-app main.container, html.is-native-app .site-footer { padding-bottom: calc(1.5rem + var(--app-bottom-inset)); } /* Sticky quiz palette / floating bars stay above tab bar */ html.is-native-app .quiz-palette { bottom: auto; top: calc(56px + env(safe-area-inset-top, 0px) + .25rem) !important; max-height: calc(100dvh - var(--app-tabbar-h) - var(--app-bottom-inset) - 5.5rem) !important; } html.is-native-app #native-back-toast { bottom: calc(var(--app-tabbar-h) + var(--app-bottom-inset) + .75rem) !important; } /* Branded in-web boot splash — auto-closes from native-app.js */ #examos-boot-splash { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; text-align: center; background: linear-gradient(160deg, #1847B8 0%, #2a3fc4 45%, #7357D9 100%); color: #fff; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); transition: opacity .3s ease, visibility .3s ease; } #examos-boot-splash.is-hiding { opacity: 0; visibility: hidden; pointer-events: none; } .examos-boot-mark { width: 76px; height: 76px; margin: 0 auto 1rem; border-radius: 20px; display: grid; place-items: center; background: #0f3082; border: 2px solid rgba(255,255,255,.85); box-shadow: 0 12px 28px rgba(8,24,70,.35); font-weight: 800; font-size: 1.55rem; letter-spacing: -.02em; } .examos-boot-title { display: block; font-size: 1.25rem; letter-spacing: -.02em; } .examos-boot-sub { margin: .45rem 0 0; opacity: .78; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; } /* The promise. Two weights, two sizes — the eye lands on "Change your life", which is the part that matters at 6am before a study session. */ .examos-boot-line { margin: 1.5rem 0 0; line-height: 1.25; } .examos-boot-line span { display: block; font-size: 1.05rem; font-weight: 500; opacity: .8; } .examos-boot-line em { display: block; font-style: normal; font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; margin-top: .1rem; /* Gradient text reads as light on the dark splash without adding a colour. */ background: linear-gradient(100deg, #FFFFFF 20%, #BFD3FF 60%, #FFFFFF 90%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .examos-boot-by { margin: 1.75rem 0 0; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; opacity: .5; font-weight: 600; } @media (prefers-reduced-motion: reduce) { .examos-boot-line em { animation: none; } } .examos-boot-dots span { display: inline-block; width: 8px; height: 8px; margin: 1.35rem .22rem 0; border-radius: 50%; background: #fff; animation: examos-boot-blink 1s infinite ease-in-out; } .examos-boot-dots span:nth-child(2) { animation-delay: .15s; } .examos-boot-dots span:nth-child(3) { animation-delay: .3s; } @keyframes examos-boot-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }