rx-page.css

harun.bspt2014@gmail.com
I’ll build this as a strong rx-page.css foundation: page layout, content typography, medical article blocks, cards, pagination, breadcrumbs, responsive rules, print styles, accessibility, and dark-mode-ready variables.

Yes friend. For assets/css/rx-page.css, you can use this as an advanced page-specific CSS file for RX Theme. It is safe to keep this file for page templates, single page layout, medical content pages, cards, breadcrumbs, pagination, author box, related posts, accessibility, print mode, responsive design, dark mode support, and utility helpers.

Copy this into:

rx-theme/assets/css/rx-page.css
/*!
Theme Name: RX Theme
File: assets/css/rx-page.css
Description: Advanced page-level styles for RX Theme.
Author: RxHarun
Version: 1.0.0
*/

/* =========================================================
   RX PAGE CSS TABLE OF CONTENTS
   ---------------------------------------------------------
   01. Page root variables
   02. Page reset and base
   03. Page wrappers
   04. Page hero
   05. Breadcrumbs
   06. Page content typography
   07. Medical article content
   08. Headings
   09. Paragraphs and links
   10. Lists
   11. Images and media
   12. Tables
   13. Blockquote
   14. Notices and callouts
   15. Cards
   16. Author box
   17. Related posts
   18. Pagination
   19. Comments area
   20. Sidebar widgets
   21. Forms
   22. Buttons
   23. FAQ section
   24. Table of contents
   25. Search page
   26. Archive page
   27. Error page
   28. Accessibility
   29. Responsive design
   30. Dark mode support
   31. Print styles
   32. Utility classes
========================================================= */


/* =========================================================
   01. PAGE ROOT VARIABLES
========================================================= */

:root {
  --rx-page-bg: #f7f9fc;
  --rx-page-surface: #ffffff;
  --rx-page-surface-soft: #f1f5f9;
  --rx-page-surface-muted: #e2e8f0;

  --rx-page-text: #111827;
  --rx-page-text-soft: #374151;
  --rx-page-text-muted: #64748b;
  --rx-page-text-light: #94a3b8;

  --rx-page-primary: #0077cc;
  --rx-page-primary-dark: #005fa3;
  --rx-page-primary-soft: #e6f3ff;

  --rx-page-secondary: #0f766e;
  --rx-page-secondary-soft: #ecfdf5;

  --rx-page-danger: #dc2626;
  --rx-page-danger-soft: #fef2f2;

  --rx-page-warning: #d97706;
  --rx-page-warning-soft: #fffbeb;

  --rx-page-success: #16a34a;
  --rx-page-success-soft: #f0fdf4;

  --rx-page-info: #2563eb;
  --rx-page-info-soft: #eff6ff;

  --rx-page-border: #e5e7eb;
  --rx-page-border-dark: #cbd5e1;

  --rx-page-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --rx-page-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --rx-page-shadow-lg: 0 20px 45px rgba(15, 23, 42, 0.12);

  --rx-page-radius-xs: 4px;
  --rx-page-radius-sm: 8px;
  --rx-page-radius-md: 12px;
  --rx-page-radius-lg: 18px;
  --rx-page-radius-xl: 28px;
  --rx-page-radius-full: 999px;

  --rx-page-container: 1180px;
  --rx-page-content: 820px;
  --rx-page-sidebar: 330px;

  --rx-page-gap-xs: 0.35rem;
  --rx-page-gap-sm: 0.65rem;
  --rx-page-gap-md: 1rem;
  --rx-page-gap-lg: 1.5rem;
  --rx-page-gap-xl: 2rem;
  --rx-page-gap-2xl: 3rem;

  --rx-page-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --rx-page-font-heading: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --rx-page-font-code: Consolas, Monaco, "Courier New", monospace;

  --rx-page-transition-fast: 160ms ease;
  --rx-page-transition-normal: 260ms ease;
}


/* =========================================================
   02. PAGE RESET AND BASE
========================================================= */

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

.rx-page {
  width: 100%;
  min-height: 100vh;
  background: var(--rx-page-bg);
  color: var(--rx-page-text);
  font-family: var(--rx-page-font-body);
  line-height: 1.75;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.rx-page img,
.rx-page video,
.rx-page iframe,
.rx-page embed,
.rx-page object {
  max-width: 100%;
}

.rx-page img {
  height: auto;
  vertical-align: middle;
}

.rx-page a {
  color: var(--rx-page-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition:
    color var(--rx-page-transition-fast),
    background-color var(--rx-page-transition-fast),
    border-color var(--rx-page-transition-fast),
    box-shadow var(--rx-page-transition-fast);
}

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

.rx-page a:focus-visible,
.rx-page button:focus-visible,
.rx-page input:focus-visible,
.rx-page textarea:focus-visible,
.rx-page select:focus-visible {
  outline: 3px solid rgba(0, 119, 204, 0.35);
  outline-offset: 3px;
}


/* =========================================================
   03. PAGE WRAPPERS
========================================================= */

.rx-page-container {
  width: min(100% - 32px, var(--rx-page-container));
  margin-inline: auto;
}

.rx-page-main {
  padding-block: var(--rx-page-gap-2xl);
}

.rx-page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rx-page-gap-2xl);
}

