feat: complete premium visual audit and brand refinement

static/css/app.css

@@ -1,7 +1,9 @@
-@import url("tokens.css");
-@import url("base.css");
-@import url("layout.css");
-@import url("components.css");
-@import url("pages.css");
-@import url("responsive.css");
-@import url("premium.css");
+/* Houd ook geïmporteerde stylesheets versieerbaar; alleen app.css voorzien van
+   een querystring ververst anders niet noodzakelijk de browsercache. */
+@import url("tokens.css?v=0.3.9");
+@import url("base.css?v=0.3.9");
+@import url("layout.css?v=0.3.9");
+@import url("components.css?v=0.3.9");
+@import url("pages.css?v=0.3.9");
+@import url("responsive.css?v=0.3.9");
+@import url("premium.css?v=0.3.9");

static/css/auth.css

@@ -125,9 +125,29 @@ body.auth-page {
 
 .auth-brand-logo {
   display: block;
-  width: min(274px, 78vw);
+  width: 72px;
+  height: 72px;
+  margin-bottom: 16px;
+  border-radius: 18px;
+  box-shadow: 0 16px 38px rgba(0, 124, 131, 0.16), 0 2px 6px rgba(18, 38, 43, 0.08);
+}
+
+.auth-shell > .developer-credit {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  justify-content: center;
+  margin: 18px auto 0;
+  color: var(--on-surface-variant);
+  font: 700 9px/1 var(--font-sans);
+  letter-spacing: .1em;
+  text-transform: uppercase;
+}
+
+.auth-shell > .developer-credit img {
+  display: block;
+  width: 113px;
   height: auto;
-  margin-bottom: 18px;
 }
 
 .auth-brand-name {
@@ -221,6 +241,7 @@ body.auth-page {
   letter-spacing: 0.02em;
   color: var(--primary);
   text-decoration: none;
+  white-space: nowrap;
 }
 
 .field-link:hover {
@@ -290,6 +311,22 @@ body.auth-page {
   height: 18px;
 }
 
+.pw-toggle .icon[hidden] {
+  display: none;
+}
+
+@media (max-width: 480px) {
+  .field-label-row {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 5px;
+  }
+
+  .field-link {
+    font-size: 10px;
+  }
+}
+
 .field-error {
   margin-top: 6px;
   font-size: 12px;

static/css/layout.css

@@ -21,7 +21,7 @@
 .sidebar-account strong, .sidebar-account small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .sidebar-account small { font: 10px var(--font-mono); text-transform: uppercase; }
 .cockpit-workspace { min-height: 100vh; margin-left: var(--sidebar-width); }
-.cockpit-topbar { position: fixed; inset: 0 0 auto var(--sidebar-width); z-index: 40; display: flex; height: var(--topbar-height); align-items: center; justify-content: space-between; gap: 20px; padding: 0 var(--content-gutter); border-bottom: 1px solid color-mix(in srgb, var(--outline) 32%, transparent); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(18px); }
+.cockpit-topbar { position: fixed; inset: 0 0 auto var(--sidebar-width); z-index: 40; display: flex; height: var(--topbar-height); align-items: center; padding: 0 var(--content-gutter); border-bottom: 1px solid color-mix(in srgb, var(--outline) 32%, transparent); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(18px); }
 .topbar-start, .topbar-actions { display: flex; min-width: 0; align-items: center; gap: 12px; }
 .topbar-start { flex: 1; }
 .cockpit-main { width: 100%; min-height: 100vh; padding: calc(var(--topbar-height) + 36px) var(--content-gutter) 56px; }

static/css/pages.css

@@ -300,18 +300,18 @@
 .platform-grid { margin-top: 18px; }
 .platform-grid article { align-items: flex-start; flex-direction: column; }
 .activity-filterbar { display: grid; grid-template-columns: minmax(260px, 1fr) 220px auto; align-items: end; gap: 10px; margin-bottom: 28px; padding: 14px; border: 1px solid color-mix(in srgb, var(--outline) 42%, transparent); background: var(--surface-low); }
-.activity-timeline { position: relative; display: grid; gap: 16px; padding-left: 78px; }
-.activity-timeline::before { position: absolute; inset: 0 auto 0 28px; width: 1px; content: ""; background: linear-gradient(var(--cyan), var(--outline) 70%, transparent); opacity: .45; }
+.activity-timeline { position: relative; display: grid; gap: 10px; padding-left: 62px; }
+.activity-timeline::before { position: absolute; inset: 0 auto 0 22px; width: 1px; content: ""; background: linear-gradient(var(--cyan), var(--outline) 70%, transparent); opacity: .45; }
 .activity-event { position: relative; }
-.activity-marker { position: absolute; top: 0; left: -78px; display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid var(--outline); background: var(--surface-low); color: var(--text-muted); }
+.activity-marker { position: absolute; top: 0; left: -62px; display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--outline); border-radius: 10px; background: var(--surface-low); color: var(--text-muted); }
 .activity-marker.is-positive { border-color: color-mix(in srgb, var(--emerald) 45%, var(--outline)); color: var(--emerald); }
 .activity-marker.is-attention { border-color: color-mix(in srgb, var(--coral) 45%, var(--outline)); color: var(--coral); }
-.activity-card { padding: 20px; border: 1px solid color-mix(in srgb, var(--outline) 44%, transparent); background: var(--surface-container); }
+.activity-card { padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--outline) 44%, transparent); border-radius: 12px; background: var(--surface-container); }
 .activity-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
-.activity-card-head h2 { margin: 9px 0 0; }
+.activity-card-head h2 { margin: 6px 0 0; font-size: 18px; }
 .activity-card-head time { color: var(--text-faint); font: 11px var(--font-mono); }
 .activity-object { color: var(--text-muted); }
-.decision-note { margin: 14px 0; padding: 12px 14px; border-left: 2px solid var(--cyan); background: var(--surface-high); }
+.decision-note { margin: 10px 0; padding: 9px 12px; border-left: 2px solid var(--cyan); background: var(--surface-high); }
 .decision-note p { margin: 7px 0 0; }
 .employer-kpis { display: flex; gap: 8px; }
 .employer-kpis > div { min-width: 130px; padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--outline) 42%, transparent); background: var(--surface-low); }

