Nav mobile v2 : le dropdown 480px devient un panneau plein écran fixed
Standard KA 2026-08-25 : .mobile-menu passe de position:absolute top:100% (max-height 480px) à position:fixed inset:0 — le menu est visible peu importe la position de scroll. Liens numérotés font-display, rang du header (marque + burger→✕) maintenu au-dessus du panneau. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
1 changed file +26 −15
modified
frontend/src/styles.css
+26 −15
@@ -122,23 +122,34 @@ nav.main a.active { color: var(--accent-soft); background: rgb(255 255 255 / 10% | ||
| 122 | 122 | .menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } |
| 123 | 123 | .menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; } |
| 124 | 124 | .menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } |
| 125 | +/* KA Nav v2 (2026-08-25) : panneau PLEIN ÉCRAN en position:fixed inset:0 — | |
| 126 | + visible peu importe la position de scroll (l'ancien dropdown absolute 480px | |
| 127 | + se dessinait sous le header). Le rang du header (marque + burger→✕) reste | |
| 128 | + au-dessus du panneau via .menu-open .container. */ | |
| 125 | 129 | .mobile-menu { |
| 126 | − display: none; position: absolute; top: 100%; left: 0; right: 0; | |
| 127 | − background: var(--brand); overflow: hidden; | |
| 128 | − max-height: 0; opacity: 0; | |
| 129 | − transition: max-height 0.25s ease, opacity 0.2s ease; | |
| 130 | −} | |
| 131 | −.mobile-menu.open { | |
| 132 | − max-height: 480px; opacity: 1; | |
| 133 | − border-bottom: 1.5px solid var(--ink); | |
| 134 | − padding-bottom: calc(16px + env(safe-area-inset-bottom)); | |
| 130 | + display: none; position: fixed; inset: 0; | |
| 131 | + background: var(--brand); | |
| 132 | + padding: calc(var(--header-h, 58px) + 14px) 22px calc(24px + env(safe-area-inset-bottom)); | |
| 133 | + overflow-y: auto; overscroll-behavior: contain; | |
| 134 | + flex-direction: column; counter-reset: mnav; | |
| 135 | 135 | } |
| 136 | +.mobile-menu.open { animation: mm-in 0.16s ease; } | |
| 137 | +@keyframes mm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } | |
| 138 | +header.site.menu-open .container { position: relative; z-index: 60; } | |
| 136 | 139 | .mobile-menu a { |
| 137 | − display: flex; align-items: center; min-height: 44px; | |
| 138 | − padding: 10px 20px; color: #d7ddda; font-weight: 500; | |
| 139 | −} | |
| 140 | −.mobile-menu a:hover { color: #fff; text-decoration: none; background: rgb(255 255 255 / 8%); } | |
| 141 | −.mobile-menu a.active { color: var(--accent-soft); background: rgb(255 255 255 / 10%); } | |
| 140 | + display: flex; align-items: baseline; gap: 13px; padding: 16px 2px; | |
| 141 | + color: #f5f3ee; font-family: var(--font-display, "Space Grotesk", system-ui, sans-serif); | |
| 142 | + font-weight: 700; font-size: 21px; letter-spacing: -0.02em; line-height: 1.1; | |
| 143 | + border-bottom: 1.5px dashed rgb(255 255 255 / 18%); | |
| 144 | +} | |
| 145 | +.mobile-menu a::before { | |
| 146 | + counter-increment: mnav; content: "0" counter(mnav); | |
| 147 | + font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; | |
| 148 | + font-weight: 700; color: var(--accent-soft); | |
| 149 | +} | |
| 150 | +.mobile-menu a:last-child { border-bottom: 0; } | |
| 151 | +.mobile-menu a:hover { color: #fff; text-decoration: none; } | |
| 152 | +.mobile-menu a.active { color: var(--accent-soft); } | |
| 142 | 153 | .mm-backdrop { |
| 143 | 154 | position: fixed; inset: 0; background: rgb(16 18 16 / 45%); |
| 144 | 155 | z-index: var(--z-overlay, 800); |
@@ -146,7 +157,7 @@ nav.main a.active { color: var(--accent-soft); background: rgb(255 255 255 / 10% | ||
| 146 | 157 | @media (max-width: 700px) { |
| 147 | 158 | nav.main { display: none; } |
| 148 | 159 | .menu-btn { display: flex; } |
| 149 | − .mobile-menu { display: block; } | |
| 160 | + .mobile-menu.open { display: flex; } | |
| 150 | 161 | } |
| 151 | 162 | |
| 152 | 163 | /* --- héros (encre — identité Job·Ka) ---------------------------------------- */ |
| 153 | 164 | |