@charset "UTF-8"; /* ========================================================================== Specul / KeeL —— 统一品牌外壳 (brand shell) -------------------------------------------------------------------------- 本文件是 specul.com 与 keel.specul.com 所有"品牌页面"顶部/底部/配色的唯一来源。两份站点各放一份内容完全相同的副本（静态站无构建步骤）。如需改动站点外观，请同时更新两处，不要在单个页面里覆盖。提供：设计 token / .site-header / .site-footer / 明暗主题 / 语言切换约定：主题写在；语言写在结构（页面须照此写，否则样式不生效）：

…

明暗要点（踩过的坑，勿改）： 1. 底纹 ::before/::after 用 z-index:-1 铺在内容**之下**。曾用 z-index:0，结果 position:fixed 的底纹盖住了未定位的内容容器（3D 演示首屏整块消失）。 2. 浅色变体必须写成 [data-theme="light"] .brand-ambient::before —— 属性在、类在，写成 `.brand-ambient[data-theme="light"]` 永远不匹配。 3. 浅色下 --vio/--cyan/--gold 必须换成深色版：亮青 #22d3c5 在白底上只有约 1.9:1，作为正文色完全看不清（AA 需要 ≥4.5:1）。 ========================================================================== */ :root { /* 底色与面板 */ --bg: #05080f; --bg2: #0a101c; --panel: rgba(16, 24, 40, .72); --panel-solid: #0d1524; /* 描边 */ --line: rgba(148, 163, 184, .14); --line-strong: rgba(148, 163, 184, .28); /* 文字 */ --ink: #f4f7fb; --dim: #94a3b8; /* 品牌色（暗色底上的亮色版） */ --vio: #8b7cf8; --cyan: #22d3c5; --gold: #f5c542; --warn: #f0a86a; --grad: linear-gradient(135deg, #a78bfa, #22d3c5); /* 标题渐变文字：暗色用亮色，浅色必须换成深色，否则白底上几乎看不见 */ --grad-text: linear-gradient(100deg, #c4b5fd 0%, #67e8f9 55%, #22d3c5 100%); /* 形状与排版 */ --radius: 16px; --font: "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --container: min(1080px, 92vw); --ring: rgba(34, 211, 197, .6); --shadow: 0 14px 34px -14px rgba(0, 0, 0, .6); --ease: cubic-bezier(.4, 0, .2, 1); } [data-theme="light"] { --bg: #f4f7fb; --bg2: #eef3fa; --panel: #ffffff; --panel-solid: #ffffff; --line: rgba(15, 23, 42, .12); --line-strong: rgba(15, 23, 42, .22); --ink: #0f172a; --dim: #5b6b82; /* 深色版品牌色，保证白底上正文对比度 ≥ 4.5:1 */ --vio: #5b4bcf; /* 6.5:1 */ --cyan: #0f766e; /* 5.5:1 */ --gold: #a16207; /* 4.7:1 */ --warn: #b45309; --grad-text: linear-gradient(100deg, #5b4bcf 0%, #0f766e 100%); --ring: rgba(15, 118, 110, .5); --shadow: 0 14px 34px -16px rgba(15, 23, 42, .25); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 86px; } body { font-family: var(--font); background: var(--bg); color: var(--ink); line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; } /* 全站无横向滚动条：任何宽度（320 手机 → 3440 超宽屏）都不出现横向拖动条。 clip = 视觉裁切但不产生滚动容器；旧浏览器回退 hidden。 */ html, body { overflow-x: clip; } @supports not (overflow-x: clip) { html, body { overflow-x: hidden; } } a { color: inherit; text-decoration: none; } img, svg { max-width: 100%; } code, kbd, pre, .mono { overflow-wrap: anywhere; } ::selection { background: rgba(34, 211, 197, .28); } .container { width: var(--container); margin: 0 auto; } /* 焦点可见性（键盘可达性） ------------------------------------------------- */ :where(a, button, summary, input, select, textarea):focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 8px; } /* 页面底纹（两个站点一致） ------------------------------------------------ 铺在内容之下：z-index:-1。切勿改回 0 —— 会用 fixed 层盖住正文。 */ .brand-ambient::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(900px 480px at 12% -10%, rgba(139, 124, 248, .22), transparent 55%), radial-gradient(700px 420px at 88% 8%, rgba(34, 211, 197, .12), transparent 50%), linear-gradient(180deg, #080d18 0%, var(--bg) 45%, #04070d 100%); } .brand-ambient::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .04; background-image: linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 70%); } /* 浅色：属性在、类在，必须是后代选择器 */ [data-theme="light"] .brand-ambient::before { background: radial-gradient(900px 480px at 12% -10%, rgba(139, 124, 248, .12), transparent 55%), radial-gradient(700px 420px at 88% 8%, rgba(34, 211, 197, .08), transparent 50%), linear-gradient(180deg, #eef3fa 0%, #f7fafc 50%, #e8eef6 100%); } /* 浅色底纹：白色网格线在白底上不可见 → 换成低透明度墨色线，保留纹理 */ [data-theme="light"] .brand-ambient::after { opacity: 1; background-image: linear-gradient(rgba(15, 23, 42, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 42, .055) 1px, transparent 1px); } /* 顶部 ------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--line); background: rgba(5, 8, 15, .78); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); } [data-theme="light"] .site-header { background: rgba(247, 250, 252, .88); } .site-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 60px; padding: 9px 0; flex-wrap: wrap; } /* 品牌锁定：标记 + 中英双行 */ .brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; padding: 4px 8px 4px 5px; border-radius: 10px; transition: background .15s var(--ease); } .brand:hover { background: rgba(148, 163, 184, .1); } .brand-dot { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; transform: rotate(45deg); background: linear-gradient(135deg, var(--vio), var(--cyan)); box-shadow: 0 0 14px rgba(34, 211, 197, .45); } .brand-text { display: flex; flex-direction: column; line-height: 1.16; } .brand-name { font-weight: 750; letter-spacing: .14em; font-size: 14.5px; color: var(--ink); } .brand-sub { color: var(--dim); font-weight: 500; letter-spacing: .13em; font-size: 11px; } /* 导航：三项（首页 · 导航 · 龙骨 Keel）+ 右侧工具 */ .nav-links { display: flex; align-items: center; gap: 3px; font-size: 13.5px; flex-wrap: wrap; } .nav-links > a { color: var(--dim); padding: 7px 12px; border-radius: 9px; transition: color .15s var(--ease), background .15s var(--ease); } .nav-links > a:hover { color: var(--ink); background: rgba(148, 163, 184, .1); } .nav-links > a[aria-current="page"] { color: var(--ink); background: rgba(34, 211, 197, .1); box-shadow: inset 0 0 0 1px rgba(34, 211, 197, .3); } .nav-tools { display: flex; align-items: center; gap: 6px; margin-left: 8px; padding-left: 11px; border-left: 1px solid var(--line); } .icon-btn { min-width: 34px; height: 32px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: transparent; color: var(--dim); border-radius: 9px; font-size: 12.5px; font-family: inherit; cursor: pointer; line-height: 1; transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease); } .icon-btn:hover { color: var(--ink); border-color: var(--line-strong); background: rgba(148, 163, 184, .1); } /* 通用按钮 --------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; font-size: 14px; font-weight: 600; border: 1px solid var(--line); color: var(--ink); background: transparent; transition: border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease); } .btn:hover { border-color: var(--line-strong); background: rgba(148, 163, 184, .08); transform: translateY(-1px); } .btn.pri { border: none; color: #061018; background: var(--grad); box-shadow: 0 10px 24px -12px rgba(34, 211, 197, .7); } .btn.pri:hover { filter: brightness(1.06); background: var(--grad); } .btn.sm { padding: 8px 15px; font-size: 13px; } /* 底部 ------------------------------------------------------------------- 单行布局：[© 版权] … [首页·导航·龙骨·GitHub] … [法律条款·免责·隐私·致谢] 窄屏自然换行；宽屏三段式，法律组左侧加细分隔线。 */ .site-footer { border-top: 1px solid var(--line); padding: 18px 0 26px; color: var(--dim); font-size: 12px; } .foot-row { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; align-items: center; } .foot-brand { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; } .foot-brand .brand-dot { width: 9px; height: 9px; border-radius: 3px; box-shadow: none; } .foot-copy { color: var(--dim); } .foot-links { display: inline-flex; flex-wrap: wrap; gap: 2px; align-items: center; } .foot-links a { color: var(--dim); padding: 5px 9px; border-radius: 8px; white-space: nowrap; } .foot-links a:hover { color: var(--ink); background: rgba(148, 163, 184, .1); } /* 法律链接行：与导航同行，宽屏用左侧竖线分组 */ .foot-legal-links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; } @media (min-width: 900px) { .foot-legal-links { border-left: 1px solid var(--line); padding-left: 18px; } } .foot-legal-links a { color: var(--dim); opacity: .85; font-size: 12px; padding: 5px 9px; border-radius: 8px; white-space: nowrap; transition: color .15s var(--ease), background .15s var(--ease), opacity .15s var(--ease); } .foot-legal-links a:hover { color: var(--ink); opacity: 1; background: rgba(148, 163, 184, .1); } /* 语言切换：默认显示中文，html[lang="en"] 时切到英文 --------------------- */ [data-en] { display: none; } html[lang="en"] [data-zh] { display: none; } html[lang="en"] [data-en] { display: revert; } html[lang="en"] p[data-en], html[lang="en"] div[data-en], html[lang="en"] li[data-en], html[lang="en"] h1[data-en], html[lang="en"] h2[data-en], html[lang="en"] h3[data-en], html[lang="en"] .mission[data-en], html[lang="en"] .lead[data-en], html[lang="en"] .sec-desc[data-en] { display: block; } @media (max-width: 860px) { .site-bar { gap: 8px; } .nav-links { gap: 1px; font-size: 13px; } .nav-links > a { padding: 6px 9px; } } @media (max-width: 620px) { .brand-sub { display: none; } .nav-tools { margin-left: 4px; padding-left: 8px; } .nav-links > a { padding: 6px 8px; } } @media (max-width: 430px) { .nav-links { font-size: 12.5px; } .icon-btn { min-width: 30px; padding: 0 8px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition-duration: .01ms !important; animation-duration: .01ms !important; } }