@charset "utf-8";
/* ==========================================================================
   Dark theme — Ningbo Oree Lighting
   --------------------------------------------------------------------------
   深色主题覆盖层。必须加载在以下三个文件之后：
       css/style.css
       css/responsive.css
       css/color-themes/default-theme.css
   回退方式：把页面上 <link href="css/dark-theme.css"> 这一行删掉即可，
   原样式表完全没有被修改。

   本站品牌高亮色是金色 #d7a449（由 color-themes/default-theme.css 提供），
   这里只翻底色和文字色，不动品牌色。
   ========================================================================== */

:root {
	--dk-bg:      #585858;  /* 页面底色（全站统一） */
	--dk-bg-alt:  #585858;  /* 原「相邻区块交替色」，统一后与底色相同 */
	--dk-card:    #646464;  /* 卡片、盒子（比底色亮一阶） */
	--dk-input:   #6a6a6a;  /* 输入框 */
	--dk-deep:    #454545;  /* 页脚、顶部条（比底色暗一阶） */
	--dk-deeper:  #3d3d3d;  /* 版权条，再暗一阶 */
	--dk-line:    #464646;  /* 边框、分隔线 */
	--dk-line-2:  #3d3d3d;  /* 需要更明显一点的边框 */
	--dk-text:    #f2f2f2;  /* 正文 */
	--dk-mute:    #e2e2e2;  /* 次要信息、日期 */
	--dk-head:    #ffffff;  /* 标题 */
	--dk-strong:  #ffffff;  /* 输入框文字 */
	--dk-accent:  #d7a449;  /* 品牌金：色面（填充/边框/下拉底）与装饰性标题 */
	--dk-accent-text: #f5cd7d; /* 金色「文字」：压在中灰底上的功能性小字 */
	--dk-on-accent: #1a1a1a;/* 压在金色底上的文字 */
}

/* 底色从近黑 #1a1a1a 换成中灰 #585858 后，文字必须整体提亮，
   否则会糊掉 —— 原来的 #b8b8b8 正文在中灰上只有 3.59:1、
   #8a8a8a 的日期更是只有 2.06:1（都是 AA 不合格）。

   下面这组比值是实测的，不是估的（WCAG 相对亮度公式）：
       标题 #ffffff on 底色 7.11:1   正文 #f2f2f2 on 底色 6.36:1
       正文 #f2f2f2 on 卡片 5.29:1   次要 #e2e2e2 on 卡片 4.57:1
       深字 #1a1a1a on 金色 7.70:1   正文 on 页脚 #454545 8.56:1
   全部达到 AA(4.5:1)。

   品牌金 #d7a449 自己在灰底上只有 3.15:1（卡片上 2.62:1），是唯一一组达不到 AA 的。
   用户决定的做法是**分级**，所以这里有**两个金**，别再混用：

     --dk-accent      #d7a449  色面 + 装饰：下拉菜单底色、按钮填充、色块边框，
                               以及区块小标题（那个由 default-theme.css 给，不在本文件）
     --dk-accent-text #f5cd7d  功能性金色文字/图标：压在中灰底上必须看得清的那些
                               （邮箱链接、Read More、侧栏当前分类、当前选项卡、信息栏图标）

   #f5cd7d on #585858 = 4.71:1（合格）；#d7a449 只有 3.15:1，所以**凡是当文字用的金
   都必须走 --dk-accent-text**。注意 #f5cd7d 在卡片 #646464 上只有 3.92:1，
   够图形元素（3:1）但不够正文 —— 金色文字不要放到卡片底上。 */


/* ==========================================================================
   1. 基础
   ========================================================================== */

body {
	background: var(--dk-bg);
	color: var(--dk-text);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--dk-head);
}

/* 模板的通用「把这段刷成金色」类（style.css:82 写死 #d7a449），
   首页的邮箱链接 sales@oreelighting.com 就是用它的。
   它一律当**文字**用，所以统一换成 --dk-accent-text。 */
