/* ===== 外銷實驗室 · 全站設計系統（官網藍青）===== 一處維護、全站一致。深區塊=深藍墨，淺區塊=淺藍灰白，重點=亮青 #4fd8ea。 色票來源：exportlab.tw Elementor 全域色（#1f597e / #5c85a1 / #3aa6b9）。 */ :root{ /* 深區塊 */ --ink0:#070c12;--ink1:#0a1620;--ink2:#0d1f2e;--ink-deep:#050a0f; /* 淺區塊 */ --paper:#eef4f6;--paper2:#e2ecf0; /* 品牌 */ --navy:#1f597e;--slate:#454f5e;--steel:#5c85a1;--teal:#3aa6b9;--hot:#4fd8ea; --ice:#cae6e8;--ice2:#e9f8f9; /* 文字 */ --cream:#f4fafc;--cream-dim:#b9cdd8;--dark:#1b2b38;--dark-dim:#516575; --line:rgba(200,230,232,.12);--line-d:rgba(28,43,56,.12); --h1:clamp(2.7rem,7vw,5.4rem);--h2:clamp(1.6rem,3.4vw,2.5rem);--lead:clamp(1.05rem,1.7vw,1.35rem); --maxw:1200px;--rad:16px; --font:"Noto Sans TC","PingFang TC","Microsoft JhengHei",-apple-system,sans-serif; --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} /* 根字級（2026-09-03 Freddy 拍板「字級放入」）：正式站正文 18px，這套原本沒設＝16px，老闆看會覺得小。 桌機 18、手機 17。用 html:root 而不是 html——正式站的 Seraphinite 合併 CSS 會把同名選擇器去重， 只留 Astra 那條（memory reference_wp_landing_theme_conflicts）。 */ html:root{font-size:17px} @media(min-width:1100px){html:root{font-size:18px}} body{font-family:var(--font);background:var(--ink0);color:var(--cream);line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,48px)} a{color:inherit;text-decoration:none} section{position:relative} img{max-width:100%} /* reveal — 只有在 JS 有跑（span{display:inline-block;transition:transform 1s cubic-bezier(.2,.75,.15,1)} .js .rise>span{transform:translateY(115%)} .on .rise>span{transform:none} /* header */ header.site{position:fixed;top:0;left:0;right:0;z-index:50;backdrop-filter:blur(10px);background:linear-gradient(rgba(7,12,18,.92),rgba(7,12,18,.42));border-bottom:1px solid var(--line)} .nav{display:flex;align-items:center;justify-content:space-between;height:84px} .logo{display:flex;align-items:center;gap:10px;font-weight:800} .logo .mark{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:linear-gradient(135deg,var(--ice2),var(--teal));color:#04222b;font-size:16px} .logo small{display:block;font-size:.62rem;letter-spacing:.28em;color:var(--cream-dim);font-weight:600} .logo-img{height:56px;width:auto;display:block} .nav .links{display:flex;gap:30px;align-items:center;font-size:1.06rem;font-weight:600;color:var(--cream-dim)} .nav .links a:hover,.nav .links a.on{color:var(--hot)} .nav-cta{padding:12px 24px;border-radius:999px;background:linear-gradient(135deg,var(--hot),var(--teal));color:#04222b;font-weight:700;font-size:1rem} /* 手機選單（2026-09-03 Freddy：新版手機沒有漢堡、觀眾無法去其他頁）： ≤760px 把 .links 變成頁首下方的下拉面板，漢堡鈕（三條線，純 CSS）在 LINE 鈕右邊； 開關靠 header.site.open（script 在各頁
尾巴）。桌機一律不顯示漢堡。 */ .burger{display:none} @media(max-width:760px){ .nav{gap:10px} .nav .logo{margin-right:auto} .nav .links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0; background:rgba(7,12,18,.97);border-bottom:1px solid var(--line);padding:6px 0 10px;font-size:1.12rem; box-shadow:0 24px 40px -20px rgba(0,0,0,.8)} header.site.open .links{display:flex} .nav .links a{padding:15px clamp(20px,5vw,48px);border-top:1px solid var(--line)} .nav .links a:first-child{border-top:0} .burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0 11px;flex:0 0 auto; border:1px solid rgba(244,250,252,.22);border-radius:12px;background:rgba(200,230,232,.06);cursor:pointer; -webkit-tap-highlight-color:transparent} .burger span{display:block;height:2px;border-radius:2px;background:var(--cream);transition:transform .25s,opacity .2s} header.site.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)} header.site.open .burger span:nth-child(2){opacity:0} header.site.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .nav-cta{padding:11px 18px;font-size:.95rem;white-space:nowrap} } /* 2026-07-30：nav 對齊正式站尺寸（Freddy 錄影指出 logo 與選單字「超級無敵小」）。 正式站 .custom-logo-link img = 170px 寬（比例 1024/351 → 58px 高）、選單字明顯較大。 本檔改：logo-img 34→56px、nav 高 66→84px、選單 .92→1.06rem 加粗、CTA .9→1rem。 ⚠️ site.css 是共用檔，首頁 home_v1_full.html 的 nav 也會一起變大（一致性，刻意）。 */ /* buttons */ .btn{padding:16px 30px;border-radius:999px;font-weight:800;font-size:1.02rem;display:inline-flex;align-items:center;gap:9px;transition:transform .2s,box-shadow .2s} .btn.primary{background:linear-gradient(135deg,var(--hot),var(--teal));color:#04222b;box-shadow:0 14px 40px -12px rgba(79,216,234,.6)} .btn.primary:hover{transform:translateY(-2px);box-shadow:0 20px 48px -12px rgba(79,216,234,.75)} .btn.ghost{border:1px solid rgba(244,250,252,.25);color:var(--cream)} .btn.ghost:hover{border-color:var(--hot);color:var(--hot)} .btn.dark{background:var(--navy);color:#fff}.btn.dark:hover{background:#24688f} .cta-row{display:flex;flex-wrap:wrap;gap:14px} /* section head 2026-08-22：`48ch` 是相對 .sec-head 自己的 16px（=426px），大標卻是 40-45px， 每行只放得下 9 個中文字，長標題被切成三行、斷點還會拆開語意。 改成標題用 em（跟著自己的字級走）、說明文才用 ch，兩者各有正確的行寬。 */ .sec-head{max-width:none;margin:0 auto 60px;text-align:center} .sec-kicker{font-size:.98rem;letter-spacing:.14em;color:var(--teal);font-weight:800;margin-bottom:18px} .sec-head h2{font-size:var(--h2);font-weight:900;line-height:1.3;color:var(--cream);max-width:16em;margin-inline:auto; /* balance：多行標題自動把各行拉成等長，中文沒有詞界，不加的話會出現「…為什麼／買家問的是別人？」這種斷在語意中間的行。 pretty：避免段落最後一行只剩一兩個字（孤字）。不支援的瀏覽器會忽略，退回現狀，無風險。 */ text-wrap:balance} .sec-head p{color:var(--cream-dim);margin-top:14px;font-size:1.05rem;max-width:54ch;margin-inline:auto} /* ⚠️ 中文段落不要 text-wrap:pretty：Safari 的 pretty 會把每行縮短來「齊尾」，中文本來就每行填滿，開了反而參差（2026-09-03 iPhone 實見）。 */ .light .sec-kicker{color:var(--navy)}.light .sec-head h2{color:var(--dark)}.light .sec-head p{color:var(--dark-dim)} /* ===== HERO ===== */ .hero{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;overflow:hidden;padding:66px 0 0} .hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden} .sky{position:absolute;inset:0;background: radial-gradient(115% 74% at 50% 120%,rgba(58,166,185,.24),transparent 52%), radial-gradient(78% 58% at 82% 10%,rgba(31,89,126,.30),transparent 60%), linear-gradient(180deg,#050a0f,#081420 55%,#0a1c2a)} .glowbottom{position:absolute;left:-15%;right:-15%;bottom:-32%;height:70%;background:radial-gradient(56% 100% at 50% 100%,rgba(79,216,234,.34),rgba(31,89,126,.14) 46%,transparent 72%);filter:blur(8px)} .vignette{position:absolute;inset:0;background:radial-gradient(58% 52% at 50% 46%,rgba(5,10,15,.72),transparent 72%)} .routes{position:absolute;inset:0;width:100%;height:100%} /* 2026-09-05：航線改成兩顆靜態 svg（桌機取景 .desk 0 0 1200 740／手機取景 .mob 700 80 460 620），用 media query 切， 不再靠 JS 改 viewBox；漸層與濾鏡的 放在獨立的 0×0 svg 讓兩顆共用（display:none 的 svg 裡的 defs Safari 會抓不到）。 理由：正式站 Seraphinite 把所有 script 延到第一次互動／3 秒後才跑，手機重新整理後 Hero 先光禿禿、三秒後星塵點雲冒出來、 構圖從桌機取景跳成手機取景（Freddy：「背景動畫會跑掉」）。星塵與點雲同樣在 build 時寫成靜態（lab_content._static_hero）。 */ .routes.mob{display:none} .routes-defs{position:absolute;width:0;height:0;overflow:hidden} .stars{position:absolute;inset:0} .star{position:absolute;border-radius:50%;background:#d7f0f5;box-shadow:0 0 6px rgba(150,220,235,.6);animation:tw var(--d,5s) ease-in-out infinite} @keyframes tw{0%,100%{opacity:.12}50%{opacity:.85}} .route{fill:none;stroke:url(#arcN);stroke-linecap:round;filter:url(#glowN); /* 航線畫出改純 CSS：path 帶 pathLength="1"，dash 1→offset 1→0；--i 由 build 寫在每條 path 上（原 JS 是 i*.28s）。 用 longhand 不用簡寫：簡寫的兩個時間值順序寫錯 delay 會被吃掉（memory reference_svg_logo_animation）。 */ stroke-dasharray:1;stroke-dashoffset:1;animation-name:draw;animation-duration:3s;animation-timing-function:cubic-bezier(.3,.7,.2,1); animation-delay:calc(var(--i,0)*.28s);animation-fill-mode:forwards} @keyframes draw{to{stroke-dashoffset:0}} /* 2026-09-03 效能：.flow 是一直在動的元素，SVG 濾鏡在 WebKit（iPhone／Mac Safari）是 CPU 軟體算圖， Playwright WebKit 實量每幀 182ms、p90 422ms＝「打開像當機、航線像掉幀」。拿掉濾鏡回到 16.7ms 滿幀。 光暈改用較粗、半透明的描邊自己扮（stroke-width 2.6 + opacity），Chrome 看起來幾乎一樣。 */ .flow{fill:none;stroke:#9ddcea;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:2 160;animation:flow 3.2s linear infinite;opacity:.8} @keyframes flow{to{stroke-dashoffset:-162}} .oglow{animation:opulse 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center} @keyframes opulse{0%,100%{opacity:.5;transform:scale(.9)}50%{opacity:.82;transform:scale(1.1)}} .twpin{animation:twp 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center} @keyframes twp{0%,100%{opacity:.8}50%{opacity:1}} .city{fill:#bfe4ea}.clabel{fill:#cfe8ee;font-family:var(--font);font-size:14px;font-weight:700} .hero-copy{position:relative;z-index:4;max-width:900px;padding:0 24px} .eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:.8rem;letter-spacing:.32em;color:var(--hot);font-weight:700;margin-bottom:26px} .eyebrow::before,.eyebrow::after{content:"";width:32px;height:1px;background:linear-gradient(90deg,transparent,var(--hot))} .eyebrow::after{background:linear-gradient(90deg,var(--hot),transparent)} .hero h1{font-size:var(--h1);line-height:1.1;font-weight:900;letter-spacing:-.01em;color:#fbfeff;text-shadow:0 4px 44px rgba(0,0,0,.7)} .accent{color:var(--hot);text-shadow:0 0 15px rgba(79,216,234,.42),0 0 6px rgba(79,216,234,.4)} .hero .sub{font-size:clamp(1.18rem,2vw,1.55rem);font-weight:500;color:#e4f0f5;margin:28px auto 34px;max-width:30ch;text-shadow:0 2px 18px rgba(5,10,15,.8)} .hero .cta-row{justify-content:center} .scrollcue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;color:var(--cream-dim);font-size:.78rem;letter-spacing:.2em;text-align:center;animation:bob 2.4s ease-in-out infinite} .scrollcue span{display:block;font-size:1.2rem;margin-top:6px} @keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}} /* Hero 捲出視窗就把它的動畫全部暫停（index.html 的 hero script 用 IntersectionObserver 加 .offscreen） */ .hero.offscreen .star,.hero.offscreen .flow,.hero.offscreen .oglow,.hero.offscreen .twpin,.hero.offscreen .scrollcue{animation-play-state:paused} /* 頁內小 Hero（其他頁用） */ .pagehead{position:relative;padding:150px 0 70px;text-align:center;overflow:hidden;background:linear-gradient(180deg,#081420,#0a1c2a)} .pagehead .glowbottom{opacity:.7} .pagehead h1{position:relative;z-index:2;font-size:clamp(2.2rem,5vw,3.6rem);font-weight:900;color:#fbfeff} .pagehead p{position:relative;z-index:2;color:var(--cream-dim);margin:18px auto 0;max-width:46ch;font-size:1.1rem} /* 痛點儀表 */ .pain{padding:clamp(80px,12vh,140px) 0;background:linear-gradient(var(--ink0),var(--ink1))} .gauges{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px)} @media(max-width:820px){.gauges{grid-template-columns:1fr;gap:40px}} .gauge{text-align:center} .gauge .dial{width:96px;height:96px;margin:0 auto 22px;position:relative} .gauge .dial svg{width:100%;height:100%;overflow:visible} .gauge .num{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.75rem;color:var(--hot);font-weight:800;font-variant-numeric:tabular-nums} .gauge h3{font-size:1.28rem;font-weight:800;margin-bottom:10px;color:var(--cream)} .gauge p{color:var(--cream-dim);font-size:1rem;max-width:34ch;margin:0 auto} /* 時間軸（淺底） */ .journey{padding:clamp(84px,13vh,150px) 0;background:var(--paper);color:var(--dark)} .track{position:relative;margin-top:70px} .track .rail{position:absolute;top:34px;left:6%;right:6%;height:3px;background:var(--paper2);border-radius:3px} .track .rail i{position:absolute;inset:0;width:0;background:linear-gradient(90deg,var(--teal),var(--hot));border-radius:3px;transition:width 2.2s ease} .on .track .rail i{width:78%} .steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .steps.three{grid-template-columns:repeat(3,1fr)} @media(max-width:820px){.steps{grid-template-columns:1fr 1fr;row-gap:44px}} .step{text-align:center;padding:0 8px} .step .node{width:70px;height:70px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;background:#fff;border:3px solid var(--paper2);font-size:1.5rem;position:relative;z-index:2;transition:all .5s cubic-bezier(.2,.8,.2,1)} .js .step .node{opacity:0;transform:scale(.8)} .on .step .node{opacity:1;transform:none} .step:nth-child(1) .node{transition-delay:.2s}.step:nth-child(2) .node{transition-delay:.55s}.step:nth-child(3) .node{transition-delay:.9s}.step:nth-child(4) .node{transition-delay:1.25s} .step.done .node{border-color:var(--teal);color:var(--teal)} .step.now .node{border-color:var(--hot);color:#1a8ca0;animation:pulse 2s infinite} .step.todo .node{color:var(--dark-dim)} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(79,216,234,.5)}70%{box-shadow:0 0 0 16px rgba(79,216,234,0)}100%{box-shadow:0 0 0 0 rgba(79,216,234,0)}} .step h4{font-size:1.12rem;font-weight:800;color:var(--dark)} .step span{display:block;font-size:1.05rem;line-height:1.6;color:#374d5f} .step .badge{display:inline-block;margin-top:8px;font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:999px} .step.done .badge{background:rgba(58,166,185,.16);color:#1a7688}.step.now .badge{background:rgba(79,216,234,.18);color:#1189a0} /* 關於 */ .about{padding:clamp(84px,13vh,150px) 0;background:var(--paper);color:var(--dark);border-top:1px solid var(--line-d)} .about-grid{display:grid;grid-template-columns:.8fr 1.1fr;gap:clamp(30px,5vw,70px);align-items:center} @media(max-width:820px){.about-grid{grid-template-columns:1fr}} .about-photo{position:relative;aspect-ratio:4/4.7;display:flex;align-items:flex-end;justify-content:center; background:radial-gradient(64% 56% at 50% 40%,rgba(58,166,185,.20),transparent 70%)} .about-photo::after{content:"";position:absolute;left:50%;bottom:2%;width:62%;height:24px;transform:translateX(-50%); background:radial-gradient(50% 50% at 50% 50%,rgba(20,40,55,.34),transparent 72%);filter:blur(3px);z-index:0} .about-photo img{position:relative;z-index:1;width:auto;max-width:100%;height:98%;object-fit:contain; filter:drop-shadow(0 16px 22px rgba(20,40,55,.30)) drop-shadow(0 5px 9px rgba(20,40,55,.22))} .about .sec-kicker{color:var(--navy)} .about h2{font-size:var(--h2);font-weight:900;color:var(--dark);line-height:1.3;margin-bottom:22px} .about p{color:#33485a;font-size:1.08rem;margin-bottom:16px;max-width:46ch} .about .sign{margin-top:26px;font-weight:800;color:var(--dark);font-size:1.1rem} .about .sign span{display:block;font-size:.85rem;color:var(--dark-dim);font-weight:500;margin-top:2px} /* 影音 */ .tube{padding:clamp(80px,12vh,140px) 0;background:var(--ink1)} .tube-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:28px;align-items:start} @media(max-width:820px){.tube-grid{grid-template-columns:1fr}} .vid{position:relative;display:block;border-radius:var(--rad);overflow:hidden;background:#08131b;aspect-ratio:16/9;border:1px solid var(--line)} .vid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .vid .playbtn{position:absolute;right:14px;bottom:14px;width:50px;height:50px;border-radius:50%;background:rgba(79,216,234,.95);display:grid;place-items:center;font-size:1.05rem;color:#04222b;padding-left:3px;box-shadow:0 8px 24px -6px rgba(0,0,0,.7);transition:transform .2s} .vid:hover .playbtn{transform:scale(1.12)} .vid-title{margin-top:15px;font-weight:700;font-size:1.12rem;color:var(--cream);line-height:1.55} .vid-side{display:flex;flex-direction:column;gap:16px} .vid-mini{display:grid;grid-template-columns:132px 1fr;gap:14px;align-items:center} .vid-mini .th{aspect-ratio:16/9;border-radius:10px;background:#08131b;border:1px solid var(--line);position:relative;overflow:hidden} .vid-mini .pb{position:absolute;right:7px;bottom:7px;width:26px;height:26px;border-radius:50%;background:rgba(79,216,234,.92);display:grid;place-items:center;color:#04222b;font-size:.66rem;padding-left:2px} .vid-mini p{font-size:1rem;font-weight:600;color:var(--cream);line-height:1.45} .vid-mini span{font-size:.82rem;color:var(--cream-dim)} /* 文章列表 */ .posts{padding:clamp(80px,12vh,140px) 0;background:var(--ink0)} .post-list{margin-top:50px;border-top:1px solid var(--line)} .post{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;padding:26px 6px;border-bottom:1px solid var(--line);transition:background .25s,padding .25s} .post:hover{background:rgba(79,216,234,.05);padding-left:18px} .post .k{font-size:.78rem;letter-spacing:.12em;color:var(--teal);font-weight:700;white-space:nowrap} .post .t{font-size:1.22rem;font-weight:700;color:var(--cream)} .post .t small{display:block;font-weight:400;font-size:.92rem;color:var(--cream-dim);margin-top:4px} .post .arrow{color:var(--cream-dim);font-size:1.3rem;transition:transform .25s,color .25s} .post:hover .arrow{color:var(--hot);transform:translateX(6px)} @media(max-width:640px){.post{grid-template-columns:1fr;gap:8px}.post .arrow{display:none}} /* 文章列表：淺色變體（2026-08-22 深淺節奏重排） 後半段 tube→posts→magnet→footer 原本連續 2894px 全深色，佔全頁 42%，沒有換氣點。 翻 posts 這一塊的理由：純文字清單淺底最好讀，而且跟文章閱讀頁（.artlab 用 --paper2） 同樣是淺底，讀者從清單點進文章不會有明暗跳動。tube 維持深色是因為 YouTube 縮圖 高彩度，深底襯圖才不吵；magnet 維持深色，從淺跳深收尾對比最大。 */ .posts.light{background:var(--paper)} .posts.light .post-list{border-top-color:var(--line-d)} .posts.light .post{border-bottom-color:var(--line-d)} .posts.light .post:hover{background:rgba(31,89,126,.05)} .posts.light .post .k{color:var(--navy)} .posts.light .post .t{color:var(--dark)} .posts.light .post .t small{color:var(--dark-dim)} .posts.light .post .arrow{color:var(--dark-dim)} .posts.light .post:hover .arrow{color:var(--navy)} .posts.light .btn.ghost{border-color:rgba(27,43,56,.26);color:var(--dark)} .posts.light .btn.ghost:hover{border-color:var(--navy);color:var(--navy)} /* 誘餌 / 微光收尾 */ .magnet{padding:clamp(90px,14vh,170px) 0;background:radial-gradient(120% 90% at 50% 120%,rgba(79,216,234,.18),transparent 60%),var(--ink-deep);position:relative;overflow:hidden} .magnet::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(transparent,rgba(79,216,234,.12));pointer-events:none} .magnet-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr .9fr;gap:clamp(30px,5vw,64px);align-items:center} @media(max-width:820px){.magnet-grid{grid-template-columns:1fr;text-align:center}} .magnet h2{font-size:var(--h2);font-weight:900;line-height:1.3;margin-bottom:20px;color:var(--cream)} .magnet p{color:var(--cream-dim);font-size:1.08rem;margin-bottom:16px;max-width:44ch} @media(max-width:820px){.magnet p{margin-inline:auto}} .magnet .step004{display:inline-block;background:rgba(200,230,232,.07);border:1px solid var(--line);padding:11px 20px;border-radius:22px;font-size:.98rem;line-height:1.7;color:var(--cream);margin:8px 0 28px;max-width:100%} /* 2026-09-03：原本 inline-flex 把「加我的官方 LINE，輸入」「004」「免費領取《…》」三段文字當三個 flex 項目各自換行，書名一長就排成三欄怪版。改回正常文字流。 */ .magnet .step004 b{color:var(--hot)} .magnet-cover{justify-self:center} .magnet-cover img{width:min(84%,340px);border-radius:12px;box-shadow:0 40px 80px -30px rgba(0,0,0,.7),0 0 60px -20px rgba(79,216,234,.3);transform:rotate(-3deg);transition:transform .4s} .magnet-cover:hover img{transform:rotate(0)} /* footer */ footer.site{background:var(--ink-deep);padding:60px 0 40px;border-top:1px solid var(--line)} /* 2026-09-03 Freddy：「頁尾的 Logo 跟文字能否再大一點」。logo 高與一句話的字級是 footer markup 的 inline style（六頁共用），只能 !important 蓋 */ footer.site .logo .logo-img{height:56px!important} footer.site .col>p{font-size:1.06rem!important;max-width:26ch!important;line-height:1.8} .foot{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start} .foot .col h5{font-size:.86rem;letter-spacing:.16em;color:var(--cream-dim);margin-bottom:14px;font-weight:700} .foot .col a{display:block;color:var(--cream-dim);font-size:1.06rem;padding:5px 0} .foot .col a:hover{color:var(--hot)} .foot-bottom{margin-top:44px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.92rem;color:var(--cream-dim)} /* 文章內文排版（article）＋列表卡（blog）＋服務頁（service）：高易讀 2026-08-17：長文閱讀區改淺色卡片（沿用 .about/.journey 既有的淺色區塊語言）。 深底白字的長文手機閱讀偏沈重、重點字不易辨識，改跟多數知識型部落格一樣， 閱讀區用淺色、只有 header/hero 維持深色。同時補上左右內距（原本手機版是 0）。 */ .prose{max-width:720px;margin:0 auto;padding:clamp(40px,7vh,80px) clamp(24px,5vw,48px); color:var(--dark);background:var(--paper);border-radius:var(--rad);box-shadow:0 30px 60px -30px rgba(0,0,0,.4)} .prose p{font-size:1.15rem;line-height:2;margin:0 0 1.5em;color:var(--dark)} .prose h2{font-size:1.7rem;font-weight:900;margin:2em 0 .7em;color:var(--dark)} .prose h3{font-size:1.3rem;font-weight:800;margin:1.6em 0 .5em;color:var(--navy)} .prose blockquote{border-left:3px solid var(--navy);padding:6px 0 6px 22px;margin:1.6em 0;color:var(--dark);font-size:1.2rem} .prose a{color:var(--navy);border-bottom:1px solid rgba(31,89,126,.35)} /* 文章／關於頁內嵌圖片 */ .prose figure,.art-fig{margin:2em 0} .prose figure img,.art-fig img{width:100%;border-radius:14px;border:1px solid var(--line-d);box-shadow:0 20px 40px -22px rgba(20,40,55,.3)} .prose figcaption,.art-fig figcaption{margin-top:12px;font-size:.9rem;color:var(--dark-dim);text-align:center;line-height:1.6} .art-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:2em 0} .art-row figure{margin:0} .art-row figcaption{margin-top:10px;font-size:.82rem} @media(max-width:720px){.art-row{grid-template-columns:1fr;gap:26px}} /* 文章 byline／精選大圖／目錄 */ .byline{display:flex;align-items:center;gap:14px;margin-top:24px;position:relative;z-index:2} .byline img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid rgba(79,216,234,.5)} .byline b{display:block;color:var(--cream);font-size:1rem} .byline span{display:block;font-size:.85rem;color:var(--cream-dim);margin-top:2px} .hero-figure{width:100%;border:1px solid var(--line);display:block} .toc{background:rgba(31,89,126,.06);border:1px solid var(--line-d);border-left:3px solid var(--navy);border-radius:12px;padding:22px 26px;margin:0 0 2.4em} .toc h4{font-size:.8rem;letter-spacing:.14em;color:var(--navy);font-weight:800;margin-bottom:12px} .toc ol{margin:0;padding-left:1.3em} .toc li{font-size:1rem;line-height:1.9;color:var(--dark)} .toc a{color:var(--dark);border:none} .toc a:hover{color:var(--navy)} /* 文章頁：桌面版右側 sticky 側欄（目錄＋作者＋最新文章） .prose 720px 置中在寬螢幕兩側留白很空洞，≥1100px 加右欄補滿版面， 沿用 .toc／.paper 既有淺色卡片語言，不另立配色。<1100px（含手機） .article-layout 維持純 block，.prose 行為跟改版前完全一樣，手機版不受影響。 精選圖 .hero-wrap 也在 ≥1100px 加寬到跟 .article-layout 同寬， 否則圖片還是舊的 780px 置中，會跟兩欄區的左邊界對不齊，浮在中間很怪。 */ .article-side{display:none} .hero-wrap{max-width:780px} @media(min-width:1100px){ .hero-wrap{max-width:1180px} .article-layout{display:grid;grid-template-columns:1fr 300px;gap:44px;align-items:start; max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,48px)} .article-layout .prose{max-width:none;margin:0} .article-layout .prose>.toc{display:none} .article-side{display:flex;flex-direction:column;gap:24px;position:sticky;top:104px} .article-side .toc{margin:0;background:var(--paper);box-shadow:0 30px 60px -30px rgba(0,0,0,.4)} .side-related{background:var(--paper);border:1px solid var(--line-d);border-left:3px solid var(--teal); border-radius:12px;padding:22px 26px;box-shadow:0 30px 60px -30px rgba(0,0,0,.4)} .side-related h4{font-size:.8rem;letter-spacing:.14em;color:var(--navy);font-weight:800;margin-bottom:14px} .side-related ul{list-style:none;display:flex;flex-direction:column;gap:14px} .side-related li+li{padding-top:14px;border-top:1px solid var(--line-d)} .side-related a{display:block;color:var(--dark)} .side-related a:hover .side-t{color:var(--navy)} .side-related .side-k{display:block;font-size:.7rem;letter-spacing:.1em;color:var(--teal);font-weight:700;margin-bottom:5px} .side-related .side-t{display:block;font-size:.95rem;line-height:1.5;font-weight:700;color:var(--dark)} /* 側欄：作者介紹＋社群連結 */ .side-author{background:var(--paper);border:1px solid var(--line-d);border-radius:12px; padding:24px 22px;box-shadow:0 30px 60px -30px rgba(0,0,0,.4);text-align:center} .side-author img{width:60px;height:60px;border-radius:50%;object-fit:cover; border:2px solid rgba(31,89,126,.3);display:block;margin:0 auto 12px} .side-author .side-author-name{font-weight:800;color:var(--dark);font-size:1rem;margin-bottom:8px} .side-author p{font-size:.86rem;color:var(--dark-dim);line-height:1.65;margin-bottom:16px} .side-social{display:flex;justify-content:center;gap:10px} .side-social a{width:34px;height:34px;border-radius:50%;display:grid;place-items:center; background:rgba(31,89,126,.08);color:var(--navy);transition:background .2s,color .2s} .side-social a:hover{background:var(--navy);color:#fff} .side-social svg{width:16px;height:16px} } .readbar{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--teal),var(--hot));z-index:60;width:0} .card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} @media(max-width:900px){.card-grid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.card-grid{grid-template-columns:1fr}} .card{background:var(--ink1);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;transition:transform .25s,border-color .25s,opacity 1s cubic-bezier(.2,.7,.2,1),translate 1s cubic-bezier(.2,.7,.2,1)} /* 後兩項＝.rv 的進場（見 .rv 註解） */ .card:hover{transform:translateY(-4px);border-color:rgba(79,216,234,.4)} .card .thumb{aspect-ratio:16/9;background:linear-gradient(135deg,#0e2230,#123246);overflow:hidden} .card .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s} .card:hover .thumb img{transform:scale(1.05)} .card .k .date{color:var(--cream-dim);font-weight:500;letter-spacing:0} .card .body{padding:22px} .card .k{font-size:.74rem;letter-spacing:.12em;color:var(--teal);font-weight:700} .card h3{font-size:1.2rem;font-weight:800;margin:8px 0 8px;color:var(--cream)} .card p{font-size:.96rem;color:var(--cream-dim)} .feature{display:flex;gap:18px;align-items:flex-start;padding:24px 0;border-bottom:1px solid var(--line)} .feature .ic{flex:none;width:52px;height:52px;border-radius:12px;display:grid;place-items:center;background:rgba(79,216,234,.12);color:var(--hot);font-size:1.4rem;font-weight:800} .feature h3{font-size:1.2rem;font-weight:800;color:var(--cream);margin-bottom:6px} .feature p{color:var(--cream-dim)} /* 適合／不適合對象 */ .fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:900px;margin:0 auto} @media(max-width:760px){.fit-grid{grid-template-columns:1fr}} .fit{background:rgba(200,230,232,.04);border:1px solid var(--line);border-radius:16px;padding:30px 30px 34px} .fit.yes{border-top:3px solid var(--hot)} .fit.no{border-top:3px solid var(--slate)} .fit h3{font-size:1.15rem;font-weight:800;margin-bottom:16px} .fit.yes h3{color:var(--hot)} .fit.no h3{color:var(--cream-dim)} .fit .fit-note{color:var(--cream-dim);font-size:.9rem;margin-bottom:14px;line-height:1.6} .fit ul{list-style:none;display:flex;flex-direction:column;gap:13px} .fit li{position:relative;padding-left:26px;color:var(--cream-dim);line-height:1.6} .fit.yes li::before{content:"✓";position:absolute;left:0;color:var(--hot);font-weight:800} .fit.no li::before{content:"–";position:absolute;left:0;color:var(--slate);font-weight:800} /* ===== 手機版 ===== */ @media(max-width:760px){ .hero .sub{max-width:26ch} .hero h1{font-size:clamp(2.4rem,10vw,3.4rem)} /* 手機版航線：2026-09-05 起是切到 .mob 那顆 svg（台灣為中心的取景），不再由 JS 改 viewBox。 */ .routes.desk{display:none}.routes.mob{display:block} /* 只隱藏國家文字標示：390px 下那些字小到看不清，又跟大標搶位置（實測「中東」「台灣」直接 壓在 h1 上）。線與光點留著當背景紋理，那才是航線在 Hero 裡的角色。 */ .routes text{display:none} /* 2026-09-03 效能：手機上連 route 的光暈濾鏡都拿掉。WebKit 實量（390 寬）：留著＝每幀 132～440ms（整頁像當機）， 全拿掉＝16.6ms 滿幀。桌機（1470）只拿 .flow 的就夠（穩態 16.7ms），route 光暈在桌機留著。 */ .route,.routes>g[filter]{filter:none} .glowbottom{bottom:-20%;height:60%} .track .rail{display:none} .steps,.steps.three{grid-template-columns:1fr;gap:34px} .step{max-width:340px;margin:0 auto} .about-grid,.magnet-grid{text-align:center} /* 2026-09-03：iPhone 上照片整個不見。WebKit 把「grid item＋max-width＋margin:auto」解成 0 寬， aspect-ratio 跟著把高歸零（Playwright WebKit 實量 0×0，Chrome 152×345）。給明確寬度就好。 */ .about-photo{width:min(100%,300px);margin:0 auto} /* 2026-09-05 Freddy（iPhone 截圖）：照片「去背時好時壞」＝偶爾出現一塊跟 框一樣大的淺色不透明矩形。 圖檔本身（原圖與 Seraphinite 各尺寸變體）都驗過有 alpha；元凶是 img 上的兩層 filter:drop-shadow——iOS WebKit 在元素被提升成合成層 （進場 opacity／位移動畫、lazy 換圖淡入）時偶爾把濾鏡輸出面初始化成不透明，畫出整個框。手機拿掉濾鏡（地板橢圓陰影 ::after 留著）， 桌機維持。選擇器刻意跟上面 .about-photo img 不同名（Seraphinite 合併 CSS 會去重同名選擇器）。 */ .about-grid .about-photo img{filter:none} .about p,.magnet p{margin-inline:auto} .about .cta-row,.about .sign{justify-content:center;text-align:center} .magnet .cta-row{justify-content:center} /* 誘餌按鈕（2026-09-03 Freddy：「按鈕內的文字排版很怪，應該可以換成兩行」）： .btn 是 inline-flex，文字節點與箭頭各成一欄，書名在中間被硬折成「…入門／地圖》」。 手機改成 block 流式排版：「立即領取」一行、書名（.bt）獨立一行、箭頭跟在書名後面。 */ .magnet .cta-row .btn{display:block;text-align:center;padding:15px 20px;line-height:1.5} .magnet .cta-row .btn .bt::before{content:"\A";white-space:pre} .foot{gap:22px} .vid-title{font-size:1.05rem} } /* ===== 關於頁：開場三段（首先／接下來／最後） ===== */ .intro3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .intro-item{background:rgba(200,230,232,.04);border:1px solid var(--line);border-top:3px solid var(--hot);border-radius:16px;padding:30px 28px 34px} .intro-k{font-size:.82rem;letter-spacing:.22em;color:var(--teal);font-weight:800;margin-bottom:14px} .intro-item h3{font-size:1.18rem;font-weight:800;color:var(--cream);line-height:1.5;margin-bottom:14px} .intro-item p{color:var(--cream-dim);font-size:1rem;line-height:1.9} @media(max-width:820px){.intro3{grid-template-columns:1fr;gap:18px}} /* 關於頁：信任我三理由容器 */ .reasons{max-width:820px;margin:0 auto} .reasons .feature:last-child{border-bottom:none} .light .reasons .feature{border-color:var(--line-d)} .light .reasons .feature .ic{background:rgba(31,89,126,.1);color:var(--navy)} .light .reasons .feature h3{color:var(--dark)} .light .reasons .feature p{color:var(--dark-dim)} /* prose 內的強調副標 */ .prose .lede{font-size:1.22rem;color:var(--navy);font-weight:700;margin-bottom:1em} /* ===== 關於頁：成長故事里程碑（圖文並排、左右交替） ===== */ /* 大標不受 48ch 擠壓，讓
決定斷行 */ .sec-head.wide{max-width:min(100%,940px)} .story-banner{max-width:960px;margin:0 auto clamp(44px,6vh,72px)} .story-lede{max-width:64ch;margin:0 auto clamp(56px,8vh,96px)} .story-lede p{font-size:1.15rem;line-height:2;color:#dbe7ed;margin-bottom:1.4em} .story-lede p:last-child{margin-bottom:0} .milestones{display:flex;flex-direction:column;gap:clamp(60px,10vh,120px)} .mile{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.6vw,66px);align-items:center} .mile.rev .mile-media{order:2} .mile-no{font-size:.8rem;letter-spacing:.26em;color:var(--teal);font-weight:800;margin-bottom:14px} .mile-body h3{font-size:clamp(1.35rem,2.5vw,1.9rem);font-weight:900;color:var(--cream);line-height:1.38;margin-bottom:16px} .mile-body .lede{font-size:1.15rem;color:var(--hot);font-weight:700;margin-bottom:16px} .mile-body p{color:#dbe7ed;font-size:1.06rem;line-height:1.95;margin-bottom:1.15em} .mile-body p:last-child{margin-bottom:0} .mile-body .ref{font-size:.96rem;color:var(--cream-dim);margin-top:1.2em} .mile-body .ref a{color:var(--hot);border-bottom:1px solid rgba(79,216,234,.45)} .mile-body .ref a:hover{border-color:var(--hot)} figure.shot{margin:0} figure.shot img{display:block;width:100%;border-radius:16px;border:1px solid var(--line);box-shadow:0 28px 56px -26px rgba(0,0,0,.75)} figure.shot figcaption{margin-top:12px;font-size:.88rem;color:var(--cream-dim);line-height:1.65;text-align:center} /* 三張生活照拼貼（上一大、下兩小） */ .shot-stack{display:grid;grid-template-columns:1fr 1fr;gap:16px 14px;align-items:start} .shot-stack figure:first-child{grid-column:1/-1} .shot-stack figcaption{margin-top:9px;font-size:.78rem;line-height:1.55} /* 沒照片的里程碑：數字視覺 */ .stat-card{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,30px); border:1px solid var(--line);border-radius:20px;padding:clamp(24px,3vw,34px); background:linear-gradient(160deg,rgba(79,216,234,.10),rgba(200,230,232,.03))} .mile-media figure.shot+.stat-card{margin-top:20px} .stat-item+.stat-item{border-left:1px solid var(--line);padding-left:clamp(20px,2.6vw,30px)} .stat{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap} .stat b{font-size:clamp(2.5rem,4.6vw,3.4rem);font-weight:900;line-height:1;letter-spacing:-.02em;color:var(--hot);font-variant-numeric:tabular-nums} .stat i{font-style:normal;font-size:1rem;font-weight:800;color:var(--cream)} .stat-card p{color:var(--cream-dim);font-size:.94rem;line-height:1.7;margin:12px 0 0} /* 轉折段：置中窄欄獨立成塊 */ .interlude{max-width:62ch;margin:clamp(60px,10vh,120px) auto 0;text-align:center; border:1px solid var(--line);border-radius:20px;padding:clamp(34px,5vw,56px) clamp(24px,4vw,48px); background:radial-gradient(120% 100% at 50% 0%,rgba(79,216,234,.07),transparent 62%)} .interlude .turn{font-size:clamp(1.2rem,2.4vw,1.55rem);font-weight:800;color:var(--cream);line-height:1.6;margin-bottom:1.8em} .interlude h3{font-size:1.3rem;font-weight:800;color:var(--hot);margin-bottom:.7em} .interlude p{color:#dbe7ed;font-size:1.06rem;line-height:1.95;margin-bottom:2.2em;text-align:left} .interlude p:last-child{margin-bottom:0} /* 引言卡（當作里程碑的視覺欄用） */ .quote-card{border-left:3px solid var(--hot);padding:10px 0 10px 26px;color:var(--cream); font-size:clamp(1.2rem,2.1vw,1.5rem);font-weight:700;line-height:1.8} @media(max-width:860px){ .mile{grid-template-columns:1fr;gap:26px} .mile.rev .mile-media{order:0} /* 引言是段落的收尾，手機版要排在文字之後 */ .mile.quote-last .mile-media{order:2;margin-top:4px} .mile-body p,.mile-body .lede{max-width:none} .shot-stack{grid-template-columns:1fr;gap:22px} .shot-stack figure:first-child{grid-column:auto} .shot-stack figcaption{font-size:.86rem} .stat-card{grid-template-columns:1fr} .stat-item+.stat-item{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:22px} } /* ===== 關於頁：結尾 CTA 單欄置中版（人像縮小當點綴放標題上方） ===== */ .magnet-solo{position:relative;z-index:2;max-width:760px;margin:0 auto;text-align:center} .magnet-solo .magnet-portrait{width:clamp(112px,15vw,152px);margin:0 auto 30px} .magnet-solo .magnet-portrait img{display:block;width:100%;border-radius:50%; box-shadow:0 20px 44px -18px rgba(0,0,0,.75),0 0 0 6px rgba(79,216,234,.08),0 0 0 7px rgba(79,216,234,.22)} .magnet-solo h2{margin-bottom:26px} .magnet-solo p{max-width:60ch;margin-left:auto;margin-right:auto;line-height:2} .magnet-solo .cta-row{justify-content:center} /* 矩形形象照（框裱式，用於還沒有去背圖時） */ .portrait-frame{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line-d); box-shadow:0 30px 60px -26px rgba(20,40,55,.5);background:radial-gradient(64% 56% at 50% 40%,rgba(58,166,185,.18),transparent 70%)} .portrait-frame img{display:block;width:100%;height:auto} @media(max-width:820px){.portrait-frame{max-width:340px;margin:0 auto}} /* ===== 改寫前後對比（首頁 #rewrite）===== 拖動中線比較「常見寫法 vs 改過之後」。控制器＝真的 ， 所以鍵盤左右鍵、螢幕閱讀器都能用；JS 掛掉時兩欄各顯示一半，內容不消失。 */ .rewrite{padding:clamp(80px,12vh,140px) 0;background:linear-gradient(var(--ink1),var(--ink2))} .cmp{max-width:940px;margin:0 auto} .cmp-case[hidden]{display:none} /* 切換頁籤 */ .cmp-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:26px} .cmp-tab{font-family:var(--font);font-size:.95rem;font-weight:700;color:var(--cream-dim);cursor:pointer; padding:9px 20px;border-radius:999px;border:1px solid var(--line);background:rgba(200,230,232,.04); transition:color .2s,border-color .2s,background .2s} .cmp-tab:hover{color:var(--cream);border-color:rgba(79,216,234,.45)} .cmp-tab.on{color:#04222b;background:linear-gradient(135deg,var(--hot),var(--teal));border-color:transparent} .cmp-tab:focus-visible{outline:2px solid var(--hot);outline-offset:3px} /* 這一關是動線的哪一步 */ .cmp-step{text-align:center;font-size:.95rem;font-weight:700;color:var(--hot); margin:0 0 18px;letter-spacing:.02em} /* 比較台：左右並排。文字不能像圖片那樣切一半對接，所以不做拖曳分割 */ .cmp-stage{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--rad);overflow:hidden; border:1px solid var(--line);background:var(--ink0)} .cmp-pane{padding:clamp(24px,3.4vw,34px) clamp(18px,2.6vw,28px) clamp(28px,3.6vw,38px)} .cmp-before{background:rgba(200,230,232,.03);border-right:1px solid var(--line)} .cmp-after{background:linear-gradient(150deg,rgba(79,216,234,.10),rgba(31,89,126,.14))} .cmp-tag{display:inline-block;font-size:.72rem;letter-spacing:.16em;font-weight:800; padding:4px 12px;border-radius:999px;margin-bottom:18px} .cmp-before .cmp-tag{background:rgba(200,230,232,.09);color:var(--cream-dim)} .cmp-after .cmp-tag{background:rgba(79,216,234,.18);color:var(--hot)} .cmp-text{font-family:var(--mono);font-size:clamp(.72rem,.95vw,.85rem);line-height:1.95; white-space:pre-wrap;overflow-wrap:anywhere;margin:0} .cmp-before .cmp-text{color:var(--cream-dim);opacity:.72} .cmp-after .cmp-text{color:var(--cream)} .cmp-after .cmp-text b{color:var(--hot);font-weight:700} .cmp-hint{text-align:center;font-size:.85rem;letter-spacing:.1em;color:var(--cream-dim);margin-top:16px} .cmp-note{max-width:60ch;margin:24px auto 0;color:var(--cream-dim);font-size:1.02rem;line-height:1.9} .cmp-note b{color:var(--hot);font-weight:800} .cmp-src{text-align:center;font-size:.82rem;color:var(--cream-dim);opacity:.75;margin-top:22px} @media(max-width:760px){ .cmp-stage{grid-template-columns:1fr} .cmp-before{border-right:none;border-bottom:1px solid var(--line)} .cmp-pane{padding:22px 16px 26px} .cmp-text{font-size:.74rem;line-height:1.85} }