/* * notes.css — Research Notes layout (/notes, /notes/, and the * homepage preview block) (SPEC.md §24.2/§24.6.3/§24.7, ADR-007). * * Loaded by 01-head.html (for 08-research-notes.html's homepage preview * grid — .research-notes__* / .card--note / .note-card__*) AND by * notes-index.html / notes-article.html's own (for everything * else in this file). Uses only tokens.css custom properties plus * components.css primitives (.card, .badge, .badge--track, .btn, .eyebrow, * .section, .section-title) — no new colors/fonts/tokens are introduced * (SPEC.md §24.1 ADR-006: the current production visual system does not * change for this pivot). */ /* ---------------------------------------------------------------------- */ /* Shared note-card grid (homepage preview + /notes index) */ /* ---------------------------------------------------------------------- */ .research-notes__intro { margin-top: 20px; color: var(--text-on-light-muted); } .research-notes__grid, .notes-index__grid { display: grid; grid-template-columns: 1fr; gap: var(--grid-gap); margin-top: 48px; } @media (min-width: 768px) { .research-notes__grid, .notes-index__grid { grid-template-columns: repeat(3, 1fr); } } .card--note { display: flex; flex-direction: column; gap: 12px; } .note-card__title { margin-top: 8px; } .note-card__title a { color: inherit; } .note-card__title a:hover, .note-card__title a:focus-visible { color: var(--accent); } .note-card__text { color: var(--text-on-light-muted); flex: 1; } .note-card__meta { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--fs-small); color: var(--text-on-light-muted); } .note-card__link { font-weight: var(--fw-body-medium); color: var(--accent); } .note-card__link:hover, .note-card__link:focus-visible { color: var(--accent-hover); } .research-notes__cta { margin-top: 40px; } /* ---------------------------------------------------------------------- */ /* /notes index — category filter chips (pure CSS/JS, no server/search) */ /* ---------------------------------------------------------------------- */ .notes-filter { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; } .notes-filter__chip { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border-light); background: transparent; color: var(--text-on-light-muted); font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; cursor: pointer; transition: border-color var(--transition-duration) var(--transition-easing), color var(--transition-duration) var(--transition-easing), background-color var(--transition-duration) var(--transition-easing); } .notes-filter__chip:hover { border-color: var(--accent); color: var(--text-on-light); } .notes-filter__chip.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } .notes-index__empty { margin-top: 40px; color: var(--text-on-light-muted); } .notes-index__back { margin-top: 56px; } /* ---------------------------------------------------------------------- */ /* /notes/ — article page */ /* ---------------------------------------------------------------------- */ .note-article__summary { margin-top: 16px; color: var(--text-on-light-muted); } .note-article__byline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 24px; font-family: var(--font-mono); font-size: var(--fs-small); color: var(--text-on-light-muted); } .note-article__share { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; } .note-article__share-link { font-size: var(--fs-small); font-weight: var(--fw-body-medium); color: var(--accent); } .note-article__share-link:hover, .note-article__share-link:focus-visible { color: var(--accent-hover); } .note-article__share-status { font-size: var(--fs-small); color: var(--text-on-light-muted); } .note-article__body { margin-top: 48px; } .note-article__body h2, .note-article__sources h2, .note-article__method h2 { margin-top: 40px; margin-bottom: 4px; } .note-article__body p, .note-article__method p { color: var(--text-on-light-muted); } .note-article__body ul, .note-article__sources ul { margin-top: 12px; padding-left: 20px; list-style: disc; color: var(--text-on-light-muted); } .note-article__body li, .note-article__sources li { margin-top: 8px; } .note-article__sources, .note-article__method { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border-light); } .note-article__sources a { color: var(--accent); } .note-article__sources a:hover, .note-article__sources a:focus-visible { color: var(--accent-hover); } .note-article__updated { margin-top: 24px; font-size: var(--fs-small); color: var(--text-on-light-muted); } .note-article__cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 48px; } .note-article__pagination { display: flex; flex-direction: column; gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--border-light); } @media (min-width: 768px) { .note-article__pagination { flex-direction: row; justify-content: space-between; } } .note-article__pagination-link { font-weight: var(--fw-body-medium); color: var(--accent); } .note-article__pagination-link:hover, .note-article__pagination-link:focus-visible { color: var(--accent-hover); } .note-article__pagination-link--next { text-align: right; }