/* =====================================================================
   官網企業形象樣式層
   ---------------------------------------------------------------------
   使用者要求：「官網風格專業一點」→「要有企業形象，不能太像新創」。
   原始版型的新創感來自：紫粉粒子影片、等角（isometric）卡通插畫、
   紫色圓斑底的圖示、到處飄的 3D 方塊與圓圈、會晃動的插圖、膠囊按鈕、波浪底邊。

   企業形象的做法：
     · 實景照片取代卡通插畫（來源見 docs\ASSETS.md）
     · 標題改用襯線字（明體），內文維持黑體
     · 色彩一律取自 logo（見「一、色彩」）；直角或極小圓角；不浮動、不晃動
     · 區塊以淺灰底交替分段，靠留白與細線建立層次，而不是靠陰影與漸層

   這份檔案載入於 site-tune.css 之後，只做覆寫；原始的 main.css／inside-page.css 未修改。
   版型結構與多語修正（site-tune.css）不動。

   一、色彩與字型
   二、拿掉裝飾與動畫
   三、頁首與主選單
   四、標題與按鈕
   五、照片與圖示
   六、首頁各區塊
   七、內頁
   八、頁尾
   ===================================================================== */


/* =====================================================================
   一、色彩與字型
   ===================================================================== */

/* 配色依據 logo。logo.svg 本身是純白（給深色底用的反白版），
   品牌色要看 logo.ico：由紫 #601986 經靛 #474D9E 漸變到藍 #2E60AC。
   原設計師也用過 #601986（main.css 子選單 hover、inside-page.css 工廠自動化），
   後台 Angular 的側欄 #281c4e 同樣是這一系的深靛紫——官網與後台維持同一色系。

   企業感不是靠換掉品牌色，而是靠用法收斂：
     大面積只用 logo 色壓暗後的深靛；漸層只出現在 2px 的細線上；
     不再出現原版的粉紫、薰衣草、青色。 */
:root {
  --brand-purple: #601986;    /* logo 漸層起點 */
  --brand-indigo: #474d9e;    /* logo 漸層中段 */
  --brand-blue: #2e60ac;      /* logo 漸層終點 */
  --brand-gradient: linear-gradient(90deg, #601986 0%, #474d9e 50%, #2e60ac 100%);

  --pro-navy: #1e1848;        /* 大面積深色底：logo 靛紫壓暗（頁尾、關於我們、遮罩） */
  --pro-navy-2: #2c2766;      /* 同色系淺一階：標籤、框線 */
  --pro-accent: #2e60ac;      /* 強調色＝logo 藍：按鈕、連結 hover。對白底 6.1:1 */
  --pro-ink: #1b1a2e;         /* 標題字，帶一點靛 */
  --pro-line: #e2e1ec;        /* 卡片邊框、分隔線 */
  --pro-muted: #5d5b70;
  --pro-band: #f5f5f9;        /* 交替區塊的淺灰底，與後台內容區同值 */
  --pro-radius: 4px;
  --pro-serif: 'Noto Serif TC', 'PMingLiU', 'Times New Roman', serif;
}

/* 日韓文改接各自的明體（版型 head 依語言只載入該語言的字型家族） */
html[lang="ja"] { --pro-serif: 'Noto Serif JP', 'Yu Mincho', serif; }
html[lang="ko"] { --pro-serif: 'Noto Serif KR', 'Batang', serif; }
/* 越南文的聲調符號 Noto Serif TC 沒有收錄，混用後備字型會一個字兩種字體，維持黑體 */
html[lang="vi"] { --pro-serif: inherit; }

.title h2,
header .container #header-title > h1,
.contact-item > h2,
#mSing .modal-body .modal-text h5 {
  font-family: var(--pro-serif);
}


/* =====================================================================
   二、拿掉裝飾與動畫
   各區塊的 ::before／::after 掛的是 cir-*.png、about-bg.png 這類
   3D 方塊與圓圈圖，與內容無關。逐一以 ID 列出，權重才蓋得過原設計，
   也避免誤傷 #index-page-contact::before——那一個是背景圖的遮罩，要保留。
   ===================================================================== */

