inst/reveal.js-5.2.1/css/theme/source/ids.scss

/**
 * IDS theme for reveal.js
 *
 * By Marc Kupietz
 */


// Default mixins and settings -----------------
@import "../template/mixins";
@import "../template/settings";
// ---------------------------------------------


// Include theme-specific fonts
// NB: https://korap.ids-mannheim.de/font/{fira-condensed,libertinus}.css both
// return 404, so the condensed and bold faces never loaded and headings fell
// back to a regular-width, regular-weight face. Google Fonts serves the real
// Fira Sans Condensed incl. weights 700/800 (this is where the IDS reference
// decks get it from too); the others are kept for locally installed copies.
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:wght@300;400;700;800&family=Fira+Sans:wght@200;300;400;700&family=Fira+Sans+Extra+Condensed:wght@300;700&display=swap');
@import url('https://code.cdn.mozilla.net/fonts/fira.css');
// Fira Code: the monospaced Fira Sans variant for highlighted/code text (as
// in the IDS reference decks; falls back to Fira Mono from the Mozilla CSS
// above, then DejaVu Sans Mono)
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap');
@import url('https://korap.ids-mannheim.de/font/libertinus.css');

$idsOrange: #f6a800;

// Override theme settings (see ../template/settings.scss)
$backgroundColor: #fff;

$mainColor: #222;
$headingColor: $idsOrange;

$mainFontSize: 42px;
$mainFont: 'Libertinus Serif', Helvetica, sans-serif;
$headingFont: 'Fira Sans Extra Condensed', 'Fira Sans Condensed', 'Fira Sans', Helvetica, sans-serif;
$headingTextShadow: none;
$headingLetterSpacing: 0.05ex;
$headingTextTransform: uppercase;
$headingFontWeight: 700;
$linkColor: #2a76dd;
$linkColorHover: lighten( $linkColor, 15% );
$selectionBackgroundColor: lighten( $linkColor, 25% );

$heading1Size: 2em;
$heading2Size: 1.35em;
$heading3Size: 0.9em;
$heading4Size: 0.7em;

$listBulletColor: $idsOrange;

// --r-code-font (template emits #{$codeFont} as-is)
$codeFont: "Fira Code", "Fira Mono", "DejaVu Sans Mono", "Source Code Pro", monospace;

