1406 lines
36 KiB
HTML
1406 lines
36 KiB
HTML
<style>
|
|
/* Self-contained styles for NewAPI's custom HTML shadow root. */
|
|
:host {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
.oneinai-root {
|
|
--paper: #ffffff;
|
|
--paper-light: #fbfdff;
|
|
--ink: #0a0a0a;
|
|
--muted: #667085;
|
|
--faint: #98a2b3;
|
|
--line: #e8e8e8;
|
|
--line-soft: #f1f4f7;
|
|
--red: #3ea4ec;
|
|
--red-dark: #0e72bc;
|
|
--cyan: #00a3aa;
|
|
--violet: #9095e8;
|
|
display: block;
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
overflow: hidden;
|
|
overflow: clip;
|
|
color: var(--ink);
|
|
background: var(--paper);
|
|
font-family: 'Public Sans', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
line-height: 1.6;
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
.oneinai-root::before {
|
|
content: '';
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
opacity: 0.42;
|
|
background-image: repeating-linear-gradient(
|
|
90deg,
|
|
rgba(62, 164, 236, 0.055) 0,
|
|
rgba(62, 164, 236, 0.055) 1px,
|
|
transparent 1px,
|
|
transparent 96px
|
|
), repeating-linear-gradient(
|
|
0deg,
|
|
rgba(62, 164, 236, 0.045) 0,
|
|
rgba(62, 164, 236, 0.045) 1px,
|
|
transparent 1px,
|
|
transparent 96px
|
|
);
|
|
mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
|
|
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
|
|
}
|
|
|
|
.oneinai-root * {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.oneinai-root a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.page {
|
|
position: relative;
|
|
z-index: 1;
|
|
width: min(1260px, calc(100% - 56px));
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.scroll-progress {
|
|
position: fixed;
|
|
top: clamp(88px, 12vh, 132px);
|
|
right: max(14px, calc((100vw - 1360px) / 2));
|
|
z-index: 20;
|
|
width: 2px;
|
|
height: min(28vh, 220px);
|
|
overflow: hidden;
|
|
background: rgba(62, 164, 236, 0.14);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.scroll-progress::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(to bottom, var(--cyan), var(--red), var(--violet));
|
|
transform: scaleY(1);
|
|
transform-origin: top;
|
|
}
|
|
|
|
.hero {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.22fr) minmax(330px, 0.78fr);
|
|
gap: clamp(42px, 8vw, 130px);
|
|
align-items: center;
|
|
min-height: min(720px, 94vh);
|
|
padding: clamp(72px, 8vw, 112px) 0 clamp(64px, 8vw, 96px);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.hero-copy {
|
|
max-width: 760px;
|
|
animation: rise-in 720ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
|
|
}
|
|
|
|
.eyebrow,
|
|
.section-kicker,
|
|
.proof-label,
|
|
.price-label {
|
|
color: var(--red-dark);
|
|
font-size: 11px;
|
|
font-weight: 900;
|
|
letter-spacing: 0.18em;
|
|
line-height: 1.3;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.eyebrow {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.eyebrow::before {
|
|
content: '';
|
|
width: 42px;
|
|
height: 1px;
|
|
background: var(--red);
|
|
}
|
|
|
|
.hero h1 {
|
|
max-width: 760px;
|
|
margin: 0 0 32px;
|
|
color: var(--ink);
|
|
font-family: 'Public Sans', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
|
font-size: clamp(56px, 8.2vw, 124px);
|
|
font-weight: 900;
|
|
letter-spacing: 0;
|
|
line-height: 0.98;
|
|
}
|
|
|
|
.hero h1 span {
|
|
display: block;
|
|
color: var(--red);
|
|
background: linear-gradient(100deg, var(--cyan) 0%, var(--red) 56%, var(--violet) 100%);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
|
|
.hero h1.hero-brand-title {
|
|
max-width: 760px;
|
|
margin-bottom: 30px;
|
|
color: #ff1d2d;
|
|
font-family: 'Public Sans', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
|
font-size: clamp(64px, 10vw, 148px);
|
|
font-weight: 900;
|
|
letter-spacing: 0;
|
|
line-height: 0.9;
|
|
}
|
|
|
|
.hero-lead {
|
|
max-width: 550px;
|
|
margin: 0 0 32px;
|
|
color: var(--muted);
|
|
font-size: clamp(16px, 1.5vw, 19px);
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.hero-lead strong {
|
|
color: var(--ink);
|
|
font-weight: 800;
|
|
}
|
|
|
|
.hero-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 44px;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
min-height: 48px;
|
|
padding: 0 18px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
line-height: 1;
|
|
transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
|
|
}
|
|
|
|
.btn:hover,
|
|
.btn:focus-visible {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.btn-primary {
|
|
color: var(--paper-light);
|
|
border-color: var(--red);
|
|
background: var(--red);
|
|
box-shadow: 0 10px 24px rgba(62, 164, 236, 0.22);
|
|
}
|
|
|
|
.btn-primary:hover,
|
|
.btn-primary:focus-visible {
|
|
border-color: var(--red-dark);
|
|
background: var(--red-dark);
|
|
}
|
|
|
|
.btn-secondary {
|
|
color: var(--ink);
|
|
background: rgba(255, 255, 255, 0.74);
|
|
}
|
|
|
|
.btn-secondary:hover,
|
|
.btn-secondary:focus-visible {
|
|
color: var(--red-dark);
|
|
border-color: var(--red);
|
|
background: #ffffff;
|
|
}
|
|
|
|
.icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
flex: 0 0 16px;
|
|
}
|
|
|
|
.trust-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
max-width: 650px;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
.trust-item {
|
|
display: grid;
|
|
grid-template-columns: 34px minmax(0, 1fr);
|
|
gap: 12px;
|
|
min-height: 88px;
|
|
padding: 18px 18px 0 0;
|
|
}
|
|
|
|
.trust-item + .trust-item {
|
|
padding-left: 18px;
|
|
border-left: 1px solid var(--line);
|
|
}
|
|
|
|
.trust-index {
|
|
color: var(--red);
|
|
font-size: 12px;
|
|
font-weight: 900;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.trust-item strong {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
color: var(--ink);
|
|
font-size: 15px;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.trust-item span:last-child {
|
|
display: block;
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.hero-proof {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
min-width: 0;
|
|
padding-top: clamp(18px, 3vw, 42px);
|
|
padding-left: clamp(24px, 4vw, 58px);
|
|
border-left: 1px solid var(--line);
|
|
animation: rise-in 720ms 120ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
|
|
}
|
|
|
|
.proof-art {
|
|
position: relative;
|
|
display: grid;
|
|
place-items: center;
|
|
width: 100%;
|
|
max-width: 430px;
|
|
aspect-ratio: 1 / 0.94;
|
|
overflow: hidden;
|
|
border: 1px solid rgba(62, 164, 236, 0.18);
|
|
border-radius: 24px;
|
|
background:
|
|
radial-gradient(ellipse 64% 80% at 82% 0%, rgba(144, 149, 232, 0.24) 0%, transparent 62%),
|
|
linear-gradient(135deg, rgba(0, 163, 170, 0.09) 0%, rgba(62, 164, 236, 0.05) 48%, rgba(144, 149, 232, 0.13) 100%),
|
|
#f8fbff;
|
|
box-shadow: 0 28px 72px rgba(62, 164, 236, 0.14);
|
|
}
|
|
|
|
.proof-art::before,
|
|
.proof-art::after {
|
|
content: '';
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.proof-art::before {
|
|
inset: 20px;
|
|
border: 1px solid rgba(62, 164, 236, 0.2);
|
|
border-radius: 16px;
|
|
background-image:
|
|
linear-gradient(90deg, rgba(62, 164, 236, 0.08) 1px, transparent 1px),
|
|
linear-gradient(0deg, rgba(62, 164, 236, 0.08) 1px, transparent 1px);
|
|
background-size: 36px 36px;
|
|
}
|
|
|
|
.proof-art::after {
|
|
top: 10%;
|
|
right: 8%;
|
|
width: 46%;
|
|
height: 54%;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle, rgba(0, 163, 170, 0.16), transparent 68%);
|
|
filter: blur(16px);
|
|
opacity: 0.86;
|
|
}
|
|
|
|
.proof-art img {
|
|
position: relative;
|
|
z-index: 1;
|
|
width: 62%;
|
|
height: auto;
|
|
object-fit: contain;
|
|
filter: drop-shadow(0 16px 24px rgba(16, 24, 40, 0.18));
|
|
transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
}
|
|
|
|
.proof-art:hover img {
|
|
transform: scale(1.04);
|
|
}
|
|
|
|
.proof-label {
|
|
position: absolute;
|
|
top: 34px;
|
|
left: 34px;
|
|
z-index: 2;
|
|
color: var(--red-dark);
|
|
font-size: 10px;
|
|
}
|
|
|
|
.proof-caption {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr);
|
|
gap: 16px;
|
|
max-width: 430px;
|
|
padding-top: 16px;
|
|
border-bottom: 1px solid var(--line);
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.proof-caption strong {
|
|
color: var(--ink);
|
|
font-weight: 800;
|
|
}
|
|
|
|
.proof-caption p {
|
|
margin: 0 0 16px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.proof-caption .proof-count {
|
|
color: var(--red);
|
|
font-size: 12px;
|
|
font-weight: 900;
|
|
letter-spacing: 0.12em;
|
|
}
|
|
|
|
.section {
|
|
padding: clamp(56px, 7vw, 88px) 0;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.section-heading {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
|
|
gap: 36px;
|
|
align-items: end;
|
|
margin-bottom: 34px;
|
|
}
|
|
|
|
.section-kicker {
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.section-title {
|
|
max-width: 700px;
|
|
margin: 0;
|
|
color: var(--ink);
|
|
font-family: 'Noto Serif SC', 'Songti SC', 'STSong', serif;
|
|
font-size: clamp(34px, 5vw, 66px);
|
|
font-weight: 900;
|
|
letter-spacing: 0;
|
|
line-height: 1.08;
|
|
}
|
|
|
|
.section-description {
|
|
max-width: 430px;
|
|
margin: 0 0 4px;
|
|
color: var(--muted);
|
|
font-size: 15px;
|
|
line-height: 1.85;
|
|
}
|
|
|
|
.capability-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 14px;
|
|
}
|
|
|
|
.capability-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
min-height: 238px;
|
|
padding: 26px;
|
|
gap: 16px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 18px;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
box-shadow: 0 12px 34px rgba(16, 24, 40, 0.05);
|
|
border-bottom: 1px solid var(--line);
|
|
transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
|
|
}
|
|
|
|
.capability-row:hover {
|
|
transform: translateY(-4px);
|
|
border-color: rgba(62, 164, 236, 0.34);
|
|
background: #ffffff;
|
|
box-shadow: 0 20px 42px rgba(62, 164, 236, 0.12);
|
|
}
|
|
|
|
.row-index {
|
|
color: var(--red);
|
|
font-size: 12px;
|
|
font-weight: 900;
|
|
letter-spacing: 0.12em;
|
|
}
|
|
|
|
.row-title {
|
|
color: var(--ink);
|
|
font-family: 'Noto Serif SC', 'Songti SC', 'STSong', serif;
|
|
font-size: 21px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.row-detail {
|
|
max-width: 580px;
|
|
color: var(--muted);
|
|
font-size: 14px;
|
|
line-height: 1.75;
|
|
}
|
|
|
|
.row-tag {
|
|
margin-top: auto;
|
|
padding: 5px 9px;
|
|
border: 1px solid rgba(62, 164, 236, 0.18);
|
|
border-radius: 999px;
|
|
background: rgba(62, 164, 236, 0.08);
|
|
color: var(--red-dark);
|
|
font-size: 10px;
|
|
font-weight: 900;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.workflow-list {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
border-top: 1px solid var(--ink);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.workflow-list::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -1px;
|
|
right: 0;
|
|
left: 0;
|
|
z-index: 2;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, var(--cyan), var(--red), var(--violet));
|
|
transform: scaleX(1);
|
|
transform-origin: left;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.workflow-step {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 272px;
|
|
padding: 28px 26px 26px;
|
|
border-right: 1px solid var(--line);
|
|
transition: background 220ms ease, border-color 220ms ease;
|
|
}
|
|
|
|
.workflow-step:last-child {
|
|
border-right: 0;
|
|
}
|
|
|
|
.workflow-step::before {
|
|
content: '';
|
|
width: 42px;
|
|
height: 2px;
|
|
margin-bottom: 28px;
|
|
background: var(--red);
|
|
}
|
|
|
|
.workflow-step:hover {
|
|
background: linear-gradient(135deg, rgba(0, 163, 170, 0.07), rgba(144, 149, 232, 0.09));
|
|
border-color: rgba(62, 164, 236, 0.28);
|
|
}
|
|
|
|
.workflow-index {
|
|
position: absolute;
|
|
top: 28px;
|
|
right: 26px;
|
|
color: var(--faint);
|
|
font-size: 12px;
|
|
font-weight: 900;
|
|
letter-spacing: 0.12em;
|
|
}
|
|
|
|
.workflow-title {
|
|
margin: 0 0 14px;
|
|
color: var(--ink);
|
|
font-family: 'Noto Serif SC', 'Songti SC', 'STSong', serif;
|
|
font-size: 26px;
|
|
font-weight: 900;
|
|
line-height: 1.15;
|
|
}
|
|
|
|
.workflow-detail {
|
|
max-width: 300px;
|
|
margin: 0;
|
|
color: var(--muted);
|
|
font-size: 14px;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.workflow-meta {
|
|
margin-top: auto;
|
|
color: var(--red-dark);
|
|
font-size: 10px;
|
|
font-weight: 900;
|
|
letter-spacing: 0.14em;
|
|
}
|
|
|
|
.pricing-section {
|
|
padding-top: clamp(56px, 7vw, 88px);
|
|
}
|
|
|
|
.pricing-layout {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.34fr) minmax(320px, 0.66fr);
|
|
gap: clamp(38px, 9vw, 140px);
|
|
align-items: end;
|
|
padding: clamp(30px, 5vw, 62px);
|
|
border: 1px solid rgba(62, 164, 236, 0.16);
|
|
border-radius: 24px;
|
|
background:
|
|
radial-gradient(ellipse 48% 120% at 78% 0%, rgba(62, 164, 236, 0.16) 0%, transparent 62%),
|
|
linear-gradient(112deg, #ffffff 0%, #ffffff 48%, #f5fbff 100%);
|
|
box-shadow: 0 22px 64px rgba(62, 164, 236, 0.1);
|
|
}
|
|
|
|
.pricing-layout > * {
|
|
min-width: 0;
|
|
}
|
|
|
|
.price-label {
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.price-main {
|
|
margin: 0 0 22px;
|
|
color: var(--ink);
|
|
font-family: 'Noto Serif SC', 'Songti SC', 'STSong', serif;
|
|
font-size: clamp(48px, 6vw, 88px);
|
|
font-weight: 900;
|
|
letter-spacing: 0;
|
|
line-height: 0.98;
|
|
max-width: 100%;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.price-note {
|
|
max-width: 600px;
|
|
margin: 0;
|
|
color: var(--muted);
|
|
font-size: 16px;
|
|
line-height: 1.85;
|
|
}
|
|
|
|
.price-note strong {
|
|
color: var(--ink);
|
|
font-weight: 900;
|
|
}
|
|
|
|
.price-facts {
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
.price-fact {
|
|
display: grid;
|
|
grid-template-columns: 92px minmax(0, 1fr);
|
|
gap: 20px;
|
|
padding: 18px 0;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.price-fact strong {
|
|
color: var(--ink);
|
|
font-size: 14px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.price-fact span {
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
line-height: 1.65;
|
|
}
|
|
|
|
@media (max-width: 1080px) {
|
|
.pricing-layout {
|
|
grid-template-columns: 1fr;
|
|
gap: 28px;
|
|
}
|
|
}
|
|
|
|
.docs-section {
|
|
padding-bottom: clamp(56px, 7vw, 88px);
|
|
}
|
|
|
|
.docs-panel {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: 48px;
|
|
align-items: end;
|
|
padding: clamp(32px, 5vw, 66px);
|
|
color: var(--ink);
|
|
border: 1px solid rgba(62, 164, 236, 0.18);
|
|
border-radius: 24px;
|
|
background:
|
|
radial-gradient(ellipse 48% 120% at 78% 0%, rgba(144, 149, 232, 0.2) 0%, transparent 62%),
|
|
linear-gradient(112deg, #ffffff 0%, #f8fcff 48%, #f5f6ff 100%);
|
|
box-shadow: 0 20px 60px rgba(62, 164, 236, 0.1);
|
|
}
|
|
|
|
.docs-panel .section-kicker {
|
|
color: var(--red);
|
|
}
|
|
|
|
.docs-panel .section-title {
|
|
color: var(--ink);
|
|
font-size: clamp(34px, 5vw, 62px);
|
|
}
|
|
|
|
.docs-panel .section-description {
|
|
margin-top: 22px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.doc-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 18px;
|
|
min-width: 242px;
|
|
padding: 18px 0;
|
|
border-top: 1px solid rgba(62, 164, 236, 0.34);
|
|
border-bottom: 1px solid rgba(62, 164, 236, 0.34);
|
|
color: var(--ink);
|
|
font-size: 15px;
|
|
font-weight: 800;
|
|
transition: color 180ms ease, border-color 180ms ease, gap 180ms ease;
|
|
}
|
|
|
|
.doc-link:hover,
|
|
.doc-link:focus-visible {
|
|
gap: 24px;
|
|
color: var(--red);
|
|
border-color: var(--red);
|
|
background: rgba(255, 255, 255, 0.56);
|
|
}
|
|
|
|
.doc-link small {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
color: var(--muted);
|
|
font-size: 10px;
|
|
font-weight: 900;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.doc-link span {
|
|
display: block;
|
|
}
|
|
|
|
.footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 24px;
|
|
padding: 24px 0 42px;
|
|
color: var(--faint);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.footer p {
|
|
margin: 0;
|
|
}
|
|
|
|
.btn:focus-visible,
|
|
.doc-link:focus-visible {
|
|
outline: 2px solid var(--red);
|
|
outline-offset: 5px;
|
|
}
|
|
|
|
@keyframes rise-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes scroll-reveal {
|
|
from {
|
|
opacity: 0;
|
|
transform: translate3d(0, 72px, 0) scale(0.965);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0) scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes title-reveal {
|
|
from {
|
|
opacity: 0;
|
|
clip-path: inset(0 0 100% 0);
|
|
transform: translate3d(0, 58px, 0);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
clip-path: inset(0 0 0 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes reveal-from-right {
|
|
from {
|
|
opacity: 0;
|
|
transform: translate3d(68px, 0, 0);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes kicker-reveal {
|
|
from {
|
|
opacity: 0;
|
|
transform: translate3d(-34px, 0, 0);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes reveal-from-left {
|
|
from {
|
|
opacity: 0;
|
|
transform: translate3d(-64px, 42px, 0) rotate(-1.5deg);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0) rotate(0);
|
|
}
|
|
}
|
|
|
|
@keyframes reveal-from-right-card {
|
|
from {
|
|
opacity: 0;
|
|
transform: translate3d(64px, 42px, 0) rotate(1.5deg);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0) rotate(0);
|
|
}
|
|
}
|
|
|
|
@keyframes line-draw {
|
|
from {
|
|
transform: scaleX(0);
|
|
}
|
|
to {
|
|
transform: scaleX(1);
|
|
}
|
|
}
|
|
|
|
@keyframes page-progress {
|
|
from {
|
|
transform: scaleY(0);
|
|
}
|
|
to {
|
|
transform: scaleY(1);
|
|
}
|
|
}
|
|
|
|
@keyframes number-rise {
|
|
from {
|
|
opacity: 0;
|
|
transform: translate3d(0, 64px, 0) scale(0.88);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0) scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes panel-unfold {
|
|
from {
|
|
opacity: 0;
|
|
clip-path: inset(24% 0 34% 0 round 24px);
|
|
transform: translate3d(0, 84px, 0) scale(0.96);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
clip-path: inset(0 0 0 0 round 24px);
|
|
transform: translate3d(0, 0, 0) scale(1);
|
|
}
|
|
}
|
|
|
|
.reveal-on-scroll {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
|
|
@supports (animation-timeline: view()) {
|
|
.scroll-progress::after {
|
|
animation: page-progress linear both;
|
|
animation-timeline: scroll(root);
|
|
}
|
|
|
|
.reveal-on-scroll {
|
|
animation: scroll-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) both;
|
|
animation-timeline: view();
|
|
animation-range: entry 25% entry 100%;
|
|
}
|
|
|
|
.section-heading.reveal-on-scroll {
|
|
animation: none;
|
|
}
|
|
|
|
.section-heading .section-kicker {
|
|
animation: kicker-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) both;
|
|
animation-timeline: view();
|
|
animation-range: entry 25% entry 90%;
|
|
}
|
|
|
|
.section-heading .section-title {
|
|
animation: title-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) both;
|
|
animation-timeline: view();
|
|
animation-range: entry 32% contain 6%;
|
|
}
|
|
|
|
.section-heading .section-description {
|
|
animation: reveal-from-right 1s cubic-bezier(0.16, 1, 0.3, 1) both;
|
|
animation-timeline: view();
|
|
animation-range: entry 48% contain 14%;
|
|
}
|
|
|
|
.capability-row:nth-child(1) {
|
|
animation-name: reveal-from-left;
|
|
animation-range: entry 12% entry 100%;
|
|
}
|
|
|
|
.capability-row:nth-child(2) {
|
|
animation-range: entry 35% contain 10%;
|
|
}
|
|
|
|
.capability-row:nth-child(3) {
|
|
animation-name: reveal-from-right-card;
|
|
animation-range: entry 58% contain 20%;
|
|
}
|
|
|
|
.workflow-list::before {
|
|
animation: line-draw linear both;
|
|
animation-timeline: view();
|
|
animation-range: entry 20% contain 40%;
|
|
}
|
|
|
|
.workflow-step::before {
|
|
animation: line-draw linear both;
|
|
animation-timeline: view();
|
|
animation-range: entry 35% contain 20%;
|
|
transform-origin: left;
|
|
}
|
|
|
|
.workflow-step:nth-child(1) {
|
|
animation-range: entry 12% entry 100%;
|
|
}
|
|
|
|
.workflow-step:nth-child(2) {
|
|
animation-range: entry 35% contain 10%;
|
|
}
|
|
|
|
.workflow-step:nth-child(3) {
|
|
animation-range: entry 58% contain 20%;
|
|
}
|
|
|
|
.pricing-layout {
|
|
animation-name: panel-unfold;
|
|
animation-range: entry 28% contain 12%;
|
|
}
|
|
|
|
.price-main {
|
|
animation: number-rise 1s cubic-bezier(0.16, 1, 0.3, 1) both;
|
|
animation-timeline: view();
|
|
animation-range: entry 52% contain 18%;
|
|
}
|
|
|
|
.price-fact {
|
|
animation: reveal-from-right 1s cubic-bezier(0.16, 1, 0.3, 1) both;
|
|
animation-timeline: view();
|
|
}
|
|
|
|
.price-fact:nth-child(1) {
|
|
animation-range: entry 38% entry 100%;
|
|
}
|
|
|
|
.price-fact:nth-child(2) {
|
|
animation-range: entry 52% contain 10%;
|
|
}
|
|
|
|
.price-fact:nth-child(3) {
|
|
animation-range: entry 66% contain 18%;
|
|
}
|
|
|
|
.docs-panel {
|
|
animation-name: panel-unfold;
|
|
animation-range: entry 30% contain 12%;
|
|
}
|
|
|
|
.docs-panel .section-title {
|
|
animation: title-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) both;
|
|
animation-timeline: view();
|
|
animation-range: entry 48% contain 16%;
|
|
}
|
|
|
|
.doc-link {
|
|
animation: reveal-from-right 1s cubic-bezier(0.16, 1, 0.3, 1) both;
|
|
animation-timeline: view();
|
|
animation-range: entry 62% contain 22%;
|
|
}
|
|
|
|
}
|
|
|
|
@media (max-width: 920px) {
|
|
.page {
|
|
width: min(100% - 40px, 720px);
|
|
}
|
|
|
|
.hero {
|
|
grid-template-columns: 1fr;
|
|
gap: 52px;
|
|
min-height: auto;
|
|
}
|
|
|
|
.hero-proof {
|
|
max-width: 520px;
|
|
margin-top: 0;
|
|
padding-top: 0;
|
|
padding-left: 0;
|
|
border-left: 0;
|
|
}
|
|
|
|
.proof-art,
|
|
.proof-caption {
|
|
max-width: 520px;
|
|
}
|
|
|
|
.section-heading,
|
|
.pricing-layout {
|
|
grid-template-columns: 1fr;
|
|
gap: 24px;
|
|
}
|
|
|
|
.capability-list {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.section-heading {
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
.capability-row {
|
|
min-height: 232px;
|
|
padding: 22px;
|
|
}
|
|
|
|
.workflow-list {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.workflow-step {
|
|
min-height: 0;
|
|
border-right: 0;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.workflow-step:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.docs-panel {
|
|
grid-template-columns: 1fr;
|
|
gap: 34px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 620px) {
|
|
.scroll-progress {
|
|
top: 88px;
|
|
right: 5px;
|
|
height: 144px;
|
|
}
|
|
|
|
.page {
|
|
width: calc(100% - 28px);
|
|
}
|
|
|
|
.hero {
|
|
gap: 42px;
|
|
padding-top: 64px;
|
|
padding-bottom: 58px;
|
|
}
|
|
|
|
.eyebrow {
|
|
margin-bottom: 24px;
|
|
font-size: 10px;
|
|
letter-spacing: 0.12em;
|
|
}
|
|
|
|
.eyebrow::before {
|
|
width: 26px;
|
|
}
|
|
|
|
.hero h1 {
|
|
margin-bottom: 24px;
|
|
font-size: clamp(48px, 14vw, 76px);
|
|
}
|
|
|
|
.hero-lead {
|
|
font-size: 15px;
|
|
line-height: 1.78;
|
|
}
|
|
|
|
.hero-actions {
|
|
align-items: stretch;
|
|
margin-bottom: 42px;
|
|
}
|
|
|
|
.btn {
|
|
flex: 1 1 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.trust-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.trust-item {
|
|
min-height: 76px;
|
|
padding: 16px 0;
|
|
}
|
|
|
|
.trust-item + .trust-item {
|
|
padding-left: 0;
|
|
border-top: 1px solid var(--line);
|
|
border-left: 0;
|
|
}
|
|
|
|
.proof-art::before {
|
|
inset: 14px;
|
|
}
|
|
|
|
.proof-label {
|
|
top: 26px;
|
|
left: 26px;
|
|
}
|
|
|
|
.section {
|
|
padding: 54px 0;
|
|
}
|
|
|
|
.section-heading {
|
|
margin-bottom: 26px;
|
|
}
|
|
|
|
.capability-list {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 37px;
|
|
}
|
|
|
|
.section-description {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.capability-row {
|
|
min-height: 0;
|
|
padding: 22px;
|
|
gap: 12px;
|
|
}
|
|
|
|
.workflow-step {
|
|
padding: 24px 22px;
|
|
}
|
|
|
|
.row-title {
|
|
font-size: 19px;
|
|
}
|
|
|
|
.row-detail {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.row-tag {
|
|
display: none;
|
|
}
|
|
|
|
.price-main {
|
|
overflow-wrap: anywhere;
|
|
font-size: clamp(48px, 14vw, 70px);
|
|
white-space: normal;
|
|
}
|
|
|
|
.price-note {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.price-fact {
|
|
grid-template-columns: 82px minmax(0, 1fr);
|
|
gap: 14px;
|
|
}
|
|
|
|
.docs-panel {
|
|
padding: 30px 24px;
|
|
}
|
|
|
|
.docs-panel .section-title {
|
|
font-size: 38px;
|
|
}
|
|
|
|
.doc-link {
|
|
min-width: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.footer {
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.oneinai-root *,
|
|
.oneinai-root *::before,
|
|
.oneinai-root *::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
scroll-behavior: auto !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
|
|
.scroll-progress {
|
|
display: none;
|
|
}
|
|
|
|
.reveal-on-scroll,
|
|
.section-heading .section-kicker,
|
|
.section-heading .section-title,
|
|
.section-heading .section-description,
|
|
.workflow-list::before,
|
|
.workflow-step::before,
|
|
.price-main,
|
|
.price-fact,
|
|
.docs-panel .section-title,
|
|
.doc-link {
|
|
opacity: 1 !important;
|
|
clip-path: none !important;
|
|
transform: none !important;
|
|
animation: none !important;
|
|
will-change: auto !important;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class='oneinai-root'>
|
|
<span class='scroll-progress' aria-hidden='true'></span>
|
|
<main class='page' id='top'>
|
|
<section class='hero'>
|
|
<div class='hero-copy'>
|
|
<div class='eyebrow'>ONEINAI / API</div>
|
|
<h1 class='hero-brand-title'>ONEINAI</h1>
|
|
<p class='hero-lead'><strong>一个入口，连接多种模型。</strong> 从请求转发、密钥管理到用量对账，把复杂的模型调用交给一套清晰、稳定、可追溯的基础设施。</p>
|
|
<div class='hero-actions'>
|
|
<a href='https://api.oneinai.com/register' target='_blank' rel='noopener' class='btn btn-primary'>
|
|
<span>开始使用</span>
|
|
<svg class='icon' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'>
|
|
<path d='M5 12h14'></path>
|
|
<path d='m13 6 6 6-6 6'></path>
|
|
</svg>
|
|
</a>
|
|
<a href='https://www.oneinai.com/' target='_blank' rel='noopener' class='btn btn-secondary'>
|
|
<span>了解 ONEINAI</span>
|
|
<svg class='icon' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'>
|
|
<path d='M14 3h7v7'></path>
|
|
<path d='M10 14 21 3'></path>
|
|
<path d='M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5'></path>
|
|
</svg>
|
|
</a>
|
|
<a href='https://docs.oneinai.com/' target='_blank' rel='noopener' class='btn btn-secondary'>
|
|
<span>接入文档</span>
|
|
<svg class='icon' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'>
|
|
<path d='M12 7v14'></path>
|
|
<path d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4v13a4 4 0 0 0-4-4Z'></path>
|
|
<path d='M21 18a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-5a4 4 0 0 0-4 4v13a4 4 0 0 1 4-4Z'></path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<div class='trust-grid'>
|
|
<div class='trust-item'>
|
|
<span class='trust-index'>01</span>
|
|
<div>
|
|
<strong>一手正规渠道采购</strong>
|
|
<span>模型来源清晰，可追溯</span>
|
|
</div>
|
|
</div>
|
|
<div class='trust-item'>
|
|
<span class='trust-index'>02</span>
|
|
<div>
|
|
<strong>1 CNY = 1 USD</strong>
|
|
<span>充值比例透明统一</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='hero-proof'>
|
|
<div class='proof-art' aria-label='ONEINAI 品牌标识'>
|
|
<span class='proof-label'>ONEINAI / 2026</span>
|
|
<img src='https://minio.oneinai.com/oneinai/images/logo/oneinai(800x800).png' alt='ONEINAI Logo' loading='eager'>
|
|
</div>
|
|
<div class='proof-caption'>
|
|
<span class='proof-count'>01—03</span>
|
|
<p><strong>同一套入口，三件事被放回秩序里：</strong>接入、计价、追踪。</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class='section' id='capability'>
|
|
<div class='section-heading reveal-on-scroll'>
|
|
<div>
|
|
<div class='section-kicker'>能力 / 01</div>
|
|
<h2 class='section-title'>把复杂调用，压缩成一个入口。</h2>
|
|
</div>
|
|
<p class='section-description'>从账户、额度、密钥到请求转发，ONEINAI 将分散的模型能力整理为一套更适合生产环境的调用路径。</p>
|
|
</div>
|
|
|
|
<div class='capability-list'>
|
|
<article class='capability-row reveal-on-scroll'>
|
|
<span class='row-index'>01</span>
|
|
<h3 class='row-title'>全球边缘加速</h3>
|
|
<p class='row-detail'>将请求路由至更近、更稳的线路，降低跨境调用中的抖动，让关键业务保持连续响应。</p>
|
|
<span class='row-tag'>ROUTING</span>
|
|
</article>
|
|
<article class='capability-row reveal-on-scroll'>
|
|
<span class='row-index'>02</span>
|
|
<h3 class='row-title'>透明成本控制</h3>
|
|
<p class='row-detail'>统一计价规则、清晰账单与用量记录，让模型预算可以被看见、被核对，也被持续规划。</p>
|
|
<span class='row-tag'>BILLING</span>
|
|
</article>
|
|
<article class='capability-row reveal-on-scroll'>
|
|
<span class='row-index'>03</span>
|
|
<h3 class='row-title'>企业级安全</h3>
|
|
<p class='row-detail'>密钥分层管理、请求链路加密与服务状态监控，减少集成风险，支撑稳定上线。</p>
|
|
<span class='row-tag'>CONTROL</span>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section class='section workflow-section' id='workflow'>
|
|
<div class='section-heading reveal-on-scroll'>
|
|
<div>
|
|
<div class='section-kicker'>工作流 / 02</div>
|
|
<h2 class='section-title'>从请求到结果，<br>每一步都清楚。</h2>
|
|
</div>
|
|
<p class='section-description'>把接入、路由和对账拆成三步，让团队从第一次调用开始，就知道请求发生在哪里、额度花在哪里。</p>
|
|
</div>
|
|
|
|
<div class='workflow-list'>
|
|
<article class='workflow-step reveal-on-scroll'>
|
|
<span class='workflow-index'>01</span>
|
|
<h3 class='workflow-title'>统一接入</h3>
|
|
<p class='workflow-detail'>将现有 OpenAI 兼容客户端指向统一入口，不重复改造业务代码。</p>
|
|
<span class='workflow-meta'>ONE ENDPOINT</span>
|
|
</article>
|
|
<article class='workflow-step reveal-on-scroll'>
|
|
<span class='workflow-index'>02</span>
|
|
<h3 class='workflow-title'>智能路由</h3>
|
|
<p class='workflow-detail'>根据线路与模型状态转发请求，把稳定性放在每一次调用之前。</p>
|
|
<span class='workflow-meta'>SMART ROUTING</span>
|
|
</article>
|
|
<article class='workflow-step reveal-on-scroll'>
|
|
<span class='workflow-index'>03</span>
|
|
<h3 class='workflow-title'>用量可见</h3>
|
|
<p class='workflow-detail'>充值、额度、请求记录在同一条链路里，方便预算和运营复盘。</p>
|
|
<span class='workflow-meta'>CLEAR USAGE</span>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section class='section pricing-section' id='pricing'>
|
|
<div class='pricing-layout reveal-on-scroll'>
|
|
<div>
|
|
<div class='price-label'>计价规则 / 清晰可核对</div>
|
|
<div class='price-main'>1 CNY = 1 USD</div>
|
|
<p class='price-note'>充值按 <strong>1 CNY = 1 USD</strong> 统一计价；模型额度来自一手正规渠道采购，规则清晰，账单可核对。</p>
|
|
</div>
|
|
<div class='price-facts'>
|
|
<div class='price-fact'>
|
|
<strong>一手采购</strong>
|
|
<span>模型来源清晰可追溯，方便企业核验。</span>
|
|
</div>
|
|
<div class='price-fact'>
|
|
<strong>透明对账</strong>
|
|
<span>统一计价规则，便于预算与用量管理。</span>
|
|
</div>
|
|
<div class='price-fact'>
|
|
<strong>统一入口</strong>
|
|
<span>接入路径保持一致，迁移成本更低。</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class='section docs-section' id='docs'>
|
|
<div class='docs-panel reveal-on-scroll'>
|
|
<div>
|
|
<div class='section-kicker'>文档 / 下一步</div>
|
|
<h2 class='section-title'>从文档开始，<br>让系统开始工作。</h2>
|
|
<p class='section-description'>查看模型接入、密钥配置、接口调用和迁移说明，快速完成 NewAPI 生产环境集成。</p>
|
|
</div>
|
|
<a class='doc-link' href='https://docs.oneinai.com/' target='_blank' rel='noopener'>
|
|
<span>
|
|
<small>文档地址</small>
|
|
<span>docs.oneinai.com</span>
|
|
</span>
|
|
<svg class='icon' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'>
|
|
<path d='M7 17 17 7'></path>
|
|
<path d='M7 7h10v10'></path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class='footer'>
|
|
<p>© 2026 ONEINAI Inc.</p>
|
|
<p>High-Performance API Infrastructure</p>
|
|
</footer>
|
|
</main>
|
|
</div>
|