替换官网品牌Logo并完善WebGL资源

This commit is contained in:
2026-08-14 06:21:25 +08:00
parent e4ec9c04a9
commit aae6c3ac68
6 changed files with 1303 additions and 160 deletions
+439 -160
View File
@@ -5,7 +5,21 @@
<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; }
@@ -42,6 +56,41 @@
--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;
@@ -50,7 +99,7 @@
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: 16px;
font-size: 17px;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
@@ -116,15 +165,18 @@
.brand-mark {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border: 1px solid var(--line-strong);
border-radius: 9px;
background: linear-gradient(145deg, rgba(54, 228, 218, .16), rgba(74, 141, 255, .05));
color: var(--cyan-bright);
font: 700 11px/1 var(--mono);
box-shadow: inset 0 0 18px rgba(54, 228, 218, .08);
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; }
@@ -134,7 +186,7 @@
position: relative;
padding-block: 9px;
color: var(--text-soft);
font-size: 14px;
font-size: 15px;
font-weight: 550;
transition: color .2s ease;
}
@@ -155,6 +207,39 @@
.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;
@@ -169,7 +254,7 @@
border-radius: 6px;
background: transparent;
color: var(--text-faint);
font: 650 11px/1.4 var(--mono);
font: 650 12px/1.4 var(--mono);
cursor: pointer;
}
.lang-btn.active { color: var(--ink-1000); background: var(--cyan); }
@@ -179,11 +264,11 @@
align-items: center;
justify-content: center;
gap: 10px;
min-height: 46px;
min-height: 50px;
border: 1px solid transparent;
border-radius: 10px;
padding: 0 20px;
font-size: 14px;
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: transform .25s var(--ease), box-shadow .25s ease, border-color .25s ease, background .25s ease;
@@ -220,7 +305,7 @@
content: "";
position: absolute;
inset: 0;
z-index: -2;
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;
@@ -231,13 +316,81 @@
content: "";
position: absolute;
inset: auto 0 0;
z-index: -1;
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;
}
.scene-axis {
position: absolute;
color: var(--text-faint);
font: 600 9px/1.45 var(--mono);
letter-spacing: .12em;
text-transform: uppercase;
}
.scene-axis { top: 44px; right: 12px; writing-mode: vertical-rl; }
.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;
@@ -250,7 +403,7 @@
gap: 10px;
margin-bottom: 24px;
color: var(--cyan);
font: 650 11px/1.4 var(--mono);
font: 650 12px/1.4 var(--mono);
letter-spacing: .14em;
text-transform: uppercase;
}
@@ -261,13 +414,13 @@
max-width: 660px;
margin-bottom: 26px;
color: var(--white);
font-size: clamp(48px, 4.45vw, 64px);
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: 590px; margin-bottom: 36px; color: var(--text-soft); font-size: clamp(16px, 1.45vw, 18px); line-height: 1.85; }
.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); }
@@ -275,7 +428,7 @@
.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: 22px; color: var(--text-faint); font: 550 11px/1.4 var(--mono); letter-spacing: .06em; }
.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); }
@@ -406,34 +559,21 @@
.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); }
.signal-bar {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: repeat(4, 1fr);
margin-top: 76px;
border-block: 1px solid var(--line);
}
.signal-item { padding: 21px 24px; border-right: 1px solid var(--line); }
.signal-item:last-child { border-right: 0; }
.signal-index { display: block; margin-bottom: 6px; color: var(--cyan); font: 650 9px/1 var(--mono); letter-spacing: .12em; }
.signal-name { color: var(--text-soft); font-size: 13px; font-weight: 600; }
.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 10px/1 var(--mono); letter-spacing: .14em; }
.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: 520px; margin-bottom: 0; color: var(--text-soft); font-size: 16px; line-height: 1.85; }
.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: 16px; line-height: 1.95; }
.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: 12px; }
.fact span { color: var(--text-faint); font-size: 14px; }
.capability-chain { position: relative; display: grid; gap: 10px; }
.chain-card {
@@ -450,8 +590,8 @@
}
.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: 4px; color: var(--white); font-size: 17px; }
.chain-copy p { margin-bottom: 0; color: var(--text-faint); font-size: 12px; line-height: 1.55; }
.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; }
.chain-state { color: var(--success); font: 650 8px/1 var(--mono); letter-spacing: .1em; }
.services { background: var(--ink-950); }
@@ -459,6 +599,8 @@
.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);
@@ -471,57 +613,62 @@
.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: 70px; color: var(--cyan); font: 650 9px/1 var(--mono); letter-spacing: .11em; }
.featured .service-code { margin-bottom: 105px; }
.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: 390px; margin-bottom: 14px; color: var(--white); font-size: 23px; line-height: 1.3; letter-spacing: -.025em; }
.featured h3 { font-size: 34px; }
.service-card p { margin-bottom: 0; color: var(--text-soft); font-size: 13px; line-height: 1.8; }
.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: 7px 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--text-faint); background: rgba(0, 0, 0, .12); font: 550 8px/1 var(--mono); letter-spacing: .06em; }
.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(--paper); color: #102129; }
.advantages .section-number { color: #087c78; }
.advantages .section-title { color: #07161c; }
.advantages .section-desc { color: #52666d; }
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid rgba(9, 50, 58, .13); border-radius: 20px; overflow: hidden; background: var(--white); box-shadow: 0 24px 80px rgba(8, 28, 34, .08); }
.proof-card { min-height: 330px; padding: 28px; border-right: 1px solid rgba(9, 50, 58, .1); }
.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: 92px; color: #168985; font: 700 10px/1 var(--mono); letter-spacing: .12em; }
.proof-card h3 { margin-bottom: 14px; color: #0a1d24; font-size: 20px; line-height: 1.35; letter-spacing: -.02em; }
.proof-card p { margin-bottom: 0; color: #667980; font-size: 13px; line-height: 1.8; }
.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: 94px; color: var(--text-faint); font: 600 9px/1 var(--mono); letter-spacing: .11em; }
.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-live { display: inline-flex; align-items: center; gap: 7px; color: var(--success); }
.office-live::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.office-card h3 { margin-bottom: 14px; color: var(--white); font-size: 28px; letter-spacing: -.03em; }
.office-card p { max-width: 470px; margin-bottom: 28px; color: var(--text-soft); font-size: 14px; line-height: 1.85; }
.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: 7px 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--text-faint); font: 550 8px/1 var(--mono); letter-spacing: .07em; }
.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: 330px; margin-bottom: 4px; color: var(--text-soft); font-size: 14px; line-height: 1.8; }
.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 9px/1 var(--mono); letter-spacing: .11em; }
.contact-item h3 { margin-bottom: 9px; color: var(--white); font-size: 17px; }
.contact-value { display: inline-block; color: var(--text-soft); font-size: 14px; overflow-wrap: anywhere; transition: color .2s ease; }
.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: 11px; }
.footer-signal { color: var(--text-faint); font: 550 8px/1 var(--mono); letter-spacing: .1em; }
.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 {
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; }
@@ -530,6 +677,90 @@
@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; }
.scene-axis { top: 18px; right: 4px; }
.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; }
@@ -549,7 +780,7 @@
.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 rgba(9, 50, 58, .1); }
.proof-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 860px) {
@@ -577,9 +808,6 @@
.hero { padding-top: 126px; }
.hero-layout { gap: 58px; }
.hero h1 { font-size: clamp(45px, 10vw, 68px); }
.signal-bar { grid-template-columns: repeat(2, 1fr); }
.signal-item:nth-child(2) { border-right: 0; }
.signal-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.section { padding: 96px 0; }
.section-header { grid-template-columns: 1fr; gap: 24px; margin-bottom: 46px; }
.office-network { grid-template-columns: 1fr; }
@@ -595,10 +823,21 @@
.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: 15px; }
.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; }
.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; }
@@ -616,7 +855,6 @@
.engine-node-name strong { font-size: 9px; }
.metric { padding: 11px 8px; }
.metric strong { font-size: 15px; }
.signal-item { padding: 17px 14px; }
.section-title { font-size: 38px; }
.about-facts { grid-template-columns: 1fr; }
.chain-card { grid-template-columns: 46px 1fr; padding: 16px; }
@@ -628,7 +866,7 @@
.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 rgba(9, 50, 58, .1); }
.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; }
@@ -653,7 +891,7 @@
<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">RK</span>
<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>
@@ -666,6 +904,17 @@
<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>
@@ -682,10 +931,14 @@
<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 + DATA INFRASTRUCTURE</span>
<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">
@@ -699,59 +952,22 @@
</div>
</div>
<div class="control-room reveal delay-1" aria-label="AI 数据控制台示意">
<div class="console">
<div class="console-header">
<div class="window-label"><span class="window-dots" aria-hidden="true"><i></i><i></i><i></i></span> RONCARVE / AI CONTROL ROOM</div>
<span class="system-status" data-i18n="console_online">SYSTEM ONLINE</span>
</div>
<div class="console-body">
<aside class="pipeline-nav" aria-label="AI 落地链路">
<p class="pipeline-title">PIPELINE</p>
<div class="pipeline-step active"><span class="step-index">01</span><span class="step-copy" data-i18n="pipe_data">数据接入<small>DATA INTAKE</small></span></div>
<div class="pipeline-step"><span class="step-index">02</span><span class="step-copy" data-i18n="pipe_govern">治理加工<small>GOVERN</small></span></div>
<div class="pipeline-step"><span class="step-index">03</span><span class="step-copy" data-i18n="pipe_model">模型编排<small>ORCHESTRATE</small></span></div>
<div class="pipeline-step"><span class="step-index">04</span><span class="step-copy" data-i18n="pipe_deploy">安全部署<small>DEPLOY</small></span></div>
</aside>
<div class="orchestrator">
<div class="orchestrator-head">
<div>
<p class="orchestrator-kicker">INTELLIGENCE ORCHESTRATOR</p>
<h2 data-i18n="console_title">企业 AI 能力编排中枢</h2>
</div>
<span class="live-badge">LIVE</span>
</div>
<div class="engine-map">
<div class="engine-node"><span class="engine-node-name"><strong data-i18n="node_data">企业数据底座</strong><small>DATA FOUNDATION</small></span><i class="node-state"></i></div>
<div class="engine-node"><span class="engine-node-name"><strong data-i18n="node_knowledge">行业知识库</strong><small>KNOWLEDGE BASE</small></span><i class="node-state blue"></i></div>
<div class="engine-node"><span class="engine-node-name"><strong data-i18n="node_model">垂类模型</strong><small>VERTICAL MODEL</small></span><i class="node-state violet"></i></div>
<div class="engine-node"><span class="engine-node-name"><strong data-i18n="node_private">私有部署环境</strong><small>PRIVATE CLOUD</small></span><i class="node-state green"></i></div>
</div>
<div class="metric-grid">
<div class="metric"><span class="metric-label" data-i18n="metric_data">DATA EXP.</span><strong>7<em> YRS</em></strong></div>
<div class="metric"><span class="metric-label" data-i18n="metric_projects">DELIVERED</span><strong>30<em> +</em></strong></div>
<div class="metric"><span class="metric-label" data-i18n="metric_clients">CLIENTS</span><strong>10<em> +</em></strong></div>
</div>
<div class="console-foot"><span>SECURE PIPELINE · FULL-CHAIN DELIVERY</span><span class="console-progress"><i></i></span></div>
</div>
</div>
<div class="hero-spatial reveal delay-1" aria-hidden="true">
<span class="scene-axis" data-i18n="scene_axis">THREE.JS / GPU 实时渲染</span>
<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 class="signal-bar reveal delay-2" aria-label="全链路能力">
<div class="signal-item"><span class="signal-index">01 / DATA</span><span class="signal-name" data-i18n="signal1">数据治理</span></div>
<div class="signal-item"><span class="signal-index">02 / MODEL</span><span class="signal-name" data-i18n="signal2">模型优化</span></div>
<div class="signal-item"><span class="signal-index">03 / DEPLOY</span><span class="signal-name" data-i18n="signal3">私有部署</span></div>
<div class="signal-item"><span class="signal-index">04 / OPERATE</span><span class="signal-name" data-i18n="signal4">持续运营</span></div>
</div>
</div>
</section>
<section class="section about" id="about">
<div class="container">
<div class="section-header reveal">
<div><span class="section-number">01 / CAPABILITY CHAIN</span><h2 class="section-title" data-i18n="about_title">从数据底座到 AI 业务价值</h2></div>
<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">
@@ -759,15 +975,15 @@
<p data-i18n="about_p1">荣刻科技早年深耕数据治理与数据加工处理,形成了扎实的数据工程能力。伴随人工智能技术发展,公司进一步拓展 AI 业务,构建“数据 + 模型 + 部署 + 运营”的双轮驱动体系。</p>
<p data-i18n="about_p2">核心团队汇聚国内顶尖高校人才与一线互联网企业资深从业者,在成都、海口设有办公场地,具备从技术研发到项目交付的完整服务能力。</p>
<div class="about-facts">
<div class="fact"><strong>7 YEARS</strong><span data-i18n="about_fact1">数据治理与加工经验</span></div>
<div class="fact"><strong>2 CITIES</strong><span data-i18n="about_fact2">研发与运营协同网络</span></div>
<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><span class="chain-state">READY</span></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><span class="chain-state">READY</span></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><span class="chain-state">SECURE</span></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><span class="chain-state">ACTIVE</span></article>
<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><span class="chain-state" data-i18n="state_ready">就绪</span></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><span class="chain-state" data-i18n="state_ready">就绪</span></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><span class="chain-state" data-i18n="state_secure">安全</span></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><span class="chain-state" data-i18n="state_active">运行中</span></article>
</div>
</div>
</div>
@@ -776,21 +992,22 @@
<section class="section services" id="services">
<div class="container">
<div class="section-header reveal">
<div><span class="section-number">02 / SOLUTIONS</span><h2 class="section-title" data-i18n="services_title">让 AI 真正进入业务流程</h2></div>
<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>SYSTEM / CORE</span><span class="service-state">PRIMARY CAPABILITY</span></div>
<h3 data-i18n="srv_core_title">企业 AI 中台与智能升级</h3>
<p data-i18n="srv_core_desc">将知识、模型与业务流程统一编排,让 AI 能力稳定进入决策、运营、客服与内容生产环节。</p>
<div class="service-tags"><span class="service-tag">WORKFLOW</span><span class="service-tag">KNOWLEDGE</span><span class="service-tag">AGENT</span><span class="service-tag">INSIGHT</span></div>
<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">DIALOGUE</span></div><h3 data-i18n="srv1_title">智能对话助手</h3><p data-i18n="srv1_desc">支持多轮交互、知识库问答与情感识别,适配客服、办公和教育场景。</p></article>
<article class="service-card reveal delay-2"><div class="service-code"><span>S02</span><span class="service-state">SERVICE</span></div><h3 data-i18n="srv2_title">企业智能客服</h3><p data-i18n="srv2_desc">覆盖售前咨询、售后支持与工单处理,提升响应效率与服务一致性。</p></article>
<article class="service-card reveal delay-1"><div class="service-code"><span>S03</span><span class="service-state">AUDIO</span></div><h3 data-i18n="srv3_title">AI 音频生成</h3><p data-i18n="srv3_desc">支持多语种、多风格语音内容生产,服务于配音、播报与数字人场景。</p></article>
<article class="service-card reveal delay-2"><div class="service-code"><span>S04</span><span class="service-state">MODEL</span></div><h3 data-i18n="srv4_title">垂类模型优化</h3><p data-i18n="srv4_desc">围绕金融、医疗、法律、制造等场景进行模型微调、评测和持续优化。</p></article>
<article class="service-card reveal"><div class="service-code"><span>S05</span><span class="service-state">PRIVATE</span></div><h3 data-i18n="srv5_title">模型私有化部署</h3><p data-i18n="srv5_desc">构建安全可靠的企业专属模型环境,满足核心数据不出域与高标准合规需求。</p></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>
@@ -798,14 +1015,14 @@
<section class="section advantages" id="advantages">
<div class="container">
<div class="section-header reveal">
<div><span class="section-number">03 / PROOF</span><h2 class="section-title" data-i18n="adv_title">技术之外,更重视可靠交付</h2></div>
<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">P01 / TEAM</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">P02 / DATA</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">P03 / DELIVERY</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">P04 / SERVICE</span><h3 data-i18n="adv4_title">持续服务体系</h3><p data-i18n="adv4_desc">成都研发与海口运营协同,为全国客户提供及时、高效的项目支持。</p></article>
<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>
@@ -813,18 +1030,18 @@
<section class="section offices" id="offices">
<div class="container">
<div class="section-header reveal">
<div><span class="section-number">04 / DELIVERY NETWORK</span><h2 class="section-title" data-i18n="offices_title">双城协同,服务全国</h2></div>
<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><span class="office-live">ONLINE</span></div>
<div class="office-coordinate"><span>30.5728° N · 104.0668° E</span><span class="office-live" data-i18n="office_online">在线</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><span class="office-live">ONLINE</span></div>
<div class="office-coordinate"><span>20.0440° N · 110.1999° E</span><span class="office-live" data-i18n="office_online">在线</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>
@@ -837,13 +1054,13 @@
<div class="container">
<div class="contact-shell reveal">
<div class="contact-head">
<div><span class="section-number">05 / START A PROJECT</span><h2 data-i18n="contact_title">从真实业务场景开始</h2></div>
<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">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">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">CHANNEL / WECHAT</span><h3 data-i18n="contact_wechat">微信联系</h3><span class="contact-value" data-i18n="contact_wechat_desc">来电或邮件后获取微信,添加时请备注“商务合作”</span></div>
<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>
@@ -853,7 +1070,7 @@
<footer>
<div class="container footer-inner">
<span>© <span id="year">2026</span> <span data-i18n="footer_company">海南荣刻科技有限公司</span></span>
<span class="footer-signal">DATA-DRIVEN · AI-POWERED · SECURE DELIVERY</span>
<span class="footer-signal" data-i18n="footer_signal">数据驱动 · AI 赋能 · 安全交付</span>
</div>
</footer>
@@ -864,53 +1081,67 @@
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 + DATA INFRASTRUCTURE', hero_line1: '让企业数据', hero_line2: '成为 AI 生产力',
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: '数据 · 模型 · 部署 · 运营', scene_axis: 'THREE.JS / GPU 实时渲染',
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: '持续运营',
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: '研发与运营协同网络',
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: '效果评估、流程优化与业务能力迭代',
state_ready: '就绪', state_secure: '安全', state_active: '运行中',
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: '围绕金融、医疗、法律、制造等场景进行模型微调、评测和持续优化。', srv5_title: '模型私有化部署', srv5_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 最值得从哪里落地。', contact_phone: '电话沟通', contact_email: '邮件咨询', contact_wechat: '微信联系', contact_wechat_desc: '来电或邮件后获取微信,添加时请备注“商务合作”', footer_company: '海南荣刻科技有限公司'
office2_title: '海口 · 运营中心', office2_desc: '商务运营与客户服务基地,负责市场拓展、项目运营管理及华南区域客户服务。', office2_tag1: '商务运营', office2_tag2: '客户服务', office2_tag3: '华南区域', office_online: '在线',
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', scene_axis: 'THREE.JS / GPU SHADER',
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',
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',
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',
state_ready: 'READY', state_secure: 'SECURE', state_active: 'ACTIVE',
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.', srv5_title: 'Private Model Deployment', srv5_desc: 'Secure, dedicated model environments for in-domain data and demanding compliance needs.',
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.', 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.'
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', office_online: 'ONLINE',
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'
}
};
@@ -918,13 +1149,40 @@
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];
@@ -955,6 +1213,22 @@
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);
@@ -965,12 +1239,15 @@
});
navLinks.querySelectorAll('a').forEach(function (link) { link.addEventListener('click', closeMenu); });
document.addEventListener('keydown', function (event) { if (event.key === 'Escape') 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 = document.querySelectorAll('main section[id]');
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;
@@ -1006,6 +1283,7 @@
});
}
applyTheme(themePreference, false);
let savedLang = 'zh';
try { savedLang = localStorage.getItem('site_lang') || 'zh'; } catch (error) { /* Storage may be disabled. */ }
applyLanguage(savedLang);
@@ -1013,5 +1291,6 @@
navbar.classList.toggle('scrolled', window.scrollY > 24);
})();
</script>
<script type="module" src="./theme-webgl.js?v=20260813h"></script>
</body>
</html>