.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 56px; display: flex; align-items: center; background: rgba(255, 255, 255, 0.86); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(23,23,23,0.08); font-family: var(--font-ui); /* Snappier swap when theme flips — the long fade made the dark nav linger over the white closing section. */ transition: background-color 120ms linear, border-color 120ms linear, color 120ms linear; } .nav__inner { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--space-7); } .nav__brand { display: inline-flex; align-items: center; height: 100%; flex: 0 0 auto; color: var(--ink); } .nav__brand-logo { display: block; width: 62px; height: auto; transition: opacity var(--dur-fast) var(--ease), transform var(--dur-base) var(--ease), filter var(--dur-base) var(--ease); } .nav__brand:hover .nav__brand-logo { opacity: 0.85; transform: scale(1.04); } .nav__brand:active .nav__brand-logo { transform: scale(0.98); } body[data-theme="dark"] .nav__brand-logo { filter: invert(1); } .nav__links { display: flex; align-items: center; gap: clamp(24px, 2.4vw, 42px); } .nav__link { position: relative; font-size: var(--type-small); font-weight: var(--weight-bold); letter-spacing: 0; white-space: nowrap; color: var(--ink-secondary); transition: color var(--dur-fast) var(--ease); } .nav__link::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 1.5px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-base) var(--ease); } .nav__link:hover { color: var(--ink); } .nav__link:hover::after { transform: scaleX(1); } .nav__link--cta { color: var(--ink); font-weight: var(--weight-semibold); gap: 4px; display: inline-flex; align-items: center; white-space: nowrap; transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .nav__link--cta::after { display: none; } .nav__link--cta:hover { transform: translateX(2px); } /* Language toggle (中 / EN). Highlights the active language; clicking flips data-lang on . */ .nav__lang { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; background: rgba(23,23,23,0.05); font-size: 12px; font-weight: var(--weight-bold); letter-spacing: 0; color: var(--ink-secondary); transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .nav__lang:hover { background: rgba(0,0,0,0.08); color: var(--ink); } .nav__lang:active { transform: scale(0.96); } .nav__lang-sep { opacity: 0.4; font-weight: var(--weight-regular); } .nav__lang [data-lang-zh], .nav__lang [data-lang-en] { transition: color var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease); } [data-lang="zh"] .nav__lang [data-lang-zh], [data-lang="en"] .nav__lang [data-lang-en] { color: var(--ink); } [data-lang="zh"] .nav__lang [data-lang-en], [data-lang="en"] .nav__lang [data-lang-zh] { opacity: 0.7; } body[data-theme="dark"] .nav__lang { background: rgba(255,255,255,0.08); color: var(--ink-on-dark-sec); } body[data-theme="dark"] .nav__lang:hover { background: rgba(255,255,255,0.14); color: var(--ink-on-dark); } body[data-theme="dark"][data-lang="zh"] .nav__lang [data-lang-zh], body[data-theme="dark"][data-lang="en"] .nav__lang [data-lang-en] { color: var(--ink-on-dark); } /* Dark theme nav (when body[data-theme="dark"]) */ body[data-theme="dark"] .nav { background: rgba(0,0,0,0.72); border-bottom-color: rgba(255,255,255,0.10); color: var(--ink-on-dark); } body[data-theme="dark"] .nav__brand { color: var(--ink-on-dark); } body[data-theme="dark"] .nav__link { color: var(--ink-on-dark-sec); } body[data-theme="dark"] .nav__link:hover { color: var(--ink-on-dark); } body[data-theme="dark"] .nav__link--cta { color: var(--ink-on-dark); } @media (max-width: 640px) { .nav, body[data-theme="dark"] .nav { height: 56px; border-bottom-color: transparent; } .nav__inner { padding-inline: clamp(20px, 6vw, 28px); gap: var(--space-4); } .nav__brand-logo { width: 58px; } .nav__links { gap: clamp(14px, 4vw, 20px); } .nav__link { font-size: 14px; } .nav__link--secondary { display: none; } .nav__lang { height: 28px; padding-inline: 9px; font-size: 12px; } } @media (max-width: 360px) { .nav__inner { padding-inline: 16px; gap: var(--space-3); } }