Programação de evento por dia · Biblioteca de seções

<section class="sec-dark sec-pad pgm" data-pgm> <div class="wrap"> <div class="sec-head"> <span class="eyebrow" data-rv>Programação</span> <h2 class="sec-title ttl">O que acontece <em>em cada dia</em></h2> <p class="sec-lead" data-rv data-d="1">Dois dias, dois temas, sete sessões. A oficina do primeiro dia é com o seu próprio relatório aberto.</p> </div> <div class="pgm-dias"> <div class="pgm-dia"> <div class="pgm-dia-cab" data-rv> <p class="pgm-dia-n">Dia 1 · <time datetime="2026-11-11">qua, 11 nov</time></p> <h3 class="pgm-dia-tema">Patrimônio e mercado</h3> <p class="pgm-dia-p">O ano que passou sem retoque, e o que ele pede da carteira em 2027.</p> </div> <ol class="pgm-sessoes" role="list"> <li class="pgm-sessao" data-rv data-pgm-inicio="2026-11-11T09:00:00-03:00" data-pgm-fim="2026-11-11T09:45:00-03:00"> <p class="pgm-meta"><time class="pgm-hora" datetime="2026-11-11T09:00-03:00">9h</time> · 45 min · <span class="pgm-formato">Abertura</span></p> <h4 class="pgm-titulo">O ano que passou, sem retoque</h4> <p class="pgm-linha">O que funcionou, o que não funcionou e o que mudamos por causa disso.</p> <p class="pgm-quem"><span class="pgm-pessoa">Ricardo Couto</span></p> </li> <li class="pgm-sessao" data-rv data-d="1" data-pgm-inicio="2026-11-11T10:00:00-03:00" data-pgm-fim="2026-11-11T11:00:00-03:00"> <p class="pgm-meta"><time class="pgm-hora" datetime="2026-11-11T10:00-03:00">10h</time> · 60 min · <span class="pgm-formato">Painel</span></p> <h4 class="pgm-titulo">Juros altos por mais tempo</h4> <p class="pgm-linha">O que alongar prazo exige de quem vive de renda.</p> <p class="pgm-quem"><span class="pgm-pessoa">Helena Prado</span><span class="pgm-pessoa">Tiago Wen</span></p> </li> <li class="pgm-sessao" data-rv data-d="2" data-pgm-inicio="2026-11-11T11:30:00-03:00" data-pgm-fim="2026-11-11T12:15:00-03:00"> <p class="pgm-meta"><time class="pgm-hora" datetime="2026-11-11T11:30-03:00">11h30</time> · 45 min · <span class="pgm-formato">Palestra</span></p> <h4 class="pgm-titulo">Crédito privado depois da onda</h4> <p class="pgm-linha">O que olhar numa debênture além da taxa que ela paga.</p> <p class="pgm-quem"><span class="pgm-pessoa">Ana Salles</span></p> </li> <li class="pgm-sessao" data-rv data-d="3" data-pgm-inicio="2026-11-11T14:00:00-03:00" data-pgm-fim="2026-11-11T15:30:00-03:00"> <p class="pgm-meta"><time class="pgm-hora" datetime="2026-11-11T14:00-03:00">14h</time> · 90 min · <span class="pgm-formato">Oficina</span></p> <h4 class="pgm-titulo">Lendo o próprio relatório</h4> <p class="pgm-linha">Traga o seu. Saímos sabendo o que cada linha quer dizer.</p> <p class="pgm-quem"><span class="pgm-pessoa">Carlos Ramos</span></p> </li> </ol> </div> <div class="pgm-dia"> <div class="pgm-dia-cab" data-rv> <p class="pgm-dia-n">Dia 2 · <time datetime="2026-11-12">qui, 12 nov</time></p> <h3 class="pgm-dia-tema">Família e sucessão</h3> <p class="pgm-dia-p">A conversa que toda família adia, com hora marcada e roteiro.</p> </div> <ol class="pgm-sessoes" role="list"> <li class="pgm-sessao" data-rv data-pgm-inicio="2026-11-12T09:00:00-03:00" data-pgm-fim="2026-11-12T10:00:00-03:00"> <p class="pgm-meta"><time class="pgm-hora" datetime="2026-11-12T09:00-03:00">9h</time> · 60 min · <span class="pgm-formato">Palestra</span></p> <h4 class="pgm-titulo">Holding: quando vale, quando não</h4> <p class="pgm-linha">O custo de manter a estrutura, comparado ao do inventário que ela evita.</p> <p class="pgm-quem"><span class="pgm-pessoa">Marina Couto</span></p> </li> <li class="pgm-sessao" data-rv data-d="1" data-pgm-inicio="2026-11-12T10:30:00-03:00" data-pgm-fim="2026-11-12T11:30:00-03:00"> <p class="pgm-meta"><time class="pgm-hora" datetime="2026-11-12T10:30-03:00">10h30</time> · 60 min · <span class="pgm-formato">Painel</span></p> <h4 class="pgm-titulo">Conversar sobre herança em vida</h4> <p class="pgm-linha">Três famílias contam como fizeram, e o que fariam diferente.</p> <p class="pgm-quem"><span class="pgm-pessoa">Marina Couto</span><span class="pgm-pessoa">Pedro Duarte</span></p> </li> <li class="pgm-sessao" data-rv data-d="2" data-pgm-inicio="2026-11-12T14:00:00-03:00" data-pgm-fim="2026-11-12T14:45:00-03:00"> <p class="pgm-meta"><time class="pgm-hora" datetime="2026-11-12T14:00-03:00">14h</time> · 45 min · <span class="pgm-formato">Encerramento</span></p> <h4 class="pgm-titulo">O que fica para 2027</h4> <p class="pgm-linha">As três decisões que valem a pena tomar antes de janeiro.</p> <p class="pgm-quem"><span class="pgm-pessoa">Ricardo Couto</span></p> </li> </ol> </div> </div> </div> </section>

