BRIEFING LANDING PAGE — SKILL FILE

3. Context Section (cream background)

• For people who land cold — sets up what the briefing covers so they have reason to watch
• Eyebrow: "The Premise"
• h2: The hook — the core tension or insight
• 1–2 paragraphs of setup copy
• Three context highlights (gold left border): label the three things the briefing covers
• Context highlights should map to the briefing's narrative arc (e.g., "The Count," "The Match," "The Results")

4. Video Section (dark background) — TWO STATES

State 1: Watch (active before expiration)

• Eyebrow: "The Briefing"
• h2: Briefing title
• Subtext: runtime + three-beat description
• Vimeo embed (16:9 responsive container)
• Countdown bar below video (mirrors header timer)
• CTA: "Book Your Systems Diagnostic" + subtext

State 2: Expired (active after expiration)

• Header: "This Briefing Has Ended" + "The [assets] are still available."
• Four path cards in 2×2 grid:
• Path 1: Read → The Article
• Path 2: [Tool verb] → Campaign micro-tool #1
• Path 3: [Tool verb] → Campaign micro-tool #2
• Path 4 (primary, gold-bordered): Apply → The Systems Diagnostic
• Bridge line below: connects the paths narratively

5. Final CTA (dark background)

• "This briefing opens the loop." + diagnostic description
• CTA button + scarcity line
• Hidden when expired (the expired state's path cards replace this)

6. Footer

Standard Advisory OS footer. Identical across all pages.

STATE MANAGEMENT

The page runs on a simple two-state system. JavaScript checks the current time against a configured expiration date every second.

CONFIG Block

const CONFIG = {
    // Sunday [Date] at 11:59:59 PM Eastern
    expirationDate: new Date('[UTC equivalent]')
    // Note: -05:00 ET = +5 hours to UTC
};

State Logic

if (now < expirationDate) → show watch state
if (now >= expirationDate) → show expired state

What Changes on Expiration

CONTENT THAT CHANGES PER CAMPAIGN

When building a new briefing landing page, these are the only things that change from the template:

1. CONFIG expiration date — Update the UTC timestamp
2. Title / h1 — Campaign name
3. Subtitle / runtime — Briefing duration + one-line description
4. Hero subtext — Expiration date in human-readable format
5. Context section copy — Premise paragraph(s) and three context highlights
6. Vimeo embed URL — Swap about:blank after recording
7. Video heading / subtext — Title + three-beat description
8. Nav link — "The Article" URL
9. Expired path cards — Four paths pointing to this campaign's assets (article, tool 1, tool 2, diagnostic)
10. Expired bridge line — Connects the four paths narratively
11. OG meta tags — Title and description

Everything else — layout, CSS, timer logic, state management, responsive breakpoints, footer — is identical.

DESIGN SPECIFICATIONS

Theme

Mixed. Cream context section between dark sections. This is a conversion page, not a recording visual — it uses the standard Advisory OS light/dark alternation.

Typography

• Body: Inter, 400 weight, 1rem
• Context section body: 1.05rem
• Headings: Cormorant Garamond, 400 weight
• Eyebrows: Inter, 0.65rem, weight 500, letter-spacing 0.2em, uppercase, gold
• Eyebrow gold line: 40px × 1px ::before pseudo-element

Colors

Same :root variables as the template. Key distinction from briefing interactive: this page uses --cream and --off-white backgrounds for the context section, while the briefing interactive is all-dark.

Layout

• Max-width: 1100px for most sections, 780px for context section
• Section padding: 80px vertical
• Header: fixed, full-width, two rows (nav + timer bar)
• Hero: 80vh height with min/max constraints, background image with gradient overlay

Expired Path Cards

• 2×2 grid, 1.5rem gap
• Gold ::before line at top (40px, expands to 60px on hover)
• Lift on hover (translateY -4px)
• Primary card: gold border + dim gold background
• Each card has: label (verb), h4 (asset name), paragraph (description), button

BUILD SEQUENCE

1. Copy the template. Start from the Subtract/Add briefing HTML.
2. Update CONFIG. Set expiration date (UTC). Set Vimeo to about:blank (placeholder).
3. Swap hero content. Title, subtitle, runtime, eyebrow, subtext.
4. Write context section. Premise copy + three highlights. This is the only "new" writing.
5. Update video heading/subtext.
6. Build expired path cards. Four paths pointing to this campaign's assets.
7. Write expired bridge line.
8. Update nav link URL.
9. Update OG meta tags.
10. After recording: Swap Vimeo about:blank with real embed URL.
11. Before deploy: Verify expiration date is correct.

EXPIRED PATH CARD PATTERN

The four expired paths follow a consistent verb structure:

The primary card (bottom-right) is always the Systems Diagnostic. It gets the gold border treatment.

If a campaign only has one micro-tool, use three cards instead of four (adjust grid to accommodate).

WHAT THIS SKILL DOES NOT COVER

• The briefing interactive: The recording visual the presenter scrolls through. See briefing-interactive-SKILL.md.
• The briefing script: The voiceover narrative. That's written as part of campaign distribution assets.
• The article: The thought leadership piece. Different format, different skill.
• Micro-tools: The tools linked from expired path cards. Different skills.
• Video recording/editing: Out of scope. The page just embeds a Vimeo URL.

Skill file extracted from: The Subtract/Add Briefing Landing Page Created: February 20, 2026