acdl/docs/presentations/assets/nova-sp-theme.css

/* @theme nova-sp */
/* Nova — S&P Global Energy theme for Marp decks.
 *
 * Palette: S&P Red (#D6002A), Black (#1B1B1B), White (#FFFFFF), Grey (#F0F0F0).
 * Font: Akkurat Pro (fallback Helvetica Neue / Arial).
 *
 * This theme is a STANDALONE stylesheet (applied via `marp --theme
 * nova-sp-theme.css`). It does NOT `@import "default"` because Marp's
 * default theme applies `padding: 56px 64px` (which does not reserve
 * header/footer space) and other base styles (font, color, list spacing)
 * that would conflict with the S&P palette. Instead, this theme sets
 * the padding explicitly: 48px top (reserves header space), 40px bottom
 * (reserves footer space), 56px sides. This gives precise control over
 * the padding budget. (GRILL revision 2 — @import rejection documented.)
 *
 * v1.22 (REQ-254,255,256): added section padding + overflow handling,
 * aspect-ratio-aware image rules, title-slide chrome suppression,
 * paragraph/list/table spacing tightening.
 */

:root {
  --sp-red: #D6002A;
  --sp-black: #1B1B1B;
  --sp-white: #FFFFFF;
  --sp-grey: #F0F0F0;
  --sp-dark-grey: #2E2E2E;
}

/* Base section — padding reserves header (top) + footer (bottom) space.
 * REQ-254: zero padding was the root cause of "out of whack" layout.
 * 48px top reserves header chrome; 40px bottom reserves footer chrome;
 * 56px sides give breathing room. */
section {
  font-family: "Akkurat Pro", "Helvetica Neue", "Arial", sans-serif;
  font-size: 22px;
  color: var(--sp-black);
  background: var(--sp-white);
  padding: 48px 56px 40px;
  overflow: auto;
}

/* Headings — S&P Red */
h1 { color: var(--sp-red); font-size: 34px; margin-bottom: 0.3em; }
h2 { color: var(--sp-red); font-size: 26px; margin-bottom: 0.2em; }
h3 { color: var(--sp-red); font-size: 22px; margin-bottom: 0.2em; }
h4 { color: var(--sp-dark-grey); font-size: 20px; margin-bottom: 0.15em; }

/* REQ-256: tighten h2 + lead-paragraph spacing (the deck's recurring
 * `## Slide N — Title` + `**bold lead**` pattern). Default <p> margins
 * waste ~44px per slide; this reclaims ~22px. */
section h2 + p { margin-top: 0.2em; }
section p { margin: 0.4em 0; }

/* Title slides — black background, red top border */
section.title {
  background: var(--sp-black);
  color: var(--sp-white);
  border-top: 8px solid var(--sp-red);
}
section.title h1 { color: var(--sp-white); }
section.title h2 { color: var(--sp-white); }

/* REQ-256: suppress header/footer chrome on title slides. The
 * `<!-- _class: title -->` + `<!-- _paginate: false -->` directives
 * only suppress the page number, not the chrome. This prevents the
 * header/footer from colliding with title/appendix content. */
section.title header, section.title footer { display: none; }

/* Tables — grey header with red underline, explicit white body for readability on any background */
table { font-size: 18px; width: 100%; border-collapse: collapse; background: var(--sp-white); }
th { background: var(--sp-grey); border-bottom: 2px solid var(--sp-red); padding: 6px 10px; text-align: left; }
td { background: var(--sp-white); color: var(--sp-black); border-bottom: 1px solid var(--sp-grey); padding: 6px 10px; }
/* Ensure tables on dark/title slides remain readable: white card with a subtle border */
section.title table, section table { background: var(--sp-white); }
section.title td, section td { background: var(--sp-white); color: var(--sp-black); }
section.title th, section th { background: var(--sp-grey); color: var(--sp-black); }

/* REQ-256: dense tables (≥8 rows) use tighter cell padding so 10-13 row
 * tables (slides 8, 12, A1) fit. Apply via `table.dense` class in the
 * marp deck. */
table.dense td, table.dense th { padding: 4px 8px; }
table.dense { font-size: 16px; }

/* Blockquotes — red left border */
blockquote { border-left: 4px solid var(--sp-red); color: var(--sp-dark-grey); font-size: 20px; padding-left: 12px; }

/* Code — dark background */
pre { background: var(--sp-black); color: var(--sp-white); border-radius: 4px; padding: 12px; font-size: 16px; }
code { background: var(--sp-grey); color: var(--sp-black); border-radius: 2px; padding: 1px 4px; font-size: 18px; }
pre code { background: transparent; color: inherit; }

/* REQ-255: aspect-ratio-aware image rules. The blunt `max-height: 320px`
 * broke `w:` directives on tall images (slide 9) and did nothing for
 * ultra-wide images (slide 6). The new rule uses `object-fit: contain`
 * and `max-width: 100%` so images scale within the content area without
 * ignoring explicit `w:`/`h:` directives. */
img { display: block; margin: 0 auto; max-width: 100%; max-height: 380px; object-fit: contain; }
/* Wide diagrams (ultra-wide aspect): tighter max-height so they don't
 * render as a thin strip. Apply via `![w:1000 class:wide]` — or rely on
 * the default max-height which is already tighter. */
img.wide { max-height: 280px; }
/* Tall diagrams: more vertical room. Apply via `![h:480 class:tall]`. */
img.tall { max-height: 480px; }

/* Header/footer — subtle grey */
header { color: var(--sp-dark-grey); border-bottom: 1px solid var(--sp-grey); }
footer { color: var(--sp-dark-grey); border-top: 1px solid var(--sp-grey); }

/* Maturity badges */
.badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 14px; font-weight: 600; }
.badge.today { background: #c6f6d5; color: #22543d; }
.badge.planned { background: #fef3c7; color: #78350f; }

/* Pagination — S&P Red progress bar */
.bespoke-progress-parent { background: var(--sp-grey); }
.bespoke-progress-bar { background: var(--sp-red) !important; }

/* Lists — tighter. REQ-256: add ol styling (match ul). */
ul { margin-top: 0.3em; }
ol { margin-top: 0.3em; }
li { margin-bottom: 0.2em; }

/* Strong — S&P Red for emphasis in lead lines */
strong { color: var(--sp-red); }

/* REQ-256: PPTX export fidelity — no scrollbars in exported slides.
 * The `overflow: auto` above is an authoring-time signal; in print/PPTX
 * we clamp to `hidden` so the exported slide is clean. */
@media print {
  section { overflow: hidden; }
}