.rx-page-layout.has-sidebar {
  grid-template-columns: minmax(0, 1fr) minmax(260px, var(--rx-page-sidebar));
  align-items: start;
}

.rx-page-content-wrap {
  min-width: 0;
}

.rx-page-content-box {
  background: var(--rx-page-surface);
  border: 1px solid var(--rx-page-border);
  border-radius: var(--rx-page-radius-lg);
  box-shadow: var(--rx-page-shadow-sm);
  padding: clamp(1.25rem, 2.5vw, 2.25rem);
}

.rx-page-full-width .rx-page-content-box {
  max-width: none;
}

.rx-page-narrow .rx-page-content-box {
  max-width: var(--rx-page-content);
  margin-inline: auto;
}


/* =========================================================
   04. PAGE HERO
========================================================= */

.rx-page-hero {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at top left, rgba(0, 119, 204, 0.14), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #eef6ff 100%);
  border-bottom: 1px solid var(--rx-page-border);
  padding-block: clamp(2.5rem, 6vw, 5rem);
  overflow: hidden;
}

.rx-page-hero::before {
  content: "";
  position: absolute;
  inset: auto -10% -40% auto;
  width: 460px;
  aspect-ratio: 1;
  background: rgba(15, 118, 110, 0.08);
  border-radius: 50%;
  z-index: -1;
}

.rx-page-hero-inner {
  width: min(100% - 32px, var(--rx-page-container));
  margin-inline: auto;
}

.rx-page-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
  padding: 0.35rem 0.75rem;
  background: var(--rx-page-primary-soft);
  color: var(--rx-page-primary-dark);
  border-radius: var(--rx-page-radius-full);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rx-page-title {
  max-width: 940px;
  margin: 0;
  color: var(--rx-page-text);
  font-family: var(--rx-page-font-heading);
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.rx-page-subtitle {
  max-width: 780px;
  margin: 1rem 0 0;
  color: var(--rx-page-text-soft);
  font-size: clamp(1rem, 2vw, 1.25rem);
}

.rx-page-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-top: 1.25rem;
  color: var(--rx-page-text-muted);
  font-size: 0.95rem;
}

.rx-page-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}


/* =========================================================
   05. BREADCRUMBS
========================================================= */

.rx-breadcrumbs {
  margin-bottom: var(--rx-page-gap-lg);
  color: var(--rx-page-text-muted);
  font-size: 0.9rem;
}

.rx-breadcrumbs-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.rx-breadcrumbs-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.rx-breadcrumbs-item:not(:last-child)::after {
  content: "/";
  color: var(--rx-page-text-light);
}

.rx-breadcrumbs a {
  color: var(--rx-page-text-muted);
  text-decoration: none;
}

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


/* =========================================================
   06. PAGE CONTENT TYPOGRAPHY
========================================================= */

.rx-page-content {
  color: var(--rx-page-text-soft);
  font-size: clamp(1rem, 1.3vw, 1.075rem);
}

.rx-page-content > *:first-child {
  margin-top: 0;
}

.rx-page-content > *:last-child {
  margin-bottom: 0;
}

.rx-page-content p,
.rx-page-content ul,
.rx-page-content ol,
.rx-page-content blockquote,
.rx-page-content table,
.rx-page-content figure,
.rx-page-content pre {
  margin-top: 0;
  margin-bottom: 1.35rem;
}


/* =========================================================
   07. MEDICAL ARTICLE CONTENT
========================================================= */

.rx-medical-article {
  counter-reset: rx-section-counter;
}

.rx-medical-summary {
  margin-bottom: 2rem;
  padding: 1.25rem 1.4rem;
  background: var(--rx-page-info-soft);
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-left: 5px solid var(--rx-page-info);
  border-radius: var(--rx-page-radius-md);
}

.rx-medical-summary-title {
  margin: 0 0 0.65rem;
  color: var(--rx-page-text);
  font-size: 1.15rem;
  font-weight: 800;
}

.rx-medical-summary p:last-child {
  margin-bottom: 0;
}

.rx-medical-key-points {
  padding: 1.25rem;
  background: var(--rx-page-secondary-soft);
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: var(--rx-page-radius-md);
}

.rx-medical-key-points h2,
.rx-medical-key-points h3 {
  margin-top: 0;
}

.rx-medical-warning {
  padding: 1.25rem;
  background: var(--rx-page-danger-soft);
  border: 1px solid rgba(220, 38, 38, 0.18);
  border-left: 5px solid var(--rx-page-danger);
  border-radius: var(--rx-page-radius-md);
}

.rx-medical-note {
  padding: 1.25rem;
  background: var(--rx-page-warning-soft);
  border: 1px solid rgba(217, 119, 6, 0.18);
  border-left: 5px solid var(--rx-page-warning);
  border-radius: var(--rx-page-radius-md);
}

