/* ═══════════════════════════════════════════════════════════════════════════
EMC deck — presentation chrome.
Slides are authored at a fixed 1600×900 and scaled to fit whatever screen
they land on, so type and spacing keep their exact proportions on a venue
projector, a laptop, or a 4K TV. Nothing reflows mid-talk.
Design tokens mirror resources/css/app.css. Fun is the default; Pro is a
token swap on [data-mode="pro"].
═══════════════════════════════════════════════════════════════════════════ */
@font-face { font-family:'Alcyone'; font-weight:400; font-display:block; src:url('fonts/Alcyone-Regular.woff2') format('woff2'); }
@font-face { font-family:'Alcyone'; font-weight:500; font-display:block; src:url('fonts/Alcyone-Medium.woff2') format('woff2'); }
@font-face { font-family:'Alcyone'; font-weight:600; font-display:block; src:url('fonts/Alcyone-SemiBold.woff2') format('woff2'); }
@font-face { font-family:'Alcyone'; font-weight:700; font-display:block; src:url('fonts/Alcyone-Bold.woff2') format('woff2'); }
:root, [data-mode="fun"] {
--page:#E4EDF0; --ink:#14264F; --band-deep:#0C1832; --band-alt:#0C1832;
--card:#223B66; --card-ink:#FFFFFF; --ink-dark:#FFFFFF;
--accent:#F0453E; --highlight:#F4B740; --eyebrow:#0B5474; --eyebrow-dark:#F0453E;
--hl-bg:var(--highlight); --hl-ink:var(--ink);
--cta-bg:var(--accent); --cta-ink:#FFFFFF; --cta-ring:none;
--photo-frame:none; --photo-bg:var(--card); --rule-w:0px;
--scrim:rgb(from var(--ink) r g b / 0.72);
}
[data-mode="pro"] {
--page:#2A3340; --ink:#FFFFFF; --band-alt:#1B222C; --band-deep:#12161D;
--card:#FFFFFF; --card-ink:#12161D; --ink-dark:#FFFFFF;
--accent:#8FA6BC; --highlight:#C6D3DE; --eyebrow:#8FA6BC; --eyebrow-dark:#8FA6BC;
--hl-bg:transparent; --hl-ink:var(--highlight);
--cta-bg:transparent; --cta-ink:#FFFFFF; --cta-ring:inset 0 0 0 3px #FFFFFF;
--photo-frame:inset 0 0 0 1px #FFFFFF; --photo-bg:var(--band-alt); --rule-w:28px;
--scrim:rgb(from var(--band-deep) r g b / 0.72);
}
/* Authoring canvas. Every size below is in these units, never viewport units —
that is what keeps a 16:9 projector and a laptop pixel-identical. */
:root {
--W:1600; --H:900;
--fs-hero:96px; --fs-display:86px; --fs-h1:69px; --fs-h2:55px; --fs-h3:44px;
--fs-h4:35px; --fs-h5:28px; --fs-lead:22.5px; --fs-body:18px;
--fs-small:14.5px; --fs-overline:13px;
}
* { box-sizing:border-box; }
html, body { margin:0; padding:0; height:100%; background:#000; overflow:hidden; }
body { font-family:'Alcyone', Inter, system-ui, sans-serif; -webkit-font-smoothing:antialiased; }
#stage { position:fixed; inset:0; background:#000; }
/* The scaled 1600×900 canvas. JS sets --scale; nothing else moves. */
/* Centred by translate, not by the stage's grid alignment. Once the 1600px canvas
is wider than the viewport — every phone — grid centring falls back to "safe"
and pins the overflowing item to the start, which threw the rotated slide clean
off screen. translate(-50%,-50%) has no such fallback. */
#canvas {
position:absolute; left:50%; top:50%;
width:calc(var(--W) * 1px); height:calc(var(--H) * 1px);
transform:translate(-50%, -50%) rotate(var(--rotate, 0deg)) scale(var(--scale, 1));
transform-origin:center center;
overflow:hidden; background:var(--band-deep);
}
.slide {
position:absolute; inset:0;
display:flex; flex-direction:column;
padding:80px;
background:var(--band-deep); color:var(--ink-dark);
opacity:0; visibility:hidden;
transition:opacity .32s cubic-bezier(0.22,1,0.36,1);
}
.slide[data-active] { opacity:1; visibility:visible; }
/* Band variants */
.slide.is-page { background:var(--page); color:var(--ink); }
.slide.is-alt { background:var(--band-alt); color:var(--ink-dark); }
/* Running header / footer, hidden on cover + closing */
.slide__head, .slide__foot {
position:absolute; left:80px; right:80px; z-index:5;
display:flex; justify-content:space-between;
font-size:var(--fs-overline); letter-spacing:1.5px; text-transform:uppercase;
font-weight:500; opacity:.6; pointer-events:none;
}
.slide__head { top:28px; }
/* Indented past the slide number, which owns the bottom-left corner. */
.slide__foot { bottom:26px; left:136px; }
/* Corner monogram. */
.slide__mark { position:absolute; right:80px; bottom:60px; width:58px; height:auto; z-index:4; }
/* Slide number, bottom-left on every slide. One element in the canvas rather than
markup repeated across fifty slides; deck.js writes the value and copies the
active slide's colour so it reads on light and dark bands alike. */
#slideno {
position:absolute; left:80px; bottom:26px; z-index:7;
font:700 13px/1 'Alcyone', system-ui, sans-serif; letter-spacing:1.5px;
opacity:.5; pointer-events:none;
}
/* Entrance animations — only on the active slide, and only once it lands */
@keyframes fadeUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes liftUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
@keyframes ruleDraw { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes slideL { from { opacity:0; transform:translateX(-32px); } to { opacity:1; transform:none; } }
@keyframes slideR { from { opacity:0; transform:translateX(32px); } to { opacity:1; transform:none; } }
@keyframes blurIn { from { opacity:0; filter:blur(3px); } to { opacity:1; filter:none; } }
.slide[data-active] [data-anim="fade"] { animation:fadeUp .55s cubic-bezier(0.22,1,0.36,1) both; }
.slide[data-active] [data-anim="lift"] { animation:liftUp .5s cubic-bezier(0.22,1,0.36,1) both; }
.slide[data-active] [data-anim="rule"] { animation:ruleDraw .45s cubic-bezier(0.22,1,0.36,1) both; transform-origin:left; }
.slide[data-active] [data-anim="left"] { animation:slideL .6s cubic-bezier(0.22,1,0.36,1) both; }
.slide[data-active] [data-anim="right"]{ animation:slideR .6s cubic-bezier(0.22,1,0.36,1) both; }
.slide[data-active] [data-anim="blur"] { animation:blurIn .65s cubic-bezier(0.22,1,0.36,1) both; }
.slide:not([data-active]) [data-anim] { animation:none; opacity:0; }
/* Stagger. data-delay="1".."8" was already in the markup but never had a rule
behind it, so staggered lists were landing all at once. */
.slide[data-active] [data-delay="1"] { animation-delay:0.09s; }
.slide[data-active] [data-delay="2"] { animation-delay:0.18s; }
.slide[data-active] [data-delay="3"] { animation-delay:0.27s; }
.slide[data-active] [data-delay="4"] { animation-delay:0.36s; }
.slide[data-active] [data-delay="5"] { animation-delay:0.45s; }
.slide[data-active] [data-delay="6"] { animation-delay:0.54s; }
.slide[data-active] [data-delay="7"] { animation-delay:0.63s; }
.slide[data-active] [data-delay="8"] { animation-delay:0.72s; }
/* "Done" tick on a schedule row already behind us. */
.done {
display:inline-flex; align-items:center; gap:6px; margin-left:14px;
padding:4px 12px; border-radius:999px; vertical-align:baseline; position:relative; top:-2px;
font-size:var(--fs-overline); font-weight:700; letter-spacing:1px; text-transform:uppercase;
background:rgb(from var(--eyebrow) r g b / .13); color:var(--eyebrow);
}
.done svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; }
/* Typography helpers */
.eyebrow { font-size:var(--fs-overline); letter-spacing:2px; text-transform:uppercase; font-weight:700; color:var(--eyebrow); }
.slide:not(.is-page) .eyebrow { color:var(--eyebrow-dark); }
.rule { display:inline-block; width:var(--rule-w); height:2px; background:currentColor; }
h1,h2,h3 { margin:0; font-weight:700; letter-spacing:-0.02em; }
p { margin:0; }
/* The highlight is a band, not the full inline box. A plain background-color fills
the inline *content area*, which is sized from the font's ascent+descent (94px at
--fs-display) and is therefore taller than the 89px line-height. It spilled into
the line above and, painting later in document order, clipped its descenders.
z-index can't help — the overlap is geometric, and a negative z-index would drop
the highlight behind the slide's own background. A gradient confines it instead. */
mark {
background-color:transparent;
background-image:linear-gradient(var(--hl-bg), var(--hl-bg));
background-repeat:no-repeat;
background-size:100% 0.82em;
background-position:0 0.17em;
color:var(--hl-ink);
padding:0 .1em;
-webkit-box-decoration-break:clone; box-decoration-break:clone;
}
/* The wordmark is a real two-colour asset (indigo letters, coral glyphs), so it
ships as an of the right kit variant per band. It used to be a CSS mask
of a single flat colour, which threw away the coral, went invisible on any
light band, and relied on mask shorthand + var() — the combination Safari
fails to parse. */
.logo { display:block; width:240px; height:auto; }
/* ── Brand launch ────────────────────────────────────────────────────────
The token blocks at the top of this file are scoped to [data-mode], not to
:root, which means two panels on one slide can each run a different mode.
That is the whole trick behind the Fun/Pro split — no duplicated palette. */
/* The lockup on a light band. --ink-dark is white in both modes, so the plain
.logo disappears on Fun's pale page; this keys off --ink instead. */
.duo { position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; }
.duo__half {
position:relative; display:flex; flex-direction:column;
align-items:center; justify-content:center; gap:28px; padding:80px;
background:var(--page); color:var(--ink);
}
.duo__tag {
position:absolute; top:34px; left:50%; translate:-50%;
font-size:var(--fs-overline); letter-spacing:2px; text-transform:uppercase;
font-weight:700; color:var(--eyebrow);
}
/* The seam sits on the container, not the Pro half — on the half it resolved to
Pro's steel accent and read as an accidental gap rather than a brand edge. */
.duo { position:absolute; }
.duo::after {
content:''; position:absolute; top:0; bottom:0; left:50%; width:4px;
margin-left:-2px; background:#F0453E; z-index:4;
}
.slide[data-active] .duo__half:first-child { animation:slideL .7s cubic-bezier(0.22,1,0.36,1) both; }
.slide[data-active] .duo__half:last-child { animation:slideR .7s cubic-bezier(0.22,1,0.36,1) .12s both; }
/* Palette */
.swatches { display:grid; grid-template-columns:repeat(6, 1fr); gap:18px; width:100%; }
.swatch { display:flex; flex-direction:column; gap:10px; }
.swatch i {
display:block; height:150px; border-radius:10px;
/* Keys off --ink, not --ink-dark: on a light band --ink-dark is white, so the
hairline vanished — and Pale Sky is the page colour, leaving that swatch
invisible against its own slide. */
box-shadow:inset 0 0 0 1px rgb(from var(--ink) r g b / .22);
}
.swatch b { font-size:var(--fs-small); font-weight:700; letter-spacing:.5px; }
/* ── Glyphs ──────────────────────────────────────────────────────────────
Masked, not , so each glyph takes the mode's accent the way the manual
requires (coral in Fun, steel in Pro) from a single neutral source file. */
.glyphs { display:grid; grid-template-columns:repeat(7, 1fr); gap:20px; }
.glyph-card { display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; }
/* One rule: the element IS the