/* ============================================================================
KudoKids Partner Deck — shared design system (deck.css)
----------------------------------------------------------------------------
ONE stylesheet for every partner leave-behind under public/decks/*.html.
A persona deck is CONTENT ONLY: it links this file + deck.js and builds
slides from the slot classes below. It should need ZERO custom CSS.
FONTS — paste this ONE block into each deck's (Plus Jakarta Sans for
headings, Instrument Sans for body — NOT Inter):
PALETTE — the UI/product palette ONLY (brand-visual-guide.md §3 +
DECK_GUARDRAILS §4): white slides on a soft-indigo field, ink #0F172A text,
indigo brand + ONE orange accent, gold reserved strictly for Kudo-Coin
moments. A deck page is NEVER styled cosmic — the cosmic purple→magenta
register is for marketing IMAGERY only and may appear only as a composited
image inside a frame, never as slide or field styling. Decks print to PDF,
so every slide (cover and CTA included) stays light.
CHROME IMMUNITY — .runner / .folio are direct children of .slide and are
NEVER matched by a content rule. All content lives inside .slide > .content,
and the entrance stagger targets `.slide.active > .content > *` — so no
`.slide > *` rule can ever override the chrome's absolute positioning
(that regression is why content is wrapped; do not un-wrap it).
========================================================================== */
:root {
/* fields & surfaces */
--bg: #ffffff;
--soft: #f8fafc;
--field: #f6f5ff; /* stage field behind the slides (soft indigo tint) */
/* ink */
--ink: #0f172a;
--ink-2: #475569; /* secondary text */
--ink-3: #64748b; /* muted text */
/* brand */
--indigo: #4f46e5;
--indigo-light: #818cf8;
--indigo-tint: #eef2ff;
--orange: #f97316; /* single accent that pops */
--orange-tint: #fff7ed;
--orange-line: #fed7aa;
--cyan: #06b6d4;
--purple: #7c3aed;
/* kudo-coin moment only */
--gold: #92400e;
--gold-light: #fef3c7;
--gold-line: #fcd9a8;
/* signature gradient (globals.css .gradient-primary) */
--grad-brand: linear-gradient(135deg, #4f46e5, #7c3aed);
/* lines */
--border: #e2e8f0;
--border-soft: #f1f5f9;
/* shape + depth */
--radius: 24px;
--radius-md: 16px;
--radius-sm: 12px;
--shadow-card: 0 1px 3px rgba(15, 23, 42, 0.08);
--shadow-lift: 0 20px 40px -24px rgba(15, 23, 42, 0.28);
--shadow-slide:
0 1px 0 rgba(255, 255, 255, 0.9) inset,
0 30px 70px -30px rgba(15, 23, 42, 0.26),
0 10px 26px -16px rgba(15, 23, 42, 0.14);
/* type */
--font-head: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--font-body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
* { box-sizing: border-box; }
html,
body {
margin: 0;
padding: 0;
/* soft-indigo field: white slides read clean and print light */
background: var(--field);
color: var(--ink);
font-family: var(--font-body);
font-size: 18px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
height: 100vh;
width: 100vw;
overflow: hidden;
}
img { max-width: 100%; }
/* ============================ STAGE & CANVAS ============================== */
.stage {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
/* Fixed 1280x720 canvas. deck.js positions (top/left 50%) and scales each
slide with a transform; here we only declare the design box + look. */
.slide {
position: absolute;
top: 50%;
left: 50%;
width: 1280px;
height: 720px;
transform-origin: center center;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-slide);
overflow: hidden;
display: none;
}
.slide.active { display: block; }
/* ---- content wrapper: the ONLY thing content rules ever reach ---- */
.slide > .content {
position: absolute;
inset: 0;
padding: 80px 68px 66px; /* top clears .runner, bottom clears .folio */
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 18px;
}
.slide > .content.center { justify-content: center; }
.slide > .content.tight { gap: 12px; }
/* anchor a slide's closing element (pricing card, coin card, lock-row) to
the bottom of the safe area — header stays top-set, the close fills the
canvas instead of leaving a dead bottom third */
.slide > .content > .push-end { margin-top: auto; }
/* Content children never shrink in the column. */
.slide > .content > * { flex: 0 0 auto; }
/* Full-bleed block slots get an explicit width. In a fixed-height column flex,
Chromium sometimes sizes an auto-width block child from its min-content and
collapses it (past bug: the coin card wrapped one word per line and spilled
over the folio). A definite cross-size (width:100%) makes the browser resolve
the block's height correctly, so it never collapses — regardless of nesting
(direct child, .col, or grid track, where 100% just means the track width).
max-width caps still apply, so headings/ledes keep their measure. */
.slide .card,
.slide .steps,
.slide .grid,
.slide .faq,
.slide .pass-along,
.slide .split-64,
.slide .split-55,
.slide .deck-title,
.slide h2,
.slide .lede,
.slide .disclaim { width: 100%; }
/* ============================== CHROME =================================== */
/* Direct children of .slide. Immune to content rules by construction; the
!important belt below re-asserts them even if a future rule misfires. */
.slide > .runner,
.slide > .folio {
position: absolute !important;
left: 68px;
right: 68px;
z-index: 5;
opacity: 1 !important;
animation: none !important;
transform: none !important;
}
.slide > .runner {
top: 30px;
display: flex;
align-items: center;
justify-content: space-between;
}
.runner img.logo {
width: 128px; /* trimmed horizontal wordmark (~19px tall) — readable */
height: auto;
display: block;
}
.runner .meta {
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--ink-3);
}
.slide > .folio {
bottom: 26px;
display: flex;
align-items: baseline;
justify-content: space-between;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.05em;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.folio .num { color: var(--indigo); }
/* ======================= ENTRANCE (stagger) ============================= */
/* Scoped to content grandchildren ONLY — never the slide's direct children. */
.slide.active > .content > * {
opacity: 0;
animation: rise 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.slide.active > .content > *:nth-child(1) { animation-delay: 0.04s; }
.slide.active > .content > *:nth-child(2) { animation-delay: 0.10s; }
.slide.active > .content > *:nth-child(3) { animation-delay: 0.16s; }
.slide.active > .content > *:nth-child(4) { animation-delay: 0.22s; }
.slide.active > .content > *:nth-child(5) { animation-delay: 0.28s; }
.slide.active > .content > *:nth-child(6) { animation-delay: 0.34s; }
.slide.active > .content > *:nth-child(7) { animation-delay: 0.40s; }
.slide.active > .content > *:nth-child(8) { animation-delay: 0.46s; }
@keyframes rise {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.slide.active > .content > * {
opacity: 1;
animation: none;
}
.companion { animation: none !important; }
.slide.active .cast img { opacity: 1 !important; animation: none !important; }
}
/* ============================ TYPOGRAPHY ================================= */
.eyebrow {
font-family: var(--font-body);
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--indigo);
margin: 0;
display: inline-flex;
align-items: center;
gap: 10px;
}
.eyebrow::before {
content: '';
width: 22px;
height: 3px;
border-radius: 2px;
background: var(--orange);
flex: none;
}
.deck-title {
font-family: var(--font-head);
font-weight: 800;
font-size: 60px;
line-height: 1.02;
letter-spacing: -0.03em;
margin: 0;
color: var(--ink);
text-wrap: balance;
}
h2 {
font-family: var(--font-head);
font-weight: 800;
font-size: 42px;
line-height: 1.06;
letter-spacing: -0.025em;
margin: 0;
color: var(--ink);
max-width: 960px;
text-wrap: balance;
}
.hl { color: var(--indigo); }
.hlo { color: var(--orange); }
.lede {
font-size: 20px;
line-height: 1.5;
color: var(--ink-2);
max-width: 880px;
margin: 0;
font-weight: 400;
text-wrap: pretty;
}
.lede strong { color: var(--ink); font-weight: 700; }
p, li {
color: var(--ink-2);
font-size: 16px;
line-height: 1.55;
}
strong { color: var(--ink); font-weight: 700; }
.disclaim {
font-size: 13px;
line-height: 1.5;
color: var(--ink-3);
margin: 0;
max-width: 860px;
}
/* the safety lock — always the verbatim trio from
docs/marketing/strategy/00-positioning-and-messaging-framework.md:
"No ads, ever · No data sold · Ages 3–12" */
.lock-row {
display: inline-flex;
align-items: baseline;
flex-wrap: wrap;
margin: 0;
font-family: var(--font-head);
font-weight: 700;
font-size: 15px;
letter-spacing: 0.01em;
color: var(--indigo);
}
.lock-row span + span::before {
content: '·';
color: var(--orange);
margin: 0 12px;
}
/* ============================== CARDS =================================== */
.card {
background: var(--soft);
border: 1px solid var(--border);
border-radius: 18px;
padding: 22px 24px;
}
.card.tint { background: var(--indigo-tint); border-color: #dfe4ff; }
.card.warm { background: var(--orange-tint); border: 1px solid var(--orange-line); border-left: 4px solid var(--orange); }
.card.accent { background: var(--bg); border: 1px solid var(--indigo-tint); border-left: 4px solid var(--indigo); }
/* the ONE gold moment — reserved for Kudo-Coin content */
.card.coin { background: var(--gold-light); border: 1px solid var(--gold-line); border-left: 4px solid var(--gold); }
.card.coin h3 { color: var(--gold); }
.card .kicker {
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--indigo);
margin: 0 0 8px;
}
.card.warm .kicker { color: var(--orange); }
.card.coin .kicker { color: var(--gold); }
.card h3 {
font-family: var(--font-head);
font-weight: 700;
font-size: 18px;
line-height: 1.25;
margin: 0 0 6px;
color: var(--ink);
}
.card p { margin: 0; font-size: 15px; color: var(--ink-2); }
/* ========================= GRID & SPLIT ================================= */
.grid { display: grid; gap: 20px; }
.grid.cols-2 { grid-template-columns: 1fr 1fr; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.split-64,
.split-55 {
display: grid;
gap: 44px;
align-items: center;
}
.split-64 { grid-template-columns: 64fr 36fr; }
.split-55 { grid-template-columns: 55fr 45fr; }
/* min-width:0 lets a wide image/screenshot shrink instead of crushing the
text column (past bug: a portrait shot overflowed and squeezed the copy). */
.grid > *,
.split-64 > *,
.split-55 > * { min-width: 0; }
.col { display: flex; flex-direction: column; gap: 16px; }
/* ============================== STEPS =================================== */
.steps {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
align-items: stretch;
gap: 0;
}
.step {
position: relative;
background: var(--soft);
border: 1px solid var(--border);
border-radius: 16px;
padding: 20px 22px;
margin-right: 34px; /* room for the arrow */
}
.steps .step:last-child { margin-right: 0; }
/* orange arrow between steps */
.step:not(:last-child)::after {
content: '';
position: absolute;
top: 50%;
right: -30px;
width: 22px;
height: 22px;
transform: translateY(-50%);
background: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.step .n {
font-family: var(--font-head);
font-weight: 800;
font-size: 15px;
color: #fff;
background: var(--grad-brand);
width: 30px;
height: 30px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
}
.step h3 {
font-family: var(--font-head);
font-weight: 700;
font-size: 16.5px;
margin: 0 0 5px;
color: var(--ink);
}
.step p { margin: 0; font-size: 14.5px; }
/* ====================== SCREENSHOT FRAME =============================== */
.shot {
background: linear-gradient(160deg, var(--indigo-tint), #fff);
border: 1px solid #e2e6ff;
border-radius: 24px;
padding: 14px;
display: inline-flex;
box-shadow: var(--shadow-lift);
}
.shot img {
display: block;
width: auto;
max-width: 100%;
max-height: 430px; /* capped so a tall phone screen can't reach the folio */
height: auto;
border-radius: 16px;
border: 1px solid rgba(15, 23, 42, 0.08);
}
.shot-caption {
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--ink-3);
text-align: center;
margin: 10px 0 0;
}
/* ============================= STATS =================================== */
.stat {
background: var(--soft);
border: 1px solid var(--border);
border-radius: 18px;
padding: 22px 24px;
text-align: left;
}
.stat .num {
font-family: var(--font-head);
font-weight: 800;
font-size: 48px;
line-height: 1;
letter-spacing: -0.03em;
color: var(--indigo);
display: block;
}
.stat .label {
font-size: 14px;
font-weight: 600;
color: var(--ink-2);
margin-top: 8px;
display: block;
}
/* trio variant — a WORD carries the stat slot (Heart / Head / Grit).
The voice guide bans hardcounting games/experts, so the proof is breadth,
not a number; the signature gradient does the emphasis. */
.stat .word {
font-family: var(--font-head);
font-weight: 800;
font-size: 38px;
line-height: 1.05;
letter-spacing: -0.02em;
display: inline-block;
color: var(--indigo);
background: var(--grad-brand);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ============================== FAQ ==================================== */
.faq { display: grid; gap: 16px; }
.faq .q {
display: grid;
grid-template-columns: auto 1fr;
gap: 14px;
align-items: start;
}
.faq .badge-q {
font-family: var(--font-head);
font-weight: 800;
font-size: 15px;
color: #fff;
background: var(--grad-brand);
width: 30px;
height: 30px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
flex: none;
}
.faq h3 {
font-family: var(--font-head);
font-weight: 700;
font-size: 18px;
margin: 3px 0 4px;
color: var(--ink);
}
.faq p { margin: 0; font-size: 15.5px; color: var(--ink-2); }
/* ========================== PASS-ALONG ================================= */
.pass-along {
position: relative;
background: var(--bg);
border: 1px solid var(--border);
border-left: 4px solid var(--indigo);
border-radius: 16px;
padding: 20px 52px 20px 24px;
box-shadow: var(--shadow-card);
}
.pass-along p {
margin: 0;
font-size: 17px;
line-height: 1.5;
color: var(--ink);
font-weight: 500;
}
.pass-along p + p { margin-top: 12px; }
/* copy affordance — signals "ready to forward" */
.pass-along::after {
content: '';
position: absolute;
top: 18px;
right: 18px;
width: 20px;
height: 20px;
opacity: 0.5;
background: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
/* ============================ CTA SLIDE ================================= */
.cta-slide {
align-items: center;
text-align: center;
gap: 22px;
}
.cta-slide h2 { max-width: 900px; }
.cta-slide .lede { margin-left: auto; margin-right: auto; text-align: center; }
.cta-pill {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-head);
font-weight: 700;
font-size: 20px;
color: #fff;
background: var(--indigo);
padding: 16px 32px;
border-radius: 999px;
box-shadow: 0 12px 28px -12px rgba(79, 70, 229, 0.6);
text-decoration: none;
}
.cta-url {
font-size: 16px;
font-weight: 600;
color: var(--ink-2);
}
.cta-url .hl { color: var(--indigo); }
/* ============================ BADGES ================================== */
.badge-row {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
}
.badge-row img {
height: 48px;
width: auto;
display: block;
}
/* ========================== COMPANION ================================= */
.companion-wrap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* cover companion sits on a soft indigo-tint panel — an accent, never cosmic */
.companion-wrap.panel {
background: radial-gradient(120% 110% at 50% 32%, #ffffff 0%, var(--indigo-tint) 100%);
border: 1px solid #e2e6ff;
border-radius: 24px;
padding: 30px 26px 20px;
box-shadow: var(--shadow-card);
}
.companion {
width: 100%;
max-width: 360px;
height: auto;
filter:
drop-shadow(0 24px 42px rgba(79, 70, 229, 0.26))
drop-shadow(0 8px 16px rgba(15, 23, 42, 0.12));
animation: drift 6s ease-in-out infinite alternate;
}
@keyframes drift {
from { transform: translateY(-7px) rotate(-1.1deg); }
to { transform: translateY(7px) rotate(1.3deg); }
}
.companion-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
text-align: center;
margin-top: 12px;
}
/* inline Kudo-Coin glyph (gold moment) — scoped to img so it can never
collide with `.card.coin` (a bare .coin selector once crushed that card
to 1.15em tall and spilled its copy out of the gold field) */
img.coin {
display: inline-block;
width: 1.15em;
height: 1.15em;
vertical-align: -0.22em;
object-fit: contain;
}
/* ======================== COMPANION CAST WALL =========================== */
/* A wall of animated celebration loops — assets/celebrations/sm/*.webp
(160px, every-2nd-frame copies of the 320px masters; rebuild with sharp
frame-extract + `img2webp -loop 0 -d 166 -lossy -q 60`). Companion art is
the playfulness register on the light field (brand-visual-guide §6).
princess-genesis is private (share-code only) and never appears on the
wall. Tiles carry no name labels — never guess a companion's name from
its file name. */
.cast {
display: grid;
grid-template-columns: repeat(10, 1fr);
gap: 12px;
width: 100%;
}
.cast img {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
background: var(--soft);
border: 1px solid var(--border-soft);
border-radius: 14px;
}
/* curtain call: tiles pop in one after another via the inline --i index */
.slide.active .cast img {
opacity: 0;
animation: pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
animation-delay: calc(0.3s + var(--i, 0) * 0.045s);
}
@keyframes pop {
from { opacity: 0; transform: scale(0.55); }
to { opacity: 1; transform: scale(1); }
}
/* ===================== NAV CHROME (built by deck.js) =================== */
.deck-progress {
position: fixed;
top: 0;
left: 0;
height: 3px;
width: 0;
background: linear-gradient(90deg, var(--indigo) 0%, var(--indigo) 86%, var(--orange) 100%);
z-index: 20;
transition: width 0.3s ease;
}
.deck-edge {
position: fixed;
top: 0;
bottom: 0;
width: 12%;
z-index: 8;
cursor: pointer;
background: transparent;
border: 0;
}
.deck-edge.left { left: 0; }
.deck-edge.right { right: 0; }
.deck-nav {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid var(--border);
border-radius: 999px;
padding: 6px 8px;
box-shadow: var(--shadow-lift);
z-index: 15;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.deck-nav button {
font: inherit;
border: 0;
background: var(--indigo-tint);
color: var(--indigo);
width: 34px;
height: 34px;
border-radius: 999px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
transition: background 0.15s ease;
}
.deck-nav button:hover { background: #e0e5ff; }
.deck-nav button:disabled { opacity: 0.4; cursor: default; }
.deck-nav button:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.deck-nav svg { width: 16px; height: 16px; }
.deck-counter {
font-family: var(--font-head);
font-weight: 700;
font-size: 13px;
color: var(--ink-2);
font-variant-numeric: tabular-nums;
padding: 0 10px;
min-width: 58px;
text-align: center;
}
/* ============================ PRINT / PDF ============================== */
@page { size: 1280px 720px; margin: 0; }
@media print {
html, body {
width: auto;
height: auto;
overflow: visible;
background: #fff;
}
.deck-progress,
.deck-edge,
.deck-nav { display: none !important; }
.stage {
position: static;
display: block;
}
.slide {
position: relative !important;
top: auto;
left: auto;
display: block !important;
transform: none !important;
width: 1280px;
height: 720px;
margin: 0;
border: none;
border-radius: 0;
box-shadow: none;
overflow: hidden;
page-break-after: always;
break-after: page;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.slide:last-child {
page-break-after: avoid;
break-after: avoid;
}
/* freeze every entrance/idle animation for a clean printed frame */
.slide > .content > * {
opacity: 1 !important;
animation: none !important;
transform: none !important;
}
.companion { animation: none !important; }
.cast img { opacity: 1 !important; animation: none !important; }
/* gradient-clipped text is unreliable in PDF export — print solid indigo */
.stat .word {
background: none;
color: var(--indigo);
-webkit-text-fill-color: var(--indigo);
}
* {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}