812 lines
14 KiB
CSS
812 lines
14 KiB
CSS
:root {
|
||
--bg: #0b1118;
|
||
--bg-soft: #0e1720;
|
||
--panel: #14212c;
|
||
--panel-2: #17232d;
|
||
--border: rgba(120, 160, 190, 0.16);
|
||
--text: #e8f0f4;
|
||
--text-2: #aabccb;
|
||
--text-3: #7590a3;
|
||
--accent: #55aef2;
|
||
--accent-soft: rgba(85, 174, 242, 0.14);
|
||
--green: #3fd68f;
|
||
--green-soft: rgba(63, 214, 143, 0.12);
|
||
--amber: #f5c04e;
|
||
--purple: #a78bfa;
|
||
--red: #f87171;
|
||
--radius: 14px;
|
||
--mono: 'SF Mono', ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
body {
|
||
background:
|
||
radial-gradient(1100px 500px at 75% -8%, rgba(85, 174, 242, 0.1), transparent 60%),
|
||
radial-gradient(800px 420px at 12% 4%, rgba(63, 214, 143, 0.06), transparent 55%), var(--bg);
|
||
color: var(--text);
|
||
font-family:
|
||
-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||
line-height: 1.65;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
a {
|
||
color: var(--accent);
|
||
text-decoration: none;
|
||
}
|
||
a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1080px;
|
||
margin: 0 auto;
|
||
padding: 0 24px;
|
||
}
|
||
|
||
/* ── Nav ─────────────────────────────────────────── */
|
||
.nav {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 50;
|
||
background: rgba(11, 17, 24, 0.86);
|
||
backdrop-filter: blur(12px);
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.nav-inner {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
height: 60px;
|
||
}
|
||
.brand {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
font-weight: 700;
|
||
font-size: 17px;
|
||
color: var(--text);
|
||
}
|
||
.brand:hover {
|
||
text-decoration: none;
|
||
}
|
||
.brand img {
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: 7px;
|
||
}
|
||
.brand .tm {
|
||
font-size: 10px;
|
||
color: var(--text-3);
|
||
font-weight: 500;
|
||
margin-left: 2px;
|
||
}
|
||
.nav-links {
|
||
display: flex;
|
||
gap: 4px;
|
||
margin-left: auto;
|
||
align-items: center;
|
||
}
|
||
.nav-links a {
|
||
color: var(--text-2);
|
||
font-size: 14px;
|
||
padding: 7px 12px;
|
||
border-radius: 8px;
|
||
}
|
||
.nav-links a:hover {
|
||
color: var(--text);
|
||
background: var(--panel);
|
||
text-decoration: none;
|
||
}
|
||
.nav-cta {
|
||
background: var(--accent);
|
||
color: #06121c !important;
|
||
font-weight: 600;
|
||
padding: 7px 16px !important;
|
||
border-radius: 9px;
|
||
}
|
||
.nav-cta:hover {
|
||
background: #7cc0f5;
|
||
}
|
||
.nav-toggle {
|
||
display: none;
|
||
margin-left: auto;
|
||
background: none;
|
||
border: 1px solid var(--border);
|
||
color: var(--text-2);
|
||
border-radius: 8px;
|
||
padding: 6px 11px;
|
||
font-size: 16px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* ── Hero ────────────────────────────────────────── */
|
||
.hero {
|
||
padding: 84px 0 64px;
|
||
}
|
||
.hero-grid {
|
||
display: grid;
|
||
grid-template-columns: 1.05fr 1fr;
|
||
gap: 52px;
|
||
align-items: center;
|
||
}
|
||
.hero h1 {
|
||
font-size: 44px;
|
||
line-height: 1.22;
|
||
letter-spacing: -0.5px;
|
||
margin: 18px 0 14px;
|
||
}
|
||
.hero h1 .hl {
|
||
color: var(--accent);
|
||
}
|
||
.hero .tagline {
|
||
color: var(--text-2);
|
||
font-size: 17px;
|
||
margin-bottom: 26px;
|
||
}
|
||
.hero-badges {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
margin-bottom: 30px;
|
||
}
|
||
.badge {
|
||
font-size: 12px;
|
||
color: var(--text-2);
|
||
border: 1px solid var(--border);
|
||
background: var(--panel);
|
||
padding: 4px 11px;
|
||
border-radius: 999px;
|
||
}
|
||
.badge b {
|
||
color: var(--green);
|
||
font-weight: 600;
|
||
}
|
||
.hero-ctas {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
align-items: center;
|
||
}
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
border-radius: 10px;
|
||
padding: 11px 22px;
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
border: 1px solid transparent;
|
||
transition: all 0.15s ease;
|
||
}
|
||
.btn-primary {
|
||
background: var(--accent);
|
||
color: #06121c;
|
||
}
|
||
.btn-primary:hover {
|
||
background: #7cc0f5;
|
||
text-decoration: none;
|
||
transform: translateY(-1px);
|
||
}
|
||
.btn-ghost {
|
||
background: transparent;
|
||
color: var(--text);
|
||
border-color: var(--border);
|
||
}
|
||
.btn-ghost:hover {
|
||
border-color: var(--accent);
|
||
text-decoration: none;
|
||
}
|
||
.hero-note {
|
||
font-size: 12.5px;
|
||
color: var(--text-3);
|
||
margin-top: 14px;
|
||
}
|
||
|
||
/* Terminal mock (pure CSS, no fake screenshot) */
|
||
.term {
|
||
background: #0d1620;
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
overflow: hidden;
|
||
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
|
||
}
|
||
.term-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 10px 14px;
|
||
background: #101b26;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.term-dot {
|
||
width: 11px;
|
||
height: 11px;
|
||
border-radius: 50%;
|
||
}
|
||
.term-dot.r {
|
||
background: #ff5f57;
|
||
}
|
||
.term-dot.y {
|
||
background: #febc2e;
|
||
}
|
||
.term-dot.g {
|
||
background: #28c840;
|
||
}
|
||
.term-title {
|
||
font-size: 12px;
|
||
color: var(--text-3);
|
||
margin-left: 6px;
|
||
font-family: var(--mono);
|
||
}
|
||
.term-body {
|
||
padding: 16px 18px 18px;
|
||
font-family: var(--mono);
|
||
font-size: 12.8px;
|
||
line-height: 1.8;
|
||
}
|
||
.term-body .p {
|
||
color: var(--green);
|
||
}
|
||
.term-body .c {
|
||
color: var(--text);
|
||
}
|
||
.term-body .dim {
|
||
color: #93aab9;
|
||
}
|
||
.term-body .out {
|
||
color: #c3d2dd;
|
||
}
|
||
.term-body .err {
|
||
color: var(--red);
|
||
}
|
||
.term-body .mark {
|
||
color: var(--amber);
|
||
}
|
||
.cursor {
|
||
display: inline-block;
|
||
width: 8px;
|
||
height: 15px;
|
||
background: var(--green);
|
||
vertical-align: -2px;
|
||
animation: blink 1.1s steps(1) infinite;
|
||
}
|
||
@keyframes blink {
|
||
50% {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
/* ── Sections ────────────────────────────────────── */
|
||
section {
|
||
padding: 74px 0;
|
||
}
|
||
.section-alt {
|
||
background: var(--bg-soft);
|
||
border-top: 1px solid var(--border);
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.section-head {
|
||
max-width: 660px;
|
||
margin-bottom: 40px;
|
||
}
|
||
.kicker {
|
||
color: var(--accent);
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
letter-spacing: 2.5px;
|
||
text-transform: uppercase;
|
||
}
|
||
.section-head h2 {
|
||
font-size: 30px;
|
||
margin: 10px 0 12px;
|
||
letter-spacing: -0.3px;
|
||
}
|
||
.section-head p {
|
||
color: var(--text-2);
|
||
font-size: 15.5px;
|
||
}
|
||
|
||
.grid {
|
||
display: grid;
|
||
gap: 18px;
|
||
}
|
||
.grid-3 {
|
||
grid-template-columns: repeat(3, 1fr);
|
||
}
|
||
.grid-2 {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
|
||
.card {
|
||
background: var(--panel);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
padding: 22px 22px 20px;
|
||
transition:
|
||
border-color 0.15s ease,
|
||
transform 0.15s ease;
|
||
}
|
||
.card:hover {
|
||
border-color: rgba(85, 174, 242, 0.45);
|
||
transform: translateY(-2px);
|
||
}
|
||
.card .icon {
|
||
width: 38px;
|
||
height: 38px;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 14px;
|
||
font-size: 19px;
|
||
}
|
||
.card h3 {
|
||
font-size: 16.5px;
|
||
margin-bottom: 8px;
|
||
}
|
||
.card p {
|
||
color: var(--text-2);
|
||
font-size: 13.8px;
|
||
}
|
||
.card .tag {
|
||
display: inline-block;
|
||
font-size: 11px;
|
||
padding: 2px 8px;
|
||
border-radius: 999px;
|
||
margin-left: 8px;
|
||
vertical-align: 2px;
|
||
}
|
||
.tag-free {
|
||
background: var(--green-soft);
|
||
color: var(--green);
|
||
}
|
||
.tag-pro {
|
||
background: var(--accent-soft);
|
||
color: var(--accent);
|
||
}
|
||
|
||
/* AI workflow */
|
||
.flow {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 14px;
|
||
margin: 34px 0 26px;
|
||
}
|
||
.flow-step {
|
||
background: var(--panel);
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
padding: 18px;
|
||
position: relative;
|
||
}
|
||
.flow-step .no {
|
||
font-family: var(--mono);
|
||
font-size: 12px;
|
||
color: var(--accent);
|
||
background: var(--accent-soft);
|
||
border-radius: 7px;
|
||
padding: 2px 8px;
|
||
display: inline-block;
|
||
margin-bottom: 10px;
|
||
}
|
||
.flow-step h4 {
|
||
font-size: 14.5px;
|
||
margin-bottom: 6px;
|
||
}
|
||
.flow-step p {
|
||
font-size: 12.8px;
|
||
color: var(--text-2);
|
||
}
|
||
.confirm-card {
|
||
background: #0d1620;
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
font-family: var(--mono);
|
||
font-size: 13px;
|
||
overflow: hidden;
|
||
}
|
||
.confirm-head {
|
||
padding: 10px 16px;
|
||
border-bottom: 1px solid var(--border);
|
||
display: flex;
|
||
gap: 8px;
|
||
align-items: center;
|
||
font-size: 12px;
|
||
color: var(--text-3);
|
||
}
|
||
.risk-pill {
|
||
padding: 1px 9px;
|
||
border-radius: 999px;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
}
|
||
.risk-mid {
|
||
background: rgba(245, 192, 78, 0.14);
|
||
color: var(--amber);
|
||
}
|
||
.risk-high {
|
||
background: rgba(248, 113, 113, 0.15);
|
||
color: var(--red);
|
||
}
|
||
.risk-safe {
|
||
background: var(--green-soft);
|
||
color: var(--green);
|
||
}
|
||
.confirm-cmd {
|
||
padding: 14px 16px;
|
||
color: var(--text);
|
||
word-break: break-all;
|
||
}
|
||
.confirm-actions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
padding: 0 16px 16px;
|
||
}
|
||
.confirm-actions span {
|
||
font-size: 12px;
|
||
padding: 5px 12px;
|
||
border-radius: 8px;
|
||
border: 1px solid var(--border);
|
||
color: var(--text-2);
|
||
}
|
||
.confirm-actions .danger {
|
||
border-color: rgba(248, 113, 113, 0.4);
|
||
color: var(--red);
|
||
}
|
||
.confirm-actions .primary {
|
||
background: var(--accent);
|
||
color: #06121c;
|
||
border-color: var(--accent);
|
||
font-weight: 600;
|
||
}
|
||
.confirm-actions .green {
|
||
border-color: rgba(63, 214, 143, 0.4);
|
||
color: var(--green);
|
||
}
|
||
|
||
.check-list {
|
||
list-style: none;
|
||
display: grid;
|
||
gap: 10px;
|
||
margin-top: 26px;
|
||
}
|
||
.check-list li {
|
||
display: flex;
|
||
gap: 10px;
|
||
font-size: 14px;
|
||
color: var(--text-2);
|
||
}
|
||
.check-list li::before {
|
||
content: '✓';
|
||
color: var(--green);
|
||
font-weight: 700;
|
||
flex-shrink: 0;
|
||
}
|
||
.check-list li b {
|
||
color: var(--text);
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* Pricing */
|
||
.pricing {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 18px;
|
||
}
|
||
.plan {
|
||
background: var(--panel);
|
||
border: 1px solid var(--border);
|
||
border-radius: 16px;
|
||
padding: 26px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.plan.featured {
|
||
border-color: rgba(85, 174, 242, 0.55);
|
||
background: linear-gradient(180deg, rgba(85, 174, 242, 0.08), var(--panel) 45%);
|
||
position: relative;
|
||
}
|
||
.plan .ribbon {
|
||
position: absolute;
|
||
top: -12px;
|
||
left: 24px;
|
||
background: var(--accent);
|
||
color: #06121c;
|
||
font-size: 11.5px;
|
||
font-weight: 700;
|
||
padding: 3px 12px;
|
||
border-radius: 999px;
|
||
}
|
||
.plan h3 {
|
||
font-size: 17px;
|
||
}
|
||
.plan .price {
|
||
font-size: 34px;
|
||
font-weight: 700;
|
||
margin: 12px 0 2px;
|
||
}
|
||
.plan .price small {
|
||
font-size: 14px;
|
||
color: var(--text-3);
|
||
font-weight: 400;
|
||
}
|
||
.plan .price-note {
|
||
font-size: 12.5px;
|
||
color: var(--text-3);
|
||
margin-bottom: 18px;
|
||
}
|
||
.plan ul {
|
||
list-style: none;
|
||
display: grid;
|
||
gap: 9px;
|
||
margin: 4px 0 24px;
|
||
flex: 1;
|
||
}
|
||
.plan ul li {
|
||
font-size: 13.8px;
|
||
color: var(--text-2);
|
||
display: flex;
|
||
gap: 9px;
|
||
}
|
||
.plan ul li::before {
|
||
content: '✓';
|
||
color: var(--green);
|
||
font-weight: 700;
|
||
flex-shrink: 0;
|
||
}
|
||
.plan ul li.locked::before {
|
||
content: '+';
|
||
color: var(--accent);
|
||
}
|
||
|
||
/* Security */
|
||
.sec-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 14px;
|
||
}
|
||
.sec-item {
|
||
display: flex;
|
||
gap: 14px;
|
||
background: var(--panel);
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
padding: 18px;
|
||
}
|
||
.sec-item .ic {
|
||
font-size: 20px;
|
||
flex-shrink: 0;
|
||
}
|
||
.sec-item h4 {
|
||
font-size: 14.5px;
|
||
margin-bottom: 4px;
|
||
}
|
||
.sec-item p {
|
||
font-size: 13px;
|
||
color: var(--text-2);
|
||
}
|
||
|
||
/* Tech + download */
|
||
.tech-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
}
|
||
.tech-list span {
|
||
font-family: var(--mono);
|
||
font-size: 13px;
|
||
background: var(--panel);
|
||
border: 1px solid var(--border);
|
||
padding: 7px 14px;
|
||
border-radius: 9px;
|
||
color: var(--text-2);
|
||
}
|
||
|
||
.dl-box {
|
||
background: var(--panel);
|
||
border: 1px solid var(--border);
|
||
border-radius: 16px;
|
||
padding: 30px;
|
||
display: grid;
|
||
grid-template-columns: 1.4fr 1fr;
|
||
gap: 30px;
|
||
align-items: center;
|
||
}
|
||
.dl-box h3 {
|
||
font-size: 19px;
|
||
margin-bottom: 6px;
|
||
}
|
||
.dl-box .meta {
|
||
color: var(--text-3);
|
||
font-size: 13px;
|
||
margin-bottom: 18px;
|
||
}
|
||
.sha {
|
||
font-family: var(--mono);
|
||
font-size: 11.5px;
|
||
color: var(--text-3);
|
||
background: #0d1620;
|
||
border: 1px solid var(--border);
|
||
border-radius: 9px;
|
||
padding: 10px 12px;
|
||
word-break: break-all;
|
||
display: flex;
|
||
gap: 10px;
|
||
align-items: flex-start;
|
||
margin-top: 14px;
|
||
}
|
||
.sha button {
|
||
background: none;
|
||
border: none;
|
||
color: var(--accent);
|
||
cursor: pointer;
|
||
font-size: 11.5px;
|
||
flex-shrink: 0;
|
||
font-family: inherit;
|
||
}
|
||
.dl-note {
|
||
font-size: 12.5px;
|
||
color: var(--text-3);
|
||
margin-top: 14px;
|
||
}
|
||
.dl-app {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 18px;
|
||
justify-content: center;
|
||
}
|
||
.dl-app img {
|
||
width: 92px;
|
||
height: 92px;
|
||
}
|
||
.dl-app .os {
|
||
text-align: left;
|
||
}
|
||
.dl-app .os b {
|
||
display: block;
|
||
font-size: 15px;
|
||
}
|
||
.dl-app .os span {
|
||
color: var(--text-3);
|
||
font-size: 12.5px;
|
||
}
|
||
|
||
/* FAQ */
|
||
.faq-item {
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
background: var(--panel);
|
||
margin-bottom: 10px;
|
||
overflow: hidden;
|
||
}
|
||
.faq-item summary {
|
||
cursor: pointer;
|
||
padding: 16px 20px;
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
list-style: none;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.faq-item summary::-webkit-details-marker {
|
||
display: none;
|
||
}
|
||
.faq-item summary::after {
|
||
content: '+';
|
||
color: var(--text-3);
|
||
font-size: 18px;
|
||
}
|
||
.faq-item[open] summary::after {
|
||
content: '−';
|
||
}
|
||
.faq-item .answer {
|
||
padding: 0 20px 18px;
|
||
color: var(--text-2);
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* Footer */
|
||
footer {
|
||
border-top: 1px solid var(--border);
|
||
padding: 40px 0 48px;
|
||
color: var(--text-3);
|
||
font-size: 13px;
|
||
}
|
||
.footer-inner {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 24px;
|
||
justify-content: space-between;
|
||
}
|
||
.footer-brand {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
color: var(--text);
|
||
font-weight: 600;
|
||
}
|
||
.footer-brand img {
|
||
width: 22px;
|
||
height: 22px;
|
||
border-radius: 6px;
|
||
}
|
||
footer nav {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16px;
|
||
}
|
||
footer a {
|
||
color: var(--text-3);
|
||
}
|
||
footer a:hover {
|
||
color: var(--accent);
|
||
}
|
||
|
||
/* ── Responsive ──────────────────────────────────── */
|
||
@media (max-width: 960px) {
|
||
.hero-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: 36px;
|
||
}
|
||
.hero h1 {
|
||
font-size: 34px;
|
||
}
|
||
.grid-3 {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
.flow {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
.pricing {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.dl-box {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
@media (max-width: 640px) {
|
||
.nav-links {
|
||
display: none;
|
||
position: absolute;
|
||
top: 60px;
|
||
left: 0;
|
||
right: 0;
|
||
background: var(--bg-soft);
|
||
border-bottom: 1px solid var(--border);
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
padding: 10px 18px 16px;
|
||
gap: 2px;
|
||
}
|
||
.nav-links.open {
|
||
display: flex;
|
||
}
|
||
.nav-toggle {
|
||
display: block;
|
||
}
|
||
.grid-3,
|
||
.grid-2,
|
||
.sec-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.flow {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
section {
|
||
padding: 56px 0;
|
||
}
|
||
}
|