mirror of
https://github.com/fsolla/teqo.git
synced 2026-11-12 22:13:05 +00:00
Add plan and design for radio logo background removal
This commit is contained in:
Francisco Solla
parent
7db19066ff
commit
fc07f610b8
1 changed files with 184 additions and 41 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue