/* ══════════════════════════════════════ inner.css — 內頁共用補充樣式 ══════════════════════════════════════ */ /* ── 內頁 Hero ── */ .page-hero { padding: 96px 5% 48px; position: relative; overflow: hidden; } .page-hero--teal { background: linear-gradient(160deg,#f0fbff 0%,#ffffff 60%,#f0f9ff 100%); } .page-hero--purple { background: linear-gradient(160deg,#faf5ff 0%,#ffffff 60%,#f5f3ff 100%); } .page-hero--amber { background: linear-gradient(160deg,#fffbeb 0%,#ffffff 60%,#fef9ee 100%); } .page-hero--blue { background: linear-gradient(160deg,#eff6ff 0%,#ffffff 60%,#f0f4ff 100%); } .page-hero-inner { position:relative; z-index:1; max-width:1200px; margin:0 auto; } .breadcrumb { display:flex; align-items:center; gap:0.5rem; font-size:0.78rem; color:var(--muted); margin-bottom:1.5rem; flex-wrap:wrap; } .breadcrumb a { color:var(--muted); transition:color 0.2s; } .breadcrumb a:hover { color:var(--primary); } .breadcrumb-sep { color:var(--faint); } .breadcrumb-current { color:var(--sub); font-weight:500; } .page-title { font-size:clamp(2rem,4vw,3.2rem); font-weight:900; line-height:1.18; letter-spacing:-0.03em; margin-bottom:1rem; } .page-sub { color:var(--muted); font-size:1.05rem; line-height:1.8; max-width:560px; margin-bottom:2rem; } /* ── 兩欄 ── */ .two-col { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; } .two-col--center { align-items:center; } .two-col--stretch { align-items:stretch; } /* ── 功能列表 ── */ .feature-list { display:flex; flex-direction:column; gap:1rem; } .feature-item { display:flex; align-items:flex-start; gap:1rem; padding:1.2rem; background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-card); transition:transform 0.2s,box-shadow 0.2s; } .feature-item:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); } .feature-item-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; } .fi-teal { background:rgba(8,145,178,0.1); } .fi-amber { background:rgba(217,119,6,0.1); } .fi-purple { background:rgba(124,58,237,0.1); } .fi-red { background:rgba(232,93,74,0.1); } .fi-green { background:rgba(5,150,105,0.1); } .fi-blue { background:rgba(37,99,235,0.1); } .feature-item-title { font-size:0.95rem; font-weight:700; margin-bottom:0.3rem; } .feature-item-desc { font-size:0.83rem; color:var(--muted); line-height:1.65; } /* ── 流程步驟 ── */ .flow-steps { display:flex; flex-direction:column; gap:0; position:relative; } .flow-step { display:flex; gap:1.2rem; align-items:flex-start; position:relative; padding-bottom:2rem; } .flow-step:last-child { padding-bottom:0; } .flow-step-line { position:absolute; left:19px; top:40px; bottom:0; width:2px; background:linear-gradient(to bottom,var(--border),transparent); } .flow-step:last-child .flow-step-line { display:none; } .flow-step-num { width:40px; height:40px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:0.9rem; position:relative; z-index:1; } .fsn-teal { background:rgba(8,145,178,0.1); border:2px solid rgba(8,145,178,0.25); color:var(--teal); } .fsn-amber { background:rgba(217,119,6,0.1); border:2px solid rgba(217,119,6,0.25); color:var(--amber); } .fsn-purple { background:rgba(124,58,237,0.1); border:2px solid rgba(124,58,237,0.25); color:var(--purple); } .fsn-red { background:rgba(232,93,74,0.1); border:2px solid rgba(232,93,74,0.25); color:var(--red); } .fsn-green { background:rgba(5,150,105,0.1); border:2px solid rgba(5,150,105,0.25); color:var(--green); } .flow-step-title { font-size:1rem; font-weight:700; margin-bottom:0.4rem; padding-top:0.5rem; } .flow-step-desc { font-size:0.85rem; color:var(--muted); line-height:1.7; } /* ── FAQ ── */ .faq-list { display:flex; flex-direction:column; gap:0.6rem; margin-top:2rem; } .faq-item { background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; } .faq-question { width:100%; display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.4rem; font-size:0.95rem; font-weight:700; color:var(--text); background:none; border:none; cursor:pointer; text-align:left; font-family:inherit; gap:1rem; } .faq-question:hover { background:var(--hover); } .faq-icon { font-size:1.1rem; color:var(--primary); flex-shrink:0; transition:transform 0.25s; font-style:normal; } .faq-item.open .faq-icon { transform:rotate(45deg); } .faq-answer { display:none; padding:0 1.4rem 1.2rem; font-size:0.88rem; color:var(--muted); line-height:1.8; border-top:1px solid var(--border); } .faq-item.open .faq-answer { display:block; } /* ── 場景 CTA 帶 ── */ .scene-cta-band { background:var(--primary); border-radius:var(--r-xl); padding:2.5rem 3rem; display:flex; align-items:center; justify-content:space-between; gap:2rem; } .scene-cta-title { font-size:1.4rem; font-weight:900; color:#fff; margin-bottom:0.4rem; } .scene-cta-sub { font-size:0.88rem; color:rgba(255,255,255,0.75); } .scene-cta-btns { display:flex; gap:0.8rem; flex-shrink:0; flex-wrap:wrap; } .btn-white { background:#fff; color:var(--primary); font-weight:700; display:inline-flex; align-items:center; gap:8px; padding:0.9rem 1.8rem; border-radius:var(--r-md); font-size:1rem; border:none; cursor:pointer; transition:transform 0.15s,background 0.15s; text-decoration:none; font-family:inherit; } .btn-white:hover { background:#f0f4ff; transform:translateY(-2px); } .btn-outline-white { background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.5); font-weight:700; display:inline-flex; align-items:center; gap:8px; padding:0.9rem 1.8rem; border-radius:var(--r-md); font-size:1rem; cursor:pointer; transition:transform 0.15s,background 0.15s,border-color 0.15s; text-decoration:none; font-family:inherit; } .btn-outline-white:hover { background:rgba(255,255,255,0.1); border-color:#fff; transform:translateY(-2px); } /* ── 功能模組大卡 ── */ .module-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3rem; } .module-card { background:#fff; border:1px solid var(--border); border-radius:var(--r-xl); padding:2rem; box-shadow:var(--shadow-card); transition:transform 0.25s,box-shadow 0.25s; position:relative; overflow:hidden; } .module-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); } .module-card-accent { position:absolute; top:0; left:0; right:0; height:3px; } .mc-accent-teal { background:linear-gradient(90deg,var(--teal),transparent); } .mc-accent-amber { background:linear-gradient(90deg,var(--amber),transparent); } .mc-accent-purple { background:linear-gradient(90deg,var(--purple),transparent); } .mc-accent-red { background:linear-gradient(90deg,var(--red),transparent); } .mc-accent-green { background:linear-gradient(90deg,var(--green),transparent); } .mc-accent-blue { background:linear-gradient(90deg,var(--primary),transparent); } .module-icon { font-size:2rem; margin-bottom:1rem; } .module-title { font-size:1.1rem; font-weight:900; margin-bottom:0.5rem; } .module-desc { font-size:0.85rem; color:var(--muted); line-height:1.7; margin-bottom:1.2rem; } .module-tags { display:flex; flex-wrap:wrap; gap:0.4rem; } /* ── 比較表 ── */ .compare-table { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-card); font-size:0.88rem; } .compare-table th { background:var(--deep); padding:0.9rem 1.2rem; text-align:left; font-weight:700; font-size:0.8rem; color:var(--sub); border-bottom:1px solid var(--border); } .compare-table td { padding:0.85rem 1.2rem; border-bottom:1px solid var(--border); color:var(--sub); vertical-align:top; } .compare-table tr:last-child td { border-bottom:none; } .compare-table tr:hover td { background:var(--hover); } .ct-check { color:var(--green); font-weight:700; } .ct-cross { color:var(--faint); } .table-scroll { overflow-x:auto; } /* ── Value Board（場景視覺看板）── */ .value-board { background:#fff; border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-card); overflow:hidden; } .vb-header-label { font-size:0.72rem; font-weight:700; letter-spacing:0.06em; color:var(--muted); padding:0.9rem 1.2rem; background:var(--deep); border-bottom:1px solid var(--border); } .vb-row { display:flex; align-items:center; justify-content:space-between; gap:0.8rem; padding:0.75rem 1.2rem; border-bottom:1px solid var(--border); } .vb-label { font-size:0.85rem; font-weight:500; color:var(--sub); } .vb-icon { font-size:1rem; } .vb-icon--amber { color:var(--amber); } .vb-icon--teal { color:var(--teal); } .vb-icon--purple { color:var(--purple); } .vb-status { font-size:0.78rem; font-weight:700; padding:0.2rem 0.6rem; border-radius:var(--r-pill); } .vs-ok { background:rgba(5,150,105,0.1); color:var(--green); } .vs-sync { background:rgba(8,145,178,0.1); color:var(--teal); } .vs-warn { background:rgba(217,119,6,0.1); color:var(--amber); } .vb-result-box { display:flex; align-items:center; gap:1rem; padding:1rem 1.2rem; background:var(--primary-light); border-top:1px solid rgba(37,99,235,0.15); } .vb-result-icon { font-size:1.5rem; flex-shrink:0; } .vb-result-title { font-size:0.95rem; font-weight:900; color:var(--text); } .vb-result-sub { font-size:0.78rem; color:var(--muted); } /* ── 痛點卡片 ── */ .pain-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-top:3rem; } .pain-card { background:#fff; border:1px solid var(--border); border-radius:var(--r-xl); padding:1.6rem; box-shadow:var(--shadow-card); position:relative; transition:transform 0.2s,box-shadow 0.2s; } .pain-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); } .pain-icon { font-size:1.8rem; margin-bottom:0.8rem; } .pain-title { font-size:0.95rem; font-weight:900; margin-bottom:0.5rem; color:var(--text); } .pain-desc { font-size:0.83rem; color:var(--muted); line-height:1.7; } .pain-tag { display:inline-block; margin-top:0.8rem; font-size:0.65rem; font-weight:700; padding:0.2rem 0.6rem; border-radius:var(--r-pill); background:rgba(232,93,74,0.1); color:var(--red); letter-spacing:0.04em; } /* ── why-card ── */ .why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; } .why-card { background:#fff; border:1px solid var(--border); border-radius:var(--r-xl); padding:1.8rem; box-shadow:var(--shadow-card); } .why-icon { font-size:1.8rem; margin-bottom:0.8rem; } .why-title { font-size:1rem; font-weight:900; margin-bottom:0.5rem; } .why-desc { font-size:0.85rem; color:var(--muted); line-height:1.7; } /* ── 成功案例 ── */ .case-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; } .case-card { background:#fff; border:1px solid var(--border); border-radius:var(--r-xl); padding:1.8rem; box-shadow:var(--shadow-card); transition:transform 0.2s,box-shadow 0.2s; } .case-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); } .case-icon-row { display:flex; align-items:center; gap:0.75rem; margin-bottom:1rem; } .case-avatar { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; } .av-teal { background:rgba(8,145,178,0.1); } .av-amber { background:rgba(217,119,6,0.1); } .av-purple { background:rgba(124,58,237,0.1); } .case-tag { font-size:0.72rem; font-weight:700; padding:0.25rem 0.7rem; border-radius:var(--r-pill); } .ct-teal { background:rgba(8,145,178,0.1); color:var(--teal); } .ct-amber { background:rgba(217,119,6,0.1); color:var(--amber); } .ct-purple { background:rgba(124,58,237,0.1); color:var(--purple); } .case-quote { font-size:0.88rem; color:var(--sub); line-height:1.8; font-style:italic; margin-bottom:1rem; border-left:3px solid var(--primary-light); padding-left:0.8rem; } .case-meta-name { font-size:0.88rem; font-weight:700; color:var(--text); } .case-meta-role { font-size:0.78rem; color:var(--muted); margin-bottom:1rem; } .case-result { display:flex; gap:1.2rem; padding-top:1rem; border-top:1px solid var(--border); } .cr-item { text-align:center; } .cr-num { font-size:1.3rem; font-weight:900; line-height:1; } .cr-num--teal { color:var(--teal); } .cr-num--amber { color:var(--amber); } .cr-num--red { color:var(--red); } .cr-label { font-size:0.68rem; color:var(--muted); margin-top:0.2rem; } /* ── 信任數字 ── */ .trust-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; } .trust-stat { text-align:center; padding:2rem 1rem; background:#fff; border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-card); } .ts-num { font-size:2.4rem; font-weight:900; line-height:1; margin-bottom:0.5rem; } .ts-num--teal { color:var(--teal); } .ts-num--amber { color:var(--amber); } .ts-num--red { color:var(--red); } .ts-num--purple { color:var(--purple); } .ts-label { font-size:0.82rem; color:var(--muted); } /* ── 聯絡資訊 ── */ .contact-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; } .contact-card { padding:1.5rem; background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-card); text-align:center; } .contact-icon { font-size:1.8rem; margin-bottom:0.8rem; } .contact-label { font-size:0.72rem; font-weight:700; color:var(--muted); letter-spacing:0.06em; text-transform:uppercase; margin-bottom:0.4rem; } .contact-value { font-size:0.95rem; font-weight:700; color:var(--text); } .contact-value a { color:var(--primary); } .contact-value a:hover { text-decoration:underline; } /* ── 認證區塊 ── */ .cert-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:3rem; } .cert-card { background:#fff; border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-card); overflow:hidden; transition:transform 0.25s,box-shadow 0.25s; display:flex; flex-direction:column; } .cert-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); } .cert-card--wide { grid-column:1 / -1; } .cert-badge-row { display:flex; align-items:center; gap:0.75rem; padding:0.9rem 1.4rem; background:var(--deep); border-bottom:1px solid var(--border); } .cert-badge { font-size:0.68rem; font-weight:700; letter-spacing:0.06em; padding:0.25rem 0.7rem; border-radius:var(--r-pill); } .cert-badge--blue { background:rgba(37,99,235,0.1); color:var(--primary); border:1px solid rgba(37,99,235,0.2); } .cert-badge--teal { background:rgba(8,145,178,0.1); color:var(--teal); border:1px solid rgba(8,145,178,0.2); } .cert-badge--green { background:rgba(5,150,105,0.1); color:var(--green); border:1px solid rgba(5,150,105,0.2); } .cert-badge--amber { background:rgba(217,119,6,0.1); color:var(--amber); border:1px solid rgba(217,119,6,0.2); } .cert-issuer { font-size:0.78rem; color:var(--muted); font-weight:500; } .cert-img-wrap { padding:1.2rem 1.4rem 0; display:flex; align-items:center; justify-content:center; background:#fff; } .cert-img { width:100%; max-width:380px; height:auto; border-radius:var(--r-md); display:block; } .cert-img-wrap--cert { padding:1.2rem; flex-shrink:0; width:340px; } .cert-img--doc { border:1px solid var(--border); box-shadow:0 4px 16px rgba(15,23,42,0.1); border-radius:var(--r-lg); max-width:100%; } .cert-wide-inner { display:flex; align-items:flex-start; gap:0; flex:1; } .cert-body { padding:1.2rem 1.4rem 1.4rem; flex:1; } .cert-title { font-size:1rem; font-weight:900; margin-bottom:0.5rem; color:var(--text); } .cert-desc { font-size:0.85rem; color:var(--muted); line-height:1.75; margin-bottom:1rem; } .cert-points { display:flex; flex-direction:column; gap:0.45rem; } .cert-point { display:flex; align-items:center; gap:0.5rem; font-size:0.83rem; color:var(--sub); } .cert-point-icon { color:var(--green); font-weight:700; flex-shrink:0; } .cert-meta { display:flex; flex-direction:column; gap:0.55rem; background:var(--deep); border:1px solid var(--border); border-radius:var(--r-md); padding:1rem 1.1rem; margin-top:0.8rem; } .cert-meta-item { display:flex; align-items:baseline; gap:0.6rem; font-size:0.83rem; } .cert-meta-label { color:var(--muted); font-size:0.72rem; font-weight:700; min-width:70px; flex-shrink:0; } .cert-meta-value { color:var(--sub); font-weight:500; } /* 榮譽獎項影片（改為縮圖連結至 YouTube） */ .cert-card--video .cert-body { text-align:center; } .cert-video-wrap { position:relative; display:block; width:100%; max-width:720px; margin:1.2rem auto 0; padding-bottom:min(56.25%,405px); height:0; overflow:hidden; border-radius:var(--r-md); background:#000; } .cert-video-thumb { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; } .cert-video-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:64px; height:64px; border-radius:50%; background:rgba(0,0,0,0.6); color:#fff; display:flex; align-items:center; justify-content:center; transition:background 0.2s,transform 0.2s; } .cert-video-wrap:hover .cert-video-play { background:var(--red,#e85d4a); transform:translate(-50%,-50%) scale(1.08); } .cert-trust-band { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0; margin-top:2rem; background:#fff; border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-card); overflow:hidden; } .cert-trust-item { display:flex; flex-direction:column; align-items:center; gap:0.4rem; padding:1.2rem 1.8rem; flex:1; min-width:140px; } .cert-trust-icon { font-size:1.4rem; } .cert-trust-text { font-size:0.78rem; font-weight:700; color:var(--sub); text-align:center; } .cert-trust-sep { width:1px; height:40px; background:var(--border); flex-shrink:0; } /* ── 雲端架構 ── */ .infra-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:3rem; } .infra-card { background:#fff; border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-card); overflow:hidden; transition:transform 0.25s,box-shadow 0.25s; } .infra-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); } .infra-logo-band { display:flex; align-items:center; justify-content:center; padding:1.6rem 2rem; border-bottom:1px solid var(--border); } .infra-logo-band--azure { background:linear-gradient(135deg,#f0f8ff 0%,#e8f4fd 100%); } .infra-logo-band--aws { background:linear-gradient(135deg,#fffbf0 0%,#fef9ec 100%); } .infra-logo { height:52px; width:auto; display:block; object-fit:contain; } .infra-body { padding:1.6rem; } .infra-location-row { display:flex; align-items:flex-start; gap:0.6rem; margin-bottom:1rem; padding:0.7rem 0.9rem; background:var(--deep); border:1px solid var(--border); border-radius:var(--r-md); } .infra-location-icon { font-size:1rem; flex-shrink:0; margin-top:1px; } .infra-location-name { font-size:0.88rem; font-weight:700; color:var(--text); } .infra-location-sub { font-size:0.72rem; color:var(--muted); margin-top:1px; } .infra-title { font-size:1.05rem; font-weight:900; margin-bottom:0.6rem; } .infra-desc { font-size:0.85rem; color:var(--muted); line-height:1.75; margin-bottom:1.2rem; } .infra-specs { display:flex; flex-direction:column; gap:0.65rem; } .infra-spec-item { display:flex; align-items:flex-start; gap:0.75rem; } .infra-spec-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:0.9rem; flex-shrink:0; } .infra-spec-label { font-size:0.68rem; color:var(--muted); font-weight:700; text-transform:uppercase; } .infra-spec-value { font-size:0.83rem; color:var(--sub); font-weight:500; } .infra-arch-band { display:flex; align-items:center; justify-content:center; gap:0; margin-top:2rem; padding:1.8rem 2rem; background:#fff; border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-card); flex-wrap:wrap; } .infra-arch-node { display:flex; flex-direction:column; align-items:center; gap:0.4rem; min-width:100px; } .infra-arch-icon { width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.6rem; } .infra-arch-node--user .infra-arch-icon { background:rgba(37,99,235,0.08); border:1px solid rgba(37,99,235,0.2); } .infra-arch-node--azure .infra-arch-icon, .infra-arch-node--aws .infra-arch-icon { background:var(--deep); border:1px solid var(--border); overflow:hidden; padding:0; } .infra-arch-logo { width:100%; height:100%; object-fit:contain; padding:6px; } .infra-arch-label { font-size:0.85rem; font-weight:700; color:var(--text); } .infra-arch-sub { font-size:0.7rem; color:var(--muted); } .infra-arch-arrow { display:flex; flex-direction:column; align-items:center; gap:0.3rem; padding:0 1rem; flex-shrink:0; } .infra-arch-arrow-line { width:80px; height:2px; background:linear-gradient(90deg,var(--primary),var(--teal)); position:relative; border-radius:2px; } .infra-arch-arrow-line::after { content:'›'; position:absolute; right:-6px; top:-9px; color:var(--teal); font-size:1.2rem; font-weight:700; } .infra-arch-arrow-tip { font-size:0.65rem; color:var(--muted); white-space:nowrap; font-weight:500; } /* ── 定價頁 ── */ .pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; align-items:start; } .pricing-card { background:#fff; border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-card); overflow:hidden; position:relative; transition:transform 0.25s,box-shadow 0.25s; } .pricing-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); } .pricing-card--featured { border-color:var(--primary); box-shadow:0 0 0 2px rgba(37,99,235,0.15),var(--shadow-lg); transform:translateY(-8px); } .pricing-card--featured:hover { transform:translateY(-12px); } .pricing-popular-badge { position:absolute; top:-1px; left:50%; transform:translateX(-50%); background:var(--primary); color:#fff; font-size:0.68rem; font-weight:700; padding:0.25rem 0.9rem; border-radius:0 0 var(--r-md) var(--r-md); letter-spacing:0.06em; } .pricing-card-head { padding:1.8rem 1.6rem 1.4rem; text-align:center; } .pricing-head--teal { background:rgba(8,145,178,0.06); border-bottom:1px solid rgba(8,145,178,0.15); } .pricing-head--primary { background:rgba(37,99,235,0.06); border-bottom:1px solid rgba(37,99,235,0.15); } .pricing-head--purple { background:rgba(124,58,237,0.06); border-bottom:1px solid rgba(124,58,237,0.15); } .pricing-name { font-size:1.1rem; font-weight:900; margin-bottom:0.3rem; } .pricing-tag { font-size:0.75rem; color:var(--muted); } .pricing-body { padding:1.6rem; } .pricing-price { text-align:center; margin-bottom:0.6rem; } .pricing-amount { font-size:1.6rem; font-weight:900; color:var(--text); } .pricing-desc { font-size:0.8rem; color:var(--muted); text-align:center; margin-bottom:1.4rem; } .pricing-features { list-style:none; display:flex; flex-direction:column; gap:0.6rem; margin-bottom:1.6rem; } .pf-item { font-size:0.83rem; display:flex; align-items:center; gap:0.6rem; } .pf-item::before { font-weight:700; flex-shrink:0; } .pf-yes::before { content:'✓'; color:var(--green); } .pf-no::before { content:'✗'; color:var(--faint); } .pf-no { color:var(--faint); } .pricing-btn { width:100%; justify-content:center; } .pricing-note { text-align:center; font-size:0.82rem; color:var(--muted); margin-top:2rem; } .pricing-note a { color:var(--primary); } .pricing-note a:hover { text-decoration:underline; } /* ── 試用申請 ── */ .trial-card { background:#fff; border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-card); overflow:hidden; display:flex; flex-direction:column; height:100%; } .trial-card-head { padding:2rem; display:flex; flex-direction:column; align-items:center; text-align:center; gap:0.5rem; } .trial-head--primary { background:rgba(37,99,235,0.06); border-bottom:1px solid rgba(37,99,235,0.15); } .trial-head--teal { background:rgba(8,145,178,0.06); border-bottom:1px solid rgba(8,145,178,0.15); } .trial-icon { font-size:2rem; } .trial-title { font-size:1.3rem; font-weight:900; } .trial-subtitle { font-size:0.82rem; color:var(--muted); } .trial-body { padding:1.8rem; display:flex; flex-direction:column; flex:1; } .trial-desc { font-size:0.88rem; color:var(--muted); line-height:1.8; margin-bottom:1.2rem; } .trial-points { list-style:none; display:flex; flex-direction:column; gap:0.5rem; margin-bottom:1.8rem; } .trial-point { display:flex; align-items:center; gap:0.6rem; font-size:0.85rem; color:var(--sub); } .tp-icon { color:var(--green); font-weight:700; flex-shrink:0; } .trial-form-group { display:flex; flex-direction:column; gap:0.4rem; margin-bottom:1rem; } .trial-label { font-size:0.78rem; font-weight:700; color:var(--sub); } .trial-input { padding:0.7rem 0.9rem; border:1px solid var(--border); border-radius:var(--r-md); font-size:0.88rem; font-family:inherit; color:var(--text); background:#fff; transition:border-color 0.2s,box-shadow 0.2s; width:100%; } .trial-input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,0.1); } .trial-input.input--error { border-color:var(--red); } .trial-select { cursor:pointer; } .trial-form-msg { font-size:0.82rem; min-height:1.2rem; margin-bottom:0.5rem; } .trial-form-msg.msg--error { color:var(--red); } .trial-form-msg.msg--success { color:var(--green); } .trial-submit { width:100%; justify-content:center; margin-top:0.5rem; } .trial-privacy { font-size:0.72rem; color:var(--faint); text-align:center; margin-top:0.8rem; } .consult-options { display:flex; flex-direction:column; gap:0.8rem; margin-top:auto; padding-top:1.5rem; margin-bottom:0; } .consult-btn { display:flex; align-items:center; gap:1rem; padding:0.9rem 1.2rem; border-radius:var(--r-lg); text-decoration:none; transition:transform 0.2s,box-shadow 0.2s; border:1px solid var(--border); } .consult-btn:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); } .consult-btn--line { background:#06c755; border-color:#06c755; } .consult-btn--phone { background:#fff; } .consult-line-img { height:36px; width:auto; } .consult-phone-icon { font-size:1.4rem; } .consult-phone-num { font-size:1rem; font-weight:700; color:var(--text); } .consult-phone-time { font-size:0.72rem; color:var(--muted); } .consult-divider { display:flex; align-items:center; gap:0.8rem; color:var(--faint); font-size:0.78rem; } .consult-divider::before,.consult-divider::after { content:''; flex:1; height:1px; background:var(--border); } .consult-note { display:flex; align-items:flex-start; gap:0.6rem; background:var(--primary-light); border:1px solid rgba(37,99,235,0.15); border-radius:var(--r-md); padding:0.9rem 1rem; font-size:0.82rem; color:var(--sub); line-height:1.7; } .cn-icon { flex-shrink:0; font-size:1rem; } /* ── 教學中心 ── */ .learn-search-bar { display:flex; gap:0.8rem; margin-bottom:2rem; flex-wrap:wrap; } .learn-search-input { flex:1; min-width:200px; padding:0.75rem 1rem; border:1px solid var(--border); border-radius:var(--r-md); font-size:0.9rem; font-family:inherit; color:var(--text); background:#fff; transition:border-color 0.2s,box-shadow 0.2s; } .learn-search-input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,0.1); } .learn-filter-bar { display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:2.5rem; } .learn-filter-btn { padding:0.4rem 1rem; border-radius:var(--r-pill); font-size:0.78rem; font-weight:700; border:1px solid var(--border); background:#fff; color:var(--muted); cursor:pointer; transition:all 0.15s; font-family:inherit; } .learn-filter-btn:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-light); } .learn-filter-btn.active { background:var(--primary); color:#fff; border-color:var(--primary); } .learn-article-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2rem; } .learn-article-card { background:#fff; border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-card); padding:1.6rem; text-decoration:none; color:inherit; transition:transform 0.2s,box-shadow 0.2s; display:flex; flex-direction:column; gap:0.7rem; position:relative; overflow:hidden; } .learn-article-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--primary),transparent); } .learn-article-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); } .lac-top { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; } .lac-title { font-size:0.95rem; font-weight:700; color:var(--text); line-height:1.5; } .lac-summary { font-size:0.82rem; color:var(--muted); line-height:1.65; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .lac-footer { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:0.8rem; border-top:1px solid var(--border); } .lac-scenes { display:flex; gap:0.3rem; flex-wrap:wrap; } .lac-scene-tag { font-size:0.62rem; color:var(--faint); background:var(--deep); padding:0.15rem 0.45rem; border-radius:var(--r-pill); } .lac-read-more { font-size:0.78rem; font-weight:700; color:var(--primary); white-space:nowrap; } .learn-no-result { text-align:center; padding:3rem 1rem; color:var(--muted); grid-column:1 / -1; } .learn-no-result-icon { font-size:2.5rem; margin-bottom:0.8rem; } /* ── 文章頁 ── */ .article-loading { min-height:60vh; display:flex; align-items:center; justify-content:center; padding-top:64px; } .article-loading-inner { text-align:center; color:var(--muted); font-size:0.9rem; } .article-loading-spinner { width:36px; height:36px; border:3px solid var(--border); border-top-color:var(--primary); border-radius:50%; animation:spin 0.7s linear infinite; margin:0 auto 1rem; } @keyframes spin { to { transform:rotate(360deg); } } .article-not-found { padding:120px 5% 80px; } .anf-inner { text-align:center; max-width:400px; margin:0 auto; } .anf-icon { font-size:3rem; margin-bottom:1rem; } .anf-title { font-size:1.8rem; font-weight:900; margin-bottom:0.8rem; } .anf-desc { color:var(--muted); margin-bottom:2rem; } .article-hero { padding:100px 5% 48px; background:linear-gradient(160deg,#f0f7ff 0%,#ffffff 60%,#f5f3ff 100%); border-bottom:1px solid var(--border); } .article-meta { display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap; margin-bottom:1rem; } .article-category { font-size:0.72rem; font-weight:700; padding:0.25rem 0.75rem; border-radius:var(--r-pill); letter-spacing:0.06em; } .ac-電商串接 { background:rgba(232,93,74,0.1); color:var(--red); } .ac-新手入門 { background:rgba(37,99,235,0.1); color:var(--primary); } .ac-庫存管理 { background:rgba(217,119,6,0.1); color:var(--amber); } .ac-Line接單 { background:rgba(6,199,85,0.1); color:#059669; } .ac-門市POS { background:rgba(217,119,6,0.1); color:var(--amber); } .ac-報表財務 { background:rgba(8,145,178,0.1); color:var(--teal); } .ac-default { background:var(--primary-light); color:var(--primary); } .article-difficulty { font-size:0.72rem; font-weight:700; padding:0.25rem 0.75rem; border-radius:var(--r-pill); } .ad-入門 { background:rgba(5,150,105,0.1); color:var(--green); } .ad-進階 { background:rgba(124,58,237,0.1); color:var(--purple); } .article-scene-tags { display:flex; gap:0.4rem; flex-wrap:wrap; } .article-scene-tag { font-size:0.68rem; color:var(--muted); background:var(--deep); padding:0.2rem 0.55rem; border-radius:var(--r-pill); border:1px solid var(--border); } .article-title { font-size:clamp(1.6rem,3vw,2.6rem); font-weight:900; line-height:1.25; letter-spacing:-0.03em; margin-bottom:1rem; color:var(--text); } .article-summary { font-size:1rem; color:var(--muted); line-height:1.8; max-width:680px; } .article-layout { padding:48px 5% 80px; } .article-body-grid { display:grid; grid-template-columns:240px 1fr; gap:3rem; align-items:start; max-width:1200px; margin:0 auto; } .article-toc { position:sticky; top:84px; } .article-toc-inner { background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-card); padding:1.2rem; } .article-toc-title { font-size:0.78rem; font-weight:700; color:var(--sub); margin-bottom:0.8rem; padding-bottom:0.6rem; border-bottom:1px solid var(--border); } .article-toc-list { list-style:none; display:flex; flex-direction:column; gap:0.2rem; margin-bottom:1.2rem; counter-reset:toc-counter; } .article-toc-item { counter-increment:toc-counter; } .article-toc-link { display:flex; align-items:flex-start; gap:0.5rem; padding:0.4rem 0.5rem; border-radius:var(--r-sm); font-size:0.78rem; color:var(--muted); text-decoration:none; line-height:1.5; transition:background 0.15s,color 0.15s; } .article-toc-link::before { content:counter(toc-counter); font-size:0.65rem; font-weight:700; width:18px; height:18px; border-radius:50%; background:var(--deep); color:var(--muted); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; } .article-toc-link:hover,.article-toc-link.active { background:var(--primary-light); color:var(--primary); } .article-toc-link.active::before { background:var(--primary); color:#fff; } .article-toc-cta { padding-top:1rem; border-top:1px solid var(--border); } .article-steps { max-width:720px; } .article-step { margin-bottom:3rem; padding-bottom:3rem; border-bottom:1px solid var(--border); } .article-step:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; } .article-step-header { display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.2rem; } .article-step-num { width:36px; height:36px; border-radius:50%; background:var(--primary); color:#fff; font-weight:900; font-size:0.9rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .article-step-title { font-size:1.15rem; font-weight:700; color:var(--text); line-height:1.35; padding-top:5px; } .article-step-content { font-size:0.92rem; color:var(--sub); line-height:1.85; margin-bottom:1.4rem; padding-left:3rem; } .article-step-img-wrap { padding-left:3rem; } .article-step-img { width:100%; border-radius:var(--r-lg); border:1px solid var(--border); box-shadow:var(--shadow-card); display:block; } .article-step-img-placeholder { width:100%; height:220px; background:var(--deep); border:2px dashed var(--border); border-radius:var(--r-lg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.5rem; color:var(--faint); font-size:0.82rem; } .article-step-img-placeholder-icon { font-size:2rem; opacity:0.4; } .article-step-img-caption { margin-top:0.5rem; font-size:0.75rem; color:var(--muted); text-align:center; font-style:italic; padding-left:3rem; } .article-related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2rem; } .article-related-card { background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-card); padding:1.3rem; text-decoration:none; color:inherit; transition:transform 0.2s,box-shadow 0.2s; display:flex; flex-direction:column; gap:0.5rem; } .article-related-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); } .arc-category { font-size:0.68rem; font-weight:700; color:var(--primary); } .arc-title { font-size:0.9rem; font-weight:700; color:var(--text); line-height:1.5; } .arc-summary { font-size:0.78rem; color:var(--muted); line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .arc-arrow { font-size:0.8rem; color:var(--primary); margin-top:auto; font-weight:700; } /* ── YouTube 影片卡片 ── */ .yt-section { padding:48px 5%; } .yt-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:1.5rem; } .yt-card { background:#fff; border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-card); transition:transform 0.25s,box-shadow 0.25s; } .yt-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); } .yt-link-card { display:block; text-decoration:none; color:inherit; } .yt-poster { position:relative; width:100%; padding-bottom:56.25%; background:#1a1a2e; overflow:hidden; } .yt-poster-img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.3s,opacity 0.3s; } .yt-card:hover .yt-poster-img { transform:scale(1.04); opacity:0.85; } .yt-poster-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; transition:background 0.2s; } .yt-card:hover .yt-poster-overlay { background:rgba(0,0,0,0.15); } .yt-play-icon { width:64px; height:45px; filter:drop-shadow(0 2px 8px rgba(0,0,0,0.4)); transition:transform 0.2s; } .yt-card:hover .yt-play-icon { transform:scale(1.15); } .yt-card-title { padding:0.85rem 1rem; font-size:0.82rem; font-weight:600; color:var(--sub); line-height:1.5; border-top:1px solid var(--border); } /* ── Footer LINE 帶 ── */ .footer-line-band { max-width:1200px; margin:0 auto 1.5rem; padding:1.2rem 2rem; background:rgba(6,199,85,0.08); border:1px solid rgba(6,199,85,0.2); border-radius:12px; display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; } .footer-line-link { flex-shrink:0; display:block; transition:transform 0.2s,opacity 0.2s; } .footer-line-link:hover { transform:translateY(-2px); opacity:0.88; } .footer-line-img { height:40px; width:auto; display:block; border-radius:6px; } .footer-line-desc { font-size:0.8rem; color:#94a3b8; line-height:1.6; } /* ── Nav 下拉選單 ── */ .nav-dropdown { position:relative; } .nav-dropdown-toggle { color:var(--muted); font-size:0.82rem; font-weight:500; transition:color 0.2s; cursor:pointer; display:flex; align-items:center; gap:4px; background:none; border:none; font-family:inherit; padding:0; } .nav-dropdown-toggle:hover,.nav-dropdown.open .nav-dropdown-toggle { color:var(--primary); } .nav-dropdown-arrow { font-size:0.6rem; opacity:0.6; transition:transform 0.2s; display:inline-block; } .nav-dropdown.open .nav-dropdown-arrow { transform:rotate(180deg); opacity:1; } .nav-dropdown-menu { display:none; position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%); background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:0.6rem; min-width:220px; z-index:300; } .nav-dropdown.open .nav-dropdown-menu { display:block; } .nav-dropdown-menu::before { content:''; position:absolute; top:-6px; left:50%; transform:translateX(-50%); width:10px; height:10px; background:#fff; border-left:1px solid var(--border); border-top:1px solid var(--border); rotate:45deg; } .nav-dropdown-item { display:flex; align-items:center; gap:0.7rem; padding:0.55rem 0.75rem; border-radius:var(--r-md); color:var(--sub); font-size:0.82rem; font-weight:500; text-decoration:none; transition:background 0.15s,color 0.15s; white-space:nowrap; } .nav-dropdown-item:hover { background:var(--primary-light); color:var(--primary); } .nav-dropdown-icon { font-size:0.9rem; width:20px; text-align:center; flex-shrink:0; } .nav-dropdown-divider { height:1px; background:var(--border); margin:0.4rem 0.3rem; } .nav-dropdown-label { font-size:0.62rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--faint); padding:0.4rem 0.75rem 0.2rem; } /* ── Utility ── */ .mt-05 { margin-top:0.5rem; } .mt-1 { margin-top:1rem; } .mt-15 { margin-top:1.5rem; } .mt-2 { margin-top:2rem; } .mt-25 { margin-top:2.5rem; } .mt-3 { margin-top:3rem; } .mb-05 { margin-bottom:0.5rem; } .mb-1 { margin-bottom:1rem; } .mb-12 { margin-bottom:1.2rem; } .mb-15 { margin-bottom:1.5rem; } .mr-03 { margin-right:0.3rem; } .mx-auto { margin-left:auto; margin-right:auto; } .table-scroll { overflow-x:auto; } .btn-toc-full { width:100%; justify-content:center; font-size:0.85rem; padding:0.7rem 1rem; } .btn-toc-mt { margin-top:0.5rem; } .step-tags--left { justify-content:flex-start; } .mt-lg { margin-top:2.5rem; } .mb-md { margin-bottom:1.2rem; } .mt-md { margin-top:1.2rem; } /* ══════════════════════════════════════ RESPONSIVE ══════════════════════════════════════ */ @media (max-width:1024px) { .module-grid { grid-template-columns:repeat(2,1fr); } .pricing-grid { grid-template-columns:1fr; } .yt-grid { grid-template-columns:1fr 1fr; } .pain-grid { grid-template-columns:repeat(2,1fr); } .trust-stats { grid-template-columns:repeat(2,1fr); } } @media (max-width:768px) { .page-hero { padding:80px 5% 36px; } .two-col { grid-template-columns:1fr; } .module-grid { grid-template-columns:1fr; } .pain-grid { grid-template-columns:1fr; } .why-grid { grid-template-columns:1fr; } .case-grid { grid-template-columns:1fr; } .trust-stats { grid-template-columns:1fr 1fr; } .contact-grid { grid-template-columns:1fr; } .cert-grid { grid-template-columns:1fr; } .cert-card--wide { grid-column:auto; } .cert-wide-inner { flex-direction:column; } .cert-img-wrap--cert { width:100%; padding:1.2rem 1.4rem 0; } .infra-grid { grid-template-columns:1fr; } .pricing-grid { grid-template-columns:1fr; } .pricing-card--featured { transform:none; } .yt-grid { grid-template-columns:1fr; } .learn-article-grid { grid-template-columns:1fr; } .article-body-grid { grid-template-columns:1fr; } .article-toc { position:static; } .article-step-content,.article-step-img-wrap,.article-step-img-caption { padding-left:0; } .article-related-grid { grid-template-columns:1fr; } .scene-cta-band { flex-direction:column; text-align:center; padding:2rem 1.5rem; } .scene-cta-btns { justify-content:center; } .cert-trust-band { flex-direction:column; } .cert-trust-sep { width:80%; height:1px; } .cert-trust-item { width:100%; padding:1rem 1.5rem; flex-direction:row; gap:0.8rem; } .infra-arch-band { flex-direction:column; gap:1rem; padding:1.5rem; } .infra-arch-arrow { flex-direction:row; padding:0; gap:0.5rem; } .infra-arch-arrow-line { width:40px; } .infra-arch-arrow-line::after { content:none; } .footer-line-band { flex-direction:column; align-items:flex-start; padding:1.2rem 1rem; gap:0.8rem; } .nav-dropdown-menu { position:static; transform:none; box-shadow:none; border:none; border-left:2px solid var(--primary-light); border-radius:0; padding:0 0 0 0.5rem; margin:0.3rem 0 0.3rem 0.5rem; } .nav-dropdown-menu::before { display:none; } .nav-dropdown-toggle { color:var(--sub); font-size:0.95rem; width:100%; justify-content:space-between; padding:0.3rem 0; } .nav-dropdown-item { font-size:0.88rem; padding:0.45rem 0.5rem; } /* Footer 折疊 */ .footer-grid { grid-template-columns:1fr !important; gap:0 !important; margin-bottom:1.5rem !important; } .footer-grid > div:first-child { padding-bottom:1.2rem; margin-bottom:0.5rem; border-bottom:1px solid rgba(255,255,255,0.08); } .footer-brand-desc { max-width:100%; } .footer-grid > div:not(:first-child) { border-bottom:1px solid rgba(255,255,255,0.08); } .footer-col-title { display:flex; align-items:center; justify-content:space-between; padding:0.9rem 0; margin-bottom:0; cursor:pointer; user-select:none; -webkit-user-select:none; } .footer-col-title::after { content:'+'; font-size:1rem; font-weight:400; color:#64748b; transition:transform 0.25s; flex-shrink:0; } .footer-col-title.is-open::after { transform:rotate(45deg); } .footer-links { display:none; padding-bottom:1rem; gap:0.55rem; } .footer-links.is-open { display:flex; } .footer-links a { font-size:0.88rem; padding:0.15rem 0; } } /* ══════════════════════════════════════ 用戶案例卡片（cases.html） ══════════════════════════════════════ */ .customer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 2.5rem; } .customer-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-card); overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; } .customer-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(37,99,235,0.25); } .customer-logo-wrap { background: var(--deep); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: center; padding: 1.2rem; height: 100px; } .customer-logo { max-height: 68px; max-width: 100%; width: auto; object-fit: contain; display: block; } .customer-info { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.3rem; flex: 1; } .customer-cat { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.06em; color: var(--primary); background: var(--primary-light); padding: 0.15rem 0.5rem; border-radius: var(--r-pill); display: inline-block; width: fit-content; } .customer-name { font-size: 0.92rem; font-weight: 900; color: var(--text); line-height: 1.3; } .customer-desc { font-size: 0.75rem; color: var(--muted); line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 1024px) { .customer-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .customer-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .customer-grid { grid-template-columns: 1fr 1fr; } } /* ══════════════════════════════════════ About 頁專用樣式 ══════════════════════════════════════ */ /* 數字統計 */ .about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 3rem; } .about-stat { text-align: center; padding: 1.8rem 1rem; background: #fff; border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-card); } .as-num { font-size: 2.4rem; font-weight: 900; line-height: 1; margin-bottom: 0.5rem; } .as-num--blue { color: var(--primary); } .as-num--teal { color: var(--teal); } .as-num--amber { color: var(--amber); } .as-num--purple { color: var(--purple); } .as-label { font-size: 0.82rem; color: var(--muted); } /* 時間軸 */ .timeline { position: relative; padding-left: 2rem; margin-top: 2rem; } .timeline::before { content: ''; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, var(--primary), var(--purple), transparent); } .timeline-item { position: relative; padding-bottom: 2.5rem; } .timeline-item:last-child { padding-bottom: 0; } .timeline-dot { position: absolute; left: -2rem; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--primary); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--primary); } .timeline-year { font-size: 0.72rem; font-weight: 700; color: var(--primary); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.3rem; } .timeline-title { font-size: 1rem; font-weight: 700; margin-bottom: 0.4rem; } .timeline-desc { font-size: 0.85rem; color: var(--muted); line-height: 1.7; } /* 價值主張卡 */ .value-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin-top: 2rem; } .vc-card { padding: 1.5rem; border-radius: var(--r-lg); border: 1px solid var(--border); background: #fff; box-shadow: var(--shadow-card); } .vc-icon { font-size: 1.5rem; margin-bottom: 0.7rem; } .vc-title { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.4rem; } .vc-desc { font-size: 0.83rem; color: var(--muted); line-height: 1.7; } /* 公司資訊 */ .co-info-item { font-size: 0.85rem; color: var(--sub); } .co-info-label { color: var(--muted); font-size: 0.75rem; display: block; } /* 故事段落 */ .story-para { color: var(--muted); font-size: 0.92rem; line-height: 1.9; margin-top: 0.9rem; } .story-para--emphasis { color: var(--sub); font-weight: 500; } /* Spacing utilities */ .mb-sm { margin-bottom: 0.6rem; } .infra-spec-text { font-size: 0.83rem; color: var(--sub); } /* RWD */ @media (max-width: 1024px) { .about-stats { grid-template-columns: repeat(2, 1fr); } .value-cards { grid-template-columns: 1fr; } } @media (max-width: 768px) { .about-stats { grid-template-columns: repeat(2, 1fr); } .value-cards { grid-template-columns: 1fr; } .customer-grid { grid-template-columns: repeat(2, 1fr); } } /* ── 線上預約報價按鈕 ── */ .consult-btn--form { background: var(--primary-light); border-color: rgba(37,99,235,0.25); } .consult-btn--form:hover { background: #dbeafe; border-color: var(--primary); } .consult-form-icon { font-size: 1.4rem; } .consult-form-label { font-size: 1rem; font-weight: 700; color: var(--primary); } .consult-form-sub { font-size: 0.72rem; color: var(--muted); } /* ── 試用申請按鈕（取代表單）── */ .trial-apply-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 0.8rem; margin-top: auto; padding-top: 1.5rem; } .trial-apply-btn { font-size: 1.05rem; padding: 1rem 2rem; border-radius: var(--r-lg); width: 100%; justify-content: center; } .trial-apply-note { font-size: 0.78rem; color: var(--muted); line-height: 1.6; } /* ══════════════════════════════════════ 導入步驟區塊（trial.html） ══════════════════════════════════════ */ .onboard-steps { margin-top: 2.5rem; background: #fff; border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-card); overflow: hidden; } .onboard-header { padding: 1.5rem 2rem 1.2rem; background: var(--primary-light); border-bottom: 1px solid rgba(37,99,235,0.15); } .onboard-title-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; } .onboard-icon { font-size: 1.1rem; } .onboard-title { font-size: 1rem; font-weight: 900; color: var(--text); margin: 0; } .onboard-subtitle { font-size: 0.83rem; color: var(--muted); line-height: 1.6; margin: 0; } .onboard-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; } .onboard-item { display: flex; gap: 1rem; padding: 1.6rem 1.8rem; border-right: 1px solid var(--border); align-items: flex-start; } .onboard-item:last-child { border-right: none; } .onboard-num { width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 900; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .onboard-content { flex: 1; } .onboard-step-title { font-size: 0.92rem; font-weight: 700; color: var(--text); margin-bottom: 0.75rem; } .onboard-sub-list { list-style: none; padding: 0; margin: 0 0 0.75rem; display: flex; flex-direction: column; gap: 0.45rem; } .onboard-sub-list li { font-size: 0.82rem; color: var(--sub); line-height: 1.65; padding-left: 0.9rem; position: relative; } .onboard-sub-list li::before { content: '·'; position: absolute; left: 0; color: var(--primary); font-weight: 700; } .onboard-tip { font-size: 0.78rem; color: var(--primary); background: var(--primary-light); border: 1px solid rgba(37,99,235,0.15); border-radius: var(--r-md); padding: 0.5rem 0.75rem; line-height: 1.6; display: flex; gap: 0.4rem; align-items: flex-start; } @media (max-width: 768px) { .onboard-list { grid-template-columns: 1fr; } .onboard-item { border-right: none; border-bottom: 1px solid var(--border); } .onboard-item:last-child { border-bottom: none; } .onboard-header { padding: 1.2rem 1.2rem 1rem; } .onboard-item { padding: 1.2rem; } } /* ══════════════════════════════════════ register.html 申請表單頁 ══════════════════════════════════════ */ .register-layout { display: grid; grid-template-columns: 280px 1fr; gap: 2.5rem; align-items: start; } /* 左側欄 */ .register-steps-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-card); padding: 1.5rem; margin-bottom: 1.2rem; } .register-steps-title { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.2rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--border); } .register-step-list { display: flex; flex-direction: column; gap: 0.6rem; } .register-step { display: flex; align-items: center; gap: 0.75rem; } .register-step-num { width: 28px; height: 28px; border-radius: 50%; background: var(--deep); border: 1px solid var(--border); color: var(--muted); font-size: 0.78rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .register-step-num--done { background: var(--green); border-color: var(--green); color: #fff; } .register-step-num--active { background: var(--primary); border-color: var(--primary); color: #fff; } .register-step-text { font-size: 0.83rem; color: var(--muted); } .register-step--done .register-step-text { color: var(--green); } .register-step--active .register-step-text { color: var(--primary); font-weight: 700; } .register-info-card { background: var(--primary-light); border: 1px solid rgba(37,99,235,0.2); border-radius: var(--r-lg); padding: 1.2rem; display: flex; gap: 0.8rem; align-items: flex-start; } .register-info-icon { font-size: 1.2rem; flex-shrink: 0; } .register-info-title { font-size: 0.82rem; font-weight: 700; color: var(--primary); margin-bottom: 0.5rem; } .register-info-list { list-style: none; display: flex; flex-direction: column; gap: 0.35rem; } .register-info-list li { font-size: 0.78rem; color: var(--sub); padding-left: 1rem; position: relative; } .register-info-list li::before { content: '·'; position: absolute; left: 0; color: var(--primary); font-weight: 700; } /* 右側表單卡片 */ .register-form-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-card); overflow: hidden; } .register-form-header { padding: 1.4rem 2rem; background: var(--primary-light); border-bottom: 1px solid rgba(37,99,235,0.15); } .register-form-title { font-size: 1.1rem; font-weight: 900; color: var(--text); } .register-form-subtitle { font-size: 0.78rem; color: var(--muted); margin-top: 0.2rem; } .register-form-body { padding: 1.8rem 2rem; } .register-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: 1.2rem; } .register-field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1.2rem; } .register-field-row .register-field { margin-bottom: 0; } .register-label { font-size: 0.82rem; font-weight: 700; color: var(--sub); } .register-required { color: var(--red); margin-left: 2px; } .register-optional { color: var(--faint); font-weight: 400; font-size: 0.75rem; } .register-input { padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: var(--r-md); font-size: 0.9rem; font-family: inherit; color: var(--text); background: #fff; transition: border-color 0.2s, box-shadow 0.2s; width: 100%; } .register-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); } .register-input--error { border-color: var(--red); } .register-input--error:focus { box-shadow: 0 0 0 3px rgba(232,93,74,0.1); } .register-select { cursor: pointer; appearance: auto; } .register-textarea { resize: vertical; min-height: 80px; line-height: 1.6; } .register-field-err { font-size: 0.75rem; color: var(--red); min-height: 1rem; } .register-form-msg { font-size: 0.85rem; min-height: 1.2rem; margin-bottom: 0.8rem; padding: 0.6rem 0.9rem; border-radius: var(--r-md); } .register-form-msg--success { background: rgba(5,150,105,0.08); border: 1px solid rgba(5,150,105,0.2); color: var(--green); } .register-form-msg--error { background: rgba(232,93,74,0.08); border: 1px solid rgba(232,93,74,0.2); color: var(--red); } .register-form-btns { display: flex; gap: 0.8rem; align-items: center; margin-top: 0.5rem; } .register-submit-btn { flex: 1; justify-content: center; } .register-privacy { font-size: 0.72rem; color: var(--faint); margin-top: 1rem; line-height: 1.6; } .register-privacy a { color: var(--primary); } /* RWD */ @media (max-width: 1024px) { .register-layout { grid-template-columns: 220px 1fr; gap: 1.5rem; } } @media (max-width: 768px) { .register-layout { grid-template-columns: 1fr; } .register-sidebar { display: none; } .register-field-row { grid-template-columns: 1fr; } .register-form-body { padding: 1.2rem; } .register-form-header { padding: 1.2rem; } } /* ── register.html 複選框群組 ── */ .register-checkbox-group { border: none; padding: 0; margin: 0; } .register-checkbox-group legend { display: block; font-size: 0.82rem; font-weight: 700; color: var(--sub); margin-bottom: 0.75rem; padding: 0; width: 100%; } .register-checkbox-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; margin-top: 0.5rem; } .register-checkbox-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--sub); cursor: pointer; padding: 0.55rem 0.8rem; border: 1px solid var(--border); border-radius: var(--r-md); background: #fff; transition: border-color 0.15s, background 0.15s; user-select: none; -webkit-user-select: none; } .register-checkbox-label:hover { border-color: var(--primary); background: var(--primary-light); } .register-checkbox-label:has(input:checked) { border-color: var(--primary); background: var(--primary-light); color: var(--primary); font-weight: 600; } .register-checkbox { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); flex-shrink: 0; } @media (max-width: 768px) { .register-checkbox-grid { grid-template-columns: repeat(2, 1fr); } } /* ══════════════════════════════════════ 補回缺失的場景頁 Class ══════════════════════════════════════ */ /* feature-item 內文區 */ .feature-item-text { flex: 1; } .feature-item-title { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.3rem; color: var(--text); } .feature-item-desc { font-size: 0.83rem; color: var(--muted); line-height: 1.65; } /* flow-step 內文區 */ .flow-step-body { flex: 1; } /* section 置中 modifier */ .section-label--center { display: inline-flex; } .section-h2--center { text-align: center; margin: 0 auto; } .section-sub--center { text-align: center; margin-left: auto; margin-right: auto; } /* tag-lg */ .tag-lg { font-size: 0.82rem; padding: 0.35rem 0.9rem; } /* ai-tags */ .ai-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.8rem; align-items: center; } .ai-tags-label { font-size: 0.78rem; color: var(--muted); } /* ══════════════════════════════════════ 全站補回其他缺失 Class ══════════════════════════════════════ */ /* AI 導購文字側欄 */ .ai-text-side { } /* 認證信任帶上邊距 */ .cert-trust-band--mt { margin-top: 1.5rem; } /* 精簡功能列表 */ .feature-list--compact { gap: 0.6rem; } .feature-list--compact .feature-item { padding: 0.9rem 1rem; } /* Hero 視覺 (index.html) */ .hvb-stat { text-align: center; } .value-visual { position: relative; } /* register 表單佈局 */ .register-form-wrap { flex: 1; } .register-info-text { flex: 1; } /* 場景卡片內文 */ .scene-content { flex: 1; } /* CTA 帶文字區 */ .scene-cta-text { flex: 1; } /* 額外 tag 顏色 */ .tag-blue { background: rgba(37,99,235,0.1); color: var(--primary); } .tag-green { background: rgba(5,150,105,0.1); color: var(--green); } /* ── KPI 大數字（場景頁用）── */ .kpi-big { font-size: 2rem; font-weight: 900; letter-spacing: -0.04em; margin-bottom: 0.3rem; line-height: 1; } .kpi-big--amber { color: var(--amber); } .kpi-big--teal { color: var(--teal); } .kpi-big--green { color: var(--green); } .kpi-big--red { color: var(--red); } .kpi-big--purple { color: var(--purple); } .kpi-big--blue { color: var(--primary); } /* ── amber-text gradient（烘焙場景）── */ .amber-text { background: linear-gradient(135deg, #d97706, #e85d4a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── 庫存三欄顯示（待出貨 / 可售數 / 庫存）── */ .vb-row--stock { align-items: center; flex-wrap: wrap; gap: 0.5rem 0.8rem; } .vb-divider { border-top:1px solid var(--border); margin-top:1rem; padding-top:1rem; } .vb-stock-cols { display: flex; gap: 0.5rem; flex-shrink: 0; flex-wrap: wrap; } .vb-stock-item { display: flex; flex-direction: column; align-items: center; background: var(--deep); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0.25rem 0.6rem; min-width: 52px; } .vb-stock-lbl { font-size: 0.6rem; color: var(--faint); font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; } .vb-stock-num { font-size: 0.9rem; font-weight: 900; color: var(--text); line-height: 1.2; } .vb-stock-num--teal { color: var(--teal); } .vb-stock-num--amber { color: var(--amber); } .vb-stock-num--red { color: var(--red); } .vb-warn { font-size: 0.75rem; margin-left: 4px; } .vb-warn--red { } /* register 錯誤摘要清單樣式（v4 系統模組整合新增） */ .register-error-list { margin: 0.4rem 0 0; padding-left: 1.1rem; } .register-error-list li { margin-bottom: 0.2rem; } /* ============================================ register 成功彈窗（v278-modal-*） 原為 register.php 內 inline