This commit is contained in:
jjbrunton committed 2025-12-30 15:55:57 +00:00
1 parent 5b97bc6f56
commit 5a7e62a578
104 files changed
+2986

No files matched your search

+94
View File
@@ -0,0 +1,94 @@
# Sauci Email Templates
Premium, on-brand email templates for Supabase authentication.
## Templates Included
| Template | Supabase Setting | Purpose |
|----------|------------------|---------|
| `confirmation.html` | Confirm signup | Email verification after user signs up |
| `magic-link.html` | Magic Link | Passwordless sign-in links |
| `password-reset.html` | Reset Password | Password recovery emails |
| `email-change.html` | Change Email Address | Confirm email address updates |
| `invite.html` | Invite user | Admin user invitations |
## How to Apply
### Option 1: Supabase Dashboard (Recommended)
1. Go to your Supabase project dashboard
2. Navigate to **Authentication** → **Email Templates**
3. For each template:
- Select the template type from the tabs
- Copy the HTML content from the corresponding `.html` file
- Paste into the **Body** field
- Update the **Subject** field (suggestions below)
- Click **Save**
### Option 2: Supabase CLI
```bash
# Update config.toml in supabase/config.toml
# Add template paths under [auth.email]
```
## Recommended Subject Lines
| Template | Subject Line |
|----------|-------------|
| Confirm signup | `Welcome to Sauci - Confirm Your Email` |
| Magic Link | `Your Sauci Sign In Link` |
| Reset Password | `Reset Your Sauci Password` |
| Change Email | `Confirm Your New Email Address - Sauci` |
| Invite user | `You've Been Invited to Sauci` |
## Template Variables
These templates use Supabase's Go template syntax:
- `{{ .ConfirmationURL }}` - The action URL (confirm, reset, sign in)
- `{{ .Email }}` - The user's email address (available but not used)
- `{{ .Token }}` - Raw token (available but not used)
## Design System
Templates match Sauci's premium glass-morphism aesthetic:
**Colors:**
- Primary: `#e94560` (Rose Pink)
- Secondary: `#9b59b6` (Purple)
- Background: `#0d0d1a` (Deep Dark)
- Surface: `#1a1a2e` / `#16213e`
- Text: `#ffffff` with varying opacity
**Features:**
- Gradient accent bar at top of cards
- Subtle border styling (rgba white 8%)
- Linear gradients for backgrounds
- Shadow effects on CTA buttons
- Responsive design for all devices
- Outlook/Windows Mail compatible
## Testing
1. Use Supabase's "Send test email" feature in the dashboard
2. Test on multiple email clients:
- Gmail (web & mobile)
- Apple Mail
- Outlook
- Yahoo Mail
## Customization
To customize for your needs:
1. **Logo**: Replace the text "Sauci" with an `<img>` tag if you have a logo image hosted
2. **Colors**: Find/replace the hex values to match any brand updates
3. **Copy**: Adjust the messaging to fit your tone
## Notes
- Templates use table-based layouts for maximum email client compatibility
- Inline styles are used (email clients strip `<style>` tags)
- Background gradients may not render in all clients; solid fallback colors are defined
- Test thoroughly before deploying to production
@@ -0,0 +1,119 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Confirm Your Email - Sauci</title>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
</head>
<body style="margin: 0; padding: 0; background-color: #0d0d1a; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #0d0d1a;">
<tr>
<td align="center" style="padding: 40px 20px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="max-width: 520px;">
<!-- Logo Section -->
<tr>
<td align="center" style="padding-bottom: 32px;">
<div style="font-size: 36px; font-weight: 700; background: linear-gradient(135deg, #e94560, #9b59b6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
Sauci
</div>
</td>
</tr>
<!-- Main Card -->
<tr>
<td>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08);">
<!-- Top Gradient Accent -->
<tr>
<td style="height: 4px; background: linear-gradient(90deg, #e94560, #9b59b6); border-radius: 16px 16px 0 0;"></td>
</tr>
<!-- Card Content -->
<tr>
<td style="padding: 40px 32px;">
<!-- Icon -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td align="center" style="padding-bottom: 24px;">
<div style="width: 64px; height: 64px; background: linear-gradient(135deg, rgba(233, 69, 96, 0.15), rgba(155, 89, 182, 0.15)); border-radius: 50%; display: inline-block; line-height: 64px; font-size: 28px;">
&#128140;
</div>
</td>
</tr>
</table>
<!-- Heading -->
<h1 style="margin: 0 0 16px 0; font-size: 24px; font-weight: 600; color: #ffffff; text-align: center; line-height: 1.3;">
Welcome to Sauci
</h1>
<!-- Subtext -->
<p style="margin: 0 0 32px 0; font-size: 15px; color: rgba(255, 255, 255, 0.6); text-align: center; line-height: 1.6;">
You're one step away from deepening your connection. Confirm your email to start your journey together.
</p>
<!-- CTA Button -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td align="center" style="padding-bottom: 32px;">
<a href="{{ .ConfirmationURL }}" target="_blank" style="display: inline-block; padding: 14px 40px; background: linear-gradient(135deg, #e94560, #9b59b6); color: #ffffff; text-decoration: none; font-size: 15px; font-weight: 600; border-radius: 12px; box-shadow: 0 8px 24px rgba(233, 69, 96, 0.3);">
Confirm Email
</a>
</td>
</tr>
</table>
<!-- Divider -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding-bottom: 24px;">
<div style="height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);"></div>
</td>
</tr>
</table>
<!-- Alternative Link -->
<p style="margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.4); text-align: center; line-height: 1.6;">
If the button doesn't work, copy and paste this link into your browser:
</p>
<p style="margin: 8px 0 0 0; font-size: 12px; color: rgba(233, 69, 96, 0.8); text-align: center; word-break: break-all; line-height: 1.5;">
{{ .ConfirmationURL }}
</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- Footer -->
<tr>
<td style="padding: 32px 16px;">
<p style="margin: 0 0 8px 0; font-size: 13px; color: rgba(255, 255, 255, 0.4); text-align: center;">
This link will expire in 24 hours.
</p>
<p style="margin: 0; font-size: 12px; color: rgba(255, 255, 255, 0.3); text-align: center;">
If you didn't create an account, you can safely ignore this email.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
@@ -0,0 +1,130 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Confirm Email Change - Sauci</title>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
</head>
<body style="margin: 0; padding: 0; background-color: #0d0d1a; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #0d0d1a;">
<tr>
<td align="center" style="padding: 40px 20px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="max-width: 520px;">
<!-- Logo Section -->
<tr>
<td align="center" style="padding-bottom: 32px;">
<div style="font-size: 36px; font-weight: 700; background: linear-gradient(135deg, #e94560, #9b59b6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
Sauci
</div>
</td>
</tr>
<!-- Main Card -->
<tr>
<td>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08);">
<!-- Top Gradient Accent -->
<tr>
<td style="height: 4px; background: linear-gradient(90deg, #e94560, #9b59b6); border-radius: 16px 16px 0 0;"></td>
</tr>
<!-- Card Content -->
<tr>
<td style="padding: 40px 32px;">
<!-- Icon -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td align="center" style="padding-bottom: 24px;">
<div style="width: 64px; height: 64px; background: linear-gradient(135deg, rgba(233, 69, 96, 0.15), rgba(155, 89, 182, 0.15)); border-radius: 50%; display: inline-block; line-height: 64px; font-size: 28px;">
&#9993;
</div>
</td>
</tr>
</table>
<!-- Heading -->
<h1 style="margin: 0 0 16px 0; font-size: 24px; font-weight: 600; color: #ffffff; text-align: center; line-height: 1.3;">
Confirm Email Change
</h1>
<!-- Subtext -->
<p style="margin: 0 0 32px 0; font-size: 15px; color: rgba(255, 255, 255, 0.6); text-align: center; line-height: 1.6;">
You requested to change your email address. Click the button below to confirm this change.
</p>
<!-- CTA Button -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td align="center" style="padding-bottom: 32px;">
<a href="{{ .ConfirmationURL }}" target="_blank" style="display: inline-block; padding: 14px 40px; background: linear-gradient(135deg, #e94560, #9b59b6); color: #ffffff; text-decoration: none; font-size: 15px; font-weight: 600; border-radius: 12px; box-shadow: 0 8px 24px rgba(233, 69, 96, 0.3);">
Confirm New Email
</a>
</td>
</tr>
</table>
<!-- Info Notice -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background: rgba(155, 89, 182, 0.08); border-radius: 8px; border: 1px solid rgba(155, 89, 182, 0.15);">
<tr>
<td style="padding: 16px;">
<p style="margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.5); text-align: center; line-height: 1.5;">
&#128233; After confirming, you'll use your new email address to sign in to Sauci.
</p>
</td>
</tr>
</table>
<!-- Divider -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 24px 0;">
<div style="height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);"></div>
</td>
</tr>
</table>
<!-- Alternative Link -->
<p style="margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.4); text-align: center; line-height: 1.6;">
If the button doesn't work, copy and paste this link into your browser:
</p>
<p style="margin: 8px 0 0 0; font-size: 12px; color: rgba(233, 69, 96, 0.8); text-align: center; word-break: break-all; line-height: 1.5;">
{{ .ConfirmationURL }}
</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- Footer -->
<tr>
<td style="padding: 32px 16px;">
<p style="margin: 0 0 8px 0; font-size: 13px; color: rgba(255, 255, 255, 0.4); text-align: center;">
Didn't request this change?
</p>
<p style="margin: 0; font-size: 12px; color: rgba(255, 255, 255, 0.3); text-align: center;">
If you didn't request an email change, please secure your account by resetting your password immediately.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
+150
View File
@@ -0,0 +1,150 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>You're Invited to Sauci</title>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
</head>
<body style="margin: 0; padding: 0; background-color: #0d0d1a; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #0d0d1a;">
<tr>
<td align="center" style="padding: 40px 20px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="max-width: 520px;">
<!-- Logo Section -->
<tr>
<td align="center" style="padding-bottom: 32px;">
<div style="font-size: 36px; font-weight: 700; background: linear-gradient(135deg, #e94560, #9b59b6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
Sauci
</div>
</td>
</tr>
<!-- Main Card -->
<tr>
<td>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08);">
<!-- Top Gradient Accent -->
<tr>
<td style="height: 4px; background: linear-gradient(90deg, #e94560, #9b59b6); border-radius: 16px 16px 0 0;"></td>
</tr>
<!-- Card Content -->
<tr>
<td style="padding: 40px 32px;">
<!-- Icon -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td align="center" style="padding-bottom: 24px;">
<div style="width: 64px; height: 64px; background: linear-gradient(135deg, rgba(233, 69, 96, 0.15), rgba(155, 89, 182, 0.15)); border-radius: 50%; display: inline-block; line-height: 64px; font-size: 28px;">
&#128149;
</div>
</td>
</tr>
</table>
<!-- Heading -->
<h1 style="margin: 0 0 16px 0; font-size: 24px; font-weight: 600; color: #ffffff; text-align: center; line-height: 1.3;">
You've Been Invited
</h1>
<!-- Subtext -->
<p style="margin: 0 0 32px 0; font-size: 15px; color: rgba(255, 255, 255, 0.6); text-align: center; line-height: 1.6;">
Someone special has invited you to join Sauci, the app designed to help couples deepen their connection and discover new things about each other.
</p>
<!-- CTA Button -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td align="center" style="padding-bottom: 32px;">
<a href="{{ .ConfirmationURL }}" target="_blank" style="display: inline-block; padding: 14px 40px; background: linear-gradient(135deg, #e94560, #9b59b6); color: #ffffff; text-decoration: none; font-size: 15px; font-weight: 600; border-radius: 12px; box-shadow: 0 8px 24px rgba(233, 69, 96, 0.3);">
Accept Invitation
</a>
</td>
</tr>
</table>
<!-- Features Section -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background: rgba(22, 33, 62, 0.6); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.05);">
<tr>
<td style="padding: 20px;">
<p style="margin: 0 0 12px 0; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.7); text-align: center; text-transform: uppercase; letter-spacing: 1px;">
What awaits you
</p>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 8px 0;">
<p style="margin: 0; font-size: 14px; color: rgba(255, 255, 255, 0.5); text-align: center;">
&#128293; Thoughtful questions to spark conversations
</p>
</td>
</tr>
<tr>
<td style="padding: 8px 0;">
<p style="margin: 0; font-size: 14px; color: rgba(255, 255, 255, 0.5); text-align: center;">
&#128140; Discover mutual interests with your partner
</p>
</td>
</tr>
<tr>
<td style="padding: 8px 0;">
<p style="margin: 0; font-size: 14px; color: rgba(255, 255, 255, 0.5); text-align: center;">
&#128172; Private chats when you both match
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Divider -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 24px 0;">
<div style="height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);"></div>
</td>
</tr>
</table>
<!-- Alternative Link -->
<p style="margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.4); text-align: center; line-height: 1.6;">
If the button doesn't work, copy and paste this link into your browser:
</p>
<p style="margin: 8px 0 0 0; font-size: 12px; color: rgba(233, 69, 96, 0.8); text-align: center; word-break: break-all; line-height: 1.5;">
{{ .ConfirmationURL }}
</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- Footer -->
<tr>
<td style="padding: 32px 16px;">
<p style="margin: 0; font-size: 12px; color: rgba(255, 255, 255, 0.3); text-align: center;">
This invitation link will expire in 7 days. If you didn't expect this invitation, you can safely ignore this email.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
@@ -0,0 +1,127 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sign In to Sauci</title>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
</head>
<body style="margin: 0; padding: 0; background-color: #0d0d1a; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #0d0d1a;">
<tr>
<td align="center" style="padding: 40px 20px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="max-width: 520px;">
<!-- Logo Section -->
<tr>
<td align="center" style="padding-bottom: 32px;">
<div style="font-size: 36px; font-weight: 700; background: linear-gradient(135deg, #e94560, #9b59b6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
Sauci
</div>
</td>
</tr>
<!-- Main Card -->
<tr>
<td>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08);">
<!-- Top Gradient Accent -->
<tr>
<td style="height: 4px; background: linear-gradient(90deg, #e94560, #9b59b6); border-radius: 16px 16px 0 0;"></td>
</tr>
<!-- Card Content -->
<tr>
<td style="padding: 40px 32px;">
<!-- Icon -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td align="center" style="padding-bottom: 24px;">
<div style="width: 64px; height: 64px; background: linear-gradient(135deg, rgba(233, 69, 96, 0.15), rgba(155, 89, 182, 0.15)); border-radius: 50%; display: inline-block; line-height: 64px; font-size: 28px;">
&#10024;
</div>
</td>
</tr>
</table>
<!-- Heading -->
<h1 style="margin: 0 0 16px 0; font-size: 24px; font-weight: 600; color: #ffffff; text-align: center; line-height: 1.3;">
Your Magic Link
</h1>
<!-- Subtext -->
<p style="margin: 0 0 32px 0; font-size: 15px; color: rgba(255, 255, 255, 0.6); text-align: center; line-height: 1.6;">
Click the button below to securely sign in to your Sauci account. No password needed.
</p>
<!-- CTA Button -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td align="center" style="padding-bottom: 32px;">
<a href="{{ .ConfirmationURL }}" target="_blank" style="display: inline-block; padding: 14px 40px; background: linear-gradient(135deg, #e94560, #9b59b6); color: #ffffff; text-decoration: none; font-size: 15px; font-weight: 600; border-radius: 12px; box-shadow: 0 8px 24px rgba(233, 69, 96, 0.3);">
Sign In to Sauci
</a>
</td>
</tr>
</table>
<!-- Security Notice -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background: rgba(233, 69, 96, 0.08); border-radius: 8px; border: 1px solid rgba(233, 69, 96, 0.15);">
<tr>
<td style="padding: 16px;">
<p style="margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.5); text-align: center; line-height: 1.5;">
&#128274; This link is unique to you and expires in 1 hour for your security.
</p>
</td>
</tr>
</table>
<!-- Divider -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 24px 0;">
<div style="height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);"></div>
</td>
</tr>
</table>
<!-- Alternative Link -->
<p style="margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.4); text-align: center; line-height: 1.6;">
If the button doesn't work, copy and paste this link into your browser:
</p>
<p style="margin: 8px 0 0 0; font-size: 12px; color: rgba(233, 69, 96, 0.8); text-align: center; word-break: break-all; line-height: 1.5;">
{{ .ConfirmationURL }}
</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- Footer -->
<tr>
<td style="padding: 32px 16px;">
<p style="margin: 0; font-size: 12px; color: rgba(255, 255, 255, 0.3); text-align: center;">
If you didn't request this sign in link, you can safely ignore this email.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
@@ -0,0 +1,130 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Reset Your Password - Sauci</title>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
</head>
<body style="margin: 0; padding: 0; background-color: #0d0d1a; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #0d0d1a;">
<tr>
<td align="center" style="padding: 40px 20px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="max-width: 520px;">
<!-- Logo Section -->
<tr>
<td align="center" style="padding-bottom: 32px;">
<div style="font-size: 36px; font-weight: 700; background: linear-gradient(135deg, #e94560, #9b59b6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
Sauci
</div>
</td>
</tr>
<!-- Main Card -->
<tr>
<td>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08);">
<!-- Top Gradient Accent -->
<tr>
<td style="height: 4px; background: linear-gradient(90deg, #e94560, #9b59b6); border-radius: 16px 16px 0 0;"></td>
</tr>
<!-- Card Content -->
<tr>
<td style="padding: 40px 32px;">
<!-- Icon -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td align="center" style="padding-bottom: 24px;">
<div style="width: 64px; height: 64px; background: linear-gradient(135deg, rgba(233, 69, 96, 0.15), rgba(155, 89, 182, 0.15)); border-radius: 50%; display: inline-block; line-height: 64px; font-size: 28px;">
&#128272;
</div>
</td>
</tr>
</table>
<!-- Heading -->
<h1 style="margin: 0 0 16px 0; font-size: 24px; font-weight: 600; color: #ffffff; text-align: center; line-height: 1.3;">
Reset Your Password
</h1>
<!-- Subtext -->
<p style="margin: 0 0 32px 0; font-size: 15px; color: rgba(255, 255, 255, 0.6); text-align: center; line-height: 1.6;">
We received a request to reset your password. Click the button below to choose a new one.
</p>
<!-- CTA Button -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td align="center" style="padding-bottom: 32px;">
<a href="{{ .ConfirmationURL }}" target="_blank" style="display: inline-block; padding: 14px 40px; background: linear-gradient(135deg, #e94560, #9b59b6); color: #ffffff; text-decoration: none; font-size: 15px; font-weight: 600; border-radius: 12px; box-shadow: 0 8px 24px rgba(233, 69, 96, 0.3);">
Reset Password
</a>
</td>
</tr>
</table>
<!-- Security Notice -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background: rgba(155, 89, 182, 0.08); border-radius: 8px; border: 1px solid rgba(155, 89, 182, 0.15);">
<tr>
<td style="padding: 16px;">
<p style="margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.5); text-align: center; line-height: 1.5;">
&#9200; This link expires in 1 hour. After resetting, you'll need to sign in again on all devices.
</p>
</td>
</tr>
</table>
<!-- Divider -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 24px 0;">
<div style="height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);"></div>
</td>
</tr>
</table>
<!-- Alternative Link -->
<p style="margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.4); text-align: center; line-height: 1.6;">
If the button doesn't work, copy and paste this link into your browser:
</p>
<p style="margin: 8px 0 0 0; font-size: 12px; color: rgba(233, 69, 96, 0.8); text-align: center; word-break: break-all; line-height: 1.5;">
{{ .ConfirmationURL }}
</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- Footer -->
<tr>
<td style="padding: 32px 16px;">
<p style="margin: 0 0 8px 0; font-size: 13px; color: rgba(255, 255, 255, 0.4); text-align: center;">
Didn't request this?
</p>
<p style="margin: 0; font-size: 12px; color: rgba(255, 255, 255, 0.3); text-align: center;">
If you didn't request a password reset, you can safely ignore this email. Your password won't change until you click the link above.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
File diff suppressed because it is too large. Load diff