first-commit
ci / Validate workspace (push) Has been cancelled
landing-page-ci / Validate landing page (push) Has been cancelled
landing-page-deploy / Deploy landing page (push) Has been cancelled
github-metrics / Generate repository metrics SVG (push) Has been cancelled
refresh-contributors-wall / Refresh contributors wall cache bust (push) Waiting to run
ci / Validate workspace (push) Has been cancelled
landing-page-ci / Validate landing page (push) Has been cancelled
landing-page-deploy / Deploy landing page (push) Has been cancelled
github-metrics / Generate repository metrics SVG (push) Has been cancelled
refresh-contributors-wall / Refresh contributors wall cache bust (push) Waiting to run
This commit is contained in:
Zakaria
@@ -0,0 +1,233 @@
|
||||
---
|
||||
name: replit-deck
|
||||
description: |
|
||||
Single-file horizontal-swipe HTML deck in the style of Replit Slides's
|
||||
landing-page template gallery. Eight distinct themes (helix, holm, vance,
|
||||
bevel, world-dark, world-mint, atlas, bluehouse) — each a complete visual
|
||||
system (palette + type + accent) captured from replit.com/slides. Pick one
|
||||
theme, do not mix. For pitch decks, board reports, brand memos, campaign
|
||||
reveals — when the user explicitly wants "Replit Slides style".
|
||||
triggers:
|
||||
- "replit deck"
|
||||
- "replit slides"
|
||||
- "replit 风格 ppt"
|
||||
- "replit style deck"
|
||||
- "helix deck"
|
||||
- "holm memo"
|
||||
- "atlas chapter"
|
||||
- "bluehouse"
|
||||
- "bevel campaign"
|
||||
od:
|
||||
mode: deck
|
||||
scenario: product
|
||||
preview:
|
||||
type: html
|
||||
entry: index.html
|
||||
design_system:
|
||||
requires: false
|
||||
inputs:
|
||||
- name: theme
|
||||
type: enum
|
||||
required: true
|
||||
default: helix
|
||||
values:
|
||||
- helix # Modern minimal · light grey · ink + electric blue · SaaS metrics / board
|
||||
- holm # Editorial serif · cream · ink + deep chestnut · legal / finance memo
|
||||
- vance # Gallery · cream · cream serif on black bars · art catalog / showcase
|
||||
- bevel # Y2K editorial · black · display type + product photo grid · campaign
|
||||
- world-dark # Finance green dark · deep green · mint + neon yellow · policy report
|
||||
- world-mint # Finance green light · mint · deep green + neon yellow · policy report
|
||||
- atlas # Museum · black · serif + vermilion · long-form narrative / chapter deck
|
||||
- bluehouse # Consumer card · deep navy · gradient cards + peach → coral · product showcase
|
||||
- name: slide_count
|
||||
type: integer
|
||||
default: 6
|
||||
min: 3
|
||||
max: 20
|
||||
# 6 is a board-update baseline. Memos and campaign decks usually land
|
||||
# at 3–4 (see example-holm / example-bluehouse). Long-form chapters
|
||||
# (atlas) can run 8–12. Don't pad to hit the default.
|
||||
---
|
||||
|
||||
# Replit Deck Skill
|
||||
|
||||
Produce a single-file horizontal-swipe HTML deck in one of eight Replit-Slides themes. Every theme is a complete visual system — do not mix tokens across themes.
|
||||
|
||||
## Resource map
|
||||
|
||||
```
|
||||
replit-deck/
|
||||
├── SKILL.md ← you're reading this
|
||||
├── assets/
|
||||
│ └── template.html ← seed: 8 themes via [data-theme=*], proven iframe-nav script (READ FIRST)
|
||||
├── references/
|
||||
│ ├── themes.md ← 8 themes: when-to-pick / do / don't / primary layouts
|
||||
│ ├── layouts.md ← 10 paste-ready slide layouts, cross-theme
|
||||
│ ├── components.md ← shared primitives (eyebrow, kpi-row, image-grid, meta-bar)
|
||||
│ └── checklist.md ← P0/P1/P2 self-review + theme lock-in gate
|
||||
└── examples/ ← four reference decks across the most contrasting themes
|
||||
├── example-helix.html (SaaS board update · light minimal)
|
||||
├── example-holm.html (legal fintech memo · cream editorial serif)
|
||||
├── example-atlas.html (quarterly history chapter · black + vermilion)
|
||||
└── example-bluehouse.html (real estate ROI · navy + gradient cards)
|
||||
```
|
||||
|
||||
## Workflow
|
||||
|
||||
### Step 0 — Pre-flight (mandatory reads)
|
||||
|
||||
1. Read `assets/template.html` end-to-end. The `[data-theme]` blocks carry the tokens; the `<script>` at the bottom solves five iframe nav bugs — **do not rewrite it**.
|
||||
2. Read `references/themes.md` → pick **one** theme that matches the user's brief. If the user already picked a theme via `od.inputs.theme`, use that.
|
||||
3. Read `references/layouts.md` → you'll copy `<section>` blocks from here.
|
||||
4. Read `references/checklist.md` → P0 must pass before emit.
|
||||
|
||||
### Step 1 — Commit to one theme
|
||||
|
||||
Write out loud (in the TodoWrite or plan section) which theme and why. Once picked, **every slide uses that theme's tokens only**. No swapping mid-deck. The `<body data-theme="helix">` attribute is the single source of truth.
|
||||
|
||||
| Theme | Pick when |
|
||||
|---|---|
|
||||
| `helix` | SaaS board update, product metrics, neutral modern |
|
||||
| `holm` | Legal memo, investor pre-read, serious / institutional |
|
||||
| `vance` | Art portfolio, design catalog, photographer / sculptor |
|
||||
| `bevel` | Fashion campaign, lookbook, Y2K / editorial attitude |
|
||||
| `world-dark` | Policy report, finance analysis, premium dark |
|
||||
| `world-mint` | Lighter companion of world-dark — ESG, wellness finance, sustainability |
|
||||
| `atlas` | Long-form narrative, chapter deck, museum / archive aesthetic |
|
||||
| `bluehouse` | Consumer product, real estate, lifestyle, colorful cards |
|
||||
|
||||
### Step 2 — Plan slide rhythm before writing HTML
|
||||
|
||||
Default 6 slides. Write the rhythm BEFORE any HTML, for example (helix, 6 slides):
|
||||
|
||||
```
|
||||
01 cover hero + title + subtitle
|
||||
02 kpi-row-6 6 metrics with ▲/▼ deltas
|
||||
03 split-insight left stat + right paragraph
|
||||
04 chapter-plate section divider
|
||||
05 three-up three parallel columns
|
||||
06 closing one bold number or CTA
|
||||
```
|
||||
|
||||
Show this to the user. Redirecting at this stage is cheap.
|
||||
|
||||
### Step 3 — Copy seed, bind theme
|
||||
|
||||
1. Copy `assets/template.html` to project root as `index.html`.
|
||||
2. Set `<body data-theme="<chosen>">`.
|
||||
3. Replace `<title>`.
|
||||
4. Delete the placeholder slides in the body (the seed ships with 3 demo slides). Keep the chrome (counter / progress / hint).
|
||||
|
||||
### Step 4 — Paste layouts, fill real copy
|
||||
|
||||
For each planned slide, copy the matching `<section>` from `references/layouts.md`. Replace every `[REPLACE]` with specific copy — never leave placeholders, never use lorem. If a slide feels empty, pick a different layout.
|
||||
|
||||
Tag each slide with `data-screen-label="01 Cover"`, `"02 Metrics"`, etc., in presentation order.
|
||||
|
||||
### Step 5 — Self-check
|
||||
|
||||
Run `references/checklist.md` silently before emit: the **P0 theme-lock gate** plus the five-dimension 1–5 critique (Philosophy / Hierarchy / Execution / Specificity / Restraint). Any dimension ≤ 3 → re-do before emit.
|
||||
|
||||
The P0 theme-lock grep is non-negotiable:
|
||||
|
||||
```bash
|
||||
grep -E 'data-theme|style="--' index.html | head
|
||||
```
|
||||
|
||||
If any `style="--accent:..."` or theme override appears on individual slides, revert. One theme per deck.
|
||||
|
||||
### Step 6 — Emit artifact
|
||||
|
||||
```
|
||||
<artifact identifier="deck-<slug>" type="text/html" title="<Deck title>">
|
||||
<!doctype html>
|
||||
<html>...</html>
|
||||
</artifact>
|
||||
```
|
||||
|
||||
One sentence before the artifact. Stop after `</artifact>`.
|
||||
|
||||
## Hard rules
|
||||
|
||||
- **One theme per deck.** `data-theme` set on `<body>` — never override per-slide.
|
||||
- **Numbers are real or absent.** No invented metrics. Use `—` or a grey block as an honest placeholder.
|
||||
- **Display face follows theme.** helix/world-dark/world-mint/bluehouse use the sans Display; holm/vance/atlas use the serif Display; bevel uses the Y2K display. Do not swap. (Authoritative source: the `--font-display` token of each theme in `assets/template.html` — if this list ever disagrees with the template, the template wins.)
|
||||
- **Accent appears 1–2× per slide max.** Never a gradient-spam.
|
||||
- **Never rewrite the nav script.** Five iframe bugs it solves are not obvious.
|
||||
- **Keep it one HTML file.** Inline all CSS. No external fonts — the system stack in each theme is deliberate.
|
||||
- **`data-screen-label` on every slide.**
|
||||
- **No Replit logo / brand lockup.** These are template styles, not a Replit-brand deck.
|
||||
|
||||
---
|
||||
|
||||
## When to pick `replit-deck` vs. peer skills
|
||||
|
||||
| Skill | Pick when |
|
||||
|---|---|
|
||||
| `simple-deck` | Plain, single-theme deck bound to the project's `DESIGN.md` tokens. When the deck should *match* the host brand, not assert its own. (`designSystemRequired: true`.) |
|
||||
| `magazine-web-ppt` | Editorial "magazine × e-ink" aesthetic (WebGL fluid background, serif titles, chapter plates). When the brief asks for a keynote / launch / sharing-style deck and calls out Monocle / WIRED / Kinfolk / Domus. |
|
||||
| `replit-deck` | The brief explicitly asks for Replit-Slides gallery aesthetic, or needs one of the 8 token-frozen visual identities (SaaS board, editorial memo, gallery catalog, Y2K campaign, policy report, museum chapter, consumer cards). No dependency on `DESIGN.md`. |
|
||||
|
||||
If the user just says "make me a deck" without further guidance, default to `simple-deck` — it respects their design system. Pick `replit-deck` only when the brief is explicit about the aesthetic or names a theme.
|
||||
|
||||
---
|
||||
|
||||
## Scope & provenance
|
||||
|
||||
- **Eight themes = the full replit.com/slides landing-page gallery at the time of snapshot.** Not a curated subset — every theme card currently published on replit.com/slides is represented here (helix, holm, vance, bevel, world-dark, world-mint, atlas, bluehouse). If Replit ships a ninth template, it is **not** automatically reflected in this skill.
|
||||
- **Snapshot date: 2026-04-29.** All hex values were sampled from the actual replit.com/slides PNGs on that date with ImageMagick — no guessed colors, no memory substitutions. See `references/themes.md` → *Contributing a new theme* for the exact sampling procedure.
|
||||
- **Maintenance: one-time snapshot, not tracked.** Replit Slides is a live product and may drift. This skill does not auto-sync. If you notice Replit has updated colors or added a theme and want it reflected here, open an issue on `nexu-io/open-design` titled `replit-deck: re-sync to replit.com/slides (YYYY-MM-DD)` and attach the updated screenshots. There is no designated owner monitoring the upstream.
|
||||
- **No Replit branding.** These are gallery-style templates, not a Replit-brand deck. The checklist (P0) forbids inserting a Replit logo or wordmark.
|
||||
|
||||
---
|
||||
|
||||
## Browser / runtime support
|
||||
|
||||
- **Target**: modern evergreen desktop browsers (Chrome 110+ / Safari 16+ / Firefox 115+) and modern mobile Safari / Chrome.
|
||||
- **Features used**: CSS scroll-snap (horizontal), `color-mix()`, CSS custom properties, `text-wrap: balance`. All ≥ 93% Baseline.
|
||||
- **Not supported**: IE 11, Safari < 15, any browser without `color-mix()` (would need a fallback `--accent-soft` if you want to support older Safari; out of scope for this skill).
|
||||
- **Mobile**: horizontal scroll-snap works on iOS Safari 16+ and Android Chrome. Keyboard nav is desktop-only by design.
|
||||
- **Nav script behavior**: reused verbatim from `skills/simple-deck` — survives iframe embedding (the daemon preview surface), dual listener races, focus loss, and position persistence across reloads. **Do not rewrite it.**
|
||||
|
||||
---
|
||||
|
||||
## Verification
|
||||
|
||||
The skill auto-registers with the daemon on filesystem scan (no manual wiring). Confirmed against a running daemon on `localhost:7456` after adding this skill:
|
||||
|
||||
```bash
|
||||
$ curl -s localhost:7456/api/skills \
|
||||
| node -e "const d=JSON.parse(require('fs').readFileSync(0,'utf-8')); \
|
||||
console.log(JSON.stringify(d.skills.find(s=>s.id==='replit-deck'), null, 2));"
|
||||
{
|
||||
"id": "replit-deck",
|
||||
"name": "replit-deck",
|
||||
"description": "Single-file horizontal-swipe HTML deck in the style of Replit Slides's\nlanding-page template gallery. Eight distinct themes …",
|
||||
"triggers": [
|
||||
"replit deck",
|
||||
"replit slides",
|
||||
"replit 风格 ppt",
|
||||
"replit style deck",
|
||||
"helix deck",
|
||||
"holm memo",
|
||||
"atlas chapter",
|
||||
"bluehouse",
|
||||
"bevel campaign"
|
||||
],
|
||||
"mode": "deck",
|
||||
"platform": null,
|
||||
"scenario": "product",
|
||||
"previewType": "html",
|
||||
"designSystemRequired": false,
|
||||
"defaultFor": [],
|
||||
"upstream": null,
|
||||
"featured": null,
|
||||
"fidelity": null,
|
||||
"speakerNotes": null,
|
||||
"animations": null,
|
||||
"examplePrompt": "Single-file horizontal-swipe HTML deck in the style of Replit Slides's landing-page template gallery.",
|
||||
"hasBody": true
|
||||
}
|
||||
```
|
||||
|
||||
All four example decks (`examples/example-{helix,holm,atlas,bluehouse}.html`) open directly in a browser. Keyboard nav (← / → / Space / Home / End) and horizontal scroll-snap work in Chrome 129 and Safari 18.
|
||||
@@ -0,0 +1,488 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
OD replit-deck seed.
|
||||
|
||||
Single-file horizontal-swipe HTML deck in the style of Replit Slides's
|
||||
landing-page template gallery (replit.com/slides). One deck picks ONE
|
||||
theme via `<body data-theme="...">`. All 8 themes ship as tokens below;
|
||||
never override per-slide.
|
||||
|
||||
Themes:
|
||||
helix Modern minimal · light grey + ink + electric blue
|
||||
holm Editorial serif · cream + ink + deep chestnut
|
||||
vance Gallery · black/cream bars + cream serif
|
||||
bevel Y2K editorial · black + Y2K display type
|
||||
world-dark Finance dark · deep green + mint + neon yellow
|
||||
world-mint Finance light · mint + deep green + neon yellow
|
||||
atlas Museum · black + ivory + vermilion + serif
|
||||
bluehouse Consumer · deep navy + peach/coral gradient cards
|
||||
|
||||
DO NOT rewrite the `<script>` at the bottom. It reuses the five-rule
|
||||
pattern from `skills/simple-deck` that solves:
|
||||
1. real-scroller detection (the deck root is the scroller, not window —
|
||||
inside the daemon's iframe, window.scroll* is a different surface)
|
||||
2. dual listeners (keydown fires on window AND document; without
|
||||
deduping, one press advances two slides)
|
||||
3. auto-focus (iframe must grab focus on load, or keyboard nav dies
|
||||
silently until the user clicks inside the deck)
|
||||
4. no `scrollIntoView` (it yanks the parent page if the iframe is
|
||||
embedded — we compute offsets manually instead)
|
||||
5. position persistence (reloading the iframe would reset to slide 1;
|
||||
we persist the current slide index in localStorage, keyed by
|
||||
pathname — so two decks on the same origin don't steal each
|
||||
other's position)
|
||||
See `skills/simple-deck/assets/template.html` for the derivation.
|
||||
Rewriting the script reintroduces all five bugs in the daemon preview.
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>[REPLACE] Deck title · subtitle</title>
|
||||
<style>
|
||||
/* ─── font stacks (system-only; no external fonts) ─────────────── */
|
||||
:root {
|
||||
--font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
|
||||
--font-sans-display: -apple-system, BlinkMacSystemFont, 'Inter Display', 'Inter', 'Segoe UI', system-ui, sans-serif;
|
||||
--font-serif: 'Iowan Old Style', 'Charter', 'Palatino', Georgia, 'Times New Roman', serif;
|
||||
--font-serif-display: 'GT Super', 'Tiempos Headline', 'Iowan Old Style', Georgia, serif;
|
||||
--font-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;
|
||||
}
|
||||
|
||||
/* ─── theme: helix (slide-1/4/5 — modern minimal) ─────────────── */
|
||||
body[data-theme="helix"] {
|
||||
--bg: #fafafa;
|
||||
--surface: #ffffff;
|
||||
--fg: #19191c;
|
||||
--muted: #6e6e73;
|
||||
--border: #e4e4e7;
|
||||
--accent: #5889fe;
|
||||
--accent-soft: color-mix(in oklch, #5889fe 14%, transparent);
|
||||
--font-display: var(--font-sans-display);
|
||||
--font-body: var(--font-sans);
|
||||
--display-weight: 600;
|
||||
--display-tracking: -0.02em;
|
||||
}
|
||||
|
||||
/* ─── theme: holm (slide-2 — editorial serif memo) ────────────── */
|
||||
body[data-theme="holm"] {
|
||||
--bg: #e4dfd7;
|
||||
--surface: #eee9e0;
|
||||
--fg: #0f0f0e;
|
||||
--muted: #7c7e84;
|
||||
--border: #c7c1b7;
|
||||
--accent: #52311d;
|
||||
--accent-soft: color-mix(in oklch, #52311d 14%, transparent);
|
||||
--font-display: var(--font-serif-display);
|
||||
--font-body: var(--font-sans);
|
||||
--display-weight: 500;
|
||||
--display-tracking: -0.015em;
|
||||
}
|
||||
|
||||
/* ─── theme: vance (slide-3/7 — gallery catalog) ──────────────── */
|
||||
body[data-theme="vance"] {
|
||||
--bg: #f1ede2;
|
||||
--surface: #e7e2d4;
|
||||
--fg: #171815;
|
||||
--muted: #6e6b62;
|
||||
--border: #d6d2c5;
|
||||
--accent: #171815;
|
||||
--accent-soft: color-mix(in oklch, #171815 8%, transparent);
|
||||
--bar: #0a0a0a; /* top/bottom gallery bar */
|
||||
--bar-fg: #f1ede2;
|
||||
--font-display: var(--font-serif-display);
|
||||
--font-body: var(--font-sans);
|
||||
--display-weight: 400;
|
||||
--display-tracking: -0.01em;
|
||||
}
|
||||
|
||||
/* ─── theme: bevel (slide-6/13 — Y2K editorial) ───────────────── */
|
||||
body[data-theme="bevel"] {
|
||||
--bg: #0d0d0b;
|
||||
--surface: #18181a;
|
||||
--fg: #eae6dd;
|
||||
--muted: #a29e95;
|
||||
--border: #2a2a28;
|
||||
--accent: #c8ff00; /* neon outline only — sparingly */
|
||||
--accent-soft: color-mix(in oklch, #c8ff00 10%, transparent);
|
||||
--font-display: 'Antonio', 'Bebas Neue', Impact, var(--font-sans-display);
|
||||
--font-body: var(--font-sans);
|
||||
--display-weight: 700;
|
||||
--display-tracking: 0;
|
||||
}
|
||||
|
||||
/* ─── theme: world-dark (slide-8/10 — finance dark) ───────────── */
|
||||
body[data-theme="world-dark"] {
|
||||
--bg: #0d3a2b;
|
||||
--surface: #124736;
|
||||
--fg: #bcd6cd;
|
||||
--muted: #789f91;
|
||||
--border: #1d4c3c;
|
||||
--accent: #e8f615;
|
||||
--accent-soft: color-mix(in oklch, #e8f615 18%, transparent);
|
||||
--font-display: var(--font-sans-display);
|
||||
--font-body: var(--font-sans);
|
||||
--display-weight: 500;
|
||||
--display-tracking: -0.015em;
|
||||
}
|
||||
|
||||
/* ─── theme: world-mint (slide-9 — finance light sibling) ─────── */
|
||||
body[data-theme="world-mint"] {
|
||||
--bg: #bcd6cd;
|
||||
--surface: #c8e0d6;
|
||||
--fg: #0d3a2b;
|
||||
--muted: #527567;
|
||||
--border: #9abbac;
|
||||
--accent: #e8f615;
|
||||
--accent-soft: color-mix(in oklch, #e8f615 22%, transparent);
|
||||
--font-display: var(--font-sans-display);
|
||||
--font-body: var(--font-sans);
|
||||
--display-weight: 500;
|
||||
--display-tracking: -0.015em;
|
||||
}
|
||||
|
||||
/* ─── theme: atlas (slide-11 — museum chapter) ────────────────── */
|
||||
body[data-theme="atlas"] {
|
||||
--bg: #111010;
|
||||
--surface: #1a1918;
|
||||
--fg: #e7e6e2;
|
||||
--muted: #827d78;
|
||||
--border: #2a2826;
|
||||
--accent: #de3f40;
|
||||
--accent-soft: color-mix(in oklch, #de3f40 14%, transparent);
|
||||
--font-display: var(--font-serif-display);
|
||||
--font-body: var(--font-sans);
|
||||
--display-weight: 500;
|
||||
--display-tracking: -0.02em;
|
||||
}
|
||||
|
||||
/* ─── theme: bluehouse (slide-12 — consumer card) ─────────────── */
|
||||
body[data-theme="bluehouse"] {
|
||||
--bg: #0b1524;
|
||||
--surface: #10203a;
|
||||
--fg: #ffffff;
|
||||
--muted: #8ea0b8;
|
||||
--border: #1a2c46;
|
||||
--accent: #fb675d; /* coral */
|
||||
--accent-2: #ff8f68; /* peach */
|
||||
--accent-soft: color-mix(in oklch, #fb675d 18%, transparent);
|
||||
--card-peach: #e0af99;
|
||||
--card-lavender: #c7cff0;
|
||||
--font-display: var(--font-sans-display);
|
||||
--font-body: var(--font-sans);
|
||||
--display-weight: 700;
|
||||
--display-tracking: -0.025em;
|
||||
}
|
||||
|
||||
/* ─── reset / base ────────────────────────────────────────────── */
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { margin: 0; height: 100%; }
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-body);
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
scroll-snap-type: x mandatory;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
body::-webkit-scrollbar { display: none; }
|
||||
p { text-wrap: pretty; margin: 0; }
|
||||
h1, h2, h3 { text-wrap: balance; margin: 0; font-weight: var(--display-weight); letter-spacing: var(--display-tracking); }
|
||||
|
||||
/* ─── slide surface ───────────────────────────────────────────── */
|
||||
.slide {
|
||||
flex: 0 0 100vw;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
scroll-snap-align: start;
|
||||
padding: clamp(48px, 6vw, 96px) clamp(56px, 7vw, 112px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.slide.center { align-items: center; justify-content: center; text-align: center; }
|
||||
|
||||
/* ─── meta bar (top thin row: brand · meta · page) ────────────── */
|
||||
.meta-bar {
|
||||
position: absolute;
|
||||
top: clamp(32px, 4vw, 56px);
|
||||
left: clamp(56px, 7vw, 112px);
|
||||
right: clamp(56px, 7vw, 112px);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
body[data-theme="vance"] .meta-bar { color: var(--bar-fg); }
|
||||
|
||||
/* ─── typography primitives ──────────────────────────────────── */
|
||||
.eyebrow {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
.eyebrow.accent { color: var(--accent); }
|
||||
.h-hero { font-family: var(--font-display); font-size: clamp(56px, 8.5vw, 128px); line-height: 1.02; }
|
||||
.h-xl { font-family: var(--font-display); font-size: clamp(40px, 5vw, 76px); line-height: 1.08; }
|
||||
.h-lg { font-family: var(--font-display); font-size: clamp(28px, 3vw, 44px); line-height: 1.14; }
|
||||
.h-md { font-family: var(--font-display); font-size: clamp(20px, 1.6vw, 24px); line-height: 1.25; }
|
||||
.lead { font-size: clamp(16px, 1.2vw, 19px); color: var(--muted); max-width: 56ch; }
|
||||
|
||||
/* Big numeric display — for kpi rows, used by helix / world / atlas */
|
||||
.num { font-family: var(--font-display); font-size: clamp(48px, 5.5vw, 84px); line-height: 1; letter-spacing: -0.03em; }
|
||||
.num-label { font-size: 15px; color: var(--muted); margin-bottom: 8px; }
|
||||
.num-delta { font-family: var(--font-mono); font-size: 13px; color: var(--accent); margin-top: 8px; letter-spacing: 0.02em; }
|
||||
|
||||
/* ─── layout primitives ──────────────────────────────────────── */
|
||||
.hstack { display: flex; gap: var(--gap, 24px); align-items: flex-start; }
|
||||
.vstack { display: flex; flex-direction: column; gap: var(--gap, 16px); }
|
||||
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); }
|
||||
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: center; }
|
||||
.grid-6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 4vw, 56px); row-gap: clamp(48px, 5vw, 80px); }
|
||||
.divider { height: 1px; background: var(--border); margin: clamp(16px, 2vw, 32px) 0; }
|
||||
|
||||
/* ─── surface cards ──────────────────────────────────────────── */
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
padding: clamp(20px, 2vw, 32px);
|
||||
}
|
||||
|
||||
/* ─── vance gallery bars ─────────────────────────────────────── */
|
||||
body[data-theme="vance"] .slide { padding-top: 0; padding-bottom: 0; }
|
||||
body[data-theme="vance"] .vance-top {
|
||||
background: var(--bar);
|
||||
color: var(--bar-fg);
|
||||
padding: clamp(32px, 4vw, 64px) clamp(56px, 7vw, 112px);
|
||||
margin-left: calc(-1 * clamp(56px, 7vw, 112px));
|
||||
margin-right: calc(-1 * clamp(56px, 7vw, 112px));
|
||||
}
|
||||
|
||||
/* ─── bevel dashed frames ────────────────────────────────────── */
|
||||
body[data-theme="bevel"] .bevel-frame {
|
||||
border: 1px dashed var(--accent);
|
||||
padding: clamp(16px, 2vw, 28px);
|
||||
position: relative;
|
||||
}
|
||||
body[data-theme="bevel"] .bevel-frame::before,
|
||||
body[data-theme="bevel"] .bevel-frame::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 8px; height: 8px;
|
||||
background: var(--accent);
|
||||
border-radius: 50%;
|
||||
}
|
||||
body[data-theme="bevel"] .bevel-frame::before { top: -4px; left: -4px; }
|
||||
body[data-theme="bevel"] .bevel-frame::after { bottom: -4px; right: -4px; }
|
||||
|
||||
/* ─── world yellow square marker ─────────────────────────────── */
|
||||
body[data-theme="world-dark"] .world-marker,
|
||||
body[data-theme="world-mint"] .world-marker {
|
||||
display: inline-block;
|
||||
width: 14px; height: 14px;
|
||||
background: var(--accent);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* ─── atlas chapter dot ──────────────────────────────────────── */
|
||||
body[data-theme="atlas"] .atlas-dot {
|
||||
display: inline-block;
|
||||
width: 10px; height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
margin-right: 12px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* ─── bluehouse gradient card ────────────────────────────────── */
|
||||
body[data-theme="bluehouse"] .bh-card {
|
||||
border-radius: 24px;
|
||||
padding: clamp(28px, 3vw, 48px);
|
||||
aspect-ratio: 4 / 3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
body[data-theme="bluehouse"] .bh-card.peach {
|
||||
background: var(--card-peach);
|
||||
color: #1a0e08;
|
||||
}
|
||||
body[data-theme="bluehouse"] .bh-card.coral {
|
||||
background: linear-gradient(135deg, var(--accent-2), var(--accent));
|
||||
color: #ffffff;
|
||||
}
|
||||
body[data-theme="bluehouse"] .bh-card.lavender {
|
||||
background: linear-gradient(180deg, var(--card-lavender), #8faad8);
|
||||
color: #0b1524;
|
||||
}
|
||||
|
||||
/* ─── deck chrome (counter, progress, hint) ──────────────────── */
|
||||
.deck-counter {
|
||||
position: fixed;
|
||||
bottom: 24px; right: 32px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
padding: 6px 12px;
|
||||
background: color-mix(in oklch, var(--bg) 92%, transparent);
|
||||
border: 1px solid var(--border);
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--muted);
|
||||
z-index: 10;
|
||||
}
|
||||
.deck-hint {
|
||||
position: fixed;
|
||||
bottom: 24px; left: 32px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
letter-spacing: 0.04em;
|
||||
z-index: 10;
|
||||
}
|
||||
.deck-progress {
|
||||
position: fixed;
|
||||
top: 0; left: 0;
|
||||
height: 2px;
|
||||
background: var(--accent);
|
||||
width: 0;
|
||||
z-index: 10;
|
||||
transition: width 0.18s ease;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body data-theme="helix">
|
||||
<!--
|
||||
┌─────────────────────────────────────────────────────────────────┐
|
||||
│ Set data-theme on <body> above ONCE. Never override per-slide. │
|
||||
│ Paste layouts from references/layouts.md between this comment │
|
||||
│ and the chrome divs below. │
|
||||
│ │
|
||||
│ Every slide needs: │
|
||||
│ • class="slide" + optional "center" │
|
||||
│ • data-screen-label="NN Name" │
|
||||
└─────────────────────────────────────────────────────────────────┘
|
||||
-->
|
||||
|
||||
<section class="slide center" data-screen-label="01 Cover">
|
||||
<div class="meta-bar">
|
||||
<span>[REPLACE] brand · context</span>
|
||||
<span>[REPLACE] page / total</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="eyebrow" style="margin-bottom: 24px;">[REPLACE] Eyebrow · season / no.</p>
|
||||
<h1 class="h-hero">[REPLACE] The cover headline.</h1>
|
||||
<p class="lead" style="margin-top: 24px;">[REPLACE] One subhead — concrete, not corporate.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="slide" data-screen-label="02 Body">
|
||||
<div class="meta-bar">
|
||||
<span>[REPLACE] brand · section</span>
|
||||
<span>02</span>
|
||||
</div>
|
||||
<div style="margin-top: auto; margin-bottom: auto;">
|
||||
<p class="eyebrow" style="margin-bottom: 24px;">[REPLACE] Section eyebrow</p>
|
||||
<h2 class="h-xl" style="max-width: 16ch;">[REPLACE] Body-slide headline.</h2>
|
||||
<p class="lead" style="margin-top: 20px;">[REPLACE] Two sentences explaining the idea. No more.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="slide center" data-screen-label="03 Closing">
|
||||
<div class="meta-bar">
|
||||
<span>[REPLACE] brand</span>
|
||||
<span>[REPLACE] end</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="eyebrow" style="margin-bottom: 24px;">[REPLACE] Eyebrow</p>
|
||||
<h2 class="h-hero">[REPLACE] The take-away.</h2>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- chrome (do not move) -->
|
||||
<div class="deck-progress" id="deck-progress" aria-hidden></div>
|
||||
<div class="deck-counter" id="deck-counter">1 / 3</div>
|
||||
<div class="deck-hint">← / → · scroll · swipe</div>
|
||||
|
||||
<script>
|
||||
/*
|
||||
Five hard rules for deck nav inside an iframe.
|
||||
Verified by skills/simple-deck — do not rewrite.
|
||||
|
||||
1. Detect the real scroller — body OR documentElement.
|
||||
2. Listen for scroll on BOTH window and document, capture phase.
|
||||
3. Listen for keydown on BOTH window and document, capture phase.
|
||||
4. Auto-focus body so arrow keys work without an upfront click.
|
||||
5. Never use Element.scrollIntoView — yanks host page.
|
||||
*/
|
||||
(function () {
|
||||
var slides = document.querySelectorAll('.slide');
|
||||
var counter = document.getElementById('deck-counter');
|
||||
var progress = document.getElementById('deck-progress');
|
||||
var KEY = 'od-deck-pos:' + (location.pathname || '/');
|
||||
var active = 0;
|
||||
|
||||
function scroller() {
|
||||
if (document.body.scrollWidth > document.body.clientWidth + 1) return document.body;
|
||||
return document.scrollingElement || document.documentElement;
|
||||
}
|
||||
function setActive(i) {
|
||||
active = i;
|
||||
if (counter) counter.textContent = (i + 1) + ' / ' + slides.length;
|
||||
if (progress) progress.style.width = (((i + 1) / slides.length) * 100) + '%';
|
||||
try { localStorage.setItem(KEY, String(i)); } catch (_) {}
|
||||
}
|
||||
function go(i) {
|
||||
var next = Math.max(0, Math.min(slides.length - 1, i));
|
||||
setActive(next);
|
||||
scroller().scrollTo({ left: next * window.innerWidth, behavior: 'smooth' });
|
||||
}
|
||||
function syncFromScroll() {
|
||||
var i = Math.round(scroller().scrollLeft / window.innerWidth);
|
||||
if (i !== active && i >= 0 && i < slides.length) setActive(i);
|
||||
}
|
||||
function onKey(e) {
|
||||
var t = e.target;
|
||||
if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA')) return;
|
||||
if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'PageDown') { e.preventDefault(); go(active + 1); }
|
||||
else if (e.key === 'ArrowLeft' || e.key === 'PageUp') { e.preventDefault(); go(active - 1); }
|
||||
else if (e.key === 'Home') { e.preventDefault(); go(0); }
|
||||
else if (e.key === 'End') { e.preventDefault(); go(slides.length - 1); }
|
||||
}
|
||||
|
||||
window.addEventListener('keydown', onKey, true);
|
||||
document.addEventListener('keydown', onKey, true);
|
||||
document.addEventListener('scroll', syncFromScroll, { passive: true, capture: true });
|
||||
window.addEventListener('scroll', syncFromScroll, { passive: true });
|
||||
|
||||
document.body.setAttribute('tabindex', '-1');
|
||||
document.body.style.outline = 'none';
|
||||
function focusDeck() { try { window.focus(); document.body.focus({ preventScroll: true }); } catch (_) {} }
|
||||
document.addEventListener('mousedown', focusDeck);
|
||||
window.addEventListener('load', focusDeck);
|
||||
focusDeck();
|
||||
|
||||
try {
|
||||
var saved = parseInt(localStorage.getItem(KEY) || '0', 10);
|
||||
if (!isNaN(saved) && saved >= 0 && saved < slides.length) {
|
||||
setActive(saved);
|
||||
scroller().scrollTo({ left: saved * window.innerWidth, behavior: 'instant' });
|
||||
} else {
|
||||
setActive(0);
|
||||
}
|
||||
} catch (_) { setActive(0); }
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,18 @@
|
||||
# Examples
|
||||
|
||||
Four hand-written examples showing how `replit-deck` looks under different themes. Each is a self-contained HTML file — open in any browser, navigate with ← / →.
|
||||
|
||||
| File | Theme | Scenario |
|
||||
|---|---|---|
|
||||
| [`example-helix.html`](example-helix.html) | `helix` | SaaS Q1 board update · 6-metric KPI row · ARR detail |
|
||||
| [`example-holm.html`](example-holm.html) | `holm` | Legal fintech Series A memo · serif cover · ask + team |
|
||||
| [`example-atlas.html`](example-atlas.html) | `atlas` | Quarterly history chapter · vermilion accent · archive plate |
|
||||
| [`example-bluehouse.html`](example-bluehouse.html) | `bluehouse` | Real estate ROI pitch · gradient cards · pill headlines |
|
||||
|
||||
The four remaining themes (`vance`, `bevel`, `world-dark`, `world-mint`) are fully defined in [`../assets/template.html`](../assets/template.html) and [`../references/themes.md`](../references/themes.md). To try them:
|
||||
|
||||
1. Copy `../assets/template.html` to `example-<theme>.html`
|
||||
2. Change `<body data-theme="helix">` to the theme you want
|
||||
3. Paste layouts from [`../references/layouts.md`](../references/layouts.md) that match the theme
|
||||
|
||||
> **Note**: Numbers in these examples are synthetic, for illustration only. Real usage goes through the skill's workflow (question form → brief → honest metrics from the user).
|
||||
@@ -0,0 +1,499 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
OD replit-deck seed.
|
||||
|
||||
Single-file horizontal-swipe HTML deck in the style of Replit Slides's
|
||||
landing-page template gallery (replit.com/slides). One deck picks ONE
|
||||
theme via `<body data-theme="...">`. All 8 themes ship as tokens below;
|
||||
never override per-slide.
|
||||
|
||||
Themes:
|
||||
helix Modern minimal · light grey + ink + electric blue
|
||||
holm Editorial serif · cream + ink + deep chestnut
|
||||
vance Gallery · black/cream bars + cream serif
|
||||
bevel Y2K editorial · black + Y2K display type
|
||||
world-dark Finance dark · deep green + mint + neon yellow
|
||||
world-mint Finance light · mint + deep green + neon yellow
|
||||
atlas Museum · black + ivory + vermilion + serif
|
||||
bluehouse Consumer · deep navy + peach/coral gradient cards
|
||||
|
||||
DO NOT rewrite the script at the bottom. It solves five iframe-specific
|
||||
bugs (real scroller, dual listeners, auto-focus, no scrollIntoView,
|
||||
position persistence). See `skills/simple-deck` for the same pattern.
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Atlas Quarterly — Chapter 01</title>
|
||||
<style>
|
||||
/* ─── font stacks (system-only; no external fonts) ─────────────── */
|
||||
:root {
|
||||
--font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
|
||||
--font-sans-display: -apple-system, BlinkMacSystemFont, 'Inter Display', 'Inter', 'Segoe UI', system-ui, sans-serif;
|
||||
--font-serif: 'Iowan Old Style', 'Charter', 'Palatino', Georgia, 'Times New Roman', serif;
|
||||
--font-serif-display: 'GT Super', 'Tiempos Headline', 'Iowan Old Style', Georgia, serif;
|
||||
--font-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;
|
||||
}
|
||||
|
||||
/* ─── theme: helix (slide-1/4/5 — modern minimal) ─────────────── */
|
||||
body[data-theme="helix"] {
|
||||
--bg: #fafafa;
|
||||
--surface: #ffffff;
|
||||
--fg: #19191c;
|
||||
--muted: #6e6e73;
|
||||
--border: #e4e4e7;
|
||||
--accent: #5889fe;
|
||||
--accent-soft: color-mix(in oklch, #5889fe 14%, transparent);
|
||||
--font-display: var(--font-sans-display);
|
||||
--font-body: var(--font-sans);
|
||||
--display-weight: 600;
|
||||
--display-tracking: -0.02em;
|
||||
}
|
||||
|
||||
/* ─── theme: holm (slide-2 — editorial serif memo) ────────────── */
|
||||
body[data-theme="holm"] {
|
||||
--bg: #e4dfd7;
|
||||
--surface: #eee9e0;
|
||||
--fg: #0f0f0e;
|
||||
--muted: #7c7e84;
|
||||
--border: #c7c1b7;
|
||||
--accent: #52311d;
|
||||
--accent-soft: color-mix(in oklch, #52311d 14%, transparent);
|
||||
--font-display: var(--font-serif-display);
|
||||
--font-body: var(--font-sans);
|
||||
--display-weight: 500;
|
||||
--display-tracking: -0.015em;
|
||||
}
|
||||
|
||||
/* ─── theme: vance (slide-3/7 — gallery catalog) ──────────────── */
|
||||
body[data-theme="vance"] {
|
||||
--bg: #f1ede2;
|
||||
--surface: #e7e2d4;
|
||||
--fg: #171815;
|
||||
--muted: #6e6b62;
|
||||
--border: #d6d2c5;
|
||||
--accent: #171815;
|
||||
--accent-soft: color-mix(in oklch, #171815 8%, transparent);
|
||||
--bar: #0a0a0a; /* top/bottom gallery bar */
|
||||
--bar-fg: #f1ede2;
|
||||
--font-display: var(--font-serif-display);
|
||||
--font-body: var(--font-sans);
|
||||
--display-weight: 400;
|
||||
--display-tracking: -0.01em;
|
||||
}
|
||||
|
||||
/* ─── theme: bevel (slide-6/13 — Y2K editorial) ───────────────── */
|
||||
body[data-theme="bevel"] {
|
||||
--bg: #0d0d0b;
|
||||
--surface: #18181a;
|
||||
--fg: #eae6dd;
|
||||
--muted: #a29e95;
|
||||
--border: #2a2a28;
|
||||
--accent: #c8ff00; /* neon outline only — sparingly */
|
||||
--accent-soft: color-mix(in oklch, #c8ff00 10%, transparent);
|
||||
--font-display: 'Antonio', 'Bebas Neue', Impact, var(--font-sans-display);
|
||||
--font-body: var(--font-sans);
|
||||
--display-weight: 700;
|
||||
--display-tracking: 0;
|
||||
}
|
||||
|
||||
/* ─── theme: world-dark (slide-8/10 — finance dark) ───────────── */
|
||||
body[data-theme="world-dark"] {
|
||||
--bg: #0d3a2b;
|
||||
--surface: #124736;
|
||||
--fg: #bcd6cd;
|
||||
--muted: #789f91;
|
||||
--border: #1d4c3c;
|
||||
--accent: #e8f615;
|
||||
--accent-soft: color-mix(in oklch, #e8f615 18%, transparent);
|
||||
--font-display: var(--font-sans-display);
|
||||
--font-body: var(--font-sans);
|
||||
--display-weight: 500;
|
||||
--display-tracking: -0.015em;
|
||||
}
|
||||
|
||||
/* ─── theme: world-mint (slide-9 — finance light sibling) ─────── */
|
||||
body[data-theme="world-mint"] {
|
||||
--bg: #bcd6cd;
|
||||
--surface: #c8e0d6;
|
||||
--fg: #0d3a2b;
|
||||
--muted: #527567;
|
||||
--border: #9abbac;
|
||||
--accent: #e8f615;
|
||||
--accent-soft: color-mix(in oklch, #e8f615 22%, transparent);
|
||||
--font-display: var(--font-sans-display);
|
||||
--font-body: var(--font-sans);
|
||||
--display-weight: 500;
|
||||
--display-tracking: -0.015em;
|
||||
}
|
||||
|
||||
/* ─── theme: atlas (slide-11 — museum chapter) ────────────────── */
|
||||
body[data-theme="atlas"] {
|
||||
--bg: #111010;
|
||||
--surface: #1a1918;
|
||||
--fg: #e7e6e2;
|
||||
--muted: #827d78;
|
||||
--border: #2a2826;
|
||||
--accent: #de3f40;
|
||||
--accent-soft: color-mix(in oklch, #de3f40 14%, transparent);
|
||||
--font-display: var(--font-serif-display);
|
||||
--font-body: var(--font-sans);
|
||||
--display-weight: 500;
|
||||
--display-tracking: -0.02em;
|
||||
}
|
||||
|
||||
/* ─── theme: bluehouse (slide-12 — consumer card) ─────────────── */
|
||||
body[data-theme="bluehouse"] {
|
||||
--bg: #0b1524;
|
||||
--surface: #10203a;
|
||||
--fg: #ffffff;
|
||||
--muted: #8ea0b8;
|
||||
--border: #1a2c46;
|
||||
--accent: #fb675d; /* coral */
|
||||
--accent-2: #ff8f68; /* peach */
|
||||
--accent-soft: color-mix(in oklch, #fb675d 18%, transparent);
|
||||
--card-peach: #e0af99;
|
||||
--card-lavender: #c7cff0;
|
||||
--font-display: var(--font-sans-display);
|
||||
--font-body: var(--font-sans);
|
||||
--display-weight: 700;
|
||||
--display-tracking: -0.025em;
|
||||
}
|
||||
|
||||
/* ─── reset / base ────────────────────────────────────────────── */
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { margin: 0; height: 100%; }
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-body);
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
scroll-snap-type: x mandatory;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
body::-webkit-scrollbar { display: none; }
|
||||
p { text-wrap: pretty; margin: 0; }
|
||||
h1, h2, h3 { text-wrap: balance; margin: 0; font-weight: var(--display-weight); letter-spacing: var(--display-tracking); }
|
||||
|
||||
/* ─── slide surface ───────────────────────────────────────────── */
|
||||
.slide {
|
||||
flex: 0 0 100vw;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
scroll-snap-align: start;
|
||||
padding: clamp(48px, 6vw, 96px) clamp(56px, 7vw, 112px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.slide.center { align-items: center; justify-content: center; text-align: center; }
|
||||
|
||||
/* ─── meta bar (top thin row: brand · meta · page) ────────────── */
|
||||
.meta-bar {
|
||||
position: absolute;
|
||||
top: clamp(32px, 4vw, 56px);
|
||||
left: clamp(56px, 7vw, 112px);
|
||||
right: clamp(56px, 7vw, 112px);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
body[data-theme="vance"] .meta-bar { color: var(--bar-fg); }
|
||||
|
||||
/* ─── typography primitives ──────────────────────────────────── */
|
||||
.eyebrow {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
.eyebrow.accent { color: var(--accent); }
|
||||
.h-hero { font-family: var(--font-display); font-size: clamp(56px, 8.5vw, 128px); line-height: 1.02; }
|
||||
.h-xl { font-family: var(--font-display); font-size: clamp(40px, 5vw, 76px); line-height: 1.08; }
|
||||
.h-lg { font-family: var(--font-display); font-size: clamp(28px, 3vw, 44px); line-height: 1.14; }
|
||||
.h-md { font-family: var(--font-display); font-size: clamp(20px, 1.6vw, 24px); line-height: 1.25; }
|
||||
.lead { font-size: clamp(16px, 1.2vw, 19px); color: var(--muted); max-width: 56ch; }
|
||||
|
||||
/* Big numeric display — for kpi rows, used by helix / world / atlas */
|
||||
.num { font-family: var(--font-display); font-size: clamp(48px, 5.5vw, 84px); line-height: 1; letter-spacing: -0.03em; }
|
||||
.num-label { font-size: 15px; color: var(--muted); margin-bottom: 8px; }
|
||||
.num-delta { font-family: var(--font-mono); font-size: 13px; color: var(--accent); margin-top: 8px; letter-spacing: 0.02em; }
|
||||
|
||||
/* ─── layout primitives ──────────────────────────────────────── */
|
||||
.hstack { display: flex; gap: var(--gap, 24px); align-items: flex-start; }
|
||||
.vstack { display: flex; flex-direction: column; gap: var(--gap, 16px); }
|
||||
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); }
|
||||
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: center; }
|
||||
.grid-6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 4vw, 56px); row-gap: clamp(48px, 5vw, 80px); }
|
||||
.divider { height: 1px; background: var(--border); margin: clamp(16px, 2vw, 32px) 0; }
|
||||
|
||||
/* ─── surface cards ──────────────────────────────────────────── */
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
padding: clamp(20px, 2vw, 32px);
|
||||
}
|
||||
|
||||
/* ─── vance gallery bars ─────────────────────────────────────── */
|
||||
body[data-theme="vance"] .slide { padding-top: 0; padding-bottom: 0; }
|
||||
body[data-theme="vance"] .vance-top {
|
||||
background: var(--bar);
|
||||
color: var(--bar-fg);
|
||||
padding: clamp(32px, 4vw, 64px) clamp(56px, 7vw, 112px);
|
||||
margin-left: calc(-1 * clamp(56px, 7vw, 112px));
|
||||
margin-right: calc(-1 * clamp(56px, 7vw, 112px));
|
||||
}
|
||||
|
||||
/* ─── bevel dashed frames ────────────────────────────────────── */
|
||||
body[data-theme="bevel"] .bevel-frame {
|
||||
border: 1px dashed var(--accent);
|
||||
padding: clamp(16px, 2vw, 28px);
|
||||
position: relative;
|
||||
}
|
||||
body[data-theme="bevel"] .bevel-frame::before,
|
||||
body[data-theme="bevel"] .bevel-frame::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 8px; height: 8px;
|
||||
background: var(--accent);
|
||||
border-radius: 50%;
|
||||
}
|
||||
body[data-theme="bevel"] .bevel-frame::before { top: -4px; left: -4px; }
|
||||
body[data-theme="bevel"] .bevel-frame::after { bottom: -4px; right: -4px; }
|
||||
|
||||
/* ─── world yellow square marker ─────────────────────────────── */
|
||||
body[data-theme="world-dark"] .world-marker,
|
||||
body[data-theme="world-mint"] .world-marker {
|
||||
display: inline-block;
|
||||
width: 14px; height: 14px;
|
||||
background: var(--accent);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* ─── atlas chapter dot ──────────────────────────────────────── */
|
||||
body[data-theme="atlas"] .atlas-dot {
|
||||
display: inline-block;
|
||||
width: 10px; height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
margin-right: 12px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* ─── bluehouse gradient card ────────────────────────────────── */
|
||||
body[data-theme="bluehouse"] .bh-card {
|
||||
border-radius: 24px;
|
||||
padding: clamp(28px, 3vw, 48px);
|
||||
aspect-ratio: 4 / 3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
body[data-theme="bluehouse"] .bh-card.peach {
|
||||
background: var(--card-peach);
|
||||
color: #1a0e08;
|
||||
}
|
||||
body[data-theme="bluehouse"] .bh-card.coral {
|
||||
background: linear-gradient(135deg, var(--accent-2), var(--accent));
|
||||
color: #ffffff;
|
||||
}
|
||||
body[data-theme="bluehouse"] .bh-card.lavender {
|
||||
background: linear-gradient(180deg, var(--card-lavender), #8faad8);
|
||||
color: #0b1524;
|
||||
}
|
||||
|
||||
/* ─── deck chrome (counter, progress, hint) ──────────────────── */
|
||||
.deck-counter {
|
||||
position: fixed;
|
||||
bottom: 24px; right: 32px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
padding: 6px 12px;
|
||||
background: color-mix(in oklch, var(--bg) 92%, transparent);
|
||||
border: 1px solid var(--border);
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--muted);
|
||||
z-index: 10;
|
||||
}
|
||||
.deck-hint {
|
||||
position: fixed;
|
||||
bottom: 24px; left: 32px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
letter-spacing: 0.04em;
|
||||
z-index: 10;
|
||||
}
|
||||
.deck-progress {
|
||||
position: fixed;
|
||||
top: 0; left: 0;
|
||||
height: 2px;
|
||||
background: var(--accent);
|
||||
width: 0;
|
||||
z-index: 10;
|
||||
transition: width 0.18s ease;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body data-theme="atlas">
|
||||
<!-- example: atlas · illustrative content only. Numbers are synthetic. -->
|
||||
|
||||
<section class="slide" data-screen-label="01 Chapter 01">
|
||||
<div class="meta-bar">
|
||||
<span><span class="atlas-dot"></span>THE ATLAS QUARTERLY · CHAPTER 01</span>
|
||||
<span>04 / 24</span>
|
||||
</div>
|
||||
<div style="flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: center; margin-top: clamp(24px, 3vh, 40px);">
|
||||
<div>
|
||||
<p class="eyebrow" style="color: var(--accent); margin-bottom: 32px;">— CHAPTER ONE — A CENTURY OF EMPIRES</p>
|
||||
<h1 class="h-hero" style="max-width: 12ch;">The Imperial<br>Age<span style="color: var(--accent);">.</span></h1>
|
||||
<p class="lead" style="margin-top: 28px; max-width: 44ch;">Between the Congress of Vienna and the guns of August, the world was redrawn in the language of empire — charted, claimed, and catalogued by a handful of capitals that believed history belonged to them.</p>
|
||||
</div>
|
||||
<div style="border: 1px solid var(--border); padding: 12px; position: relative;">
|
||||
<span style="position: absolute; top: 24px; left: 24px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: #fff; text-transform: uppercase; background: rgba(0,0,0,0.45); padding: 4px 10px;">PLATE I</span>
|
||||
<span style="position: absolute; top: 24px; right: 24px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: #fff; text-transform: uppercase; background: rgba(0,0,0,0.7); padding: 4px 10px;"><span class="atlas-dot" style="width: 6px; height: 6px; margin-right: 6px;"></span>EXHIBIT 04.B</span>
|
||||
<div style="aspect-ratio: 4/3; background: linear-gradient(180deg, #2a2620 0%, #161311 100%); display: flex; align-items: center; justify-content: center; color: #4a463f; font-family: var(--font-serif-display); font-size: 14px;">[archival photograph]</div>
|
||||
<div style="padding: 14px 4px 4px; color: var(--fg); font-size: 14px;">The west colonnade at first light.</div>
|
||||
<div style="padding: 0 4px; color: var(--muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;">PHOTOGRAPHED C. 1887 · ARCHIVE 0341.B</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: repeat(3, 1fr) 2fr; gap: clamp(16px, 2vw, 32px); border-top: 1px solid var(--border); padding-top: clamp(16px, 2vh, 24px); margin-top: auto;">
|
||||
<div><p class="eyebrow" style="margin-bottom: 8px;">PERIOD</p><div style="font-family: var(--font-display); font-size: 28px; font-weight: 500;">1815–1914</div><div style="color: var(--muted); font-size: 13px; margin-top: 4px;">Vienna to Sarajevo — the long peace of empire.</div></div>
|
||||
<div><p class="eyebrow" style="margin-bottom: 8px;">REACH</p><div style="font-family: var(--font-display); font-size: 28px; font-weight: 500; color: var(--accent);">84%</div><div style="color: var(--muted); font-size: 13px; margin-top: 4px;">of the globe under colonial or imperial rule by 1914.</div></div>
|
||||
<div><p class="eyebrow" style="margin-bottom: 8px;">CAPITALS</p><div style="font-family: var(--font-display); font-size: 28px; font-weight: 500;">Six</div><div style="color: var(--muted); font-size: 13px; margin-top: 4px;">London · Paris · Berlin · Vienna · St Petersburg · Constantinople.</div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="slide" data-screen-label="02 The Pivot">
|
||||
<div class="meta-bar">
|
||||
<span><span class="atlas-dot"></span>THE ATLAS QUARTERLY · CHAPTER 01</span>
|
||||
<span>05 / 24</span>
|
||||
</div>
|
||||
<div style="margin-top: clamp(32px, 4vh, 48px);">
|
||||
<p class="eyebrow" style="color: var(--accent); margin-bottom: 28px;">— SECTION TWO — THE BERLIN CONFERENCE</p>
|
||||
<h2 class="h-xl" style="max-width: 22ch;">Fourteen men, one table, one winter — and the map of Africa was rewritten without a single African in the room<span style="color: var(--accent);">.</span></h2>
|
||||
</div>
|
||||
<div style="flex: 1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(24px, 3vw, 48px); align-items: end; margin-top: clamp(48px, 6vh, 96px);">
|
||||
<div>
|
||||
<p class="eyebrow" style="color: var(--accent); margin-bottom: 10px;">NOV 1884</p>
|
||||
<div style="font-family: var(--font-display); font-size: 28px; font-weight: 500; line-height: 1.2;">The summit convenes in Berlin under Bismarck.</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="eyebrow" style="color: var(--accent); margin-bottom: 10px;">FEB 1885</p>
|
||||
<div style="font-family: var(--font-display); font-size: 28px; font-weight: 500; line-height: 1.2;">The General Act is signed. A continent is partitioned.</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="eyebrow" style="color: var(--accent); margin-bottom: 10px;">JUL 1914</p>
|
||||
<div style="font-family: var(--font-display); font-size: 28px; font-weight: 500; line-height: 1.2;">The arrangement dies at Sarajevo, along with the century that drew it.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="position: absolute; bottom: 0; left: clamp(56px, 7vw, 112px); right: clamp(56px, 7vw, 112px); display: flex; align-items: center; gap: 12px; padding-bottom: 20px;">
|
||||
<div style="flex: 1; height: 1px; background: var(--border); position: relative;"><div style="position: absolute; left: 0; top: -1px; height: 3px; width: 21%; background: var(--accent);"></div></div>
|
||||
<span style="font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.08em;">05 / 24</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="slide center" data-screen-label="03 Plate">
|
||||
<div class="meta-bar">
|
||||
<span><span class="atlas-dot"></span>THE ATLAS QUARTERLY · INTERMEZZO</span>
|
||||
<span>06 / 24</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="eyebrow" style="color: var(--accent); margin-bottom: 28px;">PLATE III</p>
|
||||
<h2 class="h-hero" style="max-width: 14ch;">A century ends<br>with a gunshot<span style="color: var(--accent);">.</span></h2>
|
||||
<p class="lead" style="margin-top: 28px; max-width: 50ch;">What began as cartography ended as catastrophe. The map outlived the men who drew it by exactly one generation.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- chrome (do not move) -->
|
||||
<div class="deck-progress" id="deck-progress" aria-hidden></div>
|
||||
<div class="deck-counter" id="deck-counter">1 / 3</div>
|
||||
<div class="deck-hint">← / → · scroll · swipe</div>
|
||||
|
||||
<script>
|
||||
/*
|
||||
Five hard rules for deck nav inside an iframe.
|
||||
Verified by skills/simple-deck — do not rewrite.
|
||||
|
||||
1. Detect the real scroller — body OR documentElement.
|
||||
2. Listen for scroll on BOTH window and document, capture phase.
|
||||
3. Listen for keydown on BOTH window and document, capture phase.
|
||||
4. Auto-focus body so arrow keys work without an upfront click.
|
||||
5. Never use Element.scrollIntoView — yanks host page.
|
||||
*/
|
||||
(function () {
|
||||
var slides = document.querySelectorAll('.slide');
|
||||
var counter = document.getElementById('deck-counter');
|
||||
var progress = document.getElementById('deck-progress');
|
||||
var KEY = 'od-deck-pos:' + (location.pathname || '/');
|
||||
var active = 0;
|
||||
|
||||
function scroller() {
|
||||
if (document.body.scrollWidth > document.body.clientWidth + 1) return document.body;
|
||||
return document.scrollingElement || document.documentElement;
|
||||
}
|
||||
function setActive(i) {
|
||||
active = i;
|
||||
if (counter) counter.textContent = (i + 1) + ' / ' + slides.length;
|
||||
if (progress) progress.style.width = (((i + 1) / slides.length) * 100) + '%';
|
||||
try { localStorage.setItem(KEY, String(i)); } catch (_) {}
|
||||
}
|
||||
function go(i) {
|
||||
var next = Math.max(0, Math.min(slides.length - 1, i));
|
||||
setActive(next);
|
||||
scroller().scrollTo({ left: next * window.innerWidth, behavior: 'smooth' });
|
||||
}
|
||||
function syncFromScroll() {
|
||||
var i = Math.round(scroller().scrollLeft / window.innerWidth);
|
||||
if (i !== active && i >= 0 && i < slides.length) setActive(i);
|
||||
}
|
||||
function onKey(e) {
|
||||
var t = e.target;
|
||||
if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA')) return;
|
||||
if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'PageDown') { e.preventDefault(); go(active + 1); }
|
||||
else if (e.key === 'ArrowLeft' || e.key === 'PageUp') { e.preventDefault(); go(active - 1); }
|
||||
else if (e.key === 'Home') { e.preventDefault(); go(0); }
|
||||
else if (e.key === 'End') { e.preventDefault(); go(slides.length - 1); }
|
||||
}
|
||||
|
||||
window.addEventListener('keydown', onKey, true);
|
||||
document.addEventListener('keydown', onKey, true);
|
||||
document.addEventListener('scroll', syncFromScroll, { passive: true, capture: true });
|
||||
window.addEventListener('scroll', syncFromScroll, { passive: true });
|
||||
|
||||
document.body.setAttribute('tabindex', '-1');
|
||||
document.body.style.outline = 'none';
|
||||
function focusDeck() { try { window.focus(); document.body.focus({ preventScroll: true }); } catch (_) {} }
|
||||
document.addEventListener('mousedown', focusDeck);
|
||||
window.addEventListener('load', focusDeck);
|
||||
focusDeck();
|
||||
|
||||
try {
|
||||
var saved = parseInt(localStorage.getItem(KEY) || '0', 10);
|
||||
if (!isNaN(saved) && saved >= 0 && saved < slides.length) {
|
||||
setActive(saved);
|
||||
scroller().scrollTo({ left: saved * window.innerWidth, behavior: 'instant' });
|
||||
} else {
|
||||
setActive(0);
|
||||
}
|
||||
} catch (_) { setActive(0); }
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,495 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
OD replit-deck seed.
|
||||
|
||||
Single-file horizontal-swipe HTML deck in the style of Replit Slides's
|
||||
landing-page template gallery (replit.com/slides). One deck picks ONE
|
||||
theme via `<body data-theme="...">`. All 8 themes ship as tokens below;
|
||||
never override per-slide.
|
||||
|
||||
Themes:
|
||||
helix Modern minimal · light grey + ink + electric blue
|
||||
holm Editorial serif · cream + ink + deep chestnut
|
||||
vance Gallery · black/cream bars + cream serif
|
||||
bevel Y2K editorial · black + Y2K display type
|
||||
world-dark Finance dark · deep green + mint + neon yellow
|
||||
world-mint Finance light · mint + deep green + neon yellow
|
||||
atlas Museum · black + ivory + vermilion + serif
|
||||
bluehouse Consumer · deep navy + peach/coral gradient cards
|
||||
|
||||
DO NOT rewrite the script at the bottom. It solves five iframe-specific
|
||||
bugs (real scroller, dual listeners, auto-focus, no scrollIntoView,
|
||||
position persistence). See `skills/simple-deck` for the same pattern.
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Bluehouse — Real Estate ROI</title>
|
||||
<style>
|
||||
/* ─── font stacks (system-only; no external fonts) ─────────────── */
|
||||
:root {
|
||||
--font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
|
||||
--font-sans-display: -apple-system, BlinkMacSystemFont, 'Inter Display', 'Inter', 'Segoe UI', system-ui, sans-serif;
|
||||
--font-serif: 'Iowan Old Style', 'Charter', 'Palatino', Georgia, 'Times New Roman', serif;
|
||||
--font-serif-display: 'GT Super', 'Tiempos Headline', 'Iowan Old Style', Georgia, serif;
|
||||
--font-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;
|
||||
}
|
||||
|
||||
/* ─── theme: helix (slide-1/4/5 — modern minimal) ─────────────── */
|
||||
body[data-theme="helix"] {
|
||||
--bg: #fafafa;
|
||||
--surface: #ffffff;
|
||||
--fg: #19191c;
|
||||
--muted: #6e6e73;
|
||||
--border: #e4e4e7;
|
||||
--accent: #5889fe;
|
||||
--accent-soft: color-mix(in oklch, #5889fe 14%, transparent);
|
||||
--font-display: var(--font-sans-display);
|
||||
--font-body: var(--font-sans);
|
||||
--display-weight: 600;
|
||||
--display-tracking: -0.02em;
|
||||
}
|
||||
|
||||
/* ─── theme: holm (slide-2 — editorial serif memo) ────────────── */
|
||||
body[data-theme="holm"] {
|
||||
--bg: #e4dfd7;
|
||||
--surface: #eee9e0;
|
||||
--fg: #0f0f0e;
|
||||
--muted: #7c7e84;
|
||||
--border: #c7c1b7;
|
||||
--accent: #52311d;
|
||||
--accent-soft: color-mix(in oklch, #52311d 14%, transparent);
|
||||
--font-display: var(--font-serif-display);
|
||||
--font-body: var(--font-sans);
|
||||
--display-weight: 500;
|
||||
--display-tracking: -0.015em;
|
||||
}
|
||||
|
||||
/* ─── theme: vance (slide-3/7 — gallery catalog) ──────────────── */
|
||||
body[data-theme="vance"] {
|
||||
--bg: #f1ede2;
|
||||
--surface: #e7e2d4;
|
||||
--fg: #171815;
|
||||
--muted: #6e6b62;
|
||||
--border: #d6d2c5;
|
||||
--accent: #171815;
|
||||
--accent-soft: color-mix(in oklch, #171815 8%, transparent);
|
||||
--bar: #0a0a0a; /* top/bottom gallery bar */
|
||||
--bar-fg: #f1ede2;
|
||||
--font-display: var(--font-serif-display);
|
||||
--font-body: var(--font-sans);
|
||||
--display-weight: 400;
|
||||
--display-tracking: -0.01em;
|
||||
}
|
||||
|
||||
/* ─── theme: bevel (slide-6/13 — Y2K editorial) ───────────────── */
|
||||
body[data-theme="bevel"] {
|
||||
--bg: #0d0d0b;
|
||||
--surface: #18181a;
|
||||
--fg: #eae6dd;
|
||||
--muted: #a29e95;
|
||||
--border: #2a2a28;
|
||||
--accent: #c8ff00; /* neon outline only — sparingly */
|
||||
--accent-soft: color-mix(in oklch, #c8ff00 10%, transparent);
|
||||
--font-display: 'Antonio', 'Bebas Neue', Impact, var(--font-sans-display);
|
||||
--font-body: var(--font-sans);
|
||||
--display-weight: 700;
|
||||
--display-tracking: 0;
|
||||
}
|
||||
|
||||
/* ─── theme: world-dark (slide-8/10 — finance dark) ───────────── */
|
||||
body[data-theme="world-dark"] {
|
||||
--bg: #0d3a2b;
|
||||
--surface: #124736;
|
||||
--fg: #bcd6cd;
|
||||
--muted: #789f91;
|
||||
--border: #1d4c3c;
|
||||
--accent: #e8f615;
|
||||
--accent-soft: color-mix(in oklch, #e8f615 18%, transparent);
|
||||
--font-display: var(--font-sans-display);
|
||||
--font-body: var(--font-sans);
|
||||
--display-weight: 500;
|
||||
--display-tracking: -0.015em;
|
||||
}
|
||||
|
||||
/* ─── theme: world-mint (slide-9 — finance light sibling) ─────── */
|
||||
body[data-theme="world-mint"] {
|
||||
--bg: #bcd6cd;
|
||||
--surface: #c8e0d6;
|
||||
--fg: #0d3a2b;
|
||||
--muted: #527567;
|
||||
--border: #9abbac;
|
||||
--accent: #e8f615;
|
||||
--accent-soft: color-mix(in oklch, #e8f615 22%, transparent);
|
||||
--font-display: var(--font-sans-display);
|
||||
--font-body: var(--font-sans);
|
||||
--display-weight: 500;
|
||||
--display-tracking: -0.015em;
|
||||
}
|
||||
|
||||
/* ─── theme: atlas (slide-11 — museum chapter) ────────────────── */
|
||||
body[data-theme="atlas"] {
|
||||
--bg: #111010;
|
||||
--surface: #1a1918;
|
||||
--fg: #e7e6e2;
|
||||
--muted: #827d78;
|
||||
--border: #2a2826;
|
||||
--accent: #de3f40;
|
||||
--accent-soft: color-mix(in oklch, #de3f40 14%, transparent);
|
||||
--font-display: var(--font-serif-display);
|
||||
--font-body: var(--font-sans);
|
||||
--display-weight: 500;
|
||||
--display-tracking: -0.02em;
|
||||
}
|
||||
|
||||
/* ─── theme: bluehouse (slide-12 — consumer card) ─────────────── */
|
||||
body[data-theme="bluehouse"] {
|
||||
--bg: #0b1524;
|
||||
--surface: #10203a;
|
||||
--fg: #ffffff;
|
||||
--muted: #8ea0b8;
|
||||
--border: #1a2c46;
|
||||
--accent: #fb675d; /* coral */
|
||||
--accent-2: #ff8f68; /* peach */
|
||||
--accent-soft: color-mix(in oklch, #fb675d 18%, transparent);
|
||||
--card-peach: #e0af99;
|
||||
--card-lavender: #c7cff0;
|
||||
--font-display: var(--font-sans-display);
|
||||
--font-body: var(--font-sans);
|
||||
--display-weight: 700;
|
||||
--display-tracking: -0.025em;
|
||||
}
|
||||
|
||||
/* ─── reset / base ────────────────────────────────────────────── */
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { margin: 0; height: 100%; }
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-body);
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
scroll-snap-type: x mandatory;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
body::-webkit-scrollbar { display: none; }
|
||||
p { text-wrap: pretty; margin: 0; }
|
||||
h1, h2, h3 { text-wrap: balance; margin: 0; font-weight: var(--display-weight); letter-spacing: var(--display-tracking); }
|
||||
|
||||
/* ─── slide surface ───────────────────────────────────────────── */
|
||||
.slide {
|
||||
flex: 0 0 100vw;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
scroll-snap-align: start;
|
||||
padding: clamp(48px, 6vw, 96px) clamp(56px, 7vw, 112px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.slide.center { align-items: center; justify-content: center; text-align: center; }
|
||||
|
||||
/* ─── meta bar (top thin row: brand · meta · page) ────────────── */
|
||||
.meta-bar {
|
||||
position: absolute;
|
||||
top: clamp(32px, 4vw, 56px);
|
||||
left: clamp(56px, 7vw, 112px);
|
||||
right: clamp(56px, 7vw, 112px);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
body[data-theme="vance"] .meta-bar { color: var(--bar-fg); }
|
||||
|
||||
/* ─── typography primitives ──────────────────────────────────── */
|
||||
.eyebrow {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
.eyebrow.accent { color: var(--accent); }
|
||||
.h-hero { font-family: var(--font-display); font-size: clamp(56px, 8.5vw, 128px); line-height: 1.02; }
|
||||
.h-xl { font-family: var(--font-display); font-size: clamp(40px, 5vw, 76px); line-height: 1.08; }
|
||||
.h-lg { font-family: var(--font-display); font-size: clamp(28px, 3vw, 44px); line-height: 1.14; }
|
||||
.h-md { font-family: var(--font-display); font-size: clamp(20px, 1.6vw, 24px); line-height: 1.25; }
|
||||
.lead { font-size: clamp(16px, 1.2vw, 19px); color: var(--muted); max-width: 56ch; }
|
||||
|
||||
/* Big numeric display — for kpi rows, used by helix / world / atlas */
|
||||
.num { font-family: var(--font-display); font-size: clamp(48px, 5.5vw, 84px); line-height: 1; letter-spacing: -0.03em; }
|
||||
.num-label { font-size: 15px; color: var(--muted); margin-bottom: 8px; }
|
||||
.num-delta { font-family: var(--font-mono); font-size: 13px; color: var(--accent); margin-top: 8px; letter-spacing: 0.02em; }
|
||||
|
||||
/* ─── layout primitives ──────────────────────────────────────── */
|
||||
.hstack { display: flex; gap: var(--gap, 24px); align-items: flex-start; }
|
||||
.vstack { display: flex; flex-direction: column; gap: var(--gap, 16px); }
|
||||
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); }
|
||||
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: center; }
|
||||
.grid-6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 4vw, 56px); row-gap: clamp(48px, 5vw, 80px); }
|
||||
.divider { height: 1px; background: var(--border); margin: clamp(16px, 2vw, 32px) 0; }
|
||||
|
||||
/* ─── surface cards ──────────────────────────────────────────── */
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
padding: clamp(20px, 2vw, 32px);
|
||||
}
|
||||
|
||||
/* ─── vance gallery bars ─────────────────────────────────────── */
|
||||
body[data-theme="vance"] .slide { padding-top: 0; padding-bottom: 0; }
|
||||
body[data-theme="vance"] .vance-top {
|
||||
background: var(--bar);
|
||||
color: var(--bar-fg);
|
||||
padding: clamp(32px, 4vw, 64px) clamp(56px, 7vw, 112px);
|
||||
margin-left: calc(-1 * clamp(56px, 7vw, 112px));
|
||||
margin-right: calc(-1 * clamp(56px, 7vw, 112px));
|
||||
}
|
||||
|
||||
/* ─── bevel dashed frames ────────────────────────────────────── */
|
||||
body[data-theme="bevel"] .bevel-frame {
|
||||
border: 1px dashed var(--accent);
|
||||
padding: clamp(16px, 2vw, 28px);
|
||||
position: relative;
|
||||
}
|
||||
body[data-theme="bevel"] .bevel-frame::before,
|
||||
body[data-theme="bevel"] .bevel-frame::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 8px; height: 8px;
|
||||
background: var(--accent);
|
||||
border-radius: 50%;
|
||||
}
|
||||
body[data-theme="bevel"] .bevel-frame::before { top: -4px; left: -4px; }
|
||||
body[data-theme="bevel"] .bevel-frame::after { bottom: -4px; right: -4px; }
|
||||
|
||||
/* ─── world yellow square marker ─────────────────────────────── */
|
||||
body[data-theme="world-dark"] .world-marker,
|
||||
body[data-theme="world-mint"] .world-marker {
|
||||
display: inline-block;
|
||||
width: 14px; height: 14px;
|
||||
background: var(--accent);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* ─── atlas chapter dot ──────────────────────────────────────── */
|
||||
body[data-theme="atlas"] .atlas-dot {
|
||||
display: inline-block;
|
||||
width: 10px; height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
margin-right: 12px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* ─── bluehouse gradient card ────────────────────────────────── */
|
||||
body[data-theme="bluehouse"] .bh-card {
|
||||
border-radius: 24px;
|
||||
padding: clamp(28px, 3vw, 48px);
|
||||
aspect-ratio: 4 / 3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
body[data-theme="bluehouse"] .bh-card.peach {
|
||||
background: var(--card-peach);
|
||||
color: #1a0e08;
|
||||
}
|
||||
body[data-theme="bluehouse"] .bh-card.coral {
|
||||
background: linear-gradient(135deg, var(--accent-2), var(--accent));
|
||||
color: #ffffff;
|
||||
}
|
||||
body[data-theme="bluehouse"] .bh-card.lavender {
|
||||
background: linear-gradient(180deg, var(--card-lavender), #8faad8);
|
||||
color: #0b1524;
|
||||
}
|
||||
|
||||
/* ─── deck chrome (counter, progress, hint) ──────────────────── */
|
||||
.deck-counter {
|
||||
position: fixed;
|
||||
bottom: 24px; right: 32px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
padding: 6px 12px;
|
||||
background: color-mix(in oklch, var(--bg) 92%, transparent);
|
||||
border: 1px solid var(--border);
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--muted);
|
||||
z-index: 10;
|
||||
}
|
||||
.deck-hint {
|
||||
position: fixed;
|
||||
bottom: 24px; left: 32px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
letter-spacing: 0.04em;
|
||||
z-index: 10;
|
||||
}
|
||||
.deck-progress {
|
||||
position: fixed;
|
||||
top: 0; left: 0;
|
||||
height: 2px;
|
||||
background: var(--accent);
|
||||
width: 0;
|
||||
z-index: 10;
|
||||
transition: width 0.18s ease;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body data-theme="bluehouse">
|
||||
<!-- example: bluehouse · illustrative content only. Numbers are synthetic. -->
|
||||
|
||||
<section class="slide" data-screen-label="01 ROI Hero">
|
||||
<div class="meta-bar" style="color: var(--muted);">
|
||||
<span style="display: flex; align-items: center; gap: 10px;">
|
||||
<span style="width: 36px; height: 36px; border-radius: 10px; background: var(--surface); display: flex; align-items: center; justify-content: center; color: var(--fg); font-size: 18px;">⌂</span>
|
||||
<span style="font-family: var(--font-display); font-size: 22px; text-transform: none; letter-spacing: 0; color: var(--fg); font-weight: 600;">Bluehouse</span>
|
||||
</span>
|
||||
<span>01 / 03</span>
|
||||
</div>
|
||||
<div style="margin-top: clamp(48px, 6vh, 88px);">
|
||||
<h1 class="h-hero" style="max-width: 18ch;">Driving real estate <span style="display: inline-block; background: var(--card-peach); color: var(--bg); padding: 0 24px; border-radius: 48px; line-height: 1.1;">ROI</span><br>with prime properties</h1>
|
||||
</div>
|
||||
<div style="margin-top: clamp(32px, 4vh, 56px); display: grid; grid-template-columns: 1fr 1.1fr 0.9fr; gap: clamp(16px, 2vw, 24px); flex: 1; max-height: 52vh;">
|
||||
<div class="bh-card peach">
|
||||
<div style="display: flex; justify-content: flex-end;"><span style="width: 28px; height: 28px; border-radius: 8px; background: rgba(11,21,36,0.15); display:flex;align-items:center;justify-content:center; color: var(--bg); font-size: 16px;">+</span></div>
|
||||
<div style="background: linear-gradient(180deg, #9ab8d9 0%, #b8c8d6 100%); flex: 1; margin: 8px 0 16px; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: rgba(11,21,36,0.35); font-family: var(--font-mono); font-size: 12px;">[property photo]</div>
|
||||
<div><div class="num" style="color: var(--bg); font-size: clamp(36px, 4vw, 56px);">$2.4M</div><div style="color: var(--bg); opacity: 0.75; font-size: 14px; margin-top: 4px;">asking price<br>Sunset Ridge</div></div>
|
||||
</div>
|
||||
<div class="bh-card coral">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<div style="display: flex;">
|
||||
<span style="width: 28px; height: 28px; border-radius: 50%; background: #fff; margin-right: -8px; border: 2px solid var(--accent); display:flex;align-items:center;justify-content:center; color: var(--bg); font-size: 14px;">⌂</span>
|
||||
<span style="width: 28px; height: 28px; border-radius: 50%; background: var(--accent-2); margin-right: -8px; border: 2px solid #fff; display:flex;align-items:center;justify-content:center; color: #fff; font-size: 14px;">⌂</span>
|
||||
<span style="width: 28px; height: 28px; border-radius: 50%; background: #fff; margin-right: -8px; border: 2px solid var(--accent); display:flex;align-items:center;justify-content:center; color: var(--bg); font-size: 14px;">⌂</span>
|
||||
<span style="width: 28px; height: 28px; border-radius: 50%; background: var(--accent-2); border: 2px solid #fff; display:flex;align-items:center;justify-content:center; color: #fff; font-size: 14px;">⌂</span>
|
||||
<span style="margin-left: 12px; color: #fff; font-size: 14px;">+12 properties</span>
|
||||
</div>
|
||||
<span style="width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--bg); display:flex;align-items:center;justify-content:center; font-size: 16px;">↗</span>
|
||||
</div>
|
||||
<div><div class="num" style="color: #fff; font-size: clamp(56px, 6vw, 88px);">+47%</div><div style="color: #fff; opacity: 0.92; font-size: 15px; margin-top: 4px;">5-year appreciation<br>vs. acquisition price</div></div>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-rows: 1fr 1fr; gap: clamp(16px, 2vw, 24px);">
|
||||
<div class="bh-card lavender" style="padding: clamp(20px, 2vw, 32px); aspect-ratio: auto;">
|
||||
<div></div>
|
||||
<div><div class="num" style="font-size: clamp(32px, 3vw, 48px);">6.2%</div><div style="font-size: 13px; margin-top: 4px;">net rental yield<br>per annum</div></div>
|
||||
</div>
|
||||
<div class="bh-card" style="background: var(--surface); color: #fff; padding: clamp(20px, 2vw, 32px); aspect-ratio: auto;">
|
||||
<div></div>
|
||||
<div style="display: flex; align-items: baseline; gap: 12px;"><span class="num" style="font-size: clamp(32px, 3vw, 48px);">4</span><span style="font-size: 13px; opacity: 0.8;">step payment plan<br>handover Q2 2027</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="slide center" data-screen-label="02 Portfolio">
|
||||
<div class="meta-bar"><span style="font-family: var(--font-display); font-size: 22px; text-transform: none; letter-spacing: 0; color: var(--fg); font-weight: 600;">Bluehouse</span><span>02 / 03</span></div>
|
||||
<div>
|
||||
<p class="eyebrow" style="margin-bottom: 24px;">PORTFOLIO SNAPSHOT · APR 2026</p>
|
||||
<h2 class="h-hero" style="max-width: 16ch;">47 properties across <span style="display: inline-block; background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #fff; padding: 0 24px; border-radius: 48px; line-height: 1.1;">3 cities</span>,<br>and counting.</h2>
|
||||
<p class="lead" style="margin-top: 28px; max-width: 50ch;">Sunset Ridge, Bayview Heights, and the Canal District — curated for rental yield, appreciation trajectory, and handover timeline.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="slide" data-screen-label="03 Get Started">
|
||||
<div class="meta-bar"><span style="font-family: var(--font-display); font-size: 22px; text-transform: none; letter-spacing: 0; color: var(--fg); font-weight: 600;">Bluehouse</span><span>03 / 03</span></div>
|
||||
<div style="margin-top: clamp(48px, 6vh, 96px);">
|
||||
<h2 class="h-hero" style="max-width: 14ch;">Start with one<br>property.</h2>
|
||||
<p class="lead" style="margin-top: 28px; max-width: 46ch;">Book a 30-minute call with our acquisition team. Walk away with a shortlist of three assets matched to your yield and horizon.</p>
|
||||
</div>
|
||||
<div style="margin-top: clamp(40px, 5vh, 72px); display: flex; gap: 16px; align-items: center;">
|
||||
<a style="display: inline-block; padding: 18px 36px; border-radius: 48px; background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #fff; font-weight: 600; text-decoration: none;">Book a call →</a>
|
||||
<span style="color: var(--muted); font-size: 14px;">No commitment. 30 minutes.</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- chrome (do not move) -->
|
||||
<div class="deck-progress" id="deck-progress" aria-hidden></div>
|
||||
<div class="deck-counter" id="deck-counter">1 / 3</div>
|
||||
<div class="deck-hint">← / → · scroll · swipe</div>
|
||||
|
||||
<script>
|
||||
/*
|
||||
Five hard rules for deck nav inside an iframe.
|
||||
Verified by skills/simple-deck — do not rewrite.
|
||||
|
||||
1. Detect the real scroller — body OR documentElement.
|
||||
2. Listen for scroll on BOTH window and document, capture phase.
|
||||
3. Listen for keydown on BOTH window and document, capture phase.
|
||||
4. Auto-focus body so arrow keys work without an upfront click.
|
||||
5. Never use Element.scrollIntoView — yanks host page.
|
||||
*/
|
||||
(function () {
|
||||
var slides = document.querySelectorAll('.slide');
|
||||
var counter = document.getElementById('deck-counter');
|
||||
var progress = document.getElementById('deck-progress');
|
||||
var KEY = 'od-deck-pos:' + (location.pathname || '/');
|
||||
var active = 0;
|
||||
|
||||
function scroller() {
|
||||
if (document.body.scrollWidth > document.body.clientWidth + 1) return document.body;
|
||||
return document.scrollingElement || document.documentElement;
|
||||
}
|
||||
function setActive(i) {
|
||||
active = i;
|
||||
if (counter) counter.textContent = (i + 1) + ' / ' + slides.length;
|
||||
if (progress) progress.style.width = (((i + 1) / slides.length) * 100) + '%';
|
||||
try { localStorage.setItem(KEY, String(i)); } catch (_) {}
|
||||
}
|
||||
function go(i) {
|
||||
var next = Math.max(0, Math.min(slides.length - 1, i));
|
||||
setActive(next);
|
||||
scroller().scrollTo({ left: next * window.innerWidth, behavior: 'smooth' });
|
||||
}
|
||||
function syncFromScroll() {
|
||||
var i = Math.round(scroller().scrollLeft / window.innerWidth);
|
||||
if (i !== active && i >= 0 && i < slides.length) setActive(i);
|
||||
}
|
||||
function onKey(e) {
|
||||
var t = e.target;
|
||||
if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA')) return;
|
||||
if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'PageDown') { e.preventDefault(); go(active + 1); }
|
||||
else if (e.key === 'ArrowLeft' || e.key === 'PageUp') { e.preventDefault(); go(active - 1); }
|
||||
else if (e.key === 'Home') { e.preventDefault(); go(0); }
|
||||
else if (e.key === 'End') { e.preventDefault(); go(slides.length - 1); }
|
||||
}
|
||||
|
||||
window.addEventListener('keydown', onKey, true);
|
||||
document.addEventListener('keydown', onKey, true);
|
||||
document.addEventListener('scroll', syncFromScroll, { passive: true, capture: true });
|
||||
window.addEventListener('scroll', syncFromScroll, { passive: true });
|
||||
|
||||
document.body.setAttribute('tabindex', '-1');
|
||||
document.body.style.outline = 'none';
|
||||
function focusDeck() { try { window.focus(); document.body.focus({ preventScroll: true }); } catch (_) {} }
|
||||
document.addEventListener('mousedown', focusDeck);
|
||||
window.addEventListener('load', focusDeck);
|
||||
focusDeck();
|
||||
|
||||
try {
|
||||
var saved = parseInt(localStorage.getItem(KEY) || '0', 10);
|
||||
if (!isNaN(saved) && saved >= 0 && saved < slides.length) {
|
||||
setActive(saved);
|
||||
scroller().scrollTo({ left: saved * window.innerWidth, behavior: 'instant' });
|
||||
} else {
|
||||
setActive(0);
|
||||
}
|
||||
} catch (_) { setActive(0); }
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,480 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
OD replit-deck seed.
|
||||
|
||||
Single-file horizontal-swipe HTML deck in the style of Replit Slides's
|
||||
landing-page template gallery (replit.com/slides). One deck picks ONE
|
||||
theme via `<body data-theme="...">`. All 8 themes ship as tokens below;
|
||||
never override per-slide.
|
||||
|
||||
Themes:
|
||||
helix Modern minimal · light grey + ink + electric blue
|
||||
holm Editorial serif · cream + ink + deep chestnut
|
||||
vance Gallery · black/cream bars + cream serif
|
||||
bevel Y2K editorial · black + Y2K display type
|
||||
world-dark Finance dark · deep green + mint + neon yellow
|
||||
world-mint Finance light · mint + deep green + neon yellow
|
||||
atlas Museum · black + ivory + vermilion + serif
|
||||
bluehouse Consumer · deep navy + peach/coral gradient cards
|
||||
|
||||
DO NOT rewrite the script at the bottom. It solves five iframe-specific
|
||||
bugs (real scroller, dual listeners, auto-focus, no scrollIntoView,
|
||||
position persistence). See `skills/simple-deck` for the same pattern.
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Helix — Q1 '26 Board Update</title>
|
||||
<style>
|
||||
/* ─── font stacks (system-only; no external fonts) ─────────────── */
|
||||
:root {
|
||||
--font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
|
||||
--font-sans-display: -apple-system, BlinkMacSystemFont, 'Inter Display', 'Inter', 'Segoe UI', system-ui, sans-serif;
|
||||
--font-serif: 'Iowan Old Style', 'Charter', 'Palatino', Georgia, 'Times New Roman', serif;
|
||||
--font-serif-display: 'GT Super', 'Tiempos Headline', 'Iowan Old Style', Georgia, serif;
|
||||
--font-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;
|
||||
}
|
||||
|
||||
/* ─── theme: helix (slide-1/4/5 — modern minimal) ─────────────── */
|
||||
body[data-theme="helix"] {
|
||||
--bg: #fafafa;
|
||||
--surface: #ffffff;
|
||||
--fg: #19191c;
|
||||
--muted: #6e6e73;
|
||||
--border: #e4e4e7;
|
||||
--accent: #5889fe;
|
||||
--accent-soft: color-mix(in oklch, #5889fe 14%, transparent);
|
||||
--font-display: var(--font-sans-display);
|
||||
--font-body: var(--font-sans);
|
||||
--display-weight: 600;
|
||||
--display-tracking: -0.02em;
|
||||
}
|
||||
|
||||
/* ─── theme: holm (slide-2 — editorial serif memo) ────────────── */
|
||||
body[data-theme="holm"] {
|
||||
--bg: #e4dfd7;
|
||||
--surface: #eee9e0;
|
||||
--fg: #0f0f0e;
|
||||
--muted: #7c7e84;
|
||||
--border: #c7c1b7;
|
||||
--accent: #52311d;
|
||||
--accent-soft: color-mix(in oklch, #52311d 14%, transparent);
|
||||
--font-display: var(--font-serif-display);
|
||||
--font-body: var(--font-sans);
|
||||
--display-weight: 500;
|
||||
--display-tracking: -0.015em;
|
||||
}
|
||||
|
||||
/* ─── theme: vance (slide-3/7 — gallery catalog) ──────────────── */
|
||||
body[data-theme="vance"] {
|
||||
--bg: #f1ede2;
|
||||
--surface: #e7e2d4;
|
||||
--fg: #171815;
|
||||
--muted: #6e6b62;
|
||||
--border: #d6d2c5;
|
||||
--accent: #171815;
|
||||
--accent-soft: color-mix(in oklch, #171815 8%, transparent);
|
||||
--bar: #0a0a0a; /* top/bottom gallery bar */
|
||||
--bar-fg: #f1ede2;
|
||||
--font-display: var(--font-serif-display);
|
||||
--font-body: var(--font-sans);
|
||||
--display-weight: 400;
|
||||
--display-tracking: -0.01em;
|
||||
}
|
||||
|
||||
/* ─── theme: bevel (slide-6/13 — Y2K editorial) ───────────────── */
|
||||
body[data-theme="bevel"] {
|
||||
--bg: #0d0d0b;
|
||||
--surface: #18181a;
|
||||
--fg: #eae6dd;
|
||||
--muted: #a29e95;
|
||||
--border: #2a2a28;
|
||||
--accent: #c8ff00; /* neon outline only — sparingly */
|
||||
--accent-soft: color-mix(in oklch, #c8ff00 10%, transparent);
|
||||
--font-display: 'Antonio', 'Bebas Neue', Impact, var(--font-sans-display);
|
||||
--font-body: var(--font-sans);
|
||||
--display-weight: 700;
|
||||
--display-tracking: 0;
|
||||
}
|
||||
|
||||
/* ─── theme: world-dark (slide-8/10 — finance dark) ───────────── */
|
||||
body[data-theme="world-dark"] {
|
||||
--bg: #0d3a2b;
|
||||
--surface: #124736;
|
||||
--fg: #bcd6cd;
|
||||
--muted: #789f91;
|
||||
--border: #1d4c3c;
|
||||
--accent: #e8f615;
|
||||
--accent-soft: color-mix(in oklch, #e8f615 18%, transparent);
|
||||
--font-display: var(--font-sans-display);
|
||||
--font-body: var(--font-sans);
|
||||
--display-weight: 500;
|
||||
--display-tracking: -0.015em;
|
||||
}
|
||||
|
||||
/* ─── theme: world-mint (slide-9 — finance light sibling) ─────── */
|
||||
body[data-theme="world-mint"] {
|
||||
--bg: #bcd6cd;
|
||||
--surface: #c8e0d6;
|
||||
--fg: #0d3a2b;
|
||||
--muted: #527567;
|
||||
--border: #9abbac;
|
||||
--accent: #e8f615;
|
||||
--accent-soft: color-mix(in oklch, #e8f615 22%, transparent);
|
||||
--font-display: var(--font-sans-display);
|
||||
--font-body: var(--font-sans);
|
||||
--display-weight: 500;
|
||||
--display-tracking: -0.015em;
|
||||
}
|
||||
|
||||
/* ─── theme: atlas (slide-11 — museum chapter) ────────────────── */
|
||||
body[data-theme="atlas"] {
|
||||
--bg: #111010;
|
||||
--surface: #1a1918;
|
||||
--fg: #e7e6e2;
|
||||
--muted: #827d78;
|
||||
--border: #2a2826;
|
||||
--accent: #de3f40;
|
||||
--accent-soft: color-mix(in oklch, #de3f40 14%, transparent);
|
||||
--font-display: var(--font-serif-display);
|
||||
--font-body: var(--font-sans);
|
||||
--display-weight: 500;
|
||||
--display-tracking: -0.02em;
|
||||
}
|
||||
|
||||
/* ─── theme: bluehouse (slide-12 — consumer card) ─────────────── */
|
||||
body[data-theme="bluehouse"] {
|
||||
--bg: #0b1524;
|
||||
--surface: #10203a;
|
||||
--fg: #ffffff;
|
||||
--muted: #8ea0b8;
|
||||
--border: #1a2c46;
|
||||
--accent: #fb675d; /* coral */
|
||||
--accent-2: #ff8f68; /* peach */
|
||||
--accent-soft: color-mix(in oklch, #fb675d 18%, transparent);
|
||||
--card-peach: #e0af99;
|
||||
--card-lavender: #c7cff0;
|
||||
--font-display: var(--font-sans-display);
|
||||
--font-body: var(--font-sans);
|
||||
--display-weight: 700;
|
||||
--display-tracking: -0.025em;
|
||||
}
|
||||
|
||||
/* ─── reset / base ────────────────────────────────────────────── */
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { margin: 0; height: 100%; }
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-body);
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
scroll-snap-type: x mandatory;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
body::-webkit-scrollbar { display: none; }
|
||||
p { text-wrap: pretty; margin: 0; }
|
||||
h1, h2, h3 { text-wrap: balance; margin: 0; font-weight: var(--display-weight); letter-spacing: var(--display-tracking); }
|
||||
|
||||
/* ─── slide surface ───────────────────────────────────────────── */
|
||||
.slide {
|
||||
flex: 0 0 100vw;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
scroll-snap-align: start;
|
||||
padding: clamp(48px, 6vw, 96px) clamp(56px, 7vw, 112px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.slide.center { align-items: center; justify-content: center; text-align: center; }
|
||||
|
||||
/* ─── meta bar (top thin row: brand · meta · page) ────────────── */
|
||||
.meta-bar {
|
||||
position: absolute;
|
||||
top: clamp(32px, 4vw, 56px);
|
||||
left: clamp(56px, 7vw, 112px);
|
||||
right: clamp(56px, 7vw, 112px);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
body[data-theme="vance"] .meta-bar { color: var(--bar-fg); }
|
||||
|
||||
/* ─── typography primitives ──────────────────────────────────── */
|
||||
.eyebrow {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
.eyebrow.accent { color: var(--accent); }
|
||||
.h-hero { font-family: var(--font-display); font-size: clamp(56px, 8.5vw, 128px); line-height: 1.02; }
|
||||
.h-xl { font-family: var(--font-display); font-size: clamp(40px, 5vw, 76px); line-height: 1.08; }
|
||||
.h-lg { font-family: var(--font-display); font-size: clamp(28px, 3vw, 44px); line-height: 1.14; }
|
||||
.h-md { font-family: var(--font-display); font-size: clamp(20px, 1.6vw, 24px); line-height: 1.25; }
|
||||
.lead { font-size: clamp(16px, 1.2vw, 19px); color: var(--muted); max-width: 56ch; }
|
||||
|
||||
/* Big numeric display — for kpi rows, used by helix / world / atlas */
|
||||
.num { font-family: var(--font-display); font-size: clamp(48px, 5.5vw, 84px); line-height: 1; letter-spacing: -0.03em; }
|
||||
.num-label { font-size: 15px; color: var(--muted); margin-bottom: 8px; }
|
||||
.num-delta { font-family: var(--font-mono); font-size: 13px; color: var(--accent); margin-top: 8px; letter-spacing: 0.02em; }
|
||||
|
||||
/* ─── layout primitives ──────────────────────────────────────── */
|
||||
.hstack { display: flex; gap: var(--gap, 24px); align-items: flex-start; }
|
||||
.vstack { display: flex; flex-direction: column; gap: var(--gap, 16px); }
|
||||
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); }
|
||||
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: center; }
|
||||
.grid-6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 4vw, 56px); row-gap: clamp(48px, 5vw, 80px); }
|
||||
.divider { height: 1px; background: var(--border); margin: clamp(16px, 2vw, 32px) 0; }
|
||||
|
||||
/* ─── surface cards ──────────────────────────────────────────── */
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
padding: clamp(20px, 2vw, 32px);
|
||||
}
|
||||
|
||||
/* ─── vance gallery bars ─────────────────────────────────────── */
|
||||
body[data-theme="vance"] .slide { padding-top: 0; padding-bottom: 0; }
|
||||
body[data-theme="vance"] .vance-top {
|
||||
background: var(--bar);
|
||||
color: var(--bar-fg);
|
||||
padding: clamp(32px, 4vw, 64px) clamp(56px, 7vw, 112px);
|
||||
margin-left: calc(-1 * clamp(56px, 7vw, 112px));
|
||||
margin-right: calc(-1 * clamp(56px, 7vw, 112px));
|
||||
}
|
||||
|
||||
/* ─── bevel dashed frames ────────────────────────────────────── */
|
||||
body[data-theme="bevel"] .bevel-frame {
|
||||
border: 1px dashed var(--accent);
|
||||
padding: clamp(16px, 2vw, 28px);
|
||||
position: relative;
|
||||
}
|
||||
body[data-theme="bevel"] .bevel-frame::before,
|
||||
body[data-theme="bevel"] .bevel-frame::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 8px; height: 8px;
|
||||
background: var(--accent);
|
||||
border-radius: 50%;
|
||||
}
|
||||
body[data-theme="bevel"] .bevel-frame::before { top: -4px; left: -4px; }
|
||||
body[data-theme="bevel"] .bevel-frame::after { bottom: -4px; right: -4px; }
|
||||
|
||||
/* ─── world yellow square marker ─────────────────────────────── */
|
||||
body[data-theme="world-dark"] .world-marker,
|
||||
body[data-theme="world-mint"] .world-marker {
|
||||
display: inline-block;
|
||||
width: 14px; height: 14px;
|
||||
background: var(--accent);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* ─── atlas chapter dot ──────────────────────────────────────── */
|
||||
body[data-theme="atlas"] .atlas-dot {
|
||||
display: inline-block;
|
||||
width: 10px; height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
margin-right: 12px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* ─── bluehouse gradient card ────────────────────────────────── */
|
||||
body[data-theme="bluehouse"] .bh-card {
|
||||
border-radius: 24px;
|
||||
padding: clamp(28px, 3vw, 48px);
|
||||
aspect-ratio: 4 / 3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
body[data-theme="bluehouse"] .bh-card.peach {
|
||||
background: var(--card-peach);
|
||||
color: #1a0e08;
|
||||
}
|
||||
body[data-theme="bluehouse"] .bh-card.coral {
|
||||
background: linear-gradient(135deg, var(--accent-2), var(--accent));
|
||||
color: #ffffff;
|
||||
}
|
||||
body[data-theme="bluehouse"] .bh-card.lavender {
|
||||
background: linear-gradient(180deg, var(--card-lavender), #8faad8);
|
||||
color: #0b1524;
|
||||
}
|
||||
|
||||
/* ─── deck chrome (counter, progress, hint) ──────────────────── */
|
||||
.deck-counter {
|
||||
position: fixed;
|
||||
bottom: 24px; right: 32px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
padding: 6px 12px;
|
||||
background: color-mix(in oklch, var(--bg) 92%, transparent);
|
||||
border: 1px solid var(--border);
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--muted);
|
||||
z-index: 10;
|
||||
}
|
||||
.deck-hint {
|
||||
position: fixed;
|
||||
bottom: 24px; left: 32px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
letter-spacing: 0.04em;
|
||||
z-index: 10;
|
||||
}
|
||||
.deck-progress {
|
||||
position: fixed;
|
||||
top: 0; left: 0;
|
||||
height: 2px;
|
||||
background: var(--accent);
|
||||
width: 0;
|
||||
z-index: 10;
|
||||
transition: width 0.18s ease;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body data-theme="helix">
|
||||
<!-- example: helix · illustrative content only. Numbers are synthetic. -->
|
||||
|
||||
<section class="slide center" data-screen-label="01 Cover">
|
||||
<div class="meta-bar">
|
||||
<span>HELIX · Q1 '26 BOARD</span>
|
||||
<span>01 / 05</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="eyebrow" style="margin-bottom: 28px;">QUARTERLY UPDATE · APRIL 2026</p>
|
||||
<h1 class="h-hero" style="max-width: 16ch;">Compounding on a market that finally moved.</h1>
|
||||
<p class="lead" style="margin-top: 28px;">One quarter of clean execution. Six numbers that matter. One ask.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="slide" data-screen-label="02 Operating Metrics">
|
||||
<div class="meta-bar"><span>HELIX</span><span>02 / 05</span></div>
|
||||
<h2 class="h-xl" style="margin-top: clamp(40px, 6vh, 80px); margin-bottom: clamp(40px, 5vh, 64px);">Operating Metrics</h2>
|
||||
<div class="grid-6">
|
||||
<div><div class="num-label">Annual Recurring Revenue</div><div class="num">$1.37B</div><div class="num-delta">▲ 38% YoY</div></div>
|
||||
<div><div class="num-label">Net Retention Rate</div><div class="num">128%</div><div class="num-delta">▲ 200 bps</div></div>
|
||||
<div><div class="num-label">Paying Customers</div><div class="num">42,850</div><div class="num-delta">▲ 24% YoY</div></div>
|
||||
<div><div class="num-label">Gross Margin</div><div class="num">82.4%</div><div class="num-delta">▲ 140 bps</div></div>
|
||||
<div><div class="num-label">Free Cash Flow</div><div class="num">$112M</div><div class="num-delta">▲ 55% YoY</div></div>
|
||||
<div><div class="num-label">CAC Payback</div><div class="num">11 mo</div><div class="num-delta">▼ 1 mo</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="slide" data-screen-label="03 Insight">
|
||||
<div class="meta-bar"><span>INSIGHT · WHY NOW</span><span>03 / 05</span></div>
|
||||
<div style="flex: 1; display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 4vw, 72px); align-items: center;">
|
||||
<div>
|
||||
<p class="eyebrow" style="margin-bottom: 24px;">NET RETENTION</p>
|
||||
<div class="num" style="font-size: clamp(96px, 12vw, 180px);">128%</div>
|
||||
<div class="num-delta" style="font-size: 15px;">▲ 200 bps from Q4</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="h-lg" style="max-width: 22ch;">Expansion took over from new logos as the primary growth engine this quarter.</h2>
|
||||
<p class="lead" style="margin-top: 20px;">Multi-product adoption crossed 47% of the base. The median paying customer now runs Helix in three workflows, up from two in Q4.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="slide center" data-screen-label="04 Ask">
|
||||
<div class="meta-bar"><span>HELIX · THE ASK</span><span>04 / 05</span></div>
|
||||
<div>
|
||||
<p class="eyebrow" style="margin-bottom: 28px;">BOARD APPROVAL · Q2 SPEND</p>
|
||||
<h2 class="h-hero" style="max-width: 16ch;">$38M expansion into the EU, starting with Amsterdam.</h2>
|
||||
<p class="lead" style="margin-top: 28px;">Eleven hires. Three months. First ARR booked by end of Q3.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- chrome (do not move) -->
|
||||
<div class="deck-progress" id="deck-progress" aria-hidden></div>
|
||||
<div class="deck-counter" id="deck-counter">1 / 3</div>
|
||||
<div class="deck-hint">← / → · scroll · swipe</div>
|
||||
|
||||
<script>
|
||||
/*
|
||||
Five hard rules for deck nav inside an iframe.
|
||||
Verified by skills/simple-deck — do not rewrite.
|
||||
|
||||
1. Detect the real scroller — body OR documentElement.
|
||||
2. Listen for scroll on BOTH window and document, capture phase.
|
||||
3. Listen for keydown on BOTH window and document, capture phase.
|
||||
4. Auto-focus body so arrow keys work without an upfront click.
|
||||
5. Never use Element.scrollIntoView — yanks host page.
|
||||
*/
|
||||
(function () {
|
||||
var slides = document.querySelectorAll('.slide');
|
||||
var counter = document.getElementById('deck-counter');
|
||||
var progress = document.getElementById('deck-progress');
|
||||
var KEY = 'od-deck-pos:' + (location.pathname || '/');
|
||||
var active = 0;
|
||||
|
||||
function scroller() {
|
||||
if (document.body.scrollWidth > document.body.clientWidth + 1) return document.body;
|
||||
return document.scrollingElement || document.documentElement;
|
||||
}
|
||||
function setActive(i) {
|
||||
active = i;
|
||||
if (counter) counter.textContent = (i + 1) + ' / ' + slides.length;
|
||||
if (progress) progress.style.width = (((i + 1) / slides.length) * 100) + '%';
|
||||
try { localStorage.setItem(KEY, String(i)); } catch (_) {}
|
||||
}
|
||||
function go(i) {
|
||||
var next = Math.max(0, Math.min(slides.length - 1, i));
|
||||
setActive(next);
|
||||
scroller().scrollTo({ left: next * window.innerWidth, behavior: 'smooth' });
|
||||
}
|
||||
function syncFromScroll() {
|
||||
var i = Math.round(scroller().scrollLeft / window.innerWidth);
|
||||
if (i !== active && i >= 0 && i < slides.length) setActive(i);
|
||||
}
|
||||
function onKey(e) {
|
||||
var t = e.target;
|
||||
if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA')) return;
|
||||
if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'PageDown') { e.preventDefault(); go(active + 1); }
|
||||
else if (e.key === 'ArrowLeft' || e.key === 'PageUp') { e.preventDefault(); go(active - 1); }
|
||||
else if (e.key === 'Home') { e.preventDefault(); go(0); }
|
||||
else if (e.key === 'End') { e.preventDefault(); go(slides.length - 1); }
|
||||
}
|
||||
|
||||
window.addEventListener('keydown', onKey, true);
|
||||
document.addEventListener('keydown', onKey, true);
|
||||
document.addEventListener('scroll', syncFromScroll, { passive: true, capture: true });
|
||||
window.addEventListener('scroll', syncFromScroll, { passive: true });
|
||||
|
||||
document.body.setAttribute('tabindex', '-1');
|
||||
document.body.style.outline = 'none';
|
||||
function focusDeck() { try { window.focus(); document.body.focus({ preventScroll: true }); } catch (_) {} }
|
||||
document.addEventListener('mousedown', focusDeck);
|
||||
window.addEventListener('load', focusDeck);
|
||||
focusDeck();
|
||||
|
||||
try {
|
||||
var saved = parseInt(localStorage.getItem(KEY) || '0', 10);
|
||||
if (!isNaN(saved) && saved >= 0 && saved < slides.length) {
|
||||
setActive(saved);
|
||||
scroller().scrollTo({ left: saved * window.innerWidth, behavior: 'instant' });
|
||||
} else {
|
||||
setActive(0);
|
||||
}
|
||||
} catch (_) { setActive(0); }
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,513 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
OD replit-deck seed.
|
||||
|
||||
Single-file horizontal-swipe HTML deck in the style of Replit Slides's
|
||||
landing-page template gallery (replit.com/slides). One deck picks ONE
|
||||
theme via `<body data-theme="...">`. All 8 themes ship as tokens below;
|
||||
never override per-slide.
|
||||
|
||||
Themes:
|
||||
helix Modern minimal · light grey + ink + electric blue
|
||||
holm Editorial serif · cream + ink + deep chestnut
|
||||
vance Gallery · black/cream bars + cream serif
|
||||
bevel Y2K editorial · black + Y2K display type
|
||||
world-dark Finance dark · deep green + mint + neon yellow
|
||||
world-mint Finance light · mint + deep green + neon yellow
|
||||
atlas Museum · black + ivory + vermilion + serif
|
||||
bluehouse Consumer · deep navy + peach/coral gradient cards
|
||||
|
||||
DO NOT rewrite the script at the bottom. It solves five iframe-specific
|
||||
bugs (real scroller, dual listeners, auto-focus, no scrollIntoView,
|
||||
position persistence). See `skills/simple-deck` for the same pattern.
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Holm — Series A Pre-Read</title>
|
||||
<style>
|
||||
/* ─── font stacks (system-only; no external fonts) ─────────────── */
|
||||
:root {
|
||||
--font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
|
||||
--font-sans-display: -apple-system, BlinkMacSystemFont, 'Inter Display', 'Inter', 'Segoe UI', system-ui, sans-serif;
|
||||
--font-serif: 'Iowan Old Style', 'Charter', 'Palatino', Georgia, 'Times New Roman', serif;
|
||||
--font-serif-display: 'GT Super', 'Tiempos Headline', 'Iowan Old Style', Georgia, serif;
|
||||
--font-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;
|
||||
}
|
||||
|
||||
/* ─── theme: helix (slide-1/4/5 — modern minimal) ─────────────── */
|
||||
body[data-theme="helix"] {
|
||||
--bg: #fafafa;
|
||||
--surface: #ffffff;
|
||||
--fg: #19191c;
|
||||
--muted: #6e6e73;
|
||||
--border: #e4e4e7;
|
||||
--accent: #5889fe;
|
||||
--accent-soft: color-mix(in oklch, #5889fe 14%, transparent);
|
||||
--font-display: var(--font-sans-display);
|
||||
--font-body: var(--font-sans);
|
||||
--display-weight: 600;
|
||||
--display-tracking: -0.02em;
|
||||
}
|
||||
|
||||
/* ─── theme: holm (slide-2 — editorial serif memo) ────────────── */
|
||||
body[data-theme="holm"] {
|
||||
--bg: #e4dfd7;
|
||||
--surface: #eee9e0;
|
||||
--fg: #0f0f0e;
|
||||
--muted: #7c7e84;
|
||||
--border: #c7c1b7;
|
||||
--accent: #52311d;
|
||||
--accent-soft: color-mix(in oklch, #52311d 14%, transparent);
|
||||
--font-display: var(--font-serif-display);
|
||||
--font-body: var(--font-sans);
|
||||
--display-weight: 500;
|
||||
--display-tracking: -0.015em;
|
||||
}
|
||||
|
||||
/* ─── theme: vance (slide-3/7 — gallery catalog) ──────────────── */
|
||||
body[data-theme="vance"] {
|
||||
--bg: #f1ede2;
|
||||
--surface: #e7e2d4;
|
||||
--fg: #171815;
|
||||
--muted: #6e6b62;
|
||||
--border: #d6d2c5;
|
||||
--accent: #171815;
|
||||
--accent-soft: color-mix(in oklch, #171815 8%, transparent);
|
||||
--bar: #0a0a0a; /* top/bottom gallery bar */
|
||||
--bar-fg: #f1ede2;
|
||||
--font-display: var(--font-serif-display);
|
||||
--font-body: var(--font-sans);
|
||||
--display-weight: 400;
|
||||
--display-tracking: -0.01em;
|
||||
}
|
||||
|
||||
/* ─── theme: bevel (slide-6/13 — Y2K editorial) ───────────────── */
|
||||
body[data-theme="bevel"] {
|
||||
--bg: #0d0d0b;
|
||||
--surface: #18181a;
|
||||
--fg: #eae6dd;
|
||||
--muted: #a29e95;
|
||||
--border: #2a2a28;
|
||||
--accent: #c8ff00; /* neon outline only — sparingly */
|
||||
--accent-soft: color-mix(in oklch, #c8ff00 10%, transparent);
|
||||
--font-display: 'Antonio', 'Bebas Neue', Impact, var(--font-sans-display);
|
||||
--font-body: var(--font-sans);
|
||||
--display-weight: 700;
|
||||
--display-tracking: 0;
|
||||
}
|
||||
|
||||
/* ─── theme: world-dark (slide-8/10 — finance dark) ───────────── */
|
||||
body[data-theme="world-dark"] {
|
||||
--bg: #0d3a2b;
|
||||
--surface: #124736;
|
||||
--fg: #bcd6cd;
|
||||
--muted: #789f91;
|
||||
--border: #1d4c3c;
|
||||
--accent: #e8f615;
|
||||
--accent-soft: color-mix(in oklch, #e8f615 18%, transparent);
|
||||
--font-display: var(--font-sans-display);
|
||||
--font-body: var(--font-sans);
|
||||
--display-weight: 500;
|
||||
--display-tracking: -0.015em;
|
||||
}
|
||||
|
||||
/* ─── theme: world-mint (slide-9 — finance light sibling) ─────── */
|
||||
body[data-theme="world-mint"] {
|
||||
--bg: #bcd6cd;
|
||||
--surface: #c8e0d6;
|
||||
--fg: #0d3a2b;
|
||||
--muted: #527567;
|
||||
--border: #9abbac;
|
||||
--accent: #e8f615;
|
||||
--accent-soft: color-mix(in oklch, #e8f615 22%, transparent);
|
||||
--font-display: var(--font-sans-display);
|
||||
--font-body: var(--font-sans);
|
||||
--display-weight: 500;
|
||||
--display-tracking: -0.015em;
|
||||
}
|
||||
|
||||
/* ─── theme: atlas (slide-11 — museum chapter) ────────────────── */
|
||||
body[data-theme="atlas"] {
|
||||
--bg: #111010;
|
||||
--surface: #1a1918;
|
||||
--fg: #e7e6e2;
|
||||
--muted: #827d78;
|
||||
--border: #2a2826;
|
||||
--accent: #de3f40;
|
||||
--accent-soft: color-mix(in oklch, #de3f40 14%, transparent);
|
||||
--font-display: var(--font-serif-display);
|
||||
--font-body: var(--font-sans);
|
||||
--display-weight: 500;
|
||||
--display-tracking: -0.02em;
|
||||
}
|
||||
|
||||
/* ─── theme: bluehouse (slide-12 — consumer card) ─────────────── */
|
||||
body[data-theme="bluehouse"] {
|
||||
--bg: #0b1524;
|
||||
--surface: #10203a;
|
||||
--fg: #ffffff;
|
||||
--muted: #8ea0b8;
|
||||
--border: #1a2c46;
|
||||
--accent: #fb675d; /* coral */
|
||||
--accent-2: #ff8f68; /* peach */
|
||||
--accent-soft: color-mix(in oklch, #fb675d 18%, transparent);
|
||||
--card-peach: #e0af99;
|
||||
--card-lavender: #c7cff0;
|
||||
--font-display: var(--font-sans-display);
|
||||
--font-body: var(--font-sans);
|
||||
--display-weight: 700;
|
||||
--display-tracking: -0.025em;
|
||||
}
|
||||
|
||||
/* ─── reset / base ────────────────────────────────────────────── */
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { margin: 0; height: 100%; }
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-body);
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
scroll-snap-type: x mandatory;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
body::-webkit-scrollbar { display: none; }
|
||||
p { text-wrap: pretty; margin: 0; }
|
||||
h1, h2, h3 { text-wrap: balance; margin: 0; font-weight: var(--display-weight); letter-spacing: var(--display-tracking); }
|
||||
|
||||
/* ─── slide surface ───────────────────────────────────────────── */
|
||||
.slide {
|
||||
flex: 0 0 100vw;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
scroll-snap-align: start;
|
||||
padding: clamp(48px, 6vw, 96px) clamp(56px, 7vw, 112px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.slide.center { align-items: center; justify-content: center; text-align: center; }
|
||||
|
||||
/* ─── meta bar (top thin row: brand · meta · page) ────────────── */
|
||||
.meta-bar {
|
||||
position: absolute;
|
||||
top: clamp(32px, 4vw, 56px);
|
||||
left: clamp(56px, 7vw, 112px);
|
||||
right: clamp(56px, 7vw, 112px);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
body[data-theme="vance"] .meta-bar { color: var(--bar-fg); }
|
||||
|
||||
/* ─── typography primitives ──────────────────────────────────── */
|
||||
.eyebrow {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
.eyebrow.accent { color: var(--accent); }
|
||||
.h-hero { font-family: var(--font-display); font-size: clamp(56px, 8.5vw, 128px); line-height: 1.02; }
|
||||
.h-xl { font-family: var(--font-display); font-size: clamp(40px, 5vw, 76px); line-height: 1.08; }
|
||||
.h-lg { font-family: var(--font-display); font-size: clamp(28px, 3vw, 44px); line-height: 1.14; }
|
||||
.h-md { font-family: var(--font-display); font-size: clamp(20px, 1.6vw, 24px); line-height: 1.25; }
|
||||
.lead { font-size: clamp(16px, 1.2vw, 19px); color: var(--muted); max-width: 56ch; }
|
||||
|
||||
/* Big numeric display — for kpi rows, used by helix / world / atlas */
|
||||
.num { font-family: var(--font-display); font-size: clamp(48px, 5.5vw, 84px); line-height: 1; letter-spacing: -0.03em; }
|
||||
.num-label { font-size: 15px; color: var(--muted); margin-bottom: 8px; }
|
||||
.num-delta { font-family: var(--font-mono); font-size: 13px; color: var(--accent); margin-top: 8px; letter-spacing: 0.02em; }
|
||||
|
||||
/* ─── layout primitives ──────────────────────────────────────── */
|
||||
.hstack { display: flex; gap: var(--gap, 24px); align-items: flex-start; }
|
||||
.vstack { display: flex; flex-direction: column; gap: var(--gap, 16px); }
|
||||
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); }
|
||||
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: center; }
|
||||
.grid-6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 4vw, 56px); row-gap: clamp(48px, 5vw, 80px); }
|
||||
.divider { height: 1px; background: var(--border); margin: clamp(16px, 2vw, 32px) 0; }
|
||||
|
||||
/* ─── surface cards ──────────────────────────────────────────── */
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
padding: clamp(20px, 2vw, 32px);
|
||||
}
|
||||
|
||||
/* ─── vance gallery bars ─────────────────────────────────────── */
|
||||
body[data-theme="vance"] .slide { padding-top: 0; padding-bottom: 0; }
|
||||
body[data-theme="vance"] .vance-top {
|
||||
background: var(--bar);
|
||||
color: var(--bar-fg);
|
||||
padding: clamp(32px, 4vw, 64px) clamp(56px, 7vw, 112px);
|
||||
margin-left: calc(-1 * clamp(56px, 7vw, 112px));
|
||||
margin-right: calc(-1 * clamp(56px, 7vw, 112px));
|
||||
}
|
||||
|
||||
/* ─── bevel dashed frames ────────────────────────────────────── */
|
||||
body[data-theme="bevel"] .bevel-frame {
|
||||
border: 1px dashed var(--accent);
|
||||
padding: clamp(16px, 2vw, 28px);
|
||||
position: relative;
|
||||
}
|
||||
body[data-theme="bevel"] .bevel-frame::before,
|
||||
body[data-theme="bevel"] .bevel-frame::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 8px; height: 8px;
|
||||
background: var(--accent);
|
||||
border-radius: 50%;
|
||||
}
|
||||
body[data-theme="bevel"] .bevel-frame::before { top: -4px; left: -4px; }
|
||||
body[data-theme="bevel"] .bevel-frame::after { bottom: -4px; right: -4px; }
|
||||
|
||||
/* ─── world yellow square marker ─────────────────────────────── */
|
||||
body[data-theme="world-dark"] .world-marker,
|
||||
body[data-theme="world-mint"] .world-marker {
|
||||
display: inline-block;
|
||||
width: 14px; height: 14px;
|
||||
background: var(--accent);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* ─── atlas chapter dot ──────────────────────────────────────── */
|
||||
body[data-theme="atlas"] .atlas-dot {
|
||||
display: inline-block;
|
||||
width: 10px; height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
margin-right: 12px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* ─── bluehouse gradient card ────────────────────────────────── */
|
||||
body[data-theme="bluehouse"] .bh-card {
|
||||
border-radius: 24px;
|
||||
padding: clamp(28px, 3vw, 48px);
|
||||
aspect-ratio: 4 / 3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
body[data-theme="bluehouse"] .bh-card.peach {
|
||||
background: var(--card-peach);
|
||||
color: #1a0e08;
|
||||
}
|
||||
body[data-theme="bluehouse"] .bh-card.coral {
|
||||
background: linear-gradient(135deg, var(--accent-2), var(--accent));
|
||||
color: #ffffff;
|
||||
}
|
||||
body[data-theme="bluehouse"] .bh-card.lavender {
|
||||
background: linear-gradient(180deg, var(--card-lavender), #8faad8);
|
||||
color: #0b1524;
|
||||
}
|
||||
|
||||
/* ─── deck chrome (counter, progress, hint) ──────────────────── */
|
||||
.deck-counter {
|
||||
position: fixed;
|
||||
bottom: 24px; right: 32px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
padding: 6px 12px;
|
||||
background: color-mix(in oklch, var(--bg) 92%, transparent);
|
||||
border: 1px solid var(--border);
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--muted);
|
||||
z-index: 10;
|
||||
}
|
||||
.deck-hint {
|
||||
position: fixed;
|
||||
bottom: 24px; left: 32px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
letter-spacing: 0.04em;
|
||||
z-index: 10;
|
||||
}
|
||||
.deck-progress {
|
||||
position: fixed;
|
||||
top: 0; left: 0;
|
||||
height: 2px;
|
||||
background: var(--accent);
|
||||
width: 0;
|
||||
z-index: 10;
|
||||
transition: width 0.18s ease;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body data-theme="holm">
|
||||
<!-- example: holm · illustrative content only. Numbers are synthetic. -->
|
||||
|
||||
<section class="slide" data-screen-label="01 Cover">
|
||||
<div class="meta-bar">
|
||||
<span style="font-family: var(--font-serif-display); font-size: 32px; text-transform: none; letter-spacing: 0; color: var(--accent);">Holm</span><span style="color: var(--muted);"> EST. 2024</span>
|
||||
<span>MEMO 04 / APR 2026</span>
|
||||
</div>
|
||||
<div style="margin-top: 30vh; max-width: 58vw;">
|
||||
<p class="eyebrow" style="color: var(--accent); margin-bottom: 28px;">— SERIES A — CONFIDENTIAL PRE-READ</p>
|
||||
<h1 class="h-xl" style="max-width: 18ch;">Banking and back-office for the 1.4 million lawyers who were never supposed to be alone.</h1>
|
||||
<p class="lead" style="margin-top: 28px; max-width: 50ch;">Why solo and small-firm legal is the largest unbundled fintech opportunity left in professional services.</p>
|
||||
</div>
|
||||
<div style="position: absolute; bottom: clamp(40px, 5vh, 72px); left: clamp(56px, 7vw, 112px); right: clamp(56px, 7vw, 112px); display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;">
|
||||
<span><b>NAOMI VELEZ</b> — CO-FOUNDER, CEO · <b>DANIEL LIOR</b> — CO-FOUNDER, CTO</span>
|
||||
<span>HOLM.LAW</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="slide" data-screen-label="02 The Problem">
|
||||
<div class="meta-bar">
|
||||
<span style="color: var(--accent);">02 — THE PROBLEM <span style="display: inline-block; width: 40px; height: 1px; background: var(--accent); vertical-align: middle;"></span></span>
|
||||
<span>HOLM · 02 / 03</span>
|
||||
</div>
|
||||
<div style="margin-top: 25vh; max-width: 62vw;">
|
||||
<h2 class="h-xl" style="max-width: 18ch;">The median solo lawyer sends 34% of their billable hours to a bookkeeper, a bank, and a filing service that don't talk to each other.</h2>
|
||||
</div>
|
||||
<div style="position: absolute; bottom: clamp(56px, 7vh, 96px); left: clamp(56px, 7vw, 112px); right: clamp(56px, 7vw, 112px); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 56px); padding-top: clamp(24px, 3vh, 40px); border-top: 1px solid var(--border);">
|
||||
<div><p class="eyebrow" style="margin-bottom: 8px;">MARKET SIZE</p><div class="num" style="font-size: clamp(36px, 4vw, 56px);">1.4M</div><div style="color: var(--muted); font-size: 13px; margin-top: 4px;">US solo + small-firm lawyers.</div></div>
|
||||
<div><p class="eyebrow" style="margin-bottom: 8px;">TIME LOST</p><div class="num" style="font-size: clamp(36px, 4vw, 56px); color: var(--accent);">34%</div><div style="color: var(--muted); font-size: 13px; margin-top: 4px;">Billable hours on back-office.</div></div>
|
||||
<div><p class="eyebrow" style="margin-bottom: 8px;">TAM</p><div class="num" style="font-size: clamp(36px, 4vw, 56px);">$18B</div><div style="color: var(--muted); font-size: 13px; margin-top: 4px;">Annual, US only.</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="slide" data-screen-label="03 The Ask">
|
||||
<div class="meta-bar">
|
||||
<span style="color: var(--accent);">04 — THE ASK <span style="display: inline-block; width: 40px; height: 1px; background: var(--accent); vertical-align: middle;"></span></span>
|
||||
<span>HOLM · 03 / 03</span>
|
||||
</div>
|
||||
<div style="margin-top: clamp(40px, 6vh, 80px);">
|
||||
<h2 class="h-xl" style="max-width: 22ch;">$11.4M Series A, led by Felicis. Closing 6/15.</h2>
|
||||
<p class="lead" style="margin-top: 20px;">Re-up from First Round and Cowboy. Notable angels: Patrick McKenzie, Olympia Hostler (Quaderno), Marshall Kirkpatrick.</p>
|
||||
</div>
|
||||
<div style="margin-top: clamp(32px, 4vh, 48px); display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: start;">
|
||||
<div>
|
||||
<p class="eyebrow" style="margin-bottom: 20px;">USE OF FUNDS — 24 MONTH PLAN</p>
|
||||
<div style="display: flex; flex-direction: column; gap: 16px;">
|
||||
<div style="display: grid; grid-template-columns: 60px 1fr; gap: 24px; align-items: start;">
|
||||
<span class="num" style="font-size: 28px; color: var(--accent);">52%</span>
|
||||
<div><div style="font-weight: 600;">Engineering & product</div><div style="color: var(--muted); font-size: 14px; margin-bottom: 6px;">Trust accounting, payroll, multi-state filings.</div><div style="height: 3px; background: var(--border); position: relative;"><div style="position: absolute; left: 0; top: 0; height: 100%; width: 52%; background: var(--accent);"></div></div></div>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 60px 1fr; gap: 24px; align-items: start;">
|
||||
<span class="num" style="font-size: 28px; color: var(--accent);">28%</span>
|
||||
<div><div style="font-weight: 600;">Go-to-market</div><div style="color: var(--muted); font-size: 14px; margin-bottom: 6px;">Direct + state bar partnerships in CA, TX, NY.</div><div style="height: 3px; background: var(--border); position: relative;"><div style="position: absolute; left: 0; top: 0; height: 100%; width: 28%; background: var(--accent);"></div></div></div>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 60px 1fr; gap: 24px; align-items: start;">
|
||||
<span class="num" style="font-size: 28px; color: var(--accent);">12%</span>
|
||||
<div><div style="font-weight: 600;">Compliance & licensing</div><div style="color: var(--muted); font-size: 14px; margin-bottom: 6px;">MTL, sponsor bank coverage.</div><div style="height: 3px; background: var(--border); position: relative;"><div style="position: absolute; left: 0; top: 0; height: 100%; width: 12%; background: var(--accent);"></div></div></div>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 60px 1fr; gap: 24px; align-items: start;">
|
||||
<span class="num" style="font-size: 28px; color: var(--accent);">8%</span>
|
||||
<div><div style="font-weight: 600;">Operations</div><div style="color: var(--muted); font-size: 14px; margin-bottom: 6px;">Brand, finance, ops.</div><div style="height: 3px; background: var(--border); position: relative;"><div style="position: absolute; left: 0; top: 0; height: 100%; width: 8%; background: var(--accent);"></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" style="background: var(--surface); border: 1px solid var(--border);">
|
||||
<p class="eyebrow" style="color: var(--accent); margin-bottom: 20px;">THE TEAM</p>
|
||||
<div style="display: flex; flex-direction: column; gap: 16px;">
|
||||
<div style="display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start;">
|
||||
<div style="width: 48px; height: 48px; border-radius: 50%; background: color-mix(in oklch, var(--accent) 22%, var(--surface)); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif-display); color: var(--accent); font-size: 20px;">N</div>
|
||||
<div><div style="font-weight: 600;">Naomi Velez — CEO</div><div style="color: var(--muted); font-size: 14px;">Latham & Watkins associate '14–'19. Solo practice 5 yrs. Cornell Law.</div></div>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start;">
|
||||
<div style="width: 48px; height: 48px; border-radius: 50%; background: color-mix(in oklch, var(--muted) 30%, var(--surface)); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif-display); color: var(--fg); font-size: 20px;">D</div>
|
||||
<div><div style="font-weight: 600;">Daniel Lior — CTO</div><div style="color: var(--muted); font-size: 14px;">Ledger infra at Plaid. Built ACH stack at Modern Treasury. Waterloo CS.</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="border-top: 1px solid var(--border); margin-top: 20px; padding-top: 14px;">
|
||||
<p class="eyebrow" style="margin-bottom: 6px;">DIRECT</p>
|
||||
<div style="display: flex; justify-content: space-between; font-size: 14px;"><span style="font-weight: 600;">naomi@holm.law</span><span style="color: var(--muted);">+1 (415) 555-0142</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- chrome (do not move) -->
|
||||
<div class="deck-progress" id="deck-progress" aria-hidden></div>
|
||||
<div class="deck-counter" id="deck-counter">1 / 3</div>
|
||||
<div class="deck-hint">← / → · scroll · swipe</div>
|
||||
|
||||
<script>
|
||||
/*
|
||||
Five hard rules for deck nav inside an iframe.
|
||||
Verified by skills/simple-deck — do not rewrite.
|
||||
|
||||
1. Detect the real scroller — body OR documentElement.
|
||||
2. Listen for scroll on BOTH window and document, capture phase.
|
||||
3. Listen for keydown on BOTH window and document, capture phase.
|
||||
4. Auto-focus body so arrow keys work without an upfront click.
|
||||
5. Never use Element.scrollIntoView — yanks host page.
|
||||
*/
|
||||
(function () {
|
||||
var slides = document.querySelectorAll('.slide');
|
||||
var counter = document.getElementById('deck-counter');
|
||||
var progress = document.getElementById('deck-progress');
|
||||
var KEY = 'od-deck-pos:' + (location.pathname || '/');
|
||||
var active = 0;
|
||||
|
||||
function scroller() {
|
||||
if (document.body.scrollWidth > document.body.clientWidth + 1) return document.body;
|
||||
return document.scrollingElement || document.documentElement;
|
||||
}
|
||||
function setActive(i) {
|
||||
active = i;
|
||||
if (counter) counter.textContent = (i + 1) + ' / ' + slides.length;
|
||||
if (progress) progress.style.width = (((i + 1) / slides.length) * 100) + '%';
|
||||
try { localStorage.setItem(KEY, String(i)); } catch (_) {}
|
||||
}
|
||||
function go(i) {
|
||||
var next = Math.max(0, Math.min(slides.length - 1, i));
|
||||
setActive(next);
|
||||
scroller().scrollTo({ left: next * window.innerWidth, behavior: 'smooth' });
|
||||
}
|
||||
function syncFromScroll() {
|
||||
var i = Math.round(scroller().scrollLeft / window.innerWidth);
|
||||
if (i !== active && i >= 0 && i < slides.length) setActive(i);
|
||||
}
|
||||
function onKey(e) {
|
||||
var t = e.target;
|
||||
if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA')) return;
|
||||
if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'PageDown') { e.preventDefault(); go(active + 1); }
|
||||
else if (e.key === 'ArrowLeft' || e.key === 'PageUp') { e.preventDefault(); go(active - 1); }
|
||||
else if (e.key === 'Home') { e.preventDefault(); go(0); }
|
||||
else if (e.key === 'End') { e.preventDefault(); go(slides.length - 1); }
|
||||
}
|
||||
|
||||
window.addEventListener('keydown', onKey, true);
|
||||
document.addEventListener('keydown', onKey, true);
|
||||
document.addEventListener('scroll', syncFromScroll, { passive: true, capture: true });
|
||||
window.addEventListener('scroll', syncFromScroll, { passive: true });
|
||||
|
||||
document.body.setAttribute('tabindex', '-1');
|
||||
document.body.style.outline = 'none';
|
||||
function focusDeck() { try { window.focus(); document.body.focus({ preventScroll: true }); } catch (_) {} }
|
||||
document.addEventListener('mousedown', focusDeck);
|
||||
window.addEventListener('load', focusDeck);
|
||||
focusDeck();
|
||||
|
||||
try {
|
||||
var saved = parseInt(localStorage.getItem(KEY) || '0', 10);
|
||||
if (!isNaN(saved) && saved >= 0 && saved < slides.length) {
|
||||
setActive(saved);
|
||||
scroller().scrollTo({ left: saved * window.innerWidth, behavior: 'instant' });
|
||||
} else {
|
||||
setActive(0);
|
||||
}
|
||||
} catch (_) { setActive(0); }
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,112 @@
|
||||
# Self-check · replit-deck
|
||||
|
||||
Run this list silently before emitting `<artifact>`. Anything failing at **P0** is a regression — fix it, don't ship. P1 means the deck is emittable but will feel AI-generated to a designer; fix if you have two passes left. P2 is polish.
|
||||
|
||||
Score yourself 1–5 on each block. Anything ≤ 3 means re-do that dimension.
|
||||
|
||||
---
|
||||
|
||||
## P0 — hard gates (non-negotiable)
|
||||
|
||||
### Theme lock-in
|
||||
|
||||
- [ ] `<body data-theme="…">` is set to ONE value from the enum.
|
||||
- [ ] No `style="--bg: …"` or `style="--accent: …"` on individual slides (grep confirms).
|
||||
- [ ] No `<style>` block inside a `<section>`.
|
||||
- [ ] No imported font from Google/Adobe. All fonts resolve via the theme's `--font-*` stacks.
|
||||
|
||||
```bash
|
||||
grep -nE 'style="--(bg|fg|accent|surface|border|muted)' index.html && echo FAIL
|
||||
grep -nE '<style' index.html | wc -l # expect 1
|
||||
grep -nE '@import|<link.*font' index.html && echo FAIL
|
||||
```
|
||||
|
||||
### Structural
|
||||
|
||||
- [ ] Every `<section>` has `class="slide"` (plus optional `center`).
|
||||
- [ ] Every `<section>` has a unique `data-screen-label="NN Name"`.
|
||||
- [ ] Deck chrome is present exactly once: `.deck-progress`, `.deck-counter`, `.deck-hint`.
|
||||
- [ ] The nav `<script>` is unchanged from the seed.
|
||||
|
||||
### Honesty
|
||||
|
||||
- [ ] No invented metrics. Any number displayed is from the user's brief, or labeled as illustrative.
|
||||
- [ ] Unfilled content uses `—` or a muted rectangle, not lorem or AI-made stats like "10× faster".
|
||||
- [ ] No stock SaaS emoji (🚀 📊 ✨).
|
||||
|
||||
---
|
||||
|
||||
## P1 — taste gates
|
||||
|
||||
### Typography
|
||||
|
||||
- [ ] Display face matches the theme:
|
||||
- `helix` / `world-*` / `bluehouse` → sans display, weight 600–700.
|
||||
- `holm` / `vance` / `atlas` → serif display.
|
||||
- `bevel` → Y2K italic display (Antonio / Bebas / Impact fallback).
|
||||
- [ ] Exactly ONE display family per slide. No swapping mid-slide.
|
||||
- [ ] `.lead` paragraph uses the body sans, not the display face.
|
||||
- [ ] Mono is reserved for meta-bar, eyebrow small-caps, and `.num-delta`. Not body copy.
|
||||
|
||||
### Accent restraint
|
||||
|
||||
- [ ] Accent color appears **1–2 times per slide maximum**.
|
||||
- [ ] Accent is NEVER used for:
|
||||
- body paragraph text,
|
||||
- a filled box bigger than 120×40px (bluehouse gradient cards excepted),
|
||||
- multiple adjacent elements ("accent chain").
|
||||
- [ ] In `holm` / `atlas`, accent shows up on: the final period of a title, the em-dash-prefixed eyebrow, and the progress segment. Nowhere else unless deliberate.
|
||||
|
||||
### Layout rhythm
|
||||
|
||||
- [ ] For 6+ slide decks: at least one slide is `center` and one isn't.
|
||||
- [ ] No three slides in a row look visually identical (same layout, same density).
|
||||
- [ ] For 8+ slides: include at least one "breath" slide — a giant-title divider or a one-stat hero.
|
||||
|
||||
### Theme-specific musts
|
||||
|
||||
- [ ] **helix**: every metric slide uses the `.num` primitive, not custom type.
|
||||
- [ ] **holm**: the serif appears on the headline only; meta, eyebrow, body are sans + mono.
|
||||
- [ ] **vance**: every slide has both top and bottom black bands (`.vance-top` 2×), OR is a full-bleed image slide with meta overlaid.
|
||||
- [ ] **bevel**: the Y2K display face is used for the wordmark and section titles only; body remains Inter.
|
||||
- [ ] **world-dark / world-mint**: yellow marker appears at least once, never as a body text color.
|
||||
- [ ] **atlas**: vermilion appears on ① the meta dot ② a title's final period ③ the progress segment. All three? Fine. More? Cut.
|
||||
- [ ] **bluehouse**: exactly one gradient direction per slide (135° coral→peach XOR 180° lavender→blue on one card, not both).
|
||||
|
||||
---
|
||||
|
||||
## P2 — polish
|
||||
|
||||
- [ ] `.num` values are within 3 characters of each other in width when in a `grid-6` row (so the row reads as a set).
|
||||
- [ ] `text-wrap: balance` effect is visible on 2-line headlines (verify by eye).
|
||||
- [ ] Page counter in meta-bar matches `.deck-counter` (both read "NN / NN").
|
||||
- [ ] On `holm` / `vance` / `atlas`, the body cream/ivory feels warm, not fluorescent. If it looks cold, you accidentally overrode `--bg`.
|
||||
- [ ] No CSS box-shadow except on `.bh-card` (bluehouse). Shadows elsewhere = SaaS regression.
|
||||
- [ ] `border-radius` is either 0 (helix/holm/vance/bevel/world-*/atlas) or 16–24px (bluehouse only).
|
||||
|
||||
---
|
||||
|
||||
## Five-dimension critique (silent, before emit)
|
||||
|
||||
Before writing `<artifact>`, score this deck 1–5 in each dimension. If any is **≤ 3**, fix and re-score.
|
||||
|
||||
1. **Philosophy**: Does it look like replit.com/slides's gallery, not a generic shadcn dashboard?
|
||||
2. **Hierarchy**: Is there exactly one dominant element per slide? Can you read the deck by looking at the biggest thing on each slide only?
|
||||
3. **Execution**: Is the theme rendered cleanly — type weights, spacing, accent usage all theme-consistent?
|
||||
4. **Specificity**: Does the copy belong to this project (names, numbers, dates), or could it live on any deck?
|
||||
5. **Restraint**: Are you using fewer colors / weights / icons than you could? (If yes, good. If "I used everything available," bad.)
|
||||
|
||||
Two passes is normal. Three is fine. Four means you picked the wrong theme — go back to Step 1.
|
||||
|
||||
---
|
||||
|
||||
## Emission contract
|
||||
|
||||
Stop after `</artifact>`. Do not add post-mortem commentary.
|
||||
|
||||
```
|
||||
<artifact identifier="deck-<slug>" type="text/html" title="<deck title>">
|
||||
<!doctype html>
|
||||
<html>…</html>
|
||||
</artifact>
|
||||
```
|
||||
@@ -0,0 +1,143 @@
|
||||
# Components · replit-deck
|
||||
|
||||
Small shared primitives you'll compose slides from. None of these should be edited per-slide beyond the `[REPLACE]` content slots. If you find yourself rewriting the CSS of a component, you're fighting the theme — pick a different layout instead.
|
||||
|
||||
---
|
||||
|
||||
## meta-bar
|
||||
|
||||
Top-row brand / context / page. Every slide has one.
|
||||
|
||||
```html
|
||||
<div class="meta-bar">
|
||||
<span>[REPLACE] BRAND · CONTEXT</span>
|
||||
<span>[REPLACE] NN / NN</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
- Mono, uppercase, 11px, tracked 0.1em, `--muted` color.
|
||||
- On `vance`, meta-bar sits **inside** the black top band (`.vance-top`) and gets 3 columns.
|
||||
|
||||
---
|
||||
|
||||
## eyebrow
|
||||
|
||||
Section kicker above the slide headline.
|
||||
|
||||
```html
|
||||
<p class="eyebrow">SECTION EYEBROW · OPTIONAL DATE</p>
|
||||
<p class="eyebrow accent">COLORED VARIANT</p>
|
||||
```
|
||||
|
||||
- Default: `--muted`.
|
||||
- `.eyebrow.accent` → `--accent` color. Use once per slide, sparingly.
|
||||
- On `atlas`/`holm` add a em-dash prefix: `— CHAPTER ONE …`.
|
||||
|
||||
---
|
||||
|
||||
## numeric display (`.num`, `.num-label`, `.num-delta`)
|
||||
|
||||
The single most important primitive for helix / world / atlas.
|
||||
|
||||
```html
|
||||
<div>
|
||||
<div class="num-label">Annual Recurring Revenue</div>
|
||||
<div class="num">$1.37B</div>
|
||||
<div class="num-delta">▲ 38% YoY</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
- `.num` is the display typeface, 48–84px, line-height 1, tight tracking.
|
||||
- `.num-delta` is **mono**, `--accent` color. Use `▲` / `▼` Unicode — never an emoji.
|
||||
- Don't wrap a number in a colored background. Number = chromatic anchor.
|
||||
|
||||
---
|
||||
|
||||
## bevel-frame (bevel only)
|
||||
|
||||
Dashed neon rectangle with corner dots.
|
||||
|
||||
```html
|
||||
<div class="bevel-frame">
|
||||
<!-- product photo or campaign image inside -->
|
||||
</div>
|
||||
```
|
||||
|
||||
- Already has `::before` / `::after` neon dots on diagonal corners.
|
||||
- Do NOT fill the frame with neon. Frame is 1px dashed border; fill is image or muted bg.
|
||||
|
||||
---
|
||||
|
||||
## world-marker (world-* only)
|
||||
|
||||
Small yellow square used inline next to section titles.
|
||||
|
||||
```html
|
||||
<span class="world-marker"></span>
|
||||
```
|
||||
|
||||
- 14×14px, flat color, no animation.
|
||||
- Appears at most twice on one slide.
|
||||
|
||||
---
|
||||
|
||||
## atlas-dot (atlas only)
|
||||
|
||||
Small vermilion disc used as chapter mark or list bullet.
|
||||
|
||||
```html
|
||||
<span class="atlas-dot"></span>
|
||||
```
|
||||
|
||||
- 10×10px. Smaller (6×6) variant manually sized for the inline `EXHIBIT 04.B` tag.
|
||||
|
||||
---
|
||||
|
||||
## bh-card (bluehouse only)
|
||||
|
||||
Colored card in the consumer-grid row.
|
||||
|
||||
```html
|
||||
<div class="bh-card peach">…</div>
|
||||
<div class="bh-card coral">…</div>
|
||||
<div class="bh-card lavender">…</div>
|
||||
```
|
||||
|
||||
- `peach` = flat warm sand.
|
||||
- `coral` = coral→peach 135° gradient.
|
||||
- `lavender` = cool lavender→blue 180° gradient.
|
||||
- Interior: `flex column`, `justify-content: space-between` — put icons/meta top, numbers bottom.
|
||||
- Always `border-radius: 24px`, always 4:3 aspect unless explicitly broken for layout reasons.
|
||||
|
||||
---
|
||||
|
||||
## progress + counter chrome (auto)
|
||||
|
||||
You do not author these. The seed ships with:
|
||||
|
||||
```html
|
||||
<div class="deck-progress" id="deck-progress"></div>
|
||||
<div class="deck-counter" id="deck-counter">1 / 3</div>
|
||||
<div class="deck-hint">← / → · scroll · swipe</div>
|
||||
```
|
||||
|
||||
…and the `<script>` auto-updates on scroll / key. Leave them alone.
|
||||
|
||||
---
|
||||
|
||||
## Content-type cross-reference
|
||||
|
||||
| Content you need to show | Primitive(s) |
|
||||
|---|---|
|
||||
| A single number | `.num` alone, centered |
|
||||
| A row of metrics | `.num-label` + `.num` + `.num-delta`, grid-6 |
|
||||
| A brand wordmark | plain `<span>` in meta-bar, serif display, 22-32px |
|
||||
| A section divider | centered `.h-hero` on a slide of its own (same theme — never swap `data-theme` mid-deck) |
|
||||
| A call-out stat with context | `.num` (big) + `.lead` (small) paired |
|
||||
| A pull-quote | `.h-xl` in display serif, `— Attribution` in mono small-caps |
|
||||
|
||||
---
|
||||
|
||||
## What **not** to component-ify
|
||||
|
||||
Resist creating: `.card.featured`, `.hero-v2`, `.metric-fancy`. These bloat the seed and make the deck drift toward "shadcn demo". The 10 layouts × 8 themes already compose into >50 distinct slide archetypes — that's enough.
|
||||
@@ -0,0 +1,457 @@
|
||||
# Layouts · replit-deck
|
||||
|
||||
Ten paste-ready `<section class="slide">` blocks. Each has a **theme pairing** note — some layouts only look good in specific themes. Copy the block, replace `[REPLACE]` with real copy, tag with `data-screen-label`.
|
||||
|
||||
All layouts assume `<body data-theme="…">` is already set.
|
||||
|
||||
---
|
||||
|
||||
## L01 · cover-hero (all themes)
|
||||
|
||||
Opens a deck. Huge display on top half, mono meta bar at top.
|
||||
|
||||
```html
|
||||
<section class="slide center" data-screen-label="01 Cover">
|
||||
<div class="meta-bar">
|
||||
<span>[REPLACE] BRAND · CONTEXT</span>
|
||||
<span>[REPLACE] SEASON / NO.</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="eyebrow" style="margin-bottom: 28px;">[REPLACE] Eyebrow line</p>
|
||||
<h1 class="h-hero" style="max-width: 14ch;">[REPLACE] One sharp sentence.</h1>
|
||||
<p class="lead" style="margin-top: 28px;">[REPLACE] One concrete subhead.</p>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
**Theme notes**:
|
||||
- `helix`: headline tight, muted subhead, no flourish.
|
||||
- `holm`: eyebrow in uppercase mono colored `var(--accent)`. Headline uses `--font-serif-display`.
|
||||
- `vance`: add `<div class="vance-top">` with 3-column meta instead of the plain meta-bar (see L08).
|
||||
- `bevel`: wrap headline in `<span class="h-display-y2k">…</span>` (italic Y2K face).
|
||||
- `atlas`: swap to L09 `chapter-plate` for cover.
|
||||
- `bluehouse`: use L10 `pill-headline-cards-row` — the cover IS the card row.
|
||||
|
||||
---
|
||||
|
||||
## L02 · kpi-row-6 (helix · atlas · world-*)
|
||||
|
||||
Six big numbers in 3×2 grid. Replit slide-4 / slide-5 exactly.
|
||||
|
||||
```html
|
||||
<section class="slide" data-screen-label="02 Operating Metrics">
|
||||
<div class="meta-bar">
|
||||
<span>[REPLACE] BRAND</span>
|
||||
<span>[REPLACE] 02 / NN</span>
|
||||
</div>
|
||||
<h2 class="h-xl" style="margin-top: clamp(40px, 6vh, 80px); margin-bottom: clamp(40px, 5vh, 64px);">Operating Metrics</h2>
|
||||
<div class="grid-6">
|
||||
<div>
|
||||
<div class="num-label">[REPLACE] Annual Recurring Revenue</div>
|
||||
<div class="num">$1.37B</div>
|
||||
<div class="num-delta">▲ 38% YoY</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="num-label">[REPLACE] Net Retention Rate</div>
|
||||
<div class="num">128%</div>
|
||||
<div class="num-delta">▲ 200 bps</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="num-label">[REPLACE] Paying Customers</div>
|
||||
<div class="num">42,850</div>
|
||||
<div class="num-delta">▲ 24% YoY</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="num-label">[REPLACE] Gross Margin</div>
|
||||
<div class="num">82.4%</div>
|
||||
<div class="num-delta">▲ 140 bps</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="num-label">[REPLACE] Free Cash Flow</div>
|
||||
<div class="num">$112M</div>
|
||||
<div class="num-delta">▲ 55% YoY</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="num-label">[REPLACE] CAC Payback</div>
|
||||
<div class="num">11 mo</div>
|
||||
<div class="num-delta">▼ 1 mo</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
**Theme notes**:
|
||||
- `helix`: all deltas are `var(--accent)` blue, mono family. Perfect fit.
|
||||
- `atlas`: swap `num` font-family to serif display. Delta dots → vermilion. Add hairline dividers between rows.
|
||||
- `world-dark` / `world-mint`: label color becomes `var(--accent)` yellow. Add `<span class="world-marker"></span>` before one standout label.
|
||||
|
||||
---
|
||||
|
||||
## L03 · split-hero-metric (helix)
|
||||
|
||||
One dark card (ARR) left, five line-item metrics right. Replit slide-1.
|
||||
|
||||
```html
|
||||
<section class="slide" data-screen-label="03 Metrics">
|
||||
<div class="meta-bar">
|
||||
<span>[REPLACE] Operating Metrics</span>
|
||||
<span>[REPLACE] · Helix</span>
|
||||
</div>
|
||||
<div style="margin-top: clamp(32px, 4vh, 48px); display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(32px, 4vw, 72px); height: 70vh;">
|
||||
<!-- hero card -->
|
||||
<div style="background: #0d0d0f; color: #f5f5f5; border-radius: 24px; padding: clamp(32px, 3vw, 56px); display: flex; flex-direction: column; justify-content: space-between;">
|
||||
<div>
|
||||
<div style="font-size: 15px; opacity: 0.7;">Annual Recurring Revenue</div>
|
||||
<div class="num" style="margin-top: 8px; color: #fff;">$1.37B</div>
|
||||
<div class="num-delta" style="color: var(--accent); margin-top: 12px;">▲ 38% YoY</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="height: 4px; background: rgba(255,255,255,0.12); border-radius: 2px; position: relative;">
|
||||
<div style="position: absolute; left: 0; top: 0; height: 100%; width: 55%; background: var(--accent); border-radius: 2px;"></div>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; opacity: 0.5; margin-top: 12px; letter-spacing: 0.08em;">
|
||||
<span>FY24</span><span>TARGET $1.55B</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- row metrics -->
|
||||
<div style="display: flex; flex-direction: column; justify-content: center; gap: clamp(16px, 2vh, 28px);">
|
||||
<div style="display: grid; grid-template-columns: 180px 1fr auto auto; gap: 24px; align-items: center; padding-bottom: 20px; border-bottom: 1px solid var(--border);">
|
||||
<span style="color: var(--muted);">Net Retention Rate</span>
|
||||
<div style="height: 4px; background: var(--border); border-radius: 2px; position: relative;"><div style="position: absolute; left: 0; top: 0; height: 100%; width: 68%; background: var(--accent); border-radius: 2px;"></div></div>
|
||||
<span class="num" style="font-size: 44px;">128%</span>
|
||||
<span class="num-delta">▲ 200 bps</span>
|
||||
</div>
|
||||
<!-- repeat 4× with: Paying Customers / Gross Margin / Free Cash Flow / CAC Payback -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
**Theme notes**: helix-only. Don't port to other themes — the dark card + blue relies on helix's specific ink + electric blue.
|
||||
|
||||
---
|
||||
|
||||
## L04 · memo-hero-statement (holm)
|
||||
|
||||
Replit slide-2 exactly: serif statement left, lots of breath. Team names bottom-left, domain bottom-right.
|
||||
|
||||
```html
|
||||
<section class="slide" data-screen-label="01 Cover">
|
||||
<div class="meta-bar">
|
||||
<span style="font-family: var(--font-serif-display); font-size: 32px; text-transform: none; letter-spacing: 0; color: var(--accent);">Holm</span><!-- wordmark -->
|
||||
<span>MEMO 04 / APR 2026</span>
|
||||
</div>
|
||||
<div style="margin-top: 30vh; max-width: 58vw;">
|
||||
<p class="eyebrow" style="color: var(--accent); margin-bottom: 28px;">— SERIES A — CONFIDENTIAL PRE-READ</p>
|
||||
<h1 class="h-xl" style="max-width: 18ch;">[REPLACE] Banking and back-office for the 1.4 million lawyers who were never supposed to be alone.</h1>
|
||||
<p class="lead" style="margin-top: 28px; max-width: 50ch;">[REPLACE] One-sentence thesis as the deck subtitle.</p>
|
||||
</div>
|
||||
<div style="position: absolute; bottom: clamp(40px, 5vh, 72px); left: clamp(56px, 7vw, 112px); right: clamp(56px, 7vw, 112px); display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;">
|
||||
<span><b>NAOMI VELEZ</b> — CO-FOUNDER, CEO · <b>DANIEL LIOR</b> — CO-FOUNDER, CTO</span>
|
||||
<span>HOLM.LAW</span>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## L05 · two-column-ask (holm)
|
||||
|
||||
Replit slide-5: "THE ASK" with fund allocation left + TEAM card right.
|
||||
|
||||
```html
|
||||
<section class="slide" data-screen-label="05 The Ask">
|
||||
<div class="meta-bar">
|
||||
<span>04 — THE ASK <span style="display: inline-block; width: 40px; height: 1px; background: var(--accent); vertical-align: middle;"></span></span>
|
||||
<span>HOLM · 05</span>
|
||||
</div>
|
||||
<div style="margin-top: clamp(40px, 6vh, 80px);">
|
||||
<h2 class="h-xl" style="max-width: 22ch;">[REPLACE] $11.4M Series A, led by Felicis. Closing 6/15.</h2>
|
||||
<p class="lead" style="margin-top: 20px;">[REPLACE] Re-up from First Round and Cowboy. Notable angels: Patrick McKenzie, Olympia Hostler, Marshall Kirkpatrick.</p>
|
||||
</div>
|
||||
<div style="margin-top: clamp(32px, 4vh, 56px); display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: start;">
|
||||
<div>
|
||||
<p class="eyebrow" style="margin-bottom: 24px;">USE OF FUNDS — 24 MONTH PLAN</p>
|
||||
<div class="vstack" style="--gap: 20px;">
|
||||
<!-- one row -->
|
||||
<div style="display: grid; grid-template-columns: 60px 1fr; gap: 24px; align-items: start;">
|
||||
<span class="num" style="font-size: 28px; color: var(--accent);">52%</span>
|
||||
<div>
|
||||
<div style="font-weight: 600;">Engineering & product</div>
|
||||
<div style="color: var(--muted); font-size: 14px; margin-bottom: 8px;">[REPLACE] Trust accounting, payroll, multi-state filings</div>
|
||||
<div style="height: 3px; background: var(--border); position: relative;"><div style="position: absolute; left: 0; top: 0; height: 100%; width: 52%; background: var(--accent);"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- repeat: 28% Go-to-market / 12% Compliance / 8% Operations -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" style="background: var(--surface); border: 1px solid var(--border);">
|
||||
<p class="eyebrow" style="color: var(--accent); margin-bottom: 20px;">THE TEAM</p>
|
||||
<div class="vstack" style="--gap: 20px;">
|
||||
<div style="display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start;">
|
||||
<div style="width: 48px; height: 48px; border-radius: 50%; background: color-mix(in oklch, var(--accent) 20%, var(--surface)); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif-display); color: var(--accent);">N</div>
|
||||
<div>
|
||||
<div style="font-weight: 600;">Naomi Velez — CEO</div>
|
||||
<div style="color: var(--muted); font-size: 14px;">[REPLACE] bio line</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- repeat for Daniel Lior — CTO -->
|
||||
</div>
|
||||
<div style="border-top: 1px solid var(--border); margin-top: 24px; padding-top: 16px;">
|
||||
<p class="eyebrow" style="margin-bottom: 4px;">DIRECT</p>
|
||||
<div style="display: flex; justify-content: space-between; font-size: 14px;"><span>[REPLACE] email</span><span style="color: var(--muted);">[REPLACE] phone</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## L06 · gallery-plate (vance)
|
||||
|
||||
Replit slide-3 / slide-11 (Vance Studio): black top band, artwork, black bottom band.
|
||||
|
||||
```html
|
||||
<section class="slide" data-screen-label="02 Plate 47" style="padding: 0;">
|
||||
<div class="vance-top" style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<span style="font-family: var(--font-serif-display); font-size: 22px;">VANCE STUDIO <sup style="font-size: 9px;">®</sup></span>
|
||||
<span style="font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em;">II OF V · FEATURED</span>
|
||||
<span style="font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em;">© 2026 THE ARTIST</span>
|
||||
</div>
|
||||
<div style="flex: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; align-items: stretch;">
|
||||
<div style="background: #0a0a0a; color: var(--bar-fg); padding: clamp(40px, 5vw, 80px); display: flex; flex-direction: column; justify-content: center;">
|
||||
<p class="eyebrow" style="margin-bottom: 16px;">CATALOG — PLATE 47</p>
|
||||
<h2 class="h-hero" style="font-family: var(--font-serif-display); font-weight: 400; font-style: normal;">
|
||||
Untitled<br><em style="font-family: var(--font-serif-display);">(Threshold)</em>
|
||||
</h2>
|
||||
</div>
|
||||
<div style="background: #dcdcdc; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); color: #888; font-size: 12px;">
|
||||
[REPLACE] artwork image goes here — 4:5 ratio
|
||||
</div>
|
||||
</div>
|
||||
<div class="vance-top" style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<span style="font-family: var(--font-serif-display); font-style: italic; font-size: 16px;">Untitled (Threshold), 2022. Felt, plaster, and resin on plinth. 168 × 92 × 92 cm.</span>
|
||||
<span style="font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em;">PHOTOGRAPHY — M. AOKI</span>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## L07 · campaign-cover (bevel)
|
||||
|
||||
Replit slide-13: huge Y2K display wordmark, product photo right, dashed neon frame.
|
||||
|
||||
```html
|
||||
<section class="slide" data-screen-label="01 Reflex SS26">
|
||||
<div class="meta-bar">
|
||||
<span>CAMPAIGN SS26</span>
|
||||
<span>01 / 05</span>
|
||||
</div>
|
||||
<div style="flex: 1; display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 4vw, 80px); align-items: center; margin-top: clamp(24px, 3vh, 48px);">
|
||||
<div>
|
||||
<h1 style="font-family: var(--font-display); font-weight: 700; font-style: italic; font-size: clamp(100px, 14vw, 220px); line-height: 0.9; letter-spacing: -0.01em;">reflex</h1>
|
||||
<div style="display: flex; align-items: center; gap: 16px; margin: clamp(24px, 3vh, 40px) 0;">
|
||||
<span style="width: 56px; height: 1px; background: var(--accent);"></span>
|
||||
<span class="eyebrow" style="color: var(--accent);">SHOT ON FILM</span>
|
||||
</div>
|
||||
<p class="lead" style="max-width: 38ch;">[REPLACE] Tokyo × Brooklyn. Styled by Kano Murakami. Fourteen pieces of sterling silver, scanned and forged for the collection launch.</p>
|
||||
<p class="eyebrow" style="position: absolute; bottom: clamp(40px, 5vh, 64px); left: clamp(56px, 7vw, 112px);">@BEVEL.JEWELRY</p>
|
||||
</div>
|
||||
<div class="bevel-frame" style="height: 72vh;">
|
||||
<div style="width: 100%; height: 100%; background: #222; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); color: #555; font-size: 12px;">
|
||||
[REPLACE] campaign image 4:5
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## L08 · finance-hero-grid (world-dark / world-mint)
|
||||
|
||||
Replit slide-8: title left, 3 tall photo tiles right, 3-cell stat strip bottom with yellow labels.
|
||||
|
||||
```html
|
||||
<section class="slide" data-screen-label="01 World Finance" style="padding: 0;">
|
||||
<div style="padding: clamp(48px, 6vh, 80px) clamp(56px, 7vw, 112px) 0;">
|
||||
<div class="meta-bar" style="position: static; left: 0; right: 0;">
|
||||
<span>REPORT · 2026</span>
|
||||
<span>WORLD.COM</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex: 1; display: grid; grid-template-columns: 1.1fr 1.4fr; gap: clamp(32px, 4vw, 64px); padding: clamp(24px, 3vh, 40px) clamp(56px, 7vw, 112px); align-items: center;">
|
||||
<div>
|
||||
<h1 class="h-hero" style="max-width: 12ch;">World Finance <span class="world-marker" style="margin-left: 6px;"></span><br>Report</h1>
|
||||
<p class="lead" style="margin-top: 24px; max-width: 40ch;">[REPLACE] World finance refers to the global system that manages money, investments, trade, and economic activity across countries.</p>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; height: 56vh;">
|
||||
<div style="background: #333; border-radius: 16px; position: relative; overflow: hidden;">
|
||||
<div style="position: absolute; left: 16px; bottom: 16px; color: #fff; font-weight: 600;">Health prices<br>+12.5%</div>
|
||||
</div>
|
||||
<div style="background: #444; border-radius: 16px; position: relative; overflow: hidden;">
|
||||
<div style="position: absolute; left: 16px; bottom: 16px; color: #fff; font-weight: 600;">Housing prices<br>+24%</div>
|
||||
</div>
|
||||
<div style="background: #555; border-radius: 16px; position: relative; overflow: hidden;">
|
||||
<div style="position: absolute; left: 16px; bottom: 16px; color: #fff; font-weight: 600;">Food prices<br>+18%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- bottom stat strip -->
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr 1.2fr 0.6fr; border-top: 1px solid var(--border); align-items: stretch;">
|
||||
<div style="padding: clamp(20px, 3vh, 36px) clamp(24px, 3vw, 40px); border-right: 1px solid var(--border);">
|
||||
<div style="color: var(--accent); font-weight: 600; margin-bottom: 8px;">Total debt</div>
|
||||
<div class="num" style="font-size: clamp(44px, 5vw, 72px);">$19.2 B</div>
|
||||
</div>
|
||||
<div style="padding: clamp(20px, 3vh, 36px) clamp(24px, 3vw, 40px); border-right: 1px solid var(--border);">
|
||||
<div style="color: var(--accent); font-weight: 600; margin-bottom: 8px;">S&P 500</div>
|
||||
<div class="num" style="font-size: clamp(44px, 5vw, 72px);">+ 6.23 %</div>
|
||||
</div>
|
||||
<div style="padding: clamp(20px, 3vh, 36px) clamp(24px, 3vw, 40px);">
|
||||
<div style="color: var(--accent); font-weight: 600; margin-bottom: 8px;">Top countries</div>
|
||||
<div style="display: flex; gap: 24px; align-items: baseline;">
|
||||
<div style="font-size: 28px;">USA <span style="display: inline-block; background: var(--surface); color: var(--fg); padding: 4px 12px; border-radius: 20px; font-size: 15px; margin-left: 8px;">+ 4.22 %</span></div>
|
||||
<span style="color: var(--muted);">|</span>
|
||||
<div style="font-size: 28px;">China <span style="display: inline-block; background: var(--surface); color: var(--fg); padding: 4px 12px; border-radius: 20px; font-size: 15px; margin-left: 8px;">+ 4.12 %</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: clamp(20px, 3vh, 36px); display: flex; align-items: flex-end; justify-content: flex-end; color: var(--muted); font-family: var(--font-mono); font-size: 13px;">Pg 02</div>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## L09 · chapter-plate (atlas)
|
||||
|
||||
Replit slide-11: two-column chapter opener, huge serif title left, archive photo right, data strip bottom.
|
||||
|
||||
```html
|
||||
<section class="slide" data-screen-label="01 Chapter 01">
|
||||
<div class="meta-bar">
|
||||
<span><span class="atlas-dot"></span>THE ATLAS QUARTERLY · CHAPTER 01</span>
|
||||
<span>04 / 24</span>
|
||||
</div>
|
||||
<div style="flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: center; margin-top: clamp(24px, 3vh, 40px);">
|
||||
<div>
|
||||
<p class="eyebrow" style="color: var(--accent); margin-bottom: 32px;">— CHAPTER ONE — A CENTURY OF EMPIRES</p>
|
||||
<h1 class="h-hero" style="max-width: 12ch;">[REPLACE] The Imperial<br>Age<span style="color: var(--accent);">.</span></h1>
|
||||
<p class="lead" style="margin-top: 28px; max-width: 44ch;">[REPLACE] Between the Congress of Vienna and the guns of August, the world was redrawn in the language of empire — charted, claimed, and catalogued by a handful of capitals that believed history belonged to them.</p>
|
||||
</div>
|
||||
<div style="border: 1px solid var(--border); padding: 16px; position: relative;">
|
||||
<span style="position: absolute; top: 24px; left: 28px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: #fff; text-transform: uppercase; background: rgba(0,0,0,0.4); padding: 4px 10px;">PLATE I</span>
|
||||
<span style="position: absolute; top: 24px; right: 28px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: #fff; text-transform: uppercase; background: rgba(0,0,0,0.6); padding: 4px 10px;"><span class="atlas-dot" style="width: 6px; height: 6px;"></span>EXHIBIT 04.B</span>
|
||||
<div style="aspect-ratio: 4/3; background: #222; display: flex; align-items: center; justify-content: center; color: #555; font-family: var(--font-mono); font-size: 12px;">[REPLACE] archival photograph</div>
|
||||
<div style="padding: 14px 4px 4px; color: var(--fg); font-size: 14px;">[REPLACE] The west colonnade at first light.</div>
|
||||
<div style="padding: 0 4px; color: var(--muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;">PHOTOGRAPHED C. 1887 · ARCHIVE 0341.B</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: repeat(3, 1fr) 2fr; gap: clamp(16px, 2vw, 32px); border-top: 1px solid var(--border); padding-top: clamp(16px, 2vh, 24px);">
|
||||
<div>
|
||||
<p class="eyebrow" style="margin-bottom: 8px;">PERIOD</p>
|
||||
<div style="font-family: var(--font-display); font-size: 28px;">1815–1914</div>
|
||||
<div style="color: var(--muted); font-size: 13px; margin-top: 4px;">Vienna to Sarajevo — the long peace of empire.</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="eyebrow" style="margin-bottom: 8px;">REACH</p>
|
||||
<div style="font-family: var(--font-display); font-size: 28px; color: var(--accent);">84%</div>
|
||||
<div style="color: var(--muted); font-size: 13px; margin-top: 4px;">of the globe under colonial or imperial rule by 1914.</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="eyebrow" style="margin-bottom: 8px;">CAPITALS</p>
|
||||
<div style="font-family: var(--font-display); font-size: 28px;">Six</div>
|
||||
<div style="color: var(--muted); font-size: 13px; margin-top: 4px;">London · Paris · Berlin · Vienna · St Petersburg · Constantinople.</div>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
<!-- progress strip at very bottom -->
|
||||
<div style="position: absolute; bottom: 0; left: clamp(56px, 7vw, 112px); right: clamp(56px, 7vw, 112px); display: flex; align-items: center; gap: 12px; padding-bottom: 20px;">
|
||||
<div style="flex: 1; height: 1px; background: var(--border); position: relative;">
|
||||
<div style="position: absolute; left: 0; top: -1px; height: 3px; width: 16%; background: var(--accent);"></div>
|
||||
</div>
|
||||
<span style="font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.08em;">04 / 24</span>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## L10 · pill-headline-cards-row (bluehouse)
|
||||
|
||||
Replit slide-12: bold headline w/ inline pill, 3-card row underneath.
|
||||
|
||||
```html
|
||||
<section class="slide" data-screen-label="01 Driving ROI">
|
||||
<div class="meta-bar" style="color: var(--muted);">
|
||||
<span style="display: flex; align-items: center; gap: 10px;">
|
||||
<span style="width: 36px; height: 36px; border-radius: 10px; background: var(--surface); display: flex; align-items: center; justify-content: center;">⌂</span>
|
||||
<span style="font-family: var(--font-display); font-size: 22px; text-transform: none; letter-spacing: 0; color: var(--fg);">Bluehouse</span>
|
||||
</span>
|
||||
<span>01 / NN</span>
|
||||
</div>
|
||||
<div style="margin-top: clamp(48px, 6vh, 88px);">
|
||||
<h1 class="h-hero" style="max-width: 18ch;">Driving real estate <span style="display: inline-block; background: var(--card-peach); color: var(--bg); padding: 0 24px; border-radius: 48px; line-height: 1.1;">ROI</span><br>with prime properties</h1>
|
||||
</div>
|
||||
<div style="margin-top: clamp(32px, 4vh, 56px); display: grid; grid-template-columns: 1fr 1.1fr 0.9fr; gap: clamp(16px, 2vw, 24px); flex: 1; max-height: 50vh;">
|
||||
<div class="bh-card peach">
|
||||
<div style="display: flex; justify-content: flex-end;"><span style="width: 28px; height: 28px; border-radius: 8px; background: rgba(11,21,36,0.15); display:flex;align-items:center;justify-content:center;">+</span></div>
|
||||
<div style="background: #ccc; flex: 1; margin: 8px 0 16px; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: #777; font-family: var(--font-mono); font-size: 12px;">[REPLACE] property photo</div>
|
||||
<div>
|
||||
<div class="num" style="color: var(--bg); font-size: clamp(40px, 4vw, 64px);">$2.4M</div>
|
||||
<div style="color: var(--bg); opacity: 0.7; font-size: 14px; margin-top: 4px;">asking price<br>Sunset Ridge</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bh-card coral">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<div style="display: flex;">
|
||||
<span style="width: 28px; height: 28px; border-radius: 50%; background: #fff; margin-right: -8px; border: 2px solid var(--accent); display:flex;align-items:center;justify-content:center;font-size:14px;">⌂</span>
|
||||
<span style="width: 28px; height: 28px; border-radius: 50%; background: var(--accent-2); margin-right: -8px; border: 2px solid #fff; display:flex;align-items:center;justify-content:center;font-size:14px;">⌂</span>
|
||||
<span style="width: 28px; height: 28px; border-radius: 50%; background: #fff; margin-right: -8px; border: 2px solid var(--accent); display:flex;align-items:center;justify-content:center;font-size:14px;">⌂</span>
|
||||
<span style="width: 28px; height: 28px; border-radius: 50%; background: var(--accent-2); border: 2px solid #fff; display:flex;align-items:center;justify-content:center;font-size:14px;">⌂</span>
|
||||
<span style="margin-left: 12px; color: #fff; font-size: 14px;">+12 properties</span>
|
||||
</div>
|
||||
<span style="width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--bg); display:flex;align-items:center;justify-content:center;">↗</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="num" style="color: #fff; font-size: clamp(56px, 6vw, 88px);">+47%</div>
|
||||
<div style="color: #fff; opacity: 0.9; font-size: 15px; margin-top: 4px;">5-year appreciation<br>vs. acquisition price</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-rows: 1fr 1fr; gap: clamp(16px, 2vw, 24px);">
|
||||
<div class="bh-card lavender" style="aspect-ratio: auto; padding: clamp(20px, 2vw, 32px);">
|
||||
<div></div>
|
||||
<div>
|
||||
<div class="num" style="font-size: clamp(36px, 3.5vw, 56px);">6.2%</div>
|
||||
<div style="font-size: 14px; margin-top: 4px;">net rental yield<br>per annum</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bh-card" style="background: var(--surface); color: #fff; aspect-ratio: auto; padding: clamp(20px, 2vw, 32px);">
|
||||
<div></div>
|
||||
<div>
|
||||
<div style="display: flex; align-items: baseline; gap: 12px;"><span class="num" style="font-size: clamp(36px, 3.5vw, 56px);">4</span><span style="font-size: 14px; opacity: 0.8;">step payment plan<br>handover Q2 2027</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Quick-pick cheat sheet
|
||||
|
||||
| You want a… | Use layout |
|
||||
|---|---|
|
||||
| Cover slide, neutral | L01 cover-hero |
|
||||
| Cover slide, narrative/historical | L09 chapter-plate |
|
||||
| Cover slide, fashion/product | L07 campaign-cover or L10 pill-cards-row |
|
||||
| Metrics dashboard (6 numbers) | L02 kpi-row-6 |
|
||||
| One hero stat + supporting metrics | L03 split-hero-metric (helix only) |
|
||||
| Memo-style hero statement | L04 memo-hero-statement (holm) |
|
||||
| Team + funding allocation | L05 two-column-ask (holm) |
|
||||
| Artwork / image feature | L06 gallery-plate (vance) |
|
||||
| Data-heavy analytical page | L08 finance-hero-grid (world-*) |
|
||||
| Bold statement with supporting tiles | L10 pill-headline-cards-row (bluehouse) |
|
||||
@@ -0,0 +1,326 @@
|
||||
# Themes · replit-deck
|
||||
|
||||
Eight complete visual systems captured from **replit.com/slides**. Each theme is a commitment — once the deck picks a theme, every slide inherits from that theme's token set via `<body data-theme="…">`. Do not override per-slide.
|
||||
|
||||
All hex values were sampled from the actual Replit Slides landing-page PNGs with ImageMagick on **2026-04-29** (see `SKILL.md` → *Scope & provenance*). Don't guess, don't substitute "similar" colors from memory. To add or refresh a theme, follow the procedure in *Contributing a new theme* at the bottom of this file.
|
||||
|
||||
---
|
||||
|
||||
## How to pick
|
||||
|
||||
| If the brief mentions… | Pick |
|
||||
|---|---|
|
||||
| SaaS, metrics, board, analytics, fund | `helix` |
|
||||
| law firm, memo, pre-read, confidential, investor note | `holm` |
|
||||
| art, sculpture, photography, catalog, portfolio, gallery | `vance` |
|
||||
| fashion, campaign, lookbook, SS26, jewelry, editorial | `bevel` |
|
||||
| policy, macro, finance report, world economy, dark mood | `world-dark` |
|
||||
| lighter companion deck for a world-dark topic (ESG, wellness finance, sustainability) | `world-mint` |
|
||||
| history, chapter, archive, long-form narrative, museum | `atlas` |
|
||||
| consumer product, real estate, lifestyle, playful | `bluehouse` |
|
||||
|
||||
**Never mix two themes in one deck.** `<body data-theme="…">` is the single source of truth for the whole deck — one value, no per-slide overrides. This is enforced as a P0 gate in `checklist.md`.
|
||||
|
||||
If the brief really needs two visual registers (e.g. chapters vs. data), either pick the theme that already carries that internal contrast (`bluehouse` has gradient cards; `atlas` has chapter plates vs. data strips), or split the content into two separate decks. `world-dark` and `world-mint` are stylistic siblings (same palette, inverted surface), so if you need a companion deck in a different mood they are the most coherent pair — but **still one theme per file**.
|
||||
|
||||
---
|
||||
|
||||
## helix — Modern minimal
|
||||
|
||||
Reference: replit slide-1, slide-4, slide-5.
|
||||
|
||||
```
|
||||
--bg #fafafa near-white
|
||||
--fg #19191c ink
|
||||
--muted #6e6e73
|
||||
--border #e4e4e7
|
||||
--accent #5889fe electric blue
|
||||
--display Inter Display · weight 600 · tracking -0.02em
|
||||
--body Inter
|
||||
--mono JetBrains Mono (bps / YoY labels)
|
||||
```
|
||||
|
||||
**Do**
|
||||
- Huge `.num` (`$1.37B`, `128%`, `42,850`) — dominant element on the slide, no decoration.
|
||||
- Blue shows up in `▲ 38% YoY` / `▼ 1 mo` labels only. Use the mono family for those.
|
||||
- Plenty of white space. Slides often have the content only in the top or left half.
|
||||
- Page counter bottom-right in mono (`03 / 05`).
|
||||
|
||||
**Don't**
|
||||
- No gradients. No card shadows. No rounded accent bars.
|
||||
- Never put a KPI inside a blue-filled box — blue is type-color only.
|
||||
- Don't tilt or slant.
|
||||
- Don't add emoji or icons to metric cards.
|
||||
|
||||
**Best layouts**: `kpi-row-6` · `split-hero-metric` · `big-number-center`.
|
||||
|
||||
---
|
||||
|
||||
## holm — Editorial serif memo
|
||||
|
||||
Reference: replit slide-2, slide-5.
|
||||
|
||||
```
|
||||
--bg #e4dfd7 warm cream
|
||||
--fg #0f0f0e ink
|
||||
--muted #7c7e84
|
||||
--border #c7c1b7
|
||||
--accent #52311d deep chestnut
|
||||
--display Tiempos / GT Super style serif · weight 500
|
||||
--body Inter sans (body copy + mono eyebrows)
|
||||
--mono JetBrains Mono (MEMO 04 / APR 2026 style meta)
|
||||
```
|
||||
|
||||
**Do**
|
||||
- Serif display only on the **one** hero statement per slide. Body copy stays sans.
|
||||
- Eyebrows (`SERIES A — CONFIDENTIAL PRE-READ`, `04 — THE ASK`) in **mono, uppercase, widely tracked**, colored by `--accent` or muted.
|
||||
- Large vertical rhythm. Think one sentence at 64–96px occupying the left half, the rest breathing.
|
||||
- A small chestnut wordmark ("Holm") in the top-left meta bar is the only branding.
|
||||
|
||||
**Don't**
|
||||
- No pure white surface — the cream is the identity. Don't lighten to #fff.
|
||||
- Don't use the serif for body paragraphs (it will feel like a novel, not a memo).
|
||||
- No boxed cards. A memo has edges only from whitespace.
|
||||
|
||||
**Best layouts**: `memo-hero-statement` · `two-column-ask` · `name-card-team`.
|
||||
|
||||
---
|
||||
|
||||
## vance — Gallery catalog
|
||||
|
||||
Reference: replit slide-3, slide-7.
|
||||
|
||||
```
|
||||
--bg #f1ede2 gallery cream
|
||||
--fg #171815 ink
|
||||
--bar #0a0a0a black band (top and/or bottom of slide)
|
||||
--bar-fg #f1ede2 cream-on-black
|
||||
--accent #171815 ink (there is no chromatic accent)
|
||||
--display serif display · weight 400 (italic variants encouraged)
|
||||
--body Inter
|
||||
```
|
||||
|
||||
**Do**
|
||||
- Top band holds `CATALOG — PLATE NN`, `II OF V · FEATURED`, `© 2026 THE ARTIST` — always three-column meta in ALL CAPS small tracked type on black.
|
||||
- The artwork / photo fills the middle plate, edge-to-edge.
|
||||
- Serif title (`Untitled (Threshold)`) may break across two lines with italic for the parenthetical.
|
||||
- Bottom band mirrors top: caption on left (`Untitled (Threshold), 2022. Felt, plaster, and resin…`), `PHOTOGRAPHY — NAME` on right.
|
||||
|
||||
**Don't**
|
||||
- No color accents. Chromatic noise kills the gallery tone.
|
||||
- Don't center-align text inside the bands — always left/center/right three-column.
|
||||
- Don't use the cream as a solid background without the black bands; the two-tone is the identity.
|
||||
|
||||
**Best layouts**: `gallery-plate` · `spread-image-quote` · `index-grid`.
|
||||
|
||||
---
|
||||
|
||||
## bevel — Y2K editorial
|
||||
|
||||
Reference: replit slide-6, slide-13.
|
||||
|
||||
```
|
||||
--bg #0d0d0b near-black
|
||||
--fg #eae6dd warm off-white
|
||||
--muted #a29e95
|
||||
--border #2a2a28
|
||||
--accent #c8ff00 neon / chartreuse (outline + dots only)
|
||||
--display Y2K display face — Antonio / Bebas / italic chrome sans · weight 700
|
||||
--body Inter
|
||||
```
|
||||
|
||||
**Do**
|
||||
- Display wordmark (`bevel`, `reflex`) in the chrome-y Y2K italic face — oversized, often rotated off-axis by 0 (but tracked wide).
|
||||
- Dashed neon frames around product imagery. Each frame gets `::before` / `::after` neon dots in the corners.
|
||||
- Small neon square markers (`14 PIECES`, `SS26 INDEX`) in the corners.
|
||||
- Product imagery treated as lookbook: desaturated on black, caption under image in serif-italic small caps.
|
||||
|
||||
**Don't**
|
||||
- Never fill anything with neon. Neon is outline, dot, or 1-char accent only. More than ~2% neon by area = slop.
|
||||
- Don't use photography that looks like stock SaaS. If the brief is SaaS, pick a different theme.
|
||||
- Don't use sentence case for the display wordmark.
|
||||
|
||||
**Best layouts**: `campaign-cover` · `product-triptych` · `index-grid`.
|
||||
|
||||
---
|
||||
|
||||
## world-dark — Finance dark
|
||||
|
||||
Reference: replit slide-8, slide-10.
|
||||
|
||||
```
|
||||
--bg #0d3a2b deep racing green
|
||||
--fg #bcd6cd mint text
|
||||
--muted #789f91
|
||||
--border #1d4c3c
|
||||
--accent #e8f615 neon yellow
|
||||
--display Inter Display · weight 500
|
||||
--body Inter
|
||||
```
|
||||
|
||||
**Do**
|
||||
- Big sans display for the report title (`World Finance Report`, `Monetary Policy`).
|
||||
- Neon yellow appears as:
|
||||
- a small **square marker** (14×14px) near section breaks,
|
||||
- the color of section labels (`Total debt`, `S&P 500`) above the dark green cells,
|
||||
- **never** as a fill for a text block.
|
||||
- Horizontal divider lines are 1px hairlines in `--border`.
|
||||
- Image tiles (portraits, skyline, streetscape) use tall 2:3 aspect, full-bleed, with captions in white overlaid bottom-left.
|
||||
|
||||
**Don't**
|
||||
- No icons in KPI cells.
|
||||
- Don't use the yellow for links or CTAs — it is a pointer, not a button.
|
||||
- No rounded corners on dividers or cells.
|
||||
|
||||
**Best layouts**: `finance-hero-grid` · `quadrant-policy` · `indicator-strip`.
|
||||
|
||||
---
|
||||
|
||||
## world-mint — Finance light (sibling)
|
||||
|
||||
Reference: replit slide-9.
|
||||
|
||||
Exact mirror of `world-dark`: swap `--bg` with `--fg`. Deep green becomes the type color; mint becomes the surface. Yellow accent stays identical.
|
||||
|
||||
Use `world-mint` as a **standalone deck** when the topic is gentler (ESG report, wellness finance, sustainability). If a `world-dark` deck wants a lighter companion piece for a separate audience, make it a **separate deck file** with `data-theme="world-mint"` — do not alternate slides inside one deck (see one-theme rule above).
|
||||
|
||||
**Do / Don't**: same as world-dark.
|
||||
|
||||
**Best layouts**: `section-divider-giant-title` · `quadrant-policy` · `indicator-strip`.
|
||||
|
||||
---
|
||||
|
||||
## atlas — Museum chapter
|
||||
|
||||
Reference: replit slide-11.
|
||||
|
||||
```
|
||||
--bg #111010 near-black
|
||||
--fg #e7e6e2 ivory
|
||||
--muted #827d78
|
||||
--border #2a2826
|
||||
--accent #de3f40 vermilion
|
||||
--display serif display · weight 500
|
||||
--body Inter
|
||||
```
|
||||
|
||||
**Do**
|
||||
- Vermilion dot (●) before `THE ATLAS QUARTERLY · CHAPTER 01` in the meta bar.
|
||||
- Huge serif titles split across 2 lines (`The Imperial` / `Age.`) — the period is always vermilion.
|
||||
- Three-column data strip at the bottom: `PERIOD` / `REACH` / `CAPITALS`, labels in mono all-caps small, data in sans display (one word per column if possible).
|
||||
- Right half often carries an archival photograph inside a thin ivory hairline border with `PLATE I` label top-left and `EXHIBIT 04.B` tag top-right.
|
||||
- Progress bar at the very bottom (vermilion segment + ivory hairline).
|
||||
|
||||
**Don't**
|
||||
- Never use the vermilion for body text or callouts — only for the terminal period, the meta dot, and the progress segment.
|
||||
- Don't pair the serif with a mono kicker that's larger than 12px; the mono must always feel like a catalogue footer.
|
||||
- Avoid images with modern styling (filters, gradients). Archive-grade black & white or sepia only.
|
||||
|
||||
**Best layouts**: `chapter-plate` · `timeline-strip` · `photo-with-caption`.
|
||||
|
||||
---
|
||||
|
||||
## bluehouse — Consumer card
|
||||
|
||||
Reference: replit slide-12.
|
||||
|
||||
```
|
||||
--bg #0b1524 deep navy
|
||||
--fg #ffffff
|
||||
--muted #8ea0b8
|
||||
--border #1a2c46
|
||||
--accent #fb675d coral
|
||||
--accent-2 #ff8f68 peach (for gradient)
|
||||
--card-peach #e0af99
|
||||
--card-lavender #c7cff0
|
||||
--display Inter Display · weight 700 · tracking -0.025em
|
||||
--body Inter
|
||||
```
|
||||
|
||||
**Do**
|
||||
- Big bold sans headlines (`Driving real estate ROI with prime properties`) with an inline **pill** highlighting a key noun (e.g., `ROI`) — pill uses `--card-peach` or `--card-lavender` background with navy text.
|
||||
- 3–4 cards below in a horizontal row, mixing:
|
||||
- one photo card with a subtle tint overlay,
|
||||
- one **coral→peach gradient** card with the hero stat (`+47%`),
|
||||
- one **cool lavender→blue gradient** card with a secondary stat,
|
||||
- one **navy / peach neutral** card for small numbers.
|
||||
- Cards are `border-radius: 24px`, 4:3 aspect, label top-left, number/stat bottom-left.
|
||||
- Tiny icon cluster top-left of gradient cards (e.g., property-pin chips overlapping).
|
||||
|
||||
**Don't**
|
||||
- Don't use the coral for headline text. It lives **inside** gradient cards.
|
||||
- No more than one gradient direction per slide (either 135° coral→peach OR 180° lavender→blue, not both on the same card).
|
||||
- Don't put text over the photo area that's smaller than 16px — the imagery competes.
|
||||
|
||||
**Best layouts**: `pill-headline-cards-row` · `product-gradient-grid` · `hero-photo-split`.
|
||||
|
||||
---
|
||||
|
||||
## Cross-theme don'ts (all 8)
|
||||
|
||||
- No emoji (SaaS trap).
|
||||
- No hand-drawn SVG people (AI-slop).
|
||||
- No "aggressive purple gradient" — bluehouse is the only theme allowed to gradient, and only peach/coral/lavender.
|
||||
- No rounded left-border cards with a hex-shift accent (generic AI card).
|
||||
- Invented metrics are forbidden. Use `—` or a muted rectangle when the number doesn't exist yet.
|
||||
- The display face is a **theme setting**, not a slide setting. Never mix serif and Y2K in one deck.
|
||||
|
||||
---
|
||||
|
||||
## Contributing a new theme
|
||||
|
||||
If replit.com/slides ships a new template you want reflected here, or you want to propose a fork theme, follow this procedure so colors stay honest (no memory guesses, no "looks about right").
|
||||
|
||||
### 1. Capture the source PNG
|
||||
|
||||
Screenshot the replit.com/slides card at **2× device pixel ratio** (macOS: `Cmd+Shift+4` on a HiDPI display captures 2×). Save as `reference-<theme>.png`. Crop to just the template card — exclude chrome and shadows.
|
||||
|
||||
### 2. Extract the dominant colors
|
||||
|
||||
```bash
|
||||
# Install once (macOS): brew install imagemagick
|
||||
magick reference-<theme>.png \
|
||||
-resize 200x200 \
|
||||
-colors 8 \
|
||||
-unique-colors txt:- \
|
||||
| tail -n +2 \
|
||||
| awk '{print $3}' \
|
||||
| sort -u
|
||||
```
|
||||
|
||||
This quantizes to 8 dominant colors and prints their hex values. The top few will be surface / type / border; the rare one is usually the accent.
|
||||
|
||||
For a specific point (e.g. sampling the accent from a known pixel):
|
||||
|
||||
```bash
|
||||
magick reference-<theme>.png -format "%[pixel:p{420,280}]" info:
|
||||
```
|
||||
|
||||
### 3. Map to the 6-token palette
|
||||
|
||||
Every theme uses the same 6 tokens plus a display font. Fill in:
|
||||
|
||||
```
|
||||
--bg surface (largest area, ≥ 50% coverage)
|
||||
--fg type color (largest area inside text blocks)
|
||||
--muted secondary text (~40% alpha feel)
|
||||
--border hairline dividers, 1px
|
||||
--accent chromatic accent (≤ 5% coverage — the rare color)
|
||||
--font-display sans / serif / Y2K display — see the three allowed families in template.html
|
||||
```
|
||||
|
||||
If the source uses two near-identical grays, collapse to one `--border`. Don't invent new tokens; every theme must map cleanly to this set so `data-theme` switching stays lossless.
|
||||
|
||||
### 4. Add the theme block
|
||||
|
||||
1. Append a new `body[data-theme="<name>"] { … }` block to `assets/template.html` in the theme tokens section. Mirror an existing block's token order.
|
||||
2. Add the theme row to the `od.inputs.theme.values` enum in `SKILL.md` (frontmatter).
|
||||
3. Add a "When to pick" row to the pick-table in `SKILL.md` and to the table in this file.
|
||||
4. Write a new `## <theme> — <name>` section below (palette block + Do / Don't / Best layouts), matching the shape of the other eight.
|
||||
5. Add a P1 theme-specific must to `checklist.md` (one bullet describing the theme's non-negotiable visual tell).
|
||||
6. Add a row to the reviewer screenshot-mapping table in the PR description so future contributors can reconcile drift.
|
||||
|
||||
### 5. Verify
|
||||
|
||||
- Render a one-slide example with the new theme and compare side-by-side with the source PNG. If the `--accent` looks off, re-sample with a larger `-colors` count (try `16`) and pick the one whose coverage matches the source.
|
||||
- Add an `example-<theme>.html` to `examples/` if the new theme is visually contrasting from the existing four (helix / holm / atlas / bluehouse). Otherwise a preview via `examples/README.md`'s instructions is enough.
|
||||
Reference in New Issue
Block a user