archive.css

harun.bspt2014@gmail.com

I’ll give you a production-ready archive.css foundation for RX Theme archive/category/tag/search pages, with responsive layout, cards, filters, pagination, empty states, accessibility, dark mode, print styles, and performance-friendly CSS variables.

Dear friend, paste this into:

assets/static/static-css/pages/archive.css

This is an advanced archive page CSS file for RX Theme: category, tag, author, date archive, search result, blog listing, medical A-Z archive, grid/list cards, filters, pagination, sidebar, loading skeleton, empty result, dark mode, print, accessibility, and responsive design.

/*!
 * RX Theme Archive Page CSS
 * File: assets/static/static-css/pages/archive.css
 * Purpose: Category, Tag, Search, Author, Date Archive, Blog Listing, Medical A-Z Archive
 * Author: RX Theme
 * Version: 1.0.0
 */

/* =========================================================
   01. Archive Page Design Tokens
   ========================================================= */

:root {
  --rx-archive-bg: var(--rx-color-bg, #f7f9fc);
  --rx-archive-surface: var(--rx-color-surface, #ffffff);
  --rx-archive-surface-soft: var(--rx-color-surface-soft, #f1f5f9);
  --rx-archive-text: var(--rx-color-text, #102033);
  --rx-archive-text-muted: var(--rx-color-muted, #5f6f82);
  --rx-archive-heading: var(--rx-color-heading, #071426);
  --rx-archive-primary: var(--rx-color-primary, #0b74de);
  --rx-archive-primary-dark: var(--rx-color-primary-dark, #0759ad);
  --rx-archive-primary-soft: color-mix(in srgb, var(--rx-archive-primary) 12%, #ffffff);
  --rx-archive-success: var(--rx-color-success, #0f9f6e);
  --rx-archive-warning: var(--rx-color-warning, #d97706);
  --rx-archive-danger: var(--rx-color-danger, #dc2626);
  --rx-archive-border: var(--rx-color-border, #dce5ef);

  --rx-archive-radius-xs: 6px;
  --rx-archive-radius-sm: 10px;
  --rx-archive-radius-md: 16px;
  --rx-archive-radius-lg: 24px;
  --rx-archive-radius-pill: 999px;

  --rx-archive-shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.06);
  --rx-archive-shadow-md: 0 12px 30px rgba(15, 23, 42, 0.1);
  --rx-archive-shadow-lg: 0 20px 55px rgba(15, 23, 42, 0.14);

  --rx-archive-container: 1240px;
  --rx-archive-content: 840px;
  --rx-archive-sidebar: 330px;

  --rx-archive-gap-xs: 0.5rem;
  --rx-archive-gap-sm: 0.75rem;
  --rx-archive-gap-md: 1rem;
  --rx-archive-gap-lg: 1.5rem;
  --rx-archive-gap-xl: 2rem;
  --rx-archive-gap-2xl: 3rem;

  --rx-archive-font-xs: clamp(0.78rem, 0.75rem + 0.1vw, 0.84rem);
  --rx-archive-font-sm: clamp(0.86rem, 0.82rem + 0.15vw, 0.95rem);
  --rx-archive-font-md: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --rx-archive-font-lg: clamp(1.15rem, 1.05rem + 0.45vw, 1.38rem);
  --rx-archive-font-xl: clamp(1.45rem, 1.2rem + 1vw, 2rem);
  --rx-archive-font-2xl: clamp(2rem, 1.45rem + 2.2vw, 3.2rem);

  --rx-archive-line: 1.75;
  --rx-archive-transition: 180ms ease;
}

/* =========================================================
   02. Archive Page Base
   ========================================================= */

.rx-archive-page,
.archive .site-main,
.blog .site-main,
.search .site-main,
.category .site-main,
.tag .site-main,
.author .site-main,
.date .site-main {
  background: var(--rx-archive-bg);
  color: var(--rx-archive-text);
}

.rx-archive-page {
  position: relative;
  min-height: 100vh;
  overflow-x: clip;
}

.rx-archive-page *,
.rx-archive-page *::before,
.rx-archive-page *::after {
  box-sizing: border-box;
}

.rx-archive-page a {
  color: var(--rx-archive-primary);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
  transition:
    color var(--rx-archive-transition),
    background-color var(--rx-archive-transition),
    border-color var(--rx-archive-transition),
    box-shadow var(--rx-archive-transition),
    transform var(--rx-archive-transition);
}

.rx-archive-page a:hover {
  color: var(--rx-archive-primary-dark);
}

.rx-archive-page img {
  max-width: 100%;
  height: auto;
  display: block;
}

.rx-archive-page :where(button, input, select, textarea) {
  font: inherit;
}

.rx-archive-page :where(button, a, input, select, textarea):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--rx-archive-primary) 45%, transparent);
  outline-offset: 3px;
  border-radius: var(--rx-archive-radius-sm);
}

/* =========================================================
   03. Archive Container Layout
   ========================================================= */

.rx-archive-container {
  width: min(100% - 2rem, var(--rx-archive-container));
  margin-inline: auto;
}

.rx-archive-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rx-archive-sidebar);
  gap: var(--rx-archive-gap-xl);
  align-items: start;
  padding-block: var(--rx-archive-gap-xl);
}

.rx-archive-layout--no-sidebar {
  grid-template-columns: minmax(0, 1fr);
}

.rx-archive-main {
  min-width: 0;
}

.rx-archive-sidebar {
  position: sticky;
  top: calc(var(--rx-sticky-offset, 80px) + 1rem);
  min-width: 0;
}

/* =========================================================
   04. Archive Hero/Header
   ========================================================= */

.rx-archive-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(2rem, 5vw, 5rem) 0;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--rx-archive-primary) 18%, transparent), transparent 34rem),
    linear-gradient(135deg, #ffffff 0%, var(--rx-archive-surface-soft) 100%);
  border-bottom: 1px solid var(--rx-archive-border);
  overflow: hidden;
}

.rx-archive-hero::before {
  content: "";
  position: absolute;
  inset: auto -10% -45% auto;
  width: min(42rem, 70vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--rx-archive-primary) 10%, transparent);
  filter: blur(4px);
  z-index: -1;
}

.rx-archive-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1rem;
  color: var(--rx-archive-text-muted);
  font-size: var(--rx-archive-font-sm);
}

.rx-archive-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.rx-archive-breadcrumb a:hover {
  color: var(--rx-archive-primary);
}

.rx-archive-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: fit-content;
  margin-bottom: 0.9rem;
  padding: 0.42rem 0.78rem;
  border: 1px solid color-mix(in srgb, var(--rx-archive-primary) 20%, var(--rx-archive-border));
  border-radius: var(--rx-archive-radius-pill);
  background: var(--rx-archive-primary-soft);
  color: var(--rx-archive-primary-dark);
  font-size: var(--rx-archive-font-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.rx-archive-title {
  max-width: 900px;
  margin: 0;
  color: var(--rx-archive-heading);
  font-size: var(--rx-archive-font-2xl);
  line-height: 1.12;
  letter-spacing: -0.04em;
}

.rx-archive-description {
  max-width: 780px;
  margin: 1rem 0 0;
  color: var(--rx-archive-text-muted);
  font-size: var(--rx-archive-font-md);
  line-height: var(--rx-archive-line);
}

.rx-archive-meta-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.3rem;
}

.rx-archive-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.5rem 0.78rem;
  border-radius: var(--rx-archive-radius-pill);
  background: var(--rx-archive-surface);
  border: 1px solid var(--rx-archive-border);
  box-shadow: var(--rx-archive-shadow-sm);
  color: var(--rx-archive-text-muted);
  font-size: var(--rx-archive-font-sm);
}

.rx-archive-meta-pill strong {
  color: var(--rx-archive-heading);
}

/* =========================================================
   05. Archive Toolbar / Filter / Sort
   ========================================================= */

.rx-archive-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--rx-archive-gap-md);
  align-items: center;
  margin-bottom: var(--rx-archive-gap-lg);
  padding: 1rem;
  background: var(--rx-archive-surface);
  border: 1px solid var(--rx-archive-border);
  border-radius: var(--rx-archive-radius-md);
  box-shadow: var(--rx-archive-shadow-sm);
}

