Creative Voltage (fs-creative-voltage)

Um plugin de deck de tema único bloqueado, derivado do preset Creative Voltage (seção 3 de STYLE_PRESETS.md) no zarazhangrui/frontend-slides com licença MIT. Vibe: ousado, criativo, enérgico, retro-moderno — uma loja de pôsteres retrô conectada a uma rede elétrica.

Comece a partir de example.html nesta pasta do plugin. É a semente comprovada: copie o CSS do palco, o chrome do invólucro do slide, o CSS do dispositivo de assinatura e todo o script do controlador SlidePresentation verbatim, depois substitua apenas o conteúdo do slide. Não reescreva o sistema de palco, o script de navegação ou os tokens de design. Não introduza cores ou fontes fora desta especificação.

Tokens de design bloqueados (:root — reproduza exatamente)

:root {
    --stage-bg: #10101f;              /* letterbox behind the stage */
    --slide-bg: #1a1a2e;              /* default slide background */

    --bg-primary: #0066ff;            /* electric blue panel */
    --bg-primary-deep: #0052cc;       /* blue gradient stop */
    --bg-dark: #1a1a2e;               /* deep navy panel */
    --bg-dark-2: #23234a;             /* lifted navy card */
    --accent-neon: #d4ff00;           /* neon yellow badge/highlight */
    --accent-neon-soft: rgba(212, 255, 0, 0.14);

    --text-light: #ffffff;
    --text-dim: rgba(255, 255, 255, 0.64);
    --text-faint: rgba(255, 255, 255, 0.34);
    --text-on-neon: #1a1a2e;          /* navy text on neon yellow */
    --line: rgba(255, 255, 255, 0.18);
    --line-blue: rgba(255, 255, 255, 0.28);

    --font-display: 'Syne', sans-serif;       /* 700/800, uppercase headlines */
    --font-mono: 'Space Mono', monospace;     /* 400/700, body + labels + chrome */
    --font-script: 'Yellowtail', cursive;     /* script flourishes only */
    --title-size: 138px;
    --h2-size: 88px;
    --subtitle-size: 32px;
    --body-size: 27px;
    --label-size: 20px;

    --slide-pad: 96px;

    --ease-volt: cubic-bezier(0.16, 1, 0.3, 1);   /* the one signature easing */
    --duration-normal: 0.7s;
}

Google Fonts (a única referência externa permitida): https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Yellowtail&display=swap

Proibido: qualquer cor fora da tabela de tokens; fontes de exibição Inter / Roboto / Arial / do sistema; gradientes roxos; #6366f1 índigo genérico; glassmorfismo de cantos arredondados. Amarelo neon é um acento, nunca um fundo de slide.

Palco fixo 16:9 — sistema de dimensionamento NÃO NEGOCIÁVEL

• Cada deck é criado em uma tela fixa de 1920×1080: .deck-viewport (preenche a janela) envolve .deck-stage (1920×1080, transform-origin: 0 0).
• JavaScript dimensiona todo o palco uniformemente: factor = min(innerWidth/1920, innerHeight/1080), depois transform: translate(x, y) scale(factor) para centralizar com letterbox/pillarbox; reexecute em resize.
• Nunca refluir o conteúdo do slide por dispositivo. Sem breakpoints responsivos dentro dos slides. Todas as medidas são px fixos no tamanho de design de 1920×1080.
• Inclua o bloco completo baseado no viewport da semente <style> (palco, empilhamento de slides, impressão, prefers-reduced-motion).
• A troca de slides alterna as classes .active / .visible, alternando visibility / opacity / pointer-events — nunca display: none.

Chrome do invólucro do slide (todo slide)

• <section class="slide"> diretamente dentro de .deck-stage; ~10 slides por deck — divida o conteúdo em mais slides em vez de diminuir a fonte.
• .slide-no canto superior esquerdo: Space Mono 700, amarelo neon, formato NN / VOLT.
• .crumbs canto superior direito: breadcrumbs mono em maiúsculas; seção ativa em neon (.on).
• .baseline inferior: regra de 2px com legenda mono em maiúsculas à esquerda e NN / 10 à direita.
• O contador de páginas .deck-controls é posicionado fixamente fora do palco dimensionado.

Dispositivos de assinatura (a identidade do tema — use-os, não invente novos)

1. Painéis divididos — .panel-blue (46% de largura, linear-gradient(160deg, #0066ff, #0052cc)) contra a base azul marinho profunda; .panel-blue.right o espelha. Capas, divisores, citações e encerramentos dependem dessa divisão em duas cores.
2. Textura de pontos halftone — .halftone: CSS puro radial-gradient(circle, rgba(255,255,255,.30) 2.2px, transparent 2.9px) em uma grade 22px, desbotado com um gradiente linear mask-image (.fade ou máscaras inline). .halftone.neon troca os pontos para rgba(212,255,0,.45). Coloque um patch halftone por slide, em um canto.

…