/* ============================================================ * noransom.net 品牌层 —— 官网专属结构的样式 * * 加载顺序：style.css -> skin.css -> noransom.css（partials/site.php 的 extra_css）。 * 本文件只写官网特有的结构（公告栏、品牌字标、页头热线、页脚紧急响应横幅、 * 内页 PageHero、应急侧栏部件、通用按钮），颜色一律取 skin.css 里的 token。 * * 类名契约见 header.php / footer.php / sidebar.php / partials/emergency-widget.php。 * ============================================================ */ /* ============================================================ * 0. 本层新增 token * ============================================================ */ :root{ /* 深色区块的网格纹与橙色光晕（官网 bg-grid-dark + blur-3xl 光斑） */ --once-grid: linear-gradient(to right,var(--once-grid-line) 1px,transparent 1px), linear-gradient(to bottom,var(--once-grid-line) 1px,transparent 1px); --once-glow:rgba(242,101,34,.2); --once-glow-soft:rgba(242,101,34,.15); } /* 吸顶页头实测 73px（sticky, top:0），锚点不留余量就会被整段盖住。一次覆盖 #main / #post_comment_anchor / #comment-xxx / 评论分页等所有原生锚点。 不要加 scroll-behavior:smooth——与本文件末尾的 reduced-motion 兜底冲突。 style.css 的 .wznrys h1..h6{scroll-margin-top:96px} 保持不动，两者不冲突。 */ html{scroll-padding-top:88px;} /* 跳到正文（header.php 里 之后的第一个可聚焦元素）。 不聚焦时移出视口，聚焦时变成官网同款橙色按钮。 */ .skip-link{position:absolute;left:-9999px;top:0;z-index:1080;} .skip-link:focus{ left:8px;top:8px; display:inline-flex;align-items:center; height:40px;padding:0 16px; border-radius:var(--once-btn-radius); background:var(--once-accent-500); color:#fff;font-weight:600;font-size:14px; text-decoration:none; box-shadow:0 0 0 3px rgba(242,101,34,.35); } /* ============================================================ * 1. 顶部公告栏（页头之上，随页面滚走） * ============================================================ */ .site-announcement{ background:var(--once-announcement-bg); border-bottom:1px solid var(--once-header-border); color:rgba(255,255,255,.9); font-size:13px; } .site-announcement__inner{ display:flex; align-items:center; justify-content:center; gap:10px; min-height:36px; } .site-announcement__icon{ flex-shrink:0; color:var(--once-accent-400); font-size:14px; line-height:1; } .site-announcement__text{ margin:0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .site-announcement__cta{ display:inline-flex; align-items:center; gap:5px; flex-shrink:0; color:var(--once-accent-300); font-weight:600; text-decoration:none; } .site-announcement__cta:hover, .site-announcement__cta:focus-visible{color:var(--once-accent-100);} .site-announcement__phone{font-weight:700;font-variant-numeric:tabular-nums;} .site-announcement__cta i{font-size:12px;} /* ============================================================ * 2. 品牌字标（页头 / 移动端抽屉 / 页脚共用） * ============================================================ */ .brand{ display:inline-flex; align-items:center; border-radius:var(--once-btn-radius); text-decoration:none; color:inherit; } .brand:hover{color:inherit;} .brand-lockup{ display:inline-flex; align-items:center; gap:10px; } .brand-mark{ width:36px; height:36px; flex-shrink:0; display:block; } .brand-text{ display:flex; flex-direction:column; line-height:1; min-width:0; } .brand-primary{ font-size:17px; font-weight:700; letter-spacing:.08em; color:var(--once-header-text); white-space:nowrap; } .brand-secondary{ margin-top:4px; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.18em; color:var(--once-header-faint); white-space:nowrap; } /* 英文站主次互换：主标题是拉丁文，字距收紧；副标题是中文，字距更松 */ .brand--en .brand-primary{letter-spacing:-.01em;} .brand--en .brand-secondary{letter-spacing:.3em;text-transform:none;} /* 浅色底变体（当前站点没有浅色页头，留给独立页/打印样式用） */ .brand--light .brand-primary{color:var(--once-brand-950);} .brand--light .brand-secondary{color:var(--once-slate-500);} /* 页头里的 logo 容器（