mirror of
https://github.com/fsolla/teqo.git
synced 2026-11-14 08:53:11 +00:00
252 lines
10 KiB
HTML
252 lines
10 KiB
HTML
<!doctype html>
|
||
<html lang="pt-BR" data-theme="campaign-site">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
||
<title>Design — S36 · Marca no header da Central</title>
|
||
<style type="text/tailwindcss">
|
||
@theme {
|
||
--font-sans: Arimo, Arial, sans-serif;
|
||
}
|
||
:root {
|
||
--red: #ae1603;
|
||
--kit-red: #e4102f;
|
||
--blue: #184e92;
|
||
--yellow: #ffeb00;
|
||
--cream: #fff8f2;
|
||
--muted: #6c615e;
|
||
--line: rgb(0 0 0/0.12);
|
||
--display: 'Exo 2', 'Arial Black', sans-serif;
|
||
}
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
body {
|
||
font-family: Arimo, Arial, sans-serif;
|
||
}
|
||
.display {
|
||
font-family: var(--display);
|
||
}
|
||
.board {
|
||
background: #e7e3e0;
|
||
background-image: radial-gradient(rgb(24 78 146/0.09) 0.7px, transparent 0.7px);
|
||
background-size: 18px 18px;
|
||
}
|
||
.frame {
|
||
box-shadow: 0 22px 60px rgb(39 25 22/0.13);
|
||
}
|
||
.desktop {
|
||
width: 1280px;
|
||
}
|
||
.phone {
|
||
width: 390px;
|
||
border-radius: 28px;
|
||
}
|
||
.scene:after {
|
||
content: '';
|
||
height: 1px;
|
||
flex: 1;
|
||
background: #cfc9c5;
|
||
}
|
||
.trimmed-lockup {
|
||
position: relative;
|
||
overflow: hidden;
|
||
width: 188px;
|
||
height: 50px;
|
||
}
|
||
.trimmed-lockup img {
|
||
position: absolute;
|
||
width: 246px;
|
||
max-width: none;
|
||
left: -29px;
|
||
top: -38px;
|
||
}
|
||
.trimmed-lockup.mobile {
|
||
width: 142px;
|
||
height: 39px;
|
||
}
|
||
.trimmed-lockup.mobile img {
|
||
width: 186px;
|
||
left: -22px;
|
||
top: -29px;
|
||
}
|
||
.option {
|
||
border: 1px solid var(--line);
|
||
border-radius: 14px;
|
||
background: white;
|
||
overflow: hidden;
|
||
}
|
||
.recommended {
|
||
border: 2px solid var(--kit-red);
|
||
box-shadow: 0 10px 26px rgb(228 16 47/0.13);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="board min-h-screen text-black antialiased">
|
||
<main class="mx-auto max-w-[1480px] space-y-14 px-4 py-12 md:px-8">
|
||
<header class="max-w-3xl">
|
||
<span class="rounded-full bg-[#e4102f] px-3 py-1 text-xs font-bold text-white"
|
||
>S36 · decisão visual</span
|
||
>
|
||
<h1 class="display mt-4 text-4xl font-black">A marca volta a assinar a Central.</h1>
|
||
<p class="mt-2 text-sm leading-6 text-[#6c615e]">
|
||
Mesmo header, mesma altura e mesma copy. O gate escolhe somente o ativo e seu peso visual.
|
||
</p>
|
||
</header>
|
||
|
||
<section>
|
||
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]">
|
||
<span>CENA 01</span>
|
||
<h2>Desktop 1280 · opções A e B lado a lado</h2>
|
||
</div>
|
||
<div class="desktop frame mx-auto overflow-hidden rounded-xl bg-[#f9faff] p-8">
|
||
<div class="grid grid-cols-2 gap-6">
|
||
<article class="option recommended">
|
||
<div class="flex items-center justify-between bg-[#ae1603] px-8 h-16">
|
||
<div class="trimmed-lockup" aria-label="Jorge Solla">
|
||
<img src="../../public/campaign-kit/jorge-solla-negativo.png" alt="Jorge Solla" />
|
||
</div>
|
||
<span class="text-sm font-bold text-white">Central de Conteúdos</span>
|
||
</div>
|
||
<div class="p-5">
|
||
<div class="flex items-center justify-between gap-3">
|
||
<h3 class="font-extrabold">A · Lockup oficial com recorte técnico</h3>
|
||
<span
|
||
class="rounded-full bg-[#e4102f] px-2.5 py-1 text-[11px] font-black text-white"
|
||
>RECOMENDADA</span
|
||
>
|
||
</div>
|
||
<p class="mt-2 text-sm leading-6 text-[#6c615e]">
|
||
Preserva a assinatura horizontal desenhada no S27 e remove somente a moldura
|
||
transparente do PNG. A tinta lê em aproximadamente 46 px, no peso da referência
|
||
pública.
|
||
</p>
|
||
</div>
|
||
</article>
|
||
<article class="option">
|
||
<div class="flex h-16 items-center justify-between bg-[#ae1603] px-8">
|
||
<img
|
||
src="../../public/campaign-kit/marca-negativa-completa.png"
|
||
class="h-[58px] w-auto object-contain"
|
||
alt="Jorge Solla 1313 — Mais Saúde, Mais Futuro"
|
||
/>
|
||
<span class="text-sm font-bold text-white">Central de Conteúdos</span>
|
||
</div>
|
||
<div class="p-5">
|
||
<h3 class="font-extrabold">B · Marca negativa completa</h3>
|
||
<p class="mt-2 text-sm leading-6 text-[#6c615e]">
|
||
Oficial e correta sobre vermelho, mas comprime nome, número e slogan na barra de
|
||
64 px. O slogan perde leitura e a massa vertical compete com o nome da seção.
|
||
</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
<div class="mt-7 rounded-xl bg-white p-6">
|
||
<p class="text-xs font-black tracking-[.12em] text-[#e4102f]">DECISÃO RECOMENDADA</p>
|
||
<p class="display mt-1 text-2xl font-black">
|
||
A · manter o lockup e corrigir a caixa, não redesenhar o header.
|
||
</p>
|
||
<p class="mt-2 max-w-3xl text-sm leading-6 text-[#6c615e]">
|
||
Altura do header: 64 px. Inset horizontal: 32 px dentro do conteúdo. Lockup visível:
|
||
188 × 50 px. Badge existente: 14 px, bold. Sem novo lockup e sem alteração de cor.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]">
|
||
<span>CENA 02</span>
|
||
<h2>Mobile 390 · as duas opções na barra real de 56 px</h2>
|
||
</div>
|
||
<div class="flex flex-wrap justify-center gap-8">
|
||
<article class="phone frame overflow-hidden bg-white">
|
||
<div class="flex h-14 items-center justify-between bg-[#ae1603] px-5">
|
||
<div class="trimmed-lockup mobile">
|
||
<img src="../../public/campaign-kit/jorge-solla-negativo.png" alt="Jorge Solla" />
|
||
</div>
|
||
<span class="text-white">☰</span>
|
||
</div>
|
||
<div class="p-5">
|
||
<span class="rounded-full bg-[#e4102f] px-2.5 py-1 text-[10px] font-black text-white"
|
||
>A · RECOMENDADA</span
|
||
>
|
||
<h3 class="display mt-4 text-2xl font-black">Central de Conteúdos</h3>
|
||
<p class="mt-2 text-sm leading-5 text-[#6c615e]">
|
||
A assinatura continua reconhecível sem disputar espaço com o menu.
|
||
</p>
|
||
</div>
|
||
</article>
|
||
<article class="phone frame overflow-hidden bg-white">
|
||
<div class="flex h-14 items-center justify-between bg-[#ae1603] px-5">
|
||
<img
|
||
src="../../public/campaign-kit/marca-negativa-completa.png"
|
||
class="h-[52px] w-auto object-contain"
|
||
alt="Jorge Solla 1313 — Mais Saúde, Mais Futuro"
|
||
/><span class="text-white">☰</span>
|
||
</div>
|
||
<div class="p-5">
|
||
<span class="rounded-full border border-black/15 px-2.5 py-1 text-[10px] font-black"
|
||
>B · ALTERNATIVA</span
|
||
>
|
||
<h3 class="display mt-4 text-2xl font-black">Central de Conteúdos</h3>
|
||
<p class="mt-2 text-sm leading-5 text-[#6c615e]">
|
||
O conjunto completo fica pequeno demais para o slogan cumprir sua função.
|
||
</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]">
|
||
<span>CENA 03</span>
|
||
<h2>Página da peça · “Voltar à Central” e badge preservados</h2>
|
||
</div>
|
||
<div class="desktop frame mx-auto overflow-hidden rounded-xl bg-white">
|
||
<header class="flex h-16 items-center justify-between bg-[#ae1603] px-10">
|
||
<div class="trimmed-lockup">
|
||
<img src="../../public/campaign-kit/jorge-solla-negativo.png" alt="Jorge Solla" />
|
||
</div>
|
||
<a class="text-sm font-bold text-white">Voltar à Central</a>
|
||
</header>
|
||
<div class="mx-auto grid max-w-5xl grid-cols-[1.15fr_.85fr] gap-10 px-10 py-12">
|
||
<div
|
||
class="grid aspect-video place-items-center rounded-2xl bg-stone-200 text-xs font-black tracking-wide text-stone-500"
|
||
>
|
||
NEEDS ASSET · PREVIEW REAL DA PEÇA
|
||
</div>
|
||
<div>
|
||
<span
|
||
class="inline-flex rounded-full bg-[#eef4fb] px-2 py-1 text-[11px] font-extrabold text-[#184e92]"
|
||
>Central de Conteúdos</span
|
||
>
|
||
<h3 class="display mt-3 text-3xl font-black">Título da peça publicada</h3>
|
||
<p class="mt-3 text-sm leading-6 text-[#6c615e]">
|
||
Descrição editorial da peça, sem alteração neste item.
|
||
</p>
|
||
<div class="mt-6 h-11 rounded-[10px] bg-[#ffe607]"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="phone frame mx-auto mt-8 overflow-hidden bg-white">
|
||
<header class="flex h-14 items-center justify-between bg-[#ae1603] px-5">
|
||
<div class="trimmed-lockup mobile">
|
||
<img src="../../public/campaign-kit/jorge-solla-negativo.png" alt="Jorge Solla" />
|
||
</div>
|
||
<a class="text-xs font-bold text-white">Voltar à Central</a>
|
||
</header>
|
||
<div class="p-5">
|
||
<div class="aspect-video rounded-xl bg-stone-200"></div>
|
||
<span
|
||
class="mt-5 inline-flex rounded-full bg-[#eef4fb] px-2 py-1 text-[11px] font-extrabold text-[#184e92]"
|
||
>Central de Conteúdos</span
|
||
>
|
||
<h3 class="display mt-2 text-2xl font-black">Título da peça publicada</h3>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</body>
|
||
</html>
|