@charset "utf-8";
/*
---------------------------------------------------------
combine/combine-fc7275b2.css
---------------------------------------------------------
00. /var/www/archibm/public/css/site/app/app-shell.css
01. /var/www/archibm/public/css/site/app/downloads.css
*/

/*
---------------------------------------------------------
00. /var/www/archibm/public/css/site/app/app-shell.css
---------------------------------------------------------
*/

/* ============================================================
   BIMTeki 新版網站：應用頁（plans／addons／downloads／my-applications／contact）共用的外殼微調
   ------------------------------------------------------------
   來源：Sara 115.09.17 v5 四個複刻頁 <style id="bt-app-css"> 的最後一段（四頁內容相同）。
   應用頁的內容卡片沿用正式站的 .inner（寬 92%，左右各 4%），不是設計頁的 5vw，
   所以 header 膠囊與公告列留白在窄螢幕跟著 4% 走，才會與下方卡片切齊。
   公告列其餘樣式在 shell.css。
   ============================================================ */

@media screen and (max-width:1024px){
  #app-homepage #header-inner{ width:92%; box-sizing:border-box; }
}
@media screen and (max-width:720px){
  .ann-bar{ --ann-gutter:4vw; }
  .ann-in{ padding-left:4vw; padding-right:4vw; }
  .ann-x{ right:calc(4vw - 8px); }
}


/*
---------------------------------------------------------
01. /var/www/archibm/public/css/site/app/downloads.css
---------------------------------------------------------
*/

/* ============================================================
   BIMTeki 新版網站：下載頁內容區（.bt-app）
   ------------------------------------------------------------
   來源：Sara 115.09.16 複刻稿 downloads.html（115.09.17 v5 內容區無變更） 的 <style id="bt-app-css">
   （正式站內容區樣式以 :where(.bt-app) 範圍化，外加 115.09.15 中性色與卡片調整）。
   公告列樣式不在這裡，由 shell.css 提供。
   ============================================================ */
/* ===== 正式站內容區樣式（115.09.14 從 bim.arkiteki.com 存檔頁自動抽出）=====
   只收「內容區元素實際會套到」的規則，選擇器一律加 :where(.bt-app) 前綴（:where 不增加權重，與正式站原本的權重一致，
   才不會蓋掉 Font Awesome 之類其他樣式表的 class 規則），
   不影響 header／footer（那兩塊沿用首頁的中性化外殼）。
   ⚠️ .bt-app 上的 font／color 是正式站 body 繼承下來的值，外殼 body 的設定不同，所以要在這裡補回。
   ⚠️ 顏色變數在這裡重新宣告：外殼的 .neutral 覆寫只作用在 header／nav／footer，內容區要維持品牌紫。 */
