/* Aphasia Studio — PWA chrome * Install banner + installed-app (standalone) hooks. * Theme: navy #1a1a2e / green #28a745. No !important, mobile-first, 48px targets. */ :root { --apwa-navy: #1a1a2e; --apwa-green: #28a745; } /* ------------------------------------------------------------------ * * Install banner * ------------------------------------------------------------------ */ .aphasia-pwa-install-banner { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translate(-50%, 140%); width: calc(100% - 24px); max-width: 520px; z-index: 99990; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border-radius: 16px; background: var(--apwa-navy); color: #f4f4f8; box-shadow: 0 12px 36px rgba(10, 10, 25, 0.38); opacity: 0; transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease; } .aphasia-pwa-install-banner.is-visible { transform: translate(-50%, 0); opacity: 1; } .apwa-banner-icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; background-color: #11111f; background-image: url("../pwa/icons/icon-192.png"); background-size: cover; background-position: center; } .apwa-banner-text { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .apwa-banner-text strong { font-size: 0.98rem; font-weight: 700; line-height: 1.25; } .apwa-banner-text span { font-size: 0.82rem; line-height: 1.3; color: #b9b9cc; } .apwa-banner-actions { flex: 1 1 100%; display: flex; gap: 8px; justify-content: flex-end; } .apwa-banner-install, .apwa-banner-dismiss { appearance: none; border: 0; cursor: pointer; min-height: 44px; padding: 0 18px; border-radius: 11px; font-size: 0.92rem; font-weight: 600; font-family: inherit; transition: filter 0.12s ease, transform 0.12s ease, background-color 0.12s ease; } .apwa-banner-install { background: var(--apwa-green); color: #fff; flex: 1 1 auto; } .apwa-banner-install:hover { filter: brightness(1.07); } .apwa-banner-install:active { transform: translateY(1px); } .apwa-banner-dismiss { background: transparent; color: #c8c8d8; } .apwa-banner-dismiss:hover { background: rgba(255, 255, 255, 0.08); } .apwa-banner-install:focus-visible, .apwa-banner-dismiss:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } /* Roomier layout once there's space for everything on one row. */ @media (min-width: 480px) { .apwa-banner-actions { flex: 0 0 auto; } .apwa-banner-install { flex: 0 0 auto; } } @media (prefers-reduced-motion: reduce) { .aphasia-pwa-install-banner { transition: opacity 0.2s ease; transform: translate(-50%, 0); } .apwa-banner-install, .apwa-banner-dismiss { transition: none; } } /* ================================================================== * * Installed-app (standalone) app shell * * Scope: html.aphasia-pwa-standalone — set in (inline, pre-paint) * and re-applied by pwa-init.js (covers iOS navigator.standalone too). * This class only EXISTS in installed-app mode, so none of these rules * can ever touch the normal responsive website — which is also why we * hit Elementor's chrome with selector specificity instead of !important * (honouring the project's hard no-!important rule). * ================================================================== */ /* 1. Hide WordPress / Elementor chrome — header (+nav), footer, and any * marketing call-to-action widgets ("Ready to Start? / Join Free"). * .pwa-hide is an escape hatch: add it to any section in Elementor's * "CSS Classes" field to drop it from the app shell. */ html.aphasia-pwa-standalone .elementor-location-header, html.aphasia-pwa-standalone .elementor-location-footer, html.aphasia-pwa-standalone .elementor-widget-call-to-action, html.aphasia-pwa-standalone .pwa-hide { display: none; } /* 2. Respect device safe areas; leave room for the bottom tab bar. */ .aphasia-pwa-standalone body { padding-top: env(safe-area-inset-top); padding-bottom: calc(64px + env(safe-area-inset-bottom)); } /* ------------------------------------------------------------------ * * Bottom tab bar (app navigation: Practice / Progress / Account) * ------------------------------------------------------------------ */ .aphasia-pwa-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 99980; display: flex; align-items: stretch; background: #ffffff; border-top: 1px solid #e5e7eb; box-shadow: 0 -4px 18px rgba(20, 20, 45, 0.08); padding-bottom: env(safe-area-inset-bottom); } .apwa-tab { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 60px; padding: 8px 4px 6px; text-decoration: none; color: #6b7280; font-size: 0.72rem; font-weight: 600; line-height: 1; transition: color 0.12s ease, background-color 0.12s ease; } .apwa-tab-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; } .apwa-tab-icon svg { width: 24px; height: 24px; } .apwa-tab-label { display: block; } .apwa-tab:hover { color: #1a1a2e; } .apwa-tab.is-active { color: #28a745; } .apwa-tab:focus-visible { outline: 2px solid #28a745; outline-offset: -2px; border-radius: 8px; } @media (prefers-reduced-motion: reduce) { .apwa-tab { transition: none; } }