@charset "utf-8";
/* ==========================================================================
汇富物流（hfky.net）· 前台现代化 UI 覆盖层
版本：2026-09-12 实验版 · 尚未上线
加载顺序：（老样式，规则一条未删）
→ （本文件，按需覆盖）
回滚：删掉 inc/header.php 里指向本文件的那一行 即可，老样式原样生效。
约定：老 CSS 里的页面专用规则（.pd_*、.news_class*、.login_* 等）一律保留，
本文件只重写"看起来老"的部分：字号 / 切图标题条 / 阴影 / 配色 / 布局 / 响应式。
========================================================================== */
/* ---------------------------------------------------------------- 1. 变量 */
:root{
--brand: #0E4C8A; /* 品牌深蓝（主） */
--brand-2: #1D7BE0; /* 亮蓝（辅助/交互） */
--brand-ink: #0A2E52; /* 标题深色 */
--brand-soft: #EAF2FB; /* 浅蓝底 */
--accent: #F58020; /* 橙色强调（沿用老站的 #f08b2d 家族，提亮） */
--ink: #1E2836;
--ink-2: #55627A;
--ink-3: #8A96A8;
--line: #E4E9F0;
--bg: #F4F7FB;
--card: #FFFFFF;
--r: 16px;
--r-sm: 10px;
--sh-s: 0 1px 2px rgba(13,38,68,.05), 0 1px 3px rgba(13,38,68,.04);
--sh-m: 0 10px 28px -14px rgba(13,38,68,.30), 0 2px 6px rgba(13,38,68,.05);
--sh-l: 0 22px 52px -22px rgba(13,38,68,.36);
--max: 1160px;
--nav-h: 66px;
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
"Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}
/* ------------------------------------------------------- 2. 基础排版 */
html{ -webkit-text-size-adjust:100%; }
body{
font-family:var(--font);
font-size:15px; line-height:1.7; color:var(--ink);
background:var(--bg);
}
/* 覆盖老站"所有元素 12px"的规则（同选择器 + 本文件在后 → 后者生效） */
ul,form,p,div,h4,h5,h6,input,text,textarea,dl,dt,dd{ font-size:15px; font-weight:400; }
h1{ font-size:26px; } h2{ font-size:22px; } h3{ font-size:17px; }
a{ color:var(--ink); transition:color .15s ease; }
a:hover{ color:var(--brand-2); }
img{ max-width:100%; }
img[width][height]{ height:auto; } /* 老站写死了 width/height 属性，小屏要能缩 */
.fl,.fr{ float:left; } .fr{ float:right; }
.cle_both{ height:0; overflow:hidden; clear:both; }
/* ------------------------------------------------------- 3. 顶部导航 */
/* 导航刻意做成「品牌深藏青」而不是白底：
① logo（images/logo-he.png）是**白字 + 金色 E 的透明底图**，本身不带底色。
白导航上白字几乎看不见；只有放在深藏青上反差才清晰 → 导航必须深色。
（更早的老 logo 是自带深蓝底的实心图，同样是深色导航才无缝。）
② 首页 hero 是**全宽深色照片**，深色导航接深色照片 = 自然衔接；白导航直接切照片是硬边。
③ sticky 滚动时压在白内容上，用**不透明**底最稳（原毛玻璃在深底上会泛灰、不稳）。
④ **必须用纵向(180deg)渐变而不是对角**：对角渐变左右颜色不同，而下面 hero 的顶部渐隐是单一颜色，
右边就会残留一条淡边；纵向渐变让导航**底边颜色全宽一致**，渐隐用同色即可左右都严丝合缝。 */
.top{
/* 底边色 #0B4279 同时被 .banner::before 的第一档复用 —— 这两处必须一致才能无缝 */
background:linear-gradient(180deg,#06386C 0%,#0B4279 100%); /* 底边 = #0B4279，与 hero 渐隐同色 */
border-bottom:0;
box-shadow:0 6px 22px -16px rgba(0,20,40,.85);
padding-bottom:0;
position:-webkit-sticky; position:sticky; top:0; z-index:900;
}
.topmain{
max-width:var(--max); width:auto; margin:0 auto;
padding:0 20px; box-sizing:border-box;
display:flex; align-items:center; gap:26px;
min-height:var(--nav-h);
}
.logo{ width:auto; height:auto; float:none; flex:none; display:flex; align-items:center; }
/* 注意：本文件上面那条 img[width][height]{height:auto} 特异性是 (0,0,2,1)，
比 .logo img (0,0,1,1) 高，会把这里的 height 吃掉 → logo 按原生尺寸显示、导航被撑高。
所以 logo 这几条必须带 !important。 */
.logo img{ width:auto; height:52px !important; display:block; }
.topmian_ul{ padding-top:0; flex:1 1 auto; min-width:0; }
.topmian_ul ul{ display:flex; justify-content:flex-end; align-items:center; gap:2px; flex-wrap:wrap; }
.topmian_ul ul li{
flex:0 0 auto; background:none !important; padding:0; text-align:center; white-space:nowrap;
}
.topmian_ul ul li a{
display:block; padding:9px 14px; font-size:15px; font-weight:500;
color:rgba(255,255,255,.90); border-radius:var(--r-sm);
}
.topmian_ul ul li a:hover{ color:#fff; background:rgba(255,255,255,.15); text-decoration:none; }
/* 登录按钮：深蓝底上蓝底按钮会糊，改白底 + 品牌蓝字，反差清晰且是这个导航上唯一的强色块 */
.topmian_ul ul li.li_login{ flex:0 0 auto; padding:0; text-align:right; }
.topmian_ul ul .topm_lasli .rec_login{
display:inline-flex; align-items:center; gap:6px;
background:#fff;
color:var(--brand) !important; padding:9px 17px; border-radius:999px;
font-size:14.5px; font-weight:600; text-decoration:none; vertical-align:middle;
box-shadow:0 8px 20px -12px rgba(0,0,0,.7);
}
.topmian_ul ul .topm_lasli .rec_login:hover{ color:var(--brand-ink) !important; filter:brightness(.96); }
.topmian_ul ul .topm_lasli .rec_login span{ padding-left:0; color:inherit; display:inline-block;
max-width:76px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topmian_ul ul .topm_lasli .rec_login .rec_login_icon{ width:16px; height:16px; color:currentColor; flex:none; display:block; }
/* ★ 顶栏水平分布（需求 R）
改前实测（视口 1406）：logo 右缘 → 首个菜单项 = **199.5px**，末项（登录）→ 内容右边缘 = **0px**，
相邻项空隙只有 2px。即"剩余空间被 justify-content:flex-end 全推到了左边"→
用户感受就是「左边空一大块、右边挤死」。
修法：把这段剩余空间**就地变成菜单之间的间距**，并给右端留出呼吸位。
- `space-between` 是关键：它只会**分配**剩余空间，绝不会增加菜单所需最小宽度
→ 任何视口下都不会因此换行（显式加大 gap 会：1025px 档可用宽仅 ~860px，加大就换行）。
- 只在 ≥1160px 生效：容器 max-width 1160 已封顶、剩余空间稳定 199.5px；
1025~1159px 区间没有专门导航规则，可用宽最窄只剩 ~860px，动不得。
- `padding-right:34px` 让「登录」按钮不再贴死右边缘。
实测见 _nav_probe.py / output/nav_before_*.json、nav_after_*.json。 */
@media (min-width:1160px){
.topmian_ul ul{ justify-content:space-between; padding-right:34px; }
}
/* 1025~1159px：容器不再封顶，剩余空间从 ~172px 递减到 ~39px。
space-between 只"分配"剩余空间、不增加菜单最小宽度，所以这一段同样安全；
但可用宽最窄只剩 ~860px（视口 1025），右内距必须收小到 20px，
并把菜单项左右内距 14px→12px 腾出 36px 余量 —— 防中文字体回退时菜单换行
（一旦换行，导航变两行，比"挤"难看得多）。 */
@media (min-width:1025px) and (max-width:1159px){
.topmian_ul ul{ justify-content:space-between; padding-right:20px; }
.topmian_ul ul li a{ padding:9px 12px; }
}
/* ------------------------------------------------------- 4. 首页 Hero */
.banner{ max-width:none; margin:0; overflow:hidden; position:relative; }
.banner img{
display:block; width:100%; height:auto; max-height:470px;
object-fit:cover; object-position:center 45%;
}
/* 顶部：把导航的深藏青"晕"进照片上部 → 导航与 hero 之间不再是硬切，而是自然过渡。
第一档必须**完全不透明且等于导航底边色 #0B4279**，这样接缝处上下同色 = 真正无缝；再往下淡出。 */
.banner::before{
content:''; position:absolute; left:0; right:0; top:0; height:160px;
background:linear-gradient(180deg,#0B4279 0%,rgba(11,66,121,.46) 48%,rgba(11,66,121,0) 100%);
pointer-events:none; z-index:1;
}
/* 底部：压暗一点，让下面上浮的服务卡片有落点 */
.banner::after{
content:''; position:absolute; left:0; right:0; bottom:0; height:150px;
background:linear-gradient(180deg,rgba(8,26,46,0),rgba(8,26,46,.40));
pointer-events:none; z-index:1;
}
/* --------------------------------------------- 5. 首页服务卡片（4 张） */
.service{ background:var(--bg) !important; padding:0 0 10px; overflow:visible !important; }
.cent_service{
max-width:var(--max); width:auto; margin:0 auto; padding:0 20px; box-sizing:border-box;
}
.service ul{ display:flex; gap:20px; align-items:stretch; }
.service ul li{
float:none; width:auto; flex:1 1 0; min-width:0;
position:relative; top:-46px; padding-left:0; z-index:2;
display:flex; flex-direction:column;
}
.left_shadow,.right_shadow,.service_bottom{ display:none !important; } /* 老站的左右阴影条与底部阴影切图 */
.service_title{
background:linear-gradient(135deg,var(--brand-2),var(--brand)) !important;
width:auto !important; height:auto !important; line-height:1.4 !important;
margin:0 auto; padding:9px 26px; border-radius:999px;
color:#fff; font-size:15px; font-weight:600; text-align:center;
position:relative; z-index:2; white-space:nowrap;
box-shadow:0 12px 24px -14px rgba(18,87,158,1);
}
.service_body{ position:relative; overflow:visible; flex:1 1 auto; display:flex; flex-direction:column; }
.service_mian{
float:none !important; width:auto !important; height:auto !important;
flex:1 1 auto; /* 撑满 .service_body → 4 张卡等高 */
background:var(--card); border:1px solid rgba(13,38,68,.06);
border-radius:var(--r); margin-top:-19px; padding:32px 22px 22px;
box-shadow:var(--sh-m);
min-height:258px; box-sizing:border-box;
display:flex; flex-direction:column; align-items:center;
transition:transform .18s ease, box-shadow .18s ease;
}
.service ul li:hover .service_mian{ transform:translateY(-4px); box-shadow:var(--sh-l); }
.service_ico{
width:78px; height:78px; margin:2px auto 14px; border-radius:22px;
background-color:var(--brand-soft); background-repeat:no-repeat;
background-position:center; background-size:38px 38px;
}
.ico1{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E4C8A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-8'/%3E%3Cpath d='M14 3v6h5'/%3E%3Ccircle cx='16.6' cy='16.4' r='3'/%3E%3Cpath d='M18.9 18.7 21 20.8'/%3E%3C/svg%3E"); }
.ico2{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E4C8A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7h11v9H2z'/%3E%3Cpath d='M13 10h4l4 3.2V16h-8z'/%3E%3Ccircle cx='6.6' cy='18' r='1.9'/%3E%3Ccircle cx='17' cy='18' r='1.9'/%3E%3C/svg%3E"); }
.ico3{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E4C8A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.2-2.9 7.7-7 9-4.1-1.3-7-4.8-7-9V6z'/%3E%3Cpath d='M12 8.4v4.2'/%3E%3Cpath d='M12 15.8h.01'/%3E%3C/svg%3E"); }
.ico4{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E4C8A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12.5h18V18H3z'/%3E%3Cpath d='M5.5 12.5 7.6 7h8.8l2.1 5.5'/%3E%3Ccircle cx='7.4' cy='18' r='1.5'/%3E%3Ccircle cx='16.6' cy='18' r='1.5'/%3E%3C/svg%3E"); }
.service_mian p{
padding:0 !important; margin:0 0 16px; color:var(--ink-2) !important;
font-size:14.5px !important; line-height:1.78 !important; text-align:left;
}
.service_mian h3{ padding-top:0 !important; text-align:center; }
.service_mian h3 textarea{
width:100% !important; height:104px !important; box-sizing:border-box;
border:1px solid var(--line); border-radius:12px; padding:12px 13px;
font-size:14px !important; line-height:1.65; color:var(--ink-2);
background:#FBFCFE; resize:none; font-family:var(--font); outline:none;
}
.service_mian h3 textarea:focus{ border-color:var(--brand-2); background:#fff;
box-shadow:0 0 0 3px rgba(29,123,224,.12); }
.service_mian h3 input,.particulars a{
border:0 !important; padding:10px 30px !important; border-radius:999px;
background:linear-gradient(135deg,var(--brand-2),var(--brand)) !important;
color:#fff !important; font-size:14.5px !important; font-weight:600;
cursor:pointer; display:inline-block; text-decoration:none;
box-shadow:0 10px 20px -12px rgba(18,87,158,1);
font-family:var(--font);
}
.service_mian h3 input:hover,.particulars a:hover{ filter:brightness(1.08); text-decoration:none; }
.particulars{ text-align:center; padding-top:0 !important; margin-top:auto; }
/* 第 1 张卡（运单查询）的内容包在