/* Conference talk companion pages (_layouts/talk.html). Mobile-first: most of this page's traffic arrives on a phone, in a room, in the two minutes after the session ends. Uses Chirpy CSS variables so it follows the site's light/dark toggle. */ /* Custom properties are declared on both roots. The companion block is injected into a post and is NOT a descendant of .talk, so scoping these to .talk alone left every var() in the shared .talk-ask / .talk-check rules unresolved. */ .talk, .talk-companion { --talk-accent: #6366f1; --talk-accent-soft: rgba(99, 102, 241, 0.12); --talk-danger: #e11d48; --talk-danger-soft: rgba(225, 29, 72, 0.08); --talk-hold: #059669; --talk-rule: var(--card-border-color, rgba(128, 128, 128, 0.25)); --talk-panel: var(--card-bg, rgba(128, 128, 128, 0.04)); } /* Brighter "what held" green for dark surfaces only. Chirpy sets data-mode on once the user toggles; before that it follows the system preference, so both conditions are handled. `html:not([data-mode])` on its own would also match light mode, which is what made this green fail contrast on white. */ html[data-mode='dark'] .talk, html[data-mode='dark'] .talk-companion { --talk-hold: #34d399; } @media (prefers-color-scheme: dark) { html:not([data-mode='light']) .talk, html:not([data-mode='light']) .talk-companion { --talk-hold: #34d399; } } /* ── Hero ──────────────────────────────────────────────────────────── */ .talk-hero { background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #0c1a2e 100%); border: 1px solid rgba(99, 102, 241, 0.25); border-radius: 16px; padding: 2rem 1.25rem 1.75rem; margin: 0 -0.5rem 2rem; position: relative; overflow: hidden; } .talk-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(99, 102, 241, 0.12) 1px, transparent 0); background-size: 24px 24px; pointer-events: none; } .talk-hero > * { position: relative; z-index: 1; } .talk-eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #818cf8; margin-bottom: 0.9rem; } .talk-eyebrow a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(129, 140, 248, 0.4); } .talk-eyebrow a:hover { color: #a5b4fc; } .talk-eyebrow-sep { margin: 0 0.45rem; opacity: 0.5; } .talk-title { font-size: 1.65rem; font-weight: 800; line-height: 1.22; color: #f1f5f9; margin: 0 0 0.75rem; } .talk-subtitle { font-size: 1rem; line-height: 1.6; color: #94a3b8; margin: 0 0 1.1rem; } .talk-facts { display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem; margin-bottom: 1.4rem; } .talk-fact { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: #cbd5e1; background: rgba(148, 163, 184, 0.12); border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 20px; padding: 0.25rem 0.7rem; } .talk-fact i { opacity: 0.7; font-size: 0.72rem; } /* The thesis. This is the sentence people photograph, so it gets the weight. */ .talk-thesis { border: 0; border-left: 3px solid var(--talk-danger); background: rgba(225, 29, 72, 0.1); border-radius: 0 10px 10px 0; padding: 1rem 1.1rem; margin: 0 0 1.4rem; } .talk-thesis p { color: #f8fafc; font-size: 1rem; font-weight: 600; line-height: 1.55; margin: 0 0 0.55rem; } .talk-thesis p:last-child { margin-bottom: 0; font-weight: 500; color: #cbd5e1; } .talk-thesis strong { color: #fff; } .talk-hero-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; } .talk-btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.6rem 1.05rem; border-radius: 8px; font-size: 0.88rem; font-weight: 600; text-decoration: none; border: 1px solid rgba(148, 163, 184, 0.35); color: #e2e8f0; background: rgba(148, 163, 184, 0.1); transition: background 0.15s ease, border-color 0.15s ease; } .talk-btn:hover { color: #fff; background: rgba(148, 163, 184, 0.2); border-color: rgba(148, 163, 184, 0.55); } .talk-btn--primary { background: var(--talk-accent); border-color: var(--talk-accent); color: #fff; } .talk-btn--primary:hover { background: #4f46e5; border-color: #4f46e5; color: #fff; } /* ── Sections ──────────────────────────────────────────────────────── */ .talk-section { margin: 2.5rem 0; } .talk-section-title, .talk-body h2 { font-size: 1.3rem; font-weight: 700; color: var(--heading-color, inherit); margin: 0 0 1.1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--talk-rule); } .talk-body h3 { font-size: 1.05rem; font-weight: 700; margin: 1.6rem 0 0.6rem; } .talk-body p, .talk-body li { line-height: 1.7; } /* ── The Monday checks ─────────────────────────────────────────────── */ .talk-checks { list-style: none; counter-reset: talkcheck; padding: 0; margin: 0; } .talk-check { counter-increment: talkcheck; position: relative; padding: 0.9rem 0 0.9rem 3rem; border-bottom: 1px solid var(--talk-rule); } .talk-check:last-child { border-bottom: 0; } .talk-check::before { content: counter(talkcheck); position: absolute; left: 0; top: 0.85rem; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--talk-accent-soft); border: 1px solid rgba(99, 102, 241, 0.35); color: var(--talk-accent); font-size: 0.85rem; font-weight: 800; } .talk-check-do { display: block; font-size: 1rem; font-weight: 650; line-height: 1.45; color: var(--heading-color, inherit); } .talk-check-note { display: block; margin-top: 0.3rem; font-size: 0.88rem; font-style: italic; line-height: 1.55; color: var(--text-muted-color, #6b7280); } /* ── The ask ───────────────────────────────────────────────────────── */ .talk-ask { border: 2px dashed var(--talk-danger); background: var(--talk-danger-soft); border-radius: 14px; padding: 1.25rem 1.15rem; margin: 2.5rem 0; } .talk-ask-label { font-size: 0.72rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--talk-danger); margin: 0 0 0.55rem; } .talk-ask-body { font-size: 1rem; font-weight: 600; line-height: 1.55; color: var(--heading-color, inherit); margin: 0 0 0.5rem; } .talk-ask-note { font-size: 0.9rem; line-height: 1.6; color: var(--text-muted-color, #6b7280); margin: 0 0 1rem; } .talk-ask-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 1rem; } .talk-ask-btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 1rem; border-radius: 8px; background: var(--talk-danger); color: #fff !important; font-size: 0.88rem; font-weight: 600; text-decoration: none; } .talk-ask-btn:hover { background: #be123c; } .talk-ask-link { font-size: 0.88rem; font-weight: 600; text-decoration: none; color: var(--talk-danger); } .talk-ask-link:hover { text-decoration: underline; } /* ── Failure cards ─────────────────────────────────────────────────── */ .talk-failures { display: grid; gap: 1rem; } .talk-failure { border: 1px solid var(--talk-rule); border-left: 4px solid var(--talk-danger); border-radius: 10px; background: var(--talk-panel); padding: 1.1rem 1.1rem 1rem; } .talk-failure-head { display: flex; align-items: baseline; gap: 0.55rem; margin-bottom: 0.9rem; flex-wrap: wrap; } .talk-failure-n { font-size: 0.7rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--talk-danger); background: var(--talk-danger-soft); border: 1px solid rgba(225, 29, 72, 0.3); border-radius: 4px; padding: 0.15rem 0.45rem; } .talk-failure-name { font-size: 1.08rem; font-weight: 750; color: var(--heading-color, inherit); margin: 0; } .talk-failure dl { margin: 0; } .talk-failure dt { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted-color, #6b7280); margin-top: 0.75rem; } .talk-failure dt:first-child { margin-top: 0; } .talk-failure dd { margin: 0.2rem 0 0; font-size: 0.94rem; line-height: 1.6; } .talk-failure dt.held { color: var(--talk-hold); } .talk-failure-line { margin: 0.9rem 0 0; padding: 0.65rem 0.85rem; border-left: 3px solid var(--talk-rule); background: var(--main-bg, transparent); border-radius: 0 6px 6px 0; font-size: 0.94rem; font-style: italic; line-height: 1.55; } .talk-rung-badge { display: inline-block; margin-top: 0.9rem; font-size: 0.75rem; font-weight: 700; color: var(--talk-accent); background: var(--talk-accent-soft); border-radius: 4px; padding: 0.2rem 0.55rem; } /* ── The payoff line ───────────────────────────────────────────────── */ .talk-payoff { text-align: center; border-top: 2px solid var(--talk-rule); border-bottom: 2px solid var(--talk-rule); padding: 1.4rem 0.5rem; margin: 2rem 0; } .talk-payoff p { margin: 0 0 0.4rem; font-size: 1.05rem; font-weight: 700; line-height: 1.5; color: var(--heading-color, inherit); } .talk-payoff p:last-child { margin-bottom: 0; font-size: 0.92rem; font-weight: 400; color: var(--text-muted-color, #6b7280); } /* ── The ladder ────────────────────────────────────────────────────── */ .talk-ladder { display: flex; flex-direction: column-reverse; /* rung 1 renders at the bottom: you climb up */ gap: 0.7rem; margin: 0; padding: 0; list-style: none; } .talk-rung { display: flex; gap: 0.85rem; align-items: flex-start; border: 1px solid var(--talk-rule); border-radius: 10px; background: var(--talk-panel); padding: 0.9rem 1rem; } .talk-rung-n { flex: 0 0 auto; font-family: var(--font-monospace, monospace); font-size: 0.95rem; font-weight: 800; color: var(--talk-accent); background: var(--talk-accent-soft); border-radius: 6px; padding: 0.3rem 0.5rem; line-height: 1; } .talk-rung-name { display: block; font-size: 1rem; font-weight: 700; color: var(--heading-color, inherit); margin-bottom: 0.25rem; } .talk-rung-desc { display: block; font-size: 0.92rem; line-height: 1.6; color: var(--text-color, inherit); } .talk-rung-from { display: block; margin-top: 0.4rem; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-muted-color, #6b7280); } .talk-ladder-note { margin-top: 0.9rem; font-size: 0.88rem; font-style: italic; color: var(--text-muted-color, #6b7280); } /* ── Figures ───────────────────────────────────────────────────────── */ /* The diagrams carry an opaque white background, so on dark surfaces they read as light cards. The border and radius stop that looking like a rendering accident. */ .talk-figure { margin: 2rem 0; } .talk-figure a, .talk-figure img { display: block; width: 100%; height: auto; } .talk-figure img { border: 1px solid var(--talk-rule); border-radius: 10px; background: #fff; } .talk-figure figcaption { margin-top: 0.6rem; font-size: 0.86rem; line-height: 1.6; color: var(--text-muted-color, #6b7280); text-align: left; } .talk-figure-label { display: inline-block; margin-right: 0.4rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--talk-accent); } .talk-teaser { border: 1px solid var(--card-border-color, rgba(128, 128, 128, 0.25)); border-left: 4px solid #6366f1; border-radius: 10px; background: var(--card-bg, rgba(128, 128, 128, 0.04)); padding: 1rem 1.15rem; margin: 0 0 2.5rem; } .talk-teaser-body { font-size: 0.94rem; line-height: 1.65; margin: 0 0 0.9rem; } .talk-teaser strong { color: var(--heading-color, inherit); } .talk-note { margin: 2.5rem 0 0; padding: 1rem 1.15rem; border-left: 3px solid var(--talk-rule); font-size: 0.88rem; line-height: 1.65; color: var(--text-muted-color, #6b7280); } /* Kill Chirpy's loading shimmer on this layout. refactor-content.html adds `.shimmer` to every content image and relies on post.min.js / page.min.js to strip it once the image loads. js-selector.html only ships that bundle for layouts literally named post, page, home, archives, category or tag — so on a `talk` layout nothing ever removes the class and `animation: shimmer 1.3s infinite` loops forever, painting a sweeping gradient over the image because ::before is positioned and the img is not. Neutralising it here is narrower than dropping `refactor: true`, which would also cost heading anchors and code-copy buttons. */ .talk .shimmer { background: none; } .talk .shimmer::before { content: none; animation: none; } /* ── Generic callout ───────────────────────────────────────────────── */ .talk-callout { border-left: 4px solid var(--talk-accent); background: var(--talk-accent-soft); border-radius: 0 10px 10px 0; padding: 1.05rem 1.15rem; margin: 2rem 0; } .talk-callout p { margin: 0 0 0.5rem; line-height: 1.6; } .talk-callout p:last-child { margin-bottom: 0; } .talk-callout strong { color: var(--heading-color, inherit); } /* ── Link lists ────────────────────────────────────────────────────── */ .talk-links { display: grid; gap: 0.6rem; padding: 0; margin: 0; list-style: none; } .talk-link { display: block; border: 1px solid var(--talk-rule); border-radius: 9px; padding: 0.8rem 0.95rem; text-decoration: none !important; background: var(--talk-panel); transition: border-color 0.15s ease; } .talk-link:hover { border-color: var(--talk-accent); } .talk-link-title { display: block; font-size: 0.96rem; font-weight: 650; line-height: 1.45; color: var(--link-color, var(--talk-accent)); } .talk-link-desc { display: block; margin-top: 0.25rem; font-size: 0.86rem; line-height: 1.55; color: var(--text-muted-color, #6b7280); } /* ── Slides & recording ────────────────────────────────────────────── */ .talk-media { display: grid; gap: 1rem; } .talk-media-card { display: block; border: 1px solid var(--talk-rule); border-radius: 10px; overflow: hidden; text-decoration: none !important; background: var(--talk-panel); } .talk-media-card:hover { border-color: var(--talk-accent); } .talk-media-thumb { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--talk-rule); } .talk-media-label { display: block; padding: 0.85rem 1rem; font-size: 0.92rem; font-weight: 650; color: var(--link-color, var(--talk-accent)); } .talk-media-pending { display: flex; align-items: center; gap: 0.85rem; border: 1px dashed var(--talk-rule); border-radius: 10px; padding: 1rem; color: var(--text-muted-color, #6b7280); } .talk-media-pending p { margin: 0; font-size: 0.9rem; line-height: 1.55; } .talk-media-pending-icon { font-size: 1.4rem; opacity: 0.45; flex: 0 0 auto; } /* ── Footer ────────────────────────────────────────────────────────── */ .talk-foot { margin: 2.5rem 0 1rem; padding-top: 1.2rem; border-top: 1px solid var(--talk-rule); font-size: 0.9rem; } .talk-foot a { text-decoration: none; } /* ── Companion block, injected at the top of a linked post ─────────── */ .talk-companion { border: 1px solid var(--card-border-color, rgba(128, 128, 128, 0.25)); border-top: 4px solid #6366f1; border-radius: 12px; background: var(--card-bg, rgba(128, 128, 128, 0.04)); padding: 1.2rem 1.15rem; margin: 0 0 2.5rem; } .talk-companion-eyebrow { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: #6366f1; margin: 0 0 0.5rem; } .talk-companion-title { font-size: 1.08rem; font-weight: 750; line-height: 1.4; color: var(--heading-color, inherit); margin: 0 0 0.4rem; } .talk-companion-sub { font-size: 0.9rem; line-height: 1.6; color: var(--text-muted-color, #6b7280); margin: 0 0 1.1rem; } .talk-companion .talk-checks { margin-bottom: 1.1rem; } .talk-companion .talk-check { padding: 0.6rem 0 0.6rem 2.5rem; } .talk-companion .talk-check::before { top: 0.55rem; width: 1.7rem; height: 1.7rem; font-size: 0.78rem; } .talk-companion .talk-check-do { font-size: 0.94rem; } .talk-companion .talk-ask { margin: 0 0 1.1rem; padding: 1rem; } .talk-companion-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; } .talk-companion-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1rem; border-radius: 8px; font-size: 0.86rem; font-weight: 650; text-decoration: none !important; border: 1px solid var(--card-border-color, rgba(128, 128, 128, 0.3)); color: var(--link-color, #6366f1); } .talk-companion-btn--primary { background: #6366f1; border-color: #6366f1; color: #fff !important; } .talk-companion-btn--primary:hover { background: #4f46e5; border-color: #4f46e5; } /* ── Wider screens ─────────────────────────────────────────────────── */ @media (min-width: 768px) { .talk-hero { padding: 3rem 2.25rem 2.25rem; margin: 0 -1rem 2.75rem; } .talk-title { font-size: 2.3rem; } .talk-subtitle { font-size: 1.1rem; } .talk-thesis { padding: 1.25rem 1.5rem; } .talk-thesis p { font-size: 1.1rem; } .talk-failures { grid-template-columns: repeat(2, minmax(0, 1fr)); } .talk-media { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .talk-section-title, .talk-body h2 { font-size: 1.45rem; } }