Techniques
Abr cloud-band gold reserve
The illuminated cloud band that reserves the script from the flecked ground — a rounded gold-rimmed panel with a soft inner gold wash.
.element {
position: relative;
padding: 20px 28px;
border-radius: 9999px / 40px;
background:
radial-gradient(120% 140% at 50% 0%, rgba(200, 162, 74, 0.12), transparent 60%),
#241F17;
box-shadow:
inset 0 0 0 1px rgba(232, 217, 160, 0.45),
inset 0 0 22px rgba(200, 162, 74, 0.12);
}
Diagonal hanging Nastaliq line
Sets a display line on the downward slope of Nastaliq instead of a flat horizontal baseline.
.element {
font-family: 'Noto Nastaliq Urdu', serif;
direction: rtl;
display: inline-block;
transform: rotate(-4deg);
transform-origin: right center;
color: #C8A24A;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5),
0 0 14px rgba(200, 162, 74, 0.3);
line-height: 1.8;
}
Afshan gold-fleck ground
The scattered gold flecks of an afshan-decorated manuscript field, layered under content as a page background.
.element {
background-color: #1A1712;
background-image:
radial-gradient(circle at 15% 25%, rgba(200, 162, 74, 0.5) 0 1px, transparent 1.5px),
radial-gradient(circle at 62% 12%, rgba(232, 217, 160, 0.4) 0 1px, transparent 1.5px),
radial-gradient(circle at 40% 70%, rgba(200, 162, 74, 0.35) 0 1px, transparent 1.5px),
radial-gradient(circle at 85% 55%, rgba(232, 217, 160, 0.3) 0 1px, transparent 1.5px);
background-size: 180px 180px, 220px 220px, 160px 160px, 240px 240px;
}