nexu-io--open-design
wehub-resource-sync
439 行
27 KiB
HTML
439 行
27 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" data-theme="y2k-chrome">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Write a KPI Decision Brief like a CFO-Ready Analytics Lead - Data, KPI & finance</title>
|
||
<style>
|
||
/* hps-y2k-chrome :: webfonts (Google Fonts @import only — no other external deps) */
|
||
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
|
||
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap');
|
||
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');
|
||
</style>
|
||
<style>
|
||
/* ============================================================
|
||
LOCKED TOKEN SHEET — theme: y2k-chrome (millennium chrome)
|
||
Ported from upstream lewislulu/html-ppt-skill
|
||
assets/themes/y2k-chrome.css. This variant is theme-locked:
|
||
do not add other themes, do not recolor these tokens.
|
||
============================================================ */
|
||
:root{
|
||
--bg:#dfe4ec; --bg-soft:#eef1f6;
|
||
--surface:rgba(255,255,255,.72); --surface-2:rgba(255,255,255,.5);
|
||
--border:rgba(120,135,170,.32); --border-strong:rgba(80,100,140,.55);
|
||
--text-1:#1a1f2e; --text-2:#4a536a; --text-3:#8590a6;
|
||
--accent:#8a5cff; --accent-2:#3ccfd8; --accent-3:#ff84c4;
|
||
--good:#1fb98c; --warn:#e8a13d; --bad:#e0445a;
|
||
--grad:linear-gradient(135deg,#b8c4d8 0%,#f5f7fb 30%,#8a9ab8 55%,#e8ecf4 80%,#6b7a95 100%);
|
||
--grad-soft:linear-gradient(135deg,#c9e4ff,#f5d6ff 50%,#d6fffa);
|
||
--chrome-text:linear-gradient(180deg,#f8faff 0%,#9aa8c4 50%,#4a5670 100%);
|
||
--radius:26px; --radius-sm:16px; --radius-lg:36px;
|
||
--shadow:0 12px 30px rgba(70,90,130,.22),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(80,100,140,.2);
|
||
--shadow-lg:0 24px 60px rgba(70,90,130,.35),inset 0 2px 0 rgba(255,255,255,.95);
|
||
--font-sans:'Space Grotesk','Inter','Noto Sans SC',sans-serif;
|
||
--font-display:'Space Grotesk','Inter',sans-serif;
|
||
--font-mono:'JetBrains Mono',SFMono-Regular,Menlo,monospace;
|
||
--letter-tight:-.03em; --letter-normal:-.01em;
|
||
--ease:cubic-bezier(.4,0,.2,1);
|
||
}
|
||
</style>
|
||
<style>
|
||
/* ============================================================
|
||
BASE + SLIDE SYSTEM — horizontal scroll-snap deck.
|
||
One <section class="slide"> = exactly one viewport screen.
|
||
Designed at 16:9 (1280×720 baseline), fluid to the viewport.
|
||
============================================================ */
|
||
*,*::before,*::after{box-sizing:border-box}
|
||
html,body{margin:0;padding:0;height:100%}
|
||
body{
|
||
/* signature: full-bleed 5-stop silver-metal canvas — never paint over it */
|
||
background:linear-gradient(135deg,#c4cfe0 0%,#f0f3f8 25%,#aab8d0 50%,#f5f7fb 75%,#b8c4d8 100%);
|
||
color:var(--text-1);font-family:var(--font-sans);
|
||
font-weight:400;line-height:1.6;letter-spacing:var(--letter-normal);
|
||
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}
|
||
img,svg,video{max-width:100%;display:block}
|
||
code,kbd,pre,samp{font-family:var(--font-mono)}
|
||
|
||
.deck{display:flex;width:100vw;height:100vh;overflow-x:auto;overflow-y:hidden;
|
||
scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
|
||
.deck::-webkit-scrollbar{display:none}
|
||
.slide{position:relative;flex:0 0 100vw;height:100vh;scroll-snap-align:start;
|
||
display:flex;flex-direction:column;justify-content:center;
|
||
padding:72px 96px;overflow:hidden}
|
||
|
||
/* ============ TYPOGRAPHY ============ */
|
||
.eyebrow{font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--text-1);margin:0}
|
||
.kicker{font-size:14px;font-weight:600;color:var(--accent);letter-spacing:.08em;text-transform:uppercase;margin:0 0 10px}
|
||
.h1{font-family:var(--font-display);font-size:clamp(44px,5.6vw,72px);line-height:1.05;font-weight:700;letter-spacing:var(--letter-tight);margin:0 0 18px}
|
||
.h2{font-family:var(--font-display);font-size:clamp(34px,4.2vw,54px);line-height:1.1;font-weight:700;letter-spacing:var(--letter-tight);margin:0 0 14px;color:var(--text-1)}
|
||
.h3{font-size:clamp(22px,2.5vw,32px);line-height:1.2;font-weight:600;margin:0 0 10px}
|
||
.h4{font-size:clamp(17px,1.7vw,22px);line-height:1.3;font-weight:600;margin:0 0 8px}
|
||
.lede{font-size:clamp(17px,1.7vw,22px);line-height:1.55;color:var(--text-1);font-weight:400;max-width:62ch;margin:0}
|
||
.dim{color:var(--text-2)}
|
||
.dim2{color:var(--text-3)}
|
||
.mono{font-family:var(--font-mono)}
|
||
/* signature: white→steel→gunmetal chrome-clipped display type */
|
||
.h1,.chrome-text,.stat-big{background:var(--chrome-text);
|
||
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
|
||
filter:drop-shadow(0 2px 3px rgba(40,55,85,.38))}
|
||
.gradient-text{background:linear-gradient(135deg,var(--accent) 0%,var(--accent) 55%,var(--accent-2) 82%,var(--accent-3) 100%);
|
||
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
|
||
filter:drop-shadow(0 1px 2px rgba(40,55,85,.25))}
|
||
|
||
/* ============ LAYOUT PRIMITIVES ============ */
|
||
.row{display:flex;gap:24px;align-items:center}
|
||
.row.wrap{flex-wrap:wrap}
|
||
.grid{display:grid;gap:24px}
|
||
.g2{grid-template-columns:repeat(2,1fr)}
|
||
.g3{grid-template-columns:repeat(3,1fr)}
|
||
.g4{grid-template-columns:repeat(4,1fr)}
|
||
.center{display:flex;align-items:center;justify-content:center;text-align:center}
|
||
.mt-s{margin-top:8px}.mt-m{margin-top:18px}.mt-l{margin-top:32px}
|
||
|
||
/* ============ CARDS / PILLS — frosted glass ============ */
|
||
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
|
||
padding:26px 28px;box-shadow:var(--shadow);position:relative;overflow:hidden;
|
||
backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%)}
|
||
.card-soft{background:var(--surface-2)}
|
||
.card-accent{border-top:3px solid var(--accent)}
|
||
.pill{display:inline-block;padding:5px 14px;border-radius:999px;font-size:12px;font-weight:500;
|
||
background:linear-gradient(180deg,#fff,#d4dcec);color:var(--text-2);border:1px solid rgba(120,135,170,.4);
|
||
box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
|
||
.pill-accent{background:linear-gradient(180deg,#f3edff,#ddd0ff);color:var(--accent);border-color:rgba(138,92,255,.35)}
|
||
.divider-accent{height:3px;width:72px;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:2px}
|
||
|
||
/* ============ Y2K DECOR — glossy orbs + chrome sparkles ============ */
|
||
.orb{position:absolute;border-radius:50%;z-index:0;pointer-events:none;
|
||
box-shadow:0 18px 40px rgba(70,90,130,.25),inset 0 -10px 24px rgba(80,100,140,.25)}
|
||
.orb::after{content:"";position:absolute;left:18%;top:10%;width:38%;height:30%;border-radius:50%;
|
||
background:radial-gradient(ellipse at center,rgba(255,255,255,.95),rgba(255,255,255,0) 70%)}
|
||
.orb-purple{background:radial-gradient(circle at 32% 28%,#d8c6ff,#8a5cff 60%,#5c34c4)}
|
||
.orb-aqua{background:radial-gradient(circle at 32% 28%,#d2fbff,#3ccfd8 60%,#1e93a3)}
|
||
.orb-pink{background:radial-gradient(circle at 32% 28%,#ffe1f1,#ff84c4 60%,#d6488f)}
|
||
.orb-chrome{background:radial-gradient(circle at 32% 28%,#ffffff,#b8c4d8 55%,#6b7a95)}
|
||
.sparkle{position:absolute;z-index:0;pointer-events:none}
|
||
.slide>*{position:relative;z-index:1}
|
||
.slide>.orb,.slide>.sparkle{position:absolute;z-index:0}
|
||
|
||
/* ============ DECK CHROME ============ */
|
||
.deck-header{position:fixed;top:24px;left:40px;right:40px;display:flex;align-items:center;justify-content:space-between;
|
||
font-size:12px;color:var(--text-2);letter-spacing:.12em;text-transform:uppercase;z-index:10;pointer-events:none}
|
||
.deck-footer{position:fixed;bottom:24px;left:40px;right:40px;display:flex;align-items:center;justify-content:space-between;
|
||
font-size:12px;color:var(--text-2);z-index:10;pointer-events:none}
|
||
.theme-chip{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;text-transform:none}
|
||
.progress-bar{position:fixed;left:0;right:0;bottom:0;height:3px;z-index:20;pointer-events:none}
|
||
.progress-bar>span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .3s var(--ease)}
|
||
|
||
/* ============ SLIDE-LOCAL COMPONENTS ============ */
|
||
.section-num{position:absolute;right:72px;bottom:56px;font-size:clamp(120px,17vw,220px);font-weight:700;line-height:.9;
|
||
letter-spacing:-.05em;z-index:0;pointer-events:none;
|
||
background:var(--chrome-text);-webkit-background-clip:text;background-clip:text;
|
||
-webkit-text-fill-color:transparent;color:transparent}
|
||
.kpi .num{font-size:clamp(34px,4vw,52px);font-weight:700;letter-spacing:var(--letter-tight);line-height:1.1}
|
||
.kpi .lbl{font-size:14px;color:var(--text-2);margin-top:6px}
|
||
.stat-big{font-size:clamp(110px,15vw,200px);font-weight:700;line-height:1;letter-spacing:-.05em;margin:0}
|
||
.bar-chart{display:flex;align-items:flex-end;gap:18px;height:240px;margin-top:40px;max-width:820px}
|
||
.bar-chart .bar{flex:1;background:linear-gradient(180deg,var(--accent-2),var(--accent));border-radius:14px 14px 6px 6px;
|
||
position:relative;min-height:18px;box-shadow:inset 0 2px 0 rgba(255,255,255,.55),0 10px 24px rgba(70,90,130,.25)}
|
||
.bar-chart .bar.alt{background:linear-gradient(180deg,#f5f7fb,#8a9ab8 70%,#6b7a95)}
|
||
.bar-chart .bar span{position:absolute;bottom:-30px;left:0;right:0;text-align:center;font-size:13px;color:var(--text-1)}
|
||
.bar-chart .bar em{position:absolute;top:-30px;left:0;right:0;text-align:center;font-size:14px;font-weight:700;font-style:normal;color:var(--text-1)}
|
||
.steps{counter-reset:step}
|
||
.steps .card{padding-top:34px}
|
||
.steps .card::before{counter-increment:step;content:counter(step,decimal-leading-zero);
|
||
font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--accent);
|
||
position:absolute;top:14px;left:28px;letter-spacing:.08em}
|
||
.quote{font-family:var(--font-display);font-size:clamp(30px,3.6vw,48px);line-height:1.3;font-weight:600;max-width:26ch;margin:0;color:var(--text-1)}
|
||
/* semantic mini-orb dots: carry good/bad color on a glossy sphere (token colors only)
|
||
so eyebrow text can stay --text-1 and keep WCAG AA contrast on frosted cards */
|
||
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:9px;vertical-align:-1px;
|
||
box-shadow:inset 0 1px 1px rgba(255,255,255,.85),inset 0 -2px 4px rgba(80,100,140,.28)}
|
||
.dot-good{background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.9),var(--good) 70%)}
|
||
.dot-bad{background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.9),var(--bad) 70%)}
|
||
.check{list-style:none;padding:0;margin:0;font-size:clamp(15px,1.5vw,19px)}
|
||
.check li{padding:9px 0 9px 34px;position:relative;color:var(--text-1)}
|
||
.check li::before{content:"";position:absolute;left:0;top:14px;width:18px;height:18px;border-radius:8px;
|
||
background:linear-gradient(180deg,#f3edff,#ddd0ff);border:1.5px solid var(--accent);
|
||
box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
|
||
.check li::after{content:"";position:absolute;left:4.5px;top:17px;width:9px;height:5px;
|
||
border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
|
||
|
||
/* ============ SPEAKER NOTES (hidden from audience) ============ */
|
||
.notes{display:none!important}
|
||
|
||
/* ============ ANIMATIONS (entry effects, upstream subset) ============ */
|
||
@keyframes kf-rise{from{opacity:0;transform:translateY(60px) scale(.97)}to{opacity:1;transform:none}}
|
||
@keyframes kf-fade-up{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
|
||
.anim-rise-in{animation:kf-rise .9s var(--ease) both}
|
||
.anim-fade-up{animation:kf-fade-up .7s var(--ease) both}
|
||
.anim-stagger-list>*{opacity:0;animation:kf-rise .65s var(--ease) both}
|
||
.anim-stagger-list>*:nth-child(1){animation-delay:.05s}
|
||
.anim-stagger-list>*:nth-child(2){animation-delay:.15s}
|
||
.anim-stagger-list>*:nth-child(3){animation-delay:.25s}
|
||
.anim-stagger-list>*:nth-child(4){animation-delay:.35s}
|
||
.anim-stagger-list>*:nth-child(5){animation-delay:.45s}
|
||
.anim-stagger-list>*:nth-child(n+6){animation-delay:.55s}
|
||
|
||
/* Reduced-motion degrade: entry effects resolve instantly, content stays visible */
|
||
@media (prefers-reduced-motion:reduce){
|
||
.anim-rise-in,.anim-fade-up,.anim-stagger-list>*{animation:none;opacity:1;transform:none}
|
||
.progress-bar>span{transition:none}
|
||
}
|
||
|
||
/* ============ PRINT ============ */
|
||
@media print{
|
||
body{overflow:visible}
|
||
.deck{display:block;width:auto;height:auto;overflow:visible}
|
||
.slide{width:100vw;height:100vh;page-break-after:always}
|
||
.deck-header,.deck-footer,.progress-bar{display:none!important}
|
||
}
|
||
</style>
|
||
<style id="od-no-pager">.deck-controls,#counter,.deck-counter{display:none!important}</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="deck-header"><span>OPEN DESIGN · KPI DECISION BRIEF</span><span class="theme-chip">y2k-chrome</span></div>
|
||
|
||
<div class="deck" id="deck">
|
||
|
||
<!-- 1 · layout: cover -->
|
||
<section class="slide" data-title="Cover">
|
||
<div class="orb orb-purple" style="width:180px;height:180px;right:14%;top:12%"></div>
|
||
<div class="orb orb-aqua" style="width:90px;height:90px;right:8%;top:46%"></div>
|
||
<div class="orb orb-pink" style="width:60px;height:60px;right:24%;bottom:18%"></div>
|
||
<svg class="sparkle" style="left:55%;top:18%" width="44" height="44" viewBox="0 0 44 44"><path d="M22 0c2 12 8 18 22 22-14 4-20 10-22 22-2-12-8-18-22-22C14 18 20 12 22 0z" fill="#f5f7fb" stroke="#8a9ab8" stroke-width="1"/></svg>
|
||
<svg class="sparkle" style="left:46%;bottom:22%" width="26" height="26" viewBox="0 0 44 44"><path d="M22 0c2 12 8 18 22 22-14 4-20 10-22 22-2-12-8-18-22-22C14 18 20 12 22 0z" fill="#ff84c4" opacity=".85"/></svg>
|
||
<p class="kicker">KPI Decision Brief · Q3 2026</p>
|
||
<h1 class="h1 anim-rise-in">ACTIVATION UP,<br>RETENTION STALLED<br>— the next move</h1>
|
||
<p class="lede">Prepared for CRO & RevOps leadership: what drove this quarter's growth, what's holding pipeline back, and the one metric we're moving next.</p>
|
||
<div class="row wrap mt-l" style="gap:8px">
|
||
<span class="pill pill-accent">Q3 2026</span>
|
||
<span class="pill">CRO review</span>
|
||
<span class="pill">RevOps</span>
|
||
<span class="pill">confidential</span>
|
||
</div>
|
||
<div class="notes">Cover slide for the KPI decision brief. Point out the chrome-clipped headline and the glossy orbs: both are signature devices of this theme.</div>
|
||
</section>
|
||
|
||
<!-- 2 · layout: toc -->
|
||
<section class="slide" data-title="Agenda">
|
||
<svg class="sparkle" style="right:10%;top:14%" width="34" height="34" viewBox="0 0 44 44"><path d="M22 0c2 12 8 18 22 22-14 4-20 10-22 22-2-12-8-18-22-22C14 18 20 12 22 0z" fill="#3ccfd8" opacity=".8"/></svg>
|
||
<p class="kicker">Agenda</p>
|
||
<h2 class="h2">Three questions, one decision</h2>
|
||
<div class="grid g3 mt-l anim-stagger-list">
|
||
<div class="card card-accent"><h4 class="h4">① Where do we stand</h4><p class="dim">The headline metric and how it moved this quarter.</p></div>
|
||
<div class="card card-accent"><h4 class="h4">② Why it moved</h4><p class="dim">The driver tree behind activation and retention — what's working, what's not.</p></div>
|
||
<div class="card card-accent"><h4 class="h4">③ What's next</h4><p class="dim">The forecast and the single move we're recommending to the board.</p></div>
|
||
</div>
|
||
<div class="notes">Standard toc layout: three frosted-glass cards with a stagger entry. Note the inset top highlight on each card — that is the glass signature.</div>
|
||
</section>
|
||
|
||
<!-- 3 · layout: section-divider -->
|
||
<section class="slide" data-title="Section · Why now">
|
||
<span class="section-num">01</span>
|
||
<div class="orb orb-chrome" style="width:120px;height:120px;left:62%;top:16%"></div>
|
||
<p class="eyebrow">Part one</p>
|
||
<h2 class="h2">The headline<br>answer</h2>
|
||
<div class="divider-accent mt-m"></div>
|
||
<div class="notes">Section divider: the oversized number is chrome-clipped, same gradient as the H1. One chrome orb keeps the page from feeling empty.</div>
|
||
</section>
|
||
|
||
<!-- 4 · layout: two-column -->
|
||
<section class="slide" data-title="Insight">
|
||
<p class="kicker">The headline answer</p>
|
||
<h2 class="h2">Day-7 activation is up 14pts — but Week-4 retention is the <span class="gradient-text">real</span> constraint on pipeline</h2>
|
||
<div class="grid g2 mt-l">
|
||
<div>
|
||
<p class="lede">Across 41,000 Q3 signups, onboarding fixes worked: more users reach Day 7 activated than ever. The bottleneck moved downstream — activated users now churn before Week 4 at nearly double last quarter's rate.</p>
|
||
<ul class="check mt-m">
|
||
<li>Day-7 activation: 38% → 52% (+14pts)</li>
|
||
<li>Week-4 retention: 61% → 54% (-7pts)</li>
|
||
<li>Net effect: qualified pipeline flat quarter over quarter</li>
|
||
<li><b>Decision:</b> shift Q4 spend from top-of-funnel to Week 2-4 retention</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card">
|
||
<p class="eyebrow" style="color:var(--accent)">VP, RevOps</p>
|
||
<h3 class="h3">“We fixed the front door. Now we're losing people in the hallway.”</h3>
|
||
<p class="dim mt-m">Activation experiments — guided setup, template gallery — landed. The next dollar belongs in the Week 2-4 habit loop, not more top-of-funnel spend.</p>
|
||
</div>
|
||
</div>
|
||
<div class="notes">Two-column layout: claim plus checklist on the left, a glass evidence card on the right. Accent colors only ever appear on small surfaces — checks, eyebrows, highlight words.</div>
|
||
</section>
|
||
|
||
<!-- 5 · layout: kpi-grid -->
|
||
<section class="slide" data-title="Community KPIs">
|
||
<p class="kicker">Metric proof</p>
|
||
<h2 class="h2">Decision: fund Week 2-4 retention — the numbers say why</h2>
|
||
<div class="grid g4 mt-l anim-stagger-list">
|
||
<div class="card kpi"><div class="num chrome-text">52%</div><div class="lbl">Day-7 activation, up from 38% last quarter</div></div>
|
||
<div class="card kpi"><div class="num chrome-text">54%</div><div class="lbl">Week-4 retention, down from 61% last quarter</div></div>
|
||
<div class="card kpi"><div class="num chrome-text">3.2x</div><div class="lbl">longer retention for accounts that import a design system by Day 14</div></div>
|
||
<div class="card kpi"><div class="num chrome-text">$186K</div><div class="lbl">pipeline at risk if Week-4 retention doesn't recover by Q4</div></div>
|
||
</div>
|
||
<div class="notes">KPI grid: four numbers, one line of context each. Display numerals are always chrome-clipped, never flat accent color.</div>
|
||
</section>
|
||
|
||
<!-- 6 · layout: stat-highlight -->
|
||
<section class="slide center" data-title="Big number">
|
||
<div class="orb orb-purple" style="width:70px;height:70px;left:16%;top:24%"></div>
|
||
<div class="orb orb-aqua" style="width:46px;height:46px;right:18%;bottom:26%"></div>
|
||
<p class="kicker">One number to remember</p>
|
||
<p class="stat-big anim-rise-in">-7pts</p>
|
||
<p class="lede mt-m" style="max-width:46ch">Week-4 retention slide since Q2 — the single metric standing between this quarter's activation win and next quarter's pipeline number.</p>
|
||
<div class="notes">Stat-highlight: one giant chrome number carries the slide. The -7pts framing lands the retention story that the recommendation is built on.</div>
|
||
</section>
|
||
|
||
<!-- 7 · layout: chart-bar (pure CSS bars — no chart library) -->
|
||
<section class="slide" data-title="Plugin chart">
|
||
<p class="kicker">Driver tree</p>
|
||
<h2 class="h2">Decision: double down on design-system adoption — the strongest retention lever we have</h2>
|
||
<div class="bar-chart">
|
||
<div class="bar alt" style="height:22%"><em>+12</em><span>Onboarding checklist</span></div>
|
||
<div class="bar" style="height:36%"><em>+19</em><span>Invited a teammate</span></div>
|
||
<div class="bar" style="height:60%"><em>+34</em><span>Imported a system</span></div>
|
||
<div class="bar" style="height:72%"><em>+41</em><span>Shipped a plugin export</span></div>
|
||
<div class="bar" style="height:100%"><em>+58</em><span>Ran an agent workflow 2x</span></div>
|
||
</div>
|
||
<p style="margin-top:56px;color:var(--text-1)">Week-4 retention lift by activation behavior, points vs. cohort baseline · chrome bar = strongest lever · n=41,000 Q3 signups.</p>
|
||
<div class="notes">Bar chart rebuilt in pure CSS: aqua-to-purple gradient bars with an inset gloss line, one chrome bar for the strongest driver. Works inside any sandboxed iframe.</div>
|
||
</section>
|
||
|
||
<!-- 8 · layout: process-steps -->
|
||
<section class="slide" data-title="Workflow">
|
||
<p class="kicker">Forecast</p>
|
||
<h2 class="h2">Three scenarios for Q4 Week-4 retention</h2>
|
||
<div class="grid g4 mt-l steps anim-stagger-list">
|
||
<div class="card"><h4 class="h4">Hold</h4><p class="dim">No new investment: retention drifts to 51%, pipeline down ~$210K vs. plan.</p></div>
|
||
<div class="card"><h4 class="h4">Nudge</h4><p class="dim">Ship the Week-2 habit nudge only: retention recovers to 58%, roughly breakeven.</p></div>
|
||
<div class="card"><h4 class="h4">Invest</h4><p class="dim">Fund the full retention sprint: retention reaches 64%, adds ~$260K qualified pipeline.</p></div>
|
||
<div class="card card-accent"><h4 class="h4">Recommended</h4><p class="dim">Invest track — ships in 6 weeks, reviewed at the Q4 mid-quarter business review.</p></div>
|
||
</div>
|
||
<div class="notes">Process steps: the counter pseudo-element numbers each card 01–04 automatically in mono accent type.</div>
|
||
</section>
|
||
|
||
<!-- 9 · layout: comparison -->
|
||
<section class="slide" data-title="Before / After">
|
||
<p class="kicker">What's working, what's not</p>
|
||
<h2 class="h2">Segment the Q3 cohort and the lever is obvious</h2>
|
||
<div class="grid g2 mt-l">
|
||
<div class="card card-soft">
|
||
<p class="eyebrow"><span class="dot dot-bad"></span>Stalled segment</p>
|
||
<h3 class="h3">Activated, never adopted a system</h3>
|
||
<ul class="check"><li>Week-4 retention: 41%</li><li>Never opens the plugin catalog</li><li>Support tickets 2.3x the cohort average</li></ul>
|
||
</div>
|
||
<div class="card card-accent">
|
||
<p class="eyebrow"><span class="dot dot-good"></span>Compounding segment</p>
|
||
<h3 class="h3">Activated + imported a system by Day 14</h3>
|
||
<ul class="check"><li>Week-4 retention: 71%</li><li>3.2x more likely to invite a teammate</li><li>Zero net-new support load</li></ul>
|
||
</div>
|
||
</div>
|
||
<div class="notes">Comparison layout: soft glass card vs accent-topped glass card; semantic red/green eyebrows mark the sides.</div>
|
||
</section>
|
||
|
||
<!-- 10 · layout: big-quote -->
|
||
<section class="slide center" data-title="Quote">
|
||
<svg class="sparkle" style="left:18%;top:20%" width="40" height="40" viewBox="0 0 44 44"><path d="M22 0c2 12 8 18 22 22-14 4-20 10-22 22-2-12-8-18-22-22C14 18 20 12 22 0z" fill="#f5f7fb" stroke="#8a9ab8" stroke-width="1"/></svg>
|
||
<svg class="sparkle" style="right:16%;bottom:24%" width="28" height="28" viewBox="0 0 44 44"><path d="M22 0c2 12 8 18 22 22-14 4-20 10-22 22-2-12-8-18-22-22C14 18 20 12 22 0z" fill="#8a5cff" opacity=".75"/></svg>
|
||
<p class="quote anim-fade-up">“Design-system import is our earliest, cleanest predictor of <span class="chrome-text">Week-4 retention</span> — it's the one signal I trust for the Q4 plan.”</p>
|
||
<p class="eyebrow mt-l">— Head of RevOps Analytics, Q3 business review</p>
|
||
<div class="notes">Big-quote layout: Space Grotesk pull quote with one chrome-clipped word, framed by two sparkles. Nothing else competes on the page.</div>
|
||
</section>
|
||
|
||
<!-- 11 · layout: thanks / cta -->
|
||
<section class="slide center" data-title="Thanks">
|
||
<div class="orb orb-pink" style="width:120px;height:120px;left:12%;top:18%"></div>
|
||
<div class="orb orb-chrome" style="width:80px;height:80px;right:12%;top:14%"></div>
|
||
<div class="orb orb-aqua" style="width:54px;height:54px;left:24%;bottom:20%"></div>
|
||
<p class="kicker">Recommended move</p>
|
||
<h1 class="h1">Fund the Week 2-4<br>retention sprint</h1>
|
||
<p class="lede mt-m" style="max-width:52ch">Ship the design-system-import prompt + habit nudge in two sprints. Target: Week-4 retention 54% → 64% by the Q4 mid-quarter review. Owner: RevOps + Growth.</p>
|
||
<div class="row wrap mt-l" style="gap:8px;justify-content:center">
|
||
<span class="pill pill-accent">$0 net-new tooling</span>
|
||
<span class="pill">6-week build</span>
|
||
<span class="pill">+$260K pipeline</span>
|
||
<span class="pill">review: Q4 MQBR</span>
|
||
</div>
|
||
<div class="notes">Closer: restate the recommendation and the review checkpoint. The orbs return to bookend the cover.</div>
|
||
</section>
|
||
|
||
</div>
|
||
|
||
<div class="deck-footer"><span>hps-y2k-chrome · MIT · based on lewislulu/html-ppt-skill</span><span id="counter">1 / 11</span></div>
|
||
<div class="progress-bar"><span id="bar"></span></div>
|
||
|
||
<script>
|
||
(function () {
|
||
var deck = document.getElementById('deck');
|
||
var slides = Array.prototype.slice.call(document.querySelectorAll('.slide'));
|
||
var counter = document.getElementById('counter');
|
||
var bar = document.getElementById('bar');
|
||
var active = 0;
|
||
var lastKeyEvent = null;
|
||
|
||
function clamp(i) { return Math.max(0, Math.min(slides.length - 1, i)); }
|
||
|
||
function paint(i) {
|
||
counter.textContent = (i + 1) + ' / ' + slides.length;
|
||
bar.style.width = (((i + 1) / slides.length) * 100) + '%';
|
||
}
|
||
|
||
// Hash routing: #/N (1-based). replaceState keeps back-button clean and
|
||
// never throws inside a srcdoc iframe thanks to the try/catch.
|
||
function setHash(i) {
|
||
try { history.replaceState(null, '', '#/' + (i + 1)); } catch (_) { /* sandboxed */ }
|
||
}
|
||
function fromHash() {
|
||
var m = (location.hash || '').match(/^#\/(\d+)/);
|
||
return m ? clamp(parseInt(m[1], 10) - 1) : 0;
|
||
}
|
||
|
||
function go(i, instant) {
|
||
active = clamp(i);
|
||
deck.scrollTo({ left: active * deck.clientWidth, behavior: instant ? 'auto' : 'smooth' });
|
||
paint(active);
|
||
setHash(active);
|
||
}
|
||
|
||
function syncFromScroll() {
|
||
var i = Math.round(deck.scrollLeft / deck.clientWidth);
|
||
if (i !== active && i >= 0 && i < slides.length) { active = i; paint(i); setHash(i); }
|
||
}
|
||
|
||
function onKey(e) {
|
||
if (e === lastKeyEvent) return; // dedupe: same Event passes both listeners
|
||
lastKeyEvent = 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); }
|
||
}
|
||
|
||
// Listen on both window and document in capture phase so keys work no
|
||
// matter which element holds focus inside a host iframe.
|
||
window.addEventListener('keydown', onKey, true);
|
||
document.addEventListener('keydown', onKey, true);
|
||
deck.addEventListener('scroll', function () { window.requestAnimationFrame(syncFromScroll); }, { passive: true });
|
||
window.addEventListener('hashchange', function () { go(fromHash()); });
|
||
window.addEventListener('resize', function () { go(active, true); });
|
||
|
||
// Auto-focus so arrow keys work without a click.
|
||
document.body.setAttribute('tabindex', '-1');
|
||
document.body.style.outline = 'none';
|
||
function focusDeck() {
|
||
try { window.focus(); document.body.focus({ preventScroll: true }); } catch (_) { /* sandboxed */ }
|
||
}
|
||
document.addEventListener('mousedown', focusDeck);
|
||
window.addEventListener('load', focusDeck);
|
||
|
||
go(fromHash(), true);
|
||
paint(active);
|
||
focusDeck();
|
||
})();
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|