.rx-archive-result-count {
  margin: 0;
  color: var(--rx-archive-text-muted);
  font-size: var(--rx-archive-font-sm);
}

.rx-archive-result-count strong {
  color: var(--rx-archive-heading);
}

.rx-archive-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
}

.rx-archive-view-toggle,
.rx-archive-sort,
.rx-archive-filter-button {
  min-height: 42px;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--rx-archive-border);
  border-radius: var(--rx-archive-radius-sm);
  background: var(--rx-archive-surface);
  color: var(--rx-archive-text);
  cursor: pointer;
}

.rx-archive-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.rx-archive-view-toggle[aria-pressed="true"],
.rx-archive-filter-button:hover,
.rx-archive-sort:hover {
  border-color: color-mix(in srgb, var(--rx-archive-primary) 45%, var(--rx-archive-border));
  background: var(--rx-archive-primary-soft);
  color: var(--rx-archive-primary-dark);
}

/* =========================================================
   06. Archive Search Form
   ========================================================= */

.rx-archive-search {
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
  width: 100%;
  max-width: 720px;
  margin-top: var(--rx-archive-gap-lg);
}

.rx-archive-search-field {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 52px;
  padding: 0.85rem 1rem;
  border: 1px solid var(--rx-archive-border);
  border-radius: var(--rx-archive-radius-md);
  background: var(--rx-archive-surface);
  color: var(--rx-archive-text);
  box-shadow: var(--rx-archive-shadow-sm);
}

.rx-archive-search-field::placeholder {
  color: color-mix(in srgb, var(--rx-archive-text-muted) 75%, transparent);
}

.rx-archive-search-submit {
  flex: 0 0 auto;
  min-height: 52px;
  padding: 0.85rem 1.15rem;
  border: 0;
  border-radius: var(--rx-archive-radius-md);
  background: var(--rx-archive-primary);
  color: #ffffff;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--rx-archive-shadow-sm);
}

.rx-archive-search-submit:hover {
  background: var(--rx-archive-primary-dark);
  transform: translateY(-1px);
}

/* =========================================================
   07. Archive Grid/List
   ========================================================= */

.rx-archive-grid {
  display: grid;
  grid-template-columns: repeat(var(--rx-archive-columns, 2), minmax(0, 1fr));
  gap: var(--rx-archive-gap-lg);
}

.rx-archive-grid--3 {
  --rx-archive-columns: 3;
}

.rx-archive-grid--1,
.rx-archive-list {
  --rx-archive-columns: 1;
}

.rx-archive-list .rx-post-card {
  display: grid;
  grid-template-columns: minmax(180px, 32%) minmax(0, 1fr);
}

/* =========================================================
   08. Archive Post Card
   ========================================================= */

.rx-post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--rx-archive-surface);
  border: 1px solid var(--rx-archive-border);
  border-radius: var(--rx-archive-radius-lg);
  box-shadow: var(--rx-archive-shadow-sm);
  transition:
    transform var(--rx-archive-transition),
    box-shadow var(--rx-archive-transition),
    border-color var(--rx-archive-transition);
}

.rx-post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--rx-archive-shadow-md);
  border-color: color-mix(in srgb, var(--rx-archive-primary) 26%, var(--rx-archive-border));
}

.rx-post-card__media {
  position: relative;
  overflow: hidden;
  background: var(--rx-archive-surface-soft);
  aspect-ratio: 16 / 9;
}

.rx-post-card__media a {
  display: block;
  height: 100%;
}

.rx-post-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform 420ms ease;
}

.rx-post-card:hover .rx-post-card__image {
  transform: scale(1.045);
}

.rx-post-card__badge {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: calc(100% - 1.8rem);
  padding: 0.38rem 0.68rem;
  border-radius: var(--rx-archive-radius-pill);
  background: rgba(255, 255, 255, 0.92);
  color: var(--rx-archive-primary-dark);
  font-size: var(--rx-archive-font-xs);
  font-weight: 800;
  backdrop-filter: blur(10px);
  box-shadow: var(--rx-archive-shadow-sm);
}

.rx-post-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.8rem;
  padding: clamp(1rem, 2vw, 1.35rem);
}

.rx-post-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.75rem;
  color: var(--rx-archive-text-muted);
  font-size: var(--rx-archive-font-xs);
}

.rx-post-card__meta a {
  color: inherit;
  text-decoration: none;
}

.rx-post-card__meta a:hover {
  color: var(--rx-archive-primary);
}

.rx-post-card__title {
  margin: 0;
  color: var(--rx-archive-heading);
  font-size: var(--rx-archive-font-lg);
  line-height: 1.28;
  letter-spacing: -0.02em;
}

.rx-post-card__title a {
  color: inherit;
  text-decoration: none;
}

.rx-post-card__title a:hover {
  color: var(--rx-archive-primary);
}

.rx-post-card__excerpt {
  margin: 0;
  color: var(--rx-archive-text-muted);
  font-size: var(--rx-archive-font-sm);
  line-height: var(--rx-archive-line);
}

.rx-post-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rx-archive-gap-md);
  margin-top: auto;
  padding-top: 0.4rem;
}

.rx-post-card__read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: fit-content;
  color: var(--rx-archive-primary);
  font-weight: 800;
  text-decoration: none;
}

.rx-post-card__read-more::after {
  content: "→";
  transition: transform var(--rx-archive-transition);
}

.rx-post-card__read-more:hover::after {
  transform: translateX(3px);
}

.rx-post-card__reading-time {
  color: var(--rx-archive-text-muted);
  font-size: var(--rx-archive-font-xs);
  white-space: nowrap;
}

/* =========================================================
   09. Featured / Large Archive Card
   ========================================================= */

.rx-post-card--featured {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  margin-bottom: var(--rx-archive-gap-xl);
}

.rx-post-card--featured .rx-post-card__media {
  aspect-ratio: auto;
  min-height: 360px;
}

.rx-post-card--featured .rx-post-card__body {
  justify-content: center;
  padding: clamp(1.4rem, 3vw, 2.4rem);
}

.rx-post-card--featured .rx-post-card__title {
  font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.45rem);
}

/* =========================================================
   10. Medical A-Z Archive
   ========================================================= */

.rx-az-archive {
  margin-bottom: var(--rx-archive-gap-xl);
  padding: 1rem;
  background: var(--rx-archive-surface);
  border: 1px solid var(--rx-archive-border);
  border-radius: var(--rx-archive-radius-md);
  box-shadow: var(--rx-archive-shadow-sm);
}

.rx-az-archive__title {
  margin: 0 0 0.85rem;
  color: var(--rx-archive-heading);
  font-size: var(--rx-archive-font-md);
}

.rx-az-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rx-az-list a,
.rx-az-list span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0.35rem 0.62rem;
  border: 1px solid var(--rx-archive-border);
  border-radius: var(--rx-archive-radius-sm);
  background: var(--rx-archive-surface-soft);
  color: var(--rx-archive-text);
  font-weight: 800;
  text-decoration: none;
}

.rx-az-list a:hover,
.rx-az-list .is-active a {
  border-color: var(--rx-archive-primary);
  background: var(--rx-archive-primary);
  color: #ffffff;
}

.rx-az-list .is-disabled span {
  opacity: 0.45;
  cursor: not-allowed;
}

/* =========================================================
   11. Taxonomy Chips / Topic Cloud
   ========================================================= */

.rx-topic-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0 0 var(--rx-archive-gap-lg);
  padding: 0;
  list-style: none;
}

.rx-topic-cloud a {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0.48rem 0.75rem;
  border: 1px solid var(--rx-archive-border);
  border-radius: var(--rx-archive-radius-pill);
  background: var(--rx-archive-surface);
  color: var(--rx-archive-text-muted);
  font-size: var(--rx-archive-font-sm);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--rx-archive-shadow-sm);
}

.rx-topic-cloud a:hover,
.rx-topic-cloud .current-cat a,
.rx-topic-cloud .is-active a {
  border-color: var(--rx-archive-primary);
  background: var(--rx-archive-primary);
  color: #ffffff;
}

/* =========================================================
   12. Archive Sidebar Widgets
   ========================================================= */

.rx-archive-sidebar .widget,
.rx-archive-widget {
  margin-bottom: var(--rx-archive-gap-lg);
  padding: 1.2rem;
  background: var(--rx-archive-surface);
  border: 1px solid var(--rx-archive-border);
  border-radius: var(--rx-archive-radius-md);
  box-shadow: var(--rx-archive-shadow-sm);
}

.rx-archive-sidebar .widget-title,
.rx-archive-widget__title {
  margin: 0 0 1rem;
  color: var(--rx-archive-heading);
  font-size: var(--rx-archive-font-lg);
  line-height: 1.25;
}

.rx-archive-sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rx-archive-sidebar li + li {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--rx-archive-border);
}

.rx-archive-sidebar a {
  color: var(--rx-archive-text);
  text-decoration: none;
}

.rx-archive-sidebar a:hover {
  color: var(--rx-archive-primary);
}

/* =========================================================
   13. Compact Popular Post Widget
   ========================================================= */

.rx-mini-post {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
}

.rx-mini-post__thumb {
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: var(--rx-archive-radius-sm);
  background: var(--rx-archive-surface-soft);
}

.rx-mini-post__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rx-mini-post__title {
  margin: 0;
  color: var(--rx-archive-heading);
  font-size: var(--rx-archive-font-sm);
  line-height: 1.35;
}

.rx-mini-post__meta {
  margin-top: 0.25rem;
  color: var(--rx-archive-text-muted);
  font-size: var(--rx-archive-font-xs);
}

/* =========================================================
   14. Author Archive Box
   ========================================================= */

.rx-author-box {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: var(--rx-archive-gap-md);
  align-items: center;
  margin-bottom: var(--rx-archive-gap-xl);
  padding: 1.2rem;
  background: var(--rx-archive-surface);
  border: 1px solid var(--rx-archive-border);
  border-radius: var(--rx-archive-radius-lg);
  box-shadow: var(--rx-archive-shadow-sm);
}

.rx-author-box__avatar {
  overflow: hidden;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--rx-archive-surface-soft);
}

.rx-author-box__name {
  margin: 0;
  color: var(--rx-archive-heading);
  font-size: var(--rx-archive-font-xl);
}

.rx-author-box__bio {
  margin: 0.45rem 0 0;
  color: var(--rx-archive-text-muted);
  line-height: var(--rx-archive-line);
}

/* =========================================================
   15. Search Result Highlight
   ========================================================= */

.rx-search-highlight,
mark.rx-search-highlight {
  padding: 0.05em 0.22em;
  border-radius: 0.25em;
  background: color-mix(in srgb, #fde68a 80%, transparent);
  color: #78350f;
}

/* =========================================================
   16. Empty Archive / No Result
   ========================================================= */

.rx-archive-empty {
  display: grid;
  place-items: center;
  min-height: 380px;
  padding: clamp(2rem, 5vw, 4rem);
  text-align: center;
  background: var(--rx-archive-surface);
  border: 1px dashed color-mix(in srgb, var(--rx-archive-border) 80%, var(--rx-archive-primary));
  border-radius: var(--rx-archive-radius-lg);
}

.rx-archive-empty__icon {
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  margin-inline: auto;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--rx-archive-primary-soft);
  color: var(--rx-archive-primary);
  font-size: 2rem;
}

.rx-archive-empty__title {
  margin: 0;
  color: var(--rx-archive-heading);
  font-size: var(--rx-archive-font-xl);
}

.rx-archive-empty__text {
  max-width: 620px;
  margin: 0.75rem auto 0;
  color: var(--rx-archive-text-muted);
  line-height: var(--rx-archive-line);
}

/* =========================================================
   17. Pagination
   ========================================================= */

.rx-pagination,
.pagination,
.nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: var(--rx-archive-gap-2xl);
}

.rx-pagination a,
.rx-pagination span,
.nav-links a,
.nav-links span,
.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.55rem;
  min-height: 2.55rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--rx-archive-border);
  border-radius: var(--rx-archive-radius-sm);
  background: var(--rx-archive-surface);
  color: var(--rx-archive-text);
  font-weight: 800;
  text-decoration: none;
  box-shadow: var(--rx-archive-shadow-sm);
}

.rx-pagination a:hover,
.nav-links a:hover,
.page-numbers:hover {
  border-color: var(--rx-archive-primary);
  background: var(--rx-archive-primary-soft);
  color: var(--rx-archive-primary-dark);
}

.rx-pagination .current,
.nav-links .current,
.page-numbers.current {
  border-color: var(--rx-archive-primary);
  background: var(--rx-archive-primary);
  color: #ffffff;
}