.theme_color {
	color: var(--dk-accent-text);
}

::selection {
	background: var(--dk-accent);
	color: var(--dk-on-accent);
}
::-moz-selection {
	background: var(--dk-accent);
	color: var(--dk-on-accent);
}

/* 滚动条 */
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
::-webkit-scrollbar-track {
	background: var(--dk-deep);
}
::-webkit-scrollbar-thumb {
	background: var(--dk-line-2);
	border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
	background: var(--dk-accent);
}

/* 载入动画的白底 */
.preloader {
	background-color: var(--dk-bg);
}

/* 返回顶部按钮 */
.scroll-to-top {
	background: var(--dk-deep);
}
.scroll-to-top:hover {
	background: var(--dk-accent);
}


/* ==========================================================================
   2. 页头
   注意：导航条 .main-header .main-box 本身没有背景，它的白色一直是从
   body 透出来的，所以 body 翻深后导航条自动跟着变深，不需要单独处理。
   下面只需要处理吸顶条、搜索弹层和下拉菜单。
   ========================================================================== */

/* 吸顶导航条（滚动后盖住页头的那条，原来是白底 + 浅灰下边框） */
.sticky-header {
	background: var(--dk-bg);
	border-bottom: 1px solid var(--dk-line);
}

/* 主导航文字：原来是 #252525 深色（靠白色导航条才看得见），
   必须在深底上改成白色。hover / 当前栏目的金色由 default-theme.css 提供，
   它的选择器带 :hover 权重更高，不会被这里盖掉。 */
.main-menu .navigation > li > a {
	color: var(--dk-head);
}

/* ⚠️ 吸顶导航条里那份导航必须**单独再写一遍**，否则滚动下去之后
   导航文字会变成近乎黑的 #252525，在灰底上根本看不见。
   原因是 style.css:1340 写的是
       .main-header .sticky-header .main-menu .navigation > li > a
   比上面那条多了两层，权重 (0,5,2) > (0,2,2)，上面那条压不住它。
   这里把选择器写成一样的，靠加载顺序（dark-theme.css 在后）取胜。
   :hover / .current 变金色的规则在 style.css:1345，权重更高，不受影响。 */
.main-header .sticky-header .main-menu .navigation > li > a {
	color: var(--dk-head);
}

/* 页头搜索弹层 */
.main-header .search-box-outer .dropdown-menu {
	background: var(--dk-card);
}

.main-header .search-panel input[type="text"],
.main-header .search-panel input[type="search"] {
	background: var(--dk-input);
	border: 1px solid var(--dk-line);
	color: var(--dk-strong);
}

.main-header .search-panel input::placeholder {
	color: var(--dk-mute);
}

/* 顶部小字条：style.css:591 写死 #252525，现在统一压到比底色暗一阶，
   和导航条拉开层次 */
.main-header .header-top {
	background-color: var(--dk-deep);
}

/* 首屏 slider 左右两个箭头。
   注意：js/main-slider-script.js 里 arrows.style 配的是 "metis"，
   所以真正渲染出来的是 .tparrows.metis，底/字色来自
   plugins/revolution/css/navigation.css:1937（background:#fff）和
   :1952（:before color:#000）——这是页面上最后一块纯白。
   原 style.css:1375 写的 .gyges 是模板作者配错了 class，从来没生效过，
   下面照样保留一份，万一以后把 arrows.style 改回 gyges 也不会变白。 */
.main-slider .tparrows.metis,
.main-slider .tparrows.gyges {
	background-color: rgba(26, 26, 26, 0.55);
	border-radius: 50%;
	color: #ffffff;
}

.main-slider .tparrows.metis:before,
.main-slider .tparrows.gyges:before {
	color: #ffffff;
}

.main-slider .tparrows.metis:hover,
.main-slider .tparrows.gyges:hover {
	background-color: var(--dk-accent);
	color: var(--dk-on-accent) !important;
}

.main-slider .tparrows.metis:hover:before,
.main-slider .tparrows.gyges:hover:before {
	color: var(--dk-on-accent);
}

/* 金色下拉子菜单里的分隔线，白线在金色上本来就很淡，保持即可 */
.main-menu .navigation > li > ul {
	box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.35),
	            -2px 0px 5px 1px rgba(0, 0, 0, 0.35);
}


/* ==========================================================================
   3. 区块底色
   全站统一 #585858，块之间靠「比底色亮一阶 / 暗一阶」分层。

   注意下面这几个区块：它们的底色是 style.css 里**写死的深色**，
   不是从 body 透出来的，所以只改 body 不会跟着变，必须逐个覆盖，
   否则页面上会留下一块块深色补丁。
   ========================================================================== */

.about-section,
.team-section,
.news-section,
.contact-page-section {
	background-color: var(--dk-bg);
}

/* style.css:1759 写死 #252525 */
.services-section {
	background-color: var(--dk-bg);
}

/* style.css:2679 写死 #222222 */
.main-footer {
	background-color: var(--dk-deep);
}

/* style.css:2910 写死 #000000 */
footer .footer-bottom {
	background-color: var(--dk-deeper);
}

/* 横幅照片上的遮罩。这几块压在照片上，跟页面底色无关，保持深色即可 */
.page-title:before {
	background-color: rgba(20, 20, 20, 0.68);
}
.page-title .breadcrumb-outer {
	background-color: rgba(20, 20, 20, 0.68);
}

/* 面包屑：未选中项原来偏深灰，在深底上要提亮 */
.page-breadcrumb li {
	color: var(--dk-mute);
}


/* ==========================================================================
   4. 区块标题
   ========================================================================== */

.sec-title h2 {
	color: var(--dk-head);
}

/* 「Request Quote: xxx」这一行，冒号前面那段原来是 #252525 深色 */
.about-section .content-column .email {
	color: var(--dk-text);
}

/* ⚠️ 公司简介正文。style.css:1660 把 .about-section .content-column .text
   写死成 #777777 —— 那是模板浅色主题的正文灰，压在 #585858 上只有 **1.59:1**，
   几乎等于看不见（首页和简介页各有一处，是最容易被忽略的一块）。
   注意不能只写 .about-section .text（权重不够），必须跟原规则一样多带一层
   .content-column 才能靠加载顺序胜出。p 的 color 是继承的，改这里就够。 */
.about-section .content-column .text {
	color: var(--dk-text);
}

/* 金色小标题右侧那条灰线 */
.sec-title .title:before {
	background-color: var(--dk-line-2);
}


/* ==========================================================================
   5. 卡片
   ========================================================================== */

/* 新闻卡片 */
.news-block .inner-box {
	background-color: var(--dk-card);
}

.news-block .inner-box .lower-content {
	border-bottom-color: var(--dk-accent);
}

/* hover 时原来是变 #252525，在深底上等于看不见，改成提亮 */
.news-block .inner-box:hover .lower-content {
	border-color: var(--dk-line-2);
}

.news-block .inner-box .lower-content h3,
.news-block .inner-box .lower-content h3 a {
	color: var(--dk-head);
}

.news-block .inner-box .lower-content .block-info li {
	color: var(--dk-mute);
}

/* 产品卡片：原来有一圈 15px 的纯白 outline，是深色下最扎眼的地方 */
.shop-item .inner-box {
	outline: 15px solid var(--dk-bg);
	background-color: var(--dk-card);
}

.shop-item .inner-box .image {
	background-color: var(--dk-card);
}

/* 产品名称：原来是 #222222 深色，压在深色卡片上完全看不见 */
.shop-item .inner-box .lower-content h3,
.shop-item .inner-box .lower-content h3 a {
	color: var(--dk-head);
}

