feat: launch Roncarve Harness product page

index.html

@@ -233,6 +233,52 @@
         .nav-link:hover, .nav-link.active { color: var(--white); }
         .nav-link.active::after { opacity: 1; transform: translateX(-50%) scale(1); }
 
+        .product-nav { position: relative; }
+        .product-trigger {
+            display: block;
+            border: 0;
+            background: transparent;
+            font-family: inherit;
+            cursor: pointer;
+        }
+        .product-nav.open .product-trigger { color: var(--white); }
+        .product-nav.open .product-trigger::after { opacity: 1; transform: translateX(-50%) scale(1); }
+        .product-popover {
+            position: absolute;
+            top: calc(100% + 17px);
+            left: 50%;
+            z-index: 1100;
+            width: 430px;
+            padding: 8px;
+            border: 1px solid var(--line-strong);
+            border-radius: 16px;
+            background: color-mix(in srgb, var(--ink-900) 96%, transparent);
+            box-shadow: 0 24px 70px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .035);
+            backdrop-filter: blur(20px) saturate(135%);
+            -webkit-backdrop-filter: blur(20px) saturate(135%);
+            opacity: 0;
+            pointer-events: none;
+            transform: translate(-50%, -8px) scale(.98);
+            transform-origin: top center;
+            transition: opacity .2s ease, transform .2s var(--ease);
+        }
+        .product-nav.open .product-popover { opacity: 1; pointer-events: auto; transform: translate(-50%, 0) scale(1); }
+        .product-card {
+            display: block;
+            padding: 20px;
+            border: 1px solid var(--line);
+            border-radius: 12px;
+            background: linear-gradient(140deg, color-mix(in srgb, var(--cyan) 8%, transparent), rgba(255, 255, 255, .018));
+            transition: border-color .22s ease, background .22s ease, transform .22s var(--ease);
+        }
+        .product-card:hover { transform: translateY(-2px); border-color: var(--line-strong); background: color-mix(in srgb, var(--cyan) 10%, var(--ink-900)); }
+        .product-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
+        .product-card-meta span { color: var(--cyan); font: 700 9px/1 var(--mono); letter-spacing: .13em; }
+        .product-card-meta strong { padding: 6px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-soft); background: rgba(255, 255, 255, .025); font: 650 9px/1 var(--mono); }
+        .product-card h3 { margin: 20px 0 4px; color: var(--white); font-size: 22px; letter-spacing: -.03em; }
+        .product-card small { color: var(--text-faint); font: 550 10px/1 var(--mono); letter-spacing: .1em; }
+        .product-card p { margin: 14px 0 0; color: var(--text-soft); font-size: 13px; line-height: 1.65; }
+
         .nav-actions { display: flex; align-items: center; gap: 10px; }
         .preference-menu { position: relative; }
         .preference-trigger {
@@ -784,13 +830,6 @@
             .hero-spatial { width: min(100%, 760px); min-height: 420px; margin-left: auto; }
         }
 
-        /* Let desktop layouts use the available canvas on ultrawide screens. */
-        @media (min-width: 1440px) {
-            :root { --max-width: 88vw; }
-            .hero-layout { gap: clamp(64px, 6vw, 132px); }
-            .section-header { gap: clamp(48px, 6vw, 120px); }
-        }
-
         @media (max-width: 860px) {
             :root[data-theme="light"] .nav-links { background: rgba(250, 252, 255, .98); }
         }
@@ -859,6 +898,24 @@
             .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; }
+            .product-nav { width: 100%; }
+            .product-trigger { width: 100%; text-align: left; }
+            .product-popover {
+                position: relative;
+                top: auto;
+                left: auto;
+                width: 100%;
+                max-height: 0;
+                margin: 0;
+                padding: 0 8px;
+                overflow: hidden;
+                border-color: transparent;
+                opacity: 1;
+                transform: none;
+                transition: max-height .25s var(--ease), margin .25s ease, padding .25s ease, border-color .25s ease;
+            }
+            .product-nav.open .product-popover { max-height: 250px; margin: 8px 0 12px; padding: 8px; border-color: var(--line); transform: none; }
+            .product-card { padding: 17px; }
             .nav-actions { padding-top: 14px; justify-content: space-between; }
             .nav-cta { min-height: 42px; }
             .hero { padding-top: 126px; }
@@ -954,6 +1011,17 @@
             </a>
 
             <div class="nav-links" id="navLinks">
+                <div class="product-nav" id="productNav">
+                    <button class="nav-link product-trigger" id="productTrigger" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="productPopover" data-i18n="nav_products">产品</button>
+                    <div class="product-popover" id="productPopover" role="menu" aria-label="产品列表" data-i18n-aria="product_list_label">
+                        <a class="product-card" href="/products/roncarve-harness/" role="menuitem">
+                            <span class="product-card-meta"><span>AGENT INFRA / HARNESS</span><strong data-i18n="product_status">即将开放</strong></span>
+                            <h3 data-i18n="product_harness_name">荣刻驭境</h3>
+                            <small>RONCARVE HARNESS</small>
+                            <p data-i18n="product_harness_desc">本地客户端连接本地项目，平台共享工作空间承载团队协同，并内置精准插件检索与高效热插拔。</p>
+                        </a>
+                    </div>
+                </div>
                 <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>
@@ -1187,7 +1255,7 @@
             zh: {
                 title: '海南荣刻科技有限公司 - 数据筑基 · AI 落地', skip: '跳到主要内容', brand: '荣刻科技', nav_label: '主导航', home_label: '荣刻科技首页', lang_label: '语言切换', menu_open: '打开导航菜单', menu_close: '关闭导航菜单',
                 theme_label: '外观模式选择', theme_system: '跟随系统', theme_light: '浅色外观', theme_dark: '深色外观', theme_system_short: 'Auto', theme_light_short: 'Light', theme_dark_short: 'Dark', language_zh: '简体中文', language_en: 'English',
-                nav_about: '能力链路', nav_services: '解决方案', nav_advantages: '核心优势', nav_offices: '交付网络', nav_contact: '预约咨询',
+                nav_products: '产品', product_list_label: '产品列表', product_status: '即将开放', product_harness_name: '荣刻驭境', product_harness_desc: '本地客户端连接本地项目，平台共享工作空间承载团队协同，并内置精准插件检索与高效热插拔。', 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: '成都 / 海口双城交付',
@@ -1221,7 +1289,7 @@
             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', theme_system_short: 'Auto', theme_light_short: 'Light', theme_dark_short: 'Dark', language_zh: '简体中文', language_en: 'English',
-                nav_about: 'Capabilities', nav_services: 'Solutions', nav_advantages: 'Advantages', nav_offices: 'Delivery', nav_contact: 'Book a Call',
+                nav_products: 'Products', product_list_label: 'Product list', product_status: 'Coming Soon', product_harness_name: 'Roncarve Harness', product_harness_desc: 'A local client for browser-based local projects and a shared workspace for team collaboration, with precise plugin discovery and hot swapping.', nav_about: 'Capabilities', nav_services: 'Solutions', nav_advantages: 'Advantages', nav_offices: 'Delivery', nav_contact: 'Book a Call',
                 hero_eyebrow: 'Hainan Roncarve Technology Co., Ltd. · 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',
@@ -1257,6 +1325,8 @@
         const navbar = document.getElementById('navbar');
         const menuBtn = document.getElementById('menuBtn');
         const navLinks = document.getElementById('navLinks');
+        const productNav = document.getElementById('productNav');
+        const productTrigger = document.getElementById('productTrigger');
         const langSwitch = document.getElementById('langSwitch');
         const themeSwitch = document.getElementById('themeSwitch');
         const themeQuery = window.matchMedia('(prefers-color-scheme: dark)');
@@ -1336,6 +1406,12 @@
             menuBtn.setAttribute('aria-expanded', 'false');
             menuBtn.setAttribute('aria-label', i18n[currentLanguage].menu_open);
             document.body.classList.remove('menu-open');
+            closeProductMenu();
+        }
+
+        function closeProductMenu() {
+            productNav.classList.remove('open');
+            productTrigger.setAttribute('aria-expanded', 'false');
         }
 
         function closePreferenceMenus(except) {
@@ -1351,12 +1427,24 @@
             const trigger = menu.querySelector('.preference-trigger');
             trigger.addEventListener('click', function () {
                 const open = !menu.classList.contains('open');
+                closeProductMenu();
                 closePreferenceMenus(menu);
                 menu.classList.toggle('open', open);
                 trigger.setAttribute('aria-expanded', String(open));
             });
         });
 
+        productTrigger.addEventListener('click', function () {
+            const open = !productNav.classList.contains('open');
+            closePreferenceMenus();
+            productNav.classList.toggle('open', open);
+            productTrigger.setAttribute('aria-expanded', String(open));
+            if (open && window.innerWidth > 860) {
+                const firstProduct = productNav.querySelector('[role="menuitem"]');
+                if (firstProduct) requestAnimationFrame(function () { firstProduct.focus(); });
+            }
+        });
+
         langSwitch.addEventListener('click', function (event) {
             const button = event.target.closest('[data-lang]');
             if (!button) return;
@@ -1393,10 +1481,12 @@
             if (event.key === 'Escape') {
                 closeMenu();
                 closePreferenceMenus();
+                closeProductMenu();
             }
         });
         document.addEventListener('click', function (event) {
             if (!event.target.closest('.preference-menu')) closePreferenceMenus();
+            if (!event.target.closest('.product-nav')) closeProductMenu();
         });
 
         window.addEventListener('scroll', function () { navbar.classList.toggle('scrolled', window.scrollY > 24); }, { passive: true });