/* * 品牌與可讀性 token：本檔案由前端負責人維護。 * Token 值（品牌色、語意色、字型堆疊、間距、圓角等）由統合規格 v3.2 §12 定義： * - 品牌與語意色（primitive 到 semantic 兩層變數）；元件只准用 semantic 變數。 * - 內文字型固定系統字型堆疊（PingFang TC／Noto Sans TC／Microsoft JhengHei／system-ui，順序照樣板）， * 不外掛 Google 字型服務的中文字型；標題若用自架子集化字型另計。 * - 不引入 Tailwind 或其他 CSS 框架。 * 全站 hex 色碼只能出現在這個檔案；其他任何 view／component 出現 hex 色碼視為違反契約 * （見 tests/Cloudforce.Web.Tests/Architecture/ViewSourceRulesTests.cs）。 * 2026-09-09：第一批 CMS 目錄頁啟用 light-first 版面；品牌亮藍不直接當白底小字色。 * 2026-09-24（#74）：套用方向 A 的視覺系統。--wash 與 --line 加深——原值與白卡的 L* 只差 2.90、 * 邊框對白卡只有 1.30:1，卡片浮不起來。新值的每一個關係都由 * tests/Cloudforce.Web.Tests/Architecture/DesignTokenContrastTests.cs 實際計算並鎖住，改這裡會紅。 */ /* 2026-10-02（issue 175）：自架字型（SIL OFL 1.1，授權檔在 wwwroot/fonts/OFL-*.txt），不引外部字型服務。 Noto Sans TC 切成兩份：core 是目前官網用到的字（可變字重 100–900），ext 是其餘 Big5 常用字—— 只有頁面真的用到 core 沒有的字，瀏覽器才會下載 ext。ext 的 unicode-range 刻意收成整個 CJK 區塊（寫在 core 之前， 所以 core 範圍內的字一律走 core），不逐字列舉，省下約 27 KB 的 CSS。Inter Tight 負責拉丁字與數字， 最後宣告所以優先於 core 的 ASCII。 ext 用 font-display: optional：它只含罕用字，載入較慢，若等載入完再換字會讓那一行重排（版面位移）； optional 讓第一次造訪時罕用字先用系統字型、之後（已快取）才用 Noto，永遠不會在頁面上換字。 */ @font-face { font-family: "Noto Sans TC"; font-style: normal; font-weight: 100 900; font-display: optional; src: url("../fonts/NotoSansTC-ext.woff2") format("woff2"); unicode-range: U+2E80-2FDF, U+3000-303F, U+31C0-31EF, U+3200-32FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF, U+2018-201D, U+2160-2169, U+2190-2199; } @font-face { font-family: "Noto Sans TC"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/NotoSansTC-core.woff2") format("woff2"); unicode-range: U+20-7E,U+A7,U+B7,U+D7,U+2013-2014,U+2019,U+2026,U+2192,U+2197,U+2713,U+3001-3002,U+300C-300D,U+30FB,U+4E00,U+4E03,U+4E09-4E0B,U+4E0D,U+4E14,U+4E1F,U+4E26,U+4E2D,U+4E32,U+4E3B,U+4E45,U+4E4B,U+4E5F,U+4E86,U+4E8B-4E8C,U+4E92,U+4E94,U+4E9B,U+4EA4,U+4EA6,U+4EAB,U+4EBA,U+4EC0,U+4ECA-4ECB,U+4ECD,U+4ED6,U+4ED8,U+4EE3-4EE5,U+4EF6,U+4EFB,U+4EFD,U+4F01,U+4F30,U+4F34,U+4F38,U+4F3A,U+4F3C,U+4F46,U+4F4D-4F4F,U+4F54-4F55,U+4F5C,U+4F60,U+4F75,U+4F7F,U+4F86,U+4F8B,U+4F9B,U+4F9D,U+4FB5,U+4FBF,U+4FC2,U+4FDD,U+4FE1,U+4FEE,U+500B,U+5011,U+5019,U+501F,U+503C,U+5047,U+504F,U+505A,U+505C,U+5074-5075,U+5099,U+50B3,U+50C5,U+50CF,U+50F9,U+512A,U+5132,U+5141,U+5143,U+5145,U+5148-5149,U+514D,U+5165,U+5167-5169,U+516B-516D,U+5171,U+5176-5178,U+517C,U+518A,U+518D,U+5192,U+51AA,U+51C6,U+51CD,U+51FA,U+51FD,U+5206-5207,U+520A,U+5217,U+521D,U+5224-5225,U+5229-522A,U+5230,U+5236,U+523B,U+5247,U+524D,U+525B,U+5269-526A,U+526F,U+5283,U+529B,U+529F-52A0,U+52A9,U+52D2,U+52D5,U+52D9,U+52DD,U+52DF,U+52E2,U+52FE-52FF,U+5305,U+5316-5317,U+5323,U+533F-5341,U+5343,U+5347,U+534A,U+5354,U+5357,U+5361,U+5370,U+5373,U+537B,U+539F,U+53BB,U+53C3,U+53C8,U+53CA,U+53CD,U+53D6-53D7,U+53E3,U+53E5-53E6,U+53EA-53EB,U+53EF-53F0,U+53F2-53F3,U+53F8,U+5403-5404,U+5408,U+540C-540D,U+5410-5411,U+541E,U+5426,U+542B,U+5448,U+544A,U+547C-547D,U+548C,U+54C1,U+54E1,U+54EA,U+552E-552F,U+5546,U+554F,U+555F,U+5584,U+55AE,U+55CE,U+5668,U+56B4,U+56CA,U+56DB,U+56DE,U+56E0,U+56FA,U+5708,U+570B,U+570D,U+5713,U+5716,U+5718,U+5728,U+5730,U+573E,U+5740,U+5747,U+5782-5783,U+578B,U+57CE,U+57DF-57E0,U+57F7,U+57FA,U+5806,U+5831,U+5834,U+584A,U+585E,U+586B,U+5883,U+589E,U+58D3,U+58DE,U+5916,U+591A,U+5925,U+5927,U+5929-592A,U+5931,U+593E,U+594F,U+5951,U+5957,U+597D,U+5982,U+59A5,U+59CB,U+59D3,U+5A01,U+5A92,U+5B50,U+5B57-5B58,U+5B63,U+5B78,U+5B83,U+5B88-5B89,U+5B8C,U+5B98,U+5B9A,U+5BA2-5BA3,U+5BB6,U+5BB9,U+5BC4,U+5BC6,U+5BDF,U+5BE6-5BE7,U+5BE9,U+5BEB-5BEC,U+5BF8,U+5C01,U+5C04,U+5C07-5C08,U+5C0B,U+5C0D-5C0F,U+5C11,U+5C1A,U+5C24,U+5C31,U+5C3A,U+5C3E,U+5C46,U+5C4F,U+5C51,U+5C55,U+5C64,U+5C6C,U+5D4C,U+5DE2,U+5DE5-5DE7,U+5DEE,U+5DF1-5DF2,U+5E02-5E03,U+5E0C,U+5E2B,U+5E2D,U+5E33,U+5E36,U+5E38,U+5E45,U+5E55,U+5E63,U+5E73-5E74,U+5E7E,U+5E8F,U+5E95,U+5E9C,U+5EA6-5EA7,U+5EAB,U+5EE0,U+5EE2,U+5EF6,U+5EFA,U+5F0F,U+5F15,U+5F35,U+5F37,U+5F48,U+5F59,U+5F62,U+5F69,U+5F71,U+5F79,U+5F80,U+5F85,U+5F8B-5F8C,U+5F91,U+5F97,U+5F9E,U+5FA9-5FAA,U+5FAE,U+5FB5,U+5FBD,U+5FC3,U+5FC5,U+5FEB,U+5FF5,U+5FFD,U+600E,U+6027,U+6046,U+6062,U+606F,U+6084,U+60A8,U+60C5,U+60E1,U+60F3,U+610F,U+611F,U+614B,U+6163,U+6167,U+616E,U+6191,U+61C2,U+61C9,U+6210-6211,U+6216,U+622A,U+6233,U+6236,U+623F-6240,U+624B,U+624D,U+6253,U+6279,U+627E-6280,U+6284,U+628A,U+6293,U+6295,U+6298,U+62B5,U+62BD,U+62C6,U+62C9,U+62D2-62D3,U+62D6,U+62D8,U+62DB,U+62EC,U+62FF,U+6301,U+6307,U+6309,U+6311,U+6349,U+6355,U+6368,U+6372,U+6383,U+6388-6389,U+638C,U+6392,U+639B,U+63A1-63A2,U+63A5,U+63A7-63A8,U+63AA,U+63CF-63D0,U+63D2,U+63DB,U+63E1,U+63ED-63EE,U+63F4,U+640D,U+641C,U+642C-642D,U+6458,U+6490,U+64A4-64A5,U+64AD,U+64B0,U+64C1,U+64C7,U+64CA-64CB,U+64CD-64CE,U+64D4,U+64DA,U+64E0,U+64EC,U+64F4,U+6514,U+6524,U+652F,U+6536,U+6539,U+653B,U+653E-653F,U+6548,U+654F,U+6557,U+6559,U+6563,U+6574,U+6578,U+6582,U+6587,U+6599,U+659C,U+65A5,U+65B0,U+65B7,U+65B9,U+65BC-65BD,U+65C1,U+65CF,U+65D7,U+65E2,U+65E5,U+65E8-65E9,U+660E,U+6620,U+6627,U+662F,U+6642,U+665A,U+666F,U+667A,U+66AB,U+66B4,U+66D6,U+66F3-66F4,U+66F8,U+66FE-6700,U+6703,U+6708-6709,U+670D,U+671B,U+671F,U+672A-672C,U+6750,U+675F,U+6761,U+6771,U+677F,U+6790,U+679A,U+679C-679D,U+67B6,U+67D0,U+67D3,U+67E5,U+6821,U+6838-6839,U+683C,U+6846,U+6848,U+689D,U+68B0,U+68B3,U+68C4,U+695A,U+696D,U+6982,U+69CB,U+6A19,U+6A21,U+6A23,U+6A38-6A39,U+6A5F,U+6A6B,U+6A94,U+6AA2,U+6B04,U+6B0A,U+6B21,U+6B62-6B65,U+6B77-6B78,U+6B7B,U+6BB5,U+6BBC,U+6BCD,U+6BCF,U+6BD4,U+6C23,U+6C34,U+6C38,U+6C42,U+6C61,U+6C7A,U+6C92,U+6CBB,U+6CBF,U+6CC1,U+6CD5,U+6CDB,U+6CE8,U+6D1E,U+6D3B,U+6D41,U+6D77,U+6D88,U+6DB5,U+6DE1,U+6DF1,U+6DF7,U+6DF9-6DFA,U+6E05,U+6E1B,U+6E2C,U+6E32,U+6E38,U+6E4A,U+6E90,U+6E96,U+6E9D,U+6EAF,U+6ED1,U+6EF2,U+6EFF,U+6F0F,U+6FEB,U+6FFE,U+700F,U+7063,U+7070,U+707D,U+70BA,U+7121,U+7126,U+7136,U+7167,U+71C8,U+71DF,U+71F4,U+7236,U+7246-7248,U+724C,U+7269,U+7279,U+72C0,U+731C,U+7368,U+7372,U+7387,U+73ED,U+73FE,U+7406,U+7452,U+74B0,U+751F,U+7522,U+7528,U+7531,U+7533,U+754C,U+7559,U+7565,U+756B,U+7570,U+7576,U+7587,U+758A,U+7591,U+75D5,U+767B-767E,U+7684,U+7686,U+76AE,U+76CA,U+76D2,U+76E1,U+76E3-76E4,U+76EE,U+76F4,U+76F8,U+76FE,U+7701,U+770B,U+771F,U+773C,U+77E5,U+77E9,U+77ED,U+7814,U+7834,U+786C,U+78B0,U+78BA,U+78BC,U+78DA,U+790E,U+7919,U+793A,U+793E,U+7956,U+7968,U+7981,U+79A6,U+79C1,U+79D1-79D2,U+79DF,U+79FB,U+7A0B,U+7A0D,U+7A2E,U+7A31,U+7A3D,U+7A3F,U+7A7A,U+7A81,U+7A84,U+7A97,U+7ACB,U+7AD9,U+7AE0,U+7AEF,U+7B26,U+7B2C,U+7B46,U+7B49,U+7B54,U+7B56,U+7B97,U+7BA1,U+7BAD,U+7BB1,U+7BC0,U+7BC4,U+7BC7,U+7BE9,U+7C21,U+7C3D,U+7C3F,U+7C64,U+7C97,U+7CB9,U+7CBE,U+7CCA,U+7CFB,U+7D00,U+7D04,U+7D0B,U+7D0D,U+7D14,U+7D18,U+7D1A,U+7D20,U+7D22,U+7D30,U+7D44,U+7D50,U+7D55,U+7D61,U+7D66,U+7D71,U+7D81,U+7D93,U+7DAD,U+7DB1-7DB2,U+7DB4,U+7DCA,U+7DDA,U+7DE3,U+7DE8-7DE9,U+7DFB,U+7E23,U+7E2B,U+7E2E,U+7E3D,U+7E41,U+7E54,U+7E5E,U+7E6B,U+7E7C,U+7E8C,U+7ED3,U+7EED,U+7F3A,U+7F69,U+7F6E,U+7F72,U+7FA4,U+7FA9,U+7FD2,U+7FFB,U+8003,U+8005,U+800C,U+804A,U+805A,U+805E,U+806F,U+8072,U+8077,U+80A1,U+80B2,U+80CC,U+80FD,U+8105,U+8108,U+812B,U+8173,U+81A0,U+81EA,U+81F3-81F4,U+81FA,U+8207,U+820A,U+822C,U+8272,U+82E5,U+82F1,U+8349,U+843D,U+8449,U+8457,U+8490,U+84CB,U+85A6,U+85CD,U+85CF,U+8655,U+865B,U+865F,U+878D,U+87A2,U+884C,U+8853,U+8857,U+885D,U+8861,U+8868,U+88AB,U+88C1,U+88DC-88DD,U+88E1,U+88F8,U+88FD,U+8907,U+897F,U+8981,U+8986,U+898B,U+898F,U+8996,U+89BA,U+89BD,U+89C0,U+89D2,U+89E3,U+89F8,U+8A00,U+8A02,U+8A08,U+8A0A,U+8A0E,U+8A16-8A18,U+8A2A,U+8A2D,U+8A31,U+8A3B,U+8A55,U+8A5E,U+8A62,U+8A66,U+8A71-8A73,U+8A8C-8A8D,U+8A9E,U+8AA4,U+8AAA,U+8AB0,U+8AB2,U+8ABF,U+8AC7,U+8ACB,U+8AD6,U+8AEE,U+8AFE,U+8B0A,U+8B1B,U+8B1D,U+8B49,U+8B58,U+8B66,U+8B6F-8B70,U+8B77,U+8B80,U+8B8A,U+8B93,U+8C61,U+8CA0-8CA1,U+8CAC,U+8CB4,U+8CB7,U+8CBB-8CBC,U+8CC7,U+8CE6,U+8CEA,U+8CF4,U+8CFC,U+8D70,U+8D77,U+8D85,U+8D8A,U+8DB3,U+8DD1,U+8DDD,U+8DDF,U+8DE1,U+8DE8,U+8DEF,U+8DF3,U+8E29,U+8E64,U+8EAB,U+8ECC,U+8EDF,U+8EF8,U+8F03,U+8F09,U+8F14,U+8F2A,U+8F2F,U+8F38,U+8F49,U+8FA6,U+8FA8,U+8FB9,U+8FC4,U+8FD1,U+8FD4,U+8FF0,U+8FF4,U+8FFD,U+9000-9001,U+9003,U+900F-9010,U+9014,U+9017,U+9019-901A,U+901F-9020,U+9023,U+9031-9032,U+9038,U+903C,U+9047,U+904B,U+904E,U+9053-9055,U+9059,U+905E,U+9060,U+9069,U+906D-906E,U+9072,U+9075,U+9077-9078,U+907F,U+9084,U+908A,U+908F,U+90A3,U+90E8,U+90F5,U+90FD,U+914D,U+9192,U+91CD,U+91CF-91D1,U+91D8,U+91DD,U+91E3,U+9215,U+9264,U+929C,U+92B7,U+92EA,U+9304,U+9328,U+932F,U+9375,U+9396,U+93C8,U+93E1,U+9418,U+9451,U+9470,U+9577,U+9580,U+9589,U+958B,U+9593,U+9598,U+95B1,U+95DC,U+9632,U+963B,U+9644,U+964D,U+9650,U+9663-9664,U+968A,U+968E,U+9694,U+969B-969C,U+96A8,U+96AA,U+96B1,U+96C6,U+96D6,U+96D9,U+96DC,U+96E2-96E3,U+96F2,U+96F6,U+96FB,U+9700,U+9732,U+975C,U+975E,U+9760,U+9762,U+97CC,U+97FF,U+9801-9802,U+9805-9806,U+9808,U+9810,U+9818,U+982D,U+983B,U+9846,U+984C-984D,U+984F,U+985E,U+9867,U+986F,U+98A8,U+98FE,U+9918,U+9935,U+9996,U+99AC,U+9A45,U+9A57,U+9A5F,U+9AA8,U+9AD4,U+9AD8,U+9B06,U+9B5A,U+9EB5,U+9EBC,U+9EC3,U+9ED8,U+9EDE,U+9F20,U+9F4A,U+FF01,U+FF08-FF09,U+FF0B-FF0C,U+FF0F,U+FF1A-FF1B,U+FF1D,U+FF1F,U+FF5C,U+FF5E; } @font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/InterTight-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --cloudforce-blue: #28A7E1; --devaeye-blue: #00A0E9; --evidence-accent: var(--devaeye-blue); --ink: #1F1F4D; /* issue 382：淺區標題與墨色（靛藍黑）；深區強調字見 --hero-em */ --action: #414298; /* issue 382：靛藍——淺區小標、連結、圖示、步驟編號；白底 8.7:1 */ --accent: var(--action); /* 品牌強調色：圖形與大字（ADR 0011） */ --accent-ink: var(--action); /* 品牌強調色：淺底小字 */ --accent-on: var(--paper); /* 放在強調色填色上的文字 */ --accent-dark: var(--hero-em); /* 品牌強調色：深底小字與大標強調字；issue 382 與首頁、DevaEye 一致用淡青 */ --muted: #56647B; --paper: #FFFFFF; --wash: #E7F0F7; /* 頁底：與 --paper 的 L* 差 5.68，卡片才浮得起來 */ /* 2026-09-29（WI-02／#99）：頁尾滿版底色。樣板的頁尾底是 --paper(#f5f8fb)，介於我方 --paper（純白） 與 --wash 之間；--wash 拿來當整塊頁尾的底會壓過卡片與頁底的層級關係，所以另立一階。 只當表面用，不當文字色；與 --muted／--ink 的對比在 DesignTokenContrastTests 實測鎖住。 */ --surface-sunken: #F5F8FB; --line: #D8E2EC; /* 邊框：issue 135 使用者要求全站照樣板 --line（取代 #74 加深的 #C2D2E2） */ --field-border: #7D8DA2; /* issue 135：--line 改回樣板淡色後，表單欄位外框另用此色，對白底 3.39:1（WCAG 1.4.11） */ --on-dark-line: #3C4C6B; /* 2026-09-29（WI-02／#91）：按鈕 hover 的深一階行動色。靜態審稿樣板用 #095979（比它的 --blue 深一階）， 這裡取本專案 --action 的對應深階：白字對它 8.14:1（--action 本身是 5.72:1），兩者都過 AA。 */ --action-hover: #33347A; --shadow: #14203918; /* 2026-09-29（WI-02／#94）：拉丁字型排在中文字型之前，對齊 2026-09-28 靜態審稿樣板。 字型清單本身沒變（仍是系統字型、不外掛字型服務），變的是順序。實際效果差很多： 原本的順序讓英文也用 PingFang TC 的拉丁字符——「CLOUDFORCE / SECURITY WITH ACCOUNTABILITY」、 「DevaEye Cybersecurity as a Service」這類全英文標題會明顯比樣板鬆散。中文仍然落到 PingFang TC。 這與規格 v3.2 §12 列的字型集合一致，但列舉順序不同；差異是刻意的，見 #94。 */ /* issue 135：順序照樣板——Noto Sans TC 在 Microsoft JhengHei 之前。原本正黑體在前，Windows 裝有 Noto Sans TC 時 樣板用 Noto、本站用正黑體，所有標題與按鈕看起來粗細都不同。正黑體保留為沒有 Noto 時的後備。 */ --font-body: "Inter Tight", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif; /* 2026-09-25（WI-19／#78，方向 A 共用元件）：深色面板（.band-dark／.tile-grid--dark／ .topic-card--lead／.cta-band）新增的兩個色階。--action 在 --ink 上只有 2.92:1（見 DesignTokenContrastTests），深色面板一律改用下面這三個——每一個關係都在 DesignTokenContrastTests 裡實測鎖住，改這裡會紅。 */ --muted-on-dark: #C1CFDF; /* 深色面板的次要文字（asof／footnote／lead）：對 --ink 與兩端漸層皆 >= 10:1；issue 118 改照樣板 .cta-band 的說明文字色 */ --on-dark-eyebrow: #96A7D5; /* issue 118：樣板 .cta-band .eyebrow */ --on-dark-card-body: #CAD7E7; /* issue 118：樣板 .business-card p */ --on-dark-card-number: #92D6F5; /* issue 118：樣板 .business-card .number */ --on-dark-card-link: #93DBFF; /* issue 118：樣板 .business-card .text-link */ --on-wash-link: #414298; /* issue 118：樣板 .business-card.blue .text-link */ --frame-line: #D8E2EC; /* issue 135a：樣板 --line，只給頁首底線、頁尾上線、麵包屑外框這類「框」用；卡片邊框仍用較深的 --line */ --button-outline-line: #AAB9CA; /* issue 135a：樣板 .button.outline 的邊框色 */ --orbit-ring: #96A7D5; /* issue 157：樣板 .orbit i 的同心圓線色，只當首頁深色大卡的裝飾線，不承載文字 */ --signal-bar: #96A7D5; /* issue 157：樣板 .signal span（--cyan）的斜條紋色，只當首頁淺色大卡的裝飾，不承載文字 */ --numbered-rule: var(--cta); /* issue 133：樣板 .numbered-list>div 的上緣 2px 線（--cyan），只當裝飾線用，不承載文字 */ --line-template: #D8E2EC; /* issue 135c：樣板 --line；只由首頁與情境頁在 .catalog-content 範圍內覆寫 --line 時使用，:root 的 --line 不動（#74 已由 DesignTokenContrastTests 鎖住） */ --outline-border: #AAB9CA; /* issue 135c：樣板 .button.outline 的框線 */ --outline-hover: #E6F1F6; /* issue 135c：樣板 .button.outline:hover 的底色 */ --card-wash: #FEF3C7; /* issue 382：米白——淺色卡片底（原樣板 .business-card.blue 的底色） */ --tag-bg: #F2F7FA; /* issue 135c：樣板 .tags span 的底色 */ --on-wash-number: #414298; /* issue 118：樣板 .blue .number */ --feature-icon-bg: #ECECF5; /* issue 137：樣板 .feature-icon 的方框底色 */ --feature-icon-fg: #414298; /* issue 137：樣板 .feature-icon 的圖示線條色；對 --feature-icon-bg 的對比由 DesignTokenContrastTests 鎖住 */ --chain-arrow: #5CD0FF; /* issue 140：樣板 .chain b（節點間箭頭），畫在 --navy 上 */ --chain-caption: #BFD3E8; /* issue 140：樣板 .chain small（節點副標），畫在 --navy 上；對比由 DesignTokenContrastTests 鎖住 */ --architecture-caption: #BADEEE; /* issue 141：樣板 .architecture figcaption（深藍底上的圖說字色） */ --architecture-arrow: #82D7FC; /* issue 141：樣板 .architecture li+li::before 箭頭色 */ --architecture-sub: #C2D6E6; /* issue 141：樣板 .architecture small 字色 */ --tag-text: #414298; /* issue 118：樣板 .tags span／.badge 的字色 */ --table-head-bg: #F1F6FA; /* issue 118：樣板 table th 底色 */ --chip-bg: #F2F7FA; /* issue 135b：樣板 .tags span／.badge 的底色 */ --chip-muted-bg: #F3F3F5; /* issue 142：樣板 .badge.muted（規劃中的灰色徽章）底色 */ --chip-muted-text: #626975; /* issue 142：樣板 .badge.muted 字色；對 --chip-muted-bg 的對比由 DesignTokenContrastTests 鎖住 */ --table-caption-bg: #EEF5FA; /* issue 135b：樣板 caption 底色 */ --table-cell-text: #47576D; /* issue 118：樣板 table td 字色 */ --notice-accent: #C38826; /* issue 132：樣板 .notice 的左邊條 */ --notice-bg: #FFF8EC; /* issue 132：樣板 .notice 底色 */ --notice-text: #59492E; /* issue 132：樣板 .notice 字色；對 --notice-bg 的對比由 DesignTokenContrastTests 鎖住 */ --badge-red: #D92D20; /* issue 425：新文章數徽章與 NEW 標籤的紅底；白字（--paper）對它 4.84:1，由 DesignTokenContrastTests 鎖住 */ --navy: #131D33; /* issue 118：樣板 --navy，.button.light 的字色 */ /* issue 429：資安洞察中心發布量的四級深淺（長條與月曆格）。lv1／lv2 配白字（--paper）、lv3／lv4 配 --ink；lv3 當長條色，對 --paper 與 --navy 都 >= 3:1； 全部由 DesignTokenContrastTests 鎖住。 */ --pulse-lv1: #2C316A; --pulse-lv2: #414298; --pulse-lv3: #8D8EC1; --pulse-lv4: #BCBDDB; --dark-gradient-start: #131D33; /* CTA／焦點卡漸層淺端（斜對角） */ --dark-gradient-end: #0B1220; /* CTA／焦點卡漸層深端 */ /* issue 231：服務運行架構場景（devaeye-ops-arch）在深色舞台上的流向色與節點底色，只給 scenes/devaeye-ops-arch.css 讀； 五個流向色（橘、紫、紅、青、綠）加亮藍，色碼取自示意定案版，在 --deeper 上字與線皆 >= 6:1。 */ --arch-orange: #F59E4B; --arch-purple: #A08CFF; --arch-coral: #F4695F; --arch-teal: #3FC7D3; --arch-green: #3DD68C; --arch-sky: #7FB8F0; --arch-node: #0F1A33; /* 節點底（再混入流向色 11%） */ --arch-line: #4A5C80; /* ghost 節點與膠囊的外框 */ --arch-navy-fill: #143055; /* 欄位標題（藍） */ --arch-coral-fill: #7C2F3C; /* 欄位標題（珊瑚） */ --arch-panel: #16264A; /* 狀態列底 */ --arch-panel-line: #2F4573; /* 狀態列框 */ /* 尺度 token（#74）。以前圓角散落 .35/.45/.6/.7/.8rem 六種、卡片沒有層級、區段間距寫死 3.5rem； 收斂成三階圓角、兩階陰影與一個流體區段節奏，元件只引用這些變數。 */ --radius-s: .4rem; --radius-m: .7rem; --radius-l: 1rem; /* 2026-09-29（WI-02／#99）：靜態審稿樣板只有一個圓角值 18px，用在大卡、品牌卡與結尾 CTA 帶。 不改 --radius-l（1rem）——.tile-grid、.band-dark、.campaign-* 都在用它，改了會一起變。 */ --radius-xl: 1.125rem; --space-section: clamp(3rem, 7vw, 5.5rem); --elevation-card: 0 1px 2px #1420390A, 0 10px 26px #1420390D; --elevation-raised: 0 2px 4px #1420390F, 0 18px 40px #1420391A; /* 2026-10-02（issue 175，設計系統）：全站新版視覺的 token。色彩沿用既有的 --ink／--line／--cloudforce-blue／--devaeye-blue， 只補深色三階與在深色面板上的線條色；字級、版面寬度、圓角與緩動集中在這裡，元件只引用變數。 每個前景／背景組合的對比由 DesignTokenContrastTests 實測鎖住。 */ --deep: #131D33; /* 深色面板（卡片、節點） */ --deeper: #0B1220; /* 深色區段底、頁尾、導覽展開面板 */ --soft: #96A7D5; /* 深色底上的亮藍：eyebrow、連結、節點亮起 */ --netskope-blue: #00A9CE; /* issue 267：Netskope 頁面以它取代 --soft（頁首小標、深色區亮藍字）；深底 7.1:1 */ --on-accent: #142039; /* issue 382：疊在 --cta 琥珀填色按鈕上的字色（對琥珀約 7.9:1） */ /* issue 382（暖米白配色，使用者 2026-10-21 定案）：中性 60%＝白 --paper／暖米白 --warm／米白 --card-wash； 品牌 30%＝深藍 --deeper、深卡 --deep／--navy、靛藍 --action、標題 --ink；強調 10%＝琥珀 --cta。 --cta 只當填色、光點與雷達，不當文字（白底 2.1:1）；--devaeye-blue 保留為 DevaEye 品牌亮藍，元件不再直接用。 */ --cta: #F59E0B; --warm: #FBF7EC; /* 原本深色的區段（首頁服務流程、DevaEye 清單／資料流／流程／合規）改成的淺底 */ --hero-em: #A0D8EA; /* 深區大標的強調字（首頁輪播詞）；對 --deeper 約 11:1 */ /* 代理品牌頁（[data-accent] 有值）維持原本的藍色強調：inner.css 的「代理品牌頁沿用舊強調色」段把下面四個還原。 */ --on-accent-legacy: #03111D; --soft-legacy: #84D5FA; --deep-line: #22314F; /* 深色面板上的細分隔線 */ --outline-dark: #2A3A5C; /* 頁尾大字描邊 */ --ease: var(--ease-out-expo); --gutter: clamp(1.25rem, 5vw, 4.5rem); --max: 82.5rem; --section-pad: clamp(6.25rem, 12vw, 11.875rem); --fs-xl: clamp(2.625rem, 7.4vw, 7.375rem); --fs-l: clamp(2rem, 4.6vw, 4.25rem); --fs-m: clamp(1.375rem, 2.3vw, 2.125rem); --fs-lead: clamp(1rem, 1.35vw, 1.1875rem); /* issue 189（C3）：H1 只有三級——首頁 --fs-xl、所有內頁（含 DevaEye、MDR、原廠頁）--fs-h1、文章頁小一級 --fs-h1-article。 */ --fs-h1: clamp(2.5rem, 6vw, 5.25rem); --fs-h1-article: clamp(2rem, 4.6vw, 4.25rem); --r-card: 2rem; --r-top: 0px; --r-pill: 999px; /* issue 174 motion tokens */ --ease-out-expo: cubic-bezier(.16, 1, .3, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --dur-fast: .18s; --dur-base: .35s; --dur-slow: .8s; --motion-rise: 1.25rem; --motion-stagger: 70ms; } /* ADR 0011（issue 191）：代理與 DevaEye 頁的品牌強調色。只能在這裡寫色碼；後台以下拉選代號，子頁沿用根頁。 --accent-spark（issue 193）：品牌輔色，只用在裝飾（頁首捲動碎片散開時的顏色）；湖水綠＝Trellix 範例站的琥珀金，其他色組未設定時沿用淡化的強調色。 */ [data-accent="gold"] { --accent: #E8B423; --accent-ink: #7A5A00; --accent-on: #1A1404; --accent-dark: #E8B423; } [data-accent="orange"] { --accent: #FF7A45; --accent-ink: #B3380D; --accent-on: #1A0A04; --accent-dark: #FF7A45; } [data-accent="teal"] { --accent: #14B8C4; --accent-ink: #0B6870; --accent-on: #071525; --accent-dark: #14B8C4; } [data-accent="aqua"] { --accent: #2EE6D0; --accent-ink: #0A665C; --accent-on: #06201C; --accent-dark: #2EE6D0; --accent-spark: #F0C36A; } /* issue 382（暖米白配色）：cyan 只有 DevaEye 自家頁在用，色組改成角色分工——填色琥珀 --accent／--accent-fill（字用 --accent-on 深色）、 淺底文字靛藍 --accent-ink、深底文字與線條淡青 --accent-dark。--accent-fill 只有 cyan 定義：元件寫 var(--accent-fill, var(--accent-dark))， 其他色組沒有它，一律回到各自的 --accent-dark，輸出與改前相同（DesignTokenContrastTests 鎖住「只有 cyan 有」）。琥珀不當文字色。 */ [data-accent="cyan"] { --accent: #F59E0B; --accent-fill: #F59E0B; --accent-ink: #414298; --accent-on: #142039; --accent-dark: #A0D8EA; } /* 2026-10-04：SentinelOne 紫（取自原廠素材 #B48CFF／#7C4DFF）；白底文字用 #5B2ED9（7.4:1），深底 #B48CFF（7.7:1）。 */ [data-accent="purple"] { --accent: #B48CFF; --accent-ink: #5B2ED9; --accent-on: #140C22; --accent-dark: #B48CFF; --accent-spark: #7C4DFF; /* 2026-10-05：SentinelOne 頁的深色帶用紫黑兩階（素材底色），深底弱字與細線跟著偏紫；對比：弱字 #D4CCE4 在 #0C0716 上 12.8:1。 */ --deeper: #0C0716; --navy: #160F28; --on-dark-line: #3A2D5C; --muted-on-dark: #D4CCE4; } /* 2026-10-05：Acronis 萊姆綠（取自原廠素材 #C6EF6A，輔色沙金 #E4C98A）；深色帶用墨綠黑兩階。對比：白底文字 #3F6212 7.1:1、萊姆綠在 #0E1412 上 14.2:1、弱字 #A3B5A8 8.6:1。 */ [data-accent="lime"] { --accent: #C6EF6A; --accent-ink: #3F6212; --accent-on: #14200A; --accent-dark: #C6EF6A; --accent-spark: #E4C98A; --deeper: #0E1412; --navy: #171F1B; --on-dark-line: #2C3B32; --muted-on-dark: #A3B5A8; } /* 2026-10-05：Check Point 粉紅（取自原廠素材 #FF4D7D，輔色琥珀 #E4C48A）；深色帶用素材的藍黑兩階，細線是粉紅 22% 疊在底色上。 對比：粉紅在 #0C1016 上 6.0:1、按鈕深字在粉紅上 6.1:1、白底文字 #B3123F 6.8:1、弱字 #93A0B3 7.4:1。 */ [data-accent="pink"] { --accent: #FF4D7D; --accent-ink: #B3123F; --accent-on: #1A0710; --accent-dark: #FF4D7D; --accent-spark: #E4C48A; --deeper: #0C1016; --navy: #141A24; --on-dark-line: #411D2D; --muted-on-dark: #93A0B3; } /* issue 431：警示紅（紅色供應鏈頁）。白底文字 #C4261B 約 5.9:1、深底小字 #FF6B60、按鈕深字 #1A0705 在 #FF5A4E 上 6.9:1。 */ [data-accent="red"] { --accent: #FF5A4E; --accent-ink: #C4261B; --accent-on: #1A0705; --accent-dark: #FF6B60; } /* issue 431：紅色供應鏈頁的深藍紅配色（頁首效果、數字帶卡片、擋下與體檢場景共用）；色碼只在這裡。 */ :root { --rs-bg: #0D1326; --rs-bg2: #121A33; --rs-bg-top: #141A33; --rs-card: #161F3B; --rs-card-top: #1A2446; --rs-line: #27315A; --rs-line-hi: #3A4677; --rs-muted: #AEB8D6; --rs-text: #D6DDF2; --rs-pkg-bg: #1D2850; --rs-pkg-ink: #9FB0DA; --rs-well: #0F1730; --rs-red: #FF5A4E; --rs-red-soft: #FF8A80; --rs-red-pale: #FFC2BC; --rs-red-fill: #E0392C; --rs-red-text-on: #1A0705; --rs-red-hover: #FF7A70; --rs-blue: #3FA9F5; --rs-blue-fill: #1F86D6; --rs-warn: #FFC86B; --rs-code: 170 185 230; --rs-red-rgb: 255 90 78; --rs-blue-rgb: 63 169 245; --rs-warn-rgb: 255 190 80; --rs-glow-rgb: 150 40 50; } /* issue 227／257／296：Netskope 以「公司官網配色為底、品牌色依 Netskope 官網規則」呈現（brand guidelines 2021 主色 Netskope Blue #00A9CE；Navy #081A59、Orange #FF8200 輔色）。 深色面（--deeper／--navy／--on-dark-line／--muted-on-dark）與結尾行動帶底色不再另設，沿用公司色；Blue 只當強調／邊框／圖示／深底文字， 白底文字用深青藍 --accent-ink #00728C（白底 5.6:1）；按鈕一律主題青藍（使用者 2026-10-14 決定不用 Orange）；--accent-spark 薄荷只作裝飾。 --ns-* 是 Netskope 頁專用的品牌色票，規則在 catalog-blocks.css 的「Netskope 品牌配色」段。 */ [data-accent="netskope"] { --accent: #00A9CE; --accent-ink: #00728C; --accent-on: #081A59; --accent-dark: #00A9CE; --accent-spark: #B1F19A; --ns-navy: #081A59; --ns-night: #03091F; --ns-pale: #D9FAFF; }