*, *::before, *::after { box-sizing: border-box; }
:root{
--bg: #05060f;
--text: #e9edff;
--muted: #98a2c9;
--accent: #7c5cff;
--accent-2: #22d3ee;
--line: rgba(255,255,255,.12);
--radius: 20px;
}
html{ scroll-behavior: smooth; }
body{
margin: 0;
min-height: 100vh;
background: var(--bg);
color: var(--text);
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
line-height: 1.65;
}
/* 背景光晕 */
body::before{
content: "";
position: fixed; inset: 0; z-index: -2; pointer-events: none;
background:
radial-gradient(900px 700px at 85% -10%, rgba(124,92,255,.30), transparent 65%),
radial-gradient(800px 600px at 5% 15%, rgba(34,211,238,.16), transparent 65%),
radial-gradient(760px 700px at 50% 115%, rgba(124,92,255,.14), transparent 70%);
}
#sky{
position: fixed; inset: 0; z-index: -1;
display: block; pointer-events: none;
}
.container{ width: min(1120px, 92vw); margin: 0 auto; }
/* ============ 顶栏 ============ */
.site-header{
position: fixed; top: 0; left: 0; right: 0; z-index: 50;
padding: 18px 0;
transition: padding .3s ease, background .3s ease, border-color .3s ease;
border-bottom: 1px solid transparent;
}
.site-header.scrolled{
padding: 10px 0;
background: rgba(6,8,20,.72);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom-color: var(--line);
}
.nav-wrap{ display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.logo{
display: flex; align-items: center; gap: 10px;
text-decoration: none; color: var(--text);
font-weight: 800; font-size: 18px; letter-spacing: .08em;
}
.logo-mark{
width: 34px; height: 34px; border-radius: 11px;
display: grid; place-items: center;
overflow: hidden;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
box-shadow: 0 8px 24px -10px rgba(124,92,255,.95);
}
.logo-mark img{
width: 100%; height: 100%;
object-fit: cover; display: block;
}
.nav{ display: flex; align-items: center; gap: 6px; }
.nav a{
color: var(--muted); text-decoration: none;
font-size: 15px; padding: 9px 18px; border-radius: 999px;
transition: color .2s ease, background .2s ease;
}
.nav a:hover{ color: #fff; background: rgba(255,255,255,.07); }
.nav-toggle{
display: none;
background: none; border: 1px solid var(--line); color: var(--text);
border-radius: 10px; padding: 6px 13px; font-size: 17px; cursor: pointer;
}
/* ============ 首屏 ============ */
.hero{
min-height: 100vh;
display: flex; align-items: center;
padding: 130px 0 90px;
}
.hero-inner{ text-align: center; max-width: 880px; margin: 0 auto; }
.badge{
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 18px; border-radius: 999px;
border: 1px solid var(--line);
background: rgba(255,255,255,.045);
color: var(--muted); font-size: 13.5px; letter-spacing: .08em;
margin-bottom: 30px;
}
.hero h1{
margin: 0 0 24px;
font-size: clamp(52px, 11vw, 112px);
line-height: 1.02;
letter-spacing: .06em;
font-weight: 900;
background: linear-gradient(180deg, #ffffff 25%, #8b97c6 100%);
-webkit-background-clip: text; background-clip: text;
color: transparent;
filter: drop-shadow(0 0 44px rgba(124,92,255,.45));
}
.hero .sub{
margin: 0 auto 38px;
max-width: 640px;
font-size: clamp(15px, 2vw, 18px);
color: var(--muted);
}
.hero-actions{
display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
}
.btn{
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 13px 28px; border-radius: 999px;
font-size: 15px; font-weight: 700; font-family: inherit;
text-decoration: none; cursor: pointer; border: 1px solid transparent;
transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.btn-primary{
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color: #05060f;
box-shadow: 0 14px 34px -14px rgba(124,92,255,1);
}
.btn-primary:hover{
transform: translateY(-2px);
box-shadow: 0 20px 44px -16px rgba(124,92,255,1);
}
.btn-ghost{
background: rgba(255,255,255,.045);
border-color: rgba(255,255,255,.16);
color: var(--text);
}
.btn-ghost:hover{
background: rgba(255,255,255,.09);
transform: translateY(-2px);
}
.btn-sm{ padding: 10px 20px; font-size: 14px; }
.stats{
display: flex; flex-wrap: wrap; justify-content: center;
gap: 56px; margin-top: 70px;
}
.stats > div{ display: flex; flex-direction: column; align-items: center; }
.stats strong{
font-size: 30px; font-weight: 800; line-height: 1.2;
background: linear-gradient(135deg, #ffffff, #96a1cb);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.stats span{ font-size: 13px; color: var(--muted); letter-spacing: .1em; }
/* ============ 通用区块 ============ */
.section{ padding: 110px 0; scroll-margin-top: 90px; }
.section-head{ text-align: center; margin-bottom: 56px; }
.section-head h2{
margin: 0 0 12px;
font-size: clamp(28px, 4vw, 42px);
font-weight: 800; letter-spacing: .06em;
}
.section-head p{ margin: 0; color: var(--muted); font-size: 15px; }
/* ============ 应用市场 ============ */
.apps{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 22px;
}
.app-card{
position: relative;
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 26px;
background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
transition: transform .35s cubic-bezier(.2,.7,.3,1), border-color .35s ease, box-shadow .35s ease;
display: flex; flex-direction: column; gap: 16px;
}
.app-card:hover{
transform: translateY(-5px);
border-color: rgba(124,92,255,.55);
box-shadow: 0 30px 70px -42px rgba(124,92,255,1);
}
.app-header{ display: flex; align-items: center; gap: 18px; }
.app-icon{
flex: 0 0 auto;
width: 72px; height: 72px; border-radius: 20px;
display: grid; place-items: center;
font-size: 28px; font-weight: 900; letter-spacing: .05em;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color: #05060f;
box-shadow: 0 16px 38px -16px rgba(124,92,255,1);
}
.app-title-row{
display: flex; flex-direction: column; gap: 6px;
}
.app-title-row h3{
margin: 0; font-size: 22px; font-weight: 800; letter-spacing: .08em;
}
.tag{
font-size: 12px; padding: 3px 10px; border-radius: 999px;
letter-spacing: .08em; white-space: nowrap; width: fit-content;
}
.tag-live{
background: rgba(34,211,238,.16);
color: #67e8f9;
border: 1px solid rgba(34,211,238,.45);
}
.tag-dev{
background: rgba(124,92,255,.16);
color: #b9a8ff;
border: 1px solid rgba(124,92,255,.45);
}
.app-desc{
margin: 0;
color: var(--muted); font-size: 14.5px; flex: 1;
}
.app-meta{
display: flex; flex-wrap: wrap; gap: 8px;
font-size: 13px; color: rgba(152,162,201,.85);
}
.app-meta span{ letter-spacing: .04em; }
.app-actions{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
/* 敬请期待卡片 */
.app-card.soon{
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; gap: 12px;
padding: 38px 24px;
border-style: dashed;
border-color: rgba(255,255,255,.15);
background: rgba(255,255,255,.018);
opacity: .8;
min-height: 230px;
}
.app-card.soon:hover{ opacity: 1; }
.app-card.soon .app-icon{
width: 58px; height: 58px; border-radius: 18px;
font-size: 22px; font-weight: 700;
background: rgba(255,255,255,.05);
border: 1px dashed rgba(255,255,255,.2);
color: var(--muted);
box-shadow: none;
}
.app-card.soon h3{ margin: 0; font-size: 17px; font-weight: 700; color: #c8cfe8; }
.app-card.soon p{ margin: 0; font-size: 13.5px; color: var(--muted); }
/* ============ 关于我们 ============ */
.about-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 22px;
}
.about-card{
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 30px 26px;
background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
transition: transform .35s cubic-bezier(.2,.7,.3,1), border-color .35s ease;
}
.about-card:hover{
transform: translateY(-5px);
border-color: rgba(34,211,238,.45);
}
.about-card h3{
margin: 0 0 12px;
font-size: 17px; font-weight: 700; letter-spacing: .05em;
}
.about-card p{ margin: 0; color: var(--muted); font-size: 14.5px; }
.contact-list{ list-style: none; margin: 0; padding: 0; }
.contact-list li{
display: flex; align-items: center; gap: 10px;
font-size: 14.5px; color: var(--muted);
margin-bottom: 10px;
}
.contact-list li:last-child{ margin-bottom: 0; }
.contact-list .ct-label{
flex: 0 0 auto;
font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
padding: 2px 9px; border-radius: 999px;
border: 1px solid rgba(124,92,255,.45);
color: #b9a8ff;
background: rgba(124,92,255,.12);
}
.contact-list .ct-val{
color: #e9edff;
font-family: "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
font-size: 14px;
}
.contact-list a.ct-val{ text-decoration: none; }
.contact-list a.ct-val:hover{ color: #b9a8ff; }
/* ============ 页脚 ============ */
.site-footer{
border-top: 1px solid var(--line);
padding: 42px 0;
margin-top: 40px;
}
.footer-inner{
display: flex; flex-wrap: wrap; gap: 14px;
align-items: center; justify-content: space-between;
}
.footer-logo{
font-weight: 800; letter-spacing: .1em;
background: linear-gradient(135deg, #ffffff, #97a2cc);
-webkit-background-clip: text; background-clip: text; color: transparent;
display: flex; align-items: center; gap: 9px;
}
.footer-logo .logo-mark{ width: 26px; height: 26px; border-radius: 8px; }
.footer-inner p{ margin: 0; color: var(--muted); font-size: 13.5px; }
/* ============ 出现动画 ============ */
.reveal{
opacity: 0;
transform: translateY(26px);
transition: opacity .85s cubic-bezier(.2,.7,.3,1), transform .85s cubic-bezier(.2,.7,.3,1);
}
.reveal.visible{ opacity: 1; transform: none; }
/* ============ Toast ============ */
.toast{
position: fixed; left: 50%; bottom: 42px;
transform: translate(-50%, 22px);
max-width: 88vw;
padding: 13px 24px;
border-radius: 999px;
background: rgba(18,22,40,.94);
border: 1px solid var(--line);
color: var(--text); font-size: 14px; text-align: center;
backdrop-filter: blur(10px);
box-shadow: 0 22px 54px -22px rgba(0,0,0,.95);
opacity: 0; pointer-events: none;
transition: opacity .35s ease, transform .35s ease;
z-index: 100;
}
.toast.show{ opacity: 1; transform: translate(-50%, 0); }
/* ============ 响应式 ============ */
@media (max-width: 760px){
.nav-toggle{ display: block; }
.nav{
position: absolute; top: calc(100% + 10px);
left: 4vw; right: 4vw;
flex-direction: column; align-items: stretch; gap: 2px;
padding: 10px;
background: rgba(10,13,28,.97);
border: 1px solid var(--line);
border-radius: 18px;
display: none;
box-shadow: 0 26px 60px -26px rgba(0,0,0,1);
}
.nav.open{ display: flex; }
.nav a{ padding: 12px 16px; border-radius: 12px; }
.hero{ padding-top: 118px; }
.stats{ gap: 34px; margin-top: 54px; }
.section{ padding: 80px 0; }
.apps{ grid-template-columns: 1fr; }
.app-actions .btn{ flex: 1; }
}