<!DOCTYPE html>

<head>

<title>TipJar — Stop Losing Tips You've Already Earned</title>

<style>

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{

--black:#0a0908;

--dark:#111009;

--cream:#f0ede6;

--white:#f7f4ef;

--gold:#c9a84c;

--mid:#8a8278;

--rule-dark:rgba(247,244,239,0.07);

--rule-lite:#ddd8ce;

--serif:'Instrument Serif',Georgia,serif;

--sans:'Geist',system-ui,-apple-system,sans-serif;

}

html{background:var(--black);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}

body{font-family:var(--sans);font-weight:300;color:var(--black);overflow-x:hidden}

body::after{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");opacity:0.024;pointer-events:none;z-index:9000}

.wrap{max-width:520px;margin:0 auto;padding:0 24px}

.reveal{opacity:0;transform:translateY(18px);transition:opacity 0.75s cubic-bezier(0.2,0,0.2,1),transform 0.75s cubic-bezier(0.2,0,0.2,1)}

.reveal.d1{transition-delay:0.08s}.reveal.d2{transition-delay:0.16s}.reveal.d3{transition-delay:0.24s}

.reveal.d4{transition-delay:0.32s}.reveal.d5{transition-delay:0.40s}.reveal.d6{transition-delay:0.48s}

.reveal.d7{transition-delay:0.56s}.reveal.d8{transition-delay:0.64s}.reveal.in{opacity:1;transform:translateY(0)}

.kicker{font-size:10px;font-weight:600;letter-spacing:0.20em;text-transform:uppercase}

.kicker-dark{color:rgba(247,244,239,0.25)}

.kicker-lite{color:var(--mid)}

nav{position:sticky;top:0;z-index:100;background:rgba(10,9,8,0.93);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--rule-dark)}

.nav-inner{max-width:520px;margin:0 auto;padding:0 24px;height:56px;display:flex;align-items:center;justify-content:space-between}

.nav-brand{font-family:var(--serif);font-style:italic;font-size:18px;font-weight:400;color:var(--white);letter-spacing:-0.01em}

.nav-link{font-size:11px;font-weight:500;color:rgba(247,244,239,0.38);text-decoration:none;letter-spacing:0.04em;transition:color 0.2s}

.nav-link:hover{color:rgba(247,244,239,0.7)}

#hero{background:var(--black);min-height:100dvh;display:flex;flex-direction:column;justify-content:space-between;padding:52px 24px 48px;max-width:520px;margin:0 auto}

.hero-eyebrow{font-size:10px;font-weight:600;letter-spacing:0.22em;text-transform:uppercase;color:rgba(247,244,239,0.2);animation:heroUp 0.7s cubic-bezier(0.2,0,0.2,1) 0s both}

.hero-mid{flex:1;display:flex;flex-direction:column;justify-content:center;padding:20px 0 28px}

.hero-quote{font-family:var(--serif);font-style:italic;font-size:clamp(34px,9vw,46px);line-height:1.14;color:var(--white);letter-spacing:-0.02em;margin-bottom:22px;animation:heroUp 0.8s cubic-bezier(0.2,0,0.2,1) 0.12s both}

.hero-heard{font-size:15px;font-weight:300;color:rgba(247,244,239,0.42);line-height:1.75;margin-bottom:20px;animation:heroUp 0.8s cubic-bezier(0.2,0,0.2,1) 0.26s both}

.hero-problem{font-size:15px;font-weight:400;color:rgba(247,244,239,0.68);line-height:1.65;margin-bottom:20px;animation:heroUp 0.8s cubic-bezier(0.2,0,0.2,1) 0.38s both}

.hero-desc{font-size:14px;font-weight:300;color:rgba(247,244,239,0.36);line-height:1.8;animation:heroUp 0.8s cubic-bezier(0.2,0,0.2,1) 0.50s both}

.hero-bottom{display:flex;flex-direction:column;gap:14px;animation:heroUp 0.8s cubic-bezier(0.2,0,0.2,1) 0.64s both}

.hero-proof{text-align:center;font-size:10px;font-weight:300;color:rgba(247,244,239,0.18);letter-spacing:0.03em}

@keyframes heroUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

.btn{display:block;width:100%;border:none;cursor:pointer;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:0.13em;text-transform:uppercase;text-align:center;text-decoration:none;padding:19px 24px;border-radius:0;transition:opacity 0.2s,transform 0.14s;-webkit-tap-highlight-color:transparent;user-select:none}

.btn:active{transform:scale(0.97)}

