teqo-backup/docs/plans/site-pos-eleicao-agradecimento-ui-design.html
Francisco Solla 8fa6432b7b
Some checks are pending
Deploy / preflight (push) Waiting to run
Deploy / verify (push) Blocked by required conditions
Deploy / deploy staging (teqo-staging) (push) Blocked by required conditions
Deploy / requeue when main advanced (push) Blocked by required conditions
Deploy / deploy production (teqo-1313) (push) Blocked by required conditions
docs(plans): planeja o site pós-eleição, o PL 5594/2026 e o cutover de domínio
S47 (#1442), S48 (#1443), OPS130 (#1444) e OPS131 (#1445). Inclui o design hi-fi do S47 e a regra pós-eleição no DESIGN.md.
2026-10-21 22:59:32 -03:00

1448 lines
65 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="pt-BR">
<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>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Exo+2:wght@600;700;800;900&display=swap"
rel="stylesheet"
/>
<title>Design S47 — Casa do mandato pós-eleição</title>
<style type="text/tailwindcss">
@theme {
--font-display: 'Exo 2', ui-sans-serif, system-ui, sans-serif;
--font-sans: 'Arimo', ui-sans-serif, system-ui, sans-serif;
--color-pt-red: #a21c1c;
--color-pt-red-dark: #47130e;
--color-pt-yellow: #ffe607;
--color-campaign-cream: #fff8f2;
--color-campaign-band: #ebe9e9;
--color-campaign-muted: #6c615e;
--color-campaign-line: rgb(0 0 0 / 12%);
}
@layer base {
* {
box-sizing: border-box;
}
html {
color-scheme: light;
}
body {
margin: 0;
font-family: var(--font-sans);
}
button,
a {
-webkit-tap-highlight-color: transparent;
}
}
@layer utilities {
.scene-shadow {
box-shadow: 0 32px 90px rgb(30 15 12 / 22%);
}
.focus-brand:focus-visible {
outline: 3px solid #ffe607;
outline-offset: 4px;
box-shadow: 0 0 0 6px #184e92;
}
.noise {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}
.ink-crop-negative {
position: relative;
display: block;
width: 144px;
height: 52px;
overflow: hidden;
}
.ink-crop-negative > img {
position: absolute;
width: 189px;
max-width: none;
height: auto;
left: -22.4px;
top: -29.5px;
}
.ink-crop-positive {
position: relative;
display: block;
width: 160px;
height: 58px;
overflow: hidden;
}
.ink-crop-positive > img {
position: absolute;
width: 209px;
max-width: none;
height: auto;
left: -24.8px;
top: -32.6px;
}
.hero-field {
background:
radial-gradient(circle at 82% 36%, rgb(255 230 7 / 18%), transparent 24rem),
linear-gradient(112deg, #8f1717 0%, #a21c1c 58%, #7d1714 100%);
}
.number-rule {
font-variant-numeric: tabular-nums;
}
.photo-tone {
filter: saturate(0.86) contrast(1.04);
}
.section-title {
text-wrap: balance;
}
.body-copy {
text-wrap: pretty;
}
.link-line {
text-decoration-thickness: 1.5px;
text-underline-offset: 5px;
}
.editorial-card:hover .editorial-image {
transform: scale(1.025);
}
.editorial-image {
transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.album-photo:hover img {
transform: scale(1.025);
}
.album-photo img {
transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.primary-action {
transition:
transform 180ms ease,
background-color 180ms ease;
}
.primary-action:hover {
transform: translateY(-2px);
background: #fff02e;
}
.primary-action:active {
transform: translateY(1px);
}
[data-menu-trigger][aria-expanded='false'] [data-menu-x] {
display: none;
}
[data-menu-trigger][aria-expanded='true'] [data-menu-hamburger] {
display: none;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
transition: none !important;
}
}
}
</style>
</head>
<body class="bg-[#ded8d3] text-[#211b19] antialiased">
<header class="mx-auto max-w-[1360px] px-6 pt-10 pb-7">
<p class="font-display text-xs font-extrabold tracking-[.14em] text-[#7b2821] uppercase">
Gate visual · S47
</p>
<div class="mt-2 flex flex-wrap items-end justify-between gap-4">
<div>
<h1 class="font-display text-3xl font-black tracking-[-.035em]">
Casa do mandato pós-eleição
</h1>
<p class="mt-2 max-w-3xl text-sm leading-6 text-[#665a56]">
Agradecimento sóbrio, humano e editorial. O número é memória de confiança; o site volta
o olhar para o trabalho que continua.
</p>
</div>
<p class="text-xs font-semibold text-[#7b6d68]">
Cenas estáticas · 1280 + 390 · conteúdo real
</p>
</div>
</header>
<main class="space-y-16 pb-24">
<!-- CENA 01 — HOME COMPLETA / 1280 -->
<section class="mx-auto w-full max-w-[1280px]" aria-labelledby="scene-desktop-title">
<div class="mb-3 flex items-center justify-between text-xs font-bold text-[#756762]">
<h2 id="scene-desktop-title">Cena 01 · Home completa</h2>
<span>1280 px</span>
</div>
<div
class="scene-shadow mx-auto w-[1280px] max-w-full overflow-hidden bg-campaign-cream"
data-scene="home-desktop"
>
<header class="hero-field relative z-20 border-b border-white/15 text-white">
<div class="mx-auto flex h-[88px] max-w-[1152px] items-center justify-between px-8">
<a href="/" aria-label="Início — Jorge Solla" class="focus-brand rounded-sm">
<span class="ink-crop-negative">
<img
src="../../public/campaign-kit/jorge-solla-negativo.png"
alt="Jorge Solla — Deputado Federal"
/>
</span>
</a>
<nav
aria-label="Navegação principal"
class="flex items-center gap-8 text-sm font-bold"
>
<a
class="focus-brand rounded-sm text-white underline decoration-pt-yellow decoration-2 underline-offset-8"
href="/artigos"
>Mandato</a
>
<a
class="focus-brand rounded-sm text-white/80 hover:text-white"
href="#bandeiras-desktop"
>Bandeiras</a
>
<a class="focus-brand rounded-sm text-white/80 hover:text-white" href="/fotos"
>Fotos</a
>
</nav>
</div>
</header>
<section
class="hero-field relative min-h-[668px] overflow-hidden text-white"
aria-labelledby="hero-desktop-title"
>
<div class="noise pointer-events-none absolute inset-0 opacity-[.055]"></div>
<div
class="absolute -right-20 -bottom-40 h-[520px] w-[520px] rounded-full border-[74px] border-pt-yellow/90"
></div>
<div class="absolute right-[430px] bottom-0 h-px w-56 bg-white/25"></div>
<div
class="relative mx-auto grid min-h-[668px] max-w-[1152px] grid-cols-[1.08fr_.92fr] px-8"
>
<div class="z-10 flex flex-col justify-center pt-2 pb-16">
<p
class="font-display text-[15px] font-extrabold tracking-[.14em] text-pt-yellow uppercase"
>
Obrigado, Bahia
</p>
<h2
id="hero-desktop-title"
class="section-title mt-5 max-w-[690px] font-display text-[76px] leading-[.91] font-black tracking-[-.06em]"
>
<span class="number-rule block">152.049</span>
<span class="block text-[57px] leading-[1.03] tracking-[-.045em]"
>votos de confiança</span
>
</h2>
<p class="body-copy mt-7 max-w-[590px] text-[19px] leading-[1.5] text-white/87">
Obrigado a quem votou, a quem caminhou, a quem compartilhou e a quem acreditou. A
eleição terminou; o trabalho continua.
</p>
<div class="mt-8">
<a
href="/artigos"
class="primary-action focus-brand inline-flex min-h-12 items-center gap-3 rounded-[10px] bg-pt-yellow px-6 font-display text-[15px] font-extrabold text-[#261f00] no-underline"
>
Acompanhe o mandato
<svg
aria-hidden="true"
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M5 12h14" />
<path d="m13 6 6 6-6 6" />
</svg>
</a>
</div>
<p class="mt-9 text-sm font-semibold text-white/65">
Jorge Solla · Deputado Federal · PT · Bahia
</p>
</div>
<div class="relative self-stretch">
<div class="absolute right-0 bottom-0 h-[620px] w-[505px] overflow-hidden">
<img
class="absolute right-[-32px] bottom-[-35px] h-[650px] w-auto max-w-none"
src="../../public/JOA00162.webp"
alt="Jorge Solla sorrindo, com blazer azul e camisa do PT"
/>
</div>
</div>
</div>
</section>
<section
class="bg-campaign-cream px-16 pt-24 pb-28"
aria-labelledby="board-desktop-title"
>
<div class="mx-auto max-w-[1152px]">
<div class="flex items-end justify-between gap-8">
<div>
<p class="font-display text-sm font-extrabold text-pt-red">Acompanhe de perto</p>
<h2
id="board-desktop-title"
class="section-title mt-2 max-w-2xl font-display text-[44px] leading-[1.02] font-black tracking-[-.045em]"
>
O mandato, onde a Bahia acontece
</h2>
<p class="mt-4 max-w-xl text-base leading-7 text-campaign-muted">
Notícias, vídeos e registros do trabalho em Brasília e nos municípios.
</p>
</div>
<div class="mb-1 flex gap-6 text-sm font-bold text-pt-red">
<a class="focus-brand link-line rounded-sm underline" href="/artigos"
>Todos os artigos</a
>
<a
class="focus-brand link-line rounded-sm underline"
href="https://youtube.com/@JorgeSollaDep"
>YouTube</a
>
<a
class="focus-brand link-line rounded-sm underline"
href="https://instagram.com/depjorgesolla"
>Instagram</a
>
</div>
</div>
<div class="mt-10 grid grid-cols-12 border-y border-campaign-line">
<article class="editorial-card col-span-7 border-r border-campaign-line py-7 pr-8">
<a href="/artigos" class="focus-brand group block rounded-sm no-underline">
<div class="h-[338px] overflow-hidden bg-[#d7d0cb]">
<img
class="editorial-image photo-tone h-full w-full object-cover"
src="../../public/53569851134_02afc18fb4_o.webp"
alt="Jorge Solla e o presidente Lula em agenda de saúde pública"
/>
</div>
<p class="mt-5 text-xs font-bold text-pt-red">Saúde · Bahia</p>
<h3
class="mt-2 max-w-[690px] font-display text-[31px] leading-[1.1] font-extrabold tracking-[-.025em]"
>
Lula, Jerônimo e Solla inauguram Hospital do Litoral Norte da Bahia
</h3>
<span class="mt-4 inline-flex items-center gap-2 text-sm font-bold text-pt-red"
>Ler notícia <span aria-hidden="true">→</span></span
>
</a>
</article>
<div class="col-span-5 divide-y divide-campaign-line pl-8">
<article class="py-7">
<a href="/artigos" class="focus-brand block rounded-sm no-underline">
<p class="text-xs font-bold text-pt-red">Educação · Jequié</p>
<h3
class="mt-3 font-display text-[23px] leading-[1.16] font-extrabold tracking-[-.02em]"
>
Solla comemora anúncio de construção de novo campus federal em Jequié
</h3>
<p class="mt-4 text-sm font-bold text-pt-red">Ler notícia →</p>
</a>
</article>
<article class="py-7">
<a href="/artigos" class="focus-brand block rounded-sm no-underline">
<p class="text-xs font-bold text-pt-red">Trabalho · Câmara</p>
<h3
class="mt-3 font-display text-[23px] leading-[1.16] font-extrabold tracking-[-.02em]"
>
Solla reforça luta por cumprimento do piso da enfermagem em audiência na
Câmara
</h3>
<p class="mt-4 text-sm font-bold text-pt-red">Ler notícia →</p>
</a>
</article>
<article class="py-7">
<a href="/artigos" class="focus-brand block rounded-sm no-underline">
<p class="text-xs font-bold text-pt-red">Bahia · Ubatã</p>
<h3
class="mt-3 font-display text-[23px] leading-[1.16] font-extrabold tracking-[-.02em]"
>
Solla e Jerônimo inauguram mercado público de Ubatã
</h3>
<p class="mt-4 text-sm font-bold text-pt-red">Ler notícia →</p>
</a>
</article>
</div>
</div>
</div>
</section>
<section
class="border-y border-campaign-line bg-white px-16 py-24"
aria-labelledby="story-desktop-title"
>
<div class="mx-auto grid max-w-[1152px] grid-cols-[.83fr_1.17fr] items-center gap-20">
<div>
<p class="font-display text-sm font-extrabold text-pt-red">Nossa história</p>
<h2
id="story-desktop-title"
class="section-title mt-3 font-display text-[46px] leading-[1.02] font-black tracking-[-.045em]"
>
Saúde pública como escolha de vida
</h2>
<p class="body-copy mt-6 text-[17px] leading-7 text-campaign-muted">
Da gestão do SUS ao Congresso Nacional, uma trajetória feita ao lado de quem
defende saúde, democracia e direitos para todos.
</p>
<button
type="button"
class="focus-brand link-line mt-7 rounded-sm text-sm font-bold text-pt-red underline"
>
Assistir à trajetória
</button>
</div>
<button
type="button"
aria-label="Reproduzir vídeo da trajetória de Jorge Solla"
class="focus-brand group relative aspect-[16/10] w-full overflow-hidden rounded-[12px] bg-pt-red-dark text-white"
>
<img
class="photo-tone h-full w-full object-cover opacity-85 transition duration-500 group-hover:scale-[1.02]"
src="../../public/53569851134_02afc18fb4_o.webp"
alt="Jorge Solla com Lula em agenda do Brasil Sorridente"
/>
<div
class="absolute inset-0 bg-gradient-to-t from-[#2e0a08]/75 via-transparent to-transparent"
></div>
<span
class="absolute bottom-6 left-6 flex h-14 w-14 items-center justify-center rounded-full bg-pt-yellow text-[#261f00] shadow-xl"
>
<svg
aria-hidden="true"
width="23"
height="23"
viewBox="0 0 24 24"
fill="currentColor"
>
<path d="m8 5 11 7-11 7z" />
</svg>
</span>
<span class="absolute right-6 bottom-7 text-sm font-bold">1 min 30 s</span>
</button>
</div>
</section>
<section
id="bandeiras-desktop"
class="bg-campaign-band px-16 py-24"
aria-labelledby="flags-desktop-title"
>
<div class="mx-auto max-w-[1152px]">
<div class="grid grid-cols-12 gap-8">
<div class="col-span-7">
<p class="font-display text-sm font-extrabold text-pt-red">
Bandeiras do mandato
</p>
<h2
id="flags-desktop-title"
class="section-title mt-3 font-display text-[46px] leading-[1.02] font-black tracking-[-.045em]"
>
Compromissos que orientam o trabalho
</h2>
</div>
<p class="body-copy col-span-5 self-end text-base leading-7 text-campaign-muted">
Posições construídas em décadas de vida pública, agora renovadas para o quarto
mandato.
</p>
</div>
<ol class="mt-12 grid list-none grid-cols-3 border-t border-l border-black/15 p-0">
<li class="min-h-[210px] border-r border-b border-black/15 p-7">
<span class="font-display text-xs font-extrabold text-pt-red">Saúde</span>
<h3 class="mt-5 font-display text-2xl font-extrabold">
Defender o SUS e valorizar quem cuida
</h3>
<p class="mt-3 text-sm leading-6 text-campaign-muted">
Financiamento público, piso da enfermagem, vacinação, ciência e atendimento
digno.
</p>
</li>
<li class="min-h-[210px] border-r border-b border-black/15 p-7">
<span class="font-display text-xs font-extrabold text-pt-red">Educação</span>
<h3 class="mt-5 font-display text-2xl font-extrabold">
Mais oportunidades no interior
</h3>
<p class="mt-3 text-sm leading-6 text-campaign-muted">
Institutos federais, universidades e escola pública de qualidade em toda a
Bahia.
</p>
</li>
<li class="min-h-[210px] border-r border-b border-black/15 p-7">
<span class="font-display text-xs font-extrabold text-pt-red">Renda</span>
<h3 class="mt-5 font-display text-2xl font-extrabold">
Crescimento com dignidade
</h3>
<p class="mt-3 text-sm leading-6 text-campaign-muted">
Salário mínimo valorizado, moradia, agricultura familiar e comida na mesa.
</p>
</li>
<li class="min-h-[210px] border-r border-b border-black/15 p-7">
<span class="font-display text-xs font-extrabold text-pt-red">Democracia</span>
<h3 class="mt-5 font-display text-2xl font-extrabold">Participação e direitos</h3>
<p class="mt-3 text-sm leading-6 text-campaign-muted">
Instituições fortes, liberdade, respeito e combate permanente à desinformação.
</p>
</li>
<li class="min-h-[210px] border-r border-b border-black/15 p-7">
<span class="font-display text-xs font-extrabold text-pt-red">Bahia</span>
<h3 class="mt-5 font-display text-2xl font-extrabold">
A Bahia no centro das decisões
</h3>
<p class="mt-3 text-sm leading-6 text-campaign-muted">
Investimento federal e presença do mandato nos municípios e territórios.
</p>
</li>
<li class="min-h-[210px] border-r border-b border-black/15 p-7">
<span class="font-display text-xs font-extrabold text-pt-red">Trabalho</span>
<h3 class="mt-5 font-display text-2xl font-extrabold">
Tempo para viver, renda para cuidar
</h3>
<p class="mt-3 text-sm leading-6 text-campaign-muted">
Jornada justa, direitos protegidos e trabalho que não adoece.
</p>
</li>
</ol>
</div>
</section>
<section
class="bg-[#24100e] px-16 pt-24 pb-28 text-white"
aria-labelledby="photos-desktop-title"
>
<div class="mx-auto max-w-[1152px]">
<div class="flex items-end justify-between gap-8">
<div>
<p class="font-display text-sm font-extrabold text-pt-yellow">Perto da Bahia</p>
<h2
id="photos-desktop-title"
class="mt-3 font-display text-[46px] leading-none font-black tracking-[-.045em]"
>
O mandato em fotos
</h2>
</div>
<a
class="focus-brand link-line rounded-sm text-sm font-bold text-white underline"
href="/fotos"
>Ver o álbum</a
>
</div>
<div class="mt-10 grid h-[530px] grid-cols-12 grid-rows-2 gap-3">
<a
href="/fotos"
class="album-photo focus-brand col-span-7 row-span-2 overflow-hidden rounded-[10px]"
><img
class="photo-tone h-full w-full object-cover"
src="../../public/52396285023_561ffc0ff6_o.webp"
alt="Vista aérea de encontro popular no Comércio, em Salvador"
/></a>
<a
href="/fotos"
class="album-photo focus-brand col-span-5 overflow-hidden rounded-[10px]"
><img
class="photo-tone h-full w-full object-cover object-[center_35%]"
src="../../public/53569851134_02afc18fb4_o.webp"
alt="Agenda de saúde pública com Jorge Solla e Lula"
/></a>
<div class="col-span-5 flex items-end justify-between rounded-[10px] bg-pt-red p-8">
<p class="max-w-[255px] font-display text-[27px] leading-[1.12] font-extrabold">
Trabalho presente, memória viva.
</p>
<span class="text-pt-yellow" aria-hidden="true">↗</span>
</div>
</div>
</div>
</section>
<footer class="bg-[#180a09] text-[#fff8f2]">
<div class="mx-auto grid max-w-[1152px] grid-cols-[1.7fr_.8fr_.8fr] gap-12 px-8 py-16">
<div>
<span class="ink-crop-negative"
><img
src="../../public/campaign-kit/jorge-solla-negativo.png"
alt="Jorge Solla — Deputado Federal"
/></span>
<p class="mt-5 text-sm leading-6 text-white/68">
Deputado Federal · PT · Bahia<br /><span class="font-semibold text-white"
>Mais Saúde, Mais Futuro.</span
>
</p>
</div>
<div>
<h3 class="font-display text-sm font-extrabold">Navegue</h3>
<ul class="mt-4 list-none space-y-1 p-0 text-sm text-white/70">
<li>
<a
class="focus-brand inline-flex min-h-11 items-center rounded-sm hover:text-white"
href="/artigos"
>Artigos</a
>
</li>
<li>
<a
class="focus-brand inline-flex min-h-11 items-center rounded-sm hover:text-white"
href="/fotos"
>Fotos</a
>
</li>
<li>
<a
class="focus-brand inline-flex min-h-11 items-center rounded-sm hover:text-white"
href="/privacidade"
>Privacidade</a
>
</li>
</ul>
</div>
<div>
<h3 class="font-display text-sm font-extrabold">Redes</h3>
<ul class="mt-4 list-none space-y-1 p-0 text-sm text-white/70">
<li>
<a
class="focus-brand inline-flex min-h-11 items-center rounded-sm hover:text-white"
href="https://instagram.com/depjorgesolla"
>Instagram</a
>
</li>
<li>
<a
class="focus-brand inline-flex min-h-11 items-center rounded-sm hover:text-white"
href="https://youtube.com/@JorgeSollaDep"
>YouTube</a
>
</li>
<li>
<a
class="focus-brand inline-flex min-h-11 items-center rounded-sm hover:text-white"
href="https://facebook.com/depjorgesolla"
>Facebook</a
>
</li>
</ul>
</div>
</div>
<div class="border-t border-white/10">
<p class="mx-auto max-w-[1152px] px-8 py-6 text-xs text-white/55">
Jorge José Santos Pereira Solla · Deputado Federal · Partido dos Trabalhadores ·
Bahia
</p>
</div>
</footer>
</div>
</section>
<!-- CENA 02 — HOME COMPLETA / 390 -->
<section class="mx-auto max-w-[1360px] px-6" aria-labelledby="scene-mobile-title">
<div
class="mb-3 flex w-[390px] items-center justify-between text-xs font-bold text-[#756762]"
>
<h2 id="scene-mobile-title">Cena 02 · Home completa</h2>
<span>390 px</span>
</div>
<div
class="scene-shadow w-[390px] overflow-hidden bg-campaign-cream"
data-scene="home-mobile"
>
<header
data-mobile-menu
class="hero-field relative z-20 border-b border-white/15 text-white"
>
<div class="flex h-[74px] items-center justify-between px-5">
<a href="/" aria-label="Início — Jorge Solla" class="focus-brand rounded-sm">
<span class="ink-crop-negative !h-[46px] !w-[128px]"
><img
class="!top-[-26.1px] !left-[-19.8px] !w-[167px]"
src="../../public/campaign-kit/jorge-solla-negativo.png"
alt="Jorge Solla — Deputado Federal"
/></span>
</a>
<button
data-menu-trigger
type="button"
aria-label="Abrir menu"
aria-expanded="false"
aria-controls="home-mobile-menu"
class="focus-brand flex h-11 w-11 items-center justify-center rounded-[8px] border border-white/30"
>
<svg
data-menu-hamburger
aria-hidden="true"
width="22"
height="22"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
>
<path d="M4 7h16M4 12h16M4 17h16" />
</svg>
<svg
data-menu-x
aria-hidden="true"
width="22"
height="22"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
>
<path d="m6 6 12 12M18 6 6 18" />
</svg>
</button>
</div>
<div
id="home-mobile-menu"
data-menu-panel
hidden
class="absolute inset-x-0 top-full z-50 border-b border-campaign-line bg-campaign-cream px-5 py-5 text-[#211b19] shadow-[0_18px_36px_rgb(71_19_14/18%)]"
>
<div class="flex items-center justify-between border-b border-campaign-line pb-3">
<p class="font-display text-sm font-extrabold text-pt-red">Menu</p>
<button
data-menu-close
type="button"
aria-label="Fechar menu"
class="focus-brand flex h-11 w-11 items-center justify-center rounded-[8px] border border-campaign-line text-pt-red"
>
<svg
aria-hidden="true"
width="22"
height="22"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
>
<path d="m6 6 12 12M18 6 6 18" />
</svg>
</button>
</div>
<nav aria-label="Navegação móvel" class="mt-2 grid">
<a
data-menu-link
class="focus-brand flex min-h-12 items-center rounded-sm border-b border-campaign-line font-display text-base font-bold"
href="/artigos"
>Artigos</a
>
<a
data-menu-link
class="focus-brand flex min-h-12 items-center rounded-sm border-b border-campaign-line font-display text-base font-bold"
href="#bandeiras-mobile"
>Bandeiras</a
>
<a
data-menu-link
class="focus-brand flex min-h-12 items-center rounded-sm border-b border-campaign-line font-display text-base font-bold"
href="/fotos"
>Fotos</a
>
<a
data-menu-link
class="focus-brand flex min-h-12 items-center rounded-sm font-display text-base font-bold"
href="/"
>Início</a
>
</nav>
</div>
</header>
<section
class="hero-field relative min-h-[760px] overflow-hidden text-white"
aria-labelledby="hero-mobile-title"
>
<div class="noise pointer-events-none absolute inset-0 opacity-[.055]"></div>
<div class="relative z-10 px-5 pt-10">
<p
class="font-display text-[13px] font-extrabold tracking-[.13em] text-pt-yellow uppercase"
>
Obrigado, Bahia
</p>
<h2
id="hero-mobile-title"
class="section-title mt-4 font-display text-[55px] leading-[.92] font-black tracking-[-.06em]"
>
<span class="number-rule block">152.049</span
><span class="mt-1 block text-[36px] leading-[1.02] tracking-[-.045em]"
>votos de confiança</span
>
</h2>
<p class="body-copy mt-5 max-w-[345px] text-[17px] leading-[1.45] text-white/88">
Obrigado a quem votou, a quem caminhou, a quem compartilhou e a quem acreditou. A
eleição terminou; o trabalho continua.
</p>
<a
href="/artigos"
class="primary-action focus-brand mt-6 inline-flex min-h-[50px] items-center gap-3 rounded-[10px] bg-pt-yellow px-5 font-display text-[15px] font-extrabold text-[#261f00] no-underline"
>Acompanhe o mandato <span aria-hidden="true">→</span></a
>
</div>
<div
class="absolute -right-32 bottom-[-120px] h-[390px] w-[390px] rounded-full border-[56px] border-pt-yellow"
></div>
<img
class="absolute right-[-18px] bottom-[-38px] h-[370px] w-auto max-w-none"
src="../../public/JOA00162.webp"
alt="Jorge Solla sorrindo, com blazer azul e camisa do PT"
/>
<p class="absolute bottom-5 left-5 z-10 text-[11px] font-semibold text-white/68">
Deputado Federal · PT · Bahia
</p>
</section>
<section class="bg-campaign-cream px-5 pt-16 pb-18" aria-labelledby="board-mobile-title">
<p class="font-display text-[13px] font-extrabold text-pt-red">Acompanhe de perto</p>
<h2
id="board-mobile-title"
class="section-title mt-2 font-display text-[34px] leading-[1.03] font-black tracking-[-.04em]"
>
O mandato, onde a Bahia acontece
</h2>
<p class="mt-4 text-[15px] leading-6 text-campaign-muted">
Notícias, vídeos e registros do trabalho em Brasília e nos municípios.
</p>
<article class="mt-8 border-y border-campaign-line py-6">
<a href="/artigos" class="focus-brand block rounded-sm no-underline">
<div class="h-[220px] overflow-hidden">
<img
class="photo-tone h-full w-full object-cover"
src="../../public/53569851134_02afc18fb4_o.webp"
alt="Jorge Solla e o presidente Lula em agenda de saúde pública"
/>
</div>
<p class="mt-4 text-xs font-bold text-pt-red">Saúde · Bahia</p>
<h3
class="mt-2 font-display text-[25px] leading-[1.12] font-extrabold tracking-[-.02em]"
>
Lula, Jerônimo e Solla inauguram Hospital do Litoral Norte da Bahia
</h3>
<p class="mt-4 text-sm font-bold text-pt-red">Ler notícia →</p>
</a>
</article>
<div class="divide-y divide-campaign-line">
<article class="py-6">
<a href="/artigos" class="focus-brand block rounded-sm"
><p class="text-xs font-bold text-pt-red">Educação · Jequié</p>
<h3 class="mt-2 font-display text-xl leading-[1.18] font-extrabold">
Solla comemora anúncio de construção de novo campus federal em Jequié
</h3></a
>
</article>
<article class="py-6">
<a href="/artigos" class="focus-brand block rounded-sm"
><p class="text-xs font-bold text-pt-red">Trabalho · Câmara</p>
<h3 class="mt-2 font-display text-xl leading-[1.18] font-extrabold">
Solla reforça luta por cumprimento do piso da enfermagem em audiência na Câmara
</h3></a
>
</article>
<article class="py-6">
<a href="/artigos" class="focus-brand block rounded-sm"
><p class="text-xs font-bold text-pt-red">Bahia · Ubatã</p>
<h3 class="mt-2 font-display text-xl leading-[1.18] font-extrabold">
Solla e Jerônimo inauguram mercado público de Ubatã
</h3></a
>
</article>
</div>
<div class="mt-6 flex flex-wrap gap-x-6 gap-y-3 text-sm font-bold text-pt-red">
<a class="focus-brand link-line rounded-sm underline" href="/artigos"
>Todos os artigos</a
><a
class="focus-brand link-line rounded-sm underline"
href="https://youtube.com/@JorgeSollaDep"
>YouTube</a
><a
class="focus-brand link-line rounded-sm underline"
href="https://instagram.com/depjorgesolla"
>Instagram</a
>
</div>
</section>
<section
class="border-y border-campaign-line bg-white px-5 py-16"
aria-labelledby="story-mobile-title"
>
<p class="font-display text-[13px] font-extrabold text-pt-red">Nossa história</p>
<h2
id="story-mobile-title"
class="section-title mt-2 font-display text-[34px] leading-[1.03] font-black tracking-[-.04em]"
>
Saúde pública como escolha de vida
</h2>
<p class="body-copy mt-4 text-[15px] leading-6 text-campaign-muted">
Da gestão do SUS ao Congresso Nacional, uma trajetória feita ao lado de quem defende
saúde, democracia e direitos para todos.
</p>
<button
type="button"
aria-label="Reproduzir vídeo da trajetória de Jorge Solla"
class="focus-brand relative mt-7 aspect-[4/3] w-full overflow-hidden rounded-[10px] bg-pt-red-dark text-white"
>
<img
class="photo-tone h-full w-full object-cover"
src="../../public/53569851134_02afc18fb4_o.webp"
alt="Jorge Solla com Lula em agenda do Brasil Sorridente"
/>
<span
class="absolute bottom-4 left-4 flex h-12 w-12 items-center justify-center rounded-full bg-pt-yellow text-[#261f00]"
><svg
aria-hidden="true"
width="20"
height="20"
viewBox="0 0 24 24"
fill="currentColor"
>
<path d="m8 5 11 7-11 7z" /></svg
></span>
</button>
<button
type="button"
class="focus-brand link-line mt-5 rounded-sm text-sm font-bold text-pt-red underline"
>
Assistir à trajetória
</button>
</section>
<section
id="bandeiras-mobile"
class="bg-campaign-band px-5 py-16"
aria-labelledby="flags-mobile-title"
>
<p class="font-display text-[13px] font-extrabold text-pt-red">Bandeiras do mandato</p>
<h2
id="flags-mobile-title"
class="section-title mt-2 font-display text-[34px] leading-[1.03] font-black tracking-[-.04em]"
>
Compromissos que orientam o trabalho
</h2>
<p class="body-copy mt-4 text-[15px] leading-6 text-campaign-muted">
Posições construídas em décadas de vida pública, agora renovadas para o quarto
mandato.
</p>
<ol class="mt-8 list-none border-t border-l border-black/15 p-0">
<li class="border-r border-b border-black/15 p-6">
<span class="font-display text-xs font-extrabold text-pt-red">Saúde</span>
<h3 class="mt-3 font-display text-[22px] font-extrabold">
Defender o SUS e valorizar quem cuida
</h3>
<p class="mt-2 text-sm leading-6 text-campaign-muted">
Financiamento público, piso da enfermagem, vacinação, ciência e atendimento digno.
</p>
</li>
<li class="border-r border-b border-black/15 p-6">
<span class="font-display text-xs font-extrabold text-pt-red">Educação</span>
<h3 class="mt-3 font-display text-[22px] font-extrabold">
Mais oportunidades no interior
</h3>
<p class="mt-2 text-sm leading-6 text-campaign-muted">
Institutos federais, universidades e escola pública de qualidade em toda a Bahia.
</p>
</li>
<li class="border-r border-b border-black/15 p-6">
<span class="font-display text-xs font-extrabold text-pt-red">Renda</span>
<h3 class="mt-3 font-display text-[22px] font-extrabold">
Crescimento com dignidade
</h3>
<p class="mt-2 text-sm leading-6 text-campaign-muted">
Salário mínimo valorizado, moradia, agricultura familiar e comida na mesa.
</p>
</li>
<li class="border-r border-b border-black/15 p-6">
<span class="font-display text-xs font-extrabold text-pt-red">Democracia</span>
<h3 class="mt-3 font-display text-[22px] font-extrabold">
Participação e direitos
</h3>
<p class="mt-2 text-sm leading-6 text-campaign-muted">
Instituições fortes, liberdade, respeito e combate permanente à desinformação.
</p>
</li>
<li class="border-r border-b border-black/15 p-6">
<span class="font-display text-xs font-extrabold text-pt-red">Bahia</span>
<h3 class="mt-3 font-display text-[22px] font-extrabold">
A Bahia no centro das decisões
</h3>
<p class="mt-2 text-sm leading-6 text-campaign-muted">
Investimento federal e presença do mandato nos municípios e territórios.
</p>
</li>
<li class="border-r border-b border-black/15 p-6">
<span class="font-display text-xs font-extrabold text-pt-red">Trabalho</span>
<h3 class="mt-3 font-display text-[22px] font-extrabold">
Tempo para viver, renda para cuidar
</h3>
<p class="mt-2 text-sm leading-6 text-campaign-muted">
Jornada justa, direitos protegidos e trabalho que não adoece.
</p>
</li>
</ol>
</section>
<section class="bg-[#24100e] px-5 py-16 text-white" aria-labelledby="photos-mobile-title">
<p class="font-display text-[13px] font-extrabold text-pt-yellow">Perto da Bahia</p>
<h2
id="photos-mobile-title"
class="mt-2 font-display text-[34px] leading-none font-black tracking-[-.04em]"
>
O mandato em fotos
</h2>
<div class="mt-7 grid grid-cols-2 gap-2">
<a
href="/fotos"
class="focus-brand col-span-2 h-[300px] overflow-hidden rounded-[9px]"
><img
class="photo-tone h-full w-full object-cover"
src="../../public/52396285023_561ffc0ff6_o.webp"
alt="Vista aérea de encontro popular no Comércio, em Salvador"
/></a>
<a href="/fotos" class="focus-brand h-[170px] overflow-hidden rounded-[9px]"
><img
class="photo-tone h-full w-full object-cover"
src="../../public/53569851134_02afc18fb4_o.webp"
alt="Agenda de saúde pública com Jorge Solla e Lula"
/></a>
<div class="flex h-[170px] items-end rounded-[9px] bg-pt-red p-5">
<p class="font-display text-[19px] leading-[1.13] font-extrabold">
Trabalho presente, memória viva.
</p>
</div>
</div>
<a
href="/fotos"
class="focus-brand link-line mt-6 inline-block rounded-sm text-sm font-bold text-white underline"
>Ver o álbum</a
>
</section>
<footer class="bg-[#180a09] px-5 pt-12 text-[#fff8f2]">
<span class="ink-crop-negative !h-[46px] !w-[128px]"
><img
class="!top-[-26.1px] !left-[-19.8px] !w-[167px]"
src="../../public/campaign-kit/jorge-solla-negativo.png"
alt="Jorge Solla — Deputado Federal"
/></span>
<p class="mt-5 text-sm leading-6 text-white/68">
Deputado Federal · PT · Bahia<br /><span class="font-semibold text-white"
>Mais Saúde, Mais Futuro.</span
>
</p>
<div class="mt-9 grid grid-cols-2 gap-6 border-t border-white/10 pt-8">
<div>
<h3 class="font-display text-sm font-extrabold">Navegue</h3>
<ul class="mt-3 list-none p-0 text-sm text-white/70">
<li>
<a
class="focus-brand inline-flex min-h-11 items-center rounded-sm"
href="/artigos"
>Artigos</a
>
</li>
<li>
<a
class="focus-brand inline-flex min-h-11 items-center rounded-sm"
href="/fotos"
>Fotos</a
>
</li>
<li>
<a
class="focus-brand inline-flex min-h-11 items-center rounded-sm"
href="/privacidade"
>Privacidade</a
>
</li>
</ul>
</div>
<div>
<h3 class="font-display text-sm font-extrabold">Redes</h3>
<ul class="mt-3 list-none p-0 text-sm text-white/70">
<li>
<a
class="focus-brand inline-flex min-h-11 items-center rounded-sm"
href="https://instagram.com/depjorgesolla"
>Instagram</a
>
</li>
<li>
<a
class="focus-brand inline-flex min-h-11 items-center rounded-sm"
href="https://youtube.com/@JorgeSollaDep"
>YouTube</a
>
</li>
<li>
<a
class="focus-brand inline-flex min-h-11 items-center rounded-sm"
href="https://facebook.com/depjorgesolla"
>Facebook</a
>
</li>
</ul>
</div>
</div>
<p class="mt-7 border-t border-white/10 py-6 text-[11px] leading-5 text-white/55">
Jorge José Santos Pereira Solla · Deputado Federal · Partido dos Trabalhadores · Bahia
</p>
</footer>
</div>
</section>
<!-- CENA 03 — RODAPÉ ISOLADO -->
<section class="mx-auto max-w-[1360px] px-6" aria-labelledby="scene-footer-title">
<div class="mb-3 flex items-center justify-between text-xs font-bold text-[#756762]">
<h2 id="scene-footer-title">Cena 03 · Rodapé institucional</h2>
<span>1280 + 390</span>
</div>
<div class="grid items-start gap-8 xl:grid-cols-[1fr_390px]">
<div class="scene-shadow overflow-hidden bg-[#180a09] text-[#fff8f2]">
<div class="grid grid-cols-[1.7fr_.8fr_.8fr] gap-12 px-14 py-14">
<div>
<span class="ink-crop-negative"
><img
src="../../public/campaign-kit/jorge-solla-negativo.png"
alt="Jorge Solla — Deputado Federal"
/></span>
<p class="mt-5 text-sm leading-6 text-white/68">
Deputado Federal · PT · Bahia<br /><strong class="text-white"
>Mais Saúde, Mais Futuro.</strong
>
</p>
</div>
<div>
<h3 class="font-display text-sm font-extrabold">Navegue</h3>
<p class="mt-4 text-sm leading-8 text-white/70">
Artigos<br />Fotos<br />Privacidade
</p>
</div>
<div>
<h3 class="font-display text-sm font-extrabold">Redes</h3>
<p class="mt-4 text-sm leading-8 text-white/70">
Instagram<br />YouTube<br />Facebook
</p>
</div>
</div>
<p class="border-t border-white/10 px-14 py-5 text-xs text-white/55">
Jorge José Santos Pereira Solla · Deputado Federal · Partido dos Trabalhadores · Bahia
</p>
</div>
<div class="scene-shadow bg-[#180a09] px-5 pt-10 text-[#fff8f2]">
<span class="ink-crop-negative !h-[46px] !w-[128px]"
><img
class="!top-[-26.1px] !left-[-19.8px] !w-[167px]"
src="../../public/campaign-kit/jorge-solla-negativo.png"
alt="Jorge Solla — Deputado Federal"
/></span>
<p class="mt-4 text-sm leading-6 text-white/68">
Deputado Federal · PT · Bahia<br /><strong class="text-white"
>Mais Saúde, Mais Futuro.</strong
>
</p>
<div class="mt-7 grid grid-cols-2 gap-5 border-t border-white/10 pt-6 text-sm">
<p class="leading-8 text-white/70">
<strong class="text-white">Navegue</strong><br />Artigos<br />Fotos<br />Privacidade
</p>
<p class="leading-8 text-white/70">
<strong class="text-white">Redes</strong><br />Instagram<br />YouTube<br />Facebook
</p>
</div>
<p class="mt-6 border-t border-white/10 py-5 text-[11px] leading-5 text-white/55">
Jorge José Santos Pereira Solla · Deputado Federal · Partido dos Trabalhadores · Bahia
</p>
</div>
</div>
</section>
<!-- CENA 04 — ESTADOS VAZIOS -->
<section class="mx-auto max-w-[1360px] px-6" aria-labelledby="scene-empty-title">
<div class="mb-3 flex items-center justify-between text-xs font-bold text-[#756762]">
<h2 id="scene-empty-title">Cena 04 · Estados vazios</h2>
<span>board + álbum</span>
</div>
<div
class="scene-shadow grid grid-cols-2 divide-x divide-campaign-line overflow-hidden bg-campaign-cream"
>
<section class="p-14" aria-labelledby="empty-board-title">
<p class="font-display text-sm font-extrabold text-pt-red">Acompanhe de perto</p>
<div
class="mt-7 flex min-h-[290px] flex-col items-center justify-center border-y border-campaign-line px-8 text-center"
>
<svg
aria-hidden="true"
width="34"
height="34"
viewBox="0 0 24 24"
fill="none"
stroke="#a21c1c"
stroke-width="1.7"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2Z" />
</svg>
<h3 id="empty-board-title" class="mt-5 font-display text-2xl font-extrabold">
Ainda não há publicações
</h3>
<p class="mt-3 max-w-sm text-sm leading-6 text-campaign-muted">
As notícias do mandato aparecerão aqui assim que forem publicadas.
</p>
</div>
</section>
<section class="bg-[#24100e] p-14 text-white" aria-labelledby="empty-album-title">
<p class="font-display text-sm font-extrabold text-pt-yellow">Perto da Bahia</p>
<div
class="mt-7 flex min-h-[290px] flex-col items-center justify-center rounded-[10px] border border-white/15 px-8 text-center"
>
<svg
aria-hidden="true"
width="36"
height="36"
viewBox="0 0 24 24"
fill="none"
stroke="#ffe607"
stroke-width="1.7"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect width="18" height="18" x="3" y="3" rx="2" />
<circle cx="9" cy="9" r="2" />
<path d="m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21" />
</svg>
<h3 id="empty-album-title" class="mt-5 font-display text-2xl font-extrabold">
O álbum está sendo preparado
</h3>
<p class="mt-3 max-w-sm text-sm leading-6 text-white/68">
Novos registros do trabalho na Bahia serão publicados em breve.
</p>
</div>
</section>
</div>
</section>
<!-- CENA 05 — HEADER DE PÁGINA INTERNA -->
<section class="mx-auto max-w-[1360px] px-6" aria-labelledby="scene-header-title">
<div class="mb-3 flex items-center justify-between text-xs font-bold text-[#756762]">
<h2 id="scene-header-title">Cena 05 · Cabeçalho de página interna</h2>
<span>/artigos · /fotos</span>
</div>
<div class="space-y-8">
<div class="scene-shadow overflow-hidden bg-campaign-cream">
<header class="border-b border-campaign-line">
<div class="flex h-[92px] items-center justify-between px-10">
<a href="/" aria-label="Início — Jorge Solla" class="focus-brand rounded-sm"
><span class="ink-crop-positive"
><img
src="../../public/campaign-kit/jorge-solla-positivo.png"
alt="Jorge Solla — Deputado Federal" /></span
></a>
<nav
aria-label="Navegação principal"
class="flex items-center gap-8 text-sm font-bold"
>
<a
class="focus-brand rounded-sm text-pt-red underline decoration-2 underline-offset-8"
href="/artigos"
>Artigos</a
><a class="focus-brand rounded-sm" href="/fotos">Fotos</a
><a class="focus-brand rounded-sm" href="/">Início</a>
</nav>
</div>
</header>
<div class="px-10 py-12">
<p class="font-display text-sm font-extrabold text-pt-red">Mandato em movimento</p>
<h3 class="mt-2 font-display text-4xl font-black tracking-[-.04em]">
Artigos e notícias
</h3>
</div>
</div>
<div class="scene-shadow w-[390px] overflow-hidden bg-campaign-cream">
<header data-mobile-menu data-menu-open class="relative border-b border-campaign-line">
<div class="flex h-[74px] items-center justify-between px-5">
<a href="/" aria-label="Início — Jorge Solla" class="focus-brand rounded-sm"
><span class="ink-crop-positive !h-[46px] !w-[128px]"
><img
class="!top-[-26.1px] !left-[-19.8px] !w-[167px]"
src="../../public/campaign-kit/jorge-solla-positivo.png"
alt="Jorge Solla — Deputado Federal" /></span
></a>
<button
data-menu-trigger
type="button"
aria-label="Fechar menu"
aria-expanded="true"
aria-controls="internal-mobile-menu"
class="focus-brand flex h-11 w-11 items-center justify-center rounded-[8px] border border-campaign-line text-pt-red"
>
<svg
data-menu-hamburger
aria-hidden="true"
width="22"
height="22"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
>
<path d="M4 7h16M4 12h16M4 17h16" />
</svg>
<svg
data-menu-x
aria-hidden="true"
width="22"
height="22"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
>
<path d="m6 6 12 12M18 6 6 18" />
</svg>
</button>
</div>
<div
id="internal-mobile-menu"
data-menu-panel
class="border-t border-campaign-line bg-white px-5 py-5 text-[#211b19] shadow-[0_18px_36px_rgb(71_19_14/18%)]"
>
<div class="flex items-center justify-between border-b border-campaign-line pb-3">
<p class="font-display text-sm font-extrabold text-pt-red">Menu aberto</p>
<button
data-menu-close
type="button"
aria-label="Fechar menu"
class="focus-brand flex h-11 w-11 items-center justify-center rounded-[8px] border border-campaign-line text-pt-red"
>
<svg
aria-hidden="true"
width="22"
height="22"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
>
<path d="m6 6 12 12M18 6 6 18" />
</svg>
</button>
</div>
<nav aria-label="Navegação móvel" class="mt-2 grid">
<a
data-menu-link
class="focus-brand flex min-h-12 items-center rounded-sm border-b border-campaign-line font-display text-base font-bold text-pt-red"
href="/artigos"
>Artigos</a
>
<a
data-menu-link
class="focus-brand flex min-h-12 items-center rounded-sm border-b border-campaign-line font-display text-base font-bold"
href="/#bandeiras"
>Bandeiras</a
>
<a
data-menu-link
class="focus-brand flex min-h-12 items-center rounded-sm border-b border-campaign-line font-display text-base font-bold"
href="/fotos"
>Fotos</a
>
<a
data-menu-link
class="focus-brand flex min-h-12 items-center rounded-sm font-display text-base font-bold"
href="/"
>Início</a
>
</nav>
</div>
</header>
<div class="px-5 py-10">
<p class="font-display text-[13px] font-extrabold text-pt-red">Memória do mandato</p>
<h3 class="mt-2 font-display text-[34px] font-black tracking-[-.04em]">Fotos</h3>
</div>
</div>
</div>
</section>
<!-- CONTRATO DE PORT
FONTE DE VERDADE VISUAL — S47
1. TOKENS E FONTES
- --pt-red #a21c1c; --pt-red-dark #47130e; --pt-yellow #ffe607.
- --campaign-cream #fff8f2; --campaign-band #ebe9e9; --campaign-line rgb(0 0 0 / 12%); --campaign-muted #6c615e.
- Display: Exo 2 (600–900). Texto: Arimo (400–700). O HTML usa Google Fonts porque o app carrega as mesmas famílias via next/font.
- Cantos: 8–12px em controles/mídia; sem pills decorativas. Sombra apenas no invólucro das cenas do gate, não na página real.
2. GEOMETRIA
- Conteúdo desktop: máximo 1152px, gutters de 64px no board de 1280; seções com 96–112px de respiro vertical.
- Mobile: 390px, gutter 20px, seções com 64–72px de respiro; todos os alvos tocáveis >=44px.
- Hero desktop: header 88px + corpo mínimo 668px; composição 2 colunas. Hero mobile: header 74px + corpo mínimo 760px.
- No app real, o título de agradecimento do hero é o h1 da página. Neste documento ele é h2 porque o h1 identifica o próprio artefato de gate.
- H1 desktop 76px/0.91 para o número e 57px/1.03 para a promessa; mobile 55px e 36px. Número com algarismos tabulares.
- Apenas um CTA primário na dobra: “Acompanhe o mandato”, amarelo, min-height 48px desktop / 50px mobile.
- Board desktop: destaque 7/12 + coluna 5/12; mobile: uma única coluna, sem carrossel obrigatório.
- Bandeiras: grade editorial com hairlines, não seis cards flutuantes; 3×2 desktop e 1×6 mobile.
3. ESTADOS E ACESSIBILIDADE
- Board vazio: “Ainda não há publicações”; álbum vazio: “O álbum está sendo preparado”. Não deixar buraco silencioso na home.
- Foco público em superfícies claras: 3px amarelo + separador externo azul-escuro (#184e92), conforme C243. Em fundo escuro, o amarelo continua sendo a borda imediatamente visível.
- Hover é refinamento; nenhuma informação depende dele. prefers-reduced-motion remove transições.
- Imagens têm alt contextual; lockup tem alt “Jorge Solla — Deputado Federal”.
- O menu mobile precisa funcionar de verdade: abre/fecha no trigger, fecha no X, em link, clique fora e Escape; move foco para o primeiro link ao abrir e devolve foco ao trigger ao fechar.
4. ASSETS
- Usados: ../../public/campaign-kit/jorge-solla-negativo.png; jorge-solla-positivo.png; ../../public/JOA00162.webp; ../../public/52396285023_561ffc0ff6_o.webp; ../../public/53569851134_02afc18fb4_o.webp.
- O crop dos lockups preserva a caixa de tinta oficial: negativo/positivo no mesmo canvas 1037×595; janela 144×52 desktop e 128×46 mobile.
- NEEDS ASSET: nenhum para o aceite. O vídeo de trajetória mantém a mídia já existente; a imagem mostrada é poster de composição do gate, não exige nova fotografia.
5. NÃO PODE APARECER NA SUPERFÍCIE PÚBLICA
- “1313”, pedido de voto, “candidato”, “propaganda eleitoral”, CNPJ eleitoral, data/turno eleitoral.
- “Quero apoiar”, newsletter/captação de campanha, Central de Conteúdos, cards eleitorais, jingles ou rádio.
- marca-*-completa.png, numero-*.png ou qualquer lockup que contenha o número eleitoral.
- Ranking, percentual estadual ou dashboard de resultados no hero; o único dado protagonista é 152.049.
- Mais de um CTA primário por dobra.
-->
</main>
<script>
document.querySelectorAll('[data-mobile-menu]').forEach((menu) => {
const trigger = menu.querySelector('[data-menu-trigger]')
const panel = menu.querySelector('[data-menu-panel]')
const closeButton = menu.querySelector('[data-menu-close]')
const links = [...menu.querySelectorAll('[data-menu-link]')]
if (!trigger || !panel) return
const setOpen = (open, moveFocus = true) => {
panel.hidden = !open
trigger.setAttribute('aria-expanded', String(open))
trigger.setAttribute('aria-label', open ? 'Fechar menu' : 'Abrir menu')
if (!moveFocus) return
if (open) links[0]?.focus()
else trigger.focus()
}
setOpen(menu.hasAttribute('data-menu-open'), false)
trigger.addEventListener('click', () =>
setOpen(trigger.getAttribute('aria-expanded') !== 'true'),
)
closeButton?.addEventListener('click', () => setOpen(false))
links.forEach((link) => link.addEventListener('click', () => setOpen(false, false)))
document.addEventListener('click', (event) => {
if (trigger.getAttribute('aria-expanded') === 'true' && !menu.contains(event.target))
setOpen(false)
})
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape' && trigger.getAttribute('aria-expanded') === 'true')
setOpen(false)
})
})
</script>
</body>
</html>