<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex, nofollow">
<title>Sign in — sfpermits.ai</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
<style nonce="{{ csp_nonce }}">
/* Design token root — Auth Pages archetype (DESIGN_TOKENS.md §9) */
:root {
--obsidian: #0a0a0f;
--obsidian-mid: #12121a;
--obsidian-light: #1a1a26;
--glass: rgba(255, 255, 255, 0.04);
--glass-border: rgba(255, 255, 255, 0.06);
--glass-hover: rgba(255, 255, 255, 0.10);
--text-primary: rgba(255, 255, 255, 0.92);
--text-secondary: rgba(255, 255, 255, 0.55);
--text-tertiary: rgba(255, 255, 255, 0.30);
--text-ghost: rgba(255, 255, 255, 0.15);
--accent: #5eead4;
--accent-glow: rgba(94, 234, 212, 0.08);
--accent-ring: rgba(94, 234, 212, 0.30);
--signal-green: #34d399;
--signal-red: #f87171;
--mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
--sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--text-xs: clamp(0.65rem, 0.6rem + 0.2vw, 0.75rem);
--text-sm: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
--text-lg: clamp(0.875rem, 0.8rem + 0.4vw, 1.125rem);
--text-xl: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
--radius-sm: 6px;
--radius-md: 12px;
--radius-full: 9999px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: var(--sans);
background: var(--obsidian);
color: var(--text-primary);
line-height: 1.6;
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-6);
-webkit-font-smoothing: antialiased;
}
/* Staging banner */
.staging-banner {
background: #fbbf24;
color: var(--obsidian-mid);
text-align: center;
padding: 8px var(--space-4);
font-family: var(--mono);
font-size: var(--text-xs);
font-weight: 400;
letter-spacing: 0.04em;
position: fixed;
top: 0; left: 0; right: 0;
z-index: 9999;
}
.auth-container {
width: 100%;
max-width: 380px;
opacity: 0;
animation: fadeUp 1.2s 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
/* Wordmark */
.auth-wordmark {
font-family: var(--mono);
font-size: var(--text-xs);
font-weight: 300;
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(--text-tertiary);
text-align: center;
text-decoration: none;
display: block;
margin-bottom: var(--space-10);
transition: color 0.3s;
}
.auth-wordmark:hover { color: var(--accent); }
/* Card — glass-card pattern */
.glass-card {
background: var(--obsidian-mid);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
padding: var(--space-8);
}
.auth-title {
font-family: var(--sans);
font-size: var(--text-xl);
font-weight: 300;
color: var(--text-primary);
text-align: center;
margin-bottom: var(--space-2);
}
.auth-subtitle {
font-family: var(--sans);
font-size: var(--text-sm);
font-weight: 300;
color: var(--text-secondary);
text-align: center;
margin-bottom: var(--space-8);
line-height: 1.5;
}
/* Form label — form-label pattern */
.form-label {
display: block;
font-family: var(--mono);
font-size: var(--text-xs);
font-weight: 400;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-tertiary);
margin-bottom: var(--space-2);
}
/* Form input — form-input pattern */
.form-input {
width: 100%;
padding: 12px 16px;
font-family: var(--mono);
font-size: var(--text-sm);
font-weight: 300;
color: var(--text-primary);
background: var(--glass);
border: 1px solid var(--glass-border);
border-radius: var(--radius-sm);
outline: none;
transition: border-color 0.3s, box-shadow 0.3s;
}
.form-input::placeholder { color: var(--text-tertiary); font-weight: 300; }
.form-input:focus {
border-color: var(--accent-ring);
box-shadow: 0 0 24px var(--accent-glow);
}
.auth-field { margin-bottom: var(--space-4); }
/* Submit — ghost-CTA style (wider for forms) */
.auth-submit {
width: 100%;
margin-top: var(--space-6);
padding: 12px;
font-family: var(--mono);
font-size: var(--text-sm);
font-weight: 300;
color: var(--text-secondary); /* --text-secondary for WCAG AA on interactive */
letter-spacing: 0.04em;
background: none;
border: 1px solid var(--glass-border);
border-radius: var(--radius-sm);
cursor: pointer;
transition: border-color 0.3s, color 0.3s, background 0.2s;
}
.auth-submit:hover {
border-color: var(--accent-ring);
color: var(--accent);
background: var(--accent-glow);
}
.auth-note {
font-family: var(--sans);
font-size: var(--text-xs);
color: var(--text-tertiary);
text-align: center;
margin-top: var(--space-4);
line-height: 1.5;
}
/* Sent state */
.auth-sent { display: none; text-align: center; }
.auth-sent.visible { display: block; }
.auth-form.hidden { display: none; }
.auth-sent__icon {
width: 40px;
height: 40px;
border-radius: var(--radius-full);
background: rgba(52, 211, 153, 0.10);
border: 1px solid rgba(52, 211, 153, 0.25);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-4);
}
.auth-sent__title {
font-family: var(--sans);
font-size: var(--text-lg);
font-weight: 300;
color: var(--text-primary);
margin-bottom: var(--space-2);
}
.auth-sent__email {
font-family: var(--mono);
font-size: var(--text-sm);
color: var(--accent);
margin-bottom: var(--space-4);
}
.auth-sent__text {
font-family: var(--sans);
font-size: var(--text-sm);
font-weight: 300;
color: var(--text-secondary);
line-height: 1.55;
}
.auth-sent__resend { margin-top: var(--space-6); }
/* Inline message (server-rendered flash) */
.auth-message {
margin-top: var(--space-4);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-sm);
font-family: var(--sans);
font-size: var(--text-sm);
line-height: 1.4;
}
.auth-message--success {
background: rgba(52, 211, 153, 0.06);
border-left: 2px solid var(--signal-green);
color: var(--signal-green);
}
.auth-message--error {
background: rgba(248, 113, 113, 0.06);
border-left: 2px solid var(--signal-red);
color: var(--signal-red);
}
.auth-message a { color: var(--accent); text-decoration: underline; }
/* ghost-cta for secondary links */
.ghost-cta {
font-family: var(--mono);
font-size: var(--text-sm);
font-weight: 300;
color: var(--text-secondary);
background: none;
border: none;
cursor: pointer;
padding-bottom: 1px;
border-bottom: 1px solid transparent;
transition: color 0.3s, border-color 0.3s;
letter-spacing: 0.04em;
text-decoration: none;
}
.ghost-cta:hover {
color: var(--accent);
border-bottom-color: var(--accent);
}
/* Footer links */
.auth-footer {
margin-top: var(--space-10);
text-align: center;
}
.auth-footer a {
font-family: var(--mono);
font-size: var(--text-xs);
font-weight: 300;
color: var(--text-tertiary);
text-decoration: none;
transition: color 0.3s;
}
.auth-footer a:hover { color: var(--accent); }
.auth-footer .sep {
margin: 0 var(--space-3);
color: var(--glass-border);
}
/* Toast component */
.toast {
position: fixed;
top: var(--space-6);
left: 50%;
transform: translateX(-50%);
z-index: 100;
display: flex;
align-items: center;
gap: var(--space-3);
padding: 10px var(--space-5);
background: var(--obsidian-mid);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
backdrop-filter: blur(12px);
animation: toast-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
max-width: min(420px, calc(100vw - 32px));
}
.toast--success { border-left: 2px solid var(--signal-green); }
.toast--error { border-left: 2px solid var(--signal-red); }
.toast__icon { font-size: var(--text-sm); }
.toast--success .toast__icon { color: var(--signal-green); }
.toast--error .toast__icon { color: var(--signal-red); }
.toast__message { font-family: var(--sans); font-size: var(--text-sm); color: var(--text-primary); }
.toast__dismiss {
background: none; border: none; color: var(--text-secondary);
font-size: 16px; cursor: pointer; padding: 0 0 0 var(--space-2); transition: color 0.2s;
}
.toast__dismiss:hover { color: var(--text-primary); }
@keyframes toast-in {
from { opacity: 0; transform: translateX(-50%) translateY(-12px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.toast.toast--exit { animation: toast-out 0.25s ease-in forwards; }
@keyframes toast-out {
to { opacity: 0; transform: translateX(-50%) translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
.auth-container { opacity: 1; }
}
</style>
</head>
<body>
{% if is_staging %}
<div class="staging-banner">STAGING ENVIRONMENT — changes here do not affect production</div>
{% endif %}
<div class="auth-container">
<a href="/" class="auth-wordmark">sfpermits.ai</a>
<div class="glass-card">
<!-- FORM STATE -->
<div class="auth-form" id="auth-form">
<h1 class="auth-title">Sign in</h1>
<p class="auth-subtitle">No password needed. We'll send a magic link to your email.</p>
<form method="POST" action="/auth/send-link">
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
<div class="auth-field">
<label class="form-label" for="email">Email</label>
<input class="form-input" type="email" id="email" name="email"
placeholder="you@example.com" required autofocus autocomplete="email">
</div>
{% if invite_required %}
<div class="auth-field">
<label class="form-label" for="invite_code">Invite code</label>
<input class="form-input" type="text" id="invite_code" name="invite_code"
placeholder="e.g. disco-penguin-7f3a">
</div>
{% endif %}
<button type="submit" class="auth-submit">Send magic link →</button>
</form>
{% if message %}
<div class="auth-message auth-message--{{ message_type or 'success' }}">
{{ message | safe }}
</div>
{% endif %}
<p class="auth-note">Don't have an account? The link will create one automatically.</p>
</div>
<!-- SENT STATE (JS-only for instant feedback before redirect) -->
<div class="auth-sent" id="auth-sent" aria-live="polite">
<div class="auth-sent__icon">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="#34d399" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"/>
</svg>
</div>
<div class="auth-sent__title">Check your email</div>
<div class="auth-sent__email" id="sent-email-addr">you@example.com</div>
<div class="auth-sent__text">
We sent a sign-in link. Click it and you're in.<br>
Check spam if you don't see it within a minute.
</div>
<div class="auth-sent__resend">
<a href="#" class="ghost-cta" id="use-different-email">Use a different email →</a>
</div>
</div>
</div>
<div class="auth-footer">
<a href="/about-data">About</a>
<span class="sep">·</span>
<a href="/methodology">Methodology</a>
<span class="sep">·</span>
<a href="/">Back to search</a>
</div>
</div>
<script src="{{ url_for('static', filename='toast.js') }}"></script>
<script nonce="{{ csp_nonce }}">
(function() {
var form = document.getElementById('auth-form');
var sentState = document.getElementById('auth-sent');
var sentEmailAddr = document.getElementById('sent-email-addr');
var useDifferentEmail = document.getElementById('use-different-email');
// If server already set message, fade it in via toast
{% if message and message_type == 'success' %}
window.addEventListener('DOMContentLoaded', function() {
showSentState(document.getElementById('email').value || '');
});
{% endif %}
function showSentState(email) {
if (email) sentEmailAddr.textContent = email;
form.classList.add('hidden');
sentState.classList.add('visible');
}
if (useDifferentEmail) {
useDifferentEmail.addEventListener('click', function(e) {
e.preventDefault();
sentState.classList.remove('visible');
form.classList.remove('hidden');
document.getElementById('email').focus();
});
}
})();
</script>
</body>
</html>