.shop-item .inner-box .lower-content .price .discount {
	color: var(--dk-mute);
}

.shop-item .inner-box .image .overlay-box {
	background-color: rgba(26, 26, 26, 0.85);
}

/* hover 时盖在图片上的那个放大镜按钮：原来是 #222222 深底，
   压在深色遮罩上会看不见，提亮成 --dk-line-2，hover 变金色 */
.shop-item .inner-box .image .overlay-box .cart-option li a {
	background-color: var(--dk-line-2);
	color: var(--dk-head);
}

.shop-item .inner-box .image .overlay-box .cart-option li a:hover {
	background-color: var(--dk-accent);
	color: var(--dk-on-accent);
}

/* 服务卡片（services-section 本来就是 #252525） */
.service-block .inner-box {
	background-color: transparent;
}

.service-block .inner-box .lower-content .text {
	color: var(--dk-text);
}

/* 团队卡片：照片背后那块错位的浅色花纹方块要压深 */
.team-block .inner-box .image-outer:after {
	background: var(--dk-card) no-repeat;
}

.team-block .inner-box .lower-box h3,
.team-block .inner-box .lower-box h3 a {
	color: var(--dk-head);
}

.team-block .inner-box .lower-box .designation {
	color: var(--dk-mute);
}

/* 「Read More」按钮：原来是白底 + 深字 + 金边，在深色页面上就是一块白。
   改成深底描边按钮，hover 时填金色。 */
.btn-style-three,
.btn-style-four,
.btn-style-five {
	background-color: transparent;
	color: var(--dk-accent-text);
}

.btn-style-three:hover,
.btn-style-four:hover,
.btn-style-five:hover {
	background-color: var(--dk-accent);
	color: var(--dk-on-accent);
}

/* 按钮 hover 时背后那几块错位的浅色花纹方块 */
.btn-style-three:before,
.btn-style-three:after,
.btn-style-four:before,
.btn-style-four:after,
.btn-style-five:before,
.btn-style-five:after {
	background: var(--dk-card);
}

/* 关于我们配图左下角那块错位的花纹方块。
   pattern-2.png 实测平均亮度 223，乘 brightness 就是它压出来的灰度：
   0.12 → 27（近黑，在 #1a1a1a 上；底色换成 #585858 后就是一块黑斑）
   0.50 → 112（#707070，比底色亮一阶，花纹看得见又不抢眼） */
.about-section .image-column .inner-column .image:before {
	background: url(../images/icons/pattern-2.png) no-repeat;
	filter: brightness(0.5);
	opacity: 0.9;
}


/* ==========================================================================
   6. 侧栏（产品列表 / 新闻详情 / 产品详情页）
   ========================================================================== */

.sidebar-title h2 {
	color: var(--dk-head);
}

/* 侧栏搜索框 */
.sidebar .search-box .form-group input[type="text"],
.sidebar .search-box .form-group input[type="search"] {
	background: var(--dk-input);
	border: 1px solid var(--dk-line);
	color: var(--dk-strong);
}

.sidebar .search-box .form-group input::placeholder {
	color: var(--dk-mute);
}

/* 分类列表 */
.blog-cat-two {
	border: 1px solid var(--dk-line);
}

.blog-cat-two li a {
	color: var(--dk-text);
	border-bottom: 1px solid var(--dk-line);
}

.blog-cat-two li a:hover,
.blog-cat-two li.active a {
	color: var(--dk-accent-text);
}

.blog-cat-two li a .number {
	color: var(--dk-mute);
	background: var(--dk-card);
	border: 1px solid var(--dk-line);
}

/* 标签云（当前页面未用到，一并改掉以免以后启用时不协调） */
.sidebar .popular-tags a {
	background: var(--dk-card);
	border-color: var(--dk-line);
	color: var(--dk-text);
}