.btn-white{background:var(--white);color:var(--black)}

.btn-white:hover{opacity:0.88}

.btn-black{background:var(--black);color:var(--white)}

.btn-black:hover{opacity:0.85}

#form-section{background:var(--dark);border-top:1px solid var(--rule-dark);border-bottom:1px solid var(--rule-dark);padding:72px 24px}

.form-hed{font-family:var(--serif);font-size:clamp(26px,7vw,34px);font-weight:400;color:var(--white);line-height:1.18;letter-spacing:-0.015em;margin-bottom:8px}

.form-sub{font-size:14px;font-weight:300;color:rgba(247,244,239,0.35);line-height:1.7;margin-bottom:36px}

.tj-form{display:flex;flex-direction:column;gap:12px;margin-bottom:4px}

.tj-field{display:flex;flex-direction:column;gap:6px}

.tj-label{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:rgba(247,244,239,0.30)}

.tj-input{font-family:var(--sans);font-size:14px;font-weight:300;color:var(--white);background:rgba(247,244,239,0.05);border:1px solid rgba(247,244,239,0.12);border-radius:0;padding:15px 16px;width:100%;outline:none;transition:border-color 0.2s ease;-webkit-appearance:none;appearance:none}

.tj-input::placeholder{color:rgba(247,244,239,0.18)}

.tj-input:focus{border-color:rgba(247,244,239,0.35)}

.tj-select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(247,244,239,0.25)' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:44px}

