<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Search: 487 Noe — sfpermits.ai</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<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">
<link rel="stylesheet" href="obsidian-tokens.css">
<style>
.page-body { padding-top: 56px; }
/* Search header */
.search-header {
padding: var(--space-6) 0 var(--space-4);
}
.search-header .search-bar { max-width: 520px; }
.search-header .search-input {
padding: 14px 20px; padding-right: 44px; font-size: 14px;
}
.search-meta {
font-family: var(--mono); font-size: var(--text-xs); color: var(--text-tertiary);
margin-top: var(--space-3);
display: flex; align-items: center; gap: var(--space-4);
}
.search-meta__count { color: var(--text-secondary); }
/* Result cards */
.results-list { padding-bottom: var(--space-8); }
.result-card {
display: grid; grid-template-columns: 1fr auto; gap: var(--space-4);
padding: var(--space-4) var(--space-4);
margin: 0 calc(-1 * var(--space-4));
border-bottom: 1px solid var(--glass-border);
border-radius: var(--radius-sm);
transition: background 0.15s;
cursor: pointer;
}
.result-card:hover { background: var(--glass); }
.result-card__address {
font-family: var(--mono); font-size: var(--text-base); font-weight: 300;
color: var(--text-primary); margin-bottom: 3px;
transition: color 0.2s;
}
.result-card:hover .result-card__address { color: var(--accent); }
.result-card__address mark {
background: none; color: var(--accent); font-weight: 400;
}
.result-card__desc {
font-family: var(--sans); font-size: var(--text-sm); font-weight: 300;
color: var(--text-secondary); line-height: 1.5;
}
.result-card__right {
display: flex; flex-direction: column; align-items: flex-end;
gap: var(--space-2); flex-shrink: 0;
}
.result-card__badges {
display: flex; gap: var(--space-2); align-items: center;
}
.result-card__permits {
font-family: var(--mono); font-size: var(--text-xs); color: var(--text-tertiary);
display: flex; align-items: center; gap: var(--space-2);
}
.result-card__arrow {
font-family: var(--mono); font-size: 12px; color: var(--text-tertiary);
opacity: 0; transition: opacity 0.2s, color 0.2s;
}
.result-card:hover .result-card__arrow { opacity: 1; color: var(--accent); }
/* Filter chips */
.filter-row {
display: flex; gap: var(--space-2); flex-wrap: wrap;
margin-bottom: var(--space-4);
}
.filter-chip {
font-family: var(--mono); font-size: var(--text-xs); font-weight: 400;
color: var(--text-tertiary); background: var(--glass);
border: 1px solid var(--glass-border);
padding: 4px 10px; border-radius: var(--radius-full);
cursor: pointer; transition: border-color 0.2s, color 0.2s;
}
.filter-chip:hover { border-color: var(--glass-hover); color: var(--text-secondary); }
.filter-chip--active {
border-color: var(--accent-ring); color: var(--accent);
background: var(--accent-glow);
}
/* AI suggestion card */
.ai-suggest {
background: var(--accent-glow);
border: 1px solid var(--accent-ring);
border-radius: var(--radius-md);
padding: var(--space-4) var(--space-5);
margin-bottom: var(--space-6);
display: flex; align-items: center; gap: var(--space-4);
cursor: pointer;
transition: background 0.2s, border-color 0.2s;
}
.ai-suggest:hover {
background: rgba(94, 234, 212, 0.12);
border-color: rgba(94, 234, 212, 0.4);
}
.ai-suggest__icon {
font-size: 16px; flex-shrink: 0;
}
.ai-suggest__text {
font-family: var(--sans); font-size: var(--text-base); font-weight: 300;
color: var(--text-primary); flex: 1;
}
.ai-suggest__text em {
font-style: normal; color: var(--accent);
}
.ai-suggest__arrow {
font-family: var(--mono); font-size: 12px; color: var(--accent);
}
</style>
</head>
<body>
<!-- NAV -->
<nav class="nav-float">
<a href="#" class="nav-float__wordmark">sfpermits.ai</a>
<div class="nav-float__links">
<a href="#" class="nav-float__link">Methodology</a>
<div class="nav-float__avatar">TB</div>
</div>
</nav>
<div class="page-body">
<div class="obs-container">
<!-- SEARCH -->
<div class="search-header reveal">
<div class="search-bar">
<input type="text" class="search-input" value="487 noe" autocomplete="off">
<svg class="search-icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
</div>
<div class="search-meta">
<span class="search-meta__count">3 addresses</span>
<span>·</span>
<span>12 permits</span>
<span>·</span>
<span>0.4s</span>
</div>
</div>
<!-- FILTERS -->
<div class="filter-row reveal reveal-delay-1">
<span class="filter-chip filter-chip--active">All</span>
<span class="filter-chip">Active permits</span>
<span class="filter-chip">Complaints</span>
<span class="filter-chip">Recent activity</span>
</div>
<!-- AI SUGGESTION -->
<div class="ai-suggest reveal reveal-delay-2">
<span class="ai-suggest__icon">✨</span>
<span class="ai-suggest__text">Planning a project at <em>487 Noe St</em>? Ask AI what permits you'll need →</span>
<span class="ai-suggest__arrow">→</span>
</div>
<!-- RESULTS -->
<div class="results-list">
<div class="result-card reveal reveal-delay-2">
<div>
<div class="result-card__address"><mark>487 Noe</mark> St</div>
<div class="result-card__desc">Residential · Noe Valley · 3 active permits · kitchen remodel, bathroom reno, electrical upgrade</div>
</div>
<div class="result-card__right">
<div class="result-card__badges">
<span class="status-dot status-dot--amber" title="PPC stalled"></span>
<span class="chip">Residential</span>
</div>
<div class="result-card__permits">7 total permits</div>
<span class="result-card__arrow">→</span>
</div>
</div>
<div class="result-card reveal reveal-delay-3">
<div>
<div class="result-card__address"><mark>487 Noe</mark> Valley Ct</div>
<div class="result-card__desc">Residential · Noe Valley · 1 active permit · seismic retrofit soft-story</div>
</div>
<div class="result-card__right">
<div class="result-card__badges">
<span class="status-dot status-dot--green" title="On track"></span>
<span class="chip">Residential</span>
</div>
<div class="result-card__permits">3 total permits</div>
<span class="result-card__arrow">→</span>
</div>
</div>
<div class="result-card reveal reveal-delay-3">
<div>
<div class="result-card__address">4<mark>87</mark> <mark>Noe</mark>l Dr</div>
<div class="result-card__desc">Residential · Outer Sunset · No active permits</div>
</div>
<div class="result-card__right">
<div class="result-card__badges">
<span class="chip">Residential</span>
</div>
<div class="result-card__permits">2 total permits</div>
<span class="result-card__arrow">→</span>
</div>
</div>
</div>
<!-- FRESHNESS -->
<div class="freshness reveal">
<span class="freshness-dot"></span>
Data as of Feb 27, 2026 · Updated nightly
</div>
</div>
</div>
<script>
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
observer.unobserve(entry.target);
}
});
}, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
</script>
</body>
</html>
