Techniques
Papel picado border lattice
A repeating cut-paper stencil border using CSS clip-path and a pseudo-element, evoking the scalloped/perforated edges of papel picado banners.
.papel-picado-border {
position: relative;
border: 3px solid #FF8C20;
border-radius: 12px;
overflow: visible;
}
.papel-picado-border::after {
content: '';
position: absolute;
bottom: -8px;
left: 5%;
right: 5%;
height: 8px;
background: repeating-linear-gradient(
90deg,
#E0287A 0px, #E0287A 12px,
transparent 12px, transparent 16px,
#FF8C20 16px, #FF8C20 28px,
transparent 28px, transparent 32px,
#F8C84A 32px, #F8C84A 44px,
transparent 44px, transparent 48px
);
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 8'%3E%3Cpath d='M0 0h8l4 8h-4L4 4 0 8z M16 0h8l4 8h-4l-4-4-4 4z M32 0h8l4 8h-4l-4-4-4 4z' fill='black'/%3E%3C/svg%3E");
mask-size: 48px 8px;
mask-repeat: repeat-x;
}
Cempasúchil candle glow
A radial marigold-orange glow behind hero elements, simulating candle-lit cempasúchil petal fluorescence on the velvet-night ground.
.cempasuchil-glow {
position: relative;
}
.cempasuchil-glow::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 160%;
height: 160%;
transform: translate(-50%, -50%);
background: radial-gradient(
ellipse at center,
rgba(255, 140, 32, 0.25) 0%,
rgba(248, 200, 74, 0.10) 40%,
transparent 70%
);
pointer-events: none;
z-index: -1;
border-radius: 50%;
filter: blur(20px);
}
Calavera cartouche frame
An ornate oval portrait frame with marigold and magenta layered borders, used for avatar or portrait containers — evoking the framed photographs placed on ofrendas.
.calavera-cartouche {
width: 120px;
height: 120px;
border-radius: 50%;
border: 3px solid #FF8C20;
box-shadow:
0 0 0 6px #2A1A4A,
0 0 0 9px #E0287A,
0 0 0 12px #2A1A4A,
0 0 20px rgba(255, 140, 32, 0.35);
overflow: hidden;
}