.sidebar .popular-tags a:hover {
	background-color: var(--dk-accent);
	border-color: var(--dk-accent);
	color: var(--dk-on-accent);
}


/* ==========================================================================
   7. 文章 / 产品详情正文
   ========================================================================== */

.blog-single .inner-box .lower-content .upper-box .post-meta li,
.services-single .inner-box .lower-content .text p,
.blog-single .inner-box .lower-content .lower-box .text p {
	color: var(--dk-text);
}

.blog-single .inner-box .lower-content .upper-box h2,
.services-single .inner-box .lower-content h2 {
	color: var(--dk-head);
}

/* 引用块 */
.blog-single .inner-box .lower-content .lower-box .text blockquote,
.services-single .inner-box .lower-content .text blockquote .quote-inner {
	background-color: var(--dk-card);
	border-color: var(--dk-line);
}

/* 产品详情页的选项卡 */
.shop-single .product-details .prod-tabs .tab-btns .tab-btn {
	background: var(--dk-card);
	border: 1px solid var(--dk-line);
	color: var(--dk-text);
}

.shop-single .product-details .prod-tabs .tab-btns .tab-btn.active-btn,
.shop-single .product-details .prod-tabs .tab-btns .tab-btn:hover {
	background: var(--dk-bg-alt);
	color: var(--dk-accent-text);
}

.shop-single .product-details .prod-tabs .tabs-content {
	border: 1px solid var(--dk-line);
}

.shop-single .product-details .prod-tabs .tabs-content .tab .content p,
.product-details .basic-details .text {
	color: var(--dk-text);
}

/* 产品详情页的评分/评论数小字 */
.product-details .basic-details .details-header .rating .txt,
.product-details .basic-details .details-header .reviews {
	color: var(--dk-mute);
}

.product-details .basic-details .details-header h4,
.product-details .basic-details .details-header h4 a {
	color: var(--dk-head);
}


/* ==========================================================================
   8. 联系页
   原来是一整块金色面板，中间嵌一张白色地图。深色主题下把面板改成深色卡片，
   信息栏的文字改成浅色（白字压金色本来对比度就不够）。
   地图是第三方 iframe，本身必然是白底，用滤镜压成深色。
   ========================================================================== */

.contact-page-section .inner-container {
	background-color: var(--dk-card);
	box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.55);
}

.contact-page-section .info-column h2 {
	color: var(--dk-head);
}

.contact-page-section .info-column .list-info li {
	color: var(--dk-text);
}

/* 信息栏的金色图标。它是图形元素（门槛 3:1），#d7a449 压在 --dk-card #646464 上
   只有 2.62:1，连图形门槛都不到，所以这里也换成 --dk-accent-text（3.92:1）。
   这种「不是文字所以文字扫描器查不出来」的地方要单独留意。 */
.contact-page-section .info-column .list-info li .icon {
	color: var(--dk-accent-text);
}

/* 联系页地图（js/oree-map.js 用 Leaflet 接高德英文瓦片）。
   这里**故意不加任何深色处理**：
   高德只有浅色瓦片、没有深色样式，之前是在近黑底 (#1a1a1a) 上用
   filter: invert(1) hue-rotate(180deg) 把它反相压深的。
   底色换成中灰 #585858 之后，反相出来的黑地图反而比周围还暗、很突兀，
   所以撤掉滤镜，用高德原生的浅色底，和灰色页面反而更协调。
   地图的定位点、信息框样式都在 css/oree-map.css 里，不依赖本文件。 */


/* ==========================================================================
   9. 页脚
   .main-footer / .footer-bottom 的底色在第 3 节统一覆盖成 --dk-deep / --dk-deeper。
   这里处理两件事：页脚公司简介文字，和二维码。
   ========================================================================== */

/* style.css:2740 写死 #888888 —— 那是给「近黑页脚」配的灰，
   放到 #454545 的页脚上只有 2.70:1，7 个页面每一页都有。
   换成 --dk-mute 后是 7.40:1。 */
