chore: 官网拆分 homepage + 关于页瘦身 + 端口 5175（当前可用状态基线）
This commit is contained in:
Logan.Li committed
1 parent
5eb11826db
commit
be151cb68f
85 files changed
+4420
-1530
No files matched your search
@@ -0,0 +1,7 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
|
||||
<rect x="64" y="64" width="896" height="896" rx="224" fill="#101820"/>
|
||||
<rect x="116" y="116" width="792" height="792" rx="180" fill="#17232d"/>
|
||||
<path d="M258 326 454 512 258 698" fill="none" stroke="#f2f7f8" stroke-width="92" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M500 698h244" fill="none" stroke="#55aef2" stroke-width="92" stroke-linecap="round"/>
|
||||
<circle cx="750" cy="308" r="52" fill="#42d392"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 502 B |
@@ -0,0 +1,35 @@
|
||||
// OpsXShell 产品站 — 无依赖静态脚本
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// 移动端导航
|
||||
const toggle = document.querySelector('.nav-toggle')
|
||||
const links = document.querySelector('.nav-links')
|
||||
toggle?.addEventListener('click', () => links?.classList.toggle('open'))
|
||||
links?.querySelectorAll('a').forEach((a) =>
|
||||
a.addEventListener('click', () => links.classList.remove('open'))
|
||||
)
|
||||
|
||||
// 复制 SHA-256
|
||||
document.querySelectorAll('[data-copy]').forEach((button) => {
|
||||
button.addEventListener('click', async () => {
|
||||
const value = button.getAttribute('data-copy') || ''
|
||||
try {
|
||||
await navigator.clipboard.writeText(value)
|
||||
const original = button.textContent
|
||||
button.textContent = '已复制 ✓'
|
||||
setTimeout(() => { button.textContent = original }, 1600)
|
||||
} catch {
|
||||
// 剪贴板不可用（如 file:// 非安全上下文）时退回选中文本提示
|
||||
button.textContent = '请手动复制'
|
||||
setTimeout(() => { button.textContent = original }, 1600)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// FAQ 单开（details 互斥）
|
||||
const faqs = document.querySelectorAll('.faq-item')
|
||||
faqs.forEach((item) =>
|
||||
item.addEventListener('toggle', () => {
|
||||
if (item.open) faqs.forEach((other) => { if (other !== item) other.open = false })
|
||||
})
|
||||
)
|
||||
})
|
||||
@@ -0,0 +1,811 @@
|
||||
: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;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user