feat: integrate ITWorx branding and refine cockpit UX

static/css/auth.css

@@ -125,11 +125,9 @@ body.auth-page {
 
 .auth-brand-logo {
   display: block;
-  width: 64px;
-  height: 64px;
-  margin-bottom: 16px;
-  border-radius: 16px;
-  box-shadow: 0 10px 24px rgba(0, 124, 131, 0.28), 0 2px 6px rgba(18, 38, 43, 0.08);
+  width: min(274px, 78vw);
+  height: auto;
+  margin-bottom: 18px;
 }
 
 .auth-brand-name {
@@ -142,9 +140,12 @@ body.auth-page {
 }
 
 .auth-brand-tagline {
-  margin: 4px 0 0;
-  font-size: 14px;
-  line-height: 20px;
+  margin: 6px 0 0;
+  font-size: 11px;
+  line-height: 18px;
+  font-weight: 700;
+  letter-spacing: .12em;
+  text-transform: uppercase;
   color: var(--on-surface-variant);
 }
 

static/css/premium.css

@@ -34,7 +34,13 @@ body::before {
 
 .cockpit-sidebar { background: color-mix(in srgb, var(--surface-lowest) 97%, black); }
 .cockpit-main { padding-top: calc(var(--topbar-height) + 42px); }
-.cockpit-main > * { max-width: 1860px; }
+.cockpit-main > * { max-width: 2800px; margin-right: auto; margin-left: 0; }
+.brand-lockup { display: grid; min-width: 0; gap: 5px; }
+.brand-wordmark { display: block; width: 174px; height: auto; padding: 5px 8px; border-radius: 7px; background: rgba(255, 255, 255, .94); }
+.cockpit-brand small { margin: 0 2px; color: var(--text-faint); font-size: 8px; font-weight: 700; letter-spacing: .08em; }
+.workspace-identity { display: grid; min-width: 176px; padding-right: 18px; border-right: 1px solid var(--divider); line-height: 1.1; }
+.workspace-identity span { color: var(--text-strong); font-size: 14px; font-weight: 740; letter-spacing: -.015em; }
+.workspace-identity small { margin-top: 5px; color: var(--text-faint); font: 650 9px var(--font-body); letter-spacing: .075em; text-transform: uppercase; }
 
 .nav-caption,
 .nav-item,
@@ -45,6 +51,9 @@ body::before {
 .nav-item:hover { transform: none; background: color-mix(in srgb, var(--surface-high) 70%, transparent); }
 .nav-item.is-active { background: var(--surface-high); box-shadow: inset 0 0 0 1px var(--divider); }
 .nav-item.is-active::after { inset: 9px auto 9px 0; width: 3px; border-radius: 0 3px 3px 0; box-shadow: none; }
+.nav-item .icon { transition: color .16s ease, transform .16s ease; }
+.nav-item:hover .icon { transform: scale(1.06); color: var(--text-strong); }
+.nav-item.is-active span { font-weight: 680; }
 
 .cockpit-heading { margin-bottom: 30px; }
 .cockpit-heading h1 { max-width: 900px; }
@@ -65,6 +74,8 @@ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
 select,
 textarea,
 .command-search { border-color: var(--divider-strong); border-radius: 9px; background: color-mix(in srgb, var(--surface-low) 90%, transparent); }
+.command-search { transition: width .2s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease; }
+.command-search:focus-within { width: min(620px, 65vw); border-color: color-mix(in srgb, var(--cyan) 58%, var(--outline)); background: var(--surface-container); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 8%, transparent); }
 .field-label,
 label > span:first-child { font-family: var(--font-body); font-weight: 700; letter-spacing: .065em; }
 
@@ -151,6 +162,11 @@ label > span:first-child { font-family: var(--font-body); font-weight: 700; lett
 .pill { border-color: transparent; border-radius: 999px; }
 .empty-state { border-color: var(--divider-strong); border-radius: var(--radius-md); }
 
+@media (min-width: 1800px) {
+  .explorer-shell { grid-template-columns: minmax(650px, 880px) minmax(760px, 1fr); }
+  .automation-layout { grid-template-columns: minmax(0, 1fr) minmax(340px, 430px); }
+}
+
 @media (max-width: 1450px) {
   .filter-console { grid-template-columns: minmax(250px, 1.5fr) repeat(3, minmax(135px, 1fr)); }
   .filter-console > :nth-last-child(-n+3) { grid-row: 2; }
@@ -171,6 +187,7 @@ label > span:first-child { font-family: var(--font-body); font-weight: 700; lett
   .profile-index-card { grid-template-columns: 1fr; }
   .profile-index-art { min-height: 230px; border-top: 1px solid var(--divider); border-left: 0; }
   .profile-index-art .radar-illustration { width: 220px; }
+  .command-search:focus-within { width: min(100%, 510px); }
 }
 
 @media (max-width: 560px) {

static/favicon.svg

@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-  <rect width="64" height="64" rx="10" fill="#00f5ff"/>
-  <g fill="none" stroke="#003739" stroke-linecap="round" stroke-linejoin="round" stroke-width="4">
-    <circle cx="32" cy="32" r="20"/>
-    <circle cx="32" cy="32" r="11"/>
-    <path d="m32 32 15-15M32 8v5M8 32h5M32 51v5M51 32h5"/>
-  </g>
-</svg>

static/img/README.md

@@ -0,0 +1,7 @@
+# Lokale merkassets
+
+`itworx-wordmark.png` is de transparante, opgeschoonde officiële ITWorx.tech-wordmark uit `ITWorx_Logo_Asset_Pack_2026-07-25.zip`, door de projecteigenaar aangeleverd op 2026-07-26.
+
+`itworx-app-icon.png` en `vacatureradar-docker.png` zijn deterministisch uitgesneden en met Lanczos geschaalde varianten van het cloud-check-symbool uit dezelfde goedgekeurde wordmark. Ze bevatten geen nieuw of gegenereerd beeldmerk. Het app-icon is 512×512; de Dockermanvariant is 256×256.
+
+Deze assets zijn uitsluitend voor de eigen VacatureRadar-installatie en worden niet als generiek herbruikbare of publiek gelicenseerde merkset aangeboden.

static/img/vacatureradar-logo.svg

@@ -1,8 +0,0 @@
-<svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="VacatureRadar">
-  <rect width="64" height="64" rx="12" fill="#007c83"/>
-  <g fill="none" stroke="#f2ffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="4">
-    <circle cx="32" cy="32" r="20"/>
-    <circle cx="32" cy="32" r="11"/>
-    <path d="m32 32 15-15M32 8v5M8 32h5M32 51v5M51 32h5"/>
-  </g>
-</svg>