SPEC

Footer & Navbar Cleanup — Specification

Status: Active Linear: ET-502 (parent) — sub-issues ET-503, ET-504, ET-505 Source: Linear issue screenshots (Ross, 2026-05-29) Target pages: All help-center pages (navbar + footer are global), plus the two custom-mode pages (index.mdx, changelog/index.mdx) Last updated: 2026-05-29

---

1. Problem

Three UI cleanups requested on the help-center chrome:

1. ET-504 — Demo button: The top navbar shows a blue “Get a Demo” CTA pill. It should be removed from the bar.
2. ET-505 — Podcast link: The footer Resources column lists a “Podcast” link. It should be removed.
3. ET-503 — Social media bar: Footer social links (Facebook, X, YouTube, LinkedIn, Instagram) render as a tall vertical stack pinned top-right, creating excess vertical whitespace in the footer. They should move to a single horizontal row, centered directly beneath the FieldPulse logo. Additionally (confirmed in-scope): tighten the footer height so the navy band sits closer to the logo.

---

2. Architecture note — two footers

The site has two footer implementations; both must be updated for consistency.

Footer	Renders on	Source of truth
Native #footer	All standard doc/article/category pages	docs.json → footer.socials + footer.links; DOM re-structured by footer-nav.js; styled in styles.css (~281–355)
.custom-footer	Custom-mode pages only: landing (index.mdx) and changelog/index.mdx (native #footer hidden via styles.css:1074-1077)	Hand-built MDX markup + .custom-footer-* rules in styles.css (~1963–2084)

The navbar (ET-504) is global, configured in docs.json → navbar.

---

3. Target design

3.1 Navbar (ET-504)

• Remove the navbar.primary (“Get a Demo”) button entirely.
• Keep the navbar.links “Login” link.
• Remove the orphaned #topbar-cta-button CSS block.

3.2 Footer brand row (ET-503) — both footers

            ┌───────────────────────────────┐
            │          FieldPulse))          │   ← logo, centered
            │  Facebook  X  YouTube  LinkedIn  Instagram  │   ← socials: 1 horizontal row, centered
            └───────────────────────────────┘
   ───────────────────────────────────────────────────────  ← divider
   FEATURES        PRODUCT        COMPANY        RESOURCES     ← link columns (unchanged)

Property	Value
Brand row layout	flex-direction: column; align-items: center; gap: 16px
Socials layout	flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 20-22px
Socials style	inline SVG brand icons (Facebook, X, YouTube, LinkedIn, Instagram) at 20px, fill: currentColor, each <a> carries an aria-label. Custom footer was text labels; switched to icons to match the native footer.
Logo	centered, on top
Colors	reuse existing tokens — --navy background, white-alpha social color already defined; no new tokens

3.3 Footer height (ET-503, confirmed in-scope)

• Reduce top padding / brand-row spacing so the navy band starts closer to the logo.
• Custom footer: trim .custom-footer top padding (currently 48px) and .custom-footer-top margin-bottom/padding-bottom.
• Native footer: trim the footer wrapper top spacing (exact selector confirmed against live DOM).
• Exact px values tuned during QA and approved via before/after screenshots.

3.4 Footer Resources column (ET-505)

• Remove the Podcast entry. Remaining Resources links unchanged: Help Center, Customer Stories, Blog, FAQ.

---

4. Implementation

File	Change	Sub-issue
docs.json	delete navbar.primary; delete Podcast item from footer.links Resources	ET-504, ET-505
styles.css	delete #topbar-cta-button block; restructure .custom-footer-top/-socials + reduce padding; add .fp-footer-brand-row / .fp-footer-socials rules for native footer	ET-504, ET-503
index.mdx	remove Podcast <a> from custom footer	ET-505
changelog/index.mdx	remove Podcast <a> from custom footer	ET-505
footer-nav.js	tag the native footer brand row + socials container with stable classes (fp-footer-brand-row, fp-footer-socials) so CSS keys off our classes, not Mintlify internals	ET-503

Native footer caution: Mintlify owns the #footer DOM and emits obfuscated utility classes. Do not guess selectors — tag the elements in footer-nav.js (which already walks this exact DOM, see its comments at lines 74–78 / 149–155) and style via our fp-* classes. Verify against the live DOM with mintlify dev before finalizing.

---

5. Acceptance criteria

• ET-504: No “Get a Demo” button in the navbar (light/dark, desktop/mobile). “Login” link still present. No dead #topbar-cta-button CSS remains.
• ET-505: No “Podcast” link in any footer (doc pages, landing, changelog). Other Resources links intact.
• ET-503: In all three footer contexts the logo is centered with socials in a single horizontal, centered row beneath it; no vertical socials stack; footer visibly shorter. Holds in light/dark and at mobile (≤680px).
• Footer logo click: clicking the footer logo does nothing — Mintlify’s image-zoom is disabled on it (previously it opened a full-screen zoom modal that, with the inverted white logo, looked like a blank white screen).

---

6. QA matrix

Capture before/after screenshots to .qa/ET-502/:

Context	Light	Dark	Mobile (≤680px)
Doc/article page (native footer)	✓	✓	✓
Landing / (custom footer)	✓	✓	✓
/changelog (custom footer)	✓	✓	✓
Navbar (no demo button)	✓	✓	✓

Plus a dedicated before/after pair showing the footer height reduction for ET-503 sign-off.