.rx-medical-reference-box {
  margin-top: 2rem;
  padding: 1.25rem;
  background: var(--rx-page-surface-soft);
  border: 1px solid var(--rx-page-border);
  border-radius: var(--rx-page-radius-md);
  font-size: 0.95rem;
}

.rx-medical-reference-box h2,
.rx-medical-reference-box h3 {
  margin-top: 0;
}

.rx-medical-reference-box ol,
.rx-medical-reference-box ul {
  padding-left: 1.25rem;
}


/* =========================================================
   08. HEADINGS
========================================================= */

.rx-page-content h1,
.rx-page-content h2,
.rx-page-content h3,
.rx-page-content h4,
.rx-page-content h5,
.rx-page-content h6 {
  color: var(--rx-page-text);
  font-family: var(--rx-page-font-heading);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.025em;
}

.rx-page-content h1 {
  margin: 0 0 1.25rem;
  font-size: clamp(2rem, 4vw, 3.25rem);
}

.rx-page-content h2 {
  margin: 2.35rem 0 1rem;
  padding-top: 0.2rem;
  font-size: clamp(1.55rem, 3vw, 2.25rem);
}

.rx-page-content h3 {
  margin: 2rem 0 0.85rem;
  font-size: clamp(1.3rem, 2vw, 1.65rem);
}

.rx-page-content h4 {
  margin: 1.65rem 0 0.75rem;
  font-size: 1.18rem;
}

.rx-page-content h5 {
  margin: 1.45rem 0 0.65rem;
  font-size: 1.05rem;
}

.rx-page-content h6 {
  margin: 1.35rem 0 0.55rem;
  color: var(--rx-page-text-muted);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.rx-page-content h2[id],
.rx-page-content h3[id],
.rx-page-content h4[id] {
  scroll-margin-top: 100px;
}

.rx-page-content h2.rx-heading-numbered {
  counter-increment: rx-section-counter;
}

.rx-page-content h2.rx-heading-numbered::before {
  content: counter(rx-section-counter, decimal-leading-zero);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-right: 0.65rem;
  background: var(--rx-page-primary-soft);
  color: var(--rx-page-primary-dark);
  border-radius: var(--rx-page-radius-full);
  font-size: 0.85rem;
  vertical-align: middle;
}


/* =========================================================
   09. PARAGRAPHS AND LINKS
========================================================= */

.rx-page-content p {
  color: var(--rx-page-text-soft);
}

.rx-page-content strong,
.rx-page-content b {
  color: var(--rx-page-text);
  font-weight: 800;
}

.rx-page-content em {
  color: var(--rx-page-text-soft);
}

.rx-page-content a:not(.rx-btn) {
  font-weight: 650;
}

.rx-page-content a:not(.rx-btn):hover {
  text-decoration-thickness: 2px;
}

.rx-page-content small {
  color: var(--rx-page-text-muted);
  font-size: 0.875em;
}

.rx-page-content mark {
  padding: 0.12em 0.28em;
  background: #fff3bf;
  color: #3f2e00;
  border-radius: var(--rx-page-radius-xs);
}

.rx-page-content code {
  padding: 0.18rem 0.38rem;
  background: var(--rx-page-surface-soft);
  color: #be123c;
  border: 1px solid var(--rx-page-border);
  border-radius: var(--rx-page-radius-xs);
  font-family: var(--rx-page-font-code);
  font-size: 0.9em;
}

.rx-page-content pre {
  overflow-x: auto;
  padding: 1rem 1.15rem;
  background: #0f172a;
  color: #e5e7eb;
  border-radius: var(--rx-page-radius-md);
  box-shadow: var(--rx-page-shadow-sm);
}

.rx-page-content pre code {
  padding: 0;
  background: transparent;
  color: inherit;
  border: 0;
}


/* =========================================================
   10. LISTS
========================================================= */

.rx-page-content ul,
.rx-page-content ol {
  padding-left: 1.35rem;
}

.rx-page-content li {
  margin-bottom: 0.55rem;
}

.rx-page-content li::marker {
  color: var(--rx-page-primary);
  font-weight: 700;
}

.rx-page-content ul ul,
.rx-page-content ol ol,
.rx-page-content ul ol,
.rx-page-content ol ul {
  margin-top: 0.55rem;
  margin-bottom: 0.55rem;
}

.rx-check-list,
.rx-x-list,
.rx-arrow-list {
  padding-left: 0 !important;
  list-style: none;
}

.rx-check-list li,
.rx-x-list li,
.rx-arrow-list li {
  position: relative;
  padding-left: 1.8rem;
}

.rx-check-list li::before,
.rx-x-list li::before,
.rx-arrow-list li::before {
  position: absolute;
  left: 0;
  top: 0.08rem;
  font-weight: 800;
}

.rx-check-list li::before {
  content: "✓";
  color: var(--rx-page-success);
}

.rx-x-list li::before {
  content: "×";
  color: var(--rx-page-danger);
}

.rx-arrow-list li::before {
  content: "→";
  color: var(--rx-page-primary);
}


/* =========================================================
   11. IMAGES AND MEDIA
========================================================= */

.rx-page-content figure {
  margin-inline: 0;
}

.rx-page-content figcaption {
  margin-top: 0.65rem;
  color: var(--rx-page-text-muted);
  font-size: 0.92rem;
  text-align: center;
}

.rx-page-content img {
  border-radius: var(--rx-page-radius-md);
}

.rx-page-featured-image {
  margin-bottom: var(--rx-page-gap-xl);
  overflow: hidden;
  border-radius: var(--rx-page-radius-lg);
  box-shadow: var(--rx-page-shadow-md);
}

.rx-page-featured-image img {
  display: block;
  width: 100%;
  border-radius: inherit;
}

.rx-media-frame {
  overflow: hidden;
  background: var(--rx-page-surface-soft);
  border: 1px solid var(--rx-page-border);
  border-radius: var(--rx-page-radius-lg);
  box-shadow: var(--rx-page-shadow-sm);
}

.rx-media-frame iframe,
.rx-media-frame video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.rx-avatar {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: var(--rx-page-radius-full);
}


/* =========================================================
   12. TABLES
========================================================= */

.rx-page-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin-bottom: 1.5rem;
  border: 1px solid var(--rx-page-border);
  border-radius: var(--rx-page-radius-md);
}

