/* ========================================================================== PWA layer - Motorcycles Learning Center Install banner + standalone-mode polish. Loaded on every page; must never fight the page's own stylesheet. ========================================================================== */ :root { --pwa-brand: #ff4b2b; --pwa-brand-dark: #e6371e; --pwa-brand-soft: #ff6b81; --pwa-ink: #2c2c2c; --pwa-muted: #7a7a7a; --pwa-radius: 18px; } /* Note: deliberately no `html { background: ... }` here. Giving a background stops 's from reaching the canvas, which would bleed the red gradient over the light pages (select_trainees_for_sharing.php), the dark ones (iftar_invite.php, edit_evaluation.php) and the print sheet (print_training_report.php). The launch colour is handled by the manifest's background_color instead. */ /* -------------------------------------------------------------------------- Scrolling Applies to every page, since this file is loaded from includes/pwa_head.php. -------------------------------------------------------------------------- */ /* The fixed corner buttons sit on top of scrolling content. Telling the compositor up front that they move as a unit keeps them on their own layer instead of forcing a repaint of the area behind them on each frame. */ .back-button, .logout-button { will-change: transform; } /* Momentum scrolling inside the table/panel scroll areas on iOS. */ .table-scroll, .overall-eval-wrap, table { -webkit-overflow-scrolling: touch; } /* Tapping should not leave a grey flash box behind on Android. */ a, button, .tab, .icon-btn { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* -------------------------------------------------------------------------- Standalone (installed) mode -------------------------------------------------------------------------- */ html.pwa-standalone { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; } /* No rubber-band scroll revealing the browser chrome underneath. */ html.pwa-standalone body { overscroll-behavior-y: contain; } /* Long-press on buttons/links should feel native, not like a web page. */ html.pwa-standalone a, html.pwa-standalone button, html.pwa-standalone .tab { -webkit-touch-callout: none; } /* Keep the site's fixed corner buttons clear of the notch / status bar. */ html.pwa-standalone .logout-button, html.pwa-standalone .back-button { top: calc(20px + env(safe-area-inset-top, 0px)); } /* -------------------------------------------------------------------------- Install gate (includes/install_gate.php) Visible by default and hidden only when the page is running as an installed app. That order is deliberate: it fails closed, so a JavaScript error leaves the gate up rather than letting everyone past it. -------------------------------------------------------------------------- */ .install-gate { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; -webkit-overflow-scrolling: touch; background: linear-gradient(to bottom right, #ff4b2b, #ff6b81); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; padding: 24px 18px calc(28px + env(safe-area-inset-bottom, 0px)); } /* Running as an installed app: no gate. */ html.pwa-standalone .install-gate { display: none; } .install-gate__inner { width: 100%; max-width: 460px; margin: auto; text-align: center; color: #fff; } .install-gate__icon { width: 84px; height: 84px; border-radius: 20px; background: #fff; padding: 6px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); margin-bottom: 18px; } .install-gate__title { font-size: 24px; font-weight: 700; line-height: 1.25; margin-bottom: 10px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } .install-gate__lead { font-size: 15px; line-height: 1.6; opacity: 0.95; margin-bottom: 22px; } .install-gate__pane[hidden] { display: none; } .install-gate__steps { list-style: none; text-align: left; background: #fff; color: #2c2c2c; border-radius: 16px; padding: 6px 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } .install-gate__steps li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; font-size: 15px; line-height: 1.5; border-bottom: 1px solid #f1efef; } .install-gate__steps li:last-child { border-bottom: none; } .install-gate__num { flex: 0 0 26px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #ff4b2b; color: #fff; font-size: 13px; font-weight: 700; } .install-gate__glyph { width: 18px; height: 18px; vertical-align: -4px; fill: #ff4b2b; } .install-gate__btn { width: 100%; min-height: 52px; margin-bottom: 14px; padding: 14px 20px; border: none; border-radius: 14px; background: #fff; color: #ff4b2b; font-family: inherit; font-size: 17px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22); transition: transform 0.15s ease, background-color 0.3s ease; } .install-gate__btn:active { transform: scale(0.98); } .install-gate__warn { background: rgba(0, 0, 0, 0.18); border-radius: 12px; padding: 12px 14px; font-size: 14.5px; line-height: 1.5; margin-bottom: 16px; } .install-gate__copy { margin-top: 14px; background: transparent; border: 2px solid rgba(255, 255, 255, 0.6); color: #fff; border-radius: 12px; padding: 11px 18px; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; min-height: 46px; } .install-gate__foot { margin-top: 20px; font-size: 13.5px; opacity: 0.9; } /* Nothing behind the gate should scroll or be reachable. */ html.install-gate-open, html.install-gate-open body { overflow: hidden; height: 100%; } @media (min-width: 620px) { .install-gate__title { font-size: 27px; } .install-gate__icon { width: 96px; height: 96px; } } @media (prefers-reduced-motion: reduce) { .install-gate__btn { transition: none; } } /* -------------------------------------------------------------------------- Install banner -------------------------------------------------------------------------- */ .pwa-install { position: fixed; z-index: 9999; left: 16px; right: 16px; /* 24px, not 16: iOS Safari's bottom toolbar overlays the viewport, and env() reports 0 there because viewport-fit=cover is only set once the app is running standalone. */ bottom: calc(24px + env(safe-area-inset-bottom, 0px)); margin: 0 auto; max-width: 420px; background: #ffffff; border-radius: var(--pwa-radius); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22); padding: 18px 18px 16px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: var(--pwa-ink); text-align: left; /* Hidden until JS decides to show it - no flash on first paint. */ opacity: 0; visibility: hidden; transform: translateY(140%); transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.32s ease, visibility 0s linear 0.42s; } .pwa-install.is-visible { opacity: 1; visibility: visible; transform: translateY(0); transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.32s ease, visibility 0s; } /* Thin brand rule along the top edge, echoing the site's red accents. */ .pwa-install::before { content: ""; position: absolute; top: 0; left: 18px; right: 18px; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(to right, var(--pwa-brand), var(--pwa-brand-soft)); } .pwa-install__head { display: flex; align-items: center; gap: 14px; } .pwa-install__icon { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 12px; border: 1px solid rgba(255, 75, 43, 0.18); background: #fff; object-fit: contain; } .pwa-install__title { margin: 0 0 2px; font-size: 16px; font-weight: 700; color: var(--pwa-brand); line-height: 1.25; } .pwa-install__text { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--pwa-muted); font-weight: normal; } .pwa-install__close { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: transparent; color: #b5b5b5; font-size: 20px; line-height: 1; cursor: pointer; padding: 0; transition: background-color 0.2s ease, color 0.2s ease; } .pwa-install__close:hover { background: rgba(255, 75, 43, 0.08); color: var(--pwa-brand); } .pwa-install__actions { display: flex; gap: 10px; margin-top: 16px; } .pwa-install__btn { flex: 1; padding: 11px 14px; border-radius: 10px; border: none; font-family: inherit; font-size: 15px; font-weight: bold; cursor: pointer; transition: 0.3s ease; } .pwa-install__btn--primary { background-color: var(--pwa-brand); color: #fff; } .pwa-install__btn--primary:hover { background-color: var(--pwa-brand-dark); transform: scale(1.03); box-shadow: 0 4px 15px rgba(255, 65, 65, 0.3); } .pwa-install__btn--ghost { background: transparent; color: var(--pwa-muted); border: 2px solid #ececec; flex: 0 0 auto; padding-left: 18px; padding-right: 18px; } .pwa-install__btn--ghost:hover { border-color: #dcdcdc; color: var(--pwa-ink); } /* iOS variant: no prompt API, so we show the Share -> Add to Home Screen steps. */ .pwa-install__steps { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 0; padding: 12px 14px; list-style: none; background: #fff6f4; border: 1px solid rgba(255, 75, 43, 0.15); border-radius: 12px; } .pwa-install__step { display: flex; align-items: center; gap: 9px; font-size: 13.5px; line-height: 1.4; color: var(--pwa-ink); } .pwa-install__step b { font-weight: 700; } .pwa-install__glyph { flex: 0 0 22px; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--pwa-brand); } .pwa-install__glyph svg { width: 100%; height: 100%; display: block; fill: currentColor; } /* -------------------------------------------------------------------------- "Installed" confirmation toast -------------------------------------------------------------------------- */ .pwa-toast { position: fixed; z-index: 9999; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); background: rgba(30, 30, 30, 0.94); color: #fff; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 14px; font-weight: 600; padding: 11px 20px; border-radius: 30px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s; } .pwa-toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s; } /* -------------------------------------------------------------------------- Responsive / accessibility -------------------------------------------------------------------------- */ /* Desktop: tuck it into the corner instead of spanning the viewport. */ @media screen and (min-width: 720px) { .pwa-install { left: auto; right: 24px; bottom: 24px; width: 380px; margin: 0; } } @media screen and (max-width: 380px) { .pwa-install { padding: 16px 14px 14px; } .pwa-install__icon { width: 42px; height: 42px; flex-basis: 42px; } .pwa-install__title { font-size: 15px; } } @media (prefers-reduced-motion: reduce) { .pwa-install, .pwa-toast, .pwa-install__btn { transition: opacity 0.01ms linear, visibility 0s !important; transform: none !important; } } /* Never let the banner end up on a printed report or certificate. */ @media print { .pwa-install, .pwa-toast { display: none !important; } }