.bt-app{font-family:"Noto Sans TC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Helvetica Neue", Helvetica, Arial;font-size:14px;line-height:1;color:var(--default-text-color);--theme-text-color:#7872E0;--theme-button-color:#7872E0;--light-text-color:#AAA5FF;--dark-button-color:#7872E0;--light-bg-color:#CAC7FF;--mid-border-color:#958FFF;--default-title-color:#222222;--midtone2-button-color:#7872E0;--soft-bg-color:#E4E3FF;--page-header-padding:50px;--page-header-fontsize:1.8em;--sharp-text-color:#222222;--theme-title-color:#7872E0;--theme-border-color:#7872E0;--default-text-color:#222222;--gray-border-color:#C8C8C8;}
.bt-app{--mid-border-color:var(--color-theme-500);--theme-border-color:var(--color-theme-600);--gray-border-color:var(--color-black-50);--default-text-color:var(--color-black-500);--sharp-text-color:var(--color-black-500);--default-title-color:var(--color-black-500);--theme-title-color:var(--color-theme-600);--light-text-color:var(--color-theme-400);--theme-text-color:var(--color-theme-600);--soft-bg-color:var(--color-theme-200);--light-bg-color:var(--color-theme-300);--midtone2-button-color:var(--color-theme-600);--theme-button-color:var(--color-theme-600);--dark-button-color:var(--color-theme-600);--page-header-padding:90px;--page-header-fontsize:2.6em}
@media screen and (max-width: 1600px){
.bt-app{--page-header-padding:60px;--page-header-fontsize:2.2em}
}
@media screen and (max-width: 1440px){
.bt-app{--page-header-padding:50px;--page-header-fontsize:1.8em}
}
@media screen and (max-width: 1024px){
.bt-app{--page-header-padding:40px;--page-header-fontsize:1.5em}
}
@media screen and (max-width: 640px){
.bt-app{--page-header-padding:30px;--page-header-fontsize:1.5em}
}
/* 外殼（快速上手頁）有 h1,h2,h3{letter-spacing:.05em}、p{letter-spacing:.05em}，正式站沒有，會漏進內容區把字撐寬 */
.bt-app{letter-spacing:normal;}
:where(.bt-app) h1,:where(.bt-app) h2,:where(.bt-app) h3,:where(.bt-app) p{letter-spacing:normal;}
/* === combine-defer-2bb055b5.css === */
:where(.bt-app) .fr-view{overflow-wrap: break-word;}
:where(.bt-app) .fr-view strong{font-weight: 700;}
/* === combine-af57e642.css === */
:where(.bt-app) div,
:where(.bt-app) span,
:where(.bt-app) h2,
:where(.bt-app) h3,
:where(.bt-app) p,
:where(.bt-app) a,
:where(.bt-app) strong,
:where(.bt-app) i,
:where(.bt-app) ul,
:where(.bt-app) li{margin: 0px; padding: 0px; border: 0px; font: inherit; vertical-align: baseline;}
:where(.bt-app) main{display: block;}
:where(.bt-app) ul{list-style: none;}
:where(.bt-app) .bg-white{background-color: rgb(255, 255, 255);}
:where(.bt-app) *{box-sizing: border-box;}
:where(.bt-app) a{color: inherit; text-decoration: none; transition: 0.2s;}
:where(.bt-app) strong{font-weight: 500;}
:where(.bt-app) h2,
:where(.bt-app) h3{font-weight: 500; color: var(--theme-text-color);}
:where(.bt-app) .fr-view{font-size: 1rem; line-height: 1.7em;}
:where(.bt-app) .fr-view strong{font-weight: 500;}
:where(.bt-app) .flex{display: flex;}
:where(.bt-app) .flex-center{display: flex; align-items: center;}
:where(.bt-app) .flex-right{display: flex; justify-content: flex-end;}
:where(.bt-app) .flex-top{display: flex; align-items: flex-start;}
:where(.bt-app) .flex-justify{display: flex; justify-content: space-between;}
:where(.bt-app) .flex-not-grow-shrink{flex-shrink: 0; flex-grow: 0;}
:where(.bt-app) .button,
:where(.bt-app) .button-sq{display: inline-block; padding: 0px 1.1em; white-space: nowrap; cursor: pointer; transition: 0.2s; background: var(--theme-button-color); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; text-align: center; text-decoration: none !important;}
:where(.bt-app) .button{height: 38px; line-height: 36px; border-radius: 4px; font-size: 1em; border: 1px solid var(--theme-button-color);}
:where(.bt-app) .button-sq{width: 38px; padding: 0px; line-height: 38px; border-radius: 4px;}
:where(.bt-app) .button i{margin-right: 0.5em;}
:where(.bt-app) .button-sq i{margin-right: 0px; font-size: 18px; color: var(--light-text-color);}
:where(.bt-app) .button:hover{}
:where(.bt-app) .button.disabled{pointer-events: none; opacity: 0.6;}
:where(.bt-app) .button:hover{border: 1px solid var(--dark-button-color); color: rgb(255, 255, 255); background-color: var(--dark-button-color);}
:where(.bt-app) .button-soft{border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background-color: rgb(255, 255, 255); color: var(--light-text-color); border-radius: 4px; box-shadow: rgba(122, 115, 255, 0.15) 2px 2px 6px; transition: 0.2s;}
:where(.bt-app) .button-soft i{color: var(--light-text-color);}
:where(.bt-app) .button-soft:hover{border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background-color: var(--light-bg-color); filter: none; color: var(--theme-text-color) !important;}
:where(.bt-app) .box-shadow-md{box-shadow: rgba(122, 115, 255, 0.15) 0px 4px 10px;}
:where(.bt-app) .box-round-xl{border-radius: 25px;}
:where(.bt-app) .box-border-mid{border: 1px solid var(--mid-border-color);}
:where(.bt-app) h2,
:where(.bt-app) h3{color: var(--default-title-color); font-weight: 700;}
:where(.bt-app) h2{font-size: 2.7em; line-height: 1.2em;}
:where(.bt-app) h3{font-size: 1.4em;}
:where(.bt-app) .button{border-radius: 50px;}
:where(.bt-app) .button-sq{border-radius: 6px; width: 34px; height: 34px; line-height: 34px;}
:where(.bt-app) .button-sq i{font-size: 16px; color: inherit;}
:where(.bt-app) .button:hover{background-color: var(--midtone2-button-color);}
:where(.bt-app) .button-soft:hover{background-color: var(--soft-bg-color);}
:where(.bt-app) .inner{width: 92%; max-width: 1440px; margin: auto;}
:where(.bt-app) .inner-lg{width: 92%; max-width: 1350px; margin: auto;}
:where(.bt-app) #page-header-inner{padding: var(--page-header-padding) 15px calc(var(--page-header-padding) * .65) 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;}
:where(.bt-app) #page-header-inner h2{color: var(--default-title-color); font-weight: 500; font-size: var(--page-header-fontsize);}
:where(.bt-app) #main-wrapper{min-height: 50vh;}
:where(.bt-app) .main-content-wrapper{position: relative;}
:where(.bt-app) .main-content-wrapper .main-content{padding-bottom: 60px;}
@media screen and (max-width: 1600px){
:where(.bt-app) h2{font-size: 2.4em;}
}
@media screen and (max-width: 1024px){
:where(.bt-app) h2{font-size: 2.1em;}
:where(.bt-app) .button-soft{box-shadow: none;}
:where(.bt-app) .button{height: 36px; line-height: 34px;}
:where(.bt-app) .button-sq{width: 36px; padding: 0px; line-height: 36px;}
:where(.bt-app) .inner{width: 92%; margin: auto;}
:where(.bt-app) .main-content-wrapper .main-content{padding: 0px 0px 40px;}
}
@media screen and (max-width: 640px){
:where(.bt-app) h2{font-size: 1.9em;}
:where(.bt-app) #page-header-inner{padding: var(--page-header-padding) 10px calc(var(--page-header-padding) * .25) 10px;}
}
@media screen and (max-width: 480px){
:where(.bt-app) h2{font-size: 1.7em;}
}
@media screen and (max-width: 360px){
:where(.bt-app) h2{font-size: 1.5em;}
}
:where(.bt-app) .box-app-downloads{padding: 40px 6%; margin: 0px auto 30px; color: var(--sharp-text-color);}
:where(.bt-app) .box-app-downloads h3{margin: 0px 0px 5px; font-size: 2em; color: var(--theme-title-color);}
:where(.bt-app) .box-app-downloads .meta{margin-top: 30px;}
:where(.bt-app) .box-app-downloads .meta p{margin-right: 30px;}
:where(.bt-app) .box-app-downloads .description{margin-top: 20px; font-size: 1rem; line-height: 1.5em;}
:where(.bt-app) .box-app-downloads .buttons .button:not(.button-soft){margin-left: 8px; min-width: 150px; border-radius: 5px;}
:where(.bt-app) .box-app-downloads .buttons .button:not(.button-soft):hover{background-color: rgb(255, 255, 255); border: 1px solid var(--theme-border-color); color: var(--theme-text-color);}
:where(.bt-app) .box-app-downloads .all-versions-btn{margin-top: 25px; color: var(--default-text-color); cursor: pointer; transition: 0.2s;}
:where(.bt-app) .box-app-downloads .all-versions-btn:hover{color: var(--theme-text-color);}
:where(.bt-app) .box-app-downloads .all-versions-btn i{font-size: 12px; margin-left: 4px; transition: 0.2s;}
:where(.bt-app) .box-app-downloads .all-versions-btn.opened i{transform: rotate(180deg);}
:where(.bt-app) .box-app-downloads .file-archives{margin-top: 30px; display: none;}
:where(.bt-app) .box-app-downloads .file-archives li{border-bottom: 1px solid var(--gray-border-color); padding: 30px 5px;}
:where(.bt-app) .box-app-downloads .file-archives li:first-child{color: var(--theme-text-color);}
:where(.bt-app) .box-app-downloads .file-archives li:not(.header-row) .filename{font-size: 1.2em;}
:where(.bt-app) .box-app-downloads .file-archives .filename{width: 40%; line-height: 1.2em;}
:where(.bt-app) .box-app-downloads .file-archives .filesize{width: 90px;}
:where(.bt-app) .box-app-downloads .file-archives .version{width: 90px;}
:where(.bt-app) .box-app-downloads .file-archives .updated{width: 80px;}
:where(.bt-app) .box-app-downloads .file-archives .buttons{width: 120px;}
:where(.bt-app) .box-app-downloads .file-archives .button{min-width: 0px;}
:where(.bt-app) .box-app-downloads .file-archives .note{font-size: 1rem; line-height: 1.2em; color: var(--default-text-color);}
:where(.bt-app) .box-app-downloads .mobile-label{display: none;}
@media screen and (max-width: 1280px){
:where(.bt-app) .box-app-downloads{padding: 30px 4%; margin: 0px auto 20px; border-radius: 15px;}
:where(.bt-app) .box-app-downloads h3{font-size: 1.8em; margin-bottom: 0px;}
:where(.bt-app) .box-app-downloads .file-archives li:not(.header-row) .filename{font-size: 1.1em;}
}
@media screen and (max-width: 1024px){
:where(.bt-app) .box-app-downloads-wrapper{margin-top: 15px;}
:where(.bt-app) .box-app-downloads > .flex-justify{flex-direction: column;}
:where(.bt-app) .box-app-downloads .info{width: 100%;}
:where(.bt-app) .box-app-downloads .buttons{margin-top: 20px;}
:where(.bt-app) .box-app-downloads .buttons .button{margin-left: 0px !important;}
:where(.bt-app) .box-app-downloads .file-archives li{padding: 20px 5px; position: relative;}
:where(.bt-app) .box-app-downloads .file-archives li.header-row{display: none;}
:where(.bt-app) .box-app-downloads .file-archives li > div{flex-direction: column; align-items: flex-start; gap: 14px; padding-right: 40px;}
:where(.bt-app) .box-app-downloads .file-archives li .filename,
:where(.bt-app) .box-app-downloads .file-archives li .filesize,
:where(.bt-app) .box-app-downloads .file-archives li .version,
:where(.bt-app) .box-app-downloads .file-archives li .updated{display: flex; width: 100%;}
:where(.bt-app) .box-app-downloads .file-archives li:not(.header-row) .filename{font-size: 1em;}
:where(.bt-app) .box-app-downloads .file-archives .buttons{width: auto; position: absolute; right: 0px; top: 0px;}
:where(.bt-app) .box-app-downloads .file-archives .buttons .button{width: 30px; height: 30px; line-height: 30px; box-shadow: rgba(122, 115, 255, 0.15) 2px 2px 6px;}
:where(.bt-app) .box-app-downloads .file-archives .note{display: flex; flex-direction: row; gap: 0px; margin-top: 14px;}
:where(.bt-app) .box-app-downloads .file-archives .mobile-label{display: block; color: var(--theme-text-color); width: 80px; flex-shrink: 0; flex-grow: 0;}
}
@media screen and (max-width: 768px){
:where(.bt-app) .box-app-downloads h3{font-size: 1.6em;}
:where(.bt-app) .box-app-downloads .meta{margin-top: 20px;}
}
@media screen and (max-width: 640px){
:where(.bt-app) .box-app-downloads .meta{flex-direction: column; gap: 8px;}
}


/* ═══ 115.09.15 Sara：「複刻頁的顏色全部改成中性色，與首頁調性一致」═══
   這幾頁是從正式站複刻的，內容區當初刻意維持正式站的品牌紫（外殼的中性化只作用在 header／footer），
   所以整頁讀起來跟首頁是兩套。
   ⚠️ 做法是**改變數**不是逐條改規則：這些頁的內容區全靠下面這組變數上色，
      逐條改會漏掉 hover／focus／selected 這些沒被掃描抓到的狀態（實測掃描只看得到靜態那一層）。
   ⚠️ 依首頁的規則「紫只留在要按下去或要看過去的點」：
      --theme-button-color／--dark-button-color／--midtone2-button-color **保持紫**（實心主鈕＝主要動作），
      其餘文字、標題、框線、淡底一律轉灰。
   ⚠️ 灰階沿用首頁那組：#222 主要文字、#333 強調、#888 輔助、#E4E4E4 線、#F2F2F5 淡底。 */
.bt-app{
  --theme-text-color:#333333;
  --theme-title-color:#222222;
  --theme-border-color:#E4E4E4;
  --mid-border-color:#E4E4E4;
  --light-text-color:#888888;
  --soft-bg-color:#F2F2F5;
  --light-bg-color:#E4E4E4;
}
/* 正式站的陰影是帶紫的（rgba(122,115,255,…)），在灰階版面上會透出一層紫霧；換成中性深紫黑，
   與首頁卡片的 rgba(33,29,58,…) 同一組。 */
:where(.bt-app) .box-shadow-md{ box-shadow:0 4px 10px rgba(33,29,58,.10); }
:where(.bt-app) .box-shadow-soft{ box-shadow:3px 3px 10px rgba(33,29,58,.12); }
:where(.bt-app) .box-shadow-lg{ box-shadow:0 10px 30px rgba(33,29,58,.12); }

/* 下載頁專屬：版本清單的標籤與圖示走灰，只有「下載」主鈕留紫 */
:where(.bt-app) .box-app-downloads .file-archives .buttons .button{ box-shadow:0 2px 6px rgba(33,29,58,.10); }
/* 「Windows 10/11」「26/27/28」這種規格標籤的紫色是**寫在 markup 的 inline style** 裡的
   （正式站後台編輯器存下來的內容），變數改不到它。
   ⚠️ 用屬性選擇器覆寫、不去動 markup：那段內容是從正式站原樣搬來的，
      改了之後下次重新複製會看不出差異在哪。規格是資料不是動作，一律轉灰。 */
:where(.bt-app) .description span[style*="#7872E0"],
:where(.bt-app) .description span[style*="7872E0"]{ color:#333333 !important; }

/* ═══ 115.09.15 Sara：「這塊需要有三步驟毛玻璃的效果」═══
   ⚠️ 玻璃不是「把卡片變半透明」就成立，**背後要有東西**。這幾頁原本是整片白底，
      卡片再透也只是透出白色。所以先把內容區的底換成首頁三步驟那一區的淡色光暈（同一組值），
      卡片才有東西可以透。
   ⚠️ 底色很淡（最濃的一團 .38，疊在 #FCFBFF 上）：這幾頁是功能性頁面，
      底色只是給玻璃用的材質，不能搶內容。 */
/* ═══ 115.09.15 二修 Sara：「聯絡我們／下載／我的應用程式都不要有背景」═══
   前一版給內容區鋪了淡紫淡藍的光暈，是為了讓卡片的毛玻璃有東西可透。
   底色拿掉之後**玻璃就沒有意義了**（背後是純白，模糊出來還是白），所以卡片一起改回實體卡：
   近白底、一條中性細框、很輕的落影。留著 backdrop-filter 只會多一層沒作用的合成層。
   ⚠️ 這也是比較接近金澧那套語彙的做法：他在 MCP 頁只用**一種**刻意的材質（深色玻璃＋兩顆橘光團），
      其餘一律素面。功能性頁面鋪裝飾性漸層，正是他會拿掉的東西。 */
/* 下載頁：每個應用程式一張卡（.box-app-downloads，正式站給它 .bg-white） */
:where(.bt-app) .box-app-downloads{
  background:linear-gradient(155deg, #FFFFFF 0%, #FCFCFD 100%) !important;
  border:1px solid #E8E8EC !important;
  box-shadow:0 1px 2px rgba(33,29,58,.04), 0 10px 24px rgba(33,29,58,.06) !important;
}
:where(.bt-app) .box-app-downloads.bg-white{ background-color:transparent; }

/* 正式站的 header 在文件流裡（桌機 100px、≤1024 為 80px），外殼的 header 是 fixed，內容區要自己讓出這段 */
.bt-app:not(.bt-app-layer){padding-top:100px;}
@media (max-width:1024px){.bt-app:not(.bt-app-layer){padding-top:80px;}}