diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9ead33c..e1927b7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,9 @@ Alle betekenisvolle wijzigingen worden hier bijgehouden. Het project volgt voorl
### Gewijzigd
+- Het VacatureRadar-productlogo is hertekend als transparante vier-elementenradar zonder donkere tegel, rand of schaduw; login en sidebar gebruiken hetzelfde cleaner beeldmerk.
+- De sidebarfooter combineert radarstatus en een transparante, themabewuste ITWorx-credit; de dubbele demo-/accountidentiteit is verwijderd en blijft uitsluitend via het topbarmenu bereikbaar.
+- Widescreencontent schaalt nu gecontroleerd naar 2.200 px en op 4K naar 2.480 px, terwijl dashboardverhoudingen, korte viewports en mobiele layouts begrensd blijven.
- De volledige visuele audit is vertaald naar één gedeeld contentframe voor topbar en pagina, een dashboard met maximaal vijf kernmatches en een compactere activiteitstijdlijn.
- Secundaire actielinks hebben grotere klikdoelen, reduced motion dekt alle animaties en geïmporteerde stylesheets delen voortaan expliciet de releasecacheversie.
- De ultrawide cockpit gebruikt één begrensd, links verankerd grid; headers, filters, pipeline, KPI's en detailpanelen delen daardoor op brede schermen hetzelfde startpunt zonder uitgerekte leesregels.
diff --git a/apps/core/context_processors.py b/apps/core/context_processors.py
index e7f06c5..cdcf9be 100644
--- a/apps/core/context_processors.py
+++ b/apps/core/context_processors.py
@@ -28,7 +28,7 @@ def navigation_context(request: HttpRequest) -> dict[str, Any]:
}
context = {
"app_name": "VacatureRadar",
- "app_version": "0.3.9",
+ "app_version": "0.3.11",
"app_owner_name": settings.VACATURERADAR_OWNER_NAME,
"page_context_label": page_contexts.get(route_key, "Persoonlijke cockpit"),
}
diff --git a/docs/ai/BACKLOG.yaml b/docs/ai/BACKLOG.yaml
index 749c473..6d138dc 100644
--- a/docs/ai/BACKLOG.yaml
+++ b/docs/ai/BACKLOG.yaml
@@ -1,6 +1,6 @@
schema_version: 1
project: VacatureRadar
-updated_at: '2026-07-26'
+updated_at: '2026-07-27'
execution_policy:
order: file-order, then first ready task whose dependencies are done
no_product_questions: true
@@ -2077,6 +2077,44 @@ tasks:
subtiele ITWorx-credit, grotere klikdoelen, reduced-motion, CSS-cacheversies en herstelde mobiele login. Browsermatrix
50 checks plus light/login schoon; 268 tests groen, 2 skips, 83,45% dekking. Live image sha256:7e1688db80241813a04e27038ef5e4afb64748868b6a97e353346f077be50b70
healthy; readiness en assets HTTP 200.'
+- id: VR-223
+ title: Verfijn transparant productlogo en professionele widescreenshell
+ status: done
+ priority: P1
+ requirement_ids:
+ - NFR-004
+ - NFR-008
+ - NFR-009
+ depends_on:
+ - VR-222
+ summary: Herstel de resterende merk- en shellfrictie uit de gebruikersscreenshot met een transparant cleaner productlogo,
+ één rustige sidebarfooter zonder dubbele accountidentiteit en beter benutte widescreenruimte.
+ acceptance_criteria:
+ - Het VacatureRadar-logo heeft geen donkere tegelachtergrond en blijft als eenvoudige vector scherp en herkenbaar
+ op dark/light, login, sidebar en klein formaat; favicon en Dockerman blijven doelgeschikt.
+ - De sidebar toont onderaan één samenhangende status-/ontwikkelaarszone en herhaalt de demo- of accountidentiteit
+ niet; accountacties blijven bereikbaar via het bestaande topbarmenu.
+ - De cockpit benut 1920, 2560 en 3840 px evenwichtiger zonder uitgerekte leesregels, losstaande topbaracties of
+ horizontale documentoverflow; mobiel en laptop blijven intact.
+ - Een gerichte vervolgcheck identificeert en herstelt bijkomende zichtbare shellproblemen, inclusief light/dark,
+ korte viewport en toetsenbord-/interactiestates.
+ - De live container is healthy en levert logo, favicon, CSS en readiness met HTTP 200.
+ verification:
+ - Browsermatrix dashboard, verkenner, automatisering, login op 390/1280/1920/2560/3840 px en korte sidebarviewport
+ - uv run pytest tests/integration/test_auth_login.py tests/integration/test_views.py tests/unit/test_deployment_configuration.py
+ - ./scripts/codex_verify.sh
+ - Live readiness-, containerhealth- en assetsmokes
+ primary_paths:
+ - static/img/vacatureradar-logo.svg
+ - static/css/layout.css
+ - static/css/premium.css
+ - static/css/responsive.css
+ - templates/base.html
+ result:
+ completed_at: '2026-07-27'
+ note: Transparant vier-elementenlogo zonder donkere tegel; één compacte sidebarfooter zonder dubbele accountidentiteit;
+ monochrome dark-mode ITWorx-credit en widescreenframes van 2200/2480 px. Browsermatrix 18 shellchecks plus
+ dark/light/login schoon; 30 gerichte tests en volledige gate groen met 268 tests, 2 skips en 83,45% dekking.
- id: VR-301
title: Multi-tenant SaaS, teams en billing
status: deferred
diff --git a/docs/ai/PROJECT_STATE.md b/docs/ai/PROJECT_STATE.md
index 9738d87..677ded0 100644
--- a/docs/ai/PROJECT_STATE.md
+++ b/docs/ai/PROJECT_STATE.md
@@ -34,6 +34,14 @@ Het volledige scherm- en afwijkingsrapport staat in `docs/design/STITCH_INTEGRAT
## Laatste onderhoudsaudit
+VR-223 op 2026-07-27:
+
+- VacatureRadar-logo verfijnd tot een transparante vier-elementenradar zonder donkere tegel, rand of schaduw; login en sidebar delen dezelfde schaalbare SVG;
+- dubbele demo-/accountidentiteit uit de sidebar verwijderd; radarstatus en een themabewuste transparante ITWorx-credit vormen één compacte footer, terwijl accountmenu en afmelden in de topbar intact blijven;
+- widescreenframe groeit naar 2.200 px en op 4K naar 2.480 px; browsermatrix van 18 shellcombinaties op 390/1280/1920/2560/3840 px en 1280×600 toont geen overlap, overflow of consolewaarschuwing;
+- dark/light en mobiele login bevestigen een transparante logoachtergrond, correcte wordmarkbehandeling en intacte kerninteracties.
+- gerichte regressies: 30 tests groen; volledige gate groen met 268 geslaagde tests, 2 optionele skips en 83,45% branch-aware dekking. Volgende uitvoerbare taak: geen.
+
VR-222 op 2026-07-26:
- integrale visuele audit van tien hoofdroutes plus login/herstel vastgelegd in `docs/design/VISUAL_AUDIT_2026-07-26.md`, met geprioriteerde bevindingen, gevolgen en uitgevoerde roadmap;
diff --git a/docs/design/VISUAL_AUDIT_2026-07-26.md b/docs/design/VISUAL_AUDIT_2026-07-26.md
index 1022ca8..8d8e847 100644
--- a/docs/design/VISUAL_AUDIT_2026-07-26.md
+++ b/docs/design/VISUAL_AUDIT_2026-07-26.md
@@ -43,3 +43,14 @@ VacatureRadar heeft een onderscheidende, geloofwaardige dark-intelligencebasis.
- Meetbare reductie: dashboard 2.399 → 1.838 px op 1440 px; kernmatches 7/8 → 5; activiteitgebeurtenis 268 → 242 px na cacheverversing.
- Repositorygate: Ruff, Django check, migratiecheck, 268 tests geslaagd, 2 optionele browsertests overgeslagen en 83,45% branch-aware dekking.
- Live release: image `sha256:7e1688db80241813a04e27038ef5e4afb64748868b6a97e353346f077be50b70` is healthy; readiness, favicon, productlogo, ITWorx-wordmark en CSS 0.3.9 antwoorden met HTTP 200.
+
+## Vervolgcorrectie VR-223 — 27 juli 2026
+
+De gebruikersscreenshot maakte zichtbaar dat de eerdere oplossing onderaan de sidebar nog te veel losse identiteitselementen stapelde en dat het productlogo door zijn donkere tegel zwaarder oogde dan de rest van de interface.
+
+- het productlogo is teruggebracht tot vier transparante vectorvormen: open radarboog, scanwijzer, kern en kanssignaal;
+- de sidebar bevat geen tweede accountkaart meer; profielstatus en ontwikkelaarscredit vormen één rustige footer en accountacties blijven in het topbarmenu;
+- de ITWorx-wordmark heeft op dark mode geen witte stickerachtergrond meer maar een subtiele monochrome behandeling; light mode behoudt de officiële kleuren;
+- het contentframe groeit gecontroleerd naar 2.200 px op widescreen en 2.480 px op 4K, zonder onbeperkte kaart- of leesregelbreedtes;
+- 18 shellcombinaties over dashboard, verkenner en automatisering op 390, 1280, 1920, 2560 en 3840 px plus 1280×600 hadden geen overlap, overflow of consolemelding;
+- login en sidebar zijn aanvullend in dark/light gecontroleerd: transparante logoachtergrond, één zichtbare accountlocatie en correcte themabehandeling.
diff --git a/docs/quality/TRACEABILITY_MATRIX.md b/docs/quality/TRACEABILITY_MATRIX.md
index 46b12cf..8ede920 100644
--- a/docs/quality/TRACEABILITY_MATRIX.md
+++ b/docs/quality/TRACEABILITY_MATRIX.md
@@ -39,7 +39,7 @@ Legenda: **I** = geïmplementeerd en getest in de huidige MVP; **P** = gedeeltel
| PR-044 | I | profiel/modelversievelden | scoring/profiletests | VR-109 promptversie |
| PR-045 | I | optionele Ollamaservice/fallback | `test_ai.py` | VR-109 |
| PR-046 | I | geen tools + guardrails | AI/securitytests | VR-109/115 evaluaties |
-| PR-050 | I | dashboard/list/skillsradar + Stitch-dominante cockpitshell/feed/rail, gedeeld contentframe en auditgedreven informatiedichtheid | viewtests, skill-insighttests, VR-119/206/208/222 browsermatrix | VR-114/118/119/206/208/222 e2e/a11y |
+| PR-050 | I | dashboard/list/skillsradar + Stitch-dominante cockpitshell/feed/rail, schaalbaar widescreenframe en auditgedreven informatiedichtheid | viewtests, skill-insighttests, VR-119/206/208/222/223 browsermatrix | VR-114/118/119/206/208/222/223 e2e/a11y |
| PR-051 | I | detailview/template/provenance + scorehero/intelligence-strip | viewtests, VR-119 screenshots | VR-114/118/119 |
| PR-052 | I | feedbackendpoint/UI | feedback/viewtests | — |
| PR-053 | I | applicationmodel/serviceflow | `tests/integration/test_dedupe_lifecycle_feedback.py`, `tests/integration/test_applications.py` | VR-113 uitgebreid dossier |
diff --git a/static/css/app.css b/static/css/app.css
index 7ac6df9..bc6846c 100644
--- a/static/css/app.css
+++ b/static/css/app.css
@@ -1,9 +1,9 @@
/* 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");
+@import url("tokens.css?v=0.3.11");
+@import url("base.css?v=0.3.11");
+@import url("layout.css?v=0.3.11");
+@import url("components.css?v=0.3.11");
+@import url("pages.css?v=0.3.11");
+@import url("responsive.css?v=0.3.11");
+@import url("premium.css?v=0.3.11");
diff --git a/static/css/auth.css b/static/css/auth.css
index 34d8e32..f6f3e9b 100644
--- a/static/css/auth.css
+++ b/static/css/auth.css
@@ -128,8 +128,8 @@ body.auth-page {
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);
+ border-radius: 0;
+ box-shadow: none;
}
.auth-shell > .developer-credit {
diff --git a/static/css/layout.css b/static/css/layout.css
index 87ba304..28d2de6 100644
--- a/static/css/layout.css
+++ b/static/css/layout.css
@@ -13,13 +13,11 @@
.nav-item.is-active { background: color-mix(in srgb, var(--cyan) 12%, var(--surface-container)); color: var(--text-strong); }
.nav-item.is-active::after { position: absolute; inset: 0 -1px 0 auto; width: 2px; content: ""; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.nav-item.is-active .icon { color: var(--cyan); }
-.sidebar-radar-card { display: flex; align-items: center; gap: 10px; margin: 0 12px 12px; padding: 12px; border: 1px solid color-mix(in srgb, var(--outline) 42%, transparent); background: var(--surface-low); }
+.sidebar-footer { margin-top: auto; padding: 13px 18px 15px; border-top: 1px solid color-mix(in srgb, var(--outline) 28%, transparent); }
+.sidebar-radar-card { display: flex; align-items: center; gap: 9px; padding-bottom: 11px; }
.sidebar-radar-card strong, .sidebar-radar-card small { display: block; }
.sidebar-radar-card strong { font-size: 12px; }
.sidebar-radar-card small { margin-top: 3px; font: 10px/1.2 var(--font-mono); }
-.sidebar-account { display: flex; align-items: center; gap: 10px; padding: 15px 18px; border-top: 1px solid color-mix(in srgb, var(--outline) 28%, transparent); background: var(--surface-low); }
-.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; 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; }
diff --git a/static/css/premium.css b/static/css/premium.css
index 4498471..9519700 100644
--- a/static/css/premium.css
+++ b/static/css/premium.css
@@ -30,21 +30,21 @@ body::before {
.cockpit-sidebar,
.cockpit-topbar,
.sidebar-heading,
-.sidebar-account,
.mobile-tabbar { border-color: var(--divider); }
.cockpit-sidebar { background: color-mix(in srgb, var(--surface-lowest) 97%, black); }
.cockpit-main { padding-top: calc(var(--topbar-height) + 42px); }
.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-radar { flex: 0 0 auto; width: 42px; height: 42px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.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); }
+.sidebar-footer > .developer-credit { padding-top: 10px; border-top: 1px solid var(--divider); }
+.sidebar-footer > .developer-credit img { width: 82px; padding: 0; background: transparent; filter: brightness(0) invert(1); opacity: .58; }
+:root[data-theme="light"] .sidebar-footer > .developer-credit img { filter: saturate(.78); opacity: .76; }
.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; }
@@ -52,7 +52,6 @@ body::before {
.nav-caption,
.nav-item,
.mobile-tabbar a,
-.sidebar-account small { font-family: var(--font-body); }
.nav-caption { font-weight: 700; letter-spacing: .11em; }
.nav-item { min-height: 46px; border-radius: 9px; font-size: 14px; font-weight: 560; letter-spacing: -.005em; }
.nav-item:hover { transform: none; background: color-mix(in srgb, var(--surface-high) 70%, transparent); }
@@ -174,11 +173,16 @@ 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; }
+ :root { --content-frame: 2200px; }
.explorer-shell { grid-template-columns: minmax(650px, 880px) minmax(760px, 1fr); }
.automation-layout { grid-template-columns: minmax(0, 1fr) minmax(340px, 430px); }
}
+@media (min-width: 2800px) {
+ :root { --content-frame: 2480px; }
+ .dashboard-grid { grid-template-columns: minmax(0, 1fr) minmax(380px, 460px); }
+}
+
@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; }
diff --git a/static/img/vacatureradar-logo.svg b/static/img/vacatureradar-logo.svg
index c244518..62c258f 100644
--- a/static/img/vacatureradar-logo.svg
+++ b/static/img/vacatureradar-logo.svg
@@ -1,7 +1,6 @@
diff --git a/templates/base.html b/templates/base.html
index 4dc7a13..05ed327 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -44,14 +44,12 @@
Activiteit
-
- {% include "components/developer_credit.html" %}
-