diff --git a/frontend/public/styles.css b/frontend/public/styles.css index 2bc3caf..157b973 100644 --- a/frontend/public/styles.css +++ b/frontend/public/styles.css @@ -149,30 +149,37 @@ } .dashboard-header { - min-height: 88px; - background: rgba(30, 41, 59, 0.96); - color: #fff; - border-bottom: 1px solid rgba(148, 163, 184, 0.2); + min-height: 68px; + background: rgba(255, 255, 255, 0.94); + color: var(--color-text); + border-bottom: 1px solid #d7dee8; display: grid; grid-template-columns: auto 1fr auto; align-items: center; - gap: 20px; - padding: 18px 26px; + gap: 16px; + padding: 10px 22px; position: sticky; top: 0; z-index: 50; - backdrop-filter: blur(16px); + backdrop-filter: blur(12px); } .dashboard-header .eyebrow { - color: #a5b4fc; - margin-bottom: 6px; + color: var(--color-accent); + margin-bottom: 2px; +} + +.dashboard-header h2 { + font-size: 28px; + line-height: 1; + letter-spacing: -0.04em; + color: var(--color-text); } .header-center { display: flex; justify-content: center; - gap: 10px; + gap: 8px; flex-wrap: wrap; } @@ -180,13 +187,13 @@ display: inline-flex; align-items: center; justify-content: center; - min-height: 40px; - padding: 0 16px; + min-height: 34px; + padding: 0 14px; border-radius: 999px; - border: 1px solid rgba(255, 255, 255, 0.1); - background: rgba(255, 255, 255, 0.08); - color: #e2e8f0; - font-size: 13px; + border: 1px solid #dbe2ea; + background: #f8fafc; + color: var(--color-text-muted); + font-size: 12px; font-weight: 800; } @@ -194,55 +201,61 @@ background: var(--color-accent); border-color: transparent; color: #fff; - box-shadow: 0 10px 24px rgba(79, 70, 229, 0.3); + box-shadow: 0 10px 20px rgba(79, 70, 229, 0.2); } .nav-pill.muted { - color: #94a3b8; + color: #64748b; } .header-actions { display: flex; align-items: center; - gap: 12px; + gap: 8px; } .status-badge, .user-badge { display: inline-flex; align-items: center; - min-height: 40px; + min-height: 34px; + padding: 0 12px; + border-radius: 999px; + font-size: 11px; + font-weight: 800; +} + +.status-badge { + background: #eef2ff; + color: var(--color-accent-strong); + border: 1px solid #dfe5ff; +} + +.user-badge { + background: #f8fafc; + color: var(--color-text); + border: 1px solid #dbe2ea; +} + +.ghost-button { + min-height: 34px; + border: 1px solid #dbe2ea; + background: #fff; + color: var(--color-text); padding: 0 14px; border-radius: 999px; font-size: 12px; font-weight: 800; } -.status-badge { - background: rgba(79, 70, 229, 0.18); - color: #c7d2fe; -} - -.user-badge { - background: rgba(255, 255, 255, 0.1); - color: #fff; -} - -.ghost-button { - border: 1px solid rgba(255, 255, 255, 0.16); - background: transparent; - color: #fff; - padding: 0 16px; -} - .dashboard-main { flex: 1; - min-height: calc(100vh - 88px); + min-height: calc(100vh - 68px); padding: 0; } .main-stage { - height: calc(100vh - 88px); + height: calc(100vh - 68px); display: flex; flex-direction: column; } @@ -305,6 +318,6 @@ } .main-stage { - height: calc(100vh - 88px); + height: calc(100vh - 68px); } }