From d0823043ed49b06a291c4b3f9ad1bef64741fda9 Mon Sep 17 00:00:00 2001 From: Francisco Solla Date: Thu, 24 Sep 2026 00:26:12 -0300 Subject: [PATCH] style(S33,S34,S35): formata os designs hi-fi dos planos --- .../cards-colinha-arte-exata-ui-design.html | 577 +++++++++++++++--- .../cards-header-modal-largura-ui-design.html | 339 ++++++++-- ...ards-time-ajuste-sem-limite-ui-design.html | 509 ++++++++++++--- 3 files changed, 1215 insertions(+), 210 deletions(-) diff --git a/docs/plans/cards-colinha-arte-exata-ui-design.html b/docs/plans/cards-colinha-arte-exata-ui-design.html index 799ea2bb..07ed5173 100644 --- a/docs/plans/cards-colinha-arte-exata-ui-design.html +++ b/docs/plans/cards-colinha-arte-exata-ui-design.html @@ -7,133 +7,574 @@ Design S34 · Colinha com a arte exata -
Design tier: openai/gpt-5.6-sol · frontier · gate humano obrigatório
+
+ Design tier: openai/gpt-5.6-sol · frontier · gate humano obrigatório +

Gate visual · S34

-

A colinha é a arte entregue — não uma recriação

-

A imagem 900×1600 permanece inteira e intocada. Sem estadual, ela aparece exatamente como foi entregue. Com JULIO PINHEIRO 13999, somente a segunda linha recebe nome e dígitos. O gate escolhe entre A e B.

-
arte exata · 900×1600saída · 1080×1920desktop 1280 + mobile 390NEEDS ASSET (fonte)
+

+ A colinha é a arte entregue — não uma recriação +

+

+ A imagem 900×1600 permanece inteira e intocada. Sem estadual, ela aparece exatamente como + foi entregue. Com JULIO PINHEIRO 13999, somente a segunda linha recebe nome e dígitos. O + gate escolhe entre A e B. +

+
+ arte exata · 900×1600saída · 1080×1920desktop 1280 + mobile 390NEEDS ASSET (fonte) +
-

Cena 01 · desktop 1280 × 850 · vazio

+

+ Cena 01 · desktop 1280 × 850 · vazio +

A arte como está · CTA desabilitado

-

Caixas vazias e o selo CONFIRMA pleno já pertencem ao JPEG. Nenhum pixel é acrescentado no estado vazio.

-
-
-

Cena 02 · mobile 390 × 844 · vazio

+

+ Cena 02 · mobile 390 × 844 · vazio +

Drawer · arte inteira, sem preenchimento

-
-

Minha colinha

Escolha seu estadual

-
Colinha oficial vazia

Escolha um estadual para baixar.A linha vazia será preenchida com o nome e os cinco dígitos.

-
+
+
+
+
+ +
+
+
+

Minha colinha

+

Escolha seu estadual

+
+ +
+
+
+
+ Colinha oficial vazia +
+
+ +

+ Escolha um estadual para baixar.A linha + vazia será preenchida com o nome e os cinco dígitos. +

+
+
+ +
-

Cena 03 · opção A recomendada · desktop 1280

+

+ Cena 03 · opção A recomendada · desktop 1280 +

Linha no mesmo idioma visual das linhas fixas

-

A base continua sendo o JPEG. Na faixa branca da segunda linha, o rótulo é reposto à esquerda e JULIO PINHEIRO entra à direita; os cinco dígitos pousam nas caixas existentes.

-
-
Colinha oficial preenchida com Julio Pinheiro 13999DEPUTADO ESTADUALJULIO PINHEIRO13999
-

Minha colinha · opção A

Pronta para levar com você

Confira o estadual escolhido. As demais escolhas já vêm preenchidas na imagem oficial — sem retexto, sem novo topo e sem novos selos.

Linha conferida

DEPUTADO ESTADUAL · JULIO PINHEIRO · 13999

A escolha é processada neste aparelho. Nenhum nome, foto ou cadastro é solicitado.

+

+ A base continua sendo o JPEG. Na faixa branca da segunda linha, o rótulo é reposto à + esquerda e JULIO PINHEIRO entra à direita; os cinco dígitos pousam nas caixas existentes. +

+
+
+
+ Colinha oficial preenchida com Julio Pinheiro 13999DEPUTADO ESTADUALJULIO PINHEIRO13999 +
+
+
+

+ Minha colinha · opção A +

+

Pronta para levar com você

+

+ Confira o estadual escolhido. As demais escolhas já vêm preenchidas na imagem oficial + — sem retexto, sem novo topo e sem novos selos. +

