<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Leave a Tip — Second Chances</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Source+Sans+3:wght@400;600&display=swap" rel="stylesheet"> <style> *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --ink: #1a1208; --warm: #f5efe4; --gold: #c8923a; --gold-lt: #e8b96a; --white: #fffdf8; } body { background: var(--ink); color: var(--warm); font-family: 'Source Sans 3', sans-serif; min-height: 100vh; display: flex; flex-direction: column; align-items: center; } .fretboard { width: 100%; height: 6px; background: repeating-linear-gradient( 90deg, var(--gold) 0px, var(--gold) 2px, transparent 2px, transparent 48px ); opacity: 0.6; } .page { width: 100%; max-width: 480px; padding: 0 24px 60px; display: flex; flex-direction: column; align-items: center; } .header { text-align: center; padding: 36px 0 28px; width: 100%; } .duo-name { font-family: 'Playfair Display', serif; font-size: clamp(2.4rem, 8vw, 3.2rem); font-weight: 900; line-height: 1; letter-spacing: -0.02em; color: var(--white); } .duo-name span { color: var(--gold); } .tagline { margin-top: 10px; font-size: 0.85rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-lt); opacity: 0.8; } .divider { display: flex; align-items: center; gap: 12px; width: 100%; margin: 4px 0 28px; } .divider-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold) 40%, transparent); opacity: 0.4; } .prompt { font-size: 1.05rem; line-height: 1.6; text-align: center; color: var(--warm); opacity: 0.88; margin-bottom: 28px; max-width: 360px; } .tip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; margin-bottom: 12px; } .tip-btn { background: transparent; border: 1.5px solid var(--gold); border-radius: 4px; color: var(--white); font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700; padding: 20px 12px 16px; cursor: pointer; text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: background 0.15s, border-color 0.15s; } .tip-btn:hover { border-color: var(--gold-lt); background: rgba(200,146,58,0.08); } .tip-btn .amount { color: var(--gold); font-size: 1.8rem; } .tip-btn .label { font-family: 'Source Sans 3', sans-serif; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--warm); opacity: 0.6; } .custom-row { width: 100%; margin-bottom: 28px; } .custom-label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-lt); opacity: 0.7; margin-bottom: 8px; display: block; } .custom-inner { display: flex; gap: 10px; } .custom-input-wrap { flex: 1; position: relative; } .dollar-sign { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--gold); font-family: 'Playfair Display', serif; font-size: 1.1rem; pointer-events: none; } .custom-input { width: 100%; background: rgba(255,255,255,0.05); border: 1.5px solid rgba(200,146,58,0.4); border-radius: 4px; color: var(--white); font-family: 'Source Sans 3', sans-serif; font-size: 1.1rem; padding: 14px 14px 14px 32px; outline: none; transition: border-color 0.15s; } .custom-input:focus { border-color: var(--gold); } .custom-input::placeholder { color: rgba(245,239,228,0.3); } .custom-input::-webkit-outer-spin-button, .custom-input::-webkit-inner-spin-button { -webkit-appearance: none; } .custom-input[type=number] { -moz-appearance: textfield; } .send-btn { background: var(--gold); border: none; border-radius: 4px; color: var(--ink); font-family: 'Source Sans 3', sans-serif; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.06em; padding: 14px 22px; cursor: pointer; transition: background 0.15s; white-space: nowrap; } .send-btn:hover { background: var(--gold-lt); } .note { font-size: 0.78rem; color: var(--warm); opacity: 0.4; text-align: center; margin-bottom: 36px; line-height: 1.5; } .footer { margin-top: 48px; text-align: center; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--warm); opacity: 0.25; } </style> </head> <body> <div class="fretboard"></div> <div class="page"> <header class="header"> <div class="duo-name">Second <span>Chances</span></div> <div class="tagline">Mark & Art · Live in Santa Fe</div> </header> <div class="divider"> <div class="divider-line"></div> <span style="color:var(--gold);font-size:1.1rem;">🎸</span> <div class="divider-line"></div> </div> <p class="prompt"> If the music moved you tonight, leave a tip — it goes straight to Mark and Art and keeps the songs coming. </p> <div class="tip-grid"> <a class="tip-btn" href="https://venmo.com/mjinsantafe?txn=pay&amount=1¬e=Tip%20for%20Second%20Chances%20%F0%9F%8E8" target="_blank" rel="noopener"> <span class="amount">$1</span> <span class="label">Buck</span> </a> <a class="tip-btn" href="https://venmo.com/mjinsantafe?txn=pay&amount=5¬e=Tip%20for%20Second%20Chances%20%F0%9F%8E8" target="_blank" rel="noopener"> <span class="amount">$5</span> <span class="label">Five Bucks</span> </a> <a class="tip-btn" href="https://venmo.com/mjinsantafe?txn=pay&amount=10¬e=Tip%20for%20Second%20Chances%20%F0%9F%8E8" target="_blank" rel="noopener"> <span class="amount">$10</span> <span class="label">Ten Bucks</span> </a> <a class="tip-btn" href="#custom" onclick="document.getElementById('custom-amount').focus();return false;"> <span class="amount" style="font-size:1.2rem;padding-top:4px;">✏️</span> <span class="label">Name Your Bucks</span> </a> </div> <div class="custom-row"> <span class="custom-label">Name your amount</span> <div class="custom-inner"> <div class="custom-input-wrap"> <span class="dollar-sign">$</span> <input type="number" class="custom-input" id="custom-amount" placeholder="0" min="1" max="9999" inputmode="numeric"> </div> <button class="send-btn" onclick="sendCustomTip()">Send on Venmo</button> </div> </div> <p class="note">Opens the Venmo app on your phone. Cash works great too. 🤠</p> <footer class="footer">secondchancescountryband.com</footer> </div> <script> function sendCustomTip() { var val = parseFloat(document.getElementById('custom-amount').value); if (!val || val <= 0) { document.getElementById('custom-amount').focus(); return; } window.open('https://venmo.com/mjinsantafe?txn=pay&amount=' + val.toFixed(2) + '¬e=Tip%20for%20Second%20Chances%20%F0%9F%8E8', '_blank'); } document.getElementById('custom-amount').addEventListener('keydown', function(e) { if (e.key === 'Enter') sendCustomTip(); }); </script> </body> </html>