diff --git a/web/static/css/portal.css b/web/static/css/portal.css index f48824c..19afb47 100644 --- a/web/static/css/portal.css +++ b/web/static/css/portal.css @@ -1,22 +1,54 @@ /* ── Reset ─────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } -/* ── Design tokens ─────────────────────────────────────────────────────── */ +/* ── Design tokens ───────────────────────────────────────────────────────── + Aligned to the SoHoLINK homepage schema: teal-ink ground, a two-color brand + (AMBER = action / your money / CTAs, TEAL = link / verified / federation), + and a system type stack (heavy grotesque display · humanist body · mono + utility voice). No webfont CDN — the same stack the landing page uses. */ :root { - --bg: #0a0d12; - --surface: #111820; - --surface-alt: #161f2b; - --border: #1e2a38; - --text: #c8d4e0; - --muted: #7a90a4; - --accent: #00b4d8; - --accent-dim: #008fad; - --ok: #22c55e; - --warn: #f59e0b; - --danger: #ef4444; - --mono: 'JetBrains Mono', Consolas, 'Courier New', monospace; - --display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; - --r: 2px; + --bg: #0C1416; + --surface: #101E22; + --surface-alt: #16262B; + --border: rgba(63,201,182,.16); + --border-strong: rgba(63,201,182,.30); + --hair: rgba(233,239,236,.10); + --text: #E9EFEC; + --muted: #8FA6A4; + --faint: #5E7573; + --amber: #F4A93A; /* action · your money · primary CTAs */ + --amber-deep: #D98A1E; + --accent: #3FC9B6; /* teal — links, labels, borders, focus, verified */ + --accent-dim: #2FB0A0; + --ok: #46C98A; + --warn: #E0B341; + --danger: #E5624A; + --mono: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace; + --display: 'Helvetica Neue', 'Arial Nova', Helvetica, Arial, system-ui, sans-serif; + --body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; + --r: 3px; +} + +/* Light theme — mirrors the homepage's prefers-color-scheme tuning. */ +@media (prefers-color-scheme: light) { + :root { + --bg: #EBF1F0; + --surface: #FFFFFF; + --surface-alt: #F3F7F6; + --border: rgba(18,137,122,.20); + --border-strong: rgba(18,137,122,.34); + --hair: rgba(12,22,24,.12); + --text: #0C1618; + --muted: #4E6462; + --faint: #829997; + --amber: #B8720E; + --amber-deep: #9A5E06; + --accent: #12897A; + --accent-dim: #0E6E62; + --ok: #12805A; + --warn: #9A6B00; + --danger: #B23B27; + } } /* ── Base ───────────────────────────────────────────────────────────────── */ @@ -25,29 +57,32 @@ html { font-size: 14px; } body { background: var(--bg); color: var(--text); - font-family: var(--mono); + font-family: var(--body); + font-size: 15px; line-height: 1.65; min-height: 100vh; display: flex; flex-direction: column; + -webkit-font-smoothing: antialiased; } /* ── Typography ─────────────────────────────────────────────────────────── */ h1, h2, h3, h4 { font-family: var(--display); - font-weight: 700; - line-height: 1.15; - letter-spacing: 0.02em; + font-weight: 800; + line-height: 1.1; + letter-spacing: -0.015em; color: var(--text); + text-wrap: balance; } -h1 { font-size: 3rem; } +h1 { font-size: 3rem; font-weight: 900; letter-spacing: -0.028em; } h2 { font-size: 2.1rem; } h3 { font-size: 1.4rem; } -h4 { font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; } +h4 { font-size: 1rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } -p { color: var(--muted); font-size: 0.875rem; line-height: 1.7; } -a { color: var(--accent); text-decoration: none; } -a:hover { color: var(--accent-dim); } +p { color: var(--muted); font-size: 0.95rem; line-height: 1.7; } +a { color: var(--accent); text-decoration: none; transition: color 0.15s; } +a:hover { color: var(--amber); } code { font-family: var(--mono); font-size: 0.85em; color: var(--accent); } /* ── Layout helpers ─────────────────────────────────────────────────────── */ @@ -74,15 +109,19 @@ code { font-family: var(--mono); font-size: 0.85em; color: var(--accent); } height: 52px; } .nav-brand { - font-family: var(--display); - font-size: 1.35rem; + display: flex; + align-items: center; + gap: 9px; + font-family: var(--mono); + font-size: 1.05rem; font-weight: 700; - letter-spacing: 0.12em; - color: var(--accent); + letter-spacing: 0.02em; + color: var(--text); } +.nav-brand svg { width: 22px; height: 22px; display: block; } .nav-links { list-style: none; display: flex; gap: 2rem; } .nav-links a { color: var(--muted); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; transition: color 0.12s; } -.nav-links a:hover { color: var(--accent); } +.nav-links a:hover { color: var(--amber); } /* ── Footer ─────────────────────────────────────────────────────────────── */ .footer { @@ -153,10 +192,10 @@ code { font-family: var(--mono); font-size: 0.85em; color: var(--accent); } transition: background 0.12s, color 0.12s, border-color 0.12s; line-height: 1.4; } -.btn-primary { background: var(--accent); color: var(--bg); border-color: var(--accent); } -.btn-primary:hover { background: var(--accent-dim); color: var(--bg); border-color: var(--accent-dim); } -.btn-outline { background: transparent; color: var(--accent); border-color: var(--accent); } -.btn-outline:hover { background: var(--accent); color: var(--bg); } +.btn-primary { background: var(--amber); color: #1a1206; border-color: var(--amber); font-weight: 600; } +.btn-primary:hover { background: var(--amber-deep); color: #1a1206; border-color: var(--amber-deep); } +.btn-outline { background: transparent; color: var(--accent); border-color: var(--border-strong); } +.btn-outline:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); } .btn-sm { padding: 0.3rem 0.75rem; font-size: 0.72rem; } /* ── Forms ──────────────────────────────────────────────────────────────── */ @@ -278,7 +317,7 @@ tr:hover td { background: var(--surface-alt); } margin-bottom: 3rem; } .hero h1 { margin-bottom: 0.75rem; } -.hero h1 .hl { color: var(--accent); } +.hero h1 .hl { color: var(--amber); } .hero-sub { max-width: 560px; margin-bottom: 2rem; } .hero-sub p { font-size: 0.9rem; } .hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; } @@ -348,3 +387,18 @@ select:focus-visible, select, textarea { font-size: 1rem; padding: 0.875rem; } } + +/* ── Utility voice ────────────────────────────────────────────────────────── + Eyebrows, labels, nav, badges, and data headers stay in the mono utility + face against the humanist body — the homepage's "// LABEL" register. */ +.nav-links a, +label, +.card-eyebrow, +.stat-label, +.section-label, +.page-header-label, +.badge, +.role-label, +.table-wrap th { + font-family: var(--mono); +} diff --git a/web/static/soholink-mark.svg b/web/static/soholink-mark.svg new file mode 100644 index 0000000..03d1dc8 --- /dev/null +++ b/web/static/soholink-mark.svg @@ -0,0 +1,14 @@ + + + + SoHoLINK + + + + + + diff --git a/web/templates/admin_layout.html b/web/templates/admin_layout.html index 2130b87..5cc0df8 100644 --- a/web/templates/admin_layout.html +++ b/web/templates/admin_layout.html @@ -5,12 +5,17 @@ SoHoLINK Governance + +
-
+
Local-only governance surface · :8090
diff --git a/web/templates/consumer_job_status.html b/web/templates/consumer_job_status.html index ec497c6..5e55d7e 100644 --- a/web/templates/consumer_job_status.html +++ b/web/templates/consumer_job_status.html @@ -36,7 +36,7 @@

Job Status

Assigned Node
{{if .NodeID}} -

{{.NodeID}}

+

{{.NodeID}}

{{else}}

Pending assignment

{{end}} diff --git a/web/templates/layout.html b/web/templates/layout.html index 8bd2c16..1b8e9de 100644 --- a/web/templates/layout.html +++ b/web/templates/layout.html @@ -5,22 +5,16 @@ SoHoLINK - - - - + +