.rx-page-content table {
  width: 100%;
  border-collapse: collapse;
  background: var(--rx-page-surface);
  font-size: 0.95rem;
}

.rx-page-content th,
.rx-page-content td {
  padding: 0.9rem 1rem;
  border: 1px solid var(--rx-page-border);
  text-align: left;
  vertical-align: top;
}

.rx-page-content thead th {
  background: var(--rx-page-surface-soft);
  color: var(--rx-page-text);
  font-weight: 800;
}

.rx-page-content tbody tr:nth-child(even) {
  background: rgba(241, 245, 249, 0.55);
}

.rx-page-content tbody tr:hover {
  background: var(--rx-page-primary-soft);
}


/* =========================================================
   13. BLOCKQUOTE
========================================================= */

.rx-page-content blockquote {
  position: relative;
  padding: 1.25rem 1.35rem 1.25rem 1.5rem;
  background: var(--rx-page-surface-soft);
  border-left: 5px solid var(--rx-page-primary);
  border-radius: 0 var(--rx-page-radius-md) var(--rx-page-radius-md) 0;
  color: var(--rx-page-text-soft);
  font-size: 1.05rem;
}

.rx-page-content blockquote p:last-child {
  margin-bottom: 0;
}

.rx-page-content blockquote cite {
  display: block;
  margin-top: 0.75rem;
  color: var(--rx-page-text-muted);
  font-size: 0.9rem;
  font-style: normal;
}


/* =========================================================
   14. NOTICES AND CALLOUTS
========================================================= */

.rx-alert {
  margin-bottom: 1.35rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--rx-page-border);
  border-radius: var(--rx-page-radius-md);
}

.rx-alert p:last-child {
  margin-bottom: 0;
}

.rx-alert-info {
  background: var(--rx-page-info-soft);
  border-color: rgba(37, 99, 235, 0.2);
}

.rx-alert-success {
  background: var(--rx-page-success-soft);
  border-color: rgba(22, 163, 74, 0.2);
}

.rx-alert-warning {
  background: var(--rx-page-warning-soft);
  border-color: rgba(217, 119, 6, 0.2);
}

.rx-alert-danger {
  background: var(--rx-page-danger-soft);
  border-color: rgba(220, 38, 38, 0.2);
}

.rx-callout {
  position: relative;
  margin-block: 1.6rem;
  padding: 1.25rem 1.35rem;
  background: var(--rx-page-surface);
  border: 1px solid var(--rx-page-border);
  border-left: 5px solid var(--rx-page-primary);
  border-radius: var(--rx-page-radius-md);
  box-shadow: var(--rx-page-shadow-sm);
}

.rx-callout-title {
  margin: 0 0 0.45rem;
  color: var(--rx-page-text);
  font-weight: 800;
}

.rx-callout p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   15. CARDS
========================================================= */

.rx-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rx-page-gap-lg);
  margin-block: var(--rx-page-gap-xl);
}

.rx-card {
  background: var(--rx-page-surface);
  border: 1px solid var(--rx-page-border);
  border-radius: var(--rx-page-radius-lg);
  box-shadow: var(--rx-page-shadow-sm);
  overflow: hidden;
  transition:
    transform var(--rx-page-transition-normal),
    box-shadow var(--rx-page-transition-normal),
    border-color var(--rx-page-transition-normal);
}

.rx-card:hover {
  transform: translateY(-3px);
  border-color: var(--rx-page-border-dark);
  box-shadow: var(--rx-page-shadow-md);
}

.rx-card-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
}

.rx-card-body {
  padding: 1.15rem;
}

.rx-card-title {
  margin: 0 0 0.55rem;
  color: var(--rx-page-text);
  font-size: 1.15rem;
  line-height: 1.3;
}

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

.rx-card-title a:hover {
  color: var(--rx-page-primary);
}

.rx-card-excerpt {
  margin: 0;
  color: var(--rx-page-text-muted);
  font-size: 0.95rem;
}