// Change text colors against dark slide backgrounds
@include dark-bg-text-color(#fff);


// Theme template ------------------------------
@import "../template/theme";
// ---------------------------------------------

// Bar/logo sizes, expressed as fractions of the slide's own height (reveal.js
// exposes the configured slide size as --slide-width / --slide-height custom
// properties). Sizing relative to the slide rather than the raw viewport (vh
// units) keeps things pinned to the true slide edges instead of drifting
// into the letter-/pillarboxed margins when the window's aspect ratio
// doesn't exactly match the configured one.
$idsBarWidthRatio: 0.05;
$idsLogoWidthRatio: 0.25;
// Partner (second institution) logo: shown next to the IDS logo on every
// slide when the document sets the `partner_logo` yaml entry (the template
// then publishes the URL as the --partner-logo custom property).
$idsPartnerGap: 16px;
$idsPartnerHeightRatio: 0.085;
$idsBarWidth: calc(var(--slide-height) * #{$idsBarWidthRatio});
$idsHeadingGap: 24px;

// Vertical gap between the title and the subtitle. The subtitle's bar segment
// reaches up by this much to bridge it, so the two segments read as one bar.
$idsHeadingSpacing: 8px;

// Rendered height of one subtitle line. Slides without a subtitle reserve
// exactly this much, so the bar and the start of the body content stay put
// from slide to slide instead of jumping. Must stay in sync with
// $heading3Size (0.9em) and $headingLineHeight (1.2, from template/settings).
$idsSubtitleHeight: 0.9 * $mainFontSize * 1.2;

// The two bar segments abut at a fractional pixel, which browsers round into a
// visible hairline. Overlapping them slightly makes the join seamless.
$idsBarOverlap: 2px;

// reveal.js centres the scaled slide in the viewport, so whenever the window's
// aspect ratio does not match the deck's, an empty band is left beside (or
// above) the slide and the bar would not reach the window's physical edge.
// Working out how wide that band is needs viewport / scale, and CSS cannot
// divide a length by a length -- which is why the hand-written IDS decks solve
// this in JavaScript. revealjs_presentation()'s template therefore publishes
// the band widths, in slide coordinates, as --ids-band-left / --ids-band-top,
// and the bar simply shifts out by that much. Falling back to 0px keeps this
// correct whenever the aspect ratios do match, and if the script never runs.
$idsBandLeft: var(--ids-band-left, 0px);

// revealjs_presentation() sets reveal.js' own `margin` option to 0, so that the
// slide box is the whole viewport and the orange bar can sit flush in its top
// left corner. That would otherwise leave the body content running edge to
// edge, so the breathing room reveal.js' margin used to provide is added back
// here as slide padding; the bar and the headings reach back out to the edge
// with matching negative margins below. The inset is the bar plus its gap, so
// body content lines up with the heading text rather than with the bar.
$idsContentInset: calc(#{$idsBarWidth} + #{$idsHeadingGap});

// The html prefix is solely about specificity: reveal's print styles
// (html.reveal-print .reveal .slides section { padding: 0 !important }) would
// otherwise beat this rule and flatten the inset on ?print-pdf pages. An html
// prefix ties that specificity, and since the theme is loaded after
// reveal.css, this rule wins both on screen and in print.
html .reveal .slides section:not(.stack) {
  box-sizing: border-box !important;
  padding-left: #{$idsContentInset} !important;
  padding-right: #{$idsContentInset} !important;
}

// Body content is left aligned with the headings; the title frame keeps its
// own centered layout.
.reveal .slides section:not(.stack):not(.title-frame) {
  text-align: left !important;
}

// reveal.js centers lists by making them inline-block; make them ordinary
// blocks so they line up with the headings.
//
// The markers are NOT native ::marker glyphs: browsers anchor outside-position
// markers at slightly different offsets per engine (and per scale), and even
// ::before font glyphs carry font-specific side bearings, so a padding(text)-
// based alignment of the bullet column with the heading text can never be
// pixel-exact everywhere. Instead we DRAW the markers as CSS boxes in
// absolutely positioned li::before rules. Geometry (all values in the item's
// own font size, so the hierarchy scales with the 0.8em per-level sizing from
// the NESTED LISTS section below):
//
//   - item text starts at (list left edge) + 0.65em
//   - the marker box starts exactly at the list's left edge; on content
//     slides that edge coincides with the heading text's left edge, i.e. the
//     bullet column is flush with the slide title, deterministically in every
//     browser and at every window size
//
// For nested lists the ::before offset has to be divided by the 0.8 font-size
// factor, because the list's padding is computed in the PARENT item's font
// size while the ::before offset is computed in the (smaller) child size.
$idsListIndent: 0.65em;
$idsListShrink: 0.8;
$idsMarkerSize: 0.22em;
$idsMarkerTop: calc((1.3em - #{$idsMarkerSize}) / 2);

.reveal .slides section:not(.title-frame) ul,
.reveal .slides section:not(.title-frame) ol {
  display: block !important;
  text-align: left !important;
  margin-left: 0 !important;
  padding-left: $idsListIndent !important;
  list-style: none !important;
}

.reveal .slides section:not(.title-frame) li {
  position: relative !important;
}

.reveal .slides section:not(.title-frame) li::before {
  position: absolute !important;
  left: calc(-1 * #{$idsListIndent}) !important;
  color: var(--r-list-bullet-color) !important;
}

.reveal .slides section:not(.title-frame) li li::before {
  left: calc(-1 * #{$idsListIndent} / #{$idsListShrink}) !important;
}

// Unordered-list markers: drawn boxes (round dot, square, ring for deeper
// levels), vertically centered on the item's first line.
.reveal .slides section:not(.title-frame) ul > li::before {
  content: "" !important;
  top: $idsMarkerTop !important;
  width: $idsMarkerSize !important;
  height: $idsMarkerSize !important;
  box-sizing: border-box !important;
  border-radius: 50% !important;
  background: var(--r-list-bullet-color) !important;
}

.reveal .slides section:not(.title-frame) ul ul > li::before {
  border-radius: 0 !important;              // square
}

.reveal .slides section:not(.title-frame) ul ul ul > li::before {
  background: transparent !important;       // ring
  border: 0.055em solid var(--r-list-bullet-color) !important;
  border-radius: 50% !important;
}

// Ordered lists: the CSS list-item counter honours the HTML start/value
// attributes, so pandoc's `start`/`value` lists keep their numbers. Numbers
// are right-aligned into the indent, ending just before the item text.
.reveal .slides section:not(.title-frame) ol > li::before {
  content: counter(list-item, decimal) "." !important;
  width: calc(#{$idsListIndent} - 0.12em) !important;
  text-align: right !important;
}

// Checkbox (pandoc task) lists keep their checkboxes, no markers on top.
.reveal .slides section:not(.title-frame) ul.task-list li::before {
  content: none !important;
}

// reveal.js centres code blocks (width: 90%; margin: auto); make them fill the
// slide's text column so they start on the same left edge as the headings.
.reveal .slides section:not(.title-frame) pre {
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

// The IDS logo stays a slide-wide watermark (top right of every slide,
// including the title page). The SVG carries no internal padding of its own,
// so it needs an explicit inset from the slide's edges. That inset is shared
// by everything that sits in a corner of the slide -- IDS (+ partner) logo
// top right, website QR top left, funder logo bottom left, WGL membership
// logo bottom right -- and is used for both edges of each corner, so all
// four keep exactly the same distance to the slide's borders.
$idsLogoInset: 8px;

.reveal .slides {
  // Second layer: the optional partner institution logo (--partner-logo is
  // supplied by the template from the document's `partner_logo` yaml entry);
  // paints as "none" without it, leaving a harmless empty layer.
  background-image: url('https://corpora.ids-mannheim.de/slides/reveal.js.ids/images/IDS-Logo-2019.svg'),
    var(--partner-logo, none);
  background-repeat: no-repeat;
  background-position: top #{$idsLogoInset} right #{$idsLogoInset},
    top #{$idsLogoInset} right calc(#{$idsLogoInset} + var(--slide-height) * #{$idsLogoWidthRatio} + #{$idsPartnerGap});
  background-size: calc(var(--slide-height) * #{$idsLogoWidthRatio}) auto,
    auto calc(var(--slide-height) * #{$idsPartnerHeightRatio});
}

// The orange bar is drawn as a ::before on the headings rather than on the
// slide, in two segments: one behind the title and one behind the subtitle.
// Because each segment is sized as a percentage of its own heading's box, the
// bar always ends exactly at the bottom of the last heading -- it follows a
// subtitle when there is one, stops at the title when there isn't, and grows
// by itself when a heading wraps onto a second line. No fixed heights, and no
// JavaScript. Headings carry no vertical padding, so they sit as high on the
// slide as the bar does. Every rule is !important because this theme has to
// win against plugin- and document-level CSS loaded after it.
.reveal .slides section:not(.title-frame) > h1:first-child,
.reveal .slides section:not(.title-frame) > h2:first-child {
  position: relative !important;
  display: block !important;
  text-align: left !important;
  margin: 0 calc(-1 * #{$idsContentInset}) #{$idsHeadingSpacing} calc(-1 * #{$idsContentInset}) !important;
  padding: 0 0 0 #{$idsContentInset} !important;
  font-weight: var(--r-heading-font-weight) !important;
}

.reveal .slides section:not(.title-frame) > h1:first-child::before,
.reveal .slides section:not(.title-frame) > h2:first-child::before,
.reveal .slides section:not(.title-frame) > h2:first-child + h3::before {
  content: "" !important;
  position: absolute !important;
  width: #{$idsBarWidth} !important;
  // A flat fill rather than orange_bar.png: that image is two-toned (a lighter
  // band across its top), so stretching it over each segment separately left a
  // pale seam where the two met. The IDS reference decks draw a flat #f6a800.
  background: #{$idsOrange} !important;
}

// Title segment: pulled out to the window's physical left edge.
.reveal .slides section:not(.title-frame) > h1:first-child::before,
.reveal .slides section:not(.title-frame) > h2:first-child::before {
  top: 0 !important;
  left: calc(-1 * #{$idsBandLeft}) !important;
  height: 100% !important;
}

// A slide without a subtitle reserves the room one would have taken, so the
// bar keeps the same height and the body content starts at the same place on
// every slide. :has() is what lets us ask "is a subtitle coming?" in CSS; where
// it is unsupported such slides simply keep a title-height bar.
//
// The lone title is vertically CENTRED in its reserved bar: half of the
// reservation goes above the text as top padding (the bar segment, anchored
// to the heading box, moves up with it), and the bottom half stays in the bar
// extension plus margin. The space consumed below the bar is reduced by the
// same half, so body content starts where it always did.
.reveal .slides section:not(.title-frame) > h1:first-child:not(:has(+ h3)),
.reveal .slides section:not(.title-frame) > h2:first-child:not(:has(+ h3)) {
  padding-top: calc((#{$idsHeadingSpacing} + #{$idsSubtitleHeight}) / 2) !important;
  margin-bottom: calc((#{$idsHeadingSpacing} + #{$idsSubtitleHeight}) / 2 + #{$blockMargin}) !important;
}

.reveal .slides section:not(.title-frame) > h1:first-child:not(:has(+ h3))::before,
.reveal .slides section:not(.title-frame) > h2:first-child:not(:has(+ h3))::before {
  height: calc(100% + (#{$idsHeadingSpacing} + #{$idsSubtitleHeight}) / 2) !important;
}

// Vertical balance when a subtitle follows: the orange strip between the
// title's baseline and the subtitle's cap height used to be title descent (16)
// + segment spacing (8) + subtitle leading (3) ≈ 27px, against only ≈ 11px of
// orange above the title's cap height. Moving the title 8px DOWN inside its
// box while REMOVING the 8px segment spacing makes the two margins equal
// (19px each) AND keeps the bar's total height and the body content's start
// position pixel-identical: box grows by 8, spacing drops by 8. The subtitle
// segment still rises (#{$idsHeadingSpacing} + #{$idsBarOverlap}) above its
// own box, so the bar stays seamless.
.reveal .slides section:not(.title-frame) > h1:first-child:has(+ h3),
.reveal .slides section:not(.title-frame) > h2:first-child:has(+ h3) {
  padding-top: #{$idsHeadingSpacing} !important;
  margin-bottom: 0 !important;
}

// The subtitle sits in the slide's normal text column, so its segment has to
// reach back out to the slide edge, and up over the gap to the title.
.reveal .slides section:not(.title-frame) > h2:first-child + h3 {
  position: relative !important;
  text-align: left !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-bottom: $blockMargin !important;
}

.reveal .slides section:not(.title-frame) > h2:first-child + h3::before {
  top: calc(-1 * (#{$idsHeadingSpacing} + #{$idsBarOverlap})) !important;
  left: calc(-1 * (#{$idsContentInset} + #{$idsBandLeft})) !important;
  height: calc(100% + #{$idsHeadingSpacing} + #{$idsBarOverlap}) !important;
}

// Section-divider slides: a level 1 heading alone on a slide (pandoc marks
// these .level1). The IDS reference decks centre that title on the slide while
// the bar stays in its usual top left corner, so here the bar cannot hang off
// the heading -- it is painted on the slide itself, at the height it has on
// every other slide, and the heading gets none of the top-left treatment.
$idsTitleHeight: 1.35 * $mainFontSize * 1.2;
$idsBarBlockHeight: $idsTitleHeight + $idsHeadingSpacing + $idsSubtitleHeight;

.reveal .slides section.level1:not(.title-frame) {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.reveal .slides section.level1:not(.title-frame)::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: calc(-1 * #{$idsBandLeft}) !important;
  width: #{$idsBarWidth} !important;
  height: #{$idsBarBlockHeight} !important;
  background: #{$idsOrange} !important;
}

.reveal .slides section.level1:not(.title-frame) > h1:first-child {
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.reveal .slides section.level1:not(.title-frame) > h1:first-child::before {
  content: none !important;
}

// Define additional color effects based on Dracula spec
// https://spec.draculatheme.com/
:root {
  --r-bold-color: #{$idsOrange};
  --r-list-bullet-color: #{$listBulletColor};
}

.reveal {
  // Bold ("highlighted") text gets the orange colour AND the condensed Fira
  // Sans face, as in the IDS reference decks -- the lighter weight and 90%
  // size keep it from dominating the serif body text.
  strong, b {
          font-family: "Fira Sans Condensed", sans-serif;
          font-weight: 600;
          font-size: 90%;
          color: var(--r-bold-color);
  }

  // Dracula colored list bullets and numbers
  ul, ol {
          li::marker {
                  color: var(--r-list-bullet-color) !important;
          }
  }
}

// Nested list items are set progressively smaller, both to emphasise the
// hierarchy and to keep deeply nested lists from visually competing with the
// first level. The em size compounds down the nesting levels, so each deeper
// level is 80% of its parent (level 2: 80%, level 3: 64%, level 4: 51%).
// Markers and the hanging indentation (padding-left: 0.7em above) scale with
// the text automatically.
.reveal li li {
  font-size: 0.8em;
}

// Description lists: dt in orange Fira Sans Condensed, dd indented.
.reveal dl {
  font-size: 0.62em;
  line-height: 1.25;
}
.reveal dt {
  font-weight: 700;
  margin-top: 0.35em;
  font-family: "Fira Sans Condensed", sans-serif;
  color: $idsOrange;
}
.reveal dd {
  margin: 0 0 0 1.2em;
  color: #444;
}


/*********************************************
 * FOOTER
 *********************************************/
 #ids-footer:not(title-slide) {
  opacity: 1;
  background: white;
  color: #444444;
  border-top: dotted orange 2px;
  transition: opacity 800ms ease-in-out;
  position: fixed;
  height: 6%;
  line-height: 6%;
  z-index: -20;
  width: 100%;
  letter-spacing: 0em;
  text-align: center;
  display: table;
}

#ids-footer span {
  height: 100%;
  line-height: 100%;
  z-index: -20;
  font-size: 1.8vh;
  font-family: "Fira Sans Condensed", "Fira Sans", "Roboto Condensed", "League Gothic", Impact, sans-serif;
  display: inline-block;
  display: table-cell;
  vertical-align: middle;
}

/* Bottom position for the IDS-Footer footer when both progress bar and TOC-Progress are visible */
div.progress[style="display: block;"] ~ #ids-footer {
  bottom: calc(3px + 0vh);
}

/* Bottom position for the IDS-Footer footer when TOC-Progress is visible */
#ids-footer {
  bottom: 3px;
}

#ids-footer a {
  color: #555555;
}

/* Bottom position for the IDS-Footer footer when progress bar is visible */
div.progress[style="display: block;"] ~ footer:last-of-type#ids-footer {
  bottom: 3px;
}

/* Bottom position for the IDS-Footer footer when neither progress bar nor TOC-Progress are visible */
footer:last-of-type#ids-footer {
  bottom: 0px;
}

/* Make IDS-Footer invisible if explicitly indicated */
.no-ids-footer #ids-footer {
  opacity: 0;
  transition: opacity 800ms ease-in-out;
}

.title-frame #ids-footer {
  opacity: 0;
  transition: opacity 800ms ease-in-out;
}

.no-toc-progress #ids-footer {
  opacity: 0;
  transition: opacity 800ms ease-in-out;
}

/* Make IDS-Footer invisible in overview mode */
.overview #ids-footer {
  opacity: 0;
  transition: opacity 800ms ease-in-out;
}

/* In print, the footer's negative stacking drops it behind the .pdf-page
 * backgrounds (z-index 1); lift it above them. position: fixed repeats it at
 * the bottom of every printed page. */
html.reveal-print #ids-footer {
  z-index: 100 !important;
}

// reveal's print CSS gives every .pdf-page z-index:1, which forms a separate
// stacking context per page. The slide-number-pdf lives INSIDE such a page, so
// its own z-index only competes within the page: the footer (z-index 100 at
// root level) always paints over it, and raising the number's z-index alone
// cannot help. Remove the per-page stacking context in print (the pages are
// separated by page-break-after:always anyway, so nothing needs stacking), and
// the number's z-index 200 wins against the footer globally. Position stays
// the theme's screen rule (right:29px / bottom:22px), which puts the number
// inside the footer band with its white background cutting the dotted line --
// the same look as on screen.
html.reveal-print .reveal .slides .pdf-page {
  z-index: auto !important;
}

// On screen the number is flanked by the arrow buttons, so its slightly raised
// baseline reads as deliberate; in print it shares the footer band with the
// author/title/date line, whose vertically centered text has its baseline
// ~19px above the page bottom. The number's screen offset (bottom:22px, 14px
// font from reveal's print rule) puts its baseline ~25px up. 15px aligns the
// two baselines. Print-only: the screen rule keeps its 22px.
html.reveal-print div.slide-number-pdf {
  z-index: 200 !important;
  bottom: 15px !important;
}

// On screen the bar segments shift left by --ids-band-left so the bar reaches
// the window's physical edge when the slide is pillarboxed. In print there are
// no bands (.pdf-page == slide box), and if the band values are ever stale
// (e.g. an outdated template script), a nonzero band-left would push the
// segments outside the pdf-page, whose overflow:hidden then clips them.
// Pin the geometry explicitly for print instead of trusting the custom
// property: title segments start at the heading's (== pdf-page's) left edge,
// the subtitle segment (which lives in the text column, inset by
// $idsContentInset) reaches back out by exactly the inset, and the level1
// divider bar starts at the section's left edge. Widths stay the normal bar
// width, so the visible result is pixel-identical to the on-screen bar.
html.reveal-print .reveal .slides section:not(.title-frame) > h1:first-child::before,
html.reveal-print .reveal .slides section:not(.title-frame) > h2:first-child::before {
  left: 0 !important;
}

html.reveal-print .reveal .slides section:not(.title-frame) > h2:first-child + h3::before {
  left: calc(-1 * #{$idsContentInset}) !important;
}

html.reveal-print .reveal .slides section.level1:not(.title-frame)::before {
  left: 0 !important;
}

// The WGL membership logo sits at bottom:10px of the title frame -- inside
// the footer's ~46px band on print pages (the footer is force-shown on every
// page in print view and cannot be hidden per page, position:fixed). Lift the
// logo above the footer in print only; the screen layout stays put.
html.reveal-print .reveal .slides section.title-frame {
  background-position: right #{$idsLogoInset} bottom 55px;
}

// Like the orange bar/IDS logo above, this is painted on the slide itself
// (rather than on .slide-background-content, which spans the raw,
// unscaled viewport) so it stays pinned to the title slide's true
// bottom-right corner instead of the browser window's. Its margin mirrors
// the IDS logo's, so the two sit on one shared inset.
.reveal .slides section.title-frame {
  background-image: url("https://corpora.ids-mannheim.de/slides/reveal.js.ids/images/Mitglied_WGL_transparent.svg");
  background-repeat: no-repeat;
  background-position: right #{$idsLogoInset} bottom #{$idsLogoInset};
  background-size: calc(var(--slide-height) * 0.1) auto;
  /* full slide height, so "bottom" really is the slide's bottom edge */
  height: 100%;
}

// qrlink() codes placed anywhere else in a deck: qr_svg_fit() crops the svg
// to the dark modules, so the quiet zone the code needs to stay scannable is
// this padding (which also keeps a code readable on a dark background).
.reveal a.qrcode {
  display: inline-block;
  padding: 0.5em;
  background: #fff;
}

// Website QR code and funder logo on the title slide (document options
// `website` and `funder_logo`): top-left and bottom-left corners. Like the
// two logos on the right, they keep $idsLogoInset to both slide edges --
// measured to the visible ink, so that all four corners look alike. Both are
// DOM elements injected into the title frame by the pandoc template (the QR
// itself is generated in R by qrlink()); absolute positioning sticks to the
// slide, because reveal.js positions the sections themselves.
//
// qrlink() crops the svg to the dark modules, so the quiet zone the code
// needs to stay scannable is this white plate's padding -- which is also
// what puts the modules themselves at $idsLogoInset from the slide's edges,
// the plate sitting flush in the corner (invisible on the white slide).
.reveal .slides section.title-frame .title-qr {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: calc(var(--slide-height) * 0.28);
  padding: #{$idsLogoInset};
  background: #fff;
}

.reveal .slides section.title-frame .title-qr a.qrcode,
.reveal .slides section.title-frame .title-qr svg {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  // the quiet zone comes from the plate around it here
  padding: 0;
}

.reveal .slides section.title-frame img.funder-logo {
  position: absolute;
  left: #{$idsLogoInset};
  bottom: #{$idsLogoInset};
  height: calc(var(--slide-height) * 0.07);
  // reveal.js gives images a vertical margin, which for an absolutely
  // positioned one would add itself to the inset above.
  margin: 0;
  width: auto;
}

// Lift the funder logo above the print footer band, like the WGL logo above
html.reveal-print .reveal .slides section.title-frame img.funder-logo {
  bottom: 55px;
}

// The navigation chrome is hidden on the title slide (the template toggles
// the ids-title-plain class when the title frame is the current slide). Use
// opacity/visibility rather than display:none so the transition out of the
// title slide fades the chrome in instead of popping it up, and so reveal.js'
// own controls bookkeeping keeps working underneath.
html.ids-title-plain .reveal .controls,
html.ids-title-plain .reveal .slide-number,
html.ids-title-plain .reveal .slide-menu-button {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.reveal .controls,
.reveal .slide-number,
.reveal .slide-menu-button {
  transition: opacity 0.4s;
}


/*********************************************
 * SLIDES MENU
 *********************************************/

// The menu plugin copies .reveal's computed font-family onto .slide-menu as an
// inline style (and its own CSS is loaded after the theme), so without
// !important here the menu would come out in the Libertinus serif body face.
// Fira Sans Condensed is the IDS sans for navigation/UI text, and its narrow
// glyphs keep long (German) slide titles on one line.
.slide-menu-wrapper .slide-menu {
  font-family: "Fira Sans Condensed", sans-serif !important;
}

// Widen the menu a little over the plugin's 300px default -- but only the
// default: a width the user picked via the menu-width option maps to one of
// the plugin's width classes (or an inline style), which must keep winning.
.slide-menu-wrapper .slide-menu:not(.slide-menu--wide):not(.slide-menu--half):not(.slide-menu--third):not(.slide-menu--full):not(.slide-menu--custom) {
  width: 372px !important;
}

// Tighter, less wasteful rows than the plugin's 10px 18px padding with a 12px
// icon gap: the icon column and generous side padding eat exactly the width
// the titles need.
.slide-menu-wrapper .slide-menu-item,
.slide-menu-wrapper .slide-menu-item-vertical {
  padding: 6px 12px !important;
  line-height: 1.3 !important;
}

.slide-menu-wrapper .slide-menu-item-vertical {
  padding-left: 26px !important;
}

// Wrapped titles: make the row a flex line so the second line aligns with the
// first instead of sliding under the bullet/circle icon. The icon sits on the
// first line's text baseline; the title column takes the remaining width and
// wraps within itself.
.slide-menu-wrapper .slide-menu-item,
.slide-menu-wrapper .slide-menu-item-vertical {
  display: flex !important;
  align-items: baseline !important;
}

.slide-menu-wrapper .slide-menu-item-title {
  flex: 1 !important;
  min-width: 0 !important;
}

.slide-menu-wrapper .slide-menu-item i.far,
.slide-menu-wrapper .slide-menu-item i.fas,
.slide-menu-wrapper .slide-menu-item-vertical i.far,
.slide-menu-wrapper .slide-menu-item-vertical i.fas,
.slide-menu-wrapper .slide-menu-item svg.svg-inline--fa,
.slide-menu-wrapper .slide-menu-item-vertical svg.svg-inline--fa {
  padding-right: 8px !important;
}

// Top-level (section) entries in bold, marking the hierarchy as the indented
// sub-slides alone do now. Note the Google Fonts import only ships Fira Sans
// Condensed in 300/400/700/800 -- there is no 600.
.slide-menu-wrapper .slide-menu-item {
  font-weight: 700 !important;
}

// Current slide in the IDS accent colour, matching the slide-number and the
// orange bar.
.slide-menu-wrapper .active-menu-panel li.active {
  color: #{$idsOrange} !important;
}

/*
 * Menu controls
 */
body .reveal .slide-menu-button {
  color: #aaaaaa !important;
  position: fixed;
  left: 30px;
  bottom: 2%;
  vertical-align: middle;
  z-index: 30;
  font-size: 2vh;
}

#customcontrols > ul {
  color: #aaaaaa !important;
  position: fixed;
  left: 50px;
  bottom: 2% !important;
  vertical-align: middle;
  z-index: 30;
  font-size: 2vh;
}

@media only screen and (min-width: 500px) {
  #customcontrols > ul {
    bottom: 2% !important;
  }
}

.reveal .controls .controls-arrow {
  position: relative;
  width: 3.6em;
  height: 3.6em;
  bottom: -12px;
  right: -4px;
}

.reveal h3, h4, h5, h6 {
  text-transform: none !important;
}

.reveal h3, h4, h5, h6 {
  text-transform: none !important;
}

.reveal h2 + h3 {
  margin-top: -0.5em !important;
}

.title-frame h1,
.title-frame h2 {
    margin: 0 0 0 0;
    background: rgb(246, 168, 0);
    color: white;
    font-family: "Fira Sans Condensed", "Roboto Condensed", Impact, sans-serif;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.05ex;
    text-transform: uppercase;
    width: 100%;
    margin-top: .5em;
    padding-top: .5em;
    font-size: 1.75em;
    margin-left: 0;
    text-align: center;
    text-shadow: none;
    word-wrap: break-word;
}


.title-frame .author {
  font-family: "Fira Sans Condensed", sans-serif;
  font-weight: 400;
  color: #657b83;
  margin-top: 10vh;
}

.title-frame .place {
  font-family: "Fira Sans Condensed", sans-serif;
  margin-top: 40px;
  font-weight: 400;
  color: #657b83;
}

.title-frame h2 {
  margin-top: -3px;
  margin-bottom: 1em;
  padding-bottom: .5em;
  font-size: 1em;
}

/*********************************************
 * TABLES
 *********************************************/

 th {
  color: rgb(246, 168, 0);
}

table {
  font-family: 'Fira Sans Condensed', sans-serif;
  font-weight: 400;
  font-size: 16px;
  // Fira Sans Condensed ships proportional figures by default, so the digits
  // in neighbouring rows do not line up; tabular numbers (tnum) fix the digit
  // widths and align numeric table columns vertically.
  font-variant-numeric: tabular-nums;
}

.reveal table.dataTable {
  border: #aaaaaa 1px solid;
  border-collapse: collapse;
}

.reveal table.dataTable td {
  border: #aaaaaa 1px solid;
  border-collapse: collapse;
}

.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate, table.dataTable thead > tr > th.sorting::before, table.dataTable thead > tr > th.sorting::after, table.dataTable thead > tr > th.sorting_asc::before, table.dataTable thead > tr > th.sorting_asc::after, table.dataTable thead > tr > th.sorting_desc::before, table.dataTable thead > tr > th.sorting_desc::after, table.dataTable thead > tr > th.sorting_asc_disabled::before, table.dataTable thead > tr > th.sorting_asc_disabled::after, table.dataTable thead > tr > th.sorting_desc_disabled::before, table.dataTable thead > tr > th.sorting_desc_disabled::after, table.dataTable thead > tr > td.sorting::before, table.dataTable thead > tr > td.sorting::after, table.dataTable thead > tr > td.sorting_asc::before, table.dataTable thead > tr > td.sorting_asc::after, table.dataTable thead > tr > td.sorting_desc::before, table.dataTable thead > tr > td.sorting_desc::after, table.dataTable thead > tr > td.sorting_asc_disabled::before, table.dataTable thead > tr > td.sorting_asc_disabled::after, table.dataTable thead > tr > td.sorting_desc_disabled::before, table.dataTable thead > tr > td.sorting_desc_disabled::after {
  display: none;
}

.caption {
  font-family: 'Fira Sans Condensed', sans-serif;
  font-weight: 400;
  font-size: 16px;
	text-align: center;
}

/*
table.display td { white-space: nowrap; }
*/

.dt-buttons, .dataTables_filter {
  margin-top: 10pt;
}

/* Sort Arrows in DataTables */
table.dataTable thead>tr>th.sorting:before, table.dataTable thead>tr>th.sorting:after, table.dataTable thead>tr>th.sorting_asc:before, table.dataTable thead>tr>th.sorting_asc:after, table.dataTable thead>tr>th.sorting_desc:before, table.dataTable thead>tr>th.sorting_desc:after, table.dataTable thead>tr>th.sorting_asc_disabled:before, table.dataTable thead>tr>th.sorting_asc_disabled:after, table.dataTable thead>tr>th.sorting_desc_disabled:before, table.dataTable thead>tr>th.sorting_desc_disabled:after, table.dataTable thead>tr>td.sorting:before, table.dataTable thead>tr>td.sorting:after, table.dataTable thead>tr>td.sorting_asc:before, table.dataTable thead>tr>td.sorting_asc:after, table.dataTable thead>tr>td.sorting_desc:before, table.dataTable thead>tr>td.sorting_desc:after, table.dataTable thead>tr>td.sorting_asc_disabled:before, table.dataTable thead>tr>td.sorting_asc_disabled:after, table.dataTable thead>tr>td.sorting_desc_disabled:before, table.dataTable thead>tr>td.sorting_desc_disabled:after {
  right: 0 !important;
  line-height: 80% !important;
}

/*********************************************
 * BIBLIOGRAPHY
 *********************************************/

.reveal .references {
  font-family: "Fira Sans Condensed", sans-serif;
  font-size: 16px;
  text-align: left;
  margin-top: 10px;
  max-height: 510px;
  font-weight: 400;
  color: #253b43;
  overflow-y: auto;
}

.hanging-indent > .csl-entry {
  padding-left: 22px ;
  text-indent: -22px ;
}

// .references scopes these above pandoc's CSL defaults (div.csl-entry), which
// otherwise win on specificity and pin margin-bottom to 0em.
.references .csl-entry {
  color: #888888;
  margin-bottom: 0.5em;
}

// "Authors (Year):" as a bold dark first line; the theme template's JS wraps
// the leading text of each entry in .csl-authors-year (see default.html) --
// which part of an entry citeproc wraps in spans depends on the entry type, so
// a CSS-only break cannot place it reliably.
.csl-entry .csl-authors-year {
  display: block;
  font-weight: bold;
  color: #4d616b;
}

.reveal code.sourceCode:last-child + pre {
  height: 800px !important;
}


/*********************************************
 * FULLSCREEN TOGGLE
 *********************************************/

// Small fixed toggle for touch devices (script injected by default.html):
// phones have no F11 and the browser chrome eats slide pixels. Hidden on
// pointer devices (F11 exists there) and whenever the Fullscreen API is
// unavailable -- the script also removes it then. Same muted look and column
// as the slide menu button, one slot above it.
#ids-fullscreen {
  display: none;
  position: fixed;
  left: 30px;
  bottom: 6%;
  z-index: 30;
  width: 28px;
  height: 28px;
  border: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0.55;
  // Feather-style corner brackets; gray idle, IDS orange while fullscreen
  // (the two data URIs differ only in the stroke colour).
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaaaaa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3'/%3E%3Cpath d='M16 3h3a2 2 0 0 1 2 2v3'/%3E%3Cpath d='M8 21H5a2 2 0 0 1-2-2v-3'/%3E%3Cpath d='M16 21h3a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E") center / contain no-repeat;

  &:active,
  &:focus-visible {
    opacity: 0.9;
  }

  &.is-fullscreen {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6a800' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3'/%3E%3Cpath d='M16 3h3a2 2 0 0 1 2 2v3'/%3E%3Cpath d='M8 21H5a2 2 0 0 1-2-2v-3'/%3E%3Cpath d='M16 21h3a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E");
  }
}

// Only touch devices get the button; desktops keep their F11.
@media (hover: none) and (pointer: coarse) {
  #ids-fullscreen {
    display: block;
  }
}

// position:fixed elements repeat on every printed page -- never print it.
html.reveal-print #ids-fullscreen {
  display: none !important;
}



 .reveal .controls .controls-arrow:after, .reveal .controls .controls-arrow:before {
  width: 13px !important; /* size */
  height: 4px; /* line width */
}

.reveal .controls {
  display: none;
  position: absolute;
  top: auto;
  bottom: -8px;
  right: 16px;
  left: auto;
  z-index: 11;
  /* color: #000;*/
  pointer-events: none;
  font-size: 8px;
}

.reveal .controls .controls-arrow {
  position: relative;
  height: 3.6em;
  width: 1.2em; /* distance betwee arrows */
  bottom: 0;
  right: 0;
}

.reveal div.slide-number {
  text-align: center;
  width: 2em;
  position: absolute;
  display: block;
  right: 29px;
  bottom: 22px;
  z-index: 31;
  font-family: "Fira Sans Condensed", sans-serif;
  font-size: 18px;
  line-height: 1;
  background-color: white;
  color: #666;
  padding: 0;
}


/*********************************************
 * SPEAKER NOTES OVERLAY (touch devices)
 *********************************************/
#ids-notes {
  display: none;
  position: fixed;
  left: 70px;
  bottom: 6%;
  z-index: 30;
  width: 28px;
  height: 28px;
  border: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0.55;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaaaaa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") center/contain no-repeat;
}

#ids-notes:active, #ids-notes:focus-visible {
  opacity: 0.9;
}

#ids-notes.is-open {
  opacity: 0.9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6a800' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}

#ids-transcript-btn {
  display: none;
  position: fixed;
  left: 110px;
  bottom: 6%;
  z-index: 30;
  width: 28px;
  height: 28px;
  border: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0.55;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaaaaa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E") center/contain no-repeat;
}

#ids-transcript-btn:active, #ids-transcript-btn:focus-visible, #ids-transcript-btn.is-open {
  opacity: 0.9;
}

#ids-transcript-btn.is-open {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6a800' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E");
}

@media (hover: none) and (pointer: coarse) {
  #ids-notes, #ids-transcript-btn {
    display: block;
  }
}

html.reveal-print #ids-notes, html.reveal-print #ids-transcript-btn {
  display: none !important;
}

#ids-notes-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #fff;
  color: #444444;
  font-family: "Fira Sans", "Fira Sans Condensed", sans-serif;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right))
           max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
}

#ids-notes-overlay[hidden] {
  display: none;
}

