/* ============================================================ 方案 B · 政务蓝 + 青 —— 主题覆盖文件 ------------------------------------------------------------ 用法：在 HTML 的 中 配色来源：国家储备商品竞价交易系统 https://hscb.cofcosugar.com:8080/web/site/index.html 实测提取其 common.css / index.css 的真实色值 设计逻辑（借该站三条手法）： 1. 整站浅底 —— 大面积白 + 极浅蓝灰，不用深色铺满 2. 主色只做"结构线" —— 不铺色块，靠细线与小面积深色块做层次 3. 强调色单一色相 —— 全部落在青蓝色域，无冷暖冲突 4. 页脚用深灰 —— 不用品牌色收尾 注意：本文件先引入基础样式，再覆盖 :root 变量 + 必要的 浅色适配，不修改任何结构代码。改回 theme-a.css 即可回退。 ============================================================ */ @import url("style.css"); :root{ /* ---------- 主色：政务蓝 ---------- */ --ink:#1258A8; /* 标题、深色块 */ --ink-2:#025291; /* 深色区块起点 */ --ink-3:#1970B5; /* 中调：链接、点缀 */ /* ---------- 强调：青 ---------- */ --red:#0095C9; /* 变量名沿用 red，实际是主强调青蓝 */ --red-2:#016E89; /* 悬停态 */ /* ---------- 辅助 ---------- */ --gold:#00A9D2; /* 变量名沿用 gold，实际是亮青 */ --cream:#F7F9FB; /* 极浅蓝白底 */ --cream-2:#EDF2F7; /* 浅蓝白：hover、次级底 */ --line:#DCE4EC; /* 冷调浅分隔线 */ --gray:#515151; /* 正文 */ --gray-2:#878787; /* 辅助文字 */ --white:#FFFFFF; /* ---------- 装饰 ---------- */ --frost:rgba(0,149,201,.10); --frost-2:rgba(0,149,201,.06); } /* ============================================================ 一、首屏 —— 从"深色铺满"改为"浅底留白"（与方案A的核心差别） ============================================================ */ /* 容器：浅底 + 深色文字（覆盖基础样式的 color:#fff 与 background:var(--ink)） */ .hero{ background:#FFFFFF; color:#12283D; } .hero-bg{ background: radial-gradient(ellipse 70% 62% at 84% 14%, rgba(0,169,210,.22) 0%, transparent 64%), radial-gradient(ellipse 58% 66% at 6% 92%, rgba(18,88,168,.13) 0%, transparent 62%), linear-gradient(168deg,#FFFFFF 0%,#F3F8FC 46%,#FAFCFE 100%); } .hero-grain{ opacity:.05; background-image:radial-gradient(circle at 1px 1px, #1970B5 1px, transparent 0); background-size:28px 28px; } /* 徽标：白底 + 蓝边 + 蓝字 */ .hero-badge{ border-color:rgba(18,88,168,.3); color:#1258A8; background:rgba(255,255,255,.9); } .hero-badge i{background:#0095C9} /* 主标题：深蓝字；强调行用青 */ .hero h1{color:#0E2E4F} .hero h1 em{color:#0095C9} /* 副标题：中灰蓝 */ .hero-sub{color:#4E637A} .hero-sub strong{color:#0E2E4F} /* 数据条：白底卡片 + 浅边框 + 蓝数字 */ .hero-stats{ background:rgba(255,255,255,.86); border-color:var(--line); } .hero-stat{ background:transparent; backdrop-filter:none; } .hero-stat b{color:#1258A8} .hero-stat span{color:#64798E} /* 首屏信任条 */ .hero-trust span{ color:#3F5872; background:rgba(255,255,255,.92); border-color:rgba(18,88,168,.2); } /* 首屏按钮 */ .hero .btn-red{background:#0095C9;color:#fff} .hero .btn-red:hover{background:#016E89} .hero .btn-ghost{ color:#1258A8; border-color:rgba(18,88,168,.42); } .hero .btn-ghost:hover{background:rgba(255,255,255,.95)} /* 移动端：数据格分隔线改浅色 */ @media(max-width:520px){ .hero-stat{border-bottom:1px solid var(--line)} } /* ============================================================ 二、深色区块 —— 保留深色，但换成政务蓝渐变 仅用于：页头 .phead / 深色区 .sec-ink / 联系区 .contact-info ============================================================ */ .phead{ background:linear-gradient(160deg,#0E3A6B 0%,#1258A8 55%,#0E3A6B 100%); } .phead::after{ background:radial-gradient(ellipse 60% 90% at 85% 15%, rgba(0,169,210,.5) 0%, transparent 62%); } .sec-ink{ background:linear-gradient(160deg,#0E3A6B 0%,#1258A8 52%,#0E3A6B 100%); } .sec-ink .notice-ink{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); border-left-color:#00A9D2; } .sec-ink .notice-ink p{color:rgba(255,255,255,.82)} .sec-ink .notice-ink svg{stroke:#00A9D2} .notice-ink{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); border-left-color:#00A9D2; } .notice-ink p{color:rgba(255,255,255,.82)} .notice-ink svg{stroke:#00A9D2} .contact-info{background:linear-gradient(160deg,#0E3A6B 0%,#1258A8 100%)} .ci-ico svg{stroke:#00A9D2} .ci-item .ci-note{color:#9FCFE6} /* ============================================================ 三、组件级微调 ============================================================ */ /* 章节标签线 */ .sec-tag::before{background:#0095C9} /* 卖点小图标 */ .pitem i{ background:var(--frost); border-color:#0095C9; } .pitem i::after{ border-left-color:#0095C9; border-bottom-color:#0095C9; } .ptext strong{color:#0E2E4F} /* 卖点右侧深色卡：改用政务蓝渐变 */ .media-box{ background:linear-gradient(160deg,#0E3A6B 0%,#1258A8 100%); } .media-box::after{ background:radial-gradient(circle at 78% 22%, rgba(0,169,210,.22), transparent 62%); } .media-ico svg{stroke:#7DD3EC} .media-title{color:#fff} .media-sub{color:rgba(255,255,255,.68)} /* 分支卡 / 信任卡 / 资质卡 */ .flow-card::before{background:#00A9D2} .flow-card:hover{border-color:#1258A8} .trust-ico{background:var(--cream-2)} .trust-ico svg{stroke:#1258A8} .prod-mini .pm-ico{background:var(--cream-2)} .prod-mini .pm-ico svg{stroke:#1258A8} .cert:hover{border-color:#1970B5} /* 流程步骤 */ .step-bar{background:var(--cream-2)} .step-n{background:#1258A8} .step.on .step-bar i{background:#00A9D2} .step .step-time{color:#0095C9} /* 数据卡 */ .kpi{border-color:var(--line)} .kpi b{color:#1258A8} /* 表格 */ .tbl thead{background:#1258A8} .tbl tbody tr:hover{background:var(--cream)} /* 按钮 */ .btn-red{background:#0095C9;color:#fff} .btn-red:hover{background:#016E89} .btn-line{color:#1258A8;border-color:rgba(18,88,168,.45)} .btn-line:hover{background:#1258A8;border-color:#1258A8;color:#fff} /* 产品卡 */ .p-price{color:#0095C9} /* ============================================================ 四、页脚 / 导航 / 表单 ============================================================ */ /* 页脚：深灰，不用品牌色（★ 借用该站最克制的一处处理） */ .foot{background:#353535} .foot-badges span{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.15); } /* 顶部条：浅色 */ .topbar{ background:#F3F6F9; color:#5A6B7C; border-bottom:1px solid var(--line); } .topbar a{color:#5A6B7C} .topbar a:hover{color:#1258A8} .topbar-dot{background:#0095C9} /* 导航：白底 + 青色下划线做当前页标记（★ 借用该站手法） */ .nav{background:rgba(255,255,255,.97);border-bottom-color:var(--line)} .nav-links a{color:#3F4A56} .nav-links a:hover{background:#EDF2F7;color:#016E89} .nav-links a.on{ color:#0095C9; position:relative; } .nav-links a.on::after{ content:""; position:absolute;left:15px;right:15px;bottom:0; height:3px;background:#00A9D2;border-radius:2px 2px 0 0; } .nav-tel svg{stroke:#1258A8} .nav-tel span{color:#1258A8} /* 品牌块：用深政务蓝而非亮蓝（亮蓝做底会显得飘） */ .brand-mark{background:#0E3A6B} .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{background:#1258A8} /* 移动端菜单 */ .mmenu{background:#0E3A6B} .mmenu a.on{color:#7DD3EC} /* 表单聚焦 */ .field input:focus,.field select:focus,.field textarea:focus{ border-color:#0095C9; box-shadow:0 0 0 3px rgba(0,149,201,.12); } .privacy input{accent-color:#0095C9} /* 滚动进场（保持） */ .rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease} .rv.in{opacity:1;transform:none}