/* Canonical Kronaxis navigation — self-contained. Source of truth for the markup + link set is includes/nav.php; this stylesheet is a portable copy of the nav rules from css/style.css (.nav, .nav__*, mobile) and the language-switcher rules from css/i18n.css, with every design token replaced by its literal value so the file can sit on the standalone landing pages (which do NOT load style.css) without depending on or polluting their own tokens. Difference from the PHP pages: position is sticky here (reserves its own space) rather than fixed, so no per-page body padding is needed and the bar never overlaps the hero. If this changes, change includes/nav.php first, then mirror it here. */ /* layout — scoped under .nav so a page's own .container (if any) is untouched */ .nav .container { max-width: 1140px; margin: 0 auto; padding: 0 1.5rem; } /* ── Navigation ── */ /* The nav is wrapped in a bare

that is a direct child of . Making that header the sticky element (not the .nav inside it) gives sticky the whole page to travel; sticky on .nav alone would be trapped inside the 64px-tall header. :has is widely supported; where it is not, the bar simply stays in flow and scrolls away. */ header:has(> nav.nav) { position: sticky; top: 0; z-index: 100; } .nav { position: relative; background: rgba(10,12,15,0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid #21262d; } .nav__inner { display: flex; align-items: center; justify-content: space-between; height: 64px; } .nav__logo { display: flex; align-items: center; gap: 0.5rem; color: #f0f6fc; font-weight: 700; font-size: 1.1rem; letter-spacing: -0.02em; text-decoration: none; } .nav__logo-mark { width: 28px; height: 28px; background: #e36d2a; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 800; color: #0a0c0f; font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; } .nav__links { display: flex; align-items: center; gap: 0.9rem; margin-left: 1.25rem; list-style: none; margin-bottom: 0; padding-left: 0; } .nav__links li { margin: 0; } .nav__links a { color: #6e7681; font-size: 0.9rem; font-weight: 500; white-space: nowrap; text-decoration: none; transition: color 0.2s ease; } .nav__links a:hover { color: #f0f6fc; } .nav__cta { background: #e36d2a; color: #0a0c0f !important; padding: 0.45rem 1.1rem; border-radius: 4px; font-weight: 600 !important; font-size: 0.875rem !important; } .nav__cta:hover { background: #b85520 !important; color: #f0f6fc !important; } /* ── Nav dropdown ── */ .nav__dropdown { position: relative; } .nav__dropdown-trigger { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; } .nav__dropdown-arrow { transition: transform 0.2s ease; } .nav__dropdown:hover .nav__dropdown-arrow { transform: rotate(180deg); } .nav__dropdown-menu { display: none; position: absolute; top: 100%; left: -0.75rem; background: #161b22; border: 1px solid #21262d; border-radius: 8px; padding: 0.5rem 0; min-width: 180px; padding-top: 1rem; z-index: 110; box-shadow: 0 8px 24px rgba(0,0,0,0.4); list-style: none; } .nav__dropdown:hover .nav__dropdown-menu { display: block; } .nav__dropdown-menu li { padding: 0; margin: 0; } .nav__dropdown-menu a { display: block; padding: 0.5rem 1rem; font-size: 0.85rem; color: #6e7681; text-decoration: none; transition: all 0.2s ease; } .nav__dropdown-menu a:hover { color: #f0f6fc; background: #111418; } .nav__hamburger { display: none; background: none; border: none; cursor: pointer; padding: 0.25rem; } .nav__hamburger span { display: block; width: 22px; height: 2px; background: #c9d1d9; margin: 4px 0; transition: 0.2s ease; } /* ── Language switcher (from i18n.css) ── */ .lang-switcher { position: relative; margin-left: 0.5rem; } .lang-switcher__btn { display: flex; align-items: center; gap: 0.35rem; background: transparent; border: 1px solid #21262d; border-radius: 4px; color: #6e7681; padding: 0.3rem 0.6rem; font-size: 0.78rem; font-weight: 600; cursor: pointer; font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; transition: all 0.2s; } .lang-switcher__btn:hover { border-color: #30363d; color: #c9d1d9; } .lang-switcher__menu { display: none; position: absolute; top: calc(100% + 4px); right: 0; background: #161b22; border: 1px solid #21262d; border-radius: 8px; min-width: 180px; max-height: 400px; overflow-y: auto; z-index: 1000; box-shadow: 0 8px 24px rgba(0,0,0,0.4); padding: 0.35rem; } .lang-switcher:hover .lang-switcher__menu, .lang-switcher__btn:focus + .lang-switcher__menu { display: block; } .lang-switcher__item { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.65rem; color: #c9d1d9; text-decoration: none; border-radius: 4px; font-size: 0.82rem; transition: background 0.15s; } .lang-switcher__item:hover { background: rgba(139,92,246,0.08); } .lang-switcher__item--active { color: #8b5cf6; font-weight: 600; } .lang-switcher__code { font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; font-weight: 700; font-size: 0.72rem; width: 1.5rem; color: #6e7681; } .lang-switcher__item--active .lang-switcher__code { color: #8b5cf6; } /* ── Mobile ── */ @media (max-width: 640px) { .nav__links { display: none; } .nav__links.open { display: flex; flex-direction: column; position: absolute; top: 64px; left: 0; right: 0; background: #111418; border-bottom: 1px solid #21262d; padding: 1.5rem; gap: 1.25rem; } .nav__hamburger { display: block; } .nav__dropdown-menu { position: static; display: none; margin-top: 0.5rem; box-shadow: none; background: #111418; border: none; padding-left: 1rem; } .nav__dropdown.open .nav__dropdown-menu { display: block; } } @media (max-width: 900px) { .lang-switcher__menu { right: 0; left: auto; } }