/* ============================================================ Theme C — 展场海报·大字版 挂载： 生效： 语言：纯白底、纯黑墨、信号橙红 #FF4D1C、2px 外露粗网格、零圆角、 重磅黑体巨字。黑白为主，橙红只做打击点。 规则：所有选择器一律以 html[data-theme="c"] 开头，不外泄。 ============================================================ */ /* ---------- 1. 变量重定义（基础 CSS 全部走这些变量） ---------- */ html[data-theme="c"]{ --bg:#FFFFFF; --panel:#FFFFFF; --ink:#111111; --ink-2:#333333; --meta:#666666; --indigo:#FF4D1C; /* 主题强调色 → 信号橙红 */ --indigo-deep:#111111; /* credo 大块底 → 纯黑 */ --indigo-wash:#FFEDE7; /* 橙红淡底 */ --line:#111111; /* 所有描线 → 纯黑 */ --serif:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif; /* 衬线位也指黑体 */ --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif; --mono:ui-monospace,"SF Mono","JetBrains Mono","Menlo",monospace; } /* ---------- 2. 全站基调：零圆角 / 焦点态 / 挂载点 ---------- */ html[data-theme="c"] .stage, html[data-theme="c"] .q-card, html[data-theme="c"] .ev, html[data-theme="c"] .hw-card, html[data-theme="c"] .deliver, html[data-theme="c"] .num-card, html[data-theme="c"] .credo, html[data-theme="c"] .pain-card, html[data-theme="c"] .qr-card, html[data-theme="c"] .qr-card img, html[data-theme="c"] .read-more a, html[data-theme="c"] .plus-btn, html[data-theme="c"] .identity-btn, html[data-theme="c"] .hero-nav a, html[data-theme="c"] .status-tag, html[data-theme="c"] .skill-tags span, html[data-theme="c"] .decode-label .dot{ border-radius:0; } html[data-theme="c"] :focus-visible{ outline:3px solid var(--indigo); outline-offset:3px; border-radius:0; } /* 其他主题的挂载点，在 C 下保持隐藏 */ html[data-theme="c"] .only-a, html[data-theme="c"] .only-b{ display:none; } /* ---------- 3. 顶部导航：黑底白字 ---------- */ html[data-theme="c"] .nav{ background:#111; backdrop-filter:none; border-bottom:none; } html[data-theme="c"] .nav-name{ font-weight:900; color:#fff; } html[data-theme="c"] .nav-name a{color:#fff} html[data-theme="c"] .nav-links a{ color:rgba(255,255,255,.88); font-weight:600; } html[data-theme="c"] .nav-links a:hover{color:var(--indigo)} /* ---------- 4. Hero：巨字海报首屏 ---------- */ html[data-theme="c"] .hero{ border-bottom:6px solid var(--ink); } html[data-theme="c"] .eyebrow{ font-family:var(--sans); font-size:13px; font-weight:800; letter-spacing:.25em; color:var(--ink); } html[data-theme="c"] .eyebrow::before{ content:""; display:inline-block; width:44px;height:13px; background:var(--indigo); margin-right:14px; vertical-align:-1px; } html[data-theme="c"] .hero h1{ font-weight:900; font-size:clamp(52px,10vw,104px); line-height:1.12; letter-spacing:.01em; } html[data-theme="c"] .identity{ font-weight:900; color:var(--indigo); border-bottom:6px solid var(--indigo); padding-bottom:4px; } html[data-theme="c"] .identity-btn{ border:2px solid var(--ink); color:var(--ink); font-weight:700; } html[data-theme="c"] .identity-btn:hover{ border-color:var(--indigo); color:var(--indigo); } html[data-theme="c"] .decode-label{ font-weight:700; letter-spacing:.2em; color:var(--ink); } html[data-theme="c"] .decode{ font-size:clamp(22px,3.6vw,30px); font-weight:800; line-height:1.55; } html[data-theme="c"] .decode .pending{ color:#767676; /* 白底可读的灰 */ opacity:1; } /* hero 导览条：四格相接的海报导览（网格实现，避免负边距在换行时错位） */ html[data-theme="c"] .hero-nav{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:2px solid var(--ink); border-left:2px solid var(--ink); } html[data-theme="c"] .hero-nav a{ border:none; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); background:#fff; color:var(--ink); text-align:center; padding:16px 10px 14px; font-size:15px; font-weight:800; line-height:1.4; } html[data-theme="c"] .hero-nav a b{ display:block; font-family:var(--sans); font-weight:900; font-size:clamp(20px,3vw,26px); color:var(--indigo); margin:0 0 4px; } html[data-theme="c"] .hero-nav a:hover{ background:var(--indigo); color:#fff; border-color:var(--ink); text-decoration:none; } html[data-theme="c"] .hero-nav a:hover b{color:#fff} /* ---------- 5. 章节头：巨字 + 橙块编号 + 橙底状态块 ---------- */ html[data-theme="c"] .sec-no{ font-family:var(--sans); font-size:13px; font-weight:800; letter-spacing:.3em; color:var(--ink); } html[data-theme="c"] .sec-no::before{ content:""; display:inline-block; width:32px;height:11px; background:var(--indigo); margin-right:12px; vertical-align:0; } html[data-theme="c"] .sec-head h2{ font-weight:900; font-size:clamp(40px,7.5vw,72px); line-height:1.15; } html[data-theme="c"] .status-tag{ background:var(--indigo); border:2px solid var(--indigo); color:#fff; font-weight:700; font-size:13px; padding:4px 12px; } /* ---------- 6. 第①章：三段卡 / 交付四格 / credo ---------- */ html[data-theme="c"] .stage{ border:2px solid var(--ink); } html[data-theme="c"] .stage h3{ font-size:clamp(20px,3vw,26px); font-weight:900; } html[data-theme="c"] .stage-cols{ border-top:2px solid var(--ink); } html[data-theme="c"] .skill-tags span{ background:transparent; border:2px solid var(--ink); color:var(--ink); font-weight:700; } html[data-theme="c"] .aside-note{ border-left:3px solid var(--ink); } /* 交付四格：海报格（容器给上/左框，格子给右/下框，2px 相接不叠加） */ html[data-theme="c"] .deliver-grid{ gap:0; border-top:2px solid var(--ink); border-left:2px solid var(--ink); } html[data-theme="c"] .deliver{ border:none; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); } html[data-theme="c"] .deliver .dn{font-weight:800} /* credo：黑底白字，em 下划橙红 */ html[data-theme="c"] .credo{ color:#fff; } html[data-theme="c"] .credo p{font-weight:700} html[data-theme="c"] .credo em{ border-bottom:3px solid var(--indigo); padding-bottom:2px; } /* ---------- 7. 第②章：问题墙海报格 ---------- */ html[data-theme="c"] .q-grid{ gap:0; border-top:2px solid var(--ink); border-left:2px solid var(--ink); } html[data-theme="c"] .q-card{ border:none; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); padding:24px 26px 22px; } html[data-theme="c"] .q-no{ font-family:var(--sans); font-weight:900; font-size:clamp(36px,6vw,44px); line-height:1; letter-spacing:0; color:var(--indigo); } html[data-theme="c"] .q-text{font-weight:600} /* 痛点卡：橙红 2px 边 + 橙红淡底；负边距盖住网格的黑框线 */ html[data-theme="c"] .pain-card{ background:var(--indigo-wash); border:2px solid var(--indigo); margin:-2px 0 0 -2px; /* 上/左盖掉黑线，右/下与格子外缘对齐 */ } html[data-theme="c"] .pain-card h3{ font-size:clamp(20px,3vw,26px); font-weight:900; } /* +1 按钮：黑底白字方角，hover / 选中 = 橙红底白字 */ html[data-theme="c"] .plus-btn{ background:var(--ink); border:2px solid var(--ink); color:#fff; font-weight:700; } html[data-theme="c"] .plus-btn .cnt{color:rgba(255,255,255,.72)} html[data-theme="c"] .plus-btn:hover{ background:var(--indigo); border-color:var(--indigo); color:#fff; } html[data-theme="c"] .plus-btn:hover .cnt{color:rgba(255,255,255,.85)} html[data-theme="c"] .plus-btn[aria-pressed="true"]{ background:var(--indigo); border-color:var(--indigo); color:#fff; } html[data-theme="c"] .plus-btn[aria-pressed="true"] .cnt{color:rgba(255,255,255,.85)} /* ---------- 8. 第③章：数字卡 + 证据列表 ---------- */ html[data-theme="c"] .num-card{ border:2px solid var(--ink); } html[data-theme="c"] .num-card .n{ font-family:var(--sans); font-weight:900; font-size:clamp(30px,5vw,48px); color:var(--indigo); } html[data-theme="c"] .ev{ border:2px solid var(--ink); } html[data-theme="c"] .ev-id{ color:var(--indigo); font-weight:800; } html[data-theme="c"] .ev-body h3{ font-size:clamp(19px,2.8vw,24px); font-weight:900; } /* ---------- 9. 第④章：作业海报格 ---------- */ html[data-theme="c"] .hw-grid{ gap:0; border-top:2px solid var(--ink); border-left:2px solid var(--ink); } html[data-theme="c"] .hw-card{ border:none; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); } html[data-theme="c"] .hw-card h3{font-weight:900} html[data-theme="c"] .hw-close{ font-weight:800; font-size:clamp(20px,3.2vw,26px); } /* ---------- 10. 延伸阅读 / 找到我 ---------- */ html[data-theme="c"] .read-more a{ border:2px solid var(--ink); font-weight:700; } html[data-theme="c"] .read-more a b{font-weight:700} html[data-theme="c"] .read-more a:hover{ background:var(--indigo); border-color:var(--indigo); color:#fff; } html[data-theme="c"] .read-more a:hover b{color:#fff} /* 二维码卡：白底黑 2px 边，保证可扫 */ html[data-theme="c"] .qr-card{ background:#fff; border:2px solid var(--ink); } /* ---------- 10b. 右下角皮肤切换条：方角黑边，与海报语言一致 ---------- */ html[data-theme="c"] .skin-bar{ border-radius:0; border:2px solid var(--ink); box-shadow:4px 4px 0 var(--ink); } html[data-theme="c"] .skin-btn{ border-radius:0; font-weight:700; } html[data-theme="c"] .skin-btn[aria-pressed="true"]{ background:var(--indigo); border-color:var(--indigo); color:#fff; } /* ---------- 11. footer：黑底白字 ---------- */ html[data-theme="c"] footer{ background:#111; border-top:none; } html[data-theme="c"] .foot-inner{ color:rgba(255,255,255,.92); } html[data-theme="c"] .foot-inner a{color:var(--indigo)} /* ---------- 12. 响应式（760px 与基础断点对齐；巨字均已 clamp） ---------- */ @media (max-width:760px){ html[data-theme="c"] .hero-nav{ grid-template-columns:1fr 1fr; /* 导览条窄屏降两列，网格实现无错位 */ } html[data-theme="c"] .hero-nav a{padding:13px 8px 11px} html[data-theme="c"] .status-tag{ vertical-align:4px; margin-left:10px; } /* .q-grid / .hw-grid / .deliver-grid / .num-row 的降列由基础 CSS 负责， 本主题的 上/左框 + 右/下框 结构在单列下同样成立，无需额外处理 */ }