/* ========================================================= AI Compute Supply Chain — Deck Theme Aesthetic: Stratechery / The Diff, restrained palette - default: dark mode (eye-friendly for night reading) - light mode available via [data-theme="light"] on - mobile-friendly via [data-mobile] on ========================================================= */ /* ---------- Dark mode (default) ---------- */ :root { --bg: #14171C; /* deep slate, not pure black */ --bg-panel: #1B1F26; /* slightly lighter for panels/callouts */ --ink: #E6E2D6; /* warm off-white */ --ink-muted: #9A958A; /* secondary text */ --rule: #2C3038; /* hairlines */ --accent: #8DB4DD; /* light sky blue — reads against dark */ --accent-soft: #6E94BD; /* lighter accent for charts */ --neutral-1: #75716A; /* chart secondary series */ --neutral-2: #4C4944; /* chart tertiary */ --warn: #D89673; /* warm desaturated orange */ --serif: 'Source Serif 4', 'Iowan Old Style', 'Charter', Georgia, 'Times New Roman', serif; --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; color-scheme: dark; } /* ---------- Light mode (opt-in) ---------- */ html[data-theme="light"] { --bg: #FAF7F1; --bg-panel: #F2EDE3; --ink: #1B1A18; --ink-muted: #5A5650; --rule: #C9C0B0; --accent: #1F3A5F; --accent-soft: #3B5C86; --neutral-1: #8C857A; --neutral-2: #B8B0A2; --warn: #A14A2A; color-scheme: light; } /* ---------- Reveal base overrides ---------- */ html, body { background: var(--bg); } .reveal-viewport { background: var(--bg); } .reveal { background: var(--bg); color: var(--ink); font-family: var(--serif); } .reveal .slides { text-align: left; } .reveal .slides section { padding: 5% 8%; box-sizing: border-box; height: 100%; } /* ---------- Typography ---------- */ .reveal h1, .reveal h2, .reveal h3, .reveal h4 { font-family: var(--serif); font-weight: 600; color: var(--ink); text-transform: none; letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 0.55em 0; } .reveal h1 { font-size: 2.2em; font-weight: 700; } .reveal h2 { font-size: 1.55em; } .reveal h3 { font-size: 1.2em; color: var(--accent); } .reveal h4 { font-size: 1.0em; color: var(--ink-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; } .reveal p, .reveal li { font-size: 0.78em; line-height: 1.55; color: var(--ink); } .reveal ul, .reveal ol { margin-left: 1.1em; margin-bottom: 0.8em; } .reveal ul li { list-style: none; position: relative; padding-left: 1em; } .reveal ul li::before { content: '—'; color: var(--accent); position: absolute; left: 0; } .reveal em { font-style: italic; color: var(--ink); } .reveal strong { font-weight: 600; color: var(--ink); } .reveal a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--rule); } .reveal a:hover { border-bottom-color: var(--accent); } /* ---------- Layout helpers ---------- */ .reveal .module-label { font-family: var(--sans); font-size: 0.55em; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 1.2em; display: block; } .reveal .slide-title { margin-bottom: 0.8em; } .reveal .lede { font-size: 0.95em; line-height: 1.5; color: var(--ink); max-width: 60ch; margin-bottom: 1.2em; } .reveal .footnote { font-family: var(--sans); font-size: 0.42em; color: var(--ink-muted); margin-top: 2em; padding-top: 0.6em; border-top: 1px solid var(--rule); line-height: 1.4; } .reveal .footnote sup { color: var(--accent); } .reveal sup.cite { font-family: var(--sans); color: var(--accent); font-size: 0.55em; font-weight: 500; margin-left: 0.1em; } /* Two-column layout */ .reveal .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5em; align-items: start; } .reveal .three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2em; } /* Callout / pull quote */ .reveal .callout { border-left: 2px solid var(--accent); padding: 0.4em 0 0.4em 1em; margin: 1em 0; font-style: italic; color: var(--ink); } .reveal .panel { background: var(--bg-panel); padding: 1em 1.2em; border-radius: 2px; } /* "Who plays here" / "What to watch" treatments */ .reveal .watch-list, .reveal .player-list { display: grid; grid-template-columns: auto 1fr; column-gap: 1.2em; row-gap: 0.4em; font-size: 0.78em; } .reveal .watch-list dt, .reveal .player-list dt { font-family: var(--sans); font-weight: 500; color: var(--accent); white-space: nowrap; } .reveal .watch-list dd, .reveal .player-list dd { margin: 0; color: var(--ink); } /* Diagram container */ .reveal .diagram { margin: 0.6em 0; display: flex; justify-content: center; } .reveal .diagram svg { max-width: 100%; height: auto; } .reveal .diagram-caption { font-family: var(--sans); font-size: 0.55em; color: var(--ink-muted); text-align: center; margin-top: 0.3em; letter-spacing: 0.04em; } /* SVG diagram defaults — usable globally */ .reveal svg .stroke { stroke: var(--ink); stroke-width: 1.25; fill: none; } .reveal svg .stroke-accent { stroke: var(--accent); stroke-width: 1.25; fill: none; } .reveal svg .stroke-muted { stroke: var(--rule); stroke-width: 1; fill: none; } .reveal svg .stroke-warn { stroke: var(--warn); stroke-width: 1.25; fill: none; } .reveal svg .fill-bg { fill: var(--bg); } .reveal svg .fill-panel { fill: var(--bg-panel); } .reveal svg .fill-accent { fill: var(--accent); } .reveal svg .fill-warn { fill: var(--warn); } .reveal svg .fill-muted { fill: var(--rule); } .reveal svg text { font-family: var(--serif); font-size: 13px; fill: var(--ink); } .reveal svg text.label { font-family: var(--sans); font-size: 11px; fill: var(--ink-muted); letter-spacing: 0.04em; text-transform: uppercase; } .reveal svg text.accent { fill: var(--accent); } .reveal svg text.muted { fill: var(--ink-muted); } /* Chart canvas defaults */ .reveal canvas { max-width: 100%; background: transparent; } /* ---------- Section-cover slides (module dividers) ---------- */ .reveal section.cover { display: flex; flex-direction: column; justify-content: center; padding: 8% 10%; } .reveal section.cover .module-number { font-family: var(--sans); font-size: 0.55em; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.6em; } .reveal section.cover h1 { font-size: 2.8em; max-width: 18ch; margin-bottom: 0.4em; } .reveal section.cover .deck { font-size: 1.1em; color: var(--ink-muted); max-width: 55ch; } /* ---------- Controls & progress (restrained) ---------- */ .reveal .controls { color: var(--ink-muted); } .reveal .progress { color: var(--accent); height: 2px; background: var(--rule); } .reveal .slide-number { font-family: var(--sans); font-size: 0.5em; color: var(--ink-muted); background: transparent; } /* ---------- Theme toggle button ---------- */ .theme-toggle { position: fixed; bottom: 14px; left: 14px; z-index: 50; background: var(--bg-panel); border: 1px solid var(--rule); color: var(--ink-muted); font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 10px; border-radius: 3px; cursor: pointer; opacity: 0.7; transition: opacity 0.15s ease; } .theme-toggle:hover { opacity: 1; color: var(--accent); border-color: var(--accent); } /* ---------- Mobile (portrait phone / narrow) ---------- */ /* Collapses columns, bumps font, reduces padding when the deck renders into a narrow canvas — set by JS via [data-mobile] attribute */ html[data-mobile="portrait"] .reveal .two-col, html[data-mobile="portrait"] .reveal .three-col { grid-template-columns: 1fr; gap: 1.3em; } html[data-mobile="portrait"] .reveal .slides section { padding: 4% 6%; } html[data-mobile="portrait"] .reveal h1 { font-size: 1.85em; } html[data-mobile="portrait"] .reveal h2 { font-size: 1.35em; } html[data-mobile="portrait"] .reveal p, html[data-mobile="portrait"] .reveal li, html[data-mobile="portrait"] .reveal .lede { font-size: 1em; line-height: 1.55; } html[data-mobile="portrait"] .reveal .lede { font-size: 1.05em; } html[data-mobile="portrait"] .reveal .watch-list, html[data-mobile="portrait"] .reveal .player-list { font-size: 0.95em; } html[data-mobile="portrait"] .reveal .watch-list, html[data-mobile="portrait"] .reveal .player-list { grid-template-columns: 1fr; row-gap: 0.6em; } html[data-mobile="portrait"] .reveal .watch-list dt, html[data-mobile="portrait"] .reveal .player-list dt { white-space: normal; margin-bottom: -0.2em; } html[data-mobile="portrait"] .reveal section.cover h1 { font-size: 2.1em; } html[data-mobile="portrait"] .reveal section.cover .deck { font-size: 1em; } /* Diagrams: make wide ones scrollable rather than crushed */ html[data-mobile="portrait"] .reveal .diagram { overflow-x: auto; -webkit-overflow-scrolling: touch; justify-content: flex-start; } html[data-mobile="portrait"] .reveal .diagram svg { min-width: 640px; } /* Restrained controls on mobile */ html[data-mobile="portrait"] .reveal .controls { display: none; } html[data-mobile="portrait"] .theme-toggle { bottom: 8px; left: 8px; font-size: 10px; padding: 4px 8px; } /* ---------- PDF print mode ---------- */ @media print { :root { /* Always print in light mode */ --bg: #FAF7F1; --bg-panel: #F2EDE3; --ink: #1B1A18; --ink-muted: #5A5650; --rule: #C9C0B0; --accent: #1F3A5F; --accent-soft: #3B5C86; --neutral-1: #8C857A; --neutral-2: #B8B0A2; --warn: #A14A2A; color-scheme: light; } .reveal .slides section { page-break-after: always; background: var(--bg); } .theme-toggle { display: none; } }