/* Theme Name: James Energy Center Theme URI: https://james-energy-center.com/ Author: James Tan Author URI: https://james-energy-center.com/ Description: 商业奇门詹姆斯 James.Energy.Center 官方主题。宣纸墨色调，朱砂・石绿・赭金点缀，含顶部公告条与固定导览列。 Version: 1.1.0 Requires at least: 6.0 Tested up to: 6.8 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: james-energy-center Tags: one-column, custom-menu, custom-logo, translation-ready */ /* ============================================================ 1. 变量 ============================================================ */ :root{ --bg:#efe8d9; /* 宣纸页底 */ --surface:#fbf7ee; /* 版框内纸 */ --surface-2:#f7f1e4; /* 次层纸 */ --line: rgba(34,32,28,0.20); --hair: rgba(34,32,28,0.13); --gold:#946f1c; /* 赭金 */ --gold-bright:#b98d2e; /* 亮赭金 */ --red:#a8321f; /* 朱砂 */ --jade:#2c6f5e; /* 石绿 */ --ink:#22201c; /* 墨 */ --muted:#8b8272; /* 淡墨 */ --font-display:'Noto Serif SC', "Songti SC", SimSun, serif; --font-body:'Noto Sans SC', "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, system-ui, sans-serif; --font-accent:'Cormorant Garamond', serif; /* 公告条高度：载入后由 JS 依实际高度覆写，此值为保险预设 */ --announce-h:52px; } /* ============================================================ 2. 基础 ============================================================ */ *{box-sizing:border-box; margin:0; padding:0;} html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--announce-h) + 78px); /* 手机／App 内建浏览器（WhatsApp、IG、Android WebView 等）会用 theme-color 去填 后面的空白，若 html 没有底色，就会露出深色一长条。 这里补上与 body 一致的浅色底，任何情况下都不再出现深色空白。 */ background:var(--bg); min-height:100%; } body{ min-height:100vh; background: repeating-linear-gradient(0deg, rgba(120,100,70,0.035) 0 1px, transparent 1px 3px), radial-gradient(130% 90% at 50% -15%, #fffdf6 0%, transparent 65%), var(--bg); color:var(--ink); font-family:var(--font-body); font-weight:400; line-height:1.7; font-feature-settings:"tnum" 1; overflow-x:hidden; /* iOS Safari 横向时会自作主张放大文字，关掉 */ -webkit-text-size-adjust:100%; text-size-adjust:100%; /* 深底浅字在 macOS 上会显得糊，改用抗锯齿 */ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; /* Android Chrome 点击时的灰色闪块 */ -webkit-tap-highlight-color:transparent; } body::before{ content:''; position:fixed; top:0; right:0; bottom:0; left:0; inset:0; background-image: radial-gradient(circle at 15% 20%, rgba(148,111,28,0.05), transparent 40%), radial-gradient(circle at 85% 75%, rgba(168,50,31,0.05), transparent 45%); pointer-events:none; z-index:0; } a{color:inherit; text-decoration:none;} a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{ outline:2px solid var(--red); outline-offset:3px; border-radius:2px; } img{max-width:100%; height:auto;} h1,h2,h3,h4{font-family:var(--font-display); font-weight:700; letter-spacing:0.02em; color:var(--ink);} ::selection{background:var(--gold); color:#fdfaf3;} .wrap{max-width:1180px; margin:0 auto; padding:0 28px;} /* 跳到内容（无障碍） 用标准裁切法隐藏，比 left:-9999px 可靠：部分 Android 浏览器 会把移出画面的元素照样画在版面上。只有键盘聚焦时才现身。 */ .skip-link{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; } .skip-link:focus, .skip-link:focus-visible{ position:fixed; left:12px; top:12px; z-index:200; width:auto; height:auto; margin:0; padding:10px 18px; overflow:visible; clip:auto; clip-path:none; background:var(--gold); color:#fdfaf3; font-weight:700; } /* ============================================================ 3. 公告条 BAR ============================================================ */ .announce{ position:fixed; top:0; left:0; right:0; z-index:101; background:var(--red); color:#fdf5ef; font-size:12.5px; letter-spacing:0.04em; line-height:1.5; padding:9px 16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; } .announce .an-text{opacity:0.92;} .announce a{ flex-basis:auto; margin-top:0; display:inline-flex; align-items:center; gap:6px; color:#fdf5ef; font-weight:700; white-space:nowrap; border:1px solid rgba(253,245,239,0.55); border-radius:20px; padding:2px 12px; transition:background .25s, color .25s; } .announce a:hover{background:#fdf5ef; color:var(--red); border-color:#fdf5ef;} @media (max-width:520px){ .announce{font-size:11.5px; padding:8px 12px; gap:5px;} .announce a{padding:2px 10px;} } /* ============================================================ 4. 导览列 HEADER ============================================================ */ .site-header{ position:fixed; top:var(--announce-h); left:0; right:0; z-index:102; background:rgba(251,247,238,0.78); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 2px 6px rgba(60,50,30,.08); } .site-nav{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px 28px; max-width:1180px; margin:0 auto; } .logo{ display:flex; align-items:center; gap:10px; flex-shrink:0; min-width:0; color:var(--gold); } .logo .seal{ width:40px; height:40px; flex-shrink:0; object-fit:contain; display:block; /* 原图四周有约 25% 透明留白，放大后标志才不会看起来又小又淡 */ transform:scale(1.32); transform-origin:center; } .logo-text{ font-family:var(--font-display); font-size:19px; font-weight:900; letter-spacing:0.01em; white-space:nowrap; color:var(--gold); } .nav-links{ display:flex; align-items:center; gap:26px; margin-left:auto; font-size:14px; color:var(--muted); white-space:nowrap; list-style:none; } /* 桌面／笔电：站名与选单之间保留一道拆不掉的最小距离 + 1px 竖线分区 （只写在 901px 以上，不影响手机抽屉选单的排版） */ @media (min-width:901px){ .nav-links{position:relative; padding-left:56px;} .nav-links::before{ content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:26px; background:var(--line); } } .nav-links li{position:relative;} .nav-links a{transition:color .25s;} .nav-links .current-menu-item > a{color:var(--gold);} /* hover 效果只给真的有游标的装置：手机上 :hover 会在点击后卡住不退 */ @media (hover:hover) and (pointer:fine){ .nav-links a:hover{color:var(--gold);} } .nav-cta{ border:1px solid var(--gold); color:var(--gold); padding:9px 20px; border-radius:2px; font-size:13.5px; letter-spacing:0.05em; transition:all .25s; background:linear-gradient(180deg,#fffdf7,#efe7d6); box-shadow:0 1px 0 rgba(255,255,255,.9) inset; } .nav-cta:hover{background:var(--gold); color:#fdfaf3; border-color:var(--gold);} /* 不支援毛玻璃的浏览器（旧 Android WebView、Firefox 预设关闭）： 改用不透明底，否则内容会透出来变成一团糊 */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .site-header{background:#fbf7ee;} .nav-backdrop{background:rgba(34,32,28,0.5);} } /* 下拉子选单（桌面） */ .nav-links .sub-menu{ display:none; position:absolute; top:calc(100% + 14px); left:0; background:var(--surface); border:1px solid var(--line); border-radius:4px; min-width:180px; padding:6px 0; list-style:none; box-shadow:0 6px 16px -8px rgba(60,50,30,.4); } .nav-links li:hover > .sub-menu, .nav-links li:focus-within > .sub-menu{display:block;} .nav-links .sub-menu a{display:block; padding:10px 18px; font-size:13.5px;} /* 手机版选单按钮：三条线，展开时转成 ✕ */ .burger{ display:none; width:42px; height:42px; z-index:110; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px; background:transparent; border:1px solid var(--line); border-radius:4px; padding:0; transition:border-color .25s, background .25s; } .burger:hover{border-color:var(--gold); background:rgba(148,111,28,0.08);} .burger .bar{ display:block; width:20px; height:2px; background:var(--gold); transition:transform .3s ease, opacity .2s ease; } .burger[aria-expanded="true"] .bar-1{transform:translateY(7px) rotate(45deg);} .burger[aria-expanded="true"] .bar-2{opacity:0;} .burger[aria-expanded="true"] .bar-3{transform:translateY(-7px) rotate(-45deg);} .nav-backdrop{ display:none; position:fixed; top:0; right:0; bottom:0; left:0; inset:0; z-index:99; background:rgba(34,32,28,0.42); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); } .nav-backdrop.show{display:block;} body.menu-open .mobile-sticky-cta{display:none;} /* ============================================================ 5. 内容区（留白容器，等你放页面内容） ============================================================ */ .site-main{ position:relative; z-index:1; padding:calc(var(--announce-h) + 130px) 0 110px; /* 不再强制 60vh，改由内容自然撑开，避免内容不长时底部留一大段空白 */ } /* Elementor 全宽模板：不限宽、不留左右内距，让区段铺满萤幕 */ .site-main--full{ padding:calc(var(--announce-h) + var(--header-h, 70px)) 0 0; } .site-main--full > .elementor{width:100%;} /* Elementor 编辑器内不要让固定导览列挡住第一个区段 */ body.elementor-editor-active .site-header{position:absolute;} .entry-title{font-size:clamp(28px,3.4vw,40px); margin-bottom:22px; color:var(--ink); letter-spacing:0.04em;} .entry-content{color:var(--muted); max-width:760px;} .entry-content p{margin-bottom:16px;} .entry-content a{color:var(--gold-bright); border-bottom:1px solid var(--line);} .entry-content h2{font-size:clamp(24px,2.9vw,32px); color:var(--ink); margin:38px 0 16px;} .entry-content h3{font-size:20px; color:var(--ink); margin:28px 0 12px;} .entry-content ul, .entry-content ol{margin:0 0 18px 20px;} .entry-content li{margin-bottom:8px;} .entry-content blockquote{ border-left:2px solid var(--gold); padding-left:18px; color:var(--ink); margin:22px 0; } .entry-content img{border-radius:6px;} .divider{ height:1px; background:linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent); max-width:1180px; margin:0 auto; } /* ============================================================ 6. 页脚 ============================================================ */ .site-footer{ position:relative; z-index:1; text-align:center; padding:40px 28px; color:var(--muted); font-size:12.5px; border-top:1px solid var(--line); } .site-footer .disclaimer{max-width:560px; margin:0 auto 14px; line-height:1.7; opacity:0.75;} /* ============================================================ 7. 手机固定 CTA ============================================================ */ .mobile-sticky-cta{ display:none; position:fixed; bottom:0; left:0; right:0; z-index:105; background:linear-gradient(180deg,#bf3f2a,#982c1a); color:#fdf5ef; font-weight:700; font-size:14.5px; align-items:center; justify-content:center; gap:8px; padding:15px 15px calc(15px + env(safe-area-inset-bottom, 0px)); letter-spacing:0.03em; border-top:1px solid #8a2716; box-shadow:0 -1px 0 rgba(255,255,255,.2) inset; } .mobile-sticky-cta .wa-icon{font-size:16px;} /* ============================================================ 8. 响应式 ============================================================ */ @media (max-width: 900px){ .nav-links{ position:fixed; top:0; right:-100%; margin-left:0; width:min(78%, 320px); height:100vh; height:100dvh; /* dvh 会跟着网址列伸缩，iOS/Android 才不会破底 */ background:var(--surface); border-left:1px solid var(--line); flex-direction:column; align-items:stretch; justify-content:flex-start; padding:92px 24px 30px; gap:0; transition:right .35s cubic-bezier(.2,.7,.3,1); overflow-y:auto; -webkit-overflow-scrolling:touch; z-index:108; /* 瀏海机横放时，抽屉内容不要被圆角与感应区吃掉 */ padding-right:max(24px, env(safe-area-inset-right)); } .nav-links.open{right:0;} .nav-links > li > a{ display:block; padding:16px 4px; font-size:15.5px; color:var(--ink); border-bottom:1px solid var(--line); } .nav-links .sub-menu{ display:block; position:static; border:none; background:transparent; padding:0 0 0 14px; box-shadow:none; } .nav-links .sub-menu a{border-bottom:1px solid var(--line); padding:13px 4px;} .nav-links a.nav-cta{ margin-top:22px; padding:15px; text-align:center; border:1px solid var(--gold); background:var(--gold); color:#fdfaf3; font-weight:700; font-size:14.5px; border-radius:3px; } .burger{display:flex;} body{padding-bottom:calc(70px + env(safe-area-inset-bottom, 0px));} .mobile-sticky-cta{display:flex;} /* 窄屏节奏：留白收敛，段落不被挤到边缘 */ .wrap{padding:0 20px;} .site-main{padding:calc(var(--announce-h) + 104px) 0 40px;} } /* 内容末尾若留有空的区块（空段落、空的自订 HTML／空 div），自动收合， 不让它在手机上撑出一段多余空白。只作用于「完全为空」的元素，安全无副作用。 */ .entry-content > p:empty, .entry-content > div:empty, .entry-content > .wp-block-html:empty{ display:none; } @media (max-width:400px){ .logo-text{font-size:16px;} .logo{gap:8px;} .site-nav{padding:12px 18px;} } @media (max-width:1080px) and (min-width:901px){ .nav-links{gap:18px; font-size:13.5px; padding-left:40px;} .logo-text{font-size:17px;} } @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} .nav-links{transition:none;} } /* WordPress 核心必要样式 */ .alignleft{float:left; margin:0 20px 20px 0;} .alignright{float:right; margin:0 0 20px 20px;} .aligncenter{display:block; margin:0 auto 20px;} .wp-caption-text{font-size:12.5px; color:var(--muted); text-align:center;} .screen-reader-text{ border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; width:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; } /* 公告条关闭时：不预留顶部高度 */ body.jec-no-announce{--announce-h:0px;} /* 手机吸底 CTA：底部让位以其实际高度为准， 内容（含自订 HTML 区块）不会被压在按钮底下。 */ @media (max-width:900px){ body{padding-bottom:calc(78px + env(safe-area-inset-bottom, 0px));} }