.rx-pagination .dots,
.nav-links .dots,
.page-numbers.dots {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* =========================================================
   18. Load More Button
   ========================================================= */

.rx-load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--rx-archive-gap-xl);
}

.rx-load-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.8rem 1.25rem;
  border: 0;
  border-radius: var(--rx-archive-radius-pill);
  background: var(--rx-archive-primary);
  color: #ffffff;
  font-weight: 900;
  cursor: pointer;
  box-shadow: var(--rx-archive-shadow-md);
}

.rx-load-more:hover {
  background: var(--rx-archive-primary-dark);
  transform: translateY(-1px);
}

.rx-load-more[disabled],
.rx-load-more.is-loading {
  opacity: 0.68;
  cursor: wait;
}

/* =========================================================
   19. Skeleton Loading
   ========================================================= */

.rx-skeleton {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--rx-archive-border) 60%, #ffffff);
  border-radius: var(--rx-archive-radius-sm);
}

.rx-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, #ffffff 72%, transparent),
    transparent
  );
  animation: rx-skeleton-wave 1.35s infinite;
}

@keyframes rx-skeleton-wave {
  100% {
    transform: translateX(100%);
  }
}

.rx-post-card.is-loading {
  pointer-events: none;
}

.rx-post-card.is-loading .rx-post-card__title,
.rx-post-card.is-loading .rx-post-card__excerpt,
.rx-post-card.is-loading .rx-post-card__meta {
  color: transparent;
  background: color-mix(in srgb, var(--rx-archive-border) 60%, #ffffff);
  border-radius: var(--rx-archive-radius-xs);
}

/* =========================================================
   20. Sticky Mobile Filter Drawer
   ========================================================= */

.rx-filter-drawer {
  position: fixed;
  inset: auto 0 0;
  z-index: 999;
  max-height: min(84vh, 720px);
  padding: 1rem;
  overflow: auto;
  background: var(--rx-archive-surface);
  border-top: 1px solid var(--rx-archive-border);
  border-radius: var(--rx-archive-radius-lg) var(--rx-archive-radius-lg) 0 0;
  box-shadow: 0 -18px 50px rgba(15, 23, 42, 0.22);
  transform: translateY(105%);
  transition: transform 260ms ease;
}

.rx-filter-drawer.is-open {
  transform: translateY(0);
}

.rx-filter-overlay {
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(15, 23, 42, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.rx-filter-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* =========================================================
   21. Archive Notice / Medical Disclaimer
   ========================================================= */

.rx-archive-notice {
  margin-bottom: var(--rx-archive-gap-lg);
  padding: 1rem 1.1rem;
  border-left: 4px solid var(--rx-archive-primary);
  border-radius: var(--rx-archive-radius-md);
  background: var(--rx-archive-primary-soft);
  color: var(--rx-archive-text);
  line-height: var(--rx-archive-line);
}

.rx-archive-notice strong {
  color: var(--rx-archive-heading);
}

/* =========================================================
   22. Archive Table/List Index
   ========================================================= */

.rx-archive-index {
  overflow: hidden;
  background: var(--rx-archive-surface);
  border: 1px solid var(--rx-archive-border);
  border-radius: var(--rx-archive-radius-md);
  box-shadow: var(--rx-archive-shadow-sm);
}

.rx-archive-index__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid var(--rx-archive-border);
}

.rx-archive-index__row:last-child {
  border-bottom: 0;
}

.rx-archive-index__title {
  margin: 0;
  color: var(--rx-archive-heading);
  font-size: var(--rx-archive-font-md);
}

.rx-archive-index__title a {
  color: inherit;
  text-decoration: none;
}

.rx-archive-index__title a:hover {
  color: var(--rx-archive-primary);
}

.rx-archive-index__meta {
  color: var(--rx-archive-text-muted);
  font-size: var(--rx-archive-font-xs);
}

/* =========================================================
   23. WordPress Default Archive Compatibility
   ========================================================= */

.archive-title,
.page-title {
  color: var(--rx-archive-heading);
}

.archive-description,
.taxonomy-description {
  color: var(--rx-archive-text-muted);
  line-height: var(--rx-archive-line);
}

.archive-description p,
.taxonomy-description p {
  margin-top: 0;
}

.archive-description p:last-child,
.taxonomy-description p:last-child {
  margin-bottom: 0;
}

.hentry,
.post,
.type-post {
  min-width: 0;
}

.entry-title a {
  color: inherit;
  text-decoration: none;
}

.entry-title a:hover {
  color: var(--rx-archive-primary);
}

/* =========================================================
   24. Dark Mode
   ========================================================= */

@media (prefers-color-scheme: dark) {
  :root {
    --rx-archive-bg: var(--rx-color-bg, #08111f);
    --rx-archive-surface: var(--rx-color-surface, #101b2d);
    --rx-archive-surface-soft: var(--rx-color-surface-soft, #13243a);
    --rx-archive-text: var(--rx-color-text, #dce7f5);
    --rx-archive-text-muted: var(--rx-color-muted, #9badc3);
    --rx-archive-heading: var(--rx-color-heading, #f7fbff);
    --rx-archive-border: var(--rx-color-border, #26384f);
    --rx-archive-primary-soft: color-mix(in srgb, var(--rx-archive-primary) 22%, transparent);
    --rx-archive-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.22);
    --rx-archive-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.28);
    --rx-archive-shadow-lg: 0 20px 55px rgba(0, 0, 0, 0.34);
  }

  .rx-archive-hero {
    background:
      radial-gradient(circle at top left, color-mix(in srgb, var(--rx-archive-primary) 20%, transparent), transparent 34rem),
      linear-gradient(135deg, #0b1628 0%, #101b2d 100%);
  }

  .rx-post-card__badge {
    background: rgba(16, 27, 45, 0.88);
    color: #dbeafe;
  }

  .rx-search-highlight,
  mark.rx-search-highlight {
    background: rgba(245, 158, 11, 0.28);
    color: #fde68a;
  }
}

html[data-theme="dark"] {
  --rx-archive-bg: var(--rx-color-bg, #08111f);
  --rx-archive-surface: var(--rx-color-surface, #101b2d);
  --rx-archive-surface-soft: var(--rx-color-surface-soft, #13243a);
  --rx-archive-text: var(--rx-color-text, #dce7f5);
  --rx-archive-text-muted: var(--rx-color-muted, #9badc3);
  --rx-archive-heading: var(--rx-color-heading, #f7fbff);
  --rx-archive-border: var(--rx-color-border, #26384f);
}

/* =========================================================
   25. Responsive Design
   ========================================================= */

@media (max-width: 1180px) {
  .rx-archive-grid--3 {
    --rx-archive-columns: 2;
  }

  .rx-archive-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}

@media (max-width: 980px) {
  .rx-archive-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .rx-archive-sidebar {
    position: static;
  }

  .rx-post-card--featured {
    grid-template-columns: 1fr;
  }

  .rx-post-card--featured .rx-post-card__media {
    min-height: auto;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 760px) {
  .rx-archive-container {
    width: min(100% - 1.25rem, var(--rx-archive-container));
  }

  .rx-archive-toolbar {
    grid-template-columns: 1fr;
  }

  .rx-archive-actions {
    justify-content: flex-start;
  }

  .rx-archive-grid,
  .rx-archive-grid--3 {
    --rx-archive-columns: 1;
  }

  .rx-archive-list .rx-post-card {
    grid-template-columns: 1fr;
  }

  .rx-archive-search {
    flex-direction: column;
  }

  .rx-archive-search-submit {
    width: 100%;
  }

  .rx-author-box {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .rx-author-box__avatar {
    margin-inline: auto;
  }
}

@media (max-width: 520px) {
  .rx-archive-hero {
    padding-block: 2rem;
  }

  .rx-post-card__footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .rx-archive-index__row {
    grid-template-columns: 1fr;
  }

  .rx-pagination,
  .pagination,
  .nav-links {
    justify-content: flex-start;
  }
}

/* =========================================================
   26. Reduced Motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .rx-archive-page *,
  .rx-archive-page *::before,
  .rx-archive-page *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  .rx-post-card:hover,
  .rx-load-more:hover,
  .rx-archive-search-submit:hover {
    transform: none;
  }

  .rx-post-card:hover .rx-post-card__image {
    transform: none;
  }
}

/* =========================================================
   27. High Contrast / Accessibility
   ========================================================= */

@media (prefers-contrast: more) {
  :root {
    --rx-archive-border: #667085;
    --rx-archive-text-muted: #344054;
  }

  .rx-post-card,
  .rx-archive-toolbar,
  .rx-archive-widget,
  .rx-archive-sidebar .widget {
    border-width: 2px;
  }

  .rx-archive-page a {
    text-decoration: underline;
  }
}

/* =========================================================
   28. Print Styles
   ========================================================= */

@media print {
  .rx-archive-hero,
  .rx-archive-page,
  .archive .site-main,
  .blog .site-main,
  .search .site-main {
    background: #ffffff !important;
    color: #000000 !important;
  }

  .rx-archive-toolbar,
  .rx-archive-sidebar,
  .rx-pagination,
  .pagination,
  .nav-links,
  .rx-load-more-wrap,
  .rx-filter-drawer,
  .rx-filter-overlay {
    display: none !important;
  }

  .rx-archive-layout,
  .rx-archive-grid,
  .rx-post-card,
  .rx-post-card--featured {
    display: block !important;
  }

  .rx-post-card {
    break-inside: avoid;
    margin-bottom: 1rem;
    border: 1px solid #cccccc !important;
    box-shadow: none !important;
  }

  .rx-post-card__media {
    display: none;
  }

  .rx-post-card__title a::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    font-weight: 400;
  }
}

/* =========================================================
   29. Utility Classes for Archive Page
   ========================================================= */

.rx-archive-hidden {
  display: none !important;
}

.rx-archive-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.rx-archive-text-center {
  text-align: center;
}

.rx-archive-mt-0 {
  margin-top: 0 !important;
}

.rx-archive-mb-0 {
  margin-bottom: 0 !important;
}

.rx-archive-mt-lg {
  margin-top: var(--rx-archive-gap-lg) !important;
}

.rx-archive-mb-lg {
  margin-bottom: var(--rx-archive-gap-lg) !important;
}

.rx-archive-full-bleed {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* =========================================================
   30. Container Query Enhancement
   ========================================================= */

@container rx-archive-card (max-width: 420px) {
  .rx-post-card__footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

.rx-post-card {
  container-type: inline-size;
  container-name: rx-archive-card;
}

Best HTML/PHP class names to use with this file:

<main class="rx-archive-page">
  <section class="rx-archive-hero">
    <div class="rx-archive-container">
      <nav class="rx-archive-breadcrumb">Home / Category</nav>
      <span class="rx-archive-kicker">Medical Archive</span>
      <h1 class="rx-archive-title">Disease and Health Articles</h1>
      <p class="rx-archive-description">Evidence-based health articles in simple English.</p>
    </div>
  </section>

  <div class="rx-archive-container rx-archive-layout">
    <section class="rx-archive-main">
      <div class="rx-archive-toolbar">
        <p class="rx-archive-result-count"><strong>120</strong> articles found</p>
      </div>

      <div class="rx-archive-grid rx-archive-grid--3">
        <article class="rx-post-card">
          <div class="rx-post-card__media">
            <a href="#">
              <img class="rx-post-card__image" src="image.jpg" alt="">
            </a>
            <span class="rx-post-card__badge">Orthopedics</span>
          </div>

          <div class="rx-post-card__body">
            <div class="rx-post-card__meta">By RxHarun · 5 min read</div>
            <h2 class="rx-post-card__title">
              <a href="#">Example Archive Post Title</a>
            </h2>
            <p class="rx-post-card__excerpt">
              Short article summary will appear here.
            </p>
            <div class="rx-post-card__footer">
              <a class="rx-post-card__read-more" href="#">Read More</a>
              <span class="rx-post-card__reading-time">Updated today</span>
            </div>
          </div>
        </article>
      </div>
    </section>

    <aside class="rx-archive-sidebar">
      <section class="rx-archive-widget">
        <h2 class="rx-archive-widget__title">Popular Topics</h2>
      </section>
    </aside>
  </div>
</main>

For RX Theme, this file should be loaded only on archive-like pages:

if ( is_archive() || is_home() || is_search() ) {
    wp_enqueue_style(
        'rx-archive',
        get_template_directory_uri() . '/assets/static/static-css/pages/archive.css',
        array(),
        RX_THEME_VERSION
    );
}

Leave a Reply

Your email address will not be published. Required fields are marked *