JOJO
39a7a5fc6f
- website-content/：官网 10 篇文档内容 + README - website-design/：官网设计稿、动画实验、预览图与资源 - 根目录官网截图两张 - .gitignore 忽略 website-design/exp/static/dist 构建产物（7.1MB）
253 lines
11 KiB
CSS
253 lines
11 KiB
CSS
/* ============================================================
|
|
Astrion 官网 · 版本二：深色星尘（星图 / 天文台）
|
|
============================================================ */
|
|
:root {
|
|
--space: #0b0d12;
|
|
--panel: #11141b;
|
|
--ink: #e9e6dd;
|
|
--ink-soft: #9a968c;
|
|
--line: rgba(233, 230, 221, .1);
|
|
--accent: #e8a87c;
|
|
--accent-deep: #cc785c;
|
|
--sans: "Sora", "Noto Sans SC", "PingFang SC", system-ui, sans-serif;
|
|
--mono: "IBM Plex Mono", "SF Mono", Menlo, monospace;
|
|
}
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
html { scroll-behavior: smooth; }
|
|
body {
|
|
background: var(--space);
|
|
color: var(--ink);
|
|
font-family: var(--sans);
|
|
font-size: 16px; line-height: 1.75;
|
|
overflow-x: hidden;
|
|
}
|
|
::selection { background: var(--accent-deep); color: #fff; }
|
|
.mono { font-family: var(--mono); }
|
|
.hidden { display: none !important; }
|
|
|
|
#sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
|
|
|
|
/* ---------- 入场动效 ---------- */
|
|
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
|
|
.reveal.in { opacity: 1; transform: none; }
|
|
.reveal.d1 { transition-delay: .08s; }
|
|
.reveal.d2 { transition-delay: .16s; }
|
|
.reveal.d3 { transition-delay: .24s; }
|
|
.reveal.d4 { transition-delay: .32s; }
|
|
|
|
/* ---------- 导航 ---------- */
|
|
.nav {
|
|
position: sticky; top: 0; z-index: 20;
|
|
display: flex; align-items: center; gap: 32px;
|
|
padding: 16px 40px;
|
|
background: var(--space);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
|
|
.brand-mark { width: 30px; height: 30px; }
|
|
.brand-mark .hex { fill: none; stroke: var(--ink); stroke-width: 9; }
|
|
.brand-mark .eye { stroke: var(--accent); stroke-width: 9; stroke-linecap: round; }
|
|
.brand-name { font-weight: 600; font-size: 19px; letter-spacing: .04em; }
|
|
.brand-tag {
|
|
font-size: 10px; letter-spacing: .22em; color: var(--ink-soft);
|
|
border: 1px solid var(--line); border-radius: 4px; padding: 2px 7px;
|
|
}
|
|
.nav-links { display: flex; gap: 26px; margin-left: auto; }
|
|
.nav-links a { color: var(--ink-soft); text-decoration: none; font-size: 14px; transition: color .2s; }
|
|
.nav-links a:hover { color: var(--accent); }
|
|
|
|
.btn {
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
border: 1px solid var(--line); border-radius: 8px;
|
|
padding: 9px 18px; font-size: 14px; text-decoration: none;
|
|
font-family: var(--sans); cursor: pointer;
|
|
transition: all .2s; background: transparent; color: var(--ink);
|
|
}
|
|
.btn:active { transform: translateY(1px); }
|
|
.btn-accent { background: var(--accent); border-color: var(--accent); color: #16120c; font-weight: 600; }
|
|
.btn-accent:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
|
|
.btn-lg { padding: 13px 26px; font-size: 15px; border-radius: 10px; }
|
|
|
|
/* ---------- Hero ---------- */
|
|
.hero { position: relative; z-index: 1; max-width: 1160px; margin: 0 auto; padding: 90px 40px 30px; }
|
|
.hero-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 40px; align-items: center; }
|
|
.coord { font-size: 12px; letter-spacing: .26em; color: var(--accent); margin-bottom: 26px; }
|
|
.hero-title { font-weight: 700; font-size: clamp(40px, 5.6vw, 72px); line-height: 1.22; letter-spacing: .01em; }
|
|
.hero-title .accent { color: var(--accent); }
|
|
.hero-sub { margin-top: 26px; max-width: 520px; color: var(--ink-soft); font-size: 16.5px; }
|
|
.hero-cta { margin-top: 38px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
|
|
.clone-chip {
|
|
display: inline-flex; align-items: center; gap: 10px;
|
|
border: 1px solid var(--line); background: var(--panel);
|
|
border-radius: 10px; padding: 12px 16px;
|
|
font-size: 13px; color: var(--ink); cursor: pointer;
|
|
transition: border-color .2s;
|
|
}
|
|
.clone-chip:hover { border-color: var(--accent); }
|
|
.clone-chip .prompt { color: var(--accent); }
|
|
.clone-chip .copy-hint { font-size: 12px; color: var(--ink-soft); border-left: 1px solid var(--line); padding-left: 10px; }
|
|
.clone-chip.copied .copy-hint { color: #7fbf7f; }
|
|
.hero-meta { margin-top: 30px; display: flex; gap: 14px; font-size: 13px; color: var(--ink-soft); }
|
|
.hero-meta i { font-style: normal; opacity: .4; }
|
|
.hero-meta em { font-style: normal; color: var(--accent); font-size: 11px; }
|
|
|
|
.hero-mark { text-align: center; }
|
|
.hero-mark svg { width: 300px; max-width: 100%; }
|
|
.ring-lines line { stroke: var(--line); stroke-width: 1; }
|
|
.orbit-slow { transform-origin: 160px 160px; animation: orbit 40s linear infinite; }
|
|
@keyframes orbit { to { transform: rotate(360deg); } }
|
|
.sat { fill: var(--accent); }
|
|
.sat.s2 { fill: var(--ink-soft); }
|
|
.mark-hex { fill: none; stroke: var(--ink); stroke-width: 10; }
|
|
.mark-eye { stroke: var(--accent); stroke-width: 10; stroke-linecap: round; }
|
|
.mark-caption { margin-top: 10px; font-size: 11px; letter-spacing: .3em; color: var(--ink-soft); }
|
|
|
|
.hero-stats {
|
|
margin-top: 60px; display: grid; grid-template-columns: repeat(4, 1fr);
|
|
border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
|
|
}
|
|
.stat { padding: 22px 10px; text-align: center; border-right: 1px solid var(--line); }
|
|
.stat:last-child { border-right: none; }
|
|
.stat b { display: block; font-size: 30px; font-weight: 600; color: var(--accent); }
|
|
.stat span { font-size: 12.5px; color: var(--ink-soft); font-family: var(--sans); }
|
|
|
|
/* ---------- 产品实拍 ---------- */
|
|
.shot-section { position: relative; z-index: 1; max-width: 1060px; margin: 60px auto 0; padding: 0 24px; }
|
|
.term-shot {
|
|
border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
|
|
background: var(--panel);
|
|
box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .8);
|
|
}
|
|
.term-bar {
|
|
display: flex; justify-content: space-between;
|
|
padding: 11px 16px; border-bottom: 1px solid var(--line);
|
|
font-size: 12px; color: var(--ink-soft);
|
|
}
|
|
.term-bar .dim { opacity: .6; }
|
|
.term-shot img { display: block; width: 100%; }
|
|
|
|
/* ---------- 章节公共 ---------- */
|
|
section { position: relative; z-index: 1; }
|
|
.sec-title { font-weight: 700; font-size: clamp(30px, 4.2vw, 50px); line-height: 1.3; }
|
|
.sec-sub { color: var(--ink-soft); margin-top: 16px; max-width: 620px; }
|
|
|
|
/* ---------- 模式演示 ---------- */
|
|
.modes { max-width: 1060px; margin: 0 auto; padding: 130px 24px 0; }
|
|
.mode-board {
|
|
margin-top: 40px;
|
|
border: 1px solid var(--line); border-radius: 16px;
|
|
background: var(--panel); padding: 30px 34px 26px;
|
|
}
|
|
.mode-group {
|
|
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
|
|
padding: 13px 0; border-bottom: 1px dashed var(--line);
|
|
}
|
|
.mode-group:last-of-type { border-bottom: none; }
|
|
.mg-label { width: 92px; font-size: 12.5px; color: var(--ink-soft); flex-shrink: 0; letter-spacing: .1em; }
|
|
.mg-opt {
|
|
border: 1px solid var(--line); background: var(--space);
|
|
border-radius: 8px; padding: 6px 15px; font-size: 13.5px;
|
|
font-family: var(--sans); color: var(--ink); cursor: pointer;
|
|
transition: all .18s;
|
|
}
|
|
.mg-opt:hover { border-color: var(--accent); }
|
|
.mg-opt.active { background: var(--accent); color: #16120c; border-color: var(--accent); font-weight: 600; }
|
|
.mode-verdict {
|
|
margin-top: 22px; padding: 15px 20px;
|
|
border-left: 2px solid var(--accent);
|
|
background: var(--space); border-radius: 0 10px 10px 0;
|
|
font-size: 13px; color: var(--ink-soft);
|
|
min-height: 52px; line-height: 1.7;
|
|
}
|
|
|
|
/* ---------- 能力星图 ---------- */
|
|
.features { max-width: 1060px; margin: 0 auto; padding: 130px 24px 0; }
|
|
.star-chart {
|
|
margin-top: 46px;
|
|
display: grid; grid-template-columns: repeat(3, 1fr);
|
|
border-top: 1px solid var(--line); border-left: 1px solid var(--line);
|
|
}
|
|
.fnode {
|
|
border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
|
|
padding: 28px 26px 32px;
|
|
transition: background .25s;
|
|
}
|
|
.fnode:hover { background: var(--panel); }
|
|
.fn-id { font-size: 11px; letter-spacing: .18em; color: var(--accent); }
|
|
.fnode h3 { font-size: 19px; font-weight: 600; margin: 12px 0 10px; }
|
|
.fnode p { color: var(--ink-soft); font-size: 14px; }
|
|
.tag-beta {
|
|
font-style: normal; font-family: var(--mono); font-size: 10px;
|
|
border: 1px solid var(--accent-deep); color: var(--accent);
|
|
border-radius: 4px; padding: 1px 6px; vertical-align: 2px;
|
|
}
|
|
|
|
/* ---------- 安全区（天文台数据面板） ---------- */
|
|
.security { max-width: 1060px; margin: 0 auto; padding: 130px 24px 0; }
|
|
.obs-panel {
|
|
margin-top: 42px;
|
|
border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
|
|
background: var(--panel);
|
|
}
|
|
.obs-row {
|
|
display: grid; grid-template-columns: 140px 190px 1fr; gap: 18px;
|
|
padding: 18px 24px; font-size: 14.5px;
|
|
border-bottom: 1px solid var(--line); align-items: center;
|
|
}
|
|
.obs-row:last-child { border-bottom: none; }
|
|
.obs-head { font-size: 11.5px; letter-spacing: .2em; color: var(--ink-soft); padding: 13px 24px; }
|
|
.obs-os { font-weight: 700; font-size: 16px; }
|
|
.obs-row .dim { color: var(--ink-soft); font-size: 12.5px; }
|
|
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 10px; }
|
|
.dot.ok { background: #7fbf7f; }
|
|
.dot.warn { background: #d9b45c; }
|
|
.dot.bad { background: #d97a6c; }
|
|
|
|
/* ---------- 快速上手 ---------- */
|
|
.quickstart { max-width: 860px; margin: 0 auto; padding: 130px 24px 0; }
|
|
.qs-grid { margin-top: 42px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
|
|
.qs-tabs { display: flex; background: var(--panel); border-bottom: 1px solid var(--line); }
|
|
.qs-tab {
|
|
border: none; background: transparent; cursor: pointer;
|
|
padding: 12px 22px; font-size: 13px;
|
|
color: var(--ink-soft); border-right: 1px solid var(--line);
|
|
transition: all .18s;
|
|
}
|
|
.qs-tab.active { background: var(--space); color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
|
|
.qs-code {
|
|
background: #0d0f15; color: #e6e2d6;
|
|
padding: 26px 28px; font-size: 13.5px; line-height: 1.85;
|
|
overflow-x: auto;
|
|
}
|
|
.qs-code .c-cmt { color: #6f6a5c; }
|
|
.qs-end { margin-top: 22px; color: var(--accent); font-size: 14px; }
|
|
|
|
/* ---------- Footer ---------- */
|
|
.footer {
|
|
margin-top: 140px;
|
|
border-top: 1px solid var(--line);
|
|
padding: 64px 40px 40px;
|
|
display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start;
|
|
position: relative; z-index: 1;
|
|
}
|
|
.brand-mark.lg { width: 54px; height: 54px; }
|
|
.foot-brand { max-width: 320px; }
|
|
.foot-line { margin-top: 18px; font-size: 14px; color: var(--ink-soft); }
|
|
.foot-links { display: flex; flex-direction: column; gap: 12px; margin-left: auto; font-size: 13px; }
|
|
.foot-links a { color: var(--ink-soft); text-decoration: none; letter-spacing: .08em; }
|
|
.foot-links a:hover { color: var(--accent); }
|
|
.foot-copy { width: 100%; margin-top: 28px; font-size: 11.5px; color: var(--ink-soft); letter-spacing: .18em; }
|
|
|
|
/* ---------- 响应式 ---------- */
|
|
@media (max-width: 860px) {
|
|
.hero-grid { grid-template-columns: 1fr; }
|
|
.hero-mark { order: -1; }
|
|
.hero-mark svg { width: 220px; }
|
|
.star-chart { grid-template-columns: 1fr; }
|
|
.hero-stats { grid-template-columns: repeat(2, 1fr); }
|
|
.stat:nth-child(2) { border-right: none; }
|
|
.nav-links { display: none; }
|
|
.obs-row { grid-template-columns: 1fr; gap: 4px; }
|
|
}
|