Archived Brief

This brief has been completed and is retained as a build record.

B-DETAIL-01 — The Detail Layer: State Transition + Contextual Theatre¶

SURFACE: rtopacks.com.au (main Next.js app)
DO NOT TOUCH: trust.rtopacks.com.au · mcp.rtopacks.com.au · api.rtopacks.com.au · any Cloudflare Worker
Cloudflare Account ID: e5a9830215a8d88961dc6c80a8c7442a
Database: rtopacks-db (D1: 334ac8fb-9850-48c0-9da0-b56c55640e98)

READ THIS FIRST — Philosophy¶

This is not a detail page. It is a state transition.

The experience has two states. Not two pages. Not two routes in the traditional sense. Two states of the same stage.

The search bar never moves. It is the only fixed point in the entire experience. Its position, size, and shape are constant. Its colour and placeholder text change with depth. Everything else — video, content, UI chrome — assembles and disassembles around it like stagehands setting a scene.

The user's mental model should be: I went deeper. I didn't go somewhere else.

Build to this philosophy. If at any point the transition feels like a page navigation, it's wrong.

1. The Two States¶

State 1 — Home (already built, reference only)¶

Full brightness video, rotating through homepage pool
Hero headline + search bar centred
Logo top left
Bar colour: current (dark/green)
Bar placeholder: Search by subject, unit code, or RTO name — or try /commands

State 2 — Detail (this brief)¶

Same video, cross-faded to contextual theme, dimmed to 15-20% opacity
Detail content assembled over the dimmed video
Home circle icon top left (replaces logo)
Bar colour: changes to Layer 2 colour (see Section 4)
Bar placeholder: Search within this qualification — or try /views

2. The Transition Sequence¶

When a user clicks any result in the search drawer:

Drawer closes — smooth fade out, 200ms
Hero headline fades out — 300ms
Video cross-fade begins — current video fades toward 15% brightness, contextual video for the training package theme fades in simultaneously, 600ms total
Detail content assembles in — staggered entry, elements arrive sequentially not simultaneously (see Section 5 for sequence)
Bar transforms — colour shifts, placeholder text changes, 300ms transition
Logo morphs to home circle — top left, 300ms

Total transition: approximately 1.2 seconds. Not instant. Not slow. Deliberate.

The reverse (home circle click): Exact reverse sequence. Detail content flies out, video brightens back to full, hero headline returns, logo returns, bar returns to Layer 1 state.

No browser back button dependency. The home circle IS the back mechanism.

3. Contextual Video System¶

The lookup¶

New table in rtopacks-db:

CREATE TABLE IF NOT EXISTS video_themes (
  training_package_code TEXT PRIMARY KEY,
  theme_slug TEXT NOT NULL,
  video_url TEXT NOT NULL
);

Seed data — map all 52 training package codes to 10 themes:

theme_slug	training_package_codes	video_file
construction-trades	CPC, UEE, MEM, MSM	/videos/construction-trades.mp4
health-care	HLT, CHC	/videos/health-care.mp4
agriculture-environment	AHC, SFI, AMP, ACM	/videos/agriculture-environment.mp4
business-finance	BSB, FNS, PSP	/videos/business-finance.mp4
creative-arts	CUA, MSF, MST	/videos/creative-arts.mp4
transport-logistics	TLI, MAR	/videos/transport-logistics.mp4
tourism-hospitality	SIT, AVI	/videos/tourism-hospitality.mp4
public-safety-defence	PUA, POL, DEF	/videos/public-safety-defence.mp4
technology-automotive	AUR, MEA	/videos/technology-automotive.mp4
resources-infrastructure	RII, CPP, FBP, RGR, SIS, MST, SFI, AMP, ACM, MAR, MEA, FBP	/videos/resources-infrastructure.mp4

Any training_package_code not in the table falls back to the homepage video pool.

Video files¶

Videos are NOT yet produced. Use placeholder videos (same as homepage video) for all themes initially. The lookup table and cross-fade mechanic must be built and working — video files are a creative deliverable that will drop in later.

Video files will live in Cloudflare R2 bucket rtopacks-videos (create if not exists). Serve via the existing CDN pattern.

The cross-fade mechanic¶

Two <video> elements layered in the background: - video-a — currently playing - video-b — preloading next

On theme change: fade video-a opacity down, fade video-b opacity up simultaneously. When complete, swap roles. Standard A/B video crossfade pattern. Both always present in DOM, one always preloading.

