/* PODIUM deck. Blueprint system (tokens.css) on the marcdeller.com honeycomb (spec §6.4b). * * One ground: the honeycomb on body. Nothing above it paints an opaque rectangle: slides are * transparent, panels are translucent --panel with a light blur, the Mol* canvas clears to * alpha 0, Plotly paper is rgba(0,0,0,0) and RDKit draws with no background rect. */ html, body { height: 100%; } body { margin: 0; background-color: var(--bg); background-image: var(--honeycomb); background-repeat: repeat; background-attachment: fixed; color: var(--ink); font-family: var(--ui); -webkit-font-smoothing: antialiased; } /* reveal tags as .reveal-viewport and paints it: the honeycomb must win there */ body.reveal-viewport { background-color: var(--bg) !important; background-image: var(--honeycomb) !important; background-repeat: repeat !important; background-attachment: fixed !important; } .reveal, .reveal .slides, .reveal .backgrounds, .reveal .slide-background { background: transparent !important; } .reveal { font-family: var(--ui); color: var(--ink); font-size: 30px; } .reveal .slides { text-align: left; } .reveal .slides > section, .reveal .slides > section > section { padding: 0; height: 100%; box-sizing: border-box; } .reveal a { color: var(--target); } :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; } /* ----------------------------------------------------------------- sheet grid */ .sheet { position: relative; width: 1600px; height: 900px; box-sizing: border-box; padding: 64px 72px 96px; display: grid; gap: 28px 40px; grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .sheet.split { grid-template-columns: 560px 1fr; grid-template-rows: auto 1fr; } .sheet.split > .claim { grid-column: 1 / -1; } .sheet.split-wide { grid-template-columns: 1fr 1fr; } .sheet.split-wide > .claim { grid-column: 1 / -1; } .sheet.center { place-content: center; text-align: center; grid-template-rows: auto auto auto; } .claim { margin: 0; font-family: var(--ui); font-weight: 700; font-size: 60px; line-height: 1.05; letter-spacing: -0.01em; color: var(--ink); max-width: 1300px; text-wrap: balance; } .claim .hl { color: var(--measure); } .sub { font-family: var(--mono); font-size: 22px; color: var(--ink-dim); margin: 0; } .bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; align-content: start; } .bullets li { font-size: 32px; line-height: 1.2; padding-left: 28px; position: relative; } .bullets li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 12px; height: 2px; background: var(--measure); } .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } /* ----------------------------------------------------------------- chrome on every content slide */ .tracker { position: absolute; top: 28px; right: 72px; font-family: var(--mono); font-size: 18px; color: var(--ink-dim); letter-spacing: 0.08em; text-transform: uppercase; } .tracker b { color: var(--ink); font-weight: 500; } .titleblock { position: absolute; right: 72px; bottom: 28px; display: grid; grid-template-columns: repeat(4, auto); border: 1px solid var(--line-strong); background: var(--panel); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); font-family: var(--mono); font-size: 14px; color: var(--ink-dim); } .titleblock span { padding: 6px 12px; border-left: 1px solid var(--line); white-space: nowrap; } .titleblock span:first-child { border-left: 0; } .titleblock b { color: var(--ink); font-weight: 500; margin-left: 6px; } .cite { position: absolute; left: 72px; bottom: 28px; font-family: var(--mono); font-size: 16px; color: var(--ink-dim); background: var(--panel); padding: 6px 12px; border: 1px solid var(--line); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); white-space: nowrap; } .cite a { color: var(--ink-dim); text-decoration: none; border-bottom: 1px dotted var(--line-strong); } .cite a:hover, .cite a:focus-visible { color: var(--ink); } .cite a + a { margin-left: 18px; } .role { font-family: var(--mono); font-size: 18px; color: var(--ink-dim); align-self: end; border-left: 3px solid var(--md-primary-light); padding-left: 12px; } .footnote { font-family: var(--mono); font-size: 16px; color: var(--ink-dim); line-height: 1.4; } .caveat { font-family: var(--mono); font-size: 18px; color: var(--ink); border: 1px dashed var(--loss); padding: 8px 12px; background: var(--panel); justify-self: start; } /* ----------------------------------------------------------------- viewer slot + shared stage */ .viewer-slot { position: relative; min-height: 0; } .viewer-slot > img.fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity 120ms linear; } .viewer-slot.live > img.fallback { opacity: 0; } .viewer-legend { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--mono); font-size: 16px; color: var(--ink-dim); pointer-events: none; } .viewer-legend i { display: inline-block; width: 14px; height: 4px; margin-right: 6px; vertical-align: middle; } /* The stage sits UNDER the transparent slides, so legends and labels draw above it; slides let * pointer events through except on their own controls, so the presenter can still turn the model. */ .reveal { position: relative; z-index: 2; pointer-events: none; } /* reveal's per-slide background layer is transparent but sits over the stage and would swallow * every drag: let it pass events through, or the model cannot be turned. */ .reveal .backgrounds, .reveal .slide-background, .reveal .slide-background-content { pointer-events: none !important; } .reveal .slides section, .reveal .slides section .sheet, .viewer-slot { pointer-events: none; } .reveal .slides section a, .reveal .slides section button, .reveal .slides section .plot, .reveal .slides section table, .reveal .controls, .reveal .progress { pointer-events: auto; } #stage { position: fixed; z-index: 1; pointer-events: auto; opacity: 0; visibility: hidden; transition: opacity 160ms linear; } #stage.on { opacity: 1; visibility: visible; } #stage .msp-plugin, #stage .msp-plugin-content, #stage .msp-viewport, #stage .msp-layout-standard, #stage .msp-layout-region, #stage canvas { background: transparent !important; } #stage .msp-viewport-controls, #stage .msp-highlight-toast-wrapper, #stage .msp-log { display: none !important; } /* ----------------------------------------------------------------- tiles, bars, timelines */ .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; align-content: center; } .tile { padding: 24px 24px 20px; background: var(--panel); border: 1px solid var(--line); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .tile .v { display: block; font-family: var(--mono); font-size: 76px; font-weight: 500; color: var(--measure); line-height: 1; } .tile .v small { font-size: 0.5em; margin-left: 4px; color: var(--ink-dim); } .tile .l { display: block; margin-top: 10px; font-size: 24px; color: var(--ink); } .tile .s { display: block; margin-top: 6px; font-family: var(--mono); font-size: 13px; color: var(--ink-dim); } .tile.anti .v { color: var(--anti); } .tile.gain .v { color: var(--gain); } .plot { min-height: 0; width: 100%; height: 100%; } .plot-wrap { position: relative; min-height: 0; padding: 12px; } .plot-wrap .plot-title { font-family: var(--mono); font-size: 16px; color: var(--ink-dim); margin: 0 0 4px; } .journey { display: grid; grid-template-columns: 1fr 70px 1fr 70px 1fr; align-items: center; gap: 8px; } .journey .node { display: grid; justify-items: center; gap: 8px; } .journey .mol { width: 100%; height: 320px; } .journey .vals .an { color: var(--ink-dim); } .journey .mol svg { width: 100%; height: 100%; } .journey .cid { font-family: var(--mono); font-size: 22px; color: var(--ink); } .journey .vals { display: flex; flex-wrap: wrap; gap: 6px 10px; justify-content: center; font-family: var(--mono); font-size: 18px; color: var(--measure); } .journey .arrow { height: 2px; background: var(--line-strong); position: relative; } .journey .arrow::after { content: ""; position: absolute; right: -2px; top: -6px; border: 7px solid transparent; border-left: 10px solid var(--line-strong); } .editlog { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: start; gap: 28px; align-self: center; } .edit { display: grid; grid-template-rows: auto 300px auto; justify-items: center; gap: 8px; } .edit .mol { width: 100%; height: 300px; } .edit .cid { font-family: var(--mono); font-size: 22px; color: var(--ink-dim); } .edit .step { display: grid; justify-items: center; gap: 2px; width: 100%; padding-bottom: 10px; border-bottom: 2px solid var(--line-strong); position: relative; } .edit .step::after { content: ""; position: absolute; right: -2px; bottom: -8px; border: 7px solid transparent; border-left: 10px solid var(--line-strong); } .edit .step .fold { font-family: var(--mono); font-size: 40px; font-weight: 500; } .edit .step .what { font-family: var(--ui); font-size: 22px; color: var(--ink-dim); } .edit .step.gain .fold { color: var(--gain); } .edit .step.loss .fold { color: var(--loss); } .edit .step.neutral .fold { color: var(--ink-dim); } .timeline { position: relative; height: 420px; align-self: center; } .timeline svg { width: 100%; height: 100%; overflow: visible; } .pairs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 40px; align-content: center; } .pair { display: grid; grid-template-columns: 1fr 60px 1fr; align-items: center; padding: 22px 26px; } .pair .t, .pair .a { font-family: var(--mono); font-size: 34px; font-weight: 500; } .pair .t { color: var(--target); } .pair .a { color: var(--anti); text-align: right; } .pair .vs { text-align: center; color: var(--ink-dim); font-size: 22px; } .pair .fold { grid-column: 1 / -1; font-family: var(--mono); font-size: 44px; color: var(--measure); margin-top: 8px; } .chips { display: flex; flex-wrap: wrap; gap: 14px; align-content: center; } .chip { font-family: var(--mono); font-size: 24px; padding: 14px 18px; border: 1px solid var(--line-strong); background: var(--panel); } .flow { display: grid; grid-auto-flow: column; align-items: center; gap: 0; } .flow .chip { text-align: center; } .flow .link { height: 2px; background: var(--line-strong); width: 36px; } .stack-diagram svg, .schematic svg { width: 100%; height: 100%; } .title-name { font-family: var(--mono); font-size: 26px; color: var(--ink-dim); } .title-name b { color: var(--ink); font-weight: 500; } .backronym { font-family: var(--mono); font-size: 16px; color: var(--ink-dim); letter-spacing: 0.06em; } /* theme switch (spec §6.4: blueprint navy default with the light switch) */ .theme-switch { position: fixed; z-index: 20; left: 16px; top: 16px; font-family: var(--mono); font-size: 13px; color: var(--ink-dim); background: var(--panel); border: 1px solid var(--line); padding: 6px 10px; cursor: pointer; border-radius: var(--radius); } .theme-switch:hover, .theme-switch:focus-visible { color: var(--ink); border-color: var(--line-strong); } /* vertical detail slides (Q&A) */ .detail-table { border-collapse: collapse; font-family: var(--mono); font-size: 18px; width: 100%; } .detail-table th, .detail-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); } .detail-table th { color: var(--ink-dim); font-weight: 400; } .detail-table td.num { color: var(--measure); } .reveal .controls { color: var(--ink-dim); } .reveal .progress { color: var(--measure); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }