Techniques
Apsara repeating frieze
Continuous horizontal procession of Apsara celestial-dancer silhouettes — the canonical Angkor motif (1,800+ Apsaras at Angkor Wat alone). Implemented as a repeating SVG mask over warm sandstone gradient.
.frieze-apsara {
height: 96px;
background: linear-gradient(180deg, #CEA572 0%, #B07C4F 60%, #7F5A3D 100%);
-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='96' viewBox='0 0 64 96'><path d='M32 8c-5 0-9 4-9 9 0 4 2 7 5 8l-3 6h-4l-2 12 6 2 1 18 4 8-2 17 5 5 -2 3 6-3 6 3-2-3 5-5-2-17 4-8 1-18 6-2-2-12h-4l-3-6c3-1 5-4 5-8 0-5-4-9-9-9z' fill='%233D2A1A'/></svg>") repeat-x;
mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='96' viewBox='0 0 64 96'><path d='M32 8c-5 0-9 4-9 9 0 4 2 7 5 8l-3 6h-4l-2 12 6 2 1 18 4 8-2 17 5 5 -2 3 6-3 6 3-2-3 5-5-2-17 4-8 1-18 6-2-2-12h-4l-3-6c3-1 5-4 5-8 0-5-4-9-9-9z' fill='%233D2A1A'/></svg>") repeat-x;
filter: drop-shadow(0 2px 0 rgba(245, 232, 216, 0.5));
}
Bas-relief shadow emboss
Shallow carved-stone depth: a card or button gets a top-edge cream highlight (light catching the raised surface) plus a bottom-edge umber recess (shadow falling into the cut). The signature Angkor 3D effect without resorting to skeuomorphism.
.relief {
background: #E8D2B8;
border: 1px solid #C29A78;
border-radius: 8px;
box-shadow:
inset 0 1px 0 rgba(245, 232, 216, 0.9),
inset 0 -1px 0 rgba(61, 42, 26, 0.18),
0 4px 12px rgba(61, 42, 26, 0.20);
background-image:
radial-gradient(circle at 30% 20%, rgba(245, 232, 216, 0.35), transparent 60%),
radial-gradient(circle at 80% 90%, rgba(61, 42, 26, 0.10), transparent 50%);
}
Lotus-petal divider band
Horizontal ornament strip — a row of small lotus-petal silhouettes acting as section divider. Echoes the ornament bands that crown every Angkor pediment.
.divider-lotus {
height: 24px;
background-color: #B07C4F;
-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='24' viewBox='0 0 32 24'><path d='M16 4c-3 0-6 2-7 5-1-3-4-5-7-5v6c0 4 3 8 7 9h14c4-1 7-5 7-9V4c-3 0-6 2-7 5-1-3-4-5-7-5z' fill='%23000'/></svg>") repeat-x center / 32px 24px;
mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='24' viewBox='0 0 32 24'><path d='M16 4c-3 0-6 2-7 5-1-3-4-5-7-5v6c0 4 3 8 7 9h14c4-1 7-5 7-9V4c-3 0-6 2-7 5-1-3-4-5-7-5z' fill='%23000'/></svg>") repeat-x center / 32px 24px;
opacity: 0.85;
}
Sandstone weathered grain
Subtle stone-texture noise overlay — emulates 800 years of monsoon weathering on quarried sandstone without requiring a raster asset.
.sandstone {
background-color: #D8B898;
background-image:
radial-gradient(rgba(61, 42, 26, 0.06) 1px, transparent 1px),
radial-gradient(rgba(245, 232, 216, 0.5) 1px, transparent 1px);
background-size: 3px 3px, 5px 5px;
background-position: 0 0, 1px 2px;
}