diff --git a/cockpit/static/css/app-sidebar-neo.css b/cockpit/static/css/app-sidebar-neo.css index 40a03f7..8dc9b3b 100644 --- a/cockpit/static/css/app-sidebar-neo.css +++ b/cockpit/static/css/app-sidebar-neo.css @@ -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; diff --git a/cockpit/static/css/cockpit-typography.css b/cockpit/static/css/cockpit-typography.css new file mode 100644 index 0000000..249eb7c --- /dev/null +++ b/cockpit/static/css/cockpit-typography.css @@ -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; } +} diff --git a/cockpit/static/css/palantir-theme.css b/cockpit/static/css/palantir-theme.css index 271fc78..8fc9d39 100644 --- a/cockpit/static/css/palantir-theme.css +++ b/cockpit/static/css/palantir-theme.css @@ -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; } diff --git a/cockpit/static/css/tokens.css b/cockpit/static/css/tokens.css index a882b7e..48c3462 100644 --- a/cockpit/static/css/tokens.css +++ b/cockpit/static/css/tokens.css @@ -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; } diff --git a/cockpit/static/css/vertical-tabs.css b/cockpit/static/css/vertical-tabs.css index ca6b326..358d389 100644 --- a/cockpit/static/css/vertical-tabs.css +++ b/cockpit/static/css/vertical-tabs.css @@ -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, diff --git a/cockpit/templates/base.html b/cockpit/templates/base.html index 9a23ca9..964c400 100644 --- a/cockpit/templates/base.html +++ b/cockpit/templates/base.html @@ -9,19 +9,23 @@ {% block title %}{{ page_title }} ยท Cucina{% endblock %} + + + - + - + {% block extra_head %}{% endblock %} - + +