section#index-page-about::before, section#index-page-about::after,
section#index-page-service::before, section#index-page-service::after,
section#index-page-advantage::before, section#index-page-advantage::after,
section#index-page-plan::before, section#index-page-plan::after,
section#introduction::before, section#introduction::after,
section#concept::after,
section#system-integration::after,
section#edge-computing::before,
section#information-service::after,
section#hardware-service::before,
section#transportation::before, section#transportation::after,
section#industrial-safety::before,
section#plc::after,
section#contact::before {
  content: none;
}

/* 插圖原本無限循環地上下晃動 */
.animation-top-lower,
.animation-left-lower { animation: none; }

/* 頁首底部的波浪曲線改為平直切齊；捲動提示的滑鼠圖示一併拿掉 */
header::after { content: none; }
header .container .down { display: none; }


/* =====================================================================
   三、頁首與主選單
   ===================================================================== */

/* 背景：原為粒子動畫影片，版型已改為空的 div，這裡給城市天際線照片。
   原設計的 #header-video 寬度是由 <video> 撐出來的，換成背景圖後要自己補滿。 */
header #header-video {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: var(--pro-navy) url(../img/photo-hero.jpg) center 60% / cover no-repeat;
}
header #header-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(30, 24, 72, .92) 0%, rgba(30, 24, 72, .72) 50%, rgba(30, 24, 72, .5) 100%);
}

/* 首頁主視覺不必佔滿整個螢幕；企業官網讓第一屏就看得到下一段內容 */
header .container { min-height: 72vh; }
header .container #header-title { top: 22%; }

header .container #header-title > h1 {
  font-weight: 600;
  letter-spacing: 3px;
  text-shadow: none;
}

/* 副標原為淡紫 #b6b6ff */
header .container #header-title > h5 {
  color: rgba(255, 255, 255, .8);
  font-weight: 400;
  letter-spacing: 1px;
  text-shadow: none;
}

header .container #header-title > h1::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin-top: 24px;
  background: var(--brand-gradient);
}

/* 主選單與主視覺之間一條細線，界定導覽列 */
.header-content { border-bottom: 1px solid rgba(255, 255, 255, .14); }

#menu > ul#main_menu > li > a { color: rgba(255, 255, 255, .75); }
#menu > ul#main_menu > li > a.active,
#menu > ul#main_menu > li > a:hover { color: #fff; }

@media (min-width: 992px) {
  ul.sec_menu {
    border-radius: var(--pro-radius);
    box-shadow: 0 10px 30px rgba(30, 24, 72, .14);
    padding-top: 6px;
    padding-bottom: 6px;
  }
  ul.sec_menu li { font-size: 1rem; }
  ul.sec_menu li > a:hover { color: var(--pro-accent); }
}

/* 行動版展開選單原為紫色 #4b297f */
@media (max-width: 991px) {
  .header-content.is-active { background-color: var(--pro-navy); opacity: .97; }
  .header-content { border-bottom: 0; }
}

@media (max-width: 767px) {
  header .container { min-height: 420px; }
}


/* =====================================================================
   四、標題與按鈕
   ===================================================================== */

.title h2 { font-weight: 600; letter-spacing: 2px; }
.title.black h2 { color: var(--pro-ink); }

/* 標題線：原為 40×6 的圓角漸層膠囊，改為細的直角實線 */
.title h2::after {
  width: 36px;
  height: 2px;
  border-radius: 0;
  left: 0;
}
.title.black h2::after { background: var(--brand-gradient); }
.title.left h2::after { bottom: -16px; }
.title.center h2::after { left: 50%; bottom: -14px; }

