Skip to content

Standardize public site styling #30

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jacobsd32-cpu merged 1 commit into from
Mar 14, 2026
Merged

Standardize public site styling #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 41 additions & 24 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,38 +19,48 @@
<noscript><link href="https://fonts.googleapis.com/css2?family=Instrument+Serif&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet"></noscript>
<style>
:root {
--bg: #0a1628; --bg2: #0d1b2a; --bg3: #132238;
--surface: #162740; --surface2: #1a3050;
--border: rgba(99,102,241,0.10); --border-hi: rgba(99,102,241,0.18);
--text: #f0f2f5; --text-dim: #94a3b8; --text-muted: #4b5c73;
--accent: #6366f1; --accent-dim: rgba(99,102,241,0.08);
--green: #34d399; --green-dim: rgba(52,211,153,0.08);
--yellow: #fbbf24; --yellow-dim: rgba(251,191,36,0.08);
--red: #f87171; --red-dim: rgba(248,113,113,0.08);
--orange: #fb923c; --orange-dim: rgba(251,146,60,0.08);
--purple: #a78bfa; --purple-dim: rgba(167,139,250,0.08);
--radius: 16px;
--bg:#07111f; --bg2:#0d1b2d; --bg3:#13243c;
--surface:#11233a; --surface2:#182b46;
--border:rgba(129,140,248,0.14); --border-hi:rgba(129,140,248,0.26);
--text:#eef2ff; --text-dim:#a7b7ce; --text-muted:#6c7b92;
--accent:#7dd3fc; --accent-dim:rgba(125,211,252,0.10);
--accent-strong:#818cf8;
--green:#34d399; --green-dim:rgba(52,211,153,0.10);
--yellow:#fbbf24; --yellow-dim:rgba(251,191,36,0.10);
--red:#f87171; --red-dim:rgba(248,113,113,0.10);
--orange:#fb923c; --orange-dim:rgba(251,146,60,0.10);
--purple:#818cf8; --purple-dim:rgba(129,140,248,0.10);
--radius:18px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body{
background:
radial-gradient(circle at top left, rgba(129,140,248,0.18), transparent 28%),
radial-gradient(circle at top right, rgba(125,211,252,0.16), transparent 30%),
linear-gradient(180deg, #07111f 0%, #091728 42%, #060d18 100%);
color:var(--text);
font-family:'DM Sans',sans-serif;
-webkit-font-smoothing:antialiased;
overflow-x:hidden
}
.wrap{max-width:1080px;margin:0 auto;padding:0 32px;position:relative;z-index:1}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
.mono{font-family:'JetBrains Mono',monospace}
.serif{font-family:'Instrument Serif',serif}

/* ── Nav ── */
.nav-outer{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(10,22,40,0.82);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
nav{max-width:1080px;margin:0 auto;padding:0 32px;height:64px;display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:700;font-size:17px;color:var(--accent);letter-spacing:-0.3px;display:flex;align-items:center;gap:8px;text-decoration:none}
.nav-outer{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(7,17,31,0.84);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-bottom:1px solid var(--border)}
nav{max-width:1080px;margin:0 auto;padding:0 32px;height:68px;display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:700;font-size:17px;color:var(--accent);letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;text-decoration:none}
.logo:hover{text-decoration:none}
.logo img{width:28px;height:28px;border-radius:6px}
.logo span{color:var(--text-dim);font-weight:400}
.nav-links{display:flex;gap:24px;align-items:center}
.nav-links a{color:var(--text-muted);text-decoration:none;font-size:13px;font-weight:500;transition:color .2s}
.nav-links a:hover{color:var(--accent);text-decoration:none}
.nav-links .nav-cta{color:var(--bg);background:var(--accent);padding:7px 18px;border-radius:8px;font-weight:600;font-size:12px;transition:all .2s}
.nav-links .nav-cta:hover{opacity:.88}
.nav-links{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.nav-links a{color:var(--text-muted);text-decoration:none;font-size:12px;font-weight:600;transition:color .2s, background .2s;letter-spacing:.02em;padding:8px 10px;border-radius:999px}
.nav-links a:hover{color:var(--text);background:rgba(129,140,248,0.08);text-decoration:none}
.nav-links .nav-cta{color:#08111d;background:linear-gradient(135deg, rgba(129,140,248,0.92), rgba(125,211,252,0.88));padding:10px 16px;border-radius:999px;font-weight:800;font-size:12px;border:1px solid rgba(129,140,248,0.26);box-shadow:0 10px 30px rgba(56,189,248,0.18)}
.nav-links .nav-cta:hover{opacity:.94}

/* ── Banner ── */
.banner{background:rgba(251,191,36,0.04);border:1px solid rgba(251,191,36,0.10);border-radius:10px;padding:12px 20px;margin-top:84px;display:flex;align-items:flex-start;gap:10px;font-size:12px;color:var(--yellow);line-height:1.6}
Expand All @@ -69,9 +79,9 @@
.hero-proof span{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-dim);padding:8px 12px;border-radius:999px;background:rgba(255,255,255,0.02);border:1px solid var(--border)}
.btn{display:inline-flex;align-items:center;gap:6px;padding:13px 28px;border-radius:10px;font-size:14px;font-weight:600;transition:all .2s;text-decoration:none;cursor:pointer;border:none}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:var(--accent);color:var(--bg)}
.btn-primary{background:linear-gradient(135deg, rgba(125,211,252,0.98), rgba(129,140,248,0.90));color:#07111f}
.btn-primary:hover{opacity:.9}
.btn-ghost{background:transparent;border:1px solid var(--border-hi);color:var(--text-dim)}
.btn-ghost{background:rgba(17,35,58,0.58);border:1px solid var(--border-hi);color:var(--text-dim)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

Expand Down Expand Up @@ -279,7 +289,13 @@
/* ── Responsive ── */
@media(max-width:768px){
.wrap{padding:0 20px}
nav{padding:0 20px}
.nav-outer{position:sticky}
nav{padding:12px 20px;height:auto;min-height:68px;align-items:flex-start;flex-wrap:wrap;gap:14px}
.logo{width:100%}
.nav-links{width:100%;justify-content:flex-start;gap:8px}
.nav-links a{padding:7px 10px}
.nav-links .nav-cta{margin-top:4px}
.banner{margin-top:18px}
.hero{padding:50px 0 40px}
.stats{grid-template-columns:repeat(2,1fr)}
.steps{grid-template-columns:1fr}
Expand All @@ -297,7 +313,8 @@
.tiers{flex-direction:column}
.hero-actions{flex-direction:column;align-items:center}
.hero-proof{justify-content:flex-start}
.nav-links{gap:14px}
.nav-links a[data-track="cta_methodology"],
.nav-links a[data-track="cta_api"]{display:none}
.cta-band{flex-direction:column;align-items:flex-start}
}
</style>
Expand Down
63 changes: 26 additions & 37 deletions src/templates/explorer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
*/

import type { EcosystemStats } from '../db/queries.js'
import { renderPublicFooter, renderPublicHeadStart, renderPublicNav } from './publicPage.js'

export function explorerDashboardHtml(stats: EcosystemStats): string {
const tierOrder = ['Elite', 'Trusted', 'Established', 'Emerging', 'Unverified']
Expand All @@ -33,32 +34,33 @@ export function explorerDashboardHtml(stats: EcosystemStats): string {
})
.join('')

return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Explorer - DJD Agent Score</title>
<meta name="description" content="Live dashboard for DJD trust infrastructure on Base. Explore wallets, certified agents, and the scoring network before your agent transacts.">
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap" rel="stylesheet">
return `${renderPublicHeadStart({
title: 'Explorer - DJD Agent Score',
description:
'Live dashboard for DJD trust infrastructure on Base. Explore wallets, certified agents, and the scoring network before your agent transacts.',
path: '/explorer',
})}
<style>
:root {
--bg:#090d16;--bg2:#10151f;--surface:#1a2030;--surface2:#1f2738;
--border:#1c2536;--border-hi:#2a3548;
--text:#e2e8f0;--dim:#94a3b8;--muted:#4b5c73;
--accent:#22d3ee;--green:#34d399;--yellow:#fbbf24;--orange:#fb923c;--red:#f87171;--purple:#a78bfa;
--bg:#07111f;--bg2:#0d1b2d;--surface:#11233a;--surface2:#182b46;
--border:rgba(129,140,248,0.14);--border-hi:rgba(129,140,248,0.26);
--text:#eef2ff;--dim:#a7b7ce;--muted:#6c7b92;
--accent:#7dd3fc;--green:#34d399;--yellow:#fbbf24;--orange:#fb923c;--red:#f87171;--purple:#818cf8;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh}
body{
background:
radial-gradient(circle at top left, rgba(129,140,248,0.18), transparent 28%),
radial-gradient(circle at top right, rgba(125,211,252,0.16), transparent 30%),
linear-gradient(180deg, #07111f 0%, #091728 42%, #060d18 100%);
color:var(--text);
font-family:'DM Sans',sans-serif;
-webkit-font-smoothing:antialiased;
min-height:100vh
}
.mono{font-family:'JetBrains Mono',monospace}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
nav{padding:16px 24px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border)}
.logo{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:16px;color:var(--accent)}
.logo span{color:var(--dim);font-weight:400}
.nav-r{margin-left:auto;display:flex;gap:16px}
.nav-r a{color:var(--muted);font-size:12px;font-family:'JetBrains Mono',monospace}
.nav-r a:hover{color:var(--accent);text-decoration:none}
.wrap{max-width:960px;margin:0 auto;padding:32px 24px}
.wrap{max-width:1080px;margin:0 auto;padding:56px 28px 32px}

/* ── Ecosystem Overview ── */
.eco-panel{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:28px;margin-bottom:28px}
Expand Down Expand Up @@ -217,8 +219,6 @@ td{padding:10px 14px;font-size:13px;vertical-align:middle}
.loading{text-align:center;padding:40px;color:var(--muted);font-size:14px}
.updated-at{font-size:11px;color:var(--muted);margin-top:10px;text-align:right;font-family:'JetBrains Mono',monospace}

footer{text-align:center;padding:36px 24px;color:var(--muted);font-size:12px;border-top:1px solid var(--border);margin-top:40px;font-family:'JetBrains Mono',monospace}
footer a{color:var(--muted)}
@media(max-width:640px){
.panel-hdr{flex-direction:column;align-items:center;text-align:center}
.sc-bar-bg,.age-col,.sig{display:none}
Expand All @@ -227,19 +227,7 @@ footer a{color:var(--muted)}
.eco-row{flex-direction:column}
}
</style>
</head>
<body>
<nav>
<a class="logo" href="/">DJD <span>Agent Score</span></a>
<div class="nav-r">
<a href="/">Home</a>
<a href="/explorer">Explorer</a>
<a href="/certify">Certify</a>
<a href="/docs">API Docs</a>
<a href="/pricing">Pricing</a>
<a href="/methodology">Methodology</a>
</div>
</nav>
${renderPublicNav('explorer', '/pricing', 'View Pricing')}
<div class="wrap">

<!-- ── Ecosystem Overview (server-rendered) ── -->
Expand Down Expand Up @@ -734,6 +722,7 @@ async function loadLB() {
});
})();
</script>
</body>
</html>`
${renderPublicFooter({
copy: 'Explorer is the live dashboard view into DJD trust infrastructure on Base. It keeps the same brand system as the pricing and certification surfaces while preserving its operational layout.',
})}`
}
109 changes: 83 additions & 26 deletions src/templates/legal.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,93 @@
import { getSupportEmail } from '../config/public.js'
import { renderPublicPage } from './publicPage.js'

// ─── Legal page templates ───
// White theme (Terms/Privacy), dark GitHub theme (Leaderboard)

const SUPPORT_EMAIL = getSupportEmail()

export const wrapHtml = (title: string, content: string) => `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${title} - DJD Agent Score</title>
<style>
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 40px 20px; color: #1a1a1a; line-height: 1.7; }
h1 { font-size: 28px; margin-top: 40px; margin-bottom: 16px; color: #111; }
h2 { font-size: 22px; margin-top: 32px; margin-bottom: 12px; color: #222; }
p { margin-bottom: 16px; font-size: 15px; }
.title { text-align: center; margin-bottom: 8px; font-size: 32px; }
.subtitle { text-align: center; margin-bottom: 8px; font-size: 26px; }
.date { text-align: center; font-style: italic; margin-bottom: 40px; color: #666; }
.caps { text-transform: uppercase; }
table { border-collapse: collapse; width: 100%; margin: 16px 0; }
th, td { border: 1px solid #ddd; padding: 10px 12px; font-size: 14px; text-align: left; }
th { background: #2B3544; color: #fff; font-weight: 600; }
tr:nth-child(even) { background: #f9f9f9; }
.footer { margin-top: 60px; padding-top: 20px; border-top: 1px solid #ddd; font-size: 13px; color: #888; }
</style>
</head>
<body>${content}
<div class="footer">DJD Agent Score &middot; Trust infrastructure for the agent economy</div>
</body>
</html>`
export const wrapHtml = (title: string, content: string) =>
`${renderPublicPage({
title: `${title} - DJD Agent Score`,
description: `${title} for DJD Agent Score, the trust infrastructure platform for the agent economy.`,
path: title === 'Terms of Service' ? '/terms' : title === 'Privacy Policy' ? '/privacy' : '/',
ctaHref: '/pricing',
ctaLabel: 'View Pricing',
extraCss: `
.legal-shell{padding-top:56px}
.legal-article{max-width:900px}
.legal-prose h1{
font-size:28px;
margin-top:38px;
margin-bottom:16px;
color:var(--text);
font-family:'Instrument Serif',serif;
font-weight:400;
letter-spacing:-0.02em;
}
.legal-prose h2{
font-size:20px;
margin-top:28px;
margin-bottom:12px;
color:var(--text);
font-weight:700;
}
.legal-prose p{
margin-bottom:16px;
font-size:15px;
color:var(--text-dim);
line-height:1.82;
}
.legal-prose .title{
text-align:center;
margin-bottom:8px;
font-size:42px;
line-height:1.02;
}
.legal-prose .subtitle{
text-align:center;
margin-bottom:8px;
font-size:32px;
line-height:1.08;
}
.legal-prose .date{
text-align:center;
margin-bottom:40px;
color:var(--text-muted);
font-style:italic;
}
.legal-prose .caps{text-transform:uppercase}
.legal-prose table{
border-collapse:collapse;
width:100%;
margin:18px 0;
border-radius:16px;
overflow:hidden;
border:1px solid var(--border);
}
.legal-prose th,
.legal-prose td{
border-bottom:1px solid var(--border);
padding:12px 14px;
font-size:14px;
text-align:left;
}
.legal-prose th{
background:rgba(17,35,58,0.96);
color:var(--text);
font-family:'JetBrains Mono',monospace;
font-size:10px;
font-weight:700;
letter-spacing:0.08em;
text-transform:uppercase;
}
.legal-prose td{color:var(--text-dim)}
.legal-prose tr:nth-child(even) td{background:rgba(7,17,31,0.38)}
`,
footerCopy:
'DJD Agent Score provides trust infrastructure for the agent economy. Legal pages use the same public brand system as the rest of the product.',
content: `<main class="site-shell legal-shell"><article class="article-shell prose legal-prose legal-article">${content}</article></main>`,
})}`

// ─── TERMS OF SERVICE ───

Expand Down
8 changes: 6 additions & 2 deletions src/templates/publicPage.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -512,11 +512,15 @@ nav{
.stat-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
.nav-outer{position:sticky}
nav,
.site-shell,
.site-footer-inner{padding-left:20px;padding-right:20px}
nav{height:auto;min-height:68px;padding-top:12px;padding-bottom:12px;align-items:flex-start}
.nav-links{width:100%;justify-content:flex-start}
nav{height:auto;min-height:68px;padding-top:12px;padding-bottom:12px;align-items:flex-start;flex-wrap:wrap}
.logo{width:100%}
.nav-links{width:100%;justify-content:flex-start;gap:8px}
.nav-link{padding:7px 10px}
.nav-cta{margin-top:4px}
.hero{padding-top:56px}
.article-shell{margin-top:56px;padding:20px}
}
Expand Down
Loading