/* Theme Name: Yungee Editorial Theme URI: https://yungee.net/ Author: 云迹编辑部 Author URI: https://yungee.net/ Description: 云迹（YUNGEE）——面向「连接、隐私与数字生活」的独立中文编辑媒体经典主题。高端克制的钛金银灰视觉：石墨蓝灰文字、钛银白纸面、深海军蓝页眉与克制冰蓝强调色，高信息密度但阅读舒适，全部视觉由 CSS 渐变、细网格与原创 SVG 生成，不依赖外部字体、图片、JS 框架或 CDN。编辑型首页，非推广落地页。 Version: 1.8.9 Requires at least: 6.0 Tested up to: 6.5 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: jichang-editorial Tags: blog, news, magazine, editorial, two-columns, right-sidebar, custom-menu, custom-logo, featured-images, translation-ready, threaded-comments */ /* ========================================================================= 0. Design tokens ========================================================================= */ :root { /* Light editorial palette — warm-white paper, blue-grey ink and a restrained mineral-blue accent. Dark navy is retained only for compact controls and image fallbacks; header, hero and footer stay visibly light. */ --ink: #23364a; /* deep blue-grey, primary text */ --ink-soft: #4c6074; /* secondary reading text */ --ink-faint: #718294; /* muted metadata */ --paper: #f8fafc; /* open, slightly cool page base */ --paper-2: #eef4f8; /* pale blue-grey panel */ --paper-line: #d8e3ec; /* quiet structural hairline */ --green-900: #243b53; /* compact dark control / image fallback */ --green-800: #304c67; /* compact dark control / image fallback */ --hero-panel: #eaf3f8; /* light mineral hero panel */ --green-700: #356486; /* primary button and active state */ --green-600: #4c7e9f; /* hover / small emphasis */ --accent: #287fa8; /* editorial blue — links and focus */ --accent-soft: #78b8d4; /* pale blue highlight */ --accent-strong:#1f668b; /* accessible link hover */ --control-bg: #e0f0f7; /* pale interactive surface */ --control-hover:#c9e5f1; /* hover / active pale surface */ --control-line: #9fc8da; /* interactive outline */ --teal: #3e8fb0; /* secondary cool accent (reserved) */ --danger: #b0554a; /* muted brick (reserved) */ --paper-on-dark:#f7fbfe; /* retained for compact dark controls */ --muted-on-dark:#c7d7e4; /* retained for compact dark controls */ --maxw: 1200px; --maxw-read: 720px; --radius: 10px; /* editorial, not exaggerated */ --radius-sm: 6px; --gap: clamp(1rem, 2.2vw, 2rem); --shadow: 0 1px 2px rgba(24, 34, 48, .05), 0 10px 26px -18px rgba(24, 34, 48, .20); --shadow-lg: 0 22px 52px -30px rgba(24, 34, 48, .32); --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif; --font-serif: Georgia, "Times New Roman", "Songti SC", "SimSun", "Source Han Serif SC", "Noto Serif CJK SC", serif; --fs-base: clamp(1rem, .96rem + .3vw, 1.075rem); --lh-base: 1.75; } /* ========================================================================= 1. Reset-ish base ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } /* Reserve a stable vertical scrollbar slot on every page so the shared header and container don't shift horizontally between short and long pages. */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-y: scroll; scrollbar-gutter: stable; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-base); color: var(--ink); background-color: var(--paper); background-image: radial-gradient(1200px 600px at 100% -10%, rgba(63, 110, 155, .06), transparent 60%), radial-gradient(900px 500px at -10% 0%, rgba(150, 166, 188, .05), transparent 55%); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Clip (not hidden) horizontal overflow: `hidden` makes a scroll container, which silently breaks `position: sticky` on the sidebar; `clip` contains overflow the same way without establishing a scroll container. */ overflow-x: clip; } img { max-width: 100%; height: auto; display: block; } a { color: var(--accent); text-decoration: none; text-underline-offset: .18em; } a:hover, a:focus { text-decoration: underline; color: var(--accent-strong); } h1, h2, h3, h4 { line-height: 1.25; color: var(--ink); font-weight: 700; letter-spacing: -.01em; } p { margin: 0 0 1.1em; } :focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 3px; } .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden; position: absolute !important; word-wrap: normal !important; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--green-800); color: #fff; padding: .7em 1.1em; border-radius: 0 0 var(--radius-sm) 0; } .skip-link:focus { left: 0; } .container { width: min(100% - 2.4rem, var(--maxw)); margin-inline: auto; } /* ========================================================================= 2. Site header + navigation ========================================================================= */ .site-header { position: relative; color: var(--paper-on-dark); background: linear-gradient(180deg, var(--green-900), var(--green-800) 70%, var(--green-700)); border-bottom: 1px solid rgba(150, 175, 205, .22); overflow: hidden; } .site-header::after { /* Fine engraved titanium grid — pure CSS, original. */ content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px), radial-gradient(600px 200px at 85% -40%, rgba(150,185,215,.14), transparent 60%); mix-blend-mode: screen; } .site-header__inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding-block: clamp(.9rem, 2vw, 1.4rem); } .site-branding { display: flex; align-items: center; gap: .85rem; min-width: 0; } .site-mark { flex: none; width: 46px; height: 46px; border-radius: 12px; background: radial-gradient(120% 120% at 30% 20%, var(--green-600), var(--green-900)); border: 1px solid rgba(150,180,210,.4); display: grid; place-items: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); } .site-mark svg { width: 26px; height: 26px; } /* 品牌标题可被 header.php 输出为 h1（首页）或 p（分类/文章页），不能继承元素默认排版——显式锁定行高与字重，保证两种渲染的排版盒一致。 */ .site-title { margin: 0; font-size: clamp(1.15rem, 2.4vw, 1.5rem); letter-spacing: .02em; line-height: 1.25; font-weight: 700; } .site-title a { color: var(--paper-on-dark); } .site-title a:hover { color: #fff; text-decoration: none; } .site-description { display: flex; align-items: center; gap: .5rem; margin: .34rem 0 0; font-size: .72rem; line-height: 1.25; color: rgba(215, 231, 240, .74); letter-spacing: .1em; } .site-description::before { content: ''; flex: 0 0 auto; width: 1.25rem; height: 1px; background: rgba(124, 196, 234, .72); } .nav-toggle { display: none; align-items: center; gap: .5rem; background: transparent; color: var(--paper-on-dark); border: 1px solid rgba(255,255,255,.28); border-radius: 10px; padding: .55rem .8rem; font: inherit; font-size: .9rem; cursor: pointer; } .nav-toggle:hover { border-color: var(--accent); } .nav-toggle__bars { display: inline-block; width: 18px; height: 12px; position: relative; } .nav-toggle__bars::before, .nav-toggle__bars::after, .nav-toggle__bars span { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; } .nav-toggle__bars::before { top: 0; } .nav-toggle__bars span { top: 5px; } .nav-toggle__bars::after { top: 10px; } .main-navigation { display: block; } .main-navigation ul { list-style: none; margin: 0; padding: 0; } .main-navigation > div > ul, .main-navigation .nav-menu { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem; } .main-navigation li { position: relative; } /* One base rule governs the box of EVERY top-level link — same font, size, line height, padding and radius on the front page and on every archive/page, so no item can inherit a different "font box". */ .main-navigation a { display: block; color: var(--paper-on-dark); padding: .5rem .8rem; border-radius: 8px; font-size: .95rem; font-weight: 500; line-height: 1.4; letter-spacing: .01em; } /* Hover/focus only recolours — it never changes the box size. */ .main-navigation a:hover, .main-navigation a:focus-visible { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; } /* Single, unified current state for every top-level item (home, category and page alike): the same restrained translucent pill as the front-page home item. No underline, no box-shadow, no change in font-weight or size — so the VPN current item can never look larger or bolder than any other. */ .main-navigation .is-current > a, .main-navigation .current-menu-item > a, .main-navigation .current_page_item > a { background: rgba(39,127,168,.28); color: #fff; font-weight: 500; box-shadow: none; text-decoration: none; } /* Sub-menus */ .main-navigation ul ul { position: absolute; top: 100%; left: 0; min-width: 200px; z-index: 40; background: var(--green-800); border: 1px solid rgba(150,175,205,.25); border-radius: 10px; padding: .35rem; box-shadow: var(--shadow-lg); display: none; flex-direction: column; } .main-navigation li:hover > ul, .main-navigation li:focus-within > ul { display: flex; } /* Desktop (>=761px) header geometry — deliberately fixed, NOT viewport-derived. A clamp(..vw..) resolves against the CSS viewport width, which differs between templates whenever a page toggles the vertical scrollbar (a long single post shows one, a short archive may not). That few-px width delta is enough to move the fluid header band and title, so the front page, category archives and posts each render a slightly different green band. Fixed rem/px values remove that dependency: one green-band height, one title size and one logo-to-title gap for every desktop template. The <=760px collapsed menu keeps the fluid base rules above and is intentionally left untouched. */ @media (min-width: 761px) { .site-header__inner { min-height: 82px; padding-block: 1.2rem; } .site-title { font-size: 1.4rem; } } /* ========================================================================= 3. Layout scaffolding ========================================================================= */ .site-main { padding-block: clamp(1.6rem, 4vw, 3rem); } .content-area { display: grid; gap: clamp(1.6rem, 4vw, 3rem); } .has-sidebar .content-area { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); align-items: start; } .section { margin-block: clamp(2rem, 5vw, 3.5rem); } .section:first-child { margin-top: 0; } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.3rem; border-bottom: 1px solid var(--paper-line); padding-bottom: .7rem; } .section-head h2 { margin: 0; font-size: clamp(1.15rem, 2.4vw, 1.45rem); display: inline-flex; align-items: center; gap: .55rem; } .section-head h2::before { content: ""; width: .5rem; height: 1.1em; border-radius: 3px; background: linear-gradient(var(--green-600), var(--accent)); } .section-head .more-link { font-size: .9rem; color: var(--ink-faint); white-space: nowrap; } /* ========================================================================= 4. Cards / article stream ========================================================================= */ .cat-badge { display: inline-block; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--green-700); background: var(--paper-2); border: 1px solid var(--paper-line); padding: .18rem .55rem; border-radius: 999px; } .cat-badge:hover { color: #fff; background: var(--green-700); text-decoration: none; border-color: var(--green-700); } .entry-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; color: var(--ink-faint); font-size: .84rem; } .entry-meta__sep { color: var(--paper-line); } .card { background: #ffffff; border: 1px solid var(--paper-line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease; } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--green-800); } .card__media img, .card__media .placeholder-cover, .card__media .entry-cover__img { width: 100%; height: 100%; object-fit: cover; display: block; } .card__media .cat-badge { position: absolute; left: .7rem; top: .7rem; background: rgba(238,241,245,.92); } /* Restrained「热门文章」badge — homepage featured hero ONLY (see jichang_editorial_hot_badge(); rendered solely by front-page.php's page-1 hero, never on cards, list rows, single posts, or category pages). A chamfered "cut-corner" tag flush to the cover's top-right in the deep blue-grey / titanium-silver system, so it stays clear of the headline, the category badge, and key screenshot content. clip-path clips the outer box-shadow, so the soft shadow uses filter: drop-shadow (which follows the cut shape) and the fine edge uses inset shadows. */ .card__media, .stream-item__media, .article-cover { position: relative; } .hero__media .hot-badge { position: absolute; top: 0; right: 0; z-index: 3; display: inline-flex; align-items: center; font-size: .72rem; line-height: 1; letter-spacing: .05em; font-weight: 600; color: #eef2f7; background: linear-gradient(135deg, #33404f, #212a35); padding: .34rem .62rem .34rem .74rem; clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px)); box-shadow: inset 0 1px 0 rgba(214,224,238,.22), inset 1px 0 0 rgba(214,224,238,.14); filter: drop-shadow(0 1px 2px rgba(15,20,28,.42)); pointer-events: none; /* keep the whole cover image link clickable */ } @media (max-width: 560px) { .hero__media .hot-badge { font-size: .66rem; padding: .28rem .5rem .28rem .62rem; clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px)); } } .card__body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; } .card__title { margin: 0; font-size: 1.12rem; line-height: 1.35; } .card__title a { color: var(--ink); } .card__title a:hover { color: var(--green-700); } .card__excerpt { margin: 0; color: var(--ink-soft); font-size: .94rem; } .card__foot { margin-top: auto; } /* Grid of cards */ .card-grid { display: grid; gap: 1.3rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } /* Front-page "最新文章" grid: a fixed two-column layout. With an odd number of cards (e.g. the 7 VPN reviews) the last card spans the full row instead of leaving an empty cell on its right. Scoped to the editorial home's main column so other card grids keep their responsive auto-fill behaviour. Mobile collapses this to a single column (see the 760px breakpoint). */ .is-editorial-home .primary-content .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .is-editorial-home .primary-content .card-grid > .card:last-child:nth-child(odd) { grid-column: 1 / -1; } /* Compact list row (used in category columns & search) */ .stream { display: flex; flex-direction: column; gap: 1.1rem; } .stream-item { display: grid; grid-template-columns: 150px 1fr; gap: 1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--paper-line); } .stream-item:last-child { border-bottom: 0; } .stream-item__media { aspect-ratio: 16 / 10; border-radius: var(--radius-sm); overflow: hidden; background: var(--green-800); } .stream-item__media img, .stream-item__media .placeholder-cover { width: 100%; height: 100%; object-fit: cover; } .stream-item__title { margin: .1rem 0 .4rem; font-size: 1.06rem; line-height: 1.35; } .stream-item__title a { color: var(--ink); } .stream-item__excerpt { margin: .3rem 0 0; font-size: .9rem; color: var(--ink-soft); } /* ========================================================================= 5. Hero (featured) ========================================================================= */ .hero { margin-bottom: clamp(2rem, 5vw, 3.5rem); } /* Shared hero (used by the category-page 栏目头条): full-bleed cover image with text overlaid on a bottom-anchored gradient scrim. The editorial front-page headline overrides this into a two-column layout below (.is-editorial-home). */ .hero__card { position: relative; border-radius: calc(var(--radius) + 4px); overflow: hidden; color: var(--paper-on-dark); min-height: 420px; display: flex; align-items: flex-end; background: var(--green-800); box-shadow: var(--shadow-lg); border: 1px solid rgba(150,175,205,.28); } .hero__media { position: absolute; inset: 0; z-index: 0; } .hero__media img, .hero__media .placeholder-cover { width: 100%; height: 100%; object-fit: cover; } .hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(24,34,48,.15) 0%, rgba(24,34,48,.55) 55%, rgba(24,34,48,.92) 100%); } .hero__body { position: relative; z-index: 2; padding: clamp(1.4rem, 4vw, 2.6rem); max-width: 760px; } .hero__eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .8rem; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-soft); } .hero__eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--accent); } .hero__title { margin: 0 0 .7rem; font-size: clamp(1.7rem, 4.5vw, 2.75rem); color: #fff; } .hero__title a { color: #fff; } .hero__title a:hover { color: var(--accent-soft); text-decoration: none; } .hero__excerpt { margin: 0 0 1rem; color: var(--paper-on-dark); font-size: 1.02rem; max-width: 60ch; } .hero .entry-meta { color: var(--muted-on-dark); } .hero .entry-meta__sep { color: rgba(255,255,255,.3); } .hero .cat-badge { background: rgba(238,241,245,.14); color: var(--accent-soft); border-color: rgba(150,175,205,.4); } /* ------------------------------------------------------------------------- Front-page headline — restrained two-column editorial layout. Left ~45%: clean, low-saturation deep blue-grey text column. Right ~55%: the article's real featured image / official screenshot, unblurred, no heavy black-blue gradient — only a slight neutral mask. Scoped to .is-editorial-home so the category-page hero above is untouched. ------------------------------------------------------------------------- */ .is-editorial-home .hero__card { min-height: 320px; display: flex; align-items: stretch; background: var(--hero-panel); } .is-editorial-home .hero__body { position: relative; z-index: 2; flex: 0 0 45%; max-width: 45%; padding: clamp(1.4rem, 3.2vw, 2.4rem); display: flex; flex-direction: column; justify-content: center; background: var(--hero-panel); /* fine, half-transparent seam between the text column and the image */ border-right: 1px solid rgba(150,175,205,.16); } .is-editorial-home .hero__media { position: relative; inset: auto; z-index: 0; flex: 1 1 55%; min-width: 0; } .is-editorial-home .hero__media img, .is-editorial-home .hero__media .placeholder-cover { display: block; width: 100%; height: 100%; object-fit: cover; } /* Keep the authentic cover bright; the badge and adjacent text have their own contrast treatment. */ .is-editorial-home .hero__media-mask { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(30,42,58,.04); } .is-editorial-home .hero__title { font-size: clamp(1.5rem, 3.4vw, 2.1rem); } .is-editorial-home .hero__excerpt { font-size: 1rem; max-width: 44ch; } /* ========================================================================= 6. Newsletter + disclosure modules ========================================================================= */ .newsletter { position: relative; overflow: hidden; color: var(--paper-on-dark); border-radius: var(--radius); padding: clamp(1.6rem, 4vw, 2.6rem); background: linear-gradient(135deg, var(--green-800), var(--green-700)); border: 1px solid rgba(150,175,205,.3); } .newsletter::after { content: ""; position: absolute; right: -60px; top: -60px; width: 320px; height: 320px; pointer-events: none; background: radial-gradient(closest-side, rgba(150,175,205,.22), transparent 70%); } .newsletter__inner { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.6rem; align-items: center; } .newsletter__eyebrow { margin: 0 0 .3rem; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-soft); } .newsletter__title { margin: 0 0 .4rem; color: #fff; font-size: clamp(1.2rem, 3vw, 1.6rem); } .newsletter__desc { margin: 0; color: var(--muted-on-dark); font-size: .92rem; } .newsletter__form { display: grid; gap: .6rem; } .newsletter__input { width: 100%; padding: .75rem .9rem; border-radius: 10px; font: inherit; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: #fff; } .newsletter__input::placeholder { color: rgba(233,238,244,.55); } .newsletter__btn { padding: .75rem 1rem; border-radius: 10px; font: inherit; font-weight: 600; cursor: not-allowed; color: var(--green-900); background: linear-gradient(var(--accent-soft), var(--accent)); border: 0; } .newsletter__note { margin: 0; font-size: .76rem; color: var(--muted-on-dark); } .disclosure { border-radius: var(--radius); padding: clamp(1.4rem, 3.5vw, 2.2rem); background: var(--paper-2); border: 1px solid var(--paper-line); } .disclosure__title { margin: 0 0 1.1rem; font-size: clamp(1.1rem, 2.6vw, 1.35rem); } .disclosure__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; } .disclosure__item h3 { margin: 0 0 .35rem; font-size: 1rem; color: var(--green-700); } .disclosure__item p { margin: 0; font-size: .9rem; color: var(--ink-soft); } /* Compact homepage SEO explainer — plain editorial prose card. */ .seo-explainer { border-radius: var(--radius); padding: clamp(1.4rem, 3.5vw, 2.2rem); background: var(--paper-2); border: 1px solid var(--paper-line); } .seo-explainer__title { margin: 0 0 .8rem; font-size: clamp(1.1rem, 2.6vw, 1.35rem); } .seo-explainer p { margin: 0 0 .7rem; font-size: .92rem; color: var(--ink-soft); line-height: 1.75; max-width: 68ch; } .seo-explainer p:last-child { margin-bottom: 0; } .seo-explainer a { color: var(--green-700); text-decoration: underline; } /* ------------------------------------------------------------------------- 6c. Reader-path module ("你现在要解决什么？") — four restrained cards. ------------------------------------------------------------------------- */ .reader-paths__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .reader-path { display: grid; gap: .4rem; align-content: start; padding: 1.1rem 1.15rem; border-radius: var(--radius); background: #fff; border: 1px solid var(--paper-line); box-shadow: var(--shadow); color: var(--ink); position: relative; } .reader-path:hover, .reader-path:focus { text-decoration: none; border-color: var(--accent-soft); box-shadow: var(--shadow-lg); transform: translateY(-1px); } .reader-path__title { font-weight: 700; font-size: 1.02rem; color: var(--ink); padding-right: 1.4rem; } .reader-path__who, .reader-path__first { font-size: .88rem; color: var(--ink-soft); line-height: 1.55; } .reader-path__go { position: absolute; top: 1.05rem; right: 1.1rem; color: var(--accent); font-weight: 700; transition: transform .15s ease; } .reader-path:hover .reader-path__go { transform: translateX(3px); } /* ------------------------------------------------------------------------- 6d. 隐云公开资料核对专题 module — three grouped reading paths. ------------------------------------------------------------------------- */ .yinyun-topic { border-radius: var(--radius); padding: clamp(1.4rem, 3.5vw, 2.2rem); background: var(--paper-2); border: 1px solid var(--paper-line); } .yinyun-topic__eyebrow { margin: 0 0 .3rem; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-strong); } .yinyun-topic__title { margin: 0 0 .5rem; font-size: clamp(1.1rem, 2.6vw, 1.35rem); } .yinyun-topic__desc { margin: 0 0 1.2rem; font-size: .9rem; color: var(--ink-soft); max-width: 60ch; } .yinyun-topic__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; } .yinyun-topic__group-title { margin: 0 0 .5rem; font-size: .95rem; color: var(--green-700); padding-bottom: .35rem; border-bottom: 1px solid var(--paper-line); } .yinyun-topic__list { margin: 0; padding: 0; list-style: none; display: grid; gap: .45rem; } .yinyun-topic__list a { font-size: .9rem; line-height: 1.5; color: var(--ink); } .yinyun-topic__list a:hover { color: var(--accent-strong); } .yinyun-topic__foot { margin: 1.2rem 0 0; font-size: .9rem; } /* ------------------------------------------------------------------------- 6e. Article source-status ("资料状态") provenance panel. ------------------------------------------------------------------------- */ .source-status { margin: 2rem 0 0; border-radius: var(--radius); padding: clamp(1.1rem, 3vw, 1.6rem); background: var(--paper-2); border: 1px solid var(--paper-line); } .source-status__title { margin: 0 0 .9rem; font-size: 1.05rem; color: var(--green-700); display: flex; align-items: center; gap: .5rem; } .source-status__title::before { content: ""; width: .5rem; height: 1.05rem; border-radius: 2px; background: linear-gradient(var(--green-600), var(--accent)); } .source-status__grid { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1.4rem; } .source-status__row { display: grid; grid-template-columns: 6.2rem 1fr; gap: .6rem; align-items: baseline; } .source-status__row dt { margin: 0; font-size: .82rem; color: var(--ink-faint); } .source-status__row dd { margin: 0; font-size: .9rem; color: var(--ink-soft); } .source-status__sources { margin: 1rem 0 0; padding-top: .8rem; border-top: 1px dashed var(--paper-line); } .source-status__sources-title { margin: 0 0 .4rem; font-size: .82rem; color: var(--ink-faint); } .source-status__sources ul { margin: 0; padding-left: 1.1rem; } .source-status__sources li { font-size: .85rem; color: var(--ink-soft); line-height: 1.7; word-break: break-word; } .source-status__score-note { margin: 1rem 0 0; padding-top: .8rem; border-top: 1px dashed var(--paper-line); font-size: .82rem; color: var(--ink-faint); } /* Optional visible breadcrumb trail — matches the BreadcrumbList JSON-LD. No template prints it today; see jichang_editorial_breadcrumb_trail(). */ .breadcrumb-trail { margin: 0 0 1rem; font-size: .82rem; color: var(--ink-faint); display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; } .breadcrumb-trail a { color: var(--ink-soft); text-decoration: none; } .breadcrumb-trail a:hover, .breadcrumb-trail a:focus { color: var(--accent); text-decoration: underline; } .breadcrumb-trail__sep { color: var(--ink-faint); opacity: .6; } /* ========================================================================= 7. Single post ========================================================================= */ .reading-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--green-600), var(--accent)); z-index: 999; transition: width .1s linear; } .single-article { background: #ffffff; border: 1px solid var(--paper-line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .article-header { padding: clamp(1.4rem, 4vw, 2.6rem) clamp(1.2rem, 4vw, 3rem) 0; } .article-header__meta { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: .9rem; } .article-title { margin: 0 0 .7rem; font-size: clamp(1.7rem, 4.2vw, 2.6rem); } .article-dek { margin: 0 0 1rem; font-size: 1.12rem; color: var(--ink-soft); font-family: var(--font-serif); } .article-cover { margin: 1.4rem 0 0; aspect-ratio: 16 / 8; overflow: hidden; background: var(--green-800); } .article-cover img, .article-cover .placeholder-cover { width: 100%; height: 100%; object-fit: cover; } .article-content { padding: clamp(1.4rem, 4vw, 2.4rem) clamp(1.2rem, 4vw, 3rem); max-width: none; } .article-content > * { max-width: var(--maxw-read); margin-inline: auto; } .article-content > .alignwide, .article-content > .alignfull, .article-content > figure, .article-content > .wp-block-image { max-width: min(100%, 900px); } .article-content p { font-size: 1.07rem; } .article-content h2 { font-size: clamp(1.35rem, 2.4vw, 1.62rem); line-height: 1.35; margin: 2.5em auto .82em; padding: 0; border: 0; color: var(--ink); } .article-content h2::before { content: ""; display: block; width: 2.1rem; height: 3px; margin: 0 0 .62rem; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-soft)); } .article-content h3 { font-size: 1.22rem; margin: 1.6em auto .5em; color: var(--green-700); } .article-content h4 { font-size: 1.06rem; margin: 1.4em auto .4em; } .article-content ul, .article-content ol { padding-left: 1.4em; } .article-content li { margin-bottom: .4em; } .article-content blockquote { margin: 1.6em auto; padding: .6em 1.2em; border-left: 4px solid var(--accent); background: var(--paper-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--ink-soft); font-family: var(--font-serif); } .article-content pre { background: var(--green-900); color: var(--paper-on-dark); padding: 1rem 1.1rem; border-radius: var(--radius-sm); overflow-x: auto; font-size: .9rem; line-height: 1.6; } .article-content code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; } .article-content :not(pre) > code { background: var(--paper-2); padding: .1em .4em; border-radius: 4px; } .article-content img { border-radius: var(--radius-sm); } .article-content figcaption { text-align: center; font-size: .85rem; color: var(--ink-faint); margin-top: .5rem; } .article-content a { text-decoration: underline; } /* ---- Tables inside article content ------------------------------------- Covers native/classic (wrapped in .table-scroll by jichang_editorial_wrap_content_tables) and Gutenberg figure.wp-block-table. Desktop: clear header, borders, zebra rows, CJK-comfortable cell padding. Mobile: the wrapper scrolls horizontally (never breaks the viewport) with a visible edge affordance, instead of crushing cells to an unreadable width. */ .article-content .table-scroll, .article-content figure.wp-block-table { display: block; max-width: var(--maxw-read); margin: 1.7em auto; padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; border: 1px solid var(--paper-line); border-radius: var(--radius-sm); background-color: #ffffff; /* Scroll affordance: solid edges that stay pinned, plus inner shadows that appear only while there is more table to scroll toward (background-local). */ background-image: linear-gradient(to right, #ffffff, rgba(255,255,255,0)), linear-gradient(to left, #ffffff, rgba(255,255,255,0)), linear-gradient(to right, rgba(24,34,48,.16), rgba(24,34,48,0)), linear-gradient(to left, rgba(24,34,48,.16), rgba(24,34,48,0)); background-position: left center, right center, left center, right center; background-size: 28px 100%, 28px 100%, 14px 100%, 14px 100%; background-repeat: no-repeat; background-attachment: local, local, scroll, scroll; } .article-content .table-scroll:focus-visible, .article-content figure.wp-block-table:focus-visible { outline: 2px solid var(--green-600); outline-offset: 2px; } .article-content table { width: 100%; /* Force a horizontal scroll on narrow screens rather than compressing cells below a readable width. Fits within --maxw-read on desktop (no scroll). */ min-width: 34rem; margin: 0; border-collapse: collapse; font-size: .96rem; line-height: 1.6; background: transparent; } .article-content .table-scroll > table, .article-content figure.wp-block-table > table { border: 0; } .article-content table caption { caption-side: top; text-align: left; padding: .6em .9em; font-size: .86rem; color: var(--ink-faint); } .article-content table th, .article-content table td { padding: .62em .95em; /* comfortable for CJK reading */ border: 1px solid var(--paper-line); vertical-align: top; text-align: left; } .article-content table thead th, .article-content table th[scope="col"], .article-content table > tr:first-child th { /* Tables are reference material, not a dashboard: keep the heading band light enough to belong to the editorial page instead of reintroducing a large dark-blue block. */ background: #dceef6; color: var(--ink); font-weight: 650; border-color: #b9d6e4; } .article-content table th[scope="row"] { background: var(--paper-2); font-weight: 600; } .article-content table tbody tr:nth-child(even) { background: var(--paper-2); } .article-content table tbody tr:hover { background: #e4eaf1; } /* Table CTAs remain compact, so a purchase column reads as an action rather than turning the data grid into a dark promotional panel. */ .article-content .p4-plan-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 2rem; padding: .28rem .62rem; white-space: nowrap; border: 1px solid #a8cfdf; border-radius: 999px; background: #e6f4f9; color: var(--ink); font-size: .82rem; font-weight: 650; text-decoration: none; } .article-content .p4-plan-cta:hover, .article-content .p4-plan-cta:focus-visible { background: #cfe9f3; border-color: #78b4cc; color: var(--ink); text-decoration: none; } .article-footer { padding: 0 clamp(1.2rem, 4vw, 3rem) clamp(1.4rem, 4vw, 2.2rem); } .tag-list { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.4rem 0; } .tag-list a { font-size: .84rem; color: var(--green-700); background: var(--paper-2); border: 1px solid var(--paper-line); padding: .25rem .7rem; border-radius: 999px; } .tag-list a:hover { background: var(--green-700); color: #fff; text-decoration: none; } .post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.6rem; } .post-nav a { display: block; padding: 1rem 1.1rem; border: 1px solid var(--paper-line); border-radius: var(--radius); background: var(--paper); } .post-nav a:hover { border-color: var(--green-600); text-decoration: none; box-shadow: var(--shadow); } .post-nav__label { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); } .post-nav__title { display: block; margin-top: .25rem; color: var(--ink); font-weight: 600; } .post-nav__next { text-align: right; } .related { margin-top: clamp(2rem, 5vw, 3rem); } /* Related recommendations: a stable 2×2 grid on desktop so four cards never leave an orphan cell; collapses to a single column on mobile. */ .card-grid--related { grid-template-columns: repeat(2, minmax(0, 1fr)); } .author-box { display: flex; gap: 1rem; align-items: flex-start; margin: 1.6rem 0; padding: 1.2rem; background: var(--paper-2); border: 1px solid var(--paper-line); border-radius: var(--radius); } .author-box__avatar { flex: none; } .author-box__avatar img { border-radius: 50%; } .author-box__name { margin: 0 0 .2rem; font-size: 1.05rem; } .author-box__bio { margin: 0; font-size: .9rem; color: var(--ink-soft); } /* ========================================================================= 8. Sidebar / widgets ========================================================================= */ /* Sidebar flows in normal document order by default (no sticky): the blank "分类之后大面积空白" came from a short sticky column pinned beside a much taller article stream. The column now carries real modules, and sticky is re-enabled only on wide desktops (>=1100px) where following the reader genuinely helps — never as a way to hide thin content. Module gap ~22px: compact, not crowded. */ .sidebar { display: flex; flex-direction: column; gap: 1.4rem; } .widget { background: #ffffff; border: 1px solid var(--paper-line); border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: var(--shadow); } .widget__title { margin: 0 0 .9rem; font-size: 1.02rem; display: flex; align-items: center; gap: .5rem; } .widget__title::before { content: ""; width: .45rem; height: 1em; border-radius: 3px; background: linear-gradient(var(--green-600), var(--accent)); } .widget ul { list-style: none; margin: 0; padding: 0; } .widget li { padding: .5rem 0; border-bottom: 1px dashed var(--paper-line); font-size: .94rem; } .widget li:last-child { border-bottom: 0; } .widget a { color: var(--ink); } .widget a:hover { color: var(--green-700); } .popular-list { counter-reset: pop; } .popular-list li { display: flex; gap: .75rem; align-items: flex-start; } .popular-list li::before { counter-increment: pop; content: counter(pop); flex: none; width: 1.7rem; height: 1.7rem; border-radius: 8px; display: grid; place-items: center; font-size: .82rem; font-weight: 700; color: var(--green-900); background: linear-gradient(var(--accent-soft), var(--accent)); } .popular-list .pop-meta { display: block; font-size: .78rem; color: var(--ink-faint); margin-top: .1rem; } /* Homepage 热门文章 (展示数据) — reuses the .popular-list visual language but lives in the wide main column, so items flow in a responsive grid to avoid a thin column with large empty space on desktop. It is deliberately NOT boxed like a sidebar widget: no card background, section spacing only. Single column at 375px with no horizontal overflow. Presentation only; order reflects the stored jichang_views meta. */ .home-popular .popular-list { display: grid; grid-template-columns: 1fr; gap: .85rem 1.8rem; } .home-popular .popular-list li { padding: .15rem 0; border-bottom: 0; } .home-popular .popular-list li > div { min-width: 0; } .home-popular .popular-list a { color: var(--ink); line-height: 1.4; } .home-popular .popular-list a:hover { color: var(--green-700); } @media (min-width: 761px) { .home-popular .popular-list { grid-template-columns: 1fr 1fr; } } /* Search form — compact single-row control. The row never wraps: the field flexes and can shrink to 0 (min-width:0) so it never pushes the button off-screen, while the button holds a fixed minimum width and keeps its "搜索" label on one line. Both share one fixed height and box model so they align exactly. No horizontal overflow on desktop or mobile. */ .search-form { display: flex; flex-wrap: nowrap; align-items: stretch; gap: .5rem; } .search-form input[type="search"], .search-form .search-field { flex: 1 1 auto; min-width: 0; box-sizing: border-box; height: 2.6rem; padding: 0 .85rem; font: inherit; line-height: 1.2; border-radius: 10px; border: 1px solid var(--paper-line); background: var(--paper); color: var(--ink); } .search-form button, .search-form .search-submit { flex: 0 0 auto; min-width: 4.75rem; box-sizing: border-box; height: 2.6rem; padding: 0 1.1rem; border: 0; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font: inherit; line-height: 1; white-space: nowrap; word-break: keep-all; cursor: pointer; color: #fff; background: var(--green-700); } .search-form button:hover, .search-form .search-submit:hover { background: var(--green-600); } /* WordPress core Search block (button-outside variant) used as a sidebar widget. Its markup differs from the theme's searchform.php: form.wp-block-search > label + div.wp-block-search__inside-wrapper > input.wp-block-search__input + button.wp-block-search__button so the .search-form rules above never matched it and the button stacked its label vertically. These rules are scoped to .sidebar and target the block classes directly; they never touch the newsletter module (.newsletter__*). */ .sidebar .wp-block-search { margin: 0; } .sidebar .wp-block-search .wp-block-search__label { display: block; margin: 0 0 .4rem; font-weight: 700; font-size: .95rem; color: var(--ink); } .sidebar .wp-block-search .wp-block-search__inside-wrapper { display: flex; flex-wrap: nowrap; align-items: stretch; gap: .5rem; } .sidebar .wp-block-search .wp-block-search__input { flex: 1 1 auto; min-width: 0; box-sizing: border-box; height: 2.6rem; margin: 0; padding: 0 .85rem; font: inherit; line-height: 1.2; border-radius: 10px; border: 1px solid var(--paper-line); background: var(--paper); color: var(--ink); } .sidebar .wp-block-search .wp-block-search__button { flex: 0 0 auto; min-width: 76px; box-sizing: border-box; height: 2.6rem; margin: 0; padding: 0 1.1rem; border: 0; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font: inherit; line-height: 1; white-space: nowrap; word-break: keep-all; writing-mode: horizontal-tb; cursor: pointer; color: #fff; background: var(--green-700); } .sidebar .wp-block-search .wp-block-search__button:hover { background: var(--green-600); } /* --- Sidebar A modules: 从这里开始 / 近期更新 ------------------------------ Restrained, editorial density — no big CTAs, no conversion-card styling. */ .start-list li { display: block; padding: .55rem 0; } .start-list__title { display: block; font-size: .95rem; font-weight: 600; color: var(--ink); } .start-list__desc { display: block; margin-top: .12rem; font-size: .82rem; color: var(--ink-faint); line-height: 1.5; } .recent-list li { display: block; padding: .6rem 0; } .recent-list__cat { display: inline-block; margin-bottom: .18rem; font-size: .72rem; letter-spacing: .02em; color: var(--accent-strong); } .recent-list__cat:hover { color: var(--accent); } .recent-list__title { display: block; font-size: .92rem; line-height: 1.5; color: var(--ink); } .recent-list__date { display: block; margin-top: .18rem; font-size: .76rem; color: var(--ink-faint); } /* Re-enable sticky only on wide desktops, where the (now content-rich) column can follow the reader without pinning a thin card beside a tall stream. The grid already uses align-items:start, so the cell is content-height here. */ @media (min-width: 1100px) { .sidebar { position: sticky; top: 1.2rem; align-self: start; } } /* ========================================================================= 9. Archive / page header + pagination ========================================================================= */ .page-hero { margin-bottom: clamp(1.6rem, 4vw, 2.6rem); padding: clamp(1.4rem, 4vw, 2.4rem); border-radius: var(--radius); color: var(--paper-on-dark); position: relative; overflow: hidden; background: linear-gradient(135deg, var(--green-800), var(--green-700)); border: 1px solid rgba(150,175,205,.28); } .page-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 2px, transparent 2px 9px); } .page-hero__eyebrow { position: relative; margin: 0 0 .4rem; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-soft); } .page-hero__title { position: relative; margin: 0; font-size: clamp(1.5rem, 4vw, 2.3rem); color: #fff; } .page-hero__desc { position: relative; margin: .7rem 0 0; color: var(--muted-on-dark); max-width: 62ch; } .pagination { margin-top: clamp(1.6rem, 4vw, 2.4rem); } .pagination .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; } .pagination .page-numbers { display: inline-grid; place-items: center; min-width: 2.5rem; height: 2.5rem; padding: 0 .6rem; border: 1px solid var(--paper-line); border-radius: 10px; background: #ffffff; color: var(--ink); } .pagination a.page-numbers:hover { border-color: var(--green-600); text-decoration: none; } .pagination .page-numbers.current { background: var(--green-700); color: #fff; border-color: var(--green-700); } .pagination .page-numbers.prev, .pagination .page-numbers.next { font-weight: 600; } .pagination .page-numbers.dots { border-color: transparent; background: transparent; } .entry-static { background: #ffffff; border: 1px solid var(--paper-line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .entry-static .article-content > * { margin-inline: 0; max-width: none; } /* ---- Moderated reader reviews (real user comments) ------------------------ A distinct "reviews" panel: an accent top rule and a clear heading make it read as reader-submitted, moderated feedback — never the editorial sample. No avatars are used or reserved for; the author line is a masked email. */ .comments-area { margin-top: clamp(1.6rem, 4vw, 2.4rem); background: #ffffff; border: 1px solid var(--paper-line); border-top: 4px solid var(--green-700); border-radius: var(--radius); padding: clamp(1.2rem,3vw,2rem); box-shadow: var(--shadow); } .comments-title { margin: 0 0 1rem; font-size: clamp(1.15rem, 2.8vw, 1.4rem); } .no-comments { margin: .4rem 0 1.2rem; color: var(--ink-soft); font-size: .95rem; } .comment-list, .reader-review-list { list-style: none; margin: 0 0 1.2rem; padding: 0; } .comment-list ul.children { list-style: none; margin: 0 0 0 1.2rem; padding: 0; } /* One review = one semantic card. No avatar column. */ .reader-review { padding: 0; margin: 0; } .reader-review__card { padding: 1rem 0; border-bottom: 1px dashed var(--paper-line); } .reader-review:last-child .reader-review__card { border-bottom: 0; } .reader-review__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .8rem; margin-bottom: .4rem; } .reader-review__author { font-weight: 700; color: var(--ink); font-size: .98rem; overflow-wrap: anywhere; } .reader-review__time { font-size: .8rem; color: var(--ink-faint); } .reader-review__body { color: var(--ink-soft); line-height: 1.7; overflow-wrap: anywhere; } .reader-review__body p { margin: 0 0 .6rem; } .reader-review__body p:last-child { margin-bottom: 0; } /* Reader-review form: private-email note + inputs that never overflow. */ .reader-review__notes, .comment-notes { font-size: .86rem; color: var(--ink-soft); line-height: 1.6; margin: 0 0 1rem; } .comment-form { display: block; } .comment-form p { margin: 0 0 .9rem; } .comment-form label { display: inline-block; margin-bottom: .3rem; font-size: .9rem; font-weight: 600; } .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; max-width: 100%; box-sizing: border-box; padding: .65rem .8rem; font: inherit; border: 1px solid var(--paper-line); border-radius: 10px; background: var(--paper); margin-top: .3rem; } /* Restrained on desktop: the single email field stays a comfortable width rather than stretching across the whole review column. */ .comment-form input[type="email"] { max-width: 24rem; } /* The review textarea is deliberately compact on desktop. WordPress' `rows` attribute otherwise gives it an overly tall initial box, so set an explicit starting height; readers can still expand it within the bounded range. */ .comment-form textarea { width: 100%; height: 8rem; min-height: 6.5rem; max-height: 18rem; max-width: 36rem; resize: vertical; } .comment-form .form-submit input, .comment-form input[type="submit"] { width: auto; padding: .7rem 1.2rem; border: 0; border-radius: 10px; color: #fff; background: var(--green-700); font: inherit; cursor: pointer; } .comment-form .form-submit input:hover, .comment-form input[type="submit"]:hover { background: var(--green-600); } /* Comment pagination — matches the article pagination look. */ .comment-navigation .nav-links, .comments-area .pagination .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; } .comment-navigation .page-numbers { display: inline-grid; place-items: center; min-width: 2.5rem; height: 2.5rem; padding: 0 .6rem; border: 1px solid var(--paper-line); border-radius: 10px; background: var(--paper); color: var(--ink); } .comment-navigation a.page-numbers:hover { border-color: var(--green-600); text-decoration: none; } .comment-navigation .page-numbers.current { background: var(--green-700); color: #fff; border-color: var(--green-700); } .comment-navigation .page-numbers.dots { border-color: transparent; background: transparent; } /* ========================================================================= 10. 404 / empty states ========================================================================= */ .state-panel { text-align: center; padding: clamp(2rem, 6vw, 4rem) clamp(1.2rem, 4vw, 2rem); background: #ffffff; border: 1px solid var(--paper-line); border-radius: var(--radius); box-shadow: var(--shadow); } .state-panel__code { font-size: clamp(3rem, 12vw, 6rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; background: linear-gradient(var(--green-700), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } .state-panel h1 { margin: .4rem 0 .6rem; } .state-panel p { color: var(--ink-soft); max-width: 52ch; margin-inline: auto; } .state-panel .search-form { max-width: 420px; margin: 1.4rem auto 0; } .button { display: inline-block; padding: .7rem 1.2rem; border-radius: 10px; font-weight: 600; color: #fff; background: var(--green-700); } .button:hover { background: var(--green-600); text-decoration: none; color: #fff; } /* ========================================================================= 11. Footer ========================================================================= */ .site-footer { margin-top: clamp(2.5rem, 6vw, 4rem); color: var(--paper-on-dark); background: linear-gradient(180deg, var(--green-800), var(--green-900)); border-top: 1px solid rgba(150,175,205,.25); } .site-footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1.1fr 1.2fr; gap: 2rem; padding-block: clamp(2rem, 5vw, 3rem); } /* Footer brand: a smaller mark+wordmark lockup (not a marketing-scale logo). */ .footer-brand__lockup { display: flex; align-items: center; gap: .6rem; margin: 0 0 .5rem; } .footer-mark { flex: none; width: 30px; height: 30px; border-radius: 9px; background: radial-gradient(120% 120% at 30% 20%, var(--green-600), var(--green-900)); border: 1px solid rgba(150,180,210,.34); display: grid; place-items: center; color: var(--paper-on-dark); } .footer-mark svg { width: 18px; height: 18px; } .footer-brand__title { font-size: 1.2rem; color: #fff; } .footer-brand__desc { margin: 0; color: var(--muted-on-dark); font-size: .9rem; max-width: 40ch; line-height: 1.6; } .footer-col { min-width: 0; } .footer-col h2 { font-size: .95rem; color: var(--accent-soft); margin: 0 0 .8rem; letter-spacing: .04em; } .footer-col ul { list-style: none; margin: 0; padding: 0; } .footer-col li { padding: .3rem 0; } .footer-col a { color: var(--paper-on-dark); font-size: .92rem; overflow-wrap: anywhere; } .footer-col a:hover { color: #fff; } .footer-note__text { margin: 0 0 .7rem; color: var(--muted-on-dark); font-size: .86rem; line-height: 1.65; max-width: 36ch; } .footer-note__more { margin: 0; } .footer-note__more a { color: var(--accent-soft); font-size: .9rem; } .footer-note__more a:hover { color: #fff; } .footer-nav ul { display: flex; flex-wrap: wrap; gap: .3rem 1rem; list-style: none; margin: 0; padding: 0; } .footer-nav a { color: var(--paper-on-dark); font-size: .9rem; } .site-footer__bottom { border-top: 1px solid rgba(255,255,255,.08); padding-block: 1.2rem; display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; justify-content: space-between; color: var(--muted-on-dark); font-size: .84rem; } /* ========================================================================= 12. WP alignment / caption helpers ========================================================================= */ .alignleft { float: left; margin: .3rem 1.4rem 1rem 0; } .alignright { float: right; margin: .3rem 0 1rem 1.4rem; } .aligncenter { margin-inline: auto; } .wp-caption { max-width: 100%; } .wp-caption-text { text-align: center; font-size: .85rem; color: var(--ink-faint); } .sticky, .bypostauthor { display: block; } .post-password-form input[type="password"] { padding: .5rem .7rem; border: 1px solid var(--paper-line); border-radius: 8px; } /* ========================================================================= 13. Responsive — tablet & mobile (<= 980px, <= 760px) ========================================================================= */ @media (max-width: 980px) { .has-sidebar .content-area { grid-template-columns: 1fr; } .sidebar { position: static; } .disclosure__grid { grid-template-columns: 1fr; gap: 1rem; } .newsletter__inner { grid-template-columns: 1fr; } .yinyun-topic__grid { grid-template-columns: 1fr; gap: 1.2rem; } .site-footer__top { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { .site-header__inner { flex-wrap: wrap; } .nav-toggle { display: inline-flex; } .main-navigation { flex-basis: 100%; display: none; margin-top: .6rem; } .main-navigation.is-open { display: block; } .main-navigation .nav-menu, .main-navigation > div > ul { flex-direction: column; align-items: stretch; gap: .1rem; } .main-navigation a { padding: .7rem .6rem; border-radius: 8px; } .main-navigation ul ul { position: static; box-shadow: none; border: 0; padding-left: .8rem; background: transparent; display: flex; } /* Review form goes full width on mobile (no overflow), keeping limited resize. */ .comment-form input[type="email"], .comment-form textarea { max-width: 100%; } /* Category-page hero keeps its overlay look, just shorter on phones. */ .hero__card { min-height: 340px; } /* Front-page headline on mobile: stack image-on-top, deep blue-grey text column below. Title never sits over a busy image; column-reverse keeps DOM order (title first) for assistive tech while showing the picture on top. */ .is-editorial-home .hero__card { min-height: 0; flex-direction: column-reverse; } .is-editorial-home .hero__body { flex: 1 1 auto; max-width: 100%; border-right: 0; } .is-editorial-home .hero__media { flex: 0 0 auto; } .is-editorial-home .hero__media img, .is-editorial-home .hero__media .placeholder-cover { height: auto; aspect-ratio: 16 / 9; } /* Front-page latest grid: single column on mobile (last card spans the one column, i.e. renders as a normal full-width card). */ .is-editorial-home .primary-content .card-grid { grid-template-columns: 1fr; } .reader-paths__grid { grid-template-columns: 1fr; } .source-status__grid { grid-template-columns: 1fr; gap: .3rem; } .post-nav { grid-template-columns: 1fr; } .post-nav__next { text-align: left; } .stream-item { grid-template-columns: 110px 1fr; gap: .8rem; } .site-footer__top { grid-template-columns: 1fr; } .article-content h2::before { content: ""; } .container { width: min(100% - 1.6rem, var(--maxw)); } /* Related cards stack to one column on phones. */ .card-grid--related { grid-template-columns: 1fr; } /* Tables keep a readable minimum width and scroll horizontally instead. */ .article-content table { font-size: .9rem; } .article-content table th, .article-content table td { padding: .55em .7em; } } @media (max-width: 460px) { .stream-item { grid-template-columns: 1fr; } .stream-item__media { max-height: 200px; } } /* ========================================================================= 13b. Category「编辑精选」hero — the large display frame ------------------------------------------------------------------------- Only the assigned category feature hero (.hero__card--editorial-feature) uses this. Every other hero — front page, other category 头条, cards — keeps the shared full-bleed overlay defined in section 5 untouched. The point of this block: the real 隐云 public-page screenshot must stay legible inside the big frame, so the dark full-bleed scrim is dropped entirely in favour of a restrained two-column split — deep blue-grey text panel on the left, the uncropped screenshot mounted unmasked on a near-white backing on the right. Declared after every earlier hero rule so it wins on order without needing !important or inflated selectors. Mobile-first: stacked here, split into two columns from 761px up. ========================================================================= */ .hero__card--editorial-feature { display: flex; flex-direction: column; align-items: stretch; min-height: 0; background: var(--hero-panel); } /* Lift the media out of the absolute full-bleed layer: it becomes a real column that holds the screenshot instead of a background. The near-white mount is deliberate: the 1280×690 screenshot is a light page, so it only reads as itself against a neutral light backing. The left text panel keeps var(--hero-panel) and is untouched. */ .hero__card--editorial-feature .hero__media { position: relative; inset: auto; z-index: 0; display: flex; align-items: center; justify-content: center; width: 100%; padding: clamp(.8rem, 2.4vw, 1.2rem); background: #eef1f5; } /* Uncropped: the screenshot is a page, so contain (never cover) — no cut-off edges, no horizontal overflow. */ .hero__card--editorial-feature .hero__media img, .hero__card--editorial-feature .hero__media .placeholder-cover { display: block; width: 100%; height: auto; max-width: 100%; max-height: none; object-fit: contain; border-radius: var(--radius-sm); box-shadow: 0 6px 18px rgba(12,18,28,.35); } /* Stacked layout needs no mask at all — nothing overlaps the screenshot. */ .hero__card--editorial-feature .hero__scrim { display: none; } .hero__card--editorial-feature .hero__body { position: relative; z-index: 2; width: 100%; max-width: 100%; } /* Desktop: a compact editorial strip, not a display wall. Fixed 300px so the frame reads as a band across the top of the stream; the text column is sized (padding / title / 3-line excerpt / meta) to land well inside that height, so nothing is ever clipped. Nothing is hidden — 眼眉, 标题 and meta all stay. */ @media (min-width: 761px) { .hero__card--editorial-feature { flex-direction: row; align-items: stretch; min-height: 300px; height: 300px; } /* Text panel ~48% on the left (body is last in the DOM, so it is ordered ahead of the media visually while the markup order stays unchanged). */ .hero__card--editorial-feature .hero__body { order: 1; flex: 0 0 48%; max-width: 48%; min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; padding: clamp(1.25rem, 2.2vw, 1.5rem); border-right: 1px solid rgba(150,175,205,.16); } .hero__card--editorial-feature .hero__eyebrow { margin-bottom: .5rem; font-size: .72rem; } .hero__card--editorial-feature .hero__title { margin-bottom: .45rem; font-size: clamp(1.35rem, 2.2vw, 1.55rem); line-height: 1.3; } /* Standard three-line clamp: the summary stays a summary at this height. */ .hero__card--editorial-feature .hero__excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; margin-bottom: .65rem; font-size: .95rem; line-height: 1.55; max-width: 46ch; } .hero__card--editorial-feature .entry-meta { font-size: .82rem; } /* Screenshot ~52% on the right, on a light grey mount (not a white wall). */ .hero__card--editorial-feature .hero__media { order: 2; flex: 0 0 52%; max-width: 52%; min-width: 0; padding: .625rem; background: #eef1f5; } /* Height-led sizing keeps the whole uncropped page visible inside 300px. */ .hero__card--editorial-feature .hero__media img, .hero__card--editorial-feature .hero__media .placeholder-cover { width: auto; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 4px 12px rgba(12,18,28,.22); } /* No mask at all on desktop either: any tint over the media column dulls the screenshot, which is the one thing this frame exists to show. */ .hero__card--editorial-feature .hero__scrim { display: none; } } /* ========================================================================= 14. Light editorial surface pass ------------------------------------------------------------------------- Keep hierarchy through borders, pale mineral panels and blue type—not broad navy slabs. This is deliberately visual-only: markup, article order, media, link destinations and responsive geometry remain unchanged. ========================================================================= */ .site-header { color: var(--ink); background: rgba(255,255,255,.96); border-bottom-color: var(--paper-line); box-shadow: 0 2px 12px rgba(35,54,74,.04); } .site-header::after { opacity: .8; background-image: radial-gradient(620px 190px at 92% -55%, rgba(40,127,168,.10), transparent 64%); mix-blend-mode: normal; } .site-mark, .footer-mark { background: linear-gradient(135deg, #e4f1f7, #c9e0ec); border-color: #a9ccdb; color: var(--green-700); box-shadow: inset 0 1px 0 rgba(255,255,255,.78); } .site-title a, .site-title a:hover { color: var(--ink); } .site-description { color: var(--ink-faint); } .site-description::before { background: var(--accent); } .nav-toggle { color: var(--ink); border-color: var(--paper-line); background: #fff; } .main-navigation a { color: var(--ink); } .main-navigation a:hover, .main-navigation a:focus-visible { background: #edf6fa; color: var(--accent-strong); } .main-navigation .is-current > a, .main-navigation .current-menu-item > a, .main-navigation .current_page_item > a { background: #dceef6; color: var(--accent-strong); } .main-navigation ul ul { background: #fff; border-color: var(--paper-line); } /* All hero variants retain their current image/text split; only the dark text canvas and white-on-dark typography become a pale, readable editorial panel. */ .hero__card, .is-editorial-home .hero__card, .hero__card--editorial-feature { color: var(--ink); background: var(--hero-panel); border-color: #cbdde8; } .hero__scrim { background: linear-gradient(180deg, rgba(234,243,248,.05), rgba(234,243,248,.88)); } .hero__body, .is-editorial-home .hero__body { background: var(--hero-panel); border-color: #cbdde8; } .hero__title, .hero__title a, .hero__title a:hover, .is-editorial-home .hero__title { color: var(--ink); } .hero__title a:hover { color: var(--accent-strong); } .hero__excerpt { color: var(--ink-soft); } .hero .entry-meta { color: var(--ink-faint); } .hero .entry-meta__sep { color: var(--paper-line); } .hero .cat-badge { background: #f8fcfe; color: var(--accent-strong); border-color: #bdd8e6; } .hero__card--editorial-feature .hero__media { background: #f6fafc; } .newsletter, .page-hero { color: var(--ink); background: #eaf4f8; border-color: #cbdde8; } .newsletter::after { background: radial-gradient(closest-side, rgba(40,127,168,.12), transparent 70%); } .newsletter__eyebrow, .page-hero__eyebrow { color: var(--accent-strong); } .newsletter__title, .page-hero__title { color: var(--ink); } .newsletter__desc, .page-hero__desc, .newsletter__note { color: var(--ink-soft); } .newsletter__input { border-color: #b7d2df; background: rgba(255,255,255,.78); color: var(--ink); } .newsletter__input::placeholder { color: var(--ink-faint); } .newsletter__btn { color: #fff; background: var(--green-700); } .site-footer { color: var(--ink-soft); background: #edf4f8; border-top-color: var(--paper-line); } .footer-brand__title, .footer-col a, .footer-nav a { color: var(--ink); } .footer-brand__desc, .footer-note__text, .site-footer__bottom { color: var(--ink-faint); } .footer-col h2, .footer-note__more a { color: var(--accent-strong); } .footer-col a:hover, .footer-note__more a:hover { color: var(--accent-strong); } .site-footer__bottom { border-top-color: var(--paper-line); } /* ------------------------------------------------------------------------- Light controls: buttons, search, pagination and interactive chips all use the same pale-blue surface. Primary actions stay recognizable through a fine blue outline and weight, instead of a dark filled rectangle. ------------------------------------------------------------------------- */ .button, .search-form button, .search-form .search-submit, .sidebar .wp-block-search .wp-block-search__button, .comment-form .form-submit input, .comment-form input[type="submit"], .newsletter__btn { color: var(--accent-strong); background: var(--control-bg); border: 1px solid var(--control-line); box-shadow: inset 0 1px 0 rgba(255,255,255,.72); } .button:hover, .button:focus-visible, .search-form button:hover, .search-form button:focus-visible, .search-form .search-submit:hover, .search-form .search-submit:focus-visible, .sidebar .wp-block-search .wp-block-search__button:hover, .sidebar .wp-block-search .wp-block-search__button:focus-visible, .comment-form .form-submit input:hover, .comment-form .form-submit input:focus-visible, .comment-form input[type="submit"]:hover, .comment-form input[type="submit"]:focus-visible { color: var(--accent-strong); background: var(--control-hover); border-color: var(--accent); } .newsletter__btn { cursor: not-allowed; color: var(--ink-faint); background: #edf3f6; border-color: #cfdee7; } .pagination .page-numbers.current, .comment-navigation .page-numbers.current { color: var(--accent-strong); background: var(--control-bg); border-color: var(--control-line); } .pagination a.page-numbers:hover, .pagination a.page-numbers:focus-visible, .comment-navigation a.page-numbers:hover, .comment-navigation a.page-numbers:focus-visible { background: var(--control-hover); border-color: var(--accent); color: var(--accent-strong); } .cat-badge:hover, .tag-list a:hover { color: var(--accent-strong); background: var(--control-hover); border-color: var(--control-line); } .search-form input[type="search"], .search-form .search-field, .sidebar .wp-block-search .wp-block-search__input, .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea, .post-password-form input[type="password"] { background: #fff; border-color: #c6dbe6; } .search-form input[type="search"]:focus, .search-form .search-field:focus, .sidebar .wp-block-search .wp-block-search__input:focus, .comment-form input[type="text"]:focus, .comment-form input[type="email"]:focus, .comment-form input[type="url"]:focus, .comment-form textarea:focus, .post-password-form input[type="password"]:focus { border-color: var(--accent); outline: 2px solid rgba(40,127,168,.16); outline-offset: 1px; } /* WordPress block widgets can contribute a long intrinsic content width to the grid. Explicitly allow the sidebar and its controls to shrink at tablet and phone widths so the search button cannot escape the visible column. */ .content-area > * { min-width: 0; } @media (max-width: 980px) { .sidebar, .sidebar .widget, .sidebar .wp-block-group, .sidebar .wp-block-group__inner-container, .sidebar .wp-block-search { width: 100%; min-width: 0; max-width: 100%; } } /* Image fallbacks and comparison headers must not reintroduce large navy blocks into an otherwise light editorial page. Actual media remains untouched. */ .card__media, .stream-item__media, .article-cover { background: #dcebf2; } .article-content table th, .article-content table th[scope="col"], .article-content table > tr:first-child th { background: #e4f1f7; color: var(--ink); border-color: #c4dce8; } /* ------------------------------------------------------------------------- Article close: provenance and previous/next navigation should read as a compact editorial footnote, not a second full-width page card. Portrait documentary screenshots stay centered and deliberately narrower. ------------------------------------------------------------------------- */ .source-status { max-width: var(--maxw-read); margin: 2rem auto 0; padding: 1.05rem 0; background: transparent; border: 0; border-top: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); border-radius: 0; } .source-status__title { margin-bottom: .7rem; font-size: .98rem; } .source-status__grid { gap: .45rem 1.1rem; } .source-status__sources, .source-status__score-note { margin-top: .75rem; padding-top: .65rem; } .post-nav { max-width: var(--maxw-read); margin: 1.3rem auto 0; } .post-nav > :only-child { grid-column: 1 / -1; } .post-nav a { background: var(--paper-2); box-shadow: none; } .post-nav a:hover { background: #fff; } body.postid-510 .article-content figure.wp-block-image { max-width: min(100%, 430px); text-align: center; } body.postid-510 .article-content figure.wp-block-image img { display: block; width: 100%; height: auto; margin-inline: auto; } /* ========================================================================= 15. Motion & color-scheme preferences ========================================================================= */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .card:hover { transform: none; } .reading-progress { transition: none; } } @media print { .site-header, .site-footer, .sidebar, .reading-progress, .post-nav, .newsletter, .related, .nav-toggle { display: none !important; } body { background: #fff; color: #000; } .single-article, .card { box-shadow: none; border: 0; } }