mdeck 3.4.0 → 3.5.0

package/assets/extensions/themes/aurora/styles.css

@@ -1,670 +0,0 @@
-/* Aurora — northern lights.
-   Soft curtains of light in the palette's two accents and their blend move
-   across the slides: as a faint shimmer at the edge of content slides, and
-   at full strength on title, chapter and statement slides. Chapter and
-   statement slides are night skies, in the palette's other variant, so a
-   talk alternates between day and night. Surfaces are frosted glass with a
-   fine gradient edge; key words glow in the accent gradient. All colours
-   come from the palette's roles, so every palette works. */
-
-.slide {
-  --aurora-a: var(--accent);
-  --aurora-b: var(--accent-2);
-  --aurora-c: color-mix(in oklab, var(--accent) 50%, var(--accent-2));
-  --aurora-gradient: linear-gradient(120deg, var(--aurora-a) 0%, var(--aurora-c) 50%, var(--aurora-b) 100%);
-  --glass: color-mix(in oklab, var(--bg) 72%, transparent);
-  --glass-edge: linear-gradient(135deg, color-mix(in oklab, var(--aurora-a) 70%, transparent), color-mix(in oklab, var(--rule) 60%, transparent) 45%, color-mix(in oklab, var(--aurora-b) 70%, transparent));
-}
-
-/* The curtains: narrow, tall bands of light hanging from the top of the
-   sky and fading downwards, slanted like an aurora. Every slide has them;
-   how strong is set per slide type with --aurora-strength. */
-.slide::before {
-  content: '';
-  position: absolute;
-  inset: -12% -16% 0;
-  background:
-    radial-gradient(ellipse 4.5% 62% at 8% 6%, var(--aurora-a), transparent 100%),
-    radial-gradient(ellipse 7% 78% at 20% 0%, var(--aurora-c), transparent 100%),
-    radial-gradient(ellipse 3.5% 54% at 31% 10%, var(--aurora-a), transparent 100%),
-    radial-gradient(ellipse 8% 86% at 45% 0%, var(--aurora-b), transparent 100%),
-    radial-gradient(ellipse 4% 58% at 58% 8%, var(--aurora-c), transparent 100%),
-    radial-gradient(ellipse 6.5% 74% at 72% 2%, var(--aurora-a), transparent 100%),
-    radial-gradient(ellipse 5% 66% at 88% 4%, var(--aurora-b), transparent 100%),
-    radial-gradient(ellipse 60% 22% at 50% 0%, color-mix(in oklab, var(--aurora-c) 60%, transparent), transparent 80%);
-  /* Soft by their gradients alone, not a blur filter: that stays vector in a
-     PDF (a blurred layer prints as a huge image) and draws faster. */
-  transform: skewX(-18deg);
-  opacity: var(--aurora-strength, 0);
-  pointer-events: none;
-  z-index: 0;
-  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 var(--aurora-reach, 40%), transparent calc(var(--aurora-reach, 40%) + 40%));
-  mask-image: linear-gradient(to bottom, #000 0%, #000 var(--aurora-reach, 40%), transparent calc(var(--aurora-reach, 40%) + 40%));
-}
-/* Content stays above the light. */
-.slide > .slide-header, .slide > .slide-body, .slide > .slide-footer { position: relative; z-index: 1; }
-.slide > .slide-logo { z-index: 1; }
-
-/* The light drifts slowly while presenting; never in print or for people
-   who prefer less motion. */
-@media (prefers-reduced-motion: no-preference) {
-  .slide--title::before, .slide--chapter::before, .slide--focus::before { animation: aurora-drift 26s ease-in-out infinite alternate; }
-}
-@keyframes aurora-drift {
-  from { transform: skewX(-18deg) translateX(-2.5%); }
-  to { transform: skewX(-11deg) translateX(2.5%); }
-}
-deck-stage[data-deck-static] .slide::before { animation: none; }
-/* In a PDF the curtains print as images (Chrome rasterizes see-through
-   gradients, about 800 KB a slide), so only the slides that carry the look
-   keep them; a mask would print as an image too. */
-@media print {
-  .slide::before { animation: none; -webkit-mask-image: none; mask-image: none; }
-  .slide:not(.slide--title):not(.slide--chapter):not(.slide--focus)::before { display: none; }
-}
-
-/* Print and PDF: gradient text prints with a hairline box around it, and
-   glows print as dark halos; solid colours instead. */
-@media print {
-  em, .slide-footer > span:last-child:not(:first-child), .chapter-num, .slide-body ol > li::before {
-    background: none !important;
-    -webkit-text-fill-color: currentColor !important;
-    color: var(--aurora-a) !important;
-    filter: none !important;
-  }
-  .slide-body ul > li::before, .focus-eyebrow::before, .slide-header > span:last-child:not(:empty)::after { box-shadow: none !important; }
-  /* Frosted glass blurs what lies behind it, which prints as an image. */
-  .slide *, .slide *::before { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
-}
-
-/* Content slides: a shimmer along the upper edge only. */
-.slide { --aurora-strength: 0.2; --aurora-reach: 0%; }
-
-/* Night slides: the palette's other variant (dark on a light deck). */
-.slide--chapter, .slide--focus {
-  --bg: var(--inverse-bg);
-  --surface: var(--inverse-surface);
-  --ink: var(--inverse-ink);
-  --ink-soft: var(--inverse-ink-soft);
-  --muted: var(--inverse-muted);
-  --rule: var(--inverse-rule);
-  --accent: var(--inverse-accent);
-  --accent-2: var(--inverse-accent-2);
-  --on-accent: var(--inverse-on-accent);
-  background: var(--bg);
-  color: var(--ink);
-}
-
-/* ─────────────────────────────────────────────
-   HEADER / FOOTER
-   ───────────────────────────────────────────── */
-.slide-header {
-  font-weight: 600;
-  letter-spacing: 0.10em;
-  text-transform: uppercase;
-  color: var(--ink-soft);
-}
-.slide-header .brand { color: var(--ink); }
-/* The section label as a small glass pill with a glowing dot. */
-.slide-header > span:last-child:not(:empty) {
-  display: inline-flex;
-  align-items: center;
-  gap: 12px;
-  padding: 8px 22px 8px 16px;
-  border-radius: 999px;
-  background: var(--glass-edge) border-box;
-  border: 1px solid transparent;
-  background-clip: border-box;
-  position: relative;
-  isolation: isolate;
-}
-.slide-header > span:last-child:not(:empty)::before {
-  content: '';
-  position: absolute;
-  inset: 1px;
-  border-radius: inherit;
-  background: var(--glass);
-  -webkit-backdrop-filter: blur(18px);
-  backdrop-filter: blur(18px);
-  z-index: -1;
-}
-.slide-header > span:last-child:not(:empty)::after {
-  content: '';
-  order: -1;
-  width: 9px;
-  height: 9px;
-  border-radius: 50%;
-  background: var(--aurora-gradient);
-  box-shadow: 0 0 12px var(--aurora-a);
-}
-
-.slide-logo {
-  position: absolute;
-  top: var(--pad-y);
-  right: var(--pad-x);
-  height: 96px;
-  width: auto;
-  max-width: 360px;
-  object-fit: contain;
-  filter: var(--logo-filter, none);
-  transform: translateY(calc(var(--fs-eyebrow) * 0.5 - 50%));
-}
-
-.slide-footer {
-  font-family: var(--font-body);
-  font-size: var(--fs-small);
-  font-weight: 400;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--muted);
-  padding-top: 24px;
-}
-.slide-footer > span:last-child:not(:first-child) {
-  font-weight: 800;
-  letter-spacing: 0;
-  background: var(--aurora-gradient);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-/* ─────────────────────────────────────────────
-   TYPOGRAPHY
-   ───────────────────────────────────────────── */
-.eyebrow {
-  font-family: var(--font-body);
-  font-size: var(--fs-eyebrow);
-  font-weight: 700;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  color: var(--muted);
-  margin: 0 0 var(--gap-title) 0;
-}
-.display {
-  font-family: var(--font-display);
-  font-size: var(--fs-display);
-  font-weight: 800;
-  line-height: 0.98;
-  letter-spacing: -0.045em;
-  margin: 0;
-  color: var(--ink);
-  text-wrap: balance;
-}
-.title {
-  font-family: var(--font-display);
-  font-size: var(--fs-h);
-  font-weight: 800;
-  line-height: 1.04;
-  letter-spacing: -0.03em;
-  margin: 0;
-  color: var(--ink);
-  text-wrap: balance;
-}
-.subtitle {
-  font-family: var(--font-body);
-  font-size: var(--fs-sub);
-  font-weight: 400;
-  line-height: 1.3;
-  letter-spacing: -0.01em;
-  color: var(--ink-soft);
-  margin: 0;
-  text-wrap: pretty;
-}
-.body-text {
-  font-family: var(--font-body);
-  font-size: var(--fs-body);
-  font-weight: 400;
-  line-height: 1.5;
-  color: var(--ink-soft);
-  margin: 0;
-  text-wrap: pretty;
-}
-.meta {
-  font-family: var(--font-body);
-  font-size: var(--fs-small);
-  color: var(--muted);
-}
-/* Key words glow in the accent gradient. */
-em {
-  font-style: normal;
-  background: var(--aurora-gradient);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-strong { color: var(--ink); font-weight: 700; }
-
-/* ─────────────────────────────────────────────
-   LAYOUT: TITLE — the full aurora over the sky
-   ───────────────────────────────────────────── */
-.slide--title { --aurora-strength: 0.5; --aurora-reach: 30%; }
-.slide--title .slide-body {
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-}
-.slide--title .display {
-  font-size: var(--fs-display);
-  max-width: 1500px;
-}
-.slide--title .title-text { display: flex; flex-direction: column; align-items: center; }
-.slide--title .subtitle {
-  margin-top: 56px;
-  max-width: 1100px;
-}
-/* With an image: the image fills the right half, the title stands at the
-   lower left, below the brightest light, instead of being pushed up into it. */
-.slide--title.has-image .slide-body {
-  display: grid;
-  grid-template-columns: 1.1fr 1fr;
-  column-gap: 88px;
-  align-items: stretch;
-  text-align: left;
-  padding-bottom: 32px;
-}
-.slide--title.has-image .title-text {
-  align-items: flex-start;
-  justify-content: flex-end;
-  min-width: 0;
-}
-.slide--title.has-image .display { font-size: calc(var(--fs-display) * 0.62); }
-.slide--title.has-image .subtitle { margin-top: 40px; }
-.slide--title.has-image .title-image {
-  width: 100%;
-  height: 100%;
-  min-height: 0;
-  object-fit: cover;
-  border-radius: 24px;
-}
-
-/* ─────────────────────────────────────────────
-   LAYOUT: CHAPTER — a night sky with bright curtains
-   ───────────────────────────────────────────── */
-.slide--chapter { --aurora-strength: 0.85; --aurora-reach: 35%; }
-.slide--chapter .slide-body {
-  justify-content: flex-end;
-  align-items: flex-start;
-  padding-bottom: 24px;
-}
-.chapter-num {
-  font-family: var(--font-display);
-  font-size: 340px;
-  font-weight: 800;
-  /* Gradient text is painted only inside the element's box: a line height
-     below the glyphs' height cut off the bottom of the digits. The full line
-     height, with the spacing taken back by the margins. */
-  line-height: 1.05;
-  padding-right: 0.04em;
-  letter-spacing: -0.06em;
-  background: var(--aurora-gradient);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  filter: drop-shadow(0 0 40px color-mix(in oklab, var(--aurora-c) 45%, transparent));
-  margin: -0.12em 0 -0.06em -12px;
-}
-.chapter-meta {
-  font-family: var(--font-body);
-  font-size: var(--fs-eyebrow);
-  font-weight: 700;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  color: var(--ink-soft);
-  margin: 0 0 20px 0;
-}
-.slide--chapter .chapter-title {
-  font-family: var(--font-display);
-  font-size: var(--fs-title);
-  font-weight: 800;
-  line-height: 1.0;
-  letter-spacing: -0.04em;
-  margin: 0 0 40px 0;
-  color: var(--ink);
-  max-width: 1400px;
-  text-wrap: balance;
-}
-.slide--chapter .chapter-desc {
-  font-family: var(--font-body);
-  font-size: var(--fs-sub);
-  font-weight: 400;
-  line-height: 1.35;
-  color: var(--ink-soft);
-  max-width: 1100px;
-  margin: 0;
-}
-.slide--chapter.has-image .slide-body {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  column-gap: 80px;
-  align-items: stretch;
-}
-.slide--chapter.has-image .chapter-content {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  align-items: flex-start;
-}
-.slide--chapter.has-image .chapter-image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: 24px;
-}
-
-/* ─────────────────────────────────────────────
-   LAYOUT: FOCUS — a statement under the night sky
-   ───────────────────────────────────────────── */
-.slide--focus { --aurora-strength: 0.6; --aurora-reach: 20%; }
-.slide--focus .slide-body {
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-}
-.focus-eyebrow {
-  display: inline-flex;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 28px 10px 20px;
-  border-radius: 999px;
-  background: var(--glass);
-  -webkit-backdrop-filter: blur(20px);
-  backdrop-filter: blur(20px);
-  border: 1px solid color-mix(in oklab, var(--rule) 70%, transparent);
-  font-family: var(--font-body);
-  font-size: var(--fs-eyebrow);
-  font-weight: 700;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: var(--ink-soft);
-  margin: 0 0 56px 0;
-}
-.focus-eyebrow::before {
-  content: '';
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background: var(--aurora-gradient);
-  box-shadow: 0 0 12px var(--aurora-a);
-}
-.focus-statement,
-.slide--focus .focus-content h1,
-.slide--focus .focus-content p {
-  font-family: var(--font-display);
-  font-size: var(--fs-focus);
-  font-weight: 800;
-  line-height: 1.06;
-  letter-spacing: -0.04em;
-  color: var(--ink);
-  max-width: 1500px;
-  margin: 0;
-  text-wrap: balance;
-  text-align: center;
-}
-.focus-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-}
-.focus-attribution {
-  font-family: var(--font-body);
-  font-size: var(--fs-small);
-  font-weight: 600;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: var(--muted);
-  margin: 56px 0 0 0;
-}
-
-/* ─────────────────────────────────────────────
-   LAYOUT: IMAGE + TEXT
-   ───────────────────────────────────────────── */
-.image-pane {
-  flex: 1.15;
-  min-width: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--surface);
-  overflow: hidden;
-  position: relative;
-  border-radius: 28px;
-  box-shadow: 0 24px 60px -24px color-mix(in oklab, var(--aurora-c) 45%, transparent);
-}
-.image-placeholder {
-  width: 100%;
-  height: 100%;
-  background: repeating-linear-gradient(135deg, var(--surface) 0 22px, var(--bg) 22px 44px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.image-placeholder span {
-  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
-  font-size: 22px;
-  color: var(--muted);
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  background: var(--bg);
-  padding: 14px 20px;
-  border: 1px solid var(--rule);
-  border-radius: 999px;
-}
-.text-pane .title { font-size: var(--fs-h); }
-.text-pane .body-text + .body-text { margin-top: 8px; }
-.text-pane .eyebrow { margin-bottom: 8px; }
-
-/* ─────────────────────────────────────────────
-   LISTS — glowing dots, gradient numbers
-   ───────────────────────────────────────────── */
-.slide-body ul > li {
-  font-weight: 400;
-  line-height: 1.35;
-  padding-left: 46px;
-  position: relative;
-}
-.slide-body ul > li::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0.42em;
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  background: var(--aurora-gradient);
-  box-shadow: 0 0 14px color-mix(in oklab, var(--aurora-a) 55%, transparent);
-}
-.slide-body ol > li {
-  padding-left: 60px;
-  position: relative;
-}
-.slide-body ol > li::before {
-  content: counter(slide-ol);
-  position: absolute;
-  left: 0;
-  top: 0;
-  font-family: var(--font-display);
-  font-weight: 800;
-  line-height: 1.35;
-  background: var(--aurora-gradient);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-/* ─────────────────────────────────────────────
-   LAYOUT: FULL-BLEED IMAGE
-   ───────────────────────────────────────────── */
-.slide--full-bleed-image::before { display: none; }
-.slide--full-bleed-image.has-overlay .slide-bg::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.15));
-}
-.slide--full-bleed-image .overlay-title {
-  font-family: var(--font-display);
-  font-size: calc(var(--fs-h) * 1.26);
-  font-weight: 800;
-  line-height: 1.02;
-  letter-spacing: -0.04em;
-  color: #fff;
-  margin: 0;
-  max-width: 1300px;
-  text-wrap: balance;
-}
-
-/* ─────────────────────────────────────────────
-   CONTENT SLIDE
-   ───────────────────────────────────────────── */
-.slide-body h1 {
-  font-family: var(--font-display);
-  font-size: var(--fs-h);
-  font-weight: 800;
-  line-height: 1.04;
-  letter-spacing: -0.035em;
-  color: var(--ink);
-  margin: 0 0 var(--gap-title) 0;
-  max-width: 1500px;
-  text-wrap: balance;
-}
-.slide-body h2 {
-  font-family: var(--font-display);
-  font-size: var(--fs-sub);
-  font-weight: 700;
-  line-height: 1.15;
-  letter-spacing: -0.02em;
-  color: var(--ink);
-  margin: 0 0 var(--gap-item) 0;
-}
-.slide-body p {
-  font-family: var(--font-body);
-  font-size: var(--fs-body);
-  font-weight: 400;
-  line-height: 1.5;
-  color: var(--ink-soft);
-  margin: 0 0 var(--gap-item) 0;
-  text-wrap: pretty;
-}
-
-/* ─────────────────────────────────────────────
-   GLASS — callouts and code as frosted panes with a gradient edge
-   ───────────────────────────────────────────── */
-.slide-body .callout {
-  position: relative;
-  isolation: isolate;
-  border: 1.5px solid transparent;
-  border-radius: 22px;
-  background: var(--glass-edge) border-box;
-  padding: 26px 34px 28px;
-  margin: 36px 0 0;
-  max-width: 1300px;
-  box-shadow: 0 18px 50px -24px color-mix(in oklab, var(--aurora-c) 50%, transparent);
-}
-.slide-body .callout::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: 20px;
-  background: color-mix(in oklab, var(--bg) 88%, transparent);
-  -webkit-backdrop-filter: blur(20px);
-  backdrop-filter: blur(20px);
-  z-index: -1;
-}
-.slide-body .callout-title {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  font-family: var(--font-body);
-  font-size: var(--fs-eyebrow);
-  font-weight: 700;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  margin: 0 0 10px 0;
-}
-.slide-body .callout-title::before {
-  content: '';
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background: currentColor;
-  box-shadow: 0 0 10px currentColor;
-}
-.slide-body .callout p { padding-left: 0; color: var(--ink); font-size: var(--fs-body); }
-.slide-body .callout-tip .callout-title { color: var(--accent); }
-/* Signal colours mixed with the text colour, readable on the glass in light and dark */
-.slide-body .callout-note .callout-title { color: color-mix(in oklab, var(--callout-note) 65%, var(--ink)); }
-.slide-body .callout-important .callout-title { color: color-mix(in oklab, var(--callout-important) 65%, var(--ink)); }
-.slide-body .callout-warning .callout-title { color: color-mix(in oklab, var(--callout-warning) 45%, var(--ink)); }
-.slide-body .callout-caution .callout-title { color: color-mix(in oklab, var(--callout-caution) 65%, var(--ink)); }
-/* Lecture blocks: theorems glow in the accent, definitions in the second */
-.slide-body :is(.callout-theorem, .callout-lemma, .callout-corollary) .callout-title { color: var(--accent); }
-.slide-body .callout-definition .callout-title { color: var(--accent-2); }
-
-.code-block {
-  --code-bg: color-mix(in oklab, var(--surface) 92%, transparent);
-  --code-radius: 20px;
-  --code-size: 30px;
-  background: var(--code-bg);
-  border-radius: var(--code-radius);
-  padding: 40px 48px;
-  position: relative;
-  margin: 0;
-  overflow: hidden;
-  font-size: var(--code-size);
-  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
-  line-height: 1.6;
-  border: 1px solid color-mix(in oklab, var(--rule) 70%, transparent);
-  box-shadow: 0 18px 50px -24px color-mix(in oklab, var(--aurora-c) 45%, transparent);
-}
-.code-block code {
-  font-family: inherit;
-  font-size: inherit;
-  background: none;
-  padding: 0;
-}
-
-/* ─────────────────────────────────────────────
-   AUDIENCE QUESTIONS — bars of light, glass cards
-   ───────────────────────────────────────────── */
-.slide .poll-track, .slide .scale-track { border-radius: 999px; background: color-mix(in oklab, var(--rule) 55%, transparent); }
-.slide .poll-fill { border-radius: 999px; background: var(--aurora-gradient); box-shadow: 0 0 18px color-mix(in oklab, var(--aurora-a) 45%, transparent); }
-.slide .scale-fill { border-radius: 12px 12px 0 0; background: linear-gradient(to top, var(--aurora-a), var(--aurora-b)); }
-.slide .question-cards li { border-radius: 18px; border-left: 0; background: var(--glass); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--rule) 70%, transparent); }
-.slide .poll-join { border-radius: 24px; }
-
-/* ─────────────────────────────────────────────
-   MATH (KaTeX)
-   ───────────────────────────────────────────── */
-.slide .katex-display {
-  font-size: var(--fs-sub);
-  margin: 48px 0;
-  overflow-x: auto;
-  overflow-y: hidden;
-}
-
-/* ─────────────────────────────────────────────
-   QUOTATIONS — no pane, only a large quotation mark in the colours of
-   the lights beside the quote
-   ───────────────────────────────────────────── */
-.slide-body blockquote {
-  position: relative;
-  margin: 0 0 var(--gap-item);
-  padding: 0 0 0 76px;
-  border: 0;
-  max-width: 1300px;
-  color: var(--ink);
-}
-.slide-body blockquote::before {
-  content: '\201C';
-  position: absolute;
-  left: 0;
-  top: -18px;
-  font-size: 120px;
-  font-weight: 800;
-  line-height: 1;
-  background: var(--aurora-gradient);
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
-}