/* ============================================ LAYOUT —— site-header / site-footer / main ============================================ */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 85%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .site-header-inner { display: flex; align-items: center; gap: var(--sp-7); padding-block: var(--sp-5); } .brand { font-weight: 700; letter-spacing: -.02em; font-size: 18px; display: inline-flex; align-items: center; } .brand-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); margin-right: var(--sp-3); } .brand-logo { display: inline-block; width: 22px; height: 22px; margin-right: var(--sp-3); flex: none; } .site-nav { display: flex; gap: var(--sp-7); font-size: 14px; color: var(--ink-80); } .site-nav a { position: relative; transition: color var(--dur-micro) var(--ease-out); } .site-nav a:hover { color: var(--accent); } .site-nav a.is-active { color: var(--accent); font-weight: 500; } .site-nav a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--accent); border-radius: 1px; } .site-header-actions { margin-left: auto; display: flex; gap: var(--sp-4); align-items: center; } main { display: block; } /* ── footer ── */ .site-footer { margin-top: var(--sp-11); border-top: 1px solid var(--line); background: var(--paper-2); } .site-footer-inner { display: grid; grid-template-columns: 1fr 2fr; gap: var(--sp-8); padding-block: var(--sp-9); } .site-footer-brand p { color: var(--ink-60); margin: var(--sp-3) 0 0; max-width: 32ch; } .site-footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-7); font-size: 14px; } .site-footer-cols h4 { font-size: var(--fs-meta); font-family: var(--font-mono); color: var(--ink-60); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 var(--sp-4); } .site-footer-cols a, .site-footer-cols span { display: block; color: var(--ink-80); padding-block: var(--sp-2); transition: color var(--dur-micro) var(--ease-out); } .site-footer-cols a:hover { color: var(--accent); } .site-footer-fineprint { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-5); padding-block: var(--sp-5); border-top: 1px solid var(--line); font-size: var(--fs-body-sm); color: var(--ink-60); } .site-footer-legal p { margin: 0; line-height: 1.8; } .site-footer-legal .sep { margin-inline: 0.4em; color: var(--ink-40, var(--ink-60)); opacity: 0.5; } .site-footer-legal a { color: inherit; text-decoration: none; transition: color var(--dur-micro) var(--ease-out); } .site-footer-legal a:hover { color: var(--accent); } .site-footer-meta { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1); white-space: nowrap; } .muted { color: var(--ink-60); } /* 中文站特有信息（备案/电话/12318 举报）只在 zh-CN 时显示。 构建期默认 locale + 运行时 locale-swap.js 共同决定 。 */ html:not([data-locale="zh-CN"]) [data-locale-only="zh-CN"] { display: none; } /* header 切换按钮 —— 单字符（EN/中），收窄宽度避免视觉过宽 */ .locale-switch { min-width: 2.5em; text-align: center; padding-inline: var(--sp-3); } @media (max-width: 920px) { .site-nav { display: none; } .site-footer-inner { grid-template-columns: 1fr; } .site-footer-cols { grid-template-columns: 1fr 1fr; } .site-footer-fineprint { flex-direction: column; align-items: flex-start; } .site-footer-meta { flex-direction: row; align-items: center; gap: var(--sp-3); } }