/** * Click-to-expand overlay for a hero-card that carries a nested * `.card-detail` element. js/plugins/card-detail.js builds this DOM once, * copies that card's glyph/title/detail content into it on click, and * toggles `.is-open`; everything here is presentation. * * Opt-in per card: a `.hero-card` with no `.card-detail` child is untouched * by this seam - the compact card on the slide is unaffected either way. * Markup: *

Title

Short line shown on the slide.

Longer content shown only in the overlay.

*/ .card-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--space-4); background: var(--scrim); /* The overlay is appended to , outside .reveal, so it inherits none of the deck's type - without this, detail text rendered in the browser's default serif. */ font-family: var(--font-display); color: var(--text); opacity: 0; visibility: hidden; transition: opacity var(--dur-fast) var(--ease); } .card-overlay.is-open { opacity: 1; visibility: visible; } .card-overlay-panel { position: relative; width: 100%; max-width: 640px; max-height: 80vh; overflow-y: auto; padding: var(--space-4); border: var(--stroke-w) solid var(--accent-border); border-radius: var(--radius); background: var(--surface-glass); backdrop-filter: blur(24px); box-shadow: 0 0 0 1px var(--accent-ring), 0 24px 60px -20px var(--accent-cast); text-align: left; transform: scale(0.94) translateY(12px); transition: transform var(--dur-fast) var(--ease); } .card-overlay.is-open .card-overlay-panel { transform: none; } .card-overlay-close { position: absolute; top: var(--space-2); right: var(--space-2); width: 2rem; height: 2rem; border: var(--stroke-w) solid var(--stroke); border-radius: 999px; background: var(--surface-glass); color: var(--text); font-size: 1.1rem; line-height: 1; cursor: pointer; } .card-overlay-glyph { font-size: var(--step-3); line-height: 1; color: var(--accent-key); margin-bottom: var(--space-2); } .card-overlay-title { font-family: var(--font-mono); font-size: var(--step-2); margin: 0 0 var(--space-2); color: var(--text); } .card-overlay-body { font-size: var(--step-0); color: var(--text-muted); line-height: 1.6; } /* A card that opts into the overlay reads as clickable. */ .reveal .hero-card:has(> .card-detail) { cursor: pointer; }