@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;700;800&family=Inter:wght@400;500;600&display=swap'); /* Fast Gives — PWA App Shell Activates ONLY in standalone display-mode (installed app), via the html.fg-standalone class set synchronously in before paint. Browser visitors never see this — .fg-app-shell is display:none by default. */ :root{ --fg-blue: #2E9FD6; --fg-orange: #F2994A; --fg-navy: #16324F; --fg-red: #D32433; --fg-white: #FFFFFF; --fg-grey-bg: #F4F6F8; --fg-grey-text: #64748B; --fg-safe-bottom: env(safe-area-inset-bottom, 0px); --fg-safe-top: env(safe-area-inset-top, 0px); } .fg-app-shell{ display: none; /* default: hidden for browser visitors */ position: fixed; inset: 0; z-index: 999999; background: var(--fg-white); font-family: 'Inter', system-ui, sans-serif; color: var(--fg-navy); flex-direction: column; } html.fg-standalone .fg-app-shell{ display: flex; } .fg-app-shell *{ box-sizing: border-box; } .fg-app-shell h1, .fg-app-shell h2, .fg-app-shell .fg-price{ font-family: 'Manrope', sans-serif; } /* ---------- Top App Bar ---------- */ .fg-appbar{ flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: calc(10px + var(--fg-safe-top)) 16px 10px; background: var(--fg-navy); color: var(--fg-white); } .fg-appbar__logo{ height: 28px; flex-shrink: 0; } .fg-appbar__search{ flex: 1; display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.14); border-radius: 20px; padding: 9px 14px; color: rgba(255,255,255,0.75); font-size: 0.88rem; text-decoration: none; } .fg-appbar__search svg{ width: 16px; height: 16px; flex-shrink: 0; } .fg-appbar__icon{ position: relative; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--fg-white); flex-shrink: 0; } .fg-appbar__icon svg{ width: 22px; height: 22px; } .fg-badge{ position: absolute; top: 2px; right: 2px; background: var(--fg-orange); color: var(--fg-navy); font-size: 0.65rem; font-weight: 800; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 3px; } /* ---------- Scrollable content ---------- */ .fg-appcontent{ flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--fg-grey-bg); padding-bottom: 24px; } /* ---------- Hero (single bold moment) ---------- */ .fg-hero{ position: relative; margin: 14px 16px 0; border-radius: 16px; overflow: hidden; aspect-ratio: 16/9; background: linear-gradient(135deg, var(--fg-navy), #1E4A73); } .fg-hero__track{ display: flex; height: 100%; transition: transform 0.45s cubic-bezier(.4,0,.2,1); } .fg-hero__slide{ min-width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 24px; position: relative; } .fg-hero__slide::after{ content:''; position:absolute; inset:0; background: linear-gradient(135deg, rgba(22,50,79,0.85), rgba(46,159,214,0.55)); z-index: 0; } .fg-hero__slide-content{ position: relative; z-index: 1; max-width: 78%; } .fg-hero__slide h2{ color: var(--fg-white); font-size: 1.35rem; font-weight: 800; line-height: 1.2; margin: 0 0 6px; } .fg-hero__slide p{ color: rgba(255,255,255,0.88); font-size: 0.85rem; margin: 0; } .fg-hero__dots{ position: absolute; bottom: 12px; left: 24px; display: flex; gap: 6px; z-index: 2; } .fg-hero__dot{ width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.4); transition: background 0.2s, width 0.2s; } .fg-hero__dot--active{ background: var(--fg-white); width: 18px; border-radius: 3px; } /* ---------- Section shelves (shared) ---------- */ .fg-shelf{ margin-top: 26px; } .fg-shelf__head{ display: flex; align-items: baseline; justify-content: space-between; padding: 0 16px; margin-bottom: 12px; } .fg-shelf__head h2{ font-size: 1.02rem; font-weight: 800; margin: 0; color: var(--fg-navy); } .fg-shelf__head a{ font-size: 0.8rem; font-weight: 600; color: var(--fg-blue); text-decoration: none; } /* ---------- Category chips (horizontal scroll) ---------- */ .fg-cats{ display: flex; gap: 18px; overflow-x: auto; padding: 0 16px 4px; scroll-snap-type: x proximity; } .fg-cats::-webkit-scrollbar{ display: none; } .fg-cat{ display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; flex-shrink: 0; scroll-snap-align: start; width: 64px; } .fg-cat__icon{ width: 56px; height: 56px; border-radius: 50%; background: var(--fg-white); border: 1.5px solid #E4E9EE; display: flex; align-items: center; justify-content: center; color: var(--fg-blue); font-size: 1.4rem; font-weight: 700; overflow: hidden; } .fg-cat__icon img{ width: 100%; height: 100%; object-fit: cover; } .fg-cat__label{ font-size: 0.72rem; font-weight: 600; color: var(--fg-navy); text-align: center; line-height: 1.15; } /* ---------- Trust ticker (compact, not cards) ---------- */ .fg-ticker{ display: flex; align-items: center; gap: 0; margin: 22px 16px 0; background: var(--fg-white); border: 1px solid #E4E9EE; border-radius: 12px; overflow: hidden; } .fg-ticker__item{ flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; text-align: center; border-right: 1px solid #E4E9EE; } .fg-ticker__item:last-child{ border-right: none; } .fg-ticker__item svg{ width: 18px; height: 18px; color: var(--fg-blue); } .fg-ticker__item span{ font-size: 0.65rem; font-weight: 600; color: var(--fg-grey-text); line-height: 1.2; } /* ---------- Product shelf (WooCommerce loop styling override) ---------- */ .fg-shelf .products{ display: flex !important; gap: 12px !important; overflow-x: auto !important; padding: 0 16px 4px !important; margin: 0 !important; list-style: none !important; scroll-snap-type: x proximity; } .fg-shelf .products::-webkit-scrollbar{ display: none; } .fg-shelf ul.products li.product{ flex-shrink: 0 !important; width: 148px !important; scroll-snap-align: start; background: var(--fg-white) !important; border: 1px solid #E4E9EE !important; border-radius: 14px !important; padding: 10px !important; margin: 0 !important; float: none !important; } .fg-shelf ul.products li.product img{ width: 100% !important; height: 128px !important; object-fit: cover !important; border-radius: 8px !important; margin: 0 0 8px !important; } .fg-shelf ul.products li.product .woocommerce-loop-product__title, .fg-shelf ul.products li.product h2, .fg-shelf ul.products li.product h3{ font-family: 'Inter', sans-serif !important; font-size: 0.8rem !important; font-weight: 600 !important; color: var(--fg-navy) !important; line-height: 1.3 !important; margin: 0 0 4px !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .fg-shelf ul.products li.product .price{ font-family: 'Manrope', sans-serif !important; font-weight: 800 !important; font-size: 0.92rem !important; color: var(--fg-navy) !important; } .fg-shelf ul.products li.product .button{ display: block !important; margin-top: 8px !important; background: var(--fg-blue) !important; color: var(--fg-white) !important; border-radius: 8px !important; padding: 7px !important; font-size: 0.76rem !important; font-weight: 700 !important; text-align: center !important; text-decoration: none !important; } /* ---------- Push opt-in card ---------- */ .fg-pushcard{ margin: 26px 16px 0; background: linear-gradient(135deg, var(--fg-navy), #1E4A73); border-radius: 16px; padding: 18px; display: flex; align-items: center; gap: 14px; } .fg-pushcard__icon{ width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,0.14); display: flex; align-items: center; justify-content: center; color: var(--fg-orange); flex-shrink: 0; } .fg-pushcard__icon svg{ width: 22px; height: 22px; } .fg-pushcard__text{ flex: 1; } .fg-pushcard__text strong{ display: block; color: var(--fg-white); font-size: 0.88rem; margin-bottom: 2px; } .fg-pushcard__text span{ display: block; color: rgba(255,255,255,0.75); font-size: 0.76rem; } .fg-pushcard__btn{ flex-shrink: 0; background: var(--fg-orange); color: var(--fg-navy); border: none; border-radius: 8px; padding: 9px 14px; font-size: 0.78rem; font-weight: 800; cursor: pointer; } /* ---------- Bottom Tab Bar ---------- */ .fg-tabbar{ flex-shrink: 0; display: flex; background: var(--fg-white); border-top: 1px solid #E4E9EE; padding-bottom: var(--fg-safe-bottom); } .fg-tab{ flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px 8px; text-decoration: none; color: var(--fg-grey-text); position: relative; } .fg-tab svg{ width: 22px; height: 22px; } .fg-tab span{ font-size: 0.65rem; font-weight: 600; } .fg-tab--active{ color: var(--fg-blue); } .fg-tab__badge{ position: absolute; top: 4px; right: 22%; background: var(--fg-red); color: var(--fg-white); font-size: 0.6rem; font-weight: 800; min-width: 15px; height: 15px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 3px; } /* ---------- Skeleton loading ---------- */ .fg-skeleton{ background: linear-gradient(90deg, #EAEDF0 25%, #F4F6F8 37%, #EAEDF0 63%); background-size: 400% 100%; animation: fg-shimmer 1.4s ease infinite; border-radius: 10px; } @keyframes fg-shimmer{ 0%{ background-position: 100% 50%; } 100%{ background-position: 0 50%; } } /* ---------- Recently viewed (conditional) ---------- */ .fg-shelf--recent{ display: none; } .fg-shelf--recent.fg-has-items{ display: block; } /* ---------- Persistent chrome (every page except Home) ---------- */ /* Hidden by default — only shown for installed-app users, on real WooCommerce-rendered pages (shop, product, cart, account, etc). The real theme content flows normally between these two fixed bars; body.fg-has-chrome adds padding so content isn't hidden underneath them. */ .fg-chrome-fixed-top, .fg-chrome-fixed-bottom{ display: none; position: fixed; left: 0; right: 0; z-index: 999998; } .fg-chrome-fixed-top{ top: 0; } .fg-chrome-fixed-bottom{ bottom: 0; } html.fg-standalone .fg-chrome-fixed-top, html.fg-standalone .fg-chrome-fixed-bottom{ display: block; } html.fg-standalone body.fg-has-chrome{ padding-top: calc(56px + var(--fg-safe-top)); padding-bottom: calc(64px + var(--fg-safe-bottom)); } /* The chrome bars reuse .fg-appbar/.fg-tabbar styles, which are normally scoped under .fg-app-shell — re-declare the essentials here so they render correctly standalone inside .fg-chrome-fixed-top/bottom too. */ .fg-chrome-fixed-top .fg-appbar, .fg-chrome-fixed-bottom .fg-tabbar{ font-family: 'Inter', system-ui, sans-serif; } /* ---------- Accessibility ---------- */ .fg-app-shell a:focus-visible, .fg-app-shell button:focus-visible{ outline: 2px solid var(--fg-blue); outline-offset: 2px; } @media (prefers-reduced-motion: reduce){ .fg-hero__track{ transition: none; } .fg-skeleton{ animation: none; } }