From 7db19066ff0209301e038d0c08e846f31d32f2f7 Mon Sep 17 00:00:00 2001
From: Francisco Solla <fsolla@pm.me>
Date: Tue, 22 Sep 2026 19:42:28 -0300
Subject: [PATCH] Add plan and design for radio logo background removal

---
 .../radio-logo-no-background-ui-design.html   | 195 ++++++++++++++++++
 docs/plans/radio-logo-no-background.md        |  44 ++++
 2 files changed, 239 insertions(+)
 create mode 100644 docs/plans/radio-logo-no-background-ui-design.html
 create mode 100644 docs/plans/radio-logo-no-background.md

diff --git a/docs/plans/radio-logo-no-background-ui-design.html b/docs/plans/radio-logo-no-background-ui-design.html
new file mode 100644
index 00000000..b9667603
--- /dev/null
+++ b/docs/plans/radio-logo-no-background-ui-design.html
@@ -0,0 +1,195 @@
+<!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 #1187 · Logo circular no player da rádio</title>
+    <style type="text/tailwindcss">
+      :root {
+        --background: #ffffff;
+        --foreground: #000000;
+        --pt-red: #a21c1c;
+        --pt-red-dark: #47130e;
+        --pt-yellow: #ffe607;
+        --pt-yellow-ink: #000000;
+        --campaign-cream: #fff8f2;
+        --campaign-muted: #6c615e;
+        --campaign-band: #ebe9e9;
+        --campaign-line: rgb(0 0 0 / 12%);
+        --font-exo2: 'Exo 2', 'Arial Black', sans-serif;
+        --font-arimo: Arimo, Arial, sans-serif;
+      }
+      * { box-sizing: border-box; }
+      body { margin: 0; font-family: var(--font-arimo); }
+      .font-display { font-family: var(--font-exo2); }
+      .stage { box-shadow: 0 26px 80px rgb(0 0 0 / 30%); }
+      .radio-player {
+        overflow: hidden;
+        border: 1px solid var(--campaign-line);
+        border-radius: 14px;
+        background: white;
+        box-shadow: 0 10px 28px rgb(71 19 14 / 7%);
+      }
+      /* Alvo de #1187: este invólucro é intencionalmente transparente. */
+      .radio-logo-slot {
+        position: relative;
+        display: grid;
+        flex: none;
+        place-items: center;
+        overflow: hidden;
+        border-radius: 10px;
+      }
+      .radio-logo-disc {
+        position: absolute;
+        inset: 13%;
+        border: 1px solid rgb(0 0 0 / 8%);
+        border-radius: 999px;
+        background: white;
+        box-shadow: 0 7px 18px rgb(71 19 14 / 10%);
+      }
+      .radio-logo {
+        position: relative;
+        z-index: 1;
+        width: 74%;
+        aspect-ratio: 1;
+        border-radius: 999px;
+        object-fit: cover;
+      }
+      .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: var(--pt-yellow-ink);
+        box-shadow: 0 6px 0 #cfb900, 0 10px 22px rgb(0 0 0 / 15%);
+      }
+      .play-control svg { width: 25px; height: 25px; fill: currentColor; }
+      .share-control {
+        display: inline-flex;
+        min-height: 44px;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        border: 1.5px solid rgb(162 28 28 / 32%);
+        border-radius: 10px;
+        padding: 0 14px;
+        color: var(--pt-red);
+        font-family: var(--font-exo2);
+        font-size: 14px;
+        font-weight: 800;
+      }
+      .focus-ring:focus-visible {
+        outline: 3px solid var(--pt-yellow);
+        outline-offset: 3px;
+        box-shadow: 0 0 0 2px var(--pt-red-dark);
+      }
+      .live-dot { box-shadow: 0 0 0 4px rgb(162 28 28 / 11%); }
+    </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">
+      Design tier: openai/gpt-5.6-sol · 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="font-display text-xs font-black tracking-[0.12em] text-red-400 uppercase">Issue #1187 · gate visual</p>
+        <h1 class="font-display mt-2 text-3xl font-black tracking-[-0.03em]">O logo da rádio flutua sem quadrado cinza</h1>
+        <p class="mt-3 max-w-3xl text-sm leading-6 text-zinc-400">
+          Mudança isolada no logo do player: o invólucro fica transparente, enquanto o disco branco interno, a borda e a sombra existentes preservam profundidade e contraste. Todo o restante permanece no mesmo lugar.
+        </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 · player completo</span>
+          <span class="rounded-full border border-zinc-700 bg-zinc-900 px-3 py-2">390px · player mobile</span>
+          <span class="rounded-full border border-emerald-400/30 bg-emerald-400/10 px-3 py-2 text-emerald-200">NEEDS ASSET · nenhum — logo oficial existente</span>
+        </div>
+      </header>
+
+      <section class="mt-12" aria-labelledby="desktop-title">
+        <div class="mb-5">
+          <p class="font-display text-[11px] font-black tracking-[0.12em] text-emerald-300 uppercase">Cena 01 · desktop 1280 · rádio parada</p>
+          <h2 id="desktop-title" class="font-display mt-1 text-xl font-black">Mesma grade; nenhuma placa atrás do círculo</h2>
+        </div>
+        <div class="overflow-x-auto pb-4">
+          <div class="stage relative mx-auto w-[1280px] overflow-hidden bg-(--campaign-cream) text-black">
+            <div class="pointer-events-none absolute -top-28 -right-20 size-64 rounded-full bg-(--pt-yellow)/45"></div>
+            <div class="relative mx-auto max-w-[1160px] px-10 py-16">
+              <div class="mx-auto max-w-2xl text-center">
+                <p class="font-display text-xs font-black tracking-[0.1em] text-(--pt-red) uppercase">A trilha da nossa caminhada</p>
+                <h3 class="font-display mt-2 text-[40px] leading-[1.02] font-black tracking-[-0.03em]">Cante, baixe e espalhe</h3>
+                <p class="mx-auto mt-3 max-w-xl text-base leading-[1.55] text-(--campaign-muted)">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ê.</p>
+              </div>
+              <article class="radio-player mt-9 p-4" aria-label="Player da Rádio Jorge Solla 1313">
+                <div class="grid grid-cols-[112px_1fr_auto] items-center gap-5">
+                  <div class="radio-logo-slot size-28" aria-label="Logo circular sem fundo quadrado">
+                    <span class="radio-logo-disc" aria-hidden="true"></span>
+                    <img class="radio-logo" src="../../public/campaign-kit/radio/radio-jorge-solla-1313-logo.png" alt="Logo da Rádio Jorge Solla 1313" />
+                  </div>
+                  <div class="min-w-0">
+                    <div class="flex items-center gap-3">
+                      <span class="inline-flex items-center gap-2 rounded-full bg-(--pt-red)/8 px-3 py-1 text-[11px] font-black tracking-[0.08em] text-(--pt-red) uppercase"><span class="live-dot size-2 rounded-full bg-(--pt-red)"></span>Ao vivo</span>
+                      <span class="text-xs text-(--campaign-muted)">Rádio online</span>
+                    </div>
+                    <h4 class="font-display mt-3 text-[28px] leading-none font-black tracking-[-0.025em]">Rádio Jorge Solla 1313</h4>
+                    <p class="mt-2 text-sm text-(--campaign-muted)">Pronta para tocar</p>
+                  </div>
+                  <div class="flex items-center gap-4 pr-2">
+                    <button class="share-control focus-ring" type="button" aria-label="Compartilhar Rádio Jorge Solla 1313">
+                      <svg aria-hidden="true" viewBox="0 0 24 24" class="size-[18px]" fill="none" stroke="currentColor" stroke-width="2"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.6 10.5 6.8-4M8.6 13.5l6.8 4"/></svg>
+                      Compartilhar
+                    </button>
+                    <button class="play-control focus-ring" type="button" aria-label="Ouvir Rádio Jorge Solla 1313" aria-pressed="false"><svg aria-hidden="true" viewBox="0 0 24 24"><path d="m8 5 11 7-11 7z"/></svg></button>
+                  </div>
+                </div>
+              </article>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="mt-16" aria-labelledby="mobile-title">
+        <div class="mb-5">
+          <p class="font-display text-[11px] font-black tracking-[0.12em] text-amber-300 uppercase">Cena 02 · mobile 390 · rádio parada</p>
+          <h2 id="mobile-title" class="font-display mt-1 text-xl font-black">Círculo limpo, alinhamento preservado</h2>
+        </div>
+        <div class="stage relative mx-auto w-[390px] max-w-full overflow-hidden bg-(--campaign-cream) text-black">
+          <div class="absolute -top-16 -right-16 size-44 rounded-full bg-(--pt-yellow)/45"></div>
+          <div class="relative px-5 py-12">
+            <div class="text-center">
+              <p class="font-display text-[10px] font-black tracking-[0.1em] text-(--pt-red) uppercase">A trilha da nossa caminhada</p>
+              <h3 class="font-display mt-2 text-[34px] leading-[1.02] font-black tracking-[-0.03em]">Cante, baixe<br />e espalhe</h3>
+            </div>
+            <article class="radio-player mt-8 p-3" aria-label="Player da Rádio Jorge Solla 1313">
+              <div class="flex items-center gap-3">
+                <div class="radio-logo-slot size-[76px]">
+                  <span class="radio-logo-disc" aria-hidden="true"></span>
+                  <img class="radio-logo" src="../../public/campaign-kit/radio/radio-jorge-solla-1313-logo.png" alt="Logo da Rádio Jorge Solla 1313" />
+                </div>
+                <div class="min-w-0 flex-1">
+                  <span class="inline-flex items-center gap-2 text-[10px] font-black tracking-[0.08em] text-(--pt-red) uppercase"><span class="live-dot size-2 rounded-full bg-(--pt-red)"></span>Ao vivo</span>
+                  <h4 class="font-display mt-1 text-lg leading-tight font-black tracking-[-0.025em]">Rádio Jorge Solla 1313</h4>
+                  <p class="mt-1 text-xs text-(--campaign-muted)">Pronta para tocar</p>
+                </div>
+                <button class="play-control focus-ring !size-12" type="button" aria-label="Ouvir Rádio Jorge Solla 1313" aria-pressed="false"><svg aria-hidden="true" viewBox="0 0 24 24" class="!size-5"><path d="m8 5 11 7-11 7z"/></svg></button>
+              </div>
+              <div class="mt-3 flex justify-end border-t border-(--campaign-line) pt-2">
+                <button class="focus-ring inline-flex min-h-11 items-center gap-2 rounded-lg px-2 text-sm font-bold text-(--pt-red)">
+                  <svg aria-hidden="true" viewBox="0 0 24 24" class="size-4" fill="none" stroke="currentColor" stroke-width="2"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.6 10.5 6.8-4M8.6 13.5l6.8 4"/></svg>
+                  Compartilhar
+                </button>
+              </div>
+            </article>
+            <div class="mt-5 rounded-xl border border-(--campaign-line) bg-white/75 p-3 text-xs leading-5 text-(--campaign-muted)">
+              <strong class="font-display text-black">Detalhe aprovado:</strong> a área de 76px continua reservada; somente <code class="rounded bg-black/5 px-1 py-0.5">--campaign-band</code> desaparece.
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
diff --git a/docs/plans/radio-logo-no-background.md b/docs/plans/radio-logo-no-background.md
new file mode 100644
index 00000000..39b4ad3b
--- /dev/null
+++ b/docs/plans/radio-logo-no-background.md
@@ -0,0 +1,44 @@
+# Rádio — Remover fundo cinza do logo no player
+
+**Issue:** #1247
+**Status:** rascunho
+**Appetite:** 30 min
+**Prioridade:** P3
+**Depends:** S25 (player próprio)
+
+## Contexto
+
+O player da Rádio Jorge Solla 1313 (`src/components/jingles/RadioPlayer.tsx`) exibe o logo sobre um quadrado cinza (`bg-(--campaign-band)`). O usuário deseja remover esse fundo, mantendo apenas o logo circular sobre o fundo da seção (branco/cream).
+
+## Escopo
+
+- Remover a classe `bg-(--campaign-band)` do container do logo em `RadioPlayer.tsx` (linhas 302-306).
+- Ajustar o padding/margin do container se necessário para manter o alinhamento.
+- Verificar se o brilho/sombra do círculo interno (`absolute inset-[13%] rounded-full border ...`) continua legível sem o fundo cinza.
+
+## Fora de escopo
+
+- Alterar o logo em si ( imagem PNG em `public/campaign-kit/radio/`).
+- Mudar o layout do player em desktop (Cena 01).
+- Alterar a versão compacta do player.
+
+## Decisões
+
+- **A:** Manter o círculo branco interno (`absolute inset-[13%] ...`) — ele dá profundidade ao logo.
+- **B:** Não adicionar nenhum fundo alternativo — o logo circular ficará "flutuando" sobre o fundo branco da seção.
+
+## Critérios de aceite
+
+- [ ] O logo da rádio aparece circular, sem quadrado cinza atrás.
+- [ ] O layout do player não quebra em mobile (390px) e desktop (1280px).
+- [ ] A acessibilidade (contraste, labels) não é afetada.
+
+## Notas de implementação
+
+```tsx
+// Antes
+<div className="relative grid size-[76px] flex-none place-items-center overflow-hidden rounded-[10px] bg-(--campaign-band) md:size-28">
+
+// Depois
+<div className="relative grid size-[76px] flex-none place-items-center overflow-hidden rounded-[10px] md:size-28">
+```