/* Theme Name: 58OA Theme URI: https://58oa.com.tw Author: 58OA Description: 58OA 辦公幫幫忙 — 辦公室裝修、辦公家具與供應商整合平台的專屬佈景主題。搭配 58OA Core 外掛使用。 Version: 1.3.2 Requires at least: 6.0 Tested up to: 7.0 Requires PHP: 8.0 License: GPL v2 or later Text Domain: dynaoffice */ /* ============ 1. Tokens ============ */ :root{ --ink:#0D1117; --ink-soft:#16202B; --brand:#12324F; --brand-2:#1D4E75; --accent:#BC9159; --accent-deep:#8C6939; --accent-dark:#7E5F35; --accent-lift:#D9B075; --line:#06C755; --bg:#FFFFFF; --bg-muted:#F4F7FA; --border:#E1E7EE; --text:#1F2933; --text-2:#5C6B7A; --text-3:#8896A5; --radius:14px; --radius-lg:22px; --shadow:0 1px 2px rgba(13,17,23,.04),0 8px 24px rgba(13,17,23,.06); --shadow-lg:0 20px 60px rgba(13,17,23,.12); --wrap:1200px; --font-zh:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif; --font-en:"Manrope","Noto Sans TC",sans-serif; --ease:cubic-bezier(.22,.61,.36,1); } /* ============ 2. Reset & base ============ */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0;background:var(--bg);color:var(--text); font-family:var(--font-zh);font-size:16px;line-height:1.8; font-weight:400;letter-spacing:.01em; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img{max-width:100%;height:auto;display:block} a{color:var(--brand-2);text-decoration:none;transition:color .2s var(--ease)} a:hover{color:var(--accent-deep)} h1,h2,h3,h4{margin:0;line-height:1.35;font-weight:700;letter-spacing:-.01em;color:var(--ink)} p{margin:0 0 1em} ul,ol{margin:0;padding:0;list-style:none} button{font:inherit;cursor:pointer} :focus-visible{outline:3px solid var(--accent-deep);outline-offset:3px} .wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto} .wrap--narrow{width:min(100% - 40px,760px)} .skip{position:absolute;left:-9999px} .skip:focus{left:16px;top:16px;z-index:999;background:var(--ink);color:#fff;padding:10px 18px;border-radius:8px} /* ============ 3. Typographic helpers ============ */ .eyebrow{ font-family:var(--font-en);font-size:12px;font-weight:800; letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep); margin:0 0 12px; } .sec{padding:96px 0} .sec--tight{padding:56px 0 96px} .sec--muted{background:var(--bg-muted)} .sec--ink{background:var(--ink);color:#C9D4DF} .sec--ink h2,.sec--ink h3,.sec--ink b,.sec--ink strong{color:#fff} .sec__head{max-width:720px;margin:0 0 48px} .sec__head--row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;max-width:none} .sec__title{font-size:clamp(26px,3.4vw,40px);margin:0 0 14px} .sec__title--sm{font-size:24px;margin:48px 0 20px} .sec__lead{color:var(--text-2);font-size:17px;margin:0} .sec--ink .sec__lead{color:#9FB0C0} /* ============ 4. Buttons ============ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:13px 26px;border-radius:999px;border:1.5px solid transparent; font-weight:700;font-size:15px;line-height:1;white-space:nowrap; transition:transform .2s var(--ease),background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease); } .btn:hover{transform:translateY(-2px)} .btn--lg{padding:16px 34px;font-size:16px} .btn--full{display:flex;width:100%;margin-bottom:10px} .btn--solid{background:var(--accent-deep);color:#fff} .btn--solid:hover{background:var(--accent-dark);color:#fff} .btn--line{background:var(--line);color:#fff} .btn--line:hover{background:#05b04c;color:#fff} .btn--ghost{background:transparent;color:var(--ink);border-color:var(--border)} .btn--ghost:hover{border-color:var(--ink);color:var(--ink);background:#fff} .sec--ink .btn--ghost{color:#fff;border-color:rgba(255,255,255,.3)} .btn__ico{font-size:13px} .arrow{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:15px;color:var(--brand-2)} .arrow::after{content:"→";transition:transform .2s var(--ease)} .arrow:hover::after{transform:translateX(4px)} /* ============ 5. Header ============ */ .site-head{ position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--border); } .site-head__in{display:flex;align-items:center;gap:28px;height:76px} .brand{display:flex;align-items:center;gap:11px;flex-shrink:0;color:var(--ink)} .brand__mark{width:40px;height:40px;flex-shrink:0;display:grid;place-items:center} .brand__txt{display:flex;flex-direction:column;line-height:1.15} .brand__en{font-family:var(--font-en);font-weight:800;font-size:18px;letter-spacing:-.02em} .brand__zh{font-size:11px;color:var(--text-3);letter-spacing:.1em} .brand--foot{color:#fff} .brand--foot .brand__zh{color:#8896A5} .nav{margin-left:auto} .nav__list{display:flex;gap:4px;align-items:center} .nav__list li{position:relative} .nav__list a{ display:block;padding:9px 14px;border-radius:9px; color:var(--text);font-size:15px;font-weight:500; } .nav__list a:hover{background:var(--bg-muted);color:var(--ink)} .nav__list .current-menu-item>a,.nav__list .current_page_item>a{color:var(--accent-deep);font-weight:700} .nav__list .sub-menu{ position:absolute;top:calc(100% + 8px);left:0;min-width:190px; background:#fff;border:1px solid var(--border);border-radius:12px; box-shadow:var(--shadow-lg);padding:6px;display:none; } .nav__list li:hover>.sub-menu{display:block} .head-cta{display:flex;align-items:center;gap:12px} .burger{display:none;width:44px;height:44px;border:1px solid var(--border);background:#fff;border-radius:11px;padding:0;flex-direction:column;gap:5px;align-items:center;justify-content:center} .burger span{display:block;width:19px;height:2px;background:var(--ink);border-radius:2px;transition:.25s var(--ease)} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ============ 6. Hero ============ */ .hero{position:relative;padding:110px 0 90px;overflow:hidden;background:var(--ink)} .hero__bg{ position:absolute;inset:0; background: radial-gradient(60% 80% at 82% 15%,rgba(188,145,89,.30),transparent 60%), radial-gradient(70% 90% at 8% 90%,rgba(29,78,117,.55),transparent 62%), linear-gradient(160deg,#0D1117 0%,#12324F 100%); } .hero__bg::after{ content:"";position:absolute;inset:0;opacity:.16; background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(75% 75% at 50% 40%,#000,transparent 78%); } .hero__in{position:relative;text-align:center} .hero__title{ font-size:clamp(36px,6vw,66px);color:#fff;margin:0 0 22px; line-height:1.2;letter-spacing:-.03em;font-weight:900; } .hero__title .hl{ background:linear-gradient(180deg,transparent 62%,rgba(188,145,89,.55) 62%); padding:0 6px; } .hero__sub{color:#B4C4D4;font-size:clamp(15px,1.6vw,18px);max-width:640px;margin:0 auto 34px} .hero__btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:64px} .stats{ display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:0; background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-lg);overflow:hidden; } .stats__i{background:rgba(13,17,23,.55);padding:26px 16px;backdrop-filter:blur(6px)} .stats dt{color:#8FA3B6;font-size:13px;margin-bottom:6px;letter-spacing:.04em} .stats dd{ margin:0;color:#fff;font-family:var(--font-en); font-size:38px;font-weight:800;line-height:1;letter-spacing:-.02em; } .stats dd span{font-size:14px;font-weight:500;margin-left:4px;color:#8FA3B6;font-family:var(--font-zh)} /* ============ 7. Page hero / breadcrumb ============ */ .phero{background:var(--bg-muted);padding:64px 0 56px;border-bottom:1px solid var(--border)} .phero__title{font-size:clamp(28px,4.2vw,46px);margin:0 0 16px;letter-spacing:-.02em} .phero__lead{color:var(--text-2);font-size:17px;max-width:720px;margin:0} .crumb{border-bottom:1px solid var(--border);font-size:13px;color:var(--text-3)} .crumb .wrap{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:13px 0} .crumb a{color:var(--text-2)} .crumb__sep{color:var(--border)} /* ============ 8. Services / features / steps ============ */ .svc{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .svc__i{ background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg); padding:36px 32px;position:relative;transition:.28s var(--ease); } .svc__i:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:transparent} .svc__no{ font-family:var(--font-en);font-size:13px;font-weight:800;color:var(--accent-deep); letter-spacing:.1em;display:block;margin-bottom:16px; } .svc__i h3{font-size:22px;margin:0 0 12px} .svc__i>p{color:var(--text-2);font-size:15px;margin-bottom:20px} .ticks{margin:0 0 24px;display:grid;gap:9px} .ticks li{position:relative;padding-left:26px;font-size:14.5px;color:var(--text-2)} .ticks li::before{ content:"";position:absolute;left:0;top:9px;width:14px;height:8px; border-left:2px solid var(--accent-deep);border-bottom:2px solid var(--accent-deep); transform:rotate(-45deg); } .split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center} .feat{display:grid;gap:14px} .feat li{ background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1); border-radius:var(--radius);padding:20px 24px; } .feat b{display:block;font-size:16px;margin-bottom:5px} .feat span{color:#9FB0C0;font-size:14.5px} .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s} .steps li{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:28px 26px;position:relative} .steps__n{ position:absolute;top:26px;right:26px;font-family:var(--font-en); font-size:42px;font-weight:800;color:var(--bg-muted);line-height:1; } .steps h3{font-size:18px;margin:0 0 8px;position:relative} .steps p{margin:0;color:var(--text-2);font-size:14.5px} /* ============ 9. Grid & cards ============ */ .grid{display:grid;gap:26px} .grid--2{grid-template-columns:repeat(2,1fr)} .grid--3{grid-template-columns:repeat(3,1fr)} .grid--4{grid-template-columns:repeat(4,1fr)} .card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:.28s var(--ease)} .card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:transparent} .card__link{display:block;color:inherit;height:100%} .card__link:hover{color:inherit} .card__media{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--bg-muted)} .card__media--sq{aspect-ratio:4/3} .card__media img,.card__img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)} .card:hover .card__media img{transform:scale(1.05)} .ph{ display:grid;place-items:center;width:100%;height:100%; background:linear-gradient(135deg,hsl(var(--h1) 42% 88%),hsl(var(--h2) 46% 76%)); } .ph span{font-size:34px;font-weight:900;color:rgba(255,255,255,.9);letter-spacing:.06em} .tag{ position:absolute;top:14px;left:14px;background:rgba(13,17,23,.82);color:#fff; font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px;backdrop-filter:blur(4px); } .card__body{padding:24px 24px 26px} .card__meta{font-size:13px;color:var(--text-3);margin:0 0 8px;letter-spacing:.02em} .card__title{font-size:19px;margin:0 0 10px;line-height:1.45} .card__title--sm{font-size:16.5px} .card__desc{font-size:14.5px;color:var(--text-2);margin:0 0 14px;line-height:1.75} .card__more{font-size:14px;font-weight:700;color:var(--accent-deep)} .card__more::after{content:" →"} .card__count{display:inline-block;font-size:12.5px;color:var(--text-3);border:1px solid var(--border);padding:3px 10px;border-radius:999px} .card__price{font-family:var(--font-en);font-weight:700;color:var(--ink);font-size:15px;margin:0} /* ============ 10. Filters ============ */ .filters{display:grid;gap:16px;margin-bottom:32px;padding-bottom:28px;border-bottom:1px solid var(--border)} .filter{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap} .filter__label{font-size:13px;font-weight:700;color:var(--text-3);min-width:64px;letter-spacing:.05em} .filter__items{display:flex;gap:8px;flex-wrap:wrap} .chip{ display:inline-flex;align-items:center;gap:5px;padding:7px 15px;border-radius:999px; border:1px solid var(--border);font-size:13.5px;color:var(--text-2);background:#fff; transition:.2s var(--ease); } .chip:hover{border-color:var(--ink);color:var(--ink)} .chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff} .chip b{font-weight:600;opacity:.55;font-size:12px} .chip--sm{padding:5px 12px;font-size:12.5px} .result-count{color:var(--text-2);font-size:14px;margin-bottom:24px} .empty{background:var(--bg-muted);border-radius:var(--radius);padding:48px;text-align:center;color:var(--text-2)} /* ============ 11. Single: case / supplier / product / post ============ */ .case-head{padding:56px 0 40px} .case-head__tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px} .case-head__title{font-size:clamp(28px,4vw,44px);margin:0 0 16px;letter-spacing:-.02em;max-width:900px} .case-head__lead{color:var(--text-2);font-size:17.5px;max-width:760px;margin:0} .case-hero{margin:0 0 8px} .case-hero img{width:100%;max-height:560px;object-fit:cover} .case-body{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:64px;padding:64px 0 88px;align-items:start} .case-body__side{position:sticky;top:100px;display:grid;gap:20px} .csr{display:grid;gap:20px;margin-bottom:44px} .csr__i{background:var(--bg-muted);border-radius:var(--radius);padding:28px 30px;position:relative} .csr__n{ position:absolute;top:24px;right:28px;font-family:var(--font-en);font-weight:800; font-size:38px;line-height:1;color:#fff; } .csr__i h2{font-size:19px;margin:0 0 10px;color:var(--accent-deep)} .csr__i p{margin:0;color:var(--text);font-size:15.5px} .panel{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:26px 24px} .panel--cta{background:var(--ink);border-color:var(--ink);color:#B4C4D4} .panel--cta .panel__h{color:#fff} .panel--cta p{font-size:14.5px;margin-bottom:18px} .panel__h{font-size:15px;margin:0 0 16px;letter-spacing:.03em} .spec{margin:0;display:grid;gap:12px} .spec>div{display:flex;justify-content:space-between;gap:16px;font-size:14.5px;border-bottom:1px dashed var(--border);padding-bottom:11px} .spec>div:last-child{border-bottom:0;padding-bottom:0} .spec dt{color:var(--text-3);flex-shrink:0} .spec dd{margin:0;font-weight:600;text-align:right} .spec--box{border:1px solid var(--border);border-radius:var(--radius);padding:22px;margin:0 0 28px} .sup-mini{display:block;padding:14px 16px;background:var(--bg-muted);border-radius:10px;color:inherit} .sup-mini strong{display:block;font-size:15px;margin-bottom:3px} .sup-mini span{font-size:13px;color:var(--text-3)} .sup-head{background:var(--bg-muted);padding:56px 0;border-bottom:1px solid var(--border)} .sup-head__in{display:grid;grid-template-columns:180px 1fr;gap:40px;align-items:center} .sup-head__logo{border-radius:var(--radius);overflow:hidden;background:#fff;border:1px solid var(--border);aspect-ratio:1} .sup-head__img{width:100%;height:100%;object-fit:cover} .sup-head__title{font-size:clamp(26px,3.6vw,38px);margin:0 0 12px} .sup-head__lead{color:var(--text-2);margin:0 0 18px;max-width:660px} .sup-head__stat{display:flex;gap:24px;margin:0;font-size:14px;color:var(--text-2)} .sup-head__stat strong{font-family:var(--font-en);font-size:22px;color:var(--ink);margin-right:3px} .prod{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;padding:56px 0 88px;align-items:start} .prod__media{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3} .prod__img{width:100%;height:100%;object-fit:cover} .prod__title{font-size:clamp(24px,3.2vw,36px);margin:0 0 10px} .prod__sup{color:var(--text-2);font-size:15px;margin-bottom:20px} .prod__specnote{background:var(--bg-muted);padding:16px 20px;border-radius:10px;font-size:14.5px;color:var(--text-2)} .prod__btns{display:flex;gap:12px;flex-wrap:wrap} .post-head{padding:56px 0 36px;text-align:center} .post-head__title{font-size:clamp(28px,4.4vw,44px);margin:0 0 18px;letter-spacing:-.02em} .post-head__lead{color:var(--text-2);font-size:17px;margin:0} .page-body{padding:56px 0 88px} /* ============ 12. Prose ============ */ .prose{font-size:16.5px;line-height:1.95;color:var(--text)} .prose>*+*{margin-top:1.15em} .prose h2{font-size:26px;margin-top:2.2em;padding-bottom:.4em;border-bottom:2px solid var(--bg-muted)} .prose h3{font-size:20px;margin-top:1.8em} .prose ul,.prose ol{padding-left:1.4em;list-style:disc} .prose ol{list-style:decimal} .prose li{margin-bottom:.5em} .prose img{border-radius:var(--radius)} .prose blockquote{ margin:1.6em 0;padding:20px 26px;background:var(--bg-muted); border-left:4px solid var(--accent);border-radius:0 10px 10px 0;color:var(--text-2); } .prose blockquote p:last-child{margin:0} .prose table{width:100%;border-collapse:collapse;font-size:15px} .prose th,.prose td{border:1px solid var(--border);padding:11px 14px;text-align:left} .prose th{background:var(--bg-muted);font-weight:700} .prose--sm{font-size:15.5px} /* ============ 13. Forms ============ */ .cform{margin-top:56px;background:var(--bg-muted);border-radius:var(--radius-lg);padding:44px 44px 48px} .cform__h{font-size:26px;margin:0 0 10px} .cform__lead{color:var(--text-2);margin-bottom:28px} .cform__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:24px} .f{margin:0} .f--full{grid-column:1/-1} .f label{display:block;font-size:14px;font-weight:700;margin-bottom:7px;color:var(--text)} .f label span{color:var(--accent-deep)} .f input,.f select,.f textarea{ width:100%;padding:13px 15px;border:1.5px solid var(--border);border-radius:10px; font:inherit;font-size:15px;background:#fff;color:var(--text);transition:border-color .2s var(--ease); } .f input:focus,.f select:focus,.f textarea:focus{border-color:var(--accent-deep);outline:none} .f textarea{resize:vertical} .hp{position:absolute;left:-9999px} .cform__note{font-size:12.5px;color:var(--text-3);margin:14px 0 0} .alert{padding:14px 20px;border-radius:10px;margin-bottom:24px;font-size:15px;font-weight:600} .alert--ok{background:#E7F7EE;color:#0B6B3A;border:1px solid #B6E4C9} .alert--err{background:#FDECEC;color:#96231F;border:1px solid #F5C2C0} .notice-box{ background:linear-gradient(135deg,var(--brand) 0%,var(--ink) 100%);color:#B4C4D4; border-radius:var(--radius-lg);padding:36px 40px;margin-bottom:44px; display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap; } .notice-box h2{color:#fff;font-size:22px;margin:0 0 6px} .notice-box p{margin:0;font-size:15px;max-width:560px} /* ============ 14. CTA band / footer / fab ============ */ .cta-band{background:var(--accent-deep);color:#fff;padding:56px 0} .cta-band__in{display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap} .cta-band__title{color:#fff;font-size:clamp(22px,2.8vw,32px);margin:0 0 8px} .cta-band__sub{margin:0;color:rgba(255,255,255,.9);font-size:15.5px;max-width:600px} .cta-band__btns{display:flex;gap:12px;flex-wrap:wrap} .cta-band .btn--ghost{border-color:rgba(255,255,255,.55);color:#fff} .cta-band .btn--ghost:hover{background:#fff;color:var(--accent-deep);border-color:#fff} .site-foot{background:var(--ink);color:#8896A5;padding:72px 0 0;font-size:14.5px} .site-foot__grid{display:grid;grid-template-columns:1.7fr 1fr 1.3fr 1fr;gap:48px;padding-bottom:56px} .site-foot__desc{margin:18px 0 0;line-height:1.8;max-width:340px} .site-foot__h{color:#fff;font-size:14px;margin:0 0 18px;letter-spacing:.06em} .site-foot__list{display:grid;gap:11px} .site-foot__list a{color:#8896A5} .site-foot__list a:hover{color:var(--accent-lift)} .site-foot__bar{border-top:1px solid rgba(255,255,255,.09);padding:24px 0;font-size:13px;color:#5C6B7A} .fab{ position:fixed;right:22px;bottom:22px;z-index:90; background:var(--line);color:#fff;font-weight:800;font-size:13px;letter-spacing:.04em; width:60px;height:60px;border-radius:50%;display:grid;place-items:center; box-shadow:0 8px 28px rgba(6,199,85,.42);transition:transform .2s var(--ease); } .fab:hover{transform:scale(1.08);color:#fff} /* ============ 15. Pagination ============ */ .pagination{margin-top:52px;display:flex;justify-content:center} .nav-links{display:flex;gap:8px;flex-wrap:wrap} .page-numbers{ min-width:42px;height:42px;padding:0 14px;display:grid;place-items:center; border:1px solid var(--border);border-radius:10px;color:var(--text-2);font-size:14.5px;font-weight:600; } .page-numbers:hover{border-color:var(--ink);color:var(--ink)} .page-numbers.current{background:var(--ink);border-color:var(--ink);color:#fff} /* ============ 16. Responsive ============ */ @media (max-width:1024px){ .svc,.steps{grid-template-columns:repeat(2,1fr)} .grid--4{grid-template-columns:repeat(3,1fr)} .split{grid-template-columns:1fr;gap:40px} .case-body{grid-template-columns:1fr;gap:40px} .case-body__side{position:static} .prod{grid-template-columns:1fr;gap:32px} .site-foot__grid{grid-template-columns:repeat(2,1fr);gap:40px} } @media (max-width:880px){ .nav{ position:fixed;inset:76px 0 auto;background:#fff;border-bottom:1px solid var(--border); padding:16px 20px 24px;display:none;box-shadow:var(--shadow-lg);max-height:calc(100vh - 76px);overflow-y:auto; } .nav.is-open{display:block} .nav__list{flex-direction:column;align-items:stretch;gap:2px} .nav__list a{padding:13px 12px;font-size:16px} .nav__list .sub-menu{position:static;display:block;border:0;box-shadow:none;padding:0 0 0 16px} .burger{display:flex} .head-cta .btn--line{display:none} .sec{padding:64px 0} .sec__head--row{flex-direction:column;align-items:flex-start;gap:20px} .grid--3,.grid--4,.grid--2{grid-template-columns:repeat(2,1fr)} .stats{grid-template-columns:repeat(2,1fr)} .sup-head__in{grid-template-columns:120px 1fr;gap:24px} .cform{padding:32px 24px 36px} } @media (max-width:600px){ .svc,.steps,.grid--2,.grid--3,.grid--4{grid-template-columns:1fr} .hero{padding:72px 0 64px} .hero__btns{flex-direction:column;align-items:stretch} .cform__grid{grid-template-columns:1fr} .site-foot__grid{grid-template-columns:1fr;gap:36px} .cta-band__btns{width:100%;flex-direction:column} .cta-band__btns .btn{width:100%} .spec>div{flex-direction:column;gap:3px} .spec dd{text-align:left} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important} } /* ============ 17. 版面修正（2026-08-19 視覺檢查後） ============ */ /* 主選單 9 個項目在中等寬度會折行，收緊間距並禁止斷字 */ :root{--wrap:1280px} .site-head__in{gap:18px} .nav__list{gap:2px} .nav__list a{padding:8px 10px;font-size:14.5px;white-space:nowrap} /* 中等寬度直接收成漢堡選單，不要擠成兩行 */ @media (min-width:881px) and (max-width:1120px){ .nav{ position:fixed;inset:76px 0 auto;background:#fff;border-bottom:1px solid var(--border); padding:16px 20px 24px;display:none;box-shadow:var(--shadow-lg); max-height:calc(100vh - 76px);overflow-y:auto; } .nav.is-open{display:block} .nav__list{flex-direction:column;align-items:stretch;gap:2px} .nav__list a{padding:13px 12px;font-size:16px} .burger{display:flex} } /* Hero 高亮改為細底線，原本整塊色在深底上會糊成褐色 */ .hero__title .hl{ background:linear-gradient(180deg,transparent 74%,rgba(188,145,89,.95) 74%,rgba(188,145,89,.95) 91%,transparent 91%); padding:0 4px; } /* 無縮圖時的佔位色改為低彩度藍灰，維持 B2B 調性 */ .ph{background:linear-gradient(135deg,hsl(var(--h1) 15% 85%),hsl(var(--h2) 19% 65%))} .ph span{color:rgba(255,255,255,.8)} /* 服務卡片等高，連結貼齊底部 */ .svc__i{display:flex;flex-direction:column} .svc__i .arrow{margin-top:auto} /* 案例內頁的現場照片牆 */ .case-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0 0} .case-gallery a{display:block;border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:var(--bg-muted)} .case-gallery img{width:100%;height:100%;object-fit:cover;border-radius:0;transition:transform .45s var(--ease)} .case-gallery a:hover img{transform:scale(1.06)} @media (max-width:600px){.case-gallery{grid-template-columns:repeat(2,1fr);gap:8px}} /* 深色面板內的外框按鈕要用白字，否則在深底上等於隱形 */ .panel--cta .btn--ghost{color:#fff;border-color:rgba(255,255,255,.35)} .panel--cta .btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff} /* ============ 18. 洽詢車 ============ */ /* 加入按鈕。卡片本身是一整塊連結，按鈕必須放在連結外面， 否則