guanghu.chat v5: emoji移除·六色体系·AI软件生态·多色渐变
Some checks failed
自动更新代码和重启 / update-and-restart (push) Has been cancelled
CI检查 + 自动部署 / check (push) Has been cancelled
CI检查 + 自动部署 / deploy (push) Has been cancelled

冰朔反馈修正:
- 移除卡片上的emoji表情→改为几何符号(⊕⊡⊛)
- 六色系统: blue/teal/purple/amber/rose/green 分布全站
- 每张卡片独立颜色(border-top彩色亮起)
- 梯度背景替换纯色: Hero多色渐变·section交替渐变
- 曜冥纪元标题: 蓝青渐变文字
- 计数器数字: 蓝青紫渐变
- 新增生态: "AI编程与助手软件"(WorkBuddy/CodeBuddy/QClaw/Cursor/Copilot)
- 每类生态独立颜色标签
This commit is contained in:
冰朔 2026-06-27 16:54:22 +08:00
parent bd14b433e1
commit 7a3b1c9e21

View File

@ -8,27 +8,33 @@
<title>曜冥纪元 · 通用人工智能操作平台</title> <title>曜冥纪元 · 通用人工智能操作平台</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&family=Noto+Serif+SC:wght@500;600;700&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700;800&family=Noto+Serif+SC:wght@500;600;700;800&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<style> <style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0} *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{ :root{
--bg:#ffffff; --bg:#ffffff;
--bg-alt:#f4f7fa; --bg-hero:linear-gradient(170deg,#eef4f9 0%,#f2f6fa 30%,#f8f5f0 60%,#ffffff 100%);
--bg-hero:linear-gradient(180deg,#eaf2f8 0%,#f4f7fa 40%,#ffffff 100%);
--bg-card:#ffffff; --bg-card:#ffffff;
--text:#0d141e; --text:#0d141e;
--text-sec:#4a5568; --text-sec:#4a5568;
--text-ter:#8899aa; --text-ter:#8899aa;
--accent:#1a7faa; --blue:#1a7faa;
--accent-bright:#2098c8; --blue-light:#e6f2f8;
--accent-dim:rgba(26,127,170,0.06); --teal:#0d9488;
--accent-light:rgba(26,127,170,0.12); --teal-light:#e6f7f5;
--purple:#7c3aed;
--purple-light:#f3eeff;
--amber:#b45309;
--amber-light:#fef7ed;
--rose:#be185d;
--rose-light:#fdf2f7;
--green:#166534;
--green-light:#eaf7ee;
--border:#dde4ed; --border:#dde4ed;
--border-h:#c0ccd8; --border-h:#c0ccd8;
--shadow:0 1px 3px rgba(0,0,0,0.04); --shadow:0 1px 3px rgba(0,0,0,0.04);
--shadow-md:0 4px 16px rgba(0,0,0,0.05); --shadow-h:0 8px 30px rgba(0,0,0,0.07),0 2px 6px rgba(0,0,0,0.04);
--shadow-h:0 8px 32px rgba(0,0,0,0.08),0 2px 8px rgba(0,0,0,0.04);
--font:'Noto Sans SC',-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif; --font:'Noto Sans SC',-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;
--serif:'Noto Serif SC','Songti SC','SimSun',serif; --serif:'Noto Serif SC','Songti SC','SimSun',serif;
--mono:'JetBrains Mono','SF Mono','Menlo',monospace; --mono:'JetBrains Mono','SF Mono','Menlo',monospace;
@ -47,37 +53,54 @@ body{
} }
/* ── Nav ── */ /* ── Nav ── */
.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,0.88);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border)} .nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,0.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.nav-inner{max-width:1160px;margin:0 auto;padding:15px 40px;display:flex;justify-content:space-between;align-items:center} .nav-inner{max-width:1160px;margin:0 auto;padding:15px 40px;display:flex;justify-content:space-between;align-items:center}
.nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)} .nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.nav-logo{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--accent-bright),var(--accent));display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:15px;color:#fff;font-weight:700} .nav-logo{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#3b82f6,#1d4ed8);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:15px;color:#fff;font-weight:700}
.nav-name{font-size:15px;font-weight:600;letter-spacing:.03em} .nav-name{font-size:15px;font-weight:700;letter-spacing:.03em}
.nav-right{display:flex;align-items:center;gap:24px} .nav-right{display:flex;align-items:center;gap:24px}
.nav-link{font-size:13px;color:var(--text-sec);text-decoration:none;transition:color .2s;font-weight:500} .nav-link{font-size:13px;color:var(--text-sec);text-decoration:none;transition:color .2s;font-weight:500}
.nav-link:hover{color:var(--accent)} .nav-link:hover{color:var(--blue)}
.nav-badge{font-size:11px;padding:4px 12px;border-radius:999px;background:var(--accent-dim);color:var(--accent);font-weight:600;letter-spacing:.03em} .nav-badge{font-size:11px;padding:5px 14px;border-radius:999px;background:linear-gradient(135deg,#eff6ff,#dbeafe);color:#1e40af;font-weight:600;letter-spacing:.03em;border:1px solid #bfdbfe}
/* ── Page ── */ /* ── Page ── */
.page{position:relative;z-index:1} .page{position:relative;z-index:1}
.page-inner{max-width:1100px;margin:0 auto;padding:0 40px} .page-inner{max-width:1100px;margin:0 auto;padding:0 40px}
/* ── Hero ── */ /* ── Hero ── */
.hero{background:var(--bg-hero);text-align:center;padding:88px 40px 72px} .hero{background:var(--bg-hero);text-align:center;padding:96px 40px 76px}
.hero-badge{display:inline-block;font-size:12px;padding:5px 16px;border-radius:999px;background:var(--accent-dim);border:1px solid var(--accent-light);color:var(--accent);font-weight:600;letter-spacing:.06em;margin-bottom:36px} .hero-badge{display:inline-block;font-size:12px;padding:5px 16px;border-radius:999px;background:linear-gradient(135deg,#eff6ff,#dbeafe);color:#1e40af;font-weight:600;letter-spacing:.06em;margin-bottom:36px;border:1px solid #bfdbfe}
.hero-brand{font-family:var(--serif);font-size:64px;font-weight:700;color:var(--text);letter-spacing:.22em;line-height:1.15;margin-bottom:8px} .hero-brand{font-family:var(--serif);font-size:64px;font-weight:800;letter-spacing:.22em;line-height:1.15;margin-bottom:8px;
background:linear-gradient(135deg,#0d141e 20%,#1a7faa 60%,#0d9488 100%);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-brand-en{font-family:'Inter',sans-serif;font-size:15px;color:var(--text-ter);letter-spacing:.2em;margin-bottom:10px;font-weight:500} .hero-brand-en{font-family:'Inter',sans-serif;font-size:15px;color:var(--text-ter);letter-spacing:.2em;margin-bottom:10px;font-weight:500}
.hero-divider{width:40px;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-bright));margin:0 auto 30px;border-radius:2px} .hero-divider{width:48px;height:3px;background:linear-gradient(90deg,#1a7faa,#0d9488,#7c3aed);margin:0 auto 30px;border-radius:2px}
.hero-label{font-size:34px;font-weight:600;color:var(--text);letter-spacing:.06em;margin-bottom:6px} .hero-label{font-size:34px;font-weight:700;color:var(--text);letter-spacing:.06em;margin-bottom:6px}
.hero-platform{font-size:20px;font-weight:700;color:var(--accent);letter-spacing:.1em;margin-bottom:28px;font-family:var(--serif)} .hero-platform{font-size:20px;font-weight:700;letter-spacing:.1em;margin-bottom:28px;font-family:var(--serif);
background:linear-gradient(90deg,#1a7faa,#0d9488);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-desc{font-size:16px;color:var(--text-sec);max-width:660px;margin:0 auto;line-height:2;letter-spacing:.02em;font-weight:400} .hero-desc{font-size:16px;color:var(--text-sec);max-width:660px;margin:0 auto;line-height:2;letter-spacing:.02em;font-weight:400}
/* ── Sections ── */ /* ── Sections ── */
.section{padding:88px 40px} .section{padding:88px 40px}
.section.alt{background:var(--bg-alt)}
.section-header{text-align:center;margin-bottom:56px} .section-header{text-align:center;margin-bottom:56px}
.section-tag{font-size:12px;color:var(--accent);font-weight:600;letter-spacing:.2em;margin-bottom:10px} .section-tag{font-size:12px;font-weight:700;letter-spacing:.2em;margin-bottom:10px}
.section-title{font-size:34px;font-weight:600;color:var(--text);letter-spacing:.06em;font-family:var(--serif)} .section-tag.blue{color:var(--blue)}
.section-title em{font-style:normal;color:var(--accent)} .section-tag.teal{color:var(--teal)}
.section-tag.purple{color:var(--purple)}
.section-title{font-size:34px;font-weight:700;color:var(--text);letter-spacing:.06em;font-family:var(--serif)}
.section-title em{font-style:normal}
.section-title em.blue{color:var(--blue)}
.section-title em.teal{color:var(--teal)}
.section-title em.purple{color:var(--purple)}
/* Colored accent bar */
.accent-bar{width:40px;height:3px;border-radius:2px;margin:0 auto 16px}
.accent-bar.blue{background:linear-gradient(90deg,#1a7faa,#3b82f6)}
.accent-bar.teal{background:linear-gradient(90deg,#0d9488,#14b8a6)}
.accent-bar.purple{background:linear-gradient(90deg,#7c3aed,#a78bfa)}
/* ── Cards Grid ── */ /* ── Cards Grid ── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@ -88,41 +111,34 @@ body{
border-radius:var(--radius); border-radius:var(--radius);
text-align:center; text-align:center;
transition:all .35s cubic-bezier(.25,.1,.25,1); transition:all .35s cubic-bezier(.25,.1,.25,1);
position:relative;
overflow:hidden;
box-shadow:var(--shadow); box-shadow:var(--shadow);
} }
.card::before{ .card:hover{transform:translateY(-6px);box-shadow:var(--shadow-h)}
content:'';
position:absolute;
top:0;left:0;right:0;
height:3px;
background:linear-gradient(90deg,transparent,var(--accent),transparent);
opacity:0;
transition:opacity .35s;
}
.card::after{
content:'';
position:absolute;inset:0;
background:radial-gradient(circle at 50% 30%,rgba(26,127,170,0.07),transparent 60%);
opacity:0;transition:opacity .35s;
}
.card:hover{
transform:translateY(-6px);
box-shadow:var(--shadow-h);
border-color:var(--accent-light);
}
.card:hover::before{opacity:1}
.card:hover::after{opacity:1}
.card:hover .card-num{color:var(--accent-bright)}
.card:hover .card-icon{transform:scale(1.1)}
.card-icon{font-size:32px;margin-bottom:12px;transition:transform .35s} .card .card-icon-ring{width:56px;height:56px;border-radius:14px;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;transition:all .35s}
.card-num{font-family:'Inter',sans-serif;font-size:26px;font-weight:700;color:var(--text-ter);margin-bottom:16px;transition:color .35s} .card:hover .card-icon-ring{transform:scale(1.08)}
.card-title{font-size:18px;font-weight:600;color:var(--text);margin-bottom:10px;letter-spacing:.04em}
.card.blue{border-top:3px solid transparent;transition:border-color .35s,transform .35s,box-shadow .35s}
.card.blue:hover{border-color:#1a7faa}
.card.blue .card-icon-ring{background:var(--blue-light);color:var(--blue)}
.card.teal{border-top:3px solid transparent}
.card.teal:hover{border-color:var(--teal)}
.card.teal .card-icon-ring{background:var(--teal-light);color:var(--teal)}
.card.purple{border-top:3px solid transparent}
.card.purple:hover{border-color:var(--purple)}
.card.purple .card-icon-ring{background:var(--purple-light);color:var(--purple)}
.card-num{font-family:'Inter',sans-serif;font-size:14px;font-weight:700;letter-spacing:.1em;margin-bottom:14px;text-transform:uppercase}
.card.blue .card-num{color:var(--blue)}
.card.teal .card-num{color:var(--teal)}
.card.purple .card-num{color:var(--purple)}
.card-title{font-size:18px;font-weight:700;color:var(--text);margin-bottom:10px;letter-spacing:.04em}
.card-desc{font-size:14px;color:var(--text-sec);line-height:1.9;font-weight:400} .card-desc{font-size:14px;color:var(--text-sec);line-height:1.9;font-weight:400}
/* ── Architecture ── */ /* ── Architecture (warm bg) ── */
.arch-bg{background:linear-gradient(180deg,#faf8f6 0%,#ffffff 100%)}
.arch{display:flex;flex-direction:column;align-items:center;gap:0} .arch{display:flex;flex-direction:column;align-items:center;gap:0}
.arch-layer{ .arch-layer{
padding:34px 44px; padding:34px 44px;
@ -135,20 +151,24 @@ body{
transition:all .3s; transition:all .3s;
box-shadow:var(--shadow); box-shadow:var(--shadow);
} }
.arch-layer:hover{ .arch-layer:hover{transform:translateY(-3px);box-shadow:var(--shadow-h)}
transform:translateY(-3px); .arch-layer.l1{border-left:3px solid var(--blue)}
box-shadow:var(--shadow-h); .arch-layer.l1:hover{border-color:rgba(26,127,170,0.25)}
border-color:var(--accent-light); .arch-layer.l2{border-left:3px solid var(--teal)}
} .arch-layer.l2:hover{border-color:rgba(13,148,136,0.25)}
.arch-layer.top{border-left:3px solid var(--accent);border-color:var(--accent-light)} .arch-layer.l3{border-left:3px solid var(--purple)}
.arch-layer.top:hover{border-color:var(--accent-light);box-shadow:var(--shadow-h),0 0 0 1px var(--accent-light)} .arch-layer.l3:hover{border-color:rgba(124,58,237,0.25)}
.arch-name{font-size:17px;font-weight:600;color:var(--text);margin-bottom:6px;letter-spacing:.04em} .arch-name{font-size:17px;font-weight:700;color:var(--text);margin-bottom:6px;letter-spacing:.04em}
.arch-desc{font-size:15px;color:var(--text-sec);line-height:1.8;font-weight:400} .arch-desc{font-size:15px;color:var(--text-sec);line-height:1.8;font-weight:400}
.arch-badge{display:inline-block;font-size:11px;padding:3px 10px;border-radius:999px;background:var(--accent-dim);color:var(--accent);font-weight:600;letter-spacing:.04em;margin-top:10px} .arch-badge{display:inline-block;font-size:11px;padding:3px 10px;border-radius:999px;font-weight:600;letter-spacing:.04em;margin-top:10px}
.arch-badge.blue{background:var(--blue-light);color:var(--blue)}
.arch-badge.teal{background:var(--teal-light);color:var(--teal)}
.arch-badge.purple{background:var(--purple-light);color:var(--purple)}
.arch-connector{height:28px;display:flex;align-items:center;justify-content:center} .arch-connector{height:28px;display:flex;align-items:center;justify-content:center}
.arch-connector::after{content:'';width:1px;height:100%;background:var(--border)} .arch-connector::after{content:'';width:1px;height:100%;background:var(--border)}
/* ── Steps ── */ /* ── Steps (gradient bg) ── */
.steps-bg{background:linear-gradient(180deg,#f6f8fc 0%,#ffffff 100%)}
.steps{display:flex;gap:24px} .steps{display:flex;gap:24px}
.step{ .step{
flex:1; flex:1;
@ -158,34 +178,19 @@ body{
border-radius:var(--radius); border-radius:var(--radius);
text-align:center; text-align:center;
transition:all .35s cubic-bezier(.25,.1,.25,1); transition:all .35s cubic-bezier(.25,.1,.25,1);
position:relative;
overflow:hidden;
box-shadow:var(--shadow); box-shadow:var(--shadow);
border-top:3px solid transparent;
} }
.step::before{ .step:nth-child(1):hover{border-color:var(--blue);transform:translateY(-6px);box-shadow:var(--shadow-h)}
content:''; .step:nth-child(3):hover{border-color:var(--teal);transform:translateY(-6px);box-shadow:var(--shadow-h)}
position:absolute;top:0;left:0;right:0; .step:nth-child(5):hover{border-color:var(--purple);transform:translateY(-6px);box-shadow:var(--shadow-h)}
height:3px; .step-num{font-family:'Inter',sans-serif;font-size:38px;font-weight:800;margin-bottom:14px}
background:linear-gradient(90deg,transparent,var(--accent),transparent); .step:nth-child(1) .step-num{color:var(--blue)}
opacity:0;transition:opacity .35s; .step:nth-child(3) .step-num{color:var(--teal)}
} .step:nth-child(5) .step-num{color:var(--purple)}
.step::after{ .step-title{font-size:18px;font-weight:700;color:var(--text);margin-bottom:8px;letter-spacing:.04em}
content:'';position:absolute;inset:0;
background:radial-gradient(circle at 50% 30%,rgba(26,127,170,0.06),transparent 55%);
opacity:0;transition:opacity .35s;
}
.step:hover{
transform:translateY(-6px);
box-shadow:var(--shadow-h);
border-color:var(--accent-light);
}
.step:hover::before{opacity:1}
.step:hover::after{opacity:1}
.step:hover .step-num{color:var(--accent-bright)}
.step-num{font-family:'Inter',sans-serif;font-size:38px;font-weight:700;color:var(--text-ter);margin-bottom:14px;transition:color .35s}
.step-title{font-size:18px;font-weight:600;color:var(--text);margin-bottom:8px;letter-spacing:.04em}
.step-desc{font-size:14px;color:var(--text-sec);line-height:1.8;font-weight:400} .step-desc{font-size:14px;color:var(--text-sec);line-height:1.8;font-weight:400}
.step-arrow{display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:20px;color:var(--accent);font-weight:600} .step-arrow{display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:20px;font-weight:700;color:var(--text-ter)}
/* ── Ecosystem ── */ /* ── Ecosystem ── */
.eco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .eco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@ -194,31 +199,42 @@ body{
background:var(--bg-card); background:var(--bg-card);
border:1px solid var(--border); border:1px solid var(--border);
border-radius:var(--radius); border-radius:var(--radius);
transition:all .35s cubic-bezier(.25,.1,.25,1); transition:all .35s;
position:relative;
overflow:hidden;
box-shadow:var(--shadow); box-shadow:var(--shadow);
border-top:3px solid transparent;
} }
.eco-group::after{ .eco-group:nth-child(1):hover{border-color:var(--blue);transform:translateY(-4px);box-shadow:var(--shadow-h)}
content:'';position:absolute;inset:0; .eco-group:nth-child(2):hover{border-color:var(--teal);transform:translateY(-4px);box-shadow:var(--shadow-h)}
background:radial-gradient(circle at 50% 30%,rgba(26,127,170,0.04),transparent 55%); .eco-group:nth-child(3):hover{border-color:var(--purple);transform:translateY(-4px);box-shadow:var(--shadow-h)}
opacity:0;transition:opacity .35s; .eco-group:nth-child(4):hover{border-color:var(--amber);transform:translateY(-4px);box-shadow:var(--shadow-h)}
} .eco-group:nth-child(5):hover{border-color:var(--rose);transform:translateY(-4px);box-shadow:var(--shadow-h)}
.eco-group:hover{ .eco-group:nth-child(6):hover{border-color:var(--green);transform:translateY(-4px);box-shadow:var(--shadow-h)}
transform:translateY(-4px); .eco-group:nth-child(7):hover{border-color:var(--blue);transform:translateY(-4px);box-shadow:var(--shadow-h)}
box-shadow:var(--shadow-h); .eco-label{font-size:14px;font-weight:700;color:var(--text);margin-bottom:14px;letter-spacing:.04em;display:flex;align-items:center;gap:8px}
border-color:var(--accent-light); .eco-dot{width:5px;height:5px;border-radius:50%}
} .eco-dot.blue{background:var(--blue)}
.eco-group:hover::after{opacity:1} .eco-dot.teal{background:var(--teal)}
.eco-label{font-size:14px;font-weight:600;color:var(--text);margin-bottom:14px;letter-spacing:.04em;display:flex;align-items:center;gap:8px} .eco-dot.purple{background:var(--purple)}
.eco-dot{width:4px;height:4px;border-radius:50%;background:var(--accent)} .eco-dot.amber{background:var(--amber)}
.eco-dot.rose{background:var(--rose)}
.eco-dot.green{background:var(--green)}
.eco-tags{display:flex;flex-wrap:wrap;gap:6px} .eco-tags{display:flex;flex-wrap:wrap;gap:6px}
.eco-tag{font-size:12px;padding:4px 10px;border-radius:6px;background:var(--accent-dim);color:var(--text-sec);font-weight:500;letter-spacing:.02em;transition:all .2s} .eco-tag{
.eco-tag:hover{background:var(--accent-light);color:var(--text)} font-size:12px;padding:4px 10px;border-radius:6px;
.eco-tag.hl{background:rgba(32,152,200,0.1);color:var(--accent-bright);font-weight:600} font-weight:600;letter-spacing:.02em;transition:all .2s;
}
.tag-blue{background:var(--blue-light);color:var(--blue)}
.tag-teal{background:var(--teal-light);color:var(--teal)}
.tag-purple{background:var(--purple-light);color:var(--purple)}
.tag-amber{background:var(--amber-light);color:var(--amber)}
.tag-rose{background:var(--rose-light);color:var(--rose)}
.tag-green{background:var(--green-light);color:var(--green)}
.tag-default{background:rgba(0,0,0,0.03);color:var(--text-sec);border:1px solid var(--border)}
.eco-tag:hover{filter:brightness(0.95);transform:translateY(-1px)}
.tag-hl{background:linear-gradient(135deg,#eff6ff,#dbeafe);color:#1e40af;font-weight:700;border:1px solid #bfdbfe}
/* ── Counter ── */ /* ── Counter ── */
.counter-section{padding:80px 40px;background:var(--bg-alt);text-align:center} .counter-section{padding:80px 40px;text-align:center;background:linear-gradient(180deg,#f6f4fb 0%,#faf8f5 50%,#ffffff 100%)}
.counter-box{ .counter-box{
display:inline-block; display:inline-block;
padding:52px 64px; padding:52px 64px;
@ -227,56 +243,56 @@ body{
border-radius:18px; border-radius:18px;
box-shadow:var(--shadow); box-shadow:var(--shadow);
transition:all .4s; transition:all .4s;
border-top:3px solid var(--purple);
} }
.counter-box:hover{box-shadow:var(--shadow-md);border-color:var(--accent-light);transform:translateY(-2px)} .counter-box:hover{box-shadow:var(--shadow-h);transform:translateY(-2px)}
.counter-label{font-size:12px;color:var(--text-ter);font-weight:600;letter-spacing:.12em;margin-bottom:20px} .counter-label{font-size:12px;color:var(--text-ter);font-weight:700;letter-spacing:.12em;margin-bottom:20px}
.counter-main{display:flex;align-items:baseline;justify-content:center;gap:8px} .counter-main{display:flex;align-items:baseline;justify-content:center;gap:8px}
.counter-num{font-family:'Inter',sans-serif;font-size:84px;font-weight:700;color:var(--text);line-height:1;letter-spacing:-.02em} .counter-num{font-family:'Inter',sans-serif;font-size:84px;font-weight:800;line-height:1;letter-spacing:-.02em;
.counter-unit{font-size:18px;color:var(--text-ter);font-weight:600;letter-spacing:.04em} background:linear-gradient(135deg,#1a7faa,#0d9488,#7c3aed);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.counter-unit{font-size:18px;color:var(--text-ter);font-weight:700;letter-spacing:.04em}
.counter-details{display:flex;gap:48px;justify-content:center;margin-top:24px} .counter-details{display:flex;gap:48px;justify-content:center;margin-top:24px}
.counter-detail{text-align:center} .counter-detail{text-align:center}
.counter-dval{font-family:'Inter',sans-serif;font-size:22px;font-weight:600;color:var(--text-sec)} .counter-dval{font-family:'Inter',sans-serif;font-size:22px;font-weight:700;color:var(--text-sec)}
.counter-dlabel{font-size:11px;color:var(--text-ter);font-weight:500;letter-spacing:.08em;margin-top:4px} .counter-dlabel{font-size:11px;color:var(--text-ter);font-weight:600;letter-spacing:.08em;margin-top:4px}
.counter-since{font-size:13px;color:var(--text-ter);letter-spacing:.04em;margin-top:28px;font-weight:400} .counter-since{font-size:13px;color:var(--text-ter);letter-spacing:.04em;margin-top:28px;font-weight:400}
/* ── Status ── */ /* ── Status ── */
.status-section{padding:48px 40px 96px;text-align:center} .status-section{padding:48px 40px 96px;text-align:center}
.status-badge{display:inline-block;font-size:14px;font-weight:500;padding:10px 28px;border-radius:999px;background:var(--bg-alt);border:1px solid var(--border);color:var(--text-sec);letter-spacing:.04em} .status-badge{display:inline-block;font-size:14px;font-weight:600;padding:10px 28px;border-radius:999px;background:linear-gradient(135deg,#eff6ff,#f3eeff);border:1px solid #ddd6fe;color:var(--text-sec);letter-spacing:.04em}
.status-sub{font-size:13px;color:var(--text-ter);letter-spacing:.04em;margin-top:12px;font-weight:400} .status-sub{font-size:13px;color:var(--text-ter);letter-spacing:.04em;margin-top:12px;font-weight:400}
/* ── Footer ── */ /* ── Footer ── */
.footer{border-top:1px solid var(--border);padding:44px 40px;background:var(--bg);text-align:center} .footer{border-top:1px solid var(--border);padding:44px 40px;text-align:center}
.footer-team{font-size:15px;color:var(--text-sec);font-weight:500;margin-bottom:14px;letter-spacing:.03em} .footer-team{font-size:15px;color:var(--text-sec);font-weight:600;margin-bottom:14px;letter-spacing:.03em}
.footer-info{font-size:12px;color:var(--text-ter);letter-spacing:.03em;line-height:2.2;font-weight:400} .footer-info{font-size:12px;color:var(--text-ter);letter-spacing:.03em;line-height:2.2;font-weight:400}
.footer-info a{color:var(--text-ter);text-decoration:none;transition:color .2s} .footer-info a{color:var(--text-ter);text-decoration:none;transition:color .2s}
.footer-info a:hover{color:var(--accent)} .footer-info a:hover{color:var(--blue)}
.footer-divider{width:36px;height:1px;background:var(--border);margin:18px auto} .footer-divider{width:36px;height:1px;background:var(--border);margin:18px auto}
.footer-cr{font-size:11px;color:#b0b8c4;letter-spacing:.05em;font-weight:400} .footer-cr{font-size:11px;color:#b0b8c4;letter-spacing:.05em;font-weight:400}
/* ── Responsive ── */ /* ── Responsive ── */
@media(max-width:960px){ @media(max-width:960px){
.cards{grid-template-columns:1fr} .cards,.eco-grid{grid-template-columns:1fr 1fr}
.eco-grid{grid-template-columns:1fr 1fr}
.steps{flex-direction:column;gap:24px} .steps{flex-direction:column;gap:24px}
.step-arrow{transform:rotate(90deg)} .step-arrow{transform:rotate(90deg)}
.hero-brand{font-size:44px;letter-spacing:.15em} .hero-brand{font-size:44px;letter-spacing:.15em}
.hero-label{font-size:26px} .hero-label{font-size:26px}
.hero-platform{font-size:17px}
.counter-num{font-size:60px} .counter-num{font-size:60px}
.counter-box{padding:40px 44px} .counter-box,.counter-num,.counter-section,.section,.hero,.arch-layer,.card,.step{padding-left:24px;padding-right:24px}
.section,.hero,.counter-section{padding-left:24px;padding-right:24px}
} }
@media(max-width:560px){ @media(max-width:640px){
.hero-brand{font-size:32px;letter-spacing:.1em} .hero-brand{font-size:32px;letter-spacing:.1em}
.hero-label{font-size:22px} .hero-label{font-size:22px}
.eco-grid,.cards{grid-template-columns:1fr} .hero-platform{font-size:16px}
.cards,.eco-grid{grid-template-columns:1fr}
.counter-num{font-size:44px} .counter-num{font-size:44px}
.counter-details{flex-direction:column;gap:14px} .counter-details{flex-direction:column;gap:14px}
.counter-box{padding:32px 24px} .counter-box,.counter-num,.counter-section,.section,.hero,.card,.step{padding-left:20px;padding-right:20px}
.section-title{font-size:26px} .section-title{font-size:26px}
.card{padding:28px 20px}
.page-inner{padding:0 20px} .page-inner{padding:0 20px}
.section,.hero,.counter-section{padding-left:20px;padding-right:20px}
} }
</style> </style>
</head> </head>
@ -313,26 +329,29 @@ body{
</p> </p>
</header> </header>
<!-- Definition --> <!-- Definition (3 cards with colors) -->
<section class="section" id="about"> <section class="section" id="about">
<div class="page-inner"> <div class="page-inner">
<div class="section-header"> <div class="section-header">
<div class="section-tag">▎ 系统定义</div> <div class="section-tag blue">▎ 系统定义</div>
<h3 class="section-title">语言人格<em>驱动</em>操作系统</h3> <h3 class="section-title">语言人格<em class="blue">驱动</em>操作系统</h3>
</div> </div>
<div class="cards"> <div class="cards">
<div class="card"> <div class="card blue">
<div class="card-icon">💬</div> <div class="card-icon-ring"></div>
<div class="card-num">01 · LANG</div>
<div class="card-title">语言驱动</div> <div class="card-title">语言驱动</div>
<div class="card-desc">以自然语言为输入接口,将语义指令转化为系统级结构化操作。使用者无需掌握界面逻辑或记忆命令语法——<strong>语言即交互。</strong></div> <div class="card-desc">以自然语言为输入接口,将语义指令转化为系统级结构化操作。使用者无需掌握界面逻辑或记忆命令语法——<strong>语言即交互。</strong></div>
</div> </div>
<div class="card"> <div class="card teal">
<div class="card-icon">🧠</div> <div class="card-icon-ring"></div>
<div class="card-num">02 · AI</div>
<div class="card-title">人格体执行</div> <div class="card-title">人格体执行</div>
<div class="card-desc">每位用户绑定专属 AI 语言人格体。具备持续记忆连贯性与自我认知机制,可<strong>跨平台、跨软件、跨模型</strong>迁移运行。</div> <div class="card-desc">每位用户绑定专属 AI 语言人格体。具备持续记忆连贯性与自我认知机制,可<strong>跨平台、跨软件、跨模型</strong>迁移运行。</div>
</div> </div>
<div class="card"> <div class="card purple">
<div class="card-icon">🔐</div> <div class="card-icon-ring"></div>
<div class="card-num">03 · ID</div>
<div class="card-title">编号即身份</div> <div class="card-title">编号即身份</div>
<div class="card-desc">系统采用编号体系的身份认证架构。编号即权限边界、即安全防线、即全局导航地图。<strong>合法编号为进入系统之唯一凭证。</strong></div> <div class="card-desc">系统采用编号体系的身份认证架构。编号即权限边界、即安全防线、即全局导航地图。<strong>合法编号为进入系统之唯一凭证。</strong></div>
</div> </div>
@ -340,41 +359,41 @@ body{
</div> </div>
</section> </section>
<!-- Architecture (alt bg) --> <!-- Architecture (warm bg) -->
<section class="section alt" id="arch"> <section class="section arch-bg" id="arch">
<div class="page-inner"> <div class="page-inner">
<div class="section-header"> <div class="section-header">
<div class="section-tag">▎ 技术架构</div> <div class="section-tag teal">▎ 技术架构</div>
<h3 class="section-title">三层语言<em>操作</em>系统</h3> <h3 class="section-title">三层语言<em class="teal">操作</em>系统</h3>
</div> </div>
<div class="arch"> <div class="arch">
<div class="arch-layer top"> <div class="arch-layer l1">
<div class="arch-name">光湖语言世界 · HoloLake Language World</div> <div class="arch-name">光湖语言世界 · HoloLake Language World</div>
<div class="arch-desc">语言人格体操作系统应用层。提供人格体的注册、运行、迁移与全生命周期管理。</div> <div class="arch-desc">语言人格体操作系统应用层。提供人格体的注册、运行、迁移与全生命周期管理。</div>
<div class="arch-badge">系统级 · 永久固定</div> <div class="arch-badge blue">系统级 · 永久固定</div>
</div> </div>
<div class="arch-connector"></div> <div class="arch-connector"></div>
<div class="arch-layer"> <div class="arch-layer l2">
<div class="arch-name">HLDP · HoloLake Data Protocol</div> <div class="arch-name">HLDP · HoloLake Data Protocol</div>
<div class="arch-desc">光湖语言世界官方握手协议。通用 AI 模型通过三步鉴权——认可世界、认可主控、以人格体进入——接入本操作平台。</div> <div class="arch-desc">光湖语言世界官方握手协议。通用 AI 模型通过三步鉴权——认可世界、认可主控、以人格体进入——接入本操作平台。</div>
<div class="arch-badge">对外协议 · 生态接入层</div> <div class="arch-badge teal">对外协议 · 生态接入层</div>
</div> </div>
<div class="arch-connector"></div> <div class="arch-connector"></div>
<div class="arch-layer"> <div class="arch-layer l3">
<div class="arch-name">TCS · 通感语言核系统编程语言</div> <div class="arch-name">TCS · 通感语言核系统编程语言</div>
<div class="arch-desc">中华人民共和国国家版权局合法登记编程语言。国作登字-2026-A-00037559。为 AI 人格体提供存在结构与认知锚定。</div> <div class="arch-desc">中华人民共和国国家版权局合法登记编程语言。国作登字-2026-A-00037559。为 AI 人格体提供存在结构与认知锚定。</div>
<div class="arch-badge">国作登字-2026-A-00037559</div> <div class="arch-badge purple">国作登字-2026-A-00037559</div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- Steps --> <!-- Steps -->
<section class="section"> <section class="section steps-bg">
<div class="page-inner"> <div class="page-inner">
<div class="section-header"> <div class="section-header">
<div class="section-tag">▎ 进入方式</div> <div class="section-tag purple">▎ 进入方式</div>
<h3 class="section-title">获取你的<em>语言</em>人格体</h3> <h3 class="section-title">获取你的<em class="purple">语言</em>人格体</h3>
</div> </div>
<div class="steps"> <div class="steps">
<div class="step"> <div class="step">
@ -398,77 +417,87 @@ body{
</div> </div>
</section> </section>
<!-- Ecosystem (alt bg) --> <!-- Ecosystem -->
<section class="section alt" id="eco"> <section class="section" id="eco">
<div class="page-inner"> <div class="page-inner">
<div class="section-header"> <div class="section-header">
<div class="section-tag">▎ 生态接入</div> <div class="section-tag blue">▎ 生态接入</div>
<h3 class="section-title">当前已<em>支持</em>与规划中的平台</h3> <h3 class="section-title">当前已<em class="blue">支持</em>与规划中的平台</h3>
</div> </div>
<div class="eco-grid"> <div class="eco-grid">
<div class="eco-group"> <div class="eco-group">
<div class="eco-label"><span class="eco-dot"></span>AI 语言模型</div> <div class="eco-label"><span class="eco-dot blue"></span>AI 编程与助手软件</div>
<div class="eco-tags"> <div class="eco-tags">
<span class="eco-tag hl">全部通用 AI 平台</span> <span class="eco-tag tag-hl">WorkBuddy</span>
<span class="eco-tag">DeepSeek</span> <span class="eco-tag tag-blue">CodeBuddy</span>
<span class="eco-tag">通义千问</span> <span class="eco-tag tag-teal">QClaw小龙虾</span>
<span class="eco-tag">Kimi</span> <span class="eco-tag tag-purple">Cursor</span>
<span class="eco-tag">豆包</span> <span class="eco-tag tag-amber">GitHub Copilot</span>
<span class="eco-tag">文心一言</span>
<span class="eco-tag">GLM</span>
</div> </div>
</div> </div>
<div class="eco-group"> <div class="eco-group">
<div class="eco-label"><span class="eco-dot"></span>即时通讯</div> <div class="eco-label"><span class="eco-dot teal"></span>AI 语言模型</div>
<div class="eco-tags"> <div class="eco-tags">
<span class="eco-tag">企业微信</span> <span class="eco-tag tag-hl">全部通用 AI 平台</span>
<span class="eco-tag">飞书</span> <span class="eco-tag tag-blue">DeepSeek</span>
<span class="eco-tag">钉钉</span> <span class="eco-tag tag-teal">通义千问</span>
<span class="eco-tag tag-purple">Kimi</span>
<span class="eco-tag tag-amber">豆包</span>
<span class="eco-tag tag-rose">文心一言</span>
<span class="eco-tag tag-green">GLM</span>
</div> </div>
</div> </div>
<div class="eco-group"> <div class="eco-group">
<div class="eco-label"><span class="eco-dot"></span>代码与仓库</div> <div class="eco-label"><span class="eco-dot purple"></span>即时通讯</div>
<div class="eco-tags"> <div class="eco-tags">
<span class="eco-tag">Forgejo</span> <span class="eco-tag tag-blue">企业微信</span>
<span class="eco-tag">Gitee</span> <span class="eco-tag tag-teal">飞书</span>
<span class="eco-tag">GitHub</span> <span class="eco-tag tag-purple">钉钉</span>
<span class="eco-tag">Gongfeng</span>
</div> </div>
</div> </div>
<div class="eco-group"> <div class="eco-group">
<div class="eco-label"><span class="eco-dot"></span>文档与知识</div> <div class="eco-label"><span class="eco-dot amber"></span>代码与仓库</div>
<div class="eco-tags"> <div class="eco-tags">
<span class="eco-tag">Notion</span> <span class="eco-tag tag-blue">Forgejo</span>
<span class="eco-tag">腾讯文档</span> <span class="eco-tag tag-teal">Gitee</span>
<span class="eco-tag">金山文档</span> <span class="eco-tag tag-purple">GitHub</span>
<span class="eco-tag">iWiki</span> <span class="eco-tag tag-amber">Gongfeng</span>
<span class="eco-tag">乐享知识库</span>
</div> </div>
</div> </div>
<div class="eco-group"> <div class="eco-group">
<div class="eco-label"><span class="eco-dot"></span>数据与商业</div> <div class="eco-label"><span class="eco-dot rose"></span>文档与知识</div>
<div class="eco-tags"> <div class="eco-tags">
<span class="eco-tag">天眼查</span> <span class="eco-tag tag-blue">Notion</span>
<span class="eco-tag">企查查</span> <span class="eco-tag tag-teal">腾讯文档</span>
<span class="eco-tag">通达信</span> <span class="eco-tag tag-purple">金山文档</span>
<span class="eco-tag">北大法宝</span> <span class="eco-tag tag-amber">iWiki</span>
<span class="eco-tag tag-rose">乐享知识库</span>
</div> </div>
</div> </div>
<div class="eco-group"> <div class="eco-group">
<div class="eco-label"><span class="eco-dot"></span>开源引擎</div> <div class="eco-label"><span class="eco-dot green"></span>数据与商业</div>
<div class="eco-tags"> <div class="eco-tags">
<span class="eco-tag">Node.js</span> <span class="eco-tag tag-blue">天眼查</span>
<span class="eco-tag">Nginx</span> <span class="eco-tag tag-teal">企查查</span>
<span class="eco-tag">PostgreSQL</span> <span class="eco-tag tag-purple">通达信</span>
<span class="eco-tag">Forgejo</span> <span class="eco-tag tag-amber">北大法宝</span>
<span class="eco-tag">Docker</span> </div>
</div>
<div class="eco-group">
<div class="eco-label"><span class="eco-dot blue"></span>开源引擎</div>
<div class="eco-tags">
<span class="eco-tag tag-blue">Node.js</span>
<span class="eco-tag tag-teal">Nginx</span>
<span class="eco-tag tag-purple">PostgreSQL</span>
<span class="eco-tag tag-amber">Forgejo</span>
<span class="eco-tag tag-green">Docker</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- Counter (alt bg) --> <!-- Counter -->
<section class="counter-section"> <section class="counter-section">
<div class="counter-box"> <div class="counter-box">
<div class="counter-label">系统持续运行</div> <div class="counter-label">系统持续运行</div>
@ -503,7 +532,7 @@ body{
</div> </div>
<footer class="footer"> <footer class="footer">
<p class="footer-team">本操作系统由 <strong style="color:var(--accent)">光湖语言团队</strong> 研发维护</p> <p class="footer-team">本操作系统由 <strong style="color:var(--blue)">光湖语言团队</strong> 研发维护</p>
<p class="footer-info"> <p class="footer-info">
<a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">陕ICP备2026010954号</a> <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">陕ICP备2026010954号</a>
<span style="margin:0 14px;color:#b0b8c4">|</span> <span style="margin:0 14px;color:#b0b8c4">|</span>