1281 lines
85 KiB
HTML
1281 lines
85 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="海南荣刻科技有限公司，专注数据治理、人工智能、垂类模型优化与模型私有化部署，为企业提供数据到 AI 落地的全链路解决方案。">
|
|
<meta name="theme-color" content="#061018">
|
|
<link rel="icon" type="image/png" href="./assets/brand-logo-final.png">
|
|
<title data-i18n="title">海南荣刻科技有限公司 - 数据筑基 · AI 落地</title>
|
|
<script>
|
|
(function () {
|
|
const validThemes = ['system', 'light', 'dark'];
|
|
let preference = 'system';
|
|
try { preference = localStorage.getItem('site_theme') || 'system'; } catch (error) { /* Storage may be disabled. */ }
|
|
if (!validThemes.includes(preference)) preference = 'system';
|
|
const resolved = preference === 'system'
|
|
? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
|
|
: preference;
|
|
document.documentElement.dataset.themePreference = preference;
|
|
document.documentElement.dataset.theme = resolved;
|
|
})();
|
|
</script>
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
|
|
:root {
|
|
color-scheme: dark;
|
|
--ink-1000: #03080d;
|
|
--ink-950: #061018;
|
|
--ink-900: #0a1721;
|
|
--ink-850: #0d1d29;
|
|
--ink-800: #102431;
|
|
--paper: #f2f7f8;
|
|
--white: #ffffff;
|
|
--text: #eaf4f5;
|
|
--text-soft: #9bb0b7;
|
|
--text-faint: #6e858d;
|
|
--cyan: #36e4da;
|
|
--cyan-bright: #72fff1;
|
|
--blue: #4a8dff;
|
|
--violet: #9277ff;
|
|
--success: #79efa9;
|
|
--warning: #ffcf66;
|
|
--line: rgba(183, 229, 231, .13);
|
|
--line-strong: rgba(114, 255, 241, .34);
|
|
--surface: rgba(13, 29, 41, .78);
|
|
--surface-solid: #0d1d29;
|
|
--ambient: 0 24px 100px rgba(0, 0, 0, .34);
|
|
--glow: 0 0 48px rgba(54, 228, 218, .11);
|
|
--radius-sm: 10px;
|
|
--radius-md: 16px;
|
|
--radius-lg: 24px;
|
|
--max-width: 1200px;
|
|
--nav-height: 72px;
|
|
--ease: cubic-bezier(.2, .8, .2, 1);
|
|
--mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
|
|
}
|
|
|
|
:root[data-theme="light"] {
|
|
color-scheme: light;
|
|
--ink-1000: #071329;
|
|
--ink-950: #f7faff;
|
|
--ink-900: #eef4ff;
|
|
--ink-850: #e8effb;
|
|
--ink-800: #dce7f8;
|
|
--paper: #eef4ff;
|
|
--white: #071329;
|
|
--text: #0b1830;
|
|
--text-soft: #4d5d77;
|
|
--text-faint: #75839a;
|
|
--cyan: #146cf2;
|
|
--cyan-bright: #0c55cf;
|
|
--blue: #335cff;
|
|
--violet: #8066e8;
|
|
--success: #168b73;
|
|
--warning: #c67a21;
|
|
--line: rgba(19, 48, 96, .12);
|
|
--line-strong: rgba(20, 108, 242, .32);
|
|
--surface: rgba(255, 255, 255, .7);
|
|
--surface-solid: #ffffff;
|
|
--ambient: 0 28px 90px rgba(31, 67, 128, .13);
|
|
--glow: 0 0 52px rgba(51, 92, 255, .09);
|
|
}
|
|
|
|
:root[data-theme="dark"] {
|
|
color-scheme: dark;
|
|
--cyan: #47e5ef;
|
|
--cyan-bright: #8bfbff;
|
|
--blue: #42a5ff;
|
|
--violet: #8982ff;
|
|
--warning: #ff9b52;
|
|
}
|
|
|
|
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-height) + 20px); }
|
|
body {
|
|
margin: 0;
|
|
min-width: 320px;
|
|
overflow-x: hidden;
|
|
background: var(--ink-950);
|
|
color: var(--text);
|
|
font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
|
|
font-size: 17px;
|
|
line-height: 1.7;
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
body.menu-open { overflow: hidden; }
|
|
a { color: inherit; text-decoration: none; }
|
|
button { color: inherit; font: inherit; }
|
|
img { max-width: 100%; display: block; }
|
|
::selection { color: var(--ink-1000); background: var(--cyan); }
|
|
|
|
.skip-link {
|
|
position: fixed;
|
|
top: 12px;
|
|
left: 12px;
|
|
z-index: 2000;
|
|
padding: 10px 16px;
|
|
border-radius: 8px;
|
|
color: var(--ink-1000);
|
|
background: var(--cyan-bright);
|
|
transform: translateY(-160%);
|
|
transition: transform .2s;
|
|
}
|
|
.skip-link:focus { transform: translateY(0); }
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--cyan-bright);
|
|
outline-offset: 4px;
|
|
}
|
|
|
|
.container { width: min(calc(100% - 48px), var(--max-width)); margin-inline: auto; }
|
|
.mono { font-family: var(--mono); letter-spacing: .06em; }
|
|
|
|
.navbar {
|
|
position: fixed;
|
|
inset: 0 0 auto;
|
|
z-index: 1000;
|
|
height: var(--nav-height);
|
|
border-bottom: 1px solid transparent;
|
|
background: rgba(6, 16, 24, .62);
|
|
backdrop-filter: blur(18px) saturate(135%);
|
|
-webkit-backdrop-filter: blur(18px) saturate(135%);
|
|
transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
|
|
}
|
|
|
|
.navbar.scrolled {
|
|
border-bottom-color: var(--line);
|
|
background: rgba(6, 16, 24, .91);
|
|
box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
|
|
}
|
|
|
|
.nav-inner {
|
|
width: min(calc(100% - 48px), var(--max-width));
|
|
height: 100%;
|
|
margin-inline: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 28px;
|
|
}
|
|
|
|
.brand { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; }
|
|
.brand-mark {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 38px;
|
|
height: 38px;
|
|
flex: 0 0 38px;
|
|
}
|
|
.brand-mark img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
transition: filter .35s ease, transform .35s var(--ease);
|
|
}
|
|
.brand:hover .brand-mark img { transform: rotate(-4deg) scale(1.04); }
|
|
.brand-copy { display: flex; flex-direction: column; line-height: 1.15; }
|
|
.brand-name { color: var(--white); font-weight: 750; letter-spacing: .04em; }
|
|
.brand-en { margin-top: 4px; color: var(--text-faint); font: 500 8px/1 var(--mono); letter-spacing: .16em; }
|
|
|
|
.nav-links { display: flex; align-items: center; gap: 28px; }
|
|
.nav-link {
|
|
position: relative;
|
|
padding-block: 9px;
|
|
color: var(--text-soft);
|
|
font-size: 15px;
|
|
font-weight: 550;
|
|
transition: color .2s ease;
|
|
}
|
|
.nav-link::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: auto 50% 2px;
|
|
width: 4px;
|
|
height: 4px;
|
|
border-radius: 50%;
|
|
background: var(--cyan);
|
|
box-shadow: 0 0 12px var(--cyan);
|
|
opacity: 0;
|
|
transform: translateX(-50%) scale(0);
|
|
transition: opacity .2s ease, transform .2s ease;
|
|
}
|
|
.nav-link:hover, .nav-link.active { color: var(--white); }
|
|
.nav-link.active::after { opacity: 1; transform: translateX(-50%) scale(1); }
|
|
|
|
.nav-actions { display: flex; align-items: center; gap: 10px; }
|
|
.theme-switch {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
min-height: 38px;
|
|
padding: 3px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 9px;
|
|
background: rgba(255, 255, 255, .025);
|
|
transition: border-color .2s ease, background .2s ease;
|
|
}
|
|
.theme-switch:hover { border-color: var(--line-strong); background: rgba(54, 228, 218, .04); }
|
|
.theme-option {
|
|
position: relative;
|
|
display: inline-grid;
|
|
place-items: center;
|
|
align-items: center;
|
|
width: 30px;
|
|
height: 30px;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: var(--text-soft);
|
|
cursor: pointer;
|
|
transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
|
|
}
|
|
.theme-option:hover { background: color-mix(in srgb, var(--cyan) 8%, transparent); transform: translateY(-1px); }
|
|
.theme-option[aria-checked="true"] { background: color-mix(in srgb, var(--cyan) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cyan) 28%, transparent); }
|
|
.theme-option-icon { width: 13px; height: 13px; border: 1px solid var(--line-strong); border-radius: 50%; box-shadow: 0 0 10px color-mix(in srgb, var(--cyan) 16%, transparent); }
|
|
.theme-option-icon.system { background: linear-gradient(90deg, #f7fbff 0 49%, #0a1721 51% 100%); }
|
|
.theme-option-icon.light { background: #eef7ff; box-shadow: 0 0 0 2px rgba(51, 92, 255, .11), 0 0 9px rgba(74, 141, 255, .22); }
|
|
.theme-option-icon.dark { background: #07131d; box-shadow: inset -3px 0 0 #54ddea, 0 0 9px rgba(54, 228, 218, .18); }
|
|
.lang-switch {
|
|
display: inline-flex;
|
|
padding: 3px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 9px;
|
|
background: rgba(255, 255, 255, .025);
|
|
}
|
|
.lang-btn {
|
|
min-width: 34px;
|
|
padding: 5px 8px;
|
|
border: 0;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: var(--text-faint);
|
|
font: 650 12px/1.4 var(--mono);
|
|
cursor: pointer;
|
|
}
|
|
.lang-btn.active { color: var(--ink-1000); background: var(--cyan); }
|
|
|
|
.nav-cta, .button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
min-height: 50px;
|
|
border: 1px solid transparent;
|
|
border-radius: 10px;
|
|
padding: 0 20px;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
transition: transform .25s var(--ease), box-shadow .25s ease, border-color .25s ease, background .25s ease;
|
|
}
|
|
.nav-cta { min-height: 38px; padding-inline: 16px; color: var(--ink-1000); background: var(--cyan); }
|
|
.nav-cta:hover, .button-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(54, 228, 218, .2); }
|
|
|
|
.menu-btn {
|
|
display: none;
|
|
width: 42px;
|
|
height: 42px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 10px;
|
|
background: rgba(255, 255, 255, .03);
|
|
cursor: pointer;
|
|
}
|
|
.menu-btn span { display: block; width: 18px; height: 1px; margin: 5px auto; background: var(--text); transition: transform .25s, opacity .2s; }
|
|
.menu-btn.open span:first-child { transform: translateY(6px) rotate(45deg); }
|
|
.menu-btn.open span:nth-child(2) { opacity: 0; }
|
|
.menu-btn.open span:last-child { transform: translateY(-6px) rotate(-45deg); }
|
|
|
|
.hero {
|
|
position: relative;
|
|
min-height: 920px;
|
|
padding: 150px 0 90px;
|
|
overflow: hidden;
|
|
isolation: isolate;
|
|
background:
|
|
radial-gradient(circle at var(--pointer-x, 72%) var(--pointer-y, 28%), rgba(54, 228, 218, .13), transparent 25%),
|
|
radial-gradient(circle at 14% 22%, rgba(74, 141, 255, .12), transparent 28%),
|
|
linear-gradient(180deg, #061018 0%, #07131c 65%, #091721 100%);
|
|
}
|
|
.hero::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 1;
|
|
opacity: .45;
|
|
background-image: linear-gradient(rgba(176, 235, 237, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(176, 235, 237, .045) 1px, transparent 1px);
|
|
background-size: 56px 56px;
|
|
mask-image: linear-gradient(to bottom, #000 0%, transparent 88%);
|
|
-webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 88%);
|
|
}
|
|
.hero::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: auto 0 0;
|
|
z-index: 1;
|
|
height: 220px;
|
|
background: linear-gradient(transparent, rgba(9, 23, 33, .96));
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hero-webgl {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 0;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
}
|
|
.hero-webgl canvas { width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .7s ease; }
|
|
.hero-webgl.is-ready canvas { opacity: 1; }
|
|
.webgl-fallback {
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(circle at 74% 34%, rgba(71, 229, 239, .2), transparent 19%),
|
|
radial-gradient(ellipse at 82% 48%, rgba(225, 233, 238, .16), transparent 34%),
|
|
linear-gradient(150deg, transparent 42%, rgba(255, 255, 255, .05) 58%, transparent 72%);
|
|
transition: opacity .5s ease;
|
|
}
|
|
.hero-webgl.is-ready .webgl-fallback { opacity: 0; }
|
|
.hero-webgl.has-error .webgl-fallback { opacity: 1; }
|
|
|
|
.hero-copy { position: relative; z-index: 2; }
|
|
.hero-spatial {
|
|
position: relative;
|
|
z-index: 2;
|
|
min-height: 560px;
|
|
pointer-events: none;
|
|
}
|
|
.hero-capabilities { position: absolute; inset: 0; }
|
|
.hero-capability {
|
|
position: absolute;
|
|
min-width: 128px;
|
|
padding-top: 13px;
|
|
color: var(--text);
|
|
text-align: left;
|
|
}
|
|
.hero-capability::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 76px;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, var(--cyan), transparent);
|
|
box-shadow: 0 0 14px color-mix(in srgb, var(--cyan) 44%, transparent);
|
|
}
|
|
.hero-capability-code {
|
|
display: block;
|
|
margin-bottom: 6px;
|
|
color: var(--cyan);
|
|
font: 700 10px/1 var(--mono);
|
|
letter-spacing: .16em;
|
|
}
|
|
.hero-capability strong { display: block; font-size: 16px; line-height: 1.35; letter-spacing: .015em; }
|
|
.hero-capability--data { left: 2%; bottom: 11%; }
|
|
.hero-capability--model { left: 27%; bottom: -12%; }
|
|
.hero-capability--deploy { right: -70px; top: 45%; }
|
|
|
|
.hero-layout {
|
|
position: relative;
|
|
z-index: 2;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, .88fr) minmax(520px, 1.12fr);
|
|
align-items: center;
|
|
gap: clamp(56px, 7vw, 96px);
|
|
}
|
|
|
|
.eyebrow {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 24px;
|
|
color: var(--cyan);
|
|
font: 650 12px/1.4 var(--mono);
|
|
letter-spacing: .14em;
|
|
text-transform: uppercase;
|
|
}
|
|
.eyebrow::before { content: ""; width: 30px; height: 1px; background: currentColor; box-shadow: 0 0 12px currentColor; }
|
|
|
|
h1, h2, h3, p { margin-top: 0; }
|
|
.hero h1 {
|
|
max-width: 660px;
|
|
margin-bottom: 26px;
|
|
color: var(--white);
|
|
font-size: clamp(52px, 5.4vw, 76px);
|
|
font-weight: 780;
|
|
line-height: 1.06;
|
|
letter-spacing: -.055em;
|
|
}
|
|
.hero h1 .accent { color: var(--cyan-bright); text-shadow: 0 0 36px rgba(114, 255, 241, .16); }
|
|
.hero-description { max-width: 620px; margin-bottom: 38px; color: var(--text-soft); font-size: clamp(18px, 1.5vw, 20px); line-height: 1.78; }
|
|
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 44px; }
|
|
.button-primary { color: var(--ink-1000); background: var(--cyan); }
|
|
.button-secondary { border-color: var(--line); color: var(--text); background: rgba(255, 255, 255, .025); }
|
|
.button-secondary:hover { border-color: var(--line-strong); background: rgba(54, 228, 218, .055); transform: translateY(-2px); }
|
|
.button-arrow { font-family: var(--mono); transition: transform .2s ease; }
|
|
.button:hover .button-arrow { transform: translateX(3px); }
|
|
|
|
.hero-proof { display: flex; flex-wrap: wrap; gap: 24px; color: var(--text-faint); font: 550 13px/1.5 var(--mono); letter-spacing: .045em; }
|
|
.hero-proof span { display: inline-flex; align-items: center; gap: 8px; }
|
|
.hero-proof span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--success); box-shadow: 0 0 10px rgba(121, 239, 169, .6); }
|
|
|
|
.control-room { position: relative; }
|
|
.control-room::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 8% -6% -8% 14%;
|
|
z-index: -1;
|
|
border-radius: 50%;
|
|
background: rgba(54, 228, 218, .12);
|
|
filter: blur(70px);
|
|
opacity: .55;
|
|
}
|
|
.console {
|
|
border: 1px solid rgba(167, 232, 233, .2);
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
background: rgba(6, 17, 25, .84);
|
|
box-shadow: var(--ambient), var(--glow), inset 0 1px 0 rgba(255, 255, 255, .035);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
}
|
|
.console-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
min-height: 56px;
|
|
padding: 0 20px;
|
|
border-bottom: 1px solid var(--line);
|
|
background: rgba(255, 255, 255, .018);
|
|
}
|
|
.window-label { display: flex; align-items: center; gap: 10px; color: var(--text-faint); font: 600 10px/1 var(--mono); letter-spacing: .13em; }
|
|
.window-dots { display: inline-flex; gap: 5px; }
|
|
.window-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-faint); opacity: .45; }
|
|
.system-status { display: inline-flex; align-items: center; gap: 8px; color: var(--success); font: 650 9px/1 var(--mono); letter-spacing: .12em; }
|
|
.system-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; animation: statusPulse 2.4s ease-in-out infinite; }
|
|
|
|
.console-body { display: grid; grid-template-columns: 164px 1fr; min-height: 440px; }
|
|
.pipeline-nav { padding: 22px 14px; border-right: 1px solid var(--line); background: rgba(255, 255, 255, .012); }
|
|
.pipeline-title { margin: 0 8px 18px; color: var(--text-faint); font: 600 9px/1.3 var(--mono); letter-spacing: .13em; }
|
|
.pipeline-step {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: 26px 1fr;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-height: 54px;
|
|
padding: 9px 8px;
|
|
border: 1px solid transparent;
|
|
border-radius: 9px;
|
|
color: var(--text-faint);
|
|
font-size: 11px;
|
|
}
|
|
.pipeline-step + .pipeline-step { margin-top: 5px; }
|
|
.pipeline-step.active { border-color: rgba(54, 228, 218, .18); color: var(--text); background: rgba(54, 228, 218, .06); }
|
|
.step-index { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid var(--line); border-radius: 7px; font: 650 9px/1 var(--mono); }
|
|
.active .step-index { border-color: var(--line-strong); color: var(--cyan); background: rgba(54, 228, 218, .08); }
|
|
.step-copy small { display: block; margin-top: 2px; color: var(--text-faint); font: 500 7px/1.4 var(--mono); letter-spacing: .07em; }
|
|
|
|
.orchestrator { min-width: 0; padding: 24px; }
|
|
.orchestrator-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
|
|
.orchestrator-kicker { margin-bottom: 7px; color: var(--cyan); font: 600 9px/1.2 var(--mono); letter-spacing: .14em; }
|
|
.orchestrator h2 { margin-bottom: 0; color: var(--white); font-size: 19px; line-height: 1.35; letter-spacing: -.02em; }
|
|
.live-badge { padding: 6px 9px; border: 1px solid rgba(121, 239, 169, .2); border-radius: 7px; color: var(--success); background: rgba(121, 239, 169, .05); font: 650 8px/1 var(--mono); letter-spacing: .1em; }
|
|
|
|
.engine-map {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 10px;
|
|
min-height: 184px;
|
|
padding: 18px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 14px;
|
|
background: linear-gradient(135deg, rgba(74, 141, 255, .05), rgba(54, 228, 218, .025));
|
|
overflow: hidden;
|
|
}
|
|
.engine-map::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 1px;
|
|
background: linear-gradient(transparent, var(--cyan), transparent);
|
|
box-shadow: 0 0 18px var(--cyan);
|
|
opacity: .4;
|
|
animation: scan 5s linear infinite;
|
|
}
|
|
.engine-node {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
padding: 13px;
|
|
border: 1px solid rgba(179, 230, 232, .1);
|
|
border-radius: 10px;
|
|
background: rgba(6, 16, 24, .72);
|
|
}
|
|
.engine-node-name { min-width: 0; }
|
|
.engine-node-name strong { display: block; overflow: hidden; color: var(--text); font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
|
|
.engine-node-name small { display: block; margin-top: 3px; color: var(--text-faint); font: 500 7px/1.2 var(--mono); letter-spacing: .07em; }
|
|
.node-state { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px rgba(54, 228, 218, .7); }
|
|
.node-state.blue { background: var(--blue); box-shadow: 0 0 10px rgba(74, 141, 255, .7); }
|
|
.node-state.violet { background: var(--violet); box-shadow: 0 0 10px rgba(146, 119, 255, .7); }
|
|
.node-state.green { background: var(--success); box-shadow: 0 0 10px rgba(121, 239, 169, .7); }
|
|
|
|
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
|
|
.metric { padding: 13px 14px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255, 255, 255, .018); }
|
|
.metric-label { display: block; margin-bottom: 7px; color: var(--text-faint); font: 550 7px/1.2 var(--mono); letter-spacing: .08em; }
|
|
.metric strong { color: var(--white); font: 700 18px/1 var(--mono); }
|
|
.metric strong em { color: var(--cyan); font-size: 9px; font-style: normal; }
|
|
|
|
.console-foot {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 14px;
|
|
margin-top: 12px;
|
|
color: var(--text-faint);
|
|
font: 500 7px/1.4 var(--mono);
|
|
letter-spacing: .07em;
|
|
}
|
|
.console-progress { width: 96px; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .08); }
|
|
.console-progress i { display: block; width: 76%; height: 100%; background: linear-gradient(90deg, var(--blue), var(--cyan)); box-shadow: 0 0 10px var(--cyan); }
|
|
|
|
.section { position: relative; padding: 124px 0; overflow: hidden; }
|
|
.section-header { display: grid; grid-template-columns: minmax(0, .8fr) minmax(300px, .48fr); align-items: end; gap: 64px; margin-bottom: 60px; }
|
|
.section-number { display: block; margin-bottom: 18px; color: var(--cyan); font: 650 11px/1 var(--mono); letter-spacing: .14em; }
|
|
.section-title { max-width: 760px; margin-bottom: 0; color: var(--white); font-size: clamp(38px, 4.25vw, 58px); font-weight: 750; line-height: 1.1; letter-spacing: -.045em; }
|
|
.section-desc { max-width: 550px; margin-bottom: 0; color: var(--text-soft); font-size: 18px; line-height: 1.78; }
|
|
|
|
.about { background: #091721; }
|
|
.about::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 88% 22%, rgba(74, 141, 255, .08), transparent 25%); }
|
|
.about-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(480px, 1.2fr); gap: 70px; align-items: start; }
|
|
.about-copy p { color: var(--text-soft); font-size: 17px; line-height: 1.9; }
|
|
.about-copy p + p { margin-top: 20px; }
|
|
.about-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 34px; }
|
|
.fact { padding: 20px; border-top: 1px solid var(--line-strong); background: linear-gradient(180deg, rgba(54, 228, 218, .04), transparent); }
|
|
.fact strong { display: block; margin-bottom: 8px; color: var(--white); font: 700 28px/1 var(--mono); }
|
|
.fact span { color: var(--text-faint); font-size: 14px; }
|
|
|
|
.capability-chain { position: relative; display: grid; gap: 10px; }
|
|
.chain-card {
|
|
display: grid;
|
|
grid-template-columns: 54px minmax(0, 1fr);
|
|
align-items: center;
|
|
gap: 18px;
|
|
min-height: 98px;
|
|
padding: 20px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 14px;
|
|
background: rgba(255, 255, 255, .018);
|
|
transition: border-color .25s ease, background .25s ease, transform .25s var(--ease);
|
|
}
|
|
.chain-card:hover { border-color: var(--line-strong); background: rgba(54, 228, 218, .035); transform: translateX(4px); }
|
|
.chain-index { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid var(--line); border-radius: 12px; color: var(--cyan); font: 700 12px/1 var(--mono); }
|
|
.chain-copy h3 { margin-bottom: 6px; color: var(--white); font-size: 19px; }
|
|
.chain-copy p { margin-bottom: 0; color: var(--text-faint); font-size: 14px; line-height: 1.65; }
|
|
|
|
.services { background: var(--ink-950); }
|
|
.services::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .28; background-image: radial-gradient(rgba(182, 229, 230, .14) .7px, transparent .7px); background-size: 24px 24px; mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent); }
|
|
.services-layout { position: relative; display: grid; grid-template-columns: 1.18fr .82fr .82fr; gap: 14px; }
|
|
.service-card {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 280px;
|
|
padding: 28px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-md);
|
|
overflow: hidden;
|
|
background: rgba(13, 29, 41, .62);
|
|
transition: transform .3s var(--ease), border-color .3s ease, background .3s ease, box-shadow .3s ease;
|
|
}
|
|
.service-card:hover { transform: translateY(-5px); border-color: rgba(114, 255, 241, .28); background: rgba(16, 36, 49, .82); box-shadow: 0 24px 60px rgba(0, 0, 0, .2); }
|
|
.service-card.featured { grid-row: span 2; min-height: 574px; padding: 34px; background: linear-gradient(155deg, rgba(54, 228, 218, .105), rgba(13, 29, 41, .72) 46%, rgba(74, 141, 255, .06)); }
|
|
.service-card::after { content: ""; position: absolute; top: 0; left: 26px; right: 26px; height: 1px; background: linear-gradient(90deg, transparent, rgba(114, 255, 241, .46), transparent); opacity: 0; transition: opacity .3s; }
|
|
.service-card:hover::after, .service-card.featured::after { opacity: 1; }
|
|
.service-code { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 42px; color: var(--cyan); font: 650 10px/1 var(--mono); letter-spacing: .11em; }
|
|
.service-content { margin-top: auto; }
|
|
.featured .service-code { margin-bottom: 72px; }
|
|
.service-state { color: var(--text-faint); }
|
|
.service-card h3 { max-width: 410px; margin-bottom: 14px; color: var(--white); font-size: 25px; line-height: 1.3; letter-spacing: -.025em; }
|
|
.featured h3 { font-size: 36px; }
|
|
.service-card p { margin-bottom: 0; color: var(--text-soft); font-size: 15px; line-height: 1.78; }
|
|
.service-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 32px; }
|
|
.service-tag { padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--text-faint); background: rgba(0, 0, 0, .12); font: 550 9px/1 var(--mono); letter-spacing: .06em; }
|
|
|
|
.advantages { background: var(--ink-950); color: var(--text); }
|
|
.advantages .section-number { color: var(--cyan); }
|
|
.advantages .section-title { color: var(--white); }
|
|
.advantages .section-desc { color: var(--text-soft); }
|
|
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--surface); box-shadow: var(--ambient); }
|
|
.proof-card { min-height: 330px; padding: 28px; border-right: 1px solid var(--line); }
|
|
.proof-card:last-child { border-right: 0; }
|
|
.proof-code { display: block; margin-bottom: 86px; color: var(--cyan); font: 700 11px/1 var(--mono); letter-spacing: .12em; }
|
|
.proof-card h3 { margin-bottom: 14px; color: var(--white); font-size: 22px; line-height: 1.35; letter-spacing: -.02em; }
|
|
.proof-card p { margin-bottom: 0; color: var(--text-soft); font-size: 15px; line-height: 1.78; }
|
|
|
|
.offices { background: #08141d; }
|
|
.office-network { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
|
|
.office-card { position: relative; min-height: 380px; padding: 34px; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(150deg, rgba(74, 141, 255, .07), rgba(13, 29, 41, .72)); }
|
|
.office-card:last-child { background: linear-gradient(150deg, rgba(54, 228, 218, .07), rgba(13, 29, 41, .72)); }
|
|
.office-coordinate { display: flex; align-items: center; justify-content: space-between; margin-bottom: 90px; color: var(--text-faint); font: 600 10px/1 var(--mono); letter-spacing: .11em; }
|
|
.office-card h3 { margin-bottom: 14px; color: var(--white); font-size: 30px; letter-spacing: -.03em; }
|
|
.office-card p { max-width: 500px; margin-bottom: 28px; color: var(--text-soft); font-size: 16px; line-height: 1.78; }
|
|
.office-tags { display: flex; flex-wrap: wrap; gap: 8px; }
|
|
.office-tag { padding: 8px 11px; border: 1px solid var(--line); border-radius: 7px; color: var(--text-faint); font: 550 9px/1 var(--mono); letter-spacing: .07em; }
|
|
|
|
.contact { padding: 124px 0 70px; background: var(--ink-1000); }
|
|
.contact-shell { position: relative; padding: clamp(34px, 5vw, 66px); border: 1px solid rgba(114, 255, 241, .2); border-radius: 28px; overflow: hidden; background: linear-gradient(135deg, rgba(54, 228, 218, .09), rgba(74, 141, 255, .045) 45%, rgba(146, 119, 255, .055)); box-shadow: var(--ambient); }
|
|
.contact-shell::before { content: ""; position: absolute; width: 360px; height: 360px; right: -130px; top: -180px; border-radius: 50%; background: rgba(54, 228, 218, .1); filter: blur(65px); }
|
|
.contact-head { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px; margin-bottom: 58px; }
|
|
.contact h2 { max-width: 760px; margin-bottom: 0; color: var(--white); font-size: clamp(40px, 5vw, 68px); line-height: 1.08; letter-spacing: -.05em; }
|
|
.contact-lead { max-width: 360px; margin-bottom: 4px; color: var(--text-soft); font-size: 16px; line-height: 1.78; }
|
|
.contact-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
|
|
.contact-item { min-height: 160px; padding: 28px 26px 0 0; }
|
|
.contact-item + .contact-item { padding-left: 26px; border-left: 1px solid var(--line); }
|
|
.contact-label { display: block; margin-bottom: 22px; color: var(--cyan); font: 650 10px/1 var(--mono); letter-spacing: .11em; }
|
|
.contact-item h3 { margin-bottom: 9px; color: var(--white); font-size: 19px; }
|
|
.contact-value { display: inline-block; color: var(--text-soft); font-size: 16px; overflow-wrap: anywhere; transition: color .2s ease; }
|
|
a.contact-value:hover { color: var(--cyan-bright); }
|
|
|
|
footer { padding: 0 0 34px; background: var(--ink-1000); }
|
|
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 28px; border-top: 1px solid var(--line); color: var(--text-faint); font-size: 13px; }
|
|
.footer-signal { color: var(--text-faint); font: 550 9px/1 var(--mono); letter-spacing: .1em; }
|
|
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(26px);
|
|
transition: opacity .7s var(--ease), transform .7s var(--ease);
|
|
}
|
|
.reveal.is-visible { opacity: 1; transform: translateY(0); }
|
|
.delay-1 { transition-delay: .08s; }
|
|
.delay-2 { transition-delay: .16s; }
|
|
.delay-3 { transition-delay: .24s; }
|
|
|
|
@keyframes statusPulse { 0%, 100% { opacity: 1; } 50% { opacity: .38; } }
|
|
@keyframes scan { from { left: -4%; } to { left: 104%; } }
|
|
|
|
body, .navbar, .nav-links, .hero, .section, .contact, footer, .service-card, .chain-card, .office-card, .contact-shell, .proof-grid {
|
|
transition: color .35s ease, background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
|
|
}
|
|
|
|
:root[data-theme="dark"] .hero {
|
|
background: radial-gradient(circle at 82% 28%, rgba(71, 229, 239, .08), transparent 24%), linear-gradient(180deg, #05070a 0%, #090d12 64%, #0a1118 100%);
|
|
}
|
|
:root[data-theme="dark"] .brand-mark img { filter: brightness(1.85) saturate(1.08) drop-shadow(0 0 9px rgba(71, 229, 239, .16)); }
|
|
:root[data-theme="dark"] .hero::before { opacity: .2; }
|
|
:root[data-theme="dark"] .hero::after { background: linear-gradient(transparent, rgba(9, 17, 24, .98)); }
|
|
:root[data-theme="dark"] .hero h1 .accent { color: #87dfff; text-shadow: 0 0 34px rgba(71, 229, 239, .16); }
|
|
:root[data-theme="dark"] .hero-capability { color: #edf4f7; }
|
|
:root[data-theme="dark"] .contact-shell { border-color: rgba(71, 229, 239, .18); background: linear-gradient(135deg, rgba(225, 233, 238, .075), rgba(71, 229, 239, .04) 52%, rgba(255, 155, 82, .035)); }
|
|
|
|
:root[data-theme="light"] .navbar { background: rgba(250, 252, 255, .72); }
|
|
:root[data-theme="light"] .navbar.scrolled { background: rgba(250, 252, 255, .93); box-shadow: 0 12px 40px rgba(35, 53, 87, .08); }
|
|
:root[data-theme="light"] .lang-switch,
|
|
:root[data-theme="light"] .theme-switch,
|
|
:root[data-theme="light"] .menu-btn { background: rgba(255, 255, 255, .58); }
|
|
:root[data-theme="light"] .nav-cta,
|
|
:root[data-theme="light"] .button-primary,
|
|
:root[data-theme="light"] .lang-btn.active { color: #fff; }
|
|
:root[data-theme="light"] .button-secondary { background: rgba(255, 255, 255, .58); }
|
|
|
|
:root[data-theme="light"] .hero {
|
|
background: radial-gradient(circle at 76% 34%, rgba(99, 205, 255, .16), transparent 24%), linear-gradient(180deg, #fbfdff 0%, #f4f8ff 72%, #eef4ff 100%);
|
|
}
|
|
:root[data-theme="light"] .hero::before { opacity: .28; background-image: linear-gradient(rgba(37, 84, 153, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(37, 84, 153, .055) 1px, transparent 1px); }
|
|
:root[data-theme="light"] .hero::after { background: linear-gradient(transparent, rgba(238, 244, 255, .98)); }
|
|
:root[data-theme="light"] .hero h1 .accent { color: #125ad4; text-shadow: none; }
|
|
:root[data-theme="light"] .webgl-fallback { background: radial-gradient(circle at 76% 36%, rgba(87, 204, 255, .34), transparent 18%), conic-gradient(from 205deg at 75% 42%, transparent, rgba(103, 103, 255, .18), rgba(255, 185, 102, .2), transparent 30%), linear-gradient(180deg, #fbfdff, #eef4ff); }
|
|
|
|
:root[data-theme="light"] .about,
|
|
:root[data-theme="light"] .services,
|
|
:root[data-theme="light"] .offices { background: var(--ink-900); }
|
|
:root[data-theme="light"] .about::before { background: radial-gradient(circle at 88% 22%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 28%); }
|
|
:root[data-theme="light"] .chain-card { background: rgba(255, 255, 255, .58); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .62); }
|
|
:root[data-theme="light"] .chain-card:hover { background: rgba(255, 255, 255, .86); }
|
|
:root[data-theme="light"] .service-card { background: rgba(255, 255, 255, .66); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72); }
|
|
:root[data-theme="light"] .service-card:hover { background: rgba(255, 255, 255, .9); box-shadow: 0 24px 60px rgba(55, 70, 112, .12); }
|
|
:root[data-theme="light"] .service-card.featured { background: linear-gradient(150deg, rgba(83, 177, 255, .16), rgba(255, 255, 255, .8) 45%, rgba(104, 93, 239, .08)); }
|
|
:root[data-theme="light"] .service-tag { background: rgba(255, 255, 255, .5); }
|
|
:root[data-theme="light"] .office-card,
|
|
:root[data-theme="light"] .office-card:last-child { background: linear-gradient(150deg, rgba(255, 255, 255, .76), color-mix(in srgb, var(--blue) 7%, var(--ink-900))); }
|
|
:root[data-theme="light"] .advantages { background: #f7faff; }
|
|
:root[data-theme="light"] .proof-grid { background: rgba(255, 255, 255, .82); }
|
|
:root[data-theme="light"] .contact,
|
|
:root[data-theme="light"] footer { background: var(--ink-950); }
|
|
:root[data-theme="light"] .contact-shell { border-color: rgba(20, 108, 242, .2); background: linear-gradient(135deg, rgba(70, 178, 255, .12), rgba(255, 255, 255, .7) 45%, rgba(123, 102, 232, .1)); }
|
|
:root[data-theme="light"] .contact-shell::before { background: color-mix(in srgb, var(--cyan) 18%, transparent); }
|
|
|
|
@media (max-width: 1100px) {
|
|
.hero-spatial { width: min(100%, 760px); min-height: 420px; margin-left: auto; }
|
|
}
|
|
|
|
@media (max-width: 860px) {
|
|
:root[data-theme="light"] .nav-links { background: rgba(250, 252, 255, .98); }
|
|
}
|
|
|
|
@media (max-width: 620px) {
|
|
.hero-layout { gap: 28px; }
|
|
.hero-spatial { min-height: 280px; }
|
|
.hero-capabilities {
|
|
inset: auto 0 0;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 8px;
|
|
}
|
|
.hero-capability {
|
|
position: relative;
|
|
inset: auto;
|
|
min-width: 0;
|
|
padding: 11px 8px 0;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
.hero-capability::before { display: none; }
|
|
.hero-capability-code { margin-bottom: 5px; font-size: 8px; }
|
|
.hero-capability strong { font-size: 13px; white-space: nowrap; }
|
|
.hero-webgl::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
|
|
:root[data-theme="dark"] .hero-webgl::after { background: linear-gradient(180deg, rgba(5, 7, 10, .74) 5%, rgba(5, 7, 10, .52) 42%, rgba(5, 7, 10, .12) 68%, transparent 86%); }
|
|
:root[data-theme="light"] .hero-webgl::after { background: linear-gradient(180deg, rgba(250, 253, 255, .8) 5%, rgba(250, 253, 255, .52) 46%, rgba(250, 253, 255, .1) 74%, transparent); }
|
|
}
|
|
|
|
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
|
|
.navbar { background: rgba(6, 16, 24, .96); }
|
|
.console { background: #07131c; }
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
.nav-links { gap: 18px; }
|
|
.hero { min-height: auto; }
|
|
.hero-layout { grid-template-columns: 1fr; }
|
|
.hero-copy { max-width: 760px; }
|
|
.control-room { width: min(100%, 700px); margin-left: auto; }
|
|
.section-header { gap: 36px; }
|
|
.about-grid { grid-template-columns: 1fr; }
|
|
.about-copy { max-width: 800px; }
|
|
.services-layout { grid-template-columns: repeat(2, 1fr); }
|
|
.service-card.featured { grid-row: auto; grid-column: span 2; min-height: 440px; }
|
|
.featured .service-code { margin-bottom: 110px; }
|
|
.proof-grid { grid-template-columns: repeat(2, 1fr); }
|
|
.proof-card:nth-child(2) { border-right: 0; }
|
|
.proof-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
|
|
}
|
|
|
|
@media (max-width: 860px) {
|
|
:root { --nav-height: 66px; }
|
|
.nav-inner, .container { width: min(calc(100% - 36px), var(--max-width)); }
|
|
.menu-btn { display: block; }
|
|
.nav-links {
|
|
position: fixed;
|
|
inset: var(--nav-height) 0 auto;
|
|
display: grid;
|
|
gap: 0;
|
|
padding: 18px;
|
|
border-bottom: 1px solid var(--line);
|
|
background: rgba(6, 16, 24, .98);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transform: translateY(-12px);
|
|
transition: opacity .25s ease, transform .25s var(--ease);
|
|
}
|
|
.nav-links.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
|
|
.nav-link { padding: 14px 6px; border-bottom: 1px solid var(--line); font-size: 15px; }
|
|
.nav-link::after { display: none; }
|
|
.nav-actions { padding-top: 14px; justify-content: space-between; }
|
|
.nav-cta { min-height: 42px; }
|
|
.hero { padding-top: 126px; }
|
|
.hero-layout { gap: 58px; }
|
|
.hero h1 { font-size: clamp(45px, 10vw, 68px); }
|
|
.section { padding: 96px 0; }
|
|
.section-header { grid-template-columns: 1fr; gap: 24px; margin-bottom: 46px; }
|
|
.office-network { grid-template-columns: 1fr; }
|
|
.contact-head { grid-template-columns: 1fr; gap: 24px; }
|
|
.contact-grid { grid-template-columns: 1fr; }
|
|
.contact-item { min-height: auto; padding: 24px 0; }
|
|
.contact-item + .contact-item { padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
|
|
}
|
|
|
|
@media (max-width: 620px) {
|
|
.nav-inner, .container { width: min(calc(100% - 28px), var(--max-width)); }
|
|
.brand-en { display: none; }
|
|
.hero { padding: 112px 0 64px; background: radial-gradient(circle at 78% 18%, rgba(54, 228, 218, .11), transparent 25%), linear-gradient(180deg, #061018, #091721); }
|
|
.hero::before { background-size: 42px 42px; }
|
|
.hero h1 { font-size: clamp(40px, 13.5vw, 58px); }
|
|
.hero-description { font-size: 17px; line-height: 1.72; }
|
|
.hero-actions { display: grid; }
|
|
.button { width: 100%; }
|
|
.hero-proof {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 10px;
|
|
padding: 14px 16px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 14px;
|
|
background: color-mix(in srgb, var(--ink-950) 78%, transparent);
|
|
color: var(--text-soft);
|
|
backdrop-filter: blur(14px);
|
|
-webkit-backdrop-filter: blur(14px);
|
|
}
|
|
.console-header { padding-inline: 14px; }
|
|
.window-label { font-size: 8px; }
|
|
.console-body { grid-template-columns: 1fr; }
|
|
.pipeline-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 12px; border-right: 0; border-bottom: 1px solid var(--line); }
|
|
.pipeline-title { display: none; }
|
|
.pipeline-step { display: block; min-height: auto; padding: 8px 4px; text-align: center; }
|
|
.pipeline-step + .pipeline-step { margin-top: 0; }
|
|
.step-index { margin: 0 auto; }
|
|
.step-copy { display: none; }
|
|
.orchestrator { padding: 16px; }
|
|
.orchestrator-head { align-items: center; }
|
|
.orchestrator h2 { font-size: 16px; }
|
|
.engine-map { min-height: 170px; padding: 10px; }
|
|
.engine-node { padding: 10px; }
|
|
.engine-node-name strong { font-size: 9px; }
|
|
.metric { padding: 11px 8px; }
|
|
.metric strong { font-size: 15px; }
|
|
.section-title { font-size: 38px; }
|
|
.about-facts { grid-template-columns: 1fr; }
|
|
.chain-card { grid-template-columns: 46px 1fr; padding: 16px; }
|
|
.chain-index { width: 46px; height: 46px; }
|
|
.services-layout { grid-template-columns: 1fr; }
|
|
.service-card.featured { grid-column: auto; min-height: 400px; }
|
|
.service-card, .featured { min-height: 270px; padding: 24px; }
|
|
.service-code, .featured .service-code { margin-bottom: 70px; }
|
|
.featured h3 { font-size: 28px; }
|
|
.proof-grid { grid-template-columns: 1fr; }
|
|
.proof-card { min-height: 250px; border-right: 0; border-bottom: 1px solid var(--line); }
|
|
.proof-card:last-child { border-bottom: 0; }
|
|
.proof-code { margin-bottom: 56px; }
|
|
.office-card { min-height: 340px; padding: 26px; }
|
|
.office-coordinate { margin-bottom: 76px; }
|
|
.contact { padding-top: 90px; }
|
|
.contact-shell { padding: 28px 22px; border-radius: 20px; }
|
|
.contact h2 { font-size: 40px; }
|
|
.footer-inner { align-items: flex-start; flex-direction: column; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html { scroll-behavior: auto; }
|
|
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
|
|
.reveal { opacity: 1; transform: none; }
|
|
.hero { background: linear-gradient(180deg, #061018, #091721); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<a class="skip-link" href="#main" data-i18n="skip">跳到主要内容</a>
|
|
|
|
<nav class="navbar" id="navbar" aria-label="主导航" data-i18n-aria="nav_label">
|
|
<div class="nav-inner">
|
|
<a class="brand" href="#home" aria-label="荣刻科技首页" data-i18n-aria="home_label">
|
|
<span class="brand-mark" aria-hidden="true"><img src="./assets/brand-logo-final.png" alt=""></span>
|
|
<span class="brand-copy">
|
|
<span class="brand-name" data-i18n="brand">荣刻科技</span>
|
|
<span class="brand-en">RONCARVE TECHNOLOGY</span>
|
|
</span>
|
|
</a>
|
|
|
|
<div class="nav-links" id="navLinks">
|
|
<a class="nav-link" href="#about" data-i18n="nav_about">能力链路</a>
|
|
<a class="nav-link" href="#services" data-i18n="nav_services">解决方案</a>
|
|
<a class="nav-link" href="#advantages" data-i18n="nav_advantages">核心优势</a>
|
|
<a class="nav-link" href="#offices" data-i18n="nav_offices">交付网络</a>
|
|
<div class="nav-actions">
|
|
<div class="theme-switch" id="themeSwitch" role="radiogroup" aria-label="外观模式" data-i18n-aria="theme_label">
|
|
<button class="theme-option" type="button" role="radio" aria-checked="true" data-theme-option="system" aria-label="跟随系统" data-i18n-aria="theme_system">
|
|
<span class="theme-option-icon system" aria-hidden="true"></span>
|
|
</button>
|
|
<button class="theme-option" type="button" role="radio" aria-checked="false" data-theme-option="light" aria-label="浅色外观" data-i18n-aria="theme_light">
|
|
<span class="theme-option-icon light" aria-hidden="true"></span>
|
|
</button>
|
|
<button class="theme-option" type="button" role="radio" aria-checked="false" data-theme-option="dark" aria-label="深色外观" data-i18n-aria="theme_dark">
|
|
<span class="theme-option-icon dark" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
<div class="lang-switch" id="langSwitch" aria-label="语言切换" data-i18n-aria="lang_label">
|
|
<button class="lang-btn active" type="button" data-lang="zh" aria-pressed="true">中</button>
|
|
<button class="lang-btn" type="button" data-lang="en" aria-pressed="false">EN</button>
|
|
</div>
|
|
<a class="nav-cta" href="#contact" data-i18n="nav_contact">预约咨询</a>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="menu-btn" id="menuBtn" type="button" aria-label="打开导航菜单" aria-expanded="false" aria-controls="navLinks">
|
|
<span></span><span></span><span></span>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<main id="main">
|
|
<section class="hero" id="home">
|
|
<div class="hero-webgl" id="heroWebgl" aria-hidden="true">
|
|
<canvas id="heroWebglCanvas"></canvas>
|
|
<div class="webgl-fallback"></div>
|
|
</div>
|
|
<div class="container">
|
|
<div class="hero-layout">
|
|
<div class="hero-copy reveal is-visible">
|
|
<span class="eyebrow" data-i18n="hero_eyebrow">AI 与数据基础设施</span>
|
|
<h1><span data-i18n="hero_line1">让企业数据</span><br><span class="accent" data-i18n="hero_line2">成为 AI 生产力</span></h1>
|
|
<p class="hero-description" data-i18n="hero_desc">从数据治理、模型优化到私有化部署，荣刻科技为企业构建可落地、可持续、可掌控的 AI 能力体系。</p>
|
|
<div class="hero-actions">
|
|
<a class="button button-primary" href="#contact"><span data-i18n="hero_primary">预约 AI 场景诊断</span><span class="button-arrow" aria-hidden="true">→</span></a>
|
|
<a class="button button-secondary" href="#services" data-i18n="hero_secondary">查看解决方案</a>
|
|
</div>
|
|
<div class="hero-proof" aria-label="核心能力摘要">
|
|
<span data-i18n="proof_data">7 年数据技术积累</span>
|
|
<span data-i18n="proof_private">支持私有化部署</span>
|
|
<span data-i18n="proof_delivery">成都 / 海口双城交付</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-spatial reveal delay-1" aria-hidden="true">
|
|
<div class="hero-capabilities">
|
|
<div class="hero-capability hero-capability--data"><span class="hero-capability-code" data-i18n="signal_code_data">数据</span><strong data-i18n="signal1">数据治理</strong></div>
|
|
<div class="hero-capability hero-capability--model"><span class="hero-capability-code" data-i18n="signal_code_model">模型</span><strong data-i18n="signal2">模型优化</strong></div>
|
|
<div class="hero-capability hero-capability--deploy"><span class="hero-capability-code" data-i18n="signal_code_deploy">部署</span><strong data-i18n="signal3">私有化部署</strong></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section about" id="about">
|
|
<div class="container">
|
|
<div class="section-header reveal">
|
|
<div><span class="section-number" data-i18n="section_about">01 / 能力链路</span><h2 class="section-title" data-i18n="about_title">从数据底座到 AI 业务价值</h2></div>
|
|
<p class="section-desc" data-i18n="about_desc">我们不是只交付一个模型，而是围绕企业数据、场景与安全边界，搭建完整的 AI 落地链路。</p>
|
|
</div>
|
|
<div class="about-grid">
|
|
<div class="about-copy reveal">
|
|
<p data-i18n="about_p1">荣刻科技早年深耕数据治理与数据加工处理，形成了扎实的数据工程能力。伴随人工智能技术发展，公司进一步拓展 AI 业务，构建“数据 + 模型 + 部署 + 运营”的双轮驱动体系。</p>
|
|
<p data-i18n="about_p2">核心团队汇聚国内顶尖高校人才与一线互联网企业资深从业者，在成都、海口设有办公场地，具备从技术研发到项目交付的完整服务能力。</p>
|
|
<div class="about-facts">
|
|
<div class="fact"><strong data-i18n="fact_years">7 年</strong><span data-i18n="about_fact1">数据治理与加工经验</span></div>
|
|
<div class="fact"><strong data-i18n="fact_cities">2 城</strong><span data-i18n="about_fact2">研发与运营协同网络</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="capability-chain">
|
|
<article class="chain-card reveal"><span class="chain-index">01</span><div class="chain-copy"><h3 data-i18n="chain1_title">数据治理</h3><p data-i18n="chain1_desc">清洗、标注、加工与知识资产沉淀</p></div></article>
|
|
<article class="chain-card reveal delay-1"><span class="chain-index">02</span><div class="chain-copy"><h3 data-i18n="chain2_title">模型与应用</h3><p data-i18n="chain2_desc">智能对话、客服、音频与行业模型优化</p></div></article>
|
|
<article class="chain-card reveal delay-2"><span class="chain-index">03</span><div class="chain-copy"><h3 data-i18n="chain3_title">安全部署</h3><p data-i18n="chain3_desc">私有环境交付，核心数据保持域内流转</p></div></article>
|
|
<article class="chain-card reveal delay-3"><span class="chain-index">04</span><div class="chain-copy"><h3 data-i18n="chain4_title">持续运营</h3><p data-i18n="chain4_desc">效果评估、流程优化与业务能力迭代</p></div></article>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section services" id="services">
|
|
<div class="container">
|
|
<div class="section-header reveal">
|
|
<div><span class="section-number" data-i18n="section_services">02 / 解决方案</span><h2 class="section-title" data-i18n="services_title">让 AI 真正进入业务流程</h2></div>
|
|
<p class="section-desc" data-i18n="services_desc">从标准化产品到定制开发，以企业真实场景为起点，交付可验证、可迭代的 AI 能力。</p>
|
|
</div>
|
|
<div class="services-layout">
|
|
<article class="service-card featured reveal">
|
|
<div class="service-code"><span data-i18n="service_core_code">系统 / 核心</span><span class="service-state" data-i18n="service_primary">核心能力</span></div>
|
|
<div class="service-content">
|
|
<h3 data-i18n="srv_core_title">企业 AI 中台与智能升级</h3>
|
|
<p data-i18n="srv_core_desc">将知识、模型与业务流程统一编排，让 AI 能力稳定进入决策、运营、客服与内容生产环节。</p>
|
|
<div class="service-tags"><span class="service-tag" data-i18n="tag_workflow">工作流</span><span class="service-tag" data-i18n="tag_knowledge">知识库</span><span class="service-tag" data-i18n="tag_agent">智能体</span><span class="service-tag" data-i18n="tag_insight">洞察</span></div>
|
|
</div>
|
|
</article>
|
|
<article class="service-card reveal delay-1"><div class="service-code"><span>S01</span><span class="service-state" data-i18n="service_dialogue">对话</span></div><div class="service-content"><h3 data-i18n="srv1_title">智能对话助手</h3><p data-i18n="srv1_desc">支持多轮交互、知识库问答与情感识别，适配客服、办公和教育场景。</p></div></article>
|
|
<article class="service-card reveal delay-2"><div class="service-code"><span>S02</span><span class="service-state" data-i18n="service_service">服务</span></div><div class="service-content"><h3 data-i18n="srv2_title">企业智能客服</h3><p data-i18n="srv2_desc">覆盖售前咨询、售后支持与工单处理，提升响应效率与服务一致性。</p></div></article>
|
|
<article class="service-card reveal delay-1"><div class="service-code"><span>S03</span><span class="service-state" data-i18n="service_audio">音频</span></div><div class="service-content"><h3 data-i18n="srv3_title">AI 音频生成</h3><p data-i18n="srv3_desc">支持多语种、多风格语音内容生产，服务于配音、播报与数字人场景。</p></div></article>
|
|
<article class="service-card reveal delay-2"><div class="service-code"><span>S04</span><span class="service-state" data-i18n="service_model">模型</span></div><div class="service-content"><h3 data-i18n="srv4_title">垂类模型优化</h3><p data-i18n="srv4_desc">围绕金融、医疗、法律、制造等场景进行模型微调、评测和持续优化。</p></div></article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section advantages" id="advantages">
|
|
<div class="container">
|
|
<div class="section-header reveal">
|
|
<div><span class="section-number" data-i18n="section_advantages">03 / 交付实力</span><h2 class="section-title" data-i18n="adv_title">技术之外，更重视可靠交付</h2></div>
|
|
<p class="section-desc" data-i18n="adv_desc">成熟的数据能力、跨领域团队和双城服务网络，让方案从概念验证走向长期运行。</p>
|
|
</div>
|
|
<div class="proof-grid">
|
|
<article class="proof-card reveal"><span class="proof-code" data-i18n="proof_team">P01 / 团队</span><h3 data-i18n="adv1_title">复合型核心团队</h3><p data-i18n="adv1_desc">核心成员来自国内顶尖高校与一线互联网企业，兼具研发能力和项目经验。</p></article>
|
|
<article class="proof-card reveal delay-1"><span class="proof-code" data-i18n="proof_data_code">P02 / 数据</span><h3 data-i18n="adv2_title">扎实的数据底座</h3><p data-i18n="adv2_desc">长期的数据治理与加工实践，为知识库、模型训练和 AI 应用提供可靠基础。</p></article>
|
|
<article class="proof-card reveal delay-2"><span class="proof-code" data-i18n="proof_delivery_code">P03 / 交付</span><h3 data-i18n="adv3_title">场景化项目交付</h3><p data-i18n="adv3_desc">根据行业、流程与安全边界灵活组合能力，以实际业务指标验证实施效果。</p></article>
|
|
<article class="proof-card reveal delay-3"><span class="proof-code" data-i18n="proof_service_code">P04 / 服务</span><h3 data-i18n="adv4_title">持续服务体系</h3><p data-i18n="adv4_desc">成都研发与海口运营协同，为全国客户提供及时、高效的项目支持。</p></article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section offices" id="offices">
|
|
<div class="container">
|
|
<div class="section-header reveal">
|
|
<div><span class="section-number" data-i18n="section_offices">04 / 交付网络</span><h2 class="section-title" data-i18n="offices_title">双城协同，服务全国</h2></div>
|
|
<p class="section-desc" data-i18n="offices_desc">研发、交付、运营与客户服务相互协同，让项目推进保持清晰节奏与稳定响应。</p>
|
|
</div>
|
|
<div class="office-network">
|
|
<article class="office-card reveal">
|
|
<div class="office-coordinate"><span>30.5728° N · 104.0668° E</span></div>
|
|
<h3 data-i18n="office1_title">成都 · 研发中心</h3>
|
|
<p data-i18n="office1_desc">技术研发与项目交付核心基地，承担 AI 产品研发、模型训练、系统集成与项目实施。</p>
|
|
<div class="office-tags"><span class="office-tag" data-i18n="office1_tag1">研发总部</span><span class="office-tag" data-i18n="office1_tag2">项目交付</span><span class="office-tag" data-i18n="office1_tag3">技术支持</span></div>
|
|
</article>
|
|
<article class="office-card reveal delay-1">
|
|
<div class="office-coordinate"><span>20.0440° N · 110.1999° E</span></div>
|
|
<h3 data-i18n="office2_title">海口 · 运营中心</h3>
|
|
<p data-i18n="office2_desc">商务运营与客户服务基地，负责市场拓展、项目运营管理及华南区域客户服务。</p>
|
|
<div class="office-tags"><span class="office-tag" data-i18n="office2_tag1">商务运营</span><span class="office-tag" data-i18n="office2_tag2">客户服务</span><span class="office-tag" data-i18n="office2_tag3">华南区域</span></div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="contact" id="contact">
|
|
<div class="container">
|
|
<div class="contact-shell reveal">
|
|
<div class="contact-head">
|
|
<div><span class="section-number" data-i18n="section_contact">05 / 启动项目</span><h2 data-i18n="contact_title">从真实业务场景开始</h2></div>
|
|
<p class="contact-lead" data-i18n="contact_desc">告诉我们你的数据基础、业务目标与安全要求，一起判断 AI 最值得从哪里落地。</p>
|
|
</div>
|
|
<div class="contact-grid">
|
|
<div class="contact-item"><span class="contact-label" data-i18n="channel_phone">渠道 / 电话</span><h3 data-i18n="contact_phone">电话沟通</h3><a class="contact-value" href="tel:+8618482223118">+86 184 8222 3118</a></div>
|
|
<div class="contact-item"><span class="contact-label" data-i18n="channel_email">渠道 / 邮件</span><h3 data-i18n="contact_email">邮件咨询</h3><a class="contact-value" href="mailto:chermack@163.com">chermack@163.com</a></div>
|
|
<div class="contact-item"><span class="contact-label" data-i18n="channel_wechat">渠道 / 微信</span><h3 data-i18n="contact_wechat">微信联系</h3><span class="contact-value" data-i18n="contact_wechat_desc">来电或邮件后获取微信，添加时请备注“商务合作”</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<div class="container footer-inner">
|
|
<span>© <span id="year">2026</span> <span data-i18n="footer_company">海南荣刻科技有限公司</span></span>
|
|
<span class="footer-signal" data-i18n="footer_signal">数据驱动 · AI 赋能 · 安全交付</span>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
(function () {
|
|
'use strict';
|
|
|
|
const i18n = {
|
|
zh: {
|
|
title: '海南荣刻科技有限公司 - 数据筑基 · AI 落地', skip: '跳到主要内容', brand: '荣刻科技', nav_label: '主导航', home_label: '荣刻科技首页', lang_label: '语言切换', menu_open: '打开导航菜单', menu_close: '关闭导航菜单',
|
|
theme_label: '外观模式选择', theme_system: '跟随系统', theme_light: '浅色外观', theme_dark: '深色外观',
|
|
nav_about: '能力链路', nav_services: '解决方案', nav_advantages: '核心优势', nav_offices: '交付网络', nav_contact: '预约咨询',
|
|
hero_eyebrow: 'AI 与数据基础设施', hero_line1: '让企业数据', hero_line2: '成为 AI 生产力',
|
|
hero_desc: '从数据治理、模型优化到私有化部署，荣刻科技为企业构建可落地、可持续、可掌控的 AI 能力体系。',
|
|
hero_primary: '预约 AI 场景诊断', hero_secondary: '查看解决方案', proof_data: '7 年数据技术积累', proof_private: '支持私有化部署', proof_delivery: '成都 / 海口双城交付',
|
|
scene_live: '实时生成系统', scene_title: '企业智能系统', scene_desc: '数据 · 模型 · 部署 · 运营',
|
|
console_online: '系统在线', pipe_data: '数据接入', pipe_govern: '治理加工', pipe_model: '模型编排', pipe_deploy: '安全部署', console_title: '企业 AI 能力编排中枢',
|
|
node_data: '企业数据底座', node_knowledge: '行业知识库', node_model: '垂类模型', node_private: '私有部署环境', metric_data: '数据经验', metric_projects: '交付项目', metric_clients: '服务客户',
|
|
signal1: '数据治理', signal2: '模型优化', signal3: '私有化部署', signal4: '持续运营', signal_code_data: '数据', signal_code_model: '模型', signal_code_deploy: '部署',
|
|
section_about: '01 / 能力链路', section_services: '02 / 解决方案', section_advantages: '03 / 交付实力', section_offices: '04 / 交付网络', section_contact: '05 / 启动项目',
|
|
about_title: '从数据底座到 AI 业务价值', about_desc: '我们不是只交付一个模型，而是围绕企业数据、场景与安全边界，搭建完整的 AI 落地链路。',
|
|
about_p1: '荣刻科技早年深耕数据治理与数据加工处理，形成了扎实的数据工程能力。伴随人工智能技术发展，公司进一步拓展 AI 业务，构建“数据 + 模型 + 部署 + 运营”的双轮驱动体系。',
|
|
about_p2: '核心团队汇聚国内顶尖高校人才与一线互联网企业资深从业者，在成都、海口设有办公场地，具备从技术研发到项目交付的完整服务能力。',
|
|
about_fact1: '数据治理与加工经验', about_fact2: '研发与运营协同网络', fact_years: '7 年', fact_cities: '2 城',
|
|
chain1_title: '数据治理', chain1_desc: '清洗、标注、加工与知识资产沉淀', chain2_title: '模型与应用', chain2_desc: '智能对话、客服、音频与行业模型优化', chain3_title: '安全部署', chain3_desc: '私有环境交付，核心数据保持域内流转', chain4_title: '持续运营', chain4_desc: '效果评估、流程优化与业务能力迭代',
|
|
services_title: '让 AI 真正进入业务流程', services_desc: '从标准化产品到定制开发，以企业真实场景为起点，交付可验证、可迭代的 AI 能力。',
|
|
srv_core_title: '企业 AI 中台与智能升级', srv_core_desc: '将知识、模型与业务流程统一编排，让 AI 能力稳定进入决策、运营、客服与内容生产环节。',
|
|
service_core_code: '系统 / 核心', service_primary: '核心能力', tag_workflow: '工作流', tag_knowledge: '知识库', tag_agent: '智能体', tag_insight: '洞察',
|
|
service_dialogue: '对话', service_service: '服务', service_audio: '音频', service_model: '模型',
|
|
srv1_title: '智能对话助手', srv1_desc: '支持多轮交互、知识库问答与情感识别，适配客服、办公和教育场景。', srv2_title: '企业智能客服', srv2_desc: '覆盖售前咨询、售后支持与工单处理，提升响应效率与服务一致性。',
|
|
srv3_title: 'AI 音频生成', srv3_desc: '支持多语种、多风格语音内容生产，服务于配音、播报与数字人场景。', srv4_title: '垂类模型优化', srv4_desc: '围绕金融、医疗、法律、制造等场景进行模型微调、评测和持续优化。',
|
|
adv_title: '技术之外，更重视可靠交付', adv_desc: '成熟的数据能力、跨领域团队和双城服务网络，让方案从概念验证走向长期运行。',
|
|
proof_team: 'P01 / 团队', proof_data_code: 'P02 / 数据', proof_delivery_code: 'P03 / 交付', proof_service_code: 'P04 / 服务',
|
|
adv1_title: '复合型核心团队', adv1_desc: '核心成员来自国内顶尖高校与一线互联网企业，兼具研发能力和项目经验。', adv2_title: '扎实的数据底座', adv2_desc: '长期的数据治理与加工实践，为知识库、模型训练和 AI 应用提供可靠基础。', adv3_title: '场景化项目交付', adv3_desc: '根据行业、流程与安全边界灵活组合能力，以实际业务指标验证实施效果。', adv4_title: '持续服务体系', adv4_desc: '成都研发与海口运营协同，为全国客户提供及时、高效的项目支持。',
|
|
offices_title: '双城协同，服务全国', offices_desc: '研发、交付、运营与客户服务相互协同，让项目推进保持清晰节奏与稳定响应。',
|
|
office1_title: '成都 · 研发中心', office1_desc: '技术研发与项目交付核心基地，承担 AI 产品研发、模型训练、系统集成与项目实施。', office1_tag1: '研发总部', office1_tag2: '项目交付', office1_tag3: '技术支持',
|
|
office2_title: '海口 · 运营中心', office2_desc: '商务运营与客户服务基地，负责市场拓展、项目运营管理及华南区域客户服务。', office2_tag1: '商务运营', office2_tag2: '客户服务', office2_tag3: '华南区域',
|
|
contact_title: '从真实业务场景开始', contact_desc: '告诉我们你的数据基础、业务目标与安全要求，一起判断 AI 最值得从哪里落地。', channel_phone: '渠道 / 电话', channel_email: '渠道 / 邮件', channel_wechat: '渠道 / 微信', contact_phone: '电话沟通', contact_email: '邮件咨询', contact_wechat: '微信联系', contact_wechat_desc: '来电或邮件后获取微信，添加时请备注“商务合作”', footer_company: '海南荣刻科技有限公司', footer_signal: '数据驱动 · AI 赋能 · 安全交付'
|
|
},
|
|
en: {
|
|
title: 'Hainan Roncarve Technology - Data Foundation · AI Delivery', skip: 'Skip to main content', brand: 'Roncarve Tech', nav_label: 'Main navigation', home_label: 'Roncarve Tech home', lang_label: 'Language selector', menu_open: 'Open navigation menu', menu_close: 'Close navigation menu',
|
|
theme_label: 'Appearance selector', theme_system: 'Follow System', theme_light: 'Light appearance', theme_dark: 'Dark appearance',
|
|
nav_about: 'Capabilities', nav_services: 'Solutions', nav_advantages: 'Advantages', nav_offices: 'Delivery', nav_contact: 'Book a Call',
|
|
hero_eyebrow: 'AI + DATA INFRASTRUCTURE', hero_line1: 'Turn enterprise data', hero_line2: 'into AI productivity',
|
|
hero_desc: 'From data governance and model optimization to private deployment, Roncarve builds practical, sustainable and controllable enterprise AI systems.',
|
|
hero_primary: 'Book an AI Discovery Call', hero_secondary: 'Explore Solutions', proof_data: '7 years in data technology', proof_private: 'Private deployment ready', proof_delivery: 'Chengdu / Haikou delivery',
|
|
scene_live: 'LIVE GENERATIVE SYSTEM', scene_title: 'ENTERPRISE INTELLIGENCE', scene_desc: 'DATA · MODEL · DEPLOY · OPERATE',
|
|
console_online: 'SYSTEM ONLINE', pipe_data: 'Data Intake', pipe_govern: 'Govern', pipe_model: 'Orchestrate', pipe_deploy: 'Deploy', console_title: 'Enterprise AI Orchestration Hub',
|
|
node_data: 'Enterprise Data', node_knowledge: 'Knowledge Base', node_model: 'Vertical Model', node_private: 'Private Environment', metric_data: 'DATA EXP.', metric_projects: 'DELIVERED', metric_clients: 'CLIENTS',
|
|
signal1: 'Data Governance', signal2: 'Model Optimization', signal3: 'Private Deployment', signal4: 'Continuous Operations', signal_code_data: 'DATA', signal_code_model: 'MODEL', signal_code_deploy: 'DEPLOY',
|
|
section_about: '01 / CAPABILITY CHAIN', section_services: '02 / SOLUTIONS', section_advantages: '03 / PROOF', section_offices: '04 / DELIVERY NETWORK', section_contact: '05 / START A PROJECT',
|
|
about_title: 'From data foundation to AI business value', about_desc: 'We deliver more than a model. We build the complete path around your data, scenarios and security boundaries.',
|
|
about_p1: 'Roncarve began with deep expertise in data governance and processing, building a strong data engineering foundation. As AI evolved, we expanded into a dual-engine system spanning data, models, deployment and operations.',
|
|
about_p2: 'Our core team brings together talent from leading Chinese universities and experienced professionals from major internet companies. With offices in Chengdu and Haikou, we cover both R&D and project delivery.',
|
|
about_fact1: 'Data governance and processing', about_fact2: 'R&D and operations network', fact_years: '7 YEARS', fact_cities: '2 CITIES',
|
|
chain1_title: 'Data Governance', chain1_desc: 'Cleaning, labeling, processing and knowledge assets', chain2_title: 'Models & Apps', chain2_desc: 'Dialogue, service, audio and vertical model tuning', chain3_title: 'Secure Deployment', chain3_desc: 'Private delivery with core data remaining in-domain', chain4_title: 'Continuous Operations', chain4_desc: 'Evaluation, workflow optimization and iteration',
|
|
services_title: 'Put AI inside real business workflows', services_desc: 'From standardized products to custom development, we start with real enterprise scenarios and deliver measurable, iterative AI capabilities.',
|
|
srv_core_title: 'Enterprise AI Platform & Transformation', srv_core_desc: 'Orchestrate knowledge, models and workflows so AI can reliably support decisions, operations, service and content production.',
|
|
service_core_code: 'SYSTEM / CORE', service_primary: 'PRIMARY CAPABILITY', tag_workflow: 'WORKFLOW', tag_knowledge: 'KNOWLEDGE', tag_agent: 'AGENT', tag_insight: 'INSIGHT',
|
|
service_dialogue: 'DIALOGUE', service_service: 'SERVICE', service_audio: 'AUDIO', service_model: 'MODEL',
|
|
srv1_title: 'Conversational AI', srv1_desc: 'Multi-turn interaction, knowledge Q&A and sentiment recognition for service, office and education.', srv2_title: 'Enterprise AI Service', srv2_desc: 'Cover pre-sales, after-sales and ticket workflows to improve speed and consistency.',
|
|
srv3_title: 'AI Audio Generation', srv3_desc: 'Multi-language, multi-style voice production for dubbing, broadcasting and digital humans.', srv4_title: 'Vertical Model Tuning', srv4_desc: 'Fine-tuning, evaluation and optimization for finance, healthcare, legal and manufacturing.',
|
|
adv_title: 'Reliable delivery beyond technology', adv_desc: 'Mature data capabilities, a cross-functional team and a dual-city service network take solutions from proof of concept to long-term operation.',
|
|
proof_team: 'P01 / TEAM', proof_data_code: 'P02 / DATA', proof_delivery_code: 'P03 / DELIVERY', proof_service_code: 'P04 / SERVICE',
|
|
adv1_title: 'Cross-functional Core Team', adv1_desc: 'Talent from leading universities and internet companies combines strong R&D with delivery experience.', adv2_title: 'A Solid Data Foundation', adv2_desc: 'Long-term data governance and processing practices support knowledge, training and AI applications.', adv3_title: 'Scenario-based Delivery', adv3_desc: 'Capabilities are composed around industry, process and security needs, then validated by real metrics.', adv4_title: 'Continuous Service', adv4_desc: 'Chengdu R&D and Haikou operations provide responsive support for clients nationwide.',
|
|
offices_title: 'Two cities, nationwide delivery', offices_desc: 'R&D, delivery, operations and client service work together to keep every project clear and responsive.',
|
|
office1_title: 'Chengdu · R&D Center', office1_desc: 'Our core R&D and delivery base for AI products, model training, systems integration and implementation.', office1_tag1: 'R&D HQ', office1_tag2: 'Delivery', office1_tag3: 'Tech Support',
|
|
office2_title: 'Haikou · Operations Center', office2_desc: 'Our business operations and client service base for market development, project operations and Southern China.', office2_tag1: 'Operations', office2_tag2: 'Client Service', office2_tag3: 'South China',
|
|
contact_title: 'Start with one real business scenario', contact_desc: 'Tell us about your data foundation, business goal and security needs. We will identify where AI can create value first.', channel_phone: 'CHANNEL / PHONE', channel_email: 'CHANNEL / EMAIL', channel_wechat: 'CHANNEL / WECHAT', contact_phone: 'Call Us', contact_email: 'Email Us', contact_wechat: 'Connect on WeChat', contact_wechat_desc: 'Contact us by phone or email to receive our WeChat details.', footer_company: 'Hainan Roncarve Technology Co., Ltd.', footer_signal: 'DATA-DRIVEN · AI-POWERED · SECURE DELIVERY'
|
|
}
|
|
};
|
|
|
|
const navbar = document.getElementById('navbar');
|
|
const menuBtn = document.getElementById('menuBtn');
|
|
const navLinks = document.getElementById('navLinks');
|
|
const langSwitch = document.getElementById('langSwitch');
|
|
const themeSwitch = document.getElementById('themeSwitch');
|
|
const themeQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
|
const validThemes = ['system', 'light', 'dark'];
|
|
const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
let currentLanguage = 'zh';
|
|
let themePreference = document.documentElement.dataset.themePreference || 'system';
|
|
|
|
function resolvedTheme(preference) {
|
|
return preference === 'system' ? (themeQuery.matches ? 'dark' : 'light') : preference;
|
|
}
|
|
|
|
function applyTheme(preference, persist) {
|
|
const selected = validThemes.includes(preference) ? preference : 'system';
|
|
const resolved = resolvedTheme(selected);
|
|
themePreference = selected;
|
|
document.documentElement.dataset.themePreference = selected;
|
|
document.documentElement.dataset.theme = resolved;
|
|
document.querySelectorAll('[data-theme-option]').forEach(function (button) {
|
|
button.setAttribute('aria-checked', String(button.dataset.themeOption === selected));
|
|
});
|
|
const themeColors = { light: '#f7faff', dark: '#05070a' };
|
|
const themeMeta = document.querySelector('meta[name="theme-color"]');
|
|
if (themeMeta) themeMeta.setAttribute('content', themeColors[resolved]);
|
|
if (persist !== false) {
|
|
try { localStorage.setItem('site_theme', selected); } catch (error) { /* Storage may be disabled. */ }
|
|
}
|
|
window.dispatchEvent(new CustomEvent('roncarve:themechange', { detail: { preference: selected, resolved: resolved } }));
|
|
}
|
|
|
|
function applyLanguage(lang) {
|
|
const selected = i18n[lang] ? lang : 'zh';
|
|
currentLanguage = selected;
|
|
document.documentElement.lang = selected === 'zh' ? 'zh-CN' : 'en';
|
|
document.title = i18n[selected].title;
|
|
document.querySelectorAll('[data-i18n]').forEach(function (element) {
|
|
const key = element.dataset.i18n;
|
|
if (i18n[selected][key]) element.textContent = i18n[selected][key];
|
|
});
|
|
document.querySelectorAll('[data-i18n-aria]').forEach(function (element) {
|
|
const key = element.dataset.i18nAria;
|
|
if (i18n[selected][key]) element.setAttribute('aria-label', i18n[selected][key]);
|
|
});
|
|
menuBtn.setAttribute('aria-label', i18n[selected][navLinks.classList.contains('open') ? 'menu_close' : 'menu_open']);
|
|
document.querySelectorAll('.lang-btn').forEach(function (button) {
|
|
const active = button.dataset.lang === selected;
|
|
button.classList.toggle('active', active);
|
|
button.setAttribute('aria-pressed', String(active));
|
|
});
|
|
try { localStorage.setItem('site_lang', selected); } catch (error) { /* Storage may be disabled. */ }
|
|
}
|
|
|
|
function closeMenu() {
|
|
menuBtn.classList.remove('open');
|
|
navLinks.classList.remove('open');
|
|
menuBtn.setAttribute('aria-expanded', 'false');
|
|
menuBtn.setAttribute('aria-label', i18n[currentLanguage].menu_open);
|
|
document.body.classList.remove('menu-open');
|
|
}
|
|
|
|
langSwitch.addEventListener('click', function (event) {
|
|
const button = event.target.closest('.lang-btn');
|
|
if (button) applyLanguage(button.dataset.lang);
|
|
});
|
|
|
|
themeSwitch.addEventListener('click', function (event) {
|
|
const button = event.target.closest('[data-theme-option]');
|
|
if (!button) return;
|
|
applyTheme(button.dataset.themeOption, true);
|
|
if (window.matchMedia('(max-width: 860px)').matches) {
|
|
closeMenu();
|
|
menuBtn.focus();
|
|
}
|
|
});
|
|
|
|
const handleSystemTheme = function () {
|
|
if (themePreference === 'system') applyTheme('system', false);
|
|
};
|
|
if (themeQuery.addEventListener) themeQuery.addEventListener('change', handleSystemTheme);
|
|
else if (themeQuery.addListener) themeQuery.addListener(handleSystemTheme);
|
|
|
|
menuBtn.addEventListener('click', function () {
|
|
const open = !navLinks.classList.contains('open');
|
|
menuBtn.classList.toggle('open', open);
|
|
navLinks.classList.toggle('open', open);
|
|
menuBtn.setAttribute('aria-expanded', String(open));
|
|
menuBtn.setAttribute('aria-label', i18n[currentLanguage][open ? 'menu_close' : 'menu_open']);
|
|
document.body.classList.toggle('menu-open', open);
|
|
});
|
|
|
|
navLinks.querySelectorAll('a').forEach(function (link) { link.addEventListener('click', closeMenu); });
|
|
document.addEventListener('keydown', function (event) {
|
|
if (event.key === 'Escape') closeMenu();
|
|
});
|
|
|
|
window.addEventListener('scroll', function () { navbar.classList.toggle('scrolled', window.scrollY > 24); }, { passive: true });
|
|
|
|
const observedSections = Array.from(document.querySelectorAll('main section[id]'));
|
|
const navAnchors = document.querySelectorAll('.nav-link');
|
|
|
|
const sectionObserver = new IntersectionObserver(function (entries) {
|
|
entries.forEach(function (entry) {
|
|
if (!entry.isIntersecting) return;
|
|
navAnchors.forEach(function (anchor) { anchor.classList.toggle('active', anchor.getAttribute('href') === '#' + entry.target.id); });
|
|
});
|
|
}, { rootMargin: '-35% 0px -55% 0px', threshold: 0 });
|
|
observedSections.forEach(function (section) { sectionObserver.observe(section); });
|
|
|
|
if (!reduceMotion && 'IntersectionObserver' in window) {
|
|
const revealObserver = new IntersectionObserver(function (entries, observer) {
|
|
entries.forEach(function (entry) {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('is-visible');
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, { threshold: .12, rootMargin: '0px 0px -40px' });
|
|
document.querySelectorAll('.reveal:not(.is-visible)').forEach(function (element) { revealObserver.observe(element); });
|
|
} else {
|
|
document.querySelectorAll('.reveal').forEach(function (element) { element.classList.add('is-visible'); });
|
|
}
|
|
|
|
if (!reduceMotion && window.matchMedia('(pointer: fine)').matches) {
|
|
const hero = document.querySelector('.hero');
|
|
let frame;
|
|
hero.addEventListener('pointermove', function (event) {
|
|
if (frame) cancelAnimationFrame(frame);
|
|
frame = requestAnimationFrame(function () {
|
|
const rect = hero.getBoundingClientRect();
|
|
hero.style.setProperty('--pointer-x', ((event.clientX - rect.left) / rect.width * 100).toFixed(1) + '%');
|
|
hero.style.setProperty('--pointer-y', ((event.clientY - rect.top) / rect.height * 100).toFixed(1) + '%');
|
|
});
|
|
});
|
|
}
|
|
|
|
applyTheme(themePreference, false);
|
|
let savedLang = 'zh';
|
|
try { savedLang = localStorage.getItem('site_lang') || 'zh'; } catch (error) { /* Storage may be disabled. */ }
|
|
applyLanguage(savedLang);
|
|
document.getElementById('year').textContent = String(new Date().getFullYear());
|
|
navbar.classList.toggle('scrolled', window.scrollY > 24);
|
|
})();
|
|
</script>
|
|
<script type="module" src="./theme-webgl.js?v=20260813h"></script>
|
|
</body>
|
|
</html>
|