TV Retrô (Tubo de Raios Catódicos Retrô)

Um plugin de deck de tema único e travado: o skin retro-tv do lewislulu/html-ppt-skill licenciado por MIT (36 temas × 31 layouts), entregue como um único pacote autônomo — example.html — que carrega a folha de tokens completa, os dispositivos de decoração de transmissão, o andaime de slides e o runtime do teclado.

Comece a partir de example.html. Substitua apenas o conteúdo. Nunca reescreva o sistema de design ou o script de runtime. Nunca introduza cores ou fontes fora dessa especificação.

Posicionamento em relação a plugins retrô-esqueomórficos irmãos: este é o dispositivo de tubo de imagem quente e claro — linhas de varredura em uma tela creme, não em uma tela preta. retro-windows é o cromo de janela cinza do Win95 (barras de título, chanfros); hermes é um CRT de terminal de fósforo verde com fundo escuro. Os três sistemas de dispositivos são mutuamente exclusivos — sem fundos escuros, sem linguagem de terminal, sem cromo de janela aqui. Não misture.

Folha de tokens travada (não se desvie)

Cada variável abaixo é definida no pacote :root. Os slides referenciam apenas tokens — nunca codifique uma cor diretamente no markup do slide.

:root{
  --bg:#f5ecd7;            /* warm cream canvas */
  --bg-soft:#efe4c6;
  --surface:#fbf5e2;       /* parchment card face */
  --surface-2:#efe3c2;
  --border:rgba(120,70,20,.22);        /* warm brown hairlines */
  --border-strong:rgba(120,70,20,.45);
  --text-1:#2a1a08; --text-2:#6b4a22; --text-3:#a68656;
  --accent:#e67e14;        /* amber — the lead */
  --accent-2:#c73a1f;      /* brick red — headlines & emphasis */
  --accent-3:#f2b544;      /* gold — support */
  --good:#3e8940; --warn:#e67e14; --bad:#c73a1f;
  --grad:linear-gradient(135deg,#c73a1f,#e67e14 55%,#f2b544);
  --grad-soft:linear-gradient(135deg,#fde6c4,#fbd9a0);
  --radius:10px; --radius-sm:6px; --radius-lg:16px;
  --shadow:0 6px 0 rgba(80,40,0,.12),0 12px 28px rgba(80,40,0,.15);
  --shadow-lg:0 10px 0 rgba(80,40,0,.15),0 24px 50px rgba(80,40,0,.2);
  --font-sans:'Inter','Noto Sans SC',sans-serif;
  --font-serif:'Playfair Display','Noto Serif SC',serif;
  --font-mono:'JetBrains Mono',SFMono-Regular,Menlo,monospace;
  --font-display:'Playfair Display','Noto Serif SC',serif;
  --letter-tight:-.01em; --letter-normal:0;
  --ease:cubic-bezier(.4,0,.2,1);
}

Sombras são sempre o par de tubos robusto — um deslocamento 0 Npx 0 duro mais um desfoque quente suave juntos. Nunca uma sombra plana simples ou preto puro.

Fontes vêm apenas do Google Fonts @import (Playfair Display, Inter, Noto Sans SC, JetBrains Mono). Nenhum outro recurso externo de qualquer tipo.

Dispositivos de decoração de assinatura (o kit de transmissão)

1. Tela do tubo de imagem — o fundo body aplica camadas de linhas de varredura horizontais fracas repeating-linear-gradient(0deg,rgba(80,40,0,.06) 0 2px, transparent 2px 4px) sobre uma vinheta de vidro curvo radial-gradient(ellipse at center,#f7ecd0 0%,#e8d9b0 85%,#c9b888 100%) que escurece em direção às bordas como um CRT ligado. Os slides permanecem transparentes para que ele apareça em todos os lugares. Nunca pinte um fundo de slide opaco.
2. Overlay de linha de varredura CRT por slide — .slide::before adiciona repeating-linear-gradient(0deg,rgba(0,0,0,.035) 0 2px,transparent 2px 4px) em z-index:1; todo o conteúdo do slide fica em z-index:2. Cada página é lida como um quadro de transmissão. Nunca remova ou diminua o brilho.
3. Barras de cores de teste — .test-bars é uma faixa estilo SMPTE de seis barras na paleta travada (tijolo / âmbar / dourado / verde / pergaminho / marrom). Uma por slide no máximo, como um enfeite.
4. Títulos Playfair com sombras pesadas — .h1 é vermelho tijolo #c73a1f com text-shadow:3px 3px 0 rgba(80,40,0,.18); .h2 é tinta quente com uma sombra deslocada de 2px. Citações e o numeral da seção gigante ficam em Playfair itálico.
5. SVG inline de antena / dial / TV pequena — antenas de orelha de coelho, botões de dial e pequenas TVs traçadas em marrons quentes (#6b4a22/#a68656) com pontas âmbar/tijolo (.tv-shape). 1–2 por slide no máximo.
6. Lâmpada ON AIR e distintivos de canal — .on-air é uma pílula tijolo com um ponto dourado pulsante; cartões de etapa recebem um distintivo mono automático CH 01…04; pílulas são chips arredondados monotipo com uma saliência suave.
7. Numerais de exibição em gradiente — .gradient-text (o gradiente tijolo→âmbar→dourado --grad) é reservado para números grandes e 1–2 palavras de destaque.
8. Entrada de tubo ligado — .anim-tube-on faz um título ou estatística piscar como um CRT aquecendo (escala de colapso vertical). Use em páginas de capa e de estatísticas.

Sistema de layout (catálogo compartilhado de 31 layouts upstream)

…