Improve cockpit typography for readability across all pages.

Raise base font to 16px, enlarge sidebar, buttons, tables and headings, add Inter font and global typography layer.
This commit is contained in:
Aissa
2026-07-19 18:49:52 +00:00
parent 8d2766efb6
commit ff22498dcd
6 changed files with 206 additions and 27 deletions
+12 -12
View File
@@ -25,13 +25,13 @@
border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}
.app-sidebar-brand .brand-title {
font-size: 0.58rem;
letter-spacing: 0.14em;
font-size: 0.75rem;
letter-spacing: 0.1em;
color: #64748b;
margin: 0;
}
.app-sidebar-brand .brand-name {
font-size: 0.95rem;
font-size: 1.05rem;
font-weight: 700;
color: #e2e8f0;
margin: 0.2rem 0 0;
@@ -50,7 +50,7 @@
color: #94a3b8;
border-radius: 8px;
padding: 0.45rem 0.25rem;
font-size: 0.58rem;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
@@ -65,8 +65,8 @@
margin-bottom: 0.65rem;
}
.app-sidebar-label {
font-size: 0.56rem;
letter-spacing: 0.12em;
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #64748b;
padding: 0.2rem 0.5rem 0.35rem;
@@ -80,12 +80,12 @@
gap: 0.5rem;
width: 100%;
margin: 0 0 0.2rem;
padding: 0.5rem 0.55rem;
padding: 0.55rem 0.65rem;
border-radius: 8px;
border: 1px solid rgba(148, 163, 184, 0.1);
background: rgba(15, 23, 42, 0.5);
color: #cbd5e1 !important;
font-size: 0.78rem;
font-size: 0.9375rem;
font-weight: 500;
text-decoration: none;
text-align: left;
@@ -121,14 +121,14 @@
}
.sidebar-nav-icon {
width: 26px;
height: 26px;
width: 28px;
height: 28px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
font-size: 0.85rem;
font-size: 0.95rem;
background: rgba(8, 12, 18, 0.9);
border: 1px solid rgba(148, 163, 184, 0.12);
}
@@ -169,7 +169,7 @@
.persona-badge {
display: inline-block;
font-size: 0.62rem;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.08em;
padding: 0.15rem 0.45rem;
+162
View File
@@ -0,0 +1,162 @@
/* Cockpit readability — loads last, harmonizes all modules */
html {
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body {
font-size: var(--text-base, 1rem);
line-height: var(--leading, 1.55);
}
/* Headings */
h1 { font-size: var(--text-3xl, 1.75rem); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: var(--text-xl, 1.25rem); font-weight: 600; }
h3 { font-size: var(--text-lg, 1.125rem); font-weight: 600; }
h4 { font-size: var(--text-md, 1.0625rem); font-weight: 600; }
.page-header h1,
.ei-header h1,
.herman-shell.hm-neo .herman-hero h1 {
font-size: 1.75rem !important;
}
.page-header .subtitle,
.ei-subtitle,
.ei-header .ei-subtitle {
font-size: 0.9375rem !important;
line-height: 1.5;
}
.ei-tab-panel-head h2,
.panel-inner h2,
.briefing-card h3 {
font-size: 1.125rem !important;
}
/* Body text minimum */
p, li, td, label, .page-tip {
font-size: max(0.9375rem, 1em);
}
/* Tables */
.ei-table,
.data-table,
.voice-results-table,
.clients-table,
.deals-table {
font-size: 0.9375rem !important;
}
.ei-table th,
.data-table th {
font-size: 0.8125rem !important;
font-weight: 600;
}
.ei-table td,
.data-table td {
padding: 0.6rem 0.75rem !important;
}
/* Buttons & inputs */
.btn {
font-size: 0.9375rem !important;
font-weight: 500;
}
.btn-sm {
font-size: 0.875rem !important;
}
.form-input,
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
font-size: 0.9375rem !important;
}
/* Sidebar nav */
.app-sidebar a.nav-pill {
font-size: 0.9375rem !important;
}
.app-sidebar-label {
font-size: 0.75rem !important;
font-weight: 600;
}
.app-topbar,
.app-clock {
font-size: 0.875rem !important;
}
/* KPI cards */
.ei-neo-kpi-label,
.hm-neo-kpi-label,
.briefing-stat-label,
.stat-label {
font-size: 0.8125rem !important;
}
.ei-neo-kpi-value,
.hm-neo-kpi-value,
.briefing-stat-value {
font-size: 1.65rem !important;
}
/* Tabs & filters */
.vtab-btn,
.vtab-btn-rich,
.ei-filter-label,
.ei-type-chip {
font-size: 0.9375rem !important;
}
.ei-filter-group input,
.ei-filter-group select {
font-size: 0.9375rem !important;
}
/* Badges & pills — readable but compact */
.ei-type-pill,
.ei-halal-pill,
.badge,
.ei-crm-badge,
.live-badge {
font-size: 0.8125rem !important;
}
/* Herman dashboard micro-labels */
.hm-neo-kpi-label,
.hm-section-label,
.herman-shell.hm-neo .hm-card-label {
font-size: 0.8125rem !important;
letter-spacing: 0.06em !important;
}
/* Export intel */
.ei-sync-msg,
.ei-selection-hint,
.ei-map-truncated {
font-size: 0.875rem !important;
}
.ei-drawer-title {
font-size: 1.35rem !important;
}
.ei-drawer-kv,
.ei-popup-row {
font-size: 0.875rem !important;
}
/* Mobile — never shrink below readable */
@media (max-width: 768px) {
html { font-size: 16px; }
.app-sidebar a.nav-pill { font-size: 0.9375rem !important; }
.page-header h1 { font-size: 1.5rem !important; }
}
+9 -8
View File
@@ -12,8 +12,9 @@ body {
background: var(--bg-root);
color: var(--text-primary);
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.5;
font-size: 16px;
line-height: 1.55;
letter-spacing: 0.01em;
}
a {
@@ -155,7 +156,7 @@ html {
.panel h2 {
margin: 0 0 1rem;
font-size: 0.8rem;
font-size: 1.0625rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
@@ -395,7 +396,7 @@ html {
.data-table {
width: 100%;
border-collapse: collapse;
font-size: 0.8125rem;
font-size: 0.9375rem;
}
.data-table th,
@@ -408,7 +409,7 @@ html {
.data-table th {
color: var(--text-muted);
font-weight: 600;
font-size: 0.7rem;
font-size: 0.8125rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
@@ -484,7 +485,7 @@ html {
.drawer.open { transform: translateX(0); }
.drawer-close { float: right; background: transparent; border: none; color: var(--text-primary); font-size: 1.5rem; cursor: pointer; }
.btn-group { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.btn-sm { padding: .25rem .55rem; font-size: 12px; }
.btn-sm { padding: 0.35rem 0.75rem; font-size: 0.875rem; min-height: 2rem; }
.clickable-row { cursor: pointer; transition: background .15s; }
.clickable-row:hover { background: var(--bg-hover); }
.clickable-kpi { text-decoration: none; color: inherit; display: block; transition: transform .15s, box-shadow .15s; }
@@ -511,7 +512,7 @@ html {
.chat-msg.user { background: rgba(0,200,255,.08); }
.chat-msg.agent { background: var(--bg-root); border: 1px solid var(--border-subtle); }
.chat-input { display: flex; gap: .5rem; }
.page-tip { color: var(--text-muted); font-size: 13px; }
.page-tip { color: var(--text-muted); font-size: 0.9375rem; line-height: 1.5; }
.ai-output { white-space: pre-wrap; background: var(--bg-root); padding: 1rem; border-radius: var(--radius-md); min-height: 80px; }
.log-list { list-style: none; padding: 0; max-height: 240px; overflow: auto; }
body.drawer-open { overflow: hidden; }
@@ -674,7 +675,7 @@ body.drawer-open { overflow: hidden; }
}
@media (max-width: 600px) { .settings-form-grid { grid-template-columns: 1fr; } }
.form-label { display: block; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.75rem; }
.form-label { display: block; font-size: 0.875rem; color: var(--text-muted); margin-bottom: 0.75rem; }
.form-label .form-input { margin-top: 0.25rem; }
.form-check { display: flex; align-items: center; gap: 0.5rem; margin: 0.75rem 0; font-size: 0.9rem; }
+12
View File
@@ -24,6 +24,18 @@
--radius-md: 8px;
--radius-lg: 12px;
--font-sans: "Inter", "Segoe UI", system-ui, sans-serif;
/* Typography scale (16px root) */
--text-xs: 0.8125rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-md: 1.0625rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.75rem;
--leading: 1.55;
--leading-tight: 1.35;
--font-mono: "JetBrains Mono", "Fira Code", monospace;
--sidebar-width: 240px;
}
+4 -4
View File
@@ -75,7 +75,7 @@
border-radius: 8px;
background: transparent;
color: #94a3b8;
font-size: 0.8rem;
font-size: 0.9375rem;
font-weight: 500;
text-align: left;
cursor: pointer;
@@ -158,7 +158,7 @@
}
.ei-vtab-sub {
display: block;
font-size: 0.62rem;
font-size: 0.75rem;
color: #64748b;
margin-top: 0.1rem;
}
@@ -169,7 +169,7 @@
gap: 0.15rem;
}
.ei-vtab-key {
font-size: 0.55rem;
font-size: 0.6875rem;
color: #475569;
font-family: ui-monospace, monospace;
}
@@ -203,7 +203,7 @@
.vt-tab-panel-head p,
.ei-tab-panel-head p {
margin: 0.1rem 0 0;
font-size: 0.72rem;
font-size: 0.8125rem;
color: #64748b;
}
.vt-tab-panel-body,