/* ============================================================ * menu.css — the site-wide navigation (masthead + drawer) * * Owns everything chrome-related at the top of every public page: * the sticky masthead, the brand, the primary nav, the search * field, the mobile hamburger + slide-in drawer, and the * presentation of the theme picker that theme.js injects. * * Loads AFTER styles.css, so it intentionally overrides the * baseline masthead/nav rules there. The design tokens * (--ink, --paper, --rule, --accent, fonts) still come from * styles.css and rotate per theme, so this file is theme-aware * for free. * * Progressive enhancement: the mobile drawer only engages once * menu.js has tagged with `.pw-js`. Without JavaScript the * nav falls back to a plain stacked list that still works. * * Breakpoint: the inline desktop nav collapses into the drawer * at 860px — below that a five-item uppercase nav plus search * plus brand no longer fits comfortably on one line. * ============================================================ */ /* ------------------------------------------------------------ * 1. MASTHEAD SHELL — sticky, with a scroll-aware hairline. * ---------------------------------------------------------- */ .site-masthead { position: sticky; top: 0; z-index: 100; padding: 1.15rem 2rem; border-bottom: 1px solid var(--rule); /* Translucent paper so prose scrolling beneath shows as a faint warm wash rather than a hard edge. Falls back to solid --paper where backdrop-filter is unsupported. */ background: color-mix(in srgb, var(--paper) 86%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); transition: box-shadow 260ms ease, background-color 260ms ease, border-color 260ms ease; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-masthead { background: var(--paper); } } /* menu.js sets data-scrolled once the page is nudged off the top: the rule deepens into a soft shadow so the bar lifts off the text it now overlaps. */ .site-masthead[data-scrolled] { border-bottom-color: transparent; box-shadow: 0 1px 0 var(--rule), 0 14px 28px -22px rgba(0, 0, 0, 0.5); } .site-masthead-inner { max-width: 76rem; margin: 0 auto; display: flex; align-items: center; /* center, not baseline — nav + toggle line up */ justify-content: space-between; gap: 1.75rem; } /* ------------------------------------------------------------ * 2. BRAND — the boxed PW mark + italic wordmark. * ---------------------------------------------------------- */ .site-brand { flex: 0 0 auto; text-decoration: none; color: var(--ink); display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-display); } .site-brand .mark { display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.18rem; letter-spacing: -0.03em; line-height: 1; width: 2.1rem; height: 2.1rem; padding-top: 0.1rem; background: var(--ink); color: var(--paper); border-radius: var(--radius, 6px); transition: background-color 220ms ease, transform 220ms ease; } .site-brand:hover .mark { background: var(--accent); } .site-brand .name { font-style: italic; font-weight: 500; font-size: 1.3rem; font-variation-settings: "opsz" 24; letter-spacing: -0.01em; line-height: 1; } /* ------------------------------------------------------------ * 3. SEARCH — compact field that firms up on focus. * ---------------------------------------------------------- */ .site-search { flex: 1 1 auto; max-width: 20rem; position: relative; margin: 0; } .site-search-input { width: 100%; padding: 0.5rem 0.75rem 0.5rem 2rem; font-family: var(--font-body); font-size: 0.95rem; color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, transparent); border: 1px solid var(--rule); border-radius: 999px; /* a soft pill reads friendlier than a hard box */ transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease; } .site-search-input::placeholder { color: var(--ink-faint); font-style: italic; } .site-search-input:focus { outline: none; border-color: var(--ink); background: var(--paper); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } .site-search-icon { position: absolute; top: 50%; left: 0.7rem; transform: translateY(-50%); color: var(--ink-faint); font-size: 0.95rem; line-height: 1; pointer-events: none; } .site-search-submit { /* visually-hidden submit (kept for a11y) */ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* ------------------------------------------------------------ * 4. SITE MENU WRAPPER * * On desktop this is transparent: `display: contents` dissolves * its own box so the search + nav lay out as direct children of * the masthead, exactly as before. On mobile it becomes the * sliding drawer (section 7). * ---------------------------------------------------------- */ .site-menu { display: contents; } /* The panel is given tabindex="-1" by menu.js so focus can be moved into the drawer on open without targeting the search field. It is a container, not a control, so it shouldn't show a focus ring. */ .site-menu:focus { outline: none; } /* Close (×) button — injected into the panel by menu.js. Hidden by default (and on desktop, where the panel is display:contents); shown only inside the mobile drawer (see section 8). */ .nav-close { display: none; } .nav-close-x { position: relative; display: block; width: 1.05rem; height: 1.05rem; } .nav-close-x::before, .nav-close-x::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1.5px; background: currentColor; border-radius: 2px; } .nav-close-x::before { transform: translateY(-50%) rotate(45deg); } .nav-close-x::after { transform: translateY(-50%) rotate(-45deg); } /* ------------------------------------------------------------ * 5. PRIMARY NAV — desktop. Sliding underline on hover/current. * ---------------------------------------------------------- */ .site-nav { flex: 0 0 auto; display: flex; align-items: center; gap: 1.85rem; font-family: var(--font-ui); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.16em; } .site-nav a { position: relative; color: var(--ink-muted); text-decoration: none; padding: 0.35rem 0; border: 0; transition: color 200ms ease; } /* Underline drawn as a pseudo-element so it can grow from the left rather than the whole-width border snapping on/off. */ .site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--ink); transform: scaleX(0); transform-origin: left center; transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1); } .site-nav a:hover { color: var(--ink); } .site-nav a:hover::after { transform: scaleX(1); } .site-nav a[aria-current="page"] { color: var(--ink); } .site-nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--accent); } /* ------------------------------------------------------------ * 6. HAMBURGER TOGGLE — hidden on desktop, three bars that * fold into an X when the drawer is open. * ---------------------------------------------------------- */ .nav-toggle { display: none; /* shown only at the mobile breakpoint */ flex: 0 0 auto; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; padding: 0; cursor: pointer; background: none; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink); transition: border-color 200ms ease, background-color 200ms ease; } .nav-toggle:hover { border-color: var(--ink); } .nav-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); } .nav-toggle-bars { position: relative; display: block; width: 1.1rem; height: 0.7rem; } .nav-toggle-bars span { position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1), opacity 160ms ease; } .nav-toggle-bars span:nth-child(1) { top: 0; } .nav-toggle-bars span:nth-child(2) { top: 50%; transform: translateY(-50%); } .nav-toggle-bars span:nth-child(3) { bottom: 0; } .site-masthead[data-nav-open] .nav-toggle-bars span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); } .site-masthead[data-nav-open] .nav-toggle-bars span:nth-child(2) { opacity: 0; } .site-masthead[data-nav-open] .nav-toggle-bars span:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); } /* ------------------------------------------------------------ * 7. SCRIM — dim layer behind the open drawer. * ---------------------------------------------------------- */ .nav-scrim { position: fixed; inset: 0; z-index: 990; background: rgba(0, 0, 0, 0.42); opacity: 0; pointer-events: none; transition: opacity 260ms ease; } .nav-scrim[hidden] { display: block; } /* keep it animatable; visibility via opacity */ .site-masthead[data-nav-open] ~ .nav-scrim, .site-masthead[data-nav-open] .nav-scrim { opacity: 1; pointer-events: auto; } /* ============================================================ * 8. MOBILE — the slide-in drawer. Engages only with JS * (html.pw-js) so non-JS users keep a working stacked nav. * ============================================================ */ @media (max-width: 860px) { /* ---- 8a. No-JS fallback: a plain, usable stacked nav. ---- */ .site-masthead-inner { flex-wrap: wrap; row-gap: 0.9rem; } .site-search { order: 3; flex: 1 0 100%; max-width: none; } /* ---- 8b. JS present: hamburger + drawer take over. ---- */ html.pw-js .nav-toggle { display: inline-flex; } /* CRITICAL: drop the backdrop-filter here. An element with backdrop-filter / filter / transform becomes the containing block for its position:fixed descendants — which would clamp the drawer and scrim to the masthead's ~60px box instead of the viewport. Removing it on mobile lets them size to the screen. The blur is a desktop-only flourish anyway; a solid bar reads better on a phone. */ html.pw-js .site-masthead { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--paper); } /* Lift the whole header stacking context above page content while the drawer is open, so the overlay reliably covers anything a page might stack on its own. */ html.pw-js .site-masthead[data-nav-open] { z-index: 1000; } html.pw-js .site-masthead-inner { flex-wrap: nowrap; gap: 1rem; } /* Close (×) button: top-right of the panel, sitting roughly where the hamburger was, in the panel's top padding. */ html.pw-js .site-menu .nav-close { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 0.85rem; right: 1.1rem; width: 2.75rem; height: 2.75rem; padding: 0; cursor: pointer; background: none; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink); transition: border-color 200ms ease, background-color 200ms ease; } html.pw-js .site-menu .nav-close:hover { border-color: var(--ink); } html.pw-js .site-menu .nav-close:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); } /* The wrapper becomes the panel. */ html.pw-js .site-menu { display: flex; flex-direction: column; gap: 0; position: fixed; top: 0; right: 0; bottom: 0; z-index: 1000; width: min(86vw, 21rem); padding: 5.25rem 1.6rem 2rem; background: var(--paper); border-left: 1px solid var(--rule); box-shadow: -24px 0 48px -28px rgba(0, 0, 0, 0.55); overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1); } html.pw-js .site-masthead[data-nav-open] .site-menu { transform: translateX(0); } /* Search sits at the top of the drawer, full width. */ html.pw-js .site-menu .site-search { order: 0; flex: 0 0 auto; width: 100%; max-width: none; margin: 0 0 1.5rem; } html.pw-js .site-menu .site-search-input { padding-top: 0.6rem; padding-bottom: 0.6rem; } /* Links stack large and quiet, separated by hairlines. */ html.pw-js .site-menu .site-nav { flex-direction: column; align-items: stretch; gap: 0; font-size: 0.82rem; letter-spacing: 0.18em; } html.pw-js .site-menu .site-nav a { padding: 0.95rem 0; border-bottom: 1px solid var(--rule); color: var(--ink); } html.pw-js .site-menu .site-nav a::after { display: none; } html.pw-js .site-menu .site-nav a[aria-current="page"] { color: var(--accent); } /* ---- 8c. Theme picker, folded into the drawer. ---- theme.js appends #nav-settings (the ⋮ button) and #nav-settings-menu inside .site-nav. In the drawer we hide the toggle button and present the theme choices inline, always open, under a labelled heading. */ html.pw-js .site-menu .nav-settings-btn { display: none; } html.pw-js .site-menu .nav-settings-menu, html.pw-js .site-menu .nav-settings-menu[hidden] { display: block; position: static; margin: 1.5rem 0 0; padding: 0; min-width: 0; border: 0; box-shadow: none; background: none; } html.pw-js .site-menu .nav-settings-section { margin-top: 0; } } /* Phone: trim masthead padding so the bar stays slim. */ @media (max-width: 520px) { .site-masthead { padding: 0.9rem 1.1rem; } html.pw-js .site-masthead-inner { gap: 0.75rem; } .site-brand .mark { font-size: 1.25rem; } .site-brand .name { font-size: 1.18rem; } } /* Lock background scroll while the drawer is open (class set by menu.js on ). */ html.pw-nav-open { overflow: hidden; } /* ------------------------------------------------------------ * 9. SETTINGS DROPDOWN — desktop popover restyle (matches the * pill/soft-shadow language above). Mobile presentation is * handled in section 8c. * ---------------------------------------------------------- */ .nav-settings-btn { cursor: pointer; background: none; border: none; color: var(--ink-muted); font-family: var(--font-display); font-size: 1.3rem; line-height: 1; padding: 0 0.2rem; transition: color 200ms ease; } .nav-settings-btn:hover, .nav-settings-btn[aria-expanded="true"] { color: var(--ink); } .nav-settings-menu { position: absolute; top: calc(100% + 0.7rem); right: 0; z-index: 200; min-width: 14rem; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-lg, 12px); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.45); padding: 1rem 1.1rem 1.1rem; } .nav-settings-menu[hidden] { display: none; } .nav-settings-section { font-family: var(--font-ui); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 0.6rem; } .nav-settings-themes { display: inline-flex; width: 100%; border: 1px solid var(--rule); border-radius: 999px; overflow: hidden; } .nav-settings-themes button { flex: 1; cursor: pointer; background: none; border: none; color: var(--ink-muted); font-family: var(--font-ui); font-size: 0.74rem; letter-spacing: 0.04em; padding: 0.5rem 0.6rem; transition: background-color 150ms ease, color 150ms ease; } .nav-settings-themes button + button { border-left: 1px solid var(--rule); } .nav-settings-themes button:hover { color: var(--ink); } .nav-settings-themes button[aria-checked="true"] { background: var(--ink); color: var(--paper); } /* ------------------------------------------------------------ * 10. Respect reduced-motion: kill transitions/animations but * keep the open/close state changes instant and functional. * ---------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .site-masthead, .site-nav a::after, .nav-toggle-bars span, .nav-scrim, html.pw-js .site-menu, .site-brand .mark { transition: none !important; } }