Electric Studio · 钴蓝工作室

Apresentações com painéis divididos, ousadas, limpas, profissionais e de alto contraste. O tema está travado no preset Electric Studio (seção 2 de STYLE_PRESETS.md) do zarazhangrui/frontend-slides, licenciado sob MIT.

Comece em example.html nesta pasta de plugin. É a semente comprovada: mantenha seu CSS de palco (conteúdo completo de viewport-base.css), o shell de painel dividido, os elementos gráficos de cantos, os tokens :root e todo o script do controlador SlidePresentation verbatim — substitua apenas o conteúdo do slide. Não reescreva o design; não introduza nenhuma cor ou fonte fora desta especificação.

Tokens de design travados (:root — lista completa, sem adições)

:root {
    --bg-dark: #0a0a0a;                          /* edge bar, dark text, stage letterbox */
    --bg-white: #ffffff;                         /* upper panel */
    --accent-blue: #4361ee;                      /* cobalt panel, chips, bars, numerals */
    --text-dark: #0a0a0a;
    --text-light: #ffffff;
    --text-dark-soft: rgba(10, 10, 10, 0.58);
    --text-light-soft: rgba(255, 255, 255, 0.72);
    --line-dark: rgba(10, 10, 10, 0.14);
    --line-light: rgba(255, 255, 255, 0.28);
    --blue-soft: rgba(67, 97, 238, 0.10);        /* tick boxes, outline bar fills */

    --stage-bg: var(--bg-dark);
    --slide-bg: var(--bg-white);

    --font: 'Manrope', sans-serif;               /* the ONLY typeface */
    --title-size: 152px;
    --h2-size: 88px;
    --lede-size: 33px;
    --body-size: 27px;

    --slide-pad-x: 110px;
    --edge-bar-h: 14px;

    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-normal: 0.7s;
}

Proibido: qualquer outra tonalidade, gradientes, roxo/índigo (#6366f1), acentos quentes, fotografia, ilustrações, sombras projetadas, cartões de herói arredondados. A paleta é exatamente branco / cobalto / quase preto, mais seus tons suaves.

Tipografia (tudo Manrope, pesos 400/500/800 do Google Fonts)

• Display / H2 — Manrope 800, espaçamento de letras negativo apertado (-0.025em a -0.035em), altura de linha ≤ 1.08. Título ~152px, H2 60–88px. Um ponto final em --accent-blue (<span class="blue">.</span>) é um toque de assinatura.
• Hero de citação — Manrope 800 a 92px com uma marca “ cobalto superdimensionada (220px): a tipografia da citação é o visual hero do deck.
• Kicker — 22px, 800, maiúsculas, letter-spacing: 0.34em, cobalto sobre branco / branco sobre cobalto.
• Corpo / lede — 400/500, 25–33px. O texto de apoio no painel branco usa --text-dark-soft; o corpo do texto no painel cobalto permanece totalmente --text-light para contraste WCAG AA (o tom alfa claro suave é reservado para elementos gráficos gráficos maiúsculos em negrito: marcas, dicas, separadores).
• Marcas — 19px, 800, maiúsculas, letter-spacing: 0.22em.
• Nunca substitua Inter, Roboto, Arial, serifs ou qualquer segunda fonte.

Sistema de layout travado — painéis divididos verticalmente

Todo slide é o mesmo shell:

<section class="slide s-<master>">
  <div class="split">
    <div class="panel panel-white panel-pad"> … </div>
    <div class="edge-bar"></div>            <!-- 14px #0a0a0a accent bar on the panel seam -->
    <div class="panel panel-blue panel-pad"> … </div>
  </div>
  <div class="mark mark-tl dark"><span class="chip"></span>Brand</div>
  <div class="mark mark-tr dark"><span class="soft">Section</span></div>
  <div class="mark mark-bl light"><span class="soft">Deck label</span></div>
  <div class="mark mark-br light">NN / NN</div>
</section>

• Branco acima, cobalto #4361ee abaixo — sempre. Varie apenas a proporção da divisão por master; nunca divisões lado a lado, nunca azul sobre branco.
• Barra de borda (.edge-bar, 14px, --bg-dark) fica na junção de todo slide; use .edge-bar.light (branco) apenas quando um slide for dominante em cobalto e precisar do inverso.
• Marcas da marca nos cantos são os elementos gráficos (sem migalhas de pão, sem linha de base): chip cobalto superior esquerdo (quadrado de 16px) + logotipo; rótulo da seção superior direita; rótulo do deck inferior esquerdo; marca de página NN / NN inferior direita. As marcas sobre o painel branco usam .dark, as marcas sobre o painel cobalto usam .light.
• O preenchimento horizontal é --slide-pad-x (110px) em ambos os painéis; o espaçamento permanece confiante e contido — margens generosas, sem aperto.

Páginas Master (componha decks a partir destas; todas presentes na semente)

…