/* ========================================================================== 觸角科技股份有限公司 Sentacle Technology — 公司簡介全站樣式 -------------------------------------------------------------------------- 要換色調 / 間距 / 圓角，只改下面 :root 的變數即可。 所有選擇器都不依賴區塊的先後順序（不使用 :nth-child / + / ~）， 因此刪除或搬移任何一個
版面都不會塌。 ========================================================================== */ /* --- 設計 token（要換風格改這裡就好） ------------------------------------ 顏色一律寫成 light-dark(淺色值, 深色值)： ▸ 預設一律是淺色（:root 的 color-scheme: light），不跟隨系統設定 —— 大多數人是在會議或投影的情境下看這一頁，淺色比較穩定。 ▸ 想看深色的人按導覽列的切換鈕，app.js 會在 寫入 data-theme="dark" 並記在 localStorage，下次進來會記得。 下面只要改 color-scheme，全站顏色就整組跟著換 —— 不需要再寫第二份色票。 每個顏色前面那一行「同名的純色宣告」是給不支援 light-dark() 的舊瀏覽器 的淺色備援：它們會忽略後面那行，畫面依然完整，只是恆為淺色。 ------------------------------------------------------------------------ */ :root { color-scheme: light; /* 品牌色 —— 以「觸角」的意象取深青綠：像感測器、像神經， 刻意避開一般資訊服務公司常用的科技藍，才不會跟客戶的產品撞色。 深色底下品牌色要往亮處調，否則會糊在背景裡。 */ --brand: #0d7a71; /* 主要按鈕、連結、圖表 */ --brand: light-dark(#0d7a71, #4ec6b8); --brand-strong: #085a53; /* 加深，用於 hover 與強調數字（白底對比 7:1） */ --brand-strong: light-dark(#085a53, #7ddcd0); --brand-soft: #e3f3f1; /* 淡色底 */ --brand-soft: light-dark(#e3f3f1, #10302c); /* 疊在品牌色實心底上的文字色（按鈕、CTA、標籤）。 淺色模式是白字；深色模式的品牌色本身偏亮，要改用深字才看得清楚。 */ --on-brand: #ffffff; --on-brand: light-dark(#ffffff, #0b1614); /* 輔色 —— 暖琥珀。只用在需要「跳出來」的少數地方（作品標籤、重點節點）。 用量刻意壓低：全站超過三處以上就會失去強調效果。 */ --accent: #c2691a; --accent: light-dark(#c2691a, #e9a459); --accent-soft: #fbeee0; --accent-soft: light-dark(#fbeee0, #33251a); /* 交錯區塊的底色：帶一點青的極淺灰，跟主色同一個色溫 */ --tint: #f5f8f7; --tint: light-dark(#f5f8f7, #1a1d1c); /* 區塊小標籤：實心品牌色底 + 反白字。 不要用「淡底 + 品牌色字」—— 那樣 chip 跟頁面背景只差 1.2:1， 整個標籤會糊在背景裡看不出來。 */ --eyebrow-bg: var(--brand); --eyebrow-text: var(--on-brand); /* 中性色 */ --bg: #ffffff; --bg: light-dark(#ffffff, #141716); --surface: #ffffff; --surface: light-dark(#ffffff, #1f2322); --surface-alt: #f1f4f3; --surface-alt: light-dark(#f1f4f3, #282d2c); --border: #e2e6e5; --border: light-dark(#e2e6e5, #363b3a); --border-strong: #c3cac8; --border-strong: light-dark(#c3cac8, #4b5250); --text: #1f2422; --text: light-dark(#1f2422, #f2f5f4); --text-soft: #3d4744; --text-soft: light-dark(#3d4744, #dfe5e3); /* 註：--text-faint 是示意圖裡小標籤的顏色，兩個模式都不能再更淡， 否則會低於 WCAG AA 4.5:1 而看不清楚。 */ --text-faint: #5a6663; --text-faint: light-dark(#5a6663, #bcc4c2); /* 狀態色（示意圖用）—— 都會當文字用，已確保對比達 4.5:1 */ --ok: #1a5c40; --ok: light-dark(#1a5c40, #82d3a8); --warn: #7a4f05; --warn: light-dark(#7a4f05, #f0c579); /* 手機示意圖的機身色。手機是實體物件，兩個模式下都應該是深色的 —— 所以這裡不做明暗反轉，只在深色模式下再壓深一階讓它不要浮出來。 */ --phone-shell: #22282a; --phone-shell: light-dark(#22282a, #0a0d0d); /* 版面 */ --maxw: 1120px; --gutter: 24px; --radius: 14px; --radius-sm: 8px; --radius-lg: 22px; /* 間距 */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 76px; /* 區塊上下留白 */ /* 字級 —— 這頁常被拿去投影或在會議上共享畫面，整體比一般網頁大一階。 最小的 --fs-xs 也維持在 15px 以上。不建議把任何一階調小。 */ --fs-hero: clamp(2.2rem, 5.2vw, 3.7rem); --fs-h2: clamp(1.75rem, 3.4vw, 2.5rem); --fs-h3: 1.28rem; --fs-body: 1.06rem; --fs-sm: 1rem; --fs-xs: 0.94rem; /* 陰影 —— light-dark() 只吃顏色，所以先把顏色抽成變數，再組成陰影。 深色模式要更濃的黑，否則卡片會浮不出來。 */ --shadow-near: rgba(20, 35, 33, 0.05); --shadow-near: light-dark(rgba(20, 35, 33, 0.05), rgba(0, 0, 0, 0.4)); --shadow-far: rgba(20, 35, 33, 0.07); --shadow-far: light-dark(rgba(20, 35, 33, 0.07), rgba(0, 0, 0, 0.34)); --shadow: 0 1px 2px var(--shadow-near), 0 8px 28px var(--shadow-far); --shadow-sm: 0 1px 3px var(--shadow-near); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", Roboto, "Helvetica Neue", Arial, sans-serif; --font-num: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; } /* 使用者手動指定的模式（沒指定就是上面的預設淺色）。 只改 color-scheme，上面所有 light-dark() 都會跟著走。 */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* --- 基礎 ---------------------------------------------------------------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; /* 導覽列高 62px，這裡只留一點餘裕。 區塊本身還有 padding-top（--sp-9），不必重複加空白， 否則點導覽跳過去會離標題很遠。 */ scroll-padding-top: 70px; } body { margin: 0; font-family: var(--font); font-size: var(--fs-body); line-height: 1.72; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; /* 頁面本身絕不橫向捲動 */ } h1, h2, h3, h4, p, figure, ul, ol { margin: 0; } ul, ol { padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } /* 鍵盤操作時要看得見目前焦點在哪 */ :focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 4px; } img { max-width: 100%; display: block; } /* 螢幕閱讀器專用文字 */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --- 導覽列（連結由 app.js 依實際存在的區塊自動生成） --------------------- */ .nav { position: sticky; top: 0; z-index: 50; /* 不透明底色：半透明的話捲動時內文會從導覽列底下透出來，看起來像字被切一半 */ background: var(--bg); border-bottom: 1px solid var(--border); } /* 導覽列與內文對齊：外框寬度跟內文一樣，標準字才會跟下方標題切齊在同一條垂直線上 */ .nav__inner { max-width: calc(var(--maxw) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); height: 62px; display: flex; align-items: center; gap: var(--sp-4); } .nav__brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; color: var(--brand); transition: opacity 0.18s; } .nav__brand:hover { opacity: 0.72; } .nav__mark { display: block; height: 28px; width: 28px; flex-shrink: 0; } .nav__wordmark { display: flex; flex-direction: column; line-height: 1.1; } .nav__wordmark b { font-size: 1.02rem; font-weight: 700; letter-spacing: 0.01em; color: var(--text); } .nav__wordmark span { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand); } .nav__links { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; margin-left: auto; } .nav__links::-webkit-scrollbar { display: none; } /* 手機版的選單鈕。桌機寬度放得下八個連結，所以預設不出現。 */ .nav__toggle { display: none; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; padding: 0; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 12px; color: var(--text-soft); cursor: pointer; transition: color 0.16s, border-color 0.16s; } .nav__toggle:hover { color: var(--text); border-color: var(--border-strong); } .nav__burger { display: grid; gap: 4px; width: 18px; } .nav__burger i { height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.18s, opacity 0.18s; } /* 展開時三條線收成一個叉 */ .nav__toggle[aria-expanded="true"] .nav__burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav__toggle[aria-expanded="true"] .nav__burger i:nth-child(2) { opacity: 0; } .nav__toggle[aria-expanded="true"] .nav__burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .nav__link { font-size: var(--fs-xs); font-weight: 600; color: var(--text-soft); padding: 6px 11px; border-radius: 999px; white-space: nowrap; transition: background 0.16s, color 0.16s; } .nav__link:hover { background: var(--surface-alt); color: var(--text); } .nav__link.is-active { background: var(--brand-soft); color: var(--brand-strong); } /* --- 區塊骨架 ------------------------------------------------------------ */ .block { padding: var(--sp-9) 0; border-bottom: 1px solid var(--border); scroll-margin-top: 0; } .block--tint { background: var(--tint); } .block__inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); } /* 小標籤做成膠囊樣式，讓每個區塊開頭有記憶點 */ .block__eyebrow { display: inline-block; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.1em; color: var(--eyebrow-text); background: var(--eyebrow-bg); padding: 5px 16px; border-radius: 999px; /* 標籤與下方標題是一組，間距刻意收緊，看起來才像同一個單位 */ margin-bottom: var(--sp-3); } .block__title { font-size: var(--fs-h2); line-height: 1.28; font-weight: 700; letter-spacing: -0.015em; margin-bottom: var(--sp-4); } .block__lead { font-size: 1.18rem; color: var(--text-soft); max-width: 62ch; } /* 內文裡要強調的句子：加深 + 加粗，不用顏色（顏色投影時反而容易糊） */ .block__lead strong { color: var(--text); font-weight: 700; } .block__head { margin-bottom: var(--sp-8); } /* 兩欄：文字 + 示意圖 */ .split { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: var(--sp-8); align-items: center; } .split--reverse .split__media { order: -1; } .split__body > * + * { margin-top: var(--sp-4); } /* 標籤與標題是一組的，中間不該被 split__body 的通用間距再撐開一次 */ .split__body > .block__eyebrow + .block__title, .block__head > .block__eyebrow + .block__title { margin-top: 0; } @media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); } .split--reverse .split__media { order: 0; } } /* --- 通用小元件 ---------------------------------------------------------- */ .pill-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .pill { font-size: var(--fs-xs); padding: 4px 11px; border-radius: 999px; background: var(--surface-alt); border: 1px solid var(--border); color: var(--text-soft); white-space: nowrap; } .pill--brand { background: var(--brand-soft); border-color: transparent; color: var(--brand-strong); font-weight: 600; } .checklist { display: grid; gap: var(--sp-3); } .checklist li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--sp-3); align-items: start; font-size: var(--fs-body); } .checklist li::before { content: ""; width: 18px; height: 18px; margin-top: 6px; background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); background-image: linear-gradient(var(--brand), var(--brand)); background-size: 7px 7px; background-position: center; background-repeat: no-repeat; border-radius: 50%; } .checklist strong { font-weight: 650; } .checklist span { color: var(--text-soft); } /* 卡片格 */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--sp-4); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-5); box-shadow: var(--shadow-sm); } .card__title { font-size: var(--fs-h3); font-weight: 650; margin-bottom: var(--sp-2); } .card__text { font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.66; } /* 卡片上方的分類標籤。做成實心膠囊 —— 純色文字在深色底上不夠醒目 */ .card__tag { display: inline-block; font-size: var(--fs-sm); font-weight: 700; color: var(--eyebrow-text); background: var(--eyebrow-bg); padding: 3px 12px; border-radius: 999px; letter-spacing: 0.06em; margin-bottom: var(--sp-3); } .card__list { display: grid; gap: 6px; margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--border); } .card__list li { font-size: var(--fs-xs); color: var(--text-faint); padding-left: 14px; position: relative; } .card__list li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); } /* 統計數字 */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: var(--sp-5); } .stat__num { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--brand-strong); } .stat__num small { font-size: 0.46em; font-weight: 600; margin-left: 2px; letter-spacing: 0; } .stat__label { font-size: var(--fs-sm); color: var(--text-soft); margin-top: var(--sp-1); } /* --- .flow — 導入流程的節點串 -------------------------------------------- */ .flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: var(--sp-4); } .flow__node { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4); text-align: center; box-shadow: var(--shadow-sm); } /* 節點之間的連接線。最後一顆不畫。 用 ::after 疊在 gap 上，換行時線會被 overflow 藏住，不會亂飛。 */ .flow__node::after { content: ""; position: absolute; top: 50%; right: calc(var(--sp-4) * -1); width: var(--sp-4); height: 2px; background: var(--border-strong); } .flow__node:last-child::after { display: none; } .flow__step { font-family: var(--font-num); font-size: var(--fs-xs); font-weight: 700; color: var(--brand); letter-spacing: 0.08em; } .flow__name { font-size: var(--fs-h3); font-weight: 650; margin-top: 2px; } .flow__meta { font-size: var(--fs-xs); color: var(--text-faint); margin-top: var(--sp-1); line-height: 1.5; } @media (max-width: 640px) { .flow__node::after { display: none; } } /* --- .arch — 整合架構示意圖 ---------------------------------------------- */ .arch { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow); display: grid; gap: var(--sp-2); } .arch__label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; color: var(--text-faint); text-transform: uppercase; } .arch__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); gap: var(--sp-2); } .arch__box { border: 1px solid var(--border); background: var(--surface-alt); border-radius: var(--radius-sm); padding: 10px 12px; text-align: center; } .arch__box--brand { background: var(--brand); border-color: transparent; color: var(--on-brand); } .arch__box-title { font-size: var(--fs-sm); font-weight: 650; line-height: 1.4; } .arch__box-sub { font-size: var(--fs-xs); opacity: 0.78; line-height: 1.4; } /* 上下層之間的管線符號 */ .arch__pipe { height: 22px; display: flex; align-items: center; justify-content: center; color: var(--border-strong); font-size: 1.1rem; line-height: 1; } /* --- .work — 產品實績卡 --------------------------------------------------- */ .works { display: grid; gap: var(--sp-5); } .work { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: var(--sp-6); padding: var(--sp-6); } /* 圖在左的變體，讓連續兩張卡片不會長得一模一樣。 欄寬也要跟著左右對調 —— 否則圖片會被塞進較窄的那一欄， 同一張示意圖在正反兩張卡上會差一號大小。 */ .work--reverse { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } .work--reverse .work__media { order: -1; } @media (max-width: 900px) { .work { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); } .work--reverse .work__media { order: 0; } } .work__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); } .work__logo { width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; object-fit: cover; border: 1px solid var(--border); } .work__name { font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; } .work__role { font-size: var(--fs-xs); color: var(--brand-strong); font-weight: 650; } .work__text { font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.66; margin-bottom: var(--sp-4); } /* 一張卡可以放不只一張圖（例如主視覺 + 實際畫面），用 grid 讓它們等距堆疊 */ .work__media { display: grid; gap: var(--sp-3); } .work__media img { width: 100%; border-radius: var(--radius); border: 1px solid var(--border); } /* --- .mock — 擬真介面示意圖（只保留這頁用得到的幾個零件） ---------------- */ .mock { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; font-size: var(--fs-xs); line-height: 1.55; } .mock__bar { display: flex; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-4); background: var(--surface-alt); border-bottom: 1px solid var(--border); } .mock__dots { display: flex; gap: 5px; } .mock__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); } .mock__bar-title { font-size: var(--fs-xs); color: var(--text-faint); font-weight: 600; /* flex item 預設 min-width:auto —— 配上 nowrap，最小寬度會等於整串標題， 窄螢幕下會把外層撐破、整頁被迫橫向捲動。歸零才輪得到下面的 ellipsis。 */ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mock__pad { padding: var(--sp-4); } .mock__table { width: 100%; border-collapse: collapse; } .mock__table th { text-align: left; font-size: var(--fs-xs); font-weight: 700; color: var(--text-faint); padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; } .mock__table td { padding: 9px 8px; border-bottom: 1px solid var(--border); color: var(--text-soft); } .mock__table tr:last-child td { border-bottom: none; } .mock__table td strong { color: var(--text); font-weight: 650; } /* 表格在窄螢幕會超出容器 —— 讓它自己橫向捲動，不要撐破頁面 */ .mock__scroll { overflow-x: auto; } .badge { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 650; padding: 2px 10px; border-radius: 999px; background: var(--surface-alt); border: 1px solid var(--border); color: var(--text-soft); white-space: nowrap; } .badge--ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); border-color: color-mix(in srgb, var(--ok) 30%, transparent); } .badge--warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); border-color: color-mix(in srgb, var(--warn) 32%, transparent); } .badge--brand { color: var(--brand-strong); background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 28%, transparent); } .muted { color: var(--text-faint); /* 行寬上限跟 .vas__lead 取同一個值。多數 .muted 本來就落在 60ch 以內， 只有四段橫跨整張卡片的說明會拉到 105ch 以上 —— 寬螢幕下那幾段 跟其他段落不同寬，看起來就是這一頁最不整齊的地方。 */ max-width: 72ch; } .num { font-family: var(--font-num); font-variant-numeric: tabular-nums; } /* --- 聯絡資訊 ------------------------------------------------------------ */ .contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--sp-4); } .contact__item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-5); box-shadow: var(--shadow-sm); } .contact__label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; color: var(--brand-strong); text-transform: uppercase; margin-bottom: var(--sp-2); } .contact__value { font-size: var(--fs-body); font-weight: 600; line-height: 1.6; } .contact__sub { font-size: var(--fs-xs); color: var(--text-faint); margin-top: 4px; line-height: 1.55; } .contact__value a:hover { color: var(--brand-strong); text-decoration: underline; } /* --- 按鈕 / CTA ---------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: var(--fs-sm); font-weight: 650; padding: 12px 24px; border-radius: 999px; background: var(--brand); color: var(--on-brand); border: 1px solid transparent; transition: background 0.16s, opacity 0.16s; } .btn:hover { background: var(--brand-strong); } .btn--ghost { background: transparent; color: var(--brand-strong); border-color: var(--border-strong); } .btn--ghost:hover { background: var(--brand-soft); } .btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); } .cta { background: var(--brand); color: var(--on-brand); border-radius: var(--radius-lg); padding: var(--sp-7) var(--sp-6); text-align: center; } .cta__title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; line-height: 1.35; margin-bottom: var(--sp-3); } .cta__text { font-size: var(--fs-body); opacity: 0.9; max-width: 54ch; margin: 0 auto; } /* CTA 底色已經是品牌色，按鈕要反過來配色才看得見： 淺色模式是白底深字，深色模式是深底亮字（--on-brand 已經幫我們換好）。 */ .cta .btn { background: var(--on-brand); color: var(--brand-strong); } .cta .btn:hover { background: var(--on-brand); opacity: 0.86; } .cta .btn-row { justify-content: center; } /* --- Hero ---------------------------------------------------------------- */ .hero { padding: clamp(56px, 9vw, 104px) 0 var(--sp-9); border-bottom: 1px solid var(--border); background: radial-gradient( circle at 82% 8%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 46% ), var(--bg); } .hero__title { font-size: var(--fs-hero); line-height: 1.16; font-weight: 700; letter-spacing: -0.028em; margin-bottom: var(--sp-4); } .hero__lead { font-size: 1.2rem; color: var(--text-soft); max-width: 60ch; } .hero__stats { margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--border); } /* Hero 的英文公司名 —— 排在中文名下方，字級小一階當副標 */ .hero__en { font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: var(--sp-5); } /* --- 頁尾 ---------------------------------------------------------------- */ .footer { padding: var(--sp-7) 0; font-size: var(--fs-xs); color: var(--text-faint); } .footer__inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); justify-content: space-between; align-items: center; } /* --- 進場動畫 ------------------------------------------------------------ */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; } .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } } /* --- 小螢幕微調 ---------------------------------------------------------- */ @media (max-width: 640px) { :root { --sp-9: 56px; --sp-8: 44px; } .nav__wordmark b { font-size: 0.94rem; } .work { padding: var(--sp-5); } } /* --- 列印 / 匯出 PDF ------------------------------------------------------ */ @media print { .nav, .btn-row { display: none; } .block { padding: 24px 0; break-inside: avoid; } .reveal { opacity: 1; transform: none; } } /* ========================================================================== 淺色 / 深色切換鈕 -------------------------------------------------------------------------- 兩顆圖示疊在同一顆按鈕裡，用 CSS 決定現在該露出哪一顆： 目前是淺色 → 顯示月亮（按下去變深色）；目前是深色 → 顯示太陽。 狀態只看 上的 data-theme，沒有就是預設的淺色。 ========================================================================== */ .nav__theme { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; margin-left: var(--sp-2); padding: 6px 13px 6px 10px; font-family: inherit; font-size: var(--fs-xs); font-weight: 600; color: var(--text-soft); background: var(--surface-alt); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; transition: background 0.16s, color 0.16s, border-color 0.16s; } .nav__theme:hover { color: var(--text); border-color: var(--border-strong); } .nav__theme svg { width: 17px; height: 17px; display: block; flex-shrink: 0; } /* 不支援 light-dark() 的舊瀏覽器切了也不會變色，乾脆不要出現這顆按鈕 */ @supports not (color: light-dark(#fff, #000)) { .nav__theme { display: none; } } /* 預設是淺色 → 露出月亮（按下去會變深色） */ .nav__theme .ico-sun { display: none; } :root[data-theme="dark"] .nav__theme .ico-sun { display: block; } :root[data-theme="dark"] .nav__theme .ico-moon { display: none; } :root[data-theme="light"] .nav__theme .ico-sun { display: none; } :root[data-theme="light"] .nav__theme .ico-moon { display: block; } /* 窄螢幕只留圖示，文字收起來，避免把導覽列擠爆 */ @media (max-width: 720px) { .nav__theme { padding: 6px; gap: 0; } .nav__theme-text { display: none; } } /* ========================================================================== .diagram — 手繪 SVG 流程圖 / 示意圖的外框 -------------------------------------------------------------------------- SVG 內的顏色全部走 CSS 變數，所以深淺色模式會自動跟著換。 圖本身有最小寬度：窄螢幕下讓它在自己的框裡橫向捲動， 而不是被壓到字小得看不清楚（頁面本身仍然不會橫向捲動）。 ========================================================================== */ .diagram { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: var(--sp-5); } .diagram__scroll { overflow-x: auto; } .diagram__svg { display: block; width: 100%; min-width: 760px; height: auto; font-family: var(--font); } .diagram__cap { font-size: var(--fs-xs); color: var(--text-faint); margin-top: var(--sp-3); } /* 圖比螢幕寬時才提示可以滑動；桌機看得到全圖就不用多這一句 */ .diagram__hint { display: none; } @media (max-width: 860px) { .diagram__hint { display: block; font-weight: 700; color: var(--brand-strong); margin-bottom: 4px; } } /* --- SVG 內部零件的配色 ---------------------------------------------------- */ .d-node { fill: var(--surface-alt); stroke: var(--border-strong); stroke-width: 1.5; } .d-node--soft { fill: var(--brand-soft); stroke: color-mix(in srgb, var(--brand) 42%, transparent); } .d-node--brand { fill: var(--brand); stroke: none; } .d-node--accent { fill: var(--accent-soft); stroke: color-mix(in srgb, var(--accent) 45%, transparent); } .d-title { fill: var(--text); font-size: 15px; font-weight: 650; } .d-sub { fill: var(--text-faint); font-size: 12.5px; } .d-on { fill: var(--on-brand); } .d-on-sub { fill: var(--on-brand); opacity: 0.82; font-size: 12.5px; } .d-label { fill: var(--text-faint); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; } .d-link { fill: none; stroke: var(--border-strong); stroke-width: 2; } .d-arrow { fill: var(--border-strong); } .d-num { fill: var(--brand-strong); font-family: var(--font-num); font-size: 12px; font-weight: 700; } /* ========================================================================== .vas — 加值服務區塊（編號標題 ＋ 左流程 / 右示意圖 ＋ 下方三個重點） ========================================================================== */ .vas { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: var(--sp-6); display: grid; /* 不寫的話是隱式 auto 欄：欄寬會被裡面最寬的東西撐開， 窄螢幕下整張卡片會比螢幕還寬，右邊的字直接被切掉。 */ grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); } .vas + .vas { margin-top: var(--sp-5); } .vas__head { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--sp-4); align-items: start; } .vas__num { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--brand); color: var(--on-brand); font-family: var(--font-num); font-size: 1.3rem; font-weight: 700; } .vas__title { font-size: var(--fs-h3); font-weight: 700; line-height: 1.35; margin-top: 2px; } .vas__lead { font-size: var(--fs-sm); color: var(--text-soft); margin-top: var(--sp-2); max-width: 72ch; } .vas__grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: var(--sp-6); align-items: start; } @media (max-width: 900px) { .vas { padding: var(--sp-5); } .vas__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); } } .vas__colhead { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; color: var(--text-faint); text-transform: uppercase; margin-bottom: var(--sp-4); } .vas__foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--sp-3); } /* --- 摘要卡接在服務流程底下 ---------------------------------------------- 有幾節的右邊展示圖比左邊的服務流程長很多（01 差 504px、04 差 475px、 06 差 434px），左下角會空一大片，底下再橫一排三張摘要卡，看起來很散。 這個 class 把摘要卡改排到左欄、接在流程底下由上往下排，右邊的展示圖 則跨兩列，讓兩欄的長度接近。 只加在右欄比較長的 01 / 02 / 04 / 05 / 06； 03 與 07 本來就是左欄比較長，套上去反而會更不平衡。 做法是把 .vas__grid 設成 display:contents，讓它的左右兩欄直接變成 .vas 的格線項目 —— 摘要卡才有辦法跟流程排進同一欄。 */ @media (min-width: 900.02px) { .vas--notes-left { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); /* 右欄跨第 2、3 兩列。兩列都是 auto 的話，展示圖多出來的高度會被 平均分給兩列 —— 流程與摘要卡中間就會裂出一條空白（01 曾裂到 89px）。 把第 3 列設成 1fr，多的高度全部落在摘要卡下方。 */ grid-template-rows: auto auto 1fr; } .vas--notes-left .vas__head { grid-column: 1 / -1; } .vas--notes-left .vas__grid { display: contents; } /* 左欄：服務流程 */ .vas--notes-left .vas__grid > :first-child { grid-column: 1; grid-row: 2; } /* 右欄：展示圖，跨流程與摘要卡兩列 */ .vas--notes-left .vas__grid > :last-child { grid-column: 2; grid-row: 2 / span 2; } /* 摘要卡：左欄第三列，改成單欄由上往下 */ .vas--notes-left .vas__foot { grid-column: 1; grid-row: 3; grid-template-columns: minmax(0, 1fr); align-content: start; } } .note { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4); } .note__title { font-size: var(--fs-sm); font-weight: 650; margin-bottom: 2px; } .note__text { font-size: var(--fs-xs); color: var(--text-soft); line-height: 1.6; } /* ========================================================================== .steps — 直式流程（左邊圓形編號 ＋ 連接線） 編號由 CSS 之外的 app.js 產生，插一步不必手動改號碼。 ========================================================================== */ .steps { display: grid; } .steps__item { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--sp-3); padding-bottom: var(--sp-4); } /* 串起上下兩步的直線；最後一步不畫，否則會多一截懸在半空 */ .steps__item::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 0; width: 2px; background: var(--border-strong); } .steps__item:last-child { padding-bottom: 0; } .steps__item:last-child::before { display: none; } .steps__num { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); color: var(--brand-strong); font-family: var(--font-num); font-size: var(--fs-xs); font-weight: 700; } .steps__name { font-size: var(--fs-sm); font-weight: 650; line-height: 1.5; margin-top: 3px; } .steps__note { font-size: var(--fs-xs); color: var(--text-faint); line-height: 1.55; } /* ========================================================================== .split-bar — 分潤比例示意條 ========================================================================== */ .split-bar { display: flex; height: 34px; border-radius: 999px; overflow: hidden; border: 1px solid var(--border); } .split-bar__seg { display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; } /* 一段裡的兩種標籤：預設露出「素人 60%」，窄螢幕才換成只有百分比的那個。 .split-bar__seg 是 grid，同時只會有一個子元素是顯示的。 */ .split-bar__short { display: none; } .split-bar__seg--a { background: var(--brand); color: var(--on-brand); } .split-bar__seg--b { background: color-mix(in srgb, var(--brand) 32%, var(--surface)); color: var(--text); } .split-bar__seg--c { background: var(--surface-alt); color: var(--text-soft); } .split-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--text-faint); } .split-legend span { display: inline-flex; align-items: center; gap: 6px; } .split-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--border-strong); } .split-legend i.is-a { background: var(--brand); } .split-legend i.is-b { background: color-mix(in srgb, var(--brand) 32%, var(--surface)); } .split-legend i.is-c { background: var(--surface-alt); border: 1px solid var(--border); } /* ========================================================================== .chat — LINE 對話示意 ========================================================================== */ .chat { display: grid; gap: var(--sp-3); } .chat__row { display: flex; } .chat__row--me { justify-content: flex-end; } .chat__bubble { max-width: 82%; padding: 10px 14px; border-radius: 16px; font-size: var(--fs-xs); line-height: 1.6; background: var(--surface-alt); border: 1px solid var(--border); color: var(--text-soft); } .chat__bubble strong { color: var(--text); font-weight: 650; } .chat__row--me .chat__bubble { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 30%, transparent); color: var(--text); } .chat__cta { display: inline-block; margin-top: 8px; padding: 6px 14px; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-weight: 650; } .chat__stars { color: var(--accent); letter-spacing: 2px; } /* ========================================================================== .spec — 多規格輸出示意（同一張原始檔，裁成各平台要的尺寸） ========================================================================== */ .spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(92px, 100%), 1fr)); gap: var(--sp-4) var(--sp-3); } /* 各規格的比例不一樣（方形 / 圓形 / 證件 / 橫式）， 統一放進同樣高度的「舞台」裡置中，下方的規格文字才會對齊在同一條線上。 */ .spec__stage { height: 116px; display: grid; place-items: center; } .spec__frame { position: relative; height: 100%; width: auto; max-width: 100%; aspect-ratio: 1 / 1; background: linear-gradient( 160deg, color-mix(in srgb, var(--brand) 22%, var(--surface)), var(--surface-alt) ); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; display: block; } /* 圓形裁切（LinkedIn / LINE 大頭貼） */ .spec__frame--round { border-radius: 50%; } /* 證件照比例 */ .spec__frame--id { aspect-ratio: 3 / 4; } /* 名片 / 員工牆的橫式裁切。 橫式的寬度會被欄寬卡住，所以改成「撐滿欄寬、高度由比例決定」， 否則會被壓成跟其他張一樣的直式框。 */ .spec__frame--wide { aspect-ratio: 16 / 10; height: auto; width: 100%; } /* 同一張照片塞進五種比例的框，靠 object-fit / object-position 裁切。 position 寫在 HTML 的 inline style（來自 PORTRAIT_SPECS 的 pos）。 */ .spec__img { width: 100%; height: 100%; object-fit: cover; display: block; } .spec__label { font-size: var(--fs-xs); font-weight: 650; margin-top: 8px; line-height: 1.4; } .spec__size { font-family: var(--font-num); font-size: 0.82rem; color: var(--text-faint); } /* 版位感覺的標籤（端正 / 專業 / 企業 / 放鬆）。 這一區要講的就是四個版位要的感覺不一樣，所以給它一個看得見的樣式。 */ .spec__level { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; color: var(--brand-strong); background: var(--brand-soft); } /* ========================================================================== .strip — 三格式產線示意（原圖 → 去背 → 成品） ========================================================================== */ .strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); align-items: center; } .strip__cell { text-align: center; } .strip__frame { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-sm); border: 1px solid var(--border); overflow: hidden; background: var(--surface-alt); } .strip__frame img { width: 100%; height: 100%; object-fit: cover; display: block; } /* 貼在成品格上的梗文字。白字 + 深色描邊，是 LINE 貼圖最常見的樣式。 */ .strip__meme { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-size: 1rem; font-weight: 800; letter-spacing: 0.04em; color: #fff; -webkit-text-stroke: 3.5px #2c2118; paint-order: stroke fill; } /* 去背後的透明格底 —— 用兩層漸層畫棋盤格 */ .strip__frame--alpha { background-color: var(--surface); background-image: linear-gradient( 45deg, var(--surface-alt) 25%, transparent 25% 75%, var(--surface-alt) 75% ), linear-gradient( 45deg, var(--surface-alt) 25%, transparent 25% 75%, var(--surface-alt) 75% ); background-size: 16px 16px; background-position: 0 0, 8px 8px; } .strip__frame--out { background: linear-gradient( 160deg, color-mix(in srgb, var(--accent) 20%, var(--surface)), var(--surface-alt) ); } /* 去背後的人像：用 clip-path 裁出主體，配上透明格底就是去背的樣子。 換照片時記得重調這個橢圓的位置。 */ .is-cutout { /* 橢圓要留得夠鬆，否則頭頂、舉起來的手會被切掉； 小圖本身已經先裁成臉部置中、四周有留白的正方形。 */ clip-path: ellipse(47% 48% at 50% 47%); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18)); } .strip__cap { font-size: var(--fs-xs); color: var(--text-faint); margin-top: 6px; } /* ========================================================================== .stickers — 貼圖九宮格 ========================================================================== */ .stickers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(104px, 100%), 1fr)); gap: var(--sp-3); } .sticker { position: relative; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-alt); padding: 10px 8px 8px; text-align: center; overflow: hidden; } .sticker__fig { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; } .sticker__fig img { width: 100%; height: 100%; object-fit: cover; display: block; } /* 兩排貼圖用同一組樣式；情境包那排比較多張，會自己往下折。 */ .stickers + .vas__colhead { margin-top: var(--sp-5); } .sticker__text { font-size: var(--fs-xs); font-weight: 800; line-height: 1.3; margin-top: -10px; position: relative; color: #fff; -webkit-text-stroke: 3.5px #2c2118; paint-order: stroke fill; } /* 動態貼圖的角標 */ .sticker__tag { position: absolute; top: 6px; right: 6px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); } .sticker__tag--still { background: var(--surface); color: var(--text-faint); border-color: var(--border); } /* ========================================================================== .twin — 數位分身：母版形象照 ＋ 同一個人可以產出的三種版位 -------------------------------------------------------------------------- 三張小圖用的是同一個檔案，只是裁切比例與 object-position 不同。 ========================================================================== */ .twin { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; margin-bottom: var(--sp-4); } .twin__frame { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-sm); aspect-ratio: 4 / 5; background: var(--surface-alt); } .twin__frame--master { border-radius: var(--radius); } .twin__frame img { width: 100%; height: 100%; object-fit: cover; display: block; } .twin figcaption { font-size: var(--fs-xs); font-weight: 650; margin-top: 6px; line-height: 1.4; } .twin figcaption span { display: block; font-weight: 400; font-size: 0.88em; color: var(--text-faint); } /* 三個版位排成 2 欄（橫式的那個佔滿整列），高度才跟左邊的母版照差不多 */ .twin__uses { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); } .twin__use--full { grid-column: 1 / -1; } /* 窄螢幕：母版照改成整列，三個版位留在下面自己排 */ @media (max-width: 900px) { .twin { grid-template-columns: minmax(0, 1fr); } } /* 影片版位的播放鍵。放左下角而不是正中間 —— 擺中間會蓋住人臉， 這一格的重點正是「對鏡頭、有表情」。 */ .twin__play { position: absolute; left: 10px; bottom: 10px; width: 30px; height: 30px; border-radius: 50%; background: rgba(12, 18, 17, 0.62); border: 1.5px solid rgba(255, 255, 255, 0.85); } .twin__play::after { content: ""; position: absolute; left: 10px; top: 7px; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #fff; } /* LINE 訊息裡的相簿卡片 */ .chat__album { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 10px; align-items: center; margin: 8px 0; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; } .chat__album img { width: 58px; height: 58px; object-fit: cover; border-radius: 8px; } .chat__album-text { font-size: var(--fs-xs); color: var(--text-faint); line-height: 1.45; } .chat__album-text b { display: block; color: var(--text); font-weight: 650; } /* 抽獎轉盤示意 */ .wheel { width: 152px; height: auto; flex-shrink: 0; font-family: var(--font); } .d-wheel-label { fill: var(--text); font-size: 10.5px; font-weight: 700; } /* ========================================================================== .angles — 個人形象報告的角度比對（同一次拍攝的三張不同角度） ========================================================================== */ .angles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); } .angle { margin: 0; } .angle__frame { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-alt); } /* 被判定為最佳角度的那一張，用品牌色框起來 */ .angle--best .angle__frame { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 35%, transparent); } .angle__frame img { width: 100%; height: 100%; object-fit: cover; display: block; } .angle figcaption { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: var(--fs-xs); font-weight: 650; margin-top: 6px; } /* 上鏡度分數。刻意做成數字字體，看起來像量測結果而不是評語。 */ .angle__score { font-family: var(--font-num); font-weight: 700; color: var(--text-faint); } .angle__score--best { color: var(--brand-strong); } /* --- 個人色彩色票 --------------------------------------------------------- */ .swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(72px, 100%), 1fr)); gap: var(--sp-3); } /* 個人色彩的兩排色票（適合的 6 個、要避開的 3 個）要一樣大。 只靠 auto-fit 的話兩排都會各自撐滿：3 個的那排變成兩倍寬； 而窄桌機下 6 個那排只排得下 5 欄，還會裂成 5+1。 桌機兩排一起鎖成六欄，色塊大小一致，6 個那排也不會斷行 （手機兩排本來就都是三欄，維持 auto-fit 即可）。 */ @media (min-width: 900.02px) { .swatches--palette { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .swatch { text-align: center; } .swatch__chip { display: block; height: 42px; border-radius: var(--radius-sm); border: 1px solid var(--border); } .swatch__name { display: block; font-size: var(--fs-xs); color: var(--text-soft); margin-top: 5px; } /* ========================================================================== .simsplit / .looks / .prompts — AI 造型模擬 ========================================================================== */ /* 顧客會怎麼下指令 —— 直接放他們的原話 */ .prompts { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); } .prompt { font-size: var(--fs-xs); padding: 5px 12px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-strong); border: 1px solid color-mix(in srgb, var(--brand) 26%, transparent); font-weight: 600; } /* 左右對照：同一張照片，右邊套上色調示意模擬後的樣子 */ .simsplit { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--border); } .simsplit__side { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface-alt); } .simsplit__side img { width: 100%; height: 100%; object-fit: cover; display: block; } /* 兩側取景要一模一樣，差別才會只剩下髮色 */ .simsplit__side img { object-position: 50% 50%; } .simsplit__tag { position: absolute; left: 10px; bottom: 10px; font-size: var(--fs-xs); font-weight: 700; padding: 3px 10px; border-radius: 999px; background: rgba(12, 18, 17, 0.62); color: #fff; } .simsplit__tag--after { background: var(--brand); color: var(--on-brand); } /* 模擬結果縮圖 */ .looks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(104px, 100%), 1fr)); gap: var(--sp-3); } /* SIM_LOOKS 固定是五張（一張換髮色 + 四種造型）。這個欄位寬約 540px， auto-fit 只排得下四欄，第五張就會自己掉到第二列、右邊空三格。 桌機直接指定五欄，讓它們排成完整的一列。 （如果 app.js 裡的 SIM_LOOKS 改成別的張數，這裡要跟著調。） */ @media (min-width: 1000px) { .looks { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .look { margin: 0; } .look__frame { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-alt); } .look__frame img { width: 100%; height: 100%; object-fit: cover; display: block; } .look figcaption { font-size: var(--fs-xs); font-weight: 650; margin-top: 6px; line-height: 1.4; } .look figcaption span { display: block; font-weight: 400; color: var(--text-faint); } /* ========================================================================== 07 數位名片 ・ 形象主頁 -------------------------------------------------------------------------- .phones 三支並排的手機：A 預約型 / B 敘事型 / C 作品型 .bizcard 名片背面（含手繪 QR）＋ .entries 五個入口 .roles 職業別範本 .intake 問卷 → AI 初稿（不用編輯器） .kpi / .rank / .secbar / .nudge 成效儀表板 設計上的兩個刻意選擇： ▸ 手機機身在兩個模式下都是深色（--phone-shell），因為它是實體物件。 疊在照片漸層上的字固定用白色 —— 那是壓在深色遮罩上，不是壓在品牌色上， 所以不適用 --on-brand 的規則。 ▸ 儀表板的主角是 .rank（同業分位數）不是流量數字。落後的那一列刻意標成 琥珀色（--accent），它是「回門市重拍」的鉤子，不是警告。 ========================================================================== */ /* --- 三支手機並排 --------------------------------------------------------- */ .phones { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: var(--sp-5); align-items: stretch; } /* 每一支手機是一張卡：上面標型別、中間手機、下面說明。 三支內容長短不一 —— 用 flex 讓手機自己撐開，下面的說明才會對齊。 不要改成固定高度，加一段內容就會爆版。 */ .phonecard { display: flex; flex-direction: column; } .phonecard .phone { flex: 1; margin: 0 auto var(--sp-4); } .phonecard__kind { font-size: var(--fs-xs); font-weight: 700; color: var(--brand-strong); background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent); border-radius: 99px; padding: 3px 12px; align-self: flex-start; margin-bottom: var(--sp-3); } .phonecard__name { font-size: var(--fs-sm); font-weight: 700; margin-bottom: 2px; } .phonecard__text { font-size: 0.86rem; line-height: 1.6; color: var(--text-faint); } .phonecard__text strong { color: var(--text); } .phone { width: 100%; max-width: 250px; background: var(--phone-shell); border-radius: 30px; padding: 9px; /* 內側兩道極淡的亮邊 = 機身的金屬反光。少了它就只是一塊黑方塊。 */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.06), var(--shadow); display: flex; flex-direction: column; } /* 頂端的聽筒條。純裝飾，浮在螢幕上方 */ .phone__notch { width: 62px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.28); margin: 2px auto 7px; } .phone__screen { flex: 1; display: flex; flex-direction: column; background: var(--surface); border-radius: 22px; overflow: hidden; } /* 狀態列。刻意做成不透明的一條，不疊在照片上 —— 三張主視覺的上緣都是淺色，白字會看不見。 */ .phone__status { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 7px 14px 5px; color: var(--text-faint); } .phone__time { font-family: var(--font-num); font-size: 0.68rem; font-weight: 700; } .phone__meters { width: 43px; height: 10px; fill: currentColor; } /* 螢幕底部的 home 指示條。有它才像一支手機，沒有就像一張截圖。 */ .phone__home { flex: none; width: 84px; height: 4px; border-radius: 99px; background: var(--border-strong); margin: 12px auto 8px; } /* 主視覺固定 10:11。 **`flex: none` 與 `min-height: 0` 不能拿掉** —— 在 flex 容器裡， 圖片的固有高度會透過 min-height:auto 蓋過 aspect-ratio， 直幅原圖（例如 600×900）就會比別支手機高出一截，三支並排立刻歪掉。 圖片也因此改成絕對定位，讓它完全不影響外框的高度。 */ .phone__hero { flex: none; min-height: 0; position: relative; aspect-ratio: 10 / 11; overflow: hidden; background: var(--surface-alt); } .phone__hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; } /* 姓名壓在照片下緣。漸層要夠深，白字才讀得到 */ .phone__id { position: absolute; inset: auto 0 0 0; padding: 26px var(--sp-3) 11px; background: linear-gradient(to top, rgba(8, 14, 13, 0.86), rgba(8, 14, 13, 0)); color: #fff; } .phone__name { font-size: var(--fs-sm); font-weight: 700; line-height: 1.3; } .phone__role { font-size: 0.8rem; line-height: 1.4; color: rgba(255, 255, 255, 0.86); } .phone__body { flex: 1; display: flex; flex-direction: column; padding: var(--sp-3); } /* 頁尾的門市署名。margin-top:auto 把它壓到最底 —— 三支內容長短不一，靠這一行讓底部收在同一條線上。 */ .phone__foot { margin-top: auto; padding-top: var(--sp-4); border-top: 1px solid var(--border); margin-inline: calc(var(--sp-3) * -1 + 4px); padding-inline: 8px; text-align: center; font-size: 0.66rem; letter-spacing: 0.06em; color: var(--text-faint); } .phone__foot b { color: var(--brand-strong); } .phone__body .pill-row { margin-bottom: 12px; } /* 手機裡的標籤刻意再縮一階：三顆要能排在同一行 —— 第二行只掛一顆的話整支手機看起來就散了。 */ .phone__body .pill-row { gap: 5px; } .phone__body .pill { font-size: 0.72rem; padding: 3px 8px; } .phone__btn { display: block; text-align: center; font-size: 0.82rem; font-weight: 650; padding: 9px; border-radius: 10px; background: var(--brand); color: var(--on-brand); } .phone__btn + .phone__btn { margin-top: 7px; } .phone__btn--ghost { background: transparent; color: var(--brand-strong); border: 1px solid var(--border-strong); } .phone__sect { display: flex; align-items: center; gap: var(--sp-2); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; color: var(--text-faint); margin: 16px 0 8px; } /* 小標右邊補一條細線拉到底 —— 這一筆讓每個區塊的起點對得整整齊齊 */ .phone__sect::after { content: ""; flex: 1; height: 1px; background: var(--border); } /* 可預約時段。**一定要是等寬網格**，不要改回 flex 換行 —— 「週五 已滿」比「週三 14:00」短，一換行第二列就跟第一列對不齊， 整支手機看起來就是歪的。 */ .slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .slot { display: grid; gap: 1px; text-align: center; padding: 6px 4px; border-radius: 9px; background: var(--surface); border: 1px solid var(--border); color: var(--text-soft); font-family: var(--font-num); font-size: 0.78rem; font-weight: 650; } .slot b { font-family: var(--font); font-size: 0.68rem; font-weight: 600; color: var(--text-faint); } /* 已選中的那一格。整個畫面只有主按鈕是實心品牌色， 這裡刻意只用淡底 + 品牌色框，不跟按鈕搶。 */ .slot--pick { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 45%, transparent); color: var(--brand-strong); } .slot--pick b { color: var(--brand-strong); } .slot--full { background: var(--surface-alt); color: var(--text-faint); } .phone__rows > div { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: 0.78rem; padding: 7px 0; border-bottom: 1px solid var(--border); color: var(--text-soft); } .phone__rows > div:last-child { border-bottom: none; } .phone__rows b { white-space: nowrap; font-family: var(--font-num); font-size: 0.74rem; color: var(--text); } /* 名片背面 ---------------------------------------------------------------- */ .bizcard { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--sp-4); align-items: center; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4); } /* QR 給自己一塊白底 —— 它畫的是「印在紙上的名片」， 兩個模式下都應該是深色碼、白色底，才像印刷品（也才掃得動）。 */ .bizcard__qr { background: #fff; border-radius: var(--radius-sm); padding: 6px; box-shadow: var(--shadow-sm); } .bizcard__qr svg { display: block; width: 100%; height: auto; fill: #14201e; shape-rendering: crispEdges; } .bizcard__title { font-size: var(--fs-sm); font-weight: 700; } .bizcard__text { font-size: var(--fs-xs); color: var(--text-soft); line-height: 1.5; } .bizcard__url { font-family: var(--font-num); font-size: 0.8rem; color: var(--brand-strong); margin-top: 4px; word-break: break-all; } /* 五個入口 ---------------------------------------------------------------- */ .entries { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .entries li { background: var(--surface); padding: 10px var(--sp-4); display: grid; gap: 1px; } .entries b { font-size: var(--fs-xs); font-weight: 650; } .entries span { font-size: 0.84rem; color: var(--text-faint); line-height: 1.45; } /* --- 職業別範本 ---------------------------------------------------------- */ .roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: var(--sp-4); } .role__frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-alt); } .role__frame img { width: 100%; height: 100%; object-fit: cover; } /* 每個職業的主要 CTA 疊在照片下緣 —— 換職業就換這一顆按鈕， 這是整個範本最關鍵的差異。 */ .role__cta { position: absolute; inset: auto 8px 8px 8px; text-align: center; font-size: 0.8rem; font-weight: 650; padding: 7px; border-radius: 9px; background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-sm); } .role__name { font-size: var(--fs-sm); font-weight: 700; margin-top: 10px; } .role__mods { font-size: 0.82rem; color: var(--brand-strong); line-height: 1.5; margin-top: 2px; } .role__note { font-size: 0.84rem; color: var(--text-faint); line-height: 1.55; margin-top: 5px; } /* --- 問卷 → AI 初稿 ------------------------------------------------------ */ .intake { display: grid; grid-template-columns: minmax(0, 1fr) 74px minmax(0, 1fr); gap: var(--sp-4); align-items: start; } @media (max-width: 860px) { .intake { grid-template-columns: minmax(0, 1fr); } .intake__flow { flex-direction: row; padding: var(--sp-2) 0; } .intake__chev { transform: rotate(90deg); } } .intake__flow { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; align-self: center; } /* 指向右邊（窄螢幕時轉成指向下方）的箭頭 */ .intake__chev { width: 26px; height: 26px; border-top: 3px solid var(--brand); border-right: 3px solid var(--brand); transform: rotate(45deg); } .intake__word { font-size: 0.78rem; font-weight: 700; color: var(--brand-strong); white-space: nowrap; } .asks { display: grid; gap: 7px; } .ask { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px var(--sp-3); } /* 開放題用琥珀色標出來 —— 一眼看得出只有三題要自己寫， 而 AI 寫出來像不像本人，全靠那三題。 */ .ask--open { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 34%, transparent); } .ask__q { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); font-size: 0.82rem; color: var(--text-faint); line-height: 1.45; } .ask__kind { flex: none; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; padding: 1px 7px; border-radius: 99px; background: var(--surface); border: 1px solid var(--border-strong); color: var(--text-faint); } .ask--open .ask__kind { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); } .ask__a { font-size: var(--fs-xs); font-weight: 600; line-height: 1.5; margin-top: 2px; } .draft { background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 26%, transparent); border-radius: var(--radius); padding: var(--sp-4); } .draft__label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; color: var(--brand-strong); margin-bottom: 3px; } .draft__label + p { font-size: var(--fs-xs); line-height: 1.65; color: var(--text-soft); margin-bottom: var(--sp-3); } .draft__label + p b { color: var(--text); } .draft__foot { display: flex; flex-wrap: wrap; gap: 6px; padding-top: var(--sp-3); border-top: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); } /* --- 成效儀表板 ---------------------------------------------------------- */ .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: var(--sp-3); } .kpi { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); } .kpi__label { font-size: 0.82rem; color: var(--text-faint); font-weight: 600; } .kpi__value { display: flex; align-items: baseline; gap: 4px; font-family: var(--font-num); font-size: 1.5rem; font-weight: 700; line-height: 1.25; margin: 2px 0; } .kpi__value small { font-size: 0.82rem; font-weight: 600; color: var(--text-faint); } .kpi__delta { margin-left: auto; font-size: 0.78rem; font-weight: 700; color: var(--ok); } .kpi__sub { font-size: 0.8rem; color: var(--text-faint); line-height: 1.45; } /* 註：auto-fit 的 minmax 一律包一層 min(Npx, 100%)。 只寫 minmax(280px, 1fr) 的話，容器窄於 280px 時軌道不會縮， 會直接撐破卡片、右邊的字被切掉（320px 手機就會踩到）。 */ .dash { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--sp-3) var(--sp-6); } /* 同業分位數 —— 這一段才是續訂的理由 */ .ranks { display: grid; gap: var(--sp-4); } .rank__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); } .rank__label { font-size: var(--fs-xs); font-weight: 650; } .rank__text { font-family: var(--font-num); font-size: 0.82rem; font-weight: 700; color: var(--brand-strong); white-space: nowrap; } .rank__track { height: 8px; border-radius: 99px; background: var(--surface-alt); border: 1px solid var(--border); overflow: hidden; margin: 6px 0 4px; } .rank__track i { display: block; height: 100%; background: var(--brand); } .rank__hint { font-size: 0.8rem; color: var(--text-faint); line-height: 1.45; } /* 落後同業的那一列。琥珀色不是警告，是下一次回門市拍攝的理由。 */ .rank--low .rank__text { color: var(--accent); } .rank--low .rank__track i { background: var(--accent); } /* 訪客看到哪一段 */ .secbars { display: grid; gap: 10px; } .secbar { display: grid; grid-template-columns: minmax(0, 1fr) 42px; gap: 2px var(--sp-3); align-items: baseline; } .secbar__name { font-size: 0.86rem; font-weight: 600; } .secbar__pct { font-family: var(--font-num); font-size: 0.8rem; color: var(--text-faint); text-align: right; } .secbar__track { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: var(--surface-alt); border: 1px solid var(--border); overflow: hidden; } .secbar__track i { display: block; height: 100%; background: color-mix(in srgb, var(--brand) 62%, transparent); } .secbar__note { grid-column: 1 / -1; font-size: 0.78rem; color: var(--text-faint); } .secbar__note:empty { display: none; } /* 下一步建議 —— 整個商業模式其實就收在這一塊： 儀表板不是給顧客看成績，是給顧客一個回來的理由。 */ .nudge { margin-top: var(--sp-5); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: var(--sp-4); } .nudge__title { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 3px; } .nudge__text { font-size: var(--fs-xs); line-height: 1.6; color: var(--text-soft); } .nudge__btn { display: inline-block; margin-top: 10px; font-size: 0.82rem; font-weight: 650; padding: 7px 14px; border-radius: 9px; background: var(--brand); color: var(--on-brand); } /* --- 敘事型與作品型手機專用的版位 ----------------------------------------- */ /* 開場那一句話。這一型的第一屏放的是主張，不是按鈕。 */ .phone__quote { font-size: 0.86rem; font-weight: 650; line-height: 1.6; margin-bottom: var(--sp-2); } .phone__para { font-size: 0.8rem; line-height: 1.7; color: var(--text-soft); } /* 時間軸：左邊年份、右邊一句話，中間一條連起來的線 */ .tl { display: grid; gap: 9px; } .tl li { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: var(--sp-2); padding-left: 11px; } .tl li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); } /* 串起上下兩點的線；最後一點不畫 */ .tl li::after { content: ""; position: absolute; left: 3px; top: 16px; bottom: -9px; width: 1px; background: var(--border-strong); } .tl li:last-child::after { display: none; } .tl b { font-family: var(--font-num); font-size: 0.76rem; color: var(--brand-strong); line-height: 1.55; } .tl span { font-size: 0.78rem; line-height: 1.55; color: var(--text-soft); } /* 客戶的話 */ .quote { margin: 0; background: var(--surface-alt); border-left: 3px solid var(--brand); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 9px var(--sp-3); font-size: 0.8rem; line-height: 1.6; color: var(--text-soft); } .quote cite { display: block; margin-top: 4px; font-style: normal; font-size: 0.74rem; color: var(--text-faint); } /* 作品型的三個小數字。 刻意做成「一張卡 + 兩條分隔線」，而不是三張各自有外框的小卡 —— 手機內容寬度只有 208px，三個外框加兩道間距會吃掉 18px， 數字跟標籤就會擠在一起。共用一張卡等於把那 18px 還給文字。 */ .ministats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; text-align: center; } .ministats > div { padding: 9px 2px; } /* 底下接的是主按鈕，留一段跟 .pill-row 一樣的間距，不要黏在一起 */ .ministats { margin-bottom: var(--sp-3); } .ministats > div + div { border-left: 1px solid var(--border); } .ministats b { display: block; font-family: var(--font-num); font-size: 1rem; font-weight: 700; line-height: 1.35; } /* 單位（萬、場）縮小成附屬字，數字本身才看得清楚 */ .ministats b i { font-style: normal; font-family: var(--font); font-size: 0.68rem; font-weight: 650; margin-left: 1px; color: var(--text-faint); } .ministats span { display: block; margin-top: 1px; font-size: 0.66rem; color: var(--text-faint); line-height: 1.4; } /* 上面那組字級是為手機示意圖的 208px 欄位設計的（標籤只有 10.5px）。 放進一般卡片時要回到正常尺度，否則會低於這份 CSS 開頭訂的 15px 下限。 */ .ministats--card > div { padding: 14px 10px; } .ministats--card b { font-size: 1.5rem; } .ministats--card b i { font-size: var(--fs-xs); } .ministats--card span { margin-top: 3px; font-size: var(--fs-xs); } /* ========================================================================== 手機版排版修正 -------------------------------------------------------------------------- 放在檔案最後面，用來蓋掉前面以桌機為主的規則。這一段只處理窄螢幕， 桌機版完全不受影響。處理三件事： 1. 導覽列 —— 八個區塊連結擠不進手機的一行，原本被塞進標準字右邊 一條約 160px 的橫向捲動條裡（在 320px 手機上只剩 92px）， 看起來像被切掉。改成 900px 以下收進選單鈕，展開成整片面板。 2. 示意表格 —— 卡片裡的看板截圖是三欄表格，硬壓進手機寬度會讓 每一格都斷成三行。改成在自己的框裡橫向捲動，欄寬維持可讀。 3. 觸控目標 —— 導覽列的連結與切換鈕原本只有 29～38px 高， 補到 44px（iOS / Android 的建議下限）。 ========================================================================== */ /* --- 1. 導覽列 ----------------------------------------------------------- 八個連結用桌機的寬鬆間距要 1000px 才排得下，低於這個寬度原本會被 overflow-x:auto 靜靜截掉（小筆電的視窗就會踩到，看起來像連結被切掉）。 分兩段處理：先收緊間距讓真正的導覽列多撐一段，真的排不下才換成選單鈕。 */ /* 第一段：連結還排得下，只是需要收緊一點 */ @media (max-width: 1120px) and (min-width: 900px) { .nav__link { padding: 6px 7px; } .nav__links { gap: 3px; } } /* 第二段：連續八個連結真的排不下了，收進選單鈕。 用 899.98px 而不是 899px —— 視窗寬度可能是小數（螢幕縮放、瀏覽器 zoom）， 寫成整數的話 899.5px 會兩個區塊都不符合，導覽列會掉回被截斷的舊樣子。 */ @media (max-width: 899.98px) { .nav__inner { gap: var(--sp-3); } .nav__toggle { display: inline-flex; margin-left: auto; } /* 選單鈕接手了「靠右」的工作，連結面板就不需要 margin-left:auto 了 */ .nav__theme { margin-left: 0; min-height: 44px; } /* 連結面板：從導覽列底下整片展開，不再擠成一條橫向捲動條 */ .nav__links { display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0; /* 左右內距扣掉連結自己的 padding，連結文字才會跟上面的標準字切齊 */ padding: var(--sp-3) calc(var(--gutter) - 12px) var(--sp-4); gap: 2px; overflow-x: visible; overflow-y: auto; /* 連結多的時候面板自己捲，不要長到超出螢幕 */ max-height: calc(100vh - 62px); max-height: calc(100dvh - 62px); background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); } .nav.is-open .nav__links { display: grid; } .nav__link { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; font-size: var(--fs-sm); border-radius: 10px; } .nav__brand { min-height: 44px; } } /* --- 2 & 3. 手機寬度的內容調整 ------------------------------------------- */ @media (max-width: 720px) { /* 切換鈕在這個寬度只剩圖示（見上面的 .nav__theme 規則），補成正方形 */ .nav__theme { width: 44px; height: 44px; padding: 0; justify-content: center; } /* 示意表格：讓 .mock__scroll 真的捲得動。表格是 width:100%， 不給最小寬度的話它只會把每一欄壓扁，而不是觸發外框的橫向捲動。 */ .mock__table { min-width: 380px; } .mock__table th, .mock__table td { padding: 8px 7px; } /* 狀態標籤不要斷行 */ .mock__table .badge, .mock__table .pill { white-space: nowrap; } /* 捲動提示：右邊還有內容時才會出現一道陰影，捲到底自己消失。 兩層 local 漸層當遮罩、兩層 scroll 漸層當陰影 —— 純 CSS，不必寫 JS。 */ .mock__scroll { background: linear-gradient(to right, var(--surface) 30%, transparent) left center / 32px 100% no-repeat local, linear-gradient(to left, var(--surface) 30%, transparent) right center / 32px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--text) 30%, transparent), transparent) left center / 18px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--text) 30%, transparent), transparent) right center / 18px 100% no-repeat scroll; } /* 單一個標籤比容器還寬時讓它斷行，不要被卡片邊緣切掉 */ .draft__foot .badge { white-space: normal; } /* 角度比對：三欄各只剩約 70px，「右側轉身」加上分數橫排會擠在一起， 改成標籤在上、分數在下。 */ .angle figcaption { flex-direction: column; align-items: flex-start; gap: 2px; } /* 分潤比例條：手機寬度下 25% / 15% 兩段裝不下「經紀 25%」， 標籤會互相擠到重疊。這裡換成只有百分比的那個標籤，名稱交給下面的圖例。 */ .split-bar__full { display: none; } .split-bar__short { display: block; } .split-bar__seg { min-width: 0; overflow: hidden; font-size: 0.82rem; } /* 卡片內距收一點，把寬度讓給內容 */ .vas { padding: var(--sp-4); } .mock__pad { padding: var(--sp-3); } } /* --- 4. 最後一道保險 ------------------------------------------------------ */ /* 任何一個超寬的子孫都可能把整頁撐破，讓右邊的字被 body 的 overflow-x:hidden 切掉。這裡把常見的 grid / flex 容器的最小寬度歸零， 內容該捲的自己捲（.mock__scroll、.diagram__scroll），而不是撐破頁面。 */ @media (max-width: 900px) { .vas__head, .vas__grid, .vas__foot, .steps__item, .bizcard, .secbar { min-width: 0; } .vas__head > *, .vas__grid > *, .steps__item > *, .bizcard > * { min-width: 0; } }