/* ═══════════════════════════════════════════════════════════ site-v2.css — 首頁視覺語言（2026-08-26） 比例規則內化自 evpin.com 量測結果： 標題 600 / −0.02em、行高隨字級收緊、按鈕 38px 藥丸 500、 眉標灰底藥丸、零陰影、具名轉場、彩色只用在關鍵處。 只有 index.html 載入；pricing/about 仍走 site.css。 ═══════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════ 新版視覺語言 — 從 evpin.com 量測後內化的比例規則 ① 標題 600 / −0.022em / 行高隨字級收緊 ② 大的更大、小的更小（60px 對 14px） ③ 眉標＝灰底藥丸　④ 按鈕 38px 藥丸 500 ⑤ 零陰影　⑥ 具名轉場 .15/.2/.3s ══════════════════════════════════════════════════ */ :root{ --nv-ink:#14161c; --nv-ink2:#4a4f5b; --nv-mut:#6f7583; --nv-bg:#f4f2ec; --nv-line:rgba(20,25,40,.11); --nv-line2:rgba(20,25,40,.06); --nv-accent:#2563eb; --nv-ease:cubic-bezier(.4,0,.2,1); } body{background:var(--nv-bg);color:var(--nv-ink)} .nv-wrap{max-width:1200px;margin:0 auto;padding:0 32px} .nv-center{text-align:center} /* ── 字級系統 ── */ .nv-h1{font-size:60px;font-weight:600;letter-spacing:-.028em;line-height:1.02;margin:0;color:var(--nv-ink)} .nv-h2{font-size:44px;font-weight:600;letter-spacing:-.024em;line-height:1.08;margin:18px 0 0;color:var(--nv-ink);text-wrap:balance} .nv-sub{margin:20px 0 0;font-size:16px;line-height:1.65;color:var(--nv-ink2);max-width:25em;text-wrap:balance} .nv-p{margin:16px auto 0;font-size:15px;line-height:1.62;color:var(--nv-mut);max-width:31em;text-wrap:balance} /* ── 眉標：灰底藥丸（取代大寫藍字） ── */ .nv-pill{display:inline-block;font-size:12.5px;font-weight:500;letter-spacing:0;color:var(--nv-ink2); background:rgba(20,25,40,.055);border-radius:99px;padding:5px 13px 4px;line-height:1.4} /* ── 按鈕：38px 藥丸、500、零陰影 ── */ .nv-btn{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 19px; border-radius:99px;font-size:14px;font-weight:500;letter-spacing:-.004em;text-decoration:none; border:1px solid transparent;cursor:pointer;white-space:nowrap; transition:background-color .15s var(--nv-ease),color .15s var(--nv-ease),border-color .15s var(--nv-ease)} .nv-btn-solid{background:var(--nv-ink);color:#fff} .nv-btn-solid:hover{background:#2b2f3a} .nv-btn-ghost{background:transparent;color:var(--nv-ink);border-color:var(--nv-line)} .nv-btn-ghost:hover{border-color:var(--nv-ink)} /* ══ HERO ══ */ .nv-hero{position:relative;height:94vh;min-height:640px;max-height:900px;overflow:hidden;background:#eceef0} .nv-taphint{display:none} /* 桌機用 .nv-hint 那組游標動畫，不需要這顆 */ .nv-hero #demoMap{position:absolute;inset:0;z-index:1} .nv-hero-veil{position:absolute;inset:0;pointer-events:none;z-index:2; background:linear-gradient(96deg,rgba(244,242,236,.97) 0%,rgba(244,242,236,.92) 34%,rgba(244,242,236,.45) 56%,rgba(244,242,236,0) 72%)} .nv-hero-in{position:absolute;inset:0;display:flex;align-items:center;z-index:3;pointer-events:none} .nv-hero-copy{max-width:min(560px,46vw)} .nv-hero-copy a{pointer-events:auto} .nv-badge{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500; color:var(--nv-ink2);background:rgba(255,255,255,.86);border:1px solid var(--nv-line); border-radius:99px;padding:5px 14px 4px;margin-bottom:26px;backdrop-filter:blur(6px)} .nv-dot{width:6px;height:6px;border-radius:50%;background:var(--nv-accent);flex:none} .nv-ctas{display:flex;gap:10px;margin-top:30px} .nv-facts{list-style:none;margin:34px 0 0;padding:0;display:flex;flex-direction:column;gap:10px} .nv-facts li{display:flex;align-items:center;gap:9px;font-size:13.5px;line-height:1.5;color:var(--nv-ink2)} .nv-facts i{font-size:15px;color:var(--nv-accent);flex:none} .nv-scroll{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:4; font-size:10px;font-weight:500;letter-spacing:.18em;color:rgba(20,25,40,.34)} /* ══ 信任帶：無框、只有數字與髮絲線 ══ */ .nv-trust{padding:96px 0;background:#fff;border-bottom:1px solid var(--nv-line2)} .nv-trust-lead{margin:0 0 30px;font-size:12.5px;font-weight:500;color:var(--nv-mut)} .nv-stats{display:grid;grid-template-columns:repeat(3,1fr)} .nv-stat{padding:0 34px;border-left:1px solid var(--nv-line2)} .nv-stat:first-child{border-left:none;padding-left:0} .nv-stat:last-child{padding-right:0} .nv-stat-n{font-size:46px;font-weight:600;letter-spacing:-.028em;line-height:1;color:var(--nv-ink); font-variant-numeric:proportional-nums lining-nums} .nv-stat-n em{font-style:normal;font-size:20px;font-weight:500;margin-left:3px;letter-spacing:-.01em} .nv-stat-l{margin-top:13px;font-size:14px;font-weight:500;line-height:1.55;color:var(--nv-ink2);text-wrap:balance} .nv-stat-l span{font-size:12.5px;font-weight:400;color:var(--nv-mut)} /* ══ 內容區塊 ══ */ .nv-sec{padding:128px 0} /* 分頁動畫：扁平化、去陰影、縮小 */ .nv-stage{position:relative;min-height:150px;margin-top:52px} .nv-tab{position:absolute;display:inline-flex;align-items:center;gap:6px;background:#fff; border:1px solid var(--nv-line2);border-radius:8px;padding:6px 11px 5px;font-size:12px;font-weight:500; color:var(--nv-mut);transition:transform .5s var(--nv-ease),opacity .5s var(--nv-ease)} .nv-tab i{font-size:12px;color:rgba(20,25,40,.3)} .nv-stage.merged .nv-tab{left:50%!important;top:58px!important; transform:translateX(-50%) scale(.42) rotate(var(--rr));opacity:0} .nv-one{position:absolute;left:50%;top:46px;transform:translateX(-50%) translateY(8px);opacity:0; display:inline-flex;align-items:center;gap:11px;background:var(--nv-ink);color:#fff;border-radius:99px; padding:12px 24px 11px;font-size:14px;font-weight:500;letter-spacing:-.006em;white-space:nowrap; transition:opacity .4s 1.35s var(--nv-ease),transform .4s 1.35s var(--nv-ease)} .nv-one img{height:15px;filter:brightness(0) invert(1)} .nv-one em{font-style:normal} .nv-stage.merged .nv-one{opacity:1;transform:translateX(-50%) translateY(0)} .nv-replay{position:absolute;right:0;top:-8px;border:none;background:transparent;color:var(--nv-mut); font-family:inherit;font-size:12.5px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:5px; transition:color .15s var(--nv-ease)} .nv-replay:hover{color:var(--nv-ink)} /* 進場：純淡入 .4s，不位移 */ .nv-fade{opacity:0;transition:opacity .4s var(--nv-ease)} .nv-fade.in{opacity:1} @media(max-width:900px){ .nv-wrap{padding:0 20px} .nv-hero{height:auto;min-height:0;max-height:none} .nv-hero{--mapH:58vh} .nv-hero #demoMap{position:relative;height:var(--mapH);min-height:380px;inset:auto} .nv-hero-veil{display:none} .nv-hero-in{position:relative;inset:auto;padding:88px 0 30px} .nv-hero-copy{max-width:none} .nv-h1{font-size:38px} .nv-h2{font-size:29px} .nv-sub{font-size:15px} .nv-scroll{display:none} .nv-stats{grid-template-columns:1fr;gap:46px} /* 三塊之間拉開 */ .nv-stat-l{margin-top:7px} /* 數字與說明收緊 */ .nv-stat{border-left:none;padding:0} .nv-stat-n{font-size:38px} .nv-sec{padding:80px 0} .nv-trust{padding:64px 0} } @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* ══════════ 導覽列 ══════════ */ .nv-nav{position:fixed;top:0;left:0;right:0;z-index:50;background:transparent; border-bottom:1px solid transparent;transition:background-color .2s var(--nv-ease),border-color .2s var(--nv-ease)} .nv-nav.solid{background:rgba(244,242,236,.9);backdrop-filter:blur(14px);border-bottom-color:var(--nv-line2)} .nv-nav-in{display:flex;align-items:center;gap:28px;height:62px} .nv-logo{margin-right:auto;display:flex;align-items:center} .nv-logo img{height:19px} .nv-nlink{font-size:14px;font-weight:500;color:var(--nv-ink2);text-decoration:none; transition:color .15s var(--nv-ease)} .nv-nlink:hover{color:var(--nv-ink)} .nv-nlink-on{color:var(--nv-ink);font-weight:600} .nv-btn-sm{height:34px;padding:0 15px;font-size:13.5px} .nv-btn-lg{height:44px;padding:0 24px;font-size:15px} /* ══════════ 通用：純色區塊 ══════════ */ .nv-sec-plain{padding:128px 0;background:var(--nv-bg)} .nv-h2-left{margin-top:14px;text-wrap:initial} /* 瀏覽器外框（照 EVpin 把產品畫面裱起來） */ .nv-frame{margin-top:46px;border-radius:12px;overflow:hidden;background:#20242c; border:1px solid rgba(20,25,40,.14)} .nv-frame-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 13px;background:#2a2f38} .nv-frame-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22)} .nv-frame-bar i:first-child{background:#ff5f57} .nv-frame-bar i:nth-child(2){background:#febc2e} .nv-frame-bar i:nth-child(3){background:#28c840} .nv-frame .pl-demo{margin-top:0!important;border-radius:0!important;border:none!important} /* ══════════ 基地分析卡：深色區塊的新版排版 ══════════ */ .nv-demo{padding:150px 0 128px!important} .nv-demo .nv-pill{background:rgba(255,255,255,.09);color:rgba(255,255,255,.74)} .nv-demo .nv-h2{color:#fff} .nv-demo .nv-p{color:rgba(255,255,255,.6)} .nv-demo .wrap{max-width:1200px;padding:0 32px} /* 分段控制器：EVpin 式扁平藥丸 */ .nv-demo .dtabs{background:rgba(255,255,255,.07);border:none;border-radius:99px;padding:4px; margin:38px auto 30px;backdrop-filter:none} .nv-demo .dtabs button{font-size:13px;font-weight:500;padding:8px 17px 7px;border-radius:99px; color:rgba(255,255,255,.62); transition:background-color .15s var(--nv-ease),color .15s var(--nv-ease)} .nv-demo .dtabs button.on{background:#fff;color:#14161c} /* ══════════ 六卡 ══════════ */ .nv-rail{padding:128px 0 104px!important;background:var(--nv-bg)} .nv-rail .wrap{max-width:1320px;padding:0 32px} .nv-rail .rail-head{display:flex;align-items:flex-end;justify-content:space-between} .nv-rail .rail{margin-top:44px;gap:16px;padding:2px 2px 18px} .nv-rail .rc{flex:0 0 396px;border-radius:12px;border:1px solid var(--nv-line2); box-shadow:none;background:#fff; transition:border-color .2s var(--nv-ease),transform .2s var(--nv-ease)} .nv-rail .rc:hover{border-color:rgba(20,25,40,.18);transform:translateY(-2px)} .nv-rail .rc .shot{height:264px;border-bottom:1px solid var(--nv-line2)} .nv-rail .rc .body{padding:17px 19px 19px} .nv-rail .rc h3{font-size:16px;font-weight:600;letter-spacing:-.012em;color:var(--nv-ink)} .nv-rail .rc p{margin-top:7px;font-size:13px;line-height:1.6;color:var(--nv-mut)} .nv-rail .rc .zoomtag{font-size:10px;font-weight:500;border-radius:6px;padding:4px 8px 3px; background:rgba(13,16,23,.7);letter-spacing:0} .nv-rail .rail-nav{gap:7px} .nv-rail .rail-nav button{width:34px;height:34px;border:1px solid var(--nv-line);background:#fff; color:var(--nv-ink2);transition:border-color .15s var(--nv-ease),color .15s var(--nv-ease)} .nv-rail .rail-nav button:hover{border-color:var(--nv-ink);color:var(--nv-ink)} .nv-rail .rail-nav i{font-size:14px} /* ══════════ fear：敘事節奏 ══════════ */ .nv-fear{position:relative;background:#0a0b0e;padding:160px 0 150px;overflow:hidden} .nv-fear-glow{position:absolute;left:50%;top:-10%;width:900px;height:560px;transform:translateX(-50%); pointer-events:none;background:radial-gradient(ellipse at center,rgba(70,96,150,.20),transparent 68%)} .nv-fear-in{position:relative;z-index:2} .nv-pill-dark{background:rgba(255,255,255,.08);color:rgba(255,255,255,.72)} .nv-h2-dark{color:#fff} .nv-story{max-width:30em;margin:40px auto 0} .nv-story p{margin:0 0 22px;font-size:16px;line-height:1.85;color:rgba(255,255,255,.5)} .nv-story p.hi{color:#fff;font-weight:500;font-size:17px;letter-spacing:-.012em;margin:30px 0 30px} .nv-story p:last-child{margin-bottom:0} .nv-ctas-center{justify-content:center;margin-top:44px} .nv-btn-white{background:#fff;color:#14161c} .nv-btn-white:hover{background:rgba(255,255,255,.88)} .nv-btn-ghost-dark{background:transparent;color:rgba(255,255,255,.86);border-color:rgba(255,255,255,.22)} .nv-btn-ghost-dark:hover{border-color:rgba(255,255,255,.6);color:#fff} /* ══════════ 結尾 CTA ══════════ */ .nv-end{background:#fff;padding:140px 0 132px;text-align:center} .nv-h2-end{margin-top:0} .nv-end .nv-p{margin-top:20px} .nv-end-meta{margin:34px 0 0;font-size:12.5px;color:var(--nv-mut)} /* ══════════ footer ══════════ */ .nv-foot{background:#fff;border-top:1px solid var(--nv-line2);padding:34px 0 42px} .nv-foot-in{display:flex;align-items:center;gap:22px;flex-wrap:wrap} .nv-foot-l{display:flex;align-items:center;gap:10px;margin-right:auto} .nv-foot-l img{height:16px} .nv-foot-l span{font-size:13px;font-weight:500;color:var(--nv-ink2)} /* site.css 有 nav{position:fixed;top:0;left:0} 的元素選擇器 —— footer 裡的