/* 按鈕：原為 20px 圓角的膠囊，改為直角 */
button.main-button {
  border-radius: 2px;
  padding: 10px 36px;
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .12em;
  border-color: var(--pro-accent);
  color: var(--pro-accent);
}
button.main-button:hover { background: var(--pro-accent); color: #fff; }
button.main-button:focus { transform: none; }
button.white { border-color: rgba(255, 255, 255, .85); color: #fff; }
button.white:hover { background: #fff; color: var(--pro-navy); }

@media (max-width: 767px) {
  .index-page-about-content > .about-text button { border-radius: 2px; padding: 8px 30px; }
}


/* =====================================================================
   五、照片與圖示
   ===================================================================== */

/* 原插畫是透明底、形狀不規則；換成照片後統一裁成 4:3、直角微圓 */
img.pro-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--pro-radius);
}

/* 圖示：原為紫色圓斑底插畫，改為淺藍方底＋深藍線條圖示 */
.pro-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--pro-radius);
  background-color: #efeef8;
  color: var(--brand-indigo);
  font-size: 24px;
}


/* =====================================================================
   六、首頁各區塊
   ===================================================================== */

/* --- 關於我們 ---------------------------------------------------------
   原設計是紫色漸層卡片，右邊一張等角城市插畫往上凸出卡片外。
   改為深靛底左文右圖，照片貼齊卡片右半，不再凸出。 */
section#index-page-about { padding-top: 90px; }
.index-page-about-content {
  background: var(--pro-navy);
  border-radius: var(--pro-radius);
  box-shadow: none;
  padding: 0;
  overflow: hidden;
  align-items: stretch;
  justify-content: space-between;
}
.index-page-about-content > .about-text {
  width: 50%;
  padding: 56px 48px;
}
.index-page-about-content > .about-text p { color: rgba(255, 255, 255, .85); }
.index-page-about-content > .about-photo { width: 50%; }
.index-page-about-content > .about-photo img.pro-photo {
  position: static;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}

@media (max-width: 767px) {
  .index-page-about-content { flex-direction: column-reverse; }
  .index-page-about-content > .about-text,
  .index-page-about-content > .about-photo { width: 100%; }
  .index-page-about-content > .about-text { padding: 32px 24px; }
  .index-page-about-content > .about-photo img.pro-photo {
    position: static;
    left: 0;
    top: 0;
    width: 100%;
    aspect-ratio: 16 / 9;
  }
}

/* --- 服務項目 ---------------------------------------------------------
   淺灰底區塊，卡片白底細邊框，左對齊。hover 只換邊框色，不浮起。 */
section#index-page-service { background-color: var(--pro-band); }
#index-page-service .service-item {
  background-color: #fff;
  border: 1px solid var(--pro-line);
  border-top: 2px solid var(--pro-navy);
  border-radius: 0;
  box-shadow: none;
  padding: 28px 24px;
  text-align: left;
  transition: border-color .2s ease;
}
#index-page-service .service-item:hover {
  border-color: var(--pro-line);
  border-top-color: var(--pro-accent);
  box-shadow: none;
  transform: none;
}
#index-page-service .service-item .service-icon.pro-icon { margin: 0 0 20px; width: 56px; }
#index-page-service .service-item h5 {
  text-align: left;
  font-weight: 600;
  color: var(--pro-ink);
}
#index-page-service .service-item .service-text p { color: var(--pro-muted); }

/* --- 我們的優勢 -------------------------------------------------------
   原插畫以絕對定位往左上凸出欄位外，照片改回正常流排版。 */
.advantage-item .advantage-photo {
  position: static;
  width: 100%;
  left: auto;
  top: auto;
}
section#index-page-advantage .row { align-items: center; }
.advantage-text-flex > .advantage-icon.pro-icon { flex: 0 0 56px; margin-right: 20px; }
.advantage-text h5 { font-weight: 600; color: var(--pro-ink); }
.advantage-text p { color: var(--pro-muted); }

@media (min-width: 768px) {
  section#index-page-advantage .advantage-item { padding-right: 24px; }
}
@media (max-width: 767px) {
  section#index-page-advantage .advantage-item { margin-top: 24px; }
}

/* --- 產業方案 ---------------------------------------------------------
   照片卡片：直角，標題由置中改為壓在左下角，深藍漸層由下往上。 */
