Techniques
Cobalt-wall panel with terracotta tile border
A cream content panel set against the cobalt page, framed with a thick terracotta border evoking floor tiles meeting plastered walls.
.cobalt-wall-panel {
background: #F0E5C8;
border: 3px solid #C85A2A;
border-radius: 14px;
padding: 32px;
color: #1A1208;
box-shadow: 0 3px 12px rgba(32, 88, 168, 0.22);
}
Retablo cartouche button
A button styled as a miniature retablo altar frame — cream fill, cobalt outline, saffron-gold corner accent on hover.
.retablo-button {
background: #F0E5C8;
color: #2058A8;
border: 2px solid #2058A8;
border-radius: 10px;
padding: 8px 22px;
font-family: 'Marcellus', serif;
letter-spacing: 0.02em;
position: relative;
transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.retablo-button:hover {
background: #2058A8;
color: #F0E5C8;
box-shadow: 0 0 0 3px #E0A828, 0 4px 12px rgba(32, 88, 168, 0.2);
}
Papel-picado horizontal divider
A decorative divider evoking the cut-paper banners strung across the Casa Azul courtyard, using a repeating scallop border-image pattern.
.papel-picado-divider {
border: none;
height: 4px;
background: repeating-linear-gradient(
90deg,
#D8287A 0px, #D8287A 12px,
transparent 12px, transparent 16px,
#E0A828 16px, #E0A828 28px,
transparent 28px, transparent 32px,
#3A8C5A 32px, #3A8C5A 44px,
transparent 44px, transparent 48px
);
margin: 48px 0;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='4'%3E%3Cpath d='M0 4 Q6 0 12 4 Q18 0 24 4 Q30 0 36 4 Q42 0 48 4' fill='black'/%3E%3C/svg%3E");
mask-size: 48px 4px;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='4'%3E%3Cpath d='M0 4 Q6 0 12 4 Q18 0 24 4 Q30 0 36 4 Q42 0 48 4' fill='black'/%3E%3C/svg%3E");
-webkit-mask-size: 48px 4px;
}