/* ============================================================ * tab-bar.css — Native-style bottom navigation * Only active when has both .platform-native and .user-logged-in * ========================================================== */ /* Base layout always defined on the element so it survives any class-ordering / specificity issues. Visibility is controlled solely via `display` on the parent-class selector below. */ /* Floating icon-only pill, centered horizontally on both platforms. * Shrinks on scroll-down (.rtb-mini) instead of hiding; a tap restores it. * On iOS 26+ the real native UITabBar replaces this via the RackfyTabs plugin. */ #rackfy-tab-bar { display: none; flex-direction: row; align-items: center; justify-content: center; gap: 4px; position: fixed; left: 50%; right: auto; bottom: calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 10px); width: auto; max-width: calc(100vw - 28px); z-index: 9999; height: 58px; padding: 0 8px; margin: 0; border-radius: var(--radius-pill, 999px); background: var(--glass-bg, rgba(15, 23, 42, 0.55)); -webkit-backdrop-filter: var(--glass-blur, blur(24px) saturate(180%)); backdrop-filter: var(--glass-blur, blur(24px) saturate(180%)); border: 1px solid var(--glass-border, rgba(148, 163, 184, 0.18)); box-shadow: var(--shadow-float, 0 8px 32px rgba(0, 0, 0, 0.45)), inset 0 1px 0 rgba(255, 255, 255, 0.08); transition: height 320ms var(--spring, cubic-bezier(0.34, 1.56, 0.64, 1)), padding 320ms var(--spring, cubic-bezier(0.34, 1.56, 0.64, 1)), bottom 320ms var(--spring, cubic-bezier(0.34, 1.56, 0.64, 1)), transform 280ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 240ms ease; will-change: transform, height; -webkit-tap-highlight-color: transparent; transform: translateX(-50%) translateZ(0); } /* Show whenever we're inside the native app shell — being on app.html implies logged-in. */ body.platform-native #rackfy-tab-bar { display: flex; } html:not(.dark) #rackfy-tab-bar { background: rgba(255, 255, 255, 0.9); border-color: rgba(148, 163, 184, 0.3); } /* Hidden — slides fully off-screen (keyboard open / immersive Care chat). */ #rackfy-tab-bar.rtb-hidden { transform: translateX(-50%) translateY(220%) translateZ(0); } /* Mini — shrunk on scroll-down. Stays visible and clickable; a tap restores it. */ #rackfy-tab-bar.rtb-mini { height: 46px; padding: 0 5px; bottom: calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 12px); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4); } #rackfy-tab-bar .rtb-tab { flex: 0 0 auto; min-width: 0; display: flex; align-items: center; justify-content: center; height: 100%; background: transparent; border: none; outline: none; padding: 0; margin: 0; color: #64748b; cursor: pointer; position: relative; transition: color 160ms ease-out, transform 120ms ease-out; font-family: inherit; box-shadow: none; border-radius: 0; } html:not(.dark) #rackfy-tab-bar .rtb-tab { color: #94a3b8; } #rackfy-tab-bar .rtb-tab:active { transform: scale(0.9); } #rackfy-tab-bar .rtb-tab.is-active { color: #e0f338; } html:not(.dark) #rackfy-tab-bar .rtb-tab.is-active { color: #65a30d; } /* Icon-only: labels are hidden; the icon sits in a pill that lights up when active. */ #rackfy-tab-bar .rtb-label { display: none; } #rackfy-tab-bar .rtb-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 40px; flex-shrink: 0; border-radius: var(--radius-pill, 999px); background: transparent; transition: width 320ms var(--spring, cubic-bezier(0.34, 1.56, 0.64, 1)), height 320ms var(--spring, cubic-bezier(0.34, 1.56, 0.64, 1)), background 200ms ease-out; } #rackfy-tab-bar .rtb-icon svg { width: 23px; height: 23px; display: block; transition: width 320ms var(--spring, cubic-bezier(0.34, 1.56, 0.64, 1)), height 320ms var(--spring, cubic-bezier(0.34, 1.56, 0.64, 1)); } #rackfy-tab-bar .rtb-tab.is-active .rtb-icon { background: var(--accent-tint, rgba(224, 243, 56, 0.14)); } #rackfy-tab-bar .rtb-tab.is-active .rtb-icon svg { fill: currentColor; fill-opacity: 0.16; } /* Mini sizing for icons */ #rackfy-tab-bar.rtb-mini .rtb-icon { width: 42px; height: 30px; } #rackfy-tab-bar.rtb-mini .rtb-icon svg { width: 19px; height: 19px; } /* ---------- Layout shifts when tab bar is present ---------- */ /* (padding-bottom already set above on platform-native > main) */ /* Hide footer on native — tab bar replaces footer nav */ body.platform-native > footer, body.platform-native footer.bg-gray-800 { display: none !important; } /* ---------- Header overrides in platform-native ---------- */ /* Native header — notch backdrop (always visible) + action row (slidable). * The

