/* ========================================================================== 鸿海物流 Honghai Logistics 官网 — 设计系统 风格：爱马仕式「白与焰 Blanc & Feu」——暖白纸面 + 发丝细线 + 从容留白 + 正宗爱马仕橙 #F37021 签名色（严格配额）+ 拉丁衬线大标题 + 无衬线正文。 纯静态，仅系统字体，无外链。双语英/中： + .en/.zh 切换。 ========================================================================== */ :root { /* ===== 浅色画布 ===== */ --bg: #ffffff; --bg-alt: #f7f3ec; /* 暖米白，交替板块 / 页脚 */ --surface: #ffffff; --ink: #1f1b18; /* 正文/标题近黑暖墨 */ --muted: #6b6259; /* 次要文字 (AA) */ --line: #e8e1d6; /* 发丝分隔线/描边 */ --line-soft: #f0eadf; /* ===== 爱马仕签名橙 ===== */ --orange: #f37021; /* 品牌/图形：logo、六边形、rule、≥28px 大字 */ --orange-btn: #e2601a; /* 实心按钮填充（白字 AA 大字）*/ --orange-btn-hover: #c6531a; --orange-deep: #c9500f; /* 小字/链接/eyebrow */ --orange-tint: #fbeee4; /* 芯片/标签底 */ --orange-tint-line: #f3dccb; /* ===== 字体（仅系统字体）===== */ --font-serif: Georgia, Cambria, "Times New Roman", "PingFang SC", "Microsoft YaHei", serif; --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; /* ===== 圆角（近直角 couture）===== */ --radius-btn: 4px; --radius-card: 6px; --radius-box: 20px; /* 唯一那块橙盒 CTA */ /* ===== 阴影：极少、极轻、暖中性 ===== */ --shadow-xs: 0 1px 2px rgba(31,27,24,.04); --shadow-card-hover: 0 10px 30px rgba(31,27,24,.07); --shadow-float: 0 24px 48px rgba(31,27,24,.10); /* ===== 留白节奏 ===== */ --section-pad: clamp(80px, 10vw, 140px); --container: 1240px; --gutter: clamp(20px, 6vw, 64px); } /* ---- reset / base ---- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); color: var(--ink); background: var(--bg); line-height: 1.7; font-size: 16px; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; } svg { display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { margin: 0; font-family: var(--font-serif); font-weight: 500; line-height: 1.15; letter-spacing: -.01em; color: var(--ink); } p { margin: 0; } /* 双语 */ html[lang="en"] .zh { display: none; } html[lang="zh"] .en { display: none; } /* ========================================================================== 图标尺寸硬约束 —— 防 SVG 巨大化（务必保留） ========================================================================== */ [class*="__ico"] svg, .svc-card svg, .feature svg, .step svg, .cov-card svg, .info-row svg, .lead a svg, .btn svg { width: 22px; height: 22px; flex: none; } .brand__mark { width: 40px; height: 40px; flex: none; object-fit: contain; border-radius: 8px; } .hero__art svg, .media-card svg { width: 100%; height: auto; } /* ========================================================================== 布局 / 通用 ========================================================================== */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); } .section { background: var(--bg); padding-block: var(--section-pad); } .section--soft { background: var(--bg-alt); } .section-head { max-width: 720px; margin: 0 auto clamp(40px, 6vw, 72px); } .section-head.center, .center { text-align: center; } .section-title { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.15; } .section-sub { margin-top: 16px; color: var(--muted); font-size: 1.08rem; } /* eyebrow + 签名起笔短横 */ .eyebrow { display: inline-flex; align-items: center; gap: .6em; font-family: var(--font-sans); font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--orange-deep); margin-bottom: 14px; } .eyebrow::before { content: ""; width: 7px; height: 8px; flex: none; background: var(--orange); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); } .section-head.center .eyebrow { justify-content: center; } .rule { width: 40px; height: 2px; background: var(--orange); border: 0; margin: 16px 0 0; } .section-head.center .rule { margin-inline: auto; } /* ========================================================================== 按钮 —— 近直角、扁平、橙色配额 ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; font-family: var(--font-sans); font-size: 1rem; font-weight: 700; letter-spacing: .02em; padding: 14px 28px; border-radius: var(--radius-btn); border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background .2s, border-color .2s, color .2s, transform .2s; } .btn--lg { padding: 16px 32px; } .btn--accent { background: var(--orange-btn); color: #fff; } .btn--accent:hover { background: var(--orange-btn-hover); transform: translateY(-1px); } .btn--outline { background: transparent; border-color: var(--line); color: var(--ink); } .btn--outline:hover { border-color: var(--orange); color: var(--orange-deep); } .btn--light { background: #fff; color: var(--orange-deep); } /* 仅橙盒内 */ .btn--light:hover { background: #fff4ec; } .btn--ghost { background: transparent; border-color: rgba(255,255,255,.6); color: #fff; } /* 仅橙盒内 */ .btn--ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; } .btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; } /* ========================================================================== Header —— 浅色毛玻璃 + 发丝底线；员工登录=右上角低调小链接 ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .nav { display: flex; align-items: center; gap: 20px; height: 74px; max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); } .brand { display: flex; align-items: center; gap: 11px; margin-right: auto; } .brand__text { display: flex; flex-direction: column; line-height: 1.05; } .brand__name { font-family: var(--font-sans); font-weight: 600; font-size: 1.1rem; color: var(--ink); letter-spacing: -.01em; } .brand__sub { font-size: .66rem; letter-spacing: .26em; text-transform: uppercase; color: var(--orange-deep); font-weight: 600; } .nav__links { display: flex; align-items: center; gap: 4px; } .nav__links a { padding: 8px 14px; border-radius: 6px; font-size: .92rem; color: var(--muted); transition: color .15s, background .15s; } .nav__links a:hover { color: var(--orange-deep); } .nav__links a.is-active { color: var(--ink); } .nav__tools { display: flex; align-items: center; gap: 14px; } .lang-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: #fff; } .lang-toggle button { border: 0; background: transparent; padding: 6px 11px; font-weight: 700; font-size: .8rem; cursor: pointer; color: var(--muted); font-family: inherit; } .lang-toggle button.is-active { background: var(--orange-btn); color: #fff; } .nav__login { color: var(--muted); font-size: .85rem; font-weight: 500; } .nav__login:hover { color: var(--orange-deep); } .nav__burger { display: none; border: 0; background: transparent; padding: 8px; cursor: pointer; } .nav__burger svg { width: 26px; height: 26px; stroke: var(--ink); } /* ========================================================================== Hero —— 浅色编辑式 ========================================================================== */ .hero { position: relative; overflow: hidden; background: var(--bg-alt); padding-block: clamp(96px, 12vw, 160px); } .hero::before { content: ""; position: absolute; right: -4%; top: 8%; width: min(38vw, 420px); aspect-ratio: 1; background: var(--orange); opacity: .06; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); pointer-events: none; } .hero__grid { position: relative; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 6vw, 80px); align-items: center; } .hero__badge { display: inline-flex; align-items: center; gap: .5em; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .4em .9em; color: var(--muted); font-size: .85rem; margin-bottom: 22px; } .hero__badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); } .hero h1 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.08; letter-spacing: -.01em; color: var(--ink); } .hero h1 .accent { color: var(--orange); } /* 首屏唯一橙字 */ .hero__sub { margin-top: 1.1em; color: var(--muted); font-size: 1.1rem; line-height: 1.7; max-width: 44ch; } .hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; } .hero__stats { display: flex; margin-top: clamp(32px, 5vw, 56px); } .hero__stat { padding-inline: clamp(18px, 3vw, 32px); } .hero__stat:first-child { padding-left: 0; } .hero__stat + .hero__stat { border-left: 1px solid var(--line); } .hero__stat .n { display: block; font-family: var(--font-serif); font-size: 1.7rem; color: var(--ink); } .hero__stat .l { color: var(--muted); font-size: .82rem; } .hero__art { background: #fff; border: 1px solid var(--line); border-radius: 2px; box-shadow: var(--shadow-float); overflow: hidden; } /* 内页横幅 —— 同样浅色 */ .page-hero { background: var(--bg-alt); border-bottom: 1px solid var(--line); padding-block: clamp(64px, 9vw, 120px); } .page-hero .container { max-width: var(--container); } .page-hero h1 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.9rem, 4vw, 3rem); color: var(--ink); } .page-hero p { margin-top: 16px; color: var(--muted); font-size: 1.1rem; max-width: 60ch; } /* ========================================================================== 服务卡 + 六边形签名芯片 ========================================================================== */ .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .svc-detail { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .svc-card, .cov-card, .info-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: clamp(28px, 3vw, 36px); box-shadow: var(--shadow-xs); transition: border-color .2s, transform .2s, box-shadow .2s; } .svc-card:hover, .cov-card:hover { border-color: var(--orange-tint-line); transform: translateY(-3px); box-shadow: var(--shadow-card-hover); } .svc-card h3 { font-size: 1.35rem; margin-bottom: 10px; } .svc-card p { color: var(--muted); } .svc-card__ico, .feature__ico, .info-row__ico { width: 44px; height: 44px; flex: none; display: grid; place-items: center; margin-bottom: 18px; background: var(--orange-tint); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); } .svc-card__ico svg, .feature__ico svg, .info-row__ico svg { stroke: var(--orange-deep); fill: none; stroke-width: 1.7; } .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .tag, .pill { background: var(--orange-tint); color: var(--orange-deep); border-radius: 999px; padding: .28em .8em; font-size: .8rem; font-weight: 600; } /* ========================================================================== 覆盖区域 ========================================================================== */ .coverage { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; max-width: 940px; margin-inline: auto; } .cov-card h4 { font-size: 1.15rem; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; } .cov-card .pill { display: inline-block; margin-bottom: 6px; } .cov-card .cities { color: var(--muted); font-size: .95rem; margin-top: 10px; line-height: 1.8; } /* ========================================================================== 左右图文 ========================================================================== */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 72px); align-items: center; } .feature-list { display: grid; gap: 22px; margin-top: 26px; } .feature { display: flex; gap: 15px; align-items: flex-start; } .feature__ico { margin-bottom: 0; } .feature h4 { font-size: 1.06rem; margin-bottom: 3px; } .feature p { color: var(--muted); font-size: .96rem; } .media-card { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--orange); border-radius: var(--radius-card); padding: 34px; box-shadow: var(--shadow-xs); } /* ========================================================================== 四步流程 —— 超大衬线序号 01–04 + 水平发丝线 ========================================================================== */ .steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3vw, 40px); } .steps::before { content: ""; position: absolute; left: 0; right: 0; top: 1.7rem; height: 1px; background: var(--line); } .step { position: relative; background: transparent; } .step__n { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.6rem, 4vw, 3.4rem); line-height: 1; color: var(--orange); } .step__n::before { content: counter(step, decimal-leading-zero); counter-increment: step; } .steps { counter-reset: step; } .step h4 { font-size: 1.15rem; margin: .4em 0 6px; } .step p { color: var(--muted); font-size: .95rem; } /* ========================================================================== 报价咨询 —— 浅色 + 仅下划线表单（保留清晰标签） ========================================================================== */ .quote { background: var(--bg-alt); border-radius: var(--radius-box); padding: clamp(28px, 5vw, 56px); } .quote__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 56px); align-items: center; } .quote__grid h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); } .quote__grid > div > p { color: var(--muted); margin-top: 14px; max-width: 42ch; } .quote .lead { margin-top: 22px; display: grid; gap: 12px; } .quote .lead a { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; } .quote .lead a:hover { color: var(--orange-deep); } .quote .lead a svg { stroke: var(--orange-deep); } .qform { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); padding: clamp(24px, 3vw, 34px); } .qform .row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .qform .field { margin-bottom: 20px; } .qform label { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: .5em; } .qform input, .qform textarea, .qform select { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: .55em 0; color: var(--ink); font-family: var(--font-sans); font-size: 1rem; } .qform textarea { resize: vertical; min-height: 76px; } .qform input::placeholder, .qform textarea::placeholder { color: #b6ab9f; } .qform input:focus, .qform textarea:focus, .qform select:focus { outline: none; border-bottom: 2px solid var(--orange); } .qform button { margin-top: 6px; } .qform .note { font-size: .82rem; color: var(--muted); margin-top: 12px; } /* ========================================================================== CTA —— 全站唯一一块实心橙「爱马仕橙盒」 ========================================================================== */ .cta { background: var(--orange-btn); color: #fff; border-radius: var(--radius-box); padding: clamp(48px, 7vw, 88px) clamp(28px, 5vw, 64px); text-align: center; } .cta h2 { color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.8rem); max-width: 22ch; margin-inline: auto; } .cta p { color: rgba(255,255,255,.9); margin-top: 14px; max-width: 46ch; margin-inline: auto; } .cta__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; justify-content: center; } /* ========================================================================== 联系信息 ========================================================================== */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 56px); align-items: start; } .info-row { display: flex; gap: 14px; align-items: flex-start; padding: 15px 0; border-bottom: 1px solid var(--line); } .info-row:last-child { border-bottom: 0; } .info-row__ico { margin-bottom: 0; width: 40px; height: 40px; } .info-row .k { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .info-row .v { font-size: 1.02rem; font-weight: 600; margin-top: 2px; } .info-row .v a:hover { color: var(--orange-deep); } .map-embed { border: 1px solid var(--line); width: 100%; height: 300px; border-radius: var(--radius-card); margin-top: 24px; } /* ========================================================================== Footer —— 浅色 + 一条橙色 keyline 收口（无深块） ========================================================================== */ .site-footer { background: var(--bg-alt); border-top: 2px solid var(--orange); padding: 80px var(--gutter) 40px; } .footer-grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; } .footer h5 { font-family: var(--font-sans); color: var(--ink); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px; font-weight: 700; } .footer a { color: var(--muted); display: block; padding: 5px 0; transition: color .15s; } .footer a:hover { color: var(--orange-deep); } .footer__brand .brand__name { color: var(--ink); } .footer__brand .brand__sub { color: var(--orange-deep); } .footer__desc { margin-top: 16px; font-size: .95rem; max-width: 34ch; color: var(--muted); } .footer__bottom { max-width: var(--container); margin: 48px auto 0; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: .82rem; color: var(--muted); } /* ========================================================================== 动效 + 响应式 ========================================================================== */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s, transform .6s; } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } @media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; } .hero__art { order: -1; max-width: 460px; } .svc-grid { grid-template-columns: repeat(2, 1fr); } .split, .quote__grid, .contact-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { .nav__links { display: none; } .nav__burger { display: inline-flex; } .site-header.open .nav__links { display: flex; flex-direction: column; align-items: stretch; gap: 2px; position: absolute; left: 0; right: 0; top: 74px; background: #fff; padding: 12px var(--gutter) 20px; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-card-hover); } .site-header.open .nav__links a { padding: 13px 12px; border-radius: 8px; } .svc-grid, .svc-detail { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr; } .steps::before { display: none; } .qform .row { grid-template-columns: 1fr; gap: 20px; } .footer-grid { grid-template-columns: 1fr; gap: 26px; } .hero__stats { flex-wrap: wrap; gap: 16px 0; } } @media (max-width: 520px) { .brand__sub { display: none; } .brand__name { font-size: 1rem; } .nav { gap: 10px; } .nav__tools { gap: 10px; } .nav__login { font-size: .8rem; } .cta { border-radius: 16px; } .quote { border-radius: 16px; } }