/* =========================================================
COMART — Homepage stylesheet
Brand colours from COMART CIS (A-03-01):
標準色 PANTONE 1805C · 輔助色 White / Black / P877 / P873
========================================================= */
:root {
/* Brand */
--red: #AB252E; /* PANTONE 1805C */
--red-bright: #C4303A;
--red-deep: #7E1A21;
--silver: #949293; /* PANTONE 877C */
--gold: #9E8243; /* PANTONE 873C */
/* Neutrals */
--ink: #0C0D0F;
--ink-2: #131519;
--ink-3: #1C1F24;
--graphite: #2B2F35;
--paper: #FFFFFF;
--paper-2: #F5F5F3;
--paper-3: #EBEBE7;
--text: #16181C;
--text-muted: #5C6169;
--line: rgba(12, 13, 15, .12);
--line-dark: rgba(255, 255, 255, .14);
/* Type */
--display: "Archivo", "Helvetica Neue", Arial, "Noto Sans TC", sans-serif;
--body: "Inter", "Helvetica Neue", Arial, "Noto Sans TC", sans-serif;
/* Metrics */
--wrap: 1320px;
--gutter: clamp(20px, 5vw, 72px);
--header-h: 86px;
}
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
background: var(--paper);
color: var(--text);
font-family: var(--body);
font-size: 17px;
line-height: 1.65;
font-weight: 400;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; } /* UA default is 1em 40px — kills grid column alignment */
/* ---------- Utilities ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow {
display: inline-flex; align-items: center; gap: 12px;
font-family: var(--body);
font-size: 11.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
color: var(--text-muted);
}
.eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--red); flex: none; }
.on-dark .eyebrow { color: rgba(255,255,255,.62); }
.section { padding: clamp(72px, 9vw, 140px) 0; }
section[id] { scroll-margin-top: calc(var(--header-h) + 8px); }
.section-head { max-width: 900px; }
.section-head.is-wide { max-width: none; } /* 標題要維持單行時使用 */
.section-head h2 {
font-size: clamp(2rem, 4.2vw, 3.4rem);
font-stretch: 112%;
margin: 22px 0 0;
}
.section-head .lead {
margin-top: 22px;
font-size: clamp(1.02rem, 1.35vw, 1.2rem);
color: var(--text-muted);
max-width: 62ch;
}
.on-dark { background: var(--ink); color: #fff; }
.on-dark .section-head .lead { color: rgba(255,255,255,.66); }
/* Buttons */
.btn {
--btn-bg: var(--red);
--btn-fg: #fff;
display: inline-flex; align-items: center; gap: 12px;
padding: 17px 30px;
background: var(--btn-bg); color: var(--btn-fg);
font-family: var(--body); font-size: 13.5px; font-weight: 600;
letter-spacing: .12em; text-transform: uppercase;
border: 1px solid var(--btn-bg);
transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
will-change: transform;
}
.btn:hover { background: var(--red-bright); border-color: var(--red-bright); transform: translateY(-2px); }
.btn .arrow { transition: transform .25s ease; }
.btn:hover .arrow { transform: translateX(5px); }
.btn--ghost { --btn-bg: transparent; --btn-fg: #fff; border-color: rgba(255,255,255,.42); }
.btn--ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.btn--dark { --btn-bg: var(--ink); --btn-fg: #fff; }
.btn--dark:hover { background: var(--graphite); border-color: var(--graphite); }
/* Text link */
.tlink {
display: inline-flex; align-items: center; gap: 10px;
font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
padding-bottom: 6px; border-bottom: 1px solid var(--line);
transition: border-color .25s ease, color .25s ease;
}
.tlink:hover { color: var(--red); border-color: var(--red); }
.on-dark .tlink { border-color: var(--line-dark); }
.on-dark .tlink:hover { color: #fff; border-color: #fff; }
/* ---------- Header ---------- */
.header {
position: fixed; inset: 0 0 auto 0; z-index: 100;
height: var(--header-h);
display: flex; align-items: center;
transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
border-bottom: 1px solid transparent;
}
.header .wrap { display: flex; align-items: center; gap: 24px; }
.header.is-stuck {
background: rgba(10, 11, 13, .88);
backdrop-filter: saturate(160%) blur(14px);
-webkit-backdrop-filter: saturate(160%) blur(14px);
border-bottom-color: rgba(255,255,255,.1);
}
.brand { display: flex; align-items: center; flex: none; }
.brand img { width: 176px; height: auto; }
.nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav a {
font-size: 15px; font-weight: 500; letter-spacing: .03em; color: rgba(255,255,255,.82);
white-space: nowrap;
position: relative; padding: 6px 0;
transition: color .2s ease;
}
.nav a::after {
content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--red);
transition: width .25s ease;
}
.nav a:hover { color: #fff; }
.nav a:hover::after { width: 100%; }
.lang {
display: flex; align-items: center; gap: 2px;
padding-left: 26px; margin-left: 4px;
border-left: 1px solid rgba(255,255,255,.18);
}
.lang a {
font-size: 13px; font-weight: 600; letter-spacing: .08em;
color: rgba(255,255,255,.55); padding: 6px 10px;
transition: color .2s ease;
}
.lang a:hover { color: #fff; }
.lang a.is-active { color: #fff; }
.header .btn { padding: 13px 20px; font-size: 12px; white-space: nowrap; }
.lang { flex: none; }
@media (max-width: 1400px) {
.nav { gap: 19px; }
.nav a { font-size: 14px; }
.lang { padding-left: 18px; }
}
@media (max-width: 1240px) {
.nav { gap: 15px; }
.nav a { font-size: 13px; }
.brand img { width: 156px; }
.lang a, .lang .is-soon { font-size: 12px; padding: 5px 7px; }
.header .btn { padding: 11px 15px; font-size: 11px; }
}
@media (max-width: 1120px) {
.header .btn { display: none; }
}
/* Mobile menu panel — hidden entirely on desktop, revealed by the ≤980px rules */
.mobile-menu { display: none; }
.burger {
display: none; margin-left: auto;
width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.28); background: transparent;
cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.burger span { display: block; width: 18px; height: 1.5px; background: #fff; transition: transform .25s ease, opacity .25s ease; }
.burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
/* ---------- Hero ---------- */
.hero {
position: relative; min-height: 100svh;
display: flex; align-items: flex-end;
padding-top: calc(var(--header-h) + 40px); padding-bottom: 52px;
background: var(--ink); color: #fff; overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img {
width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%;
transform: scale(1.06); animation: heroDrift 22s ease-out forwards;
}
@keyframes heroDrift { to { transform: scale(1); } }
.hero__media::after {
content: ""; position: absolute; inset: 0;
background:
linear-gradient(to right, rgba(8,9,11,.94) 0%, rgba(8,9,11,.86) 34%, rgba(8,9,11,.42) 64%, rgba(8,9,11,.62) 100%),
linear-gradient(to top, rgba(8,9,11,.92) 0%, rgba(8,9,11,0) 46%);
}
.hero .wrap { position: relative; z-index: 1; width: 100%; }
.hero__kicker {
display: inline-flex; align-items: center; gap: 14px;
font-size: 11.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
color: rgba(255,255,255,.72);
}
.hero__kicker::before { content: ""; width: 46px; height: 2px; background: var(--red); }
.hero h1 {
margin: 28px 0 0;
/* 斷行由
決定。上限收到 5.9rem 是量出來的：
「From Product Concept」在 6.1rem 時需要 1130px，容器只有 1120px。 */
font-size: clamp(2.7rem, 6.4vw, 5.9rem);
font-stretch: 115%;
letter-spacing: -.03em;
line-height: .98;
max-width: 100%;
}
.hero h1 em { font-style: normal; color: var(--red-bright); }
.hero__sub {
margin-top: 30px; max-width: 60ch;
font-size: clamp(1.02rem, 1.4vw, 1.24rem);
color: rgba(255,255,255,.76);
line-height: 1.6;
}
.hero__actions { margin-top: 42px; display: flex; flex-wrap: wrap; gap: 14px; }
.hero__meta {
margin-top: clamp(48px, 7vw, 84px);
padding-top: 26px; border-top: 1px solid rgba(255,255,255,.16);
display: flex; flex-wrap: wrap; gap: 14px 42px; align-items: center;
font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.58);
}
.hero__meta b { color: #fff; font-weight: 600; }
/* ---------- Stat strip ---------- */
.stats { background: var(--ink-2); color: #fff; border-top: 1px solid rgba(255,255,255,.08); }
.stats ul { display: grid; grid-template-columns: repeat(4, 1fr); }
.stats li { padding: clamp(34px, 4vw, 52px) 34px clamp(34px, 4vw, 52px) 0; border-left: 1px solid rgba(255,255,255,.12); padding-left: clamp(20px, 2.4vw, 34px); }
.stats li:first-child { border-left: 0; padding-left: 0; }
.stats .num {
font-family: var(--display); font-weight: 700; font-stretch: 112%;
font-size: clamp(2.4rem, 4.4vw, 3.7rem); line-height: 1; letter-spacing: -.03em;
}
.stats .num span { color: var(--red-bright); }
.stats .cap { margin-top: 14px; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.6); }
/* ---------- Vision & Mission ---------- */
.vision { background: var(--paper); border-bottom: 1px solid var(--line); }
.vision__statement {
margin-top: 42px;
font-family: var(--display); font-weight: 700; font-stretch: 114%;
font-size: clamp(2.8rem, 8vw, 7rem); line-height: .96; letter-spacing: -.035em;
max-width: 16ch;
}
.vision__statement em { font-style: normal; color: var(--red); }
.vision__mission {
margin-top: clamp(44px, 6vw, 76px);
display: grid; grid-template-columns: 180px minmax(0, 1fr);
gap: 24px; align-items: start;
padding-top: 30px; border-top: 1px solid var(--line);
max-width: 1000px;
}
.vision__mission .k {
font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
color: var(--red); padding-top: 6px;
}
.vision__mission p { font-size: clamp(1.1rem, 1.8vw, 1.5rem); line-height: 1.45; letter-spacing: -.01em; }
.values {
margin-top: clamp(40px, 5vw, 64px);
display: flex; flex-wrap: wrap; gap: 10px;
}
.values li {
font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
color: var(--text-muted); border: 1px solid var(--line); padding: 11px 18px;
transition: color .25s ease, border-color .25s ease;
}
.values li:hover { color: var(--red); border-color: var(--red); }
/* ---------- Entry points ---------- */
.entry-grid { margin-top: 64px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.entry {
padding: 40px 32px 36px 0; border-left: 1px solid var(--line); padding-left: 32px;
display: flex; flex-direction: column; min-height: 300px;
transition: background .3s ease;
}
.entry:first-child { border-left: 0; padding-left: 0; }
.entry:hover { background: var(--paper-2); }
.entry .idx { font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: .2em; color: var(--red); }
.entry h3 { margin-top: 22px; font-size: 1.32rem; font-stretch: 108%; line-height: 1.18; }
.entry p { margin-top: 14px; font-size: 15px; color: var(--text-muted); line-height: 1.6; }
.entry .tlink { margin-top: auto; padding-top: 26px; align-self: flex-start; }
/* ---------- Process ---------- */
.process { background: var(--paper-2); }
.process-grid {
margin-top: 62px;
display: grid; grid-template-columns: repeat(3, 1fr);
border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.step {
position: relative; padding: 42px 38px 46px;
border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
background: transparent; transition: background .3s ease, transform .3s ease;
}
.step:hover { background: #fff; }
.step__n {
font-family: var(--display); font-weight: 700; font-stretch: 118%;
font-size: 2.6rem; line-height: 1; color: var(--paper-3);
transition: color .3s ease;
}
.step:hover .step__n { color: var(--red); }
.step h3 { margin-top: 20px; font-size: 1.22rem; font-stretch: 106%; }
.step ul { margin-top: 18px; display: flex; flex-direction: column; gap: 9px; }
.step li { position: relative; padding-left: 18px; font-size: 14.5px; color: var(--text-muted); line-height: 1.5; }
.step li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 1.5px; background: var(--red); }
.process-note {
margin-top: 40px; padding: 22px 26px; background: #fff; border-left: 3px solid var(--red);
font-size: 14.5px; color: var(--text-muted); max-width: 78ch;
}
/* ---------- Why ---------- */
.why { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: clamp(40px, 5vw, 84px); align-items: start; }
.why__media { position: relative; position: sticky; top: calc(var(--header-h) + 34px); }
.why__media img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.why__badge {
position: absolute; left: 0; bottom: 0; background: var(--red); color: #fff;
padding: 26px 30px; max-width: 300px;
}
.why__badge .t { font-family: var(--display); font-size: 1.15rem; font-stretch: 108%; line-height: 1.2; }
.why__badge .d { margin-top: 10px; font-size: 13px; color: rgba(255,255,255,.82); line-height: 1.5; }
.why-list { margin-top: 46px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.why-list li { background: var(--paper); padding: 30px 28px; }
.why-list .k { font-family: var(--display); font-size: 1.06rem; font-stretch: 106%; font-weight: 700; }
.why-list .v { margin-top: 10px; font-size: 14.5px; color: var(--text-muted); line-height: 1.55; }
/* ---------- Applications ---------- */
.apps { border-top: 1px solid var(--line); }
.apps-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.app { background: var(--paper); padding: 34px 26px 40px; transition: background .3s ease, color .3s ease; }
.app:hover { background: var(--ink); color: #fff; }
.app .n { font-size: 11.5px; font-weight: 600; letter-spacing: .2em; color: var(--red); }
.app h3 { margin-top: 20px; font-size: 1.06rem; font-stretch: 106%; line-height: 1.25; }
.app p { margin-top: 12px; font-size: 14px; color: var(--text-muted); line-height: 1.55; }
.app:hover p { color: rgba(255,255,255,.66); }
.apps-note { margin-top: 26px; font-size: 14px; color: var(--text-muted); }
/* ---------- Products ---------- */
.products { background: var(--ink); color: #fff; }
.prod-grid { margin-top: 60px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); }
.prod { background: var(--ink); padding: clamp(34px, 4vw, 56px); position: relative; overflow: hidden; transition: background .35s ease; }
.prod:hover { background: var(--ink-3); }
.prod .tag { font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--red-bright); }
.prod h3 { margin-top: 22px; font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-stretch: 110%; }
.prod p { margin-top: 18px; font-size: 15.5px; color: rgba(255,255,255,.66); line-height: 1.6; max-width: 46ch; }
.prod ul { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.prod li { font-size: 12.5px; letter-spacing: .06em; color: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.2); padding: 7px 13px; }
.prod .tlink { margin-top: 34px; }
/* ---------- Global operations ---------- */
.ops { background: var(--paper-2); }
.ops-layout { margin-top: 60px; display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 76px); align-items: center; }
.ops-map { position: relative; background: #fff; border: 1px solid var(--line); padding: 26px 26px 20px; }
.ops-map img { width: 100%; }
.ops-map figcaption { margin-top: 14px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--silver); }
.site-list { display: flex; flex-direction: column; }
.site { padding: 30px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 152px 1fr; gap: 24px; }
.site:last-child { border-bottom: 1px solid var(--line); }
.site .place { font-family: var(--display); font-size: 1.3rem; font-stretch: 110%; font-weight: 700; }
.site .place small { display: block; margin-top: 8px; font-family: var(--body); font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.site .roles { display: flex; flex-wrap: wrap; gap: 7px; }
.site .roles span { font-size: 12.5px; color: var(--text-muted); border: 1px solid var(--line); padding: 6px 12px; background: #fff; }
.site .entity { margin-top: 14px; font-size: 13.5px; color: var(--text-muted); line-height: 1.55; }
.ops-band { margin-top: clamp(48px, 6vw, 76px); position: relative; }
.ops-band img { width: 100%; height: clamp(240px, 30vw, 420px); object-fit: cover; object-position: 50% 62%; }
.ops-band figcaption {
margin-top: 14px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--silver);
}
.ops-quote {
margin-top: 56px; padding-top: 34px; border-top: 2px solid var(--ink);
font-family: var(--display); font-stretch: 108%; font-weight: 600;
font-size: clamp(1.25rem, 2.3vw, 1.9rem); line-height: 1.3; max-width: 34ch;
}
/* ---------- Quality ---------- */
.quality { background: var(--ink); color: #fff; }
.qc-chain { margin-top: 58px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); }
.qc { background: var(--ink); padding: 30px 24px 34px; }
.qc .code { font-family: var(--display); font-weight: 700; font-stretch: 112%; font-size: 1.5rem; color: var(--red-bright); }
.qc .name { margin-top: 12px; font-size: 14px; color: rgba(255,255,255,.72); line-height: 1.45; }
.qc-split { margin-top: 64px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(36px, 5vw, 76px); }
.qc-split h3 { font-size: 1.35rem; font-stretch: 108%; }
.qc-split p { margin-top: 16px; font-size: 15px; color: rgba(255,255,255,.66); line-height: 1.62; }
.cert-grid { margin-top: 26px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); }
.cert { background: var(--ink); padding: 20px 22px; font-size: 14.5px; font-weight: 500; letter-spacing: .01em; }
.cert small { display: block; margin-top: 6px; font-size: 12px; font-weight: 400; color: rgba(255,255,255,.5); letter-spacing: .02em; }
.cert-note { margin-top: 20px; font-size: 13px; color: rgba(255,255,255,.5); line-height: 1.6; }
.cert-note a { color: rgba(255,255,255,.82); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cert-note a:hover { color: #fff; }
/* 460px 會把量測機的上半截（含 DL-4030 的機身標示）切掉。
這一欄在桌機實際有 688px 高，放寬到 720 讓整台機器進得來。 */
.qc-figure img { width: 100%; height: 100%; object-fit: cover; max-height: 720px; }
/* ---------- News ---------- */
.news-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.news { background: var(--paper); padding: 34px 30px 38px; display: flex; flex-direction: column; min-height: 260px; transition: background .3s ease; }
.news:hover { background: var(--paper-2); }
.news .meta { display: flex; gap: 14px; align-items: center; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--silver); }
.news .meta .cat { color: var(--red); font-weight: 600; }
.news h3 { margin-top: 20px; font-size: 1.18rem; font-stretch: 106%; line-height: 1.25; }
.news p { margin-top: 14px; font-size: 14.5px; color: var(--text-muted); line-height: 1.55; }
.news .tlink { margin-top: auto; padding-top: 26px; align-self: flex-start; }
.placeholder-flag {
display: inline-block; margin-top: 26px; padding: 8px 14px;
background: rgba(171,37,46,.08); border-left: 3px solid var(--red);
font-size: 12.5px; color: var(--red-deep);
}
/* ---------- Closing CTA ---------- */
.cta { position: relative; background: var(--ink); color: #fff; overflow: hidden; }
.cta__media { position: absolute; inset: 0; }
.cta__media img { width: 100%; height: 100%; object-fit: cover; opacity: .78; }
.cta__media::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(105deg, rgba(10,11,13,.9) 0%, rgba(10,11,13,.72) 30%,
rgba(10,11,13,.26) 70%, rgba(10,11,13,.12) 100%);
}
.cta .wrap { position: relative; z-index: 1; }
.cta h2 { font-size: clamp(2rem, 4.6vw, 3.7rem); font-stretch: 112%; max-width: 20ch; }
.cta p { margin-top: 24px; font-size: clamp(1rem, 1.35vw, 1.16rem); color: rgba(255,255,255,.72); max-width: 56ch; }
.cta__actions { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; }
.cta__note { margin-top: 34px; font-size: 13.5px; color: rgba(255,255,255,.52); max-width: 62ch; line-height: 1.6; }
/* ---------- Footer ---------- */
.footer { background: #08090B; color: rgba(255,255,255,.62); padding-top: clamp(60px, 7vw, 96px); }
.footer__top { display: grid; grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(0, 1fr)); gap: clamp(30px, 4vw, 60px); padding-bottom: 56px; }
/* 頁尾使用 brand/COMART Logo with Slogan.ai 的官方組合稿，
深底反白依 CIS A-04-02「黑底反白」允許用法。不可自行拼組 Logo 與標語文字。 */
.footer__brand img { width: 168px; }
.footer__brand .footer__lockup { width: 280px; height: auto; }
.footer__since { margin-top: 18px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.foot-site h4 { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #fff; font-family: var(--body); font-weight: 600; }
.foot-site .entity { margin-top: 18px; font-size: 13.5px; color: rgba(255,255,255,.78); font-weight: 500; }
.foot-site address { margin-top: 10px; font-style: normal; font-size: 13.5px; line-height: 1.6; }
.foot-site .contact { margin-top: 14px; font-size: 13.5px; line-height: 1.8; }
.foot-site .contact a:hover { color: #fff; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 10px 28px; padding: 28px 0; border-top: 1px solid rgba(255,255,255,.12); }
.footer__nav a { font-size: 13px; letter-spacing: .06em; }
.footer__nav a:hover { color: #fff; }
.footer__bottom {
display: flex; flex-wrap: wrap; gap: 12px 30px; justify-content: space-between;
padding: 24px 0 34px; border-top: 1px solid rgba(255,255,255,.12);
font-size: 12px; letter-spacing: .04em; color: rgba(255,255,255,.42);
}
/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.reveal.is-in { opacity: 1; transform: none; }
/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
.stats ul { grid-template-columns: repeat(2, 1fr); }
.stats li:nth-child(3) { border-left: 0; padding-left: 0; }
.stats li:nth-child(1), .stats li:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,.12); }
.entry-grid { grid-template-columns: repeat(2, 1fr); }
.entry:nth-child(3) { border-left: 0; padding-left: 0; }
.entry:nth-child(1), .entry:nth-child(2) { border-bottom: 1px solid var(--line); }
.apps-grid { grid-template-columns: repeat(3, 1fr); }
.qc-chain { grid-template-columns: repeat(3, 1fr); }
.footer__top { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
.nav, .lang, .header .btn { display: none; }
.burger { display: flex; }
.header.is-open { background: rgba(10,11,13,.97); }
.mobile-menu {
position: fixed; inset: var(--header-h) 0 auto 0; z-index: 99;
background: rgba(10,11,13,.98); backdrop-filter: blur(14px);
padding: 26px var(--gutter) 40px; display: none; flex-direction: column; gap: 4px;
border-bottom: 1px solid rgba(255,255,255,.12);
}
.mobile-menu.is-open { display: flex; }
.mobile-menu a { color: #fff; font-family: var(--display); font-size: 1.35rem; font-stretch: 108%; font-weight: 600; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.mobile-menu .mm-lang { display: flex; gap: 18px; margin-top: 22px; }
.mobile-menu .mm-lang a { font-family: var(--body); font-size: 12.5px; letter-spacing: .16em; border: 0; color: rgba(255,255,255,.6); padding: 0; }
.process-grid { grid-template-columns: repeat(2, 1fr); }
.why { grid-template-columns: 1fr; }
.why__media img { max-height: 420px; }
.prod-grid { grid-template-columns: 1fr; }
.ops-layout { grid-template-columns: 1fr; }
.qc-split { grid-template-columns: 1fr; }
.qc-figure { order: -1; }
.qc-figure img { max-height: 420px; } /* 單欄時整個寬度，不收會過高 */
.news-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
body { font-size: 16px; }
/* On narrow screens the side-weighted scrim kills the photo — go vertical instead */
.hero__media img { object-position: 66% 42%; }
.hero__media::after {
background: linear-gradient(to top, rgba(8,9,11,.95) 10%, rgba(8,9,11,.5) 62%, rgba(8,9,11,.72) 100%);
}
:root { --header-h: 66px; }
.brand img { width: 128px; }
.hero { min-height: 92svh; }
.hero__meta { gap: 10px 24px; font-size: 11px; }
.stats ul { grid-template-columns: 1fr; }
.stats li { border-left: 0; padding-left: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.stats li:last-child { border-bottom: 0; }
.entry-grid { grid-template-columns: 1fr; }
.entry { border-left: 0; padding-left: 0; min-height: 0; border-bottom: 1px solid var(--line); }
.entry:last-child { border-bottom: 0; }
.process-grid, .apps-grid, .qc-chain, .why-list, .cert-grid { grid-template-columns: 1fr; }
.site { grid-template-columns: 1fr; gap: 14px; }
.vision__mission { grid-template-columns: 1fr; gap: 14px; }
.footer__top { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.reveal { opacity: 1; transform: none; transition: none; }
.hero__media img { animation: none; transform: none; }
* { transition-duration: .01ms !important; }
}
/* =========================================================
內頁（Services / Operations / Products / Quality / …）
========================================================= */
/* 主選單目前頁面 */
.nav a.is-current { color: #fff; }
.nav a.is-current::after { width: 100%; }
/* 語言尚未上線的項目 */
.lang .is-soon, .mobile-menu .mm-lang .is-soon {
font-size: 13px; font-weight: 600; letter-spacing: .1em;
color: rgba(255,255,255,.28); padding: 5px 9px; cursor: not-allowed;
}
.mobile-menu .mm-lang .is-soon { padding: 0; }
/* ---------- 內頁頁首 ---------- */
.page-hero {
position: relative; background: var(--ink); color: #fff; overflow: hidden;
padding: calc(var(--header-h) + clamp(56px, 8vw, 104px)) 0 clamp(52px, 7vw, 92px);
}
.page-hero__media { position: absolute; inset: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.page-hero__media::after {
content: ""; position: absolute; inset: 0;
/* 左側維持足夠暗度讓白字可讀，右側大幅放亮讓照片看得出來 */
background:
/* 底部小字（meta 那行）延伸到右側亮區，需要自己的遮罩才有足夠對比 */
linear-gradient(to top, rgba(8,9,11,.82) 0%, rgba(8,9,11,.4) 16%, rgba(8,9,11,0) 38%),
linear-gradient(100deg, rgba(8,9,11,.9) 0%, rgba(8,9,11,.74) 30%,
rgba(8,9,11,.28) 68%, rgba(8,9,11,.14) 100%);
}
.page-hero .wrap { position: relative; z-index: 1; }
.crumbs { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.crumbs a:hover { color: #fff; }
.crumbs span { color: rgba(255,255,255,.3); }
.page-hero h1 {
margin-top: 26px;
font-size: clamp(2.2rem, 5.4vw, 4.3rem); font-stretch: 112%; letter-spacing: -.03em; line-height: 1.02;
max-width: 20ch;
}
.page-hero__lead {
margin-top: 26px; max-width: 62ch;
font-size: clamp(1.02rem, 1.4vw, 1.2rem); color: rgba(255,255,255,.72); line-height: 1.6;
}
.page-hero__meta {
margin-top: clamp(34px, 5vw, 54px); padding-top: 24px; border-top: 1px solid rgba(255,255,255,.16);
display: flex; flex-wrap: wrap; gap: 12px 38px;
font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.75);
}
/* ---------- 內頁通用區塊 ---------- */
.prose { max-width: 68ch; }
.prose p + p { margin-top: 20px; }
.prose p { font-size: clamp(1rem, 1.25vw, 1.1rem); color: var(--text-muted); line-height: 1.7; }
.split { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.split + .split { margin-top: clamp(48px, 6vw, 86px); padding-top: clamp(48px, 6vw, 86px); border-top: 1px solid var(--line); }
.split__label { font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--red); padding-top: 8px; }
.split h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-stretch: 108%; }
.split h3 { font-size: 1.16rem; font-stretch: 106%; margin-top: 30px; }
/* 條列（能力／流程項目） */
.speclist { margin-top: 26px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.speclist li { background: var(--paper); padding: 22px 24px; font-size: 15px; line-height: 1.5; }
.speclist li b { display: block; font-family: var(--display); font-size: 1.02rem; font-weight: 700; margin-bottom: 8px; }
.on-dark .speclist { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.14); }
.on-dark .speclist li { background: var(--ink); color: rgba(255,255,255,.74); }
/* 前後頁導覽 */
.pager { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.pager a { background: var(--paper); padding: 34px 30px; transition: background .3s ease; }
.pager a:hover { background: var(--paper-2); }
.pager .dir { font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--red); }
.pager .t { margin-top: 12px; font-family: var(--display); font-size: 1.2rem; font-stretch: 106%; font-weight: 700; }
.pager a.is-next { text-align: right; }
/* 內頁結尾 CTA */
.endcta { background: var(--ink); color: #fff; padding: clamp(60px, 8vw, 110px) 0; }
.endcta h2 { font-size: clamp(1.8rem, 3.6vw, 3rem); font-stretch: 110%; max-width: 22ch; }
.endcta p { margin-top: 20px; font-size: 1.05rem; color: rgba(255,255,255,.68); max-width: 56ch; }
.endcta .row { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px; }
/* 表單 */
.form { margin-top: 46px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 900px; }
.field { display: flex; flex-direction: column; gap: 9px; }
.field.is-wide { grid-column: 1 / -1; }
.field label { font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }
.field input, .field select, .field textarea {
font-family: var(--body); font-size: 15px; color: var(--text);
padding: 14px 16px; border: 1px solid var(--line); background: #fff; border-radius: 0;
transition: border-color .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--red); }
.field textarea { min-height: 150px; resize: vertical; }
.form__note { grid-column: 1 / -1; font-size: 13.5px; color: var(--text-muted); line-height: 1.6; }
.form__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
@media (max-width: 980px) {
.split { grid-template-columns: 1fr; gap: 18px; }
.speclist { grid-template-columns: 1fr; }
.form { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
.pager { grid-template-columns: 1fr; }
.pager a.is-next { text-align: left; }
}
/* ---------- 產品清單 ---------- */
.prod-filters { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
font-family: var(--body); font-size: 12px; font-weight: 600; letter-spacing: .14em;
text-transform: uppercase; color: var(--text-muted);
background: transparent; border: 1px solid var(--line); padding: 11px 18px; cursor: pointer;
transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.chip:hover { color: var(--red); border-color: var(--red); }
.chip.is-on { color: #fff; background: var(--ink); border-color: var(--ink); }
.prod-catalogue {
margin-top: 34px;
display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
background: var(--line); border: 1px solid var(--line);
}
.prod-state { grid-column: 1 / -1; background: var(--paper); padding: 46px 30px; color: var(--text-muted); font-size: 15px; }
.prod-state.is-error { color: var(--red-deep); }
.pcard { background: var(--paper); display: flex; flex-direction: column; transition: background .3s ease; }
.pcard:hover { background: var(--paper-2); }
.pcard__img { aspect-ratio: 4 / 3; background: var(--paper-3); overflow: hidden; }
.pcard__img img { width: 100%; height: 100%; object-fit: cover; }
.pcard__img.is-empty {
background: repeating-linear-gradient(135deg, var(--paper-2) 0 12px, var(--paper-3) 12px 24px);
}
.pcard__body { padding: 22px 22px 26px; display: flex; flex-direction: column; }
.pcard__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
.pcard__kind { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--red); }
.pcard__cat { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--silver); }
.pcard h3 {
margin-top: 14px; font-size: 1.02rem; font-stretch: 106%; line-height: 1.3;
}
/* 規格：每項一行，標籤靠左固定寬度 */
.pcard__specs { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.pcard__specs > div {
display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px;
padding: 5px 0;
}
.pcard__specs dt {
font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
color: var(--silver); padding-top: 2px;
}
.pcard__specs dd {
margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text-muted);
overflow-wrap: anywhere;
}
@media (max-width: 1180px) { .prod-catalogue { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) { .prod-catalogue { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .prod-catalogue { grid-template-columns: 1fr; } }
/* ---------- 設備清單 ---------- */
.eqnav { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 10px; }
.eqnav a {
font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
color: var(--text-muted); border: 1px solid var(--line); padding: 11px 18px; background: #fff;
transition: color .2s ease, border-color .2s ease;
}
.eqnav a:hover { color: var(--red); border-color: var(--red); }
.eqgroup { margin-top: 44px; background: #fff; border: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 20px); }
.eqgroup__head { padding: 22px 26px; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.eqgroup__head h3 { font-size: 1.14rem; font-stretch: 106%; }
.eqgroup__count { font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.eqtable { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.eqtable th {
text-align: left; padding: 13px 26px; background: var(--paper-2); border-bottom: 1px solid var(--line);
font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted);
}
.eqtable td { padding: 13px 26px; border-bottom: 1px solid var(--line); vertical-align: top; }
.eqtable tr:last-child td { border-bottom: 0; }
.eqtable tbody tr:hover { background: var(--paper-2); }
.eqtable .mdl { color: var(--text-muted); font-size: 13.5px; }
.eqtable .qty { width: 80px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.eqtable th:last-child { text-align: right; }
@media (max-width: 700px) {
.eqtable th, .eqtable td { padding: 11px 16px; }
.eqtable .mdl { font-size: 12.5px; }
}
/* ---------- 里程碑時間軸 ---------- */
.mslist { margin-top: 52px; list-style: none; padding: 0; }
.ms {
display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 28px;
padding: 26px 0; border-top: 1px solid rgba(255,255,255,.14);
position: relative;
}
.ms:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.ms__year {
font-family: var(--display); font-weight: 700; font-stretch: 112%;
font-size: 1.6rem; line-height: 1; letter-spacing: -.02em; color: var(--red-bright);
padding-top: 2px;
}
.ms__body h3 { font-size: 1.12rem; font-stretch: 106%; }
.ms__body p { margin-top: 9px; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.62); max-width: 62ch; }
/* 淺色區塊內的版本 */
.section:not(.on-dark) .ms { border-color: var(--line); }
.section:not(.on-dark) .ms__body p { color: var(--text-muted); }
@media (max-width: 700px) {
.ms { grid-template-columns: 1fr; gap: 10px; }
.ms__year { font-size: 1.35rem; }
}
/* ---------- 表單送出狀態 ---------- */
.placeholder-flag.is-ok {
background: rgba(30,122,70,.07); border-left-color: #1E7A46; color: #14562F;
}
.placeholder-flag.is-error {
background: rgba(171,37,46,.08); border-left-color: var(--red); color: var(--red-deep);
}
.placeholder-flag a { text-decoration: underline; }
/* ---------- Hero 淺色變體（適合白底產品或展場渲染圖） ----------
目前未使用。要切換成淺色 hero 需同時改兩處：
src/pages/home.html → class="hero hero--light"
src/partials/header.html