+ +
+

Linha conferida

+

+ DEPUTADO ESTADUAL · JULIO PINHEIRO · 13999 +

+
+ +

+ A escolha é processada neste aparelho. Nenhum nome, foto ou cadastro é solicitado. +

+
-

Cena 04 · opção A · mobile 390 × 844

+

+ Cena 04 · opção A · mobile 390 × 844 +

Preenchida e pronta para baixar

-

Minha colinha

Pronta para baixar

Colinha oficial preenchida com Julio Pinheiro 13999DEPUTADO ESTADUALJULIO PINHEIRO13999

Linha conferida

DEPUTADO ESTADUAL · JULIO PINHEIRO · 13999

+
+
+
+
+ +
+
+
+

Minha colinha

+

Pronta para baixar

+
+ +
+
+
+
+ Colinha oficial preenchida com Julio Pinheiro 13999DEPUTADO ESTADUALJULIO PINHEIRO13999 +
+
+ +
+

Linha conferida

+

+ DEPUTADO ESTADUAL · JULIO PINHEIRO · 13999 +

+
+
+
+ +
+
+
-

Cena 05 · escolha do gate · A × B

+

+ Cena 05 · escolha do gate · A × B +

Duas leituras para a única linha nova

-

Recomendação: A. A variante B conserva o rótulo original, mas força a leitura “JULIO PINHEIRO DEPUTADO ESTADUAL”.

+

+ Recomendação: A. A variante B conserva o rótulo original, mas força a leitura “JULIO + PINHEIRO DEPUTADO ESTADUAL”. +

-

Opção A · recomendada

Rótulo à esquerda + nome à direita

RECOMENDADA
Opção ADEPUTADO ESTADUALJULIO PINHEIRO13999

Repete a sintaxe de “DEPUTADO FEDERAL Jorge Solla” e das demais linhas: cargo primeiro, nome em vermelho depois.

-

Variante B · secundária

Nome no vão à esquerda do rótulo original

Variante BJULIO PINHEIRO13999

Preserva cada pixel do rótulo já impresso, porém inverte a ordem visual e aperta o nome.

+
+
+
+

+ Opção A · recomendada +

+

Rótulo à esquerda + nome à direita

+
+ RECOMENDADA +
+
+
+ Opção ADEPUTADO ESTADUALJULIO PINHEIRO13999 +
+
+

+ Repete a sintaxe de “DEPUTADO FEDERAL Jorge Solla” e das demais linhas: cargo + primeiro, nome em vermelho depois. +

+
+
+
+

Variante B · secundária

+

Nome no vão à esquerda do rótulo original

+
+
+
+ Variante BJULIO PINHEIRO13999 +
+
+

+ Preserva cada pixel do rótulo já impresso, porém inverte a ordem visual e aperta o + nome. +

+
-

Cena 06 · detalhe tipográfico · conferência

+

+ Cena 06 · detalhe tipográfico · conferência +

Linha fixa da arte × linha preenchida

-

O alvo é equivalência de cor, peso, tamanho e linha de base — não uma aproximação “parecida”. A face pesada exata não está disponível no navegador deste artefato.

+

+ O alvo é equivalência de cor, peso, tamanho e linha de base — não uma aproximação + “parecida”. A face pesada exata não está disponível no navegador deste artefato. +

-
Referência fixa · pixels do JPEG
Linha fixa Deputado Federal Jorge Solla

DEPUTADO FEDERAL · Jorge Solla · 1313

-
Alvo novo · opção ANEEDS ASSET (fonte)
Linha preenchida Deputado Estadual Julio PinheiroDEPUTADO ESTADUALJULIO PINHEIRO13999

DEPUTADO ESTADUAL · JULIO PINHEIRO · 13999

+
+
+ Referência fixa · pixels do JPEG +
+
+ Linha fixa Deputado Federal Jorge Solla +
+

DEPUTADO FEDERAL · Jorge Solla · 1313

+
+
+
+ Alvo novo · opção ANEEDS ASSET (fonte) +
+
+
+ Linha preenchida Deputado Estadual Julio PinheiroDEPUTADO ESTADUALJULIO PINHEIRO13999 +
+
+

DEPUTADO ESTADUAL · JULIO PINHEIRO · 13999

