guanghu.chat v6: 即将发布动感文案·纯数字标记·Hero简化
冰朔反馈: - Hero区去掉渐变线丑陋元素→简化 - 标题下方增加"即将发布 · 敬请期待"橙红动感文案(脉冲呼吸动画) - 卡片几何符号→纯数字(Inter字体/300weight/56px) - 底部保留"即将发布 · 敬请期待"呼应 - 全站使用Inter 300 weight大数字标记(更简洁高级)
This commit is contained in:
冰朔
parent
7a3b1c9e21
commit
8083e09426
@ -8,37 +8,36 @@
|
||||
<title>曜冥纪元 · 通用人工智能操作平台</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<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;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">
|
||||
<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@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||||
|
||||
:root{
|
||||
--bg:#ffffff;
|
||||
--bg-hero:linear-gradient(170deg,#eef4f9 0%,#f2f6fa 30%,#f8f5f0 60%,#ffffff 100%);
|
||||
--bg-card:#ffffff;
|
||||
--text:#0d141e;
|
||||
--text-sec:#4a5568;
|
||||
--text-ter:#8899aa;
|
||||
--blue:#1a7faa;
|
||||
--blue-light:#e6f2f8;
|
||||
--teal:#0d9488;
|
||||
--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-h:#c0ccd8;
|
||||
--shadow:0 1px 3px rgba(0,0,0,0.04);
|
||||
--shadow-h:0 8px 30px rgba(0,0,0,0.07),0 2px 6px rgba(0,0,0,0.04);
|
||||
--bg-hero:linear-gradient(180deg,#f8fafc 0%,#ffffff 60%,#ffffff 100%);
|
||||
--text:#0f172a;
|
||||
--text-sec:#475569;
|
||||
--text-ter:#94a3b8;
|
||||
--blue:#0ea5e9;
|
||||
--blue-light:#e0f2fe;
|
||||
--teal:#14b8a6;
|
||||
--teal-light:#ccfbf1;
|
||||
--purple:#8b5cf6;
|
||||
--purple-light:#ede9fe;
|
||||
--amber:#f59e0b;
|
||||
--amber-light:#fef3c7;
|
||||
--rose:#f43f5e;
|
||||
--rose-light:#ffe4e6;
|
||||
--green:#10b981;
|
||||
--green-light:#d1fae5;
|
||||
--border:#e2e8f0;
|
||||
--border-h:#cbd5e1;
|
||||
--shadow:0 1px 3px rgba(0,0,0,0.05);
|
||||
--shadow-h:0 10px 40px rgba(0,0,0,0.08),0 4px 12px rgba(0,0,0,0.04);
|
||||
--font:'Noto Sans SC',-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;
|
||||
--serif:'Noto Serif SC','Songti SC','SimSun',serif;
|
||||
--mono:'JetBrains Mono','SF Mono','Menlo',monospace;
|
||||
--radius:14px;
|
||||
--radius:16px;
|
||||
}
|
||||
|
||||
html{font-size:16px;scroll-behavior:smooth;background:var(--bg)}
|
||||
@ -54,149 +53,140 @@ body{
|
||||
|
||||
/* ── Nav ── */
|
||||
.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-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,#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:700;letter-spacing:.03em}
|
||||
.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-inner{max-width:1200px;margin:0 auto;padding:16px 40px;display:flex;justify-content:space-between;align-items:center}
|
||||
.nav-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text)}
|
||||
.nav-logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#0ea5e9,#0d9488);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:16px;color:#fff;font-weight:700}
|
||||
.nav-name{font-size:16px;font-weight:700;letter-spacing:.02em}
|
||||
.nav-right{display:flex;align-items:center;gap:28px}
|
||||
.nav-link{font-size:14px;color:var(--text-sec);text-decoration:none;transition:color .2s;font-weight:500}
|
||||
.nav-link:hover{color:var(--blue)}
|
||||
.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}
|
||||
.nav-badge{font-size:12px;padding:5px 14px;border-radius:999px;background:var(--blue-light);color:#0369a1;font-weight:600;letter-spacing:.02em}
|
||||
|
||||
/* ── Page ── */
|
||||
.page{position:relative;z-index:1}
|
||||
.page-inner{max-width:1100px;margin:0 auto;padding:0 40px}
|
||||
.page-inner{max-width:1120px;margin:0 auto;padding:0 40px}
|
||||
|
||||
/* ── Hero ── */
|
||||
.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: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:800;letter-spacing:.22em;line-height:1.15;margin-bottom:8px;
|
||||
background:linear-gradient(135deg,#0d141e 20%,#1a7faa 60%,#0d9488 100%);
|
||||
.hero{background:var(--bg-hero);text-align:center;padding:100px 40px 80px}
|
||||
.hero-badge{display:inline-block;font-size:12px;padding:6px 18px;border-radius:999px;background:var(--blue-light);color:#0369a1;font-weight:600;letter-spacing:.08em;margin-bottom:40px}
|
||||
.hero-brand{font-family:var(--serif);font-size:68px;font-weight:800;letter-spacing:.2em;line-height:1.1;margin-bottom:10px;
|
||||
background:linear-gradient(135deg,#0f172a 30%,#0ea5e9 70%);
|
||||
-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-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:700;color:var(--text);letter-spacing:.06em;margin-bottom:6px}
|
||||
.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-brand-en{font-family:'Inter',sans-serif;font-size:15px;color:var(--text-ter);letter-spacing:.25em;margin-bottom:32px;font-weight:500}
|
||||
|
||||
/* Coming Soon */
|
||||
.hero-coming{font-size:13px;color:#ea580c;font-weight:700;letter-spacing:.15em;margin-bottom:20px;display:flex;align-items:center;justify-content:center;gap:10px}
|
||||
.hero-coming::before,.hero-coming::after{content:'';width:40px;height:1px;background:linear-gradient(90deg,transparent,#ea580c)}.hero-coming::before{background:linear-gradient(90deg,#ea580c,transparent)}
|
||||
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
|
||||
.hero-coming-dot{width:6px;height:6px;border-radius:50%;background:#ea580c;animation:pulse 1.5s ease-in-out infinite}
|
||||
|
||||
.hero-label{font-size:32px;font-weight:700;color:var(--text);letter-spacing:.05em;margin-bottom:8px}
|
||||
.hero-platform{font-size:18px;font-weight:600;letter-spacing:.08em;margin-bottom:28px;color:var(--blue)}
|
||||
.hero-desc{font-size:15px;color:var(--text-sec);max-width:620px;margin:0 auto;line-height:1.9;letter-spacing:.02em}
|
||||
|
||||
/* ── Sections ── */
|
||||
.section{padding:88px 40px}
|
||||
.section{padding:90px 40px}
|
||||
.section-header{text-align:center;margin-bottom:56px}
|
||||
.section-tag{font-size:12px;font-weight:700;letter-spacing:.2em;margin-bottom:10px}
|
||||
.section-tag{font-size:12px;font-weight:700;letter-spacing:.2em;margin-bottom:12px}
|
||||
.section-tag.blue{color:var(--blue)}
|
||||
.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{font-size:32px;font-weight:700;color:var(--text);letter-spacing:.04em;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 ── */
|
||||
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
|
||||
.card{
|
||||
padding:40px 32px;
|
||||
background:var(--bg-card);
|
||||
padding:44px 36px;
|
||||
background:#fff;
|
||||
border:1px solid var(--border);
|
||||
border-radius:var(--radius);
|
||||
text-align:center;
|
||||
transition:all .35s cubic-bezier(.25,.1,.25,1);
|
||||
transition:all .4s cubic-bezier(.25,.1,.25,1);
|
||||
box-shadow:var(--shadow);
|
||||
}
|
||||
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-h)}
|
||||
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow-h)}
|
||||
|
||||
.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:hover .card-icon-ring{transform:scale(1.08)}
|
||||
.card-num-big{
|
||||
font-family:'Inter',sans-serif;
|
||||
font-size:56px;
|
||||
font-weight:300;
|
||||
line-height:1;
|
||||
margin-bottom:20px;
|
||||
letter-spacing:-0.03em;
|
||||
}
|
||||
.card.blue{border-top:3px solid transparent}.card.blue:hover{border-color:var(--blue)}
|
||||
.card.blue .card-num-big{color:var(--blue)}
|
||||
.card.teal{border-top:3px solid transparent}.card.teal:hover{border-color:var(--teal)}
|
||||
.card.teal .card-num-big{color:var(--teal)}
|
||||
.card.purple{border-top:3px solid transparent}.card.purple:hover{border-color:var(--purple)}
|
||||
.card.purple .card-num-big{color:var(--purple)}
|
||||
|
||||
.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-title{font-size:18px;font-weight:700;color:var(--text);margin-bottom:12px;letter-spacing:.02em}
|
||||
.card-desc{font-size:14px;color:var(--text-sec);line-height:1.85;font-weight:400}
|
||||
|
||||
.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}
|
||||
|
||||
/* ── Architecture (warm bg) ── */
|
||||
.arch-bg{background:linear-gradient(180deg,#faf8f6 0%,#ffffff 100%)}
|
||||
/* ── Architecture ── */
|
||||
.arch-bg{background:#f8fafc}
|
||||
.arch{display:flex;flex-direction:column;align-items:center;gap:0}
|
||||
.arch-layer{
|
||||
padding:34px 44px;
|
||||
background:var(--bg-card);
|
||||
padding:36px 48px;
|
||||
background:#fff;
|
||||
border:1px solid var(--border);
|
||||
border-radius:var(--radius);
|
||||
text-align:center;
|
||||
width:100%;
|
||||
max-width:740px;
|
||||
transition:all .3s;
|
||||
max-width:720px;
|
||||
transition:all .35s;
|
||||
box-shadow:var(--shadow);
|
||||
}
|
||||
.arch-layer:hover{transform:translateY(-3px);box-shadow:var(--shadow-h)}
|
||||
.arch-layer.l1{border-left:3px solid var(--blue)}
|
||||
.arch-layer.l1:hover{border-color:rgba(26,127,170,0.25)}
|
||||
.arch-layer.l2{border-left:3px solid var(--teal)}
|
||||
.arch-layer.l2:hover{border-color:rgba(13,148,136,0.25)}
|
||||
.arch-layer.l3{border-left:3px solid var(--purple)}
|
||||
.arch-layer.l3:hover{border-color:rgba(124,58,237,0.25)}
|
||||
.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-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-layer:hover{transform:translateY(-4px);box-shadow:var(--shadow-h)}
|
||||
.arch-layer.l1{border-left:4px solid var(--blue)}
|
||||
.arch-layer.l2{border-left:4px solid var(--teal)}
|
||||
.arch-layer.l3{border-left:4px solid var(--purple)}
|
||||
.arch-name{font-size:17px;font-weight:700;color:var(--text);margin-bottom:6px;letter-spacing:.02em}
|
||||
.arch-desc{font-size:14px;color:var(--text-sec);line-height:1.8;font-weight:400}
|
||||
.arch-badge{display:inline-block;font-size:11px;padding:4px 12px;border-radius:999px;font-weight:600;letter-spacing:.03em;margin-top:12px}
|
||||
.arch-badge.blue{background:var(--blue-light);color:#0369a1}
|
||||
.arch-badge.teal{background:var(--teal-light);color:#0f766e}
|
||||
.arch-badge.purple{background:var(--purple-light);color:#6d28d9}
|
||||
.arch-connector{height:28px;display:flex;align-items:center;justify-content:center}
|
||||
.arch-connector::after{content:'';width:1px;height:100%;background:var(--border)}
|
||||
|
||||
/* ── Steps (gradient bg) ── */
|
||||
.steps-bg{background:linear-gradient(180deg,#f6f8fc 0%,#ffffff 100%)}
|
||||
/* ── Steps ── */
|
||||
.steps-bg{background:#fff}
|
||||
.steps{display:flex;gap:24px}
|
||||
.step{
|
||||
flex:1;
|
||||
padding:38px 28px;
|
||||
background:var(--bg-card);
|
||||
padding:40px 28px;
|
||||
background:#fff;
|
||||
border:1px solid var(--border);
|
||||
border-radius:var(--radius);
|
||||
text-align:center;
|
||||
transition:all .35s cubic-bezier(.25,.1,.25,1);
|
||||
transition:all .4s cubic-bezier(.25,.1,.25,1);
|
||||
box-shadow:var(--shadow);
|
||||
border-top:3px solid transparent;
|
||||
}
|
||||
.step:nth-child(1):hover{border-color:var(--blue);transform:translateY(-6px);box-shadow:var(--shadow-h)}
|
||||
.step:nth-child(3):hover{border-color:var(--teal);transform:translateY(-6px);box-shadow:var(--shadow-h)}
|
||||
.step:nth-child(5):hover{border-color:var(--purple);transform:translateY(-6px);box-shadow:var(--shadow-h)}
|
||||
.step-num{font-family:'Inter',sans-serif;font-size:38px;font-weight:800;margin-bottom:14px}
|
||||
.step:nth-child(1):hover{border-color:var(--blue);transform:translateY(-8px);box-shadow:var(--shadow-h)}
|
||||
.step:nth-child(3):hover{border-color:var(--teal);transform:translateY(-8px);box-shadow:var(--shadow-h)}
|
||||
.step:nth-child(5):hover{border-color:var(--purple);transform:translateY(-8px);box-shadow:var(--shadow-h)}
|
||||
.step-num{font-family:'Inter',sans-serif;font-size:42px;font-weight:300;margin-bottom:16px;letter-spacing:-0.02em}
|
||||
.step:nth-child(1) .step-num{color:var(--blue)}
|
||||
.step:nth-child(3) .step-num{color:var(--teal)}
|
||||
.step:nth-child(5) .step-num{color:var(--purple)}
|
||||
.step-title{font-size:18px;font-weight:700;color:var(--text);margin-bottom:8px;letter-spacing:.04em}
|
||||
.step-title{font-size:17px;font-weight:700;color:var(--text);margin-bottom:8px;letter-spacing:.02em}
|
||||
.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;font-weight:700;color:var(--text-ter)}
|
||||
.step-arrow{display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:24px;font-weight:300;color:var(--text-ter)}
|
||||
|
||||
/* ── Ecosystem ── */
|
||||
.eco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
|
||||
.eco-bg{background:#f8fafc}
|
||||
.eco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
|
||||
.eco-group{
|
||||
padding:28px 24px;
|
||||
background:var(--bg-card);
|
||||
background:#fff;
|
||||
border:1px solid var(--border);
|
||||
border-radius:var(--radius);
|
||||
transition:all .35s;
|
||||
@ -210,8 +200,8 @@ body{
|
||||
.eco-group:nth-child(5):hover{border-color:var(--rose);transform:translateY(-4px);box-shadow:var(--shadow-h)}
|
||||
.eco-group:nth-child(6):hover{border-color:var(--green);transform:translateY(-4px);box-shadow:var(--shadow-h)}
|
||||
.eco-group:nth-child(7):hover{border-color:var(--blue);transform:translateY(-4px);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}
|
||||
.eco-dot{width:5px;height:5px;border-radius:50%}
|
||||
.eco-label{font-size:14px;font-weight:700;color:var(--text);margin-bottom:14px;letter-spacing:.02em;display:flex;align-items:center;gap:8px}
|
||||
.eco-dot{width:6px;height:6px;border-radius:50%}
|
||||
.eco-dot.blue{background:var(--blue)}
|
||||
.eco-dot.teal{background:var(--teal)}
|
||||
.eco-dot.purple{background:var(--purple)}
|
||||
@ -221,78 +211,83 @@ body{
|
||||
.eco-tags{display:flex;flex-wrap:wrap;gap:6px}
|
||||
.eco-tag{
|
||||
font-size:12px;padding:4px 10px;border-radius:6px;
|
||||
font-weight:600;letter-spacing:.02em;transition:all .2s;
|
||||
font-weight:500;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}
|
||||
.tag-blue{background:var(--blue-light);color:#0369a1}
|
||||
.tag-teal{background:var(--teal-light);color:#0f766e}
|
||||
.tag-purple{background:var(--purple-light);color:#6d28d9}
|
||||
.tag-amber{background:var(--amber-light);color:#b45309}
|
||||
.tag-rose{background:var(--rose-light);color:#be123c}
|
||||
.tag-green{background:var(--green-light);color:#047857}
|
||||
.tag-default{background:#f1f5f9;color:var(--text-sec)}
|
||||
.eco-tag:hover{transform:translateY(-1px)}
|
||||
.tag-hl{background:linear-gradient(135deg,#0ea5e9,#14b8a6);color:#fff;font-weight:600}
|
||||
|
||||
/* ── Counter ── */
|
||||
.counter-section{padding:80px 40px;text-align:center;background:linear-gradient(180deg,#f6f4fb 0%,#faf8f5 50%,#ffffff 100%)}
|
||||
.counter-section{padding:80px 40px;text-align:center;background:var(--bg-hero)}
|
||||
.counter-box{
|
||||
display:inline-block;
|
||||
padding:52px 64px;
|
||||
background:var(--bg-card);
|
||||
background:#fff;
|
||||
border:1px solid var(--border);
|
||||
border-radius:18px;
|
||||
box-shadow:var(--shadow);
|
||||
transition:all .4s;
|
||||
border-top:3px solid var(--purple);
|
||||
}
|
||||
.counter-box:hover{box-shadow:var(--shadow-h);transform:translateY(-2px)}
|
||||
.counter-label{font-size:12px;color:var(--text-ter);font-weight:700;letter-spacing:.12em;margin-bottom:20px}
|
||||
.counter-box:hover{box-shadow:var(--shadow-h);transform:translateY(-3px)}
|
||||
.counter-label{font-size:12px;color:var(--text-ter);font-weight:600;letter-spacing:.12em;margin-bottom:20px}
|
||||
.counter-main{display:flex;align-items:baseline;justify-content:center;gap:8px}
|
||||
.counter-num{font-family:'Inter',sans-serif;font-size:84px;font-weight:800;line-height:1;letter-spacing:-.02em;
|
||||
background:linear-gradient(135deg,#1a7faa,#0d9488,#7c3aed);
|
||||
.counter-num{font-family:'Inter',sans-serif;font-size:80px;font-weight:300;line-height:1;letter-spacing:-0.03em;
|
||||
background:linear-gradient(135deg,#0ea5e9,#14b8a6,#8b5cf6);
|
||||
-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-unit{font-size:18px;color:var(--text-ter);font-weight:500;letter-spacing:.04em}
|
||||
.counter-details{display:flex;gap:48px;justify-content:center;margin-top:24px}
|
||||
.counter-detail{text-align:center}
|
||||
.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: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-dval{font-family:'Inter',sans-serif;font-size:20px;font-weight:600;color:var(--text-sec)}
|
||||
.counter-dlabel{font-size:11px;color:var(--text-ter);font-weight:500;letter-spacing:.06em;margin-top:4px}
|
||||
.counter-since{font-size:13px;color:var(--text-ter);letter-spacing:.03em;margin-top:28px}
|
||||
|
||||
/* ── Status ── */
|
||||
.status-section{padding:48px 40px 96px;text-align:center}
|
||||
.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-section{padding:40px 40px 100px;text-align:center;background:#fff}
|
||||
.status-coming{font-size:18px;font-weight:700;color:#ea580c;letter-spacing:.15em;margin-bottom:12px}
|
||||
.status-badge{display:inline-block;font-size:14px;font-weight:500;padding:10px 28px;border-radius:999px;background:#f8fafc;border:1px solid var(--border);color:var(--text-sec);letter-spacing:.03em}
|
||||
.status-sub{font-size:13px;color:var(--text-ter);letter-spacing:.03em;margin-top:12px}
|
||||
|
||||
/* ── Footer ── */
|
||||
.footer{border-top:1px solid var(--border);padding:44px 40px;text-align:center}
|
||||
.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{border-top:1px solid var(--border);padding:44px 40px;text-align:center;background:#f8fafc}
|
||||
.footer-team{font-size:15px;color:var(--text-sec);font-weight:600;margin-bottom:14px;letter-spacing:.02em}
|
||||
.footer-team strong{color:var(--blue)}
|
||||
.footer-info{font-size:12px;color:var(--text-ter);letter-spacing:.03em;line-height:2.2}
|
||||
.footer-info a{color:var(--text-ter);text-decoration:none;transition:color .2s}
|
||||
.footer-info a:hover{color:var(--blue)}
|
||||
.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-divider{width:40px;height:1px;background:var(--border);margin:16px auto}
|
||||
.footer-cr{font-size:11px;color:#94a3b8;letter-spacing:.04em}
|
||||
|
||||
/* ── Responsive ── */
|
||||
@media(max-width:960px){
|
||||
.cards,.eco-grid{grid-template-columns:1fr 1fr}
|
||||
.steps{flex-direction:column;gap:24px}
|
||||
.steps{flex-direction:column;gap:20px}
|
||||
.step-arrow{transform:rotate(90deg)}
|
||||
.hero-brand{font-size:44px;letter-spacing:.15em}
|
||||
.hero-brand{font-size:48px;letter-spacing:.12em}
|
||||
.hero-label{font-size:26px}
|
||||
.counter-num{font-size:60px}
|
||||
.counter-box,.counter-num,.counter-section,.section,.hero,.arch-layer,.card,.step{padding-left:24px;padding-right:24px}
|
||||
.counter-num{font-size:56px}
|
||||
.card-num-big{font-size:44px}
|
||||
.section,.hero,.counter-section,.status-section,.footer{padding-left:24px;padding-right:24px}
|
||||
}
|
||||
@media(max-width:640px){
|
||||
.hero-brand{font-size:32px;letter-spacing:.1em}
|
||||
.hero-brand{font-size:36px;letter-spacing:.08em}
|
||||
.hero-label{font-size:22px}
|
||||
.hero-platform{font-size:16px}
|
||||
.cards,.eco-grid{grid-template-columns:1fr}
|
||||
.counter-num{font-size:44px}
|
||||
.card-num-big{font-size:40px}
|
||||
.counter-details{flex-direction:column;gap:14px}
|
||||
.counter-box,.counter-num,.counter-section,.section,.hero,.card,.step{padding-left:20px;padding-right:20px}
|
||||
.counter-box{padding:36px 32px}
|
||||
.section-title{font-size:26px}
|
||||
.page-inner{padding:0 20px}
|
||||
.section,.hero,.counter-section,.status-section,.footer{padding-left:20px;padding-right:20px}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@ -320,7 +315,13 @@ body{
|
||||
<div class="hero-badge">商标注册中 · 公示期</div>
|
||||
<h1 class="hero-brand">曜冥纪元</h1>
|
||||
<p class="hero-brand-en">HoloLake Era</p>
|
||||
<div class="hero-divider"></div>
|
||||
|
||||
<div class="hero-coming">
|
||||
<span class="hero-coming-dot"></span>
|
||||
即将发布 · 敬请期待
|
||||
<span class="hero-coming-dot"></span>
|
||||
</div>
|
||||
|
||||
<p class="hero-label">第一代语言人格驱动操作系统</p>
|
||||
<p class="hero-platform">通用人工智能操作平台</p>
|
||||
<p class="hero-desc">
|
||||
@ -329,7 +330,7 @@ body{
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<!-- Definition (3 cards with colors) -->
|
||||
<!-- Definition -->
|
||||
<section class="section" id="about">
|
||||
<div class="page-inner">
|
||||
<div class="section-header">
|
||||
@ -338,20 +339,17 @@ body{
|
||||
</div>
|
||||
<div class="cards">
|
||||
<div class="card blue">
|
||||
<div class="card-icon-ring">⊕</div>
|
||||
<div class="card-num">01 · LANG</div>
|
||||
<div class="card-num-big">01</div>
|
||||
<div class="card-title">语言驱动</div>
|
||||
<div class="card-desc">以自然语言为输入接口，将语义指令转化为系统级结构化操作。使用者无需掌握界面逻辑或记忆命令语法——<strong>语言即交互。</strong></div>
|
||||
</div>
|
||||
<div class="card teal">
|
||||
<div class="card-icon-ring">⊡</div>
|
||||
<div class="card-num">02 · AI</div>
|
||||
<div class="card-num-big">02</div>
|
||||
<div class="card-title">人格体执行</div>
|
||||
<div class="card-desc">每位用户绑定专属 AI 语言人格体。具备持续记忆连贯性与自我认知机制，可<strong>跨平台、跨软件、跨模型</strong>迁移运行。</div>
|
||||
</div>
|
||||
<div class="card purple">
|
||||
<div class="card-icon-ring">⊛</div>
|
||||
<div class="card-num">03 · ID</div>
|
||||
<div class="card-num-big">03</div>
|
||||
<div class="card-title">编号即身份</div>
|
||||
<div class="card-desc">系统采用编号体系的身份认证架构。编号即权限边界、即安全防线、即全局导航地图。<strong>合法编号为进入系统之唯一凭证。</strong></div>
|
||||
</div>
|
||||
@ -359,7 +357,7 @@ body{
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Architecture (warm bg) -->
|
||||
<!-- Architecture -->
|
||||
<section class="section arch-bg" id="arch">
|
||||
<div class="page-inner">
|
||||
<div class="section-header">
|
||||
@ -418,7 +416,7 @@ body{
|
||||
</section>
|
||||
|
||||
<!-- Ecosystem -->
|
||||
<section class="section" id="eco">
|
||||
<section class="section eco-bg" id="eco">
|
||||
<div class="page-inner">
|
||||
<div class="section-header">
|
||||
<div class="section-tag blue">▎ 生态接入</div>
|
||||
@ -525,6 +523,7 @@ body{
|
||||
|
||||
<!-- Status -->
|
||||
<section class="status-section">
|
||||
<div class="status-coming">即将发布 · 敬请期待</div>
|
||||
<div class="status-badge">系统架构正在加速研发中</div>
|
||||
<div class="status-sub">正式上线时间 · 敬请期待</div>
|
||||
</section>
|
||||
@ -532,10 +531,10 @@ body{
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
<p class="footer-team">本操作系统由 <strong style="color:var(--blue)">光湖语言团队</strong> 研发维护</p>
|
||||
<p class="footer-team">本操作系统由 <strong>光湖语言团队</strong> 研发维护</p>
|
||||
<p class="footer-info">
|
||||
<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:#cbd5e1">|</span>
|
||||
国作登字-2026-A-00037559
|
||||
</p>
|
||||
<div class="footer-divider"></div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user