From 9d2be30ef2fe449d65f0134595344ba4aeb34b20 Mon Sep 17 00:00:00 2001 From: Francisco Solla Date: Sun, 20 Sep 2026 20:32:31 -0300 Subject: [PATCH] style(S23,S24): formata designs hi-fi com prettier (Related #1234 #1235) --- ...-time-de-voce-drawer-mobile-ui-design.html | 321 ++++++++++--- docs/plans/radio-embed-direto-ui-design.html | 440 ++++++++++++++++-- 2 files changed, 649 insertions(+), 112 deletions(-) diff --git a/docs/plans/cards-time-de-voce-drawer-mobile-ui-design.html b/docs/plans/cards-time-de-voce-drawer-mobile-ui-design.html index 4f9ec2ff..126ee9a8 100644 --- a/docs/plans/cards-time-de-voce-drawer-mobile-ui-design.html +++ b/docs/plans/cards-time-de-voce-drawer-mobile-ui-design.html @@ -23,18 +23,41 @@ --font-arimo: Arimo, Arial, sans-serif; } - * { box-sizing: border-box; } - html { color-scheme: light; } - body { margin: 0; font-family: var(--font-arimo); } - button, input { font: inherit; } - button { cursor: pointer; } - button:focus-visible, input:focus-visible, [tabindex]:focus-visible { + * { + box-sizing: border-box; + } + html { + color-scheme: light; + } + body { + margin: 0; + font-family: var(--font-arimo); + } + button, + input { + font: inherit; + } + button { + cursor: pointer; + } + button:focus-visible, + input:focus-visible, + [tabindex]:focus-visible { outline: 2px solid var(--pt-red); outline-offset: 2px; } - .font-display { font-family: var(--font-exo2); } - .stage-shadow { box-shadow: 0 26px 80px rgb(0 0 0 / 32%); } - .mobile-screen { width: 390px; height: 844px; overflow: hidden; background: #fff; } + .font-display { + font-family: var(--font-exo2); + } + .stage-shadow { + box-shadow: 0 26px 80px rgb(0 0 0 / 32%); + } + .mobile-screen { + width: 390px; + height: 844px; + overflow: hidden; + background: #fff; + } .drawer-full { position: absolute; inset: 0; @@ -47,7 +70,12 @@ background: var(--background); color: var(--foreground); } - .swipe-handle { width: 96px; height: 4px; border-radius: 999px; background: #ebe9e9; } + .swipe-handle { + width: 96px; + height: 4px; + border-radius: 999px; + background: #ebe9e9; + } .control-button { display: inline-flex; width: 44px; @@ -113,7 +141,8 @@ background: white; box-shadow: 0 1px 2px rgb(0 0 0 / 25%); } - .primary-button, .secondary-button { + .primary-button, + .secondary-button { display: inline-flex; min-height: 44px; flex: 1; @@ -124,54 +153,96 @@ font-size: 14px; font-weight: 800; } - .primary-button { border: 0; background: var(--pt-red); color: white; } + .primary-button { + border: 0; + background: var(--pt-red); + color: white; + } .secondary-button { border: 2px solid var(--campaign-line); background: white; color: var(--pt-red); } - .gate-dash { background-image: linear-gradient(90deg, #a21c1c 50%, transparent 50%); background-size: 8px 1px; } + .gate-dash { + background-image: linear-gradient(90deg, #a21c1c 50%, transparent 50%); + background-size: 8px 1px; + } -
+
Design tier: openai/gpt-5.6-sol · frontier · gate humano obrigatório
-

Gate visual · S23

-

Ajuste fino sem vaivém no celular

+

+ Gate visual · S23 +

+

+ Ajuste fino sem vaivém no celular +

- Alvo do port: no mobile de 390px, o drawer do estúdio ocupa toda a viewport, respeitando a safe-area. O aviso abre a área rolável e sai de cena ao descer; nada fica sobre a prévia. Zoom e setas continuam no mesmo fluxo. O shell do dialog desktop mantém sua geometria. + Alvo do port: no mobile de 390px, o drawer do estúdio ocupa toda a viewport, respeitando a + safe-area. O aviso abre a área rolável e sai de cena ao descer; nada fica sobre a prévia. + Zoom e setas continuam no mesmo fluxo. O shell do dialog desktop mantém sua geometria.

- 390px · alvo do port - 1280px · conferência de escopo - Conteúdo da prévia · NEEDS ASSET + 390px · alvo do port + 1280px · conferência de escopo + Conteúdo da prévia · NEEDS ASSET
-

Cena 01 · mobile 390 × 844

-

Altura total · aviso no fluxo, prévia e controles

+

+ Cena 01 · mobile 390 × 844 +

+

+ Altura total · aviso no fluxo, prévia e controles +

- Alvo do port + Alvo do port
-
+
-
+
+
+
-

Time de você

-

Confira seu card

+

+ Time de você +

+

+ Confira seu card +

- +
@@ -181,29 +252,52 @@
-

Prévia real do visitante · NEEDS ASSET

+

+ Prévia real do visitante · NEEDS ASSET +

- +

Ajuste fino

- - - - + + + +
-
+
Harmonizar cores - Ajusta o brilho e as cores da sua foto para combinar com as fotos do card. + Ajusta o brilho e as cores da sua foto para combinar com as fotos do + card.
@@ -216,45 +310,95 @@
-

O topo branco coincide com a viewport e reserva a safe-area. A área rolável começa no aviso; imagem, zoom e setas vêm em seguida, sem qualquer camada sobre a prévia.

+

+ O topo branco coincide com a viewport e reserva a safe-area. A área rolável começa no + aviso; imagem, zoom e setas vêm em seguida, sem qualquer camada sobre a prévia. +

-

Cena 02 · mobile 390 × 844 · conteúdo rolado

-

Aviso fora de cena · nada sobre a prévia

+

+ Cena 02 · mobile 390 × 844 · conteúdo rolado +

+

+ Aviso fora de cena · nada sobre a prévia +

-
+
-
+
+
+
-

Time de você

+

+ Time de você +

Confira seu card

- +
-

Prévia real do visitante · NEEDS ASSET

+

+ Prévia real do visitante · NEEDS ASSET +

- Zoom
+ Zoom +
+

Ajuste fino

-
+
+ +
-
+
+ +
-
@@ -262,41 +406,86 @@
-

Cena 03 · desktop 1280 × 800

-

Dialog desktop · aviso no fluxo, imagem limpa

+

+ Cena 03 · desktop 1280 × 800 +

+

+ Dialog desktop · aviso no fluxo, imagem limpa +

- Sem mudança no shell desktop + Sem mudança no shell desktop
-
+
-
+
-

Time de você

+

+ Time de você +

Confira seu card

- +
-

O recorte já foi centralizado. Se precisar, arraste a foto ou use os controles.

+

+ O recorte já foi centralizado. Se precisar, arraste a foto ou use os controles. +

-

Prévia real do visitante · NEEDS ASSET

+

+ Prévia real do visitante · NEEDS ASSET +

-
Zoom
+
+ Zoom +
+ +

Ajuste fino

-
+
+ +
-
+
+ +
-
Dialog 512px · 92dvh
+
+ Dialog 512px · 92dvh +
-

O dialog permanece centralizado, com largura e teto atuais. A nova regra vale no conteúdo compartilhado: aviso dentro do fluxo rolável e nenhuma camada sobre a imagem.

+

+ O dialog permanece centralizado, com largura e teto atuais. A nova regra vale no conteúdo + compartilhado: aviso dentro do fluxo rolável e nenhuma camada sobre a imagem. +

diff --git a/docs/plans/radio-embed-direto-ui-design.html b/docs/plans/radio-embed-direto-ui-design.html index 0e87bfd6..ef613445 100644 --- a/docs/plans/radio-embed-direto-ui-design.html +++ b/docs/plans/radio-embed-direto-ui-design.html @@ -22,15 +22,41 @@ --font-exo2: 'Exo 2', 'Arial Black', sans-serif; --font-arimo: Arimo, Arial, sans-serif; } - * { box-sizing: border-box; } - html { color-scheme: light; } - body { margin: 0; font-family: var(--font-arimo); } - .font-display, .campaign-section-eyebrow, .campaign-section-title { font-family: var(--font-exo2); } - .campaign-section-eyebrow { font-size: clamp(10px, calc(0.32vw + 8.75px), 12px); line-height: 1.25; } - .campaign-section-title { font-size: clamp(34px, calc(1.7vw + 18px), 40px); line-height: 1.02; } - .campaign-section-copy { font-size: clamp(14px, calc(0.32vw + 12.75px), 16px); line-height: 1.55; } - .stage-shadow { box-shadow: 0 26px 80px rgb(0 0 0 / 30%); } - .screen { overflow: hidden; background: white; color: black; } + * { + box-sizing: border-box; + } + html { + color-scheme: light; + } + body { + margin: 0; + font-family: var(--font-arimo); + } + .font-display, + .campaign-section-eyebrow, + .campaign-section-title { + font-family: var(--font-exo2); + } + .campaign-section-eyebrow { + font-size: clamp(10px, calc(0.32vw + 8.75px), 12px); + line-height: 1.25; + } + .campaign-section-title { + font-size: clamp(34px, calc(1.7vw + 18px), 40px); + line-height: 1.02; + } + .campaign-section-copy { + font-size: clamp(14px, calc(0.32vw + 12.75px), 16px); + line-height: 1.55; + } + .stage-shadow { + box-shadow: 0 26px 80px rgb(0 0 0 / 30%); + } + .screen { + overflow: hidden; + background: white; + color: black; + } .player-frame { overflow: hidden; border: 1px solid rgb(0 0 0 / 12%); @@ -58,7 +84,13 @@ border: 1px dashed rgb(0 0 0 / 24%); border-radius: 9px; } - .jingle-card { overflow: hidden; border: 1px solid var(--campaign-line); border-radius: 14px; background: white; box-shadow: 0 12px 34px rgb(71 19 14 / 8%); } + .jingle-card { + overflow: hidden; + border: 1px solid var(--campaign-line); + border-radius: 14px; + background: white; + box-shadow: 0 12px 34px rgb(71 19 14 / 8%); + } .cover-placeholder { position: relative; display: flex; @@ -68,75 +100,391 @@ background: #dedbd8; color: #57534e; } - .cover-placeholder::after { content: ''; position: absolute; inset: 58% 0 0; background: linear-gradient(to bottom, transparent, rgb(24 10 9 / 20%)); } - .play-control { display: inline-flex; width: 56px; height: 56px; flex: none; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: var(--pt-yellow); color: #000; box-shadow: 0 6px 0 #cfb900, 0 10px 22px rgb(0 0 0 / 15%); } - .download-control { display: inline-flex; min-height: 44px; width: 100%; align-items: center; justify-content: center; gap: 8px; border: 1.5px solid rgb(162 28 28 / 32%); border-radius: 10px; color: var(--pt-red); font-family: var(--font-exo2); font-weight: 800; } - .mobile-screen { width: 390px; overflow: hidden; } - @media (max-width: 639px) { .widget-placeholder { height: 150px; } } + .cover-placeholder::after { + content: ''; + position: absolute; + inset: 58% 0 0; + background: linear-gradient(to bottom, transparent, rgb(24 10 9 / 20%)); + } + .play-control { + display: inline-flex; + width: 56px; + height: 56px; + flex: none; + align-items: center; + justify-content: center; + border: 0; + border-radius: 999px; + background: var(--pt-yellow); + color: #000; + box-shadow: + 0 6px 0 #cfb900, + 0 10px 22px rgb(0 0 0 / 15%); + } + .download-control { + display: inline-flex; + min-height: 44px; + width: 100%; + align-items: center; + justify-content: center; + gap: 8px; + border: 1.5px solid rgb(162 28 28 / 32%); + border-radius: 10px; + color: var(--pt-red); + font-family: var(--font-exo2); + font-weight: 800; + } + .mobile-screen { + width: 390px; + overflow: hidden; + } + @media (max-width: 639px) { + .widget-placeholder { + height: 150px; + } + } -
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 · S24

-

Rádio 1313: o player já está na página

-

A seção mantém seu cabeçalho e sua copy. No lugar do card-facade entra somente o embed oficial, em moldura mínima e com footprint reservado. O widget fica nu: sem arte, eyebrow interno, escudo, botão intermediário, link “Abrir no Zeno” ou aviso de terceiro.

-
1280px · desktop390px · alvo mobile do portWidget zeno.fm · NEEDS ASSET
+

+ Gate visual · S24 +

+

+ Rádio 1313: o player já está na página +

+

+ A seção mantém seu cabeçalho e sua copy. No lugar do card-facade entra somente o embed + oficial, em moldura mínima e com footprint reservado. O widget fica nu: sem arte, eyebrow + interno, escudo, botão intermediário, link “Abrir no Zeno” ou aviso de terceiro. +

+
+ 1280px · desktop390px · alvo mobile do portWidget zeno.fm · NEEDS ASSET +
-

Cena 01 · desktop 1280 · 0 jingles publicados

Rádio sozinha · estado real de produção

Variante compact preservada
+
+
+

+ Cena 01 · desktop 1280 · 0 jingles publicados +

+

+ Rádio sozinha · estado real de produção +

+
+ Variante compact preservada +
-
-
+
+
-

A trilha da nossa caminhada

Sintonize com a Rádio 1313

Ainda não há jingles publicados por aqui. Enquanto isso, ouça a Rádio Jorge Solla 1313.

-
-
Embed oficial zeno.fm
conteúdo de terceiro · NEEDS ASSET
+
+

+ A trilha da nossa caminhada +

+

+ Sintonize com a Rádio 1313 +

+

+ Ainda não há jingles publicados por aqui. Enquanto isso, ouça a Rádio Jorge Solla + 1313. +

+
+
+
+ Embed oficial zeno.fm
conteúdo de terceiro · NEEDS ASSET +
-
168px reservadosO espaço do widget existe desde o primeiro paint: sem salto quando o iframe responder.
+
+ 168px reservadosO espaço do widget existe desde o primeiro paint: sem salto quando o iframe + responder. +
-

Cena 02 · mobile 390 · 0 jingles publicados

Player direto sem overflow horizontal

-
-
+
+

+ Cena 02 · mobile 390 · 0 jingles publicados +

+

+ Player direto sem overflow horizontal +

+
+
+
-

A trilha da nossa caminhada

Sintonize com a Rádio 1313

Ainda não há jingles publicados por aqui. Enquanto isso, ouça a Rádio Jorge Solla 1313.

-
Embed oficial zeno.fm
NEEDS ASSET · 150px reservados
+
+

+ A trilha da nossa caminhada +

+

+ Sintonize com a Rádio 1313 +

+

+ Ainda não há jingles publicados por aqui. Enquanto isso, ouça a Rádio Jorge Solla + 1313. +

+
+
+
+ Embed oficial zeno.fm
NEEDS ASSET · 150px reservados +
+
+
+
+ 390px · alvo mobile do port · sem botão intermediário
-
390px · alvo mobile do port · sem botão intermediário
-

Cena 03 · desktop 1280 · com jingles

Embed direto + grade existente com 3 cards

+
+

+ Cena 03 · desktop 1280 · com jingles +

+

+ Embed direto + grade existente com 3 cards +

+
-
-
+
+
-

A trilha da nossa caminhada

Cante, baixe e espalhe

Ouça a Rádio Jorge Solla 1313 e os jingles oficiais da campanha. Dê o play e baixe o seu preferido para levar com você.

-
Embed oficial zeno.fm
conteúdo de terceiro · NEEDS ASSET
-

Jingles oficiais

Dê o play. O próximo ritmo é seu.

Um jingle toca por vez.
-
-
Capa do jingle
NEEDS ASSET

Nome do jingle

Pronto para tocar

Tempo —:—Duração —:—
↓ Baixar MP3
-
Capa do jingle
NEEDS ASSET

Nome do jingle

Pronto para tocar

Tempo —:—Duração —:—
↓ Baixar MP3
-
Capa do jingle
NEEDS ASSET

Nome do jingle

Pronto para tocar

Tempo —:—Duração —:—
↓ Baixar MP3
+
+

+ A trilha da nossa caminhada +

+

+ Cante, baixe e espalhe +

+

+ Ouça a Rádio Jorge Solla 1313 e os jingles oficiais da campanha. Dê o play e baixe + o seu preferido para levar com você. +

+
+
+
+ Embed oficial zeno.fm
conteúdo de terceiro · NEEDS ASSET +
+
+
+
+

+ Jingles oficiais +

+

+ Dê o play. O próximo ritmo é seu. +

+
+ Um jingle toca por vez. +
+
+
+
+ Capa do jingle
NEEDS ASSET +
+
+
+ +
+

+ Nome do jingle +

+

Pronto para tocar

+
+
+
+
+ Tempo —:—Duração —:— +
+ ↓ Baixar MP3 +
+
+
+
+ Capa do jingle
NEEDS ASSET +
+
+
+ +
+

+ Nome do jingle +

+

Pronto para tocar

+
+
+
+
+ Tempo —:—Duração —:— +
+ ↓ Baixar MP3 +
+
+
+
+ Capa do jingle
NEEDS ASSET +
+
+
+ +
+

+ Nome do jingle +

+

Pronto para tocar

+
+
+
+
+ Tempo —:—Duração —:— +
+ ↓ Baixar MP3 +
+
+
+
+ Ver todos os jingles
-
Ver todos os jingles
-

Removido da superfície

Nada entre a seção e o player

  • • Sem arte “Rádio online” e ondas.
  • • Sem eyebrow “Sintonize com a gente” dentro do card.
  • • Sem título/textos próprios da facade.
  • • Sem escudo, “Ouvir a rádio” ou “Abrir no Zeno”.
  • • Sem estados da facade nem aviso de serviço externo.
-

Mantido no port

Seção e footprint reservado

  • • Header/copy variam com 0 ou N jingles como hoje.
  • • Embed direto ocupa 150px mobile / 168px desktop na cena.
  • • Moldura mínima: borda, raio e sombra baixa.
  • • Widget nu, sem linha, chip, badge ou escudo abaixo.
  • • Grade e “Ver todos os jingles” seguem abaixo quando existirem.
+
+

+ Removido da superfície +

+

Nada entre a seção e o player

+
    +
  • • Sem arte “Rádio online” e ondas.
    • +
  • • Sem eyebrow “Sintonize com a gente” dentro do card.
    • +
  • • Sem título/textos próprios da facade.
    • +
  • • Sem escudo, “Ouvir a rádio” ou “Abrir no Zeno”.
    • +
  • • Sem estados da facade nem aviso de serviço externo.
    • +
+
+
+

+ Mantido no port +

+

Seção e footprint reservado

+
    +
  • • Header/copy variam com 0 ou N jingles como hoje.
    • +
  • • Embed direto ocupa 150px mobile / 168px desktop na cena.
    • +
  • • Moldura mínima: borda, raio e sombra baixa.
    • +
  • • Widget nu, sem linha, chip, badge ou escudo abaixo.
    • +
  • • Grade e “Ver todos os jingles” seguem abaixo quando existirem.
    • +
+