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

---
 .../radio-logo-no-background-ui-design.html   | 225 ++++++++++++++----
 1 file changed, 184 insertions(+), 41 deletions(-)

diff --git a/docs/plans/radio-logo-no-background-ui-design.html b/docs/plans/radio-logo-no-background-ui-design.html
index b9667603..42580476 100644
--- a/docs/plans/radio-logo-no-background-ui-design.html
+++ b/docs/plans/radio-logo-no-background-ui-design.html
@@ -20,10 +20,19 @@
         --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%); }
+      * {
+        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);
@@ -67,9 +76,15 @@
         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%);
+        box-shadow:
+          0 6px 0 #cfb900,
+          0 10px 22px rgb(0 0 0 / 15%);
+      }
+      .play-control svg {
+        width: 25px;
+        height: 25px;
+        fill: currentColor;
       }
-      .play-control svg { width: 25px; height: 25px; fill: currentColor; }
       .share-control {
         display: inline-flex;
         min-height: 44px;
@@ -89,61 +104,137 @@
         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%); }
+      .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">
+    <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="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.
+          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>
+          <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>
+          <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="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>
+                <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">
+                  <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" />
+                    <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="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>
+                    <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>
+                    <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>
+                    <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>
@@ -154,38 +245,90 @@
 
       <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>
+          <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="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>
+              <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" />
+                  <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>
+                  <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>
+                <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>
+                <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
+              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>