.plan-item-bg .plan-item {
  border-radius: 0;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 24px;
}
.plan-item-bg .plan-item::before {
  background: linear-gradient(0deg, rgba(30, 24, 72, .9) 0%, rgba(30, 24, 72, .25) 70%);
}
.plan-item-bg .plan-item:hover::before {
  background: linear-gradient(0deg, rgba(46, 96, 172, .85) 0%, rgba(30, 24, 72, .2) 70%);
}
.plan-item-bg .plan-item h5 {
  font-weight: 600;
  letter-spacing: 1px;
  text-shadow: none;
  padding-top: 12px;
  border-top: 2px solid rgba(255, 255, 255, .8);
}

/* --- 聯繫我們 --------------------------------------------------------- */
section#index-page-contact::before {
  background: var(--pro-navy);
  opacity: .9;
}
.contact-item > h2 { font-weight: 600; letter-spacing: 2px; text-shadow: none; }

/* 手機寬度下這行標題會超出畫面左右兩側，縮字並補左右內距 */
@media (max-width: 576px) {
  .contact-item { padding: 0 16px; }
  .contact-item > h2 { font-size: 1.5rem; letter-spacing: 1px; }
}

/* 服務項目卡片：各欄文字長短不一，卡片高度改為跟同列最高的一張對齊 */
#index-page-service .row > [class*="col-"] { display: flex; }
#index-page-service .row > [class*="col-"] > a { display: flex; width: 100%; }
#index-page-service .service-item { width: 100%; min-height: 0; }


/* =====================================================================
   七、內頁
   原設計在各頁散用青、藍、紫、薰衣草、粉五色，收成 logo 的紫→靛→藍一條色階。
   ===================================================================== */

/* 插畫換成照片後，原本給插畫的寬度與位移收回 */
section#introduction .item .photo,
section#information-service .photo,
section#hardware-service .photo,
section#industrial-safety .photo,
section#contact .item .photo {
  width: 100%;
  margin: 0;
}
@media (max-width: 767px) {
  section#introduction .item .photo,
  section#information-service .photo,
  section#hardware-service .photo,
  section#industrial-safety .photo,
  section#contact .item .photo { margin: 24px 0 0; }
}

/* --- 關於旭呈「從資料蒐集，走向智慧治理」三欄 ---------------------------
   原本只有大張紫色插圖、沒有卡片外框；圖示換成線條圖示後，比照首頁服務項目做成卡片。 */
section#governance { background-color: var(--pro-band); }
section#governance .row { margin-bottom: 32px; }
section#governance .row > [class*="col-"] { display: flex; }
section#governance .service-item {
  width: 100%;
  margin: 12px 0;
  background-color: #fff;
  border: 1px solid var(--pro-line);
  border-top: 2px solid var(--pro-navy);
  padding: 28px 24px;
}
section#governance .service-item .pro-icon { margin: 0 0 20px; }
section#governance .service-item h5 { font-weight: 600; color: var(--pro-ink); }
section#governance .service-item p { color: var(--pro-muted); }

/* --- 仍保留的示意圖 ---------------------------------------------------
   智慧交通的標籤是對著圖上的位置擺的，組織架構、公司理念、工廠自動化是資訊圖，
   這些不能換成照片，否則內容就沒了；要徹底改掉卡通感，得重繪這幾張圖。
   它們本來就是 logo 的紫靛色系，不轉色相，只把飽和度降一點，收掉螢光感。 */
section#transportation .photo-all .photo img,
section#home .photo img,
section#plc .item-all img,
section#introduction .text > ul li img,
section#concept .item img {
  filter: saturate(.8);
}

/* 系統開發流程的五個標籤與圓點：STEP 1→5 依序取 logo 漸層的五個點，由紫走到藍 */
section#system-integration .item ul li .label { border-radius: 2px; }
section#system-integration .item ul li .label.color-grenn,
section#system-integration .item ul li:nth-child(1)::before { background-color: var(--brand-purple); }
section#system-integration .item ul li .label.color-blue,
section#system-integration .item ul li:nth-child(2)::before { background-color: #553892; }
section#system-integration .item ul li .label.color-purple,
section#system-integration .item ul li:nth-child(3)::before { background-color: var(--brand-indigo); }
section#system-integration .item ul li .label.color-lavender,
section#system-integration .item ul li:nth-child(4)::before { background-color: #3c57a6; }
section#system-integration .item ul li .label.color-pink,
section#system-integration .item ul li:nth-child(5)::before { background-color: var(--brand-blue); }

