header opaque + z-index en tokens (standard header/menu KA 2026-08-22)
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2 changed files +8 −8
modified
frontend/dist/index.html
+4 −4
@@ -714,8 +714,8 @@ a{text-decoration:none} button{font-family:inherit;cursor:pointer} | ||
| 714 | 714 | .btn-primary{box-shadow:4px 4px 0 rgba(20,24,20,.25)} |
| 715 | 715 | |
| 716 | 716 | /* ===== header ===== */ |
| 717 | −.header{position:sticky;top:0;z-index:50;background:rgba(245,243,238,.9); | |
| 718 | − backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1.5px solid var(--ink)} | |
| 717 | +.header{position:sticky;top:0;z-index:var(--z-header,500);background:var(--paper); | |
| 718 | + border-bottom:1.5px solid var(--ink)} | |
| 719 | 719 | .header-inner{display:flex;align-items:center;gap:16px;height:64px} |
| 720 | 720 | .brand{font-family:var(--font-display);font-weight:700;font-size:23px;letter-spacing:-.03em; |
| 721 | 721 | display:flex;align-items:center;line-height:1;color:var(--ink)} |
@@ -800,7 +800,7 @@ a{text-decoration:none} button{font-family:inherit;cursor:pointer} | ||
| 800 | 800 | .adv p{margin:0;font-size:12px;color:var(--ink-3);line-height:1.45} |
| 801 | 801 | |
| 802 | 802 | /* ===== recherche + filtres ===== */ |
| 803 | −.searchbar{position:sticky;top:64px;z-index:40;background:rgba(245,243,238,.94); | |
| 803 | +.searchbar{position:sticky;top:64px;z-index:var(--z-sticky,300);background:rgba(245,243,238,.94); | |
| 804 | 804 | backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); |
| 805 | 805 | padding:12px 0;border-bottom:1.5px solid var(--ink)} |
| 806 | 806 | .search-wrap{display:flex;gap:10px;align-items:center} |
@@ -1234,7 +1234,7 @@ select.f.active{background-color:var(--accent-soft);color:var(--ink);border-colo | ||
| 1234 | 1234 | .tabbar{display:none} |
| 1235 | 1235 | @media(max-width:940px){ |
| 1236 | 1236 | .tabbar{display:grid;grid-template-columns:repeat(4,1fr); |
| 1237 | − position:fixed;left:0;right:0;bottom:0;z-index:85; | |
| 1237 | + position:fixed;left:0;right:0;bottom:0;z-index:var(--z-bottombar,600); | |
| 1238 | 1238 | background:rgba(245,243,238,.94); |
| 1239 | 1239 | backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); |
| 1240 | 1240 | border-top:1.5px solid var(--ink); |
modified
frontend/src/index.template.html
+4 −4
@@ -76,8 +76,8 @@ a{text-decoration:none} button{font-family:inherit;cursor:pointer} | ||
| 76 | 76 | .btn-primary{box-shadow:4px 4px 0 rgba(20,24,20,.25)} |
| 77 | 77 | |
| 78 | 78 | /* ===== header ===== */ |
| 79 | −.header{position:sticky;top:0;z-index:50;background:rgba(245,243,238,.9); | |
| 80 | − backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1.5px solid var(--ink)} | |
| 79 | +.header{position:sticky;top:0;z-index:var(--z-header,500);background:var(--paper); | |
| 80 | + border-bottom:1.5px solid var(--ink)} | |
| 81 | 81 | .header-inner{display:flex;align-items:center;gap:16px;height:64px} |
| 82 | 82 | .brand{font-family:var(--font-display);font-weight:700;font-size:23px;letter-spacing:-.03em; |
| 83 | 83 | display:flex;align-items:center;line-height:1;color:var(--ink)} |
@@ -162,7 +162,7 @@ a{text-decoration:none} button{font-family:inherit;cursor:pointer} | ||
| 162 | 162 | .adv p{margin:0;font-size:12px;color:var(--ink-3);line-height:1.45} |
| 163 | 163 | |
| 164 | 164 | /* ===== recherche + filtres ===== */ |
| 165 | −.searchbar{position:sticky;top:64px;z-index:40;background:rgba(245,243,238,.94); | |
| 165 | +.searchbar{position:sticky;top:64px;z-index:var(--z-sticky,300);background:rgba(245,243,238,.94); | |
| 166 | 166 | backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); |
| 167 | 167 | padding:12px 0;border-bottom:1.5px solid var(--ink)} |
| 168 | 168 | .search-wrap{display:flex;gap:10px;align-items:center} |
@@ -596,7 +596,7 @@ select.f.active{background-color:var(--accent-soft);color:var(--ink);border-colo | ||
| 596 | 596 | .tabbar{display:none} |
| 597 | 597 | @media(max-width:940px){ |
| 598 | 598 | .tabbar{display:grid;grid-template-columns:repeat(4,1fr); |
| 599 | − position:fixed;left:0;right:0;bottom:0;z-index:85; | |
| 599 | + position:fixed;left:0;right:0;bottom:0;z-index:var(--z-bottombar,600); | |
| 600 | 600 | background:rgba(245,243,238,.94); |
| 601 | 601 | backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); |
| 602 | 602 | border-top:1.5px solid var(--ink); |
| 603 | 603 | |