Dim level at Layer 2: opacity: 0.15 on the active video element.

4. Bar Transformation¶

The bar is a single component. Its state is driven by the current depth layer.

Layer 1 (home)¶

Background: current dark colour
Text colour: current
Placeholder: Search by subject, unit code, or RTO name — or try /commands
Commands: current set (/help /commands /trust /terms /about /contact /subscribe)

Layer 2 (detail)¶

Background: #1a3a2a (deep forest green — distinct from Layer 1, clearly different, still dark)
Text colour: #a8d5b5 (muted green-white)
Placeholder: Search within this qualification — or try /views
Commands: /views system (see Section 6)
Transition: colour shift over 300ms when entering/leaving Layer 2

The colour shift is the only navigation indicator. No breadcrumbs. No "you are here." The bar tells you.

5. Detail Content — Assembly Sequence¶

Content enters in this order, staggered 100ms apart:

Qualification header (code + title + AQF level badge + training package) — arrives from top, fade + translate-y
Status + release info — fades in under header
Pathway stack (from Pathway Assembler API) — slides in from left
Description — fades in
Units accordion (core units collapsed by default, expandable) — fades in
RTOs delivering this (from rto_scope table) — fades in
Recon Panel header — "Market Intelligence" or similar — fades in, signals more below
(below the fold) Recon Panel views

Each element has its own entrance. Not all at once. The stage is being set.

Qualification header component¶

[MSF60122]  Advanced Diploma of Interior Design          [L6]
Furnishing Training Package · MSF · Current · Release 2

Code in monospace, same style as search drawer. Title large. AQF badge consistent with drawer badges. Training package as secondary line.

Units accordion¶

Two sections: Core Units, Elective Units. Collapsed by default — show count only: Core units (16) Elective units (43)

Click to expand. Each unit row:

MSFID5020    Design residential interiors    [core]

Unit code is clickable — clicking a unit code fires a sub-transition. The bar updates: Viewing unit: MSFID5020. The detail content transitions to show the unit descriptor. This is Layer 2.5 — same depth layer, content swap. Not a new layer.

Unit detail shows: - Unit code + title - Application (what job context this applies to) - Elements of competency (the actual performance criteria) - Assessment requirements - Back to qualification link (returns to qual view within Layer 2)

RTOs delivering this¶

Pull from rto_scope table joined to rtos:

SELECT r.rto_id, r.legal_name, r.trading_name, ra.state
FROM rto_scope s
JOIN rtos r ON s.rto_id = r.rto_id
JOIN rto_addresses ra ON r.rto_id = ra.rto_id
WHERE s.qual_code = ?
AND s.status = 'Current'
LIMIT 20

Display as a clean list: RTO name, state, RTO number. Linked to future RTO detail view. Show count: "47 registered training organisations deliver this qualification"

6. The /views Command System¶

At Layer 2, typing /views in the bar opens the inline command palette showing available data panels:

/views          Show all available panels
/enrolments     National enrolment trend data
/outcomes       Completer outcomes + median wage
/rtos           Who's delivering this
/pathway        Pathway stack for this qualification
/demand         Labour market demand

Selecting a view flies in the corresponding Recon Panel section and scrolls to it. The panel is already rendered below the fold — /views just navigates to it smoothly.

For Phase 1 (this brief): /rtos and /pathway are live (data exists). /enrolments, /outcomes, /demand show a "coming soon" state — the panel shell is there, data slots are empty with a tasteful placeholder. Do not hide them. Their presence signals what's coming.

7. The Recon Panel¶

Below the fold. 5 panels. All free, no login required.

Panel 1 — Pathway Stack¶

Already built via Pathway Assembler API. Embed the pathway stack here. GET /v1/pathway?anchor={qual_code}

Panel 2 — Who's Delivering This¶

RTO list (built in Section 5 above). Counts by state. Simple bar chart if >10 RTOs.

Panel 3 — Enrolment Trend (Phase 2 — shell only for now)¶

Placeholder: "Enrolment data updated quarterly from NCVER. Coming soon." Chart shell: line chart, x-axis = years 2019-2024, y-axis = enrolment count. Empty but present.

Panel 4 — Completer Outcomes (Phase 2 — shell only for now)¶

