fsolla/teqo-backup
1
0
Fork 0
mirror of https://github.com/fsolla/teqo.git synced 2026-11-13 15:13:07 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add plan and design for radio logo background removal

Browse source
This commit is contained in:
Francisco Solla 2026-09-22 19:42:28 -03:00
parent 65bc0da0f7
commit 88dad9cc7c
2 changed files with 239 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

195
docs/plans/radio-logo-no-background-ui-design.html Normal file
View file

@ -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>

44
docs/plans/radio-logo-no-background.md Normal file
View file

@ -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">
```