#ids-notes-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 16px;
  padding-bottom: 8px;
}

#ids-notes-timing {
  flex-shrink: 0;
  color: #f6a800;
  font-weight: bold;
  white-space: nowrap;
}

#ids-notes-title {
  flex-grow: 1;
  margin: 0;
  font-size: 1.1em;
}

#ids-notes-close {
  flex-shrink: 0;
  border: 0;
  background: none;
  color: #888888;
  font-size: 1.2em;
  cursor: pointer;
  padding: 8px;
  margin: -8px;
}

#ids-notes-content {
  font-size: 20px;
  line-height: 1.5;
}

#ids-notes-content em {
  color: #888888;
}

/*********************************************
 * OVERVIEW / TOC SLIDES
 *********************************************/
/* Entries stay at the normal slide body size and keep the theme's link
   colour, so they read as the navigation links they are. Only the denser
   two-column variant with sub-headings is scaled down. */
.reveal .ids-overview-toc {
  list-style: none;
  margin: 0.2em 0 0 0;
  padding: 0;
  line-height: 1.35;
}
.reveal .ids-overview-toc > li {
  margin: 0.45em 0;
  font-weight: bold;
}
.reveal .ids-overview-toc ul {
  list-style: none;
  margin: 0.1em 0 0.2em 0;
  padding: 0 0 0 1.1em;
  font-weight: normal;
}
.reveal .ids-overview-toc.with-subheadings {
  columns: 2;
  column-gap: 2.5em;
  font-size: 0.8em;
}
.reveal .ids-overview-toc.with-subheadings > li {
  break-inside: avoid;
}
.reveal .ids-overview-toc ul li {
  margin: 0.18em 0;
}