element is the fixed dark band covering only the notch / * status bar area, ALWAYS visible. The inner

is repositioned to fixed * just below the notch and holds the logo + hamburger; it fades + slides * out on scroll-down. */ body.platform-native header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; padding: 0 !important; padding-top: var(--safe-area-inset-top, env(safe-area-inset-top, 44px)) !important; margin: 0 !important; background: var(--glass-bg-strong, rgba(2, 6, 23, 0.72)) !important; -webkit-backdrop-filter: var(--glass-blur, blur(24px) saturate(180%)) !important; backdrop-filter: var(--glass-blur, blur(24px) saturate(180%)) !important; border-bottom: 0.5px solid var(--glass-border, rgba(148, 163, 184, 0.18)) !important; pointer-events: auto !important; z-index: 30; overflow: hidden !important; max-height: calc(var(--safe-area-inset-top, env(safe-area-inset-top, 44px)) + 50px); transition: max-height 220ms cubic-bezier(0.22, 1, 0.36, 1), border-bottom-color 200ms ease; will-change: max-height; } html:not(.dark) body.platform-native header { background: rgba(255, 255, 255, 0.92) !important; } /* When hidden: collapse header to just the notch band */ body.platform-native.header-hidden header { max-height: var(--safe-area-inset-top, env(safe-area-inset-top, 44px)) !important; border-bottom-color: transparent !important; } /* Action row (logo + hamburger) — sits in normal flow inside header, * appearing right below the notch. Fades when header is hidden. */ body.platform-native header > div { position: relative !important; height: 50px !important; min-height: 0 !important; padding: 0 16px !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; background: transparent !important; border: none !important; transition: opacity 200ms ease; will-change: opacity; z-index: 1; max-width: none !important; opacity: 1; visibility: visible !important; } body.platform-native.header-hidden header > div { opacity: 0; pointer-events: none; } /* Logo — force visible against the inline `body.hero-logo-active #home-logo * { opacity: 0 }` rule in app.html, which kicks in on the Home view. */ body.platform-native #home-logo, body.platform-native.hero-logo-active #home-logo { display: flex !important; align-items: center !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; visibility: visible !important; flex-shrink: 0; } body.platform-native #home-logo .home-logo-image, body.platform-native.hero-logo-active #home-logo .home-logo-image { height: 26px !important; max-width: 140px !important; width: auto !important; display: block !important; opacity: 1 !important; visibility: visible !important; } /* Hamburger goes back to natural flow inside header (no floating circle) */ body.platform-native #rackfy-mobile-menu-btn { position: static !important; top: auto !important; right: auto !important; background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: none !important; border-radius: 0 !important; width: 40px !important; height: 40px !important; padding: 8px !important; z-index: auto !important; pointer-events: auto !important; color: #f8fafc; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0; } html:not(.dark) body.platform-native #rackfy-mobile-menu-btn { color: #0f172a; } /* Hide remaining desktop chrome / mobile-user-icon (kept hidden on native) */ body.platform-native #main-nav, body.platform-native #header-back-btn, body.platform-native #mobile-user-icon { display: none !important; } html body.platform-native > main { /* Clear the full header (notch + 50px action row) + 16px breathing room. */ padding-top: calc(var(--safe-area-inset-top, env(safe-area-inset-top, 44px)) + 50px + 16px) !important; /* Clear the floating pill: height (58) + bottom gap (10) + breathing room. */ padding-bottom: calc(58px + 10px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 1rem) !important; padding-left: 0 !important; padding-right: 0 !important; margin-top: 0 !important; max-width: 100vw !important; } /* iOS 26+: a UITabBar nativa (plugin rackfy-native-tabs) substitui a barra * HTML. Conteúdo passa a clarear a altura da barra do sistema (~49px). */ body.rk-native-tabs #rackfy-tab-bar { display: none !important; } html body.rk-native-tabs > main { padding-bottom: calc(49px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 1.25rem) !important; } /* Globally prevent horizontal overflow on native — Tailwind .container or wide form * elements were producing pinch/scroll on the X axis. */ html:has(body.platform-native), body.platform-native, body.platform-native > main, body.platform-native section, body.platform-native #finder-section, body.platform-native #forum-section, body.platform-native #setup-lab-section, body.platform-native #profile-section, body.platform-native #profile-section > *, body.platform-native #profile-section > * > *, body.platform-native .rackfy-mobile-home, body.platform-native .rackfy-mobile-home > *, body.platform-native header { overflow-x: hidden !important; max-width: 100vw !important; } /* Lock scrolling axis on the document root */ html body.platform-native { position: relative !important; width: 100vw !important; overflow-x: hidden !important; overscroll-behavior-x: none !important; touch-action: pan-y !important; } body.platform-native #mobile-menu { padding-top: 0; } /* (Old floating-hamburger override removed — hamburger now lives inside the header.) */