/* --------------------------------------------------------------------------- app.css — QuitSmokeApp native (Capacitor) shell adjustments. Everything here is scoped to html.is-app, so the plain website is untouched. The .is-app class is added by js/app-bridge.js when running inside the app. --------------------------------------------------------------------------- */ /* Native feel: no tap flash, no rubber-band vertical overscroll. */ html.is-app { -webkit-tap-highlight-color: transparent; } html.is-app body { overscroll-behavior-y: none; } /* Brand name: website = "QuitSmokeApp", app = "iQuit". is-app is set in the before paint, so there's no flash of the wrong name. */ .brand-name-app { display: none; } html.is-app .brand-name-web { display: none; } html.is-app .brand-name-app { display: inline; } /* Top safe area — the navy navbar draws under the status bar (edge-to-edge), so push its content down. Android 15 (targetSdk 35) leaves env()=0, so max() floors it to 40px (clears punch-hole status bars); on iOS the notch value is larger and wins via max(). */ html.is-app .navbar { padding-top: max(env(safe-area-inset-top), 40px); } /* Bottom safe area — keep footer content clear of the gesture/nav bar. */ html.is-app .site-footer { padding-bottom: max(env(safe-area-inset-bottom), 24px); } /* No AdSense in the app WebView (policy) — hide any ad slots defensively. */ html.is-app .adsense-slot, html.is-app .adsbygoogle, html.is-app .ad-slot { display: none !important; } /* No ads in-app -> the advertising cookie banner is pointless here. GA4 runs in consent-denied cookieless mode, so no consent banner is required in the app. */ html.is-app #cookie-consent-banner { display: none !important; } /* Tiny reassurance while native storage restores a returning user's streak. */ html.is-app:not(.app-hydrated) .tracker-restoring { display: inline; } /* ---- Pull-to-refresh indicator ---- */ html.is-app .app-ptr { position: fixed; top: 0; left: 50%; z-index: 9998; margin-top: max(env(safe-area-inset-top), 40px); transform: translateX(-50%) translateY(0); opacity: 0; pointer-events: none; transition: opacity .18s ease; } html.is-app .app-ptr.visible { opacity: 1; } html.is-app .app-ptr-spinner { width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 3px solid rgba(27, 54, 93, .18); border-top-color: #1B365D; box-shadow: 0 3px 10px rgba(0, 0, 0, .22); } html.is-app .app-ptr.armed .app-ptr-spinner { border-top-color: #2DD4BF; } html.is-app .app-ptr.refreshing .app-ptr-spinner { animation: app-ptr-spin .7s linear infinite; } @keyframes app-ptr-spin { to { transform: rotate(360deg); } } /* ---- Offline overlay ---- */ html.is-app .app-offline { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 2rem; padding-top: max(env(safe-area-inset-top), 40px); background: linear-gradient(160deg, #1B365D 0%, #143050 55%, #0d2340 100%); } html.is-app .app-offline.visible { display: flex; } html.is-app .app-offline-card { max-width: 20rem; text-align: center; color: #fff; } html.is-app .app-offline-icon { width: 76px; height: 76px; margin: 0 auto 1rem; border-radius: 22px; background: rgba(255, 255, 255, .08); display: flex; align-items: center; justify-content: center; font-size: 2.2rem; } html.is-app .app-offline-card h2 { font-size: 1.3rem; font-weight: 700; margin: 0 0 .5rem; } html.is-app .app-offline-card p { opacity: .85; line-height: 1.5; margin: 0 0 1.4rem; } html.is-app .app-offline-retry { background: #2DD4BF; color: #0d2340; border: 0; border-radius: 999px; padding: .8rem 1.6rem; font-size: 1rem; font-weight: 700; } html.is-app .app-offline-retry:active { transform: scale(.97); }