.rx-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  margin-top: 0.9rem;
  color: var(--rx-page-text-muted);
  font-size: 0.85rem;
}


/* =========================================================
   16. AUTHOR BOX
========================================================= */

.rx-author-box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  margin-top: var(--rx-page-gap-2xl);
  padding: 1.25rem;
  background: var(--rx-page-surface);
  border: 1px solid var(--rx-page-border);
  border-radius: var(--rx-page-radius-lg);
  box-shadow: var(--rx-page-shadow-sm);
}

.rx-author-name {
  margin: 0 0 0.35rem;
  color: var(--rx-page-text);
  font-size: 1.15rem;
  font-weight: 800;
}

.rx-author-bio {
  margin: 0;
  color: var(--rx-page-text-muted);
  font-size: 0.95rem;
}

.rx-author-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.75rem;
}

.rx-author-links a {
  font-size: 0.9rem;
  text-decoration: none;
}


/* =========================================================
   17. RELATED POSTS
========================================================= */

.rx-related-posts {
  margin-top: var(--rx-page-gap-2xl);
}

.rx-related-posts-title {
  margin: 0 0 1rem;
  color: var(--rx-page-text);
  font-size: 1.6rem;
}

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

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

.rx-related-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
}

.rx-related-card-body {
  padding: 1rem;
}

.rx-related-card-title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.35;
}

.rx-related-card-title a {
  color: var(--rx-page-text);
  text-decoration: none;
}

.rx-related-card-title a:hover {
  color: var(--rx-page-primary);
}


/* =========================================================
   18. PAGINATION
========================================================= */

.rx-pagination {
  display: flex;
  justify-content: center;
  margin-top: var(--rx-page-gap-2xl);
}

.rx-pagination .nav-links,
.rx-page-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
}

.rx-pagination a,
.rx-pagination span,
.rx-page-links a,
.rx-page-links span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 2.55rem;
  min-height: 2.55rem;
  padding: 0.45rem 0.75rem;
  background: var(--rx-page-surface);
  color: var(--rx-page-text-soft);
  border: 1px solid var(--rx-page-border);
  border-radius: var(--rx-page-radius-sm);
  text-decoration: none;
  font-weight: 700;
}

.rx-pagination a:hover,
.rx-page-links a:hover {
  background: var(--rx-page-primary);
  color: #ffffff;
  border-color: var(--rx-page-primary);
}

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


/* =========================================================
   19. COMMENTS AREA
========================================================= */

.rx-comments-area {
  margin-top: var(--rx-page-gap-2xl);
  padding: 1.5rem;
  background: var(--rx-page-surface);
  border: 1px solid var(--rx-page-border);
  border-radius: var(--rx-page-radius-lg);
}

.rx-comments-title,
.rx-comment-reply-title {
  margin-top: 0;
  color: var(--rx-page-text);
}

.rx-comment-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.rx-comment {
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--rx-page-border);
}

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

.rx-comment-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
}

.rx-comment-author {
  font-weight: 800;
  color: var(--rx-page-text);
}

.rx-comment-meta {
  color: var(--rx-page-text-muted);
  font-size: 0.88rem;
}

.rx-comment-content {
  margin-top: 0.65rem;
}

.rx-comment-content p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   20. SIDEBAR WIDGETS
========================================================= */

.rx-sidebar {
  position: sticky;
  top: 96px;
  align-self: start;
}

.rx-widget {
  margin-bottom: var(--rx-page-gap-lg);
  padding: 1.15rem;
  background: var(--rx-page-surface);
  border: 1px solid var(--rx-page-border);
  border-radius: var(--rx-page-radius-lg);
  box-shadow: var(--rx-page-shadow-sm);
}

.rx-widget-title {
  margin: 0 0 0.85rem;
  color: var(--rx-page-text);
  font-size: 1.15rem;
  font-weight: 800;
}

.rx-widget ul {
  padding-left: 0;
  margin: 0;
  list-style: none;
}

.rx-widget li {
  padding-block: 0.55rem;
  border-bottom: 1px solid var(--rx-page-border);
}

.rx-widget li:last-child {
  border-bottom: 0;
}

.rx-widget a {
  color: var(--rx-page-text-soft);
  text-decoration: none;
}

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

.rx-sticky-box {
  position: sticky;
  top: 96px;
}


/* =========================================================
   21. FORMS
========================================================= */

.rx-form {
  display: grid;
  gap: 1rem;
}

.rx-form-row {
  display: grid;
  gap: 0.45rem;
}

.rx-form label {
  color: var(--rx-page-text);
  font-weight: 750;
}

.rx-form input,
.rx-form textarea,
.rx-form select,
.rx-search-form input,
.rx-search-form select {
  width: 100%;
  padding: 0.85rem 1rem;
  background: #ffffff;
  color: var(--rx-page-text);
  border: 1px solid var(--rx-page-border-dark);
  border-radius: var(--rx-page-radius-sm);
  font: inherit;
}

.rx-form textarea {
  min-height: 150px;
  resize: vertical;
}

.rx-form input::placeholder,
.rx-form textarea::placeholder,
.rx-search-form input::placeholder {
  color: var(--rx-page-text-light);
}

.rx-form input:focus,
.rx-form textarea:focus,
.rx-form select:focus,
.rx-search-form input:focus {
  border-color: var(--rx-page-primary);
  box-shadow: 0 0 0 4px rgba(0, 119, 204, 0.12);
}

.rx-search-form {
  display: flex;
  gap: 0.65rem;
}

.rx-search-form input {
  flex: 1 1 auto;
}

.rx-search-form button {
  flex: 0 0 auto;
}


/* =========================================================
   22. BUTTONS
========================================================= */

.rx-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0.75rem 1.15rem;
  background: var(--rx-page-primary);
  color: #ffffff !important;
  border: 1px solid var(--rx-page-primary);
  border-radius: var(--rx-page-radius-sm);
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--rx-page-transition-fast),
    background-color var(--rx-page-transition-fast),
    border-color var(--rx-page-transition-fast),
    box-shadow var(--rx-page-transition-fast);
}

.rx-btn:hover {
  background: var(--rx-page-primary-dark);
  border-color: var(--rx-page-primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--rx-page-shadow-md);
}

.rx-btn:active {
  transform: translateY(0);
}

.rx-btn-secondary {
  background: var(--rx-page-secondary);
  border-color: var(--rx-page-secondary);
}

.rx-btn-light {
  background: var(--rx-page-surface);
  color: var(--rx-page-primary) !important;
  border-color: var(--rx-page-border-dark);
}

.rx-btn-light:hover {
  background: var(--rx-page-primary-soft);
  color: var(--rx-page-primary-dark) !important;
}

.rx-btn-danger {
  background: var(--rx-page-danger);
  border-color: var(--rx-page-danger);
}

.rx-btn-sm {
  min-height: 2.25rem;
  padding: 0.5rem 0.85rem;
  font-size: 0.9rem;
}

.rx-btn-lg {
  min-height: 3.25rem;
  padding: 0.95rem 1.35rem;
  font-size: 1.05rem;
}


/* =========================================================
   23. FAQ SECTION
========================================================= */

.rx-faq {
  margin-block: var(--rx-page-gap-xl);
}

.rx-faq-item {
  margin-bottom: 0.85rem;
  background: var(--rx-page-surface);
  border: 1px solid var(--rx-page-border);
  border-radius: var(--rx-page-radius-md);
  overflow: hidden;
}

.rx-faq-question {
  display: block;
  width: 100%;
  padding: 1rem 1.15rem;
  color: var(--rx-page-text);
  font-weight: 800;
  cursor: pointer;
}

.rx-faq-answer {
  padding: 0 1.15rem 1rem;
  color: var(--rx-page-text-soft);
}

.rx-faq-answer p:last-child {
  margin-bottom: 0;
}

.rx-faq details[open] .rx-faq-question {
  color: var(--rx-page-primary);
}


/* =========================================================
   24. TABLE OF CONTENTS
========================================================= */

.rx-toc {
  margin-bottom: var(--rx-page-gap-xl);
  padding: 1.15rem;
  background: var(--rx-page-surface-soft);
  border: 1px solid var(--rx-page-border);
  border-radius: var(--rx-page-radius-lg);
}

.rx-toc-title {
  margin: 0 0 0.75rem;
  color: var(--rx-page-text);
  font-size: 1.1rem;
  font-weight: 800;
}

.rx-toc-list {
  display: grid;
  gap: 0.45rem;
  padding-left: 1.25rem;
  margin: 0;
}

.rx-toc-list a {
  color: var(--rx-page-text-soft);
  text-decoration: none;
}

.rx-toc-list a:hover {
  color: var(--rx-page-primary);
  text-decoration: underline;
}


/* =========================================================
   25. SEARCH PAGE
========================================================= */

.rx-search-header {
  margin-bottom: var(--rx-page-gap-xl);
  padding: 1.35rem;
  background: var(--rx-page-surface);
  border: 1px solid var(--rx-page-border);
  border-radius: var(--rx-page-radius-lg);
}

.rx-search-title {
  margin: 0 0 0.65rem;
  color: var(--rx-page-text);
}

.rx-search-count {
  margin: 0;
  color: var(--rx-page-text-muted);
}

.rx-search-results {
  display: grid;
  gap: var(--rx-page-gap-lg);
}

.rx-search-result {
  padding: 1.25rem;
  background: var(--rx-page-surface);
  border: 1px solid var(--rx-page-border);
  border-radius: var(--rx-page-radius-lg);
  box-shadow: var(--rx-page-shadow-sm);
}

.rx-search-result-title {
  margin: 0 0 0.55rem;
  font-size: 1.35rem;
}

.rx-search-result-title a {
  color: var(--rx-page-text);
  text-decoration: none;
}

.rx-search-result-title a:hover {
  color: var(--rx-page-primary);
}

.rx-search-result-excerpt {
  margin: 0;
  color: var(--rx-page-text-muted);
}


/* =========================================================
   26. ARCHIVE PAGE
========================================================= */

