/* =================================================================== NightOwl Book CMS — premium "Alle Bücher" archive (/bucharchiv/) Shell only. The book cards are styled by nightowl-books-catalog.css (enqueued as a dependency); this file styles the page frame, header, gold divider, pagination and footer. NightOwl palette: var(--nightowl-black) var(--nightowl-black-soft) var(--nightowl-gold) var(--nightowl-gold-light) var(--nightowl-cream) var(--nightowl-muted) Self-contained document -> selectors are class-qualified on so they win over the theme's bare-element rules without !important. =================================================================== */ body.nba-body { margin: 0; background: var(--nightowl-black); color: var(--nightowl-cream); font-family: var(--nightowl-font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .nba, .nba *, .nba *::before, .nba *::after { box-sizing: border-box; } .nba { display: flex; flex-direction: column; min-height: 100vh; } /* --- Skip link --- */ .nba-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; } .nba-skip:focus { left: 12px; top: 12px; outline: 2px solid var(--nightowl-gold-light); } /* --- Main --- */ .nba-main { flex: 1; width: 100%; max-width: 1360px; margin: 0 auto; padding: 64px 48px 80px; } /* --- Archive header --- */ .nba-head { text-align: center; max-width: 760px; margin: 0 auto 56px; } .nba-kicker { 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); } .nba-title { margin: 0 0 20px; font-family: var(--nightowl-font-display); font-weight: 400; font-size: clamp(34px, 6vw, 56px); line-height: 1.08; letter-spacing: 1px; background: var(--nightowl-gold-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--nightowl-gold); } .nba-intro { margin: 0 auto; max-width: 640px; font-size: 16px; line-height: 1.7; color: var(--nightowl-cream); } .nba-divider { display: block; width: 96px; height: 1px; margin: 32px auto 0; background: linear-gradient(90deg, rgba(200, 148, 47, 0) 0%, rgba(200, 148, 47, 0.8) 50%, rgba(200, 148, 47, 0) 100%); } /* --- Empty state --- */ .nba-empty { text-align: center; font-size: 16px; color: var(--nightowl-muted); padding: 48px 0; } /* --- Pagination --- */ .nba-pagination { margin: 56px auto 0; display: flex; justify-content: center; } .nba-pagination ul, .nba-pagination ul.page-numbers { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; } .nba-pagination li { margin: 0; padding: 0; list-style: none; } .nba-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; } .nba-pagination a.page-numbers:hover, .nba-pagination a.page-numbers:focus-visible { background: var(--nightowl-gold); color: #000; border-color: var(--nightowl-gold); } .nba-pagination .page-numbers.current { background: var(--nightowl-gold); color: #000; border-color: var(--nightowl-gold); font-weight: 700; } .nba-pagination .page-numbers.dots { background: transparent; border-color: transparent; color: var(--nightowl-muted); } .nba-pagination .prev.page-numbers, .nba-pagination .next.page-numbers { text-transform: uppercase; letter-spacing: 1px; } .nba-pagination a:focus-visible { outline: 2px solid var(--nightowl-gold-light); outline-offset: 3px; } /* --- Responsive --- */ @media (max-width: 1024px) { .nba-main { padding: 48px 24px 64px; } } @media (max-width: 640px) { .nba-main { padding: 36px 16px 52px; } .nba-head { margin-bottom: 40px; } .nba-pagination .page-numbers { min-width: 38px; height: 38px; padding: 0 11px; } } /* --- Motion --- */ @media (prefers-reduced-motion: reduce) { .nba-topbar-back, .nba-topbar-back:hover, .nba-pagination .page-numbers, .nba-footer-nav a { transition: none; } }