, not

). */ .slide-inner { width: 100%; height: 100%; max-width: 1440px; margin: 0 auto; padding: var(--pad); display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; overflow: hidden; position: relative; z-index: 2; } /* Centred layout variant for title/impact slides */ .slide-center { align-items: center; text-align: center; } /* Progress bar */ .reveal .progress { height: 3px; } .reveal .progress span { background: var(--accent); box-shadow: 0 0 8px rgba(42,143,255,0.4); } /* Slide number */ .reveal .slide-number { font-family: var(--font-mono); font-size: 1em; background: transparent; color: var(--text-dim); } .reveal .slide-number a, .reveal .slide-number a:hover, .reveal .slide-number a:focus { color: inherit; text-decoration: none; cursor: default; } /* ─── 6. Slide labels & typography ─────────────────────── */ /* Eyebrow tag above headings */ .slide-tag { font-family: var(--font-mono); font-size: var(--label); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--gap); display: block; } .slide-tag::before { content: '// '; opacity: 0.6; } /* Title slide heading */ .title-h1 { font-size: var(--title); font-weight: 700; line-height: 1.0; letter-spacing: -0.03em; color: var(--text); margin: 0; } /* Accent color helper */ .accent { color: var(--accent); } .result-color { color: var(--result); } /* Heading sizes */ .reveal h2 { font-size: var(--h2); margin-bottom: var(--gap); } .reveal h3 { font-size: var(--h3); margin-bottom: var(--gap-sm); } /* ─── 7. Bullet lists ──────────────────────────────────── */ .bullets { list-style: none; display: flex; flex-direction: column; gap: var(--gap-sm); } .bullets li { position: relative; padding-left: 28px; font-size: var(--body); line-height: 1.55; color: var(--text-muted); } .bullets li::before { content: '//'; font-family: var(--font-mono); font-size: 12px; color: var(--accent); font-weight: 700; position: absolute; left: 0; top: 0.3em; } .bullets li strong { color: var(--text); font-weight: 600; } /* ─── 8. Image utilities ─────────────────────────────────── There are three kinds of images in this theme: .f-img — formula PNG (black text, white bg): filter:invert(1) makes bg black, text white. mix-blend-mode:screen then makes the black bg transparent against the slide background, leaving white formula text floating on the slide. .c-img — circuit diagram (shown in white panel so complex line work reads clearly on the dark slide). .tri-img — Ohm's triangle and other colored diagrams: shown in white panel to preserve colors. .photo-img — color photography, no filter. ──────────────────────────────────────────────────────── */ /* Formula images: white text floating on dark bg */ .f-img { filter: invert(1); mix-blend-mode: screen; display: block; max-width: 100%; } /* Circuit diagrams in a white lit panel */ .c-img { display: block; background: #fff; border-radius: 6px; padding: 14px; box-shadow: 0 0 0 1px rgba(42,143,255,0.2), 0 6px 24px rgba(0,0,0,0.5); max-width: 100%; max-height: 100%; object-fit: contain; } /* Colored diagrams (e.g. Ohm's triangle) in white panel */ .tri-img { display: block; background: #fff; border-radius: 6px; padding: 8px 12px; box-shadow: 0 0 0 1px rgba(42,143,255,0.18), 0 4px 14px rgba(0,0,0,0.4); object-fit: contain; } /* Photographs — no filter */ .photo-img { display: block; border-radius: 8px; max-width: 100%; max-height: 100%; object-fit: cover; box-shadow: 0 6px 24px rgba(0,0,0,0.5); } /* ─── 9. Glow blobs ─────────────────────────────────────── */ .glow { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; } /* ─── 10. Fragment overrides ────────────────────────────── */ .reveal .fragment { transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); } .reveal .fragment.fade-up { transform: translateY(18px); } .reveal .fragment.fade-up.visible { transform: translateY(0); } /* ─── 11. Storyboard strip ──────────────────────────────── */ .storyboard { position: fixed; left: 0; right: 0; bottom: 0; height: 0; overflow: hidden; background: rgba(4,8,18,0.97); border-top: 1px solid var(--accent-border); box-shadow: 0 -10px 30px rgba(0,0,0,0.4); z-index: 35; transition: height 0.28s var(--ease); } .storyboard-track { height: 100%; display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; overflow-x: auto; overflow-y: hidden; } .story-thumb { min-width: 212px; max-width: 212px; height: 150px; border: 1px solid var(--accent-border); border-radius: 8px; background: rgba(8,14,28,0.9); color: var(--text); padding: 8px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; position: relative; } .story-thumb:hover { border-color: rgba(42,143,255,0.5); } .story-thumb.active { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(42,143,255,0.3) inset; } .story-num { position: absolute; top: 6px; left: 8px; z-index: 2; padding: 2px 6px; border-radius: 999px; background: rgba(2,6,16,0.8); border: 1px solid var(--accent-border); font-family: var(--font-mono); font-size: 12px; color: var(--warn); letter-spacing: 0.08em; } .story-preview { width: 192px; height: 108px; flex: 0 0 108px; border-radius: 6px; border: 1px solid var(--accent-border); overflow: hidden; background: var(--bg); } .story-scene { width: 1600px; height: 900px; transform: scale(0.12); transform-origin: top left; pointer-events: none; } .story-scene .slides { position: static; width: 1600px; height: 900px; inset: auto; transform: none; } .story-scene .slides > section { position: relative; display: block; top: auto; left: auto; width: 1600px; height: 900px; opacity: 1; visibility: visible; transform: none; } .story-caption { flex: 0 0 auto; font-size: 12px; line-height: 1.25; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; } body.storyboard-open .storyboard { height: 172px; } body.storyboard-open .reveal { padding-bottom: 172px; } /* ─── 12. Reduced motion ─────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .reveal .fragment { transition: opacity 0.25s ease !important; transform: none !important; } .storyboard { transition: none; } } /* ─── 13. Split grid helpers ───────────────────────────────── Two-column grid layouts for slide content. .split is the base; combine with a ratio modifier class: class="split split-50" → equal columns class="split split-40" → left 40% / right 60% class="split split-60" → left 60% / right 40% class="split split-35" → left 60% / right ~40% Add .split-top to align content flush to the top edge. ──────────────────────────────────────────────────────── */ .split { display: grid; gap: var(--gap-lg); align-items: center; flex: 1; min-height: 0; } .split-50 { grid-template-columns: 1fr 1fr; } .split-40 { grid-template-columns: 2fr 3fr; } .split-60 { grid-template-columns: 3fr 2fr; } .split-35 { grid-template-columns: 3fr 2fr; } .split-top { align-items: start; } /* ─── 14. Image containers ───────────────────────────────── */ .img-center { display: flex; align-items: center; justify-content: center; height: 100%; } .img-stack { display: flex; flex-direction: column; gap: var(--gap); align-items: center; justify-content: center; height: 100%; } /* ─── 15. Learning outcome cards ─────────────────────────── */ .outcome-card { background: var(--bg-card); border: 1px solid var(--accent-border); border-radius: 10px; padding: 14px 18px; display: flex; gap: 14px; align-items: flex-start; } .outcome-num { font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--accent); flex-shrink: 0; line-height: 1; margin-top: 2px; } .outcome-text { font-size: 18px; color: var(--text-muted); line-height: 1.45; } /* ─── 16. Topic list ─────────────────────────────────────── */ .topic-list { list-style: none; display: flex; flex-direction: column; gap: 10px; } .topic-list li { position: relative; padding-left: 24px; font-size: 21px; color: var(--text-muted); line-height: 1.5; } .topic-list li::before { content: '▸'; color: var(--accent); position: absolute; left: 0; } /* ─── 17. Callout boxes ──────────────────────────────────── */ .callout { background: var(--accent-dim); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; padding: 16px 20px; font-size: var(--body); color: var(--text-muted); line-height: 1.55; } .callout strong { color: var(--text); } .callout-warn { background: rgba(255,209,102,0.08); border-left: 3px solid var(--warn); border-radius: 0 8px 8px 0; padding: 16px 20px; font-size: var(--body); color: var(--text-muted); line-height: 1.55; } .callout-warn strong { color: var(--warn); } .callout-result { background: rgba(77,255,176,0.06); border-left: 3px solid var(--result); border-radius: 0 8px 8px 0; padding: 16px 20px; font-size: var(--body); color: var(--text-muted); line-height: 1.55; } .callout-result strong { color: var(--result); } /* ─── 18. Key property card ──────────────────────────────── */ .key-prop { background: var(--bg-card); border: 1px solid var(--accent-border); border-radius: 8px; padding: 14px 18px; font-size: var(--body); color: var(--text-muted); line-height: 1.5; } .key-prop strong { color: var(--text); display: inline; } /* ─── 19. Agenda grid ────────────────────────────────────── */ .agenda-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: var(--gap); } .agenda-item { display: flex; align-items: flex-start; gap: 14px; padding: 12px 16px; background: var(--accent-dim); border: 1px solid var(--accent-border); border-radius: 6px; } .agenda-num { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--accent); min-width: 22px; padding-top: 2px; opacity: 0.7; } .agenda-text { font-size: 20px; color: var(--text-muted); line-height: 1.4; } .agenda-text strong { color: var(--text); font-weight: 600; } a.agenda-item { text-decoration: none; color: inherit; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; } a.agenda-item:hover { border-color: rgba(42,143,255,0.5); background: rgba(42,143,255,0.18); } a.agenda-item:hover .agenda-num { opacity: 1; } /* ─── 20. Warning blocks ─────────────────────────────────── */ .warn-block { margin-top: var(--gap-sm); padding: 10px 14px; border-left: 3px solid var(--warn); background: rgba(255,209,102,0.06); border-radius: 0 4px 4px 0; display: flex; flex-direction: column; gap: 4px; } .warn-label { font-family: var(--font-mono); font-size: var(--label); color: var(--warn); text-transform: uppercase; letter-spacing: 0.1em; } /* ─── 21. Method steps ───────────────────────────────────── */ .method-steps { display: flex; flex-direction: column; gap: 8px; } .method-step { font-family: var(--font-mono); font-size: var(--small); color: var(--text-muted); padding: 8px 14px; background: var(--accent-dim); border-left: 2px solid var(--accent-border); border-radius: 0 3px 3px 0; } .method-step strong { color: var(--accent); font-weight: 700; } /* ─── 22. Step header ────────────────────────────────────── */ .step-header { display: flex; align-items: center; gap: 18px; margin-bottom: var(--gap); } .step-badge { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--accent-dim); border: 2px solid var(--accent); border-radius: 50%; font-family: var(--font-mono); font-size: 20px; font-weight: 700; color: var(--accent); } .step-title { font-size: var(--h2); font-weight: 700; color: var(--text); letter-spacing: -0.02em; line-height: 1.1; margin: 0 !important; } /* ─── 23. Formula / result display ──────────────────────── */ .yt-formula { font-family: var(--font-mono); font-size: 22px; color: var(--text); line-height: 1.9; display: block; } .yt-result { font-family: var(--font-mono); font-size: 28px; font-weight: 700; color: var(--result); margin-top: 6px; line-height: 1.4; } /* ─── 24. Calculation column ─────────────────────────────── */ .calc-col { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--accent-dim); border: 1px solid var(--accent-border); border-radius: 6px; } .col-label { font-family: var(--font-mono); font-size: var(--label); color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px; border-bottom: 1px solid var(--accent-border); padding-bottom: 6px; } /* ─── 25. Title slide elements ───────────────────────────── */ .subtitle { font-family: var(--font-mono); font-size: 20px; color: var(--text-dim); margin-top: 22px; letter-spacing: 0.04em; } .trace-deco { position: absolute; right: 0; top: 0; bottom: 0; width: 420px; pointer-events: none; z-index: 1; opacity: 0.6; } /* ─── 26. Slide intro text ───────────────────────────────── */ .slide-intro { font-size: var(--body); color: var(--text-muted); margin-bottom: var(--gap); }