/* public/css/nav.css Single-row, centered links; logo left; search+toggle+auth right. Theme-safe (uses your CSS variables). Sticky so it stays clickable. */ .header, .site-topbar, .topbar, nav[role="navigation"] { position: sticky; top: 0; z-index: 1000; backdrop-filter: saturate(120%) blur(6px); } .topbar { --h-pad: 20px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 12px var(--h-pad); background: color-mix(in oklab, var(--surface, #fff) 90%, transparent); border-bottom: 1px solid var(--surface-2, rgba(0,0,0,.06)); } /* Common rows */ .topbar .row { display: flex; align-items: center; gap: 10px; } /* Brand (left) */ .topbar .brand { text-decoration: none; gap: 8px; } .topbar .brand img { border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,.05); } .topbar .brand-name { font-weight: 700; color: var(--ink, currentColor); } /* Center links */ .topbar .nav-links { list-style: none; margin: 0; padding: 0; justify-content: center; gap: 18px; flex-wrap: nowrap; } .topbar .nav-links a { text-decoration: none; color: var(--ink-2, currentColor); padding: 6px 8px; border-radius: 8px; } .topbar .nav-links a:hover { background: var(--surface-2, rgba(0,0,0,.06)); } /* Right actions */ .topbar .actions { gap: 10px; } /* Search */ .topbar .nav-search { gap: 8px; } .topbar .nav-search .input { width: clamp(180px, 28vw, 340px); /* shorter than before */ } /* Toggle button (compact) */ .topbar .icon-btn { width: 34px; height: 34px; padding: 0; border-radius: 10px; display: inline-grid; place-items: center; } /* Make auth buttons balanced */ .topbar .btn.equal, .topbar .btn { min-height: 34px; } .topbar .btn.equal { min-width: 132px; } /* Login & Create account similar width */ /* The brand must never be squeezed out of existence. THE BUG THIS FIXES: site.css sets a global `img { max-width: 100% }`. The brand sat in an `auto` grid column, and once the right-hand actions column overflowed the viewport the brand column was squeezed to zero — at which point max-width:100% resolved the logo to 0px wide. Measured at 390px: the logo was 0×36 with a natural size of 150×150. The header looked ABSENT on a phone while being perfectly present in the DOM. An explicit size plus flex:0 0 auto makes that collapse impossible. */ .topbar .brand { min-width: 0; flex: 0 0 auto; } .topbar .brand img { width: 28px; height: 28px; max-width: none; flex: 0 0 auto; } /* Grid children may shrink below min-content; without this a long word or a wide input forces the whole bar wider than the viewport. */ .topbar > * { min-width: 0; } /* Desktop: the wrapper is transparent to layout, so .nav-links and .actions remain direct grid items of .topbar exactly as before. */ .nav-collapse { display: contents; } /* Mobile menu button — hidden until the drawer breakpoint. */ .nav-toggle { display: none; place-items: center; width: 44px; /* full 44px touch target */ height: 44px; padding: 0; border: 1px solid var(--border, rgba(0,0,0,.1)); border-radius: 12px; background: var(--surface, #fff); color: var(--ink, currentColor); cursor: pointer; } .nav-toggle__x { display: none; } body.nav-open .nav-toggle__bars { display: none; } body.nav-open .nav-toggle__x { display: inline; } .nav-scrim { display: none; } /* ---------- Theme toggle ---------- Icon swap is driven entirely by [data-theme] on , which head.ejs sets before any stylesheet loads — so the right icon is painted on the first frame, with no flash and no dependency on JS having run. The icon shows the DESTINATION: moon while light, sun while dark. */ .theme-icon { display: none; } :root:not([data-theme="dark"]) .theme-icon--moon { display: inline; } :root[data-theme="dark"] .theme-icon--sun { display: inline; } .js-theme-toggle { color: var(--ink, currentColor); } .topbar .icon-btn.js-theme-toggle { display: inline-grid; place-items: center; } /* Bar-level toggle: mobile and tablet only. */ .theme-toggle-bar { display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--border, rgba(0,0,0,.1)); border-radius: 12px; background: var(--surface, #fff); color: var(--ink, currentColor); cursor: pointer; } /* ---------- Responsive ---------- */ /* Tablet / small laptop: all three groups still fit in one row, but only just. Measured at 834px the wordmark squeezed the brand link to 6px wide while its logo overflowed — visibly clipped. Icon-only branding here; the wordmark returns in the drawer below 769px, where there is a full row for it. */ @media (max-width: 980px) { .topbar { --h-pad: 14px; gap: 10px; } .topbar .nav-links { gap: 14px; } .topbar .nav-search .input { width: clamp(140px, 24vw, 220px); } .topbar .brand-name { display: none; } /* Touch targets. These need `.topbar` specificity to win: the base rule above is `.topbar .btn { min-height: 34px }`, which outranks a bare `.btn` rule in site.css — the reason the buttons still measured 36-40px on an iPad after the generic touch block was added. */ .topbar .btn, .topbar .nav-search .btn, .topbar #auth-guest .btn, .topbar #auth-user .btn { min-height: 44px; } .topbar .icon-btn { width: 44px; height: 44px; } .topbar .nav-search .input { min-height: 44px; } /* Below 981px the bar-level toggle takes over and the in-actions one is retired, so there is never a second theme control inside the drawer. */ .theme-toggle-bar { display: inline-grid; } .topbar #themeToggle { display: none; } /* brand | ...spacer... | theme | (hamburger, added at <=768px) */ .topbar { grid-template-columns: auto 1fr auto auto; } } /* ---------- Drawer (phones and small tablets) ---------- The bar itself carries only the brand and the menu button, so it cannot overflow no matter how long the brand or how many actions exist. Everything else moves into a panel below it. */ @media (max-width: 768px) { /* brand | theme | menu — the DFM pattern: the theme control lives in the bar beside the hamburger, never inside the menu it opens. */ .topbar { grid-template-columns: 1fr auto auto; row-gap: 0; padding: 10px 14px; } /* Branding stays VISIBLE on mobile — wordmark included. Hiding it was the other half of "no logo on iPhone". */ .topbar .brand-name { display: inline; font-size: 1.02rem; } .nav-toggle { display: inline-grid; } /* The drawer. A real grid item spanning both columns on the second row, so it opens directly beneath the bar and pushes nothing sideways. */ .nav-collapse { display: none; grid-column: 1 / -1; flex-direction: column; align-items: stretch; gap: 6px; margin: 10px -14px -10px; /* bleed to the bar's edges */ padding: 8px 14px 14px; border-top: 1px solid var(--border, rgba(0,0,0,.08)); background: var(--surface, #fff); max-height: calc(100vh - 64px); overflow-y: auto; -webkit-overflow-scrolling: touch; } body.nav-open .nav-collapse { display: flex; } /* Links become a full-width stacked list with 44px rows. */ .topbar .nav-links { flex-direction: column; align-items: stretch; gap: 2px; width: 100%; } .topbar .nav-links a { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; font-size: 1.05rem; } /* Search stays reachable — it is the first thing in the drawer. */ .topbar .actions { flex-direction: column; align-items: stretch; gap: 8px; width: 100%; } .topbar .nav-search { width: 100%; } .topbar .nav-search .input { width: 100%; min-width: 0; font-size: 16px; /* iOS zooms focused inputs under 16px */ min-height: 44px; } .topbar .actions .btn, .topbar .nav-search .btn { min-height: 44px; } .topbar .btn.equal { min-width: 0; } .topbar #auth-guest, .topbar #auth-user { width: 100%; } .topbar #auth-guest .btn, .topbar #auth-user .btn { flex: 1; } .topbar .icon-btn { width: 44px; height: 44px; } /* Tap-away layer beneath the drawer. */ .nav-scrim { display: block; position: fixed; inset: 0; z-index: 900; /* under .topbar (1000), over the page */ background: rgba(0, 0, 0, .28); } .nav-scrim[hidden] { display: none; } }