From 992862c87c929012be96e72629d920ed1d2ee428 Mon Sep 17 00:00:00 2001
From: Francisco Solla <fsolla@pm.me>
Date: Fri, 25 Sep 2026 11:25:34 -0300
Subject: [PATCH] style(C226): formata o design do frame preview

---
 ...nteudos-preview-frame-video-ui-design.html | 84 +++++++++++++------
 1 file changed, 58 insertions(+), 26 deletions(-)

diff --git a/docs/plans/central-conteudos-preview-frame-video-ui-design.html b/docs/plans/central-conteudos-preview-frame-video-ui-design.html
index d2372e89..5fa8f87e 100644
--- a/docs/plans/central-conteudos-preview-frame-video-ui-design.html
+++ b/docs/plans/central-conteudos-preview-frame-video-ui-design.html
@@ -121,7 +121,9 @@
         border-radius: 999px;
         background: var(--pt-yellow);
         color: var(--pt-yellow-ink);
-        box-shadow: 0 6px 0 #cfb900, 0 12px 26px rgb(0 0 0 / 28%);
+        box-shadow:
+          0 6px 0 #cfb900,
+          0 12px 26px rgb(0 0 0 / 28%);
       }
 
       .play-triangle {
@@ -151,7 +153,12 @@
         position: relative;
         overflow: hidden;
         background:
-          linear-gradient(90deg, transparent 49.75%, rgb(255 255 255 / 20%) 50%, transparent 50.25%),
+          linear-gradient(
+            90deg,
+            transparent 49.75%,
+            rgb(255 255 255 / 20%) 50%,
+            transparent 50.25%
+          ),
           linear-gradient(transparent 49.75%, rgb(255 255 255 / 20%) 50%, transparent 50.25%),
           radial-gradient(circle at 50% 44%, #8e949a 0 12%, transparent 12.5%),
           linear-gradient(145deg, #4b555f 0%, #77828c 46%, #3d474f 100%);
@@ -247,7 +254,9 @@
                   <p class="text-xs font-black tracking-[0.12em] text-[#ffeb00]">
                     PEÇA VOTO PRA SOLLA 1313
                   </p>
-                  <h3 class="display mt-2 text-3xl font-black">Escolha uma peça para compartilhar.</h3>
+                  <h3 class="display mt-2 text-3xl font-black">
+                    Escolha uma peça para compartilhar.
+                  </h3>
                 </div>
                 <img
                   src="../../public/campaign-kit/numero-negativo.png"
@@ -273,7 +282,9 @@
               <div class="mt-5 grid grid-cols-3 gap-6">
                 <article class="card">
                   <div class="generic-frame relative aspect-video">
-                    <span class="asset-label absolute top-3 left-3 z-10">NEEDS ASSET · FRAME REAL</span>
+                    <span class="asset-label absolute top-3 left-3 z-10"
+                      >NEEDS ASSET · FRAME REAL</span
+                    >
                     <button
                       class="play-button absolute inset-0 z-10 m-auto"
                       aria-label="Reproduzir Título da peça em vídeo"
@@ -298,16 +309,17 @@
 
                 <article class="card">
                   <div class="neutral-slot relative grid aspect-video place-items-center">
-                    <div class="absolute top-3 left-3 flex items-center gap-2 text-[10px] font-black tracking-[0.1em] text-[#6c615e]">
-                      <span class="grid size-6 place-items-center rounded-full border border-black/10 bg-white" aria-hidden="true"
+                    <div
+                      class="absolute top-3 left-3 flex items-center gap-2 text-[10px] font-black tracking-[0.1em] text-[#6c615e]"
+                    >
+                      <span
+                        class="grid size-6 place-items-center rounded-full border border-black/10 bg-white"
+                        aria-hidden="true"
                         >×</span
                       >
                       FRAME INDISPONÍVEL
                     </div>
-                    <button
-                      class="play-button relative z-10"
-                      aria-label="Reproduzir outro vídeo"
-                    >
+                    <button class="play-button relative z-10" aria-label="Reproduzir outro vídeo">
                       <span class="play-triangle" aria-hidden="true"></span>
                     </button>
                     <span
@@ -327,7 +339,9 @@
                 </article>
 
                 <article class="card flex items-center gap-4 self-start p-3">
-                  <div class="neutral-slot grid h-24 w-32 shrink-0 place-items-center rounded-lg px-3 text-center">
+                  <div
+                    class="neutral-slot grid h-24 w-32 shrink-0 place-items-center rounded-lg px-3 text-center"
+                  >
                     <span class="text-[10px] font-black tracking-[0.08em] text-[#6c615e]"
                       >CONTEÚDO SEM VÍDEO</span
                     >
@@ -347,8 +361,8 @@
                   play continua sendo o ponto de maior contraste.
                 </p>
                 <p class="rounded-lg border border-black/10 bg-[#faf9f8] p-3 text-[#514945]">
-                  <b>Sem frame:</b> nenhuma tentativa de simular conteúdo; play, duração e informações
-                  da peça permanecem disponíveis.
+                  <b>Sem frame:</b> nenhuma tentativa de simular conteúdo; play, duração e
+                  informações da peça permanecem disponíveis.
                 </p>
               </div>
             </div>
@@ -366,7 +380,9 @@
             <div class="logo-window scale-90 origin-left" aria-label="Jorge Solla">
               <img src="../../public/campaign-kit/jorge-solla-negativo.png" alt="Jorge Solla" />
             </div>
-            <span class="grid size-11 place-items-center rounded-lg text-xl text-white" aria-label="Menu"
+            <span
+              class="grid size-11 place-items-center rounded-lg text-xl text-white"
+              aria-label="Menu"
               >☰</span
             >
           </header>
@@ -408,7 +424,9 @@
                   <button class="btn btn-outline">↓ Baixar</button>
                   <button class="btn btn-outline">↗ Compartilhar</button>
                 </div>
-                <a class="mt-3 block min-h-11 py-3 text-center text-xs font-bold text-[#a21c1c]" href="#"
+                <a
+                  class="mt-3 block min-h-11 py-3 text-center text-xs font-bold text-[#a21c1c]"
+                  href="#"
                   >Ver detalhes da peça →</a
                 >
               </div>
@@ -425,7 +443,9 @@
         <div class="grid gap-8 lg:grid-cols-[390px_1fr] lg:items-start lg:justify-center">
           <div class="phone artboard mx-auto overflow-hidden bg-white lg:mx-0">
             <div class="border-b border-black/10 px-4 py-4">
-              <p class="text-[10px] font-black tracking-[0.12em] text-[#a21c1c]">ESTADO APÓS O GESTO</p>
+              <p class="text-[10px] font-black tracking-[0.12em] text-[#a21c1c]">
+                ESTADO APÓS O GESTO
+              </p>
               <p class="mt-1 text-sm font-bold">O arquivo de vídeo pode carregar agora.</p>
             </div>
             <article class="card m-4">
@@ -464,18 +484,29 @@
 
           <aside class="artboard max-w-xl rounded-xl bg-white p-6 lg:mt-20">
             <p class="text-xs font-black tracking-[0.12em] text-[#184e92]">CONTINUIDADE VISUAL</p>
-            <h3 class="display mt-2 text-2xl font-black">O card não salta nem muda de hierarquia.</h3>
+            <h3 class="display mt-2 text-2xl font-black">
+              O card não salta nem muda de hierarquia.
+            </h3>
             <ul class="mt-4 space-y-3 text-sm leading-6 text-[#514945]">
               <li class="flex gap-3">
-                <span class="mt-1 grid size-5 shrink-0 place-items-center rounded-full bg-[#eef4fb] text-[11px] font-black text-[#184e92]">1</span>
+                <span
+                  class="mt-1 grid size-5 shrink-0 place-items-center rounded-full bg-[#eef4fb] text-[11px] font-black text-[#184e92]"
+                  >1</span
+                >
                 O player substitui apenas o frame dentro do mesmo aspecto 16:9.
               </li>
               <li class="flex gap-3">
-                <span class="mt-1 grid size-5 shrink-0 place-items-center rounded-full bg-[#eef4fb] text-[11px] font-black text-[#184e92]">2</span>
+                <span
+                  class="mt-1 grid size-5 shrink-0 place-items-center rounded-full bg-[#eef4fb] text-[11px] font-black text-[#184e92]"
+                  >2</span
+                >
                 Título, metadados e ações permanecem no mesmo lugar.
               </li>
               <li class="flex gap-3">
-                <span class="mt-1 grid size-5 shrink-0 place-items-center rounded-full bg-[#eef4fb] text-[11px] font-black text-[#184e92]">3</span>
+                <span
+                  class="mt-1 grid size-5 shrink-0 place-items-center rounded-full bg-[#eef4fb] text-[11px] font-black text-[#184e92]"
+                  >3</span
+                >
                 Os controles deixam evidente que este estado só existe depois do play.
               </li>
             </ul>
@@ -522,22 +553,23 @@
             </article>
 
             <div>
-              <span class="rounded-full bg-[#f5f5f4] px-3 py-1.5 text-xs font-extrabold text-[#514945]"
+              <span
+                class="rounded-full bg-[#f5f5f4] px-3 py-1.5 text-xs font-extrabold text-[#514945]"
                 >Falha segura</span
               >
               <h3 class="display mt-4 text-3xl font-black leading-tight">
                 A falta do frame não parece erro da página.
               </h3>
               <p class="mt-3 max-w-xl text-sm leading-6 text-[#6c615e]">
-                O slot usa uma superfície neutra, sem ícone de imagem quebrada e sem fingir que há uma
-                cena disponível. A pessoa ainda pode reproduzir o vídeo e reconhecer a peça pelo título
-                e pelos metadados.
+                O slot usa uma superfície neutra, sem ícone de imagem quebrada e sem fingir que há
+                uma cena disponível. A pessoa ainda pode reproduzir o vídeo e reconhecer a peça pelo
+                título e pelos metadados.
               </p>
               <div class="mt-5 rounded-xl border border-[#a21c1c]/15 bg-[#fff8f2] p-4">
                 <p class="text-xs font-black tracking-[0.1em] text-[#a21c1c]">NÃO FAZER</p>
                 <p class="mt-1 text-sm leading-6 text-[#514945]">
-                  Não mostrar miniatura de plataforma externa, não prometer um timestamp e não ocultar o
-                  card quando a imagem faltar.
+                  Não mostrar miniatura de plataforma externa, não prometer um timestamp e não
+                  ocultar o card quando a imagem faltar.
                 </p>
               </div>
             </div>