# Secordit header pack — HEADER-P1P2-R3 (compact fixed header)

**Status:** Judge III bounded PASS, ruling `J3-HEADER-P1P2-R3-2026-11-10-R1`
(`/workspace/exports/JUDGE_III_RULING_HEADER_P1P2_R3_2026-11-10.md`, sha256 `cb69a8c9e48e334f4afbf0e761aea3a40207b2048fdbf0b354bbd1fb46824f47`).
A PASS is **not go-live**; publication needs Matt. This pack is for preview/integration only (Smith II's next hero preview).

Source: `/workspace/builds/HEADER-P1P2-R3/frozen` (SHA256SUMS `8e4174993d54eebd1d171aefac3aa3309bf9ca3cafcfe0f559961670fea26b2a`,
MANIFEST `e6693c39522124bfad6187cf42d2d2a2018c2da5d5e1c78598264f05185994a2`, `dist/css/header.css` `7e6277112c3c80f626ef1f27b8b3691a6430dc36c972d185be296d628d956339`).
Every file below is copied **byte-for-byte** from that frozen `dist/` except the demo pages, this README, `header.html` (an extract) and the two `site-*.css` files (verbatim inline `<style>` blocks lifted from the R3 homepage `<head>` with a one-line comment prepended).

Design (Matt, 19:00 UK, 10 Nov 2026): one compact black bar on every page including the homepage, desktop and mobile; no masthead; nothing shrinks or changes on scroll (plain `position:sticky`).

## Files (paths mirror the site root, so the verbatim `/css/...`, `/js/...`, `/footer-brand-*.webp` URLs work unchanged)
| File | What |
|---|---|
| `header.html` | Required `<head>` tags (source order), body preamble (skip link + `.pre-head`), and the exact `<header>` block for the **homepage** (`data-home="1"`) and a **non-home** page (`/kits/after-a-scam-what-to-do-first/`, `data-home="0"`). |
| `css/header.css` | R3 header styles (the PASSed file). |
| `css/theme.css` | Site theme tokens / Light-Dark rules the header relies on (unchanged site file). |
| `css/site-base.css` | Site-wide base inline block (fonts, tokens, `.visually-hidden`, `.skip`, etc.). On the site this is inline in `<head>`. |
| `css/site-search-inline.css` | Inline `.ss` search block from the site `<head>`; `header.css` overrides parts of it. |
| `js/header.js` | Dropdowns + mobile menu (vanilla, no deps). |
| `js/theme-boot.js` | Must be first in `<head>`: sets `html[data-theme]` / `data-theme-pref` from `localStorage['secordit-theme']` before paint (default Dark). |
| `js/theme.js` | Theme button(s) `button[data-theme-ctrl]`, cycle Light → Dark → System. |
| `js/site-search.js` | Header search; loads `/search-index.json` (same origin). |
| `js/head.js` | Legacy: adds `.is-compact` on scroll (now a no-op, cancelled by header.css) + once-per-session homepage logo ping (`sessionStorage['sd-ping']`) + old `details.mnav` key handling. See S4. |
| `search-index.json` | Public search index built from public pages (titles/snippets/URLs only). |
| `footer-brand-crop-280.webp`, `footer-brand-crop-560.webp` | Logo on the dark bar (`.brand-on-dark`, srcset 280w/560w, sizes 130px desktop / 112px mobile). |
| `logo-dark.webp` | Logo used in Light theme (`.brand-on-light`). |
| `fonts/inter-var-latin.woff2`, `fonts/Inter-OFL.txt` | Inter variable font + its OFL licence. |
| `index.html`, `demo-kit.html` | Demo pages: header on a blank page (homepage / non-home variants), Light/Dark/System switch. Not site files. The page body uses the site baseline (pale `--bg`) in both themes, as on the real site where dark areas are per-section; only the header changes with the theme. |
| `SHA256SUMS.txt` | sha256 of every file in the pack (except itself). |
| `_headers` | Hosting only: `X-Robots-Tag: noindex` for this pack site. Not for the real site. |

## Integration
1. `<head>`: put `<script src="/js/theme-boot.js"></script>` first. Then load `site-base.css` + `site-search-inline.css` (or keep the site's existing inline blocks), `theme.css`, `header.css`, and the deferred scripts `head.js`, `site-search.js`, `theme.js`, `header.js` (see `header.html` for exact order).
2. Body: skip link + `<div class="pre-head"><div class="head-sentinel" aria-hidden="true"></div></div>` then the `<header class="site-head sh" data-sh ...>` block, then `<main id="main">`.
3. Homepage uses `data-home="1"` and `aria-current="page"` on Home; other pages use `data-home="0"`, add `.sh-cur` to the current group's button (teal underline) and `aria-current="page"` on the current link.

### Hooks / IDs the scripts expect (do not rename)
- Header root: `[data-sh]` (header.js), `.site-head` + `data-home` (head.js), `.head-sentinel`.
- Mobile menu: `button.sh-menu` with `aria-controls="sh-nav"`; `nav#sh-nav`; `.sh-open` on the header when open.
- Dropdowns: `button.sh-gbtn[aria-expanded][aria-controls]` → panels `#sh-p-products`, `#sh-p-intelligence`, `#sh-p-learning`, `#sh-p-about`; groups are `.sh-groups > li`.
- Search: `[data-ss]` wrapper (gets `.ss-open`), `.ss-toggle`, `#ss-panel`, `#ss-q`, `#ss-status` (aria-live), `#ss-results`, `#ss-empty`, `#ss-ask`. Index: `/search-index.json`.
- Theme: every `button[data-theme-ctrl]` (one in `.sh-tools`, one in the mobile `.sh-mfoot`); icons `[data-theme-icon=light|dark|system]`; storage key `secordit-theme`.
- CTA: `a.sh-cta.sh-cta-d` (desktop) and `a.sh-cta.sh-cta-m` (mobile menu) → `/kits/` "Explore Products".
- **Ordit hook:** "Ask Ordit" (no results) calls `window.orditOpen(button)` if it is a function. The real widget is `/js/ordit.js`, which is **not** in this pack; the demo pages define a stub that only prints a note. Nothing is sent anywhere.

### Behaviour
- Breakpoint **1080px**: `min-width:1080px` = desktop bar (62px + 1px border, inline nav, logo 130px); below 1080 (`max-width:1079.98px`) = mobile bar (60px + 1px, menu button, logo 112px), search opens as a full-width sheet (also at 990–1079px by design). Extra rule at 1168px.
- No scroll behaviour: the bar never changes size or style. `.is-compact` from head.js is cancelled by header.css.
- Esc closes an open dropdown / the mobile menu and returns focus; click or focus outside closes; one dropdown open at a time; no focus trap, no scroll lock.
- `prefers-reduced-motion: reduce` → all header transitions/animations off (and the homepage logo ping is skipped by head.js).
- Light theme is Smith III's design (Matt's reference shows Dark only). 1px bottom border kept; CTA 44px tall (reference 40px) for the 44px target rule.

## Known should-fixes (non-blocking, carried by Judge III)
- **S1** `aria-current` on kit and scam-check pages (HTML).
- **S2** "Explore Products" / "Products" wording and Title Case (copy call for Scribe or Matt).
- **S3** duplicate labels: Learning inside Learning, About inside About (Matt).
- **S4** leftover `is-compact` observer in `head.js` (outside the header).
- **S5** pre-existing kit breadcrumb spacing, and launcher reserve space (global CSS owner).

## Matt's open questions (undecided)
1. Should the 2 protected pages (`/cyber-radar/` and `/news/amazon-scam-call-what-to-do/`) get the new header? They still have the old one.
2. Resources under Learning and Help under About, or Help top-level?
3. "Explore Products" vs "Explore kits".
4. Positioning: "Intelligence" mixes household scam alerts with MSP regulatory tracking; Written scam check is still email-to-ask.
5. Keep the 1px bottom border? 44px CTA vs 40px in the reference? Remove `is-compact` from head.js?

## Not included (by design)
No secrets or tokens, no `worker/`, `functions/`, `_redirects`, `_routes.json`, site `_headers`, no `ordit.*` runtime, no Cloudflare analytics beacon, no customer data, no kit files.
