/* ========================================================================== BUILDING CHLOE — V3 DESIGN SYSTEM -------------------------------------------------------------------------- 依据 V3.1 VISUAL SYSTEM 概念板（Desktop/Building Chloe Website）。 色值、字体、图标、动效元素、按钮、卡片、光标、页面节奏 —— 全部取自板上规格。 这份文件不影响现有 V2 页面。V2 继续用 site.css，两套并存， 等 V3 页面达到可发布状态再一次性切换（BATCH 06 SEO 决定）。 目录 01 TOKENS 颜色 / 字体 / 间距 / 栅格 / 层级 / 动效 02 RESET 基础 03 TYPE 排版 04 PRIMITIVES 轨道 / 光线 / 节点 / 光晕 / 星芒 / 光轨 / 粒子 / 传送门 / 玻璃 05 UI 按钮 / 卡片 / 状态标签 / 表单 / 图标 06 SHELL 导航 / 大菜单 / 页脚 / 语言切换 07 MOTION 动效基础 ========================================================================== */ /* ── 01 TOKENS ─────────────────────────────────────────────────────────── */ :root{ /* 颜色 —— 取自概念板 §2 COLOR SYSTEM，不是自己调的 */ --void:#0A0C12; /* 主底 */ --graphite:#12161D; /* 次层表面 */ --glass:#1E2328; /* 卡片 / 玻璃面 */ --silver:#AEB3BB; /* 次要文字 */ --ivory:#F7F3E9; /* 暖白 —— 大标题 */ --ice:#F5F8FF; /* 冷白 —— 正文高亮 */ --arctic:#6DB8FF; /* 光 / 能量 */ --electric:#3FA2FF; /* 交互强调 */ /* 语义层 —— 组件只用这一层，不直接摸上面的原色 */ --ground:var(--void); --surface:var(--graphite); --surface-2:var(--glass); --t-hi:var(--ivory); --t-1:rgba(245,248,255,.86); /* 可读性下限：正文 / helper / disclaimer / 状态一律不低于 --t-2（KI-005）。 --t-3 / --t-4 只给装饰性编号、ornament、非必读标签 —— 不承载信息。 */ --t-2:rgba(174,179,187,.80); --t-3:rgba(174,179,187,.56); --t-4:rgba(174,179,187,.38); --line-1:rgba(174,179,187,.22); --line-2:rgba(174,179,187,.13); --line-3:rgba(174,179,187,.07); --accent:var(--electric); --accent-soft:var(--arctic); --accent-wash:rgba(63,162,255,.10); /* 光晕 —— 蓝色只做光，不做面（§09 85/10/5 配比） */ --glow-sm:0 0 12px rgba(63,162,255,.28); --glow-md:0 0 26px rgba(63,162,255,.34), 0 0 60px rgba(109,184,255,.14); --glow-lg:0 0 46px rgba(63,162,255,.40), 0 0 120px rgba(109,184,255,.18); --glow-ivory:0 0 30px rgba(247,243,233,.16); /* 字体 —— 三个角色，不混用 Display 高对比度细衬线，大标题（板上 "BUILDS" 的字形） UI 几何无衬线，导航 / 标签 / 按钮（板上标注 PP Neue Machina） Body Inter Light（板上明确指定） */ /* LOCK：Display = Cormorant Garamond 400（永不加粗）· Sans = Inter · Mono 保留 拉丁在前、中文在后 —— 顺序不能反，否则中文会抢走拉丁字形 */ --f-display:'Cormorant Garamond',Garamond,Georgia,'Noto Sans SC',serif; --f-ui:Inter,'Noto Sans SC',system-ui,-apple-system,sans-serif; --f-body:Inter,'Noto Sans SC',system-ui,-apple-system,sans-serif; --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* 字号阶梯 */ --fs-display:clamp(52px,8.2vw,138px); --fs-h1:clamp(38px,5.6vw,86px); --fs-h2:clamp(29px,3.8vw,56px); --fs-h3:clamp(19px,1.9vw,26px); --fs-lede:clamp(16px,1.35vw,20px); --fs-body:16px; --fs-sm:14px; --fs-label:11px; --fs-micro:10px; /* 间距 —— 4px 基数 */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px; --s-sec:clamp(72px,10vw,168px); /* 容器与栅格 */ --w-max:1440px; --w-text:68ch; --gut:clamp(20px,4.4vw,72px); --grid:12; --gap:clamp(16px,2vw,32px); /* 圆角 —— 板上按钮是全圆角胶囊，面板是小圆角 */ --r-pill:999px; --r-panel:14px; --r-card:10px; --r-xs:4px; /* 层级 */ --z-bg:0; --z-base:1; --z-raised:10; --z-sticky:100; --z-nav:200; --z-menu:300; --z-modal:400; --z-cursor:500; /* 动效 —— 板上 §7 MOTION LANGUAGE */ --e-out:cubic-bezier(.22,1,.36,1); /* ease out quart */ --e-inout:cubic-bezier(.65,0,.35,1); --e-soft:cubic-bezier(.4,0,.2,1); --d-fast:.18s; --d-base:.32s; --d-slow:.6s; --d-reveal:.9s; --orbit-dur:38s; --pulse-dur:3.2s; --float-dur:7s; /* 断点参考（供 JS 读取） */ --bp-sm:430px; --bp-md:768px; --bp-lg:1024px; --bp-xl:1440px; } /* 这套视觉是刻意的单一深色世界（§08 Cinematic Dark）， 不做浅色反转 —— 但每个颜色都显式声明，不借宿主底色。 */ /* ── 02 RESET ──────────────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--ground); color:var(--t-1); font:300 var(--fs-body)/1.65 var(--f-body); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } img,svg,video{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-xs)} ::selection{background:rgba(63,162,255,.28);color:var(--ice)} .bc-wrap{max-width:var(--w-max);margin-inline:auto;padding-inline:var(--gut)} .bc-sec{padding-block:var(--s-sec);position:relative} /* ── 03 TYPE ───────────────────────────────────────────────────────────── */ .t-display{ font:400 var(--fs-display)/.88 var(--f-display); letter-spacing:-.005em;text-transform:uppercase; color:var(--t-hi);margin:0;text-wrap:balance; } .t-h1{font:400 var(--fs-h1)/.94 var(--f-display);letter-spacing:.008em; text-transform:uppercase;color:var(--t-hi);margin:0;text-wrap:balance} .t-h2{font:400 var(--fs-h2)/1.0 var(--f-display);letter-spacing:-.004em; text-transform:uppercase;color:var(--t-hi);margin:0;text-wrap:balance} /* 大陈述里的分级：小行更小、加正字距，跟参考稿一致 */ .t-display .sm,.t-h1 .sm{display:block;font-size:.46em;letter-spacing:.06em; line-height:1.06;color:var(--t-1)} .t-display .lg,.t-h1 .lg{display:block;font-size:1em;letter-spacing:-.005em} /* Founder 引言等：斜体、句首大写，不参与全大写 */ .t-quote{font:400 clamp(20px,2.3vw,34px)/1.28 var(--f-display); font-style:italic;letter-spacing:-.004em;color:var(--t-hi);margin:0} .t-h3{font:400 var(--fs-h3)/1.34 var(--f-ui);letter-spacing:0; color:var(--t-hi);margin:0} /* 板上大量使用的宽字距全大写细体 */ .t-wide{font:400 clamp(15px,1.5vw,22px)/1.5 var(--f-display); letter-spacing:.24em;text-transform:uppercase;color:var(--t-1)} .t-label{font:500 var(--fs-label)/1.4 var(--f-ui);letter-spacing:.22em; text-transform:uppercase;color:var(--t-2)} .t-label--accent{color:var(--accent-soft)} .t-lede{font:300 var(--fs-lede)/1.7 var(--f-body);color:var(--t-2);max-width:var(--w-text)} .t-body{font:300 var(--fs-body)/1.7 var(--f-body);color:var(--t-2);max-width:var(--w-text)} .t-sm{font:300 var(--fs-sm)/1.6 var(--f-body);color:var(--t-2)} .t-mono{font:400 var(--fs-micro)/1.5 var(--f-mono);letter-spacing:.1em;color:var(--t-2)} /* .brk = 「这里断行」。原来只有 .sol-title 在 ≤900 才 display:block， 别处两个 .brk 直接相邻就渲染成一行且没有空格 —— 「runs nowto how」 「Start withthe diagnosis」都是这么来的（桌面也一样错）。 */ .brk{display:block} .t-num{font:400 clamp(30px,3.6vw,56px)/1 var(--f-display); letter-spacing:-.01em;color:var(--t-hi);font-variant-numeric:tabular-nums} /* 中文字形由字体栈末尾的 Noto Sans SC 接住 —— 拉丁在前、中文在后，顺序不能反。 不用 :lang() 覆盖： 会让它命中整页，把衬线标题全打掉。 */ .t-display .zh,.t-h1 .zh,.t-h2 .zh{font-family:'Noto Sans SC',var(--f-body); font-weight:200;letter-spacing:.04em;text-transform:none;line-height:1.24} /* ── 04 PRIMITIVES ─────────────────────────────────────────────────────── */ /* 板上 §5 ANIMATION ELEMENTS + §6 UI PATTERNS & MOTIFS 这些不是装饰：轨道=连接，线=旅程，节点=数据，光晕=AI，星芒=焦点。 */ /* BC ORBIT —— 轨道环 */ .bc-orbit{position:relative;display:grid;place-items:center; width:var(--orbit-size,320px);aspect-ratio:1} .bc-orbit__ring{ position:absolute;inset:0;border-radius:50%; border:1px solid var(--line-1); transform:rotateX(72deg) rotate(var(--tilt,0deg)); transform-style:preserve-3d; } .bc-orbit__ring::after{ /* 环上跑动的那颗光点 */ content:"";position:absolute;top:-3px;left:50%; width:5px;height:5px;border-radius:50%; background:var(--accent-soft);box-shadow:var(--glow-sm); } .bc-orbit--live .bc-orbit__ring{ animation:bc-orbit-spin var(--orbit-dur) linear infinite; animation-delay:var(--delay,0s)} .bc-orbit__ring--2{inset:14%;--tilt:52deg;opacity:.72} .bc-orbit__ring--3{inset:28%;--tilt:-38deg;opacity:.5} @keyframes bc-orbit-spin{ from{transform:rotateX(72deg) rotate(var(--tilt,0deg))} to{transform:rotateX(72deg) rotate(calc(var(--tilt,0deg) + 360deg))} } /* BC LINE —— 旅程线，滚动时逐段点亮 */ .bc-line{position:relative;height:1px;background:var(--line-2);overflow:visible} .bc-line__lit{position:absolute;inset:0 auto 0 0;width:var(--lit,0%); background:linear-gradient(90deg,transparent,var(--accent-soft)); box-shadow:var(--glow-sm);transition:width 1.1s var(--e-out)} .bc-line--v{width:1px;height:auto;min-height:120px} .bc-line--v .bc-line__lit{inset:0 0 auto 0;width:auto;height:var(--lit,0%); background:linear-gradient(180deg,var(--accent-soft),transparent)} /* BC NODE —— 数据节点 */ .bc-node{position:relative;width:10px;height:10px;border-radius:50%; background:var(--surface);border:1px solid var(--line-1);flex:none} .bc-node::after{content:"";position:absolute;inset:2px;border-radius:50%; background:var(--t-4);transition:background var(--d-base) var(--e-soft)} .bc-node--on{border-color:var(--accent-soft);box-shadow:var(--glow-sm)} .bc-node--on::after{background:var(--accent-soft)} .bc-node--pulse::before{content:"";position:absolute;inset:-6px;border-radius:50%; border:1px solid var(--accent-soft);opacity:0; animation:bc-pulse var(--pulse-dur) var(--e-out) infinite} @keyframes bc-pulse{ 0%{transform:scale(.6);opacity:.7} 100%{transform:scale(1.9);opacity:0} } /* BC HALO —— 背光月晕，人物与主视觉后面那一圈 */ .bc-halo{position:absolute;border-radius:50%;pointer-events:none; width:var(--halo-size,540px);aspect-ratio:1; background:radial-gradient(circle, rgba(109,184,255,.16) 0%, rgba(63,162,255,.07) 38%, transparent 66%); filter:blur(2px)} .bc-halo--ring{background:none; border:1px solid rgba(247,243,233,.30); box-shadow:0 0 60px rgba(247,243,233,.14), inset 0 0 90px rgba(109,184,255,.10)} /* BC STAR —— 星芒 / 焦点 */ .bc-star{position:relative;width:var(--star-size,40px);aspect-ratio:1;flex:none} .bc-star::before,.bc-star::after{ content:"";position:absolute;left:50%;top:50%; background:linear-gradient(var(--ang,0deg),transparent,var(--ice),transparent); transform:translate(-50%,-50%) rotate(var(--rot,0deg)); filter:drop-shadow(0 0 6px rgba(109,184,255,.8))} .bc-star::before{width:1.5px;height:100%} .bc-star::after{width:100%;height:1.5px} .bc-star--4::before{height:130%} .bc-star--sm{--star-size:20px} /* LIGHT TRAIL —— 光轨拖尾 */ .bc-trail{position:relative;height:1px;width:100%; background:linear-gradient(90deg,transparent,rgba(109,184,255,.7) 46%,transparent); filter:blur(.3px);box-shadow:0 0 10px rgba(63,162,255,.35)} .bc-trail--curve{height:64px;background:none;box-shadow:none;overflow:visible} .bc-trail--curve svg{width:100%;height:100%;overflow:visible} .bc-trail__path{fill:none;stroke:url(#bcTrailGrad);stroke-width:1.2; filter:drop-shadow(0 0 6px rgba(63,162,255,.55))} /* PARTICLE FIELD —— 粒子场（canvas 由 v3.js 绘制，这里只定容器） */ .bc-particles{position:absolute;inset:0;pointer-events:none;z-index:var(--z-bg)} .bc-particles canvas{width:100%;height:100%;display:block} /* PORTAL —— 传送门：光环 + 中心亮点 + 向外辐射 */ .bc-portal{position:relative;display:grid;place-items:center; width:var(--portal-size,280px);aspect-ratio:1} .bc-portal__ring{position:absolute;inset:0;border-radius:50%; border:1px solid rgba(247,243,233,.34); box-shadow:0 0 50px rgba(109,184,255,.18),inset 0 0 70px rgba(63,162,255,.10)} .bc-portal__core{width:12%;aspect-ratio:1;border-radius:50%; background:var(--ice);box-shadow:var(--glow-lg)} .bc-portal__rays{position:absolute;inset:-18%;border-radius:50%; background:conic-gradient(from 0deg, transparent 0deg,rgba(109,184,255,.16) 12deg,transparent 24deg, transparent 90deg,rgba(109,184,255,.12) 102deg,transparent 114deg, transparent 180deg,rgba(109,184,255,.16) 192deg,transparent 204deg, transparent 270deg,rgba(109,184,255,.12) 282deg,transparent 294deg); filter:blur(6px);opacity:.8} /* GLASS PANEL —— 玻璃面板 */ .bc-glass{ background:linear-gradient(155deg,rgba(30,35,40,.78),rgba(18,22,29,.62)); border:1px solid var(--line-2); border-radius:var(--r-panel); backdrop-filter:blur(14px) saturate(120%); -webkit-backdrop-filter:blur(14px) saturate(120%); box-shadow:0 1px 0 rgba(247,243,233,.05) inset,0 18px 48px rgba(0,0,0,.5); position:relative;overflow:hidden} .bc-glass::before{ /* 顶边那道高光 */ content:"";position:absolute;top:0;left:12%;right:12%;height:1px; background:linear-gradient(90deg,transparent,rgba(247,243,233,.28),transparent)} .bc-glass--shard{border-radius:var(--r-xs); transform:perspective(900px) rotateY(var(--shard-y,-14deg)) rotateX(var(--shard-x,6deg))} /* GLOW —— 通用发光工具 */ .bc-glow-sm{box-shadow:var(--glow-sm)} .bc-glow-md{box-shadow:var(--glow-md)} .bc-glow-lg{box-shadow:var(--glow-lg)} .bc-textglow{text-shadow:0 0 18px rgba(109,184,255,.45)} /* DEPTH LAYERS / GRID & RAYS —— 背景纹理 */ .bc-gridrays{position:absolute;inset:0;pointer-events:none;opacity:.5; background: linear-gradient(var(--line-3) 1px,transparent 1px) 0 0/100% 88px, linear-gradient(90deg,var(--line-2) 1px,transparent 1px) 0 0/88px 100%; background-image: linear-gradient(var(--line-2) 1px,transparent 1px), linear-gradient(90deg,var(--line-2) 1px,transparent 1px); background-size:100% 64px,64px 100%; mask-image:radial-gradient(ellipse 76% 66% at 50% 45%,#000 12%,transparent 82%); -webkit-mask-image:radial-gradient(ellipse 76% 66% at 50% 45%,#000 12%,transparent 82%)} /* ── 05 UI ─────────────────────────────────────────────────────────────── */ /* 按钮 —— 板上 §9 五种：Primary/Glow · Secondary/Glass · Ghost/Line · Icon/Circle · Magnetic */ .bc-btn{ display:inline-flex;align-items:center;justify-content:center;gap:var(--s-3); padding:14px 26px;min-height:44px;border-radius:var(--r-pill); /* §16 触控目标 */ font:500 12px/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase; border:1px solid transparent;white-space:nowrap;position:relative; transition:color var(--d-base) var(--e-soft), border-color var(--d-base) var(--e-soft), box-shadow var(--d-base) var(--e-soft), background var(--d-base) var(--e-soft)} .bc-btn .arw{transition:transform var(--d-base) var(--e-out)} .bc-btn:hover .arw{transform:translateX(4px)} .bc-btn--primary{color:var(--ice); background:linear-gradient(180deg,rgba(63,162,255,.20),rgba(63,162,255,.08)); border-color:rgba(109,184,255,.55);box-shadow:var(--glow-sm)} .bc-btn--primary:hover{border-color:var(--accent-soft);box-shadow:var(--glow-md)} .bc-btn--primary:active{box-shadow:var(--glow-lg)} .bc-btn--glass{color:var(--t-1); background:linear-gradient(155deg,rgba(30,35,40,.8),rgba(18,22,29,.6)); border-color:var(--line-1);backdrop-filter:blur(10px)} .bc-btn--glass:hover{color:var(--ice);border-color:rgba(174,179,187,.36)} .bc-btn--ghost{color:var(--t-2);border-color:var(--line-1)} .bc-btn--ghost:hover{color:var(--ice);border-color:var(--accent-soft); box-shadow:var(--glow-sm)} .bc-btn--icon{padding:0;width:44px;height:44px;justify-content:center; border-color:var(--line-1);color:var(--t-1)} .bc-btn--icon:hover{border-color:var(--accent-soft);color:var(--ice); box-shadow:var(--glow-sm)} .bc-btn[disabled],.bc-btn--disabled{ color:var(--t-4);border-color:var(--line-3);background:none; box-shadow:none;cursor:not-allowed;pointer-events:none} /* 卡片 —— 板上 §10 */ .bc-card{ background:linear-gradient(160deg,rgba(30,35,40,.55),rgba(10,12,18,.72)); border:1px solid var(--line-2);border-radius:var(--r-card); padding:var(--s-5);position:relative;overflow:hidden; transition:border-color var(--d-base) var(--e-soft), transform var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-soft)} .bc-card:hover{border-color:rgba(109,184,255,.34);transform:translateY(-3px); box-shadow:0 20px 50px rgba(0,0,0,.55),var(--glow-sm)} .bc-card__head{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-4)} .bc-card__t{font:400 15px/1.35 var(--f-ui);color:var(--t-hi);margin:0} .bc-card__zh{display:block;font:300 12px/1.5 var(--f-body);color:var(--t-2);margin-top:2px} .bc-card__body{font:300 14px/1.65 var(--f-body);color:var(--t-2);margin:0} .bc-card__foot{display:flex;align-items:center;justify-content:space-between; gap:var(--s-4);margin-top:var(--s-5);padding-top:var(--s-4); border-top:1px solid var(--line-3)} .bc-card--kpi .t-num{margin:var(--s-2) 0} .bc-card--feature{border-color:rgba(109,184,255,.30);box-shadow:var(--glow-sm)} /* 状态标签 —— §26 的 REAL / MASKED / DEMO / PROTOTYPE 制度 */ .bc-tag{display:inline-flex;align-items:center;gap:6px; padding:4px 10px;border-radius:var(--r-xs); font:500 var(--fs-micro)/1.4 var(--f-ui);letter-spacing:.14em;text-transform:uppercase; border:1px solid;white-space:nowrap} .bc-tag::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor} .bc-tag--real{color:#8FD3C7;border-color:rgba(143,211,199,.42);background:rgba(143,211,199,.09)} .bc-tag--masked{color:var(--arctic);border-color:rgba(109,184,255,.42);background:var(--accent-wash)} .bc-tag--demo{color:#D9C08A;border-color:rgba(217,192,138,.42);background:rgba(217,192,138,.09)} .bc-tag--proto{color:var(--t-2);border-color:var(--line-1);background:rgba(174,179,187,.07)} .bc-tag--new{color:var(--ice);border-color:rgba(109,184,255,.55);background:var(--accent-wash); box-shadow:var(--glow-sm)} /* 表单 */ .bc-field{display:grid;gap:var(--s-2)} .bc-field label{font:500 var(--fs-label)/1.4 var(--f-ui);letter-spacing:.18em; text-transform:uppercase;color:var(--t-2)} .bc-input{ width:100%;padding:13px 16px;border-radius:var(--r-xs); background:rgba(10,12,18,.6);border:1px solid var(--line-1); color:var(--ice);font:300 15px/1.5 var(--f-body); transition:border-color var(--d-base) var(--e-soft),box-shadow var(--d-base) var(--e-soft)} .bc-input::placeholder{color:var(--t-3)} .bc-input:focus{outline:none;border-color:var(--accent-soft);box-shadow:var(--glow-sm)} .bc-input[aria-invalid="true"]{border-color:#E0918A} .bc-field__err{font:300 13px/1.5 var(--f-body);color:#E0918A} /* 图标 —— 统一 1.25px 描边，24 格 */ .bc-ico{width:24px;height:24px;flex:none; fill:none;stroke:currentColor;stroke-width:1.25; stroke-linecap:round;stroke-linejoin:round;color:var(--t-2)} .bc-ico--lg{width:34px;height:34px} .bc-ico--accent{color:var(--accent-soft)} /* ── 06 SHELL ──────────────────────────────────────────────────────────── */ .bc-nav{position:sticky;top:0;z-index:var(--z-nav); background:rgba(10,12,18,.72);backdrop-filter:blur(18px) saturate(130%); -webkit-backdrop-filter:blur(18px) saturate(130%); border-bottom:1px solid var(--line-3)} .bc-nav__in{max-width:var(--w-max);margin-inline:auto;padding:0 var(--gut); height:72px;display:flex;align-items:center;gap:var(--s-6)} .bc-nav__logo{font:400 17px/1 var(--f-display);letter-spacing:.26em; display:inline-flex;align-items:center;min-height:44px; text-transform:uppercase;color:var(--t-hi);white-space:nowrap} .bc-nav__links{display:flex;align-items:center;gap:var(--s-6);margin-inline:auto} .bc-nav__links a,.bc-nav__trigger{ font:500 11px/1 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap; color:var(--t-2);padding:8px 0;position:relative; transition:color var(--d-base) var(--e-soft)} .bc-nav__links a:hover,.bc-nav__trigger:hover{color:var(--ice)} .bc-nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px; background:var(--accent-soft);transform:scaleX(0);transform-origin:left; transition:transform var(--d-base) var(--e-out)} .bc-nav__links a:hover::after{transform:scaleX(1)} .bc-nav__end{display:flex;align-items:center;gap:var(--s-4)} .bc-lang{display:flex;align-items:center;gap:2px; border:1px solid var(--line-1);border-radius:var(--r-pill);padding:3px} .bc-lang a{font:500 10px/1 var(--f-ui);letter-spacing:.12em; padding:6px 10px;border-radius:var(--r-pill);color:var(--t-2)} .bc-lang a[aria-current="true"]{background:rgba(174,179,187,.12);color:var(--ice)} /* 这一页还没有中文版：给一个「不可用」的状态，而不是一个骗人的链接。 非激活的装饰态，t-3 合规（L-024）。 */ /* 用「没有激活底色」表达不可用，不是靠压暗。 压暗到 1.87:1 连状态本身都读不出来了（L-024）。 */ .bc-lang__off{font:500 10px/1 var(--f-ui);letter-spacing:.12em; padding:6px 10px;border-radius:var(--r-pill);color:var(--t-2); cursor:not-allowed} /* 大菜单 —— 四支柱，不做超大菜单（§06） */ .bc-mega{position:absolute;left:0;right:0;top:100%;z-index:var(--z-menu); background:rgba(10,12,18,.96);backdrop-filter:blur(22px); border-block:1px solid var(--line-3); padding:var(--s-7) 0;opacity:0;visibility:hidden;transform:translateY(-8px); transition:opacity var(--d-base) var(--e-soft),transform var(--d-base) var(--e-out), visibility var(--d-base)} .bc-mega[data-open="true"]{opacity:1;visibility:visible;transform:none} .bc-mega__grid{max-width:var(--w-max);margin-inline:auto;padding-inline:var(--gut); display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)} .bc-mega__col{display:grid;gap:var(--s-3);align-content:start; padding:var(--s-4);border:1px solid var(--line-3);border-radius:var(--r-card); transition:border-color var(--d-base) var(--e-soft),background var(--d-base) var(--e-soft)} .bc-mega__col:hover{border-color:rgba(109,184,255,.28);background:rgba(30,35,40,.4)} .bc-mega__n{font:400 var(--fs-micro)/1 var(--f-mono);letter-spacing:.16em;color:var(--accent-soft)} .bc-mega__t{font:400 17px/1.2 var(--f-ui);letter-spacing:.02em;color:var(--t-hi)} .bc-mega__d{font:300 13px/1.55 var(--f-body);color:var(--t-2)} .bc-mega__list{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:var(--s-2)} .bc-mega__list span{font:300 12px/1.4 var(--f-body);color:var(--t-2)} /* 页脚 */ .bc-foot{border-top:1px solid var(--line-3);padding-block:var(--s-8) var(--s-6); position:relative} .bc-foot__grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--gap)} .bc-foot h3{font:500 var(--fs-label)/1.4 var(--f-ui);letter-spacing:.22em; text-transform:uppercase;color:var(--t-2);margin:0 0 var(--s-4)} .bc-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2)} .bc-foot a{font:300 14px/1.6 var(--f-body);color:var(--t-2)} .bc-foot a:hover{color:var(--ice)} .bc-foot__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-4); margin-top:var(--s-8);padding-top:var(--s-5);border-top:1px solid var(--line-3)} /* ── 07 MOTION ─────────────────────────────────────────────────────────── */ /* 默认可见：关掉 JS 的浏览器、抓取器、阅读器一样能看到内容。 只有 里那行同步脚本打上 .bc-js 之后才进入「先藏后揭」。*/ .bc-reveal{transition:opacity var(--d-reveal) var(--e-out),transform var(--d-reveal) var(--e-out)} .bc-js .bc-reveal{opacity:0;transform:translateY(22px)} .bc-js .bc-reveal.is-in{opacity:1;transform:none} .bc-reveal[data-delay="1"]{transition-delay:.08s} .bc-reveal[data-delay="2"]{transition-delay:.16s} .bc-reveal[data-delay="3"]{transition-delay:.24s} .bc-reveal[data-delay="4"]{transition-delay:.32s} .bc-float{animation:bc-float var(--float-dur) var(--e-inout) infinite} @keyframes bc-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} .bc-magnetic{transition:transform var(--d-base) var(--e-out)} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important} .bc-js .bc-reveal{opacity:1;transform:none} .bc-orbit--live .bc-orbit__ring{animation:none} .bc-line__lit{width:100%} } /* ── 响应式 ────────────────────────────────────────────────────────────── */ @media (max-width:1024px){ .bc-mega__grid{grid-template-columns:repeat(2,1fr)} .bc-foot__grid{grid-template-columns:1fr 1fr} } @media (max-width:768px){ :root{--fs-display:clamp(38px,11vw,64px)} .bc-nav__links{display:none} .bc-mega__grid{grid-template-columns:1fr} .bc-foot__grid{grid-template-columns:1fr;gap:var(--s-6)} .bc-orbit{--orbit-size:min(78vw,320px)} .bc-portal{--portal-size:min(64vw,260px)} } @media (max-width:430px){ .bc-btn{padding:13px 20px;font-size:11px;min-height:46px} .bc-nav__in{height:62px} } /* ── 移动端导航 ──────────────────────────────────────────────────────── §06 / §57：手机不是桌面缩小。长 CTA 收成短标签，Solutions 变手风琴抽屉。 */ .bc-burger{display:none;width:44px;height:44px;border:1px solid var(--line-1); border-radius:var(--r-pill);place-items:center;flex:none} .bc-burger span{display:block;width:16px;height:1px;background:var(--t-1); position:relative;transition:transform var(--d-base) var(--e-out), background var(--d-base) var(--e-soft)} .bc-burger span::before,.bc-burger span::after{content:"";position:absolute; left:0;width:16px;height:1px;background:var(--t-1); transition:transform var(--d-base) var(--e-out)} .bc-burger span::before{top:-5px} .bc-burger span::after{top:5px} .bc-burger[aria-expanded="true"] span{background:transparent} .bc-burger[aria-expanded="true"] span::before{transform:translateY(5px) rotate(45deg)} .bc-burger[aria-expanded="true"] span::after{transform:translateY(-5px) rotate(-45deg)} .bc-drawer{position:fixed;inset:72px 0 0;z-index:var(--z-menu); background:rgba(10,12,18,.97);backdrop-filter:blur(22px); padding:var(--s-6) var(--gut) var(--s-9);overflow-y:auto; opacity:0;visibility:hidden;transform:translateY(-10px); transition:opacity var(--d-base) var(--e-soft),transform var(--d-base) var(--e-out), visibility var(--d-base);display:none} .bc-drawer[data-open="true"]{opacity:1;visibility:visible;transform:none} .bc-drawer__list{display:grid;gap:2px;list-style:none;margin:0;padding:0} .bc-drawer__list > li{border-bottom:1px solid var(--line-3)} .bc-drawer__list a,.bc-drawer__acc{display:flex;align-items:center; justify-content:space-between;width:100%;padding:17px 0;text-align:left; font:500 13px/1 var(--f-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--t-1)} .bc-drawer__acc svg{transition:transform var(--d-base) var(--e-out)} .bc-drawer__acc[aria-expanded="true"] svg{transform:rotate(90deg)} .bc-drawer__panel{display:none;padding-bottom:var(--s-4)} .bc-drawer__panel[data-open="true"]{display:grid;gap:var(--s-3)} .bc-drawer__panel a{padding:11px 0 11px var(--s-4);font-size:12px; letter-spacing:.12em;color:var(--t-2);border-left:1px solid var(--line-2)} .bc-drawer__cta{margin-top:var(--s-7);display:grid;gap:var(--s-3)} /* 断点 1180。BATCH 10 试过下调到 1080（导航从七项减到五项）， 但 1081–1180 之间语言切换和 CTA 实测仍要 725px，会被切掉 —— 回到 1180。 少了两项带来的富余体现在 1181 以上更从容，不是把断点往下压。 */ @media (max-width:1180px){ /* 栏内只留 logo + 汉堡。链接、CTA 和语言切换移进抽屉 —— 塞在 72px 高的栏里 必然溢出，而且拇指够不着。 */ .bc-burger{display:grid} .bc-drawer{display:block} .bc-nav__links{display:none} .bc-nav__in{gap:var(--s-4)} .bc-nav__end{margin-left:auto} .bc-nav__end > .bc-btn,.bc-nav__end > .bc-lang{display:none} } @media (max-width:900px){ .bc-nav__logo{font-size:13px;letter-spacing:.22em} /* 微型标签的手机下限。9.5–10px 在 390 上读起来吃力，桌面不动。 只抬到 11px —— 目的是能读，不是把标签变成正文（BATCH 10 §字太小）。 */ :root{--fs-micro:11px} main .bc-tag,main .t-mono,main .wk-tag, main .hstate__k,main .ptier__k,main .ptier__go,main .ptier__badge, main .pg-tier__k,main .pg-badge, main .wk-proj__k,main .wk-flow__k,main .wk-lab__rows dt, main .asm__msg-meta,main .asm__step,main .hoff__k,main .qloop__who-c,main .pr__badge, main .in-status b,main .in-status i,main .in-sol span, main .hiw-fol__k span,main .hiw-mom__who b,main .hiw-met__k, main .sol-scene__record dt,main .asm__fields dt,main .ai__fields dt,main .spine__fields dt, main .aie-jn__c li,main .asm__tags .bc-tag,main .hiw-fol__caps li,main .lead__card span, main .pg-up__fit li,main .wk-stages li,main .sol-eyebrow span,main .pil-caps .cap-note, main .pil-caps li span,main .sol-caps li,main .morph__items li span, main .in-block .wk-stages li{ font-size:11px} } @media (max-width:390px){ .bc-nav__logo{font-size:12px;letter-spacing:.16em} } /* ── 1181–1360px 的导航栏 ──────────────────────────────────────────────── 汉堡在 ≤1180 接手，1181 往上恢复完整导航。但完整导航在这一段仍然很紧， 所以 CTA 缩成短标签、间距收紧，链接和语言切换都保住。 */ @media (min-width:1181px) and (max-width:1360px){ .bc-nav__in{gap:var(--s-4)} .bc-nav__links{gap:var(--s-5)} .bc-nav__links a,.bc-nav__trigger{font-size:10.5px;letter-spacing:.04em} .bc-nav__end{gap:var(--s-3)} .bc-nav__cta-long{display:none} .bc-nav__end > .bc-btn{padding-inline:16px} } /* ── BC THREAD：Hero → 下一章的连续几何（assets/js/bc-thread.js）──────── 全站共享的 Signature Motion Pattern（L-001）。一条 fixed 画布， z-index 3 —— 在场景背景之上、在 Hero 文案和人像之下， 所以它穿过明场景时压得住底色，却永远不会盖住脸和标题。 */ .bc-thread{position:fixed;inset:0;width:100%;height:100%; z-index:3;pointer-events:none;display:none} .bc-thread[data-on]{display:block} @media (prefers-reduced-motion:reduce){ .bc-thread{display:none!important} } /* ── 只给辅助技术读的内容 ────────────────────────────────────────────── 用 clip-path 裁切，不是 display:none —— 后者会把内容从可访问性树里 整个拿掉，那就违反 L-004 了。 */ .bc-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* ── 暗场景：在明场景里挖一块暗的回来 ──────────────────────────────── .scene--light 把语义 token 整组翻成暖白；这个把它们翻回去。 给「暖白版面里嵌一张深色卡」这种用法 —— 例如 Quality Loop 里那张 人像卡：照片本身是深色棚拍，放在 ivory 上会变成一块黑斑。 */ .scene--dark{ --ground:var(--void); --surface:var(--graphite); --surface-2:var(--glass); --t-hi:var(--ivory); --t-1:rgba(245,248,255,.86); --t-2:rgba(174,179,187,.80); --t-3:rgba(174,179,187,.56); --t-4:rgba(174,179,187,.38); --line-1:rgba(174,179,187,.22); --line-2:rgba(174,179,187,.13); --line-3:rgba(174,179,187,.07); --accent:var(--electric); --accent-soft:var(--arctic); --accent-wash:rgba(63,162,255,.10); --glow-sm:0 0 12px rgba(63,162,255,.28); --glow-md:0 0 26px rgba(63,162,255,.34), 0 0 60px rgba(109,184,255,.14); background:var(--ground);color:var(--t-1); } /* ══ 跨页面共用：明场景 token 与区块标题 ══════════════════════════════ */ /* ── 明场景：局部翻转语义 token，不改组件 ─────────────────────────────── */ .scene--light{ --ground:var(--ivory); --surface:#EFEBE1; --surface-2:#E6E1D6; --t-hi:#14171C; --t-1:rgba(20,23,28,.90); --t-2:rgba(20,23,28,.66); --t-3:rgba(20,23,28,.48); --t-4:rgba(20,23,28,.32); --line-1:rgba(20,23,28,.20); --line-2:rgba(20,23,28,.12); --line-3:rgba(20,23,28,.07); /* 暖白上的 accent 要压深：#2E7FE0 在 ivory 上只有 3.6:1，小字过不了 AA（KI-005）*/ --accent:#17569F; --accent-soft:#1A63B4; --accent-wash:rgba(31,111,208,.08); --glow-sm:0 0 10px rgba(31,111,208,.18); --glow-md:0 0 22px rgba(31,111,208,.20); background:var(--ground);color:var(--t-1); } .sec-head{max-width:none;margin-bottom:var(--s-8)} /* 区块标题比 Hero 小一档，容器按字数限，不按 ch —— 大写 Cormorant 很宽 */ .sec-head .t-h1{font-size:clamp(32px,4.4vw,64px);max-width:18ch} .sec-head .t-h2{max-width:20ch} .sec-head .t-lede{max-width:52ch} .sec-head .t-label{margin:0 0 var(--s-4)} .sec-head .t-lede{margin-top:var(--s-5)} a.inline{color:var(--accent-soft);text-decoration:underline;text-underline-offset:3px}