/* ========================================================================== Mobile section menu Below 900px the hero's inline nav links are dropped — there is no room for five items beside the wordmark — and until now nothing replaced them, so the only way to reach a section on a phone was to scroll the whole page. This is the toggle that takes the Get started button's place and the panel it opens. The panel is a sibling of the page sections, not a child of the hero: the hero is overflow:hidden and its nav animates in on a transform, either of which would trap a position:fixed panel inside it. Progressive enhancement: the toggle is display:none until js/menu.js puts .has-menu on , so a browser that cannot open the panel keeps the Get started link instead of showing a button that does nothing. ========================================================================== */ /* --- Toggle --------------------------------------------------------------- Its own block rather than a hero element: the same button appears in the hero and again in the sticky top bar, and both drive the same panel. */ .nav-toggle { display: none; align-items: center; gap: 11px; padding: 13px 18px; border: 1px solid rgba(217, 169, 58, .34); border-radius: var(--radius); background: rgba(6, 5, 4, .34); color: var(--gold-cta-text); font-family: var(--font-ui); font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; -webkit-appearance: none; appearance: none; transition: border-color .3s ease, color .3s ease; } .nav-toggle:hover { border-color: rgba(217, 169, 58, .62); } /* Two rules rather than the usual three bars: the page is built out of gold hairlines and this reads as one of them. */ .nav-toggle-icon { position: relative; width: 16px; height: 9px; flex: none; } .nav-toggle-icon::before, .nav-toggle-icon::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: currentColor; } .nav-toggle-icon::before { top: 1px; } .nav-toggle-icon::after { bottom: 1px; right: 4px; } /* --- Panel ---------------------------------------------------------------- */ .menu { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; padding: 0 var(--gutter) var(--space-38); background: radial-gradient(78% 46% at 50% 0%, rgba(168, 112, 28, .17) 0%, rgba(6, 5, 4, 0) 72%), var(--black-deep); overscroll-behavior: contain; overflow-y: auto; } /* [hidden] alone is not enough once display:flex is set. */ .menu[hidden] { display: none; } /* Opening state is applied by js/menu.js one frame after the panel is shown, so the transition has something to run from. */ .menu { opacity: 0; transition: opacity .32s var(--ease-out); } .menu.is-open { opacity: 1; } /* --- Panel bar — mirrors the hero's own top row --------------------------- */ .menu__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); padding: var(--space-26) 0; border-bottom: 1px solid rgba(217, 169, 58, .18); } /* Same lockup, same reasoning as .hero__wordmark: two all-caps runs align on their cap-centres. */ .menu__wordmark { display: flex; align-items: center; gap: 10px; } .menu__wordmark-name { font-family: var(--font-display); font-weight: 900; font-size: 17px; letter-spacing: .26em; color: var(--gold); } .menu__wordmark-divider { width: 1px; height: 11px; background: rgba(217, 169, 58, .42); } .menu__wordmark-sub { font-family: var(--font-ui); font-weight: 500; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; color: rgba(240, 233, 220, .72); } .menu__close { position: relative; width: 44px; height: 44px; flex: none; margin-right: -10px; padding: 0; border: 0; background: none; color: var(--gold-cta-text); cursor: pointer; -webkit-appearance: none; appearance: none; } .menu__close span, .menu__close span::after { position: absolute; left: 50%; top: 50%; width: 17px; height: 1px; background: currentColor; content: ''; } .menu__close span { margin: -1px 0 0 -9px; transform: rotate(45deg); } .menu__close span::after { left: 0; top: 0; margin: 0; transform: rotate(-90deg); } /* --- Links ---------------------------------------------------------------- */ .menu__list { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 2px; margin: 0; padding: var(--space-26) 0; list-style: none; } .menu__list a { display: block; padding: 15px 0; font-family: var(--font-display); font-weight: 700; font-size: 29px; line-height: 1.1; letter-spacing: -.014em; color: var(--bone); border-bottom: 1px solid rgba(217, 169, 58, .13); transition: color .25s ease; } .menu__list li:last-child a { border-bottom: 0; color: var(--gold-figure); } .menu__list a:hover, .menu__list a:focus-visible { color: var(--gold-cta-hover); } /* --- Foot ----------------------------------------------------------------- */ .menu__foot { padding-top: var(--space-22); border-top: 1px solid rgba(217, 169, 58, .18); } .menu__email { font-family: var(--font-ui); font-weight: 500; font-size: 13px; letter-spacing: .04em; color: var(--gold-figure); } /* --- Where the toggle replaces the CTA ------------------------------------ 900px, matching the breakpoint at which the inline nav links are dropped: the menu has to appear exactly where they disappear. */ @media (max-width: 900px) { .has-menu .hero__nav-cta { display: none; } .has-menu .hero__nav .nav-toggle { display: inline-flex; } } /* Under 380px the wordmark and a labelled toggle cannot both fit on one line. The icon carries it alone; the button keeps its accessible name from the aria-label in the markup. */ @media (max-width: 380px) { .nav-toggle { padding: 13px 15px; } .nav-toggle-label { display: none; } } /* Short screens: the links stop being centred and the panel simply scrolls. */ @media (max-height: 620px) { .menu__list { justify-content: flex-start; } .menu__list a { font-size: 24px; padding: 12px 0; } } @media (prefers-reduced-motion: reduce) { .menu { transition: none; } }