Drop 001 – Snowman Golf

Or link as an external asset: ═══════════════════════════════════════════════════════════════ */ /* ── Overlay ── */ .ps-popup-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 999999; opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s ease; padding: 20px; } .ps-popup-overlay.ps-active { opacity: 1; visibility: visible; } .ps-popup-overlay.ps-active .ps-popup { transform: translateY(0) scale(1); } /* ── Popup Card ── */ .ps-popup { position: relative; background: #111; border-radius: 16px; max-width: 520px; width: 100%; overflow: hidden; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06); transform: translateY(30px) scale(0.96); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } /* ── Visual Header ── */ .ps-popup-visual { position: relative; height: 140px; background: linear-gradient(135deg, #06281c 0%, #0a3d2a 50%, #06281c 100%); overflow: hidden; display: flex; align-items: center; justify-content: center; } .ps-swoosh { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 50% at 20% 80%, rgba(52, 211, 153, 0.12) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 80% 20%, rgba(245, 158, 11, 0.08) 0%, transparent 50%); } .ps-swoosh::before { content: ''; position: absolute; top: -30px; right: -40px; width: 200px; height: 200px; border: 2px solid rgba(52, 211, 153, 0.15); border-radius: 50%; animation: ps-pulse-ring 3s ease-in-out infinite; } .ps-swoosh::after { content: ''; position: absolute; bottom: -20px; left: -30px; width: 140px; height: 140px; border: 2px solid rgba(245, 158, 11, 0.1); border-radius: 50%; animation: ps-pulse-ring 3s ease-in-out 1.5s infinite; } @keyframes ps-pulse-ring { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.15); opacity: 1; } } .ps-athlete-silhouette { position: relative; z-index: 2; color: rgba(52, 211, 153, 0.25); width: 80px; height: 112px; } .ps-athlete-silhouette svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 12px rgba(52, 211, 153, 0.2)); } /* ── Content Area ── */ .ps-popup-content { padding: 28px 32px 32px; text-align: center; } .ps-badge { display: inline-block; background: linear-gradient(90deg, #f59e0b, #d97706); color: #fff; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; padding: 5px 14px; border-radius: 20px; margin-bottom: 14px; animation: ps-badge-glow 2s ease-in-out infinite alternate; } @keyframes ps-badge-glow { from { box-shadow: 0 0 8px rgba(245, 158, 11, 0.3); } to { box-shadow: 0 0 20px rgba(245, 158, 11, 0.6); } } .ps-title { font-size: 26px; font-weight: 900; color: #fff; letter-spacing: -0.8px; line-height: 1.15; margin-bottom: 10px; text-transform: uppercase; } .ps-title .ps-highlight { background: linear-gradient(90deg, #34d399, #fbbf24); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .ps-subtitle { font-size: 14px; color: #a0a8b8; line-height: 1.55; margin-bottom: 24px; } /* ── Form ── */ .ps-form { display: flex; flex-direction: column; gap: 14px; } .ps-field { text-align: left; } .ps-field label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #8892a0; margin-bottom: 6px; } .ps-field input, .ps-field select { width: 100%; padding: 13px 16px; background: #1a1f2e; border: 1.5px solid #2a3142; border-radius: 10px; color: #fff; font-size: 15px; font-family: inherit; outline: none; transition: border-color 0.2s, box-shadow 0.2s; -webkit-appearance: none; appearance: none; } .ps-field input::placeholder { color: #556070; } .ps-field input:focus, .ps-field select:focus { border-color: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.12); } .ps-field select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238892a0' d='M6 7.4L.6 2 2 .6l4 4 4-4 1.4 1.4z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; } .ps-field select option { background: #1a1f2e; color: #fff; } .ps-error { display: none; font-size: 12px; color: #ff5555; margin-top: 5px; } .ps-field.ps-invalid input, .ps-field.ps-invalid select { border-color: #ff5555; } .ps-field.ps-invalid .ps-error { display: block; } /* ── CTA Button ── */ .ps-cta { width: 100%; padding: 15px 24px; margin-top: 4px; background: linear-gradient(90deg, #34d399, #10b981); border: none; border-radius: 10px; color: #000; font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; cursor: pointer; transition: transform 0.15s, box-shadow 0.2s; font-family: inherit; } .ps-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(52, 211, 153, 0.35); } .ps-cta:active { transform: translateY(0); } /* ── Disclaimer ── */ .ps-disclaimer { font-size: 11px; color: #556070; margin-top: 16px; line-height: 1.5; } /* ── Close Button ── */ .ps-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%; color: #8892a0; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s; z-index: 10; } .ps-close:hover { background: rgba(245, 158, 11, 0.9); color: #fff; border-color: transparent; } /* ── Success State ── */ .ps-success-state { display: none; padding: 40px 24px; text-align: center; } .ps-success-state.ps-visible { display: block; } .ps-success-icon { width: 64px; height: 64px; margin: 0 auto 20px; background: linear-gradient(135deg, #34d399, #fbbf24); border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: ps-success-pop 0.5s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes ps-success-pop { 0% { transform: scale(0); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } } .ps-success-icon svg { width: 32px; height: 32px; color: #000; } .ps-success-title { font-size: 22px; font-weight: 900; color: #fff; margin-bottom: 8px; text-transform: uppercase; } .ps-success-msg { font-size: 14px; color: #a0a8b8; line-height: 1.55; margin-bottom: 20px; } .ps-success-code { display: inline-block; background: #1a1f2e; border: 2px dashed #34d399; border-radius: 10px; padding: 12px 28px; font-size: 20px; font-weight: 900; letter-spacing: 2px; color: #34d399; font-family: 'SF Mono', Monaco, monospace; margin-bottom: 16px; } .ps-success-note { font-size: 12px; color: #556070; } /* ── Mobile Optimizations ── */ @media (max-width: 480px) { .ps-popup-overlay { padding: 0; align-items: flex-end; } .ps-popup { border-radius: 16px 16px 0 0; max-width: 100%; transform: translateY(100%) scale(1); } .ps-popup-overlay.ps-active .ps-popup { transform: translateY(0) scale(1); } .ps-popup-visual { height: 110px; } .ps-popup-content { padding: 22px 20px 28px; } .ps-title { font-size: 22px; } .ps-subtitle { font-size: 13px; } } /* ── Reduced Motion ── */ @media (prefers-reduced-motion: reduce) { .ps-popup-overlay, .ps-popup, .ps-swoosh::before, .ps-swoosh::after, .ps-badge, .ps-success-icon { animation: none !important; transition: none !important; } }