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 | .menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } | 122 | .menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } | ||
| 123 | .menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; } | 123 | .menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; } | ||
| 124 | .menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } | 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 | .mobile-menu { | 129 | .mobile-menu { | ||
| 126 | − display: none; position: absolute; top: 100%; left: 0; right: 0; | 130 | + display: none; position: fixed; inset: 0; | ||
| 127 | − background: var(--brand); overflow: hidden; | 131 | + background: var(--brand); | ||
| 128 | − max-height: 0; opacity: 0; | 132 | + padding: calc(var(--header-h, 58px) + 14px) 22px calc(24px + env(safe-area-inset-bottom)); | ||
| 129 | − transition: max-height 0.25s ease, opacity 0.2s ease; | 133 | + overflow-y: auto; overscroll-behavior: contain; | ||
| 130 | −} | 134 | + flex-direction: column; counter-reset: mnav; | ||
| 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)); | ||||
| 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 | .mobile-menu a { | 139 | .mobile-menu a { | ||
| 137 | − display: flex; align-items: center; min-height: 44px; | 140 | + display: flex; align-items: baseline; gap: 13px; padding: 16px 2px; | ||
| 138 | − padding: 10px 20px; color: #d7ddda; font-weight: 500; | 141 | + color: #f5f3ee; font-family: var(--font-display, "Space Grotesk", system-ui, sans-serif); | ||
| 139 | −} | 142 | + font-weight: 700; font-size: 21px; letter-spacing: -0.02em; line-height: 1.1; | ||
| 140 | −.mobile-menu a:hover { color: #fff; text-decoration: none; background: rgb(255 255 255 / 8%); } | 143 | + border-bottom: 1.5px dashed rgb(255 255 255 / 18%); | ||
| 141 | −.mobile-menu a.active { color: var(--accent-soft); background: rgb(255 255 255 / 10%); } | 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 | .mm-backdrop { | 153 | .mm-backdrop { | ||
| 143 | position: fixed; inset: 0; background: rgb(16 18 16 / 45%); | 154 | position: fixed; inset: 0; background: rgb(16 18 16 / 45%); | ||
| 144 | z-index: var(--z-overlay, 800); | 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 | @media (max-width: 700px) { | 157 | @media (max-width: 700px) { | ||
| 147 | nav.main { display: none; } | 158 | nav.main { display: none; } | ||
| 148 | .menu-btn { display: flex; } | 159 | .menu-btn { display: flex; } | ||
| 149 | − .mobile-menu { display: block; } | 160 | + .mobile-menu.open { display: flex; } | ||
| 150 | } | 161 | } | ||
| 151 | 162 | ||||
| 152 | /* --- héros (encre — identité Job·Ka) ---------------------------------------- */ | 163 | /* --- héros (encre — identité Job·Ka) ---------------------------------------- */ | ||
| 153 | 164 | ||||