@charset "UTF-8";
/* ==========================================================================
dlzo.com.cn 首页主题覆盖层 dlzo-theme.css
--------------------------------------------------------------------------
目标：把 dlzo.com.cn 的首页色调对齐 dlzo.cn（暖白底 + 玫红主色 + 紫色辅色）
原则：只覆盖样式，不改动任何 HTML 结构、PHP 变量、模板标签
加载：layout/default.html 第 190 行 之后插入一行
回滚：删掉那一行 即完全恢复原样
版本：v1.0 2026-10-05
--------------------------------------------------------------------------
改配色只需要动下面第 1 节的变量，其余全部引用变量
========================================================================== */
/* ==========================================================================
1. 设计令牌（取自 dlzo.cn 的 :root）
========================================================================== */
:root {
/* 底色与面 */
--dz-bg: #fffdfc; /* 页面底色：暖白（dlzo.cn --bg） */
--dz-surface: #ffffff; /* 卡片面 */
--dz-tint: #fdf2f6; /* 淡粉底：替代原来的 #F6FAFF 淡蓝卡片 */
--dz-tint-2: #f9e3ec; /* 更浓一档的粉底 */
--dz-band: #fffafc; /* 区块交替底色：替代原来的 #F8F8F8 */
--dz-line: #eadbe3; /* 描边：淡粉（dlzo.cn --line） */
/* 文字 */
--dz-text: #251d27; /* 正文：深紫黑（dlzo.cn --text） */
--dz-muted: #70616d; /* 次要文字（dlzo.cn --muted） */
--dz-soft: #9c8b96; /* 更浅的说明文字 */
/* 主色：玫红系（替代原来的蓝 #006FFF / #0A4AEC / #0b68e6 / #007bff） */
--dz-brand: #d60057;
--dz-brand-2: #f50059; /* 按钮主色（dlzo.cn .button-primary） */
--dz-brand-deep: #a42560;
--dz-brand-soft: #efbfd6; /* 浅玫红，用于深色底上的字 */
/* 辅色：紫色（替代原来的橙 #ff8533 / #ff9c00） */
--dz-accent: #8650bd;
--dz-accent-deep: #603752;
/* 深色区（页脚、CTA 按钮，替代原来的 #212636） */
--dz-dark: #241924;
--dz-dark-2: #342238;
--dz-dark-3: #352337; /* dlzo.cn 的主 CTA 底色 */
--dz-logo-bg: #232733; /* 新 Logo 图片自带的深色底（取实测值），
导航瓷砖与它同色，让 Logo 看起来是"设计好的深色牌" */
/* 形状与光晕 */
--dz-radius: 8px;
--dz-radius-card: 16px;
--dz-shadow: 0 10px 24px rgba(177, 62, 112, .16);
--dz-shadow-sm: 0 4px 12px rgba(37, 29, 39, .06);
--dz-shadow-nav: 0 5px 24px rgba(73, 33, 60, .04);
--dz-ease: all .28s cubic-bezier(.2, .7, .3, 1);
}
/* ==========================================================================
2. 全局排版
========================================================================== */
body {
background-color: var(--dz-bg) !important;
color: var(--dz-text);
font-family: Inter, "PingFang SC", "Microsoft YaHei", -apple-system,
BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
color: var(--dz-brand);
transition: var(--dz-ease);
}
a:hover,
a:focus {
color: var(--dz-brand-2);
text-decoration: none;
}
::selection {
background: var(--dz-tint-2);
color: var(--dz-brand-deep);
}
/* 版心略微收窄，更接近 dlzo.cn 的 1440px，观感更紧凑精致 */
@media (min-width: 1200px) {
.container {
width: 1400px;
}
}
/* ==========================================================================
3. 顶部导航：蔚蓝渐变条 → dlzo.cn 的暖白吸顶条
原样式写在 common/navbar.html 第 20-37 行
========================================================================== */
.navbar-inversed {
background-color: var(--dz-bg) !important;
background-image: linear-gradient(120deg, #fffdfd, #faf5f8) !important;
border-bottom: 1px solid #e9dce4;
box-shadow: var(--dz-shadow-nav);
}
/* 导航文字：白 → 深灰紫 */
.navbar-inversed .navbar-nav > li > a {
color: var(--dz-muted) !important;
font-size: 15px;
letter-spacing: .01em;
border-bottom: 2px solid transparent;
transition: var(--dz-ease);
}
/* 悬停/聚焦：原来是蓝底白字，改成淡粉底 + 玫红字 */
.navbar-inversed .nav > li > a:hover,
.navbar-inversed .nav > li > a:active,
.navbar-inversed .nav > li > a:focus,
.nav > li > a:hover,
.nav > li > a:active,
.nav > li > a:focus {
color: var(--dz-brand) !important;
background-color: transparent !important;
}
/* 当前栏目：玫红字 + 玫红下划线 */
.navbar-inversed .navbar-nav > .active > a,
.navbar-inversed .navbar-nav > .open > a,
.navbar-inversed .navbar-nav > .open > a:hover,
.navbar-inversed .navbar-nav > .open > a:focus,
.navbar-inversed .navbar-nav > .active > a:hover,
.navbar-inversed .navbar-nav > .active > a:focus {
color: var(--dz-brand) !important;
background-color: transparent !important;
border-bottom: 2px solid var(--dz-brand) !important;
}
/* 下拉大菜单：白底 + 淡粉描边 + 柔和阴影 */
.navbar-inversed .dropdown-menu {
background-color: var(--dz-surface);
border: 1px solid var(--dz-line);
border-radius: 0 0 var(--dz-radius-card) var(--dz-radius-card);
box-shadow: var(--dz-shadow);
margin-top: 0;
padding: 8px 0;
}
.navbar-inversed .dropdown-menu h4 {
color: var(--dz-text);
font-size: 15px;
font-weight: 600;
margin: 0;
}
.navbar-inversed .dropdown-menu a:hover h4 {
color: var(--dz-brand);
}
/* 导航右下角两个按钮：变成 dlzo.cn 的深紫描边胶囊 */
.navbar-inversed .navbar-right .btn-default {
background-color: transparent !important;
border: 1px solid #dfcad8 !important;
color: var(--dz-dark-3) !important;
border-radius: 7px !important;
padding: 6px 16px;
}
.navbar-inversed .navbar-right .btn-default:hover {
background-color: var(--dz-dark-3) !important;
border-color: var(--dz-dark-3) !important;
color: #fff6fc !important;
}
/* 导航 Logo：新 Logo 是 JPG，深色底 #232733 烧在图里，
在浅色导航上会露出一个深色矩形 → 用同色圆角瓷砖 + 阴影把它变成"设计好的深色牌" */
.navbar-inversed .navbar-brand {
background-color: var(--dz-logo-bg) !important;
border-radius: 10px;
padding: 6px 12px !important;
height: 52px !important;
display: flex;
align-items: center;
margin-top: 10px;
box-shadow: 0 4px 12px rgba(35, 39, 51, .22);
transition: var(--dz-ease);
}
.navbar-inversed .navbar-brand:hover {
box-shadow: 0 6px 18px rgba(35, 39, 51, .3);
}
.navbar-inversed .navbar-brand img {
height: 40px !important;
width: auto !important;
display: block;
}
/* 移动端汉堡按钮 */
.navbar-toggle .icon-bar {
background-color: var(--dz-text);
}
/* ==========================================================================
4. 标题与水印大字
“ZHIHUITOUGAO” 那行内联写死 #e5eaf0（几乎看不见），改成淡粉水印
========================================================================== */
h1, h2, h3, h4 {
color: var(--dz-text);
}
h1 {
letter-spacing: -.015em;
}
/* 水印英文大字：h2[style*="#e5eaf0"]，共 6 处 */
h2[style*="#e5eaf0"],
h2[style*="#E5EAF0"] {
color: var(--dz-tint-2) !important;
letter-spacing: .18em;
font-weight: 700;
}
/* 标题下方那条 30px 的小色条：原来是 #0A4AEC 蓝，改成玫红 */
[style*="background:#0A4AEC"],
[style*="background: #0A4AEC"] {
background: var(--dz-brand) !important;
background-color: var(--dz-brand) !important;
height: 4px !important;
border-radius: 4px !important;
}
/* ==========================================================================
5. 按钮
========================================================================== */
.btn {
border-radius: var(--dz-radius);
transition: var(--dz-ease);
font-weight: 500;
}
.btn-primary {
background-color: var(--dz-brand-2);
border-color: var(--dz-brand-2);
color: #fff;
box-shadow: 0 8px 24px rgba(237, 20, 91, .14);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
background-color: var(--dz-brand);
border-color: var(--dz-brand);
color: #fff;
box-shadow: 0 10px 26px rgba(214, 0, 87, .22);
}
.btn-default {
background-color: var(--dz-surface);
border-color: var(--dz-line);
color: var(--dz-text);
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active {
background-color: var(--dz-tint);
border-color: var(--dz-brand);
color: var(--dz-brand);
}
/* 橙色的 .btn-warning → 辅色紫 */
.btn-warning {
background-color: var(--dz-accent);
border-color: var(--dz-accent);
color: #fff;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
background-color: var(--dz-accent-deep);
border-color: var(--dz-accent-deep);
color: #fff;
}
/* 描边幽灵按钮（内联 #0A4AEC 的“立即咨询”） */
a[style*="#0A4AEC"],
a[style*="#0A36E8"] {
color: var(--dz-brand) !important;
border-color: var(--dz-brand) !important;
}
a.btn[style*="#0A4AEC"]:hover,
a.btn[style*="#0A36E8"]:hover {
background-color: var(--dz-brand) !important;
color: #fff !important;
}
.btn-link {
color: var(--dz-brand);
}
.btn-link:hover {
color: var(--dz-brand-2);
}
/* 导航里那个白字描边按钮（内联 color:#fff）在浅色底上会看不见 */
.navbar-inversed .navbar-right span.btn[style*="#fff"] {
color: var(--dz-dark-3) !important;
border-color: #dfcad8 !important;
border-radius: 7px !important;
}
/* ==========================================================================
6. 卡片：内联写死的淡蓝底 #F6FAFF → 淡粉底
共 22 处方块（服务优势/大数据等）
========================================================================== */
[style*="#F6FAFF"],
[style*="#f6faff"] {
background: var(--dz-tint) !important;
background-color: var(--dz-tint) !important;
border: 1px solid var(--dz-line);
border-radius: var(--dz-radius-card) !important;
transition: var(--dz-ease);
}
[style*="#F6FAFF"]:hover,
[style*="#f6faff"]:hover {
background: var(--dz-tint-2) !important;
box-shadow: var(--dz-shadow);
transform: translateY(-3px);
}
/* 区块交替底色 #F8F8F8 → 极淡粉带 */
[style*="#F8F8F8"],
[style*="#f8f8f8"] {
background: var(--dz-band) !important;
background-color: var(--dz-band) !important;
}
/* ==========================================================================
7. 内联灰字与图标定点覆盖
========================================================================== */
/* 灰色说明文字 #A3ACB8（20 处）→ 紫灰 */
[style*="#A3ACB8"],
[style*="#a3acb8"] {
color: var(--dz-muted) !important;
}
/* 绿色对勾 #88df88（9 处）→ 玫红 */
.fa-check-circle-o,
[style*="#88df88"],
[style*="#88DF88"] {
color: var(--dz-brand) !important;
}
/* 左对齐的小字说明块 */
.shuoming,
.shuomingjian {
color: var(--dz-muted);
line-height: 1.8;
}
.node {
color: var(--dz-text);
}
/* ==========================================================================
8. 页签（服务内容 / 服务优势 / 服务对象 / 媒体资源）
========================================================================== */
.nav-tabs {
border-bottom: 1px solid var(--dz-line);
}
.nav-tabs > li > a {
color: var(--dz-muted);
border: 0;
border-bottom: 2px solid transparent;
border-radius: 0;
background: transparent;
transition: var(--dz-ease);
}
.nav-tabs > li > a:hover {
color: var(--dz-brand);
background: transparent;
border-color: transparent;
border-bottom-color: var(--dz-tint-2);
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
color: var(--dz-brand);
background: transparent;
border: 0;
border-bottom: 2px solid var(--dz-brand);
font-weight: 600;
}
/* ruanwen.css 里的 .data_title 药丸页签 */
.data_title li {
background-color: var(--dz-tint);
color: var(--dz-muted);
border-radius: 22px;
transition: var(--dz-ease);
}
.data_title li.on,
.data_title > li.active > a,
.data_title > li.active > a:hover,
.data_title > li.active > a:focus {
background-color: var(--dz-brand) !important;
color: #fff !important;
border-radius: 22px;
}
.data_title li.on:after,
.data_title li.active:after {
display: none; /* 去掉原来的小三角，更干净 */
}
/* ==========================================================================
9. 媒体资源网格 .mtboder（36 个媒体 logo 格）
========================================================================== */
.mtboder {
background: var(--dz-surface);
border: 1px solid var(--dz-line);
border-radius: 12px;
padding: 10px;
margin: 6px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
transition: var(--dz-ease);
}
.mtboder:hover {
border-color: var(--dz-brand);
box-shadow: var(--dz-shadow);
transform: translateY(-3px);
}
.mtboder img {
max-width: 100%;
max-height: 100%;
height: auto !important; /* 覆盖内联 height="100" */
filter: grayscale(1);
opacity: .75;
transition: var(--dz-ease);
}
.mtboder:hover img {
filter: grayscale(0);
opacity: 1;
}
/* ==========================================================================
10. 服务优势卡片的橙色悬停 → 玫红（ruanwen.css 的 .youshi_item*）
========================================================================== */
.youshi_item1:hover .youshi_item1_txt,
.youshi_item2:hover .youshi_item2_txt,
.youshi_item3:hover .youshi_item3_txt,
.youshi_item4:hover .youshi_item4_txt,
.youshi_item5:hover .youshi_item5_txt,
.youshi_item6:hover .youshi_item6_txt {
border: 1px solid var(--dz-brand) !important;
color: var(--dz-brand) !important;
border-radius: var(--dz-radius-card) !important;
}
/* ==========================================================================
11. 右侧悬浮客服栏
========================================================================== */
.pannel.right-menu,
.pannel.right-menu > div {
background: var(--dz-surface) !important;
border-left: 1px solid var(--dz-line);
}
.right-menu a {
color: var(--dz-muted);
font-size: 12px;
}
.right-menu a:hover {
color: var(--dz-brand);
}
.right-menu .span-02 {
background: var(--dz-surface) !important;
border: 1px solid var(--dz-line);
border-radius: var(--dz-radius) 0 0 var(--dz-radius);
box-shadow: var(--dz-shadow);
}
.right-menu .span-02 h2 {
font-size: 14px;
color: var(--dz-brand);
line-height: 1.6;
}
/* ==========================================================================
12. 页脚：原 #212636 墨蓝 → dlzo.cn 的深紫黑
========================================================================== */
footer {
background: var(--dz-dark) !important;
background-color: var(--dz-dark) !important;
color: #f5f7fa;
}
footer a {
color: #cbb9c6;
}
footer a:hover {
color: var(--dz-brand-soft);
}
footer h4,
footer strong {
color: #fff6fc;
}
/* 页脚 Logo：深色底 #232733 与页脚 #241924 亮度接近，
在深色页脚上会自然融入（只看到红紫字），这里只统一尺寸与圆角，
和顶部那个深色瓷砖呼应，避免露出一条生硬的直角边 */
.foot_logo {
line-height: 0;
}
.foot_logo img {
height: 64px !important;
width: auto !important;
max-width: 100%;
object-fit: contain;
object-position: left center;
border-radius: 10px;
}
/* ==========================================================================
13. 表单控件
========================================================================== */
.form-control {
border: 1px solid var(--dz-line);
border-radius: var(--dz-radius);
background-color: var(--dz-surface);
color: var(--dz-text);
box-shadow: none;
transition: var(--dz-ease);
}
.form-control:focus {
border-color: var(--dz-brand);
box-shadow: 0 0 0 3px var(--dz-tint-2);
}
.form-control::placeholder {
color: var(--dz-soft);
}
/* ==========================================================================
14. 其它通用组件
========================================================================== */
#back-to-top {
background-color: var(--dz-dark-3) !important;
border-radius: var(--dz-radius);
transition: var(--dz-ease);
}
#back-to-top:hover {
background-color: var(--dz-brand) !important;
}
.tag[href]:focus,
.tag[href]:hover {
background-color: var(--dz-brand);
color: #fff;
}
.ruanwen_item {
background-color: var(--dz-surface);
border: 1px solid var(--dz-line);
border-radius: var(--dz-radius-card);
transition: var(--dz-ease);
}
.ruanwen_item:hover {
box-shadow: var(--dz-shadow);
transform: translateY(-3px);
}
.ruanwen_btn a,
.ido_btn a:hover {
background-color: var(--dz-brand-2);
border-color: var(--dz-brand-2);
color: #fff;
}
.title h3 span,
.idaili_left h3 span,
.idaili_list dl dt,
.idaili_list2 dl dt {
color: var(--dz-brand);
}
.article-list .article-title a:hover,
.article-metas .metas-title a:hover {
color: var(--dz-brand);
}
.article-text a {
color: var(--dz-brand);
border-bottom: 1px solid var(--dz-tint-2);
}
/* 轮播指示点 */
.carousel-indicators li {
background-color: rgba(37, 29, 39, .25);
border: 0;
}
.carousel-indicators .active {
background-color: var(--dz-brand);
width: 22px;
border-radius: 3px;
}
/* ==========================================================================
15. 细节：滚动条（精致感加成，不影响布局）
========================================================================== */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: var(--dz-bg);
}
::-webkit-scrollbar-thumb {
background: #e3cfda;
border-radius: 5px;
border: 2px solid var(--dz-bg);
}
::-webkit-scrollbar-thumb:hover {
background: var(--dz-brand-soft);
}
/* ==========================================================================
16. 尊重"减少动态效果"的系统设置
========================================================================== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
}
/* ==========================================================================
17. 可选：给装饰性图标统一色调
--------------------------------------------------------------------------
⚠️ 默认整段关闭，因为无法预览效果，且媒体 logo 是真实品牌（CCTV 等），
全局改色会把品牌 logo 一起染掉。
想启用：删掉下面的 /* 和 * / 两行注释符号即可，只对这几个图生效。
========================================================================== */
/*
img[src*="pcmane1.png"],
img[src*="pcmane2.png"],
img[src*="pcmane3.png"],
img[src*="pcmane4.png"] {
filter: grayscale(1) sepia(1) hue-rotate(285deg) saturate(3.2) brightness(.95);
}
*/
/* ==========================================================================
END dlzo-theme.css
========================================================================== */