/** * Mobile bottom bar — option C, v10.218. * * Replaces the v9.48 icon-only Instagram copy. What changed and why: * * LABELS ARE VISIBLE. They were present in the markup and then hidden by * a clip-rect rule, i.e. shipped for screen readers and withheld from * everyone else. Instagram can drop labels because its five icons are * known to a billion people; a directory's are not, and "+" least of all. * * THE ACTIVE TAB IS A PILL, not a rule along the top edge. Neither * Instagram nor Facebook puts a line above the bar, and a 2px bar at the * very top of the active slot reads as a rendering artefact. A filled * icon inside a tinted pill says "you are here" with SHAPE as well as * colour, so it survives a colour-blind reader and a sunlit screen. * * THE CENTRE BUTTON IS RAISED AND SOLID. It was a thin outlined square — * the only bordered thing on the screen, which made the primary action * look disabled. Posting a listing is the thing this whole directory * needs people to do. * * THE BODY CLASS IS SET BY THE BAR ITSELF. `body.has-mobile-bottombar` * has carried the page's bottom padding and the floating-widget offset * since v9.48 and NOTHING EVER ADDED THE CLASS — verified on the live * markup, which renders ``. So the last ~48px of every * mobile page sat under the bar and the bug widget overlapped it. The * component's own script adds the class now. */ #gdirMobBar{display:none} @media(max-width:991.98px){ #gdirMobBar{ display:flex;align-items:stretch; position:fixed;left:0;right:0;bottom:0;z-index:1045; background:var(--surface,#fff); border-top:1px solid var(--line,#e5e7eb); padding:4px 0 calc(4px + env(safe-area-inset-bottom)); transition:transform .22s cubic-bezier(.4,0,.2,1); } /* Hidden while scrolling down a long page, back on any scroll up — what Facebook and Threads do. Returns about 60px to the content. */ #gdirMobBar.gmb-away{transform:translateY(calc(100% + 2px))} /* ── v10.220 · the reserved strip goes INSIDE the last block ────── v10.218 put it on , which is correct on a page whose last element is ordinary content and wrong on every page of this site, because the last element is a full-bleed dark footer. What it produced, visible the moment the login page was opened at 390px: the footer's last 53px still sat behind the bar with the copyright line unreadable, and BELOW the footer a 58px strip of light body background — a pale band under a dark footer, under the bar. So the body reserve drops to zero where a footer is present, and the footer carries the space itself. The dark area now runs to the bottom of the page and the copyright clears the bar. Body keeps the reserve as a fallback for the few screens with no site footer (the owner and admin consoles), via :not(). */ body.has-mobile-bottombar{padding-bottom:calc(58px + env(safe-area-inset-bottom))} body.has-mobile-bottombar:has(.site-footer){padding-bottom:0} body.has-mobile-bottombar .site-footer{padding-bottom:calc(70px + env(safe-area-inset-bottom))} body.has-mobile-bottombar .fab-wrap{bottom:calc(74px + env(safe-area-inset-bottom))} } #gdirMobBar .gmb-item{ flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:2px;padding:3px 0 2px;text-decoration:none;position:relative; color:var(--text-muted,#6b7280);-webkit-tap-highlight-color:transparent; } /* 48px of tappable height including the label — the icon-only version fell under that once the safe area was added. */ #gdirMobBar .gmb-item,#gdirMobBar .gmb-center{min-height:48px} #gdirMobBar .gmb-pill{ width:46px;height:26px;border-radius:99px;display:flex;align-items:center;justify-content:center; transition:background-color .14s ease; } #gdirMobBar .gmb-item i{font-size:20px;line-height:1} #gdirMobBar .gmb-label{ font-size:9.5px;font-weight:650;letter-spacing:.005em;line-height:1.1; max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } #gdirMobBar .gmb-item.active{color:var(--primary,#0E5C57)} #gdirMobBar .gmb-item.active .gmb-pill{background:var(--primary-tint,rgba(14,92,87,.12))} #gdirMobBar .gmb-item.active .gmb-label{font-weight:800} #gdirMobBar .gmb-item:active .gmb-pill{transform:scale(.94)} /* One dot, one meaning: an enquiry nobody has read. A dot that can mean five things is a dot people learn to ignore. */ #gdirMobBar .gmb-item-rel{overflow:visible} #gdirMobBar .gmb-dot{ position:absolute;top:2px;right:calc(50% - 16px); width:9px;height:9px;border-radius:50%;background:#EF4444; border:1.5px solid var(--surface,#fff); font-size:0;color:transparent;overflow:hidden;padding:0;min-width:0; } #gdirMobBar .gmb-count{ position:absolute;top:0;right:calc(50% - 22px); min-width:16px;height:16px;padding:0 4px;border-radius:99px; background:#EF4444;color:#fff;font-size:9.5px;font-weight:800;line-height:16px; text-align:center;border:1.5px solid var(--surface,#fff); } #gdirMobBar .gmb-center{flex:none;width:62px;display:flex;align-items:flex-start;justify-content:center} #gdirMobBar .gmb-plus{ /* Raised, but only just. At -14px it cleared the bar entirely and floated over the content behind with a visible halo; -8px with a ring reads as part of the bar rather than loose on the page. */ width:42px;height:42px;margin-top:-8px;border:0;border-radius:14px;cursor:pointer; background:var(--primary,#0E5C57);color:#fff;font-size:19px; display:flex;align-items:center;justify-content:center; box-shadow:0 0 0 3px var(--surface,#fff),0 5px 14px -6px rgba(14,92,87,.65); transition:transform .15s ease; } #gdirMobBar .gmb-plus:active{transform:scale(.93)} #gdirMobBar .gmb-av{ width:22px;height:22px;border-radius:50%;overflow:hidden; background:var(--primary,#0E5C57);color:#fff; display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700; } #gdirMobBar .gmb-av img{width:100%;height:100%;object-fit:cover;display:block} #gdirMobBar .gmb-av-anon{background:#9CA3AF} #gdirMobBar .gmb-item.active .gmb-av{box-shadow:0 0 0 2px currentColor} @media(prefers-reduced-motion:reduce){ #gdirMobBar,#gdirMobBar .gmb-pill,#gdirMobBar .gmb-plus{transition:none} } #gdirMobBarBackdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1050} #gdirMobBarBackdrop[hidden]{display:none} #gdirMobBarSheet{ position:fixed;left:0;right:0;bottom:0;z-index:1051;background:var(--surface,#fff); border-radius:18px 18px 0 0;padding:10px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow:0 -8px 30px rgba(0,0,0,.2);max-height:80vh;overflow-y:auto; } #gdirMobBarSheet[hidden]{display:none} #gdirMobBarSheet .gmb-sheet-handle{width:36px;height:4px;border-radius:99px;background:var(--line,#e5e7eb);margin:2px auto 12px} #gdirMobBarSheet h3{font-size:16px;font-weight:700;margin:0 0 12px;color:var(--text-primary,#111827)} #gdirMobBarSheet .gmb-sheet-item{ display:flex;align-items:center;gap:12px;padding:10px 4px;text-decoration:none;color:inherit;border-radius:10px; } #gdirMobBarSheet .gmb-sheet-item:hover{background:rgba(0,0,0,.04)} #gdirMobBarSheet .gmb-sheet-ic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px} #gdirMobBarSheet .gmb-sheet-item strong{display:block;font-size:14px;font-weight:600;color:var(--text-primary,#111827)} #gdirMobBarSheet .gmb-sheet-item small{display:block;font-size:12px;color:var(--text-muted,#6b7280)} #gdirMobBarSheet .gmb-sheet-cancel{ width:100%;margin-top:8px;padding:11px;border-radius:10px;border:1px solid var(--line,#e5e7eb);background:none; font-weight:600;font-size:14px;cursor:pointer;color:var(--text-primary,#111827); } @media(min-width:992px){#gdirMobBarBackdrop,#gdirMobBarSheet{display:none!important}}