/* * THE PLATFORM BOTTOM TAB BAR — Ask, Find, Fund, Close, Me. * * ONE FILE, SEVEN SITES. This is a byte-identical copy on every site in the * network (ordertitle.ai/shared, thegrowthcollective-ai/shared, and * public/shared on the four Next apps). Edit it in one place and copy it out; * do not fork it per site. Everything that differs between sites is passed in * as configuration by tabbar.js — the accent colour, which tab is current, and * where the current site's own tab points. * * ── PHONES ONLY ──────────────────────────────────────────────────────────── * Every rule that draws anything lives inside `@media (max-width:640px)`. * Desktop keeps the full platform menu in the top bar and gets no bar at all — * not a hidden one, no bar. That is also why `--jdl-tabbar-h` is 0px by * default and only takes a real value inside the query: a page that subtracts * it from its own height (see the Ask AI splashes) subtracts nothing on a * laptop, with no media query of its own to keep in step with this one. * * ── HOW A PAGE MAKES ROOM FOR IT ─────────────────────────────────────────── * Two modes, because the platform has two kinds of page. * * fixed (the default, for anything that scrolls) — the bar is pinned to the * bottom of the viewport and the body gets `padding-bottom` so the * last thing on the page can still be reached. It slides away as you * scroll down and comes back as you scroll up. * * flow (for the Ask AI splashes, which are a fixed-height column with * nothing scrolling) — the bar is an ordinary last row of that * column. No pinning, no padding, no height arithmetic: the splash * measures whatever is left, so when the bar is removed the splash * grows back into the space by itself. Nothing on those pages * scrolls, so there is nothing to hide it on either. * * ── z-index 40 IS DELIBERATELY LOW ───────────────────────────────────────── * The bar is page furniture, not an overlay. It must sit above ordinary * content and BELOW anything modal — the chat overlays on these sites run at * z-50 and up. A tab bar floating on top of a full-screen chat would cover the * composer, which is the one control that screen exists for. The bar also * takes itself off the page entirely on `jdl:chat-start` (see tabbar.js), so on * the screens where a conversation is in progress this never has to be fought * out in the stacking context at all. */ /* 0 unless the bar is actually on the page AND we are on a phone. Pages that subtract this from their own height can do so unconditionally. */ :root { --jdl-tabbar-h: 0px; } /* Nothing at all above the phone breakpoint. */ .jdl-tabbar { display: none; } @media (max-width: 640px) { /* THE BAR'S OWN HEIGHT, defined unconditionally. It must NOT depend on the html.jdl-tabs class below. React restores the server-rendered className of during hydration on any app that has not opted out with suppressHydrationWarning, which strips a class a script added before it ran -- and when the bar's height was var(--jdl-tabbar-h), that left the bar sitting in the DOM at ZERO HEIGHT. Visible while the page loaded, gone the moment it finished. The bar now sizes itself and only the page's reservation depends on the class. */ :root { --jdl-tabbar-size: calc(54px + env(safe-area-inset-bottom, 0px)); } /* Set on by tabbar.js while the bar is mounted, and taken off again when a chat starts. This is what a PAGE reserves space with -- the bar itself no longer reads it, so losing the class can cost a page its padding but can never make the bar disappear. */ html.jdl-tabs { --jdl-tabbar-h: var(--jdl-tabbar-size); } /* The pinned bar covers the bottom of the document, so the document is told to end that much higher. TWO WAYS TO OPT OUT, and they are deliberately separate things. `data-tabbar="flow"` opts out by construction: the bar is a row of the page's own column there and already takes its own space. `data-tabbar-pad="off"` is for a page that keeps the bar PINNED but has already made room for it some other way — jdldeals.ai's Ask AI route subtracts --jdl-tabbar-h from its shell's height, and padding under that shell would reserve the same 54px a second time and give the page a scrollbar it should not have. env(safe-area-inset-bottom) reads 0 on a site whose viewport meta has no viewport-fit=cover, which is harmless: the bar is then 54px, exactly as it was before the inset was asked for. */ html.jdl-tabs body:not([data-tabbar='flow']):not([data-tabbar-pad='off']) { padding-bottom: var(--jdl-tabbar-h); } /* ── THE HOST ELEMENT IS DELIBERATELY DEFENSIVE ────────────────────────── This bar is appended to seven different sites, each with its own stylesheet, and a bare element selector in any of them reaches it. That is not hypothetical: thegrowthcollective.ai styles the bare `nav` element (position:sticky; top:0; z-index:60) for its own header, and while the bar was a