# The Brochure — Implementation Plan > **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. **Goal:** Build a single-page showcase site (`site/`) for Darkwatch with a dark hero section, parchment feature rows with Playwright-generated screenshots, a system support strip, and a publisher contact section. **Architecture:** Plain HTML/CSS/JS with no build step or framework. A Playwright Node script (`site/screenshots.js`) logs into the running dev app and captures feature screenshots automatically. A `update-brochure` Claude skill keeps the site current as features change. **Tech Stack:** HTML · CSS · Vanilla JS · Playwright (Node, screenshot script only) --- ## File Map | Action | Path | Purpose | |---|---|---| | Create | `site/index.html` | The page — all sections | | Create | `site/style.css` | All styles — CSS variables, fonts, layout | | Create | `site/main.js` | Smooth scroll + hero parallax | | Create | `site/assets/screenshots/.gitkeep` | Ensures directory exists in git | | Create | `site/package.json` | Playwright dependency for screenshot script | | Create | `site/screenshots.js` | Playwright script — captures all feature screenshots | | Create | `.claude/skills/update-brochure.md` | Maintenance skill | | Modify | `CLAUDE.md` | Register update-brochure skill | | Modify | `.gitignore` | Ignore `site/node_modules/` | --- ## Task 1: CSS foundation **Files:** - Create: `site/style.css` - Create: `site/assets/screenshots/.gitkeep` - [ ] **Step 1: Create `site/assets/screenshots/.gitkeep`** ```bash mkdir -p site/assets/screenshots touch site/assets/screenshots/.gitkeep ``` - [ ] **Step 2: Create `site/style.css`** ```css @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Alegreya:ital,wght@0,400;0,500;1,400&display=swap'); /* ── Variables ─────────────────────────────────────────── */ :root { --gold: #c9a84c; --gold-dark: #8b6914; --gold-dim: rgba(201, 168, 76, 0.12); --gold-border: rgba(201, 168, 76, 0.3); --bg-dark: #0d0a05; --bg-dark-2: #1a1408; --bg-parchment: #f5f0e8; --bg-parchment-alt: #ede8d5; --border-dark: #2a2010; --border-parchment: #d4c9a8; --border-light: #e0d5b5; --text-gold: #c9a84c; --text-parchment: #e8dcc8; --text-dark: #2a1f0a; --text-muted: #6a5a3a; --text-label: #8b6914; --font-display: 'Cinzel', serif; --font-body: 'Alegreya', serif; } /* ── Reset ──────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--bg-dark); color: var(--text-parchment); } img { display: block; max-width: 100%; height: auto; border-radius: 6px; } a { text-decoration: none; } /* ── Hero ───────────────────────────────────────────────── */ .hero { min-height: 100vh; background: var(--bg-dark); border-bottom: 2px solid var(--border-dark); display: flex; align-items: center; justify-content: center; text-align: center; padding: 80px 24px; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(201,168,76,0.07) 0%, transparent 70%); pointer-events: none; } .hero-content { position: relative; max-width: 680px; } .wordmark { font-family: var(--font-display); font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 28px; opacity: 0.9; } .hero-headline { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 700; color: var(--text-parchment); line-height: 1.2; margin-bottom: 20px; text-shadow: 0 0 40px rgba(201,168,76,0.15); } .hero-subhead { font-family: var(--font-body); font-size: 1.15rem; color: #9a8a6a; line-height: 1.65; margin-bottom: 40px; max-width: 520px; margin-left: auto; margin-right: auto; } .hero-actions { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; } .btn-primary { font-family: var(--font-display); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; background: var(--gold); color: var(--bg-dark); padding: 14px 32px; border-radius: 3px; font-weight: 700; transition: background 0.2s, transform 0.1s; } .btn-primary:hover { background: #e0bc60; transform: translateY(-1px); } .scroll-hint { font-family: var(--font-body); font-size: 0.95rem; color: var(--text-muted); transition: color 0.2s; } .scroll-hint:hover { color: var(--gold); } /* ── Features ───────────────────────────────────────────── */ .features { background: var(--bg-parchment); } .features-intro { padding: 64px 24px 40px; text-align: center; border-bottom: 1px solid var(--border-parchment); } .section-label { font-family: var(--font-display); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--text-label); margin-bottom: 10px; } .features-intro h2 { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2rem); color: var(--text-dark); font-weight: 600; } .feature-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0; border-bottom: 1px solid var(--border-light); background: var(--bg-parchment); } .feature-row:nth-child(even) { background: var(--bg-parchment-alt); } .feature-image { padding: 48px 40px; display: flex; align-items: center; justify-content: center; } .feature-image img { box-shadow: 0 8px 32px rgba(42,31,10,0.18); border: 1px solid var(--border-parchment); } .feature-text { padding: 48px 56px 48px 24px; } .feature-row.reverse .feature-image { order: 2; } .feature-row.reverse .feature-text { order: 1; padding: 48px 24px 48px 56px; } .feature-label { font-family: var(--font-display); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-label); margin-bottom: 10px; } .feature-heading { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--text-dark); margin-bottom: 14px; line-height: 1.3; } .feature-desc { font-family: var(--font-body); font-size: 1.05rem; color: #4a3a1a; line-height: 1.7; } /* Torch & Luck callout cards */ .callout-row { padding: 56px 40px; background: var(--bg-parchment-alt); border-bottom: 1px solid var(--border-light); display: flex; gap: 32px; justify-content: center; } .callout-card { background: var(--bg-parchment); border: 1px solid var(--border-parchment); border-radius: 6px; padding: 32px 36px; max-width: 320px; text-align: center; } .callout-icon { font-size: 2rem; margin-bottom: 12px; } .callout-card h3 { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--text-dark); margin-bottom: 8px; } .callout-card p { font-family: var(--font-body); font-size: 0.95rem; color: #4a3a1a; line-height: 1.6; } /* ── System Support ─────────────────────────────────────── */ .system-support { background: var(--bg-dark-2); border-top: 2px solid var(--border-dark); border-bottom: 2px solid var(--border-dark); padding: 48px 24px; text-align: center; } .system-support .section-label { color: var(--gold); opacity: 0.7; } .system-support h2 { font-family: var(--font-display); font-size: 1.4rem; color: var(--text-parchment); font-weight: 600; margin-bottom: 10px; } .system-support p { font-family: var(--font-body); color: var(--text-muted); font-size: 1rem; } /* ── Publisher ──────────────────────────────────────────── */ .publisher { background: var(--bg-parchment); border-bottom: 1px solid var(--border-parchment); padding: 80px 24px; text-align: center; } .publisher .section-label { margin-bottom: 14px; } .publisher h2 { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2rem); color: var(--text-dark); font-weight: 600; margin-bottom: 20px; } .publisher p { font-family: var(--font-body); font-size: 1.1rem; color: #4a3a1a; line-height: 1.75; max-width: 520px; margin: 0 auto 32px; } .btn-secondary { font-family: var(--font-display); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; background: var(--bg-dark); color: var(--gold); padding: 13px 30px; border-radius: 3px; font-weight: 600; border: 1px solid var(--border-dark); transition: background 0.2s; display: inline-block; } .btn-secondary:hover { background: var(--bg-dark-2); } /* ── Footer ─────────────────────────────────────────────── */ .footer { background: var(--bg-dark); border-top: 1px solid var(--border-dark); padding: 28px 40px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } .footer-left { font-family: var(--font-display); font-size: 11px; letter-spacing: 1px; color: #4a3a1a; } .footer-right { display: flex; gap: 20px; } .footer-right a { font-family: var(--font-display); font-size: 11px; letter-spacing: 1px; color: #4a3a1a; transition: color 0.2s; } .footer-right a:hover { color: var(--gold); } /* ── Responsive ─────────────────────────────────────────── */ @media (max-width: 768px) { .feature-row, .feature-row.reverse { grid-template-columns: 1fr; } .feature-row.reverse .feature-image { order: 0; } .feature-row.reverse .feature-text { order: 0; } .feature-image { padding: 32px 24px 0; } .feature-text, .feature-row.reverse .feature-text { padding: 24px 24px 40px; } .callout-row { flex-direction: column; align-items: center; } .footer { justify-content: center; text-align: center; } } ``` - [ ] **Step 3: Verify fonts load** ```bash open site/index.html # will 404 — we'll create it in Task 2. Just confirm style.css has no syntax errors: node -e "require('fs').readFileSync('site/style.css', 'utf8'); console.log('OK')" ``` Expected: `OK` - [ ] **Step 4: Commit** ```bash git add site/style.css site/assets/screenshots/.gitkeep git commit -m "feat: add brochure CSS foundation and screenshot directory" ``` --- ## Task 2: Hero section **Files:** - Create: `site/index.html` - [ ] **Step 1: Create `site/index.html` with skeleton + hero** ```html
A real-time session companion for Shadowdark RPG. Characters, dice, spells, and atmosphere — synced live across every device at the table.
Full Shadowdark character sheets — STR, DEX, CON, INT, WIS, CHA, HP, AC, XP, gear, and talents. Click any value to edit it. Changes sync to the DM and every player at the table in real time.
A guided four-step wizard: name, class, and ancestry — then roll 3d6 for each stat and watch them land. Background, alignment, and deity last. HP, gear slots, gold, and your title are all derived automatically.
Dice roll in 3D, in your character's color. Results are determined server-side — no one can fudge them. Every roll appears in a shared log that the whole table sees at the same time.
34 Tier 1–2 spells for Wizard and Priest. Every cast rolls a d20 — fail and lose a spell slot. Wizards risk the mishap table. Priests do penance. Rest to recover. The DM sees your spell focus state at a glance.
The DM controls atmosphere effects that every player sees in real time: creeping fog, crackling fire, rain, or drifting embers. One click and the whole table feels the dungeon shift.
Everyone rolls. The tracker takes the party's highest result against the DM's single enemy roll. Whoever wins goes first — then the DM clicks Next Turn and the round counter climbs. Enemy HP is visible to the DM only.
The DM sees every character in a compact grid: HP, AC, luck token, torch timer, and all six stat modifiers — without opening a single sheet. Drill in when you need to, stay out when you don't.
A real 60-minute countdown, synced across every device. The DM starts it when the torch is lit. Everyone watches it burn.
Each character has a luck token the DM and player can both see and toggle. No more forgetting who spent their luck last session.
Currently: Shadowdark RPG · Next: based on demand
Darkwatch is a session companion — a torch timer, a dice roller, an initiative tracker. Your players still need the book. We just want to make the table more fun. If you'd like to talk, we'd love to.
Get in touch
Two sentences. Write for players and DMs, not developers.
Currently: Shadowdark RPG · Next: based on demand
Currently: Shadowdark RPG · Cairn · More based on demand
``` 2. Commit ## Tone guidelines Write feature descriptions for players and DMs, not developers. - ✓ "Everyone rolls. The tracker takes the party's highest result." - ✗ "The server computes max(party_rolls) and compares to the enemy roll." Keep headings punchy and short. Keep descriptions to two sentences max. ``` - [ ] **Step 2: Read current CLAUDE.md to find the Project Skills table** ```bash grep -n "update-changelog\|update-handbook\|Project Skills" CLAUDE.md ``` - [ ] **Step 3: Add update-brochure to the Project Skills table in CLAUDE.md** Find the existing table: ```markdown | `update-changelog` | `.claude/skills/update-changelog.md` | After a feature ships, bug is fixed, or feature is removed | | `update-handbook` | `.claude/skills/update-handbook.md` | After a feature is added, changed, or removed | ``` Add a row: ```markdown | `update-changelog` | `.claude/skills/update-changelog.md` | After a feature ships, bug is fixed, or feature is removed | | `update-handbook` | `.claude/skills/update-handbook.md` | After a feature is added, changed, or removed | | `update-brochure` | `.claude/skills/update-brochure.md` | After a feature is added, changed, or removed — keeps the site current | ``` - [ ] **Step 4: Commit** ```bash git add .claude/skills/update-brochure.md CLAUDE.md git commit -m "feat: add update-brochure skill and register in CLAUDE.md" ``` --- ## Self-Review Checklist After all tasks complete, verify against the spec: - [ ] `site/index.html` has all 5 sections: hero, features (7 rows + callout cards), system support, publisher, footer - [ ] Feature rows alternate left/right correctly (1,3,5,7 image-left; 2,4,6 image-right) - [ ] All 7 screenshot `img` tags reference `assets/screenshots/*.png` - [ ] Hero CTA links to Discord (placeholder is acceptable pre-launch) - [ ] Publisher section uses `mailto:email@email.com` placeholder - [ ] `site/screenshots.js` has a named capture function for each of the 7 PNGs - [ ] `--only` flag works: `node screenshots.js --only dm-cards` captures only that one - [ ] `.claude/skills/update-brochure.md` covers add, remove, change, and new-system processes - [ ] `CLAUDE.md` lists `update-brochure` in the Project Skills table - [ ] `site/node_modules/` is gitignored - [ ] Screenshots are committed to `site/assets/screenshots/`