Techniques
Quartered medallion hero
A radial-gradient + conic-gradient pair composes the central diamond medallion with four corner spandrel echoes — bilateral symmetry guaranteed by CSS alone.
.medallion-hero {
background:
radial-gradient(ellipse 40% 50% at 50% 50%, #D4A23A 0%, #B0852E 30%, transparent 55%),
conic-gradient(from 45deg at 50% 50%,
#1F6B5C 0deg 90deg, #8B1F2A 90deg 180deg,
#1F6B5C 180deg 270deg, #8B1F2A 270deg 360deg) center / 80% 80% no-repeat,
#1A2E58;
background-blend-mode: normal, soft-light, normal;
border: 4px double #D4A23A;
border-radius: 24px;
}
Cream-ivory arabesque hairline border
A double-stroked border with a thin saffron interior line — the carpet's main-band rhythm reduced to a single component.
.arabesque-frame {
position: relative;
padding: 32px;
background: #FFFBEE;
border: 1px solid #D4A23A;
border-radius: 24px;
box-shadow:
inset 0 0 0 6px #FFFBEE,
inset 0 0 0 7px #D4A23A,
inset 0 0 0 13px #FFFBEE,
inset 0 0 0 14px #1A2E58;
}
Palmette-arabesque tile infill
A repeating background pattern that fills empty surface with low-density palmette-and-vine motifs — the horror-vacui rule made cheap.
.palmette-field {
background-color: #1A2E58;
background-image:
radial-gradient(circle at 25% 25%, rgba(212, 162, 58, 0.18) 0 4px, transparent 5px),
radial-gradient(circle at 75% 75%, rgba(31, 107, 92, 0.20) 0 4px, transparent 5px),
radial-gradient(circle at 50% 50%, rgba(240, 229, 200, 0.10) 0 2px, transparent 3px);
background-size: 48px 48px, 48px 48px, 24px 24px;
color: #F0E5C8;
}