feat: refine transparent brand and widescreen shell

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.

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"),
     }

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

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;

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.

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 |

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");

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 {

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; }

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; }

static/img/vacatureradar-logo.svg

@@ -1,7 +1,6 @@
 <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"/>
+  <path d="M51.5 32A19.5 19.5 0 1 1 45.8 18.2" fill="none" stroke="#12aebe" stroke-width="4.5" stroke-linecap="round"/>
+  <path d="M32 32 47 17" fill="none" stroke="#19d3e6" stroke-width="4.5" stroke-linecap="round"/>
+  <circle cx="32" cy="32" r="3.75" fill="#12aebe"/>
+  <circle cx="20" cy="21" r="3.75" fill="#36c990" stroke="#f4f7f7" stroke-width="1.5"/>
 </svg>

templates/base.html

@@ -44,14 +44,12 @@
         <a class="nav-item {% if request.resolver_match.url_name == 'activity' %}is-active{% endif %}" href="{% url 'jobs:activity' %}"><svg class="icon"><use href="#icon-activity"></use></svg><span>Activiteit</span></a>
       </nav>
 
-      <div class="sidebar-radar-card">
-        <span class="status-beacon {% if navigation_profile %}is-live{% endif %}" aria-hidden="true"></span>
-        <span><strong>{% if navigation_profile %}Radar actief{% else %}Profiel nodig{% endif %}</strong><small>{% if navigation_profile %}{{ navigation_profile.name }}{% else %}Configureer je zoekprofiel{% endif %}</small></span>
-      </div>
-      {% include "components/developer_credit.html" %}
-      <div class="sidebar-account">
-        <span class="avatar" aria-hidden="true">{{ user.first_name|default:user.username|slice:":1"|upper }}</span>
-        <span><strong>{{ user.get_full_name|default:user.username }}</strong><small>Eigen werkruimte</small></span>
+      <div class="sidebar-footer">
+        <div class="sidebar-radar-card">
+          <span class="status-beacon {% if navigation_profile %}is-live{% endif %}" aria-hidden="true"></span>
+          <span><strong>{% if navigation_profile %}Radar actief{% else %}Profiel nodig{% endif %}</strong><small>{% if navigation_profile %}{{ navigation_profile.name }}{% else %}Configureer je zoekprofiel{% endif %}</small></span>
+        </div>
+        {% include "components/developer_credit.html" %}
       </div>
     </aside>
 

tests/integration/test_views.py

@@ -30,7 +30,9 @@ def test_browser_favicon_and_product_brand_assets_are_local(client):
     wordmark = settings.BASE_DIR / "static" / "img" / "itworx-wordmark.png"
     for signature in ('stroke="#19d3e6"', 'stroke="#7df5ff"', 'fill="#45d69b"'):
         assert signature in favicon
-        assert signature in product_logo
+    assert 'stroke="#19d3e6"' in product_logo
+    assert 'fill="#36c990"' in product_logo
+    assert "<rect" not in product_logo
     assert 'viewBox="0 0 64 64"' in favicon
     assert wordmark.read_bytes().startswith(b"\x89PNG\r\n\x1a\n")
     assert wordmark.stat().st_size < 100_000
@@ -48,6 +50,8 @@ def test_today_loads_for_user(client, user, profile):
     assert "Intelligence cockpit" in body
     assert "Ontwikkeld door" in body
     assert 'aria-label="Ontwikkeld door ITWorx.tech"' in body
+    assert 'class="sidebar-footer"' in body
+    assert 'class="sidebar-account"' not in body
     assert "Dagoverzicht" in body
     assert 'content="VacatureRadar"' in body
 
@@ -57,13 +61,15 @@ def test_premium_layout_uses_one_bounded_ultrawide_grid():
     assert "--content-frame: 1720px" in css
     assert "width: min(100%, var(--content-frame))" in css
     assert ".topbar-inner" in css
+    assert "--content-frame: 2200px" in css
+    assert "--content-frame: 2480px" in css
     assert "@media (min-width: 1800px)" in css
     assert "minmax(650px, 880px) minmax(760px, 1fr)" in css
 
 
 def test_css_imports_share_the_release_cache_version():
     css = (settings.BASE_DIR / "static" / "css" / "app.css").read_text(encoding="utf-8")
-    assert css.count("?v=0.3.9") == 7
+    assert css.count("?v=0.3.11") == 7
 
 
 @pytest.mark.integration