/* ========================================================================= site.css — 台灣即時影像監視器 twipcam 全站共用樣式由 base.php 於載入，每頁皆吃得到（2026-07-04 起為唯一全站樣式表， w3-4.15.css 的已自 base.php 移除，檔案亦於同日自 assets 刪除）。內容： 1. 設計 tokens（:root，暮金藍 navy+gold，只宣告變數、不上色） 2. 全域 reset（2-a 自 w3-4.15.css 移植的裸元素基底樣式；2-b html/body/字型/標題級數） 3. Header 導覽列＋側邊選單＋ scrollmenu（.twn-*） 4. 可重用元件（.tw-*）：版心／區塊標題／標籤／icon 格／影像卡／搜尋框／目錄卡注意：深色頁底色為各頁自行開（例：首頁 body.php 的 body{background:#101a2e}），本檔的 tokens 只宣告不套色，白底舊頁不會被染黑。 ========================================================================= */ /* ---------- 1. 設計 tokens ---------- */ :root{ /* 暮金藍設計系統 */ --bg:#101a2e; --surface:#172541; --ink:#e9eef7; --word:#f6f9ff; --accent:#e6a93c; --slate:#e6a93c; --slate-d:#cf9326; --muted:#9aabc6; --line:#2a3a59; --line-2:#33456a; /* header 專用 tokens（供下方 .twn-* 使用） */ --twn-surface:#172541; --twn-surface2:#101a2e; --twn-ink:#9aabc6; --twn-accent:#e6a93c; --twn-line:#2a3a59; } /* ---------- 2. 全域 reset ---------- */ /* 2-a. 自 w3-4.15.css 原序移植的裸元素基底樣式（該檔所有「非 w3-* class」規則）。 2026-07-04 拔除 base.php 對 w3-4.15.css 的時移入，全站計算樣式維持不變；規則內容與順序照抄原檔，勿在此手調（要改字級行高請改 2-b 或各頁樣式）。 */ html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit} html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0} article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}summary{display:list-item} audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline} audio:not([controls]){display:none;height:0}[hidden],template{display:none} a{background-color:transparent}a:active,a:hover{outline-width:0} abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted} b,strong{font-weight:bolder}dfn{font-style:italic}mark{background:#ff0;color:#000} small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline} sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none} code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible} button,input,select,textarea,optgroup{font:inherit;margin:0}optgroup{font-weight:bold} button,input{overflow:visible}button,select{text-transform:none} button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button} button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0} button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText} fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em} legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto} [type=checkbox],[type=radio]{padding:0} [type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto} [type=search]{-webkit-appearance:textfield;outline-offset:-2px} [type=search]::-webkit-search-decoration{-webkit-appearance:none} ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit} html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}html{overflow-x:hidden} h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px} h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0} hr{border:0;border-top:1px solid #eee;margin:20px 0} img{vertical-align:middle}a{color:inherit} /* 2-b. 本站自有 reset */ html{ height:100%; } body{ height:100%; background:white; color:black; font-family:-apple-system,"Segoe UI",Roboto,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif; } h1 { font-size:24px; } h2 { font-size:20px; } h3 { font-size:18px; } h4 { font-size:16px; } h5 { font-size:14px; } h6 { font-size:12px; } @media (max-width:480px){ h1 { font-size:20px; } h2 { font-size:18px; } h3 { font-size:16px; } h4 { font-size:14px; } h5 { font-size:12px; } h6 { font-size:10px; } } /* ---------- 3. Header（純 flex，無 W3 類別） ---------- */ .twn-top{ position:fixed; top:0; left:0; right:0; z-index:15; } .twn-nav{ background:var(--twn-surface2); border-bottom:1px solid var(--twn-line); /* 2026-07-04 header 改深一階（surface2），與 scrollmenu（surface）做出主→次導覽層級 */ } .twn-nav-in{ max-width:1080px; margin:0 auto; padding:0 22px; height:54px; display:flex; align-items:center; justify-content:space-between; gap:16px; } .twn-brand{ font-weight:800; font-size:22px; letter-spacing:.02em; color:#f3f5f9; text-decoration:none; white-space:nowrap; } .twn-actions{ display:flex; align-items:stretch; height:100%; } .twn-link{ display:flex; align-items:center; padding:0 13px; font-size:16px; font-weight:600; color:var(--twn-ink); text-decoration:none; transition:color .15s, box-shadow .15s; } .twn-link:hover{ color:var(--twn-accent); box-shadow:inset 0 -2px 0 var(--twn-accent); } .twn-menu{ align-self:center; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; margin-left:8px; padding:0; border:0; background:transparent; color:#cdd6e4; cursor:pointer; border-radius:8px; transition:background .15s, color .15s; } .twn-menu:hover{ background:rgba(230,169,60,.14); color:var(--twn-accent); } /* 檔案式 icon：SVG 當遮罩、顏色用 background-color → 吃 currentColor / hover 變色（取代舊 @icon 內聯系統，瀏覽器實際下載該 .svg 檔） */ .twn-i{ display:inline-block; flex:none; width:18px; height:18px; background-color:currentColor; transition:color .15s; -webkit-mask:var(--twn-i) center/contain no-repeat; mask:var(--twn-i) center/contain no-repeat; } .twn-menu .twn-i{ display:block; } @media(max-width:992px){ .twn-desk{ display:none; } } /* search inside the drawer */ .twn-side-search{ padding:14px 18px 4px; } .twn-side-search form{ display:flex; align-items:center; gap:8px; background:#0e1626; border:1px solid var(--twn-line); border-radius:9px; height:40px; padding:0 8px 0 12px; transition:border-color .15s; } .twn-side-search form:focus-within{ border-color:var(--twn-accent); } .twn-side-search .twn-i{ color:#7c8aa3; } .twn-side-search input{ flex:1; min-width:0; border:0; background:transparent; outline:0; color:#e9eef7; font-size:15px; } .twn-side-search input::placeholder{ color:#5f6f8c; } .twn-side-search button{ flex:none; border:0; cursor:pointer; background:var(--twn-accent); color:#1a1206; font-weight:700; font-size:13.5px; height:28px; padding:0 14px; border-radius:6px; white-space:nowrap; transition:background .15s; } .twn-side-search button:hover{ background:#cf9326; } /* secondary horizontal scroll nav */ div.scrollmenu{ background-color:var(--twn-surface); border-bottom:1px solid var(--twn-line); /* 2026-07-04 起：scrollmenu 用 surface、header 用 surface2（見 .twn-nav），亮的這條當次導覽 bar */ overflow:auto; white-space:nowrap; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-left:max(22px,calc(50% - 518px)); padding-right:max(22px,calc(50% - 518px)); } .scrollmenu::-webkit-scrollbar{ display:none; } div.scrollmenu a{ display:inline-block; color:var(--twn-ink); font-weight:600; text-align:center; padding:10px 14px; text-decoration:none; transition:color .15s, box-shadow .15s; } div.scrollmenu a:hover{ color:var(--twn-accent); box-shadow:inset 0 -2px 0 var(--twn-accent); } div.scrollmenu a.twn-ext{ color:var(--twn-accent); } /* slide-in side menu */ .twn-scrim{ position:fixed; inset:0; background:rgba(8,13,24,.5); opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease; z-index:16; } .twn-scrim.open{ opacity:1; visibility:visible; } .twn-side{ position:fixed; top:0; right:0; height:100%; width:300px; max-width:86vw; background:var(--twn-surface); border-left:1px solid var(--twn-line); box-shadow:-18px 0 44px rgba(0,0,0,.5); z-index:17; transform:translateX(100%); transition:transform .28s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; } .twn-side.open{ transform:translateX(0); } .twn-side-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 16px 16px 22px; border-bottom:1px solid var(--twn-line); } .twn-side-head b{ font-size:14px; font-weight:800; letter-spacing:.22em; color:#f3f5f9; } .twn-side-close{ width:36px; height:36px; border:0; background:transparent; color:#9aabc6; cursor:pointer; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; transition:background .15s, color .15s; } .twn-side-close:hover{ background:var(--twn-surface2); color:var(--twn-accent); } .twn-side-body{ flex:1; overflow-y:auto; padding:6px 0 12px; } /* 側欄捲動區捲軸配合暮金藍（項目多時才出現）：track 透明融入抽屜、thumb 髮絲線色細條 */ .twn-side-body{ scrollbar-width:thin; scrollbar-color:var(--line-2) transparent; } .twn-side-body::-webkit-scrollbar{ width:10px; } .twn-side-body::-webkit-scrollbar-track{ background:transparent; } .twn-side-body::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:10px; border:3px solid var(--twn-surface); background-clip:padding-box; } .twn-side-body::-webkit-scrollbar-thumb:hover{ background:#46598a; } .twn-side-label{ font-size:10.5px; font-weight:700; letter-spacing:.18em; color:#6a7a96; margin:0; padding:16px 22px 6px; } .twn-side-body a{ display:flex; align-items:center; gap:13px; padding:11px 22px 11px 19px; font-size:15.5px; font-weight:600; color:#c3cdde; text-decoration:none; border-left:3px solid transparent; transition:background .15s, color .15s, border-color .15s; } .twn-side-body a .twn-i{ color:#7e8aa3; } .twn-side-body a:hover{ background:var(--twn-surface2); color:#f3f5f9; border-left-color:var(--twn-accent); } .twn-side-body a:hover .twn-i{ color:var(--twn-accent); } .twn-side-foot{ padding:14px 18px 18px; border-top:1px solid var(--twn-line); } .twn-side-line{ display:flex; align-items:center; justify-content:center; gap:9px; padding:12px; background:rgba(230,169,60,.12); border:1px solid rgba(230,169,60,.3); border-radius:10px; color:var(--twn-accent); font-weight:700; font-size:15px; text-decoration:none; transition:background .15s; } .twn-side-line:hover{ background:rgba(230,169,60,.2); } /* line-mono 側欄那顆改用 .twn-i mask，顏色由 .twn-side-line 的 color(金) 帶入，不再需要專屬 fill 規則 */ /* ---------- 4. 可重用元件（.tw-*） ---------- */ /* 所有 tw-* 元件一律 border-box（不影響 twn-* / 舊 w3 內容） */ [class^="tw-"], [class*=" tw-"]{ box-sizing:border-box; } /* 深色頁 opt-in：整頁要暗色時，在內容最外層加 class="tw-dark"（暮金藍底＋淺色字）。註：這只讓「該容器」變暗；若要連 footer 以下、整個視窗都暗，該頁需再自行設 body{ background:var(--bg); }（首頁 body.php 就是這樣做，兩者搭配才是整頁暗色）。 */ .tw-dark{ background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; } .tw-dark a{ color:inherit; text-decoration:none; } .tw-serif{ font-weight:800; letter-spacing:-.01em; } /* 版心容器（1080px 置中，左右 22px 內距） */ .tw-wrap{ max-width:1080px; margin:0 auto; padding:0 22px; } /* 小排版件 */ .tw-eyebrow{ font-size:12px; letter-spacing:.34em; color:var(--accent); margin:0; font-weight:600; } .tw-kicker{ font-size:11.5px; letter-spacing:.3em; color:var(--accent); font-weight:600; } .tw-rule{ width:34px; height:2px; background:var(--accent); border:0; margin:16px 0 0; } /* 區塊＋區塊標題列 */ .tw-sec{ padding:48px 0 0; } .tw-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:24px; } .tw-head-l{ display:flex; flex-direction:column; gap:7px; } .tw-title{ font-weight:700; color:var(--accent); margin:0; line-height:1.2; } .tw-seeall{ font-size:14px; color:var(--slate); font-weight:600; white-space:nowrap; transition:.15s; } .tw-seeall:hover{ color:var(--accent); } /* 影像卡 grid */ .tw-cams{ display:grid; grid-template-columns:repeat(auto-fill,minmax(214px,1fr)); gap:18px; } .tw-cam{ display:block; background:var(--surface); border:1px solid var(--line); border-radius:13px; overflow:hidden; transition:transform .2s, box-shadow .2s, border-color .2s; } .tw-cam:hover{ transform:translateY(-4px); box-shadow:0 18px 36px rgba(0,0,0,.45); border-color:#3f547e; } .tw-shot{ position:relative; aspect-ratio:4/3; background:#1f2530; overflow:hidden; } .tw-shot img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; } .tw-cam:hover .tw-shot img{ transform:scale(1.04); } .tw-live{ position:absolute; top:9px; left:9px; display:inline-flex; align-items:center; gap:6px; font-size:10px; letter-spacing:.16em; font-weight:700; color:#f3efe7; background:rgba(31,37,48,.58); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); padding:4px 9px 4px 8px; border-radius:6px; } .tw-live::before{ content:""; width:6px; height:6px; border-radius:50%; background:#34d399; } .tw-cap{ padding:12px 14px 14px; font-size:14px; font-weight:600; color:var(--ink); line-height:1.5; } /* 標籤膠囊 */ .tw-tags{ display:flex; flex-wrap:wrap; gap:9px; } .tw-tag{ display:inline-block; padding:8px 15px; font-size:14.5px; color:var(--ink); background:transparent; border:1px solid var(--line-2); border-radius:8px; transition:.15s; } .tw-tag:hover{ border-color:var(--slate); color:var(--slate); transform:translateY(-2px); } /* icon 格 */ .tw-icons{ display:grid; grid-template-columns:repeat(auto-fill,minmax(80px,1fr)); gap:2px; } .tw-ico{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:4px 2px; border-radius:11px; transition:.15s; } .tw-ico img{ width:52px; height:52px; } .tw-ico span{ font-size:13px; font-weight:600; color:var(--ink); text-align:center; transition:color .15s; } .tw-ico:hover{ background:var(--surface); } .tw-ico:hover span{ color:var(--slate); } /* 搜尋框 */ .tw-search{ display:flex; align-items:center; gap:10px; max-width:520px; margin:28px 0 0; background:var(--surface); border:1px solid var(--line-2); border-radius:11px; padding:5px 6px 5px 14px; transition:border-color .15s, box-shadow .15s; } .tw-search:focus-within{ border-color:var(--slate); box-shadow:0 1px 0 rgba(51,71,91,.06); } .tw-search svg{ flex:none; color:var(--muted); } .tw-search input{ flex:1; min-width:0; border:0; outline:0; background:transparent; padding:11px 0; font-size:15.5px; color:var(--ink); } .tw-search input::placeholder{ color:#6f7fa0; } .tw-search button{ flex:none; border:0; cursor:pointer; background:var(--slate); color:#1a1206; font-size:15px; font-weight:600; padding:11px 22px; border-radius:8px; transition:background .15s; letter-spacing:.05em; } .tw-search button:hover{ background:var(--slate-d); } /* 目錄卡（多欄分類） */ .tw-dirs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(264px,1fr)); gap:18px; } .tw-dir{ padding:0; } .tw-dir > .tw-kicker{ display:block; margin-bottom:10px; } .tw-dir > h3{ font-weight:700; color:var(--ink); margin:0 0 16px; } /* ---------- 內容頁標準頁首（about／disclaimer／privacy… 一律套這套，勿每頁自訂 hero） ---------- 標準結構：

(可省；buildBreadcrumbHtml 產生)

標題

最後更新：…

(可省)

前言…

(可省，可多段)

…頁面專屬內容…

深色頁請於該頁自加 body{ background:var(--bg); }（body 屬全域，不放這） */ .tw-page-hero{ padding:112px 0 0; } /* 可見麵包屑（h1 上方；末層＝本頁不輸出，由 003_breadcrumb.php buildBreadcrumbHtml 產生） */ .tw-crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 14px; font-size:14px; color:var(--muted); } .tw-crumbs a{ color:var(--muted); text-decoration:none; transition:color .15s; } .tw-crumbs a:hover{ color:var(--accent); } .tw-crumbs .tw-sep{ color:var(--line-2); user-select:none; } /* 手機：層數多會折行顯亂，收成單行橫向滑動（連結仍全在 DOM，不影響 SEO） */ @media(max-width:600px){ .tw-crumbs{ flex-wrap:nowrap; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .tw-crumbs::-webkit-scrollbar{ display:none; } .tw-crumbs a, .tw-crumbs .tw-sep{ flex:0 0 auto; } } .tw-page-title{ margin:0; color:var(--word); } /* 配 .tw-serif；字級吃 site.css h1(24px) */ .tw-page-meta{ margin-top:12px; font-size:13px; color:var(--muted); } .tw-page-meta time{ color:var(--ink); } .tw-lead{ margin-top:22px; max-width:760px; } .tw-lead p{ margin:0 0 14px; font-size:15.5px; line-height:1.95; color:#c9d4e6; } .tw-lead p:last-child{ margin-bottom:0; } .tw-lead a{ color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(230,169,60,.35); } .tw-lead a:hover{ border-bottom-color:var(--accent); } /* ========================================================================= 全站頁尾（footer.php 使用）— 由 footer.php 內嵌