/* ========================================================================== PROGRAMAÇÃO DE EVENTO — pgm- Cada dia um bloco: o dia grudado à esquerda, as sessões passando à direita. Tokens usados: --bg --fg --fg-2 --fg-muted --rule --rule-2 --accent --accent-ink --display --nav-h --radius-media --radius-pill ========================================================================== */ .pgm-dias{display:grid;gap:clamp(48px,7vh,80px);margin-top:clamp(40px,6vh,64px)} .pgm-dia{ display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(24px,4vw,64px);align-items:start; } /* O dia gruda enquanto as sessões dele passam. sticky dentro de [data-rv] funciona: filtro prende descendente fixed, não sticky (MANUAL §5). */ .pgm-dia-cab{position:sticky;top:calc(var(--nav-h) + 24px);display:grid;gap:10px} .pgm-dia-n{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink,var(--accent))} .pgm-dia-tema{ font-family:var(--display);font-weight:700; font-size:clamp(24px,2.4vw,32px);line-height:1.1;letter-spacing:-.022em;color:var(--fg); } .pgm-dia-p{font-size:15px;line-height:1.6;color:var(--fg-2);max-inline-size:34ch} .pgm-dia.is-hoje .pgm-dia-n::after{content:" · hoje";color:var(--fg)} /* ---------------------------------------------------------------- sessões */ .pgm-sessoes{border-top:1px solid var(--rule)} .pgm-sessao{ position:relative;display:grid;gap:8px; padding:24px 0 26px;border-bottom:1px solid var(--rule); } .pgm-meta{font-size:12.5px;letter-spacing:.04em;color:var(--fg-muted);font-variant-numeric:tabular-nums} .pgm-hora{color:var(--fg);font-weight:500} .pgm-formato{color:var(--fg-2)} .pgm-titulo{ font-family:var(--display);font-weight:700; font-size:clamp(18px,1.6vw,22px);line-height:1.2;letter-spacing:-.015em;color:var(--fg); } .pgm-linha{font-size:14.5px;line-height:1.55;color:var(--fg-2);max-inline-size:60ch} .pgm-quem{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px} .pgm-pessoa{ font-size:12px;color:var(--fg-2); border:1px solid var(--rule-2);border-radius:var(--radius-pill);padding:4px 11px; } /* ---------------------------------------------------------------- estados Escritos pelo script, e só no dia do evento. O selo "Acontecendo agora" é criado por ele; nada disso está no markup. */ .pgm-agora{ position:absolute;inset-block-start:22px;inset-inline-end:0; display:inline-flex;align-items:center;gap:8px; font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 50%,transparent); border-radius:var(--radius-pill);padding:5px 11px; } .pgm-agora::before{content:"";inline-size:7px;block-size:7px;border-radius:50%;background:currentColor} .pgm-sessao[data-estado="passou"] .pgm-titulo, .pgm-sessao[data-estado="passou"] .pgm-linha, .pgm-sessao[data-estado="passou"] .pgm-quem{opacity:.5} @media(max-width:860px){ .pgm-dia{grid-template-columns:1fr} .pgm-dia-cab{position:static} .pgm-agora{position:static;justify-self:start} }