+
diff --git a/docs/plans/cards-header-modal-largura-ui-design.html b/docs/plans/cards-header-modal-largura-ui-design.html index 84f7b8ba..a1652e58 100644 --- a/docs/plans/cards-header-modal-largura-ui-design.html +++ b/docs/plans/cards-header-modal-largura-ui-design.html @@ -18,78 +18,241 @@ --field-border: rgb(0 0 0 / 18%); --gate: #0f766e; } - * { box-sizing: border-box; } - body { margin: 0; font-family: Arial, Helvetica, sans-serif; } - button { font: inherit; } - button:focus-visible { outline: 2px solid var(--pt-red); outline-offset: 2px; } - .stage-shadow { box-shadow: 0 26px 80px rgb(0 0 0 / 32%); } - .primary, .secondary { - display: inline-flex; min-height: 44px; flex: 1; align-items: center; justify-content: center; - border-radius: 8px; padding: 0 16px; font-size: 14px; font-weight: 800; + * { + box-sizing: border-box; } - .primary { border: 0; background: var(--pt-red); color: white; } - .secondary { border: 2px solid var(--campaign-line); background: white; color: var(--pt-red); } - .measure-line { position: absolute; height: 2px; background: var(--gate); pointer-events: none; } - .measure-line::before, .measure-line::after { - content: ''; position: absolute; top: -4px; width: 2px; height: 10px; background: var(--gate); + body { + margin: 0; + font-family: Arial, Helvetica, sans-serif; + } + button { + font: inherit; + } + button:focus-visible { + outline: 2px solid var(--pt-red); + outline-offset: 2px; + } + .stage-shadow { + box-shadow: 0 26px 80px rgb(0 0 0 / 32%); + } + .primary, + .secondary { + display: inline-flex; + min-height: 44px; + flex: 1; + align-items: center; + justify-content: center; + border-radius: 8px; + padding: 0 16px; + font-size: 14px; + font-weight: 800; + } + .primary { + border: 0; + background: var(--pt-red); + color: white; + } + .secondary { + border: 2px solid var(--campaign-line); + background: white; + color: var(--pt-red); + } + .measure-line { + position: absolute; + height: 2px; + background: var(--gate); + pointer-events: none; + } + .measure-line::before, + .measure-line::after { + content: ''; + position: absolute; + top: -4px; + width: 2px; + height: 10px; + background: var(--gate); + } + .measure-line::before { + left: 0; + } + .measure-line::after { + right: 0; } - .measure-line::before { left: 0; } .measure-line::after { right: 0; } -
+
Design tier: openai/gpt-5.6-sol · frontier · gate humano obrigatório

Gate visual · S35

-

O header volta a pertencer ao modal inteiro

+

+ O header volta a pertencer ao modal inteiro +

- Correção de fidelidade: no dialog desktop, a coluna de título ocupa toda a largura disponível e o × encosta na borda direita do conteúdo. Copy, tipografia, hierarquia, prévia e ações permanecem exatamente no idioma já aprovado. + Correção de fidelidade: no dialog desktop, a coluna de título ocupa toda a largura + disponível e o × encosta na borda direita do conteúdo. Copy, tipografia, hierarquia, + prévia e ações permanecem exatamente no idioma já aprovado.

- 1280px · antes × depois - 390px · referência inalterada - Paridade com o gate aprovado + 1280px · antes × depois + 390px · referência inalterada + Paridade com o gate aprovado
-

Cena 01 · desktop 1280 × 800

-

Mesmo modal, mesma prévia — só a largura do header muda

-

Contornos e medidas verdes são anotações do gate; não entram na interface.

-
+

+ Cena 01 · desktop 1280 × 800 +

+

+ Mesmo modal, mesma prévia — só a largura do header muda +

+

+ Contornos e medidas verdes são anotações do gate; não entram na interface. +

+
-

Antes · cluster estreito à esquerda

Quebrado
-
-

Depois · header de ponta a ponta

Alvo aprovado
-
@@ -97,44 +260,102 @@
-

Cena 02 · mobile 390 × 844

+

+ Cena 02 · mobile 390 × 844 +

Drawer · referência já correta, sem mudança

-

No celular, título e fechar já ocupam as extremidades do drawer. Esta cena documenta paridade, não propõe ajuste.

+

+ No celular, título e fechar já ocupam as extremidades do drawer. Esta cena documenta + paridade, não propõe ajuste. +

-
+
-
-

Anotação do gate · não portar para a tela

+

+ Anotação do gate · não portar para a tela +

Alvo literal

-

O bloco de texto permanece à esquerda e usa o espaço necessário; o × permanece isolado no extremo direito. O eixo visual do header coincide com a largura do conteúdo e do card abaixo — exatamente como nos dialogs aprovados de “Time de você”, “Time do estadual” e “Minha colinha”.

+

+ O bloco de texto permanece à esquerda e usa o espaço necessário; o × permanece isolado no + extremo direito. O eixo visual do header coincide com a largura do conteúdo e do card + abaixo — exatamente como nos dialogs aprovados de “Time de você”, “Time do estadual” e + “Minha colinha”. +

