Techniques
Siren Medallion Stamp
A circular badge treatment that echoes the logo's medallion form — used for featured items, awards, or seasonal callouts.
.medallion-stamp {
width: 120px;
height: 120px;
border-radius: 50%;
border: 2px solid #006241;
display: flex;
align-items: center;
justify-content: center;
background: #FFFFFF;
box-shadow: 0 2px 8px rgba(0,98,65,0.15);
position: relative;
}
.medallion-stamp::after {
content: '';
position: absolute;
inset: 4px;
border-radius: 50%;
border: 1px solid #E8DCC5;
}
Chalkboard Panel
A dark-green panel with cream text that evokes the hand-lettered menu boards in every Starbucks store.
.chalkboard-panel {
background: #1E3932;
color: #F1E9D9;
padding: 32px;
border-radius: 4px;
font-family: 'Lander', 'Sodo Sans', sans-serif;
font-weight: 700;
letter-spacing: 0.02em;
position: relative;
overflow: hidden;
}
.chalkboard-panel::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 28px,
rgba(241,233,217,0.03) 28px,
rgba(241,233,217,0.03) 29px
);
pointer-events: none;
}
Gold Foil Accent Border
A warm gold gradient border used on premium / Reserve-tier cards and seasonal elements.
.gold-foil-border {
border: 2px solid transparent;
background-clip: padding-box;
position: relative;
border-radius: 4px;
}
.gold-foil-border::before {
content: '';
position: absolute;
inset: -2px;
border-radius: 6px;
background: linear-gradient(135deg, #CBA258, #E8CD88, #CBA258);
z-index: -1;
}