/* * ========================================================================= * SENDPK.COM — PWA install banner * ========================================================================= * Shared by the public theme (/login.php) and the dashboard shell * (/dashboard/dashboard.php), so it is deliberately self-contained: its * own `sp-pwa-*` namespace, no Bootstrap classes, no theme variables from * either app. It follows the dashboard's dark mode through * [data-bs-theme="dark"]; the public theme is light-only. * * The markup is created by /assets/js/pwa-install.js. * ========================================================================= */ .sp-pwa { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483000; /* above modals, toasts and sticky bars in both apps */ padding: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: center; pointer-events: none; /* only the card itself is interactive */ opacity: 0; transform: translateY(16px); transition: opacity .24s ease, transform .24s ease; } .sp-pwa.sp-pwa-in { opacity: 1; transform: translateY(0); } .sp-pwa-card { pointer-events: auto; width: 100%; max-width: 32rem; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: #ffffff; border: 1px solid rgba(15, 23, 42, .1); box-shadow: 0 12px 32px rgba(15, 23, 42, .18); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } .sp-pwa-icon { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px; display: block; } .sp-pwa-body { flex: 1 1 auto; min-width: 0; } .sp-pwa-title { margin: 0 0 2px; font-size: .9375rem; font-weight: 700; line-height: 1.3; color: #0f172a; } .sp-pwa-text { margin: 0; font-size: .8125rem; line-height: 1.45; color: #475569; } .sp-pwa-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; } .sp-pwa-btn { appearance: none; border: 0; border-radius: 10px; padding: 9px 18px; background: #075E54; color: #ffffff; font-size: .875rem; font-weight: 600; font-family: inherit; line-height: 1.2; cursor: pointer; white-space: nowrap; transition: background-color .15s ease; } .sp-pwa-btn:hover, .sp-pwa-btn:focus-visible { background: #128c7e; } .sp-pwa-close { appearance: none; border: 0; background: transparent; color: #94a3b8; font-size: 1.5rem; line-height: 1; padding: 4px 8px; border-radius: 8px; cursor: pointer; font-family: inherit; transition: color .15s ease, background-color .15s ease; } .sp-pwa-close:hover, .sp-pwa-close:focus-visible { color: #0f172a; background: rgba(15, 23, 42, .06); } .sp-pwa-btn:focus-visible, .sp-pwa-close:focus-visible { outline: 2px solid #128c7e; outline-offset: 2px; } /* Narrow phones — stack the copy above the buttons so nothing truncates. */ @media (max-width: 26.25em) { .sp-pwa-card { flex-wrap: wrap; row-gap: 10px; } .sp-pwa-body { flex: 1 1 60%; } .sp-pwa-actions { width: 100%; justify-content: flex-end; } .sp-pwa-btn { flex: 1 1 auto; text-align: center; } } /* ---- Dark mode -------------------------------------------------------- */ [data-bs-theme="dark"] .sp-pwa-card { background: #111c2e; border-color: rgba(255, 255, 255, .12); box-shadow: 0 12px 32px rgba(0, 0, 0, .5); } [data-bs-theme="dark"] .sp-pwa-title { color: #e6edf7; } [data-bs-theme="dark"] .sp-pwa-text { color: #9fb0c7; } [data-bs-theme="dark"] .sp-pwa-close { color: #7e8ea6; } [data-bs-theme="dark"] .sp-pwa-close:hover, [data-bs-theme="dark"] .sp-pwa-close:focus-visible { color: #e6edf7; background: rgba(255, 255, 255, .08); } /* No prefers-color-scheme rule on purpose: the dashboard always writes an explicit data-bs-theme on (handled above), and the public theme is light-only — reacting to the OS preference there would put a dark banner on a light page. */ /* Respect a reduced-motion preference. */ @media (prefers-reduced-motion: reduce) { .sp-pwa { transition: none; transform: none; } }