<!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>{{ title|default("Error") }} — 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 }}">
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
: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-red: #f87171;
--signal-amber: #fbbf24;
--signal-blue: #60a5fa;
--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-base: clamp(0.8125rem, 0.75rem + 0.3vw, 1rem);
--text-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2.5rem);
--text-3xl: clamp(1.875rem, 1.5rem + 1.8vw, 3.75rem);
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--radius-sm: 6px;
--radius-md: 12px;
--radius-full: 9999px;
}
body {
font-family: var(--sans);
background: var(--obsidian);
color: var(--text-primary);
min-height: 100vh;
display: flex;
flex-direction: column;
-webkit-font-smoothing: antialiased;
}
/* Minimal anonymous nav */
.nav {
border-bottom: 1px solid var(--glass-border);
padding: 14px var(--space-6);
background: var(--obsidian-mid);
display: flex;
align-items: center;
justify-content: space-between;
}
.wordmark {
font-family: var(--mono);
font-size: 0.75rem;
font-weight: 300;
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(--text-tertiary);
text-decoration: none;
}
.wordmark span { color: var(--text-ghost); }
/* Centered error layout */
.error-wrap {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-6);
}
/* Glass Card (token component) */
.glass-card {
background: var(--obsidian-mid);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
padding: var(--space-10) var(--space-8);
max-width: 520px;
width: 100%;
text-align: center;
transition: border-color 0.3s;
}
.glass-card:hover {
border-color: var(--glass-hover);
}
/* Error code — mono weight 300, large */
.error-code {
font-family: var(--mono);
font-size: var(--text-3xl);
font-weight: 300;
color: var(--text-tertiary);
letter-spacing: 0.06em;
margin-bottom: var(--space-4);
line-height: 1;
}
.error-code.warn { color: rgba(251, 191, 36, 0.3); }
.error-code.err { color: rgba(248, 113, 113, 0.3); }
/* Error label — mono, semantic signal color */
.error-label {
font-family: var(--mono);
font-size: var(--text-xs);
font-weight: 400;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: var(--space-6);
}
.error-label.label-accent { color: var(--accent); }
.error-label.label-amber { color: var(--signal-amber); }
.error-label.label-red { color: var(--signal-red); }
.error-label.label-blue { color: var(--signal-blue); }
/* Friendly message — sans, secondary */
.error-message {
font-family: var(--sans);
font-size: var(--text-base);
font-weight: 300;
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: var(--space-8);
}
/* Search bar (token component) */
.search-bar {
position: relative;
margin-bottom: var(--space-8);
}
.search-input {
width: 100%;
padding: 16px 22px;
padding-right: 50px;
font-family: var(--mono);
font-size: 14px;
font-weight: 300;
color: var(--text-primary);
background: var(--glass);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
outline: none;
transition: border-color 0.4s, background 0.4s, box-shadow 0.4s;
}
.search-input::placeholder {
color: var(--text-tertiary);
font-weight: 300;
}
.search-input:focus {
border-color: var(--accent-ring);
background: rgba(255, 255, 255, 0.06);
box-shadow: 0 0 40px var(--accent-glow);
}
.search-icon {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--text-tertiary);
pointer-events: none;
}
/* Ghost CTA (token component) */
.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;
display: inline-block;
}
.ghost-cta:hover {
color: var(--accent);
border-bottom-color: var(--accent);
}
/* Detail box for rate-limit / kill-switch messages */
.error-detail {
background: var(--glass);
border: 1px solid var(--glass-border);
border-radius: var(--radius-sm);
padding: var(--space-3) var(--space-4);
font-family: var(--mono);
font-size: var(--text-sm);
font-weight: 300;
color: var(--text-secondary);
margin-bottom: var(--space-6);
text-align: left;
}
/* Status code footnote */
.error-status {
font-family: var(--mono);
font-size: var(--text-xs);
color: var(--text-tertiary);
margin-top: var(--space-8);
letter-spacing: 0.06em;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
@media (max-width: 480px) {
.glass-card {
padding: var(--space-8) var(--space-6);
}
}
</style>
</head>
<body>
<nav class="nav">
<a href="/" class="wordmark">sfpermits<span>.ai</span></a>
</nav>
<div class="error-wrap">
<div class="glass-card">
{% if error_type == "rate_limit" %}
<div class="error-code warn">429</div>
<div class="error-label label-amber">Rate limit reached</div>
<p class="error-message">You've sent too many requests. Please wait a moment and try again.</p>
{% if detail %}
<div class="error-detail">{{ detail }}</div>
{% endif %}
<div class="search-bar">
<form action="/" method="get">
<input type="text" name="q" class="search-input" placeholder="Search any SF address or permit" autocomplete="off">
<svg class="search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
</form>
</div>
<a href="/" class="ghost-cta">Back to home →</a>
<div class="error-status">HTTP 429</div>
{% elif error_type == "kill_switch" %}
<div class="error-code warn">503</div>
<div class="error-label label-amber">Temporarily unavailable</div>
<p class="error-message">AI features are temporarily paused for cost protection. Basic permit lookups and search still work.</p>
<div class="search-bar">
<form action="/" method="get">
<input type="text" name="q" class="search-input" placeholder="Search any SF address or permit" autocomplete="off">
<svg class="search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
</form>
</div>
<a href="/" class="ghost-cta">Back to home →</a>
<div class="error-status">HTTP 503</div>
{% elif error_type == "403" %}
<div class="error-code err">403</div>
<div class="error-label label-red">Access denied</div>
<p class="error-message">You don't have permission to view this page. Sign in to continue.</p>
<div class="search-bar">
<form action="/" method="get">
<input type="text" name="q" class="search-input" placeholder="Search any SF address or permit" autocomplete="off">
<svg class="search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
</form>
</div>
<a href="/" class="ghost-cta">Back to home →</a>
<div class="error-status">HTTP 403</div>
{% elif error_type == "404" %}
<div class="error-code err">404</div>
<div class="error-label label-red">Page not found</div>
<p class="error-message">Page not found. Try searching for what you need.</p>
<div class="search-bar">
<form action="/" method="get">
<input type="text" name="q" class="search-input" placeholder="Search any SF address or permit" autocomplete="off">
<svg class="search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
</form>
</div>
<a href="/" class="ghost-cta">Back to home →</a>
<div class="error-status">HTTP 404</div>
{% else %}
<div class="error-code err">{{ status_code|default("500") }}</div>
<div class="error-label label-red">{{ title|default("Something went wrong") }}</div>
<p class="error-message">{{ subtitle|default("Something went wrong. We're looking into it.") }}</p>
{% if detail %}
<div class="error-detail">{{ detail }}</div>
{% endif %}
<div class="search-bar">
<form action="/" method="get">
<input type="text" name="q" class="search-input" placeholder="Search any SF address or permit" autocomplete="off">
<svg class="search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
</form>
</div>
<a href="/" class="ghost-cta">Back to home →</a>
{% if status_code %}
<div class="error-status">HTTP {{ status_code }}</div>
{% endif %}
{% endif %}
</div>
</div>
<script nonce="{{ csp_nonce }}" src="/static/admin-feedback.js" defer></script>
<script nonce="{{ csp_nonce }}" src="/static/admin-tour.js" defer></script>
</body>
</html>
