招牌配方
Comic-book offset shadow press
Buttons and cards use hard-offset black shadows that shrink on interaction, creating a tactile "press into the page" effect.
.element {
border: 2px solid #0A0A0A;
box-shadow: 4px 4px 0 #0A0A0A;
transition: box-shadow 100ms cubic-bezier(0.34, 1.56, 0.64, 1),
transform 100ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.element:hover {
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 #0A0A0A;
}
.element:active {
transform: translate(2px, 2px);
box-shadow: 1px 1px 0 #0A0A0A;
}
Game Boy LCD retro panel
Input fields and stat displays rendered in the authentic 4-shade Game Boy green palette with pixel font.
.gameboy-panel {
background: #9BBC0F;
border: 2px solid #0F380F;
border-radius: 8px;
padding: 12px 16px;
font-family: 'Press Start 2P', monospace;
font-size: 12px;
color: #0F380F;
box-shadow: inset 0 2px 0 rgba(15, 56, 15, 0.1);
}
Pokeball split-circle motif
Decorative Pokeball circles used as section dividers, avatar frames, or loading indicators.
.pokeball-motif {
width: 48px;
height: 48px;
border-radius: 9999px;
border: 3px solid #0A0A0A;
background: linear-gradient(to bottom, #E63946 50%, #FFFFFF 50%);
position: relative;
}
.pokeball-motif::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 14px;
height: 14px;
border-radius: 9999px;
border: 3px solid #0A0A0A;
background: #FFFFFF;
}