/* ================================================== 全站共享顶栏 为什么存在：顶栏原本有三套实现 —— 首页页内私有 CSS、关于页 ak-about.css 里一份副本、 功能站三页用 style.css 的 .navbar（sticky 73px / 另一套 token）。同一个站的三种顶栏。 统一的做法是"抽走重复、保留差异"：所有可能影响观感的数值都开成变量， 由各页自己已有的 token 供值，所以首页与关于页的**计算样式逐项不变** （改前/改后用无头 Chrome 逐字段比对过，见仓库会话记录）。 三个变量： --nav-h 顶栏高度 首页/关于页 64px；功能站三页也收敛到 64px（这是有意的统一） --nav-z 顶栏层级 首页 10、关于页 20、功能站 100 —— 各页保持原值。 不能图省事统一：关于页的 .ak-overlay 是 z-50， 它必须继续盖在顶栏之上（开机揭幕层），统一层级会把它顶掉。 --nav-bg 顶栏底色 各页 :root 已有 --nav-line 顶栏下边线 回退到各页已有的 --line / --border 注意 .nav-actions（账号 / 更多下拉）仍由 style.css 负责：那是功能站特有的控件组， 首页与关于页没有，不该塞进共享文件。 ================================================== */ .nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h, 64px); z-index: var(--nav-z, 20); background: var(--nav-bg, rgba(17, 17, 19, 0.42)); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid var(--nav-line, var(--line, rgba(255, 255, 255, 0.07))); transition: background-color 0.35s ease; } .nav .nav-inner { max-width: 1280px; height: 100%; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; } .nav .logo { font-size: 15px; font-weight: 800; letter-spacing: 0.32em; /* 字体钉死成主站首页那套：蛋页 body 继承的是 style.css 的系统字体栈， 不钉的话同一个 "FREEGG" 在两种页面渲染出来不一样（用户实测对比过） */ font-family: Inter, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif; color: var(--nav-fg, var(--text, #f5f5f4)); text-decoration: none; } .nav .links { display: flex; gap: 36px; } .nav .links a { font-size: 14px; color: var(--nav-muted, var(--muted, #8b8b93)); text-decoration: none; transition: color 0.2s; } .nav .links a.active, .nav .links a:hover { color: var(--nav-fg, var(--text, #f5f5f4)); } /* 主题开关：CSS 画的蛋，不用图片也不用 SVG（与 0c586dd 那次统一后的首页一致）。 作用域同时覆盖 .nav（功能站/首页）与 .navbar（管理后台的老顶栏）—— 之前只在 .nav 上，后台的蛋一直是裸按钮黑块 */ .nav .egg-btn, .navbar .egg-btn { width: 26px; height: 34px; padding: 0; background: #26262c; /* 深色主题：深色蛋体（默认） */ border: none; border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%; cursor: pointer; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.22), 0 1px 6px rgba(0, 0, 0, 0.45); transition: box-shadow 0.35s ease, background-color 0.35s ease; } /* 亮色档要同时兼容站内两套主题写法： 首页/关于页永远显式写 data-theme="light"|"dark"（:root 是深色）； 功能站三页是「深色才写 data-theme="dark"，亮色把属性摘掉」（theme.js:57）， 只写 [data-theme="light"] 的话，功能站的蛋在亮色下会一直是深色。 */ html[data-theme="light"] .nav .egg-btn, html:not([data-theme]) .nav .egg-btn, html[data-theme="light"] .navbar .egg-btn, html:not([data-theme]) .navbar .egg-btn { background: #fff; /* 浅色主题：白色蛋体 */ box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.18), 0 1px 4px rgba(0, 0, 0, 0.12); } /* 中英切换：功能站三页独有（首页/关于页没有语言切换），与蛋形按钮并排， 所以按蛋的尺度收 —— style.css 里那条裸 .lang-toggle 是 40×46 的老顶栏尺寸，压不住它要靠层级 */ .nav .lang-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 26px; padding: 0 9px; background: transparent; border: 1px solid var(--nav-line, var(--line, rgba(255, 255, 255, 0.07))); border-radius: 999px; color: var(--nav-muted, var(--muted, #8b8b93)); font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; line-height: 1; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; } .nav .lang-toggle:hover { color: var(--nav-fg, var(--text, #f5f5f4)); border-color: var(--nav-fg, var(--text, #f5f5f4)); } .nav .nav-actions { display: flex; align-items: center; gap: 14px; } /* 点一下蛋会摇一下：theme.js:70 每次切换都给按钮加 .wobbling。 关键帧沿用 style.css 里的 @keyframes egg-wobble（语言按钮的 anim-wobble 也在用它）， 这里不重复定义 —— 首页/关于页没引 style.css，取不到关键帧就不摇，与改动前一致。 */ .nav .egg-btn.wobbling, .navbar .egg-btn.wobbling { animation: egg-wobble 0.55s ease; } @media (max-width: 900px) { .nav .nav-inner { padding: 0 20px; } } /* 窄屏：链接不换行（否则"关于本站"会一字一行竖着挤在顶栏）、 收紧间距、用户名只留头像 */ @media (max-width: 700px) { .nav .nav-inner { padding: 0 14px; } .nav .links { gap: 14px; min-width: 0; } .nav .links a { white-space: nowrap; font-size: 13px; } .nav .account-btn .account-btn-label { display: none; } .nav .account-btn { padding: 0 8px; } } @media (prefers-reduced-motion: reduce) { .nav, .nav .egg-btn, .nav .links a { transition: none; } } /* ================================================== 全站共享页脚 为什么存在：八页各有三种页脚写法 —— 首页 .site-foot 三个

、 关于页 .ak-foot 是固定底栏（还挂着 SEC 读数与粒子提示）、 功能站与协议页用 style.css 的裸 footer。备案信息与版权行各处一份，改一次要改八处。 这里统一「法律信息块」的内容与视觉，8 个页面共用同一段 HTML，压成一行、· 分隔。 关于页是例外：它的 .ak-foot 是固定底栏，还挂着 SEC 读数与粒子提示， 保留自己的外壳；备案行内容与这里一致，素材声明它没有（角色不在那页出现）。 素材声明那一行是合规落点：grok-egg 的几何数据抽自 Grok Bot.app，版权归 xAI， 上游仓库没有任何 LICENSE 文件，本站以「个人建站学习项目」定位使用、不做商用。 详见仓库根目录 grok-egg-同步说明.md。 ================================================== */ /* 压成一行，与【关于本站】底栏那条同构：等宽小字 + · 分隔 + 半透明毛玻璃底 + 上边框。 字号没有跟到关于页的 9.5px：那是单行装饰，这里是长期要读、也要给审核看的备案信息， 12px 才守得住 4.5:1。 display: block 是必需的：style.css 有条裸 footer{display:flex;justify-content:space-between}， 不覆盖掉行内元素会被当成 flex 项目摊开。 */ .site-foot { display: block; /* 底与上边框要满宽（关于页那条就是满宽的），文字仍限在 1216 里 —— 所以不用 max-width + margin:auto（那会把底色也收成 1216），改成用左右内边距夹。 百分比内边距相对父栏宽度算，比 100vw 稳（后者含滚动条宽）。 max-width 要显式清掉：style.css 有条裸 footer{max-width:1100px}， 不覆盖就会让引了 style.css 的六页与首页/关于页差一档。 */ max-width: none; padding: 20px max(32px, calc((100% - 1216px) / 2)) 24px; background: var(--nav-bg, rgba(17, 17, 19, 0.42)); -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3); border-top: 1px solid var(--nav-line, var(--line, var(--border))); font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, "Liberation Mono", "PingFang SC", "Microsoft YaHei", monospace; font-size: 12px; line-height: 1.9; letter-spacing: 0.03em; color: var(--nav-muted, var(--muted, #8b8b93)); } /* 文档页的