<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beta Feature — sfpermits.ai</title>
{% include "fragments/head_obsidian.html" %}
<style nonce="{{ csp_nonce }}">
body { background: var(--obsidian, #0a0a0f); }
.tier-gate-wrapper {
min-height: 60vh;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-8) var(--space-4);
}
.tier-gate-card {
background: var(--obsidian-mid, #12121a);
border: 1px solid var(--glass-border, rgba(255,255,255,0.06));
border-radius: var(--radius-md, 12px);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: var(--space-8) var(--space-8);
max-width: 480px;
width: 100%;
text-align: center;
}
.tier-gate-badge {
display: inline-block;
font-family: var(--mono);
font-size: 0.65rem;
font-weight: 400;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--signal-blue, #60a5fa);
background: rgba(96, 165, 250, 0.08);
border: 1px solid rgba(96, 165, 250, 0.20);
border-radius: var(--radius-full, 9999px);
padding: 4px 12px;
margin-bottom: var(--space-4);
}
.tier-gate-title {
font-family: var(--sans);
font-size: var(--text-xl);
font-weight: 300;
color: var(--text-primary);
margin: 0 0 var(--space-4) 0;
line-height: 1.3;
}
.tier-gate-desc {
font-family: var(--sans);
font-size: var(--text-base);
color: var(--text-secondary);
line-height: 1.6;
margin: 0 0 var(--space-6) 0;
}
.tier-gate-cta {
display: block;
width: 100%;
font-family: var(--mono);
font-size: var(--text-base);
font-weight: 400;
color: var(--obsidian, #0a0a0f);
background: var(--accent, #5eead4);
border: none;
border-radius: var(--radius-md, 12px);
padding: 14px var(--space-6);
cursor: pointer;
text-decoration: none;
text-align: center;
transition: opacity 0.2s;
letter-spacing: 0.02em;
box-sizing: border-box;
}
.tier-gate-cta:hover { opacity: 0.88; }
.tier-gate-current {
margin-top: var(--space-4);
font-family: var(--mono);
font-size: var(--text-sm);
color: var(--text-tertiary);
}
@media (max-width: 480px) {
.tier-gate-card {
padding: var(--space-6) var(--space-4);
}
.tier-gate-title {
font-size: var(--text-lg);
}
}
</style>
</head>
<body class="obsidian">
<div class="tier-gate-wrapper">
<div class="tier-gate-card">
<span class="tier-gate-badge">
{% if required_tier == "premium" %}Premium{% else %}Beta{% endif %} Feature
</span>
<h1 class="tier-gate-title">
This feature is available for
{% if required_tier == "premium" %}Premium{% else %}Beta{% endif %} users
</h1>
<p class="tier-gate-desc">
Get severity analysis, portfolio tracking, and AI permit consultation
across all your SF properties. Upgrade to unlock the full intelligence layer.
</p>
{% if user %}
<a href="{{ url_for('auth.beta_join') if required_tier == 'beta' else url_for('auth.auth_login') }}"
class="tier-gate-cta">
{% if required_tier == "beta" %}
Join Beta →
{% else %}
Upgrade to Premium →
{% endif %}
</a>
<p class="tier-gate-current">
Current plan: <span style="color: var(--text-secondary);">{{ current_tier }}</span>
</p>
{% else %}
<a href="{{ url_for('auth.auth_login') }}" class="tier-gate-cta">
Sign In to Continue →
</a>
{% endif %}
</div>
</div>
</body>
</html>