.rx-archive-header {
  margin-bottom: var(--rx-page-gap-xl);
  padding: 1.5rem;
  background: var(--rx-page-surface);
  border: 1px solid var(--rx-page-border);
  border-radius: var(--rx-page-radius-lg);
}

.rx-archive-title {
  margin: 0;
  color: var(--rx-page-text);
  font-size: clamp(1.75rem, 3vw, 2.6rem);
}

.rx-archive-description {
  max-width: 760px;
  margin: 0.75rem 0 0;
  color: var(--rx-page-text-muted);
}

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

.rx-archive-list {
  display: grid;
  gap: var(--rx-page-gap-lg);
}

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


/* =========================================================
   27. ERROR PAGE
========================================================= */

.rx-error-page {
  display: grid;
  place-items: center;
  min-height: 60vh;
  padding-block: var(--rx-page-gap-2xl);
  text-align: center;
}

.rx-error-code {
  margin: 0;
  color: var(--rx-page-primary);
  font-size: clamp(4rem, 15vw, 10rem);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.08em;
}

.rx-error-title {
  margin: 0.75rem 0 0;
  color: var(--rx-page-text);
  font-size: clamp(1.7rem, 4vw, 3rem);
}

.rx-error-text {
  max-width: 620px;
  margin: 1rem auto 0;
  color: var(--rx-page-text-muted);
}

.rx-error-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}


/* =========================================================
   28. ACCESSIBILITY
========================================================= */

.rx-skip-link {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 9999;
  transform: translateY(-150%);
  padding: 0.75rem 1rem;
  background: var(--rx-page-primary);
  color: #ffffff;
  border-radius: var(--rx-page-radius-sm);
  text-decoration: none;
  font-weight: 800;
}

.rx-skip-link:focus {
  transform: translateY(0);
}

.rx-screen-reader-text,
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.rx-screen-reader-text:focus,
.screen-reader-text:focus {
  position: static !important;
  width: auto;
  height: auto;
  clip-path: none;
  white-space: normal;
}

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


/* =========================================================
   29. RESPONSIVE DESIGN
========================================================= */

