| .mobile-menu { |
| position: fixed; |
| inset: 0; |
| z-index: 40; |
| } |
|
|
| .mobile-menu__backdrop { |
| position: absolute; |
| inset: 0; |
| border: 0; |
| background: rgba(0, 0, 0, 0.72); |
| } |
|
|
| .mobile-menu__panel { |
| position: absolute; |
| inset: 0 0 auto 0; |
| background: var(--bg-elevated); |
| border-bottom: 1px solid var(--border); |
| box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55); |
| max-height: min(76vh, 560px); |
| overflow-y: auto; |
| } |
|
|
| .mobile-menu__header { |
| display: flex; |
| align-items: flex-start; |
| justify-content: space-between; |
| gap: var(--sp-4); |
| padding: var(--sp-5) var(--sp-4); |
| border-bottom: 1px solid var(--border); |
| } |
|
|
| .mobile-menu__title { |
| font-size: var(--fs-2xl); |
| line-height: 1.05; |
| margin-top: var(--sp-2); |
| } |
|
|
| .mobile-menu__close { |
| border: 1px solid var(--border); |
| border-radius: 2px; |
| padding: 6px; |
| display: grid; |
| place-items: center; |
| } |
|
|
| .mobile-menu__close:hover { |
| border-color: var(--accent); |
| } |
|
|
| .mobile-menu__nav { |
| display: flex; |
| flex-direction: column; |
| padding: var(--sp-3); |
| gap: var(--sp-2); |
| } |
|
|
| .mobile-menu__link { |
| display: flex; |
| align-items: center; |
| gap: var(--sp-3); |
| width: 100%; |
| padding: var(--sp-4); |
| border: 1px solid var(--border); |
| border-radius: 2px; |
| color: var(--text-muted); |
| letter-spacing: 0.1em; |
| text-transform: uppercase; |
| font-size: var(--fs-xs); |
| } |
|
|
| .mobile-menu__link:hover { |
| color: var(--text); |
| border-color: var(--accent-soft); |
| background: rgba(200, 169, 110, 0.05); |
| } |
|
|
| .mobile-menu__link--active { |
| color: var(--text); |
| border-color: var(--accent); |
| background: rgba(200, 169, 110, 0.08); |
| } |
|
|
