Design for AICartão de embarque recortado
Cartão de embarque recortado: um card em CSS. Copie as regras, ou o prompt que o reconstrói.
Boarding 09:40
BER to LIS
Gate B12 · Seat 14A
14AWindow
CSS
.card-075-wrap {
display: inline-block;
filter: drop-shadow(0 8px 12px rgba(0,0,0,.1));
transition: filter .2s
}
.card-075-wrap:hover {
filter: drop-shadow(0 14px 17px rgba(0,0,0,.14))
}
.card-075 {
display: flex;
width: 360px;
background: #fff;
border-radius: 14px;
font-family: system-ui,sans-serif;
color: #111827;
-webkit-mask: radial-gradient(12px at 260px 0,transparent 98%,#000) top/100% 51% no-repeat,radial-gradient(12px at 260px 100%,transparent 98%,#000) bottom/100% 51% no-repeat;
mask: radial-gradient(12px at 260px 0,transparent 98%,#000) top/100% 51% no-repeat,radial-gradient(12px at 260px 100%,transparent 98%,#000) bottom/100% 51% no-repeat
}
.card-075__main {
flex: 1;
padding: 20px 22px;
border-right: 2px dashed #d1d5db
}
.card-075__main span {
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
color: #6b7280
}
.card-075 h3 {
margin: 6px 0 4px;
font-size: 26px;
letter-spacing: -.02em
}
.card-075 p {
margin: 0;
font-size: 13px;
color: #4b5563
}
.card-075__stub {
flex: 0 0 100px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #f9fafb
}
.card-075 b {
font-size: 22px
}
.card-075 small {
font-size: 11px;
color: #6b7280
}
HTML
<div class="card-075-wrap">
<article class="card-075">
<div class="card-075__main"><span>Boarding 09:40</span><h3>BER to LIS</h3><p>Gate B12 · Seat 14A</p></div>
<div class="card-075__stub"><b>14A</b><small>Window</small></div>
</article>
</div>Prompt
Construa um ingresso estilo cartão de embarque de 360px: branco, raio de 14px, sombra 0 8px 24px rgba(0,0,0,.1). Dois recortes semicirculares são perfurados nas bordas superior e inferior em x=260px usando uma máscara CSS radial-gradient de duas camadas (raio de 12px, centro transparente). Uma linha vertical tracejada de 2px #d1d5db separa a seção principal (caixa alta 11px cinza "Boarding 09:40", "BER to LIS" 26px, linha de portão e assento 13px) de um canhoto de 100px sobre #f9fafb mostrando o assento "14A" em 22px bold e uma legenda 11px "Window". A sombra se aprofunda no hover.