招牌配方
Chamak-patti scalloped border
A reflective-tape edge rendered with a repeating radial gradient. Use on card headers, section dividers, and hero banner bottoms.
.chamak-patti-border {
position: relative;
padding-bottom: 16px;
background: #FFF8E1;
}
.chamak-patti-border::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -12px;
height: 24px;
background:
radial-gradient(circle at 12px 0, #E91E63 10px, transparent 11px) 0 0 / 24px 24px repeat-x,
radial-gradient(circle at 12px 0, #2E7D32 6px, transparent 7px) 0 0 / 24px 24px repeat-x;
filter: drop-shadow(0 2px 0 #FFB300);
}
Stacked-offset truck-body shadow
The canonical depth cue: a card lifted on a kelly-green ledge over a fuchsia bed, compressing on hover like a pressed dashboard button.
.truck-panel {
background: #FFF8E1;
border: 3px solid #2E7D32;
border-radius: 20px;
padding: 24px;
box-shadow: 0 4px 0 #2E7D32, 0 8px 0 #E91E63;
transition: box-shadow 250ms cubic-bezier(0.34, 1.56, 0.64, 1),
transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.truck-panel:hover {
transform: translateY(-2px);
box-shadow: 0 6px 0 #2E7D32, 0 12px 0 #E91E63, 0 16px 24px rgba(26, 12, 0, 0.18);
}
.truck-panel:active {
transform: translateY(4px);
box-shadow: 0 0 0 #2E7D32, 0 0 0 #E91E63;
}
Dangling tassel-chain ornament
A string of gold mirror-discs that hangs beneath hero headings, nav bars, or primary CTAs — purely decorative, placed as an `::after` so it never fights with layout.
.tassel-chain {
position: relative;
padding-bottom: 32px;
}
.tassel-chain::after {
content: "● ● ● ● ●";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
color: #FFB300;
font-size: 16px;
letter-spacing: 8px;
text-shadow: 0 2px 0 #FF8F00, 0 3px 4px rgba(26, 12, 0, 0.35);
animation: tassel-sway 2400ms cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
transform-origin: top center;
}
@keyframes tassel-sway {
from { transform: translateX(-50%) rotate(-4deg); }
to { transform: translateX(-50%) rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) {
.tassel-chain::after { animation: none; }
}