mirror of
https://github.com/fsolla/teqo.git
synced 2026-11-12 22:13:05 +00:00
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
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.
1448 lines
65 KiB
HTML
1448 lines
65 KiB
HTML
<!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>
|