/* Raconteur Road — shared responsive navigation. One file, loaded on every page AFTER that page's own stylesheet, so these rules win on small screens. The desktop nav (wordmark left, mono link row right) is untouched; at <=600px the link row collapses into a hamburger dropdown. Progressive enhancement: nav.js adds .js-nav to and injects the .nav-toggle button. With JS off, the inline .nav-links stay visible (the desktop row) so navigation is never lost — it just wraps. Palette vars (--paper/--rule/--ink/--quiet/--accent) come from each page's CSS :root; fallbacks are inlined here so this file stands alone. */ .nav-toggle { display: none; /* shown only on mobile, only when JS present */ align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; margin: 0 -0.5rem 0 0; /* nudge to the header's right padding edge */ padding: 0; background: transparent; border: none; cursor: pointer; color: var(--ink, #1a1a1a); -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; } /* The icon: a centre bar plus two pseudo-bars. Morphs to an × when open. */ .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 21px; height: 1.5px; background: currentColor; border-radius: 1px; transition: transform 0.18s ease, opacity 0.18s ease, background 0.18s ease; } .nav-toggle-bars { position: relative; } .nav-toggle-bars::before { content: ""; position: absolute; left: 0; top: -6px; } .nav-toggle-bars::after { content: ""; position: absolute; left: 0; top: 6px; } .nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; } .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); } @media (max-width: 600px) { /* Normalise the header bar across every surface. Each page set its own mobile header geometry: home used 60px tall / 1.5rem side padding / 1.25rem wordmark, while book, journeys, papers and tracks used tighter and differing values (52px, 0.75rem padding, and tracks even shrank the wordmark to 1rem). That made the bar — and the hamburger's distance from the edge — jump between pages. Pin them all to home's geometry so the bar is identical everywhere. tracks offsets its map by --header-h, so keep that variable in step with the height here. */ .js-nav .site-header, .js-nav body > header { height: 60px; padding-left: 1.5rem; padding-right: 1.5rem; } :root { --header-h: 60px; } .js-nav .site-header .wordmark, .js-nav body > header .wordmark { font-size: 1.25rem; } /* Show the toggle; the inline link row becomes a dropdown panel that is anchored to the header (nav.js sets the header to position: relative when it isn't already positioned — tracks' fixed header is left alone). Taking .nav-links out of flow also removes it as a cause of the header overflowing the viewport. */ .js-nav .nav-toggle { display: inline-flex; } .js-nav .nav-links { position: absolute; top: 100%; right: 0; left: auto; min-width: 12rem; display: none; flex-direction: column; align-items: stretch; margin: 0; padding: 0.25rem 0; background: var(--paper, #fafaf8); border: 1px solid var(--rule, #d8d3c8); border-top: none; border-radius: 0 0 3px 3px; box-shadow: 0 12px 26px rgba(0, 0, 0, 0.14); z-index: 50; } .js-nav .nav-links.open { display: flex; } .js-nav .nav-links a { margin: 0; padding: 0.85rem 1.15rem; font-size: 0.9rem; color: var(--quiet, #4a4a4a); border-bottom: 1px solid var(--rule, #d8d3c8); } .js-nav .nav-links a:last-child { border-bottom: none; } /* The desktop active style is a 2px underline — wrong when the links are stacked. Replace it with a left accent marker. */ .js-nav .nav-links a.active { color: var(--ink, #1a1a1a); font-weight: 600; border-bottom: 1px solid var(--rule, #d8d3c8); padding-bottom: 0.85rem; box-shadow: inset 3px 0 0 var(--accent, #6b5d4f); } .js-nav .nav-links a.active:last-child { border-bottom: none; } } @media (prefers-reduced-motion: reduce) { .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { transition: none; } } /* ---- site-wide footer (injected by nav.js): "Follow the road" + IG/YouTube ---- Paper/ink, var-with-fallback like the rest of this file. No pop-ups. */ .site-footer { border-top: 1px solid var(--rule, #d8d3c8); background: var(--paper, #fafaf8); margin-top: 4rem; padding: 2.6rem 1.5rem; } .foot-inner { max-width: 30rem; margin: 0 auto; text-align: center; } .foot-label { display: block; font-family: 'Newsreader', Georgia, 'Times New Roman', serif; font-size: 1.35rem; color: var(--ink, #1a1a1a); margin-bottom: 1rem; } .foot-row { display: flex; gap: 0.5rem; max-width: 24rem; margin: 0 auto; } .foot-row input { flex: 1; min-width: 0; font-family: 'Newsreader', Georgia, serif; font-size: 1rem; padding: 0.6rem 0.8rem; border: 1px solid var(--rule, #d8d3c8); border-radius: 4px; background: #fff; color: var(--ink, #1a1a1a); } .foot-row input:focus { outline: none; border-color: var(--accent, #6b5d4f); } .foot-row button { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.78rem; padding: 0.6rem 1.1rem; border: 1px solid var(--ink, #1a1a1a); border-radius: 4px; background: var(--ink, #1a1a1a); color: var(--paper, #fafaf8); cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; } .foot-row button:hover { background: var(--accent, #6b5d4f); border-color: var(--accent, #6b5d4f); color: var(--paper, #fafaf8); } .foot-msg { min-height: 1.1em; margin-top: 0.5rem; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.72rem; color: var(--quiet, #5b5347); } .foot-links { margin-top: 1.3rem; display: flex; gap: 0.6rem; justify-content: center; align-items: center; } .foot-social { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--rule, #d8d3c8); color: var(--quiet, #5b5347); background: transparent; transition: border-color 0.15s, color 0.15s, background 0.15s; } .foot-social svg { width: 18px; height: 18px; display: block; } .foot-social:hover { border-color: var(--amber, #a87a3c); color: var(--amber, #a87a3c); background: var(--paper-warm, #f1ece1); } .foot-note { margin-top: 1.1rem; font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 0.86rem; color: var(--quiet, #5b5347); line-height: 1.6; } @media (max-width: 600px) { .foot-row { flex-direction: column; } } /* === Button system (2026-06-26) — one rollover per type. nav.css loads AFTER each page's own CSS, so these win sitewide. Primary = solid ink, fills amber on hover (dark text); Secondary = outline chip/card, keeps its outline and warms to amber. === */ .foot-row button:hover, .explore-go:hover, .explore-open:hover, .paper-action:hover, .explore-link:hover, .explore-link:focus-visible { background: var(--amber, #a87a3c); border-color: var(--amber, #a87a3c); color: var(--ink, #1a1a1a); opacity: 1; } .explore-link:hover .explore-link-label, .explore-link:hover .explore-link-sub, .explore-link:focus-visible .explore-link-label, .explore-link:focus-visible .explore-link-sub { color: var(--ink, #1a1a1a); } .road-chip:hover, .chip:hover, .chapter-chip:hover, .trip-card:hover, .explore-browse:hover { border-color: var(--amber, #a87a3c); color: var(--amber, #a87a3c); background: var(--paper-warm, #f1ece1); } /* "Follow" CTA in the header (primary button). The wordmark margin keeps the nav links + Follow grouped on the right across the varied page headers. */ .site-header .wordmark, body > header .wordmark { margin-right: auto; } .nav-follow { margin-left: 1rem; flex: none; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.72rem; padding: 0.4rem 0.85rem; cursor: pointer; background: var(--ink, #1a1a1a); color: var(--paper, #fafaf8); border: 1px solid var(--ink, #1a1a1a); border-radius: 4px; transition: background 0.15s, border-color 0.15s, color 0.15s; } .nav-follow:hover { background: var(--amber, #a87a3c); border-color: var(--amber, #a87a3c); color: var(--ink, #1a1a1a); }