style(S20): formata plano e design com prettier (Related #1216)

This commit is contained in:
Francisco Solla 2026-09-19 15:31:16 -03:00
parent 9ba15ff5ee
commit 19ed23f84c
2 changed files with 541 additions and 103 deletions

View file

@ -24,10 +24,20 @@
--team-blue: #0061a5;
--measure: #0f766e;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; }
button, input { font: inherit; }
button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
button,
input {
font: inherit;
}
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--pt-red);
outline-offset: 2px;
}
@ -40,7 +50,8 @@
background: #cfe7f7;
container-type: inline-size;
}
.tcard-base, .tcard-front {
.tcard-base,
.tcard-front {
position: absolute;
inset: 0;
z-index: 1;
@ -49,7 +60,9 @@
object-fit: cover;
pointer-events: none;
}
.tcard-front { z-index: 4; }
.tcard-front {
z-index: 4;
}
.person {
--person-x: 50%;
position: absolute;
@ -102,12 +115,20 @@
overflow: hidden;
}
.tcard-banner.red {
top: 11.25%; width: 64.167%; height: 8.194%;
--rot: -3.5deg; background: var(--team-red); color: var(--team-yellow);
top: 11.25%;
width: 64.167%;
height: 8.194%;
--rot: -3.5deg;
background: var(--team-red);
color: var(--team-yellow);
}
.tcard-banner.blue {
top: 21.736%; width: 47.13%; height: 12.222%;
--rot: -4.1deg; background: var(--team-blue); color: white;
top: 21.736%;
width: 47.13%;
height: 12.222%;
--rot: -4.1deg;
background: var(--team-blue);
color: white;
}
.tcard-banner span {
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
@ -147,8 +168,12 @@
height: 42.5%;
border-left: 2px solid var(--measure);
}
.edge-tick.left { left: 26.481%; }
.edge-tick.right { left: 81.296%; }
.edge-tick.left {
left: 26.481%;
}
.edge-tick.right {
left: 81.296%;
}
.control-button {
display: inline-flex;
width: 44px;
@ -217,7 +242,8 @@
height: 3px;
border-radius: 999px;
}
.track .span::before, .track .span::after {
.track .span::before,
.track .span::after {
content: '';
position: absolute;
top: 50%;
@ -229,8 +255,12 @@
background: currentColor;
box-shadow: 0 0 0 1px currentColor;
}
.track .span::before { left: 0; }
.track .span::after { left: 100%; }
.track .span::before {
left: 0;
}
.track .span::after {
left: 100%;
}
.track .center {
position: absolute;
top: 10px;
@ -241,26 +271,38 @@
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 antialiased">
<div class="border-b border-emerald-400/40 bg-emerald-400/10 px-4 py-2 text-center text-[11px] font-black tracking-[0.14em] text-emerald-300 uppercase">
<div
class="border-b border-emerald-400/40 bg-emerald-400/10 px-4 py-2 text-center text-[11px] font-black tracking-[0.14em] text-emerald-300 uppercase"
>
Design tier: openai/gpt-5.6-sol · frontier · gate humano obrigatório
</div>
<main class="mx-auto max-w-[1440px] px-4 py-10 sm:px-6 lg:px-10">
<header class="max-w-4xl">
<p class="m-0 text-xs font-black tracking-[0.12em] text-red-400 uppercase">Gate visual · S20</p>
<p class="m-0 text-xs font-black tracking-[0.12em] text-red-400 uppercase">
Gate visual · S20
</p>
<h1 class="mt-2 text-2xl font-black tracking-[-0.02em] sm:text-3xl">
Card “Time de você”: o rosto alcança toda a área livre
</h1>
<p class="mt-3 max-w-3xl text-sm leading-6 text-zinc-400">
O enquadramento automático continua no centro. Ao arrastar, usar as setas ou o teclado, o rosto
pode chegar às duas bordas da janela da foto; o corpo pode sair dela e tocar de leve os ombros
vizinhos, sem cobrir os rostos dos candidatos. Nenhum controle novo.
O enquadramento automático continua no centro. Ao arrastar, usar as setas ou o teclado, o
rosto pode chegar às duas bordas da janela da foto; o corpo pode sair dela e tocar de leve
os ombros vizinhos, sem cobrir os rostos dos candidatos. Nenhum controle novo.
</p>
<div class="mt-5 flex flex-wrap gap-2 text-[11px] font-bold text-zinc-300">
<span class="rounded-full border border-zinc-700 bg-zinc-900 px-3 py-2">1280px · desktop</span>
<span class="rounded-full border border-zinc-700 bg-zinc-900 px-3 py-2">390px · mobile</span>
<span class="rounded-full border border-zinc-700 bg-zinc-900 px-3 py-2">sem controle novo</span>
<span class="rounded-full border border-zinc-700 bg-zinc-900 px-3 py-2">arte oficial intocada</span>
<span class="rounded-full border border-zinc-700 bg-zinc-900 px-3 py-2"
>1280px · desktop</span
>
<span class="rounded-full border border-zinc-700 bg-zinc-900 px-3 py-2"
>390px · mobile</span
>
<span class="rounded-full border border-zinc-700 bg-zinc-900 px-3 py-2"
>sem controle novo</span
>
<span class="rounded-full border border-zinc-700 bg-zinc-900 px-3 py-2"
>arte oficial intocada</span
>
</div>
</header>
@ -270,109 +312,252 @@
Cena 1 · desktop 1280 — envelope de posições + composer pronto
</h2>
<p class="mt-1 max-w-4xl text-xs leading-5 text-zinc-500">
As marcações verdes ficam fora da UI final: servem apenas ao gate. Nas três prévias, escala e altura
são idênticas; muda somente a posição horizontal do visitante.
As marcações verdes ficam fora da UI final: servem apenas ao gate. Nas três prévias,
escala e altura são idênticas; muda somente a posição horizontal do visitante.
</p>
<div class="mt-4 min-h-[760px] overflow-hidden rounded-2xl border border-zinc-700 bg-[var(--campaign-cream)] text-black shadow-2xl">
<div
class="mt-4 min-h-[760px] overflow-hidden rounded-2xl border border-zinc-700 bg-[var(--campaign-cream)] text-black shadow-2xl"
>
<div class="border-b border-black/10 bg-[#47130e] px-8 py-4 text-white">
<p class="text-[11px] font-black tracking-[0.14em] text-[#ffe607] uppercase">/cards?model=time-de-voce · viewport 1280</p>
<p class="text-[11px] font-black tracking-[0.14em] text-[#ffe607] uppercase">
/cards?model=time-de-voce · viewport 1280
</p>
</div>
<div class="relative px-8 py-8">
<div class="grid grid-cols-[1fr_512px] gap-8">
<aside class="rounded-xl border border-teal-700/25 bg-teal-50 p-5">
<p class="text-[11px] font-black tracking-[0.12em] text-teal-800 uppercase">Anotação de design · fora da UI</p>
<p class="text-[11px] font-black tracking-[0.12em] text-teal-800 uppercase">
Anotação de design · fora da UI
</p>
<h3 class="mt-2 text-lg font-black">O envelope inteiro, sem limite fantasma</h3>
<p class="mt-2 text-xs leading-5 text-teal-950/75">
A linha tracejada é a janela <strong>592 × 577</strong>. O ponto verde marca a âncora do rosto.
No extremo, o corpo pode ultrapassar a linha; a cabeça continua no vão livre da composição.
A linha tracejada é a janela <strong>592 × 577</strong>. O ponto verde marca a
âncora do rosto. No extremo, o corpo pode ultrapassar a linha; a cabeça continua
no vão livre da composição.
</p>
<div class="mt-5 grid grid-cols-3 gap-3">
<figure class="m-0">
<div class="mx-auto w-full max-w-[158px] overflow-hidden rounded-lg border border-teal-700/30 shadow-sm">
<div
class="mx-auto w-full max-w-[158px] overflow-hidden rounded-lg border border-teal-700/30 shadow-sm"
>
<div class="tcard">
<img src="../../public/cards/team-card-base.png" alt="" class="tcard-base" />
<div class="person" style="--person-x: 31%"><div class="person-head"></div><div class="person-neck"></div><div class="person-body"></div></div>
<img src="../../public/cards/team-card-front.png" alt="" class="tcard-front" />
<div class="tcard-banner red"><span>TIME DE</span></div><div class="tcard-banner blue"><span>MARIA</span></div>
<div class="photo-window-guide"></div><span class="edge-tick left"></span><span class="edge-tick right"></span><span class="face-dot" style="--face-x: 27%"></span>
<img
src="../../public/cards/team-card-base.png"
alt=""
class="tcard-base"
/>
<div class="person" style="--person-x: 31%">
<div class="person-head"></div>
<div class="person-neck"></div>
<div class="person-body"></div>
</div>
<img
src="../../public/cards/team-card-front.png"
alt=""
class="tcard-front"
/>
<div class="tcard-banner red"><span>TIME DE</span></div>
<div class="tcard-banner blue"><span>MARIA</span></div>
<div class="photo-window-guide"></div>
<span class="edge-tick left"></span><span class="edge-tick right"></span
><span class="face-dot" style="--face-x: 27%"></span>
</div>
</div>
<figcaption class="mt-2 text-center text-[10px] font-black text-teal-800">MÁX. ESQUERDA</figcaption>
<figcaption class="mt-2 text-center text-[10px] font-black text-teal-800">
MÁX. ESQUERDA
</figcaption>
</figure>
<figure class="m-0">
<div class="mx-auto w-full max-w-[158px] overflow-hidden rounded-lg border-2 border-[var(--pt-red)] shadow-sm">
<div
class="mx-auto w-full max-w-[158px] overflow-hidden rounded-lg border-2 border-[var(--pt-red)] shadow-sm"
>
<div class="tcard">
<img src="../../public/cards/team-card-base.png" alt="" class="tcard-base" />
<div class="person" style="--person-x: 54%"><div class="person-head"></div><div class="person-neck"></div><div class="person-body"></div></div>
<img src="../../public/cards/team-card-front.png" alt="" class="tcard-front" />
<div class="tcard-banner red"><span>TIME DE</span></div><div class="tcard-banner blue"><span>MARIA</span></div>
<div class="photo-window-guide"></div><span class="edge-tick left"></span><span class="edge-tick right"></span><span class="face-dot" style="--face-x: 54%"></span>
<img
src="../../public/cards/team-card-base.png"
alt=""
class="tcard-base"
/>
<div class="person" style="--person-x: 54%">
<div class="person-head"></div>
<div class="person-neck"></div>
<div class="person-body"></div>
</div>
<img
src="../../public/cards/team-card-front.png"
alt=""
class="tcard-front"
/>
<div class="tcard-banner red"><span>TIME DE</span></div>
<div class="tcard-banner blue"><span>MARIA</span></div>
<div class="photo-window-guide"></div>
<span class="edge-tick left"></span><span class="edge-tick right"></span
><span class="face-dot" style="--face-x: 54%"></span>
</div>
</div>
<figcaption class="mt-2 text-center text-[10px] font-black text-[var(--pt-red)]">AUTOMÁTICO</figcaption>
<figcaption
class="mt-2 text-center text-[10px] font-black text-[var(--pt-red)]"
>
AUTOMÁTICO
</figcaption>
</figure>
<figure class="m-0">
<div class="mx-auto w-full max-w-[158px] overflow-hidden rounded-lg border border-teal-700/30 shadow-sm">
<div
class="mx-auto w-full max-w-[158px] overflow-hidden rounded-lg border border-teal-700/30 shadow-sm"
>
<div class="tcard">
<img src="../../public/cards/team-card-base.png" alt="" class="tcard-base" />
<div class="person" style="--person-x: 77%"><div class="person-head"></div><div class="person-neck"></div><div class="person-body"></div></div>
<img src="../../public/cards/team-card-front.png" alt="" class="tcard-front" />
<div class="tcard-banner red"><span>TIME DE</span></div><div class="tcard-banner blue"><span>MARIA</span></div>
<div class="photo-window-guide"></div><span class="edge-tick left"></span><span class="edge-tick right"></span><span class="face-dot" style="--face-x: 81%"></span>
<img
src="../../public/cards/team-card-base.png"
alt=""
class="tcard-base"
/>
<div class="person" style="--person-x: 77%">
<div class="person-head"></div>
<div class="person-neck"></div>
<div class="person-body"></div>
</div>
<img
src="../../public/cards/team-card-front.png"
alt=""
class="tcard-front"
/>
<div class="tcard-banner red"><span>TIME DE</span></div>
<div class="tcard-banner blue"><span>MARIA</span></div>
<div class="photo-window-guide"></div>
<span class="edge-tick left"></span><span class="edge-tick right"></span
><span class="face-dot" style="--face-x: 81%"></span>
</div>
</div>
<figcaption class="mt-2 text-center text-[10px] font-black text-teal-800">MÁX. DIREITA</figcaption>
<figcaption class="mt-2 text-center text-[10px] font-black text-teal-800">
MÁX. DIREITA
</figcaption>
</figure>
</div>
<div class="mt-5 flex items-start gap-3 rounded-lg border border-teal-700/20 bg-white p-3">
<span class="mt-0.5 inline-flex size-5 shrink-0 items-center justify-center rounded-full bg-teal-700 text-xs font-black text-white">✓</span>
<div
class="mt-5 flex items-start gap-3 rounded-lg border border-teal-700/20 bg-white p-3"
>
<span
class="mt-0.5 inline-flex size-5 shrink-0 items-center justify-center rounded-full bg-teal-700 text-xs font-black text-white"
>✓</span
>
<p class="text-xs leading-5 text-teal-950/80">
No máximo à direita, o torso encosta/sobrepõe de leve o ombro vizinho. Os rostos oficiais continuam livres.
No máximo à direita, o torso encosta/sobrepõe de leve o ombro vizinho. Os rostos
oficiais continuam livres.
</p>
</div>
</aside>
<article role="dialog" aria-labelledby="desktop-title" class="overflow-hidden rounded-xl border border-black/10 bg-white shadow-xl">
<article
role="dialog"
aria-labelledby="desktop-title"
class="overflow-hidden rounded-xl border border-black/10 bg-white shadow-xl"
>
<header class="flex items-start gap-3 px-5 pt-5">
<div class="min-w-0 flex-1">
<p class="text-[10px] font-black tracking-[0.1em] text-[var(--pt-red)] uppercase">Time de você</p>
<h3 id="desktop-title" class="mt-1 text-xl font-black tracking-[-0.01em]">Confira seu card</h3>
<p class="mt-1 text-sm leading-5 text-[var(--campaign-muted)]">O recorte já foi centralizado. Se precisar, arraste a foto ou use os controles.</p>
<p
class="text-[10px] font-black tracking-[0.1em] text-[var(--pt-red)] uppercase"
>
Time de você
</p>
<h3 id="desktop-title" class="mt-1 text-xl font-black tracking-[-0.01em]">
Confira seu card
</h3>
<p class="mt-1 text-sm leading-5 text-[var(--campaign-muted)]">
O recorte já foi centralizado. Se precisar, arraste a foto ou use os
controles.
</p>
</div>
<button aria-label="Fechar" class="inline-flex size-11 shrink-0 items-center justify-center rounded-lg text-xl text-[var(--campaign-muted)]">×</button>
<button
aria-label="Fechar"
class="inline-flex size-11 shrink-0 items-center justify-center rounded-lg text-xl text-[var(--campaign-muted)]"
>
×
</button>
</header>
<div class="px-5 pt-4 pb-5">
<div class="relative mx-auto w-[240px] overflow-hidden rounded-lg border border-[var(--campaign-line)] shadow-sm" tabindex="0" aria-label="Ajuste da foto">
<div
class="relative mx-auto w-[240px] overflow-hidden rounded-lg border border-[var(--campaign-line)] shadow-sm"
tabindex="0"
aria-label="Ajuste da foto"
>
<div class="tcard">
<img src="../../public/cards/team-card-base.png" alt="" class="tcard-base" />
<div class="person" style="--person-x: 54%"><div class="person-head"></div><div class="person-neck"></div><div class="person-body"></div></div>
<img src="../../public/cards/team-card-front.png" alt="" class="tcard-front" />
<div class="tcard-banner red"><span>TIME DE</span></div><div class="tcard-banner blue"><span>MARIA</span></div>
<div class="person" style="--person-x: 54%">
<div class="person-head"></div>
<div class="person-neck"></div>
<div class="person-body"></div>
</div>
<img
src="../../public/cards/team-card-front.png"
alt=""
class="tcard-front"
/>
<div class="tcard-banner red"><span>TIME DE</span></div>
<div class="tcard-banner blue"><span>MARIA</span></div>
</div>
<span class="absolute right-2 bottom-2 z-10 rounded bg-black/70 px-2 py-1 text-[10px] font-bold text-white">Arraste para ajustar</span>
<span
class="absolute right-2 bottom-2 z-10 rounded bg-black/70 px-2 py-1 text-[10px] font-bold text-white"
>Arraste para ajustar</span
>
</div>
<div class="mt-5 flex items-center gap-3">
<label class="text-sm font-bold">Zoom</label>
<button aria-label="Diminuir zoom" class="control-button">−</button>
<input aria-label="Zoom" type="range" value="45" class="range h-11 min-w-0 flex-1" />
<input
aria-label="Zoom"
type="range"
value="45"
class="range h-11 min-w-0 flex-1"
/>
<button aria-label="Aumentar zoom" class="control-button">+</button>
</div>
<div class="mt-4">
<p class="text-sm font-bold">Ajuste fino</p>
<div class="mt-2 grid grid-cols-4 gap-2">
<button aria-label="Mover foto para a esquerda" class="control-button w-full">←</button><button aria-label="Mover foto para cima" class="control-button w-full">↑</button><button aria-label="Mover foto para baixo" class="control-button w-full">↓</button><button aria-label="Mover foto para a direita" class="control-button w-full">→</button>
<button aria-label="Mover foto para a esquerda" class="control-button w-full">
←</button
><button aria-label="Mover foto para cima" class="control-button w-full">
↑</button
><button aria-label="Mover foto para baixo" class="control-button w-full">
↓</button
><button aria-label="Mover foto para a direita" class="control-button w-full">
→
</button>
</div>
</div>
<button role="switch" aria-checked="true" class="mt-4 flex min-h-11 w-full items-start gap-3 rounded-lg border border-[var(--campaign-line)] bg-white p-3 text-left">
<span class="switch mt-1.5"></span><span><span class="block text-sm font-bold">Harmonizar cores</span><span class="mt-0.5 block text-xs leading-5 text-[var(--campaign-muted)]">Ajusta suavemente a foto para combinar com a arte.</span></span>
<button
role="switch"
aria-checked="true"
class="mt-4 flex min-h-11 w-full items-start gap-3 rounded-lg border border-[var(--campaign-line)] bg-white p-3 text-left"
>
<span class="switch mt-1.5"></span
><span
><span class="block text-sm font-bold">Harmonizar cores</span
><span class="mt-0.5 block text-xs leading-5 text-[var(--campaign-muted)]"
>Ajusta suavemente a foto para combinar com a arte.</span
></span
>
</button>
<button class="mt-3 inline-flex min-h-11 w-full items-center justify-center rounded-lg border-2 border-[var(--campaign-line)] bg-white px-5 text-sm font-extrabold text-[var(--pt-red)]">Trocar foto</button>
<p class="mt-3 text-xs leading-5 text-[var(--campaign-muted)]">Sua foto fica neste aparelho e não é enviada para nós.</p>
<button
class="mt-3 inline-flex min-h-11 w-full items-center justify-center rounded-lg border-2 border-[var(--campaign-line)] bg-white px-5 text-sm font-extrabold text-[var(--pt-red)]"
>
Trocar foto
</button>
<p class="mt-3 text-xs leading-5 text-[var(--campaign-muted)]">
Sua foto fica neste aparelho e não é enviada para nós.
</p>
</div>
<footer class="flex gap-3 border-t border-[var(--campaign-line)] px-5 py-4">
<button class="inline-flex min-h-11 flex-1 items-center justify-center rounded-lg border-2 border-[var(--campaign-line)] bg-white text-sm font-extrabold text-[var(--pt-red)]">Cancelar</button>
<button class="inline-flex min-h-11 flex-1 items-center justify-center rounded-lg bg-[var(--pt-red)] text-sm font-extrabold text-white">Criar meu card</button>
<button
class="inline-flex min-h-11 flex-1 items-center justify-center rounded-lg border-2 border-[var(--campaign-line)] bg-white text-sm font-extrabold text-[var(--pt-red)]"
>
Cancelar
</button>
<button
class="inline-flex min-h-11 flex-1 items-center justify-center rounded-lg bg-[var(--pt-red)] text-sm font-extrabold text-white"
>
Criar meu card
</button>
</footer>
</article>
</div>
@ -382,32 +567,169 @@
<!-- CENA 2 -->
<section class="mt-14">
<h2 class="text-xs font-black tracking-[0.12em] text-zinc-500 uppercase">Cena 2 · mobile 390 — drawer, dois extremos</h2>
<p class="mt-1 max-w-3xl text-xs leading-5 text-zinc-500">O drawer preserva o fluxo e todos os controles existentes. As duas miniaturas mostram os extremos da mesma prévia; a nota “Arraste para ajustar” permanece visível.</p>
<h2 class="text-xs font-black tracking-[0.12em] text-zinc-500 uppercase">
Cena 2 · mobile 390 — drawer, dois extremos
</h2>
<p class="mt-1 max-w-3xl text-xs leading-5 text-zinc-500">
O drawer preserva o fluxo e todos os controles existentes. As duas miniaturas mostram os
extremos da mesma prévia; a nota “Arraste para ajustar” permanece visível.
</p>
<div class="mt-4 grid gap-6 lg:grid-cols-[390px_1fr]">
<div class="relative h-[844px] w-[390px] max-w-full overflow-hidden rounded-[24px] border border-zinc-700 bg-[var(--campaign-cream)] text-black shadow-2xl">
<div
class="relative h-[844px] w-[390px] max-w-full overflow-hidden rounded-[24px] border border-zinc-700 bg-[var(--campaign-cream)] text-black shadow-2xl"
>
<div class="absolute inset-0 bg-black/50"></div>
<article role="dialog" aria-labelledby="mobile-title" class="absolute inset-x-0 bottom-0 max-h-[92%] overflow-hidden rounded-t-2xl bg-white">
<article
role="dialog"
aria-labelledby="mobile-title"
class="absolute inset-x-0 bottom-0 max-h-[92%] overflow-hidden rounded-t-2xl bg-white"
>
<div class="mx-auto mt-2 h-1.5 w-10 rounded-full bg-stone-300"></div>
<header class="flex items-start gap-3 px-5 pt-3">
<div class="min-w-0 flex-1"><p class="text-[10px] font-black tracking-[0.1em] text-[var(--pt-red)] uppercase">Time de você</p><h3 id="mobile-title" class="mt-1 text-lg leading-6 font-black">Confira seu card</h3><p class="mt-1 text-sm leading-5 text-[var(--campaign-muted)]">O recorte já foi centralizado. Se precisar, arraste a foto ou use os controles.</p></div>
<button aria-label="Fechar" class="inline-flex size-11 shrink-0 items-center justify-center rounded-lg text-xl text-[var(--campaign-muted)]">×</button>
<div class="min-w-0 flex-1">
<p class="text-[10px] font-black tracking-[0.1em] text-[var(--pt-red)] uppercase">
Time de você
</p>
<h3 id="mobile-title" class="mt-1 text-lg leading-6 font-black">
Confira seu card
</h3>
<p class="mt-1 text-sm leading-5 text-[var(--campaign-muted)]">
O recorte já foi centralizado. Se precisar, arraste a foto ou use os controles.
</p>
</div>
<button
aria-label="Fechar"
class="inline-flex size-11 shrink-0 items-center justify-center rounded-lg text-xl text-[var(--campaign-muted)]"
>
×
</button>
</header>
<div class="max-h-[590px] overflow-hidden px-5 pt-3 pb-4">
<div class="grid grid-cols-2 gap-3">
<figure class="m-0"><div class="relative mx-auto w-[155px] overflow-hidden rounded-lg border border-[var(--campaign-line)] shadow-sm"><div class="tcard"><img src="../../public/cards/team-card-base.png" alt="" class="tcard-base" /><div class="person" style="--person-x: 31%"><div class="person-head"></div><div class="person-neck"></div><div class="person-body"></div></div><img src="../../public/cards/team-card-front.png" alt="" class="tcard-front" /><div class="tcard-banner red"><span>TIME DE</span></div><div class="tcard-banner blue"><span>MARIA</span></div></div><span class="absolute right-1.5 bottom-1.5 z-10 rounded bg-black/70 px-1.5 py-1 text-[9px] font-bold text-white">Arraste para ajustar</span></div><figcaption class="mt-1.5 text-center text-[9px] font-black tracking-wide text-[var(--campaign-muted)] uppercase">Máx. esquerda</figcaption></figure>
<figure class="m-0"><div class="relative mx-auto w-[155px] overflow-hidden rounded-lg border border-[var(--campaign-line)] shadow-sm"><div class="tcard"><img src="../../public/cards/team-card-base.png" alt="" class="tcard-base" /><div class="person" style="--person-x: 77%"><div class="person-head"></div><div class="person-neck"></div><div class="person-body"></div></div><img src="../../public/cards/team-card-front.png" alt="" class="tcard-front" /><div class="tcard-banner red"><span>TIME DE</span></div><div class="tcard-banner blue"><span>MARIA</span></div></div><span class="absolute right-1.5 bottom-1.5 z-10 rounded bg-black/70 px-1.5 py-1 text-[9px] font-bold text-white">Arraste para ajustar</span></div><figcaption class="mt-1.5 text-center text-[9px] font-black tracking-wide text-[var(--campaign-muted)] uppercase">Máx. direita</figcaption></figure>
<figure class="m-0">
<div
class="relative mx-auto w-[155px] overflow-hidden rounded-lg border border-[var(--campaign-line)] shadow-sm"
>
<div class="tcard">
<img
src="../../public/cards/team-card-base.png"
alt=""
class="tcard-base"
/>
<div class="person" style="--person-x: 31%">
<div class="person-head"></div>
<div class="person-neck"></div>
<div class="person-body"></div>
</div>
<img
src="../../public/cards/team-card-front.png"
alt=""
class="tcard-front"
/>
<div class="tcard-banner red"><span>TIME DE</span></div>
<div class="tcard-banner blue"><span>MARIA</span></div>
</div>
<span
class="absolute right-1.5 bottom-1.5 z-10 rounded bg-black/70 px-1.5 py-1 text-[9px] font-bold text-white"
>Arraste para ajustar</span
>
</div>
<figcaption
class="mt-1.5 text-center text-[9px] font-black tracking-wide text-[var(--campaign-muted)] uppercase"
>
Máx. esquerda
</figcaption>
</figure>
<figure class="m-0">
<div
class="relative mx-auto w-[155px] overflow-hidden rounded-lg border border-[var(--campaign-line)] shadow-sm"
>
<div class="tcard">
<img
src="../../public/cards/team-card-base.png"
alt=""
class="tcard-base"
/>
<div class="person" style="--person-x: 77%">
<div class="person-head"></div>
<div class="person-neck"></div>
<div class="person-body"></div>
</div>
<img
src="../../public/cards/team-card-front.png"
alt=""
class="tcard-front"
/>
<div class="tcard-banner red"><span>TIME DE</span></div>
<div class="tcard-banner blue"><span>MARIA</span></div>
</div>
<span
class="absolute right-1.5 bottom-1.5 z-10 rounded bg-black/70 px-1.5 py-1 text-[9px] font-bold text-white"
>Arraste para ajustar</span
>
</div>
<figcaption
class="mt-1.5 text-center text-[9px] font-black tracking-wide text-[var(--campaign-muted)] uppercase"
>
Máx. direita
</figcaption>
</figure>
</div>
<div class="mt-3 flex items-center gap-3"><label class="text-sm font-bold">Zoom</label><button class="control-button">−</button><input aria-label="Zoom" type="range" value="45" class="range h-11 min-w-0 flex-1" /><button class="control-button">+</button></div>
<div class="mt-3"><p class="text-sm font-bold">Ajuste fino</p><div class="mt-2 grid grid-cols-4 gap-2"><button class="control-button w-full">←</button><button class="control-button w-full">↑</button><button class="control-button w-full">↓</button><button class="control-button w-full">→</button></div></div>
<button role="switch" aria-checked="true" class="mt-3 flex min-h-11 w-full items-start gap-3 rounded-lg border border-[var(--campaign-line)] bg-white p-3 text-left"><span class="switch mt-1.5"></span><span><span class="block text-sm font-bold">Harmonizar cores</span><span class="block text-xs leading-5 text-[var(--campaign-muted)]">Ajusta suavemente a foto para combinar com a arte.</span></span></button>
<button class="mt-3 inline-flex min-h-11 w-full items-center justify-center rounded-lg border-2 border-[var(--campaign-line)] bg-white text-sm font-extrabold text-[var(--pt-red)]">Trocar foto</button>
<div class="mt-3 flex items-center gap-3">
<label class="text-sm font-bold">Zoom</label
><button class="control-button">−</button
><input
aria-label="Zoom"
type="range"
value="45"
class="range h-11 min-w-0 flex-1"
/><button class="control-button">+</button>
</div>
<div class="mt-3">
<p class="text-sm font-bold">Ajuste fino</p>
<div class="mt-2 grid grid-cols-4 gap-2">
<button class="control-button w-full">←</button
><button class="control-button w-full">↑</button
><button class="control-button w-full">↓</button
><button class="control-button w-full">→</button>
</div>
</div>
<button
role="switch"
aria-checked="true"
class="mt-3 flex min-h-11 w-full items-start gap-3 rounded-lg border border-[var(--campaign-line)] bg-white p-3 text-left"
>
<span class="switch mt-1.5"></span
><span
><span class="block text-sm font-bold">Harmonizar cores</span
><span class="block text-xs leading-5 text-[var(--campaign-muted)]"
>Ajusta suavemente a foto para combinar com a arte.</span
></span
>
</button>
<button
class="mt-3 inline-flex min-h-11 w-full items-center justify-center rounded-lg border-2 border-[var(--campaign-line)] bg-white text-sm font-extrabold text-[var(--pt-red)]"
>
Trocar foto
</button>
</div>
<footer class="flex gap-3 border-t border-[var(--campaign-line)] px-5 py-4"><button class="min-h-11 flex-1 rounded-lg border-2 border-[var(--campaign-line)] bg-white text-sm font-extrabold text-[var(--pt-red)]">Cancelar</button><button class="min-h-11 flex-1 rounded-lg bg-[var(--pt-red)] text-sm font-extrabold text-white">Criar meu card</button></footer>
<footer class="flex gap-3 border-t border-[var(--campaign-line)] px-5 py-4">
<button
class="min-h-11 flex-1 rounded-lg border-2 border-[var(--campaign-line)] bg-white text-sm font-extrabold text-[var(--pt-red)]"
>
Cancelar</button
><button
class="min-h-11 flex-1 rounded-lg bg-[var(--pt-red)] text-sm font-extrabold text-white"
>
Criar meu card
</button>
</footer>
</article>
</div>
<div class="rounded-xl border border-zinc-700 bg-zinc-900 p-5 self-start">
<p class="text-[11px] font-black tracking-[0.12em] text-emerald-300 uppercase">O que muda no toque</p>
<p class="text-[11px] font-black tracking-[0.12em] text-emerald-300 uppercase">
O que muda no toque
</p>
<ul class="mt-3 list-disc space-y-2 pl-5 text-xs leading-5 text-zinc-300">
<li>O arrasto continua igual; apenas deixa de parar cedo demais.</li>
<li>As quatro setas e o teclado chegam ao mesmo envelope.</li>
@ -420,17 +742,65 @@
<!-- CENA 3 -->
<section class="mt-14">
<h2 class="text-xs font-black tracking-[0.12em] text-zinc-500 uppercase">Cena 3 · regra visual — documentação, não é UI nova</h2>
<h2 class="text-xs font-black tracking-[0.12em] text-zinc-500 uppercase">
Cena 3 · regra visual — documentação, não é UI nova
</h2>
<div class="mt-4 rounded-xl border border-zinc-700 bg-zinc-900 p-6">
<div class="flex items-center justify-between gap-4"><div><p class="text-[11px] font-black tracking-[0.12em] text-amber-300 uppercase">Anotação do gate · não portar para a tela</p><h3 class="mt-1 text-lg font-black">Rosto dentro da área livre; corpo pode ultrapassar</h3></div><span class="rounded-full border border-amber-400/40 bg-amber-400/10 px-3 py-2 text-[10px] font-black text-amber-300 uppercase">Não é UI nova</span></div>
<div class="flex items-center justify-between gap-4">
<div>
<p class="text-[11px] font-black tracking-[0.12em] text-amber-300 uppercase">
Anotação do gate · não portar para a tela
</p>
<h3 class="mt-1 text-lg font-black">
Rosto dentro da área livre; corpo pode ultrapassar
</h3>
</div>
<span
class="rounded-full border border-amber-400/40 bg-amber-400/10 px-3 py-2 text-[10px] font-black text-amber-300 uppercase"
>Não é UI nova</span
>
</div>
<div class="mt-6 grid gap-8 md:grid-cols-[280px_1fr]">
<div class="mx-auto w-[260px] overflow-hidden rounded-lg border border-zinc-600 shadow-xl">
<div class="tcard"><img src="../../public/cards/team-card-base.png" alt="" class="tcard-base" /><div class="person" style="--person-x: 68%"><div class="person-head"></div><div class="person-neck"></div><div class="person-body"></div></div><img src="../../public/cards/team-card-front.png" alt="" class="tcard-front" /><div class="tcard-banner red"><span>TIME DE</span></div><div class="tcard-banner blue"><span>MARIA</span></div><div class="photo-window-guide"></div><span class="face-dot" style="--face-x: 68%"></span></div>
<div
class="mx-auto w-[260px] overflow-hidden rounded-lg border border-zinc-600 shadow-xl"
>
<div class="tcard">
<img src="../../public/cards/team-card-base.png" alt="" class="tcard-base" />
<div class="person" style="--person-x: 68%">
<div class="person-head"></div>
<div class="person-neck"></div>
<div class="person-body"></div>
</div>
<img src="../../public/cards/team-card-front.png" alt="" class="tcard-front" />
<div class="tcard-banner red"><span>TIME DE</span></div>
<div class="tcard-banner blue"><span>MARIA</span></div>
<div class="photo-window-guide"></div>
<span class="face-dot" style="--face-x: 68%"></span>
</div>
</div>
<div class="grid gap-3 sm:grid-cols-2">
<div class="rounded-lg border border-emerald-400/30 bg-emerald-400/10 p-4"><p class="text-sm font-black text-emerald-300">Com rosto detectado</p><p class="mt-2 text-xs leading-5 text-zinc-300">A caixa do rosto é a âncora. Ela pode ocupar qualquer posição horizontal dentro da janela <strong class="text-white">x=286 · y=439 · w=592 · h=577</strong>. O corpo não é recortado por essa janela e pode avançar sobre os ombros.</p></div>
<div class="rounded-lg border border-sky-400/30 bg-sky-400/10 p-4"><p class="text-sm font-black text-sky-300">Sem rosto detectado</p><p class="mt-2 text-xs leading-5 text-zinc-300">A âncora passa a ser a silhueta visível. Vale o limite de hoje como piso: o alcance nunca fica pior e não aparece aviso, erro ou controle adicional.</p></div>
<div class="rounded-lg border border-red-400/30 bg-red-400/10 p-4 sm:col-span-2"><p class="text-sm font-black text-red-300">Barreira da composição</p><p class="mt-2 text-xs leading-5 text-zinc-300">O corpo pode tocar os vizinhos; os rostos dos candidatos não podem ser cobertos. Não é liberdade até as bordas do card e não muda a arte-mestre.</p></div>
<div class="rounded-lg border border-emerald-400/30 bg-emerald-400/10 p-4">
<p class="text-sm font-black text-emerald-300">Com rosto detectado</p>
<p class="mt-2 text-xs leading-5 text-zinc-300">
A caixa do rosto é a âncora. Ela pode ocupar qualquer posição horizontal dentro da
janela <strong class="text-white">x=286 · y=439 · w=592 · h=577</strong>. O corpo
não é recortado por essa janela e pode avançar sobre os ombros.
</p>
</div>
<div class="rounded-lg border border-sky-400/30 bg-sky-400/10 p-4">
<p class="text-sm font-black text-sky-300">Sem rosto detectado</p>
<p class="mt-2 text-xs leading-5 text-zinc-300">
A âncora passa a ser a silhueta visível. Vale o limite de hoje como piso: o
alcance nunca fica pior e não aparece aviso, erro ou controle adicional.
</p>
</div>
<div class="rounded-lg border border-red-400/30 bg-red-400/10 p-4 sm:col-span-2">
<p class="text-sm font-black text-red-300">Barreira da composição</p>
<p class="mt-2 text-xs leading-5 text-zinc-300">
O corpo pode tocar os vizinhos; os rostos dos candidatos não podem ser cobertos.
Não é liberdade até as bordas do card e não muda a arte-mestre.
</p>
</div>
</div>
</div>
</div>
@ -438,20 +808,88 @@
<!-- CENA 4 -->
<section class="mt-14">
<h2 class="text-xs font-black tracking-[0.12em] text-zinc-500 uppercase">Cena 4 · antes × depois — curso lateral mensurável</h2>
<div class="mt-4 rounded-xl border border-zinc-700 bg-[var(--campaign-cream)] p-6 text-black shadow-xl">
<h2 class="text-xs font-black tracking-[0.12em] text-zinc-500 uppercase">
Cena 4 · antes × depois — curso lateral mensurável
</h2>
<div
class="mt-4 rounded-xl border border-zinc-700 bg-[var(--campaign-cream)] p-6 text-black shadow-xl"
>
<div class="grid gap-7 md:grid-cols-2">
<article class="rounded-xl border border-black/10 bg-white p-5"><div class="flex items-center justify-between gap-3"><h3 class="text-base font-black">Antes · trava artificial</h3><span class="rounded-full bg-stone-200 px-3 py-1 text-[10px] font-black text-stone-600 uppercase">curso 248px</span></div><p class="mt-1 text-xs leading-5 text-[var(--campaign-muted)]">A foto inteira precisava permanecer presa à janela.</p><div class="track mt-5"><span class="span text-stone-500" style="left: 24.6%; width: 50.8%; background: currentColor"></span><span class="center"></span></div><div class="flex justify-between text-[10px] font-bold text-stone-500"><span>−124px</span><span>centro</span><span>+124px</span></div><p class="mt-4 rounded-lg bg-stone-100 p-3 text-xs leading-5 text-stone-600">Parte do gesto era consumida pelo espaço transparente ao redor da pessoa. O visitante via a foto parar antes do ponto desejado.</p></article>
<article class="rounded-xl border-2 border-teal-700 bg-white p-5"><div class="flex items-center justify-between gap-3"><h3 class="text-base font-black text-teal-900">Depois · rosto nas bordas</h3><span class="rounded-full bg-teal-700 px-3 py-1 text-[10px] font-black text-white uppercase">curso ≈488px</span></div><p class="mt-1 text-xs leading-5 text-[var(--campaign-muted)]">A posição responde à âncora do rosto, não ao canvas do recorte.</p><div class="track mt-5"><span class="span text-teal-700" style="left: 0; width: 100%; background: currentColor"></span><span class="center"></span></div><div class="flex justify-between text-[10px] font-bold text-teal-800"><span>≈−244px · borda</span><span>centro</span><span>≈+244px · borda</span></div><p class="mt-4 rounded-lg bg-teal-50 p-3 text-xs leading-5 text-teal-950/75">O automático abre no mesmo centro de hoje. Só quem ajusta percebe a diferença: aproximadamente o dobro do curso horizontal.</p></article>
<article class="rounded-xl border border-black/10 bg-white p-5">
<div class="flex items-center justify-between gap-3">
<h3 class="text-base font-black">Antes · trava artificial</h3>
<span
class="rounded-full bg-stone-200 px-3 py-1 text-[10px] font-black text-stone-600 uppercase"
>curso 248px</span
>
</div>
<p class="mt-1 text-xs leading-5 text-[var(--campaign-muted)]">
A foto inteira precisava permanecer presa à janela.
</p>
<div class="track mt-5">
<span
class="span text-stone-500"
style="left: 24.6%; width: 50.8%; background: currentColor"
></span
><span class="center"></span>
</div>
<div class="flex justify-between text-[10px] font-bold text-stone-500">
<span>−124px</span><span>centro</span><span>+124px</span>
</div>
<p class="mt-4 rounded-lg bg-stone-100 p-3 text-xs leading-5 text-stone-600">
Parte do gesto era consumida pelo espaço transparente ao redor da pessoa. O
visitante via a foto parar antes do ponto desejado.
</p>
</article>
<article class="rounded-xl border-2 border-teal-700 bg-white p-5">
<div class="flex items-center justify-between gap-3">
<h3 class="text-base font-black text-teal-900">Depois · rosto nas bordas</h3>
<span
class="rounded-full bg-teal-700 px-3 py-1 text-[10px] font-black text-white uppercase"
>curso ≈488px</span
>
</div>
<p class="mt-1 text-xs leading-5 text-[var(--campaign-muted)]">
A posição responde à âncora do rosto, não ao canvas do recorte.
</p>
<div class="track mt-5">
<span
class="span text-teal-700"
style="left: 0; width: 100%; background: currentColor"
></span
><span class="center"></span>
</div>
<div class="flex justify-between text-[10px] font-bold text-teal-800">
<span>≈−244px · borda</span><span>centro</span><span>≈+244px · borda</span>
</div>
<p class="mt-4 rounded-lg bg-teal-50 p-3 text-xs leading-5 text-teal-950/75">
O automático abre no mesmo centro de hoje. Só quem ajusta percebe a diferença:
aproximadamente o dobro do curso horizontal.
</p>
</article>
</div>
</div>
</section>
<aside class="mt-14 border-t border-zinc-800 pt-8 text-xs leading-5 text-zinc-500">
<p><strong class="text-zinc-300">Design tier:</strong> openai/gpt-5.6-sol (frontier). Decisão final continua no gate humano.</p>
<p class="mt-2"><strong class="text-zinc-300">Ativos:</strong> arte oficial existente em <code>team-card-base.png</code> e <code>team-card-front.png</code>; a silhueta é deliberadamente abstrata e não representa uma pessoa real.</p>
<p class="mt-2"><strong class="text-zinc-300">NEEDS ASSET:</strong> nenhum. Não é necessária foto real para aprovar a geometria; a validação humana de implementação pode usar foto local sem entrar no artefato.</p>
<p class="mt-2"><strong class="text-zinc-300">Intocados:</strong> banners, texto, zoom, setas, teclado, harmonização, troca de foto, privacidade e CTA.</p>
<p>
<strong class="text-zinc-300">Design tier:</strong> openai/gpt-5.6-sol (frontier). Decisão
final continua no gate humano.
</p>
<p class="mt-2">
<strong class="text-zinc-300">Ativos:</strong> arte oficial existente em
<code>team-card-base.png</code> e <code>team-card-front.png</code>; a silhueta é
deliberadamente abstrata e não representa uma pessoa real.
</p>
<p class="mt-2">
<strong class="text-zinc-300">NEEDS ASSET:</strong> nenhum. Não é necessária foto real
para aprovar a geometria; a validação humana de implementação pode usar foto local sem
entrar no artefato.
</p>
<p class="mt-2">
<strong class="text-zinc-300">Intocados:</strong> banners, texto, zoom, setas, teclado,
harmonização, troca de foto, privacidade e CTA.
</p>
</aside>
</main>
</body>

View file

@ -45,7 +45,7 @@ O enquadramento automático da S18 está certo e fica: a proporção da cabeça
- **Vou apresentar dados?** Não — nenhuma métrica de produto entra nesta tela.
- **Decisões desbloqueadas:** nenhuma — a medida de posição é geometria efêmera no aparelho, não vira dado de campanha.
- **Forma:** *adiada ao plano de implementação* — restrição de produto: nada de telemetria de foto/posição; a privacidade do funil fica como está.
- **Forma:** _adiada ao plano de implementação_ — restrição de produto: nada de telemetria de foto/posição; a privacidade do funil fica como está.
## Dados da decisão (literais)