.main-footer .logo-widget .text {
	color: var(--dk-mute);
}

/* 二维码：透明底 + 深色码点，放灰色页脚上扫不出来，加一层白底板 */
.main-footer .news-widget img {
	background-color: #ffffff;
	padding: 10px;
	border-radius: 4px;
	display: block;
}


/* ==========================================================================
   10. Bootstrap 兜底
   前台实际只用到 .dropdown-menu 这一个 bootstrap 组件
   ========================================================================== */

.dropdown-menu {
	background-color: var(--dk-card);
	border-color: var(--dk-line);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.dropdown-menu > li > a {
	color: var(--dk-text);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
	background-color: var(--dk-bg-alt);
	color: var(--dk-accent-text);
}


/* ==========================================================================
   11. 小屏适配
   responsive.css 里移动端导航面板写死了 #2c2c2c（:645 面板本身、:693 三级子菜单），
   在近黑底色 #1a1a1a 上还算协调，但底色换成中灰 #585858 之后就是一块明显的深色补丁，
   所以这里把面板整体提到 --dk-card，和下拉菜单（第 10 节）保持一致。

   :737 是每一栏链接自己的底色，:754 是「当前栏目 / hover」的底色 —— 两者原本
   **都等于面板色**，所以在手机上鼠标划过一栏是看不出任何反馈的。
   这里把这一组压到 --dk-deep，让它在浅一阶的面板上凹下去。

   说明一下 :754 那组选择器里的 .current / .current-menu-item：
   本站模板**从头到尾不给导航项加 current 类**（header.php 里没有相关代码，
   7 个页面渲染出来一个 current 都没有），所以这两个分支是永不触发的，
   真正会生效的只有 :hover。留着是因为 responsive.css:754 原本就写了它们，
   万一以后换了导航生成方式也不会漏。
   ========================================================================== */

@media only screen and (max-width: 991px) {

	/* 移动端展开的导航面板：底色 + 原本是白色的边框 */
	.main-menu .navbar-collapse > .navigation {
		background: var(--dk-card);
		border: 1px solid var(--dk-line);
	}

	/* 三级子菜单面板 */
	.main-menu .navbar-collapse > .navigation > li > ul > li > ul {
		background: var(--dk-card);
	}

	/* 每一栏链接的底色（原来写死 #2c2c2c） */
	.main-menu .navbar-collapse > .navigation > li > a,
	.main-menu .navbar-collapse > .navigation > li > ul > li > a,
	.main-menu .navbar-collapse > .navigation > li > ul > li > ul > li > a {
		background: var(--dk-card);
	}

	/* hover 那一栏：压暗一阶，做成凹下去的效果（current 分支见文件上方说明，不会触发）。
	   注意这里不要改成金色 —— responsive.css:754 把文字钉死成 #ffffff !important，
	   金色底 + 白字对比度只有 2.2:1。 */
	.main-menu .navbar-collapse > .navigation > li:hover > a,
	.main-menu .navbar-collapse > .navigation > li > ul > li:hover > a,
	.main-menu .navbar-collapse > .navigation > li > ul > li > ul > li:hover > a,
	.main-menu .navbar-collapse > .navigation > li.current > a,
	.main-menu .navbar-collapse > .navigation > li.current-menu-item > a {
		background: var(--dk-deep);
	}

	/* 移动端每一栏之间那几条纯白分隔线，在灰底上太刺眼，压暗 */
	.main-menu .navbar-collapse > .navigation > li,
	.main-menu .navbar-collapse > .navigation > li > ul > li,
	.main-menu .navbar-collapse > .navigation > li > ul > li > ul > li {
		border-top: 1px solid var(--dk-line-2) !important;
	}

	/* 移动端分页边框 */
	.styled-pagination .inner-container ul li a {
		border: 1px solid var(--dk-line);
	}
}