/* Deck layout + runtime states. The canvas is a fixed 1920×1080 stage (keep in sync with "canvas" in studio.config.json); js/deck.js scales it to the viewport with a transform — author everything in canvas pixels. */ html, body { height: 100%; } body { margin: 0; overflow: hidden; color: var(--fg-0); font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* keep macOS Firefox in step with the line above */ } /* ---- fixed canvas, scaled to the viewport via transform ---- */ .deck { position: absolute; top: 0; left: 0; width: 1920px; height: 1080px; transform-origin: 0 0; background: var(--bg-0); } /* ---- slides: one visible at a time (js/deck.js toggles .is-active) ---- */ .deck > section.slide { display: none; } .slide { position: absolute; inset: 0; box-sizing: border-box; flex-direction: column; padding: var(--s-7) var(--s-8); overflow: hidden; } .deck > section.slide.is-active { display: flex; } /* must out-specify the hide rule above */ /* default typography (canvas pixels) */ .slide h1, .slide h2, .slide h3 { font-family: var(--font-display, inherit); } .slide h1, .slide h2 { color: var(--accent-1); } /* VT maroon headings */ .slide h1 { font-size: var(--t-h1); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 var(--s-4); } .slide h2 { font-size: var(--t-h2); line-height: 1.1; margin: 0 0 var(--s-4); } .slide h3 { font-size: var(--t-h3); line-height: 1.2; margin: 0 0 var(--s-3); } .slide p { font-size: var(--t-body); line-height: 1.45; margin: 0 0 var(--s-3); } .slide ul, .slide ol { font-size: var(--t-body); line-height: 1.45; margin: 0; padding-left: 1.1em; } .slide li { margin: var(--s-2) 0; } .slide a { color: var(--accent-2); } .slide img { max-width: 100%; max-height: 100%; } .slide__body { flex: 1; min-height: 0; font-size: var(--t-body); } .slide__number { position: absolute; right: var(--s-5); bottom: var(--s-4); padding: var(--s-1) var(--s-3); border-radius: 999px; background: var(--bg-1); font-size: var(--t-small); color: var(--fg-1); } /* ---- step engine: .frag[data-step] reveal states, classes set by js/deck.js ---- */ .frag { transition: opacity .35s ease, transform .35s ease; } .frag.is-pending { opacity: 0; } /* Screen-reader-only text: context a visual (a strike, an arrow) carries for sighted viewers. Both clip forms so every engine, old and new, hides it. */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .frag.is-current, .frag.is-past { opacity: 1; } .frag--dim.is-pending { opacity: 0.3; } /* ---- speaker notes live inside the slide but never render ---- */ aside.notes { display: none; } /* speaker notes: in the slide, never rendered */ /* One per slide, right after the heading: what the slide shows and how it builds, for someone who cannot see it (WCAG 1.1.1). Hidden by .sr-only, and js/deck.js wires it onto the slide's role="img" figures via aria-describedby. */ .slide__desc { /* .sr-only carries the hiding; this class is the hook */ } /* ---- motion (WCAG 2.2.2): js/deck.js puts .no-motion on when the viewer presses `m` or the focus-revealed button. Blunt on purpose — this is what stops the title/closing mist loops. ---- */ html.no-motion *, html.no-motion *::before, html.no-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .deck__motion { position: fixed; left: 8px; top: 8px; z-index: 100; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; background: transparent; color: transparent; } .deck__motion:focus, .deck__motion:focus-visible { width: auto; height: auto; clip: auto; clip-path: none; overflow: visible; padding: 10px 16px; border: 2px solid currentColor; border-radius: var(--r-1, 6px); background: var(--bg-0, #fff); color: var(--fg-0, #000); font: inherit; font-size: 16px; cursor: pointer; } /* ---- UA-default coverage: browsers disagree on the default styling of these elements (monospace sizing especially), so the deck pins every one a slide can plausibly contain. Portability rule: never rely on browser defaults. ---- */ .slide code, .slide kbd, .slide samp { font-family: var(--font-mono, monospace); font-size: 0.9em; } .slide pre { font-family: var(--font-mono, monospace); font-size: calc(var(--t-body) * 0.8); line-height: 1.5; margin: 0 0 var(--s-3); padding: var(--s-3) var(--s-4); background: var(--bg-1); border-radius: var(--r-1); overflow: hidden; /* slides never scroll — clipping = authoring bug to fix */ } .slide pre code { font-size: 100%; } .slide blockquote { margin: 0 0 var(--s-3); padding-left: var(--s-3); border-left: 4px solid var(--accent-3); font-family: var(--font-display); font-size: var(--t-body); line-height: 1.3; } .slide table { border-collapse: collapse; font-size: var(--t-body); } .slide th, .slide td { text-align: left; padding: var(--s-1) var(--s-3); border-bottom: 2px solid var(--bg-1); } .slide th { color: var(--fg-1); } .slide hr { border: 0; border-top: 2px solid var(--bg-1); margin: var(--s-4) 0; } /* ---- dashed stand-in for an image not yet supplied (data-src = intended path) ---- */ .img-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); min-height: 240px; padding: var(--s-4); border: 3px dashed var(--fg-1); border-radius: var(--r-2); color: var(--fg-1); font-size: var(--t-small); text-align: center; } .img-placeholder::after { content: attr(data-src); font-size: 24px; opacity: 0.65; } /* ========================================================================== Deck components — every pattern used by more than one slide lives here. Slides carry structure + draggable geometry only; colour, type, spacing and radii always resolve through css/tokens.css. Kept in step with day 1. ========================================================================== */ /* ---- slide head: optional kicker over the title -------------------------- */ .slide__head { flex: 0 0 auto; margin-bottom: var(--s-5); } .slide__head h1, .slide__head h2 { margin-bottom: 0; } .slide__kicker { font-family: var(--font-body); font-size: var(--t-small); text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-1); margin: 0 0 var(--s-2); } /* ---- small muted footnote ----------------------------------------------- */ .note { font-size: var(--t-small); color: var(--fg-1); } .slide__lede { font-size: var(--t-h3); line-height: 1.25; color: var(--fg-1); margin: var(--s-3) 0 0; max-width: 1400px; } /* ---- flat tile: the deck's category-coded panel — full colour border ----- */ .tile { --edge: var(--accent-1); box-sizing: border-box; padding: var(--s-3) var(--s-4); border: 3px solid var(--edge); border-radius: var(--r-2); background: var(--bg-1); } .tile--a2 { --edge: var(--accent-2); } .tile--a3 { --edge: var(--accent-3); } .tile--a4 { --edge: color-mix(in srgb, var(--accent-1) 50%, var(--accent-3)); } .tile h3 { font-size: var(--t-body); margin-bottom: var(--s-2); } .tile--display h3 { font-size: var(--t-h3); } /* hero tiles keep the display scale */ .tile p, .tile ul, .tile ol { font-size: var(--t-small); } .tile > :last-child { margin-bottom: 0; } .tile__label { font-family: var(--font-mono); font-size: var(--t-small); color: var(--edge); margin: 0 0 var(--s-1); } /* ---- grids -------------------------------------------------------------- */ .grid { display: grid; gap: var(--s-3); align-content: start; } .grid--2 { grid-template-columns: 1fr 1fr; } .grid--3 { grid-template-columns: repeat(3, 1fr); } /* Code question: source pane left (wide enough for ~34 mono chars), the ask right. */ .grid--code { grid-template-columns: 1.15fr 1fr; align-items: center; } /* Cells that are list items — resets the list chrome so a