/* ──────────────────────────────────────────────────────────── * Cosmos Header — shared across all pages * Self-contained: defines its own color tokens via .cosmos-header * Light/dark via [data-theme] on * ────────────────────────────────────────────────────────── */ .cosmos-header{ /* scoped tokens — independent of page palette */ --ch-bg:#FAF7EE; --ch-bg-card:#FFFFFF; --ch-ink:#141828; --ch-ink-2:#3A3F55; --ch-ink-3:#6F7387; --ch-line:#E5DFC8; --ch-nebula:#6D5DD5; --ch-orbit:#A8AAB8; position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--ch-bg) 82%, transparent); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--ch-line); transition:background-color .35s ease, border-color .35s ease; font-family:"Inter","Noto Sans SC",-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",sans-serif; } [data-theme="dark"] .cosmos-header{ --ch-bg:#0A0E1A; --ch-bg-card:#141B2E; --ch-ink:#EDE8DA; --ch-ink-2:#C5C0AE; --ch-ink-3:#8A8678; --ch-line:#252E47; --ch-nebula:#A78BFA; --ch-orbit:#3F4458; } .cosmos-header .header-wrapper{max-width:1180px; margin:0 auto; padding:1.1rem 2rem; background:transparent} .cosmos-header .header-inner{display:flex; align-items:center; justify-content:space-between; gap:2rem; max-width:none; padding:0} .cosmos-header .header-content{display:flex; align-items:center; justify-content:space-between; gap:2rem; max-width:none; padding:0} /* logo */ .cosmos-header .logo{ display:flex; align-items:center; gap:1rem; transition:transform .35s; color:var(--ch-ink); text-decoration:none; font-size:initial; font-weight:initial; background:none !important; -webkit-text-fill-color:initial !important; -webkit-background-clip:initial !important; background-clip:initial !important; } .cosmos-header .logo:hover{transform:translateY(-1px)} .cosmos-header .logo .logo-mark{ width:46px; height:46px; flex-shrink:0; position:relative; border-radius:50%; background:radial-gradient(circle at center, color-mix(in srgb, var(--ch-nebula) 14%, transparent) 0%, transparent 65%); transition:background .35s; } .cosmos-header .logo:hover .logo-mark{background:radial-gradient(circle at center, color-mix(in srgb, var(--ch-nebula) 22%, transparent) 0%, transparent 65%)} .cosmos-header .logo .logo-mark svg{width:100%; height:100%; display:block; overflow:visible} .cosmos-header .logo .logo-mark .lo-orbit{stroke:var(--ch-orbit)} .cosmos-header .logo .logo-text{display:flex; flex-direction:column; line-height:1} .cosmos-header .logo .logo-text .name{font-size:1.4rem; font-weight:700; color:var(--ch-ink); letter-spacing:-.01em; line-height:1} .cosmos-header .logo .logo-text .name .dot{color:var(--ch-nebula); font-weight:400} .cosmos-header .logo .logo-text .sub{font-size:.68rem; color:var(--ch-ink-3); letter-spacing:.18em; text-transform:uppercase; font-weight:500; margin-top:.35rem; display:block} /* nav cluster */ .cosmos-header .nav-container, .cosmos-header .header-tools{display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; justify-content:flex-end} .cosmos-header nav ul{display:flex; align-items:center; gap:1.4rem; list-style:none; margin:0; padding:0} .cosmos-header nav a{ color:var(--ch-ink-2); font-size:.95rem; font-weight:500; padding:.4rem .2rem; border-bottom:2px solid transparent; transition:all .25s; white-space:nowrap; text-decoration:none; background:none; -webkit-text-fill-color:initial; -webkit-background-clip:initial; background-clip:initial; } .cosmos-header nav a:hover{color:var(--ch-nebula); border-bottom-color:var(--ch-nebula); background:none} /* lang switch */ .cosmos-header .lang-switch{ display:flex; gap:.3rem; padding-left:.7rem; border-left:1px solid var(--ch-line); margin-left:.4rem; align-items:center; } .cosmos-header .lang-btn{ padding:.32rem .65rem; border:1px solid var(--ch-line); border-radius:6px; background:var(--ch-bg-card); color:var(--ch-ink-3); cursor:pointer; font-size:.78rem; font-weight:500; letter-spacing:.05em; transition:all .25s; font-family:inherit; -webkit-text-fill-color:initial; } .cosmos-header .lang-btn.active, .cosmos-header .lang-btn:hover{background:var(--ch-nebula); border-color:var(--ch-nebula); color:#fff} /* theme toggle */ .cosmos-header .theme-toggle{ width:2.4rem; height:2.4rem; border:1px solid var(--ch-line); border-radius:8px; background:var(--ch-bg-card); color:var(--ch-ink-2); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:1.05rem; transition:all .25s; font-family:inherit; } .cosmos-header .theme-toggle:hover{border-color:var(--ch-nebula); color:var(--ch-nebula); transform:translateY(-1px)} /* small screens — stack logo + nav vertically. Use html body > header to win specificity. */ @media (max-width: 820px){ html body > header.cosmos-header .header-wrapper, html body > header.cosmos-header .header-content, html body > header.cosmos-header .header-wrapper > .header-inner, html body > header.cosmos-header .header-content > .header-inner{ padding:.85rem 1.1rem !important; flex-direction:column !important; align-items:stretch !important; gap:.75rem !important; flex-wrap:wrap !important; } html body > header.cosmos-header .header-wrapper > .header-inner, html body > header.cosmos-header .header-content > .header-inner{padding:0 !important} html body > header.cosmos-header .logo{align-self:flex-start !important; gap:.7rem !important} html body > header.cosmos-header .logo .logo-text .sub{display:none !important} html body > header.cosmos-header .logo .logo-mark{width:38px !important; height:38px !important} html body > header.cosmos-header .logo .logo-text .name{font-size:1.15rem !important} html body > header.cosmos-header .nav-container, html body > header.cosmos-header .header-tools{ width:100% !important; justify-content:flex-start !important; gap:.55rem !important; flex-wrap:nowrap !important; } html body > header.cosmos-header nav{ flex:1 1 auto !important; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; } html body > header.cosmos-header nav::-webkit-scrollbar{display:none} html body > header.cosmos-header nav ul{gap:.9rem !important; flex-wrap:nowrap !important; padding-bottom:.2rem} html body > header.cosmos-header nav a{font-size:.88rem !important; white-space:nowrap; padding:.35rem .5rem !important; min-height:2.25rem} html body > header.cosmos-header .lang-switch{ border-left:0 !important; padding-left:0 !important; margin-left:0 !important; flex-shrink:0; } html body > header.cosmos-header .theme-toggle{flex-shrink:0} } /* extra-narrow (< 430px) — wrap nav-container and shrink controls */ @media (max-width: 430px){ html body > header.cosmos-header .header-wrapper{padding:.7rem .85rem !important} html body > header.cosmos-header .nav-container{flex-wrap:wrap !important; row-gap:.5rem !important} html body > header.cosmos-header nav{order:1; width:100%; flex:1 1 100% !important} html body > header.cosmos-header .theme-toggle{order:2; width:2rem !important; height:2rem !important; font-size:.9rem !important} html body > header.cosmos-header .lang-switch{order:3; margin-left:auto !important} html body > header.cosmos-header nav a{font-size:.85rem !important; padding:.3rem .35rem !important} html body > header.cosmos-header .lang-btn{padding:.28rem .5rem !important; font-size:.7rem !important} /* hide secondary nav items "关于" "联系" on very narrow viewports */ html body > header.cosmos-header nav ul li:nth-child(4), html body > header.cosmos-header nav ul li:nth-child(5){display:none !important} }