children. Navigation: deck.js (arrows / click / swipe). ?print → all slides stacked for Ctrl+P export (A4 landscape, 1 slide/page). ============================================================ */ body.deck { margin: 0; background: #1E1B22; overflow: hidden; } .slide { position: absolute; inset: 0; display: none; flex-direction: column; justify-content: center; padding: clamp(2rem, 6vw, 5rem) clamp(2rem, 8vw, 7rem); background: var(--cream); overflow: hidden; } .slide.is-active { display: flex; } .slide--title { background: linear-gradient(150deg, var(--plum-deep) 0%, var(--plum) 70%, #6E4870 100%); color: #fff; text-align: left; } .slide--title h1, .slide--title h2, .slide--title h3 { color: #fff; } .slide--title .eyebrow { color: #F4C9AE; } .slide--plum { background: linear-gradient(150deg, var(--plum-deep), var(--plum)); color: #fff; } .slide--plum h2, .slide--plum h3 { color: #fff; } .slide--plum .eyebrow { color: #F4C9AE; } .slide--terra { background: linear-gradient(150deg, #8F4A28, var(--terracotta)); color: #fff; } .slide--terra h2, .slide--terra h3 { color: #fff; } .slide h1 { font-size: clamp(2.2rem, 5.5vw, 4.2rem); } .slide h2 { font-size: clamp(1.8rem, 4.5vw, 3.2rem); margin-bottom: var(--sp-5); } .slide .lead { font-size: clamp(1.05rem, 2vw, 1.4rem); } .slide--plum .lead, .slide--title .lead, .slide--terra .lead { color: rgba(255,255,255,0.88); } .slide ul { font-size: clamp(1rem, 1.8vw, 1.3rem); line-height: 1.5; } .slide li { margin-bottom: 0.7em; } .slide__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: start; } .slide__footer { position: absolute; bottom: 1.2rem; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 clamp(2rem, 8vw, 7rem); font-size: 0.75rem; color: var(--ink-faint); letter-spacing: 0.05em; } .slide--plum .slide__footer, .slide--title .slide__footer, .slide--terra .slide__footer { color: rgba(255,255,255,0.5); } .deck-hud { position: fixed; bottom: 1rem; right: 1.2rem; z-index: 20; font: 600 0.8rem var(--font-body); color: rgba(255,255,255,0.85); background: rgba(30, 27, 34, 0.55); padding: 0.35rem 0.8rem; border-radius: 999px; user-select: none; } .deck-progress { position: fixed; top: 0; left: 0; height: 4px; background: var(--terracotta); z-index: 20; transition: width 0.25s ease; } .deck-hint { position: fixed; bottom: 1rem; left: 1.2rem; z-index: 20; font: 500 0.72rem var(--font-body); color: rgba(255,255,255,0.5); } /* Big-number stat inside slides */ .slide .stat__num { font-size: clamp(3rem, 8vw, 6rem); } /* ---- Print mode (?print or Ctrl+P) ---- */ @page { size: A4 landscape; margin: 0; } @media print { body.deck { background: #fff; overflow: visible; } .slide { position: relative; display: flex !important; width: 297mm; height: 209mm; break-after: page; inset: auto; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .deck-hud, .deck-hint, .deck-progress { display: none !important; } } body.deck.print-mode { overflow: auto; background: #444; } body.deck.print-mode .slide { position: relative; display: flex !important; inset: auto; min-height: 100vh; margin-bottom: 4px; } body.deck.print-mode .deck-hud, body.deck.print-mode .deck-hint, body.deck.print-mode .deck-progress { display: none; }