/* ============================================================ ANXIN CNC - Front Theme 主蓝 #1e66d0 · 青绿 #2fc6b7 · 深藏青 #1a2b4a ============================================================ */ :root { --blue: #1e66d0; --blue-d: #1450a8; --cyan: #2fc6b7; --cyan-d: #22a295; --navy: #1a2b4a; --navy-2: #223a63; --ink: #2b3a4d; --muted: #64748b; --line: #e5edf5; --bg-soft: #f4f8fb; --bg-cyan: #eefaf8; --radius: 10px; --shadow: 0 10px 30px rgba(26, 43, 74, .10); --shadow-h: 0 16px 40px rgba(26, 43, 74, .16); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Barlow', 'Segoe UI', Arial, 'Microsoft YaHei', sans-serif; color: var(--ink); background: #fff; font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; transition: color .2s; } ul, ol { list-style: none; } h1, h2, h3, h4, b { font-weight: 700; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* ---------- 顶栏 ---------- */ .topbar { background: var(--navy); color: #c6d4e6; font-size: 13px; } .topbar-in { display: flex; justify-content: space-between; align-items: center; height: 38px; } .topbar-l .tb-item { margin-right: 22px; } .topbar-r { display: flex; align-items: center; gap: 18px; } .topbar-r a:hover { color: var(--cyan); } .lang-switch { display: inline-flex; align-items: center; gap: 6px; } .lang-switch select { background: transparent; color: #c6d4e6; border: 1px solid #35507e; border-radius: 4px; font-size: 12px; padding: 2px 6px; cursor: pointer; } .lang-switch select option { color: #1a2b4a; } /* ---------- 头部导航 ---------- */ .site-head { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 90; box-shadow: 0 2px 12px rgba(26,43,74,.06); } .head-in { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 18px; } .logo { display: flex; align-items: center; gap: 10px; } .logo-mark { width: 46px; height: 46px; border-radius: 10px; background: linear-gradient(135deg, var(--blue), var(--cyan)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; letter-spacing: -.5px; box-shadow: 0 6px 14px rgba(30,102,208,.35); } .logo-text { display: flex; flex-direction: column; line-height: 1.15; } .logo-text b { font-size: 20px; color: var(--navy); letter-spacing: .3px; } .logo-text i { font-style: normal; font-size: 11px; color: var(--muted); letter-spacing: 1.6px; text-transform: uppercase; } .main-nav ul { display: flex; } .main-nav > ul > li { position: relative; } .main-nav > ul > li > a { display: block; padding: 28px 13px; font-weight: 600; font-size: 15px; color: var(--navy); position: relative; white-space: nowrap; } .main-nav > ul > li > a::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: 18px; height: 3px; background: var(--cyan); transform: scaleX(0); transition: transform .25s; border-radius: 2px; } .main-nav > ul > li:hover > a { color: var(--blue); } .main-nav > ul > li:hover > a::after { transform: scaleX(1); } .main-nav .sub { position: absolute; top: 100%; left: 0; min-width: 230px; background: #fff; border-radius: 8px; box-shadow: var(--shadow-h); padding: 8px 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .25s; border-top: 3px solid var(--cyan); z-index: 99; max-height: 70vh; overflow-y: auto; } .main-nav li:hover > .sub { opacity: 1; visibility: visible; transform: translateY(0); } .main-nav .sub a { display: block; padding: 9px 18px; font-size: 14px; color: var(--ink); } .main-nav .sub a:hover { background: var(--bg-soft); color: var(--blue); padding-left: 24px; } .head-act { display: flex; align-items: center; gap: 12px; } .head-search { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 20px; padding: 5px 6px 5px 14px; background: var(--bg-soft); } .head-search input { border: 0; background: transparent; outline: none; width: 150px; font-size: 13px; color: var(--ink); } .head-search button { border: 0; background: transparent; color: var(--blue); cursor: pointer; display: flex; } .btn-quote { background: linear-gradient(135deg, var(--blue), var(--cyan)); color: #fff; padding: 10px 20px; border-radius: 6px; font-weight: 700; font-size: 14px; white-space: nowrap; box-shadow: 0 6px 16px rgba(30,102,208,.3); } .btn-quote:hover { opacity: .92; color: #fff; } .nav-toggle { display: none; } /* ---------- Hero ---------- */ .hero { background: radial-gradient(1000px 400px at 85% -10%, rgba(47,198,183,.18), transparent 60%), radial-gradient(800px 500px at -10% 110%, rgba(30,102,208,.25), transparent 60%), linear-gradient(115deg, var(--navy) 0%, var(--navy-2) 55%, #1c4d8f 100%); color: #fff; overflow: hidden; position: relative; } .hero::before { content: ''; position: absolute; inset: 0; opacity: .05; pointer-events: none; background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px); background-size: 46px 46px; } .hero-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding: 70px 20px 80px; position: relative; } .hero-kicker { color: var(--cyan); letter-spacing: 4px; font-weight: 700; font-size: 13px; margin-bottom: 14px; } .hero h1 { font-size: 46px; line-height: 1.12; letter-spacing: .5px; margin-bottom: 18px; text-transform: uppercase; font-family: 'Barlow Condensed', 'Arial Narrow', 'Barlow', sans-serif; font-weight: 700; } .hero-sub { color: #b9c9de; max-width: 560px; margin-bottom: 26px; font-size: 17px; } .hero-btns { display: flex; gap: 14px; flex-wrap: wrap; } .btn { display: inline-block; padding: 13px 30px; border-radius: 6px; font-weight: 700; font-size: 15px; cursor: pointer; border: 0; transition: all .25s; } .btn-main { background: linear-gradient(135deg, var(--blue), var(--cyan)); color: #fff; box-shadow: 0 8px 20px rgba(30,102,208,.35); } .btn-main:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(30,102,208,.45); color: #fff; } .btn-ghost { border: 2px solid rgba(255,255,255,.5); color: #fff; } .btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); } .btn-white { background: #fff; color: var(--blue); } .btn-white:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.2); color: var(--blue-d); } .hero-stats { display: flex; gap: 34px; margin-top: 34px; flex-wrap: wrap; } .hero-stats li { display: flex; flex-direction: column; } .hero-stats b { font-size: 26px; color: var(--cyan); font-family: 'Barlow Condensed', sans-serif; } .hero-stats span { font-size: 12px; color: #9fb2ca; letter-spacing: 1px; text-transform: uppercase; } .hero-img img { border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.15); } /* ---------- 通用 Section ---------- */ .sec { padding: 72px 0; } .sec:nth-of-type(even) { background: var(--bg-soft); } .sec-head { text-align: center; margin-bottom: 44px; } .sec-head i { font-style: normal; color: var(--cyan-d); font-weight: 800; letter-spacing: 4px; font-size: 13px; display: inline-block; padding: 4px 16px; background: var(--bg-cyan); border-radius: 20px; margin-bottom: 12px; } .sec-head h2 { font-size: 34px; color: var(--navy); font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; text-transform: uppercase; letter-spacing: 1px; } .sec-head h2::after { content: ''; display: block; width: 64px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--blue), var(--cyan)); margin: 14px auto 0; } /* 服务流程 */ .process-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; } .p-step { background: #fff; border-radius: var(--radius); padding: 24px 18px; box-shadow: var(--shadow); border-top: 4px solid transparent; transition: all .3s; } .p-step:hover { border-top-color: var(--cyan); transform: translateY(-6px); box-shadow: var(--shadow-h); } .p-num { font-family: 'Barlow Condensed', sans-serif; font-size: 34px; font-weight: 700; color: transparent; -webkit-text-stroke: 1.5px var(--cyan); display: block; margin-bottom: 10px; } .p-step h3 { font-size: 15px; color: var(--navy); margin-bottom: 8px; line-height: 1.35; } .p-step p { font-size: 13px; color: var(--muted); line-height: 1.6; } /* 制造服务卡片 */ .srv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .srv-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: all .3s; display: block; } .srv-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-h); } .srv-card img { height: 170px; width: 100%; object-fit: cover; transition: transform .5s; } .srv-card:hover img { transform: scale(1.06); } .srv-body { display: block; padding: 18px 20px 22px; } .srv-body b { display: block; font-size: 17px; color: var(--navy); margin-bottom: 6px; } .srv-body i { font-style: normal; font-size: 13px; color: var(--muted); display: block; margin-bottom: 12px; min-height: 40px; } .srv-body em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--blue); } /* 客户评价 */ .testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .testi-card { background: #fff; border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); position: relative; } .testi-card::before { content: '"'; position: absolute; top: 4px; left: 18px; font-size: 80px; color: var(--bg-cyan); font-family: Georgia, serif; line-height: 1; } .stars { color: #f5a623; letter-spacing: 3px; margin-bottom: 12px; font-size: 15px; } .testi-card blockquote { font-size: 14px; color: var(--ink); position: relative; margin-bottom: 16px; min-height: 90px; } .testi-card figcaption b { display: block; font-size: 14px; color: var(--navy); } .testi-card figcaption i { font-style: normal; font-size: 12px; color: var(--muted); } /* 工厂 */ .fac-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .fac-card { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: block; } .fac-card img { height: 200px; width: 100%; object-fit: cover; transition: transform .5s; } .fac-card:hover img { transform: scale(1.06); } .fac-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 14px; background: linear-gradient(transparent, rgba(20,34,58,.88)); color: #fff; } .fac-body b { display: block; font-size: 16px; } .fac-body i { font-style: normal; font-size: 12px; color: #a8f0e6; } /* How to work */ .work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .work-step { text-align: center; background: #fff; border-radius: var(--radius); padding: 36px 24px; box-shadow: var(--shadow); position: relative; } .work-step::after { content: '→'; position: absolute; right: -20px; top: 50%; transform: translateY(-50%); color: var(--cyan); font-size: 24px; font-weight: 700; } .work-step:last-child::after { content: none; } .w-ico { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--bg-cyan), #e3f2fd); color: var(--blue); font-size: 26px; font-weight: 700; } .work-step b { display: block; font-size: 18px; color: var(--navy); margin-bottom: 8px; } .work-step p { font-size: 13px; color: var(--muted); } /* Solutions tabs */ .sol-tabs { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .sol-nav { display: flex; border-bottom: 1px solid var(--line); overflow-x: auto; } .sol-btn { flex: 1; border: 0; background: transparent; padding: 16px 10px; font-size: 14px; font-weight: 700; color: var(--muted); cursor: pointer; white-space: nowrap; border-bottom: 3px solid transparent; font-family: inherit; } .sol-btn.on { color: var(--blue); border-bottom-color: var(--cyan); background: var(--bg-soft); } .sol-pane { display: none; grid-template-columns: 1fr 1fr; gap: 30px; padding: 30px; align-items: center; } .sol-pane.on { display: grid; animation: fadeUp .4s; } .sol-pane img { border-radius: 8px; height: 260px; width: 100%; object-fit: cover; } .sol-pane h3 { color: var(--navy); font-size: 22px; margin-bottom: 10px; } .sol-pane p { color: var(--muted); font-size: 14px; margin-bottom: 14px; } .link-more { color: var(--blue); font-weight: 700; font-size: 14px; } @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* 博客卡片 */ .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .blog-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: block; transition: all .3s; } .blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-h); } .blog-card img { height: 190px; width: 100%; object-fit: cover; } .blog-body { display: block; padding: 20px; } .blog-date { font-style: normal; font-size: 12px; color: var(--cyan-d); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; display: block; margin-bottom: 8px; } .blog-body b { display: block; font-size: 16px; color: var(--navy); line-height: 1.4; margin-bottom: 8px; min-height: 44px; } .blog-body i { font-style: normal; font-size: 13px; color: var(--muted); display: block; } .blog-body em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--blue); margin-top: 12px; display: inline-block; } /* CTA */ .cta-band { background: linear-gradient(115deg, var(--blue) 0%, var(--cyan) 130%), var(--blue); color: #fff; padding: 54px 0; } .cta-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .cta-in h2 { font-size: 28px; font-family: 'Barlow Condensed', sans-serif; letter-spacing: .5px; } .cta-in p { color: #d9f6f2; font-size: 15px; } /* ---------- 内页横幅（图1：青色横幅） ---------- */ .page-banner { background: radial-gradient(600px 240px at 90% -20%, rgba(255,255,255,.22), transparent 60%), linear-gradient(100deg, var(--cyan) 0%, #35b3d6 100%); color: #fff; padding: 44px 0; } .page-banner h1 { font-size: 32px; font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; letter-spacing: .5px; } .crumbs { display: flex; gap: 8px; margin-top: 10px; font-size: 13px; color: #e4fbf8; flex-wrap: wrap; } .crumbs a:hover { text-decoration: underline; color: #fff; } .crumbs em { font-style: normal; opacity: .6; } /* ---------- 详情页（图1：左 TOC + 右正文） ---------- */ .detail-wrap { padding: 34px 20px 60px; } .detail-meta { display: flex; gap: 22px; color: var(--muted); font-size: 13px; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 26px; flex-wrap: wrap; } .detail-grid { display: grid; grid-template-columns: 280px 1fr; gap: 34px; align-items: start; } .detail-toc { position: sticky; top: 96px; } .toc-box { background: var(--bg-soft); border-radius: var(--radius); padding: 20px; border: 1px solid var(--line); } .toc-box h3 { font-size: 15px; color: var(--navy); padding-bottom: 10px; border-bottom: 2px solid var(--cyan); margin-bottom: 12px; letter-spacing: .5px; } .toc-box li a { display: block; padding: 7px 10px; font-size: 13.5px; color: var(--muted); border-left: 3px solid transparent; border-radius: 0 6px 6px 0; line-height: 1.45; } .toc-box li a:hover { color: var(--blue); background: #fff; } .toc-box li a.on { color: var(--blue); border-left-color: var(--cyan); background: #fff; font-weight: 700; } .toc-cta { display: block; margin-top: 16px; background: linear-gradient(135deg, var(--blue), var(--cyan)); color: #fff; border-radius: var(--radius); padding: 18px; text-align: center; box-shadow: 0 10px 24px rgba(30,102,208,.3); } .toc-cta b { display: block; font-size: 17px; } .toc-cta i { font-style: normal; font-size: 12px; color: #e0fbf8; } .toc-cta:hover { transform: translateY(-2px); color: #fff; } .detail-art { min-width: 0; } .art-lead { font-size: 17px; color: var(--navy); background: var(--bg-soft); border-left: 4px solid var(--cyan); padding: 14px 18px; border-radius: 0 8px 8px 0; margin-bottom: 24px; } .art-fallback { font-size: 13px; color: var(--muted); background: #fff8e6; border: 1px solid #f0dfa8; padding: 8px 14px; border-radius: 6px; margin-bottom: 18px; } .art-sec { margin-bottom: 34px; scroll-margin-top: 100px; } .detail-art h2, .art-sec h2 { font-size: 24px; color: var(--navy); margin: 0 0 16px; padding-left: 14px; position: relative; line-height: 1.35; font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; letter-spacing: .3px; } .detail-art h2::before, .art-sec h2::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 5px; border-radius: 3px; background: linear-gradient(180deg, var(--blue), var(--cyan)); } .detail-art h3, .art-sec h3 { font-size: 18px; color: var(--navy); margin: 20px 0 10px; } .detail-art p, .art-sec p { margin-bottom: 14px; color: #3d4d61; } .detail-art ul, .art-sec ul { margin: 0 0 16px; padding-left: 4px; } .detail-art ul li, .art-sec ul li { padding-left: 22px; position: relative; margin-bottom: 8px; color: #3d4d61; } .detail-art ul li::before, .art-sec ul li::before { content: ''; position: absolute; left: 4px; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); } .detail-art img, .art-sec img { border-radius: 8px; margin: 10px auto 20px; box-shadow: var(--shadow); width: 100%; } .detail-art strong, .art-sec strong { color: var(--navy); } .detail-art a, .art-sec a { color: var(--blue); font-weight: 600; } .docx-tbl, .detail-art table { width: 100%; border-collapse: collapse; margin: 10px 0 20px; font-size: 14px; } .detail-art table td, .detail-art table th, .docx-tbl td { border: 1px solid var(--line); padding: 10px 14px; } .detail-art table tr:nth-child(even), .docx-tbl tr:nth-child(even) { background: var(--bg-soft); } .art-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); } .art-prev, .art-next { flex: 1; background: var(--bg-soft); border-radius: 8px; padding: 14px 18px; border: 1px solid var(--line); max-width: 48%; } .art-next { text-align: right; } .art-prev:hover, .art-next:hover { border-color: var(--cyan); } .art-prev i, .art-next i { font-style: normal; font-size: 12px; color: var(--muted); display: block; } .art-prev b, .art-next b { font-size: 14px; color: var(--navy); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .art-related { margin-top: 30px; } .art-related h3 { font-size: 18px; color: var(--navy); padding-bottom: 10px; border-bottom: 2px solid var(--cyan); margin-bottom: 12px; } .art-related li { display: flex; justify-content: space-between; gap: 14px; padding: 10px 4px; border-bottom: 1px dashed var(--line); font-size: 14px; } .art-related li a:hover { color: var(--blue); } .art-related li span { color: var(--muted); font-size: 12px; white-space: nowrap; } /* ---------- 列表页 ---------- */ .list-wrap { padding: 34px 20px 60px; } .cat-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; } .cat-tabs a { padding: 8px 22px; border-radius: 20px; background: var(--bg-soft); color: var(--muted); font-size: 14px; font-weight: 600; border: 1px solid var(--line); } .cat-tabs a.on, .cat-tabs a:hover { background: linear-gradient(135deg, var(--blue), var(--cyan)); color: #fff; border-color: transparent; } .list-pager { text-align: center; margin-top: 36px; } .pager a, .pager .cur { display: inline-block; min-width: 38px; padding: 8px 12px; margin: 0 4px; border-radius: 6px; background: var(--bg-soft); border: 1px solid var(--line); font-size: 14px; color: var(--muted); } .pager .cur { background: var(--blue); color: #fff; border-color: var(--blue); font-weight: 700; } .pager a:hover { border-color: var(--cyan); color: var(--blue); } .empty-box { text-align: center; padding: 60px 0; color: var(--muted); } .empty-box a { color: var(--blue); font-weight: 700; } /* ---------- 频道卡片页 / 单页 ---------- */ .page-wrap { padding: 40px 20px 70px; } .page-intro { margin-bottom: 30px; color: #3d4d61; } .ch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .ch-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: block; transition: all .3s; border: 1px solid var(--line); } .ch-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-h); border-color: var(--cyan); } .ch-card img { height: 180px; width: 100%; object-fit: cover; } .ch-body { display: block; padding: 18px 20px 20px; } .ch-body b { display: block; font-size: 16px; color: var(--navy); margin-bottom: 6px; } .ch-body i { font-style: normal; font-size: 13px; color: var(--muted); display: block; margin-bottom: 10px; min-height: 40px; } .ch-body em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--blue); } .page-art { background: #fff; border-radius: var(--radius); padding: 34px 38px; box-shadow: var(--shadow); } .page-art h2 { font-size: 24px; color: var(--navy); margin: 26px 0 14px; padding-left: 14px; position: relative; } .page-art h2::before { content: ''; position: absolute; left: 0; top: 5px; bottom: 5px; width: 5px; border-radius: 3px; background: linear-gradient(180deg, var(--blue), var(--cyan)); } .page-art p { margin-bottom: 14px; color: #3d4d61; } .page-art ul { margin: 0 0 16px; } .page-art ul li { padding-left: 22px; position: relative; margin-bottom: 8px; } .page-art ul li::before { content: ''; position: absolute; left: 4px; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); } .page-art img { border-radius: 8px; margin: 12px 0 20px; box-shadow: var(--shadow); } /* ---------- 联系页 ---------- */ .contact-wrap { padding: 44px 20px 70px; } .contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 34px; align-items: start; } .contact-info h2, .contact-form h2 { font-size: 22px; color: var(--navy); margin-bottom: 16px; } .contact-info > p { color: var(--muted); margin-bottom: 22px; } .ci-list li { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px dashed var(--line); font-size: 14px; } .ci-list b { color: var(--navy); min-width: 90px; } .ci-list a { color: var(--blue); } .contact-form { background: #fff; border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); } .f-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .f-field { margin-bottom: 16px; } .f-field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; font-weight: 600; } .f-field input, .f-field textarea { width: 100%; padding: 11px 14px; border: 1px solid #d5dee8; border-radius: 6px; font-size: 14px; font-family: inherit; outline: none; transition: border .2s; background: #fbfdff; } .f-field input:focus, .f-field textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(47,198,183,.15); } .btn-send { width: 100%; } .form-ok { background: #e8f8f1; border: 1px solid #b7e4cd; color: #0a7d4f; padding: 12px 16px; border-radius: 6px; margin-bottom: 18px; font-size: 14px; } .form-err { background: #fdecea; border: 1px solid #f5c6c0; color: #a94438; padding: 12px 16px; border-radius: 6px; margin-bottom: 18px; font-size: 14px; } /* ---------- 404 ---------- */ .notfound { text-align: center; padding: 90px 20px 110px; } .notfound h1 { font-size: 110px; font-family: 'Barlow Condensed', sans-serif; color: transparent; -webkit-text-stroke: 2px var(--cyan); line-height: 1; } .notfound p { color: var(--muted); margin: 14px 0 26px; } /* ---------- 右侧悬浮 ---------- */ .float-bar { position: fixed; right: 14px; bottom: 90px; z-index: 80; display: flex; flex-direction: column; gap: 8px; } .fb-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 58px; height: 58px; border-radius: 10px; color: #fff; font-size: 10px; font-weight: 600; box-shadow: 0 8px 18px rgba(26,43,74,.22); transition: transform .2s; } .fb-item:hover { transform: translateY(-3px); } .fb-wa { background: #25d366; } .fb-mail { background: var(--blue); } .fb-tel { background: var(--navy-2); } .fb-top { background: var(--cyan); } /* ---------- 页脚 ---------- */ .site-foot { background: var(--navy); color: #9fb2ca; margin-top: 40px; } .foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 36px; padding: 54px 20px 40px; } .foot-col h4 { color: #fff; font-size: 16px; margin-bottom: 16px; position: relative; padding-bottom: 10px; } .foot-col h4::after { content: ''; position: absolute; left: 0; bottom: 0; width: 30px; height: 3px; border-radius: 2px; background: var(--cyan); } .foot-col p, .foot-col li { font-size: 13.5px; line-height: 1.9; } .foot-col ul li a:hover { color: var(--cyan); } .foot-addr { margin-top: 12px; } .foot-contact li b { color: #c6d4e6; } .foot-quote { margin-top: 16px; display: inline-block; } .foot-bar { border-top: 1px solid #2a4066; padding: 16px 0; font-size: 13px; } .foot-bar .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .foot-links a { margin-left: 18px; } .foot-links a:hover { color: var(--cyan); } /* ---------- 响应式 ---------- */ @media (max-width: 1080px) { .process-grid { grid-template-columns: repeat(3, 1fr); } .srv-grid { grid-template-columns: repeat(2, 1fr); } .hero h1 { font-size: 36px; } } @media (max-width: 860px) { .topbar-r a { display: none; } .head-search input { width: 100px; } .hero-in { grid-template-columns: 1fr; padding: 46px 20px 56px; } .hero-img { order: -1; } .detail-grid { grid-template-columns: 1fr; } .detail-toc { position: static; } .toc-box ul { display: flex; flex-wrap: wrap; gap: 4px; } .testi-grid, .fac-grid, .work-grid, .blog-grid, .ch-grid { grid-template-columns: 1fr 1fr; } .contact-grid, .sol-pane { grid-template-columns: 1fr; } .foot-grid { grid-template-columns: 1fr 1fr; } .main-nav { position: fixed; top: 114px; left: 0; right: 0; background: #fff; box-shadow: var(--shadow-h); max-height: 0; overflow: auto; transition: max-height .3s; z-index: 95; } .main-nav.open { max-height: 70vh; } .main-nav ul { flex-direction: column; padding: 10px 20px 20px; } .main-nav > ul > li > a { padding: 12px 0; border-bottom: 1px solid var(--line); } .main-nav > ul > li > a::after { content: none; } .main-nav > ul > li.has-sub > a::after { content: none; } .main-nav .sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border-top: 0; padding-left: 14px; max-height: none; display: none; } .main-nav li:hover > .sub { display: block; } .nav-toggle { display: flex; flex-direction: column; gap: 5px; background: transparent; border: 0; cursor: pointer; padding: 6px; } .nav-toggle span { width: 24px; height: 3px; border-radius: 2px; background: var(--navy); display: block; } } @media (max-width: 560px) { .process-grid, .testi-grid, .fac-grid, .work-grid, .blog-grid, .ch-grid { grid-template-columns: 1fr; } .f-row2 { grid-template-columns: 1fr; } .foot-grid { grid-template-columns: 1fr; } .hero h1 { font-size: 30px; } .sec { padding: 50px 0; } .work-step::after { content: none; } } /* ============================================================ 内页统一美化 v2 —— 与首页视觉语言对齐（kicker + Barlow Condensed 大标题 + 蓝青渐变 + 白卡片阴影体系） ============================================================ */ /* ---------- 内页横幅：与首页 Hero 同语言 ---------- */ .page-banner { position: relative; overflow: hidden; color: #fff; padding: 58px 0 52px; background: radial-gradient(900px 320px at 88% -30%, rgba(47,198,183,.30), transparent 60%), radial-gradient(700px 380px at -8% 130%, rgba(30,102,208,.35), transparent 60%), linear-gradient(115deg, var(--navy) 0%, var(--navy-2) 55%, #1c4d8f 100%); } .page-banner::before { content: ''; position: absolute; inset: 0; opacity: .05; pointer-events: none; background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px); background-size: 46px 46px; } .page-banner .container { position: relative; } .pb-kicker { color: var(--cyan); letter-spacing: 4px; font-weight: 700; font-size: 12.5px; text-transform: uppercase; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; } .pb-kicker::before { content: ''; width: 26px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--blue), var(--cyan)); } .page-banner h1 { font-size: 40px; line-height: 1.15; font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; text-transform: uppercase; letter-spacing: .5px; } .crumbs { margin-top: 14px; color: rgba(233,244,255,.75); font-size: 13px; } .crumbs a:hover { color: var(--cyan); } .crumbs span { color: #fff; font-weight: 600; } /* ---------- 内页内容区统一浅底，白卡片更立体 ---------- */ .list-wrap, .detail-wrap, .page-wrap, .contact-wrap { background: var(--bg-soft); } /* ---------- 内容卡片：等高 + 图片动效（无封面时自动纯文字卡） ---------- */ .blog-card, .ch-card { display: flex; flex-direction: column; } .blog-card img, .ch-card img { flex: none; width: 100%; transition: transform .45s; } .blog-card:hover img, .ch-card:hover img { transform: scale(1.06); } .blog-body { flex: 1; display: flex; flex-direction: column; padding: 22px; } .blog-body b { min-height: 0; font-size: 16.5px; } .blog-date { align-self: flex-start; background: var(--bg-cyan); color: var(--cyan-d); padding: 3px 12px; border-radius: 20px; margin-bottom: 12px; font-size: 11.5px; } .blog-body em { margin-top: auto; padding-top: 14px; transition: transform .25s; } .blog-card:hover em { transform: translateX(4px); } .ch-body { flex: 1; display: flex; flex-direction: column; } .ch-body em { margin-top: auto; padding-top: 6px; transition: transform .25s; } .ch-card:hover em { transform: translateX(4px); } /* ---------- 分类 Tab ---------- */ .cat-tabs a { background: #fff; box-shadow: 0 3px 10px rgba(26,43,74,.06); } .cat-tabs a:hover { transform: translateY(-2px); } /* ---------- 详情页 ---------- */ .detail-meta span { display: inline-flex; align-items: center; background: #fff; border: 1px solid var(--line); padding: 5px 14px; border-radius: 20px; font-size: 12.5px; } .toc-box { background: #fff; border: 0; box-shadow: var(--shadow); } .art-prev, .art-next { background: #fff; box-shadow: 0 4px 12px rgba(26,43,74,.05); transition: all .25s; } .art-prev:hover, .art-next:hover { border-color: var(--cyan); transform: translateY(-3px); box-shadow: var(--shadow); } .art-related h3 { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-size: 20px; letter-spacing: .5px; text-transform: uppercase; } .art-related li { border-bottom: 1px solid var(--line); border-radius: 8px; padding: 11px 12px; transition: background .2s; } .art-related li:hover { background: #fff; } /* ---------- 单页排版补齐 ---------- */ .page-art h3 { font-size: 19px; color: var(--navy); margin: 22px 0 10px; } .page-art h2:first-child { margin-top: 0; } .page-art blockquote { margin: 18px 0; padding: 14px 20px; background: var(--bg-soft); border-left: 4px solid var(--cyan); border-radius: 0 8px 8px 0; color: #3d4d61; } .page-art ol { margin: 0 0 16px; padding-left: 24px; list-style: decimal; } .page-art ol li { margin-bottom: 6px; color: #3d4d61; } /* ---------- 空状态 / 分页 / 404 ---------- */ .empty-box { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 70px 20px; font-size: 15px; } .pager a { background: #fff; } .notfound { padding: 80px 20px 100px; } .notfound h1 { font-size: 130px; } /* ---------- 响应式补充 ---------- */ @media (max-width: 860px) { .page-banner { padding: 44px 0 40px; } .page-banner h1 { font-size: 30px; } } @media (max-width: 560px) { .page-banner h1 { font-size: 26px; } .page-art { padding: 24px 20px; } .detail-wrap, .list-wrap, .page-wrap, .contact-wrap { padding-left: 16px; padding-right: 16px; } } /* ============================================================ v3 —— 品牌标识 + 全站宽度一致性 ============================================================ */ /* ---------- LOGO 图片（后台上传后替换文字 LOGO） ---------- */ .logo-img { height: 48px; width: auto; max-width: 240px; object-fit: contain; display: block; } @media (max-width: 560px) { .logo-img { height: 38px; max-width: 180px; } } /* ---------- 全站内容区宽度统一（唯一标准，勿在子模板另设宽度） ---------- 所有
/
/