Placeholder: "Outcomes data from NCVER VET Student Outcomes 2025. Coming soon." Fuel gauge component: 0-10 commercial viability score. Empty but present. Subcomponents: completion rate, employment rate, median wage. Slots visible but empty.

Panel 5 — Labour Market Demand (Phase 2 — shell only for now)¶

Placeholder: "Demand data from Jobs and Skills Australia. Coming soon." Empty but present.

8. The Decision Point¶

At the very bottom of the Recon Panel, a clean section:

┌─────────────────────────────────────────────────────┐
│                                                     │
│  Ready to build with this qualification?            │
│                                                     │
│  [Sign up — it's free →]    [← Search another]     │
│                                                     │
└─────────────────────────────────────────────────────┘

"Sign up — it's free →" → routes to DDR-04 onboarding (/claim) "← Search another" → fires the home circle transition — surfaces back up

This is intentional friction. Two clear choices. Forward or back. Nothing else.

9. The Full Results Page¶

Also part of this brief. When search drawer shows "87 results — showing top 8" and user clicks "See all 87 →":

Route: /search?q={query}&type={units|qualifications|rtos}

Layout¶

Search bar at top (same bar, Layer 1 state — this is still a top-level surface)
Filter sidebar left: AQF level, training package, status
Results list right: same row format as drawer but full width
Pagination: 25 per page
Sort: Relevance (default), AQF level (asc/desc), Code (alpha)

Drawer update¶

Each section in the drawer gets a count and "see all" link:

QUALIFICATIONS  ·  4        (no "see all" if ≤8)
UNITS           ·  87 results — showing top 8    [See all →]
RTOS            ·  2        (no "see all" if ≤8)

10. Route Architecture¶

This is ONE route: /qual/[code] for qualifications, /unit/[code] for units.

But it renders as a STATE TRANSITION not a hard navigation. Use Next.js App Router with: - router.push('/qual/MSF60122') for deep-linkability and SEO - But the visual transition is CSS/JS driven — no full page reload feel - Use usePathname() to detect depth layer and drive bar colour + video state

This means the URL changes (good for sharing, good for SEO) but the experience feels continuous (good for theatre).

OPS SURFACE RULE: ops stubs for /qual/[code] and /unit/[code] must exist in ops console at deploy time.

11. Acceptance Criteria¶

Transition: - [ ] Clicking a search result triggers state transition (not page jump) - [ ] Video dims to 15% on transition to Layer 2 - [ ] Video cross-fades to contextual theme based on training_package_code - [ ] Detail content assembles in staggered sequence (not all at once) - [ ] Bar changes colour to Layer 2 colour on transition - [ ] Bar placeholder changes to Layer 2 text - [ ] Logo becomes home circle on transition - [ ] Home circle click reverses transition smoothly

Detail content: - [ ] Qualification header renders (code, title, AQF level, training package) - [ ] Core/Elective unit accordion works (collapsed default, expandable) - [ ] Unit code click transitions to unit descriptor view - [ ] RTO list renders with count and state - [ ] Pathway stack renders from /v1/pathway API

Bar at Layer 2: - [ ] Colour is #1a3a2a (deep forest green) - [ ] /views command opens inline palette with 6 views - [ ] /rtos and /pathway views are live - [ ] /enrolments /outcomes /demand show placeholder shells (not hidden)

Recon Panel: - [ ] All 5 panels present below the fold - [ ] Panel 1 (Pathway) — live data - [ ] Panel 2 (RTOs) — live data - [ ] Panels 3-5 — tasteful placeholder state, not hidden - [ ] Decision point CTA at bottom — both actions work

Full results page: - [ ] /search?q=&type= route exists - [ ] Drawer shows count + "See all →" for sections with >8 results - [ ] Results page has filters, pagination, sort - [ ] Search bar present at top in Layer 1 state

Video system: - [ ] video_themes table seeded with all 52 training package codes - [ ] A/B crossfade mechanic working (with placeholder video for all themes) - [ ] R2 bucket rtopacks-videos created - [ ] Falls back gracefully if theme not found

SEO: - [ ] /qual/[code] and /unit/[code] are proper URL routes (deep-linkable) - [ ] Added to sitemap.ts - [ ] OPS stubs deployed

Drip rule: Confirm deployed before next brief drops.
Note: Videos are placeholder only. Real contextual videos are a separate creative brief (AI video generation). Build the mechanic, drop the videos in later.