gabe /presentato-ma

// A reveal.js theme wired to the neiam.co palette. Loaded *after* a vendored
// reveal theme so these variable definitions win; the palette itself lives on
// the <html> element via data-theme, so switching themes restyles the deck
// live without swapping stylesheets.
@use "tokens";

:root {
  --r-background-color: var(--base-100);
  --r-main-color: var(--base-content);
  --r-heading-color: var(--accent);
  --r-link-color: var(--secondary);
  --r-link-color-hover: var(--base-content);
  --r-link-color-dark: var(--primary);
  --r-selection-background-color: var(--primary);
  --r-selection-color: var(--primary-content);
  --r-overlay-element-bg-color: var(--base-content);
  --r-overlay-element-fg-color: var(--base-100);

  --r-main-font: var(--font-sans);
  --r-code-font: var(--font-mono);
  --r-heading-font: var(--font-sans);
  --r-heading-font-weight: 700;
  --r-heading-text-transform: none;
  --r-heading-letter-spacing: -0.01em;
  --r-heading-text-shadow: none;
  --r-heading1-text-shadow: none;
}

// reveal.js paints the viewport, not <body>, so the deck background has to be
// re-pointed at the token too.
.reveal-viewport { background: var(--base-100); }

.reveal {
  blockquote {
    background: var(--base-200);
    border-left: 3px solid var(--primary);
    box-shadow: none;
    font-style: normal;
    text-align: left;
    padding: var(--space-sm) var(--space-md);
  }

  code:not(pre code) {
    font-family: var(--font-mono);
    background: var(--base-200);
    padding: 0.15em 0.4em;
    border-radius: var(--radius-selector);
  }

  pre {
    box-shadow: none;

    code {
      background: var(--base-200);
      border: var(--border) solid var(--base-300);
      border-radius: var(--radius-box);
      padding: var(--space-sm);
    }
  }

  // Tables carry the dense slides (targets, budgets, risks), so set them a
  // little smaller than body text to fit 6-7 rows under a heading.
  table {
    font-size: 0.75em;
    th { color: var(--accent); }
    th, td { border-bottom: var(--border) solid var(--base-300); }
  }

  kbd {
    font-family: var(--font-mono);
    font-size: 0.85em;
    background: var(--base-300);
    border: var(--border) solid var(--neutral);
    border-radius: var(--radius-field);
    padding: 0.1em 0.4em;
  }

  // reveal.js mats images on white with a grey border; use the palette
  // instead, and cap the height so a full-resolution screenshot still fits.
  // Slides are 960x700 logical px, so ~460px leaves room for a heading.
  section img {
    background: var(--base-200);
    border: var(--border) solid var(--base-300);
    border-radius: var(--radius-box);
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: var(--img-height, 460px);
    object-fit: contain;
    margin-inline: auto;
  }

  .progress { color: var(--accent); }
  .controls { color: var(--secondary); }
  .slide-number {
    font-family: var(--font-mono);
    background: color-mix(in oklch, var(--base-300) 80%, transparent);
    color: var(--secondary);
  }
}

// ── In-deck theme switcher ───────────────────────────────────────────────────
.deck-theme {
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.5rem;
  background: color-mix(in oklch, var(--base-300) 70%, transparent);
  border: var(--border) solid var(--neutral);
  border-radius: var(--radius-field);
  opacity: 0.25;
  transition: opacity 0.2s ease;

  &:hover, &:focus-within { opacity: 1; }

  &__btn {
    background: none;
    border: none;
    padding: 0.15rem;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--radius-field);
    opacity: 0.55;
    transition: opacity 0.15s ease, transform 0.15s ease;

    &:hover { opacity: 1; transform: scale(1.15); }
    &[aria-pressed="true"] {
      opacity: 1;
      box-shadow: 0 0 0 2px var(--accent);
    }
  }
}

// Hide the switcher in the PDF export and in the speaker-notes popup.
@media print { .deck-theme { display: none; } }

// ── Side-by-side columns ─────────────────────────────────────────────────────
// `<div class="cols">` lays its direct children out as equal columns. The
// reveal markdown plugin does parse markdown inside a div, as long as there
// are blank lines around it — so a column is either a bare `![](...)` (each
// image becomes its own <p>, i.e. its own column) or a nested <div> when the
// column holds more than one block.
//
// Override the split with an inline style, e.g. style="grid-template-columns: 2fr 1fr".
.reveal .cols {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--space-md);
  align-items: center;
  justify-items: center;
  text-align: center;

  > * {
    margin: 0;
    min-width: 0;
    max-width: 100%;
  }

  p { margin: 0 0 var(--space-xs); }
  h1, h2, h3, h4 { margin-top: 0; }
  > div > :last-child { margin-bottom: 0; }

  // Two columns halves the width available to each image, so let them grow
  // taller to compensate.
  img { margin: 0; max-height: var(--img-height, 560px); }

  &--top { align-items: start; }
}