# Header & Footer

## Header (top nav)

Two integration modes ship in production:

| Mode | File | When to use |
|---|---|---|
| **Static** | `glass-header.html` | New marketing landings. Paste HTML + CSS in the page. |
| **Dynamic (canonical)** | `entia-nav.js` | Pages that share the unified Mission Control nav (60px tall, includes live ticker, status indicator, heartbeat animation). Just `<script src="/assets/entia-nav.js"></script>` — it injects everything. |

The two implementations differ slightly:
- Static glass-header: 52 px tall, minimal, no live ticker. Used in `mcp-setup`, `mcp-docs`, `partners`, `funnel`.
- Dynamic nav (entia-nav.js): 60 px tall, includes pulsing status dot + heartbeat keyframe on the wordmark + a live ticker fed from `/api/v1/stats/live`.

For Design new mocks: start from `glass-header.html` (simpler), then opt-in to the dynamic version when the page needs the live ticker.

## Footer

Canonical implementation: `entia-footer.js`. Self-contained, injects CSS + HTML at end of `<body>`.

Usage:
```html
<script src="/assets/entia-footer.js"></script>
```

Includes:
- ENTIA wordmark + tagline
- LLM logos (ChatGPT, Claude, Gemini, Perplexity, Grok, DeepSeek) as SVG inline
- Google Cloud + Stripe + EU trust badges (also inline SVG)
- Estonia / EU residency block
- Legal links (Privacy, Terms, Compliance)
- Social links

CLAUDE.md (sec. 7) notes there are **4 footer variants** in the wild today (74 / 11 / 1 / 1 pages each). The unified canonical is `entia-footer.js` — Design should mock against this. The other 3 variants are legacy and slated for migration (see `docs/IMAGES.md` and CLAUDE.md "DEUDA TÉCNICA — Footer unificado").

## Files in this folder

| File | Source | Status |
|---|---|---|
| `glass-header.html` | extracted from `mcp-setup.html` | Static reference |
| `entia-nav.js` | copy of `public_html/assets/entia-nav.js` | Dynamic canonical (251 lines) |
| `entia-footer.js` | copy of `public_html/assets/entia-footer.js` | Canonical footer (323 lines) |
| `README.md` | this file | — |

## What is NOT in this folder

- A pure-HTML version of `entia-footer.js` — the footer is intentionally JS-injected (allows central updates). If Design needs a static HTML render for mocks, run the JS in a dev page and copy the resulting DOM, or ask Engineering for a pre-rendered HTML snapshot.
- React versions for `static/ceo_v2/`. The MC dashboard has its own `Layout.tsx` + `Sidebar.tsx`. They share the same color/typography tokens but have different markup. Out of scope for the marketing brand kit.
