.nrn-tax-archive { --nrn-accent: var(--nrn-term-accent, #ff4757); --nrn-accent-2: #ff9f43; --nrn-star: #ffb400; --nrn-line: rgba(128, 128, 128, .22); --nrn-soft: rgba(128, 128, 128, .10); --nrn-radius: 14px; max-width: 1200px; margin: 0 auto; padding: clamp(18px, 3vw, 40px) clamp(12px, 2.5vw, 24px) 72px; } .nrn-tax-hero { position: relative; margin: 0 0 30px; padding-bottom: 22px; border-bottom: 1px solid var(--nrn-line); } .nrn-tax-hero::after { content: ""; position: absolute; top: 0; right: 0; width: min(38vw, 340px); height: 100%; background-image: radial-gradient(rgba(128, 128, 128, .4) 1.2px, transparent 1.3px); background-size: 14px 14px; -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, .55), transparent); mask-image: linear-gradient(to left, rgba(0, 0, 0, .55), transparent); pointer-events: none; } .nrn-tax-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--nrn-accent); } .nrn-tax-title { margin: 6px 0 0; font-size: clamp(26px, 4.2vw, 42px); line-height: 1.12; font-weight: 800; } .nrn-tax-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; } .nrn-tax-count { display: inline-flex; align-items: center; padding: 5px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--nrn-accent), var(--nrn-accent-2)); } .nrn-tax-desc { margin: 12px 0 0; max-width: 760px; line-height: 1.6; opacity: .78; } .nrn-tax-desc p { margin: 0 0 .5em; } .nrn-manga-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: clamp(14px, 2vw, 24px); } @media (min-width: 1025px) { .nrn-manga-grid { grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); } } .nrn-manga-card { position: relative; display: flex; flex-direction: column; margin: 0; border: 1px solid var(--nrn-line); border-radius: var(--nrn-radius); background: var(--nrn-soft); overflow: hidden; transition:transform .28s ease; } .nrn-manga-card:hover, .nrn-manga-card:focus-within { transform: translateY(-6px); border-color: rgba(128, 128, 128, .42); } .nrn-card-cover { position: relative; display: block; aspect-ratio: 193/278; overflow: hidden; background: linear-gradient(150deg, rgba(128, 128, 128, .20), rgba(128, 128, 128, .06)); } @supports not (aspect-ratio: 1/1) { .nrn-card-cover { height: 0; padding-top: 144%; } } .nrn-card-img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition:transform .5s cubic-bezier(.2, .65, .25, 1); } .nrn-manga-card:hover .nrn-card-img, .nrn-manga-card:focus-within .nrn-card-img { transform: scale(1.06); } .nrn-card-noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: .35; } .nrn-card-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, rgba(8, 8, 12, .72) 100%); opacity: 0; transition:opacity .3s ease; pointer-events: none; } .nrn-card-cta { position: absolute; left: 50%; bottom: 14px; display: inline-flex; align-items: center; padding: 7px 16px; border-radius: 999px; background: linear-gradient(135deg, var(--nrn-accent), var(--nrn-accent-2)); color: #fff; font-size: 12px; font-weight: 800; white-space: nowrap; opacity: 0; transform: translate(-50%, 12px); transition:opacity .3s ease,transform .3s ease; pointer-events: none; } .nrn-manga-card:hover .nrn-card-overlay, .nrn-manga-card:focus-within .nrn-card-overlay { opacity: 1; } .nrn-manga-card:hover .nrn-card-cta, .nrn-manga-card:focus-within .nrn-card-cta { opacity: 1; transform: translate(-50%, 0); } .nrn-card-body { display: flex; flex-direction: column; flex: 1; gap: 8px; padding: 12px 12px 14px; } .nrn-card-title { margin: 0; font-size: 15px; line-height: 1.35; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; } .nrn-card-title a { color: inherit; text-decoration: none; } .nrn-card-title a:hover { color: var(--nrn-accent); } .nrn-card-rating { display: flex; align-items: center; gap: 7px; } .nrn-stars { position: relative; display: inline-block; font-size: 13px; line-height: 1; letter-spacing: 2px; } .nrn-stars-base { opacity: .28; } .nrn-stars-fill { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; color: var(--nrn-star); } .nrn-rating-num { font-size: 12px; font-weight: 700; opacity: .85; } .nrn-card-chapters { display: flex; flex-direction: column; gap: 6px; } .nrn-chapter-link { display: flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid var(--nrn-line); border-radius: 9px; background: rgba(128, 128, 128, .06); font-size: 12px; font-weight: 600; color: inherit; text-decoration: none; } .nrn-chapter-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nrn-chapter-link:hover { border-color: var(--nrn-accent); color: var(--nrn-accent); background: rgba(255, 71, 87, .08); } .nrn-chapter-link .nrn-ico { color: var(--nrn-accent); } .nrn-card-meta { display: flex; align-items: center; justify-content: space-between; margin-top: auto; font-size: 12px; opacity: .8; } .nrn-views { display: inline-flex; align-items: center; gap: 5px; } .nrn-ico { display: inline-block; flex: none; vertical-align: -2px; } .nrn-tax-archive .navigation.pagination { margin: 40px 0 0; } .nrn-tax-archive .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .nrn-tax-archive .nav-links .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; border: 1px solid var(--nrn-line); border-radius: 11px; font-size: 14px; font-weight: 700; color: inherit; text-decoration: none; transition:transform .2s ease; } .nrn-tax-archive .nav-links .page-numbers:hover { border-color: var(--nrn-accent); color: var(--nrn-accent); transform: translateY(-2px); } .nrn-tax-archive .nav-links .page-numbers.current { background: linear-gradient(135deg, var(--nrn-accent), var(--nrn-accent-2)); border-color: transparent; color: #fff; } .nrn-tax-archive .nav-links .page-numbers.dots { border-color: transparent; } .nrn-tax-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 70px 20px; text-align: center; opacity: .75; } .nrn-tax-archive .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); border: 0; } .nrn-tax-archive a:focus-visible { outline: 2px solid var(--nrn-accent); outline-offset: 2px; } @media (max-width: 480px) { .nrn-manga-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .nrn-card-body { padding: 10px 10px 12px; } .nrn-card-title { font-size: 13.5px; } } @media (prefers-reduced-motion: reduce) { .nrn-tax-archive *, .nrn-tax-archive *::before, .nrn-tax-archive *::after { animation: none !important; } .nrn-manga-card:hover, .nrn-manga-card:focus-within { transform: none; } .nrn-manga-card:hover .nrn-card-img, .nrn-manga-card:focus-within .nrn-card-img { transform: none; } } .nrn-tax-archive { --nrn-cover-aspect-ratio: 193 / 278; --nrn-cover-padding: 144%; --nrn-cover-fit: cover; --nrn-cover-position: center; --nrn-card-intrinsic-size: 440px; --nrn-badge-new-bg: #9f1239; --nrn-badge-updated-bg: #166534; --nrn-badge-text: #fff; --nrn-action-bg: #a51231; --nrn-action-text: #fff; --nrn-control-border: #767676; } .nrn-tax-archive, .nrn-tax-archive * { box-sizing: border-box; } .nrn-tax-archive [hidden] { display: none !important; } .nrn-tax-archive .nrn-tax-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: var(--nrn-hero-image, none); background-position: center; background-size: cover; opacity: .16; pointer-events: none; } .nrn-tax-archive .nrn-tax-hero > * { position: relative; z-index: 1; } .nrn-tax-archive .nrn-tax-hero--has-logo { display: flex; flex-direction: column; gap: clamp(15px, 2.4vw, 24px); } .nrn-tax-archive .nrn-tax-logo { order: -1; width: min(100%, 280px); margin: 0; } .nrn-tax-archive .nrn-tax-hero--logo-left .nrn-tax-logo { align-self: flex-start; } .nrn-tax-archive .nrn-tax-hero--logo-center .nrn-tax-logo { align-self: center; } .nrn-tax-archive .nrn-tax-hero--logo-right .nrn-tax-logo { align-self: flex-end; } .nrn-tax-archive .nrn-tax-logo__image { display: block; width: 100%; max-width: 100%; height: auto; max-height: clamp(82px, 15vw, 160px); object-fit: contain; } @media (min-width: 960px) { .nrn-tax-archive .nrn-tax-hero { position: relative; padding: clamp(14px, 1vw, 34px); } .nrn-tax-archive .nrn-tax-title { font-size: clamp(26px, 3.3vw, 50px); } .nrn-tax-archive .nrn-tax-logo__image { width: 70%; max-width: 80%; height: auto; } .nrn-tax-archive .nrn-tax-hero--has-logo { display: grid; align-items: center; } .nrn-tax-archive .nrn-tax-hero--logo-center { grid-template-columns: minmax(0, 1fr) minmax(190px, .82fr) minmax(0, 1fr); } .nrn-tax-archive .nrn-tax-hero--logo-center .nrn-tax-hero__content { grid-column: 1; } .nrn-tax-archive .nrn-tax-hero--logo-center .nrn-tax-logo { grid-column: 2; justify-self: center; } .nrn-tax-archive .nrn-tax-hero--logo-left { grid-template-columns: minmax(160px, .62fr) minmax(0, 2.38fr); } .nrn-tax-archive .nrn-tax-hero--logo-left .nrn-tax-logo { grid-column: 1; grid-row: 1; justify-self: start; } .nrn-tax-archive .nrn-tax-hero--logo-left .nrn-tax-hero__content { grid-column: 2; } .nrn-tax-archive .nrn-tax-hero--logo-right { grid-template-columns: minmax(0, 2.38fr) minmax(160px, .62fr); } .nrn-tax-archive .nrn-tax-hero--logo-right .nrn-tax-hero__content { grid-column: 1; } .nrn-tax-archive .nrn-tax-hero--logo-right .nrn-tax-logo { grid-column: 2; grid-row: 1; justify-self: end; } .nrn-tax-archive .nrn-tax-hero--logo-center .nrn-tax-logo__image { margin-inline: auto; } .nrn-tax-archive .nrn-tax-hero--logo-right .nrn-tax-logo__image { margin-inline-start: auto; } .nrn-tax-archive .nrn-tax-logo { order: 0; width: min(100%, 300px); } } .nrn-archive-toolbar, .nrn-archive-tools { display: grid; gap: 14px; margin: 0 0 clamp(20px, 3vw, 32px); padding: clamp(14px, 2.2vw, 20px); border: 1px solid var(--nrn-line, rgba(128, 128, 128, .28)); border-radius: var(--nrn-radius, 10px); background: var(--nrn-surface, var(--nrn-soft, rgba(128, 128, 128, .09))); color: var(--nrn-text, inherit); } .nrn-archive-toolbar__fields, .nrn-archive-tools__controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px; align-items: end; } .nrn-archive-toolbar__field, .nrn-tool-field { display: grid; gap: 6px; min-width: 0; } .nrn-archive-toolbar__field > label, .nrn-archive-toolbar__legend, .nrn-tool-field > span, .nrn-tool-field > label[for] { margin: 0; color: var(--nrn-text, currentColor); font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; } .nrn-archive-toolbar select, .nrn-archive-toolbar input[type="search"], .nrn-archive-toolbar input[type="text"], .nrn-archive-tools select, .nrn-archive-tools input[type="search"], .nrn-archive-tools input[type="text"] { box-sizing: border-box; width: 100%; min-height: 44px; margin: 0; padding-block: 8px; padding-inline: 11px 36px; border: 1px solid var(--nrn-control-border); border-radius: max(4px, calc(var(--nrn-radius, 10px) * .65)); background-color: var(--nrn-surface-elevated, var(--nrn-soft, rgba(128, 128, 128, .12))); color: var(--nrn-text, inherit); font: inherit; line-height: 1.25; } .nrn-archive-toolbar select[multiple], .nrn-archive-tools select[multiple] { min-height: 116px; padding-inline: 9px; background-image: none; } .nrn-filter-option-search { margin-block-end: 2px !important; } .nrn-archive-toolbar input[type="search"], .nrn-archive-toolbar input[type="text"], .nrn-archive-tools input[type="search"], .nrn-archive-tools input[type="text"] { padding-inline: 11px; } .nrn-archive-toolbar__actions, .nrn-archive-tools__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .nrn-archive-toolbar__submit, .nrn-filter-submit, .nrn-load-more { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; margin: 0; padding: 10px 18px; border: 1px solid transparent; border-radius: max(4px, calc(var(--nrn-radius, 10px) * .65)); background: var(--nrn-action-bg); color: var(--nrn-action-text); cursor: pointer; font: inherit; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; transition:transform .18s ease; } .nrn-archive-toolbar__submit:hover, .nrn-filter-submit:hover, .nrn-load-more:not([aria-disabled="true"]):hover { color: var(--nrn-action-text); } .nrn-archive-toolbar__reset, .nrn-filter-reset { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 4px; color: var(--nrn-text, inherit); font-weight: 650; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .nrn-archive-toolbar__summary { margin: 0; color: var(--nrn-text, currentColor); font-size: 13px; line-height: 1.5; } .nrn-archive-toolbar__active, .nrn-active-filters { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; } .nrn-active-filters { margin: calc(clamp(20px, 3vw, 32px) * -.55) 0 clamp(20px, 3vw, 32px); } .nrn-filter-chip { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 10px; border: 1px solid var(--nrn-line, rgba(128, 128, 128, .3)); border-radius: 999px; background: var(--nrn-soft, rgba(128, 128, 128, .1)); color: var(--nrn-text, inherit); font-size: 12px; font-weight: 650; line-height: 1.2; } a.nrn-filter-chip, button.nrn-filter-chip { cursor: pointer; text-decoration: none; } a.nrn-filter-chip:hover, button.nrn-filter-chip:hover { border-color: var(--nrn-accent, currentColor); color: var(--nrn-accent, currentColor); } .nrn-filter-chip__remove { margin-inline-start: 5px; font-size: 1.15em; line-height: .8; } .nrn-filter-chip > [aria-hidden="true"] { margin-inline-start: 5px; font-size: 1.15em; line-height: .8; } .nrn-card-badges { position: absolute; z-index: 4; inset-block-start: 9px; inset-inline-start: 9px; display: flex; flex-wrap: wrap; gap: 5px; max-width: calc(100% - 18px); pointer-events: none; } .nrn-freshness-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 4px 8px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; background: var(--nrn-badge-new-bg); color: var(--nrn-badge-text); font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: .035em; text-transform: uppercase; } .nrn-freshness-badge--updated { background: var(--nrn-badge-updated-bg); } .nrn-freshness-badge time { color: inherit; font: inherit; } .nrn-card-taxonomies, .nrn-card-context, .nrn-card-taxonomy-badges { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; } .nrn-manga-badge, .nrn-card-taxonomy-badge, .nrn-status-badge, .nrn-type-badge, .nrn-language-badge { display: inline-flex; align-items: center; max-width: 100%; min-height: 22px; padding: 3px 7px; border: 1px solid var(--nrn-line, rgba(128, 128, 128, .3)); border-radius: 999px; background: var(--nrn-soft, rgba(128, 128, 128, .12)); color: var(--nrn-text, inherit); font-size: 10px; font-weight: 750; line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } a.nrn-card-taxonomy-badge, a.nrn-card-taxonomy-badge:visited { color: var(--nrn-text, inherit); text-decoration: none; } a.nrn-card-taxonomy-badge:is(:hover, :focus-visible) { border-color: var(--nrn-accent, currentColor); color: var(--nrn-text, inherit); text-decoration: underline; text-underline-offset: 2px; } .nrn-chapter-age, .nrn-latest-chapter-age { flex: none; margin-inline-start: auto; color: var(--nrn-muted, currentColor); font-size: .92em; white-space: nowrap; } .nrn-load-more-wrap, .nrn-pagination-shell--load-more { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: clamp(26px, 4vw, 42px) 0 0; text-align: center; } .nrn-pagination-shell--load-more .navigation.pagination { margin: 0; } .nrn-load-more { min-width: min(100%, 190px); } .nrn-load-more:focus-visible, .nrn-archive-toolbar :is(select, input, button, a):focus-visible, .nrn-archive-tools :is(select, input, button, a):focus-visible { outline: 3px solid var(--nrn-accent, #b4233a); outline-offset: 3px; } .nrn-load-more[aria-disabled="true"] { cursor: default; opacity: .76; } .nrn-load-more-wrap[data-state="loading"] .nrn-load-more, .nrn-pagination-shell--load-more[data-state="loading"] .nrn-load-more { cursor: wait; } .nrn-load-more-wrap[data-state="complete"] .nrn-load-more, .nrn-pagination-shell--load-more[data-state="complete"] .nrn-load-more { border-color: var(--nrn-line, rgba(128, 128, 128, .3)); background: var(--nrn-soft, rgba(128, 128, 128, .13)); color: var(--nrn-text, inherit); opacity: 1; } .nrn-load-more__spinner { display: none; width: 16px; height: 16px; box-sizing: border-box; border: 2px solid rgba(255, 255, 255, .48); border-top-color: currentColor; border-radius: 50%; animation: nrn-load-more-spin .7s linear infinite; } .nrn-load-more-wrap[data-state="loading"] .nrn-load-more__spinner, .nrn-pagination-shell--load-more[data-state="loading"] .nrn-load-more__spinner { display: inline-block; } .nrn-load-more__status, .nrn-load-more-status { margin: 0; color: var(--nrn-muted, currentColor); font-size: 13px; line-height: 1.45; } .nrn-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; } @keyframes nrn-load-more-spin { to { transform: rotate(360deg); } } .nrn-tax-archive .nrn-card-cover { aspect-ratio: var(--nrn-cover-ratio, var(--nrn-cover-aspect-ratio)); } .nrn-tax-archive .nrn-card-img { object-fit: var(--nrn-cover-fit); object-position: var(--nrn-cover-position); } .nrn-tax-archive .nrn-manga-card[data-nrn-card-role] .nrn-card-img { object-position: var(--nrn-focal-x, 50%) var(--nrn-focal-y, 50%); } @supports not (aspect-ratio: 1 / 1) { .nrn-tax-archive .nrn-card-cover { height: 0; padding-top: var(--nrn-cover-padding); } } @supports (content-visibility: auto) { .nrn-tax-archive[data-nrn-content-visibility="1"] .nrn-manga-card, .nrn-tax-archive.nrn-optimize-offscreen .nrn-manga-card { content-visibility: auto; contain-intrinsic-size: auto var(--nrn-card-intrinsic-size); } } @media (max-width: 600px) { .nrn-archive-toolbar select[multiple], .nrn-archive-tools select[multiple] { min-height: 132px; } .nrn-archive-toolbar__actions > *, .nrn-archive-tools__actions > * { flex: 1 1 140px; } .nrn-archive-toolbar__submit, .nrn-filter-submit, .nrn-load-more { width: 100%; } } @media (prefers-reduced-motion: reduce) { .nrn-archive-toolbar__submit, .nrn-filter-submit, .nrn-load-more { } .nrn-load-more__spinner { animation: none; } } @media (forced-colors: active) { .nrn-tax-archive .nrn-tax-hero::before { display: none; } .nrn-freshness-badge, .nrn-archive-toolbar__submit, .nrn-filter-submit, .nrn-load-more { border-color: ButtonText; } } .nrn-tax-archive,.nrn-tax-archive *,.nrn-tax-archive *::before,.nrn-tax-archive *::after{ box-shadow:none!important;text-shadow:none!important;filter:none!important;backdrop-filter:none!important;will-change:auto!important; } .nrn-tax-archive a:focus-visible,.nrn-tax-archive button:focus-visible,.nrn-tax-archive input:focus-visible,.nrn-tax-archive select:focus-visible{outline:2px solid var(--nrn-accent,currentColor);outline-offset:3px} .nrn-tax-archive.nrn-style-webmanga{--nrn-action-bg:#ffc400;--nrn-action-text:#111} .nrn-style-webmanga .nrn-card-taxonomy-badge{background:#22233e;border-color:#3d4074;color:#e0e7ff}