/* ================================================================ app.css — PayStubCheck app-shell layer (Stage 1: foundation) Additive only. Establishes the "feels like a native app" chrome: bottom tab bar, smooth cross-page transitions, premium motion. Loads site-wide. Never alters forms, generators, or Stripe wiring. ================================================================ */ :root{ --app-forest:#1f3709; --app-glass:rgba(255,255,255,.74); --app-glass-brd:rgba(120,150,80,.18); --app-spring:cubic-bezier(.32,.72,0,1); --app-ease:cubic-bezier(.4,0,.2,1); --app-tabbar-h:72px; } /* ---- smooth cross-page (app-like) navigation ---- */ @view-transition{ navigation:auto; } ::view-transition-old(root),::view-transition-new(root){ animation-duration:.34s; animation-timing-function:cubic-bezier(.4,0,.2,1); } /* ================================================================ Bottom tab bar — mobile only. Real links styled as native tabs. Persists across page transitions so it feels like one app shell. ================================================================ */ .app-tabbar{ display:none; } @media (max-width:820px){ .app-tabbar{ position:fixed; left:0; right:0; bottom:0; z-index:9000; display:flex; align-items:center; justify-content:space-around; height:calc(var(--app-tabbar-h) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); background:var(--app-glass); -webkit-backdrop-filter:blur(22px) saturate(1.7); backdrop-filter:blur(22px) saturate(1.7); border-top:1px solid var(--app-glass-brd); view-transition-name:app-tabbar; } .app-tab{ display:flex; flex-direction:column; align-items:center; gap:4px; flex:1; text-decoration:none; padding-top:8px; color:var(--text-3,#7a8f68); font-size:10.5px; font-weight:600; -webkit-tap-highlight-color:transparent; transition:color .2s; } .app-tab svg{ width:23px; height:23px; transition:transform .2s var(--app-spring); } .app-tab.active{ color:var(--green-xdark,#3d6202); } .app-tab.active svg{ transform:translateY(-1px) scale(1.06); } .app-tab:active svg{ transform:scale(.85); } .app-tab-fab{ flex:0 0 auto; margin-top:-24px; } .app-tab-fab a{ display:grid; place-items:center; width:56px; height:56px; border-radius:19px; background:var(--green,#66a302); color:#fff; text-decoration:none; box-shadow:0 8px 22px rgba(102,163,2,.42); transition:transform .2s var(--app-spring); } .app-tab-fab a:active{ transform:scale(.9) rotate(90deg); } .app-tab-fab svg{ width:26px; height:26px; } /* keep page content clear of the bar */ body:has(.app-tabbar) footer{ padding-bottom:calc(40px + var(--app-tabbar-h) + env(safe-area-inset-bottom)); } /* the old sticky CTA is replaced by the tab bar's Create button on mobile */ body:has(.app-tabbar) #sticky-cta{ display:none !important; } } /* ================================================================ Premium scroll-reveal. Guarded by .js-ready on so that if JS fails, nothing is ever hidden (content shows by default). ================================================================ */ .js-ready .app-reveal{ opacity:0; transform:translateY(16px); } .js-ready .app-reveal.in{ opacity:1; transform:none; transition:opacity .6s var(--app-spring), transform .6s var(--app-spring); } /* gentle press feedback on primary actions site-wide (touch app feel) */ @media (hover:none){ .btn-primary:active,.btn-checkout:active,.btn-step-next:active{ transform:scale(.98); } } @media (prefers-reduced-motion:reduce){ @view-transition{ navigation:none; } .js-ready .app-reveal{ opacity:1 !important; transform:none !important; } *{ scroll-behavior:auto !important; } }