From e3aa20ad261eed1e269448a8ef0a905b194f621b Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Fri, 27 Mar 2026 15:51:01 +0000
Subject: [PATCH] style(portal): tighten typography and geometry

---
 .../cloudcp/portal/dist/build_manifest.json   |   2 +-
 internal/cloudcp/portal/dist/portal_app.css   | 131 +++++++++---------
 .../cloudcp/portal/frontend/src/styles.css    | 120 ++++++++--------
 3 files changed, 128 insertions(+), 125 deletions(-)

diff --git a/internal/cloudcp/portal/dist/build_manifest.json b/internal/cloudcp/portal/dist/build_manifest.json
index 5f37d47e48..07b3098a61 100644
--- a/internal/cloudcp/portal/dist/build_manifest.json
+++ b/internal/cloudcp/portal/dist/build_manifest.json
@@ -1,5 +1,5 @@
 {
-  "source_hash": "3b31c205a79f7c867444f852e0c63518ac751ef055d7c7679830912af99327cf",
+  "source_hash": "0e9ac055e4ca87b33a6dcf2f05065682e246c38a1ed4c59cf88d2bf14ae8bdee",
   "build_inputs": [
     "package.json",
     "tsconfig.json",
diff --git a/internal/cloudcp/portal/dist/portal_app.css b/internal/cloudcp/portal/dist/portal_app.css
index 5a28639288..1b1d500907 100644
--- a/internal/cloudcp/portal/dist/portal_app.css
+++ b/internal/cloudcp/portal/dist/portal_app.css
@@ -1,29 +1,29 @@
 /* src/styles.css */
 :root {
   color-scheme: light;
-  --bg: #f4efe5;
-  --panel: #fffdf8;
-  --panel-strong: #fffaf1;
-  --panel-muted: #f7f1e7;
-  --ink: #1f2933;
-  --ink-soft: #536171;
-  --ink-muted: #7a8795;
-  --line: #dfd2bd;
-  --line-strong: #cbb799;
-  --accent: #0f6d73;
-  --accent-strong: #0a4f57;
-  --accent-soft: #d9efef;
+  --bg: #f3f4f6;
+  --panel: #ffffff;
+  --panel-strong: #fbfbfc;
+  --panel-muted: #f6f7f9;
+  --ink: #17202a;
+  --ink-soft: #5a6675;
+  --ink-muted: #7d8895;
+  --line: #dde3ea;
+  --line-strong: #c5d0da;
+  --accent: #0b6a72;
+  --accent-strong: #084d53;
+  --accent-soft: #dceef0;
   --warn: #9a3412;
-  --warn-soft: #fff1df;
+  --warn-soft: #fff3e6;
   --danger: #a61b1b;
-  --danger-soft: #fde8e8;
-  --success: #1f6b42;
-  --success-soft: #dff4e7;
-  --shadow-sm: 0 1px 3px rgba(31, 41, 51, 0.08);
-  --shadow-md: 0 14px 32px rgba(31, 41, 51, 0.08);
-  --radius-sm: 10px;
-  --radius-md: 18px;
-  --radius-lg: 26px;
+  --danger-soft: #fdeaea;
+  --success: #19603c;
+  --success-soft: #e3f3e8;
+  --shadow-sm: 0 1px 2px rgba(23, 32, 42, 0.06);
+  --shadow-md: 0 10px 24px rgba(23, 32, 42, 0.08);
+  --radius-sm: 6px;
+  --radius-md: 12px;
+  --radius-lg: 18px;
 }
 * {
   box-sizing: border-box;
@@ -35,19 +35,22 @@ body {
   margin: 0;
   min-height: 100vh;
   font-family:
-    "Avenir Next",
+    Inter,
+    "Segoe UI Variable Text",
     "Segoe UI",
+    -apple-system,
+    BlinkMacSystemFont,
     "Helvetica Neue",
     sans-serif;
   background:
     radial-gradient(
       circle at top left,
-      rgba(15, 109, 115, 0.08),
-      transparent 32%),
+      rgba(11, 106, 114, 0.045),
+      transparent 28%),
     linear-gradient(
       180deg,
-      #f7f3eb 0%,
-      #f2ece1 100%);
+      #f7f8fa 0%,
+      #f1f3f6 100%);
   color: var(--ink);
 }
 a {
@@ -62,23 +65,23 @@ header {
   justify-content: space-between;
   gap: 16px;
   padding: 18px 28px;
-  border-bottom: 1px solid rgba(203, 183, 153, 0.55);
-  background: rgba(255, 251, 244, 0.9);
+  border-bottom: 1px solid rgba(197, 208, 218, 0.8);
+  background: rgba(248, 249, 251, 0.92);
   backdrop-filter: blur(14px);
 }
 header .brand {
-  font-size: 19px;
+  font-size: 18px;
   font-weight: 700;
-  letter-spacing: -0.03em;
+  letter-spacing: -0.02em;
 }
 .header-account-chip {
   display: inline-flex;
   align-items: center;
   gap: 12px;
-  border: 1px solid rgba(203, 183, 153, 0.75);
-  background: rgba(255, 253, 248, 0.95);
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.96);
   border-radius: 999px;
-  padding: 6px 8px 6px 14px;
+  padding: 4px 8px 4px 12px;
 }
 .header-account-email {
   font-size: 13px;
@@ -101,8 +104,8 @@ header .logout-btn,
   border: 1px solid var(--line-strong);
   background: #fff;
   color: var(--ink);
-  border-radius: 999px;
-  padding: 10px 16px;
+  border-radius: 8px;
+  padding: 9px 14px;
   cursor: pointer;
   transition:
     border-color 140ms ease,
@@ -119,8 +122,8 @@ header .logout-btn:hover,
   box-shadow: var(--shadow-sm);
 }
 .btn-primary {
-  border-radius: 999px;
-  padding: 11px 18px;
+  border-radius: 8px;
+  padding: 10px 15px;
   background: var(--accent);
   color: #fff;
   font-weight: 600;
@@ -136,8 +139,8 @@ header .logout-btn:hover,
   box-shadow: var(--shadow-sm);
 }
 .btn-danger {
-  border-radius: 999px;
-  padding: 11px 18px;
+  border-radius: 8px;
+  padding: 10px 15px;
   background: var(--danger-soft);
   color: var(--danger);
   cursor: pointer;
@@ -165,18 +168,18 @@ header .logout-btn:hover,
   display: grid;
   grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.95fr);
   gap: 20px;
-  padding: 34px;
-  border: 1px solid rgba(203, 183, 153, 0.8);
+  padding: 30px;
+  border: 1px solid var(--line);
   border-radius: var(--radius-lg);
   background:
     linear-gradient(
       135deg,
-      rgba(15, 109, 115, 0.08),
-      rgba(255, 255, 255, 0) 42%),
+      rgba(11, 106, 114, 0.035),
+      rgba(255, 255, 255, 0) 38%),
     linear-gradient(
       180deg,
-      rgba(255, 253, 248, 0.98),
-      rgba(248, 241, 231, 0.98));
+      rgba(255, 255, 255, 0.98),
+      rgba(248, 250, 252, 0.98));
   box-shadow: var(--shadow-md);
 }
 .portal-hero-copy {
@@ -205,15 +208,15 @@ header .logout-btn:hover,
 .portal-hero h1,
 .intro-card h1 {
   margin: 0;
-  font-size: clamp(2rem, 3.6vw, 3.3rem);
-  line-height: 0.96;
-  letter-spacing: -0.05em;
+  font-size: clamp(1.85rem, 3.1vw, 2.9rem);
+  line-height: 0.98;
+  letter-spacing: -0.045em;
 }
 .portal-hero p,
 .intro-card p {
   margin: 0;
-  font-size: 16px;
-  line-height: 1.7;
+  font-size: 15px;
+  line-height: 1.6;
   color: var(--ink-soft);
 }
 .portal-hero-stats {
@@ -226,11 +229,11 @@ header .logout-btn:hover,
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  min-height: 136px;
-  padding: 18px;
-  border: 1px solid rgba(203, 183, 153, 0.75);
+  min-height: 120px;
+  padding: 16px;
+  border: 1px solid var(--line);
   border-radius: var(--radius-md);
-  background: rgba(255, 251, 244, 0.9);
+  background: rgba(255, 255, 255, 0.92);
 }
 .portal-hero-stat-label {
   font-size: 12px;
@@ -269,8 +272,8 @@ header .logout-btn:hover,
 .service-panel,
 .account-surface,
 .empty-state {
-  border: 1px solid rgba(203, 183, 153, 0.78);
-  background: rgba(255, 253, 248, 0.96);
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.98);
   box-shadow: var(--shadow-sm);
 }
 .portal-section-link {
@@ -418,7 +421,7 @@ header .logout-btn:hover,
 .team-invite-panel,
 .service-card,
 .service-panel .subsection {
-  border: 1px solid rgba(203, 183, 153, 0.72);
+  border: 1px solid var(--line);
   background: var(--panel);
   border-radius: var(--radius-md);
 }
@@ -441,9 +444,9 @@ header .logout-btn:hover,
 .service-panel h3,
 .service-panel .subsection h4 {
   margin: 8px 0 0;
-  font-size: 22px;
-  line-height: 1.05;
-  letter-spacing: -0.04em;
+  font-size: 20px;
+  line-height: 1.08;
+  letter-spacing: -0.03em;
 }
 .account-overview-card p,
 .account-stage-header p,
@@ -556,9 +559,9 @@ header .logout-btn:hover,
 .workspace-management-content h4,
 .team-panel-heading h4 {
   margin: 0;
-  font-size: 21px;
-  line-height: 1.08;
-  letter-spacing: -0.04em;
+  font-size: 18px;
+  line-height: 1.1;
+  letter-spacing: -0.025em;
 }
 .workspace-meta {
   display: flex;
@@ -845,7 +848,7 @@ header .logout-btn:hover,
   border-radius: 999px;
   font-size: 11px;
   font-weight: 800;
-  letter-spacing: 0.1em;
+  letter-spacing: 0.08em;
   text-transform: uppercase;
 }
 .badge-role,
diff --git a/internal/cloudcp/portal/frontend/src/styles.css b/internal/cloudcp/portal/frontend/src/styles.css
index 5de5ab4f35..690097bc73 100644
--- a/internal/cloudcp/portal/frontend/src/styles.css
+++ b/internal/cloudcp/portal/frontend/src/styles.css
@@ -1,28 +1,28 @@
 :root {
   color-scheme: light;
-  --bg: #f4efe5;
-  --panel: #fffdf8;
-  --panel-strong: #fffaf1;
-  --panel-muted: #f7f1e7;
-  --ink: #1f2933;
-  --ink-soft: #536171;
-  --ink-muted: #7a8795;
-  --line: #dfd2bd;
-  --line-strong: #cbb799;
-  --accent: #0f6d73;
-  --accent-strong: #0a4f57;
-  --accent-soft: #d9efef;
+  --bg: #f3f4f6;
+  --panel: #ffffff;
+  --panel-strong: #fbfbfc;
+  --panel-muted: #f6f7f9;
+  --ink: #17202a;
+  --ink-soft: #5a6675;
+  --ink-muted: #7d8895;
+  --line: #dde3ea;
+  --line-strong: #c5d0da;
+  --accent: #0b6a72;
+  --accent-strong: #084d53;
+  --accent-soft: #dceef0;
   --warn: #9a3412;
-  --warn-soft: #fff1df;
+  --warn-soft: #fff3e6;
   --danger: #a61b1b;
-  --danger-soft: #fde8e8;
-  --success: #1f6b42;
-  --success-soft: #dff4e7;
-  --shadow-sm: 0 1px 3px rgba(31, 41, 51, 0.08);
-  --shadow-md: 0 14px 32px rgba(31, 41, 51, 0.08);
-  --radius-sm: 10px;
-  --radius-md: 18px;
-  --radius-lg: 26px;
+  --danger-soft: #fdeaea;
+  --success: #19603c;
+  --success-soft: #e3f3e8;
+  --shadow-sm: 0 1px 2px rgba(23, 32, 42, 0.06);
+  --shadow-md: 0 10px 24px rgba(23, 32, 42, 0.08);
+  --radius-sm: 6px;
+  --radius-md: 12px;
+  --radius-lg: 18px;
 }
 
 * { box-sizing: border-box; }
@@ -34,10 +34,10 @@ html {
 body {
   margin: 0;
   min-height: 100vh;
-  font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
+  font-family: Inter, "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
   background:
-    radial-gradient(circle at top left, rgba(15, 109, 115, 0.08), transparent 32%),
-    linear-gradient(180deg, #f7f3eb 0%, #f2ece1 100%);
+    radial-gradient(circle at top left, rgba(11, 106, 114, 0.045), transparent 28%),
+    linear-gradient(180deg, #f7f8fa 0%, #f1f3f6 100%);
   color: var(--ink);
 }
 
@@ -52,25 +52,25 @@ header {
   justify-content: space-between;
   gap: 16px;
   padding: 18px 28px;
-  border-bottom: 1px solid rgba(203, 183, 153, 0.55);
-  background: rgba(255, 251, 244, 0.9);
+  border-bottom: 1px solid rgba(197, 208, 218, 0.8);
+  background: rgba(248, 249, 251, 0.92);
   backdrop-filter: blur(14px);
 }
 
 header .brand {
-  font-size: 19px;
+  font-size: 18px;
   font-weight: 700;
-  letter-spacing: -0.03em;
+  letter-spacing: -0.02em;
 }
 
 .header-account-chip {
   display: inline-flex;
   align-items: center;
   gap: 12px;
-  border: 1px solid rgba(203, 183, 153, 0.75);
-  background: rgba(255, 253, 248, 0.95);
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.96);
   border-radius: 999px;
-  padding: 6px 8px 6px 14px;
+  padding: 4px 8px 4px 12px;
 }
 
 .header-account-email {
@@ -96,8 +96,8 @@ header .logout-btn,
   border: 1px solid var(--line-strong);
   background: #fff;
   color: var(--ink);
-  border-radius: 999px;
-  padding: 10px 16px;
+  border-radius: 8px;
+  padding: 9px 14px;
   cursor: pointer;
   transition: border-color 140ms ease, background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
 }
@@ -112,8 +112,8 @@ header .logout-btn:hover,
 }
 
 .btn-primary {
-  border-radius: 999px;
-  padding: 11px 18px;
+  border-radius: 8px;
+  padding: 10px 15px;
   background: var(--accent);
   color: #fff;
   font-weight: 600;
@@ -128,8 +128,8 @@ header .logout-btn:hover,
 }
 
 .btn-danger {
-  border-radius: 999px;
-  padding: 11px 18px;
+  border-radius: 8px;
+  padding: 10px 15px;
   background: var(--danger-soft);
   color: var(--danger);
   cursor: pointer;
@@ -162,12 +162,12 @@ header .logout-btn:hover,
   display: grid;
   grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.95fr);
   gap: 20px;
-  padding: 34px;
-  border: 1px solid rgba(203, 183, 153, 0.8);
+  padding: 30px;
+  border: 1px solid var(--line);
   border-radius: var(--radius-lg);
   background:
-    linear-gradient(135deg, rgba(15, 109, 115, 0.08), rgba(255, 255, 255, 0) 42%),
-    linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(248, 241, 231, 0.98));
+    linear-gradient(135deg, rgba(11, 106, 114, 0.035), rgba(255, 255, 255, 0) 38%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
   box-shadow: var(--shadow-md);
 }
 
@@ -201,16 +201,16 @@ header .logout-btn:hover,
 .portal-hero h1,
 .intro-card h1 {
   margin: 0;
-  font-size: clamp(2rem, 3.6vw, 3.3rem);
-  line-height: 0.96;
-  letter-spacing: -0.05em;
+  font-size: clamp(1.85rem, 3.1vw, 2.9rem);
+  line-height: 0.98;
+  letter-spacing: -0.045em;
 }
 
 .portal-hero p,
 .intro-card p {
   margin: 0;
-  font-size: 16px;
-  line-height: 1.7;
+  font-size: 15px;
+  line-height: 1.6;
   color: var(--ink-soft);
 }
 
@@ -225,11 +225,11 @@ header .logout-btn:hover,
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  min-height: 136px;
-  padding: 18px;
-  border: 1px solid rgba(203, 183, 153, 0.75);
+  min-height: 120px;
+  padding: 16px;
+  border: 1px solid var(--line);
   border-radius: var(--radius-md);
-  background: rgba(255, 251, 244, 0.9);
+  background: rgba(255, 255, 255, 0.92);
 }
 
 .portal-hero-stat-label {
@@ -274,8 +274,8 @@ header .logout-btn:hover,
 .service-panel,
 .account-surface,
 .empty-state {
-  border: 1px solid rgba(203, 183, 153, 0.78);
-  background: rgba(255, 253, 248, 0.96);
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.98);
   box-shadow: var(--shadow-sm);
 }
 
@@ -443,7 +443,7 @@ header .logout-btn:hover,
 .team-invite-panel,
 .service-card,
 .service-panel .subsection {
-  border: 1px solid rgba(203, 183, 153, 0.72);
+  border: 1px solid var(--line);
   background: var(--panel);
   border-radius: var(--radius-md);
 }
@@ -468,9 +468,9 @@ header .logout-btn:hover,
 .service-panel h3,
 .service-panel .subsection h4 {
   margin: 8px 0 0;
-  font-size: 22px;
-  line-height: 1.05;
-  letter-spacing: -0.04em;
+  font-size: 20px;
+  line-height: 1.08;
+  letter-spacing: -0.03em;
 }
 
 .account-overview-card p,
@@ -591,9 +591,9 @@ header .logout-btn:hover,
 .workspace-management-content h4,
 .team-panel-heading h4 {
   margin: 0;
-  font-size: 21px;
-  line-height: 1.08;
-  letter-spacing: -0.04em;
+  font-size: 18px;
+  line-height: 1.1;
+  letter-spacing: -0.025em;
 }
 
 .workspace-meta {
@@ -930,7 +930,7 @@ header .logout-btn:hover,
   border-radius: 999px;
   font-size: 11px;
   font-weight: 800;
-  letter-spacing: 0.1em;
+  letter-spacing: 0.08em;
   text-transform: uppercase;
 }