diff --git a/docs/plans/cards-time-ajuste-sem-limite-ui-design.html b/docs/plans/cards-time-ajuste-sem-limite-ui-design.html index 448b76e8..70937456 100644 --- a/docs/plans/cards-time-ajuste-sem-limite-ui-design.html +++ b/docs/plans/cards-time-ajuste-sem-limite-ui-design.html @@ -19,174 +19,517 @@ --team-blue: #0061a5; --gate: #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 { - outline: 2px solid var(--pt-red); outline-offset: 2px; + * { + 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; + } + .stage-shadow { + box-shadow: 0 26px 80px rgb(0 0 0 / 32%); } - .stage-shadow { box-shadow: 0 26px 80px rgb(0 0 0 / 32%); } .team-card { - position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #0b8fc3; + position: relative; + aspect-ratio: 3 / 4; + overflow: hidden; + background: #0b8fc3; + } + .team-card > img { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + object-fit: cover; + } + .team-photo { + z-index: 1; + } + .team-overlay { + z-index: 4; } - .team-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } - .team-photo { z-index: 1; } - .team-overlay { z-index: 4; } .silhouette { - position: absolute; z-index: 2; top: var(--y, 29%); left: var(--x, 54%); - width: 36%; height: 45%; transform: translate(-50%, -10%); color: #061d40; + position: absolute; + z-index: 2; + top: var(--y, 29%); + left: var(--x, 54%); + width: 36%; + height: 45%; + transform: translate(-50%, -10%); + color: #061d40; filter: drop-shadow(0 2px 2px rgb(0 0 0 / 18%)); } .silhouette::before { - content: ''; position: absolute; top: 0; left: 50%; width: 36%; aspect-ratio: .82; - transform: translateX(-50%); border-radius: 48% 48% 45% 45%; background: currentColor; + content: ''; + position: absolute; + top: 0; + left: 50%; + width: 36%; + aspect-ratio: 0.82; + transform: translateX(-50%); + border-radius: 48% 48% 45% 45%; + background: currentColor; } .silhouette::after { - content: ''; position: absolute; right: 0; bottom: 0; left: 0; height: 77%; - border-radius: 49% 49% 8% 8% / 30% 30% 6% 6%; background: currentColor; + content: ''; + position: absolute; + right: 0; + bottom: 0; + left: 0; + height: 77%; + border-radius: 49% 49% 8% 8% / 30% 30% 6% 6%; + background: currentColor; } .drag-badge { - position: absolute; right: 8px; bottom: 8px; z-index: 8; border-radius: 4px; - background: rgb(0 0 0 / 72%); padding: 4px 7px; color: #fff; font-size: 9px; font-weight: 700; + position: absolute; + right: 8px; + bottom: 8px; + z-index: 8; + border-radius: 4px; + background: rgb(0 0 0 / 72%); + padding: 4px 7px; + color: #fff; + font-size: 9px; + font-weight: 700; } .gate-vector { - position: absolute; z-index: 9; border-top: 2px dashed rgb(15 118 110 / 90%); - transform-origin: left center; pointer-events: none; + position: absolute; + z-index: 9; + border-top: 2px dashed rgb(15 118 110 / 90%); + transform-origin: left center; + pointer-events: none; } .gate-vector::after { - content: ''; position: absolute; top: -5px; right: -1px; width: 8px; height: 8px; - border-top: 2px solid var(--gate); border-right: 2px solid var(--gate); transform: rotate(45deg); + content: ''; + position: absolute; + top: -5px; + right: -1px; + width: 8px; + height: 8px; + border-top: 2px solid var(--gate); + border-right: 2px solid var(--gate); + transform: rotate(45deg); } .control-button { - display: inline-flex; width: 44px; height: 44px; flex: none; align-items: center; - justify-content: center; border: 1px solid var(--campaign-line); border-radius: 8px; - background: #fff; color: var(--campaign-ink); font-size: 17px; + display: inline-flex; + width: 44px; + height: 44px; + flex: none; + align-items: center; + justify-content: center; + border: 1px solid var(--campaign-line); + border-radius: 8px; + background: #fff; + color: var(--campaign-ink); + font-size: 17px; } .range { - appearance: none; height: 4px; min-width: 0; border-radius: 999px; + appearance: none; + height: 4px; + min-width: 0; + border-radius: 999px; background: linear-gradient(90deg, var(--pt-red) 0 46%, #d6d3d1 46% 100%); } .range::-webkit-slider-thumb { - appearance: none; width: 20px; height: 20px; border: 3px solid #fff; border-radius: 999px; - background: var(--pt-red); box-shadow: 0 0 0 1px rgb(0 0 0 / 18%); + appearance: none; + width: 20px; + height: 20px; + border: 3px solid #fff; + border-radius: 999px; + background: var(--pt-red); + box-shadow: 0 0 0 1px rgb(0 0 0 / 18%); } - .primary, .secondary { - display: inline-flex; min-height: 44px; flex: 1; align-items: center; justify-content: center; - border-radius: 8px; padding: 0 20px; font-size: 14px; font-weight: 800; + .primary, + .secondary { + display: inline-flex; + min-height: 44px; + flex: 1; + align-items: center; + justify-content: center; + border-radius: 8px; + padding: 0 20px; + font-size: 14px; + font-weight: 800; + } + .primary { + border: 0; + background: var(--pt-red); + color: #fff; + } + .secondary { + border: 2px solid var(--campaign-line); + background: #fff; + color: var(--pt-red); + } + .switch { + position: relative; + width: 44px; + height: 26px; + flex: none; + border-radius: 999px; + background: var(--pt-red); } - .primary { border: 0; background: var(--pt-red); color: #fff; } - .secondary { border: 2px solid var(--campaign-line); background: #fff; color: var(--pt-red); } - .switch { position: relative; width: 44px; height: 26px; flex: none; border-radius: 999px; background: var(--pt-red); } .switch::after { - content: ''; position: absolute; top: 3px; left: 21px; width: 20px; height: 20px; - border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 25%); + content: ''; + position: absolute; + top: 3px; + left: 21px; + width: 20px; + height: 20px; + border-radius: 999px; + background: #fff; + box-shadow: 0 1px 2px rgb(0 0 0 / 25%); } -
+
Design tier: openai/gpt-5.6-sol · frontier · gate humano obrigatório
-

