/* richie/slides.css — the embeddable presentation surface for markup from * Richie::Slides.render + richie/slides.js. * * Ported from the standalone app's slides.css with one structural change: * everything is scoped under .richie-deck instead of , and the active * slide fills the DECK's box (position:absolute) instead of the viewport * (position:fixed) — so a deck renders identically embedded in a host pane * or on a dedicated full-window page (give .richie-deck the height either * way). The no-JS fallback is the plain stacked scroll view. */ .richie-deck { /* palette / canvas tokens */ --code-bg: #ffffff; --code-ink: #24292e; --code-border: #e5e5e5; --color-section: #6b7280; --color-heading: #111827; --color-subheading: #E77914; --color-text: #1f2937; --color-secondary: #6b7280; --color-accent: #E77914; --color-bg: #fff; --bullet: "\2022"; --line: #e5e5e5; --muted: #6b7385; /* Fixed slide canvas for the stacked (no-JS) fallback; the slideshow overrides the stage to fill the deck box. */ --canvas-w: 1280px; --canvas-h: 720px; font-family: system-ui, -apple-system, sans-serif; background: #fff; } .richie-deck, .richie-deck *, .richie-deck *::before, .richie-deck *::after { box-sizing: border-box; } /* ── stage envelope ───────────────────────────────────────── */ .richie-deck .slide { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; /* title band | content | nav band */ width: var(--canvas-w); height: var(--canvas-h); margin: 2rem auto; /* stacked (no-JS) fallback spacing */ padding: 1em 2em 0.6em 2em; background: var(--color-bg); color: var(--color-text); overflow: hidden; /* content beyond the stage is clipped */ font-size: var(--slide-em, 18px); /* proportional base unit, set by autosize */ line-height: 1.5; } .richie-deck .slide-attached { width: var(--canvas-w); height: var(--canvas-h); margin: -1rem auto 2rem; padding: 1.5rem 3rem; background: #f3f3f3; color: var(--color-text); overflow: hidden; font-size: var(--slide-em, 18px); line-height: 1.6; } /* ── stage bands ──────────────────────────────────────────── */ .richie-deck .slide-section-label { margin-bottom: 1.4em; } .richie-deck .slide > .slide-section-label { min-height: 1.6em; margin: 0 0 1.2em; } .richie-deck .slide .slide-section-label h1, .richie-deck .slide-attached .slide-section-label h1 { font-size: 0.72em; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); margin: 0; } .richie-deck .slide > .slide-content { min-height: 0; overflow: hidden; font-size: var(--fs-content, 1em); } /* Type scale — each block type takes its tier's size for the chosen level. */ .richie-deck .slide-content [data-richie-type="section"] :is(h1,h2,h3,h4) { font-size: var(--fs-section, 3.5em); } .richie-deck .slide-content [data-richie-type="heading"] :is(h1,h2,h3,h4) { font-size: var(--fs-header, 2.5em); } .richie-deck .slide-content [data-richie-type="subheading"] :is(h1,h2,h3,h4) { font-size: calc(var(--fs-header, 2.5em) * 0.72); } .richie-deck .slide > .slide-footer { min-height: 1.6em; margin-top: 1.2em; display: flex; align-items: flex-end; justify-content: space-between; gap: 1em; font-size: 0.72em; letter-spacing: 0.08em; color: var(--muted); } .richie-deck button.slide-nav-hint { background: transparent; border: 0; box-shadow: none; border-radius: 0; font: inherit; color: inherit; letter-spacing: inherit; cursor: pointer; padding: 1em 1.4em; margin: -1em -1.4em; } .richie-deck .slide-nav-count { display: inline-flex; align-items: center; gap: 0.5em; } .richie-deck .slide-nav-arrow { background: transparent; border: 0; box-shadow: none; border-radius: 0; font: inherit; color: inherit; cursor: pointer; line-height: 1; padding: 0.3em 0.5em; margin: -0.3em 0; } .richie-deck .slide-nav-arrow:hover:not(:disabled) { color: var(--color-accent); } .richie-deck .slide-nav-arrow:disabled { opacity: 0.25; cursor: default; } /* Pinned way back from the scrolling attached panel (injected by JS). */ .richie-deck .slide-return { position: sticky; top: 0.6em; float: right; background: #fff; border: 1px solid var(--line); border-radius: 3px; font: inherit; font-size: 0.72em; letter-spacing: 0.08em; color: var(--muted); cursor: pointer; padding: 0.4em 0.9em; } .richie-deck .slide-return:hover { color: var(--color-accent); } /* ── block rhythm ─────────────────────────────────────────── */ .richie-deck [data-richie-block] { margin: 0 0 0.85em; } .richie-deck [data-richie-block]:first-child { margin-top: 0; } .richie-deck [data-richie-block]:last-child { margin-bottom: 0; } .richie-deck [data-richie-inner] > * { margin: 0; } /* ── headings ─────────────────────────────────────────────── */ .richie-deck .slide h1, .richie-deck .slide-attached h1 { font-size: 2.6em; line-height: 1.1; font-weight: normal; letter-spacing: -0.02em; color: var(--color-section); } .richie-deck .slide h2, .richie-deck .slide-attached h2 { font-size: 2em; line-height: 1.15; font-weight: normal; letter-spacing: -0.02em; color: var(--color-heading); } .richie-deck .slide h3, .richie-deck .slide-attached h3 { font-size: 1.25em; line-height: 1.25; font-weight: 600; color: var(--color-subheading); } /* Title margins ride the TITLE's tier (--fs-*), not the body size, so a title block is pixel-stable wherever its tier holds across levels. */ .richie-deck [data-richie-type="section"] { margin-bottom: calc(var(--fs-section, 3.5em) * 0.49); } .richie-deck [data-richie-type="heading"] { margin-bottom: calc(var(--fs-header, 2.5em) * 0.63); } .richie-deck [data-richie-type="subheading"] { margin-top: calc(var(--fs-header, 2.5em) * 0.69); margin-bottom: calc(var(--fs-header, 2.5em) * 0.29); } /* ── body ─────────────────────────────────────────────────── */ .richie-deck .slide p, .richie-deck .slide-attached p { font-size: 1.05em; } .richie-deck .slide ul, .richie-deck .slide ol, .richie-deck .slide-attached ul, .richie-deck .slide-attached ol { padding-left: 1.4em; font-size: 1.05em; } .richie-deck .slide li, .richie-deck .slide-attached li { margin: 0.3em 0; } .richie-deck .slide ul, .richie-deck .slide-attached ul { list-style: none; } .richie-deck .slide ul li, .richie-deck .slide-attached ul li { position: relative; } .richie-deck .slide ul li::before, .richie-deck .slide-attached ul li::before { content: var(--bullet); color: var(--color-accent); position: absolute; left: -1.1em; } /* ── image ────────────────────────────────────────────────── */ .richie-deck .slide-content [data-richie-type="image"] { float: left; width: 48%; margin: 0 1.4em 0.85em 0; } .richie-deck .slide-content [data-richie-type="image"] img { display: block; width: 100%; height: auto; max-height: 18em; object-fit: contain; object-position: center center; } .richie-deck .slide-attached [data-richie-type="image"] { float: none; width: fit-content; max-width: 100%; margin: 0 0 0.85em; } .richie-deck .slide-attached [data-richie-type="image"] img { display: block; width: auto; max-width: 100%; height: auto; max-height: 16em; } .richie-deck .slide-content [data-richie-type="section"], .richie-deck .slide-content [data-richie-type="heading"], .richie-deck .slide-content [data-richie-type="table"], .richie-deck .slide-content [data-richie-type="code"] { clear: both; } .richie-deck .slide-content [data-richie-block]:not([data-richie-type="image"]) { display: flow-root; } /* ── blockquote + cite ────────────────────────────────────── */ .richie-deck .slide figure, .richie-deck .slide-attached figure { margin: 0; } .richie-deck .slide blockquote, .richie-deck .slide-attached blockquote { margin: 0; padding-left: 0.8em; font-size: 1.25em; font-style: italic; border-left: 3px solid var(--color-accent); color: var(--color-heading); } .richie-deck .slide [data-richie-type="blockquote"] figcaption, .richie-deck .slide-attached [data-richie-type="blockquote"] figcaption { margin-top: 0.4em; padding-left: 0.8em; font-size: 0.95em; color: var(--color-secondary); } .richie-deck .slide [data-richie-type="blockquote"] figcaption::before, .richie-deck .slide-attached [data-richie-type="blockquote"] figcaption::before { content: "— "; } .richie-deck .slide [data-richie-type="image"] figcaption, .richie-deck .slide-attached [data-richie-type="image"] figcaption { margin-top: 0.35em; text-align: center; font-size: 0.72em; line-height: 1.3; color: var(--color-secondary); } /* ── inline ───────────────────────────────────────────────── */ .richie-deck .slide strong, .richie-deck .slide-attached strong { font-weight: 700; } .richie-deck .slide em, .richie-deck .slide-attached em { font-style: italic; } .richie-deck .slide code, .richie-deck .slide-attached code { font-family: ui-monospace, monospace; font-size: 0.9em; background: #f0f0f3; padding: 0.1em 0.3em; border-radius: 3px; } /* ── tables ───────────────────────────────────────────────── */ .richie-deck .slide table, .richie-deck .slide-attached table { border-collapse: collapse; margin: 1em 0; width: 100%; } .richie-deck .slide table td, .richie-deck .slide-attached table td { border: 1px solid var(--line); padding: .55em .8em; } .richie-deck .slide table tr:nth-child(odd), .richie-deck .slide-attached table tr:nth-child(odd) { background: rgba(0, 0, 0, .015); } /* ── code blocks ──────────────────────────────────────────── */ .richie-deck .slide pre, .richie-deck .slide-attached pre { background: var(--code-bg); color: var(--code-ink); padding: 1.2em 1.4em; overflow-x: auto; border: 1px solid var(--code-border); border-radius: 6px; margin: 1em 0; font-size: 0.7em; line-height: 1.5; } .richie-deck .slide pre code, .richie-deck .slide-attached pre code { font-family: 'JetBrains Mono', ui-monospace, monospace; white-space: pre; background: none; padding: 0; } /* ── inline highlights ────────────────────────────────────── */ .richie-deck .highlight-1, .richie-deck .highlight-2, .richie-deck .highlight-3 { border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .richie-deck .highlight-1 { background: #fff3a3; box-shadow: 0 0 0 1px #fff3a3; } .richie-deck .highlight-2 { background: #ffd866; box-shadow: 0 0 0 1px #ffd866; } .richie-deck .highlight-3 { background: #ffa040; box-shadow: 0 0 0 1px #ffa040; } /* ── text colors ──────────────────────────────────────────── */ .richie-deck .color-primary { color: #2a5db0; } .richie-deck .color-secondary { color: #6b7385; } .richie-deck .color-accent { color: #b04ea0; } .richie-deck .color-success { color: #2e8a4a; } .richie-deck .color-danger { color: #c63a3a; } /* ── alignment ────────────────────────────────────────────── */ .richie-deck [data-richie-text].align-left { display: block; text-align: left; } .richie-deck [data-richie-text].align-center { display: block; text-align: center; } .richie-deck [data-richie-text].align-right { display: block; text-align: right; } /* ── slideshow ──────────────────────────────────────────────── richie/slides.js adds .slideshow to the deck; without JS the deck degrades to the stacked scroll view above. The active group fills the DECK's box — size the deck from outside (embed: a fixed-height frame; full page: 100vh). */ .richie-deck.slideshow { position: relative; height: 100%; overflow: hidden; background: #fff; } .richie-deck.slideshow .slide-group { display: none; } .richie-deck.slideshow .slide-group[data-active] { display: block; position: absolute; inset: 0; /* active group = whole deck box */ } .richie-deck.slideshow .slide-above, .richie-deck.slideshow .slide-below { display: none; height: 100%; } .richie-deck.slideshow [data-current] { display: block; height: 100%; } .richie-deck.slideshow .slide-main { width: 100%; height: 100%; margin: 0; } /* The details view keeps the document's natural linear flow and SCROLLS. */ .richie-deck.slideshow .slide-below[data-current] { height: 100%; overflow-y: auto; } .richie-deck.slideshow .slide-attached { width: 100%; height: auto; min-height: 100%; margin: 0; overflow: visible; }