/* ============================================================ 共用基础样式 —— 唯一源 (source of truth) 三个站点共用此文件;各站的“品牌色/字号”等差异 通过 index.html 里的 :root 变量覆盖即可,不要改这里。 修改样式后,运行项目根目录的 ./build.sh 同步到各站点目录。 ============================================================ */ /* ---- 主题变量(默认值,各站点会覆盖)---- */ :root { --brand: #0e7490; /* 主品牌色 */ --brand-dark: #155e75; /* 深色(悬停/标题)*/ --brand-soft: #ecfeff; /* 浅色背景块 */ --ink: #0f172a; /* 正文主色 */ --ink-soft: #475569; /* 次要文字 */ --line: #e2e8f0; /* 描边/分隔线 */ --bg: #ffffff; --radius: 14px; --maxw: 1080px; --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; } /* ---- 基础重置 ---- */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.7; -webkit-font-smoothing: antialiased; } a { color: var(--brand); text-decoration: none; } img { max-width: 100%; display: block; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; } .section { padding: 72px 0; } .section--soft { background: var(--brand-soft); } .eyebrow { color: var(--brand); font-weight: 600; letter-spacing: .08em; font-size: 13px; text-transform: uppercase; } h1, h2, h3 { line-height: 1.3; color: var(--ink); } h2.section-title { font-size: clamp(24px, 4vw, 34px); margin: 8px 0 12px; } .section-sub { color: var(--ink-soft); max-width: 640px; } .center { text-align: center; margin-left: auto; margin-right: auto; } /* ---- 顶部导航 ---- */ .nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.88); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--line); } .nav .container { display: flex; align-items: center; justify-content: space-between; height: 64px; } .brand { font-weight: 800; font-size: 19px; color: var(--brand-dark); letter-spacing: .02em; } .nav-links { display: flex; gap: 28px; align-items: center; } .nav-links a { color: var(--ink-soft); font-size: 15px; } .nav-links a:hover { color: var(--brand); } /* ---- 按钮 ---- */ .btn { display: inline-block; border: 0; cursor: pointer; background: var(--brand); color: #fff; font-weight: 600; font-size: 15px; padding: 12px 24px; border-radius: 999px; transition: transform .15s, background .2s; } .btn:hover { background: var(--brand-dark); transform: translateY(-1px); } .btn--ghost { background: transparent; color: var(--brand); border: 1.5px solid var(--brand); } .btn--ghost:hover { background: var(--brand); color: #fff; } .btn--lg { padding: 15px 34px; font-size: 16px; } /* ---- Hero ---- */ .hero { padding: 84px 0 64px; background: linear-gradient(180deg, var(--brand-soft) 0%, #fff 100%); } .hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; } .hero h1 { font-size: clamp(30px, 5vw, 48px); margin: 10px 0 18px; } .hero p.lead { font-size: 18px; color: var(--ink-soft); margin-bottom: 28px; } .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; } .hero-stats { display: flex; gap: 32px; margin-top: 36px; } .hero-stats .num { font-size: 28px; font-weight: 800; color: var(--brand-dark); } .hero-stats .label { font-size: 13px; color: var(--ink-soft); } /* ---- 卡片网格 ---- */ .grid { display: grid; gap: 22px; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; transition: box-shadow .2s, transform .2s; } .card:hover { box-shadow: 0 10px 30px rgba(15,23,42,.08); transform: translateY(-2px); } .card .ico { width: 44px; height: 44px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 14px; } .card h3 { font-size: 18px; margin-bottom: 8px; } .card p { color: var(--ink-soft); font-size: 15px; } /* ---- 流程步骤 ---- */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; } .step { position: relative; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); } .step::before { counter-increment: step; content: counter(step); display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; background: var(--brand); color: #fff; font-weight: 700; margin-bottom: 12px; } .step h3 { font-size: 16px; margin-bottom: 6px; } .step p { color: var(--ink-soft); font-size: 14px; } /* ---- 留资表单 ---- */ .lead-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: 0 12px 40px rgba(15,23,42,.06); } .lead-form h3 { font-size: 20px; margin-bottom: 6px; } .lead-form .form-sub { color: var(--ink-soft); font-size: 14px; margin-bottom: 18px; } .field { margin-bottom: 14px; } .field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; } .field input, .field select, .field textarea { width: 100%; padding: 12px 14px; font-size: 15px; font-family: inherit; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } .form-note { font-size: 12px; color: var(--ink-soft); margin-top: 10px; } .form-msg { font-size: 14px; margin-top: 12px; padding: 10px 14px; border-radius: 8px; display: none; } .form-msg.ok { display: block; background: #ecfdf5; color: #047857; } .form-msg.err { display: block; background: #fef2f2; color: #b91c1c; } /* ---- 页脚 ---- */ .footer { background: #0f172a; color: #cbd5e1; padding: 48px 0 28px; font-size: 14px; } .footer a { color: #cbd5e1; } .footer a:hover { color: #fff; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; margin-bottom: 28px; } .footer .brand { color: #fff; margin-bottom: 10px; } .footer h4 { color: #fff; font-size: 15px; margin-bottom: 12px; } .footer ul { list-style: none; } .footer li { margin-bottom: 8px; } .footer-bottom { border-top: 1px solid #1e293b; padding-top: 18px; color: #94a3b8; font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; } .disclaimer { color: #94a3b8; font-size: 12px; line-height: 1.6; margin-top: 14px; max-width: 760px; } /* ---- 响应式 ---- */ @media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } .steps { grid-template-columns: 1fr 1fr; } .footer-grid { grid-template-columns: 1fr; } .nav-links { display: none; } /* 移动端隐藏锚点,只留 CTA */ } @media (max-width: 520px) { .grid-3, .grid-4, .steps { grid-template-columns: 1fr; } .hero-stats { gap: 22px; } .section { padding: 52px 0; } }