.mario-category-page { image-rendering: pixelated; --m-red: #ff4757; --m-yellow: #f1c40f; --m-brick: #b03000; --m-green: #2ecc71; --m-metal: #2c3e50; padding-top: 60px; min-height: 100vh; overflow-x: hidden; } .mario-hanging-banner { display: inline-block; position: relative; animation: sway 3s ease-in-out infinite alternate; margin-bottom: 50px; } .banner-content { background: var(--m-red); color: #fff; padding: 15px 40px; font-family: 'Press Start 2P', cursive; font-size: 22px; border: 4px solid #000; box-shadow: 8px 8px 0 #000; text-shadow: 3px 3px 0 #000; position: relative; z-index: 2; text-transform: uppercase; } .chain-left, .chain-right { position: absolute; top: -60px; width: 8px; height: 70px; background: #000; background-image: repeating-linear-gradient(to bottom, #000 0, #000 4px, #7f8c8d 4px, #7f8c8d 8px); z-index: 1; } .chain-left { left: 25px; } .chain-right { right: 25px; } @keyframes sway { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } } .mario-pop-card-wrap { position: relative; margin-bottom: 40px; } .mario-pop-card-wrap::before { content: "$"; font-family: 'Press Start 2P', cursive; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 35px; height: 50px; background: var(--m-yellow); border: 3px solid #000; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #000; font-size: 18px; opacity: 0; z-index: -1; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .mario-pop-link { display: block; text-decoration: none !important; transition: transform 0.1s steps(2); } .brick-shell { background: var(--m-brick); border: 4px solid #000; padding: 5px; position: relative; box-shadow: inset 4px 4px 0 #ff704d, inset -4px -4px 0 #601000, 6px 6px 0 rgba(0, 0, 0, 0.3); } .brick-img-box { border: 3px solid #000; overflow: hidden; background: #000; } .brick-img-box img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; } .brick-label-plate { background: #000; color: #fff; font-family: 'Press Start 2P', cursive; font-size: 8px; text-align: center; padding: 6px 2px; margin-top: -4px; border: 3px solid #000; border-top: none; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2); } .mario-pop-card-wrap:hover .mario-pop-link { transform: translateY(-25px); } .mario-pop-card-wrap:hover .brick-shell { background: var(--m-yellow); } .mario-pop-card-wrap:hover::before { opacity: 1; top: -30px; animation: coinSpin 0.6s infinite steps(4); } @keyframes coinSpin { from { transform: translate(-50%, -50%) rotateY(0); } to { transform: translate(-50%, -50%) rotateY(360deg); } } .mario-machine-box { background: var(--m-metal); border: 6px solid #000; padding: 30px; position: relative; background-image: radial-gradient(#000 15%, transparent 15%); background-size: 30px 30px; box-shadow: inset 0 0 40px #000, 10px 10px 0 rgba(0, 0, 0, 0.2); } .machine-header { font-family: 'Press Start 2P', cursive; color: var(--m-yellow); font-size: 16px; margin-bottom: 25px; display: flex; align-items: center; text-shadow: 3px 3px 0 #000; } .blinking-lights { position: absolute; top: 15px; right: 20px; display: flex; gap: 8px; } .light { width: 8px; height: 8px; border: 2px solid #000; animation: blink 0.8s infinite steps(2); } .red { background: #EA0404; } .yellow { background: #f1c40f; animation-delay: 0.2s; } .machine-content { color: #ecf0f1; font-size: 14px; line-height: 1.8; position: relative; transition: max-height 0.4s steps(4); } .content-collapsed { max-height: 140px; overflow: hidden; } .content-expanded { max-height: 5000px !important; } .content-fade-overlay { position: absolute; bottom: 0; left: 0; right: 0; height: 70px; background: linear-gradient(to bottom, transparent, var(--m-metal)); pointer-events: none; } .content-expanded .content-fade-overlay { display: none; } .mario-cmd-btn { background: #000; color: var(--m-green); border: 3px solid var(--m-green); padding: 10px 25px; font-family: 'Press Start 2P', cursive; font-size: 12px; cursor: pointer; margin-top: 15px; box-shadow: 4px 4px 0 #145a32; } .mario-cmd-btn:hover { background: var(--m-green); color: #000; } @keyframes blink { 50% { opacity: 0.3; } }