/* * chrome.css — shared styles for the site-wide nav + footer. * Single source of truth, paired with partials/nav.html and partials/footer.html. * Linked last in by scripts/build.js so it normalizes the chrome on every * page regardless of each page's inline styles. Relies on the CSS custom * properties (--paper, --accent, --ink, etc.) that every page defines in :root. */ /* ── Nav ─────────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 50; padding: 16px 0; background: var(--paper); background: color-mix(in oklab, var(--paper) 60%, transparent); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid transparent; transition: border-color 0.2s; } .nav.scrolled { border-bottom-color: var(--rule); } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .nav-logo img { height: 64px; width: auto; display: block; } .nav-links { display: flex; gap: 4px; align-items: center; } .nav-links a { padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; transition: background 0.15s, color 0.15s; } .nav-links a:hover { background: rgba(26,18,36,0.06); color: var(--ink); } .nav-links a.active { color: var(--accent); background: rgba(54,87,58,0.08); } .nav-burger { display: none; background: none; border: none; cursor: pointer; padding: 8px; color: var(--ink); margin-left: auto; } .mobile-menu { display: none; position: fixed; top: 76px; left: 0; right: 0; background: var(--paper); background: color-mix(in oklab, var(--paper) 95%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); z-index: 49; padding: 8px var(--pad-x) 20px; max-height: calc(100vh - 76px); overflow-y: auto; } .mobile-menu.open { display: block; } .mobile-menu a { display: block; padding: 16px 4px; font-size: 16px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--rule); } .mobile-menu a:last-child { border-bottom: none; } @media (max-width: 1024px) { .nav-links, .nav-actions { display: none; } .nav-burger { display: block; } } /* ── Footer ──────────────────────────────────────────── */ footer { background: var(--paper-tint); padding: 64px 0 32px; } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 40px; border-bottom: 1px solid var(--rule); } .footer-brand p { font-size: 13.5px; line-height: 1.6; margin-top: 14px; color: var(--ink-soft); max-width: 32ch; } .footer-col h5 { font-family: var(--sans); font-size: 12px; color: var(--ink-faint); margin: 0 0 18px; font-weight: 700; } .footer-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; } .footer-col a { font-size: 13.5px; color: var(--ink-soft); transition: color 0.15s; } .footer-col a:hover { color: var(--ink); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; font-family: var(--sans); font-size: 12px; color: var(--ink-faint); } @media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } }