/* ========================================================================== CareerStart.ai — presentation build Slide images, deck header, narration panel, and reveal.js plugin skinning. Everything visual comes from the tokens in theme/dmws.css, which in turn come from assets/css/styles.css. Nothing here hard-codes a brand colour. Sections: 1. Slide images (the inline SVG that is the slide) 2. Deck header (brand, deck nav, view switch) and no-JS fallback 3. Narration panel (speaker notes) and .line highlighting 4. reveal.js plugin skinning — menu, custom controls, audio player 5. Icons (CSS masks — no icon font, no icon library) 6. Reduced motion and print ========================================================================== */ /* -------------------------------------------------------------------------- 1. Slide images A slide is one inline , not a tree of HTML elements. The markup is the same graphics as assets/img/slides//slideN.svg, which the web pages inline as well — neither consumer uses an img element, see docs/slide-images.md. Two differences, both made when the file is inlined: - the per-file and . - width/height come off, so the slide scales to reveal's canvas. Reveal's canvas is 1280x800 with a 6% margin, which is exactly the SVG's own 1280x800 viewBox — so the slide fills the frame with no letterboxing. -------------------------------------------------------------------------- */ /* One copy of the gradients per page. Hidden, but it must stay in the layout tree: display:none in a parent makes a referenced gradient unresolvable in some engines. */ .slide-defs { position: absolute; width: 0; height: 0; overflow: hidden; } .reveal .slides section > svg.slide-svg { display: block; width: 100%; height: auto; } /* The slide's own type and colour. These mirror the --d-* tokens in theme/dmws.css, and the standalone .svg files repeat them verbatim in their own