Techniques
Diagonal Banner Stripe
The signature Lucha Libre poster device — a rotated filled banner that cuts diagonally across the layout, carrying headline text in black-on-yellow.
.diagonal-banner {
background: #FCEE0A;
color: #0A0A0A;
font-family: 'Anton', sans-serif;
font-size: 2.5rem;
text-transform: uppercase;
letter-spacing: -0.02em;
padding: 12px 48px;
transform: rotate(-5deg);
display: inline-block;
position: relative;
z-index: 2;
border: 2px solid #0A0A0A;
}
Crimson Price Chip
The diagonal price tag — a skewed rectangle with bold numerals, used for pricing, dates, or any "grab your attention NOW" callout.
.price-chip {
background: #DC2626;
color: #FFFFFF;
font-family: 'Anton', sans-serif;
font-size: 1.5rem;
text-transform: uppercase;
padding: 8px 24px;
transform: skewX(-12deg);
display: inline-block;
border: 2px solid #0A0A0A;
}
.price-chip > span {
display: inline-block;
transform: skewX(12deg);
}
Halftone Dot Overlay
A CSS halftone dot screen that mimics the screenprint registration texture of vintage Lucha posters — applied as an overlay on photographic or hero sections.
.halftone-overlay {
position: relative;
}
.halftone-overlay::after {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(circle, #0A0A0A 1px, transparent 1px);
background-size: 4px 4px;
opacity: 0.3;
pointer-events: none;
mix-blend-mode: multiply;
}