/* Relevance — theme-agnostic base. Every color/font/spacing token comes from the CSS variables each theme defines (assets/themes/*.css). No external requests: system fonts only — except the-type, which lazily loads Google Fonts only when it's the active theme (assets/js/app.js `ensureTheTypeFonts`); papermod/blowfish never trigger that request. */ html { color-scheme: light; } html[data-scheme="dark"] { color-scheme: dark; } /* full-bleed masthead escapes #app's column via 100vw; clip (not hidden — clip creates no scroll container, so position:sticky keeps working) kills the phantom horizontal scrollbar that 100vw draws when a vertical bar is present. */ html { overflow-x: clip; } * { box-sizing: border-box; } :root { /* fallbacks in case a theme file fails to load */ --bg: #ffffff; --bg-elev: #f6f6f4; --fg: #191919; --fg-muted: #6d6d68; --accent: #b3372c; --accent-fg: #ffffff; --rule: #e4e2dc; --rule-strong: #c9c6be; --link: inherit; --mast-rgb: 255, 255, 255; --highlight-bg: #fff2a8; --overlay: rgba(0, 0, 0, 0.45); --shadow-pop: rgba(0, 0, 0, 0.3); --shadow-soft: rgba(0, 0, 0, 0.08); --font-serif: georgia, "Times New Roman", serif; --font-sans: -apple-system, "Segoe UI", "Helvetica Neue", arial, sans-serif; --font-mono: ui-monospace, "SF Mono", menlo, consolas, monospace; --font-cjk-serif: "Noto Serif SC", "Songti SC", simsun, serif; --font-cjk-sans: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif; --font-body: var(--font-serif); --font-heading: var(--font-serif); --font-meta: var(--font-sans); --size-base: 17px; --leading: 1.6; --leading-cjk: 1.9; --measure: 44rem; --radius: 4px; --shadow: none; --space: 1rem; --page-max: 72rem; } /* base dark fallback — only matters if a theme file fails to load; themes each define their own designed dark palette that overrides this */ :root[data-scheme="dark"] { --bg: #161616; --bg-elev: #202020; --fg: #e4e4e0; --fg-muted: #9a9a94; --accent: #d96b5f; --accent-fg: #161616; --rule: #2c2c2c; --rule-strong: #444444; --link: inherit; --mast-rgb: 22, 22, 22; --highlight-bg: #4d431c; --overlay: rgba(0, 0, 0, 0.6); --shadow-pop: rgba(0, 0, 0, 0.5); --shadow-soft: rgba(0, 0, 0, 0.3); } html { font-size: var(--size-base); } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); line-height: var(--leading); -webkit-font-smoothing: antialiased; } html[data-lang="zh"] body { line-height: var(--leading-cjk); } [lang="zh-CN"] { line-break: loose; } a { color: var(--link); text-decoration-color: var(--rule-strong); } a:hover { color: var(--accent); } button { font: inherit; font-family: var(--font-meta); cursor: pointer; border: 1px solid var(--rule-strong); background: var(--bg-elev); color: var(--fg); border-radius: var(--radius); padding: 0.35em 0.9em; } button:hover { border-color: var(--accent); color: var(--accent); } button.secondary { background: transparent; } button.linklike { border: none; background: none; padding: 0; color: var(--fg-muted); text-decoration: underline; } button.linklike.danger:hover { color: var(--accent); } input, select, textarea { font: inherit; font-family: var(--font-meta); color: var(--fg); background: var(--bg); border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: 0.35em 0.6em; } input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .muted { color: var(--fg-muted); } .small { font-size: 0.82rem; } /* ---- layout ---- */ #app { max-width: var(--page-max); margin: 0 auto; padding: 0 clamp(0.8rem, 3vw, 2rem); min-height: 100vh; display: flex; flex-direction: column; } /* Shared sticky, full-bleed masthead with a scroll-ramped blurred backdrop. The ::before opacity rides --nd-scroll (published on by app.js), so the blur fades in only as content slides beneath. All three themes inherit this; each still sets its own border-bottom + --mast-rgb. */ #masthead { position: sticky; top: 0; z-index: 40; /* below .anno-toolbar (50) and modal (60) */ /* full-bleed: escape #app's centered column to span the viewport, then pad content back into alignment with the column */ margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); padding-top: calc(var(--space) * 1.5); } #masthead::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(var(--mast-rgb), 0.25); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); box-shadow: 0 25px 50px -12px var(--shadow-pop); opacity: var(--nd-scroll, 0); pointer-events: none; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { #masthead::before { background: rgba(var(--mast-rgb), 0.94); } } .masthead-inner { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space); flex-wrap: wrap; } #site-title { margin: 0; font-family: var(--font-heading); font-size: clamp(1.5rem, 4vw, 2.2rem); letter-spacing: -0.01em; } #site-title a { text-decoration: none; color: var(--fg); } #site-subtitle { margin: 0.1rem 0 0; color: var(--fg-muted); font-family: var(--font-meta); font-size: 0.85rem; } .masthead-meta { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-meta); font-size: 0.8rem; color: var(--fg-muted); } .chrome-btn { padding: 0.2em 0.55em; font-size: 0.8rem; } #nav { display: flex; gap: 1.1rem; overflow-x: auto; scrollbar-width: none; padding: 0.5rem 0; font-family: var(--font-meta); font-size: 0.9rem; border-top: 1px solid var(--rule); margin-top: 0.6rem; } #nav::-webkit-scrollbar { display: none; } #nav a { text-decoration: none; color: var(--fg-muted); white-space: nowrap; padding: 0.1rem 0; border-bottom: 2px solid transparent; } #nav a.active { color: var(--fg); border-bottom-color: var(--accent); } #view { flex: 1; padding: calc(var(--space) * 1.5) 0 3rem; outline: none; } #footer { border-top: 1px solid var(--rule); padding: 0.8rem 0 1.4rem; font-family: var(--font-meta); font-size: 0.8rem; color: var(--fg-muted); } /* ---- filter bar ---- */ .filter-bar { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-bottom: var(--space); font-family: var(--font-meta); font-size: 0.9rem; } .filter-search { flex: 1 1 12rem; } .filter-count { color: var(--fg-muted); font-size: 0.82rem; margin-left: auto; } /* ---- items ---- */ .item-list { max-width: var(--measure); } .item { padding: calc(var(--space) * 0.9) 0; border-bottom: 1px solid var(--rule); } .item-meta { display: flex; gap: 0.7rem; align-items: baseline; font-family: var(--font-meta); font-size: 0.76rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; } .item-source { font-weight: 600; color: var(--accent); } .item-score { margin-left: auto; font-variant-numeric: tabular-nums; } .item-title { margin: 0.25rem 0 0.3rem; font-family: var(--font-heading); font-size: 1.12rem; line-height: 1.35; } .item-title a { text-decoration: none; color: var(--fg); } .item-title a:hover { color: var(--accent); } .item-byline { margin: 0 0 0.3rem; font-family: var(--font-meta); font-size: 0.82rem; color: var(--fg-muted); } .item-summary { margin: 0; font-size: 0.95rem; } .item-tags { margin-top: 0.4rem; display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: baseline; } .tag { font-family: var(--font-meta); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid var(--rule-strong); border-radius: 2em; padding: 0.05em 0.7em; color: var(--fg-muted); } .also-in { font-family: var(--font-meta); font-size: 0.76rem; color: var(--fg-muted); } .original-link { font-family: var(--font-meta); font-size: 0.76rem; color: var(--fg-muted); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; } .original-link:hover { color: var(--accent); } mark.nd-highlight { background: var(--highlight-bg); color: inherit; padding: 0 0.05em; } mark.nd-highlight.has-note { border-bottom: 2px dotted var(--accent); cursor: help; } /* ---- full-text reader ---- */ .reader-article { max-width: var(--measure); margin: 0 auto; } .reader-back { display: inline-block; margin-bottom: 1rem; font-family: var(--font-meta); font-size: 0.82rem; color: var(--fg-muted); text-decoration: none; } .reader-back:hover { color: var(--accent); } .reader-title { margin: 0.35rem 0 0.6rem; font-family: var(--font-heading); font-size: 2.2rem; line-height: 1.12; letter-spacing: 0; } .reader-summary { margin: 0 0 0.8rem; color: var(--fg-muted); font-size: 1.02rem; } .reader-actions { margin: 0 0 calc(var(--space) * 1.4); font-family: var(--font-meta); } .reader-body { font-size: 1.05rem; line-height: 1.78; } .reader-body p { margin: 0 0 1.05em; } /* ---- today ---- */ .today-masthead { margin-bottom: calc(var(--space) * 1.2); } .today-greeting { margin: 0; font-family: var(--font-heading); font-size: 1.7rem; } .today-date { margin: 0.1rem 0 0; color: var(--fg-muted); font-family: var(--font-meta); font-size: 0.9rem; } .ai-brief-block { margin: 0.8rem 0 calc(var(--space) * 1.2); max-width: var(--measure); } .ai-brief-label { margin: 0 0 0.2rem; font-family: var(--font-meta); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-muted); } .ai-brief-text { margin: 0; font-family: var(--font-heading); font-size: 1.1rem; line-height: 1.5; } .ai-summary-line { margin: 0 0 0.6rem; color: var(--fg-muted); font-style: italic; } /* Brief row: Today's Image (left) + AI summary (right), like the-type's hero. Rendered on papermod/blowfish only when BOTH image and brief exist. */ .brief-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: calc(var(--space) * 1.6); align-items: start; margin: 0.8rem 0 calc(var(--space) * 1.2); } .brief-row .ai-brief-block { margin: 0; max-width: none; } .brief-row .todays-image img { width: 100%; max-height: 16rem; object-fit: cover; border-radius: var(--radius); } .today-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); gap: calc(var(--space) * 1.6); align-items: start; } .today-block { border-top: 3px solid var(--fg); padding-top: 0.5rem; } .block-header { display: flex; align-items: baseline; justify-content: space-between; } .block-header h2 { margin: 0 0 0.5rem; font-family: var(--font-heading); font-size: 1.05rem; } .block-more { font-family: var(--font-meta); font-size: 0.8rem; text-decoration: none; color: var(--fg-muted); } .story-grid .item:first-child { padding-top: 0; } /* ---- Threads · 线索 ---- */ .threads-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: var(--space); margin-top: 0.4rem; } .thread-card { padding: 0.9rem 1rem 1rem; border: 1px solid var(--rule-strong); border-top: 3px solid var(--fg); border-radius: var(--radius); background: var(--bg-elev); } .thread-keyword { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.35rem; font-family: var(--font-heading); font-size: 1.15rem; line-height: 1.25; } .thread-card-private .thread-keyword::before { content: "🔒 "; font-size: 0.85em; } .thread-glyph { display: inline-flex; flex: 0 0 auto; color: var(--fg-muted); } .thread-glyph svg { display: block; } /* Event timeline: evenly-spaced dots on a single rule, dates under each, and one caption line below carrying the selected point's label. The wrapper scrolls horizontally so 6 points never squeeze the dates into each other on a phone. */ .thread-timeline { margin: 0 0 0.6rem; overflow-x: auto; } .thread-timeline-track { display: flex; position: relative; margin: 0; padding: 0.15rem 0 0; list-style: none; } /* the rule the dots sit on, drawn behind them at dot height */ .thread-timeline-track::before { content: ""; position: absolute; left: 0; right: 0; top: 0.5rem; border-top: 1px solid var(--rule-strong); } .thread-timeline-point { flex: 1 0 3.2rem; text-align: center; } .thread-timeline-btn { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; width: 100%; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; } .thread-timeline-dot { width: 0.5rem; height: 0.5rem; border: 1px solid var(--rule-strong); border-radius: 50%; background: var(--bg-elev); } .thread-timeline-point.is-now .thread-timeline-dot { border-color: var(--accent); background: var(--accent); } .thread-timeline-point.is-selected .thread-timeline-dot { border-color: var(--accent); } .thread-timeline-btn:hover .thread-timeline-dot, .thread-timeline-btn:focus-visible .thread-timeline-dot { border-color: var(--accent); } .thread-timeline-btn:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; } .thread-timeline-date { font-family: var(--font-meta); font-size: 0.68rem; line-height: 1.2; white-space: nowrap; color: var(--fg-muted); } .thread-timeline-point.is-selected .thread-timeline-date { color: var(--accent); } /* mirrors .thread-whynow's metrics so the two meta lines read as one voice */ .thread-timeline-caption { margin: 0.4rem 0 0; font-family: var(--font-meta); font-size: 0.78rem; line-height: 1.45; color: var(--fg-muted); /* holds one line's worth of space so switching points can't jog the card */ min-height: 1.45em; } .thread-timeline-caption a { color: var(--accent); text-decoration: none; } .thread-timeline-caption a:hover { text-decoration: underline; } .thread-gloss { margin: 0 0 0.5rem; font-size: 0.95rem; line-height: 1.5; } .thread-whynow { margin: 0 0 0.55rem; font-family: var(--font-meta); font-size: 0.78rem; line-height: 1.45; color: var(--fg-muted); } .thread-whynow-label { font-style: italic; } .thread-angles { margin: 0; padding: 0; list-style: none; font-family: var(--font-meta); font-size: 0.82rem; border-top: 1px solid var(--rule); } .thread-angle { padding: 0.35rem 0; border-bottom: 1px solid var(--rule); line-height: 1.4; } .thread-angle a { color: inherit; text-decoration: none; display: block; } .thread-angle a:hover { color: var(--accent); } .thread-angle-source { font-weight: 600; color: var(--accent); } .thread-angle-phrase { color: var(--fg); } .thread-touches { margin-top: 0.55rem; font-family: var(--font-meta); font-size: 0.74rem; color: var(--fg-muted); } .thread-touches-label { text-transform: lowercase; } .thread-touch { cursor: pointer; text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 2px; } .thread-touch:hover, .thread-touch:focus-visible { color: var(--accent); outline: none; } .todays-image { margin: 0; } .todays-image img { display: block; width: 100%; max-height: 20rem; object-fit: cover; border-radius: var(--radius); } .todays-image figcaption { margin-top: 0.5rem; } .todays-image-caption { margin: 0 0 0.3rem; font-size: 0.95rem; } .todays-image-source { margin: 0; font-family: var(--font-meta); font-size: 0.78rem; } .todays-image-source a { color: inherit; } .apropos-card { position: relative; margin: calc(var(--space) * 2) 0 0; padding: clamp(1rem, 3vw, 1.4rem); border: 1px solid var(--rule-strong); border-radius: 8px; background: var(--bg-elev); overflow: hidden; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .apropos-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--accent); } .apropos-card:hover, .apropos-card:focus-within { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 10px 30px var(--shadow-soft); } .apropos-kicker { margin: 0 0 0.55rem; font-family: var(--font-meta); font-size: 0.68rem; letter-spacing: 0; text-transform: uppercase; color: var(--accent); } .apropos-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.52fr); gap: clamp(1rem, 3vw, 2rem); align-items: end; } .apropos-title { margin: 0; font-family: var(--font-heading); font-size: 1.75rem; line-height: 1.12; letter-spacing: 0; } .apropos-topic { margin: 0.4rem 0 0; font-family: var(--font-meta); font-size: 0.78rem; color: var(--fg-muted); } .apropos-summary { margin: 0.85rem 0 0; max-width: 54rem; font-size: 1rem; line-height: 1.55; } .apropos-why { margin: 0.45rem 0 0; font-family: var(--font-meta); font-size: 0.82rem; color: var(--fg-muted); } .apropos-source { display: flex; flex-direction: column; gap: 0.16rem; min-width: 0; padding-left: 1rem; border-left: 1px solid var(--rule-strong); font-family: var(--font-meta); text-decoration: none; color: var(--fg); } .apropos-source:hover .apropos-source-title { color: var(--accent); } .apropos-source-label { font-size: 0.68rem; letter-spacing: 0; text-transform: uppercase; color: var(--fg-muted); } .apropos-source-title { font-size: 0.95rem; font-weight: 650; line-height: 1.35; } .apropos-source-meta { font-size: 0.76rem; color: var(--fg-muted); } /* ---- clippings ---- */ .clippings-list { max-width: var(--measure); } .clipping { border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.8rem 1rem; margin-bottom: 0.8rem; background: var(--bg-elev); } .clipping-meta { display: flex; gap: 0.6rem; align-items: baseline; margin-bottom: 0.3rem; font-size: 0.8rem; } .clipping-source { margin: 0 0 0.3rem; font-family: var(--font-meta); font-size: 0.85rem; } .clipping blockquote { margin: 0.4rem 0; padding: 0.1rem 0 0.1rem 0.8rem; border-left: 3px solid var(--highlight-bg); } .clipping-note { margin: 0.4rem 0 0; } .clipping-actions { margin-top: 0.5rem; display: flex; gap: 1rem; font-size: 0.82rem; } .note-editor { margin-top: 0.6rem; } .note-input { width: 100%; } /* ---- sources table ---- */ .sources-table { border-collapse: collapse; width: 100%; max-width: var(--measure); font-family: var(--font-meta); font-size: 0.88rem; } .sources-table th, .sources-table td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--rule); } .sources-table th { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-muted); } .sources-table td.num, .sources-table th.num { text-align: right; font-variant-numeric: tabular-nums; } .sources-table tr.status-failed td { color: var(--accent); } .sources-table tr.status-skipped td, .sources-table tr.status-disabled td { color: var(--fg-muted); } /* ---- add a source ---- */ .add-source { margin-top: calc(var(--space) * 1.6); max-width: var(--measure); display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; } .add-source .seg { margin: 0; } .add-source-input { width: 100%; max-width: 28rem; } .add-source-label { font-family: var(--font-meta); font-size: 0.82rem; color: var(--fg-muted); } .add-source .warn { color: var(--accent); font-size: 0.85rem; max-width: var(--measure); } .prompt-box { width: 100%; min-height: 7.5rem; font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.5; resize: vertical; } /* ---- settings ---- */ .settings-group { margin-bottom: calc(var(--space) * 1.6); max-width: var(--measure); } .settings-group h3 { font-family: var(--font-meta); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-muted); margin: 0 0 0.5rem; } .theme-picker { display: flex; gap: 0.6rem; flex-wrap: wrap; } .theme-chip.active { border-color: var(--accent); color: var(--accent); font-weight: 600; } /* ---- state cards, onboarding, gate ---- */ .state-card { border: 1px dashed var(--rule-strong); border-radius: var(--radius); padding: 1rem 1.2rem; margin: 0.6rem 0; max-width: var(--measure); font-family: var(--font-meta); font-size: 0.92rem; } .onboarding, .private-gate { max-width: 38rem; margin: 8vh auto 0; } .onboarding h2, .private-gate h2 { font-family: var(--font-heading); } .onboarding li { margin-bottom: 0.5rem; } .private-gate { text-align: center; } /* ---- modals & toolbar ---- */ .modal-backdrop { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: center; justify-content: center; z-index: 60; } .modal { background: var(--bg); color: var(--fg); border-radius: var(--radius); box-shadow: 0 8px 40px var(--shadow-pop); padding: 1.2rem 1.4rem; width: min(26rem, 92vw); } .modal h3 { margin-top: 0; font-family: var(--font-heading); } .modal blockquote { border-left: 3px solid var(--highlight-bg); margin: 0.5rem 0; padding-left: 0.7rem; color: var(--fg-muted); } .modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 0.8rem; } .pass-input { width: 100%; font-size: 1.05rem; } .remember-row { display: block; margin-top: 0.6rem; font-family: var(--font-meta); font-size: 0.9rem; } .login-error { color: var(--accent); font-family: var(--font-meta); font-size: 0.9rem; } .login-modal .unlock-btn { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); } .shake { animation: nd-shake 0.35s; } @keyframes nd-shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } } /* ---- first-deploy tutorial ---- */ .tutorial-modal { width: min(34rem, 94vw); } .tut-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .tut-heading { margin: 0; font-family: var(--font-heading); font-size: 1.15rem; } .tut-skip { background: none; border: none; color: var(--fg-muted); font: inherit; font-size: 0.85rem; cursor: pointer; padding: 0.2rem 0.3rem; } .tut-skip:hover { color: var(--fg); text-decoration: underline; } .tut-body { margin: 0.9rem 0 0.3rem; min-height: 8.5rem; } .tut-title { margin: 0 0 0.5rem; font-family: var(--font-heading); font-size: 1.05rem; } .tut-text { margin: 0 0 0.7rem; line-height: 1.55; } .tut-note { font-size: 0.85rem; margin: 0.5rem 0 0; line-height: 1.5; } .tut-action { display: inline-block; margin-top: 0.2rem; padding: 0.45rem 0.9rem; border-radius: var(--radius); background: var(--accent); color: var(--accent-fg); border: 1px solid var(--accent); text-decoration: none; font-family: var(--font-meta); font-size: 0.9rem; } .tut-action:hover { opacity: 0.9; } .tut-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; gap: 1rem; } .tut-foot .modal-actions { margin-top: 0; } .tut-dots { display: flex; gap: 0.4rem; } .tut-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--rule-strong); opacity: 0.4; } .tut-dot.active { opacity: 1; background: var(--accent); } .anno-toolbar { position: absolute; z-index: 50; display: flex; gap: 0.25rem; background: var(--fg); border-radius: var(--radius); padding: 0.25rem; box-shadow: 0 3px 14px var(--shadow-pop); } .anno-toolbar button { background: transparent; border: none; color: var(--bg); font-size: 0.82rem; padding: 0.25em 0.6em; } .anno-toolbar button:hover { color: var(--highlight-bg); } /* ---- overview strip (Today) ---- */ .overview-strip { display: flex; gap: calc(var(--space) * 1.4); flex-wrap: wrap; margin: 0 0 calc(var(--space) * 1.4); padding: 0.7rem 0; border-top: 3px solid var(--fg); border-bottom: 1px solid var(--rule); } .stat-tile { display: flex; flex-direction: column; min-width: 5rem; } a.stat-tile { text-decoration: none; color: var(--fg); } a.stat-tile:hover .stat-num { color: var(--accent); } .stat-num { font-family: var(--font-heading); font-size: 1.3rem; line-height: 1.25; font-variant-numeric: tabular-nums; } .stat-label { font-family: var(--font-meta); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-muted); } /* ---- hero (Today, the-type layout only — inert structure for other themes since they never create elements with these classes) ---- */ .hero-date-row { display: flex; justify-content: space-between; } .hero-greeting { display: flex; align-items: center; } .hero-side { display: flex; flex-direction: column; align-items: flex-end; } .hero-grid { display: grid; position: relative; } .hero-image { position: relative; overflow: hidden; } .hero-image img { width: 100%; } .hero-right { display: flex; flex-direction: column; } .stats-pills { display: flex; flex-wrap: wrap; } /* ---- feed controls, chips, grouping ---- */ .feed-controls { display: flex; gap: 0.9rem; flex-wrap: wrap; align-items: center; margin: -0.3rem 0 0.6rem; font-family: var(--font-meta); } .seg { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: var(--radius); overflow: hidden; } .seg button { border: none; border-radius: 0; background: var(--bg); font-size: 0.78rem; padding: 0.25em 0.75em; } .seg button + button { border-left: 1px solid var(--rule); } .seg button.active { background: var(--fg); color: var(--bg); } .seg button.active:hover { color: var(--bg); } .tabs { display: flex; gap: 1.1rem; border-bottom: 1px solid var(--rule); margin: 0.4rem 0 1.1rem; } .tabs a { padding: 0.3rem 0.05rem; color: var(--fg-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; } .tabs a.active { color: var(--fg); border-bottom-color: var(--accent); } .tag-row { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: var(--space); } .tag-chip { font-family: var(--font-meta); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid var(--rule-strong); border-radius: 2em; padding: 0.12em 0.75em; background: var(--bg); color: var(--fg-muted); } .tag-chip.active { background: var(--fg); color: var(--bg); border-color: var(--fg); } .tag-chip.active:hover { color: var(--bg); border-color: var(--fg); } .tag-chip .n { opacity: 0.65; margin-left: 0.3em; font-variant-numeric: tabular-nums; } .feed-day-label, .feed-group-label { margin: 1.2rem 0 0; font-family: var(--font-meta); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-muted); border-bottom: 2px solid var(--fg); padding-bottom: 0.2rem; } .feed-group-label .n { font-weight: 400; } /* ---- favorites star, badges ---- */ .fav-star { border: none; background: transparent; padding: 0 0.15em; font-size: 1rem; line-height: 1; color: var(--fg-muted); cursor: pointer; } .fav-star:hover { color: var(--accent); border: none; } .fav-star.active { color: var(--accent); } .new-badge { font-family: var(--font-meta); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.07em; color: var(--accent-fg); background: var(--accent); border-radius: 2px; padding: 0.1em 0.45em; } .full-text-badge { font-family: var(--font-meta); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.07em; color: var(--accent); border: 1px solid var(--accent); border-radius: 2px; padding: 0.08em 0.45em; white-space: nowrap; } .cite-badge { font-variant-numeric: tabular-nums; } /* ---- responsiveness, motion, print ---- */ @media (max-width: 48rem) { .brief-row { grid-template-columns: 1fr; } } @media (max-width: 40rem) { .masthead-inner { flex-direction: column; gap: 0.3rem; } .masthead-meta { width: 100%; } .reader-title { font-size: 1.75rem; } .apropos-title { font-size: 1.45rem; } .apropos-body { grid-template-columns: 1fr; } .apropos-source { padding-left: 0; padding-top: 0.75rem; border-left: none; border-top: 1px solid var(--rule-strong); } } /* scheme cross-fade: only the manual/auto light↔dark toggle gets motion — theme switches still snap instantly. Transient class, timer-removed. */ @media (prefers-reduced-motion: no-preference) { html.scheme-fade *, html.scheme-fade *::before, html.scheme-fade *::after { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, fill 0.3s ease, stroke 0.3s ease, box-shadow 0.3s ease !important; } } /* ---- animations ---- */ /* Staggered fade-in applied to top-level view containers (all themes). The global prefers-reduced-motion kill below neutralizes these. */ @keyframes nd-fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .nd-fadein { animation: nd-fadeIn 0.6s ease-out both; } .nd-fadein-d1 { animation-delay: 0.2s; } .nd-fadein-d2 { animation-delay: 0.3s; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } @media print { #nav, .masthead-meta, #footer, .filter-bar, .block-more, .chrome-btn, .state-card button, .clipping-actions, .feed-controls, .tag-row, .fav-star, .new-badge, .thread-touches, .thread-glyph, .thread-timeline { display: none !important; } .thread-card { break-inside: avoid; } #masthead { position: static; margin-inline: 0; padding-inline: 0; } #masthead::before { display: none; } body { background: #fff; color: #000; } .today-grid { grid-template-columns: 1fr 1fr; gap: 1rem; } .item { break-inside: avoid; } /* Keep printing paper-correct even when the page was viewed in dark scheme. !important is required: the per-theme dark blocks (html[data-scheme="dark"][data-theme="…"]) out-specify this selector, and the-type's ink-derived rgba() colors ride --ink-rgb. */ :root[data-scheme="dark"] { --bg: #fff !important; --bg-elev: #f5f5f5 !important; --bg-card: #fff !important; --fg: #000 !important; --fg-muted: #444 !important; --ink-rgb: 0, 0, 0 !important; --rule: #ddd !important; --rule-strong: #bbb !important; --highlight-bg: #fff2a8 !important; } }