Techniques
Gold Sunburst Divider
A CSS-only sunburst section divider — radiating gold lines from a central point, evoking the Chrysler Building's crown and Deco ceiling rosettes.
.sunburst-divider {
position: relative;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.sunburst-divider::before {
content: "";
position: absolute;
width: 200px;
height: 200px;
background: repeating-conic-gradient(
#c9a84c 0deg 2deg,
transparent 2deg 15deg
);
opacity: 0.2;
mask-image: radial-gradient(circle, black 30%, transparent 70%);
-webkit-mask-image: radial-gradient(circle, black 30%, transparent 70%);
}
.sunburst-divider::after {
content: "◆";
position: relative;
color: #c9a84c;
font-size: 14px;
z-index: 1;
}
Stepped Chevron Border
Deco's signature stepped-pyramid silhouette as a repeating top-border pattern for hero sections and cards.
.chevron-header {
position: relative;
padding-top: 24px;
}
.chevron-header::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 12px;
background:
linear-gradient(135deg, transparent 33.33%, #c9a84c 33.33%, #c9a84c 66.66%, transparent 66.66%) 0 0 / 12px 12px repeat-x;
opacity: 0.6;
}
Gilded Focus Ring
An animated gold-glow focus state that simulates the warm luminescence of gold leaf catching light — used on interactive elements to maintain the luxurious atmosphere.
.deco-focus:focus-visible {
outline: none;
box-shadow:
0 0 0 2px #0d0908,
0 0 0 4px #c9a84c,
0 0 16px rgba(201, 168, 76, 0.25);
transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
}