/* ───────────────────────────────────────────────────────── okross.co 首頁原型 · 方向 B(活體儀表板)+ 一處 A 的氣氛 單一視覺世界:不隨檢視者主題切換,所有顏色明確指定。 品牌綠 #19FC95 取自 logo 實際取樣。 ───────────────────────────────────────────────────────── */ :root{ --g900:#070B09; --g800:#0C1310; --g700:#121B17; --g600:#1A241F; --rule:#22302A; --rule-2:#2E3F38; --fg:#EAF2EE; --fg2:#A6B7AF; --fg3:#6D8078; --brand:#19FC95; --brand-dim:#0E9E5F; --brand-ink:#04120B; --up:#19FC95; --down:#FF6F5E; --warn:#F5B84B; --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; --sans:ui-sans-serif,-apple-system,"Helvetica Neue","PingFang TC","Noto Sans TC",sans-serif; --pad:clamp(1.15rem,4vw,2rem); } *{box-sizing:border-box} /* ── 釘住母主題的調色盤 ───────────────────────────────────── ⚠ 這一段是上線前才發現的,而且在本機測不出來。 Blocksy 依自訂器設定產生 uploads/blocksy/css/global.css,裡面是 `h1{color:var(--theme-headings-color)}`、`table{border-color:...}` 這類純元素規則,以及區塊編輯器的 .has-palette-color-N 類別。 而那組設定是 theme_mod —— 跟著主題走。正式站現在這套深色配色 (含品牌綠 #19FC95)是設在 blocksy-child 上的,啟用 okross-child 會拿到 Blocksy 的原廠預設值:淺色。 後果不是「有點怪」,是全站標題變成深色配深色底,直接看不見。 本機看不出來,因為本機的 global.css 是從正式站複製過來的那一份, Blocksy 只在儲存自訂器設定時才重新產生,本機從來沒存過 —— 本機一直是靠這個巧合在正常。 下面的值就是正式站現在那套(實測有效),釘進主題檔案裡, 從此不依賴資料庫,zip 帶得走。 用 html:root (0,1,1) 而不是 :root (0,1,0),這樣跟載入順序無關 —— 自訂器的即時預覽會把 Blocksy 的 CSS 重新注入到最後面。 → 想改配色請改這裡,不要去改自訂器:改自訂器不會跟著 zip 上線。 */ html:root{ --theme-palette-color-1:#19FC95; /* 品牌綠,與 --brand 同值 */ --theme-palette-color-2:#346B5F; /* 按鈕 hover */ --theme-palette-color-3:#E0E0E0; /* 標題 */ --theme-palette-color-4:#ffffff; --theme-palette-color-5:#303030; /* 框線 */ --theme-palette-color-6:#292929; --theme-palette-color-7:#121212; /* 頁面底色 */ --theme-palette-color-8:#252525; /* 區塊底色 */ --theme-palette-color-9:#CCCCCC; /* 內文 */ --theme-palette-color-10:#0EFB45; --theme-palette-color-11:#F7F7F7; --theme-palette-color-12:#3F414E; --theme-palette-color-13:#3CCBCB; /* 連結 hover */ /* 語意變數也一併釘住 —— 預設值裡它們指向不同的調色盤編號, 只釘調色盤的話仍可能對應到錯的顏色。 */ --theme-text-color:var(--theme-palette-color-9); --theme-headings-color:var(--theme-palette-color-3); --theme-heading-1-color:var(--theme-palette-color-3); --theme-border-color:var(--theme-palette-color-5); --theme-link-initial-color:var(--theme-palette-color-1); --theme-link-hover-color:var(--theme-palette-color-13); --theme-selection-text-color:var(--theme-palette-color-8); --theme-selection-background-color:var(--theme-palette-color-11); --theme-button-text-initial-color:#ffffff; --theme-button-text-hover-color:#ffffff; --theme-button-background-initial-color:var(--theme-palette-color-1); --theme-button-background-hover-color:var(--theme-palette-color-2); --theme-form-field-border-initial-color:var(--theme-border-color); --theme-form-field-border-focus-color:var(--theme-palette-color-1); --theme-form-selection-field-initial-color:var(--theme-border-color); --theme-form-selection-field-active-color:var(--theme-palette-color-1); } /* ⚠ 以下四條刻意寫成 `html X` 而不是 `X`。 母主題 Blocksy 會依自訂器設定產生 uploads/blocksy/css/global.css， 裡面有 `body{background-color:var(--theme-palette-color-7)}` 這種 純元素規則。而 Blocksy 的調色盤是「跟著主題走」的 theme_mod —— 啟用 okross-child 等於拿到一份全新的預設值(底色是白的)。 正常載入時 okross.css 排在 global.css 後面,同特異度後來者勝, 所以看起來沒事。但那是靠順序贏的,而順序不是我們控制得了的: 自訂器的即時預覽會用 JS 把那份 CSS 重新注入到 最後面, 立刻就翻盤 —— 預覽畫面會變成白底配深色標題(h1 沒有自己的 color, 繼承被蓋掉的 body;而有 class 的元件仍是深色,所以只壞一半)。 加一層 html 把特異度提到 (0,0,2),就跟載入順序無關了。 仍然低於主題自己的 class 規則,內部階層不受影響。 這件事在本機測不出來:本機的 global.css 是從正式站複製過來的 blocksy-child 版本(深色),Blocksy 只在儲存自訂器設定時才重新產生, 本機從來沒存過。本機一直是靠這個巧合正常的。 */ html{background:var(--g900)} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} html body{ margin:0;background:var(--g900);color:var(--fg);font-family:var(--sans); font-size:16px;line-height:1.7;letter-spacing:.004em;overflow-x:hidden; } html h1,html h2,html h3,html h4{margin:0;line-height:1.16;letter-spacing:-.026em;text-wrap:balance;font-weight:750} /* ⚠ 標題顏色必須自己指定,而且要帶 html 前綴。 Blocksy 有一條 `h1{color:var(--theme-heading-color, ...)}`,而它的調色盤 是跟著主題走的 theme_mod —— 啟用 okross-child 會拿到一份全新的預設值。 在本機看不出來:本機的 global.css 是從正式站複製過來的 blocksy-child 版本 (--theme-headings-color:#E0E0E0,淺色),剛好跟深色底相容。 正式站啟用後那個值會變成深色 → 深底配深標題,全站標題直接消失。 實測方式:把所有 --theme-* 變數染成洋紅,看哪些元素跟著變色。 */ html h1,html h2,html h3,html h4,html h5,html h6{color:var(--fg)} /* 表格與引言的框線同理 —— Blocksy 用 `table/th/td{border:1px solid var(--theme-border-color)}` 這種純元素規則。不指定的話,框線顏色會跟著母主題的調色盤跑。 */ html table,html th,html td,html blockquote{border-color:var(--rule)} h1{font-size:clamp(2.1rem,6.2vw,4rem)} h2{font-size:clamp(1.55rem,3.6vw,2.4rem)} h3{font-size:1.08rem;font-weight:700;letter-spacing:-.012em} p{margin:0} html a{color:inherit;text-decoration:none} html button,html input{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px} .mono{font-family:var(--mono)} .num{font-family:var(--mono);font-variant-numeric:tabular-nums} .wrap{max-width:74rem;margin:0 auto;padding:0 var(--pad)} .lbl{font-family:var(--mono);font-size:.67rem;letter-spacing:.17em;text-transform:uppercase;color:var(--fg3)} .stack{display:flex;flex-direction:column} /* ── nav ────────────────────────────────────────── */ .nav{ position:sticky;top:0;z-index:60;background:rgba(7,11,9,.78); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--rule); } .nav .wrap{display:flex;align-items:center;gap:1.5rem;height:4rem} /* logo 用原檔，不重繪。白字版本，只能放在深色底上。 原始 PNG 上下有 45% 的透明留白，所以 height 設 1.95rem 時， 看得見的標誌其實只有 17px —— 在 64px 高的導覽列裡明顯偏小。 留白已從檔案裁掉（圖形本身未動），現在 height 設多少就是多少。 */ .brand{display:inline-flex;align-items:center} .brand img{height:1.75rem;width:auto;display:block} footer .brand img{height:2rem} .nav ul{display:none;list-style:none;margin:0;padding:0;gap:1.6rem;margin-left:auto;font-size:.9rem} .nav ul a{color:var(--fg2)}.nav ul a:hover{color:var(--fg)} @media(min-width:56rem){.nav ul{display:flex}} .btn{ display:inline-flex;align-items:center;gap:.4rem;border:0;cursor:pointer; background:var(--brand);color:var(--brand-ink);font-weight:700;font-size:.9rem; padding:.6rem 1.1rem;border-radius:6px;letter-spacing:-.01em; transition:transform .16s ease,filter .16s ease; } .btn:hover{filter:brightness(1.09)} .btn:active{transform:translateY(1px)} .btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--rule-2)} .btn.ghost:hover{border-color:var(--brand);color:var(--brand)} .nav .btn{padding:.5rem .9rem} /* 手機沒有 ul，所以必須有漢堡鈕，否則除了捲動沒有別的方式到各段 */ .burger{ margin-left:auto;background:transparent;border:1px solid var(--rule-2);border-radius:6px; width:2.4rem;height:2.4rem;display:grid;place-items:center;gap:.22rem;cursor:pointer;padding:0; } .burger i{display:block;width:1rem;height:1.5px;background:var(--fg);transition:transform .2s ease,opacity .2s ease} .burger[aria-expanded="true"] i:nth-child(1){transform:translateY(3.7px) rotate(45deg)} .burger[aria-expanded="true"] i:nth-child(2){opacity:0} .burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-3.7px) rotate(-45deg)} @media(min-width:56rem){.burger{display:none}.nav .btn{margin-left:0}} .sheet{ display:none;border-bottom:1px solid var(--rule);background:var(--g800); position:sticky;top:4rem;z-index:59; } .sheet.open{display:block} @media(min-width:56rem){.sheet,.sheet.open{display:none}} .sheet ul{list-style:none;margin:0;padding:.5rem var(--pad) 1rem;display:grid;gap:.1rem} .sheet a{display:block;padding:.72rem .2rem;border-bottom:1px solid var(--rule);font-size:1rem;color:var(--fg2)} .sheet li:last-child a{border-bottom:0} /* ── hero ───────────────────────────────────────── */ .hero{position:relative;overflow:hidden;border-bottom:1px solid var(--rule)} #field{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:.85;pointer-events:none} .hero .wrap{position:relative;z-index:2;padding-top:clamp(3rem,8vw,5.5rem);padding-bottom:clamp(3rem,8vw,5rem)} .hgrid{display:grid;gap:clamp(2rem,5vw,3.5rem);align-items:center} @media(min-width:62rem){.hgrid{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)}} .eyebrow{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1.1rem} .dot{width:.42rem;height:.42rem;border-radius:99px;background:var(--brand);flex:none} @media(prefers-reduced-motion:no-preference){.dot{animation:pulse 2.4s ease-in-out infinite}} @keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(25,252,149,.5)}50%{opacity:.55;box-shadow:0 0 0 .38rem rgba(25,252,149,0)}} h1 .hl{color:var(--brand)} .lede{margin-top:1.3rem;font-size:clamp(1rem,1.9vw,1.14rem);color:var(--fg2);max-width:34rem} .cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem} /* 四個並排、標籤單行。用 auto-fit 而不是 media query,是因為限制欄數的 是首屏左欄的寬度(約 560px)而不是視窗寬度 —— 用視窗斷點的話, 寬螢幕上會把四欄硬塞進 560px。最小欄寬 7rem 在 560px 下剛好排四欄, 窄螢幕會自動收成兩欄再收成一欄。 */ .trust{ margin-top:1.5rem;display:grid;gap:1.1rem 1.3rem; grid-template-columns:repeat(auto-fit,minmax(7rem,1fr)); } .trust .n{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1.7rem;font-weight:650;color:var(--fg);letter-spacing:-.03em;display:block;line-height:1.1} /* 單位字比數字小一號,數字才會是視線落點 */ .trust .n i{font-style:normal;font-size:.56em;font-weight:600;letter-spacing:0;margin-left:.06em} .trust .t{display:block;font-size:.73rem;line-height:1.5;color:var(--fg3);margin-top:.25rem;white-space:nowrap} /* 窄螢幕欄位變窄,單行放不下時允許折行,否則會撐破版面 */ @media(max-width:30rem){.trust .t{white-space:normal}} /* ── live board ─────────────────────────────────── */ .board{ background:linear-gradient(180deg,rgba(18,27,23,.95),rgba(12,19,16,.97)); border:1px solid var(--rule-2);border-radius:12px;overflow:hidden; box-shadow:0 24px 60px -20px rgba(0,0,0,.75); } .board-hd{ display:flex;align-items:center;gap:.6rem;padding:.75rem 1rem; border-bottom:1px solid var(--rule);background:rgba(7,11,9,.5); } .board-hd .lbl{color:var(--brand)} .board-hd .clock{margin-left:auto;font-family:var(--mono);font-size:.72rem;color:var(--fg3)} /* ── 物流動線 ────────────────────────────────────── */ .route{padding:1.05rem 1.1rem .4rem} .modes{display:flex;align-items:center;gap:.35rem;margin-bottom:1.15rem} .mode{ background:transparent;border:1px solid var(--rule-2);border-radius:6px;cursor:pointer; padding:.3rem .8rem;font-size:.8rem;font-weight:650;color:var(--fg2); transition:background .16s ease,color .16s ease,border-color .16s ease; } .mode[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)} .total{margin-left:auto;font-family:var(--mono);font-size:.72rem;color:var(--fg3);text-align:right} .total b{color:var(--brand);font-weight:600} .track{position:relative} .stages{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:.4rem} .stages li{min-width:0} .stage{ position:relative;z-index:2;width:100%;background:transparent;border:0;cursor:pointer; display:grid;gap:.34rem;justify-items:center;text-align:center;padding:0; } .ico{ width:2.65rem;height:2.65rem;border-radius:99px;display:grid;place-items:center; background:var(--g700);border:1px solid var(--rule-2);color:var(--fg3); transition:color .2s ease,border-color .2s ease,background .2s ease,transform .2s ease; } .ico svg{width:1.3rem;height:1.3rem} .nm{font-size:.79rem;font-weight:650;color:var(--fg2);line-height:1.3} .tm{font-family:var(--mono);font-size:.68rem;color:var(--fg3);white-space:nowrap} .stage:hover .ico{border-color:var(--brand);color:var(--brand)} .stage[aria-pressed="true"] .ico{ background:rgba(25,252,149,.12);border-color:var(--brand);color:var(--brand);transform:scale(1.06); } .stage[aria-pressed="true"] .nm{color:var(--fg)} .stage[aria-pressed="true"] .tm{color:var(--brand)} /* 移動中的貨件：軌道與動畫兩種方向各寫一次 */ .pkgs{position:absolute;pointer-events:none} .pkg{position:absolute;width:.44rem;height:.44rem;border-radius:99px;background:var(--brand); box-shadow:0 0 0 3px rgba(25,252,149,.16)} @media(min-width:40rem){ .stages{grid-template-columns:repeat(4,minmax(0,1fr))} .stages::before{ content:"";position:absolute;z-index:1;left:12.5%;right:12.5%;top:1.32rem; height:1.5px;background:var(--rule-2); } .pkgs{left:12.5%;right:12.5%;top:calc(1.32rem - .19rem);height:.44rem} .pkg{top:0;left:0} @media(prefers-reduced-motion:no-preference){ .pkg{animation:runx var(--dur,9s) linear infinite;animation-delay:var(--d,0s)} } @keyframes runx{from{left:0;opacity:0}8%{opacity:1}92%{opacity:1}to{left:100%;opacity:0}} } @media(max-width:39.99rem){ .stages{grid-template-columns:minmax(0,1fr)} .stages::before{ content:"";position:absolute;z-index:1;top:1.32rem;bottom:2.4rem;left:1.32rem; width:1.5px;background:var(--rule-2); } .stage{grid-template-columns:2.65rem minmax(0,1fr);justify-items:start;text-align:left; align-items:center;gap:.2rem .85rem;padding:.34rem 0} .ico{grid-row:span 2} .nm{align-self:end}.tm{align-self:start} .pkgs{top:1.32rem;bottom:2.4rem;left:calc(1.32rem - .19rem);width:.44rem} .pkg{left:0;top:0} @media(prefers-reduced-motion:no-preference){ .pkg{animation:runy var(--dur,9s) linear infinite;animation-delay:var(--d,0s)} } @keyframes runy{from{top:0;opacity:0}8%{opacity:1}92%{opacity:1}to{top:100%;opacity:0}} } .sdetail{border-top:1px solid var(--rule);padding:.95rem 1.1rem;background:rgba(25,252,149,.035)} .sd-hd{display:flex;align-items:baseline;gap:.8rem;margin-bottom:.4rem} .sd-hd .lbl{color:var(--brand)} .sd-t{margin-left:auto;font-family:var(--mono);font-size:.72rem;color:var(--fg2);white-space:nowrap} .sdetail p{font-size:.855rem;color:var(--fg2);line-height:1.62} .sd-risk{margin-top:.45rem;font-size:.79rem;color:var(--warn)} .sd-risk:empty{display:none} .metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))} .metric{padding:1rem 1.1rem;border-bottom:1px solid var(--rule)} .metric:nth-child(odd){border-right:1px solid var(--rule)} .metric .k{font-size:.73rem;color:var(--fg3);letter-spacing:.01em} .metric .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1.5rem;font-weight:650;letter-spacing:-.03em;margin-top:.2rem;line-height:1.1} .metric .d{font-family:var(--mono);font-size:.72rem;margin-top:.15rem} .d.up{color:var(--up)}.d.down{color:var(--down)} .spark{padding:1rem 1.1rem} .spark .row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.5rem} .spark svg{width:100%;height:52px;display:block;overflow:visible} .feed{border-top:1px solid var(--rule);padding:.7rem 1.1rem .9rem;max-height:8.4rem;overflow:hidden} .feed li{ list-style:none;font-family:var(--mono);font-size:.735rem;color:var(--fg2); padding:.24rem 0;display:flex;gap:.6rem;line-height:1.5; } .feed ul{margin:0;padding:0} .feed .ts{color:var(--fg3);flex:none} .feed .ok{color:var(--brand)} @media(prefers-reduced-motion:no-preference){.feed li{animation:slidein .45s ease both}} @keyframes slidein{from{opacity:0;transform:translateY(-.35rem)}to{opacity:1;transform:none}} .disc{padding:.6rem 1.1rem;border-top:1px solid var(--rule);font-size:.7rem;color:var(--fg3);line-height:1.5} /* ── sections ───────────────────────────────────── */ section{padding:clamp(3.4rem,8vw,5.4rem) 0;border-bottom:1px solid var(--rule)} /* 導覽列是 sticky，錨點跳轉必須讓開它的高度，否則標題被蓋住 */ section[id],header[id]{scroll-margin-top:4.6rem} .shd{margin-bottom:clamp(1.8rem,4vw,2.6rem)} .shd h2{margin-top:.55rem} .shd p{margin-top:.7rem;color:var(--fg2);max-width:40rem} .cards{display:grid;gap:1rem} @media(min-width:50rem){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}} .card{ background:var(--g800);border:1px solid var(--rule);border-radius:10px;padding:1.4rem; transition:border-color .18s ease,transform .18s ease; } .card:hover{border-color:var(--rule-2);transform:translateY(-2px)} .card h3{margin-bottom:.55rem} .card .who{margin-top:.9rem;padding-top:.8rem;border-top:1px solid var(--rule);font-size:.8rem;color:var(--fg3)} .card p{font-size:.92rem;color:var(--fg2)} .card .tag{color:var(--brand);font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase} /* ── calculator ─────────────────────────────────── */ .calc{display:grid;gap:1.1rem} @media(min-width:58rem){.calc{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);align-items:start}} .panel{background:var(--g800);border:1px solid var(--rule);border-radius:11px;overflow:hidden} .panel-hd{padding:.85rem 1.15rem;border-bottom:1px solid var(--rule);display:flex;align-items:center;gap:.55rem;background:var(--g700)} .panel-bd{padding:1.15rem} .ctrl{display:grid;gap:.35rem;padding:.75rem 0;border-bottom:1px solid var(--rule)} .ctrl:last-child{border-bottom:0;padding-bottom:0} .ctrl .top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem} .ctrl label{font-size:.87rem;color:var(--fg2)} .ctrl .val{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.95rem;font-weight:650;color:var(--brand);white-space:nowrap} .ctrl .hint{font-size:.72rem;color:var(--fg3);line-height:1.45} input[type=range]{ -webkit-appearance:none;appearance:none;width:100%;height:2px;background:var(--rule-2); border-radius:2px;margin:.5rem 0 .1rem;cursor:pointer; } input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none;appearance:none;width:1.05rem;height:1.05rem;border-radius:99px; background:var(--brand);border:3px solid var(--g800);box-shadow:0 0 0 1px var(--brand);cursor:grab; } input[type=range]::-moz-range-thumb{ width:1.05rem;height:1.05rem;border-radius:99px;background:var(--brand); border:3px solid var(--g800);box-shadow:0 0 0 1px var(--brand);cursor:grab; } .out{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--rule)} .out .o{padding:.9rem 1.15rem;border-bottom:1px solid var(--rule)} .out .o:nth-child(odd){border-right:1px solid var(--rule)} .out .o.wide{grid-column:1/-1;border-right:0} .out .k{font-size:.74rem;color:var(--fg3)} .out .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1.3rem;font-weight:650;letter-spacing:-.03em;margin-top:.15rem} .out .v.big{font-size:1.75rem} .out .v.pos{color:var(--brand)}.out .v.neg{color:var(--down)} .bar{display:flex;height:.42rem;border-radius:99px;overflow:hidden;margin-top:.7rem;background:var(--g700)} .bar i{display:block;height:100%} .legend{display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin-top:.6rem;font-size:.72rem;color:var(--fg3)} .legend b{display:inline-block;width:.5rem;height:.5rem;border-radius:2px;margin-right:.32rem} .verdict{padding:1.05rem 1.15rem;border-top:1px solid var(--rule);background:rgba(25,252,149,.05)} .verdict .lbl{color:var(--brand)} .verdict p{margin-top:.4rem;font-size:.9rem;color:var(--fg2)} .verdict strong{color:var(--fg)} /* ── pricing ────────────────────────────────────── */ .toggle{display:inline-flex;background:var(--g700);border:1px solid var(--rule);border-radius:8px;padding:.22rem;gap:.22rem} .toggle button{background:transparent;border:0;cursor:pointer;padding:.42rem .95rem;border-radius:6px;font-size:.85rem;color:var(--fg2);font-weight:600} .toggle button[aria-pressed="true"]{background:var(--brand);color:var(--brand-ink)} .plans{display:grid;gap:1rem;margin-top:1.6rem} @media(min-width:52rem){.plans{grid-template-columns:repeat(3,minmax(0,1fr))}} .plan{background:var(--g800);border:1px solid var(--rule);border-radius:11px;padding:1.4rem;display:flex;flex-direction:column;gap:.85rem} .plan.hot{border-color:var(--brand);box-shadow:0 0 0 1px rgba(25,252,149,.22)} .plan .hash{font-family:var(--mono);font-size:.7rem;color:var(--brand);letter-spacing:.05em} .plan .price{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1.85rem;font-weight:700;letter-spacing:-.035em;line-height:1} .plan .price small{font-size:.8rem;font-weight:500;color:var(--fg3);letter-spacing:0} .plan .cut{font-size:.78rem;color:var(--fg3)} .plan ul{margin:0;padding:0;list-style:none;display:grid;gap:.4rem;font-size:.86rem;color:var(--fg2)} .plan li{display:flex;gap:.5rem;align-items:flex-start} .plan li svg{width:.85rem;height:.85rem;flex:none;margin-top:.36rem;color:var(--brand)} .plan .btn{margin-top:auto;justify-content:center} /* ── 文章 ───────────────────────────────────────── */ .shd .row{display:flex;flex-wrap:wrap;gap:.8rem 1.5rem;justify-content:space-between;align-items:flex-end} .more{font-size:.9rem;color:var(--brand);font-weight:650;white-space:nowrap} .more:hover{text-decoration:underline;text-underline-offset:.25em} .posts{display:grid;gap:1rem} @media(min-width:46rem){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}} .post{ display:flex;flex-direction:column;gap:.6rem;background:var(--g800); border:1px solid var(--rule);border-radius:10px;padding:1.3rem; transition:border-color .18s ease,transform .18s ease; } .post:hover{border-color:var(--brand);transform:translateY(-2px)} .post .meta{display:flex;gap:.7rem;align-items:center;font-family:var(--mono);font-size:.7rem;color:var(--fg3)} .post .cat{color:var(--brand);letter-spacing:.06em} .post h3{line-height:1.35} .post p{font-size:.88rem;color:var(--fg2)} .post .go{margin-top:auto;padding-top:.7rem;font-size:.84rem;color:var(--brand);font-weight:600} .soon{ border:1px dashed var(--rule-2);background:transparent;border-radius:10px;padding:1.3rem; display:flex;flex-direction:column;justify-content:center;gap:.4rem; } .soon p{font-size:.88rem;color:var(--fg3)} /* ── 多頁：單檔內部路由。每個 .okross-view 是一個「頁面」 ────── */ .okross-view{display:none} .okross-view.on{display:block} .phead{padding:clamp(2.6rem,7vw,4.2rem) 0 clamp(1.8rem,4vw,2.6rem);border-bottom:1px solid var(--rule)} .crumb{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--fg3);margin-bottom:1.2rem} .crumb a{color:var(--brand);font-weight:600} .crumb a:hover{text-decoration:underline;text-underline-offset:.25em} .phead h1{font-size:clamp(1.85rem,4.6vw,3rem)} .phead .sub{margin-top:1rem;color:var(--fg2);max-width:38rem;font-size:clamp(.98rem,1.7vw,1.08rem)} /* 關於我們：四項數字 */ .facts{ margin-top:2.2rem;display:grid;gap:1.3rem 2rem; grid-template-columns:repeat(2,minmax(0,1fr)); } @media(min-width:52rem){.facts{grid-template-columns:repeat(4,minmax(0,1fr))}} .facts .n{ font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:clamp(1.5rem,3.4vw,2.05rem); font-weight:650;letter-spacing:-.035em;line-height:1.05;color:var(--brand);display:block; } .facts .n em{font-style:normal;font-size:.55em;margin-left:.1em} .facts .t{display:block;font-size:.775rem;color:var(--fg3);margin-top:.35rem;line-height:1.45} .pillars{display:grid;gap:1rem;margin-top:0} @media(min-width:52rem){.pillars{grid-template-columns:repeat(2,minmax(0,1fr))}} .pillar{ background:var(--g800);border:1px solid var(--rule);border-radius:10px; padding:1.5rem;display:flex;flex-direction:column;gap:.55rem; transition:border-color .18s ease; } .pillar:hover{border-color:var(--rule-2)} .pillar .n{ font-family:var(--mono);font-size:.72rem;color:var(--brand);letter-spacing:.1em; } .pillar h3{margin-bottom:.15rem} .pillar p{font-size:.92rem;color:var(--fg2)} .pillar .hi{ margin-top:auto;padding-top:.85rem;border-top:1px solid var(--rule); color:var(--fg);font-weight:600;font-size:.9rem;line-height:1.6; } .creed{ margin-top:2rem;background:var(--g800);border:1px solid var(--rule); border-left:3px solid var(--brand);border-radius:0 11px 11px 0;padding:1.5rem; } .creed .big{font-size:clamp(1.15rem,2.4vw,1.5rem);font-weight:700;letter-spacing:-.02em;line-height:1.4} .creed .sig{margin-top:.7rem;font-family:var(--mono);font-size:.8rem;color:var(--brand);letter-spacing:.08em} /* 文章內文 */ .article{padding:clamp(2.2rem,5vw,3.4rem) 0} .article .body{max-width:40rem} .article .body h3{margin:2rem 0 .7rem;font-size:1.16rem} .article .body h4{margin:1.5rem 0 .5rem;font-size:.98rem;color:var(--brand);font-weight:700} .article .body p{margin-top:.85rem;color:var(--fg2);font-size:1rem;line-height:1.85} .article .body ul{margin:.85rem 0 0;padding-left:1.15rem;color:var(--fg2);font-size:1rem;line-height:1.8} .article .body li{margin-top:.4rem} .article .body .callout{ margin-top:1.2rem;padding:1rem 1.15rem;border:1px solid var(--rule-2); border-radius:9px;background:var(--g800);font-size:.9rem;color:var(--fg2);line-height:1.7; } .article .body .callout b{color:var(--warn)} .tw-sm{overflow-x:auto;margin-top:1.2rem;border:1px solid var(--rule);border-radius:9px} .tw-sm table{border-collapse:collapse;width:100%;min-width:24rem;font-size:.88rem;background:var(--g800)} .tw-sm th,.tw-sm td{padding:.6rem .85rem;text-align:left;border-bottom:1px solid var(--rule)} .tw-sm thead th{background:var(--g700);font-size:.72rem;letter-spacing:.07em;color:var(--fg3);font-weight:650} .tw-sm tbody tr:last-child td{border-bottom:0} .tw-sm td:first-child{color:var(--fg);font-weight:640} .byline{margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--rule);font-size:.9rem;color:var(--fg3)} .backrow{margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:.7rem} /* ── quote / faq / cta ──────────────────────────── */ .quote{ background:var(--g800);border:1px solid var(--rule);border-left:3px solid var(--brand); border-radius:0 11px 11px 0;padding:1.6rem; } .quote p{color:var(--fg2);font-size:.95rem} .quote p+p{margin-top:.8rem} .quote .lead{color:var(--fg);font-size:1.12rem;font-weight:650;letter-spacing:-.015em;line-height:1.45} .quote .by{margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--rule);font-size:.83rem;color:var(--fg3)} details{border-bottom:1px solid var(--rule)} details summary{ cursor:pointer;list-style:none;padding:1.05rem 0;font-weight:650;font-size:1rem; display:flex;justify-content:space-between;gap:1rem;align-items:center; } details summary::-webkit-details-marker{display:none} details summary::after{content:"+";font-family:var(--mono);color:var(--brand);font-size:1.3rem;line-height:1;flex:none} details[open] summary::after{content:"–"} details .a{padding:0 0 1.15rem;color:var(--fg2);font-size:.93rem;max-width:44rem} details .a p+p{margin-top:.7rem} .endcta{text-align:center;padding:clamp(3.4rem,9vw,6rem) 0} .endcta h2{max-width:22ch;margin:0 auto} .endcta p{margin:1rem auto 0;color:var(--fg2);max-width:34rem} .endcta .cta{justify-content:center} html footer{padding:2.4rem 0 3.4rem;font-size:.8rem;color:var(--fg3)} footer .cols{display:flex;flex-wrap:wrap;gap:1.4rem 2.6rem;justify-content:space-between;align-items:flex-start} .proto{ position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--brand);color:var(--brand-ink); font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;text-align:center;padding:.4rem .8rem;line-height:1.4; } body{padding-bottom:2.4rem} /* 只有在 JS 確定會跑的時候才先藏起來。否則 JS 一掛,整頁是空白的。 */ @media(prefers-reduced-motion:no-preference){ html.js .rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)} html.js .rv.in{opacity:1;transform:none} } /* ── 物流時程對照表（伺服器端渲染，給爬蟲與 AI 引擎）───────── 展開樣式沿用本檔既有的 summary 規則（FAQ 也用同一套）， 不另造一份，否則會出現兩個 +／− 標記。 */ .logi-table{margin-top:1.1rem;padding:0 1.1rem;border:1px solid var(--rule);border-radius:10px;background:var(--g700)} .logi-table-scroll{overflow-x:auto;border-top:1px solid var(--rule)} .logi-table table{border-collapse:collapse;width:100%;min-width:38rem;font-size:.82rem} .logi-table caption{ text-align:left;padding:.8rem 1.1rem .2rem;color:var(--fg3);font-size:.75rem;line-height:1.6; } .logi-table th,.logi-table td{ padding:.6rem .9rem;text-align:left;border-bottom:1px solid var(--rule); font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--fg2); } .logi-table thead th{color:var(--fg3);font-size:.72rem;font-weight:500;letter-spacing:.04em} .logi-table tbody th{color:var(--fg);font-weight:600;font-family:var(--sans)} .logi-table tbody tr:last-child td,.logi-table tbody tr:last-child th{border-bottom:0} .logi-table td strong{color:var(--brand);font-weight:600} .logi-note{ padding:.75rem 1.1rem 0;font-size:.8rem;line-height:1.75;color:var(--fg2); border-top:1px solid var(--rule);margin:0; } .logi-note:first-of-type{margin-top:.3rem} .logi-note:last-child{padding-bottom:1.1rem} .logi-note strong{color:var(--fg)} .logi-risk{display:block;margin-top:.25rem;color:var(--warn)} @media(max-width:640px){ } /* ── FAQ 頁 ──────────────────────────────────────────── */ .faq-page{padding:5.5rem 0 4rem;background:var(--g800)} .faq-hd{max-width:44rem;margin-bottom:2.4rem} .faq-hd h1{margin:.7rem 0 .9rem;font-size:clamp(1.7rem,3.6vw,2.5rem);line-height:1.25} .faq-hd .lede{color:var(--fg2);font-size:1rem;line-height:1.85} .faq-hd .lede a{color:var(--brand)} .faq-toc{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:3rem} .faq-toc a{ display:inline-flex;align-items:center;gap:.45rem; padding:.45rem .85rem;border:1px solid var(--rule);border-radius:99px; background:var(--g700);color:var(--fg2);text-decoration:none;font-size:.83rem; transition:border-color .16s ease,color .16s ease; } .faq-toc a:hover{border-color:var(--brand-dim);color:var(--fg)} .faq-toc a span{ font-family:var(--mono);font-size:.7rem;color:var(--fg3); background:var(--g600);padding:.05rem .38rem;border-radius:99px; } .faq-group{margin-bottom:3rem;scroll-margin-top:5rem} .faq-group>h2{ font-size:1.05rem;color:var(--brand);margin-bottom:.9rem; padding-bottom:.6rem;border-bottom:1px solid var(--rule); } .faq-more{margin-top:1.6rem} .faq-cta{ margin-top:1rem;padding:2.4rem;border:1px solid var(--rule);border-radius:12px; background:var(--g700);text-align:center; } .faq-cta h2{font-size:1.3rem;margin-bottom:.6rem} .faq-cta p{color:var(--fg2);margin-bottom:1.3rem;font-size:.94rem} @media(max-width:640px){ .faq-page{padding-top:4rem} .faq-cta{padding:1.6rem} } /* 區塊說明文字裡的連結要看得出是連結 —— 預設繼承 --fg2， 跟內文同色又沒有底線，訪客不會知道可以點。 */ .shd p a,.faq-hd .lede a{ color:var(--brand);text-decoration:underline;text-decoration-thickness:1px; text-underline-offset:.22em;text-decoration-color:color-mix(in srgb,var(--brand) 45%,transparent); transition:text-decoration-color .16s ease; } .shd p a:hover,.faq-hd .lede a:hover{text-decoration-color:var(--brand)} /* ── 內頁（服務、聯絡）───────────────────────────────── 首頁的 hero 是滿版深色大字，內頁不需要那麼重。這裡用一個 統一的 .page-hd 當頁首，讓兩個內頁與 FAQ 頁的節奏一致。 */ .sub-page{background:var(--g800)} .page-hd{padding:5.5rem 0 2.8rem;border-bottom:1px solid var(--rule)} .page-hd h1{margin:.75rem 0 0;font-size:clamp(1.8rem,4vw,2.7rem);line-height:1.22;letter-spacing:-.02em} .page-hd .lede{margin-top:1.1rem;max-width:42rem;color:var(--fg2);font-size:1rem;line-height:1.85} .page-hd .lede b{color:var(--fg);font-weight:650} .page-hd .cta{margin-top:1.7rem} .plan-note{ margin-top:1.3rem;padding:.85rem 1rem;border-radius:9px;font-size:.88rem;color:var(--fg2); background:rgba(25,252,149,.06);border:1px solid color-mix(in srgb,var(--brand) 28%,transparent); } .plan-note b{color:var(--brand)} /* ── 服務範圍（五大類）───────────────────────────────── 欄數隨寬度長：手機一欄、平板兩欄、桌機三欄。刻意不用四或五欄 —— 各類的項目數落差不小（B 類 5 項、A 類 8 項），欄數一多， 卡片高度差就明顯到像壞掉。 */ .scope{display:grid;gap:1rem} .scope-g{ background:var(--g700);border:1px solid var(--rule);border-radius:12px; padding:1.4rem;display:flex;flex-direction:column;gap:1rem; } .scope-g header{display:grid;gap:.4rem} .scope-l{ font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.1em; color:var(--brand-ink);background:var(--brand);border-radius:5px; width:1.5rem;height:1.5rem;display:grid;place-items:center; } .scope-g h3{font-size:1.1rem;margin:.25rem 0 0} .scope-g header p{font-size:.86rem;color:var(--fg3);line-height:1.65} .scope-g ul{margin:0;padding:0;list-style:none;display:grid;gap:.45rem;font-size:.88rem;color:var(--fg2)} .scope-g li{display:flex;gap:.55rem;align-items:flex-start} .scope-g li svg{width:.85rem;height:.85rem;flex:none;margin-top:.34rem;color:var(--brand)} .paid{ margin-left:.45rem;font-style:normal;font-size:.66rem;letter-spacing:.04em; color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 45%,transparent); border-radius:4px;padding:.06rem .3rem;vertical-align:.08em; } .scope-note{ margin-top:auto;padding-top:.85rem;border-top:1px solid var(--rule); font-size:.78rem;color:var(--fg3);line-height:1.65; } @media(min-width:44rem){.scope{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(min-width:66rem){.scope{grid-template-columns:repeat(3,minmax(0,1fr))}} /* ── 服務邊界 ───────────────────────────────────────── 用提醒色的小圓點，不是紅色警告框 —— 這不是壞消息，是誠實。 */ .limits{ margin-top:1.6rem;padding:1.5rem;border-radius:12px; background:var(--g800);border:1px solid var(--rule); } .limits h3{font-size:1.02rem;margin:.55rem 0 .9rem} .limits ul{margin:0;padding:0;list-style:none;display:grid;gap:.6rem} .limits li{position:relative;padding-left:1.1rem;font-size:.87rem;color:var(--fg2);line-height:1.7} .limits li::before{ content:"";position:absolute;left:0;top:.62em; width:.36rem;height:.36rem;border-radius:99px;background:var(--warn); } /* ── 方案：無 JavaScript 時兩組都顯示 ──────────────────── .has-plan-toggle 由 okross.js 掛在 上。沒有 JS 就沒有這個 class，兩組方案與各自的小標都留著，訪客仍然看得到完整價格。 */ .plans-nojs{font-size:.95rem;color:var(--fg3);margin:1.4rem 0 .2rem;grid-column:1/-1} .has-plan-toggle .plans-nojs{display:none} .plans[hidden]{display:none} /* ── 聯絡頁 ─────────────────────────────────────────── */ #contact-form{padding:clamp(2.6rem,6vw,4rem) 0} .contact-grid{display:grid;gap:2rem} .contact-form h2{margin:.55rem 0 1.4rem;font-size:1.45rem} .form-slot{background:var(--g700);border:1px solid var(--rule);border-radius:12px;padding:clamp(1.2rem,3vw,1.9rem)} /* ── Forminator 深色底覆寫 ───────────────────────────── Forminator 的 material 設計是為淺色底做的：輸入框淺灰底黑字、 送出鈕是它自己的藍色。放在深色頁面上會像貼了一張別的網站進來。 必須加 !important —— Forminator 自己的規則就帶 !important， 單靠選擇器順序蓋不過去（實測過，不加就完全沒有效果）。 只改顏色，不動它的版面與間距，這樣外掛更新時不容易打架。 select 是 select2 元件：原生