/* ========================================================================== 風格 J — 日系企業風 疊在 site.css 之上（取代 theme-tech.css，不要兩個同時載入）。 套用方式：每頁的 site.css 後面加一行 想換回科技感：把那一行改成 theme-tech.css 即可。 這一套的設計原則，跟科技感那套幾乎相反： · 用留白與細線分隔，不用陰影與卡片浮起 · 直角，沒有圓角 · 單色墨階 + 一個克制的重點色，不用漸層 · 標題用中等字重、放寬字距，不用粗黑大字 · 英文小標 + 中文標題的雙層排版 · 編號（01 02 03）當結構標記 · 動態放慢、幅度變小 日夜模式：這一套的本體是白底，所以預設跟隨作業系統 （ 上沒有 data-hw-default）。想強制白底就加 data-hw-default="light"。 ========================================================================== */ /* -------------------------------------------------------- 淺色（本體） */ :root, [data-bs-theme="light"] { /* 暖白，不是冷灰 — 這是日系企業網站最明顯的底色特徵 */ --j-paper: #ffffff; --j-canvas: #f6f5f2; --j-ink: #16181c; --j-ink-2: #4a4f57; --j-ink-3: #6b7178; /* 白底上要到這個深度，13px 的小字才過得了 4.5:1 */ --j-line: #e2e0da; --j-line-soft: #eeece7; --j-accent: #1c3f5f; /* 鐵藍：結構工程的主色 */ --j-mark: #a4341f; /* 朱：只用在編號與英文小標，用量極少 */ --hw-brand: var(--j-accent); --hw-brand-600: #16334c; --hw-brand-700: #102638; --hw-accent: var(--j-mark); --hw-ink: var(--j-ink); --hw-surface: var(--j-paper); --hw-canvas: var(--j-canvas); --hw-line: var(--j-line); --bs-primary: #1c3f5f; --bs-primary-rgb: 28, 63, 95; --bs-body-color: #16181c; --bs-body-bg: #f6f5f2; --bs-secondary-color: #676d75; --bs-border-color: #e2e0da; --bs-link-color: #1c3f5f; --bs-link-hover-color: #a4341f; --bs-emphasis-color: #000; --bs-tertiary-bg: #fff; color-scheme: light; } /* ---------------------------------------------------------------- 深色版 */ [data-bs-theme="dark"] { /* 暖黑，跟著淺色版的暖調走，不用藍黑 */ --j-paper: #1a1a18; --j-canvas: #121211; --j-ink: #ecebe6; --j-ink-2: #b6b4ad; --j-ink-3: #8a8880; --j-line: #2e2e2b; --j-line-soft: #232320; --j-accent: #8fb4d4; --j-mark: #d98a72; --hw-brand: var(--j-accent); --hw-brand-600: #aac9e2; --hw-brand-700: #c6dcee; --hw-accent: var(--j-mark); --hw-ink: var(--j-ink); --hw-surface: var(--j-paper); --hw-canvas: var(--j-canvas); --hw-line: var(--j-line); --bs-primary: #8fb4d4; --bs-primary-rgb: 143, 180, 212; --bs-body-color: #ecebe6; --bs-body-bg: #121211; --bs-secondary-color: #a8a6a0; --bs-border-color: #2e2e2b; --bs-link-color: #8fb4d4; --bs-link-hover-color: #d98a72; --bs-emphasis-color: #fff; --bs-tertiary-bg: #1a1a18; color-scheme: dark; } /* ------------------------------------------------------------ 全域歸零 */ /* 直角、無陰影 — 這兩件事決定了整體的性格 */ :root { --hw-r: 0px; --hw-r-sm: 0px; --hw-r-pill: 0px; --hw-shadow-sm: none; --hw-shadow: none; --hw-shadow-lg: none; --bs-border-radius: 0; --bs-border-radius-sm: 0; --bs-border-radius-lg: 0; } *, *::before, *::after { border-radius: 0 !important; } .rounded-pill, .rounded, .rounded-3 { border-radius: 0 !important; } body { background: var(--j-canvas); background-image: none; color: var(--j-ink); font-size: .97rem; line-height: 1.95; /* 中文長文要更鬆 */ letter-spacing: .015em; } /* 標題不用粗黑，用中等字重加字距 */ h1, h2, h3, h4, h5, h6 { font-weight: 500; letter-spacing: .04em; line-height: 1.55; color: var(--j-ink); } h1 { font-weight: 500; } .lead { font-size: 1.02rem; line-height: 2; color: var(--j-ink-2); letter-spacing: .02em; } .text-muted-2, .small { color: var(--j-ink-2); } a { color: var(--j-ink); } a:hover { color: var(--j-mark); } hr { border-color: var(--j-line); opacity: 1; } :focus-visible { outline: 1px solid var(--j-accent); outline-offset: 4px; } /* 漸層文字在這一套裡完全不合，改成實色 */ .grad-text { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--j-accent) !important; } /* -------------------------------------------------------- 英文小標 */ /* SERVICES / PROJECTS 這類標籤：加一段短線，字距拉開，字級縮小 */ .eyebrow { display: flex; align-items: center; gap: .7rem; background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--j-mark) !important; font-size: .68rem; font-weight: 600; letter-spacing: .28em; margin-bottom: 1rem; } .eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--j-mark); flex: none; } /* ---------------------------------------------------------------- 導覽列 */ .hw-nav { background: var(--j-paper); border-bottom: 1px solid var(--j-line); backdrop-filter: none; -webkit-backdrop-filter: none; min-height: 76px; } .hw-logo-mark { background: var(--j-ink); color: var(--j-paper); box-shadow: none; width: 34px; height: 34px; font-weight: 500; } [data-bs-theme="dark"] .hw-logo-mark { background: var(--j-ink); color: var(--j-canvas); } .hw-logo-name { font-weight: 500; letter-spacing: .1em; font-size: 1.02rem; color: var(--j-ink); } .hw-logo-sub { color: var(--j-ink-3); letter-spacing: .22em; font-size: .58rem; } .hw-nav .nav-link { color: var(--j-ink-2); font-size: .88rem; font-weight: 500; letter-spacing: .08em; padding: .5rem .85rem; position: relative; } .hw-nav .nav-link:hover { background: none; color: var(--j-ink); } /* 用一條細下線標記，不用色塊 */ .hw-nav .nav-link::after { content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .1rem; height: 1px; background: var(--j-mark); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.22,.61,.36,1); } .hw-nav .nav-link:hover::after, .hw-nav .nav-link.active::after { transform: scaleX(1); } .hw-nav .nav-link.active { color: var(--j-ink); font-weight: 500; } .theme-toggle { border: 1px solid var(--j-line); color: var(--j-ink-2); width: 34px; height: 34px; } .theme-toggle:hover { border-color: var(--j-ink); color: var(--j-ink); } @media (max-width: 991.98px) { .navbar-collapse { background: var(--j-paper); border-top: 1px solid var(--j-line); margin: .75rem -1rem -.5rem; padding: .25rem 1rem .75rem; } .hw-nav .nav-link { padding: .85rem .25rem; border-bottom: 1px solid var(--j-line-soft); } .hw-nav .nav-link::after { display: none; } } /* ------------------------------------------------------------------ Hero */ .hero { background: var(--j-paper); border-bottom: 1px solid var(--j-line); } /* 光暈、網格、極光全部拿掉 */ .hero::before, .hero::after { display: none; } .hero > .container { padding-top: 7rem; padding-bottom: 7rem; } @media (max-width: 767.98px) { .hero > .container { padding-top: 4rem; padding-bottom: 4rem; } } .hero h1 { font-size: clamp(1.75rem, 3.4vw, 2.9rem); font-weight: 500; letter-spacing: .06em; line-height: 1.7; color: var(--j-ink); } .hero .lead { max-width: 30em; margin-top: 2rem; } /* Hero 的小標籤改成一行細線標記，不是膠囊 */ .pill-tag { display: inline-flex; align-items: center; gap: .7rem; background: none; border: 0; border-left: 2px solid var(--j-mark); padding: .1rem 0 .1rem .8rem; color: var(--j-ink-2); font-size: .78rem; letter-spacing: .16em; box-shadow: none; backdrop-filter: none; } .pill-tag .dot { display: none; } /* ------------------------------------------------------------------ 按鈕 */ /* 日系企業站的按鈕多是細框直角，或一條線加箭頭 */ .btn { font-weight: 500; letter-spacing: .1em; font-size: .86rem; padding: .85rem 1.9rem; border-width: 1px; transition: background-color .3s cubic-bezier(.22,.61,.36,1), color .3s cubic-bezier(.22,.61,.36,1), border-color .3s cubic-bezier(.22,.61,.36,1); } .btn-lg { padding: 1rem 2.4rem; font-size: .9rem; } .btn-primary { background: var(--j-ink); border-color: var(--j-ink); color: var(--j-paper); box-shadow: none; } .btn-primary:hover, .btn-primary:focus { background: var(--j-accent); border-color: var(--j-accent); color: #fff; box-shadow: none; } [data-bs-theme="dark"] .btn-primary { color: var(--j-canvas); } [data-bs-theme="dark"] .btn-primary:hover { color: var(--j-canvas); } .btn-outline-secondary { background: transparent; border-color: var(--j-ink); color: var(--j-ink); backdrop-filter: none; } .btn-outline-secondary:hover { background: var(--j-ink); border-color: var(--j-ink); color: var(--j-paper); box-shadow: none; } .btn-light, .cta-band .btn-light { background: transparent; border-color: rgba(255, 255, 255, .55); color: #fff; } .btn-light:hover, .cta-band .btn-light:hover { background: #fff; border-color: #fff; color: var(--j-ink); } /* -------------------------------------------------------- 卡片改為細線 */ .hw-card, .svc-card, .cons-card, .spec-card, .sk { background: var(--j-paper); border: 1px solid var(--j-line); box-shadow: none !important; backdrop-filter: none; -webkit-backdrop-filter: none; } .hw-card { transition: border-color .35s cubic-bezier(.22,.61,.36,1); } .hw-card:hover, .svc-card:hover, .cons-card:hover { transform: none; border-color: var(--j-ink); box-shadow: none !important; } .hw-card-media { background: var(--j-canvas); aspect-ratio: 3 / 2; } .hw-card-media::after { display: none; } .hw-card-media img { transition: transform .8s cubic-bezier(.22,.61,.36,1); } .hw-card:hover .hw-card-media img { transform: scale(1.03); } .hw-card-body { padding: 1.3rem 1.4rem 1.5rem; } .hw-card-title { font-size: .99rem; font-weight: 500; letter-spacing: .03em; line-height: 1.75; color: var(--j-ink); } .hw-card:hover .hw-card-title { color: var(--j-ink); } .hw-card-meta { font-size: .8rem; letter-spacing: .06em; color: var(--j-ink-3); } .hw-card-meta .sep { opacity: .4; } /* 標籤：方角細框，不用色塊 */ .tag { background: none; border: 1px solid var(--j-line); color: var(--j-ink-2); font-size: .72rem; font-weight: 400; letter-spacing: .08em; padding: .2rem .6rem; } .tag.tag-plain { background: none; border-color: var(--j-line-soft); color: var(--j-ink-3); } /* 壓在照片上的角標：方角、細框、半透明黑 */ .media-chip { background: rgba(20, 22, 26, .82); border: 0; color: #fff; font-weight: 400; letter-spacing: .06em; font-size: .7rem; padding: .25rem .6rem; backdrop-filter: none; } .media-chip.is-live { background: var(--j-mark); box-shadow: none; } /* 服務卡：編號當視覺標記，圖示縮小退到旁邊 */ .svc-card { padding: 2rem 1.75rem 2.1rem; } .svc-icon { width: auto; height: auto; background: none !important; border: 0; box-shadow: none; color: var(--j-ink-3); display: block; margin-bottom: 1.4rem; opacity: .75; } .svc-card h3 { font-size: 1.02rem; font-weight: 500; letter-spacing: .06em; margin-bottom: .8rem; } /* 服務卡的英文小標（HTML 裡的 .svc-en） */ .svc-en { display: block; font-size: .62rem; font-weight: 600; letter-spacing: .24em; color: var(--j-mark); margin-bottom: .5rem; } /* -------------------------------------------------------- 數據列改細線 */ .stat-strip { background: none; border: 0; border-top: 1px solid var(--j-line); border-bottom: 1px solid var(--j-line); gap: 0; padding: 0; } .stat-strip .item { background: none; backdrop-filter: none; padding: 2.1rem 1rem; border-left: 1px solid var(--j-line-soft); text-align: left; } .stat-strip .item:first-child { border-left: 0; } .stat-strip .num { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--j-ink) !important; filter: none !important; font-size: 2.5rem; font-weight: 300; letter-spacing: -.01em; line-height: 1.1; } .stat-strip .num.is-wide { font-size: 1.35rem; font-weight: 400; } .stat-strip .lbl { color: var(--j-ink-3); font-size: .74rem; letter-spacing: .16em; margin-top: .5rem; } @media (max-width: 575.98px) { .stat-strip .item { border-left: 0; border-top: 1px solid var(--j-line-soft); } .stat-strip .item:first-child { border-top: 0; } } /* ------------------------------------------------------------ 頁面標頭 */ .page-head { background: var(--j-paper); border-bottom: 1px solid var(--j-line); padding: 4.5rem 0 4rem; } .page-head::before { display: none; } .page-head h1 { font-size: clamp(1.5rem, 2.8vw, 2.2rem); font-weight: 500; letter-spacing: .1em; } .breadcrumb { font-size: .76rem; letter-spacing: .1em; margin-bottom: 1.5rem; } .breadcrumb a { color: var(--j-ink-3); } .breadcrumb a:hover { color: var(--j-mark); } .breadcrumb-item.active { color: var(--j-ink-2); } /* -------------------------------------------------------------- 工具列 */ .toolbar { background: var(--j-paper); border-bottom: 1px solid var(--j-line); backdrop-filter: none; -webkit-backdrop-filter: none; padding: 1rem 0; } .chip { background: none; border: 1px solid var(--j-line); color: var(--j-ink-2); font-size: .82rem; font-weight: 400; letter-spacing: .08em; padding: .45rem 1rem; } .chip:hover { border-color: var(--j-ink); color: var(--j-ink); } .chip[aria-pressed="true"] { background: var(--j-ink); border-color: var(--j-ink); color: var(--j-paper); box-shadow: none; } .chip .n { opacity: .55; font-size: .78em; } .form-select.hw-select, .search-box .form-control, .form-control, .form-select { background: var(--j-paper); border-color: var(--j-line); color: var(--j-ink); font-size: .84rem; letter-spacing: .06em; } .form-control:focus, .form-select:focus { background: var(--j-paper); border-color: var(--j-ink); color: var(--j-ink); box-shadow: none; } .form-control::placeholder { color: var(--j-ink-3); } .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%237b8189' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.4' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } .search-box .form-control { padding-left: 2.3rem; } /* 分年標題：編號感的年份 + 細線 */ .year-head { margin: 3.5rem 0 1.4rem; gap: 1.4rem; } .year-head .y { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--j-ink) !important; font-size: 1.5rem; font-weight: 300; letter-spacing: .06em; } .year-head .n { color: var(--j-ink-3); font-size: .76rem; letter-spacing: .14em; } .year-head .line { background: var(--j-line); } /* ------------------------------------------------------------ 專案詳細 */ .gallery-main { background: var(--j-canvas); border: 1px solid var(--j-line); aspect-ratio: 3 / 2; } .gnav { background: var(--j-paper); border: 1px solid var(--j-line); color: var(--j-ink); box-shadow: none; width: 44px; height: 44px; } .gnav:hover { background: var(--j-ink); color: var(--j-paper); border-color: var(--j-ink); } .gthumbs { gap: .6rem; } .gthumbs button { background: var(--j-canvas); border-width: 1px; border-color: var(--j-line); opacity: 1; } .gthumbs button:hover { border-color: var(--j-ink-3); } .gthumbs button[aria-current="true"] { border-color: var(--j-ink); box-shadow: none; } .gdots button { background: var(--j-line); } .gdots button[aria-current="true"] { background: var(--j-ink); } .spec-card { border: 1px solid var(--j-line); } .spec-card .head { background: none; border-bottom: 1px solid var(--j-line); color: var(--j-ink); font-weight: 500; font-size: .86rem; letter-spacing: .14em; padding: 1.1rem 1.4rem; } .spec-card dl { padding: .5rem 1.4rem 1.4rem; } .spec-card dt { font-size: .7rem; letter-spacing: .16em; color: var(--j-ink-3); font-weight: 500; margin-top: 1.2rem; } .spec-card dd { font-size: .94rem; letter-spacing: .03em; color: var(--j-ink); } .lightbox { background: rgba(18, 18, 17, .96); } /* ------------------------------------------------------------------ 顧問 */ .cons-card { padding: 1.9rem 1.75rem; } .cons-avatar { border-radius: 0 !important; } .cons-avatar.is-text { background: var(--j-canvas) !important; border: 1px solid var(--j-line); color: var(--j-ink); font-weight: 400; box-shadow: none; } .cons-name { font-size: 1.08rem; font-weight: 500; letter-spacing: .08em; } .cons-title { background: none; border: 1px solid var(--j-line); color: var(--j-ink-2); font-size: .7rem; font-weight: 400; letter-spacing: .1em; padding: .15rem .55rem; } .cons-affil { font-size: .85rem; letter-spacing: .04em; color: var(--j-ink-2); } .cons-creds li::before { background: var(--j-ink-3); box-shadow: none; width: 4px; height: 4px; } .btn-yt { background: none; border: 1px solid var(--j-line); color: var(--j-ink-2); padding: .5rem 1rem; font-size: .78rem; } .btn-yt:hover { background: var(--j-ink); border-color: var(--j-ink); color: var(--j-paper); } .btn-yt svg { color: #ff0033; } .btn-yt:hover svg { color: #fff; } /* --------------------------------------------------------------- CTA */ .cta-band { background: var(--j-ink); border: 0; box-shadow: none; padding: 4.5rem 2rem; } [data-bs-theme="dark"] .cta-band { background: #26261f; } .cta-band h2 { color: #fff; font-weight: 500; letter-spacing: .08em; font-size: clamp(1.3rem, 2.2vw, 1.7rem); } .cta-band p { color: rgba(255, 255, 255, .72); letter-spacing: .03em; } /* ------------------------------------------------------------------ 頁尾 */ .site-footer { background: var(--j-paper); border-top: 1px solid var(--j-line); color: var(--j-ink-2); padding: 4rem 0 1.75rem; } .site-footer h6 { color: var(--j-ink); font-size: .68rem; letter-spacing: .24em; font-weight: 600; margin-bottom: 1.2rem; } .site-footer a { color: var(--j-ink-2); } .site-footer a:hover { color: var(--j-mark); } .site-footer .hw-logo-name { color: var(--j-ink); } .site-footer .hw-logo-mark { background: var(--j-ink); color: var(--j-paper); } .site-footer hr { border-color: var(--j-line); } .site-footer .footer-bottom, .site-footer .d-flex.flex-wrap.justify-content-between { color: var(--j-ink-3) !important; } .site-footer p { color: var(--j-ink-2); } /* ----------------------------------------------------------- 骨架與狀態 */ .sk-media, .sk-line { background: linear-gradient(90deg, var(--j-line-soft) 25%, var(--j-line) 37%, var(--j-line-soft) 63%); background-size: 400% 100%; } .state h3 { color: var(--j-ink); font-weight: 500; letter-spacing: .08em; } .state { color: var(--j-ink-3); } /* --------------------------------------------------------------- 其他 */ .dropzone { background: var(--j-paper); border: 1px dashed var(--j-line); } .dropzone:hover, .dropzone.is-over { border-color: var(--j-ink); background: var(--j-canvas); } .alert-secondary { background: var(--j-canvas); border-color: var(--j-line); color: var(--j-ink-2); } .table { --bs-table-color: var(--j-ink); --bs-table-border-color: var(--j-line); } code { color: var(--j-mark); } /* 章節間距整體放寬，留白是這一套的主角 */ .section { padding: 7rem 0; } .section-sm { padding: 4.5rem 0; } @media (max-width: 767.98px) { .section { padding: 4rem 0; } .section-sm { padding: 2.75rem 0; } } /* -------------------------------------------------------- 動態放慢變小 */ .hw-motion [data-reveal] { transform: translateY(14px); transition: opacity 1.1s cubic-bezier(.22,.61,.36,1), transform 1.1s cubic-bezier(.22,.61,.36,1); } .hw-motion [data-reveal].is-in { transform: none; } /* 卡片傾斜在這一套裡太浮誇，關掉 */ .hw-motion [data-tilt] { transform: none !important; } .hw-motion [data-tilt] .hw-card::before { display: none !important; } /* -------------------------------------------------------- 清單檢視微調 */ .idx { border-top-color: var(--j-ink); } .idx-row { border-bottom-color: var(--j-line); } .idx-row > a:hover { background: var(--j-canvas); } .idx-no { color: var(--j-mark); font-weight: 600; } .idx-name { font-weight: 500; letter-spacing: .04em; } .idx-cat, .idx-loc, .idx-year { color: var(--j-ink-3); letter-spacing: .04em; } .idx-live { color: var(--j-mark); } /* -------------------------------------------------------- 「待填」標記 */ /* Bootstrap 的鮮黃 badge 在這一套的克制配色裡太跳，改成細框標記 */ .badge.text-bg-warning { background: none !important; border: 1px solid var(--j-mark); color: var(--j-mark) !important; font-weight: 500; font-size: .68rem; letter-spacing: .1em; padding: .15rem .5rem; vertical-align: .1em; } .cons-avatar-stack { border-radius: 0 !important; }