@media (max-width: 1100px) {
  .rx-page-layout.has-sidebar {
    grid-template-columns: minmax(0, 1fr);
  }

  .rx-sidebar {
    position: static;
  }

  .rx-card-grid,
  .rx-related-grid,
  .rx-archive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rx-archive-list .rx-card {
    grid-template-columns: 220px minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  .rx-page-container,
  .rx-page-hero-inner {
    width: min(100% - 24px, var(--rx-page-container));
  }

  .rx-page-main {
    padding-block: 1.75rem;
  }

  .rx-page-content-box {
    padding: 1.15rem;
    border-radius: var(--rx-page-radius-md);
  }

  .rx-page-hero {
    padding-block: 2.5rem;
  }

  .rx-card-grid,
  .rx-related-grid,
  .rx-archive-grid {
    grid-template-columns: 1fr;
  }

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

  .rx-author-box,
  .rx-comment-body {
    grid-template-columns: 1fr;
  }

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

  .rx-page-content table {
    min-width: 680px;
  }
}

@media (max-width: 480px) {
  .rx-page-meta {
    flex-direction: column;
    gap: 0.5rem;
  }

  .rx-btn {
    width: 100%;
  }

  .rx-error-actions {
    flex-direction: column;
  }

  .rx-page-content h2.rx-heading-numbered::before {
    width: 2rem;
    height: 2rem;
    margin-right: 0.45rem;
  }
}


/* =========================================================
   30. DARK MODE SUPPORT
========================================================= */

@media (prefers-color-scheme: dark) {
  :root {
    --rx-page-bg: #0b1120;
    --rx-page-surface: #111827;
    --rx-page-surface-soft: #1f2937;
    --rx-page-surface-muted: #273449;

    --rx-page-text: #f8fafc;
    --rx-page-text-soft: #d1d5db;
    --rx-page-text-muted: #9ca3af;
    --rx-page-text-light: #6b7280;

    --rx-page-primary: #38bdf8;
    --rx-page-primary-dark: #7dd3fc;
    --rx-page-primary-soft: rgba(56, 189, 248, 0.13);

    --rx-page-secondary: #2dd4bf;
    --rx-page-secondary-soft: rgba(45, 212, 191, 0.12);

    --rx-page-danger: #f87171;
    --rx-page-danger-soft: rgba(248, 113, 113, 0.12);

    --rx-page-warning: #fbbf24;
    --rx-page-warning-soft: rgba(251, 191, 36, 0.12);

    --rx-page-success: #4ade80;
    --rx-page-success-soft: rgba(74, 222, 128, 0.12);

    --rx-page-info: #60a5fa;
    --rx-page-info-soft: rgba(96, 165, 250, 0.12);

    --rx-page-border: rgba(148, 163, 184, 0.18);
    --rx-page-border-dark: rgba(148, 163, 184, 0.32);
  }

  .rx-page-hero {
    background:
      radial-gradient(circle at top left, rgba(56, 189, 248, 0.18), transparent 34%),
      linear-gradient(135deg, #111827 0%, #0b1120 100%);
  }

  .rx-page-content pre {
    background: #020617;
  }

  .rx-form input,
  .rx-form textarea,
  .rx-form select,
  .rx-search-form input,
  .rx-search-form select {
    background: #0f172a;
    color: var(--rx-page-text);
  }

  .rx-page-content mark {
    background: rgba(251, 191, 36, 0.22);
    color: #fde68a;
  }
}


/* Manual dark mode class support */
.rx-dark .rx-page,
.rx-page.rx-dark {
  --rx-page-bg: #0b1120;
  --rx-page-surface: #111827;
  --rx-page-surface-soft: #1f2937;
  --rx-page-surface-muted: #273449;
  --rx-page-text: #f8fafc;
  --rx-page-text-soft: #d1d5db;
  --rx-page-text-muted: #9ca3af;
  --rx-page-border: rgba(148, 163, 184, 0.18);
}


/* =========================================================
   31. PRINT STYLES
========================================================= */

@media print {
  .rx-page {
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 12pt;
  }

  .rx-page-hero,
  .rx-sidebar,
  .rx-breadcrumbs,
  .rx-related-posts,
  .rx-comments-area,
  .rx-pagination,
  .rx-btn,
  .rx-search-form {
    display: none !important;
  }

  .rx-page-container,
  .rx-page-content-box {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .rx-page-content a {
    color: #000000 !important;
    text-decoration: underline !important;
  }

  .rx-page-content a[href]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
  }

  .rx-page-content h1,
  .rx-page-content h2,
  .rx-page-content h3 {
    page-break-after: avoid;
  }

  .rx-page-content img,
  .rx-page-content table,
  .rx-page-content blockquote {
    page-break-inside: avoid;
  }
}


/* =========================================================
   32. UTILITY CLASSES
========================================================= */

.rx-text-left {
  text-align: left;
}

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

.rx-text-right {
  text-align: right;
}

.rx-text-muted {
  color: var(--rx-page-text-muted);
}

.rx-text-primary {
  color: var(--rx-page-primary);
}

.rx-text-success {
  color: var(--rx-page-success);
}

.rx-text-warning {
  color: var(--rx-page-warning);
}

.rx-text-danger {
  color: var(--rx-page-danger);
}

.rx-bg-surface {
  background: var(--rx-page-surface);
}

.rx-bg-soft {
  background: var(--rx-page-surface-soft);
}

.rx-rounded {
  border-radius: var(--rx-page-radius-md);
}

.rx-rounded-lg {
  border-radius: var(--rx-page-radius-lg);
}

.rx-shadow-sm {
  box-shadow: var(--rx-page-shadow-sm);
}

.rx-shadow-md {
  box-shadow: var(--rx-page-shadow-md);
}

.rx-shadow-lg {
  box-shadow: var(--rx-page-shadow-lg);
}

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

.rx-mt-sm {
  margin-top: var(--rx-page-gap-sm);
}

.rx-mt-md {
  margin-top: var(--rx-page-gap-md);
}

.rx-mt-lg {
  margin-top: var(--rx-page-gap-lg);
}

.rx-mt-xl {
  margin-top: var(--rx-page-gap-xl);
}

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

.rx-mb-sm {
  margin-bottom: var(--rx-page-gap-sm);
}

.rx-mb-md {
  margin-bottom: var(--rx-page-gap-md);
}

.rx-mb-lg {
  margin-bottom: var(--rx-page-gap-lg);
}

.rx-mb-xl {
  margin-bottom: var(--rx-page-gap-xl);
}

.rx-p-sm {
  padding: var(--rx-page-gap-sm);
}

.rx-p-md {
  padding: var(--rx-page-gap-md);
}

.rx-p-lg {
  padding: var(--rx-page-gap-lg);
}

.rx-p-xl {
  padding: var(--rx-page-gap-xl);
}

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

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

.rx-overflow-auto {
  overflow: auto;
}

.rx-w-full {
  width: 100%;
}

.rx-max-content {
  max-width: var(--rx-page-content);
  margin-inline: auto;
}

.rx-flex {
  display: flex;
}

.rx-flex-wrap {
  flex-wrap: wrap;
}

.rx-items-center {
  align-items: center;
}

.rx-justify-center {
  justify-content: center;
}

.rx-justify-between {
  justify-content: space-between;
}

.rx-gap-sm {
  gap: var(--rx-page-gap-sm);
}

.rx-gap-md {
  gap: var(--rx-page-gap-md);
}

.rx-gap-lg {
  gap: var(--rx-page-gap-lg);
}

To load it in your RX Theme, add this in your enqueue file or functions.php:

wp_enqueue_style(
    'rx-page',
    get_template_directory_uri() . '/assets/css/rx-page.css',
    array(),
    wp_get_theme()->get('Version')
);

Best naming for this file:

assets/css/rx-page.css

Best use:

For page.php, single.php, archive.php, search.php, 404.php, medical article layout, content design, cards, FAQ, TOC, author box, related posts.

Leave a Reply

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