2025-10-31 20:09:31 +01:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light only">
<meta name="supported-color-schemes" content="light">
<title>Carbon Offset Receipt - Puffin Offset</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
color: #1e293b;
background: linear-gradient(135deg, #f1f5f9 0%, #e0f2fe 50%, #cffafe 100%);
margin: 0;
padding: 20px;
color-scheme: light only;
}
.container {
max-width: 650px;
margin: 0 auto;
background-color: #ffffff;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.header {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
padding: 40px 30px;
text-align: center;
color: #ffffff;
}
.logo {
width: 120px;
height: auto;
margin-bottom: 20px;
}
.header h1 {
margin: 0 0 10px 0;
font-size: 32px;
font-weight: bold;
}
.header p {
margin: 0;
font-size: 16px;
opacity: 0.95;
}
.success-badge {
background-color: #ffffff;
width: 80px;
height: 80px;
border-radius: 50%;
margin: -40px auto 30px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
}
.checkmark {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #10b981;
position: relative;
}
.checkmark:after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 28px;
font-weight: bold;
}
.content {
padding: 30px;
}
.section-title {
font-size: 24px;
font-weight: bold;
color: #1e293b;
margin: 0 0 20px 0;
padding-bottom: 12px;
border-bottom: 3px solid #e2e8f0;
}
.carbon-highlight {
background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
border-left: 6px solid #10b981;
border-radius: 16px;
padding: 30px;
margin: 20px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.carbon-highlight .text {
flex: 1;
}
.carbon-highlight .label {
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
color: #065f46;
font-weight: 600;
margin-bottom: 8px;
}
.carbon-highlight .value {
font-size: 42px;
font-weight: bold;
color: #047857;
line-height: 1;
}
.carbon-highlight .icon {
width: 64px;
height: 64px;
opacity: 0.6;
}
.detail-row {
display: flex;
justify-content: space-between;
padding: 14px 0;
border-bottom: 1px solid #e2e8f0;
}
.detail-row:last-child {
border-bottom: none;
}
.detail-label {
color: #475569;
font-weight: 600;
font-size: 15px;
}
.detail-value {
color: #0f172a;
font-weight: 700;
font-size: 15px;
text-align: right;
}
.pricing-box {
background-color: #f8fafc;
border-radius: 12px;
padding: 24px;
margin: 24px 0;
}
.pricing-row {
display: flex;
justify-content: space-between;
margin-bottom: 12px;
}
.pricing-total {
border-top: 2px solid #cbd5e1;
padding-top: 16px;
margin-top: 16px;
}
.pricing-total .label {
font-size: 18px;
font-weight: bold;
color: #1e293b;
}
.pricing-total .value {
font-size: 32px;
font-weight: bold;
color: #2563eb;
}
.metadata-box {
background: linear-gradient(135deg, #f8fafc 0%, #dbeafe 100%) !important;
border-radius: 12px;
padding: 24px;
margin: 24px 0;
}
/* Force light mode for email clients */
@media (prefers-color-scheme: dark) {
body {
background: linear-gradient(135deg, #f1f5f9 0%, #e0f2fe 50%, #cffafe 100%) !important;
color: #1e293b !important;
}
.container {
background-color: #ffffff !important;
}
.metadata-box {
background: linear-gradient(135deg, #f8fafc 0%, #dbeafe 100%) !important;
}
.metadata-label, .metadata-value, .detail-label, .detail-value {
color: #0f172a !important;
}
}
.metadata-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.metadata-item {
break-inside: avoid;
}
.metadata-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #0f172a;
font-weight: 700;
margin-bottom: 6px;
}
.metadata-value {
color: #0f172a;
font-weight: 600;
font-size: 14px;
word-break: break-all;
font-family: 'Courier New', monospace;
}
.status-badge {
display: inline-block;
padding: 8px 16px;
border-radius: 20px;
font-size: 13px;
font-weight: bold;
background-color: #dcfce7;
color: #166534;
}
.comparisons {
background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
border-radius: 16px;
padding: 32px;
margin: 30px 0;
color: white;
}
.comparisons-title {
font-size: 26px;
font-weight: bold;
text-align: center;
margin: 0 0 10px 0;
2025-10-31 20:53:04 +01:00
color: #ffffff !important;
2025-10-31 20:09:31 +01:00
}
.comparisons-subtitle {
text-align: center;
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
margin-bottom: 28px;
}
.comparisons-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.comparison-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
padding: 20px;
text-align: center;
}
.comparison-icon {
font-size: 36px;
margin-bottom: 12px;
}
.comparison-value {
font-size: 28px;
font-weight: bold;
color: #ffffff;
margin-bottom: 4px;
}
.comparison-unit {
font-size: 12px;
color: #a7f3d0;
margin-bottom: 12px;
}
.comparison-label {
font-size: 13px;
color: rgba(255, 255, 255, 0.9);
line-height: 1.4;
}
.portfolio-section {
margin: 30px 0;
padding: 30px;
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
border-radius: 16px;
}
.portfolio-title {
font-size: 22px;
font-weight: bold;
color: #065f46;
text-align: center;
margin: 0 0 24px 0;
}
.project-item {
display: flex;
align-items: center;
padding: 14px;
background-color: white;
border-radius: 10px;
margin-bottom: 12px;
border-left: 4px solid;
}
.project-color {
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 12px;
}
.project-info {
flex: 1;
}
.project-name {
font-weight: 600;
color: #1e293b;
font-size: 14px;
margin-bottom: 4px;
}
.project-type {
font-size: 12px;
color: #64748b;
}
.project-percentage {
font-weight: bold;
color: #047857;
font-size: 16px;
}
.footer {
background-color: #f8fafc;
padding: 30px;
text-align: center;
color: #94a3b8;
font-size: 13px;
}
.footer-note {
margin: 16px 0 8px;
color: #64748b;
font-size: 12px;
line-height: 1.6;
}
@media only screen and (max-width: 600px) {
.comparisons-grid {
grid-template-columns: 1fr;
}
.metadata-grid {
grid-template-columns: 1fr;
}
.carbon-highlight {
flex-direction: column;
text-align: center;
}
.carbon-highlight .icon {
margin-top: 16px;
}
}
</style>
</head>
<body>
<div class="container">
<!-- Header -->
<div class="header">
<img src="https://s3.puffinoffset.com/public/puffinOffset.png" alt="Puffin Offset" class="logo">
<h1>Order Confirmed</h1>
<p>Thank you for your carbon offset purchase</p>
</div>
<!-- Success Badge -->
<div class="success-badge">
<div class="checkmark"></div>
</div>
<!-- Content -->
<div class="content">
<h2 class="section-title">Order Summary</h2>
<!-- Carbon Offset Highlight -->
<div class="carbon-highlight">
<div class="text">
<div class="label">Carbon Offset</div>
<div class="value"> {{ tons }} tons CO₂</div>
</div>
<div class="icon" style="font-size: 64px; opacity: 0.6;">🌱</div>
</div>
<!-- Pricing Breakdown -->
<div class="pricing-box" style="background-color: #f8fafc !important;">
<div class="pricing-row">
<span class="detail-label" style="color: #475569 !important;">Offset Cost</span>
2025-10-31 20:53:04 +01:00
<span class="detail-value" style="color: #0f172a !important;">$ {{ baseAmount }} </span>
2025-10-31 20:09:31 +01:00
</div>
<div class="pricing-row">
<span class="detail-label" style="color: #475569 !important;">Processing Fee (3%)</span>
2025-10-31 20:53:04 +01:00
<span class="detail-value" style="color: #0f172a !important;">$ {{ processingFee }} </span>
2025-10-31 20:09:31 +01:00
</div>
<div class="pricing-total">
<div class="pricing-row">
<span class="label">Total Paid</span>
2025-10-31 20:53:04 +01:00
<span class="value">$ {{ totalAmount }} </span>
2025-10-31 20:09:31 +01:00
</div>
</div>
</div>
<!-- Order Metadata -->
<div class="metadata-box" style="background: linear-gradient(135deg, #f8fafc 0%, #dbeafe 100%) !important;">
<div class="metadata-grid">
<div class="metadata-item">
<div class="metadata-label" style="color: #0f172a !important;">PAYMENT ID</div>
<div class="metadata-value" style="color: #0f172a !important;"> {{ stripeSessionId }} </div>
</div>
<div class="metadata-item">
<div class="metadata-label" style="color: #0f172a !important;">ORDER ID</div>
<div class="metadata-value" style="color: #0f172a !important;"> {{ orderId }} </div>
</div>
<div class="metadata-item">
<div class="metadata-label" style="color: #0f172a !important;">STATUS</div>
<div class="metadata-value" style="color: #0f172a !important;">
<span class="status-badge">Confirmed</span>
</div>
</div>
<div class="metadata-item">
<div class="metadata-label" style="color: #0f172a !important;">DATE</div>
<div class="metadata-value" style="color: #0f172a !important;"> {{ date }} </div>
</div>
</div>
</div>
<!-- Portfolio Distribution (if available) -->
{{ # if projects }}
<div class="portfolio-section">
<h3 class="portfolio-title">Your Carbon Offset Distribution</h3>
<p style="text-align: center; color: #065f46; margin-bottom: 20px; font-size: 14px;">
Your {{ tons }} tons of CO₂ offsets are distributed across these verified projects:
</p>
{{ # each projects }}
<div class="project-item" style="border-left-color: {{ this .color }} ">
<div class="project-color" style="background-color: {{ this .color }} "></div>
<div class="project-info">
<div class="project-name"> {{ this .name }} </div>
<div class="project-type"> {{ this .type }} </div>
</div>
<div class="project-percentage"> {{ this .percentage }} %</div>
</div>
{{ / each }}
</div>
{{ / if }}
<!-- Carbon Impact Comparisons -->
{{ # if comparisons }}
<div class="comparisons">
<h3 class="comparisons-title">Your Impact</h3>
<p class="comparisons-subtitle">Here's what your offset is equivalent to:</p>
<div class="comparisons-grid">
{{ # each comparisons }}
<div class="comparison-card">
<div class="comparison-icon"> {{ this .icon }} </div>
<div class="comparison-value"> {{ this .value }} </div>
<div class="comparison-unit"> {{ this .unit }} </div>
<div class="comparison-label"> {{ this .label }} </div>
</div>
{{ / each }}
</div>
<p style="text-align: center; font-size: 11px; color: rgba(255,255,255,0.6); margin-top: 20px; margin-bottom: 0;">
Equivalencies calculated using EPA 2024, DEFRA 2024, and IMO 2024 verified conversion factors.
</p>
</div>
{{ / if }}
<div class="footer-note">
<strong>What happens next?</strong><br>
Your carbon offset order has been processed successfully. The offset will be registered with our verified climate projects, and your impact will be permanently recorded. You can keep this email as your official receipt for tax purposes.
</div>
</div>
<!-- Footer -->
<div class="footer">
<p style="margin: 0 0 8px 0;"><strong>Thank you for taking action on climate change!</strong></p>
<p style="margin: 0;">This is an automated receipt from Puffin Offset.</p>
<p style="margin: 8px 0 0 0;">© 2025 Puffin Offset</p>
</div>
</div>
</body>
</html>