.tj-select option{background:#1a1816;color:#f7f4ef}

.tj-submit{display:block;width:100%;margin-top:8px;padding:19px 24px;background:var(--white);color:var(--black);border:none;border-radius:0;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:0.13em;text-transform:uppercase;text-align:center;cursor:pointer;transition:opacity 0.2s ease,transform 0.14s ease;-webkit-tap-highlight-color:transparent}

.tj-submit:hover{opacity:0.88}

.tj-submit:active{transform:scale(0.97)}

.form-trust{font-size:10px;font-weight:300;color:rgba(247,244,239,0.18);text-align:center;margin-top:14px;line-height:1.65;letter-spacing:0.02em}

.form-audience{font-size:11px;font-weight:400;color:rgba(247,244,239,0.22);text-align:center;margin-top:16px;line-height:1.7;letter-spacing:0.01em}

#how{background:var(--cream);padding:80px 24px}

.section-hed{font-family:var(--serif);font-size:clamp(26px,7vw,34px);font-weight:400;color:var(--black);line-height:1.2;letter-spacing:-0.015em;margin-bottom:40px}

.steps{display:flex;flex-direction:column}

.step{display:grid;grid-template-columns:48px 1fr;gap:0 18px;padding:24px 0;border-top:1px solid var(--rule-lite);align-items:start}

.step:last-child{border-bottom:1px solid var(--rule-lite)}

.step-num{font-family:var(--serif);font-size:38px;font-weight:400;color:#d8d2c8;line-height:1;padding-top:2px}

.step-title{font-size:16px;font-weight:500;color:var(--black);line-height:1.25;margin-bottom:6px;letter-spacing:-0.01em}

.step-body{font-size:13px;font-weight:300;color:#5a5650;line-height:1.75}

#insight{background:var(--black);padding:80px 24px}

.insight-kicker{margin-bottom:28px}

.insight-lines{display:flex;flex-direction:column;gap:0;margin-bottom:28px}

.insight-italic{font-family:var(--serif);font-style:italic;font-size:clamp(20px,5.5vw,26px);color:rgba(247,244,239,0.88);line-height:1.35;padding:10px 0;border-bottom:1px solid rgba(247,244,239,0.06)}

.insight-italic:first-child{border-top:1px solid rgba(247,244,239,0.06)}

.insight-missing{font-size:14px;font-weight:300;color:rgba(247,244,239,0.38);line-height:1.8;padding-top:24px;margin-bottom:16px}

.insight-close{font-size:15px;font-weight:400;color:rgba(247,244,239,0.62);line-height:1.6;letter-spacing:-0.01em}

#who{background:var(--white);padding:80px 24px}

.who-kicker{margin-bottom:28px}

.who-list{display:flex;flex-direction:column}

.who-item{font-family:var(--serif);font-size:clamp(24px,6.5vw,30px);font-weight:400;color:#c8c2b8;padding:14px 0;line-height:1;border-bottom:1px solid var(--rule-lite);transition:color 0.22s;cursor:default}

.who-item:first-child{border-top:1px solid var(--rule-lite)}

.who-item:hover{color:var(--black)}

.who-footer{font-size:13px;font-weight:300;color:var(--mid);margin-top:28px;line-height:1.65}

#why{background:var(--black);padding:80px 24px}

.why-hed{color:var(--white);margin-bottom:40px}

.benefit-list{display:flex;flex-direction:column}

.benefit{padding:20px 0;border-top:1px solid var(--rule-dark)}

.benefit:last-of-type{border-bottom:1px solid var(--rule-dark)}

.benefit-title{font-size:14px;font-weight:500;color:rgba(247,244,239,0.82);margin-bottom:5px;letter-spacing:-0.005em}

.benefit-body{font-size:13px;font-weight:300;color:rgba(247,244,239,0.32);line-height:1.75}

.why-footer{font-size:12px;font-weight:300;color:rgba(247,244,239,0.22);line-height:1.7;margin-top:28px}

#faq{background:var(--cream);padding:80px 24px}

.faq-hed{margin-bottom:40px}

.faq-list{display:flex;flex-direction:column}

details{border-top:1px solid var(--rule-lite)}

details:last-child{border-bottom:1px solid var(--rule-lite)}

summary{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 0;cursor:pointer;list-style:none;font-size:15px;font-weight:500;color:var(--black);line-height:1.4;letter-spacing:-0.01em;-webkit-tap-highlight-color:transparent;user-select:none}

summary::-webkit-details-marker{display:none}

.faq-icon{font-size:20px;font-weight:300;color:#c8c2b8;flex-shrink:0;line-height:1.4;transition:transform 0.25s cubic-bezier(0.2,0,0.2,1)}

details[open] .faq-icon{transform:rotate(45deg)}

.faq-answer{font-size:13px;font-weight:300;color:#5a5650;line-height:1.82;padding-bottom:20px}

#final{background:var(--black);padding:80px 24px;border-top:1px solid var(--rule-dark);text-align:center}

.final-hed{font-family:var(--serif);font-size:clamp(28px,7.5vw,38px);font-weight:400;color:var(--white);line-height:1.18;letter-spacing:-0.02em;margin-bottom:16px}

.final-sub{font-size:15px;font-weight:300;color:rgba(247,244,239,0.38);line-height:1.75;margin-bottom:36px}

footer{background:var(--black);padding:40px 24px;border-top:1px solid var(--rule-dark)}

.footer-inner{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:16px}

.footer-brand{font-family:var(--serif);font-style:italic;font-size:17px;font-weight:400;color:var(--white);letter-spacing:-0.01em}

.footer-tagline{font-family:var(--serif);font-style:italic;font-size:14px;color:rgba(247,244,239,0.22);line-height:1.55}

.footer-links{display:flex;gap:20px}

.footer-links a{font-size:11px;font-weight:300;color:rgba(247,244,239,0.2);text-decoration:none;letter-spacing:0.04em;transition:color 0.2s}

.footer-links a:hover{color:rgba(247,244,239,0.5)}

.footer-copy{font-size:10px;font-weight:300;color:rgba(247,244,239,0.14);letter-spacing:0.04em}

@media(min-width:520px){

#hero,#form-section,#how,#insight,#who,#why,#faq,#final,footer{padding-left:40px;padding-right:40px}

.nav-inner{padding-left:40px;padding-right:40px}

}

</style>

</head>

<body>

<nav>

<span class="nav-brand">TipJar</span>

<a class="nav-link" href="#form-section">Get Early Access →</a>

</div>

</nav>

<div class="hero-eyebrow">TipJar · For service workers</div>

<h1 class="hero-quote">"I would've tipped you if I had cash."</h1>

<p class="hero-heard">You've heard it before.<br>Probably hundreds of times.</p>

<p class="hero-problem">The problem isn't generosity.<br>The problem is cash.</p>

<p class="hero-desc">TipJar gives customers a simple way to tip you from their phone when they don't carry cash.</p>

</div>

<a href="#form-section" class="btn btn-white">Join Founding Members</a>

<p class="hero-proof">No app required for customers  ·  No cash needed</p>

</div>

</section>

<h2 class="form-hed reveal">Reserve your spot.</h2>

<p class="form-sub reveal d1">Be among the first to access TipJar when we launch.</p>

<label class="tj-label" for="tj-fname">First Name</label>

</div>

<label class="tj-label" for="tj-email">Email Address</label>

</div>

<option value="" disabled selected>Select your role</option>

<option value="Bartender">Bartender</option>

<option value="Valet">Valet</option>

<option value="Hotel Staff">Hotel Staff</option>

<option value="Bellman">Bellman</option>

<option value="Casino Dealer">Casino Dealer</option>

<option value="Performer">Performer</option>

<option value="Driver">Driver</option>

<option value="Tour Guide">Tour Guide</option>

<option value="Other">Other</option>

</select>

</div>

</div>

<button type="submit" class="tj-submit">Reserve My Founding Member Spot</button>

</form>

<p class="form-trust reveal d3">No spam. Just occasional updates as we build TipJar.</p>

<p class="form-audience reveal d4">Built for bartenders, valets, hotel staff, casino dealers,<br>performers, drivers, and other tipped workers.</p>

</div>

</section>

<p class="kicker kicker-lite reveal">How it works</p>

<h2 class="section-hed reveal d1">Three steps.<br>No friction.</h2>

<div>

<p class="step-body">Your customer taps your TipJar device with their phone. No app required on their end.</p>

</div>

<div>

<p class="step-body">Your tip page opens instantly. They choose an amount and pay.</p>

</div>

<div>

</div>

</section>

<p class="kicker kicker-dark insight-kicker reveal">The part that gets overlooked</p>

<div class="insight-italic reveal d1">Customers want to tip you.</div>

<div class="insight-italic reveal d2">You deserve the tip.</div>

</div>

<p class="insight-missing reveal d3">The only thing missing is a way for them to pay without cash.</p>

<p class="insight-close reveal d4">That's the gap TipJar exists to close.</p>

</div>

</section>

<p class="kicker kicker-lite who-kicker reveal">Built for people like you</p>

<div class="who-item reveal d1">Bartenders</div>

<div class="who-item reveal d2">Valets</div>

<div class="who-item reveal d3">Hotel Staff & Bellmen</div>

<div class="who-item reveal d4">Casino Dealers</div>

<div class="who-item reveal d5">Performers</div>

<div class="who-item reveal d6">Drivers</div>

<div class="who-item reveal d7">Tour Guides</div>

</div>

<p class="who-footer reveal d8">If people tip you for your work, TipJar is built for you.</p>

</div>

</section>

<div class="benefit-title">Early access.</div>

<div class="benefit-body">Use TipJar before it opens to everyone.</div>

</div>

<div class="benefit-title">Early-adopter pricing and benefits.</div>

<div class="benefit-body">Founding members receive special pricing and perks not available after launch.</div>

</div>

<div class="benefit-title">Help shape the product.</div>

<div class="benefit-body">We're building this with the workers who need it. Your feedback will directly influence what gets built.</div>

</div>

<p class="why-footer reveal d4">Join now to get early access and help shape TipJar before launch.</p>

</div>

</section>

<p class="kicker kicker-lite faq-hed reveal">A few questions, answered</p>

<summary>What is TipJar? <span class="faq-icon">+</span></summary>

<p class="faq-answer">A small device — a card or wristband — that customers tap with their phone to tip you. Their tip page opens instantly. No app needed on their end.</p>

</details>

<summary>When does it launch? <span class="faq-icon">+</span></summary>

<p class="faq-answer">We're building now. Founding members get access first.</p>

</details>

<p class="faq-answer">Pricing will be announced closer to launch. Founding members receive special early-adopter pricing.</p>

</details>

<summary>Do customers need to download anything? <span class="faq-icon">+</span></summary>

<p class="faq-answer">No. They tap. Their tip page opens in their phone's browser. That's it.</p>

</details>

<summary>Do I need my employer's permission? <span class="faq-icon">+</span></summary>

<p class="faq-answer">Every workplace is different. We recommend checking your employer's policies regarding tips and tip pooling. TipJar is designed to work alongside existing workplace practices.</p>

</details>

</div>

</section>

<h2 class="final-hed reveal">Stop losing tips<br>you've already earned.</h2>

<p class="final-sub reveal d1">Customers already want to tip you.<br>Now they can.</p>

<a href="#form-section" class="btn btn-white">Join Founding Members</a>

</div>

</section>

<div class="footer-brand">TipJar</div>

<div class="footer-tagline">"I would've tipped you if I had cash."<br>Not anymore.</div>

<a href="#">Privacy</a>

<a href="#">Contact</a>

</div>

</footer>

(function(){

var els=document.querySelectorAll('.reveal');

if(!els.length)return;

var io=new IntersectionObserver(function(entries){

entries.forEach(function(e){

if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target)}

});

},{threshold:0.1});

els.forEach(function(el){io.observe(el)});

})();

</script>

</body>

</html>