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 | .btn-primary{box-shadow:4px 4px 0 rgba(20,24,20,.25)} | 714 | .btn-primary{box-shadow:4px 4px 0 rgba(20,24,20,.25)} | ||
| 715 | 715 | ||||
| 716 | /* ===== header ===== */ | 716 | /* ===== header ===== */ | ||
| 717 | −.header{position:sticky;top:0;z-index:50;background:rgba(245,243,238,.9); | 717 | +.header{position:sticky;top:0;z-index:var(--z-header,500);background:var(--paper); | ||
| 718 | − backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1.5px solid var(--ink)} | 718 | + border-bottom:1.5px solid var(--ink)} | ||
| 719 | .header-inner{display:flex;align-items:center;gap:16px;height:64px} | 719 | .header-inner{display:flex;align-items:center;gap:16px;height:64px} | ||
| 720 | .brand{font-family:var(--font-display);font-weight:700;font-size:23px;letter-spacing:-.03em; | 720 | .brand{font-family:var(--font-display);font-weight:700;font-size:23px;letter-spacing:-.03em; | ||
| 721 | display:flex;align-items:center;line-height:1;color:var(--ink)} | 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 | .adv p{margin:0;font-size:12px;color:var(--ink-3);line-height:1.45} | 800 | .adv p{margin:0;font-size:12px;color:var(--ink-3);line-height:1.45} | ||
| 801 | 801 | ||||
| 802 | /* ===== recherche + filtres ===== */ | 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 | backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); | 804 | backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); | ||
| 805 | padding:12px 0;border-bottom:1.5px solid var(--ink)} | 805 | padding:12px 0;border-bottom:1.5px solid var(--ink)} | ||
| 806 | .search-wrap{display:flex;gap:10px;align-items:center} | 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 | .tabbar{display:none} | 1234 | .tabbar{display:none} | ||
| 1235 | @media(max-width:940px){ | 1235 | @media(max-width:940px){ | ||
| 1236 | .tabbar{display:grid;grid-template-columns:repeat(4,1fr); | 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 | background:rgba(245,243,238,.94); | 1238 | background:rgba(245,243,238,.94); | ||
| 1239 | backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); | 1239 | backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); | ||
| 1240 | border-top:1.5px solid var(--ink); | 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 | .btn-primary{box-shadow:4px 4px 0 rgba(20,24,20,.25)} | 76 | .btn-primary{box-shadow:4px 4px 0 rgba(20,24,20,.25)} | ||
| 77 | 77 | ||||
| 78 | /* ===== header ===== */ | 78 | /* ===== header ===== */ | ||
| 79 | −.header{position:sticky;top:0;z-index:50;background:rgba(245,243,238,.9); | 79 | +.header{position:sticky;top:0;z-index:var(--z-header,500);background:var(--paper); | ||
| 80 | − backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1.5px solid var(--ink)} | 80 | + border-bottom:1.5px solid var(--ink)} | ||
| 81 | .header-inner{display:flex;align-items:center;gap:16px;height:64px} | 81 | .header-inner{display:flex;align-items:center;gap:16px;height:64px} | ||
| 82 | .brand{font-family:var(--font-display);font-weight:700;font-size:23px;letter-spacing:-.03em; | 82 | .brand{font-family:var(--font-display);font-weight:700;font-size:23px;letter-spacing:-.03em; | ||
| 83 | display:flex;align-items:center;line-height:1;color:var(--ink)} | 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 | .adv p{margin:0;font-size:12px;color:var(--ink-3);line-height:1.45} | 162 | .adv p{margin:0;font-size:12px;color:var(--ink-3);line-height:1.45} | ||
| 163 | 163 | ||||
| 164 | /* ===== recherche + filtres ===== */ | 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 | backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); | 166 | backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); | ||
| 167 | padding:12px 0;border-bottom:1.5px solid var(--ink)} | 167 | padding:12px 0;border-bottom:1.5px solid var(--ink)} | ||
| 168 | .search-wrap{display:flex;gap:10px;align-items:center} | 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 | .tabbar{display:none} | 596 | .tabbar{display:none} | ||
| 597 | @media(max-width:940px){ | 597 | @media(max-width:940px){ | ||
| 598 | .tabbar{display:grid;grid-template-columns:repeat(4,1fr); | 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 | background:rgba(245,243,238,.94); | 600 | background:rgba(245,243,238,.94); | ||
| 601 | backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); | 601 | backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); | ||
| 602 | border-top:1.5px solid var(--ink); | 602 | border-top:1.5px solid var(--ink); | ||
| 603 | 603 | ||||