/* ============================================================================= * site.css — ryanongestate.com 官網樣式 * ----------------------------------------------------------------------------- * 這是**手改的來源檔**，不是生成物（對照：public/index.html 是生成物，別手改）。 * 改完要重跑 node site/ryanongestate/tools/build-site.mjs——版本雜湊才會更新， * 瀏覽器與 CDN 才拿得到新的。做法與地圖的 assets/map.css 一致。 * * 骨架（字級尺／間距尺／行高／行寬）＝ shared/skins/design-tokens.css，跨項目不變，**不要在這裡改**。 * 皮膚（顏色／字型）＝ 本檔自己定，與地圖同一套，讓 / 與 /map/ 看起來是同一個站。 * * 遵循 shared/design/design-rules.md： * · 同一 section 內標頭／內文／卡片共用欄寬、左右緣對齊（硬規則） * · 標題用 text-wrap:pretty，**不用 balance**（balance 會把標題擠成一堆短行） * · 手機：hero／區塊標頭／數據／CTA 置中；長段落不置中，用兩端對齊 * · 長內文 justify 必須配 text-justify:inter-character（中文沒空格，少了它 Safari 不撐開） * ========================================================================== */ :root{ /* ---- 骨架：整段取自 shared/skins/design-tokens.css，不要在這裡調 ---- */ --fs-eyebrow:clamp(13px,1.25vw,15px); --fs-h1:clamp(36px,5vw,62px); --fs-h2:clamp(30px,4.2vw,50px); --fs-h3:clamp(21px,2.4vw,28px); --fs-lead:clamp(18px,1.8vw,21px); --fs-body:clamp(17px,1.5vw,18px); --fs-small:14px; --fs-stat:clamp(30px,4vw,46px); --fw-body:400; --fw-med:600; --fw-bold:700; --fw-black:850; --lh-tight:1.1; --lh-snug:1.16; --lh-body:1.5; --space-section:clamp(72px,10vw,128px); --space-block:clamp(34px,5vw,56px); --space-stack:1.15em; --space-head:22px; --measure:680px; /* ---- 皮膚 ---- */ /* 區塊主標比骨架的 --fs-h2 再大一級、再重一階（Edwind 2026-08-11：現在的 h2 不夠明顯）。 * ⚠️ 刻意**不去改 --fs-h2 本身**——那是骨架 token、跨項目共用，動它等於改所有 LP。 * 要放大就在皮膚層另開一個變數，只有這個站吃得到。 */ --fs-h2-sec:clamp(34px,5.2vw,58px); --fw-h2-sec:850; --space-sub:12px; /* 副標→說明。與「標題→副標」的 --space-head 是兩種關係，各自一個值 */ /* ---- 直向節奏：關係型 token（2026-08-12 立）---- * 正典 shared/design/design-rules.md 早就寫了「同一種關係只能有一種距離」， * 但這個檔一路長出 28/26/22/20/18/0 這些各憑手感的數字，Edwind 已經第二次回報 * 同一類問題（「description 跟四個 tab 中間有一個很大的空格」「這個就比較沒有空間感」）。 * 每次都當成一個位置的微調去修，就會一直復發——所以改成先命名關係、再套值。 * * ⚠️ 命名照的是**關係**不是大小：要決定用哪一個，問「這兩個東西是什麼關係」， * 不要問「這裡看起來要多少 px」。後者就是造成現在這團數字的原因。 * * 由小到大五級，只有五級： * --gap-note 元素 → 緊貼它的附註小字（按鈕底下那行說明、卡片註記、引文署名） * --gap-inner 同一個模組內、地位相當的相鄰元素 * --gap-action 文字 → 它引出的**可操作元件**（CTA 按鈕、頁籤列） * --gap-module 同一個區塊內，一個模組 → 下一個模組 * --space-block 標頭區 → 內容模組（骨架 token，正典管，不要在這裡改） * * 「模組→模組」原本散成 24／26／28／30／32 五個數字——同一種關係寫五次， * 每次都是當下看起來剛好。那正是要消滅的東西，所以它值得一個自己的名字。 * * 加第六級之前先問：真的是一種新關係，還是既有五種之一？多半是後者。 */ --gap-note:12px; --gap-inner:20px; --gap-action:26px; --gap-module:28px; --bg-primary:#FBFBFD; --bg-section-b:#F3F2F7; --bg-card:#FFFFFF; --accent:#6A47F5; --accent-light:#1E9BF0; --text-primary:#0A0A0E; --text-secondary:#39393F; --text-dim:#67676F; --text-faint:#9A9AA4; --line:rgba(0,0,0,.09); --line-soft:rgba(0,0,0,.055); --badge-bg:rgba(106,71,245,.08); --badge-border:rgba(106,71,245,.22); --accent-halo:rgba(106,71,245,.06); --accent-glow:rgba(106,71,245,.42); --shadow-card:0 1px 2px rgba(10,10,14,.04),0 12px 32px rgba(10,10,14,.06); --shadow-lift:0 2px 4px rgba(10,10,14,.05),0 22px 48px -14px rgba(10,10,14,.14); --dark:#0B0D12; --d-ink:#fff; --d-soft:rgba(255,255,255,.72); --d-muted:rgba(255,255,255,.5); --d-line:rgba(255,255,255,.14); --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Hiragino Sans","Microsoft JhengHei",sans-serif; --maxw:1140px; --gutter:clamp(20px,5vw,52px); --radius:20px; /* 動效：全站共用同一組時間與曲線，節奏才會一致（各處各調＝看起來像拼湊的） */ --dur-fast:180ms; --dur:260ms; --dur-slow:520ms; --ease-out:cubic-bezier(.16,.84,.44,1); } *{box-sizing:border-box;margin:0;padding:0} /* 對話框關著的時候是真的不存在：hidden 要贏過元件自己的 display（flex／grid）， 否則 Tab 會跑進看不見的面板裡 */ [hidden]{display:none!important} html{scroll-behavior:smooth;scroll-padding-top:72px} body{background:var(--bg-primary);color:var(--text-primary);font-family:var(--sans); font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:-.01em; -webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:inherit} img{max-width:100%;height:auto;display:block} h1,h2,h3,h4{text-wrap:pretty} /* 正典：不要用 balance */ /* 鍵盤焦點：一律看得見。用 :focus-visible 才不會在滑鼠點擊時也冒出框 */ a:focus-visible,button:focus-visible,summary:focus-visible{ outline:2px solid var(--accent);outline-offset:3px;border-radius:6px} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)} .section{padding:var(--space-section) 0;position:relative} .section--b{background:var(--bg-section-b)} /* 深淺切換處補一條極淡的高光，避免兩塊色直接對撞、看起來像沒對齊 */ .section--b::before{content:"";position:absolute;inset:0 0 auto;height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent)} /* ---------- 區塊標頭（四層固定）---------- * eyebrow（可選）→ h2 主標 → .sub 副標 → .desc 說明。 * 三層字級要拉得開才看得出層級：主標 58px 級／副標 lead 級／說明 body 級。 * ⚠️ 正典硬規則：標頭不可以縮在窄欄、卡片卻滿寬（左右緣會明顯不齊）。 * 所以這裡**不設 max-width**。要收窄就整個 section 一起收——見 .section--narrow。 */ .sechead{margin-bottom:var(--space-block)} .sechead h2{font-size:var(--fs-h2-sec);font-weight:var(--fw-h2-sec); line-height:var(--lh-tight);letter-spacing:-.035em} .sechead .sub{margin-top:var(--space-head);font-size:var(--fs-lead); font-weight:640;line-height:var(--lh-snug);letter-spacing:-.02em;color:var(--text-primary)} .sechead .desc{margin-top:var(--space-sub);color:var(--text-secondary)} /* 副標缺席時，說明直接接在主標下面——那是「標題→下一段」的關係，用 --space-head */ .sechead h2 + .desc{margin-top:var(--space-head)} .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-eyebrow); font-weight:var(--fw-med);letter-spacing:.08em;text-transform:uppercase; color:var(--accent);margin-bottom:14px} .eyebrow::before{content:"";width:20px;height:1px;background:currentColor;opacity:.55} /* ---------- 圖標 ---------- */ .ic{width:24px;height:24px;flex:none;display:block} .ic-go{width:17px;height:17px;display:inline-block;vertical-align:-3px;margin-left:5px; transition:transform var(--dur) var(--ease-out)} .ic-ext{width:15px;height:15px;opacity:.45;transition:transform var(--dur) var(--ease-out),opacity var(--dur)} .ic-dur{width:13px;height:13px;display:inline-block;vertical-align:-2px;margin-right:4px;opacity:.8} /* ---------- 頂條 ---------- */ .topbar{position:sticky;top:0;z-index:100;background:rgba(10,10,14,.82); backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--d-line)} .topbar-in{max-width:var(--maxw);margin:0 auto;padding:12px var(--gutter); display:flex;align-items:center;justify-content:space-between;gap:16px} .brandmark{display:flex;align-items:center;text-decoration:none} .brandmark img{height:30px;width:auto} .topbar nav{display:flex;gap:4px;flex-wrap:wrap;align-items:center} .topbar nav a{font-size:var(--fs-small);font-weight:var(--fw-med);color:var(--d-muted); text-decoration:none;padding:7px 12px;border-radius:100px; transition:background var(--dur),color var(--dur)} .topbar nav a:hover{background:rgba(255,255,255,.1);color:var(--d-ink)} .topbar nav a.nav-cta{background:var(--accent);color:#fff;margin-left:6px} .topbar nav a.nav-cta:hover{background:#7d5ff7;color:#fff} /* ---------- Hero ---------- */ .hero{background:var(--dark);color:var(--d-ink);position:relative;overflow:hidden; padding:clamp(52px,7vw,88px) 0 clamp(50px,7vw,88px)} /* 深色底不是一片死黑：右下一團品牌色光暈＋一層極細網格，讓它有空間感。 * 兩層都是純 CSS，不多一個請求。 */ .hero::before{content:"";position:absolute;width:70vw;height:70vw;max-width:820px;max-height:820px; right:-14%;top:-24%;border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(106,71,245,.30),rgba(30,155,240,.10) 45%,transparent 68%); filter:blur(10px)} .hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5; background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px); background-size:56px 56px; -webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000,transparent 78%); mask-image:radial-gradient(ellipse at 50% 0%,#000,transparent 78%)} .hero .wrap{position:relative;z-index:1} .hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:clamp(24px,4vw,56px);align-items:center} .kicker{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-eyebrow); font-weight:var(--fw-med);padding:7px 15px;border-radius:100px; background:rgba(106,71,245,.18);border:1px solid rgba(106,71,245,.4); color:#C4B4FF;margin-bottom:var(--gap-inner)} .kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor; box-shadow:0 0 0 0 currentColor;animation:pulse 2.6s ease-out infinite} @keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(196,180,255,.55)} 70%{box-shadow:0 0 0 8px rgba(196,180,255,0)} 100%{box-shadow:0 0 0 0 rgba(196,180,255,0)} } /* 正典：句子型 Hero 主標要比 --fs-h1 小、行高放寬，否則整句會爆版把 CTA 推到摺線下 */ .hero h1{font-size:clamp(28px,3.9vw,50px);font-weight:800;line-height:1.28; letter-spacing:-.03em;max-width:16em} .hero .lead{margin-top:var(--space-head);font-size:var(--fs-lead);color:var(--d-soft); max-width:var(--measure)} .hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--gap-action)} .hero-note{margin-top:var(--gap-note);font-size:var(--fs-small);color:var(--d-muted)} /* 去背人像：底部遮罩淡出，避免透明圖在深色底上出現硬切邊 */ .hero-portrait{position:relative;justify-self:center;width:min(100%,392px)} .hero-portrait img{width:100%; -webkit-mask-image:linear-gradient(to bottom,#000 74%,transparent 99%); mask-image:linear-gradient(to bottom,#000 74%,transparent 99%)} .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px; margin-top:clamp(34px,4vw,52px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--d-line)} /* 正典：大數字在窄的多欄會爆行 → clamp 收字級上限＋nowrap */ .stats b{display:block;font-size:clamp(24px,3vw,38px);font-weight:var(--fw-black); letter-spacing:-.03em;white-space:nowrap} .stats b i{font-style:normal;font-variant-numeric:tabular-nums} .stats span{display:block;margin-top:5px;font-size:var(--fs-small);color:var(--d-muted)} /* ---------- 按鈕 ---------- */ .btn{display:inline-block;text-align:center;text-decoration:none;padding:15px 26px; border-radius:100px;font-weight:var(--fw-bold);font-size:var(--fs-body); transition:transform var(--dur) var(--ease-out),box-shadow var(--dur), border-color var(--dur),color var(--dur),background var(--dur)} .btn-primary{background:var(--accent);color:#fff} .btn-primary:hover{box-shadow:0 10px 30px rgba(106,71,245,.34);transform:translateY(-2px)} .btn-primary:active{transform:translateY(0) scale(.985)} .btn-ghost{background:transparent;color:inherit;border:1px solid currentColor;opacity:.85} .btn-ghost:hover{opacity:1} .section .btn-ghost{background:var(--bg-card);color:var(--text-primary);border-color:var(--line);opacity:1} .section .btn-ghost:hover{border-color:var(--accent);color:var(--accent)} /* ---------- 證據組的標籤 ---------- * ⚠️ 這裡原本是一個
收合（詢問截圖、評價牆都收在裡面）。2026-08-11 全部攤開： * Edwind——「為什麼要把它收起來呢？然後觀眾在讀的時候，他也不能很直覺地懂這個東西要 expand。」 * 收合的代價是：**證據放了等於沒放**，而且那個開合記號沒人看得懂。 * 現在改成「標籤＋直接看得到的內容」，標籤上仍寫清楚有幾張。 */ .strip-lb,.wall-h{display:inline-flex;align-items:center;gap:8px;margin:var(--gap-module) 0 var(--gap-note); font-size:var(--fs-small);font-weight:var(--fw-med);color:var(--text-dim); background:var(--bg-card);border:1px solid var(--line);padding:8px 15px;border-radius:100px} .strip-lb em,.wall-h em{font-style:normal;font-size:12px;color:var(--text-faint); background:var(--bg-section-b);border:1px solid var(--line);padding:2px 8px;border-radius:100px} /* ---------- 影片分類頁籤 ---------- * 四個入口全部看得見，內容永遠有一份在顯示。 * ⚠️ 這不是「收合」：收合是內容被藏起來、要先按一下才知道裡面有什麼（Edwind 已經 * 否決過兩次）；頁籤是四個標籤都在檯面上的四選一導覽，預設那一類就攤在下面。 * 手機橫向捲，不換行成兩排——兩排頁籤會讓人以為是兩組東西。 */ /* 標頭 → 頁籤列用 --gap-action 而不是 --space-block：頁籤是「你現在卡在哪個問題？ * 從那一類看起」這句話**直接引出的操作**，兩者是一組，不是標頭與另一個內容模組。 * 原本吃 .sechead 的 --space-block(56px)，Edwind 兩次回報那個空隙太大。 * 內容模組從頁籤底下的 .tabpanel 才開始。 */ .sechead:has(+ .tabs){margin-bottom:var(--gap-action)} .tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none; margin-bottom:var(--gap-inner)} .tabs::-webkit-scrollbar{display:none} .tab{flex:none;font-family:inherit;font-size:15.5px;font-weight:var(--fw-med); color:var(--text-dim);background:var(--bg-card);border:1px solid var(--line); padding:12px 20px;border-radius:100px;cursor:pointer; transition:background var(--dur),color var(--dur),border-color var(--dur)} .tab:hover{border-color:var(--badge-border);color:var(--text-primary)} .tab[aria-selected="true"]{background:var(--accent);border-color:var(--accent); color:#fff;font-weight:var(--fw-bold)} .tab-desc{margin-bottom:var(--gap-inner);font-size:var(--fs-body);color:var(--text-secondary)} .tab-more{margin-top:var(--gap-inner);font-size:var(--fs-small);color:var(--text-faint)} /* 「這一類還有 N 支」→ 頻道按鈕。原本完全沒有這條規則，兩者是 0px 貼在一起—— * Edwind：「這個就比較沒有空間感」。它跟 Hero／聯絡區的「文字→按鈕」是同一種關係， * 所以吃同一個值。 */ .chan-cta{margin-top:var(--gap-action)} .tabpanel{animation:fadeUp var(--dur) var(--ease-out)} /* ---------- 影片 ---------- */ .subhead{font-size:var(--fs-h3);font-weight:720;letter-spacing:-.02em; margin:var(--space-block) 0 var(--gap-inner)} .subhead:first-of-type{margin-top:0} .vids{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))} .vid{display:block;text-decoration:none} .vid-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:14px; background:#e7e7ee;box-shadow:var(--shadow-card)} /* API 給的縮圖多半是 maxresdefault（1280×720，真 16:9）；少數只有 hqdefault（480×360， * 4:3 畫布、上下各 45px 黑邊）。object-fit:cover 兩種都對：4:3 來源剛好只露出中間 * 75% 高，那正是 16:9 的內容本身。 * ⚠️ 不要再加 transform:scale() 去「裁黑邊」——那會把標題文字切掉。 */ .vid-thumb img{width:100%;height:100%;object-fit:cover; transition:transform var(--dur-slow) var(--ease-out)} .vid:hover .vid-thumb img{transform:scale(1.045)} .vid-thumb::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity var(--dur); background:linear-gradient(to top,rgba(10,10,14,.42),transparent 55%)} .vid:hover .vid-thumb::after{opacity:1} .vid-play{position:absolute;left:50%;top:50%;translate:-50% -50%;width:56px;height:56px; border-radius:50%;background:rgba(10,10,14,.62);backdrop-filter:blur(6px);color:#fff; display:grid;place-items:center;z-index:1; transition:background var(--dur),transform var(--dur) var(--ease-out)} .vid-play .ic{width:30px;height:30px} .vid:hover .vid-play{background:var(--accent);transform:scale(1.1)} .vid-dur{position:absolute;right:8px;bottom:8px;z-index:1;display:inline-flex;align-items:center; font-size:12px;font-weight:var(--fw-med);color:#fff;background:rgba(10,10,14,.82); padding:3px 8px;border-radius:7px;letter-spacing:0;font-variant-numeric:tabular-nums} .vid h4{margin-top:12px;font-size:var(--fs-body);font-weight:var(--fw-med); line-height:1.45;letter-spacing:-.015em;transition:color var(--dur)} .vid:hover h4{color:var(--accent)} .vid-latest h4{font-size:var(--fs-small);color:var(--text-secondary)} .vid-date{display:block;margin-top:6px;font-size:13px;color:var(--text-faint); font-variant-numeric:tabular-nums} /* ---------- 見證 ---------- */ .quotes{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .quote{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius); padding:32px 28px 26px;box-shadow:var(--shadow-card);position:relative; transition:transform var(--dur) var(--ease-out),box-shadow var(--dur)} .quote:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)} .quote::before{content:"\201C";position:absolute;top:4px;left:20px;font-size:68px;line-height:1; color:var(--accent);opacity:.15;font-family:Georgia,"Times New Roman",serif} .quote p{position:relative;color:var(--text-secondary);font-size:var(--fs-small);line-height:1.62} .quote cite{display:block;margin-top:var(--gap-note);font-style:normal;font-weight:var(--fw-med); font-size:var(--fs-small);color:var(--text-primary)} /* 評價：**每則一個具名區塊**，不是一面收合的截圖牆。 * Edwind 2026-08-11：收在
裡＝等於沒放。看 review 是決定要不要相信這個人的 * 關鍵動作，不該還要先按一下才看得到。 * 頭像是姓名首字圓章——這些人的照片我們沒有，不生假人臉。 */ .revs{display:flex;flex-direction:column;gap:16px} .rev{background:var(--bg-card);border:1px solid var(--line);border-radius:18px; padding:20px;box-shadow:var(--shadow-card); transition:transform var(--dur) var(--ease-out),box-shadow var(--dur)} .rev:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)} .rev-hd{display:flex;align-items:center;gap:12px;margin-bottom:14px} .rev-av{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:50%; background:var(--badge-bg);border:1px solid var(--badge-border);color:var(--accent); font-weight:var(--fw-black);font-size:18px;line-height:1} .rev h4{font-size:var(--fs-body);font-weight:700;letter-spacing:-.015em} .rev img{width:100%;border-radius:12px;border:1px solid var(--line-soft);background:#fff} /* ---------- 關於 ---------- */ /* 這一節只有長內文、沒有卡片，所以整個 section 一起收回 --measure—— * 標頭與內文同寬，左右緣仍然對齊（正典允許的另一種做法）。 */ /* ⚠️ 欄寬只有這一個地方能決定 —— 別在元件上再加 max-width * * 為什麼是這樣寫：`shared/design/design-rules.md` 的硬規則是「同一 section 內標頭／ * 內文／卡片共用欄寬、左右緣對齊」。這條規則之前被違反過三次，每次都是同一個模式—— * 有人（我）在 .ryan-bio / .statrow / .flags / .callout / .reason 各自加了 max-width:680px， * 標頭滿寬、內容窄 680px，右緣就歪了。 * * 把寬度收到 .wrap 一個地方之後，section 內所有東西**自動同寬**， * 要歪掉必須有人主動在元件上加 max-width——所以下面那條 tripwire 會在每次 build 時檢查。 * 需要窄欄的 section 掛 class="section section--narrow" 就好。 */ .section--narrow .wrap{max-width:calc(var(--measure) + var(--gutter) * 2)} .prose{color:var(--text-secondary);text-align:justify;text-justify:inter-character} .prose p + p{margin-top:var(--space-stack)} .prose strong{font-weight:720;color:var(--text-primary)} /* （原本這裡有 details.story 的樣式——舊版自述那個摺疊。2026-08-11 整段下架，樣式一併移除。） */ /* ---------- 聯絡 ---------- */ .cta-card{background:var(--bg-card);border:1px solid var(--badge-border);border-radius:var(--radius); padding:clamp(26px,3.4vw,48px);position:relative;overflow:hidden; box-shadow:0 0 0 5px var(--accent-halo),0 22px 54px -26px var(--accent-glow),var(--shadow-card)} .cta-card::before{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px; border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(106,71,245,.10),transparent 68%)} .cta-card > *{position:relative} .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--gap-action)} .trust{margin-top:var(--gap-note);font-size:var(--fs-small);color:var(--text-faint)} .chan-lead{margin:var(--space-block) 0 var(--gap-inner);font-weight:var(--fw-med)} /* 桌機兩欄（不是 auto-fit 擠成四欄）：四張並排時每張只剩 244px， * 「+60 10-821 6903」會折成三行，看起來像壞掉。兩欄各約 510px，一行放得下。 */ .channels{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))} .chan{display:flex;align-items:center;gap:16px;text-decoration:none;padding:22px 24px; background:var(--bg-card);border:1px solid var(--line);border-radius:18px; box-shadow:var(--shadow-card); transition:transform var(--dur) var(--ease-out),border-color var(--dur),box-shadow var(--dur)} .chan:hover{border-color:var(--badge-border);transform:translateY(-2px);box-shadow:var(--shadow-lift)} .chan--static{cursor:default;box-shadow:none;background:transparent;border-style:dashed} .chan--static:hover{transform:none;border-color:var(--line);box-shadow:none} .chan-ic{display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:14px; background:var(--badge-bg);border:1px solid var(--badge-border);color:var(--accent); transition:background var(--dur),color var(--dur)} .chan-ic .ic{width:23px;height:23px} .chan:hover .chan-ic{background:var(--accent);color:#fff} .chan--static:hover .chan-ic{background:var(--badge-bg);color:var(--accent)} .chan-tx{flex:1;min-width:0} /* 渠道名不再是全大寫的小字——那是給次要標籤用的樣式，這裡它是卡片的主體 */ .chan-tx b{display:flex;align-items:center;gap:9px;font-size:var(--fs-body);font-weight:700; letter-spacing:-.015em} /* 帳號一行放完：折行的電話號碼比縮寫的更難看 */ .chan-tx > span{display:block;margin-top:4px;font-size:var(--fs-small);color:var(--text-dim); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .chan-tag{display:inline-block;flex:none;font-style:normal;font-size:12px; font-weight:var(--fw-med);color:var(--text-faint); background:var(--bg-section-b);border:1px solid var(--line);padding:2px 9px;border-radius:100px} .chan .ic-ext{flex:none;margin-left:4px} .chan:hover .ic-ext{opacity:.9;color:var(--accent);transform:translate(2px,-2px)} /* ---------- 社群 ---------- * 一張主卡（深色，跟 Hero 同語彙）＋三張次卡。`--brand` 是各平台代表色， * 只用在圖標底與 hover 的邊框／光暈——顏色不是商標圖形，這樣用不會踩品牌規範。 */ .soc-main{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(24px,4vw,48px);align-items:center;text-decoration:none; background:var(--dark);color:var(--d-ink);border-radius:24px; padding:clamp(28px,3.6vw,44px);margin-bottom:var(--gap-inner);position:relative;overflow:hidden; transition:transform var(--dur) var(--ease-out),box-shadow var(--dur)} /* 右上角一團品牌色光暈：跟 Hero 同一招，讓深色底不是一片死黑 */ .soc-main::before{content:"";position:absolute;width:420px;height:420px;right:-90px;top:-160px; border-radius:50%;pointer-events:none; background:radial-gradient(circle,color-mix(in srgb,var(--brand) 42%,transparent),transparent 68%)} .soc-main > *{position:relative} .soc-main:hover{transform:translateY(-3px); box-shadow:0 24px 60px -22px color-mix(in srgb,var(--brand) 60%,transparent)} .soc-plat{display:block;margin-top:var(--gap-inner);font-size:var(--fs-eyebrow);font-weight:var(--fw-bold); letter-spacing:.12em;text-transform:uppercase;color:var(--brand)} .soc-main h3{margin-top:6px;font-size:clamp(24px,3vw,34px);font-weight:800;letter-spacing:-.03em} .soc-main p{margin-top:12px;color:var(--d-soft);font-size:var(--fs-body);line-height:var(--lh-body)} .soc-go{display:inline-flex;align-items:center;margin-top:var(--gap-action);font-weight:var(--fw-bold); font-size:var(--fs-body);color:var(--d-ink); background:var(--brand);padding:13px 24px;border-radius:100px} .soc-go .ic-ext{margin-left:8px;opacity:1;color:currentColor} .soc-main:hover .ic-ext{transform:translate(2px,-2px)} /* 數字：這一區最有力的東西，給它獨立的視覺重量 */ .soc-stats{display:grid;gap:14px} .soc-stats div{padding:16px 20px;border-radius:16px; background:rgba(255,255,255,.06);border:1px solid var(--d-line)} .soc-stats b{display:block;font-size:clamp(22px,2.6vw,30px);font-weight:var(--fw-black); letter-spacing:-.02em;font-variant-numeric:tabular-nums} .soc-stats span{display:block;margin-top:3px;font-size:var(--fs-small);color:var(--d-muted)} .soc-ic{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:13px; background:color-mix(in srgb,var(--brand) 16%,transparent); border:1px solid color-mix(in srgb,var(--brand) 34%,transparent); color:var(--brand);font-size:19px;font-weight:var(--fw-black); transition:background var(--dur),color var(--dur)} .soc-ic--lg{width:54px;height:54px;border-radius:16px;font-size:23px} /* 品牌圖標：整體等比，不拉伸、不改造形狀（商標仍屬各平台所有） */ .soc-glyph{width:23px;height:23px;display:block} .soc-ic--lg .soc-glyph{width:29px;height:29px} .socials{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} .socials a{display:block;text-decoration:none;padding:20px;border-radius:16px; background:var(--bg-card);border:1px solid var(--line); transition:transform var(--dur) var(--ease-out),border-color var(--dur),box-shadow var(--dur)} .socials a:hover{transform:translateY(-3px); border-color:color-mix(in srgb,var(--brand) 45%,transparent); box-shadow:0 14px 34px -16px color-mix(in srgb,var(--brand) 55%,transparent)} .socials a:hover .soc-ic{background:var(--brand);color:#fff} .soc-t{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px} .socials b{font-size:var(--fs-body);font-weight:var(--fw-bold);letter-spacing:-.015em} .socials a:hover .ic-ext{transform:translate(2px,-2px);opacity:.9;color:var(--brand)} .soc-h{display:block;font-size:var(--fs-small);color:var(--text-dim);margin-top:3px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ---------- Footer ---------- */ footer{border-top:1px solid var(--line);padding:40px 0 56px; font-size:var(--fs-small);color:var(--text-faint)} footer .fl{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:14px} footer a{color:var(--text-dim);transition:color var(--dur)} footer a:hover{color:var(--accent)} footer p{max-width:var(--measure);line-height:1.55} footer p + p{margin-top:8px} footer .platform{font-size:12px;opacity:.75;max-width:none} /* ---------- 右上角選單 ---------- */ .menu-btn{display:grid;place-items:center;width:44px;height:44px;flex:none;margin-left:4px; border:1px solid var(--d-line);border-radius:12px;background:rgba(255,255,255,.06); color:var(--d-ink);cursor:pointer; transition:background var(--dur),border-color var(--dur)} .menu-btn:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)} .menu-btn .ic{width:21px;height:21px} /* 全站共用一片遮罩：選單與各個 pop-up 都用它（兩片各自維護＝同時開會疊出兩層暗底）。 * ⚠️ **不要用 backdrop-filter:blur**——Edwind 2026-08-11 看預覽：「它 expand 出來， * 整個畫面是蒙的。」模糊整個背景會讓人以為是頁面壞了，而遮罩要做的只是 * 「把注意力交給前景」，不是把後面弄糊。 * 兩級深度：選單只是一個小面板（.scrim--soft，淡），pop-up 是全屏對話框（深）。 */ .scrim{position:fixed;inset:0;z-index:110;background:rgba(6,7,11,.44); opacity:0;transition:opacity var(--dur)} .scrim.is-open{opacity:1} .scrim--soft{background:rgba(6,7,11,.16)} .menu-panel{position:fixed;z-index:120;top:66px;right:var(--gutter); width:min(392px,calc(100vw - var(--gutter) * 2));max-height:calc(100dvh - 90px); display:flex;flex-direction:column;overflow:hidden; background:var(--bg-card);border:1px solid var(--line);border-radius:20px; box-shadow:0 2px 6px rgba(10,10,14,.06),0 32px 70px -20px rgba(10,10,14,.32); opacity:0;transform:translateY(-10px) scale(.985);transform-origin:top right; transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)} .menu-panel.is-open{opacity:1;transform:none} .menu-head{display:flex;align-items:center;justify-content:space-between; padding:16px 18px 12px;border-bottom:1px solid var(--line-soft)} .menu-title{font-size:var(--fs-small);font-weight:var(--fw-bold); letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint)} .menu-close{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:10px; background:transparent;color:var(--text-dim);cursor:pointer;transition:background var(--dur),color var(--dur)} .menu-close:hover{background:var(--bg-section-b);color:var(--text-primary)} .menu-close .ic{width:19px;height:19px} .menu-body{overflow-y:auto;padding:8px 10px 16px;-webkit-overflow-scrolling:touch} .menu-group + .menu-group{margin-top:6px;padding-top:10px;border-top:1px solid var(--line-soft)} .menu-group h3{font-size:12px;font-weight:var(--fw-bold);letter-spacing:.1em;text-transform:uppercase; color:var(--text-faint);padding:10px 12px 6px} .menu-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:13px; text-decoration:none;transition:background var(--dur)} .menu-item:hover{background:var(--bg-section-b)} .menu-ic{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:11px; background:var(--badge-bg);color:var(--accent);transition:background var(--dur),color var(--dur)} .menu-ic .ic{width:19px;height:19px} .menu-item:hover .menu-ic{background:var(--accent);color:#fff} .menu-tx{min-width:0;flex:1} .menu-tx b{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:var(--fw-med); letter-spacing:-.01em} .menu-tx > span{display:block;font-size:13px;color:var(--text-dim);line-height:1.4;margin-top:2px} .menu-soon{font-style:normal;font-size:11px;font-weight:var(--fw-med);letter-spacing:.02em; color:var(--text-faint);background:var(--bg-section-b);border:1px solid var(--line); padding:2px 7px;border-radius:100px} .menu-item.is-soon{opacity:.5;cursor:default} .menu-item.is-soon:hover{background:transparent} .menu-item.is-soon:hover .menu-ic{background:var(--badge-bg);color:var(--accent)} .menu-item .ic-go{opacity:.3;margin:0} .menu-item:hover .ic-go{opacity:.8;transform:translateX(3px);color:var(--accent)} .menu-cta{display:block;margin:14px 12px 4px;padding:14px} html.dlg-open{overflow:hidden} /* ---------- 資源 pop-up ---------- * 卡面只放一顆按鈕，選項在這裡列（Edwind 2026-08-11 工單③）。 * 桌機置中浮層、手機從底部升起的抽屜——手機拇指構得到的是下緣，不是螢幕中央。 * ⚠️ translate 與 transform 是兩個獨立屬性：置中用 translate（不會被動畫覆寫）， * 進場位移用 transform（.is-open 時歸零）。寫在同一個 transform 裡就會互相蓋掉。 */ .modal{position:fixed;z-index:120;left:50%;top:50%;translate:-50% -50%; width:min(560px,calc(100vw - var(--gutter) * 2));max-height:min(86dvh,780px); display:flex;flex-direction:column;overflow:hidden; background:var(--bg-card);border:1px solid var(--line);border-radius:22px; box-shadow:0 2px 6px rgba(10,10,14,.06),0 40px 90px -24px rgba(10,10,14,.38); opacity:0;transform:translateY(10px) scale(.985); transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)} .modal.is-open{opacity:1;transform:none} .modal--wide{width:min(880px,calc(100vw - var(--gutter) * 2))} .modal-head{display:flex;align-items:flex-start;gap:14px; padding:24px 24px 18px;border-bottom:1px solid var(--line-soft)} .modal-ttl{flex:1;min-width:0} .modal-ttl h2{font-size:var(--fs-h3);font-weight:780;letter-spacing:-.025em;line-height:var(--lh-snug)} .modal-ttl p{margin-top:8px;font-size:var(--fs-small);color:var(--text-dim);line-height:var(--lh-body)} .modal-x{display:grid;place-items:center;width:38px;height:38px;flex:none;border:0;border-radius:11px; background:var(--bg-section-b);color:var(--text-dim);cursor:pointer; transition:background var(--dur),color var(--dur)} .modal-x:hover{background:var(--accent);color:#fff} .modal-x .ic{width:19px;height:19px} .modal-body{overflow-y:auto;padding:16px 20px 22px;-webkit-overflow-scrolling:touch} /* 選項：整條可點（不是只有那幾個字），一條一個目標 */ .opts{list-style:none;display:flex;flex-direction:column;gap:4px} .opts a{display:flex;align-items:center;gap:12px;padding:15px 16px;border-radius:14px; text-decoration:none;border:1px solid var(--line);background:var(--bg-card); transition:border-color var(--dur),background var(--dur),transform var(--dur) var(--ease-out)} .opts a:hover{border-color:var(--badge-border);background:var(--badge-bg);transform:translateX(3px)} /* 還不能點的選項：虛線框、不是連結。狀態寫在名字旁邊，不是做成按不動的假按鈕。 */ .opts li.is-soon{display:flex;align-items:center;gap:12px;padding:15px 16px;border-radius:14px; border:1px dashed var(--line);background:transparent} .opts li.is-soon .opt-tx b{color:var(--text-dim)} .opt-soon{flex:none;font-style:normal;font-size:12px;font-weight:var(--fw-med); color:var(--text-faint);background:var(--bg-section-b);border:1px solid var(--line); padding:2px 9px;border-radius:100px} .opt-tx{flex:1;min-width:0} .opt-tx b{display:flex;align-items:center;gap:9px;font-size:var(--fs-body);font-weight:700; letter-spacing:-.015em} .opt-tx span{display:block;margin-top:3px;font-size:var(--fs-small);color:var(--text-dim);line-height:1.45} .opts .ic-go{flex:none;opacity:.4;margin:0} .opts a:hover .ic-go{opacity:1;color:var(--accent);transform:translateX(3px)} .opt-more{display:inline-flex;align-items:center;margin-top:var(--gap-action);text-decoration:none; font-size:var(--fs-small);font-weight:var(--fw-med);color:var(--accent)} .opt-more:hover .ic-go{transform:translateX(4px)} .opt-more .ic-ext{margin-left:6px;opacity:.6} .modal-foot{margin-top:var(--gap-inner);padding-top:16px;border-top:1px solid var(--line-soft); font-size:12.5px;color:var(--text-faint);line-height:1.5} .modal-body .subhead:first-child{margin-top:0} .modal-body .vids{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px} /* ---------- 認識 Ryan ---------- */ .ryan-head{display:flex;align-items:center;gap:22px;margin-bottom:var(--gap-module)} .ryan-photo{width:clamp(104px,13vw,150px);aspect-ratio:1;flex:none;border-radius:50%; overflow:hidden;background:var(--dark); box-shadow:0 22px 52px -26px var(--accent-glow),0 0 0 1px var(--line)} .ryan-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 12%} .ryan-nm{font-size:clamp(22px,2.6vw,30px);font-weight:760;letter-spacing:-.02em} .ryan-role{font-size:var(--fs-small);color:var(--text-dim);margin-top:7px;line-height:1.5} .statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px; margin:var(--gap-module) 0 var(--gap-inner)} .statrow .st{padding:22px 12px;border-radius:18px;text-align:center; background:var(--bg-card);border:1px solid var(--line);box-shadow:var(--shadow-card)} .statrow .v{font-size:var(--fs-stat);font-weight:var(--fw-bold);letter-spacing:-.01em;line-height:1; white-space:nowrap} .statrow .v i{font-style:normal;font-variant-numeric:tabular-nums} .statrow .v small{font-size:.46em;font-weight:var(--fw-bold);color:var(--text-dim)} .statrow .l{font-size:12.5px;color:var(--text-dim);margin-top:10px;line-height:1.45} .flags{display:flex;flex-wrap:wrap;align-items:center;gap:9px} .flags-lb{font-size:var(--fs-small);color:var(--text-faint)} .flag{font-size:13.5px;font-weight:var(--fw-med);color:var(--text-secondary); background:var(--bg-card);border:1px solid var(--line);padding:7px 14px;border-radius:980px} .flags + .prose{margin-top:var(--gap-module)} /* 重點一句：左側 accent 豎線（刻意不做成膠囊——膠囊在這裡會跟 eyebrow 撞語意） */ .callout{margin-top:var(--gap-module);padding:16px 20px; border-left:3px solid var(--accent);background:var(--badge-bg); border-radius:0 14px 14px 0;color:var(--text-primary);font-size:var(--fs-body)} .callout strong{font-weight:760} /* ---------- 三個理由 ---------- */ .reason{padding-top:var(--space-block)} .reason + .reason{margin-top:var(--space-block);border-top:1px solid var(--line)} /* ⚠️ 第一則不要那道上內距——它上面是 sechead，而 sechead 自己已經有 margin-bottom。 * 兩個疊起來是 space-block×2（桌機約 112px），標頭與第一則之間就開出一個大洞。 * 那道內距是為了「理由之間那條分隔線」留的呼吸，第一則上面沒有線。 * 〔Edwind 2026-08-11 看預覽回報：「中間有一個很大的空格，非常不合理」〕 */ .reason:first-of-type{padding-top:0} .reason-hd{display:flex;align-items:baseline;gap:14px;margin-bottom:var(--gap-inner)} .reason-n{font-size:var(--fs-small);font-weight:var(--fw-black);letter-spacing:.04em; color:var(--accent);background:var(--badge-bg);border:1px solid var(--badge-border); padding:4px 11px;border-radius:100px;flex:none;font-variant-numeric:tabular-nums} .reason-hd h3{font-size:var(--fs-h3);font-weight:720;letter-spacing:-.02em;line-height:var(--lh-snug)} .reason .prose + .shots,.reason .prose + .strip,.reason .prose + .yt-btn, .reason .prose + .shot-one,.reason .prose + .vid-embed,.reason .prose + .pending{margin-top:var(--gap-module)} .reason .shots + .yt-btn,.reason .yt-btn + .prose,.reason .strip + .prose, .reason .shot-one + .prose,.reason .shots + .prose{margin-top:var(--gap-module)} .shots{display:grid;gap:12px} .shots img{width:100%;border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow-card)} /* 各國詢問截圖：直式、數量多——橫向捲比堆成一長列好讀。 * scroll-snap 讓它一張一張停，不會停在兩張中間。 * 攤開之後**要讓人看得出可以捲**：留一條看得見的捲軸，並讓下一張露半截（那是最可靠的 * 「還有更多」訊號，比任何提示文字都直覺）。 */ .strip{display:flex;gap:12px;overflow-x:auto;padding-bottom:12px; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; scrollbar-width:thin;scrollbar-color:var(--badge-border) transparent} .strip::-webkit-scrollbar{height:8px} .strip::-webkit-scrollbar-track{background:var(--bg-section-b);border-radius:100px} .strip::-webkit-scrollbar-thumb{background:var(--badge-border);border-radius:100px} .strip::-webkit-scrollbar-thumb:hover{background:var(--accent)} .strip:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px} .strip img{width:clamp(148px,42vw,186px);flex:none;scroll-snap-align:start; border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow-card)} .shot-one img{width:min(100%,340px);border-radius:14px;border:1px solid var(--line); box-shadow:var(--shadow-card)} .yt-btn{display:inline-flex;align-items:center;gap:11px;width:fit-content; font-weight:var(--fw-med);font-size:15px;text-decoration:none;color:var(--text-primary); background:var(--bg-card);border:1px solid var(--line);padding:12px 20px;border-radius:980px; box-shadow:var(--shadow-card); transition:border-color var(--dur),transform var(--dur) var(--ease-out)} .yt-btn:hover{border-color:var(--accent);transform:translateY(-2px)} .yt-btn .ic{width:22px;height:22px;color:var(--accent)} .pending{display:inline-flex;align-items:center;font-size:var(--fs-small);color:var(--text-faint); background:var(--bg-section-b);border:1px dashed var(--line);padding:11px 16px;border-radius:12px} .vid-embed{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden; background:#e7e7ee;box-shadow:var(--shadow-card)} .vid-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* .wall-h（「Facebook 上的公開推薦」）與 .strip-lb 共用同一顆膠囊樣式，定義在上面。 * 兩者都是「這組東西叫什麼、有幾張」的來源標籤，不是一層標題。 */ .reason .quotes{margin-top:var(--gap-module);grid-template-columns:minmax(0,1fr)} /* ---------- 動效 ---------- * 只用 transform／opacity（不動 width/height/top/left，那會觸發重排、在手機上會卡）。 * 進場一次性，捲回去不重播。stagger 40ms／件——再慢會像在等它演完。 */ /* ⚠️ `.js` 前綴是刻意的：只有在 JS 跑得起來時才把內容藏起來。 * 沒有它的話，JS 一出問題（被擋、報錯、IntersectionObserver 沒觸發） * 整頁 Hero 以下就是一片空白——動效再好也不值這個風險。 */ .js [data-reveal]{opacity:0;transform:translateY(16px)} .js [data-reveal].in{opacity:1;transform:none; transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out); transition-delay:calc(var(--i,0) * 40ms)} @keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* Hero 在首屏、一定看得到，用純 CSS 依序進場就好，不必等 IntersectionObserver */ .hero .kicker,.hero h1,.hero .lead,.hero-actions,.hero-note,.hero-portrait{ animation:fadeUp var(--dur-slow) var(--ease-out) both} .hero h1{animation-delay:70ms} .hero .lead{animation-delay:140ms} .hero-actions{animation-delay:210ms} .hero-note{animation-delay:280ms} .hero-portrait{animation-delay:120ms} /* ---------- 響應式 ---------- */ @media(max-width:768px){ /* 正典：手機 hero／區塊標頭／數據／CTA 置中；長段落不置中（見下方 .prose） */ .hero-grid{grid-template-columns:minmax(0,1fr);gap:26px;text-align:center} .hero h1{font-size:clamp(25px,7vw,34px);max-width:none} .hero .lead{max-width:none} .hero-actions{flex-direction:column} .hero-actions .btn,.actions .btn{width:100%} /* Hero 人像在手機**不隱藏**——那張圖是 Edwind 指定的主視覺，手機又是主要流量。 * 改成放在 CTA 之後、成績單之前：CTA 仍在首屏內，人像也看得到。 */ .hero-portrait{width:min(70%,230px);margin:4px auto 0;order:2} .hero-grid > div:first-child{order:1} .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px;text-align:center} .sechead{text-align:center} .eyebrow{font-size:15px} /* 正典：行動版 eyebrow ≥15px（13px 太小看不清）*/ .eyebrow::before{display:none} /* 置中時左側那條短線會看起來像沒對齊 */ .cta-card{text-align:center} .cta-card .prose{text-align:justify} /* 長段落仍然兩端對齊，不跟著置中 */ /* 渠道卡在手機**不要**堆成置中直排——圖標在左、文字在右那條線比較好掃， 而且一行一張的時候寬度本來就夠。 */ .channels{grid-template-columns:minmax(0,1fr)} .chan{padding:18px 20px} .chan-lead{text-align:center} .topbar .nav-link{display:none} /* 手機收掉快速連結，改由右上角選單承接 */ .nav-cta{font-size:13px;padding:7px 13px} .quote{padding:24px 22px} /* 選單在手機是從頂條下方落下的整片面板 */ .menu-panel{top:62px;left:var(--gutter);right:var(--gutter);width:auto; max-height:calc(100dvh - 80px);transform-origin:top center} /* 社群主卡：手機單欄堆疊，三個數字改成一排三格（直排會把卡拉得太長） */ .soc-main{grid-template-columns:minmax(0,1fr);gap:26px} .soc-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;text-align:center} .soc-stats div{padding:14px 8px} .soc-go{width:100%;justify-content:center} .socials{grid-template-columns:minmax(0,1fr)} /* Ryan：頭像與名字在手機置中堆疊；長內文仍然兩端對齊、不置中 */ .ryan-head{flex-direction:column;text-align:center;gap:16px} .statrow{grid-template-columns:repeat(2,1fr)} .flags{justify-content:center} .reason-hd{justify-content:center;text-align:center} .shot-one{display:flex;justify-content:center} /* 橫向捲的截圖要能捲出容器的左右內距，否則第一張會貼著邊 */ .strip{margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important} [data-reveal]{opacity:1;transform:none} } /* ---------- 免費資源架（六格） ---------- * 這一節是把訪客轉成 lead 的地方，所以格子要看得清楚、動作要明確。 * planned 的格子不做成灰掉的佔位卡——它的 CTA 是「好了通知我」， * 那本身就是一個真的動作，只是次級樣式。 */ /* ⚠️ 字級：這一節的標題與說明**刻意比一般卡片大一級**。 * Edwind 2026-08-11 用手機看：「第一直覺就是字體偏小⋯⋯我們的受眾群有些年長者， * 字體太小他們可能會看不清楚。」這一節又正好是收 lead 的地方，看不清＝收不到。 * 標題 19–23px（原本跟內文同級 17–18px）、說明升到內文級 17–18px（原本 14px）。 * kicker 行動版 15px——正典 design-rules 那條「行動版 eyebrow ≥15px」同樣適用。 */ /* 桌機**一排兩張**（不是 auto-fit 塞成三張）。Edwind 2026-08-11：文章與訂閱兩格 * 先藏起來之後只剩四格，「如果是四個的話，我覺得一排兩個的排法比較合適」。 * 兩張的另一個好處：卡片寬度從 332px 變 508px，16:10 的資源圖大得多、標題也不用擠。 * ⚠️ 之後打開那兩格變六格時，2×3 仍然成立，不用改回三欄。 */ .reslist{display:grid;gap:20px;grid-template-columns:repeat(2,minmax(0,1fr))} .res{display:flex;flex-direction:column;background:var(--bg-card);border:1px solid var(--line); border-radius:var(--radius);padding:clamp(26px,3vw,32px) clamp(24px,2.6vw,28px); box-shadow:var(--shadow-card); transition:transform var(--dur) var(--ease-out),box-shadow var(--dur),border-color var(--dur)} .res:hover{transform:translateY(-3px);border-color:var(--badge-border);box-shadow:var(--shadow-lift)} .res-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:13px; background:var(--badge-bg);border:1px solid var(--badge-border);color:var(--accent);margin-bottom:var(--gap-inner)} .res-ic .ic{width:22px;height:22px} .res-k{display:block;font-size:13.5px;font-weight:var(--fw-bold);letter-spacing:.09em; text-transform:uppercase;color:var(--accent);margin-bottom:9px} .res h3{font-size:clamp(19px,2.1vw,23px);font-weight:740;letter-spacing:-.02em;line-height:var(--lh-snug)} /* ⚠️ 下緣那個 24px 是**按鈕的保底間距**，不要拿掉。 * 按鈕本身用 margin-top:auto 把自己推到卡底（桌機六張卡的按鈕才會對齊在同一條底線）， * 但 auto 只分配「多出來的空間」——手機單欄、卡高剛好貼合內容時沒有多餘空間， * auto 就等於 0，說明文字與按鈕會直接黏在一起。 * 〔Edwind 2026-08-11 手機截圖回報：「call to action 的 button 跟它上面的字沒有一點空間感」〕 */ .res p{margin-top:var(--gap-note);margin-bottom:var(--gap-action);font-size:var(--fs-body); color:var(--text-secondary);line-height:var(--lh-body)} /* 卡面的唯一動作。可能是 （直接外連）或