static/css/premium.css

@@ -7,6 +7,7 @@
   --radius-sm: 7px;
   --radius-md: 12px;
   --radius-lg: 18px;
+  --content-frame: 1720px;
 }
 
 :root[data-theme="light"] {
@@ -34,10 +35,16 @@ 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: 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; }
+.cockpit-main > * { width: min(100%, var(--content-frame)); margin-right: auto; margin-left: 0; }
+.topbar-inner { display: flex; width: min(100%, var(--content-frame)); height: 100%; align-items: center; justify-content: space-between; gap: 20px; }
+.brand-radar { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 11px; box-shadow: 0 10px 28px color-mix(in srgb, var(--cyan) 12%, transparent); }
+.brand-lockup { display: grid; min-width: 0; gap: 4px; }
+.brand-lockup strong { color: var(--text-strong); font: 740 17px/1 var(--font-headline); letter-spacing: -.025em; }
+.cockpit-brand small { margin: 0; color: var(--text-faint); font-size: 8px; font-weight: 700; letter-spacing: .09em; }
+.developer-credit { display: flex; align-items: center; gap: 7px; color: var(--text-faint); font: 650 7px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
+.developer-credit img { display: block; width: 92px; height: auto; opacity: .82; }
+.cockpit-sidebar > .developer-credit { margin: 0 18px 10px; padding: 8px 0 0; border-top: 1px solid var(--divider); }
+.cockpit-sidebar > .developer-credit img { padding: 2px 4px; border-radius: 3px; background: rgba(255, 255, 255, .9); filter: saturate(.82); }
 .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; }
