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,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>
|
||||
Reference in New Issue
Block a user