/** * PWA Shell CSS * * ARCHITECTURE: * Mobile detection uses CSS @media (max-width: 768px) — INSTANT, no JS needed. * Standalone detection uses html.pwa-standalone class — set by inline JS. * JS class html.pwa-active is set for JS behaviour (polling, events) but NOT * required for visual rendering. * * @package SayWOW_PWA * @version 1.3.0 */ /* ============================================ 1. BASE: PWA chrome hidden on desktop ============================================ */ .pwa-header, .pwa-bottom-nav, .pwa-bars { display: none; } /* ============================================ 2. MOBILE: Show PWA chrome, hide theme Primary trigger — pure CSS, no JS needed ============================================ */ @media (max-width: 768px) { /* --- Show PWA elements --- */ .pwa-header { display: block !important; } .pwa-bottom-nav { display: flex !important; } .pwa-bars { display: flex !important; } /* --- Hide theme header --- */ header:not(.pwa-header), .sw-header, header.sw-header, .site-header, #masthead, .main-navigation, nav.main-navigation, .gen-sidebar-nav, .navigation-search, .top-bar, .inside-header, #site-navigation, .main-nav, .mobile-menu-control-wrapper, #mobile-header, .menu-toggle { display: none !important; } /* --- Hide theme footer --- */ footer:not(.pwa-bottom-nav), .sw-footer, footer.sw-footer, #colophon, footer#colophon, .sw-footer-trust-bar, .sw-footer-main, .site-footer, .footer-widgets, .site-info { display: none !important; } /* --- Hide misc theme elements --- */ .generate-back-to-top, .back-to-top { display: none !important; } /* --- Body offset for fixed header/footer --- */ body { padding-top: calc(var(--pwa-header-height) + var(--pwa-safe-top)) !important; padding-bottom: calc(var(--pwa-footer-height) + var(--pwa-safe-bottom)) !important; } /* GP: remove any existing top margin */ .site-content { margin-top: 0 !important; } } /* ============================================ 3. STANDALONE MODE (any viewport) Adds overscroll prevention + hides theme chrome even on larger screens if installed. Show rules are AFTER the desktop @media block so they override the desktop hide. ============================================ */ html.pwa-standalone header:not(.pwa-header), html.pwa-standalone footer:not(.pwa-bottom-nav), html.pwa-standalone .sw-header, html.pwa-standalone .sw-footer, html.pwa-standalone #colophon, html.pwa-standalone .site-header, html.pwa-standalone .site-footer, html.pwa-standalone .sw-footer-trust-bar, html.pwa-standalone .sw-footer-main, html.pwa-standalone .generate-back-to-top { display: none !important; } html.pwa-standalone body { padding-top: calc(var(--pwa-header-height) + var(--pwa-safe-top)) !important; padding-bottom: calc(var(--pwa-footer-height) + var(--pwa-safe-bottom)) !important; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; } html.pwa-standalone { overscroll-behavior-y: contain; } /* ============================================ 4. DESKTOP: Restore theme chrome Only needed if standalone class persists on a wide viewport (e.g. desktop PWA) ============================================ */ @media (min-width: 769px) { /* Desktop browser: never show PWA chrome unless standalone */ .pwa-header, .pwa-bottom-nav, .pwa-bars { display: none !important; } } /* Standalone on any screen size overrides the desktop hide */ html.pwa-standalone .pwa-header { display: block !important; } html.pwa-standalone .pwa-bottom-nav { display: flex !important; } html.pwa-standalone .pwa-bars { display: flex !important; } /* ============================================ 4b. HIDE FAST CART FLOATING BUTTON IN PWA PWA header provides the cart trigger — the floating button is redundant and causes visual overlap / background shape issues. ============================================ */ @media (max-width: 768px) { #wfc-open-cart-button { display: none !important; } } html.pwa-standalone #wfc-open-cart-button { display: none !important; } /* ============================================ 5. PWA HEADER ============================================ */ .pwa-header { position: fixed; top: 0; left: 0; right: 0; width: 100%; height: calc(var(--pwa-header-height) + var(--pwa-safe-top)); padding-top: var(--pwa-safe-top); background: var(--pwa-header-bg); z-index: 1000; font-family: var(--sw-font); -webkit-user-select: none; user-select: none; box-sizing: border-box; } .pwa-header *, .pwa-header *::before, .pwa-header *::after { box-sizing: border-box; margin: 0; padding: 0; } .pwa-header__inner { display: flex; align-items: center; justify-content: space-between; width: 100%; height: var(--pwa-header-height); padding: 0 14px; padding-left: calc(14px + var(--pwa-safe-left)); padding-right: calc(14px + var(--pwa-safe-right)); } /* Logo */ .pwa-header__logo { display: flex; align-items: center; text-decoration: none !important; flex-shrink: 0; line-height: 1; } .pwa-header__logo-img { display: block !important; width: 40px !important; height: 40px !important; min-width: 40px; min-height: 40px; max-width: 40px; max-height: 40px; border-radius: 8px; object-fit: contain; visibility: visible !important; opacity: 1 !important; background: transparent; padding: 0; border: none; box-sizing: border-box; vertical-align: middle; margin-top: 1px; } /* Action items */ .pwa-header__actions { display: flex; align-items: center; gap: 10px; } /* Last icon gets extra right margin to balance logo left margin */ .pwa-header__actions > :last-child.pwa-header__icon-btn { margin-right: 2px; } /* Join button (red CTA) */ .pwa-header__join-btn { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 18px; background: var(--sw-red); color: var(--sw-white) !important; font-family: var(--sw-font); font-size: 15px; font-weight: var(--sw-fw-bold); border-radius: var(--sw-radius-sm); text-decoration: none !important; white-space: nowrap; transition: var(--sw-transition); letter-spacing: 0; } .pwa-header__join-btn:hover, .pwa-header__join-btn:active { background: var(--sw-red-hover); color: var(--sw-white) !important; } /* Icon buttons (cart, login, notifications) Shape: rounded square (8px) — matches desktop header */ .pwa-header__icon-btn { display: inline-flex !important; align-items: center; justify-content: center; position: relative; width: 40px; height: 40px; color: var(--sw-white) !important; text-decoration: none !important; border-radius: 8px; transition: var(--sw-transition); background: transparent !important; border: none !important; } .pwa-header__icon-btn:hover, .pwa-header__icon-btn:active { background: rgba(255, 255, 255, 0.12) !important; color: var(--sw-white) !important; } /* SVG icons inside header — fully protected from Fast Cart / WC / theme CSS */ .pwa-header__icon-btn svg { display: block !important; width: 22px !important; height: 22px !important; fill: none !important; stroke: var(--sw-white) !important; stroke-width: 2 !important; stroke-linecap: round !important; stroke-linejoin: round !important; flex-shrink: 0; color: var(--sw-white) !important; } /* Badge (red dot with count) Auto-expands for large numbers (e.g. "99+") via min-width + auto width */ .pwa-header__badge { position: absolute; top: -4px; right: -6px; min-width: 18px; width: auto; height: 18px; padding: 0 5px; background: var(--sw-red) !important; color: var(--sw-white) !important; font-family: var(--sw-font); font-size: 10px !important; font-weight: var(--sw-fw-bold); line-height: 1 !important; text-align: center; border-radius: 9px !important; border: 2px solid var(--sw-blue) !important; pointer-events: none; display: flex !important; align-items: center; justify-content: center; white-space: nowrap; box-sizing: border-box; } .pwa-header__badge[style*="display:none"], .pwa-header__badge[style*="display: none"] { display: none !important; } /* Funds pill — matches Join button proportions */ .pwa-header__funds-pill { display: inline-flex; align-items: center; height: 36px; padding: 0 18px; background: rgba(255, 255, 255, 0.15); color: var(--sw-white) !important; font-family: var(--sw-font); font-size: 15px; font-weight: var(--sw-fw-semibold); border-radius: 18px; text-decoration: none !important; white-space: nowrap; transition: var(--sw-transition); } .pwa-header__funds-pill:hover, .pwa-header__funds-pill:active { background: rgba(255, 255, 255, 0.25); color: var(--sw-white) !important; } /* ============================================ 6. CONTENT AREA — standalone-specific offset ============================================ */ html.pwa-standalone .site-content { margin-top: 0 !important; }