/* 邊緣運算的條列卡片 */
section#edge-computing .item-all .item { border-radius: var(--pro-radius); border-color: var(--pro-line) !important; }
section#edge-computing .item-all .item .item-text p { color: var(--pro-ink) !important; }
/* 這四個圖示是青、藍、紫、粉四色插畫，去色後統一成 logo 的靛色調 */
section#edge-computing .item-all .item .icon img { filter: grayscale(1) brightness(.8) sepia(.5) hue-rotate(205deg) saturate(2); }

/* 智慧交通的標籤 */
section#transportation .photo-all .label {
  border-radius: 2px;
  border-color: var(--pro-navy-2);
  color: var(--pro-navy-2);
}

/* 工廠自動化 */
section#plc .item-all .item:nth-child(1) { border-color: var(--pro-navy-2); border-radius: var(--pro-radius); }
section#plc .item-all .item .label { background-color: var(--pro-navy-2); border-radius: 2px; }
section#plc .item-all .line { background-color: var(--pro-navy-2); }

/* 專案實績 */
section#project .item {
  border: 1px solid var(--pro-line);
  border-radius: 0;
  box-shadow: none;
}
section#project .item:hover {
  border-color: var(--pro-accent);
  box-shadow: none;
  transform: none;
}
section#project .item .photo { border-radius: 0; }

/* 卡片封面統一 16:9。原設計只寫 width:100%，高度跟著原圖比例走，
   而上傳的封面比例不一（1134×639、1132×623…），同一列的卡片因此差 4～5px、底邊對不齊。
   封面多是系統畫面截圖，系統名稱與標題在上方，所以由上往下裁、保留頂端。
   選擇器限定在會開跳窗的卡片（data-toggle="modal"）：跳窗內的輪播也用 .item .photo，
   那裡有自己的固定高度（.owl-g 的 252px 螢幕框），不能被這條規則改到。 */
section#project .item[data-toggle="modal"] .photo img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top center;
  display: block;
}
section#project .item .photo:hover .text-g { background-color: rgba(30, 24, 72, .82); }
section#project .item .photo .text-g .text p { color: rgba(255, 255, 255, .75); }

#mSing .modal-body .modal-text p { color: var(--pro-accent); }
#mSing .modal-body .modal-text p::after { background: var(--pro-accent); border-radius: 0; width: 3px; }
#mSing .modal-body .modal-text h5 { font-weight: 600; letter-spacing: 1px; color: var(--pro-ink); }

.owl-nav .owl-prev, .owl-nav .owl-next { background: var(--pro-navy-2) !important; }
.owl-nav .owl-prev:hover, .owl-nav .owl-next:hover { background: var(--pro-accent) !important; }
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span { background: var(--pro-accent); }

/* 聯繫表單 */
form#contact-form .input-group input,
form#contact-form .input-group textarea {
  border-radius: 2px;
  border-color: #d4d2e2;
  background: #fff;
  font-weight: 400;
}
form#contact-form .input-group input:focus,
form#contact-form .input-group textarea:focus {
  outline: none;
  border-color: var(--pro-accent);
  box-shadow: 0 0 0 3px rgba(46, 96, 172, .15);
}


/* =====================================================================
   八、頁尾
   原為紫黑 #281c4e，改為同色系、壓得更深的 logo 靛；上緣一條 logo 漸層細線。
   字色沿用 site-tune.css 調好的 #c9c9e4。
   ===================================================================== */

footer {
  background: var(--pro-navy);
  border-top: 2px solid transparent;
}
footer p, footer li,
.footer-list-sec > li a { color: #c9c9e4; }
.footer-list-sec > li a:hover { color: #fff; }

/* 電話、信箱、地址圖示原為紫色圓底，轉成與頁尾一致的藍色調 */
.footer-list-sec.contact > li > span img { filter: none; }