Acid Lime Dev Summit Ticket 3D

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="ticket-wrapper-471"><div class="ticket-471"><div class="t-main"><div class="t-content"><div class="t-header"><div class="t-logo">⚡ REACT_JS</div><span class="t-type">SPEAKER</span></div><h2 class="t-title">NODE_CONF</h2><p class="t-subtitle">Backend Systems Summit</p><div class="t-details"><div class="t-detail-item"><span class="t-label">SPEAKER</span><span class="t-value">Sarah Connor</span></div><div class="t-detail-item"><span class="t-label">DATE</span><span class="t-value">OCT 05, 2026</span></div><div class="t-detail-item"><span class="t-label">TRACK</span><span class="t-value">Async Core</span></div><div class="t-detail-item"><span class="t-label">ROOM</span><span class="t-value">Stage B</span></div></div></div></div><div class="t-perforation"><div class="t-perf-line"></div></div><div class="t-stub"><div class="t-barcode-container"><div class="t-barcode"></div><span class="t-barcode-id">NODE-2026-SPK</span></div><div class="t-admit"><span class="t-admit-text">VIP</span><div class="t-admit-num">00</div></div></div></div></div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.ticket-wrapper-471 { --t-bg: #0d1a03; --t-bg-light: #182e05; --t-accent: #84cc16; --t-accent-glow: rgba(132, 204, 22, 0.5); font-size: 10px; perspective: 1000px; display: inline-block; }
.ticket-471 { position: relative; width: 22em; color: #fff; font-family: system-ui, sans-serif; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); filter: drop-shadow(0 15px 30px rgba(132, 204, 22, 0.25)); }
.ticket-wrapper-471:hover .ticket-471 { transform: rotateX(12deg) rotateY(-10deg) scale(1.03); }
.ticket-471 .t-main { padding: 2em; background: radial-gradient(circle at bottom left, transparent 1em, var(--t-bg) 1.05em), radial-gradient(circle at bottom right, transparent 1em, var(--t-bg) 1.05em); background-size: 51% 100%; background-position: bottom left, bottom right; background-repeat: no-repeat; border-top-left-radius: 1em; border-top-right-radius: 1em; border: 1px solid rgba(132, 204, 22, 0.4); border-bottom: none; }
.ticket-471 .t-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5em; }
.ticket-471 .t-logo { font-weight: 900; font-size: 1.1em; color: #bef264; }
.ticket-471 .t-type { font-size: 0.6em; border: 1px solid var(--t-accent); color: #d9f99d; padding: 0.3em 0.8em; border-radius: 99em; font-weight: 800; background: rgba(132, 204, 22, 0.15); }
.ticket-471 .t-title { font-size: 2.3em; font-weight: 900; margin: 0; color: #f7fee7; text-shadow: 0 0 10px var(--t-accent-glow); }
.ticket-471 .t-subtitle { color: #65a30d; font-size: 0.85em; margin: 0.2em 0 1.8em 0; font-weight: 600; }
.ticket-471 .t-details { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.ticket-471 .t-label { font-size: 0.6em; color: #4d7c0f; font-weight: 800; display: block; }
.ticket-471 .t-value { font-size: 1.05em; font-weight: 700; color: #ecfccb; }
.ticket-471 .t-perforation { display: flex; height: 1em; align-items: center; background: var(--t-bg); }
.ticket-471 .t-perf-line { flex-grow: 1; border-top: 2px dashed rgba(132, 204, 22, 0.4); margin: 0 1.2em; }
.ticket-471 .t-stub { padding: 1.5em 2em; background: radial-gradient(circle at top left, transparent 1em, var(--t-bg-light) 1.05em), radial-gradient(circle at top right, transparent 1em, var(--t-bg-light) 1.05em); background-size: 51% 100%; background-position: top left, top right; background-repeat: no-repeat; border-bottom-left-radius: 1em; border-bottom-right-radius: 1em; border: 1px solid rgba(132, 204, 22, 0.4); border-top: none; display: flex; justify-content: space-between; align-items: center; }
.ticket-471 .t-barcode { width: 9em; height: 2.5em; background: repeating-linear-gradient(90deg, #a3e635 0, #a3e635 2px, transparent 2px, transparent 4px, #a3e635 4px, #a3e635 7px, transparent 7px, transparent 9px); }
.ticket-471 .t-barcode-id { font-family: monospace; font-size: 0.65em; color: #65a30d; display: block; margin-top: 0.3em; }
.ticket-471 .t-admit-text { font-size: 0.6em; color: #65a30d; font-weight: 800; display: block; }
.ticket-471 .t-admit-num { font-size: 2.2em; font-weight: 900; color: var(--t-accent); text-shadow: 0 0 10px var(--t-accent-glow); }