/* ============================================================ Knibu — homepage styles 设计母题:叙事知识图谱(节点-连线 + 时间轴) 字体:Newsreader(标题)· Hanken Grotesk(正文)· IBM Plex Mono(数据/标签) 主题切换:在 上切换 · 默认(不写或 "ink-gold")= 墨蓝底 + 金色主强调 + 长春花蓝次色 · "blue" = 你的色板:深蓝底 + 蓝色(346BFE)主色 + 黄色(F9DC5C)辅色 所有颜色都走下面的语义变量,改主题只动这两个 token 块。 ============================================================ */ :root, [data-theme="ink-gold"] { /* 背景三层 */ --bg: #090D17; --bg-1: #0D1220; --bg-2: #121A2C; /* 线条 */ --line: #232D45; --line-soft: rgba(234, 237, 245, 0.08); /* 文字 */ --text: #EAEDF5; --muted: #97A1B8; --faint: rgba(234, 237, 245, 0.45); /* 强调:主(CTA/链接/事件节点)+ 辅(图谱连线/结构) */ --accent: #F0B95E; --accent-bright: #F6C878; /* 主强调 hover 亮版 */ --on-accent: #1A1204; /* 主强调底色上的文字 */ --accent-2: #8AA0F0; --bg-glow: color-mix(in srgb, var(--accent) 9%, transparent); } /* 你的色板:主色蓝 #346BFE,辅色黄 #F9DC5C,底色 #011936 */ [data-theme="blue"] { --bg: #011936; --bg-1: #04203F; --bg-2: #0B2A4F; --line: #1C3D63; --line-soft: rgba(244, 255, 253, 0.10); --text: #F4FFFD; --muted: rgba(244, 255, 253, 0.68); --faint: rgba(244, 255, 253, 0.40); --accent: #346BFE; --accent-bright: #5C87FF; --on-accent: #F4FFFD; --accent-2: #F9DC5C; /* 近白柔光(F4FFFD),与 011936 底形成深→浅渐变,不带蓝 */ --bg-glow: color-mix(in srgb, var(--text) 16%, transparent); } :root { /* 排版 */ --serif: "Newsreader", Georgia, "Times New Roman", serif; --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --mono: "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace; --maxw: 1140px; --gutter: clamp(20px, 5vw, 48px); --radius: 14px; --section-y: clamp(72px, 11vw, 140px); } /* ---------- 基础 ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.65; color: var(--text); /* 底色 + 顶部一束柔光形成渐变(光晕色由 --bg-glow 控制,见各主题) */ background: radial-gradient(1200px 780px at 50% -16%, var(--bg-glow), transparent 72%), var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } main, .nav, .footer { position: relative; z-index: 1; } h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } ::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); color: #fff; } .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); } .section--alt { background: var(--bg-1); border-block: 1px solid var(--line-soft); } /* 区块抬头小标签:前缀一个"节点"圆点,作为贯穿全站的图谱母题 */ .eyebrow { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 12px; margin: 0 0 22px; } .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); flex: none; } .section-head { max-width: 720px; margin-bottom: clamp(40px, 6vw, 64px); } .section-head h2 { font-size: clamp(30px, 4.6vw, 46px); line-height: 1.1; margin: 0; } .section-head p { color: var(--muted); font-size: clamp(17px, 1.6vw, 19px); margin: 18px 0 0; max-width: 60ch; } .lead-em { font-style: italic; color: var(--text); } /* 站点 logo 节点标记:跟随主题(覆盖内联的色值) */ .brand-mark line { stroke: var(--accent-2); } .brand-mark circle { fill: var(--accent); } .brand-mark circle[fill="none"] { fill: none; stroke: var(--accent-2); } /* ---------- 按钮 ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--sans); font-weight: 600; font-size: 15px; line-height: 1; padding: 14px 22px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease; } .btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 8px 26px -12px color-mix(in srgb, var(--accent) 60%, transparent); } .btn--primary:hover { background: var(--accent-bright); transform: translateY(-2px); } .btn--ghost { background: transparent; color: var(--text); border-color: var(--line); } .btn--ghost:hover { border-color: var(--accent); color: var(--accent); } /* ============================================================ 导航 ============================================================ */ .nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(12px); background: color-mix(in srgb, var(--bg) 72%, transparent); border-bottom: 1px solid transparent; transition: border-color .3s ease, background-color .3s ease; } .nav.is-scrolled { border-bottom-color: var(--line-soft); background: color-mix(in srgb, var(--bg) 90%, transparent); } .nav-inner { max-width: var(--maxw); margin: 0 auto; padding: 15px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 20px; } .brand { display: inline-flex; align-items: center; gap: 11px; } .brand-mark { width: 26px; height: 26px; flex: none; } .brand-name { font-family: var(--serif); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; } .nav-links { display: flex; align-items: center; gap: 30px; } .nav-links a { font-size: 14.5px; color: var(--muted); transition: color .18s ease; } .nav-links a:hover { color: var(--text); } .nav-cta { display: flex; align-items: center; gap: 18px; } .nav-toggle { display: none; } /* ============================================================ Hero ============================================================ */ .hero { padding-block: clamp(56px, 9vw, 104px) clamp(64px, 9vw, 112px); } .hero-inner { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(36px, 6vw, 80px); align-items: center; } .hero-tag { font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-2); margin: 0 0 26px; } .hero h1 { font-size: clamp(38px, 6vw, 66px); line-height: 1.04; margin: 0; letter-spacing: -0.02em; } .hero h1 em { font-style: italic; color: var(--accent); } .hero-sub { color: var(--muted); font-size: clamp(17px, 1.8vw, 20px); line-height: 1.6; margin: 26px 0 0; max-width: 54ch; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; } .hero-meta { margin-top: 30px; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.05em; color: var(--faint); display: flex; align-items: center; gap: 12px; } .hero-meta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; } /* Hero 图谱:节点 + 连线 + 时间轴 */ .hero-graph { width: 100%; } .graph { width: 100%; height: auto; overflow: visible; } /* 连线:由力导向模拟实时驱动(x1/y1/x2/y2) */ .g-edge { fill: none; stroke: var(--accent-2); stroke-width: 1.2; opacity: 0.5; } .g-edge--warm { stroke: var(--accent); opacity: 0.45; stroke-width: 1.4; } /* 时间轴 */ .g-axis { stroke: var(--line); stroke-width: 1; opacity: 0; animation: fade-in .8s ease .2s forwards; } .g-tick { fill: var(--faint); font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; opacity: 0; animation: fade-in .8s ease .5s forwards; } .g-lane { fill: var(--faint); font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; dominant-baseline: middle; opacity: 0; animation: fade-in .8s ease .6s forwards; } .g-lane-line { stroke: var(--line-soft); stroke-width: 1; stroke-dasharray: 2 6; } /* 节点:可拖拽,位置由模拟驱动(cx/cy) */ .g-node { cursor: grab; touch-action: none; } .g-node:active { cursor: grabbing; } .g-node--event { fill: var(--accent); } .g-node--char { fill: var(--bg); stroke: var(--accent-2); stroke-width: 1.6; } .g-node--rel { fill: var(--accent-2); } .g-node-halo { fill: var(--accent); opacity: 0.16; pointer-events: none; } @keyframes fade-in { to { opacity: 1; } } /* ============================================================ Problem —— 三个并列原因(非序列,不编号) ============================================================ */ .problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; } .problem-item { padding: 28px 28px 8px 0; border-top: 1px solid var(--line); } .problem-item + .problem-item { padding-left: 28px; } .problem-icon { color: var(--accent); margin-bottom: 18px; } .problem-item h3 { font-size: 21px; margin: 0 0 10px; line-height: 1.25; } .problem-item p { color: var(--muted); font-size: 16px; margin: 0; } /* ============================================================ Three surfaces —— 一个图谱,三种用法 ============================================================ */ .surfaces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .surface { position: relative; background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 30px 28px; display: flex; flex-direction: column; overflow: hidden; transition: transform .2s ease, border-color .2s ease; } .surface:hover { transform: translateY(-4px); border-color: var(--line); } .surface-glyph { position: absolute; top: 18px; right: 18px; opacity: 0.55; color: var(--accent); } .surface-aud { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-2); } .surface h3 { font-size: 25px; margin: 8px 0 0; } .surface-pos { font-style: italic; color: var(--text); margin: 14px 0 22px; font-size: 16px; line-height: 1.5; } .surface-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .surface-list li { position: relative; padding-left: 24px; color: var(--muted); font-size: 15px; line-height: 1.5; } .surface-list li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--accent); } .pill { align-self: flex-start; margin-top: 20px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-2); border: 1px solid color-mix(in srgb, var(--accent-2) 45%, transparent); border-radius: 999px; padding: 5px 12px; } /* ============================================================ How it works —— 真实流程,使用 01/02/03 编号 ============================================================ */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .step { position: relative; padding-top: 26px; border-top: 2px solid var(--line); } .step-num { font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; color: var(--accent); margin-bottom: 16px; } .step h3 { font-size: 23px; margin: 0 0 10px; } .step p { color: var(--muted); font-size: 16px; margin: 0; } .how-quote { margin: clamp(48px, 6vw, 68px) 0 0; font-family: var(--serif); font-style: italic; font-size: clamp(22px, 3vw, 30px); line-height: 1.35; color: var(--text); max-width: 24ch; } .how-quote span { color: var(--accent); } /* ============================================================ Development status —— 诚实的能力清单 ============================================================ */ .status-wrap { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(36px, 5vw, 64px); align-items: start; } .status-table { display: flex; flex-direction: column; } .status-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 0; border-bottom: 1px solid var(--line-soft); } .status-row:first-child { border-top: 1px solid var(--line-soft); } .status-cap { font-size: 16px; color: var(--text); } .status-chip { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; flex: none; } .status-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; } /* ✅ 已上线 */ .status-chip--live { color: var(--accent); } .status-chip--live::before { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } /* 🔨 开发中 */ .status-chip--dev { color: var(--accent-2); } .status-chip--dev::before { background: var(--accent-2); animation: pulse 2s ease-in-out infinite; } /* 🗓 计划中 */ .status-chip--plan { color: var(--faint); } .status-chip--plan::before { background: transparent; border: 1.5px solid var(--faint); } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } } .status-note { background: var(--bg-2); border: 1px solid var(--line-soft); border-left: 2px solid var(--accent); border-radius: 12px; padding: 26px 26px; color: var(--muted); font-size: 16px; line-height: 1.6; } .status-note strong { color: var(--text); font-weight: 600; } .status-legend { display: flex; flex-wrap: wrap; gap: 18px 26px; margin-top: 22px; } /* ============================================================ Built for scale ============================================================ */ .scale-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: center; } .scale-body p { color: var(--muted); font-size: clamp(17px, 1.7vw, 19px); margin: 0; } .scale-stats { display: grid; gap: 16px; } .stat { border: 1px solid var(--line-soft); background: var(--bg-2); border-radius: 12px; padding: 22px 24px; } .stat-k { font-family: var(--serif); font-size: 30px; color: var(--accent); line-height: 1; } .stat-l { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 10px; } /* ============================================================ Team ============================================================ */ .team-card { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: start; max-width: 760px; background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 32px; } .team-avatar { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-size: 30px; color: var(--accent); background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent-2) 14%, transparent)); border: 1px solid var(--line); } .team-name { font-family: var(--serif); font-size: 24px; } .team-role { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-2); margin-top: 4px; } .team-bio { color: var(--muted); font-size: 16px; margin: 16px 0 0; } /* ============================================================ Closing CTA ============================================================ */ .cta-band { text-align: center; } .cta-band h2 { font-size: clamp(32px, 5vw, 54px); line-height: 1.08; margin: 0 auto; max-width: 16ch; } .cta-band p { color: var(--muted); font-size: clamp(17px, 1.7vw, 19px); margin: 22px auto 0; max-width: 52ch; } .cta-form { display: flex; gap: 12px; max-width: 520px; margin: 38px auto 0; flex-wrap: wrap; justify-content: center; } .cta-form input { flex: 1 1 260px; font-family: var(--sans); font-size: 15px; color: var(--text); background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; transition: border-color .18s ease; } .cta-form input::placeholder { color: var(--faint); } .cta-form input:focus { outline: none; border-color: var(--accent); } .cta-hp { display: none; } /* 蜜罐:对人隐藏,机器人填了就被拦 */ .cta-status { font-family: var(--mono); font-size: 13px; margin-top: 16px; min-height: 1em; letter-spacing: 0.03em; } .cta-status--ok { color: var(--accent); } .cta-status--err { color: #E5786B; } .cta-fine { font-family: var(--mono); font-size: 12px; color: var(--faint); margin-top: 18px; letter-spacing: 0.04em; } /* ============================================================ Footer ============================================================ */ .footer { border-top: 1px solid var(--line-soft); padding-block: 52px; } .footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px; } .footer-brand { max-width: 320px; } .footer-brand .brand { margin-bottom: 14px; } .footer-tag { color: var(--muted); font-size: 14.5px; } .footer-links { display: flex; gap: 46px; flex-wrap: wrap; } .footer-col h4 { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin: 0 0 14px; font-weight: 500; } .footer-col a { display: block; color: var(--muted); font-size: 14.5px; margin-bottom: 10px; transition: color .18s ease; } .footer-col a:hover { color: var(--accent); } .footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line-soft); font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em; color: var(--faint); } .footer-legal a { color: var(--faint); transition: color .18s ease; } .footer-legal a:hover { color: var(--accent); } /* ============================================================ 法律页(Privacy / Terms)—— 复用主页视觉系统 ============================================================ */ .legal { padding-block: clamp(48px, 8vw, 88px); } .legal-wrap { max-width: 760px; margin: 0 auto; padding-inline: var(--gutter); } .legal-back { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 34px; transition: color .18s ease; } .legal-back:hover { color: var(--accent); } .legal h1 { font-size: clamp(34px, 5vw, 52px); line-height: 1.08; margin: 0; } .legal-meta { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); margin-top: 16px; } .legal-notice { margin: 30px 0 8px; background: var(--bg-2); border: 1px solid var(--line-soft); border-left: 2px solid var(--accent); border-radius: 12px; padding: 18px 22px; color: var(--muted); font-size: 15px; line-height: 1.6; } .legal-notice strong { color: var(--text); font-weight: 600; } .legal h2 { font-size: clamp(21px, 2.6vw, 26px); margin: 46px 0 14px; } .legal p { color: var(--muted); margin: 0 0 16px; } .legal ul { color: var(--muted); margin: 0 0 16px; padding-left: 22px; } .legal li { margin-bottom: 9px; } .legal li::marker { color: var(--accent); } .legal a { color: var(--accent); } .legal a:hover { text-decoration: underline; } /* ============================================================ 滚动入场 ============================================================ */ /* 仅在 JS 可用时才隐藏待揭示元素;无 JS 时内容默认可见(健壮性 + 可访问性) */ .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; } .js .reveal.is-in { opacity: 1; transform: none; } /* ============================================================ 响应式 ============================================================ */ @media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; } .hero-graph { order: 2; max-width: 540px; } .status-wrap { grid-template-columns: 1fr; } .scale-wrap { grid-template-columns: 1fr; } .surfaces { grid-template-columns: 1fr; } .problem-grid { grid-template-columns: 1fr; } .problem-item + .problem-item { padding-left: 0; } .steps { grid-template-columns: 1fr; } .nav-links { display: none; } } @media (max-width: 560px) { body { font-size: 16px; } .nav-cta .btn--ghost { display: none; } .team-card { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; } } /* ============================================================ 可访问性:键盘焦点 + 减弱动效 ============================================================ */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .g-axis, .g-tick, .g-lane { opacity: 1; } .js .reveal { opacity: 1; transform: none; } }