Techniques
Lamplight vignette surface
A card that emerges from shadow, lit as if by a single overhead bulb.
.vignette-card {
position: relative;
background:
radial-gradient(120% 90% at 50% 0%, rgba(176,141,78,0.10), transparent 60%),
#1A1512;
border: 1px solid #262019;
border-radius: 4px;
box-shadow: 0 8px 32px rgba(0,0,0,0.7);
padding: 32px;
}
.vignette-card::after {
content: "";
position: absolute;
inset: 0;
border-radius: 4px;
pointer-events: none;
box-shadow: inset 0 -40px 60px -20px rgba(0,0,0,0.85);
}
Marionette-string divider
The Fujita puppeteer crossbar rendered as descending brass strings between sections.
.string-divider {
height: 40px;
background:
repeating-linear-gradient(
to right,
transparent 0 47px,
rgba(176,141,78,0.55) 47px 48px
);
border-top: 1px solid #B08D4E;
mask-image: linear-gradient(to bottom, #000 0, transparent 90%);
}
Oxblood rule accent
The one saturated note — a thin blood-red mark for a single decisive emphasis.
.oxblood-mark {
padding-left: 16px;
border-left: 2px solid #7E1015;
color: #E8DCC8;
}
.oxblood-mark--seal {
box-shadow: inset 3px 0 0 #7E1015, 0 2px 8px rgba(0,0,0,0.55);
}