.site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: #fff; border-bottom: 1px solid #dadce0; box-shadow: 0 1px 3px rgba(0,0,0,.08); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } .site-nav__inner { max-width: 1100px; margin: 0 auto; padding: 0 16px; height: 48px; display: flex; align-items: center; gap: 8px; } .site-nav__logo { font-weight: 800; font-size: 1rem; color: #1a73e8; text-decoration: none; letter-spacing: -0.3px; white-space: nowrap; margin-right: 8px; } .site-nav__links { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; flex: 1; } .site-nav__link { font-size: 0.875rem; font-weight: 500; color: #5f6368; text-decoration: none; padding: 6px 12px; border-radius: 6px; white-space: nowrap; transition: background 0.15s, color 0.15s; } .site-nav__link:hover { background: #f1f3f4; color: #1a1a1a; } .site-nav__link--active { background: #e8f0fe; color: #1a73e8; font-weight: 600; } .site-nav__toggle { display: none; margin-left: auto; background: none; border: none; font-size: 1.25rem; cursor: pointer; padding: 6px 8px; color: #5f6368; line-height: 1; } @media (max-width: 600px) { .site-nav__toggle { display: block; } .site-nav__links { display: none; position: absolute; top: 48px; left: 0; right: 0; background: #fff; border-bottom: 1px solid #dadce0; padding: 8px 16px 12px; flex-direction: column; gap: 2px; box-shadow: 0 4px 8px rgba(0,0,0,.08); } .site-nav__links--open { display: flex; } .site-nav__link { padding: 10px 12px; } } /* Theme toggle button */ .site-nav__theme { background: none; border: none; font-size: 1.1rem; cursor: pointer; padding: 4px 6px; border-radius: 6px; line-height: 1; margin-left: auto; transition: background 0.15s; } .site-nav__theme:hover { background: #f1f3f4; } /* Dark mode — activated by data-theme="dark" on */ [data-theme="dark"] .site-nav { background: #1a1a2e; border-bottom-color: #2a2a3e; box-shadow: 0 1px 3px rgba(0,0,0,.4); } [data-theme="dark"] .site-nav__logo { color: #4a9eff; } [data-theme="dark"] .site-nav__link { color: #9aa0a6; } [data-theme="dark"] .site-nav__link:hover { background: #2a2a3e; color: #e2e8f0; } [data-theme="dark"] .site-nav__link--active { background: #1e2a4a; color: #4a9eff; } [data-theme="dark"] .site-nav__toggle, [data-theme="dark"] .site-nav__theme { color: #9aa0a6; } [data-theme="dark"] .site-nav__theme:hover { background: #2a2a3e; } [data-theme="dark"] .site-nav__links { background: #1a1a2e; border-bottom-color: #2a2a3e; }