.hamburger { display: none; width: 40px; height: 40px; border: 1px solid var(--charcoal); align-items: center; justify-content: center; flex-direction: column; gap: 4px; } .bar { display: block; width: 18px; height: 2px; background: var(--white); transition: transform 220ms ease, opacity 220ms ease; transform-origin: center; } .bar1 { transform: translateY(6px) rotate(45deg) !important; } .bar2 { opacity: 0; } .bar3 { transform: translateY(-6px) rotate(-45deg) !important; } .sheet { position: fixed; inset: 0; /* Portaled to , so this sits in the root stacking context. Kept below the nav (z-index: 100) so the brand + close button stay on top. Fully opaque so hero content can't bleed through. */ background: var(--abyss); z-index: 95; opacity: 0; pointer-events: none; transition: opacity 200ms ease; display: flex; align-items: flex-start; justify-content: center; padding: 88px 20px 40px; } .sheetOpen { opacity: 1; pointer-events: auto; } .panel { width: 100%; max-width: 520px; padding-top: 24px; } .list { list-style: none; padding: 0; margin: 0; } .list li { border-bottom: 1px solid var(--charcoal); } .list a { display: block; padding: 18px 0; font-size: 26px; font-weight: 900; letter-spacing: -0.01em; text-transform: uppercase; transition: color 180ms ease, padding-left 180ms ease; } .list a:hover { color: var(--gold); padding-left: 8px; } .foot { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 14px 20px; padding-top: 20px; border-top: 1px solid var(--charcoal); } .foot a { font-size: 12px; letter-spacing: 0.96px; color: var(--steel); text-transform: uppercase; } .foot a:hover { color: var(--gold); } /* Must match the breakpoint that hides .links in Nav.module.css, or the 721-860px range has no navigation at all. */ @media (max-width: 860px) { .hamburger { display: inline-flex; } }