/* ============================================================ 有据科技 · ANCORA — 官网样式 v3 参考 Apple 的产品页语法：满幅影像、深色瓷砖、大字、极少的框线。 两层：官网（浅 / 官方） + 信任与合规（深 / 档案） 视角：佩戴者 ⇄ 组织，只换口径词，不动版式。 ============================================================ */ :root{ --bg:#ffffff; --alt:#f5f5f7; --ink:#1d1d1f; --sub:#6e6e73; --hair:rgba(0,0,0,.09); --hair-2:rgba(0,0,0,.16); --dark:#0a0a0b; --dark-2:#161618; --dark-ink:#f5f5f7; --dark-sub:#a1a1a6; --dark-hair:rgba(255,255,255,.12); --sans:"Inter","PingFang SC","Microsoft YaHei UI","Segoe UI",system-ui,sans-serif; --mono:ui-monospace,"Cascadia Mono","SFMono-Regular",Consolas,"Courier New",monospace; --maxw:1080px; --pad:clamp(20px,5vw,56px); --sec:clamp(84px,12vh,156px); --r:22px; } html[data-view="org"]{ --alt:#eceef0; } *{ box-sizing:border-box; margin:0; } html{ scroll-behavior:smooth; } body{ font-family:var(--sans); color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; line-height:1.5; } img{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; } .mono{ font-family:var(--mono); } /* 口径词 */ html[data-view="wearer"] .term > .c{ display:none; } html[data-view="org"] .term > .w{ display:none; } .term > .c{ font-family:var(--mono); } /* ============================ 顶栏 ============================ */ header{ position:fixed; top:0; left:0; right:0; z-index:60; height:50px; background:color-mix(in oklab, var(--bg) 72%, transparent); backdrop-filter:blur(20px) saturate(180%); border-bottom:1px solid var(--hair); transition:background .35s ease, border-color .35s ease, color .35s ease, opacity .5s ease; } .hwrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); height:50px; display:flex; align-items:center; gap:30px; } .brand{ display:flex; align-items:baseline; gap:9px; font-weight:600; font-size:15px; letter-spacing:.01em; } .brand small{ font-family:var(--mono); font-weight:500; font-size:8.5px; letter-spacing:.28em; color:var(--sub); } /* 徽标：环 + 点，描边取 currentColor —— 纸面上是黑的，落到开屏那片暗场里自动转白， 不用为两种底色各备一份资产 */ .brand .mark{ display:block; flex:none; width:21px; height:21px; align-self:center; margin-right:-2px; } nav.main{ display:flex; gap:clamp(14px,2vw,28px); font-size:12.5px; } nav.main a{ color:var(--ink); opacity:.82; white-space:nowrap; } nav.main a:hover{ opacity:1; } .hspace{ flex:1; } .viewsw{ display:flex; align-items:center; gap:2px; font-size:11.5px; } .viewsw button{ padding:5px 11px; border-radius:980px; color:var(--sub); } .viewsw button:hover{ color:var(--ink); } html[data-view="wearer"] .viewsw [data-set="wearer"], html[data-view="org"] .viewsw [data-set="org"]{ background:var(--ink); color:#fff; } .hbuy{ font-size:12.5px; font-weight:600; } .hburger{ display:none; width:16px; height:12px; position:relative; } .hburger::before,.hburger::after{ content:""; position:absolute; left:0; right:0; height:1.5px; background:var(--ink); } .hburger::before{ top:0; } .hburger::after{ bottom:0; } /* 顶栏压在开屏影像上。仅在 JS 可用时透明；否则保持实底，避免白字压白底。 */ html.js header{ background:transparent; backdrop-filter:none; border-bottom-color:transparent; color:#fff; } html.js header .brand small{ color:rgba(255,255,255,.62); } html.js header nav.main a{ color:#fff; } html.js header .viewsw button{ color:rgba(255,255,255,.72); } html.js header .viewsw button:hover{ color:#fff; } html.js header .hbuy{ color:#fff; } html.js header .hburger::before,html.js header .hburger::after{ background:#fff; } html.js[data-view="wearer"] header .viewsw [data-set="wearer"], html.js[data-view="org"] header .viewsw [data-set="org"]{ background:#fff; color:#000; } html.js header.solid{ background:color-mix(in oklab, var(--bg) 72%, transparent); backdrop-filter:blur(20px) saturate(180%); border-bottom-color:var(--hair); color:var(--ink); } html.js header.solid .brand small{ color:var(--sub); } html.js header.solid nav.main a,html.js header.solid .hbuy{ color:var(--ink); } html.js header.solid .viewsw button{ color:var(--sub); } html.js header.solid .viewsw button:hover{ color:var(--ink); } html.js header.solid .hburger::before,html.js header.solid .hburger::after{ background:var(--ink); } html.js[data-view="wearer"] header.solid .viewsw [data-set="wearer"], html.js[data-view="org"] header.solid .viewsw [data-set="org"]{ background:var(--ink); color:#fff; } /* 3D 接管开屏之后（html.stage3d，由 app.js 加）：上面那套白字只属于视频那一层。 舞台换成浅色，顶栏转深字，但保持透明 —— 不压出一条实底。滚过开屏 .solid 照旧。 */ html.js.stage3d header:not(.solid){ background:transparent; backdrop-filter:none; border-bottom-color:transparent; color:var(--ink); } html.js.stage3d header:not(.solid) .brand small{ color:var(--sub); } html.js.stage3d header:not(.solid) nav.main a, html.js.stage3d header:not(.solid) .hbuy{ color:var(--ink); } html.js.stage3d header:not(.solid) .viewsw button{ color:var(--sub); } html.js.stage3d header:not(.solid) .viewsw button:hover{ color:var(--ink); } html.js.stage3d header .hburger::before, html.js.stage3d header .hburger::after{ background:var(--ink); } html.js.stage3d[data-view="wearer"] header:not(.solid) .viewsw [data-set="wearer"], html.js.stage3d[data-view="org"] header:not(.solid) .viewsw [data-set="org"]{ background:var(--ink); color:#fff; } section[id]{ scroll-margin-top:64px; } /* ============================ 按钮 ============================ */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; font-size:14px; font-weight:500; padding:12px 24px; border-radius:980px; border:1px solid transparent; white-space:nowrap; transition:background .2s ease, opacity .2s ease; } .btn--dark{ background:var(--ink); color:#fff; } .btn--dark:hover{ opacity:.86; } .btn--light{ background:#fff; color:#000; } .btn--light:hover{ opacity:.9; } .btn--line{ border-color:var(--hair-2); } .btn--line:hover{ border-color:var(--ink); } .btn--darkline{ border-color:var(--dark-hair); color:var(--dark-ink); } .btn--darkline:hover{ border-color:#fff; } /* ============================ 分区 ============================ */ .band{ padding:var(--sec) 0; } .band--alt{ background:var(--alt); } .band--dark{ background:var(--dark); color:var(--dark-ink); } .band--tight{ padding:clamp(56px,8vh,104px) 0; } .inner{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); } h1{ font-size:clamp(40px,6.6vw,84px); line-height:1.02; letter-spacing:-.02em; font-weight:700; } h2{ font-size:clamp(30px,4.6vw,58px); line-height:1.08; letter-spacing:-.02em; font-weight:700; } h3{ font-size:clamp(19px,2vw,26px); font-weight:600; letter-spacing:-.01em; } .lede{ font-size:clamp(16px,1.5vw,19px); line-height:1.7; color:var(--sub); max-width:58ch; } .band--dark .lede{ color:var(--dark-sub); } .kicker{ font-size:12px; letter-spacing:.06em; color:var(--sub); } .band--dark .kicker{ color:var(--dark-sub); } .statement{ max-width:940px; } .statement h2{ max-width:24ch; } .statement .lede{ margin:24px 0 0; } /* ============================ 开屏 ============================ 开屏是一段独立的片子，不是首页的首屏内容（html.splash 期间整站都让位）： ① 视频满幅，画面上什么都没有；鼠标点一下跳过 ② 视频播完淡出 → 3D 接管（3d/index.html?embed=1，透明画布），走一遍五秒呈现 ③ 落到多色平铺之后，顶栏与文字一起进场 —— 这时才算进了首页 文字一律按浅色舞台配色（深字），落在画面中下部，五块表在中上部。 */ .hero{ position:relative; height:100vh; height:100svh; min-height:620px; overflow:hidden; background:var(--bg); color:var(--ink); } .hero video{ position:absolute; inset:0; z-index:2; width:100%; height:100%; object-fit:cover; object-position:center; background:#000; transition:opacity .9s ease; } /* 这里原来压着一层黑纱（.5 → .25 → .72），是给「视频上压白字」那版留的。 现在开屏片自己不带站内文字，那一层只是在已经偏暗的片子上再蒙一层， 整屏发闷 —— 去掉。文字进场要托底靠的是下面那层白纱（.hero-veil）。 */ html.js .hero.taken video{ opacity:0; } /* 3D 那一层：满幅。视频播完淡入，五块表直接铺在这个官网页面上（顶栏一起露出来）。 iframe 是替换元素：宽高必须写死，只给 top/bottom 会退回 300×150 的默认尺寸。 */ .hero-3d{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; border:0; opacity:0; pointer-events:none; transition:opacity 1.1s ease; } html.js .hero.taken .hero-3d{ opacity:1; } /* 白纱：极淡的一层，不是一块白。顶上只给顶栏一点托底，中间几乎全开让五块表露出来， 最底下到文字那一段才轻轻提一点白 —— 够深字压得住就行。 */ .hero-veil{ position:absolute; inset:0; z-index:4; opacity:0; pointer-events:none; transition:opacity 1s ease; background:linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 12%, rgba(255,255,255,0) 60%, rgba(255,255,255,.3) 80%, rgba(255,255,255,.48) 100%); } /* 文字：居中一栏，靠下（justify-content:flex-end 让它的下沿固定， 文字变多只会往上长，不会把版心顶跑） */ .hero-in{ position:relative; z-index:5; height:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad) clamp(74px,10vh,116px); display:flex; flex-direction:column; align-items:center; justify-content:flex-end; text-align:center; } .hero .kicker{ color:var(--sub); margin-bottom:18px; } /* 开屏标题比站内 h1 收一号：这一屏要同时让出画面给五块表 */ .hero h1{ color:var(--ink); font-size:clamp(34px,5.2vw,66px); } .hero-sub{ margin-top:22px; font-size:clamp(16px,1.7vw,21px); line-height:1.6; color:var(--sub); max-width:38ch; } .hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; justify-content:center; } .hero-meta{ position:absolute; left:0; right:0; bottom:0; z-index:5; border-top:1px solid var(--hair); } .hero-meta .inner{ display:flex; flex-wrap:wrap; gap:16px 40px; padding-top:16px; padding-bottom:16px; font-size:12px; color:var(--sub); justify-content:center; } /* 白纱与文字：只认 .titled。没有 JS 时这个类不会出现，就按静态首屏显示文字 */ html.js .hero-in, html.js .hero-meta{ opacity:0; visibility:hidden; pointer-events:none; transform:translateY(10px); transition:opacity 1s ease, transform 1s ease, visibility 0s linear 1s; } html.js .hero.titled .hero-veil{ opacity:1; } html.js .hero.titled .hero-in, html.js .hero.titled .hero-meta{ opacity:1; visibility:visible; pointer-events:auto; transform:none; transition:opacity 1s ease, transform 1s ease, visibility 0s; } /* 开屏期间：视频那一段整站让位。 splash = 顶栏藏起来；locked = 页面不滚（五秒呈现途中也不许滚跑）。 3D 一接管就去掉 splash —— 顶栏露出来，这一屏就是官网页面的样子； 落到平铺、文字进场时再去掉 locked。 */ html.js.splash header{ opacity:0; pointer-events:none; } html.js.locked, html.js.locked body{ overflow:hidden; } /* ============================ 影片 ============================ 这一屏只有一条：满幅影像 + 一枚细圈播放键。没有标题、没有说明、没有出品行 —— 跟大疆、Apple 的影片位一样，画面自己说话。上下各留的是相邻分区的间距， 所以它看上去是「两段内容之间的一整条影像」，而不是页面里的一个组件。 仍然不自动播、不预载：点了才加载整段。 */ .film-band{ background:var(--dark); } .film{ position:relative; width:100%; aspect-ratio:16 / 9; overflow:hidden; background:var(--dark); } /* 源片本身就是 16:9（1280×720），盒子按同一比例走，所以画面永远铺满、不裁也不留边。 这里原来挂着 max-height:min(80vh,860px)：宽屏上盒子被压到 2.5:1，比片子扁得多， 再配 object-fit:cover 就把画面上下各切掉一截（1920×950 上只剩 70% 的画面）。 片子位就该让画面说话 —— 宁可这一条比视口高一点、滚一屏，也不动它一寸。 */ .film video{ display:block; width:100%; height:100%; object-fit:contain; object-position:center; background:transparent; transition:transform 1.2s cubic-bezier(.2,.7,.2,1), filter .6s ease; } /* 静帧先压一档（暗一点、淡一点）：像片子自己的一格，细圈才立得住。 播起来就交还给原片。 */ .film:not(.on) video{ filter:contrast(1.05) saturate(.9) brightness(.9); } .film:not(.on):hover video{ transform:scale(1.025); } /* 没播的时候再压一层很浅的暗；播起来就撤掉 */ .film::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.22) 55%, rgba(0,0,0,.36) 100%); transition:opacity .5s ease; } .film.on::after{ opacity:0; } .film-play{ position:absolute; left:50%; top:50%; z-index:1; transform:translate(-50%,-50%); width:clamp(74px,6.6vw,98px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center; color:#fff; border:1px solid rgba(255,255,255,.55); background:rgba(255,255,255,.07); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:transform .35s ease, background .35s ease, border-color .35s ease, opacity .4s ease; } .film-play svg{ width:14px; height:17px; fill:currentColor; margin-left:4px; } .film-play:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.9); transform:translate(-50%,-50%) scale(1.06); } .film-play:focus-visible{ outline:2px solid #fff; outline-offset:5px; } .film.on .film-play{ opacity:0; pointer-events:none; } /* ============================ 瓷砖 ============================ */ .tiles{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .tile{ position:relative; border-radius:var(--r); overflow:hidden; min-height:540px; padding:clamp(28px,3.2vw,52px); display:flex; flex-direction:column; } .tile--dark{ background:var(--dark); color:var(--dark-ink); } .tile--light{ background:var(--alt); color:var(--ink); } .tile .kicker{ margin-bottom:16px; } .tile h3{ font-size:clamp(24px,2.8vw,38px); } .tile p{ margin-top:16px; font-size:15px; line-height:1.7; max-width:34ch; opacity:.82; } .tile .link{ margin-top:22px; font-size:14px; font-weight:600; } .tile .link::after{ content:" →"; } .tile .art{ margin-top:auto; padding-top:34px; } .tile--light .art{ background:#fff; border-radius:16px; height:320px; overflow:hidden; padding-top:0; } .tile--light .art img{ width:100%; height:100%; object-fit:cover; object-position:center; border-radius:0; } .glossary{ margin-top:clamp(40px,6vh,64px); padding-top:26px; border-top:1px solid var(--hair); display:flex; flex-wrap:wrap; align-items:baseline; gap:12px 20px; } .glossary p{ font-size:15px; color:var(--sub); } .glossary .term .w,.glossary .term .c{ color:var(--ink); font-weight:600; } .mock{ border:1px solid var(--dark-hair); border-radius:14px; overflow:hidden; font-family:var(--mono); font-size:11.5px; } .mock .row{ display:flex; justify-content:space-between; gap:14px; padding:12px 15px; border-bottom:1px solid var(--dark-hair); color:var(--dark-sub); } .mock .row:last-child{ border-bottom:0; } .mock .row b{ color:#fff; font-weight:500; } .mock .row .ok{ color:#cfe3d6; } /* ============================ 能力 ============================ */ .caps{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 clamp(24px,4vw,56px); } .cap{ padding:34px 0 34px; border-top:1px solid var(--hair); } .band--dark .cap{ border-color:var(--dark-hair); } .cap .n{ font-family:var(--mono); font-size:12px; color:var(--sub); } .band--dark .cap .n{ color:var(--dark-sub); } .cap h3{ margin-top:16px; font-size:20px; } .cap p{ margin-top:10px; font-size:14px; line-height:1.7; color:var(--sub); } .band--dark .cap p{ color:var(--dark-sub); } .caps-note{ margin-top:56px; font-size:clamp(20px,2.4vw,30px); font-weight:600; letter-spacing:-.01em; } /* ============================ 交互演示 ============================ */ .demo-grid{ display:grid; grid-template-columns:minmax(180px,.66fr) 1.55fr; gap:clamp(24px,4vw,64px); align-items:start; } .steplist{ list-style:none; display:grid; } .steplist button{ display:flex; gap:14px; align-items:baseline; width:100%; text-align:left; padding:15px 0; border-top:1px solid var(--dark-hair); color:var(--dark-sub); transition:color .2s ease; } .steplist li:last-child button{ border-bottom:1px solid var(--dark-hair); } .steplist .n{ font-family:var(--mono); font-size:11px; } .steplist .t{ font-size:14px; } .steplist button:hover{ color:var(--dark-ink); } .steplist button.on{ color:#fff; } .steplist button.on .t{ font-weight:600; } .panel{ display:none; } .panel.on{ display:block; animation:fade .45s ease; } @keyframes fade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } } .screen{ border:1px solid var(--dark-hair); border-radius:18px; background:var(--dark-2); padding:clamp(26px,3vw,44px); min-height:360px; display:flex; flex-direction:column; } .screen .s-no{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--dark-sub); } .screen h3{ margin:22px 0 14px; font-size:clamp(20px,2.2vw,28px); color:#fff; } .screen p{ color:var(--dark-sub); font-size:14px; line-height:1.75; max-width:52ch; } .screen .line{ margin-top:auto; padding-top:24px; font-family:var(--mono); font-size:12px; line-height:1.9; color:#cfe3d6; border-top:1px solid var(--dark-hair); } .screen .line b{ color:#fff; font-weight:500; } .demo-ctrl{ display:flex; align-items:center; gap:18px; margin-top:20px; font-size:12.5px; color:var(--dark-sub); } .demo-ctrl .bar{ flex:1; height:2px; background:var(--dark-hair); position:relative; overflow:hidden; } .demo-ctrl .bar i{ position:absolute; left:0; top:0; height:100%; width:0; background:#fff; transition:width .4s ease; } .demo-ctrl button{ padding:6px 15px; border:1px solid var(--dark-hair); border-radius:980px; font-size:12px; color:var(--dark-ink); } .demo-ctrl button:hover{ border-color:#fff; } /* ============================ 一次派单（四段实拍） ============================ 滑动式：每段占一屏宽，当前那屏在中间，其余的在两侧（隐不越界）。 播完一段自动滑到下一段并继续播，不需要按播放键。 细节：一段只有一个