Design for AIHolofote no canto
Holofote no canto: um card em CSS. Copie as regras, ou o prompt que o reconstrói.
Spotlight
A radial highlight grows from the corner on hover, no pointer tracking needed.
CSS
.card-089 {
position: relative;
width: 280px;
padding: 24px;
background: #0a0a0a;
border: 1px solid #262626;
border-radius: 16px;
overflow: hidden;
font-family: system-ui,sans-serif;
color: #fafafa;
isolation: isolate
}
.card-089::before {
content: "";
position: absolute;
width: 320px;
height: 320px;
left: -160px;
top: -160px;
border-radius: 50%;
background: radial-gradient(circle,rgba(56,189,248,.35),transparent 60%);
opacity: 0;
transform: scale(.5);
transition: opacity .4s,transform .6s cubic-bezier(.2,.8,.2,1);
z-index: -1
}
.card-089:hover::before {
opacity: 1;
transform: scale(1.3)
}
.card-089:hover {
border-color: #0ea5e9
}
.card-089 h3 {
margin: 0 0 6px;
font-size: 18px
}
.card-089 p {
margin: 0;
font-size: 14px;
line-height: 1.5;
color: #a3a3a3
}
HTML
<article class="card-089">
<h3>Spotlight</h3>
<p>A radial highlight grows from the corner on hover, no pointer tracking needed.</p>
</article>Prompt
Construa um card quase preto de 280px (#0a0a0a, borda de 1px #262626, raio de 16px, padding de 24px, overflow hidden, isolation isolate). Um brilho radial circular de 320px (rgba(56,189,248,.35) para transparente em 60%) fica ancorado no canto superior esquerdo atrás do conteúdo, oculto com opacidade 0 e escala .5; no hover ele aparece em fade e escala para 1.3 em 600ms com curva elástica enquanto a borda fica azul-céu #0ea5e9. Título branco 18px, texto 14px #a3a3a3.