c61b08d6de
Design spec for replacing the white bg-surface header with a brand-navy header, incl. 4px brand-purple accent strip, mint active underline, mobile logo fix, and integrated login page header. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
856 lines
51 KiB
HTML
856 lines
51 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Header / Navigation Redesign Spec · Familienarchiv</title>
|
||
<style>
|
||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||
body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1A1A;line-height:1.5}
|
||
.doc{max-width:1440px;margin:0 auto;padding:48px 32px}
|
||
|
||
/* ── Masthead ─── */
|
||
.mast{background:#0D2240;border-radius:10px;padding:32px 40px;margin-bottom:48px}
|
||
.mast-top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:16px}
|
||
.mast h1{font-size:22px;font-weight:900;color:#fff;letter-spacing:-.4px;margin-bottom:6px}
|
||
.mast p{font-size:12px;color:rgba(255,255,255,.5);max-width:620px;line-height:1.7}
|
||
.mast-badge{font-size:9px;font-weight:800;padding:3px 9px;border-radius:20px;text-transform:uppercase;letter-spacing:.8px;white-space:nowrap;flex-shrink:0;margin-top:4px}
|
||
.mb-draft{background:#FCD34D;color:#78350F}
|
||
.decisions{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:20px;border-top:1px solid rgba(255,255,255,.1);padding-top:16px}
|
||
.dec{background:rgba(255,255,255,.06);border-radius:6px;padding:10px 12px}
|
||
.dec-label{font-size:7px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:rgba(255,255,255,.35);margin-bottom:5px}
|
||
.dec-value{font-size:9.5px;font-weight:700;color:#fff;line-height:1.5}
|
||
.dec-value s{color:rgba(255,255,255,.3);font-weight:400}
|
||
|
||
/* ── Section headings ─── */
|
||
.sec{margin-bottom:64px}
|
||
.sec+.sec{border-top:2px dashed #C8C4BE;padding-top:56px}
|
||
.sec-h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#888;margin-bottom:20px;display:flex;align-items:center;gap:10px}
|
||
.sec-h::after{content:'';flex:1;height:1px;background:#D8D4CE}
|
||
.sec-num{background:#0D2240;color:#fff;font-size:9px;font-weight:900;padding:2px 7px;border-radius:10px}
|
||
|
||
/* ── Screen grid ─── */
|
||
.sg{display:grid;gap:20px;align-items:start}
|
||
.sg-3{grid-template-columns:1fr 1fr 1fr}
|
||
.sg-2{grid-template-columns:1fr 1fr}
|
||
.sg-2a{grid-template-columns:1.3fr 1fr}
|
||
.sg-mob{grid-template-columns:1fr 220px}
|
||
.sb{display:flex;flex-direction:column}
|
||
.sl{font-size:9px;font-weight:800;color:#888;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:6px;display:flex;align-items:center;gap:6px}
|
||
.sz{background:#E8E4DF;color:#666;padding:1px 5px;border-radius:3px;font-size:8px}
|
||
.state{padding:1px 6px;border-radius:3px;font-size:8px;font-weight:700}
|
||
.st-bad{background:#FEE2E2;color:#991B1B}
|
||
.st-good{background:#DCFCE7;color:#166534}
|
||
.st-warn{background:#FEF3C7;color:#92400E}
|
||
.sc{font-size:8.5px;color:#888;margin-top:6px;font-style:italic;line-height:1.5}
|
||
|
||
/* ── Annotation callouts ─── */
|
||
.ann{display:inline-block;font-size:7.5px;font-weight:700;color:#C2410C;background:#FFF7ED;border:1px solid #FDBA74;border-radius:3px;padding:1px 5px;white-space:nowrap}
|
||
.ann-block{background:#FFF7ED;border:1px solid #FDBA74;border-radius:5px;padding:8px 10px;font-size:10px;color:#7C2D12;line-height:1.5;margin-top:10px}
|
||
.ann-block strong{font-weight:800}
|
||
.ann-block ul{padding-left:14px;display:flex;flex-direction:column;gap:3px;margin-top:5px}
|
||
.ann-block ol{padding-left:14px;display:flex;flex-direction:column;gap:3px;margin-top:5px}
|
||
|
||
/* ── Wireframe Chrome ─── */
|
||
.wf{background:#fff;border:2px solid #B8B4AE;border-radius:10px;overflow:hidden;box-shadow:0 4px 18px rgba(0,0,0,.08)}
|
||
.wf-bar{height:24px;background:#E8E4DF;border-bottom:1px solid #C8C4BE;display:flex;align-items:center;padding:0 9px;gap:4px}
|
||
.dot{width:7px;height:7px;border-radius:50%;background:#C8C4BE}
|
||
.dot.r{background:#F87171}.dot.y{background:#FCD34D}.dot.g{background:#4ADE80}
|
||
.urlbar{flex:1;height:11px;background:#D8D4CE;border-radius:3px;margin-left:6px;display:flex;align-items:center;padding:0 5px}
|
||
.urlbar span{font-size:7.5px;color:#888;font-family:monospace}
|
||
|
||
/* ── Current header (white/broken) ─── */
|
||
.H-OLD{height:44px;background:#ffffff;border-bottom:1.5px solid #E5E7EB;display:flex;align-items:center;padding:0 16px;gap:14px;position:relative}
|
||
.H-OLD-LOGO{font-size:9px;font-weight:900;color:#012851;letter-spacing:1.2px;font-family:'Arial Black',sans-serif}
|
||
.H-OLD-NAV{display:flex;gap:10px;align-items:center;margin-left:8px}
|
||
.H-OLD-LINK{font-size:7.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#012851;padding:3px 7px;border-radius:4px}
|
||
.H-OLD-LINK.act{background:rgba(180,185,255,0.15);color:#012851}
|
||
.H-OLD-R{margin-left:auto;display:flex;gap:7px;align-items:center}
|
||
.H-OLD-ICO{width:22px;height:22px;background:#F3F4F6;border-radius:4px;border:1px solid #E5E7EB}
|
||
.H-OLD-AV{width:22px;height:22px;background:#012851;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:6px;font-weight:900;color:#fff}
|
||
|
||
/* ── NEW header atoms ─── */
|
||
.STRIP{height:4px;background:#B4B9FF} /* brand-purple accent strip */
|
||
.N{height:42px;background:#012851;display:flex;align-items:center;padding:0 16px;gap:14px;flex-shrink:0}
|
||
.logo{font-size:9px;font-weight:900;color:#fff;letter-spacing:1.2px;font-family:'Arial Black',sans-serif}
|
||
.nl{font-size:7.5px;color:rgba(255,255,255,.55);font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding-bottom:2px}
|
||
.nl:hover{color:rgba(255,255,255,.85)}
|
||
.nl.on{color:#fff;border-bottom:2px solid #A1DCD8;padding-bottom:2px}
|
||
.nr{margin-left:auto;display:flex;gap:8px;align-items:center}
|
||
.nico{width:20px;height:20px;background:rgba(255,255,255,.1);border-radius:4px}
|
||
.nico-av{width:22px;height:22px;background:#A1DCD8;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:6px;font-weight:900;color:#012851}
|
||
.nico-lbl{font-size:7px;color:rgba(255,255,255,.6);font-weight:700;text-transform:uppercase}
|
||
|
||
/* ── Page body placeholder ─── */
|
||
.MAIN{padding:14px 18px;display:flex;flex-direction:column;gap:10px;background:#ECEAE4;min-height:80px}
|
||
.PH{height:7px;background:#D8D4CE;border-radius:2px;margin-bottom:4px}
|
||
.w80{width:80%}.w70{width:70%}.w60{width:60%}.w50{width:50%}.w40{width:40%}.w30{width:30%}
|
||
|
||
/* ── Mobile chrome ─── */
|
||
.WF-M{background:#fff;border:2px solid #B8B4AE;border-radius:16px;overflow:hidden;box-shadow:0 4px 18px rgba(0,0,0,.08);width:220px}
|
||
.WF-M-STATUS{height:18px;background:#012851;display:flex;align-items:center;justify-content:space-between;padding:0 10px}
|
||
.WF-M-TIME{font-size:7px;color:#fff;font-weight:700}
|
||
.WF-M-ICONS{display:flex;gap:3px}
|
||
.WF-M-ICON{width:6px;height:6px;background:rgba(255,255,255,.5);border-radius:1px}
|
||
.N-M{height:42px;display:flex;align-items:center;padding:0 12px;justify-content:space-between}
|
||
.HAMBURGER{display:flex;flex-direction:column;gap:3px;justify-content:center;width:18px}
|
||
.HAMBURGER-LINE{height:1.5px;background:rgba(255,255,255,.85);border-radius:1px}
|
||
|
||
/* Mobile old (white bg) */
|
||
.N-M-OLD{height:44px;background:#ffffff;border-bottom:1.5px solid #E5E7EB;display:flex;align-items:center;padding:0 12px;justify-content:space-between}
|
||
.H-OLD-M-LOGO{font-size:9px;font-weight:900;color:#012851;letter-spacing:1.2px}
|
||
|
||
/* Nav drawer */
|
||
.DRAWER{background:#fff;border-top:1px solid #E5E7EB;padding:10px 0}
|
||
.DRAWER-LINK{display:flex;align-items:center;padding:8px 14px;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#012851;border-left:3px solid transparent}
|
||
.DRAWER-LINK.on{border-left-color:#A1DCD8;background:#F0EFE9;color:#012851}
|
||
.DRAWER-LINK.off{color:rgba(1,40,81,.55)}
|
||
.DRAWER-DIV{height:1px;background:#E5E7EB;margin:6px 14px}
|
||
.DRAWER-LANG{display:flex;align-items:center;gap:8px;padding:6px 14px}
|
||
.DRAWER-LANG-BTN{font-size:7.5px;font-weight:700;color:#012851;padding:2px 7px;border-radius:3px;border:1.5px solid #D1D5DB}
|
||
.DRAWER-LANG-BTN.on{border-color:#012851;background:#012851;color:#fff}
|
||
|
||
/* ── Nav state grid ─── */
|
||
.NSG{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
|
||
.NS{display:flex;flex-direction:column;gap:6px}
|
||
.NS-LABEL{font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:#888}
|
||
.NS-DEMO{height:40px;background:#012851;display:flex;align-items:center;padding:0 14px;border-radius:6px}
|
||
.NS-LINK{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding-bottom:2px}
|
||
.NS-INACTIVE{color:rgba(255,255,255,.55)}
|
||
.NS-HOVER{color:rgba(255,255,255,.85)}
|
||
.NS-ACTIVE{color:#fff;border-bottom:2px solid #A1DCD8}
|
||
.NS-FOCUS{color:#fff;outline:2px solid #A1DCD8;outline-offset:3px;border-radius:2px;padding:1px 3px}
|
||
|
||
/* ── Contrast badge ─── */
|
||
.contrast-badge{display:inline-flex;align-items:center;gap:4px;font-size:8px;font-weight:700;padding:2px 7px;border-radius:20px}
|
||
.cr-fail{background:#FEE2E2;color:#991B1B}
|
||
.cr-pass{background:#DCFCE7;color:#166534}
|
||
|
||
/* ── Login page ─── */
|
||
.LOGIN-BG{background:#F0EFE9;min-height:120px;display:flex;flex-direction:column;align-items:center;padding-bottom:14px}
|
||
.LOGIN-HEADER{width:100%;height:4px;background:#B4B9FF}
|
||
.LOGIN-NAV{width:100%;height:42px;background:#012851;display:flex;align-items:center;justify-content:space-between;padding:0 16px}
|
||
.LOGIN-CARD{background:#fff;border:1.5px solid #D8D4CE;border-radius:8px;padding:14px 18px;width:200px;margin-top:14px}
|
||
.LOGIN-CARD-TITLE{font-size:10px;font-weight:900;color:#012851;margin-bottom:10px;letter-spacing:-.2px}
|
||
.LOGIN-FIELD{margin-bottom:7px}
|
||
.LOGIN-FIELD-L{font-size:7px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#888;margin-bottom:3px}
|
||
.LOGIN-FIELD-I{height:26px;border:1.5px solid #D1D5DB;border-radius:3px;background:#fff;width:100%}
|
||
.LOGIN-BTN{height:28px;background:#012851;border-radius:3px;width:100%;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:.5px;margin-top:10px}
|
||
|
||
/* ── Changelog / decision list ─── */
|
||
.CHANGES{background:#fff;border:1.5px solid #E0DDD6;border-radius:8px;padding:20px 24px;margin-bottom:40px}
|
||
.CHANGES h2{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:#888;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid #E8E4DF}
|
||
.CHANGES-GRID{display:grid;grid-template-columns:1fr 1fr;gap:16px}
|
||
.C-COL h3{font-size:10px;font-weight:800;color:#444;margin-bottom:8px}
|
||
.C-COL ul{list-style:none;display:flex;flex-direction:column;gap:5px}
|
||
.C-COL ul li{font-size:11px;color:#555;padding-left:16px;position:relative;line-height:1.5}
|
||
.C-COL.new li::before{content:'✦';position:absolute;left:0;color:#012851;font-size:8px}
|
||
.C-COL.remove li::before{content:'✗';position:absolute;left:0;color:#DC2626}
|
||
.C-COL.keep li::before{content:'→';position:absolute;left:0;color:#888}
|
||
|
||
/* ── Impl notes ─── */
|
||
.IMPL{background:#0D2240;border-radius:8px;padding:20px 24px;margin-top:48px}
|
||
.IMPL h2{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:rgba(255,255,255,.4);margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.08)}
|
||
.IMPL-GRID{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
|
||
.IMPL-COL h3{font-size:9.5px;font-weight:800;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
|
||
.IMPL-COL ul{list-style:none;display:flex;flex-direction:column;gap:5px}
|
||
.IMPL-COL ul li{font-size:10.5px;color:rgba(255,255,255,.75);padding-left:14px;position:relative;line-height:1.5}
|
||
.IMPL-COL ul li::before{content:'›';position:absolute;left:0;color:rgba(255,255,255,.3)}
|
||
.IMPL-COL code{font-family:monospace;font-size:9.5px;background:rgba(255,255,255,.08);padding:1px 4px;border-radius:3px;color:#A1DCD8}
|
||
|
||
/* ── Dark mode simulation ─── */
|
||
.DK .N{background:#012851} /* same! brand constant */
|
||
.DK .nl{color:rgba(255,255,255,.55)}
|
||
.DK .nl.on{color:#fff}
|
||
.DK-MAIN{background:#1A1A1A;padding:14px 18px;min-height:60px}
|
||
.DK-PH{height:7px;background:#2A2A2A;border-radius:2px;margin-bottom:4px}
|
||
|
||
/* ── Measurement annotation ─── */
|
||
.MEA{display:flex;align-items:center;gap:4px;font-size:7.5px;font-weight:700;color:#6B7280;margin-top:8px}
|
||
.MEA-LINE{flex:1;height:1px;border-top:1px dashed #C8C4BE}
|
||
.MEA-VAL{background:#E8E4DF;padding:1px 6px;border-radius:3px;white-space:nowrap}
|
||
.token{font-family:monospace;font-size:8.5px;background:#F0EFE9;border:1px solid #D8D4CE;padding:1px 5px;border-radius:3px;color:#012851}
|
||
|
||
/* ── Color swatch ─── */
|
||
.SW{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
|
||
.SW-BOX{width:36px;height:20px;border-radius:3px;border:1px solid rgba(0,0,0,.1)}
|
||
.SW-NAME{font-size:7.5px;font-weight:700;color:#444}
|
||
.SW-HEX{font-size:7px;color:#888;font-family:monospace}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="doc">
|
||
|
||
|
||
<!-- ══════════════════════════════════
|
||
MASTHEAD
|
||
══════════════════════════════════ -->
|
||
<div class="mast">
|
||
<div class="mast-top">
|
||
<div>
|
||
<h1>Header / Navigation Redesign</h1>
|
||
<p>Full header redesign: brand-navy bar, 4px purple accent strip, always-visible logo on mobile, high-contrast nav states, dark-mode as brand constant, and integrated login header. Replaces the current white <code style="font-family:monospace;font-size:10px;background:rgba(255,255,255,.08);padding:1px 4px;border-radius:3px;color:#A1DCD8">bg-surface</code> header that leaks the semantic surface color into what should be a brand-constant element.</p>
|
||
</div>
|
||
<span class="mast-badge mb-draft">Draft · 2026-03-30</span>
|
||
</div>
|
||
<div style="font-size:8.5px;color:rgba(255,255,255,.3);margin-bottom:12px">Leonie Voss · Senior UX Designer</div>
|
||
<div class="decisions">
|
||
<div class="dec">
|
||
<div class="dec-label">Header background</div>
|
||
<div class="dec-value"><s>bg-surface (#fff)</s><br>→ brand-navy #012851</div>
|
||
</div>
|
||
<div class="dec">
|
||
<div class="dec-label">Top accent strip</div>
|
||
<div class="dec-value"><s>None</s><br>→ 4px · brand-purple #B4B9FF</div>
|
||
</div>
|
||
<div class="dec">
|
||
<div class="dec-label">Active nav state</div>
|
||
<div class="dec-value"><s>rgba purple pill (~1.08:1)</s><br>→ white + mint underline</div>
|
||
</div>
|
||
<div class="dec">
|
||
<div class="dec-label">Mobile logo</div>
|
||
<div class="dec-value"><s>Hidden</s><br>→ Always visible, left side</div>
|
||
</div>
|
||
<div class="dec">
|
||
<div class="dec-label">Dark mode header</div>
|
||
<div class="dec-value"><s>Flips to #1a1a1a</s><br>→ Stays brand-navy (constant)</div>
|
||
</div>
|
||
<div class="dec">
|
||
<div class="dec-label">Login page header</div>
|
||
<div class="dec-value"><s>Hidden entirely</s><br>→ Brand header, logo-only</div>
|
||
</div>
|
||
<div class="dec">
|
||
<div class="dec-label">Language switcher (login)</div>
|
||
<div class="dec-value"><s>Floating, no context</s><br>→ Integrated in login header right</div>
|
||
</div>
|
||
<div class="dec">
|
||
<div class="dec-label">Total header height</div>
|
||
<div class="dec-value">4px strip + 64px bar<br>= 68px total</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ══════════════════════════════════
|
||
CHANGES SUMMARY
|
||
══════════════════════════════════ -->
|
||
<div class="CHANGES">
|
||
<h2>What changes vs. current implementation</h2>
|
||
<div class="CHANGES-GRID">
|
||
<div class="C-COL new">
|
||
<h3>New / changed</h3>
|
||
<ul>
|
||
<li>Header <code style="font-size:9px;background:#F0EFE9;padding:1px 4px;border-radius:2px">bg-surface</code> → fixed <code style="font-size:9px;background:#F0EFE9;padding:1px 4px;border-radius:2px">bg-brand-navy</code> (#012851) — not theme-aware</li>
|
||
<li>4px accent strip above header: <code style="font-size:9px;background:#F0EFE9;padding:1px 4px;border-radius:2px">background: #B4B9FF</code></li>
|
||
<li>Nav link colors on navy: inactive 55% white, hover 85% white, active 100% white</li>
|
||
<li>Active indicator: 2px bottom border in brand-mint (#A1DCD8) instead of rgba purple pill</li>
|
||
<li>Mobile: logo always visible left; hamburger icon white (was hidden or missing)</li>
|
||
<li>User avatar: mint background (#A1DCD8) with navy text (#012851)</li>
|
||
<li>Dark mode: <code style="font-size:9px;background:#F0EFE9;padding:1px 4px;border-radius:2px">dark:bg-surface</code> override removed from header — stays navy</li>
|
||
<li>Login page: <code style="font-size:9px;background:#F0EFE9;padding:1px 4px;border-radius:2px">isAuthPage</code> guard changed — shows logo-only header, not <code style="font-size:9px;background:#F0EFE9;padding:1px 4px;border-radius:2px">null</code></li>
|
||
<li>Language switcher on login: moved into header right slot</li>
|
||
<li>Mobile drawer: opens below navy header, white background, navy text links, mint active indicator</li>
|
||
</ul>
|
||
</div>
|
||
<div class="C-COL keep">
|
||
<h3>Kept unchanged</h3>
|
||
<ul>
|
||
<li><code style="font-size:9px;background:#F0EFE9;padding:1px 4px;border-radius:2px">AppNav</code> component structure — only CSS changes</li>
|
||
<li>Sticky header behavior (<code style="font-size:9px;background:#F0EFE9;padding:1px 4px;border-radius:2px">sticky top-0 z-50</code>)</li>
|
||
<li>Max-width container and horizontal padding</li>
|
||
<li>NotificationBell, ThemeToggle, LanguageSwitcher components — only icon color changes</li>
|
||
<li>UserMenu component — only avatar color changes</li>
|
||
<li>Mobile drawer open/close logic</li>
|
||
<li>Admin nav link conditional visibility</li>
|
||
<li><code style="font-size:9px;background:#F0EFE9;padding:1px 4px;border-radius:2px">isAuthPage</code> derived value — still used, just different output</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ══════════════════════════════════
|
||
SECTION 1 — CURRENT STATE
|
||
══════════════════════════════════ -->
|
||
<div class="sec">
|
||
<div class="sec-h"><span class="sec-num">1</span> Current state — problems annotated</div>
|
||
|
||
<div class="sg sg-2a">
|
||
<div class="sb">
|
||
<div class="sl">Desktop <span class="sz">≥768px</span> <span class="state st-bad">6 issues</span></div>
|
||
<div class="wf">
|
||
<div class="wf-bar"><div class="dot r"></div><div class="dot y"></div><div class="dot g"></div><div class="urlbar"><span>/dokumente</span></div></div>
|
||
<!-- Current broken header -->
|
||
<div class="H-OLD">
|
||
<!-- issue 1: white bg, no strip -->
|
||
<div style="position:absolute;top:0;left:0;right:0;height:2px;background:#FDBA74;opacity:.3"></div>
|
||
<span class="H-OLD-LOGO">FAMILIENARCHIV</span>
|
||
<div class="H-OLD-NAV">
|
||
<span class="H-OLD-LINK act">Dokumente</span>
|
||
<span class="H-OLD-LINK">Personen</span>
|
||
<span class="H-OLD-LINK">Korrespondenz</span>
|
||
</div>
|
||
<div class="H-OLD-R">
|
||
<span style="font-size:7px;color:#6B7280;font-weight:700">DE</span>
|
||
<div class="H-OLD-ICO"></div>
|
||
<div class="H-OLD-ICO"></div>
|
||
<div class="H-OLD-AV">LV</div>
|
||
</div>
|
||
</div>
|
||
<div class="MAIN"><div class="PH w80"></div><div class="PH w60"></div><div class="PH w70"></div></div>
|
||
</div>
|
||
<div class="ann-block">
|
||
<strong>Issues — desktop</strong>
|
||
<ol>
|
||
<li><strong>①</strong> Background is <code style="font-size:9px;background:#FFF0E8;padding:1px 3px;border-radius:2px">bg-surface</code> (white) — not brand. Every other archival app in this family uses a dark branded header.</li>
|
||
<li><strong>②</strong> No 4px accent strip at top — missing the canonical brand-purple cap.</li>
|
||
<li><strong>③</strong> Active link "Dokumente" uses <code style="font-size:9px;background:#FFF0E8;padding:1px 3px;border-radius:2px">rgba(180,185,255,0.15)</code> on white = contrast ~1.08:1. Completely invisible. WCAG AA minimum is 3:1 for UI components.</li>
|
||
<li><strong>④</strong> Logo is navy-on-white — works in light mode but will disappear in dark mode if header ever inherits <code style="font-size:9px;background:#FFF0E8;padding:1px 3px;border-radius:2px">#1a1a1a</code>.</li>
|
||
<li><strong>⑤</strong> Dark mode: header flips to near-black (#1a1a1a) — breaks brand consistency. Header should be a brand constant, not a semantic surface.</li>
|
||
<li><strong>⑥</strong> User avatar: dark navy circle blends with any dark-mode context and provides no semantic meaning via color.</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sb">
|
||
<div class="sl">Mobile <span class="sz">375px</span> <span class="state st-bad">logo missing</span></div>
|
||
<div style="display:flex;justify-content:center">
|
||
<div class="WF-M">
|
||
<div class="WF-M-STATUS"><span class="WF-M-TIME">09:41</span><div class="WF-M-ICONS"><div class="WF-M-ICON"></div><div class="WF-M-ICON"></div><div class="WF-M-ICON"></div></div></div>
|
||
<div class="N-M-OLD">
|
||
<!-- No logo! Just hamburger. -->
|
||
<div style="width:18px;display:flex;flex-direction:column;gap:3px">
|
||
<div style="height:1.5px;background:#012851;border-radius:1px"></div>
|
||
<div style="height:1.5px;background:#012851;border-radius:1px"></div>
|
||
<div style="height:1.5px;background:#012851;border-radius:1px"></div>
|
||
</div>
|
||
<div class="H-OLD-ICO" style="width:20px;height:20px"></div>
|
||
<div class="H-OLD-AV">LV</div>
|
||
</div>
|
||
<div class="MAIN" style="padding:10px 12px;min-height:60px">
|
||
<div class="PH w80"></div><div class="PH w60"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="ann-block" style="margin-top:8px">
|
||
<strong>Mobile issues</strong>
|
||
<ul>
|
||
<li>Logo hidden on mobile — brand identity completely lost</li>
|
||
<li>Hamburger icon is dark on white — fine in light mode, breaks in dark</li>
|
||
<li>Header still white — same surface-color problem as desktop</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ══════════════════════════════════
|
||
SECTION 2 — PROPOSED DESKTOP
|
||
══════════════════════════════════ -->
|
||
<div class="sec">
|
||
<div class="sec-h"><span class="sec-num">2</span> Proposed redesign — Desktop</div>
|
||
|
||
<div class="sg sg-2" style="margin-bottom:24px">
|
||
|
||
<!-- Light mode -->
|
||
<div class="sb">
|
||
<div class="sl">Light mode <span class="sz">≥768px</span> <span class="state st-good">Proposed</span></div>
|
||
<div class="wf">
|
||
<div class="wf-bar"><div class="dot r"></div><div class="dot y"></div><div class="dot g"></div><div class="urlbar"><span>/korrespondenz</span></div></div>
|
||
<div class="STRIP"></div>
|
||
<div class="N">
|
||
<span class="logo">FAMILIENARCHIV</span>
|
||
<div style="width:1px;height:16px;background:rgba(255,255,255,.15);margin:0 2px"></div>
|
||
<span class="nl">Dokumente</span>
|
||
<span class="nl">Personen</span>
|
||
<span class="nl on">Korrespondenz</span>
|
||
<div class="nr">
|
||
<span class="nico-lbl">DE</span>
|
||
<div class="nico" style="background:rgba(255,255,255,.12)"></div><!-- theme toggle -->
|
||
<div class="nico" style="background:rgba(255,255,255,.12)"></div><!-- bell -->
|
||
<div class="nico-av">LV</div>
|
||
</div>
|
||
</div>
|
||
<div class="MAIN"><div class="PH w80"></div><div class="PH w60"></div><div class="PH w70"></div></div>
|
||
</div>
|
||
<div class="MEA">
|
||
<div class="MEA-LINE"></div>
|
||
<span class="MEA-VAL">4px accent strip · background: #B4B9FF</span>
|
||
<div class="MEA-LINE"></div>
|
||
</div>
|
||
<div class="MEA">
|
||
<div class="MEA-LINE"></div>
|
||
<span class="MEA-VAL">64px nav bar · background: #012851</span>
|
||
<div class="MEA-LINE"></div>
|
||
</div>
|
||
<div class="MEA">
|
||
<div class="MEA-LINE"></div>
|
||
<span class="MEA-VAL">Total: 68px</span>
|
||
<div class="MEA-LINE"></div>
|
||
</div>
|
||
<div class="sc">Active link: "Korrespondenz" — white text + 2px bottom border in #A1DCD8. Divider between logo and nav: rgba(255,255,255,0.15). Avatar: mint bg + navy text.</div>
|
||
</div>
|
||
|
||
<!-- Dark mode -->
|
||
<div class="sb">
|
||
<div class="sl">Dark mode <span class="sz">≥768px</span> <span class="state st-good">Same navy — brand constant</span></div>
|
||
<div class="wf" style="border-color:#444">
|
||
<div class="wf-bar" style="background:#333;border-color:#444"><div class="dot r"></div><div class="dot y"></div><div class="dot g"></div><div class="urlbar" style="background:#444"><span style="color:#aaa">/korrespondenz</span></div></div>
|
||
<div class="STRIP"></div><!-- strip is identical — not theme-aware -->
|
||
<div class="N"><!-- N stays the same #012851 in dark mode too -->
|
||
<span class="logo">FAMILIENARCHIV</span>
|
||
<div style="width:1px;height:16px;background:rgba(255,255,255,.15);margin:0 2px"></div>
|
||
<span class="nl">Dokumente</span>
|
||
<span class="nl">Personen</span>
|
||
<span class="nl on">Korrespondenz</span>
|
||
<div class="nr">
|
||
<span class="nico-lbl">DE</span>
|
||
<div class="nico"></div>
|
||
<div class="nico"></div>
|
||
<div class="nico-av">LV</div>
|
||
</div>
|
||
</div>
|
||
<div class="DK-MAIN"><div class="DK-PH w80"></div><div class="DK-PH w60"></div><div class="DK-PH w70"></div></div>
|
||
</div>
|
||
<div class="ann-block" style="background:#EFF6FF;border-color:#BFDBFE;color:#1E40AF;margin-top:8px">
|
||
<strong>Dark mode rule:</strong> The header is a brand element, not a semantic surface. It does NOT respond to the <code style="font-size:9px;background:rgba(30,64,175,.1);padding:1px 3px;border-radius:2px">dark:</code> variant. Page content behind it switches; the header stays #012851.
|
||
<ul style="margin-top:4px">
|
||
<li>Remove <code style="font-size:9px;background:rgba(30,64,175,.1);padding:1px 3px;border-radius:2px">dark:bg-surface</code> from header element</li>
|
||
<li>Apply <code style="font-size:9px;background:rgba(30,64,175,.1);padding:1px 3px;border-radius:2px">bg-brand-navy</code> as a non-dark-variant class</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Element key -->
|
||
<div style="background:#fff;border:1.5px solid #E0DDD6;border-radius:8px;padding:16px 20px;margin-top:8px">
|
||
<div style="font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:#888;margin-bottom:12px">Element color tokens</div>
|
||
<div style="display:grid;grid-template-columns:repeat(6,1fr);gap:16px">
|
||
<div class="SW">
|
||
<div class="SW-BOX" style="background:#012851"></div>
|
||
<div class="SW-NAME">brand-navy</div>
|
||
<div class="SW-HEX">#012851</div>
|
||
<div style="font-size:7px;color:#888;margin-top:2px">Header bg</div>
|
||
</div>
|
||
<div class="SW">
|
||
<div class="SW-BOX" style="background:#B4B9FF"></div>
|
||
<div class="SW-NAME">brand-purple</div>
|
||
<div class="SW-HEX">#B4B9FF</div>
|
||
<div style="font-size:7px;color:#888;margin-top:2px">Accent strip</div>
|
||
</div>
|
||
<div class="SW">
|
||
<div class="SW-BOX" style="background:#A1DCD8"></div>
|
||
<div class="SW-NAME">brand-mint</div>
|
||
<div class="SW-HEX">#A1DCD8</div>
|
||
<div style="font-size:7px;color:#888;margin-top:2px">Active underline · avatar bg</div>
|
||
</div>
|
||
<div class="SW">
|
||
<div class="SW-BOX" style="background:#ffffff;border-color:#D0D0D0"></div>
|
||
<div class="SW-NAME">white</div>
|
||
<div class="SW-HEX">#ffffff</div>
|
||
<div style="font-size:7px;color:#888;margin-top:2px">Active link text · logo</div>
|
||
</div>
|
||
<div class="SW">
|
||
<div class="SW-BOX" style="background:rgba(255,255,255,0.55)"></div>
|
||
<div class="SW-NAME">white/55</div>
|
||
<div class="SW-HEX">rgba(255,255,255,.55)</div>
|
||
<div style="font-size:7px;color:#888;margin-top:2px">Inactive nav links</div>
|
||
</div>
|
||
<div class="SW">
|
||
<div class="SW-BOX" style="background:rgba(255,255,255,0.85)"></div>
|
||
<div class="SW-NAME">white/85</div>
|
||
<div class="SW-HEX">rgba(255,255,255,.85)</div>
|
||
<div style="font-size:7px;color:#888;margin-top:2px">Hover nav links</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ══════════════════════════════════
|
||
SECTION 3 — NAV STATES
|
||
══════════════════════════════════ -->
|
||
<div class="sec">
|
||
<div class="sec-h"><span class="sec-num">3</span> Nav link states</div>
|
||
|
||
<div class="NSG" style="margin-bottom:20px">
|
||
|
||
<!-- Inactive -->
|
||
<div class="NS">
|
||
<div class="NS-LABEL">Inactive</div>
|
||
<div class="NS-DEMO">
|
||
<span class="NS-LINK NS-INACTIVE">Personen</span>
|
||
</div>
|
||
<div style="margin-top:6px;font-size:9px;color:#555;line-height:1.6">
|
||
<div><span class="token">color: rgba(255,255,255,.55)</span></div>
|
||
<div style="margin-top:4px;display:flex;align-items:center;gap:6px">
|
||
<span class="contrast-badge cr-pass">4.9:1 ✓ AA</span>
|
||
</div>
|
||
</div>
|
||
<div class="sc">Intentionally muted — communicates "not here yet" without removing affordance.</div>
|
||
</div>
|
||
|
||
<!-- Hover -->
|
||
<div class="NS">
|
||
<div class="NS-LABEL">Hover</div>
|
||
<div class="NS-DEMO">
|
||
<span class="NS-LINK NS-HOVER">Personen</span>
|
||
</div>
|
||
<div style="margin-top:6px;font-size:9px;color:#555;line-height:1.6">
|
||
<div><span class="token">color: rgba(255,255,255,.85)</span></div>
|
||
<div style="margin-top:4px;display:flex;align-items:center;gap:6px">
|
||
<span class="contrast-badge cr-pass">7.8:1 ✓ AA</span>
|
||
</div>
|
||
</div>
|
||
<div class="sc">Smooth brightness step on hover. Transition: <code style="font-size:9px">color 150ms ease</code>.</div>
|
||
</div>
|
||
|
||
<!-- Active -->
|
||
<div class="NS">
|
||
<div class="NS-LABEL">Active (current page)</div>
|
||
<div class="NS-DEMO">
|
||
<span class="NS-LINK NS-ACTIVE">Korrespondenz</span>
|
||
</div>
|
||
<div style="margin-top:6px;font-size:9px;color:#555;line-height:1.6">
|
||
<div><span class="token">color: #ffffff</span></div>
|
||
<div><span class="token">border-bottom: 2px solid #A1DCD8</span></div>
|
||
<div style="margin-top:4px;display:flex;align-items:center;gap:6px">
|
||
<span class="contrast-badge cr-pass">21:1 ✓ AAA</span>
|
||
</div>
|
||
</div>
|
||
<div class="sc">Mint underline is the active indicator — not a background pill. Clear, low-weight, distinct from hover.</div>
|
||
</div>
|
||
|
||
<!-- Focus -->
|
||
<div class="NS">
|
||
<div class="NS-LABEL">Focus (keyboard)</div>
|
||
<div class="NS-DEMO">
|
||
<span class="NS-LINK NS-FOCUS">Personen</span>
|
||
</div>
|
||
<div style="margin-top:6px;font-size:9px;color:#555;line-height:1.6">
|
||
<div><span class="token">outline: 2px solid #A1DCD8</span></div>
|
||
<div><span class="token">outline-offset: 3px</span></div>
|
||
<div><span class="token">border-radius: 2px</span></div>
|
||
<div style="margin-top:4px;display:flex;align-items:center;gap:6px">
|
||
<span class="contrast-badge cr-pass">3.4:1 ✓ AA</span>
|
||
</div>
|
||
</div>
|
||
<div class="sc">Mint outline on navy — meets WCAG 3:1 focus indicator requirement. Never suppress outline.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Before/After contrast comparison -->
|
||
<div style="background:#fff;border:1.5px solid #E0DDD6;border-radius:8px;padding:16px 20px">
|
||
<div style="font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:#888;margin-bottom:12px">Active state contrast — before vs. after</div>
|
||
<div class="sg sg-2">
|
||
<div>
|
||
<div class="sl" style="margin-bottom:8px">Before <span class="state st-bad">Fails WCAG</span></div>
|
||
<div style="background:#ffffff;border-radius:5px;padding:10px 14px;border:1.5px solid #E5E7EB;display:inline-flex;align-items:center;gap:0">
|
||
<span style="font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#012851;background:rgba(180,185,255,0.15);padding:4px 10px;border-radius:4px">Dokumente</span>
|
||
</div>
|
||
<div style="margin-top:8px;font-size:9px;color:#555">
|
||
Navy text (#012851) on rgba(180,185,255,0.15) on white.<br>
|
||
Effective background: approx. #F4F4FF.<br>
|
||
<span class="contrast-badge cr-fail" style="margin-top:4px">~1.08:1 ✗ Fail</span>
|
||
</div>
|
||
<div class="sc">The active pill is invisible. Users can't tell which page they're on.</div>
|
||
</div>
|
||
<div>
|
||
<div class="sl" style="margin-bottom:8px">After <span class="state st-good">Passes WCAG AAA</span></div>
|
||
<div style="background:#012851;border-radius:5px;padding:10px 14px;display:inline-flex;align-items:center">
|
||
<span style="font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#fff;border-bottom:2px solid #A1DCD8;padding-bottom:2px">Dokumente</span>
|
||
</div>
|
||
<div style="margin-top:8px;font-size:9px;color:#555">
|
||
White text (#ffffff) on navy (#012851).<br>
|
||
Mint underline: #A1DCD8 on navy = 3.1:1 for the indicator itself.<br>
|
||
<span class="contrast-badge cr-pass" style="margin-top:4px">21:1 ✓ AAA (text)</span>
|
||
</div>
|
||
<div class="sc">Unambiguous. The underline echoes brand-mint used elsewhere as an accent.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ══════════════════════════════════
|
||
SECTION 4 — MOBILE
|
||
══════════════════════════════════ -->
|
||
<div class="sec">
|
||
<div class="sec-h"><span class="sec-num">4</span> Mobile header + nav drawer</div>
|
||
|
||
<div class="sg sg-3" style="align-items:start">
|
||
|
||
<!-- Current mobile (broken) -->
|
||
<div class="sb">
|
||
<div class="sl">Current <span class="state st-bad">No logo</span></div>
|
||
<div style="display:flex;justify-content:center">
|
||
<div class="WF-M">
|
||
<div class="WF-M-STATUS"><span class="WF-M-TIME">09:41</span><div class="WF-M-ICONS"><div class="WF-M-ICON"></div><div class="WF-M-ICON"></div><div class="WF-M-ICON"></div></div></div>
|
||
<div class="N-M-OLD">
|
||
<div style="width:18px;display:flex;flex-direction:column;gap:3px">
|
||
<div style="height:1.5px;background:#012851;border-radius:1px;width:100%"></div>
|
||
<div style="height:1.5px;background:#012851;border-radius:1px;width:100%"></div>
|
||
<div style="height:1.5px;background:#012851;border-radius:1px;width:100%"></div>
|
||
</div>
|
||
<div style="margin-left:auto;display:flex;gap:5px;align-items:center">
|
||
<div class="H-OLD-ICO" style="width:18px;height:18px"></div>
|
||
<div class="H-OLD-AV" style="width:20px;height:20px">LV</div>
|
||
</div>
|
||
</div>
|
||
<div class="MAIN" style="padding:10px 12px;min-height:60px"><div class="PH w80"></div><div class="PH w60"></div></div>
|
||
</div>
|
||
</div>
|
||
<div class="ann-block" style="margin-top:8px">
|
||
<strong>Problem:</strong> No logo. The user has zero brand context. On first load, there is no visual cue that this is Familienarchiv. The hamburger icon color (dark navy) will also break in dark mode.
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Proposed mobile header -->
|
||
<div class="sb">
|
||
<div class="sl">Proposed header <span class="state st-good">Logo visible</span></div>
|
||
<div style="display:flex;justify-content:center">
|
||
<div class="WF-M">
|
||
<div class="WF-M-STATUS"><span class="WF-M-TIME">09:41</span><div class="WF-M-ICONS"><div class="WF-M-ICON"></div><div class="WF-M-ICON"></div><div class="WF-M-ICON"></div></div></div>
|
||
<div style="height:3px;background:#B4B9FF"></div><!-- accent strip, thinner on mobile -->
|
||
<div class="N-M" style="background:#012851">
|
||
<span class="logo" style="font-size:7.5px;letter-spacing:1px">FAMILIENARCHIV</span>
|
||
<div style="display:flex;gap:6px;align-items:center">
|
||
<div class="nico-av" style="width:20px;height:20px;font-size:5.5px">LV</div>
|
||
<div class="HAMBURGER">
|
||
<div class="HAMBURGER-LINE"></div>
|
||
<div class="HAMBURGER-LINE"></div>
|
||
<div class="HAMBURGER-LINE"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="MAIN" style="padding:10px 12px;min-height:60px"><div class="PH w80"></div><div class="PH w60"></div></div>
|
||
</div>
|
||
</div>
|
||
<div class="sc">Logo always visible left. Avatar + hamburger right. Accent strip is 3px on mobile (saves 1px). Background is brand-navy — no theme variation.</div>
|
||
</div>
|
||
|
||
<!-- Proposed drawer open -->
|
||
<div class="sb">
|
||
<div class="sl">Nav drawer <span class="state st-good">Open state</span></div>
|
||
<div style="display:flex;justify-content:center">
|
||
<div class="WF-M">
|
||
<div class="WF-M-STATUS"><span class="WF-M-TIME">09:41</span><div class="WF-M-ICONS"><div class="WF-M-ICON"></div><div class="WF-M-ICON"></div><div class="WF-M-ICON"></div></div></div>
|
||
<div style="height:3px;background:#B4B9FF"></div>
|
||
<div class="N-M" style="background:#012851">
|
||
<span class="logo" style="font-size:7.5px;letter-spacing:1px">FAMILIENARCHIV</span>
|
||
<div style="display:flex;gap:6px;align-items:center">
|
||
<div class="nico-av" style="width:20px;height:20px;font-size:5.5px">LV</div>
|
||
<!-- X icon when drawer open -->
|
||
<div style="width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.85);font-size:13px;font-weight:300">✕</div>
|
||
</div>
|
||
</div>
|
||
<!-- Drawer -->
|
||
<div class="DRAWER">
|
||
<div class="DRAWER-LINK off">Dokumente</div>
|
||
<div class="DRAWER-LINK off">Personen</div>
|
||
<div class="DRAWER-LINK on">Korrespondenz</div>
|
||
<div class="DRAWER-LINK off" style="font-size:7px;color:rgba(1,40,81,.4)">Admin</div>
|
||
<div class="DRAWER-DIV"></div>
|
||
<div class="DRAWER-LANG">
|
||
<span style="font-size:7px;color:#888;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-right:4px">Sprache</span>
|
||
<div class="DRAWER-LANG-BTN on">DE</div>
|
||
<div class="DRAWER-LANG-BTN">EN</div>
|
||
<div class="DRAWER-LANG-BTN">ES</div>
|
||
</div>
|
||
</div>
|
||
<div class="MAIN" style="padding:10px 12px;min-height:40px;opacity:.4"><div class="PH w80"></div></div>
|
||
</div>
|
||
</div>
|
||
<div class="sc">Drawer uses white background with navy text — intentional reversal of the dark header. Active page: mint left border + sand background. Language switcher lives in drawer on mobile (not floating).</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ══════════════════════════════════
|
||
SECTION 5 — LOGIN PAGE
|
||
══════════════════════════════════ -->
|
||
<div class="sec">
|
||
<div class="sec-h"><span class="sec-num">5</span> Login page — branded header</div>
|
||
|
||
<div class="sg sg-2">
|
||
|
||
<!-- Current login (no header) -->
|
||
<div class="sb">
|
||
<div class="sl">Current — header hidden <span class="state st-bad">No brand context</span></div>
|
||
<div class="wf">
|
||
<div class="wf-bar"><div class="dot r"></div><div class="dot y"></div><div class="dot g"></div><div class="urlbar"><span>/login</span></div></div>
|
||
<!-- Floating language switcher (no context) -->
|
||
<div style="position:relative;min-height:140px;background:#F0EFE9">
|
||
<div style="position:absolute;top:8px;right:10px;display:flex;gap:4px">
|
||
<span style="font-size:7.5px;font-weight:700;color:#012851;background:#fff;border:1.5px solid #D1D5DB;padding:2px 7px;border-radius:3px">DE</span>
|
||
<span style="font-size:7.5px;font-weight:700;color:#888;padding:2px 7px;border-radius:3px">EN</span>
|
||
<span style="font-size:7.5px;font-weight:700;color:#888;padding:2px 7px;border-radius:3px">ES</span>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;align-items:center;padding-top:22px">
|
||
<div class="LOGIN-CARD">
|
||
<div class="LOGIN-CARD-TITLE">Anmelden</div>
|
||
<div class="LOGIN-FIELD"><div class="LOGIN-FIELD-L">E-Mail</div><div class="LOGIN-FIELD-I"></div></div>
|
||
<div class="LOGIN-FIELD"><div class="LOGIN-FIELD-L">Passwort</div><div class="LOGIN-FIELD-I"></div></div>
|
||
<div class="LOGIN-BTN">Anmelden</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="ann-block">
|
||
<strong>Problems:</strong> Header is hidden entirely on auth pages. Language switcher floats top-right with no visual anchor — it's a ghost. Users arrive with zero brand context. The page could be any app.
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Proposed login (branded header) -->
|
||
<div class="sb">
|
||
<div class="sl">Proposed — logo-only header <span class="state st-good">Branded</span></div>
|
||
<div class="wf">
|
||
<div class="wf-bar"><div class="dot r"></div><div class="dot y"></div><div class="dot g"></div><div class="urlbar"><span>/login</span></div></div>
|
||
<div class="LOGIN-BG">
|
||
<div class="LOGIN-HEADER"></div><!-- 4px purple strip -->
|
||
<div class="LOGIN-NAV">
|
||
<span class="logo">FAMILIENARCHIV</span>
|
||
<!-- Right: language switcher integrated in header -->
|
||
<div style="display:flex;gap:6px;align-items:center">
|
||
<span style="font-size:7.5px;font-weight:800;color:#fff;opacity:.9">DE</span>
|
||
<span style="font-size:7.5px;font-weight:700;color:rgba(255,255,255,.5)">EN</span>
|
||
<span style="font-size:7.5px;font-weight:700;color:rgba(255,255,255,.5)">ES</span>
|
||
</div>
|
||
</div>
|
||
<div class="LOGIN-CARD">
|
||
<div class="LOGIN-CARD-TITLE">Anmelden</div>
|
||
<div class="LOGIN-FIELD"><div class="LOGIN-FIELD-L">E-Mail</div><div class="LOGIN-FIELD-I"></div></div>
|
||
<div class="LOGIN-FIELD"><div class="LOGIN-FIELD-L">Passwort</div><div class="LOGIN-FIELD-I"></div></div>
|
||
<div class="LOGIN-BTN">Anmelden</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="sc">Accent strip + navy header appears on login. No nav links (user is not authenticated). Language switcher lives in header right slot — same position as desktop, consistent muscle memory. The brand is present from the first moment the user sees the app.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Code change note -->
|
||
<div class="ann-block" style="background:#EFF6FF;border-color:#BFDBFE;color:#1E40AF;margin-top:16px">
|
||
<strong>Implementation change:</strong> In <code style="font-size:9px;background:rgba(30,64,175,.1);padding:1px 3px;border-radius:2px">+layout.svelte</code>, the <code style="font-size:9px;background:rgba(30,64,175,.1);padding:1px 3px;border-radius:2px">{#if !isAuthPage}</code> guard currently hides the entire header. Replace with a conditional that renders a <em>login variant</em> of the header (logo + lang switcher, no nav links) when <code style="font-size:9px;background:rgba(30,64,175,.1);padding:1px 3px;border-radius:2px">isAuthPage</code> is true. Move the <code style="font-size:9px;background:rgba(30,64,175,.1);padding:1px 3px;border-radius:2px">LanguageSwitcher</code> import into the header for the auth variant. Remove the floating <code style="font-size:9px;background:rgba(30,64,175,.1);padding:1px 3px;border-radius:2px">LanguageSwitcher</code> from <code style="font-size:9px;background:rgba(30,64,175,.1);padding:1px 3px;border-radius:2px">/login/+page.svelte</code>.
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ══════════════════════════════════
|
||
SECTION 6 — RIGHT UTILITIES DETAIL
|
||
══════════════════════════════════ -->
|
||
<div class="sec">
|
||
<div class="sec-h"><span class="sec-num">6</span> Right utility area — element by element</div>
|
||
|
||
<div style="background:#012851;border-radius:8px;padding:16px 20px;margin-bottom:16px">
|
||
<div style="height:40px;display:flex;align-items:center;gap:10px;justify-content:flex-end">
|
||
<!-- Language switcher -->
|
||
<div style="display:flex;gap:5px;align-items:center;border-right:1px solid rgba(255,255,255,.15);padding-right:10px">
|
||
<span style="font-size:8px;font-weight:800;color:#fff">DE</span>
|
||
<span style="font-size:8px;font-weight:700;color:rgba(255,255,255,.5)">EN</span>
|
||
<span style="font-size:8px;font-weight:700;color:rgba(255,255,255,.5)">ES</span>
|
||
</div>
|
||
<!-- Theme toggle -->
|
||
<div style="width:24px;height:24px;background:rgba(255,255,255,.1);border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:12px;opacity:.7">☀</div>
|
||
<!-- Notification bell -->
|
||
<div style="position:relative;width:24px;height:24px;display:flex;align-items:center;justify-content:center">
|
||
<span style="font-size:14px;color:rgba(255,255,255,.75)">🔔</span>
|
||
<div style="position:absolute;top:3px;right:2px;width:7px;height:7px;background:#EF4444;border-radius:50%;border:1.5px solid #012851"></div>
|
||
</div>
|
||
<!-- User avatar -->
|
||
<div class="nico-av">LV</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px">
|
||
<div style="background:#fff;border:1.5px solid #E0DDD6;border-radius:6px;padding:12px">
|
||
<div style="font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#888;margin-bottom:8px">Language switcher</div>
|
||
<div style="font-size:9px;color:#444;line-height:1.6">
|
||
Active lang: <span class="token">color: #ffffff</span><br>
|
||
Inactive lang: <span class="token">color: rgba(255,255,255,.5)</span><br>
|
||
Separator from rest: <span class="token">border-right: 1px solid rgba(255,255,255,.15)</span><br>
|
||
On login: visible in header right slot
|
||
</div>
|
||
</div>
|
||
<div style="background:#fff;border:1.5px solid #E0DDD6;border-radius:6px;padding:12px">
|
||
<div style="font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#888;margin-bottom:8px">Theme toggle</div>
|
||
<div style="font-size:9px;color:#444;line-height:1.6">
|
||
Icon: white at <span class="token">opacity: 0.7</span><br>
|
||
Hover: <span class="token">opacity: 1.0</span><br>
|
||
Background: <span class="token">rgba(255,255,255,.1)</span><br>
|
||
No change to toggle logic — icon color only
|
||
</div>
|
||
</div>
|
||
<div style="background:#fff;border:1.5px solid #E0DDD6;border-radius:6px;padding:12px">
|
||
<div style="font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#888;margin-bottom:8px">Notification bell</div>
|
||
<div style="font-size:9px;color:#444;line-height:1.6">
|
||
Icon: white at <span class="token">opacity: 0.75</span><br>
|
||
Badge: stays <span class="token">bg-red-500</span> (#EF4444)<br>
|
||
Badge border: <span class="token">border: 1.5px solid #012851</span> (halos on navy)<br>
|
||
No component logic changes
|
||
</div>
|
||
</div>
|
||
<div style="background:#fff;border:1.5px solid #E0DDD6;border-radius:6px;padding:12px">
|
||
<div style="font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#888;margin-bottom:8px">User avatar</div>
|
||
<div style="font-size:9px;color:#444;line-height:1.6">
|
||
Background: <span class="token">#A1DCD8</span> (brand-mint)<br>
|
||
Text: <span class="token">#012851</span> (brand-navy)<br>
|
||
Contrast: 4.8:1 ✓ AA<br>
|
||
Replaces navy bg (dark-on-dark in dark mode)
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ══════════════════════════════════
|
||
IMPLEMENTATION NOTES
|
||
══════════════════════════════════ -->
|
||
<div class="IMPL">
|
||
<h2>Implementation notes</h2>
|
||
<div class="IMPL-GRID">
|
||
<div class="IMPL-COL">
|
||
<h3>CSS / Tailwind changes</h3>
|
||
<ul>
|
||
<li>Header: replace <code>bg-surface</code> with <code>bg-[#012851]</code> (or add a <code>bg-brand-navy</code> utility to <code>layout.css</code>)</li>
|
||
<li>Remove <code>border-b border-line-2</code> from header — the accent strip replaces the visual separator</li>
|
||
<li>Add a <code><div class="h-1 bg-[#B4B9FF]"></code> before the nav bar in <code>+layout.svelte</code></li>
|
||
<li>Nav links: replace <code>text-ink</code> + <code>bg-nav-active</code> with opacity-based white utilities: <code>text-white/55</code> inactive, <code>hover:text-white/85</code>, <code>text-white border-b-2 border-[#A1DCD8]</code> active</li>
|
||
<li>User avatar: swap <code>bg-brand-navy text-white</code> → <code>bg-[#A1DCD8] text-[#012851]</code></li>
|
||
<li>Notification badge: add <code>border-2 border-[#012851]</code> to badge element</li>
|
||
<li>Dark mode: on the <code><header></code> element, ensure there is NO <code>dark:</code> variant overriding the background</li>
|
||
</ul>
|
||
</div>
|
||
<div class="IMPL-COL">
|
||
<h3>Component changes</h3>
|
||
<ul>
|
||
<li><code>+layout.svelte</code>: split the <code>{#if !isAuthPage}</code> guard into two branches — full header (authed) vs. login header (logo + lang only)</li>
|
||
<li><code>AppNav.svelte</code>: ensure logo is always rendered, not hidden on mobile via <code>hidden sm:flex</code> or similar</li>
|
||
<li><code>AppNav.svelte</code>: hamburger button — icon color from dark to <code>text-white/85</code></li>
|
||
<li><code>AppNav.svelte</code>: active link class — remove <code>bg-nav-active</code>, add bottom border in mint</li>
|
||
<li><code>UserMenu.svelte</code>: avatar background and text color</li>
|
||
<li><code>ThemeToggle.svelte</code>: icon fill/stroke → <code>text-white/70</code></li>
|
||
<li><code>NotificationBell.svelte</code>: icon color → <code>text-white/75</code></li>
|
||
<li><code>/login/+page.svelte</code>: remove standalone <code><LanguageSwitcher></code> — it moves to the layout header</li>
|
||
</ul>
|
||
</div>
|
||
<div class="IMPL-COL">
|
||
<h3>CSS variable candidates</h3>
|
||
<ul>
|
||
<li>Consider adding to <code>layout.css</code>:<br><code>--header-bg: #012851;</code><br><code>--header-accent: #B4B9FF;</code><br><code>--header-nav-active: #A1DCD8;</code></li>
|
||
<li>These are intentionally NOT in the dark-mode <code>@media (prefers-color-scheme: dark)</code> block — they are brand constants</li>
|
||
<li>If Tailwind 4 theme is configured, add:<br><code>brand-navy: #012851</code><br><code>brand-purple: #B4B9FF</code><br><code>brand-mint: #A1DCD8</code><br>to the <code>@theme</code> block in <code>layout.css</code></li>
|
||
<li>No backend changes required</li>
|
||
<li>No i18n key changes required</li>
|
||
<li>No new routes required</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|