---
uai: "1.0"
type: topic-memory
status: active
project: iarpg.com
release: "IARPG-OPS-2"
version: "2.0.13-wip"
review_state: current-until-superseded
---

# UI Shell

## Purpose

Maintain the compact publication shell, clear product identity, first-visit routing, and exact responsive boundaries.

## Current UI Contract

- `.site-masthead` is non-sticky and contains the command-palette search button plus compact release context.
- `.menu-strip` is the only sticky surface. It contains the linked IARPG mark/name, explicit primary navigation, overflow menu control, and theme control.
- Search keeps Ctrl+K/Command+K and slash keyboard access through the existing command palette; moving the visible control must not fork search behavior.
- Primary navigation labels remain Start Here, Game Concept, Missions, Create Missions, Standards, and Research.
- `/start` retains the five-path orientation hero and must not restore the large repeated-logo card.
- At narrow widths the brand may compact, navigation may move into the menu, and search remains in normal flow. Neither row may overlap content, trap focus, or obscure anchors.
- Light is default, dark is local and pre-CSS, and all shell controls support keyboard focus, reduced motion, reduced transparency, forced colors, zoom, print, and offline operation.
- Page templates retain one H1, visible breadcrumbs where applicable, unique metadata, clean canonicals, and a connected JSON-LD graph.
- The site remains clear that it is a fictional reference publication, not a government service or live MMO. Evidence: [reviewed portal and agency-identity findings](../docs/long-term-memory/reports/claim-level-review-and-comparative-fairness-audit.md#current-law-policy-and-institutional-identity).
- Managed Chromium shell evidence passes 14/14 desktop and mobile checks: search is outside the sticky row, the mark is visible inside it, the five-path hero remains linked, `.menu-strip` is the only computed sticky surface, and the menu pins while the masthead scrolls away. Evidence: [shell-layout evidence](../SHELL-LAYOUT-EVIDENCE-IARPG-OPS-2-2.0.13-wip.json).

## Shared Constraints

- Apply [repository constraints](constraints.uai#non-negotiable-constraints).

## Related UAI Records

- [Context](context.uai#verified-current-facts)
- [Accessibility](accessibility.uai#current-accessibility-contract)
- [Theme](theme.uai)
- [Publication](publication.uai#current-publication-contract)
- [Performance](performance-audit.uai#current-performance-contract)
- [Testing](test-plan.uai#current-test-plan)

## Start Here Orientation Hero

- `/start` uses the `orientation` hero variant: a linked site map for Game Concept, Missions, Create Missions, Standards, and Research.
- The visual must remain readable in light and dark themes, linearize on narrow screens, preserve 200%/400% zoom, reduce motion when requested, remain usable in forced colors, and disappear cleanly in print.
- Do not restore the large repeated-logo card on `/start`; the default brand variant may remain on other pages.

Evidence: [interactive hero finding](../docs/long-term-memory/reports/hero-clarity-report-integration-and-uai-routing-report.md#the-new-hero-is-an-interactive-site-map).

## Current Durable Research Routes

- [Educational RPG Portal Audit Plan](../docs/long-term-memory/reports/educational-rpg-portal-audit-plan.md#reviewed-synthesis) — reviewed with limitations; use only the linked Reviewed Synthesis and retain its truth boundary.
- [Fictional Educational RPG Portal Product Strategy](../docs/long-term-memory/reports/fictional-educational-rpg-portal-product-strategy.md#reviewed-synthesis) — reviewed with limitations; use only the linked Reviewed Synthesis and retain its truth boundary.
- [Fictional Intelligence-Agency Dashboard Website Design](../docs/long-term-memory/reports/fictional-intelligence-agency-dashboard-website-design.md#reviewed-synthesis) — reviewed with limitations; use only the linked Reviewed Synthesis and retain its truth boundary.
- [Fictional RPG Portal Brand Audit](../docs/long-term-memory/reports/fictional-rpg-portal-brand-audit.md#reviewed-synthesis) — reviewed with limitations; use only the linked Reviewed Synthesis and retain its truth boundary.
- [Fictional RPG Portal: Strategic Front Door and Transmedia Architecture](../docs/long-term-memory/reports/fictional-rpg-portal-strategic-front-door-and-transmedia-architecture.md#reviewed-synthesis) — reviewed with limitations; use only the linked Reviewed Synthesis and retain its truth boundary.
- [Public UX, Accessibility, Search, Mobile, and Cross-Project Navigation Audit](../docs/long-term-memory/reports/public-ux-accessibility-search-mobile-and-cross-project-navigation-audit.md#reviewed-synthesis) — reviewed with limitations; use only the linked Reviewed Synthesis and retain its truth boundary.
- [Strategic Fictional User Interface Design for an RPG Dashboard](../docs/long-term-memory/reports/strategic-fictional-user-interface-design-for-rpg-dashboard.md#reviewed-synthesis) — reviewed with limitations; use only the linked Reviewed Synthesis and retain its truth boundary.
- [Transmedia Knowledge Architecture and Educational Content Specification](../docs/long-term-memory/reports/transmedia-knowledge-architecture-and-educational-content-specification.md#reviewed-synthesis) — reviewed with limitations; use only the linked Reviewed Synthesis and retain its truth boundary.