@@ -62,6 +69,7 @@ body::before {
 .section-kicker,
 .kpi-label { color: var(--text-faint); font-family: var(--font-body); font-weight: 700; letter-spacing: .105em; }
 .section-kicker { margin-bottom: 7px; }
+.section-link { display: inline-flex; min-height: 38px; align-items: center; padding: 5px 2px; }
 
 .button { min-height: 44px; border-radius: 9px; }
 .button-primary { box-shadow: 0 8px 24px color-mix(in srgb, var(--cyan) 13%, transparent); }
@@ -114,6 +122,9 @@ label > span:first-child { font-family: var(--font-body); font-weight: 700; lett
 .rail-panel:not(.radar-summary) { background: color-mix(in srgb, var(--surface-raised) 76%, var(--surface-low)); box-shadow: none; }
 .job-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
 .job-card:hover { transform: translateY(-2px); border-color: var(--divider-strong); box-shadow: var(--shadow-card); }
+.dashboard-matches .job-feed { gap: 12px; }
+.dashboard-matches .feed-card { min-height: 0; }
+.dashboard-matches .job-card-main { padding: 18px 20px; }
 
 .filter-console {
   grid-template-columns: minmax(280px, 1.8fr) repeat(5, minmax(126px, .72fr)) auto;
@@ -163,6 +174,7 @@ label > span:first-child { font-family: var(--font-body); font-weight: 700; lett
 .empty-state { border-color: var(--divider-strong); border-radius: var(--radius-md); }
 
 @media (min-width: 1800px) {
+  :root { --content-frame: 1880px; }
   .explorer-shell { grid-template-columns: minmax(650px, 880px) minmax(760px, 1fr); }
   .automation-layout { grid-template-columns: minmax(0, 1fr) minmax(340px, 430px); }
 }
@@ -188,6 +200,7 @@ label > span:first-child { font-family: var(--font-body); font-weight: 700; lett
   .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); }
+  .topbar-inner { gap: 8px; }
 }
 
 @media (max-width: 560px) {
@@ -219,5 +232,6 @@ label > span:first-child { font-family: var(--font-body); font-weight: 700; lett
 }
 
 @media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
   .radar-illustration { transform: none !important; transition: none; }
 }

static/favicon.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="VacatureRadar">
+  <rect x="2" y="2" width="60" height="60" rx="15" fill="#071327"/>
+  <circle cx="32" cy="32" r="18" fill="none" stroke="#19d3e6" stroke-width="5" stroke-linecap="round" stroke-dasharray="94 20" transform="rotate(38 32 32)"/>
+  <path d="M32 32 45 18" fill="none" stroke="#7df5ff" stroke-width="5" stroke-linecap="round"/>
+  <circle cx="32" cy="32" r="4" fill="#19d3e6"/>
+  <circle cx="20" cy="22" r="4" fill="#45d69b" stroke="#071327" stroke-width="2"/>
+</svg>

static/img/README.md

@@ -1,7 +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-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. Deze wordmark wordt uitsluitend gebruikt voor de secundaire credit `Ontwikkeld door ITWorx.tech`; ITWorx is niet het productmerk.
 
-`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.
+`vacatureradar-logo.svg` is het zelfstandige productbeeldmerk: een open radarboog, scanstraal en één gevonden kans. Het concept is met de ingebouwde beeldgeneratieflow verkend en vervolgens handmatig als eenvoudig schaalbaar SVG opgebouwd. `favicon.svg` gebruikt exact dezelfde geometrie en `vacatureradar-docker.png` is de 256×256 rastervariant.
 
 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

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="VacatureRadar">
+  <rect x="2" y="2" width="60" height="60" rx="15" fill="#071327"/>
+  <circle cx="32" cy="32" r="18" fill="none" stroke="#19d3e6" stroke-width="5" stroke-linecap="round" stroke-dasharray="94 20" transform="rotate(38 32 32)"/>
+  <path d="M32 32 45 18" fill="none" stroke="#7df5ff" stroke-width="5" stroke-linecap="round"/>
+  <circle cx="32" cy="32" r="4" fill="#19d3e6"/>
+  <circle cx="20" cy="22" r="4" fill="#45d69b" stroke="#071327" stroke-width="2"/>
+</svg>