/* ========================================================================== PROGRAMAÇÃO DE EVENTO — pgm- Concede o estado de cada sessão pelo relógio, e só no dia dela: em curso selo "Acontecendo agora" (criado aqui, nunca no markup) já passou data-estado="passou" — o CSS apaga um pouco E marca o dia de hoje (.is-hoje) se ele estiver na programação. Fora das datas do evento, nada muda: a programação é o que foi escrito. Não anima nada; reavalia a cada minuto. ========================================================================== */ (function () { var raizes = document.querySelectorAll('[data-pgm]'); if (!raizes.length) return; // guard: sem o componente, saída silenciosa function mesmoDia(a, b) { var x = new Date(a), y = new Date(b); return x.getFullYear() === y.getFullYear() && x.getMonth() === y.getMonth() && x.getDate() === y.getDate(); } [].forEach.call(raizes, function (raiz) { var dias = [].slice.call(raiz.querySelectorAll('.pgm-dia')); function avaliar() { var agora = Date.now(); dias.forEach(function (dia) { var hoje = false; [].forEach.call(dia.querySelectorAll('.pgm-sessao'), function (s) { var ini = Date.parse(s.getAttribute('data-pgm-inicio')); var fim = Date.parse(s.getAttribute('data-pgm-fim')) || ini; var velho = s.querySelector('.pgm-agora'); if (velho) s.removeChild(velho); s.removeAttribute('data-estado'); if (isNaN(ini) || !mesmoDia(ini, agora)) return; // só no dia da sessão hoje = true; if (agora >= fim) { s.setAttribute('data-estado', 'passou'); return; } if (agora >= ini) { s.setAttribute('data-estado', 'agora'); var selo = document.createElement('span'); selo.className = 'pgm-agora'; selo.textContent = 'Acontecendo agora'; s.insertBefore(selo, s.firstChild); } }); dia.classList.toggle('is-hoje', hoje); }); } avaliar(); setInterval(avaliar, 60000); }); })();

O que acontece dentro de um evento. Cada dia é um bloco: à esquerda, o dia, a data, o tema e uma frase, grudados enquanto as sessões daquele dia passam à direita. Cada sessão diz a hora, a duração, o formato (palestra, painel, oficina), o título, uma linha e quem fala. No dia do evento, a sessão em curso ganha "Acontecendo agora" e as que já passaram apagam um pouco.

O problema que ela resolve: convite de evento que só diz "dia 11, às 9h" pede um ato de fé. A programação é o argumento — quem vai falar, sobre o quê, por quanto tempo. E no dia, a mesma página vira o guia de quem está no auditório.

Quando usar

Página de um evento com mais de uma sessão: encontro anual, seminário, ciclo de palestras.
Um a três dias, três a doze sessões no total.
Junto do conversao/selo-prazo para a inscrição, e da listas/agenda-eventos na página que lista todos os eventos.

Quando não usar

Lista de eventos diferentes — listas/agenda-eventos.
Uma sessão só. Aí o evento é um hero com data e botão.
Etapas de um processo — listas/linha-do-tempo-etapas.

Padrão editorial

Slot	Regra
Dia	"Dia 1 · qua, 11 nov"
Tema do dia	2 a 5 palavras, o eixo do dia
Frase do dia	8 a 18 palavras, por que esse dia importa. Opcional
Título da sessão	3 a 8 palavras, o assunto — nunca "Palestra sobre…"
Linha	6 a 16 palavras, o que a pessoa leva. Opcional
Quem fala	nome e sobrenome, um por pílula

O que mantém a peça: o formato vai na meta, não no título. "Painel" e "Oficina" ficam na linha pequena de cima; o título é só o assunto, e a lista lê como programa, não como catálogo.

Especificação dos assets

Nenhum. A peça é tipográfica de propósito.

Como usar

<link rel="stylesheet" href="componentes/listas/programacao-evento/estilo.css">
<script src="componentes/listas/programacao-evento/script.js"></script>

Cada sessão declara início e fim com fuso:

<li class="pgm-sessao" data-pgm-inicio="2026-11-11T09:00:00-03:00" data-pgm-fim="2026-11-11T09:45:00-03:00">

Ganchos

Gancho	Papel
`[data-pgm]`	a raiz
`data-pgm-inicio` / `data-pgm-fim`	início e fim da sessão, com fuso
`.pgm-sessao[data-estado]`	`agora` ou `passou`, só no dia
`.pgm-dia.is-hoje`	o dia de hoje, se estiver na programação
`.pgm-agora`	o selo, criado pelo script

Variações

Um dia só — um único .pgm-dia.
Sobre papel — .sec-paper no lugar de .sec-dark.

Gotchas

O estado só existe no dia da sessão. Antes e depois do evento, a programação é o que foi escrito — sem "encerrada" em tudo depois da data. Quem chega à página meses depois lê a programação do que aconteceu, não um cemitério de selos.
O dia gruda, e dentro de [data-rv] isso funciona. Filtro prende descendente fixed, não sticky (MANUAL §5). No celular o dia volta a static e vira cabeçalho.
<ol> com role="list". A ordem é a informação (MANUAL §6, armadilha 4).
"Mesmo dia" é o dia de quem olha. Para um evento em São Paulo visto de Lisboa à meia-noite, a virada acontece numa hora diferente — mas o selo de "agora" usa o instante absoluto, com fuso, e esse não erra.

Movimento reduzido / toque

Nada anda além do reveal do core. O selo "agora" não pulsa: é estado, não chamada.

Histórico

Origem	Quando	O quê
referência: metric.modulify.website	2026-09-29	Clone de referência, reescrito do zero

O que veio da referência: o dia à esquerda e as sessões à direita, com duração, formato e palestrantes. O que mudou: o dia gruda, marcação de lista ordenada e <time>, o "agora" concedido pelo relógio (motor da listas/agenda-eventos), sem miniatura por sessão. Registro consolidado em projetos/referencias-externas.md.