← Back to Index

Off the Radar Figma node 5369:31134 shipped

Updated: 2026-07-10 11:57 ET

Audited: 2026-07-09 21:15 ET

Generic "content no longer available" landing page — radar illustration, title, and a fill-in-the-blank body copy naming what's missing.
Route: /item-unavailable?item={noun} · Component: ItemUnavailablePage.razor · CSS: alpa-radar-*
Not a screen-mapping entry — a shared fallback. This page didn't exist anywhere in the Figma screen inventory (screen-mapping.html) or spec docs before this pass. It was pulled directly from Figma node 5369:31134 (file owEYzHf7FrHRvWC2u82UOl) at the point of need: the Favorites screen needed somewhere to route a tap on a favorite whose backing content (a deleted document, a removed menu item) no longer resolves. The ?item= query param fills the body copy's blank, so any future caller with a dead deep link can reuse this page — not just Favorites.
Design tokens sourced from Figma node 5369:31134 ("empty state" frame) via Figma MCP get_design_context/get_screenshot. The node's illustration layer ("ChatGPT Image Jun 2, 2026, 10_16_59 AM 1") is an AI-generated placeholder graphic in the Figma file, not a production asset — implemented here as a hand-drawn inline SVG (concentric rings + sweep line) matching the radar motif, the same lightweight-glyph precedent as the Favorites empty state's ♡ text icon rather than importing a raster placeholder. Captured 2026-07-08.

Live CSS Preview

/item-unavailable?item=favorite
‹
Off the Radar!
The favorite you’re seeking is flying under the radar. Try a different route or return to the homepage.

Design Tokens

Layout

Direction
column · centered
Padding
32px 32px 64px
Back nav
‹ chevron, top-left, 24px navy

Illustration

Size
220 × 220 px
Ring/tick colour
Blue/500 #7cb9f2
Sweep colour
Blue/700 #007bc2
Margin-bottom
24 px

Title

Font
Georgia serif · 22px · weight 600
Colour
navy #05273e
Margin-bottom
12 px

Body

Font
Body · 14px · lh 1.5
Max width
320 px
Blank fill
?item= query param, e.g. "favorite"

Layer Tree

└── alpa-radar-nav · back chevron row
└── alpa-radar · flex column · centered · padding:32px 32px 64px
    ├── alpa-radar-illustration · inline SVG (rings + sweep)
    ├── alpa-radar-title · TEXT · "Off the Radar!"
    └── alpa-radar-body · TEXT · blank-filled from ?item=

Blazor Page

ALPAMobile/Components/Pages/ItemUnavailablePage.razor, route /item-unavailable.

Query paramTypeRequiredDescription
itemstring?NoFills the body copy's blank (e.g. favorite). Defaults to "item" when omitted.

Navigation (caller side)

// FavoritesViewModel.ResolveNavigationTarget — returns this route when a
// favorited item's backing content didn't resolve (deleted document, removed
// menu item). Followed by the .razor code's Nav.NavigateTo(...).
"/item-unavailable?item=favorite"

The back chevron navigates to /favorites — the only caller today. If a second caller adopts this page, the back target should become a parameter rather than a hardcoded route.

CSS Class Reference

Classes live in ALPAMobile/wwwroot/css/alpa-components.css under the alpa-radar-* block.

ClassScopeKey rules
.alpa-radar-navBack nav rowdisplay:flex; align-items:center; padding:12px 16px
.alpa-radar-backBack chevronfont-size:24px; color:var(--alpa-navy); cursor:pointer
.alpa-radarContainerdisplay:flex; flex-direction:column; align-items:center; padding:32px 32px 64px; text-align:center
.alpa-radar-illustrationSVGwidth:220px; height:220px; margin-bottom:24px
.alpa-radar-ring / .alpa-radar-tickSVG strokesstroke:var(--alpa-blue-500); stroke-width:2
.alpa-radar-sweepSVG strokestroke:var(--alpa-blue); stroke-width:3; stroke-linecap:round
.alpa-radar-titleTitlefont-family:Georgia,serif; font-size:22px; font-weight:600; color:var(--alpa-navy)
.alpa-radar-bodyBodyfont-size:14px; color:var(--alpa-navy); line-height:1.5; max-width:320px

Developer Notes