Gate visual · S33 · decisão revisada em 24/09/2026

-

A foto vai a qualquer ponto — inclusive para fora

+

+ Gate visual · S33 · decisão revisada em 24/09/2026 +

+

+ A foto vai a qualquer ponto — inclusive para fora +

- O enquadramento automático S15 continua sendo o ponto de partida. Depois dele, arrastar, setas e teclado deixam a posição livre nos dois eixos. A pessoa pode esconder parte ou toda a própria foto e revelar a arte do time ao fundo; para voltar, arrasta de volta na mesma área ativa. + O enquadramento automático S15 continua sendo o ponto de partida. Depois dele, arrastar, + setas e teclado deixam a posição livre nos dois eixos. A pessoa pode esconder parte ou + toda a própria foto e revelar a arte do time ao fundo; para voltar, arrasta de volta na + mesma área ativa.

- 1280px · dialog - 390px · drawer - X + Y: sem limite - Zoom [1,4] · inalterado + 1280px · dialog + 390px · drawer + X + Y: sem limite + Zoom [1,4] · inalterado
-

Cena 01 · desktop 1280 × 800

+

+ Cena 01 · desktop 1280 × 800 +

Dialog de ajuste · do limite atual à posição livre

-

Setas tracejadas, rótulos e silhueta são anotações do gate. O compositor não ganha controles nem copy.

-
+

+ Setas tracejadas, rótulos e silhueta são anotações do gate. O compositor não ganha + controles nem copy. +

+
-
-

Cena 02 · mobile 390 × 844

+

+ Cena 02 · mobile 390 × 844 +

Drawer · foto totalmente fora, área ainda ativa

-

A prévia mostra a escolha extrema permitida: só a arte do time fica visível. O quadro inteiro continua sendo a área de arrasto para trazer a foto de volta.

+

+ A prévia mostra a escolha extrema permitida: só a arte do time fica visível. O quadro + inteiro continua sendo a área de arrasto para trazer a foto de volta. +

-
+
-
-

Anotação do gate · não portar para a tela

+

+ Anotação do gate · não portar para a tela +

O que muda — e o que não muda

-

Posição

Sem clamp em X ou Y. Pode passar da janela, ficar parcialmente fora ou desaparecer por completo do quadro.

-

Todo o resto

S15 como início; zoom na faixa [1,4]; mesmos controles, copy e área de arrasto; nenhuma telemetria.

+
+

Posição

+

+ Sem clamp em X ou Y. Pode passar da janela, ficar parcialmente fora ou desaparecer por + completo do quadro. +

+
+
+

Todo o resto

+

+ S15 como início; zoom na faixa [1,4]; mesmos controles, copy e área de arrasto; + nenhuma telemetria. +

+