display: inline-block;
padding: 8px 14px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));
border: 3px solid;
font-size: 11px;
font-family: 'Bebas Neue', sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
margin: 5px;
box-shadow:
3px 3px 6px rgba(0, 0, 0, 0.4),
inset 1px 1px 2px rgba(255, 255, 255, 0.1),
inset -1px -1px 2px rgba(0, 0, 0, 0.2);
position: relative;
font-weight: 900;
border-radius: 3px;
}
.punk-sticker::before {
content: '';
position: absolute;
top: 3px;
left: 3px;
right: 3px;
bottom: 3px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 2px;
pointer-events: none;
}
.punk-sticker::after {
content: '';
position: absolute;
top: -2px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid rgba(0, 0, 0, 0.3);
}
/* Graffiti scribbles EVERYWHERE */
.scribble {
position: absolute;
opacity: 0.12;
pointer-events: none;
font-family: 'Creepster', cursive;
}
/* Safety pin chain */
.pin-chain {
display: inline-block;
opacity: 0.5;
font-size: 16px;
margin: 0 4px;
animation: sway 3s ease-in-out infinite;
}
@keyframes sway {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(10deg); }
}
/* Cut-out magazine letters */
.ransom-note {
font-family: 'Permanent Marker', cursive;
letter-spacing: 3px;
opacity: 0.18;
text-transform: uppercase;
}
/* Random numbers overlay */
.chaos-number {
position: absolute;
font-family: 'Courier Prime', monospace;
font-size: 12px;
opacity: 0.08;
pointer-events: none;
font-weight: bold;
}
/* X marks everywhere */
.x-mark {
position: absolute;
font-size: 20px;
opacity: 0.1;
pointer-events: none;
font-weight: bold;
}
.page-enter {
animation: slideIn 0.5s ease;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Xerox photocopy effect MAXED */
.xerox-texture {
background:
radial-gradient(circle at 20% 30%, rgba(0, 0, 0, 0.08) 1px, transparent 1px),
radial-gradient(circle at 80% 70%, rgba(0, 0, 0, 0.06) 1px, transparent 1px),
radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
radial-gradient(circle at 15% 80%, rgba(0, 0, 0, 0.07) 1px, transparent 1px),
radial-gradient(circle at 90% 20%, rgba(0, 0, 0, 0.06) 1px, transparent 1px);
background-size: 25px 25px, 35px 35px, 20px 20px, 30px 30px, 28px 28px;
}
/* Tape pieces floating */
.tape-piece {
position: absolute;
width: 50px;
height: 20px;
background: rgba(200, 200, 150, 0.35);
border: 1px solid rgba(150, 150, 100, 0.4);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
pointer-events: none;
}
/* Giant watermark */
.mega-watermark {
position: fixed;
font-size: 200px;
opacity: 0.03;
pointer-events: none;
z-index: 0;
font-family: 'Bebas Neue', sans-serif;
}