/*********************************************
 * TRANSCRIPT / READ-ALOUD VIEW ('r')
 *********************************************/
#ids-transcript {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: #fff;
  color: #444444;
  font-family: "Fira Sans", "Fira Sans Condensed", sans-serif;
  font-size: 18px;
  line-height: 1.5;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: max(32px, env(safe-area-inset-top)) max(40px, env(safe-area-inset-right))
           max(32px, env(safe-area-inset-bottom)) max(40px, env(safe-area-inset-left));
}

#ids-transcript[hidden] {
  display: none;
}

#ids-transcript .ids-transcript-slide {
  max-width: 900px;
  margin: 0 auto 2.5em auto;
}

#ids-transcript h1, #ids-transcript h2 {
  color: var(--r-heading-color);
  margin: 0 0 0.4em 0;
}

#ids-transcript h1 { font-size: 1.4em; }

#ids-transcript h2 { font-size: 1.2em; }

#ids-transcript .fragment {
  opacity: 1;
  visibility: visible;
}

#ids-transcript .ids-transcript-notes {
  border-left: 3px solid #f6a800;
  padding: 0.2em 0 0.2em 0.8em;
  margin-top: 0.8em;
  color: #666;
}

#ids-transcript .ids-transcript-notes:empty {
  display: none;
}

#ids-transcript img, #ids-transcript video, #ids-transcript iframe {
  max-width: 100%;
}

// The title slide's branding is cloned into the transcript along with the
// rest of the slide, but outside .reveal, where neither the title frame's
// sizing rules nor the svg's own (absent) intrinsic dimensions constrain it
// -- both would fill the transcript's whole width. Give them a size that
// suits a page one reads rather than presents: the QR stays tappable and
// scannable, the funder logo shrinks to a line of text.
#ids-transcript .title-qr {
  box-sizing: border-box;
  width: 140px;
  max-width: 40%;
  padding: #{$idsLogoInset};
  background: #fff;
}

#ids-transcript .title-qr a.qrcode,
#ids-transcript .title-qr svg {
  display: block;
  width: 100%;
  height: auto;
  padding: 0;
}

#ids-transcript img.funder-logo {
  height: 2.5em;
  width: auto;
  margin: 0.6em 0;
}