/* ===================================================================== Category archive (/category/{slug}). Consumes the --lp-* tokens from tokens.css (dark default, light via ) — same system as the league and athlete pages. Cards mirror the league template's .lp-news-card look. ===================================================================== */ /* Page frame behind the shell — body-class specificity beats the theme's plain `body` background rules. */ body.category, body.blog { background: var(--lp-page-bg); } .nn-shell { background: var(--lp-page-bg); font-family: var(--lp-font); } .nn-main { max-width: 1440px; margin: 0 auto; /* padding: 28px 80px 80px; */ padding:24px; } @media (max-width: 900px) { .nn-main { padding: 20px 20px 56px; } } /* ---------- Header ---------- */ .nn-head { margin-bottom: 28px; } .nn-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lp-accent); } .nn-title { font-size: 32px; font-weight: 700; line-height: 1; color: var(--lp-ink); margin: 8px 0 0; display: inline-flex; align-items: center; gap: 12px; } .nn-count { font-size: 12px; font-weight: 600; color: var(--lp-ink-muted); background: var(--lp-surface); border: 1px solid var(--lp-border); border-radius: var(--lp-r-pill); padding: 4px 12px; } .nn-desc { color: var(--lp-ink-soft); max-width: 720px; margin: 12px 0 0; } /* ---------- Two columns: cards + category sidebar ---------- */ .nn-cols { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--lp-s-6); align-items: start; } @media (max-width: 900px) { .nn-cols { grid-template-columns: 1fr; } } /* ---------- Card grid (mirrors .lp-news-card) ---------- */ .nn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lp-s-5); } @media (max-width: 1100px) { .nn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .nn-grid { grid-template-columns: 1fr; } } .nn-card { background: var(--lp-surface); border: 1px solid var(--lp-border-soft); border-radius: var(--lp-r-md); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; box-shadow: var(--lp-shadow-soft); transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease; } .nn-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0, 20, 45, 0.25); border-color: var(--lp-accent); } .nn-card__thumb { display: block; aspect-ratio: 3 / 2; background: var(--lp-surface-2) center/cover no-repeat; } .nn-card__body { padding: var(--lp-s-4); display: flex; flex-direction: column; gap: var(--lp-s-2); flex: 1; } .nn-card__tag { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lp-accent); } .nn-card__title { font-size: 1.05rem; font-weight: 600; color: var(--lp-ink); line-height: 1.35; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .nn-card__meta { font-size: 0.78rem; color: var(--lp-ink-muted); margin-top: auto; } .nn-empty { color: var(--lp-ink-soft); } /* ---------- Show more ---------- */ .nn-more { display: flex; justify-content: center; margin-top: var(--lp-s-6); } .nn-more__btn { font-size: 14px; font-weight: 600; color: var(--lp-ink); background: var(--lp-surface); border: 1px solid var(--lp-border); border-radius: var(--lp-r-pill); padding: 12px 32px; text-decoration: none; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; } .nn-more__btn:hover { border-color: var(--lp-accent); color: var(--lp-accent); } .nn-more__btn.is-loading { opacity: 0.6; pointer-events: none; } /* ---------- Sidebar ---------- */ /* Sticky below the 64px .nx-nav header bar; scrolls internally when the expanded category list is taller than the viewport. */ .nn-col--side { position: sticky; top: 88px; max-height: calc(100vh - 112px); overflow-y: auto; } @media (max-width: 900px) { .nn-col--side { position: static; max-height: none; overflow-y: visible; } } .nn-side-title { font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lp-ink-soft); margin: 0 0 var(--lp-s-3); } .nn-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .nn-cats__link { display: flex; align-items: center; justify-content: space-between; gap: var(--lp-s-3); padding: 10px 14px; background: var(--lp-surface); border: 1px solid var(--lp-border-soft); border-radius: var(--lp-r-md); color: var(--lp-ink); font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: border-color 120ms ease, color 120ms ease; } .nn-cats__link:hover { border-color: var(--lp-accent); color: var(--lp-accent); } .nn-cats__link.is-active { background: var(--lp-accent); border-color: var(--lp-accent); color: var(--lp-accent-ink); } .nn-cats__count { font-size: 0.75rem; font-weight: 600; color: var(--lp-ink-muted); } .nn-cats__link.is-active .nn-cats__count { color: var(--lp-accent-ink); } /* Categories beyond the top-15 cap hide until "All categories" is toggled. */ .nn-cats__extra { display: none; } .nn-cats.is-open .nn-cats__extra { display: block; } .nn-cats__toggle { width: 100%; margin-top: var(--lp-s-3); font-family: inherit; font-size: 0.85rem; font-weight: 600; color: var(--lp-ink-soft); background: transparent; border: 1px dashed var(--lp-border); border-radius: var(--lp-r-md); padding: 10px 14px; cursor: pointer; transition: border-color 120ms ease, color 120ms ease; } .nn-cats__toggle:hover { border-color: var(--lp-accent); color: var(--lp-accent); }