/* ForgeStore App Shell * ───────────────────────────────────────────────────────────── * Everything here is scoped to `.pwa-standalone` (a class the JS * below adds to ONLY when running installed, i.e. * matchMedia('(display-mode: standalone)') or iOS's * navigator.standalone). Desktop and mobile-browser visitors never * see any of this — same URL, same markup, zero risk of regression. * * Provides: * - .app-feed / .app-card → horizontal swipeable card carousel (scroll-snap, no JS needed) * - .app-feed-dots → auto-updating position dots for a feed * - .app-ptr → pull-to-refresh wrapper (needs data-ptr-url or reloads current page) * - .app-only / .browser-only → visibility toggles */ .app-only { display: none; } html.pwa-standalone .app-only { display: block; } html.pwa-standalone .browser-only { display: none !important; } /* ── Swipeable card feed ── */ html.pwa-standalone .app-feed { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 2px 16px 6px; margin: 0 -16px; scrollbar-width: none; } html.pwa-standalone .app-feed::-webkit-scrollbar { display: none; } html.pwa-standalone .app-card { scroll-snap-align: center; flex: 0 0 auto; width: 78%; max-width: 300px; } @media (min-width: 480px) { html.pwa-standalone .app-card { width: 46%; } } html.pwa-standalone .app-feed-dots { display: flex; justify-content: center; gap: 5px; margin: 8px 0 4px; } html.pwa-standalone .app-feed-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.18); transition: background .2s, width .2s; } html.pwa-standalone .app-feed-dot.on { background: #8b5cf6; width: 14px; border-radius: 3px; } /* ── Pull-to-refresh ── */ html.pwa-standalone .app-ptr { position: relative; overflow: visible; } .app-ptr-indicator { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 8px); left: 50%; transform: translate(-50%, -60px); width: 34px; height: 34px; border-radius: 50%; background: #171821; border: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; z-index: 300; transition: transform .15s ease-out, opacity .15s; opacity: 0; pointer-events: none; } .app-ptr-indicator svg { width: 16px; height: 16px; stroke: #c4b5fd; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .1s linear; } .app-ptr-indicator.spin svg { animation: app-ptr-spin .7s linear infinite; } @keyframes app-ptr-spin { to { transform: rotate(360deg); } } /* ── Tap feedback (native-ish) ── */ html.pwa-standalone .app-card, html.pwa-standalone .app-tap { -webkit-tap-highlight-color: transparent; transition: transform .12s ease; } html.pwa-standalone .app-card:active, html.pwa-standalone .app-tap:active { transform: scale(0.97); }