mirror of
https://github.com/fsolla/teqo.git
synced 2026-11-15 02:23:07 +00:00
- skill + command finos: shot list é a fonte única; ajuste regenera, nada publica - scripts/build-reel.mjs + scripts/lib/reel*.mjs: captura CDP com timestamps de parede (sem drift), cursor/halo DOM-injected, zoompan do log de cliques, legendas queimadas, capa 1080x1350-safe, concat H.264 1080x1920/30fps - ffmpeg: FFMPEG_PATH -> PATH -> @ffmpeg-installer (registry-only) com probe fail-closed - kit oficial da campanha: public/campaign-kit (marcas positiva/negativa, numero, estrela) + manual em docs/campaign-kit + README de regras; skill e agente de design referenciam o material - 26 testes unit novos + pin do command; changelog 2026-09-18-c196 Closes #1155
890 lines
42 KiB
HTML
890 lines
42 KiB
HTML
<!doctype html>
|
||
<html lang="pt-BR" data-theme="campaign-site">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
||
<title>Design — C196 · Sistema visual dos reels tutoriais</title>
|
||
<style type="text/tailwindcss">
|
||
@theme inline {
|
||
--font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
|
||
--color-background: var(--background);
|
||
--color-foreground: var(--foreground);
|
||
--color-primary: var(--kit-red);
|
||
--color-primary-foreground: #ffffff;
|
||
--color-muted: #ebe9e9;
|
||
--color-muted-foreground: var(--campaign-muted);
|
||
--color-border: var(--campaign-line);
|
||
}
|
||
[data-theme='campaign-site'] {
|
||
--background: #fff8f2;
|
||
--foreground: #000000;
|
||
--kit-red: #e4102f;
|
||
--kit-blue: #184e92;
|
||
--kit-yellow: #ffeb00;
|
||
--kit-green: #009647;
|
||
--kit-orange: #f89c0e;
|
||
--site-red: #a21c1c;
|
||
--site-yellow: #ffe607;
|
||
--pt-red: var(--kit-red);
|
||
--pt-red-dark: #184e92;
|
||
--pt-yellow: var(--kit-yellow);
|
||
--campaign-cream: #fff8f2;
|
||
--campaign-muted: #6c615e;
|
||
--campaign-surface: #f9faff;
|
||
--campaign-band: #ebe9e9;
|
||
--campaign-line: rgb(0 0 0 / 12%);
|
||
}
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
body {
|
||
font-family: Inter, ui-sans-serif, system-ui, sans-serif;
|
||
}
|
||
.brexter {
|
||
/* Brexter Bold 700 is the approved face; Impact is only the standalone fallback. */
|
||
font-family: Brexter, Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
|
||
font-weight: 700;
|
||
}
|
||
.artifact-grid {
|
||
background-color: #ebe9e9;
|
||
background-image: radial-gradient(rgb(71 19 14 / 10%) 0.7px, transparent 0.7px);
|
||
background-size: 18px 18px;
|
||
}
|
||
.frame {
|
||
position: relative;
|
||
aspect-ratio: 9 / 16;
|
||
overflow: hidden;
|
||
background: #fff8f2;
|
||
container-type: inline-size;
|
||
}
|
||
.crop-preview {
|
||
container-type: inline-size;
|
||
}
|
||
.frame-shadow {
|
||
box-shadow: 0 22px 62px rgb(71 19 14 / 18%);
|
||
}
|
||
.site-placeholder {
|
||
background:
|
||
linear-gradient(180deg, rgb(255 255 255 / 6%), transparent 24%),
|
||
linear-gradient(145deg, #dedbd8, #aaa39e);
|
||
}
|
||
.safe-line {
|
||
border-color: rgb(255 230 7 / 82%);
|
||
}
|
||
.crop-line {
|
||
border-color: rgb(255 255 255 / 78%);
|
||
}
|
||
.kit-asset {
|
||
display: block;
|
||
height: auto;
|
||
object-fit: contain;
|
||
}
|
||
.cursor {
|
||
filter: drop-shadow(0 2px 2px rgb(0 0 0 / 35%));
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="artifact-grid min-h-screen text-foreground antialiased">
|
||
<main class="mx-auto max-w-[1500px] px-4 py-10 md:px-8 md:py-14">
|
||
<header class="max-w-4xl">
|
||
<div class="flex flex-wrap items-center gap-2">
|
||
<span class="rounded-full bg-(--pt-red) px-2.5 py-1 text-xs font-semibold text-white"
|
||
>C196 · gate hi-fi</span
|
||
>
|
||
<span
|
||
class="rounded-full border border-black/10 bg-(--campaign-cream) px-2.5 py-1 text-xs font-medium"
|
||
>Vídeo 1080 × 1920 · 9:16</span
|
||
>
|
||
<span
|
||
class="rounded-full border border-black/10 bg-(--campaign-cream) px-2.5 py-1 text-xs font-medium"
|
||
>Sem áudio · legenda queimada</span
|
||
>
|
||
</div>
|
||
<h1 class="mt-4 text-3xl font-semibold tracking-tight">Tutorial que se entende no mudo</h1>
|
||
<p class="mt-2 max-w-3xl text-sm leading-6 text-muted-foreground">
|
||
Um sistema de frames para ensinar o site com ritmo, contraste e marca — sem competir com a
|
||
gravação. O vermelho enquadra a história; amarelo aponta a ação; Brexter carrega o
|
||
impacto. O kit oficial 2026 assina as cenas gráficas; a captura conserva a aparência real
|
||
do site.
|
||
</p>
|
||
<div class="mt-5 flex flex-wrap gap-2 text-xs">
|
||
<a
|
||
href="#sequencia"
|
||
class="rounded-full border border-black/10 bg-white px-3 py-1.5 font-medium"
|
||
>01–03 · Sequência</a
|
||
>
|
||
<a
|
||
href="#kit"
|
||
class="rounded-full border border-black/10 bg-white px-3 py-1.5 font-medium"
|
||
>04 · Kit oficial</a
|
||
>
|
||
<a
|
||
href="#safe-zone"
|
||
class="rounded-full border border-black/10 bg-white px-3 py-1.5 font-medium"
|
||
>05 · Safe zone</a
|
||
>
|
||
<a
|
||
href="#capa"
|
||
class="rounded-full border border-black/10 bg-white px-3 py-1.5 font-medium"
|
||
>06 · Capa e recortes</a
|
||
>
|
||
<a
|
||
href="#spec"
|
||
class="rounded-full border border-black/10 bg-white px-3 py-1.5 font-medium"
|
||
>07 · Sistema</a
|
||
>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- SEQUÊNCIA -->
|
||
<section id="sequencia" class="mt-16" aria-labelledby="sequencia-title">
|
||
<div class="mb-5">
|
||
<p class="text-xs font-semibold text-(--pt-red)">CENAS 01–03 · LINHA DO TEMPO</p>
|
||
<h2 id="sequencia-title" class="mt-1 text-xl font-semibold tracking-tight">
|
||
Hook → gesto → ação
|
||
</h2>
|
||
<p class="mt-1 text-sm text-muted-foreground">
|
||
Frames em escala. Tudo crítico permanece no miolo seguro.
|
||
</p>
|
||
</div>
|
||
<div class="grid gap-8 md:grid-cols-3">
|
||
<!-- HOOK -->
|
||
<article>
|
||
<div class="mb-3 flex items-end justify-between">
|
||
<div>
|
||
<p class="text-sm font-semibold">01 · Hook</p>
|
||
<p class="text-xs text-muted-foreground">0–1,5s</p>
|
||
</div>
|
||
<span class="rounded-full bg-black px-2 py-1 text-[10px] font-semibold text-white"
|
||
>ABERTURA</span
|
||
>
|
||
</div>
|
||
<div
|
||
class="frame frame-shadow mx-auto w-full max-w-[360px] rounded-[22px] border border-black/15 bg-(--pt-red)"
|
||
>
|
||
<div
|
||
class="absolute inset-0 bg-[linear-gradient(160deg,#e4102f_0%,#e4102f_62%,#184e92_145%)]"
|
||
></div>
|
||
<img
|
||
src="../../public/campaign-kit/estrela.png"
|
||
alt=""
|
||
class="kit-asset absolute left-[250px] top-[54px] size-[88px] rounded-full bg-white"
|
||
/>
|
||
<div class="absolute left-[6%] right-[6%] top-[14%]">
|
||
<div
|
||
class="inline-flex rounded-full bg-(--pt-yellow) px-[4%] py-[1.7%] text-[3.5cqw] font-black text-black"
|
||
>
|
||
FAÇA PARTE
|
||
</div>
|
||
<h3
|
||
class="brexter mt-[8%] max-w-full text-[9.5cqw] leading-[0.9] uppercase tracking-[-0.05em] text-white"
|
||
>
|
||
<span class="block whitespace-nowrap">Seu apoio</span>
|
||
<span class="block whitespace-nowrap">vira card</span>
|
||
<span class="block whitespace-nowrap text-(--pt-yellow)">em segundos.</span>
|
||
</h3>
|
||
</div>
|
||
<div class="absolute left-[22px] top-[356px] w-[170px]">
|
||
<p class="text-[3.8cqw] font-semibold leading-[1.2] text-white">
|
||
Veja como criar o seu pelo celular.
|
||
</p>
|
||
</div>
|
||
<img
|
||
src="../../public/campaign-kit/marca-negativa-completa.png"
|
||
alt="Jorge Solla 1313 · Mais Saúde, Mais Futuro"
|
||
class="kit-asset absolute left-[206px] top-[322px] w-[132px]"
|
||
/>
|
||
<span
|
||
class="absolute bottom-[5%] left-[6%] rounded bg-black/45 px-2 py-1 text-[2.5cqw] text-white"
|
||
>KIT OFICIAL · marca negativa completa</span
|
||
>
|
||
</div>
|
||
<p class="mx-auto mt-3 max-w-[360px] text-xs leading-5 text-muted-foreground">
|
||
<strong class="text-foreground">Movimento:</strong> título entra em dois beats; a
|
||
estrela oficial deriva 8px para dentro com fade, sem pulsar. Sem zoom de site ainda.
|
||
</p>
|
||
<div
|
||
class="mx-auto mt-3 max-w-[360px] rounded-xl border border-(--pt-red)/25 bg-(--campaign-cream) p-3 text-xs leading-5"
|
||
>
|
||
<p class="font-bold text-(--pt-red)">CALIBRAÇÃO · BREXTER BOLD OFICIAL @ 360PX</p>
|
||
<p class="mt-1 text-muted-foreground">
|
||
Título: <strong class="text-foreground">34,2px (9,5cqw)</strong> · entrelinha
|
||
<strong class="text-foreground">30,78px (0,9)</strong> · tracking
|
||
<strong class="text-foreground">−1,71px (−0,05em)</strong> · largura máxima
|
||
<strong class="text-foreground">316,8px (100% do bloco entre insets de 6%)</strong>.
|
||
As três linhas são explícitas e não quebram internamente.
|
||
</p>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- PASSO -->
|
||
<article>
|
||
<div class="mb-3 flex items-end justify-between">
|
||
<div>
|
||
<p class="text-sm font-semibold">02 · Passo</p>
|
||
<p class="text-xs text-muted-foreground">demonstração</p>
|
||
</div>
|
||
<span
|
||
class="rounded-full bg-(--pt-yellow) px-2 py-1 text-[10px] font-black text-black"
|
||
>1 / 3</span
|
||
>
|
||
</div>
|
||
<div
|
||
class="frame frame-shadow mx-auto w-full max-w-[360px] rounded-[22px] border border-black/15 bg-black"
|
||
>
|
||
<div class="site-placeholder absolute inset-0">
|
||
<div class="absolute inset-x-0 top-0 h-[7%] bg-(--site-red)">
|
||
<div
|
||
class="absolute left-[6%] top-1/2 h-[18%] w-[28%] -translate-y-1/2 rounded-full bg-white/75"
|
||
></div>
|
||
<div
|
||
class="absolute right-[6%] top-1/2 size-[7%] -translate-y-1/2 rounded-full bg-white/25"
|
||
></div>
|
||
</div>
|
||
<div class="absolute inset-x-[6%] top-[11%] text-center">
|
||
<p class="text-[2.4cqw] font-black tracking-[0.1em] text-(--site-red) uppercase">
|
||
Faça parte
|
||
</p>
|
||
<h4 class="mt-[1%] text-[5cqw] font-black leading-tight">
|
||
Mostre que você está com Solla
|
||
</h4>
|
||
<p
|
||
class="mx-auto mt-[2%] max-w-[86%] text-[2.7cqw] leading-[1.3] text-(--campaign-muted)"
|
||
>
|
||
Escolha um modelo, coloque seu nome ou sua foto e baixe seu card.
|
||
</p>
|
||
</div>
|
||
<div class="absolute inset-x-[6%] top-[28%] flex gap-[3%]">
|
||
<div
|
||
class="aspect-square flex-1 rounded-[6%] border border-black/10 bg-(--campaign-cream) p-[3%]"
|
||
>
|
||
<div class="h-full rounded-[5%] bg-(--site-red)"></div>
|
||
<p class="mt-[3%] text-center text-[2.1cqw] font-bold">Card com seu nome</p>
|
||
</div>
|
||
<div
|
||
class="aspect-square flex-1 rounded-[6%] border border-black/10 bg-white p-[3%] opacity-70"
|
||
>
|
||
<div class="h-full rounded-[5%] bg-stone-300"></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="absolute inset-x-[5%] bottom-[22%] rounded-[5%] bg-white p-[5%] shadow-xl ring-1 ring-black/10"
|
||
>
|
||
<p class="text-[4.5cqw] font-black">Personalize com seu nome</p>
|
||
<div
|
||
class="mt-[4%] h-[10cqw] rounded-lg border border-black/20 px-[4%] py-[3%] text-[3.3cqw] text-black/60"
|
||
>
|
||
Seu nome
|
||
</div>
|
||
<div
|
||
class="mt-[4%] h-[10cqw] rounded-lg bg-(--site-red) pt-[3%] text-center text-[3.2cqw] font-bold text-white"
|
||
>
|
||
Criar meu card
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- badge de passo -->
|
||
<div
|
||
class="absolute left-[6%] top-[15%] flex items-center gap-[2%] rounded-full bg-(--pt-yellow) px-[4%] py-[2%] text-[3.2cqw] font-black text-black shadow-lg"
|
||
>
|
||
<span
|
||
class="grid size-[6cqw] place-items-center rounded-full bg-black text-[2.8cqw] text-white"
|
||
>1</span
|
||
>Escolha um modelo
|
||
</div>
|
||
<!-- zoom target -->
|
||
<div
|
||
class="absolute left-[87px] top-[196px] h-[246px] w-[186px] rounded-[16px] border-[3px] border-(--kit-yellow) shadow-[0_0_0_5px_rgb(255_235_0/20%)]"
|
||
></div>
|
||
<svg
|
||
class="cursor absolute left-[40%] top-[49%] w-[8%] text-white"
|
||
viewBox="0 0 24 30"
|
||
fill="currentColor"
|
||
stroke="#000"
|
||
stroke-width="1.4"
|
||
>
|
||
<path d="M3 2v22l6-6 4 9 4-2-4-9h8L3 2Z" />
|
||
</svg>
|
||
<div class="absolute inset-x-[6%] top-[60%] flex justify-center">
|
||
<p
|
||
class="max-w-[90%] rounded-[4%] bg-black/86 px-[5%] py-[3.5%] text-center text-[4.1cqw] font-bold leading-[1.18] text-white shadow-xl"
|
||
>
|
||
Toque em <span class="text-(--pt-yellow)">“Card com seu nome”</span>.
|
||
</p>
|
||
</div>
|
||
<div
|
||
class="absolute left-[214px] top-[22px] grid h-[68px] w-[124px] place-items-center rounded-[8px] bg-white/92 p-[6px] shadow-sm"
|
||
>
|
||
<img
|
||
src="../../public/campaign-kit/jorge-solla-positivo.png"
|
||
alt="Jorge Solla · Deputado Federal"
|
||
class="kit-asset h-[56px] w-[112px]"
|
||
/>
|
||
</div>
|
||
<span
|
||
class="absolute bottom-[5%] left-[6%] rounded bg-black/55 px-2 py-1 text-[2.5cqw] text-white"
|
||
>CAPTURA REAL · chrome com marca positiva</span
|
||
>
|
||
</div>
|
||
<p class="mx-auto mt-3 max-w-[360px] text-xs leading-5 text-muted-foreground">
|
||
<strong class="text-foreground">Câmera:</strong> zoom suave até 118% no tile; cursor
|
||
chega 180ms antes do clique; halo acompanha o tile real em
|
||
<strong class="text-foreground">x87 · y196 · 186 × 246px @360</strong> e pulsa uma
|
||
vez. Após o clique, some em até 300ms e não permanece sobre o drawer aberto. A legenda
|
||
fica a ~1160px no arquivo final.
|
||
</p>
|
||
</article>
|
||
|
||
<!-- CTA -->
|
||
<article>
|
||
<div class="mb-3 flex items-end justify-between">
|
||
<div>
|
||
<p class="text-sm font-semibold">03 · Fechamento / CTA</p>
|
||
<p class="text-xs text-muted-foreground">últimos 2–3s</p>
|
||
</div>
|
||
<span class="rounded-full bg-black px-2 py-1 text-[10px] font-semibold text-white"
|
||
>FINAL</span
|
||
>
|
||
</div>
|
||
<div
|
||
class="frame frame-shadow mx-auto w-full max-w-[360px] rounded-[22px] border border-black/15 bg-white"
|
||
>
|
||
<div class="absolute inset-x-0 top-0 h-[47%] bg-(--pt-red)">
|
||
<img
|
||
src="../../public/campaign-kit/estrela.png"
|
||
alt=""
|
||
class="kit-asset absolute left-[20px] top-[48px] size-[72px] rounded-full bg-white"
|
||
/>
|
||
</div>
|
||
<div class="absolute inset-x-[7%] top-[14%] text-center text-white">
|
||
<p class="text-[3cqw] font-black tracking-[0.12em] uppercase text-(--pt-yellow)">
|
||
Seu card, sua voz
|
||
</p>
|
||
<h3
|
||
class="brexter mx-auto mt-[4%] max-w-full text-[11.5cqw] leading-[0.9] uppercase"
|
||
>
|
||
Agora é<br />com você.
|
||
</h3>
|
||
</div>
|
||
<div
|
||
class="absolute inset-x-[7%] top-[51%] rounded-[6%] bg-white p-[7%] text-center shadow-[0_14px_40px_rgb(71_19_14/14%)] ring-1 ring-black/10"
|
||
>
|
||
<div
|
||
class="mx-auto grid size-[14cqw] place-items-center rounded-full bg-(--pt-yellow)"
|
||
>
|
||
<svg
|
||
class="size-[7cqw]"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.3"
|
||
>
|
||
<path d="M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7" />
|
||
<path d="M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7" />
|
||
</svg>
|
||
</div>
|
||
<p class="mt-[5%] text-[4cqw] font-semibold">Acesse o site pelo</p>
|
||
<p class="brexter mt-[1%] text-[8cqw] leading-none uppercase text-(--kit-blue)">
|
||
link na bio
|
||
</p>
|
||
<p class="mt-[4%] text-[3cqw] leading-[1.35] text-(--campaign-muted)">
|
||
Escolha seu modelo, crie e compartilhe.
|
||
</p>
|
||
</div>
|
||
<div class="absolute inset-x-[7%] bottom-[5%] flex items-end justify-between">
|
||
<p class="max-w-[52%] text-[2.8cqw] font-semibold leading-[1.3] text-(--kit-blue)">
|
||
jorgesolla1313.com.br
|
||
</p>
|
||
<img
|
||
src="../../public/campaign-kit/marca-positiva-completa.png"
|
||
alt="Jorge Solla 1313 · Mais Saúde, Mais Futuro"
|
||
class="kit-asset w-[132px]"
|
||
/>
|
||
</div>
|
||
<span
|
||
class="absolute bottom-[4%] left-[7%] rounded bg-black/75 px-2 py-1 text-[2.5cqw] text-white"
|
||
>KIT OFICIAL · marca positiva completa</span
|
||
>
|
||
</div>
|
||
<p class="mx-auto mt-3 max-w-[360px] text-xs leading-5 text-muted-foreground">
|
||
<strong class="text-foreground">Final:</strong> sem botão falso. “Link na bio” é a
|
||
única instrução; URL reforça a origem. Segura por 2s para leitura.
|
||
</p>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- KIT OFICIAL -->
|
||
<section id="kit" class="mt-20" aria-labelledby="kit-title">
|
||
<div class="mb-5">
|
||
<p class="text-xs font-semibold text-(--kit-red)">CENA 04 · KIT OFICIAL 2026</p>
|
||
<h2 id="kit-title" class="mt-1 text-xl font-semibold tracking-tight">
|
||
Uma assinatura oficial para cada superfície
|
||
</h2>
|
||
<p class="mt-1 max-w-3xl text-sm text-muted-foreground">
|
||
Medidas abaixo são CSS px no compositor 360 × 640; o arquivo final multiplica tudo por
|
||
3. Não recortar, recolorir, redesenhar ou aplicar sombra aos PNGs do kit.
|
||
</p>
|
||
</div>
|
||
<div class="overflow-hidden rounded-2xl border border-black/10 bg-white">
|
||
<div class="overflow-x-auto">
|
||
<table class="w-full min-w-[900px] border-collapse text-left text-sm">
|
||
<thead class="bg-(--campaign-band)">
|
||
<tr>
|
||
<th class="px-4 py-3 font-semibold">Superfície</th>
|
||
<th class="px-4 py-3 font-semibold">Ativo oficial</th>
|
||
<th class="px-4 py-3 font-semibold">Caixa @360</th>
|
||
<th class="px-4 py-3 font-semibold">Regra</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="divide-y divide-black/10">
|
||
<tr>
|
||
<td class="px-4 py-3 font-semibold">Hook</td>
|
||
<td class="px-4 py-3 font-mono text-xs">marca-negativa-completa.png</td>
|
||
<td class="px-4 py-3 font-mono text-xs">x206 · y322 · 132×88</td>
|
||
<td class="px-4 py-3 text-muted-foreground">
|
||
Sobre vermelho; slogan só no próprio ativo.
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-4 py-3 font-semibold">Captura / chrome</td>
|
||
<td class="px-4 py-3 font-mono text-xs">jorge-solla-positivo.png</td>
|
||
<td class="px-4 py-3 font-mono text-xs">x220 · y28 · 112×56</td>
|
||
<td class="px-4 py-3 text-muted-foreground">
|
||
Plate branco 92% em x214 · y22 · 124×68, no fundo dimmed acima do drawer; nunca
|
||
cobrir input, ajuda ou botão. Nunca usar a negativa sobre o sheet branco.
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-4 py-3 font-semibold">CTA</td>
|
||
<td class="px-4 py-3 font-mono text-xs">marca-positiva-completa.png</td>
|
||
<td class="px-4 py-3 font-mono text-xs">x203 · y520 · 132×88</td>
|
||
<td class="px-4 py-3 text-muted-foreground">
|
||
Sobre branco, 6px abaixo do card; URL e “link na bio” em azul oficial.
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-4 py-3 font-semibold">Capa</td>
|
||
<td class="px-4 py-3 font-mono text-xs">marca-negativa-completa.png</td>
|
||
<td class="px-4 py-3 font-mono text-xs">x205 · y448 · 133×89</td>
|
||
<td class="px-4 py-3 text-muted-foreground">
|
||
Inteira dentro do recorte central 4:5.
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-4 py-3 font-semibold">Badges 1 / 2 / 3</td>
|
||
<td class="px-4 py-3 font-mono text-xs">nenhum</td>
|
||
<td class="px-4 py-3 font-mono text-xs">x22 · y96 · h36</td>
|
||
<td class="px-4 py-3 text-muted-foreground">
|
||
Controle funcional amarelo/preto; não miniaturizar marca, número oficial ou
|
||
estrela.
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-4 py-3 font-semibold">Decoração gráfica</td>
|
||
<td class="px-4 py-3 font-mono text-xs">estrela.png</td>
|
||
<td class="px-4 py-3 font-mono text-xs">hook x250 · y54 · 88²</td>
|
||
<td class="px-4 py-3 text-muted-foreground">
|
||
PNG a 100%, sem filtro/recoloração, sobre disco branco do mesmo diâmetro para a
|
||
estrela vermelha não sumir no fundo. Capa: x250 · y54 · 88². CTA: x20 · y48 ·
|
||
72². Fade + deriva de 8px; sem rotação.
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div class="mt-5 grid gap-5 md:grid-cols-2">
|
||
<article class="rounded-2xl bg-(--kit-red) p-5 text-white">
|
||
<p class="text-xs font-bold text-(--kit-yellow)">FUNDO POSITIVO · VERMELHO</p>
|
||
<img
|
||
src="../../public/campaign-kit/marca-negativa-completa.png"
|
||
alt="Jorge Solla 1313 · Mais Saúde, Mais Futuro"
|
||
class="kit-asset mx-auto mt-5 w-[220px]"
|
||
/>
|
||
</article>
|
||
<article class="rounded-2xl border border-black/10 bg-white p-5">
|
||
<p class="text-xs font-bold text-(--kit-blue)">FUNDO CLARO</p>
|
||
<img
|
||
src="../../public/campaign-kit/marca-positiva-completa.png"
|
||
alt="Jorge Solla 1313 · Mais Saúde, Mais Futuro"
|
||
class="kit-asset mx-auto mt-5 w-[220px]"
|
||
/>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SAFE ZONE -->
|
||
<section id="safe-zone" class="mt-20" aria-labelledby="safe-zone-title">
|
||
<div class="mb-5">
|
||
<p class="text-xs font-semibold text-(--pt-red)">CENA 05 · SAFE ZONE</p>
|
||
<h2 id="safe-zone-title" class="mt-1 text-xl font-semibold tracking-tight">
|
||
O Instagram ocupa as bordas; o tutorial ocupa o miolo
|
||
</h2>
|
||
<p class="mt-1 max-w-3xl text-sm text-muted-foreground">
|
||
Guias são apenas de produção e não aparecem no render final.
|
||
</p>
|
||
</div>
|
||
<div class="grid gap-8 lg:grid-cols-[400px_minmax(0,1fr)]">
|
||
<div
|
||
class="frame frame-shadow mx-auto w-full max-w-[400px] rounded-[22px] border border-black/15 bg-black"
|
||
>
|
||
<div class="site-placeholder absolute inset-0 opacity-85">
|
||
<div class="absolute inset-x-0 top-0 h-[7%] bg-(--site-red)"></div>
|
||
<div class="absolute inset-x-[8%] top-[23%] h-[31%] rounded-[4%] bg-white/70"></div>
|
||
</div>
|
||
<div
|
||
class="absolute inset-x-[6%] top-[14%] bottom-[35%] border-2 border-dashed safe-line"
|
||
></div>
|
||
<div class="absolute inset-x-0 top-0 h-[14%] bg-(--pt-red-dark)/72 p-[5%] text-white">
|
||
<p class="text-[3.4cqw] font-bold">~250px · topo</p>
|
||
<p class="mt-[1%] text-[2.5cqw] text-white/80">nome, áudio e chrome podem cobrir</p>
|
||
</div>
|
||
<div
|
||
class="absolute inset-x-0 bottom-0 h-[35%] bg-(--pt-red-dark)/78 p-[5%] text-white"
|
||
>
|
||
<p class="text-[3.4cqw] font-bold">~672px · base conservadora</p>
|
||
<p class="mt-[1%] max-w-[64%] text-[2.5cqw] leading-tight text-white/80">
|
||
legenda, descrição e botões do Instagram disputam esta área
|
||
</p>
|
||
</div>
|
||
<div class="absolute inset-y-[14%] left-0 w-[6%] bg-(--pt-yellow)/45"></div>
|
||
<div class="absolute inset-y-[14%] right-0 w-[6%] bg-(--pt-yellow)/45"></div>
|
||
<div class="absolute inset-x-[6%] top-[47%] flex justify-center">
|
||
<p
|
||
class="max-w-[88%] rounded-[4%] bg-black/88 px-[5%] py-[3.5%] text-center text-[4cqw] font-bold leading-[1.18] text-white"
|
||
>
|
||
Legenda entre <span class="text-(--pt-yellow)">1100–1250px</span>, até 900px de
|
||
largura.
|
||
</p>
|
||
</div>
|
||
<div
|
||
class="absolute left-[8%] top-[16%] rounded bg-(--pt-yellow) px-[3%] py-[1.5%] text-[2.7cqw] font-black"
|
||
>
|
||
MIOLO ÚTIL ~1080 × 1420
|
||
</div>
|
||
</div>
|
||
<div class="rounded-2xl border border-black/10 bg-(--campaign-cream) p-6 md:p-8">
|
||
<h3 class="text-lg font-semibold">Regras que o compositor não pode quebrar</h3>
|
||
<ol class="mt-5 space-y-5">
|
||
<li class="flex gap-4">
|
||
<span
|
||
class="grid size-8 shrink-0 place-items-center rounded-full bg-(--pt-red) text-sm font-bold text-white"
|
||
>1</span
|
||
>
|
||
<div>
|
||
<p class="text-sm font-semibold">Gancho abaixo do topo crítico</p>
|
||
<p class="mt-1 text-sm leading-6 text-muted-foreground">
|
||
A primeira linha começa depois de ~250px. Marca pode encostar mais na borda
|
||
apenas como elemento redundante.
|
||
</p>
|
||
</div>
|
||
</li>
|
||
<li class="flex gap-4">
|
||
<span
|
||
class="grid size-8 shrink-0 place-items-center rounded-full bg-(--pt-red) text-sm font-bold text-white"
|
||
>2</span
|
||
>
|
||
<div>
|
||
<p class="text-sm font-semibold">Legenda curta, central e queimada</p>
|
||
<p class="mt-1 text-sm leading-6 text-muted-foreground">
|
||
Uma ideia por bloco, até duas linhas, peso alto, branco sobre preto ≥86%.
|
||
Palavras de ação recebem amarelo.
|
||
</p>
|
||
</div>
|
||
</li>
|
||
<li class="flex gap-4">
|
||
<span
|
||
class="grid size-8 shrink-0 place-items-center rounded-full bg-(--pt-red) text-sm font-bold text-white"
|
||
>3</span
|
||
>
|
||
<div>
|
||
<p class="text-sm font-semibold">Alvo visível antes do clique</p>
|
||
<p class="mt-1 text-sm leading-6 text-muted-foreground">
|
||
Cursor sintético + halo amarelo. O zoom amplia a ação, sem cortar o elemento
|
||
clicado nem desalinhá-lo.
|
||
</p>
|
||
</div>
|
||
</li>
|
||
<li class="flex gap-4">
|
||
<span
|
||
class="grid size-8 shrink-0 place-items-center rounded-full bg-(--pt-red) text-sm font-bold text-white"
|
||
>4</span
|
||
>
|
||
<div>
|
||
<p class="text-sm font-semibold">Rodapé não carrega instrução crítica</p>
|
||
<p class="mt-1 text-sm leading-6 text-muted-foreground">
|
||
A base conservadora admite apenas marca redundante. CTA e resultado ficam acima
|
||
dela.
|
||
</p>
|
||
</div>
|
||
</li>
|
||
</ol>
|
||
<div class="mt-6 rounded-xl border border-(--pt-red)/25 bg-white p-4">
|
||
<p class="text-xs font-bold text-(--pt-red)">ATIVOS RESOLVIDOS</p>
|
||
<p class="mt-1 text-sm leading-6 text-muted-foreground">
|
||
Captura real do site em viewport mobile + PNGs de `public/campaign-kit/`. Foto
|
||
oficial continua fora deste template; não é necessária para o reel de cards.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CAPA -->
|
||
<section id="capa" class="mt-20" aria-labelledby="capa-title">
|
||
<div class="mb-5">
|
||
<p class="text-xs font-semibold text-(--pt-red)">CENA 06 · CAPA</p>
|
||
<h2 id="capa-title" class="mt-1 text-xl font-semibold tracking-tight">
|
||
Título no núcleo que todos os recortes preservam
|
||
</h2>
|
||
<p class="mt-1 text-sm text-muted-foreground">
|
||
Composição própria — não um frame aleatório do vídeo.
|
||
</p>
|
||
</div>
|
||
<div class="grid gap-8 xl:grid-cols-[400px_minmax(0,1fr)]">
|
||
<div
|
||
class="frame frame-shadow mx-auto w-full max-w-[400px] rounded-[22px] border border-black/15 bg-(--pt-red)"
|
||
>
|
||
<div
|
||
class="absolute inset-0 bg-[linear-gradient(160deg,#e4102f_0%,#e4102f_62%,#184e92_145%)]"
|
||
></div>
|
||
<img
|
||
src="../../public/campaign-kit/estrela.png"
|
||
alt=""
|
||
class="kit-asset absolute left-[250px] top-[54px] size-[88px] rounded-full bg-white"
|
||
/>
|
||
<!-- central 1080x1350 = 70.3125% height, centered -->
|
||
<div
|
||
class="absolute inset-x-0 top-[14.84375%] h-[70.3125%] border-y-2 border-dashed crop-line"
|
||
></div>
|
||
<div class="absolute left-[7%] right-[7%] top-[22%]">
|
||
<span
|
||
class="inline-flex rounded-full bg-(--pt-yellow) px-[4%] py-[1.5%] text-[3cqw] font-black text-black"
|
||
>TUTORIAL DO SITE</span
|
||
>
|
||
<h3 class="brexter mt-[7%] text-[12cqw] leading-[0.88] uppercase text-white">
|
||
Crie seu<br />card de<br /><span class="text-(--pt-yellow)">apoio.</span>
|
||
</h3>
|
||
<p class="mt-[6%] max-w-[65%] text-[3.7cqw] font-semibold leading-[1.2] text-white">
|
||
Seu nome ou sua foto, direto pelo celular.
|
||
</p>
|
||
</div>
|
||
<p
|
||
class="absolute left-[25px] top-[500px] rounded bg-black/40 px-[11px] py-[5px] text-[8.6px] text-white"
|
||
>
|
||
#cards
|
||
</p>
|
||
<img
|
||
src="../../public/campaign-kit/marca-negativa-completa.png"
|
||
alt="Jorge Solla 1313 · Mais Saúde, Mais Futuro"
|
||
class="kit-asset absolute left-[205px] top-[448px] w-[133px]"
|
||
/>
|
||
<div
|
||
class="absolute left-[2%] top-[15.5%] rounded bg-white px-2 py-1 text-[2.5cqw] font-bold text-black"
|
||
>
|
||
RECORTE CENTRAL ~1080 × 1350
|
||
</div>
|
||
<span
|
||
class="absolute bottom-[4%] left-[7%] rounded bg-black/55 px-2 py-1 text-[2.5cqw] text-white"
|
||
>KIT OFICIAL · marca negativa completa</span
|
||
>
|
||
</div>
|
||
<div class="grid content-start gap-5 md:grid-cols-2">
|
||
<article class="rounded-2xl border border-black/10 bg-white p-5">
|
||
<div class="mb-3 flex items-center justify-between">
|
||
<div>
|
||
<p class="text-sm font-semibold">Feed 4:5</p>
|
||
<p class="text-xs text-muted-foreground">1080 × 1350</p>
|
||
</div>
|
||
<span class="rounded-full bg-(--campaign-band) px-2 py-1 text-[10px] font-bold"
|
||
>SOBREVIVE</span
|
||
>
|
||
</div>
|
||
<div
|
||
class="crop-preview relative mx-auto aspect-[4/5] max-w-[270px] overflow-hidden rounded-xl bg-[linear-gradient(155deg,#e4102f,#184e92)] p-[7%] text-white"
|
||
>
|
||
<span
|
||
class="inline-flex rounded-full bg-(--pt-yellow) px-[4%] py-[2%] text-[2.3cqw] font-black text-black"
|
||
>TUTORIAL DO SITE</span
|
||
>
|
||
<p class="brexter mt-[9%] text-[9cqw] leading-[0.88] uppercase">
|
||
Crie seu<br />card de<br /><span class="text-(--pt-yellow)">apoio.</span>
|
||
</p>
|
||
<img
|
||
src="../../public/campaign-kit/jorge-solla-negativo.png"
|
||
alt="Jorge Solla · Deputado Federal"
|
||
class="kit-asset absolute bottom-[7%] right-[7%] w-[35%]"
|
||
/>
|
||
</div>
|
||
<p class="mt-3 text-xs leading-5 text-muted-foreground">
|
||
Eyebrow, título inteiro e marca continuam visíveis. Copy auxiliar pode sair.
|
||
</p>
|
||
</article>
|
||
<article class="rounded-2xl border border-black/10 bg-white p-5">
|
||
<div class="mb-3 flex items-center justify-between">
|
||
<div>
|
||
<p class="text-sm font-semibold">Grade 1:1 / 3:4</p>
|
||
<p class="text-xs text-muted-foreground">recorte central</p>
|
||
</div>
|
||
<span class="rounded-full bg-(--campaign-band) px-2 py-1 text-[10px] font-bold"
|
||
>SOBREVIVE</span
|
||
>
|
||
</div>
|
||
<div
|
||
class="crop-preview relative mx-auto aspect-square max-w-[270px] overflow-hidden rounded-xl bg-[linear-gradient(155deg,#e4102f,#184e92)] p-[7%] text-white"
|
||
>
|
||
<span
|
||
class="inline-flex rounded-full bg-(--pt-yellow) px-[4%] py-[2%] text-[2.3cqw] font-black text-black"
|
||
>TUTORIAL</span
|
||
>
|
||
<p class="brexter mt-[9%] text-[9cqw] leading-[0.88] uppercase">
|
||
Crie seu<br />card de<br /><span class="text-(--pt-yellow)">apoio.</span>
|
||
</p>
|
||
<img
|
||
src="../../public/campaign-kit/jorge-solla-negativo.png"
|
||
alt="Jorge Solla · Deputado Federal"
|
||
class="kit-asset absolute bottom-[7%] right-[7%] w-[35%]"
|
||
/>
|
||
</div>
|
||
<p class="mt-3 text-xs leading-5 text-muted-foreground">
|
||
Título nunca depende do terço inferior. A marca reduz, mas não desaparece.
|
||
</p>
|
||
</article>
|
||
<div
|
||
class="md:col-span-2 rounded-xl border border-black/10 bg-(--campaign-cream) p-4 text-sm leading-6"
|
||
>
|
||
<strong>Hierarquia da capa:</strong> “Crie seu card de apoio” é a mensagem; “Tutorial
|
||
do site” só categoriza. Não usar screenshot legível como fundo — vira ruído na grade.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SISTEMA -->
|
||
<section id="spec" class="mt-20" aria-labelledby="spec-title">
|
||
<div class="mb-5">
|
||
<p class="text-xs font-semibold text-(--pt-red)">CENA 07 · SISTEMA VISUAL</p>
|
||
<h2 id="spec-title" class="mt-1 text-xl font-semibold tracking-tight">
|
||
Receita consistente, não vinheta pesada
|
||
</h2>
|
||
</div>
|
||
<div class="grid gap-5 md:grid-cols-2 xl:grid-cols-4">
|
||
<article class="rounded-2xl border border-black/10 bg-white p-5">
|
||
<p class="text-xs font-bold text-(--pt-red)">TIPOGRAFIA</p>
|
||
<p class="brexter mt-4 text-4xl leading-[0.9] uppercase">Texto de<br />impacto.</p>
|
||
<p class="mt-4 text-sm leading-6 text-muted-foreground">
|
||
Brexter Bold só em hook, capa e CTA final. Inter no badge de passo e legendas.
|
||
</p>
|
||
</article>
|
||
<article class="rounded-2xl border border-black/10 bg-white p-5">
|
||
<p class="text-xs font-bold text-(--pt-red)">PALETA</p>
|
||
<div class="mt-4 grid grid-cols-2 gap-2">
|
||
<div
|
||
class="aspect-[3/2] rounded-lg bg-(--pt-red) p-2 text-[10px] font-bold text-white"
|
||
>
|
||
#E4102F
|
||
</div>
|
||
<div class="aspect-[3/2] rounded-lg bg-(--pt-yellow) p-2 text-[10px] font-bold">
|
||
#FFEB00
|
||
</div>
|
||
<div
|
||
class="aspect-[3/2] rounded-lg bg-(--kit-blue) p-2 text-[10px] font-bold text-white"
|
||
>
|
||
#184E92
|
||
</div>
|
||
<div
|
||
class="aspect-[3/2] rounded-lg bg-(--kit-green) p-2 text-[10px] font-bold text-white"
|
||
>
|
||
#009647
|
||
</div>
|
||
</div>
|
||
<p class="mt-4 text-sm leading-6 text-muted-foreground">
|
||
Cenas gráficas usam o kit. Capturas não são recoloridas: nelas, o site mantém
|
||
#A21C1C/#FFE607/creme e só o chrome usa amarelo oficial.
|
||
</p>
|
||
</article>
|
||
<article class="rounded-2xl border border-black/10 bg-white p-5">
|
||
<p class="text-xs font-bold text-(--pt-red)">LEGENDA</p>
|
||
<div class="mt-4 rounded-xl bg-stone-400 p-5">
|
||
<p
|
||
class="rounded-lg bg-black/90 px-4 py-3 text-center text-base font-bold leading-tight text-white"
|
||
>
|
||
Toque em <span class="text-(--pt-yellow)">“Card com seu nome”</span>.
|
||
</p>
|
||
</div>
|
||
<p class="mt-4 text-sm leading-6 text-muted-foreground">
|
||
Máx. 2 linhas · largura ≤900px · centro em 1100–1250px.
|
||
</p>
|
||
</article>
|
||
<article class="rounded-2xl border border-black/10 bg-white p-5">
|
||
<p class="text-xs font-bold text-(--pt-red)">GESTO</p>
|
||
<div class="relative mt-4 aspect-[3/2] overflow-hidden rounded-xl bg-stone-300">
|
||
<div
|
||
class="absolute left-[18%] top-[12%] h-[76%] w-[58%] rounded-xl border-[3px] border-(--pt-yellow) shadow-[0_0_0_6px_rgb(255_235_0/22%)]"
|
||
></div>
|
||
<svg
|
||
class="cursor absolute left-[61%] top-[56%] w-[12%] text-white"
|
||
viewBox="0 0 24 30"
|
||
fill="currentColor"
|
||
stroke="#000"
|
||
stroke-width="1.4"
|
||
>
|
||
<path d="M3 2v22l6-6 4 9 4-2-4-9h8L3 2Z" />
|
||
</svg>
|
||
</div>
|
||
<p class="mt-4 text-sm leading-6 text-muted-foreground">
|
||
Zoom 108–122%; cursor chega antes; halo retangular 3:4 acompanha o alvo e pulsa uma
|
||
vez; easing suave. No frame de Passo 1: x87 · y196 · 186 × 246px @360.
|
||
</p>
|
||
</article>
|
||
</div>
|
||
<div
|
||
class="mt-5 rounded-2xl border border-black/10 bg-(--campaign-cream) p-5 text-sm leading-6"
|
||
>
|
||
<p class="text-xs font-bold text-(--pt-red)">FIT CHECK · BREXTER BOLD OFICIAL @ 360PX</p>
|
||
<p class="mt-2 text-muted-foreground">
|
||
<strong class="text-foreground">Capa:</strong> mantém 43,2px (12cqw), entrelinha 38,02px
|
||
(0,88), tracking 0 e largura útil 309,6px. “Crie seu” (255px), “card de” (246px) e
|
||
“apoio.” (191px) cabem sem ajuste.
|
||
</p>
|
||
<p class="mt-1 text-muted-foreground">
|
||
<strong class="text-foreground">CTA:</strong> título ajustado para 41,4px (11,5cqw),
|
||
entrelinha 37,26px (0,9), tracking 0 e largura máxima 309,6px; “com você.” passa de
|
||
306px para 293,25px. “Link na bio” permanece em 28,8px (8cqw), entrelinha 28,8px,
|
||
tracking 0, dentro dos 259,2px úteis do card.
|
||
</p>
|
||
<p class="mt-1 text-muted-foreground">
|
||
<strong class="text-foreground">Marca e slogan:</strong> hook e capa usam
|
||
`marca-negativa-completa.png`; CTA usa `marca-positiva-completa.png`; chrome usa
|
||
`jorge-solla-positivo.png`. “Mais Saúde, Mais Futuro” entra somente dentro dos três
|
||
ativos completos, com altura visual aproximada de 8px @360 (24px no render), nunca como
|
||
headline concorrente. Não aplicar recorte, filtro, sombra ou recoloração.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="mt-16 border-t border-black/15 pt-6 text-xs leading-5 text-muted-foreground">
|
||
<p>
|
||
<strong class="text-foreground">ATIVOS:</strong> o único conteúdo ainda capturado em tempo
|
||
de geração é o fluxo real `#cards`. Marca, número, slogan e decoração vêm exclusivamente
|
||
de `public/campaign-kit/`; o SVG branco legado e lockups tipográficos deixam de ser
|
||
usados.
|
||
</p>
|
||
<p class="mt-1">
|
||
<strong class="text-foreground">Fonte:</strong> o port deve carregar o Brexter Bold
|
||
oficial em peso 700. As medidas de hook, capa e CTA acima foram recalibradas com essa
|
||
face; este HTML usa a fallback condensada apenas quando Brexter não estiver instalada
|
||
localmente.
|
||
</p>
|
||
<p class="mt-1">
|
||
<strong class="text-foreground">Revalidação no PR:</strong> esta integração do kit é uma
|
||
mudança material: o gate humano deve confirmar a estrela oficial em vez do aro, as marcas
|
||
completas com slogan e a paleta #E4102F/#184E92/#FFEB00. A métrica aprovada da Brexter
|
||
permanece: hook 9,5cqw, capa 12cqw e CTA 11,5cqw.
|
||
</p>
|
||
</footer>
|
||
</main>
|
||
</body>
|
||
</html>
|