/* =================================================================== NightOwl Book CMS — premium blog category archive (is_category() for the four production categories only) Self-contained document; selectors class-qualified on . The post cards themselves are styled by nightowl-posts.css (enqueued as a dependency); this file styles the page frame, hero, empty state and pagination. NightOwl palette: var(--nightowl-black) var(--nightowl-black-soft) var(--nightowl-gold) var(--nightowl-gold-light) var(--nightowl-cream) var(--nightowl-muted) Typography: shared design-system tokens (EB Garamond display / Source Serif 4 body, self-hosted). No external fonts, no JS. =================================================================== */ body.npc-body { margin: 0; background: var(--nightowl-black); color: var(--nightowl-cream); font-family: var(--nightowl-font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .npc, .npc *, .npc *::before, .npc *::after { box-sizing: border-box; } .npc { display: flex; flex-direction: column; min-height: 100vh; } .npc-skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 10px 16px; background: var(--nightowl-black-soft); color: var(--nightowl-gold-light); text-decoration: none; } .npc-skip:focus { left: 12px; top: 12px; outline: 2px solid var(--nightowl-gold-light); } /* --- Main --- */ .npc-main { flex: 1; width: 100%; } /* --- Hero: short, elegant --- */ .npc-hero { max-width: 820px; margin: 0 auto; padding: 56px 24px 34px; text-align: center; } .npc-eyebrow { margin: 0 0 14px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--nightowl-muted); } .npc-title { margin: 0 0 16px; font-family: var(--nightowl-font-display); font-weight: 400; font-size: clamp(30px, 4.6vw, 46px); line-height: 1.14; letter-spacing: 0.6px; background: var(--nightowl-gold-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--nightowl-gold); } .npc-desc { margin: 0 auto 22px; max-width: 620px; font-size: 16px; line-height: 1.7; color: var(--nightowl-cream); } .npc-divider { display: block; width: 88px; height: 1px; margin: 0 auto 22px; background: linear-gradient(90deg, rgba(200, 148, 47, 0) 0%, rgba(200, 148, 47, 0.85) 50%, rgba(200, 148, 47, 0) 100%); } .npc-heroback { display: inline-block; font-family: Arial, Helvetica, sans-serif; font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--nightowl-muted); text-decoration: none; transition: color 0.2s ease; } .npc-heroback:hover, .npc-heroback:focus-visible { color: var(--nightowl-gold-light); } /* --- Listing wrapper --- */ .npc-listing { max-width: 1240px; margin: 0 auto; padding: 24px 24px 72px; } /* --- Empty state --- */ .npc-empty { max-width: 640px; margin: 24px auto 40px; padding: 44px 24px 64px; text-align: center; } .npc-empty-rule { display: block; width: 100px; height: 1px; margin: 0 auto 26px; background: linear-gradient(90deg, rgba(200, 148, 47, 0) 0%, rgba(200, 148, 47, 0.8) 50%, rgba(200, 148, 47, 0) 100%); } .npc-empty h2 { margin: 0 0 14px; font-family: var(--nightowl-font-display); font-weight: 400; font-size: clamp(22px, 3.4vw, 30px); line-height: 1.25; letter-spacing: 0.5px; color: var(--nightowl-gold); } .npc-empty p { margin: 0 auto 28px; max-width: 520px; font-size: 16px; line-height: 1.7; color: var(--nightowl-cream); } .npc-empty .npc-btn { margin: 0 auto; } /* --- Buttons (gold outline) --- */ .npc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 240px; height: 54px; padding: 0 24px; background: transparent; border: 1px solid var(--nightowl-gold); border-radius: 5px; color: var(--nightowl-gold-light); font-family: Arial, Helvetica, sans-serif; font-weight: 500; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; } .npc-btn:hover, .npc-btn:focus-visible { background: var(--nightowl-gold); color: #000; } /* --- Pagination --- */ .npc-pagination { margin: 56px auto 0; display: flex; justify-content: center; } .npc-pagination ul, .npc-pagination ul.page-numbers { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; } .npc-pagination li { margin: 0; padding: 0; list-style: none; } .npc-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 14px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; letter-spacing: 0.5px; text-decoration: none; color: var(--nightowl-gold-light); background: linear-gradient(180deg, #111111, #0a0a0a); border: 1px solid var(--nightowl-gold-border); border-radius: 4px; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .npc-pagination a.page-numbers:hover, .npc-pagination a.page-numbers:focus-visible { background: var(--nightowl-gold); color: #000; border-color: var(--nightowl-gold); } .npc-pagination .page-numbers.current { background: var(--nightowl-gold); color: #000; border-color: var(--nightowl-gold); font-weight: 700; } .npc-pagination .page-numbers.dots { background: transparent; border-color: transparent; color: var(--nightowl-muted); } .npc-pagination .prev.page-numbers, .npc-pagination .next.page-numbers { text-transform: uppercase; letter-spacing: 1px; } /* --- Focus --- */ .npc a:focus-visible { outline: 2px solid var(--nightowl-gold-light); outline-offset: 3px; border-radius: 2px; } /* --- Responsive --- */ @media (max-width: 1024px) { .npc-hero { padding: 44px 20px 28px; } .npc-listing { padding: 20px 20px 56px; } } @media (max-width: 640px) { .npc-hero { padding: 36px 16px 24px; } .npc-listing { padding: 16px 16px 48px; } .npc-pagination .page-numbers { min-width: 38px; height: 38px; padding: 0 11px; } } /* --- Motion --- */ @media (prefers-reduced-motion: reduce) { .npc-nav a, .npc-cta, .npc-heroback, .npc-btn, .npc-footer-nav a, .npc-pagination .page-numbers { transition: none; } }